@webority-technologies/mobile 0.0.23 → 0.0.25

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

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

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -120,6 +120,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -235,7 +236,7 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = (0, _react.useCallback)(delta => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     const direction = delta > 0 ? 1 : -1;
     const distance = theme.components.datePicker?.monthSlideDistance ?? 32;
     const outDuration = theme.components.datePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
@@ -266,31 +267,31 @@ const DatePicker = props => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
   const goPrev = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode, theme.components.datePicker]);
+  }, [animateMonthChange, viewMode, haptic]);
   const goNext = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode, theme.components.datePicker]);
+  }, [animateMonthChange, viewMode, haptic]);
 
   // View-mode transition: fade + scale, native driver.
   const animateViewTransition = (0, _react.useCallback)(() => {
@@ -310,7 +311,8 @@ const DatePicker = props => {
     })]).start();
   }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = (0, _react.useCallback)(() => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
     const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     _reactNative.Animated.sequence([_reactNative.Animated.timing(headerScale, {
@@ -328,23 +330,26 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale, theme.components.datePicker]);
+  }, [animateViewTransition, headerScale, haptic, theme.components.datePicker]);
   const pickYear = (0, _react.useCallback)(year => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pickDecade = (0, _react.useCallback)(decadeStart => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     // Anchor mid-decade so the year grid centers nicely on this decade.
     setAnchor(prev => new Date(decadeStart + 4, prev.getMonth(), 1));
     setViewMode('years');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pressDay = (0, _react.useCallback)(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -357,7 +362,7 @@ const DatePicker = props => {
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     }).start();
-  }, [isDisabled, selectScale, theme.motion.spring.bouncy, theme.components.datePicker]);
+  }, [isDisabled, selectScale, theme.motion.spring.bouncy, haptic]);
   const finalizeClose = (0, _react.useCallback)(() => {
     if (isControlled) {
       onClose?.();
@@ -386,15 +391,15 @@ const DatePicker = props => {
     });
   }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    if (haptic !== false) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose, theme.components.datePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingDate) return;
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    if (haptic !== false) (0, _index2.triggerHaptic)('notificationSuccess');
     onChange?.(pendingDate);
     handleClose();
-  }, [handleClose, onChange, pendingDate, theme.components.datePicker]);
+  }, [handleClose, onChange, pendingDate, haptic]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -108,6 +108,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     maxRange,
+    haptic,
     style,
     containerStyle,
     headerLabelStyle,
@@ -189,7 +190,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   const headerLabel = (0, _react.useMemo)(() => formatMonthYear(anchor, locale), [anchor, locale]);
   const weekdays = (0, _react.useMemo)(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
   const animateMonthChange = (0, _react.useCallback)(delta => {
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     const direction = delta > 0 ? 1 : -1;
     const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
     const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
@@ -220,12 +221,13 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
   const goPrev = (0, _react.useCallback)(() => animateMonthChange(-1), [animateMonthChange]);
   const goNext = (0, _react.useCallback)(() => animateMonthChange(1), [animateMonthChange]);
   const pressDay = (0, _react.useCallback)(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -244,7 +246,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
       } else {
         if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
           // Reject ranges longer than maxRange — restart from the new tap.
-          if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationWarning');
+          if (haptic !== false) (0, _index2.triggerHaptic)('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -255,7 +257,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
     }
-  }, [isDisabled, pendingStart, pendingEnd, maxRange, theme.components.dateRangePicker]);
+  }, [isDisabled, pendingStart, pendingEnd, maxRange, haptic]);
   const handleCloseModal = (0, _react.useCallback)(() => {
     if (isControlled) {
       onClose?.();
@@ -279,18 +281,18 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     });
   }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    if (haptic !== false) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose, theme.components.dateRangePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingStart || !pendingEnd) return;
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    if (haptic !== false) (0, _index2.triggerHaptic)('notificationSuccess');
     onChange?.({
       start: pendingStart,
       end: pendingEnd
     });
     handleClose();
-  }, [handleClose, onChange, pendingStart, pendingEnd, theme.components.dateRangePicker]);
+  }, [handleClose, onChange, pendingStart, pendingEnd, haptic]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]

package/lib/commonjs/components/Dialog/Dialog.js

@@ -30,6 +30,7 @@ const Dialog = props => {
     actionsRowStyle,
     actionButtonStyle,
     actionTextStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -41,12 +42,13 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = (0, _react.useCallback)(action => {
     if (action.loading) return;
-    if (dialogTokens?.actionHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
+  }, [dismissOnAction, onClose, haptic]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
     visible: visible,
     onRequestClose: onClose,

package/lib/commonjs/components/Drawer/Drawer.js

@@ -45,6 +45,7 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     enableSwipe = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    haptic,
     containerStyle,
     children,
     accessibilityLabel,
@@ -224,9 +225,10 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (!enableBackdropPress) return;
-    if (drawerTokens?.backdropPressHaptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     close();
-  }, [enableBackdropPress, close, drawerTokens?.backdropPressHaptic]);
+  }, [enableBackdropPress, close, haptic]);
 
   // Per-side container layout — must be a hook on every render path so we
   // can't gate it on the lazy-mount early-return below.

package/lib/commonjs/components/FieldBase/FieldBase.js

@@ -33,8 +33,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   - Shake-on-error or any cross-field animation.
  */
 
