@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-JLC6PM5S.js

@@ -0,0 +1,406 @@
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, ScrollView, Animated, StyleSheet } 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: [StyleSheet.absoluteFill, style, { opacity: t }] });
+}
+var DEFAULT_LABELS = {
+  hour: "Hour",
+  minute: "Minute",
+  second: "Second",
+  am: "AM",
+  pm: "PM",
+  done: "Done",
+  period: "AM/PM"
+};
+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,
+  size = "md",
+  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 hasError = invalid || Boolean(error);
+  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 { styles } = useStyles(sheet, {
+    size,
+    disabled,
+    placeholder: readout === null,
+    invalid: hasError
+  });
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const interactive = !disabled && !readOnly;
+  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, selected ? styles.optionLabelSelected : null], 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(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label ?? readout ?? placeholder,
+        accessibilityValue: readout ? { text: readout } : void 0,
+        accessibilityState: { disabled, expanded: open },
+        ...expandedProps(open),
+        disabled,
+        onPress: interactive ? openSheet : void 0,
+        hitSlop: { top: slopY, bottom: slopY },
+        style: styles.trigger,
+        children: [
+          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, styles.rollText]
+              }
+            ) })
+          ) : /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: readout ?? placeholder }),
+          /* @__PURE__ */ jsx(Icon, { name: "clock", size: iconSize, color: theme.color.text3 })
+        ]
+      }
+    ),
+    message ? /* @__PURE__ */ jsxs(View, { style: styles.messageRow, children: [
+      hasError ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.danger }) : 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) => ({
+  root: { gap: theme.space.s1 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  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: {
+        true: { backgroundColor: theme.color.dangerSoft, 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,
+    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" },
+  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.danger
+  },
+  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: {
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    backgroundColor: theme.color.accentSoft,
+    borderColor: theme.edge.accent
+  },
+  optionOff: { opacity: theme.state.disabledOpacity },
+  optionPressed: { backgroundColor: theme.color.surface2 },
+  optionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text2
+  },
+  optionLabelSelected: {
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.accentOnSoft
+  },
+  footer: { paddingHorizontal: theme.space.s3, paddingTop: theme.space.s2 }
+}));
+
+export { TimeField };