pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/date-picker/DatePicker.variants.js

@@ -18,14 +18,15 @@
  * Asia/Beirut) — the single most common calendar bug class there is.
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** `1` = Monday (the library default — the team and its consumer apps are India-based, where the
  *  week starts on Monday), `0` = Sunday. */
 
 /** Same floor as Button/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay
  *  isolated. */
-export const MIN_TOUCH_TARGET = 44;
 export const DAY_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
 export const QUICK_JUMP_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
 export const TIME_OPTION_HEIGHT = MIN_TOUCH_TARGET;
@@ -494,6 +495,14 @@ export function resolveDateFieldAccessibility(input) {
     disabled
   };
 }
+export function resolvePressedAccessibilityState(selected) {
+  return {
+    "aria-pressed": selected,
+    accessibilityState: {
+      selected
+    }
+  };
+}
 /** Appended to a day's label when the grid conveys the state with colour only (WCAG 1.4.1). */
 export const TODAY_SUFFIX = "today";
 export const IN_RANGE_SUFFIX = "in selected range";
@@ -505,14 +514,15 @@ export function resolveCalendarDayAccessibility(input) {
   return {
     accessibilityRole: "button",
     accessibilityLabel: parts.join(", "),
-    "aria-selected": input.selected,
-    "aria-disabled": input.disabled
+    "aria-disabled": input.disabled,
+    ...resolvePressedAccessibilityState(input.selected)
   };
 }
 export const calendarStructure = createThemedVariants(theme => ({
   base: {
     alignSelf: "stretch",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingHorizontal: theme.space[2],
     paddingVertical: theme.space[2],
     rowGap: theme.space[1]
@@ -538,7 +548,8 @@ export const calendarHeaderButtonStructure = createThemedVariants(theme => ({
     flexShrink: 1,
     minHeight: MIN_TOUCH_TARGET,
     paddingHorizontal: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -578,7 +589,8 @@ export const calendarDayCellStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     minHeight: DAY_CELL_MIN_HEIGHT,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     // Every cell reserves the today-ring's width so a month's rows don't shift when today scrolls
     // into view; only today's cell paints a colour over it.
     borderWidth: theme.borderWidths.thick,
@@ -602,7 +614,8 @@ export const quickJumpCellStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     minHeight: QUICK_JUMP_CELL_MIN_HEIGHT,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -630,7 +643,8 @@ export const timeOptionStructure = createThemedVariants(theme => ({
     height: TIME_OPTION_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -642,7 +656,8 @@ export const dateFieldStructure = createThemedVariants(theme => ({
     height: DATE_FIELD_HEIGHT,
     paddingHorizontal: theme.space[4],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[2]
   }
 }));
@@ -666,7 +681,8 @@ export const pickerOverlayStructure = createThemedVariants(theme => ({
 }));
 export const pickerSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     padding: theme.space[2],
     rowGap: theme.space[2],
     ...theme.elevation.lg

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

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

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

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

package/lib/module/modules/date-picker/MODULE.md

@@ -23,11 +23,13 @@ logic, formatting) is hand-written and unit-tested rather than pulled in from a
 | `__tests__/DatePicker.render.test.tsx` | Render: all four components, open/close, selection, disabled, clear, tabs, backdrop dismiss, web-portal opt-in, **and the rendered 44dp targets**. |
 | `__tests__/DatePicker.motion.test.tsx` | Reduce-motion: the sheet's reveal and a time option's press must be at their end value on the next frame. |
 | `__tests__/PickerShell.keyboard.web.test.tsx` | Escape / Tab trap / focus restore on the web-portal branch, and their deliberate absence on the RNModal branch. |
+| `__tests__/PickerShell.dom.test.tsx` | Real DOM: the sheet's modal/hidden props on react-native-web. |
 | `__tests__/Calendar.keys.web.test.ts` | The web key→move mapping and the roving-focus effect, against a hand-built DOM. |
 
 ## Props
 
-**Calendar** — `value?`, `onChange?(date)` (single mode), `mode?: "single" | "range"` (`single`),
+**Calendar** — `value?`, `onChange?(date)` (single mode), `onSelect?(date)` (alias for `onChange`,
+taking precedence when both are passed), `mode?: "single" | "range"` (`single`),
 `rangeValue?`, `onRangeChange?(range)`, `minDate?`, `maxDate?`, `disabledDates?: Date[]`,
 `firstDayOfWeek?: 0 | 1` (`1` = Monday), `locale?` (`en-US`, drives month/weekday NAMES only via
 `Intl`), `style?`, `testID?`. `onChange` is optional — a range-only `Calendar` isn't forced to pass a
@@ -37,7 +39,8 @@ no-op; the reverse holds for `onRangeChange`.
 `testID?`.
 
 **DatePicker** — `value?`, `onChange(date | null)`, `mode?: "date" | "datetime" | "time"` (`date`),
-`label?`, `placeholder?` (`"Select date"`), `minDate?`, `maxDate?`, `disabled?`, `error?`,
+`confirmOnSelect?` (`false`; when true, tapping a day in `mode="date"` commits and closes the sheet —
+ignored in the other two modes), `label?`, `placeholder?` (`"Select date"`), `minDate?`, `maxDate?`, `disabled?`, `error?`,
 `clearable?` (`true`), `format?(date)` (replaces the whole field string), `use24Hour?`,
 `firstDayOfWeek?`, `locale?`, `containerStyle?: LayoutStyle`, `testID?`.
 
@@ -54,14 +57,27 @@ No `mode`/`use24Hour` — a range has no time-of-day dimension in this module.
   with a role and no state. RN's own `View`/`Text`/`Pressable` merge the flat props back into
   `accessibilityState` (`View.js`), so native loses nothing — which is why the render tests can still
   read `props.accessibilityState.*` truthfully. The resolvers therefore return literal quoted keys
-  (`"aria-selected"`, `"aria-expanded"`, `"aria-disabled"`) and the JSX spells each one out.
+  (`"aria-expanded"`, `"aria-disabled"`) and the JSX spells each one out. `aria-pressed` is the one
+  exception: React Native doesn't recognize it, so it isn't merged/stripped — it reaches the rendered
+  node as-is on both platforms, and `resolvePressedAccessibilityState` supplies the native
+  `accessibilityState.selected` fallback explicitly alongside it (`core/a11y/MODULE.md`).
 - **1.3.1 / 4.1.2** — every day cell's `accessibilityLabel` is the FULL readable date
-  (`formatFullDate`, e.g. "Friday, March 15, 2024"), never the bare number; `aria-selected` /
+  (`formatFullDate`, e.g. "Friday, March 15, 2024"), never the bare number; `aria-pressed` /
   `aria-disabled` carry its state. The field is `accessibilityRole="button"` with `aria-expanded`
   tracking the sheet, matching Select's trigger contract.
+- **A day cell, a quick-jump month cell and an hour/minute/meridiem option are all `role="button"`,
+  so their chosen state is `aria-pressed`, never `aria-selected`** (invalid ARIA on `role="button"`,
+  browsers ignore it — 2026-08 sweep, same fix `chip`'s filter toggle uses). Kept `role="button"`
+  rather than switching to `option`/`gridcell`: those roles aren't in React Native's typed
+  `accessibilityRole`, and RNW only treats a literal `role="button"` as buttonish for Space-key
+  activation — changing the role would have silently broken keyboard operability
+  (`core/a11y/MODULE.md`'s "do not fix Space by changing the role"). The shared
+  `resolvePressedAccessibilityState(selected)` returns the flat `aria-pressed` (WEB) +
+  `accessibilityState={{ selected }}` (NATIVE fallback — RN has no "pressed" state) pair all three
+  use; `resolveCalendarDayAccessibility` composes it in.
 - **1.4.1 — colour is never the only channel.** "today" and range membership are colour in the grid,
   so `resolveCalendarDayAccessibility` folds them into the label too (`", today"`,
-  `", in selected range"`). `aria-selected` marks only the two range ENDPOINTS, so without the
+  `", in selected range"`). `aria-pressed` marks only the two range ENDPOINTS, so without the
   suffix the days between them read as unselected.
 - **4.1.2 — the sheet is a real modal**: `accessibilityViewIsModal` **and** `aria-modal` (a genuine
   both-props case — RN's `View` reads only the first, `react-native-web` only the second), plus
@@ -103,8 +119,14 @@ No `mode`/`use24Hour` — a range has no time-of-day dimension in this module.
   and the field border are measured ≥ 3:1 against their surface.
 - **2.3.3** — the sheet's RN `<Modal>` is `animationType="none"` unconditionally; the fade/slide is
   `core/motion`'s `useReveal`, which `setValue`s opacity/translateY straight to their end state under
-  `useReducedMotion()` (`usePressMotion` likewise for a time option's press). `DatePicker.motion.test.tsx`
+  `useReducedMotion()` (`usePressState` likewise for calendar cells, quick-jump cells, and time
+  options). `DatePicker.motion.test.tsx`
   covers it — the old `animationType={reducedMotion ? "none" : "fade"}` prop it replaced is gone.
+- **Android touch feedback** — `TimeOption`, the field `Pressable`, and the clear button all carry
+  `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`), gated on
+  `Platform.OS === "android"`. The field box and the clear button each gained `overflow: "hidden"`
+  so the ripple clips to their rounded bounds instead of escaping them. The backdrop stays
+  ripple-free, consistent with its `accessible={false}` decoy status above.
 
 ## Patterns copied from the reference modules
 
@@ -162,8 +184,4 @@ month grid are plain views, matching `Tabs`'/`Menu`'s choice not to virtualize s
 Formatters (`Intl.DateTimeFormat`) are cached per `(locale, shape)` — a month render formats 42
 accessible day labels, and constructing a fresh formatter per cell measurably dominated that work.
 
-## 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.
+`PickerShell`'s backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`.

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

@@ -8,10 +8,11 @@
  * a11y wiring and focus/error treatment are otherwise identical.
  */
 
-import { memo, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useMemo, useState } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { CLEAR_BUTTON_HIT_SLOP, DATE_FIELD_FONT_SIZE, DATE_FIELD_HIT_SLOP, DATE_FIELD_ICON_SIZE, clearButtonStructure, dateFieldStructure, resolveDateFieldAccessibility, resolveDateFieldColors } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -43,6 +44,10 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
     open
   });
   const showClear = clearable && !disabled && displayText !== "";
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [label !== undefined &&
@@ -63,7 +68,8 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
       // picker — the padding stayed here and killed 16dp of target on each side (WCAG 2.5.5).
       {
         borderColor: fieldColors.border,
-        paddingHorizontal: 0
+        paddingHorizontal: 0,
+        overflow: "hidden"
       }, disabled && styles.dimmed],
       children: [/*#__PURE__*/_jsxs(Pressable, {
         testID: testID,
@@ -76,6 +82,7 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false),
         hitSlop: DATE_FIELD_HIT_SLOP,
+        android_ripple: androidRipple,
         style: [styles.fieldPressable, {
           paddingLeft: theme.space[4],
           paddingRight: showClear ? 0 : theme.space[4]
@@ -100,8 +107,10 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
         accessibilityLabel: clearAccessibilityLabel,
         hitSlop: CLEAR_BUTTON_HIT_SLOP,
         onPress: onClear,
+        android_ripple: androidRipple,
         style: [clearButtonStructure(theme), {
-          marginRight: theme.space[4]
+          marginRight: theme.space[4],
+          overflow: "hidden"
         }],
         children: /*#__PURE__*/_jsx(Icon, {
           name: "x",

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

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

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

@@ -17,19 +17,22 @@
  */
 
 import { memo, useContext, useMemo, useRef } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
-import { useReveal } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useReveal } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { pickerFooterStructure, pickerOverlayStructure, pickerSheetStructure } from "./DatePicker.variants.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 // Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
 // text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same constant
 // Select/Menu use for their identical backdrop.
-const BACKDROP_SCRIM = "#00000099";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   open,
   accessibilityLabel,
@@ -41,6 +44,10 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const portalContainer = useContext(ModalPortalContext);
   const sheetRef = useRef(null);
   // Only on the portal branch: the RN <Modal> path below already gets Escape/trap/restore from
@@ -70,9 +77,10 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
       style: styles.backdrop,
       onPress: onCancel
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         ref: sheetRef,
         testID: testID ? `${testID}-sheet` : undefined
         // Mirrors Modal/BottomSheet: on the web-portal path there is no RN <Modal> to take the
@@ -85,7 +93,7 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
         accessibilityLabel: accessibilityLabel,
         onAccessibilityEscape: onCancel,
         style: sheetStyle,
-        children: [children, /*#__PURE__*/_jsxs(View, {
+        children: [renderNodeSlot(children, childrenSlotStyle), /*#__PURE__*/_jsxs(View, {
           style: footerStructure,
           children: [/*#__PURE__*/_jsx(Button, {
             variant: "outline",
@@ -110,14 +118,17 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   if (portalled) {
     if (!open) return null;
     return renderWebPortal(/*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, {
+        pointerEvents: 'box-none'
+      }],
       children: sheet
     }), portalContainer);
   }
   return /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: onCancel,
     children: sheet

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

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

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

@@ -1,19 +1,16 @@
 "use strict";
 
 /**
- * TimePicker — hour / minute (/ AM-PM) selection as independent scrollable columns, never an analog
- * clock face. Hour and minute are virtualized `FlatList`s (Select's precedent — a minute column can
- * hold up to 60 rows); the two-item AM/PM column is a plain view, matching Tabs' own choice not to
- * virtualize a handful of items.
- *
- * All arithmetic (12/24-hour conversion, AM/PM flip, option lists) lives in `DatePicker.variants.ts`.
+ * TimePicker — hour / minute (/ AM-PM) selection columns.
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, FlatList, Pressable, Text, View } from "react-native";
+import { FlatList, Platform, Pressable, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { applyMeridiem, buildHourOptions, buildMinuteOptions, DEFAULT_TIME_HOUR, fromDisplayHour, resolveTimeOptionColors, TIME_OPTION_HEIGHT, timeColumnStructure, timeColumnsStructure, timeOptionStructure, toDisplayHour, toMeridiem, withTime } from "./DatePicker.variants.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { applyMeridiem, buildHourOptions, buildMinuteOptions, DEFAULT_TIME_HOUR, fromDisplayHour, resolvePressedAccessibilityState, resolveTimeOptionColors, TIME_OPTION_HEIGHT, timeColumnStructure, timeColumnsStructure, timeOptionStructure, toDisplayHour, toMeridiem, withTime } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MERIDIEMS = ["AM", "PM"];
 const TimeOption = /*#__PURE__*/memo(function TimeOption({
@@ -40,21 +37,29 @@ const TimeOption = /*#__PURE__*/memo(function TimeOption({
     color: resting.label
   }], [theme, selected, resting.label]);
   const handlePress = useCallback(() => onPress(value), [onPress, value]);
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const optionStyle = useCallback(({
     pressed
   }) => [optionStructure, {
+    overflow: "hidden",
     backgroundColor: pressed ? pressedBackground : resting.background
   }], [optionStructure, pressedBackground, resting.background]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
-    "aria-selected": selected,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: optionStyle,
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID ? `${testID}-motion` : undefined,
       style: press.style,
       children: /*#__PURE__*/_jsx(Text, {
@@ -64,9 +69,6 @@ const TimeOption = /*#__PURE__*/memo(function TimeOption({
     })
   });
 });
-
-/** The index of `options`' closest value to `target`. Pure and option-list-agnostic, so it works
- *  for any `minuteStep` (a `:37` value with a 5-minute step has no exact match in `options`). */
 function nearestIndex(options, target) {
   let bestIndex = 0;
   let bestDiff = Infinity;
@@ -95,12 +97,6 @@ export const TimePicker = /*#__PURE__*/memo(function TimePicker({
   const meridiem = toMeridiem(hour24);
   const hours = useMemo(() => buildHourOptions(use24Hour), [use24Hour]);
   const minutes = useMemo(() => buildMinuteOptions(minuteStep), [minuteStep]);
-
-  // Opens each column scrolled to the current value (or the noon/00 default) instead of the top —
-  // `getItemLayout` below already gives `FlatList` a fixed row height, so `initialScrollIndex` needs
-  // no measurement pass. `minute` may fall between two `minuteStep` rungs (e.g. a `:37` value with a
-  // 5-minute step), so the minute column opens on the CLOSEST option rather than requiring an exact
-  // match.
   const initialHourIndex = Math.max(0, hours.indexOf(displayHour));
   const initialMinuteIndex = nearestIndex(minutes, minute);
   const commitHour = useCallback(nextDisplayHour => {

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

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

package/lib/module/modules/description-list/DescriptionList.js

@@ -0,0 +1,90 @@
+"use strict";
+
+/**
+ * DescriptionList — read-only label/value pairs for record-detail screens. Not pressable; use
+ * `list-item` for navigable rows.
+ */
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { CopyButton } from "../copy-button/index.js";
+import { Skeleton } from "../skeleton/index.js";
+import { Text } from "../text/index.js";
+import { descriptionListRowStructure, descriptionListStructure, resolveDescriptionListLabelStyle, resolveDescriptionListValueRowStructure, resolveDescriptionListValueStyle } from "./DescriptionList.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LOADING_ROWS = 4;
+export const DescriptionList = /*#__PURE__*/memo(function DescriptionList({
+  items,
+  columns = 1,
+  layout = "stacked",
+  isLoading = false,
+  copyable = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [descriptionListStructure(theme), style], [theme, style]);
+  const rowStructure = descriptionListRowStructure(theme, {
+    layout,
+    columns
+  });
+  const labelStyle = useMemo(() => resolveDescriptionListLabelStyle(theme), [theme]);
+  const valueStyle = useMemo(() => resolveDescriptionListValueStyle(theme, theme.colors), [theme]);
+  const valueRowStyle = useMemo(() => resolveDescriptionListValueRowStructure(), []);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: rootStyle,
+      children: Array.from({
+        length: LOADING_ROWS
+      }, (_, index) => /*#__PURE__*/_jsxs(View, {
+        style: rowStructure,
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          width: 96,
+          height: 12,
+          staggerIndex: index
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          width: layout === "inline" ? 120 : 180,
+          height: 16,
+          staggerIndex: index
+        })]
+      }, index))
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: "none",
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: "row",
+        flexWrap: columns === 2 ? "wrap" : "nowrap"
+      },
+      children: items.map((item, index) => {
+        const rowCopyable = copyable && item.copyable !== false && item.value.length > 0;
+        return /*#__PURE__*/_jsxs(View, {
+          style: rowStructure,
+          testID: testID ? `${testID}-row-${index}` : undefined,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: labelStyle,
+            children: item.label
+          }), /*#__PURE__*/_jsxs(View, {
+            style: valueRowStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: valueStyle,
+              children: item.value
+            }), rowCopyable ? /*#__PURE__*/_jsx(CopyButton, {
+              value: item.value,
+              variant: "icon",
+              size: "sm",
+              testID: testID ? `${testID}-copy-${index}` : undefined
+            }) : null]
+          })]
+        }, `${item.label}-${index}`);
+      })
+    })
+  });
+});
+//# sourceMappingURL=DescriptionList.js.map

package/lib/module/modules/description-list/DescriptionList.variants.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const descriptionListStructure = createThemedVariants(() => ({
+  base: {
+    width: "100%"
+  },
+  variants: {},
+  defaultVariants: {}
+}));
+export const descriptionListRowStructure = createThemedVariants(theme => ({
+  base: {
+    paddingVertical: theme.space[2],
+    gap: theme.space[1]
+  },
+  variants: {
+    layout: {
+      stacked: {
+        flexDirection: "column"
+      },
+      inline: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between"
+      }
+    },
+    columns: {
+      1: {
+        width: "100%"
+      },
+      2: {
+        width: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "stacked",
+    columns: 1
+  }
+}));
+export function resolveDescriptionListLabelStyle(theme) {
+  return {
+    fontSize: theme.fontSizes.xs,
+    color: theme.colors.fg.muted,
+    ...theme.fontStyleForWeight(theme.fontWeights.medium)
+  };
+}
+export function resolveDescriptionListValueStyle(theme, colors) {
+  return {
+    fontSize: theme.fontSizes.sm,
+    color: colors.fg.default,
+    ...theme.fontStyleForWeight(theme.fontWeights.regular)
+  };
+}
+export function resolveDescriptionListValueRowStructure() {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 1
+  };
+}
+//# sourceMappingURL=DescriptionList.variants.js.map

package/lib/module/modules/description-list/DescriptionListProps.js

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

package/lib/module/modules/description-list/MODULE.md

@@ -0,0 +1,15 @@
+# description-list/ — a read-only label/value grid for record-detail screens
+
+Read-only label/value grid for record-detail screens (`columns`, `layout`, loading skeletons, optional per-row copy).
+
+## Exports
+
+- `DescriptionList` — `items` (required), `columns` (`1`|`2`, default `1`), `layout`
+  (`stacked`|`inline`, default `stacked`), `isLoading` (`false`), `copyable` (`false` — only rows
+  whose own `DescriptionListItem.copyable` is set show the affordance), `style`, `testID`
+- Types: `DescriptionListItem`, `DescriptionListProps`, `DescriptionListLayout`, `DescriptionListColumns`
+
+## Dependencies
+
+- `copy-button`, `skeleton`, `text`
+- Not a substitute for `list-item` (no press/navigation semantics).

package/lib/module/modules/description-list/index.js

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

package/lib/module/modules/divider/Divider.variants.js

@@ -1,8 +1,9 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * Divider's style resolution — same split as `Card.variants` / `Button.variants`:
- *  - STRUCTURE (the hairline's thickness on the cross axis) lives in the themed `dividerStructure`
+ *  - STRUCTURE (the StyleSheet.hairlineWidth's thickness on the cross axis) lives in the themed `dividerStructure`
  *    resolver, static per (brand, mode), registered once via `StyleSheet.create`.
  *  - COLOUR is resolved from the theme's ROLE colours by `resolveDividerColor`, never a raw ramp
  *    and never a hardcoded hex.
@@ -27,19 +28,19 @@ export function resolveDividerColor(colors) {
 }
 
 /**
- * Structural styles only — the hairline's thickness on the theme's `borderWidths` scale, spanning
+ * Structural styles only — the StyleSheet.hairlineWidth's thickness on the theme's `borderWidths` scale, spanning
  * the full cross axis. No colour (resolved separately, applied inline over this), so this compiles
  * once per theme identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
  */
-export const dividerStructure = createThemedVariants(theme => ({
+export const dividerStructure = createThemedVariants(_theme => ({
   variants: {
     orientation: {
       horizontal: {
-        height: theme.borderWidths.thin,
+        height: StyleSheet.hairlineWidth,
         width: "100%"
       },
       vertical: {
-        width: theme.borderWidths.thin,
+        width: StyleSheet.hairlineWidth,
         alignSelf: "stretch"
       }
     }

package/lib/module/modules/divider/DividerProps.js

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