@zentauri-ui/zentauri-components 1.8.1 → 1.8.2

package/dist/hooks/useTableSort/useTableSort.d.ts

@@ -0,0 +1,3 @@
+import type { UseTableSortParams, UseTableSortResult } from "./types";
+export declare function useTableSort<TKey extends string = string>({ sortKey, defaultSortKey, sortDirection, defaultSortDirection, onSortChange, }?: UseTableSortParams<TKey>): UseTableSortResult<TKey>;
+//# sourceMappingURL=useTableSort.d.ts.map

package/dist/hooks/useTableSort/useTableSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSort.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTableSort/useTableSort.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuBtE,wBAAgB,YAAY,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,EAAE,EACzD,OAAO,EACP,cAAc,EACd,aAAa,EACb,oBAA6B,EAC7B,YAAY,GACb,GAAE,kBAAkB,CAAC,IAAI,CAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAsF1D"}

package/dist/hooks/useTableSort.js

@@ -0,0 +1,99 @@
+"use client";
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useTableSort/useTableSort.ts
+function nextSortDirection(currentDirection) {
+  if (currentDirection === "ascending") {
+    return "descending";
+  }
+  if (currentDirection === "descending") {
+    return "none";
+  }
+  return "ascending";
+}
+function normalizeSortState(nextSort) {
+  if (!nextSort.sortKey || nextSort.sortDirection === "none") {
+    return { sortKey: void 0, sortDirection: "none" };
+  }
+  return nextSort;
+}
+function useTableSort({
+  sortKey,
+  defaultSortKey,
+  sortDirection,
+  defaultSortDirection = "none",
+  onSortChange
+} = {}) {
+  const [internalSort, setInternalSort] = react.useState(
+    () => normalizeSortState({
+      sortKey: defaultSortKey,
+      sortDirection: defaultSortDirection
+    })
+  );
+  const isSortKeyControlled = sortKey !== void 0;
+  const isSortDirectionControlled = sortDirection !== void 0;
+  const currentSort = normalizeSortState({
+    sortKey: isSortKeyControlled ? sortKey : internalSort.sortKey,
+    sortDirection: isSortDirectionControlled ? sortDirection : internalSort.sortDirection
+  });
+  const setSort = react.useCallback(
+    (nextSort) => {
+      const normalized = normalizeSortState(nextSort);
+      if (!isSortKeyControlled || !isSortDirectionControlled) {
+        setInternalSort((previousSort) => ({
+          sortKey: isSortKeyControlled ? previousSort.sortKey : normalized.sortKey,
+          sortDirection: isSortDirectionControlled ? previousSort.sortDirection : normalized.sortDirection
+        }));
+      }
+      onSortChange?.(normalized);
+    },
+    [isSortDirectionControlled, isSortKeyControlled, onSortChange]
+  );
+  const clearSort = react.useCallback(() => {
+    setSort({ sortKey: void 0, sortDirection: "none" });
+  }, [setSort]);
+  const toggleSort = react.useCallback(
+    (nextSortKey) => {
+      const direction = currentSort.sortKey === nextSortKey ? nextSortDirection(currentSort.sortDirection) : "ascending";
+      setSort({
+        sortKey: nextSortKey,
+        sortDirection: direction
+      });
+    },
+    [currentSort.sortDirection, currentSort.sortKey, setSort]
+  );
+  const getSortProps = react.useCallback(
+    (nextSortKey) => ({
+      sortKey: nextSortKey,
+      sortDirection: currentSort.sortKey === nextSortKey ? currentSort.sortDirection : "none",
+      onSortChange: (nextSort) => {
+        setSort(nextSort);
+      }
+    }),
+    [currentSort.sortDirection, currentSort.sortKey, setSort]
+  );
+  return react.useMemo(
+    () => ({
+      sortKey: currentSort.sortKey,
+      sortDirection: currentSort.sortDirection,
+      setSort,
+      clearSort,
+      toggleSort,
+      getSortProps
+    }),
+    [
+      clearSort,
+      currentSort.sortDirection,
+      currentSort.sortKey,
+      getSortProps,
+      setSort,
+      toggleSort
+    ]
+  );
+}
+
+exports.useTableSort = useTableSort;
+//# sourceMappingURL=useTableSort.js.map
+//# sourceMappingURL=useTableSort.js.map

