@dloizides/ui-forms 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.1.0
+
+- Add `FormCheckbox` — a native-safe (`Pressable`-based, RN-web + native) themed checkbox: a rounded
+  square that fills with the brand colour and shows a check glyph when on, with a label and optional
+  hint. Mirrors `FormSwitch`'s prop shape (`value`, `onValueChange`/`onChange`, `label`, `hint`,
+  `disabled`, `testID`, a11y) so it is a drop-in for boolean toggles that should read as checkboxes.
+  Exposes `role="checkbox"` + `aria-checked` / `accessibilityState={{ checked }}`.
+
 ## 1.0.0
 
 Initial release. Extracted the proven duplicated form components from erevna-web ↔ katalogos-web

package/dist/index.d.mts

@@ -48,4 +48,29 @@ interface FormSwitchProps {
 }
 declare const FormSwitch: ({ label, value, onValueChange, disabled, description, containerStyle, testID, accessibilityHint, }: FormSwitchProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps };
+/**
+ * Reusable, native-safe checkbox — a themed `Pressable` (works on RN-web AND native, where RN has
+ * no built-in checkbox). A small rounded square that fills with the brand colour and shows a check
+ * glyph when on, with a label and an optional hint. Mirrors `FormSwitch`'s prop shape so it is a
+ * drop-in replacement for the boolean toggles v1 renders as checkboxes.
+ */
+
+interface FormCheckboxProps {
+    label: string;
+    value: boolean;
+    /** Primary change handler (mirrors `FormSwitch`). `onChange` is accepted as an alias. */
+    onValueChange?: (value: boolean) => void;
+    /** Alias for `onValueChange` so either name works as a drop-in. */
+    onChange?: (value: boolean) => void;
+    /** Optional secondary description shown under the label. `description` is accepted as an alias. */
+    hint?: string;
+    description?: string;
+    disabled?: boolean;
+    containerStyle?: ViewStyle;
+    testID?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+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 };

package/dist/index.d.ts

@@ -48,4 +48,29 @@ interface FormSwitchProps {
 }
 declare const FormSwitch: ({ label, value, onValueChange, disabled, description, containerStyle, testID, accessibilityHint, }: FormSwitchProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps };
+/**
+ * Reusable, native-safe checkbox — a themed `Pressable` (works on RN-web AND native, where RN has
+ * no built-in checkbox). A small rounded square that fills with the brand colour and shows a check
+ * glyph when on, with a label and an optional hint. Mirrors `FormSwitch`'s prop shape so it is a
+ * drop-in replacement for the boolean toggles v1 renders as checkboxes.
+ */
+
+interface FormCheckboxProps {
+    label: string;
+    value: boolean;
+    /** Primary change handler (mirrors `FormSwitch`). `onChange` is accepted as an alias. */
+    onValueChange?: (value: boolean) => void;
+    /** Alias for `onValueChange` so either name works as a drop-in. */
+    onChange?: (value: boolean) => void;
+    /** Optional secondary description shown under the label. `description` is accepted as an alias. */
+    hint?: string;
+    description?: string;
+    disabled?: boolean;
+    containerStyle?: ViewStyle;
+    testID?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+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 };

package/dist/index.js

@@ -233,8 +233,100 @@ var FormSwitch = ({
     }
   );
 };
+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({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+    marginBottom: 12
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderRadius: BOX_RADIUS,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    // Nudge the box to sit on the label's first text line.
+    marginTop: 1
+  },
+  check: {
+    fontSize: CHECK_FONT_SIZE,
+    fontWeight: "700",
+    lineHeight: CHECK_FONT_SIZE
+  },
+  textColumn: {
+    flex: 1
+  },
+  label: {
+    fontWeight: "600"
+  },
+  hint: {
+    fontSize: HINT_FONT_SIZE,
+    marginTop: 2
+  }
+});
+var FormCheckbox = ({
+  label,
+  value,
+  onValueChange,
+  onChange,
+  hint,
+  description,
+  disabled = false,
+  containerStyle,
+  testID = "form-checkbox",
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const { colors, palette } = theme;
+  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 boxOn = { backgroundColor: brand, borderColor: brand };
+    const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
+    const labelStyle = { color: colors.text };
+    const hintStyle = { color: colors.textSecondary };
+    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };
+  }, [brand, colors.border, colors.text, colors.textSecondary]);
+  const toggle = () => {
+    const next = !value;
+    if (onValueChange) onValueChange(next);
+    if (onChange) onChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: accessibilityHint ?? label,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: value, disabled },
+      "aria-checked": value,
+      disabled,
+      onPress: toggle,
+      role: "checkbox",
+      style: [styles4.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      testID,
+      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
+        ] })
+      ]
+    }
+  );
+};
 
 exports.ChipSelector = ChipSelector;
+exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FormField/FormField.tsx","../src/ChipSelector/ChipSelector.tsx","../src/FormSwitch/FormSwitch.tsx"],"names":["StyleSheet","useUi","React","View","jsxs","Text","jsx","TextInput","styles","TouchableOpacity","Switch"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Reusable form field — labelled text input with optional required mark + error.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TextInput, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst CONTAINER_MARGIN_BOTTOM = 16;\nconst INPUT_PADDING = 12;\nconst INPUT_BORDER_RADIUS = 8;\nconst ERROR_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    marginBottom: CONTAINER_MARGIN_BOTTOM,\n  },\n  label: {\n    marginBottom: 4,\n    fontWeight: '600',\n  },\n  input: {\n    padding: INPUT_PADDING,\n    borderRadius: INPUT_BORDER_RADIUS,\n    borderWidth: 1,\n  },\n  errorText: {\n    fontSize: ERROR_FONT_SIZE,\n    marginTop: 4,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  requiredMark: TextStyle;\n  input: TextStyle;\n  errorText: TextStyle;\n}\n\nexport interface FormFieldProps extends Omit<TextInputProps, 'style'> {\n  label: string;\n  required?: boolean;\n  error?: string;\n  containerStyle?: ViewStyle;\n}\n\nexport const FormField = ({\n  label,\n  required = false,\n  error,\n  containerStyle,\n  ...textInputProps\n}: FormFieldProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, semantic } = theme;\n  const errorColor = semantic.error['500'];\n  const hasError = typeof error === 'string' && error !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const requiredMarkStyle: TextStyle = { color: errorColor };\n    const inputStyle: TextStyle = {\n      backgroundColor: colors.surface,\n      color: colors.text,\n      borderColor: hasError ? errorColor : colors.border,\n    };\n    const errorTextStyle: TextStyle = { color: errorColor };\n    return {\n      label: labelStyle,\n      requiredMark: requiredMarkStyle,\n      input: inputStyle,\n      errorText: errorTextStyle,\n    };\n  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      <Text style={[styles.label, themeStyles.label]}>\n        {label} {required ? <Text style={themeStyles.requiredMark}>*</Text> : null}\n      </Text>\n      <TextInput\n        accessibilityHint={`Enter ${label}`}\n        accessibilityLabel={label}\n        placeholderTextColor={colors.textSecondary}\n        style={[styles.input, themeStyles.input]}\n        testID=\"form-field-input\"\n        {...textInputProps}\n      />\n      {hasError ? <Text style={[styles.errorText, themeStyles.errorText]}>{error}</Text> : null}\n    </View>\n  );\n};\n\nexport default FormField;\n","/**\n * Chip/pill selector for selecting one or multiple options.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TouchableOpacity, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst TRANSPARENT_COLOR = 'transparent';\nconst WHITE_COLOR = '#fff';\n\nconst styles = StyleSheet.create({\n  label: {\n    marginBottom: 8,\n    fontWeight: '600',\n  },\n  chipContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  chipWrapper: {\n    marginRight: 8,\n    marginBottom: 8,\n  },\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 20,\n    backgroundColor: TRANSPARENT_COLOR,\n    borderWidth: 1,\n  },\n  chipText: {},\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  chip: ViewStyle;\n  chipSelected: ViewStyle;\n  chipText: TextStyle;\n  chipTextSelected: TextStyle;\n}\n\nexport interface ChipOption<T> {\n  value: T;\n  label: string;\n}\n\nexport interface ChipSelectorProps<T> {\n  label?: string;\n  options: Array<ChipOption<T>>;\n  value: T | T[];\n  onChange: (value: T) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n}\n\nexport const ChipSelector = <T extends string | number>({\n  label,\n  options,\n  value,\n  onChange,\n  multiple = false,\n  disabled = false,\n  containerStyle,\n}: ChipSelectorProps<T>): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const primaryColor = palette.primary['500'];\n  const hasLabel = typeof label === 'string' && label !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const chipStyle: ViewStyle = { borderColor: colors.border };\n    const chipSelectedStyle: ViewStyle = { backgroundColor: primaryColor };\n    const chipTextStyle: TextStyle = { color: colors.text };\n    const chipTextSelectedStyle: TextStyle = { color: WHITE_COLOR };\n    return {\n      label: labelStyle,\n      chip: chipStyle,\n      chipSelected: chipSelectedStyle,\n      chipText: chipTextStyle,\n      chipTextSelected: chipTextSelectedStyle,\n    };\n  }, [colors.border, colors.text, primaryColor]);\n\n  function isSelected(optionValue: T): boolean {\n    if (multiple && Array.isArray(value))\n      return value.includes(optionValue);\n\n    return value === optionValue;\n  }\n\n  return (\n    <View style={containerStyle}>\n      {hasLabel ? <Text style={[styles.label, themeStyles.label]}>{label}</Text> : null}\n      <View style={styles.chipContainer}>\n        {options.map((option) => {\n          const selected = isSelected(option.value);\n          return (\n            <TouchableOpacity\n              key={String(option.value)}\n              accessibilityHint={`Selects ${option.label}`}\n              accessibilityLabel={option.label}\n              accessibilityRole=\"button\"\n              accessibilityState={{ selected }}\n              disabled={disabled}\n              style={styles.chipWrapper}\n              testID={`chip-selector-chip-${String(option.value)}`}\n              onPress={() => onChange(option.value)}\n            >\n              <View\n                style={[\n                  styles.chip,\n                  themeStyles.chip,\n                  selected ? themeStyles.chipSelected : null,\n                ]}\n              >\n                <Text style={[styles.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null]}>\n                  {option.label}\n                </Text>\n              </View>\n            </TouchableOpacity>\n          );\n        })}\n      </View>\n    </View>\n  );\n};\n\nexport default ChipSelector;\n","/**\n * Reusable form switch/toggle with an optional description.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Switch, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst DESCRIPTION_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: 12,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  description: {\n    fontSize: DESCRIPTION_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  description: TextStyle;\n}\n\nexport interface FormSwitchProps {\n  label: string;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  description?: string;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormSwitch = ({\n  label,\n  value,\n  onValueChange,\n  disabled = false,\n  description,\n  containerStyle,\n  testID = 'form-switch',\n  accessibilityHint,\n}: FormSwitchProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors } = theme;\n  const hasDescription = typeof description === 'string' && description !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const descriptionStyle: TextStyle = { color: colors.textSecondary };\n    return { label: labelStyle, description: descriptionStyle };\n  }, [colors.text, colors.textSecondary]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        containerStyle,\n      ]}\n    >\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasDescription ? (\n          <Text style={[styles.description, themeStyles.description]}>{description}</Text>\n        ) : null}\n      </View>\n      <Switch\n        accessibilityHint={accessibilityHint ?? label}\n        accessibilityLabel={label}\n        accessibilityRole=\"switch\"\n        accessibilityState={{ checked: value }}\n        disabled={disabled}\n        testID={testID}\n        value={value}\n        onValueChange={onValueChange}\n      />\n    </View>\n  );\n};\n\nexport default FormSwitch;\n"]}
+{"version":3,"sources":["../src/FormField/FormField.tsx","../src/ChipSelector/ChipSelector.tsx","../src/FormSwitch/FormSwitch.tsx","../src/FormCheckbox/FormCheckbox.tsx"],"names":["StyleSheet","useUi","React","View","jsxs","Text","jsx","TextInput","styles","TouchableOpacity","Switch","Pressable"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Reusable form field — labelled text input with optional required mark + error.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TextInput, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst CONTAINER_MARGIN_BOTTOM = 16;\nconst INPUT_PADDING = 12;\nconst INPUT_BORDER_RADIUS = 8;\nconst ERROR_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    marginBottom: CONTAINER_MARGIN_BOTTOM,\n  },\n  label: {\n    marginBottom: 4,\n    fontWeight: '600',\n  },\n  input: {\n    padding: INPUT_PADDING,\n    borderRadius: INPUT_BORDER_RADIUS,\n    borderWidth: 1,\n  },\n  errorText: {\n    fontSize: ERROR_FONT_SIZE,\n    marginTop: 4,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  requiredMark: TextStyle;\n  input: TextStyle;\n  errorText: TextStyle;\n}\n\nexport interface FormFieldProps extends Omit<TextInputProps, 'style'> {\n  label: string;\n  required?: boolean;\n  error?: string;\n  containerStyle?: ViewStyle;\n}\n\nexport const FormField = ({\n  label,\n  required = false,\n  error,\n  containerStyle,\n  ...textInputProps\n}: FormFieldProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, semantic } = theme;\n  const errorColor = semantic.error['500'];\n  const hasError = typeof error === 'string' && error !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const requiredMarkStyle: TextStyle = { color: errorColor };\n    const inputStyle: TextStyle = {\n      backgroundColor: colors.surface,\n      color: colors.text,\n      borderColor: hasError ? errorColor : colors.border,\n    };\n    const errorTextStyle: TextStyle = { color: errorColor };\n    return {\n      label: labelStyle,\n      requiredMark: requiredMarkStyle,\n      input: inputStyle,\n      errorText: errorTextStyle,\n    };\n  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      <Text style={[styles.label, themeStyles.label]}>\n        {label} {required ? <Text style={themeStyles.requiredMark}>*</Text> : null}\n      </Text>\n      <TextInput\n        accessibilityHint={`Enter ${label}`}\n        accessibilityLabel={label}\n        placeholderTextColor={colors.textSecondary}\n        style={[styles.input, themeStyles.input]}\n        testID=\"form-field-input\"\n        {...textInputProps}\n      />\n      {hasError ? <Text style={[styles.errorText, themeStyles.errorText]}>{error}</Text> : null}\n    </View>\n  );\n};\n\nexport default FormField;\n","/**\n * Chip/pill selector for selecting one or multiple options.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TouchableOpacity, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst TRANSPARENT_COLOR = 'transparent';\nconst WHITE_COLOR = '#fff';\n\nconst styles = StyleSheet.create({\n  label: {\n    marginBottom: 8,\n    fontWeight: '600',\n  },\n  chipContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  chipWrapper: {\n    marginRight: 8,\n    marginBottom: 8,\n  },\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 20,\n    backgroundColor: TRANSPARENT_COLOR,\n    borderWidth: 1,\n  },\n  chipText: {},\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  chip: ViewStyle;\n  chipSelected: ViewStyle;\n  chipText: TextStyle;\n  chipTextSelected: TextStyle;\n}\n\nexport interface ChipOption<T> {\n  value: T;\n  label: string;\n}\n\nexport interface ChipSelectorProps<T> {\n  label?: string;\n  options: Array<ChipOption<T>>;\n  value: T | T[];\n  onChange: (value: T) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n}\n\nexport const ChipSelector = <T extends string | number>({\n  label,\n  options,\n  value,\n  onChange,\n  multiple = false,\n  disabled = false,\n  containerStyle,\n}: ChipSelectorProps<T>): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const primaryColor = palette.primary['500'];\n  const hasLabel = typeof label === 'string' && label !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const chipStyle: ViewStyle = { borderColor: colors.border };\n    const chipSelectedStyle: ViewStyle = { backgroundColor: primaryColor };\n    const chipTextStyle: TextStyle = { color: colors.text };\n    const chipTextSelectedStyle: TextStyle = { color: WHITE_COLOR };\n    return {\n      label: labelStyle,\n      chip: chipStyle,\n      chipSelected: chipSelectedStyle,\n      chipText: chipTextStyle,\n      chipTextSelected: chipTextSelectedStyle,\n    };\n  }, [colors.border, colors.text, primaryColor]);\n\n  function isSelected(optionValue: T): boolean {\n    if (multiple && Array.isArray(value))\n      return value.includes(optionValue);\n\n    return value === optionValue;\n  }\n\n  return (\n    <View style={containerStyle}>\n      {hasLabel ? <Text style={[styles.label, themeStyles.label]}>{label}</Text> : null}\n      <View style={styles.chipContainer}>\n        {options.map((option) => {\n          const selected = isSelected(option.value);\n          return (\n            <TouchableOpacity\n              key={String(option.value)}\n              accessibilityHint={`Selects ${option.label}`}\n              accessibilityLabel={option.label}\n              accessibilityRole=\"button\"\n              accessibilityState={{ selected }}\n              disabled={disabled}\n              style={styles.chipWrapper}\n              testID={`chip-selector-chip-${String(option.value)}`}\n              onPress={() => onChange(option.value)}\n            >\n              <View\n                style={[\n                  styles.chip,\n                  themeStyles.chip,\n                  selected ? themeStyles.chipSelected : null,\n                ]}\n              >\n                <Text style={[styles.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null]}>\n                  {option.label}\n                </Text>\n              </View>\n            </TouchableOpacity>\n          );\n        })}\n      </View>\n    </View>\n  );\n};\n\nexport default ChipSelector;\n","/**\n * Reusable form switch/toggle with an optional description.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Switch, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst DESCRIPTION_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: 12,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  description: {\n    fontSize: DESCRIPTION_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  description: TextStyle;\n}\n\nexport interface FormSwitchProps {\n  label: string;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  description?: string;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormSwitch = ({\n  label,\n  value,\n  onValueChange,\n  disabled = false,\n  description,\n  containerStyle,\n  testID = 'form-switch',\n  accessibilityHint,\n}: FormSwitchProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors } = theme;\n  const hasDescription = typeof description === 'string' && description !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const descriptionStyle: TextStyle = { color: colors.textSecondary };\n    return { label: labelStyle, description: descriptionStyle };\n  }, [colors.text, colors.textSecondary]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        containerStyle,\n      ]}\n    >\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasDescription ? (\n          <Text style={[styles.description, themeStyles.description]}>{description}</Text>\n        ) : null}\n      </View>\n      <Switch\n        accessibilityHint={accessibilityHint ?? label}\n        accessibilityLabel={label}\n        accessibilityRole=\"switch\"\n        accessibilityState={{ checked: value }}\n        disabled={disabled}\n        testID={testID}\n        value={value}\n        onValueChange={onValueChange}\n      />\n    </View>\n  );\n};\n\nexport default FormSwitch;\n","/**\n * Reusable, native-safe checkbox — a themed `Pressable` (works on RN-web AND native, where RN has\n * no built-in checkbox). A small rounded square that fills with the brand colour and shows a check\n * glyph when on, with a label and an optional hint. Mirrors `FormSwitch`'s prop shape so it is a\n * drop-in replacement for the boolean toggles v1 renders as checkboxes.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Pressable, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst HINT_FONT_SIZE = 12;\nconst BOX_SIZE = 20;\nconst BOX_RADIUS = 5;\nconst CHECK_FONT_SIZE = 14;\nconst DISABLED_OPACITY = 0.5;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    gap: 10,\n    marginBottom: 12,\n  },\n  box: {\n    width: BOX_SIZE,\n    height: BOX_SIZE,\n    borderRadius: BOX_RADIUS,\n    borderWidth: 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Nudge the box to sit on the label's first text line.\n    marginTop: 1,\n  },\n  check: {\n    fontSize: CHECK_FONT_SIZE,\n    fontWeight: '700',\n    lineHeight: CHECK_FONT_SIZE,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  hint: {\n    fontSize: HINT_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\nexport interface FormCheckboxProps {\n  label: string;\n  value: boolean;\n  /** Primary change handler (mirrors `FormSwitch`). `onChange` is accepted as an alias. */\n  onValueChange?: (value: boolean) => void;\n  /** Alias for `onValueChange` so either name works as a drop-in. */\n  onChange?: (value: boolean) => void;\n  /** Optional secondary description shown under the label. `description` is accepted as an alias. */\n  hint?: string;\n  description?: string;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormCheckbox = ({\n  label,\n  value,\n  onValueChange,\n  onChange,\n  hint,\n  description,\n  disabled = false,\n  containerStyle,\n  testID = 'form-checkbox',\n  accessibilityLabel,\n  accessibilityHint,\n}: FormCheckboxProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const brand = palette.primary['500'];\n  const hintText = typeof hint === 'string' && hint !== '' ? hint : description;\n  const hasHint = typeof hintText === 'string' && hintText !== '';\n\n  const themeStyles = React.useMemo(() => {\n    const boxOn: ViewStyle = { backgroundColor: brand, borderColor: brand };\n    const boxOff: ViewStyle = { backgroundColor: 'transparent', borderColor: colors.border };\n    const labelStyle: TextStyle = { color: colors.text };\n    const hintStyle: TextStyle = { color: colors.textSecondary };\n    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };\n  }, [brand, colors.border, colors.text, colors.textSecondary]);\n\n  const toggle = (): void => {\n    const next = !value;\n    if (onValueChange) onValueChange(next);\n    if (onChange) onChange(next);\n  };\n\n  return (\n    <Pressable\n      accessibilityHint={accessibilityHint ?? label}\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ checked: value, disabled }}\n      // RN-web maps this to the ARIA `role=\"checkbox\"` + `aria-checked` a screen reader announces.\n      aria-checked={value}\n      disabled={disabled}\n      onPress={toggle}\n      role=\"checkbox\"\n      style={[styles.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null]}\n      testID={testID}\n    >\n      <View style={[styles.box, value ? themeStyles.boxOn : themeStyles.boxOff]}>\n        {value ? (\n          <Text style={[styles.check, { color: colors.surface }]} accessibilityElementsHidden>\n            ✓\n          </Text>\n        ) : null}\n      </View>\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasHint ? <Text style={[styles.hint, themeStyles.hint]}>{hintText}</Text> : null}\n      </View>\n    </Pressable>\n  );\n};\n\nexport default FormCheckbox;\n"]}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, Text, TextInput, TouchableOpacity, Switch } from 'react-native';
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, Switch, Pressable } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -227,7 +227,98 @@ var FormSwitch = ({
     }
   );
 };
