@dloizides/ui-forms 1.6.0 → 1.7.0

package/dist/index.js

@@ -4,48 +4,119 @@ var React = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
+var uiButtons = require('@dloizides/ui-buttons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/Field/Field.tsx
+function FieldLabel({
+  label,
+  marker,
+  optionalLabel,
+  style,
+  requiredMarkStyle,
+  optionalMarkStyle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style, children: [
+    label,
+    " ",
+    marker === "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: requiredMarkStyle, children: "*" })
+    ) : null,
+    marker === "optional" && optionalLabel !== "" ? (
+      // Also decorative: "optional" is the ABSENCE of `aria-required`, which assistive tech
+      // already conveys. Rendering it to a screen reader would double-announce the same fact.
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: optionalMarkStyle, children: optionalLabel })
+    ) : null
+  ] });
+}
+
+// src/Field/fieldMarkers.ts
+var DEFAULT_OPTIONAL_LABEL = "(optional)";
+function resolveFieldMarker(required, optional) {
+  if (required) return "required";
+  if (optional) return "optional";
+  return "none";
+}
+var FIELD_FONT_SIZE = 13;
+var FIELD_FONT_WEIGHT = "600";
+var CONTROL_FONT_SIZE = 11;
+var CONTROL_FONT_WEIGHT = "700";
+var CONTROL_LETTER_SPACING = 0.4;
+var labelVariantStyles = reactNative.StyleSheet.create({
+  field: {
+    fontSize: FIELD_FONT_SIZE,
+    fontWeight: FIELD_FONT_WEIGHT
+  },
+  control: {
+    fontSize: CONTROL_FONT_SIZE,
+    fontWeight: CONTROL_FONT_WEIGHT,
+    letterSpacing: CONTROL_LETTER_SPACING,
+    textTransform: "uppercase"
+  }
+});
+function resolveLabelVariantStyle(variant) {
+  return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
+}
 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 HINT_FONT_SIZE = 12;
+var HINT_MARGIN_TOP = 4;
+var OPTIONAL_MARK_FONT_WEIGHT = "400";
 var styles = reactNative.StyleSheet.create({
   container: {
     marginBottom: CONTAINER_MARGIN_BOTTOM
   },
   label: {
-    marginBottom: LABEL_MARGIN_BOTTOM,
-    fontSize: LABEL_FONT_SIZE,
-    fontWeight: LABEL_FONT_WEIGHT
+    marginBottom: LABEL_MARGIN_BOTTOM
+  },
+  hintText: {
+    fontSize: HINT_FONT_SIZE,
+    marginTop: HINT_MARGIN_TOP
   },
   errorText: {
     fontSize: ERROR_FONT_SIZE,
     marginTop: ERROR_MARGIN_TOP
+  },
+  optionalMark: {
+    fontWeight: OPTIONAL_MARK_FONT_WEIGHT
   }
 });
 var fieldSeq = 0;
-function useFieldErrorId() {
-  const [id] = React__default.default.useState(() => {
+function useFieldIds() {
+  const [ids] = React__default.default.useState(() => {
     fieldSeq += 1;
-    return `field-error-${String(fieldSeq)}`;
+    const seq = String(fieldSeq);
+    return { hintId: `field-hint-${seq}`, errorId: `field-error-${seq}` };
   });
-  return id;
+  return ids;
+}
+function isPresent(value) {
+  return typeof value === "string" && value !== "";
 }
 function hasFieldError(error) {
-  return typeof error === "string" && error !== "";
+  return isPresent(error);
+}
+function joinDescribedBy(hintId, errorId) {
+  const ids = [hintId, errorId].filter((id) => isPresent(id));
+  return ids.length > 0 ? ids.join(" ") : void 0;
 }
 var Field = ({
   label,
   children,
   required = false,
+  optional = false,
+  optionalLabel = DEFAULT_OPTIONAL_LABEL,
+  hint,
   error,
+  labelVariant,
+  labelStyle,
   containerStyle,
   testID
 }) => {
@@ -53,31 +124,89 @@ var Field = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = hasFieldError(error);
-  const hasLabel = typeof label === "string" && label !== "";
-  const errorId = useFieldErrorId();
+  const hasHint = isPresent(hint);
+  const labelText = label ?? "";
+  const hasLabel = labelText !== "";
+  const marker = resolveFieldMarker(required, optional);
+  const { hintId, errorId } = useFieldIds();
   const themeStyles = React__default.default.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
+      // The optional marker is an aside, so it sits a step back from the label's own ink.
+      optionalMark: { color: colors.textSecondary },
+      hintText: { color: colors.textSecondary },
       errorText: { color: errorColor }
     }),
     [colors.textSecondary, errorColor]
   );
-  const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
+  const describedById = joinDescribedBy(hasHint ? hintId : void 0, hasError ? errorId : void 0);
+  const control = typeof children === "function" ? children({ describedById, 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,
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      FieldLabel,
+      {
+        label: labelText,
+        marker,
+        optionalLabel,
+        optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
+        requiredMarkStyle: themeStyles.requiredMark,
+        style: [styles.label, resolveLabelVariantStyle(labelVariant), themeStyles.label, labelStyle]
+      }
+    ) : null,
     control,
+    hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles.hintText, themeStyles.hintText], children: hint }) : null,
     hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
   ] });
 };
