@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/Checkbox/Checkbox.tsx

@@ -16,24 +16,30 @@ import {
   View,
   XStack,
   getVariable,
-  getVariableValue,
   isWeb,
   useTheme,
 } from "tamagui";
-import { getSize } from "@tamagui/get-token";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
 import {
   clampRadiusForControl,
-  clampRadiusInStateProps,
   getElevationWrapperProps,
   getFieldError,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
+import {
+  CHECKBOX_TARGET_PX,
+  CheckboxGlyphBox,
+  checkboxKbFocusHandlers,
+  checkboxTargetFrameProps,
+  getCheckboxBoxBorderWidth,
+  getCheckboxGlyphSize,
+  getCheckboxIconSize,
+} from "./CheckboxBox";
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
 
 export interface CheckboxProps {
@@ -114,7 +120,7 @@ export function Checkbox({
     onChange?.(val);
     onCheckedChange?.(val);
   };
-  const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
+  const { resolvedForm, knobProps, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
     compact,
@@ -167,16 +173,16 @@ export function Checkbox({
         ? "regular"
         : "light";
 
-  const renderIndicator = (currentChecked: CheckedState | undefined) => {
+  const renderIndicator = (currentChecked: CheckedState | undefined, iconSize: number) => {
     if (children) return children;
     return (
       <TamaguiCheckbox.Indicator
         {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       >
         {currentChecked === "indeterminate" ? (
-          <MinusRegular color={onMark ?? indicatorColor} weight={indicatorWeight} />
+          <MinusRegular color={onMark ?? indicatorColor} weight={indicatorWeight} size={iconSize} />
         ) : (
-          <CheckRegular color={onMark ?? indicatorColor} weight={indicatorWeight} />
+          <CheckRegular color={onMark ?? indicatorColor} weight={indicatorWeight} size={iconSize} />
         )}
       </TamaguiCheckbox.Indicator>
     );
@@ -189,52 +195,29 @@ export function Checkbox({
   // is unchanged. Cells (chromeless) and plain forms share the treatment —
   // the earlier cell-only split left the plain checkbox at a 20px target.
   const inTableCell = useIsInTableCell();
-  const targetSize = 44;
-  const glyphSize = Math.round(getVariableValue(getSize(resolvedSize as SizeTokens)) * 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" },
-  } as const;
-  // Interaction-state tints stay off the (invisible) 44px frame; the knob
-  // state props (ring/halo) still apply around the target.
-  const stateBaseStyle = { backgroundColor: "transparent" };
-  // Live checked value for the standalone-uncontrolled branch: the box fill
-  // below is keyed on it (tamagui's internal state only mounts/unmounts the
-  // indicator, it cannot repaint the box).
+  const targetSize = CHECKBOX_TARGET_PX;
+  const glyphSize = getCheckboxGlyphSize(resolvedSize as SizeTokens);
+  const iconSize = getCheckboxIconSize(glyphSize);
+  const boxBorderWidth = getCheckboxBoxBorderWidth(knobProps.borderRadius.borderWidth);
   const [uncontrolledChecked, setUncontrolledChecked] = useState<CheckedState | undefined>(
     defaultValue as CheckedState | undefined,
   );
+  const [kbFocus, setKbFocus] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const glyphBox = (currentChecked: CheckedState | undefined) => {
-    // Indeterminate is a selected-ish state: it carries the mark fill too,
-    // with the minus glyph, so "partially chosen" never reads as idle chrome.
     const isMarked = currentChecked === true || currentChecked === "indeterminate";
     return (
-      <View
-        width={glyphSize}
-        height={glyphSize}
-        {...knobProps.inputSurface}
-        {...resolvedRadius}
-        backgroundColor={
-          isMarked
-            ? formSelectedColors.mark
-            : knobProps.outlined
-              ? "transparent"
-              : formControlColors.background
-        }
-        borderColor={isMarked ? formSelectedColors.mark : formControlColors.border}
-        alignItems="center"
-        justifyContent="center"
+      <CheckboxGlyphBox
+        glyphSize={glyphSize}
+        isMarked={isMarked}
+        kbFocus={kbFocus}
+        hovered={hovered}
+        borderWidth={boxBorderWidth}
+        borderRadius={resolvedRadius.borderRadius ?? 0}
+        transition={knobProps.transition}
       >
-        {renderIndicator(currentChecked)}
-      </View>
+        {renderIndicator(currentChecked, iconSize)}
+      </CheckboxGlyphBox>
     );
   };
   // Elevation wraps the visible glyph, never the invisible target (cells
@@ -291,32 +274,17 @@ export function Checkbox({
       <CheckboxFieldFrame
         size={resolvedSize as SizeTokens}
         transition={knobProps.transition}
-        {...(clampRadiusInStateProps(control.hoverKnobProps, 2) && {
-          hoverStyle: {
-            ...stateBaseStyle,
-            ...clampRadiusInStateProps(control.hoverKnobProps, 2),
-          },
-        })}
-        {...(clampRadiusInStateProps(control.pressKnobProps, 2) && {
-          pressStyle: {
-            ...stateBaseStyle,
-            ...clampRadiusInStateProps(control.pressKnobProps, 2),
-          },
-        })}
-        {...(clampRadiusInStateProps(control.focusKnobProps, 2) && {
-          focusStyle: {
-            ...stateBaseStyle,
-            ...clampRadiusInStateProps(control.focusKnobProps, 2),
-          },
-        })}
-        {...(clampRadiusInStateProps(control.focusVisibleKnobProps, 2) && {
-          focusVisibleStyle: {
-            ...stateBaseStyle,
-            ...clampRadiusInStateProps(control.focusVisibleKnobProps, 2),
-          },
-        })}
-        {...targetFrameProps}
         {...checkboxProps}
+        {...checkboxTargetFrameProps}
+        {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
+          onFocus: (checkboxProps as { onFocus?: (...args: any[]) => void } | undefined)?.onFocus,
+          onBlur:
+            onBlur ?? (checkboxProps as { onBlur?: (...args: any[]) => void } | undefined)?.onBlur,
+          onHoverIn: (checkboxProps as { onHoverIn?: (...args: any[]) => void } | undefined)
+            ?.onHoverIn,
+          onHoverOut: (checkboxProps as { onHoverOut?: (...args: any[]) => void } | undefined)
+            ?.onHoverOut,
+        })}
         disabled={disabled}
         // LC-40 DISABLED-VISIBLE: the box is text-free chrome — dim it while
         // the sibling label stays readable (keepLabel); dimWhole dims the
@@ -338,7 +306,6 @@ export function Checkbox({
           setUncontrolledChecked(val);
           handleValueChange(val);
         }}
-        {...(onBlur ? { onBlur } : undefined)}
       >
         {renderControlContent(checked ?? uncontrolledChecked)}
       </CheckboxFieldFrame>
@@ -448,32 +415,19 @@ export function Checkbox({
                   <CheckboxFieldFrame
                     size={resolvedSize as SizeTokens}
                     transition={knobProps.transition}
-                    {...(clampRadiusInStateProps(control.hoverKnobProps, 2) && {
-                      hoverStyle: {
-                        ...stateBaseStyle,
-                        ...clampRadiusInStateProps(control.hoverKnobProps, 2),
-                      },
-                    })}
-                    {...(clampRadiusInStateProps(control.pressKnobProps, 2) && {
-                      pressStyle: {
-                        ...stateBaseStyle,
-                        ...clampRadiusInStateProps(control.pressKnobProps, 2),
-                      },
-                    })}
-                    {...(clampRadiusInStateProps(control.focusKnobProps, 2) && {
-                      focusStyle: {
-                        ...stateBaseStyle,
-                        ...clampRadiusInStateProps(control.focusKnobProps, 2),
-                      },
-                    })}
-                    {...(clampRadiusInStateProps(control.focusVisibleKnobProps, 2) && {
-                      focusVisibleStyle: {
-                        ...stateBaseStyle,
-                        ...clampRadiusInStateProps(control.focusVisibleKnobProps, 2),
-                      },
-                    })}
-                    {...targetFrameProps}
                     {...checkboxProps}
+                    {...checkboxTargetFrameProps}
+                    {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
+                      onFocus: (checkboxProps as { onFocus?: (...args: any[]) => void } | undefined)
+                        ?.onFocus,
+                      onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
+                      onHoverIn: (
+                        checkboxProps as { onHoverIn?: (...args: any[]) => void } | undefined
+                      )?.onHoverIn,
+                      onHoverOut: (
+                        checkboxProps as { onHoverOut?: (...args: any[]) => void } | undefined
+                      )?.onHoverOut,
+                    })}
                     disabled={disabled}
                     // LC-40: dim the box chrome; label/helper stay readable.
                     {...(disabled ? disabledState.chromeKnobProps : undefined)}
@@ -495,7 +449,6 @@ export function Checkbox({
                       field.handleChange(fieldValue as any);
                       handleValueChange(newChecked);
                     }}
-                    onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
                   >
                     {renderControlContent(resolvedChecked)}
                   </CheckboxFieldFrame>

package/src/fields/Checkbox/CheckboxBox.tsx

@@ -0,0 +1,139 @@
+import {
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import type { SizeTokens, TransitionProp } from "tamagui";
+import { View, getVariableValue, isWeb } from "tamagui";
+import { getSize } from "@tamagui/get-token";
+import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+
+/** WCAG 2.5.5 pressable floor. The painted box is smaller and sits inside. */
+export const CHECKBOX_TARGET_PX = 44;
+
+export function getCheckboxGlyphSize(size: SizeTokens): number {
+  return Math.round(getVariableValue(getSize(size)) * 0.45);
+}
+
+/** Spectrum / Primer / Radio DF-06: the empty box's edge is the shape (≥2px). */
+export function getCheckboxBoxBorderWidth(knobBorderWidth: number | undefined): number {
+  return Math.max(Number(knobBorderWidth) || 1, 2);
+}
+
+export function getCheckboxIconSize(glyphSize: number): number {
+  return Math.max(10, Math.round(glyphSize * 0.7));
+}
+
+/**
+ * LC-71: the 44px role=checkbox is a hit target, never a painted control.
+ * Hover/press/focus washes and rings stay off this node so they cannot wrap
+ * the label+box group. The visible box carries both channels.
+ */
+export const checkboxTargetFrameProps = {
+  width: CHECKBOX_TARGET_PX,
+  height: CHECKBOX_TARGET_PX,
+  minWidth: CHECKBOX_TARGET_PX,
+  minHeight: CHECKBOX_TARGET_PX,
+  padding: 0,
+  borderWidth: 0,
+  backgroundColor: "transparent" as const,
+  alignItems: "center" as const,
+  justifyContent: "center" as const,
+  outlineWidth: 0,
+  hoverStyle: { backgroundColor: "transparent", borderColor: "transparent" },
+  pressStyle: { backgroundColor: "transparent", borderColor: "transparent" },
+  focusStyle: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    outlineWidth: 0,
+  },
+  focusVisibleStyle: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    outlineWidth: 0,
+  },
+  activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
+} as const;
+
+type FocusRest = {
+  onFocus?: (...args: any[]) => void;
+  onBlur?: (...args: any[]) => void;
+  onHoverIn?: (...args: any[]) => void;
+  onHoverOut?: (...args: any[]) => void;
+};
+
+export function checkboxKbFocusHandlers(
+  setKbFocus: (next: boolean) => void,
+  setHovered: (next: boolean) => void,
+  rest?: FocusRest,
+) {
+  return {
+    onFocus: (e: any) => {
+      if (wasKeyboardFocus()) setKbFocus(true);
+      rest?.onFocus?.(e);
+    },
+    onBlur: (e: any) => {
+      setKbFocus(false);
+      rest?.onBlur?.(e);
+    },
+    onHoverIn: (e: any) => {
+      setHovered(true);
+      rest?.onHoverIn?.(e);
+    },
+    onHoverOut: (e: any) => {
+      setHovered(false);
+      rest?.onHoverOut?.(e);
+    },
+  };
+}
+
+export function CheckboxGlyphBox({
+  glyphSize,
+  isMarked,
+  kbFocus,
+  hovered,
+  borderWidth,
+  borderRadius,
+  transition,
+  children,
+}: {
+  glyphSize: number;
+  isMarked: boolean;
+  kbFocus: boolean;
+  hovered?: boolean;
+  borderWidth: number;
+  borderRadius: number | string;
+  transition?: TransitionProp;
+  children?: ReactNode;
+}) {
+  if (isWeb) ensureKeyboardModalityTracking();
+  return (
+    <View
+      data-checkbox-box="true"
+      data-focus-ring={kbFocus ? "true" : undefined}
+      width={glyphSize}
+      height={glyphSize}
+      borderWidth={borderWidth}
+      borderRadius={borderRadius}
+      // Polaris / Primer / Spectrum / Apple: idle = empty square whose shape
+      // is the boundary; checked = accent fill + check (same border width,
+      // border color = fill — not a second outline).
+      backgroundColor={isMarked ? formSelectedColors.mark : "transparent"}
+      borderColor={
+        isMarked
+          ? formSelectedColors.mark
+          : hovered
+            ? formControlColors.thumb.press
+            : formControlColors.boundary
+      }
+      alignItems="center"
+      justifyContent="center"
+      overflow="visible"
+      {...(transition ? { transition } : undefined)}
+      {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
+    >
+      {children}
+    </View>
+  );
+}

package/src/fields/Checkbox/CheckboxCard.tsx

@@ -27,8 +27,8 @@ export const CheckboxCardFrame = styled(View, {
   variants: {
     active: {
       true: {
+        // LC-71: selected = fill, not an extra border on the card.
         backgroundColor: formCardColors.background.active,
-        borderColor: formCardColors.border.active,
       },
     },
   } as const,

package/src/fields/Checkbox/CheckboxFieldFrame.tsx

@@ -1,38 +1,22 @@
 import { Checkbox as TamaguiCheckbox, styled } from "tamagui";
-import { formControlColors } from "../../shared/colorRamps";
 
+/** Hit-target frame. The painted box is CheckboxGlyphBox (LC-71). */
 export const CheckboxFieldFrame = styled(TamaguiCheckbox, {
-  backgroundColor: formControlColors.background,
-  borderColor: formControlColors.border,
-  hoverStyle: {
-    backgroundColor: formControlColors.background,
-    borderColor: formControlColors.border,
-  },
-  pressStyle: {
-    backgroundColor: formControlColors.background,
-    borderColor: formControlColors.border,
-  },
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  borderWidth: 0,
+  outlineWidth: 0,
+  hoverStyle: { backgroundColor: "transparent", borderColor: "transparent" },
+  pressStyle: { backgroundColor: "transparent", borderColor: "transparent" },
   focusStyle: {
-    backgroundColor: formControlColors.background,
-    borderColor: formControlColors.border,
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    outlineWidth: 0,
   },
   focusVisibleStyle: {
-    backgroundColor: formControlColors.background,
-    borderColor: formControlColors.border,
-  },
-  activeStyle: {
-    backgroundColor: formControlColors.background,
-    borderColor: formControlColors.border,
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    outlineWidth: 0,
   },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent",
-        hoverStyle: { backgroundColor: "transparent", borderColor: formControlColors.border },
-        pressStyle: { backgroundColor: "transparent", borderColor: formControlColors.border },
-        focusStyle: { backgroundColor: "transparent", borderColor: formControlColors.border },
-        activeStyle: { backgroundColor: "transparent", borderColor: formControlColors.border },
-      },
-    },
-  } as const,
+  activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
 });

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -19,6 +19,7 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import { Checkbox, getCheckboxInlineGap } from "./Checkbox";
+import { CHECKBOX_TARGET_PX } from "./CheckboxBox";
 import {
   CheckboxCardContent,
   CheckboxCardDescription,
@@ -64,7 +65,7 @@ export interface CheckboxGroupProps {
   checkboxProps?: Omit<TamaguiCheckboxProps, "checked" | "id" | "onCheckedChange" | "children">;
   children?: ReactNode;
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
   /**
    * When true, renders each option as a selection card (LC-22): checkbox in a
@@ -136,7 +137,12 @@ export function CheckboxGroup({
           {Array.from({ length: optionCount }, (_, i) => (
             <XStack key={i} gap={inlineGap} alignItems="center">
               {/* Mirror the 44px pressable target box around the 20px glyph */}
-              <View width={44} height={44} alignItems="center" justifyContent="center">
+              <View
+                width={CHECKBOX_TARGET_PX}
+                height={CHECKBOX_TARGET_PX}
+                alignItems="center"
+                justifyContent="center"
+              >
                 <Skeleton variant="rounded" width={20} height={20} borderRadius={controlRadius} />
               </View>
               <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />