@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/Checkbox/index.tsx

@@ -1,13 +1,9 @@
 import type { RovingFocusGroupProps, RovingFocusItemProps } from "@tamagui/roving-focus";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { CheckIcon as CheckRegular } from "@phosphor-icons/react";
-import {
-  ensureFocusVisibleRing,
-  useReadableTextOn,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
+import { useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import type { ElementRef, KeyboardEvent, PropsWithChildren } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import type { CheckedState, YStackProps } from "tamagui";
 import {
   Checkbox as TamaguiCheckbox,
@@ -16,12 +12,10 @@ import {
   Label,
   View,
   createStyledContext,
-  getVariableValue,
   isWeb,
   styled,
   withStaticProperties,
 } from "tamagui";
-import { getSize } from "@tamagui/get-token";
 import {
   CheckboxCardContent,
   CheckboxCardDescription,
@@ -31,8 +25,16 @@ import {
   getCheckboxCardLayout,
 } from "./CheckboxCard";
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
+import {
+  CheckboxGlyphBox,
+  checkboxKbFocusHandlers,
+  checkboxTargetFrameProps,
+  getCheckboxBoxBorderWidth,
+  getCheckboxGlyphSize,
+  getCheckboxIconSize,
+} from "./CheckboxBox";
 import { clampRadiusForControl } from "../../shared/utils";
-import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { formSelectedColors } from "../../shared/colorRamps";
 
 // ─── Checkboxes Compound Component ────────────────────────────────────────────
 
@@ -45,42 +47,31 @@ const CheckboxesContext = createStyledContext<{
 });
 
 const FocusGroup = forwardRef<ElementRef<typeof View>, RovingFocusGroupProps>((props, ref) => {
-  const { knobProps, control } = useResolvedKnobs();
-  // DG-A11Y-01: the roving group container is a focusable tab entry point
-  // that forwards focus to its current item — the ring must therefore be
-  // painted synchronously while focus is WITHIN (CellWrapper focusWithin
-  // pattern), not only on the container's own :focus.
-  const groupRing = ensureFocusVisibleRing({ ...control.focusVisibleKnobProps });
+  const { knobProps } = useResolvedKnobs();
   return (
-    <RovingFocusGroup
-      gap={knobProps.gap.gap}
-      focusable
-      outlineOffset={1}
-      focusStyle={{ zIndex: 1, ...groupRing }}
-      focusVisibleStyle={{ zIndex: 1, ...groupRing }}
-      focusWithinStyle={{ ...groupRing }}
-      {...props}
-      ref={ref}
-    />
+    <RovingFocusGroup gap={knobProps.gap.gap} focusable outlineWidth={0} {...props} ref={ref} />
   );
 });
 
 const FocusItemContext = createStyledContext({
   value: "",
+  kbFocus: false,
 });
 
 const FocusGroupItem = forwardRef<any, RovingFocusItemProps & { value: string }>(
   (itemProps, ref) => {
     const { value, ...props } = itemProps;
     const { values, onValuesChange } = CheckboxesContext.useStyledContext();
+    const [kbFocus, setKbFocus] = useState(false);
 
     const combinedProps = {
       focusable: true,
-      outlineOffset: 1,
       flexShrink: 1,
-      focusStyle: { zIndex: 1, ...ensureFocusVisibleRing() },
-      focusVisibleStyle: { zIndex: 1, ...ensureFocusVisibleRing() },
       ...(isWeb && {
+        onFocus: () => {
+          if (wasKeyboardFocus()) setKbFocus(true);
+        },
+        onBlur: () => setKbFocus(false),
         onKeyDown: (e: KeyboardEvent) => {
           if (e.key === "Enter" || e.code === "Space") {
             e.preventDefault();
@@ -92,10 +83,14 @@ const FocusGroupItem = forwardRef<any, RovingFocusItemProps & { value: string }>
         onValuesChange({ ...values, [value]: !values[value] });
       },
       ...props,
+      outlineWidth: 0,
+      focusStyle: { zIndex: 1, outlineWidth: 0 },
+      focusVisibleStyle: { outlineWidth: 0 },
+      "data-checkbox-focus-item": "true",
     };
 
     return (
-      <FocusItemContext.Provider value={value}>
+      <FocusItemContext.Provider value={value} kbFocus={kbFocus}>
         <RovingFocusGroup.Item ref={ref} {...combinedProps} />
       </FocusItemContext.Provider>
     );
@@ -135,25 +130,17 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
     ...props
   } = checkboxProps;
   const { values, onValuesChange } = CheckboxesContext.useStyledContext();
-  const { value: focusItemValue } = FocusItemContext.useStyledContext();
+  const { value: focusItemValue, kbFocus: itemKbFocus } = FocusItemContext.useStyledContext();
   const { knobProps } = useResolvedKnobs();
-  // LC-05 ONE-EMPHASIS / D-01: the checked box is the selection mark, so it
-  // fills with the shared accent mark (same treatment as fields/Checkbox and
-  // the checked Switch track); unchecked chrome stays neutral.
+  const [kbFocus, setKbFocus] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const isMarked = Boolean(values[focusItemValue]);
   const radiusToken = knobProps.borderRadius.borderRadius;
   const cappedRadius = clampRadiusForControl(radiusToken, 2);
-  const resolvedRadius =
-    cappedRadius === 0
-      ? { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: 0 }
-      : { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: cappedRadius };
-  // Pressable-vs-glyph split (SP-FIXED / WCAG 2.5.5, same anatomy as
-  // fields/Checkbox + RadioGroup): the role=checkbox frame is a 44px
-  // transparent target; the visible 20px box is the inner glyph.
-  const glyphSize = Math.round(getVariableValue(getSize(knobProps.sizeToken)) * 0.45);
-  // Compound cards often pair the control with free-form text (Paragraph)
-  // instead of an associated Label, leaving the checkbox unnamed. Fall back
-  // to the humanized item value; explicit aria-label/labelledby wins.
+  const glyphSize = getCheckboxGlyphSize(knobProps.sizeToken);
+  const boxBorderWidth = getCheckboxBoxBorderWidth(knobProps.borderRadius.borderWidth);
+  const inFocusGroup = Boolean(focusItemValue);
+  const ringFocus = kbFocus || !!itemKbFocus;
   const hasName =
     (props as Record<string, unknown>)["aria-label"] ||
     (props as Record<string, unknown>)["aria-labelledby"];
@@ -179,44 +166,25 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
       value={focusItemValue}
       size={knobProps.sizeToken}
       transition={knobProps.transition}
-      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",
-        ...ensureFocusVisibleRing(),
-      }}
-      activeStyle={{ backgroundColor: "transparent", borderColor: "transparent" }}
       {...combinedProps}
+      {...checkboxTargetFrameProps}
+      {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
+        onFocus: (combinedProps as { onFocus?: (...args: any[]) => void }).onFocus,
+        onBlur: (combinedProps as { onBlur?: (...args: any[]) => void }).onBlur,
+      })}
+      {...(inFocusGroup ? { tabIndex: -1 } : undefined)}
     >
-      <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={ringFocus}
+        hovered={hovered}
+        borderWidth={boxBorderWidth}
+        borderRadius={cappedRadius === 0 ? 0 : cappedRadius}
+        transition={knobProps.transition}
       >
         {children}
-      </View>
+      </CheckboxGlyphBox>
     </CheckboxFieldFrame>
   );
 });
