pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/field-select-modal/FieldSelectModal.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { memo, useCallback } from "react";
+import { View } from "react-native";
+import { Checkbox } from "../checkbox/index.js";
+import { ListItem } from "../list-item/index.js";
+import { Modal } from "../modal/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FieldSelectModal = /*#__PURE__*/memo(function FieldSelectModal({
+  visible,
+  onRequestClose,
+  title,
+  options,
+  selectedIds,
+  onChange,
+  multiple = true,
+  style,
+  testID
+}) {
+  const toggle = useCallback(id => {
+    if (!multiple) {
+      onChange([id]);
+      onRequestClose();
+      return;
+    }
+    const set = new Set(selectedIds);
+    if (set.has(id)) set.delete(id);else set.add(id);
+    onChange([...set]);
+  }, [multiple, onChange, onRequestClose, selectedIds]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    title: title,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      style: style,
+      children: options.map(option => {
+        const checked = selectedIds.includes(option.id);
+        return /*#__PURE__*/_jsx(ListItem, {
+          title: option.label,
+          onPress: () => toggle(option.id),
+          leading: multiple ? /*#__PURE__*/_jsx(Checkbox, {
+            checked: checked,
+            onCheckedChange: () => toggle(option.id),
+            accessibilityLabel: option.label
+          }) : undefined
+        }, option.id);
+      })
+    })
+  });
+});
+//# sourceMappingURL=FieldSelectModal.js.map

package/lib/module/modules/field-select-modal/FieldSelectModalProps.js

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

package/lib/module/modules/field-select-modal/MODULE.md

@@ -0,0 +1,13 @@
+# field-select-modal/ — a column and field visibility picker in a Modal
+
+A list of `ListItem` rows inside this library's own `Modal`. `multiple` (default `true`) gives each
+row a leading `Checkbox` and toggles ids in place; `multiple={false}` drops the checkbox, replaces
+the selection with the tapped id and closes the modal.
+
+## Props
+
+`visible`, `onRequestClose`, `title`, `options: readonly FieldSelectOption[]` (`{ id, label }`),
+`selectedIds: readonly string[]`, `onChange(selectedIds)` — all required — plus `multiple?` (`true`),
+`style?: LayoutStyle` (on the rows' wrapper `View`, not the modal) and `testID?`.
+
+Exported from the package root as `FieldSelectModal` / `FieldSelectModalProps` / `FieldSelectOption`.

package/lib/module/modules/field-select-modal/index.js

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

package/lib/module/modules/file-grid/FileGrid.js

@@ -8,15 +8,20 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, 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 { VirtualList } from "../../core/list/index.js";
+import { concentric } from "../../core/style/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { fileGridCellStructure, fileGridRowHeight, fileGridRowStructure, resolveFileGridItemLabel } from "./FileGrid.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 28;
 const DEFAULT_ICON = "file-text";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function rowKeyExtractor(row) {
   return row.key;
 }
@@ -43,12 +48,8 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
   const cellStyle = useMemo(() => [fileGridCellStructure(theme, {
     columns
   }), {
-    borderColor: theme.colors.border.default,
-    backgroundColor: theme.colors.bg.surface
+    backgroundColor: theme.colors.bg.raised
   }], [theme, columns]);
-  const pressedStyle = useMemo(() => ({
-    backgroundColor: theme.colors.bg.sunken
-  }), [theme]);
   const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.default,
@@ -62,12 +63,11 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
     row: row,
     rowStyle: rowStyle,
     cellStyle: cellStyle,
-    pressedStyle: pressedStyle,
     textStyle: textStyle,
     iconColor: theme.colors.accent.text,
     onItemPress: onItemPress,
     testID: testID
-  }), [rowStyle, cellStyle, pressedStyle, textStyle, theme, onItemPress, testID]);
+  }), [rowStyle, cellStyle, textStyle, theme, onItemPress, testID]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: style,
@@ -82,17 +82,23 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
 const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
   item,
   cellStyle,
-  pressedStyle,
   textStyle,
   iconColor,
   onItemPress,
   testID
 }) {
+  const theme = useTheme();
+  const press = usePressState(onItemPress === undefined);
   const handlePress = useCallback(() => onItemPress?.(item.id), [onItemPress, item.id]);
-  const pressableStyle = useCallback(({
-    pressed
-  }) => [cellStyle, pressed ? pressedStyle : null], [cellStyle, pressedStyle]);
   const accessibleLabel = resolveFileGridItemLabel(item.label, item.typeLabel);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.lg, theme.space[2]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg, theme.space]);