package/dist/hooks/useTableSort.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTableSort/useTableSort.ts"],"names":["useState","useCallback","useMemo"],"mappings":"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","file":"useTableSort.js","sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useState } from \"react\";\n\nimport type { TableSortDirection, TableSortState } from \"../../ui/table/types\";\nimport type { UseTableSortParams, UseTableSortResult } from \"./types\";\n\nfunction nextSortDirection(\n  currentDirection: TableSortDirection,\n): TableSortDirection {\n  if (currentDirection === \"ascending\") {\n    return \"descending\";\n  }\n  if (currentDirection === \"descending\") {\n    return \"none\";\n  }\n  return \"ascending\";\n}\n\nfunction normalizeSortState<TKey extends string>(\n  nextSort: TableSortState<TKey>,\n): TableSortState<TKey> {\n  if (!nextSort.sortKey || nextSort.sortDirection === \"none\") {\n    return { sortKey: undefined, sortDirection: \"none\" };\n  }\n  return nextSort;\n}\n\nexport function useTableSort<TKey extends string = string>({\n  sortKey,\n  defaultSortKey,\n  sortDirection,\n  defaultSortDirection = \"none\",\n  onSortChange,\n}: UseTableSortParams<TKey> = {}): UseTableSortResult<TKey> {\n  const [internalSort, setInternalSort] = useState<TableSortState<TKey>>(() =>\n    normalizeSortState({\n      sortKey: defaultSortKey,\n      sortDirection: defaultSortDirection,\n    }),\n  );\n\n  const isSortKeyControlled = sortKey !== undefined;\n  const isSortDirectionControlled = sortDirection !== undefined;\n  const currentSort = normalizeSortState({\n    sortKey: isSortKeyControlled ? sortKey : internalSort.sortKey,\n    sortDirection: isSortDirectionControlled\n      ? sortDirection\n      : internalSort.sortDirection,\n  });\n\n  const setSort = useCallback(\n    (nextSort: TableSortState<TKey>) => {\n      const normalized = normalizeSortState(nextSort);\n      if (!isSortKeyControlled || !isSortDirectionControlled) {\n        setInternalSort((previousSort) => ({\n          sortKey: isSortKeyControlled\n            ? previousSort.sortKey\n            : normalized.sortKey,\n          sortDirection: isSortDirectionControlled\n            ? previousSort.sortDirection\n            : normalized.sortDirection,\n        }));\n      }\n      onSortChange?.(normalized);\n    },\n    [isSortDirectionControlled, isSortKeyControlled, onSortChange],\n  );\n\n  const clearSort = useCallback(() => {\n    setSort({ sortKey: undefined, sortDirection: \"none\" });\n  }, [setSort]);\n\n  const toggleSort = useCallback(\n    (nextSortKey: TKey) => {\n      const direction =\n        currentSort.sortKey === nextSortKey\n          ? nextSortDirection(currentSort.sortDirection)\n          : \"ascending\";\n\n      setSort({\n        sortKey: nextSortKey,\n        sortDirection: direction,\n      });\n    },\n    [currentSort.sortDirection, currentSort.sortKey, setSort],\n  );\n\n  const getSortProps = useCallback(\n    (nextSortKey: TKey) => ({\n      sortKey: nextSortKey,\n      sortDirection:\n        currentSort.sortKey === nextSortKey\n          ? currentSort.sortDirection\n          : \"none\",\n      onSortChange: (nextSort: TableSortState) => {\n        setSort(nextSort as TableSortState<TKey>);\n      },\n    }),\n    [currentSort.sortDirection, currentSort.sortKey, setSort],\n  );\n\n  return useMemo(\n    () => ({\n      sortKey: currentSort.sortKey,\n      sortDirection: currentSort.sortDirection,\n      setSort,\n      clearSort,\n      toggleSort,\n      getSortProps,\n    }),\n    [\n      clearSort,\n      currentSort.sortDirection,\n      currentSort.sortKey,\n      getSortProps,\n      setSort,\n      toggleSort,\n    ],\n  );\n}\n"]}

package/dist/hooks/useTableSort.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { useState, useCallback, useMemo } from 'react';
+
+// src/hooks/useTableSort/useTableSort.ts
+function nextSortDirection(currentDirection) {
+  if (currentDirection === "ascending") {
+    return "descending";
+  }
+  if (currentDirection === "descending") {
+    return "none";
+  }
+  return "ascending";
+}
+function normalizeSortState(nextSort) {
+  if (!nextSort.sortKey || nextSort.sortDirection === "none") {
+    return { sortKey: void 0, sortDirection: "none" };
+  }
+  return nextSort;
+}
+function useTableSort({
+  sortKey,
+  defaultSortKey,
+  sortDirection,
+  defaultSortDirection = "none",
+  onSortChange
+} = {}) {
+  const [internalSort, setInternalSort] = useState(
+    () => normalizeSortState({
+      sortKey: defaultSortKey,
+      sortDirection: defaultSortDirection
+    })
+  );
+  const isSortKeyControlled = sortKey !== void 0;
+  const isSortDirectionControlled = sortDirection !== void 0;
+  const currentSort = normalizeSortState({
+    sortKey: isSortKeyControlled ? sortKey : internalSort.sortKey,
+    sortDirection: isSortDirectionControlled ? sortDirection : internalSort.sortDirection
+  });
+  const setSort = useCallback(
+    (nextSort) => {
+      const normalized = normalizeSortState(nextSort);
+      if (!isSortKeyControlled || !isSortDirectionControlled) {
+        setInternalSort((previousSort) => ({
+          sortKey: isSortKeyControlled ? previousSort.sortKey : normalized.sortKey,
+          sortDirection: isSortDirectionControlled ? previousSort.sortDirection : normalized.sortDirection
+        }));
+      }
+      onSortChange?.(normalized);
+    },
+    [isSortDirectionControlled, isSortKeyControlled, onSortChange]
+  );
+  const clearSort = useCallback(() => {
+    setSort({ sortKey: void 0, sortDirection: "none" });
+  }, [setSort]);
+  const toggleSort = useCallback(
+    (nextSortKey) => {
+      const direction = currentSort.sortKey === nextSortKey ? nextSortDirection(currentSort.sortDirection) : "ascending";
+      setSort({
+        sortKey: nextSortKey,
+        sortDirection: direction
+      });
+    },
+    [currentSort.sortDirection, currentSort.sortKey, setSort]
+  );
+  const getSortProps = useCallback(
+    (nextSortKey) => ({
+      sortKey: nextSortKey,
+      sortDirection: currentSort.sortKey === nextSortKey ? currentSort.sortDirection : "none",
+      onSortChange: (nextSort) => {
+        setSort(nextSort);
+      }
+    }),
+    [currentSort.sortDirection, currentSort.sortKey, setSort]
+  );
+  return useMemo(
+    () => ({
+      sortKey: currentSort.sortKey,
+      sortDirection: currentSort.sortDirection,
+      setSort,
+      clearSort,
+      toggleSort,
+      getSortProps
+    }),
+    [
+      clearSort,
+      currentSort.sortDirection,
+      currentSort.sortKey,
+      getSortProps,
+      setSort,
+      toggleSort
+    ]
+  );
+}
+
+export { useTableSort };
+//# sourceMappingURL=useTableSort.mjs.map
+//# sourceMappingURL=useTableSort.mjs.map

