@zentauri-ui/zentauri-components 1.8.41 → 1.9.0

package/src/ui/inputs/variants.ts

@@ -4,8 +4,16 @@ import {
   zuiInputAppearances,
   zuiInputAs,
   zuiInputBase,
+  zuiInputCheckboxAppearances,
+  zuiInputCheckboxSizes,
+  zuiInputDateAppearances,
+  zuiInputFileAppearances,
+  zuiInputFileSizes,
+  zuiInputRadioAppearances,
+  zuiInputRadioSizes,
   zuiInputRing,
   zuiInputSizes,
+  zuiInputTextareaSizes,
 } from "../../design-system/inputs";
 
 export const inputVariants = cva(zuiInputBase, {
@@ -22,291 +30,250 @@ export const inputVariants = cva(zuiInputBase, {
     ring: true,
   },
   compoundVariants: [
-    // ── textarea size overrides ──────────────────────────────────────────
     {
       as: "textarea",
       size: "sm",
-      class: "min-h-[5rem]",
+      class: zuiInputTextareaSizes.sm,
     },
     {
       as: "textarea",
       size: "md",
-      class: "min-h-[6rem]",
+      class: zuiInputTextareaSizes.md,
     },
     {
       as: "textarea",
       size: "lg",
-      class: "min-h-[7.5rem]",
+      class: zuiInputTextareaSizes.lg,
     },
-    // ── file input: size – height & file-button padding ──────────────────
     {
       as: "file",
       size: "sm",
-      class: "h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs",
+      class: zuiInputFileSizes.sm,
     },
     {
       as: "file",
       size: "md",
-      class:
-        "h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm",
+      class: zuiInputFileSizes.md,
     },
     {
       as: "file",
       size: "lg",
-      class:
-        "h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base",
+      class: zuiInputFileSizes.lg,
     },
-    // ── file input: appearance – file-button accent colour ───────────────
     {
       as: "file",
       appearance: "default",
-      class: "file:text-slate-700 dark:file:text-slate-200",
+      class: zuiInputFileAppearances.default,
     },
     {
       as: "file",
       appearance: "warning",
-      class:
-        "file:bg-yellow-500/20 file:text-yellow-800 dark:file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30",
+      class: zuiInputFileAppearances.warning,
     },
     {
       as: "file",
       appearance: "error",
-      class:
-        "file:bg-rose-500/20 file:text-rose-800 dark:file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30",
+      class: zuiInputFileAppearances.error,
     },
     {
       as: "file",
       appearance: "success",
-      class:
-        "file:bg-emerald-500/20 file:text-emerald-800 dark:file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30",
+      class: zuiInputFileAppearances.success,
     },
     {
       as: "file",
       appearance: "info",
-      class:
-        "file:bg-blue-500/20 file:text-blue-800 dark:file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30",
+      class: zuiInputFileAppearances.info,
     },
     {
       as: "file",
       appearance: "violet",
-      class:
-        "file:bg-violet-500/20 file:text-violet-800 dark:file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30",
+      class: zuiInputFileAppearances.violet,
     },
     {
       as: "file",
       appearance: "amber",
-      class:
-        "file:bg-amber-500/20 file:text-amber-800 dark:file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30",
+      class: zuiInputFileAppearances.amber,
     },
     {
       as: "file",
       appearance: "pink",
-      class:
-        "file:bg-pink-500/20 file:text-pink-800 dark:file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30",
+      class: zuiInputFileAppearances.pink,
     },
     {
       as: "file",
       appearance: "indigo",
-      class:
-        "file:bg-indigo-500/20 file:text-indigo-800 dark:file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30",
+      class: zuiInputFileAppearances.indigo,
     },
-    // ── checkbox / radio: size (overrides text-field height & padding) ───
     {
       as: "checkbox",
       size: "sm",
-      class: "h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!",
+      class: zuiInputCheckboxSizes.sm,
     },
     {
       as: "checkbox",
       size: "md",
-      class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!",
+      class: zuiInputCheckboxSizes.md,
     },
     {
       as: "checkbox",
       size: "lg",
-      class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!",
+      class: zuiInputCheckboxSizes.lg,
     },
     {
       as: "radio",
       size: "sm",
-      class: "h-4! w-4! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.sm,
     },
     {
       as: "radio",
       size: "md",
-      class: "h-5! w-5! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.md,
     },
     {
       as: "radio",
       size: "lg",
-      class: "h-6! w-6! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.lg,
     },
-    // ── checkbox: appearance (border + tick color; fill stays transparent) ─
     {
       as: "checkbox",
       appearance: "default",
-      class:
-        "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:text-slate-700 dark:checked:text-slate-200 hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70",
+      class: zuiInputCheckboxAppearances.default,
     },
     {
       as: "checkbox",
       appearance: "warning",
-      class:
-        "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:text-yellow-700 dark:checked:text-yellow-300 hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+      class: zuiInputCheckboxAppearances.warning,
     },
     {
       as: "checkbox",
       appearance: "error",
-      class:
-        "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:text-rose-700 dark:checked:text-rose-300 hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+      class: zuiInputCheckboxAppearances.error,
     },
     {
       as: "checkbox",
       appearance: "success",
-      class:
-        "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:text-emerald-700 dark:checked:text-emerald-300 hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+      class: zuiInputCheckboxAppearances.success,
     },
     {
       as: "checkbox",
       appearance: "info",
-      class:
-        "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:text-blue-700 dark:checked:text-blue-300 hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+      class: zuiInputCheckboxAppearances.info,
     },
     {
       as: "checkbox",
       appearance: "violet",
-      class:
-        "border-violet-500/70! checked:after:bg-violet-600 dark:checked:after:bg-violet-400 checked:border-violet-600 dark:checked:border-violet-400 checked:text-violet-700 dark:checked:text-violet-300 hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+      class: zuiInputCheckboxAppearances.violet,
     },
     {
       as: "checkbox",
       appearance: "amber",
-      class:
-        "border-amber-500/70! checked:border-amber-400! checked:text-amber-700 dark:checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!",
+      class: zuiInputCheckboxAppearances.amber,
     },
     {
       as: "checkbox",
       appearance: "pink",
-      class:
-        "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:text-pink-700 dark:checked:text-pink-300 hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+      class: zuiInputCheckboxAppearances.pink,
     },
     {
       as: "checkbox",
       appearance: "indigo",
-      class:
-        "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-700 dark:checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!",
+      class: zuiInputCheckboxAppearances.indigo,
     },
-    // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
     {
       as: "radio",
       appearance: "default",
-      class:
-        "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-slate-300/90!",
+      class: zuiInputRadioAppearances.default,
     },
     {
       as: "radio",
       appearance: "warning",
-      class:
-        "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-yellow-400/90!",
+      class: zuiInputRadioAppearances.warning,
     },
     {
       as: "radio",
       appearance: "error",
-      class:
-        "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-rose-400/90!",
+      class: zuiInputRadioAppearances.error,
     },
     {
       as: "radio",
       appearance: "success",
-      class:
-        "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-emerald-400/90!",
+      class: zuiInputRadioAppearances.success,
     },
     {
       as: "radio",
       appearance: "info",
-      class:
-        "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-blue-400/90!",
+      class: zuiInputRadioAppearances.info,
     },
     {
       as: "radio",
       appearance: "violet",
-      class:
-        "border-violet-500/70! checked:border-violet-600 dark:checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-violet-400/90!",
+      class: zuiInputRadioAppearances.violet,
     },
     {
       as: "radio",
       appearance: "amber",
-      class:
-        "border-amber-500/70! checked:border-amber-600 dark:checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-600 dark:hover:border-amber-400 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-amber-400/90!",
+      class: zuiInputRadioAppearances.amber,
     },
     {
       as: "radio",
       appearance: "pink",
-      class:
-        "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-pink-400/90!",
+      class: zuiInputRadioAppearances.pink,
     },
     {
       as: "radio",
       appearance: "indigo",
-      class:
-        "border-indigo-500/70! checked:border-indigo-600 dark:checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-600 dark:hover:border-indigo-400 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-indigo-400/90!",
+      class: zuiInputRadioAppearances.indigo,
     },
     {
       as: "date",
       appearance: "default",
-      class:
-        "bg-white dark:bg-black border border-black/10 dark:border-white/80 text-black dark:text-white",
+      class: zuiInputDateAppearances.default,
     },
     {
       as: "date",
       appearance: "warning",
-      class:
-        "bg-yellow-900 dark:bg-transparent text-yellow-50 dark:text-yellow-50",
+      class: zuiInputDateAppearances.warning,
     },
     {
       as: "date",
       appearance: "error",
-      class: "bg-rose-900 dark:bg-transparent text-rose-50 dark:text-rose-50",
+      class: zuiInputDateAppearances.error,
     },
     {
       as: "date",
       appearance: "success",
-      class:
-        "bg-emerald-900 dark:bg-transparent text-emerald-50 dark:text-emerald-50",
+      class: zuiInputDateAppearances.success,
     },
     {
       as: "date",
       appearance: "info",
-      class: "bg-blue-900 dark:bg-transparent text-blue-50 dark:text-blue-50",
+      class: zuiInputDateAppearances.info,
     },
     {
       as: "date",
       appearance: "violet",
-      class:
-        "bg-violet-900 dark:bg-transparent text-violet-50 dark:text-violet-50",
+      class: zuiInputDateAppearances.violet,
     },
     {
       as: "date",
       appearance: "amber",
-      class:
-        "bg-amber-900 dark:bg-transparent text-amber-50 dark:text-amber-50",
+      class: zuiInputDateAppearances.amber,
     },
     {
       as: "date",
       appearance: "pink",
-      class: "bg-pink-900 dark:bg-transparent text-pink-50 dark:text-pink-50",
+      class: zuiInputDateAppearances.pink,
     },
     {
       as: "date",
       appearance: "indigo",
-      class:
-        "bg-indigo-900 dark:bg-transparent text-indigo-50 dark:text-indigo-50",
+      class: zuiInputDateAppearances.indigo,
     },
     {
       as: "date",
       appearance: "orange",
-      class:
-        "bg-orange-900 dark:bg-transparent text-orange-50 dark:text-orange-50",
+      class: zuiInputDateAppearances.orange,
     },
   ],
 });

package/src/ui/kbd/variants.ts

@@ -4,6 +4,7 @@ import {
   zuiKbdKeyAppearances,
   zuiKbdKeyBase,
   zuiKbdKeySizes,
+  zuiKbdSeparatorBase,
   zuiKbdSeparatorSizes,
 } from "../../design-system/kbd";
 
@@ -18,14 +19,11 @@ export const kbdKeyVariants = cva(zuiKbdKeyBase, {
   },
 });
 
