@particle-academy/react-fancy 4.4.4 → 4.4.6

package/dist/index.cjs

@@ -3,31 +3,11 @@
 var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var LucideIcons = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var lucideReact = require('lucide-react');
 var marked = require('marked');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
-
 // src/components/Button/Button.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -2122,14 +2102,40 @@ function applyTone(char, tone) {
   const idx = SKIN_TONES.indexOf(tone);
   return entry.skinTones[idx] ?? char;
 }
+
+// src/components/Icon/icon-config.ts
 var registry = /* @__PURE__ */ new Map();
 var defaultSetName = "lucide";
 function kebabToPascal(str) {
   return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
+var lucideModule = null;
+var lucidePromise = null;
+var lucideVersion = 0;
+var lucideListeners = /* @__PURE__ */ new Set();
+function ensureLucideLoaded() {
+  if (lucideModule || lucidePromise) return;
+  lucidePromise = import('lucide-react').then((mod) => {
+    lucideModule = mod;
+    lucideVersion++;
+    for (const listener of lucideListeners) listener();
+  }).catch(() => {
+  });
+}
+function subscribeIconResolution(listener) {
+  lucideListeners.add(listener);
+  return () => lucideListeners.delete(listener);
+}
+function getIconResolutionVersion() {
+  return lucideVersion;
+}
 function resolveFromLucide(name) {
+  if (!lucideModule) {
+    ensureLucideLoaded();
+    return null;
+  }
   const pascal = kebabToPascal(name);
-  const icon = LucideIcons__namespace[pascal];
+  const icon = lucideModule[pascal];
   return typeof icon === "function" || icon && typeof icon === "object" ? icon : null;
 }
 function registerIcons(icons) {
@@ -2182,6 +2188,11 @@ var sizePixels = {
 };
 var Icon = react.forwardRef(
   ({ size = "md", className, children, name, iconSet, ...props }, ref) => {
+    react.useSyncExternalStore(
+      subscribeIconResolution,
+      getIconResolutionVersion,
+      getIconResolutionVersion
+    );
     let content = children;
     if (name && !children) {
       const ResolvedIcon = resolveIcon(name, iconSet);
@@ -3330,6 +3341,28 @@ function useFloatingPosition(anchorRef, floatingRef, options = {}) {
   react.useEffect(() => {
     if (enabled) update();
   });
+  react.useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+    let ro = null;
+    const tick = () => {
+      const el = floatingRef.current;
+      if (el) {
+        update();
+        if (typeof ResizeObserver !== "undefined") {
+          ro = new ResizeObserver(() => update());
+          ro.observe(el);
+        }
+      } else {
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+    };
+  }, [enabled, update, floatingRef]);
   react.useEffect(() => {
     if (!enabled) {
       setPosition(
@@ -6616,7 +6649,7 @@ var Callout = react.forwardRef(
                 "shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current"
               ),
               "aria-label": "Dismiss",
-              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 16 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
             }
           )
         ]
@@ -7855,7 +7888,7 @@ function ModalHeader({ children, className }) {
             onClick: close,
             className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
             "aria-label": "Close",
-            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 20 })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
           }
         )
       ]
@@ -8034,10 +8067,10 @@ function ToastItem({ data, onDismiss }) {
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-0.5 shrink-0", VARIANT_ICON_COLORS[variant]), children: [
-          variant === "success" && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { size: 16 }),
-          variant === "error" && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.XCircle, { size: 16 }),
-          variant === "warning" && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertTriangle, { size: 16 }),
-          variant === "info" && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Info, { size: 16 })
+          variant === "success" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }),
+          variant === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { size: 16 }),
+          variant === "warning" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { size: 16 }),
+          variant === "info" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 16 })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: title }),
@@ -8050,7 +8083,7 @@ function ToastItem({ data, onDismiss }) {
             onClick: () => onDismiss(id),
             className: "shrink-0 rounded p-0.5 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-300",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 14 })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
           }
         )
       ] })
@@ -8117,7 +8150,7 @@ function CommandInput({
 }) {
   const { query, setQuery } = useCommand();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-command-input": "", className: "flex items-center border-b border-zinc-200 px-4 dark:border-zinc-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { size: 16, className: "shrink-0 text-zinc-400" }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, className: "shrink-0 text-zinc-400" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -8476,7 +8509,7 @@ function AccordionTrigger({
       ),
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { size: 16, className: cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180") })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16, className: cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180") })
       ]
     }
   );
@@ -8563,7 +8596,7 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
         className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
         children: [
           activeLabel,
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { size: 14, className: cn("transition-transform", open && "rotate-180") })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, className: cn("transition-transform", open && "rotate-180") })
         ]
       }
     ),
@@ -8588,7 +8621,7 @@ function BreadcrumbsRoot({
 }) {
   const items = react.Children.toArray(children);
   const [expanded, setExpanded] = react.useState(false);
-  const sep = separator ?? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { size: 12, className: "text-zinc-400" });
+  const sep = separator ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 12, className: "text-zinc-400" });
   const lastItem = items[items.length - 1];
   const dropdownItems = items.map((child) => {
     const el = child;
@@ -8692,7 +8725,7 @@ function NavbarToggle({ className }) {
       ),
       "aria-label": "Toggle navigation",
       "aria-expanded": mobileOpen,
-      children: mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { size: 20 })
+      children: mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { size: 20 })
     }
   );
 }
@@ -8772,7 +8805,7 @@ function Pagination({
         onClick: () => onPageChange(page - 1),
         className: cn(btnBase, btnDefault, page <= 1 && btnDisabled, "px-2"),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { size: 16 })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
       }
     ),
     pages.map(
@@ -8805,7 +8838,7 @@ function Pagination({
           "px-2"
         ),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { size: 16 })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
       }
     )
   ] });
@@ -9020,7 +9053,7 @@ var Pillbox = react.forwardRef(
                     },
                     className: "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
                     "aria-label": `Remove ${item}`,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 12 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
                   }
                 )
               ]
@@ -9195,7 +9228,7 @@ function FileUploadDropzone({
           }
         ),
         children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { size: 32, strokeWidth: 1.5, className: "mb-2 text-zinc-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 32, strokeWidth: 1.5, className: "mb-2 text-zinc-400" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-500", children: "Drop files here or click to browse" })
         ] })
       ]
@@ -9223,7 +9256,7 @@ function ThumbnailItem({ file, index, onRemove }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative flex w-20 flex-col items-center gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-20 w-20 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800", children: [
       isImage && objectUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: objectUrl, alt: file.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.File, { size: 20, className: "text-zinc-400" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { size: 20, className: "text-zinc-400" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-zinc-500", children: getExtension(file.name) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -9233,7 +9266,7 @@ function ThumbnailItem({ file, index, onRemove }) {
           onClick: () => onRemove(index),
           className: "absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity hover:bg-black/80 group-hover:opacity-100",
           "aria-label": `Remove ${file.name}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 10 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 10 })
         }
       )
     ] }),
@@ -9251,7 +9284,7 @@ function FileUploadList({ thumbnail, className }) {
     {
       className: "flex items-center gap-3 rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.File, { size: 16, className: "shrink-0 text-zinc-400" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { size: 16, className: "shrink-0 text-zinc-400" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: file.name }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-zinc-400", children: formatSize(file.size) }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9261,7 +9294,7 @@ function FileUploadList({ thumbnail, className }) {
             onClick: () => removeFile(i),
             className: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
             "aria-label": `Remove ${file.name}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 14 })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
           }
         )
       ]
@@ -9374,15 +9407,15 @@ var TimePicker = react.forwardRef(
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: displayClass, children: pad(displayHour) }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(-1), disabled, className: spinBtnClass, "aria-label": "Decrease hour", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { size: 14 }) })
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(-1), disabled, className: spinBtnClass, "aria-label": "Decrease hour", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg text-zinc-400", children: ":" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeMinute(minuteStep), disabled, className: spinBtnClass, "aria-label": "Increase minute", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeMinute(minuteStep), disabled, className: spinBtnClass, "aria-label": "Increase minute", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: displayClass, children: pad(minutes) }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeMinute(-minuteStep), disabled, className: spinBtnClass, "aria-label": "Decrease minute", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { size: 14 }) })
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeMinute(-minuteStep), disabled, className: spinBtnClass, "aria-label": "Decrease minute", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }) })
           ] }),
           format === "12h" && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -9553,7 +9586,7 @@ var Calendar = react.forwardRef(
                 onClick: prevMonth,
                 className: "rounded-lg p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800",
                 "aria-label": "Previous month",
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { size: 16 })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold", children: [
@@ -9568,7 +9601,7 @@ var Calendar = react.forwardRef(
                 onClick: nextMonth,
                 className: "rounded-lg p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800",
                 "aria-label": "Next month",
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { size: 16 })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
               }
             )
           ] }),
@@ -11230,7 +11263,7 @@ function MenuSubmenu({
               children: [
                 icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
               ]
             }
           ),
@@ -11263,7 +11296,7 @@ function MenuSubmenu({
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            LucideIcons.ChevronDown,
+            lucideReact.ChevronDown,
             {
               className: cn(
                 "h-3.5 w-3.5 opacity-60 transition-transform duration-200",
@@ -11430,7 +11463,7 @@ function SidebarSubmenu({
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            LucideIcons.ChevronDown,
+            lucideReact.ChevronDown,
             {
               className: cn(
                 "h-3.5 w-3.5 opacity-60 transition-transform duration-200",
@@ -11468,7 +11501,7 @@ function SidebarToggle({ className }) {
         "hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
         className
       ),
-      children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelLeftOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelLeftClose, { className: "h-4 w-4" })
+      children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "h-4 w-4" })
     }
   );
 }
@@ -11570,7 +11603,7 @@ function MobileMenuFlyout({
                 type: "button",
                 onClick: onClose,
                 className: "flex h-8 w-8 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
               }
             )
           ] }),