@luxfi/ui 7.1.0 → 7.2.0

package/dist/index.js

@@ -5,7 +5,6 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as React29 from 'react';
 import React29__default from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cva } from 'class-variance-authority';
 import { styled, View, Text } from '@hanzogui/core';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
@@ -454,52 +453,22 @@ var SkeletonText = React29.forwardRef(
   }
 );
 var IndicatorIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
-var alertRoot = cva(
-  // base
-  "w-full flex items-start relative rounded text-[var(--color-alert-fg)]",
-  {
-    variants: {
-      status: {
-        info: "bg-[var(--color-alert-bg-info)]",
-        warning: "bg-[var(--color-alert-bg-warning)]",
-        warning_table: "bg-[var(--color-alert-bg-warning-table)]",
-        success: "bg-[var(--color-alert-bg-success)]",
-        error: "bg-[var(--color-alert-bg-error)]"
-      },
-      size: {
-        sm: "gap-2 px-2 py-2 text-xs",
-        md: "gap-2 px-3 py-2 text-base"
-      }
-    },
-    defaultVariants: {
-      status: "info",
-      size: "md"
-    }
-  }
-);
-var alertContent = cva("flex flex-1", {
-  variants: {
-    inline: {
-      "true": "inline-flex flex-row items-center",
-      "false": "flex flex-col"
-    }
-  },
-  defaultVariants: {
-    inline: true
-  }
-});
-var INDICATOR_BASE = "inline-flex items-center justify-center shrink-0 w-5 h-5 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full";
-var indicatorVariants = cva(INDICATOR_BASE, {
-  variants: {
-    size: {
-      sm: "w-5 h-5 my-0",
-      md: "w-5 h-5 my-[2px]"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
+var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
+var STATUS_CLASSES = {
+  info: "bg-[var(--color-alert-bg-info)]",
+  warning: "bg-[var(--color-alert-bg-warning)]",
+  warning_table: "bg-[var(--color-alert-bg-warning-table)]",
+  success: "bg-[var(--color-alert-bg-success)]",
+  error: "bg-[var(--color-alert-bg-error)]"
+};
+var SIZE_CLASSES = {
+  sm: "gap-2 px-2 py-2 text-xs",
+  md: "gap-2 px-3 py-2 text-base"
+};
+var INDICATOR_SIZE_CLASSES = {
+  sm: "w-5 h-5 my-0",
+  md: "w-5 h-5 my-[2px]"
+};
 var Alert = React29.forwardRef(
   function Alert2(props, ref) {
     const {
@@ -535,7 +504,10 @@ var Alert = React29.forwardRef(
       if (!showIcon && icon === void 0) {
         return null;
       }
-      return /* @__PURE__ */ jsx("span", { className: indicatorVariants({ size: resolvedSize }), children: icon || defaultIcon });
+      return /* @__PURE__ */ jsx("span", { className: cn(
+        "inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full",
+        INDICATOR_SIZE_CLASSES[resolvedSize]
+      ), children: icon || defaultIcon });
     })();
     const handleClose = React29.useCallback(() => {
       setIsOpen(false);
@@ -568,12 +540,12 @@ var Alert = React29.forwardRef(
       "div",
       {
         ref,
-        className: cn(alertRoot({ status, size: resolvedSize }), className),
+        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
         style: alertStyle,
         ...alertRest,
         children: [
           iconElement,
-          children ? /* @__PURE__ */ jsxs("div", { className: alertContent({ inline }), children: [
+          children ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1", inline ? "inline-flex flex-row items-center" : "flex flex-col"), children: [
             title && /* @__PURE__ */ jsx("div", { className: "font-semibold", children: title }),
             /* @__PURE__ */ jsx(
               "div",
@@ -598,7 +570,7 @@ var Alert = React29.forwardRef(
     ) });
   }
 );
-var SIZE_CLASSES = {
+var SIZE_CLASSES2 = {
   xs: "h-6 w-6 text-[10px]",
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -643,7 +615,7 @@ var Avatar = React29.forwardRef(
         ref,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES[size],
+          SIZE_CLASSES2[size],
           VARIANT_CLASSES[variant],
           !isBorderless && "ring-2 ring-white dark:ring-gray-900",
           className
@@ -851,7 +823,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
 var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES3 = {
   sm: "text-xs p-1 h-[18px] min-h-[18px]",
   md: "text-sm px-1 py-0.5 min-h-6",
   lg: "text-sm px-2 py-1 min-h-7 font-semibold"
@@ -921,7 +893,7 @@ var Badge = React29__default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES2[size],
+          SIZE_CLASSES3[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1221,7 +1193,7 @@ var Button = React29.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES4 = {
   "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
   xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
   sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
@@ -1230,7 +1202,7 @@ var SIZE_CLASSES3 = {
 function buttonVariants(opts) {
   const v = opts?.variant ?? "solid";
   const s = opts?.size ?? "md";
-  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES3[s] ?? ""].filter(Boolean).join(" ");
+  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
 }
 var ButtonGroup = React29.forwardRef(
   function ButtonGroup2(props, ref) {
@@ -1347,7 +1319,7 @@ var CheckboxGroupBase = React29.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES5 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1457,7 +1429,7 @@ var CheckboxBase = React29.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES4[size];
+    const sizeClasses2 = SIZE_CLASSES5[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -2153,7 +2125,7 @@ var PLACEMENT_CLASSES = {
     "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
   ].join(" ")
 };
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES6 = {
   right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
   left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
   top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
@@ -2182,7 +2154,7 @@ var DrawerContent = React29.forwardRef(
           className: cn(
             "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
             PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES5[placement]?.[size] ?? SIZE_CLASSES5.right?.md,
+            SIZE_CLASSES6[placement]?.[size] ?? SIZE_CLASSES6.right?.md,
             className
           ),
           ...rest,
@@ -2806,46 +2778,36 @@ var Image2 = React29__default.forwardRef(
     ] });
   }
 );
-var inputVariants = cva(
-  [
-    "w-full appearance-none outline-none transition-colors",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "h-6 px-2 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded-md",
-        md: "h-10 px-4 text-base rounded-md",
-        lg: "h-12 px-4 text-lg rounded-lg",
-        "2xl": "h-14 px-4 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0 h-auto"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var INPUT_BASE = [
+  "w-full appearance-none outline-none transition-colors",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var INPUT_SIZE_CLASSES = {
+  xs: "h-6 px-2 text-xs rounded",
+  sm: "h-8 px-3 text-sm rounded-md",
+  md: "h-10 px-4 text-base rounded-md",
+  lg: "h-12 px-4 text-lg rounded-lg",
+  "2xl": "h-14 px-4 text-xl rounded-lg"
+};
+var INPUT_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0 h-auto"
+};
 var Input = React29__default.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
-        className: cn(inputVariants({ size, variant }), className),
+        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );
@@ -3228,7 +3190,7 @@ var MenuTriggerItem = React29.forwardRef(function MenuTriggerItem2(props, ref) {
     }
   ) });
 });
-var INPUT_BASE = [
+var INPUT_BASE2 = [
   "w-10 h-10",
   "text-center text-sm font-medium",
   "border-2 rounded-md",
@@ -3359,7 +3321,7 @@ var PinInput = React29.forwardRef(
           "aria-invalid": invalid || void 0,
           value: values[index] || "",
           className: cn(
-            INPUT_BASE,
+            INPUT_BASE2,
             values[index] && INPUT_FILLED,
             invalid && INPUT_INVALID,
             attached && index > 0 && "-ml-0.5"
@@ -3610,7 +3572,7 @@ var PopoverDescription = React29.forwardRef(function PopoverDescription2(props,
     }
   );
 });
-var SIZE_CLASSES6 = {
+var SIZE_CLASSES7 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -3668,7 +3630,7 @@ var Progress = React29.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES6[size],
+              SIZE_CLASSES7[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -3807,7 +3769,7 @@ var ProgressCircleValueText = React29.forwardRef(function ProgressCircleValueTex
     }
   );
 });
-var SIZE_CLASSES7 = {
+var SIZE_CLASSES8 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -3888,7 +3850,7 @@ var RadioBase = React29.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
     const size = React29.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES7[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -4546,7 +4508,7 @@ function SliderMarks(props) {
 }
 var NOOP3 = () => {
 };
-var SIZE_CLASSES8 = {
+var SIZE_CLASSES9 = {
   sm: {
     root: "h-4 w-7",
     thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
@@ -4596,7 +4558,7 @@ var SwitchBase = React29.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES8[size];
+    const sizeClasses2 = SIZE_CLASSES9[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
       "label",
@@ -5281,39 +5243,18 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip2({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var tagVariants = cva(
-  [
-    "inline-flex items-center align-top max-w-full select-text rounded-sm",
-    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
-        clickable: [
-          "cursor-pointer",
-          "bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]",
-          "hover:opacity-76"
-        ].join(" "),
-        filter: "bg-[var(--color-tag-filter-bg)]",
-        select: [
-          "cursor-pointer",
-          "bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]",
-          "hover:text-[var(--color-hover)] hover:opacity-76"
-        ].join(" ")
-      },
-      size: {
-        sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
-        md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
-        lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
-      }
-    },
-    defaultVariants: {
-      variant: "subtle",
-      size: "md"
-    }
-  }
-);
+var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
+var TAG_VARIANT_CLASSES = {
+  subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
+  clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
+  filter: "bg-[var(--color-tag-filter-bg)]",
+  select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
+};
+var TAG_SIZE_CLASSES = {
+  sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
+  md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
+  lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
+};
 var TAG_SELECTED_CLASSES = [
   "bg-[var(--color-tag-select-selected-bg)]",
   "text-[var(--color-tag-select-selected-fg)]",
@@ -5355,7 +5296,9 @@ var Tag = React29.forwardRef(
       {
         ref,
         className: cn(
-          tagVariants({ variant, size }),
+          TAG_BASE,
+          TAG_VARIANT_CLASSES[variant ?? "subtle"],
+          TAG_SIZE_CLASSES[size ?? "md"],
           selected && !loading && TAG_SELECTED_CLASSES,
           disabled && TAG_DISABLED_CLASSES,
           className
@@ -5383,46 +5326,36 @@ var Tag = React29.forwardRef(
     ) });
   }
 );
-var textareaVariants = cva(
-  [
-    "w-full appearance-none outline-none transition-colors resize-y",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "px-2 py-1 text-xs rounded",
-        sm: "px-3 py-2 text-sm rounded-md",
-        md: "px-4 py-2 text-base rounded-md",
-        lg: "px-4 py-3 text-lg rounded-lg",
-        "2xl": "px-4 py-3 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var TEXTAREA_BASE = [
+  "w-full appearance-none outline-none transition-colors resize-y",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var TEXTAREA_SIZE_CLASSES = {
+  xs: "px-2 py-1 text-xs rounded",
+  sm: "px-3 py-2 text-sm rounded-md",
+  md: "px-4 py-2 text-base rounded-md",
+  lg: "px-4 py-3 text-lg rounded-lg",
+  "2xl": "px-4 py-3 text-xl rounded-lg"
+};
+var TEXTAREA_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0"
+};
 var Textarea = React29__default.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
-        className: cn(textareaVariants({ size, variant }), className),
+        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );

package/dist/input.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -15,46 +14,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var inputVariants = classVarianceAuthority.cva(
-  [
-    "w-full appearance-none outline-none transition-colors",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "h-6 px-2 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded-md",
-        md: "h-10 px-4 text-base rounded-md",
-        lg: "h-12 px-4 text-lg rounded-lg",
-        "2xl": "h-14 px-4 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0 h-auto"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var INPUT_BASE = [
+  "w-full appearance-none outline-none transition-colors",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var INPUT_SIZE_CLASSES = {
+  xs: "h-6 px-2 text-xs rounded",
+  sm: "h-8 px-3 text-sm rounded-md",
+  md: "h-10 px-4 text-base rounded-md",
+  lg: "h-12 px-4 text-lg rounded-lg",
+  "2xl": "h-14 px-4 text-xl rounded-lg"
+};
+var INPUT_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0 h-auto"
+};
 var Input = React__default.default.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref,
-        className: cn(inputVariants({ size, variant }), className),
+        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );

package/dist/input.js

@@ -1,5 +1,4 @@
 "use client";
-import { cva } from 'class-variance-authority';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -9,46 +8,36 @@ import { jsx } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var inputVariants = cva(
-  [
-    "w-full appearance-none outline-none transition-colors",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "h-6 px-2 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded-md",
-        md: "h-10 px-4 text-base rounded-md",
-        lg: "h-12 px-4 text-lg rounded-lg",
-        "2xl": "h-14 px-4 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0 h-auto"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var INPUT_BASE = [
+  "w-full appearance-none outline-none transition-colors",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var INPUT_SIZE_CLASSES = {
+  xs: "h-6 px-2 text-xs rounded",
+  sm: "h-8 px-3 text-sm rounded-md",
+  md: "h-10 px-4 text-base rounded-md",
+  lg: "h-12 px-4 text-lg rounded-lg",
+  "2xl": "h-14 px-4 text-xl rounded-lg"
+};
+var INPUT_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0 h-auto"
+};
 var Input = React.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
-        className: cn(inputVariants({ size, variant }), className),
+        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );