@zentauri-ui/zentauri-components 1.7.9 → 1.8.1

package/dist/ui/kbd/animated.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var chunkDN7TYUJ6_js = require('../../chunk-DN7TYUJ6.js');
+require('../../chunk-ZS5756ZC.js');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/kbd/animated/animations.ts
+var kbdAnimationPresets = {
+  none: {},
+  press: {
+    whileHover: { y: -1 },
+    whileTap: { y: 1, scale: 0.96 },
+    transition: { type: "spring", stiffness: 600, damping: 22 }
+  },
+  pop: {
+    initial: { scale: 0.85, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 26 }
+  }
+};
+function KbdAnimated({ animation = "none", ...props }) {
+  const motionProps = kbdAnimationPresets[animation];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkDN7TYUJ6_js.KbdBase,
+    {
+      ...{
+        as: framerMotion.motion.span,
+        initial: animation === "none" ? false : void 0,
+        ...motionProps,
+        ...props
+      }
+    }
+  );
+}
+KbdAnimated.displayName = "KbdAnimated";
+
+exports.KbdAnimated = KbdAnimated;
+exports.kbdAnimationPresets = kbdAnimationPresets;
+//# sourceMappingURL=animated.js.map
+//# sourceMappingURL=animated.js.map

package/dist/ui/kbd/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/kbd/animated/animations.ts","../../../src/ui/kbd/animated/kbd-animated.tsx"],"names":["jsx","KbdBase","motion"],"mappings":";;;;;;;;AAEO,IAAM,mBAAA,GAA2C;AAAA,EACtD,MAAM,EAAC;AAAA,EACP,KAAA,EAAO;AAAA,IACL,UAAA,EAAY,EAAE,CAAA,EAAG,EAAA,EAAG;AAAA,IACpB,QAAA,EAAU,EAAE,CAAA,EAAG,CAAA,EAAG,OAAO,IAAA,EAAK;AAAA,IAC9B,YAAY,EAAE,IAAA,EAAM,UAAU,SAAA,EAAW,GAAA,EAAK,SAAS,EAAA;AAAG,GAC5D;AAAA,EACA,GAAA,EAAK;AAAA,IACH,OAAA,EAAS,EAAE,KAAA,EAAO,IAAA,EAAM,SAAS,CAAA,EAAE;AAAA,IACnC,OAAA,EAAS,EAAE,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,IAChC,YAAY,EAAE,IAAA,EAAM,UAAU,SAAA,EAAW,GAAA,EAAK,SAAS,EAAA;AAAG;AAE9D;ACJO,SAAS,YAAY,EAAE,SAAA,GAAY,MAAA,EAAQ,GAAG,OAAM,EAAqB;AAC9E,EAAA,MAAM,WAAA,GAAc,oBAAoB,SAAS,CAAA;AAEjD,EAAA,uBACEA,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACE,GAAI;AAAA,QACH,IAAIC,mBAAA,CAAO,IAAA;AAAA,QACX,OAAA,EAAS,SAAA,KAAc,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,QACxC,GAAG,WAAA;AAAA,QACH,GAAG;AAAA;AACL;AAAA,GACF;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"animated.js","sourcesContent":["import type { KbdAnimationPresets } from \"./types\";\n\nexport const kbdAnimationPresets: KbdAnimationPresets = {\n  none: {},\n  press: {\n    whileHover: { y: -1 },\n    whileTap: { y: 1, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 600, damping: 22 },\n  },\n  pop: {\n    initial: { scale: 0.85, opacity: 0 },\n    animate: { scale: 1, opacity: 1 },\n    transition: { type: \"spring\", stiffness: 520, damping: 26 },\n  },\n};\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { KbdBase } from \"../kbd-base\";\nimport type { KbdBaseProps } from \"../types\";\n\nimport { kbdAnimationPresets } from \"./animations\";\nimport type { KbdAnimatedProps } from \"./types\";\n\nexport function KbdAnimated({ animation = \"none\", ...props }: KbdAnimatedProps) {\n  const motionProps = kbdAnimationPresets[animation];\n\n  return (\n    <KbdBase\n      {...({\n        as: motion.span,\n        initial: animation === \"none\" ? false : undefined,\n        ...motionProps,\n        ...props,\n      } as KbdBaseProps)}\n    />\n  );\n}\n\nKbdAnimated.displayName = \"KbdAnimated\";\n"]}

