pixelize-native-library 1.2.1 → 1.3.0

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/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,21 +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.
-
-- **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/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,7 +16,8 @@
  */
 
 import { memo, useMemo } from "react";
-import { Animated, Platform, 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";
@@ -84,7 +85,7 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     style: [chipStyle, {
       overflow: "hidden"
     }, style],
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    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

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

@@ -22,7 +22,7 @@
  */
 
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Animated } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useEnterExit } from "../../core/motion/index.js";
 import { Drawer } from "../drawer/index.js";
 import { FilterSheetBody } from "./FilterSheetBody.js";
@@ -84,19 +84,24 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
     visible: visible,
     onRequestClose: handleDismiss,
     testID: testID,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: reveal.style,
-      children: /*#__PURE__*/_jsx(FilterSheetBody, {
-        dimensions: dimensions,
-        staged: staged,
-        onQuickToggle: handleQuickToggle,
-        onDimensionChange: handleDimensionChange,
-        onApply: handleApply,
-        onReset: onReset !== undefined ? handleReset : undefined,
-        title: title,
-        applyLabel: applyLabel,
-        resetLabel: resetLabel,
-        testID: testID
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+      exiting: FadeOut.reduceMotion(ReduceMotion.System),
+      layout: LinearTransition.reduceMotion(ReduceMotion.System),
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: reveal.style,
+        children: /*#__PURE__*/_jsx(FilterSheetBody, {
+          dimensions: dimensions,
+          staged: staged,
+          onQuickToggle: handleQuickToggle,
+          onDimensionChange: handleDimensionChange,
+          onApply: handleApply,
+          onReset: onReset !== undefined ? handleReset : undefined,
+          title: title,
+          applyLabel: applyLabel,
+          resetLabel: resetLabel,
+          testID: testID
+        })
       })
     })
   });

package/lib/module/modules/filter-sheet/FilterSheet.variants.js

@@ -17,20 +17,19 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
  *  WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
 /** The sheet's scrollable dimension-list cap — a fraction of the window, capped at an absolute
  *  maximum, the same approximation `resolveOverflowSheetHeight` uses for BottomNav's own sheet. The
  *  title header and the Apply/Reset footer render OUTSIDE this cap so they stay visible regardless
  *  of how many dimensions a consumer supplies. */
 export const FILTER_SHEET_BODY_HEIGHT_RATIO = 0.5;
 export const FILTER_SHEET_BODY_MAX_HEIGHT = 420;
+export { MIN_TOUCH_TARGET };
 export function resolveFilterSheetBodyHeight(windowHeight) {
   return Math.min(windowHeight * FILTER_SHEET_BODY_HEIGHT_RATIO, FILTER_SHEET_BODY_MAX_HEIGHT);
 }

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

@@ -19,8 +19,8 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
-import Reanimated, { LinearTransition, ReduceMotion } from "react-native-reanimated";
+import { Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useTheme } from "../../theme/hooks.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { VirtualList } from "../../core/list/index.js";
@@ -140,12 +140,17 @@ const DimensionSection = /*#__PURE__*/memo(function DimensionSection({
       testID: controlTestID
     })
   }], [dimension, value, handleChange, controlTestID]);
-  return /*#__PURE__*/_jsx(Accordion, {
-    type: "single",
-    items: items,
-    value: expanded ? dimension.key : "",
-    onValueChange: onOpenChange,
-    testID: testID ? `${testID}-accordion` : undefined
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsx(Accordion, {
+      type: "single",
+      items: items,
+      value: expanded ? dimension.key : "",
+      onValueChange: onOpenChange,
+      testID: testID ? `${testID}-accordion` : undefined
+    })
   });
 });
 /**
@@ -253,14 +258,19 @@ const QuickChip = /*#__PURE__*/memo(function QuickChip({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: chipStyle,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [structure, {
-        backgroundColor: colors.background,
-        borderColor: colors.border
-      }, press.style],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: labelStyle,
-        children: label
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+      exiting: FadeOut.reduceMotion(ReduceMotion.System),
+      layout: LinearTransition.reduceMotion(ReduceMotion.System),
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: [structure, {
+          backgroundColor: colors.background,
+          borderColor: colors.border
+        }, press.style],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: labelStyle,
+          children: label
+        })
       })
     })
   });

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=FilterSheetProps.js.map

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

@@ -129,17 +129,8 @@ never a migration.
   already showing — this is the library's existing, tested `MultiSelect` composed as-is (per
   CLAUDE.md's component decision order), not a new modal-stacking mechanism built for this module.
 
