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

package/dist/chunk-UWSZB7BJ.js

@@ -0,0 +1 @@
+

package/dist/chunk-UYG5L34B.js

@@ -0,0 +1,87 @@
+import { useThinkingPulse } from './chunk-XXXEFXY5.js';
+import 'react';
+import { View, Animated, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function StatusDot({
+  state,
+  size = "md",
+  label,
+  pulse,
+  motion = "full",
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { state, size });
+  const theme = useLoamTheme();
+  const shouldPulse = state === "working" && (pulse ?? true) && motion === "full" && !theme.reduceMotion;
+  const pulseStyle = useThinkingPulse(shouldPulse);
+  const name = accessibilityLabel || label || `Status: ${state}`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: name,
+      testID,
+      style: [styles.container, style],
+      children: [
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, pulseStyle] }),
+        label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2
+  },
+  // Shape encodes the state; colour only reinforces it. `borderRadius: 2` is a
+  // graphical-glyph radius (like the charts legend chip's raw px) — a real token
+  // (`radius.xs` = 4) would round an 8px square into a circle and erase the
+  // shape distinction. `radius.full` clamps the round states to a true circle.
+  dot: {
+    variants: {
+      state: {
+        working: { backgroundColor: theme.status.working, borderRadius: theme.radius.full },
+        waiting: { backgroundColor: theme.status.waiting, borderRadius: theme.radius[2] },
+        done: { backgroundColor: theme.status.done, borderRadius: theme.radius.full },
+        crashed: {
+          backgroundColor: theme.status.crashed,
+          borderRadius: theme.radius[2],
+          transform: [{ rotate: "45deg" }]
+        },
+        conflict: {
+          backgroundColor: theme.status.conflictSoft,
+          borderRadius: theme.radius[2],
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.conflict,
+          transform: [{ rotate: "45deg" }]
+        },
+        pending: {
+          backgroundColor: "transparent",
+          borderRadius: theme.radius.full,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.pending
+        }
+      },
+      size: {
+        sm: { width: theme.space[8], height: theme.space[8] },
+        md: { width: theme.space[10], height: theme.space[10] }
+      }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  }
+}));
+
+export { StatusDot };

package/dist/chunk-VBOXAEPI.js

