@expokit/cli 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@expokit/cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "shadcn-style CLI for Expo — add native UI blocks and components to your app",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "expo-kit": "bin/expo-kit.js"
+  },
+  "files": [
+    "bin",
+    "registry",
+    "schema",
+    "README.md"
+  ],
+  "keywords": [
+    "expo",
+    "react-native",
+    "cli",
+    "ui",
+    "shadcn",
+    "liquid-glass",
+    "native-tabs",
+    "expo-router"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://expokit.karandev.in",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Anshkaran7/expokit.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/Anshkaran7/expokit/issues"
+  },
+  "author": "anshkaran7",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "prepublishOnly": "node ../../scripts/build-registry.mjs"
+  }
+}

package/registry/_docs/accordion.json

@@ -0,0 +1,99 @@
+{
+  "name": "accordion",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Accordion",
+  "files": [
+    "src/components/ui/accordion.tsx"
+  ],
+  "props": [
+    [
+      "type",
+      "\"single\" | \"multiple\"",
+      "\"single\"",
+      "One open item at a time, or any number."
+    ],
+    [
+      "value / defaultValue",
+      "string[]",
+      "[]",
+      "Open item values (controlled / uncontrolled)."
+    ],
+    [
+      "onValueChange",
+      "(value: string[]) => void",
+      "—",
+      "Called when items open or close."
+    ],
+    [
+      "collapsible",
+      "boolean",
+      "true",
+      "Single mode: allow closing the open item."
+    ],
+    [
+      "variant",
+      "\"default\" | \"bordered\" | \"separated\"",
+      "\"default\"",
+      "Divided list, one bordered box, or separate cards."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Chevron colour of open items."
+    ],
+    [
+      "AccordionItem.value",
+      "string",
+      "—",
+      "Identifies the item in the Accordion's value array."
+    ],
+    [
+      "AccordionItem.title / subtitle",
+      "ReactNode / string",
+      "—",
+      "Header text."
+    ],
+    [
+      "AccordionItem.icon",
+      "ReactNode",
+      "—",
+      "Leading icon; content indents to line up with the title."
+    ],
+    [
+      "AccordionItem.disabled",
+      "boolean",
+      "false",
+      "Can't be toggled."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the Accordion's root view (the card in the bordered variant); AccordionItem takes its own."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Default",
+      "title": "Default",
+      "code": "import { Accordion, AccordionItem } from '@/components/ui/accordion';\n\nexport default function Default() {\n  return (\n    <Accordion defaultValue={['shipping']}>\n      <AccordionItem value=\"shipping\" title=\"How long does shipping take?\">\n        Orders leave our warehouse within 24 hours. Standard delivery takes 3–5 business days; express arrives the next day in most cities.\n      </AccordionItem>\n      <AccordionItem value=\"returns\" title=\"Can I return an item?\">\n        Yes — you have 30 days to send anything back for a full refund. Return labels are free and printable from your order page.\n      </AccordionItem>\n      <AccordionItem value=\"warranty\" title=\"Is there a warranty?\">\n        Every product comes with a two-year warranty covering manufacturing defects.\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"
+    },
+    {
+      "name": "Bordered",
+      "title": "Bordered",
+      "code": "import { Accordion, AccordionItem } from '@/components/ui/accordion';\n\nexport default function Bordered() {\n  return (\n    <Accordion variant=\"bordered\" type=\"multiple\" defaultValue={['account']}>\n      <AccordionItem value=\"account\" title=\"Account\" subtitle=\"Email, password, two-factor\">\n        Change your sign-in email, rotate your password and manage the devices that can approve logins.\n      </AccordionItem>\n      <AccordionItem value=\"billing\" title=\"Billing\" subtitle=\"Plan, invoices, payment method\">\n        You are on the Pro plan, renewing on 14 November. Invoices are emailed to finance@northwind.io.\n      </AccordionItem>\n      <AccordionItem value=\"danger\" title=\"Delete workspace\" subtitle=\"Owners only\" disabled>\n        This can't be undone.\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"
+    },
+    {
+      "name": "SeparatedCards",
+      "title": "Separated Cards",
+      "code": "import { Text, View } from 'react-native';\nimport { Accordion, AccordionItem } from '@/components/ui/accordion';\n\nexport default function SeparatedCards() {\n  return (\n    <Accordion variant=\"separated\">\n      {[\n        ['🔒', 'Is my data encrypted?', 'Everything is encrypted in transit with TLS 1.3 and at rest with AES-256. Keys rotate every 90 days.'],\n        ['💳', 'Do you offer refunds?', 'If ExpoKit is not for you, email us within 14 days of purchase and we will refund you in full.'],\n        ['🌍', 'Which regions do you host in?', 'Frankfurt, Virginia and Singapore. Pick a region when you create a project.'],\n      ].map(([icon, q, a]) => (\n        <AccordionItem key={q} value={q} title={q} icon={<Text style={{ fontSize: 18 }}>{icon}</Text>}>\n          {a}\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
+    },
+    {
+      "name": "Controlled",
+      "title": "Controlled",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Accordion, AccordionItem } from '@/components/ui/accordion';\nimport { useKit } from '@/lib/kit';\n\nexport default function Controlled() {\n  const { colors } = useKit();\n  const [open, setOpen] = useState<string[]>([]);\n  return (\n    <View style={{ gap: 10 }}>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Open: {open.length ? open.join(', ') : 'none'}</Text>\n      <Accordion variant=\"bordered\" type=\"multiple\" value={open} onValueChange={setOpen}>\n        <AccordionItem value=\"Ingredients\" title=\"Ingredients\">\n          <View style={{ gap: 6 }}>\n            {['200 g spaghetti', '2 egg yolks + 1 whole egg', '60 g pecorino romano', '120 g guanciale', 'Black pepper'].map((x) => (\n              <Text key={x} style={{ fontSize: 14.5, color: colors.mutedForeground }}>• {x}</Text>\n            ))}\n          </View>\n        </AccordionItem>\n        <AccordionItem value=\"Method\" title=\"Method\">\n          Crisp the guanciale, toss with hot pasta off the heat, then stir in the egg and cheese with a splash of pasta water until glossy.\n        </AccordionItem>\n      </Accordion>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/action-sheet.json

@@ -0,0 +1,110 @@
+{
+  "name": "action-sheet",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "ActionSheet",
+  "files": [
+    "src/components/ui/action-sheet.tsx"
+  ],
+  "props": [
+    [
+      "open / defaultOpen",
+      "boolean",
+      "false",
+      "Controlled / uncontrolled visibility."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called on actions, Cancel, backdrop tap, drag-down, back and Escape."
+    ],
+    [
+      "actions",
+      "{ label, icon?, destructive?, disabled?, color?, onPress? }[]",
+      "—",
+      "The options. `icon` is a built-in name (camera, image, trash, reply, forward, copy, pin, edit, share, link, mail, …) or a node; destructive rows use the danger colour; return false from onPress to stay open; `color` tints grid tiles."
+    ],
+    [
+      "title / message",
+      "string",
+      "—",
+      "Header text above the actions."
+    ],
+    [
+      "cancelLabel",
+      "string | null",
+      "\"Cancel\"",
+      "Separate cancel button; null hides it."
+    ],
+    [
+      "onCancel",
+      "() => void",
+      "—",
+      "Called on Cancel, backdrop tap and drag-to-dismiss."
+    ],
+    [
+      "variant",
+      "\"inset\" | \"list\" | \"grid\"",
+      "\"inset\"",
+      "iOS grouped cards (text-only rows centred in the accent; rows with icons read like a menu), Material edge-to-edge list with a drag handle, or share-sheet tiles."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "platform safe inset",
+      "Padding above the home indicator; pass useSafeAreaInsets().bottom for the device."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Colour of text-only actions and Cancel in the inset variant."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Close on scrim tap, drag, back and Escape. When false the sheet only rubber-bands."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light impact on open, selection tick when an action is picked."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Sheet container style."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Photo",
+      "title": "Photo",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Avatar } from '@/components/ui/avatar';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function Photo() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState('Tap the photo to change it');\n  return (\n    <View style={{ alignItems: 'center', gap: 12 }}>\n      <Avatar name=\"Maya Patel\" size=\"xl\" ring=\"accent\" onPress={() => setOpen(true)} />\n      <Text style={muted}>{status}</Text>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Profile photo\"\n        message=\"Your photo is visible to everyone in Northwind.\"\n        actions={[\n          { label: 'Take photo', onPress: () => setStatus('Opening camera…') },\n          { label: 'Choose from library', onPress: () => setStatus('Opening library…') },\n          { label: 'Remove photo', destructive: true, onPress: () => setStatus('Photo removed') },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "MessageActions",
+      "title": "Message Actions",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function MessageActions() {\n  const { colors, radius } = useKit();\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [pinned, setPinned] = useState(false);\n  const [status, setStatus] = useState('Long-press the message');\n  return (\n    <View style={{ alignSelf: 'stretch', gap: 12, paddingHorizontal: 16 }}>\n      <Pressable\n        onLongPress={() => setOpen(true)}\n        delayLongPress={300}\n        accessibilityRole=\"button\"\n        accessibilityHint=\"Long-press for message actions\"\n        style={({ pressed }) => ({\n          alignSelf: 'flex-end',\n          maxWidth: '82%',\n          paddingHorizontal: 14,\n          paddingVertical: 10,\n          borderRadius: radius.scale(20),\n          borderBottomRightRadius: radius.scale(6),\n          backgroundColor: colors.accent,\n          transform: [{ scale: pressed ? 0.97 : 1 }],\n        })}\n      >\n        <Text style={{ color: readableOn(colors.accent), fontSize: 15, lineHeight: 20 }}>\n          Running 10 min late — grab us a table by the window?\n        </Text>\n      </Pressable>\n      <Text style={muted}>{status}</Text>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        actions={[\n          { label: 'Reply', icon: 'reply', onPress: () => setStatus('Replying to Maya') },\n          { label: 'Forward', icon: 'forward', onPress: () => setStatus('Choose a chat') },\n          { label: 'Copy text', icon: 'copy', onPress: () => setStatus('Copied to clipboard') },\n          {\n            label: pinned ? 'Unpin' : 'Pin',\n            icon: 'pin',\n            onPress: () => {\n              setPinned((p) => !p);\n              setStatus(pinned ? 'Unpinned' : 'Pinned to the top of the chat');\n            },\n          },\n          { label: 'Edit', icon: 'edit', disabled: true },\n          { label: 'Delete for everyone', icon: 'trash', destructive: true, onPress: () => setStatus('Message deleted') },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Share",
+      "title": "Share",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Button } from '@/components/ui/button';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function Share() {\n  const { colors } = useKit();\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Share trip\n      </Button>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        variant=\"grid\"\n        title=\"Share “Lisbon, May 12–16”\"\n        actions={[\n          { label: 'Messages', icon: 'message', color: colors.success },\n          { label: 'Mail', icon: 'mail', color: colors.accent },\n          { label: 'Send to…', icon: 'send', color: colors.primary },\n          { label: 'Copy link', icon: 'link' },\n          { label: 'Save PDF', icon: 'download' },\n          { label: 'Print', icon: 'printer' },\n          { label: 'Invite', icon: 'user' },\n          { label: 'More', icon: 'more' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "PostOptions",
+      "title": "Post Options",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Button } from '@/components/ui/button';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function PostOptions() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [saved, setSaved] = useState(false);\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Post options\n      </Button>\n      <Text style={muted}>{saved ? 'Saved to your collection' : 'Material list with icons'}</Text>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        variant=\"list\"\n        title=\"Jonas’s post\"\n        cancelLabel={null}\n        actions={[\n          { label: 'Edit post', icon: 'edit' },\n          { label: saved ? 'Remove from saved' : 'Save post', icon: 'bookmark', onPress: () => setSaved((s) => !s) },\n          { label: 'Copy link', icon: 'copy' },\n          { label: 'Hide from feed', icon: 'eye-off' },\n          { label: 'Report post', icon: 'flag', destructive: true },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "DiscardDraft",
+      "title": "Discard Draft",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Button } from '@/components/ui/button';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function DiscardDraft() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [result, setResult] = useState('');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"secondary\" onPress={() => setOpen(true)}>\n        Close editor\n      </Button>\n      {result ? <Text style={muted}>{result}</Text> : null}\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        message=\"You have unsaved changes to “Weekly update”. Save them as a draft?\"\n        onCancel={() => setResult('Kept editing')}\n        cancelLabel=\"Keep editing\"\n        actions={[\n          { label: 'Discard changes', destructive: true, onPress: () => setResult('Changes discarded') },\n          { label: 'Save draft', onPress: () => setResult('Draft saved') },\n          { label: 'Schedule post', disabled: true },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/alert.json

@@ -0,0 +1,127 @@
+{
+  "name": "alert",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "Alert",
+  "files": [
+    "src/components/ui/alert.tsx"
+  ],
+  "props": [
+    [
+      "variant",
+      "\"info\" | \"success\" | \"warning\" | \"danger\"",
+      "\"info\"",
+      "Tone and living icon."
+    ],
+    [
+      "appearance",
+      "\"soft\" | \"outline\" | \"solid\" | \"accent-bar\"",
+      "\"soft\"",
+      "Card with a tone glow behind the icon, transparent with a hairline tone border, or filled with the solid tone. \"accent-bar\" is deprecated and renders as \"soft\"."
+    ],
+    [
+      "title",
+      "string",
+      "—",
+      "First line. Without a title (and without actions) the alert uses the compact single-line layout."
+    ],
+    [
+      "description",
+      "ReactNode",
+      "—",
+      "Supporting text."
+    ],
+    [
+      "action",
+      "{ label, onPress } | ReactNode",
+      "—",
+      "One action: a tone pill under the text, or an inline pill on the right in the compact layout."
+    ],
+    [
+      "actions",
+      "{ primary: { label, onPress }, secondary?: { label, onPress } }",
+      "—",
+      "Pill pair on the bottom row; primary is filled with the tone."
+    ],
+    [
+      "icon",
+      "ReactNode | false",
+      "living tone icon",
+      "Custom icon (shown in the halo) or none."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "false",
+      "Show a 28pt close button (44pt hit area) that collapses the alert."
+    ],
+    [
+      "duration",
+      "number (ms)",
+      "—",
+      "Auto-dismiss. A hairline drains along the bottom edge; pauses while pressed or hovered."
+    ],
+    [
+      "visible",
+      "boolean",
+      "—",
+      "Controlled visibility (animated)."
+    ],
+    [
+      "onDismiss",
+      "() => void",
+      "—",
+      "Called when closed by the button or when `duration` runs out."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "false",
+      "Notification haptic (success / warning / error) when the alert appears."
+    ],
+    [
+      "color",
+      "string",
+      "tone colour",
+      "Override the tone colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer animated wrapper (its height collapses on dismiss)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Soft",
+      "title": "Soft",
+      "code": "import { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\n\nexport default function Soft() {\n  return (\n    <View style={{ gap: 10 }}>\n      <Alert variant=\"info\" title=\"New sign-in method\" description=\"You can now use a passkey instead of your password.\" />\n      <Alert variant=\"success\" title=\"Payment received\" description=\"₹1,24,000 from Northwind Traders.\" />\n      <Alert variant=\"warning\" title=\"Storage almost full\" description=\"You've used 9.4 GB of your 10 GB plan.\" />\n      <Alert variant=\"danger\" title=\"Sync failed\" description=\"We couldn't reach the server. Your edits are saved on this device.\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Appearances",
+      "title": "Appearances",
+      "code": "import { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\n\nexport default function Appearances() {\n  return (\n    <View style={{ gap: 10 }}>\n      <Alert variant=\"info\" appearance=\"outline\" title=\"Scheduled maintenance\" description=\"Sunday 02:00–03:00 UTC.\" />\n      <Alert variant=\"danger\" appearance=\"outline\" title=\"2 failed sign-in attempts\" description=\"Chrome on Windows · Berlin, DE\" />\n      <Alert variant=\"success\" appearance=\"solid\" title=\"Profile published\" description=\"Anyone with the link can view it.\" />\n      <Alert variant=\"warning\" appearance=\"solid\" title=\"Trial ends in 3 days\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "WithActions",
+      "title": "With Actions",
+      "code": "import { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\n\nexport default function WithActions() {\n  return (\n    <View style={{ gap: 10 }}>\n      <Alert\n        variant=\"info\"\n        title=\"Update available\"\n        description=\"Version 3.2 is ready. Restart to finish installing.\"\n        actions={{ primary: { label: 'Restart', onPress: () => {} }, secondary: { label: 'Later', onPress: () => {} } }}\n      />\n      <Alert\n        variant=\"danger\"\n        title=\"Payment declined\"\n        description=\"Your Visa ending 4242 was declined. Pro features pause on May 12.\"\n        actions={{ primary: { label: 'Update card', onPress: () => {} }, secondary: { label: 'Contact bank', onPress: () => {} } }}\n        dismissible\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "AutoDismiss",
+      "title": "Auto Dismiss",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { useKit } from '@/lib/kit';\n\nexport default function AutoDismiss() {\n  const { colors } = useKit();\n  const [visible, setVisible] = useState(true);\n  return (\n    <View style={{ gap: 12 }}>\n      <Alert\n        variant=\"success\"\n        title=\"Changes saved\"\n        description=\"Your team can see the new pricing page.\"\n        duration={6000}\n        dismissible\n        visible={visible}\n        onDismiss={() => setVisible(false)}\n      />\n      <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Closes in 6 s. Touch and hold to pause the timer.</Text>\n      <Button size=\"sm\" variant=\"outline\" style={{ alignSelf: 'flex-start' }} disabled={visible} onPress={() => setVisible(true)}>\n        Show again\n      </Button>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Dismissible",
+      "title": "Dismissible",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { useKit } from '@/lib/kit';\n\nexport default function Dismissible() {\n  const { colors } = useKit();\n  const [visible, setVisible] = useState(true);\n  return (\n    <View style={{ gap: 12 }}>\n      <Alert\n        variant=\"success\"\n        title=\"Backup complete\"\n        description=\"2,184 photos were saved to iCloud.\"\n        dismissible\n        visible={visible}\n        onDismiss={() => setVisible(false)}\n      />\n      <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Content below glides up when the alert collapses.</Text>\n      <Button size=\"sm\" variant=\"outline\" style={{ alignSelf: 'flex-start' }} disabled={visible} onPress={() => setVisible(true)}>\n        Show again\n      </Button>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Compact",
+      "title": "Compact",
+      "code": "import { Text, View } from 'react-native';\nimport { Alert } from '@/components/ui/alert';\n\nexport default function Compact() {\n  return (\n    <View style={{ gap: 10 }}>\n      <Alert variant=\"info\" description=\"Prices include VAT where applicable.\" />\n      <Alert variant=\"warning\" description=\"You're offline.\" action={{ label: 'Retry', onPress: () => {} }} />\n      <Alert variant=\"success\" description=\"Link copied to clipboard.\" dismissible />\n      <Alert variant=\"danger\" appearance=\"outline\" description=\"This action can't be undone.\" icon={false} />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/avatar.json

@@ -0,0 +1,203 @@
+{
+  "name": "avatar",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Avatar",
+  "files": [
+    "src/components/ui/avatar.tsx"
+  ],
+  "props": [
+    [
+      "src",
+      "string",
+      "—",
+      "Image URL. Fades in over the initials; falls back to them on error."
+    ],
+    [
+      "name",
+      "string",
+      "—",
+      "Initials, the deterministic fallback colour and the accessibility label."
+    ],
+    [
+      "size",
+      "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+      "\"md\"",
+      "24 / 32 / 40 / 56 / 72pt, or any number."
+    ],
+    [
+      "shape",
+      "\"circle\" | \"rounded\"",
+      "\"circle\"",
+      "Circle or rounded square (follows the kit radius)."
+    ],
+    [
+      "fallback",
+      "\"soft\" | \"solid\" | \"gradient\"",
+      "\"soft\"",
+      "Soft tint with deep ink, flat fill, or an opt-in two-tone gradient."
+    ],
+    [
+      "status",
+      "\"online\" | \"away\" | \"busy\" | \"offline\"",
+      "—",
+      "Presence dot in a ring cut-out: filled, crescent, bar, hollow."
+    ],
+    [
+      "pulse",
+      "boolean",
+      "true when online",
+      "Soft pulse behind the dot (off with reduce motion)."
+    ],
+    [
+      "ring",
+      "\"none\" | \"story\" | \"accent\" | \"seen\"",
+      "\"none\"",
+      "Solid accent ring with a clear gap. \"seen\" = story + seen."
+    ],
+    [
+      "seen",
+      "boolean",
+      "false",
+      "Story watched: the ring cross-fades to a quiet hairline."
+    ],
+    [
+      "ringColors",
+      "string[]",
+      "sunset",
+      "Ring colour override; the first entry is used as a solid colour."
+    ],
+    [
+      "ringSpin",
+      "boolean",
+      "false",
+      "Broken ring that spins — a loading story (circle only)."
+    ],
+    [
+      "verified",
+      "boolean",
+      "false",
+      "Rosette seal with a check, bottom-right (bottom-left if a status dot is shown)."
+    ],
+    [
+      "badge",
+      "number | boolean",
+      "—",
+      "Notification count (99+), or true for a dot, top-right."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the avatar; cut-outs and group borders use it."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Ring and verified seal colour."
+    ],
+    [
+      "elevated",
+      "boolean",
+      "true for 72pt+",
+      "Soft drop shadow under the face."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Makes it a button with spring press feedback."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light haptic tick on press."
+    ],
+    [
+      "AvatarGroup.max",
+      "number",
+      "4",
+      "Avatars shown before the +N chip."
+    ],
+    [
+      "AvatarGroup.total",
+      "number",
+      "children count",
+      "Real total when larger than what you pass."
+    ],
+    [
+      "AvatarGroup.overlap",
+      "number",
+      "0.28",
+      "Overlap as a fraction of the size."
+    ],
+    [
+      "AvatarGroup.surface",
+      "string",
+      "theme background",
+      "Colour of the separating borders — match the parent."
+    ],
+    [
+      "AvatarGroup.animated",
+      "boolean",
+      "true",
+      "Staggered spring-in on mount."
+    ],
+    [
+      "AvatarGroup.onPressMore",
+      "() => void",
+      "—",
+      "Makes the +N chip a button."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the avatar root; AvatarGroup applies it to its row."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "ProfileHeader",
+      "title": "Profile Header",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function ProfileHeader() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        alignItems: 'center',\n        gap: 12,\n        paddingVertical: 20,\n        paddingHorizontal: 16,\n        borderRadius: radius.xl,\n        backgroundColor: colors.card,\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n      }}\n    >\n      <Avatar\n        size={88}\n        src=\"https://i.pravatar.cc/240?img=47\"\n        name=\"Ava Rossi\"\n        ring=\"story\"\n        verified\n        surface={colors.card}\n        elevated\n      />\n      <View style={{ alignItems: 'center', gap: 2 }}>\n        <Text style={{ fontSize: 19, fontWeight: '400', letterSpacing: -0.3, color: colors.foreground }}>Ava Rossi</Text>\n        <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Product designer · Milan</Text>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 24, marginTop: 4 }}>\n        {[\n          ['248', 'Posts'],\n          ['12.4k', 'Followers'],\n          ['311', 'Following'],\n        ].map(([n, l]) => (\n          <View key={l} style={{ alignItems: 'center' }}>\n            <Text style={{ fontSize: 16, color: colors.foreground, fontVariant: ['tabular-nums'] }}>{n}</Text>\n            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{l}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ChatList",
+      "title": "Chat List",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function ChatList() {\n  const { colors } = useKit();\n  const chats = [\n    { name: 'Noah Kim', src: 'https://i.pravatar.cc/150?img=59', status: 'online', msg: 'Pushed the fix — can you re-test?', time: '9:41', unread: 2 },\n    { name: 'Priya Patel', status: 'away', msg: 'Sounds good, see you at 3.', time: '9:12', unread: 0 },\n    { name: 'Diego Alvarez', src: 'https://i.pravatar.cc/150?img=12', status: 'busy', msg: 'In a call until noon', time: 'Mon', unread: 0 },\n    { name: 'Hannah Lee', status: 'offline', msg: 'Thanks for the notes!', time: 'Sun', unread: 0 },\n  ] as const;\n  return (\n    <View>\n      {chats.map((c, i) => (\n        <View\n          key={c.name}\n          style={{\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 12,\n            paddingVertical: 10,\n            borderTopWidth: i ? 1 : 0,\n            borderTopColor: alpha(colors.foreground, 0.06),\n          }}\n        >\n          <Avatar size={48} name={c.name} src={'src' in c ? c.src : undefined} status={c.status} />\n          <View style={{ flex: 1, minWidth: 0 }}>\n            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n              <Text style={{ fontSize: 15, color: colors.foreground }}>{c.name}</Text>\n              <Text style={{ fontSize: 12, color: c.unread ? colors.accent : colors.mutedForeground }}>{c.time}</Text>\n            </View>\n            <Text numberOfLines={1} style={{ fontSize: 14, color: colors.mutedForeground, marginTop: 2 }}>\n              {c.msg}\n            </Text>\n          </View>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Stories",
+      "title": "Stories",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Stories() {\n  const { colors } = useKit();\n  const [seen, setSeen] = useState<string[]>(['Theo']);\n  const people = [\n    { name: 'Kai Müller', short: 'Kai', img: 11 },\n    { name: 'Mila Novak', short: 'Mila', img: 25 },\n    { name: 'Theo Grant', short: 'Theo', img: 33 },\n    { name: 'Nora Ali', short: 'Nora', img: 41 },\n    { name: 'Sam Ortiz', short: 'Sam', img: 0 },\n    { name: 'Lucía Romero', short: 'Lucía', img: 44 },\n  ];\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 14, paddingRight: 8 }}>\n      {people.map((p, i) => (\n        <View key={p.short} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar\n            size=\"lg\"\n            src={p.img ? `https://i.pravatar.cc/150?img=${p.img}` : undefined}\n            name={p.name}\n            ring=\"story\"\n            seen={seen.includes(p.short)}\n            ringSpin={i === 1 && !seen.includes(p.short)}\n            onPress={() => setSeen((s) => (s.includes(p.short) ? s.filter((n) => n !== p.short) : [...s, p.short]))}\n          />\n          <Text style={{ fontSize: 12, color: seen.includes(p.short) ? colors.mutedForeground : colors.foreground }}>{p.short}</Text>\n        </View>\n      ))}\n    </ScrollView>\n  );\n}\n"
+    },
+    {
+      "name": "Group",
+      "title": "Group",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Group() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View\n        style={{\n          padding: 14,\n          gap: 12,\n          borderRadius: radius.lg,\n          backgroundColor: colors.card,\n          borderWidth: 1,\n          borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        }}\n      >\n        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n          <View>\n            <Text style={{ fontSize: 15, color: colors.foreground }}>Mobile launch</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Design · Engineering</Text>\n          </View>\n          <AvatarGroup max={4} total={9} surface={colors.card} size=\"sm\" onPressMore={() => {}}>\n            {[8, 16, 26, 36, 48].map((n, i) => (\n              <Avatar key={n} src={`https://i.pravatar.cc/150?img=${n}`} name={['Maya Chen', 'Leo Park', 'Ava Rossi', 'Noah Kim', 'Zoe Martin'][i]} />\n            ))}\n          </AvatarGroup>\n        </View>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <AvatarGroup size=\"sm\" max={3} total={1284}>\n          <Avatar name=\"Ana Silva\" />\n          <Avatar name=\"Ben Carter\" />\n          <Avatar name=\"Chloe Dubois\" />\n        </AvatarGroup>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>1,284 members</Text>\n      </View>\n      <AvatarGroup size=\"lg\" shape=\"rounded\" max={5}>\n        {['Priya Patel', 'Omar Haddad', 'Sven Larsen', 'Iris Okafor'].map((n) => (\n          <Avatar key={n} name={n} />\n        ))}\n      </AvatarGroup>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Fallbacks",
+      "title": "Fallbacks",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\n\nexport default function Fallbacks() {\n  const names = ['Priya Patel', 'Diego Alvarez', 'Hannah Lee', 'Omar Haddad', 'Sven Larsen'];\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" />\n        ))}\n      </View>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" fallback=\"solid\" />\n        ))}\n      </View>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.slice(0, 3).map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" shape=\"rounded\" fallback=\"gradient\" />\n        ))}\n        <Avatar size=\"lg\" shape=\"rounded\" src=\"https://example.invalid/broken.jpg\" name=\"Kenji Watanabe\" />\n        <Avatar size=\"lg\" />\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 12 }}>\n      <Avatar size=\"xs\" src=\"https://i.pravatar.cc/150?img=32\" name=\"Maya Chen\" />\n      <Avatar size=\"sm\" src=\"https://i.pravatar.cc/150?img=12\" name=\"Leo Park\" status=\"online\" />\n      <Avatar size=\"md\" name=\"Ava Rossi\" status=\"away\" />\n      <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=59\" name=\"Noah Kim\" verified />\n      <Avatar size=\"xl\" src=\"https://i.pravatar.cc/150?img=5\" name=\"Zoe Martin\" status=\"online\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Status",
+      "title": "Status",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Status() {\n  const { colors } = useKit();\n  const rows = [\n    { name: 'Ethan Brooks', img: 15, status: 'online' },\n    { name: 'Lina Novak', img: 44, status: 'away' },\n    { name: 'Marcus Hill', img: 68, status: 'busy' },\n    { name: 'Iris Okafor', img: 0, status: 'offline' },\n  ] as const;\n  return (\n    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n      {rows.map((r) => (\n        <View key={r.name} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar size=\"lg\" src={r.img ? `https://i.pravatar.cc/150?img=${r.img}` : undefined} name={r.name} status={r.status} />\n          <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{r.status[0].toUpperCase() + r.status.slice(1)}</Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Badges",
+      "title": "Badges",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Badges() {\n  const { colors } = useKit();\n  const [count, setCount] = useState(3);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 22 }}>\n      <Pressable accessibilityRole=\"button\" accessibilityLabel=\"Add a notification\" onPress={() => setCount((c) => c + 1)} style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=22\" name=\"Maya Chen\" badge={count} />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Tap +1</Text>\n      </Pressable>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=9\" name=\"Leo Park\" badge={128} status=\"online\" />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Mentions</Text>\n      </View>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" name=\"Design Team\" shape=\"rounded\" badge verified />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Workspace</Text>\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}