-## 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.
-
-- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
-- **Round 5 (Android parity)** — `FilterChip` and the quick-chip (`QuickChip`) both gained
-  `android_ripple` (`borderless: false`). `FilterChip` was restructured so its border/radius style
-  lives on the `Pressable` itself (matching `Chip`'s precedent) rather than an inner `Animated.View`,
-  with `overflow: "hidden"` added so the ripple clips to the chip shape. `QuickChip`'s `Pressable`
-  gained its own matching `borderRadius: theme.radii.full` + `overflow: "hidden"` for the same
-  reason — the pill radius otherwise lives only on its inner `Animated.View`, which the ripple (drawn
-  on the `Pressable`) doesn't clip against.
+## Android ripple
+
+Both `FilterChip` and the private `QuickChip` carry `android_ripple` (`borderless: false`) on the
+`Pressable` itself, which is also where their border/radius and `overflow: "hidden"` live — a radius
+that sits only on an inner `Animated.View` does not clip a ripple drawn on the `Pressable`.

package/lib/module/modules/folder-row/FolderRow.js

@@ -92,13 +92,15 @@ export const FolderRow = /*#__PURE__*/memo(function FolderRow({
     } : undefined,
     style: pressableStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-press-overlay`,
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), body]
   });
 });

package/lib/module/modules/folder-row/FolderRowProps.js

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

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

@@ -1,11 +1,12 @@
-# folder-row/
+# folder-row/ — a single file-browser row for a consumer-owned list
 
 A file-browser row. `FolderRow` renders ONE leaf row: leading icon, title, optional subtitle, optional trailing meta
 text. There is no internal list — consumers render hundreds of these inside their own
 `FlatList`/`VirtualList`, so every cost in this file is multiplied by the row count.
 
-With `onPress` the root is a `Pressable` (pressed state swaps the background to `bg.sunken`);
-without it the root is a plain `View`. That is the only branch in the component.
+With `onPress` the root is a `Pressable` (press feedback is `usePressState` — scale plus a
+`stateLayerScrim` overlay — over an unchanged `bg.surface` fill) and a focus ring is drawn while
+focused; without `onPress` the root is a plain, unfocusable `View`.
 
 ## Files
 
@@ -63,8 +64,8 @@ This row's per-render allocations are multiplied by the caller's row count, so:
   `StyleSheet.create`. No style object is rebuilt per render.
 - **No internal list** — nothing here to virtualize. Windowing is the caller's `FlatList`.
 - **No mount animation, ever.** A per-row enter animation would run during the caller's scroll.
-  Press feedback uses `usePressState` (scale + state-layer overlay) plus the existing `bg.sunken`
-  background swap.
+  Press feedback is `usePressState` alone (scale + state-layer overlay); the row's own fill never
+  changes.
 
 ## Known gaps
 

package/lib/module/modules/form-field/FormField.js

@@ -12,9 +12,10 @@
  */
 
 import { memo, useId, useMemo, useRef } from "react";
-import { Animated, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { useEnterExit } from "../../core/motion/index.js";
+import { AnimatedText, useEnterExit } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { formFieldDescriptionId, formFieldMessageId, formFieldStructure, resolveFormFieldAccessibility, resolveFormFieldMessage, resolveFormFieldStatus } from "./FormField.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,6 +68,10 @@ export const FormField = /*#__PURE__*/memo(function FormField({
     fontSize: theme.fontSizes.xs,
     color: colors.description
   }], [theme, colors.description]);
+  const controlSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.fg.default
+  }], [theme]);
   const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.xs,
     color: colors.message
@@ -86,13 +91,13 @@ export const FormField = /*#__PURE__*/memo(function FormField({
       nativeID: formFieldDescriptionId(idPrefix),
       style: descriptionStyle,
       children: description
-    }), children(control), messageMotion.mounted && lastMessage.current !== undefined &&
+    }), renderNodeSlot(children(control), controlSlotStyle), messageMotion.mounted && lastMessage.current !== undefined &&
     /*#__PURE__*/
     // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
     // already announces on both platforms — keeping both would double-announce on Android.
     // Hidden only once the message is gone: `lastMessage` outlives it for the exit tween, and a
     // stale error must not sit in the a11y tree while it fades.
-    _jsx(Animated.Text, {
+    _jsx(AnimatedText, {
       nativeID: formFieldMessageId(idPrefix),
       accessibilityElementsHidden: message === undefined,
       importantForAccessibility: message === undefined ? "no-hide-descendants" : undefined,

package/lib/module/modules/form-field/FormFieldProps.js

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

package/lib/module/modules/form-field/MODULE.md

@@ -94,10 +94,5 @@ accessibilityLabel={control.accessibilityLabel} />`.
 ## Performance
 
 Wrapped in `React.memo`. `formFieldStructure` is a themed resolver, so it compiles once per theme
-identity, not per render.
-
-## 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.
+identity, not per render. The message line renders through `core/motion`'s `AnimatedText`, driven by
+`useEnterExit`; a ref holds the last message on screen while the exit tween runs.