@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-WKFZJO54.js

@@ -0,0 +1,437 @@
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useInputPlatform, Input, TextField } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, TextInput, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var US_STATES = [
+  ["AL", "Alabama"],
+  ["AK", "Alaska"],
+  ["AZ", "Arizona"],
+  ["AR", "Arkansas"],
+  ["CA", "California"],
+  ["CO", "Colorado"],
+  ["CT", "Connecticut"],
+  ["DE", "Delaware"],
+  ["DC", "District of Columbia"],
+  ["FL", "Florida"],
+  ["GA", "Georgia"],
+  ["HI", "Hawaii"],
+  ["ID", "Idaho"],
+  ["IL", "Illinois"],
+  ["IN", "Indiana"],
+  ["IA", "Iowa"],
+  ["KS", "Kansas"],
+  ["KY", "Kentucky"],
+  ["LA", "Louisiana"],
+  ["ME", "Maine"],
+  ["MD", "Maryland"],
+  ["MA", "Massachusetts"],
+  ["MI", "Michigan"],
+  ["MN", "Minnesota"],
+  ["MS", "Mississippi"],
+  ["MO", "Missouri"],
+  ["MT", "Montana"],
+  ["NE", "Nebraska"],
+  ["NV", "Nevada"],
+  ["NH", "New Hampshire"],
+  ["NJ", "New Jersey"],
+  ["NM", "New Mexico"],
+  ["NY", "New York"],
+  ["NC", "North Carolina"],
+  ["ND", "North Dakota"],
+  ["OH", "Ohio"],
+  ["OK", "Oklahoma"],
+  ["OR", "Oregon"],
+  ["PA", "Pennsylvania"],
+  ["RI", "Rhode Island"],
+  ["SC", "South Carolina"],
+  ["SD", "South Dakota"],
+  ["TN", "Tennessee"],
+  ["TX", "Texas"],
+  ["UT", "Utah"],
+  ["VT", "Vermont"],
+  ["VA", "Virginia"],
+  ["WA", "Washington"],
+  ["WV", "West Virginia"],
+  ["WI", "Wisconsin"],
+  ["WY", "Wyoming"]
+];
+var BASE_LABELS = {
+  name: "Full name",
+  line1: "Address",
+  line2: "Address line 2 (optional)",
+  city: "City",
+  region: "Region",
+  postalCode: "Postal code"
+};
+var ADDRESS_FORMATS = {
+  GB: {
+    locality: [
+      { field: "city", grow: 1.6 },
+      { field: "postalCode", grow: 1 }
+    ],
+    labels: { ...BASE_LABELS, city: "Town or city", postalCode: "Postcode" },
+    postalPattern: /^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$/i,
+    postalError: "Enter a full postcode, like BS6 5QE.",
+    postalUppercase: true
+  },
+  US: {
+    locality: [
+      { field: "city", grow: 1.4 },
+      { field: "region", grow: 1 },
+      { field: "postalCode", grow: 1 }
+    ],
+    labels: { ...BASE_LABELS, region: "State", postalCode: "ZIP code" },
+    regions: US_STATES.map(([value, label]) => ({ value, label })),
+    postalPattern: /^\d{5}(-\d{4})?$/,
+    postalError: "Enter a 5-digit ZIP code, like 97205."
+  },
+  default: {
+    locality: [
+      { field: "city", grow: 1.6 },
+      { field: "postalCode", grow: 1 }
+    ],
+    labels: BASE_LABELS
+  }
+};
+var ADDRESS_COUNTRIES = [
+  ["AU", "Australia"],
+  ["AT", "Austria"],
+  ["BE", "Belgium"],
+  ["CA", "Canada"],
+  ["DK", "Denmark"],
+  ["FI", "Finland"],
+  ["FR", "France"],
+  ["DE", "Germany"],
+  ["HU", "Hungary"],
+  ["IE", "Ireland"],
+  ["IT", "Italy"],
+  ["JP", "Japan"],
+  ["NL", "Netherlands"],
+  ["NZ", "New Zealand"],
+  ["NO", "Norway"],
+  ["PL", "Poland"],
+  ["PT", "Portugal"],
+  ["ES", "Spain"],
+  ["SE", "Sweden"],
+  ["CH", "Switzerland"],
+  ["GB", "United Kingdom"],
+  ["US", "United States"]
+].map(([value, label]) => ({ value, label }));
+var ADDRESS_TEXT_CONTENT_TYPE = {
+  name: "name",
+  line1: "streetAddressLine1",
+  line2: "streetAddressLine2",
+  city: "addressCity",
+  region: "addressState",
+  postalCode: "postalCode"
+};
+var ADDRESS_AUTOFILL_HINT = {
+  name: "name",
+  line1: "address-line1",
+  line2: "address-line2",
+  city: "postal-address-locality",
+  region: "postal-address-region",
+  postalCode: "postal-code"
+};
+var DEFAULT_LABELS = {
+  country: "Country or region",
+  countryShort: "Country",
+  line2Placeholder: "Flat, floor, building",
+  search: "Search",
+  required: (label) => `Enter ${label.toLowerCase()}.`
+};
+function addressFormat(country, formats = ADDRESS_FORMATS) {
+  return formats[country] ?? ADDRESS_FORMATS[country] ?? formats.default ?? ADDRESS_FORMATS.default;
+}
+function validateAddressField(field, value, format, labels = DEFAULT_LABELS) {
+  if (field === "line2") return void 0;
+  if (field === "region" && !format.locality.some((c) => c.field === "region")) return void 0;
+  const v = (value[field] ?? "").trim();
+  if (!v) return labels.required(format.labels[field]);
+  if (field === "postalCode" && format.postalPattern && !format.postalPattern.test(v)) {
+    return format.postalError ?? labels.required(format.labels.postalCode);
+  }
+  return void 0;
+}
+var FIELDS_BEFORE = ["name", "line1", "line2"];
+function AddressBlock({
+  value,
+  onChange,
+  countries = ADDRESS_COUNTRIES,
+  formats: formatsProp,
+  errors: errorsProp,
+  platform,
+  labels: labelsProp,
+  surface = "filled",
+  size = "lg",
+  density = "standard",
+  loading = false,
+  disabled = false
+}) {
+  const labels = useLabels("addressBlockNative", DEFAULT_LABELS, labelsProp);
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const formats = React.useMemo(() => ({ ...ADDRESS_FORMATS, ...formatsProp }), [formatsProp]);
+  const format = addressFormat(value.country, formats);
+  const [touched, setTouched] = React.useState(
+    {}
+  );
+  const [listFor, setListFor] = React.useState(null);
+  const set = (field, next) => {
+    const v = field === "postalCode" && format.postalUppercase ? next.toUpperCase() : next;
+    const updated = { ...value, [field]: v };
+    if (field === "country") {
+      const nf = addressFormat(next, formats);
+      if (value.region && nf.regions && !nf.regions.some((r) => r.value === value.region))
+        updated.region = void 0;
+      setTouched({});
+    }
+    onChange(updated);
+    if (field !== "country" && touched[field] !== void 0) {
+      setTouched((t) => ({ ...t, [field]: validateAddressField(field, updated, format, labels) }));
+    }
+  };
+  const blur = (f) => setTouched((t) => ({ ...t, [f]: validateAddressField(f, value, format, labels) }));
+  const errorOf = (f) => errorsProp?.[f] ?? touched[f];
+  const fieldProps = (f) => ({
+    value: value[f] ?? "",
+    onChangeText: (t) => set(f, t),
+    onBlur: () => blur(f),
+    ...disabled ? { editable: false } : {},
+    textContentType: ADDRESS_TEXT_CONTENT_TYPE[f],
+    autoComplete: ADDRESS_AUTOFILL_HINT[f],
+    ...f === "postalCode" ? { autoCapitalize: format.postalUppercase ? "characters" : "none", autoCorrect: false } : f === "name" || f === "line1" || f === "line2" || f === "city" ? { autoCapitalize: "words" } : {}
+  });
+  const densityGap = density === "compact" ? { gap: theme.space[8] } : density === "comfortable" ? { gap: theme.space[16] } : void 0;
+  const countryName = countries.find((c) => c.value === value.country)?.label ?? value.country;
+  const locality = format.locality.map((c) => c.field);
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { testID: "address-loading", style: [styles.andWrap, densityGap], "aria-busy": true, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl[size], decorative: true }, i)) });
+  }
+  if (os === "ios") {
+    const rows = [];
+    const valueRow = (key, label, shown) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${label}, ${shown}`,
+        accessibilityState: disabled ? { disabled: true } : void 0,
+        disabled,
+        onPress: () => setListFor(key),
+        style: ({ pressed }) => [
+          styles.iosRow,
+          { minHeight: theme.ctl[size] },
+          pressed && styles.pressed
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.iosText, styles.flex], children: label }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.iosText, styles.iosValue], children: shown }),
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, color: theme.color.text3 })
+        ]
+      },
+      key
+    );
+    rows.push(valueRow("country", labels.countryShort, countryName));
+    for (const f of [...FIELDS_BEFORE, ...locality]) {
+      if (f === "region" && format.regions) {
+        const r = format.regions.find((x) => x.value === value.region);
+        rows.push(valueRow("region", format.labels.region, r?.label ?? ""));
+        continue;
+      }
+      rows.push(
+        /* @__PURE__ */ jsx(View, { style: [styles.iosRow, { minHeight: theme.ctl[size] }], children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...fieldProps(f),
+            accessibilityLabel: format.labels[f],
+            placeholder: f === "line2" ? labels.line2Placeholder : format.labels[f],
+            placeholderTextColor: theme.color.text3,
+            style: [styles.iosText, styles.flex, styles.iosInput, { minHeight: theme.ctl[size] }]
+          }
+        ) }, f)
+      );
+    }
+    const errs = [...FIELDS_BEFORE, ...locality].map(errorOf).filter(Boolean);
+    const list = listFor === "region" ? format.regions ?? [] : countries;
+    return /* @__PURE__ */ jsxs(View, { style: [styles.iosWrap, densityGap], children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.card, disabled && { opacity: theme.state.disabledOpacity }], children: rows.map((r, i) => /* @__PURE__ */ jsx(View, { style: [styles.iosInset, i ? styles.iosDivider : null], children: r }, i)) }),
+      errs.length ? /* @__PURE__ */ jsx(View, { style: styles.iosErrors, children: errs.map((e) => /* @__PURE__ */ jsx(Text, { style: styles.error, children: e }, e)) }) : null,
+      /* @__PURE__ */ jsx(
+        SearchList,
+        {
+          open: listFor !== null,
+          title: listFor === "region" ? format.labels.region : labels.countryShort,
+          items: list,
+          selected: listFor === "region" ? value.region : value.country,
+          searchLabel: labels.search,
+          surface,
+          onClose: () => setListFor(null),
+          onPick: (v) => {
+            set(listFor === "region" ? "region" : "country", v);
+            setListFor(null);
+          }
+        }
+      )
+    ] });
+  }
+  const androidField = (f) => f === "region" && format.regions ? /* @__PURE__ */ jsxs(View, { style: styles.andField, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.andLabel, children: format.labels.region }),
+    /* @__PURE__ */ jsx(
+      Picker,
+      {
+        size,
+        disabled,
+        platform: "android",
+        items: format.regions,
+        value: value.region,
+        onValueChange: (v) => set("region", v),
+        accessibilityLabel: format.labels.region,
+        title: format.labels.region,
+        surface
+      }
+    ),
+    errorOf("region") ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: errorOf("region") }) : null
+  ] }, f) : /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size,
+      platform: "android",
+      label: format.labels[f],
+      placeholder: f === "line2" ? labels.line2Placeholder : void 0,
+      error: errorOf(f),
+      containerStyle: styles.flexBasis,
+      surface,
+      ...fieldProps(f)
+    },
+    f
+  );
+  return /* @__PURE__ */ jsxs(View, { style: [styles.andWrap, densityGap], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.andField, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.andLabel, children: labels.country }),
+      /* @__PURE__ */ jsx(
+        Picker,
+        {
+          size,
+          disabled,
+          platform: "android",
+          items: countries,
+          value: value.country,
+          onValueChange: (v) => set("country", v),
+          accessibilityLabel: labels.country,
+          title: labels.country,
+          surface
+        }
+      )
+    ] }),
+    FIELDS_BEFORE.map(androidField),
+    /* @__PURE__ */ jsx(View, { style: [styles.andLocality, densityGap], children: format.locality.map((c) => /* @__PURE__ */ jsx(View, { style: { flex: c.grow, minWidth: 0 }, children: androidField(c.field) }, c.field)) })
+  ] });
+}
+function SearchList({
+  open,
+  title,
+  items,
+  selected,
+  searchLabel,
+  surface,
+  onClose,
+  onPick
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const [q, setQ] = React.useState("");
+  React.useEffect(() => {
+    if (!open) setQ("");
+  }, [open]);
+  const shown = q ? items.filter((i) => i.label.toLowerCase().includes(q.toLowerCase())) : items;
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: (o) => o ? null : onClose(), title, children: /* @__PURE__ */ jsxs(View, { style: styles.listWrap, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        platform: "ios",
+        leadingIcon: "search",
+        placeholder: searchLabel,
+        accessibilityLabel: searchLabel,
+        value: q,
+        onChangeText: setQ,
+        surface
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles.card, children: shown.map((i, n) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { selected: i.value === selected },
+        onPress: () => onPick(i.value),
+        style: ({ pressed }) => [
+          styles.iosRow,
+          styles.iosInset,
+          n ? styles.iosDivider : null,
+          pressed && styles.pressed
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.iosText, styles.flex], children: i.label }),
+          i.value === selected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 18, color: theme.color.accentStrong }) : null
+        ]
+      },
+      i.value
+    )) })
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  flex: { flex: 1 },
+  flexBasis: { flexGrow: 1 },
+  pressed: { backgroundColor: theme.state.pressed },
+  /* ---- iOS · one inset group ---- */
+  iosWrap: { gap: theme.space[6] },
+  card: { backgroundColor: theme.color.surface, borderRadius: theme.radius.md, overflow: "hidden" },
+  iosRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    minHeight: theme.ctl.lg,
+    paddingEnd: theme.space[16]
+  },
+  // The divider runs from the text inset (16) to the card's trailing edge.
+  iosInset: { marginStart: theme.space[16] },
+  iosDivider: { borderTopWidth: theme.borderWidth.thin, borderTopColor: theme.color.border },
+  iosText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text
+  },
+  iosValue: { color: theme.color.text2 },
+  iosInput: { minHeight: theme.ctl.lg, padding: 0 },
+  iosErrors: { gap: theme.space[2], paddingHorizontal: theme.space[16] },
+  listWrap: {
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[16],
+    paddingBottom: theme.space[24]
+  },
+  /* ---- Android · stacked fields ---- */
+  andWrap: { gap: theme.space[12] },
+  andField: { gap: theme.space[6] },
+  andLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  andLocality: { flexDirection: "row", gap: theme.space[12] },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  }
+}));
+
+export { ADDRESS_AUTOFILL_HINT, ADDRESS_COUNTRIES, ADDRESS_FORMATS, ADDRESS_TEXT_CONTENT_TYPE, AddressBlock, addressFormat, validateAddressField };