@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/module/components/Swipeable/Swipeable.js

@@ -22,7 +22,7 @@ import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 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 SPRING_CONFIG = {
   damping: 22,
@@ -57,6 +57,7 @@ const Swipeable = props => {
     onSwipeOpen,
     onSwipeClose,
     disabled = false,
+    haptic,
     containerStyle,
     contentStyle: contentSlotStyle,
     actionStyle,
@@ -75,9 +76,6 @@ const Swipeable = props => {
     stiffness: swipeTheme?.springStiffness ?? SPRING_CONFIG.stiffness,
     mass: swipeTheme?.springMass ?? SPRING_CONFIG.mass
   };
-  const fullSwipeHapticEnabled = swipeTheme?.fullSwipeHaptic ?? true;
-  const actionPressHapticEnabled = swipeTheme?.actionPressHaptic ?? true;
-  const a11yActionHapticEnabled = swipeTheme?.a11yActionHaptic ?? true;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const hasLeft = !!leftActions && leftActions.length > 0;
   const hasRight = !!rightActions && rightActions.length > 0;
@@ -117,22 +115,23 @@ const Swipeable = props => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
     if (!first) return;
-    if (fullSwipeHapticEnabled) triggerHaptic('notificationSuccess');
+    if (haptic !== false) triggerHaptic('notificationSuccess');
     first.onPress();
     // After the off-screen slide, snap back to 0 silently.
     translateX.value = withSpring(0, springConfig);
     openSideRef.current = null;
     onSwipeClose?.();
-  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, fullSwipeHapticEnabled]);
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, haptic]);
   const close = useCallback(() => {
     translateX.value = withSpring(0, springConfig);
     notifyClose();
   }, [translateX, notifyClose, springConfig]);
   const handleActionPress = useCallback(action => {
-    if (actionPressHapticEnabled) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
     close();
-  }, [close, actionPressHapticEnabled]);
+  }, [close, haptic]);
 
   // ───────── Pan gesture (UI thread) ─────────
   const panGesture = useMemo(() => {
@@ -238,10 +237,10 @@ const Swipeable = props => {
     const all = [...(leftActions ?? []), ...(rightActions ?? [])];
     const match = all.find(a => a.key === name);
     if (match) {
-      if (a11yActionHapticEnabled) triggerHaptic('selection');
+      if (haptic !== false) triggerHaptic('selection');
       match.onPress();
     }
-  }, [leftActions, rightActions, a11yActionHapticEnabled]);
+  }, [leftActions, rightActions, haptic]);
 
   // ───────── Render ─────────
   // No actions configured → render children directly; zero gesture overhead.

package/lib/module/components/Tabs/Tabs.js

@@ -14,7 +14,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -33,6 +33,7 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     dividerStyle,
     indicatorStyle,
     progress,
+    haptic,
     accessibilityLabel,
     testID
   } = props;
@@ -46,7 +47,6 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const pillInset = tabsTokens?.pillInset ?? 4;
   const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
   const badgeGap = tabsTokens?.badgeGap ?? 6;
-  const hapticOnPress = tabsTokens?.hapticOnPress ?? false;
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = useState({});
@@ -122,9 +122,10 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = useCallback(tab => {
     if (tab.disabled) return;
     if (tab.key === activeKey) return;
-    if (hapticOnPress) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onChange(tab.key);
-  }, [activeKey, onChange, hapticOnPress]);
+  }, [activeKey, onChange, haptic]);
   const indicatorIsPill = variant === 'pills';
 
   // Indicator visual.

package/lib/module/components/TimePicker/TimePicker.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, 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/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
 import { PickerTrigger } from "../PickerTrigger/PickerTrigger.js";
 
@@ -70,6 +70,7 @@ const Wheel = ({
   onIndexChange,
   formatItem,
   theme,
+  haptic,
   testID
 }) => {
   const listRef = useRef(null);
@@ -92,7 +93,6 @@ const Wheel = ({
       });
     }
   }, [selectedIndex, scrollY]);
