@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-UC2WGUP3.js

@@ -0,0 +1,627 @@
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { Input } from './chunk-ITTYJZWX.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { ScrollView, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { monthGrid, weekdayOrder, WEEKDAY_ABBR, dayDisabled, WEEKDAY_NAMES, dayLabel, dateZone, resolveDateValue, validateDateValue, DATE_PRESETS, PRESET_GROUP_ORDER, valueLabel, preset, timeLabel, durationLabel, stamp, rangeLabel, absolute, endOf } from '@btndprojects/loam-date';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function MonthList({
+  Z,
+  anchorMs,
+  radius,
+  ctx,
+  from,
+  to,
+  constraints,
+  dayMeta,
+  weekNumbers = false,
+  onPick,
+  scrollNonce = 0
+}) {
+  const { styles } = useStyles(sheet);
+  const months = React2.useMemo(() => {
+    const out = [];
+    for (let i = -radius; i <= radius; i += 1) {
+      out.push(monthGrid(Z, Z.addMonths(Z.startOfMonth(anchorMs), i), ctx));
+    }
+    return out;
+  }, [Z, anchorMs, radius, ctx]);
+  const order = weekdayOrder(ctx.weekStartsOn ?? 1);
+  const scroller = React2.useRef(null);
+  const offsets = React2.useRef([]);
+  const anchorKey = Z.monthKey(anchorMs);
+  React2.useEffect(() => {
+    const y = offsets.current[radius];
+    if (y != null) scroller.current?.scrollTo({ y, animated: false });
+  }, [anchorKey, radius, scrollNonce]);
+  const measure = (index) => (event) => {
+    offsets.current[index] = event.nativeEvent.layout.y;
+    if (index === radius) scroller.current?.scrollTo({ y: event.nativeEvent.layout.y, animated: false });
+  };
+  return /* @__PURE__ */ jsx(ScrollView, { ref: scroller, showsVerticalScrollIndicator: true, children: months.map((item, index) => /* @__PURE__ */ jsxs(View, { style: styles.month, onLayout: measure(index), children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.monthLabel, role: "heading", ...{ "aria-level": 3 }, children: item.label }),
+    /* @__PURE__ */ jsxs(View, { style: styles.weekdayRow, children: [
+      weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber }) : null,
+      order.map((dow) => /* @__PURE__ */ jsx(View, { style: styles.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles.weekdayText, ...{ "aria-hidden": true }, children: WEEKDAY_ABBR[dow] }) }, dow))
+    ] }),
+    item.weeks.map((week) => /* @__PURE__ */ jsxs(View, { style: styles.weekRow, children: [
+      weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber, children: /* @__PURE__ */ jsx(Text, { style: styles.weekNumberText, children: week.week }) }) : null,
+      week.days.map(
+        (day) => (
+          // A day borrowed from the neighbouring month is **not** rendered
+          // as a cell here, unlike in the web picker's two-month view. In a
+          // continuous scroll that month is a thumb-flick away, so a
+          // borrowed day is not a shortcut — it is the same date appearing
+          // twice, pickable twice, and announced twice. The blank keeps the
+          // six-row height so the grid does not jump.
+          day.inMonth ? /* @__PURE__ */ jsx(
+            DayCell,
+            {
+              Z,
+              day,
+              ctx,
+              from,
+              to,
+              constraints,
+              meta: dayMeta?.(day.ms),
+              onPick
+            },
+            day.key
+          ) : /* @__PURE__ */ jsx(View, { style: styles.dayBlank }, day.key)
+        )
+      )
+    ] }, `${week.week}-${week.days[0].key}`))
+  ] }, `${item.y}-${item.mo}`)) });
+}
+function DayCell({
+  Z,
+  day,
+  ctx,
+  from,
+  to,
+  constraints,
+  meta,
+  onPick
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const reason = dayDisabled(Z, day.ms, constraints, ctx, meta);
+  const disabled = reason !== false || meta?.loading === true;
+  const today = Z.sameDay(day.ms, ctx.now ?? Date.now());
+  const dayEnd = Z.endOfDay(day.ms);
+  const isStart = from != null && Z.sameDay(day.ms, from);
+  const isEnd = to != null && Z.sameDay(day.ms, to - 1);
+  const inside = from != null && to != null && day.ms >= from && dayEnd < to;
+  const selection = isStart && isEnd ? "both" : isStart ? "start" : isEnd ? "end" : inside ? "inside" : "none";
+  const role = selection === "both" ? ", the whole range" : selection === "start" ? ", range start" : selection === "end" ? ", range end" : selection === "inside" ? ", in the range" : "";
+  const name = `${WEEKDAY_NAMES[day.dow]} ${dayLabel(Z, day.ms, { longMonth: true, locale: ctx.locale })}${today ? ", today" : ""}${role}${reason ? `, unavailable: ${reason}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: name,
+      accessibilityState: { selected: selection !== "none", disabled },
+      disabled,
+      onPress: () => onPick(day.ms),
+      style: ({ pressed }) => [
+        styles.day,
+        inside && styles.dayInside,
+        (isStart || isEnd) && styles.dayEnd,
+        pressed && !disabled && styles.pressed
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.dayText,
+              today && styles.dayToday,
+              (isStart || isEnd) && styles.dayEndText,
+              disabled && styles.dayDisabled
+            ],
+            children: day.day
+          }
+        ),
+        meta?.density != null && meta.density > 0 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.densityBar,
+              {
+                height: Math.max(theme.borderWidth.heavy, Math.round(meta.density * theme.space.s2))
+              }
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  month: { gap: theme.space.s1, paddingBottom: theme.space.s4 },
+  monthLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    fontWeight: theme.type.headline.fontWeight,
+    color: theme.color.text,
+    paddingVertical: theme.space.s1
+  },
+  weekdayRow: { flexDirection: "row" },
+  weekdayCell: { flex: 1, alignItems: "center", paddingVertical: theme.space[2] },
+  weekdayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text2
+  },
+  weekRow: { flexDirection: "row", alignItems: "stretch" },
+  weekNumber: { width: theme.space.s6, alignItems: "center", justifyContent: "center" },
+  weekNumberText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  day: {
+    flex: 1,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[1]
+  },
+  // The in-range wash is a state layer, not a tint: it has to composite over the
+  // sheet surface and over a pressed cell without either turning muddy.
+  dayInside: { backgroundColor: theme.state.selected },
+  dayEnd: { backgroundColor: theme.color.accent, borderRadius: theme.radius.md },
+  dayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  dayBlank: { flex: 1, minHeight: theme.tapMin },
+  dayToday: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
+  dayEndText: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
+  dayDisabled: { color: theme.color.text3, textDecorationLine: "line-through" },
+  densityBar: {
+    width: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+var MONTH_RADIUS = 6;
+function DateRangePicker({
+  value: controlled,
+  defaultValue = null,
+  onChange,
+  mode = "range",
+  label,
+  placeholder = "Any time",
+  presets = true,
+  customPresets,
+  constraints,
+  weekStartsOn = 1,
+  fiscalStart = 0,
+  weekNumbers = false,
+  time = false,
+  ampm,
+  locale,
+  timeZone,
+  now,
+  dayMeta,
+  clearable = true,
+  disabled = false,
+  applyMode = "apply",
+  style
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const Z = React2.useMemo(() => dateZone(timeZone), [timeZone]);
+  const clock = now ?? Date.now();
+  const ctx = React2.useMemo(
+    () => ({
+      Z,
+      now: clock,
+      weekStartsOn,
+      fiscalStart,
+      granularity: time ? "minute" : "day",
+      ampm,
+      mode,
+      constraints,
+      placeholder,
+      time,
+      locale,
+      customPresets
+    }),
+    [Z, clock, weekStartsOn, fiscalStart, time, ampm, mode, constraints, placeholder, locale, customPresets]
+  );
+  const [internal, setInternal] = React2.useState(defaultValue);
+  const committed = controlled !== void 0 ? controlled : internal;
+  const [open, setOpen] = React2.useState(false);
+  const [draft, setDraft] = React2.useState(committed);
+  const [anchor, setAnchor] = React2.useState(null);
+  const [view, setView] = React2.useState(null);
+  const [viewNonce, setViewNonce] = React2.useState(0);
+  const openSheet = () => {
+    setDraft(committed);
+    setAnchor(null);
+    setView(null);
+    setOpen(true);
+  };
+  const resolved = React2.useMemo(() => resolveDateValue(draft, ctx), [draft, ctx]);
+  const committedResolved = React2.useMemo(
+    () => resolveDateValue(committed, ctx),
+    [committed, ctx]
+  );
+  const validation = React2.useMemo(() => validateDateValue(draft, ctx), [draft, ctx]);
+  const commit = React2.useCallback(
+    (next) => {
+      if (controlled === void 0) setInternal(next);
+      onChange?.(next, resolveDateValue(next, ctx));
+    },
+    [controlled, onChange, ctx]
+  );
+  const setDraftValue = (next) => {
+    setDraft(next);
+    setView(null);
+    if (applyMode === "live") commit(next);
+  };
+  const [startClock, setStartClock] = React2.useState(null);
+  const [endClock, setEndClock] = React2.useState(null);
+  const pick = (ms) => {
+    const dayStart = Z.startOfDay(ms);
+    if (mode === "single") {
+      setAnchor(null);
+      setDraftValue(
+        absolute(
+          withTime(Z, dayStart, startClock),
+          time ? withTime(Z, dayStart, endClock ?? startClock) : endOf(Z, dayStart, "day", ctx),
+          ctx.granularity
+        )
+      );
+      return;
+    }
+    if (anchor === null) {
+      setAnchor(dayStart);
+      setDraftValue(absolute(withTime(Z, dayStart, startClock), null, ctx.granularity));
+      return;
+    }
+    const [a, b] = dayStart < anchor ? [dayStart, anchor] : [anchor, dayStart];
+    setAnchor(null);
+    setDraftValue(
+      absolute(
+        withTime(Z, a, startClock),
+        // The end is **exclusive**: a range that ends "on the 7th" runs to
+        // midnight on the 8th. `displayEnd` is what turns that back into "7th"
+        // for the reader, and it is the one place that conversion happens.
+        time ? withTime(Z, b, endClock) : endOf(Z, b, "day", ctx),
+        ctx.granularity
+      )
+    );
+  };
+  const applyClock = (which, text) => {
+    const minutes = parseClock(text);
+    if (which === "start") setStartClock(minutes);
+    else setEndClock(minutes);
+    if (minutes === null || resolved.from == null) return;
+    const from = which === "start" ? withTime(Z, resolved.from, minutes) : resolved.from;
+    const to = which === "end" && resolved.to != null ? withTime(Z, Z.startOfDay(resolved.to - 1), minutes) : resolved.to;
+    setDraftValue(absolute(from, to, ctx.granularity));
+  };
+  const rail = React2.useMemo(() => {
+    if (presets === false) return [];
+    const all = [...DATE_PRESETS, ...customPresets ?? []];
+    const allowed = Array.isArray(presets) ? all.filter((p) => presets.includes(p.id)) : all;
+    return allowed.filter(
+      (p) => (
+        // A future preset in a field that refuses the future is a chip that only
+        // ever produces a refusal.
+        (!p.future || !constraints?.disableFuture) && (!p.time || time)
+      )
+    );
+  }, [presets, customPresets, constraints?.disableFuture, time]);
+  const railGroups = React2.useMemo(() => {
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const p of rail) {
+      const list = byGroup.get(p.group) ?? [];
+      list.push(p);
+      byGroup.set(p.group, list);
+    }
+    return PRESET_GROUP_ORDER.filter((g) => byGroup.has(g)).map((g) => ({
+      group: g,
+      items: byGroup.get(g)
+    }));
+  }, [rail]);
+  const activePreset = resolved.presetId ?? null;
+  const triggerLabel = valueLabel(committed, ctx);
+  const anchorMs = view ?? resolved.from ?? committedResolved.from ?? clock;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    label ? /* @__PURE__ */ jsx(Text, { style: styles.fieldLabel, children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: label ? `${label}, ${triggerLabel}` : triggerLabel,
+        accessibilityHint: "Double tap to change the date range",
+        accessibilityState: { disabled },
+        disabled,
+        onPress: openSheet,
+        style: ({ pressed }) => [
+          styles.trigger,
+          disabled && styles.triggerDisabled,
+          pressed && styles.pressed
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: theme.icon.sm, color: theme.color.text2 }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: [styles.triggerText, !committed && styles.triggerPlaceholder],
+              children: triggerLabel
+            }
+          ),
+          committed && !committedResolved.exact ? /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text3 }) : null,
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: label ?? (mode === "single" ? "Pick a date" : "Pick a range"),
+        detents: ["half", "full"],
+        children: /* @__PURE__ */ jsxs(View, { style: styles.panel, children: [
+          railGroups.length > 0 ? /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              horizontal: true,
+              showsHorizontalScrollIndicator: false,
+              contentContainerStyle: styles.rail,
+              children: railGroups.map(({ group, items }) => /* @__PURE__ */ jsxs(View, { style: styles.railGroup, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.railGroupLabel, children: group }),
+                /* @__PURE__ */ jsx(View, { style: styles.railChips, children: items.map((p) => {
+                  const on = activePreset === p.id;
+                  return /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityState: { selected: on },
+                      accessibilityLabel: p.label,
+                      onPress: () => {
+                        setAnchor(null);
+                        setDraftValue(preset(p.id));
+                      },
+                      style: ({ pressed }) => [
+                        styles.chip,
+                        on && styles.chipOn,
+                        pressed && styles.pressed
+                      ],
+                      children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: p.label })
+                    },
+                    p.id
+                  );
+                }) })
+              ] }, group))
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.calendar, children: /* @__PURE__ */ jsx(
+            MonthList,
+            {
+              Z,
+              anchorMs,
+              radius: MONTH_RADIUS,
+              ctx,
+              from: anchor ?? resolved.from,
+              to: anchor === null ? resolved.to : null,
+              constraints,
+              dayMeta,
+              weekNumbers,
+              scrollNonce: viewNonce,
+              onPick: pick
+            }
+          ) }),
+          time ? /* @__PURE__ */ jsxs(View, { style: styles.clocks, children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                size: "sm",
+                style: styles.clock,
+                placeholder: "09:00",
+                accessibilityLabel: "Start time, 24-hour",
+                defaultValue: resolved.from != null ? timeLabel(Z, resolved.from, false) : "",
+                onChangeText: (text) => applyClock("start", text)
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { style: styles.clockDash, children: "to" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                size: "sm",
+                style: styles.clock,
+                placeholder: "17:00",
+                accessibilityLabel: "End time, 24-hour",
+                defaultValue: resolved.to != null ? timeLabel(Z, resolved.to, false) : "",
+                onChangeText: (text) => applyClock("end", text)
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(Receipt, { Z, resolved, ctx, validation, anchor }),
+          /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+            clearable ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setDraftValue(null), children: "Clear" }) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onPress: () => {
+                  setView(clock);
+                  setViewNonce((n) => n + 1);
+                },
+                children: "Go to today"
+              }
+            ),
+            /* @__PURE__ */ jsx(View, { style: styles.footerSpacer }),
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                disabled: !validation.ok || anchor !== null,
+                onPress: () => {
+                  commit(draft);
+                  setOpen(false);
+                },
+                children: "Apply"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function Receipt({
+  Z,
+  resolved,
+  ctx,
+  validation,
+  anchor
+}) {
+  const { styles } = useStyles(sheet2);
+  const duration = durationLabel(resolved.from, resolved.to);
+  const half = anchor !== null;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.receipt,
+      role: "status",
+      ...{ "aria-live": "polite" },
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.receiptRange, children: half ? `${stamp(Z, anchor, ctx)} \u2014 pick the other end` : rangeLabel(Z, resolved.from, resolved.to, ctx) }),
+        !half && duration ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: duration }) : null,
+        !half && resolved.kind && !resolved.exact ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: "Re-resolves on load" }) : null,
+        validation.message ? /* @__PURE__ */ jsx(Text, { style: validation.ok ? styles.receiptWarn : styles.receiptError, children: validation.message }) : null
+      ]
+    }
+  );
+}
+function withTime(Z, ms, minutes) {
+  const start = Z.startOfDay(ms);
+  return minutes === null ? start : start + minutes * 6e4;
+}
+function parseClock(text) {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(text.trim());
+  if (!match) return null;
+  const h = Number(match[1]);
+  const mi = Number(match[2]);
+  if (h > 23 || mi > 59) return null;
+  return h * 60 + mi;
+}
+var sheet2 = createStyleSheet((theme) => ({
+  root: { alignSelf: "stretch", gap: theme.space.s1 },
+  fieldLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  triggerDisabled: { opacity: theme.state.disabledOpacity },
+  triggerText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  triggerPlaceholder: { color: theme.color.text3 },
+  panel: { gap: theme.space.s3 },
+  rail: { gap: theme.space.s4, paddingBottom: theme.space.s1 },
+  railGroup: { gap: theme.space.s1 },
+  railGroupLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text2
+  },
+  railChips: { flexDirection: "row", gap: theme.space.s1 },
+  chip: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chipOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accentSoft },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  chipTextOn: { color: theme.color.accentOnSoft, fontWeight: theme.fontWeight.bold },
+  calendar: { height: theme.space[256], minHeight: theme.space[224] },
+  clocks: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  clock: { flex: 1 },
+  clockDash: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2
+  },
+  receipt: {
+    gap: theme.space[2],
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface2
+  },
+  receiptRange: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  receiptMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  receiptWarn: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.warnOnSoft
+  },
+  receiptError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  footer: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  footerSpacer: { flex: 1 },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { DateRangePicker, MonthList };