@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-CYRBHQQZ.js → chunk-TUL5RUIA.js}

@@ -1,6 +1,8 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable, Animated, Easing, PanResponder } from 'react-native';
+import { Animated, View, Text, Pressable, Platform, Easing, PanResponder } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -19,29 +21,62 @@ var SEVERITY_DURATION = {
 function severityColors(theme, severity) {
   switch (severity) {
     case "success":
-      return { glyph: theme.color.goodOnSoft, soft: theme.color.goodSoft, edge: theme.edge.good };
+      return {
+        accent: theme.color.good,
+        glyph: theme.color.goodOnSoft,
+        soft: theme.color.goodSoft,
+        edge: theme.edge.good
+      };
     case "warning":
-      return { glyph: theme.color.warnOnSoft, soft: theme.color.warnSoft, edge: theme.edge.warn };
+      return {
+        accent: theme.color.warn,
+        glyph: theme.color.warnOnSoft,
+        soft: theme.color.warnSoft,
+        edge: theme.edge.warn
+      };
     case "error":
       return {
+        accent: theme.color.danger,
         glyph: theme.color.dangerOnSoft,
         soft: theme.color.dangerSoft,
         edge: theme.edge.danger
       };
     default:
-      return { glyph: theme.color.infoOnSoft, soft: theme.color.infoSoft, edge: theme.edge.info };
+      return {
+        accent: theme.color.info,
+        glyph: theme.color.infoOnSoft,
+        soft: theme.color.infoSoft,
+        edge: theme.edge.info
+      };
   }
 }
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss"
+};
 function ToastCard({
   message,
+  description,
   severity = "info",
   action,
   countdown,
-  onPress
+  onPress,
+  labels: labelsProp,
+  platform,
+  variant = "default",
+  size = "md",
+  dismissible = true,
+  motion = "full"
 }) {
+  const labels = useLabels("toast", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("toast");
   const colors = severityColors(theme, severity);
+  const level = useResolvedMotion(motion, "toast");
+  const pressScale = React.useRef(new Animated.Value(1)).current;
+  const pressTo = (to) => {
+    if (level !== "full") return;
+    Animated.spring(pressScale, { toValue: to, ...springConfig(theme, "fs"), useNativeDriver: true }).start();
+  };
   const actionHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   const copy = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -50,41 +85,97 @@ function ToastCard({
         style: [styles.disc, { backgroundColor: colors.soft, borderColor: colors.edge }],
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
-        children: /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[severity], size: theme.icon.sm, color: colors.glyph })
+        children: /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[severity], size: theme.space[18], color: colors.glyph })
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.message, children: message })
-  ] });
-  return /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-      onPress ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: "Dismiss",
-          onPress,
-          style: styles.copyRegion,
-          children: copy
-        }
-      ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
-      action ? /* @__PURE__ */ jsx(
-        Pressable,
+    /* @__PURE__ */ jsxs(View, { style: styles.textCol, children: [
+      /* @__PURE__ */ jsx(
+        Text,
         {
-          accessibilityRole: "button",
-          accessibilityLabel: action.label,
-          onPress: action.onPress,
-          hitSlop: actionHitSlop,
-          style: styles.action,
-          children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
+          style: [
+            styles.message,
+            isAndroid(theme, platform) && { fontWeight: theme.fontWeight.regular }
+          ],
+          children: message
         }
-      ) : null
-    ] }),
-    countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
+      ),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+    ] })
   ] });
