@luxfi/ui 7.4.11 → 7.4.13

package/dist/checkbox.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,9 +26,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/checkbox.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var NOOP = () => {
 };
 var CheckboxGroupContext = React__namespace.createContext(null);
@@ -46,7 +41,6 @@ var CheckboxGroupBase = React__namespace.forwardRef(
       onValueChange,
       orientation = "vertical",
       name: _name,
-      className,
       ...rest
     } = props;
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue ?? []);
@@ -69,15 +63,13 @@ var CheckboxGroupBase = React__namespace.forwardRef(
     }, [isControlled, controlledValue]);
     const ctx = React__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      gui.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
       }
@@ -85,46 +77,22 @@ var CheckboxGroupBase = React__namespace.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__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    className,
-    viewBox: "0 0 12 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
-var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
   {
-    className,
-    viewBox: "0 0 12 2",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 12 2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0H12V2H0V0Z", fill: color }) });
 var CheckboxBase = React__namespace.forwardRef(
   function Checkbox(props, ref) {
     const {
@@ -142,7 +110,6 @@ var CheckboxBase = React__namespace.forwardRef(
       size = "md",
       name,
       required,
-      className,
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
@@ -195,18 +162,19 @@ var CheckboxBase = React__namespace.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
+    const isChecked = checkedState !== false;
     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",
-          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,
@@ -222,26 +190,25 @@ var CheckboxBase = React__namespace.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__ */ jsxRuntime.jsx(gui.Checkbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: sizeClasses.icon }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(gui.Checkbox.Indicator, { alignItems: "center", justifyContent: "center", width: s.icon, height: s.icon, children: checkedState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { size: s.icon, color: ON_INK }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: s.icon, color: ON_INK }) })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               ref: setHiddenInputRef,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState === true,
               disabled,
               readOnly,
@@ -252,8 +219,8 @@ var CheckboxBase = React__namespace.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(sizeClasses.label), children })
+          ) }),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: s.label, children })
         ]
       }
     );

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 })
         ]
       }
     );

package/dist/chrome.cjs

@@ -59,23 +59,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 = React3__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/chrome.js

@@ -38,23 +38,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 = React3.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/close-button.cjs

@@ -56,23 +56,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 = React__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/close-button.js

@@ -34,23 +34,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 = React.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/dialog.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/dialog.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/drawer.cjs

@@ -56,23 +56,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 = React3__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/drawer.js

@@ -35,23 +35,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 = React3.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/empty-state.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+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) {
@@ -27,14 +26,12 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/empty-state.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
+var MUTED = "var(--color-text-secondary)";
 var EmptyState = React__namespace.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
@@ -72,17 +69,20 @@ var EmptyState = React__namespace.forwardRef(
       return icon;
     })();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      gui.XStack,
       {
         ref,
-        className: cn("flex items-center justify-center py-10", className),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 40,
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-5", children: [
-          iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: iconContent }),
-          descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { alignItems: "center", gap: 20, children: [
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", justifyContent: "center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, textAlign: "center", color: MUTED, children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
           children
         ] })
       }