@zentauri-ui/zentauri-components 1.9.0 → 1.9.2

package/src/ui/dropdown/types.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
+import type { zuiDropdownTriggerVariants } from "../../design-system/dropdown";
+
 export type DropdownContextType = {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -10,33 +12,7 @@ export type DropdownContextType = {
   menuId: string;
 };
 
-type Variant =
-  | "default"
-  | "outline"
-  | "ghost"
-  | "white"
-  | "black"
-  | "sky"
-  | "rose"
-  | "purple"
-  | "pink"
-  | "orange"
-  | "yellow"
-  | "teal"
-  | "indigo"
-  | "emerald"
-  | "gray"
-  | "amber"
-  | "violet"
-  | "gradient-blue"
-  | "gradient-green"
-  | "gradient-red"
-  | "gradient-yellow"
-  | "gradient-purple"
-  | "gradient-teal"
-  | "gradient-indigo"
-  | "gradient-pink"
-  | "gradient-orange";
+type Variant = keyof typeof zuiDropdownTriggerVariants;
 
 export type DropdownProps = {
   children: ReactNode;

package/src/ui/inputs/variants.ts

@@ -275,5 +275,440 @@ export const inputVariants = cva(zuiInputBase, {
       appearance: "orange",
       class: zuiInputDateAppearances.orange,
     },
+    {
+      as: "file",
+      appearance: "blue",
+      class: zuiInputFileAppearances.blue,
+    },
+    {
+      as: "file",
+      appearance: "cyan",
+      class: zuiInputFileAppearances.cyan,
+    },
+    {
+      as: "file",
+      appearance: "green",
+      class: zuiInputFileAppearances.green,
+    },
+    {
+      as: "file",
+      appearance: "lime",
+      class: zuiInputFileAppearances.lime,
+    },
+    {
+      as: "file",
+      appearance: "mint",
+      class: zuiInputFileAppearances.mint,
+    },
+    {
+      as: "file",
+      appearance: "ocean",
+      class: zuiInputFileAppearances.ocean,
+    },
+    {
+      as: "file",
+      appearance: "sapphire",
+      class: zuiInputFileAppearances.sapphire,
+    },
+    {
+      as: "file",
+      appearance: "lavender",
+      class: zuiInputFileAppearances.lavender,
+    },
+    {
+      as: "file",
+      appearance: "ruby",
+      class: zuiInputFileAppearances.ruby,
+    },
+    {
+      as: "file",
+      appearance: "red",
+      class: zuiInputFileAppearances.red,
+    },
+    {
+      as: "file",
+      appearance: "slate",
+      class: zuiInputFileAppearances.slate,
+    },
+    {
+      as: "file",
+      appearance: "zinc",
+      class: zuiInputFileAppearances.zinc,
+    },
+    {
+      as: "file",
+      appearance: "stone",
+      class: zuiInputFileAppearances.stone,
+    },
+    {
+      as: "file",
+      appearance: "royal",
+      class: zuiInputFileAppearances.royal,
+    },
+    {
+      as: "file",
+      appearance: "electric",
+      class: zuiInputFileAppearances.electric,
+    },
+    {
+      as: "file",
+      appearance: "forest",
+      class: zuiInputFileAppearances.forest,
+    },
+    {
+      as: "file",
+      appearance: "sunset",
+      class: zuiInputFileAppearances.sunset,
+    },
+    {
+      as: "file",
+      appearance: "magenta",
+      class: zuiInputFileAppearances.magenta,
+    },
+    {
+      as: "file",
+      appearance: "crimson",
+      class: zuiInputFileAppearances.crimson,
+    },
+    {
+      as: "file",
+      appearance: "aqua",
+      class: zuiInputFileAppearances.aqua,
+    },
+    {
+      as: "file",
+      appearance: "plum",
+      class: zuiInputFileAppearances.plum,
+    },
+    {
+      as: "file",
+      appearance: "orange",
+      class: zuiInputFileAppearances.orange,
+    },
+    {
+      as: "checkbox",
+      appearance: "blue",
+      class: zuiInputCheckboxAppearances.blue,
+    },
+    {
+      as: "checkbox",
+      appearance: "cyan",
+      class: zuiInputCheckboxAppearances.cyan,
+    },
+    {
+      as: "checkbox",
+      appearance: "green",
+      class: zuiInputCheckboxAppearances.green,
+    },
+    {
+      as: "checkbox",
+      appearance: "lime",
+      class: zuiInputCheckboxAppearances.lime,
+    },
+    {
+      as: "checkbox",
+      appearance: "mint",
+      class: zuiInputCheckboxAppearances.mint,
+    },
+    {
+      as: "checkbox",
+      appearance: "ocean",
+      class: zuiInputCheckboxAppearances.ocean,
+    },
+    {
+      as: "checkbox",
+      appearance: "sapphire",
+      class: zuiInputCheckboxAppearances.sapphire,
+    },
+    {
+      as: "checkbox",
+      appearance: "lavender",
+      class: zuiInputCheckboxAppearances.lavender,
+    },
+    {
+      as: "checkbox",
+      appearance: "ruby",
+      class: zuiInputCheckboxAppearances.ruby,
+    },
+    {
+      as: "checkbox",
+      appearance: "red",
+      class: zuiInputCheckboxAppearances.red,
+    },
+    {
+      as: "checkbox",
+      appearance: "slate",
+      class: zuiInputCheckboxAppearances.slate,
+    },
+    {
+      as: "checkbox",
+      appearance: "zinc",
+      class: zuiInputCheckboxAppearances.zinc,
+    },
+    {
+      as: "checkbox",
+      appearance: "stone",
+      class: zuiInputCheckboxAppearances.stone,
+    },
+    {
+      as: "checkbox",
+      appearance: "royal",
+      class: zuiInputCheckboxAppearances.royal,
+    },
+    {
+      as: "checkbox",
+      appearance: "electric",
+      class: zuiInputCheckboxAppearances.electric,
+    },
+    {
+      as: "checkbox",
+      appearance: "forest",
+      class: zuiInputCheckboxAppearances.forest,
+    },
+    {
+      as: "checkbox",
+      appearance: "sunset",
+      class: zuiInputCheckboxAppearances.sunset,
+    },
+    {
+      as: "checkbox",
+      appearance: "magenta",
+      class: zuiInputCheckboxAppearances.magenta,
+    },
+    {
+      as: "checkbox",
+      appearance: "crimson",
+      class: zuiInputCheckboxAppearances.crimson,
+    },
+    {
+      as: "checkbox",
+      appearance: "aqua",
+      class: zuiInputCheckboxAppearances.aqua,
+    },
+    {
+      as: "checkbox",
+      appearance: "plum",
+      class: zuiInputCheckboxAppearances.plum,
+    },
+    {
+      as: "checkbox",
+      appearance: "orange",
+      class: zuiInputCheckboxAppearances.orange,
+    },
+    {
+      as: "radio",
+      appearance: "blue",
+      class: zuiInputRadioAppearances.blue,
+    },
+    {
+      as: "radio",
+      appearance: "cyan",
+      class: zuiInputRadioAppearances.cyan,
+    },
+    {
+      as: "radio",
+      appearance: "green",
+      class: zuiInputRadioAppearances.green,
+    },
+    {
+      as: "radio",
+      appearance: "lime",
+      class: zuiInputRadioAppearances.lime,
+    },
+    {
+      as: "radio",
+      appearance: "mint",
+      class: zuiInputRadioAppearances.mint,
+    },
+    {
+      as: "radio",
+      appearance: "ocean",
+      class: zuiInputRadioAppearances.ocean,
+    },
+    {
+      as: "radio",
+      appearance: "sapphire",
+      class: zuiInputRadioAppearances.sapphire,
+    },
+    {
+      as: "radio",
+      appearance: "lavender",
+      class: zuiInputRadioAppearances.lavender,
+    },
+    {
+      as: "radio",
+      appearance: "ruby",
+      class: zuiInputRadioAppearances.ruby,
+    },
+    {
+      as: "radio",
+      appearance: "red",
+      class: zuiInputRadioAppearances.red,
+    },
+    {
+      as: "radio",
+      appearance: "slate",
+      class: zuiInputRadioAppearances.slate,
+    },
+    {
+      as: "radio",
+      appearance: "zinc",
+      class: zuiInputRadioAppearances.zinc,
+    },
+    {
+      as: "radio",
+      appearance: "stone",
+      class: zuiInputRadioAppearances.stone,
+    },
+    {
+      as: "radio",
+      appearance: "royal",
+      class: zuiInputRadioAppearances.royal,
+    },
+    {
+      as: "radio",
+      appearance: "electric",
+      class: zuiInputRadioAppearances.electric,
+    },
+    {
+      as: "radio",
+      appearance: "forest",
+      class: zuiInputRadioAppearances.forest,
+    },
+    {
+      as: "radio",
+      appearance: "sunset",
+      class: zuiInputRadioAppearances.sunset,
+    },
+    {
+      as: "radio",
+      appearance: "magenta",
+      class: zuiInputRadioAppearances.magenta,
+    },
+    {
+      as: "radio",
+      appearance: "crimson",
+      class: zuiInputRadioAppearances.crimson,
+    },
+    {
+      as: "radio",
+      appearance: "aqua",
+      class: zuiInputRadioAppearances.aqua,
+    },
+    {
+      as: "radio",
+      appearance: "plum",
+      class: zuiInputRadioAppearances.plum,
+    },
+    {
+      as: "radio",
+      appearance: "orange",
+      class: zuiInputRadioAppearances.orange,
+    },
+    {
+      as: "date",
+      appearance: "blue",
+      class: zuiInputDateAppearances.blue,
+    },
+    {
+      as: "date",
+      appearance: "cyan",
+      class: zuiInputDateAppearances.cyan,
+    },
+    {
+      as: "date",
+      appearance: "green",
+      class: zuiInputDateAppearances.green,
+    },
+    {
+      as: "date",
+      appearance: "lime",
+      class: zuiInputDateAppearances.lime,
+    },
+    {
+      as: "date",
+      appearance: "mint",
+      class: zuiInputDateAppearances.mint,
+    },
+    {
+      as: "date",
+      appearance: "ocean",
+      class: zuiInputDateAppearances.ocean,
+    },
+    {
+      as: "date",
+      appearance: "sapphire",
+      class: zuiInputDateAppearances.sapphire,
+    },
+    {
+      as: "date",
+      appearance: "lavender",
+      class: zuiInputDateAppearances.lavender,
+    },
+    {
+      as: "date",
+      appearance: "ruby",
+      class: zuiInputDateAppearances.ruby,
+    },
+    {
+      as: "date",
+      appearance: "red",
+      class: zuiInputDateAppearances.red,
+    },
+    {
+      as: "date",
+      appearance: "slate",
+      class: zuiInputDateAppearances.slate,
+    },
+    {
+      as: "date",
+      appearance: "zinc",
+      class: zuiInputDateAppearances.zinc,
+    },
+    {
+      as: "date",
+      appearance: "stone",
+      class: zuiInputDateAppearances.stone,
+    },
+    {
+      as: "date",
+      appearance: "royal",
+      class: zuiInputDateAppearances.royal,
+    },
+    {
+      as: "date",
+      appearance: "electric",
+      class: zuiInputDateAppearances.electric,
+    },
+    {
+      as: "date",
+      appearance: "forest",
+      class: zuiInputDateAppearances.forest,
+    },
+    {
+      as: "date",
+      appearance: "sunset",
+      class: zuiInputDateAppearances.sunset,
+    },
+    {
+      as: "date",
+      appearance: "magenta",
+      class: zuiInputDateAppearances.magenta,
+    },
+    {
+      as: "date",
+      appearance: "crimson",
+      class: zuiInputDateAppearances.crimson,
+    },
+    {
+      as: "date",
+      appearance: "aqua",
+      class: zuiInputDateAppearances.aqua,
+    },
+    {
+      as: "date",
+      appearance: "plum",
+      class: zuiInputDateAppearances.plum,
+    },
   ],
 });