@@ -0,0 +1,336 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { Text, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { moneyParts } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Amount({
+  minor,
+  currency,
+  size = "md",
+  weight,
+  tone = "default",
+  strike = false,
+  signed = false,
+  compact = false,
+  noSymbol = false,
+  align,
+  locale,
+  style,
+  testID
+}) {
+  const hero = size === "hero";
+  const resolvedWeight = weight ?? (hero ? "bold" : "medium");
+  const { styles } = useStyles(sheet, {
+    size,
+    weight: resolvedWeight,
+    // `default` is a reserved key in a Unistyles variant group (it names the
+    // group's fallback), so the surface's own ink is spelled `ink` in the sheet.
+    // The prop keeps the shared vocabulary the web half uses.
+    tone: tone === "default" ? "ink" : tone,
+    align: align ?? "none",
+    strike
+  });
+  const parts = moneyParts(minor, currency, { locale, noSymbol, compact, signed });
+  return /* @__PURE__ */ jsx(Text, { testID, numberOfLines: 1, style: [styles.amount, style], children: hero && parts.frac ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.amount, children: parts.main }),
+    /* @__PURE__ */ jsx(Text, { style: styles.frac, children: parts.frac }),
+    parts.tail ? /* @__PURE__ */ jsx(Text, { style: styles.amount, children: parts.tail }) : null
+  ] }) : `${parts.main}${parts.frac}${parts.tail ?? ""}` });
+}
+function AmountRange({
+  perInstalment,
+  count,
+  total,
+  currency,
+  size = "md",
+  totalLabel = "total",
+  locale,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { joinSize: size });
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.rangeRow, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        testID: "amount-range-instalment",
+        minor: perInstalment,
+        currency,
+        size,
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.join, children: `\xD7 ${count}` }),
+    /* @__PURE__ */ jsx(Text, { "aria-hidden": true, style: styles.joinDot, children: "\xB7" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.join, children: totalLabel }),
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        testID: "amount-range-total",
+        minor: total,
+        currency,
+        size,
+        locale
+      }
+    )
+  ] });
+}
+function PriceRow({
+  label,
+  minor,
+  currency,
+  strong = false,
+  tone,
+  rule = false,
+  noSymbol = false,
+  signed = false,
+  locale,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { rule, strong });
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.priceRow, style], children: [
+    typeof label === "string" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.priceLabel, children: label }) : label,
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor,
+        currency,
+        size: strong ? "lg" : "sm",
+        weight: strong ? "bold" : "medium",
+        tone,
+        noSymbol,
+        signed,
+        locale
+      }
+    )
+  ] });
+}
+function FxNote({
+  currency,
+  rateLine,
+  note = "Your bank may convert at its own rate \u2014 we show the rate we used:",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.fxNote, style], children: [
+    /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
+    /* @__PURE__ */ jsxs(Text, { style: styles.fxText, children: [
+      `Charged in ${currency}. ${note} `,
+      /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: rateLine })
+    ] })
+  ] });
+}
+function SummaryItemRow({
+  name,
+  detail,
+  qty,
+  minor,
+  currency,
+  icon,
+  noSymbol = false,
+  locale,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.itemRow, style], children: [
+    icon ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.itemTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text2 }) }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.itemText, children: [
+      /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.itemName, children: [
+        name,
+        qty > 1 ? /* @__PURE__ */ jsx(Text, { style: styles.itemQty, children: ` \xD7 ${qty}` }) : null
+      ] }),
+      detail ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.itemDetail, children: detail }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Amount, { minor, currency, size: "sm", noSymbol, locale })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  /**
+   * The amount itself.
+   *
+   * Sizes come from the numeric type ramp rather than a `type.*` role because
+   * here the size genuinely *is* the decision — a figure in a table cell, a
+   * figure on a button, a figure that is the whole screen. `hero` is 40px with
+   * tight tracking (the spec asks for it above 30px), and its fraction is 22px:
+   * 56% of 40 is 22.4, so the ramp already holds the value.
+   */
+  amount: {
+    fontFamily: theme.font.sans,
+    // P11: tabular figures everywhere, so a column lines up on the separator.
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.fontSize[13],
+          lineHeight: theme.fontSize[13] * theme.lineHeight.snug
+        },
+        md: {
+          fontSize: theme.fontSize[15],
+          lineHeight: theme.fontSize[15] * theme.lineHeight.snug
+        },
+        lg: {
+          fontSize: theme.fontSize[22],
+          lineHeight: theme.fontSize[22] * theme.lineHeight.tight
+        },
+        hero: {
+          fontSize: theme.fontSize[40],
+          lineHeight: theme.fontSize[40] * theme.lineHeight.tight,
+          letterSpacing: theme.fontSize[40] * theme.tracking.tight
+        }
+      },
+      weight: {
+        regular: { fontWeight: theme.fontWeight.regular },
+        medium: { fontWeight: theme.fontWeight.medium },
+        bold: { fontWeight: theme.fontWeight.bold }
+      },
+      tone: {
+        ink: { color: theme.color.text },
+        muted: { color: theme.color.text2 },
+        subtle: { color: theme.color.text3 },
+        accent: { color: theme.color.accentStrong },
+        good: { color: theme.color.good },
+        warn: { color: theme.color.warn },
+        danger: { color: theme.color.danger }
+      },
+      // Logical alignment: `end` is the reading end, so it flips under RTL.
+      // `none` is the inline case — an amount inside a sentence.
+      align: {
+        none: {},
+        start: { alignSelf: "stretch", textAlign: theme.rtl ? "right" : "left" },
+        end: { alignSelf: "stretch", textAlign: theme.rtl ? "left" : "right" }
+      },
+      // A struck figure also drops to the muted ink, so the strike is never the
+      // only signal that the number no longer applies.
+      strike: {
+        true: { textDecorationLine: "line-through", color: theme.color.text3 },
+        false: {}
+      }
+    }
+  },
+  frac: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[22],
+    // The ink ramp, not an opacity: a dimmed fraction cannot be measured
+    // against a ground the component does not know.
+    color: theme.color.text2
+  },
+  rangeRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space[6]
+  },
+  join: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    variants: {
+      joinSize: {
+        sm: { fontSize: theme.fontSize[13] },
+        md: { fontSize: theme.fontSize[15] },
+        lg: { fontSize: theme.fontSize[15] }
+      }
+    }
+  },
+  joinDot: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    color: theme.color.text3
+  },
+  priceRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s4,
+    variants: {
+      rule: {
+        true: {
+          borderTopWidth: theme.borderWidth.base,
+          borderTopColor: theme.color.border,
+          paddingTop: theme.space[10]
+        },
+        false: {}
+      },
+      strong: { true: {}, false: {} }
+    }
+  },
+  priceLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    variants: {
+      rule: { true: {}, false: {} },
+      strong: {
+        true: { fontWeight: theme.fontWeight.bold, color: theme.color.text },
+        false: { color: theme.color.text2 }
+      }
+    }
+  },
+  fxNote: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    // A soft tint needs a tone edge: `infoSoft` collapses to the plain surface
+    // under high contrast, and the edge is then the only thing drawing the block.
+    backgroundColor: theme.color.infoSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info
+  },
+  fxText: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.fontSize[13] * theme.lineHeight.normal,
+    color: theme.color.infoOnSoft
+  },
+  fxRate: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.infoOnSoft
+  },
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3
+  },
+  itemTile: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  itemText: { flexShrink: 1, flexGrow: 1 },
+  itemName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  itemQty: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text2
+  },
+  itemDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  }
+}));
+
+export { Amount, AmountRange, FxNote, PriceRow, SummaryItemRow };

package/dist/chunk-VCDBXW5H.js