-  const hapticEnabled = theme.components.timePicker?.haptic ?? false;
   const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
   const onScroll = useMemo(() => Animated.event([{
     nativeEvent: {
@@ -107,14 +107,15 @@ const Wheel = ({
       const idx = Math.round(y / ITEM_HEIGHT);
       if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
         const now = Date.now();
-        if (hapticEnabled && now - lastHapticAtRef.current >= hapticDebounceMs) {
-          triggerHaptic('selection');
+        if (now - lastHapticAtRef.current >= hapticDebounceMs) {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) triggerHaptic(h);
           lastHapticAtRef.current = now;
         }
         lastIndexRef.current = idx;
       }
     }
-  }), [scrollY, data.length, hapticEnabled, hapticDebounceMs]);
+  }), [scrollY, data.length, haptic, hapticDebounceMs]);
   const onMomentumScrollEnd = useCallback(event => {
     const y = event.nativeEvent.contentOffset.y;
     const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
@@ -240,7 +241,8 @@ const TimePicker = props => {
     clearable,
     onClear,
     formatValue,
-    triggerStyle
+    triggerStyle,
+    haptic
   } = props;
   const isControlled = props.visible !== undefined;
   const [internalOpen, setInternalOpen] = useState(false);
@@ -345,21 +347,21 @@ const TimePicker = props => {
     announce(periods[idx] ?? '');
   }, [periods, announce]);
   const handleCancel = useCallback(() => {
-    if (theme.components.timePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleCloseModal();
-  }, [handleCloseModal, theme.components.timePicker]);
+  }, [handleCloseModal, haptic]);
   const handleConfirm = useCallback(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const period = periods[periodIndex] ?? 'AM';
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
-    if (theme.components.timePicker?.haptic) triggerHaptic('notificationSuccess');
+    if (haptic !== false) triggerHaptic('notificationSuccess');
     onChange?.({
       hour: hour24,
       minute
     });
     handleCloseModal();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, theme.components.timePicker]);
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, haptic]);
   const summary = useMemo(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;
@@ -443,6 +445,7 @@ const TimePicker = props => {
             onIndexChange: handleHourIndex,
             formatItem: formatHourItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-hour"
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.separator,
@@ -455,6 +458,7 @@ const TimePicker = props => {
             onIndexChange: handleMinuteIndex,
             formatItem: formatMinuteItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-minute"
           }), format === '12h' ? /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(View, {
@@ -467,6 +471,7 @@ const TimePicker = props => {
               onIndexChange: handlePeriodIndex,
               formatItem: formatPeriodItem,
               theme: theme,
+              haptic: haptic,
               testID: "time-picker-period"
             })]
           }) : null]

package/lib/module/components/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 export { Accordion, AccordionGroup } from "./Accordion/index.js";
+export { AnimatePresence } from "./AnimatePresence/index.js";
 export { Avatar, AvatarGroup } from "./Avatar/index.js";
 export { Badge } from "./Badge/index.js";
 export { Banner } from "./Banner/index.js";

package/lib/module/utils/hapticUtils.js

