@multiplatform.one/forms 6.0.4 → 6.3.0

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

@@ -31,6 +31,7 @@ var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_Checkbox = require("./Checkbox.cjs");
+var import_CheckboxCard = require("./CheckboxCard.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function CheckboxGroup({
   name,
@@ -47,6 +48,7 @@ function CheckboxGroup({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   options,
@@ -54,11 +56,17 @@ function CheckboxGroup({
   checkboxProps,
   children,
   skeleton,
-  compact
+  compact,
+  card
 }) {
+  const handleValueChange = newValues => {
+    onChange?.(newValues);
+    onValueChange?.(newValues);
+  };
   const {
     resolvedForm,
     knobProps,
+    disabledState,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -66,9 +74,13 @@ function CheckboxGroup({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const [internalValues, setInternalValues] = (0, import_react.useState)(defaultValue ?? []);
   if (skeleton) {
     const optionCount = options?.length ?? 3;
     const Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    const inlineGap = (0, import_Checkbox.getCheckboxInlineGap)(knobProps.space);
+    const controlRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, 2);
+    const labelWidths = [88, 64, 76];
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
@@ -79,15 +91,22 @@ function CheckboxGroup({
         children: Array.from({
           length: optionCount
         }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
+          gap: inlineGap,
           alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-            variant: "rounded",
-            width: 20,
-            height: 20
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            width: 44,
+            height: 44,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              variant: "rounded",
+              width: 20,
+              height: 20,
+              borderRadius: controlRadius
+            })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
             variant: "text",
-            width: "50%",
+            width: labelWidths[i % labelWidths.length],
             height: 14
           })]
         }, i))
@@ -104,10 +123,67 @@ function CheckboxGroup({
     if (children) return children;
     if (!options) return null;
     const Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    if (card) {
+      const layout = (0, import_CheckboxCard.getCheckboxCardLayout)(knobProps.space);
+      const descriptionSize = (0, import_CheckboxCard.getCardDescriptionSize)(size || knobProps.sizeToken);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container, {
+        gap: "$2",
+        children: options.map((option, index) => {
+          const itemId = `${id}-${index}-${option.value}`;
+          const labelId = `${itemId}-label`;
+          const descriptionId = option.description ? `${itemId}-description` : void 0;
+          const isChecked = currentValues.includes(option.value);
+          const isDisabled = disabled || option.disabled;
+          const emit = newValues => {
+            handleChange?.(newValues);
+            handleValueChange(newValues);
+          };
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxCard.CheckboxCardFrame, {
+            active: isChecked,
+            ...layout,
+            borderRadius: knobProps.borderRadius.borderRadius,
+            ...(isDisabled ? disabledState.chromeKnobProps : void 0),
+            onPress: () => {
+              if (isDisabled || readOnly) return;
+              emit(toggleValue(currentValues, option.value, !isChecked));
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+              id: itemId,
+              checked: isChecked,
+              onCheckedChange: checked => {
+                if (isDisabled || readOnly) return;
+                emit(toggleValue(currentValues, option.value, checked));
+              },
+              disabled: isDisabled,
+              readOnly,
+              size,
+              checkboxProps: {
+                ...checkboxProps,
+                "aria-labelledby": labelId,
+                ...(descriptionId && {
+                  "aria-describedby": descriptionId
+                })
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxCard.CheckboxCardContent, {
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardLabel, {
+                id: labelId,
+                size: size || knobProps.sizeToken,
+                fontWeight: "600",
+                children: option.label
+              }), option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardDescription, {
+                id: descriptionId,
+                size: descriptionSize,
+                children: option.description
+              }) : null]
+            })]
+          }, `${index}-${option.value}`);
+        })
+      });
+    }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container, {
       gap: "$2",
-      children: options.map(option => {
-        const itemId = `${id}-${option.value}`;
+      children: options.map((option, index) => {
+        const itemId = `${id}-${index}-${option.value}`;
         const isChecked = currentValues.includes(option.value);
         const isDisabled = disabled || option.disabled;
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
@@ -118,18 +194,18 @@ function CheckboxGroup({
             if (isDisabled || readOnly) return;
             const newValues = toggleValue(currentValues, option.value, checked);
             handleChange?.(newValues);
-            onValueChange?.(newValues);
+            handleValueChange(newValues);
           },
           disabled: isDisabled,
           readOnly,
           size,
           checkboxProps
-        }, option.value);
+        }, `${index}-${option.value}`);
       })
     });
   };
   if (!resolvedForm || !name) {
-    const currentValues = value ?? defaultValue ?? [];
+    const currentValues = value ?? internalValues;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
@@ -140,7 +216,8 @@ function CheckboxGroup({
       size,
       knobProps,
       onBlur,
-      children: renderItems(currentValues, onValueChange)
+      disabled,
+      children: renderItems(currentValues, setInternalValues)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -162,6 +239,7 @@ function CheckboxGroup({
         size,
         knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        disabled,
         children: renderItems(currentValues, newValues => {
           field.handleChange(newValues);
         })

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

@@ -34,6 +34,7 @@ var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_Checkbox = require("./Checkbox.native.js");
+var import_CheckboxCard = require("./CheckboxCard.native.js");
 function CheckboxGroup(param) {
   var {
     name,
@@ -50,6 +51,7 @@ function CheckboxGroup(param) {
     id: idProp,
     value,
     defaultValue,
+    onChange,
     onValueChange,
     onBlur,
     options,
@@ -57,11 +59,17 @@ function CheckboxGroup(param) {
     checkboxProps,
     children,
     skeleton,
-    compact
+    compact,
+    card
   } = param;
+  var handleValueChange = function handleValueChange2(newValues) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValues);
+  };
   var {
     resolvedForm,
     knobProps,
+    disabledState,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -69,10 +77,14 @@ function CheckboxGroup(param) {
     compact
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var [internalValues, setInternalValues] = (0, import_react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
   if (skeleton) {
     var _ref;
     var optionCount = (_ref = options === null || options === void 0 ? void 0 : options.length) !== null && _ref !== void 0 ? _ref : 3;
     var Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    var inlineGap = (0, import_Checkbox.getCheckboxInlineGap)(knobProps.space);
+    var controlRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, 2);
+    var labelWidths = [88, 64, 76];
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
@@ -84,15 +96,23 @@ function CheckboxGroup(param) {
           length: optionCount
         }, function (_, i) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
+            gap: inlineGap,
             alignItems: "center",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-              variant: "rounded",
-              width: 20,
-              height: 20
+            children: [/* Mirror the 44px pressable target box around the 20px glyph */
+            /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              width: 44,
+              height: 44,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+                variant: "rounded",
+                width: 20,
+                height: 20,
+                borderRadius: controlRadius
+              })
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
               variant: "text",
-              width: "50%",
+              width: labelWidths[i % labelWidths.length],
               height: 14
             })]
           }, i);
@@ -112,10 +132,76 @@ function CheckboxGroup(param) {
     if (children) return children;
     if (!options) return null;
     var Container2 = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    if (card) {
+      var layout = (0, import_CheckboxCard.getCheckboxCardLayout)(knobProps.space);
+      var descriptionSize = (0, import_CheckboxCard.getCardDescriptionSize)(size || knobProps.sizeToken);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container2, {
+        gap: "$2",
+        children: options.map(function (option, index) {
+          var itemId = `${id}-${index}-${option.value}`;
+          var labelId = `${itemId}-label`;
+          var descriptionId = option.description ? `${itemId}-description` : void 0;
+          var isChecked = currentValues2.includes(option.value);
+          var isDisabled = disabled || option.disabled;
+          var emit = function emit2(newValues) {
+            handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValues);
+            handleValueChange(newValues);
+          };
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxCard.CheckboxCardFrame, {
+            active: isChecked,
+            ...layout,
+            borderRadius: knobProps.borderRadius.borderRadius,
+            // LC-40: selection cards dim as chrome (label rides the card).
+            ...(isDisabled ? disabledState.chromeKnobProps : void 0),
+            // Whole card toggles. Clicking the checkbox itself fires both
+            // this and the checkbox's own handler; both compute the same
+            // next value from the same render, so the double emit is
+            // idempotent (same pattern as the compound FocusGroup.Item).
+            onPress: function onPress() {
+              if (isDisabled || readOnly) return;
+              emit(toggleValue(currentValues2, option.value, !isChecked));
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+              id: itemId,
+              checked: isChecked,
+              onCheckedChange: function onCheckedChange(checked) {
+                if (isDisabled || readOnly) return;
+                emit(toggleValue(currentValues2, option.value, checked));
+              },
+              disabled: isDisabled,
+              readOnly,
+              size,
+              checkboxProps: {
+                ...checkboxProps,
+                "aria-labelledby": labelId,
+                ...(descriptionId && {
+                  "aria-describedby": descriptionId
+                })
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxCard.CheckboxCardContent, {
+              children: [
+              /* fontWeight after size: the size variant's font weight
+              would otherwise override the styled bold default */
+              /* @__PURE__ */
+              (0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardLabel, {
+                id: labelId,
+                size: size || knobProps.sizeToken,
+                fontWeight: "600",
+                children: option.label
+              }), option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardDescription, {
+                id: descriptionId,
+                size: descriptionSize,
+                children: option.description
+              }) : null]
+            })]
+          }, `${index}-${option.value}`);
+        })
+      });
+    }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container2, {
       gap: "$2",
-      children: options.map(function (option) {
-        var itemId = `${id}-${option.value}`;
+      children: options.map(function (option, index) {
+        var itemId = `${id}-${index}-${option.value}`;
         var isChecked = currentValues2.includes(option.value);
         var isDisabled = disabled || option.disabled;
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
@@ -126,19 +212,18 @@ function CheckboxGroup(param) {
             if (isDisabled || readOnly) return;
             var newValues = toggleValue(currentValues2, option.value, checked);
             handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValues);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValues);
+            handleValueChange(newValues);
           },
           disabled: isDisabled,
           readOnly,
           size,
           checkboxProps
-        }, option.value);
+        }, `${index}-${option.value}`);
       })
     });
   };
   if (!resolvedForm || !name) {
-    var _ref1;
-    var currentValues = (_ref1 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref1 !== void 0 ? _ref1 : [];
+    var currentValues = value !== null && value !== void 0 ? value : internalValues;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
@@ -149,7 +234,10 @@ function CheckboxGroup(param) {
       size,
       knobProps,
       onBlur,
-      children: renderItems(currentValues, onValueChange)
+      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+      // the sibling label/helper readable) — it needs the disabled state.
+      disabled,
+      children: renderItems(currentValues, setInternalValues)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -172,6 +260,8 @@ function CheckboxGroup(param) {
         size,
         knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        // LC-40: see standalone branch — FieldLayout carries dimWhole.
+        disabled,
         children: renderItems(currentValues2, function (newValues) {
           field.handleChange(newValues);
         })

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CheckboxGroup_exports","__export","CheckboxGroup","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_fieldLayout","import_Skeleton","import_utils","import_Checkbox","param","name","form","formProp","validators","label","labelProps","helperText","error","required","disabled","readOnly","size","id","idProp","defaultValue","onValueChange","onBlur","options","orientation","checkboxProps","children","skeleton","compact","resolvedForm","knobProps","useFormField","resolvedValidators","useResolvedValidators","_ref","optionCount","length","Container","XStack","YStack","jsx","FieldLayout","gap","Array","from","_","i","jsxs","alignItems","Skeleton","variant","width","height","toggleValue","useCallback","currentValues2","optionValue","checked","filter","v","renderItems","renderItems2","handleChange","Container2","map","option","itemId","isChecked","includes","isDisabled","Checkbox","onCheckedChange","newValues","_ref1","currentValues","Field","children2","field","_field_state_value","resolvedError","getFieldError","fieldValues","state","mergeFieldHandler"],"sources":["../../../../src/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAA4B,CAAAK,qBAAA;AAO5B,IAAAK,kBAA+B,GAAAC,OAAA;AAC/B,IAAAC,YAAA,GAAAD,OAAmC;AACnC,IAAAE,cAAA,GAAAF,OAAyB;AAEzB,IAAAG,kBAKO,GAAAH,OAAA;AACP,IAAAI,eAAA,GAAyBJ,OAAA;AAwEb,IAAAK,YAAA,GAAAL,OAAA;AAtCL,IAAAM,eAAS,GAAAN,OAAc;AAAA,SAC5BJ,cAAAW,KAAA;EACA;IAAMC,IAAA;IAAAC,IAAA,EAAAC,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,IAAA;IAAAC,EAAA,EAAAC,MAAA;IAAA5B,KAAA;IAAA6B,YAAA;IAAAC,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,WAAA;IAAAC,aAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAvB,KAAA;EACN;IAAAwB,YAAA;IAAAC,SAAA;IAAAZ;EAAA,QAAAf,YAAA,CAAA4B,YAAA;IACAxB,IAAA,EAAAC,QAAA;IACAU,EAAA,EAAAC,MAAA;IACAS;EACA;EACA,IAAAI,kBAAA,OAAA7B,YAAA,CAAA8B,qBAAA,EAAAnB,QAAA,EAAAL,UAAA,EAAAC,KAAA,EAAAJ,IAAA;EACA,IAAAqB,QAAA;IACA,IAAAO,IAAA;IACA,IAAAC,WAAA,IAAAD,IAAA,GAAAX,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAAAa,MAAA,cAAAF,IAAA,cAAAA,IAAA;IACA,IAAIG,SAAA,GAAAb,WAAA,oBAAAxB,cAAA,CAAAsC,MAAA,GAAAtC,cAAA,CAAAuC,MAAA;IACJ,0BAAA1C,kBAAA,CAAA2C,GAAA,EAAAvC,kBAAA,CAAAwC,WAAA;MACAvB,EAAA;MACAR,KAAA;MACAO,IAAA;MACAa,SAAA;MACAJ,QAAA,EAAc,mBAAA7B,kBAAA,CAAA2C,GAAA,EAAAH,SAAA;QACdK,GAAA;QACAhB,QAAA,EAAAiB,KAAA,CAAAC,IAAA;UACAR,MAAA,EAAAD;QACA,aAAAU,CAAA,EAAAC,CAAA;UACqB,0BAAAjD,kBAAA,CAAAkD,IAAA,EAAA/C,cAAA,CAAAsC,MAAA;YACbI,GAAA;YACAM,UAAA;YACFtB,QAAA,GACJ,mBAAA7B,kBAAA,CAAA2C,GAAA,EAAAtC,eAAA,CAAA+C,QAAA;cACDC,OAAA;cACKC,KAAA;cAEQC,MAAA;YACN,IACA,eAAY,IAAAvD,kBAAgB,CAAe2C,GAAA,EAAAtC,eAAA,CAAA+C,QAAS;cAExDC,OAAA;cAIQC,KAAA;cACAC,MAAA;YAGN;UAKA,GAAAN,CAAA;QACH;MACC;IACE;EAAqC;EAEvC,IAAAO,WAAO,OAAAtD,YAAsB,CAAAuD,WAAY,YAAWC,cAAA,EAAAC,WAAA,EAAAC,OAAA;IACtD,IAAAA,OAAA;MACC,QACH,GAAAF,cAAA,EAEMC,WAAA,CACJ;IACA;IAEA,OAAMD,cAAY,CAAAG,MAAA,WAAgBC,CAAA;MAElC,OACEA,CAAA,KAAAH,WAAA;IAEI;EACA;EACA,IAAAI,WAAM,YAAaC,YAAYA,CAAAN,cAAO,EAAAO,YAAA;IAEtC,IAAApC,QACE,SAAAA,QAAA;IAAA,IAAC,CAAAH,OAAA;IAAA,IAAAwC,UAAA,GAAAvC,WAAA,oBAAAxB,cAAA,CAAAsC,MAAA,GAAAtC,cAAA,CAAAuC,MAAA;IAAA,OAEC,eAAc,IAAA1C,kBAAA,CAAA2C,GAAA,EAAAuB,UAAA;MAAArB,GAAA,EACd,IAAI;MAAAhB,QACJ,EAAAH,OAAS,CAAAyC,GAAA,WAAAC,MAAA;QAAA,IACTC,MAAA,MAAAhD,EAAA,IAAkB+C,MAAA,CAAA1E,KAAY;QAC5B,IAAA4E,SAAI,GAAAZ,cAAc,CAAUa,QAAA,CAAAH,MAAA,CAAA1E,KAAA;QAC5B,IAAA8E,UAAM,GAAAtD,QAAY,IAAAkD,MAAY,CAAAlD,QAAA;QAC9B,sBAAe,IAAAlB,kBAAS,CAAA2C,GAAA,EAAApC,eAAA,CAAAkE,QAAA;UACxB5D,KAAA,EAAAuD,MAAA,CAAAvD,KAAgB;UAClBQ,EAAA,EAAAgD,MAAA;UACAT,OAAA,EAAAU,SAAU;UACVI,eAAA,WAAAA,gBAAAd,OAAA;YACA,IAAAY,UAAA,IAAArD,QAAA;YACA,IAAAwD,SAAA,GAAAnB,WAAA,CAAAE,cAAA,EAAAU,MAAA,CAAA1E,KAAA,EAAAkE,OAAA;YAAAK,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAAU,SAAA;YAbKnD,aAAO,aAAAA,aAAA,uBAAAA,aAAA,CAAAmD,SAAA;UAcd;UAGNzD,QAAA,EAAAsD,UAAA;UAEJrD,QAAA;UAEKC,IAAA;UACGQ;QACN,GACEwC,MAAA,CAAA1E,KAAA;MAAC;IAAA;EAAA;EACC,KAAAsC,YACA,KAAAvB,IAAA;IAAA,IACAmE,KAAA;IAAA,IACAC,aAAA,IAAAD,KAAA,GAAAlF,KAAA,aAAAA,KAAA,cAAAA,KAAA,GAAA6B,YAAA,cAAAqD,KAAA,cAAAA,KAAA;IAAA,OACA,mBAAA5E,kBAAA,CAAA2C,GAAA,EAAAvC,kBAAA,CAAAwC,WAAA;MAAAvB,EACA;MAAAR,KACA;MAAAC,UACA;MAAAE,KACA;MAAAC,QAEC;MAAwCF,UAAA;MAC3CK,IAAA;MAEJa,SAAA;MAEAR,MACE;MAACI,QAAA,EAAAkC,WAAA,CAAAc,aAAA,EAAArD,aAAA;IAAA;EAAA;EACO,OACN,mBAAAxB,kBAAA,CAAA2C,GAAA,EAAAvC,kBAAA,CAAA0E,KAAA;IAAApE,IACA,EAAAsB,YAAc;IAAiBvB,IAC/B;IAAYc,YAEX,EAACA,YAAU,aAAAA,YAAA,cAAAA,YAAA;IACVX,UAAM,EAAAuB,kBAAgB;IACtBN,QAAA,EAAM,SAAAkD,SAAeA,CAAAC,KAAM,EAAM;MACjC,IAAAC,kBAAM;MAEN,IAAAC,aACE,OAAA5E,YAAA,CAAA6E,aAAA,EAAAH,KAAA,EAAAhE,KAAA;MAAA,IAACoE,WAAA,IAAAH,kBAAA,GAAAD,KAAA,CAAAK,KAAA,CAAA3F,KAAA,cAAAuF,kBAAA,cAAAA,kBAAA;MAAA,IAAAvB,cAAA,GAAAhE,KAAA,cAAAA,KAAA,GAAA0F,WAAA;MAAA,OACC,mBAAApF,kBAAA,CAAA2C,GAAA,EAAAvC,kBAAA,CAAAwC,WAAA;QAAAvB,EAAA;QACAR,KACA;QAAAC,UACA;QAAOE,KACP,EAAAkE,aAAA;QAAAjE,QACA;QAAAF,UACA;QAAAK,IACA;QAAAa,SACA;QAAqDR,MAEpD,MAAAnB,YAAA,CAAAgF,iBAA4B,EAAAN,KAAA,cAAc,EAAAvD,MAAA;QACzCI,QAAA,EAAAkC,WAAM,CAAAL,cAA6B,YAAAiB,SAAA;UAAAK,KACpC,CAAAf,YAAA,CAAAU,SAAA;QAAA;MAAA,EACH;IAAA;EAEJ;AAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CheckboxGroup_exports","__export","CheckboxGroup","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_fieldLayout","import_Skeleton","import_utils","import_Checkbox","import_CheckboxCard","param","name","form","formProp","validators","label","labelProps","helperText","error","required","disabled","readOnly","size","id","idProp","defaultValue","onChange","onValueChange","onBlur","options","orientation","checkboxProps","children","skeleton","compact","card","handleValueChange","handleValueChange2","newValues","resolvedForm","knobProps","disabledState","useFormField","resolvedValidators","useResolvedValidators","internalValues","setInternalValues","useState","_ref","optionCount","length","Container","XStack","YStack","inlineGap","getCheckboxInlineGap","space","controlRadius","clampRadiusForControl","borderRadius","labelWidths","jsx","FieldLayout","gap","Array","from","_","i","jsxs","alignItems","View","width","height","justifyContent","Skeleton","variant","toggleValue","useCallback","currentValues2","optionValue","checked","filter","v","renderItems","renderItems2","handleChange","Container2","layout","getCheckboxCardLayout","descriptionSize","getCardDescriptionSize","sizeToken","map","option","index","itemId","labelId","descriptionId","description","isChecked","includes","isDisabled","emit","emit2","CheckboxCardFrame","active","chromeKnobProps","onPress","Checkbox","onCheckedChange","CheckboxCardContent","CheckboxCardLabel","fontWeight","CheckboxCardDescription","currentValues","Field","children2","field","_field_state_value","resolvedError","getFieldError","fieldValues","state"],"sources":["../../../../src/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -32,9 +32,11 @@ 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_colorRamps = require("../../shared/colorRamps.cjs");
+var import_get_token = require("@tamagui/get-token");
+var import_CheckboxCard = require("./CheckboxCard.cjs");
 var import_CheckboxFieldFrame = require("./CheckboxFieldFrame.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_Checkbox = require("./Checkbox.cjs");
 var import_CheckboxGroup = require("./CheckboxGroup.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -44,14 +46,26 @@ const CheckboxesContext = (0, import_tamagui.createStyledContext)({
 });
 const FocusGroup = (0, import_react2.forwardRef)((props, ref) => {
   const {
-    knobProps
+    knobProps,
+    control
   } = (0, import_theme.useResolvedKnobs)();
+  const groupRing = (0, import_theme.ensureFocusVisibleRing)({
+    ...control.focusVisibleKnobProps
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
     gap: knobProps.gap.gap,
     focusable: true,
     outlineOffset: 1,
     focusStyle: {
-      zIndex: 1
+      zIndex: 1,
+      ...groupRing
+    },
+    focusVisibleStyle: {
+      zIndex: 1,
+      ...groupRing
+    },
+    focusWithinStyle: {
+      ...groupRing
     },
     ...props,
     ref
@@ -74,7 +88,12 @@ const FocusGroupItem = (0, import_react2.forwardRef)((itemProps, ref) => {
     outlineOffset: 1,
     flexShrink: 1,
     focusStyle: {
-      zIndex: 1
+      zIndex: 1,
+      ...(0, import_theme.ensureFocusVisibleRing)()
+    },
+    focusVisibleStyle: {
+      zIndex: 1,
+      ...(0, import_theme.ensureFocusVisibleRing)()
     },
     ...(import_tamagui.isWeb && {
       onKeyDown: e => {
@@ -128,6 +147,7 @@ const CheckboxesCheckbox = import_tamagui.Checkbox.styleable((checkboxProps, ref
   const {
     checked: _userChecked,
     onCheckedChange: onCheckedChangeProp,
+    children,
     ...props
   } = checkboxProps;
   const {
@@ -149,7 +169,13 @@ const CheckboxesCheckbox = import_tamagui.Checkbox.styleable((checkboxProps, ref
     borderWidth: knobProps.borderRadius.borderWidth,
     borderRadius: cappedRadius
   };
+  const glyphSize = Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(knobProps.sizeToken)) * 0.45);
+  const hasName = props["aria-label"] || props["aria-labelledby"];
+  const fallbackName = focusItemValue ? focusItemValue.replace(/[-_]+/g, " ").replace(/^\w/, c => c.toUpperCase()) : void 0;
   const combinedProps = {
+    ...(!hasName && fallbackName ? {
+      "aria-label": fallbackName
+    } : void 0),
     ...props,
     checked: values[focusItemValue],
     onCheckedChange: checked => {
@@ -163,35 +189,53 @@ const CheckboxesCheckbox = import_tamagui.Checkbox.styleable((checkboxProps, ref
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
     ref,
     value: focusItemValue,
-    ...knobProps.inputSurface,
     size: knobProps.sizeToken,
-    ...resolvedRadius,
-    outlined: knobProps.outlined,
     transition: knobProps.transition,
-    ...combinedProps
+    width: 44,
+    height: 44,
+    minWidth: 44,
+    minHeight: 44,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+    hoverStyle: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    pressStyle: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    focusStyle: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    focusVisibleStyle: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      ...(0, import_theme.ensureFocusVisibleRing)()
+    },
+    activeStyle: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    ...combinedProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: glyphSize,
+      height: glyphSize,
+      ...knobProps.inputSurface,
+      ...resolvedRadius,
+      backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formControlColors.background,
+      borderColor: import_colorRamps.formControlColors.border,
+      alignItems: "center",
+      justifyContent: "center",
+      children
+    })
   });
 });
-const CheckboxCardFrame = (0, import_tamagui.styled)(import_tamagui.View, {
-  cursor: "pointer",
-  width: "100%",
-  padding: "$3",
-  borderRadius: "$4",
-  backgroundColor: import_colorRamps.formCardColors.background.base,
-  borderColor: import_colorRamps.formCardColors.border.base,
-  borderWidth: 1,
-  hoverStyle: {
-    borderColor: import_colorRamps.formCardColors.border.hover
-  },
-  variants: {
-    active: {
-      true: {
-        backgroundColor: import_colorRamps.formCardColors.background.active,
-        borderColor: import_colorRamps.formCardColors.border.active
-      }
-    }
-  }
-});
-const CheckboxCard = CheckboxCardFrame.styleable((cardProps, ref) => {
+const CheckboxCard = import_CheckboxCard.CheckboxCardFrame.styleable((cardProps, ref) => {
   const {
     values
   } = CheckboxesContext.useStyledContext();
@@ -202,14 +246,25 @@ const CheckboxCard = CheckboxCardFrame.styleable((cardProps, ref) => {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const selected = values[value];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxCardFrame, {
+  const layout = (0, import_CheckboxCard.getCheckboxCardLayout)(knobProps.space);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardFrame, {
     ref,
     active: cardProps.active ?? selected,
-    ...knobProps.panelPadding,
+    ...layout,
     borderRadius: knobProps.borderRadius.borderRadius,
     ...cardProps
   });
 });
+const CheckboxCardDescriptionSized = import_CheckboxCard.CheckboxCardDescription.styleable((props, ref) => {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxCard.CheckboxCardDescription, {
+    ref,
+    size: (0, import_CheckboxCard.getCardDescriptionSize)(knobProps.sizeToken),
+    ...props
+  });
+});
 const CheckboxesIndicator = import_tamagui.Checkbox.Indicator.styleable((indicatorProps, ref) => {
   const {
     children,
@@ -233,5 +288,9 @@ const Checkboxes = (0, import_tamagui.withStaticProperties)(CheckboxesImp, {
     Indicator: CheckboxesIndicator,
     Label: import_tamagui.Label
   }),
-  Card: CheckboxCard
+  Card: (0, import_tamagui.withStaticProperties)(CheckboxCard, {
+    Content: import_CheckboxCard.CheckboxCardContent,
+    Label: import_CheckboxCard.CheckboxCardLabel,
+    Description: CheckboxCardDescriptionSized
+  })
 });