+  return (
+    // No start bar (F8): the disc carries the tone, its edge in high contrast.
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        style: [
+          styles.card,
+          variant === "soft" ? { backgroundColor: colors.soft, borderColor: colors.edge } : null,
+          onPress && level === "full" ? { transform: [{ scale: pressScale }] } : null
+        ],
+        children: [
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: [
+                styles.body,
+                size === "compact" ? { paddingVertical: theme.space.s2 } : null,
+                countdown ? styles.bodyTimed : null
+              ],
+              children: [
+                onPress ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: description ? `${message}. ${description}` : message,
+                    onPress,
+                    onPressIn: () => pressTo(PRESS_SCALE),
+                    onPressOut: () => pressTo(1),
+                    style: styles.copyRegion,
+                    children: copy
+                  }
+                ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
+                action ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: action.label,
+                    onPress: action.onPress,
+                    hitSlop: actionHitSlop,
+                    style: ({ pressed }) => [styles.action, pressed && styles.actionPressed],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
+                  }
+                ) : null,
+                onPress && dismissible ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: labels.dismiss,
+                    onPress,
+                    hitSlop: Math.max(0, Math.round((theme.tapMin - theme.space[26]) / 2)),
+                    style: ({ pressed }) => [styles.dismiss, pressed && styles.actionPressed],
+                    children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[16], color: theme.color.text3 })
+                  }
+                ) : null
+              ]
+            }
+          ),
+          countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
+        ]
+      }
+    )
+  );
+}
+var PRESS_SCALE = 0.98;
+function isAndroid(theme, platform) {
+  if (platform) return platform === "android";
+  if (Platform.OS === "android") return true;
+  if (Platform.OS === "ios") return false;
+  return theme.platform === "Android";
 }
 var TRAVEL = 12;
 function Toast({
   message,
+  description,
   severity = "info",
   action,
   open = true,
@@ -92,10 +183,19 @@ function Toast({
   onDismiss,
   countdown = false,
   motion = "full",
-  safeAreaTop = 0
+  safeAreaTop = 0,
+  safeAreaBottom = 0,
+  platform,
+  labels,
+  variant,
+  size,
+  dismissible
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("toast");
   const { styles } = useStyles(sheet);
+  const android = isAndroid(theme, platform);
+  const androidRef = React.useRef(android);
+  androidRef.current = android;
   const reduced = theme.reduceMotion || motion === "reduced";
   const instant = motion === "none";
   const offset = reduced || instant ? 0 : TRAVEL;
@@ -173,13 +273,14 @@ function Toast({
   const pan = React.useRef(
     // eslint-disable-next-line loam/no-pan-responder
     PanResponder.create({
-      onMoveShouldSetPanResponder: (_e, g) => g.dy < -2 && Math.abs(g.dy) > Math.abs(g.dx),
+      onMoveShouldSetPanResponder: (_e, g) => androidRef.current ? Math.abs(g.dx) > 2 && Math.abs(g.dx) > Math.abs(g.dy) : g.dy < -2 && Math.abs(g.dy) > Math.abs(g.dx),
       onPanResponderMove: (_e, g) => {
-        const up = Math.min(0, g.dy);
-        progress.setValue(Math.max(0, 1 + up / 80));
+        const travel = androidRef.current ? -Math.abs(g.dx) : Math.min(0, g.dy);
+        progress.setValue(Math.max(0, 1 + travel / 80));
       },
       onPanResponderRelease: (_e, g) => {
-        if (g.dy < -32 || g.vy < -0.5) {
+        const past = androidRef.current ? Math.abs(g.dx) > 32 || Math.abs(g.vx) > 0.5 : g.dy < -32 || g.vy < -0.5;
+        if (past) {
           requestDismiss();
         } else {
           Animated.timing(progress, {
@@ -194,7 +295,7 @@ function Toast({
   ).current;
   const translateY = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-offset, 0]
+    outputRange: [android ? offset : -offset, 0]
   });
   const bar = showCountdown ? /* @__PURE__ */ jsx(
     Animated.View,
@@ -202,7 +303,7 @@ function Toast({
       style: [
         styles.countdownBar,
         {
-          backgroundColor: severityColors(theme, severity).edge,
+          backgroundColor: severityColors(theme, severity).accent,
           transform: [{ translateX: countdownX }]
         }
       ]
@@ -211,7 +312,7 @@ function Toast({
   return /* @__PURE__ */ jsx(
     View,
     {
-      style: [styles.root, { paddingTop: safeAreaTop + theme.space.s2 }],
+      style: android ? [styles.root, styles.rootBottom, { paddingBottom: safeAreaBottom + theme.space.s4 }] : [styles.root, { paddingTop: safeAreaTop + theme.space.s2 }],
       pointerEvents: "box-none",
       children: /* @__PURE__ */ jsx(
         Animated.View,
@@ -226,10 +327,17 @@ function Toast({
             ToastCard,
             {
               message,
+              description,
               severity,
               action,
               countdown: bar,
-              onPress: requestDismiss
+              onPress: requestDismiss,
+              labels,
+              platform: android ? "android" : "ios",
+              variant,
+              size,
+              dismissible,
+              motion
             }
           )
         }
@@ -244,6 +352,7 @@ var nextId = () => `loam-toast-${++idCounter}`;
 function ToastProvider({
   children,
   safeAreaTop = 0,
+  safeAreaBottom = 0,
   motion = "full"
 }) {
   const [queue, setQueue] = React.useState([]);
@@ -305,12 +414,17 @@ function ToastProvider({
       {
         open: current.open,
         message: current.message,
+        description: current.description,
         severity: current.severity,
         action: current.action,
         duration: current.duration,
         countdown: current.countdown,
+        variant: current.variant,
+        size: current.size,
+        dismissible: current.dismissible,
         motion,
         safeAreaTop,
+        safeAreaBottom,
         onDismiss: () => close(current.id)
       },
       current.id
@@ -324,6 +438,9 @@ function useToast() {
   }
   return ctx;
 }
+function useOptionalToast() {
+  return React.useContext(ToastContext);
+}
 var TOAST_MAX_W = 480;
 var sheet = createStyleSheet((theme) => ({
   // Full-bleed top overlay; `box-none` so touches pass through the empty gutters.
@@ -336,14 +453,15 @@ var sheet = createStyleSheet((theme) => ({
     paddingHorizontal: theme.space.s4,
     alignItems: "center"
   },
+  rootBottom: { top: void 0, bottom: 0 },
   animated: {
     width: "100%",
     maxWidth: TOAST_MAX_W
   },
   // The surface card. `overflow: hidden` clips the countdown bar to the radius.
   card: {
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
     borderColor: theme.color.border,
     backgroundColor: theme.color.surface,
     overflow: "hidden",
@@ -354,8 +472,11 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space.s3,
     paddingVertical: theme.space.s3,
-    paddingHorizontal: theme.space.s4
+    paddingStart: theme.space.s3,
+    paddingEnd: theme.space[6]
   },
+  // The timer line sits 6 above the edge; the card owes it 16 below.
+  bodyTimed: { paddingBottom: theme.space[16] },
   // The tap-to-dismiss region: icon + message. `flex: 1` lets it absorb the
   // width so the action sits flush at the trailing edge.
   copyRegion: {
@@ -369,43 +490,64 @@ var sheet = createStyleSheet((theme) => ({
     width: theme.space[32],
     height: theme.space[32],
     borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
+    borderWidth: theme.borderWidth.thin,
     alignItems: "center",
     justifyContent: "center"
   },
   // `flex: 1` + `minWidth: 0` lets the message wrap instead of shoving the action off-card.
   message: {
-    flex: 1,
-    minWidth: 0,
     fontFamily: theme.font.sans,
-    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
     lineHeight: theme.type.subheadline.lineHeight,
     color: theme.color.text
   },
+  textCol: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  dismiss: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    borderRadius: theme.ctl.r.xs,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // A ghost sm Button: ctl.sm tall, r sm, state-hover on press.
   action: {
     flexShrink: 0,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space.s1,
+    minHeight: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[10],
     borderRadius: theme.radius.sm
   },
+  actionPressed: { backgroundColor: theme.state.hover },
   actionLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.footnote.fontSize,
     color: theme.color.accentStrong
   },
+  // A 2 px tone line, inset 12 / 6 on a surface-3 track, so nothing runs along
+  // the rounded edge (G13 S1).
   countdownTrack: {
     position: "absolute",
-    bottom: 0,
-    start: 0,
-    end: 0,
-    height: theme.space[3],
+    bottom: theme.space[6],
+    start: theme.space[12],
+    end: theme.space[12],
+    height: theme.space[2],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
     overflow: "hidden"
   },
   countdownBar: {
     width: "100%",
-    height: theme.space[3]
+    height: theme.space[2],
+    borderRadius: theme.radius.full
   }
 }));
 
-export { SEVERITY_DURATION, Toast, ToastCard, ToastProvider, useToast };
+export { SEVERITY_DURATION, Toast, ToastCard, ToastProvider, useOptionalToast, useToast };

package/dist/{chunk-4ZAHCY44.js → chunk-TYOSA7JG.js}

@@ -1,9 +1,15 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, Easing, Pressable, View, Text, AccessibilityInfo } from 'react-native';
+import { Animated, Easing, Pressable, View, ActivityIndicator, Text, AccessibilityInfo } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  copy: "Copy",
+  copied: "Copied"
+};
 function CopyButton({
   onCopy,
   label,
@@ -11,13 +17,22 @@ function CopyButton({
   size = "sm",
   timeout = 2e3,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  disabled = false,
+  fullWidth = false,
+  tone = "neutral",
+  loading = false,
+  leading,
+  trailing,
+  labels: labelsProp
 }) {
+  const labels = useLabels("copyButton", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { variant, size });
-  const theme = useLoamTheme();
-  const fg = theme.color.text;
+  const theme = useLoamTheme("copy-button");
+  const fg = tone === "accent" ? theme.color.accentStrong : tone === "good" ? theme.color.goodOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.danger : theme.color.text;
   const iconSize = theme.ctl.icon[size];
   const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const android = isAndroidIdiom(theme);
   const reduced = theme.reduceMotion || motion === "reduced" || motion === "none";
   const [copied, setCopied] = React.useState(false);
   const timer = React.useRef();
@@ -43,9 +58,10 @@ function CopyButton({
     bounciness: 6
   }).start();
   const handlePress = () => {
+    if (loading) return;
     onCopy?.();
     setCopied(true);
-    AccessibilityInfo.announceForAccessibility("Copied");
+    AccessibilityInfo.announceForAccessibility(labels.copied);
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setCopied(false), timeout);
   };
@@ -58,38 +74,58 @@ function CopyButton({
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: accessibilityLabel ?? label ?? "Copy",
-      onPress: handlePress,
-      onPressIn: () => press(0.97),
-      onPressOut: () => press(1),
+      accessibilityLabel: accessibilityLabel ?? label ?? labels.copy,
+      accessibilityState: { disabled, busy: loading },
+      "aria-disabled": disabled || void 0,
+      disabled,
+      onPress: disabled ? void 0 : handlePress,
+      onPressIn: disabled || android ? void 0 : () => press(0.97),
+      onPressOut: disabled || android ? void 0 : () => press(1),
       hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale: pressScale }] }], children: [
-        /* @__PURE__ */ jsxs(View, { style: glyphBox, children: [
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              testID: "copy-glyph",
-              style: [
-                styles.glyph,
-                reduced ? { opacity: copied ? 0 : 1 } : { opacity: copyOpacity, transform: [{ scale: copyScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: iconSize, color: fg })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              testID: "check-glyph",
-              style: [
-                styles.glyph,
-                reduced ? { opacity: copied ? 1 : 0 } : { opacity: checkOpacity, transform: [{ scale: checkScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg })
-            }
-          )
-        ] }),
-        label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null
-      ] })
+      android_ripple: android && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        android ? { borderRadius: theme.ctl.r[size], overflow: "hidden" } : null,
+        fullWidth ? { alignSelf: "stretch" } : null
+      ],
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            { transform: [{ scale: pressScale }] },
+            disabled ? { opacity: theme.state.disabledOpacity } : null
+          ],
+          children: [
+            leading,
+            /* @__PURE__ */ jsx(View, { style: glyphBox, children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: "Loading" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  testID: "copy-glyph",
+                  style: [
+                    styles.glyph,
+                    reduced ? { opacity: copied ? 0 : 1 } : { opacity: copyOpacity, transform: [{ scale: copyScale }] }
+                  ],
+                  children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: iconSize, color: fg })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  testID: "check-glyph",
+                  style: [
+                    styles.glyph,
+                    reduced ? { opacity: copied ? 1 : 0 } : { opacity: checkOpacity, transform: [{ scale: checkScale }] }
+                  ],
+                  children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg })
+                }
+              )
+            ] }) }),
+            label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null,
+            trailing
+          ]
+        }
+      )
     }
   );
 }

package/dist/chunk-TYQTMMEV.js

@@ -0,0 +1 @@
+