@@ -48,4 +48,13 @@ export const triggerHaptic = (type = 'selection') => {
 export const setHapticImplementation = impl => {
   hapticImpl = impl;
 };
+
+/**
+ * Resolves a component's `haptic` prop to the type that should fire, or null
+ * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
+ * falls back to the component's sensible default. Pair with `triggerHaptic`:
+ *   const h = resolveHaptic(haptic, 'selection');
+ *   if (h) triggerHaptic(h);
+ */
+export const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
 //# sourceMappingURL=hapticUtils.js.map

package/lib/module/utils/index.js

@@ -2,7 +2,7 @@
 
 export { ScreenDimensions, Breakpoints, Responsive, isScreenSize, isTablet } from "./responsive.js";
 export { Spacing, Padding, Margin } from "./spacing.js";
-export { triggerHaptic, setHapticImplementation } from "./hapticUtils.js";
+export { triggerHaptic, setHapticImplementation, resolveHaptic } from "./hapticUtils.js";
 export { shadowStyle } from "./shadows.js";
 export { compressImage } from "./imageCompression.js";
 //# sourceMappingURL=index.js.map

package/lib/typescript/commonjs/components/Accordion/Accordion.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type AccordionVariant = 'plain' | 'card';
 export interface AccordionProps {
     title: string;
@@ -26,6 +27,8 @@ export interface AccordionProps {
      * accordion so the layout doesn't shift when data arrives.
      */
     loading?: boolean;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
 }
 export interface AccordionGroupProps {
     children: React.ReactNode;

package/lib/typescript/commonjs/components/AnimatePresence/AnimatePresence.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type PresencePreset = 'fade' | 'scale' | 'slide-up' | 'slide-down';
+export interface AnimatePresenceProps {
+    /**
+     * Render conditionally. When this goes null / undefined / false the exit
+     * animation plays before the content unmounts; when it returns the enter
+     * animation plays. Drive it like `{visible ? <Panel /> : null}`.
+     */
+    children?: React.ReactNode;
+    /** Enter/exit preset. Default `'fade'`. */
+    preset?: PresencePreset;
+    /** Animation duration (ms). Defaults to `theme.motion.duration.base`. */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * 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.
+ */
+declare const AnimatePresence: React.FC<AnimatePresenceProps>;
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.d.ts.map

package/lib/typescript/commonjs/components/AnimatePresence/index.d.ts

@@ -0,0 +1,3 @@
+export { AnimatePresence } from './AnimatePresence';
+export type { AnimatePresenceProps, PresencePreset } from './AnimatePresence';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/AppBar/AppBar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Animated, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type AppBarVariant = 'default' | 'large' | 'compact';
 export type AppBarTitleAlignment = 'left' | 'center';
 export interface AppBarAction {
@@ -36,6 +37,11 @@ export interface AppBarProps {
     subtitleStyle?: StyleProp<ViewStyle>;
     /** Style applied to the right-action badge bubble. */
     badgeStyle?: StyleProp<ViewStyle>;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     testID?: string;
 }
 declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<View>>;

package/lib/typescript/commonjs/components/Banner/Banner.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, View as RNView, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type BannerVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
 export interface BannerAction {
     label: string;
@@ -14,6 +15,8 @@ export interface BannerProps {
     actions?: BannerAction[];
     dismissible?: boolean;
     onDismiss?: () => void;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     visible?: boolean;
     animateMount?: boolean;
     /**

package/lib/typescript/commonjs/components/Card/Card.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, StyleProp, View as RNView, ViewStyle } from 'react-native';
 import type { GradientDefinition } from '../../theme/types';
+import type { HapticType } from '../../utils/hapticUtils';
 export type CardVariant = 'elevated' | 'outlined' | 'filled';
 export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type CardRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -32,6 +33,8 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
      */
     gradient?: string | GradientDefinition;
     onPress?: (event: GestureResponderEvent) => void;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     /** Alias for `style` — applied to the outer card element. */

package/lib/typescript/commonjs/components/Checkbox/Checkbox.d.ts

@@ -14,6 +14,7 @@ export interface CheckboxProps extends Omit<PressableProps, 'style' | 'children'
     size?: CheckboxSize;
     tone?: CheckboxTone;
     accessibilityLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     boxStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Chip/Chip.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type ChipVariant = 'filled' | 'outlined';
 export type ChipTone = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
 export type ChipSize = 'sm' | 'md';
@@ -20,6 +21,8 @@ export interface ChipProps {
      */
     loading?: boolean;
     accessibilityLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     /** Style override for the chip outer container (alias to style, applied after). */

package/lib/typescript/commonjs/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger';
 export type DatePickerMode = 'modal' | 'inline';
 export type WeekStart = 0 | 1 | 6;
@@ -40,6 +41,8 @@ export interface DatePickerProps {
     navButtonStyle?: StyleProp<ViewStyle>;
     /** Style override for the cancel/confirm footer buttons. */
     footerButtonStyle?: StyleProp<ViewStyle>;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     testID?: string;
     label?: string;
     placeholder?: string;

package/lib/typescript/commonjs/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger';
 export type WeekStart = 0 | 1 | 6;
 export interface DateRange {
@@ -48,6 +49,11 @@ export interface DateRangePickerProps {
     confirmLabel?: string;
     cancelLabel?: string;
     maxRange?: number;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     /** Outer container style applied to the calendar card. */
     containerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type DialogVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 export type DialogActionTone = 'primary' | 'neutral' | 'error';
 export interface DialogAction {
@@ -34,6 +35,8 @@ export interface DialogProps {
     actionButtonStyle?: StyleProp<ViewStyle>;
     /** Style override applied to every action button label text. */
     actionTextStyle?: StyleProp<TextStyle>;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     testID?: string;
 }
 declare const Dialog: React.FC<DialogProps>;

package/lib/typescript/commonjs/components/Drawer/Drawer.d.ts

@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 export interface DrawerProps {
     /** Controlled visibility. Omit to use internal state. */
@@ -37,6 +38,8 @@ export interface DrawerProps {
     enableBackdropPress?: boolean;
     /** Backdrop opacity at fully-open state (0..1). */
     backdropOpacity?: number;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     accessibilityLabel?: string;

package/lib/typescript/commonjs/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type FloatingActionButtonSize = 'sm' | 'md' | 'lg';
 export type FloatingActionButtonTone = 'primary' | 'success' | 'warning' | 'error' | 'neutral';
 export type FloatingActionButtonPosition = 'bottomRight' | 'bottomLeft' | 'bottomCenter';
@@ -18,6 +19,8 @@ export interface FloatingActionButtonProps {
     isScrolling?: boolean;
     accessibilityLabel: string;
     accessibilityHint?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<ViewStyle>;
@@ -43,6 +46,8 @@ export interface FloatingActionButtonGroupProps {
     bottomOffset?: number;
     size?: FloatingActionButtonSize;
     accessibilityLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     containerStyle?: StyleProp<ViewStyle>;
     secondaryActionStyle?: StyleProp<ViewStyle>;
     labelPillStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/ImageGallery/ImageGallery.d.ts

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export interface GalleryImage {
     source: ImageSourcePropType;
     caption?: string;
@@ -31,6 +32,11 @@ export interface ImageGalleryProps {
     enableLightbox?: boolean;
     enablePinchZoom?: boolean;
     onIndexChange?: (idx: number) => void;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     /**
      * When true, renders the component as its authored skeleton placeholder shape.
      * The placeholder mirrors the real layout's footprint so the UI doesn't reflow

package/lib/typescript/commonjs/components/ListItem/ListItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { GestureResponderEvent, StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 export interface ListItemProps {
@@ -15,6 +16,8 @@ export interface ListItemProps {
     left?: React.ReactNode;
     right?: React.ReactNode;
     onPress?: (event: GestureResponderEvent) => void;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     selected?: boolean;
     disabled?: boolean;
     size?: ListItemSize;

package/lib/typescript/commonjs/components/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, View as RNView, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type ModalPresentation = 'centered' | 'bottom' | 'fullScreen';
 export interface ModalProps {
     visible: boolean;
@@ -21,6 +22,11 @@ export interface ModalProps {
      * Opt-in: when undefined, focus behaviour is unchanged.
      */
     restoreFocusRef?: React.RefObject<RNView | null>;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     testID?: string;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<View>>;

package/lib/typescript/commonjs/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export type NumberInputSize = 'sm' | 'md' | 'lg';
 export type NumberInputVariant = 'inline' | 'horizontal' | 'stacked';
 export interface NumberInputRef {
@@ -23,6 +24,8 @@ export interface NumberInputProps {
     size?: NumberInputSize;
     variant?: NumberInputVariant;
     unit?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export type OTPInputSize = 'sm' | 'md' | 'lg';
 export interface OTPInputRef {
     focus: () => void;
@@ -18,6 +19,11 @@ export interface OTPInputProps {
     error?: boolean | string;
     size?: OTPInputSize;
     secure?: boolean;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     cellStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Rating/Rating.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, View as RNView, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type RatingTone = 'primary' | 'warning';
 export type RatingSize = 'sm' | 'md' | 'lg' | number;
 export interface RatingProps {
@@ -17,6 +18,11 @@ export interface RatingProps {
      * when data arrives. Use this while the data driving the component is being fetched.
      */
     loading?: boolean;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/SearchBar/SearchBar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextInput } from 'react-native';
 import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
 export type SearchBarSize = 'sm' | 'md' | 'lg';
 export type SearchBarVariant = 'filled' | 'outlined';
 export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> {
@@ -19,6 +20,8 @@ export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' |
     size?: SearchBarSize;
     variant?: SearchBarVariant;
     cancelLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     testID?: string;

package/lib/typescript/commonjs/components/SegmentedControl/SegmentedControl.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export type SegmentedControlSize = 'sm' | 'md';
 export type SegmentedControlTone = 'primary' | 'neutral';
 export type SegmentValue = string | number;
@@ -25,6 +26,8 @@ export interface SegmentedControlProps {
     fullWidth?: boolean;
     disabled?: boolean;
     tone?: SegmentedControlTone;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Select/Select.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
 export type SelectSize = 'sm' | 'md' | 'lg';
 export type SelectValue = string | number;
 export interface SelectOption {
@@ -38,6 +39,11 @@ interface BaseSelectProps<T = SelectOption> {
     getOptionIcon?: (option: T) => React.ReactNode;
     placeholder?: string;
     searchable?: boolean;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
     label?: string;
     error?: string;
     disabled?: boolean;