@expokit/cli 0.4.4 → 0.5.0

package/registry/chip-group/files/src/lib/kit.tsx

@@ -1,5 +1,14 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
+import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+  PanResponder,
+  Platform,
+  useColorScheme,
+  useWindowDimensions,
+  type GestureResponderHandlers,
+  type PanResponderCallbacks,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -9,9 +18,9 @@ import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type Vie
 
 /**
  * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
- * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * 3: useLayout / shadow, 4: labels, 5: visible labels such as Cancel / Done / Today, AM / PM, usePanResponder / useLatest). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 3;
+export const KIT_VERSION = 5;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -60,10 +69,298 @@ export interface Theme {
   space: (n: number) => number;
   /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
   shadow: (level: ShadowLevel, color?: string) => ViewStyle;
-  font: { family?: string; mono: string };
+  font: { family?: string | undefined; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+  /** Text the kit shows or speaks on its own (buttons, placeholders, screen-reader names). Translate with <KitProvider labels={...}>. */
+  labels: Labels;
 }
 
+/**
+ * Every string the kit shows or speaks on its own: button text and placeholders (Cancel, Done, Today,
+ * Search…) and what screen readers say (close buttons, grabbers, hints). A prop on a component, like
+ * `cancelLabel` or `placeholder`, still wins over these.
+ * Pass a partial map to <KitProvider labels={...}>; keys you leave out stay English.
+ * Functions get the dynamic part, so word order can change per language.
+ */
+export interface Labels {
+  close: string;
+  dismiss: string;
+  closeSheet: string;
+  sheetGrabber: string;
+  sheetResizeHint: string;
+  sheetResizeOrCloseHint: string;
+  navigationDrawer: string;
+  closeDrawer: string;
+  closeMenu: string;
+  switchAccount: string;
+  openActions: string;
+  closeActions: string;
+  action: string;
+  loading: string;
+  clearSearch: string;
+  cancelSearch: string;
+  clearField: (field: string) => string;
+  back: string;
+  previous: string;
+  next: string;
+  goToToday: string;
+  goToSlide: (n: number) => string;
+  showAllCards: string;
+  expandNotification: string;
+  collapseNotification: string;
+  moreCount: (n: number) => string;
+  peopleCount: (n: number) => string;
+  namesAndMore: (names: string, n: number) => string;
+  newCount: (badge: string) => string;
+  remove: (item: string) => string;
+  selectedCount: (n: number) => string;
+  noneSelected: string;
+  notSet: string;
+  date: string;
+  time: string;
+  hour: string;
+  minute: string;
+  hours: (n: string) => string;
+  minutes: (n: number) => string;
+  booked: string;
+  unavailable: string;
+  timeDialHint: string;
+  flipCalendarHint: string;
+  increase: string;
+  decrease: string;
+  increaseItem: (item: string) => string;
+  decreaseItem: (item: string) => string;
+  range: string;
+  rangeMinimum: (name: string) => string;
+  rangeMaximum: (name: string) => string;
+  ratingStars: string;
+  ratingHearts: string;
+  showPassword: string;
+  hidePassword: string;
+  passwordStrength: (level: string) => string;
+  ruleMet: (rule: string) => string;
+  ruleUnmet: (rule: string) => string;
+  stepOf: (step: number, total: number, label: string) => string;
+  allStepsComplete: string;
+  stepCurrent: string;
+  stepCompleted: string;
+  stepNeedsAttention: string;
+  stepNotStarted: string;
+  goBackToStep: string;
+  activateCodeField: string;
+  qrCodeFor: (value: string) => string;
+  undoStroke: string;
+  signaturePad: string;
+  signaturePadSigned: string;
+  flipToBack: string;
+  flipToFront: string;
+  revealHint: string;
+  confirmHint: string;
+  prizeWheel: string;
+  spinHint: string;
+  prizes: (n: number, list: string) => string;
+  orbReveal: string;
+  orbBack: string;
+  // Visible text
+  cancel: string;
+  done: string;
+  doneCount: (n: number) => string;
+  doneDays: (n: number) => string;
+  clear: string;
+  continue: string;
+  delete: string;
+  failed: string;
+  search: string;
+  noResults: string;
+  noOptions: string;
+  nothingMatches: (query: string) => string;
+  selectPlaceholder: string;
+  selectDate: string;
+  selectDates: string;
+  pickStartDate: string;
+  pickEndDate: string;
+  selectTime: string;
+  setTime: (time: string) => string;
+  /** Clock periods, shown on 12-hour pickers and times. */
+  am: string;
+  pm: string;
+  /** Read for the AM / PM column. */
+  amPm: string;
+  morning: string;
+  afternoon: string;
+  evening: string;
+  slotsOpen: (n: number) => string;
+  full: string;
+  today: string;
+  tomorrow: string;
+  nextMonday: string;
+  inAWeek: string;
+  inAMonth: string;
+  next7Days: string;
+  nextWeekend: string;
+  thisMonth: string;
+  last7Days: string;
+  last30Days: string;
+  chooseOneOrMore: string;
+  /** After a rolling count, as in "2 selected". */
+  selectedSuffix: string;
+  chooseMonth: string;
+  chooseYear: string;
+  backToDays: string;
+  dayAndWeek: (day: number, week: number) => string;
+  daysLeft: (n: number) => string;
+  /** Too short, Weak, Okay, Strong, Very strong. */
+  passwordLevels: [string, string, string, string, string];
+  passwordsMatch: string;
+  passwordsDontMatch: string;
+  showQrCode: string;
+  copy: string;
+  copied: string;
+  slideToConfirm: string;
+  confirmed: string;
+  like: string;
+  nope: string;
+  swipeRight: string;
+  swipeLeft: string;
+}
+
+export const defaultLabels: Labels = {
+  close: 'Close',
+  dismiss: 'Dismiss',
+  closeSheet: 'Close sheet',
+  sheetGrabber: 'Sheet grabber',
+  sheetResizeHint: 'Swipe up or down to resize',
+  sheetResizeOrCloseHint: 'Swipe up or down to resize or close',
+  navigationDrawer: 'Navigation drawer',
+  closeDrawer: 'Close drawer',
+  closeMenu: 'Close menu',
+  switchAccount: 'Switch account',
+  openActions: 'Open actions',
+  closeActions: 'Close actions',
+  action: 'Action',
+  loading: 'Loading',
+  clearSearch: 'Clear search',
+  cancelSearch: 'Cancel search',
+  clearField: (field) => `Clear ${field}`,
+  back: 'Back',
+  previous: 'Previous',
+  next: 'Next',
+  goToToday: 'Go to today',
+  goToSlide: (n) => `Go to slide ${n}`,
+  showAllCards: 'Shows all cards',
+  expandNotification: 'Expands the notification',
+  collapseNotification: 'Collapses the notification',
+  moreCount: (n) => `${n} more`,
+  peopleCount: (n) => `${n} people`,
+  namesAndMore: (names, n) => `${names} and ${n} more`,
+  newCount: (badge) => `${badge} new`,
+  remove: (item) => `Remove ${item}`,
+  selectedCount: (n) => `${n} selected`,
+  noneSelected: 'None selected',
+  notSet: 'Not set',
+  date: 'Date',
+  time: 'Time',
+  hour: 'Hour',
+  minute: 'Minute',
+  hours: (n) => `${n} hours`,
+  minutes: (n) => `${n} minutes`,
+  booked: 'booked',
+  unavailable: 'unavailable',
+  timeDialHint: 'Drag around the dial, or swipe up or down to adjust.',
+  flipCalendarHint: 'Swipe up to turn to the next day, down for the previous one.',
+  increase: 'Increase',
+  decrease: 'Decrease',
+  increaseItem: (item) => `Increase ${item}`,
+  decreaseItem: (item) => `Decrease ${item}`,
+  range: 'Range',
+  rangeMinimum: (name) => `${name} minimum`,
+  rangeMaximum: (name) => `${name} maximum`,
+  ratingStars: 'Rating, stars',
+  ratingHearts: 'Rating, hearts',
+  showPassword: 'Show password',
+  hidePassword: 'Hide password',
+  passwordStrength: (level) => `Password strength: ${level}`,
+  ruleMet: (rule) => `${rule}: done`,
+  ruleUnmet: (rule) => `${rule}: not yet`,
+  stepOf: (step, total, label) => `Step ${step} of ${total}, ${label}`,
+  allStepsComplete: 'All steps complete',
+  stepCurrent: 'current',
+  stepCompleted: 'completed',
+  stepNeedsAttention: 'needs attention',
+  stepNotStarted: 'not started',
+  goBackToStep: 'Goes back to this step',
+  activateCodeField: 'Activates the code field',
+  qrCodeFor: (value) => `QR code for ${value}`,
+  undoStroke: 'Undo last stroke',
+  signaturePad: 'Signature pad, draw your signature',
+  signaturePadSigned: 'Signature pad, signed',
+  flipToBack: 'Tap to flip to the back.',
+  flipToFront: 'Showing the back. Tap to flip to the front.',
+  revealHint: 'Double-tap to reveal',
+  confirmHint: 'Double tap to confirm',
+  prizeWheel: 'Prize wheel',
+  spinHint: 'Spins the wheel for a prize',
+  prizes: (n, list) => `${n} prizes: ${list}`,
+  orbReveal: 'Reveal',
+  orbBack: 'Glass orb, drag down to go back',
+  cancel: 'Cancel',
+  done: 'Done',
+  doneCount: (n) => `Done · ${n}`,
+  doneDays: (n) => `Done · ${n} days`,
+  clear: 'Clear',
+  continue: 'Continue',
+  delete: 'Delete',
+  failed: 'Failed',
+  search: 'Search',
+  noResults: 'No results',
+  noOptions: 'No options',
+  nothingMatches: (query) => `Nothing matches “${query}”.`,
+  selectPlaceholder: 'Select…',
+  selectDate: 'Select a date',
+  selectDates: 'Select dates',
+  pickStartDate: 'Pick a start date',
+  pickEndDate: 'pick an end date',
+  selectTime: 'Select a time',
+  setTime: (time) => `Set ${time}`,
+  am: 'AM',
+  pm: 'PM',
+  amPm: 'AM or PM',
+  morning: 'Morning',
+  afternoon: 'Afternoon',
+  evening: 'Evening',
+  slotsOpen: (n) => `${n} open`,
+  full: 'Full',
+  today: 'Today',
+  tomorrow: 'Tomorrow',
+  nextMonday: 'Next Monday',
+  inAWeek: 'In a week',
+  inAMonth: 'In a month',
+  next7Days: 'Next 7 days',
+  nextWeekend: 'Next weekend',
+  thisMonth: 'This month',
+  last7Days: 'Last 7 days',
+  last30Days: 'Last 30 days',
+  chooseOneOrMore: 'Choose one or more',
+  selectedSuffix: 'selected',
+  chooseMonth: 'choose month',
+  chooseYear: 'choose year',
+  backToDays: 'back to days',
+  dayAndWeek: (day, week) => `Day ${day} · Week ${week}`,
+  daysLeft: (n) => `${n} left`,
+  passwordLevels: ['Too short', 'Weak', 'Okay', 'Strong', 'Very strong'],
+  passwordsMatch: 'Passwords match',
+  passwordsDontMatch: "Passwords don't match",
+  showQrCode: 'Show QR Code',
+  copy: 'Copy',
+  copied: 'Copied',
+  slideToConfirm: 'Slide to confirm',
+  confirmed: 'Confirmed',
+  like: 'LIKE',
+  nope: 'NOPE',
+  swipeRight: 'Right',
+  swipeLeft: 'Left',
+};
+
 const light: Colors = {
   background: '#ffffff',
   foreground: '#09090b',
@@ -149,20 +446,27 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
       xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
     },
