@luxfi/ui 7.4.10 → 7.4.12

package/dist/badge.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -215,6 +215,14 @@ React3__namespace.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React3.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React3.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React3.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React3__namespace.useState(false);
@@ -319,14 +327,21 @@ var Tooltip = React3__namespace.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -335,12 +350,13 @@ var Tooltip = React3__namespace.forwardRef(
                   gui.Tooltip.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -352,35 +368,39 @@ var Tooltip = React3__namespace.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES = {
-  sm: "text-xs p-1 h-[18px] min-h-[18px]",
-  md: "text-sm px-1 py-0.5 min-h-6",
-  lg: "text-sm px-2 py-1 min-h-7 font-semibold"
+var SIZE = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
+};
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
 };
-var COLOR_PALETTE_CLASSES = {
-  gray: "bg-badge-gray-bg text-badge-gray-fg",
-  green: "bg-badge-green-bg text-badge-green-fg",
-  red: "bg-badge-red-bg text-badge-red-fg",
-  purple: "bg-badge-purple-bg text-badge-purple-fg",
-  orange: "bg-badge-orange-bg text-badge-orange-fg",
-  blue: "bg-badge-blue-bg text-badge-blue-fg",
-  yellow: "bg-badge-yellow-bg text-badge-yellow-fg",
-  teal: "bg-badge-teal-bg text-badge-teal-fg",
-  cyan: "bg-badge-cyan-bg text-badge-cyan-fg",
-  pink: "bg-badge-pink-bg text-badge-pink-fg",
-  purple_alt: "bg-badge-purple-alt-bg text-badge-purple-alt-fg",
-  blue_alt: "bg-badge-blue-alt-bg text-badge-blue-alt-fg",
-  bright_gray: "bg-badge-bright-gray-bg text-badge-bright-gray-fg",
-  bright_green: "bg-badge-bright-green-bg text-badge-bright-green-fg",
-  bright_red: "bg-badge-bright-red-bg text-badge-bright-red-fg",
-  bright_blue: "bg-badge-bright-blue-bg text-badge-bright-blue-fg",
-  bright_yellow: "bg-badge-bright-yellow-bg text-badge-bright-yellow-fg",
-  bright_teal: "bg-badge-bright-teal-bg text-badge-bright-teal-fg",
-  bright_cyan: "bg-badge-bright-cyan-bg text-badge-bright-cyan-fg",
-  bright_orange: "bg-badge-bright-orange-bg text-badge-bright-orange-fg",
-  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
-  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
+var COLOR_PALETTE = {
+  gray: { bg: "var(--color-badge-gray-bg)", fg: "var(--color-badge-gray-fg)" },
+  green: { bg: "var(--color-badge-green-bg)", fg: "var(--color-badge-green-fg)" },
+  red: { bg: "var(--color-badge-red-bg)", fg: "var(--color-badge-red-fg)" },
+  purple: { bg: "var(--color-badge-purple-bg)", fg: "var(--color-badge-purple-fg)" },
+  orange: { bg: "var(--color-badge-orange-bg)", fg: "var(--color-badge-orange-fg)" },
+  blue: { bg: "var(--color-badge-blue-bg)", fg: "var(--color-badge-blue-fg)" },
+  yellow: { bg: "var(--color-badge-yellow-bg)", fg: "var(--color-badge-yellow-fg)" },
+  teal: { bg: "var(--color-badge-teal-bg)", fg: "var(--color-badge-teal-fg)" },
+  cyan: { bg: "var(--color-badge-cyan-bg)", fg: "var(--color-badge-cyan-fg)" },
+  pink: { bg: "var(--color-badge-pink-bg)", fg: "var(--color-badge-pink-fg)" },
+  purple_alt: { bg: "var(--color-badge-purple-alt-bg)", fg: "var(--color-badge-purple-alt-fg)" },
+  blue_alt: { bg: "var(--color-badge-blue-alt-bg)", fg: "var(--color-badge-blue-alt-fg)" },
+  bright_gray: { bg: "var(--color-badge-bright-gray-bg)", fg: "var(--color-badge-bright-gray-fg)" },
+  bright_green: { bg: "var(--color-badge-bright-green-bg)", fg: "var(--color-badge-bright-green-fg)" },
+  bright_red: { bg: "var(--color-badge-bright-red-bg)", fg: "var(--color-badge-bright-red-fg)" },
+  bright_blue: { bg: "var(--color-badge-bright-blue-bg)", fg: "var(--color-badge-bright-blue-fg)" },
+  bright_yellow: { bg: "var(--color-badge-bright-yellow-bg)", fg: "var(--color-badge-bright-yellow-fg)" },
+  bright_teal: { bg: "var(--color-badge-bright-teal-bg)", fg: "var(--color-badge-bright-teal-fg)" },
+  bright_cyan: { bg: "var(--color-badge-bright-cyan-bg)", fg: "var(--color-badge-bright-cyan-fg)" },
+  bright_orange: { bg: "var(--color-badge-bright-orange-bg)", fg: "var(--color-badge-bright-orange-fg)" },
+  bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
+  bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
 };
 var S2 = 4;
 var Badge = React3__namespace.default.forwardRef(
@@ -415,18 +435,31 @@ var Badge = React3__namespace.default.forwardRef(
     }
     if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const child = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const palette = COLOR_PALETTE[colorPalette];
+    const child = children ? (
+      // `ellipsis` is gui Text's own built-in variant for single-line
+      // truncation — it expands to the same overflow/text-overflow/
+      // white-space/max-width rule Tailwind's `text-ellipsis` did, but
+      // through the component's own variants (guaranteed to compile),
+      // rather than naming each longhand as a separate style prop.
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+    ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      gui.XStack,
       {
         ref,
-        className: cn(
-          BASE_CLASSES,
-          SIZE_CLASSES[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className
-        ),
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        backgroundColor: palette.bg,
+        className,
         style: badgeStyle,
         ...rest,
         children: [

package/dist/badge.js

@@ -1,10 +1,10 @@
 "use client";
+import { TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
 import * as React3 from 'react';
-import React3__default from 'react';
+import React3__default, { Children, createElement } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/badge.tsx
@@ -194,6 +194,14 @@ React3.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React3.useState(false);
@@ -298,14 +306,21 @@ var Tooltip = React3.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -314,12 +329,13 @@ var Tooltip = React3.forwardRef(
                   Tooltip$1.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -331,35 +347,39 @@ var Tooltip = React3.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES = {
-  sm: "text-xs p-1 h-[18px] min-h-[18px]",
-  md: "text-sm px-1 py-0.5 min-h-6",
-  lg: "text-sm px-2 py-1 min-h-7 font-semibold"
+var SIZE = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
+};
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
 };
-var COLOR_PALETTE_CLASSES = {
-  gray: "bg-badge-gray-bg text-badge-gray-fg",
-  green: "bg-badge-green-bg text-badge-green-fg",
-  red: "bg-badge-red-bg text-badge-red-fg",
-  purple: "bg-badge-purple-bg text-badge-purple-fg",
-  orange: "bg-badge-orange-bg text-badge-orange-fg",
-  blue: "bg-badge-blue-bg text-badge-blue-fg",
-  yellow: "bg-badge-yellow-bg text-badge-yellow-fg",
-  teal: "bg-badge-teal-bg text-badge-teal-fg",
-  cyan: "bg-badge-cyan-bg text-badge-cyan-fg",
-  pink: "bg-badge-pink-bg text-badge-pink-fg",
-  purple_alt: "bg-badge-purple-alt-bg text-badge-purple-alt-fg",
-  blue_alt: "bg-badge-blue-alt-bg text-badge-blue-alt-fg",
-  bright_gray: "bg-badge-bright-gray-bg text-badge-bright-gray-fg",
-  bright_green: "bg-badge-bright-green-bg text-badge-bright-green-fg",
-  bright_red: "bg-badge-bright-red-bg text-badge-bright-red-fg",
-  bright_blue: "bg-badge-bright-blue-bg text-badge-bright-blue-fg",
-  bright_yellow: "bg-badge-bright-yellow-bg text-badge-bright-yellow-fg",
-  bright_teal: "bg-badge-bright-teal-bg text-badge-bright-teal-fg",
-  bright_cyan: "bg-badge-bright-cyan-bg text-badge-bright-cyan-fg",
-  bright_orange: "bg-badge-bright-orange-bg text-badge-bright-orange-fg",
-  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
-  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
+var COLOR_PALETTE = {
+  gray: { bg: "var(--color-badge-gray-bg)", fg: "var(--color-badge-gray-fg)" },
+  green: { bg: "var(--color-badge-green-bg)", fg: "var(--color-badge-green-fg)" },
+  red: { bg: "var(--color-badge-red-bg)", fg: "var(--color-badge-red-fg)" },
+  purple: { bg: "var(--color-badge-purple-bg)", fg: "var(--color-badge-purple-fg)" },
+  orange: { bg: "var(--color-badge-orange-bg)", fg: "var(--color-badge-orange-fg)" },
+  blue: { bg: "var(--color-badge-blue-bg)", fg: "var(--color-badge-blue-fg)" },
+  yellow: { bg: "var(--color-badge-yellow-bg)", fg: "var(--color-badge-yellow-fg)" },
+  teal: { bg: "var(--color-badge-teal-bg)", fg: "var(--color-badge-teal-fg)" },
+  cyan: { bg: "var(--color-badge-cyan-bg)", fg: "var(--color-badge-cyan-fg)" },
+  pink: { bg: "var(--color-badge-pink-bg)", fg: "var(--color-badge-pink-fg)" },
+  purple_alt: { bg: "var(--color-badge-purple-alt-bg)", fg: "var(--color-badge-purple-alt-fg)" },
+  blue_alt: { bg: "var(--color-badge-blue-alt-bg)", fg: "var(--color-badge-blue-alt-fg)" },
+  bright_gray: { bg: "var(--color-badge-bright-gray-bg)", fg: "var(--color-badge-bright-gray-fg)" },
+  bright_green: { bg: "var(--color-badge-bright-green-bg)", fg: "var(--color-badge-bright-green-fg)" },
+  bright_red: { bg: "var(--color-badge-bright-red-bg)", fg: "var(--color-badge-bright-red-fg)" },
+  bright_blue: { bg: "var(--color-badge-bright-blue-bg)", fg: "var(--color-badge-bright-blue-fg)" },
+  bright_yellow: { bg: "var(--color-badge-bright-yellow-bg)", fg: "var(--color-badge-bright-yellow-fg)" },
+  bright_teal: { bg: "var(--color-badge-bright-teal-bg)", fg: "var(--color-badge-bright-teal-fg)" },
+  bright_cyan: { bg: "var(--color-badge-bright-cyan-bg)", fg: "var(--color-badge-bright-cyan-fg)" },
+  bright_orange: { bg: "var(--color-badge-bright-orange-bg)", fg: "var(--color-badge-bright-orange-fg)" },
+  bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
+  bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
 };
 var S2 = 4;
 var Badge = React3__default.forwardRef(
@@ -394,18 +414,31 @@ var Badge = React3__default.forwardRef(
     }
     if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const palette = COLOR_PALETTE[colorPalette];
+    const child = children ? (
+      // `ellipsis` is gui Text's own built-in variant for single-line
+      // truncation — it expands to the same overflow/text-overflow/
+      // white-space/max-width rule Tailwind's `text-ellipsis` did, but
+      // through the component's own variants (guaranteed to compile),
+      // rather than naming each longhand as a separate style prop.
+      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+    ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxs(
-      "span",
+      XStack,
       {
         ref,
-        className: cn(
-          BASE_CLASSES,
-          SIZE_CLASSES[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className
-        ),
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        backgroundColor: palette.bg,
+        className,
         style: badgeStyle,
         ...rest,
         children: [

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