@zentauri-ui/zentauri-components 1.8.0 → 1.8.1

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.8.0",
+  "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/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

@@ -9,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";
@@ -16,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/copy-button/animated/animations.ts

@@ -0,0 +1,22 @@
+import type { CopyButtonAnimationPresets } from "./types";
+
+export const copyButtonAnimationPresets: CopyButtonAnimationPresets = {
+  swap: {
+    initial: { opacity: 0, scale: 0.6, rotate: -45 },
+    animate: { opacity: 1, scale: 1, rotate: 0 },
+    exit: { opacity: 0, scale: 0.6, rotate: 45 },
+    transition: { type: "spring", stiffness: 520, damping: 24 },
+  },
+  pop: {
+    initial: { opacity: 0, scale: 0.4, rotate: 0 },
+    animate: { opacity: 1, scale: 1, rotate: 0 },
+    exit: { opacity: 0, scale: 0.4, rotate: 0 },
+    transition: { type: "spring", stiffness: 600, damping: 20 },
+  },
+  fade: {
+    initial: { opacity: 0, scale: 1, rotate: 0 },
+    animate: { opacity: 1, scale: 1, rotate: 0 },
+    exit: { opacity: 0, scale: 1, rotate: 0 },
+    transition: { duration: 0.16 },
+  },
+};

package/src/ui/copy-button/animated/copy-button-animated.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+
+import { CopyButtonBase } from "../copy-button-base";
+import type { CopyButtonIconRenderer } from "../types";
+
+import { copyButtonAnimationPresets } from "./animations";
+import type { CopyButtonAnimatedProps } from "./types";
+
+export function CopyButtonAnimated({
+  animation = "swap",
+  ...props
+}: CopyButtonAnimatedProps) {
+  const preset = copyButtonAnimationPresets[animation];
+
+  const renderIcon: CopyButtonIconRenderer = ({
+    copied,
+    copyIcon,
+    copiedIcon,
+  }) => (
+    <AnimatePresence initial={false} mode="wait">
+      <motion.span
+        key={copied ? "copied" : "idle"}
+        className="inline-flex items-center justify-center"
+        initial={preset.initial}
+        animate={preset.animate}
+        exit={preset.exit}
+        transition={preset.transition}
+      >
+        {copied ? copiedIcon : copyIcon}
+      </motion.span>
+    </AnimatePresence>
+  );
+
+  return <CopyButtonBase {...props} renderIcon={renderIcon} />;
+}
+
+CopyButtonAnimated.displayName = "CopyButtonAnimated";

package/src/ui/copy-button/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { CopyButtonAnimated } from "./copy-button-animated";
+export { copyButtonAnimationPresets } from "./animations";
+export type {
+  CopyButtonAnimatedProps,
+  CopyButtonAnimation,
+  CopyButtonAnimationPreset,
+  CopyButtonAnimationPresets,
+} from "./types";

package/src/ui/copy-button/animated/types.ts

@@ -0,0 +1,21 @@
+import type { Transition } from "framer-motion";
+
+import type { CopyButtonProps } from "../types";
+
+export type CopyButtonAnimation = "swap" | "pop" | "fade";
+
+export type CopyButtonAnimatedProps = CopyButtonProps & {
+  animation?: CopyButtonAnimation;
+};
+
+export type CopyButtonAnimationPreset = {
+  initial: { opacity: number; scale: number; rotate: number };
+  animate: { opacity: number; scale: number; rotate: number };
+  exit: { opacity: number; scale: number; rotate: number };
+  transition: Transition;
+};
+
+export type CopyButtonAnimationPresets = Record<
+  CopyButtonAnimation,
+  CopyButtonAnimationPreset
+>;

