@particle-academy/react-fancy 1.3.5 → 1.5.0

package/dist/index.cjs

@@ -3024,7 +3024,7 @@ var CarouselPanels = react.forwardRef(
       }
     }, [activeIndex, transition]);
     if (transition === "fade") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
@@ -3038,13 +3038,13 @@ var CarouselPanels = react.forwardRef(
         activeIndex
       ) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
   }
 );
 CarouselPanels.displayName = "CarouselPanels";
 var CarouselSlide = react.forwardRef(
   ({ children, className, name: _name }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-slide": "", className: cn("w-full", className), children });
   }
 );
 CarouselSlide.displayName = "CarouselSlide";
@@ -3062,7 +3062,7 @@ var CarouselControls = react.forwardRef(
     const isFirst = activeIndex === 0;
     const isLast = activeIndex === totalSlides - 1;
     if (variant === "wizard") {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-2", className), children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -3094,7 +3094,7 @@ var CarouselControls = react.forwardRef(
     }
     const prevDisabled = !loop && isFirst;
     const nextDisabled = !loop && isLast;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -3126,7 +3126,7 @@ var CarouselSteps = react.forwardRef(
       return null;
     }
     if (variant === "wizard") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-3", className), children: Array.from({ length: totalSlides }, (_, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-3", className), children: Array.from({ length: totalSlides }, (_, i) => {
         const isActive = i === activeIndex;
         const isCompleted = i < activeIndex;
         const name = slideNames[i];
@@ -3163,7 +3163,7 @@ var CarouselSteps = react.forwardRef(
         );
       }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -3484,10 +3484,10 @@ function useTable() {
   return ctx;
 }
 function TableHead({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { "data-react-fancy-table-head": "", className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
 }
 function TableBody({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { "data-react-fancy-table-body": "", className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
 }
 function TableRow({
   children,
@@ -3536,6 +3536,7 @@ function TableRow({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "tr",
       {
+        "data-react-fancy-table-row": "",
         className: cn(
           "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
           onClick && "cursor-pointer",
@@ -3557,6 +3558,7 @@ function TableCell({ children, className, header }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
+      "data-react-fancy-table-cell": "",
       className: cn(
         "px-4 py-3 text-sm",
         header && "text-left font-medium text-zinc-500 dark:text-zinc-400",
@@ -3572,6 +3574,7 @@ function TableColumn({ label, sortKey, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
+      "data-react-fancy-table-column": "",
       className: cn(
         "px-4 py-3 text-left text-sm font-medium text-zinc-500 dark:text-zinc-400",
         sortKey && "cursor-pointer select-none",
@@ -3593,7 +3596,7 @@ function TablePagination({
   const { page, setPage } = useTable();
   const totalPages = Math.ceil(total / pageSize);
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-table-pagination": "", className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500", children: [
       "Page ",
       page + 1,
@@ -3632,6 +3635,7 @@ function TableSearch({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
+      "data-react-fancy-table-search": "",
       type: "text",
       value: searchQuery,
       onChange: (e) => setSearchQuery(e.target.value),
@@ -3644,7 +3648,7 @@ function TableSearch({
   );
 }
 function TableTray({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between px-4 py-3", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-table-tray": "", className: cn("flex items-center justify-between px-4 py-3", className), children });
 }
 function TableRowTray({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4506,6 +4510,13 @@ var Callout = react.forwardRef(
   }
 );
 Callout.displayName = "Callout";
+var TimelineContext = react.createContext({
+  orientation: "vertical",
+  index: 0
+});
+function useTimeline() {
+  return react.useContext(TimelineContext);
+}
 var dotColorClasses2 = {
   blue: "bg-blue-500 dark:bg-blue-400",
   green: "bg-green-500 dark:bg-green-400",
@@ -4527,6 +4538,34 @@ var ringColorClasses = {
   red: "ring-red-500/30 dark:ring-red-400/30",
   zinc: "ring-zinc-400/30 dark:ring-zinc-500/30"
 };
+function Dot({ icon, color, active }) {
+  const c = color ?? "zinc";
+  if (icon) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-zinc-900",
+          iconColorClasses2[c],
+          active && "ring-4",
+          active && ringColorClasses[c]
+        ),
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "h-3 w-3 rounded-full",
+        dotColorClasses2[c],
+        active && "ring-4",
+        active && ringColorClasses[c]
+      )
+    }
+  );
+}
 var TimelineItem = react.forwardRef(
   ({
     children,
@@ -4535,6 +4574,28 @@ var TimelineItem = react.forwardRef(
     active = false,
     className
   }, ref) => {
+    const { orientation, index } = useTimeline();
+    if (orientation === "horizontal") {
+      const isTop = index % 2 === 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-timeline-item": "",
+          className: cn("relative flex flex-col items-center", className),
+          style: { minWidth: 120 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-[4rem] items-end pb-2", !isTop && "invisible"), children: isTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-center", children }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center justify-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, color, active }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-[4rem] items-start pt-2", isTop && "invisible"), children: !isTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-center", children }) })
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -4543,28 +4604,7 @@ var TimelineItem = react.forwardRef(
         className: cn("relative flex gap-4 pb-8 last:pb-0", className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-6 bottom-0 w-px bg-zinc-200 last:hidden dark:bg-zinc-700" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex shrink-0", children: icon ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-zinc-900",
-                iconColorClasses2[color],
-                active && "ring-4",
-                active && ringColorClasses[color]
-              ),
-              children: icon
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "mt-1.5 h-3 w-3 rounded-full",
-                dotColorClasses2[color],
-                active && "ring-4",
-                active && ringColorClasses[color]
-              )
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex shrink-0 mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, color, active }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pt-0.5", children })
         ]
       }
@@ -4594,14 +4634,19 @@ var TimelineBlock = react.forwardRef(
 );
 TimelineBlock.displayName = "TimelineBlock";
 var TimelineRoot = react.forwardRef(
-  ({ children, className }, ref) => {
+  ({ children, orientation = "vertical", className }, ref) => {
+    const items = react.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-react-fancy-timeline": "",
-        className: cn("flex flex-col", className),
-        children
+        "data-orientation": orientation,
+        className: cn(
+          orientation === "vertical" ? "flex flex-col" : "flex flex-row items-center overflow-x-auto",
+          className
+        ),
+        children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: { orientation, index: i }, children: child }, i))
       }
     );
   }
@@ -4767,24 +4812,22 @@ function PopoverTrigger({ children }) {
   });
 }
 PopoverTrigger.displayName = "PopoverTrigger";
-function useOutsideClick(ref, handler, enabled = true) {
+function useOutsideClick(ref, handler, enabled = true, ignoreRef) {
   react.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       const el = ref.current;
       if (!el || el.contains(event.target)) return;
+      if (ignoreRef?.current?.contains(event.target)) return;
       handler(event);
     };
-    const raf = requestAnimationFrame(() => {
-      document.addEventListener("mousedown", listener);
-      document.addEventListener("touchstart", listener);
-    });
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
     return () => {
-      cancelAnimationFrame(raf);
       document.removeEventListener("mousedown", listener);
       document.removeEventListener("touchstart", listener);
     };
-  }, [ref, handler, enabled]);
+  }, [ref, handler, enabled, ignoreRef]);
 }
 function useEscapeKey(handler, enabled = true) {
   react.useEffect(() => {
@@ -4838,7 +4881,7 @@ function PopoverContent({ children, className }) {
     enabled: open
   });
   const close = react.useCallback(() => setOpen(false), [setOpen]);
-  useOutsideClick(outsideRef, close, open);
+  useOutsideClick(outsideRef, close, open, anchorRef);
   useEscapeKey(close, open);
   const { mounted, className: animClass, ref: animRef } = useAnimation({
     open,
@@ -4923,7 +4966,7 @@ function DropdownItems({ children, className }) {
     setOpen(false);
     setActiveIndex(-1);
   }, [setOpen, setActiveIndex]);
-  useOutsideClick(outsideRef, close, open);
+  useOutsideClick(outsideRef, close, open, anchorRef);
   useEscapeKey(close, open);
   const { mounted, className: animClass, ref: animRef } = useAnimation({
     open,
@@ -5010,6 +5053,7 @@ function DropdownSeparator({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-react-fancy-dropdown-separator": "",
       role: "separator",
       className: cn(
         "my-1 h-px bg-zinc-200 dark:bg-zinc-700",
@@ -5063,7 +5107,7 @@ function ContextMenuTrigger({
     },
     [ctx]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { onContextMenu: handleContextMenu, className: cn(className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-context-menu-trigger": "", onContextMenu: handleContextMenu, className: cn(className), children });
 }
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 function ContextMenuContent({
@@ -5113,6 +5157,7 @@ function ContextMenuItem({
     "button",
     {
       type: "button",
+      "data-react-fancy-context-menu-item": "",
       role: "menuitem",
       disabled,
       "aria-disabled": disabled,
@@ -5136,6 +5181,7 @@ function ContextMenuSeparator({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-react-fancy-context-menu-separator": "",
       role: "separator",
       className: cn("my-1 h-px bg-zinc-200 dark:bg-zinc-700", className)
     }
@@ -5875,7 +5921,7 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
   const ref = react.useRef(null);
   useOutsideClick(ref, () => setOpen(false), open);
   useEscapeKey(() => setOpen(false), open);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative flex md:hidden", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-breadcrumbs-dropdown": "", className: "relative flex md:hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -7397,6 +7443,7 @@ function ChartLine({
     "div",
     {
       ref: containerRef,
+      "data-react-fancy-chart-line": "",
       className: cn("relative", className),
       onMouseMove: handleMouseMove,
       onMouseLeave: () => setHoverInfo(null),
@@ -7557,7 +7604,7 @@ function ChartPie({
     const rect = containerRef.current.getBoundingClientRect();
     setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex items-center gap-6", className), onMouseMove: handleMouseMove, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, "data-react-fancy-chart-pie": "", className: cn("relative inline-flex items-center gap-6", className), onMouseMove: handleMouseMove, children: [
     /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, children: slices.map((slice, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -7715,7 +7762,7 @@ function ChartStackedBar({
     setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
   const svgProps = responsive ? { viewBox: `0 0 ${width} ${height}`, width: "100%", preserveAspectRatio: "xMidYMid meet" } : { width, height };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative", className), onMouseMove: handleMouseMove, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, "data-react-fancy-chart-stacked-bar": "", className: cn("relative", className), onMouseMove: handleMouseMove, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svgProps, height: responsive ? void 0 : height, children: [
       grid && /* @__PURE__ */ jsxRuntime.jsx(
         ChartGrid,