@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-I6CUP2LW.js

@@ -0,0 +1,1155 @@
+import { checkoutErrorChip, DEFAULT_LABELS } from './chunk-7MCEJFWV.js';
+import { SummaryItemRow, PriceRow, Amount, FxNote } from './chunk-GVQQG435.js';
+import { Stepper } from './chunk-HP6ST2OW.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useReducedMotion, useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React4 from 'react';
+import { StyleSheet, Text, View, AccessibilityInfo, findNodeHandle, Pressable, LayoutAnimation, Animated, ActivityIndicator } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { SHEET_DISMISS_FRACTION } from '@btndprojects/loam-pay';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { icons } from '@btndprojects/loam-icons';
+
+function CheckoutSheet({
+  open,
+  title,
+  titleLevel,
+  description,
+  children,
+  commit,
+  trust,
+  dismissible = true,
+  safeAreaBottom = 0,
+  closeLabel,
+  initialDetent,
+  loading = false,
+  tone = "neutral",
+  error,
+  side,
+  presentation,
+  style,
+  onDismiss
+}) {
+  const theme = useLoamTheme("checkout");
+  const { styles: styles2 } = useStyles(sheet);
+  const edge = tone === "accent" ? theme.color.accent : tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : tone === "danger" ? theme.color.danger : null;
+  return /* @__PURE__ */ jsxs(
+    Sheet,
+    {
+      open,
+      title,
+      titleLevel,
+      dismissible,
+      side,
+      detents: initialDetent ? ["peek", "half", "full"].filter((d) => d !== "peek" || initialDetent === "peek") : void 0,
+      initialDetent: presentation === "full" ? "full" : initialDetent,
+      closeLabel,
+      dismissFraction: SHEET_DISMISS_FRACTION,
+      onClose: onDismiss,
+      footer: (
+        /* The commit bar, outside the scroller. `safeAreaBottom` is padding on
+           the bar rather than a margin under it — or `Sheet.safeAreaBottom`, a
+           slot padding that would push this bar's own fill up off the screen
+           edge — so the surface still reaches the home indicator. */
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles2.commitBar,
+              { paddingBottom: theme.space[20] + safeAreaBottom },
+              edge ? { borderTopColor: edge, borderTopWidth: theme.borderWidth.strong } : null
+            ],
+            children: [
+              commit,
+              trust
+            ]
+          }
+        )
+      ),
+      children: [
+        description ? /* @__PURE__ */ jsx(Text, { style: styles2.description, children: description }) : null,
+        error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error, size: "compact" }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [styles2.body, loading ? styles2.loading : null, style],
+            accessibilityState: loading ? { busy: true } : void 0,
+            "aria-busy": loading || void 0,
+            pointerEvents: loading ? "none" : void 0,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  body: { gap: theme.space.s4 },
+  loading: { opacity: theme.state.disabledOpacity },
+  // The bar reads as a bar rather than as another block in the form: its own
+  // fill, a hairline above it, and the safe-area inset folded into its bottom
+  // padding at the use site. The horizontal padding is the bar's own now that it
+  // lives in `Sheet`'s footer slot, which is deliberately full-bleed — so the
+  // hairline spans the panel while the button keeps the body's gutter.
+  commitBar: {
+    gap: theme.space.s3,
+    padding: theme.space[20],
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  }
+}));
+function PayButton({
+  label,
+  state,
+  busyLabel,
+  validatingLabel,
+  doneLabel,
+  showLock = true,
+  fullWidth = true,
+  size = "lg",
+  accessibilityLabel,
+  motion = "full",
+  variant,
+  tone = "accent",
+  trailing,
+  disabled = false,
+  error,
+  labels: labelsProp,
+  style,
+  onPress
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
+  const { styles: styles2 } = useStyles(sheet2);
+  const [idleWidth, setIdleWidth] = React4.useState(null);
+  const resting = state === "idle";
+  const busy = state === "validating" || state === "busy";
+  const onLayout = (event) => {
+    if (!resting || fullWidth) return;
+    const next = event.nativeEvent.layout.width;
+    if (next <= 0) return;
+    setIdleWidth((prev) => prev !== null && Math.abs(prev - next) < 1 ? prev : next);
+  };
+  const currentLabel = resting ? label : state === "validating" ? validatingLabel ?? labels.checking : state === "busy" ? busyLabel ?? labels.paying : doneLabel ?? labels.paid;
+  const spoken = React4.useRef(state);
+  React4.useEffect(() => {
+    if (spoken.current === state) return;
+    spoken.current = state;
+    if (state !== "idle" && typeof currentLabel === "string") {
+      AccessibilityInfo.announceForAccessibility?.(currentLabel);
+    }
+  }, [state, currentLabel]);
+  const leadingIcon = resting && showLock ? "lock" : state === "done" ? "check" : void 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      onLayout,
+      style: [
+        fullWidth ? styles2.wrapFull : styles2.wrapAuto,
+        // The frozen width, and only while the label is not the resting one.
+        !resting && !fullWidth && idleWidth !== null ? { minWidth: idleWidth } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size,
+            variant: variant ?? (tone === "danger" ? "danger" : "primary"),
+            trailingIcon: resting ? trailing : void 0,
+            fullWidth: true,
+            motion,
+            loading: busy,
+            disabled,
+            leadingIcon,
+            accessibilityLabel: resting ? accessibilityLabel : void 0,
+            onPress: () => {
+              if (!resting || disabled) return;
+              onPress();
+            },
+            children: typeof currentLabel === "string" ? currentLabel : /* @__PURE__ */ jsx(View, { style: styles2.labelRow, children: typeof currentLabel === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, { color: theme.color.accentInk }], children: currentLabel }) : currentLabel })
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles2.error, children: error }) : null
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  wrapFull: { alignSelf: "stretch" },
+  wrapAuto: { alignSelf: "flex-start" },
+  error: {
+    marginTop: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.ctl.gap.lg
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing
+  }
+}));
+function summaryIcon(name) {
+  if (name === void 0) return void 0;
+  return Object.prototype.hasOwnProperty.call(icons, name) ? name : void 0;
+}
+function OrderSummary({
+  variant,
+  items,
+  rows,
+  total,
+  currency,
+  title,
+  totalLabel,
+  coupon,
+  fxNote,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  onCouponDraftChange,
+  onApplyCoupon,
+  onRemoveCoupon,
+  onQuantityChange,
+  onRemoveItem,
+  lineStates,
+  totalPending = false,
+  onContinueShopping,
+  platform,
+  surface,
+  roll = false,
+  motion,
+  size = "hero",
+  density = "comfortable",
+  orientation = "horizontal",
+  align = "end",
+  tone,
+  unit,
+  delta,
+  caption,
+  error,
+  loading = false
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("checkout");
+  const { styles: styles2 } = useStyles(sheet3);
+  const couponLabelId = React4.useId();
+  const couponErrorId = React4.useId();
+  const heading = labels.summaryHeading(title ?? labels.orderSummary, currency);
+  const showItems = variant === "itemised" && items !== void 0 && items.length > 0;
+  const showEmpty = variant === "itemised" && items !== void 0 && items.length === 0 && onContinueShopping !== void 0;
+  const editable = onQuantityChange !== void 0 || onRemoveItem !== void 0;
+  const reduced = useReducedMotion();
+  const headingRef = React4.useRef(null);
+  const removeRefs = React4.useRef([]);
+  const focusAfter = React4.useRef(null);
+  const lineCount = items?.length ?? 0;
+  React4.useEffect(() => {
+    const index = focusAfter.current;
+    if (index === null) return;
+    focusAfter.current = null;
+    const node = findNodeHandle(removeRefs.current[index] ?? headingRef.current);
+    if (node !== null) AccessibilityInfo.setAccessibilityFocus(node);
+  }, [lineCount]);
+  const remove = (index) => {
+    if (!onRemoveItem) return;
+    if (!reduced) {
+      LayoutAnimation.configureNext(
+        LayoutAnimation.create(200, LayoutAnimation.Types.easeInEaseOut, "opacity")
+      );
+    }
+    focusAfter.current = index;
+    onRemoveItem(index);
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      accessibilityLabel: heading,
+      accessibilityState: loading ? { busy: true } : void 0,
+      style: [styles2.section, style],
+      children: [
+        /* @__PURE__ */ jsx(Text, { ref: headingRef, accessibilityRole: "header", style: styles2.overline, children: heading }),
+        showItems ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles2.itemList, children: items.map((item, i) => /* @__PURE__ */ jsx(View, { role: "listitem", children: editable ? /* @__PURE__ */ jsx(
+          EditableLine,
+          {
+            item,
+            state: lineStates?.[i],
+            currency,
+            locale,
+            labels,
+            platform,
+            removeRef: (el) => {
+              removeRefs.current[i] = el;
+            },
+            onQuantityChange: onQuantityChange ? (qty) => onQuantityChange(i, qty) : void 0,
+            onRemove: onRemoveItem ? () => remove(i) : void 0
+          }
+        ) : /* @__PURE__ */ jsx(
+          SummaryItemRow,
+          {
+            name: item.name,
+            detail: item.detail,
+            qty: item.qty,
+            minor: item.qty * item.unit,
+            currency,
+            icon: summaryIcon(item.icon),
+            locale,
+            noSymbol: true
+          }
+        ) }, `${i}-${item.name}-${item.unit}`)) }) : null,
+        showEmpty ? /* @__PURE__ */ jsxs(View, { style: styles2.empty, children: [
+          /* @__PURE__ */ jsx(EmptyState, { layout: "inline", icon: "inbox", title: labels.cartEmpty, platform }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", onPress: onContinueShopping, children: labels.continueShopping })
+        ] }) : null,
+        !showEmpty && rows.length > 0 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles2.rowStack,
+              density === "compact" ? styles2.rowStackCompact : null,
+              showItems ? styles2.rowStackRuled : null
+            ],
+            children: rows.map(
+              (row, index) => row.pending ? /* @__PURE__ */ jsxs(
+                View,
+                {
+                  style: [styles2.pendingRow, row.rule ? styles2.pendingRule : null],
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { style: row.strong ? styles2.pendingLabelStrong : styles2.pendingLabel, children: row.label }),
+                    /* @__PURE__ */ jsx(Text, { style: row.strong ? styles2.pendingValueStrong : styles2.pendingValue, children: labels.calculating })
+                  ]
+                },
+                `${index}-${String(row.label)}`
+              ) : /* @__PURE__ */ jsx(
+                PriceRow,
+                {
+                  label: row.label,
+                  minor: row.minor,
+                  currency,
+                  tone: row.tone,
+                  strong: row.strong,
+                  rule: row.rule,
+                  locale,
+                  noSymbol: true,
+                  roll,
+                  motion,
+                  density,
+                  orientation
+                },
+                `${index}-${String(row.label)}`
+              )
+            )
+          }
+        ) : null,
+        !showEmpty && coupon ? /* @__PURE__ */ jsx(View, { style: styles2.couponBlock, children: coupon.applied ? /* @__PURE__ */ jsxs(View, { style: styles2.appliedRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "tag", size: theme.icon.sm, color: theme.color.goodOnSoft }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles2.appliedCode, children: coupon.applied }),
+          onRemoveCoupon ? (
+            // The shared text action, as on a cart line.
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                onPress: onRemoveCoupon,
+                style: [styles2.pushEnd, styles2.remove],
+                children: /* @__PURE__ */ jsx(Text, { style: [styles2.removeText, styles2.removeTextOnSoft], children: labels.remove })
+              }
+            )
+          ) : null
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { nativeID: couponLabelId, style: styles2.fieldLabel, children: coupon.label ?? labels.discountCode }),
+          /* @__PURE__ */ jsxs(View, { style: styles2.couponRow, children: [
+            /* @__PURE__ */ jsx(View, { style: styles2.couponField, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                "aria-labelledby": couponLabelId,
+                "aria-describedby": coupon.error ? couponErrorId : void 0,
+                "aria-invalid": coupon.error !== void 0 || void 0,
+                value: coupon.draft,
+                placeholder: coupon.placeholder,
+                autoComplete: "off",
+                autoCorrect: false,
+                size: "lg",
+                surface,
+                loading: coupon.busy ?? false,
+                error: coupon.error !== void 0,
+                onChangeText: (next) => onCouponDraftChange?.(next)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "lg",
+                loading: coupon.busy ?? false,
+                onPress: () => onApplyCoupon?.(coupon.draft),
+                children: labels.apply
+              }
+            )
+          ] }),
+          coupon.error ? /* @__PURE__ */ jsx(Text, { nativeID: couponErrorId, accessibilityRole: "alert", style: styles2.fieldError, children: coupon.error }) : null
+        ] }) }) : null,
+        showEmpty ? null : /* @__PURE__ */ jsxs(View, { style: [styles2.totalRow, orientation === "vertical" ? styles2.totalStack : null], children: [
+          /* @__PURE__ */ jsx(Text, { style: styles2.totalLabel, children: totalLabel ?? labels.total }),
+          totalPending ? (
+            // The hero figure's line box, so the row keeps its height.
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [
+                  styles2.totalPendingBox,
+                  {
+                    minHeight: (isAndroidIdiom(theme, platform) ? theme.fontSize[36] : theme.type.largeTitle.fontSize) * theme.lineHeight.tight
+                  }
+                ],
+                children: /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles2.pendingValue, children: labels.calculating })
+              }
+            )
+          ) : /* @__PURE__ */ jsx(
+            Amount,
+            {
+              minor: total,
+              currency,
+              size,
+              tone,
+              unit,
+              delta,
+              caption,
+              error,
+              loading,
+              align: orientation === "vertical" ? align : void 0,
+              locale,
+              roll,
+              motion
+            }
+          )
+        ] }),
+        !showEmpty && fxNote ? /* @__PURE__ */ jsx(FxNote, { currency: fxNote.currency, rateLine: fxNote.rateLine }) : null
+      ]
+    }
+  );
+}
+function EditableLine({
+  item,
+  state,
+  currency,
+  locale,
+  labels,
+  platform,
+  removeRef,
+  onQuantityChange,
+  onRemove
+}) {
+  const theme = useLoamTheme("checkout");
+  const android = isAndroidIdiom(theme, platform);
+  const { styles: styles2 } = useStyles(sheet3);
+  const inactive = state?.outOfStock ?? false;
+  const hint = inactive ? void 0 : state?.hint ?? (item.qty <= 1 && onRemove ? labels.useRemove : void 0);
+  const icon = summaryIcon(item.icon);
+  return /* @__PURE__ */ jsxs(View, { style: [styles2.line, inactive ? styles2.lineInactive : null], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles2.lineHead, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles2.thumb, inactive ? styles2.thumbInactive : null], children: state?.thumb ?? (icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: theme.color.text2 }) : null) }),
+      /* @__PURE__ */ jsxs(View, { style: styles2.lineText, children: [
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles2.lineName, inactive ? styles2.text2 : null], children: item.name }),
+        item.detail ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles2.lineDetail, children: item.detail }) : null,
+        inactive ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: labels.outOfStock }) : null
+      ] }),
+      state?.pending ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles2.linePending, children: labels.calculating }) : /* @__PURE__ */ jsx(Text, { style: [styles2.linePrice, inactive ? styles2.text2 : null], children: /* @__PURE__ */ jsx(
+        Amount,
+        {
+          minor: item.qty * item.unit,
+          currency,
+          noSymbol: true,
+          locale,
+          platform
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles2.lineControls, children: [
+      !inactive && onQuantityChange ? /* @__PURE__ */ jsx(
+        Stepper,
+        {
+          size: "lg",
+          platform,
+          value: item.qty,
+          min: 1,
+          max: state?.max,
+          onValueChange: onQuantityChange,
+          accessibilityLabel: item.name
+        }
+      ) : null,
+      onRemove ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          ref: removeRef,
+          accessibilityRole: "button",
+          accessibilityLabel: labels.removeItem(item.name),
+          accessibilityHint: hint,
+          onPress: onRemove,
+          hitSlop: android ? (48 - theme.ctl.lg) / 2 : void 0,
+          android_ripple: { color: theme.state.pressed, borderless: true },
+          style: styles2.remove,
+          children: /* @__PURE__ */ jsx(Text, { style: [styles2.removeText, android ? styles2.removeTextAndroid : null], children: labels.remove })
+        }
+      ) : null
+    ] }),
+    hint ? /* @__PURE__ */ jsx(Text, { style: styles2.lineHint, children: hint }) : null,
+    state?.error ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles2.lineError, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: 14, color: theme.color.dangerOnSoft }),
+      /* @__PURE__ */ jsx(Text, { style: styles2.lineErrorText, children: state.error })
+    ] }) : null
+  ] });
+}
+function CollapsedSummaryBar({
+  total,
+  currency,
+  open,
+  children,
+  label,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  onToggle,
+  roll = false,
+  motion,
+  loading = false,
+  size = "md",
+  density = "comfortable",
+  variant = "card",
+  disabled = false,
+  align = "end",
+  tone,
+  unit,
+  caption,
+  delta,
+  error
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("checkout");
+  const { styles: styles2 } = useStyles(sheet3);
+  const panelId = React4.useId();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles2.bar,
+        variant === "plain" ? styles2.barFlat : null,
+        error ? styles2.barInvalid : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            disabled,
+            accessibilityState: { expanded: open, ...loading ? { busy: true } : null, ...disabled ? { disabled: true } : null },
+            ...expandedProps(open),
+            "aria-busy": loading || void 0,
+            "aria-controls": panelId,
+            onPress: () => {
+              const ds = theme.spring.ds;
+              LayoutAnimation.configureNext(
+                theme.reduceMotion ? {
+                  duration: theme.duration.fast,
+                  update: { type: "easeInEaseOut" },
+                  create: { type: "easeInEaseOut", property: "opacity" },
+                  delete: { type: "easeInEaseOut", property: "opacity" }
+                } : {
+                  duration: ds.duration,
+                  update: { type: "spring", springDamping: ds.dampingRatio },
+                  create: { type: "easeInEaseOut", property: "opacity" },
+                  delete: { type: "easeInEaseOut", property: "opacity" }
+                }
+              );
+              onToggle(!open);
+            },
+            style: ({ pressed }) => [
+              styles2.trigger,
+              density === "compact" ? { minHeight: theme.ctl.md } : null,
+              pressed ? styles2.triggerPressed : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: open ? "chevron-up" : "chevron-down",
+                  size: theme.icon.sm,
+                  color: theme.color.text3
+                }
+              ),
+              /* @__PURE__ */ jsxs(View, { style: styles2.triggerText, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles2.triggerLabel, children: label ?? labels.orderSummary }),
+                caption ? /* @__PURE__ */ jsx(Text, { style: styles2.triggerCaption, children: caption }) : null
+              ] }),
+              /* @__PURE__ */ jsx(View, { style: align === "end" ? styles2.pushEnd : null, children: /* @__PURE__ */ jsx(
+                Amount,
+                {
+                  minor: total,
+                  currency,
+                  size,
+                  tone,
+                  unit,
+                  delta,
+                  weight: "bold",
+                  locale,
+                  loading,
+                  roll,
+                  motion
+                }
+              ) })
+            ]
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: [styles2.barError, styles2.barErrorChip], children: error }) : null,
+        open ? /* @__PURE__ */ jsx(View, { nativeID: panelId, style: styles2.panel, children }) : null
+      ]
+    }
+  );
+}
+var sheet3 = createStyleSheet((theme) => ({
+  section: { gap: theme.space.s3 },
+  overline: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  itemList: { gap: theme.space.s3 },
+  line: { gap: theme.space.s2 },
+  lineInactive: {
+    padding: theme.space.s2,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface2
+  },
+  lineHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  thumb: {
+    width: theme.space[44],
+    height: theme.space[44],
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface3
+  },
+  // G2 inactive: the thumb drops its colour.
+  thumbInactive: { filter: [{ grayscale: 1 }] },
+  lineText: { flex: 1, minWidth: 0, alignItems: "flex-start", gap: theme.space.s1 },
+  lineName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.3,
+    color: theme.color.text
+  },
+  text2: { color: theme.color.text2 },
+  lineDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * 1.3,
+    color: theme.color.text2
+  },
+  linePrice: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.3,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text
+  },
+  linePending: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.3,
+    color: theme.color.text2
+  },
+  lineControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingStart: theme.space[56]
+  },
+  remove: { minHeight: theme.ctl.lg, justifyContent: "center" },
+  // The applied-code row sits on the good-soft ground, where accentStrong falls short.
+  removeTextOnSoft: { color: theme.color.goodOnSoft },
+  removeText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.body.fontSize,
+    color: theme.color.accentStrong
+  },
+  // Android sets the text action at 14 / 500 (G9 A57 platform row).
+  removeTextAndroid: { fontWeight: theme.fontWeight.medium, fontSize: theme.fontSize[14] },
+  lineHint: {
+    paddingStart: theme.space[56],
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * 1.4,
+    color: theme.color.text2
+  },
+  lineError: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingStart: theme.space[56]
+  },
+  lineErrorText: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * 1.4,
+    color: theme.color.dangerOnSoft
+  },
+  empty: { alignItems: "center", gap: theme.space.s3 },
+  pendingRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s4
+  },
+  pendingRule: {
+    paddingTop: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  pendingLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  pendingLabelStrong: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  pendingValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  pendingValueStrong: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[22],
+    lineHeight: theme.fontSize[22] * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  totalPendingBox: { justifyContent: "flex-end" },
+  rowStack: { gap: theme.space.s2 },
+  rowStackCompact: { gap: theme.space[2] },
+  totalStack: { flexDirection: "column", alignItems: "flex-start", gap: theme.space.s1 },
+  rowStackRuled: {
+    paddingTop: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  couponBlock: { gap: theme.space.s1 },
+  appliedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    // The soft tint always carries its tone edge: `goodSoft` collapses to the
+    // plain surface under high contrast, and the edge is the only thing left
+    // drawing the block.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.good,
+    backgroundColor: theme.color.goodSoft
+  },
+  appliedCode: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.goodOnSoft
+  },
+  pushEnd: { marginStart: "auto" },
+  fieldLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * 1.3,
+    color: theme.color.text
+  },
+  couponRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  couponField: { flex: 1 },
+  fieldError: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.regular,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  totalRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s4,
+    paddingTop: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  totalLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.3,
+    color: theme.color.text
+  },
+  bar: {
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  barFlat: { borderWidth: 0, backgroundColor: "transparent" },
+  barInvalid: { borderColor: theme.color.danger },
+  triggerText: { flexShrink: 1 },
+  triggerCaption: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  // `dangerOnSoft` is measured on the danger tint only, so the message always
+  // carries that tint rather than sitting on the bar's (or the page's) ground.
+  barErrorChip: {
+    alignSelf: "flex-start",
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.edge.danger,
+    borderRadius: theme.radius.xs,
+    marginHorizontal: theme.space.s3,
+    marginBottom: theme.space.s2,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space.s1
+  },
+  barError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft,
+    paddingHorizontal: theme.space.s3,
+    paddingBottom: theme.space.s2
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space.s3
+  },
+  triggerPressed: { backgroundColor: theme.state.pressed },
+  triggerLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.3,
+    color: theme.color.text
+  },
+  panel: {
+    padding: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  }
+}));
+var CartContext = React4.createContext(null);
+var measure = (node) => new Promise((resolve) => {
+  if (!node?.measureInWindow) return resolve(null);
+  node.measureInWindow(
+    (x, y, w, h) => resolve(Number.isFinite(x) && w > 0 ? { x, y, w, h } : null)
+  );
+});
+function CartHost({ children, motion = "full", style }) {
+  const level = useResolvedMotion(motion, "checkout");
+  const host = React4.useRef(null);
+  const target = React4.useRef(null);
+  const bump = React4.useRef(null);
+  const [flights, setFlights] = React4.useState([]);
+  const seq = React4.useRef(0);
+  const levelRef = React4.useRef(level);
+  levelRef.current = level;
+  const fly = React4.useCallback(async (from, options = {}) => {
+    const land = () => {
+      bump.current?.();
+      haptics.notify("success");
+    };
+    if (levelRef.current !== "full") {
+      if (levelRef.current === "reduced") land();
+      return;
+    }
+    const [h, a, b] = await Promise.all([
+      measure(host.current),
+      measure(from),
+      measure(target.current)
+    ]);
+    if (!h || !a || !b) {
+      land();
+      return;
+    }
+    await new Promise((resolve) => {
+      const id = ++seq.current;
+      const rel = (r) => ({ x: r.x - h.x, y: r.y - h.y, w: r.w, h: r.h });
+      setFlights((all) => [
+        ...all,
+        {
+          id,
+          from: rel(a),
+          to: rel(b),
+          children: options.children,
+          done: () => {
+            setFlights((rest) => rest.filter((f) => f.id !== id));
+            land();
+            resolve();
+          }
+        }
+      ]);
+    });
+  }, []);
+  const value = React4.useMemo(() => ({ target, bump, fly }), [fly]);
+  return /* @__PURE__ */ jsx(CartContext.Provider, { value, children: /* @__PURE__ */ jsxs(View, { ref: host, style: [styles.host, style], collapsable: false, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        pointerEvents: "none",
+        style: StyleSheet.absoluteFill,
+        ...{ "aria-hidden": true },
+        children: flights.map((f) => /* @__PURE__ */ jsx(CartFlight, { flight: f }, f.id))
+      }
+    )
+  ] }) });
+}
+var styles = StyleSheet.create({ host: { flex: 1 } });
+function CartFlight({ flight }) {
+  const theme = useLoamTheme("checkout");
+  const { styles: s } = useStyles(sheet4);
+  const p = React4.useRef(new Animated.Value(0)).current;
+  const { from, to } = flight;
+  const size = Math.max(16, Math.min(from.w, from.h));
+  const dx = to.x + to.w / 2 - (from.x + from.w / 2);
+  const dy = to.y + to.h / 2 - (from.y + from.h / 2);
+  React4.useEffect(() => {
+    const anim = Animated.spring(p, {
+      toValue: 1,
+      ...springConfig(theme, "ss"),
+      useNativeDriver: true
+    });
+    anim.start(() => flight.done());
+    return () => anim.stop();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "cart-flight",
+      style: [
+        s.flight,
+        {
+          left: from.x + from.w / 2 - size / 2,
+          top: from.y + from.h / 2 - size / 2,
+          width: size,
+          height: size,
+          opacity: p.interpolate({
+            inputRange: [0, 0.7, 1],
+            outputRange: [1, 1, 0],
+            extrapolate: "clamp"
+          }),
+          transform: [
+            { translateX: p.interpolate({ inputRange: [0, 1], outputRange: [0, dx] }) },
+            // A shallow arc: the copy lifts before it drops into the cart.
+            {
+              translateY: p.interpolate({
+                inputRange: [0, 0.4, 1],
+                outputRange: [0, Math.min(dy, 0) * 0.4 - size * 0.4, dy]
+              })
+            },
+            {
+              scale: p.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1, 0.3],
+                extrapolate: "clamp"
+              })
+            }
+          ]
+        }
+      ],
+      children: flight.children ?? /* @__PURE__ */ jsx(View, { style: s.dot })
+    }
+  );
+}
+function useAddToCart() {
+  const ctx = React4.useContext(CartContext);
+  return React4.useMemo(
+    () => ({ fly: ctx ? ctx.fly : async () => haptics.notify("success") }),
+    [ctx]
+  );
+}
+function CartButton({
+  count,
+  onPress,
+  accessibilityLabel,
+  labels: labelsProp,
+  motion = "full",
+  disabled = false,
+  variant = "ghost",
+  size = "lg",
+  tone = "default",
+  loading = false,
+  error,
+  leading,
+  trailing,
+  fullWidth = false,
+  style,
+  testID
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
+  const { styles: s } = useStyles(sheet4);
+  const level = useResolvedMotion(motion, "checkout");
+  const ctx = React4.useContext(CartContext);
+  const ref = React4.useRef(null);
+  const pulse = React4.useRef(new Animated.Value(0)).current;
+  React4.useEffect(() => {
+    if (!ctx) return;
+    const node = ref.current;
+    ctx.target.current = node;
+    ctx.bump.current = () => {
+      if (level === "none") return;
+      pulse.setValue(1);
+      const anim = level === "full" ? Animated.spring(pulse, {
+        toValue: 0,
+        ...springConfig(theme, "fs"),
+        useNativeDriver: true
+      }) : Animated.timing(pulse, { toValue: 0, ...motionTiming(level), useNativeDriver: true });
+      anim.start();
+    };
+    return () => {
+      if (ctx.target.current === node) ctx.target.current = null;
+      ctx.bump.current = null;
+    };
+  }, [ctx, level, theme, pulse]);
+  const ink = tone === "accent" ? theme.color.accent : tone === "danger" ? theme.color.danger : theme.color.text;
+  const label = count > 0 ? labels.cartCount(accessibilityLabel ?? labels.cart, count) : accessibilityLabel ?? labels.cart;
+  const button = /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      role: "button",
+      accessibilityLabel: label,
+      onPress,
+      disabled,
+      accessibilityState: disabled || loading ? { ...disabled ? { disabled: true } : null, ...loading ? { busy: true } : null } : void 0,
+      "aria-busy": loading || void 0,
+      "aria-invalid": error ? true : void 0,
+      testID,
+      collapsable: false,
+      style: ({ pressed }) => [
+        s.button,
+        { width: theme.ctl[size], height: theme.ctl[size], borderRadius: theme.ctl.r[size] },
+        leading || trailing || fullWidth ? (
+          // `width: undefined` does not clear the square's width on web (the
+          // resolver drops it), which clipped a leading label to its last
+          // letters; `auto` does, and the content then sizes the button.
+          { width: fullWidth ? "100%" : "auto", minWidth: theme.ctl[size], flexDirection: "row", gap: theme.space.s2, paddingHorizontal: theme.space.s2 }
+        ) : null,
+        fullWidth ? { alignSelf: "stretch" } : null,
+        variant === "tonal" ? s.tonal : null,
+        variant === "outline" ? s.outline : null,
+        pressed && s.pressed,
+        error ? { borderWidth: theme.borderWidth.strong, borderColor: theme.color.danger } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        typeof error === "string" ? null : style
+      ],
+      children: [
+        leading,
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: level === "full" ? {
+              transform: [
+                { scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.12] }) }
+              ]
+            } : { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }) },
+            children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: ink, accessibilityLabel: labels.cart }) : /* @__PURE__ */ jsx(Icon, { name: "cart", size: theme.ctl.icon[size], color: ink })
+          }
+        ),
+        trailing,
+        /* @__PURE__ */ jsx(View, { style: s.badge, pointerEvents: "none", ...{ "aria-hidden": true }, children: /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", count, animateCount: true, motion }) })
+      ]
+    }
+  );
+  if (typeof error !== "string" || !error) return button;
+  return /* @__PURE__ */ jsxs(View, { style: [s.errorWrap, style], children: [
+    button,
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: s.errorText, children: error })
+  ] });
+}
+var sheet4 = createStyleSheet((theme) => ({
+  errorWrap: { alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    alignSelf: "center",
+    ...checkoutErrorChip(theme)
+  },
+  // A ghost icon Button lg: 44 square, r 12, 20 glyph, the ghost press layer.
+  button: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md
+  },
+  pressed: { backgroundColor: theme.state.pressed },
+  tonal: { backgroundColor: theme.color.accentSoft, borderWidth: theme.borderWidth.base, borderColor: theme.edge.accent },
+  outline: { borderWidth: theme.borderWidth.strong, borderColor: theme.color.borderStrong },
+  badge: { position: "absolute", top: theme.space[1], end: theme.space[1] },
+  flight: {
+    position: "absolute",
+    overflow: "hidden",
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  }
+}));
+
+export { CartButton, CartHost, CheckoutSheet, CollapsedSummaryBar, OrderSummary, PayButton, summaryIcon, useAddToCart };