+  const pressableStyle = useMemo(() => [cellStyle, {
+    overflow: "hidden"
+  }, press.animatedStyle], [cellStyle, press.animatedStyle]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Icon, {
       name: item.icon ?? DEFAULT_ICON,
@@ -114,20 +120,30 @@ const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
       children: content
     });
   }
-  return /*#__PURE__*/_jsx(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: accessibleLabel,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
     style: pressableStyle,
-    children: content
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), content]
   });
 });
 const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
   row,
   rowStyle,
   cellStyle,
-  pressedStyle,
   textStyle,
   iconColor,
   onItemPress,
@@ -138,7 +154,6 @@ const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
     children: row.items.map(item => /*#__PURE__*/_jsx(FileGridCell, {
       item: item,
       cellStyle: cellStyle,
-      pressedStyle: pressedStyle,
       textStyle: textStyle,
       iconColor: iconColor,
       onItemPress: onItemPress,

package/lib/module/modules/file-grid/FileGrid.variants.js

@@ -24,8 +24,8 @@ export const fileGridRowStructure = createThemedVariants(theme => ({
 }));
 export const fileGridCellStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
-    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[2],
     alignItems: "center",
     justifyContent: "center",

package/lib/module/modules/file-grid/FileGridProps.js

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

package/lib/module/modules/file-grid/MODULE.md

@@ -1,6 +1,27 @@
-# file-grid/
+# file-grid/ — a 2/3/4-column grid of file and folder cells
 
-Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4.
+Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4. Cells are a tonal `bg.raised`
+fill, no hairline border — the same borderless-tile treatment `Card`'s `elevated` variant uses.
+
+## Files
+
+| File | Role |
+|------|------|
+| `FileGrid.tsx` | The component. |
+| `FileGrid.variants.ts` | `FileGridColumns` + the pure resolvers (`resolveFileGridItemLabel`, cell structure). |
+| `index.ts` | Public surface: `FileGrid`, `FileGridProps`, `FileGridItem`, `FileGridColumns`. |
+| `__tests__/FileGrid.test.ts` | Pure: a placeholder suite — the resolvers are not actually asserted yet. |
+| `__tests__/FileGrid.render.test.tsx` | Render: cells, press wiring, the read-only cell's name. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `readonly FileGridItem[]` | — | Required. `{ id, label, icon?: IconName, typeLabel? }`. |
+| `columns` | `2 \| 3 \| 4` | `3` | |
+| `onItemPress` | `(id: string) => void` | — | Absent = read-only cells, not `Pressable`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | |
 
 ## Accessibility contract (WCAG)
 
@@ -8,5 +29,9 @@ Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4.
   glyph has no text equivalent. `FileGridItem.typeLabel` (optional) supplies it; a cell's accessible
   name is `resolveFileGridItemLabel(label, typeLabel)` → `"<label>, <typeLabel>"`, falling back to
   `label` alone when the consumer names no type. Applies to both a pressable cell
-  (`accessibilityLabel`) and a read-only one (wrapped `accessible` + `accessibilityLabel`, which it
-  did not carry at all before).
+  (`accessibilityLabel`) and a read-only one (a `View` with `accessible` + `accessibilityLabel`).
+- **Press feedback** — cells take `usePressState` (scale + state-layer overlay), inert while
+  `onItemPress` is absent.
+
+Rows are chunked to a fixed height and rendered through `core/list`'s `VirtualList`, so a long
+folder listing windows instead of mounting every cell.

package/lib/module/modules/file-upload/FileUpload.js

@@ -20,9 +20,10 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/index.js";
 import { Button } from "../button/index.js";
 import { FILE_UPLOAD_PICK_ERROR_MESSAGE, FILE_UPLOAD_PROGRESS_LABEL, fileUploadContainerStructure, fileUploadProgressFillStructure, fileUploadProgressTrackStructure, fileUploadRowStructure, pickDocumentFile, pickImageFile, resolveFileUploadProgressFraction, resolveFileUploadProgressPercent, resolveFileUploadRemoveLabel, resolveFileUploadTriggerLabel } from "./FileUpload.variants.js";
@@ -81,7 +82,7 @@ const FileUploadProgress = /*#__PURE__*/memo(function FileUploadProgress({
   useEffect(() => {
     running.current?.stop();
     if (!motion.enabled) {
-      scaleX.setValue(fraction);
+      scaleX.value = fraction;
       return undefined;
     }
     running.current = motion.timing(scaleX, fraction, {
@@ -94,12 +95,15 @@ const FileUploadProgress = /*#__PURE__*/memo(function FileUploadProgress({
   const trackStyle = useMemo(() => [fileUploadProgressTrackStructure(theme), {
     backgroundColor: theme.colors.bg.sunken
   }], [theme]);
-  const fillStyle = useMemo(() => [fileUploadProgressFillStructure(), {
+  const fillStatic = useMemo(() => [fileUploadProgressFillStructure(), {
     backgroundColor: theme.colors.accent.solid,
+    transformOrigin: "left center"
+  }], [theme]);
+  const fillAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
-      scaleX
+      scaleX: scaleX.value
     }]
-  }], [theme, scaleX]);
+  }));
   return (
     /*#__PURE__*/
     // Flat `aria-value*`, not `accessibilityValue={{…}}`: react-native-web 0.21 drops the object, so
@@ -114,20 +118,28 @@ const FileUploadProgress = /*#__PURE__*/memo(function FileUploadProgress({
       "aria-valuemax": 100,
       "aria-valuenow": percent,
       style: trackStyle,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-fill` : undefined,
-        style: fillStyle
+        style: [fillStatic, fillAnimatedStyle, {
+          pointerEvents: 'none'
+        }]
       })
     })
   );
 });
+function bytesToKB(bytes) {
+  return bytes / 1024;
+}
 export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
   const {
     source,
     label,
     value = null,
     onChange,
+    values,
+    onValuesChange,
+    maxFiles,
+    maxSizeKB,
     size = "md",
     disabled = false,
     allowedMimeTypes,
@@ -136,11 +148,19 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     style,
     testID
   } = props;
+  const multiMode = values !== undefined && onValuesChange !== undefined;
   const theme = useTheme();
   // Distinct from `value`: a pick attempt can fail (denied permission, or any other native error)
   // independently of whether a file was already selected — see `openPicker`'s catch block.
   const [pickError, setPickError] = useState(false);
   useAnnounce(pickError ? FILE_UPLOAD_PICK_ERROR_MESSAGE : undefined);
+  const acceptPick = useCallback(picked => {
+    if (maxSizeKB !== undefined && picked.size !== undefined && bytesToKB(picked.size) > maxSizeKB) {
+      setPickError(true);
+      return false;
+    }
+    return true;
+  }, [maxSizeKB]);
   const openPicker = useCallback(async () => {
     if (disabled) return;
     setPickError(false);
@@ -148,7 +168,15 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
       const picked = source === "image" ? await pickImageFile(allowsEditing) : await pickDocumentFile(allowedMimeTypes);
       // `picked` is `null` for a user cancel too — `onChange` must not fire then, or a voluntary
       // "never mind" would wipe out whatever was already selected.
-      if (picked) onChange(picked);
+      if (!picked) return;
+      if (!acceptPick(picked)) return;
+      if (multiMode) {
+        const current = values ?? [];
+        if (maxFiles !== undefined && current.length >= maxFiles) return;
+        onValuesChange([...current, picked]);
+        return;
+      }
+      onChange(picked);
     } catch (error) {
       // A rejection (denied/undetermined permission, or any other native failure) is the one case
       // that DOES clear the value — the pick attempt genuinely failed, so the field can't claim to
@@ -156,14 +184,14 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
       // row below announces it, and — mirroring `PixelizeProvider`'s own dev-warning convention,
       // the only console usage in this codebase — a console warning names the likely cause for the
       // developer. Gated the identical way: skipped only when `__DEV__` is DEFINITELY false.
-      onChange(null);
+      if (multiMode) onValuesChange([]);else onChange(null);
       setPickError(true);
       const isDefinitelyProd = typeof __DEV__ !== "undefined" && !__DEV__;
       if (!isDefinitelyProd) {
         console.warn("[pixelize-native-library] <FileUpload> couldn't open the picker — likely a denied " + "permission or missing platform config (Info.plist / AndroidManifest usage strings).", error);
       }
     }
-  }, [disabled, source, allowsEditing, allowedMimeTypes, onChange]);
+  }, [disabled, source, allowsEditing, allowedMimeTypes, onChange, multiMode, values, onValuesChange, maxFiles, acceptPick]);
 
   // Stable wrapper so `Button`'s `onPress` reference doesn't churn every render — `openPicker`
   // itself is async and can't be passed directly (the promise must be discarded).
@@ -174,12 +202,19 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     setPickError(false);
     onChange(null);
   }, [onChange]);
+  const handleRemoveAt = useCallback(index => {
+    if (!multiMode) return;
+    setPickError(false);
+    const next = [...(values ?? [])];
+    next.splice(index, 1);
+    onValuesChange(next);
+  }, [multiMode, onValuesChange, values]);
   const rootStyle = useMemo(() => [fileUploadContainerStructure(theme), style], [theme, style]);
   const errorStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.xs,
     color: theme.colors.status.danger.text
   }], [theme]);
-  const triggerLabel = useMemo(() => resolveFileUploadTriggerLabel(label, value), [label, value]);
+  const triggerLabel = useMemo(() => resolveFileUploadTriggerLabel(label, multiMode ? null : value), [label, value, multiMode]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: rootStyle,
@@ -191,13 +226,19 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
       size: size,
       accessibilityLabel: triggerLabel,
       testID: testID ? `${testID}-trigger` : undefined
-    }), value && /*#__PURE__*/_jsx(FileUploadRow, {
+    }), !multiMode && value ? /*#__PURE__*/_jsx(FileUploadRow, {
       name: value.name,
       disabled: disabled,
       onRemove: handleRemove,
       testID: testID ? `${testID}-row` : undefined,
       removeTestID: testID ? `${testID}-remove` : undefined
-    }), progress !== undefined && /*#__PURE__*/_jsx(FileUploadProgress, {
+    }) : null, multiMode ? (values ?? []).map((file, index) => /*#__PURE__*/_jsx(FileUploadRow, {
+      name: file.name,
+      disabled: disabled,
+      onRemove: () => handleRemoveAt(index),
+      testID: testID ? `${testID}-row-${index}` : undefined,
+      removeTestID: testID ? `${testID}-remove-${index}` : undefined
+    }, `${file.uri}-${index}`)) : null, progress !== undefined && /*#__PURE__*/_jsx(FileUploadProgress, {
       progress: progress,
       testID: testID ? `${testID}-progress` : undefined
     }), pickError &&

package/lib/module/modules/file-upload/FileUpload.variants.js

@@ -180,6 +180,7 @@ export const fileUploadProgressTrackStructure = createThemedVariants(theme => ({
     alignSelf: "stretch",
     height: 4,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     overflow: "hidden"
   }
 }));
@@ -214,7 +215,8 @@ export const fileUploadRowStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[2],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2]
   }

package/lib/module/modules/file-upload/FileUploadProps.js

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

package/lib/module/modules/file-upload/MODULE.md

@@ -23,8 +23,13 @@ and the first that composes a sibling module (`Button`) instead of hand-rolling
 |------|------|---------|-------|
 | `source` | `"image" \| "document"` | — | Required, closed union — which native picker this instance uses. |
 | `label` | `string` | — | Required. Trigger's visible label (e.g. `"Upload photo"`). Constant regardless of selection — pressing it again re-opens the picker and replaces the file; the "selected file" row communicates state, not the label. |
-| `value` | `FileUploadResult \| null` | — | Controlled — the currently selected file, or none. |
-| `onChange` | `(result: FileUploadResult \| null) => void` | — | Required. See "Three `onChange` outcomes" below. |
+| `value` | `FileUploadResult \| null` | — | Controlled single-file selection (ignored when `values` is set). |
+| `values` | `readonly FileUploadResult[]` | — | Multi-file controlled list; when set, `value` is ignored. |
+| `onValuesChange` | `(files: readonly FileUploadResult[]) => void` | — | Required with `values` — fires on pick, remove, or failed pick (clears invalid entries per row). |
+| `onChange` | `(result: FileUploadResult \| null) => void` | — | Required for single-file mode. See "Three `onChange` outcomes" below. |
+| `maxFiles` | `number` | — | Caps how many files `values` may hold; trigger disabled at cap. |
+| `maxSizeKB` | `number` | — | Rejects picks larger than this size (kilobytes). |
+| `progress` | `number` | — | `0`–`100` upload progress display (consumer-driven; no upload logic here). |
 | `size` | `sm \| md \| lg` | `md` | Forwarded straight to the trigger `Button`'s own `size`. |
 | `disabled` | `boolean` | `false` | Forwarded to both `Button`s (trigger and remove). |
 | `allowedMimeTypes` | `string[]` | — | Document-only — forwarded as `DocumentPicker.getDocumentAsync`'s `type`. Ignored when `source` is `"image"`. |
@@ -108,7 +113,7 @@ indistinguishable from a voluntary cancel) can't be observed without a device-le
   accessible name.
 - **1.3.1** — the filename `Text` is purely visual; the composed name above is the only place a
   screen reader hears it, avoiding a double announcement.
-- **1.4.3** — filename text and the error message measured ≥ 4.5:1 against `bg.canvas`, all 8
+- **1.4.3** — filename text and the error message measured ≥ 4.5:1 against `bg.canvas`, all 9
   brands × both modes.
 - **1.4.11** — the row's border (`border.interactive`) measured ≥ 3:1 against `bg.canvas`.
 - **2.5.5 / 2.5.8** — both interactive elements are `Button` instances, inheriting its ≥44dp
@@ -130,19 +135,12 @@ indistinguishable from a voluntary cancel) can't be observed without a device-le
 
 ## Known gaps
 
-- Single-file only — `allowsMultipleSelection`/`multiple` aren't exposed; a future
-  `multiple?: boolean` would need `FileUploadResult[]`, a real API change, not a quiet bolt-on.
 - The `allowsEditing: true` legacy-picker permission-prompt ambiguity — see "Permissions" above.
-- No upload progress/state — out of scope by design; the consumer composes that around the `uri`.
+- No upload/transfer logic — `progress` only DISPLAYS a number the consumer drives from its own
+  transfer around the returned `uri`.
 - No thumbnail/preview of a selected image — the row shows only the file name, matching how
   `Input`/`Select` show text, not media. A future `previewImage?: boolean` is a reasonable v2.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `openPicker` is `useCallback`'d; a new `handlePick` wrapper replaces the old inline `onPress={() => void openPicker()}` so the trigger `Button`'s `onPress` reference stays stable, and `handleRemove` is `useCallback`'d for the "remove" `Button` — both are this library's own `Button` instances, so stabilizing these closures is what keeps `Button`'s memo from being defeated.
-
-## 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/filter-bar/FilterBar.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Badge } from "../badge/index.js";
+import { Button } from "../button/index.js";
+import { SearchBar } from "../search-bar/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FilterBar = /*#__PURE__*/memo(function FilterBar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search",
+  onOpenFilters,
+  activeFilterCount = 0,
+  trailing,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2]
+  }), [theme]);
+  const trailingSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [rowStyle, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/_jsx(SearchBar, {
+        value: searchValue,
+        onChangeText: onSearchChange,
+        placeholder: searchPlaceholder
+      })
+    }), onOpenFilters ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "relative"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        label: "Filters",
+        variant: "outline",
+        size: "sm",
+        onPress: onOpenFilters,
+        testID: testID ? `${testID}-filters` : undefined
+      }), activeFilterCount > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          top: -4,
+          right: -4,
+          pointerEvents: 'none'
+        },
+        children: /*#__PURE__*/_jsx(Badge, {
+          label: String(activeFilterCount),
+          size: "sm"
+        })
+      }) : null]
+    }) : null, renderNodeSlot(trailing, trailingSlotStyle)]
+  });
+});
+//# sourceMappingURL=FilterBar.js.map

package/lib/module/modules/filter-bar/FilterBarProps.js

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

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

@@ -0,0 +1,16 @@
+# filter-bar/ — a toolbar row pairing a search field with a filters trigger
+
+Toolbar row: a flexed `SearchBar`, an optional "Filters" `Button` carrying a count `Badge`, then a
+trailing slot. Pairs with `filter-sheet`, which owns the panel the trigger opens.
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `searchValue` / `onSearchChange` | `string` / `(value: string) => void` | — | Required. Controlled. |
+| `searchPlaceholder` | `string` | `"Search"` | |
+| `onOpenFilters` | `() => void` | — | Omit → no filters trigger renders at all. |
+| `activeFilterCount` | `number` | `0` | `> 0` pins a `sm` `Badge` to the trigger's corner. |
+| `trailing` | `ReactNode` | — | Rendered through `renderNodeSlot`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Seeds `${testID}-filters` on the trigger. |

package/lib/module/modules/filter-bar/index.js

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

package/lib/module/modules/filter-sheet/FilterChip.js

@@ -16,9 +16,11 @@
  */
 
 import { memo, useMemo } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Platform, Pressable, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { FILTER_CHIP_HIT_SLOP, FILTER_CHIP_ICON_SIZE, filterChipStructure, resolveFilterChipAccessibility, resolveFilterChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +47,10 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     fontSize: theme.fontSizes.sm,
     color: colors.text
   }], [theme, colors]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
@@ -75,9 +81,12 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
     hitSlop: FILTER_CHIP_HIT_SLOP,
-    style: style,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [chipStyle, press.style],
+    android_ripple: androidRipple,
+    style: [chipStyle, {
+      overflow: "hidden"
+    }, style],
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      style: press.style,
       children: content
     })
   });

package/lib/module/modules/filter-sheet/FilterChipProps.js

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