@zentauri-ui/zentauri-components 1.2.1 → 1.3.1

package/dist/chunk-7HL3A4YF.mjs

@@ -0,0 +1,214 @@
+import { cn } from './chunk-DFEZH7TC.mjs';
+import { cva } from 'class-variance-authority';
+import { createContext, useContext, useState, useId } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var tabsListVariants = cva("flex items-center gap-1", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      underline: "border-b-2 border-transparent",
+      pills: "rounded-md"
+    },
+    size: {
+      sm: "text-sm p-1",
+      md: "text-base p-1.5",
+      lg: "text-lg p-2"
+    },
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "horizontal"
+  }
+});
+var tabsTriggerVariants = cva(
+  "px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
+  {
+    variants: {
+      appearance: {
+        default: "bg-transparent",
+        sky: "bg-sky-500/75",
+        rose: "bg-rose-500/75",
+        purple: "bg-purple-500/75",
+        pink: "bg-pink-500/75",
+        orange: "bg-orange-500/75",
+        yellow: "bg-yellow-500/75",
+        teal: "bg-teal-500/75",
+        indigo: "bg-indigo-500/75",
+        emerald: "bg-emerald-500/75",
+        gray: "bg-gray-500/75",
+        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600"
+      },
+      variant: {
+        default: "data-[state=active]:bg-background",
+        underline: "border-b-2 border-transparent data-[state=active]:border-primary rounded-none",
+        pills: "data-[state=active]:bg-primary data-[state=active]:text-white"
+      },
+      size: {
+        sm: "px-2 py-1",
+        md: "px-3 py-1.5",
+        lg: "px-4 py-2"
+      }
+    },
+    defaultVariants: {
+      appearance: "default",
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var TabsContext = createContext(null);
+var useTabs = () => {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs components must be used within Tabs");
+  return ctx;
+};
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  variant,
+  size,
+  appearance,
+  children,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const idPrefix = useId();
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const setValue = (val) => {
+    if (!isControlled) setInternalValue(val);
+    onValueChange?.(val);
+  };
+  const tabTriggerId = (tabValue) => `${idPrefix}zentauri-tab-${tabValue}`;
+  const tabPanelId = (tabValue) => `${idPrefix}zentauri-panel-${tabValue}`;
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: {
+        value: currentValue,
+        setValue,
+        orientation,
+        size,
+        variant,
+        appearance,
+        tabTriggerId,
+        tabPanelId
+      },
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "tabs", className: cn("w-full", className), children })
+    }
+  );
+}
+function TabsList({ children, className, ...props }) {
+  const { orientation, size } = useTabs();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": orientation,
+      className: cn(tabsListVariants({ orientation, size }), className),
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  children,
+  disabled,
+  className,
+  ...props
+}) {
+  const {
+    value: activeValue,
+    setValue,
+    tabTriggerId,
+    tabPanelId,
+    size,
+    appearance,
+    variant
+  } = useTabs();
+  const isActive = activeValue === value;
+  const handleKeyDown = (e) => {
+    const triggers = Array.from(
+      document.querySelectorAll('[role="tab"]')
+    );
+    const index = triggers.findIndex((el) => el === e.currentTarget);
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      triggers[index + 1]?.focus();
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      triggers[index - 1]?.focus();
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      triggers[0]?.focus();
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      triggers[triggers.length - 1]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id: tabTriggerId(value),
+      type: "button",
+      role: "tab",
+      "data-state": isActive ? "active" : "inactive",
+      "aria-selected": isActive,
+      "aria-controls": tabPanelId(value),
+      disabled,
+      onClick: () => setValue(value),
+      onKeyDown: handleKeyDown,
+      className: cn(
+        tabsTriggerVariants({ size, appearance, variant }),
+        className,
+        "cursor-pointer"
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  children,
+  className,
+  as: Wrapper = "div",
+  ...props
+}) {
+  const { value: activeValue, tabTriggerId, tabPanelId } = useTabs();
+  if (activeValue !== value) return null;
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      id: tabPanelId(value),
+      role: "tabpanel",
+      "aria-labelledby": tabTriggerId(value),
+      className: cn("mt-2", className),
+      ...props,
+      children
+    }
+  );
+}
+
+export { Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants, useTabs };
+//# sourceMappingURL=chunk-7HL3A4YF.mjs.map
+//# sourceMappingURL=chunk-7HL3A4YF.mjs.map

