@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-CLGAMIOT.js

@@ -0,0 +1,648 @@
+import { DEFAULT_LABELS, MonthList } from './chunk-TZO6YDS7.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Platform, View, Text, Pressable, ActivityIndicator, Modal, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { dateZone, resolveDateValue, validateDateValue, DATE_PRESETS, PRESET_GROUP_ORDER, valueLabel, presetGroupLabel, presetLabel, preset, timeLabel, durationLabel, stamp, rangeLabel, absolute, endOf } from '@btndprojects/loam-date';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MONTH_RADIUS = 6;
+function DateRangePicker({
+  value: controlled,
+  defaultValue = null,
+  onChange,
+  mode = "range",
+  label,
+  placeholder: placeholderProp,
+  presets = true,
+  customPresets,
+  constraints,
+  weekStartsOn = 1,
+  fiscalStart = 0,
+  weekNumbers = false,
+  time = false,
+  ampm,
+  locale: localeProp,
+  timeZone,
+  now,
+  dayMeta,
+  clearable = true,
+  surface = "filled",
+  defaultOpen = false,
+  disabled = false,
+  readOnly = false,
+  loading = false,
+  size = "lg",
+  error,
+  success = false,
+  hint,
+  applyMode = "apply",
+  style,
+  platform,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("dateRangePicker", DEFAULT_LABELS, labelsProp);
+  const contextLocale = useLoamLocale();
+  const locale = localeProp ?? contextLocale;
+  const placeholder = placeholderProp ?? labels.anyTime;
+  const theme = useLoamTheme("date-range-picker");
+  const Z = React.useMemo(() => dateZone(timeZone), [timeZone]);
+  const clock = now ?? Date.now();
+  const ctx = React.useMemo(
+    () => ({
+      Z,
+      now: clock,
+      weekStartsOn,
+      fiscalStart,
+      granularity: time ? "minute" : "day",
+      ampm,
+      mode,
+      constraints,
+      placeholder,
+      time,
+      locale,
+      customPresets,
+      labels
+    }),
+    [
+      Z,
+      clock,
+      weekStartsOn,
+      fiscalStart,
+      time,
+      ampm,
+      mode,
+      constraints,
+      placeholder,
+      locale,
+      customPresets,
+      labels
+    ]
+  );
+  const [internal, setInternal] = React.useState(defaultValue);
+  const committed = controlled !== void 0 ? controlled : internal;
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [draft, setDraft] = React.useState(committed);
+  const [anchor, setAnchor] = React.useState(null);
+  const [view, setView] = React.useState(null);
+  const [viewNonce, setViewNonce] = React.useState(0);
+  const openSheet = () => {
+    setDraft(committed);
+    setAnchor(null);
+    setView(null);
+    setOpen(true);
+  };
+  const resolved = React.useMemo(() => resolveDateValue(draft, ctx), [draft, ctx]);
+  const committedResolved = React.useMemo(() => resolveDateValue(committed, ctx), [committed, ctx]);
+  const validation = React.useMemo(() => validateDateValue(draft, ctx), [draft, ctx]);
+  const commit = React.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] = React.useState(null);
+  const [endClock, setEndClock] = React.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 = React.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 = React.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 android = platform != null ? platform === "android" : Platform.OS === "android" || Platform.OS !== "ios" && theme.platform === "Android";
+  const canApply = validation.ok && anchor === null;
+  const apply = () => {
+    commit(draft);
+    setOpen(false);
+  };
+  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 ? labels.triggerNamed(label, triggerLabel) : triggerLabel,
+        accessibilityHint: readOnly ? void 0 : labels.triggerHint,
+        accessibilityState: { disabled, busy: loading || void 0 },
+        "aria-busy": loading || void 0,
+        ...error ? { "aria-invalid": true } : {},
+        disabled,
+        onPress: readOnly || loading ? void 0 : openSheet,
+        hitSlop: Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2),
+        style: ({ pressed }) => [
+          styles.trigger,
+          size !== "lg" && {
+            height: theme.ctl[size],
+            gap: theme.ctl.gap[size],
+            paddingHorizontal: theme.ctl.px[size],
+            borderRadius: theme.ctl.r[size]
+          },
+          { backgroundColor: fieldSurfaceFill(theme, surface) },
+          open && styles.triggerOpen,
+          error ? { borderColor: theme.color.danger, backgroundColor: theme.color.dangerSoft } : null,
+          disabled && styles.triggerDisabled,
+          pressed && !readOnly && styles.pressed
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "calendar",
+              size: size === "lg" ? theme.icon.sm : theme.ctl.icon[size],
+              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,
+          success && !error ? /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: labels.valid, children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.sm, color: theme.color.goodOnSoft }) }) : null,
+          loading ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              size: "small",
+              color: theme.color.text2,
+              accessibilityLabel: labels.loading
+            }
+          ) : /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsxs(View, { style: styles.messageRow, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.xs, color: theme.color.dangerOnSoft }),
+      /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: error })
+    ] }) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hintText, children: hint }) : null,
+    android ? (
+      // Android: a full-screen dialog (F47). The system back closes it
+      // without applying — the draft is dropped, the committed value stays.
+      /* @__PURE__ */ jsx(
+        Modal,
+        {
+          visible: open,
+          animationType: "slide",
+          presentationStyle: "fullScreen",
+          onRequestClose: () => setOpen(false),
+          children: /* @__PURE__ */ jsxs(View, { style: styles.dialog, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.dialogBar, children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "md",
+                  leadingIcon: "x",
+                  accessibilityLabel: labels.cancel,
+                  onPress: () => setOpen(false)
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: styles.dialogTitle, children: label ?? (mode === "single" ? labels.pickDate : labels.pickRange) }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", disabled: !canApply, onPress: apply, children: labels.apply })
+            ] }),
+            /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.dialogBody, 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: presetGroupLabel(group, labels) }),
+                    /* @__PURE__ */ jsx(View, { style: styles.railChips, children: items.map((p) => {
+                      const on = activePreset === p.id;
+                      return /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          variant: "filter",
+                          size: "sm",
+                          selected: on,
+                          onSelectedChange: () => {
+                            setAnchor(null);
+                            setDraftValue(preset(p.id));
+                          },
+                          children: presetLabel(p, labels)
+                        },
+                        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,
+                  motion,
+                  labels,
+                  onPick: pick
+                }
+              ) }),
+              time ? /* @__PURE__ */ jsxs(View, { style: styles.clocks, children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    style: styles.clock,
+                    placeholder: "09:00",
+                    accessibilityLabel: labels.startTime,
+                    defaultValue: resolved.from != null ? timeLabel(Z, resolved.from, false) : "",
+                    onChangeText: (text) => applyClock("start", text)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { style: styles.clockDash, children: labels.timeTo }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    style: styles.clock,
+                    placeholder: "17:00",
+                    accessibilityLabel: labels.endTime,
+                    defaultValue: resolved.to != null ? timeLabel(Z, resolved.to, false) : "",
+                    onChangeText: (text) => applyClock("end", text)
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                Receipt,
+                {
+                  Z,
+                  resolved,
+                  ctx,
+                  validation,
+                  anchor,
+                  labels
+                }
+              ),
+              /* @__PURE__ */ jsxs(View, { style: styles.tools, children: [
+                clearable ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setDraftValue(null), children: labels.clearButton }) : null,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onPress: () => {
+                      setView(clock);
+                      setViewNonce((n) => n + 1);
+                    },
+                    children: labels.goToToday
+                  }
+                )
+              ] }),
+              android ? null : /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+                /* @__PURE__ */ jsx(View, { style: styles.footerSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: () => setOpen(false), children: labels.cancel }) }),
+                /* @__PURE__ */ jsx(View, { style: styles.footerSlot, children: /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, disabled: !canApply, onPress: apply, children: labels.apply }) })
+              ] })
+            ] }) })
+          ] })
+        }
+      )
+    ) : (
+      // iOS: the sheet at the large detent, days 44 (F47).
+      /* @__PURE__ */ jsx(
+        Sheet,
+        {
+          open,
+          onClose: () => setOpen(false),
+          title: label ?? (mode === "single" ? labels.pickDate : labels.pickRange),
+          detents: ["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: presetGroupLabel(group, labels) }),
+                  /* @__PURE__ */ jsx(View, { style: styles.railChips, children: items.map((p) => {
+                    const on = activePreset === p.id;
+                    return /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        variant: "filter",
+                        size: "sm",
+                        selected: on,
+                        onSelectedChange: () => {
+                          setAnchor(null);
+                          setDraftValue(preset(p.id));
+                        },
+                        children: presetLabel(p, labels)
+                      },
+                      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,
+                motion,
+                labels,
+                onPick: pick
+              }
+            ) }),
+            time ? /* @__PURE__ */ jsxs(View, { style: styles.clocks, children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  style: styles.clock,
+                  placeholder: "09:00",
+                  accessibilityLabel: labels.startTime,
+                  defaultValue: resolved.from != null ? timeLabel(Z, resolved.from, false) : "",
+                  onChangeText: (text) => applyClock("start", text)
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { style: styles.clockDash, children: labels.timeTo }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  style: styles.clock,
+                  placeholder: "17:00",
+                  accessibilityLabel: labels.endTime,
+                  defaultValue: resolved.to != null ? timeLabel(Z, resolved.to, false) : "",
+                  onChangeText: (text) => applyClock("end", text)
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx(
+              Receipt,
+              {
+                Z,
+                resolved,
+                ctx,
+                validation,
+                anchor,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsxs(View, { style: styles.tools, children: [
+              clearable ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setDraftValue(null), children: labels.clearButton }) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onPress: () => {
+                    setView(clock);
+                    setViewNonce((n) => n + 1);
+                  },
+                  children: labels.goToToday
+                }
+              )
+            ] }),
+            android ? null : /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+              /* @__PURE__ */ jsx(View, { style: styles.footerSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: () => setOpen(false), children: labels.cancel }) }),
+              /* @__PURE__ */ jsx(View, { style: styles.footerSlot, children: /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, disabled: !canApply, onPress: apply, children: labels.apply }) })
+            ] })
+          ] })
+        }
+      )
+    )
+  ] });
+}
+function Receipt({
+  Z,
+  resolved,
+  ctx,
+  validation,
+  anchor,
+  labels
+}) {
+  const { styles } = useStyles(sheet);
+  const duration = durationLabel(resolved.from, resolved.to, labels);
+  const half = anchor !== null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.receipt, role: "status", accessibilityLiveRegion: "polite", children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.receiptRange, children: half ? labels.pickOtherEnd(stamp(Z, anchor, ctx)) : 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: labels.reResolvesNote }) : 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 sheet = 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
+  },
+  // The Input lg shell: 44, its padding, gap and corner, the field edge.
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.ctl.lg,
+    gap: theme.ctl.gap.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    borderRadius: theme.ctl.r.lg,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  triggerOpen: { borderColor: theme.focus.ringColor, 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 },
+  messageRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  },
+  hintText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    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 },
+  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,
+    // 600, the weight of the month headings above it: a receipt never outweighs a heading.
+    fontWeight: theme.fontWeight.semibold,
+    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
+  },
+  tools: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  footer: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  footerSlot: { flex: 1 },
+  dialog: { flex: 1, backgroundColor: theme.color.surface },
+  dialogBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.space[56],
+    paddingHorizontal: theme.space.s1
+  },
+  dialogTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  dialogBody: { gap: theme.space.s3, padding: theme.space.s4 },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { DateRangePicker };