@webority-technologies/mobile 0.0.15 → 0.0.21

package/lib/commonjs/components/Swipeable/Swipeable.js

@@ -36,6 +36,7 @@ const SPRING_CONFIG = {
 };
 const DRAG_ACTIVATION_OFFSET = 10;
 const RUBBER_BAND_FACTOR = 0.35;
+const FAIL_OFFSET_Y = 15;
 const toneToBg = (theme, tone) => {
   switch (tone) {
     case 'primary':
@@ -56,16 +57,32 @@ const Swipeable = props => {
     children,
     leftActions,
     rightActions,
-    threshold = 80,
-    fullSwipeThreshold = 200,
+    threshold: thresholdProp,
+    fullSwipeThreshold: fullSwipeThresholdProp,
     onSwipeOpen,
     onSwipeClose,
     disabled = false,
     containerStyle,
+    contentStyle: contentSlotStyle,
+    actionStyle,
     accessibilityLabel,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
+  const swipeTheme = theme.components.swipeable;
+  const threshold = thresholdProp ?? swipeTheme?.threshold ?? 80;
+  const fullSwipeThreshold = fullSwipeThresholdProp ?? swipeTheme?.fullSwipeThreshold ?? 200;
+  const dragActivationOffset = swipeTheme?.dragActivationOffset ?? DRAG_ACTIVATION_OFFSET;
+  const rubberBandFactor = swipeTheme?.rubberBandFactor ?? RUBBER_BAND_FACTOR;
+  const failOffsetY = swipeTheme?.failOffsetY ?? FAIL_OFFSET_Y;
+  const springConfig = {
+    damping: swipeTheme?.springDamping ?? SPRING_CONFIG.damping,
+    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 = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const hasLeft = !!leftActions && leftActions.length > 0;
   const hasRight = !!rightActions && rightActions.length > 0;
@@ -105,22 +122,22 @@ const Swipeable = props => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
     if (!first) return;
-    (0, _index2.triggerHaptic)('notificationSuccess');
+    if (fullSwipeHapticEnabled) (0, _index2.triggerHaptic)('notificationSuccess');
     first.onPress();
     // After the off-screen slide, snap back to 0 silently.
-    translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+    translateX.value = (0, _reactNativeReanimated.withSpring)(0, springConfig);
     openSideRef.current = null;
     onSwipeClose?.();
-  }, [leftActions, rightActions, translateX, onSwipeClose]);
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, fullSwipeHapticEnabled]);
   const close = (0, _react.useCallback)(() => {
-    translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+    translateX.value = (0, _reactNativeReanimated.withSpring)(0, springConfig);
     notifyClose();
-  }, [translateX, notifyClose]);
+  }, [translateX, notifyClose, springConfig]);
   const handleActionPress = (0, _react.useCallback)(action => {
-    (0, _index2.triggerHaptic)('selection');
+    if (actionPressHapticEnabled) (0, _index2.triggerHaptic)('selection');
     action.onPress();
     close();
-  }, [close]);
+  }, [close, actionPressHapticEnabled]);
 
   // ───────── Pan gesture (UI thread) ─────────
   const panGesture = (0, _react.useMemo)(() => {
@@ -133,7 +150,7 @@ const Swipeable = props => {
     const openThreshold = threshold;
     const allowLeft = hasLeft;
     const allowRight = hasRight;
-    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]).onStart(() => {
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-failOffsetY, failOffsetY]).onStart(() => {
       'worklet';
 
       dragStartX.value = translateX.value;
@@ -152,9 +169,9 @@ const Swipeable = props => {
       }
       // Rubber-band past the open position so it still feels physical past the cap.
       if (next > leftCap && allowLeft) {
-        translateX.value = leftCap + (next - leftCap) * RUBBER_BAND_FACTOR;
+        translateX.value = leftCap + (next - leftCap) * rubberBandFactor;
       } else if (next < -rightCap && allowRight) {
-        translateX.value = -rightCap + (next + rightCap) * RUBBER_BAND_FACTOR;
+        translateX.value = -rightCap + (next + rightCap) * rubberBandFactor;
       } else {
         translateX.value = next;
       }
@@ -188,10 +205,10 @@ const Swipeable = props => {
       }
 
       // Otherwise → spring back closed.
-      translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      translateX.value = (0, _reactNativeReanimated.withSpring)(0, springConfig);
       (0, _reactNativeReanimated.runOnJS)(notifyClose)();
     });
-  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX]);
+  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX, dragActivationOffset, failOffsetY, rubberBandFactor, springConfig]);
 
   // ───────── Animated styles ─────────
   const contentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
