@dloizides/ui-forms 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## 1.0.0
+
+Initial release. Extracted the proven duplicated form components from erevna-web ↔ katalogos-web
+(Capability Wave C1, batch 2).
+
+- `FormField`, `ChipSelector`, `FormSwitch` — share the `@dloizides/ui-feedback` UI context (`useUi`).
+- `FormActions` deferred (depends on a not-yet-shared `core/Button`).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dloizides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @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
+`@dloizides/ui-feedback` UI context (`useUi`) — mount one `UiProvider` / `FeedbackUiProvider`
+at your app root and these components pick up your theme automatically.
+
+## Install
+
+```bash
+npm install @dloizides/ui-forms @dloizides/ui-feedback
+```
+
+Peer dependencies: `@dloizides/ui-feedback >= 1.1.0`, `react >= 18`, `react-native >= 0.74`
+(use `react-native-web` on web).
+
+## Usage
+
+```tsx
+import { FormField, ChipSelector, FormSwitch } from '@dloizides/ui-forms';
+
+<FormField label="Email" required error={errors.email} value={email} onChangeText={setEmail} />
+<ChipSelector label="Plan" options={plans} value={plan} onChange={setPlan} />
+<FormSwitch label="Email notifications" value={notify} onValueChange={setNotify} />
+```
+
+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.
+
+## testIDs
+
+`form-field-input`, `chip-selector-chip-<value>`, `form-switch` (overridable on FormSwitch).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TextInputProps, ViewStyle } from 'react-native';
+
+/**
+ * Reusable form field — labelled text input with optional required mark + error.
+ */
+
+interface FormFieldProps extends Omit<TextInputProps, 'style'> {
+    label: string;
+    required?: boolean;
+    error?: string;
+    containerStyle?: ViewStyle;
+}
+declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
+
+/**
+ * Chip/pill selector for selecting one or multiple options.
+ */
+
+interface ChipOption<T> {
+    value: T;
+    label: string;
+}
+interface ChipSelectorProps<T> {
+    label?: string;
+    options: Array<ChipOption<T>>;
+    value: T | T[];
+    onChange: (value: T) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    containerStyle?: ViewStyle;
+}
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+
+/**
+ * Reusable form switch/toggle with an optional description.
+ */
+
+interface FormSwitchProps {
+    label: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    description?: string;
+    containerStyle?: ViewStyle;
+    testID?: string;
+    accessibilityHint?: string;
+}
+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 };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TextInputProps, ViewStyle } from 'react-native';
+
+/**
+ * Reusable form field — labelled text input with optional required mark + error.
+ */
+
+interface FormFieldProps extends Omit<TextInputProps, 'style'> {
+    label: string;
+    required?: boolean;
+    error?: string;
+    containerStyle?: ViewStyle;
+}
+declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
+
+/**
+ * Chip/pill selector for selecting one or multiple options.
+ */
+
+interface ChipOption<T> {
+    value: T;
+    label: string;
+}
+interface ChipSelectorProps<T> {
+    label?: string;
+    options: Array<ChipOption<T>>;
+    value: T | T[];
+    onChange: (value: T) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    containerStyle?: ViewStyle;
+}
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+
+/**
+ * Reusable form switch/toggle with an optional description.
+ */
+
+interface FormSwitchProps {
+    label: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    description?: string;
+    containerStyle?: ViewStyle;
+    testID?: string;
+    accessibilityHint?: string;
+}
+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 };

package/dist/index.js

