@zentauri-ui/zentauri-components 1.7.8 → 1.8.0

package/dist/ui/animated-number.mjs

@@ -0,0 +1,177 @@
+"use client";
+import { cn } from '../chunk-4D54YOL6.mjs';
+import { useReducedMotion, motion, useInView, animate } from 'framer-motion';
+import { cva } from 'class-variance-authority';
+import { useState, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/design-system/animated-number.ts
+var zuiAnimatedNumberBase = "relative flex w-full overflow-hidden [perspective:1000px]";
+var zuiAnimatedNumberAppearance = {
+  default: "text-[color:var(--zui-animated-number-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-animated-number-default-fg-dark,oklch(98.4%_0.003_247.858))]",
+  success: "text-[color:var(--zui-animated-number-success-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-animated-number-success-fg-dark,oklch(79.2%_0.209_151.711))]",
+  warning: "text-[color:var(--zui-animated-number-warning-fg,oklch(66.6%_0.179_58.318))] dark:text-[color:var(--zui-animated-number-warning-fg-dark,oklch(82.8%_0.189_84.429))]",
+  error: "text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]",
+  info: "text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]",
+  ghost: "text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]",
+  purple: "text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
+  orange: "text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]",
+  yellow: "text-[color:var(--zui-animated-number-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-animated-number-yellow-fg-dark,oklch(85.2%_0.199_91.936))]",
+  teal: "text-[color:var(--zui-animated-number-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-animated-number-teal-fg-dark,oklch(77.7%_0.152_181.912))]",
+  indigo: "text-[color:var(--zui-animated-number-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-animated-number-indigo-fg-dark,oklch(67.3%_0.182_276.935))]",
+  gray: "text-[color:var(--zui-animated-number-gray-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-animated-number-gray-fg-dark,oklch(70.7%_0.022_261.325))]",
+  violet: "text-[color:var(--zui-animated-number-violet-fg,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-animated-number-violet-fg-dark,oklch(70.2%_0.183_293.541))]",
+  "gradient-blue": "bg-linear-to-r from-[var(--zui-animated-number-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-animated-number-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-animated-number-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent",
+  "gradient-green": "bg-linear-to-r from-[var(--zui-animated-number-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-animated-number-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-animated-number-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-animated-number-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] bg-clip-text text-transparent",
+  "gradient-red": "bg-linear-to-r from-[var(--zui-animated-number-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-animated-number-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-animated-number-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent",
+  "gradient-yellow": "bg-linear-to-r from-[var(--zui-animated-number-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-animated-number-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-animated-number-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-animated-number-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] bg-clip-text text-transparent",
+  "gradient-purple": "bg-linear-to-r from-[var(--zui-animated-number-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-animated-number-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-animated-number-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent",
+  "gradient-teal": "bg-linear-to-r from-[var(--zui-animated-number-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-animated-number-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-animated-number-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-animated-number-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] bg-clip-text text-transparent",
+  "gradient-indigo": "bg-linear-to-r from-[var(--zui-animated-number-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-animated-number-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-animated-number-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent",
+  "gradient-pink": "bg-linear-to-r from-[var(--zui-animated-number-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-animated-number-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-animated-number-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-animated-number-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] bg-clip-text text-transparent",
+  "gradient-orange": "bg-linear-to-r from-[var(--zui-animated-number-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-animated-number-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-animated-number-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-animated-number-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] bg-clip-text text-transparent"
+};
+var zuiAnimatedNumberSize = {
+  sm: "text-2xl font-semibold tabular-nums",
+  md: "text-4xl font-semibold tabular-nums",
+  lg: "text-6xl font-bold tabular-nums"
+};
+
+// src/ui/animated-number/variants.ts
+var animatedNumberAppearance = cva("inline-flex", {
+  variants: {
+    appearance: zuiAnimatedNumberAppearance,
+    size: zuiAnimatedNumberSize
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+
+// src/ui/animated-number/animations.ts
+var animationInitialType = {
+  up: { y: "-100%" },
+  down: { y: "100%" },
+  scaleUp: { scale: 0 },
+  scaleDown: { scale: 1.25 },
+  rotateX: { rotateX: "0" },
+  rotateY: { rotateY: "0" },
+  skewX: { skewX: 20 },
+  skewY: { skewY: 20 },
+  fade: { opacity: 0 }
+};
+var animationFinalType = {
+  up: { y: 0 },
+  down: { y: 0 },
+  scaleUp: { scale: 1 },
+  scaleDown: { scale: 1 },
+  rotateX: { rotateX: "360deg" },
+  rotateY: { rotateY: "360deg" },
+  skewX: { skewX: 0 },
+  skewY: { skewY: 0 },
+  fade: { opacity: 1 }
+};
+var DEFAULT_VIEWPORT = { once: true, amount: 0.2 };
+var AnimatedNumber = ({
+  number,
+  wrapperClassName,
+  className,
+  ref,
+  appearance,
+  size,
+  type = "up",
+  delayInSecond = 0.1,
+  transition,
+  initial,
+  whileInView,
+  viewport,
+  ...rest
+}) => {
+  const numbersList = [...number.toString()];
+  const reducedMotion = useReducedMotion();
+  const motionless = Boolean(reducedMotion);
+  const digitVariants = {
+    hidden: animationInitialType[type],
+    visible: animationFinalType[type]
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      initial: motionless ? false : "hidden",
+      whileInView: motionless ? void 0 : "visible",
+      viewport: viewport ?? DEFAULT_VIEWPORT,
+      transition: {
+        staggerChildren: delayInSecond
+      },
+      className: cn(wrapperClassName, zuiAnimatedNumberBase),
+      children: numbersList.map((digit, index) => /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: cn(
+            "inline-block",
+            animatedNumberAppearance({ appearance, size }),
+            className
+          ),
+          variants: digitVariants,
+          transition,
+          ...rest,
+          children: digit
+        },
+        index + "-" + digit
+      ))
+    }
+  );
+};
+var AnimatedNumberCounter = ({
+  number,
+  className,
+  ref: externalRef,
+  appearance,
+  size,
+  duration = 2,
+  viewport,
+  ...rest
+}) => {
+  const [currentNumber, setCurrentNumber] = useState(0);
+  const reducedMotion = useReducedMotion();
+  const internalRef = useRef(null);
+  const isInView = useInView(internalRef, {
+    once: false,
+    amount: 0.2,
+    ...viewport
+  });
+  useEffect(() => {
+    if (!isInView) return;
+    if (reducedMotion) {
+      setCurrentNumber(number);
+      return;
+    }
+    const controls = animate(currentNumber, number, {
+      duration,
+      ease: "circOut",
+      onUpdate: (latest) => setCurrentNumber(Math.round(latest))
+    });
+    return () => controls.stop();
+  }, [isInView, number, duration, reducedMotion]);
+  return /* @__PURE__ */ jsx(
+    motion.p,
+    {
+      className: cn(animatedNumberAppearance({ appearance, size }), className),
+      ref: (node) => {
+        internalRef.current = node;
+        if (externalRef) {
+          externalRef.current = node;
+        }
+      },
+      ...rest,
+      children: currentNumber
+    }
+  );
+};
+
+export { AnimatedNumber, AnimatedNumberCounter, animatedNumberAppearance };
+//# sourceMappingURL=animated-number.mjs.map
+//# sourceMappingURL=animated-number.mjs.map

package/dist/ui/animated-number.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/design-system/animated-number.ts","../../src/ui/animated-number/variants.ts","../../src/ui/animated-number/animations.ts","../../src/ui/animated-number/animated-number.tsx"],"names":[],"mappings":"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","file":"animated-number.mjs","sourcesContent":["export const zuiAnimatedNumberBase =\n  \"relative flex w-full overflow-hidden [perspective:1000px]\";\n\nexport const zuiAnimatedNumberAppearance = {\n  default:\n    \"text-[color:var(--zui-animated-number-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-animated-number-default-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  success:\n    \"text-[color:var(--zui-animated-number-success-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-animated-number-success-fg-dark,oklch(79.2%_0.209_151.711))]\",\n  warning:\n    \"text-[color:var(--zui-animated-number-warning-fg,oklch(66.6%_0.179_58.318))] dark:text-[color:var(--zui-animated-number-warning-fg-dark,oklch(82.8%_0.189_84.429))]\",\n  error:\n    \"text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]\",\n  info: \"text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]\",\n  ghost:\n    \"text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]\",\n  purple:\n    \"text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]\",\n  pink: \"text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]\",\n  orange:\n    \"text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]\",\n  yellow:\n    \"text-[color:var(--zui-animated-number-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-animated-number-yellow-fg-dark,oklch(85.2%_0.199_91.936))]\",\n  teal: \"text-[color:var(--zui-animated-number-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-animated-number-teal-fg-dark,oklch(77.7%_0.152_181.912))]\",\n  indigo:\n    \"text-[color:var(--zui-animated-number-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-animated-number-indigo-fg-dark,oklch(67.3%_0.182_276.935))]\",\n  gray: \"text-[color:var(--zui-animated-number-gray-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-animated-number-gray-fg-dark,oklch(70.7%_0.022_261.325))]\",\n  violet:\n    \"text-[color:var(--zui-animated-number-violet-fg,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-animated-number-violet-fg-dark,oklch(70.2%_0.183_293.541))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-animated-number-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-animated-number-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-animated-number-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-animated-number-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-animated-number-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] bg-clip-text text-transparent\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-animated-number-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-animated-number-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-animated-number-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-animated-number-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-animated-number-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] bg-clip-text text-transparent\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-animated-number-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-animated-number-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-animated-number-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-animated-number-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-animated-number-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] bg-clip-text text-transparent\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-animated-number-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-animated-number-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-animated-number-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-animated-number-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-animated-number-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] bg-clip-text text-transparent\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-animated-number-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-animated-number-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-animated-number-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] bg-clip-text text-transparent\",\n} as const;\n\nexport const zuiAnimatedNumberSize = {\n  sm: \"text-2xl font-semibold tabular-nums\",\n  md: \"text-4xl font-semibold tabular-nums\",\n  lg: \"text-6xl font-bold tabular-nums\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport { zuiAnimatedNumberAppearance, zuiAnimatedNumberSize } from \"../../design-system/animated-number\";\n\nexport const animatedNumberAppearance = cva(\"inline-flex\",{\n  variants: {\n    appearance: zuiAnimatedNumberAppearance,\n    size: zuiAnimatedNumberSize\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});","export const animationInitialType = {\n  up: { y: \"-100%\" },\n  down: { y: \"100%\" },\n  scaleUp: { scale: 0 },\n  scaleDown: { scale: 1.25 },\n  rotateX: { rotateX: \"0\" },\n  rotateY: { rotateY: \"0\" },\n  skewX: { skewX: 20 },\n  skewY: { skewY: 20 },\n  fade: { opacity: 0 },\n};\nexport const animationFinalType = {\n  up: { y: 0 },\n  down: { y: 0 },\n  scaleUp: { scale: 1 },\n  scaleDown: { scale: 1 },\n  rotateX: { rotateX: \"360deg\" },\n  rotateY: { rotateY: \"360deg\" },\n  skewX: { skewX: 0 },\n  skewY: { skewY: 0 },\n  fade: { opacity: 1 },\n};\n","\"use client\";\nimport { animate, motion, useInView, useReducedMotion, type UseInViewOptions } from \"framer-motion\";\nimport { animatedNumberAppearance } from \"./variants\";\nimport { AnimatedNumberCounterProps, AnimatedNumberProps } from \"./types\";\nimport { cn } from \"../../lib/utils\";\nimport { zuiAnimatedNumberBase } from \"../../design-system/animated-number\";\nimport { animationFinalType, animationInitialType } from \"./animations\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst DEFAULT_VIEWPORT = { once: true, amount: 0.2 } as const;\n\nexport const AnimatedNumber = ({\n  number,\n  wrapperClassName,\n  className,\n  ref,\n  appearance,\n  size,\n  type = \"up\",\n  delayInSecond = 0.1,\n  transition,\n  initial,\n  whileInView,\n  viewport,\n  ...rest\n}: AnimatedNumberProps) => {\n  const numbersList = [...number.toString()];\n  const reducedMotion = useReducedMotion();\n  const motionless = Boolean(reducedMotion);\n\n  const digitVariants = {\n    hidden: animationInitialType[type],\n    visible: animationFinalType[type],\n  };\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={motionless ? false : \"hidden\"}\n      whileInView={motionless ? undefined : \"visible\"}\n      viewport={viewport ?? DEFAULT_VIEWPORT}\n      transition={{\n        staggerChildren: delayInSecond,\n      }}\n      className={cn(wrapperClassName, zuiAnimatedNumberBase)}\n    >\n      {numbersList.map((digit, index) => (\n        <motion.span\n          key={index + \"-\" + digit}\n          className={cn(\n            \"inline-block\",\n            animatedNumberAppearance({ appearance, size }),\n            className,\n          )}\n          variants={digitVariants}\n          transition={transition}\n          {...rest}\n        >\n          {digit}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n};\n\nexport const AnimatedNumberCounter = ({\n  number,\n  className,\n  ref: externalRef,\n  appearance,\n  size,\n  duration = 2,\n  viewport,\n  ...rest\n}: AnimatedNumberCounterProps) => {\n  const [currentNumber, setCurrentNumber] = useState(0);\n  const reducedMotion = useReducedMotion();\n  const internalRef = useRef<HTMLParagraphElement>(null);\n  // once: false gives real two-way tracking so isInView flips false when scrolled away,\n  // preventing offscreen animations when the number prop changes later.\n  const isInView = useInView(internalRef, {\n    once: false,\n    amount: 0.2,\n    ...viewport,\n  } as UseInViewOptions);\n\n  useEffect(() => {\n    if (!isInView) return;\n\n    if (reducedMotion) {\n      setCurrentNumber(number);\n      return;\n    }\n\n    const controls = animate(currentNumber, number, {\n      duration,\n      ease: \"circOut\",\n      onUpdate: (latest) => setCurrentNumber(Math.round(latest)),\n    });\n\n    return () => controls.stop();\n    // currentNumber intentionally omitted — captured value gives smooth from→to on prop changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isInView, number, duration, reducedMotion]);\n\n  return (\n    <motion.p\n      className={cn(animatedNumberAppearance({ appearance, size }), className)}\n      ref={(node: HTMLParagraphElement) => {\n        internalRef.current = node;\n        if (externalRef) {\n          externalRef.current = node;\n        }\n      }}\n      {...rest}\n    >\n      {currentNumber}\n    </motion.p>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+export { Marquee } from "./marquee";
+export type { MarqueeDirection, MarqueeProps, MarqueeVariantProps, } from "./types";
+export { marqueeVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { MarqueeProps } from "./types";
+export declare function Marquee(props: MarqueeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Marquee {
+    var displayName: string;
+}
+//# sourceMappingURL=marquee.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { marqueeVariants } from "./variants";
+export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;
+export type MarqueeDirection = "left" | "right" | "up" | "down";
+export type MarqueeProps = MarqueeVariantProps & Omit<ComponentPropsWithRef<"div">, "children"> & {
+    children: ReactNode;
+    direction?: MarqueeDirection;
+    gap?: number | string;
+    pauseOnHover?: boolean;
+    speed?: number;
+    trackClassName?: string;
+    itemClassName?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAC5C,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

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

@@ -0,0 +1,7 @@
+export declare const marqueeVariants: (props?: ({
+    appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    fade?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/variants.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe;;;;;8EAa1B,CAAC"}

package/dist/ui/marquee.js

@@ -0,0 +1,171 @@
+"use client";
+'use strict';
+
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('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]";
+var zuiMarqueeAppearances = {
+  default: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
+  outline: "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]",
+  ghost: "[--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)]",
+  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]",
+  separated: "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]",
+  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)]",
+  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)]",
+  purple: "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)]",
+  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)]",
+  orange: "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)]",
+  yellow: "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)]",
+  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)]",
+  indigo: "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)]",
+  emerald: "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)]",
+  "gradient-blue": "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]",
+  "gradient-green": "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]",
+  "gradient-red": "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]",
+  "gradient-yellow": "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)]",
+  "gradient-purple": "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]",
+  "gradient-teal": "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]",
+  "gradient-indigo": "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]",
+  "gradient-pink": "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]",
+  "gradient-orange": "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]"
+};
+var zuiMarqueeOrientations = {
+  horizontal: "w-full flex-row",
+  vertical: "h-64 flex-col"
+};
+var zuiMarqueeSizes = {
+  sm: "p-2 text-xs",
+  md: "p-3 text-sm",
+  lg: "p-4 text-base"
+};
+var zuiMarqueeFade = {
+  false: "",
+  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)]"
+};
+
+// src/ui/marquee/variants.ts
+var marqueeVariants = classVarianceAuthority.cva(zuiMarqueeBase, {
+  variants: {
+    appearance: zuiMarqueeAppearances,
+    fade: zuiMarqueeFade,
+    orientation: zuiMarqueeOrientations,
+    size: zuiMarqueeSizes
+  },
+  defaultVariants: {
+    appearance: "default",
+    fade: true,
+    orientation: "horizontal",
+    size: "md"
+  }
+});
+var 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)}}`;
+function toCssLength(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+function Marquee(props) {
+  const {
+    appearance,
+    children,
+    className,
+    direction,
+    fade,
+    gap,
+    itemClassName,
+    orientation,
+    pauseOnHover = false,
+    ref,
+    size,
+    speed = 30,
+    style,
+    trackClassName,
+    ...rest
+  } = props;
+  const resolvedOrientation = orientation ?? (direction === "up" || direction === "down" ? "vertical" : "horizontal");
+  const resolvedDirection = direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
+  const isReverse = resolvedDirection === "right" || resolvedDirection === "down";
+  const animationName = resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
+  const marqueeStyle = {
+    ...gap !== void 0 ? { "--zui-marquee-gap": toCssLength(gap) } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-direction": resolvedDirection,
+      "data-orientation": resolvedOrientation,
+      "data-slot": "marquee",
+      className: chunkZS5756ZC_js.cn(
+        marqueeVariants({
+          appearance,
+          fade,
+          orientation: resolvedOrientation,
+          size
+        }),
+        className
+      ),
+      style: marqueeStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: marqueeKeyframes }),
+        /* @__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]",
+              resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
+              pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
+              isReverse && "[animation-direction:reverse]",
+              trackClassName
+            ),
+            style: {
+              animationDuration: `${speed}s`,
+              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(
+                "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
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+Marquee.displayName = "Marquee";
+
+exports.Marquee = Marquee;
+exports.marqueeVariants = marqueeVariants;
+//# sourceMappingURL=marquee.js.map
+//# sourceMappingURL=marquee.js.map

package/dist/ui/marquee.js.map

@@ -0,0 +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"]}