@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/NiceIconPreview.js

@@ -1,197 +1,257 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useNiceTranslation } from '@nice2dev/ui-core';
-import { useState, useMemo } from 'react';
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Constants
-   ══════════════════════════════════════════════════════════════════════════════ */
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNiceTranslation } from "@nice2dev/ui-core";
+import { useState, useMemo } from "react";
 const DEFAULT_SIZES = [
-    { label: '12px', size: 12 },
-    { label: '16px', size: 16 },
-    { label: '20px', size: 20 },
-    { label: '24px', size: 24 },
-    { label: '32px', size: 32 },
-    { label: '48px', size: 48 },
-    { label: '64px', size: 64 },
-    { label: '96px', size: 96 },
+  { label: "12px", size: 12 },
+  { label: "16px", size: 16 },
+  { label: "20px", size: 20 },
+  { label: "24px", size: 24 },
+  { label: "32px", size: 32 },
+  { label: "48px", size: 48 },
+  { label: "64px", size: 64 },
+  { label: "96px", size: 96 }
 ];
 const DEFAULT_ANIMATIONS = [
-    { name: 'Spin', className: 'nice-icon-spin' },
-    { name: 'Pulse', className: 'nice-icon-pulse' },
-    { name: 'Bounce', className: 'nice-icon-bounce' },
-    { name: 'Shake', className: 'nice-icon-shake' },
-    { name: 'Fade', className: 'nice-icon-fade' },
+  { name: "Spin", className: "nice-icon-spin" },
+  { name: "Pulse", className: "nice-icon-pulse" },
+  { name: "Bounce", className: "nice-icon-bounce" },
+  { name: "Shake", className: "nice-icon-shake" },
+  { name: "Fade", className: "nice-icon-fade" }
 ];
 const BACKGROUND_COLORS = {
-    light: '#ffffff',
-    dark: '#1e1e1e',
-    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  light: "#ffffff",
+  dark: "#1e1e1e",
+  gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
 };
