@luxfi/ui 7.4.11 → 7.4.13

package/dist/progress.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,14 +26,11 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/progress.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var SIZE_CLASSES = {
-  sm: "h-1",
-  md: "h-2",
-  lg: "h-3",
-  xl: "h-4"
+var SIZE = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
 };
 function normalizeValue(value, min, max) {
   if (value == null) return 0;
@@ -51,7 +46,6 @@ var Progress = React__namespace.forwardRef(
       size = "md",
       color,
       trackProps,
-      className,
       style,
       w,
       flex,
@@ -70,6 +64,7 @@ var Progress = React__namespace.forwardRef(
       }
     };
     const rootStyle = {
+      position: "relative",
       ...style,
       ...w !== void 0 && { width: w === "full" ? "100%" : w },
       ...flex !== void 0 && { flex }
@@ -78,7 +73,6 @@ var Progress = React__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn("relative", className),
         style: rootStyle,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -87,22 +81,21 @@ var Progress = React__namespace.forwardRef(
             value: percent,
             max: 100,
             unstyled: true,
-            className: cn(
-              "w-full overflow-hidden rounded-full",
-              "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES[size],
-              trackProps?.className
-            ),
+            className: trackProps?.className,
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 9999,
+            height: SIZE[size],
+            backgroundColor: "var(--color-progress-track)",
             style: trackStyle,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               gui.Progress.Indicator,
               {
                 unstyled: true,
                 transition: "slow",
-                className: cn(
-                  "h-full rounded-full",
-                  !color && "bg-[var(--color-progress-indicator)]"
-                ),
+                height: "100%",
+                borderRadius: 9999,
+                backgroundColor: color ? void 0 : "var(--color-progress-indicator)",
                 style: {
                   ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
                 }

package/dist/progress.d.cts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-declare const SIZE_CLASSES: {
-    readonly sm: "h-1";
-    readonly md: "h-2";
-    readonly lg: "h-3";
-    readonly xl: "h-4";
+declare const SIZE: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
 };
-type Size = keyof typeof SIZE_CLASSES;
+type Size = keyof typeof SIZE;
 interface TrackProps {
     readonly borderStartRadius?: number | string;
     readonly borderEndRadius?: number | string;

package/dist/progress.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-declare const SIZE_CLASSES: {
-    readonly sm: "h-1";
-    readonly md: "h-2";
-    readonly lg: "h-3";
-    readonly xl: "h-4";
+declare const SIZE: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
 };
-type Size = keyof typeof SIZE_CLASSES;
+type Size = keyof typeof SIZE;
 interface TrackProps {
     readonly borderStartRadius?: number | string;
     readonly borderEndRadius?: number | string;

package/dist/progress.js

@@ -1,19 +1,14 @@
 "use client";
 import { Progress as Progress$1 } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
 // src/progress.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SIZE_CLASSES = {
-  sm: "h-1",
-  md: "h-2",
-  lg: "h-3",
-  xl: "h-4"
+var SIZE = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
 };
 function normalizeValue(value, min, max) {
   if (value == null) return 0;
@@ -29,7 +24,6 @@ var Progress = React.forwardRef(
       size = "md",
       color,
       trackProps,
-      className,
       style,
       w,
       flex,
@@ -48,6 +42,7 @@ var Progress = React.forwardRef(
       }
     };
     const rootStyle = {
+      position: "relative",
       ...style,
       ...w !== void 0 && { width: w === "full" ? "100%" : w },
       ...flex !== void 0 && { flex }
@@ -56,7 +51,6 @@ var Progress = React.forwardRef(
       "div",
       {
         ref,
-        className: cn("relative", className),
         style: rootStyle,
         ...rest,
         children: /* @__PURE__ */ jsx(
@@ -65,22 +59,21 @@ var Progress = React.forwardRef(
             value: percent,
             max: 100,
             unstyled: true,
-            className: cn(
-              "w-full overflow-hidden rounded-full",
-              "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES[size],
-              trackProps?.className
-            ),
+            className: trackProps?.className,
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 9999,
+            height: SIZE[size],
+            backgroundColor: "var(--color-progress-track)",
             style: trackStyle,
             children: /* @__PURE__ */ jsx(
               Progress$1.Indicator,
               {
                 unstyled: true,
                 transition: "slow",
-                className: cn(
-                  "h-full rounded-full",
-                  !color && "bg-[var(--color-progress-indicator)]"
-                ),
+                height: "100%",
+                borderRadius: 9999,
+                backgroundColor: color ? void 0 : "var(--color-progress-indicator)",
                 style: {
                   ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
                 }

package/dist/radio.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,35 +26,15 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/radio.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: {
-    root: "gap-1.5",
-    control: "h-3 w-3",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4",
-    indicator: "h-2 w-2",
-    label: "text-sm"
-  },
-  lg: {
-    root: "gap-2.5",
-    control: "h-5 w-5",
-    indicator: "h-2.5 w-2.5",
-    label: "text-base"
-  }
+var SIZE = {
+  xs: { rootGap: 6, control: 12, indicator: 6, label: 12 },
+  sm: { rootGap: 6, control: 14, indicator: 6, label: 12 },
+  md: { rootGap: 8, control: 16, indicator: 8, label: 14 },
+  lg: { rootGap: 10, control: 20, indicator: 10, label: 16 }
 };
+var INK = "var(--color-text-primary)";
+var RESTING_BORDER = "var(--color-input-border)";
+var OUTLINE = "var(--color-gray-500)";
 var RadioSizeContext = React__namespace.createContext("md");
 var RadioGroupBase = React__namespace.forwardRef(
   function RadioGroup(props, ref) {
@@ -73,7 +51,6 @@ var RadioGroupBase = React__namespace.forwardRef(
       value,
       onValueChange,
       size = "md",
-      className,
       ...rest
     } = props;
     const handleValueChange = React__namespace.useCallback(
@@ -87,7 +64,6 @@ var RadioGroupBase = React__namespace.forwardRef(
       gui.RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
@@ -95,11 +71,9 @@ var RadioGroupBase = React__namespace.forwardRef(
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 24,
         ...rest,
         children
       }
@@ -111,19 +85,20 @@ var NOOP = () => {
 };
 var RadioBase = React__namespace.forwardRef(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const { children, inputProps, rootRef, value, disabled, ...rest } = props;
     const size = React__namespace.useContext(RadioSizeContext);
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+      gui.Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none",
-          sizeClasses.root,
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         "data-disabled": disabled || void 0,
         ...rest,
         children: [
@@ -133,32 +108,24 @@ var RadioBase = React__namespace.forwardRef(
               unstyled: true,
               value,
               disabled,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0 rounded-full",
-                "border-2 border-current/30",
-                "data-[state=checked]:border-gray-800 dark:border-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses.control
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                gui.RadioGroup.Indicator,
-                {
-                  unstyled: true,
-                  className: cn(
-                    "block rounded-full bg-gray-800 dark:bg-white",
-                    sizeClasses.indicator
-                  )
-                }
-              )
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: 9999,
+              borderWidth: 2,
+              borderColor: RESTING_BORDER,
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(gui.RadioGroup.Indicator, { unstyled: true, borderRadius: 9999, width: s.indicator, height: s.indicator, backgroundColor: INK })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               ref,
               type: "radio",
-              className: "sr-only",
               value,
               disabled,
               tabIndex: -1,
@@ -166,8 +133,8 @@ var RadioBase = React__namespace.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sizeClasses.label, children })
+          ) }),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: s.label, children })
         ]
       }
     );

package/dist/radio.d.cts

@@ -1,32 +1,32 @@
 import * as React from 'react';
 
-declare const SIZE_CLASSES: {
+declare const SIZE: {
     readonly xs: {
-        readonly root: "gap-1.5";
-        readonly control: "h-3 w-3";
-        readonly indicator: "h-1.5 w-1.5";
-        readonly label: "text-xs";
+        readonly rootGap: 6;
+        readonly control: 12;
+        readonly indicator: 6;
+        readonly label: 12;
     };
     readonly sm: {
-        readonly root: "gap-1.5";
-        readonly control: "h-3.5 w-3.5";
-        readonly indicator: "h-1.5 w-1.5";
-        readonly label: "text-xs";
+        readonly rootGap: 6;
+        readonly control: 14;
+        readonly indicator: 6;
+        readonly label: 12;
     };
     readonly md: {
-        readonly root: "gap-2";
-        readonly control: "h-4 w-4";
-        readonly indicator: "h-2 w-2";
-        readonly label: "text-sm";
+        readonly rootGap: 8;
+        readonly control: 16;
+        readonly indicator: 8;
+        readonly label: 14;
     };
     readonly lg: {
-        readonly root: "gap-2.5";
-        readonly control: "h-5 w-5";
-        readonly indicator: "h-2.5 w-2.5";
-        readonly label: "text-base";
+        readonly rootGap: 10;
+        readonly control: 20;
+        readonly indicator: 10;
+        readonly label: 16;
     };
 };
-type RadioSize = keyof typeof SIZE_CLASSES;
+type RadioSize = keyof typeof SIZE;
 interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
     name?: string;
     required?: boolean;

package/dist/radio.d.ts

@@ -1,32 +1,32 @@
 import * as React from 'react';
 
-declare const SIZE_CLASSES: {
+declare const SIZE: {
     readonly xs: {
-        readonly root: "gap-1.5";
-        readonly control: "h-3 w-3";
-        readonly indicator: "h-1.5 w-1.5";
-        readonly label: "text-xs";
+        readonly rootGap: 6;
+        readonly control: 12;
+        readonly indicator: 6;
+        readonly label: 12;
     };
     readonly sm: {
-        readonly root: "gap-1.5";
-        readonly control: "h-3.5 w-3.5";
-        readonly indicator: "h-1.5 w-1.5";
-        readonly label: "text-xs";
+        readonly rootGap: 6;
+        readonly control: 14;
+        readonly indicator: 6;
+        readonly label: 12;
     };
     readonly md: {
-        readonly root: "gap-2";
-        readonly control: "h-4 w-4";
-        readonly indicator: "h-2 w-2";
-        readonly label: "text-sm";
+        readonly rootGap: 8;
+        readonly control: 16;
+        readonly indicator: 8;
+        readonly label: 14;
     };
     readonly lg: {
-        readonly root: "gap-2.5";
-        readonly control: "h-5 w-5";
-        readonly indicator: "h-2.5 w-2.5";
-        readonly label: "text-base";
+        readonly rootGap: 10;
+        readonly control: 20;
+        readonly indicator: 10;
+        readonly label: 16;
     };
 };
-type RadioSize = keyof typeof SIZE_CLASSES;
+type RadioSize = keyof typeof SIZE;
 interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
     name?: string;
     required?: boolean;

package/dist/radio.js

@@ -1,40 +1,18 @@
 "use client";
-import { RadioGroup } from '@hanzo/gui';
+import { RadioGroup, Label, 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/radio.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: {
-    root: "gap-1.5",
-    control: "h-3 w-3",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4",
-    indicator: "h-2 w-2",
-    label: "text-sm"
-  },
-  lg: {
-    root: "gap-2.5",
-    control: "h-5 w-5",
-    indicator: "h-2.5 w-2.5",
-    label: "text-base"
-  }
+var SIZE = {
+  xs: { rootGap: 6, control: 12, indicator: 6, label: 12 },
+  sm: { rootGap: 6, control: 14, indicator: 6, label: 12 },
+  md: { rootGap: 8, control: 16, indicator: 8, label: 14 },
+  lg: { rootGap: 10, control: 20, indicator: 10, label: 16 }
 };
+var INK = "var(--color-text-primary)";
+var RESTING_BORDER = "var(--color-input-border)";
+var OUTLINE = "var(--color-gray-500)";
 var RadioSizeContext = React.createContext("md");
 var RadioGroupBase = React.forwardRef(
   function RadioGroup$1(props, ref) {
@@ -51,7 +29,6 @@ var RadioGroupBase = React.forwardRef(
       value,
       onValueChange,
       size = "md",
-      className,
       ...rest
     } = props;
     const handleValueChange = React.useCallback(
@@ -65,7 +42,6 @@ var RadioGroupBase = React.forwardRef(
       RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
@@ -73,11 +49,9 @@ var RadioGroupBase = React.forwardRef(
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 24,
         ...rest,
         children
       }
@@ -89,19 +63,20 @@ var NOOP = () => {
 };
 var RadioBase = React.forwardRef(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const { children, inputProps, rootRef, value, disabled, ...rest } = props;
     const size = React.useContext(RadioSizeContext);
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     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",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         "data-disabled": disabled || void 0,
         ...rest,
         children: [
@@ -111,32 +86,24 @@ var RadioBase = React.forwardRef(
               unstyled: true,
               value,
               disabled,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0 rounded-full",
-                "border-2 border-current/30",
-                "data-[state=checked]:border-gray-800 dark:border-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses.control
-              ),
-              children: /* @__PURE__ */ jsx(
-                RadioGroup.Indicator,
-                {
-                  unstyled: true,
-                  className: cn(
-                    "block rounded-full bg-gray-800 dark:bg-white",
-                    sizeClasses.indicator
-                  )
-                }
-              )
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: 9999,
+              borderWidth: 2,
+              borderColor: RESTING_BORDER,
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
+              children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { unstyled: true, borderRadius: 9999, width: s.indicator, height: s.indicator, backgroundColor: INK })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "radio",
-              className: "sr-only",
               value,
               disabled,
               tabIndex: -1,
@@ -144,8 +111,8 @@ var RadioBase = React.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx("span", { className: sizeClasses.label, children })
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { fontSize: s.label, children })
         ]
       }
     );