@expokit/cli 0.3.0 → 0.4.1

package/registry/_docs/time-picker.json

@@ -238,32 +238,32 @@
     {
       "name": "Alarm",
       "title": "Alarm",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Alarm() {\n  const [time, setTime] = useState<TimeValue>({ hours: 6, minutes: 45 });\n  return (\n    <Card>\n      <View style={s.head}>\n        <View style={s.headText}>\n          <Ink style={s.title}>Wake up</Ink>\n          <Ink tone=\"muted\" style={s.meta}>Weekdays · Radar</Ink>\n        </View>\n        <Ink tone=\"muted\" style={s.meta}>{until(time)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12 />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Alarm({ screen }: DemoProps) {\n  const [time, setTime] = useState<TimeValue>({ hours: 6, minutes: 45 });\n  return (\n    <Card screen={screen}>\n      <View style={s.head}>\n        <View style={s.headText}>\n          <Ink style={s.title}>Wake up</Ink>\n          <Ink tone=\"muted\" style={s.meta}>Weekdays · Radar</Ink>\n        </View>\n        <Ink tone=\"muted\" style={[s.meta, { flexShrink: 1 }]}>{until(time)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12 />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Clock",
       "title": "Clock",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Clock() {\n  const { colors, radius } = useKit();\n  const [time, setTime] = useState<TimeValue>({ hours: 7, minutes: 30 });\n  return (\n    <Card>\n      <View style={s.headText}>\n        <Ink style={s.title}>Morning run</Ink>\n        <Ink tone=\"muted\" style={s.meta}>Tap the hour or minute, then drag the dial.</Ink>\n      </View>\n      <TimePicker variant=\"clock\" value={time} onChange={setTime} hour12 />\n      <View style={[s.note, { backgroundColor: colors.muted, borderRadius: radius.md }]}>\n        <Ink tone=\"muted\" style={s.meta}>Rings {until(time)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Clock({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [time, setTime] = useState<TimeValue>({ hours: 7, minutes: 30 });\n  return (\n    <Card screen={screen}>\n      <View style={s.headText}>\n        <Ink style={s.title}>Morning run</Ink>\n        <Ink tone=\"muted\" style={s.meta}>Tap the hour or minute, then drag the dial.</Ink>\n      </View>\n      <TimePicker variant=\"clock\" value={time} onChange={setTime} hour12 />\n      <View style={[s.note, { backgroundColor: colors.muted, borderRadius: radius.md }]}>\n        <Ink tone=\"muted\" style={s.meta}>Rings {until(time)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Appointment",
       "title": "Appointment",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Appointment() {\n  const { colors, radius } = useKit();\n  const [slot, setSlot] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Dr. Amara Okafor · Dermatology</Ink>\n      <TimePicker\n        variant=\"chips\"\n        value={slot}\n        onChange={setSlot}\n        hour12\n        startTime=\"09:00\"\n        endTime=\"18:00\"\n        minuteInterval={30}\n        bookedTimes={['09:30', '10:00', '11:30', '13:00', '14:30', '15:00', '17:30']}\n        disabledTimes={['12:00', '12:30']}\n        groupByPeriod\n      />\n      <Pressable\n        disabled={!slot}\n        style={[s.button, { backgroundColor: colors.accent, borderRadius: radius.md }, !slot && s.buttonOff]}\n        accessibilityRole=\"button\"\n      >\n        <Text style={[s.buttonText, { color: colors.accentForeground }]}>{slot ? `Book ${formatTime(slot)} · 30 min` : 'Choose a time'}</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 { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Appointment({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [slot, setSlot] = useState<TimeValue | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Dr. Amara Okafor · Dermatology</Ink>\n      <TimePicker\n        variant=\"chips\"\n        value={slot}\n        onChange={setSlot}\n        hour12\n        startTime=\"09:00\"\n        endTime=\"18:00\"\n        minuteInterval={30}\n        bookedTimes={['09:30', '10:00', '11:30', '13:00', '14:30', '15:00', '17:30']}\n        disabledTimes={['12:00', '12:30']}\n        groupByPeriod\n      />\n      <Pressable\n        disabled={!slot}\n        style={[s.button, { backgroundColor: colors.accent, borderRadius: radius.md }, !slot && s.buttonOff]}\n        accessibilityRole=\"button\"\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.accentForeground }]}>{slot ? `Book ${formatTime(slot)} · 30 min` : 'Choose a time'}</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Reminder",
       "title": "Reminder",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Reminder() {\n  const [time, setTime] = useState<TimeValue>({ hours: 21, minutes: 30 });\n  return (\n    <Card>\n      <View style={s.head}>\n        <Ink style={s.title}>Daily journal reminder</Ink>\n        <Ink tone=\"muted\" style={s.meta}>{formatTime(time, false)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12={false} minuteInterval={15} />\n      <Ink tone=\"muted\" style={s.hint}>24-hour clock, 15-minute steps.</Ink>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Reminder({ screen }: DemoProps) {\n  const [time, setTime] = useState<TimeValue>({ hours: 21, minutes: 30 });\n  return (\n    <Card screen={screen}>\n      <View style={s.head}>\n        <Ink style={[s.title, { flexShrink: 1 }]}>Daily journal reminder</Ink>\n        <Ink tone=\"muted\" style={s.meta}>{formatTime(time, false)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12={false} minuteInterval={15} />\n      <Ink tone=\"muted\" style={s.hint}>24-hour clock, 15-minute steps.</Ink>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "InSheet",
       "title": "In Sheet",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function InSheet() {\n  const [pickup, setPickup] = useState<TimeValue | null>({ hours: 18, minutes: 15 });\n  const [delivery, setDelivery] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Order #4821 · Green Basket</Ink>\n      <TimePicker presentation=\"sheet\" label=\"Pickup time\" title=\"When will you pick up?\" value={pickup} onChange={setPickup} minuteInterval={5} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"chips\"\n        label=\"Delivery slot\"\n        title=\"Choose a delivery slot\"\n        value={delivery}\n        onChange={setDelivery}\n        hour12\n        startTime=\"08:00\"\n        endTime=\"21:00\"\n        minuteInterval={60}\n        bookedTimes={['08:00', '12:00', '18:00']}\n        groupByPeriod\n        success={delivery ? 'Free delivery in this slot' : undefined}\n        helper=\"We'll text you when the driver is close.\"\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 { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function InSheet({ screen }: DemoProps) {\n  const [pickup, setPickup] = useState<TimeValue | null>({ hours: 18, minutes: 15 });\n  const [delivery, setDelivery] = useState<TimeValue | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Order #4821 · Green Basket</Ink>\n      <TimePicker presentation=\"sheet\" label=\"Pickup time\" title=\"When will you pick up?\" value={pickup} onChange={setPickup} minuteInterval={5} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"chips\"\n        label=\"Delivery slot\"\n        title=\"Choose a delivery slot\"\n        value={delivery}\n        onChange={setDelivery}\n        hour12\n        startTime=\"08:00\"\n        endTime=\"21:00\"\n        minuteInterval={60}\n        bookedTimes={['08:00', '12:00', '18:00']}\n        groupByPeriod\n        success={delivery ? 'Free delivery in this slot' : undefined}\n        helper=\"We'll text you when the driver is close.\"\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "ClockInSheet",
       "title": "Clock In Sheet",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function ClockInSheet() {\n  const [start, setStart] = useState<TimeValue | null>({ hours: 9, minutes: 0 });\n  const [end, setEnd] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Focus block · Thursday</Ink>\n      <TimePicker presentation=\"sheet\" variant=\"clock\" label=\"Starts\" title=\"Start time\" value={start} onChange={setStart} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"clock\"\n        label=\"Ends\"\n        title=\"End time\"\n        value={end}\n        onChange={setEnd}\n        minuteInterval={5}\n        hour12\n        helper=\"Snaps to 5-minute steps.\"\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 { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, borderWidth: 0, backgroundColor: colors.background }\n          : { 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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: 12, rowGap: 4 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { minHeight: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function ClockInSheet({ screen }: DemoProps) {\n  const [start, setStart] = useState<TimeValue | null>({ hours: 9, minutes: 0 });\n  const [end, setEnd] = useState<TimeValue | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Focus block · Thursday</Ink>\n      <TimePicker presentation=\"sheet\" variant=\"clock\" label=\"Starts\" title=\"Start time\" value={start} onChange={setStart} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"clock\"\n        label=\"Ends\"\n        title=\"End time\"\n        value={end}\n        onChange={setEnd}\n        minuteInterval={5}\n        hour12\n        helper=\"Snaps to 5-minute steps.\"\n      />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/timeline-chart.json

@@ -25,6 +25,12 @@
       "(v) => string",
       "compact",
       "Axis labels."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

package/registry/_docs/timeline.json

@@ -136,17 +136,17 @@
     {
       "name": "OrderTracking",
       "title": "Order Tracking",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function OrderTracking() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n        <View style={{ gap: 2 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>ORDER #4821</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Arriving today</Text>\n        </View>\n        <View\n          style={{\n            paddingHorizontal: 10,\n            paddingVertical: 4,\n            borderRadius: radius.capsule(24),\n            backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n          }}\n        >\n          <Text style={{ fontSize: 12.5, color: colors.accent }}>by 6 PM</Text>\n        </View>\n      </View>\n      <Timeline\n        items={[\n          { title: 'Ordered', time: 'Mon 9:12', description: 'Paid with Apple Pay · 2 items', icon: 'cart' },\n          { title: 'Packed', time: 'Tue 16:40', description: 'Left the Rotterdam warehouse', icon: 'package' },\n          {\n            title: 'Out for delivery',\n            time: '11:05',\n            description: 'Jonas is 6 stops away in a white van',\n            icon: 'truck',\n            status: 'current',\n          },\n          { title: 'Delivered', time: 'Est. 17:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function OrderTracking() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n        <View style={{ flexShrink: 1, gap: 2 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>ORDER #4821</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Arriving today</Text>\n        </View>\n        <View\n          style={{\n            paddingHorizontal: 10,\n            paddingVertical: 4,\n            borderRadius: radius.capsule(24),\n            backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n          }}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: colors.accent }}>by 6 PM</Text>\n        </View>\n      </View>\n      <Timeline\n        items={[\n          { title: 'Ordered', time: 'Mon 9:12', description: 'Paid with Apple Pay · 2 items', icon: 'cart' },\n          { title: 'Packed', time: 'Tue 16:40', description: 'Left the Rotterdam warehouse', icon: 'package' },\n          {\n            title: 'Out for delivery',\n            time: '11:05',\n            description: 'Jonas is 6 stops away in a white van',\n            icon: 'truck',\n            status: 'current',\n          },\n          { title: 'Delivered', time: 'Est. 17:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        ]}\n      />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Activity",
       "title": "Activity",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Activity() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      items={[\n        {\n          title: 'Priya Shah commented',\n          time: '2m',\n          avatar: { name: 'Priya Shah', src: 'https://i.pravatar.cc/120?img=32' },\n          status: 'current',\n          content: (\n            <View\n              style={{\n                padding: 12,\n                borderRadius: radius.md,\n                backgroundColor: alpha(colors.foreground, dark ? 0.06 : 0.035),\n              }}\n            >\n              <Text style={{ fontSize: 14, lineHeight: 20, color: colors.foreground }}>\n                Love the new onboarding — can we try the shorter headline on step two?\n              </Text>\n            </View>\n          ),\n        },\n        {\n          title: 'Marco Bianchi uploaded 3 photos',\n          time: '1h',\n          description: 'Moodboard · Autumn campaign',\n          avatar: { name: 'Marco Bianchi', src: 'https://i.pravatar.cc/120?img=15' },\n          image: { uri: 'https://picsum.photos/id/1043/800/450', aspectRatio: 16 / 9 },\n        },\n        {\n          title: 'Lena Fischer shared a file',\n          time: '3h',\n          avatar: { name: 'Lena Fischer' },\n          content: (\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 12,\n                padding: 12,\n                borderRadius: radius.md,\n                borderWidth: 1,\n                borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n                backgroundColor: colors.card,\n              }}\n            >\n              <View\n                style={{\n                  width: 36,\n                  height: 36,\n                  borderRadius: radius.sm,\n                  backgroundColor: alpha(colors.danger, 0.12),\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Text style={{ fontSize: 11, color: colors.danger }}>PDF</Text>\n              </View>\n              <View style={{ flex: 1 }}>\n                <Text numberOfLines={1} style={{ fontSize: 14, color: colors.foreground }}>Q4 brand guidelines.pdf</Text>\n                <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>4.2 MB · 18 pages</Text>\n              </View>\n            </View>\n          ),\n        },\n        { title: 'Nightly build failed', time: 'Yesterday', description: 'iOS · Signing certificate expired', status: 'error', icon: 'bug' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function Activity() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      items={[\n        {\n          title: 'Priya Shah commented',\n          time: '2m',\n          avatar: { name: 'Priya Shah', src: 'https://i.pravatar.cc/120?img=32' },\n          status: 'current',\n          content: (\n            <View\n              style={{\n                padding: 12,\n                borderRadius: radius.md,\n                backgroundColor: alpha(colors.foreground, dark ? 0.06 : 0.035),\n              }}\n            >\n              <Text style={{ fontSize: 14, lineHeight: 20, color: colors.foreground }}>\n                Love the new onboarding — can we try the shorter headline on step two?\n              </Text>\n            </View>\n          ),\n        },\n        {\n          title: 'Marco Bianchi uploaded 3 photos',\n          time: '1h',\n          description: 'Moodboard · Autumn campaign',\n          avatar: { name: 'Marco Bianchi', src: 'https://i.pravatar.cc/120?img=15' },\n          image: { uri: 'https://picsum.photos/id/1043/800/450', aspectRatio: 16 / 9 },\n        },\n        {\n          title: 'Lena Fischer shared a file',\n          time: '3h',\n          avatar: { name: 'Lena Fischer' },\n          content: (\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 12,\n                padding: 12,\n                borderRadius: radius.md,\n                borderWidth: 1,\n                borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n                backgroundColor: colors.card,\n              }}\n            >\n              <View\n                style={{\n                  width: 36,\n                  height: 36,\n                  borderRadius: radius.sm,\n                  backgroundColor: alpha(colors.danger, 0.12),\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 11, color: colors.danger }}>PDF</Text>\n              </View>\n              <View style={{ flex: 1 }}>\n                <Text numberOfLines={1} style={{ fontSize: 14, color: colors.foreground }}>Q4 brand guidelines.pdf</Text>\n                <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>4.2 MB · 18 pages</Text>\n              </View>\n            </View>\n          ),\n        },\n        { title: 'Nightly build failed', time: 'Yesterday', description: 'iOS · Signing certificate expired', status: 'error', icon: 'bug' },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "Release",
       "title": "Release",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Release() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      variant=\"card\"\n      items={[\n        { title: 'v3.0 — Widgets', time: 'Next week', description: 'Home-screen widgets for iOS and Android.', icon: 'rocket', status: 'upcoming' },\n        {\n          title: 'v2.4 — Offline mode',\n          time: 'Oct 8',\n          description: 'Edit notes without a connection; changes sync when you are back online.',\n          icon: 'star',\n          status: 'current',\n          content: (\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n              {['New', 'Sync', 'iOS', 'Android'].map((t) => (\n                <View\n                  key={t}\n                  style={{\n                    paddingHorizontal: 9,\n                    paddingVertical: 3,\n                    borderRadius: radius.capsule(22),\n                    backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n                  }}\n                >\n                  <Text style={{ fontSize: 12, color: colors.accent }}>{t}</Text>\n                </View>\n              ))}\n            </View>\n          ),\n        },\n        { title: 'v2.3.2 — Fixes', time: 'Sep 29', description: 'Fixed a crash when sharing large PDFs.', icon: 'bug' },\n        { title: 'v2.3 — Shared folders', time: 'Sep 12', description: 'Invite people to a folder and edit together.', icon: 'user' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function Release() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      variant=\"card\"\n      items={[\n        { title: 'v3.0 — Widgets', time: 'Next week', description: 'Home-screen widgets for iOS and Android.', icon: 'rocket', status: 'upcoming' },\n        {\n          title: 'v2.4 — Offline mode',\n          time: 'Oct 8',\n          description: 'Edit notes without a connection; changes sync when you are back online.',\n          icon: 'star',\n          status: 'current',\n          content: (\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n              {['New', 'Sync', 'iOS', 'Android'].map((t) => (\n                <View\n                  key={t}\n                  style={{\n                    paddingHorizontal: 9,\n                    paddingVertical: 3,\n                    borderRadius: radius.capsule(22),\n                    backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n                  }}\n                >\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.accent }}>{t}</Text>\n                </View>\n              ))}\n            </View>\n          ),\n        },\n        { title: 'v2.3.2 — Fixes', time: 'Sep 29', description: 'Fixed a crash when sharing large PDFs.', icon: 'bug' },\n        { title: 'v2.3 — Shared folders', time: 'Sep 12', description: 'Invite people to a folder and edit together.', icon: 'user' },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "Compact",
@@ -156,17 +156,17 @@
     {
       "name": "Support",
       "title": "Support",
-      "code": "import { Text, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Support() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Avatar size=\"sm\" name=\"Support\" status=\"online\" />\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Refund request #RF-2207</Text>\n      </View>\n      <Timeline\n        variant=\"compact\"\n        accent={colors.success}\n        items={[\n          { title: 'Request received', time: 'Oct 9' },\n          { title: 'Return label sent', time: 'Oct 9' },\n          { title: 'Card refund declined', time: 'Oct 12', status: 'error' },\n          { title: 'Refund to store credit', time: 'Now', status: 'current' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Support() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Avatar size=\"sm\" name=\"Support\" status=\"online\" />\n        <Text style={{ flexShrink: 1, fontSize: 15, color: colors.foreground }}>Refund request #RF-2207</Text>\n      </View>\n      <Timeline\n        variant=\"compact\"\n        accent={colors.success}\n        items={[\n          { title: 'Request received', time: 'Oct 9' },\n          { title: 'Return label sent', time: 'Oct 9' },\n          { title: 'Card refund declined', time: 'Oct 12', status: 'error' },\n          { title: 'Refund to store credit', time: 'Now', status: 'current' },\n        ]}\n      />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Journey",
       "title": "Journey",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function Journey() {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={{ height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>12 DAYS · 1,140 KM</Text>\n          <Text style={{ fontSize: 22, letterSpacing: -0.5, color: colors.foreground }}>Our journey through Portugal</Text>\n        </View>\n      }\n      items={[\n        { title: 'Landed in Lisbon', time: 'Day 1', description: 'Late flight, pastel de nata at the airport, tram 28 into Alfama before the rain.', images: [{ uri: pic('lisbon'), aspectRatio: 3 / 2 }], tags: ['Lisbon'] },\n        { title: 'Lost in Alfama', time: 'Day 2', description: 'Stairs, tiles, a fado bar that only had six chairs. We stayed until two.', images: [pic('alfama'), pic('tiles')] },\n        { title: 'Sintra day trip', time: 'Day 3', description: 'Fog on Pena Palace in the morning, sun in the Moorish castle by noon.', images: [pic('sintra'), pic('palace'), pic('forest'), pic('castle')] },\n        { title: 'Rented the car', time: 'Day 4', description: 'A tiny Fiat with a stubborn second gear. Named it Rosa.' },\n        { title: 'Comporta beaches', time: 'Day 5', description: 'Rice fields on one side, empty dunes on the other.', images: [{ uri: pic('dunes'), aspectRatio: 16 / 9 }], tags: ['Beach', 'Alentejo'] },\n        { title: 'Évora', time: 'Day 6', description: 'Roman temple at sunset and the quietest night of the trip.', images: [pic('evora'), pic('temple'), pic('plains')] },\n        { title: 'Wine in the Alentejo', time: 'Day 7', description: 'A cellar tour that turned into lunch with the owner’s family. Ordered a case home.' },\n        { title: 'Down to the Algarve', time: 'Day 8', description: 'Benagil caves by kayak — go early, the tour boats arrive at ten.', images: [pic('caves'), pic('kayak')], links: [{ label: 'Kayak rental we used', onPress: () => {} }] },\n        { title: 'Lagos', time: 'Day 9', description: 'Cliff walk to Ponta da Piedade and grilled sardines at the harbour.', images: [{ uri: pic('lagos'), aspectRatio: 3 / 2 }] },\n        { title: 'Long drive north', time: 'Day 10', description: 'Six hours, two coffee stops, one wrong turn into a cork forest.' },\n        { title: 'Porto', time: 'Day 11', status: 'current', description: 'Ribeira, the bridge at blue hour, port lodges across the river.', images: [pic('porto'), pic('bridge'), pic('river')], tags: ['Now'] },\n        { title: 'Douro Valley', time: 'Day 12', status: 'upcoming', description: 'Train along the river to Pinhão, then home.' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\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 pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function Journey({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={screen ? { flex: 1 } : { height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>12 DAYS · 1,140 KM</Text>\n          <Text style={{ fontSize: 22, letterSpacing: -0.5, color: colors.foreground }}>Our journey through Portugal</Text>\n        </View>\n      }\n      items={[\n        { title: 'Landed in Lisbon', time: 'Day 1', description: 'Late flight, pastel de nata at the airport, tram 28 into Alfama before the rain.', images: [{ uri: pic('lisbon'), aspectRatio: 3 / 2 }], tags: ['Lisbon'] },\n        { title: 'Lost in Alfama', time: 'Day 2', description: 'Stairs, tiles, a fado bar that only had six chairs. We stayed until two.', images: [pic('alfama'), pic('tiles')] },\n        { title: 'Sintra day trip', time: 'Day 3', description: 'Fog on Pena Palace in the morning, sun in the Moorish castle by noon.', images: [pic('sintra'), pic('palace'), pic('forest'), pic('castle')] },\n        { title: 'Rented the car', time: 'Day 4', description: 'A tiny Fiat with a stubborn second gear. Named it Rosa.' },\n        { title: 'Comporta beaches', time: 'Day 5', description: 'Rice fields on one side, empty dunes on the other.', images: [{ uri: pic('dunes'), aspectRatio: 16 / 9 }], tags: ['Beach', 'Alentejo'] },\n        { title: 'Évora', time: 'Day 6', description: 'Roman temple at sunset and the quietest night of the trip.', images: [pic('evora'), pic('temple'), pic('plains')] },\n        { title: 'Wine in the Alentejo', time: 'Day 7', description: 'A cellar tour that turned into lunch with the owner’s family. Ordered a case home.' },\n        { title: 'Down to the Algarve', time: 'Day 8', description: 'Benagil caves by kayak — go early, the tour boats arrive at ten.', images: [pic('caves'), pic('kayak')], links: [{ label: 'Kayak rental we used', onPress: () => {} }] },\n        { title: 'Lagos', time: 'Day 9', description: 'Cliff walk to Ponta da Piedade and grilled sardines at the harbour.', images: [{ uri: pic('lagos'), aspectRatio: 3 / 2 }] },\n        { title: 'Long drive north', time: 'Day 10', description: 'Six hours, two coffee stops, one wrong turn into a cork forest.' },\n        { title: 'Porto', time: 'Day 11', status: 'current', description: 'Ribeira, the bridge at blue hour, port lodges across the river.', images: [pic('porto'), pic('bridge'), pic('river')], tags: ['Now'] },\n        { title: 'Douro Valley', time: 'Day 12', status: 'upcoming', description: 'Train along the river to Pinhão, then home.' },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "DeliveryScroll",
       "title": "Delivery Scroll",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function DeliveryScroll() {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={{ height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>PARCEL DHL 4471 9902 31</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Out for delivery</Text>\n        </View>\n      }\n      items={[\n        { title: 'Order placed', time: 'Oct 6 · 18:22', description: 'Walnut desk lamp, linen shade · paid with Visa', icon: 'cart' },\n        { title: 'Payment confirmed', time: 'Oct 6 · 18:23', icon: 'tag' },\n        { title: 'Packed', time: 'Oct 7 · 10:40', description: 'Double-boxed with paper padding. Photo from the packing station:', icon: 'package', images: [{ uri: pic('parcel'), aspectRatio: 3 / 2 }] },\n        { title: 'Handed to carrier', time: 'Oct 7 · 16:05', description: 'Picked up from the Leipzig warehouse', icon: 'truck' },\n        { title: 'Left the sorting hub', time: 'Oct 8 · 02:14', description: 'Hauptumschlagbasis Leipzig', icon: 'truck' },\n        { title: 'Arrived in the Netherlands', time: 'Oct 9 · 07:50', description: 'Customs cleared, no fees due', icon: 'home' },\n        { title: 'Delivery attempt failed', time: 'Oct 10 · 14:31', description: 'No one home and no safe place. A card was left in the mailbox.', status: 'error', icon: 'home' },\n        { title: 'Rescheduled', time: 'Oct 10 · 19:02', description: 'You picked Monday, 12:00–18:00', icon: 'chat' },\n        { title: 'Out for delivery', time: '11:05', description: 'Jonas is 6 stops away in a white van', icon: 'truck', status: 'current', links: [{ label: 'Track on map', onPress: () => {} }] },\n        { title: 'Delivered', time: 'Est. 15:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        { title: 'Rate your delivery', status: 'upcoming', icon: 'star' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\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 pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function DeliveryScroll({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={screen ? { flex: 1 } : { height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>PARCEL DHL 4471 9902 31</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Out for delivery</Text>\n        </View>\n      }\n      items={[\n        { title: 'Order placed', time: 'Oct 6 · 18:22', description: 'Walnut desk lamp, linen shade · paid with Visa', icon: 'cart' },\n        { title: 'Payment confirmed', time: 'Oct 6 · 18:23', icon: 'tag' },\n        { title: 'Packed', time: 'Oct 7 · 10:40', description: 'Double-boxed with paper padding. Photo from the packing station:', icon: 'package', images: [{ uri: pic('parcel'), aspectRatio: 3 / 2 }] },\n        { title: 'Handed to carrier', time: 'Oct 7 · 16:05', description: 'Picked up from the Leipzig warehouse', icon: 'truck' },\n        { title: 'Left the sorting hub', time: 'Oct 8 · 02:14', description: 'Hauptumschlagbasis Leipzig', icon: 'truck' },\n        { title: 'Arrived in the Netherlands', time: 'Oct 9 · 07:50', description: 'Customs cleared, no fees due', icon: 'home' },\n        { title: 'Delivery attempt failed', time: 'Oct 10 · 14:31', description: 'No one home and no safe place. A card was left in the mailbox.', status: 'error', icon: 'home' },\n        { title: 'Rescheduled', time: 'Oct 10 · 19:02', description: 'You picked Monday, 12:00–18:00', icon: 'chat' },\n        { title: 'Out for delivery', time: '11:05', description: 'Jonas is 6 stops away in a white van', icon: 'truck', status: 'current', links: [{ label: 'Track on map', onPress: () => {} }] },\n        { title: 'Delivered', time: 'Est. 15:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        { title: 'Rate your delivery', status: 'upcoming', icon: 'star' },\n      ]}\n    />\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/toast.json

@@ -144,42 +144,42 @@
     {
       "name": "Default",
       "title": "Default",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Default() {\n  const to = { toaster: 'demo-default' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() => toast('Event created', { ...to, description: 'Friday, June 14 at 9:00 AM' })}\n        >\n          Default\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Changes saved', { ...to, description: 'Synced to all your devices.' })}\n        >\n          Success\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.warning('Storage almost full', { ...to, description: '92% of 15 GB used.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.error('Could not reach server', to)}>\n          Error\n        </Button>\n      </View>\n      <Toaster id=\"demo-default\" />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Default({ screen }: DemoProps) {\n  const to = { toaster: 'demo-default' };\n  return (\n    <Frame screen={screen}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() => toast('Event created', { ...to, description: 'Friday, June 14 at 9:00 AM' })}\n        >\n          Default\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Changes saved', { ...to, description: 'Synced to all your devices.' })}\n        >\n          Success\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.warning('Storage almost full', { ...to, description: '92% of 15 GB used.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.error('Could not reach server', to)}>\n          Error\n        </Button>\n      </View>\n      <Toaster id=\"demo-default\" />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "RichColors",
       "title": "Rich Colors",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function RichColors() {\n  const { colors } = useKit();\n  const to = { toaster: 'demo-rich' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.success}\n          onPress={() => toast.success('Payment received', { ...to, description: '₹18,500 from Acme Inc.' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.danger}\n          onPress={() => toast.error('Card declined', { ...to, description: 'Try another payment method.' })}\n        >\n          Error\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" color={colors.warning} onPress={() => toast.warning('You are offline', { ...to, description: 'Changes will sync when you reconnect.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" onPress={() => toast.info('New version available', { ...to, description: 'Restart to update to 4.2.' })}>\n          Info\n        </Button>\n      </View>\n      <Toaster id=\"demo-rich\" variant=\"rich\" />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function RichColors({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const to = { toaster: 'demo-rich' };\n  return (\n    <Frame screen={screen}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.success}\n          onPress={() => toast.success('Payment received', { ...to, description: '₹18,500 from Acme Inc.' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.danger}\n          onPress={() => toast.error('Card declined', { ...to, description: 'Try another payment method.' })}\n        >\n          Error\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" color={colors.warning} onPress={() => toast.warning('You are offline', { ...to, description: 'Changes will sync when you reconnect.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" onPress={() => toast.info('New version available', { ...to, description: 'Restart to update to 4.2.' })}>\n          Info\n        </Button>\n      </View>\n      <Toaster id=\"demo-rich\" variant=\"rich\" />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "Island",
       "title": "Island",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nexport default function Island() {\n  const to = { toaster: 'demo-island' };\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast.success('AirPods connected', { ...to, description: 'Battery 84% · Case 100%' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.error('Payment failed', {\n              ...to,\n              description: 'Your card ending 4242 was declined by the bank. Update your billing details to keep Pro.',\n              action: { label: 'Update', onPress: () => toast.info('Opening billing…', to) },\n            })\n          }\n        >\n          Error\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.promise(wait(2200), { loading: 'Sending to Maya…', success: 'Photo sent', error: 'Could not send' }, to)\n          }\n        >\n          Promise\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast('Maya Chen', { ...to, description: 'Running 5 min late, grab us a table?' })}\n        >\n          Message\n        </Button>\n      </View>\n      <Toaster id=\"demo-island\" variant=\"island\" />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nexport default function Island({ screen }: DemoProps) {\n  const to = { toaster: 'demo-island' };\n  return (\n    <Frame screen={screen} style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast.success('AirPods connected', { ...to, description: 'Battery 84% · Case 100%' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.error('Payment failed', {\n              ...to,\n              description: 'Your card ending 4242 was declined by the bank. Update your billing details to keep Pro.',\n              action: { label: 'Update', onPress: () => toast.info('Opening billing…', to) },\n            })\n          }\n        >\n          Error\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.promise(wait(2200), { loading: 'Sending to Maya…', success: 'Photo sent', error: 'Could not send' }, to)\n          }\n        >\n          Promise\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast('Maya Chen', { ...to, description: 'Running 5 min late, grab us a table?' })}\n        >\n          Message\n        </Button>\n      </View>\n      <Toaster id=\"demo-island\" variant=\"island\" />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "PromiseMorph",
       "title": "Promise Morph",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nconst fail = (ms: number) => new Promise<void>((_, reject) => setTimeout(() => reject(new Error('timeout')), ms));\n\nexport default function PromiseMorph() {\n  const to = { toaster: 'demo-promise' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() =>\n            toast.promise(\n              wait(1800),\n              { loading: 'Uploading report.pdf…', success: 'Report uploaded', error: 'Upload failed' },\n              { ...to, description: 'Q3 board pack · 4.2 MB' },\n            )\n          }\n        >\n          Upload (succeeds)\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() =>\n            toast\n              .promise(\n                fail(1800),\n                { loading: 'Publishing release…', success: 'Release published', error: 'Publish failed: build timed out' },\n                to,\n              )\n              .catch(() => {})\n          }\n        >\n          Publish (fails)\n        </Button>\n      </View>\n      <Toaster id=\"demo-promise\" />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nconst fail = (ms: number) => new Promise<void>((_, reject) => setTimeout(() => reject(new Error('timeout')), ms));\n\nexport default function PromiseMorph({ screen }: DemoProps) {\n  const to = { toaster: 'demo-promise' };\n  return (\n    <Frame screen={screen}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() =>\n            toast.promise(\n              wait(1800),\n              { loading: 'Uploading report.pdf…', success: 'Report uploaded', error: 'Upload failed' },\n              { ...to, description: 'Q3 board pack · 4.2 MB' },\n            )\n          }\n        >\n          Upload (succeeds)\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() =>\n            toast\n              .promise(\n                fail(1800),\n                { loading: 'Publishing release…', success: 'Release published', error: 'Publish failed: build timed out' },\n                to,\n              )\n              .catch(() => {})\n          }\n        >\n          Publish (fails)\n        </Button>\n      </View>\n      <Toaster id=\"demo-promise\" />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "Minimal",
       "title": "Minimal",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Minimal() {\n  const to = { toaster: 'demo-minimal' };\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast('Copied to clipboard', to)}>\n          Copy link\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.success('Added to favourites', to)}>\n          Favourite\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.loading('Syncing…', { ...to, id: 'sync', duration: 1500 })}>\n          Sync\n        </Button>\n      </View>\n      <Toaster id=\"demo-minimal\" variant=\"minimal\" position=\"top\" />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Minimal({ screen }: DemoProps) {\n  const to = { toaster: 'demo-minimal' };\n  return (\n    <Frame screen={screen} style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast('Copied to clipboard', to)}>\n          Copy link\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.success('Added to favourites', to)}>\n          Favourite\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.loading('Syncing…', { ...to, id: 'sync', duration: 1500 })}>\n          Sync\n        </Button>\n      </View>\n      <Toaster id=\"demo-minimal\" variant=\"minimal\" position=\"top\" />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "WithAction",
       "title": "With Action",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function WithAction() {\n  const to = { toaster: 'demo-action' };\n  return (\n    <Frame>\n      <Button\n        variant=\"destructive\"\n        size=\"sm\"\n        style={{ alignSelf: 'flex-start' }}\n        onPress={() =>\n          toast('Conversation archived', {\n            ...to,\n            description: 'Moved 12 messages to Archive.',\n            action: { label: 'Undo', onPress: () => toast.success('Conversation restored', to) },\n          })\n        }\n      >\n        Archive chat\n      </Button>\n      <Toaster id=\"demo-action\" closeButton duration={6000} />\n    </Frame>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function WithAction({ screen }: DemoProps) {\n  const to = { toaster: 'demo-action' };\n  return (\n    <Frame screen={screen}>\n      <Button\n        variant=\"destructive\"\n        size=\"sm\"\n        style={{ alignSelf: 'flex-start' }}\n        onPress={() =>\n          toast('Conversation archived', {\n            ...to,\n            description: 'Moved 12 messages to Archive.',\n            action: { label: 'Undo', onPress: () => toast.success('Conversation restored', to) },\n          })\n        }\n      >\n        Archive chat\n      </Button>\n      <Toaster id=\"demo-action\" closeButton duration={6000} />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "Expanded",
       "title": "Expanded",
-      "code": "import React, { useRef } from 'react';\nimport { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Expanded() {\n  const to = { toaster: 'demo-expanded' };\n  const messages = [\n    () => toast.info('Maya joined #design', to),\n    () => toast.success('Build #1824 passed', { ...to, description: 'main · 3m 12s' }),\n    () => toast('Invoice INV-0042 sent', to),\n    () => toast.warning('Disk usage at 85%', to),\n  ];\n  const n = useRef(0);\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <Button size=\"sm\" style={{ alignSelf: 'flex-start' }} onPress={() => messages[n.current++ % messages.length]()}>\n        Send notification\n      </Button>\n      <Toaster id=\"demo-expanded\" position=\"top\" expand visibleToasts={3} gap={8} />\n    </Frame>\n  );\n}\n"
+      "code": "import React, { useRef } from 'react';\nimport { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Expanded({ screen }: DemoProps) {\n  const to = { toaster: 'demo-expanded' };\n  const messages = [\n    () => toast.info('Maya joined #design', to),\n    () => toast.success('Build #1824 passed', { ...to, description: 'main · 3m 12s' }),\n    () => toast('Invoice INV-0042 sent', to),\n    () => toast.warning('Disk usage at 85%', to),\n  ];\n  const n = useRef(0);\n  return (\n    <Frame screen={screen} style={{ justifyContent: 'flex-end' }}>\n      <Button size=\"sm\" style={{ alignSelf: 'flex-start' }} onPress={() => messages[n.current++ % messages.length]()}>\n        Send notification\n      </Button>\n      <Toaster id=\"demo-expanded\" position=\"top\" expand visibleToasts={3} gap={8} />\n    </Frame>\n  );\n}\n"
     },
     {
       "name": "WithProvider",
       "title": "With Provider",
-      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nfunction ProviderDemo() {\n  const toast = useToast();\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Draft saved', { description: 'Only this Toaster sees it.' })}\n        >\n          Save draft\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast('Reminder set for 6:00 PM')}>\n          Remind me\n        </Button>\n      </View>\n      <Toaster />\n    </Frame>\n  );\n}\n\nexport default function WithProvider() {\n  return (\n    <ToastProvider>\n      <ProviderDemo />\n    </ToastProvider>\n  );\n}\n"
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\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 frame that follows the kit theme, so the docs radius / accent picker reshapes it too. In screen mode it is the screen. */\nfunction Frame({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              height: 300,\n              overflow: 'hidden',\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nfunction ProviderDemo({ screen }: { screen?: boolean }) {\n  const toast = useToast();\n  return (\n    <Frame screen={screen}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Draft saved', { description: 'Only this Toaster sees it.' })}\n        >\n          Save draft\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast('Reminder set for 6:00 PM')}>\n          Remind me\n        </Button>\n      </View>\n      <Toaster />\n    </Frame>\n  );\n}\n\nexport default function WithProvider({ screen }: DemoProps) {\n  return (\n    <ToastProvider>\n      <ProviderDemo screen={screen} />\n    </ToastProvider>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/treemap.json

@@ -25,6 +25,12 @@
       "string[]",
       "theme palette",
       "Tile colours."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

package/registry/_docs/waterfall.json

@@ -31,6 +31,12 @@
       "boolean",
       "true",
       "Change labels."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

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

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   StyleSheet,
@@ -36,6 +37,7 @@ interface Ctx {
   toggle: (v: string) => void;
   variant: AccordionVariant;
   tint: string;
+  reduce: boolean;
 }
 const AccordionContext = createContext<Ctx | null>(null);
 const PositionContext = createContext({ first: true, last: true });
@@ -53,6 +55,7 @@ export function Accordion({
   style,
 }: AccordionProps) {
   const { colors, radius } = useKit();
+  const reduce = useReduceMotion();
   const [inner, setInner] = useState(defaultValue);
   const open = value ?? inner;
   const openRef = useRef(open);
@@ -72,7 +75,10 @@ export function Accordion({
     [type, collapsible, value, onValueChange]
   );
 
-  const ctx = useMemo(() => ({ open, toggle, variant, tint: accent ?? colors.accent }), [open, toggle, variant, accent, colors.accent]);
+  const ctx = useMemo(
+    () => ({ open, toggle, variant, tint: accent ?? colors.accent, reduce }),
+    [open, toggle, variant, accent, colors.accent, reduce]
+  );
   const items = React.Children.toArray(children);
 
   return (
@@ -117,9 +123,10 @@ export interface AccordionItemProps {
 export function AccordionItem({ value, title, subtitle, icon, children, disabled, style }: AccordionItemProps) {
   const ctx = useContext(AccordionContext);
   if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');
-  const { open: openValues, toggle, variant, tint } = ctx;
+  const { open: openValues, toggle, variant, tint, reduce } = ctx;
   const { last } = useContext(PositionContext);
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const open = openValues.includes(value);
 
   const [height, setHeight] = useState(0);
@@ -128,9 +135,15 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
   const turn = useRef(new Animated.Value(open ? 1 : 0)).current;
 
   useEffect(() => {
+    // Reduce Motion: open and close at once, chevron flips without turning.
+    if (reduce) {
+      progress.setValue(open ? 1 : 0);
+      turn.setValue(open ? 1 : 0);
+      return;
+    }
     Animated.spring(progress, { toValue: open ? 1 : 0, useNativeDriver: false, ...motion.gentle, overshootClamping: true }).start();
     Animated.spring(turn, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [open, progress, turn]);
+  }, [open, progress, turn, reduce]);
 
   const onLayout = (e: LayoutChangeEvent) => {
     const h = Math.ceil(e.nativeEvent.layout.height);
@@ -168,11 +181,11 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
         {icon ? <View style={styles.icon}>{icon}</View> : null}
         <View style={styles.titles}>
           {isTextNode(title) ? (
-            <Text style={[styles.title, { color: open && variant === 'default' ? tint : colors.foreground }]}>{title}</Text>
+            <Text style={[styles.title, ff, { color: open && variant === 'default' ? tint : colors.foreground }]}>{title}</Text>
           ) : (
             title
           )}
-          {subtitle ? <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>{subtitle}</Text> : null}
+          {subtitle ? <Text style={[styles.subtitle, ff, { color: colors.mutedForeground }]}>{subtitle}</Text> : null}
         </View>
         <Animated.View
           style={{ transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }] }}
@@ -209,7 +222,7 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
           ]}
         >
           {isTextNode(children) ? (
-            <Text style={[styles.text, { color: colors.mutedForeground }]}>{children}</Text>
+            <Text style={[styles.text, ff, { color: colors.mutedForeground }]}>{children}</Text>
           ) : (
             children
           )}
@@ -221,6 +234,22 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
 
 Accordion.Item = AccordionItem;
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   separated: { gap: 10 },
   header: { flexDirection: 'row', alignItems: 'center', minHeight: 56, paddingVertical: 14, gap: 12 },

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

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * 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.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

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

@@ -104,6 +104,9 @@ export interface ActionSheetProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const DEFAULT_BOTTOM_INSET = Platform.select({ ios: 20, android: 12, default: 16 }) ?? 16;
 
 /** iOS-style resistance: moves 1:1 at first, then ever more slowly towards `limit`. */
@@ -134,7 +137,8 @@ export function ActionSheet({
   haptics = true,
   style,
 }: ActionSheetProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const { height: winH } = useWindowDimensions();
   const reduceMotion = useReduceMotion();
   const tint = accent ?? colors.accent;
@@ -247,13 +251,13 @@ export function ActionSheet({
         {title ? (
           <Text
             accessibilityRole="header"
-            style={[list ? styles.titleLarge : styles.title, { color: list ? colors.foreground : colors.mutedForeground }]}
+            style={[list ? styles.titleLarge : styles.title, ff, { color: list ? colors.foreground : colors.mutedForeground }]}
           >
             {title}
           </Text>
         ) : null}
         {message ? (
-          <Text style={[styles.message, { color: colors.mutedForeground, textAlign: list ? 'left' : 'center' }]}>
+          <Text style={[styles.message, ff, { color: colors.mutedForeground, textAlign: list ? 'left' : 'center' }]}>
             {message}
           </Text>
         ) : null}
@@ -265,7 +269,7 @@ export function ActionSheet({
     cancelLabel !== null ? (
       <Card corner={corner} bg={colors.popover} edge={edge} dark={dark}>
         <Row onPress={dismiss} highlight={highlight} label={cancelLabel} style={styles.row}>
-          <Text style={[styles.rowLabel, styles.center, { color: variant === 'inset' ? tint : colors.foreground }]}>
+          <Text style={[styles.rowLabel, ff, styles.center, { color: variant === 'inset' ? tint : colors.foreground }]}>
             {cancelLabel}
           </Text>
         </Row>
@@ -295,7 +299,7 @@ export function ActionSheet({
                   <View style={[styles.tileIcon, { backgroundColor: fill, borderRadius: radius.scale(16) }]}>
                     {icon(a, fg, 24)}
                   </View>
-                  <Text numberOfLines={2} style={[styles.tileLabel, { color: a.destructive ? colors.danger : colors.foreground }]}>
+                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={2} style={[styles.tileLabel, ff, { color: a.destructive ? colors.danger : colors.foreground }]}>
                     {a.label}
                   </Text>
                 </Row>
@@ -337,7 +341,7 @@ export function ActionSheet({
               {a.icon ? (
                 <View style={styles.listIcon}>{icon(a, a.destructive ? colors.danger : colors.mutedForeground, 22)}</View>
               ) : null}
-              <Text style={[styles.listLabel, { color }]} numberOfLines={1}>
+              <Text style={[styles.listLabel, ff, { color }]} numberOfLines={1}>
                 {a.label}
               </Text>
             </Row>
@@ -347,7 +351,7 @@ export function ActionSheet({
           <>
             <View style={[styles.divider, { backgroundColor: separator }]} />
             <Row onPress={dismiss} highlight={highlight} corner={radius.md} label={cancelLabel} style={styles.listRow}>
-              <Text style={[styles.listLabel, styles.center, { color: colors.mutedForeground }]}>{cancelLabel}</Text>
+              <Text style={[styles.listLabel, ff, styles.center, { color: colors.mutedForeground }]}>{cancelLabel}</Text>
             </Row>
           </>
         ) : null}
@@ -379,7 +383,7 @@ export function ActionSheet({
                   (i > 0 || header) && { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: separator },
                 ]}
               >
-                <Text style={[styles.rowLabel, withIcons ? styles.rowLabelMenu : styles.center, { color }]} numberOfLines={1}>
+                <Text style={[styles.rowLabel, ff, withIcons ? styles.rowLabelMenu : styles.center, { color }]} numberOfLines={1}>
                   {a.label}
                 </Text>
                 {withIcons ? <View style={styles.rowIcon}>{a.icon ? icon(a, color, 22) : null}</View> : null}