@luxfi/ui 7.1.0 → 7.2.0

package/dist/index.cjs

@@ -6,7 +6,6 @@ var tailwindMerge = require('tailwind-merge');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var React29 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var classVarianceAuthority = require('class-variance-authority');
 var core = require('@hanzogui/core');
 var RadixAvatar = require('@radix-ui/react-avatar');
 var tooltip = require('@hanzogui/tooltip');
@@ -488,52 +487,22 @@ var SkeletonText = React29__namespace.forwardRef(
   }
 );
 var IndicatorIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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__namespace.forwardRef(
   function Alert2(props, ref) {
     const {
@@ -569,7 +538,10 @@ var Alert = React29__namespace.forwardRef(
       if (!showIcon && icon === void 0) {
         return null;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: indicatorVariants({ size: resolvedSize }), children: icon || defaultIcon });
+      return /* @__PURE__ */ jsxRuntime.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__namespace.useCallback(() => {
       setIsOpen(false);
@@ -602,12 +574,12 @@ var Alert = React29__namespace.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__ */ jsxRuntime.jsxs("div", { className: alertContent({ inline }), children: [
+          children ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-1", inline ? "inline-flex flex-row items-center" : "flex flex-col"), children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -632,7 +604,7 @@ var Alert = React29__namespace.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",
@@ -677,7 +649,7 @@ var Avatar = React29__namespace.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
@@ -885,7 +857,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.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"
@@ -955,7 +927,7 @@ var Badge = React29__namespace.default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES2[size],
+          SIZE_CLASSES3[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1255,7 +1227,7 @@ var Button = React29__namespace.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",
@@ -1264,7 +1236,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__namespace.forwardRef(
   function ButtonGroup2(props, ref) {
@@ -1381,7 +1353,7 @@ var CheckboxGroupBase = React29__namespace.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES5 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1491,7 +1463,7 @@ var CheckboxBase = React29__namespace.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES4[size];
+    const sizeClasses2 = SIZE_CLASSES5[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -2187,7 +2159,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" },
@@ -2216,7 +2188,7 @@ var DrawerContent = React29__namespace.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,
@@ -2840,46 +2812,36 @@ var Image2 = React29__namespace.default.forwardRef(
     ] });
   }
 );
-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 = React29__namespace.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
       }
     );
@@ -3262,7 +3224,7 @@ var MenuTriggerItem = React29__namespace.forwardRef(function MenuTriggerItem2(pr
     }
   ) });
 });
-var INPUT_BASE = [
+var INPUT_BASE2 = [
   "w-10 h-10",
   "text-center text-sm font-medium",
   "border-2 rounded-md",
@@ -3393,7 +3355,7 @@ var PinInput = React29__namespace.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"
@@ -3644,7 +3606,7 @@ var PopoverDescription = React29__namespace.forwardRef(function PopoverDescripti
     }
   );
 });
-var SIZE_CLASSES6 = {
+var SIZE_CLASSES7 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -3702,7 +3664,7 @@ var Progress = React29__namespace.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES6[size],
+              SIZE_CLASSES7[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -3841,7 +3803,7 @@ var ProgressCircleValueText = React29__namespace.forwardRef(function ProgressCir
     }
   );
 });
-var SIZE_CLASSES7 = {
+var SIZE_CLASSES8 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -3922,7 +3884,7 @@ var RadioBase = React29__namespace.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
     const size = React29__namespace.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES7[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -4580,7 +4542,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",
@@ -4630,7 +4592,7 @@ var SwitchBase = React29__namespace.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES8[size];
+    const sizeClasses2 = SIZE_CLASSES9[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -5315,39 +5277,18 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip2({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var tagVariants = classVarianceAuthority.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)]",
@@ -5389,7 +5330,9 @@ var Tag = React29__namespace.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
@@ -5417,46 +5360,36 @@ var Tag = React29__namespace.forwardRef(
     ) });
   }
 );
-var textareaVariants = classVarianceAuthority.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__namespace.default.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         ref,
-        className: cn(textareaVariants({ size, variant }), className),
+        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );