@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/toast.json

@@ -0,0 +1,185 @@
+{
+  "name": "toast",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "ToastProvider",
+  "files": [
+    "src/components/ui/toast.tsx"
+  ],
+  "summary": "Sonner-style toasts whose tone icon draws itself while a hairline drains away.",
+  "props": [
+    [
+      "toast(title, options?)",
+      "(string, ToastOptions) => id",
+      "—",
+      "Global API. Also toast.success / error / warning / info / loading / promise / dismiss(id?)."
+    ],
+    [
+      "ToastProvider / useToast()",
+      "context",
+      "—",
+      "Scoped store: wrap UI + <Toaster />, call useToast() instead of the global toast()."
+    ],
+    [
+      "options.description",
+      "string",
+      "—",
+      "Second line."
+    ],
+    [
+      "options.action",
+      "{ label, onPress }",
+      "—",
+      "Inline button (dismisses after press)."
+    ],
+    [
+      "options.icon",
+      "ReactNode | false",
+      "type icon",
+      "Replace the type icon, or false for none."
+    ],
+    [
+      "options.duration",
+      "number",
+      "Toaster duration",
+      "ms before auto-dismiss; Infinity to keep."
+    ],
+    [
+      "options.id",
+      "string",
+      "auto",
+      "Reuse to update a toast in place."
+    ],
+    [
+      "options.toaster",
+      "string",
+      "—",
+      "Target a <Toaster id>."
+    ],
+    [
+      "<Toaster> position",
+      "\"top\" | \"bottom\"",
+      "\"bottom\"",
+      "Edge the stack sits on (island always sits top-centre)."
+    ],
+    [
+      "<Toaster> variant",
+      "\"default\" | \"rich\" | \"minimal\" | \"island\"",
+      "\"default\"",
+      "Cards with a tone glow, cards filled with the solid tone, compact inverted pills, or a black Dynamic Island capsule that springs open, morphs between toasts (tap to expand, swipe up to dismiss)."
+    ],
+    [
+      "<Toaster> duration",
+      "number",
+      "4000",
+      "Default auto-dismiss in ms."
+    ],
+    [
+      "<Toaster> visibleToasts",
+      "number",
+      "3",
+      "Cards visible in the stack."
+    ],
+    [
+      "<Toaster> expand",
+      "boolean",
+      "false",
+      "Always fanned out."
+    ],
+    [
+      "<Toaster> offset / gap",
+      "number",
+      "16 (island 10) / 10",
+      "Edge distance and fan-out spacing. No safe-area dependency: pass insets.top + 8 to clear a notch."
+    ],
+    [
+      "<Toaster> closeButton",
+      "boolean",
+      "false",
+      "✕ on every toast."
+    ],
+    [
+      "<Toaster> id",
+      "string",
+      "—",
+      "Only show toasts sent with { toaster: id }."
+    ],
+    [
+      "<Toaster> haptics",
+      "boolean",
+      "true",
+      "Success / warning / error notification haptic when a toast appears or resolves."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the <Toaster> host that fills the screen and positions the stack."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the stack to fan it out, swipe a toast sideways or toward the edge to dismiss it; timers and the drain line pause while you touch."
+    ],
+    [
+      "Motion",
+      "Tone icons draw their outline inside a halo; toast.promise() closes the spinning arc into the success or error mark. variant=\"island\" morphs like a Dynamic Island."
+    ],
+    [
+      "Reduced motion",
+      "Tone icons appear fully drawn without the spin or pop, and the island skips its squash and staggered morph."
+    ],
+    [
+      "Haptics",
+      "A success, warning or error notification when a toast of that type appears, landing as the loading circle closes; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "Each toast is an alert in a polite live region, labelled by its title and description, with action and Dismiss buttons."
+    ]
+  ],
+  "usage": "import { toast, Toaster } from '@/components/ui/toast';\n\n// once, at the root of your app\n<Toaster />\n\n// anywhere\ntoast.success('Invoice INV-0042 sent', { description: 'Maya will get it by email.' });",
+  "examples": [
+    {
+      "name": "Default",
+      "title": "Default",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Default() {\n  const to = { toaster: 'demo-default' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() => toast('Event created', { ...to, description: 'Friday, June 14 at 9:00 AM' })}\n        >\n          Default\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Changes saved', { ...to, description: 'Synced to all your devices.' })}\n        >\n          Success\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.warning('Storage almost full', { ...to, description: '92% of 15 GB used.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast.error('Could not reach server', to)}>\n          Error\n        </Button>\n      </View>\n      <Toaster id=\"demo-default\" />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "RichColors",
+      "title": "Rich Colors",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function RichColors() {\n  const { colors } = useKit();\n  const to = { toaster: 'demo-rich' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.success}\n          onPress={() => toast.success('Payment received', { ...to, description: '₹18,500 from Acme Inc.' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"soft\"\n          color={colors.danger}\n          onPress={() => toast.error('Card declined', { ...to, description: 'Try another payment method.' })}\n        >\n          Error\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" color={colors.warning} onPress={() => toast.warning('You are offline', { ...to, description: 'Changes will sync when you reconnect.' })}>\n          Warning\n        </Button>\n        <Button size=\"sm\" variant=\"soft\" onPress={() => toast.info('New version available', { ...to, description: 'Restart to update to 4.2.' })}>\n          Info\n        </Button>\n      </View>\n      <Toaster id=\"demo-rich\" variant=\"rich\" />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "Island",
+      "title": "Island",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nexport default function Island() {\n  const to = { toaster: 'demo-island' };\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast.success('AirPods connected', { ...to, description: 'Battery 84% · Case 100%' })}\n        >\n          Success\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.error('Payment failed', {\n              ...to,\n              description: 'Your card ending 4242 was declined by the bank. Update your billing details to keep Pro.',\n              action: { label: 'Update', onPress: () => toast.info('Opening billing…', to) },\n            })\n          }\n        >\n          Error\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() =>\n            toast.promise(wait(2200), { loading: 'Sending to Maya…', success: 'Photo sent', error: 'Could not send' }, to)\n          }\n        >\n          Promise\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onPress={() => toast('Maya Chen', { ...to, description: 'Running 5 min late, grab us a table?' })}\n        >\n          Message\n        </Button>\n      </View>\n      <Toaster id=\"demo-island\" variant=\"island\" />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "PromiseMorph",
+      "title": "Promise Morph",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nconst wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));\n\nconst fail = (ms: number) => new Promise<void>((_, reject) => setTimeout(() => reject(new Error('timeout')), ms));\n\nexport default function PromiseMorph() {\n  const to = { toaster: 'demo-promise' };\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"accent\"\n          onPress={() =>\n            toast.promise(\n              wait(1800),\n              { loading: 'Uploading report.pdf…', success: 'Report uploaded', error: 'Upload failed' },\n              { ...to, description: 'Q3 board pack · 4.2 MB' },\n            )\n          }\n        >\n          Upload (succeeds)\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() =>\n            toast\n              .promise(\n                fail(1800),\n                { loading: 'Publishing release…', success: 'Release published', error: 'Publish failed: build timed out' },\n                to,\n              )\n              .catch(() => {})\n          }\n        >\n          Publish (fails)\n        </Button>\n      </View>\n      <Toaster id=\"demo-promise\" />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "Minimal",
+      "title": "Minimal",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nexport default function Minimal() {\n  const to = { toaster: 'demo-minimal' };\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <View style={row}>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast('Copied to clipboard', to)}>\n          Copy link\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.success('Added to favourites', to)}>\n          Favourite\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onPress={() => toast.loading('Syncing…', { ...to, id: 'sync', duration: 1500 })}>\n          Sync\n        </Button>\n      </View>\n      <Toaster id=\"demo-minimal\" variant=\"minimal\" position=\"top\" />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "WithAction",
+      "title": "With Action",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function WithAction() {\n  const to = { toaster: 'demo-action' };\n  return (\n    <Frame>\n      <Button\n        variant=\"destructive\"\n        size=\"sm\"\n        style={{ alignSelf: 'flex-start' }}\n        onPress={() =>\n          toast('Conversation archived', {\n            ...to,\n            description: 'Moved 12 messages to Archive.',\n            action: { label: 'Undo', onPress: () => toast.success('Conversation restored', to) },\n          })\n        }\n      >\n        Archive chat\n      </Button>\n      <Toaster id=\"demo-action\" closeButton duration={6000} />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "Expanded",
+      "title": "Expanded",
+      "code": "import React, { useRef } from 'react';\nimport { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Expanded() {\n  const to = { toaster: 'demo-expanded' };\n  const messages = [\n    () => toast.info('Maya joined #design', to),\n    () => toast.success('Build #1824 passed', { ...to, description: 'main · 3m 12s' }),\n    () => toast('Invoice INV-0042 sent', to),\n    () => toast.warning('Disk usage at 85%', to),\n  ];\n  const n = useRef(0);\n  return (\n    <Frame style={{ justifyContent: 'flex-end' }}>\n      <Button size=\"sm\" style={{ alignSelf: 'flex-start' }} onPress={() => messages[n.current++ % messages.length]()}>\n        Send notification\n      </Button>\n      <Toaster id=\"demo-expanded\" position=\"top\" expand visibleToasts={3} gap={8} />\n    </Frame>\n  );\n}\n"
+    },
+    {
+      "name": "WithProvider",
+      "title": "With Provider",
+      "code": "import { StyleSheet, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { toast, Toaster, ToastProvider, useToast } from '@/components/ui/toast';\nimport { useKit } from '@/lib/kit';\n\n/** Demo frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 300,\n          overflow: 'hidden',\n          padding: 16,\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst row = { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 };\n\nfunction ProviderDemo() {\n  const toast = useToast();\n  return (\n    <Frame>\n      <View style={row}>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onPress={() => toast.success('Draft saved', { description: 'Only this Toaster sees it.' })}\n        >\n          Save draft\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => toast('Reminder set for 6:00 PM')}>\n          Remind me\n        </Button>\n      </View>\n      <Toaster />\n    </Frame>\n  );\n}\n\nexport default function WithProvider() {\n  return (\n    <ToastProvider>\n      <ProviderDemo />\n    </ToastProvider>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/treemap.json

@@ -0,0 +1,33 @@
+{
+  "name": "treemap",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "TreemapChart",
+  "files": [
+    "src/components/charts/treemap.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "data",
+      "{ label, value, color? }[]",
+      "—",
+      "Tiles."
+    ],
+    [
+      "gap / radius",
+      "number",
+      "3 / 8",
+      "Tile spacing & corners."
+    ],
+    [
+      "colors",
+      "string[]",
+      "theme palette",
+      "Tile colours."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/waterfall.json

@@ -0,0 +1,39 @@
+{
+  "name": "waterfall",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "WaterfallChart",
+  "files": [
+    "src/components/charts/waterfall.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "data",
+      "{ label, value, total? }[]",
+      "—",
+      "Steps."
+    ],
+    [
+      "increaseColor / decreaseColor / totalColor",
+      "string",
+      "theme",
+      "Colours."
+    ],
+    [
+      "radius",
+      "number",
+      "4",
+      "Corners."
+    ],
+    [
+      "showLabels",
+      "boolean",
+      "true",
+      "Change labels."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/wheel-list.json

@@ -0,0 +1,122 @@
+{
+  "name": "wheel-list",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "WheelList",
+  "files": [
+    "src/components/ui/wheel-list.tsx"
+  ],
+  "summary": "An iOS alarm-style picker whose rows curve away on a 3D cylinder.",
+  "props": [
+    [
+      "data",
+      "T[]",
+      "—",
+      "Rows."
+    ],
+    [
+      "getLabel",
+      "(item: T) => string",
+      "String(item)",
+      "Text for default rows."
+    ],
+    [
+      "renderItem",
+      "({ item, index, active }) => ReactNode",
+      "—",
+      "Custom row; `active` is the row in the band."
+    ],
+    [
+      "value",
+      "number",
+      "—",
+      "Controlled selected index."
+    ],
+    [
+      "defaultValue",
+      "number",
+      "0",
+      "Uncontrolled initial index."
+    ],
+    [
+      "onValueChange",
+      "(index: number, item: T) => void",
+      "—",
+      "Fires as the selection changes."
+    ],
+    [
+      "itemHeight",
+      "number",
+      "44",
+      "Row height."
+    ],
+    [
+      "visible",
+      "number",
+      "5",
+      "Rows visible at once (odd numbers centre the band)."
+    ],
+    [
+      "curve",
+      "number",
+      "22",
+      "Degrees each row curves away from the band."
+    ],
+    [
+      "bandColor",
+      "string",
+      "faint foreground",
+      "Selection band colour."
+    ],
+    [
+      "textColor",
+      "string",
+      "theme foreground",
+      "Text colour of default rows — white on a photo or dark panel."
+    ],
+    [
+      "fadeColor",
+      "string",
+      "—",
+      "Colour of the surface behind the wheel; rows fade into it top and bottom."
+    ],
+    [
+      "align",
+      "\"left\" | \"center\" | \"right\"",
+      "\"center\"",
+      "Text alignment for default rows."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "What the wheel picks, for screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Flick to spin and it snaps to a row; tap a row to scroll it into the band."
+    ],
+    [
+      "Motion",
+      "Each row rotates, scales and fades by its distance from the band, interpolated from the scroll position on the native driver."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element with increment / decrement actions; its value is the selected label, or \"3 / 12\" for custom rows."
+    ],
+    [
+      "Web",
+      "Browsers lack snap momentum, so it settles on the nearest row shortly after scrolling stops."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

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

@@ -0,0 +1,233 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { alpha, isTextNode, motion, useKit } from '@/lib/kit';
+
+export type AccordionVariant = 'default' | 'bordered' | 'separated';
+
+export interface AccordionProps {
+  children: React.ReactNode;
+  /** 'single' keeps one item open at a time; 'multiple' lets any number stay open. */
+  type?: 'single' | 'multiple';
+  /** Open item values (controlled). */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** In 'single' mode, allow closing the open item (default true). */
+  collapsible?: boolean;
+  variant?: AccordionVariant;
+  /** Chevron colour of open items (default: theme accent). */
+  accent?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface Ctx {
+  open: string[];
+  toggle: (v: string) => void;
+  variant: AccordionVariant;
+  tint: string;
+}
+const AccordionContext = createContext<Ctx | null>(null);
+const PositionContext = createContext({ first: true, last: true });
+
+/** Expanding sections with measured-height spring motion and a rotating chevron. */
+export function Accordion({
+  children,
+  type = 'single',
+  value,
+  defaultValue = [],
+  onValueChange,
+  collapsible = true,
+  variant = 'default',
+  accent,
+  style,
+}: AccordionProps) {
+  const { colors, radius } = useKit();
+  const [inner, setInner] = useState(defaultValue);
+  const open = value ?? inner;
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  const toggle = useCallback(
+    (v: string) => {
+      const cur = openRef.current;
+      const isOpen = cur.includes(v);
+      let next: string[];
+      if (type === 'multiple') next = isOpen ? cur.filter((x) => x !== v) : [...cur, v];
+      else next = isOpen ? (collapsible ? [] : cur) : [v];
+      if (next === cur) return;
+      if (value === undefined) setInner(next);
+      onValueChange?.(next);
+    },
+    [type, collapsible, value, onValueChange]
+  );
+
+  const ctx = useMemo(() => ({ open, toggle, variant, tint: accent ?? colors.accent }), [open, toggle, variant, accent, colors.accent]);
+  const items = React.Children.toArray(children);
+
+  return (
+    <AccordionContext.Provider value={ctx}>
+      <View
+        style={[
+          variant === 'bordered' && {
+            borderWidth: StyleSheet.hairlineWidth * 2,
+            borderColor: colors.border,
+            borderRadius: radius.lg,
+            backgroundColor: colors.card,
+            overflow: 'hidden',
+          },
+          variant === 'separated' && styles.separated,
+          style,
+        ]}
+      >
+        {items.map((child, i) => (
+          <PositionContext.Provider key={(child as React.ReactElement).key ?? i} value={{ first: i === 0, last: i === items.length - 1 }}>
+            {child}
+          </PositionContext.Provider>
+        ))}
+      </View>
+    </AccordionContext.Provider>
+  );
+}
+
+export interface AccordionItemProps {
+  /** Unique id used by the Accordion's value. */
+  value: string;
+  title: React.ReactNode;
+  /** Secondary line under the title. */
+  subtitle?: string;
+  /** Leading icon. */
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** One collapsible section. Content is measured, so any height animates smoothly. */
+export function AccordionItem({ value, title, subtitle, icon, children, disabled, style }: AccordionItemProps) {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');
+  const { open: openValues, toggle, variant, tint } = ctx;
+  const { last } = useContext(PositionContext);
+  const { colors, radius, dark } = useKit();
+  const open = openValues.includes(value);
+
+  const [height, setHeight] = useState(0);
+  // `progress` drives height (layout → JS driver); `turn` rotates the chevron on the native driver.
+  const progress = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const turn = useRef(new Animated.Value(open ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(progress, { toValue: open ? 1 : 0, useNativeDriver: false, ...motion.gentle, overshootClamping: true }).start();
+    Animated.spring(turn, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [open, progress, turn]);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const h = Math.ceil(e.nativeEvent.layout.height);
+    if (h !== height) setHeight(h);
+  };
+
+  const pad = variant === 'default' ? 0 : 16;
+  const container: ViewStyle =
+    variant === 'separated'
+      ? {
+          backgroundColor: colors.card,
+          borderRadius: radius.lg,
+          borderWidth: StyleSheet.hairlineWidth * 2,
+          borderColor: open ? alpha(tint, dark ? 0.45 : 0.35) : colors.border,
+          overflow: 'hidden',
+        }
+      : variant === 'default' || !last
+        ? { borderBottomWidth: StyleSheet.hairlineWidth * 2, borderBottomColor: colors.border }
+        : {};
+
+  return (
+    <View style={[container, style]}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open, disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => toggle(value)}
+        style={({ pressed }) => [
+          styles.header,
+          { paddingHorizontal: pad, opacity: disabled ? 0.45 : 1 },
+          pressed && variant !== 'default' && { backgroundColor: colors.muted },
+          pressed && variant === 'default' && { opacity: 0.6 },
+        ]}
+      >
+        {icon ? <View style={styles.icon}>{icon}</View> : null}
+        <View style={styles.titles}>
+          {isTextNode(title) ? (
+            <Text style={[styles.title, { color: open && variant === 'default' ? tint : colors.foreground }]}>{title}</Text>
+          ) : (
+            title
+          )}
+          {subtitle ? <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>{subtitle}</Text> : null}
+        </View>
+        <Animated.View
+          style={{ transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }] }}
+        >
+          <Svg width={18} height={18} viewBox="0 0 24 24">
+            <Path
+              d="M6 9l6 6 6-6"
+              stroke={open ? tint : colors.mutedForeground}
+              strokeWidth={2.2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </Svg>
+        </Animated.View>
+      </Pressable>
+
+      <Animated.View
+        style={{ height: progress.interpolate({ inputRange: [0, 1], outputRange: [0, height] }), overflow: 'hidden' }}
+        accessibilityElementsHidden={!open}
+        importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+      >
+        <Animated.View
+          onLayout={onLayout}
+          pointerEvents={open ? 'auto' : 'none'}
+          style={[
+            styles.body,
+            {
+              paddingHorizontal: pad,
+              paddingLeft: pad + (icon ? 36 : 0),
+              opacity: progress.interpolate({ inputRange: [0, 0.6, 1], outputRange: [0, 0.4, 1] }),
+              transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }],
+            },
+          ]}
+        >
+          {isTextNode(children) ? (
+            <Text style={[styles.text, { color: colors.mutedForeground }]}>{children}</Text>
+          ) : (
+            children
+          )}
+        </Animated.View>
+      </Animated.View>
+    </View>
+  );
+}
+
+Accordion.Item = AccordionItem;
+
+const styles = StyleSheet.create({
+  separated: { gap: 10 },
+  header: { flexDirection: 'row', alignItems: 'center', minHeight: 56, paddingVertical: 14, gap: 12 },
+  icon: { width: 24, alignItems: 'center' },
+  titles: { flex: 1, gap: 2 },
+  title: { fontSize: 15.5, fontWeight: '400', letterSpacing: -0.1 },
+  subtitle: { fontSize: 13, lineHeight: 18 },
+  body: { position: 'absolute', top: 0, left: 0, right: 0, paddingBottom: 16 },
+  text: { fontSize: 14.5, lineHeight: 21 },
+});