package/dist/ui/kbd/animated.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { KbdBase } from '../../chunk-VYI3GS2C.mjs';
+import '../../chunk-4D54YOL6.mjs';
+import { motion } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/kbd/animated/animations.ts
+var kbdAnimationPresets = {
+  none: {},
+  press: {
+    whileHover: { y: -1 },
+    whileTap: { y: 1, scale: 0.96 },
+    transition: { type: "spring", stiffness: 600, damping: 22 }
+  },
+  pop: {
+    initial: { scale: 0.85, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 26 }
+  }
+};
+function KbdAnimated({ animation = "none", ...props }) {
+  const motionProps = kbdAnimationPresets[animation];
+  return /* @__PURE__ */ jsx(
+    KbdBase,
+    {
+      ...{
+        as: motion.span,
+        initial: animation === "none" ? false : void 0,
+        ...motionProps,
+        ...props
+      }
+    }
+  );
+}
+KbdAnimated.displayName = "KbdAnimated";
+
+export { KbdAnimated, kbdAnimationPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

package/dist/ui/kbd/animated.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/kbd/animated/animations.ts","../../../src/ui/kbd/animated/kbd-animated.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,mBAAA,GAA2C;AAAA,EACtD,MAAM,EAAC;AAAA,EACP,KAAA,EAAO;AAAA,IACL,UAAA,EAAY,EAAE,CAAA,EAAG,EAAA,EAAG;AAAA,IACpB,QAAA,EAAU,EAAE,CAAA,EAAG,CAAA,EAAG,OAAO,IAAA,EAAK;AAAA,IAC9B,YAAY,EAAE,IAAA,EAAM,UAAU,SAAA,EAAW,GAAA,EAAK,SAAS,EAAA;AAAG,GAC5D;AAAA,EACA,GAAA,EAAK;AAAA,IACH,OAAA,EAAS,EAAE,KAAA,EAAO,IAAA,EAAM,SAAS,CAAA,EAAE;AAAA,IACnC,OAAA,EAAS,EAAE,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,IAChC,YAAY,EAAE,IAAA,EAAM,UAAU,SAAA,EAAW,GAAA,EAAK,SAAS,EAAA;AAAG;AAE9D;ACJO,SAAS,YAAY,EAAE,SAAA,GAAY,MAAA,EAAQ,GAAG,OAAM,EAAqB;AAC9E,EAAA,MAAM,WAAA,GAAc,oBAAoB,SAAS,CAAA;AAEjD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAI;AAAA,QACH,IAAI,MAAA,CAAO,IAAA;AAAA,QACX,OAAA,EAAS,SAAA,KAAc,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,QACxC,GAAG,WAAA;AAAA,QACH,GAAG;AAAA;AACL;AAAA,GACF;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"animated.mjs","sourcesContent":["import type { KbdAnimationPresets } from \"./types\";\n\nexport const kbdAnimationPresets: KbdAnimationPresets = {\n  none: {},\n  press: {\n    whileHover: { y: -1 },\n    whileTap: { y: 1, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 600, damping: 22 },\n  },\n  pop: {\n    initial: { scale: 0.85, opacity: 0 },\n    animate: { scale: 1, opacity: 1 },\n    transition: { type: \"spring\", stiffness: 520, damping: 26 },\n  },\n};\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { KbdBase } from \"../kbd-base\";\nimport type { KbdBaseProps } from \"../types\";\n\nimport { kbdAnimationPresets } from \"./animations\";\nimport type { KbdAnimatedProps } from \"./types\";\n\nexport function KbdAnimated({ animation = \"none\", ...props }: KbdAnimatedProps) {\n  const motionProps = kbdAnimationPresets[animation];\n\n  return (\n    <KbdBase\n      {...({\n        as: motion.span,\n        initial: animation === \"none\" ? false : undefined,\n        ...motionProps,\n        ...props,\n      } as KbdBaseProps)}\n    />\n  );\n}\n\nKbdAnimated.displayName = \"KbdAnimated\";\n"]}

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

