@multiplatform.one/forms 6.0.4 → 6.3.0

package/dist/cjs/fields/Progress/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Progress_exports","__export","Progress","module","exports","import_jsx_runtime","require","import_tamagui","import_fieldLayout","import_Skeleton","import_colorRamps","import_utils","ProgressFrame","styled","backgroundColor","formControlColors","background","borderWidth","variants","outlined","true","ProgressIndicator","Indicator","border","param","name","form","formProp","validators","label","labelProps","helperText","error","required","size","id","idProp","defaultValue","max","onBlur","progressProps","skeleton","compact","resolvedForm","knobProps","elevation","useFormField","resolvedValidators","useResolvedValidators","jsx","FieldLayout","children","Skeleton","variant","width","height","elevationWrapperProps","getElevationWrapperProps","renderProgress","renderProgress2","progressValue","blurHandler","hasError","progressElement","sizeToken","borderRadius","XStack","alignItems","View","_ref","Field","field","_field_state_value","resolvedError","getFieldError","state","mergeFieldHandler"],"sources":["../../../../src/fields/Progress/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Progress_exports","__export","Progress","module","exports","import_jsx_runtime","require","import_tamagui","import_fieldLayout","import_Skeleton","import_colorRamps","import_t","import_utils","ProgressFrame","styled","backgroundColor","formControlColors","background","borderWidth","variants","outlined","true","ProgressIndicator","Indicator","border","param","name","form","formProp","validators","label","labelProps","helperText","error","required","size","id","idProp","defaultValue","max","onBlur","progressProps","skeleton","compact","resolvedForm","knobProps","elevation","useFormField","resolvedValidators","useResolvedValidators","jsx","FieldLayout","children","Skeleton","variant","width","height","elevationWrapperProps","getElevationWrapperProps","renderProgress","renderProgress2","progressValue","blurHandler","hasError","progressElement","sizeToken","borderRadius","t","XStack","alignItems","View","_ref","Field","field","_field_state_value","resolvedError","getFieldError","state","mergeFieldHandler"],"sources":["../../../../src/fields/Progress/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/RadioGroup/index.cjs

@@ -25,73 +25,74 @@ __export(RadioGroup_exports, {
   RadioGroup: () => RadioGroup
 });
 module.exports = __toCommonJS(RadioGroup_exports);
+var import_react = require("react");
 var import_tamagui = require("tamagui");
+var import_get_token = require("@tamagui/get-token");
 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_CheckboxCard = require("../Checkbox/CheckboxCard.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const radioTargetSize = 44;
 const RadioItemFrame = (0, import_tamagui.styled)(import_tamagui.RadioGroup.Item, {
+  width: radioTargetSize,
+  height: radioTargetSize,
+  minWidth: radioTargetSize,
+  minHeight: radioTargetSize,
+  padding: 0,
+  borderWidth: 0,
   borderRadius: 1e3,
-  backgroundColor: import_colorRamps.formControlColors.background,
-  borderColor: import_colorRamps.formControlColors.border,
+  backgroundColor: "transparent",
+  alignItems: "center",
+  justifyContent: "center",
   hoverStyle: {
-    backgroundColor: import_colorRamps.formControlColors.background,
-    borderColor: import_colorRamps.formControlColors.border
+    backgroundColor: "transparent"
   },
   pressStyle: {
-    backgroundColor: import_colorRamps.formControlColors.background,
-    borderColor: import_colorRamps.formControlColors.border
+    backgroundColor: "transparent"
   },
   focusStyle: {
-    backgroundColor: import_colorRamps.formControlColors.background,
-    borderColor: import_colorRamps.formControlColors.border
+    backgroundColor: "transparent"
   },
   focusVisibleStyle: {
-    backgroundColor: import_colorRamps.formControlColors.background,
-    borderColor: import_colorRamps.formControlColors.border
-  },
+    backgroundColor: "transparent"
+  }
+});
+const RadioGlyph = (0, import_tamagui.styled)(import_tamagui.View, {
+  borderRadius: 1e3,
+  backgroundColor: "transparent",
+  borderColor: import_colorRamps.formControlColors.boundary,
+  alignItems: "center",
+  justifyContent: "center",
   variants: {
+    size: {
+      "...size": val => {
+        const glyphSize = Math.floor((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(val)) * 0.5);
+        return {
+          width: glyphSize,
+          height: glyphSize
+        };
+      }
+    },
     outlined: {
       true: {
-        backgroundColor: "transparent",
-        hoverStyle: {
-          backgroundColor: "transparent",
-          borderColor: import_colorRamps.formControlColors.border
-        },
-        pressStyle: {
-          backgroundColor: "transparent",
-          borderColor: import_colorRamps.formControlColors.border
-        },
-        focusStyle: {
-          backgroundColor: "transparent",
-          borderColor: import_colorRamps.formControlColors.border
-        }
+        backgroundColor: "transparent"
       }
     }
   }
 });
