@luxfi/ui 7.4.11 → 7.4.12

package/dist/pnl-diagram.js

@@ -1,12 +1,8 @@
 "use client";
+import { View, XStack, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function calcLegPnl(leg, price, multiplier) {
   const premium = leg.premium ?? 0;
   let intrinsic;
@@ -138,19 +134,21 @@ var PnlDiagram = React.forwardRef(
       chartH
     );
     return /* @__PURE__ */ jsxs(
-      "div",
+      View,
       {
         ref,
-        className: cn("w-full", className),
+        unstyled: true,
+        width: "100%",
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(View, { unstyled: true, ref: containerRef, width: "100%", height: "100%", minHeight: 200, children: /* @__PURE__ */ jsxs(
             "svg",
             {
               width,
               height,
               viewBox: `0 0 ${width} ${height}`,
-              className: "select-none",
+              style: { userSelect: "none" },
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               children: [
@@ -389,16 +387,18 @@ var PnlDiagram = React.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+          /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", gap: 16, paddingHorizontal: 8, paddingTop: 4, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { height: 2, width: 16, borderRadius: 4, backgroundColor: "var(--color-gray-200)" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: "Combined" })
             ] }),
-            legs.map((leg, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            legs.map((leg, i) => /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
               /* @__PURE__ */ jsx(
-                "div",
+                View,
                 {
-                  className: "h-0.5 w-4 rounded",
+                  height: 2,
+                  width: 16,
+                  borderRadius: 4,
                   style: {
                     backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                     opacity: 0.6,
@@ -406,7 +406,7 @@ var PnlDiagram = React.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 leg.action === "buy" ? "B" : "S",
                 " ",
                 leg.quantity,
@@ -416,9 +416,9 @@ var PnlDiagram = React.forwardRef(
                 leg.type === "call" ? "C" : "P"
               ] })
             ] }, i)),
-            breakevens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            breakevens.length > 0 && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { width: 6, height: 6, borderRadius: 9999, style: { background: BREAKEVEN_COLOR } }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
               ] })

package/dist/popover.cjs

@@ -61,23 +61,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",

package/dist/popover.js

@@ -39,23 +39,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",

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(
@@ -95,11 +72,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 +86,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 +109,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 +134,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;