@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/toast.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/toast.tsx"
   ],
+  "summary": "Sonner-style toasts whose tone icon draws itself while a hairline drains away.",
   "props": [
     [
       "toast(title, options?)",
@@ -116,46 +117,69 @@
       "Style for the <Toaster> host that fills the screen and positions the stack."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the stack to fan it out, swipe a toast sideways or toward the edge to dismiss it; timers and the drain line pause while you touch."
+    ],
+    [
+      "Motion",
+      "Tone icons draw their outline inside a halo; toast.promise() closes the spinning arc into the success or error mark. variant=\"island\" morphs like a Dynamic Island."
+    ],
+    [
+      "Reduced motion",
+      "Tone icons appear fully drawn without the spin or pop, and the island skips its squash and staggered morph."
+    ],
+    [
+      "Haptics",
+      "A success, warning or error notification when a toast of that type appears, landing as the loading circle closes; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "Each toast is an alert in a polite live region, labelled by its title and description, with action and Dismiss buttons."
+    ]
+  ],
+  "usage": "import { toast, Toaster } from '@/components/ui/toast';\n\n// once, at the root of your app\n<Toaster />\n\n// anywhere\ntoast.success('Invoice INV-0042 sent', { description: 'Maya will get it by email.' });",
   "examples": [
     {
       "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

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/treemap.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -26,5 +27,7 @@
       "Tile colours."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/waterfall.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/waterfall.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -32,5 +33,7 @@
       "Change labels."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/wheel-list.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/wheel-list.tsx"
   ],
+  "summary": "An iOS alarm-style picker whose rows curve away on a 3D cylinder.",
   "props": [
     [
       "data",
@@ -98,5 +99,24 @@
       "Style for the root (width)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Flick to spin and it snaps to a row; tap a row to scroll it into the band."
+    ],
+    [
+      "Motion",
+      "Each row rotates, scales and fades by its distance from the band, interpolated from the scroll position on the native driver."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element with increment / decrement actions; its value is the selected label, or \"3 / 12\" for custom rows."
+    ],
+    [
+      "Web",
+      "Browsers lack snap momentum, so it settles on the nearest row shortly after scrolling stops."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

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

@@ -119,7 +119,8 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
   if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');
   const { open: openValues, toggle, variant, tint } = 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);
@@ -168,11 +169,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 +210,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
           )}

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

@@ -134,7 +134,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 +248,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 +266,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 +296,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 numberOfLines={2} style={[styles.tileLabel, ff, { color: a.destructive ? colors.danger : colors.foreground }]}>
                     {a.label}
                   </Text>
                 </Row>
@@ -337,7 +338,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 +348,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 +380,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}

package/registry/action-sheet/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/alert/files/src/components/ui/alert.tsx

@@ -89,7 +89,8 @@ export function Alert({
   color,
   style,
 }: AlertProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const reduceMotion = useReduceMotion();
   const tones: Record<AlertVariant, string> = {
@@ -322,9 +323,9 @@ export function Alert({
     <>
       {iconNode}
       <View style={[styles.body, { paddingTop: textTop }]}>
-        {title ? <Text style={[styles.title, { color: fg }]}>{title}</Text> : null}
+        {title ? <Text style={[styles.title, ff, { color: fg }]}>{title}</Text> : null}
         {typeof description === 'string' ? (
-          <Text style={[styles.desc, { color: title ? sub : fg }]}>{description}</Text>
+          <Text style={[styles.desc, ff, { color: title ? sub : fg }]}>{description}</Text>
         ) : (
           description
         )}
@@ -443,6 +444,8 @@ function Pill({
   bg: string;
   fg: string;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
     <Pressable
       accessibilityRole="button"
@@ -455,7 +458,7 @@ function Pill({
         pressed ? { opacity: 0.75, transform: [{ scale: 0.97 }] } : null,
       ]}
     >
-      <Text style={[styles.pillText, { color: fg }]} numberOfLines={1}>
+      <Text style={[styles.pillText, ff, { color: fg }]} numberOfLines={1}>
         {action.label}
       </Text>
     </Pressable>

package/registry/alert/files/src/components/ui/button.tsx

@@ -116,7 +116,8 @@ export function Button({
   onPressOut,
   ...props
 }: ButtonProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const gid = 'btn' + useId().replace(/[^a-zA-Z0-9]/g, '');
   const scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
@@ -149,7 +150,7 @@ export function Button({
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -235,7 +236,7 @@ export function Button({
               <View style={styles.row}>
                 <ActivityIndicator size="small" color={fg} />
                 {size !== 'icon' && isTextNode(children) ? (
-                  <Text style={[styles.label, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
+                  <Text style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (

package/registry/alert/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/assistant-app.json

@@ -0,0 +1,49 @@
+{
+  "name": "assistant-app",
+  "type": "template",
+  "title": "AI assistant app",
+  "description": "A complete Expo Router app for an AI chat assistant: onboarding once, Apple / Google / email-code sign in, a streaming chat with suggestions and stop, conversation history, profile and settings.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics",
+    "expo-router",
+    "expo-splash-screen",
+    "expo-status-bar",
+    "react-native-safe-area-context",
+    "react-native-screens",
+    "@react-native-async-storage/async-storage"
+  ],
+  "registryDependencies": [
+    "kit",
+    "bottom-nav",
+    "onboarding",
+    "sign-in",
+    "chat",
+    "inbox",
+    "profile",
+    "settings"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/bottom-nav.tsx",
+    "components/blocks/onboarding.tsx",
+    "components/ui/button.tsx",
+    "components/ui/floating-input.tsx",
+    "components/ui/password-input.tsx",
+    "components/ui/otp-input.tsx",
+    "components/blocks/sign-in.tsx",
+    "components/blocks/chat.tsx",
+    "components/ui/avatar.tsx",
+    "components/ui/badge.tsx",
+    "components/ui/chip-group.tsx",
+    "components/ui/search-bar.tsx",
+    "components/ui/swipeable-row.tsx",
+    "components/blocks/inbox.tsx",
+    "components/blocks/profile.tsx",
+    "components/ui/segmented-control.tsx",
+    "components/ui/switch.tsx",
+    "components/blocks/settings.tsx"
+  ],
+  "filesDir": null
+}

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

@@ -131,7 +131,8 @@ export function Avatar({
   haptics = true,
   style,
 }: AvatarProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const px = resolveSize(size);
@@ -280,6 +281,7 @@ export function Avatar({
             numberOfLines={1}
             style={[
               styles.initials,
+              ff,
               {
                 color: ink,
                 fontSize: Math.max(9, px * (initials.length > 1 ? 0.37 : 0.42)),
@@ -448,7 +450,7 @@ export function Avatar({
           {badgeText ? (
             <Text
               allowFontScaling={false}
-              style={[styles.badgeText, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
+              style={[styles.badgeText, ff, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
             >
               {badgeText}
             </Text>
@@ -623,7 +625,8 @@ export function AvatarGroup({
   onPressMore,
   style,
 }: AvatarGroupProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const px = resolveSize(size);
   const bg = surface ?? colors.background;
@@ -699,7 +702,7 @@ export function AvatarGroup({
         <Text
           allowFontScaling={false}
           numberOfLines={1}
-          style={[styles.moreText, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
+          style={[styles.moreText, ff, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
         >
           +{extraText}
         </Text>

package/registry/avatar/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,
 };