@expokit/cli 0.4.3 → 0.4.4

package/bin/lib.mjs

@@ -312,7 +312,7 @@ 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.
  */
@@ -320,8 +320,10 @@ 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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expokit/cli",
-  "version": "0.4.3",
+  "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"
+    }
+  ]
+}

package/registry/accordion/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * 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.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   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 };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/action-sheet/files/src/components/ui/action-sheet.tsx

@@ -17,7 +17,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, useLayout } from '@/lib/kit';
 
 /**
  * `inset` — iOS: grouped rounded cards floating above the home indicator, with a separate Cancel card (default).
@@ -140,6 +140,8 @@ export function ActionSheet({
   const { colors, radius, dark, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const { height: winH } = useWindowDimensions();
+  // Full width on portrait phones; a centred, width-capped card on foldables, tablets and landscape.
+  const { sheetWidth } = useLayout();
   const reduceMotion = useReduceMotion();
   const tint = accent ?? colors.accent;
   const [inner, setInner] = useState(defaultOpen);
@@ -320,7 +322,7 @@ export function ActionSheet({
             borderTopLeftRadius: radius.scale(28),
             borderTopRightRadius: radius.scale(28),
             borderColor: edge,
-            shadowOpacity: dark ? 0.5 : 0.12,
+            boxShadow: `0px -6px 48px rgba(0,0,0,${dark ? 0.5 : 0.12})`,
           },
         ]}
       >
@@ -422,6 +424,7 @@ export function ActionSheet({
           }}
           style={[
             styles.sheet,
+            { maxWidth: sheetWidth },
             inset && { paddingHorizontal: 8, paddingBottom: 8 + bottomInset },
             {
               opacity: reduceMotion ? t : 1,
@@ -459,8 +462,8 @@ function Card({
   children: React.ReactNode;
 }) {
   return (
-    <View style={[styles.cardAmbient, { borderRadius: corner, backgroundColor: bg, shadowOpacity: dark ? 0.5 : 0.14 }]}>
-      <View style={[styles.cardContact, { borderRadius: corner, backgroundColor: bg, shadowOpacity: dark ? 0.3 : 0.06 }]}>
+    <View style={{ borderRadius: corner, backgroundColor: bg, boxShadow: `0px 10px 48px rgba(0,0,0,${dark ? 0.5 : 0.14})` }}>
+      <View style={{ borderRadius: corner, backgroundColor: bg, boxShadow: `0px 1px 4px rgba(0,0,0,${dark ? 0.3 : 0.06})` }}>
         <View style={{ borderRadius: corner, overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth, borderColor: edge }}>
           {children}
         </View>
@@ -546,9 +549,7 @@ function useReduceMotion() {
 
 const styles = StyleSheet.create({
   host: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' },
-  sheet: { width: '100%', maxWidth: 480, gap: 8 },
-  cardAmbient: { shadowColor: '#000', shadowRadius: 24, shadowOffset: { width: 0, height: 10 }, elevation: 10 },
-  cardContact: { shadowColor: '#000', shadowRadius: 2, shadowOffset: { width: 0, height: 1 } },
+  sheet: { width: '100%', gap: 8 },
   head: { paddingHorizontal: 24, paddingTop: 15, paddingBottom: 14, alignItems: 'center', gap: 4 },
   headLeft: { paddingHorizontal: 20, paddingTop: 6, paddingBottom: 10, gap: 4 },
   title: { fontSize: 13.5, lineHeight: 18, fontWeight: '400', textAlign: 'center' },
@@ -566,10 +567,6 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: 0,
     paddingHorizontal: 8,
-    shadowColor: '#000',
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: -6 },
-    elevation: 16,
   },
   listRow: { minHeight: 56, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, gap: 16 },
   listIcon: { width: 24, alignItems: 'center' },