@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-W23G6JLF.js

@@ -0,0 +1,37 @@
+import { Platform, AccessibilityInfo } from 'react-native';
+
+// src/lib/a11y.ts
+function expandedProps(expanded) {
+  return { "aria-expanded": expanded };
+}
+var NAMED_ROLE = Platform.OS === "web" ? "image" : "text";
+var webRegions = {};
+function webRegion(politeness) {
+  if (typeof document === "undefined") return null;
+  const existing = webRegions[politeness];
+  if (existing?.isConnected) return existing;
+  const el = document.createElement("div");
+  el.setAttribute("aria-live", politeness);
+  el.setAttribute("aria-atomic", "true");
+  el.setAttribute("data-loam-announcer", politeness);
+  el.style.cssText = // loam-audit-ignore raw-length-in-string — the sr-only clip is a DOM idiom, not a design length.
+  "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0";
+  document.body.appendChild(el);
+  webRegions[politeness] = el;
+  return el;
+}
+function announce(message, politeness = "polite") {
+  if (!message) return;
+  if (Platform.OS !== "web") {
+    AccessibilityInfo.announceForAccessibility?.(message);
+    return;
+  }
+  const region = webRegion(politeness);
+  if (!region) return;
+  region.textContent = "";
+  setTimeout(() => {
+    region.textContent = message;
+  }, 50);
+}
+
+export { NAMED_ROLE, announce, expandedProps };

package/dist/chunk-WAIJCD2V.js

