@dloizides/ui-forms 1.4.0 → 1.6.0

package/dist/index.js

@@ -1,15 +1,83 @@
 'use strict';
 
-var React3 = require('react');
+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 React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/FormField/FormField.tsx
+// src/Field/Field.tsx
+var CONTAINER_MARGIN_BOTTOM = 16;
+var LABEL_FONT_SIZE = 13;
+var LABEL_FONT_WEIGHT = "600";
+var LABEL_MARGIN_BOTTOM = 4;
+var ERROR_FONT_SIZE = 12;
+var ERROR_MARGIN_TOP = 4;
+var styles = reactNative.StyleSheet.create({
+  container: {
+    marginBottom: CONTAINER_MARGIN_BOTTOM
+  },
+  label: {
+    marginBottom: LABEL_MARGIN_BOTTOM,
+    fontSize: LABEL_FONT_SIZE,
+    fontWeight: LABEL_FONT_WEIGHT
+  },
+  errorText: {
+    fontSize: ERROR_FONT_SIZE,
+    marginTop: ERROR_MARGIN_TOP
+  }
+});
+var fieldSeq = 0;
+function useFieldErrorId() {
+  const [id] = React__default.default.useState(() => {
+    fieldSeq += 1;
+    return `field-error-${String(fieldSeq)}`;
+  });
+  return id;
+}
+function hasFieldError(error) {
+  return typeof error === "string" && error !== "";
+}
+var Field = ({
+  label,
+  children,
+  required = false,
+  error,
+  containerStyle,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const { colors, semantic } = theme;
+  const errorColor = semantic.error["500"];
+  const hasError = hasFieldError(error);
+  const hasLabel = typeof label === "string" && label !== "";
+  const errorId = useFieldErrorId();
+  const themeStyles = React__default.default.useMemo(
+    () => ({
+      label: { color: colors.textSecondary },
+      requiredMark: { color: errorColor },
+      errorText: { color: errorColor }
+    }),
+    [colors.textSecondary, errorColor]
+  );
+  const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], testID, children: [
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
+      label,
+      " ",
+      required ? (
+        // The asterisk is decorative — the control's `aria-required` conveys "required" to
+        // assistive tech, so a screen reader says "required" instead of "star".
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
+      ) : null
+    ] }) : null,
+    control,
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
+  ] });
+};
 var IS_WEB = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
@@ -42,27 +110,27 @@ function useThemedInput(options = {}) {
   const { hasError = false, onFocus, onBlur } = options;
   const { theme } = uiFeedback.useUi();
   const { colors, palette, semantic } = theme;
-  const [isFocused, setIsFocused] = React3.useState(false);
-  const [isHovered, setIsHovered] = React3.useState(false);
-  const handleFocus = React3.useCallback(
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const handleFocus = React.useCallback(
     (e) => {
       setIsFocused(true);
       onFocus?.(e);
     },
     [onFocus]
   );
-  const handleBlur = React3.useCallback(
+  const handleBlur = React.useCallback(
     (e) => {
       setIsFocused(false);
       onBlur?.(e);
     },
     [onBlur]
   );
-  const handleHoverIn = React3.useCallback(() => setIsHovered(true), []);
-  const handleHoverOut = React3.useCallback(() => setIsHovered(false), []);
+  const handleHoverIn = React.useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = React.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
   const errorColor = semantic.error["500"];
-  const style = React3.useMemo(() => {
+  const style = React.useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
@@ -90,8 +158,8 @@ function useThemedInput(options = {}) {
     primary,
     errorColor
   ]);
-  const focusBind = React3.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
-  const hoverBind = React3.useMemo(
+  const focusBind = React.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
+  const hoverBind = React.useMemo(
     () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
@@ -105,7 +173,7 @@ function useThemedInput(options = {}) {
   };
 }
 var IS_WEB2 = reactNative.Platform.OS === "web";
-var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
   const {
     style: themedStyle,
     placeholderTextColor: themedPlaceholder,
@@ -131,85 +199,37 @@ var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInpu
     }
   );
 });
-var CONTAINER_MARGIN_BOTTOM = 16;
 var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
-var ERROR_FONT_SIZE = 12;
-var LABEL_FONT_SIZE = 13;
-var styles = reactNative.StyleSheet.create({
-  container: {
-    marginBottom: CONTAINER_MARGIN_BOTTOM
-  },
-  label: {
-    marginBottom: 4,
-    fontSize: LABEL_FONT_SIZE,
-    fontWeight: "600"
-  },
+var INPUT_BORDER_WIDTH = 1;
+var styles2 = reactNative.StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
     borderRadius: INPUT_BORDER_RADIUS,
-    borderWidth: 1
-  },
-  errorText: {
-    fontSize: ERROR_FONT_SIZE,
-    marginTop: 4
+    borderWidth: INPUT_BORDER_WIDTH
   }
 });
-var formFieldSeq = 0;
-function useErrorId() {
-  const [id] = React3__default.default.useState(() => {
-    formFieldSeq += 1;
-    return `form-field-error-${String(formFieldSeq)}`;
-  });
-  return id;
-}
 var FormField = ({
   label,
   required = false,
   error,
   containerStyle,
   ...textInputProps
-}) => {
-  const { theme } = uiFeedback.useUi();
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
-  const hasError = typeof error === "string" && error !== "";
-  const errorId = useErrorId();
-  const themeStyles = React3__default.default.useMemo(
-    () => ({
-      label: { color: colors.textSecondary },
-      requiredMark: { color: errorColor },
-      errorText: { color: errorColor }
-    }),
-    [colors.textSecondary, errorColor]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
-      label,
-      " ",
-      required ? (
-        // The asterisk is decorative — `requiredField` conveys "required" to assistive tech.
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ThemedTextInput,
-      {
-        accessibilityHint: `Enter ${label}`,
-        accessibilityLabel: label,
-        describedById: hasError ? errorId : void 0,
-        hasError,
-        requiredField: required,
-        style: styles.input,
-        testID: "form-field-input",
-        ...textInputProps
-      }
-    ),
-    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
-  ] });
-};
+}) => /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(
+  ThemedTextInput,
+  {
+    accessibilityHint: `Enter ${label}`,
+    accessibilityLabel: label,
+    describedById,
+    hasError,
+    requiredField: required,
+    style: styles2.input,
+    testID: "form-field-input",
+    ...textInputProps
+  }
+) });
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
 var SOLID_RADIUS = 20;
