@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/dialog.json

@@ -0,0 +1,162 @@
+{
+  "name": "dialog",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "Dialog",
+  "files": [
+    "src/components/ui/dialog.tsx"
+  ],
+  "props": [
+    [
+      "open / defaultOpen",
+      "boolean",
+      "false",
+      "Controlled / uncontrolled visibility."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called on scrim tap, back, Escape and actions."
+    ],
+    [
+      "variant",
+      "\"default\" | \"destructive\"",
+      "\"default\"",
+      "Destructive adds a warning icon, a danger confirm and a warning haptic on open. The old \"sheet\" value is deprecated and renders as default."
+    ],
+    [
+      "tone",
+      "\"info\" | \"success\" | \"warning\" | \"danger\"",
+      "—",
+      "Living icon in a halo above the title with a soft glow of its colour; success / warning open with a matching haptic."
+    ],
+    [
+      "appearance",
+      "\"modern\" | \"ios\"",
+      "\"modern\"",
+      "Pill buttons, or iOS full-width text buttons split by hairlines."
+    ],
+    [
+      "title / description",
+      "string",
+      "—",
+      "Heading and body copy."
+    ],
+    [
+      "prompt",
+      "{ defaultValue?, value?, onChangeText?, placeholder?, secureTextEntry?, keyboardType?, maxLength?, … }",
+      "—",
+      "Adds a text field (a prompt dialog). Its text is passed to onConfirm / onPress; Return submits."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Error text under the field or description."
+    ],
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "Custom content above the actions."
+    ],
+    [
+      "actions",
+      "{ label, onPress?, role?, disabled? }[]",
+      "Cancel + Confirm",
+      "Buttons. role: primary | default | destructive | cancel. onPress(value) may return a promise (spinner) or false (stays open and shakes)."
+    ],
+    [
+      "confirmLabel / cancelLabel",
+      "string / string | null",
+      "\"Continue\" / \"Cancel\"",
+      "Labels for the default buttons; cancelLabel null leaves a single button."
+    ],
+    [
+      "onConfirm / onCancel",
+      "(value) => void | false | Promise · () => void",
+      "—",
+      "Handlers for the default buttons (onCancel also fires on scrim, back and Escape)."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Spinner on the confirm button; other buttons and dismissal are disabled."
+    ],
+    [
+      "actionsLayout",
+      "\"auto\" | \"row\" | \"stack\"",
+      "\"auto\"",
+      "Two short buttons side by side, otherwise stacked with Cancel last."
+    ],
+    [
+      "icon",
+      "ReactNode | false",
+      "tone icon",
+      "Custom node inside the halo, or false to hide it."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Close on scrim tap, back and Escape."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Warning on open for destructive dialogs, success for success, error on shake."
+    ],
+    [
+      "accent",
+      "string",
+      "theme primary (accent in ios)",
+      "Colour of the primary action."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Card style."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Basic",
+      "title": "Basic",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function Basic() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Enable notifications\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        tone=\"info\"\n        title=\"Turn on notifications?\"\n        description=\"Get a heads-up when someone mentions you, replies to your post or shares a file.\"\n        cancelLabel=\"Not now\"\n        confirmLabel=\"Allow\"\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Destructive",
+      "title": "Destructive",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { 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 Destructive() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState('');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"destructive\" onPress={() => setOpen(true)}>\n        Delete project\n      </Button>\n      {status ? <Text style={muted}>{status}</Text> : null}\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        variant=\"destructive\"\n        title=\"Delete “Mobile redesign”?\"\n        description=\"This permanently removes the project, its 48 files and all comments. This can't be undone.\"\n        confirmLabel=\"Delete\"\n        onConfirm={() =>\n          new Promise<void>((resolve) =>\n            setTimeout(() => {\n              setStatus('“Mobile redesign” was deleted');\n              resolve();\n            }, 1200),\n          )\n        }\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "WithForm",
+      "title": "With Form",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { 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 WithForm() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('Q3 roadmap');\n  const [error, setError] = useState('');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"secondary\" onPress={() => setOpen(true)}>\n        Rename board\n      </Button>\n      <Text style={muted}>Board: {name}</Text>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          setError('');\n        }}\n        title=\"Rename board\"\n        description=\"Everyone with access will see the new name.\"\n        prompt={{ defaultValue: name, placeholder: 'Board name', maxLength: 40, onChangeText: () => setError('') }}\n        error={error}\n        confirmLabel=\"Save\"\n        onConfirm={(value) => {\n          const next = value.trim();\n          if (!next) {\n            setError('Give the board a name.');\n            return false;\n          }\n          setName(next);\n        }}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "PaymentSent",
+      "title": "Payment Sent",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function PaymentSent() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Send ₹1,850\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        tone=\"success\"\n        title=\"Payment sent\"\n        description=\"₹1,850 is on its way to Lena Fischer for “Dinner at Tasca”. She'll get it in a few seconds.\"\n        cancelLabel={null}\n        confirmLabel=\"Done\"\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "SignOut",
+      "title": "Sign Out",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { 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 SignOut() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState('iOS-style hairline buttons');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Sign out\n      </Button>\n      <Text style={muted}>{status}</Text>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        appearance=\"ios\"\n        title=\"Sign out of Northwind?\"\n        description=\"Offline drafts on this device will be removed.\"\n        actions={[\n          { label: 'Cancel', role: 'cancel' },\n          { label: 'Sign out', role: 'destructive', onPress: () => setStatus('Signed out') },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ThreeActions",
+      "title": "Three Actions",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function ThreeActions() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Close document\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        appearance=\"ios\"\n        title=\"Save changes to “Pitch deck”?\"\n        description=\"Your edits will be lost if you don't save them.\"\n        actions={[\n          { label: 'Save', role: 'primary' },\n          { label: \"Don't save\", role: 'destructive' },\n          { label: 'Cancel', role: 'cancel' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ActionSheetDemo",
+      "title": "Action Sheet Demo",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { 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 ActionSheetDemo() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center', gap: 8 }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Change profile photo\n      </Button>\n      <Text style={muted}>Bottom choices live in Action Sheet — not Dialog.</Text>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Profile photo\"\n        message=\"Your photo is visible to everyone in your workspace.\"\n        actions={[\n          { label: 'Take photo' },\n          { label: 'Choose from library' },\n          { label: 'Remove photo', destructive: true },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/drawer.json

@@ -0,0 +1,171 @@
+{
+  "name": "drawer",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "Drawer",
+  "files": [
+    "src/components/ui/drawer.tsx"
+  ],
+  "props": [
+    [
+      "content",
+      "ReactNode",
+      "—",
+      "Panel content (usually DrawerItems); scrolls between header and footer."
+    ],
+    [
+      "header / footer",
+      "ReactNode",
+      "—",
+      "Pinned above / below the content (DrawerProfile, DrawerHeader, DrawerFooter…)."
+    ],
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "The screen the drawer belongs to. Enables edge swipe and push; without children the drawer opens in a Modal."
+    ],
+    [
+      "open / defaultOpen",
+      "boolean",
+      "false",
+      "Controlled / uncontrolled visibility."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called on drags, scrim tap, Android back and Escape."
+    ],
+    [
+      "side",
+      "\"left\" | \"right\"",
+      "\"left\"",
+      "Edge the drawer slides from."
+    ],
+    [
+      "width",
+      "number | `${number}%`",
+      "\"80%\"",
+      "Panel width in points or percent of the container (max 360)."
+    ],
+    [
+      "variant",
+      "\"overlay\" | \"push\"",
+      "\"overlay\"",
+      "Slide over a dimmed screen, or shrink the screen to a rounded 0.92 card and slide it aside (inline only)."
+    ],
+    [
+      "edgeSwipe",
+      "boolean",
+      "true",
+      "Swipe in from the edge to open (needs children). Taps in the edge zone still reach the screen."
+    ],
+    [
+      "edgeWidth",
+      "number",
+      "24",
+      "Width of the edge-swipe zone."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Close on scrim tap and drag."
+    ],
+    [
+      "scaleContent",
+      "boolean",
+      "true",
+      "Overlay variant: scale the screen behind to 0.96 with rounded corners while open (inline)."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light impact on open; DrawerItems tick on press."
+    ],
+    [
+      "topInset / bottomInset",
+      "number",
+      "platform estimate",
+      "Space above the header / below the footer — pass safe-area insets for exact values."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "\"Navigation drawer\"",
+      "Panel label."
+    ],
+    [
+      "style / panelStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container / panel style."
+    ],
+    [
+      "DrawerProfile",
+      "{ name, email?, src?, status?, layout?: 'row' | 'stacked', onPress?, accessory? }",
+      "—",
+      "Account block: soft solid initials (or image) avatar with presence dot, name and email; pressable as an account / workspace switcher."
+    ],
+    [
+      "DrawerHeader",
+      "{ title?, subtitle?, leading?, showClose?, onClose? }",
+      "—",
+      "Title chrome for the header slot."
+    ],
+    [
+      "DrawerItem",
+      "{ label, icon?, badge?, badgeTone?, active?, tone?, onPress?, closeOnPress?, accent?, haptics?, trailing?, disabled? }",
+      "—",
+      "Nav row with a spring-in accent-tinted active pill, popping icon and count badge (neutral plain count / accent tinted pill / danger solid pill); tone=\"danger\" for Log out."
+    ],
+    [
+      "DrawerSection",
+      "{ title, trailing?, divider? }",
+      "—",
+      "Quiet heading between groups with a hairline divider above (divider={false} for the first group) and an optional trailing node."
+    ],
+    [
+      "DrawerFooter",
+      "{ label, detail?, icon?, progress?, onPress?, trailing? }",
+      "—",
+      "Compact footer row, e.g. a storage meter."
+    ],
+    [
+      "DrawerIcon",
+      "{ name, size?, color?, strokeWidth? }",
+      "—",
+      "The drawer's line icons, for menu buttons and headers."
+    ],
+    [
+      "useDrawer()",
+      "() => { open, setOpen, toggle, close }",
+      "—",
+      "Control the surrounding Drawer from inside it."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "AppNavigation",
+      "title": "App Navigation",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized 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: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst MAIL = [\n  { from: 'Lena Fischer', subject: 'Offsite agenda — final draft', snippet: 'Attached the plan for Thursday. Shout if the 10:00 slot clashes.', time: '9:41', unread: true },\n  { from: 'GitHub', service: true, subject: '[northwind/app] PR #482 merged', snippet: 'feat: offline drafts for the editor (#482) was merged into main.', time: '9:12', unread: true },\n  { from: 'Omar Haddad', subject: 'Re: Invoice 2041', snippet: 'Paid this morning — the receipt is in the thread below.', time: '8:03', unread: true },\n  { from: 'Figma', service: true, subject: 'Priya commented on Checkout v3', snippet: '“Can we try the sheet at 90% height here?”', time: 'Tue' },\n  { from: 'Stripe', service: true, subject: 'Your October payout is on its way', snippet: '₹2,48,000 will arrive in your account in 2 business days.', time: 'Mon' },\n  { from: 'Jonas Weber', subject: 'Photos from Lisbon', snippet: 'Finally sorted them — 48 shots, the tram ones came out great.', time: 'Sun' },\n  { from: 'Ana Costa', subject: 'Lunch next week?', snippet: 'There is a new ramen place near the office, Wednesday works.', time: 'Sat' },\n];\n\nfunction MailRow({ from, service, subject, snippet, time, unread }: (typeof MAIL)[number]) {\n  const { colors } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={`${unread ? 'Unread. ' : ''}${from}, ${subject}`}\n      style={({ pressed }) => ({ flexDirection: 'row', gap: 12, paddingVertical: 11, paddingLeft: 16, paddingRight: 14, backgroundColor: pressed ? colors.muted : 'transparent' })}\n    >\n      <Initials name={from} size={40} square={service} />\n      <View style={{ flex: 1, minWidth: 0, gap: 1 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text numberOfLines={1} style={{ flex: 1, fontSize: 15, color: unread ? colors.foreground : colors.mutedForeground }}>\n            {from}\n          </Text>\n          <Text style={{ fontSize: 12.5, color: unread ? colors.accent : colors.mutedForeground }}>{time}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text numberOfLines={1} style={{ flex: 1, fontSize: 14, color: colors.foreground, opacity: unread ? 1 : 0.8 }}>\n            {subject}\n          </Text>\n          {unread ? <Dot color={colors.accent} size={8} /> : null}\n        </View>\n        <Text numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n          {snippet}\n        </Text>\n      </View>\n    </Pressable>\n  );\n}\n\nexport default function AppNavigation() {\n  const { colors, radius, dark } = useKit();\n  const [page, setPage] = useState('Inbox');\n  const nav: [DrawerIconName, string, number?][] = [\n    ['inbox', 'Inbox', 12],\n    ['star', 'Starred'],\n    ['send', 'Sent'],\n    ['file', 'Drafts', 2],\n    ['archive', 'Archive'],\n    ['trash', 'Trash'],\n  ];\n  const labels: [string, string, number?][] = [\n    ['Design reviews', colors.accent, 4],\n    ['Receipts', colors.success],\n    ['Travel', colors.warning, 1],\n  ];\n  return (\n    <Frame>\n      <Drawer\n        variant=\"push\"\n        width=\"78%\"\n        topInset={STATUS_H}\n        header={<DrawerProfile name=\"Maya Patel\" email=\"maya@northwind.app\" status=\"online\" onPress={() => {}} />}\n        content={\n          <>\n            {nav.map(([icon, label, badge]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n            <DrawerSection title=\"Labels\" trailing={<IconButton icon=\"plus\" label=\"New label\" color={colors.mutedForeground} />} />\n            {labels.map(([label, color, badge]) => (\n              <DrawerItem key={label} icon={<Dot color={color} />} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n          </>\n        }\n        footer={<DrawerFooter icon=\"cloud\" label=\"Storage\" detail=\"12.4 GB of 15 GB used\" progress={0.83} />}\n      >\n        <Phone>\n          <TopBar\n            title={page}\n            subtitle={page === 'Inbox' ? '3 unread · maya@northwind.app' : undefined}\n            right={\n              <>\n                <IconButton icon=\"search\" label=\"Search mail\" />\n                <View style={{ paddingRight: 6 }}>\n                  <Initials name=\"Maya Patel\" size={32} />\n                </View>\n              </>\n            }\n          />\n          <Text style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: 2, fontSize: 13, color: colors.mutedForeground }}>Today</Text>\n          {MAIL.map((m) => (\n            <MailRow key={m.subject} {...m} />\n          ))}\n          <View\n            style={{\n              position: 'absolute',\n              right: 16,\n              bottom: 18,\n              height: 52,\n              paddingHorizontal: 18,\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 8,\n              borderRadius: radius.scale(18),\n              backgroundColor: colors.accent,\n              shadowColor: dark ? colors.background : colors.foreground,\n              shadowOpacity: 0.18,\n              shadowRadius: 14,\n              shadowOffset: { width: 0, height: 6 },\n              elevation: 6,\n            }}\n          >\n            <DrawerIcon name=\"plus\" size={20} color={colors.accentForeground} strokeWidth={2} />\n            <Text style={{ fontSize: 15, color: colors.accentForeground }}>Compose</Text>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Workspace ------------------------------------------------------------------------------------- */\n"
+    },
+    {
+      "name": "WorkspaceSwitcher",
+      "title": "Workspace Switcher",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized 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: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst WORKSPACES = [\n  { name: 'Northwind', detail: 'northwind.app · 24 members' },\n  { name: 'Side Quests', detail: 'Personal · 1 member' },\n  { name: 'Acme Studio', detail: 'acme.studio · 8 members' },\n];\n\ntype TaskState = 'In progress' | 'In review' | 'Todo';\n\nconst TASKS: { id: string; title: string; state: TaskState; due: string; done: number; total: number; people: string[] }[] = [\n  { id: 'MOB-212', title: 'Sheet snap points jitter on Android 14', state: 'In progress', due: 'Today', done: 3, total: 5, people: ['Maya Patel', 'Omar Haddad'] },\n  { id: 'MOB-208', title: 'Offline drafts for the editor', state: 'In review', due: 'Thu', done: 6, total: 6, people: ['Lena Fischer'] },\n  { id: 'MOB-199', title: 'Rewrite the push permission prompt', state: 'Todo', due: 'Mon', done: 0, total: 3, people: ['Priya Nair', 'Maya Patel'] },\n  { id: 'MOB-187', title: 'Haptics on tab change', state: 'Todo', due: 'Oct 28', done: 1, total: 2, people: ['Jonas Weber'] },\n];\n\nfunction StatePill({ state }: { state: TaskState }) {\n  const { colors, radius } = useKit();\n  const tone = state === 'In progress' ? colors.accent : state === 'In review' ? colors.warning : colors.mutedForeground;\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, height: 24, paddingHorizontal: 9, borderRadius: radius.capsule(24), backgroundColor: alpha(tone, 0.13) }}>\n      <Dot color={tone} size={7} />\n      <Text style={{ fontSize: 12, color: colors.foreground }}>{state}</Text>\n    </View>\n  );\n}\n\nfunction TaskCard({ id, title, state, due, done, total, people }: (typeof TASKS)[number]) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        padding: 14,\n        gap: 10,\n        borderRadius: radius.scale(16),\n        backgroundColor: colors.card,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        shadowColor: dark ? colors.background : colors.foreground,\n        shadowOpacity: dark ? 0.4 : 0.05,\n        shadowRadius: 10,\n        shadowOffset: { width: 0, height: 3 },\n        elevation: 1,\n      }}\n    >\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <StatePill state={state} />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{id}</Text>\n      </View>\n      <Text numberOfLines={1} style={{ fontSize: 15.5, letterSpacing: -0.2, color: colors.foreground }}>\n        {title}\n      </Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"calendar\" size={14} color={due === 'Today' ? colors.danger : colors.mutedForeground} />\n          <Text style={{ fontSize: 12.5, color: due === 'Today' ? colors.danger : colors.mutedForeground }}>{due}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"check\" size={14} color={colors.mutedForeground} />\n          <Text style={{ fontSize: 12.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>\n            {done}/{total}\n          </Text>\n        </View>\n        <View style={{ flex: 1 }} />\n        <View style={{ flexDirection: 'row' }}>\n          {people.map((p, i) => (\n            <View key={p} style={{ marginLeft: i ? -8 : 0 }}>\n              <Initials name={p} size={26} ring={colors.card} />\n            </View>\n          ))}\n        </View>\n      </View>\n    </View>\n  );\n}\n\nexport default function WorkspaceSwitcher() {\n  const { colors, radius } = useKit();\n  const [workspace, setWorkspace] = useState(WORKSPACES[0]);\n  const [picking, setPicking] = useState(false);\n  const [page, setPage] = useState('My issues');\n  const [filter, setFilter] = useState('Active');\n  return (\n    <Frame>\n      <Drawer\n        topInset={STATUS_H}\n        header={<DrawerProfile name={workspace.name} email={workspace.detail} onPress={() => setPicking((v) => !v)} accessibilityHint=\"Switch workspace\" />}\n        content={\n          picking ? (\n            <>\n              <DrawerSection title=\"Workspaces\" divider={false} />\n              {WORKSPACES.map((w) => (\n                <DrawerItem\n                  key={w.name}\n                  label={w.name}\n                  icon={w.name === workspace.name ? 'check' : 'layers'}\n                  active={w.name === workspace.name}\n                  closeOnPress={false}\n                  onPress={() => {\n                    setWorkspace(w);\n                    setPicking(false);\n                  }}\n                />\n              ))}\n              <DrawerItem icon=\"plus\" label=\"Create workspace\" closeOnPress={false} />\n            </>\n          ) : (\n            <>\n              {(\n                [\n                  ['inbox', 'Inbox', 5, 'accent'],\n                  ['target', 'My issues', 14],\n                  ['search', 'Search'],\n                ] as [DrawerIconName, string, number?, 'accent'?][]\n              ).map(([icon, label, badge, badgeTone]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={page === label} onPress={() => setPage(label)} />\n              ))}\n              <DrawerSection title=\"Teams\" trailing={<IconButton icon=\"plus\" label=\"New team\" color={colors.mutedForeground} />} />\n              {(\n                [\n                  ['layers', 'Mobile', 8],\n                  ['layers', 'Platform', 3],\n                  ['users', 'Design'],\n                ] as [DrawerIconName, string, number?][]\n              ).map(([icon, label, badge]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n              ))}\n            </>\n          )\n        }\n        footer={\n          <>\n            <DrawerItem icon=\"settings\" label=\"Settings\" active={page === 'Settings'} onPress={() => setPage('Settings')} />\n            <DrawerItem icon=\"logout\" label=\"Log out\" tone=\"danger\" />\n          </>\n        }\n      >\n        <Phone>\n          <TopBar title={page} subtitle={`${workspace.name} · Mobile team`} right={<IconButton icon=\"plus\" label=\"New issue\" />} />\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingTop: 2, paddingBottom: 12 }}>\n            {[\n              ['Active', '4'],\n              ['Backlog', '9'],\n              ['Done', '23'],\n            ].map(([label, n]) => {\n              const on = filter === label;\n              return (\n                <Pressable\n                  key={label}\n                  onPress={() => setFilter(label)}\n                  accessibilityRole=\"button\"\n                  accessibilityState={{ selected: on }}\n                  style={{\n                    height: 32,\n                    paddingHorizontal: 12,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 6,\n                    borderRadius: radius.capsule(32),\n                    backgroundColor: on ? alpha(colors.accent, 0.13) : 'transparent',\n                    borderWidth: StyleSheet.hairlineWidth,\n                    borderColor: on ? alpha(colors.accent, 0.3) : colors.border,\n                  }}\n                >\n                  <Text style={{ fontSize: 13.5, color: on ? colors.accent : colors.foreground }}>{label}</Text>\n                  <Text style={{ fontSize: 12.5, color: on ? colors.accent : colors.mutedForeground }}>{n}</Text>\n                </Pressable>\n              );\n            })}\n          </View>\n          <View style={{ paddingHorizontal: 16, gap: 10 }}>\n            {TASKS.map((t) => (\n              <TaskCard key={t.id} {...t} />\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Stays (right panel) --------------------------------------------------------------------------- */\n"
+    },
+    {
+      "name": "RightPanel",
+      "title": "Right Panel",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized 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: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\nexport default function RightPanel() {\n  const { colors, radius } = useKit();\n  const [open, setOpen] = useState(false);\n  const [price, setPrice] = useState('Any price');\n  const [tags, setTags] = useState<string[]>(['Free cancellation']);\n  const toggle = (t: string) => setTags((s) => (s.includes(t) ? s.filter((x) => x !== t) : [...s, t]));\n  const count = 48 - tags.length * 9 - (price === 'Any price' ? 0 : 11);\n  const active = tags.length + (price !== 'Any price' ? 1 : 0);\n  return (\n    <Frame>\n      <Drawer\n        open={open}\n        onOpenChange={setOpen}\n        side=\"right\"\n        width=\"86%\"\n        topInset={STATUS_H}\n        accessibilityLabel=\"Filters\"\n        header={<DrawerHeader title=\"Filters\" subtitle=\"Porto · Jun 3 – 7 · 2 guests\" showClose onClose={() => setOpen(false)} />}\n        content={\n          <>\n            <DrawerSection title=\"Price per night\" divider={false} />\n            {['Any price', 'Under ₹5,000', '₹5,000 – ₹10,000', '₹10,000+'].map((p) => (\n              <DrawerItem key={p} label={p} icon={price === p ? 'check' : <View />} active={price === p} closeOnPress={false} onPress={() => setPrice(p)} />\n            ))}\n            <DrawerSection title=\"Amenities\" />\n            {['Free cancellation', 'Breakfast included', 'Pet friendly', 'Workspace'].map((t) => (\n              <DrawerItem key={t} label={t} icon={tags.includes(t) ? 'check' : <View />} active={tags.includes(t)} closeOnPress={false} onPress={() => toggle(t)} />\n            ))}\n          </>\n        }\n        footer={\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 4 }}>\n            <Button\n              variant=\"outline\"\n              style={{ flex: 1 }}\n              onPress={() => {\n                setPrice('Any price');\n                setTags([]);\n              }}\n            >\n              Reset\n            </Button>\n            <Button variant=\"accent\" style={{ flex: 1.4 }} onPress={() => setOpen(false)}>\n              {`Show ${count} stays`}\n            </Button>\n          </View>\n        }\n      >\n        <Phone>\n          <TopBar\n            menu={false}\n            title=\"Stays in Porto\"\n            subtitle={`${count} places · Jun 3 – 7`}\n            right={\n              <Button size=\"sm\" variant=\"secondary\" pill left={<DrawerIcon name=\"filter\" size={16} />} onPress={() => setOpen(true)}>\n                {active ? `Filters · ${active}` : 'Filters'}\n              </Button>\n            }\n          />\n          <View style={{ paddingHorizontal: 16, paddingTop: 4, gap: 16 }}>\n            {[\n              { name: 'Casa da Ribeira', meta: 'River view · 1 bedroom', price: '₹6,800', rating: '4.92', art: 'sunset' as const },\n              { name: 'Azulejo Loft', meta: 'Breakfast included', price: '₹4,800', rating: '4.81', art: 'grid' as const },\n              { name: 'Miradouro Suites', meta: 'Free cancellation', price: '₹12,500', rating: '4.97', art: 'rings' as const },\n            ].map((s) => (\n              <View key={s.name} style={{ gap: 8 }}>\n                <Art kind={s.art} size={0} height={112} radiusSize={radius.scale(18)} />\n                <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>\n                  <View style={{ flex: 1 }}>\n                    <Text style={{ fontSize: 15, color: colors.foreground }}>{s.name}</Text>\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{s.meta}</Text>\n                  </View>\n                  <View style={{ alignItems: 'flex-end' }}>\n                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n                      <DrawerIcon name=\"star\" size={13} color={colors.foreground} />\n                      <Text style={{ fontSize: 13, color: colors.foreground }}>{s.rating}</Text>\n                    </View>\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      <Text style={{ color: colors.foreground }}>{s.price}</Text> night\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Music ----------------------------------------------------------------------------------------- */\n"
+    },
+    {
+      "name": "PushLayout",
+      "title": "Push Layout",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized 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: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\n/** A right-pointing triangle made from borders (play / skip glyphs). */\nfunction Tri({ size, color, flip }: { size: number; color: string; flip?: boolean }) {\n  return (\n    <View\n      style={{\n        width: 0,\n        height: 0,\n        borderTopWidth: size / 2,\n        borderBottomWidth: size / 2,\n        borderLeftWidth: size * 0.85,\n        borderTopColor: 'transparent',\n        borderBottomColor: 'transparent',\n        borderLeftColor: color,\n        transform: flip ? [{ scaleX: -1 }] : undefined,\n      }}\n    />\n  );\n}\n\nfunction Skip({ color, back }: { color: string; back?: boolean }) {\n  const { radius } = useKit();\n  return (\n    <View style={{ flexDirection: back ? 'row-reverse' : 'row', alignItems: 'center', gap: 1 }}>\n      <Tri size={14} color={color} flip={back} />\n      <View style={{ width: 2.5, height: 14, borderRadius: radius.capsule(2.5), backgroundColor: color }} />\n    </View>\n  );\n}\n\nconst TRACKS: { title: string; artist: string; time: string; art: ArtKind; playing?: boolean }[] = [\n  { title: 'Midnight City Lights', artist: 'Nova Arcade', time: '4:12', art: 'sunset', playing: true },\n  { title: 'Paper Planes', artist: 'Juniper Fields', time: '3:27', art: 'rings' },\n  { title: 'Tidal', artist: 'Okra & The Moon', time: '5:03', art: 'stripes' },\n  { title: 'Slow Burn', artist: 'Halcyon Days', time: '3:48', art: 'grid' },\n  { title: 'Northern Line', artist: 'The Lanterns', time: '4:31', art: 'split' },\n];\n\nexport default function PushLayout() {\n  const { colors, radius, dark } = useKit();\n  const [view, setView] = useState('Listen now');\n  const [playing, setPlaying] = useState(true);\n  return (\n    <Frame>\n      <Drawer\n        variant=\"push\"\n        width={252}\n        topInset={STATUS_H}\n        header={<DrawerProfile layout=\"stacked\" name=\"Jonas Weber\" email=\"Premium · 2 devices\" />}\n        content={\n          <>\n            {(\n              [\n                ['home', 'Listen now'],\n                ['search', 'Search'],\n                ['music', 'Library', 3],\n                ['bell', 'New releases', 8, 'accent'],\n              ] as [DrawerIconName, string, number?, 'accent'?][]\n            ).map(([icon, label, badge, badgeTone]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={view === label} onPress={() => setView(label)} />\n            ))}\n            <DrawerSection title=\"Playlists\" />\n            {['Late Night Drive', 'Focus Flow', 'Sunday Coffee'].map((p, i) => (\n              <DrawerItem\n                key={p}\n                icon={<Art kind={(['sunset', 'rings', 'stripes'] as const)[i]} size={22} radiusSize={radius.scale(5)} />}\n                label={p}\n                active={view === p}\n                onPress={() => setView(p)}\n              />\n            ))}\n          </>\n        }\n        footer={<DrawerItem icon=\"help\" label=\"Help & feedback\" closeOnPress={false} />}\n      >\n        <Phone>\n          <TopBar title={view} right={<IconButton icon=\"search\" label=\"Search music\" />} />\n          <View style={{ paddingHorizontal: 16, gap: 14 }}>\n            <View\n              style={{\n                padding: 14,\n                gap: 12,\n                borderRadius: radius.scale(20),\n                backgroundColor: colors.card,\n                borderWidth: StyleSheet.hairlineWidth,\n                borderColor: colors.border,\n                shadowColor: dark ? colors.background : colors.foreground,\n                shadowOpacity: dark ? 0.4 : 0.06,\n                shadowRadius: 14,\n                shadowOffset: { width: 0, height: 4 },\n                elevation: 2,\n              }}\n            >\n              <View style={{ flexDirection: 'row', gap: 14 }}>\n                <Art kind=\"sunset\" size={92} />\n                <View style={{ flex: 1, minWidth: 0, justifyContent: 'center', gap: 2 }}>\n                  <Text style={{ fontSize: 12, color: colors.accent }}>Now playing</Text>\n                  <Text numberOfLines={1} style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>\n                    Midnight City Lights\n                  </Text>\n                  <Text numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n                    Nova Arcade · Afterglow\n                  </Text>\n                </View>\n              </View>\n              <View style={{ gap: 6 }}>\n                <View style={{ height: 4, borderRadius: radius.capsule(4), backgroundColor: colors.muted, overflow: 'hidden' }}>\n                  <View style={{ width: '43%', height: '100%', borderRadius: radius.capsule(4), backgroundColor: colors.accent }} />\n                </View>\n                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n                  <Text style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>1:48</Text>\n                  <Text style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>-2:24</Text>\n                </View>\n              </View>\n              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 36 }}>\n                <Skip color={colors.foreground} back />\n                <Pressable\n                  onPress={() => setPlaying((v) => !v)}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={playing ? 'Pause' : 'Play'}\n                  style={{ width: 48, height: 48, borderRadius: radius.capsule(48), backgroundColor: colors.accent, alignItems: 'center', justifyContent: 'center' }}\n                >\n                  {playing ? (\n                    <View style={{ flexDirection: 'row', gap: 5 }}>\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                    </View>\n                  ) : (\n                    <View style={{ marginLeft: 3 }}>\n                      <Tri size={17} color={colors.accentForeground} />\n                    </View>\n                  )}\n                </Pressable>\n                <Skip color={colors.foreground} />\n              </View>\n            </View>\n            <View style={{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between' }}>\n              <Text style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>Up next</Text>\n              <Text style={{ fontSize: 13.5, color: colors.accent }}>See all</Text>\n            </View>\n            <View style={{ gap: 12 }}>\n              {TRACKS.map((t) => (\n                <View key={t.title} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n                  <Art kind={t.art} size={44} />\n                  <View style={{ flex: 1, minWidth: 0 }}>\n                    <Text numberOfLines={1} style={{ fontSize: 15, color: t.playing ? colors.accent : colors.foreground }}>\n                      {t.title}\n                    </Text>\n                    <Text numberOfLines={1} style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      {t.artist}\n                    </Text>\n                  </View>\n                  {t.playing ? (\n                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2, height: 14 }}>\n                      {[8, 14, 10].map((hh, i) => (\n                        <View key={i} style={{ width: 3, height: hh, borderRadius: radius.capsule(3), backgroundColor: colors.accent }} />\n                      ))}\n                    </View>\n                  ) : (\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{t.time}</Text>\n                  )}\n                </View>\n              ))}\n            </View>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/fab.json

@@ -0,0 +1,120 @@
+{
+  "name": "fab",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "Fab",
+  "files": [
+    "src/components/ui/fab.tsx"
+  ],
+  "props": [
+    [
+      "actions",
+      "{ label, icon, onPress?, color? }[]",
+      "—",
+      "Speed-dial items, bottom → top (arc: first → last). icon can be a node or ({ color }) => node; with color the icon colour contrasts automatically. Omit for a plain FAB."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Called when there are no actions."
+    ],
+    [
+      "icon",
+      "ReactNode | ({ color }) => ReactNode",
+      "plus",
+      "Main icon (rotates 135° when open). A function is re-coloured as the button turns neutral when open."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Makes it an extended FAB (icon + label)."
+    ],
+    [
+      "extended",
+      "boolean",
+      "true",
+      "Set false (e.g. while scrolling) to collapse the label into a circle."
+    ],
+    [
+      "open / onOpenChange",
+      "boolean",
+      "—",
+      "Controlled speed dial (or use defaultOpen)."
+    ],
+    [
+      "defaultOpen",
+      "boolean",
+      "false",
+      "Speed dial starts open when uncontrolled."
+    ],
+    [
+      "layout",
+      "\"list\" | \"arc\"",
+      "\"list\"",
+      "Labelled column, or mini buttons fanned out on a quarter circle (half circle for bottom-center). Arc hides the chips; labels stay as accessibility labels."
+    ],
+    [
+      "position",
+      "\"bottom-right\" | \"bottom-left\" | \"bottom-center\"",
+      "\"bottom-right\"",
+      "Corner of the parent it sits in."
+    ],
+    [
+      "variant",
+      "\"accent\" | \"gradient\" | \"tonal\" | \"primary\" | \"secondary\"",
+      "\"accent\"",
+      "accent: solid fill + same-colour glow; gradient: opt-in two-tone; tonal: soft tinted surface; primary / secondary: theme surfaces."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Main button 40, 56 or 64pt (speed-dial buttons 36 / 42 / 46pt)."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Tint for accent, gradient and tonal; glow, foreground (and the opt-in gradient stops) are derived from it."
+    ],
+    [
+      "backdrop",
+      "boolean",
+      "true",
+      "Dim the parent while open; tap to close."
+    ],
+    [
+      "pulse",
+      "boolean",
+      "false",
+      "Looping attention ring (skipped with Reduce Motion), e.g. for empty-state calls to action."
+    ],
+    [
+      "offset",
+      "number",
+      "20",
+      "Distance from the parent's edges."
+    ],
+    [
+      "rotate",
+      "boolean",
+      "true",
+      "Rotate the icon into × when open."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Tap on toggle."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the absolutely positioned stack holding the main button and list actions."
+    ]
+  ],
+  "examples": []
+}