+const radioRingWidth = knobBorderWidth => Math.max(knobBorderWidth ?? 1, 2);
 const RadioIndicatorFrame = (0, import_tamagui.styled)(import_tamagui.RadioGroup.Indicator, {
-  borderRadius: 1e3
+  borderRadius: 1e3,
+  // DF-06 optics rider (Axiom 15): the selected dot fills ~half the OUTER
+  // disc — the platform-convention 0.45–0.55 band. Percentage sizes resolve
+  // against the glyph's content box (disc minus the 2px ring), so 60% of
+  // content ≈ 0.49 of the disc at the 22px default. The previous 33%
+  // (6.6px in a 22px disc, 0.30) under-signaled the checked state.
+  width: "60%",
+  height: "60%"
 });
-function RadioItemWithElevation({
-  elevationWrapperProps,
-  itemRadius = 1e3,
-  ...props
-}) {
-  if (elevationWrapperProps.elevation) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      ...elevationWrapperProps,
-      borderRadius: itemRadius,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemFrame, {
-        ...props
-      })
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemFrame, {
-    ...props
-  });
-}
 function RadioGroup({
   name,
   form: formProp,
@@ -107,6 +108,7 @@ function RadioGroup({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   options,
@@ -115,14 +117,20 @@ function RadioGroup({
   children,
   pointy,
   skeleton,
-  compact
+  compact,
+  card
 }) {
+  const handleValueChange = val => {
+    onChange?.(val);
+    onValueChange?.(val);
+  };
   const {
     resolvedForm,
     knobProps,
     control,
     text,
     elevation,
+    disabledState,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -134,92 +142,183 @@ function RadioGroup({
   const resolvedPointy = pointy ?? knobProps.pointy;
   const itemRadius = resolvedPointy ? 0 : 1e3;
   const indicatorRadius = resolvedPointy ? 0 : 1e3;
+  const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+  const wrapperTabIndexObserver = (0, import_react.useRef)(null);
+  const frameRef = (0, import_react.useCallback)(node => {
+    wrapperTabIndexObserver.current?.disconnect();
+    wrapperTabIndexObserver.current = null;
+    if (!import_tamagui.isWeb || !node) return;
+    const wrapper = node.parentElement;
+    if (!wrapper || wrapper.getAttribute("role") || !wrapper.hasAttribute("data-orientation")) {
+      return;
+    }
+    const strip = () => {
+      if (wrapper.getAttribute("tabindex") === "0") wrapper.setAttribute("tabindex", "-1");
+    };
+    strip();
+    const observer = new MutationObserver(strip);
+    observer.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ["tabindex"]
+    });
+    wrapperTabIndexObserver.current = observer;
+  }, []);
   if (skeleton) {
     const optionCount = options?.length ?? 3;
+    const Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    const labelWidths = [88, 64, 76];
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
       size,
       knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container, {
         gap: "$2",
         children: Array.from({
           length: optionCount
         }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           gap: "$2",
           alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            width: radioTargetSize,
+            height: radioTargetSize,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              variant: itemRadius === 0 ? "rounded" : "circular",
+              width: 20,
+              height: 20,
+              borderRadius: itemRadius
+            })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
             variant: "text",
-            width: "50%",
+            width: labelWidths[i % labelWidths.length],
             height: 14
           })]
         }, i))
       })
     });
   }
-  const renderItems = () => {
+  const renderRadioItem = (option, itemId, a11y, selected, isTabStop) => {
+    const glyph = /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGlyph, {
+      size: knobProps.sizeToken,
+      borderWidth: radioRingWidth(knobProps.borderRadius.borderWidth),
+      borderRadius: itemRadius,
+      outlined: knobProps.outlined,
+      ...(knobProps.transition ? {
+        animation: knobProps.transition
+      } : void 0),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioIndicatorFrame, {
+        borderRadius: indicatorRadius,
+        backgroundColor: knobProps.textAccentColor,
+        ...(knobProps.transition ? {
+          animation: knobProps.transition
+        } : void 0)
+      })
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemFrame, {
+      value: option.value,
+      id: itemId,
+      ...(import_tamagui.isWeb && isTabStop !== void 0 ? {
+        tabIndex: isTabStop ? 0 : -1
+      } : void 0),
+      borderRadius: itemRadius === 0 ? 0 : 1e3,
+      transition: knobProps.transition,
+      disabled: disabled || option.disabled,
+      ...(disabled || option.disabled ? disabledState.chromeKnobProps : void 0),
+      pointerEvents: readOnly ? "none" : void 0,
+      ...a11y,
+      ...(!import_tamagui.isWeb ? {
+        accessible: true,
+        "aria-label": typeof option.label === "string" ? option.label : String(option.value),
+        "aria-checked": selected ?? false
+      } : {}),
+      ...((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps) && {
+        hoverStyle: {
+          backgroundColor: "transparent",
+          ...(0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps)
+        }
+      }),
+      ...((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps) && {
+        pressStyle: {
+          backgroundColor: "transparent",
+          ...(0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps)
+        }
+      }),
+      ...((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps) && {
+        focusStyle: {
+          backgroundColor: "transparent",
+          ...(0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps)
+        }
+      }),
+      ...((0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps) && {
+        focusVisibleStyle: {
+          backgroundColor: "transparent",
+          ...(0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps)
+        }
+      }),
+      children: elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        ...elevationWrapperProps,
+        borderRadius: itemRadius,
+        children: glyph
+      }) : glyph
+    });
+  };
+  const renderItems = (currentValue, emit) => {
     if (children) return children;
     if (!options) return null;
     const Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    const checkedEnabled = options.findIndex(o => o.value === currentValue && !(disabled || o.disabled));
+    const tabStopIndex = checkedEnabled >= 0 ? checkedEnabled : options.findIndex(o => !(disabled || o.disabled));
+    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 isSelected = currentValue === option.value;
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxCard.CheckboxCardFrame, {
+            active: isSelected,
+            ...layout,
+            borderRadius: knobProps.borderRadius.borderRadius,
+            ...(isDisabled ? disabledState.chromeKnobProps : void 0),
+            onPress: () => {
+              if (isDisabled || readOnly) return;
+              emit(option.value);
+            },
+            children: [renderRadioItem(option, itemId, {
+              "aria-labelledby": labelId,
+              ...(descriptionId && {
+                "aria-describedby": descriptionId
+              })
+            }, isSelected, index === tabStopIndex), /* @__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}`;
         return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           gap: "$2",
           alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemWithElevation, {
-            elevationWrapperProps,
-            itemRadius,
-            value: option.value,
-            id: itemId,
-            size: knobProps.sizeToken,
-            borderWidth: knobProps.borderRadius.borderWidth,
-            borderRadius: itemRadius,
-            outlined: knobProps.outlined,
-            transition: knobProps.transition,
-            disabled,
-            pointerEvents: readOnly ? "none" : void 0,
-            ...((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps) && {
-              hoverStyle: {
-                backgroundColor: import_colorRamps.formControlColors.background,
-                borderColor: import_colorRamps.formControlColors.border,
-                ...(0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps)
-              }
-            }),
-            ...((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps) && {
-              pressStyle: {
-                backgroundColor: import_colorRamps.formControlColors.background,
-                borderColor: import_colorRamps.formControlColors.border,
-                ...(0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps)
-              }
-            }),
-            ...((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps) && {
-              focusStyle: {
-                backgroundColor: import_colorRamps.formControlColors.background,
-                borderColor: import_colorRamps.formControlColors.border,
-                ...(0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps)
-              }
-            }),
-            ...((0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps) && {
-              focusVisibleStyle: {
-                backgroundColor: import_colorRamps.formControlColors.background,
-                borderColor: import_colorRamps.formControlColors.border,
-                ...(0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps)
-              }
-            }),
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioIndicatorFrame, {
-              borderRadius: indicatorRadius,
-              backgroundColor: knobProps.textAccentColor,
-              ...(knobProps.transition ? {
-                animation: knobProps.transition
-              } : void 0)
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+          children: [renderRadioItem(option, itemId, void 0, currentValue === option.value, index === tabStopIndex), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
             htmlFor: itemId,
             size: size || knobProps.sizeToken,
             ...knobProps.body,
@@ -242,28 +341,54 @@ function RadioGroup({
             },
             children: option.label
           })]
-        }, option.value);
+        }, `${index}-${option.value}`);
       })
     });
   };
-  const renderRadioGroup = (radioValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, {
-    ...radioGroupProps,
-    id,
-    defaultValue: radioValue,
-    onValueChange: val => {
+  const renderRadioGroup = (radioValue, handleChange, handleBlur, hasError) => {
+    const emit = val => {
       if (disabled || readOnly) return;
+      setInternalValue(val);
       handleChange?.(val);
-      onValueChange?.(val);
-    },
-    ...(handleBlur ? {
-      onBlur: handleBlur
-    } : void 0),
-    "aria-required": required || void 0,
-    "aria-invalid": hasError || void 0,
-    "aria-readonly": readOnly || void 0,
-    children: renderItems()
-  });
+      handleValueChange(val);
+    };
+    const valueProps = card ? {
+      value: radioValue
+    } : {
+      defaultValue: radioValue
+    };
+    const handleArrowSelect = e => {
+      if (!options || disabled || readOnly) return;
+      const key = e.key;
+      if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "ArrowLeft" && key !== "ArrowRight") return;
+      setTimeout(() => {
+        const active = document.activeElement;
+        if (!active?.id || !active.id.startsWith(`${id}-`)) return;
+        if (active.getAttribute("role") !== "radio") return;
+        if (active.getAttribute("aria-checked") === "true") return;
+        active.click();
+      }, 0);
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, {
+      ...radioGroupProps,
+      ref: frameRef,
+      id,
+      ...valueProps,
+      onValueChange: emit,
+      ...(handleBlur ? {
+        onBlur: handleBlur
+      } : void 0),
+      ...(import_tamagui.isWeb && options && !children ? {
+        onKeyDown: handleArrowSelect
+      } : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-readonly": readOnly || void 0,
+      children: renderItems(radioValue, emit)
+    });
+  };
   if (!resolvedForm || !name) {
+    const currentValue = value !== void 0 ? value : internalValue;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
@@ -273,7 +398,8 @@ function RadioGroup({
       helperText,
       size,
       knobProps,
-      children: renderRadioGroup(value ?? defaultValue, void 0, onBlur, !!error)
+      disabled,
+      children: renderRadioGroup(currentValue, void 0, onBlur, !!error)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -283,6 +409,8 @@ function RadioGroup({
     validators: resolvedValidators,
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, error);
+      const fieldValue = field.state.value;
+      const currentValue = value !== void 0 ? value : fieldValue;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
         label,
@@ -292,7 +420,8 @@ function RadioGroup({
         helperText,
         size,
         knobProps,
-        children: renderRadioGroup(value !== void 0 ? value : field.state.value, val => field.handleChange(val), (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+        disabled,
+        children: renderRadioGroup(currentValue, val => field.handleChange(val), (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
       });
     }
   });