package/dist/chunk-7HL3A4YF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/tabs/variants.ts","../src/ui/tabs/tabs-base.tsx"],"names":[],"mappings":"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","file":"chunk-7HL3A4YF.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\"flex items-center gap-1\", {\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      underline: \"border-b-2 border-transparent\",\n      pills: \"rounded-md\",\n    },\n    size: {\n      sm: \"text-sm p-1\",\n      md: \"text-base p-1.5\",\n      lg: \"text-lg p-2\",\n    },\n    orientation: {\n      horizontal: \"flex-row\",\n      vertical: \"flex-col\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    orientation: \"horizontal\",\n  },\n});\n\nexport const tabsTriggerVariants = cva(\n  \"px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring\",\n  {\n    variants: {\n      appearance: {\n        default: \"bg-transparent\",\n        sky: \"bg-sky-500/75\",\n        rose: \"bg-rose-500/75\",\n        purple: \"bg-purple-500/75\",\n        pink: \"bg-pink-500/75\",\n        orange: \"bg-orange-500/75\",\n        yellow: \"bg-yellow-500/75\",\n        teal: \"bg-teal-500/75\",\n        indigo: \"bg-indigo-500/75\",\n        emerald: \"bg-emerald-500/75\",\n        gray: \"bg-gray-500/75\",\n        \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600\",\n        \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600\",\n        \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600\",\n        \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600\",\n        \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600\",\n        \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600\",\n        \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600\",\n        \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600\",\n        \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600\",\n      },\n      variant: {\n        default: \"data-[state=active]:bg-background\",\n        underline:\n          \"border-b-2 border-transparent data-[state=active]:border-primary rounded-none\",\n        pills: \"data-[state=active]:bg-primary data-[state=active]:text-white\",\n      },\n      size: {\n        sm: \"px-2 py-1\",\n        md: \"px-3 py-1.5\",\n        lg: \"px-4 py-2\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"default\",\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n","\"use client\";\n\nimport {\n  createContext,\n  KeyboardEvent,\n  useContext,\n  useId,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport {\n  TabsContentProps,\n  TabsListProps,\n  TabsProps,\n  TabsTriggerProps,\n  TabsValue,\n  TabsContextType,\n} from \"./types\";\nimport { tabsListVariants, tabsTriggerVariants } from \"./variants\";\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport const useTabs = () => {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error(\"Tabs components must be used within Tabs\");\n  return ctx;\n};\n\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = \"horizontal\",\n  variant,\n  size,\n  appearance,\n  children,\n  className,\n}: TabsProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const idPrefix = useId();\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const setValue = (val: string) => {\n    if (!isControlled) setInternalValue(val);\n    onValueChange?.(val);\n  };\n\n  const tabTriggerId = (tabValue: TabsValue) =>\n    `${idPrefix}zentauri-tab-${tabValue}`;\n  const tabPanelId = (tabValue: TabsValue) =>\n    `${idPrefix}zentauri-panel-${tabValue}`;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        value: currentValue,\n        setValue,\n        orientation,\n        size,\n        variant,\n        appearance,\n        tabTriggerId,\n        tabPanelId,\n      }}\n    >\n      <div data-slot=\"tabs\" className={cn(\"w-full\", className)}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport function TabsList({ children, className, ...props }: TabsListProps) {\n  const { orientation, size } = useTabs();\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cn(tabsListVariants({ orientation, size }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function TabsTrigger({\n  value,\n  children,\n  disabled,\n  className,\n  ...props\n}: TabsTriggerProps) {\n  const {\n    value: activeValue,\n    setValue,\n    tabTriggerId,\n    tabPanelId,\n    size,\n    appearance,\n    variant,\n  } = useTabs();\n\n  const isActive = activeValue === value;\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const triggers = Array.from(\n      document.querySelectorAll('[role=\"tab\"]'),\n    ) as HTMLElement[];\n\n    const index = triggers.findIndex((el) => el === e.currentTarget);\n\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      triggers[index + 1]?.focus();\n    }\n\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      triggers[index - 1]?.focus();\n    }\n\n    if (e.key === \"Home\") {\n      e.preventDefault();\n      triggers[0]?.focus();\n    }\n\n    if (e.key === \"End\") {\n      e.preventDefault();\n      triggers[triggers.length - 1]?.focus();\n    }\n  };\n\n  return (\n    <button\n      id={tabTriggerId(value)}\n      type=\"button\"\n      role=\"tab\"\n      data-state={isActive ? \"active\" : \"inactive\"}\n      aria-selected={isActive}\n      aria-controls={tabPanelId(value)}\n      disabled={disabled}\n      onClick={() => setValue(value)}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        tabsTriggerVariants({ size, appearance, variant }),\n        className,\n        \"cursor-pointer\",\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function TabsContent({\n  value,\n  children,\n  className,\n  as: Wrapper = \"div\",\n  ...props\n}: TabsContentProps) {\n  const { value: activeValue, tabTriggerId, tabPanelId } = useTabs();\n\n  if (activeValue !== value) return null;\n\n  return (\n    <Wrapper\n      id={tabPanelId(value)}\n      role=\"tabpanel\"\n      aria-labelledby={tabTriggerId(value)}\n      className={cn(\"mt-2\", className)}\n      {...props}\n    >\n      {children}\n    </Wrapper>\n  );\n}\n"]}