package/src/ui/pagination/types.ts

@@ -1,10 +1,11 @@
 import type { VariantProps } from "class-variance-authority";
 import type { ComponentPropsWithRef } from "react";
 
+import type { zuiPaginationListAppearances } from "../../design-system/pagination";
 import type { buttonVariants } from "../buttons/variants";
 
 export type PaginationAppearance = NonNullable<
-  VariantProps<typeof buttonVariants>["appearance"]
+  keyof typeof zuiPaginationListAppearances
 >;
 
 export type PaginationSize = NonNullable<
@@ -37,7 +38,8 @@ export type UsePaginationResult = {
 };
 
 export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "onChange"> &
-  VariantProps<typeof buttonVariants> & {
+  Omit<VariantProps<typeof buttonVariants>, "appearance"> & {
+    appearance?: PaginationAppearance;
     pageCount: number;
     page?: number;
     defaultPage?: number;

package/src/ui/select/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
+import type { zuiSelectContentAppearances } from "../../design-system/select";
 import type { selectTriggerVariants } from "./variants";
 
 export type SelectOption = {
@@ -8,29 +9,7 @@ export type SelectOption = {
   value: string;
   disabled?: boolean;
 };
-export type SelectAppearance =
-  | "default"
-  | "glass"
-  | "ghost"
-  | "outline"
-  | "sky"
-  | "rose"
-  | "purple"
-  | "pink"
-  | "orange"
-  | "yellow"
-  | "teal"
-  | "indigo"
-  | "emerald"
-  | "gradient-blue"
-  | "gradient-green"
-  | "gradient-red"
-  | "gradient-yellow"
-  | "gradient-purple"
-  | "gradient-teal"
-  | "gradient-indigo"
-  | "gradient-pink"
-  | "gradient-orange";
+export type SelectAppearance = keyof typeof zuiSelectContentAppearances;
 export type SelectContextType = {
   open: boolean;
   setOpen: (v: boolean) => void;

package/src/ui/tabs/types.ts

@@ -1,6 +1,9 @@
 import type { ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
 
+import type { zuiTabsTriggerAppearances } from "../../design-system/tabs";
+
 export type TabsValue = string;
+export type TabsAppearance = keyof typeof zuiTabsTriggerAppearances;
 
 export type TabsProps = {
   value?: TabsValue;
@@ -9,27 +12,7 @@ export type TabsProps = {
   orientation?: "horizontal" | "vertical";
   variant?: "default" | "underline" | "pills";
   size?: "sm" | "md" | "lg";
-  appearance?:
-    | "default"
-    | "sky"
-    | "rose"
-    | "purple"
-    | "pink"
-    | "orange"
-    | "yellow"
-    | "teal"
-    | "indigo"
-    | "emerald"
-    | "gray"
-    | "gradient-blue"
-    | "gradient-green"
-    | "gradient-red"
-    | "gradient-yellow"
-    | "gradient-purple"
-    | "gradient-teal"
-    | "gradient-indigo"
-    | "gradient-pink"
-    | "gradient-orange";
+  appearance?: TabsAppearance;
   children: ReactNode;
   className?: string;
 };
@@ -63,27 +46,7 @@ export type TabsContextType = {
   orientation: "horizontal" | "vertical";
   size?: "sm" | "md" | "lg";
   variant?: "default" | "underline" | "pills";
-  appearance?:
-    | "default"
-    | "sky"
-    | "rose"
-    | "purple"
-    | "pink"
-    | "orange"
-    | "yellow"
-    | "teal"
-    | "indigo"
-    | "emerald"
-    | "gray"
-    | "gradient-blue"
-    | "gradient-green"
-    | "gradient-red"
-    | "gradient-yellow"
-    | "gradient-purple"
-    | "gradient-teal"
-    | "gradient-indigo"
-    | "gradient-pink"
-    | "gradient-orange";
+  appearance?: TabsAppearance;
   tabTriggerId: (value: TabsValue) => string;
   tabPanelId: (value: TabsValue) => string;
 };

package/src/ui/tooltip/types.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 
+import type { zuiTooltipVariants } from "../../design-system/tooltip";
+
 export type TooltipPosition = "top" | "bottom" | "left" | "right";
+export type TooltipVariant = keyof typeof zuiTooltipVariants;
 
 export type TooltipContextType = {
   open: boolean;
@@ -29,30 +32,7 @@ export type TooltipTriggerProps = {
 export type TooltipContentProps = {
   children: ReactNode;
   className?: string;
-  variant?:
-    | "default"
-    | "outline"
-    | "ghost"
-    | "glass"
-    | "emerald"
-    | "indigo"
-    | "purple"
-    | "pink"
-    | "rose"
-    | "sky"
-    | "teal"
-    | "yellow"
-    | "orange"
-    | "green"
-    | "gradient-blue"
-    | "gradient-green"
-    | "gradient-red"
-    | "gradient-yellow"
-    | "gradient-purple"
-    | "gradient-teal"
-    | "gradient-indigo"
-    | "gradient-pink"
-    | "gradient-orange";
+  variant?: TooltipVariant;
   size?: "sm" | "md" | "lg";
   width?: "fit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 };

package/dist/chunk-2F7P4EJQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/copy-button.ts","../src/ui/copy-button/variants.ts","../src/ui/copy-button/copy-button-base.tsx"],"names":["cva","jsx","FiCopy","FiCheck","useClipboard","jsxs","cn"],"mappings":"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","file":"chunk-2F7P4EJQ.js","sourcesContent":["export const zuiCopyButtonBase = [\n  \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap\",\n  \"rounded-[var(--zui-copy-button-radius,0.75rem)] font-medium\",\n  \"ring-offset-[var(--zui-copy-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-copy-button-ring-offset-dark,#020617)]\",\n  \"transition-colors select-none\",\n  \"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\",\n  \"disabled:pointer-events-none disabled:opacity-50\",\n] as const;\n\nexport const zuiCopyButtonAppearances = {\n  default:\n    \"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)]\",\n  secondary:\n    \"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)]\",\n  destructive:\n    \"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)]\",\n  outline:\n    \"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)]\",\n  ghost:\n    \"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)]\",\n  glass:\n    \"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)]\",\n  emerald:\n    \"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)]\",\n  indigo:\n    \"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)]\",\n  purple:\n    \"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)]\",\n  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)]\",\n  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)]\",\n  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)]\",\n  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)]\",\n  yellow:\n    \"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)]\",\n  orange:\n    \"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)]\",\n  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)]\",\n  amber:\n    \"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)]\",\n  violet:\n    \"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)]\",\n  \"gradient-blue\":\n    \"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)]\",\n  \"gradient-green\":\n    \"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)]\",\n  \"gradient-red\":\n    \"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)]\",\n  \"gradient-yellow\":\n    \"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)]\",\n  \"gradient-purple\":\n    \"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)]\",\n  \"gradient-teal\":\n    \"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)]\",\n  \"gradient-indigo\":\n    \"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)]\",\n  \"gradient-pink\":\n    \"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)]\",\n  \"gradient-orange\":\n    \"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)]\",\n} as const;\n\nexport type ZuiCopyButtonAppearance = keyof typeof zuiCopyButtonAppearances;\n\nexport const zuiCopyButtonSizes = {\n  sm: \"h-8 px-2.5 text-xs [&_svg]:size-3.5\",\n  md: \"h-9 px-3 text-sm [&_svg]:size-4\",\n  lg: \"h-11 px-4 text-base [&_svg]:size-5\",\n} as const;\n\nexport type ZuiCopyButtonSize = keyof typeof zuiCopyButtonSizes;\n\nexport const zuiCopyButtonIconOnlySizes = {\n  sm: \"w-8 px-0\",\n  md: \"w-9 px-0\",\n  lg: \"w-11 px-0\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiCopyButtonAppearances,\n  zuiCopyButtonBase,\n  zuiCopyButtonIconOnlySizes,\n  zuiCopyButtonSizes,\n} from \"../../design-system/copy-button\";\n\nexport const copyButtonVariants = cva(zuiCopyButtonBase, {\n  variants: {\n    appearance: zuiCopyButtonAppearances,\n    size: zuiCopyButtonSizes,\n    iconOnly: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    { iconOnly: true, size: \"sm\", class: zuiCopyButtonIconOnlySizes.sm },\n    { iconOnly: true, size: \"md\", class: zuiCopyButtonIconOnlySizes.md },\n    { iconOnly: true, size: \"lg\", class: zuiCopyButtonIconOnlySizes.lg },\n  ],\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    iconOnly: true,\n  },\n});\n","\"use client\";\n\nimport { FiCheck, FiCopy } from \"react-icons/fi\";\n\nimport { useClipboard } from \"../../hooks/useClipboard/useClipboard\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { CopyButtonBaseProps, CopyButtonIconRenderer } from \"./types\";\nimport { copyButtonVariants } from \"./variants\";\n\nconst defaultRenderIcon: CopyButtonIconRenderer = ({\n  copied,\n  copyIcon,\n  copiedIcon,\n}) => (copied ? copiedIcon : copyIcon);\n\nexport function CopyButtonBase({\n  value,\n  timeout = 2000,\n  appearance,\n  size,\n  iconOnly = true,\n  label = \"Copy\",\n  copiedLabel = \"Copied\",\n  copyIcon = <FiCopy aria-hidden />,\n  copiedIcon = <FiCheck aria-hidden />,\n  onCopy,\n  renderIcon = defaultRenderIcon,\n  className,\n  type = \"button\",\n  disabled,\n  onClick,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: CopyButtonBaseProps) {\n  const { copied, copy } = useClipboard(timeout);\n\n  const handleClick: NonNullable<CopyButtonBaseProps[\"onClick\"]> = async (\n    event,\n  ) => {\n    onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    const ok = await copy(value);\n    if (ok) {\n      onCopy?.(value);\n    }\n  };\n\n  const text = copied ? copiedLabel : label;\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-slot=\"copy-button\"\n      data-copied={copied ? \"true\" : undefined}\n      disabled={disabled}\n      aria-label={ariaLabel ?? (iconOnly ? text : undefined)}\n      onClick={handleClick}\n      className={cn(\n        copyButtonVariants({ appearance, size, iconOnly }),\n        className,\n      )}\n      {...rest}\n    >\n      <span\n        data-slot=\"copy-button-icon\"\n        className=\"relative inline-flex items-center justify-center\"\n      >\n        {renderIcon({ copied, copyIcon, copiedIcon })}\n      </span>\n      {!iconOnly ? (\n        <span data-slot=\"copy-button-label\" aria-live=\"polite\">\n          {text}\n        </span>\n      ) : (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {text}\n        </span>\n      )}\n    </button>\n  );\n}\n\nCopyButtonBase.displayName = \"CopyButton\";\n"]}