@zentauri-ui/zentauri-components 1.7.9 → 1.8.0

package/README.md

@@ -15,12 +15,12 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 
 | Metric     | Result           |
 | ---------- | ---------------- |
-| Test files | 65 passed (65)   |
-| Tests      | 429 passed (429) |
+| Test files | 66 passed (66)   |
+| Tests      | 438 passed (438) |
 
 | Area                        | Test files | Tests |
 | --------------------------- | ---------- | ----- |
-| Components and UI utilities | 37         | 335   |
+| Components and UI utilities | 38         | 344   |
 | React hooks                 | 26         | 85    |
 | CLI and import rewriting    | 2          | 9     |
 
@@ -56,6 +56,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 | `src/ui/tabs/tabs.test.tsx`                                             |     3 |
 | `src/ui/stepper/stepper.test.tsx`                                       |    12 |
 | `src/ui/timeline/timeline.test.tsx`                                     |    14 |
+| `src/ui/animated-number/animated-number.test.tsx`                       |     9 |
 | `src/ui/toggle/toggle.test.tsx`                                         |     5 |
 | `src/ui/slider/slider.test.tsx`                                         |     9 |
 | `src/ui/typography/typography.test.tsx`                                 |     7 |
@@ -671,7 +672,7 @@ From this package directory in the monorepo:
 
 - `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, the chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
 - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
-- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 429 test cases in total
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 438 test cases in total
 - **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, merges in **`spinner`**, applies fixed **`nameAliases`**, and writes **`cli/registry.json`** (`components` + `hooks`). Run this after adding or renaming UI/chart areas or hook entries so the CLI stays in sync (the script prints counts).
 
 ## Github Release log

package/cli/registry.json

@@ -4,6 +4,7 @@
   "components": [
     "accordion",
     "alert",
+    "animated-number",
     "avatar",
     "badge",
     "breadcrumb",

package/dist/design-system/animated-number.d.ts

@@ -0,0 +1,32 @@
+export declare const zuiAnimatedNumberBase = "relative flex w-full overflow-hidden [perspective:1000px]";
+export declare const zuiAnimatedNumberAppearance: {
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly 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))]";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+    readonly "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";
+};
+export declare const zuiAnimatedNumberSize: {
+    readonly sm: "text-2xl font-semibold tabular-nums";
+    readonly md: "text-4xl font-semibold tabular-nums";
+    readonly lg: "text-6xl font-bold tabular-nums";
+};
+//# sourceMappingURL=animated-number.d.ts.map

package/dist/design-system/animated-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-number.d.ts","sourceRoot":"","sources":["../../src/design-system/animated-number.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,8DAC2B,CAAC;AAE9D,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;CA2C9B,CAAC;AAEX,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAC"}

package/dist/design-system/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./alert";
+export * from "./animated-number";
 export * from "./avatar";
 export * from "./badge";
 export * from "./breadcrumb";

package/dist/design-system/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/ui/animated-number/animated-number.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedNumberCounterProps, AnimatedNumberProps } from "./types";
+export declare const AnimatedNumber: ({ number, wrapperClassName, className, ref, appearance, size, type, delayInSecond, transition, initial, whileInView, viewport, ...rest }: AnimatedNumberProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedNumberCounter: ({ number, className, ref: externalRef, appearance, size, duration, viewport, ...rest }: AnimatedNumberCounterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=animated-number.d.ts.map

package/dist/ui/animated-number/animated-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-number.d.ts","sourceRoot":"","sources":["../../../src/ui/animated-number/animated-number.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ1E,eAAO,MAAM,cAAc,GAAI,0IAc5B,mBAAmB,4CAsCrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wFASnC,0BAA0B,4CA6C5B,CAAC"}

package/dist/ui/animated-number/animations.d.ts

@@ -0,0 +1,59 @@
+export declare const animationInitialType: {
+    up: {
+        y: string;
+    };
+    down: {
+        y: string;
+    };
+    scaleUp: {
+        scale: number;
+    };
+    scaleDown: {
+        scale: number;
+    };
+    rotateX: {
+        rotateX: string;
+    };
+    rotateY: {
+        rotateY: string;
+    };
+    skewX: {
+        skewX: number;
+    };
+    skewY: {
+        skewY: number;
+    };
+    fade: {
+        opacity: number;
+    };
+};
+export declare const animationFinalType: {
+    up: {
+        y: number;
+    };
+    down: {
+        y: number;
+    };
+    scaleUp: {
+        scale: number;
+    };
+    scaleDown: {
+        scale: number;
+    };
+    rotateX: {
+        rotateX: string;
+    };
+    rotateY: {
+        rotateY: string;
+    };
+    skewX: {
+        skewX: number;
+    };
+    skewY: {
+        skewY: number;
+    };
+    fade: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=animations.d.ts.map

package/dist/ui/animated-number/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../src/ui/animated-number/animations.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUhC,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAU9B,CAAC"}

package/dist/ui/animated-number/index.d.ts

@@ -0,0 +1,4 @@
+export { AnimatedNumber, AnimatedNumberCounter } from "./animated-number";
+export type { AnimatedNumberProps, AnimatedNumberCounterProps } from "./types";
+export { animatedNumberAppearance } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/animated-number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/animated-number/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/animated-number/types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from "class-variance-authority";
+import { MotionProps } from "framer-motion";
+import { RefObject } from "react";
+import { animatedNumberAppearance } from "./variants";
+type MotionTransitionWithoutDelay = Omit<NonNullable<MotionProps["transition"]>, "delay"> & {
+    delay?: never;
+};
+export type MotionPropsWithoutTransitionDelay = Omit<MotionProps, "transition"> & {
+    transition?: MotionTransitionWithoutDelay;
+};
+export type AnimatedNumberProps = MotionPropsWithoutTransitionDelay & {
+    number: number;
+    wrapperClassName?: string;
+    className?: string;
+    ref?: RefObject<HTMLDivElement>;
+    appearance?: VariantProps<typeof animatedNumberAppearance>["appearance"];
+    size?: VariantProps<typeof animatedNumberAppearance>["size"];
+    type?: "up" | "down" | "scaleUp" | "scaleDown" | "rotateX" | "rotateY" | "skewX" | "skewY" | "fade";
+    delayInSecond?: number;
+    transition?: MotionProps["transition"];
+};
+export type AnimatedNumberCounterProps = MotionProps & {
+    number: number;
+    className?: string;
+    ref?: RefObject<HTMLParagraphElement>;
+    appearance?: VariantProps<typeof animatedNumberAppearance>["appearance"];
+    size?: VariantProps<typeof animatedNumberAppearance>["size"];
+    duration?: number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/ui/animated-number/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/animated-number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD,KAAK,4BAA4B,GAAG,IAAI,CACtC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,EACtC,OAAO,CACR,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CAClD,WAAW,EACX,YAAY,CACb,GAAG;IACF,UAAU,CAAC,EAAE,4BAA4B,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iCAAiC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,YAAY,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IACpG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,WAAW,GAAG;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,YAAY,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/dist/ui/animated-number/variants.d.ts

@@ -0,0 +1,5 @@
+export declare const animatedNumberAppearance: (props?: ({
+    appearance?: "default" | "violet" | "gray" | "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" | "error" | "success" | "warning" | "info" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/animated-number/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/animated-number/variants.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB;;;8EASnC,CAAC"}

package/dist/ui/animated-number.js

@@ -0,0 +1,181 @@
+"use client";
+'use strict';
+
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+var framerMotion = require('framer-motion');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('react');
+var jsxRuntime = require('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 = classVarianceAuthority.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 = framerMotion.useReducedMotion();
+  const motionless = Boolean(reducedMotion);
+  const digitVariants = {
+    hidden: animationInitialType[type],
+    visible: animationFinalType[type]
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      ref,
+      initial: motionless ? false : "hidden",
+      whileInView: motionless ? void 0 : "visible",
+      viewport: viewport ?? DEFAULT_VIEWPORT,
+      transition: {
+        staggerChildren: delayInSecond
+      },
+      className: chunkZS5756ZC_js.cn(wrapperClassName, zuiAnimatedNumberBase),
+      children: numbersList.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.span,
+        {
+          className: chunkZS5756ZC_js.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] = react.useState(0);
+  const reducedMotion = framerMotion.useReducedMotion();
+  const internalRef = react.useRef(null);
+  const isInView = framerMotion.useInView(internalRef, {
+    once: false,
+    amount: 0.2,
+    ...viewport
+  });
+  react.useEffect(() => {
+    if (!isInView) return;
+    if (reducedMotion) {
+      setCurrentNumber(number);
+      return;
+    }
+    const controls = framerMotion.animate(currentNumber, number, {
+      duration,
+      ease: "circOut",
+      onUpdate: (latest) => setCurrentNumber(Math.round(latest))
+    });
+    return () => controls.stop();
+  }, [isInView, number, duration, reducedMotion]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.p,
+    {
+      className: chunkZS5756ZC_js.cn(animatedNumberAppearance({ appearance, size }), className),
+      ref: (node) => {
+        internalRef.current = node;
+        if (externalRef) {
+          externalRef.current = node;
+        }
+      },
+      ...rest,
+      children: currentNumber
+    }
+  );
+};
+
+exports.AnimatedNumber = AnimatedNumber;
+exports.AnimatedNumberCounter = AnimatedNumberCounter;
+exports.animatedNumberAppearance = animatedNumberAppearance;
+//# sourceMappingURL=animated-number.js.map
+//# sourceMappingURL=animated-number.js.map

package/dist/ui/animated-number.js.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":["cva","useReducedMotion","jsx","motion","cn","useState","useRef","useInView","useEffect","animate"],"mappings":"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","file":"animated-number.js","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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [

package/src/design-system/animated-number.ts

@@ -0,0 +1,53 @@
+export const zuiAnimatedNumberBase =
+  "relative flex w-full overflow-hidden [perspective:1000px]";
+
+export const 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",
+} as const;
+
+export const zuiAnimatedNumberSize = {
+  sm: "text-2xl font-semibold tabular-nums",
+  md: "text-4xl font-semibold tabular-nums",
+  lg: "text-6xl font-bold tabular-nums",
+} as const;

package/src/design-system/index.ts

@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./alert";
+export * from "./animated-number";
 export * from "./avatar";
 export * from "./badge";
 export * from "./breadcrumb";

package/src/ui/animated-number/animated-number.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { AnimatedNumber, AnimatedNumberCounter } from "./animated-number";
+
+describe("AnimatedNumber", () => {
+  it("renders one span per digit", () => {
+    render(<AnimatedNumber number={123} />);
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+  });
+
+  it("applies the default appearance token by default", () => {
+    render(<AnimatedNumber number={7} />);
+    expect(screen.getByText("7").className).toContain(
+      "--zui-animated-number-default-fg",
+    );
+  });
+
+  it("applies the requested appearance token", () => {
+    render(<AnimatedNumber number={5} appearance="success" />);
+    expect(screen.getByText("5").className).toContain(
+      "--zui-animated-number-success-fg",
+    );
+  });
+
+  it("clips a gradient to the text for gradient appearances", () => {
+    render(<AnimatedNumber number={9} appearance="gradient-blue" />);
+    const span = screen.getByText("9");
+    expect(span.className).toContain("bg-clip-text");
+    expect(span.className).toContain("text-transparent");
+  });
+
+  it("applies the requested size token", () => {
+    render(<AnimatedNumber number={4} size="lg" />);
+    expect(screen.getByText("4").className).toMatch(/text-6xl/);
+  });
+
+  it("merges a custom className onto each digit", () => {
+    render(<AnimatedNumber number={8} className="custom-digit" />);
+    expect(screen.getByText("8").className).toContain("custom-digit");
+  });
+});
+
+describe("AnimatedNumberCounter", () => {
+  it("renders a paragraph starting from zero", () => {
+    render(<AnimatedNumberCounter number={500} />);
+    expect(screen.getByText("0").tagName).toBe("P");
+  });
+
+  it("applies the requested appearance token", () => {
+    render(<AnimatedNumberCounter number={500} appearance="orange" />);
+    expect(screen.getByText("0").className).toContain(
+      "--zui-animated-number-orange-fg",
+    );
+  });
+
+  it("defers the count until the element is in view", () => {
+    render(<AnimatedNumberCounter number={500} />);
+    expect(screen.getByText("0")).toBeInTheDocument();
+    expect(screen.queryByText("500")).not.toBeInTheDocument();
+  });
+});

package/src/ui/animated-number/animated-number.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { animate, motion, useInView, useReducedMotion, type UseInViewOptions } from "framer-motion";
+import { animatedNumberAppearance } from "./variants";
+import { AnimatedNumberCounterProps, AnimatedNumberProps } from "./types";
+import { cn } from "../../lib/utils";
+import { zuiAnimatedNumberBase } from "../../design-system/animated-number";
+import { animationFinalType, animationInitialType } from "./animations";
+import { useEffect, useRef, useState } from "react";
+
+const DEFAULT_VIEWPORT = { once: true, amount: 0.2 } as const;
+
+export const AnimatedNumber = ({
+  number,
+  wrapperClassName,
+  className,
+  ref,
+  appearance,
+  size,
+  type = "up",
+  delayInSecond = 0.1,
+  transition,
+  initial,
+  whileInView,
+  viewport,
+  ...rest
+}: AnimatedNumberProps) => {
+  const numbersList = [...number.toString()];
+  const reducedMotion = useReducedMotion();
+  const motionless = Boolean(reducedMotion);
+
+  const digitVariants = {
+    hidden: animationInitialType[type],
+    visible: animationFinalType[type],
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={motionless ? false : "hidden"}
+      whileInView={motionless ? undefined : "visible"}
+      viewport={viewport ?? DEFAULT_VIEWPORT}
+      transition={{
+        staggerChildren: delayInSecond,
+      }}
+      className={cn(wrapperClassName, zuiAnimatedNumberBase)}
+    >
+      {numbersList.map((digit, index) => (
+        <motion.span
+          key={index + "-" + digit}
+          className={cn(
+            "inline-block",
+            animatedNumberAppearance({ appearance, size }),
+            className,
+          )}
+          variants={digitVariants}
+          transition={transition}
+          {...rest}
+        >
+          {digit}
+        </motion.span>
+      ))}
+    </motion.div>
+  );
+};
+
+export const AnimatedNumberCounter = ({
+  number,
+  className,
+  ref: externalRef,
+  appearance,
+  size,
+  duration = 2,
+  viewport,
+  ...rest
+}: AnimatedNumberCounterProps) => {
+  const [currentNumber, setCurrentNumber] = useState(0);
+  const reducedMotion = useReducedMotion();
+  const internalRef = useRef<HTMLParagraphElement>(null);
+  // once: false gives real two-way tracking so isInView flips false when scrolled away,
+  // preventing offscreen animations when the number prop changes later.
+  const isInView = useInView(internalRef, {
+    once: false,
+    amount: 0.2,
+    ...viewport,
+  } as UseInViewOptions);
+
+  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();
+    // currentNumber intentionally omitted — captured value gives smooth from→to on prop changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInView, number, duration, reducedMotion]);
+
+  return (
+    <motion.p
+      className={cn(animatedNumberAppearance({ appearance, size }), className)}
+      ref={(node: HTMLParagraphElement) => {
+        internalRef.current = node;
+        if (externalRef) {
+          externalRef.current = node;
+        }
+      }}
+      {...rest}
+    >
+      {currentNumber}
+    </motion.p>
+  );
+};

package/src/ui/animated-number/animations.ts

@@ -0,0 +1,22 @@
+export const 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 },
+};
+export const 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 },
+};

package/src/ui/animated-number/index.ts

@@ -0,0 +1,4 @@
+"use client";
+export { AnimatedNumber, AnimatedNumberCounter } from "./animated-number";
+export type { AnimatedNumberProps, AnimatedNumberCounterProps } from "./types";
+export { animatedNumberAppearance } from "./variants";

package/src/ui/animated-number/types.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from "class-variance-authority";
+import { MotionProps } from "framer-motion";
+import { RefObject } from "react";
+import { animatedNumberAppearance } from "./variants";
+
+type MotionTransitionWithoutDelay = Omit<
+  NonNullable<MotionProps["transition"]>,
+  "delay"
+> & {
+  delay?: never;
+};
+
+export type MotionPropsWithoutTransitionDelay = Omit<
+  MotionProps,
+  "transition"
+> & {
+  transition?: MotionTransitionWithoutDelay;
+};
+
+export type AnimatedNumberProps = MotionPropsWithoutTransitionDelay & {
+  number: number;
+  wrapperClassName?: string;
+  className?: string;
+  ref?: RefObject<HTMLDivElement>;
+  appearance?: VariantProps<typeof animatedNumberAppearance>["appearance"];
+  size?: VariantProps<typeof animatedNumberAppearance>["size"];
+  type?: "up" | "down" | "scaleUp" | "scaleDown" | "rotateX" | "rotateY" | "skewX" | "skewY" | "fade";
+  delayInSecond?: number;
+  transition?: MotionProps["transition"];
+};
+
+export type AnimatedNumberCounterProps = MotionProps & {
+  number: number;
+  className?: string;
+  ref?: RefObject<HTMLParagraphElement>;
+  appearance?: VariantProps<typeof animatedNumberAppearance>["appearance"];
+  size?: VariantProps<typeof animatedNumberAppearance>["size"];
+  duration?: number;
+};

package/src/ui/animated-number/variants.ts

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+import { zuiAnimatedNumberAppearance, zuiAnimatedNumberSize } from "../../design-system/animated-number";
+
+export const animatedNumberAppearance = cva("inline-flex",{
+  variants: {
+    appearance: zuiAnimatedNumberAppearance,
+    size: zuiAnimatedNumberSize
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});