@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-KZ3X7TSL.js

@@ -0,0 +1,196 @@
+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 { motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, Animated, View, Pressable, Text, Image as Image$1 } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/blurhash.ts
+var DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+function decode83(str) {
+  let value = 0;
+  for (const c of str) {
+    const digit = DIGITS.indexOf(c);
+    if (digit < 0) throw new Error("blurhash: invalid character");
+    value = value * 83 + digit;
+  }
+  return value;
+}
+function blurhashAverage(hash) {
+  if (hash.length < 6) return void 0;
+  try {
+    const v = decode83(hash.slice(2, 6));
+    return `rgb(${v >> 16} ${v >> 8 & 255} ${v & 255})`;
+  } catch {
+    return void 0;
+  }
+}
+var DEFAULT_LABELS = { error: "Couldn\u2019t load", retry: "Retry" };
+var SMALL_W = 96;
+function Image({
+  src,
+  fallbackSrc,
+  alt,
+  ratio,
+  fit = "cover",
+  placeholder,
+  inactive = false,
+  onError,
+  onLoad,
+  platform,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("image", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("image");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const sources = React.useMemo(
+    () => [src, ...fallbackSrc ?? []].filter((s) => !!s),
+    [src, fallbackSrc]
+  );
+  const [index, setIndex] = React.useState(0);
+  const [attempt, setAttempt] = React.useState(0);
+  const [status, setStatus] = React.useState(sources.length ? "loading" : "missing");
+  const [size, setSize] = React.useState();
+  const width = size?.width;
+  const [showAlt, setShowAlt] = React.useState(false);
+  const fade = React.useRef(new Animated.Value(0)).current;
+  const key = sources.join("\n");
+  React.useEffect(() => {
+    setIndex(0);
+    setStatus(sources.length ? "loading" : "missing");
+    fade.setValue(0);
+  }, [key]);
+  const retry = () => {
+    setIndex(0);
+    setAttempt((a) => a + 1);
+    setStatus("loading");
+    setShowAlt(false);
+    fade.setValue(0);
+  };
+  const handleError = () => {
+    if (index + 1 < sources.length) {
+      setIndex(index + 1);
+      return;
+    }
+    setStatus("error");
+    onError?.();
+  };
+  const handleLoad = () => {
+    setStatus("loaded");
+    onLoad?.();
+    Animated.timing(fade, {
+      toValue: 1,
+      ...motionTiming(theme.reduceMotion ? "none" : "full"),
+      useNativeDriver: true
+    }).start();
+  };
+  const small = width !== void 0 && width < SMALL_W;
+  const current = sources[index];
+  let placeholderNode = null;
+  let placeholderColor;
+  if (placeholder === "skeleton") {
+    placeholderNode = /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, children: size ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: size.width, height: size.height, style: { borderRadius: 0 } }) : null });
+  } else if (placeholder && typeof placeholder === "object" && "color" in placeholder) {
+    placeholderColor = placeholder.color;
+  } else if (placeholder && typeof placeholder === "object" && "blurhash" in placeholder) {
+    placeholderColor = blurhashAverage(placeholder.blurhash);
+  } else if (placeholder != null) {
+    placeholderNode = placeholder;
+  }
+  const boxStyle = [
+    styles.box,
+    ratio ? { aspectRatio: ratio } : null,
+    status === "loading" && placeholderColor ? { backgroundColor: placeholderColor } : null,
+    style
+  ];
+  const onLayout = (e) => setSize({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        testID,
+        accessibilityRole: "button",
+        accessibilityLabel: [labels.error, alt].filter(Boolean).join(", "),
+        accessibilityHint: labels.retry,
+        onPress: retry,
+        onLongPress: () => setShowAlt(true),
+        android_ripple: android ? { color: theme.state.pressed, foreground: true } : void 0,
+        onLayout,
+        style: ({ pressed }) => [
+          boxStyle,
+          styles.center,
+          !android && pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: small && showAlt && alt ? /* @__PURE__ */ jsx(Text, { numberOfLines: 3, style: styles.errorAlt, children: alt }) : small ? /* @__PURE__ */ jsx(Icon, { name: "image", size: 16, color: theme.color.text3 }) : /* @__PURE__ */ jsxs(View, { style: styles.errorBody, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "image", size: 24, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.errorTitle, children: labels.error }),
+          alt ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.errorAlt, children: alt }) : null
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { testID, onLayout, style: boxStyle, children: [
+    status === "loading" ? placeholderNode : null,
+    status === "missing" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.center], accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(Icon, { name: "image", size: small ? 16 : 24, color: theme.color.text3 }) }) : null,
+    current ? /* @__PURE__ */ jsxs(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: fade }], children: [
+      /* @__PURE__ */ jsx(
+        Image$1,
+        {
+          source: { uri: current },
+          resizeMode: fit,
+          accessible: !!alt,
+          accessibilityRole: alt ? "image" : void 0,
+          accessibilityLabel: alt || void 0,
+          onLoad: handleLoad,
+          onError: handleError,
+          style: StyleSheet.absoluteFill
+        },
+        `${current}#${attempt}`
+      ),
+      inactive ? /* @__PURE__ */ jsx(View, { testID: "image-inactive", style: styles.inactive }) : null
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  box: {
+    overflow: "hidden",
+    backgroundColor: theme.color.surface3
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  errorBody: {
+    alignItems: "center",
+    gap: theme.space[4],
+    paddingHorizontal: theme.space[12]
+  },
+  errorTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  errorAlt: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3,
+    textAlign: "center"
+  },
+  // RN has no CSS filter on every platform: a neutral overlay blended in
+  // `saturation` mode drops the picture's chroma, the web's greyscale (A07).
+  inactive: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.color.surface2,
+    mixBlendMode: "saturation"
+  }
+}));
+
+export { Image };

