@hanzo/ui 8.27.87 → 8.27.88

package/dist/backends/gui/checkbox.cjs

@@ -9,14 +9,31 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const BOX = 16;
-const Checkbox = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Checkbox, { ...(0, slot_1.slot)('checkbox'), width: BOX, height: BOX, flexShrink: 0, borderRadius: "$2", borderWidth: 1, 
+/**
+ * The mark: a tick when checked, a dash when indeterminate. `$ink` on the
+ * transparent well, as the RadioGroup dot, so it reads on either theme's ground.
+ * Stroke 3 of lucide's 24-unit box is 1.6px at 13px.
+ */
+const Mark = () => {
+    const Icon = (0, react_1.useContext)(gui_1.CheckboxContext).checked === 'indeterminate' ? lucide_icons_2_1.Minus : lucide_icons_2_1.Check;
+    return (0, jsx_runtime_1.jsx)(Icon, { size: BOX - 3, color: "$ink", strokeWidth: 3 });
+};
+const Checkbox = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Checkbox, { ...(0, slot_1.slot)('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
+    // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
+    // border box that leaves a 2px-wide content box and squeezes the 13px mark
+    // to 2px. Zero padding gives the mark the whole 14px inside the border.
+    padding: 0, borderRadius: "$2", borderWidth: 1, 
     // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
     // right for a card edge sitting on its own fill, and 1.26:1 against the
     // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
     // An unchecked box was therefore not quiet, it was absent. `$bound` is
     // 3.45:1. The two jobs shared one token and only one of them was satisfied.
-    borderColor: "$bound", backgroundColor: "transparent", ...(0, gesture_1.touch)(BOX), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Checkbox.Indicator, { ...(0, slot_1.slot)('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: BOX - 3 }) }) }));
+    borderColor: "$bound", backgroundColor: "transparent", 
+    // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
+    // given; the well stays transparent so the `$ink` mark keeps its contrast.
+    activeStyle: { bg: 'transparent' }, ...(0, gesture_1.touch)(BOX), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Checkbox.Indicator, { ...(0, slot_1.slot)('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Mark, {}) }) }));
 exports.Checkbox = Checkbox;

package/dist/backends/gui/checkbox.d.ts

@@ -3,7 +3,7 @@
  * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
  */
 import { Checkbox as GuiCheckbox } from '@hanzo/gui';
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 export type CheckboxProps = ComponentProps<typeof GuiCheckbox>;
 declare const Checkbox: (props: CheckboxProps) => import("react").JSX.Element;
 export { Checkbox };

package/dist/backends/gui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAM3C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAE9D,QAAA,MAAM,QAAQ,UAAW,aAAa,gCAsBrC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAmB,MAAM,YAAY,CAAA;AAErE,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAMvD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAY9D,QAAA,MAAM,QAAQ,UAAW,aAAa,gCA6BrC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/backends/gui/checkbox.js

@@ -4,17 +4,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Checkbox — 16px box, `touch()` to the 44px floor on web and native alike.
  * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
  */
-import { Checkbox as GuiCheckbox } from '@hanzo/gui';
-import { Check } from '@hanzogui/lucide-icons-2';
+import { Checkbox as GuiCheckbox, CheckboxContext } from '@hanzo/gui';
+import { Check, Minus } from '@hanzogui/lucide-icons-2';
+import { useContext } from 'react';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 const BOX = 16;
-const Checkbox = (props) => (_jsx(GuiCheckbox, { ...slot('checkbox'), width: BOX, height: BOX, flexShrink: 0, borderRadius: "$2", borderWidth: 1, 
+/**
+ * The mark: a tick when checked, a dash when indeterminate. `$ink` on the
+ * transparent well, as the RadioGroup dot, so it reads on either theme's ground.
+ * Stroke 3 of lucide's 24-unit box is 1.6px at 13px.
+ */
+const Mark = () => {
+    const Icon = useContext(CheckboxContext).checked === 'indeterminate' ? Minus : Check;
+    return _jsx(Icon, { size: BOX - 3, color: "$ink", strokeWidth: 3 });
+};
+const Checkbox = (props) => (_jsx(GuiCheckbox, { ...slot('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
+    // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
+    // border box that leaves a 2px-wide content box and squeezes the 13px mark
+    // to 2px. Zero padding gives the mark the whole 14px inside the border.
+    padding: 0, borderRadius: "$2", borderWidth: 1, 
     // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
     // right for a card edge sitting on its own fill, and 1.26:1 against the
     // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
     // An unchecked box was therefore not quiet, it was absent. `$bound` is
     // 3.45:1. The two jobs shared one token and only one of them was satisfied.
-    borderColor: "$bound", backgroundColor: "transparent", ...touch(BOX), ...props, children: _jsx(GuiCheckbox.Indicator, { ...slot('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: _jsx(Check, { size: BOX - 3 }) }) }));
+    borderColor: "$bound", backgroundColor: "transparent", 
+    // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
+    // given; the well stays transparent so the `$ink` mark keeps its contrast.
+    activeStyle: { bg: 'transparent' }, ...touch(BOX), ...props, children: _jsx(GuiCheckbox.Indicator, { ...slot('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: _jsx(Mark, {}) }) }));
 export { Checkbox };
 //# sourceMappingURL=checkbox.js.map

package/dist/backends/gui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,GAAG,GAAG,EAAE,CAAA;AAId,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,KAAC,WAAW,OACN,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,CAAC,EACb,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,CAAC;IACd,4EAA4E;IAC5E,wEAAwE;IACxE,4EAA4E;IAC5E,uEAAuE;IACvE,4EAA4E;IAC5E,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,aAAa,KACzB,KAAK,CAAC,GAAG,CAAC,KACV,KAAK,YAET,KAAC,WAAW,CAAC,SAAS,OAAK,IAAI,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,YAChG,KAAC,KAAK,IAAC,IAAI,EAAE,GAAG,GAAG,CAAC,GAAI,GACF,GACZ,CACf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,GAAG,GAAG,EAAE,CAAA;AAId;;;;GAIG;AACH,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,MAAM,IAAI,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IACpF,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,WAAW,EAAE,CAAC,GAAI,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,KAAC,WAAW,OACN,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,CAAC;IACb,wEAAwE;IACxE,2EAA2E;IAC3E,wEAAwE;IACxE,OAAO,EAAE,CAAC,EACV,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,CAAC;IACd,4EAA4E;IAC5E,wEAAwE;IACxE,4EAA4E;IAC5E,uEAAuE;IACvE,4EAA4E;IAC5E,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,aAAa;IAC7B,2EAA2E;IAC3E,2EAA2E;IAC3E,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,KAC9B,KAAK,CAAC,GAAG,CAAC,KACV,KAAK,YAET,KAAC,WAAW,CAAC,SAAS,OAAK,IAAI,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,YAChG,KAAC,IAAI,KAAG,GACc,GACZ,CACf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}