@particle-academy/react-fancy 4.4.3 → 4.4.5

package/README.md

@@ -303,3 +303,9 @@ Purely visual primitives (labels, dividers, layout shells) only owe the first bu
 - `react`, `react-dom`, and `lucide-react` are external dependencies, never bundled.
 - After any change, verify with `pnpm --filter @particle-academy/react-fancy build` before considering the work done.
 - When updating a component, update its demo page in `resources/js/react-demos/pages/` to cover all new features.
+
+---
+
+## ⭐ Star Fancy UI
+
+If this package is useful to you, a quick ⭐ on the repo really helps us build a better kit. Thank you!

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);
@@ -3233,7 +3244,11 @@ var Textarea = react.forwardRef(
 );
 Textarea.displayName = "Textarea";
 function Portal({ children, container }) {
-  if (typeof document === "undefined") return null;
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || typeof document === "undefined") return null;
   const target = container ?? document.body;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(PortalDarkWrapper, { children }),
@@ -6612,7 +6627,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 })
             }
           )
         ]
@@ -7851,7 +7866,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 })
           }
         )
       ]
@@ -8030,10 +8045,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 }),
@@ -8046,7 +8061,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 })
           }
         )
       ] })
@@ -8113,7 +8128,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",
       {
@@ -8472,7 +8487,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") })
       ]
     }
   );
@@ -8559,7 +8574,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") })
         ]
       }
     ),
@@ -8584,7 +8599,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;
@@ -8688,7 +8703,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 })
     }
   );
 }
@@ -8768,7 +8783,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(
@@ -8801,7 +8816,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 })
       }
     )
   ] });
@@ -9016,7 +9031,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 })
                   }
                 )
               ]
@@ -9191,7 +9206,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" })
         ] })
       ]
@@ -9219,7 +9234,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(
@@ -9229,7 +9244,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 })
         }
       )
     ] }),
@@ -9247,7 +9262,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(
@@ -9257,7 +9272,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 })
           }
         )
       ]
@@ -9370,15 +9385,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",
@@ -9549,7 +9564,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: [
@@ -9564,7 +9579,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 })
               }
             )
           ] }),
@@ -11226,7 +11241,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" })
               ]
             }
           ),
@@ -11259,7 +11274,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",
@@ -11426,7 +11441,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",
@@ -11464,7 +11479,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" })
     }
   );
 }
@@ -11566,7 +11581,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" })
               }
             )
           ] }),