@luxfi/ui 7.4.10 → 7.4.12

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(
@@ -73,11 +50,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 +64,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 +87,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 +112,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 })
         ]
       }
     );

package/dist/select.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixSelect = require('@radix-ui/react-select');
+var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 var React2 = require('react');
 var clsx = require('clsx');
@@ -26,7 +26,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 function cn(...inputs) {
@@ -333,16 +332,15 @@ var SelectRoot = React2__namespace.forwardRef(
       return s;
     }, [style, w, maxW, minW]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Root,
+      gui.Select,
       {
         value: currentValue[0] ?? "",
         defaultValue: defaultValueArr?.[0],
         onValueChange: handleRadixValueChange,
         open: isOpen,
         onOpenChange: handleOpenChange,
-        disabled: disabled || readOnly,
+        disablePreventBodyScroll: true,
         name,
-        required,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -367,10 +365,11 @@ var SelectControl = React2__namespace.forwardRef(
     const isDefaultValue = Array.isArray(defaultValue) ? ctx.value.every((item) => defaultValue.includes(item)) : false;
     const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
     const trigger = /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Trigger,
+      gui.Select.Trigger,
       {
         ref,
         asChild,
+        unstyled: true,
         className: cn(
           "group peer inline-flex items-center gap-2 cursor-pointer",
           "rounded-lg text-sm transition-colors outline-none",
@@ -419,41 +418,43 @@ var SelectClearTrigger = React2__namespace.forwardRef(
   }
 );
 var SelectContent = React2__namespace.forwardRef(
-  function SelectContent2(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
-    const content = /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Content,
-      {
-        ref,
-        position: "popper",
-        sideOffset: 4,
-        className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-lg",
-          "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
-          "border border-[var(--color-border-divider)]",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        ),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: "p-1", children })
-      }
+  function SelectContent2(props, _ref) {
+    const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
+    let n = 0;
+    const counter = () => n++;
+    return (
+      // Content is the focus scope — it takes no style props at all. The
+      // Viewport is the box you can see, so the surface is declared there.
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Content, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Select.Viewport,
+        {
+          className: cn(
+            "min-w-[8rem] overflow-hidden rounded-lg p-1",
+            "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
+            "border border-[var(--color-border-divider)]",
+            className
+          ),
+          children: stampIndices(children, counter)
+        }
+      ) })
     );
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
   }
 );
