@thewhileloop/whileui 2.0.0 → 4.0.0

package/README.md

@@ -4,7 +4,7 @@
 
 Beautiful, accessible, themeable components built with [Uniwind](https://uniwind.dev) + Tailwind CSS v4.
 
-**Requirements:** React 19+, React Native 0.81+, Expo 52+ (if using Expo). Supports React Native Web.
+**Requirements:** React 19.3+, React Native 0.88+, Expo 58+ (if using Expo). Supports React Native Web.
 
 WhileUI has one renderer: React Native. iOS, Android and React Native Web are all
 production targets — iOS and Android set the interaction baseline. See
@@ -15,7 +15,7 @@ production targets — iOS and Android set the interaction baseline. See
 
 ```bash
 bun add @thewhileloop/whileui
-bun add react@^19.0.0 react-native@^0.81.0 uniwind@^1.0.0 tailwindcss@^4.0.0 react-native-reanimated react-native-safe-area-context react-native-screens
+bun add react@^19.3.0 react-native@^0.88.0 uniwind@^1.12.2 tailwindcss@^4.0.0 react-native-reanimated react-native-safe-area-context react-native-screens
 # Only if you use Select, Popover, Tooltip, or HoverCard:
 bun add @rn-primitives/portal @rn-primitives/hooks @rn-primitives/slot @rn-primitives/select @rn-primitives/popover @rn-primitives/tooltip @rn-primitives/hover-card
 ```
@@ -27,16 +27,20 @@ Use `npm install` instead of `bun add` if you prefer npm.
 1. **metro.config.js** (wrap with withUniwindConfig):
 
 ```js
+const { getDefaultConfig } = require('expo/metro-config');
 const { withUniwindConfig } = require('uniwind/metro');
 
-module.exports = withUniwindConfig({
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = withUniwindConfig(config, {
   cssEntryFile: './global.css',
-})({
-  // your metro config
 });
 ```
 
-> `withUniwindConfig` must be the outermost wrapper. `cssEntryFile` must be a relative path string.
+> `withUniwindConfig(config, options)` takes the config first and returns the wrapped
+> config — it is not curried. It must wrap the outermost config object, and
+> `cssEntryFile` must be a relative path string.
 
 2. **global.css** at app root:
 
@@ -44,6 +48,11 @@ module.exports = withUniwindConfig({
 @import 'tailwindcss';
 @import 'uniwind';
 
+/* Required when WhileUI is installed from npm. Tailwind does not scan
+   node_modules, so without this its class names are never detected and every
+   component renders unstyled. */
+@source './node_modules/@thewhileloop/whileui/dist';
+
 /* WhileUI Noir theme - copy this or create your own */
 @layer theme {
   :root {
@@ -216,7 +225,9 @@ function MyScreen() {
 - **PortalHost:** Add `<PortalHost />` at app root for Select, Popover, Tooltip, HoverCard.
 - **Motion:** Wrap the root in `<MotionProvider>`; use `useMotionPolicy()` for semantic
   durations, the responsive spring, and reduced-motion behavior.
-- **Uniwind:** `withUniwindConfig` must wrap metro config. `global.css` at app root, imported in `App.tsx`.
+- **Uniwind:** `withUniwindConfig(config, options)` wraps metro config — config first, not
+  curried. `global.css` at app root, imported in `App.tsx`. Installing from npm also needs
+  `@source './node_modules/@thewhileloop/whileui/dist';` or every component renders unstyled.
 - **Reference:** Block props in `packages/ui/src/blocks` (core) and `apps/showcase/templates/` (auth, profile); flow patterns in README "Flow Patterns" section.
 
 ## Components
@@ -259,18 +270,19 @@ function MyScreen() {
 
 ### Display
 
-| Component       | Variants                                          | Notes                                                                           |
-| --------------- | ------------------------------------------------- | ------------------------------------------------------------------------------- |
-| **Card**        | padding (none, sm, default, lg), unstyled         | Compound: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
-| **Badge**       | default, secondary, destructive, outline, success | BadgeText sub-component                                                         |
-| **Alert**       | default, destructive, success, warning            | AlertTitle & AlertDescription                                                   |
-| **Avatar**      | sm, default, lg                                   | AvatarImage + AvatarFallback                                                    |
-| **DataRow**     | default, compact                                  | DataRow, DataRowLeft/Center/Right, DataRowLabel/Description/Value               |
-| **Separator**   | horizontal, vertical                              | Themed divider                                                                  |
-| **Progress**    | sm, default, lg                                   | Value-based progress bar with accessibility                                     |
-| **Spinner**     | sm, default, lg                                   | ActivityIndicator wrapper                                                       |
-| **Skeleton**    | pulse, shimmer                                    | Loading placeholder (pulse = opacity fade, shimmer = sweep)                     |
-| **AspectRatio** | —                                                 | Maintain aspect ratio container                                                 |
+| Component       | Variants                                                | Notes                                                                           |
+| --------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| **Card**        | padding (none, sm, default, lg), unstyled               | Compound: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
+| **Badge**       | default, secondary, destructive, outline, success       | BadgeText sub-component                                                         |
+| **FAB**         | default, secondary, destructive, surface; sm/default/lg | Floating action button. `label` required; pass your own icon as children        |
+| **Alert**       | default, destructive, success, warning                  | AlertTitle & AlertDescription                                                   |
+| **Avatar**      | sm, default, lg                                         | AvatarImage + AvatarFallback                                                    |
+| **DataRow**     | default, compact                                        | DataRow, DataRowLeft/Center/Right, DataRowLabel/Description/Value               |
+| **Separator**   | horizontal, vertical                                    | Themed divider                                                                  |
+| **Progress**    | sm, default, lg                                         | Value-based progress bar with accessibility                                     |
+| **Spinner**     | sm, default, lg                                         | ActivityIndicator wrapper                                                       |
+| **Skeleton**    | pulse, shimmer                                          | Loading placeholder (pulse = opacity fade, shimmer = sweep)                     |
+| **AspectRatio** | —                                                       | Maintain aspect ratio container                                                 |
 
 ### Layout
 
@@ -404,6 +416,7 @@ Copy from `apps/showcase/templates/profile/`:
 | **DatePickerModal**      | Bottom sheet modal with calendar, compact trigger |
 | **DatePickerInline**     | Inline calendar for forms or dashboards           |
 | **DateRangePickerModal** | Range selection modal with period marking         |
+| **TimePickerModal**      | Hour and minute wheels in the same bottom sheet   |
 
 **Tokens without a renderer.** `@thewhileloop/whileui/tokens` exports the theme
 and visual contracts, the presets, and `deriveThemeColors(base, scheme)` — give it
@@ -412,6 +425,55 @@ as the default presets. Safe in a build script (no React, RN or Uniwind
 imports); `useThemeColors()` uses it too, so a missing `--color-primary-soft`
 derives from the app's own primary instead of falling back to the default palette.
 
+**Building a product preset.** Use `createThemePreset` rather than a `ThemePreset`
+literal — it takes the 25 base colours per scheme and derives the rest:
+
+```ts
+import { createThemePreset, themePresetToCss } from '@thewhileloop/whileui/tokens';
+
+const preset = createThemePreset({
+  name: 'acme',
+  description: 'Acme brand palette.',
+  light: { background: '...', foreground: '...', primary: '...' /* 25 base keys */ },
+  dark: { background: '...', foreground: '...', primary: '...' },
+  visual: { radiusLg: 12 }, // optional, partial
+});
+
+writeFileSync('theme.generated.css', themePresetToCss(preset));
+```
+
+The literal form asks for all 52 colours per scheme, including every active variant,
+soft variant, overlay, surface, interaction state and shadow. Those are exactly what
+`deriveThemeColors` computes, so hand-writing them produces a second derivation that
+drifts from the library's. Override a derived value by assigning to the result.
+
+### FAB
+
+One primary action, raised above the content. It owns no icon dependency — pass the
+glyph as children and colour it from `useIconColors()`, because icon libraries need a
+concrete colour rather than a class.
+
+```tsx
+import { FAB, useIconColors } from '@thewhileloop/whileui';
+import { Feather } from '@expo/vector-icons';
+
+const icons = useIconColors();
+
+<FAB label="New group" onPress={create}>
+  <Feather name="plus" size={24} color={icons.primaryForeground} />
+</FAB>;
+```
+
+| Prop        | Type                                             | Default    | Notes                                   |
+| ----------- | ------------------------------------------------ | ---------- | --------------------------------------- |
+| `label`     | `string`                                         | —          | Required. The accessible name           |
+| `variant`   | `default \| secondary \| destructive \| surface` | `default`  |                                         |
+| `size`      | `sm \| default \| lg`                            | `default`  | 48 / 56 / 64 — all clear touch minimums |
+| `placement` | `floating \| floating-left \| inline`            | `floating` | `inline` lets the caller position it    |
+
+`FABGroup` stacks secondary actions above one. Sizes start at 48dp, so a FAB never
+needs `hitSlop`.
+
 ## Layout Primitives (Stack, Row)
 
 Use `Stack` for vertical layouts, `Row` for horizontal layouts. Both support `gap`, `align`, and `justify` variants.
@@ -592,7 +654,7 @@ The WhileUI token contract is strict for cross-app reuse. Define these in **ever
 - Required core tokens: `background`, `foreground`, `card`, `card-foreground`, `popover`, `popover-foreground`, `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `muted`, `muted-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`, `border`, `input`, `ring`
 - Optional status tokens: `success`, `success-foreground`, `warning`, `warning-foreground`, `info`, `info-foreground`
 - Optional effect tokens: `overlay`, `overlay-strong`, `surface-elevated`, `surface-border`, `surface-highlight`, `surface-translucent`, `surface-translucent-border`, `state-hover`, `state-pressed`, `state-disabled`
-- Optional interaction/motion tokens: `--ui-press-opacity`, `--ui-press-opacity-strong`, `--ui-disabled-opacity`, `--ui-disabled-opacity-soft`, `--ui-disabled-opacity-subtle`, `--ui-inactive-opacity`, `--ui-motion-fast`, `--ui-motion-normal`, `--ui-motion-slow`, `--ui-motion-spring-damping`, `--ui-motion-spring-stiffness`, `--ui-motion-spring-mass`, `--ui-drawer-open-duration`, `--ui-drawer-close-duration`, `--ui-blur-intensity-subtle`, `--ui-blur-intensity-medium`, `--ui-blur-intensity-strong`, `--ui-blur-saturation-pct`, `--ui-frosted-highlight-height`, `--ui-frosted-backdrop-blur-intensity`, `--ui-frosted-backdrop-blur-scale`, `--ui-frosted-android-tint-alpha-scale`, `--ui-frosted-android-experimental-blur`, `--ui-drawer-frosted-inset`, `--ui-drawer-frosted-radius`, `--ui-drawer-content-top-padding`
+- Optional visual tokens, generated from a preset: `--ui-blur-intensity-subtle`, `--ui-blur-intensity-medium`, `--ui-blur-intensity-strong`, `--ui-blur-saturation-pct`, `--ui-frosted-highlight-height`, `--ui-frosted-backdrop-blur-intensity`, `--ui-frosted-backdrop-blur-scale`, `--ui-frosted-android-tint-alpha-scale`, `--ui-frosted-android-experimental-blur`, `--ui-drawer-frosted-inset`, `--ui-drawer-frosted-radius`, `--ui-drawer-content-top-padding`
 - Optional scale tokens: spacing (`--spacing`, `--spacing-*`), typography (`--text-*`, `--leading-*`, `--tracking-*`), radius (`--radius-*`), elevation (`--shadow-*`)
 
 Minimal contract example:
@@ -710,53 +772,25 @@ const iconColors = useIconColors();
 
 Input, Textarea, NumericInput, SmartInput, Spinner, and LoadingScreen default to theme colors when you omit `placeholderTextColor` or `spinnerColor`.
 
-### Interaction + Motion Tokens
-
-WhileUI components also read optional `--ui-*` tokens for deeper control of press feedback, disabled states, and motion timing:
+### Interaction and motion
 
-```css
-@theme {
-  --ui-press-opacity: 0.72;
-  --ui-press-opacity-strong: 0.9;
-  --ui-disabled-opacity: 0.5;
-  --ui-disabled-opacity-soft: 0.6;
-  --ui-disabled-opacity-subtle: 0.4;
-  --ui-inactive-opacity: 0.5;
-  --ui-motion-fast: 160;
-  --ui-motion-normal: 220;
-  --ui-motion-slow: 300;
-  --ui-motion-spring-damping: 20;
-  --ui-motion-spring-stiffness: 260;
-  --ui-motion-spring-mass: 0.8;
-  --ui-drawer-open-duration: 300;
-  --ui-drawer-close-duration: 220;
-  --ui-blur-intensity-subtle: 18;
-  --ui-blur-intensity-medium: 22;
-  --ui-blur-intensity-strong: 28;
-  --ui-blur-saturation-pct: 185;
-  --ui-frosted-highlight-height: 0;
-  --ui-frosted-backdrop-blur-intensity: 14;
-  --ui-frosted-backdrop-blur-scale: 0.55;
-  --ui-frosted-android-tint-alpha-scale: 1.22;
-  --ui-frosted-android-experimental-blur: 1;
-  --ui-drawer-frosted-inset: 0;
-  --ui-drawer-frosted-radius: 28;
-  --ui-drawer-content-top-padding: 0;
-}
-```
+Press opacity, disabled opacity, motion durations, the responsive spring, and the drawer
+open and close durations are package constants on `INTERACTION_TOKENS`. They are not CSS
+variables and they do not change with a preset. Delete any `--ui-press-*`,
+`--ui-disabled-*`, `--ui-inactive-opacity`, `--ui-motion-*`, or `--ui-drawer-open-duration`
+/ `--ui-drawer-close-duration` declarations from a theme: nothing reads them.
 
-For custom components, use:
+For a custom control, read that table:
 
 ```tsx
 import { useInteractionTokens, withInteractivePressableStyle } from '@thewhileloop/whileui';
 ```
 
-Wrap the application in `MotionProvider` to coordinate system reduced motion, explicit
-preview overrides, and deterministic animation-free tests. The provider is optional:
-without it `useMotionPolicy` returns the token defaults with Reanimated following the
-system setting, and `--ui-motion-*` overrides are not read. `reduced` preserves
-non-spatial feedback while asking Reanimated to skip motion; `disabled` also resolves
-semantic durations to zero.
+Wrap the application in `MotionProvider` to coordinate system reduced motion, an explicit
+preview mode, and deterministic animation-free tests. The provider is optional. Without
+it `useMotionPolicy` reports the durations and spring from `INTERACTION_TOKENS`, and
+Reanimated follows the system setting. `reduced` preserves non-spatial feedback while asking Reanimated to skip motion;
+`disabled` also resolves semantic durations to zero.
 
 ```tsx
 import { MotionProvider, useMotionPolicy } from '@thewhileloop/whileui';
@@ -851,7 +885,8 @@ Optional RN fallback tokens (hex/rgb/hsl/named):
 }
 ```
 
-Or use the first-party ThemeBridge helper with optional persistence:
+Or use the first-party theme bridge with optional persistence. The hook owns theme
+state and exposes event-driven setters:
 
 ```tsx
 import { useThemeBridge, type ThemeBridgeAdapter } from '@thewhileloop/whileui';
@@ -866,6 +901,16 @@ const adapter: ThemeBridgeAdapter = {
 const { mode, resolvedTheme, setMode, cycleMode } = useThemeBridge({ adapter });
 ```
 
+When another store already owns the mode, mount the controlled bridge once near the
+application root. Change `mode` in the owning event handler; the bridge applies and
+persists it without mirroring state back through a callback effect.
+
+```tsx
+import { ThemeBridge } from '@thewhileloop/whileui';
+
+<ThemeBridge mode={mode} adapter={adapter} />;
+```
+
 ## Focus rings
 
 Every interactive component draws a themed focus ring on web. It uses `:focus-visible`,
@@ -963,12 +1008,12 @@ import { Input } from '@thewhileloop/whileui';
 <Input placeholder="Email" variant="default" value={value} onChangeText={setValue} />;
 ```
 
-| Prop                 | Type                   | Default     | Description                                              |
-| -------------------- | ---------------------- | ----------- | -------------------------------------------------------- |
-| variant              | `'default' \| 'error'` | `'default'` | Input style variant                                      |
-| placeholder          | `string`               | —           | Placeholder text                                         |
-| placeholderTextColor | `string`               | —           | Hex for placeholder; defaults to theme `mutedForeground` |
-| editable             | `boolean`              | `true`      | Whether input is editable                                |
+| Prop                 | Type                              | Default     | Description                                                           |
+| -------------------- | --------------------------------- | ----------- | --------------------------------------------------------------------- |
+| variant              | `'default' \| 'error' \| 'plain'` | `'default'` | Input style; `plain` drops border and fill for a large display figure |
+| placeholder          | `string`                          | —           | Placeholder text                                                      |
+| placeholderTextColor | `string`                          | —           | Hex for placeholder; defaults to theme `mutedForeground`              |
+| editable             | `boolean`                         | `true`      | Whether input is editable                                             |
 
 ## NumericInput
 
@@ -1550,7 +1595,8 @@ announces as a heading to assistive technology — as do `DropdownMenuLabel` and
 
 ## SignInForm
 
-Copy from `apps/showcase/templates/auth/sign-in-form.tsx`, then:
+Copy `sign-in-form.tsx` and its sibling `auth-form-footer.tsx` from
+`apps/showcase/templates/auth/`, then:
 
 ```tsx
 import { SignInForm } from './templates/auth'; // or your path
@@ -1574,7 +1620,8 @@ import { SignInForm } from './templates/auth'; // or your path
 
 ## SignUpForm
 
-Copy from `apps/showcase/templates/auth/sign-up-form.tsx`, then:
+Copy `sign-up-form.tsx` and its sibling `auth-form-footer.tsx` from
+`apps/showcase/templates/auth/`, then:
 
 ```tsx
 import { SignUpForm } from './templates/auth'; // or your path
@@ -1730,7 +1777,7 @@ const [value, setValue] = useState('');
 | `inputSafeArea`          | `boolean`            | SmartInput safe-area (default `true`)             |
 | `keyboardVerticalOffset` | `number`             | For header offset when keyboard opens             |
 
-## DatePickerModal / DatePickerInline / DateRangePickerModal
+## DatePickerModal / DatePickerInline / DateRangePickerModal / TimePickerModal
 
 Date selection blocks using react-native-calendars. Theme-aware via `useCalendarTheme` (Uniwind light/dark). Optional `theme` prop for custom RN color strings (hex/rgb/hsl/named). `CalendarTheme` maps to react-native-calendars Theme and supports `arrowColor`, `disabledArrowColor`, and optional font keys.
 
@@ -1740,6 +1787,8 @@ Date selection blocks using react-native-calendars. Theme-aware via `useCalendar
 
 **DateRangePickerModal** — Range selection with period marking. Use `DateRangePickerTrigger` as the trigger content.
 
+**TimePickerModal** — Hour and minute wheels (plus AM/PM under a 12-hour `hourCycle`) in the same bottom sheet, so a form's date and time fields open the same way. `value` is always `HH:MM` in 24-hour form. Each wheel is one `adjustable` element for assistive tech and the keyboard. Use `TimePickerTrigger` as the trigger content.
+
 ```tsx
 import {
   DatePickerModal,
@@ -1747,6 +1796,8 @@ import {
   DatePickerInline,
   DateRangePickerModal,
   DateRangePickerTrigger,
+  TimePickerModal,
+  TimePickerTrigger,
   type DateRange,
 } from '@thewhileloop/whileui';
 
@@ -1776,6 +1827,18 @@ const [range, setRange] = useState<DateRange | null>(null);
   onOpenChange={setRangeOpen}
   trigger={<DateRangePickerTrigger value={range} placeholder="Pick range" />}
 />;
+
+// Time (modal) — "HH:MM", 24-hour, whatever the wheels show
+const [time, setTime] = useState<string | null>(null);
+
+<TimePickerModal
+  value={time}
+  onValueChange={setTime}
+  open={timeOpen}
+  onOpenChange={setTimeOpen}
+  minuteStep={5}
+  trigger={<TimePickerTrigger value={time} placeholder="Pick a time" />}
+/>;
 ```
 
 | Prop                    | Type                                                               | Description                            |
@@ -1786,6 +1849,8 @@ const [range, setRange] = useState<DateRange | null>(null);
 | `trigger`               | `ReactNode`                                                        | Custom trigger (modal variants)        |
 | `minDate` / `maxDate`   | `string`                                                           | YYYY-MM-DD bounds                      |
 | `theme`                 | `CalendarTheme`                                                    | Override calendar colors               |
+| `hourCycle`             | `'h12' \| 'h23'`                                                   | Time picker wheels; defaults to locale |
+| `minuteStep`            | `number`                                                           | Minutes between options (default 1)    |
 | `frosted`               | `boolean`                                                          | Enable frosted surface for modal panel |
 | `blurIntensity`         | `number`                                                           | Override blur amount                   |
 | `blurTintToken`         | `'surfaceElevated' \| 'surfaceTranslucent' \| 'card' \| 'popover'` | Tint token for frosted panel           |

package/dist/blocks/commerce/metric-card.d.ts

@@ -3,40 +3,20 @@ import { type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const metricCardVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", {
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}>, {
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface MetricCardProps extends ViewProps, VariantProps<typeof metricCardVariants> {
     className?: string;
     label: string;

package/dist/blocks/datepicker/date-range-picker-modal.d.ts

@@ -29,7 +29,7 @@ export interface DateRangePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatRangeDisplay(range: DateRange | null | undefined): string;
-export declare function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DateRangePickerModalProps): React.JSX.Element;
+export declare function DateRangePickerModal(props: DateRangePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export declare function DateRangePickerTrigger({ value, placeholder, className, }: {
     value?: DateRange | null;

package/dist/blocks/datepicker/date-range-picker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -47,7 +47,7 @@ function buildMarkedDates(start, end, theme) {
     }
     return marked;
 }
-export function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DateRangePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
@@ -68,18 +68,6 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
     const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftStart, setDraftStart] = useState(value?.start ?? null);
     const [draftEnd, setDraftEnd] = useState(value?.end ?? null);
-    const prevOpenRef = useRef(open);
-    useEffect(() => {
-        if (open && !prevOpenRef.current) {
-            setDraftStart(value?.start ?? null);
-            setDraftEnd(value?.end ?? null);
-        }
-        else if (!open && prevOpenRef.current) {
-            setDraftStart(null);
-            setDraftEnd(null);
-        }
-        prevOpenRef.current = open;
-    }, [open, value]);
     const markedDates = useMemo(() => {
         const color = calendarTheme.selectedDayBackgroundColor;
         const textColor = calendarTheme.selectedDayTextColor;
@@ -151,6 +139,10 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
                                         borderWidth: visual.borderWidthHairline,
                                     }, children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
 }
+export function DateRangePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DateRangePickerModalSession, { ...props }, sessionKey);
+}
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export function DateRangePickerTrigger({ value, placeholder = 'Select date range', className, }) {
     const visual = useVisualTokens();

package/dist/blocks/datepicker/datepicker-modal.d.ts

@@ -25,7 +25,7 @@ export interface DatePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatDisplayDate(dateString: string | null | undefined): string;
-export declare function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DatePickerModalProps): React.JSX.Element;
+export declare function DatePickerModal(props: DatePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export declare function DatePickerTrigger({ value, placeholder, className, }: {
     value?: string | null;

package/dist/blocks/datepicker/datepicker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -23,7 +23,7 @@ function formatDisplayDate(dateString) {
         year: 'numeric',
     });
 }
-export function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DatePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
@@ -43,16 +43,6 @@ export function DatePickerModal({ value, onValueChange, open, onOpenChange, minD
     const arrowFontSize = typographyStyle(visual, 'body').fontSize;
     const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftDate, setDraftDate] = useState(value ?? null);
-    const prevOpenRef = useRef(open);
-    useEffect(() => {
-        if (open && !prevOpenRef.current) {
-            setDraftDate(value ?? null);
-        }
-        else if (!open && prevOpenRef.current) {
-            setDraftDate(null);
-        }
-        prevOpenRef.current = open;
-    }, [open, value]);
     const markedDates = useMemo(() => {
         if (!draftDate)
             return undefined;
@@ -95,6 +85,10 @@ export function DatePickerModal({ value, onValueChange, open, onOpenChange, minD
                                         borderWidth: visual.borderWidthHairline,
                                     }, children: _jsx(Calendar, { current: draftDate ?? value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
 }
+export function DatePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DatePickerModalSession, { ...props }, sessionKey);
+}
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export function DatePickerTrigger({ value, placeholder = 'Select date', className, }) {
     const visual = useVisualTokens();

package/dist/blocks/datepicker/index.d.ts

@@ -2,3 +2,4 @@ export { DatePickerModal, DatePickerTrigger, formatDisplayDate, type DatePickerM
 export { DatePickerInline, type DatePickerInlineProps } from './datepicker-inline';
 export { DateRangePickerModal, DateRangePickerTrigger, formatRangeDisplay, type DateRangePickerModalProps, type DateRange, } from './date-range-picker-modal';
 export { useCalendarTheme, type CalendarTheme } from './use-calendar-theme';
+export { TimePickerModal, TimePickerTrigger, formatDisplayTime, parseTime, type TimePickerModalProps, type HourCycle, } from './time-picker-modal';

package/dist/blocks/datepicker/index.js

@@ -2,3 +2,4 @@ export { DatePickerModal, DatePickerTrigger, formatDisplayDate, } from './datepi
 export { DatePickerInline } from './datepicker-inline';
 export { DateRangePickerModal, DateRangePickerTrigger, formatRangeDisplay, } from './date-range-picker-modal';
 export { useCalendarTheme } from './use-calendar-theme';
+export { TimePickerModal, TimePickerTrigger, formatDisplayTime, parseTime, } from './time-picker-modal';

package/dist/blocks/datepicker/time-picker-modal.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+export type HourCycle = 'h12' | 'h23';
+export interface TimePickerModalProps extends FrostedSurfaceProps {
+    /** Controlled: selected time as `HH:MM`, 24-hour, or null for none. */
+    value?: string | null;
+    /** Controlled: change handler. Always receives `HH:MM` in 24-hour form. */
+    onValueChange?: (time: string | null) => void;
+    /** Modal open state */
+    open: boolean;
+    /** Modal open change handler */
+    onOpenChange: (open: boolean) => void;
+    /** Minutes between options. 1 by default; 5 or 15 for a coarser pick. */
+    minuteStep?: number;
+    /** 12-hour with AM/PM, or 24-hour. Defaults to the device locale's preference. */
+    hourCycle?: HourCycle;
+    /** Trigger element. If not provided, no trigger is rendered. */
+    trigger?: React.ReactNode;
+    /** Title shown in modal header */
+    title?: string;
+    /** Button label for confirm */
+    confirmLabel?: string;
+    className?: string;
+}
+declare function parseTime(value: string | null | undefined): {
+    hour: number;
+    minute: number;
+} | null;
+/** `HH:MM` as the locale writes it — "10:30 PM" or "22:30". */
+declare function formatDisplayTime(value: string | null | undefined, hourCycle?: HourCycle): string;
+/**
+ * A time chosen on two wheels — three with AM/PM — in the same bottom sheet as
+ * `DatePickerModal`, so a form's date and time fields open the same way.
+ */
+export declare function TimePickerModal(props: TimePickerModalProps): React.JSX.Element;
+/** Compact trigger showing the formatted time. Use as TimePickerModal's trigger prop. */
+export declare function TimePickerTrigger({ value, placeholder, hourCycle, className, }: {
+    value?: string | null;
+    placeholder?: string;
+    hourCycle?: HourCycle;
+    className?: string;
+}): React.JSX.Element;
+export { formatDisplayTime, parseTime };