@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/esm/fields/Barcode/index.native.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
+import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
 import { Text, View } from "tamagui";
 import { Button } from "../../Button/index.native.js";
 import { ControlGroup } from "../../ControlGroup/index.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
 import { Field, FieldLayout } from "../../fieldLayout.native.js";
-import { Input as InputParts } from "../../InputParts/index.native.js";
+import { FocusContext, Input as InputParts } from "../../InputParts/index.native.js";
 import { formCommonColors } from "../../shared/colorRamps.native.js";
 import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
-import { BarcodeScanner } from "./BarcodeScanner.native.js";
+import { t } from "../../shared/t.native.js";
+import { BarcodeScanner, preflightCamera } from "./BarcodeScanner.native.js";
+var suppressBoxFocusRing = {
+  focused: false,
+  setFocused: function setFocused(_val) {}
+};
 function BarcodeInput(param) {
   var {
     value,
@@ -17,14 +24,38 @@ function BarcodeInput(param) {
     readOnly,
     enableScan,
     knobProps,
+    areaFocusRing,
     barcodeIcon,
     scanIcon,
     stopIcon,
     required,
-    hasError
+    hasError,
+    id,
+    hasLabel
   } = param;
   var [isScanning, setIsScanning] = useState(false);
   var [scanError, setScanError] = useState(null);
+  var preflightingRef = useRef(false);
+  var activeScanIcon = isScanning ? stopIcon : scanIcon;
+  var handleScanPress = async function handleScanPress2() {
+    if (isScanning) {
+      setIsScanning(false);
+      return;
+    }
+    if (preflightingRef.current) return;
+    preflightingRef.current = true;
+    try {
+      var result = await preflightCamera();
+      if (result.ok) {
+        setScanError(null);
+        setIsScanning(true);
+      } else {
+        setScanError(result.reason);
+      }
+    } finally {
+      preflightingRef.current = false;
+    }
+  };
   return /* @__PURE__ */_jsxs(_Fragment, {
     children: [/* @__PURE__ */_jsx(InputParts, {
       size: knobProps.sizeToken,
@@ -32,32 +63,43 @@ function BarcodeInput(param) {
         children: [/* @__PURE__ */_jsx(View, {
           width: 0
         }), /* @__PURE__ */_jsxs(InputParts.Box, {
-          children: [/* @__PURE__ */_jsx(InputParts.Icon, {
+          children: [barcodeIcon ? /* @__PURE__ */_jsx(InputParts.Icon, {
             adornment: "leading",
             children: barcodeIcon
-          }), /* @__PURE__ */_jsx(InputParts.Area, {
-            value,
-            onChangeText: readOnly ? void 0 : onValueChange,
-            readOnly,
-            "aria-readonly": readOnly || void 0,
-            placeholder: "Enter or scan barcode",
-            disabled,
-            "aria-required": required || void 0,
-            "aria-invalid": hasError || void 0
+          }) : null, /* @__PURE__ */_jsx(FocusContext.Provider, {
+            ...suppressBoxFocusRing,
+            children: /* @__PURE__ */_jsx(InputParts.Area, {
+              id,
+              value,
+              onChangeText: readOnly ? void 0 : onValueChange,
+              readOnly,
+              "aria-readonly": readOnly || void 0,
+              placeholder: t("Enter or scan barcode"),
+              disabled,
+              focusStyle: areaFocusRing,
+              focusVisibleStyle: areaFocusRing,
+              "aria-labelledby": hasLabel && id ? `${id}-label` : void 0,
+              "aria-label": hasLabel ? void 0 : t("Barcode"),
+              "aria-required": required || void 0,
+              "aria-invalid": hasError || void 0
+            })
           })]
-        }), enableScan && !readOnly ? /* @__PURE__ */_jsx(Button, {
+        }), enableScan && !readOnly ?
+        // Icon when provided; otherwise a text label — an icon-less Button
+        // renders as a bare colored box (looks like a stuck skeleton).
+        /* @__PURE__ */
+        _jsx(Button, {
           size: knobProps.sizeToken,
           disabled,
-          onPress: function onPress() {
-            return setIsScanning(function (s) {
-              return !s;
-            });
-          },
-          icon: isScanning ? stopIcon : scanIcon,
+          onPress: handleScanPress,
+          ...(activeScanIcon ? {
+            icon: activeScanIcon
+          } : void 0),
           ...(isScanning ? {
             theme: "red"
           } : void 0),
-          "aria-label": isScanning ? "Stop scanning" : "Scan barcode"
+          "aria-label": isScanning ? t("Stop scanning") : t("Scan barcode"),
+          children: activeScanIcon ? void 0 : isScanning ? t("Stop") : t("Scan")
         }) : /* @__PURE__ */_jsx(View, {
           width: 0
         })]
@@ -78,6 +120,15 @@ function BarcodeInput(param) {
     })]
   });
 }
+var defaultBarcodeIcon = /* @__PURE__ */_jsx(BarcodeIcon, {
+  size: 18
+});
+var defaultScanIcon = /* @__PURE__ */_jsx(CameraIcon, {
+  size: 18
+});
+var defaultStopIcon = /* @__PURE__ */_jsx(XIcon, {
+  size: 18
+});
 function Barcode(param) {
   var {
     name,
@@ -97,15 +148,16 @@ function Barcode(param) {
     disabled,
     readOnly,
     enableScan = true,
-    barcodeIcon,
-    scanIcon,
-    stopIcon,
+    barcodeIcon = defaultBarcodeIcon,
+    scanIcon = defaultScanIcon,
+    stopIcon = defaultStopIcon,
     skeleton,
     compact
   } = param;
   var {
     resolvedForm,
     knobProps,
+    control,
     id
   } = useFormField({
     form: formProp,
@@ -113,6 +165,10 @@ function Barcode(param) {
     compact
   });
   var resolvedValidators = useResolvedValidators(required, validators, label, name);
+  var areaFocusRing = ensureFocusVisibleRing({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2
+  });
   var iconProps = {
     barcodeIcon,
     scanIcon,
@@ -143,6 +199,9 @@ function Barcode(param) {
       size,
       knobProps,
       onBlur,
+      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+      // the sibling label/helper readable) — it needs the disabled state.
+      disabled,
       children: /* @__PURE__ */_jsx(BarcodeInput, {
         value: (_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : "",
         onValueChange: function onValueChange(v) {
@@ -152,8 +211,11 @@ function Barcode(param) {
         readOnly: !!readOnly,
         enableScan,
         knobProps,
+        areaFocusRing,
         required,
         hasError: !!error,
+        id,
+        hasLabel: Boolean(label),
         ...iconProps
       })
     });
@@ -176,6 +238,8 @@ function Barcode(param) {
         size,
         knobProps,
         onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
+        // LC-40: see standalone branch — FieldLayout carries dimWhole.
+        disabled,
         children: /* @__PURE__ */_jsx(BarcodeInput, {
           value: (_field_state_value = field.state.value) !== null && _field_state_value !== void 0 ? _field_state_value : "",
           onValueChange: function onValueChange(v) {
@@ -187,8 +251,11 @@ function Barcode(param) {
           readOnly: !!readOnly,
           enableScan,
           knobProps,
+          areaFocusRing,
           required,
           hasError: !!resolvedError,
+          id,
+          hasLabel: Boolean(label),
           ...iconProps
         })
       });

package/dist/esm/fields/Barcode/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useState","Text","View","Button","ControlGroup","Skeleton","Field","FieldLayout","Input","InputParts","formCommonColors","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","BarcodeScanner","BarcodeInput","param","value","onValueChange","disabled","readOnly","enableScan","knobProps","barcodeIcon","scanIcon","stopIcon","required","hasError","isScanning","setIsScanning","scanError","setScanError","children","size","sizeToken","width","Box","Icon","adornment","Area","onChangeText","placeholder","onPress","s","icon","theme","active","onScan","onError","onClose","body","color","error","fontSize","Barcode","name","form","formProp","validators","label","labelProps","helperText","id","idProp","defaultValue","onChange","onBlur","skeleton","compact","resolvedForm","resolvedValidators","iconProps","variant","height","_ref","v","field","_field_state_value","resolvedError","state","handleChange"],"sources":["../../../../src/fields/Barcode/index.tsx"],"sourcesContent":[null],"mappings":"AAEA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEzB,SAASC,QAAM,eAAY;AAC3B,SAASC,IAAA,EAAAC,IAAA,QAAc;AACvB,SAASC,MAAA,sCAAoB;AAC7B,SAASC,YAAA,QAAgB;AACzB,SAASC,QAAO,wCAAmB;AACnC,SAASC,KAAA,EAAAC,WAAS,qCAAkB;AACpC,SAASC,KAAA,IAAAC,UAAA,QAAwB;AACjC,SAAAC,gBAAA;AAAA,SACEC,aAAA,EAAAC,iBAAA,EAAAC,YAAA,EAAAC,qBAAA;AAAA,SACAC,cAAA;AAAA,SACAC,aAAAC,KAAA;EACA;IAAAC,KAAA;IAAAC,aAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAX,KAAA;EAAA,KACKY,UAAA,EAAAC,aAAA,IAAA9B,QAAA;EAEP,KAAA+B,SAAS,EAAAC,YAAA,CAAsB,GAAAhC,QAAA;EA+B3B,sBAIMH,KAAA,CAAAE,SAJN;IA7BJkC,QAAS,GACP,eAAAtC,IAAA,CAAAc,UAAA;MACAyB,IAAA,EAAAX,SAAA,CAAAY,SAAA;MACAF,QAAA,iBAAApC,KAAA,CAAAO,YAAA;QACA6B,QAAA,GACA,eAAAtC,IAAA,CAAAO,IAAA;UACAkC,KAAA;QACA,IACA,eAAAvC,KAAA,CAAAY,UAAA,CAAA4B,GAAA;UACAJ,QAAA,GACA,eAAAtC,IAAA,CAAAc,UAAA,CAAA6B,IAAA;YACAC,SAAA;YAaCN,QAAA,EAAAT;UACM,IACA,eAAuB7B,IAAI,CAAAc,UAAwB,CAAA+B,IAAI;YAG5DtB,KAAA;YACEuB,YAAC,EAAApB,QAAW,QAAM,IAAAF,aAChB;YACEE,QAAC;YACD,eAAC,EAAAA,QAAA,IACC;YAAAqB,WAAC,yBAAgB;YACjBtB,QAAA;YAAC,eAAW,EAAAO,QAAA;YAAX,gBAAAC,QAAA;UACC;QAEA,IACAN,UAAA,KAAAD,QAAe,kBAAY1B,IAAA,CAAAQ,MAAA;UAC3B+B,IAAA,EAAAX,SAAY,CAAAY,SAAA;UACZf,QAAA;UACAuB,OAAA,WAAeA,QAAA,EAAY;YAC3B,OAAAb,aAAc,WAAYc,CAAA;cAAA,QAAAA,CAAA;YAC5B;UACF;UACCC,IAAA,EAAchB,UAAC,GACdH,QAAA,GAAAD,QAAA;UAAC,IAAAI,UAAA;YAAAiB,KAAA;UACC,IAAM;UACN,cAAAjB,UAAA;QACA,oBAAelC,IAAA,CAAAO,IAAe;UAC9BkC,KAAM;QACL,CAAI;MACsC;IAC7C,IAEgB,eAGtBzC,IAAA,CAAAoB,cAAA;MACAgC,MAAA,EAAAlB,UAAA;MAACmB,MAAA,EAAA7B,aAAA;MAAA8B,OAAA,EAAAjB,YAAA;MACCkB,OAAA,EAAQ,SAAAA,QAAA;QACR,OAAQpB,aAAA;MACR;MACAP;IAAkC,EAClC,EAAAQ,SAAA,mBAAApC,IAAA,CAAAM,IAAA;MACF,GAAAsB,SAAA,CAAA4B,IAAA;MACCC,KAAA,EAAA1C,gBACC,CAAA2C,KAAC;MAILC,QAAA;MAEJrB,QAAA,EAAAF;IA8BO;EAEL;AAAM;AACN,SACAwB,QAAAtC,KAAA;EACA;IAAAuC,IAAA;IAAAC,IAAA,EAAAC,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAT,KAAA;IAAA1B,QAAA;IAAAO,IAAA;IAAA6B,EAAA,EAAAC,MAAA;IAAA9C,KAAA;IAAA+C,YAAA;IAAAC,QAAA;IAAAC,MAAA;IAAA/C,QAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAE,WAAA;IAAAC,QAAA;IAAAC,QAAA;IAAA0C,QAAA;IAAAC;EAAA,IAAApD,KAAA;EACA;IAAAqD,YAAA;IAAA/C,SAAA;IAAAwC;EAAA,IAAAlD,YAAA;IACA4C,IAAA,EAAAC,QAAA;IACAK,EAAA,EAAAC,MAAA;IACAK;EACA;EACA,IAAAE,kBAAA,GAAAzD,qBAAA,CAAAa,QAAA,EAAAgC,UAAA,EAAAC,KAAA,EAAAJ,IAAA;EACA,IAAAgB,SAAA;IACAhD,WAAA;IACAC,QAAA;IACAC;EACA;EACA,IAAA0C,QAAA,EAAa;IACb,sBAAAzE,IAAA,CAAAY,WAAA;MACAwD,EAAA;MACAH,KAAA;MACA1B,IAAA;MACAX,SAAA;MACeU,QAAA,iBAAAtC,IAAA,CAAAU,QAAA;QACToE,OAAE,WAAc;QAChBrC,KAAA;QAEAsC,MAAA,EAAAnD,SAAc,CAAAY;MAGhB;IACF;EAKF;EAEA,IAAI,CAACmC,YAAA,IAAgB,CAACd,IAAA,EAAM;IAC1B,IAAAmB,IACE;IAAA,OAAC,eAAAhF,IAAA,CAAAY,WAAA;MAAAwD,EAAA;MAAAH,KACC;MAAAC,UACA;MAAAR,KACA;MAAAS,UACA;MAAAnC,QACA;MAAAO,IACA;MAAAX,SACA;MAAA4C,MACA;MAAAlC,QACA,iBAAAtC,IAAA,CAAAqB,YAAA;QAEAE,KAAA,GAAAyD,IAAA,GAAAzD,KAAA,aAAAA,KAAA,cAAAA,KAAA,GAAA+C,YAAA,cAAAU,IAAA,cAAAA,IAAA;QAAAxD,aAAC,WAAAA,cAAAyD,CAAA;UAAA,KAAAxD,QAAA,KAAAC,QAAA,EAAA6C,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAAU,CAAA;QAAA;QAC6CxD,QAC5C,IAAAA,QAAgB;QACdC,QAAA,EAAI,CAAC,CAAAA,QAAA;QAAmCC,UAC1C;QAAAC,SACA;QAAYI,QACZ;QAAYC,QACZ,IAAAyB,KAAA;QAAA,GAAAmB;MACA;IACA;EACY;EACR,sBAAA7E,IAAA,CAAAW,KAAA;IAAAmD,IACN,EAAAa,YAAA;IAAAd,IAAA;IACFS,YAAA;IAEJN,UAAA,EAAAY,kBAAA;IAEAtC,QACE,WAAAA,SAAA4C,KAAA;MAAC,IAAAC,kBAAA;MAAA,IAAAC,aAAA,GAAApE,aAAA,CAAAkE,KAAA,EAAAxB,KAAA;MACC,OAAM,eAAA1D,IAAA,CAAAY,WAAA;QACNwD,EAAA;QACAH,KAAA;QACAC,UAAY;QAEXR,KAAA,EAAA0B,aAAW;QACVjB,UAAM;QACNnC,QACE;QAAAO,IAAC;QAAAX,SAAA;QAAA4C,MACC,EAAAvD,iBAAA,CAAAiE,KAAA,gBAAAV,MAAA;QAAAlC,QACA,iBAAAtC,IAAA,CAAAqB,YAAA;UAAAE,KACA,GAAA4D,kBAAA,GAAAD,KAAA,CAAAG,KAAA,CAAA9D,KAAA,cAAA4D,kBAAA,cAAAA,kBAAA;UAAA3D,aACO,WAAAA,cAAAyD,CAAA;YACP,IAAAxD,QAAA,IAAAC,QAAA;YACAwD,KAAA,CAAAI,YAAA,CAAAL,CAAA;YACAV,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAAU,CAAA;UAAA;UACAxD,QACA,EAAQ,EAAAA,QAAA;UAA6CC,QAErD,IAAAA,QAAA;UAAAC,UAAC;UAAAC,SAAA;UAAAI,QACC;UAAwCC,QACxC,IAAAmD,aAAgB;UACd,GAAAP;QACA;MACA;IAAY;EACd;AACY;AACA,SACZjB,OAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ensureFocusVisibleRing","BarcodeIcon","CameraIcon","XIcon","useRef","useState","Text","View","Button","ControlGroup","Skeleton","Field","FieldLayout","FocusContext","Input","InputParts","formCommonColors","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","t","BarcodeScanner","preflightCamera","suppressBoxFocusRing","focused","setFocused","_val","BarcodeInput","param","value","onValueChange","disabled","readOnly","enableScan","knobProps","areaFocusRing","barcodeIcon","scanIcon","stopIcon","required","hasError","id","hasLabel","isScanning","setIsScanning","scanError","setScanError","preflightingRef","activeScanIcon","handleScanPress","handleScanPress2","current","result","ok","reason","children","size","sizeToken","width","Box","Icon","adornment","Provider","Area","onChangeText","placeholder","focusStyle","focusVisibleStyle","onPress","icon","theme","active","onScan","onError","onClose","body","color","error","fontSize","defaultBarcodeIcon","defaultScanIcon","defaultStopIcon","Barcode","name","form","formProp","validators","label","labelProps","helperText","idProp","defaultValue","onChange","onBlur","skeleton","compact","resolvedForm","control","resolvedValidators","focusVisibleKnobProps","outlineOffset","iconProps","variant","height","_ref","v","Boolean","field","_field_state_value","resolvedError","state","handleChange"],"sources":["../../../../src/fields/Barcode/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Checkbox/Checkbox.mjs

@@ -1,12 +1,23 @@
 import { CheckIcon as CheckRegular, MinusIcon as MinusRegular } from "@phosphor-icons/react";
 import { useMemo } from "react";
-import { Checkbox as TamaguiCheckbox, Label, View, XStack, getVariable, useTheme } from "tamagui";
+import { Checkbox as TamaguiCheckbox, Label, View, XStack, getVariable, getVariableValue, isWeb, useTheme } from "tamagui";
+import { getSize } from "@tamagui/get-token";
+import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
 import { Field, FieldLayout } from "../../fieldLayout.mjs";
 import { formCommonColors, formControlColors } from "../../shared/colorRamps.mjs";
 import { clampRadiusForControl, clampRadiusInStateProps, getElevationWrapperProps, getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+function getCheckboxInlineGap(space) {
+  const inlineGapMap = {
+    none: "$1",
+    small: "$1.5",
+    medium: "$2",
+    large: "$2.5"
+  };
+  return inlineGapMap[space] || "$2";
+}
 function Checkbox({
   name,
   form: formProp,
@@ -22,6 +33,7 @@ function Checkbox({
   id: idProp,
   checked,
   defaultValue,
+  onChange,
   onCheckedChange,
   onBlur,
   checkboxProps,
@@ -30,12 +42,17 @@ function Checkbox({
   skeleton,
   compact
 }) {
+  const handleValueChange = val => {
+    onChange?.(val);
+    onCheckedChange?.(val);
+  };
   const {
     resolvedForm,
     knobProps,
     control,
     text,
     elevation,
+    disabledState,
     id
   } = useFormField({
     form: formProp,
@@ -60,13 +77,7 @@ function Checkbox({
     borderWidth: knobProps.borderRadius.borderWidth,
     borderRadius: cappedRadius
   };
-  const inlineGapMap = {
-    none: "$1",
-    small: "$1.5",
-    medium: "$2",
-    large: "$2.5"
-  };
-  const inlineGap = inlineGapMap[knobProps.space] || "$2";
+  const inlineGap = getCheckboxInlineGap(knobProps.space);
   const baseLabelColor = error ? formCommonColors.error : knobProps.textAccentColor;
   const labelHoverStyle = {
     color: baseLabelColor,
@@ -104,6 +115,54 @@ function Checkbox({
       })
     });
   };
+  const inTableCell = useIsInTableCell();
+  const targetSize = 44;
+  const glyphSize = Math.round(getVariableValue(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 glyphBox = currentChecked => /* @__PURE__ */jsx(View, {
+    width: glyphSize,
+    height: glyphSize,
+    ...knobProps.inputSurface,
+    ...resolvedRadius,
+    backgroundColor: knobProps.outlined ? "transparent" : formControlColors.background,
+    borderColor: formControlColors.border,
+    alignItems: "center",
+    justifyContent: "center",
+    children: renderIndicator(currentChecked)
+  });
+  const renderControlContent = currentChecked => elevationWrapperProps.elevation && !inTableCell ? /* @__PURE__ */jsx(View, {
+    borderRadius: resolvedRadius.borderRadius ?? knobProps.borderRadius.borderRadius,
+    ...elevationWrapperProps,
+    children: glyphBox(currentChecked)
+  }) : glyphBox(currentChecked);
+  const nativeCheckboxA11y = errorText => isWeb ? void 0 : {
+    accessible: true,
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    ...(typeof label === "string" ? {
+      accessibilityLabel: `${label}${required ? " *" : ""}`
+    } : void 0),
+    ...(errorText || helperText ? {
+      accessibilityHint: errorText ?? helperText
+    } : void 0)
+  };
   if (skeleton) {
     return /* @__PURE__ */jsx(FieldLayout, {
       id,
@@ -111,15 +170,22 @@ function Checkbox({
       knobProps,
       compactSpacing: true,
       children: /* @__PURE__ */jsxs(XStack, {
-        gap: "$2",
+        gap: inlineGap,
         alignItems: "center",
-        children: [/* @__PURE__ */jsx(Skeleton, {
-          variant: "rounded",
-          width: 20,
-          height: 20
+        children: [/* @__PURE__ */jsx(View, {
+          width: targetSize,
+          height: targetSize,
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */jsx(Skeleton, {
+            variant: "rounded",
+            width: 20,
+            height: 20,
+            borderRadius: cappedRadius
+          })
         }), label && /* @__PURE__ */jsx(Skeleton, {
           variant: "text",
-          width: "40%",
+          width: 96,
           height: 14
         })]
       })
@@ -129,41 +195,36 @@ function Checkbox({
     const isControlled = checked !== void 0;
     const needsFieldLayout = !!(error || helperText);
     const checkboxEl = /* @__PURE__ */jsx(CheckboxFieldFrame, {
-      ...knobProps.inputSurface,
       size: resolvedSize,
-      ...resolvedRadius,
-      outlined: knobProps.outlined,
       transition: knobProps.transition,
       ...(clampRadiusInStateProps(control.hoverKnobProps, 2) && {
         hoverStyle: {
-          backgroundColor: formControlColors.background,
-          borderColor: formControlColors.border,
+          ...stateBaseStyle,
           ...clampRadiusInStateProps(control.hoverKnobProps, 2)
         }
       }),
       ...(clampRadiusInStateProps(control.pressKnobProps, 2) && {
         pressStyle: {
-          backgroundColor: formControlColors.background,
-          borderColor: formControlColors.border,
+          ...stateBaseStyle,
           ...clampRadiusInStateProps(control.pressKnobProps, 2)
         }
       }),
       ...(clampRadiusInStateProps(control.focusKnobProps, 2) && {
         focusStyle: {
-          backgroundColor: formControlColors.background,
-          borderColor: formControlColors.border,
+          ...stateBaseStyle,
           ...clampRadiusInStateProps(control.focusKnobProps, 2)
         }
       }),
       ...(clampRadiusInStateProps(control.focusVisibleKnobProps, 2) && {
         focusVisibleStyle: {
-          backgroundColor: formControlColors.background,
-          borderColor: formControlColors.border,
+          ...stateBaseStyle,
           ...clampRadiusInStateProps(control.focusVisibleKnobProps, 2)
         }
       }),
+      ...targetFrameProps,
       ...checkboxProps,
       disabled,
+      ...(disabled ? disabledState.chromeKnobProps : void 0),
       id,
       ...(isControlled ? {
         checked
@@ -178,20 +239,16 @@ function Checkbox({
       } : void 0),
       "aria-required": required || void 0,
       "aria-invalid": !!error || void 0,
+      ...nativeCheckboxA11y(typeof error === "string" && error ? error : void 0),
       onCheckedChange: val => {
         if (disabled || readOnly) return;
-        onCheckedChange?.(val);
+        handleValueChange(val);
       },
       ...(onBlur ? {
         onBlur
       } : void 0),
-      children: renderIndicator(checked ?? defaultValue)
+      children: renderControlContent(checked ?? defaultValue)
     });
-    const checkboxControl = elevationWrapperProps.elevation ? /* @__PURE__ */jsx(View, {
-      borderRadius: resolvedRadius.borderRadius ?? knobProps.borderRadius.borderRadius,
-      ...elevationWrapperProps,
-      children: checkboxEl
-    }) : checkboxEl;
     const hasElevation = !!elevationWrapperProps.elevation;
     const checkboxRow = /* @__PURE__ */jsxs(XStack, {
       gap: inlineGap,
@@ -199,7 +256,11 @@ function Checkbox({
       ...(hasElevation && {
         overflow: "visible"
       }),
-      children: [checkboxControl, label && /* @__PURE__ */jsxs(Label, {
+      ...(disabled && !needsFieldLayout ? disabledState.assemblyKnobProps : void 0),
+      ...(disabled && !needsFieldLayout ? {
+        "data-disabled-dimmed": disabledState.style === "dimWhole" ? "true" : "false"
+      } : void 0),
+      children: [checkboxEl, label && /* @__PURE__ */jsxs(Label, {
         htmlFor: id,
         size: size || "$true",
         ...knobProps.textWeight,
@@ -208,7 +269,7 @@ function Checkbox({
         pressStyle: labelPressStyle,
         focusStyle: labelFocusStyle,
         focusVisibleStyle: labelFocusVisibleStyle,
-        paddingRight: "$1",
+        paddingInlineEnd: "$1",
         ...labelProps,
         children: [label, required && " *"]
       })]
@@ -220,6 +281,7 @@ function Checkbox({
       helperText,
       size,
       knobProps,
+      disabled,
       children: checkboxRow
     });
   }
@@ -254,6 +316,7 @@ function Checkbox({
         helperText,
         size,
         knobProps,
+        disabled,
         children: /* @__PURE__ */jsxs(XStack, {
           gap: inlineGap,
           alignItems: "center",
@@ -262,41 +325,36 @@ function Checkbox({
           }),
           children: [(() => {
             const checkboxElement = /* @__PURE__ */jsx(CheckboxFieldFrame, {
-              ...knobProps.inputSurface,
               size: resolvedSize,
-              ...resolvedRadius,
-              outlined: knobProps.outlined,
               transition: knobProps.transition,
               ...(clampRadiusInStateProps(control.hoverKnobProps, 2) && {
                 hoverStyle: {
-                  backgroundColor: formControlColors.background,
-                  borderColor: formControlColors.border,
+                  ...stateBaseStyle,
                   ...clampRadiusInStateProps(control.hoverKnobProps, 2)
                 }
               }),
               ...(clampRadiusInStateProps(control.pressKnobProps, 2) && {
                 pressStyle: {
-                  backgroundColor: formControlColors.background,
-                  borderColor: formControlColors.border,
+                  ...stateBaseStyle,
                   ...clampRadiusInStateProps(control.pressKnobProps, 2)
                 }
               }),
               ...(clampRadiusInStateProps(control.focusKnobProps, 2) && {
                 focusStyle: {
-                  backgroundColor: formControlColors.background,
-                  borderColor: formControlColors.border,
+                  ...stateBaseStyle,
                   ...clampRadiusInStateProps(control.focusKnobProps, 2)
                 }
               }),
               ...(clampRadiusInStateProps(control.focusVisibleKnobProps, 2) && {
                 focusVisibleStyle: {
-                  backgroundColor: formControlColors.background,
-                  borderColor: formControlColors.border,
+                  ...stateBaseStyle,
                   ...clampRadiusInStateProps(control.focusVisibleKnobProps, 2)
                 }
               }),
+              ...targetFrameProps,
               ...checkboxProps,
               disabled,
+              ...(disabled ? disabledState.chromeKnobProps : void 0),
               id,
               checked: resolvedChecked,
               ...(readOnly ? {
@@ -307,20 +365,17 @@ function Checkbox({
               } : void 0),
               "aria-required": required || void 0,
               "aria-invalid": !!resolvedError || void 0,
+              ...nativeCheckboxA11y(typeof resolvedError === "string" && resolvedError ? resolvedError : void 0),
               onCheckedChange: newChecked => {
                 if (disabled || readOnly) return;
                 const fieldValue = newChecked === "indeterminate" ? false : newChecked === true;
                 field.handleChange(fieldValue);
-                onCheckedChange?.(newChecked);
+                handleValueChange(newChecked);
               },
               onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
-              children: renderIndicator(resolvedChecked)
+              children: renderControlContent(resolvedChecked)
             });
-            return elevationWrapperProps.elevation ? /* @__PURE__ */jsx(View, {
-              borderRadius: resolvedRadius.borderRadius ?? knobProps.borderRadius.borderRadius,
-              ...elevationWrapperProps,
-              children: checkboxElement
-            }) : checkboxElement;
+            return checkboxElement;
           })(), label && /* @__PURE__ */jsxs(Label, {
             htmlFor: id,
             size: size || "$true",
@@ -330,7 +385,7 @@ function Checkbox({
             pressStyle: resolvedLabelPressStyle,
             focusStyle: resolvedLabelFocusStyle,
             focusVisibleStyle: resolvedLabelFocusVisibleStyle,
-            paddingRight: "$1",
+            paddingInlineEnd: "$1",
             ...labelProps,
             children: [label, required && " *"]
           })]
@@ -339,5 +394,5 @@ function Checkbox({
     }
   });
 }
-export { Checkbox };
+export { Checkbox, getCheckboxInlineGap };
 //# sourceMappingURL=Checkbox.mjs.map