@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/components/Accordion/Accordion.js

@@ -96,7 +96,8 @@ const Accordion = props => {
     contentWrapperStyle,
     containerStyle,
     testID,
-    loading = false
+    loading = false,
+    haptic
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -114,7 +115,7 @@ const Accordion = props => {
     // Skip animation when state matches the previous value (e.g. on mount).
     if (lastExpandedRef.current === expanded) return;
     lastExpandedRef.current = expanded;
-    _reactNative.Animated.parallel([_reactNative.Animated.timing(heightAnim, {
+    const anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(heightAnim, {
       toValue: expanded ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
@@ -133,7 +134,9 @@ const Accordion = props => {
       duration: theme.motion.duration.normal,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    })]).start();
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
   const onContentLayout = (0, _react.useCallback)(e => {
     const h = e.nativeEvent.layout.height;
@@ -141,9 +144,8 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = (0, _react.useCallback)(() => {
     if (disabled) return;
-    if (theme.components.accordion?.pressHaptic ?? false) {
-      (0, _hapticUtils.triggerHaptic)('selection');
-    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -151,7 +153,7 @@ const Accordion = props => {
     }
     if (!isControlled) setInternalExpanded(!expanded);
     onChange?.(!expanded);
-  }, [disabled, group, id, expanded, isControlled, onChange, theme.components.accordion]);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
   const rotate = rotateAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/commonjs/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnimatePresence = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const reduceMotion = (0, _index2.useReducedMotion)();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) return null;
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = _reactNativeReanimated.ZoomIn.duration(dur);
+        exiting = _reactNativeReanimated.ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = _reactNativeReanimated.FadeInUp.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = _reactNativeReanimated.FadeInDown.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = _reactNativeReanimated.FadeIn.duration(dur);
+        exiting = _reactNativeReanimated.FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+exports.AnimatePresence = AnimatePresence;
+AnimatePresence.displayName = 'AnimatePresence';
+var _default = exports.default = AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

package/lib/commonjs/components/AnimatePresence/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AnimatePresence", {
+  enumerable: true,
+  get: function () {
+    return _AnimatePresence.AnimatePresence;
+  }
+});
+var _AnimatePresence = require("./AnimatePresence.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/AppBar/AppBar.js

@@ -41,7 +41,8 @@ const variantSize = (theme, variant) => {
 const ActionButton = ({
   action,
   side,
-  badgeStyle
+  badgeStyle,
+  haptic
 }) => {
   const theme = (0, _index.useTheme)();
   const {
@@ -53,9 +54,8 @@ const ActionButton = ({
   });
   const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    if (theme.components.appBar?.pressHaptic ?? false) {
-      (0, _hapticUtils.triggerHaptic)('selection');
-    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -113,6 +113,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     titleStyle,
     subtitleStyle,
     badgeStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -230,7 +231,8 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         style: styles.sideSlot,
         children: leftAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
           action: leftAction,
-          side: "left"
+          side: "left",
+          haptic: haptic
         }) : null
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
@@ -240,7 +242,8 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         children: rightActions?.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
           action: action,
           side: "right",
-          badgeStyle: badgeStyle
+          badgeStyle: badgeStyle,
+          haptic: haptic
         }, `appbar-right-${index}`))
       })]
     })]

package/lib/commonjs/components/Avatar/Avatar.js

@@ -213,13 +213,15 @@ const AvatarGroupItem = ({
 }) => {
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(opacity, {
+    const anim = _reactNative.Animated.timing(opacity, {
       toValue: 1,
       duration: ENTRANCE_DURATION_MS,
       delay,
       easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [delay, opacity]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
     style: [groupStyles.item, {

package/lib/commonjs/components/Badge/Badge.js

@@ -15,22 +15,22 @@ const toneFor = (theme, tone) => {
     case 'primary':
       return {
         background: theme.colors.primary,
-        text: theme.colors.text.inverse
+        text: theme.colors.onPrimary
       };
     case 'success':
       return {
         background: theme.colors.success,
-        text: theme.colors.text.inverse
+        text: theme.colors.onSuccess
       };
     case 'warning':
       return {
         background: theme.colors.warning,
-        text: theme.colors.text.inverse
+        text: theme.colors.onWarning
       };
     case 'info':
       return {
         background: theme.colors.info,
-        text: theme.colors.text.inverse
+        text: theme.colors.onInfo
       };
     case 'neutral':
       return {
@@ -41,7 +41,7 @@ const toneFor = (theme, tone) => {
     default:
       return {
         background: theme.colors.error,
-        text: theme.colors.text.inverse
+        text: theme.colors.onError
       };
   }
 };

package/lib/commonjs/components/Banner/Banner.js

@@ -7,6 +7,7 @@ exports.default = exports.Banner = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
 var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -19,6 +20,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     actions,
     dismissible = false,
     onDismiss,
+    haptic,
     visible = true,
     animateMount = true,
     loading = false,
@@ -44,9 +46,10 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       isFirstRun.current = false;
       if (!animateMount) return;
     }
+    let anim;
     if (visible) {
       setMounted(true);
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
+      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
         toValue: 0,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
@@ -54,9 +57,10 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         toValue: 1,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else if (mounted) {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
+      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
         toValue: -20,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
@@ -64,10 +68,12 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         toValue: 0,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
-      })]).start(() => {
+      })]);
+      anim.start(() => {
         setMounted(false);
       });
     }
+    return () => anim?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;
@@ -144,7 +150,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }), dismissible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         accessibilityRole: "button",
         accessibilityLabel: "Dismiss banner",
