@szum-tech/design-system 3.9.0 → 3.10.1

package/dist/chunk-YSYZKK24.js

@@ -0,0 +1,575 @@
+import { useLazyRef, useIsomorphicLayoutEffect } from './chunk-DFD2WUOU.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React2 from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+
+var DirectionContext = React2.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React2.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.createContext(null);
+function useTimelineStore(selector) {
+  const store = React2.useContext(TimelineStoreContext);
+  if (!store) {
+    throw new Error(`\`useTimelineStore\` must be used within \`${TIMELINE_ROOT_NAME}\``);
+  }
+  const getSnapshot = React2.useCallback(() => selector(store), [store, selector]);
+  return React2.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useTimelineStoreContext(consumerName) {
+  const context = React2.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.createContext(null);
+function useTimelineContext(consumerName) {
+  const context = React2.useContext(TimelineContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${TIMELINE_ROOT_NAME}\``);
+  }
+  return context;
+}
+var timelineVariants = 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 = 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 = 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 = 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 = 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 = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    items: /* @__PURE__ */ new Map()
+  }));
+  const store = React2.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.useMemo(
+    () => ({
+      dir,
+      orientation,
+      variant,
+      activeIndex
+    }),
+    [dir, orientation, variant, activeIndex]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TimelineStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      role: "list",
+      "aria-orientation": orientation,
+      "data-slot": "timeline",
+      "data-orientation": orientation,
+      "data-variant": variant,
+      dir,
+      ...props,
+      className: 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.useCallback(composeRefs(...refs), refs);
+}
+var TimelineItemContext = React2.createContext(null);
+function useTimelineItemContext(consumerName) {
+  const context = React2.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.useId();
+  const itemId = id ?? instanceId;
+  const itemRef = React2.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const itemIndex = useTimelineStore((state) => state.getItemIndex(itemId));
+  const status = React2.useMemo(
+    function() {
+      return itemIndex < 0 ? "pending" : getItemStatus(itemIndex, activeIndex);
+    },
+    [activeIndex, itemIndex]
+  );
+  useIsomorphicLayoutEffect(() => {
+    store.onItemRegister(itemId, itemRef);
+    return () => {
+      store.onItemUnregister(itemId);
+    };
+  }, [id, store]);
+  const isAlternateRight = variant === "alternate" && itemIndex % 2 === 1;
+  const itemContextValue = React2.useMemo(
+    () => ({ id: itemId, status, isAlternateRight }),
+    [itemId, status, isAlternateRight]
+  );
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ 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: 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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      "data-slot": "timeline-content",
+      "data-status": status,
+      ...props,
+      className: 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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DotPrimitive,
+    {
+      "data-slot": "timeline-dot",
+      "data-status": status,
+      "data-orientation": orientation,
+      ...props,
+      className: 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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ConnectorPrimitive,
+    {
+      "aria-hidden": "true",
+      "data-slot": "timeline-connector",
+      "data-completed": isConnectorCompleted ? "" : void 0,
+      "data-status": status,
+      "data-orientation": orientation,
+      ...props,
+      className: cn(
+        timelineConnectorVariants({
+          isCompleted: isConnectorCompleted,
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+function TimelineHeader({ asChild, className, ...props }) {
+  const HeaderPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(HeaderPrimitive, { "data-slot": "timeline-header", className: cn("flex flex-col gap-1", className), ...props });
+}
+function TimelineTitle({ asChild = false, className, ...props }) {
+  const TitlePrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TitlePrimitive, { "data-slot": "timeline-title", className: cn("leading-none font-semibold", className), ...props });
+}
+function TimelineDescription({ asChild = false, className, ...props }) {
+  const DescriptionPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DescriptionPrimitive,
+    {
+      "data-slot": "timeline-description",
+      ...props,
+      className: cn("text-muted-foreground text-sm", className)
+    }
+  );
+}
+function TimelineTime({ asChild = false, className, ...props }) {
+  const TimePrimitive = asChild ? Slot : "time";
+  return /* @__PURE__ */ jsx(TimePrimitive, { "data-slot": "timeline-time", className: cn("text-muted-foreground text-xs", className), ...props });
+}
+
+export { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, TimelineHeader, TimelineItem, TimelineTime, TimelineTitle, useComposedRefs, useDirection };

package/dist/chunk-YUMKV5TH.js

@@ -0,0 +1,56 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ariaLabel,
+  ariaLive = "off",
+  ariaRole = "region",
+  ...props
+}) {
+  const marqueeRef = React.useRef(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: marqueeRef,
+      "data-slot": "marquee",
+      className: cn(
+        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical
+        },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      role: ariaRole,
+      tabIndex: 0,
+      children: React.useMemo(
+        () => /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 justify-around gap-(--gap)",
+              !vertical ? "animate-marquee flex-row" : "animate-marquee-vertical flex-col",
+              pauseOnHover && "group-hover:paused",
+              reverse && "direction-reverse"
+            ),
+            children
+          },
+          i
+        )) }),
+        [repeat, children, vertical, pauseOnHover, reverse]
+      )
+    }
+  );
+}
+
+export { Marquee };

package/dist/components/accordion/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var chunkF7N6WQV6_cjs = require('../../chunk-F7N6WQV6.cjs');
+require('../../chunk-H2BWO3SI.cjs');
+
+
+
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () { return chunkF7N6WQV6_cjs.Accordion; }
+});
+Object.defineProperty(exports, "AccordionContent", {
+  enumerable: true,
+  get: function () { return chunkF7N6WQV6_cjs.AccordionContent; }
+});
+Object.defineProperty(exports, "AccordionItem", {
+  enumerable: true,
+  get: function () { return chunkF7N6WQV6_cjs.AccordionItem; }
+});
+Object.defineProperty(exports, "AccordionTrigger", {
+  enumerable: true,
+  get: function () { return chunkF7N6WQV6_cjs.AccordionTrigger; }
+});

package/dist/components/accordion/index.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+
+type AccordionProps = React.ComponentProps<typeof Accordion$1.Root>;
+declare function Accordion({ ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+type AccordionContentProps = React.ComponentProps<typeof Accordion$1.Content>;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): react_jsx_runtime.JSX.Element;
+
+type AccordionTriggerProps = React.ComponentProps<typeof Accordion$1.Trigger>;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+
+type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+
+type AccordionProps = React.ComponentProps<typeof Accordion$1.Root>;
+declare function Accordion({ ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+type AccordionContentProps = React.ComponentProps<typeof Accordion$1.Content>;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): react_jsx_runtime.JSX.Element;
+
+type AccordionTriggerProps = React.ComponentProps<typeof Accordion$1.Trigger>;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+
+type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../chunk-R65CJGEQ.js';
+import '../../chunk-ZD2QRAOX.js';