@luxfi/ui 7.4.10 → 7.4.12

package/dist/checkbox.js

@@ -1,14 +1,9 @@
 "use client";
-import { Checkbox } from '@hanzo/gui';
+import { View, Label, Checkbox, VisuallyHidden, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/checkbox.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var NOOP = () => {
 };
 var CheckboxGroupContext = React.createContext(null);
@@ -24,7 +19,6 @@ var CheckboxGroupBase = React.forwardRef(
       onValueChange,
       orientation = "vertical",
       name: _name,
-      className,
       ...rest
     } = props;
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
@@ -47,15 +41,13 @@ var CheckboxGroupBase = React.forwardRef(
     }, [isControlled, controlledValue]);
     const ctx = React.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-      "div",
+      View,
       {
         ref,
         role: "group",
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-8",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 32,
         ...rest,
         children
       }
@@ -63,46 +55,22 @@ var CheckboxGroupBase = React.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES = {
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5 rounded-sm",
-    label: "text-xs",
-    icon: "h-3 w-3"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4 rounded",
-    label: "text-sm",
-    icon: "h-3.5 w-3.5"
-  }
+var SIZE = {
+  sm: { rootGap: 6, control: 14, radius: 2, label: 12, icon: 12 },
+  md: { rootGap: 8, control: 16, radius: 4, label: 14, icon: 14 }
 };
-var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    viewBox: "0 0 12 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
-var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
+var INK = "var(--color-text-primary)";
+var ON_INK = "var(--color-bg-body)";
+var RESTING_BORDER = "var(--color-input-border)";
+var OUTLINE = "var(--color-gray-500)";
+var CheckIcon = ({ size, color }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
   {
-    className,
-    viewBox: "0 0 12 2",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
+    d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
+    fill: color
   }
-);
+) });
+var IndeterminateIcon = ({ size, color }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: color }) });
 var CheckboxBase = React.forwardRef(
   function Checkbox$1(props, ref) {
     const {
@@ -120,7 +88,6 @@ var CheckboxBase = React.forwardRef(
       size = "md",
       name,
       required,
-      className,
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
@@ -173,18 +140,19 @@ var CheckboxBase = React.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
+    const isChecked = checkedState !== false;
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none",
-          sizeClasses.root,
-          disabled && "opacity-50 cursor-not-allowed",
-          readOnly && "cursor-default",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         "data-readonly": readOnly || void 0,
@@ -200,26 +168,25 @@ var CheckboxBase = React.forwardRef(
               name,
               value,
               required,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0",
-                "border-2 border-current/30",
-                "data-[state=checked]:bg-gray-800 data-[state=checked]:text-white",
-                "dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black",
-                "data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white",
-                "dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses.control
-              ),
-              children: icon ?? /* @__PURE__ */ jsx(Checkbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: sizeClasses.icon }) : /* @__PURE__ */ jsx(CheckIcon, { className: sizeClasses.icon }) })
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: s.radius,
+              borderWidth: 2,
+              borderColor: isChecked ? INK : RESTING_BORDER,
+              backgroundColor: isChecked ? INK : "transparent",
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
+              children: icon ?? /* @__PURE__ */ jsx(Checkbox.Indicator, { alignItems: "center", justifyContent: "center", width: s.icon, height: s.icon, children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { size: s.icon, color: ON_INK }) : /* @__PURE__ */ jsx(CheckIcon, { size: s.icon, color: ON_INK }) })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref: setHiddenInputRef,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState === true,
               disabled,
               readOnly,
@@ -230,8 +197,8 @@ var CheckboxBase = React.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx("span", { className: cn(sizeClasses.label), children })
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { fontSize: s.label, children })
         ]
       }
     );