@expokit/cli 0.4.4 → 0.5.0

package/registry/date-picker/files/src/components/ui/calendar.tsx

@@ -3,7 +3,6 @@ import {
   AccessibilityInfo,
   Animated,
   Easing,
-  PanResponder,
   Pressable,
   StyleSheet,
   Text,
@@ -14,7 +13,7 @@ import {
 } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+import { alpha, motion, readableOn, useKit, usePanResponder } from '@/lib/kit';
 
 export type CalendarMode = 'single' | 'range' | 'multiple';
 
@@ -30,65 +29,65 @@ export type CalendarMarks = Record<string, string | string[]>;
 
 export interface CalendarBaseProps {
   /** Controlled visible month (any date inside it). */
-  month?: Date;
+  month?: Date | undefined;
   /** Month shown first (default: the selected date, else today). */
-  defaultMonth?: Date;
-  onMonthChange?: (month: Date) => void;
+  defaultMonth?: Date | undefined;
+  onMonthChange?: ((month: Date) => void) | undefined;
   /** 0 = Sunday, 1 = Monday. */
-  weekStartsOn?: 0 | 1;
+  weekStartsOn?: 0 | 1 | undefined;
   /** BCP 47 locale for month and weekday names (default: device locale). */
-  locale?: string;
+  locale?: string | undefined;
   /** Earliest selectable day. */
-  minDate?: Date;
+  minDate?: Date | undefined;
   /** Latest selectable day. */
-  maxDate?: Date;
+  maxDate?: Date | undefined;
   /** Return true to disable a day (booked, holidays…). */
-  isDateDisabled?: (date: Date) => boolean;
+  isDateDisabled?: ((date: Date) => boolean) | undefined;
   /** Coloured dots under dates: `{ [toDateKey(date)]: '#22c55e' | ['#22c55e', '#f59e0b'] }`. */
-  markedDates?: CalendarMarks;
+  markedDates?: CalendarMarks | undefined;
   /** Fill whole days with a colour (birthdays, shifts, people…): `{ [toDateKey(date)]: '#f472b6' }`. */
-  highlightedDates?: Record<string, string>;
+  highlightedDates?: Record<string, string> | undefined;
   /** `tiles` puts every day on a soft tile; `minimal` shows bare numbers. */
-  variant?: 'tiles' | 'minimal';
+  variant?: 'tiles' | 'minimal' | undefined;
   /** Weekday header: `narrow` (M T W) or `short` (Mon Tue Wed). */
-  weekdayFormat?: 'narrow' | 'short';
+  weekdayFormat?: 'narrow' | 'short' | undefined;
   /** Show a "Today" pill in the header while another month is on screen. */
-  showTodayButton?: boolean;
+  showTodayButton?: boolean | undefined;
   /** Show the faded trailing / leading days of the neighbouring months. */
-  showOutsideDays?: boolean;
+  showOutsideDays?: boolean | undefined;
   /** Ring and tint today's date. */
-  showToday?: boolean;
+  showToday?: boolean | undefined;
   /** Always render six week rows so the height never changes between months. */
-  fixedWeeks?: boolean;
+  fixedWeeks?: boolean | undefined;
   /** Tap the month title to jump through a month / year grid. */
-  monthPicker?: boolean;
+  monthPicker?: boolean | undefined;
   /** Most dates selectable in `multiple` mode. */
-  max?: number;
+  max?: number | undefined;
   /** Selection and today colour (default: theme accent). */
-  accent?: string;
-  style?: StyleProp<ViewStyle>;
+  accent?: string | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 export interface CalendarSingleProps {
-  mode?: 'single';
-  value?: Date | null;
-  defaultValue?: Date | null;
-  onChange?: (date: Date) => void;
+  mode?: 'single' | undefined;
+  value?: Date | null | undefined;
+  defaultValue?: Date | null | undefined;
+  onChange?: ((date: Date) => void) | undefined;
 }
 
 export interface CalendarRangeProps {
   mode: 'range';
-  value?: DateRange | null;
-  defaultValue?: DateRange | null;
+  value?: DateRange | null | undefined;
+  defaultValue?: DateRange | null | undefined;
   /** Fires on every tap: first with `{ start, end: null }`, then with both ends. */
-  onChange?: (range: DateRange) => void;
+  onChange?: ((range: DateRange) => void) | undefined;
 }
 
 export interface CalendarMultipleProps {
   mode: 'multiple';
-  value?: Date[];
-  defaultValue?: Date[];
-  onChange?: (dates: Date[]) => void;
+  value?: Date[] | undefined;
+  defaultValue?: Date[] | undefined;
+  onChange?: ((dates: Date[]) => void) | undefined;
 }
 
 export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarRangeProps | CalendarMultipleProps);
@@ -161,11 +160,11 @@ function useFormatters(locale?: string) {
       }
     };
     return {
-      title: make({ month: 'long', year: 'numeric' }, (d) => `${EN_MONTHS[d.getMonth()]} ${d.getFullYear()}`),
-      month: make({ month: 'short' }, (d) => EN_MONTHS[d.getMonth()].slice(0, 3)),
-      weekday: make({ weekday: 'short' }, (d) => EN_DAYS[d.getDay()]),
-      weekdayNarrow: make({ weekday: 'narrow' }, (d) => EN_DAYS[d.getDay()][0]),
-      weekdayLong: make({ weekday: 'long' }, (d) => EN_DAYS[d.getDay()]),
+      title: make({ month: 'long', year: 'numeric' }, (d) => `${EN_MONTHS[d.getMonth()] ?? ''} ${d.getFullYear()}`),
+      month: make({ month: 'short' }, (d) => (EN_MONTHS[d.getMonth()] ?? '').slice(0, 3)),
+      weekday: make({ weekday: 'short' }, (d) => EN_DAYS[d.getDay()] ?? ''),
+      weekdayNarrow: make({ weekday: 'narrow' }, (d) => (EN_DAYS[d.getDay()] ?? '').slice(0, 1)),
+      weekdayLong: make({ weekday: 'long' }, (d) => EN_DAYS[d.getDay()] ?? ''),
       full: make({ weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }, (d) => d.toDateString()),
     };
   }, [locale]);