package/dist/hooks/useTableSort.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTableSort/useTableSort.ts"],"names":[],"mappings":"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","file":"useTableSort.mjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useState } from \"react\";\n\nimport type { TableSortDirection, TableSortState } from \"../../ui/table/types\";\nimport type { UseTableSortParams, UseTableSortResult } from \"./types\";\n\nfunction nextSortDirection(\n  currentDirection: TableSortDirection,\n): TableSortDirection {\n  if (currentDirection === \"ascending\") {\n    return \"descending\";\n  }\n  if (currentDirection === \"descending\") {\n    return \"none\";\n  }\n  return \"ascending\";\n}\n\nfunction normalizeSortState<TKey extends string>(\n  nextSort: TableSortState<TKey>,\n): TableSortState<TKey> {\n  if (!nextSort.sortKey || nextSort.sortDirection === \"none\") {\n    return { sortKey: undefined, sortDirection: \"none\" };\n  }\n  return nextSort;\n}\n\nexport function useTableSort<TKey extends string = string>({\n  sortKey,\n  defaultSortKey,\n  sortDirection,\n  defaultSortDirection = \"none\",\n  onSortChange,\n}: UseTableSortParams<TKey> = {}): UseTableSortResult<TKey> {\n  const [internalSort, setInternalSort] = useState<TableSortState<TKey>>(() =>\n    normalizeSortState({\n      sortKey: defaultSortKey,\n      sortDirection: defaultSortDirection,\n    }),\n  );\n\n  const isSortKeyControlled = sortKey !== undefined;\n  const isSortDirectionControlled = sortDirection !== undefined;\n  const currentSort = normalizeSortState({\n    sortKey: isSortKeyControlled ? sortKey : internalSort.sortKey,\n    sortDirection: isSortDirectionControlled\n      ? sortDirection\n      : internalSort.sortDirection,\n  });\n\n  const setSort = useCallback(\n    (nextSort: TableSortState<TKey>) => {\n      const normalized = normalizeSortState(nextSort);\n      if (!isSortKeyControlled || !isSortDirectionControlled) {\n        setInternalSort((previousSort) => ({\n          sortKey: isSortKeyControlled\n            ? previousSort.sortKey\n            : normalized.sortKey,\n          sortDirection: isSortDirectionControlled\n            ? previousSort.sortDirection\n            : normalized.sortDirection,\n        }));\n      }\n      onSortChange?.(normalized);\n    },\n    [isSortDirectionControlled, isSortKeyControlled, onSortChange],\n  );\n\n  const clearSort = useCallback(() => {\n    setSort({ sortKey: undefined, sortDirection: \"none\" });\n  }, [setSort]);\n\n  const toggleSort = useCallback(\n    (nextSortKey: TKey) => {\n      const direction =\n        currentSort.sortKey === nextSortKey\n          ? nextSortDirection(currentSort.sortDirection)\n          : \"ascending\";\n\n      setSort({\n        sortKey: nextSortKey,\n        sortDirection: direction,\n      });\n    },\n    [currentSort.sortDirection, currentSort.sortKey, setSort],\n  );\n\n  const getSortProps = useCallback(\n    (nextSortKey: TKey) => ({\n      sortKey: nextSortKey,\n      sortDirection:\n        currentSort.sortKey === nextSortKey\n          ? currentSort.sortDirection\n          : \"none\",\n      onSortChange: (nextSort: TableSortState) => {\n        setSort(nextSort as TableSortState<TKey>);\n      },\n    }),\n    [currentSort.sortDirection, currentSort.sortKey, setSort],\n  );\n\n  return useMemo(\n    () => ({\n      sortKey: currentSort.sortKey,\n      sortDirection: currentSort.sortDirection,\n      setSort,\n      clearSort,\n      toggleSort,\n      getSortProps,\n    }),\n    [\n      clearSort,\n      currentSort.sortDirection,\n      currentSort.sortKey,\n      getSortProps,\n      setSort,\n      toggleSort,\n    ],\n  );\n}\n"]}

package/dist/ui/marquee/marquee.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/marquee.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAY5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA6F1C;yBA7Fe,OAAO"}
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/marquee.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAuB5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAkK1C;yBAlKe,OAAO"}

package/dist/ui/marquee.js

@@ -1,7 +1,9 @@
 "use client";
 'use strict';
 
