@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Barcode/scannerTypes.cjs

@@ -2,6 +2,12 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
@@ -15,4 +21,97 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var scannerTypes_exports = {};
-module.exports = __toCommonJS(scannerTypes_exports);
+__export(scannerTypes_exports, {
+  NATIVE_BARCODE_TYPES: () => NATIVE_BARCODE_TYPES,
+  resolveHtml5FormatIds: () => resolveHtml5FormatIds,
+  resolveNativeBarcodeTypes: () => resolveNativeBarcodeTypes,
+  scannerViewportHeight: () => scannerViewportHeight
+});
+module.exports = __toCommonJS(scannerTypes_exports);
+const NATIVE_BARCODE_TYPES = ["qr", "ean13", "ean8", "code128", "code39", "code93", "upc_a", "upc_e", "codabar", "itf14", "datamatrix", "pdf417", "aztec"];
+const NATIVE_FORMAT_ALIASES = {
+  qr: "qr",
+  qrcode: "qr",
+  qr_code: "qr",
+  ean13: "ean13",
+  ean_13: "ean13",
+  ean8: "ean8",
+  ean_8: "ean8",
+  code128: "code128",
+  code_128: "code128",
+  code39: "code39",
+  code_39: "code39",
+  code93: "code93",
+  code_93: "code93",
+  upc_a: "upc_a",
+  upca: "upc_a",
+  upc_e: "upc_e",
+  upce: "upc_e",
+  codabar: "codabar",
+  itf: "itf14",
+  itf14: "itf14",
+  datamatrix: "datamatrix",
+  data_matrix: "datamatrix",
+  pdf417: "pdf417",
+  pdf_417: "pdf417",
+  aztec: "aztec"
+};
+const HTML5_FORMAT_ALIASES = {
+  qr: "QR_CODE",
+  qrcode: "QR_CODE",
+  qr_code: "QR_CODE",
+  aztec: "AZTEC",
+  codabar: "CODABAR",
+  code39: "CODE_39",
+  code_39: "CODE_39",
+  code93: "CODE_93",
+  code_93: "CODE_93",
+  code128: "CODE_128",
+  code_128: "CODE_128",
+  datamatrix: "DATA_MATRIX",
+  data_matrix: "DATA_MATRIX",
+  itf: "ITF",
+  itf14: "ITF",
+  ean13: "EAN_13",
+  ean_13: "EAN_13",
+  ean8: "EAN_8",
+  ean_8: "EAN_8",
+  pdf417: "PDF_417",
+  pdf_417: "PDF_417",
+  upca: "UPC_A",
+  upc_a: "UPC_A",
+  upce: "UPC_E",
+  upc_e: "UPC_E"
+};
+function normalizeFormatToken(value) {
+  return value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+}
+function resolveNativeBarcodeTypes(formats) {
+  if (!formats?.length) return [...NATIVE_BARCODE_TYPES];
+  const seen = /* @__PURE__ */new Set();
+  const resolved = [];
+  for (const raw of formats) {
+    const mapped = NATIVE_FORMAT_ALIASES[normalizeFormatToken(raw)];
+    if (!mapped || seen.has(mapped)) continue;
+    seen.add(mapped);
+    resolved.push(mapped);
+  }
+  return resolved.length ? resolved : [...NATIVE_BARCODE_TYPES];
+}
+function resolveHtml5FormatIds(formats, enumObj) {
+  if (!formats?.length) return void 0;
+  const ids = [];
+  const seen = /* @__PURE__ */new Set();
+  for (const raw of formats) {
+    const key = HTML5_FORMAT_ALIASES[normalizeFormatToken(raw)];
+    if (!key) continue;
+    const val = enumObj[key];
+    if (typeof val !== "number" || seen.has(val)) continue;
+    seen.add(val);
+    ids.push(val);
+  }
+  return ids.length ? ids : void 0;
+}
+function scannerViewportHeight(compact) {
+  return compact ? 180 : 240;
+}

package/dist/cjs/fields/Barcode/scannerTypes.native.js

@@ -4,6 +4,12 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
@@ -17,5 +23,136 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var scannerTypes_exports = {};
+__export(scannerTypes_exports, {
+  NATIVE_BARCODE_TYPES: () => NATIVE_BARCODE_TYPES,
+  resolveHtml5FormatIds: () => resolveHtml5FormatIds,
+  resolveNativeBarcodeTypes: () => resolveNativeBarcodeTypes,
+  scannerViewportHeight: () => scannerViewportHeight
+});
 module.exports = __toCommonJS(scannerTypes_exports);