-        onPress: onDismiss,
+        onPress: () => {
+          const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+          if (h) (0, _hapticUtils.triggerHaptic)(h);
+          onDismiss?.();
+        },
         hitSlop: 8,
         style: ({
           pressed
@@ -169,7 +179,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           accessibilityRole: "button",
           accessibilityLabel: action.label,
-          onPress: action.onPress,
+          onPress: () => {
+            const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+            if (h) (0, _hapticUtils.triggerHaptic)(h);
+            action.onPress();
+          },
           style: ({
             pressed
           }) => [styles.actionBtn, {

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -51,7 +51,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
   const {
     tabs,
     activeTab,
-    onTabPress,
+    onChange,
     haptic = 'selection',
     showLabels = true,
     variant = 'pill',
@@ -100,12 +100,14 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
   // this value directly.
   (0, _react.useEffect)(() => {
     if (tabWidth <= 0) return;
-    _reactNative.Animated.spring(indicatorTranslateX, {
+    const anim = _reactNative.Animated.spring(indicatorTranslateX, {
       toValue: activeIndex * tabWidth,
       tension: 120,
       friction: 14,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [activeIndex, tabWidth, indicatorTranslateX]);
   const handleLayout = e => {
     const total = e.nativeEvent.layout.width;
@@ -130,7 +132,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
         useNativeDriver: true
       })]).start();
     }
-    onTabPress(tab.key);
+    onChange(tab.key);
   };
   const paddingBottom = Math.max(8, insets.bottom);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -104,7 +104,6 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     return () => sub.remove();
   }, []);
   const closedY = screenHeight; // fully off-screen
-  const minSnapPoint = resolvedSnapPoints[0] ?? 0;
   const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
 
   // translateY: 0 = top of screen, screenHeight = fully closed.
@@ -138,6 +137,13 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     currentIndexShared.value = next;
     onChange?.(next);
   }, [currentIndex, currentIndexShared, onChange]);
+  const markAnimationDone = (0, _react.useCallback)(() => {
+    isAnimatingRef.current = false;
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
+    }
+  }, [mode, currentIndexShared]);
   const animateTo = (0, _react.useCallback)((to, fromIndex, toIndex) => {
     isAnimatingRef.current = true;
     onAnimate?.(fromIndex, toIndex);
@@ -148,14 +154,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
         (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
       }
     });
