pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/surface/SurfaceProps.js

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

package/lib/module/modules/surface/index.js

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

package/lib/module/modules/swipeable-row/MODULE.md

@@ -1,7 +1,14 @@
-# swipeable-row/
+# swipeable-row/ — a row with swipe-to-reveal actions
 
 Swipe-to-reveal row actions via gesture-handler + reanimated.
 
+## Round 5 tonal
+
+No decorative container border here — `swipeableRowStructure` was already borderless; the only
+border is the real focus ring (kept). Action buttons gained `usePressState`'s scale/opacity + overlay
+feedback and `android_ripple`, matching `Button`/`BottomNavTab` — previously a plain `Pressable` with
+no press feedback at all.
+
 ## Motion contract
 
 - The row follows the finger on the **UI thread**: a single `Gesture.Pan()` writes a `translateX`
@@ -115,6 +122,9 @@ Known gaps:
 - `SwipeableRow.render.test.tsx` — the accessibility-action contract, the hidden trays, and the tap
   affordance: hidden-from-AT wrapper + `pointerEvents="box-none"`, the single-action direct-press
   path, the multi-action `Menu` path (real rendered items, real dispatch to the pressed action's own
-  `onPress`), and the button's own rendered touch-target size.
+  `onPress`), and the button's own rendered touch-target size. Uses the root Jest Reanimated mock so
+  the composed `Menu` sheet's `interpolate` path is covered without a duplicate mock.
 - `SwipeableRow.motion.test.tsx` — both halves of the reduce-motion contract, with
   `withSpring`/`withTiming` mocked (a shared value written as a plain number proves nothing tweened).
+
+Uses `scheduleOnRN` from `react-native-worklets` where JS thread callbacks are required.

package/lib/module/modules/swipeable-row/SwipeableRow.js

@@ -16,12 +16,18 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Menu } from "../menu/index.js";
 import { resolveSwipeableActionTone, SWIPE_ACTION_WIDTH, swipeableActionButtonStructure, swipeableActionFocusRingStructure, swipeableActionsStructure, swipeableMoreAffordanceStructure, swipeableRowStructure } from "./SwipeableRow.variants.js";
@@ -29,6 +35,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 18;
 const NO_ACTIONS = [];
+const AnimatedActionPressable = Animated.createAnimatedComponent(Pressable);
 export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
   children,
   leftActions = NO_ACTIONS,
@@ -37,10 +44,21 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const translateX = useSharedValue(0);
+  /** `-1` = right tray open, `0` = closed, `1` = left tray open. */
+  const openState = useSharedValue(0);
   const leftWidth = leftActions.length * SWIPE_ACTION_WIDTH;
   const rightWidth = rightActions.length * SWIPE_ACTION_WIDTH;
+  const fireSnapHaptic = useCallback(() => {
+    if (!reducedMotion) haptics.selection();
+  }, [haptics, reducedMotion]);
   const spring = motion.spring("snappy");
   const settleMs = motion.duration("fast");
   const animated = motion.enabled;
@@ -65,8 +83,13 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
 
     const openLeft = translateX.value > leftWidth / 2;
     const openRight = translateX.value < -rightWidth / 2;
+    const next = openLeft ? 1 : openRight ? -1 : 0;
     settle(openLeft ? leftWidth : openRight ? -rightWidth : 0);
-  }), [leftWidth, rightWidth, settle, translateX]);
+    if (next !== openState.value) {
+      openState.value = next;
+      scheduleOnRN(fireSnapHaptic);
+    }
+  }), [leftWidth, rightWidth, settle, translateX, openState, fireSnapHaptic]);
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{
       translateX: translateX.value
@@ -169,7 +192,7 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
       gesture: pan,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: contentStyle,
-        children: children
+        children: renderNodeSlot(children, childrenSlotStyle)
       })
     }), hasActions &&
     /*#__PURE__*/