+var NATIVE_BARCODE_TYPES = ["qr", "ean13", "ean8", "code128", "code39", "code93", "upc_a", "upc_e", "codabar", "itf14", "datamatrix", "pdf417", "aztec"];
+var NATIVE_FORMAT_ALIASES = {
+  qr: "qr",
+  qrcode: "qr",
+  qr_code: "qr",
+  ean13: "ean13",
+  ean_13: "ean13",
+  ean8: "ean8",
+  ean_8: "ean8",
+  code128: "code128",
+  code_128: "code128",
+  code39: "code39",
+  code_39: "code39",
+  code93: "code93",
+  code_93: "code93",
+  upc_a: "upc_a",
+  upca: "upc_a",
+  upc_e: "upc_e",
+  upce: "upc_e",
+  codabar: "codabar",
+  itf: "itf14",
+  itf14: "itf14",
+  datamatrix: "datamatrix",
+  data_matrix: "datamatrix",
+  pdf417: "pdf417",
+  pdf_417: "pdf417",
+  aztec: "aztec"
+};
+var HTML5_FORMAT_ALIASES = {
+  qr: "QR_CODE",
+  qrcode: "QR_CODE",
+  qr_code: "QR_CODE",
+  aztec: "AZTEC",
+  codabar: "CODABAR",
+  code39: "CODE_39",
+  code_39: "CODE_39",
+  code93: "CODE_93",
+  code_93: "CODE_93",
+  code128: "CODE_128",
+  code_128: "CODE_128",
+  datamatrix: "DATA_MATRIX",
+  data_matrix: "DATA_MATRIX",
+  itf: "ITF",
+  itf14: "ITF",
+  ean13: "EAN_13",
+  ean_13: "EAN_13",
+  ean8: "EAN_8",
+  ean_8: "EAN_8",
+  pdf417: "PDF_417",
+  pdf_417: "PDF_417",
+  upca: "UPC_A",
+  upc_a: "UPC_A",
+  upce: "UPC_E",
+  upc_e: "UPC_E"
+};
+function normalizeFormatToken(value) {
+  return value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+}
+function resolveNativeBarcodeTypes(formats) {
+  if (!(formats === null || formats === void 0 ? void 0 : formats.length)) return [...NATIVE_BARCODE_TYPES];
+  var seen = /* @__PURE__ */new Set();
+  var resolved = [];
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = formats[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value;
+      var mapped = NATIVE_FORMAT_ALIASES[normalizeFormatToken(raw)];
+      if (!mapped || seen.has(mapped)) continue;
+      seen.add(mapped);
+      resolved.push(mapped);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return resolved.length ? resolved : [...NATIVE_BARCODE_TYPES];
+}
+function resolveHtml5FormatIds(formats, enumObj) {
+  if (!(formats === null || formats === void 0 ? void 0 : formats.length)) return void 0;
+  var ids = [];
+  var seen = /* @__PURE__ */new Set();
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = formats[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value;
+      var key = HTML5_FORMAT_ALIASES[normalizeFormatToken(raw)];
+      if (!key) continue;
+      var val = enumObj[key];
+      if (typeof val !== "number" || seen.has(val)) continue;
+      seen.add(val);
+      ids.push(val);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return ids.length ? ids : void 0;
+}
+function scannerViewportHeight(compact) {
+  return compact ? 180 : 240;
+}
 //# sourceMappingURL=scannerTypes.native.js.map

package/dist/cjs/fields/Barcode/scannerTypes.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","scannerTypes_exports"],"sources":["../../../../src/fields/Barcode/scannerTypes.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","scannerTypes_exports","__export","NATIVE_BARCODE_TYPES","resolveHtml5FormatIds","resolveNativeBarcodeTypes","scannerViewportHeight","module","exports","NATIVE_FORMAT_ALIASES","qr","qrcode","qr_code","ean13","ean_13","ean8","ean_8","code128","code_128","code39","code_39","code93","code_93","upc_a","upca","upc_e","upce","codabar","itf","itf14","datamatrix","data_matrix","pdf417","pdf_417","aztec","HTML5_FORMAT_ALIASES","normalizeFormatToken","trim","toLowerCase","replace","formats","length","seen","Set","resolved","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","raw","mapped","has","add","push","err","return"],"sources":["../../../../src/fields/Barcode/scannerTypes.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/Checkbox/Checkbox.cjs

@@ -30,12 +30,12 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
-var import_get_token = require("@tamagui/get-token");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_CheckboxBox = require("./CheckboxBox.cjs");
 var import_CheckboxFieldFrame = require("./CheckboxFieldFrame.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function getCheckboxInlineGap(space) {
@@ -78,7 +78,6 @@ function Checkbox({
   const {
     resolvedForm,
     knobProps,
-    control,
     text,
     elevation,
     disabledState,
@@ -130,7 +129,7 @@ function Checkbox({
   const indicatorColor = (0, import_tamagui.getVariable)(tamaguiTheme[accentTokenKey]?.get("web") ?? tamaguiTheme.color?.get("web"));
   const onMark = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   const indicatorWeight = knobProps.textWeight.fontWeight === "700" ? "bold" : knobProps.textWeight.fontWeight === "400" ? "regular" : "light";
-  const renderIndicator = currentChecked => {
+  const renderIndicator = (currentChecked, iconSize2) => {
     if (children) return children;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Checkbox.Indicator, {
       ...(knobProps.transition ? {
@@ -138,46 +137,34 @@ function Checkbox({
       } : void 0),
       children: currentChecked === "indeterminate" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
         color: onMark ?? indicatorColor,
-        weight: indicatorWeight
+        weight: indicatorWeight,
+        size: iconSize2
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
         color: onMark ?? indicatorColor,
-        weight: indicatorWeight
+        weight: indicatorWeight,
+        size: iconSize2
       })
     });
   };
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
-  const targetSize = 44;
-  const glyphSize = Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(resolvedSize)) * 0.45);
-  const targetFrameProps = {
-    width: targetSize,
-    height: targetSize,
-    minWidth: targetSize,
-    minHeight: targetSize,
-    padding: 0,
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    alignItems: "center",
-    justifyContent: "center",
-    activeStyle: {
-      backgroundColor: "transparent"
-    }
-  };
-  const stateBaseStyle = {
-    backgroundColor: "transparent"
-  };
+  const targetSize = import_CheckboxBox.CHECKBOX_TARGET_PX;
+  const glyphSize = (0, import_CheckboxBox.getCheckboxGlyphSize)(resolvedSize);
+  const iconSize = (0, import_CheckboxBox.getCheckboxIconSize)(glyphSize);
+  const boxBorderWidth = (0, import_CheckboxBox.getCheckboxBoxBorderWidth)(knobProps.borderRadius.borderWidth);
   const [uncontrolledChecked, setUncontrolledChecked] = (0, import_react2.useState)(defaultValue);
+  const [kbFocus, setKbFocus] = (0, import_react2.useState)(false);
+  const [hovered, setHovered] = (0, import_react2.useState)(false);
   const glyphBox = currentChecked => {
     const isMarked = currentChecked === true || currentChecked === "indeterminate";
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: glyphSize,
-      height: glyphSize,
-      ...knobProps.inputSurface,
-      ...resolvedRadius,
-      backgroundColor: isMarked ? import_colorRamps.formSelectedColors.mark : knobProps.outlined ? "transparent" : import_colorRamps.formControlColors.background,
-      borderColor: isMarked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.border,
-      alignItems: "center",
-      justifyContent: "center",
-      children: renderIndicator(currentChecked)
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxBox.CheckboxGlyphBox, {
+      glyphSize,
+      isMarked,
+      kbFocus,
+      hovered,
+      borderWidth: boxBorderWidth,
+      borderRadius: resolvedRadius.borderRadius ?? 0,
+      transition: knobProps.transition,
+      children: renderIndicator(currentChecked, iconSize)
     });
   };
   const renderControlContent = currentChecked => elevationWrapperProps.elevation && !inTableCell ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -231,32 +218,14 @@ function Checkbox({
     const checkboxEl = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
       size: resolvedSize,
       transition: knobProps.transition,
-      ...((0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2) && {
-        hoverStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2) && {
-        pressStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2) && {
-        focusStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2) && {
-        focusVisibleStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2)
-        }
-      }),
-      ...targetFrameProps,
       ...checkboxProps,
+      ...import_CheckboxBox.checkboxTargetFrameProps,
+      ...(0, import_CheckboxBox.checkboxKbFocusHandlers)(setKbFocus, setHovered, {
+        onFocus: checkboxProps?.onFocus,
+        onBlur: onBlur ?? checkboxProps?.onBlur,
+        onHoverIn: checkboxProps?.onHoverIn,
+        onHoverOut: checkboxProps?.onHoverOut
+      }),
       disabled,
       ...(disabled ? disabledState.chromeKnobProps : void 0),
       id,
@@ -279,9 +248,6 @@ function Checkbox({
         setUncontrolledChecked(val);
         handleValueChange(val);
       },
-      ...(onBlur ? {
-        onBlur
-      } : void 0),
       children: renderControlContent(checked ?? uncontrolledChecked)
     });
     const hasElevation = !!elevationWrapperProps.elevation;
@@ -362,32 +328,14 @@ function Checkbox({
             const checkboxElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
               size: resolvedSize,
               transition: knobProps.transition,
-              ...((0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2) && {
-                hoverStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2) && {
-                pressStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2) && {
-                focusStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2) && {
-                focusVisibleStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2)
-                }
-              }),
-              ...targetFrameProps,
               ...checkboxProps,
+              ...import_CheckboxBox.checkboxTargetFrameProps,
+              ...(0, import_CheckboxBox.checkboxKbFocusHandlers)(setKbFocus, setHovered, {
+                onFocus: checkboxProps?.onFocus,
+                onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+                onHoverIn: checkboxProps?.onHoverIn,
+                onHoverOut: checkboxProps?.onHoverOut
+              }),
               disabled,
               ...(disabled ? disabledState.chromeKnobProps : void 0),
               id,
@@ -407,7 +355,6 @@ function Checkbox({
                 field.handleChange(fieldValue);
                 handleValueChange(newChecked);
               },
-              onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
               children: renderControlContent(resolvedChecked)
             });
             return checkboxElement;

package/dist/cjs/fields/Checkbox/Checkbox.native.js

@@ -33,12 +33,12 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
-var import_get_token = require("@tamagui/get-token");
 var import_tableCellContext = require("../../shared/tableCellContext.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
+var import_CheckboxBox = require("./CheckboxBox.native.js");
 var import_CheckboxFieldFrame = require("./CheckboxFieldFrame.native.js");
 function getCheckboxInlineGap(space) {
   var inlineGapMap = {
@@ -83,7 +83,6 @@ function Checkbox(param) {
   var {
     resolvedForm,
     knobProps,
-    control,
     text,
     elevation,
     disabledState,
@@ -139,7 +138,7 @@ function Checkbox(param) {
   var indicatorColor = (0, import_tamagui.getVariable)((_ref = (_tamaguiTheme_accentTokenKey = tamaguiTheme[accentTokenKey]) === null || _tamaguiTheme_accentTokenKey === void 0 ? void 0 : _tamaguiTheme_accentTokenKey.get("web")) !== null && _ref !== void 0 ? _ref : (_tamaguiTheme_color = tamaguiTheme.color) === null || _tamaguiTheme_color === void 0 ? void 0 : _tamaguiTheme_color.get("web"));
   var onMark = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   var indicatorWeight = knobProps.textWeight.fontWeight === "700" ? "bold" : knobProps.textWeight.fontWeight === "400" ? "regular" : "light";
-  var renderIndicator = function renderIndicator2(currentChecked) {
+  var renderIndicator = function renderIndicator2(currentChecked, iconSize2) {
     if (children) return children;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Checkbox.Indicator, {
       ...(knobProps.transition ? {
@@ -147,46 +146,35 @@ function Checkbox(param) {
       } : void 0),
       children: currentChecked === "indeterminate" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
         color: onMark !== null && onMark !== void 0 ? onMark : indicatorColor,
-        weight: indicatorWeight
+        weight: indicatorWeight,
+        size: iconSize2
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
         color: onMark !== null && onMark !== void 0 ? onMark : indicatorColor,
-        weight: indicatorWeight
+        weight: indicatorWeight,
+        size: iconSize2
       })
     });
   };
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
-  var targetSize = 44;
-  var glyphSize = Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(resolvedSize)) * 0.45);
-  var targetFrameProps = {
-    width: targetSize,
-    height: targetSize,
-    minWidth: targetSize,
-    minHeight: targetSize,
-    padding: 0,
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    alignItems: "center",
-    justifyContent: "center",
-    activeStyle: {
-      backgroundColor: "transparent"
-    }
-  };
-  var stateBaseStyle = {
-    backgroundColor: "transparent"
-  };
+  var targetSize = import_CheckboxBox.CHECKBOX_TARGET_PX;
+  var glyphSize = (0, import_CheckboxBox.getCheckboxGlyphSize)(resolvedSize);
+  var iconSize = (0, import_CheckboxBox.getCheckboxIconSize)(glyphSize);
+  var boxBorderWidth = (0, import_CheckboxBox.getCheckboxBoxBorderWidth)(knobProps.borderRadius.borderWidth);
   var [uncontrolledChecked, setUncontrolledChecked] = (0, import_react2.useState)(defaultValue);
+  var [kbFocus, setKbFocus] = (0, import_react2.useState)(false);
+  var [hovered, setHovered] = (0, import_react2.useState)(false);
   var glyphBox = function glyphBox2(currentChecked) {
+    var _resolvedRadius_borderRadius;
     var isMarked = currentChecked === true || currentChecked === "indeterminate";
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: glyphSize,
-      height: glyphSize,
-      ...knobProps.inputSurface,
-      ...resolvedRadius,
-      backgroundColor: isMarked ? import_colorRamps.formSelectedColors.mark : knobProps.outlined ? "transparent" : import_colorRamps.formControlColors.background,
-      borderColor: isMarked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.border,
-      alignItems: "center",
-      justifyContent: "center",
-      children: renderIndicator(currentChecked)
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxBox.CheckboxGlyphBox, {
+      glyphSize,
+      isMarked,
+      kbFocus,
+      hovered,
+      borderWidth: boxBorderWidth,
+      borderRadius: (_resolvedRadius_borderRadius = resolvedRadius.borderRadius) !== null && _resolvedRadius_borderRadius !== void 0 ? _resolvedRadius_borderRadius : 0,
+      transition: knobProps.transition,
+      children: renderIndicator(currentChecked, iconSize)
     });
   };
   var renderControlContent = function renderControlContent2(currentChecked) {
@@ -245,32 +233,14 @@ function Checkbox(param) {
     var checkboxEl = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
       size: resolvedSize,
       transition: knobProps.transition,
-      ...((0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2) && {
-        hoverStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2) && {
-        pressStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2) && {
-        focusStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2)
-        }
-      }),
-      ...((0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2) && {
-        focusVisibleStyle: {
-          ...stateBaseStyle,
-          ...(0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2)
-        }
-      }),
-      ...targetFrameProps,
       ...checkboxProps,
+      ...import_CheckboxBox.checkboxTargetFrameProps,
+      ...(0, import_CheckboxBox.checkboxKbFocusHandlers)(setKbFocus, setHovered, {
+        onFocus: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onFocus,
+        onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onBlur,
+        onHoverIn: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onHoverIn,
+        onHoverOut: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onHoverOut
+      }),
       disabled,
       // LC-40 DISABLED-VISIBLE: the box is text-free chrome — dim it while
       // the sibling label stays readable (keepLabel); dimWhole dims the
@@ -296,9 +266,6 @@ function Checkbox(param) {
         setUncontrolledChecked(val);
         handleValueChange(val);
       },
-      ...(onBlur ? {
-        onBlur
-      } : void 0),
       children: renderControlContent(checked !== null && checked !== void 0 ? checked : uncontrolledChecked)
     });
     var hasElevation = !!elevationWrapperProps.elevation;
@@ -385,32 +352,14 @@ function Checkbox(param) {
             var checkboxElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
               size: resolvedSize,
               transition: knobProps.transition,
-              ...((0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2) && {
-                hoverStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.hoverKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2) && {
-                pressStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.pressKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2) && {
-                focusStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.focusKnobProps, 2)
-                }
-              }),
-              ...((0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2) && {
-                focusVisibleStyle: {
-                  ...stateBaseStyle,
-                  ...(0, import_utils.clampRadiusInStateProps)(control.focusVisibleKnobProps, 2)
-                }
-              }),
-              ...targetFrameProps,
               ...checkboxProps,
+              ...import_CheckboxBox.checkboxTargetFrameProps,
+              ...(0, import_CheckboxBox.checkboxKbFocusHandlers)(setKbFocus, setHovered, {
+                onFocus: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onFocus,
+                onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+                onHoverIn: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onHoverIn,
+                onHoverOut: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onHoverOut
+              }),
               disabled,
               // LC-40: dim the box chrome; label/helper stay readable.
               ...(disabled ? disabledState.chromeKnobProps : void 0),
@@ -431,7 +380,6 @@ function Checkbox(param) {
                 field.handleChange(fieldValue);
                 handleValueChange(newChecked);
               },
-              onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
               children: renderControlContent(resolvedChecked)
             });
             return checkboxElement;