-/* ══════════════════════════════════════════════════════════════════════════════
-   Animation Styles (inline CSS)
-   ══════════════════════════════════════════════════════════════════════════════ */
-const animationCSS = `
-  @keyframes nice-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-  @keyframes nice-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-  @keyframes nice-bounce {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-25%); }
-  }
-  @keyframes nice-shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
-  }
-  @keyframes nice-fade {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
-  }
-  .nice-icon-spin { animation: nice-spin 1s linear infinite; }
-  .nice-icon-pulse { animation: nice-pulse 2s ease-in-out infinite; }
-  .nice-icon-bounce { animation: nice-bounce 1s ease-in-out infinite; }
-  .nice-icon-shake { animation: nice-shake 0.5s ease-in-out infinite; }
-  .nice-icon-fade { animation: nice-fade 2s ease-in-out infinite; }
+const animationCSS = `
+  @keyframes nice-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  @keyframes nice-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  @keyframes nice-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-25%); }
+  }
+  @keyframes nice-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+  }
+  @keyframes nice-fade {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+  .nice-icon-spin { animation: nice-spin 1s linear infinite; }
+  .nice-icon-pulse { animation: nice-pulse 2s ease-in-out infinite; }
+  .nice-icon-bounce { animation: nice-bounce 1s ease-in-out infinite; }
+  .nice-icon-shake { animation: nice-shake 0.5s ease-in-out infinite; }
+  .nice-icon-fade { animation: nice-fade 2s ease-in-out infinite; }
 `;
-/* ══════════════════════════════════════════════════════════════════════════════
-   Component
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Icon preview component with multiple modes and sizes.
- */
-function NiceIconPreview({ icon: Icon, iconName = 'Icon', mode = 'both', layout = 'grid', sizes = DEFAULT_SIZES, showAnimation = true, animations = DEFAULT_ANIMATIONS, fill, className = '', }) {
-    const { t } = useNiceTranslation();
-    const [selectedAnimation, setSelectedAnimation] = useState(null);
-    // Inject animation styles
-    const styleSheet = useMemo(() => jsx("style", { dangerouslySetInnerHTML: { __html: animationCSS } }), []);
-    // Render icon with settings
-    const renderIcon = (size, bgMode, customFill) => {
-        const iconFill = customFill || (bgMode === 'dark' ? '#ffffff' : '#1e1e1e');
-        return (jsx("div", { style: {
-                ...styles.previewCell,
-                background: BACKGROUND_COLORS[bgMode],
-            }, children: jsx(Icon, { size: size, fill: iconFill, className: selectedAnimation || undefined }) }));
-    };
-    return (jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [styleSheet, jsxs("div", { style: styles.header, children: [jsx("h3", { style: styles.title, children: iconName }), showAnimation && (jsxs("div", { style: styles.animationControls, children: [jsx("span", { style: styles.animationLabel, children: t('iconPreview.animation', 'Animation:') }), jsxs("select", { value: selectedAnimation || '', onChange: (e) => setSelectedAnimation(e.target.value || null), style: styles.select, children: [jsx("option", { value: "", children: t('iconPreview.none', 'None') }), animations.map((a) => (jsx("option", { value: a.className, children: a.name }, a.className)))] })] }))] }), layout === 'grid' && (jsxs("div", { style: styles.gridContainer, children: [(mode === 'light' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.lightMode', 'Light Mode') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'light', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), (mode === 'dark' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.darkMode', 'Dark Mode') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'dark', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), mode === 'gradient' && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.gradientBackground', 'Gradient Background') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'gradient', '#ffffff'), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] }))] })), layout === 'list' && (jsx("div", { style: styles.listContainer, children: sizes.map((s) => (jsxs("div", { style: styles.listRow, children: [jsx("span", { style: styles.listLabel, children: s.label }), renderIcon(s.size, 'light', fill), renderIcon(s.size, 'dark', fill)] }, s.size))) })), layout === 'comparison' && (jsxs("div", { style: styles.comparisonContainer, children: [jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.light', 'Light') }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: jsx(Icon, { size: 96, fill: fill || '#1e1e1e', className: selectedAnimation || undefined }) })] }), jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.dark', 'Dark') }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: jsx(Icon, { size: 96, fill: fill || '#ffffff', className: selectedAnimation || undefined }) })] })] }))] }));
+function NiceIconPreview({
+  icon: Icon,
+  iconName = "Icon",
+  mode = "both",
+  layout = "grid",
+  sizes = DEFAULT_SIZES,
+  showAnimation = true,
+  animations = DEFAULT_ANIMATIONS,
+  fill,
+  className = ""
+}) {
+  const { t } = useNiceTranslation();
+  const [selectedAnimation, setSelectedAnimation] = useState(null);
+  const styleSheet = useMemo(
+    () => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: animationCSS } }),
+    []
+  );
+  const renderIcon = (size, bgMode, customFill) => {
+    const iconFill = customFill || (bgMode === "dark" ? "#ffffff" : "#1e1e1e");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...styles.previewCell,
+          background: BACKGROUND_COLORS[bgMode]
+        },
+        children: /* @__PURE__ */ jsx(Icon, { size, fill: iconFill, className: selectedAnimation || void 0 })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [
+    styleSheet,
+    /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx("h3", { style: styles.title, children: iconName }),
+      showAnimation && /* @__PURE__ */ jsxs("div", { style: styles.animationControls, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.animationLabel, children: t("iconPreview.animation", "Animation:") }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: selectedAnimation || "",
+            onChange: (e) => setSelectedAnimation(e.target.value || null),
+            style: styles.select,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("iconPreview.none", "None") }),
+              animations.map((a) => /* @__PURE__ */ jsx("option", { value: a.className, children: a.name }, a.className))
+            ]
+          }
+        )
+      ] })
+    ] }),
+    layout === "grid" && /* @__PURE__ */ jsxs("div", { style: styles.gridContainer, children: [
+      (mode === "light" || mode === "both") && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("h4", { style: styles.sectionTitle, children: t("iconPreview.lightMode", "Light Mode") }),
+        /* @__PURE__ */ jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => /* @__PURE__ */ jsxs("div", { style: styles.sizeItem, children: [
+          renderIcon(s.size, "light", fill),
+          /* @__PURE__ */ jsx("span", { style: styles.sizeLabel, children: s.label })
+        ] }, s.size)) })
+      ] }),
+      (mode === "dark" || mode === "both") && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("h4", { style: styles.sectionTitle, children: t("iconPreview.darkMode", "Dark Mode") }),
+        /* @__PURE__ */ jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => /* @__PURE__ */ jsxs("div", { style: styles.sizeItem, children: [
+          renderIcon(s.size, "dark", fill),
+          /* @__PURE__ */ jsx("span", { style: styles.sizeLabel, children: s.label })
+        ] }, s.size)) })
+      ] }),
+      mode === "gradient" && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("h4", { style: styles.sectionTitle, children: t("iconPreview.gradientBackground", "Gradient Background") }),
+        /* @__PURE__ */ jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => /* @__PURE__ */ jsxs("div", { style: styles.sizeItem, children: [
+          renderIcon(s.size, "gradient", "#ffffff"),
+          /* @__PURE__ */ jsx("span", { style: styles.sizeLabel, children: s.label })
+        ] }, s.size)) })
+      ] })
+    ] }),
+    layout === "list" && /* @__PURE__ */ jsx("div", { style: styles.listContainer, children: sizes.map((s) => /* @__PURE__ */ jsxs("div", { style: styles.listRow, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.listLabel, children: s.label }),
+      renderIcon(s.size, "light", fill),
+      renderIcon(s.size, "dark", fill)
+    ] }, s.size)) }),
+    layout === "comparison" && /* @__PURE__ */ jsxs("div", { style: styles.comparisonContainer, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.comparisonSide, children: [
+        /* @__PURE__ */ jsx("h4", { style: styles.sectionTitle, children: t("iconPreview.light", "Light") }),
+        /* @__PURE__ */ jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: /* @__PURE__ */ jsx(Icon, { size: 96, fill: fill || "#1e1e1e", className: selectedAnimation || void 0 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.comparisonSide, children: [
+        /* @__PURE__ */ jsx("h4", { style: styles.sectionTitle, children: t("iconPreview.dark", "Dark") }),
+        /* @__PURE__ */ jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: /* @__PURE__ */ jsx(Icon, { size: 96, fill: fill || "#ffffff", className: selectedAnimation || void 0 }) })
+      ] })
+    ] })
+  ] });
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Styles
-   ══════════════════════════════════════════════════════════════════════════════ */
 const styles = {
-    container: {
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: '14px',
-        border: '1px solid #e5e7eb',
-        borderRadius: '8px',
-        overflow: 'hidden',
-    },
-    header: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '12px 16px',
-        borderBottom: '1px solid #e5e7eb',
-        backgroundColor: '#f9fafb',
-    },
-    title: {
-        margin: 0,
-        fontSize: '16px',
-        fontWeight: 600,
-    },
-    animationControls: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-    },
-    animationLabel: {
-        fontSize: '12px',
-        color: '#6b7280',
-    },
-    select: {
-        padding: '4px 8px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        fontSize: '12px',
-    },
-    gridContainer: {
-        padding: '16px',
-    },
-    section: {
-        marginBottom: '20px',
-    },
-    sectionTitle: {
-        margin: '0 0 12px 0',
-        fontSize: '13px',
-        fontWeight: 600,
-        color: '#6b7280',
-        textTransform: 'uppercase',
-        letterSpacing: '0.5px',
-    },
-    sizeGrid: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '12px',
-    },
-    sizeItem: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '6px',
-    },
-    previewCell: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '12px',
-        borderRadius: '8px',
-        minWidth: '48px',
-        minHeight: '48px',
-        border: '1px solid #e5e7eb',
-    },
-    sizeLabel: {
-        fontSize: '11px',
-        color: '#9ca3af',
-    },
-    listContainer: {
-        padding: '16px',
-    },
-    listRow: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '16px',
-        padding: '8px 0',
-        borderBottom: '1px solid #f3f4f6',
-    },
-    listLabel: {
-        width: '60px',
-        fontSize: '12px',
-        color: '#6b7280',
-    },
-    comparisonContainer: {
-        display: 'flex',
-        padding: '16px',
-        gap: '16px',
-    },
-    comparisonSide: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-    },
-    comparisonBox: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        padding: '32px',
-        borderRadius: '8px',
-        border: '1px solid #e5e7eb',
-    },
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 16px",
+    borderBottom: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb"
+  },
+  title: {
+    margin: 0,
+    fontSize: "16px",
+    fontWeight: 600
+  },
+  animationControls: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  animationLabel: {
+    fontSize: "12px",
+    color: "#6b7280"
+  },
+  select: {
+    padding: "4px 8px",
+    borderRadius: "4px",
+    border: "1px solid #d1d5db",
+    fontSize: "12px"
+  },
+  gridContainer: {
+    padding: "16px"
+  },
+  section: {
+    marginBottom: "20px"
+  },
+  sectionTitle: {
+    margin: "0 0 12px 0",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  sizeGrid: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "12px"
+  },
+  sizeItem: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "6px"
+  },
+  previewCell: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "12px",
+    borderRadius: "8px",
+    minWidth: "48px",
+    minHeight: "48px",
+    border: "1px solid #e5e7eb"
+  },
+  sizeLabel: {
+    fontSize: "11px",
+    color: "#9ca3af"
+  },
+  listContainer: {
+    padding: "16px"
+  },
+  listRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "16px",
+    padding: "8px 0",
+    borderBottom: "1px solid #f3f4f6"
+  },
+  listLabel: {
+    width: "60px",
+    fontSize: "12px",
+    color: "#6b7280"
+  },
+  comparisonContainer: {
+    display: "flex",
+    padding: "16px",
+    gap: "16px"
+  },
+  comparisonSide: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  comparisonBox: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    padding: "32px",
+    borderRadius: "8px",
+    border: "1px solid #e5e7eb"
+  }
+};
+export {
+  NiceIconPreview
 };
-
-export { NiceIconPreview };