+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 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+    marginBottom: 12
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderRadius: BOX_RADIUS,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    // Nudge the box to sit on the label's first text line.
+    marginTop: 1
+  },
+  check: {
+    fontSize: CHECK_FONT_SIZE,
+    fontWeight: "700",
+    lineHeight: CHECK_FONT_SIZE
+  },
+  textColumn: {
+    flex: 1
+  },
+  label: {
+    fontWeight: "600"
+  },
+  hint: {
+    fontSize: HINT_FONT_SIZE,
+    marginTop: 2
+  }
+});
+var FormCheckbox = ({
+  label,
+  value,
+  onValueChange,
+  onChange,
+  hint,
+  description,
+  disabled = false,
+  containerStyle,
+  testID = "form-checkbox",
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const brand = palette.primary["500"];
+  const hintText = typeof hint === "string" && hint !== "" ? hint : description;
+  const hasHint = typeof hintText === "string" && hintText !== "";
+  const themeStyles = React.useMemo(() => {
+    const boxOn = { backgroundColor: brand, borderColor: brand };
+    const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
+    const labelStyle = { color: colors.text };
+    const hintStyle = { color: colors.textSecondary };
+    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };
+  }, [brand, colors.border, colors.text, colors.textSecondary]);
+  const toggle = () => {
+    const next = !value;
+    if (onValueChange) onValueChange(next);
+    if (onChange) onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: accessibilityHint ?? label,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: value, disabled },
+      "aria-checked": value,
+      disabled,
+      onPress: toggle,
+      role: "checkbox",
+      style: [styles4.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      testID,
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles4.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles4.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles4.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles4.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles4.hint, themeStyles.hint], children: hintText }) : null
+        ] })
+      ]
+    }
+  );
+};
 
