@szum-tech/design-system 3.8.1 → 3.10.0

package/dist/chunk-D4QID7AI.cjs

@@ -0,0 +1,607 @@
+'use strict';
+
+var chunk7EYMOUWG_cjs = require('./chunk-7EYMOUWG.cjs');
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+
+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 React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var DirectionContext = React2__namespace.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React2__namespace.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+// src/components/timeline/timeline.constants.ts
+var TIMELINE_ROOT_NAME = "Timeline";
+var TIMELINE_ITEM_NAME = "TimelineItem";
+var TIMELINE_CONTENT_NAME = "TimelineContent";
+var TIMELINE_CONNECTOR_NAME = "TimelineConnector";
+var TIMELINE_DOT_NAME = "TimelineDot";
+
+// src/components/timeline/timeline.store.tsx
+var TimelineStoreContext = React2__namespace.createContext(null);
+function useTimelineStore(selector) {
+  const store = React2__namespace.useContext(TimelineStoreContext);
+  if (!store) {
+    throw new Error(`\`useTimelineStore\` must be used within \`${TIMELINE_ROOT_NAME}\``);
+  }
+  const getSnapshot = React2__namespace.useCallback(() => selector(store), [store, selector]);
+  return React2__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useTimelineStoreContext(consumerName) {
+  const context = React2__namespace.useContext(TimelineStoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${TIMELINE_ROOT_NAME}\``);
+  }
+  return context;
+}
+
+// src/components/timeline/timeline.utils.ts
+function getItemStatus(itemIndex, activeIndex) {
+  if (activeIndex === void 0) return "pending";
+  if (itemIndex < activeIndex) return "completed";
+  if (itemIndex === activeIndex) return "active";
+  return "pending";
+}
+function getSortedEntries(entries) {
+  return entries.sort((a, b) => {
+    const elementA = a[1].current;
+    const elementB = b[1].current;
+    if (!elementA || !elementB) return 0;
+    const position = elementA.compareDocumentPosition(elementB);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    return 0;
+  });
+}
+var TimelineContext = React2__namespace.createContext(null);
+function useTimelineContext(consumerName) {
+  const context = React2__namespace.useContext(TimelineContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${TIMELINE_ROOT_NAME}\``);
+  }
+  return context;
+}
+var timelineVariants = classVarianceAuthority.cva(
+  "relative flex [--timeline-connector-thickness:0.125rem] [--timeline-dot-size:0.875rem]",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col",
+        horizontal: "flex-row items-start"
+      },
+      variant: {
+        default: "",
+        alternate: ""
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "vertical",
+        variant: "default",
+        class: "gap-6"
+      },
+      {
+        orientation: "horizontal",
+        variant: "default",
+        class: "gap-8"
+      },
+      {
+        orientation: "vertical",
+        variant: "alternate",
+        class: "relative w-full gap-3"
+      },
+      {
+        orientation: "horizontal",
+        variant: "alternate",
+        class: "items-center gap-4"
+      }
+    ],
+    defaultVariants: {
+      orientation: "vertical",
+      variant: "default"
+    }
+  }
+);
+var timelineItemVariants = classVarianceAuthority.cva("relative flex", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      variant: "default",
+      class: "gap-3 pb-8 last:pb-0"
+    },
+    {
+      orientation: "horizontal",
+      variant: "default",
+      class: "flex-col gap-3"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: false,
+      class: "w-1/2 gap-3 pr-6 pb-12 last:pb-0"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: true,
+      class: "ml-auto w-1/2 flex-row-reverse gap-3 pb-12 pl-6 last:pb-0"
+    },
+    {
+      orientation: "horizontal",
+      variant: "alternate",
+      class: "grid min-w-0 grid-rows-[1fr_auto_1fr] gap-3"
+    }
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+var timelineContentVariants = classVarianceAuthority.cva("flex-1", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "alternate",
+      orientation: "vertical",
+      isAlternateRight: false,
+      class: "text-right"
+    },
+    {
+      variant: "alternate",
+      orientation: "horizontal",
+      isAlternateRight: false,
+      class: "row-start-3 pt-2"
+    },
+    {
+      variant: "alternate",
+      orientation: "horizontal",
+      isAlternateRight: true,
+      class: "row-start-1 pb-2"
+    }
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+var timelineDotVariants = classVarianceAuthority.cva(
+  "relative z-10 flex size-(--timeline-dot-size) shrink-0 items-center justify-center rounded-full border-2 bg-background",
+  {
+    variants: {
+      status: {
+        completed: "border-primary",
+        active: "border-primary",
+        pending: "border-border"
+      },
+      orientation: {
+        vertical: "",
+        horizontal: ""
+      },
+      variant: {
+        default: "",
+        alternate: ""
+      },
+      isAlternateRight: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "alternate",
+        orientation: "vertical",
+        isAlternateRight: false,
+        class: "absolute -right-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background"
+      },
+      {
+        variant: "alternate",
+        orientation: "vertical",
+        isAlternateRight: true,
+        class: "absolute -left-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background"
+      },
+      {
+        variant: "alternate",
+        orientation: "horizontal",
+        class: "row-start-2 bg-background"
+      },
+      {
+        variant: "alternate",
+        status: "completed",
+        class: "bg-background"
+      },
+      {
+        variant: "alternate",
+        status: "active",
+        class: "bg-background"
+      }
+    ],
+    defaultVariants: {
+      status: "pending",
+      orientation: "vertical",
+      variant: "default",
+      isAlternateRight: false
+    }
+  }
+);
+var timelineConnectorVariants = classVarianceAuthority.cva("absolute z-0", {
+  variants: {
+    isCompleted: {
+      true: "bg-primary",
+      false: "bg-border"
+    },
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      variant: "default",
+      class: "start-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] top-3 h-[calc(100%+0.5rem)] w-(--timeline-connector-thickness)"
+    },
+    {
+      orientation: "horizontal",
+      variant: "default",
+      class: "start-3 top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] h-(--timeline-connector-thickness) w-[calc(100%+0.5rem)]"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: false,
+      class: "top-2 -right-[calc(var(--timeline-connector-thickness)/2)] h-full w-(--timeline-connector-thickness)"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: true,
+      class: "top-2 -left-[calc(var(--timeline-connector-thickness)/2)] h-full w-(--timeline-connector-thickness)"
+    },
+    {
+      orientation: "horizontal",
+      variant: "alternate",
+      class: "top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] left-3 row-start-2 h-(--timeline-connector-thickness) w-[calc(100%+0.5rem)]"
+    }
+  ],
+  defaultVariants: {
+    isCompleted: false,
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+function Timeline({
+  orientation = "vertical",
+  variant = "default",
+  dir: dirProp,
+  activeIndex,
+  asChild = false,
+  className,
+  ...props
+}) {
+  const dir = useDirection(dirProp);
+  const listenersRef = chunk7EYMOUWG_cjs.useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = chunk7EYMOUWG_cjs.useLazyRef(() => ({
+    items: /* @__PURE__ */ new Map()
+  }));
+  const store = React2__namespace.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      },
+      onItemRegister: (id, ref) => {
+        stateRef.current.items.set(id, ref);
+        store.notify();
+      },
+      onItemUnregister: (id) => {
+        stateRef.current.items.delete(id);
+        store.notify();
+      },
+      getNextItemStatus: (id, activeIndex2) => {
+        const entries = Array.from(stateRef.current.items.entries());
+        const sortedEntries = getSortedEntries(entries);
+        const currentIndex = sortedEntries.findIndex(([key]) => key === id);
+        if (currentIndex === -1 || currentIndex === sortedEntries.length - 1) {
+          return void 0;
+        }
+        const nextItemIndex = currentIndex + 1;
+        return getItemStatus(nextItemIndex, activeIndex2);
+      },
+      getItemIndex: (id) => {
+        const entries = Array.from(stateRef.current.items.entries());
+        const sortedEntries = getSortedEntries(entries);
+        return sortedEntries.findIndex(([key]) => key === id);
+      }
+    };
+  }, [listenersRef, stateRef]);
+  const contextValue = React2__namespace.useMemo(
+    () => ({
+      dir,
+      orientation,
+      variant,
+      activeIndex
+    }),
+    [dir, orientation, variant, activeIndex]
+  );
+  const RootPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(TimelineStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RootPrimitive,
+    {
+      role: "list",
+      "aria-orientation": orientation,
+      "data-slot": "timeline",
+      "data-orientation": orientation,
+      "data-variant": variant,
+      dir,
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn(timelineVariants({ orientation, variant, className }))
+    }
+  ) }) });
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React2__namespace.useCallback(composeRefs(...refs), refs);
+}
+var TimelineItemContext = React2__namespace.createContext(null);
+function useTimelineItemContext(consumerName) {
+  const context = React2__namespace.useContext(TimelineItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${TIMELINE_ITEM_NAME}\``);
+  }
+  return context;
+}
+function TimelineItem({ asChild = false, className, id, ref, ...props }) {
+  const { dir, orientation, variant, activeIndex } = useTimelineContext(TIMELINE_ITEM_NAME);
+  const store = useTimelineStoreContext(TIMELINE_ITEM_NAME);
+  const instanceId = React2__namespace.useId();
+  const itemId = id ?? instanceId;
+  const itemRef = React2__namespace.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const itemIndex = useTimelineStore((state) => state.getItemIndex(itemId));
+  const status = React2__namespace.useMemo(
+    function() {
+      return itemIndex < 0 ? "pending" : getItemStatus(itemIndex, activeIndex);
+    },
+    [activeIndex, itemIndex]
+  );
+  chunk7EYMOUWG_cjs.useIsomorphicLayoutEffect(() => {
+    store.onItemRegister(itemId, itemRef);
+    return () => {
+      store.onItemUnregister(itemId);
+    };
+  }, [id, store]);
+  const isAlternateRight = variant === "alternate" && itemIndex % 2 === 1;
+  const itemContextValue = React2__namespace.useMemo(
+    () => ({ id: itemId, status, isAlternateRight }),
+    [itemId, status, isAlternateRight]
+  );
+  const ItemPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(TimelineItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      "aria-current": status === "active" ? "step" : void 0,
+      "data-slot": "timeline-item",
+      "data-status": status,
+      "data-orientation": orientation,
+      "data-alternate-right": isAlternateRight ? "" : void 0,
+      id: itemId,
+      dir,
+      ...props,
+      ref: composedRef,
+      className: chunkH2BWO3SI_cjs.cn(
+        timelineItemVariants({
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  ) });
+}
+function TimelineContent({ asChild = false, className, ...props }) {
+  const { variant, orientation } = useTimelineContext(TIMELINE_CONTENT_NAME);
+  const { status, isAlternateRight } = useTimelineItemContext(TIMELINE_CONTENT_NAME);
+  const ContentPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContentPrimitive,
+    {
+      "data-slot": "timeline-content",
+      "data-status": status,
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn(
+        timelineContentVariants({
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+function TimelineDot({ asChild = false, className, ...props }) {
+  const { orientation, variant } = useTimelineContext(TIMELINE_DOT_NAME);
+  const { status, isAlternateRight } = useTimelineItemContext(TIMELINE_DOT_NAME);
+  const DotPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DotPrimitive,
+    {
+      "data-slot": "timeline-dot",
+      "data-status": status,
+      "data-orientation": orientation,
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn(
+        timelineDotVariants({
+          status,
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+function TimelineConnector({ asChild = false, forceMount, className, ...props }) {
+  const { orientation, variant, activeIndex } = useTimelineContext(TIMELINE_CONNECTOR_NAME);
+  const { id, status, isAlternateRight } = useTimelineItemContext(TIMELINE_CONNECTOR_NAME);
+  const nextItemStatus = useTimelineStore((state) => state.getNextItemStatus(id, activeIndex));
+  const isLastItem = nextItemStatus === void 0;
+  if (!forceMount && isLastItem) return null;
+  const isConnectorCompleted = nextItemStatus === "completed" || nextItemStatus === "active";
+  const ConnectorPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ConnectorPrimitive,
+    {
+      "aria-hidden": "true",
+      "data-slot": "timeline-connector",
+      "data-completed": isConnectorCompleted ? "" : void 0,
+      "data-status": status,
+      "data-orientation": orientation,
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn(
+        timelineConnectorVariants({
+          isCompleted: isConnectorCompleted,
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+function TimelineHeader({ asChild, className, ...props }) {
+  const HeaderPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(HeaderPrimitive, { "data-slot": "timeline-header", className: chunkH2BWO3SI_cjs.cn("flex flex-col gap-1", className), ...props });
+}
+function TimelineTitle({ asChild = false, className, ...props }) {
+  const TitlePrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(TitlePrimitive, { "data-slot": "timeline-title", className: chunkH2BWO3SI_cjs.cn("leading-none font-semibold", className), ...props });
+}
+function TimelineDescription({ asChild = false, className, ...props }) {
+  const DescriptionPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DescriptionPrimitive,
+    {
+      "data-slot": "timeline-description",
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-sm", className)
+    }
+  );
+}
+function TimelineTime({ asChild = false, className, ...props }) {
+  const TimePrimitive = asChild ? reactSlot.Slot : "time";
+  return /* @__PURE__ */ jsxRuntime.jsx(TimePrimitive, { "data-slot": "timeline-time", className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-xs", className), ...props });
+}
+
+exports.Timeline = Timeline;
+exports.TimelineConnector = TimelineConnector;
+exports.TimelineContent = TimelineContent;
+exports.TimelineDescription = TimelineDescription;
+exports.TimelineDot = TimelineDot;
+exports.TimelineHeader = TimelineHeader;
+exports.TimelineItem = TimelineItem;
+exports.TimelineTime = TimelineTime;
+exports.TimelineTitle = TimelineTitle;
+exports.useComposedRefs = useComposedRefs;
+exports.useDirection = useDirection;