@@ -0,0 +1,480 @@
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, ActivityIndicator, ScrollView, Animated } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function OptionTint({
+  on,
+  level,
+  style
+}) {
+  const theme = useLoamTheme("time-field");
+  const t = React.useRef(new Animated.Value(on ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level !== "full") {
+      t.setValue(on ? 1 : 0);
+      return;
+    }
+    const run = Animated.spring(t, {
+      ...springConfig(theme, "de"),
+      toValue: on ? 1 : 0,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [on, level, t, theme]);
+  return /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [style, { opacity: t }], children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accent }) });
+}
+var DEFAULT_LABELS = {
+  hour: "Hour",
+  minute: "Minute",
+  second: "Second",
+  am: "AM",
+  pm: "PM",
+  done: "Done",
+  period: "AM/PM",
+  clear: "Clear",
+  validating: "Validating",
+  valid: "Valid"
+};
+var pad = (n) => String(n).padStart(2, "0");
+var toSeconds = (v) => v.hour * 3600 + v.minute * 60 + (v.second ?? 0);
+var to12 = (h24) => (h24 + 11) % 12 + 1;
+var to24 = (display, pm) => display % 12 + (pm ? 12 : 0);
+function localeHourCycle(locale) {
+  try {
+    const opt = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
+    if (opt.hourCycle) return opt.hourCycle === "h23" || opt.hourCycle === "h24" ? 24 : 12;
+    return opt.hour12 ? 12 : 24;
+  } catch {
+    return 24;
+  }
+}
+function TimeField({
+  value,
+  defaultValue,
+  onValueChange,
+  granularity = "minute",
+  hourCycle: hourCycleProp,
+  locale: localeProp,
+  minuteStep = 1,
+  min,
+  max,
+  placeholder = "--:--",
+  title,
+  label,
+  description,
+  error,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  success = false,
+  loading = false,
+  leading,
+  trailing,
+  size = "lg",
+  surface = "filled",
+  clearable = false,
+  labels: labelsProp,
+  accessibilityLabel,
+  motion = "full"
+}) {
+  const level = useResolvedMotion(motion, "time-field");
+  const labels = useLabels("timeField", DEFAULT_LABELS, labelsProp);
+  const contextLocale = useLoamLocale();
+  const locale = localeProp ?? contextLocale;
+  const hourCycle = hourCycleProp ?? localeHourCycle(locale);
+  const theme = useLoamTheme("time-field");
+  const isLoading = loading && !disabled;
+  const hasError = !isLoading && (invalid || Boolean(error));
+  const valid = !isLoading && !hasError && success;
+  const message = error ?? description;
+  const needMinute = granularity !== "hour";
+  const needSecond = granularity === "second";
+  const [inner, setInner] = React.useState(defaultValue ?? null);
+  const current = value !== void 0 ? value : inner;
+  const clamp = React.useCallback(
+    (v) => {
+      if (min && toSeconds(v) < toSeconds(min)) return { ...min };
+      if (max && toSeconds(v) > toSeconds(max)) return { ...max };
+      return v;
+    },
+    [min, max]
+  );
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState({ hour: 0, minute: 0, second: 0 });
+  const openSheet = () => {
+    setDraft(
+      current ? { hour: current.hour, minute: current.minute, second: current.second ?? 0 } : clamp({ hour: 0, minute: 0, second: 0 })
+    );
+    setOpen(true);
+  };
+  const commit = () => {
+    haptics.selection();
+    const c = clamp(draft);
+    const next = {
+      hour: c.hour,
+      minute: needMinute ? c.minute : 0,
+      ...needSecond ? { second: c.second ?? 0 } : {}
+    };
+    if (value === void 0) setInner(next);
+    onValueChange?.(next);
+    setOpen(false);
+  };
+  const readout = React.useMemo(() => {
+    if (!current) return null;
+    try {
+      return new Intl.DateTimeFormat(locale, {
+        hour: "numeric",
+        ...needMinute ? { minute: "2-digit" } : {},
+        ...needSecond ? { second: "2-digit" } : {},
+        hourCycle: hourCycle === 12 ? "h12" : "h23"
+      }).format(new Date(2e3, 0, 1, current.hour, current.minute, current.second ?? 0));
+    } catch {
+      return [
+        current.hour,
+        needMinute ? current.minute : null,
+        needSecond ? current.second ?? 0 : null
+      ].filter((n) => n !== null).map(pad).join(":");
+    }
+  }, [current, locale, hourCycle, needMinute, needSecond]);
+  const os = useInputPlatform();
+  const { styles } = useStyles(sheet, {
+    os,
+    size,
+    disabled,
+    placeholder: readout === null,
+    invalid: hasError
+  });
+  const iconSize = theme.ctl.icon[size];
+  const valueFont = size === "lg" ? { fontSize: theme.fontSize[os === "ios" ? 17 : 16] } : null;
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const interactive = !disabled && !readOnly;
+  const showClear = clearable && Boolean(current) && interactive;
+  const pm = draft.hour >= 12;
+  const hourItems = Array.from({ length: 24 }, (_, h) => h).filter(
+    (h) => hourCycle === 12 ? h >= (pm ? 12 : 0) && h < (pm ? 24 : 12) : true
+  );
+  const step = Math.max(1, minuteStep);
+  const minuteItems = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+  const secondItems = Array.from({ length: 60 }, (_, i) => i);
+  const outOfRange = (v) => Boolean(min && toSeconds(v) < toSeconds(min) || max && toSeconds(v) > toSeconds(max));
+  const option = (key, text, a11y, selected, off, onPress) => /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: a11y,
+      accessibilityState: { selected, disabled: off },
+      disabled: off,
+      onPress: () => {
+        haptics.selection();
+        onPress();
+      },
+      style: ({ pressed }) => [
+        styles.option,
+        off ? styles.optionOff : null,
+        pressed ? styles.optionPressed : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(OptionTint, { on: selected, level, style: styles.optionSelected }),
+        /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: text })
+      ]
+    },
+    key
+  );
+  const column = (name, children) => /* @__PURE__ */ jsxs(View, { style: styles.column, accessibilityLabel: name, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.columnTitle, children: name }),
+    /* @__PURE__ */ jsx(ScrollView, { style: styles.columnScroll, nestedScrollEnabled: true, children })
+  ] });
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.triggerWrap, children: [
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: accessibilityLabel ?? label ?? readout ?? placeholder,
+          accessibilityValue: readout ? { text: readout } : void 0,
+          accessibilityState: { disabled, expanded: open },
+          ...expandedProps(open),
+          "aria-busy": isLoading || void 0,
+          disabled,
+          onPress: interactive ? openSheet : void 0,
+          hitSlop: { top: slopY, bottom: slopY },
+          style: [
+            styles.trigger,
+            { backgroundColor: fieldSurfaceFill(theme, surface) },
+            isLoading ? { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface } : null
+          ],
+          children: [
+            leading != null ? /* @__PURE__ */ jsx(View, { testID: "time-field-leading", style: styles.leading, children: leading }) : null,
+            readout && current ? (
+              // The trigger already carries the readout as its label and value, so
+              // the roll is decorative.
+              /* @__PURE__ */ jsx(View, { style: styles.readout, children: /* @__PURE__ */ jsx(
+                NumberRoll,
+                {
+                  decorative: true,
+                  motion: level,
+                  value: current.hour * 1e4 + current.minute * 100 + (current.second ?? 0),
+                  formatValue: () => readout,
+                  textStyle: [styles.value, valueFont, styles.rollText]
+                }
+              ) })
+            ) : /* @__PURE__ */ jsx(Text, { style: [styles.value, valueFont], numberOfLines: 1, children: readout ?? placeholder }),
+            showClear ? (
+              // Holds the clear button's place; the button itself sits outside the
+              // trigger so two buttons are never nested.
+              /* @__PURE__ */ jsx(View, { style: { width: iconSize, height: iconSize } })
+            ) : null,
+            isLoading ? /* @__PURE__ */ jsx(
+              ActivityIndicator,
+              {
+                testID: "time-field-spinner",
+                size: "small",
+                color: theme.color.accent,
+                accessibilityLabel: labels.validating
+              }
+            ) : valid ? /* @__PURE__ */ jsx(
+              View,
+              {
+                testID: "time-field-status-icon",
+                accessibilityRole: "image",
+                accessibilityLabel: labels.valid,
+                children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: iconSize, color: theme.color.good })
+              }
+            ) : trailing != null ? /* @__PURE__ */ jsx(View, { testID: "time-field-trailing", style: { minWidth: iconSize, minHeight: iconSize }, children: trailing }) : /* @__PURE__ */ jsx(Icon, { name: "clock", size: iconSize, color: theme.color.text3 })
+          ]
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          testID: "time-field-clear",
+          style: [
+            styles.clear,
+            {
+              right: theme.borderWidth.thick + theme.ctl.px[size] + theme.ctl.gap[size] + iconSize
+            }
+          ],
+          accessibilityRole: "button",
+          accessibilityLabel: labels.clear,
+          onPress: () => {
+            if (value === void 0) setInner(null);
+            onValueChange?.(null);
+          },
+          hitSlop: Math.max(0, (theme.tapMin - iconSize) / 2),
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text3 })
+        }
+      ) : null
+    ] }),
+    message ? /* @__PURE__ */ jsxs(View, { style: styles.messageRow, children: [
+      hasError ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }) : null,
+      /* @__PURE__ */ jsx(Text, { style: hasError ? styles.messageError : styles.message, children: message })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title,
+        footer: /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Button, { onPress: commit, children: labels.done }) }),
+        children: /* @__PURE__ */ jsxs(View, { style: styles.columns, children: [
+          column(
+            labels.hour,
+            hourItems.map((h) => {
+              const text = pad(hourCycle === 12 ? to12(h) : h);
+              const off = Boolean(min && h < min.hour || max && h > max.hour);
+              return option(
+                `h${h}`,
+                text,
+                `${labels.hour} ${text}`,
+                draft.hour === h,
+                off,
+                () => setDraft({ ...draft, hour: h })
+              );
+            })
+          ),
+          needMinute ? column(
+            labels.minute,
+            minuteItems.map((m) => {
+              const text = pad(m);
+              const off = Boolean(
+                min && toSeconds({ hour: draft.hour, minute: m, second: 59 }) < toSeconds(min) || max && toSeconds({ hour: draft.hour, minute: m, second: 0 }) > toSeconds(max)
+              );
+              return option(
+                `m${m}`,
+                text,
+                `${labels.minute} ${text}`,
+                draft.minute === m,
+                off,
+                () => setDraft({ ...draft, minute: m })
+              );
+            })
+          ) : null,
+          needSecond ? column(
+            labels.second,
+            secondItems.map((s) => {
+              const text = pad(s);
+              const off = outOfRange({ hour: draft.hour, minute: draft.minute, second: s });
+              return option(
+                `s${s}`,
+                text,
+                `${labels.second} ${text}`,
+                (draft.second ?? 0) === s,
+                off,
+                () => setDraft({ ...draft, second: s })
+              );
+            })
+          ) : null,
+          hourCycle === 12 ? /* @__PURE__ */ jsxs(View, { style: styles.column, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.columnTitle, children: labels.period }),
+            [false, true].map((isPm) => {
+              const text = isPm ? labels.pm : labels.am;
+              return option(
+                `p${isPm}`,
+                text,
+                text,
+                pm === isPm,
+                false,
+                () => setDraft({ ...draft, hour: to24(to12(draft.hour), isPm) })
+              );
+            })
+          ] }) : null
+        ] })
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  leading: { alignItems: "center", justifyContent: "center" },
+  root: { gap: theme.space.s1 },
+  // R11: 13 / 600 on iOS, 14 / 500 on Android, in `text` — as Input's label.
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      invalid: {
+        // R7: a danger edge on the normal fill; the icon and message carry it.
+        true: { backgroundColor: theme.color.surface2, borderColor: theme.color.danger },
+        false: { backgroundColor: theme.color.surface2, borderColor: theme.color.borderStrong }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    // Tabular figures, so the readout does not jitter as the time changes.
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[14] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[16] }
+      },
+      placeholder: {
+        true: { color: theme.color.text3 },
+        false: { color: theme.color.text }
+      }
+    }
+  },
+  readout: { flex: 1, flexDirection: "row" },
+  triggerWrap: { position: "relative" },
+  clear: { position: "absolute", top: 0, bottom: 0, justifyContent: "center" },
+  rollText: { flex: 0 },
+  messageRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s1 },
+  message: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  messageError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  },
+  columns: { flexDirection: "row", gap: theme.space.s2 },
+  column: { flex: 1, gap: theme.space.s1 },
+  columnTitle: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  columnScroll: { maxHeight: theme.space[48] * 5 },
+  option: {
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: theme.space[48],
+    borderRadius: theme.radius.md,
+    // Every row carries the edge weight so selecting one does not shift the text.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  optionSelected: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    end: theme.space.s3,
+    justifyContent: "center"
+  },
+  optionOff: { opacity: theme.state.disabledOpacity },
+  optionPressed: { backgroundColor: theme.state.hover },
+  optionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text2
+  },
+  footer: { paddingHorizontal: theme.space.s3, paddingTop: theme.space.s2 }
+}));
+
+export { TimeField };