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

package/dist/chunk-H6NIOQHK.js

@@ -0,0 +1,346 @@
+import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { Animated, Easing, PanResponder, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GEOMETRY = {
+  sm: { thumb: 18, track: 4, height: 32 },
+  // loam-allow-raw: ramp keys, read via theme.space
+  md: { thumb: 24, track: 6, height: 40 }
+  // loam-allow-raw: ramp keys, read via theme.space
+};
+var THUMB_ACTIVE_SCALE = 1.18;
+var MAX_TICKS = 20;
+var BUBBLE_BOTTOM = 28;
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function Slider({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  size = "md",
+  motion = "full",
+  showValue = false,
+  showReadout = false,
+  showTicks = false,
+  accessibilityLabel
+}) {
+  const animateScale = useResolvedMotion(motion) === "full";
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? min);
+  const current = clamp(isControlled ? value : internal, min, max);
+  const { styles } = useStyles(sheet, { size, disabled });
+  const theme = useLoamTheme();
+  const fraction = max > min ? (current - min) / (max - min) : 0;
+  const pct = `${fraction * 100}%`;
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  const containerRef = React.useRef(null);
+  const widthRef = React.useRef(0);
+  const leftRef = React.useRef(0);
+  const currentRef = React.useRef(current);
+  currentRef.current = current;
+  const disabledRef = React.useRef(disabled);
+  disabledRef.current = disabled;
+  const setValue = React.useCallback(
+    (next) => {
+      if (next === currentRef.current) return;
+      currentRef.current = next;
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleRef = React.useRef(() => {
+  });
+  handleRef.current = (pageX) => {
+    const width = widthRef.current;
+    if (!width) return;
+    const frac = clamp((pageX - leftRef.current) / width, 0, 1);
+    const raw = min + frac * (max - min);
+    const stepped = step > 0 ? Math.round(raw / step) * step : raw;
+    const next = clamp(Number(stepped.toFixed(6)), min, max);
+    setValue(next);
+  };
+  const thumbScale = React.useRef(new Animated.Value(1)).current;
+  const swellRef = React.useRef(() => {
+  });
+  swellRef.current = (to) => {
+    if (!animateScale) {
+      thumbScale.setValue(to);
+      return;
+    }
+    Animated.timing(thumbScale, {
+      toValue: to,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.spring),
+      useNativeDriver: true
+    }).start();
+  };
+  const bubbleScale = React.useRef(new Animated.Value(0)).current;
+  const bubbleRef = React.useRef(() => {
+  });
+  bubbleRef.current = (to) => {
+    if (!animateScale) {
+      bubbleScale.setValue(to);
+      return;
+    }
+    Animated.timing(bubbleScale, {
+      toValue: to,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.spring),
+      useNativeDriver: true
+    }).start();
+  };
+  const steppedRef = React.useRef(step > 0);
+  steppedRef.current = step > 0;
+  const pan = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (e) => {
+        swellRef.current(THUMB_ACTIVE_SCALE);
+        bubbleRef.current(1);
+        haptics.impact("light");
+        handleRef.current(e.nativeEvent.pageX);
+      },
+      onPanResponderMove: (e) => {
+        const before = currentRef.current;
+        handleRef.current(e.nativeEvent.pageX);
+        if (steppedRef.current && currentRef.current !== before) haptics.impact("light");
+      },
+      onPanResponderRelease: () => {
+        swellRef.current(1);
+        bubbleRef.current(0);
+        if (steppedRef.current) haptics.impact("medium");
+      },
+      onPanResponderTerminate: () => {
+        swellRef.current(1);
+        bubbleRef.current(0);
+      }
+    })
+  ).current;
+  const onLayout = (e) => {
+    const w = e.nativeEvent.layout.width;
+    widthRef.current = w;
+    setTrackWidth(w);
+    containerRef.current?.measureInWindow?.((x) => {
+      leftRef.current = x;
+    });
+  };
+  const thumbSize = theme.space[GEOMETRY[size].thumb];
+  const thumbTranslateX = fraction * trackWidth - thumbSize / 2;
+  const stepCount = step > 0 && max > min ? Math.round((max - min) / step) : 0;
+  const showTickMarks = showTicks && stepCount > 0 && stepCount <= MAX_TICKS;
+  const tickIndices = showTickMarks ? Array.from({ length: stepCount + 1 }, (_, i) => i) : [];
+  const bubbleLabel = step > 0 ? String(current) : `${Math.round(fraction * 100)}%`;
+  const readoutText = `${min} \xB7 ${Math.round(fraction * 100)}% \xB7 ${max}`;
+  return /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.trackRow, children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          ref: containerRef,
+          accessibilityRole: "adjustable",
+          accessibilityLabel,
+          accessibilityValue: { min, max, now: current },
+          accessibilityState: { disabled },
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": current,
+          onLayout,
+          style: [styles.container, !disabled && DRAG_CURSOR],
+          ...disabled ? {} : pan.panHandlers,
+          children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.track, children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: pct }] }),
+              showTickMarks && /* @__PURE__ */ jsx(View, { style: styles.ticks, children: tickIndices.map((i) => /* @__PURE__ */ jsx(View, { testID: `slider-tick-${i}`, style: styles.tick }, i)) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [styles.bubbleAnchor, { transform: [{ translateX: fraction * trackWidth }] }],
+                children: /* @__PURE__ */ jsx(
+                  Animated.View,
+                  {
+                    testID: "slider-bubble",
+                    style: [styles.bubbleCard, { transform: [{ scale: bubbleScale }] }],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles.bubbleText, children: bubbleLabel })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                testID: "slider-thumb",
+                style: [
+                  styles.thumb,
+                  {
+                    transform: [{ translateX: thumbTranslateX }, { scale: thumbScale }]
+                  }
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      showValue ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: current }) : null
+    ] }),
+    showReadout ? /* @__PURE__ */ jsx(Text, { style: styles.readout, children: readoutText }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Outer column: stacks the track row and (optional) read-out below it.
+  wrap: {
+    flexDirection: "column",
+    alignSelf: "stretch",
+    gap: theme.space.s2
+  },
+  // Track row: slider container + optional side-label.
+  trackRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    variants: {
+      size: {
+        sm: { height: theme.space[GEOMETRY.sm.height] },
+        md: { height: theme.space[GEOMETRY.md.height] }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  track: {
+    width: "100%",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    overflow: "hidden",
+    variants: {
+      size: {
+        sm: { height: theme.space[GEOMETRY.sm.track] },
+        md: { height: theme.space[GEOMETRY.md.track] }
+      },
+      disabled: {}
+    }
+  },
+  fill: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    variants: { size: {}, disabled: {} }
+  },
+  // Tick marks overlaid inside the track (reference sliderCtl line 2294).
+  // `overflow: 'hidden'` on `track` keeps them clipped to the track bounds.
+  ticks: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  tick: {
+    width: theme.space[4],
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border
+  },
+  // Bubble anchor: zero-width column pinned to the bottom of the drag zone.
+  // `alignItems: 'center'` centres the bubble card over the zero-width axis
+  // without knowing the card's intrinsic width.
+  bubbleAnchor: {
+    position: "absolute",
+    bottom: BUBBLE_BOTTOM,
+    width: 0,
+    alignItems: "center"
+  },
+  // The pill-shaped card that floats above the thumb during drag.
+  // Reference sliderCtl line 2292: background var(--text), color var(--bg),
+  // font-size 12px, font-weight 700, padding 4px 9px, border-radius 8px.
+  bubbleCard: {
+    backgroundColor: theme.color.text,
+    borderRadius: theme.radius.sm,
+    paddingVertical: theme.space.s1,
+    paddingHorizontal: theme.space[9]
+  },
+  bubbleText: {
+    color: theme.color.bg,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    lineHeight: theme.type.caption1.lineHeight
+  },
+  thumb: {
+    position: "absolute",
+    top: "50%",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.full,
+    // `0 0 0 1px var(--border)` — a 1px ring that is part of the drawing, so it
+    // uses the static `w1` weight rather than the contrast-reactive hairline.
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    // The reference asks for `0 2px 8px rgba(…,.25)` (`sliderCtl()`, reference
+    // line 2290). That is `shadow.knob` with a wider blur, so only the radius
+    // is overridden — and the *colour* now comes from the theme, which carries
+    // the accent tint `--sh-*` carries on the web. A hardcoded `#000000` here
+    // made the thumb one of the only shadows in the system to ignore the tint.
+    ...theme.shadow.knob,
+    shadowRadius: theme.space[8],
+    elevation: 3,
+    // loam-allow-raw: Android depth between shadow.knob (2) and shadow.md (4).
+    variants: {
+      size: {
+        sm: {
+          width: theme.space[GEOMETRY.sm.thumb],
+          height: theme.space[GEOMETRY.sm.thumb],
+          // Vertical centring only — horizontal offset comes from translateX.
+          marginTop: -theme.space[GEOMETRY.sm.thumb] / 2
+        },
+        md: {
+          width: theme.space[GEOMETRY.md.thumb],
+          height: theme.space[GEOMETRY.md.thumb],
+          // Vertical centring only — horizontal offset comes from translateX.
+          marginTop: -theme.space[GEOMETRY.md.thumb] / 2
+        }
+      },
+      disabled: {}
+    }
+  },
+  value: {
+    minWidth: theme.space[36],
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  // Read-out row: mono `min · value% · max` below the track.
+  readout: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3,
+    textAlign: "center"
+  }
+}));
+
+export { Slider };

package/dist/chunk-H6PC7RDA.js

@@ -0,0 +1 @@
+

package/dist/chunk-HET4LLMX.js

@@ -0,0 +1,129 @@
+import { CardBrandMark, OrDivider } from './chunk-PUPM2YGF.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Skeleton } from './chunk-RIBDXGUG.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 };