@webority-technologies/mobile 0.0.23 → 0.0.25

package/lib/module/components/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { PickerTrigger } from "../PickerTrigger/index.js";
 
 /**
@@ -115,6 +115,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -230,7 +231,7 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = useCallback(delta => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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;
@@ -261,31 +262,31 @@ const DatePicker = props => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     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 = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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 = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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 = useCallback(() => {
@@ -305,7 +306,8 @@ const DatePicker = props => {
     })]).start();
   }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = useCallback(() => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
     const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     Animated.sequence([Animated.timing(headerScale, {
@@ -323,23 +325,26 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale, theme.components.datePicker]);
+  }, [animateViewTransition, headerScale, haptic, theme.components.datePicker]);
   const pickYear = useCallback(year => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pickDecade = useCallback(decadeStart => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) 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 = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -352,7 +357,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 = useCallback(() => {
     if (isControlled) {
       onClose?.();
@@ -381,15 +386,15 @@ const DatePicker = props => {
     });
   }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleClose();
-  }, [handleClose, theme.components.datePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = useCallback(() => {
     if (!pendingDate) return;
-    if (theme.components.datePicker?.haptic) triggerHaptic('notificationSuccess');
+    if (haptic !== false) 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/module/components/DateRangePicker/DateRangePicker.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { PickerTrigger } from "../PickerTrigger/index.js";
 
 /**
@@ -103,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     maxRange,
+    haptic,
     style,
     containerStyle,
     headerLabelStyle,
@@ -184,7 +185,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const headerLabel = useMemo(() => formatMonthYear(anchor, locale), [anchor, locale]);
   const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
   const animateMonthChange = useCallback(delta => {
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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;
@@ -215,12 +216,13 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     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 = useCallback(() => animateMonthChange(-1), [animateMonthChange]);
   const goNext = useCallback(() => animateMonthChange(1), [animateMonthChange]);
   const pressDay = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -239,7 +241,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
       } else {
         if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
           // Reject ranges longer than maxRange — restart from the new tap.
-          if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationWarning');
+          if (haptic !== false) triggerHaptic('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -250,7 +252,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     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 = useCallback(() => {
     if (isControlled) {
       onClose?.();
@@ -274,18 +276,18 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleClose();
-  }, [handleClose, theme.components.dateRangePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = useCallback(() => {
     if (!pendingStart || !pendingEnd) return;
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationSuccess');
+    if (haptic !== false) 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/module/components/Dialog/Dialog.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Modal } from "../Modal/Modal.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Dialog = props => {
@@ -25,6 +25,7 @@ const Dialog = props => {
     actionsRowStyle,
     actionButtonStyle,
     actionTextStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -36,12 +37,13 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = useCallback(action => {
     if (action.loading) return;
-    if (dialogTokens?.actionHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
+  }, [dismissOnAction, onClose, haptic]);
   return /*#__PURE__*/_jsx(Modal, {
     visible: visible,
     onRequestClose: onClose,

package/lib/module/components/Drawer/Drawer.js

@@ -26,7 +26,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
 const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
@@ -40,6 +40,7 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
     enableSwipe = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    haptic,
     containerStyle,
     children,
     accessibilityLabel,
@@ -219,9 +220,10 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const handleBackdropPress = useCallback(() => {
     if (!enableBackdropPress) return;
-    if (drawerTokens?.backdropPressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) 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/module/components/FieldBase/FieldBase.js

@@ -28,8 +28,6 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme, createAnimatedValue, fontFor } from "../../theme/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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/module/components/FloatingActionButton/FloatingActionButton.js

@@ -5,7 +5,7 @@ import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-nativ
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 
 // Local shape mirror — see types.ts FloatingActionButtonTokens for the canonical
 // definition. Declared here so the component can read tokens before types.ts is
@@ -64,6 +64,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     isScrolling = false,
     accessibilityLabel,
     accessibilityHint,
+    haptic,
     style,
     containerStyle,
     labelStyle,
@@ -83,7 +84,6 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const fabTokens = theme.components.floatingActionButton;
   const edgeOffset = fabTokens?.edgeOffset ?? 24;
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     if (!hideOnScroll) {
@@ -109,7 +109,8 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = _event => {
     if (disabled) return;
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) triggerHaptic(h);
     onPress();
   };
   const renderedIcon = icon;
@@ -178,7 +179,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         borderRadius: sizeStyles.diameter / 2
       }, theme.shadows.lg, {
         backgroundColor,
-        opacity: disabled ? 0.7 : 1
+        opacity: disabled ? 0.55 : 1
       }],
       children: [renderedIcon, isExtended ? /*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
@@ -224,6 +225,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -239,7 +241,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] = useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
@@ -296,20 +297,21 @@ const FloatingActionButtonGroup = props => {
     };
   }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = useCallback(next => {
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) triggerHaptic(h);
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handlePrimaryPress = useCallback(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = useCallback(action => {
-    if (pressHaptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handleBackdropPress = useCallback(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);

package/lib/module/components/IconButton/IconButton.js

@@ -0,0 +1,172 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = /*#__PURE__*/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 = useTheme();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = 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 = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+    onPress?.(e);
+  };
+  return /*#__PURE__*/_jsx(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__*/_jsx(Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { IconButton };
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { IconButton } from "./IconButton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -26,7 +26,7 @@ import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTi
 import { Carousel } from "../Carousel/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 
 // Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,6 +46,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -53,8 +54,6 @@ const ImageGallery = ({
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const handleIndexChange = useCallback(idx => {
@@ -63,13 +62,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = useCallback(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = useCallback(() => {
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = useCallback((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/_jsx(Pressable, {
@@ -123,7 +124,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -212,7 +213,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
@@ -224,11 +225,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const handleSwipe = useCallback(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) triggerHaptic('selection');
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
     image: image,
     index: idx,
@@ -238,8 +240,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__*/_jsx(RNModal, {
     visible: visible,
@@ -310,7 +312,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = Dimensions.get('window');
   const scale = useSharedValue(1);
@@ -346,8 +348,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = useCallback(() => {
-    if (pressHaptic) triggerHaptic('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) triggerHaptic('impactLight');
+  }, [haptic]);
   const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';