@@ -0,0 +1,4 @@
+export { Kbd } from "./kbd";
+export type { KbdBaseProps, KbdProps, KbdVariantProps } from "./types";
+export { kbdKeyVariants, kbdSeparatorVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/kbd/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/kbd/kbd-base.d.ts

@@ -0,0 +1,6 @@
+import type { KbdBaseProps } from "./types";
+export declare function KbdBase({ keys, separator, appearance, size, children, className, as: Wrapper, ref, ...rest }: KbdBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace KbdBase {
+    var displayName: string;
+}
+//# sourceMappingURL=kbd-base.d.ts.map

package/dist/ui/kbd/kbd-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-base.d.ts","sourceRoot":"","sources":["../../../src/ui/kbd/kbd-base.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,2CA2Bd;yBArCe,OAAO"}

package/dist/ui/kbd/kbd.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/ui/kbd/kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,2CAElC;yBAFe,GAAG"}

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

@@ -0,0 +1,17 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import type { kbdKeyVariants } from "./variants";
+export type KbdVariantProps = VariantProps<typeof kbdKeyVariants>;
+export interface KbdBaseProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** Keys to render as individual keycaps, e.g. `["⌘", "K"]`. Takes precedence over `children`. */
+    keys?: ReactNode[];
+    /** Optional node rendered between keycaps (e.g. "+" or "then"). */
+    separator?: ReactNode;
+    appearance?: KbdVariantProps["appearance"];
+    size?: KbdVariantProps["size"];
+    /** Single keycap content when `keys` is not provided. */
+    children?: ReactNode;
+    as?: ElementType;
+}
+export type KbdProps = Omit<KbdBaseProps, "as">;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/kbd/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAElE,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACvD,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,mEAAmE;IACnE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC"}

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

@@ -0,0 +1,8 @@
+export declare const kbdKeyVariants: (props?: ({
+    appearance?: "default" | "outline" | "glass" | "sky" | "emerald" | "violet" | "amber" | "rose" | "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" | "secondary" | "destructive" | "ghost" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const kbdSeparatorVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/kbd/variants.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc;;;8EASzB,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAUhC,CAAC"}

package/dist/ui/kbd.js

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+var chunkDN7TYUJ6_js = require('../chunk-DN7TYUJ6.js');
+require('../chunk-ZS5756ZC.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Kbd(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkDN7TYUJ6_js.KbdBase, { ...props });
+}
+Kbd.displayName = "Kbd";
+
+Object.defineProperty(exports, "kbdKeyVariants", {
+  enumerable: true,
+  get: function () { return chunkDN7TYUJ6_js.kbdKeyVariants; }
+});
+Object.defineProperty(exports, "kbdSeparatorVariants", {
+  enumerable: true,
+  get: function () { return chunkDN7TYUJ6_js.kbdSeparatorVariants; }
+});
+exports.Kbd = Kbd;
+//# sourceMappingURL=kbd.js.map
+//# sourceMappingURL=kbd.js.map

package/dist/ui/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/kbd/kbd.tsx"],"names":["jsx","KbdBase"],"mappings":";;;;;;AAIO,SAAS,IAAI,KAAA,EAAiB;AACnC,EAAA,uBAAOA,cAAA,CAACC,wBAAA,EAAA,EAAS,GAAG,KAAA,EAAO,CAAA;AAC7B;AAEA,GAAA,CAAI,WAAA,GAAc,KAAA","file":"kbd.js","sourcesContent":["// kbd.tsx — default static entry (no framer-motion)\nimport { KbdBase } from \"./kbd-base\";\nimport type { KbdProps } from \"./types\";\n\nexport function Kbd(props: KbdProps) {\n  return <KbdBase {...props} />;\n}\n\nKbd.displayName = \"Kbd\";\n"]}

package/dist/ui/kbd.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { KbdBase } from '../chunk-VYI3GS2C.mjs';
+export { kbdKeyVariants, kbdSeparatorVariants } from '../chunk-VYI3GS2C.mjs';
+import '../chunk-4D54YOL6.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function Kbd(props) {
+  return /* @__PURE__ */ jsx(KbdBase, { ...props });
+}
+Kbd.displayName = "Kbd";
+
+export { Kbd };
+//# sourceMappingURL=kbd.mjs.map
+//# sourceMappingURL=kbd.mjs.map

package/dist/ui/kbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/kbd/kbd.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,IAAI,KAAA,EAAiB;AACnC,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO,CAAA;AAC7B;AAEA,GAAA,CAAI,WAAA,GAAc,KAAA","file":"kbd.mjs","sourcesContent":["// kbd.tsx — default static entry (no framer-motion)\nimport { KbdBase } from \"./kbd-base\";\nimport type { KbdProps } from \"./types\";\n\nexport function Kbd(props: KbdProps) {\n  return <KbdBase {...props} />;\n}\n\nKbd.displayName = \"Kbd\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.9",
+  "version": "1.8.1",
   "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/copy-button.ts

@@ -0,0 +1,81 @@
+export const zuiCopyButtonBase = [
+  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
+  "rounded-[var(--zui-copy-button-radius,0.75rem)] font-medium",
+  "ring-offset-[var(--zui-copy-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-copy-button-ring-offset-dark,#020617)]",
+  "transition-colors select-none",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-copy-button-focus-ring,#475569)] dark:focus-visible:ring-[var(--zui-copy-button-focus-ring-dark,#cbd5e1)] focus-visible:ring-offset-2",
+  "disabled:pointer-events-none disabled:opacity-50",
+] as const;
+
+export const zuiCopyButtonAppearances = {
+  default:
+    "bg-[var(--zui-copy-button-default-bg,#0f172a)] dark:bg-[var(--zui-copy-button-default-bg-dark,#f8fafc)] text-[color:var(--zui-copy-button-default-fg,#f8fafc)] dark:text-[color:var(--zui-copy-button-default-fg-dark,#020617)] shadow-[var(--zui-copy-button-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-copy-button-default-shadow-dark,0_1px_2px_#0f172a1f)] hover:bg-[var(--zui-copy-button-default-bg-hover,#000000)] dark:hover:bg-[var(--zui-copy-button-default-bg-hover-dark,#ffffff)]",
+  secondary:
+    "bg-[var(--zui-copy-button-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-copy-button-secondary-bg-dark,#1e293b)] text-[color:var(--zui-copy-button-secondary-fg,#0f172a)] dark:text-[color:var(--zui-copy-button-secondary-fg-dark,#f8fafc)] hover:bg-[var(--zui-copy-button-secondary-bg-hover,#cbd5e1)] dark:hover:bg-[var(--zui-copy-button-secondary-bg-hover-dark,#334155)]",
+  destructive:
+    "bg-[var(--zui-copy-button-destructive-bg,#f43f5e)] dark:bg-[var(--zui-copy-button-destructive-bg-dark,#be123c)] text-[color:var(--zui-copy-button-destructive-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-destructive-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-destructive-bg-hover,#f43f5e)] dark:hover:bg-[var(--zui-copy-button-destructive-bg-hover-dark,#9f1239)]",
+  outline:
+    "border border-[color:var(--zui-copy-button-outline-border,#0000001a)] dark:border-[color:var(--zui-copy-button-outline-border-dark,#ffffff1a)] bg-[var(--zui-copy-button-outline-bg,#0000000d)] dark:bg-[var(--zui-copy-button-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-copy-button-outline-fg,#0f172a)] dark:text-[color:var(--zui-copy-button-outline-fg-dark,#f8fafc)] hover:bg-[var(--zui-copy-button-outline-bg-hover,#0000001a)] dark:hover:bg-[var(--zui-copy-button-outline-bg-hover-dark,#ffffff1a)]",
+  ghost:
+    "bg-transparent text-[color:var(--zui-copy-button-ghost-fg,#334155)] dark:text-[color:var(--zui-copy-button-ghost-fg-dark,#e2e8f0)] hover:bg-[var(--zui-copy-button-ghost-bg-hover,#0000000d)] dark:hover:bg-[var(--zui-copy-button-ghost-bg-hover-dark,#ffffff0d)]",
+  glass:
+    "border border-[color:var(--zui-copy-button-glass-border,#00000026)] dark:border-[color:var(--zui-copy-button-glass-border-dark,#ffffff26)] bg-[var(--zui-copy-button-glass-bg,#0000001a)] dark:bg-[var(--zui-copy-button-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-copy-button-glass-fg,#0f172a)] dark:text-[color:var(--zui-copy-button-glass-fg-dark,#ffffff)] backdrop-blur-md hover:bg-[var(--zui-copy-button-glass-bg-hover,#00000026)] dark:hover:bg-[var(--zui-copy-button-glass-bg-hover-dark,#ffffff26)]",
+  emerald:
+    "bg-[var(--zui-copy-button-emerald-bg,#10b981)] dark:bg-[var(--zui-copy-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-copy-button-emerald-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-emerald-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-copy-button-emerald-bg-hover-dark,#064e3b)]",
+  indigo:
+    "bg-[var(--zui-copy-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-copy-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-copy-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-copy-button-indigo-bg-hover-dark,#4f46e5)]",
+  purple:
+    "bg-[var(--zui-copy-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-copy-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-copy-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-copy-button-purple-bg-hover-dark,#9333ea)]",
+  pink:
+    "bg-[var(--zui-copy-button-pink-bg,#9d174d)] dark:bg-[var(--zui-copy-button-pink-bg-dark,#db2777)] text-[color:var(--zui-copy-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-copy-button-pink-bg-hover-dark,#db2777)]",
+  rose:
+    "bg-[var(--zui-copy-button-rose-bg,#9f1239)] dark:bg-[var(--zui-copy-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-copy-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-copy-button-rose-bg-hover-dark,#e11d48)]",
+  sky:
+    "bg-[var(--zui-copy-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-copy-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-copy-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-copy-button-sky-bg-hover-dark,#075985)]",
+  teal:
+    "bg-[var(--zui-copy-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-copy-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-copy-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-copy-button-teal-bg-hover-dark,#115e59)]",
+  yellow:
+    "bg-[var(--zui-copy-button-yellow-bg,#eab308)] dark:bg-[var(--zui-copy-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-copy-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-copy-button-yellow-bg-hover-dark,#713f12)]",
+  orange:
+    "bg-[var(--zui-copy-button-orange-bg,#f97316)] dark:bg-[var(--zui-copy-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-copy-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-copy-button-orange-bg-hover-dark,#7c2d12)]",
+  gray:
+    "bg-[var(--zui-copy-button-gray-bg,#6b7280)] dark:bg-[var(--zui-copy-button-gray-bg-dark,#374151)] text-[color:var(--zui-copy-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-copy-button-gray-bg-hover-dark,#1f2937)]",
+  amber:
+    "bg-[var(--zui-copy-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-copy-button-amber-bg-dark,#92400e)] text-[color:var(--zui-copy-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-copy-button-amber-bg-hover-dark,#78350f)]",
+  violet:
+    "bg-[var(--zui-copy-button-violet-bg,#5b21b6)] dark:bg-[var(--zui-copy-button-violet-bg-dark,#7c3aed)] text-[color:var(--zui-copy-button-violet-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-violet-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-violet-bg-hover,#5b21b6)] dark:hover:bg-[var(--zui-copy-button-violet-bg-hover-dark,#7c3aed)]",
+  "gradient-blue":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-blue-from,#1e40af)] dark:from-[var(--zui-copy-button-gradient-blue-from-dark,#2563eb)] to-[var(--zui-copy-button-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-copy-button-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-copy-button-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-blue-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-blue-from-hover,#1e40af)] dark:hover:from-[var(--zui-copy-button-gradient-blue-from-hover-dark,#2563eb)] hover:to-[var(--zui-copy-button-gradient-blue-to-hover,#6b21a8)] dark:hover:to-[var(--zui-copy-button-gradient-blue-to-hover-dark,#9333ea)]",
+  "gradient-green":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-green-from,#166534)] dark:from-[var(--zui-copy-button-gradient-green-from-dark,#16a34a)] to-[var(--zui-copy-button-gradient-green-to,#3f6212)] dark:to-[var(--zui-copy-button-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-copy-button-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-green-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-green-from-hover,#166534)] dark:hover:from-[var(--zui-copy-button-gradient-green-from-hover-dark,#16a34a)] hover:to-[var(--zui-copy-button-gradient-green-to-hover,#3f6212)] dark:hover:to-[var(--zui-copy-button-gradient-green-to-hover-dark,#65a30d)]",
+  "gradient-red":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-red-from,#991b1b)] dark:from-[var(--zui-copy-button-gradient-red-from-dark,#dc2626)] to-[var(--zui-copy-button-gradient-red-to,#9d174d)] dark:to-[var(--zui-copy-button-gradient-red-to-dark,#db2777)] text-[color:var(--zui-copy-button-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-red-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-red-from-hover,#991b1b)] dark:hover:from-[var(--zui-copy-button-gradient-red-from-hover-dark,#dc2626)] hover:to-[var(--zui-copy-button-gradient-red-to-hover,#9d174d)] dark:hover:to-[var(--zui-copy-button-gradient-red-to-hover-dark,#db2777)]",
+  "gradient-yellow":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-copy-button-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-copy-button-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-copy-button-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-copy-button-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-yellow-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-yellow-from-hover,#854d0e)] dark:hover:from-[var(--zui-copy-button-gradient-yellow-from-hover-dark,#ca8a04)] hover:to-[var(--zui-copy-button-gradient-yellow-to-hover,#9a3412)] dark:hover:to-[var(--zui-copy-button-gradient-yellow-to-hover-dark,#ea580c)]",
+  "gradient-purple":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-copy-button-gradient-purple-from-dark,#9333ea)] to-[var(--zui-copy-button-gradient-purple-to,#9d174d)] dark:to-[var(--zui-copy-button-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-copy-button-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-purple-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-purple-from-hover,#6b21a8)] dark:hover:from-[var(--zui-copy-button-gradient-purple-from-hover-dark,#9333ea)] hover:to-[var(--zui-copy-button-gradient-purple-to-hover,#9d174d)] dark:hover:to-[var(--zui-copy-button-gradient-purple-to-hover-dark,#db2777)]",
+  "gradient-teal":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-teal-from,#115e59)] dark:from-[var(--zui-copy-button-gradient-teal-from-dark,#0d9488)] to-[var(--zui-copy-button-gradient-teal-to,#155e75)] dark:to-[var(--zui-copy-button-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-copy-button-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-teal-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-teal-from-hover,#115e59)] dark:hover:from-[var(--zui-copy-button-gradient-teal-from-hover-dark,#0d9488)] hover:to-[var(--zui-copy-button-gradient-teal-to-hover,#155e75)] dark:hover:to-[var(--zui-copy-button-gradient-teal-to-hover-dark,#0891b2)]",
+  "gradient-indigo":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-copy-button-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-copy-button-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-copy-button-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-copy-button-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-indigo-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-indigo-from-hover,#3730a3)] dark:hover:from-[var(--zui-copy-button-gradient-indigo-from-hover-dark,#4f46e5)] hover:to-[var(--zui-copy-button-gradient-indigo-to-hover,#6b21a8)] dark:hover:to-[var(--zui-copy-button-gradient-indigo-to-hover-dark,#9333ea)]",
+  "gradient-pink":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-pink-from,#9d174d)] dark:from-[var(--zui-copy-button-gradient-pink-from-dark,#db2777)] to-[var(--zui-copy-button-gradient-pink-to,#9f1239)] dark:to-[var(--zui-copy-button-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-copy-button-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-pink-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-pink-from-hover,#9d174d)] dark:hover:from-[var(--zui-copy-button-gradient-pink-from-hover-dark,#db2777)] hover:to-[var(--zui-copy-button-gradient-pink-to-hover,#9f1239)] dark:hover:to-[var(--zui-copy-button-gradient-pink-to-hover-dark,#e11d48)]",
+  "gradient-orange":
+    "bg-linear-to-r from-[var(--zui-copy-button-gradient-orange-from,#9a3412)] dark:from-[var(--zui-copy-button-gradient-orange-from-dark,#ea580c)] to-[var(--zui-copy-button-gradient-orange-to,#991b1b)] dark:to-[var(--zui-copy-button-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-copy-button-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gradient-orange-fg-dark,#ffffff)] hover:from-[var(--zui-copy-button-gradient-orange-from-hover,#9a3412)] dark:hover:from-[var(--zui-copy-button-gradient-orange-from-hover-dark,#ea580c)] hover:to-[var(--zui-copy-button-gradient-orange-to-hover,#991b1b)] dark:hover:to-[var(--zui-copy-button-gradient-orange-to-hover-dark,#dc2626)]",
+} as const;
+
+export type ZuiCopyButtonAppearance = keyof typeof zuiCopyButtonAppearances;
+
+export const zuiCopyButtonSizes = {
+  sm: "h-8 px-2.5 text-xs [&_svg]:size-3.5",
+  md: "h-9 px-3 text-sm [&_svg]:size-4",
+  lg: "h-11 px-4 text-base [&_svg]:size-5",
+} as const;
+
+export type ZuiCopyButtonSize = keyof typeof zuiCopyButtonSizes;
+
+export const zuiCopyButtonIconOnlySizes = {
+  sm: "w-8 px-0",
+  md: "w-9 px-0",
+  lg: "w-11 px-0",
+} 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";
@@ -8,6 +9,7 @@ export * from "./card";
 export * from "./checkbox";
 export * from "./command";
 export * from "./context-menu";
+export * from "./copy-button";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -15,6 +17,7 @@ export * from "./dynamic-stepper";
 export * from "./empty-state";
 export * from "./file-upload";
 export * from "./inputs";
+export * from "./kbd";
 export * from "./marquee";
 export * from "./modal";
 export * from "./otp-input";

package/src/design-system/kbd.ts

@@ -0,0 +1,83 @@
+export const zuiKbdBase = [
+  "inline-flex items-center justify-center gap-1 align-middle",
+  "rounded-[var(--zui-kbd-radius,0.375rem)] font-mono font-medium leading-none select-none",
+] as const;
+
+export const zuiKbdKeyAppearances = {
+  default:
+    "bg-[var(--zui-kbd-default-bg,#0f172a)] dark:bg-[var(--zui-kbd-default-bg-dark,#f8fafc)] text-[color:var(--zui-kbd-default-fg,#f8fafc)] dark:text-[color:var(--zui-kbd-default-fg-dark,#020617)] shadow-[var(--zui-kbd-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-kbd-default-shadow-dark,0_1px_2px_#0f172a1f)]",
+  secondary:
+    "bg-[var(--zui-kbd-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-kbd-secondary-bg-dark,#1e293b)] text-[color:var(--zui-kbd-secondary-fg,#0f172a)] dark:text-[color:var(--zui-kbd-secondary-fg-dark,#f8fafc)]",
+  destructive:
+    "bg-[var(--zui-kbd-destructive-bg,#f43f5e)] dark:bg-[var(--zui-kbd-destructive-bg-dark,#be123c)] text-[color:var(--zui-kbd-destructive-fg,#ffffff)] dark:text-[color:var(--zui-kbd-destructive-fg-dark,#ffffff)]",
+  outline:
+    "border border-[color:var(--zui-kbd-outline-border,#0000001a)] dark:border-[color:var(--zui-kbd-outline-border-dark,#ffffff1a)] bg-[var(--zui-kbd-outline-bg,#0000000d)] dark:bg-[var(--zui-kbd-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-kbd-outline-fg,#0f172a)] dark:text-[color:var(--zui-kbd-outline-fg-dark,#f8fafc)]",
+  ghost:
+    "bg-transparent text-[color:var(--zui-kbd-ghost-fg,#334155)] dark:text-[color:var(--zui-kbd-ghost-fg-dark,#e2e8f0)]",
+  glass:
+    "border border-[color:var(--zui-kbd-glass-border,#00000026)] dark:border-[color:var(--zui-kbd-glass-border-dark,#ffffff26)] bg-[var(--zui-kbd-glass-bg,#0000001a)] dark:bg-[var(--zui-kbd-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-kbd-glass-fg,#0f172a)] dark:text-[color:var(--zui-kbd-glass-fg-dark,#ffffff)] backdrop-blur-md",
+  emerald:
+    "bg-[var(--zui-kbd-emerald-bg,#10b981)] dark:bg-[var(--zui-kbd-emerald-bg-dark,#065f46)] text-[color:var(--zui-kbd-emerald-fg,#ffffff)] dark:text-[color:var(--zui-kbd-emerald-fg-dark,#ffffff)]",
+  indigo:
+    "bg-[var(--zui-kbd-indigo-bg,#3730a3)] dark:bg-[var(--zui-kbd-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-kbd-indigo-fg,#ffffff)] dark:text-[color:var(--zui-kbd-indigo-fg-dark,#ffffff)]",
+  purple:
+    "bg-[var(--zui-kbd-purple-bg,#6b21a8)] dark:bg-[var(--zui-kbd-purple-bg-dark,#9333ea)] text-[color:var(--zui-kbd-purple-fg,#ffffff)] dark:text-[color:var(--zui-kbd-purple-fg-dark,#ffffff)]",
+  pink:
+    "bg-[var(--zui-kbd-pink-bg,#9d174d)] dark:bg-[var(--zui-kbd-pink-bg-dark,#db2777)] text-[color:var(--zui-kbd-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-pink-fg-dark,#ffffff)]",
+  rose:
+    "bg-[var(--zui-kbd-rose-bg,#9f1239)] dark:bg-[var(--zui-kbd-rose-bg-dark,#e11d48)] text-[color:var(--zui-kbd-rose-fg,#ffffff)] dark:text-[color:var(--zui-kbd-rose-fg-dark,#ffffff)]",
+  sky:
+    "bg-[var(--zui-kbd-sky-bg,#0ea5e9)] dark:bg-[var(--zui-kbd-sky-bg-dark,#0369a1)] text-[color:var(--zui-kbd-sky-fg,#ffffff)] dark:text-[color:var(--zui-kbd-sky-fg-dark,#ffffff)]",
+  teal:
+    "bg-[var(--zui-kbd-teal-bg,#14b8a6)] dark:bg-[var(--zui-kbd-teal-bg-dark,#0f766e)] text-[color:var(--zui-kbd-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-teal-fg-dark,#ffffff)]",
+  yellow:
+    "bg-[var(--zui-kbd-yellow-bg,#eab308)] dark:bg-[var(--zui-kbd-yellow-bg-dark,#854d0e)] text-[color:var(--zui-kbd-yellow-fg,#ffffff)] dark:text-[color:var(--zui-kbd-yellow-fg-dark,#ffffff)]",
+  orange:
+    "bg-[var(--zui-kbd-orange-bg,#f97316)] dark:bg-[var(--zui-kbd-orange-bg-dark,#9a3412)] text-[color:var(--zui-kbd-orange-fg,#ffffff)] dark:text-[color:var(--zui-kbd-orange-fg-dark,#ffffff)]",
+  gray:
+    "bg-[var(--zui-kbd-gray-bg,#6b7280)] dark:bg-[var(--zui-kbd-gray-bg-dark,#374151)] text-[color:var(--zui-kbd-gray-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gray-fg-dark,#ffffff)]",
+  amber:
+    "bg-[var(--zui-kbd-amber-bg,#f59e0b)] dark:bg-[var(--zui-kbd-amber-bg-dark,#92400e)] text-[color:var(--zui-kbd-amber-fg,#ffffff)] dark:text-[color:var(--zui-kbd-amber-fg-dark,#ffffff)]",
+  violet:
+    "bg-[var(--zui-kbd-violet-bg,#5b21b6)] dark:bg-[var(--zui-kbd-violet-bg-dark,#7c3aed)] text-[color:var(--zui-kbd-violet-fg,#ffffff)] dark:text-[color:var(--zui-kbd-violet-fg-dark,#ffffff)]",
+  "gradient-blue":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-blue-from,#1e40af)] dark:from-[var(--zui-kbd-gradient-blue-from-dark,#2563eb)] to-[var(--zui-kbd-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-kbd-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-kbd-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-blue-fg-dark,#ffffff)]",
+  "gradient-green":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-green-from,#166534)] dark:from-[var(--zui-kbd-gradient-green-from-dark,#16a34a)] to-[var(--zui-kbd-gradient-green-to,#3f6212)] dark:to-[var(--zui-kbd-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-kbd-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-green-fg-dark,#ffffff)]",
+  "gradient-red":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-red-from,#991b1b)] dark:from-[var(--zui-kbd-gradient-red-from-dark,#dc2626)] to-[var(--zui-kbd-gradient-red-to,#9d174d)] dark:to-[var(--zui-kbd-gradient-red-to-dark,#db2777)] text-[color:var(--zui-kbd-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-red-fg-dark,#ffffff)]",
+  "gradient-yellow":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-kbd-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-kbd-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-kbd-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-kbd-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-yellow-fg-dark,#ffffff)]",
+  "gradient-purple":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-kbd-gradient-purple-from-dark,#9333ea)] to-[var(--zui-kbd-gradient-purple-to,#9d174d)] dark:to-[var(--zui-kbd-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-kbd-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-purple-fg-dark,#ffffff)]",
+  "gradient-teal":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-teal-from,#115e59)] dark:from-[var(--zui-kbd-gradient-teal-from-dark,#0d9488)] to-[var(--zui-kbd-gradient-teal-to,#155e75)] dark:to-[var(--zui-kbd-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-kbd-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-teal-fg-dark,#ffffff)]",
+  "gradient-indigo":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-kbd-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-kbd-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-kbd-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-kbd-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-indigo-fg-dark,#ffffff)]",
+  "gradient-pink":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-pink-from,#9d174d)] dark:from-[var(--zui-kbd-gradient-pink-from-dark,#db2777)] to-[var(--zui-kbd-gradient-pink-to,#9f1239)] dark:to-[var(--zui-kbd-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-kbd-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-pink-fg-dark,#ffffff)]",
+  "gradient-orange":
+    "bg-linear-to-r from-[var(--zui-kbd-gradient-orange-from,#9a3412)] dark:from-[var(--zui-kbd-gradient-orange-from-dark,#ea580c)] to-[var(--zui-kbd-gradient-orange-to,#991b1b)] dark:to-[var(--zui-kbd-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-kbd-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-orange-fg-dark,#ffffff)]",
+} as const;
+
+export type ZuiKbdAppearance = keyof typeof zuiKbdKeyAppearances;
+
+export const zuiKbdKeyBase = [
+  "inline-flex items-center justify-center font-mono font-medium leading-none",
+  "rounded-[var(--zui-kbd-radius,0.375rem)]",
+  "shadow-[var(--zui-kbd-shadow,inset_0_-1px_0_#0000001f)] dark:shadow-[var(--zui-kbd-shadow-dark,inset_0_-1px_0_#0000004d)]",
+] as const;
+
+export const zuiKbdKeySizes = {
+  sm: "h-5 min-w-5 px-1 text-[0.7rem]",
+  md: "h-6 min-w-6 px-1.5 text-xs",
+  lg: "h-7 min-w-7 px-2 text-sm",
+} as const;
+
+export type ZuiKbdSize = keyof typeof zuiKbdKeySizes;
+
+export const zuiKbdSeparatorSizes = {
+  sm: "text-[0.7rem]",
+  md: "text-xs",
+  lg: "text-sm",
+} as const;

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();
+  });
+});