package/dist/{chunk-5UTRIXQ6.js → chunk-L2WMOA2V.js}

@@ -1,8 +1,11 @@
 import { resolveStepState } from './chunk-YLLCXTMC.js';
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, Easing, View, Text } from 'react-native';
+import { Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -11,8 +14,13 @@ var INDETERMINATE_CYCLES = 2;
 var INDETERMINATE_REST = 0.5;
 var DEFAULT_LABELS = {
   lateLabel: "Still working\u2026",
-  percent: (percent) => `${percent}%`
+  percent: (percent) => `${percent}%`,
+  cancel: (label) => label ? `Cancel ${label}` : "Cancel",
+  cancelled: "Cancelled",
+  valueWithRemaining: (percent, remaining) => `${percent}, ${remaining}`
 };
+var COMPLETE_HOLD_MS = 300;
+var COMPLETE_FADE_MS = 150;
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
@@ -25,8 +33,12 @@ function useFillColor(tone) {
       return theme.color.warn;
     case "danger":
       return theme.color.danger;
+    // A paused job holds its bar at text-3 (G5 A31).
+    case "neutral":
+      return theme.color.text3;
+    // R13: the fill is accent-strong, the one accent that clears 3:1 on surface-3.
     default:
-      return theme.color.accent;
+      return theme.color.accentStrong;
   }
 }
 function Progress({
@@ -41,17 +53,60 @@ function Progress({
   motion = "full",
   animateValue = false,
   accessibilityLabel,
+  remaining,
+  onCancel,
+  cancelLabel,
+  cancelled = false,
+  variant = "solid",
+  monotonic = false,
+  resetKey,
+  hideOnComplete = false,
+  onHidden,
   labels: labelsProp
 }) {
   const theme = useLoamTheme("progress");
   const labels = useLabels("progress", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size });
-  const fillColor = useFillColor(tone);
+  const fillColor = useFillColor(cancelled ? "neutral" : tone);
   const indeterminate = value === void 0;
-  const fraction = indeterminate || max <= 0 ? 0 : clamp(value / max, 0, 1);
+  const high = React.useRef({
+    key: resetKey,
+    value: 0
+  });
+  if (high.current.key !== resetKey) high.current = { key: resetKey, value: 0 };
+  if (value !== void 0 && value > high.current.value) high.current.value = value;
+  const shown = value === void 0 ? void 0 : monotonic ? high.current.value : value;
+  const fraction = shown === void 0 || max <= 0 ? 0 : clamp(shown / max, 0, 1);
+  const done = hideOnComplete && shown !== void 0 && shown >= max;
+  const hiddenCb = React.useRef(onHidden);
+  hiddenCb.current = onHidden;
+  const fade = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!done) {
+      fade.setValue(1);
+      return void 0;
+    }
+    let fading;
+    const hold = setTimeout(() => {
+      fading = Animated.timing(fade, {
+        toValue: 0,
+        duration: COMPLETE_FADE_MS,
+        useNativeDriver: false
+      });
+      fading.start(({ finished }) => {
+        if (finished) hiddenCb.current?.();
+      });
+    }, COMPLETE_HOLD_MS);
+    return () => {
+      clearTimeout(hold);
+      fading?.stop();
+    };
+  }, [done, resetKey, fade]);
   const now = Math.round(fraction * 100);
   const animateSweep = motion === "full" && !theme.reduceMotion;
-  const showHeader = late || label !== void 0;
+  const caption = cancelled ? labels.cancelled : label;
+  const showHeader = late || caption !== void 0 || remaining !== void 0 && !cancelled || onCancel !== void 0 && !cancelled;
+  const hitSlop = Math.max(0, Math.round((theme.tapMin - theme.space[26]) / 2));
   const progress = React.useRef(new Animated.Value(fraction)).current;
   React.useEffect(() => {
     if (indeterminate) return;
@@ -88,8 +143,44 @@ function Progress({
     inputRange: [0, 1],
     outputRange: ["-40%", "100%"]
   });
-  return /* @__PURE__ */ jsxs(View, { style: styles.outer, children: [
-    showHeader ? /* @__PURE__ */ jsx(View, { style: styles.header, children: /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", children: late ? /* @__PURE__ */ jsx(View, { style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel ?? labels.lateLabel }) }) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null }) }) : null,
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.outer, hideOnComplete ? { opacity: fade } : null], children: [
+    showHeader ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsxs(View, { accessibilityRole: "text", role: "status", style: styles.captionSlot, children: [
+        caption !== void 0 ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.label,
+              tone === "danger" && !cancelled ? { color: theme.color.dangerOnSoft } : null
+            ],
+            numberOfLines: 1,
+            children: caption
+          }
+        ) : null,
+        late && !cancelled ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "sm",
+            variant: "neutral",
+            dot: true,
+            dotStyle: { backgroundColor: theme.status.working },
+            children: lateLabel ?? labels.lateLabel
+          }
+        ) : null
+      ] }),
+      remaining !== void 0 && !cancelled ? /* @__PURE__ */ jsx(Text, { style: styles.remaining, children: remaining }) : null,
+      onCancel && !cancelled ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: cancelLabel ?? labels.cancel(label),
+          onPress: onCancel,
+          hitSlop,
+          style: ({ pressed }) => [styles.cancel, pressed && styles.cancelPressed],
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[14], color: theme.color.text2 })
+        }
+      ) : null
+    ] }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
       /* @__PURE__ */ jsx(
         View,
@@ -101,9 +192,19 @@ function Progress({
           "aria-valuemin": 0,
           "aria-valuemax": 100,
           "aria-valuenow": indeterminate ? void 0 : now,
-          "aria-valuetext": indeterminate ? void 0 : labels.percent(now),
-          style: styles.track,
-          children: indeterminate ? /* @__PURE__ */ jsx(
+          "aria-valuetext": indeterminate ? void 0 : remaining && !cancelled ? labels.valueWithRemaining(labels.percent(now), remaining) : labels.percent(now),
+          style: [
+            styles.track,
+            variant === "tonal" ? {
+              backgroundColor: tone === "neutral" || cancelled ? theme.color.surface2 : softToneSkin(theme, tone).fill
+            } : null,
+            variant === "outline" ? {
+              backgroundColor: "transparent",
+              borderWidth: theme.borderWidth.thin,
+              borderColor: theme.color.borderStrong
+            } : null
+          ],
+          children: indeterminate && !cancelled ? /* @__PURE__ */ jsx(
             Animated.View,
             {
               style: [
@@ -114,14 +215,14 @@ function Progress({
           ) : /* @__PURE__ */ jsx(Animated.View, { style: [styles.fill, { backgroundColor: fillColor, left: 0, width }] })
         }
       ),
-      showValue && !indeterminate ? animateValue ? /* @__PURE__ */ jsx(
+      showValue && !indeterminate && !cancelled ? animateValue ? /* @__PURE__ */ jsx(
         NumberRoll,
         {
           value: now,
           formatValue: labels.percent,
           textStyle: {
             fontFamily: theme.font.mono,
-            fontSize: theme.fontSize[14],
+            fontSize: theme.fontSize[13],
             color: theme.color.text2
           },
           motion,
@@ -139,29 +240,37 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space.s2,
     alignSelf: "stretch"
   },
-  header: { flexDirection: "row", alignItems: "center" },
-  // Warn-toned "still working" chip: soft tint + tone edge (which becomes the
-  // full tone and carries the meaning when the tint collapses under high
-  // contrast), with the AA-safe on-soft ink.
-  latePill: {
-    alignSelf: "flex-start",
+  // A70: the label row is 26 high whether or not the Cancel is there.
+  header: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: theme.color.warnSoft,
-    borderColor: theme.edge.warn,
-    borderWidth: theme.borderWidth.base,
-    borderRadius: theme.radius.full,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space[2]
+    gap: theme.space.s2,
+    minHeight: theme.space[26]
   },
-  lateText: {
+  captionSlot: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  remaining: {
     fontFamily: theme.font.sans,
-    color: theme.color.warnOnSoft,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    letterSpacing: theme.type.caption1.letterSpacing
+    color: theme.color.text2,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontVariant: ["tabular-nums"]
   },
+  cancel: {
+    width: theme.space[26],
+    height: theme.space[26],
+    borderRadius: theme.radius.sm,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cancelPressed: { backgroundColor: theme.state.pressed },
   label: {
+    flexShrink: 1,
     fontFamily: theme.font.sans,
     color: theme.color.text2,
     fontSize: theme.type.footnote.fontSize,
@@ -196,7 +305,7 @@ var sheet = createStyleSheet((theme) => ({
     minWidth: theme.space[40],
     textAlign: "right",
     fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[14],
+    fontSize: theme.fontSize[13],
     color: theme.color.text2
   },
   // Same reserved width as the static read-out, right-aligned, for the roll.
@@ -239,7 +348,10 @@ function StepProgress({
   accessibilityLabel,
   labels: labelsProp,
   style,
-  testID
+  testID,
+  tone,
+  motion = "none",
+  variant = "solid"
 }) {
   const theme = useLoamTheme("progress");
   const labels = useLabels("stepProgress", STEP_DEFAULT_LABELS, labelsProp);
@@ -273,22 +385,54 @@ function StepProgress({
             accessibilityElementsHidden: true,
             importantForAccessibility: "no-hide-descendants",
             style: styles.segRow,
-            children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
-              View,
-              {
-                style: [
-                  styles.seg,
-                  { backgroundColor: stepFill(theme, resolveStepState(i, curIndex, states)) }
-                ]
-              },
-              i
-            ))
+            children: Array.from({ length: count }, (_, i) => {
+              const st = resolveStepState(i, curIndex, states);
+              const toned = tone && (st === "done" || st === "working");
+              const bg = toned ? tone === "neutral" ? theme.color.text3 : softToneSkin(theme, tone).edge : stepFill(theme, st);
+              return /* @__PURE__ */ jsx(
+                StepSeg,
+                {
+                  style: [
+                    styles.seg,
+                    {
+                      backgroundColor: variant === "tonal" && st === "pending" ? theme.color.surface2 : bg
+                    },
+                    variant === "outline" ? { borderWidth: theme.borderWidth.thin, borderColor: theme.color.borderStrong } : null
+                  ],
+                  animate: motion === "full" && !theme.reduceMotion && i === curIndex,
+                  trigger: cur
+                },
+                i
+              );
+            })
           }
         )
       ]
     }
   );
 }
+function StepSeg({
+  style,
+  animate,
+  trigger
+}) {
+  const theme = useLoamTheme("progress");
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!animate) {
+      opacity.setValue(1);
+      return;
+    }
+    opacity.setValue(theme.opacity[38]);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      useNativeDriver: true
+    }).start();
+  }, [animate, trigger, opacity, theme.duration.base, theme.easing.base, theme.opacity]);
+  return /* @__PURE__ */ jsx(Animated.View, { style: [style, { opacity }] });
+}
 var stepSheet = createStyleSheet((theme) => ({
   outer: { flexDirection: "column", gap: theme.space.s2, alignSelf: "stretch" },
   header: {

package/dist/chunk-L4D5LHCH.js

@@ -0,0 +1,109 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import 'react';
+import { Text as Text$1 } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { ANDROID_ROLE_MAP, typeRamp } from '@btndprojects/loam-tokens';
+import { jsx } from 'react/jsx-runtime';
+
+var IOS_FOR_MATERIAL = {
+  headlineLarge: "largeTitle",
+  headlineMedium: "title1",
+  headlineSmall: "title2",
+  titleLarge: "title3",
+  titleMedium: "headline",
+  titleSmall: "subheadline",
+  bodyLarge: "body",
+  bodyMedium: "callout",
+  bodySmall: "footnote",
+  labelLarge: "subheadline",
+  labelMedium: "caption1",
+  labelSmall: "caption2"
+};
+var IOS_ROLES = new Set(Object.keys(ANDROID_ROLE_MAP));
+function themeTypeScale(theme) {
+  const base = theme.platform === "Android" ? 16 : 17;
+  return theme.type.body.fontSize / base;
+}
+function resolveTextRole(theme, role, android) {
+  const scale = themeTypeScale(theme);
+  const ramp = typeRamp(android ? "Android" : "iOS", scale);
+  const find = (key) => ramp.roles.find((r) => r.key === key);
+  const style = (key) => {
+    const r = find(key);
+    return {
+      fontSize: r.size,
+      lineHeight: r.lineHeight,
+      fontWeight: String(r.weight),
+      letterSpacing: +(r.tracking * scale).toFixed(2)
+    };
+  };
+  if (role === "surfaceTitle") {
+    return android ? style("titleLarge") : {
+      ...style("title3"),
+      fontWeight: String(theme.fontWeight.semibold),
+      letterSpacing: +(0.38 * scale).toFixed(2)
+    };
+  }
+  if (role === "dialogTitle") {
+    return android ? style("headlineSmall") : {
+      ...style("title3"),
+      fontWeight: String(theme.fontWeight.semibold),
+      letterSpacing: +(0.38 * scale).toFixed(2)
+    };
+  }
+  if (role === "overline") {
+    return {
+      ...style(android ? "labelMedium" : "caption1"),
+      fontWeight: String(theme.fontWeight.bold),
+      textTransform: "uppercase"
+    };
+  }
+  if (IOS_ROLES.has(role)) {
+    const ios = role;
+    return style(android ? ANDROID_ROLE_MAP[ios] : ios);
+  }
+  const material = role;
+  return style(android ? material : IOS_FOR_MATERIAL[material]);
+}
+function Text({
+  variant = "body",
+  tone = "default",
+  align,
+  orientation = "horizontal",
+  platform,
+  style,
+  allowFontScaling = true,
+  children,
+  ...rest
+}) {
+  const theme = useLoamTheme("text");
+  const android = isAndroidIdiom(theme, platform);
+  const color = {
+    default: theme.color.text,
+    secondary: theme.color.text2,
+    tertiary: theme.color.text3,
+    accent: theme.color.accentStrong,
+    danger: theme.color.dangerOnSoft
+  }[tone];
+  const stacked = orientation === "vertical" && typeof children === "string";
+  return /* @__PURE__ */ jsx(
+    Text$1,
+    {
+      accessibilityLabel: stacked ? children : void 0,
+      allowFontScaling,
+      style: [
+        { fontFamily: theme.font.sans, color },
+        resolveTextRole(theme, variant, android),
+        align ? {
+          textAlign: align === "center" ? "center" : align === "start" !== Boolean(theme.rtl) ? "left" : "right"
+        } : null,
+        stacked ? { textAlign: "center" } : null,
+        style
+      ],
+      ...rest,
+      children: stacked ? Array.from(children).join("\n") : children
+    }
+  );
+}
+
+export { Text, resolveTextRole };