pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/copy-button/CopyButton.js

@@ -6,17 +6,21 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibilityInfo, Animated, Pressable, Text, View } from "react-native";
+import { AccessibilityInfo, Platform, Pressable, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { COPY_BUTTON_SIZES, copyButtonMenuRowStructure, copyButtonOutlineStructure, COPY_FEEDBACK_MS, resolveCopyButtonColors, writeClipboard } from "./CopyButton.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 // The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
 // role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a fill it could fail.
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+
 export const CopyButton = /*#__PURE__*/memo(function CopyButton({
   value,
   variant = "icon",
@@ -30,6 +34,8 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
 }) {
   const theme = useTheme();
   const press = usePressMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const colors = resolveCopyButtonColors(theme.colors);
   const [status, setStatus] = useState("idle");
   // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
@@ -46,14 +52,17 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     // The label swap lands on a control nothing is focused on, so no reader would ever read it —
     // this imperative call reaches VoiceOver and TalkBack (same reason as `Toast`'s `show()`).
     AccessibilityInfo.announceForAccessibility(ok ? copiedLabel : failedLabel);
-    if (ok) onCopy?.(value);
+    if (ok) {
+      if (!reducedMotion) haptics.notification("success");
+      onCopy?.(value);
+    }
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
     // WCAG 2.2.1: only the SUCCESS state self-clears. A failure is an error the user has to act on,
     // and reverting the label 1.5s later took the only notice of it off the screen — so the failed
     // state now stays until the next press (which re-runs this and re-decides).
     if (ok) timer.current = setTimeout(() => setStatus("idle"), COPY_FEEDBACK_MS);
-  }, [value, onCopy, copiedLabel, failedLabel]);
+  }, [value, onCopy, copiedLabel, failedLabel, reducedMotion, haptics]);
   const onFocus = useCallback(() => setFocused(true), []);
   const onBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => ({
@@ -65,8 +74,9 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     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
-  }), [theme.colors.border.focus, theme.radii.base]);
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
+  }), [theme.colors.border.focus, theme.radii.md]);
   const spec = COPY_BUTTON_SIZES[size];
   const iconName = status === "copied" ? "check" : status === "failed" ? "triangle-alert" : "link";
   const ink = status === "copied" ? colors.success : status === "failed" ? colors.danger : colors.default;
@@ -83,9 +93,15 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: handlePress,
       onFocus: onFocus,
       onBlur: onBlur,
+      android_ripple: Platform.OS === "android" ? {
+        color: rippleColor(theme.mode),
+        borderless: false
+      } : undefined,
       style: ({
         pressed
-      }) => [copyButtonMenuRowStructure(theme), pressed ? {
+      }) => [copyButtonMenuRowStructure(theme), {
+        overflow: "hidden"
+      }, pressed ? {
         backgroundColor: theme.colors.bg.sunken
       } : null, style],
       children: [focusRing, /*#__PURE__*/_jsx(Icon, {
@@ -110,9 +126,15 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: handlePress,
       onFocus: onFocus,
       onBlur: onBlur,
+      android_ripple: Platform.OS === "android" ? {
+        color: rippleColor(theme.mode),
+        borderless: false
+      } : undefined,
       style: ({
         pressed
       }) => [copyButtonOutlineStructure(theme), {
+        overflow: "hidden"
+      }, {
         borderColor: status === "copied" ? colors.success : status === "failed" ? colors.danger : colors.border,
         backgroundColor: pressed ? theme.colors.bg.sunken : theme.colors.bg.surface
       }, style],
@@ -140,8 +162,12 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     onFocus: onFocus,
     onBlur: onBlur,
     hitSlop: spec.hitSlop,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: true
+    } : undefined,
     style: style,
-    children: [focusRing, /*#__PURE__*/_jsx(Animated.View, {
+    children: [focusRing, /*#__PURE__*/_jsx(Reanimated.View, {
       testID: "copy-button-glyph",
       style: press.style,
       children: /*#__PURE__*/_jsx(Icon, {

package/lib/module/modules/copy-button/CopyButton.variants.js

@@ -1,14 +1,15 @@
 "use strict";
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 export const COPY_FEEDBACK_MS = 1500;
 
 /**
  * Same touch-target floor as `Button`/`Checkbox` (44dp — Apple HIG minimum, WCAG 2.5.5 AAA).
  * Duplicated rather than imported — modules never import across `src/modules/*`.
  */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 /**
  * CopyButton-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `iconSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
@@ -42,7 +43,8 @@ export const copyButtonMenuRowStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 export const copyButtonOutlineStructure = createThemedVariants(theme => ({
@@ -53,7 +55,8 @@ export const copyButtonOutlineStructure = createThemedVariants(theme => ({
     columnGap: theme.space[1],
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   }
 }));

package/lib/module/modules/copy-button/CopyButtonProps.js

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

package/lib/module/modules/copy-button/MODULE.md

@@ -1,4 +1,4 @@
-# copy-button/
+# copy-button/ — a copy-to-clipboard control in icon, button or menu-item form
 
 Copies `value` to the clipboard. Variants: `icon`, `button`, `menu-item`. Brief copied state with check icon.
 
@@ -23,7 +23,9 @@ Copies `value` to the clipboard. Variants: `icon`, `button`, `menu-item`. Brief
 | `copiedLabel` | `string` | `Copied!` |
 | `failedLabel` | `string` | `Copy failed` |
 | `size` | `sm \| md` | `sm` |
-| `onCopy` | `(value) => void` | — |
+| `onCopy` | `(value: string) => void` | — |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
 
 Native clipboard uses optional `@react-native-clipboard/clipboard`; web uses `navigator.clipboard`.
 A failed write is **not** silent: the control switches to `failedLabel` with the `triangle-alert`
@@ -31,17 +33,14 @@ glyph in `status.danger.text` and announces it. `onCopy` fires only on success.
 
 **WCAG 2.2.1 — only a successful copy self-clears.** `COPY_FEEDBACK_MS` (1500ms) times out the
 `copied` state back to idle; a `failed` state does not arm that timer at all and stays up until the
-next press re-decides it. Previously both states shared the same timer, so "Copy failed" — the
-message a user most needs to actually read — vanished the fastest of anything in this catalogue.
-**Consumer-visible change:** a failed copy no longer reverts to the idle label on its own; the
-control now visibly stays in the failed state (icon + label + `border.danger` on the `button`
-variant) until the user retries.
+next press re-decides it: a failed copy never reverts to the idle label on its own, it stays in the
+failed state (icon + label + `border.danger` on the `button` variant) until the user retries.
 
 ## Accessibility contract (WCAG)
 
 - `accessibilityRole="button"`; the accessible name is the current label (`label` → `copiedLabel` /
   `failedLabel` while the feedback state is showing).
-- **2.2.1 (timing adjustable)** — see "Props" above: a failed copy no longer times out.
+- **2.2.1 (timing adjustable)** — see "Props" above: a failed copy never times out.
 - **4.1.3 (status messages)** — the copy result is announced with
   `AccessibilityInfo.announceForAccessibility`, the cross-platform imperative API (VoiceOver +
   TalkBack), same call site pattern as `Toast`'s `show()`. The label swap alone announces nothing:
@@ -71,3 +70,7 @@ variant) until the user retries.
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`).
+
+All three variants take `android_ripple`: `icon` (round, icon-only) is `borderless: true`; `button`
+and `menu-item` are `borderless: false` with `overflow: "hidden"` so the ripple clips to their shape.
+A successful copy fires `haptics.notification("success")`, skipped while reduce-motion is on.

package/lib/module/modules/data-table/DataTable.js

@@ -13,9 +13,13 @@
 
 import { memo, useCallback, useMemo, useState } from "react";
 import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { HEADING_LEVEL, HeadingView } from "../../core/heading/index.js";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Checkbox } from "../checkbox/index.js";
 import { EmptyState } from "../empty-state/index.js";
@@ -23,6 +27,7 @@ import { Skeleton } from "../skeleton/index.js";
 import { DATA_TABLE_DEFAULT_ROW_HEIGHT, DATA_TABLE_HEADER_HEIGHT, DATA_TABLE_SKELETON_CELL_HEIGHT, DATA_TABLE_SKELETON_ROW_COUNT, DATA_TABLE_SORT_ICON_SIZE, dataTableCellStructure, dataTableFocusRingStructure, dataTableHeaderRowStructure, dataTableRowStructure, dataTableSelectCellStructure, nextSortDirection, resolveColumnWidth, resolveDataTableColors, resolveDefaultCellText, resolveRowBackground, resolveSelectAllSelection, resolveSelectAllState, resolveSortAccessibilityLabel, resolveSortIcon, resolveTotalWidth, rowTouchSlop, toggleSelectionKey } from "./DataTable.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const EMPTY_SELECTION = [];
 const SKELETON_ROW_INDICES = Array.from({
   length: DATA_TABLE_SKELETON_ROW_COUNT
@@ -309,9 +314,10 @@ const DataTableHeaderCell = /*#__PURE__*/memo(function DataTableHeaderCell({
       onBlur: handleBlur,
       style: spec.cellStyle,
       children: [focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: spec.testID === undefined ? undefined : `${spec.testID}-focus-ring`,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), label, /*#__PURE__*/_jsx(Icon, {
         name: resolveSortIcon(spec.key, sortBy, sortDirection),
         size: DATA_TABLE_SORT_ICON_SIZE,
@@ -369,7 +375,7 @@ function DataTableCellInner({
   if (spec.render) {
     return /*#__PURE__*/_jsx(View, {
       style: spec.cellStyle,
-      children: spec.render(row, index)
+      children: renderNodeSlot(spec.render(row, index), textStyle)
     });
   }
 
@@ -396,7 +402,7 @@ function DataTableRowInner({
   specs,
   rowStyle,
   background,
-  pressedBackground,
+  pressedBackground: _pressedBackground,
   textStyle,
   focusRingStyle,
   selectable,
@@ -406,7 +412,8 @@ function DataTableRowInner({
   hitSlop,
   testID
 }) {
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const theme = useTheme();
+  const press = usePressState(onPress === undefined);
   const [focused, setFocused] = useState(false);
   const handleToggle = useCallback(() => onToggleSelect(rowKey), [onToggleSelect, rowKey]);
   const handlePress = useCallback(() => onPress?.(row, index), [onPress, row, index]);
@@ -415,11 +422,15 @@ function DataTableRowInner({
   const staticStyle = useMemo(() => [rowStyle, {
     backgroundColor: background
   }], [rowStyle, background]);
-  const pressableStyle = useCallback(({
-    pressed
-  }) => [rowStyle, {
-    backgroundColor: pressed ? pressedBackground : background
-  }], [rowStyle, background, pressedBackground]);
+  const pressableStyle = useMemo(() => [rowStyle, {
+    backgroundColor: background,
+    overflow: "hidden"
+  }, press.animatedStyle], [rowStyle, background, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
   const cells = /*#__PURE__*/_jsxs(_Fragment, {
     children: [selectable && /*#__PURE__*/_jsx(View, {
       style: SELECT_CELL_STRUCTURE,
@@ -444,18 +455,30 @@ function DataTableRowInner({
       children: cells
     });
   }
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     hitSlop: hitSlop,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
     style: pressableStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
+    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"
+      }]
     }), cells]
   });
 }

package/lib/module/modules/data-table/DataTable.variants.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * DataTable's style + behaviour resolution — the same split every sibling module copies
  * (see `Select.variants.ts` / `Menu.variants.ts`):
@@ -15,15 +16,15 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** The three glyphs a header can show. A literal union rather than an `IconName` import, so this
  *  file stays free of the icon registry (which pulls `lucide` at runtime); `Icon`'s own `name` prop
  *  still type-checks these against the closed `IconName` set at the call site. */
 
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-
 /** Header cells are sortable buttons, so the header is a direct 44dp target — never slop-expanded. */
 export const DATA_TABLE_HEADER_HEIGHT = MIN_TOUCH_TARGET;
 export const DATA_TABLE_DEFAULT_ROW_HEIGHT = 48;
@@ -129,12 +130,12 @@ export const dataTableRowStructure = createVariants({
     alignItems: "stretch"
   }
 });
-export const dataTableHeaderRowStructure = createThemedVariants(theme => ({
+export const dataTableHeaderRowStructure = createThemedVariants(_theme => ({
   base: {
     flexDirection: "row",
     alignItems: "stretch",
     height: DATA_TABLE_HEADER_HEIGHT,
-    borderBottomWidth: theme.borderWidths.thin
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 export const dataTableCellStructure = createThemedVariants(theme => ({

package/lib/module/modules/data-table/DataTableProps.js

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

package/lib/module/modules/data-table/MODULE.md

@@ -1,7 +1,7 @@
 # data-table/ — a horizontally-scrollable, column-configured table
 
 `DataTable` renders column headers + rows for tabular data on a phone screen. Header and body live
-in ONE vertical `FlatList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}` for the
+in ONE vertical `VirtualList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}` for the
 pin) nested inside a single horizontal `ScrollView` — header and rows are always the same width and
 scroll sideways together with no hand-rolled scroll-offset syncing between two separate lists.
 
@@ -13,7 +13,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 
 | File | Role |
 |------|------|
-| `DataTable.tsx` | The component. Header/row/skeleton/empty JSX built inline per render (Select's precedent), one `FlatList` wired with `stickyHeaderIndices`. |
+| `DataTable.tsx` | The component. Header/row/skeleton/empty JSX built inline per render (Select's precedent), one `core/list` `VirtualList` wired with `stickyHeaderIndices`. |
 | `DataTable.variants.ts` | Pure resolvers (`resolveDataTableColors`, `nextSortDirection`, `resolveSortIcon`, `resolveSortAccessibilityLabel`, `toggleSelectionKey`, `resolveSelectAllState`, `resolveSelectAllSelection`, `resolveDefaultCellText`, `resolveRowBackground`, `resolveTotalWidth`) + themed structural resolvers. No React, no lucide. |
 | `index.ts` | Public surface: `DataTable`, `DataTableProps`, `DataTableColumn`, `DataTableAlign`, `DataTableSortDirection`. |
 | `__tests__/DataTable.test.ts` | Pure: WCAG contrast (all brands × modes) + sort/selection/formatting contracts. |
@@ -93,7 +93,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 
 ## Design decisions specific to this module
 
-- **One `FlatList`, not two scroll views kept in sync.** The header is that FlatList's own
+- **One list, not two scroll views kept in sync.** The header is that `VirtualList`'s own
   `ListHeaderComponent`, pinned via `stickyHeaderIndices={[0]}` — RN's built-in mechanism for
   exactly this, so there is no manual `onScroll`/`scrollTo` offset-mirroring between a header list
   and a body list.
@@ -118,6 +118,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 - **Row press vs. the selection checkbox** — the checkbox is its own nested `Pressable`; RN's
   responder system lets the innermost element claim a touch, so pressing the checkbox never also
   fires `onRowPress` (the standard, well-established RN pattern for a checkbox-in-row).
+- **Row press feedback** — `usePressState` (scale + state-layer overlay) when `onRowPress` is set.
 - **Default cell text** reads `row[column.key]` through a narrow, documented `unknown` escape —
   `T` is intentionally unconstrained so any row shape works without a `render`.
 
@@ -136,10 +137,5 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 Wrapped in `React.memo`; since the component itself is generic (`<T>`), `memo`'s erased type is
 restored with a documented `as typeof DataTableInner` cast. Header/row/skeleton/empty JSX are built
 inline per render, matching `Select`'s own precedent (its `renderItem` isn't extracted or memoized
-either) — real windowing for large datasets still comes from `FlatList` itself.
-
-## 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.
+either) — real windowing for large datasets comes from `core/list`'s `VirtualList` (FlashList when
+the app injected it, `FlatList` otherwise) with device-tier window sizing.

package/lib/module/modules/date-picker/Calendar.js

@@ -19,15 +19,20 @@
  */
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { 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 { concentric } from "../../core/style/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { useCalendarGridFocus, useCalendarGridKeys } from "./Calendar.keys";
-import { addMonths, atNoon, buildMonthGrid, calendarDayCellStructure, calendarGridStructure, calendarHeaderButtonStructure, calendarHeaderStructure, calendarStructure, calendarWeekRowStructure, calendarWeekdayCellStructure, canShowMonth, canShowYear, chunkIntoWeeks, clampToRange, DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, dayOrdinal, formatMonthYear, formatYear, isDateDisabled, isSameDay, isWithinRange, monthCursorOf, monthShortNames, nextRangeSelection, quickJumpCellStructure, quickJumpGridStructure, resolveCalendarChromeColors, resolveCalendarDayAccessibility, resolveCalendarDayColors, resolveCalendarFocusMove, toDayKey, weekdayLabels } from "./DatePicker.variants.js";
+import { addMonths, atNoon, buildMonthGrid, calendarDayCellStructure, calendarGridStructure, calendarHeaderButtonStructure, calendarHeaderStructure, calendarStructure, calendarWeekRowStructure, calendarWeekdayCellStructure, canShowMonth, canShowYear, chunkIntoWeeks, clampToRange, DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, dayOrdinal, formatMonthYear, formatYear, isDateDisabled, isSameDay, isWithinRange, monthCursorOf, monthShortNames, nextRangeSelection, quickJumpCellStructure, quickJumpGridStructure, resolveCalendarChromeColors, resolveCalendarDayAccessibility, resolveCalendarDayColors, resolveCalendarFocusMove, resolvePressedAccessibilityState, toDayKey, weekdayLabels } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const HEADER_ICON_SIZE = 18;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   date,
   dayOfMonth,
@@ -42,6 +47,7 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   onPress,
   testID
 }) {
+  const press = usePressState(disabled);
   const a11y = useMemo(() => resolveCalendarDayAccessibility({
     date,
     selected,
@@ -74,26 +80,40 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   const handlePress = useCallback(() => {
     if (!disabled) onPress(date);
   }, [disabled, onPress, date]);
-  const cellStyle = useCallback(({
-    pressed
-  }) => [cellStructure, {
-    backgroundColor: pressed ? pressedBackground : resting.background,
-    borderColor: resting.ring
-  }], [cellStructure, pressedBackground, resting.background, resting.ring]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md, theme.space]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    borderColor: resting.ring,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
-    "aria-selected": a11y["aria-selected"],
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
     "aria-disabled": a11y["aria-disabled"],
     disabled: disabled,
     tabIndex: tabIndex,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     style: cellStyle,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: dayOfMonth
-    })
+    })]
   });
 });
 const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
@@ -105,6 +125,7 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
   onPress,
   testID
 }) {
+  const press = usePressState(disabled);
   const resting = useMemo(() => resolveCalendarDayColors(theme.colors, {
     selected,
     inRange: false,
@@ -129,24 +150,39 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
   const handlePress = useCallback(() => {
     if (!disabled) onPress(month);
   }, [disabled, onPress, month]);
-  const cellStyle = useCallback(({
-    pressed
-  }) => [cellStructure, {
-    backgroundColor: pressed ? pressedBackground : resting.background
-  }], [cellStructure, pressedBackground, resting.background]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md, theme.space]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting.background, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: name,
-    "aria-selected": selected,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
     "aria-disabled": disabled,
     disabled: disabled,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     style: cellStyle,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: name
-    })
+    })]
   });
 });
 export const Calendar = /*#__PURE__*/memo(function Calendar({
@@ -165,6 +201,7 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
   testID
 }) {
   const theme = useTheme();
+  const headerPress = usePressState(false);
   const chrome = useMemo(() => resolveCalendarChromeColors(theme.colors), [theme.colors]);
   const range = rangeValue ?? EMPTY_RANGE;
   const anchor = mode === "range" ? range.start : value ?? null;
@@ -225,11 +262,14 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
     color: chrome.headerLabel
   }], [theme, chrome.headerLabel]);
   const headerButtonBase = useMemo(() => calendarHeaderButtonStructure(theme), [theme]);
-  const headerButtonStyle = useCallback(({
-    pressed
-  }) => [headerButtonBase, pressed && {
-    backgroundColor: chrome.headerPressed
-  }], [headerButtonBase, chrome.headerPressed]);
+  const headerButtonStyle = useMemo(() => [headerButtonBase, {
+    overflow: "hidden"
+  }, headerPress.animatedStyle], [headerButtonBase, headerPress.animatedStyle]);
+  const headerOverlayStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
   const weekDescriptors = useMemo(() => weeks.map(week => week.map(day => {
     const disabled = isDateDisabled(day.date, {
       minDate,
@@ -290,14 +330,23 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
         disabled: !canGoBack,
         onPress: goBack,
         testID: testID ? `${testID}-previous` : undefined
-      }), /*#__PURE__*/_jsxs(Pressable, {
+      }), /*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-header` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale),
         "aria-expanded": quickJumpOpen,
         onPress: toggleQuickJump,
-        style: headerButtonStyle,
-        children: [/*#__PURE__*/_jsx(Text, {
+        onPressIn: headerPress.handlers.onPressIn,
+        onPressOut: headerPress.handlers.onPressOut,
+        onLayout: headerPress.onLayout,
+        style: [headerButtonStyle, headerPress.pressed && {
+          backgroundColor: chrome.headerPressed
+        }],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          style: [StyleSheet.absoluteFill, headerOverlayStyle, headerPress.overlayStyle, {
+            pointerEvents: 'none'
+          }]
+        }), /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: headerLabelStyle,
           children: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale)

package/lib/module/modules/date-picker/CalendarProps.js

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