@dloizides/ui-forms 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 1.4.0
+
+- **Accessibility (WCAG 2.1 AA) hardening — additive + backward-compatible.**
+  - `FormField`: the error message is now programmatically tied to the input — the input gets
+    `aria-invalid` when errored and `aria-describedby` pointing at the error line (which is a
+    `role="alert"` live region), and `aria-required` when `required`. The required `*` is marked
+    decorative (`aria-hidden` / `accessibilityElementsHidden`) so a screen reader hears "required"
+    (via `aria-required`) instead of "star".
+  - `ThemedTextInput`: new optional `describedById` + `requiredField` props forward
+    `aria-describedby` / `aria-required`, and it emits `aria-invalid` from `hasError` (web only;
+    no-ops on native). Existing callers are unaffected.
+  - `FormCheckbox`: now keyboard-operable — the `role="checkbox"` Pressable renders a `<div>`
+    (no free Enter/Space), so an explicit web-only Enter/Space handler toggles it (WCAG 2.1.1).
+  - `ChipSelector`: chips gain a `hitSlop` so the touch target reaches ~44px WITHOUT changing the
+    rendered pill size, and expose `accessibilityState.disabled` when the selector is disabled.
+  - `useThemedInput`: the focus/hover CSS transition now collapses to instant when the user
+    requests `prefers-reduced-motion: reduce` (WCAG 2.3.3, web only).
+
+## 1.3.0
+
+- `ChipSelector` gains a `variant` prop (`'solid' | 'outline'`, default `'solid'`). `solid` is the
+  original filled-pill look (selected = solid brand fill, white ink) — existing consumers
+  (erevna / katalogos / kefi) render **identically**, no change. `outline` is the AML v1 console
+  look: an outlined pill on a muted fill where the **selected** state is a subtle tinted-outline
+  (brand border + brand ink + a low-alpha brand wash), NOT a solid fill; on web, hover lifts the
+  border + ink to the brand colour. Fully theme-driven (brand colour + alpha, border/text from the
+  theme), so it re-themes per tenant. Additive + backward-compatible.
+
 ## 1.2.0
 
 - Add `ThemedTextInput` + `useThemedInput` — the shared "readable + lively" text-input treatment,

package/dist/index.d.mts

