@dloizides/ui-forms 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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.**

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'> {
@@ -142,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'> {
@@ -142,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";
@@ -131,85 +198,37 @@ 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 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,
   error,
   containerStyle,
   ...textInputProps
-}) => {
-  const { theme } = uiFeedback.useUi();
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
-  const hasError = typeof error === "string" && error !== "";
-  const errorId = useErrorId();
-  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 ? (
-        // 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, { nativeID: errorId, role: "alert", 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;
@@ -235,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"
@@ -285,12 +304,12 @@ function OutlineChip({
       accessibilityState: { selected, disabled },
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles2.chipWrapper,
+      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 }) })
     }
   );
 }
@@ -312,10 +331,10 @@ function SolidChip({
       accessibilityState: { selected, disabled },
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles2.chipWrapper,
+      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 }) })
     }
   );
 }
@@ -350,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(
@@ -379,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",
@@ -419,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,
@@ -450,7 +469,7 @@ 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",
@@ -532,14 +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
         ] })
       ]
     }
@@ -547,6 +566,7 @@ var FormCheckbox = ({
 };
 
 exports.ChipSelector = ChipSelector;
+exports.Field = Field;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;