+var stampIndices = (children, next) => React2__namespace.Children.map(children, (child) => {
+  if (!React2__namespace.isValidElement(child)) return child;
+  if (child.type === SelectItem) return React2__namespace.cloneElement(child, { index: next() });
+  const kids = child.props.children;
+  return kids === void 0 ? child : React2__namespace.cloneElement(child, void 0, stampIndices(kids, next));
+});
 var SelectItem = React2__namespace.forwardRef(
   function SelectItem2(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixSelect__namespace.Item,
+      gui.Select.Item,
       {
         ref,
+        index: index ?? 0,
         value: item.value,
-        textValue: item.label,
         className: cn(
           "relative flex cursor-pointer select-none items-center gap-2",
           "rounded-md px-3 py-2 text-sm outline-none",
@@ -466,8 +467,8 @@ var SelectItem = React2__namespace.forwardRef(
         ...rest,
         children: [
           item.icon,
-          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children }),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsxRuntime.jsx(gui.Select.ItemText, { children: children ?? item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(gui.Select.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-5 w-5" }) })
         ]
       }
     );
@@ -518,7 +519,7 @@ var SelectValueText = React2__namespace.forwardRef(
       return `${items.length} selected`;
     })();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Value,
+      gui.Select.Value,
       {
         ref,
         placeholder: placeholderText,
@@ -532,14 +533,14 @@ var SelectValueText = React2__namespace.forwardRef(
 var SelectItemGroup = React2__namespace.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { ref, className: cn("py-1", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.Select.Group, { ref, className: cn("py-1", className), ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
       children
     ] });
   }
 );
-var SelectLabel = RadixSelect__namespace.Label;
-var SelectItemText = RadixSelect__namespace.ItemText;
+var SelectLabel = gui.Select.Label;
+var SelectItemText = gui.Select.ItemText;
 var Select = React2__namespace.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/select.d.cts

@@ -1,4 +1,6 @@
-import * as RadixSelect from '@radix-ui/react-select';
+import * as _hanzo_gui from '@hanzo/gui';
+import { Select as Select$1 } from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
 import * as React from 'react';
 
 interface ListCollection<T> {
@@ -56,7 +58,7 @@ declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps & Reac
 interface SelectControlProps {
     children?: React.ReactNode;
     noIndicator?: boolean;
-    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+    triggerProps?: React.ComponentProps<typeof Select$1.Trigger> & {
         asChild?: boolean;
         px?: string | number;
         className?: string;
@@ -83,6 +85,15 @@ interface SelectItemProps {
     item: SelectOption;
     children?: React.ReactNode;
     className?: string;
+    /**
+     * The row's position in the list. gui's Select is positional — it keeps its
+     * own map of index to value to drive type-ahead, the active descendant and
+     * scrolling, so a row without one is a row the keyboard cannot reach. It is
+     * stamped by `SelectContent` rather than asked of the caller, because the
+     * caller writing `<SelectItem item={x}/>` has no idea what its own ordinal is
+     * and would have to be told twice.
+     */
+    index?: number;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectValueTextProps {
@@ -103,8 +114,28 @@ interface SelectItemGroupProps {
     className?: string;
 }
 declare const SelectItemGroup: React.ForwardRefExoticComponent<SelectItemGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItemText: React.ForwardRefExoticComponent<RadixSelect.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectLabel: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.SizeTokens | _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}>, "scope"> & {
+    scope?: any;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: any;
+}, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.SizeTokens | _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const SelectItemText: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.SelectScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.SelectScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
 interface SelectProps extends SelectRootProps {
     collection: ListCollection<SelectOption>;
     placeholder: string;

package/dist/select.d.ts

@@ -1,4 +1,6 @@
-import * as RadixSelect from '@radix-ui/react-select';
+import * as _hanzo_gui from '@hanzo/gui';
+import { Select as Select$1 } from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
 import * as React from 'react';
 
 interface ListCollection<T> {
@@ -56,7 +58,7 @@ declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps & Reac
 interface SelectControlProps {
     children?: React.ReactNode;
     noIndicator?: boolean;
-    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+    triggerProps?: React.ComponentProps<typeof Select$1.Trigger> & {
         asChild?: boolean;
         px?: string | number;
         className?: string;
@@ -83,6 +85,15 @@ interface SelectItemProps {
     item: SelectOption;
     children?: React.ReactNode;
     className?: string;
+    /**
+     * The row's position in the list. gui's Select is positional — it keeps its
+     * own map of index to value to drive type-ahead, the active descendant and
+     * scrolling, so a row without one is a row the keyboard cannot reach. It is
+     * stamped by `SelectContent` rather than asked of the caller, because the
+     * caller writing `<SelectItem item={x}/>` has no idea what its own ordinal is
+     * and would have to be told twice.
+     */
+    index?: number;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectValueTextProps {
@@ -103,8 +114,28 @@ interface SelectItemGroupProps {
     className?: string;
 }
 declare const SelectItemGroup: React.ForwardRefExoticComponent<SelectItemGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItemText: React.ForwardRefExoticComponent<RadixSelect.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectLabel: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.SizeTokens | _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}>, "scope"> & {
+    scope?: any;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: any;
+}, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.SizeTokens | _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const SelectItemText: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.SelectScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.SelectScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+    unstyled?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
 interface SelectProps extends SelectRootProps {
     collection: ListCollection<SelectOption>;
     placeholder: string;

package/dist/select.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixSelect from '@radix-ui/react-select';
+import { Select as Select$1 } from '@hanzo/gui';
 import { useDebounce } from '@uidotdev/usehooks';
 import * as React2 from 'react';
 import { clsx } from 'clsx';
@@ -310,16 +310,15 @@ var SelectRoot = React2.forwardRef(
       return s;
     }, [style, w, maxW, minW]);
     return /* @__PURE__ */ jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-      RadixSelect.Root,
+      Select$1,
       {
         value: currentValue[0] ?? "",
         defaultValue: defaultValueArr?.[0],
         onValueChange: handleRadixValueChange,
         open: isOpen,
         onOpenChange: handleOpenChange,
-        disabled: disabled || readOnly,
+        disablePreventBodyScroll: true,
         name,
-        required,
         children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -344,10 +343,11 @@ var SelectControl = React2.forwardRef(
     const isDefaultValue = Array.isArray(defaultValue) ? ctx.value.every((item) => defaultValue.includes(item)) : false;
     const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
     const trigger = /* @__PURE__ */ jsx(
-      RadixSelect.Trigger,
+      Select$1.Trigger,
       {
         ref,
         asChild,
+        unstyled: true,
         className: cn(
           "group peer inline-flex items-center gap-2 cursor-pointer",
           "rounded-lg text-sm transition-colors outline-none",
@@ -396,41 +396,43 @@ var SelectClearTrigger = React2.forwardRef(
   }
 );
 var SelectContent = React2.forwardRef(
-  function SelectContent2(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
-    const content = /* @__PURE__ */ jsx(
-      RadixSelect.Content,
-      {
-        ref,
-        position: "popper",
-        sideOffset: 4,
-        className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-lg",
-          "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
-          "border border-[var(--color-border-divider)]",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        ),
-        ...rest,
-        children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: "p-1", children })
-      }
+  function SelectContent2(props, _ref) {
+    const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
+    let n = 0;
+    const counter = () => n++;
+    return (
+      // Content is the focus scope — it takes no style props at all. The
+      // Viewport is the box you can see, so the surface is declared there.
+      /* @__PURE__ */ jsx(Select$1.Content, { ...rest, children: /* @__PURE__ */ jsx(
+        Select$1.Viewport,
+        {
+          className: cn(
+            "min-w-[8rem] overflow-hidden rounded-lg p-1",
+            "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
+            "border border-[var(--color-border-divider)]",
+            className
+          ),
+          children: stampIndices(children, counter)
+        }
+      ) })
     );
-    if (portalled) {
-      return /* @__PURE__ */ jsx(RadixSelect.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
   }
 );
+var stampIndices = (children, next) => React2.Children.map(children, (child) => {
+  if (!React2.isValidElement(child)) return child;
+  if (child.type === SelectItem) return React2.cloneElement(child, { index: next() });
+  const kids = child.props.children;
+  return kids === void 0 ? child : React2.cloneElement(child, void 0, stampIndices(kids, next));
+});
 var SelectItem = React2.forwardRef(
   function SelectItem2(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      RadixSelect.Item,
+      Select$1.Item,
       {
         ref,
+        index: index ?? 0,
         value: item.value,
-        textValue: item.label,
         className: cn(
           "relative flex cursor-pointer select-none items-center gap-2",
           "rounded-md px-3 py-2 text-sm outline-none",
@@ -443,8 +445,8 @@ var SelectItem = React2.forwardRef(
         ...rest,
         children: [
           item.icon,
-          /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
-          /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children: children ?? item.label }),
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-5 w-5" }) })
         ]
       }
     );
@@ -495,7 +497,7 @@ var SelectValueText = React2.forwardRef(
       return `${items.length} selected`;
     })();
     return /* @__PURE__ */ jsx(
-      RadixSelect.Value,
+      Select$1.Value,
       {
         ref,
         placeholder: placeholderText,
@@ -509,14 +511,14 @@ var SelectValueText = React2.forwardRef(
 var SelectItemGroup = React2.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx(RadixSelect.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
+    return /* @__PURE__ */ jsxs(Select$1.Group, { ref, className: cn("py-1", className), ...rest, children: [
+      /* @__PURE__ */ jsx(Select$1.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
       children
     ] });
   }
 );
-var SelectLabel = RadixSelect.Label;
-var SelectItemText = RadixSelect.ItemText;
+var SelectLabel = Select$1.Label;
+var SelectItemText = Select$1.ItemText;
 var Select = React2.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxs(

package/dist/separator.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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,44 +10,21 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/separator.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var VARIANT_CLASSES = {
-  solid: "border-solid",
-  dashed: "border-dashed",
-  dotted: "border-dotted"
-};
-var HORIZONTAL_SIZE_CLASSES = {
-  xs: "border-t-[0.5px]",
-  sm: "border-t",
-  md: "border-t-2",
-  lg: "border-t-[3px]"
-};
-var VERTICAL_SIZE_CLASSES = {
-  xs: "border-l-[0.5px]",
-  sm: "border-l",
-  md: "border-l-2",
-  lg: "border-l-[3px]"
-};
+var WEIGHT = { xs: 0.5, sm: 1, md: 2, lg: 3 };
 var Separator = React__default.default.forwardRef(
-  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
-    const isVertical = orientation === "vertical";
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", ...rest }, ref) {
+    const vertical = orientation === "vertical";
     return /* @__PURE__ */ jsxRuntime.jsx(
       gui.Separator,
       {
         ref,
-        vertical: isVertical,
+        vertical,
         role: "separator",
         "aria-orientation": orientation,
-        className: cn(
-          "border-[var(--color-border-divider)]",
-          "border-0",
-          VARIANT_CLASSES[variant],
-          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
-          isVertical ? "self-stretch h-auto w-0" : "w-full",
-          className
-        ),
+        borderWidth: 0,
+        borderStyle: variant,
+        borderColor: "var(--color-border-divider)",
+        ...vertical ? { borderLeftWidth: WEIGHT[size], alignSelf: "stretch", height: "auto", width: 0 } : { borderTopWidth: WEIGHT[size], width: "100%" },
         ...rest
       }
     );