-export { ChipSelector, FormField, FormSwitch };
+export { ChipSelector, FormCheckbox, FormField, FormSwitch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FormField/FormField.tsx","../src/ChipSelector/ChipSelector.tsx","../src/FormSwitch/FormSwitch.tsx"],"names":["styles","StyleSheet","useUi","React","jsxs","View","jsx","Text"],"mappings":";;;;;;AASA,IAAM,uBAAA,GAA0B,EAAA;AAChC,IAAM,aAAA,GAAgB,EAAA;AACtB,IAAM,mBAAA,GAAsB,CAAA;AAC5B,IAAM,eAAA,GAAkB,EAAA;AAExB,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,SAAA,EAAW;AAAA,IACT,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACd;AAAA,EACA,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,YAAA,EAAc,mBAAA;AAAA,IACd,WAAA,EAAa;AAAA,GACf;AAAA,EACA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,eAAA;AAAA,IACV,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAgBM,IAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA0C;AACxC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,KAAA,EAAM;AACxB,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAA,EAAS,GAAI,KAAA;AAC7B,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,KAAA,CAAM,KAAK,CAAA;AACvC,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,EAAA;AAExD,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,OAAA,CAAqB,MAAM;AACnD,IAAA,MAAM,UAAA,GAAwB,EAAE,KAAA,EAAO,MAAA,CAAO,IAAA,EAAK;AACnD,IAAA,MAAM,iBAAA,GAA+B,EAAE,KAAA,EAAO,UAAA,EAAW;AACzD,IAAA,MAAM,UAAA,GAAwB;AAAA,MAC5B,iBAAiB,MAAA,CAAO,OAAA;AAAA,MACxB,OAAO,MAAA,CAAO,IAAA;AAAA,MACd,WAAA,EAAa,QAAA,GAAW,UAAA,GAAa,MAAA,CAAO;AAAA,KAC9C;AACA,IAAA,MAAM,cAAA,GAA4B,EAAE,KAAA,EAAO,UAAA,EAAW;AACtD,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,UAAA;AAAA,MACP,YAAA,EAAc,iBAAA;AAAA,MACd,KAAA,EAAO,UAAA;AAAA,MACP,SAAA,EAAW;AAAA,KACb;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,CAAO,MAAA,EAAQ,MAAA,CAAO,SAAS,MAAA,CAAO,IAAA,EAAM,UAAA,EAAY,QAAQ,CAAC,CAAA;AAErE,EAAA,4BACG,IAAA,EAAA,EAAK,KAAA,EAAO,CAAC,MAAA,CAAO,SAAA,EAAW,cAAc,CAAA,EAC5C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAK,KAAA,EAAO,CAAC,OAAO,KAAA,EAAO,WAAA,CAAY,KAAK,CAAA,EAC1C,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MAAM,GAAA;AAAA,MAAE,2BAAW,GAAA,CAAC,IAAA,EAAA,EAAK,OAAO,WAAA,CAAY,YAAA,EAAc,eAAC,CAAA,GAAU;AAAA,KAAA,EACxE,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAmB,SAAS,KAAK,CAAA,CAAA;AAAA,QACjC,kBAAA,EAAoB,KAAA;AAAA,QACpB,sBAAsB,MAAA,CAAO,aAAA;AAAA,QAC7B,KAAA,EAAO,CAAC,MAAA,CAAO,KAAA,EAAO,YAAY,KAAK,CAAA;AAAA,QACvC,MAAA,EAAO,kBAAA;AAAA,QACN,GAAG;AAAA;AAAA,KACN;AAAA,IACC,QAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,CAAC,MAAA,CAAO,SAAA,EAAW,WAAA,CAAY,SAAS,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAU;AAAA,GAAA,EACvF,CAAA;AAEJ;ACnFA,IAAM,iBAAA,GAAoB,aAAA;AAC1B,IAAM,WAAA,GAAc,MAAA;AAEpB,IAAMA,OAAAA,GAASC,WAAW,MAAA,CAAO;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACd;AAAA,EACA,aAAA,EAAe;AAAA,IACb,aAAA,EAAe,KAAA;AAAA,IACf,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,WAAA,EAAa;AAAA,IACX,WAAA,EAAa,CAAA;AAAA,IACb,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,iBAAA,EAAmB,EAAA;AAAA,IACnB,eAAA,EAAiB,CAAA;AAAA,IACjB,YAAA,EAAc,EAAA;AAAA,IACd,eAAA,EAAiB,iBAAA;AAAA,IACjB,WAAA,EAAa;AAAA,GACf;AAAA,EACA,UAAU;AACZ,CAAC,CAAA;AAyBM,IAAM,eAAe,CAA4B;AAAA,EACtD,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,KAAgD;AAC9C,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIC,KAAAA,EAAM;AACxB,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAQ,GAAI,KAAA;AAC5B,EAAA,MAAM,YAAA,GAAe,OAAA,CAAQ,OAAA,CAAQ,KAAK,CAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,EAAA;AAExD,EAAA,MAAM,WAAA,GAAcC,KAAAA,CAAM,OAAA,CAAqB,MAAM;AACnD,IAAA,MAAM,UAAA,GAAwB,EAAE,KAAA,EAAO,MAAA,CAAO,IAAA,EAAK;AACnD,IAAA,MAAM,SAAA,GAAuB,EAAE,WAAA,EAAa,MAAA,CAAO,MAAA,EAAO;AAC1D,IAAA,MAAM,iBAAA,GAA+B,EAAE,eAAA,EAAiB,YAAA,EAAa;AACrE,IAAA,MAAM,aAAA,GAA2B,EAAE,KAAA,EAAO,MAAA,CAAO,IAAA,EAAK;AACtD,IAAA,MAAM,qBAAA,GAAmC,EAAE,KAAA,EAAO,WAAA,EAAY;AAC9D,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,UAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,YAAA,EAAc,iBAAA;AAAA,MACd,QAAA,EAAU,aAAA;AAAA,MACV,gBAAA,EAAkB;AAAA,KACpB;AAAA,EACF,GAAG,CAAC,MAAA,CAAO,QAAQ,MAAA,CAAO,IAAA,EAAM,YAAY,CAAC,CAAA;AAE7C,EAAA,SAAS,WAAW,WAAA,EAAyB;AAC3C,IAAA,IAAI,QAAA,IAAY,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,MAAA,OAAO,KAAA,CAAM,SAAS,WAAW,CAAA;AAEnC,IAAA,OAAO,KAAA,KAAU,WAAA;AAAA,EACnB;AAEA,EAAA,uBACEC,IAAAA,CAACC,IAAAA,EAAA,EAAK,OAAO,cAAA,EACV,QAAA,EAAA;AAAA,IAAA,QAAA,mBAAWC,GAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAO,CAACP,OAAAA,CAAO,KAAA,EAAO,WAAA,CAAY,KAAK,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAU,IAAA;AAAA,oBAC7EM,GAAAA,CAACD,IAAAA,EAAA,EAAK,KAAA,EAAOL,QAAO,aAAA,EACjB,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,MAAA,MAAM,QAAA,GAAW,UAAA,CAAW,MAAA,CAAO,KAAK,CAAA;AACxC,MAAA,uBACEM,GAAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UAEC,iBAAA,EAAmB,CAAA,QAAA,EAAW,MAAA,CAAO,KAAK,CAAA,CAAA;AAAA,UAC1C,oBAAoB,MAAA,CAAO,KAAA;AAAA,UAC3B,iBAAA,EAAkB,QAAA;AAAA,UAClB,kBAAA,EAAoB,EAAE,QAAA,EAAS;AAAA,UAC/B,QAAA;AAAA,UACA,OAAON,OAAAA,CAAO,WAAA;AAAA,UACd,MAAA,EAAQ,CAAA,mBAAA,EAAsB,MAAA,CAAO,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,UAClD,OAAA,EAAS,MAAM,QAAA,CAAS,MAAA,CAAO,KAAK,CAAA;AAAA,UAEpC,QAAA,kBAAAM,GAAAA;AAAA,YAACD,IAAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO;AAAA,gBACLL,OAAAA,CAAO,IAAA;AAAA,gBACP,WAAA,CAAY,IAAA;AAAA,gBACZ,QAAA,GAAW,YAAY,YAAA,GAAe;AAAA,eACxC;AAAA,cAEA,0BAAAM,GAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAO,CAACP,OAAAA,CAAO,QAAA,EAAU,WAAA,CAAY,QAAA,EAAU,WAAW,WAAA,CAAY,gBAAA,GAAmB,IAAI,CAAA,EAChG,iBAAO,KAAA,EACV;AAAA;AAAA;AACF,SAAA;AAAA,QApBK,MAAA,CAAO,OAAO,KAAK;AAAA,OAqB1B;AAAA,IAEJ,CAAC,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;ACxHA,IAAM,qBAAA,GAAwB,EAAA;AAE9B,IAAMA,OAAAA,GAASC,WAAW,MAAA,CAAO;AAAA,EAC/B,SAAA,EAAW;AAAA,IACT,aAAA,EAAe,KAAA;AAAA,IACf,cAAA,EAAgB,eAAA;AAAA,IAChB,UAAA,EAAY,QAAA;AAAA,IACZ,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,GACd;AAAA,EACA,WAAA,EAAa;AAAA,IACX,QAAA,EAAU,qBAAA;AAAA,IACV,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAkBM,IAAM,aAAa,CAAC;AAAA,EACzB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,WAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA,GAAS,aAAA;AAAA,EACT;AACF,CAAA,KAA2C;AACzC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIC,KAAAA,EAAM;AACxB,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AACnB,EAAA,MAAM,cAAA,GAAiB,OAAO,WAAA,KAAgB,QAAA,IAAY,WAAA,KAAgB,EAAA;AAE1E,EAAA,MAAM,WAAA,GAAcC,KAAAA,CAAM,OAAA,CAAqB,MAAM;AACnD,IAAA,MAAM,UAAA,GAAwB,EAAE,KAAA,EAAO,MAAA,CAAO,IAAA,EAAK;AACnD,IAAA,MAAM,gBAAA,GAA8B,EAAE,KAAA,EAAO,MAAA,CAAO,aAAA,EAAc;AAClE,IAAA,OAAO,EAAE,KAAA,EAAO,UAAA,EAAY,WAAA,EAAa,gBAAA,EAAiB;AAAA,EAC5D,GAAG,CAAC,MAAA,CAAO,IAAA,EAAM,MAAA,CAAO,aAAa,CAAC,CAAA;AAEtC,EAAA,uBACEC,IAAAA;AAAA,IAACC,IAAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACLL,OAAAA,CAAO,SAAA;AAAA,QACP;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAI,IAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAOL,QAAO,UAAA,EAClB,QAAA,EAAA;AAAA,0BAAAM,GAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAO,CAACP,QAAO,KAAA,EAAO,WAAA,CAAY,KAAK,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACtD,cAAA,mBACCM,GAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAO,CAACP,OAAAA,CAAO,WAAA,EAAa,WAAA,CAAY,WAAW,CAAA,EAAI,uBAAY,CAAA,GACvE;AAAA,SAAA,EACN,CAAA;AAAA,wBACAM,GAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,mBAAmB,iBAAA,IAAqB,KAAA;AAAA,YACxC,kBAAA,EAAoB,KAAA;AAAA,YACpB,iBAAA,EAAkB,QAAA;AAAA,YAClB,kBAAA,EAAoB,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,YACrC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"index.mjs","sourcesContent":["/**\n * Reusable form field — labelled text input with optional required mark + error.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TextInput, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst CONTAINER_MARGIN_BOTTOM = 16;\nconst INPUT_PADDING = 12;\nconst INPUT_BORDER_RADIUS = 8;\nconst ERROR_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    marginBottom: CONTAINER_MARGIN_BOTTOM,\n  },\n  label: {\n    marginBottom: 4,\n    fontWeight: '600',\n  },\n  input: {\n    padding: INPUT_PADDING,\n    borderRadius: INPUT_BORDER_RADIUS,\n    borderWidth: 1,\n  },\n  errorText: {\n    fontSize: ERROR_FONT_SIZE,\n    marginTop: 4,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  requiredMark: TextStyle;\n  input: TextStyle;\n  errorText: TextStyle;\n}\n\nexport interface FormFieldProps extends Omit<TextInputProps, 'style'> {\n  label: string;\n  required?: boolean;\n  error?: string;\n  containerStyle?: ViewStyle;\n}\n\nexport const FormField = ({\n  label,\n  required = false,\n  error,\n  containerStyle,\n  ...textInputProps\n}: FormFieldProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, semantic } = theme;\n  const errorColor = semantic.error['500'];\n  const hasError = typeof error === 'string' && error !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const requiredMarkStyle: TextStyle = { color: errorColor };\n    const inputStyle: TextStyle = {\n      backgroundColor: colors.surface,\n      color: colors.text,\n      borderColor: hasError ? errorColor : colors.border,\n    };\n    const errorTextStyle: TextStyle = { color: errorColor };\n    return {\n      label: labelStyle,\n      requiredMark: requiredMarkStyle,\n      input: inputStyle,\n      errorText: errorTextStyle,\n    };\n  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      <Text style={[styles.label, themeStyles.label]}>\n        {label} {required ? <Text style={themeStyles.requiredMark}>*</Text> : null}\n      </Text>\n      <TextInput\n        accessibilityHint={`Enter ${label}`}\n        accessibilityLabel={label}\n        placeholderTextColor={colors.textSecondary}\n        style={[styles.input, themeStyles.input]}\n        testID=\"form-field-input\"\n        {...textInputProps}\n      />\n      {hasError ? <Text style={[styles.errorText, themeStyles.errorText]}>{error}</Text> : null}\n    </View>\n  );\n};\n\nexport default FormField;\n","/**\n * Chip/pill selector for selecting one or multiple options.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TouchableOpacity, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst TRANSPARENT_COLOR = 'transparent';\nconst WHITE_COLOR = '#fff';\n\nconst styles = StyleSheet.create({\n  label: {\n    marginBottom: 8,\n    fontWeight: '600',\n  },\n  chipContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  chipWrapper: {\n    marginRight: 8,\n    marginBottom: 8,\n  },\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 20,\n    backgroundColor: TRANSPARENT_COLOR,\n    borderWidth: 1,\n  },\n  chipText: {},\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  chip: ViewStyle;\n  chipSelected: ViewStyle;\n  chipText: TextStyle;\n  chipTextSelected: TextStyle;\n}\n\nexport interface ChipOption<T> {\n  value: T;\n  label: string;\n}\n\nexport interface ChipSelectorProps<T> {\n  label?: string;\n  options: Array<ChipOption<T>>;\n  value: T | T[];\n  onChange: (value: T) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n}\n\nexport const ChipSelector = <T extends string | number>({\n  label,\n  options,\n  value,\n  onChange,\n  multiple = false,\n  disabled = false,\n  containerStyle,\n}: ChipSelectorProps<T>): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const primaryColor = palette.primary['500'];\n  const hasLabel = typeof label === 'string' && label !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const chipStyle: ViewStyle = { borderColor: colors.border };\n    const chipSelectedStyle: ViewStyle = { backgroundColor: primaryColor };\n    const chipTextStyle: TextStyle = { color: colors.text };\n    const chipTextSelectedStyle: TextStyle = { color: WHITE_COLOR };\n    return {\n      label: labelStyle,\n      chip: chipStyle,\n      chipSelected: chipSelectedStyle,\n      chipText: chipTextStyle,\n      chipTextSelected: chipTextSelectedStyle,\n    };\n  }, [colors.border, colors.text, primaryColor]);\n\n  function isSelected(optionValue: T): boolean {\n    if (multiple && Array.isArray(value))\n      return value.includes(optionValue);\n\n    return value === optionValue;\n  }\n\n  return (\n    <View style={containerStyle}>\n      {hasLabel ? <Text style={[styles.label, themeStyles.label]}>{label}</Text> : null}\n      <View style={styles.chipContainer}>\n        {options.map((option) => {\n          const selected = isSelected(option.value);\n          return (\n            <TouchableOpacity\n              key={String(option.value)}\n              accessibilityHint={`Selects ${option.label}`}\n              accessibilityLabel={option.label}\n              accessibilityRole=\"button\"\n              accessibilityState={{ selected }}\n              disabled={disabled}\n              style={styles.chipWrapper}\n              testID={`chip-selector-chip-${String(option.value)}`}\n              onPress={() => onChange(option.value)}\n            >\n              <View\n                style={[\n                  styles.chip,\n                  themeStyles.chip,\n                  selected ? themeStyles.chipSelected : null,\n                ]}\n              >\n                <Text style={[styles.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null]}>\n                  {option.label}\n                </Text>\n              </View>\n            </TouchableOpacity>\n          );\n        })}\n      </View>\n    </View>\n  );\n};\n\nexport default ChipSelector;\n","/**\n * Reusable form switch/toggle with an optional description.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Switch, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst DESCRIPTION_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: 12,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  description: {\n    fontSize: DESCRIPTION_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  description: TextStyle;\n}\n\nexport interface FormSwitchProps {\n  label: string;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  description?: string;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormSwitch = ({\n  label,\n  value,\n  onValueChange,\n  disabled = false,\n  description,\n  containerStyle,\n  testID = 'form-switch',\n  accessibilityHint,\n}: FormSwitchProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors } = theme;\n  const hasDescription = typeof description === 'string' && description !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const descriptionStyle: TextStyle = { color: colors.textSecondary };\n    return { label: labelStyle, description: descriptionStyle };\n  }, [colors.text, colors.textSecondary]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        containerStyle,\n      ]}\n    >\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasDescription ? (\n          <Text style={[styles.description, themeStyles.description]}>{description}</Text>\n        ) : null}\n      </View>\n      <Switch\n        accessibilityHint={accessibilityHint ?? label}\n        accessibilityLabel={label}\n        accessibilityRole=\"switch\"\n        accessibilityState={{ checked: value }}\n        disabled={disabled}\n        testID={testID}\n        value={value}\n        onValueChange={onValueChange}\n      />\n    </View>\n  );\n};\n\nexport default FormSwitch;\n"]}
+{"version":3,"sources":["../src/FormField/FormField.tsx","../src/ChipSelector/ChipSelector.tsx","../src/FormSwitch/FormSwitch.tsx","../src/FormCheckbox/FormCheckbox.tsx"],"names":["styles","StyleSheet","useUi","React","jsxs","View","jsx","Text"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Reusable form field — labelled text input with optional required mark + error.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TextInput, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst CONTAINER_MARGIN_BOTTOM = 16;\nconst INPUT_PADDING = 12;\nconst INPUT_BORDER_RADIUS = 8;\nconst ERROR_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    marginBottom: CONTAINER_MARGIN_BOTTOM,\n  },\n  label: {\n    marginBottom: 4,\n    fontWeight: '600',\n  },\n  input: {\n    padding: INPUT_PADDING,\n    borderRadius: INPUT_BORDER_RADIUS,\n    borderWidth: 1,\n  },\n  errorText: {\n    fontSize: ERROR_FONT_SIZE,\n    marginTop: 4,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  requiredMark: TextStyle;\n  input: TextStyle;\n  errorText: TextStyle;\n}\n\nexport interface FormFieldProps extends Omit<TextInputProps, 'style'> {\n  label: string;\n  required?: boolean;\n  error?: string;\n  containerStyle?: ViewStyle;\n}\n\nexport const FormField = ({\n  label,\n  required = false,\n  error,\n  containerStyle,\n  ...textInputProps\n}: FormFieldProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, semantic } = theme;\n  const errorColor = semantic.error['500'];\n  const hasError = typeof error === 'string' && error !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const requiredMarkStyle: TextStyle = { color: errorColor };\n    const inputStyle: TextStyle = {\n      backgroundColor: colors.surface,\n      color: colors.text,\n      borderColor: hasError ? errorColor : colors.border,\n    };\n    const errorTextStyle: TextStyle = { color: errorColor };\n    return {\n      label: labelStyle,\n      requiredMark: requiredMarkStyle,\n      input: inputStyle,\n      errorText: errorTextStyle,\n    };\n  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      <Text style={[styles.label, themeStyles.label]}>\n        {label} {required ? <Text style={themeStyles.requiredMark}>*</Text> : null}\n      </Text>\n      <TextInput\n        accessibilityHint={`Enter ${label}`}\n        accessibilityLabel={label}\n        placeholderTextColor={colors.textSecondary}\n        style={[styles.input, themeStyles.input]}\n        testID=\"form-field-input\"\n        {...textInputProps}\n      />\n      {hasError ? <Text style={[styles.errorText, themeStyles.errorText]}>{error}</Text> : null}\n    </View>\n  );\n};\n\nexport default FormField;\n","/**\n * Chip/pill selector for selecting one or multiple options.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, TouchableOpacity, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst TRANSPARENT_COLOR = 'transparent';\nconst WHITE_COLOR = '#fff';\n\nconst styles = StyleSheet.create({\n  label: {\n    marginBottom: 8,\n    fontWeight: '600',\n  },\n  chipContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  chipWrapper: {\n    marginRight: 8,\n    marginBottom: 8,\n  },\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 20,\n    backgroundColor: TRANSPARENT_COLOR,\n    borderWidth: 1,\n  },\n  chipText: {},\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  chip: ViewStyle;\n  chipSelected: ViewStyle;\n  chipText: TextStyle;\n  chipTextSelected: TextStyle;\n}\n\nexport interface ChipOption<T> {\n  value: T;\n  label: string;\n}\n\nexport interface ChipSelectorProps<T> {\n  label?: string;\n  options: Array<ChipOption<T>>;\n  value: T | T[];\n  onChange: (value: T) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n}\n\nexport const ChipSelector = <T extends string | number>({\n  label,\n  options,\n  value,\n  onChange,\n  multiple = false,\n  disabled = false,\n  containerStyle,\n}: ChipSelectorProps<T>): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const primaryColor = palette.primary['500'];\n  const hasLabel = typeof label === 'string' && label !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const chipStyle: ViewStyle = { borderColor: colors.border };\n    const chipSelectedStyle: ViewStyle = { backgroundColor: primaryColor };\n    const chipTextStyle: TextStyle = { color: colors.text };\n    const chipTextSelectedStyle: TextStyle = { color: WHITE_COLOR };\n    return {\n      label: labelStyle,\n      chip: chipStyle,\n      chipSelected: chipSelectedStyle,\n      chipText: chipTextStyle,\n      chipTextSelected: chipTextSelectedStyle,\n    };\n  }, [colors.border, colors.text, primaryColor]);\n\n  function isSelected(optionValue: T): boolean {\n    if (multiple && Array.isArray(value))\n      return value.includes(optionValue);\n\n    return value === optionValue;\n  }\n\n  return (\n    <View style={containerStyle}>\n      {hasLabel ? <Text style={[styles.label, themeStyles.label]}>{label}</Text> : null}\n      <View style={styles.chipContainer}>\n        {options.map((option) => {\n          const selected = isSelected(option.value);\n          return (\n            <TouchableOpacity\n              key={String(option.value)}\n              accessibilityHint={`Selects ${option.label}`}\n              accessibilityLabel={option.label}\n              accessibilityRole=\"button\"\n              accessibilityState={{ selected }}\n              disabled={disabled}\n              style={styles.chipWrapper}\n              testID={`chip-selector-chip-${String(option.value)}`}\n              onPress={() => onChange(option.value)}\n            >\n              <View\n                style={[\n                  styles.chip,\n                  themeStyles.chip,\n                  selected ? themeStyles.chipSelected : null,\n                ]}\n              >\n                <Text style={[styles.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null]}>\n                  {option.label}\n                </Text>\n              </View>\n            </TouchableOpacity>\n          );\n        })}\n      </View>\n    </View>\n  );\n};\n\nexport default ChipSelector;\n","/**\n * Reusable form switch/toggle with an optional description.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Switch, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst DESCRIPTION_FONT_SIZE = 12;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: 12,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  description: {\n    fontSize: DESCRIPTION_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\ninterface ThemeStyles {\n  label: TextStyle;\n  description: TextStyle;\n}\n\nexport interface FormSwitchProps {\n  label: string;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  description?: string;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormSwitch = ({\n  label,\n  value,\n  onValueChange,\n  disabled = false,\n  description,\n  containerStyle,\n  testID = 'form-switch',\n  accessibilityHint,\n}: FormSwitchProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors } = theme;\n  const hasDescription = typeof description === 'string' && description !== '';\n\n  const themeStyles = React.useMemo<ThemeStyles>(() => {\n    const labelStyle: TextStyle = { color: colors.text };\n    const descriptionStyle: TextStyle = { color: colors.textSecondary };\n    return { label: labelStyle, description: descriptionStyle };\n  }, [colors.text, colors.textSecondary]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        containerStyle,\n      ]}\n    >\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasDescription ? (\n          <Text style={[styles.description, themeStyles.description]}>{description}</Text>\n        ) : null}\n      </View>\n      <Switch\n        accessibilityHint={accessibilityHint ?? label}\n        accessibilityLabel={label}\n        accessibilityRole=\"switch\"\n        accessibilityState={{ checked: value }}\n        disabled={disabled}\n        testID={testID}\n        value={value}\n        onValueChange={onValueChange}\n      />\n    </View>\n  );\n};\n\nexport default FormSwitch;\n","/**\n * Reusable, native-safe checkbox — a themed `Pressable` (works on RN-web AND native, where RN has\n * no built-in checkbox). A small rounded square that fills with the brand colour and shows a check\n * glyph when on, with a label and an optional hint. Mirrors `FormSwitch`'s prop shape so it is a\n * drop-in replacement for the boolean toggles v1 renders as checkboxes.\n */\nimport React from 'react';\n\nimport { StyleSheet, View, Text, Pressable, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nconst HINT_FONT_SIZE = 12;\nconst BOX_SIZE = 20;\nconst BOX_RADIUS = 5;\nconst CHECK_FONT_SIZE = 14;\nconst DISABLED_OPACITY = 0.5;\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    gap: 10,\n    marginBottom: 12,\n  },\n  box: {\n    width: BOX_SIZE,\n    height: BOX_SIZE,\n    borderRadius: BOX_RADIUS,\n    borderWidth: 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Nudge the box to sit on the label's first text line.\n    marginTop: 1,\n  },\n  check: {\n    fontSize: CHECK_FONT_SIZE,\n    fontWeight: '700',\n    lineHeight: CHECK_FONT_SIZE,\n  },\n  textColumn: {\n    flex: 1,\n  },\n  label: {\n    fontWeight: '600',\n  },\n  hint: {\n    fontSize: HINT_FONT_SIZE,\n    marginTop: 2,\n  },\n});\n\nexport interface FormCheckboxProps {\n  label: string;\n  value: boolean;\n  /** Primary change handler (mirrors `FormSwitch`). `onChange` is accepted as an alias. */\n  onValueChange?: (value: boolean) => void;\n  /** Alias for `onValueChange` so either name works as a drop-in. */\n  onChange?: (value: boolean) => void;\n  /** Optional secondary description shown under the label. `description` is accepted as an alias. */\n  hint?: string;\n  description?: string;\n  disabled?: boolean;\n  containerStyle?: ViewStyle;\n  testID?: string;\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n}\n\nexport const FormCheckbox = ({\n  label,\n  value,\n  onValueChange,\n  onChange,\n  hint,\n  description,\n  disabled = false,\n  containerStyle,\n  testID = 'form-checkbox',\n  accessibilityLabel,\n  accessibilityHint,\n}: FormCheckboxProps): React.ReactElement => {\n  const { theme } = useUi();\n  const { colors, palette } = theme;\n  const brand = palette.primary['500'];\n  const hintText = typeof hint === 'string' && hint !== '' ? hint : description;\n  const hasHint = typeof hintText === 'string' && hintText !== '';\n\n  const themeStyles = React.useMemo(() => {\n    const boxOn: ViewStyle = { backgroundColor: brand, borderColor: brand };\n    const boxOff: ViewStyle = { backgroundColor: 'transparent', borderColor: colors.border };\n    const labelStyle: TextStyle = { color: colors.text };\n    const hintStyle: TextStyle = { color: colors.textSecondary };\n    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };\n  }, [brand, colors.border, colors.text, colors.textSecondary]);\n\n  const toggle = (): void => {\n    const next = !value;\n    if (onValueChange) onValueChange(next);\n    if (onChange) onChange(next);\n  };\n\n  return (\n    <Pressable\n      accessibilityHint={accessibilityHint ?? label}\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ checked: value, disabled }}\n      // RN-web maps this to the ARIA `role=\"checkbox\"` + `aria-checked` a screen reader announces.\n      aria-checked={value}\n      disabled={disabled}\n      onPress={toggle}\n      role=\"checkbox\"\n      style={[styles.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null]}\n      testID={testID}\n    >\n      <View style={[styles.box, value ? themeStyles.boxOn : themeStyles.boxOff]}>\n        {value ? (\n          <Text style={[styles.check, { color: colors.surface }]} accessibilityElementsHidden>\n            ✓\n          </Text>\n        ) : null}\n      </View>\n      <View style={styles.textColumn}>\n        <Text style={[styles.label, themeStyles.label]}>{label}</Text>\n        {hasHint ? <Text style={[styles.hint, themeStyles.hint]}>{hintText}</Text> : null}\n      </View>\n    </Pressable>\n  );\n};\n\nexport default FormCheckbox;\n"]}