-export const kbdSeparatorVariants = cva(
-  "text-[color:var(--zui-kbd-separator-fg,#94a3b8)] dark:text-[color:var(--zui-kbd-separator-fg-dark,#64748b)]",
-  {
-    variants: {
-      size: zuiKbdSeparatorSizes,
-    },
-    defaultVariants: {
-      size: "md",
-    },
+export const kbdSeparatorVariants = cva(zuiKbdSeparatorBase, {
+  variants: {
+    size: zuiKbdSeparatorSizes,
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/ui/select/select.test.tsx

@@ -152,6 +152,30 @@ describe("Select — keyboard and a11y", () => {
     expect(listbox).toHaveAttribute("aria-multiselectable", "true");
   });
 
+  it("uses a custom trigger id as the listbox label reference", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select multiple defaultValue={[]}>
+        <SelectTrigger id="custom-select-trigger">
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    const trigger = screen.getByRole("button", { name: /pick/i });
+    await user.click(trigger);
+
+    const listbox = screen.getByRole("listbox");
+    const labelledBy = listbox.getAttribute("aria-labelledby");
+
+    expect(trigger).toHaveAttribute("id", "custom-select-trigger");
+    expect(listbox).toHaveAttribute("aria-labelledby", "custom-select-trigger");
+    expect(document.getElementById(labelledBy ?? "")).toBe(trigger);
+  });
+
   it("moves focus across enabled options with arrow keys", async () => {
     const user = userEvent.setup();
     render(

package/src/ui/select/select.tsx

@@ -1,5 +1,14 @@
 "use client";
-import { useState, useEffect, useCallback, useRef, useId } from "react";
+import {
+  Children,
+  isValidElement,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useId,
+} from "react";
+import type { ReactNode } from "react";
 import {
   SelectProps,
   SelectOption,
@@ -25,14 +34,34 @@ export const useSelect = () => {
   return ctx;
 };
 
+const findSelectTriggerId = (children: ReactNode): string | undefined => {
+  for (const child of Children.toArray(children)) {
+    if (!isValidElement<{ id?: unknown; children?: ReactNode }>(child)) {
+      continue;
+    }
+    if (child.type === SelectTrigger && typeof child.props.id === "string") {
+      return child.props.id;
+    }
+    const nestedTriggerId = findSelectTriggerId(child.props.children);
+    if (nestedTriggerId) {
+      return nestedTriggerId;
+    }
+  }
+  return undefined;
+};
+
 export const Select = ({
   children,
   value,
   defaultValue = [],
   onChange,
   multiple = true,
+  triggerId: customTriggerId,
 }: SelectProps) => {
-  const listboxId = `${useId()}-listbox`;
+  const baseId = useId();
+  const triggerId =
+    customTriggerId ?? findSelectTriggerId(children) ?? `${baseId}-trigger`;
+  const listboxId = `${baseId}-listbox`;
   const [internal, setInternal] = useState<string[]>(defaultValue);
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState<SelectOption[]>([]);
@@ -98,6 +127,7 @@ export const Select = ({
         registerOption,
         options,
         multiple,
+        triggerId,
         listboxId,
       }}
     >
@@ -110,15 +140,17 @@ export const Select = ({
 
 export const SelectTrigger = ({
   className,
+  id: _customId,
   variant,
   size,
   onClick,
   ...props
 }: SelectTriggerProps) => {
-  const { open, setOpen, listboxId } = useSelect();
+  const { open, setOpen, triggerId, listboxId } = useSelect();
 
   return (
     <button
+      id={triggerId}
       type="button"
       aria-expanded={open}
       aria-haspopup="listbox"
@@ -172,7 +204,7 @@ export const SelectContent = ({
   spacing = "default",
   ...props
 }: SelectContentProps) => {
-  const { open, listboxId, multiple } = useSelect();
+  const { open, triggerId, listboxId, multiple } = useSelect();
   const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -248,6 +280,7 @@ export const SelectContent = ({
       ref={panelRef}
       id={listboxId}
       role="listbox"
+      aria-labelledby={triggerId}
       aria-multiselectable={multiple}
       tabIndex={-1}
       className={cn(

package/src/ui/select/types.ts

@@ -40,6 +40,7 @@ export type SelectContextType = {
   registerOption: (option: SelectOption) => void;
   options: SelectOption[];
   multiple: boolean;
+  triggerId: string;
   listboxId: string;
 };
 
@@ -48,6 +49,7 @@ export type SelectProps = {
   defaultValue?: string[];
   onChange?: (value: string[]) => void;
   multiple?: boolean;
+  triggerId?: string;
   children: ReactNode;
   className?: string;
 };

package/dist/chunk-CJXGDY7A.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/kbd.ts","../src/ui/kbd/variants.ts","../src/ui/kbd/kbd-base.tsx"],"names":[],"mappings":"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","file":"chunk-CJXGDY7A.mjs","sourcesContent":["export const zuiKbdBase = [\n  \"inline-flex items-center justify-center gap-1 align-middle\",\n  \"rounded-[var(--zui-kbd-radius,0.375rem)] font-mono font-medium leading-none select-none\",\n] as const;\n\nexport const zuiKbdKeyAppearances = {\n  default:\n    \"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)]\",\n  secondary:\n    \"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)]\",\n  destructive:\n    \"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)]\",\n  outline:\n    \"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)]\",\n  ghost:\n    \"bg-transparent text-[color:var(--zui-kbd-ghost-fg,#334155)] dark:text-[color:var(--zui-kbd-ghost-fg-dark,#e2e8f0)]\",\n  glass:\n    \"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\",\n  emerald:\n    \"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)]\",\n  indigo:\n    \"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)]\",\n  purple:\n    \"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)]\",\n  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)]\",\n  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)]\",\n  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)]\",\n  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)]\",\n  yellow:\n    \"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)]\",\n  orange:\n    \"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)]\",\n  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)]\",\n  amber:\n    \"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)]\",\n  violet:\n    \"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)]\",\n  \"gradient-blue\":\n    \"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)]\",\n  \"gradient-green\":\n    \"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)]\",\n  \"gradient-red\":\n    \"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)]\",\n  \"gradient-yellow\":\n    \"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)]\",\n  \"gradient-purple\":\n    \"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)]\",\n  \"gradient-teal\":\n    \"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)]\",\n  \"gradient-indigo\":\n    \"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)]\",\n  \"gradient-pink\":\n    \"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)]\",\n  \"gradient-orange\":\n    \"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)]\",\n} as const;\n\nexport type ZuiKbdAppearance = keyof typeof zuiKbdKeyAppearances;\n\nexport const zuiKbdKeyBase = [\n  \"inline-flex items-center justify-center font-mono font-medium leading-none\",\n  \"rounded-[var(--zui-kbd-radius,0.375rem)]\",\n  \"shadow-[var(--zui-kbd-shadow,inset_0_-1px_0_#0000001f)] dark:shadow-[var(--zui-kbd-shadow-dark,inset_0_-1px_0_#0000004d)]\",\n] as const;\n\nexport const zuiKbdKeySizes = {\n  sm: \"h-5 min-w-5 px-1 text-[0.7rem]\",\n  md: \"h-6 min-w-6 px-1.5 text-xs\",\n  lg: \"h-7 min-w-7 px-2 text-sm\",\n} as const;\n\nexport type ZuiKbdSize = keyof typeof zuiKbdKeySizes;\n\nexport const zuiKbdSeparatorSizes = {\n  sm: \"text-[0.7rem]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiKbdKeyAppearances,\n  zuiKbdKeyBase,\n  zuiKbdKeySizes,\n  zuiKbdSeparatorSizes,\n} from \"../../design-system/kbd\";\n\nexport const kbdKeyVariants = cva(zuiKbdKeyBase, {\n  variants: {\n    appearance: zuiKbdKeyAppearances,\n    size: zuiKbdKeySizes,\n  },\n  defaultVariants: {\n    appearance: \"outline\",\n    size: \"md\",\n  },\n});\n\nexport const kbdSeparatorVariants = cva(\n  \"text-[color:var(--zui-kbd-separator-fg,#94a3b8)] dark:text-[color:var(--zui-kbd-separator-fg-dark,#64748b)]\",\n  {\n    variants: {\n      size: zuiKbdSeparatorSizes,\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n","\"use client\";\n\nimport { Fragment } from \"react\";\n\nimport { zuiKbdBase } from \"../../design-system/kbd\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { KbdBaseProps } from \"./types\";\nimport { kbdKeyVariants, kbdSeparatorVariants } from \"./variants\";\n\nexport function KbdBase({\n  keys,\n  separator,\n  appearance,\n  size,\n  children,\n  className,\n  as: Wrapper = \"span\",\n  ref,\n  ...rest\n}: KbdBaseProps) {\n  const items = keys ?? (children != null ? [children] : []);\n\n  return (\n    <Wrapper\n      ref={ref}\n      data-slot=\"kbd\"\n      className={cn(zuiKbdBase, className)}\n      {...rest}\n    >\n      {items.map((key, index) => (\n        <Fragment key={index}>\n          {index > 0 && separator != null ? (\n            <span\n              data-slot=\"kbd-separator\"\n              className={kbdSeparatorVariants({ size })}\n            >\n              {separator}\n            </span>\n          ) : null}\n          <kbd\n            data-slot=\"kbd-key\"\n            className={kbdKeyVariants({ appearance, size })}\n          >\n            {key}\n          </kbd>\n        </Fragment>\n      ))}\n    </Wrapper>\n  );\n}\n\nKbdBase.displayName = \"Kbd\";\n"]}