@expokit/cli 0.4.0 → 0.4.1

package/registry/_docs/calendar.json

@@ -172,27 +172,27 @@
     {
       "name": "Single",
       "title": "Single",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Single({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(addDays(today, 3));\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Delivery day</Ink>\n      <Calendar value={date} onChange={setDate} minDate={today} />\n      <View style={s.summary}>\n        <Ink tone=\"muted\" style={s.muted}>Arriving</Ink>\n        <Ink style={s.strong}>{day(date)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', columnGap: 12, rowGap: 2 },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Single({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(addDays(today, 3));\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Delivery day</Ink>\n      <Calendar value={date} onChange={setDate} minDate={today} />\n      <View style={s.summary}>\n        <Ink tone=\"muted\" style={s.muted}>Arriving</Ink>\n        <Ink style={[s.strong, { flexShrink: 1 }]}>{day(date)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Range",
       "title": "Range",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Range({ screen }: DemoProps) {\n  const [stay, setStay] = useState<DateRange>({ start: addDays(today, 4), end: addDays(today, 8) });\n  const { colors, radius } = useKit();\n  const nights = stay.start && stay.end ? Math.round((stay.end.getTime() - stay.start.getTime()) / 86400000) : 0;\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Your stay · Lisbon</Ink>\n      <Calendar mode=\"range\" value={stay} onChange={setStay} minDate={today} />\n      <View style={s.row}>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-in</Ink>\n          <Ink style={s.strong}>{day(stay.start)}</Ink>\n        </View>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-out</Ink>\n          <Ink style={s.strong}>{stay.end ? day(stay.end) : 'Select a date'}</Ink>\n        </View>\n        <View style={[s.pill, { opacity: nights ? 1 : 0.4, backgroundColor: alpha(colors.accent, 0.14), borderRadius: radius.capsule(30) }]}>\n          <Text style={[s.pillText, { color: colors.accent }]}>{nights ? `${nights} night${nights > 1 ? 's' : ''}` : '0 nights'}</Text>\n        </View>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', columnGap: 12, rowGap: 2 },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Range({ screen }: DemoProps) {\n  const [stay, setStay] = useState<DateRange>({ start: addDays(today, 4), end: addDays(today, 8) });\n  const { colors, radius } = useKit();\n  const nights = stay.start && stay.end ? Math.round((stay.end.getTime() - stay.start.getTime()) / 86400000) : 0;\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Your stay · Lisbon</Ink>\n      <Calendar mode=\"range\" value={stay} onChange={setStay} minDate={today} />\n      <View style={s.row}>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-in</Ink>\n          <Ink style={s.strong}>{day(stay.start)}</Ink>\n        </View>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-out</Ink>\n          <Ink style={s.strong}>{stay.end ? day(stay.end) : 'Select a date'}</Ink>\n        </View>\n        <View style={[s.pill, { opacity: nights ? 1 : 0.4, backgroundColor: alpha(colors.accent, 0.14), borderRadius: radius.capsule(30) }]}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={[s.pillText, { color: colors.accent }]}>{nights ? `${nights} night${nights > 1 ? 's' : ''}` : '0 nights'}</Text>\n        </View>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Marked",
       "title": "Marked",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst MEETING = '#38bdf8';\n\nconst BIRTHDAY = '#f472b6';\n\nconst TRIP = '#f59e0b';\n\nconst DONE = '#22c55e';\n\nconst DUE = '#ef4444';\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Marked({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(today);\n  const { highlights, marks } = useMemo(() => {\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const k = (d: number) => toDateKey(new Date(y, m, d));\n    return {\n      // Whole-day fills: who / what owns the day.\n      highlights: { [k(2)]: MEETING, [k(14)]: BIRTHDAY, [k(18)]: TRIP, [k(21)]: MEETING, [k(31)]: BIRTHDAY },\n      // Dots underneath: smaller things on that day.\n      marks: { [k(3)]: DONE, [k(8)]: DUE, [k(12)]: DONE, [k(17)]: DONE, [k(22)]: [DONE, DUE], [k(26)]: DUE },\n    };\n  }, []);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Schedule</Ink>\n      <Calendar value={date} onChange={setDate} highlightedDates={highlights} markedDates={marks} weekStartsOn={1} />\n      <View style={s.legend}>\n        {[\n          ['Meeting', MEETING],\n          ['Birthday', BIRTHDAY],\n          ['Trip', TRIP],\n          ['Done', DONE],\n          ['Due', DUE],\n        ].map(([label, color]) => (\n          <View key={label} style={s.legendItem}>\n            <View style={[s.dot, { backgroundColor: color }]} />\n            <Ink tone=\"muted\" style={s.muted}>{label}</Ink>\n          </View>\n        ))}\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst MEETING = '#38bdf8';\n\nconst BIRTHDAY = '#f472b6';\n\nconst TRIP = '#f59e0b';\n\nconst DONE = '#22c55e';\n\nconst DUE = '#ef4444';\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', columnGap: 12, rowGap: 2 },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Marked({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(today);\n  const { highlights, marks } = useMemo(() => {\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const k = (d: number) => toDateKey(new Date(y, m, d));\n    return {\n      // Whole-day fills: who / what owns the day.\n      highlights: { [k(2)]: MEETING, [k(14)]: BIRTHDAY, [k(18)]: TRIP, [k(21)]: MEETING, [k(31)]: BIRTHDAY },\n      // Dots underneath: smaller things on that day.\n      marks: { [k(3)]: DONE, [k(8)]: DUE, [k(12)]: DONE, [k(17)]: DONE, [k(22)]: [DONE, DUE], [k(26)]: DUE },\n    };\n  }, []);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Schedule</Ink>\n      <Calendar value={date} onChange={setDate} highlightedDates={highlights} markedDates={marks} weekStartsOn={1} />\n      <View style={s.legend}>\n        {[\n          ['Meeting', MEETING],\n          ['Birthday', BIRTHDAY],\n          ['Trip', TRIP],\n          ['Done', DONE],\n          ['Due', DUE],\n        ].map(([label, color]) => (\n          <View key={label} style={s.legendItem}>\n            <View style={[s.dot, { backgroundColor: color }]} />\n            <Ink tone=\"muted\" style={s.muted}>{label}</Ink>\n          </View>\n        ))}\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Booking",
       "title": "Booking",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Booking({ screen }: DemoProps) {\n  const booked = useMemo(() => new Set([2, 5, 6, 11, 19].map((n) => toDateKey(addDays(today, n)))), []);\n  const [date, setDate] = useState<Date | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Book a consultation</Ink>\n      <Calendar\n        value={date}\n        onChange={setDate}\n        minDate={today}\n        maxDate={addDays(today, 45)}\n        isDateDisabled={(d) => d.getDay() === 0 || booked.has(toDateKey(d))}\n        showOutsideDays\n        fixedWeeks\n      />\n      <Ink tone=\"muted\" style={s.muted}>\n        {date ? `Next: choose a time on ${day(date)}` : 'Faded days are fully booked or closed on Sundays.'}\n      </Ink>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', columnGap: 12, rowGap: 2 },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Booking({ screen }: DemoProps) {\n  const booked = useMemo(() => new Set([2, 5, 6, 11, 19].map((n) => toDateKey(addDays(today, n)))), []);\n  const [date, setDate] = useState<Date | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Book a consultation</Ink>\n      <Calendar\n        value={date}\n        onChange={setDate}\n        minDate={today}\n        maxDate={addDays(today, 45)}\n        isDateDisabled={(d) => d.getDay() === 0 || booked.has(toDateKey(d))}\n        showOutsideDays\n        fixedWeeks\n      />\n      <Ink tone=\"muted\" style={s.muted}>\n        {date ? `Next: choose a time on ${day(date)}` : 'Faded days are fully booked or closed on Sundays.'}\n      </Ink>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "WeekStartsMonday",
       "title": "Week Starts Monday",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function WeekStartsMonday({ screen }: DemoProps) {\n  const [days, setDays] = useState<Date[]>([addDays(today, 1), addDays(today, 3)]);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Training days · pick up to 3</Ink>\n      <Calendar mode=\"multiple\" value={days} onChange={setDays} max={3} weekStartsOn={1} locale=\"en-GB\" showOutsideDays />\n      <Ink tone=\"muted\" style={s.muted}>{days.length ? days.map((d) => day(d)).join('  ·  ') : 'No sessions planned'}</Ink>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\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 today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', columnGap: 12, rowGap: 2 },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function WeekStartsMonday({ screen }: DemoProps) {\n  const [days, setDays] = useState<Date[]>([addDays(today, 1), addDays(today, 3)]);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Training days · pick up to 3</Ink>\n      <Calendar mode=\"multiple\" value={days} onChange={setDays} max={3} weekStartsOn={1} locale=\"en-GB\" showOutsideDays />\n      <Ink tone=\"muted\" style={s.muted}>{days.length ? days.map((d) => day(d)).join('  ·  ') : 'No sessions planned'}</Ink>\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/card.json

@@ -110,7 +110,7 @@
     {
       "name": "Default",
       "title": "Default",
-      "code": "import { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\nimport { useKit } from '@/lib/kit';\n\nexport default function Default() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Card.Header action={<Text style={{ fontSize: 18, color: colors.mutedForeground }}>⋯</Text>}>\n        <Card.Title>Invite your team</Card.Title>\n        <Card.Description>Collaborators can edit boards, leave comments and see version history.</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>3 of 10 seats used on the Starter plan</Text>\n      </Card.Content>\n      <Card.Footer>\n        <Button variant=\"outline\" size=\"sm\">Copy link</Button>\n        <Button variant=\"accent\" size=\"sm\">Send invites</Button>\n      </Card.Footer>\n    </Card>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\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\nexport default function Default() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Card.Header action={<Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 18, color: colors.mutedForeground }}>⋯</Text>}>\n        <Card.Title>Invite your team</Card.Title>\n        <Card.Description>Collaborators can edit boards, leave comments and see version history.</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>3 of 10 seats used on the Starter plan</Text>\n      </Card.Content>\n      <Card.Footer>\n        <Button variant=\"outline\" size=\"sm\">Copy link</Button>\n        <Button variant=\"accent\" size=\"sm\">Send invites</Button>\n      </Card.Footer>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Variants",

package/registry/_docs/chip-group.json

@@ -121,7 +121,7 @@
     {
       "name": "Scrollable",
       "title": "Scrollable",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Scrollable() {\n  const [picked, setPicked] = useState<string[]>(['all']);\n  return (\n    <ChipGroup\n      scrollable\n      deselectable={false}\n      value={picked}\n      onValueChange={setPicked}\n      options={[\n        { value: 'all', label: 'All' },\n        { value: 'coffee', label: 'Coffee', icon: <Text>☕️</Text> },\n        { value: 'bakery', label: 'Bakery', icon: <Text>🥐</Text> },\n        { value: 'brunch', label: 'Brunch', icon: <Text>🍳</Text> },\n        { value: 'pizza', label: 'Pizza', icon: <Text>🍕</Text> },\n        { value: 'sushi', label: 'Sushi', icon: <Text>🍣</Text> },\n      ]}\n    />\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { ChipGroup } from '@/components/ui/chip-group';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\nexport default function Scrollable() {\n  const [picked, setPicked] = useState<string[]>(['all']);\n  return (\n    <ChipGroup\n      scrollable\n      deselectable={false}\n      value={picked}\n      onValueChange={setPicked}\n      options={[\n        { value: 'all', label: 'All' },\n        { value: 'coffee', label: 'Coffee', icon: <Text maxFontSizeMultiplier={FONT_CAP}>☕️</Text> },\n        { value: 'bakery', label: 'Bakery', icon: <Text maxFontSizeMultiplier={FONT_CAP}>🥐</Text> },\n        { value: 'brunch', label: 'Brunch', icon: <Text maxFontSizeMultiplier={FONT_CAP}>🍳</Text> },\n        { value: 'pizza', label: 'Pizza', icon: <Text maxFontSizeMultiplier={FONT_CAP}>🍕</Text> },\n        { value: 'sushi', label: 'Sushi', icon: <Text maxFontSizeMultiplier={FONT_CAP}>🍣</Text> },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "Sizes",

package/registry/_docs/confetti.json

@@ -86,17 +86,17 @@
     {
       "name": "Celebrate",
       "title": "Celebrate",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\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\nexport default function Celebrate({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 420, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\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\nexport default function Celebrate({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 420, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 44 }}>🎉</Text>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Rain",
       "title": "Rain",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\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\nexport default function Rain({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\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\nexport default function Rain({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
     },
     {
       "name": "TapToPop",
       "title": "Tap To Pop",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\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\nexport default function TapToPop({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\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\nexport default function TapToPop({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/date-picker.json

@@ -248,22 +248,22 @@
     {
       "name": "Birthday",
       "title": "Birthday",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Birthday({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date | null>(new Date(1994, 5, 12));\n  const age = date ? Math.floor((today.getTime() - date.getTime()) / (365.25 * 86400000)) : null;\n  const [opens, setOpens] = useState<Opens>('sheet');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Profile\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Date of birth\"\n        value={date}\n        onChange={setDate}\n        maxDate={today}\n        formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}\n        helper={age !== null ? `You're ${age}. Tap the month title to jump years.` : 'Used to personalise your plan.'}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text maxFontSizeMultiplier={FONT_CAP} style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { minHeight: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Birthday({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date | null>(new Date(1994, 5, 12));\n  const age = date ? Math.floor((today.getTime() - date.getTime()) / (365.25 * 86400000)) : null;\n  const [opens, setOpens] = useState<Opens>('sheet');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Profile\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Date of birth\"\n        value={date}\n        onChange={setDate}\n        maxDate={today}\n        formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}\n        helper={age !== null ? `You're ${age}. Tap the month title to jump years.` : 'Used to personalise your plan.'}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "TripDates",
       "title": "Trip Dates",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function TripDates({ screen }: DemoProps) {\n  const [trip, setTrip] = useState<DateRange | null>(null);\n  const nights = trip?.start && trip.end ? Math.round((trip.end.getTime() - trip.start.getTime()) / 86400000) : 0;\n  const [opens, setOpens] = useState<Opens>('dialog');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Trip · Kyoto\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        mode=\"range\"\n        label=\"Check-in – Check-out\"\n        title=\"When are you travelling?\"\n        placeholder=\"Add dates\"\n        value={trip}\n        onChange={setTrip}\n        presets\n        confirm\n        clearable\n        minDate={today}\n        success={nights ? `${nights} night${nights > 1 ? 's' : ''} · free cancellation until 48h before` : undefined}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text maxFontSizeMultiplier={FONT_CAP} style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { minHeight: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function TripDates({ screen }: DemoProps) {\n  const [trip, setTrip] = useState<DateRange | null>(null);\n  const nights = trip?.start && trip.end ? Math.round((trip.end.getTime() - trip.start.getTime()) / 86400000) : 0;\n  const [opens, setOpens] = useState<Opens>('dialog');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Trip · Kyoto\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        mode=\"range\"\n        label=\"Check-in – Check-out\"\n        title=\"When are you travelling?\"\n        placeholder=\"Add dates\"\n        value={trip}\n        onChange={setTrip}\n        presets\n        confirm\n        clearable\n        minDate={today}\n        success={nights ? `${nights} night${nights > 1 ? 's' : ''} · free cancellation until 48h before` : undefined}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Deadline",
       "title": "Deadline",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Deadline({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [due, setDue] = useState<Date | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [opens, setOpens] = useState<Opens>('popover');\n  return (\n    <Card screen={screen}>\n      <Header title=\"New task\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Due date\"\n        value={due}\n        onChange={setDue}\n        minDate={today}\n        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}\n        presets={[\n          { label: 'Tomorrow', value: () => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1) },\n          { label: 'End of month', value: () => new Date(today.getFullYear(), today.getMonth() + 1, 0) },\n        ]}\n        error={submitted && !due ? 'Pick a due date so the team can plan around it' : undefined}\n        helper=\"Weekdays only.\"\n      />\n      <Pressable\n        onPress={() => setSubmitted(true)}\n        style={({ pressed }) => [s.button, { backgroundColor: colors.accent, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}\n        accessibilityRole=\"button\"\n      >\n        <Text style={[s.buttonText, { color: colors.accentForeground }]}>Create task</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text maxFontSizeMultiplier={FONT_CAP} style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { minHeight: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Deadline({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [due, setDue] = useState<Date | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [opens, setOpens] = useState<Opens>('popover');\n  return (\n    <Card screen={screen}>\n      <Header title=\"New task\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Due date\"\n        value={due}\n        onChange={setDue}\n        minDate={today}\n        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}\n        presets={[\n          { label: 'Tomorrow', value: () => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1) },\n          { label: 'End of month', value: () => new Date(today.getFullYear(), today.getMonth() + 1, 0) },\n        ]}\n        error={submitted && !due ? 'Pick a due date so the team can plan around it' : undefined}\n        helper=\"Weekdays only.\"\n      />\n      <Pressable\n        onPress={() => setSubmitted(true)}\n        style={({ pressed }) => [s.button, { backgroundColor: colors.accent, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}\n        accessibilityRole=\"button\"\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.accentForeground }]}>Create task</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sizes({ screen }: DemoProps) {\n  const d = new Date(today.getFullYear(), today.getMonth(), 24);\n  return (\n    <Card screen={screen}>\n      <Ink tone=\"muted\" style={s.label}>Small</Ink>\n      <DatePicker size=\"sm\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Medium</Ink>\n      <DatePicker size=\"md\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Large</Ink>\n      <DatePicker size=\"lg\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Disabled</Ink>\n      <DatePicker disabled label=\"Invoice date\" defaultValue={d} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\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\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { minHeight: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sizes({ screen }: DemoProps) {\n  const d = new Date(today.getFullYear(), today.getMonth(), 24);\n  return (\n    <Card screen={screen}>\n      <Ink tone=\"muted\" style={s.label}>Small</Ink>\n      <DatePicker size=\"sm\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Medium</Ink>\n      <DatePicker size=\"md\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Large</Ink>\n      <DatePicker size=\"lg\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Disabled</Ink>\n      <DatePicker disabled label=\"Invoice date\" defaultValue={d} />\n    </Card>\n  );\n}\n"
     }
   ]
 }