package/package.json

@@ -1,108 +1,108 @@
-{
-  "name": "@dloizides/ui-forms",
-  "version": "1.0.1",
-  "description": "Themable, brand-agnostic React Native (RN-web) form components — FormField, ChipSelector, FormSwitch — sharing the @dloizides/ui-feedback UI context. Part of the dloizides.com shared UI kit.",
-  "keywords": [
-    "react",
-    "react-native",
-    "react-native-web",
-    "ui",
-    "forms",
-    "form-field",
-    "dloizides"
-  ],
-  "author": "dloizides",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/openmindednewby/ui-forms.git"
-  },
-  "homepage": "https://github.com/openmindednewby/ui-forms#readme",
-  "bugs": {
-    "url": "https://github.com/openmindednewby/ui-forms/issues"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "react-native": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "browser": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "default": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "sideEffects": false,
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "rimraf dist && tsup",
-    "build:watch": "tsup --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist",
-    "security:audit": "npm audit --audit-level=high",
-    "deps:outdated": "npm outdated || exit 0",
-    "deps:unused": "npx depcheck --ignores \"@types/jest,@types/node,@types/react,@types/react-dom,rimraf,react-native,react-native-web\"",
-    "deps:licenses": "npx license-checker --onlyAllow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0\"",
-    "deps:health": "npm run deps:outdated && npm run deps:unused",
-    "prepublishOnly": "npm run clean && npm run build && npm run test",
-    "version": "npm run build"
-  },
-  "peerDependencies": {
-    "@dloizides/ui-feedback": ">=1.1.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.74.0"
-  },
-  "devDependencies": {
-    "@dloizides/ui-feedback": "^1.1.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^20.19.32",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-native": "0.81.5",
-    "react-native-web": "^0.21.0",
-    "rimraf": "^5.0.0",
-    "ts-jest": "^29.1.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0"
-  }
-}
+{
+    "name": "@dloizides/ui-forms",
+    "version": "1.1.0",
+    "description": "Themable, brand-agnostic React Native (RN-web) form components — FormField, ChipSelector, FormSwitch — sharing the @dloizides/ui-feedback UI context. Part of the dloizides.com shared UI kit.",
+    "keywords": [
+        "react",
+        "react-native",
+        "react-native-web",
+        "ui",
+        "forms",
+        "form-field",
+        "dloizides"
+    ],
+    "author": "dloizides",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/openmindednewby/ui-forms.git"
+    },
+    "homepage": "https://github.com/openmindednewby/ui-forms#readme",
+    "bugs": {
+        "url": "https://github.com/openmindednewby/ui-forms/issues"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "react-native": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "browser": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "import": {
+                "types": "./dist/index.d.mts",
+                "default": "./dist/index.mjs"
+            },
+            "default": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            }
+        }
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "sideEffects": false,
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "scripts": {
+        "build": "rimraf dist && tsup",
+        "build:watch": "tsup --watch",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "lint": "eslint src --ext .ts,.tsx",
+        "lint:fix": "eslint src --ext .ts,.tsx --fix",
+        "typecheck": "tsc --noEmit",
+        "clean": "rimraf dist",
+        "security:audit": "npm audit --audit-level=high",
+        "deps:outdated": "npm outdated || exit 0",
+        "deps:unused": "npx depcheck --ignores \"@types/jest,@types/node,@types/react,@types/react-dom,rimraf,react-native,react-native-web\"",
+        "deps:licenses": "npx license-checker --onlyAllow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0\"",
+        "deps:health": "npm run deps:outdated && npm run deps:unused",
+        "prepublishOnly": "npm run clean && npm run build && npm run test",
+        "version": "npm run build"
+    },
+    "peerDependencies": {
+        "@dloizides/ui-feedback": ">=1.1.0",
+        "react": ">=18.0.0",
+        "react-native": ">=0.74.0"
+    },
+    "devDependencies": {
+        "@dloizides/ui-feedback": "^1.1.0",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
+        "@types/jest": "^29.5.0",
+        "@types/node": "^20.19.32",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-native": "0.81.5",
+        "react-native-web": "^0.21.0",
+        "rimraf": "^5.0.0",
+        "ts-jest": "^29.1.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.4.0"
+    }
+}