package/dist/chunk-AOEI4V3W.mjs

@@ -0,0 +1,286 @@
+import { cva } from 'class-variance-authority';
+
+// src/ui/inputs/variants.ts
+var inputVariants = cva(
+  [
+    "w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+    "ring-offset-slate-950 transition-colors",
+    "placeholder:text-slate-500",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:cursor-default read-only:bg-white/[0.03]",
+    "file:h-8"
+  ],
+  {
+    variants: {
+      as: {
+        input: "",
+        textarea: "h-auto! resize-y py-2 align-top",
+        file: [
+          // Reset native padding so we control it fully
+          "p-0! cursor-pointer",
+          // File-selector button base styles
+          "file:cursor-pointer file:border-0 file:border-r file:border-white/10",
+          "file:bg-white/10 file:text-slate-200 file:font-medium",
+          "file:transition-colors file:duration-200",
+          "hover:file:bg-white/15",
+          // Content area padding
+          "[&:not(:disabled)]:file:hover:text-white",
+          "disabled:file:cursor-not-allowed"
+        ],
+        checkbox: [
+          "shrink-0 cursor-pointer appearance-none relative",
+          "min-h-0! shadow-none outline-none",
+          "border-2 border-white/30 [&:not(:checked)]:bg-transparent",
+          "transition-[color,box-shadow,border-color,background-color]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "read-only:cursor-default",
+          "checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current"
+        ],
+        radio: [
+          "shrink-0 cursor-pointer appearance-none rounded-full",
+          "min-h-0! shadow-none outline-none",
+          "border-2 border-white/30 bg-transparent! read-only:bg-transparent!",
+          "ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950",
+          "transition-[color,box-shadow,background-color,border-color,box-shadow]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "read-only:cursor-default"
+        ]
+      },
+      appearance: {
+        default: "border-white/10 focus-visible:border-white/20",
+        warning: "border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+        error: "border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+        success: "border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+        info: "border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+        violet: "border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+        amber: "border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
+        pink: "border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+        indigo: "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
+        orange: "border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 md:h-11 px-4 text-sm",
+        lg: "h-10 md:h-12 px-5 text-base"
+      },
+      ring: {
+        true: "focus-visible:ring-2 focus-visible:ring-offset-2",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      as: "input",
+      appearance: "default",
+      size: "md",
+      ring: true
+    },
+    compoundVariants: [
+      // ── textarea size overrides ──────────────────────────────────────────
+      {
+        as: "textarea",
+        size: "sm",
+        class: "min-h-[5rem]"
+      },
+      {
+        as: "textarea",
+        size: "md",
+        class: "min-h-[6rem]"
+      },
+      {
+        as: "textarea",
+        size: "lg",
+        class: "min-h-[7.5rem]"
+      },
+      // ── 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"
+      },
+      {
+        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"
+      },
+      {
+        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"
+      },
+      // ── file input: appearance – file-button accent colour ───────────────
+      {
+        as: "file",
+        appearance: "default",
+        class: "file:text-slate-200"
+      },
+      {
+        as: "file",
+        appearance: "warning",
+        class: "file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30"
+      },
+      {
+        as: "file",
+        appearance: "error",
+        class: "file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30"
+      },
+      {
+        as: "file",
+        appearance: "success",
+        class: "file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30"
+      },
+      {
+        as: "file",
+        appearance: "info",
+        class: "file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30"
+      },
+      {
+        as: "file",
+        appearance: "violet",
+        class: "file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30"
+      },
+      {
+        as: "file",
+        appearance: "amber",
+        class: "file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30"
+      },
+      {
+        as: "file",
+        appearance: "pink",
+        class: "file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30"
+      },
+      {
+        as: "file",
+        appearance: "indigo",
+        class: "file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30"
+      },
+      // ── 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!"
+      },
+      {
+        as: "checkbox",
+        size: "md",
+        class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!"
+      },
+      {
+        as: "checkbox",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "sm",
+        class: "h-4! w-4! min-h-0! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "md",
+        class: "h-5! w-5! min-h-0! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! px-0! py-0!"
+      },
+      // ── checkbox: appearance (border + tick color; fill stays transparent) ─
+      {
+        as: "checkbox",
+        appearance: "default",
+        class: "border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70"
+      },
+      {
+        as: "checkbox",
+        appearance: "warning",
+        class: "border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "error",
+        class: "border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "success",
+        class: "border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "info",
+        class: "border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "violet",
+        class: "border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "amber",
+        class: "border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!"
+      },
+      {
+        as: "checkbox",
+        appearance: "pink",
+        class: "border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "indigo",
+        class: "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!"
+      },
+      // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
+      {
+        as: "radio",
+        appearance: "default",
+        class: "border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!"
+      },
+      {
+        as: "radio",
+        appearance: "warning",
+        class: "border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "error",
+        class: "border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "success",
+        class: "border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "info",
+        class: "border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "violet",
+        class: "border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "amber",
+        class: "border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "pink",
+        class: "border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "indigo",
+        class: "border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!"
+      }
+    ]
+  }
+);
+
+export { inputVariants };
+//# sourceMappingURL=chunk-AOEI4V3W.mjs.map
+//# sourceMappingURL=chunk-AOEI4V3W.mjs.map