-  }, [onAnimate, translateY]);
-  const markAnimationDone = (0, _react.useCallback)(() => {
-    isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the sheet wrapper.
-    if (currentIndexShared.value < 0) {
-      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
-    }
-  }, [mode, currentIndexShared]);
+  }, [onAnimate, translateY, markAnimationDone]);
   const expand = (0, _react.useCallback)(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;

package/lib/commonjs/components/Box/Box.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveBoxStyle = exports.default = exports.Stack = exports.Spacer = exports.Row = exports.Box = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const space = (theme, token) => token == null ? undefined : theme.spacing[token];
+const resolveBoxStyle = (theme, p) => {
+  const style = {};
+  if (p.p != null) style.padding = space(theme, p.p);
+  if (p.px != null) style.paddingHorizontal = space(theme, p.px);
+  if (p.py != null) style.paddingVertical = space(theme, p.py);
+  if (p.pt != null) style.paddingTop = space(theme, p.pt);
+  if (p.pr != null) style.paddingRight = space(theme, p.pr);
+  if (p.pb != null) style.paddingBottom = space(theme, p.pb);
+  if (p.pl != null) style.paddingLeft = space(theme, p.pl);
+  if (p.m != null) style.margin = space(theme, p.m);
+  if (p.mx != null) style.marginHorizontal = space(theme, p.mx);
+  if (p.my != null) style.marginVertical = space(theme, p.my);
+  if (p.mt != null) style.marginTop = space(theme, p.mt);
+  if (p.mr != null) style.marginRight = space(theme, p.mr);
+  if (p.mb != null) style.marginBottom = space(theme, p.mb);
+  if (p.ml != null) style.marginLeft = space(theme, p.ml);
+  if (p.gap != null) style.gap = space(theme, p.gap);
+  if (p.bg != null) {
+    const bgTokens = theme.colors.background;
+    style.backgroundColor = bgTokens[p.bg] ?? p.bg;
+  }
+  if (p.radius != null) style.borderRadius = theme.radius[p.radius];
+  if (p.border) {
+    style.borderWidth = theme.colors.border.width;
+    style.borderColor = theme.colors.border.primary;
+  }
+  if (p.flex != null) style.flex = p.flex;
+  if (p.align != null) style.alignItems = p.align;
+  if (p.justify != null) style.justifyContent = p.justify;
+  if (p.direction != null) style.flexDirection = p.direction;
+  if (p.wrap) style.flexWrap = 'wrap';
+  return style;
+};
+exports.resolveBoxStyle = resolveBoxStyle;
+const Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    // layout props consumed by the resolver — kept out of the View spread
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap,
+    style,
+    children,
+    ...viewProps
+  } = props;
+  const boxStyle = resolveBoxStyle(theme, {
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: [boxStyle, style],
+    ...viewProps,
+    children: children
+  });
+});
+Box.displayName = 'Box';
+/** Vertical flex container with token spacing between children (default gap `md`). */
+const Stack = exports.Stack = /*#__PURE__*/(0, _react.forwardRef)(({
+  gap = 'md',
+  ...rest
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ref: ref,
+  direction: "column",
+  gap: gap,
+  ...rest
+}));
+Stack.displayName = 'Stack';
+/** Horizontal flex container (default `align="center"`, gap `sm`). */
+const Row = exports.Row = /*#__PURE__*/(0, _react.forwardRef)(({
+  gap = 'sm',
+  align = 'center',
+  ...rest
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ref: ref,
+  direction: "row",
+  gap: gap,
+  align: align,
+  ...rest
+}));
+Row.displayName = 'Row';
+/** Fixed gap (`size`) or a flexible push (`flex: 1`) between siblings. */
+const Spacer = ({
+  size,
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  if (size != null) {
+    const value = theme.spacing[size];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID,
+      style: [{
+        width: value,
+        height: value
+      }, style]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: testID,
+    style: [{
+      flex: 1
+    }, style]
+  });
+};
+exports.Spacer = Spacer;
+Spacer.displayName = 'Spacer';
+var _default = exports.default = Box;
+//# sourceMappingURL=Box.js.map

package/lib/commonjs/components/Box/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () {
+    return _Box.Box;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function () {
+    return _Box.Row;
+  }
+});
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () {
+    return _Box.Spacer;
+  }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function () {
+    return _Box.Stack;
+  }
+});
+Object.defineProperty(exports, "resolveBoxStyle", {
+  enumerable: true,
+  get: function () {
+    return _Box.resolveBoxStyle;
+  }
+});
+var _Box = require("./Box.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Button/Button.js

@@ -72,7 +72,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     style: styles.contentRow,
     children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
       variant: "circular",
-      size: "small",
+      size: "sm",
       color: variantStyles.textColor,
       accessibilityLabel: "Loading"
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -189,7 +189,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.primary,
         hover: theme.colors.primaryHover,
         pressed: theme.colors.primaryPressed,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onPrimary,
         muted: theme.colors.primaryMuted
       };
     case 'secondary':
@@ -197,7 +197,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.secondary,
         hover: theme.colors.secondaryHover,
         pressed: theme.colors.secondaryHover,
-        on: theme.colors.text.primary,
+        on: theme.colors.onSecondary,
         muted: theme.colors.secondary
       };
     case 'success':
@@ -205,7 +205,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.success,
         hover: theme.colors.success,
         pressed: theme.colors.success,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onSuccess,
         muted: theme.colors.background.secondary
       };
     case 'warning':
@@ -213,15 +213,15 @@ const toneFor = (theme, tone) => {
         base: theme.colors.warning,
         hover: theme.colors.warning,
         pressed: theme.colors.warning,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onWarning,
         muted: theme.colors.background.secondary
       };
-    case 'danger':
+    case 'error':
       return {
         base: theme.colors.error,
         hover: theme.colors.error,
         pressed: theme.colors.error,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onError,
         muted: theme.colors.background.secondary
       };
     case 'neutral':

package/lib/commonjs/components/Card/Card.js

@@ -36,6 +36,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     loading = false,
     gradient,
     onPress,
+    haptic,
     accessibilityLabel,
     accessibilityHint,
     accessibilityRole,
@@ -155,9 +156,8 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   let rendered;
   if (isInteractive) {
     const handlePress = event => {
-      if (theme.components.card?.pressHaptic ?? false) {
-        (0, _hapticUtils.triggerHaptic)('selection');
-      }
+      const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _hapticUtils.triggerHaptic)(h);
       onPress?.(event);
     };
     rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {