@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-CUMUNPXY.js → chunk-IMMALLRU.js}

@@ -1,8 +1,11 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLoamLocale } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { StyleSheet, AccessibilityInfo, View, Text, Animated, Easing } from 'react-native';
 import { useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 function isDigit(ch) {
@@ -53,16 +56,22 @@ function NumberRoll({
   decorative = false,
   accessibilityLabel,
   style,
-  testID
+  testID,
+  size,
+  unit,
+  tone = "default",
+  loading = false,
+  align
 }) {
-  const theme = useLoamTheme();
-  const resolved = useResolvedMotion(motion);
+  const theme = useLoamTheme("number-roll");
+  const resolved = useResolvedMotion(motion, "number-roll");
   const canAnimate = resolved === "full";
+  const providerLocale = useLoamLocale();
   const text = React.useMemo(() => {
     if (formatValue) return formatValue(value);
-    if (format) return new Intl.NumberFormat(locale, format).format(value);
+    if (format) return new Intl.NumberFormat(locale ?? providerLocale, format).format(value);
     return String(value);
-  }, [formatValue, format, locale, value]);
+  }, [formatValue, format, locale, providerLocale, value]);
   const [ready, setReady] = React.useState(false);
   React.useEffect(() => {
     setReady(true);
@@ -72,7 +81,13 @@ function NumberRoll({
   React.useEffect(() => {
     if (announce && !decorative) AccessibilityInfo.announceForAccessibility(text);
   }, [announce, decorative, text]);
-  const flat = StyleSheet.flatten(textStyle) ?? {};
+  const sizePx = size ? { sm: 14, md: 16, lg: 24, xl: 34 }[size] : void 0;
+  const toneColor = tone === "default" ? theme.color.text : tone === "accent" ? theme.color.accentStrong : tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : theme.color.danger;
+  const flat = {
+    ...sizePx ? { fontSize: sizePx, fontWeight: theme.fontWeight.semibold } : null,
+    ...toneColor ? { color: toneColor } : null,
+    ...StyleSheet.flatten(textStyle) ?? {}
+  };
   const fontSize = typeof flat.fontSize === "number" ? flat.fontSize : 16;
   const lineHeight = typeof flat.lineHeight === "number" ? flat.lineHeight : Math.round(fontSize * 1.2);
   const glyphStyle = {
@@ -86,38 +101,59 @@ function NumberRoll({
   const stagger = theme.timing.stagger;
   const tokens = React.useMemo(() => Array.from(text), [text]);
   let digitIndex = 0;
-  const a11y = decorative ? { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" } : {
-    accessibilityRole: "text",
-    accessibilityLabel: accessibilityLabel ?? text,
+  const a11y = decorative ? {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true
+  } : {
+    accessibilityRole: NAMED_ROLE,
+    accessibilityLabel: accessibilityLabel ?? (unit ? `${text} ${unit}` : text),
     accessibilityLiveRegion: announce ? "polite" : "none"
   };
-  return /* @__PURE__ */ jsx(View, { style: [styles.row, style], testID, ...a11y, children: /* @__PURE__ */ jsx(
+  const alignStyle = align ? { alignSelf: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center" } : void 0;
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.row, alignStyle, style], testID, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: fontSize * 3, height: lineHeight, decorative: true }) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.row, alignStyle, style], testID, ...a11y, children: /* @__PURE__ */ jsxs(
     View,
     {
       style: styles.row,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      children: tokens.map((ch, i) => {
-        const key = String(tokens.length - 1 - i);
-        if (isDigit(ch)) {
-          const index = digitIndex++;
-          return /* @__PURE__ */ jsx(
-            RollDigit,
-            {
-              digit: rollInPending ? 0 : Number(ch),
-              index,
-              lineHeight,
+      "aria-hidden": true,
+      children: [
+        tokens.map((ch, i) => {
+          const key = String(tokens.length - 1 - i);
+          if (isDigit(ch)) {
+            const index = digitIndex++;
+            return /* @__PURE__ */ jsx(
+              RollDigit,
+              {
+                digit: rollInPending ? 0 : Number(ch),
+                index,
+                lineHeight,
+                glyphStyle,
+                animate,
+                duration,
+                easing: springEasing,
+                stagger
+              },
+              key
+            );
+          }
+          return /* @__PURE__ */ jsx(Text, { style: glyphStyle, children: ch }, key);
+        }),
+        unit ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
               glyphStyle,
-              animate,
-              duration,
-              easing: springEasing,
-              stagger
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ jsx(Text, { style: glyphStyle, children: ch }, key);
-      })
+              { fontWeight: theme.fontWeight.regular, marginStart: theme.space.s1 }
+            ],
+            children: unit
+          }
+        ) : null
+      ]
     }
   ) });
 }

package/dist/chunk-J64KGCGX.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { useAppMotionLevel } from '@btndprojects/loam-theme-native';
+import { lowerMotion, SPRING_TOKENS } from '@btndprojects/loam-tokens';
+export { BREAKAWAY, project, releaseVelocity, resist, rubberband } from '@btndprojects/loam-tokens';
+
+// src/lib/motion.ts
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    let sub;
+    try {
+      const query = AccessibilityInfo.isReduceMotionEnabled?.();
+      query?.then((value) => {
+        if (!cancelled) setReduced(value);
+      }).catch(() => {
+      });
+      sub = AccessibilityInfo.addEventListener?.("reduceMotionChanged", (value) => {
+        setReduced(value);
+      });
+    } catch {
+    }
+    return () => {
+      cancelled = true;
+      sub?.remove?.();
+    };
+  }, []);
+  return reduced;
+}
+function useResolvedMotion(motion = "full", component) {
+  const osReduced = useReducedMotion();
+  const app = useAppMotionLevel(component);
+  return lowerMotion(lowerMotion(motion, app), osReduced ? "reduced" : void 0);
+}
+function springConfig(theme, name, opts = {}) {
+  const s = theme.spring[name];
+  const spatial = SPRING_TOKENS[name].family === "spatial";
+  const ratio = opts.thrown && spatial ? Math.min(s.dampingRatio, 0.8) : s.dampingRatio;
+  return {
+    stiffness: s.stiffness,
+    damping: 2 * ratio * Math.sqrt(s.stiffness),
+    mass: 1,
+    velocity: opts.velocity ?? 0,
+    // loam-audit-ignore raw-spring — settle epsilons, not feel: the spring itself comes from the token.
+    restDisplacementThreshold: 1e-3,
+    // loam-audit-ignore raw-spring
+    restSpeedThreshold: 1e-3
+  };
+}
+function motionTiming(level) {
+  return { duration: level === "none" ? 1 : 150 };
+}
+
+export { motionTiming, springConfig, useReducedMotion, useResolvedMotion };