+var chunkXRM7GOIE_js = require('../chunk-XRM7GOIE.js');
 var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+var react = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -68,6 +70,13 @@ function toCssLength(value) {
   }
   return typeof value === "number" ? `${value}px` : value;
 }
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
 function Marquee(props) {
   const {
     appearance,
@@ -90,14 +99,62 @@ function Marquee(props) {
   const resolvedDirection = direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
   const isReverse = resolvedDirection === "right" || resolvedDirection === "down";
   const animationName = resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
+  const rootRef = react.useRef(null);
+  const measureRef = react.useRef(null);
+  const [copyCount, setCopyCount] = react.useState(1);
+  const childArray = react.useMemo(() => react.Children.toArray(children), [children]);
+  const setRootRef = react.useCallback(
+    (node) => {
+      rootRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
   const marqueeStyle = {
     ...gap !== void 0 ? { "--zui-marquee-gap": toCssLength(gap) } : null,
     ...style
   };
+  const groupClassName = chunkZS5756ZC_js.cn(
+    "flex shrink-0 items-center justify-around gap-(--zui-marquee-gap)",
+    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+    itemClassName
+  );
+  const fillerChildren = Array.from(
+    { length: Math.max(0, copyCount - 1) },
+    (_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", inert: true, className: "contents", children: childArray }, index)
+  );
+  chunkXRM7GOIE_js.useIsomorphicLayoutEffect(() => {
+    const updateCopyCount = () => {
+      const root = rootRef.current;
+      const measure = measureRef.current;
+      if (!root || !measure) {
+        return;
+      }
+      const rootSize = resolvedOrientation === "vertical" ? root.offsetHeight : root.offsetWidth;
+      const contentSize = resolvedOrientation === "vertical" ? measure.scrollHeight : measure.scrollWidth;
+      if (!rootSize || !contentSize) {
+        setCopyCount(1);
+        return;
+      }
+      setCopyCount(Math.max(1, Math.ceil(rootSize / contentSize)));
+    };
+    updateCopyCount();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(updateCopyCount);
+    if (rootRef.current) {
+      observer.observe(rootRef.current);
+    }
+    if (measureRef.current) {
+      observer.observe(measureRef.current);
+    }
+    return () => observer.disconnect();
+  }, [childArray, gap, resolvedOrientation]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      ref: setRootRef,
       "data-direction": resolvedDirection,
       "data-orientation": resolvedOrientation,
       "data-slot": "marquee",
@@ -114,12 +171,25 @@ function Marquee(props) {
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: marqueeKeyframes }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "marquee-measure",
+            ref: measureRef,
+            className: chunkZS5756ZC_js.cn(
+              "pointer-events-none invisible absolute -z-10",
+              groupClassName
+            ),
+            children: childArray
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-slot": "marquee-track",
             className: chunkZS5756ZC_js.cn(
-              "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
+              "flex shrink-0 gap-(--zui-marquee-gap) will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
               resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
               pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
               isReverse && "[animation-direction:reverse]",
@@ -130,30 +200,21 @@ function Marquee(props) {
               animationName
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-slot": "marquee-item-group",
-                  className: chunkZS5756ZC_js.cn(
-                    "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
-                    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
-                    itemClassName
-                  ),
-                  children
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "marquee-item-group", className: groupClassName, children: [
+                childArray,
+                fillerChildren
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   "aria-hidden": "true",
                   inert: true,
                   "data-slot": "marquee-item-group",
-                  className: chunkZS5756ZC_js.cn(
-                    "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
-                    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
-                    itemClassName
-                  ),
-                  children
+                  className: groupClassName,
+                  children: [
+                    childArray,
+                    fillerChildren
+                  ]
                 }
               )
             ]

package/dist/ui/marquee.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/design-system/marquee.ts","../../src/ui/marquee/variants.ts","../../src/ui/marquee/marquee.tsx"],"names":["cva","jsxs","cn","jsx"],"mappings":"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","file":"marquee.js","sourcesContent":["export const zuiMarqueeBase =\n  \"group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]\";\n\nexport const zuiMarqueeAppearances = {\n  default:\n    \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n  outline:\n    \"border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n  ghost:\n    \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]\",\n  card: \"border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]\",\n  separated:\n    \"border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]\",\n  sky: \"border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]\",\n  rose: \"border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]\",\n  purple:\n    \"border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]\",\n  pink: \"border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]\",\n  orange:\n    \"border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]\",\n  yellow:\n    \"border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]\",\n  teal: \"border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]\",\n  indigo:\n    \"border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]\",\n  emerald:\n    \"border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]\",\n  \"gradient-blue\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-green\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-red\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-yellow\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]\",\n  \"gradient-purple\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-teal\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-indigo\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-pink\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-orange\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]\",\n} as const;\n\nexport const zuiMarqueeOrientations = {\n  horizontal: \"w-full flex-row\",\n  vertical: \"h-64 flex-col\",\n} as const;\n\nexport const zuiMarqueeSizes = {\n  sm: \"p-2 text-xs\",\n  md: \"p-3 text-sm\",\n  lg: \"p-4 text-base\",\n} as const;\n\nexport const zuiMarqueeFade = {\n  false: \"\",\n  true: \"[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiMarqueeAppearances,\n  zuiMarqueeBase,\n  zuiMarqueeFade,\n  zuiMarqueeOrientations,\n  zuiMarqueeSizes,\n} from \"../../design-system/marquee\";\n\nexport const marqueeVariants = cva(zuiMarqueeBase, {\n  variants: {\n    appearance: zuiMarqueeAppearances,\n    fade: zuiMarqueeFade,\n    orientation: zuiMarqueeOrientations,\n    size: zuiMarqueeSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    fade: true,\n    orientation: \"horizontal\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { MarqueeProps } from \"./types\";\nimport { marqueeVariants } from \"./variants\";\n\nconst marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;\n\nfunction toCssLength(value: number | string | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function Marquee(props: MarqueeProps) {\n  const {\n    appearance,\n    children,\n    className,\n    direction,\n    fade,\n    gap,\n    itemClassName,\n    orientation,\n    pauseOnHover = false,\n    ref,\n    size,\n    speed = 30,\n    style,\n    trackClassName,\n    ...rest\n  } = props;\n\n  const resolvedOrientation =\n    orientation ??\n    (direction === \"up\" || direction === \"down\" ? \"vertical\" : \"horizontal\");\n  const resolvedDirection =\n    direction ?? (resolvedOrientation === \"vertical\" ? \"up\" : \"left\");\n  const isReverse =\n    resolvedDirection === \"right\" || resolvedDirection === \"down\";\n  const animationName =\n    resolvedOrientation === \"vertical\" ? \"zui-marquee-y\" : \"zui-marquee-x\";\n  const marqueeStyle = {\n    ...(gap !== undefined ? { \"--zui-marquee-gap\": toCssLength(gap) } : null),\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      data-direction={resolvedDirection}\n      data-orientation={resolvedOrientation}\n      data-slot=\"marquee\"\n      className={cn(\n        marqueeVariants({\n          appearance,\n          fade,\n          orientation: resolvedOrientation,\n          size,\n        }),\n        className,\n      )}\n      style={marqueeStyle}\n      {...rest}\n    >\n      <style>{marqueeKeyframes}</style>\n      <div\n        data-slot=\"marquee-track\"\n        className={cn(\n          \"flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]\",\n          resolvedOrientation === \"vertical\" ? \"flex-col\" : \"w-max flex-row\",\n          pauseOnHover && \"group-hover/marquee:[animation-play-state:paused]\",\n          isReverse && \"[animation-direction:reverse]\",\n          trackClassName,\n        )}\n        style={\n          {\n            animationDuration: `${speed}s`,\n            animationName,\n          } as CSSProperties\n        }\n      >\n        <div\n          data-slot=\"marquee-item-group\"\n          className={cn(\n            \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n            resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n            itemClassName,\n          )}\n        >\n          {children}\n        </div>\n        <div\n          aria-hidden=\"true\"\n          inert\n          data-slot=\"marquee-item-group\"\n          className={cn(\n            \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n            resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n            itemClassName,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nMarquee.displayName = \"Marquee\";\n"]}
+{"version":3,"sources":["../../src/design-system/marquee.ts","../../src/ui/marquee/variants.ts","../../src/ui/marquee/marquee.tsx"],"names":["cva","useRef","useState","useMemo","Children","useCallback","cn","jsx","useIsomorphicLayoutEffect","jsxs"],"mappings":"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","file":"marquee.js","sourcesContent":["export const zuiMarqueeBase =\n  \"group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]\";\n\nexport const zuiMarqueeAppearances = {\n  default:\n    \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n  outline:\n    \"border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n  ghost:\n    \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]\",\n  card: \"border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]\",\n  separated:\n    \"border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]\",\n  sky: \"border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]\",\n  rose: \"border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]\",\n  purple:\n    \"border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]\",\n  pink: \"border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]\",\n  orange:\n    \"border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]\",\n  yellow:\n    \"border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]\",\n  teal: \"border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]\",\n  indigo:\n    \"border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]\",\n  emerald:\n    \"border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]\",\n  \"gradient-blue\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-green\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-red\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-yellow\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]\",\n  \"gradient-purple\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-teal\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-indigo\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-pink\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]\",\n  \"gradient-orange\":\n    \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]\",\n} as const;\n\nexport const zuiMarqueeOrientations = {\n  horizontal: \"w-full flex-row\",\n  vertical: \"h-64 flex-col\",\n} as const;\n\nexport const zuiMarqueeSizes = {\n  sm: \"p-2 text-xs\",\n  md: \"p-3 text-sm\",\n  lg: \"p-4 text-base\",\n} as const;\n\nexport const zuiMarqueeFade = {\n  false: \"\",\n  true: \"[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiMarqueeAppearances,\n  zuiMarqueeBase,\n  zuiMarqueeFade,\n  zuiMarqueeOrientations,\n  zuiMarqueeSizes,\n} from \"../../design-system/marquee\";\n\nexport const marqueeVariants = cva(zuiMarqueeBase, {\n  variants: {\n    appearance: zuiMarqueeAppearances,\n    fade: zuiMarqueeFade,\n    orientation: zuiMarqueeOrientations,\n    size: zuiMarqueeSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    fade: true,\n    orientation: \"horizontal\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport { Children, useCallback, useMemo, useRef, useState } from \"react\";\nimport type { CSSProperties, Ref } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { MarqueeProps } from \"./types\";\nimport { marqueeVariants } from \"./variants\";\n\nconst marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;\n\nfunction toCssLength(value: number | string | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nfunction assignRef<TElement>(\n  ref: Ref<TElement> | undefined,\n  value: TElement | null,\n) {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    (ref as { current: TElement | null }).current = value;\n  }\n}\n\nexport function Marquee(props: MarqueeProps) {\n  const {\n    appearance,\n    children,\n    className,\n    direction,\n    fade,\n    gap,\n    itemClassName,\n    orientation,\n    pauseOnHover = false,\n    ref,\n    size,\n    speed = 30,\n    style,\n    trackClassName,\n    ...rest\n  } = props;\n\n  const resolvedOrientation =\n    orientation ??\n    (direction === \"up\" || direction === \"down\" ? \"vertical\" : \"horizontal\");\n  const resolvedDirection =\n    direction ?? (resolvedOrientation === \"vertical\" ? \"up\" : \"left\");\n  const isReverse =\n    resolvedDirection === \"right\" || resolvedDirection === \"down\";\n  const animationName =\n    resolvedOrientation === \"vertical\" ? \"zui-marquee-y\" : \"zui-marquee-x\";\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const measureRef = useRef<HTMLDivElement | null>(null);\n  const [copyCount, setCopyCount] = useState(1);\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  const marqueeStyle = {\n    ...(gap !== undefined ? { \"--zui-marquee-gap\": toCssLength(gap) } : null),\n    ...style,\n  } as CSSProperties;\n  const groupClassName = cn(\n    \"flex shrink-0 items-center justify-around gap-(--zui-marquee-gap)\",\n    resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n    itemClassName,\n  );\n  const fillerChildren = Array.from(\n    { length: Math.max(0, copyCount - 1) },\n    (_, index) => (\n      <div key={index} aria-hidden=\"true\" inert className=\"contents\">\n        {childArray}\n      </div>\n    ),\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const updateCopyCount = () => {\n      const root = rootRef.current;\n      const measure = measureRef.current;\n\n      if (!root || !measure) {\n        return;\n      }\n\n      const rootSize =\n        resolvedOrientation === \"vertical\"\n          ? root.offsetHeight\n          : root.offsetWidth;\n      const contentSize =\n        resolvedOrientation === \"vertical\"\n          ? measure.scrollHeight\n          : measure.scrollWidth;\n\n      if (!rootSize || !contentSize) {\n        setCopyCount(1);\n        return;\n      }\n\n      setCopyCount(Math.max(1, Math.ceil(rootSize / contentSize)));\n    };\n\n    updateCopyCount();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const observer = new ResizeObserver(updateCopyCount);\n    if (rootRef.current) {\n      observer.observe(rootRef.current);\n    }\n    if (measureRef.current) {\n      observer.observe(measureRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, [childArray, gap, resolvedOrientation]);\n\n  return (\n    <div\n      ref={setRootRef}\n      data-direction={resolvedDirection}\n      data-orientation={resolvedOrientation}\n      data-slot=\"marquee\"\n      className={cn(\n        marqueeVariants({\n          appearance,\n          fade,\n          orientation: resolvedOrientation,\n          size,\n        }),\n        className,\n      )}\n      style={marqueeStyle}\n      {...rest}\n    >\n      <style>{marqueeKeyframes}</style>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"marquee-measure\"\n        ref={measureRef}\n        className={cn(\n          \"pointer-events-none invisible absolute -z-10\",\n          groupClassName,\n        )}\n      >\n        {childArray}\n      </div>\n      <div\n        data-slot=\"marquee-track\"\n        className={cn(\n          \"flex shrink-0 gap-(--zui-marquee-gap) will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]\",\n          resolvedOrientation === \"vertical\" ? \"flex-col\" : \"w-max flex-row\",\n          pauseOnHover && \"group-hover/marquee:[animation-play-state:paused]\",\n          isReverse && \"[animation-direction:reverse]\",\n          trackClassName,\n        )}\n        style={\n          {\n            animationDuration: `${speed}s`,\n            animationName,\n          } as CSSProperties\n        }\n      >\n        <div data-slot=\"marquee-item-group\" className={groupClassName}>\n          {childArray}\n          {fillerChildren}\n        </div>\n        <div\n          aria-hidden=\"true\"\n          inert\n          data-slot=\"marquee-item-group\"\n          className={groupClassName}\n        >\n          {childArray}\n          {fillerChildren}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nMarquee.displayName = \"Marquee\";\n"]}

package/dist/ui/marquee.mjs

@@ -1,7 +1,9 @@
 "use client";
+import { useIsomorphicLayoutEffect } from '../chunk-F3V4POW3.mjs';
 import { cn } from '../chunk-4D54YOL6.mjs';
+import { useRef, useState, useMemo, Children, useCallback } from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/design-system/marquee.ts
 var zuiMarqueeBase = "group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]";
@@ -66,6 +68,13 @@ function toCssLength(value) {
   }
   return typeof value === "number" ? `${value}px` : value;
 }
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
 function Marquee(props) {
   const {
     appearance,
@@ -88,14 +97,62 @@ function Marquee(props) {
   const resolvedDirection = direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
   const isReverse = resolvedDirection === "right" || resolvedDirection === "down";
   const animationName = resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
+  const rootRef = useRef(null);
+  const measureRef = useRef(null);
+  const [copyCount, setCopyCount] = useState(1);
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+  const setRootRef = useCallback(
+    (node) => {
+      rootRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
   const marqueeStyle = {
     ...gap !== void 0 ? { "--zui-marquee-gap": toCssLength(gap) } : null,
     ...style
   };
+  const groupClassName = cn(
+    "flex shrink-0 items-center justify-around gap-(--zui-marquee-gap)",
+    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+    itemClassName
+  );
+  const fillerChildren = Array.from(
+    { length: Math.max(0, copyCount - 1) },
+    (_, index) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", inert: true, className: "contents", children: childArray }, index)
+  );
+  useIsomorphicLayoutEffect(() => {
+    const updateCopyCount = () => {
+      const root = rootRef.current;
+      const measure = measureRef.current;
+      if (!root || !measure) {
+        return;
+      }
+      const rootSize = resolvedOrientation === "vertical" ? root.offsetHeight : root.offsetWidth;
+      const contentSize = resolvedOrientation === "vertical" ? measure.scrollHeight : measure.scrollWidth;
+      if (!rootSize || !contentSize) {
+        setCopyCount(1);
+        return;
+      }
+      setCopyCount(Math.max(1, Math.ceil(rootSize / contentSize)));
+    };
+    updateCopyCount();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(updateCopyCount);
+    if (rootRef.current) {
+      observer.observe(rootRef.current);
+    }
+    if (measureRef.current) {
+      observer.observe(measureRef.current);
+    }
+    return () => observer.disconnect();
+  }, [childArray, gap, resolvedOrientation]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      ref: setRootRef,
       "data-direction": resolvedDirection,
       "data-orientation": resolvedOrientation,
       "data-slot": "marquee",
@@ -112,12 +169,25 @@ function Marquee(props) {
       ...rest,
       children: [
         /* @__PURE__ */ jsx("style", { children: marqueeKeyframes }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "marquee-measure",
+            ref: measureRef,
+            className: cn(
+              "pointer-events-none invisible absolute -z-10",
+              groupClassName
+            ),
+            children: childArray
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
             "data-slot": "marquee-track",
             className: cn(
-              "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
+              "flex shrink-0 gap-(--zui-marquee-gap) will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
               resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
               pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
               isReverse && "[animation-direction:reverse]",
@@ -128,30 +198,21 @@ function Marquee(props) {
               animationName
             },
             children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "marquee-item-group",
-                  className: cn(
-                    "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
-                    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
-                    itemClassName
-                  ),
-                  children
-                }
-              ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("div", { "data-slot": "marquee-item-group", className: groupClassName, children: [
+                childArray,
+                fillerChildren
+              ] }),
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   "aria-hidden": "true",
                   inert: true,
                   "data-slot": "marquee-item-group",
-                  className: cn(
-                    "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
-                    resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
-                    itemClassName
-                  ),
-                  children
+                  className: groupClassName,
+                  children: [
+                    childArray,
+                    fillerChildren
+                  ]
                 }
               )
             ]