@particle-academy/react-fancy 1.3.4 → 1.4.0

package/dist/index.cjs

@@ -4506,6 +4506,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 +4534,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 +4570,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 +4600,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 +4630,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,12 +4808,13 @@ 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);
     };
     document.addEventListener("mousedown", listener);
@@ -4781,7 +4823,7 @@ function useOutsideClick(ref, handler, enabled = true) {
       document.removeEventListener("mousedown", listener);
       document.removeEventListener("touchstart", listener);
     };
-  }, [ref, handler, enabled]);
+  }, [ref, handler, enabled, ignoreRef]);
 }
 function useEscapeKey(handler, enabled = true) {
   react.useEffect(() => {
@@ -4835,7 +4877,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,
@@ -4920,7 +4962,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,