@dloizides/ui-forms 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 1.5.0
+
+- **Add `Field` — the generic label-over-control wrapper.** `FormField` is hard-wired to a text
+  input (`FormFieldProps extends Omit<TextInputProps,'style'>`), so any NON-text control (a
+  dropdown, a date picker, a chip selector) had no shared way to get a label — and ended up
+  visually misaligned next to its `FormField` siblings: the control's box started ~21px higher
+  (no label row) and it missed `FormField`'s `marginBottom: 16`, so wrapped rows lost their
+  vertical rhythm. This was hand-rolled in 5 places across zygos-web and aml-v2.
+  `Field` takes `{ label, required?, error?, children, containerStyle?, testID? }` and renders the
+  same label row / required mark / error line / spacing.
+- **`FormField` now composes `Field` internally**, so the two can never drift apart — the metrics
+  live in exactly one place. `FormFieldProps` and every rendered attribute (`form-field-input`
+  testID, `aria-invalid` / `aria-describedby` / `aria-required`, the `role="alert"` error line)
+  are unchanged: fully backward-compatible.
+- `Field`'s `children` may be a plain node (the common case) or a render function receiving
+  `{ describedById, hasError }`, so a custom control can wire the error line into its own
+  `aria-describedby` / invalid state exactly the way `FormField` does.
+
+## 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

package/README.md

@@ -1,7 +1,7 @@
 # @dloizides/ui-forms
 
 Themable, brand-agnostic React Native (RN-web) **form** components for the dloizides.com
-portfolio: `FormField`, `ChipSelector`, `FormSwitch`. They read theme colours from the shared
+portfolio: `Field`, `FormField`, `ChipSelector`, `FormSwitch`. They read theme colours from the shared
 `@dloizides/ui-feedback` UI context (`useUi`) — mount one `UiProvider` / `FeedbackUiProvider`
 at your app root and these components pick up your theme automatically.
 