@@ -254,13 +222,12 @@ const CheckboxCardDescriptionSized = CheckboxCardDescription.styleable((props, r
 
 const CheckboxesIndicator = TamaguiCheckbox.Indicator.styleable((indicatorProps, ref) => {
   const { children, ...props } = indicatorProps;
-  // LC-05: the glyph rides the accent mark fill, so it takes the
-  // luminance-computed anchor for that fill (never assumed scheme ink);
-  // consumer-provided children keep their own colors (explicit eject).
   const onMark = useReadableTextOn(formSelectedColors.mark);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = getCheckboxIconSize(getCheckboxGlyphSize(knobProps.sizeToken));
   return (
     <TamaguiCheckbox.Indicator ref={ref} {...props}>
-      {children ?? <CheckRegular {...(onMark ? { color: onMark } : undefined)} />}
+      {children ?? <CheckRegular size={iconSize} {...(onMark ? { color: onMark } : undefined)} />}
     </TamaguiCheckbox.Indicator>
   );
 });

package/src/fields/ColorPicker/ColorPicker.spec.tsx

@@ -12,6 +12,7 @@ import {
   hsvToRgb,
   isValidHex,
   normalizeHex,
+  parseHex,
   rgbToHex,
   rgbToHsv,
 } from "./parts";
@@ -19,6 +20,8 @@ import {
 vi.mock("@tamagui/lucide-icons-2", () => ({
   Palette: () => null,
   X: () => null,
+  Check: () => null,
+  Pipette: () => null,
 }));
 
 vi.mock("expo-linear-gradient", () => ({
@@ -56,6 +59,7 @@ describe("ColorPicker", () => {
       fireEvent.click(clickable);
     }
     expect(result.findTextElement("Opacity: 100%")).toBeUndefined();
+    expect(document.body.querySelector('[aria-label="Hue"]')).toBeNull();
   });
 
   it("opens popover and updates value from hex input", async () => {
@@ -72,7 +76,7 @@ describe("ColorPicker", () => {
     });
 
     await waitFor(() => {
-      expect(document.body.textContent?.includes("Opacity:")).toBe(true);
+      expect(document.body.querySelector('[aria-label="Hue"]')).toBeTruthy();
     });
 
     const hexInput = document.body.querySelector(
@@ -86,7 +90,7 @@ describe("ColorPicker", () => {
 
     await waitFor(() => {
       const updated = result.container.querySelector("input") as HTMLInputElement | null;
-      expect(updated?.value).toBe("#00FF00");
+      expect(updated?.value).toBe("#00FF00FF");
     });
   });
 
@@ -151,6 +155,7 @@ describe("ColorPicker", () => {
     it("validates and normalizes hex values", () => {
       expect(isValidHex("#AABBCC")).toBe(true);
       expect(isValidHex("#abc")).toBe(true);
+      expect(isValidHex("#11223344")).toBe(true);
       expect(isValidHex("123456")).toBe(false);
       expect(normalizeHex("#abc")).toBe("#AABBCC");
       expect(normalizeHex("aabbcc")).toBe("#AABBCC");
@@ -176,6 +181,83 @@ describe("ColorPicker", () => {
       expect(fromHex.s).toBe(100);
       expect(fromHex.v).toBe(100);
     });
+
+    it("parses 8-digit hex including alpha", async () => {
+      const { parseHex, hexAlphaByte } = await import("./parts");
+      expect(parseHex("#11223344")).toEqual({ r: 17, g: 34, b: 51, alpha: 27 });
+      expect(hexAlphaByte(100)).toBe("FF");
+      expect(hexAlphaByte(0)).toBe("00");
+    });
+  });
+
+  it("commits 8-digit hex into color + alpha when showAlpha", async () => {
+    const ColorPicker = await loadColorPicker();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ColorPicker
+        label="Color"
+        name={undefined as never}
+        showAlpha
+        value="#FF0000"
+        onChange={onChange}
+      />,
+    );
+    const triggerInput = result.container.querySelector("input");
+    await act(async () => {
+      if (triggerInput) fireEvent.click(triggerInput);
+    });
+    await waitFor(() => {
+      expect(document.body.querySelector('[aria-label="Opacity"]')).toBeTruthy();
+    });
+    const hexInput = document.body.querySelector(
+      'input[placeholder="#000000"]',
+    ) as HTMLInputElement | null;
+    await act(async () => {
+      if (hexInput) fireEvent.change(hexInput, { target: { value: "#11223344" } });
+    });
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+    });
+    const last = onChange.mock.calls.at(-1)?.[0] as string;
+    expect(last.toUpperCase().startsWith("#112233")).toBe(true);
+    expect(last.length).toBe(9);
+  });
+
+  it("moves saturation with arrow keys", () => {
+    const onChangeSV = vi.fn();
+    const result = renderWithProviders(
+      <SaturationPanel hue={0} saturation={50} value={50} onChangeSV={onChangeSV} size={100} />,
+    );
+    const slider = result.container.querySelector(
+      '[role="slider"][aria-label="Saturation and brightness"]',
+    );
+    expect(slider).toBeTruthy();
+    fireEvent.keyDown(slider!, { key: "ArrowRight" });
+    expect(onChangeSV).toHaveBeenCalledWith(51, 50);
+    fireEvent.keyDown(slider!, { key: "ArrowUp" });
+    expect(onChangeSV).toHaveBeenCalledWith(50, 51);
+  });
+
+  it("paints a vertical hue rail (Polaris)", () => {
+    const result = renderWithProviders(
+      <HueStrip hue={210} onChangeHue={() => {}} height={100} orientation="vertical" />,
+    );
+    const html = result.container.innerHTML;
+    expect(html).toContain("linear-gradient(to bottom, #f00");
+    const rail = result.container.querySelector('[data-testid="color-picker-hue"]');
+    expect(rail?.getAttribute("aria-orientation")).toBe("vertical");
+  });
+
+  it("does not open when disabled", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(
+      <ColorPicker label="Color" name={undefined as never} disabled value="#112233" />,
+    );
+    const input = result.container.querySelector("input");
+    await act(async () => {
+      if (input) fireEvent.click(input);
+    });
+    expect(document.body.querySelector('[aria-label="Hue"]')).toBeNull();
   });
 
   describe("gradient backgrounds", () => {

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof ColorPicker> = {
     docs: {
       description: {
         component:
-          "A color picker with a 2D saturation/value panel, hue strip, preset swatches, and hex input. Opens in a popover dropdown.",
+          "Color picker: Spectrum ColorArea + Polaris vertical hue (and alpha), ColorSwatchPicker, ColorField. Opens in a popover.",
       },
     },
   },

package/src/fields/ColorPicker/gradients.native.tsx

@@ -50,13 +50,28 @@ export function SaturationBackground({
   );
 }
 
-export function HueBackground({ width, height }: { width: number; height: number }) {
+function axis(orientation: "horizontal" | "vertical" | undefined) {
+  return orientation === "vertical"
+    ? { start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 } }
+    : { start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 } };
+}
+
+export function HueBackground({
+  width,
+  height,
+  orientation = "horizontal",
+}: {
+  width: number;
+  height: number;
+  orientation?: "horizontal" | "vertical";
+}) {
+  const { start, end } = axis(orientation);
   return (
     <LinearGradient
       colors={[...HUE_COLORS]}
       locations={[...HUE_LOCATIONS]}
-      start={{ x: 0, y: 0.5 }}
-      end={{ x: 1, y: 0.5 }}
+      start={start}
+      end={end}
       style={[styles.host, { width, height }]}
       pointerEvents="none"
     />
@@ -67,20 +82,23 @@ export function AlphaBackground({
   hex,
   width,
   height,
+  orientation = "horizontal",
 }: {
   hex: string;
   width: number;
   height: number;
+  orientation?: "horizontal" | "vertical";
 }) {
   const box = { width, height };
+  const { start, end } = axis(orientation);
   return (
     <RNView style={[styles.host, box]} pointerEvents="none">
       <RNView style={[StyleSheet.absoluteFill, { backgroundColor: "#E5E5E5" }]} />
       <RNView style={[StyleSheet.absoluteFill, { backgroundColor: "#BBBBBB", opacity: 0.35 }]} />
       <LinearGradient
         colors={[TRANSPARENT, hex]}
-        start={{ x: 0, y: 0.5 }}
-        end={{ x: 1, y: 0.5 }}
+        start={start}
+        end={end}
         style={StyleSheet.absoluteFill}
       />
     </RNView>

package/src/fields/ColorPicker/gradients.tsx

@@ -43,19 +43,34 @@ export function SaturationBackground({
   );
 }
 
-export function HueBackground(_props: { width?: number; height?: number }) {
+export function HueBackground({
+  orientation = "horizontal",
+}: {
+  width?: number;
+  height?: number;
+  orientation?: "horizontal" | "vertical";
+}) {
+  const dir = orientation === "vertical" ? "to bottom" : "to right";
   return (
     <View
       {...fill}
       style={{
-        background:
-          "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+        background: `linear-gradient(${dir}, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)`,
       }}
     />
   );
 }
 
-export function AlphaBackground({ hex }: { hex: string; width?: number; height?: number }) {
+export function AlphaBackground({
+  hex,
+  orientation = "horizontal",
+}: {
+  hex: string;
+  width?: number;
+  height?: number;
+  orientation?: "horizontal" | "vertical";
+}) {
+  const dir = orientation === "vertical" ? "to bottom" : "to right";
   return (
     <>
       <View
@@ -70,7 +85,7 @@ export function AlphaBackground({ hex }: { hex: string; width?: number; height?:
       <View
         {...fill}
         style={{
-          background: `linear-gradient(to right, transparent, ${hex})`,
+          background: `linear-gradient(${dir}, transparent, ${hex})`,
         }}
       />
     </>