package/dist/chunk-AOEI4V3W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/inputs/variants.ts"],"names":[],"mappings":"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","file":"chunk-AOEI4V3W.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const inputVariants = cva(\n  [\n    \"w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n    \"ring-offset-slate-950 transition-colors\",\n    \"placeholder:text-slate-500\",\n    \"focus-visible:outline-none\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"read-only:cursor-default read-only:bg-white/[0.03]\",\n    \"file:h-8\",\n  ],\n  {\n    variants: {\n      as: {\n        input: \"\",\n        textarea: \"h-auto! resize-y py-2 align-top\",\n        file: [\n          // Reset native padding so we control it fully\n          \"p-0! cursor-pointer\",\n          // File-selector button base styles\n          \"file:cursor-pointer file:border-0 file:border-r file:border-white/10\",\n          \"file:bg-white/10 file:text-slate-200 file:font-medium\",\n          \"file:transition-colors file:duration-200\",\n          \"hover:file:bg-white/15\",\n          // Content area padding\n          \"[&:not(:disabled)]:file:hover:text-white\",\n          \"disabled:file:cursor-not-allowed\",\n        ],\n        checkbox: [\n          \"shrink-0 cursor-pointer appearance-none relative\",\n          \"min-h-0! shadow-none outline-none\",\n          \"border-2 border-white/30 [&:not(:checked)]:bg-transparent\",\n          \"transition-[color,box-shadow,border-color,background-color]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"read-only:cursor-default\",\n          \"checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current\",\n        ],\n        radio: [\n          \"shrink-0 cursor-pointer appearance-none rounded-full\",\n          \"min-h-0! shadow-none outline-none\",\n          \"border-2 border-white/30 bg-transparent! read-only:bg-transparent!\",\n          \"ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950\",\n          \"transition-[color,box-shadow,background-color,border-color,box-shadow]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"read-only:cursor-default\",\n        ],\n      },\n      appearance: {\n        default: \"border-white/10 focus-visible:border-white/20\",\n        warning:\n          \"border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80\",\n        error:\n          \"border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80\",\n        success:\n          \"border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80\",\n        info: \"border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80\",\n        violet:\n          \"border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80\",\n        amber:\n          \"border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80\",\n        pink: \"border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80\",\n        indigo:\n          \"border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80\",\n        orange:\n          \"border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80\",\n      },\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 md:h-11 px-4 text-sm\",\n        lg: \"h-10 md:h-12 px-5 text-base\",\n      },\n      ring: {\n        true: \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      as: \"input\",\n      appearance: \"default\",\n      size: \"md\",\n      ring: true,\n    },\n    compoundVariants: [\n      // ── textarea size overrides ──────────────────────────────────────────\n      {\n        as: \"textarea\",\n        size: \"sm\",\n        class: \"min-h-[5rem]\",\n      },\n      {\n        as: \"textarea\",\n        size: \"md\",\n        class: \"min-h-[6rem]\",\n      },\n      {\n        as: \"textarea\",\n        size: \"lg\",\n        class: \"min-h-[7.5rem]\",\n      },\n      // ── file input: size – height & file-button padding ──────────────────\n      {\n        as: \"file\",\n        size: \"sm\",\n        class: \"h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs\",\n      },\n      {\n        as: \"file\",\n        size: \"md\",\n        class:\n          \"h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm\",\n      },\n      {\n        as: \"file\",\n        size: \"lg\",\n        class:\n          \"h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base\",\n      },\n      // ── file input: appearance – file-button accent colour ───────────────\n      {\n        as: \"file\",\n        appearance: \"default\",\n        class: \"file:text-slate-200\",\n      },\n      {\n        as: \"file\",\n        appearance: \"warning\",\n        class:\n          \"file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"error\",\n        class:\n          \"file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"success\",\n        class:\n          \"file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"info\",\n        class:\n          \"file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"violet\",\n        class:\n          \"file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"amber\",\n        class:\n          \"file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"pink\",\n        class:\n          \"file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"indigo\",\n        class:\n          \"file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30\",\n      },\n      // ── checkbox / radio: size (overrides text-field height & padding) ───\n      {\n        as: \"checkbox\",\n        size: \"sm\",\n        class: \"h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!\",\n      },\n      {\n        as: \"checkbox\",\n        size: \"md\",\n        class: \"h-5! w-5! min-h-0! rounded-md! px-0! py-0!\",\n      },\n      {\n        as: \"checkbox\",\n        size: \"lg\",\n        class: \"h-6! w-6! min-h-0! rounded-md! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"sm\",\n        class: \"h-4! w-4! min-h-0! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"md\",\n        class: \"h-5! w-5! min-h-0! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"lg\",\n        class: \"h-6! w-6! min-h-0! px-0! py-0!\",\n      },\n      // ── checkbox: appearance (border + tick color; fill stays transparent) ─\n      {\n        as: \"checkbox\",\n        appearance: \"default\",\n        class:\n          \"border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"warning\",\n        class:\n          \"border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"error\",\n        class:\n          \"border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"success\",\n        class:\n          \"border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"info\",\n        class:\n          \"border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"violet\",\n        class:\n          \"border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"amber\",\n        class:\n          \"border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"pink\",\n        class:\n          \"border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"indigo\",\n        class:\n          \"border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!\",\n      },\n      // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─\n      {\n        as: \"radio\",\n        appearance: \"default\",\n        class:\n          \"border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"warning\",\n        class:\n          \"border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"error\",\n        class:\n          \"border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"success\",\n        class:\n          \"border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"info\",\n        class:\n          \"border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"violet\",\n        class:\n          \"border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"amber\",\n        class:\n          \"border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"pink\",\n        class:\n          \"border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"indigo\",\n        class:\n          \"border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!\",\n      },\n    ],\n  },\n);\n"]}