@btndprojects/loam-ui-native 0.2.1 → 0.3.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-FZGAAOKS.js → chunk-VFDQAAIW.js}

@@ -1,11 +1,13 @@
-import { Spinner } from './chunk-KQZ3GLHR.js';
+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 { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var TRACK = {
   ios: { sm: { width: 40, height: 24 }, md: { width: 52, height: 32 } },
@@ -13,6 +15,8 @@ var TRACK = {
   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;
@@ -61,7 +65,10 @@ function Switch({
   motion = "full",
   accessibilityLabel,
   decorative = false,
-  labels: labelsProp
+  tone = "accent",
+  variant,
+  labels: labelsProp,
+  hint
 }) {
   const labels = useLabels("switch", DEFAULT_LABELS, labelsProp);
   const isControlled = value !== void 0;
@@ -101,13 +108,39 @@ function Switch({
       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, os === "ios" ? theme.color.good : theme.color.accentSoft]
+    outputRange: [theme.color.surface3, solidOn ? onFill : onSoft]
   });
-  const knobColor = pending ? theme.color.knob : os === "ios" ? theme.color.knob : tint.interpolate({
+  const softEdge = tint.interpolate({
     inputRange: [0, 1],
-    outputRange: [theme.color.text3, theme.color.accent]
+    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],
@@ -129,46 +162,83 @@ function Switch({
     }
     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__ */ jsx(Animated.View, { style: [styles.track, { backgroundColor: trackColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.knobSlot, { transform: [{ translateX }] }], children: /* @__PURE__ */ jsx(
+  const visual = /* @__PURE__ */ jsxs(
     Animated.View,
     {
-      testID: "switch-knob",
-      style: [styles.knob, pending && styles.knobBusy, { backgroundColor: knobColor }],
-      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-track",
+      style: [
+        styles.track,
+        { backgroundColor: trackColor },
+        variant === "soft" ? { borderWidth: theme.borderWidth.thin, borderColor: softEdge } : null
+      ],
+      children: [
+        os === "ios" ? /* @__PURE__ */ jsx(
+          Animated.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
-              }
-            )
+            testID: "switch-edge",
+            pointerEvents: "none",
+            style: [styles.edge, { opacity: edgeOpacity }]
           }
-        )
-      ) : null
+        ) : 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 });
   }
-  return /* @__PURE__ */ jsx(
+  const control = /* @__PURE__ */ jsx(
     Pressable,
     {
       accessibilityRole: "switch",
@@ -179,15 +249,28 @@ function Switch({
       "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) };
@@ -195,6 +278,8 @@ function knobStyle(theme, os, size) {
 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,
@@ -211,9 +296,30 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
+  // 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": {},

package/dist/chunk-VIUE3VQT.js

@@ -0,0 +1 @@
+