@luxfi/ui 7.4.0 → 7.4.2

package/dist/avatar.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixAvatar = require('@radix-ui/react-avatar');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function cn(...inputs) {
@@ -71,9 +70,10 @@ var Avatar = React__namespace.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Root,
+      gui.Avatar,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
           SIZE_CLASSES[size],
@@ -84,8 +84,8 @@ var Avatar = React__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            RadixAvatar__namespace.Image,
+          src != null && /* @__PURE__ */ jsxRuntime.jsx(
+            gui.Avatar.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -104,9 +104,10 @@ var AvatarFallback = React__namespace.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Fallback,
+      gui.Avatar.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className

package/dist/avatar.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixAvatar from '@radix-ui/react-avatar';
+import { Avatar as Avatar$1 } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -48,9 +48,10 @@ var Avatar = React.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Root,
+      Avatar$1,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
           SIZE_CLASSES[size],
@@ -61,8 +62,8 @@ var Avatar = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsx(
-            RadixAvatar.Image,
+          src != null && /* @__PURE__ */ jsx(
+            Avatar$1.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -81,9 +82,10 @@ var AvatarFallback = React.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Fallback,
+      Avatar$1.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className

package/dist/badge.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React2 = require('react');
+var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/badge.tsx
 function cn(...inputs) {
@@ -152,7 +152,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React2__namespace.forwardRef(
+var Skeleton = React3__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -161,10 +161,10 @@ var Skeleton = React2__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React2__namespace.isValidElement(children)) return children;
+      if (asChild && React3__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React2__namespace.isValidElement(children)) {
+    if (asChild && React3__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -190,7 +190,7 @@ var Skeleton = React2__namespace.forwardRef(
     );
   }
 );
-React2__namespace.forwardRef(
+React3__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -206,7 +206,7 @@ React2__namespace.forwardRef(
     );
   }
 );
-React2__namespace.forwardRef(
+React3__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -219,26 +219,24 @@ React2__namespace.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React2__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React2__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React2__namespace.forwardRef(
+var Tooltip = React3__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -257,28 +255,28 @@ var Tooltip = React2__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React2__namespace.useState(defaultOpen);
-    const timeoutRef = React2__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React3__namespace.useState(defaultOpen);
+    const timeoutRef = React3__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React2__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React3__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React2__namespace.useCallback(() => {
+    const handleClickAway = React3__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React2__namespace.useCallback(() => {
+    const handleTriggerClick = React3__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React2__namespace.useCallback((event) => {
+    const handleContentClick = React3__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -287,7 +285,7 @@ var Tooltip = React2__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -389,7 +387,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React2__namespace.default.forwardRef(
+var Badge = React3__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,

package/dist/badge.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React2 from 'react';
-import React2__default from 'react';
+import * as React3 from 'react';
+import React3__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -131,7 +131,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React2.forwardRef(
+var Skeleton = React3.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -140,10 +140,10 @@ var Skeleton = React2.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React2.isValidElement(children)) return children;
+      if (asChild && React3.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React2.isValidElement(children)) {
+    if (asChild && React3.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -169,7 +169,7 @@ var Skeleton = React2.forwardRef(
     );
   }
 );
-React2.forwardRef(
+React3.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -185,7 +185,7 @@ React2.forwardRef(
     );
   }
 );
-React2.forwardRef(
+React3.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -198,26 +198,24 @@ React2.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React2.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React2.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React3.useState(false);
+  React3.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React2.forwardRef(
+var Tooltip = React3.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -236,28 +234,28 @@ var Tooltip = React2.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React2.useState(defaultOpen);
-    const timeoutRef = React2.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React2.useCallback((nextOpen) => {
+    const [open, setOpen] = React3.useState(defaultOpen);
+    const timeoutRef = React3.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React2.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React3.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React2.useCallback(() => {
+    const handleClickAway = React3.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React2.useCallback(() => {
+    const handleTriggerClick = React3.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React2.useCallback((event) => {
+    const handleContentClick = React3.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -266,7 +264,7 @@ var Tooltip = React2.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -368,7 +366,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React2__default.forwardRef(
+var Badge = React3__default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,

package/dist/bank.d.cts

@@ -40,12 +40,12 @@ type BankInputProps = GetProps<typeof BankInput> & {
     placeholderTextColor?: string;
 };
 declare const BankButton: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {
-    variant?: "primary" | "secondary" | "ghost" | undefined;
     disabled?: boolean | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 declare const BankButtonText: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
-    variant?: "primary" | "secondary" | "ghost" | undefined;
     unstyled?: boolean | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 type BankButtonProps = GetProps<typeof BankButton>;
 declare const BankHeading: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
@@ -54,8 +54,8 @@ declare const BankHeading: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _
 }, _hanzogui_web.StaticConfigPublic>;
 type BankHeadingProps = GetProps<typeof BankHeading>;
 declare const BankText: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
-    variant?: "default" | "label" | "link" | "error" | "success" | "muted" | undefined;
     unstyled?: boolean | undefined;
+    variant?: "default" | "label" | "link" | "error" | "success" | "muted" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 type BankTextProps = GetProps<typeof BankText>;
 declare function BankField({ label, error, children, }: {

package/dist/bank.d.ts

@@ -40,12 +40,12 @@ type BankInputProps = GetProps<typeof BankInput> & {
     placeholderTextColor?: string;
 };
 declare const BankButton: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {
-    variant?: "primary" | "secondary" | "ghost" | undefined;
     disabled?: boolean | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 declare const BankButtonText: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
-    variant?: "primary" | "secondary" | "ghost" | undefined;
     unstyled?: boolean | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 type BankButtonProps = GetProps<typeof BankButton>;
 declare const BankHeading: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
@@ -54,8 +54,8 @@ declare const BankHeading: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _
 }, _hanzogui_web.StaticConfigPublic>;
 type BankHeadingProps = GetProps<typeof BankHeading>;
 declare const BankText: _hanzogui_web.GuiComponent<_hanzogui_web.TamaDefer, _hanzogui_web.GuiTextElement, _hanzogui_core.RNTextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
-    variant?: "default" | "label" | "link" | "error" | "success" | "muted" | undefined;
     unstyled?: boolean | undefined;
+    variant?: "default" | "label" | "link" | "error" | "success" | "muted" | undefined;
 }, _hanzogui_web.StaticConfigPublic>;
 type BankTextProps = GetProps<typeof BankText>;
 declare function BankField({ label, error, children, }: {

package/dist/checkbox.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixCheckbox = require('@radix-ui/react-checkbox');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/checkbox.tsx
@@ -214,8 +213,9 @@ var CheckboxBase = React__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixCheckbox__namespace.Root,
+            gui.Checkbox,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled: disabled || readOnly,
@@ -233,7 +233,7 @@ var CheckboxBase = React__namespace.forwardRef(
                 "transition-colors duration-150",
                 sizeClasses.control
               ),
-              children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.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 }) })
+              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 }) })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(

package/dist/checkbox.d.cts

@@ -1,6 +1,7 @@
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as React from 'react';
 
+/** Tri-state, as the Chakra/Radix contract consumers already code against. */
+type CheckedState = boolean | 'indeterminate';
 interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
     value?: Array<string>;
     defaultValue?: Array<string>;
@@ -17,7 +18,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'o
     rootRef?: React.Ref<HTMLLabelElement>;
     checked?: boolean | 'indeterminate';
     defaultChecked?: boolean;
-    onCheckedChange?: (checked: RadixCheckbox.CheckedState) => void;
+    onCheckedChange?: (checked: CheckedState) => void;
     onChange?: React.FormEventHandler<HTMLLabelElement>;
     disabled?: boolean;
     readOnly?: boolean;

package/dist/checkbox.d.ts

@@ -1,6 +1,7 @@
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as React from 'react';
 
+/** Tri-state, as the Chakra/Radix contract consumers already code against. */
+type CheckedState = boolean | 'indeterminate';
 interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
     value?: Array<string>;
     defaultValue?: Array<string>;
@@ -17,7 +18,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'o
     rootRef?: React.Ref<HTMLLabelElement>;
     checked?: boolean | 'indeterminate';
     defaultChecked?: boolean;
-    onCheckedChange?: (checked: RadixCheckbox.CheckedState) => void;
+    onCheckedChange?: (checked: CheckedState) => void;
     onChange?: React.FormEventHandler<HTMLLabelElement>;
     disabled?: boolean;
     readOnly?: boolean;

package/dist/checkbox.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { Checkbox } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -104,7 +104,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
   }
 );
 var CheckboxBase = React.forwardRef(
-  function Checkbox(props, ref) {
+  function Checkbox$1(props, ref) {
     const {
       icon,
       children,
@@ -191,8 +191,9 @@ var CheckboxBase = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RadixCheckbox.Root,
+            Checkbox,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled: disabled || readOnly,
@@ -210,7 +211,7 @@ var CheckboxBase = React.forwardRef(
                 "transition-colors duration-150",
                 sizeClasses.control
               ),
-              children: icon ?? /* @__PURE__ */ jsx(RadixCheckbox.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 }) })
+              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 }) })
             }
           ),
           /* @__PURE__ */ jsx(