@@ -0,0 +1,241 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var uiFeedback = require('@dloizides/ui-feedback');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/FormField/FormField.tsx
+var CONTAINER_MARGIN_BOTTOM = 16;
+var INPUT_PADDING = 12;
+var INPUT_BORDER_RADIUS = 8;
+var ERROR_FONT_SIZE = 12;
+var styles = reactNative.StyleSheet.create({
+  container: {
+    marginBottom: CONTAINER_MARGIN_BOTTOM
+  },
+  label: {
+    marginBottom: 4,
+    fontWeight: "600"
+  },
+  input: {
+    padding: INPUT_PADDING,
+    borderRadius: INPUT_BORDER_RADIUS,
+    borderWidth: 1
+  },
+  errorText: {
+    fontSize: ERROR_FONT_SIZE,
+    marginTop: 4
+  }
+});
+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 themeStyles = React__default.default.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const requiredMarkStyle = { color: errorColor };
+    const inputStyle = {
+      backgroundColor: colors.surface,
+      color: colors.text,
+      borderColor: hasError ? errorColor : colors.border
+    };
+    const errorTextStyle = { color: errorColor };
+    return {
+      label: labelStyle,
+      requiredMark: requiredMarkStyle,
+      input: inputStyle,
+      errorText: errorTextStyle
+    };
+  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
+      label,
+      " ",
+      required ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: themeStyles.requiredMark, children: "*" }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        accessibilityHint: `Enter ${label}`,
+        accessibilityLabel: label,
+        placeholderTextColor: colors.textSecondary,
+        style: [styles.input, themeStyles.input],
+        testID: "form-field-input",
+        ...textInputProps
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.errorText, themeStyles.errorText], children: error }) : null
+  ] });
+};
+var TRANSPARENT_COLOR = "transparent";
+var WHITE_COLOR = "#fff";
+var styles2 = reactNative.StyleSheet.create({
+  label: {
+    marginBottom: 8,
+    fontWeight: "600"
+  },
+  chipContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  chipWrapper: {
+    marginRight: 8,
+    marginBottom: 8
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    backgroundColor: TRANSPARENT_COLOR,
+    borderWidth: 1
+  },
+  chipText: {}
+});
+var ChipSelector = ({
+  label,
+  options,
+  value,
+  onChange,
+  multiple = false,
+  disabled = false,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const { colors, palette } = theme;
+  const primaryColor = palette.primary["500"];
+  const hasLabel = typeof label === "string" && label !== "";
+  const themeStyles = React__default.default.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const chipStyle = { borderColor: colors.border };
+    const chipSelectedStyle = { backgroundColor: primaryColor };
+    const chipTextStyle = { color: colors.text };
+    const chipTextSelectedStyle = { color: WHITE_COLOR };
+    return {
+      label: labelStyle,
+      chip: chipStyle,
+      chipSelected: chipSelectedStyle,
+      chipText: chipTextStyle,
+      chipTextSelected: chipTextSelectedStyle
+    };
+  }, [colors.border, colors.text, primaryColor]);
+  function isSelected(optionValue) {
+    if (multiple && Array.isArray(value))
+      return value.includes(optionValue);
+    return value === optionValue;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, themeStyles.label], children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.chipContainer, children: options.map((option) => {
+      const selected = isSelected(option.value);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.TouchableOpacity,
+        {
+          accessibilityHint: `Selects ${option.label}`,
+          accessibilityLabel: option.label,
+          accessibilityRole: "button",
+          accessibilityState: { selected },
+          disabled,
+          style: styles2.chipWrapper,
+          testID: `chip-selector-chip-${String(option.value)}`,
+          onPress: () => onChange(option.value),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [
+                styles2.chip,
+                themeStyles.chip,
+                selected ? themeStyles.chipSelected : null
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null], children: option.label })
+            }
+          )
+        },
+        String(option.value)
+      );
+    }) })
+  ] });
+};
+var DESCRIPTION_FONT_SIZE = 12;
+var styles3 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12
+  },
+  textColumn: {
+    flex: 1
+  },
+  label: {
+    fontWeight: "600"
+  },
+  description: {
+    fontSize: DESCRIPTION_FONT_SIZE,
+    marginTop: 2
+  }
+});
+var FormSwitch = ({
+  label,
+  value,
+  onValueChange,
+  disabled = false,
+  description,
+  containerStyle,
+  testID = "form-switch",
+  accessibilityHint
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const { colors } = theme;
+  const hasDescription = typeof description === "string" && description !== "";
+  const themeStyles = React__default.default.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const descriptionStyle = { color: colors.textSecondary };
+    return { label: labelStyle, description: descriptionStyle };
+  }, [colors.text, colors.textSecondary]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        styles3.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.jsx(
+          reactNative.Switch,
+          {
+            accessibilityHint: accessibilityHint ?? label,
+            accessibilityLabel: label,
+            accessibilityRole: "switch",
+            accessibilityState: { checked: value },
+            disabled,
+            testID,
+            value,
+            onValueChange
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.ChipSelector = ChipSelector;
+exports.FormField = FormField;
+exports.FormSwitch = FormSwitch;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/index.mjs

@@ -0,0 +1,233 @@
+import React from 'react';
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, Switch } from 'react-native';
+import { useUi } from '@dloizides/ui-feedback';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/FormField/FormField.tsx
+var CONTAINER_MARGIN_BOTTOM = 16;
+var INPUT_PADDING = 12;
+var INPUT_BORDER_RADIUS = 8;
+var ERROR_FONT_SIZE = 12;
+var styles = StyleSheet.create({
+  container: {
+    marginBottom: CONTAINER_MARGIN_BOTTOM
+  },
+  label: {
+    marginBottom: 4,
+    fontWeight: "600"
+  },
+  input: {
+    padding: INPUT_PADDING,
+    borderRadius: INPUT_BORDER_RADIUS,
+    borderWidth: 1
+  },
+  errorText: {
+    fontSize: ERROR_FONT_SIZE,
+    marginTop: 4
+  }
+});
+var FormField = ({
+  label,
+  required = false,
+  error,
+  containerStyle,
+  ...textInputProps
+}) => {
+  const { theme } = useUi();
+  const { colors, semantic } = theme;
+  const errorColor = semantic.error["500"];
+  const hasError = typeof error === "string" && error !== "";
+  const themeStyles = React.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const requiredMarkStyle = { color: errorColor };
+    const inputStyle = {
+      backgroundColor: colors.surface,
+      color: colors.text,
+      borderColor: hasError ? errorColor : colors.border
+    };
+    const errorTextStyle = { color: errorColor };
+    return {
+      label: labelStyle,
+      requiredMark: requiredMarkStyle,
+      input: inputStyle,
+      errorText: errorTextStyle
+    };
+  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, containerStyle], children: [
+    /* @__PURE__ */ jsxs(Text, { style: [styles.label, themeStyles.label], children: [
+      label,
+      " ",
+      required ? /* @__PURE__ */ jsx(Text, { style: themeStyles.requiredMark, children: "*" }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityHint: `Enter ${label}`,
+        accessibilityLabel: label,
+        placeholderTextColor: colors.textSecondary,
+        style: [styles.input, themeStyles.input],
+        testID: "form-field-input",
+        ...textInputProps
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx(Text, { style: [styles.errorText, themeStyles.errorText], children: error }) : null
+  ] });
+};
+var TRANSPARENT_COLOR = "transparent";
+var WHITE_COLOR = "#fff";
+var styles2 = StyleSheet.create({
+  label: {
+    marginBottom: 8,
+    fontWeight: "600"
+  },
+  chipContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  chipWrapper: {
+    marginRight: 8,
+    marginBottom: 8
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    backgroundColor: TRANSPARENT_COLOR,
+    borderWidth: 1
+  },
+  chipText: {}
+});
+var ChipSelector = ({
+  label,
+  options,
+  value,
+  onChange,
+  multiple = false,
+  disabled = false,
+  containerStyle
+}) => {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const primaryColor = palette.primary["500"];
+  const hasLabel = typeof label === "string" && label !== "";
+  const themeStyles = React.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const chipStyle = { borderColor: colors.border };
+    const chipSelectedStyle = { backgroundColor: primaryColor };
+    const chipTextStyle = { color: colors.text };
+    const chipTextSelectedStyle = { color: WHITE_COLOR };
+    return {
+      label: labelStyle,
+      chip: chipStyle,
+      chipSelected: chipSelectedStyle,
+      chipText: chipTextStyle,
+      chipTextSelected: chipTextSelectedStyle
+    };
+  }, [colors.border, colors.text, primaryColor]);
+  function isSelected(optionValue) {
+    if (multiple && Array.isArray(value))
+      return value.includes(optionValue);
+    return value === optionValue;
+  }
+  return /* @__PURE__ */ jsxs(View, { style: containerStyle, children: [
+    hasLabel ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, themeStyles.label], children: label }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles2.chipContainer, children: options.map((option) => {
+      const selected = isSelected(option.value);
+      return /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: `Selects ${option.label}`,
+          accessibilityLabel: option.label,
+          accessibilityRole: "button",
+          accessibilityState: { selected },
+          disabled,
+          style: styles2.chipWrapper,
+          testID: `chip-selector-chip-${String(option.value)}`,
+          onPress: () => onChange(option.value),
+          children: /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles2.chip,
+                themeStyles.chip,
+                selected ? themeStyles.chipSelected : null
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles2.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null], children: option.label })
+            }
+          )
+        },
+        String(option.value)
+      );
+    }) })
+  ] });
+};
+var DESCRIPTION_FONT_SIZE = 12;
+var styles3 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12
+  },
+  textColumn: {
+    flex: 1
+  },
+  label: {
+    fontWeight: "600"
+  },
+  description: {
+    fontSize: DESCRIPTION_FONT_SIZE,
+    marginTop: 2
+  }
+});
+var FormSwitch = ({
+  label,
+  value,
+  onValueChange,
+  disabled = false,
+  description,
+  containerStyle,
+  testID = "form-switch",
+  accessibilityHint
+}) => {
+  const { theme } = useUi();
+  const { colors } = theme;
+  const hasDescription = typeof description === "string" && description !== "";
+  const themeStyles = React.useMemo(() => {
+    const labelStyle = { color: colors.text };
+    const descriptionStyle = { color: colors.textSecondary };
+    return { label: labelStyle, description: descriptionStyle };
+  }, [colors.text, colors.textSecondary]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles3.container,
+        containerStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles3.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles3.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles3.description, themeStyles.description], children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            accessibilityHint: accessibilityHint ?? label,
+            accessibilityLabel: label,
+            accessibilityRole: "switch",
+            accessibilityState: { checked: value },
+            disabled,
+            testID,
+            value,
+            onValueChange
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ChipSelector, FormField, FormSwitch };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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":"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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"]}

package/package.json

@@ -0,0 +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"
+  }
+}