@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-KMI5ML5I.js → chunk-YXOAPXMU.js}

@@ -1,10 +1,15 @@
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { Skeleton, SkeletonText } from './chunk-RIBDXGUG.js';
+import { Spinner } from './chunk-KQZ3GLHR.js';
+import { Skeleton, SkeletonText } from './chunk-PNF3NKB5.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { motionTiming, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { StyleSheet, Animated, View, Pressable, Text, Image } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  loading: "Loading"
+};
 function Card({
   children,
   variant = "default",
@@ -13,13 +18,15 @@ function Card({
   accessibilityLabel,
   selected = false,
   busy = false,
-  busyLabel = "Loading",
+  busyLabel,
   skeleton = false,
   emphasized = false,
   dragging = false,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("card", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("card");
   const { styles } = useStyles(sheet, {
     variant: variant === "default" ? void 0 : variant,
     selected,
@@ -27,12 +34,23 @@ function Card({
     dragging
   });
   const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => Animated.spring(scale, {
-    toValue: to,
-    useNativeDriver: true,
-    speed: 40,
-    bounciness: 6
-  }).start();
+  const spring = (to) => {
+    if (theme.reduceMotion) return;
+    Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
+  };
+  const tintOn = dragging || selected;
+  const tintOpacity = React.useRef(new Animated.Value(tintOn ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(tintOpacity, {
+      toValue: tintOn ? 1 : 0,
+      ...motionTiming(theme.reduceMotion ? "reduced" : "full"),
+      useNativeDriver: true
+    }).start();
+  }, [tintOn, tintOpacity, theme.reduceMotion]);
   if (skeleton) {
     return /* @__PURE__ */ jsx(
       View,
@@ -52,7 +70,12 @@ function Card({
     );
   }
   const tint = dragging ? theme.state.dragged : selected ? theme.state.selected : null;
-  const tintOverlay = tint ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: tint, pointerEvents: "none" }] }) : null;
+  const tintOverlay = tint ? /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [StyleSheet.absoluteFill, { backgroundColor: tint, opacity: tintOpacity, pointerEvents: "none" }]
+    }
+  ) : null;
   const lift = dragging && motion === "full" && !theme.reduceMotion;
   const dragTransform = lift ? [{ scale: 1.022 }, { rotate: theme.rtl ? "-1.2deg" : "1.2deg" }] : [];
   const withBusy = (node) => busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -65,7 +88,7 @@ function Card({
         importantForAccessibility: "no-hide-descendants"
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles.busySpinner, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: busyLabel }) })
+    /* @__PURE__ */ jsx(View, { style: styles.busySpinner, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: busyLabel ?? labels.loading }) })
   ] }) : node;
   if (onPress) {
     return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, style, { transform: [{ scale }, ...dragTransform] }], children: [
@@ -77,7 +100,7 @@ function Card({
           accessibilityLabel,
           accessibilityState: { selected: selected || void 0, busy: busy || void 0 },
           onPress,
-          onPressIn: () => spring(0.98),
+          onPressIn: () => spring(0.97),
           onPressOut: () => spring(1),
           style: StyleSheet.absoluteFill
         }
@@ -174,8 +197,19 @@ var sheet = createStyleSheet((theme) => ({
       variant: {
         // Reference (buildWidgets): `box-shadow:0 12px 30px rgba(30,25,15,.14)` → md token is
         // the nearest match; elevated steps up to lg for the stronger treatment.
-        default: { ...theme.shadow.md },
-        elevated: { ...theme.shadow.lg },
+        // The resting card reads the theme's `card` style (edge + shadow), so one
+        // theme setting restyles every card. `outline` keeps its own edge — it
+        // is the variant that *is* a border.
+        default: {
+          borderWidth: theme.card.borderWidth,
+          borderColor: theme.card.borderColor,
+          ...theme.card.shadow
+        },
+        elevated: {
+          borderWidth: theme.card.borderWidth,
+          borderColor: theme.card.borderColor,
+          ...theme.shadow.lg
+        },
         outline: {}
       },
       // Selection: an accent border. The `state-selected` tint is a translucent
@@ -189,7 +223,8 @@ var sheet = createStyleSheet((theme) => ({
       // it derives the accent at the hard-edge strength every such edge needs,
       // and it is a no-op on an accent that already clears.
       selected: {
-        true: { borderColor: theme.focus.ringColor },
+        // Width too: a theme may draw cards edgeless, and the mark must survive it.
+        true: { borderColor: theme.focus.ringColor, borderWidth: theme.borderWidth.thin },
         false: {}
       },
       // Von Restorff emphasis — a 2px accent border + the stronger `lg`
@@ -206,7 +241,11 @@ var sheet = createStyleSheet((theme) => ({
       // Dragging: a raised shadow + accent border over the card's own surface;
       // the `state-dragged` tint and the scale/tilt are applied in the component.
       dragging: {
-        true: { borderColor: theme.focus.ringColor, ...theme.shadow.lg },
+        true: {
+          borderColor: theme.focus.ringColor,
+          borderWidth: theme.borderWidth.thin,
+          ...theme.shadow.lg
+        },
         false: {}
       }
     }

package/dist/{chunk-RJQOOHT2.js → chunk-ZECZOOSB.js}

@@ -1,11 +1,18 @@
-import { Dialog, DialogTitle, DialogFooter } from './chunk-OPXFZ4Y5.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Dialog, DialogTitle, DialogFooter } from './chunk-GDKVKNR2.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Easing, Text, Pressable, View } from 'react-native';
+import { Animated, Text, Pressable, View, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss",
+  primary: "See what changed",
+  secondary: "Later"
+};
 function AnnouncementBar({
   tone = "info",
   children,
@@ -13,22 +20,38 @@ function AnnouncementBar({
   actionLabel,
   onAction,
   onDismiss,
-  dismissLabel = "Dismiss",
+  dismissLabel,
   wrap = false,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("announcement");
   const { styles } = useStyles(sheet, { tone });
   const slide = React.useRef(new Animated.Value(0)).current;
   const animate = motion === "full" && !theme.reduceMotion;
   React.useEffect(() => {
-    Animated.timing(slide, {
-      toValue: 1,
-      duration: animate ? theme.motion.enter.duration : 0,
-      easing: Easing.bezier(...theme.motion.enter.easing),
-      useNativeDriver: true
-    }).start();
-  }, [slide, animate, theme.motion.enter]);
+    if (animate) {
+      Animated.spring(slide, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
+    } else {
+      Animated.timing(slide, { ...motionTiming(motion === "none" ? "none" : "reduced"), toValue: 1, useNativeDriver: true }).start();
+    }
+  }, [slide, animate]);
+  const dismiss = () => {
+    if (animate) {
+      LayoutAnimation.configureNext({
+        duration: theme.spring.ds.duration,
+        update: { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio },
+        delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity }
+      });
+    }
+    onDismiss?.();
+  };
+  const actionSlopY = Math.max(
+    theme.space[10],
+    Math.round((theme.tapMin - theme.type.footnote.lineHeight) / 2)
+  );
+  const dismissSlop = Math.max(theme.space[10], Math.round((theme.tapMin - theme.ctl.xs) / 2));
   const ink = tone === "info" ? theme.color.infoOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.dangerOnSoft : tone === "good" ? theme.color.goodOnSoft : theme.color.accentOnSoft;
   const defaultIcon = tone === "warn" ? "alert-triangle" : tone === "danger" ? "alert-circle" : tone === "good" ? "check-circle" : tone === "accent" ? "star" : "info";
   return /* @__PURE__ */ jsxs(
@@ -38,11 +61,11 @@ function AnnouncementBar({
       accessibilityLiveRegion: "polite",
       style: [
         styles.bar,
-        {
+        animate ? {
           transform: [
             { translateY: slide.interpolate({ inputRange: [0, 1], outputRange: [-theme.space[40], 0] }) }
           ]
-        }
+        } : { opacity: slide }
       ],
       children: [
         /* @__PURE__ */ jsx(Icon, { name: icon ?? defaultIcon, size: theme.icon.sm, color: ink }),
@@ -53,8 +76,13 @@ function AnnouncementBar({
             accessibilityRole: "button",
             accessibilityLabel: actionLabel,
             onPress: onAction,
-            hitSlop: theme.space[10],
-            style: styles.action,
+            hitSlop: {
+              top: actionSlopY,
+              bottom: actionSlopY,
+              left: theme.space[10],
+              right: theme.space[10]
+            },
+            style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
             children: [
               /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: ink }], children: actionLabel }),
               /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.xs, color: ink })
@@ -65,10 +93,10 @@ function AnnouncementBar({
           Pressable,
           {
             accessibilityRole: "button",
-            accessibilityLabel: dismissLabel,
-            onPress: onDismiss,
-            hitSlop: theme.space[10],
-            style: styles.iconButton,
+            accessibilityLabel: dismissLabel ?? labels.dismiss,
+            onPress: dismiss,
+            hitSlop: dismissSlop,
+            style: ({ pressed }) => [styles.iconButton, pressed ? styles.pressed : null],
             children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: ink })
           }
         ) : null
@@ -79,7 +107,7 @@ function AnnouncementBar({
 function AnnouncementHighlights({
   items
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("announcement");
   const { styles } = useStyles(sheet, { tone: "info" });
   if (!items.length) return null;
   return /* @__PURE__ */ jsx(View, { style: styles.highlights, children: items.map((h) => /* @__PURE__ */ jsxs(View, { style: styles.highlightRow, children: [
@@ -95,12 +123,14 @@ function AnnouncementModal({
   body,
   media,
   highlights,
-  primaryLabel = "See what changed",
+  primaryLabel,
   onPrimary,
-  secondaryLabel = "Later",
+  secondaryLabel,
   onSecondary,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { tone: "info" });
   return /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => onOpenChange(false), accessibilityLabel: title, motion, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.modalBody, children: [
@@ -120,7 +150,7 @@ function AnnouncementModal({
             onSecondary?.();
             onOpenChange(false);
           },
-          children: secondaryLabel
+          children: secondaryLabel ?? labels.secondary
         }
       ),
       /* @__PURE__ */ jsx(
@@ -132,7 +162,7 @@ function AnnouncementModal({
             onPrimary?.();
             onOpenChange(false);
           },
-          children: primaryLabel
+          children: primaryLabel ?? labels.primary
         }
       )
     ] })
@@ -165,6 +195,7 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.footnote.fontSize,
     lineHeight: theme.type.footnote.lineHeight
   },
+  pressed: { opacity: theme.state.pressedOpacity },
   action: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
   actionLabel: {
     fontFamily: theme.font.sans,

package/dist/{chunk-QKXCPTFS.js → chunk-ZLTO5VQI.js}

@@ -1,10 +1,18 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { Dimensions, Animated, Easing, View, StyleSheet, Pressable, Text, Modal } from 'react-native';
+import { Dimensions, Animated, Easing, PanResponder, View, Platform, findNodeHandle, AccessibilityInfo, StyleSheet, Pressable, Text, Modal } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  navigation: "Navigation",
+  close: "Close navigation"
+};
 var PANEL_FRACTION = 0.78;
+var SWIPE_SLOP = 10;
+var SWIPE_DISMISS_FRACTION = 0.3;
+var SWIPE_FLICK_VELOCITY = 0.4;
 var SPEC = {
   /** Panel top padding, before the safe-area inset is added. */
   panelPadTop: 34,
@@ -33,12 +41,15 @@ function NavDrawer({
   userName,
   userEmail,
   avatarInitials,
-  closeLabel = "Close navigation",
+  closeLabel,
   safeAreaTop = 0,
   motion = "full",
-  inline = false
+  inline = false,
+  onOpen,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("navDrawer", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("nav-drawer");
   const { styles } = useStyles(navDrawer);
   const panelWidth = React.useMemo(() => Dimensions.get("window").width * PANEL_FRACTION, []);
   const reducedMotion = theme.reduceMotion || motion === "reduced";
@@ -47,6 +58,17 @@ function NavDrawer({
   const translateX = React.useRef(new Animated.Value(-panelWidth)).current;
   const scrimOpacity = React.useRef(new Animated.Value(0)).current;
   const panelOpacity = React.useRef(new Animated.Value(1)).current;
+  const scrimShown = React.useMemo(
+    () => Animated.multiply(
+      scrimOpacity,
+      translateX.interpolate({
+        inputRange: [-panelWidth, 0],
+        outputRange: [0, 1],
+        extrapolate: "clamp"
+      })
+    ),
+    [scrimOpacity, translateX, panelWidth]
+  );
   const slideDuration = theme.motion.enter.duration;
   const slideEasing = React.useMemo(
     () => Easing.bezier(...theme.motion.enter.easing),
@@ -54,6 +76,12 @@ function NavDrawer({
   );
   const fadeDuration = theme.duration.base;
   const fadeEasing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const exitSlideDuration = theme.motion.exit.duration;
+  const exitSlideEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.exit.easing),
+    [theme.motion.exit.easing]
+  );
+  const exitFadeDuration = Math.min(fadeDuration, exitSlideDuration);
   const animateIn = React.useCallback(() => {
     if (instantMotion) {
       translateX.setValue(0);
@@ -121,13 +149,13 @@ function NavDrawer({
       Animated.parallel([
         Animated.timing(panelOpacity, {
           toValue: 0,
-          duration: fadeDuration,
+          duration: exitFadeDuration,
           easing: fadeEasing,
           useNativeDriver: true
         }),
         Animated.timing(scrimOpacity, {
           toValue: 0,
-          duration: fadeDuration,
+          duration: exitFadeDuration,
           easing: fadeEasing,
           useNativeDriver: true
         })
@@ -139,13 +167,13 @@ function NavDrawer({
     Animated.parallel([
       Animated.timing(translateX, {
         toValue: -panelWidth,
-        duration: slideDuration,
-        easing: slideEasing,
+        duration: exitSlideDuration,
+        easing: exitSlideEasing,
         useNativeDriver: true
       }),
       Animated.timing(scrimOpacity, {
         toValue: 0,
-        duration: fadeDuration,
+        duration: exitFadeDuration,
         easing: fadeEasing,
         useNativeDriver: true
       })
@@ -157,9 +185,9 @@ function NavDrawer({
     scrimOpacity,
     panelOpacity,
     panelWidth,
-    slideDuration,
-    slideEasing,
-    fadeDuration,
+    exitSlideDuration,
+    exitSlideEasing,
+    exitFadeDuration,
     fadeEasing,
     reducedMotion,
     instantMotion
@@ -174,26 +202,76 @@ function NavDrawer({
   React.useEffect(() => {
     if (visible && open) animateIn();
   }, [visible]);
+  const pan = React.useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) => g.dx < -SWIPE_SLOP && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+      onPanResponderMove: (_e, g) => {
+        translateX.setValue(Math.min(0, g.dx));
+      },
+      onPanResponderRelease: (_e, g) => {
+        if (g.dx < -panelWidth * SWIPE_DISMISS_FRACTION || g.vx < -SWIPE_FLICK_VELOCITY) {
+          onClose();
+          return;
+        }
+        Animated.timing(translateX, {
+          toValue: 0,
+          duration: exitSlideDuration,
+          easing: exitSlideEasing,
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => translateX.setValue(0)
+    }),
+    [translateX, panelWidth, onClose, exitSlideDuration, exitSlideEasing]
+  );
+  const edgePan = React.useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) => g.dx > SWIPE_SLOP && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+      onPanResponderRelease: (_e, g) => {
+        if (g.dx > panelWidth * SWIPE_DISMISS_FRACTION || g.vx > SWIPE_FLICK_VELOCITY) onOpen?.();
+      }
+    }),
+    [panelWidth, onOpen]
+  );
+  const edge = onOpen && !open ? /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: "nav-drawer-edge",
+      ...edgePan.panHandlers,
+      style: styles.edge,
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true
+    }
+  ) : null;
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!visible || !open || Platform.OS === "web") return;
+    const node = panelRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [visible, open]);
   const handleItemPress = (item) => {
     item.onPress?.();
     onClose();
   };
   const body = /* @__PURE__ */ jsxs(View, { style: [styles.root, inline && StyleSheet.absoluteFill], children: [
-    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: scrimOpacity }], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: scrimShown }], children: /* @__PURE__ */ jsx(
       Pressable,
       {
         style: StyleSheet.absoluteFill,
         accessibilityRole: "button",
-        accessibilityLabel: closeLabel,
+        accessibilityLabel: closeLabel ?? labels.close,
         onPress: onClose
       }
     ) }),
     /* @__PURE__ */ jsxs(
       Animated.View,
       {
+        ref: panelRef,
+        ...pan.panHandlers,
         accessibilityViewIsModal: true,
-        accessibilityRole: "menu",
-        accessibilityLabel: userName ?? "Navigation",
+        role: "navigation",
+        accessibilityLabel: userName ?? labels.navigation,
         style: [
           styles.panel,
           {
@@ -217,9 +295,10 @@ function NavDrawer({
             return /* @__PURE__ */ jsxs(
               Pressable,
               {
-                accessibilityRole: "menuitem",
+                accessibilityRole: "link",
                 accessibilityLabel: item.label,
                 accessibilityState: { selected: active },
+                ...active ? { "aria-current": "page" } : null,
                 onPress: () => handleItemPress(item),
                 style: [styles.item, active ? styles.itemActive : null],
                 children: [
@@ -234,24 +313,35 @@ function NavDrawer({
       }
     )
   ] });
-  if (inline) return visible ? body : /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      visible,
-      transparent: true,
-      animationType: "none",
-      onRequestClose: onClose,
-      statusBarTranslucent: true,
-      children: body
-    }
-  );
+  if (inline) return visible ? body : /* @__PURE__ */ jsx(Fragment, { children: edge });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    edge,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible,
+        transparent: true,
+        animationType: "none",
+        onRequestClose: onClose,
+        statusBarTranslucent: true,
+        children: body
+      }
+    )
+  ] });
 }
 var navDrawer = createStyleSheet((theme) => ({
   root: {
     flex: 1,
     flexDirection: "row"
   },
+  edge: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    // The closed-drawer edge strip that catches a swipe-to-open.
+    width: theme.space[20]
+  },
   scrim: {
     backgroundColor: theme.color.scrim,
     zIndex: theme.z.overlay

package/dist/{chunk-BEDBFJND.js → chunk-ZVATDZOM.js}

@@ -1,7 +1,8 @@
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Platform, UIManager, LayoutAnimation, View, Animated, Easing, Pressable, Text } from 'react-native';
+import { Platform, UIManager, LayoutAnimation, View, Animated, Pressable, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -31,13 +32,12 @@ function Accordion({
   value,
   defaultValue,
   onValueChange,
-  anchored = false,
   motion = "full",
   items,
   children
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("accordion");
   const effectiveMotion = motion === "none" ? "none" : theme.reduceMotion ? "reduced" : motion;
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => toArray(defaultValue));
@@ -54,15 +54,15 @@ function Accordion({
       });
       return;
     }
+    const ds = theme.spring.ds;
+    const fade = theme.spring.fe.duration;
     LayoutAnimation.configureNext({
-      duration,
-      update: { type: type2 },
-      ...anchored ? {
-        create: { type: type2, property: LayoutAnimation.Properties.opacity, duration },
-        delete: { type: type2, property: LayoutAnimation.Properties.opacity, duration }
-      } : {}
+      duration: ds.duration,
+      update: { type: LayoutAnimation.Types.spring, springDamping: ds.dampingRatio },
+      create: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity, duration: fade },
+      delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity, duration: fade }
     });
-  }, [anchored, effectiveMotion, theme.motion.expand.duration]);
+  }, [effectiveMotion, theme.motion.expand.duration, theme.spring.ds, theme.spring.fe.duration]);
   const commit = React.useCallback(
     (next) => {
       if (!isControlled) setInternal(next);
@@ -113,7 +113,7 @@ function AccordionTrigger({ children }) {
   const { isOpen, toggle, motion } = useAccordionContext();
   const { value } = useAccordionItemContext();
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("accordion");
   const expanded = isOpen(value);
   const rotate = React.useRef(new Animated.Value(expanded ? 1 : 0)).current;
   React.useEffect(() => {
@@ -121,14 +121,12 @@ function AccordionTrigger({ children }) {
       rotate.setValue(expanded ? 1 : 0);
       return;
     }
-    const spec = expanded ? theme.motion.expand : theme.motion.collapse;
-    Animated.timing(rotate, {
+    Animated.spring(rotate, {
+      ...springConfig(theme, "ds"),
       toValue: expanded ? 1 : 0,
-      duration: spec.duration,
-      easing: Easing.bezier(...spec.easing),
       useNativeDriver: true
     }).start();
-  }, [expanded, motion, rotate, theme.motion.expand, theme.motion.collapse]);
+  }, [expanded, motion, rotate, theme]);
   const rotation = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
   return /* @__PURE__ */ jsxs(
     Pressable,

package/dist/coachmark/index.js

@@ -1,4 +1,7 @@
 import '../chunk-J4KLDGI4.js';
-export { Coachmark, CoachmarkArrow, CoachmarkDots, CoachmarkHint, Hotspot } from '../chunk-P23EQNRQ.js';
-import '../chunk-JUAMLEHX.js';
-import '../chunk-TKVFVF5D.js';
+export { Coachmark, CoachmarkArrow, CoachmarkDots, CoachmarkHint, Hotspot } from '../chunk-YAAHPATV.js';
+import '../chunk-H7DWSL4O.js';
+import '../chunk-APCWFOZW.js';
+import '../chunk-UXGIW7OK.js';
+import '../chunk-J64KGCGX.js';
+import '../chunk-I2KLQ2HA.js';

package/dist/code-block/index.js

@@ -1,4 +1,6 @@
 import '../chunk-ZK2H4O5P.js';
-export { CodeBlock } from '../chunk-TOXAGRDQ.js';
-import '../chunk-4ZAHCY44.js';
-import '../chunk-TKVFVF5D.js';
+export { CodeBlock } from '../chunk-RXSCIO6W.js';
+import '../chunk-C6APNDVA.js';
+import '../chunk-APCWFOZW.js';
+import '../chunk-UXGIW7OK.js';
+import '../chunk-I2KLQ2HA.js';

package/dist/color-field/index.js

@@ -1,7 +1,9 @@
-export { ColorField } from '../chunk-CDRZHT42.js';
+export { ColorField } from '../chunk-W63AJTM7.js';
 import '../chunk-KTAC4MGE.js';
-import '../chunk-ITTYJZWX.js';
+import '../chunk-7BUIKDD6.js';
 import '../chunk-3NMD74ZU.js';
 import '../chunk-NY2U3PBI.js';
-import '../chunk-6N33LFQA.js';
-import '../chunk-TKVFVF5D.js';
+import '../chunk-APCWFOZW.js';
+import '../chunk-UXGIW7OK.js';
+import '../chunk-J64KGCGX.js';
+import '../chunk-I2KLQ2HA.js';