@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-SBMNWWBV.js → chunk-TN2ZNJUI.js}

@@ -1,12 +1,14 @@
-import { NumberRoll } from './chunk-CUMUNPXY.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Animated, Text } from 'react-native';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, StyleSheet, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function useForeground(variant) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("badge");
   switch (variant) {
     case "accent":
       return theme.color.accentOnSoft;
@@ -41,22 +43,58 @@ function Badge({
   style
 }) {
   const { styles } = useStyles(sheet, { variant, size, outline });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("badge");
   const fg = useForeground(variant);
   const iconSize = size === "sm" ? 12 : 14;
   const dotSize = size === "sm" ? theme.space[6] : theme.space[7];
   const label = typeof children === "string" ? children : void 0;
+  const level = useResolvedMotion(motion, "badge");
+  const appear = React.useRef(new Animated.Value(level === "full" ? 0.5 : 1)).current;
+  React.useEffect(() => {
+    if (level !== "full") return;
+    Animated.spring(appear, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const [ghost, setGhost] = React.useState(null);
+  const lastVariant = React.useRef(variant);
+  const ghostFade = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const was = lastVariant.current;
+    lastVariant.current = variant;
+    if (was === variant || level === "none") return;
+    setGhost(was);
+    ghostFade.setValue(1);
+    const anim = Animated.timing(ghostFade, {
+      toValue: 0,
+      ...motionTiming("reduced"),
+      useNativeDriver: true
+    });
+    anim.start(({ finished }) => finished && setGhost(null));
+    return () => anim.stop();
+  }, [variant]);
+  const { styles: ghostStyles } = useStyles(sheet, { variant: ghost ?? variant, size, outline });
   const isCount = count !== void 0;
   if (isCount && count === 0 && !showZero) return null;
   const display = isCount ? count > max ? `${max}+` : String(count) : void 0;
   return /* @__PURE__ */ jsxs(
-    View,
+    Animated.View,
     {
-      accessibilityRole: "text",
+      accessibilityRole: NAMED_ROLE,
       accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
       accessibilityLiveRegion: announce && isCount ? "polite" : "none",
-      style: [styles.base, style],
+      style: [styles.base, style, { transform: [{ scale: appear }] }],
       children: [
+        ghost ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "loam-badge-ghost",
+            pointerEvents: "none",
+            style: [ghostStyles.base, StyleSheet.absoluteFill, { opacity: ghostFade, margin: 0 }]
+          }
+        ) : null,
         dot && !isCount ? (
           // `Animated.View` rather than `View` so `dotStyle` can carry an
           // `Animated.Value`. With no override it behaves as a plain view — this

package/dist/{chunk-5YNTNN5A.js → chunk-TQVAIKFD.js}

@@ -1,8 +1,8 @@
 import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Easing, View, Pressable, Text } from 'react-native';
+import { Animated, Easing, PanResponder, View, Pressable, Text, Platform, I18nManager } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -13,9 +13,11 @@ function SegmentedControl({
   onValueChange,
   size = "md",
   motion = "full",
-  disabled = false
+  disabled = false,
+  semantics = "radio",
+  accessibilityLabel
 }) {
-  const animateSlide = useResolvedMotion(motion) === "full";
+  const animateSlide = useResolvedMotion(motion, "segmented-control") === "full";
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(
     defaultValue ?? items[0]?.value
@@ -25,7 +27,7 @@ function SegmentedControl({
     0,
     items.findIndex((item) => item.value === current)
   );
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("segmented-control");
   const { styles } = useStyles(sheet, { size, disabled });
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
@@ -68,44 +70,107 @@ function SegmentedControl({
   }, [active, animateSlide, thumbX, thumbWidth, theme.motion.knob]);
   const select = (next) => {
     if (!isControlled) setInternal(next);
-    haptics.impact("light");
+    if (next !== current) haptics.selection();
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        testID: "segmented-indicator",
-        pointerEvents: "none",
-        style: [
-          styles.indicator,
-          { left: thumbX, width: thumbWidth },
-          active ? { top: active.y, height: active.height } : null
-        ]
-      }
-    ),
-    items.map((item, index) => {
-      const selected = item.value === current;
-      const fg = selected ? theme.color.text : theme.color.text3;
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityState: { selected, disabled },
-          disabled,
-          onPress: disabled ? void 0 : () => select(item.value),
-          onLayout: onSegmentLayout(index),
-          hitSlop: { top: slopY, bottom: slopY },
-          style: styles.segment,
-          children: [
-            item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
-            /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
-          ]
+  const rowRef = React.useRef(null);
+  const rowX = React.useRef(0);
+  const segmentRefs = React.useRef([]);
+  const onKeyDown = (e) => {
+    if (disabled || items.length === 0) return;
+    const back = I18nManager.isRTL ? "ArrowRight" : "ArrowLeft";
+    const forward = I18nManager.isRTL ? "ArrowLeft" : "ArrowRight";
+    let next;
+    if (e.key === forward || e.key === "ArrowDown") next = (activeIndex + 1) % items.length;
+    else if (e.key === back || e.key === "ArrowUp")
+      next = (activeIndex - 1 + items.length) % items.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = items.length - 1;
+    else return;
+    e.preventDefault();
+    select(items[next].value);
+    segmentRefs.current[next]?.focus?.();
+  };
+  const latest = React.useRef({ layouts, select, items, disabled, current });
+  latest.current = { layouts, select, items, disabled, current };
+  const scrub = React.useMemo(
+    () => (
+      // A plain horizontal scrub inside one control; no nested gesture to arbitrate.
+      // eslint-disable-next-line loam/no-pan-responder
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) => !latest.current.disabled && Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderGrant: () => {
+          rowRef.current?.measureInWindow((x) => {
+            rowX.current = x;
+          });
         },
-        item.value
-      );
-    })
-  ] }) });
+        onPanResponderMove: (_, g) => {
+          const { layouts: boxes, select: pick, items: list, current: now } = latest.current;
+          const x = g.moveX - rowX.current;
+          const hit = list.findIndex((_2, i) => {
+            const b = boxes[i];
+            return b !== void 0 && x >= b.x && x < b.x + b.width;
+          });
+          if (hit >= 0 && list[hit].value !== now) pick(list[hit].value);
+        },
+        onPanResponderTerminationRequest: () => false
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: rowRef,
+      style: styles.row,
+      accessibilityRole: semantics === "tabs" ? "tablist" : "radiogroup",
+      accessibilityLabel,
+      ...Platform.OS === "web" ? { onKeyDown } : null,
+      ...scrub.panHandlers,
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "segmented-indicator",
+            pointerEvents: "none",
+            style: [
+              styles.indicator,
+              { left: thumbX, width: thumbWidth },
+              active ? { top: active.y, height: active.height } : null
+            ]
+          }
+        ),
+        items.map((item, index) => {
+          const selected = item.value === current;
+          const fg = selected ? theme.color.text : theme.color.text3;
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              ref: (node) => {
+                segmentRefs.current[index] = node;
+              },
+              accessibilityRole: semantics === "tabs" ? "tab" : "radio",
+              accessibilityState: semantics === "tabs" ? { selected, disabled } : { checked: selected, disabled },
+              ...Platform.OS === "web" ? {
+                [semantics === "tabs" ? "aria-selected" : "aria-checked"]: selected,
+                tabIndex: selected && !disabled ? 0 : -1
+              } : null,
+              disabled,
+              onPress: disabled ? void 0 : () => select(item.value),
+              onLayout: onSegmentLayout(index),
+              hitSlop: { top: slopY, bottom: slopY },
+              style: styles.segment,
+              children: [
+                item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+                /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
+              ]
+            },
+            item.value
+          );
+        })
+      ]
+    }
+  ) });
 }
 var sheet = createStyleSheet((theme) => ({
   container: {