@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/confetti.json

@@ -0,0 +1,102 @@
+{
+  "name": "confetti",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "Confetti",
+  "files": [
+    "src/components/ui/confetti.tsx"
+  ],
+  "summary": "Confetti that flies on real arcs with gravity and drag, then flutters as it falls.",
+  "props": [
+    [
+      "count",
+      "number",
+      "80",
+      "Pieces per burst (max 160)."
+    ],
+    [
+      "colors",
+      "string[]",
+      "vivid mix",
+      "Piece colours."
+    ],
+    [
+      "origin",
+      "\"top\" | \"center\" | \"bottom\"",
+      "\"bottom\"",
+      "Rain from the top, pop outward, or two cannons from the bottom corners."
+    ],
+    [
+      "duration",
+      "number",
+      "2600",
+      "How long a burst lasts, in ms."
+    ],
+    [
+      "trigger",
+      "unknown",
+      "—",
+      "Fire a burst whenever this value changes — no ref needed."
+    ],
+    [
+      "autoplay",
+      "boolean",
+      "false",
+      "Fire once on mount."
+    ],
+    [
+      "onDone",
+      "() => void",
+      "—",
+      "A burst finished."
+    ],
+    [
+      "ref.burst(options?)",
+      "{ origin?, x?, y?, count?, colors? }",
+      "—",
+      "Fire a burst (they can overlap); x / y place a center burst."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "fills its parent",
+      "The overlay never takes touches."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "Each burst launches pieces with velocity, gravity and air drag, all moved by one native-driven animation. Bursts can overlap."
+    ],
+    [
+      "Touch",
+      "The overlay fills its parent and never takes touches."
+    ],
+    [
+      "Reduced motion",
+      "Bursts launch a quarter of the pieces."
+    ],
+    [
+      "Screen readers",
+      "The overlay is hidden from assistive tech."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Confetti } from '@/components/ui/confetti';\n\nconst [orders, setOrders] = useState(0);\n<Confetti trigger={orders} origin=\"bottom\" />",
+  "examples": [
+    {
+      "name": "Celebrate",
+      "title": "Celebrate",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Celebrate() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ height: 420, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 }}>\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Rain",
+      "title": "Rain",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Rain() {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}>\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "TapToPop",
+      "title": "Tap To Pop",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function TapToPop() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/coupon.json

@@ -0,0 +1,192 @@
+{
+  "name": "coupon",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "Coupon",
+  "files": [
+    "src/components/ui/coupon.tsx"
+  ],
+  "summary": "A perforated coupon with a copyable code that can tilt in 3D and flip to its terms.",
+  "props": [
+    [
+      "value",
+      "string",
+      "—",
+      "The headline: \"50%\", \"₹200\", \"FREE\", \"BOGO\"."
+    ],
+    [
+      "unit / prefix",
+      "string",
+      "—",
+      "Under / above the value: \"OFF\", \"FLAT\", \"UP TO\"."
+    ],
+    [
+      "title / description",
+      "string",
+      "—",
+      "What the offer is and its conditions."
+    ],
+    [
+      "code",
+      "string",
+      "—",
+      "Promo code in a dashed chip — tap to copy when onCopy is set."
+    ],
+    [
+      "brand / logo",
+      "string / ReactNode",
+      "—",
+      "Who it's from."
+    ],
+    [
+      "expires",
+      "string",
+      "—",
+      "Expiry line (\"Valid till 31 Dec\")."
+    ],
+    [
+      "expiresAt",
+      "Date | number",
+      "—",
+      "Live countdown (\"Ends in 05:42:10\"); turns expired when it passes."
+    ],
+    [
+      "terms",
+      "string[]",
+      "—",
+      "Shown on the back — the T&C link turns the coupon over."
+    ],
+    [
+      "status",
+      "\"available\" | \"applied\" | \"used\" | \"expired\" | \"locked\"",
+      "\"available\"",
+      "Applied shows a green ring; used / expired dim with a stamp; locked goes grey."
+    ],
+    [
+      "lockedHint",
+      "string",
+      "—",
+      "Why it's locked (\"Add ₹120 more to unlock\")."
+    ],
+    [
+      "theme",
+      "\"sunset\" | \"candy\" | \"ocean\" | \"lime\" | \"gold\" | \"fire\" | \"neon\" | \"ink\" | \"paper\" | \"holo\" | CouponTheme",
+      "\"sunset\"",
+      "Preset, or { fill, ink, accent?, body?, bodyInk?, pattern? } — fill can be a gradient."
+    ],
+    [
+      "pattern",
+      "\"none\" | \"dots\" | \"stripes\" | \"grid\" | \"waves\" | \"sunburst\" | \"confetti\"",
+      "theme's",
+      "Texture on the value panel."
+    ],
+    [
+      "layout",
+      "\"horizontal\" | \"vertical\"",
+      "\"horizontal\"",
+      "Value panel on the left, or on top."
+    ],
+    [
+      "variant",
+      "\"ticket\" | \"stamp\" | \"receipt\" | \"scallop\" | \"cutout\"",
+      "\"ticket\"",
+      "Outline: notches, perforations, torn zigzag ends, wavy edges, or a dashed cut-here line."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Compact for long lists, large for a hero."
+    ],
+    [
+      "shine",
+      "boolean",
+      "false",
+      "A light sweep across the value panel every few seconds."
+    ],
+    [
+      "tilt / holo / idle",
+      "boolean",
+      "false",
+      "3D tilt toward the finger; rainbow foil sheen; slow sway at rest."
+    ],
+    [
+      "onCopy",
+      "(code) => void",
+      "—",
+      "Called from the code chip — wire it to expo-clipboard."
+    ],
+    [
+      "onApply",
+      "() => void",
+      "—",
+      "Shows the Apply button."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Tap on the coupon itself (open details, select it)."
+    ],
+    [
+      "flipped / defaultFlipped / onFlip",
+      "boolean / boolean / (flipped) => void",
+      "— / false / —",
+      "Controlled or uncontrolled side."
+    ],
+    [
+      "labels",
+      "{ copy?, copied?, apply?, applied?, used?, expired?, locked?, endsIn?, terms?, termsTitle?, back? }",
+      "English",
+      "Every built-in string, for translation."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Width, margins."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the code chip calls onCopy and flips its icon to a check. The T&C link turns the coupon over to its terms."
+    ],
+    [
+      "Motion",
+      "With tilt it leans toward your finger with a moving reflection, holo adds a rainbow sheen, and shine sweeps light across the value panel."
+    ],
+    [
+      "Screen readers",
+      "The code chip is a button that reads the copy label and the code. Apply is a button with disabled and selected state."
+    ]
+  ],
+  "usage": "import { Coupon } from '@/components/ui/coupon';\n\n<Coupon\n  value=\"50%\"\n  unit=\"Off\"\n  title=\"Your first order, on us\"\n  code=\"GLOW50\"\n  onApply={applyCoupon}\n/>",
+  "examples": [
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nconst logo = (id: number) => <Image alt=\"\" source={{ uri: `https://picsum.photos/id/${id}/64/64` }} style={{ width: 18, height: 18, borderRadius: 5 }} />;\n\nexport default function Hero() {\n  const { colors } = useKit();\n  const [applied, setApplied] = useState(false);\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ gap: 14, paddingVertical: 8 }}>\n      <View>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '800', letterSpacing: -0.5 }}>Just for you</Text>\n        <Text style={{ color: colors.mutedForeground, fontSize: 13 }}>Tilt the coupon · tap T&C to flip it</Text>\n      </View>\n      <Coupon\n        tilt\n        holo\n        idle\n        shine\n        theme=\"candy\"\n        size=\"lg\"\n        brand=\"Glow Beauty\"\n        logo={logo(64)}\n        prefix=\"Flat\"\n        value=\"50%\"\n        unit=\"Off\"\n        title=\"Your first order, on us\"\n        description=\"Up to ₹300 off on skincare & makeup\"\n        code=\"GLOW50\"\n        expires=\"Valid till 31 Dec\"\n        terms={['Min. order ₹699', 'Once per account', 'Not valid on gift cards', 'Can’t be combined with other offers']}\n        status={applied ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => {\n          setApplied(true);\n          confetti.current?.burst();\n        }}\n      />\n      {applied ? (\n        <Pressable onPress={() => setApplied(false)} accessibilityRole=\"button\" style={{ alignSelf: 'center', padding: 8 }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>Remove coupon</Text>\n        </Pressable>\n      ) : null}\n      <Confetti ref={confetti} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "OffersList",
+      "title": "Offers List",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nconst logo = (id: number) => <Image alt=\"\" source={{ uri: `https://picsum.photos/id/${id}/64/64` }} style={{ width: 18, height: 18, borderRadius: 5 }} />;\n\nexport default function OffersList() {\n  const { colors } = useKit();\n  const [applied, setApplied] = useState<string | null>('SWIGGY60');\n  const [soon] = useState(() => Date.now() + 2 * 3600_000 + 14 * 60_000);\n  return (\n    <View style={{ gap: 14 }}>\n      <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: '800' }}>Offers for you</Text>\n      <Coupon\n        theme=\"fire\"\n        brand=\"Swiggy\"\n        logo={logo(292)}\n        value=\"60%\"\n        unit=\"Off\"\n        title=\"Up to ₹120 on your next meal\"\n        code=\"SWIGGY60\"\n        expiresAt={soon}\n        status={applied === 'SWIGGY60' ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => setApplied('SWIGGY60')}\n      />\n      <Coupon\n        theme=\"ocean\"\n        variant=\"stamp\"\n        brand=\"HDFC Bank\"\n        prefix=\"Instant\"\n        value=\"₹250\"\n        unit=\"Off\"\n        title=\"On HDFC credit cards\"\n        description=\"Orders above ₹1,500\"\n        code=\"HDFC250\"\n        status={applied === 'HDFC250' ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => setApplied('HDFC250')}\n      />\n      <Coupon\n        theme=\"lime\"\n        variant=\"receipt\"\n        brand=\"BigBasket\"\n        value=\"FREE\"\n        unit=\"Delivery\"\n        title=\"Free delivery on groceries\"\n        code=\"FREEDEL\"\n        status=\"locked\"\n        lockedHint=\"Add ₹120 more to unlock\"\n        onApply={() => {}}\n      />\n      <Coupon theme=\"ink\" variant=\"scallop\" brand=\"Myntra\" value=\"BOGO\" unit=\"Deal\" title=\"Buy 1 get 1 on tees\" code=\"BOGOTEE\" status=\"expired\" onApply={() => {}} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Shapes",
+      "title": "Shapes",
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\n\nexport default function Shapes() {\n  return (\n    <View style={{ gap: 14 }}>\n      <Coupon size=\"sm\" theme=\"sunset\" variant=\"ticket\" value=\"30%\" unit=\"Off\" title=\"Ticket — classic notches\" code=\"TICKET30\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"ocean\" variant=\"stamp\" value=\"₹99\" unit=\"Off\" title=\"Stamp — perforated edges\" code=\"STAMP99\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"gold\" variant=\"receipt\" value=\"2X\" unit=\"Points\" title=\"Receipt — torn zigzag ends\" code=\"RECEIPT2X\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"candy\" variant=\"scallop\" value=\"FREE\" unit=\"Gift\" title=\"Scallop — wavy edges\" code=\"SCALLOP\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"paper\" variant=\"cutout\" value=\"25%\" unit=\"Off\" title=\"Cut-out — clip along the line\" code=\"CLIPME25\" onCopy={() => {}} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Grid",
+      "title": "Grid",
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\n\nexport default function Grid() {\n  const offers = [\n    { theme: 'neon' as const, brand: 'Paytm', value: '₹100', unit: 'Cashback', title: 'On UPI payments', code: 'PAYTM100' },\n    { theme: 'gold' as const, brand: 'Amex', value: '10%', unit: 'Off', title: 'Weekend dining', code: 'AMEX10' },\n    { theme: 'sunset' as const, brand: 'Zomato', value: '₹75', unit: 'Off', title: 'Orders above ₹299', code: 'ZOMATO75' },\n    { theme: 'holo' as const, brand: 'Nykaa', value: '3X', unit: 'Points', title: 'This weekend only', code: 'NYKAA3X' },\n  ];\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>\n      {offers.map((o) => (\n        <Coupon key={o.code} {...o} layout=\"vertical\" size=\"sm\" variant={o.theme === 'gold' ? 'stamp' : 'ticket'} onCopy={() => {}} style={{ width: '47%', flexGrow: 1 }} />\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "FlashSale",
+      "title": "Flash Sale",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nexport default function FlashSale() {\n  const { colors } = useKit();\n  const [ends, setEnds] = useState(() => Date.now() + 47_000);\n  return (\n    <View style={{ gap: 14 }}>\n      <Coupon\n        theme=\"sunset\"\n        layout=\"vertical\"\n        size=\"lg\"\n        shine\n        brand=\"Flash sale\"\n        prefix=\"Extra\"\n        value=\"70%\"\n        unit=\"Off\"\n        title=\"Sneakers · next 47 seconds\"\n        description=\"Ends when the timer does — no extensions\"\n        code=\"FLASH70\"\n        expiresAt={ends}\n        onCopy={() => {}}\n        onApply={() => {}}\n      />\n      <Pressable onPress={() => setEnds(Date.now() + 47_000)} accessibilityRole=\"button\" style={{ alignSelf: 'center', padding: 8 }}>\n        <Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>Restart timer</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/cube-pager.json

@@ -0,0 +1,100 @@
+{
+  "name": "cube-pager",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "CubePager",
+  "files": [
+    "src/components/ui/cube-pager.tsx"
+  ],
+  "summary": "Swipeable pages that turn like the faces of a cube, with flick momentum.",
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "One child per page."
+    ],
+    [
+      "height",
+      "number",
+      "260",
+      "Page height."
+    ],
+    [
+      "effect",
+      "\"cube\" | \"inside\" | \"flip\"",
+      "\"cube\"",
+      "Outside of a cube, its inner walls, or each page spinning in place."
+    ],
+    [
+      "index",
+      "number",
+      "—",
+      "Controlled page."
+    ],
+    [
+      "defaultIndex",
+      "number",
+      "0",
+      "Uncontrolled initial page."
+    ],
+    [
+      "onIndexChange",
+      "(index: number) => void",
+      "—",
+      "Fires when the page changes."
+    ],
+    [
+      "pagination",
+      "boolean",
+      "true",
+      "Dots under the pager."
+    ],
+    [
+      "shade",
+      "boolean",
+      "true",
+      "Darken faces as they turn away."
+    ],
+    [
+      "accent",
+      "string",
+      "theme foreground",
+      "Active dot colour."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius of the pages."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Turn swiping off (dots and a controlled index still work)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Pages follow your finger. A quick flick or a drag past 35% turns the page, and the first and last pages rubber-band."
+    ],
+    [
+      "Motion",
+      "Pages rotate around their shared edge in 3D (cube, inside or flip) and darken as they turn away when shade is on."
+    ],
+    [
+      "Screen readers",
+      "The pager is adjustable with a \"2 / 5\" value and increment and decrement actions. Off-screen pages are hidden and dots are buttons."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/dashboard.json

@@ -0,0 +1,123 @@
+{
+  "name": "dashboard",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Dashboard",
+  "files": [
+    "src/components/blocks/dashboard.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "data",
+      "{ userName?, avatar?, periods: Record<'day' | 'week' | 'month', { revenue, delta, series, labels?, kpis }>, transactions }",
+      "sample merchant",
+      "Everything the screen shows. KPIs: { id, label, value, format?: 'money' | 'count' | 'percent', delta?, trend?, invert? }. Transactions: { id, title, subtitle?, amount (signed), category?, pending? }."
+    ],
+    [
+      "currency",
+      "string",
+      "'₹'",
+      "Symbol placed before money values."
+    ],
+    [
+      "formatMoney",
+      "(value: number) => string",
+      "—",
+      "Custom money formatter (overrides currency), e.g. Intl.NumberFormat or en-IN grouping."
+    ],
+    [
+      "title",
+      "string",
+      "'Overview'",
+      "Large title."
+    ],
+    [
+      "defaultPeriod / period",
+      "'day' | 'week' | 'month'",
+      "'week'",
+      "Uncontrolled initial period, or controlled period."
+    ],
+    [
+      "onPeriodChange",
+      "(period) => void",
+      "—",
+      "Segmented control changed."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Shows skeleton placeholders for the chart, KPIs, actions and transactions."
+    ],
+    [
+      "onRefresh",
+      "() => void | Promise",
+      "—",
+      "Enables pull-to-refresh; a returned promise keeps the spinner until it settles."
+    ],
+    [
+      "refreshing",
+      "boolean",
+      "—",
+      "Controlled refreshing flag."
+    ],
+    [
+      "quickActions",
+      "{ id, label, icon: 'send' | 'request' | 'topup' | 'cards' | 'more' }[]",
+      "Send · Request · Top up · Cards",
+      "Round shortcut buttons under the KPIs."
+    ],
+    [
+      "onQuickAction",
+      "(action) => void",
+      "—",
+      "A quick action was tapped."
+    ],
+    [
+      "onSelectTransaction",
+      "(transaction) => void",
+      "—",
+      "Makes transaction rows pressable."
+    ],
+    [
+      "onSeeAllTransactions",
+      "() => void",
+      "—",
+      "Shows a “See all” link beside the section heading."
+    ],
+    [
+      "onSelectKpi",
+      "(kpi) => void",
+      "—",
+      "Makes KPI tiles pressable."
+    ],
+    [
+      "onPressAvatar / onPressNotifications",
+      "() => void",
+      "—",
+      "Header avatar and bell."
+    ],
+    [
+      "notificationBadge",
+      "boolean | number",
+      "—",
+      "Red dot on the bell."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Chart, quick action and refresh colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}