@@ -0,0 +1,188 @@
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { View, ScrollView, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT_SIZE = 7;
+var DOT_ACTIVE_WIDTH = 22;
+function Dot({ active, motion }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const width = React.useRef(
+    new Animated.Value(theme.space[active ? DOT_ACTIVE_WIDTH : DOT_SIZE])
+  ).current;
+  const opacity = React.useRef(new Animated.Value(active ? 1 : 0.4)).current;
+  React.useEffect(() => {
+    const targetWidth = theme.space[active ? DOT_ACTIVE_WIDTH : DOT_SIZE];
+    const targetOpacity = active ? 1 : 0.4;
+    if (motion === "none") {
+      width.setValue(targetWidth);
+      opacity.setValue(targetOpacity);
+      return;
+    }
+    const animations = [
+      Animated.timing(opacity, {
+        toValue: targetOpacity,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: false
+      })
+    ];
+    if (motion === "full") {
+      animations.push(
+        Animated.timing(width, {
+          toValue: targetWidth,
+          duration: theme.duration.base,
+          easing: Easing.bezier(...theme.easing.spring),
+          useNativeDriver: false
+        })
+      );
+    } else {
+      width.setValue(targetWidth);
+    }
+    Animated.parallel(animations).start();
+  }, [active, motion, width, opacity, theme.duration.base, theme.easing.spring]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "carousel-dot",
+      style: [
+        styles.dot,
+        {
+          width,
+          opacity,
+          // Reference: inactive → text3, active → accent.
+          backgroundColor: active ? theme.color.accent : theme.color.text3
+        }
+      ]
+    }
+  );
+}
+function Carousel({
+  items,
+  renderItem,
+  children,
+  activeIndex,
+  onIndexChange,
+  showDots = true,
+  autoPlay = false,
+  interval = 4e3,
+  loop = false,
+  accessibilityLabel = "Carousel",
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  const resolvedMotion = useResolvedMotion(motion);
+  const slides = items && renderItem ? items.map((item, index) => renderItem(item, index)) : React.Children.toArray(children);
+  const count = slides.length;
+  const isControlled = activeIndex !== void 0;
+  const [internal, setInternal] = React.useState(0);
+  const active = Math.min(
+    count - 1,
+    Math.max(0, isControlled ? activeIndex : internal)
+  );
+  const [width, setWidth] = React.useState(0);
+  const scrollRef = React.useRef(null);
+  const onLayout = (e) => {
+    const next = e.nativeEvent.layout.width;
+    setWidth((prev) => prev === next ? prev : next);
+  };
+  const goTo = React.useCallback(
+    (index) => {
+      const clamped = Math.min(count - 1, Math.max(0, index));
+      if (clamped === active) return;
+      if (!isControlled) setInternal(clamped);
+      onIndexChange?.(clamped);
+    },
+    [active, count, isControlled, onIndexChange]
+  );
+  const onMomentumScrollEnd = (e) => {
+    if (width <= 0) return;
+    goTo(Math.round(e.nativeEvent.contentOffset.x / width));
+  };
+  React.useEffect(() => {
+    if (width <= 0) return;
+    scrollRef.current?.scrollTo({ x: active * width, animated: resolvedMotion === "full" });
+  }, [active, width, resolvedMotion]);
+  React.useEffect(() => {
+    if (!autoPlay || count <= 1) return;
+    const id = setInterval(() => {
+      const next = active + 1;
+      if (next >= count) {
+        if (loop) goTo(0);
+      } else {
+        goTo(next);
+      }
+    }, interval);
+    return () => clearInterval(id);
+  }, [autoPlay, interval, loop, active, count, goTo]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, role: "group", accessibilityLabel, children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ref: scrollRef,
+        horizontal: true,
+        pagingEnabled: true,
+        focusable: true,
+        showsHorizontalScrollIndicator: false,
+        onLayout,
+        onMomentumScrollEnd,
+        scrollEventThrottle: 16,
+        style: styles.scroll,
+        children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [styles.page, width > 0 ? { width } : styles.pageFallback],
+            accessible: true,
+            role: "group",
+            accessibilityLabel: `Slide ${index + 1} of ${count}`,
+            children: slide
+          },
+          index
+        ))
+      }
+    ),
+    showDots && count > 1 ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: styles.dots,
+        accessible: false,
+        importantForAccessibility: "no-hide-descendants",
+        children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, motion: resolvedMotion }, index))
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    position: "relative",
+    alignSelf: "stretch",
+    width: "100%"
+  },
+  scroll: {
+    alignSelf: "stretch"
+  },
+  page: {
+    alignSelf: "stretch"
+  },
+  // Before the container has measured itself (e.g. first render / jsdom), fall
+  // back to a full-width page so content still lays out.
+  pageFallback: {
+    width: "100%"
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingTop: theme.space.s3,
+    pointerEvents: "none"
+  },
+  dot: {
+    height: theme.space[DOT_SIZE],
+    borderRadius: theme.radius.full
+  }
+}));
+
+export { Carousel };

package/dist/chunk-VCXPHHDS.js

@@ -0,0 +1 @@
+