@expokit/cli 0.0.0-stage → 0.3.0

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@expokit/cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.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",
+    "LICENSE"
+  ],
+  "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"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/Anshkaran7"
+  },
+  "author": "Karan (anshkaran7) <work@karandev.in>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "prepublishOnly": "node ../../scripts/build-registry.mjs"
+  }
+}

package/registry/_docs/accordion.json

@@ -0,0 +1,115 @@
+{
+  "name": "accordion",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Accordion",
+  "files": [
+    "src/components/ui/accordion.tsx"
+  ],
+  "summary": "Sections spring open to their measured height while the chevron turns.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a header to open or close its section. In single mode, opening one closes the other; disabled items don't respond."
+    ],
+    [
+      "Motion",
+      "Content height springs to its measured size, so any content animates smoothly. The chevron turns 180° on the native driver."
+    ],
+    [
+      "Screen readers",
+      "Each header is a button with expanded and disabled state. Content of closed sections is hidden from assistive tech."
+    ]
+  ],
+  "usage": "import { Accordion, AccordionItem } from '@/components/ui/accordion';\n\n<Accordion defaultValue={['shipping']}>\n  <AccordionItem value=\"shipping\" title=\"How long does shipping take?\">\n    Orders leave our warehouse within 24 hours.\n  </AccordionItem>\n  <AccordionItem value=\"returns\" title=\"Can I return an item?\">\n    You have 30 days to send anything back for a full refund.\n  </AccordionItem>\n</Accordion>",
+  "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,138 @@
+{
+  "name": "action-sheet",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "ActionSheet",
+  "files": [
+    "src/components/ui/action-sheet.tsx"
+  ],
+  "summary": "An iOS-style action sheet that follows your finger and flings away to dismiss.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag anywhere on the sheet. Pull past a third of its height or flick down to dismiss; pulling up rubber-bands."
+    ],
+    [
+      "Motion",
+      "Springs up over a fading scrim. The exit is quicker than the entry and keeps a fling's momentum."
+    ],
+    [
+      "Reduced motion",
+      "The sheet fades in and out in place instead of sliding up from the bottom."
+    ],
+    [
+      "Haptics",
+      "A light impact when it opens and a selection tick when you pick an action. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The sheet is a modal view, the title is a header and each row is a button with its label and disabled state."
+    ],
+    [
+      "Keyboard",
+      "Escape closes it on web; the Android back button closes it too."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { ActionSheet } from '@/components/ui/action-sheet';\n\nconst [open, setOpen] = useState(false);\n<ActionSheet\n  open={open}\n  onOpenChange={setOpen}\n  title=\"Profile photo\"\n  actions={[{ label: 'Take photo' }, { label: 'Remove photo', destructive: true }]}\n/>",
+  "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,155 @@
+{
+  "name": "alert",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "Alert",
+  "files": [
+    "src/components/ui/alert.tsx"
+  ],
+  "summary": "An inline banner whose icon draws itself inside a halo, with an optional draining timer.",
+  "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)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "On appear the icon outline draws, the glyph springs in and the halo ripples once. Dismissing collapses the height so content below glides up."
+    ],
+    [
+      "Touch",
+      "With duration set, a hairline drains along the bottom to show the time left. Pressing the alert pauses it."
+    ],
+    [
+      "Reduced motion",
+      "The icon draw, glyph pop and halo ripple jump straight to their finished state."
+    ],
+    [
+      "Haptics",
+      "Success, warning and danger alerts play the matching notification haptic when they appear; info stays silent."
+    ],
+    [
+      "Screen readers",
+      "The card has the alert role in a polite live region. The close button is labelled Dismiss and actions are buttons named by their label."
+    ],
+    [
+      "Web",
+      "Hovering also pauses the auto-dismiss timer."
+    ]
+  ],
+  "usage": "import { Alert } from '@/components/ui/alert';\n\n<Alert\n  variant=\"warning\"\n  title=\"Storage almost full\"\n  description=\"You've used 9.4 GB of your 10 GB plan.\"\n  dismissible\n/>",
+  "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"
+    }
+  ]
+}