@@ -226,10 +243,10 @@ const Swipeable = props => {
     const all = [...(leftActions ?? []), ...(rightActions ?? [])];
     const match = all.find(a => a.key === name);
     if (match) {
-      (0, _index2.triggerHaptic)('selection');
+      if (a11yActionHapticEnabled) (0, _index2.triggerHaptic)('selection');
       match.onPress();
     }
-  }, [leftActions, rightActions]);
+  }, [leftActions, rightActions, a11yActionHapticEnabled]);
 
   // ───────── Render ─────────
   // No actions configured → render children directly; zero gesture overhead.
@@ -248,7 +265,7 @@ const Swipeable = props => {
     children: [hasLeft ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
       style: [styles.actionsRow, styles.actionsLeft, {
         width: leftRevealWidth
-      }, leftBgStyle],
+      }, actionStyle, leftBgStyle],
       pointerEvents: "box-none",
       children: leftActions?.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
         action: action,
@@ -259,7 +276,7 @@ const Swipeable = props => {
     }) : null, hasRight ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
       style: [styles.actionsRow, styles.actionsRight, {
         width: rightRevealWidth
-      }, rightBgStyle],
+      }, actionStyle, rightBgStyle],
       pointerEvents: "box-none",
       children: rightActions?.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
         action: action,
@@ -270,7 +287,7 @@ const Swipeable = props => {
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        style: [styles.content, contentStyle],
+        style: [styles.content, contentSlotStyle, contentStyle],
         children: children
       })
     })]

package/lib/commonjs/components/Switch/Switch.js

@@ -55,6 +55,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     haptic = 'selection',
     bounce = false,
     style,
+    containerStyle,
     trackStyle,
     thumbStyle,
     testID,
@@ -167,9 +168,15 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       })
     })
   });