+    labels: overrides?.labels ? { ...defaultLabels, ...overrides.labels } : defaultLabels,
   };
 }
 
 export interface ThemeOverrides {
   /** Brand colour used for focus rings, selected states and accent buttons. */
-  accent?: string;
+  accent?: string | undefined;
+
   /** Base corner radius in points (default 12). */
-  radius?: number;
-  fontFamily?: string;
+  radius?: number | undefined;
+
+  fontFamily?: string | undefined;
+
   /** Override any token per scheme. */
-  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>> | undefined;
+
+  /** Screen-reader strings in your language, e.g. { close: "बंद करें" }. Keys you leave out stay English. */
+  labels?: Partial<Labels> | undefined;
 }
 
-const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+const KitContext = createContext<{ scheme?: ColorScheme | undefined; overrides?: ThemeOverrides | undefined } | null>(null);
 
 export function KitProvider({
   scheme,
@@ -172,7 +476,7 @@ export function KitProvider({
   const value = useMemo(
     () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors, overrides.labels]
   );
   return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
 }
@@ -318,3 +622,51 @@ export function isTextNode(node: React.ReactNode): node is string | number | (st
   if (typeof node === 'string' || typeof node === 'number') return true;
   return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
 }
+
+/**
+ * A ref that always holds the latest `value`, for gesture and timer callbacks that must not go stale.
+ * Read `.current` only inside callbacks and effects, never while rendering.
+ */
+export function useLatest<T>(value: T): React.MutableRefObject<T> {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+const panKeys = [
+  'onStartShouldSetPanResponder',
+  'onStartShouldSetPanResponderCapture',
+  'onMoveShouldSetPanResponder',
+  'onMoveShouldSetPanResponderCapture',
+  'onPanResponderGrant',
+  'onPanResponderStart',
+  'onPanResponderMove',
+  'onPanResponderEnd',
+  'onPanResponderRelease',
+  'onPanResponderReject',
+  'onPanResponderTerminate',
+] as const;
+
+/**
+ * PanResponder handlers that always call the latest `config`, created once. Write the callbacks inline:
+ * they may read refs and props freely, and nothing is recreated between renders, so a drag in progress
+ * is never cut off. Spread the result: `<View {...pan} />`.
+ */
+export function usePanResponder(config: PanResponderCallbacks): GestureResponderHandlers {
+  const latest = useLatest(config);
+  const [handlers] = useState(() => {
+    const forward: Record<string, (...args: never[]) => unknown> = {};
+    for (const key of panKeys) {
+      forward[key] = (...args) => (latest.current[key] as ((...a: never[]) => unknown) | undefined)?.(...args);
+    }
+    // React Native's defaults when these are left out are `true`, so keep them when the config has none.
+    forward.onPanResponderTerminationRequest = (...args) =>
+      (latest.current.onPanResponderTerminationRequest as ((...a: never[]) => boolean) | undefined)?.(...args) ?? true;
+    forward.onShouldBlockNativeResponder = (...args) =>
+      (latest.current.onShouldBlockNativeResponder as ((...a: never[]) => boolean) | undefined)?.(...args) ?? true;
+    return PanResponder.create(forward as PanResponderCallbacks).panHandlers;
+  });
+  return handlers;
+}

package/registry/chip-group.json

@@ -4,6 +4,7 @@
   "title": "Chip Group",
   "description": "Filter chips for single or multiple choice. A check mark draws itself in while the chip widens smoothly to make room and its colours cross-fade. Wrapping or horizontally scrolling.",
   "tier": "free",
+  "aliases": [],
   "dependencies": [
     "react-native-svg"
   ],

package/registry/confetti/files/src/components/ui/confetti.tsx

@@ -5,13 +5,13 @@ export type ConfettiOrigin = 'top' | 'center' | 'bottom';
 
 export interface ConfettiBurst {
   /** Where it comes from (default: the `origin` prop). */
-  origin?: ConfettiOrigin;
+  origin?: ConfettiOrigin | undefined;
   /** For `center`: the burst point in the overlay, in points (default: the middle). */
-  x?: number;
-  y?: number;
+  x?: number | undefined;
+  y?: number | undefined;
   /** Pieces in this burst (default: the `count` prop). */
-  count?: number;
-  colors?: readonly string[];
+  count?: number | undefined;
+  colors?: readonly string[] | undefined;
 }
 
 export interface ConfettiHandle {
@@ -21,20 +21,20 @@ export interface ConfettiHandle {
 
 export interface ConfettiProps {
   /** Pieces per burst (default 80, max 160). */
-  count?: number;
-  colors?: readonly string[];
+  count?: number | undefined;
+  colors?: readonly string[] | undefined;
   /** `top` rains down, `center` pops outward, `bottom` fires two cannons from the corners (default "bottom"). */
-  origin?: ConfettiOrigin;
+  origin?: ConfettiOrigin | undefined;
   /** How long a burst lasts in ms (default 2600). */
-  duration?: number;
+  duration?: number | undefined;
   /** Fire a burst whenever this value changes (not on mount) — no ref needed. */
-  trigger?: unknown;
+  trigger?: unknown | undefined;
   /** Fire once on mount. */
-  autoplay?: boolean;
+  autoplay?: boolean | undefined;
   /** Called when a burst has finished. */
-  onDone?: () => void;
+  onDone?: (() => void) | undefined;
   /** The overlay fills its parent by default; it never takes touches. */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const PALETTE = ['#ff3d77', '#ffb000', '#3ddcff', '#7cff6b', '#a855ff', '#ffffff', '#ff7a1a'];
@@ -145,7 +145,8 @@ export const Confetti = forwardRef<ConfettiHandle, ConfettiProps>(function Confe
       const turns = (Math.random() < 0.5 ? -1 : 1) * (1 + Math.random() * 2.5);
       pieces.push({
         key: i,
-        color: palette[Math.floor(Math.random() * palette.length)],
+        // An empty `colors` list falls back to white rather than an invisible piece.
+        color: palette[Math.floor(Math.random() * palette.length)] ?? '#ffffff',
         w: round ? 7 : strip ? 4 : 7,
         h: round ? 7 : strip ? 16 : 11,
         round,

package/registry/confetti.json

@@ -4,12 +4,9 @@
   "title": "Confetti",
   "description": "Confetti for the moments that deserve it — a coupon applied, a reward revealed, an order placed. Pieces fly on real arcs (launch, gravity, air drag) and flutter as they fall; one native-driven animation moves them all. Cannons, rain or a pop under your finger; respects Reduce Motion.",
   "tier": "free",
+  "aliases": [],
   "dependencies": [],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
+  "registryDependencies": [],
+  "sharedFiles": [],
   "filesDir": "confetti/files"
 }

package/registry/coupon/files/src/components/ui/coupon.tsx

@@ -30,13 +30,13 @@ export interface CouponTheme {
   /** Text on the value panel. */
   ink: string;
   /** Buttons, the code chip and the applied ring (default: the fill's last colour). */
-  accent?: string;
+  accent?: string | undefined;
   /** Details panel paint (default: the app's card colour). */
-  body?: string | readonly string[];
+  body?: string | readonly string[] | undefined;
   /** Text on the details panel (default: the app's foreground). */
-  bodyInk?: string;
+  bodyInk?: string | undefined;
   /** Texture on the value panel. */
-  pattern?: TicketPattern;
+  pattern?: TicketPattern | undefined;
 }
 
 export const couponThemes: Record<CouponThemeName, CouponTheme> = {
@@ -74,52 +74,52 @@ export interface CouponProps {
   /** The headline: "50%", "₹200", "FREE", "BOGO". */
   value: string;
   /** Under the value: "OFF", "CASHBACK". */
-  unit?: string;
+  unit?: string | undefined;
   /** Above the value: "FLAT", "UP TO". */
-  prefix?: string;
-  title?: string;
-  description?: string;
+  prefix?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
   /** Promo code, shown in a dashed chip (tap to copy when `onCopy` is set). */
-  code?: string;
-  brand?: string;
+  code?: string | undefined;
+  brand?: string | undefined;
   /** Logo before the brand (e.g. an <Image>). */
-  logo?: React.ReactNode;
+  logo?: React.ReactNode | undefined;
   /** Expiry line, e.g. "Valid till 31 Dec". */
-  expires?: string;
+  expires?: string | undefined;
   /** Live countdown to this moment; the coupon turns expired when it passes. */
-  expiresAt?: Date | number;
+  expiresAt?: Date | number | undefined;
   /** Shown on the back — the "T&C" link turns the coupon over. */
-  terms?: string[];
-  status?: CouponStatus;
+  terms?: string[] | undefined;
+  status?: CouponStatus | undefined;
   /** Why it's locked, e.g. "Add ₹120 more to unlock". */
-  lockedHint?: string;
+  lockedHint?: string | undefined;
   /** A preset or your own colours (default "sunset"). */
-  theme?: CouponThemeName | CouponTheme;
+  theme?: CouponThemeName | CouponTheme | undefined;
   /** Override the theme's texture. */
-  pattern?: TicketPattern;
+  pattern?: TicketPattern | undefined;
   /** `horizontal` (value panel on the left) or `vertical` (value panel on top). */
-  layout?: 'horizontal' | 'vertical';
-  variant?: CouponVariant;
-  size?: CouponSize;
+  layout?: 'horizontal' | 'vertical' | undefined;
+  variant?: CouponVariant | undefined;
+  size?: CouponSize | undefined;
   /** A light sweep across the value panel every few seconds. */
-  shine?: boolean;
+  shine?: boolean | undefined;
   /** 3D: tilts toward the finger with a moving reflection. */
-  tilt?: boolean;
+  tilt?: boolean | undefined;
   /** With `tilt`: a rainbow foil sheen. */
-  holo?: boolean;
+  holo?: boolean | undefined;
   /** With `tilt`: sway slowly on its own. */
-  idle?: boolean;
+  idle?: boolean | undefined;
   /** Called with the code from the chip — wire it to expo-clipboard. */
-  onCopy?: (code: string) => void;
+  onCopy?: ((code: string) => void) | undefined;
   /** Shows the Apply button. */
-  onApply?: () => void;
+  onApply?: (() => void) | undefined;
   /** Tap on the coupon itself (e.g. open details or select it). */
-  onPress?: () => void;
-  flipped?: boolean;
-  defaultFlipped?: boolean;
-  onFlip?: (flipped: boolean) => void;
-  labels?: CouponLabels;
-  style?: StyleProp<ViewStyle>;
+  onPress?: (() => void) | undefined;
+  flipped?: boolean | undefined;
+  defaultFlipped?: boolean | undefined;
+  onFlip?: ((flipped: boolean) => void) | undefined;
+  labels?: CouponLabels | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const VARIANTS: Record<CouponVariant, { r: number; notch: number; edge?: TicketEdge; edgeSize: number; ends?: boolean }> = {
@@ -159,11 +159,11 @@ function contrast(a: string, b: string) {
     const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
     const n = parseInt(full.slice(1, 7), 16);
     if (!/^#[0-9a-f]{6}/i.test(full) || Number.isNaN(n)) return -1;
-    const ch = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+    const [red = 0, green = 0, blue = 0] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
       const c = v / 255;
       return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
     });
-    return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
   };
   const [x, y] = [lum(a), lum(b)];
   if (x < 0 || y < 0) return 21;
@@ -201,13 +201,13 @@ function useRemaining(at?: Date | number) {
 }
 
 /** The promo code in a dashed chip; a tap copies it and flips the icon to a check for a moment. */
-function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels>; reduce: boolean }) {
+function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: ((code: string) => void) | undefined; labels: Required<CouponLabels>; reduce: boolean }) {
   const { font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const [copied, setCopied] = useState(false);
   const [box, setBox] = useState({ w: 0, h: 0 });
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const pop = useRef(new Animated.Value(1)).current;
+  const [pop] = useState(() => new Animated.Value(1));
   useEffect(() => () => clearTimeout(timer.current), []);
   const copy = () => {
     onCopy?.(code);
@@ -248,7 +248,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code
 
 /** A light band that sweeps across, every few seconds, through the given windows. */
 function Shine({ windows, width, height }: { windows: TicketRect[]; width: number; height: number }) {
-  const t = useRef(new Animated.Value(0)).current;
+  const [t] = useState(() => new Animated.Value(0));
   useEffect(() => {
     const loop = Animated.loop(
       Animated.sequence([Animated.timing(t, { toValue: 1, duration: 1100, easing: Easing.inOut(Easing.quad), useNativeDriver: true }), Animated.delay(2400)])
@@ -338,12 +338,12 @@ export function Coupon({
   const reduce = useReduceMotion();
   const theme = typeof themeProp === 'object' ? themeProp : couponThemes[themeProp];
   const fills = typeof theme.fill === 'string' ? [theme.fill] : theme.fill;
-  const accent = theme.accent ?? fills[fills.length - 1];
+  const accent = theme.accent ?? fills[fills.length - 1] ?? colors.primary;
   const body = theme.body ?? (dark ? colors.popover : colors.card);
   const bodyInk = theme.bodyInk ?? colors.foreground;
   const bodySoft = alpha(bodyInk, 0.6);
   // The accent as text on the details panel — or the panel's ink when they'd blend (yellow on white).
-  const textAccent = contrast(accent, typeof body === 'string' ? body : body[0]) >= 2.6 ? accent : bodyInk;
+  const textAccent = contrast(accent, typeof body === 'string' ? body : (body[0] ?? colors.card)) >= 2.6 ? accent : bodyInk;
   const s = SIZES[size];
   const v = VARIANTS[variant];
   const horizontal = layout === 'horizontal';
@@ -387,8 +387,8 @@ export function Coupon({
   const n = v.notch;
   const endEdge = v.edge;
   const sideEdge = v.ends ? undefined : v.edge;
-  const valueEdges: Partial<Record<TicketSide, TicketEdge>> = horizontal ? { left: endEdge, top: sideEdge, bottom: sideEdge } : { top: endEdge, left: sideEdge, right: sideEdge };
-  const detailEdges: Partial<Record<TicketSide, TicketEdge>> = horizontal ? { right: endEdge, top: sideEdge, bottom: sideEdge } : { bottom: endEdge, left: sideEdge, right: sideEdge };
+  const valueEdges: Partial<Record<TicketSide, TicketEdge | undefined>> = horizontal ? { left: endEdge, top: sideEdge, bottom: sideEdge } : { top: endEdge, left: sideEdge, right: sideEdge };
+  const detailEdges: Partial<Record<TicketSide, TicketEdge | undefined>> = horizontal ? { right: endEdge, top: sideEdge, bottom: sideEdge } : { bottom: endEdge, left: sideEdge, right: sideEdge };
   const corners = (tl: number, tr: number, br: number, bl: number): TicketCorners => [tl, tr, br, bl];
   const valueCorners = horizontal ? corners(v.r, -n, -n, v.r) : corners(v.r, v.r, -n, -n);
   const detailCorners = horizontal ? corners(-n, v.r, v.r, -n) : corners(-n, -n, v.r, v.r);