package/src/ui/copy-button/copy-button-base.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { FiCheck, FiCopy } from "react-icons/fi";
+
+import { useClipboard } from "../../hooks/useClipboard/useClipboard";
+import { cn } from "../../lib/utils";
+
+import type { CopyButtonBaseProps, CopyButtonIconRenderer } from "./types";
+import { copyButtonVariants } from "./variants";
+
+const defaultRenderIcon: CopyButtonIconRenderer = ({
+  copied,
+  copyIcon,
+  copiedIcon,
+}) => (copied ? copiedIcon : copyIcon);
+
+export function CopyButtonBase({
+  value,
+  timeout = 2000,
+  appearance,
+  size,
+  iconOnly = true,
+  label = "Copy",
+  copiedLabel = "Copied",
+  copyIcon = <FiCopy aria-hidden />,
+  copiedIcon = <FiCheck aria-hidden />,
+  onCopy,
+  renderIcon = defaultRenderIcon,
+  className,
+  type = "button",
+  disabled,
+  onClick,
+  "aria-label": ariaLabel,
+  ref,
+  ...rest
+}: CopyButtonBaseProps) {
+  const { copied, copy } = useClipboard(timeout);
+
+  const handleClick: NonNullable<CopyButtonBaseProps["onClick"]> = async (
+    event,
+  ) => {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    const ok = await copy(value);
+    if (ok) {
+      onCopy?.(value);
+    }
+  };
+
+  const text = copied ? copiedLabel : label;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="copy-button"
+      data-copied={copied ? "true" : undefined}
+      disabled={disabled}
+      aria-label={ariaLabel ?? (iconOnly ? text : undefined)}
+      onClick={handleClick}
+      className={cn(
+        copyButtonVariants({ appearance, size, iconOnly }),
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        data-slot="copy-button-icon"
+        className="relative inline-flex items-center justify-center"
+      >
+        {renderIcon({ copied, copyIcon, copiedIcon })}
+      </span>
+      {!iconOnly ? (
+        <span data-slot="copy-button-label" aria-live="polite">
+          {text}
+        </span>
+      ) : (
+        <span className="sr-only" aria-live="polite">
+          {text}
+        </span>
+      )}
+    </button>
+  );
+}
+
+CopyButtonBase.displayName = "CopyButton";

package/src/ui/copy-button/copy-button.test.tsx

@@ -0,0 +1,82 @@
+import { createRef } from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CopyButton } from "./copy-button";
+
+describe("CopyButton", () => {
+  const originalClipboard = navigator.clipboard;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      writable: true,
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      writable: true,
+      value: originalClipboard,
+    });
+  });
+
+  it("should expose displayName", () => {
+    expect(CopyButton.displayName).toBe("CopyButton");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<CopyButton value="npm i zentauri" />);
+    expect(
+      document.querySelector('[data-slot="copy-button"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("should write the value to the clipboard on click", async () => {
+    render(<CopyButton value="copy me" />);
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy me"),
+    );
+  });
+
+  it("should call onCopy after a successful copy", async () => {
+    const user = userEvent.setup();
+    const onCopy = vi.fn();
+    render(<CopyButton value="token-123" onCopy={onCopy} />);
+    await user.click(screen.getByRole("button"));
+    await waitFor(() => expect(onCopy).toHaveBeenCalledWith("token-123"));
+  });
+
+  it("should flip to the copied state and mark data-copied", async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value="x" timeout={0} copiedLabel="Copied!" />);
+    const button = screen.getByRole("button");
+    await user.click(button);
+    await waitFor(() =>
+      expect(button.getAttribute("data-copied")).toBe("true"),
+    );
+  });
+
+  it("should render the label when iconOnly is false", () => {
+    render(<CopyButton value="x" iconOnly={false} label="Copy code" />);
+    expect(screen.getByText("Copy code")).toBeInTheDocument();
+  });
+
+  it("should apply the secondary appearance token", () => {
+    render(<CopyButton value="x" appearance="secondary" />);
+    const button = document.querySelector(
+      '[data-slot="copy-button"]',
+    ) as HTMLElement;
+    expect(button.className).toMatch(/--zui-copy-button-secondary-bg/);
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<CopyButton ref={ref} value="x" />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("copy-button");
+  });
+});

package/src/ui/copy-button/copy-button.tsx

@@ -0,0 +1,9 @@
+// copy-button.tsx — default static entry (no framer-motion)
+import { CopyButtonBase } from "./copy-button-base";
+import type { CopyButtonProps } from "./types";
+
+export function CopyButton(props: CopyButtonProps) {
+  return <CopyButtonBase {...props} />;
+}
+
+CopyButton.displayName = "CopyButton";

package/src/ui/copy-button/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { CopyButton } from "./copy-button";
+export type {
+  CopyButtonBaseProps,
+  CopyButtonIconRenderer,
+  CopyButtonProps,
+  CopyButtonVariantProps,
+} from "./types";
+export { copyButtonVariants } from "./variants";

package/src/ui/copy-button/types.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { copyButtonVariants } from "./variants";
+
+export type CopyButtonVariantProps = VariantProps<typeof copyButtonVariants>;
+
+/** Renders the icon region for a given copied state. Lets the animated entry swap the static icons for motion ones. */
+export type CopyButtonIconRenderer = (state: {
+  copied: boolean;
+  copyIcon: ReactNode;
+  copiedIcon: ReactNode;
+}) => ReactNode;
+
+export interface CopyButtonBaseProps
+  extends Omit<ComponentPropsWithRef<"button">, "value" | "onCopy"> {
+  /** Text written to the clipboard when the button is pressed. */
+  value: string;
+  /** Milliseconds the copied state stays active before resetting. `0` keeps it until re-copied. */
+  timeout?: number;
+  appearance?: CopyButtonVariantProps["appearance"];
+  size?: CopyButtonVariantProps["size"];
+  /** Render only the icon (default). Pass `false` to show the label text alongside the icon. */
+  iconOnly?: boolean;
+  /** Label shown (and used for `aria-label`) in the idle state. */
+  label?: string;
+  /** Label shown (and used for `aria-label`) after a successful copy. */
+  copiedLabel?: string;
+  copyIcon?: ReactNode;
+  copiedIcon?: ReactNode;
+  /** Called with `value` after the clipboard write succeeds. */
+  onCopy?: (value: string) => void;
+  /** Overrides how the icon region renders; the animated entry uses this for motion. */
+  renderIcon?: CopyButtonIconRenderer;
+}
+
+export type CopyButtonProps = Omit<CopyButtonBaseProps, "renderIcon">;

package/src/ui/copy-button/variants.ts

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCopyButtonAppearances,
+  zuiCopyButtonBase,
+  zuiCopyButtonIconOnlySizes,
+  zuiCopyButtonSizes,
+} from "../../design-system/copy-button";
+
+export const copyButtonVariants = cva(zuiCopyButtonBase, {
+  variants: {
+    appearance: zuiCopyButtonAppearances,
+    size: zuiCopyButtonSizes,
+    iconOnly: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    { iconOnly: true, size: "sm", class: zuiCopyButtonIconOnlySizes.sm },
+    { iconOnly: true, size: "md", class: zuiCopyButtonIconOnlySizes.md },
+    { iconOnly: true, size: "lg", class: zuiCopyButtonIconOnlySizes.lg },
+  ],
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    iconOnly: true,
+  },
+});

package/src/ui/kbd/animated/animations.ts

@@ -0,0 +1,15 @@
+import type { KbdAnimationPresets } from "./types";
+
+export const kbdAnimationPresets: 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 },
+  },
+};

package/src/ui/kbd/animated/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { KbdAnimated } from "./kbd-animated";
+export { kbdAnimationPresets } from "./animations";
+export type {
+  KbdAnimatedProps,
+  KbdAnimation,
+  KbdAnimationPresets,
+} from "./types";