@@ -225,6 +245,7 @@ var RGB_R_END = 2;
 var RGB_G_END = 4;
 var RGB_B_END = 6;
 var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+var CHIP_GUTTER = 8;
 function withAlpha2(hex, alpha) {
   const normalized = hex.replace("#", "");
   const isShort = normalized.length === HEX_SHORT_LENGTH2;
@@ -235,18 +256,18 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles2 = reactNative.StyleSheet.create({
-  label: {
-    marginBottom: 8,
-    fontWeight: "600"
-  },
+var styles3 = reactNative.StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    // Each chip's bottom gutter also hangs off the LAST row, stacking on `Field`'s container
+    // margin (8 + 16 = 24) and dropping the block below the `FormField` beside it. Cancelling it
+    // is standard gutter compensation: inner rows keep their 8px, the block ends at Field's 16.
+    marginBottom: -CHIP_GUTTER
   },
   chipWrapper: {
-    marginRight: 8,
-    marginBottom: 8
+    marginRight: CHIP_GUTTER,
+    marginBottom: CHIP_GUTTER
   },
   chip: {
     paddingHorizontal: 12,
@@ -271,7 +292,7 @@ function OutlineChip({
   colors,
   onPress
 }) {
-  const [hovered, setHovered] = React3__default.default.useState(false);
+  const [hovered, setHovered] = React__default.default.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
   const backgroundColor = selected ? colors.tint : colors.muted;
@@ -285,12 +306,12 @@ function OutlineChip({
       accessibilityState: { selected, disabled },
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles2.chipWrapper,
+      style: styles3.chipWrapper,
       testID: `chip-selector-chip-${String(option.value)}`,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, styles2.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, styles3.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -312,13 +333,18 @@ function SolidChip({
       accessibilityState: { selected, disabled },
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles2.chipWrapper,
+      style: styles3.chipWrapper,
       testID: `chip-selector-chip-${String(option.value)}`,
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
+var IS_WEB3 = reactNative.Platform.OS === "web";
+function groupA11yProps(describedById, hasError) {
+  if (!IS_WEB3) return {};
+  return { "aria-invalid": hasError ? true : void 0, "aria-describedby": describedById };
+}
 var ChipSelector = ({
   label,
   options,
@@ -327,12 +353,14 @@ var ChipSelector = ({
   multiple = false,
   disabled = false,
   variant = "solid",
-  containerStyle
+  containerStyle,
+  required = false,
+  error,
+  testID
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const hasLabel = typeof label === "string" && label !== "";
-  const chipColors = React3__default.default.useMemo(() => {
+  const chipColors = React__default.default.useMemo(() => {
     const primary = palette.primary["500"];
     return {
       border: colors.border,
@@ -343,43 +371,26 @@ var ChipSelector = ({
       tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
     };
   }, [colors.border, colors.text, colors.textSecondary, colors.background, palette.primary]);
-  const labelStyle = React3__default.default.useMemo(() => ({ color: colors.text }), [colors.text]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
-    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, labelStyle], children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.chipContainer, children: options.map((option) => {
-      const selected = isSelected(option.value);
-      const onPress = () => onChange(option.value);
-      return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(
-        OutlineChip,
-        {
-          colors: chipColors,
-          disabled,
-          option,
-          selected,
-          onPress
-        },
-        String(option.value)
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        SolidChip,
-        {
-          colors: chipColors,
-          disabled,
-          option,
-          selected,
-          onPress
-        },
-        String(option.value)
-      );
-    }) })
-  ] });
+  function renderChip(option) {
+    const chipProps = {
+      colors: chipColors,
+      disabled,
+      option,
+      selected: isSelected(option.value),
+      onPress: () => onChange(option.value)
+    };
+    const key = String(option.value);
+    return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(OutlineChip, { ...chipProps }, key) : /* @__PURE__ */ jsxRuntime.jsx(SolidChip, { ...chipProps }, key);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, testID, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
 };
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -410,7 +421,7 @@ var FormSwitch = ({
   const { theme } = uiFeedback.useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React3__default.default.useMemo(() => {
+  const themeStyles = React__default.default.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -419,13 +430,13 @@ var FormSwitch = ({
     reactNative.View,
     {
       style: [
-        styles3.container,
+        styles4.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Switch,
@@ -450,7 +461,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -501,7 +512,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React3__default.default.useMemo(() => {
+  const themeStyles = React__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };
@@ -532,14 +543,14 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles4.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles5.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -547,6 +558,7 @@ var FormCheckbox = ({
 };
 
 exports.ChipSelector = ChipSelector;
+exports.Field = Field;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;