@dloizides/ui-forms 1.21.0 → 1.22.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, Image, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Z_INDEX, focusRingOutline, readableScaleInk } from '@dloizides/design-tokens';
-import { themeFocusRingColor, Button } from '@dloizides/ui-buttons';
+import { themeFocusRingColor, Button, useFocusRing } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 
@@ -1854,7 +1854,193 @@ function toggleGroupSelection(selected, groupKeys, order) {
   });
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
+var ROW_GAP = 4;
+var TAB_PADDING = 4;
+var INDICATOR_WIDTH = 2;
+var TAB_FONT_SIZE = 12;
+var styles10 = StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "nowrap", gap: ROW_GAP },
+  tab: {
+    borderBottomWidth: INDICATOR_WIDTH,
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+    minHeight: MIN_TOUCH_TARGET_PX,
+    minWidth: 0,
+    paddingHorizontal: TAB_PADDING
+  },
+  text: { fontSize: TAB_FONT_SIZE, textAlign: "center" },
+  textSelected: { fontWeight: "700" }
+});
+var StepperTab = ({
+  step,
+  selected,
+  hint,
+  onStep,
+  testID
+}) => {
+  const { theme } = useUi();
+  const ring = useFocusRing();
+  const indicator = selected ? theme.palette.primary["500"] : theme.colors.border;
+  const webKeyProps = {
+    onKeyDown: (event) => {
+      if (event.key !== " ") return;
+      event.preventDefault?.();
+      onStep(step.key);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: step.label,
+      accessibilityRole: "tab",
+      accessibilityState: { selected },
+      "aria-selected": selected,
+      style: [styles10.tab, { borderBottomColor: indicator }, ring.ringStyle],
+      testID,
+      onBlur: ring.onBlur,
+      onFocus: ring.onFocus,
+      onPress: () => onStep(step.key),
+      ...webKeyProps,
+      children: /* @__PURE__ */ jsx(Text, { style: [styles10.text, { color: theme.colors.text }, selected ? styles10.textSelected : void 0], children: step.label })
+    }
+  );
+};
+var StepperTabs = ({
+  steps,
+  current,
+  onStep,
+  stepHint,
+  testID
+}) => /* @__PURE__ */ jsx(View, { accessibilityRole: "tablist", style: styles10.row, testID, children: steps.map((step) => /* @__PURE__ */ jsx(
+  StepperTab,
+  {
+    hint: stepHint,
+    selected: step.key === current,
+    step,
+    testID: `${testID}-${step.key}`,
+    onStep
+  },
+  step.key
+)) });
+
+// src/Stepper/stepperModel.ts
+function resolveStepNeighbours(steps, current) {
+  const index = steps.findIndex((step) => step.key === current);
+  if (index < 0) return { previous: null, next: null };
+  return { previous: steps[index - 1] ?? null, next: steps[index + 1] ?? null };
+}
+var ROW_GAP2 = 8;
+var styles11 = StyleSheet.create({
+  cell: { flex: 1, minWidth: 0 },
+  row: { flexDirection: "row", gap: ROW_GAP2 }
+});
+var StepperNav = ({
+  steps,
+  current,
+  onStep,
+  labels,
+  testID
+}) => {
+  const { previous, next } = resolveStepNeighbours(steps, current);
+  return /* @__PURE__ */ jsxs(View, { style: styles11.row, testID, children: [
+    /* @__PURE__ */ jsx(View, { style: styles11.cell, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.backHint,
+        accessibilityLabel: labels.back,
+        autoLoading: false,
+        disabled: previous === null,
+        label: labels.back,
+        testID: `${testID}-back`,
+        variant: "outline",
+        onPress: () => {
+          if (previous !== null) onStep(previous.key);
+        }
+      }
+    ) }),
+    next === null ? null : /* @__PURE__ */ jsx(View, { style: styles11.cell, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.nextHint,
+        accessibilityLabel: labels.next(next),
+        autoLoading: false,
+        label: labels.next(next),
+        testID: `${testID}-next`,
+        onPress: () => onStep(next.key)
+      }
+    ) })
+  ] });
+};
+var DEFAULT_PREVIEW_PX = 48;
+var PREVIEW_RADIUS = 8;
+var GAP = 8;
+var TITLE_FONT_SIZE = 14;
+var HELP_FONT_SIZE = 13;
+var styles12 = StyleSheet.create({
+  help: { flex: 1, fontSize: HELP_FONT_SIZE },
+  root: { gap: GAP },
+  tile: { alignItems: "center", flexDirection: "row", gap: GAP },
+  title: { fontSize: TITLE_FONT_SIZE, fontWeight: "700" },
+  toggle: { alignSelf: "flex-start", justifyContent: "center", minHeight: MIN_TOUCH_TARGET_PX },
+  toggleText: { fontSize: TITLE_FONT_SIZE, fontWeight: "700", textDecorationLine: "underline" }
+});
+var UploadWithLinkField = ({
+  value,
+  onChange,
+  labels,
+  uploadControl,
+  testID,
+  disabled = false,
+  previewSize = DEFAULT_PREVIEW_PX
+}) => {
+  const { theme } = useUi();
+  const ring = useFocusRing();
+  const url = value ?? "";
+  const [pasting, setPasting] = useState(url !== "");
+  const previewBox = { borderRadius: PREVIEW_RADIUS, height: previewSize, width: previewSize };
+  return /* @__PURE__ */ jsxs(View, { style: styles12.root, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles12.title, { color: theme.colors.text }], children: labels.title }),
+    /* @__PURE__ */ jsxs(View, { style: styles12.tile, children: [
+      url === "" ? /* @__PURE__ */ jsx(View, { style: [previewBox, { backgroundColor: theme.colors.border }] }) : /* @__PURE__ */ jsx(Image, { accessible: false, source: { uri: url }, style: previewBox, testID: `${testID}-preview` }),
+      labels.help === void 0 ? null : /* @__PURE__ */ jsx(Text, { style: [styles12.help, { color: theme.colors.text }], children: labels.help })
+    ] }),
+    uploadControl,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: labels.pasteToggleHint,
+        accessibilityLabel: labels.pasteToggle,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: pasting },
+        "aria-expanded": pasting,
+        style: [styles12.toggle, ring.ringStyle],
+        testID: `${testID}-paste`,
+        onBlur: ring.onBlur,
+        onFocus: ring.onFocus,
+        onPress: () => setPasting(!pasting),
+        children: /* @__PURE__ */ jsx(Text, { style: [styles12.toggleText, { color: theme.colors.text }], children: labels.pasteToggle })
+      }
+    ),
+    pasting ? /* @__PURE__ */ jsx(
+      FormField,
+      {
+        accessibilityHint: labels.linkHint,
+        editable: !disabled,
+        label: labels.link,
+        placeholder: labels.linkPlaceholder,
+        testID,
+        value: url,
+        onChangeText: onChange
+      }
+    ) : null
+  ] });
+};
 
-export { AlignToControl, AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, StepperNav, StepperTabs, ThemedTextInput, TypeaheadControl, UploadWithLinkField, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map