@@ -180,10 +203,11 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
     // actions rather than a needed one. See MODULE.md "Tap affordance" for the full reasoning.
     _jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-more-affordance`,
-      pointerEvents: "box-none",
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: moreAffordanceStyle,
+      style: [moreAffordanceStyle, {
+        pointerEvents: "box-none"
+      }],
       children: orderedActions.length === 1 ? soleActionButton : /*#__PURE__*/_jsx(Menu, {
         testID: testID === undefined ? undefined : `${testID}-more-menu`,
         items: menuItems,
@@ -200,6 +224,7 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
 }) {
   const colors = useMemo(() => resolveSwipeableActionTone(theme.colors, action.tone ?? "accent"), [theme, action.tone]);
   const [focused, setFocused] = useState(false);
+  const press = usePressState(false);
   const handlePress = useCallback(() => onRun(action.id), [onRun, action.id]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
@@ -213,23 +238,37 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
   const focusRingStyle = useMemo(() => [swipeableActionFocusRingStructure(theme), {
     borderColor: theme.colors.border.focus
   }], [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode)
+  }), [theme.mode]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedActionPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: action.label
-    // `accessibilityElementsHidden`/`importantForAccessibility` on the tray are no-ops in
-    // react-native-web (zero occurrences in its dist), so the tray's buttons would otherwise be
-    // invisible tab stops painted over by the row's own content.
+    // RNW ignores the tray's a11y-hiding props, so this stays a reachable tab stop otherwise.
     ,
     tabIndex: -1,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    style: buttonStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
+    android_ripple: androidRipple,
+    style: [buttonStyle, styles.overflowHidden, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), action.icon ? /*#__PURE__*/_jsx(Icon, {
       name: action.icon,
       size: ICON_SIZE,
@@ -241,4 +280,9 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
     })]
   });
 });
+const styles = StyleSheet.create({
+  overflowHidden: {
+    overflow: "hidden"
+  }
+});
 //# sourceMappingURL=SwipeableRow.js.map

package/lib/module/modules/swipeable-row/SwipeableRowProps.js

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

package/lib/module/modules/switch/MODULE.md

@@ -21,9 +21,12 @@ two colours onto ROLE tokens and leaves sizing/animation to RN.
 | `value` | `boolean` | — | Required. Controlled — RN's own controlled-component contract. |
 | `onValueChange` | `(value: boolean) => void` | — | Required. |
 | `disabled` | `boolean` | `false` | Blocks toggling; RN renders its own native disabled treatment. |
-| `accessibilityLabel` | `string` | — | **Required** — a switch never renders visible text, so this is the only accessible name (mirrors `Button`'s icon-only contract). |
+| `accessibilityLabel` | `string` | — | **Required always** (type-level). `label` defaults from it when omitted. |
+| `label` | `string` | — | Visible label; when set, the row wrapper takes `${testID}-row`. |
+| `description` | `string` | — | Muted helper under `label`. |
+| `errorText` | `string` | — | Danger caption under `label`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once. |
-| `testID` | `string` | — | |
+| `testID` | `string` | — | On the inner `<Switch>`; `${testID}-row` on the row wrapper when `label` is set, so `getByTestId(testID)` resolves to one node. |
 
 No `size` prop — RN's `Switch` is a native primitive with an intrinsic size that doesn't scale
 cleanly. No `variant`/`tone` either: a switch has exactly one on/off visual language, so there is
@@ -77,3 +80,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+Toggling fires `useHaptics().selection()` alongside `onValueChange`.

package/lib/module/modules/switch/Switch.js

@@ -7,38 +7,55 @@
  * to RN — which is also why there is no `size` prop.
  */
 
-import { memo } from "react";
-import { Switch as RNSwitch } from "react-native";
+import { memo, useCallback, useMemo } from "react";
+import { Switch as RNSwitch, View } from "react-native";
+import { useHaptics } from "../../core/haptics/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { useThemeColors } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
 import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Switch = /*#__PURE__*/memo(function Switch({
   value,
   onValueChange,
   disabled = false,
   accessibilityLabel,
+  label,
+  description,
+  errorText,
   style,
   testID
 }) {
-  // `trackColor`/`thumbColor` accept no token object — the same raw-string escape hatch as
-  // `placeholderTextColor` — so colour is resolved via `useThemeColors()`, not `useTheme().colors`.
+  const theme = useTheme();
   const colors = useThemeColors();
+  const haptics = useHaptics();
   const {
     trackOff,
     trackOn,
     thumbColor
   } = resolveSwitchColors(colors);
+  const resolvedLabel = label ?? accessibilityLabel;
   const a11y = resolveSwitchAccessibility({
     value,
     disabled
   });
-  return /*#__PURE__*/_jsx(RNSwitch, {
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[3]
+  }), [theme]);
+  const handleValueChange = useCallback(next => {
+    haptics.selection();
+    onValueChange(next);
+  }, [haptics, onValueChange]);
+  const control = /*#__PURE__*/_jsx(RNSwitch, {
     testID: testID,
     value: value,
-    onValueChange: onValueChange,
+    onValueChange: handleValueChange,
     disabled: disabled,
     accessibilityRole: a11y.accessibilityRole,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: resolvedLabel,
     accessibilityState: a11y.accessibilityState,
     trackColor: {
       false: trackOff,
@@ -47,7 +64,30 @@ export const Switch = /*#__PURE__*/memo(function Switch({
     thumbColor: thumbColor,
     ios_backgroundColor: trackOff,
     hitSlop: SWITCH_HIT_SLOP,
-    style: style
+    style: label === undefined ? style : undefined
+  });
+  if (label === undefined) return control;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ? `${testID}-row` : undefined,
+    style: [rowStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        gap: theme.space[1]
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
+        children: description
+      }) : null, errorText ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "danger",
+        children: errorText
+      }) : null]
+    }), control]
   });
 });
 //# sourceMappingURL=Switch.js.map

package/lib/module/modules/switch/Switch.variants.js

@@ -6,6 +6,7 @@
  * measuring real palettes instead of eyeballing a hex.
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 /**
  * Maps the switch's track + thumb onto ROLE colours — never a hardcoded hex, so it's guaranteed
  * legible in both modes and can never be an off-palette value an app invented.
@@ -17,6 +18,7 @@
  * non-text UI surface), while `bg.canvas` clears ≥3:1 against BOTH `trackOff` and `trackOn` on
  * every brand × mode — see `__tests__/Switch.test.ts`.
  */
+export { MIN_TOUCH_TARGET };
 export function resolveSwitchColors(colors) {
   return {
     trackOff: colors.border.interactive,
@@ -47,9 +49,6 @@ export function resolveSwitchAccessibility(input) {
   };
 }
 
-/** WCAG 2.5.5 (AAA) / HIG floor every interactive control is held to — same constant as `Button`. */
-export const MIN_TOUCH_TARGET = 44;
-
 /**
  * RN's `Switch` has no `size` prop (a native intrinsic control doesn't scale cleanly), so its
  * visual height is a platform constant rather than something this library chooses. 31 is iOS's

package/lib/module/modules/switch/SwitchProps.js

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

package/lib/module/modules/tabs/MODULE.md

@@ -1,8 +1,8 @@
 # tabs/ — a single-select strip with a sliding active indicator
 
-`Tabs` renders ONLY the tab strip — content switching is the consumer's job. There is no
-`TabPanel` and it never renders children per tab, mirroring how real design systems split `Tabs`
-from panel content and keeping this component simple and composable.
+`Tabs` renders the tab strip and, optionally, panel content: pass `panels` keyed by tab `value` and
+it renders the active one below the strip. Omit `panels` and it is strip-only — content switching
+stays the consumer's job. There is no separate `TabPanel` component.
 
 ## Files
 
@@ -18,12 +18,14 @@ from panel content and keeping this component simple and composable.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `items` | `{ label: string; value: string; icon?: IconName }[]` | — | Rendered in order. `label` is always required — there is no icon-only tab, so there is no a11y trap to type-enforce against here. |
+| `items` | `{ label: string; value: string; icon?: IconName; count?: number }[]` | — | Rendered in order. `label` is always required — there is no icon-only tab, so there is no a11y trap to type-enforce against here. `count` renders a `Badge` beside the label. |
 | `value` | `string` | — | The active item's `value`. |
 | `onValueChange` | `(value: string) => void` | — | Fires with the pressed tab's `value`. |
 | `size` | `sm \| md \| lg` | `md` | 36 / 44 / 52 dp visual height; `sm` reaches 44 via `hitSlop`. |
+| `panels` | `Partial<Record<string, ReactNode>>` | — | Panel content keyed by tab `value`. Omitted means strip-only. |
+| `lazyPanels` | `boolean` | `true` | A panel mounts on first visit and stays mounted; `false` renders only the active panel. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
-| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), and the indicator gets `` `${testID}-indicator` ``, when set. |
+| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), the indicator gets `` `${testID}-indicator` `` and the panel host `` `${testID}-panels` ``, when set. |
 
 No per-item `disabled` and no `tone` — every active label + indicator is the same accent role,
 every inactive label is the same neutral `fg.muted`. Same reasoning as `RadioGroup`: a single-
@@ -57,14 +59,14 @@ purpose control has no closed union of appearances to resolve.
 - **2.3.3** — the indicator's movement is two `Animated.Value`s (`translateX`, `scaleX`) driven off
   each tab's own `onLayout` measurement. When `useMotion().enabled` is false (reduced motion or the
   global kill switch) they're set with `setValue` (an instant snap) instead of tweening — verified
-  in the render tests by spying on `Animated.timing` and asserting it isn't called.
+  in the render tests by spying on `Animated.timing` and asserting it isn't called. Tab presses use
+  `usePressState` (scale + state-layer overlay) and fire `useHaptics().selection()`.
 
 ## Indicator motion (transform-only, native driver)
 
 The indicator is a **1dp-wide bar** (`TABS_INDICATOR_UNIT_WIDTH`) stretched by an animated `scaleX`
-and positioned by an animated `translateX`. It previously animated `left`/`width`, which forces
-`useNativeDriver: false` and a layout pass per frame; only `opacity`/`transform` can run on the
-native driver, so the strip now animates entirely off the JS thread.
+and positioned by an animated `translateX`. Only `opacity`/`transform` run on the native driver, so
+animating `left`/`width` instead would force `useNativeDriver: false` and a layout pass per frame.
 
 Geometry: RN scales around the element's centre, so for a tab measured at `{x, width}` the targets
 are `translateX = x + width / 2 - 0.5` and `scaleX = width`. The structural resolver carries **no**
@@ -107,8 +109,3 @@ private, memo'd `TabStripItem`: the strip passes primitives plus the two stable
 arrays, so a selection change re-renders the two affected tabs rather than the whole strip. The
 indicator's structural style, the root style array and the resolved colours are memoized.
 
-## Modernization (v1.0.7)
-
-- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
-- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
-- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/tabs/Tabs.js

@@ -16,13 +16,20 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { motionParallel, useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
+import { Badge } from "../badge/index.js";
 import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsFocusRingStructure, tabsIndicatorStructure, tabsStripStructure, TABS_INDICATOR_UNIT_WIDTH, TABS_SIZES } from "./Tabs.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 /** Centre of the 1dp bar in its own untransformed box — `scaleX` grows around it, not from the left. */
 const INDICATOR_ORIGIN = TABS_INDICATOR_UNIT_WIDTH / 2;
 const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
@@ -31,54 +38,69 @@ const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
   size,
   theme,
   labelColor,
-  pressedColor,
   hitSlop,
   fontSize,
   iconSize,
   onPress,
   onLayout,
+  hapticsSelection,
   testID
 }) {
   const a11y = resolveTabAccessibility({
     selected
   });
-  // Keyboard / external-keyboard / assistive-tech focus, held per tab so a focus change re-renders
-  // one item instead of the strip (same reasoning `BottomNavTab` documents).
+  const press = usePressState(false);
   const [focused, setFocused] = useState(false);
-  const handlePress = useCallback(() => onPress(item.value), [onPress, item.value]);
-  const handleLayout = useCallback(event => onLayout(item.value, event), [onLayout, item.value]);
+  const handlePress = useCallback(() => {
+    hapticsSelection();
+    onPress(item.value);
+  }, [hapticsSelection, onPress, item.value]);
+  const handleLayout = useCallback(event => {
+    press.onLayout(event);
+    onLayout(item.value, event);
+  }, [onLayout, item.value, press]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => [tabsFocusRingStructure(theme), {
     borderColor: theme.colors.border.focus
   }], [theme]);
-  const pressedStyle = useMemo(() => ({
-    backgroundColor: pressedColor
-  }), [pressedColor]);
-  const itemStyle = useCallback(({
-    pressed
-  }) => [tabItemStructure(theme, {
+  const itemStyle = useMemo(() => [tabItemStructure(theme, {
     size
-  }), pressed ? pressedStyle : null], [theme, size, pressedStyle]);
-  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+  }), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights[selected ? "semibold" : "medium"]), {
     fontSize,
     color: labelColor
-  }], [theme, fontSize, labelColor]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  }], [theme, fontSize, labelColor, selected]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     "aria-selected": a11y["aria-selected"],
     accessibilityLabel: item.label,
     onPress: handlePress,
     onLayout: handleLayout,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: itemStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
       name: item.icon,
       size: iconSize,
@@ -88,7 +110,11 @@ const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
       numberOfLines: 1,
       style: labelStyle,
       children: item.label
-    })]
+    }), item.count !== undefined && item.count > 0 ? /*#__PURE__*/_jsx(Badge, {
+      label: String(item.count),
+      size: "sm",
+      tone: "neutral"
+    }) : null]
   });
 });
 export const Tabs = /*#__PURE__*/memo(function Tabs({
@@ -96,11 +122,14 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
   value,
   onValueChange,
   size = "md",
+  panels,
+  lazyPanels = true,
   style,
   testID
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
   const colors = useMemo(() => resolveTabsColors(theme.colors), [theme.colors]);
   const spec = TABS_SIZES[size];
   const [layouts, setLayouts] = useState({});
@@ -131,46 +160,81 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
     const toX = activeLayout.x + activeLayout.width / 2 - INDICATOR_ORIGIN;
     const toScaleX = activeLayout.width / TABS_INDICATOR_UNIT_WIDTH;
     if (!motion.enabled) {
-      indicatorX.setValue(toX);
-      indicatorScaleX.setValue(toScaleX);
+      indicatorX.value = toX;
+      indicatorScaleX.value = toScaleX;
       return;
     }
-    running.current = Animated.parallel([motion.timing(indicatorX, toX), motion.timing(indicatorScaleX, toScaleX)]);
+    running.current = motionParallel(motion.timing(indicatorX, toX), motion.timing(indicatorScaleX, toScaleX));
     running.current.start();
     return () => running.current?.stop();
   }, [activeLayout, motion, indicatorX, indicatorScaleX]);
   useEffect(() => () => running.current?.stop(), []);
-  const indicatorStyle = useMemo(() => [tabsIndicatorStructure(theme), {
-    backgroundColor: colors.indicator,
+  const indicatorStatic = useMemo(() => [tabsIndicatorStructure(theme), {
+    backgroundColor: colors.indicator
+  }], [theme, colors.indicator]);
+  const indicatorMotion = useAnimatedStyle(() => ({
     transform: [{
-      translateX: indicatorX
+      translateX: indicatorX.value
     }, {
-      scaleX: indicatorScaleX
+      scaleX: indicatorScaleX.value
     }]
-  }], [theme, colors.indicator, indicatorX, indicatorScaleX]);
-  const rootStyle = useMemo(() => [tabsStripStructure(theme), style], [theme, style]);
+  }));
+  const rootStyle = useMemo(() => [tabsStripStructure(theme)], [theme]);
+  const outerStyle = useMemo(() => [style], [style]);
+  const [mountedPanelKeys, setMountedPanelKeys] = useState(() => new Set([value]));
+  useEffect(() => {
+    if (panels === undefined) return;
+    if (!lazyPanels) return;
+    setMountedPanelKeys(prev => {
+      if (prev.has(value)) return prev;
+      const next = new Set(prev);
+      next.add(value);
+      return next;
+    });
+  }, [value, panels, lazyPanels]);
+  const panelKeys = useMemo(() => {
+    if (panels === undefined) return [];
+    if (!lazyPanels) return [value];
+    return [...mountedPanelKeys];
+  }, [panels, lazyPanels, value, mountedPanelKeys]);
+  const panelTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   return /*#__PURE__*/_jsxs(View, {
-    testID: testID,
-    accessibilityRole: "tablist",
-    style: rootStyle,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      testID: testID ? `${testID}-indicator` : undefined,
-      style: indicatorStyle
-    }), items.map(item => /*#__PURE__*/_jsx(TabStripItem, {
-      item: item,
-      selected: item.value === value,
-      size: size,
-      theme: theme,
-      labelColor: item.value === value ? colors.activeLabel : colors.inactiveLabel,
-      pressedColor: colors.pressedTab,
-      hitSlop: spec.hitSlop,
-      fontSize: spec.fontSize,
-      iconSize: spec.iconSize,
-      onPress: onValueChange,
-      onLayout: handleTabLayout,
-      testID: testID ? `${testID}-${item.value}` : undefined
-    }, item.value))]
+    style: outerStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      testID: testID,
+      accessibilityRole: "tablist",
+      style: rootStyle,
+      children: [/*#__PURE__*/_jsx(Reanimated.View, {
+        testID: testID ? `${testID}-indicator` : undefined,
+        style: [indicatorStatic, indicatorMotion, {
+          pointerEvents: 'none'
+        }]
+      }), items.map(item => /*#__PURE__*/_jsx(TabStripItem, {
+        item: item,
+        selected: item.value === value,
+        size: size,
+        theme: theme,
+        labelColor: item.value === value ? colors.activeLabel : colors.inactiveLabel,
+        hitSlop: spec.hitSlop,
+        fontSize: spec.fontSize,
+        iconSize: spec.iconSize,
+        onPress: onValueChange,
+        onLayout: handleTabLayout,
+        hapticsSelection: haptics.selection,
+        testID: testID ? `${testID}-${item.value}` : undefined
+      }, item.value))]
+    }), panels !== undefined ? /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-panels` : undefined,
+      children: panelKeys.map(key => /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-panel-${key}` : undefined,
+        accessibilityElementsHidden: key !== value,
+        importantForAccessibility: key !== value ? "no-hide-descendants" : undefined,
+        children: renderNodeSlot(panels[key], panelTextStyle)
+      }, key))
+    }) : null]
   });
 });
 //# sourceMappingURL=Tabs.js.map