@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-UQEN55EY.js

@@ -0,0 +1 @@
+

package/dist/chunk-UQVO6AJV.js

@@ -0,0 +1,171 @@
+import { Image } from './chunk-KZ3X7TSL.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = { seeAll: "See All" };
+var TILE_PX = { sm: 160, md: 200, lg: 280 };
+function TileRail({
+  title,
+  onSeeAll,
+  items,
+  tileWidth = "md",
+  orientation = "horizontal",
+  align = "start",
+  loading = false,
+  loadingCount = 3,
+  platform,
+  labels: labelsProp,
+  testID
+}) {
+  const labels = useLabels("tileRail", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("tile-rail");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const vertical = orientation === "vertical";
+  const flexAlign = align === "center" ? "center" : align === "end" ? "flex-end" : "flex-start";
+  const width = TILE_PX[tileWidth];
+  const gap = android ? theme.space[8] : theme.space[12];
+  const inset = theme.space[16];
+  const Wrapper = vertical ? View : ScrollView;
+  const tileW = vertical ? void 0 : width;
+  const titleType = android ? resolveTextRole(theme, "titleLarge", true) : { ...resolveTextRole(theme, "title2", false), fontWeight: theme.fontWeight.bold };
+  return /* @__PURE__ */ jsxs(View, { testID, style: styles.rail, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.header, { paddingHorizontal: inset }], children: [
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: [styles.title, titleType], children: title }),
+      onSeeAll ? android ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: title,
+          onPress: onSeeAll,
+          android_ripple: { color: theme.state.pressed, borderless: true },
+          style: styles.arrow,
+          children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.md, color: theme.color.text })
+        }
+      ) : /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: onSeeAll, hitSlop: theme.space[12], children: ({ pressed }) => /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.seeAll,
+            resolveTextRole(theme, "body", false),
+            pressed ? { opacity: theme.opacity[38] } : null
+          ],
+          children: labels.seeAll
+        }
+      ) }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Wrapper,
+      {
+        ...vertical ? {
+          role: "list",
+          accessibilityState: { busy: loading },
+          style: { paddingHorizontal: inset, gap, alignItems: flexAlign }
+        } : {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          decelerationRate: "fast",
+          snapToInterval: width + gap,
+          snapToAlignment: "start",
+          accessibilityRole: "list",
+          accessibilityState: { busy: loading },
+          contentContainerStyle: {
+            paddingHorizontal: inset,
+            gap,
+            flexGrow: 1,
+            justifyContent: flexAlign
+          }
+        },
+        children: loading ? Array.from({ length: loadingCount }, (_, i) => /* @__PURE__ */ jsxs(
+          View,
+          {
+            role: "listitem",
+            style: [styles.tile, tileW ? { width: tileW } : styles.tileFill],
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(View, { style: styles.media }),
+              /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+                /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: Math.round(width * 0.7), decorative: true }),
+                /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: Math.round(width * 0.45), height: 8, decorative: true })
+              ] })
+            ]
+          },
+          i
+        )) : items.map((item) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: item.onPress ? "button" : void 0,
+            accessibilityLabel: [item.title, item.meta].filter(Boolean).join(", "),
+            onPress: item.onPress,
+            disabled: !item.onPress,
+            android_ripple: android ? { color: theme.state.pressed, foreground: true } : void 0,
+            style: ({ pressed }) => [
+              styles.tile,
+              tileW ? { width: tileW } : styles.tileFill,
+              !android && pressed ? { backgroundColor: theme.state.pressed } : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: styles.media, children: item.media ?? (item.image !== void 0 ? /* @__PURE__ */ jsx(Image, { src: item.image, alt: item.imageAlt, ratio: 4 / 3 }) : null) }),
+              /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.tileTitle, children: item.title }),
+                item.meta !== void 0 ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.meta, children: item.meta }) : null
+              ] })
+            ]
+          }
+        ) }, item.id))
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  rail: { gap: theme.space[12] },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    minHeight: theme.space[28]
+  },
+  title: { flex: 1, fontFamily: theme.font.sans, color: theme.color.text },
+  seeAll: { fontFamily: theme.font.sans, color: theme.color.accentStrong },
+  arrow: {
+    width: theme.space[48],
+    height: theme.space[48],
+    marginVertical: -theme.space[10],
+    marginEnd: -theme.space[12],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  tile: {
+    overflow: "hidden",
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  tileFill: { alignSelf: "stretch" },
+  media: { aspectRatio: 4 / 3, overflow: "hidden", backgroundColor: theme.color.surface3 },
+  body: { padding: theme.space[12], gap: theme.space[4] },
+  tileTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: Math.round(theme.fontSize[14] * 1.3),
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: Math.round(theme.fontSize[12] * 1.3),
+    color: theme.color.text2
+  }
+}));
+
+export { TileRail };

