pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/reorder/Reorder.js

@@ -13,7 +13,7 @@
  * preview offset is `resolveRowShift`, the dragged row's is the raw `translationY`.
  *
  * The list stays FULLY CONTROLLED: `items` is never mutated mid-drag. On release the pan hands off
- * to JS once (`runOnJS`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
+ * to JS once (`scheduleOnRN`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
  * Because the preview and the commit share the same splice semantics, the dragged row lands in the
  * slot its shifted neighbours already vacated — and passive rows snap back to 0 the instant
  * `activeIndex` goes idle, so no stale offset can outlive the drop.
@@ -37,7 +37,8 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { VirtualList } from "../../core/list/index.js";
 import { useMotion } from "../../core/motion/index.js";
@@ -136,7 +137,7 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
     "worklet";
 
     if (activeIndex.value === IDLE) return;
-    runOnJS(endDrag)();
+    scheduleOnRN(endDrag);
   }), [activeIndex, targetIndex, translationY, itemCount, rowPitch, endDrag]);
   const handleMove = useCallback((fromIndex, toIndex) => {
     // A row's move button stays operable while it holds focus even at the list's end (see

package/lib/module/modules/reorder/Reorder.variants.js

@@ -167,7 +167,8 @@ export const reorderRowStructure = createThemedVariants(theme => ({
     height: REORDER_ROW_HEIGHT,
     marginBottom: theme.space[2],
     paddingHorizontal: theme.space[3],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[3]
   }
 }));
@@ -188,7 +189,8 @@ export const reorderGripBarStructure = createThemedVariants(theme => ({
   base: {
     width: GRIP_BAR_WIDTH,
     height: GRIP_BAR_HEIGHT,
-    borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
   }
 }));
 //# sourceMappingURL=Reorder.variants.js.map

package/lib/module/modules/rich-text/MODULE.md

@@ -24,11 +24,13 @@ safe schemes only) · `onImagePress` · `style` (layout-only, outermost, once, l
   into inline spans inside one `Text` — there is no per-heading node left, so heading semantics are
   unavailable in that mode.
 - Links are `accessibilityRole="link"`; images are `Pressable`s labelled from their `alt` (falling back to
-  `Image`).
+  `Image`) and carry `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`) on Android.
 - Colour pairs are measured across all 9 brands × both modes (`RichText.test.ts`), min ratios: text 6.10 and
   muted 6.52 and link 5.06 on the canvas · mention label 4.82 on its own `accent.subtle` pill · code and
   `pre` 5.69 on `bg.sunken`. `quoteBorder` / `border` are decorative rules (1.08–1.43:1) with no contrast
   floor — they are pinned to `border.default` and asserted never to escalate to `border.interactive`/`focus`.
+- `blockquote`'s left border is `theme.borderWidths.thick` (2dp), not a raw literal `3` — a real,
+  visible 1px change to every rendered blockquote.
 
 ## Performance
 

package/lib/module/modules/rich-text/RichText.js

@@ -8,6 +8,7 @@ import { memo, useCallback, useMemo } from "react";
 import { Linking, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { HeadingText } from "../../core/heading/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { BLOCK_TAGS, isBlank, isChecked, isElement, isMention, isSafeUrl, mentionLabel, MENTION_HOSTS, parseRichText, stripHtmlToText, textContent } from "./parseRichText.js";
 import { resolveRichTextColors } from "./RichText.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,9 +28,7 @@ const styles = StyleSheet.create({
   block: {
     marginBottom: 8
   },
-  bold: {
-    fontWeight: "700"
-  },
+  bold: {},
   italic: {
     fontStyle: "italic"
   },
@@ -55,7 +54,6 @@ const styles = StyleSheet.create({
     flex: 1
   },
   quote: {
-    borderLeftWidth: 3,
     paddingLeft: 12,
     marginBottom: 8
   },
@@ -73,16 +71,8 @@ const styles = StyleSheet.create({
     marginBottom: 8
   }
 });
-const WRAP_STYLES = {
-  b: styles.bold,
-  strong: styles.bold,
-  i: styles.italic,
-  em: styles.italic,
-  u: styles.underline,
-  s: styles.strike,
-  del: styles.strike,
-  strike: styles.strike
-};
+const WRAP_TAGS = ["b", "strong", "i", "em", "u", "s", "del", "strike"];
+const WRAP_TAG_SET = new Set(WRAP_TAGS);
 const RichTextLink = /*#__PURE__*/memo(function RichTextLink({
   href,
   linkStyle,
@@ -101,13 +91,19 @@ const RichTextImage = /*#__PURE__*/memo(function RichTextImage({
   src,
   label,
   mutedStyle,
+  mode,
   onPress
 }) {
   const handlePress = useCallback(() => onPress?.(src), [onPress, src]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: label,
     onPress: onPress ? handlePress : undefined,
+    android_ripple: androidRipple,
     style: styles.imageWrap,
     children: /*#__PURE__*/_jsx(Text, {
       style: mutedStyle,
@@ -131,9 +127,9 @@ export const RichText = /*#__PURE__*/memo(function RichText({
       textDecorationLine: "underline"
     },
     mention: {
+      ...theme.fontStyleForWeight(theme.fontWeights.semibold),
       color: colors.mentionText,
-      backgroundColor: colors.mentionBg,
-      fontWeight: "600"
+      backgroundColor: colors.mentionBg
     },
     code: {
       fontFamily: MONO,
@@ -147,7 +143,30 @@ export const RichText = /*#__PURE__*/memo(function RichText({
     text: {
       color: colors.text
     }
-  }), [colors]);
+  }), [colors, theme]);
+  const wrapStyles = useMemo(() => ({
+    b: theme.fontStyleForWeight(theme.fontWeights.bold),
+    strong: theme.fontStyleForWeight(theme.fontWeights.bold),
+    i: {
+      fontStyle: "italic"
+    },
+    em: {
+      fontStyle: "italic"
+    },
+    u: {
+      textDecorationLine: "underline"
+    },
+    s: {
+      textDecorationLine: "line-through"
+    },
+    del: {
+      textDecorationLine: "line-through"
+    },
+    strike: {
+      textDecorationLine: "line-through"
+    }
+  }), [theme]);
+  const headingStyle = useMemo(() => theme.fontStyleForWeight(theme.fontWeights.bold), [theme]);
   const baseTextStyle = useMemo(() => [styles.base, palette.text], [palette]);
   const rootStyle = useMemo(() => [styles.root, style], [style]);
   const tree = useMemo(() => {
@@ -184,7 +203,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
           attrs,
           children
         } = node;
-        const wrap = WRAP_STYLES[tag];
+        const wrap = WRAP_TAG_SET.has(tag) ? wrapStyles[tag] : undefined;
         if (tag === "br") out.push("\n");else if (wrap) out.push(/*#__PURE__*/_jsx(Text, {
           style: wrap,
           children: renderInline(children, pre, key)
@@ -233,16 +252,16 @@ export const RichText = /*#__PURE__*/memo(function RichText({
         return /*#__PURE__*/_jsx(HeadingText, {
           accessibilityRole: "header",
           "aria-level": level,
-          style: [styles.base, textStyle, {
+          style: [styles.base, textStyle, headingStyle, {
             fontSize: size,
-            lineHeight: size + 6,
-            fontWeight: "700"
+            lineHeight: size + 6
           }],
           children: renderInline(children, false, key)
         }, key);
       }
       if (tag === "blockquote") return /*#__PURE__*/_jsx(View, {
         style: [styles.quote, {
+          borderLeftWidth: theme.borderWidths.thick,
           borderLeftColor: colors.quoteBorder
         }],
         children: renderBlocks(children, key, {
@@ -288,6 +307,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
           src: attrs.src ?? "",
           label: attrs.alt || "Image",
           mutedStyle: palette.muted,
+          mode: theme.mode,
           onPress: onImagePress
         }, key);
       }
@@ -337,7 +357,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
     } catch {
       return null;
     }
-  }, [tree, numberOfLines, colors, palette, openURL, onImagePress]);
+  }, [tree, numberOfLines, colors, palette, wrapStyles, headingStyle, openURL, onImagePress, theme]);
   if (!html) return null;
   if (content == null) {
     return /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/rich-text-editor/MODULE.md

@@ -126,7 +126,8 @@ Inside it the candidates go through `VirtualList` (`core/list`), not a `ScrollVi
 `itemHeight={MENTION_ROW_HEIGHT}` — the rows are a fixed 40dp (`richTextEditorMentionRowStructure`'s
 `minHeight`), so `getItemLayout` is exact and the list never measures. Rows are a memo'd `MentionRow`
 taking **primitives** (`id`, `label`), and `onSelect(id, label)` is one shared `useCallback` with `[]`
-deps rather than a closure minted per row.
+deps rather than a closure minted per row. Each row also carries `android_ripple`
+(`rippleColor(theme.mode)`, `borderless: false`), gated on `Platform.OS === "android"`.
 
 **`keyboardShouldPersistTaps="always"` — `"handled"` is not enough here.** The dropdown only exists
 while the mention session is live, and the session dies with the keyboard. Under RN's default
@@ -223,3 +224,5 @@ instant, and the mention dropdown is a list, where per-row animation is forbidde
 
 - 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/rich-text-editor/RichTextEditor.js

@@ -21,6 +21,7 @@ import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-n
 import { EnrichedTextInput } from "react-native-enriched-html";
 import { VirtualList } from "../../core/list/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Input } from "../input/index.js";
 import { Modal } from "../modal/index.js";
@@ -39,6 +40,10 @@ const MentionRow = /*#__PURE__*/memo(function MentionRow({
   onSelect
 }) {
   const handlePress = useCallback(() => onSelect(id, label), [onSelect, id, label]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const restingStyle = useMemo(() => [richTextEditorMentionRowStructure(theme), {
     backgroundColor: colors.mentionRowBackground
   }], [theme, colors.mentionRowBackground]);
@@ -55,6 +60,7 @@ const MentionRow = /*#__PURE__*/memo(function MentionRow({
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "menuitem",
     onPress: handlePress,
+    android_ripple: androidRipple,
     style: rowStyle,
     children: /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
@@ -284,7 +290,8 @@ function RichTextEditorImpl({
     bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
   }), [theme]);
   const linkBodyStyle = useMemo(() => ({
     rowGap: theme.space[4]

package/lib/module/modules/rich-text-editor/RichTextEditor.variants.js

@@ -167,7 +167,7 @@ export function resolveRichTextEditorColors(colors) {
     cardBorder: colors.border.interactive,
     cardBorderFocus: colors.border.focus,
     text: colors.fg.default,
-    placeholder: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     cursor: colors.accent.solid,
     selection: colors.accent.subtle,
     mentionDropdownBackground: colors.bg.surface,
@@ -216,7 +216,7 @@ export function resolveRichTextEditorHtmlStyle(theme) {
     },
     codeblock: {
       color: c.fg.default,
-      borderRadius: theme.radii.base,
+      borderRadius: theme.radii.md,
       backgroundColor: c.bg.sunken
     },
     code: {
@@ -262,7 +262,8 @@ export const richTextEditorLayout = createThemedVariants(theme => ({
 export const richTextEditorCardStructure = createThemedVariants(theme => ({
   base: {
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 export const richTextEditorToolbarStructure = createThemedVariants(theme => ({
@@ -272,8 +273,9 @@ export const richTextEditorToolbarStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     padding: theme.space[2],
     borderBottomWidth: theme.borderWidths.thin,
-    borderTopLeftRadius: theme.radii.base - theme.borderWidths.thin,
-    borderTopRightRadius: theme.radii.base - theme.borderWidths.thin
+    borderTopLeftRadius: theme.radii.md - theme.borderWidths.thin,
+    borderTopRightRadius: theme.radii.md - theme.borderWidths.thin,
+    borderCurve: "continuous"
   }
 }));
 
@@ -299,7 +301,8 @@ export const richTextEditorMentionDropdownStructure = createThemedVariants(theme
     right: 0,
     maxHeight: 200,
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     zIndex: theme.zIndices.dropdown,
     ...theme.elevation.md
   }

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

@@ -19,6 +19,7 @@ content instead of `children`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `children` | `ReactNode` | — | Shown when `state="idle"`. |
+| `appBar` | `ReactNode` | — | Top header slot. Receives top safe-area inset; body omits `top` from `edges`. |
 | `edges` | `ScreenEdge[]` | `["top"]` | Passed to `SafeAreaView`. |
 | `padded` | `boolean` | `false` | Adds theme padding around content. |
 | `keyboardAvoiding` | `boolean` | `false` | Wraps in `KeyboardAvoidingView`. |
@@ -38,6 +39,12 @@ content instead of `children`.
   Screens whose main content is already a `FlatList` should attach `RefreshControl` to that list
   directly and omit `onRefresh` here.
 
+## App bar composition
+
+Pass `<AppBar … />` (or any header) as `appBar`. The shell paints `bg.canvas`, applies `top` safe
+area to the bar, and applies the remaining `edges` to the body — the pattern apps previously
+hand-rolled as `Screen` + `AppHeader`.
+
 ## Motion
 
 **None, deliberately.** Screen is a layout shell with no surface of its own to animate: a state

package/lib/module/modules/screen/Screen.js

@@ -2,15 +2,7 @@
 
 /**
  * Screen — a screen shell composing SafeArea, optional KeyboardAvoidingView, optional pull-to-refresh,
- * and async-state slots that swap in `LoadingState` / consumer-provided empty/error content instead of
- * `children`. Replaces the per-app `SafeAreaView` + `KeyboardAvoidingView` + `RefreshControl` wiring
- * that tickets/mobile and crm-mobile each re-declared.
- *
- * Requires `react-native-safe-area-context` — Screen's whole purpose is safe-area handling; consumers
- * using this module are expected to install that optional peer (see MODULE.md).
- *
- * No `accessibilityRole` of its own: like `Card`, this is a layout shell — children and composed
- * state blocks carry their own semantics.
+ * optional `appBar` slot with safe-area edge splitting, and async-state slots.
  */
 
 import { memo, useMemo } from "react";
@@ -18,10 +10,11 @@ import { KeyboardAvoidingView, Platform, RefreshControl, ScrollView, View } from
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useTheme, useThemeColors } from "../../theme/hooks.js";
 import { LoadingState } from "../state-block/index.js";
-import { SCREEN_DEFAULT_EDGES, resolveScreenColors, screenPaddedStructure, screenRootStructure, screenScrollContentStructure, screenStateSlotStructure } from "./Screen.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { SCREEN_DEFAULT_EDGES, resolveScreenAppBarEdges, resolveScreenBodyEdges, resolveScreenColors, screenBodyStructure, screenPaddedStructure, screenRootStructure, screenScrollContentStructure, screenShellStructure, screenStateSlotStructure } from "./Screen.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Screen = /*#__PURE__*/memo(function Screen({
   children,
+  appBar,
   edges = SCREEN_DEFAULT_EDGES,
   padded = false,
   keyboardAvoiding = false,
@@ -38,6 +31,9 @@ export const Screen = /*#__PURE__*/memo(function Screen({
   const theme = useTheme();
   const roleColors = useThemeColors();
   const screenColors = resolveScreenColors(theme.colors);
+  const hasAppBar = appBar !== undefined;
+  const bodyEdges = useMemo(() => resolveScreenBodyEdges(edges, hasAppBar), [edges, hasAppBar]);
+  const appBarEdges = useMemo(() => resolveScreenAppBarEdges(edges, hasAppBar), [edges, hasAppBar]);
   const body = useMemo(() => {
     if (state === "loading") {
       return /*#__PURE__*/_jsx(View, {
@@ -76,29 +72,66 @@ export const Screen = /*#__PURE__*/memo(function Screen({
     children: body
   });
   const background = screenColors.background;
-  const safeAreaStyle = useMemo(() => [screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, {
+  const shellStyle = useMemo(() => [screenShellStructure(theme), {
+    backgroundColor: background
+  }, style], [theme, background, style]);
+  const bodySafeAreaStyle = useMemo(() => [hasAppBar ? screenBodyStructure(theme) : screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, !hasAppBar && {
+    backgroundColor: background
+  }], [theme, padded, background, hasAppBar]);
+  const legacySafeAreaStyle = useMemo(() => [screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, {
     backgroundColor: background
   }], [theme, padded, background]);
-  const rootStyle = useMemo(() => [...safeAreaStyle, style], [safeAreaStyle, style]);
-  const keyboardStyle = useMemo(() => [screenRootStructure(theme), {
+  const legacyRootStyle = useMemo(() => [...legacySafeAreaStyle, style], [legacySafeAreaStyle, style]);
+  const legacyKeyboardStyle = useMemo(() => [screenRootStructure(theme), {
     backgroundColor: background
   }, style], [theme, background, style]);
+  const content = hasAppBar ? /*#__PURE__*/_jsxs(View, {
+    style: shellStyle,
+    testID: testID,
+    children: [appBarEdges.length > 0 ? /*#__PURE__*/_jsx(SafeAreaView, {
+      edges: appBarEdges,
+      children: appBar
+    }) : appBar, /*#__PURE__*/_jsx(SafeAreaView, {
+      edges: bodyEdges,
+      style: bodySafeAreaStyle,
+      children: inner
+    })]
+  }) : null;
+  if (hasAppBar) {
+    if (!keyboardAvoiding) {
+      return content;
+    }
+    return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+      style: shellStyle,
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: keyboardVerticalOffset,
+      testID: testID,
+      children: [appBarEdges.length > 0 ? /*#__PURE__*/_jsx(SafeAreaView, {
+        edges: appBarEdges,
+        children: appBar
+      }) : appBar, /*#__PURE__*/_jsx(SafeAreaView, {
+        edges: bodyEdges,
+        style: bodySafeAreaStyle,
+        children: inner
+      })]
+    });
+  }
   if (!keyboardAvoiding) {
     return /*#__PURE__*/_jsx(SafeAreaView, {
       edges: edges,
-      style: rootStyle,
+      style: legacyRootStyle,
       testID: testID,
       children: inner
     });
   }
   return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
-    style: keyboardStyle,
+    style: legacyKeyboardStyle,
     behavior: Platform.OS === "ios" ? "padding" : "height",
     keyboardVerticalOffset: keyboardVerticalOffset,
     testID: testID,
     children: /*#__PURE__*/_jsx(SafeAreaView, {
       edges: edges,
-      style: safeAreaStyle,
+      style: legacySafeAreaStyle,
       children: inner
     })
   });

package/lib/module/modules/screen/Screen.variants.js

@@ -40,4 +40,22 @@ export const screenScrollContentStructure = createVariants({
     flexGrow: 1
   }
 });
+export const screenBodyStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1
+  }
+}));
+export const screenShellStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1
+  }
+}));
+export function resolveScreenBodyEdges(edges, hasAppBar) {
+  if (!hasAppBar) return edges;
+  return edges.filter(edge => edge !== "top");
+}
+export function resolveScreenAppBarEdges(edges, hasAppBar) {
+  if (!hasAppBar) return [];
+  return edges.includes("top") ? ["top"] : [];
+}
 //# sourceMappingURL=Screen.variants.js.map

package/lib/module/modules/search-bar/MODULE.md

@@ -76,6 +76,7 @@ above-field caption; the placeholder carries the only name it has.
 2. **Per-edge hitSlop elimination** — copied from `ButtonGroup`'s segment-edge fix, applied to the
    field/clear/cancel trio instead of a segmented row.
 3. **`bg.sunken` (not `bg.hover`) for a pressed fill** — same reasoning as `Menu`'s pressed row.
+4. **Clear/cancel presses** — `usePressState` (scale + state-layer overlay) on both affordances.
 
 ## Design decisions specific to this module
 

package/lib/module/modules/search-bar/SearchBar.js

@@ -18,9 +18,12 @@
  * `loading` spinner — is `Spinner`'s own, which already honours reduced motion internally.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Spinner } from "../spinner/index.js";
 import { resolveSearchBarAccessibility, resolveSearchBarBorderColor, resolveSearchBarColors, resolveSearchBarFieldHitSlop, resolveSearchBarTrailingHitSlop, SEARCH_BAR_SIZES, searchBarCancelStructure, searchBarClearStructure, searchBarFieldStructure, searchBarRowStructure, shouldShowClear } from "./SearchBar.variants.js";
@@ -29,6 +32,7 @@ const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
 const ICON_STROKE = 2;
 const CLEAR_ACCESSIBILITY_LABEL = "Clear search";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const SearchBar = /*#__PURE__*/memo(function SearchBar({
   value,
   onChangeText,
@@ -124,13 +128,24 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
   const fieldHitSlop = resolveSearchBarFieldHitSlop(size, {
     trailingAdjacent: clearVisible || showCancelButton
   });
+  const clearPress = usePressState(false);
+  const cancelPress = usePressState(false);
+  const overlayStaticStyle = {
+    backgroundColor: colors.pressedFill,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
+  };
+  const floatingFieldStyle = useMemo(() => ({
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }), [theme]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: [searchBarRowStructure(theme), style],
     children: [/*#__PURE__*/_jsxs(View, {
       style: [searchBarFieldStructure(theme, {
         size
-      }), {
+      }), floatingFieldStyle, {
         borderColor: resolveSearchBarBorderColor(colors, focused)
       }, disabled && styles.dimmed],
       children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
@@ -144,7 +159,8 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: colors.focusBorder,
-          borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+          borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+          borderCurve: "continuous"
         }
       }), loading ? /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
@@ -189,53 +205,57 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           color: colors.text,
           padding: 0
         }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset]
-      }), clearVisible && /*#__PURE__*/_jsx(Pressable, {
+      }), clearVisible && /*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-clear` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: CLEAR_ACCESSIBILITY_LABEL,
         onPress: handleClear,
+        onPressIn: clearPress.handlers.onPressIn,
+        onPressOut: clearPress.handlers.onPressOut,
+        onLayout: clearPress.onLayout,
         hitSlop: resolveSearchBarTrailingHitSlop(size, {
           outerRight: false
         }),
-        style: ({
-          pressed
-        }) => [searchBarClearStructure(theme), pressed && {
-          backgroundColor: colors.pressedFill
-        }],
-        children: ({
-          pressed
-        }) => /*#__PURE__*/_jsx(Icon, {
+        style: [searchBarClearStructure(theme), {
+          overflow: "hidden"
+        }, clearPress.animatedStyle],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, clearPress.overlayStyle]
+        }), /*#__PURE__*/_jsx(Icon, {
           name: "x",
           size: spec.iconSize,
-          color: pressed ? colors.onPressedFill : colors.icon,
+          color: clearPress.pressed ? colors.onPressedFill : colors.icon,
           strokeWidth: ICON_STROKE
-        })
+        })]
       })]
-    }), showCancelButton && /*#__PURE__*/_jsx(Pressable, {
+    }), showCancelButton && /*#__PURE__*/_jsxs(AnimatedPressable, {
       testID: testID ? `${testID}-cancel` : undefined,
       accessibilityRole: "button",
       accessibilityLabel: cancelLabel,
       onPress: handleCancel,
+      onPressIn: cancelPress.handlers.onPressIn,
+      onPressOut: cancelPress.handlers.onPressOut,
+      onLayout: cancelPress.onLayout,
       hitSlop: resolveSearchBarTrailingHitSlop(size, {
         outerRight: true
       }),
-      style: ({
-        pressed
-      }) => [searchBarCancelStructure(theme, {
+      style: [searchBarCancelStructure(theme, {
         size
-      }), pressed && {
-        backgroundColor: colors.pressedFill
-      }],
-      children: ({
-        pressed
-      }) => /*#__PURE__*/_jsx(Text, {
+      }), {
+        overflow: "hidden"
+      }, cancelPress.animatedStyle],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, cancelPress.overlayStyle]
+      }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
           fontSize: spec.fontSize,
-          color: pressed ? colors.onPressedFill : colors.cancelLabel
+          color: cancelPress.pressed ? colors.onPressedFill : colors.cancelLabel
         }],
         children: cancelLabel
-      })
+      })]
     })]
   });
 });