@expokit/cli 0.4.2 → 0.4.4

package/README.md

@@ -50,12 +50,16 @@ Everything else — live previews, props, installation, theming, Pro, AI / MCP s
 
 ## Security
 
-- **No dependencies, no install scripts, no telemetry.**
+- **No dependencies, no install scripts.**
+- **Anonymous install counts only** — after a successful `add`, the CLI sends the item's name (`{"items":["button"]}`)
+  to expokit.in so the site can show how often each component is installed. No token, files, paths or machine details;
+  repeat adds count once a day. Turn it off with `DO_NOT_TRACK=1` or `EXPO_KIT_TELEMETRY=0`; it never runs in CI,
+  `--dry-run` or `update`.
 - **Writes only inside your app** — `components.json`, the `@/*` alias in `tsconfig.json` and the component files.
   `--dry-run` shows every change first; `add` never overwrites a file you changed unless you pass `--force`.
   `paths` in `components.json` that point outside the app are refused. Symlinks inside the app are followed, not
   checked, so a cloned repo that symlinks a folder elsewhere can still send writes there.
-- **Free components need no network** — they ship inside this package. Pro components are downloaded over HTTPS from
+- **Free components need no network to install** — they ship inside this package. Pro components are downloaded over HTTPS from
   expokit.in; your token is stored readable only by you, sent only to that site and never through a redirect.
   In scripts, pipe it to `login` or set `EXPO_KIT_TOKEN` (`--token` leaves it in your shell history).
 - **Runs one command:** `npx expo install` for the packages a component needs — without `EXPO_KIT_TOKEN` in its

package/bin/expo-kit.js

@@ -34,6 +34,7 @@ import {
   retryDelayMs,
   retryHint,
   tabComponentName,
+  telemetryEnabled,
   needsDevBuild,
   pickMainExport,
 } from './lib.mjs';
@@ -942,12 +943,33 @@ function cmdInit(cwd, flags, dir) {
   log(`Done. Add items with: ${RUN} add <name>`);
 }
 
-async function cmdAdd(args, cwd) {
+/**
+ * After a successful add: tells the site which item was installed — just its name, no token or project
+ * data (README "Privacy"). Off with DO_NOT_TRACK=1 / EXPO_KIT_TELEMETRY=0 and in CI. Never fails the add.
+ */
+async function reportInstalled(name) {
+  if (!telemetryEnabled(process.env)) return;
+  try {
+    parseSiteUrl(SITE_URL);
+    const res = await fetch(`${SITE_URL}/api/cli/installed`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ items: [name] }),
+      signal: AbortSignal.timeout(1500),
+    });
+    await res.arrayBuffer();
+  } catch {
+    // offline, slow or blocked: the count just misses this one
+  }
+}
+
+/** `report: false` for re-adds that aren't new installs (`update --force`). */
+async function cmdAdd(args, cwd, { report = true } = {}) {
   const { flags, positional } = parseFlags(args);
   // `add a b c` → add each in turn with the same flags.
   if (positional.length > 1 && !positional.includes('--list')) {
     const flagArgs = args.filter((a) => a.startsWith('--'));
-    for (const item of positional) await cmdAdd([item, ...flagArgs], cwd);
+    for (const item of positional) await cmdAdd([item, ...flagArgs], cwd, { report });
     return;
   }
   const name = positional[0];
@@ -1049,6 +1071,7 @@ async function cmdAdd(args, cwd) {
   const depsOk = runExpoInstall(projectRoot, meta.dependencies ?? [], false);
 
   if (depsOk) markTemplateInstalled(projectRoot, config, resolved);
+  if (report) await reportInstalled(resolved);
 
   console.log('');
   if (resolved === 'liquidglass-tab') {
@@ -1092,7 +1115,7 @@ async function cmdUpdate(args, cwd) {
   if (flags.force) {
     for (const resolved of targets) {
       log(`Full overwrite ${resolved} (--force${flags.dryRun ? ', dry run' : ''})…\n`);
-      await cmdAdd([resolved, '--force', ...(flags.dryRun ? ['--dry-run'] : [])], cwd);
+      await cmdAdd([resolved, '--force', ...(flags.dryRun ? ['--dry-run'] : [])], cwd, { report: false });
     }
     return;
   }

package/bin/lib.mjs

@@ -312,19 +312,23 @@ export function kitVersion(text) {
 }
 
 /**
- * Packages a registry item may depend on that work in the Expo Go app (SDK 57): native modules Expo Go
+ * Packages a registry item may depend on that work in the Expo Go app (SDK 58): native modules Expo Go
  * ships, plus pure-JS packages. Anything else needs a development build (`npx expo run:ios|android`).
  * Keep in sync with the Expo Go module list when the SDK moves.
  */
 export const EXPO_GO_PACKAGES = new Set([
   '@expo/vector-icons',
+  '@react-native-async-storage/async-storage',
   '@shopify/react-native-skia',
+  'expo-audio',
   'expo-blur',
   'expo-charts',
+  'expo-file-system',
   'expo-glass-effect',
   'expo-haptics',
   'expo-router',
   'expo-splash-screen',
+  'expo-status-bar',
   'react-native-gesture-handler',
   'react-native-reanimated',
   'react-native-safe-area-context',
@@ -366,6 +370,18 @@ export function mergeDependencies(...lists) {
 
 export const DEFAULT_SITE_URL = 'https://expokit.in';
 
+const OFF = /^(0|false|off|no)$/i;
+const set = (v) => v !== undefined && v !== '' && !OFF.test(v);
+
+/**
+ * Anonymous install counts (README "Privacy"): on unless DO_NOT_TRACK is set, EXPO_KIT_TELEMETRY is
+ * 0/false/off/no, or it's a CI run (builds re-adding items aren't new installs).
+ */
+export function telemetryEnabled(env) {
+  if (set(env.DO_NOT_TRACK) || set(env.CI)) return false;
+  return !(env.EXPO_KIT_TELEMETRY !== undefined && OFF.test(env.EXPO_KIT_TELEMETRY));
+}
+
 export function isLoopbackHost(hostname) {
   return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]' || hostname === '::1';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expokit/cli",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "mcpName": "io.github.Anshkaran7/expokit",
   "description": "Animated UI components for Expo and React Native — a shadcn-style CLI that copies buttons, inputs, cards, charts and full screens into your app",
   "license": "MIT",

package/registry/_docs/flip-calendar.json

@@ -0,0 +1,106 @@
+{
+  "name": "flip-calendar",
+  "category": "Inputs",
+  "aliases": [
+    "flip-date-picker",
+    "desk-calendar",
+    "daily-calendar",
+    "page-calendar",
+    "tear-off-calendar"
+  ],
+  "exportName": "FlipCalendar",
+  "files": [
+    "src/components/ui/flip-calendar.tsx"
+  ],
+  "summary": "A desk calendar: lift a page to flip it over the rings, pull down to bring it back.",
+  "props": [
+    [
+      "value",
+      "Date",
+      "—",
+      "Controlled date; its time of day is kept on every change."
+    ],
+    [
+      "defaultValue",
+      "Date",
+      "today",
+      "Initial date when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(date: Date) => void",
+      "—",
+      "Called when a page turns over (next day) or back (previous day)."
+    ],
+    [
+      "minDate",
+      "Date",
+      "—",
+      "Earliest day; pulling back past it only nudges the page."
+    ],
+    [
+      "maxDate",
+      "Date",
+      "—",
+      "Latest day; lifting past it only raises the page a little."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Weekday and month names (Intl), English where Intl isn't available."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Month band and Sunday colour (try colors.danger for the classic red)."
+    ],
+    [
+      "maxWidth",
+      "number",
+      "300",
+      "Widest the pad grows; it fills its container up to this."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "A tick as a page passes upright and a soft thud when it lands."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "'Date'",
+      "Name read by screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag up to lift today's page; past upright (or with a flick) it turns over to the next day, otherwise it settles back. Drag down to bring yesterday's page back over the rings. The point you grab stays under your finger. A hard flick turns up to six more pages. At minDate / maxDate the page only lifts or nudges a little."
+    ],
+    [
+      "Motion",
+      "Pages hinge on the rings in 3D on the native driver, darken as they turn away from the light and swap to their plain back exactly at upright. Every page keeps its own angle, so the page underneath is already in place when one turns. Reduce Motion swaps the turn for an instant change."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element whose value is the full date; increment turns to the next day, decrement turns back, within the limits."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { FlipCalendar } from '@/components/ui/flip-calendar';\n\nconst [date, setDate] = useState(new Date());\n<FlipCalendar value={date} onChange={setDate} minDate={new Date()} />",
+  "examples": [
+    {
+      "name": "Desk",
+      "title": "Desk",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FlipCalendar } from '@/components/ui/flip-calendar';\nimport { useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst atMidnight = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n\n/** \"Today\", \"Tomorrow\", \"In 5 days\" or \"3 days ago\". */\nfunction relative(date: Date, today: Date) {\n  const n = Math.round((atMidnight(date).getTime() - atMidnight(today).getTime()) / 86400000);\n  if (n === 0) return 'Today';\n  if (n === 1) return 'Tomorrow';\n  if (n === -1) return 'Yesterday';\n  return n > 0 ? `In ${n} days` : `${-n} days ago`;\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 520, alignItems: 'center', justifyContent: 'center', gap: 18, paddingTop: 24, paddingHorizontal: 24 },\n  frameScreen: { flex: 1 },\n  head: { alignItems: 'center', gap: 2 },\n  title: { fontSize: 22, fontWeight: '700' },\n  sub: { fontSize: 15 },\n  hint: { fontSize: 13, textAlign: 'center' },\n  button: { minHeight: 40, paddingHorizontal: 18, alignItems: 'center', justifyContent: 'center', borderWidth: StyleSheet.hairlineWidth },\n  buttonText: { fontSize: 14, fontWeight: '600' },\n});\n\nexport default function Desk({ screen, bottomInset = 0 }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [today] = useState(() => new Date());\n  const [date, setDate] = useState(today);\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted, paddingBottom: 24 + bottomInset },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View style={s.head}>\n        <Text style={[s.title, { color: colors.foreground }]}>Pick-up date</Text>\n        <Text style={[s.sub, { color: colors.mutedForeground }]}>{relative(date, today)}</Text>\n      </View>\n      <FlipCalendar value={date} onChange={setDate} accent={colors.danger} accessibilityLabel=\"Pick-up date\" />\n      <Text style={[s.hint, { color: colors.mutedForeground }]}>Lift a page to turn it · pull down to go back</Text>\n      <Pressable\n        accessibilityRole=\"button\"\n        onPress={() => setDate(today)}\n        style={({ pressed }) => [s.button, { borderColor: colors.border, backgroundColor: colors.card, borderRadius: radius.capsule(40), opacity: pressed ? 0.7 : 1 }]}\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.foreground }]}>Back to today</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/paywall.json

@@ -0,0 +1,144 @@
+{
+  "name": "paywall",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Paywall",
+  "files": [
+    "src/components/blocks/paywall.tsx"
+  ],
+  "summary": "Animated paywall, free-trial timeline, success and win-back screens.",
+  "props": [
+    [
+      "variant",
+      "\"card\" | \"glow\" | \"trial\"",
+      "\"card\"",
+      "Gradient card + plan picker, dark full-bleed with an annual toggle, or how the free trial works."
+    ],
+    [
+      "appName",
+      "string",
+      "'Lumen'",
+      "Shown on the card and the glow pill."
+    ],
+    [
+      "title",
+      "string",
+      "per variant",
+      "Heading."
+    ],
+    [
+      "subtitle",
+      "string",
+      "per variant",
+      "Line under the heading."
+    ],
+    [
+      "features",
+      "{ title, icon? }[]",
+      "per variant",
+      "Feature grid (card) or pills (glow)."
+    ],
+    [
+      "plans",
+      "PaywallPlan[]",
+      "yearly / monthly / lifetime",
+      "{ id, label, price, period, caption?, badge?, trialDays?, cta? }. In glow the toggle picks plans[0] (on) or plans[1] (off)."
+    ],
+    [
+      "plan",
+      "string",
+      "—",
+      "Selected plan id (controlled)."
+    ],
+    [
+      "defaultPlan",
+      "string",
+      "plans[0].id",
+      "Initial plan when uncontrolled."
+    ],
+    [
+      "onPlanChange",
+      "(id: string) => void",
+      "—",
+      "A plan was picked."
+    ],
+    [
+      "onPurchase",
+      "(plan: PaywallPlan) => void",
+      "—",
+      "Pressed the main button."
+    ],
+    [
+      "onRestore",
+      "() => void",
+      "—",
+      "Shows “Restore” in the top-left corner."
+    ],
+    [
+      "onClose",
+      "() => void",
+      "—",
+      "Shows a close button."
+    ],
+    [
+      "reminder",
+      "boolean",
+      "true",
+      "trial: the “remind me” switch (controlled with onReminderChange)."
+    ],
+    [
+      "auroraColors",
+      "[string, string, string]",
+      "orange, violet, cyan",
+      "Colours of the moving aurora."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Button and selected-plan colour."
+    ],
+    [
+      "topInset",
+      "number",
+      "0",
+      "Space above the restore / close buttons, e.g. useSafeAreaInsets().top. Also on PaywallSuccess and PaywallWinback."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "30 on iOS, 16 elsewhere",
+      "Space under the button, e.g. useSafeAreaInsets().bottom + 12."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The aurora drifts on three loops of different lengths, a sheen sweeps the card, rows rise in one after another and prices slide when the plan changes. Springs are critically damped — nothing bounces."
+    ],
+    [
+      "Touch",
+      "Drag the card to tilt it; it springs flat when you let go. Plan tiles and rows scale down slightly on press."
+    ],
+    [
+      "Reduced motion",
+      "Loops, tilt, lifts and press scaling are off; fades and colour changes stay. Confetti fires fewer pieces."
+    ],
+    [
+      "Screen readers",
+      "Plans and reasons are radio groups and the card reads as one label."
+    ],
+    [
+      "Layout",
+      "Restore sits top-left and close top-right, clear of the button. The button bar stays pinned and content fades out under it. Pass topInset / bottomInset (e.g. from useSafeAreaInsets) for the notch and home indicator."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/ruler-time-picker.json

@@ -0,0 +1,147 @@
+{
+  "name": "ruler-time-picker",
+  "category": "Inputs",
+  "aliases": [
+    "scrub-time-picker",
+    "drag-time-picker",
+    "ruler-date-picker",
+    "scrub-date-picker",
+    "day-ruler"
+  ],
+  "exportName": "RulerTimePicker",
+  "files": [
+    "src/components/ui/ruler-time-picker.tsx"
+  ],
+  "summary": "Drag a tick ruler and the big time or date rolls piece by piece with a motion blur.",
+  "props": [
+    [
+      "mode",
+      "'time' | 'date'",
+      "'time'",
+      "One tick per `step` minutes, or one tick per day with the 1st of each month marked."
+    ],
+    [
+      "value",
+      "{ hours, minutes } | Date",
+      "—",
+      "Controlled value: a 24-hour time, or a Date in date mode (its time of day is kept)."
+    ],
+    [
+      "defaultValue",
+      "{ hours, minutes } | Date",
+      "09:00 · today",
+      "Initial value when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(value) => void",
+      "—",
+      "Called on every tick the ruler passes, while you drag."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Small line above the value, e.g. 'Reminder time:'."
+    ],
+    [
+      "step",
+      "number",
+      "5",
+      "Time: minutes per tick (1–60)."
+    ],
+    [
+      "hour12",
+      "boolean",
+      "true",
+      "Time: 12-hour clock with a rolling am / pm; false for 00–23."
+    ],
+    [
+      "minDate / maxDate",
+      "Date",
+      "—",
+      "Date: earliest / latest pickable day; the ruler resists past them."
+    ],
+    [
+      "showYear",
+      "'auto' | 'always' | 'never'",
+      "'auto'",
+      "Date: 'auto' shows the year only when it isn't this year."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Date: weekday and month names (Intl), English where Intl isn't available."
+    ],
+    [
+      "size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Time at 40 / 52 / 64pt, date at 34 / 44 / 54pt."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Centre needle colour."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "A light tap on every step, a firmer one on each whole hour (time) or new month (date)."
+    ],
+    [
+      "sound",
+      "boolean",
+      "true",
+      "A soft tick on every step, generated in code (no audio file); it plays alongside other audio."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "label",
+      "Name read by screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The big value text (colour, weight, font family)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag sideways anywhere on the picker to scrub; fling to coast. It snaps to the nearest step when it stops. A touch during a fling catches it. In date mode, past minDate / maxDate the ruler follows at a fraction of your finger and springs back. Every step taps (firmer on the hour or a new month) and ticks softly."
+    ],
+    [
+      "Motion",
+      "Ticks (and month markers) slide, swell and fade on the native driver from one endless pool. Each piece that changes rolls up (later) or down (earlier) with ghosted copies for a motion blur. Reduce Motion swaps the roll for an instant change."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element whose value is the spoken time or full date; increment / decrement move one step, within the limits."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\n\nconst [time, setTime] = useState<TimeValue>({ hours: 2, minutes: 15 });\n<RulerTimePicker label=\"Reminder time:\" value={time} onChange={setTime} />\n\n// One tick per day\nconst [date, setDate] = useState(new Date());\n<RulerTimePicker mode=\"date\" label=\"Delivery date:\" value={date} onChange={setDate} minDate={new Date()} />",
+  "examples": [
+    {
+      "name": "Reminder",
+      "title": "Reminder",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst BLUR: [number, number][] = [2, 4, 7, 10].flatMap((r, ring) =>\n  Array.from({ length: 8 }, (_, i): [number, number] => {\n    const a = ((i + ring / 2) / 8) * Math.PI * 2;\n    return [Math.cos(a) * r, Math.sin(a) * r];\n  }),\n);\n\n/** The settings screen the sheet was opened from, as blocks: a title, a grouped list and toggles. */\nconst SettingsScreen = React.memo(function SettingsScreen() {\n  const { colors, radius, dark } = useKit();\n  // In dark mode the grouped rows sit a step lighter than the screen, like iOS Settings.\n  const group = dark ? colors.secondary : colors.card;\n  const rows: [number, 'value' | 'on' | 'off'][] = [\n    [0.42, 'value'],\n    [0.3, 'value'],\n    [0.38, 'on'],\n    [0.34, 'on'],\n    [0.4, 'off'],\n    [0.28, 'value'],\n  ];\n  const bar = (w: number | `${number}%`, h: number, color: string) => (\n    <View style={{ width: w, height: h, backgroundColor: color, borderRadius: radius.capsule(h) }} />\n  );\n  return (\n    <View style={s.screen}>\n      {bar(150, 30, alpha(colors.foreground, 0.7))}\n      <View style={[s.group, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {rows.map(([w, kind], i) => (\n          <View key={i} style={[s.row, i > 0 && { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border }]}>\n            {bar(`${w * 100}%`, 14, alpha(colors.foreground, 0.45))}\n            {kind === 'value' ? (\n              bar(64, 14, colors.mutedForeground)\n            ) : (\n              <View style={[s.toggle, { backgroundColor: kind === 'on' ? colors.accent : colors.border, borderRadius: radius.capsule(28) }]}>\n                <View style={[s.knob, { backgroundColor: colors.background, alignSelf: kind === 'on' ? 'flex-end' : 'flex-start', borderRadius: radius.capsule(24) }]} />\n              </View>\n            )}\n          </View>\n        ))}\n      </View>\n      <View style={[s.group, s.card2, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {bar('55%', 14, alpha(colors.foreground, 0.45))}\n        {bar('80%', 12, colors.mutedForeground)}\n      </View>\n    </View>\n  );\n});\n\n/** A bottom sheet over a blurred, dimmed screen, with a Done button under the picker. */\nfunction Sheet({ screen, bottomInset = 0, children }: DemoProps & { children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View pointerEvents=\"none\" style={StyleSheet.absoluteFill} importantForAccessibility=\"no-hide-descendants\" accessibilityElementsHidden>\n        {BLUR.map(([x, y], i) => (\n          <View key={i} style={[StyleSheet.absoluteFill, { opacity: 1 / 12, transform: [{ translateX: x }, { translateY: y }] }]}>\n            <SettingsScreen />\n          </View>\n        ))}\n        {/* A lighter dim than a modal's, so the screen behind still reads as a screen. */}\n        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay, opacity: dark ? 0.45 : 0.5 }]} />\n      </View>\n      {/* Raised above the screen: an elevated (lighter) surface in dark mode, and a hairline edge in both. */}\n      <View\n        style={[\n          s.sheet,\n          {\n            backgroundColor: dark ? colors.border : colors.card,\n            borderColor: dark ? alpha(colors.foreground, 0.12) : colors.border,\n            borderRadius: radius.scale(32),\n            marginBottom: 8 + bottomInset,\n          },\n        ]}\n      >\n        <View style={[s.grabber, { backgroundColor: alpha(colors.foreground, dark ? 0.3 : 0.15), borderRadius: radius.capsule(5) }]} />\n        {children}\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.lg, opacity: pressed ? 0.85 : 1 }]}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.primaryForeground }]}>Done</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 400, justifyContent: 'flex-end', overflow: 'hidden', paddingHorizontal: 8 },\n  frameScreen: { flex: 1 },\n  screen: { flex: 1, paddingHorizontal: 16, paddingTop: 20, gap: 14 },\n  card2: { paddingVertical: 16, gap: 10 },\n  group: { paddingHorizontal: 14 },\n  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 50 },\n  toggle: { width: 46, height: 28, padding: 2, justifyContent: 'center' },\n  knob: { width: 24, height: 24 },\n  sheet: { paddingHorizontal: 16, paddingTop: 10, paddingBottom: 16, gap: 10, borderWidth: StyleSheet.hairlineWidth },\n  grabber: { alignSelf: 'center', width: 40, height: 5 },\n  button: { minHeight: 52, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },\n  buttonText: { fontSize: 16, fontWeight: '600' },\n});\n\nexport default function Reminder(props: DemoProps) {\n  const [time, setTime] = useState<TimeValue>({ hours: 2, minutes: 15 });\n  return (\n    <Sheet {...props}>\n      <RulerTimePicker label=\"Reminder time:\" value={time} onChange={setTime} />\n    </Sheet>\n  );\n}\n"
+    },
+    {
+      "name": "Delivery",
+      "title": "Delivery",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst BLUR: [number, number][] = [2, 4, 7, 10].flatMap((r, ring) =>\n  Array.from({ length: 8 }, (_, i): [number, number] => {\n    const a = ((i + ring / 2) / 8) * Math.PI * 2;\n    return [Math.cos(a) * r, Math.sin(a) * r];\n  }),\n);\n\n/** The settings screen the sheet was opened from, as blocks: a title, a grouped list and toggles. */\nconst SettingsScreen = React.memo(function SettingsScreen() {\n  const { colors, radius, dark } = useKit();\n  // In dark mode the grouped rows sit a step lighter than the screen, like iOS Settings.\n  const group = dark ? colors.secondary : colors.card;\n  const rows: [number, 'value' | 'on' | 'off'][] = [\n    [0.42, 'value'],\n    [0.3, 'value'],\n    [0.38, 'on'],\n    [0.34, 'on'],\n    [0.4, 'off'],\n    [0.28, 'value'],\n  ];\n  const bar = (w: number | `${number}%`, h: number, color: string) => (\n    <View style={{ width: w, height: h, backgroundColor: color, borderRadius: radius.capsule(h) }} />\n  );\n  return (\n    <View style={s.screen}>\n      {bar(150, 30, alpha(colors.foreground, 0.7))}\n      <View style={[s.group, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {rows.map(([w, kind], i) => (\n          <View key={i} style={[s.row, i > 0 && { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border }]}>\n            {bar(`${w * 100}%`, 14, alpha(colors.foreground, 0.45))}\n            {kind === 'value' ? (\n              bar(64, 14, colors.mutedForeground)\n            ) : (\n              <View style={[s.toggle, { backgroundColor: kind === 'on' ? colors.accent : colors.border, borderRadius: radius.capsule(28) }]}>\n                <View style={[s.knob, { backgroundColor: colors.background, alignSelf: kind === 'on' ? 'flex-end' : 'flex-start', borderRadius: radius.capsule(24) }]} />\n              </View>\n            )}\n          </View>\n        ))}\n      </View>\n      <View style={[s.group, s.card2, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {bar('55%', 14, alpha(colors.foreground, 0.45))}\n        {bar('80%', 12, colors.mutedForeground)}\n      </View>\n    </View>\n  );\n});\n\n/** A bottom sheet over a blurred, dimmed screen, with a Done button under the picker. */\nfunction Sheet({ screen, bottomInset = 0, children }: DemoProps & { children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View pointerEvents=\"none\" style={StyleSheet.absoluteFill} importantForAccessibility=\"no-hide-descendants\" accessibilityElementsHidden>\n        {BLUR.map(([x, y], i) => (\n          <View key={i} style={[StyleSheet.absoluteFill, { opacity: 1 / 12, transform: [{ translateX: x }, { translateY: y }] }]}>\n            <SettingsScreen />\n          </View>\n        ))}\n        {/* A lighter dim than a modal's, so the screen behind still reads as a screen. */}\n        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay, opacity: dark ? 0.45 : 0.5 }]} />\n      </View>\n      {/* Raised above the screen: an elevated (lighter) surface in dark mode, and a hairline edge in both. */}\n      <View\n        style={[\n          s.sheet,\n          {\n            backgroundColor: dark ? colors.border : colors.card,\n            borderColor: dark ? alpha(colors.foreground, 0.12) : colors.border,\n            borderRadius: radius.scale(32),\n            marginBottom: 8 + bottomInset,\n          },\n        ]}\n      >\n        <View style={[s.grabber, { backgroundColor: alpha(colors.foreground, dark ? 0.3 : 0.15), borderRadius: radius.capsule(5) }]} />\n        {children}\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.lg, opacity: pressed ? 0.85 : 1 }]}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.primaryForeground }]}>Done</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 400, justifyContent: 'flex-end', overflow: 'hidden', paddingHorizontal: 8 },\n  frameScreen: { flex: 1 },\n  screen: { flex: 1, paddingHorizontal: 16, paddingTop: 20, gap: 14 },\n  card2: { paddingVertical: 16, gap: 10 },\n  group: { paddingHorizontal: 14 },\n  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 50 },\n  toggle: { width: 46, height: 28, padding: 2, justifyContent: 'center' },\n  knob: { width: 24, height: 24 },\n  sheet: { paddingHorizontal: 16, paddingTop: 10, paddingBottom: 16, gap: 10, borderWidth: StyleSheet.hairlineWidth },\n  grabber: { alignSelf: 'center', width: 40, height: 5 },\n  button: { minHeight: 52, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },\n  buttonText: { fontSize: 16, fontWeight: '600' },\n});\n\nexport default function Delivery(props: DemoProps) {\n  const [today] = useState(() => new Date());\n  const [date, setDate] = useState(() => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2));\n  return (\n    <Sheet {...props}>\n      <RulerTimePicker mode=\"date\" label=\"Delivery date:\" value={date} onChange={setDate} minDate={today} />\n    </Sheet>\n  );\n}\n"
+    }
+  ]
+}