+var ACTIONS_GAP = 12;
+var styles2 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: ACTIONS_GAP
+  }
+});
+var FormActions = ({
+  onSave,
+  onCancel,
+  saveLabel,
+  cancelLabel = "",
+  saveHint,
+  cancelHint,
+  saving = false,
+  saveDisabled = false,
+  containerStyle,
+  saveTestID = "save-button",
+  cancelTestID = "cancel-button",
+  testID
+}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.container, containerStyle], testID, children: [
+  typeof onCancel === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
+    uiButtons.Button,
+    {
+      accessibilityHint: cancelHint ?? cancelLabel,
+      accessibilityLabel: cancelLabel,
+      disabled: saving,
+      label: cancelLabel,
+      testID: cancelTestID,
+      variant: "outline",
+      onPress: onCancel
+    }
+  ) : null,
+  /* @__PURE__ */ jsxRuntime.jsx(
+    uiButtons.Button,
+    {
+      accessibilityHint: saveHint ?? saveLabel,
+      accessibilityLabel: saveLabel,
+      disabled: saveDisabled,
+      label: saveLabel,
+      loading: saving,
+      testID: saveTestID,
+      variant: "primary",
+      onPress: onSave
+    }
+  )
+] });
 var IS_WEB = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
@@ -137,7 +266,8 @@ function useThemedInput(options = {}) {
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
     if (!IS_WEB) return base;
-    const ring = isFocused && !hasError ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(primary, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : primary;
+    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
       // Collapse the eased transition to instant when the user prefers reduced motion.
@@ -203,7 +333,7 @@ var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
 var INPUT_BORDER_WIDTH = 1;
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
@@ -225,7 +355,7 @@ var FormField = ({
     describedById,
     hasError,
     requiredField: required,
-    style: styles2.input,
+    style: styles3.input,
     testID: "form-field-input",
     ...textInputProps
   }
@@ -246,6 +376,13 @@ 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;
+var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
+var ON_BRAND_SCALE = "onBrand";
+var MAIN_STEP = "500";
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
+}
 function withAlpha2(hex, alpha) {
   const normalized = hex.replace("#", "");
   const isShort = normalized.length === HEX_SHORT_LENGTH2;
@@ -256,7 +393,7 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -285,11 +422,23 @@ var styles3 = reactNative.StyleSheet.create({
   chipText: {},
   chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
+function chipIdentity(option, selected, config) {
+  return {
+    testID: `${config.prefix}-${String(option.value)}`,
+    // The English default is retained verbatim: erevna/katalogos assert the exact string
+    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
+    accessibilityHint: config.hint ?? `Selects ${option.label}`,
+    ariaPressed: config.multiple ? selected : void 0
+  };
+}
 function OutlineChip({
   option,
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   onPress
 }) {
   const [hovered, setHovered] = React__default.default.useState(false);
@@ -300,18 +449,19 @@ function OutlineChip({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      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 }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.chipText, styles4.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -320,23 +470,27 @@ function SolidChip({
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   onPress
 }) {
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
-  const textColor = selected ? WHITE_COLOR : colors.textStrong;
+  const textColor = selected ? colors.onPrimary : colors.textStrong;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onPress,
-      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 }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -356,7 +510,9 @@ var ChipSelector = ({
   containerStyle,
   required = false,
   error,
-  testID
+  testID,
+  chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
+  optionAccessibilityHint
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
@@ -367,30 +523,37 @@ var ChipSelector = ({
       textStrong: colors.text,
       textMuted: colors.textSecondary,
       primary,
+      onPrimary: onBrandInk(palette),
       muted: colors.background,
       tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
     };
-  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette.primary]);
+  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
   function renderChip(option) {
+    const selected = isSelected(option.value);
     const chipProps = {
       colors: chipColors,
       disabled,
       option,
-      selected: isSelected(option.value),
+      selected,
+      ...chipIdentity(option, selected, {
+        prefix: chipTestIDPrefix,
+        hint: optionAccessibilityHint,
+        multiple
+      }),
       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) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, testID, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
 };
 var DESCRIPTION_FONT_SIZE = 12;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -430,13 +593,13 @@ var FormSwitch = ({
     reactNative.View,
     {
       style: [
-        styles4.container,
+        styles5.container,
         containerStyle
       ],
       children: [
-        /* @__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.jsxs(reactNative.View, { style: styles5.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Switch,
@@ -456,12 +619,12 @@ var FormSwitch = ({
   );
 };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
-var HINT_FONT_SIZE = 12;
+var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -490,7 +653,7 @@ var styles5 = reactNative.StyleSheet.create({
     fontWeight: "600"
   },
   hint: {
-    fontSize: HINT_FONT_SIZE,
+    fontSize: HINT_FONT_SIZE2,
     marginTop: 2
   }
 });
@@ -543,14 +706,14 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles5.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles6.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__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
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -558,7 +721,9 @@ var FormCheckbox = ({
 };
 
 exports.ChipSelector = ChipSelector;
+exports.DEFAULT_OPTIONAL_LABEL = DEFAULT_OPTIONAL_LABEL;
 exports.Field = Field;
+exports.FormActions = FormActions;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;