-const SIDES = ['top', 'right', 'bottom', 'left'];
-
 /** Map a single colour string to all four sides (shorthand expansion). */
 const expandColorSides = value => {
   if (typeof value === 'string') {

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -69,6 +69,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
     isScrolling = false,
     accessibilityLabel,
     accessibilityHint,
+    haptic,
     style,
     containerStyle,
     labelStyle,
@@ -88,7 +89,6 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   const fabTokens = theme.components.floatingActionButton;
   const edgeOffset = fabTokens?.edgeOffset ?? 24;
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     if (!hideOnScroll) {
@@ -114,7 +114,8 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   });
   const handlePress = _event => {
     if (disabled) return;
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress();
   };
   const renderedIcon = icon;
@@ -183,7 +184,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
         borderRadius: sizeStyles.diameter / 2
       }, theme.shadows.lg, {
         backgroundColor,
-        opacity: disabled ? 0.7 : 1
+        opacity: disabled ? 0.55 : 1
       }],
       children: [renderedIcon, isExtended ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
@@ -229,6 +230,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -244,7 +246,6 @@ const FloatingActionButtonGroup = props => {
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
   const secondaryGap = fabTokens?.secondaryGap ?? 16;
   const staggerMs = fabTokens?.staggerMs ?? 50;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const isControlled = typeof controlledOpen === 'boolean';
   const [internalOpen, setInternalOpen] = (0, _react.useState)(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
@@ -301,20 +302,21 @@ const FloatingActionButtonGroup = props => {
     };
   }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = (0, _react.useCallback)(next => {
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handlePrimaryPress = (0, _react.useCallback)(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = (0, _react.useCallback)(action => {
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);

package/lib/commonjs/components/IconButton/IconButton.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index2 = require("../../utils/index.js");
+var _index3 = require("../Spinner/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 SIZE_MAP = {
+  sm: {
+    diameter: 32,
+    icon: 16
+  },
+  md: {
+    diameter: 40,
+    icon: 20
+  },
+  lg: {
+    diameter: 48,
+    icon: 24
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        on: theme.colors.onSecondary,
+        fg: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess,
+        fg: theme.colors.success
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning,
+        fg: theme.colors.warning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError,
+        fg: theme.colors.error
+      };
+    case 'neutral':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        fg: theme.colors.text.primary
+      };
+    case 'primary':
+    default:
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary,
+        fg: theme.colors.primary
+      };
+  }
+};
+const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    icon,
+    onPress,
+    accessibilityLabel,
+    tone = 'primary',
+    variant = 'solid',
+    size = 'md',
+    shape = 'circle',
+    active = false,
+    disabled = false,
+    loading = false,
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    scaleTo: 0.92,
+    enabled: !isDisabled
+  });
+  const {
+    base,
+    on,
+    fg
+  } = toneFor(theme, tone);
+  const effectiveVariant = active ? 'solid' : variant;
+  let backgroundColor = 'transparent';
+  let borderColor = 'transparent';
+  let borderWidth = 0;
+  let iconColor = isDisabled ? theme.colors.text.disabled : fg;
+  if (effectiveVariant === 'solid') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : base;
+    iconColor = isDisabled ? theme.colors.text.disabled : on;
+  } else if (effectiveVariant === 'soft') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : `${base}22`;
+  } else if (effectiveVariant === 'outline') {
+    borderColor = isDisabled ? theme.colors.border.primary : base;
+    borderWidth = theme.colors.border.width;
+  }
+  const radius = shape === 'circle' ? sizeCfg.diameter / 2 : theme.radius.md;
+  const handlePress = e => {
+    if (isDisabled) return;
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
+    onPress?.(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    onPressIn: pressIn,
+    onPressOut: pressOut,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: active
+    },
+    hitSlop: 6,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.base, {
+      width: sizeCfg.diameter,
+      height: sizeCfg.diameter,
+      borderRadius: radius,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      opacity: pressed && effectiveVariant !== 'solid' ? 0.7 : 1
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = _reactNative.StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = IconButton;
+//# sourceMappingURL=IconButton.js.map

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

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

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -51,6 +51,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -58,8 +59,6 @@ const ImageGallery = ({
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = (0, _react.useState)(false);
   const handleIndexChange = (0, _react.useCallback)(idx => {
@@ -68,13 +67,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = (0, _react.useCallback)(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = (0, _react.useCallback)((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -128,7 +129,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -218,7 +219,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
@@ -230,11 +231,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
   const handleSwipe = (0, _react.useCallback)(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+      const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _index4.triggerHaptic)(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = (0, _react.useCallback)((image, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomableImage, {
     image: image,
     index: idx,
@@ -244,8 +246,8 @@ const Lightbox = ({
     maxScale: maxScale,
     minScale: minScale,
     doubleTapScale: doubleTapScale,
-    pressHaptic: pressHaptic
-  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, pressHaptic]);
+    haptic: haptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
   const caption = images[activeIndex]?.caption;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
@@ -316,7 +318,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = _reactNative.Dimensions.get('window');
   const scale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -352,8 +354,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) (0, _index4.triggerHaptic)('impactLight');
+  }, [haptic]);
   const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 

package/lib/commonjs/components/ListItem/ListItem.js

@@ -69,6 +69,7 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     left,
     right,
     onPress,
+    haptic,
     selected = false,
     disabled = false,
     size = 'md',
@@ -88,7 +89,6 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const pressHaptic = theme.components.listItem?.pressHaptic ?? false;
   const sz = (0, _react.useMemo)(() => sizeFor(theme, size), [theme, size]);
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const isInteractive = !!onPress && !disabled;
@@ -101,7 +101,8 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const handlePress = event => {
     if (!isInteractive) return;
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress?.(event);
   };
   const a11yLabel = accessibilityLabel ?? title;
@@ -296,7 +297,7 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
     backgroundColor: theme.colors.surface.pressed
   },
   disabled: {
-    opacity: 0.6
+    opacity: 0.55
   },
   leftSlot: {
     marginRight: theme.spacing.md,