@@ -206,7 +205,7 @@ export function Calendar(props: CalendarProps) {
     accent,
     style,
   } = props as unknown as FlatProps;
-  const { colors, radius, font } = useKit();
+  const { colors, radius, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const fmt = useFormatters(locale);
@@ -244,9 +243,10 @@ export function Calendar(props: CalendarProps) {
 
   /* month slide transition */
   const [width, setWidth] = useState(0);
-  const slide = useRef(new Animated.Value(1)).current; // native
+  const [slide] = useState(() => new Animated.Value(1)); // native
   const [leaving, setLeaving] = useState<{ month: Date; dir: number } | null>(null);
-  const dirRef = useRef(1);
+  // Which way the last month change went: the incoming grid slides in from that side.
+  const [slideDir, setSlideDir] = useState(1);
   const shownRef = useRef(visible);
   const visibleKey = monthIndex(visible);
   useLayoutEffect(() => {
@@ -254,7 +254,7 @@ export function Calendar(props: CalendarProps) {
     if (monthIndex(prev) === visibleKey) return;
     shownRef.current = visible;
     const dir = visibleKey > monthIndex(prev) ? 1 : -1;
-    dirRef.current = dir;
+    setSlideDir(dir);
     setLeaving({ month: prev, dir });
     slide.stopAnimation();
     slide.setValue(0);
@@ -271,7 +271,7 @@ export function Calendar(props: CalendarProps) {
   /* days / months / years view */
   const [view, setView] = useState<'days' | 'months' | 'years'>('days');
   const [pickYear, setPickYear] = useState(visible.getFullYear());
-  const viewAnim = useRef(new Animated.Value(1)).current; // native
+  const [viewAnim] = useState(() => new Animated.Value(1)); // native
   const [gridH, setGridH] = useState(0);
   const switchView = (next: 'days' | 'months' | 'years') => {
     if (next !== 'days' && view === 'days') setPickYear(visible.getFullYear());
@@ -283,7 +283,9 @@ export function Calendar(props: CalendarProps) {
 
   /* selection */
   const stateRef = useRef({ mode, current, value, onChange, max, visible, goTo });
-  stateRef.current = { mode, current, value, onChange, max, visible, goTo };
+  useLayoutEffect(() => {
+    stateRef.current = { mode, current, value, onChange, max, visible, goTo };
+  });
   const onDayPress = useCallback((d: Date) => {
     const s = stateRef.current;
     let next: CalendarValue;
@@ -305,18 +307,14 @@ export function Calendar(props: CalendarProps) {
     if (monthIndex(d) !== monthIndex(s.visible)) s.goTo(d);
   }, []);
 
-  const pan = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 14 && Math.abs(g.dx) > Math.abs(g.dy) * 1.4,
-        onPanResponderRelease: (_, g) => {
-          const s = stateRef.current;
-          if (g.dx < -40 || g.vx < -0.5) s.goTo(addMonths(s.visible, 1));
-          else if (g.dx > 40 || g.vx > 0.5) s.goTo(addMonths(s.visible, -1));
-        },
-      }),
-    []
-  );
+  const pan = usePanResponder({
+    onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 14 && Math.abs(g.dx) > Math.abs(g.dy) * 1.4,
+    onPanResponderRelease: (_, g) => {
+      const s = stateRef.current;
+      if (g.dx < -40 || g.vx < -0.5) s.goTo(addMonths(s.visible, 1));
+      else if (g.dx > 40 || g.vx > 0.5) s.goTo(addMonths(s.visible, -1));
+    },
+  });
 
   const weekdays = useMemo(() => {
     const base = new Date(2023, 0, 1); // a Sunday
@@ -349,7 +347,7 @@ export function Calendar(props: CalendarProps) {
 
   const W = width || 320;
   // Reduce Motion: months swap with a fade only, no sideways slide.
-  const dir = reduce ? 0 : dirRef.current;
+  const dir = reduce ? 0 : slideDir;
   const prevDisabled = view === 'days' ? monthIndex(visible) - 1 < minM : view === 'months' ? pickYear * 12 - 1 < minM : false;
   const nextDisabled = view === 'days' ? monthIndex(visible) + 1 > maxM : view === 'months' ? (pickYear + 1) * 12 > maxM : false;
   const decadeStart = Math.floor(pickYear / 12) * 12;
@@ -374,7 +372,7 @@ export function Calendar(props: CalendarProps) {
           onPress={monthPicker ? () => switchView(view === 'days' ? 'months' : view === 'months' ? 'years' : 'days') : undefined}
           disabled={!monthPicker}
           accessibilityRole={monthPicker ? 'button' : 'header'}
-          accessibilityLabel={monthPicker ? `${title}, ${view === 'days' ? 'choose month' : view === 'months' ? 'choose year' : 'back to days'}` : title}
+          accessibilityLabel={monthPicker ? `${title}, ${view === 'days' ? labels.chooseMonth : view === 'months' ? labels.chooseYear : labels.backToDays}` : title}
           hitSlop={6}
           style={({ pressed }) => [styles.titleBtn, { borderRadius: radius.sm, backgroundColor: pressed ? colors.muted : 'transparent' }]}
         >
@@ -401,12 +399,12 @@ export function Calendar(props: CalendarProps) {
             <Pressable
               onPress={() => goTo(today)}
               accessibilityRole="button"
-              accessibilityLabel="Go to today"
+              accessibilityLabel={labels.goToToday}
               hitSlop={4}
               style={({ pressed }) => [styles.todayBtn, { borderRadius: radius.capsule(32), backgroundColor: pressed ? colors.secondary : colors.muted }]}
             >
               <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.todayText, ff, { color: tint }]}>
-                Today
+                {labels.today}
               </Text>
             </Pressable>
           ) : null}
@@ -429,7 +427,7 @@ export function Calendar(props: CalendarProps) {
               </Text>
             ))}
           </View>
-          <View {...pan.panHandlers} style={styles.gridClip} onLayout={(e) => setGridH(e.nativeEvent.layout.height)}>
+          <View {...pan} style={styles.gridClip} onLayout={(e) => setGridH(e.nativeEvent.layout.height)}>
             {leaving ? (
               <Animated.View
                 pointerEvents="none"
@@ -525,16 +523,16 @@ interface MonthGridProps {
   fixedWeeks: boolean;
   showOutsideDays: boolean;
   showToday: boolean;
-  minDate?: Date;
-  maxDate?: Date;
-  isDateDisabled?: (date: Date) => boolean;
-  markedDates?: CalendarMarks;
-  highlightedDates?: Record<string, string>;
+  minDate?: Date | undefined;
+  maxDate?: Date | undefined;
+  isDateDisabled?: ((date: Date) => boolean) | undefined;
+  markedDates?: CalendarMarks | undefined;
+  highlightedDates?: Record<string, string> | undefined;
   tiles: boolean;
-  singleKey?: string;
-  rangeStart?: number;
-  rangeEnd?: number;
-  manyKeys?: string;
+  singleKey?: string | undefined;
+  rangeStart?: number | undefined;
+  rangeEnd?: number | undefined;
+  manyKeys?: string | undefined;
   tint: string;
   fullLabel: (d: Date) => string;
   reduce: boolean;
@@ -636,8 +634,8 @@ interface DayCellProps {
   band: 'none' | 'start' | 'mid' | 'end';
   roundLeft: boolean;
   roundRight: boolean;
-  marks?: string | string[];
-  highlight?: string;
+  marks?: string | string[] | undefined;
+  highlight?: string | undefined;
   tile: boolean;
   tint: string;
   reduce: boolean;
@@ -665,8 +663,8 @@ const DayCell = memo(function DayCell({
   const { colors, radius, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const r = tileRadius(radius.md);
-  const pop = useRef(new Animated.Value(selected ? 1 : 0)).current; // native: circle scale + opacity
-  const bandIn = useRef(new Animated.Value(band === 'none' ? 0 : 1)).current; // native: band opacity
+  const [pop] = useState(() => new Animated.Value(selected ? 1 : 0)); // native: circle scale + opacity
+  const [bandIn] = useState(() => new Animated.Value(band === 'none' ? 0 : 1)); // native: band opacity
   useEffect(() => {
     // Reduce Motion: the selection fills in with a quick fade, no scale pop.
     if (reduce) Animated.timing(pop, { toValue: selected ? 1 : 0, duration: 150, useNativeDriver: true }).start();
@@ -773,14 +771,14 @@ const DayCell = memo(function DayCell({
 /* ───────────────────────────────────── bits ───────────────────────────────────── */
 
 function NavButton({ dir, disabled, onPress }: { dir: 1 | -1; disabled: boolean; onPress: () => void }) {
-  const { colors } = useKit();
+  const { colors, labels } = useKit();
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
       hitSlop={4}
       accessibilityRole="button"
-      accessibilityLabel={dir < 0 ? 'Previous' : 'Next'}
+      accessibilityLabel={dir < 0 ? labels.previous : labels.next}
       accessibilityState={{ disabled }}
       style={({ pressed }) => [styles.nav, { backgroundColor: pressed ? colors.secondary : colors.muted, opacity: disabled ? 0.3 : 1 }]}
     >
@@ -798,7 +796,7 @@ function NavButton({ dir, disabled, onPress }: { dir: 1 | -1; disabled: boolean;
 }
 
 function Chevron({ turned, color, reduce }: { turned: boolean; color: string; reduce: boolean }) {
-  const turn = useRef(new Animated.Value(turned ? 1 : 0)).current; // native
+  const [turn] = useState(() => new Animated.Value(turned ? 1 : 0)); // native
   useEffect(() => {
     if (reduce) {
       turn.setValue(turned ? 1 : 0);

package/registry/date-picker/files/src/components/ui/date-picker.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   AccessibilityInfo,
   Animated,
   Easing,
   Modal,
-  PanResponder,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -26,7 +25,7 @@ import {
   type CalendarProps,
   type DateRange,
 } from '@/components/ui/calendar';
-import { alpha, motion, readableOn, useKit, useLayout } from '@/lib/kit';
+import { alpha, defaultLabels, motion, readableOn, useKit, useLayout, usePanResponder, type Labels } from '@/lib/kit';
 
 export type { DateRange } from '@/components/ui/calendar';
 export type DatePickerSize = 'sm' | 'md' | 'lg';
@@ -148,40 +147,40 @@ const EMPTY_RANGE: DateRange = { start: null, end: null };
 
 const isRange = (v: Picked): v is DateRange => !!v && !(v instanceof Date);
 
-/** Built-in single-date shortcuts, computed relative to now. */
-export function singleDatePresets(): DatePickerPreset<Date>[] {
+/** Built-in single-date shortcuts, computed relative to now. Pass `useKit().labels` for translated names. */
+export function singleDatePresets(labels: Labels = defaultLabels): DatePickerPreset<Date>[] {
   const today = () => startOfDay(new Date());
   return [
-    { label: 'Today', value: today },
-    { label: 'Tomorrow', value: () => addDays(today(), 1) },
-    { label: 'Next Monday', value: () => addDays(today(), ((8 - today().getDay()) % 7) || 7) },
-    { label: 'In a week', value: () => addDays(today(), 7) },
-    { label: 'In a month', value: () => new Date(today().getFullYear(), today().getMonth() + 1, today().getDate()) },
+    { label: labels.today, value: today },
+    { label: labels.tomorrow, value: () => addDays(today(), 1) },
+    { label: labels.nextMonday, value: () => addDays(today(), ((8 - today().getDay()) % 7) || 7) },
+    { label: labels.inAWeek, value: () => addDays(today(), 7) },
+    { label: labels.inAMonth, value: () => new Date(today().getFullYear(), today().getMonth() + 1, today().getDate()) },
   ];
 }
 
-/** Built-in range shortcuts, computed relative to now. */
-export function rangeDatePresets(): DatePickerPreset<DateRange>[] {
+/** Built-in range shortcuts, computed relative to now. Pass `useKit().labels` for translated names. */
+export function rangeDatePresets(labels: Labels = defaultLabels): DatePickerPreset<DateRange>[] {
   const today = () => startOfDay(new Date());
   return [
-    { label: 'Today', value: () => ({ start: today(), end: today() }) },
-    { label: 'Next 7 days', value: () => ({ start: today(), end: addDays(today(), 6) }) },
+    { label: labels.today, value: () => ({ start: today(), end: today() }) },
+    { label: labels.next7Days, value: () => ({ start: today(), end: addDays(today(), 6) }) },
     {
-      label: 'Next weekend',
+      label: labels.nextWeekend,
       value: () => {
         const sat = addDays(today(), ((6 - today().getDay() + 7) % 7) || 7);
         return { start: sat, end: addDays(sat, 1) };
       },
     },
     {
-      label: 'This month',
+      label: labels.thisMonth,
       value: () => {
         const t = today();
         return { start: new Date(t.getFullYear(), t.getMonth(), 1), end: new Date(t.getFullYear(), t.getMonth() + 1, 0) };
       },
     },
-    { label: 'Last 7 days', value: () => ({ start: addDays(today(), -6), end: today() }) },
-    { label: 'Last 30 days', value: () => ({ start: addDays(today(), -29), end: today() }) },
+    { label: labels.last7Days, value: () => ({ start: addDays(today(), -6), end: today() }) },
+    { label: labels.last30Days, value: () => ({ start: addDays(today(), -29), end: today() }) },
   ];
 }
 
@@ -231,7 +230,7 @@ export function DatePicker(props: DatePickerProps) {
     iconColor,
     menuStyle,
   } = props as unknown as FlatProps;
-  const { colors, radius, font } = useKit();
+  const { colors, radius, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const bg = surface ?? colors.background;
@@ -249,7 +248,9 @@ export function DatePicker(props: DatePickerProps) {
   const reduce = useReduceMotion();
   // The pan responder is built once; it reads Reduce Motion through this ref.
   const live = useRef({ reduce });
-  live.current = { reduce };
+  useLayoutEffect(() => {
+    live.current = { reduce };
+  });
 
   const [inner, setInner] = useState<Picked>(defaultValue);
   const current = value !== undefined ? value : inner;
@@ -265,13 +266,13 @@ export function DatePicker(props: DatePickerProps) {
 
   const ok = !error && !!success;
   const floating = open || hasValue;
-  const float = useRef(new Animated.Value(floating ? 1 : 0)).current; // native
-  const focus = useRef(new Animated.Value(0)).current; // JS: border + label colour
-  const halo = useRef(new Animated.Value(0)).current; // native
-  const show = useRef(new Animated.Value(0)).current; // native: backdrop + sheet
-  const drag = useRef(new Animated.Value(0)).current; // native
-  const shake = useRef(new Animated.Value(0)).current; // native
-  const check = useRef(new Animated.Value(ok ? 1 : 0)).current; // native
+  const [float] = useState(() => new Animated.Value(floating ? 1 : 0)); // native
+  const [focus] = useState(() => new Animated.Value(0)); // JS: border + label colour
+  const [halo] = useState(() => new Animated.Value(0)); // native
+  const [show] = useState(() => new Animated.Value(0)); // native: backdrop + sheet
+  const [drag] = useState(() => new Animated.Value(0)); // native
+  const [shake] = useState(() => new Animated.Value(0)); // native
+  const [check] = useState(() => new Animated.Value(ok ? 1 : 0)); // native
 
   const asSheet = presentation !== 'popover';
   // Centred dialog instead of a bottom sheet: on foldables, tablets and landscape phones.
@@ -401,9 +402,9 @@ export function DatePicker(props: DatePickerProps) {
 
   const presetList = useMemo<DatePickerPreset<Picked>[]>(() => {
     if (!presets) return [];
-    if (presets === true) return (ranged ? rangeDatePresets() : singleDatePresets()) as DatePickerPreset<Picked>[];
+    if (presets === true) return (ranged ? rangeDatePresets(labels) : singleDatePresets(labels)) as DatePickerPreset<Picked>[];
     return presets;
-  }, [presets, ranged]);
+  }, [presets, ranged, labels]);
   const resolve = (p: DatePickerPreset<Picked>) => (typeof p.value === 'function' ? p.value() : p.value);
   const presetOk = (v: Picked) => {
     const ds = isRange(v) ? [v.start, v.end] : [v];
@@ -414,23 +415,21 @@ export function DatePicker(props: DatePickerProps) {
   const same = (a: Picked, b: Picked) =>
     isRange(a) && isRange(b) ? isSameDay(a.start, b.start) && isSameDay(a.end, b.end) : !isRange(a) && !isRange(b) && isSameDay(a, b);
 
-  const pan = useMemo(() => {
-    const settle = () =>
-      live.current.reduce
-        ? Animated.timing(drag, { toValue: 0, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true }).start()
-        : Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
-    return PanResponder.create({
-      onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
-      onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
-      onPanResponderRelease: (_, g) => {
-        if (g.dy > 110 || g.vy > 1.1) {
-          setOpen(false);
-          onOpenChange?.(false);
-        } else settle();
-      },
-      onPanResponderTerminate: settle,
-    });
-  }, [drag, onOpenChange]);
+  const settle = () =>
+    reduce
+      ? Animated.timing(drag, { toValue: 0, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true }).start()
+      : Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
+  const pan = usePanResponder({
+    onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+    onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
+    onPanResponderRelease: (_, g) => {
+      if (g.dy > 110 || g.vy > 1.1) {
+        setOpen(false);
+        onOpenChange?.(false);
+      } else settle();
+    },
+    onPanResponderTerminate: settle,
+  });
 
   const active = error ? colors.danger : tint;
   const rest = error ? colors.danger : ok ? colors.success : ((userBorder as string | undefined) ?? colors.input);
@@ -451,8 +450,8 @@ export function DatePicker(props: DatePickerProps) {
 
   const subtitle = isRange(draft)
     ? draft.start
-      ? `${fmt.header(draft.start)}  →  ${draft.end ? fmt.header(draft.end) : 'pick an end date'}`
-      : 'Pick a start date'
+      ? `${fmt.header(draft.start)}  →  ${draft.end ? fmt.header(draft.end) : labels.pickEndDate}`
+      : labels.pickStartDate
     : draft
       ? fmt.header(draft)
       : placeholder ?? null;
@@ -520,7 +519,7 @@ export function DatePicker(props: DatePickerProps) {
             style={({ pressed }) => [styles.footBtn, { borderRadius: radius.md, opacity: draft ? (pressed ? 0.6 : 1) : 0.4 }]}
           >
             <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: colors.foreground }]}>
-              Clear
+              {labels.clear}
             </Text>
           </Pressable>
           <Pressable
@@ -529,7 +528,7 @@ export function DatePicker(props: DatePickerProps) {
             style={({ pressed }) => [styles.footBtn, styles.footMain, { backgroundColor: tint, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}
           >
             <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: readableOn(tint) }]}>
-              {draftDays > 1 ? `Done · ${draftDays} days` : 'Done'}
+              {draftDays > 1 ? labels.doneDays(draftDays) : labels.done}
             </Text>
           </Pressable>
         </View>
@@ -569,7 +568,7 @@ export function DatePicker(props: DatePickerProps) {
         disabled={disabled}
         accessibilityRole="button"
         accessibilityLabel={label}
-        accessibilityValue={{ text: text || 'Not set' }}
+        accessibilityValue={{ text: text || labels.notSet }}
         accessibilityState={{ expanded: open, disabled: !!disabled }}
         style={{ opacity: disabled ? 0.5 : 1 }}
       >
@@ -597,7 +596,7 @@ export function DatePicker(props: DatePickerProps) {
               !text && { color: placeholderTextColor ?? colors.mutedForeground },
             ]}
           >
-            {text || (open || !floatingLabel ? placeholder ?? (ranged ? 'Select dates' : 'Select a date') : '')}
+            {text || (open || !floatingLabel ? placeholder ?? (ranged ? labels.selectDates : labels.selectDate) : '')}
           </Text>
           {floatingLabel ? (
             <Animated.View
@@ -637,7 +636,7 @@ export function DatePicker(props: DatePickerProps) {
                 onPress={() => commit(null)}
                 hitSlop={12}
                 accessibilityRole="button"
-                accessibilityLabel={`Clear ${label}`}
+                accessibilityLabel={labels.clearField(label)}
                 style={[styles.clear, { backgroundColor: alpha(restIcon, 0.22) }]}
               >
                 <Icon name="x" size={11} color={iconColor ?? colors.foreground} strokeWidth={2.4} />
@@ -651,7 +650,7 @@ export function DatePicker(props: DatePickerProps) {
 
       <Modal visible={mounted} transparent animationType="none" statusBarTranslucent onRequestClose={close}>
         <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: asSheet ? colors.overlay : 'transparent', opacity: show }]}>
-          <Pressable style={StyleSheet.absoluteFill} onPress={close} accessibilityLabel="Close" accessibilityRole="button" />
+          <Pressable style={StyleSheet.absoluteFill} onPress={close} accessibilityLabel={labels.close} accessibilityRole="button" />
         </Animated.View>
         {asSheet ? (
           <View style={[styles.sheetHost, wide && styles.centered]} pointerEvents="box-none">
@@ -679,7 +678,7 @@ export function DatePicker(props: DatePickerProps) {
                     },
               ]}
             >
-              <View {...pan.panHandlers} style={styles.sheetHeader}>
+              <View {...pan} style={styles.sheetHeader}>
                 {!wide ? <View style={[styles.grabber, { backgroundColor: colors.border }]} /> : null}
                 <Text style={[styles.title, ff, { color: colors.foreground }]}>{title ?? label}</Text>
                 {subtitle ? (
@@ -737,7 +736,7 @@ function FieldMessage({
   style?: StyleProp<TextStyle>;
 }) {
   const { colors, font } = useKit();
-  const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
+  const [enter] = useState(() => new Animated.Value(tone === 'helper' ? 1 : 0)); // native
   useEffect(() => {
     if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
     else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();