@@ -24,6 +24,44 @@ import { FormField, ChipSelector, FormSwitch } from '@dloizides/ui-forms';
 <FormSwitch label="Email notifications" value={notify} onValueChange={setNotify} />
 ```
 
+## `Field` — label any control, not just a text input
+
+`FormField` is hard-wired to a text input. For **any other control** — a dropdown, a date picker,
+a chip selector — wrap it in `Field` to get the identical label row, required mark, error line and
+bottom spacing. This is what keeps a dropdown aligned with the `FormField` next to it: without it
+the dropdown's box starts a label-row higher and the row loses its vertical rhythm.
+
+```tsx
+import { Field } from '@dloizides/ui-forms';
+
+<Field label="Currency" required error={errors.currency}>
+  <ModalDropdown options={currencies} value={currency} onChange={setCurrency} />
+</Field>
+```
+
+`FormField` composes `Field` internally, so the two can never drift out of alignment.
+
+To wire the error line into a custom control's own `aria-describedby` / invalid state, pass a
+**function** child — it receives `{ describedById, hasError }` (`describedById` is `undefined`
+when there is no error):
+
+```tsx
+<Field label="Country" error={errors.country}>
+  {({ describedById, hasError }) => (
+    <CountryPicker aria-describedby={describedById} hasError={hasError} value={country} onChange={setCountry} />
+  )}
+</Field>
+```
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `label` | `string` | required |
+| `children` | `ReactNode \| (ctx) => ReactNode` | the control |
+| `required` | `boolean` | renders a decorative `*` (hidden from assistive tech) |
+| `error` | `string` | renders a `role="alert"` line, linked via the child's `describedById` |
+| `containerStyle` | `ViewStyle` | merged over the container |
+| `testID` | `string` | on the container |
+
 The injected theme needs `colors.{surface,text,textSecondary,border}`, `palette.primary['500']`
 and `semantic.error['500']` — supplied via `@dloizides/ui-feedback`'s provider. Without a provider
 the components fall back to a neutral default theme.

package/dist/index.d.mts

@@ -1,12 +1,49 @@
 import React from 'react';
-import { TextInputProps, ViewStyle, TextInput, TextStyle } from 'react-native';
+import { ViewStyle, TextInputProps, TextInput, TextStyle } from 'react-native';
+
+/**
+ * Field — the generic "label over a control, error under it" wrapper.
+ *
+ * `FormField` is hard-wired to a text input, so any NON-text control (a dropdown, a date picker,
+ * a chip selector) had no shared way to get a label — and ended up visually misaligned next to
+ * its `FormField` siblings: its box started a label-row higher, and it missed the container's
+ * bottom margin so wrapped rows lost their vertical rhythm.
+ *
+ * `Field` is that label row + spacing, control-agnostic. Its metrics are the single source of
+ * truth: `FormField` composes `Field` internally, so the two can never drift apart.
+ *
+ * Children may be a plain node (the common case — just wrap your control) or a render function
+ * receiving `{ describedById, hasError }`, so a custom control can wire the error line into its
+ * own `aria-describedby` / invalid state exactly the way `FormField` does.
+ */
+
+/** What a render-function child receives, so it can mirror `FormField`'s error wiring. */
+interface FieldChildContext {
+    /** id of the rendered error line, or `undefined` when there is no error. */
+    describedById?: string;
+    hasError: boolean;
+}
+type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
+interface FieldProps {
+    label: string;
+    children: FieldChildren;
+    required?: boolean;
+    error?: string;
+    containerStyle?: ViewStyle;
+    testID?: string;
+}
+declare const Field: ({ label, children, required, error, containerStyle, testID, }: FieldProps) => React.ReactElement;
 
 /**
  * Reusable form field — labelled text input with optional required mark + error.
  *
- * The input itself is the shared `ThemedTextInput` primitive, so every FormField gets the
- * readable + lively treatment (dark text, subtle off-white rest background, brand focus
- * animation with a soft ring) for free, driven by the active theme.
+ * The label row, the required mark, the error line and the container spacing all come from the
+ * generic `Field` wrapper, so a `FormField` and a `Field`-wrapped dropdown sitting next to each
+ * other line up exactly and can never drift apart. FormField only adds the control itself.
+ *
+ * The input is the shared `ThemedTextInput` primitive, so every FormField gets the readable +
+ * lively treatment (dark text, subtle off-white rest background, brand focus animation with a
+ * soft ring) for free, driven by the active theme.
  */
 
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
@@ -33,6 +70,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>>;
 
@@ -135,4 +179,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, type ChipVariant, 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, Field, type FieldChildContext, type FieldChildren, type FieldProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.d.ts

@@ -1,12 +1,49 @@
 import React from 'react';
-import { TextInputProps, ViewStyle, TextInput, TextStyle } from 'react-native';
+import { ViewStyle, TextInputProps, TextInput, TextStyle } from 'react-native';
+
+/**
+ * Field — the generic "label over a control, error under it" wrapper.
+ *
+ * `FormField` is hard-wired to a text input, so any NON-text control (a dropdown, a date picker,
+ * a chip selector) had no shared way to get a label — and ended up visually misaligned next to
+ * its `FormField` siblings: its box started a label-row higher, and it missed the container's
+ * bottom margin so wrapped rows lost their vertical rhythm.
+ *
+ * `Field` is that label row + spacing, control-agnostic. Its metrics are the single source of
+ * truth: `FormField` composes `Field` internally, so the two can never drift apart.
+ *
+ * Children may be a plain node (the common case — just wrap your control) or a render function
+ * receiving `{ describedById, hasError }`, so a custom control can wire the error line into its
+ * own `aria-describedby` / invalid state exactly the way `FormField` does.
+ */
+
+/** What a render-function child receives, so it can mirror `FormField`'s error wiring. */
+interface FieldChildContext {
+    /** id of the rendered error line, or `undefined` when there is no error. */
+    describedById?: string;
+    hasError: boolean;
+}
+type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
+interface FieldProps {
+    label: string;
+    children: FieldChildren;
+    required?: boolean;
+    error?: string;
+    containerStyle?: ViewStyle;
+    testID?: string;
+}
+declare const Field: ({ label, children, required, error, containerStyle, testID, }: FieldProps) => React.ReactElement;
 
 /**
  * Reusable form field — labelled text input with optional required mark + error.
  *
- * The input itself is the shared `ThemedTextInput` primitive, so every FormField gets the
- * readable + lively treatment (dark text, subtle off-white rest background, brand focus
- * animation with a soft ring) for free, driven by the active theme.
+ * The label row, the required mark, the error line and the container spacing all come from the
+ * generic `Field` wrapper, so a `FormField` and a `Field`-wrapped dropdown sitting next to each
+ * other line up exactly and can never drift apart. FormField only adds the control itself.
+ *
+ * The input is the shared `ThemedTextInput` primitive, so every FormField gets the readable +
+ * lively treatment (dark text, subtle off-white rest background, brand focus animation with a
+ * soft ring) for free, driven by the active theme.
  */
 
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
@@ -33,6 +70,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>>;
 
@@ -135,4 +179,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, type ChipVariant, 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, Field, type FieldChildContext, type FieldChildren, type FieldProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.js

@@ -9,7 +9,74 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
 
-// src/FormField/FormField.tsx
+// src/Field/Field.tsx
+var CONTAINER_MARGIN_BOTTOM = 16;
+var LABEL_FONT_SIZE = 13;
+var LABEL_FONT_WEIGHT = "600";
+var LABEL_MARGIN_BOTTOM = 4;
+var ERROR_FONT_SIZE = 12;
+var ERROR_MARGIN_TOP = 4;
+var styles = reactNative.StyleSheet.create({
+  container: {
+    marginBottom: CONTAINER_MARGIN_BOTTOM
+  },
+  label: {
+    marginBottom: LABEL_MARGIN_BOTTOM,
+    fontSize: LABEL_FONT_SIZE,
+    fontWeight: LABEL_FONT_WEIGHT
+  },
+  errorText: {
+    fontSize: ERROR_FONT_SIZE,
+    marginTop: ERROR_MARGIN_TOP
+  }
+});
+var fieldSeq = 0;
+function useFieldErrorId() {
+  const [id] = React3__default.default.useState(() => {
+    fieldSeq += 1;
+    return `field-error-${String(fieldSeq)}`;
+  });
+  return id;
+}
+function hasFieldError(error) {
+  return typeof error === "string" && error !== "";
+}
+var Field = ({
+  label,
+  children,
+  required = false,
+  error,
+  containerStyle,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const { colors, semantic } = theme;
+  const errorColor = semantic.error["500"];
+  const hasError = hasFieldError(error);
+  const errorId = useFieldErrorId();
+  const themeStyles = React3__default.default.useMemo(
+    () => ({
+      label: { color: colors.textSecondary },
+      requiredMark: { color: errorColor },
+      errorText: { color: errorColor }
+    }),
+    [colors.textSecondary, errorColor]
+  );
+  const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
+      label,
+      " ",
+      required ? (
+        // The asterisk is decorative — the control's `aria-required` conveys "required" to
+        // assistive tech, so a screen reader says "required" instead of "star".
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
+      ) : null
+    ] }),
+    control,
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
+  ] });
+};
 var IS_WEB = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
@@ -24,6 +91,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);
@@ -68,7 +139,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"
@@ -99,19 +171,26 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var ThemedTextInput = React3__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,
@@ -119,30 +198,16 @@ var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInpu
     }
   );
 });
-var CONTAINER_MARGIN_BOTTOM = 16;
 var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
-var ERROR_FONT_SIZE = 12;
-var LABEL_FONT_SIZE = 13;
-var styles = reactNative.StyleSheet.create({
-  container: {
-    marginBottom: CONTAINER_MARGIN_BOTTOM
-  },
-  label: {
-    marginBottom: 4,
-    fontSize: LABEL_FONT_SIZE,
-    fontWeight: "600"
-  },
+var INPUT_BORDER_WIDTH = 1;
+var styles2 = reactNative.StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
     borderRadius: INPUT_BORDER_RADIUS,
-    borderWidth: 1
-  },
-  errorText: {
-    fontSize: ERROR_FONT_SIZE,
-    marginTop: 4
+    borderWidth: INPUT_BORDER_WIDTH
   }
 });
 var FormField = ({
@@ -151,39 +216,19 @@ var FormField = ({
   error,
   containerStyle,
   ...textInputProps
-}) => {
-  const { theme } = uiFeedback.useUi();
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
-  const hasError = typeof error === "string" && error !== "";
-  const themeStyles = React3__default.default.useMemo(
-    () => ({
-      label: { color: colors.textSecondary },
-      requiredMark: { color: errorColor },
-      errorText: { color: errorColor }
-    }),
-    [colors.textSecondary, errorColor]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
-      label,
-      " ",
-      required ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: themeStyles.requiredMark, children: "*" }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ThemedTextInput,
-      {
-        accessibilityHint: `Enter ${label}`,
-        accessibilityLabel: label,
-        hasError,
-        style: styles.input,
-        testID: "form-field-input",
-        ...textInputProps
-      }
-    ),
-    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.errorText, themeStyles.errorText], children: error }) : null
-  ] });
-};
+}) => /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(
+  ThemedTextInput,
+  {
+    accessibilityHint: `Enter ${label}`,
+    accessibilityLabel: label,
+    describedById,
+    hasError,
+    requiredField: required,
+    style: styles2.input,
+    testID: "form-field-input",
+    ...textInputProps
+  }
+) });
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
 var SOLID_RADIUS = 20;
@@ -198,6 +243,7 @@ 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;
@@ -208,7 +254,7 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 8,
     fontWeight: "600"
@@ -255,14 +301,15 @@ function OutlineChip({
       accessibilityHint: `Selects ${option.label}`,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
-      accessibilityState: { selected },
+      accessibilityState: { selected, disabled },
       disabled,
-      style: styles2.chipWrapper,
+      hitSlop: CHIP_HIT_SLOP,
+      style: styles3.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 }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, styles3.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -281,12 +328,13 @@ function SolidChip({
       accessibilityHint: `Selects ${option.label}`,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
-      accessibilityState: { selected },
+      accessibilityState: { selected, disabled },
       disabled,
-      style: styles2.chipWrapper,
+      hitSlop: CHIP_HIT_SLOP,
+      style: styles3.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 }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -321,8 +369,8 @@ var ChipSelector = ({
     return value === optionValue;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
-    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) => {
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, labelStyle], children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.chipContainer, children: options.map((option) => {
       const selected = isSelected(option.value);
       const onPress = () => onChange(option.value);
       return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -350,7 +398,7 @@ var ChipSelector = ({
   ] });
 };
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -390,13 +438,13 @@ var FormSwitch = ({
     reactNative.View,
     {
       style: [
-        styles3.container,
+        styles4.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Switch,
@@ -415,12 +463,13 @@ var FormSwitch = ({
     }
   );
 };
+var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
 var HINT_FONT_SIZE = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -483,6 +532,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,
     {
@@ -494,13 +551,14 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles4.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles5.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: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -508,6 +566,7 @@ var FormCheckbox = ({
 };
 
 exports.ChipSelector = ChipSelector;
+exports.Field = Field;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;