juxscript 1.1.3 → 1.1.5

package/lib/components/icons.ts

@@ -1,464 +0,0 @@
-/**
- * Icon utilities for components
- * All icons are rendered through Iconify with configurable collections (lucide, heroicons, streamline, etc.)
- */
-
-// Lucide emoji mappings
-const EMOJI_TO_LUCIDE: Record<string, string> = {
-    "✔️": "check-circle",
-    "✓": "check",
-    "❌": "x-circle",
-    "✗": "x",
-    "🔥": "flame",
-    "🚀": "rocket",
-    "⚙️": "settings",
-    "🏠": "home",
-    "👤": "user",
-    "💡": "lightbulb",
-    "🌈": "rainbow",
-    "🧪": "flask-conical",
-    "✉️": "mail",
-    "📞": "phone",
-    "🔍": "search",
-    "❤️": "heart",
-    "⭐": "star",
-    "⚠️": "alert-triangle",
-    "ℹ️": "info",
-    "❓": "help-circle",
-    "👁️": "eye",
-    "👁️‍🗨️": "eye-off",
-    "☰": "menu",
-    "🕐": "clock",
-    "📅": "calendar",
-    "⬇️": "chevron-down",
-    "⬆️": "chevron-up",
-    "⬅️": "chevron-left",
-    "➡️": "chevron-right",
-    "📈": "chart-column-increasing",
-    "📉": "chart-column-decreasing",
-    "⬇": "download",
-    "📤": "upload",
-    "📄": "file-text",
-    "🗑️": "trash-2",
-    "✏️": "edit",
-    "📋": "clipboard",
-    "🔗": "link",
-    "↗️": "external-link",
-    "☀️": "sun",
-    "🌙": "moon",
-    "📊": "bar-chart-3",
-    "🖥️": "layout-dashboard",
-    "📁": "folder",
-    "💰": "coins",
-    "📧": "mail",
-    "✅": "square-check",
-    "🗓️": "calendar-days",
-    "💬": "message-circle",
-    "🌐": "globe",
-    "🔬": "microscope",
-    "💊": "pill",
-    "🔒": "lock",
-    "⚖️": "scale",
-    "🔌": "plug",
-    "🔐": "lock-keyhole",
-    "🏥": "cross",
-    "👥": "users",
-    "💚": "heart",
-    "💸": "banknote",
-    "🧾": "receipt",
-    "➕": "plus",
-    "➖": "minus",
-    "💾": "save",
-    "🩺": "stethoscope",
-    "📦": "package",
-    "👋": "log-out",
-    "📎": "paperclip",
-};
-
-// Heroicons emoji mappings
-const EMOJI_TO_HEROICONS: Record<string, string> = {
-    "✔️": "check-circle",
-    "✓": "check",
-    "❌": "x-circle",
-    "✗": "x-mark",
-    "🔥": "fire",
-    "🚀": "rocket-launch",
-    "⚙️": "cog-6-tooth",
-    "🏠": "home",
-    "👤": "user",
-    "💡": "light-bulb",
-    "🌈": "sparkles",
-    "🧪": "beaker",
-    "✉️": "envelope",
-    "📞": "phone",
-    "🔍": "magnifying-glass",
-    "❤️": "heart",
-    "⭐": "star",
-    "⚠️": "exclamation-triangle",
-    "ℹ️": "information-circle",
-    "❓": "question-mark-circle",
-    "👁️": "eye",
-    "👁️‍🗨️": "eye-slash",
-    "☰": "bars-3",
-    "🕐": "clock",
-    "📅": "calendar",
-    "⬇️": "chevron-down",
-    "⬆️": "chevron-up",
-    "⬅️": "chevron-left",
-    "➡️": "chevron-right",
-    "📈": "chart-bar",
-    "📉": "chart-bar",
-    "⬇": "arrow-down-tray",
-    "📤": "arrow-up-tray",
-    "📄": "document-text",
-    "🗑️": "trash",
-    "✏️": "pencil",
-    "📋": "clipboard",
-    "🔗": "link",
-    "↗️": "arrow-top-right-on-square",
-    "☀️": "sun",
-    "🌙": "moon",
-    "📊": "chart-bar",
-    "🖥️": "computer-desktop",
-    "📁": "folder",
-    "💰": "currency-dollar",
-    "📧": "envelope",
-    "✅": "check-badge",
-    "🗓️": "calendar-days",
-    "💬": "chat-bubble-left",
-    "🌐": "globe-alt",
-    "🔬": "beaker",
-    "💊": "beaker",
-    "🔒": "lock-closed",
-    "⚖️": "scale",
-    "🔌": "bolt",
-    "🔐": "lock-closed",
-    "🏥": "plus",
-    "👥": "user-group",
-    "💚": "heart",
-    "💸": "banknote",
-    "🧾": "document-text",
-    "➕": "plus",
-    "➖": "minus",
-    "💾": "archive-box",
-    "🩺": "heart",
-    "📦": "archive-box",
-    "👋": "arrow-right-on-rectangle",
-    "📎": "paper-clip",
-};
-
-// Material Symbols emoji mappings
-const EMOJI_TO_MATERIAL_SYMBOLS: Record<string, string> = {
-    "✔️": "check-circle",
-    "✓": "check",
-    "❌": "cancel",
-    "✗": "close",
-    "🔥": "local-fire-department",
-    "🚀": "rocket-launch",
-    "⚙️": "settings",
-    "🏠": "home",
-    "👤": "person",
-    "💡": "lightbulb",
-    "🌈": "looks",
-    "🧪": "science",
-    "✉️": "mail",
-    "📞": "call",
-    "🔍": "search",
-    "❤️": "favorite",
-    "⭐": "star",
-    "⚠️": "warning",
-    "ℹ️": "info",
-    "❓": "help",
-    "👁️": "visibility",
-    "👁️‍🗨️": "visibility-off",
-    "☰": "menu",
-    "🕐": "schedule",
-    "📅": "calendar-today",
-    "⬇️": "arrow-downward",
-    "⬆️": "arrow-upward",
-    "⬅️": "arrow-back",
-    "➡️": "arrow-forward",
-    "📈": "trending-up",
-    "📉": "trending-down",
-    "⬇": "download",
-    "📤": "upload",
-    "📄": "description",
-    "🗑️": "delete",
-    "✏️": "edit",
-    "📋": "content-paste",
-    "🔗": "link",
-    "↗️": "open-in-new",
-    "☀️": "sunny",
-    "🌙": "dark-mode",
-    "📊": "bar-chart",
-    "🖥️": "dashboard",
-    "📁": "folder",
-    "💰": "savings",
-    "📧": "mail",
-    "✅": "check-box",
-    "🗓️": "calendar-month",
-    "💬": "chat",
-    "🌐": "public",
-    "🔬": "biotech",
-    "💊": "pill",
-    "🔒": "lock",
-    "⚖️": "balance",
-    "🔌": "power",
-    "🔐": "lock-open",
-    "🏥": "medical-services",
-    "👥": "group",
-    "💚": "favorite",
-    "💸": "payments",
-    "🧾": "receipt",
-    "➕": "add",
-    "➖": "remove",
-    "💾": "save",
-    "🩺": "medical-information",
-    "📦": "package",
-    "👋": "logout",
-    "📎": "attach-file",
-};
-
-// IconPark (icon-park)
-const EMOJI_TO_ICONPARK: Record<string, string> = {
-    "✔️": "check-one",
-    "✓": "check",
-    "❌": "close-one",
-    "✗": "close",
-    "🔥": "fire",
-    "🚀": "rocket-one",
-    "⚙️": "setting-config",
-    "🏠": "home",
-    "👤": "user",
-    "💡": "stack-light",
-    "🌈": "color-filter",
-    "🧪": "test-tube",
-    "✉️": "mail",
-    "📞": "phone-call",
-    "🔍": "search",
-    "❤️": "heart-ballon",
-    "⭐": "star",
-    "⚠️": "caution",
-    "ℹ️": "info",
-    "❓": "help",
-    "👁️": "eyes",
-    "👁️‍🗨️": "visibility-off",
-    "☰": "application-menu",
-    "🕐": "schedule",
-    "📅": "calendar",
-    "⬇️": "arrow-circle-down",
-    "⬆️": "arrow-circle-up",
-    "⬅️": "arrow-circle-left",
-    "➡️": "arrow-circle-right",
-    "📈": "trending-up",
-    "📉": "trending-down",
-    "⬇": "download-one",
-    "📤": "upload-one",
-    "📄": "doc-detail",
-    "🗑️": "delete-five",
-    "✏️": "edit-two",
-    "📋": "clipboard",
-    "🔗": "link-one",
-    "↗️": "circle-right-up",
-    "☀️": "sunrise",
-    "🌙": "death-star",
-    "📊": "chart-line-area",
-    "🖥️": "carousel",
-    "📁": "folder-open",
-    "💰": "dollar",
-    "📧": "mail",
-    "✅": "check-correct",
-    "🗓️": "calendar-dot",
-    "💬": "message",
-    "🌐": "world",
-    "🔬": "microscope",
-    "💊": "pills",
-    "🔒": "lock",
-    "⚖️": "balance-two",
-    "🔌": "power",
-    "🔐": "unlock",
-    "🏥": "hospital",
-    "👥": "every-user",
-    "💚": "favorite",
-    "💸": "payments",
-    "🧾": "receipt",
-    "➕": "add-one",
-    "➖": "reduce-one",
-    "💾": "save-one",
-    "🩺": "stethoscope",
-    "📦": "box",
-    "👋": "logout",
-    "📎": "link",
-};
-
-const ICONIFY_CDN_URL = "https://code.iconify.design/3/3.1.1/iconify.min.js";
-const DEFAULT_ICON_COLLECTION = 'lucide';
-
-/**
- * Render an icon from emoji, icon name, or image path
- * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
- * @param collection - Optional icon collection override (lucide, mdi, tabler, etc.)
- * @returns HTMLElement containing the icon
- *
- * Usage:
- *   const icon = renderIcon('🚀');                 // Default collection icon
- *   const icon = renderIcon('📎', 'mdi');          // MDI collection
- *   const icon = renderIcon('lucide:rocket');      // Explicit lucide collection
- *   const icon = renderIcon('mdi:home');           // Explicit mdi collection
- *   const icon = renderIcon('/icon.png');          // Image element
- */
-export function renderIcon(value: string, collection?: string): HTMLElement {
-    // Check if it's an image path (contains / or . or starts with http)
-    if (value.includes('/') || value.includes('.') || value.startsWith('http')) {
-        return createImageIcon(value);
-    }
-
-    // Check for explicit collection prefix (e.g., lucide:rocket, mdi:home)
-    if (value.includes(':')) {
-        const [prefix, ...rest] = value.split(':');
-        const iconName = rest.join(':');
-
-        // Use the prefix as the collection
-        const element = createIconifyIcon(`${prefix}:${iconName}`);
-        ensureIconifyLoaded();
-        return element;
-    }
-
-    const resolvedCollection = normalizeCollection(collection);
-
-    // Check if it's an emoji that maps to an icon key
-    const iconKey = getIconKeyForEmoji(value, resolvedCollection);
-    if (iconKey) {
-        const element = createIconifyIcon(`${resolvedCollection}:${iconKey}`);
-        ensureIconifyLoaded();
-        return element;
-    }
-
-    // Check if it's a direct icon name (lowercase with hyphens)
-    if (/^[a-z][a-z0-9-]*$/.test(value)) {
-        const element = createIconifyIcon(`${resolvedCollection}:${value}`);
-        ensureIconifyLoaded();
-        return element;
-    }
-
-    // Fallback: render as emoji
-    return createEmojiFallback(value);
-}
-
-/**
- * Render raw emoji without conversion
- * @param emoji - The emoji character
- * @returns HTMLElement containing just the emoji
- */
-export function renderEmoji(emoji: string): HTMLElement {
-    return createEmojiFallback(emoji);
-}
-
-/**
- * Render a library-backed icon by name
- */
-function renderLibraryIcon(iconName: string, collection: string): HTMLElement {
-    const element = createIconifyIcon(`${collection}:${iconName}`);
-    ensureIconifyLoaded();
-    return element;
-}
-
-/**
- * Resolve global/default icon collection
- */
-function normalizeCollection(collection?: string): string {
-    if (collection && typeof collection === 'string' && collection.trim()) {
-        return collection.trim().toLowerCase();
-    }
-
-    const globalCollection = (globalThis as any).JUX_ICON_LIBRARY;
-    if (typeof globalCollection === 'string' && globalCollection.trim()) {
-        return globalCollection.trim().toLowerCase();
-    }
-
-    return DEFAULT_ICON_COLLECTION;
-}
-
-/**
- * Get the icon key for an emoji based on the collection
- */
-function getIconKeyForEmoji(emoji: string, collection: string): string | null {
-    // Normalize collection name for the switch statement
-    const baseCollection = collection.toLowerCase();
-
-    // Look up in the appropriate mapping
-    switch (baseCollection) {
-        case 'lucide':
-            return EMOJI_TO_LUCIDE[emoji] || null;
-        case 'heroicons':
-            return EMOJI_TO_HEROICONS[emoji] || null;
-        case 'material':
-        case 'material-symbols':
-            return EMOJI_TO_MATERIAL_SYMBOLS[emoji] || null;
-        case 'icon-park':
-            return EMOJI_TO_ICONPARK[emoji] || null;
-        default:
-            // Default to lucide for unknown collections
-            return EMOJI_TO_LUCIDE[emoji] || null;
-    }
-}
-
-/**
- * Ensures Iconify is loaded and icons are rendered
- */
-function ensureIconifyLoaded(): void {
-    if ((window as any).Iconify) {
-        // Already loaded, render immediately
-        (window as any).Iconify.scan();
-        return;
-    }
-
-    if (!document.querySelector(`script[src="${ICONIFY_CDN_URL}"]`)) {
-        const script = document.createElement('script');
-        script.src = ICONIFY_CDN_URL;
-        script.onload = () => {
-            if ((window as any).Iconify) {
-                (window as any).Iconify.scan();
-            }
-        };
-        document.head.appendChild(script);
-    }
-}
-
-/**
- * Create image icon element
- */
-function createImageIcon(src: string): HTMLImageElement {
-    const img = document.createElement('img');
-    img.src = src;
-    img.style.width = '24px';
-    img.style.height = '24px';
-    img.style.display = 'inline-block';
-    img.style.objectFit = 'contain';
-    return img;
-}
-
-/**
- * Create Iconify icon element
- */
-function createIconifyIcon(icon: string): HTMLElement {
-    const iconEl = document.createElement('span');
-    iconEl.className = 'iconify';
-    iconEl.setAttribute('data-icon', icon);
-    iconEl.setAttribute('data-mode', 'svg');
-    iconEl.setAttribute('data-inline', 'false');
-    iconEl.style.width = '24px';
-    iconEl.style.height = '24px';
-    iconEl.style.display = 'inline-block';
-    return iconEl;
-}
-
-/**
- * Render native emoji or text
- */
-function createEmojiFallback(emoji: string): HTMLSpanElement {
-    const span = document.createElement('span');
-    span.textContent = emoji;
-    span.style.display = 'inline-block';
-    return span;
-}