@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-UYG5L34B.js

@@ -1,87 +0,0 @@
-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

@@ -1,336 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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 };