package/dist/chunk-VFDQAAIW.js

@@ -0,0 +1,351 @@
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TRACK = {
+  ios: { sm: { width: 40, height: 24 }, md: { width: 52, height: 32 } },
+  // loam-allow-raw: ramp keys
+  android: { sm: { width: 40, height: 18 }, md: { width: 52, height: 22 } }
+  // loam-allow-raw: ramp keys
+};
+var STRETCH = { sm: 4, md: 6 };
+var HALO = 40;
+var IOS_PAD = 2;
+var ANDROID_OVERHANG = 4;
+var HEAVY_SHADOW_RATIO = 1.2;
+function knobShadow(theme, os) {
+  if (os === "ios") return theme.shadow.knob;
+  return {
+    ...theme.shadow.knob,
+    shadowOffset: { width: 0, height: theme.space[2] },
+    shadowOpacity: theme.shadow.knob.shadowOpacity * HEAVY_SHADOW_RATIO,
+    shadowRadius: theme.space[6],
+    elevation: 3
+    // loam-allow-raw: Android depth between shadow.knob (2) and shadow.md (4).
+  };
+}
+function geometry(theme, os, size) {
+  const spec = TRACK[os][size];
+  const width = theme.space[spec.width];
+  const height = theme.space[spec.height];
+  const pad = theme.space[IOS_PAD];
+  if (os === "ios") {
+    const knob2 = height - 2 * pad;
+    return { width, height, pad, knob: knob2, travel: width - 2 * pad - knob2 };
+  }
+  const knob = height + theme.space[ANDROID_OVERHANG];
+  return { width, height, pad: 0, knob, travel: width - knob };
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme("switch");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+var DEFAULT_LABELS = {
+  loading: "Loading"
+};
+function Switch({
+  value,
+  defaultValue = false,
+  onValueChange,
+  size = "md",
+  platform,
+  disabled = false,
+  pending = false,
+  failed = false,
+  motion = "full",
+  accessibilityLabel,
+  decorative = false,
+  tone = "accent",
+  variant,
+  labels: labelsProp,
+  hint
+}) {
+  const labels = useLabels("switch", DEFAULT_LABELS, labelsProp);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const checked = isControlled ? value : internal;
+  const theme = useLoamTheme("switch");
+  const os = useResolvedPlatform(platform);
+  const shape = `${os}-${size}`;
+  const { styles } = useStyles(sheet, { shape, disabled });
+  const { travel, width: trackW, height: trackH } = geometry(theme, os, size);
+  const slopX = Math.max(0, (theme.tapMin - trackW) / 2);
+  const slopY = Math.max(0, (theme.tapMin - trackH) / 2);
+  const resolved = useResolvedMotion(motion, "switch");
+  const tint = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const slide = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
+  React.useEffect(() => {
+    const to = checked ? 1 : 0;
+    if (resolved === "none") {
+      tint.setValue(to);
+    } else {
+      Animated.timing(tint, {
+        toValue: to,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.base),
+        // Colour interpolation cannot run on the native driver.
+        useNativeDriver: false
+      }).start();
+    }
+    if (resolved === "full") {
+      Animated.timing(slide, {
+        toValue: to,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: true
+      }).start();
+    } else {
+      slide.setValue(to);
+    }
+  }, [checked, resolved, tint, slide, theme.duration.base, theme.easing.base, theme.easing.spring]);
+  const onFill = theme.color[tone];
+  const onSoft = theme.color[`${tone}Soft`];
+  const solidOn = (variant ?? (os === "ios" ? "solid" : "soft")) === "solid";
+  const trackColor = tint.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.color.surface3, solidOn ? onFill : onSoft]
+  });
+  const softEdge = tint.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["transparent", onFill]
+  });
+  const edgeOpacity = tint.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
+  const [pressed, setPressed] = React.useState(false);
+  const stretch = React.useRef(new Animated.Value(0)).current;
+  const stretchBy = theme.space[STRETCH[size]];
+  const onPressState = (down) => {
+    if (disabled || pending) return;
+    setPressed(down);
+    if (os !== "ios") return;
+    if (resolved !== "full") return;
+    Animated.timing(stretch, {
+      toValue: down ? 1 : 0,
+      duration: theme.duration.fast,
+      easing: Easing.bezier(...theme.easing.base),
+      // Width cannot run on the native driver.
+      useNativeDriver: false
+    }).start();
+  };
+  const knobW = Animated.add(knobSize(theme, os, size), Animated.multiply(stretch, stretchBy));
+  const knobShift = Animated.multiply(stretch, checked ? -stretchBy : 0);
+  const knobColor = pending ? theme.color.knob : os === "ios" && solidOn ? theme.color.knob : tint.interpolate({
+    inputRange: [0, 1],
+    outputRange: [os === "ios" ? theme.color.knob : theme.color.text3, solidOn ? theme.color.knob : onFill]
+  });
+  const translateX = slide.interpolate({
+    inputRange: [0, 1],
+    // The knob travels toward the end edge; only the sign of an X translation
+    // needs mirroring by hand.
+    outputRange: [0, theme.rtl ? -travel : travel]
+  });
+  const shake = React.useRef(new Animated.Value(0)).current;
+  const wasFailed = React.useRef(false);
+  React.useEffect(() => {
+    if (failed && !wasFailed.current && resolved === "full") {
+      const step = theme.space[4];
+      const d = Math.max(1, Math.round(theme.duration.fast / 4));
+      Animated.sequence(
+        [-step, step, -step, 0].map(
+          (toValue) => Animated.timing(shake, { toValue, duration: d, useNativeDriver: true })
+        )
+      ).start();
+    }
+    wasFailed.current = failed;
+  }, [failed, resolved, shake, theme.space, theme.duration.fast]);
+  const focusRing = useFocusRing(theme.radius.full);
+  const toggle = () => {
+    const next = !checked;
+    if (!isControlled) setInternal(next);
+    haptics.impact("medium");
+    onValueChange?.(next);
+  };
+  const visual = /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      testID: "switch-track",
+      style: [
+        styles.track,
+        { backgroundColor: trackColor },
+        variant === "soft" ? { borderWidth: theme.borderWidth.thin, borderColor: softEdge } : null
+      ],
+      children: [
+        os === "ios" ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "switch-edge",
+            pointerEvents: "none",
+            style: [styles.edge, { opacity: edgeOpacity }]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles.knobSlot, { transform: [{ translateX }] }], children: [
+          os === "android" && pressed ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "switch-halo",
+              pointerEvents: "none",
+              style: [styles.halo, { backgroundColor: theme.state.pressed }]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "switch-knob",
+              style: [
+                styles.knob,
+                pending && styles.knobBusy,
+                { backgroundColor: knobColor },
+                os === "ios" && { width: knobW, marginStart: knobShift }
+              ],
+              children: pending ? (
+                // Hidden from assistive tech — the switch's own `busy` state carries
+                // the meaning, so the nested progressbar is suppressed.
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    testID: "switch-spinner",
+                    style: styles.spinner,
+                    "aria-hidden": true,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    children: /* @__PURE__ */ jsx(
+                      Spinner,
+                      {
+                        size: "sm",
+                        color: theme.color.accent,
+                        motion,
+                        accessibilityLabel: labels.loading
+                      }
+                    )
+                  }
+                )
+              ) : null
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (decorative) {
+    return /* @__PURE__ */ jsx(View, { accessible: false, style: styles.decorative, children: visual });
+  }
+  const control = /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "switch",
+      accessibilityLabel,
+      accessibilityState: { checked, disabled, busy: pending },
+      "aria-checked": checked,
+      "aria-busy": pending || void 0,
+      "aria-invalid": failed || void 0,
+      disabled,
+      onPress: disabled || pending ? void 0 : toggle,
+      onPressIn: () => onPressState(true),
+      onPressOut: () => onPressState(false),
+      hitSlop: { top: slopY, bottom: slopY, left: slopX, right: slopX },
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: focusRing.style,
+      children: /* @__PURE__ */ jsx(Animated.View, { testID: "switch-shake", style: { transform: [{ translateX: shake }] }, children: visual })
+    }
+  );
+  if (!hint) return control;
+  return /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+    control,
+    /* @__PURE__ */ jsx(FieldMessage, { children: hint })
+  ] });
+}
+function trackStyle(theme, os, size) {
+  const g = geometry(theme, os, size);
+  return { width: g.width, height: g.height, padding: g.pad };
+}
+function knobSize(theme, os, size) {
+  return geometry(theme, os, size).knob;
+}
+function knobStyle(theme, os, size) {
+  const g = geometry(theme, os, size);
+  return { width: g.knob, height: g.knob, ...knobShadow(theme, os) };
+}
+var sheet = createStyleSheet((theme) => ({
+  // Decorative glyph wrapper: inert to touch so an owning ancestor keeps the press.
+  decorative: { pointerEvents: "none" },
+  // Switch + helper text, only when a `hint` is set.
+  field: { gap: theme.space.s1, alignItems: "flex-start" },
+  track: {
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    variants: {
+      shape: {
+        "ios-sm": trackStyle(theme, "ios", "sm"),
+        "ios-md": trackStyle(theme, "ios", "md"),
+        "android-sm": trackStyle(theme, "android", "sm"),
+        "android-md": trackStyle(theme, "android", "md")
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  // The iOS off edge: 1.5 `borderStrong`, drawn over the track so it never
+  // moves the knob.
+  edge: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong
+  },
+  // The Material state layer, centred on the thumb.
+  halo: {
+    position: "absolute",
+    width: HALO,
+    height: HALO,
+    borderRadius: HALO / 2,
+    alignSelf: "center"
+  },
+  // The Android knob overhangs its track, so it is centred out of flow.
+  knobSlot: {
+    justifyContent: "center",
+    alignItems: "center",
+    variants: {
+      shape: {
+        "ios-sm": {},
+        "ios-md": {},
+        "android-sm": { position: "absolute", start: 0 },
+        "android-md": { position: "absolute", start: 0 }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // Centre the pending spinner inside the knob disc.
+  knobBusy: { alignItems: "center", justifyContent: "center" },
+  // The spinner is decorative — inert to touch so the knob keeps the press.
+  spinner: { pointerEvents: "none" },
+  knob: {
+    borderRadius: theme.radius.full,
+    variants: {
+      shape: {
+        "ios-sm": knobStyle(theme, "ios", "sm"),
+        "ios-md": knobStyle(theme, "ios", "md"),
+        "android-sm": knobStyle(theme, "android", "sm"),
+        "android-md": knobStyle(theme, "android", "md")
+      },
+      disabled: { true: {}, false: {} }
+    }
+  }
+}));
+
+export { Switch };

package/dist/chunk-VIUE3VQT.js

@@ -0,0 +1 @@
+