@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-YF4NSSMT.js → chunk-SWS5JQIF.js}

@@ -1,5 +1,5 @@
-import { StreamFade } from './chunk-WSW6ZFAQ.js';
-import { CodeBlock } from './chunk-TOXAGRDQ.js';
+import { StreamFade } from './chunk-ENP3BMZU.js';
+import { CodeBlock } from './chunk-RXSCIO6W.js';
 import * as React from 'react';
 import { View, Text, Linking } from 'react-native';
 import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
@@ -172,7 +172,7 @@ var HEADING_ROLE = {
   5: "headline",
   6: "subheadline"
 };
-function useInlineRenderer() {
+function useInlineRenderer(onLinkPress) {
   const { styles } = useStyles(sheet);
   const render = React.useCallback(
     (nodes, keyPrefix) => nodes.map((node, i) => {
@@ -199,7 +199,8 @@ function useInlineRenderer() {
               style: styles.link,
               accessibilityRole: "link",
               onPress: () => {
-                void Linking.openURL(href);
+                if (onLinkPress) onLinkPress(href);
+                else void Linking.openURL(href);
               },
               children: render(node.children, key)
             },
@@ -208,17 +209,18 @@ function useInlineRenderer() {
         }
       }
     }),
-    [styles]
+    [styles, onLinkPress]
   );
   return render;
 }
 function Markdown({
   content,
   streaming = false,
-  motion = "none"
+  motion = "none",
+  onLinkPress
 }) {
   const { styles } = useStyles(sheet);
-  const renderInline = useInlineRenderer();
+  const renderInline = useInlineRenderer(onLinkPress);
   const blocks = React.useMemo(() => parseMarkdown(content), [content]);
   const animate = streaming && motion === "full";
   const prevCount = React.useRef(0);
@@ -235,6 +237,7 @@ function Markdown({
           Text,
           {
             accessibilityRole: "header",
+            "aria-level": block.level,
             style: [styles.heading, styles[`h${block.level}`]],
             children: renderInline(block.children, `h${index}`)
           }
@@ -244,20 +247,45 @@ function Markdown({
       case "hr":
         return /* @__PURE__ */ jsx(View, { style: styles.hr, accessibilityRole: "none" });
       case "code":
-        return /* @__PURE__ */ jsx(CodeBlock, { code: block.value, language: block.lang ?? void 0, showLineNumbers: false });
+        return /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            code: block.value,
+            language: block.lang ?? void 0,
+            showLineNumbers: false
+          }
+        );
       case "blockquote":
-        return /* @__PURE__ */ jsxs(View, { style: styles.blockquote, children: [
-          /* @__PURE__ */ jsx(View, { style: styles.blockquoteBar }),
+        return /* @__PURE__ */ jsxs(View, { ...{ role: "blockquote" }, style: styles.blockquote, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessible: false,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              "aria-hidden": true,
+              style: styles.blockquoteBar
+            }
+          ),
           /* @__PURE__ */ jsx(Text, { style: styles.blockquoteText, children: renderInline(block.children, `q${index}`) })
         ] });
       case "list":
-        return /* @__PURE__ */ jsx(View, { style: styles.list, children: block.items.map((item, j) => /* @__PURE__ */ jsxs(View, { style: styles.listItem, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.marker, children: block.ordered ? `${block.start + j}.` : "\u2022" }),
+        return /* @__PURE__ */ jsx(View, { role: "list", style: styles.list, children: block.items.map((item, j) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.listItem, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityElementsHidden: !block.ordered,
+              importantForAccessibility: block.ordered ? "auto" : "no-hide-descendants",
+              "aria-hidden": block.ordered ? void 0 : true,
+              style: styles.marker,
+              children: block.ordered ? `${block.start + j}.` : "\u2022"
+            }
+          ),
           /* @__PURE__ */ jsx(Text, { style: styles.listItemText, children: renderInline(item, `l${index}-${j}`) })
         ] }, j)) });
     }
   };
-  return /* @__PURE__ */ jsx(View, { style: styles.root, children: blocks.map((block, i) => {
+  return /* @__PURE__ */ jsx(View, { style: styles.root, "aria-busy": streaming || void 0, children: blocks.map((block, i) => {
     const el = renderBlock(block, i);
     if (animate && i >= baseline) {
       return /* @__PURE__ */ jsx(StreamFade, { children: el }, i);

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

@@ -1,4 +1,6 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.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';
@@ -55,14 +57,15 @@ function NumberRoll({
   style,
   testID
 }) {
-  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);
@@ -86,8 +89,12 @@ 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",
+  const a11y = decorative ? {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true
+  } : {
+    accessibilityRole: NAMED_ROLE,
     accessibilityLabel: accessibilityLabel ?? text,
     accessibilityLiveRegion: announce ? "polite" : "none"
   };
@@ -97,6 +104,7 @@ function NumberRoll({
       style: styles.row,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
+      "aria-hidden": true,
       children: tokens.map((ch, i) => {
         const key = String(tokens.length - 1 - i);
         if (isDigit(ch)) {

package/dist/{chunk-H6NIOQHK.js → chunk-TDMG26JI.js}

@@ -1,6 +1,7 @@
 import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, PanResponder, View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -13,8 +14,17 @@ var GEOMETRY = {
   // loam-allow-raw: ramp keys, read via theme.space
 };
 var THUMB_ACTIVE_SCALE = 1.18;
+function adjustedValue(current, direction, { min, max, step }) {
+  const delta = step > 0 ? step : (max - min) / 10;
+  const next = Math.round((current + direction * delta) * 1e6) / 1e6;
+  return Math.min(max, Math.max(min, next));
+}
 var MAX_TICKS = 20;
 var BUBBLE_BOTTOM = 28;
+var DEFAULT_LABELS = {
+  percent: (percent) => `${percent}%`,
+  range: (min, percent, max) => `${min} \xB7 ${percent}% \xB7 ${max}`
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
@@ -31,14 +41,16 @@ function Slider({
   showValue = false,
   showReadout = false,
   showTicks = false,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
-  const animateScale = useResolvedMotion(motion) === "full";
+  const labels = useLabels("slider", DEFAULT_LABELS, labelsProp);
+  const animateScale = useResolvedMotion(motion, "slider") === "full";
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(defaultValue ?? min);
   const current = clamp(isControlled ? value : internal, min, max);
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("slider");
   const fraction = max > min ? (current - min) / (max - min) : 0;
   const pct = `${fraction * 100}%`;
   const [trackWidth, setTrackWidth] = React.useState(0);
@@ -140,8 +152,8 @@ function Slider({
   const stepCount = step > 0 && max > min ? Math.round((max - min) / step) : 0;
   const showTickMarks = showTicks && stepCount > 0 && stepCount <= MAX_TICKS;
   const tickIndices = showTickMarks ? Array.from({ length: stepCount + 1 }, (_, i) => i) : [];
-  const bubbleLabel = step > 0 ? String(current) : `${Math.round(fraction * 100)}%`;
-  const readoutText = `${min} \xB7 ${Math.round(fraction * 100)}% \xB7 ${max}`;
+  const bubbleLabel = step > 0 ? String(current) : labels.percent(Math.round(fraction * 100));
+  const readoutText = labels.range(min, Math.round(fraction * 100), max);
   return /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.trackRow, children: [
       /* @__PURE__ */ jsxs(
@@ -152,6 +164,12 @@ function Slider({
           accessibilityLabel,
           accessibilityValue: { min, max, now: current },
           accessibilityState: { disabled },
+          accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+          onAccessibilityAction: (e) => {
+            if (disabled) return;
+            const dir = e.nativeEvent.actionName === "increment" ? 1 : -1;
+            setValue(adjustedValue(currentRef.current, dir, { min, max, step }));
+          },
           "aria-valuemin": min,
           "aria-valuemax": max,
           "aria-valuenow": current,
@@ -213,6 +231,8 @@ var sheet = createStyleSheet((theme) => ({
   container: {
     flex: 1,
     justifyContent: "center",
+    // The drawn control stays slim; the touch region still reaches the minimum.
+    minHeight: theme.tapMin,
     variants: {
       size: {
         sm: { height: theme.space[GEOMETRY.sm.height] },