refactor flasher theme

src/Prime/Resources/assets/themes/flasher/flasher.ts

@@ -0,0 +1,64 @@
+/**
+ * @file PHPFlasher Default Theme
+ * @description Theme implementation for the default PHPFlasher notification style
+ * @author yoeunes
+ */
+import './flasher.scss'
+import type { Envelope } from '../../types'
+
+/**
+ * The default PHPFlasher theme.
+ *
+ * This theme provides a classic bordered notification style with:
+ * - Colored left border based on notification type
+ * - Icon representing the notification type
+ * - Title and message content
+ * - Close button
+ * - Progress bar for auto-dismiss
+ *
+ * @example
+ * ```typescript
+ * import flasher from '@flasher/flasher';
+ * import { flasherTheme } from '@flasher/flasher/themes';
+ *
+ * // Register the theme if not already registered
+ * flasher.addTheme('custom-name', flasherTheme);
+ *
+ * // Use the theme
+ * flasher.use('theme.custom-name').success('Operation completed');
+ * ```
+ */
+export const flasherTheme = {
+    /**
+     * Renders an envelope as HTML.
+     *
+     * @param envelope - The notification envelope to render
+     * @returns HTML string representation of the notification
+     */
+    render: (envelope: Envelope): string => {
+        const { type, title, message } = envelope
+
+        // Set appropriate ARIA roles based on notification type
+        const isAlert = type === 'error' || type === 'warning'
+        const role = isAlert ? 'alert' : 'status'
+        const ariaLive = isAlert ? 'assertive' : 'polite'
+
+        // Use provided title or capitalize the notification type
+        const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1)
+
+        return `
+            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+                <div class="fl-content">
+                    <div class="fl-icon"></div>
+                    <div>
+                        <strong class="fl-title">${displayTitle}</strong>
+                        <span class="fl-message">${message}</span>
+                    </div>
+                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                </div>
+                <span class="fl-progress-bar">
+                    <span class="fl-progress"></span>
+                </span>
+            </div>`
+    },
+}