@expokit/cli 0.4.3 → 0.5.0

package/registry/coupon/files/src/lib/ticket-shape.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { Animated, Image, PixelRatio, StyleSheet, Text, View, type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Circle, ClipPath, Defs, G, Line, LinearGradient, Path, Pattern, Rect, Stop } from 'react-native-svg';
 
@@ -28,13 +28,13 @@ export interface TicketRect {
 export interface TicketGeometry {
   width: number;
   height: number;
-  corners?: TicketCorners;
+  corners?: TicketCorners | undefined;
   /** Round bites cut into a side — e.g. both ends of a tear line. */
-  notches?: readonly TicketNotch[];
+  notches?: readonly TicketNotch[] | undefined;
   /** Pattern per side (default straight). */
-  edges?: Partial<Record<TicketSide, TicketEdge>>;
+  edges?: Partial<Record<TicketSide, TicketEdge | undefined>> | undefined;
   /** Bite radius, scallop depth or tooth height of the edge patterns (default 5). */
-  edgeSize?: number;
+  edgeSize?: number | undefined;
 }
 
 const SIDES: readonly TicketSide[] = ['top', 'right', 'bottom', 'left'];
@@ -140,20 +140,25 @@ export function ticketSafeRects(g: TicketGeometry, offset: { x: number; y: numbe
   // Each round hole is covered by a few stepped rects that hug its curve, so almost nothing
   // around it is left without light.
   const holes: [number, number, number, number][] = [];
-  const STEPS = [0, 0.45, 0.75, 1];
+  // Consecutive pairs of [0, 0.45, 0.75, 1].
+  const STEPS: readonly (readonly [number, number])[] = [
+    [0, 0.45],
+    [0.45, 0.75],
+    [0.75, 1],
+  ];
   /** A quarter disc of radius r at corner (cx, cy), opening toward (dx, dy) = ±1. */
   const quarter = (cx: number, cy: number, r: number, dx: number, dy: number) => {
-    for (let i = 0; i < STEPS.length - 1; i++) {
-      const reach = r * Math.sqrt(1 - STEPS[i] * STEPS[i]);
-      const [a, b] = [cy + dy * r * STEPS[i], cy + dy * r * STEPS[i + 1]];
+    for (const [s0, s1] of STEPS) {
+      const reach = r * Math.sqrt(1 - s0 * s0);
+      const [a, b] = [cy + dy * r * s0, cy + dy * r * s1];
       holes.push([Math.min(cx, cx + dx * reach), Math.min(a, b), Math.max(cx, cx + dx * reach), Math.max(a, b)]);
     }
   };
   /** The same with x and y swapped (steps run along x). */
   const quarterX = (cx: number, cy: number, r: number, dx: number, dy: number) => {
-    for (let i = 0; i < STEPS.length - 1; i++) {
-      const reach = r * Math.sqrt(1 - STEPS[i] * STEPS[i]);
-      const [a, b] = [cx + dx * r * STEPS[i], cx + dx * r * STEPS[i + 1]];
+    for (const [s0, s1] of STEPS) {
+      const reach = r * Math.sqrt(1 - s0 * s0);
+      const [a, b] = [cx + dx * r * s0, cx + dx * r * s1];
       holes.push([Math.min(a, b), Math.min(cy, cy + dy * reach), Math.max(a, b), Math.max(cy, cy + dy * reach)]);
     }
   };
@@ -191,25 +196,25 @@ export function ticketSafeRects(g: TicketGeometry, offset: { x: number; y: numbe
   for (const hole of holes) [hole[0], hole[1], hole[2], hole[3]] = [down(hole[0]), down(hole[1]), up(hole[2]), up(hole[3])];
 
   const cuts = (lo: number, hi: number, more: number[]) => [...new Set([lo, hi, ...more])].filter((v) => v >= lo && v <= hi).sort((a, b) => a - b);
+  /** Each neighbouring pair of sorted cuts: [v0, v1], [v1, v2], … */
+  const bands = (v: number[]) => v.slice(1).map((b, i): [number, number] => [v[i] ?? b, b]);
   const xs = cuts(near(x0), near(x1), holes.flatMap(([a, , c]) => [a, c]));
   const ys = cuts(near(y0), near(y1), holes.flatMap(([, b, , d]) => [b, d]));
   const rows: { y: number; h: number; spans: [number, number][] }[] = [];
   // Every cut is on the pixel grid, so anything thinner than half a pixel is a rounding twin; a
   // one-pixel row (where two stepped holes overlap) must stay, or the reflection shows a gap there.
   const thin = 0.5 / px;
-  for (let j = 0; j < ys.length - 1; j++) {
-    const [ya, yb] = [ys[j], ys[j + 1]];
+  for (const [ya, yb] of bands(ys)) {
     if (yb - ya < thin) continue;
     const spans: [number, number][] = [];
-    for (let i = 0; i < xs.length - 1; i++) {
-      const [xa, xb] = [xs[i], xs[i + 1]];
+    for (const [xa, xb] of bands(xs)) {
       if (xb - xa < thin || holes.some(([hx0, hy0, hx1, hy1]) => xa < hx1 && xb > hx0 && ya < hy1 && yb > hy0)) continue;
       const last = spans[spans.length - 1];
       if (last && Math.abs(last[1] - xa) < 0.01) last[1] = xb;
       else spans.push([xa, xb]);
     }
     const prev = rows[rows.length - 1];
-    const same = prev && prev.spans.length === spans.length && prev.spans.every((s, i) => s[0] === spans[i][0] && s[1] === spans[i][1]);
+    const same = prev && prev.spans.length === spans.length && prev.spans.every((s, i) => s[0] === spans[i]?.[0] && s[1] === spans[i]?.[1]);
     if (prev && same && Math.abs(prev.y + prev.h - ya) < 0.01) prev.h += yb - ya;
     else rows.push({ y: ya, h: yb - ya, spans });
   }
@@ -231,8 +236,8 @@ function random(seed: string) {
 const CONFETTI = ['#ffd23f', '#ff5fa2', '#3ddcff', '#7dff7a', '#ffffff'];
 
 /** A rubber stamp ("USED", "CHECKED IN") that thumps down whenever its text changes. */
-export function TicketStamp({ text, color, size = 17, style }: { text: string; color: string; size?: number; style?: StyleProp<ViewStyle> }) {
-  const thump = useRef(new Animated.Value(0)).current;
+export function TicketStamp({ text, color, size = 17, style }: { text: string; color: string; size?: number | undefined; style?: StyleProp<ViewStyle> | undefined }) {
+  const [thump] = useState(() => new Animated.Value(0));
   useEffect(() => {
     thump.setValue(0);
     Animated.spring(thump, { toValue: 1, ...motion.bouncy, useNativeDriver: true }).start();
@@ -258,12 +263,17 @@ export function TicketStamp({ text, color, size = 17, style }: { text: string; c
 }
 
 /** A QR-style matrix (finder squares, timing lines, data) drawn as one path — a look-alike, not a real code. */
-export function QrLike({ code, size, color = '#111111' }: { code: string; size: number; color?: string }) {
+export function QrLike({ code, size, color = '#111111' }: { code: string; size: number; color?: string | undefined }) {
   const d = useMemo(() => {
     const N = 25;
     const next = random(code + '|qr');
     const finder = (x: number, y: number) => {
-      for (const [fx, fy] of [[0, 0], [N - 7, 0], [0, N - 7]]) {
+      const corners: [number, number][] = [
+        [0, 0],
+        [N - 7, 0],
+        [0, N - 7],
+      ];
+      for (const [fx, fy] of corners) {
         const [u, v] = [x - fx, y - fy];
         if (u >= -1 && u <= 7 && v >= -1 && v <= 7) {
           if (u < 0 || v < 0 || u > 6 || v > 6) return 0; // the white ring around a finder
@@ -289,7 +299,7 @@ export function QrLike({ code, size, color = '#111111' }: { code: string; size:
 }
 
 /** A Code 128-style barcode drawn as one path — a look-alike. `vertical` turns it on its side. */
-export function BarcodeLike({ code, width, height, color = '#111111', vertical = false }: { code: string; width: number; height: number; color?: string; vertical?: boolean }) {
+export function BarcodeLike({ code, width, height, color = '#111111', vertical = false }: { code: string; width: number; height: number; color?: string | undefined; vertical?: boolean | undefined }) {
   const { d, units } = useMemo(() => {
     const next = random(code + '|bars');
     const bars: [number, number][] = [];
@@ -314,39 +324,39 @@ export function BarcodeLike({ code, width, height, color = '#111111', vertical =
 }
 
 export interface TicketShapeProps extends Omit<TicketGeometry, 'width' | 'height'> {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** A colour, or 2+ colours for a gradient (default white). */
-  fill?: string | readonly string[];
+  fill?: string | readonly string[] | undefined;
   /** Gradient direction in degrees: 0 runs left → right, 90 top → bottom (default 125). */
-  angle?: number;
+  angle?: number | undefined;
   /** Photo painted inside the outline (cover), over the fill (`require()` or `{ uri }`). */
-  image?: ImageSourcePropType;
-  imageOpacity?: number;
+  image?: ImageSourcePropType | undefined;
+  imageOpacity?: number | undefined;
   /** Darkens the paint toward the bottom (0 – 1) so white text reads on a photo — inside the outline only. */
-  shade?: number;
+  shade?: number | undefined;
   /** Texture over the fill. */
-  pattern?: TicketPattern;
+  pattern?: TicketPattern | undefined;
   /** Pattern ink (default: white or black at low opacity, whichever suits the fill; confetti is multicolour). */
-  patternColor?: string;
+  patternColor?: string | undefined;
   /** Keeps the confetti scatter the same on every render (e.g. the coupon code). */
-  seed?: string;
+  seed?: string | undefined;
   /** Outline colour. */
-  stroke?: string;
-  strokeWidth?: number;
+  stroke?: string | undefined;
+  strokeWidth?: number | undefined;
   /** Dash the outline — a "cut here" coupon. */
-  dashed?: boolean;
+  dashed?: boolean | undefined;
   /** Dashed tear line along this side. */
-  tear?: TicketSide;
-  tearColor?: string;
+  tear?: TicketSide | undefined;
+  tearColor?: string | undefined;
   /**
    * Paint as one piece of a bigger ticket: that ticket's rect in this shape's points. Gradients,
    * patterns and photos then line up across the pieces.
    */
-  frame?: TicketRect;
+  frame?: TicketRect | undefined;
   /** Reports the measured size after layout. */
-  onSize?: (size: { width: number; height: number }) => void;
+  onSize?: ((size: { width: number; height: number }) => void) | undefined;
   /** Padding, width, margins… — the shape takes its size from this box. */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 /**
@@ -381,7 +391,7 @@ export function TicketShape({
   const id = 'ts' + useId().replace(/[^A-Za-z0-9_-]/g, '');
   const { w, h } = size;
   const colors = typeof fill === 'string' ? [fill] : fill.length ? fill : ['#ffffff'];
-  const ink = readableOn(colors[Math.floor((colors.length - 1) / 2)]);
+  const ink = readableOn(colors[Math.floor((colors.length - 1) / 2)] ?? '#ffffff');
   const d = ticketPath({ width: w, height: h, corners, notches, edges, edgeSize });
   const f = frameProp ?? { x: 0, y: 0, width: w, height: h };
 
@@ -395,7 +405,7 @@ export function TicketShape({
     const clip = `url(#${id}-clip)`;
     const corner = cornerList(corners);
     const [s0, s1] = tear === 'top' || tear === 'bottom' ? (tear === 'top' ? [corner[0], corner[1]] : [corner[3], corner[2]]) : tear === 'left' ? [corner[0], corner[3]] : [corner[1], corner[2]];
-    const inset = [Math.abs(s0) + 7, Math.abs(s1) + 7];
+    const inset: [number, number] = [Math.abs(s0) + 7, Math.abs(s1) + 7];
     const tearLine =
       tear === 'top' || tear === 'bottom'
         ? { x1: inset[0], x2: w - inset[1], y1: tear === 'top' ? 0.75 : h - 0.75, y2: tear === 'top' ? 0.75 : h - 0.75 }
@@ -419,7 +429,7 @@ export function TicketShape({
         const x = f.x + rnd() * f.width;
         const y = f.y + rnd() * f.height;
         const turn = Math.round(rnd() * 180);
-        const color = patternColor ?? CONFETTI[Math.floor(rnd() * CONFETTI.length)];
+        const color = patternColor ?? CONFETTI[Math.floor(rnd() * CONFETTI.length)] ?? '#ffffff';
         const o = 0.35 + rnd() * 0.4;
         return rnd() < 0.55 ? (
           <Rect key={i} x={x - 1.6} y={y - 4.5} width={3.2} height={9} rx={1} fill={color} opacity={o} transform={`rotate(${turn} ${r2(x)} ${r2(y)})`} />
@@ -446,7 +456,7 @@ export function TicketShape({
           ))}
         </LinearGradient>
       ) : null;
-    const fillPath = <Path d={d} fill={colors.length > 1 ? `url(#${id}-fill)` : colors[0]} />;
+    const fillPath = <Path d={d} fill={colors.length > 1 ? `url(#${id}-fill)` : (colors[0] ?? '#ffffff')} />;
     const overlayDefs = (
       <>
         <ClipPath id={`${id}-clip`}>
@@ -482,7 +492,7 @@ export function TicketShape({
       <>
         {shade > 0 ? <Rect width={w} height={h} fill={`url(#${id}-shade)`} clipPath={clip} /> : null}
         {texture ? <G clipPath={clip}>{texture}</G> : null}
-        {stroke ? <Path d={d} fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeDasharray={dashed ? [7, 5] : undefined} strokeLinecap="round" /> : null}
+        {stroke ? <Path d={d} fill="none" stroke={stroke} strokeWidth={strokeWidth} {...(dashed ? { strokeDasharray: [7, 5] } : null)} strokeLinecap="round" /> : null}
         {tear ? <Line {...tearLine} stroke={tearColor ?? alpha(ink, 0.28)} strokeWidth={1.6} strokeDasharray={[6, 5]} strokeLinecap="round" /> : null}
       </>
     );

package/registry/coupon.json

@@ -4,6 +4,7 @@
   "title": "Coupon",
   "description": "Coupons people actually want to tap — a vivid value panel (sunburst, confetti, waves…) joined to a details panel by a perforated tear line with real cut-outs. Ten themes, five outlines (ticket, stamp, receipt, scallop, cut-out), copyable code, Apply button, live countdown, applied / used / expired / locked states, a light sweep, and an optional 3D tilt with a holo sheen that flips over to the T&C.",
   "tier": "free",
+  "aliases": [],
   "dependencies": [
     "react-native-svg"
   ],

package/registry/cube-pager.json

@@ -4,6 +4,7 @@
   "title": "Cube Pager",
   "description": "Swipeable pages that turn like the faces of a cube — from the outside, the inside, or spinning in place. Follows your finger, carries flick momentum, rubber-bands at the ends and shades faces as they turn away. Great for stories and onboarding.",
   "tier": "pro",
+  "aliases": [],
   "dependencies": [],
   "registryDependencies": [
     "kit"

package/registry/dashboard.json

@@ -4,6 +4,7 @@
   "title": "Dashboard",
   "description": "A finance / analytics home screen: a collapsing “Overview” large title with bell and avatar, time-of-day greeting, Day / Week / Month switcher, a revenue area chart that rises in on every period change and scrubs under your finger while the headline number rolls, KPI tiles with sparklines, springy quick actions and recent transactions — plus skeleton loading and pull-to-refresh.",
   "tier": "pro",
+  "aliases": [],
   "dependencies": [
     "react-native-svg",
     "expo-haptics"

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);
@@ -839,7 +837,7 @@ const styles = StyleSheet.create({
   navs: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   nav: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
   todayBtn: { minHeight: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
-  todayText: { fontSize: 13, fontWeight: '400' },
+  todayText: { fontSize: 13, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   weekRow: { flexDirection: 'row', marginBottom: 6 },
   weekday: { flex: 1, textAlign: 'center', fontSize: 13, fontWeight: '400', letterSpacing: 0.2 },
   gridClip: { overflow: 'hidden' },
@@ -858,7 +856,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   fill: { borderWidth: 0 },
-  day: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  day: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' },
   dayStrong: { fontWeight: '400' },
   outside: { opacity: 0.4 },
   disabledText: { opacity: 0.35 },
@@ -867,5 +865,5 @@ const styles = StyleSheet.create({
   pickGrid: { flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', paddingTop: 4 },
   pickCell: { width: '33.333%', height: 56, alignItems: 'center', justifyContent: 'center' },
   pickInner: { minWidth: 76, minHeight: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
-  pickText: { fontSize: 15, fontWeight: '400' },
+  pickText: { fontSize: 15, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
 });