@expokit/cli 0.4.4 → 0.5.0

package/registry/coupon/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/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"