-  if (!label) return switchEl;
+  if (!label) {
+    if (!containerStyle) return switchEl;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: containerStyle,
+      children: switchEl
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.row, style],
+    style: [styles.row, containerStyle, style],
     children: [switchEl, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.label, {
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,

package/lib/commonjs/components/Tabs/Tabs.js

@@ -30,12 +30,28 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     scrollable = false,
     align = 'left',
     style,
+    containerStyle,
     tabStyle,
+    tabLabelStyle,
+    tabIconStyle,
+    tabBadgeStyle,
+    dividerStyle,
+    indicatorStyle,
+    progress,
     accessibilityLabel,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tabsTokens = theme.components.tabs;
+  const tabPaddingHorizontal = tabsTokens?.tabPaddingHorizontal ?? theme.spacing.lg;
+  const tabPaddingVertical = tabsTokens?.tabPaddingVertical ?? theme.spacing.md;
+  const tabIconSpacing = tabsTokens?.tabIconSpacing ?? 6;
+  const underlineHeight = tabsTokens?.underlineHeight ?? 2;
+  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] = (0, _react.useState)({});
@@ -43,9 +59,33 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const indicatorWidth = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const activeLayout = layouts[activeKey];
 
+  // Progress-driven mode: when the caller supplies a fractional-index signal
+  // and every tab has reported its layout, the indicator's translateX/width
+  // are interpolated from that signal — the press-spring is suppressed so the
+  // two drivers don't fight for the same view.
+  const allMeasured = tabs.every(t => layouts[t.key] !== undefined);
+  const useProgress = progress !== undefined && allMeasured && tabs.length > 1;
+  const progressTranslateX = (0, _react.useMemo)(() => {
+    if (!useProgress || !progress) return null;
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].x),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+  const progressWidth = (0, _react.useMemo)(() => {
+    if (!useProgress || !progress) return null;
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].width),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+
   // Animate indicator whenever activeKey or its layout changes.
   (0, _react.useEffect)(() => {
     if (!activeLayout) return;
+    if (useProgress) return;
     const spring = theme.motion.spring.snappy;
     _reactNative.Animated.parallel([
     // Both must use the JS driver: width can't run on native, and mixing
@@ -64,7 +104,7 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       mass: spring.mass,
       useNativeDriver: false
     })]).start();
-  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy]);
+  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
   const handleLayout = (0, _react.useCallback)(key => e => {
     const {
       x,
@@ -85,22 +125,27 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const handlePress = (0, _react.useCallback)(tab => {
     if (tab.disabled) return;
     if (tab.key === activeKey) return;
-    (0, _index2.triggerHaptic)('selection');
+    if (hapticOnPress) (0, _index2.triggerHaptic)('selection');
     onChange(tab.key);
-  }, [activeKey, onChange]);
+  }, [activeKey, onChange, hapticOnPress]);
   const indicatorIsPill = variant === 'pills';
 
   // Indicator visual.
   const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
     pointerEvents: "none",
-    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, {
-      width: indicatorWidth,
+    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, indicatorIsPill ? {
+      top: pillInset,
+      bottom: pillInset
+    } : {
+      height: underlineHeight
+    }, {
+      width: progressWidth ?? indicatorWidth,
       transform: [{
-        translateX: indicatorTranslateX
+        translateX: progressTranslateX ?? indicatorTranslateX
       }],
       backgroundColor: indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
       borderRadius: indicatorIsPill ? theme.radius.full : 0
-    }]
+    }, indicatorStyle]
   });
   const renderTabs = () => tabs.map(tab => {
     const isActive = tab.key === activeKey;
@@ -122,23 +167,41 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       style: ({
         pressed
       }) => [styles.tab, scrollable ? null : styles.tabFlex, {
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        opacity: isDisabled ? 0.45 : 1,
+        paddingHorizontal: tabPaddingHorizontal,
+        paddingVertical: tabPaddingVertical,
+        opacity: isDisabled ? disabledOpacity : 1,
         backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
       }, tabStyle],
       children: [tab.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.tabIcon,
+        style: [styles.tabIcon, {
+          marginRight: tabIconSpacing
+        }, tabIconStyle],
         children: tab.icon
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.tabLabel, {
           color: isActive ? theme.colors.primary : theme.colors.text.tertiary,
           fontSize: theme.typography.fontSize.base,
           fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-        }],
+        }, tabLabelStyle],
         numberOfLines: 1,
         children: tab.label
-      })]
+      }), tab.badge !== undefined && tab.badge !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.tabBadge, {
+          marginLeft: badgeGap,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          paddingHorizontal: theme.spacing.xs
+        }, tabBadgeStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: theme.colors.primary,
+            fontSize: theme.typography.fontSize.xs,
+            fontWeight: theme.typography.fontWeight.semibold
+          },
+          numberOfLines: 1,
+          children: String(tab.badge)
+        })
+      }) : null]
     }, tab.key);
   });
   const baseRowStyle = {
@@ -152,7 +215,7 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     style: [styles.container, {
       borderBottomColor: theme.colors.border.secondary,
       borderBottomWidth: variant === 'underline' ? _reactNative.StyleSheet.hairlineWidth : 0
-    }, style],
+    }, variant === 'underline' ? dividerStyle : null, style, containerStyle],
     accessibilityRole: "tablist",
     accessibilityLabel: accessibilityLabel,
     testID: testID,
@@ -182,23 +245,23 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   tabFlex: {
     flex: 1
   },
-  tabIcon: {
-    marginRight: 6
-  },
+  tabIcon: {},
   tabLabel: {
     includeFontPadding: false
   },
+  tabBadge: {
+    minWidth: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   indicatorUnderline: {
     position: 'absolute',
     left: 0,
-    bottom: 0,
-    height: 2
+    bottom: 0
   },
   indicatorPill: {
     position: 'absolute',
     left: 0,
-    top: 4,
-    bottom: 4,
     zIndex: -1
   }
 });

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -6,12 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TimePicker = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _Button = _interopRequireDefault(require("../Button/Button.js"));
+var _PickerTrigger = require("../PickerTrigger/PickerTrigger.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
+/**
+ * TimePicker supports two modes:
+ *
+ * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ *    component renders only the modal sheet and the caller owns open/close
+ *    state plus its own trigger UI.
+ * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
+ *    field (label / value / placeholder / chevron / clear / helper / error)
+ *    and manages its own modal open state. `onSelect` is still called on
+ *    confirm.
+ */
+
 const ITEM_HEIGHT = 40;
 const VISIBLE_ITEMS = 5;
 const PICKER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
@@ -84,6 +98,8 @@ const Wheel = ({
       });
     }
   }, [selectedIndex, scrollY]);