@@ -33,6 +33,13 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
 interface ThemedTextInputProps extends TextInputProps {
     /** Render with the error border colour (matches `FormField`'s error treatment). */
     hasError?: boolean;
+    /**
+     * id of an element describing this input (e.g. an error/hint line). Linked via
+     * `aria-describedby` on web so a screen reader reads it after the field's name. No-op native.
+     */
+    describedById?: string;
+    /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
+    requiredField?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -66,8 +73,17 @@ declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
 
 /**
  * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
  */
 
+/** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
+type ChipVariant = 'solid' | 'outline';
 interface ChipOption<T> {
     value: T;
     label: string;
@@ -79,9 +95,11 @@ interface ChipSelectorProps<T> {
     onChange: (value: T) => void;
     multiple?: boolean;
     disabled?: boolean;
+    /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
+    variant?: ChipVariant;
     containerStyle?: ViewStyle;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -124,4 +142,4 @@ interface FormCheckboxProps {
 }
 declare const FormCheckbox: ({ label, value, onValueChange, onChange, hint, description, disabled, containerStyle, testID, accessibilityLabel, accessibilityHint, }: FormCheckboxProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };
+export { type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.d.ts

@@ -33,6 +33,13 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
 interface ThemedTextInputProps extends TextInputProps {
     /** Render with the error border colour (matches `FormField`'s error treatment). */
     hasError?: boolean;
+    /**
+     * id of an element describing this input (e.g. an error/hint line). Linked via
+     * `aria-describedby` on web so a screen reader reads it after the field's name. No-op native.
+     */
+    describedById?: string;
+    /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
+    requiredField?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -66,8 +73,17 @@ declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
 
 /**
  * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
  */
 
+/** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
+type ChipVariant = 'solid' | 'outline';
 interface ChipOption<T> {
     value: T;
     label: string;
@@ -79,9 +95,11 @@ interface ChipSelectorProps<T> {
     onChange: (value: T) => void;
     multiple?: boolean;
     disabled?: boolean;
+    /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
+    variant?: ChipVariant;
     containerStyle?: ViewStyle;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -124,4 +142,4 @@ interface FormCheckboxProps {
 }
 declare const FormCheckbox: ({ label, value, onValueChange, onChange, hint, description, disabled, containerStyle, testID, accessibilityLabel, accessibilityHint, }: FormCheckboxProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };
+export { type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var React3 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/FormField/FormField.tsx
 var IS_WEB = reactNative.Platform.OS === "web";
@@ -24,6 +24,10 @@ var RED_START = 1;
 var GREEN_START = 3;
 var BLUE_START = 5;
 var CHANNEL_END_OFFSET = 2;
+function prefersReducedMotion() {
+  if (!IS_WEB || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function withAlpha(color, alpha) {
   const hex = color.trim();
   const isHex = hex.charAt(0) === "#" && (hex.length === HEX_FULL_LENGTH || hex.length === HEX_SHORT_LENGTH);
@@ -38,27 +42,27 @@ function useThemedInput(options = {}) {
   const { hasError = false, onFocus, onBlur } = options;
   const { theme } = uiFeedback.useUi();
   const { colors, palette, semantic } = theme;
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isHovered, setIsHovered] = React.useState(false);
-  const handleFocus = React.useCallback(
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const [isHovered, setIsHovered] = React3.useState(false);
+  const handleFocus = React3.useCallback(
     (e) => {
       setIsFocused(true);
       onFocus?.(e);
     },
     [onFocus]
   );
-  const handleBlur = React.useCallback(
+  const handleBlur = React3.useCallback(
     (e) => {
       setIsFocused(false);
       onBlur?.(e);
     },
     [onBlur]
   );
-  const handleHoverIn = React.useCallback(() => setIsHovered(true), []);
-  const handleHoverOut = React.useCallback(() => setIsHovered(false), []);
+  const handleHoverIn = React3.useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = React3.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
   const errorColor = semantic.error["500"];
-  const style = React.useMemo(() => {
+  const style = React3.useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
@@ -68,7 +72,8 @@ function useThemedInput(options = {}) {
     const ring = isFocused && !hasError ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(primary, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
-      transitionDuration: TRANSITION_DURATION,
+      // Collapse the eased transition to instant when the user prefers reduced motion.
+      transitionDuration: prefersReducedMotion() ? "0s" : TRANSITION_DURATION,
       transitionTimingFunction: TRANSITION_TIMING,
       boxShadow: ring,
       outlineStyle: "none"
@@ -85,8 +90,8 @@ function useThemedInput(options = {}) {
     primary,
     errorColor
   ]);
-  const focusBind = React.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
-  const hoverBind = React.useMemo(
+  const focusBind = React3.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
+  const hoverBind = React3.useMemo(
     () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
@@ -99,19 +104,26 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput2({ hasError = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+var IS_WEB2 = reactNative.Platform.OS === "web";
+var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
   const {
     style: themedStyle,
     placeholderTextColor: themedPlaceholder,
     focusBind,
     hoverBind
   } = useThemedInput({ hasError, onFocus, onBlur });
+  const webA11y = IS_WEB2 ? {
+    "aria-invalid": hasError ? true : void 0,
+    "aria-describedby": describedById,
+    "aria-required": requiredField ? true : void 0
+  } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TextInput,
     {
       ref,
       placeholderTextColor: placeholderTextColor ?? themedPlaceholder,
       ...rest,
+      ...webA11y,
       ...hoverBind,
       onFocus: focusBind.onFocus,
       onBlur: focusBind.onBlur,
@@ -145,6 +157,14 @@ var styles = reactNative.StyleSheet.create({
     marginTop: 4
   }
 });
+var formFieldSeq = 0;
+function useErrorId() {
+  const [id] = React3__default.default.useState(() => {
+    formFieldSeq += 1;
+    return `form-field-error-${String(formFieldSeq)}`;
+  });
+  return id;
+}
 var FormField = ({
   label,
   required = false,
@@ -156,7 +176,8 @@ var FormField = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = typeof error === "string" && error !== "";
-  const themeStyles = React__default.default.useMemo(
+  const errorId = useErrorId();
+  const themeStyles = React3__default.default.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
@@ -168,24 +189,52 @@ var FormField = ({
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
       label,
       " ",
-      required ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: themeStyles.requiredMark, children: "*" }) : null
+      required ? (
+        // The asterisk is decorative — `requiredField` conveys "required" to assistive tech.
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
+      ) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ThemedTextInput,
       {
         accessibilityHint: `Enter ${label}`,
         accessibilityLabel: label,
+        describedById: hasError ? errorId : void 0,
         hasError,
+        requiredField: required,
         style: styles.input,
         testID: "form-field-input",
         ...textInputProps
       }
     ),
-    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.errorText, themeStyles.errorText], children: error }) : null
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
   ] });
 };
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
+var SOLID_RADIUS = 20;
+var OUTLINE_RADIUS = 999;
+var OUTLINE_PAD_H = 12;
+var OUTLINE_PAD_V = 5;
+var OUTLINE_FONT_SIZE = 13;
+var OUTLINE_TINT_ALPHA = 0.1;
+var HEX_SHORT_LENGTH2 = 3;
+var HEX_RADIX2 = 16;
+var RGB_R_START = 0;
+var RGB_R_END = 2;
+var RGB_G_END = 4;
+var RGB_B_END = 6;
+var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+function withAlpha2(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const isShort = normalized.length === HEX_SHORT_LENGTH2;
+  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
+  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
+  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
+  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
+  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
+  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
+}
 var styles2 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 8,
@@ -202,12 +251,74 @@ var styles2 = reactNative.StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 20,
+    borderRadius: SOLID_RADIUS,
     backgroundColor: TRANSPARENT_COLOR,
     borderWidth: 1
   },
-  chipText: {}
+  chipOutline: {
+    paddingHorizontal: OUTLINE_PAD_H,
+    paddingVertical: OUTLINE_PAD_V,
+    borderRadius: OUTLINE_RADIUS,
+    borderWidth: 1
+  },
+  chipText: {},
+  chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
+function OutlineChip({
+  option,
+  selected,
+  disabled,
+  colors,
+  onPress
+}) {
+  const [hovered, setHovered] = React3__default.default.useState(false);
+  const active = selected || hovered;
+  const borderColor = active ? colors.primary : colors.border;
+  const backgroundColor = selected ? colors.tint : colors.muted;
+  const textColor = active ? colors.primary : colors.textMuted;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint: `Selects ${option.label}`,
+      accessibilityLabel: option.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled },
+      disabled,
+      hitSlop: CHIP_HIT_SLOP,
+      style: styles2.chipWrapper,
+      testID: `chip-selector-chip-${String(option.value)}`,
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      onPress,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, styles2.chipTextOutline, { color: textColor }], children: option.label }) })
+    }
+  );
+}
+function SolidChip({
+  option,
+  selected,
+  disabled,
+  colors,
+  onPress
+}) {
+  const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
+  const textColor = selected ? WHITE_COLOR : colors.textStrong;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.TouchableOpacity,
+    {
+      accessibilityHint: `Selects ${option.label}`,
+      accessibilityLabel: option.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled },
+      disabled,
+      hitSlop: CHIP_HIT_SLOP,
+      style: styles2.chipWrapper,
+      testID: `chip-selector-chip-${String(option.value)}`,
+      onPress,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, { color: textColor }], children: option.label }) })
+    }
+  );
+}
 var ChipSelector = ({
   label,
   options,
@@ -215,57 +326,52 @@ var ChipSelector = ({
   onChange,
   multiple = false,
   disabled = false,
+  variant = "solid",
   containerStyle
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const primaryColor = palette.primary["500"];
   const hasLabel = typeof label === "string" && label !== "";
-  const themeStyles = React__default.default.useMemo(() => {
-    const labelStyle = { color: colors.text };
-    const chipStyle = { borderColor: colors.border };
-    const chipSelectedStyle = { backgroundColor: primaryColor };
-    const chipTextStyle = { color: colors.text };
-    const chipTextSelectedStyle = { color: WHITE_COLOR };
+  const chipColors = React3__default.default.useMemo(() => {
+    const primary = palette.primary["500"];
     return {
-      label: labelStyle,
-      chip: chipStyle,
-      chipSelected: chipSelectedStyle,
-      chipText: chipTextStyle,
-      chipTextSelected: chipTextSelectedStyle
+      border: colors.border,
+      textStrong: colors.text,
+      textMuted: colors.textSecondary,
+      primary,
+      muted: colors.background,
+      tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
     };
-  }, [colors.border, colors.text, primaryColor]);
+  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette.primary]);
+  const labelStyle = React3__default.default.useMemo(() => ({ color: colors.text }), [colors.text]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
-    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, themeStyles.label], children: label }) : null,
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, labelStyle], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.chipContainer, children: options.map((option) => {
       const selected = isSelected(option.value);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TouchableOpacity,
+      const onPress = () => onChange(option.value);
+      return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OutlineChip,
+        {
+          colors: chipColors,
+          disabled,
+          option,
+          selected,
+          onPress
+        },
+        String(option.value)
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        SolidChip,
         {
-          accessibilityHint: `Selects ${option.label}`,
-          accessibilityLabel: option.label,
-          accessibilityRole: "button",
-          accessibilityState: { selected },
+          colors: chipColors,
           disabled,
-          style: styles2.chipWrapper,
-          testID: `chip-selector-chip-${String(option.value)}`,
-          onPress: () => onChange(option.value),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.View,
-            {
-              style: [
-                styles2.chip,
-                themeStyles.chip,
-                selected ? themeStyles.chipSelected : null
-              ],
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null], children: option.label })
-            }
-          )
+          option,
+          selected,
+          onPress
         },
         String(option.value)
       );
@@ -304,7 +410,7 @@ var FormSwitch = ({
   const { theme } = uiFeedback.useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React3__default.default.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -338,6 +444,7 @@ var FormSwitch = ({
     }
   );
 };
+var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
 var HINT_FONT_SIZE = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
@@ -394,7 +501,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React3__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };
@@ -406,6 +513,14 @@ var FormCheckbox = ({
     if (onValueChange) onValueChange(next);
     if (onChange) onChange(next);
   };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const key = event.key ?? "";
+    if (!ACTIVATION_KEYS.includes(key)) return;
+    if (typeof event.preventDefault === "function") event.preventDefault();
+    toggle();
+  };
+  const keyboardProps = reactNative.Platform.OS === "web" ? { onKeyDown: handleKeyDown } : {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Pressable,
     {
@@ -419,6 +534,7 @@ var FormCheckbox = ({
       role: "checkbox",
       style: [styles4.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
+      ...keyboardProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [