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

package/dist/chunk-5YNTNN5A.js

@@ -0,0 +1,177 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SegmentedControl({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  motion = "full",
+  disabled = false
+}) {
+  const animateSlide = useResolvedMotion(motion) === "full";
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(
+    defaultValue ?? items[0]?.value
+  );
+  const current = isControlled ? value : internal;
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === current)
+  );
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { size, disabled });
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const [layouts, setLayouts] = React.useState({});
+  const onSegmentLayout = (index) => (e) => {
+    const { x, y, width, height } = e.nativeEvent.layout;
+    setLayouts((prev) => {
+      const p = prev[index];
+      if (p && p.x === x && p.y === y && p.width === width && p.height === height) return prev;
+      return { ...prev, [index]: { x, y, width, height } };
+    });
+  };
+  const active = layouts[activeIndex];
+  const thumbX = React.useRef(new Animated.Value(0)).current;
+  const thumbWidth = React.useRef(new Animated.Value(0)).current;
+  const measured = React.useRef(false);
+  React.useEffect(() => {
+    if (!active) return;
+    if (!measured.current || !animateSlide) {
+      thumbX.setValue(active.x);
+      thumbWidth.setValue(active.width);
+      measured.current = true;
+      return;
+    }
+    const easing = Easing.bezier(...theme.motion.knob.easing);
+    Animated.parallel([
+      Animated.timing(thumbX, {
+        toValue: active.x,
+        duration: theme.motion.knob.duration,
+        easing,
+        useNativeDriver: false
+      }),
+      Animated.timing(thumbWidth, {
+        toValue: active.width,
+        duration: theme.motion.knob.duration,
+        easing,
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [active, animateSlide, thumbX, thumbWidth, theme.motion.knob]);
+  const select = (next) => {
+    if (!isControlled) setInternal(next);
+    haptics.impact("light");
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: "segmented-indicator",
+        pointerEvents: "none",
+        style: [
+          styles.indicator,
+          { left: thumbX, width: thumbWidth },
+          active ? { top: active.y, height: active.height } : null
+        ]
+      }
+    ),
+    items.map((item, index) => {
+      const selected = item.value === current;
+      const fg = selected ? theme.color.text : theme.color.text3;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected, disabled },
+          disabled,
+          onPress: disabled ? void 0 : () => select(item.value),
+          onLayout: onSegmentLayout(index),
+          hitSlop: { top: slopY, bottom: slopY },
+          style: styles.segment,
+          children: [
+            item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+            /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
+          ]
+        },
+        item.value
+      );
+    })
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    alignSelf: "flex-start",
+    position: "relative",
+    backgroundColor: theme.color.surface2,
+    borderRadius: theme.radius.full,
+    padding: theme.space.s1,
+    variants: {
+      size: { xs: {}, sm: {}, md: {} },
+      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
+    }
+  },
+  indicator: {
+    // `top`/`bottom` are the pre-measurement fallback; once a segment reports
+    // its box the use site overrides them with that segment's `y`/`height`.
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.full,
+    // Which segment is selected is carried by `surface`-on-`surface2` (~1.1:1)
+    // plus `shadow.sm`, and high contrast zeroes the shadow. The accent edge is
+    // what marks the selection there; it is `transparent` at normal contrast.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    ...theme.shadow.sm,
+    variants: {
+      size: { xs: {}, sm: {}, md: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // The measurement frame: no padding of its own, so a segment's measured
+  // `x`/`y` and the thumb's `left`/`top` are in the same coordinate space on
+  // every platform.
+  row: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "stretch"
+  },
+  segment: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    borderRadius: theme.radius.full,
+    variants: {
+      // Segment height + horizontal padding resolve from the control-size ramp
+      // (26 / 30 / 36); the measured box drives the sliding indicator.
+      size: {
+        xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
+        sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
+        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    variants: {
+      size: { xs: {}, sm: {}, md: {} },
+      disabled: { true: {}, false: {} }
+    }
+  }
+}));
+
+export { SegmentedControl };

package/dist/chunk-66SG2H23.js

@@ -0,0 +1,129 @@
+import { Skeleton } from './chunk-RIBDXGUG.js';
+import { CardBrandMark, OrDivider } from './chunk-PUPM2YGF.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Button } from './chunk-3ARE4TES.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { mask, methodsFor } from '@btndprojects/loam-pay';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function SavedCardChip({
+  brand,
+  last4,
+  expiry,
+  isDefault = false,
+  onUseAnother,
+  onManage,
+  useAnotherLabel = "Use a different card",
+  manageLabel = "Manage cards",
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.chip, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
+      /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md" }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipMask, children: mask(brand, last4) }),
+      expiry ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipExpiry, children: `Expires ${expiry}` }) : null,
+      isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: "default" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
+      onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel }) : null,
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel })
+    ] })
+  ] });
+}
+function ExpressPayRow({
+  state,
+  platform,
+  label,
+  secondary,
+  dividerLabel = "or pay with card",
+  resolvingLabel = "Checking for a wallet on this device",
+  onExpressPay,
+  onInstalments,
+  style,
+  testID
+}) {
+  const { styles, theme } = useStyles(sheet);
+  const express = methodsFor({ platform }).find((m) => m.kind === "express");
+  const buttonLabel = label ?? (express ? `Pay with ${express.label.toLowerCase()}` : "Express pay");
+  if (state === "unavailable") return null;
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.express, style], children: [
+    state === "resolving" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          testID: "express-skeleton",
+          variant: "rect",
+          height: theme.ctl.lg,
+          radius: "md",
+          accessibilityLabel: resolvingLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          role: "status",
+          accessibilityLiveRegion: "polite",
+          style: styles.srOnly,
+          ...{ "aria-live": "polite" },
+          children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: resolvingLabel })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.expressButtons, children: [
+      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, leadingIcon: "lock", onPress: onExpressPay, children: buttonLabel }),
+      onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onInstalments, children: secondary }) : null
+    ] }),
+    /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  chip: {
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  chipFacts: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  chipMask: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  chipExpiry: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  chipActions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  express: { gap: theme.space.s4 },
+  expressButtons: { gap: theme.space.s2 },
+  // A 1px clipped box, the same shape `board/` uses: present for assistive tech,
+  // invisible on screen, and never a `display: none` (which is not announced).
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+
+export { ExpressPayRow, SavedCardChip };