+  const hapticEnabled = theme.components.timePicker?.haptic ?? false;
+  const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
   const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
     nativeEvent: {
       contentOffset: {
@@ -97,14 +113,14 @@ const Wheel = ({
       const idx = Math.round(y / ITEM_HEIGHT);
       if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
         const now = Date.now();
-        if (now - lastHapticAtRef.current >= HAPTIC_DEBOUNCE_MS) {
+        if (hapticEnabled && now - lastHapticAtRef.current >= hapticDebounceMs) {
           (0, _hapticUtils.triggerHaptic)('selection');
           lastHapticAtRef.current = now;
         }
         lastIndexRef.current = idx;
       }
     }
-  }), [scrollY, data.length]);
+  }), [scrollY, data.length, hapticEnabled, hapticDebounceMs]);
   const onMomentumScrollEnd = (0, _react.useCallback)(event => {
     const y = event.nativeEvent.contentOffset.y;
     const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
@@ -203,21 +219,48 @@ const Wheel = ({
     })]
   });
 };
-const TimePicker = ({
-  visible,
-  value,
-  onSelect,
-  onClose,
-  format = '12h',
-  minuteStep = 1,
-  title = 'Select Time',
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  testID,
-  style
-}) => {
+const TimePicker = props => {
+  const {
+    visible,
+    value,
+    onSelect,
+    onClose,
+    format = '12h',
+    minuteStep = 1,
+    title = 'Select Time',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    testID,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    footerButtonStyle,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle
+  } = props;
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(false);
+  const open = isControlled ? visible : internalOpen;
   const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const handleCloseModal = (0, _react.useCallback)(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
   const hours = (0, _react.useMemo)(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
   const minutes = (0, _react.useMemo)(() => range(0, 59, minuteStep), [minuteStep]);
   const periods = (0, _react.useMemo)(() => ['AM', 'PM'], []);
@@ -246,9 +289,9 @@ const TimePicker = ({
   });
   const [periodIndex, setPeriodIndex] = (0, _react.useState)(() => initial.period === 'PM' ? 1 : 0);
 
-  // Re-sync on visible toggle / value change / format / step.
+  // Re-sync on open toggle / value change / format / step.
   (0, _react.useEffect)(() => {
-    if (!visible) return;
+    if (!open) return;
     const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
     const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
     const stepped = clampMinuteToStep(m, minuteStep);
@@ -261,18 +304,20 @@ const TimePicker = ({
     const mIdx = minutes.indexOf(stepped);
     setMinuteIndex(mIdx >= 0 ? mIdx : 0);
     setPeriodIndex(period === 'PM' ? 1 : 0);
-  }, [visible, value, format, minuteStep, hours, minutes]);
+  }, [open, value, format, minuteStep, hours, minutes]);
 
   // Sheet animations.
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
   (0, _react.useEffect)(() => {
-    if (visible) {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+    if (open) {
+      _reactNative.Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      _reactNative.Animated.timing(opacity, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), _reactNative.Animated.spring(translateY, {
         toValue: 0,
         damping: theme.motion.spring.snappy.damping,
@@ -281,10 +326,10 @@ const TimePicker = ({
         useNativeDriver: true
       })]).start();
     } else {
-      (0, _index.setNativeValue)(opacity, 0);
+      opacity.setValue(0);
       (0, _index.setNativeValue)(translateY, 40);
     }
-  }, [visible, opacity, translateY, theme.motion]);
+  }, [open, opacity, translateY, theme.motion]);
   const announce = (0, _react.useCallback)(msg => {
     if (_reactNative.Platform.OS === 'ios' || _reactNative.Platform.OS === 'android') {
       _reactNative.AccessibilityInfo.announceForAccessibility(msg);
@@ -303,21 +348,21 @@ const TimePicker = ({
     announce(periods[idx] ?? '');
   }, [periods, announce]);
   const handleCancel = (0, _react.useCallback)(() => {
-    (0, _hapticUtils.triggerHaptic)('selection');
-    onClose();
-  }, [onClose]);
+    if (theme.components.timePicker?.haptic) (0, _hapticUtils.triggerHaptic)('selection');
+    handleCloseModal();
+  }, [handleCloseModal, theme.components.timePicker]);
   const handleConfirm = (0, _react.useCallback)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const period = periods[periodIndex] ?? 'AM';
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
-    (0, _hapticUtils.triggerHaptic)('notificationSuccess');
-    onSelect({
+    if (theme.components.timePicker?.haptic) (0, _hapticUtils.triggerHaptic)('notificationSuccess');
+    onSelect?.({
       hour: hour24,
       minute
     });
-    onClose();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, onClose]);
+    handleCloseModal();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, handleCloseModal, theme.components.timePicker]);
   const summary = (0, _react.useMemo)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;
@@ -328,28 +373,43 @@ const TimePicker = ({
   const formatHourItem = (0, _react.useCallback)(item => pad2(Number(item)), []);
   const formatMinuteItem = (0, _react.useCallback)(item => pad2(Number(item)), []);
   const formatPeriodItem = (0, _react.useCallback)(item => String(item), []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: visible,
+  const defaultFormatValue = (0, _react.useCallback)(t => {
+    if (format === '24h') return `${pad2(t.hour)}:${pad2(t.minute)}`;
+    const {
+      displayHour,
+      period
+    } = from24h(t.hour, '12h');
+    return `${displayHour}:${pad2(t.minute)} ${period}`;
+  }, [format]);
+  const triggerValue = !isControlled && value && Number.isFinite(value.hour) && Number.isFinite(value.minute) ? (formatValue ?? defaultFormatValue)(value) : undefined;
+  const modal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: open,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
-    onRequestClose: onClose,
+    onRequestClose: handleCloseModal,
     testID: testID,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.backdrop, {
-        opacity
-      }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+    // Plain View + collapsable={false} — see Modal.tsx backdrop comment.
+    , {
+      collapsable: false,
+      style: styles.backdrop,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         style: _reactNative.StyleSheet.absoluteFill,
-        onPress: onClose,
+        onPress: handleCloseModal,
         accessibilityLabel: "Close time picker",
         accessibilityRole: "button"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
         style: [styles.sheet, {
+          paddingBottom: insets.bottom + theme.spacing.xl,
           transform: [{
             translateY
           }]
-        }, style],
+        }, style, containerStyle],
         accessibilityViewIsModal: true,
         accessible: true,
         accessibilityRole: "none",
@@ -357,7 +417,7 @@ const TimePicker = ({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.handle
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.title,
+          style: [styles.title, headerLabelStyle],
           accessibilityRole: "header",
           children: title
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -420,7 +480,7 @@ const TimePicker = ({
             variant: "ghost",
             tone: "neutral",
             onPress: handleCancel,
-            style: styles.footerBtn,
+            style: [styles.footerBtn, footerButtonStyle],
             accessibilityHint: "Dismiss without changes",
             testID: "time-picker-cancel"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
@@ -429,7 +489,7 @@ const TimePicker = ({
             tone: "primary",
             haptic: false,
             onPress: handleConfirm,
-            style: styles.footerBtn,
+            style: [styles.footerBtn, footerButtonStyle],
             accessibilityHint: "Confirm selected time",
             testID: "time-picker-confirm"
           })]
@@ -437,6 +497,24 @@ const TimePicker = ({
       })]
     })
   });
+  if (isControlled) return modal;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerTrigger.PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValue,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle
+    }), modal]
+  });
 };
 exports.TimePicker = TimePicker;
 const styles = _reactNative.StyleSheet.create({
@@ -482,8 +560,8 @@ const buildStyles = theme => {
     },
     handle: {
       alignSelf: 'center',
-      width: 36,
-      height: 4,
+      width: theme.components.timePicker?.handleWidth ?? 36,
+      height: theme.components.timePicker?.handleHeight ?? 4,
       borderRadius: theme.radius.full,
       backgroundColor: theme.colors.border.secondary,
       marginBottom: theme.spacing.sm