@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/ring-carousel.json

@@ -0,0 +1,122 @@
+{
+  "name": "ring-carousel",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "RingCarousel",
+  "files": [
+    "src/components/ui/ring-carousel.tsx"
+  ],
+  "summary": "Cards on a 3D ring you spin with a swipe; it snaps and loops forever.",
+  "props": [
+    [
+      "data",
+      "T[]",
+      "—",
+      "Items, one card each."
+    ],
+    [
+      "renderItem",
+      "({ item, index, active }) => ReactNode",
+      "—",
+      "Render a card. `active` is true for the card facing you."
+    ],
+    [
+      "keyExtractor",
+      "(item: T, index: number) => string",
+      "index",
+      "React key for each card."
+    ],
+    [
+      "itemWidth",
+      "number",
+      "170",
+      "Card width."
+    ],
+    [
+      "itemHeight",
+      "number",
+      "230",
+      "Card height."
+    ],
+    [
+      "spacing",
+      "number",
+      "360 / count (≤ 45)",
+      "Degrees between neighbours."
+    ],
+    [
+      "autoplay",
+      "boolean | number",
+      "false",
+      "Turn every 3s (or N ms); pauses while touched."
+    ],
+    [
+      "index",
+      "number",
+      "—",
+      "Controlled front card."
+    ],
+    [
+      "defaultIndex",
+      "number",
+      "0",
+      "Uncontrolled initial front card."
+    ],
+    [
+      "onIndexChange",
+      "(index: number) => void",
+      "—",
+      "Fires when the front card changes."
+    ],
+    [
+      "onPress",
+      "(item: T, index: number) => void",
+      "—",
+      "Tap on the front card."
+    ],
+    [
+      "pagination",
+      "boolean",
+      "true",
+      "Dots under the ring."
+    ],
+    [
+      "accent",
+      "string",
+      "theme foreground",
+      "Active dot colour."
+    ],
+    [
+      "radius",
+      "number",
+      "18",
+      "Corner radius of each card."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Horizontal drags spin the ring and a flick carries it a little further before snapping. Tapping a side card turns to it; tapping the front card calls onPress."
+    ],
+    [
+      "Motion",
+      "Neighbours turn, shrink and fall into shadow as they go round the back. With autoplay it advances every 3s by default and pauses while touched."
+    ],
+    [
+      "Screen readers",
+      "The ring is one adjustable element ('2 / 7'): swipe up or down to turn it, double-tap to press the front card. Side cards are hidden."
+    ],
+    [
+      "Platforms",
+      "The loop runs on the native driver via Animated.modulo. Each card turns in its own flat layer so iOS never slices a side card into the front one."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/scratch-card.json

@@ -0,0 +1,110 @@
+{
+  "name": "scratch-card",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "ScratchCard",
+  "files": [
+    "src/components/ui/scratch-card.tsx"
+  ],
+  "summary": "Rub a shimmering foil away; past a threshold the rest clears with a haptic tap.",
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "The reward underneath; it sets the card's size."
+    ],
+    [
+      "foil",
+      "\"silver\" | \"gold\" | \"holo\" | \"rose\" | \"midnight\" | { colors, ink }",
+      "\"silver\"",
+      "Foil look."
+    ],
+    [
+      "label / sublabel",
+      "string",
+      "\"Scratch to reveal\" / —",
+      "Printed on the foil."
+    ],
+    [
+      "threshold",
+      "number",
+      "0.55",
+      "Share of the foil to scratch before the rest clears."
+    ],
+    [
+      "brushSize",
+      "number",
+      "22",
+      "Brush radius in points."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius of the foil."
+    ],
+    [
+      "revealed",
+      "boolean",
+      "—",
+      "Controlled: true shows the reward, false puts the foil back."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Turn scratching off."
+    ],
+    [
+      "onScratchStart / onScratchEnd",
+      "() => void",
+      "—",
+      "Finger down / up — e.g. pause a parent ScrollView."
+    ],
+    [
+      "onProgress",
+      "(fraction) => void",
+      "—",
+      "0 … 1 while scratching."
+    ],
+    [
+      "onReveal",
+      "() => void",
+      "—",
+      "Once, when the foil clears."
+    ],
+    [
+      "ref",
+      "{ reveal(), reset() }",
+      "—",
+      "Clear the foil, or put a fresh one on."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Width, margins."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Your finger scratches the foil away with a round brush, and once threshold of it is gone the rest clears by itself. The card keeps the touch, so a parent ScrollView cannot steal it mid-rub."
+    ],
+    [
+      "Motion",
+      "A light band sweeps across the foil until the first touch. On reveal the foil fades out while scaling up slightly."
+    ],
+    [
+      "Haptics",
+      "A success notification plays when the foil clears."
+    ],
+    [
+      "Screen readers",
+      "The foil is a button labelled with label and sublabel, with the hint 'Double-tap to reveal'."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/search-bar.json

@@ -0,0 +1,160 @@
+{
+  "name": "search-bar",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "SearchBar",
+  "files": [
+    "src/components/ui/search-bar.tsx"
+  ],
+  "summary": "Focus pops the magnifier and springs in Cancel; suggestions drop down below.",
+  "props": [
+    [
+      "variant",
+      "\"default\" | \"filled\" | \"minimal\"",
+      "\"default\"",
+      "Outlined pill, iOS grey field, or a round icon that expands into a field."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "34 / 44 / 56pt tall; font, icons, padding and radius scale too."
+    ],
+    [
+      "value / defaultValue / onChangeText",
+      "string",
+      "—",
+      "Controlled or uncontrolled query."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Crossfades the magnifier into a spinning arc."
+    ],
+    [
+      "showCancel",
+      "boolean",
+      "true (false for minimal)",
+      "Slide a Cancel button in while searching."
+    ],
+    [
+      "cancelLabel",
+      "string",
+      "\"Cancel\"",
+      "Cancel button text."
+    ],
+    [
+      "onCancel",
+      "() => void",
+      "—",
+      "After Cancel clears the query and blurs."
+    ],
+    [
+      "onClear",
+      "() => void",
+      "—",
+      "After the clear button empties the query."
+    ],
+    [
+      "align",
+      "\"left\" | \"right\"",
+      "\"left\"",
+      "Minimal only: where the collapsed icon rests."
+    ],
+    [
+      "suggestions",
+      "{ key, label, hint?, icon?: 'recent' | 'trending' | 'search' }[]",
+      "—",
+      "Shown in a dropdown panel while focused; the matching text is bolded."
+    ],
+    [
+      "onSelectSuggestion",
+      "(item) => void",
+      "—",
+      "Called after a suggestion is picked (the query is set to its label)."
+    ],
+    [
+      "filterSuggestions",
+      "boolean",
+      "true",
+      "Filter suggestions by the query. Turn off to filter them yourself."
+    ],
+    [
+      "maxSuggestions",
+      "number",
+      "6",
+      "Most rows shown in the panel."
+    ],
+    [
+      "trailing",
+      "ReactNode",
+      "—",
+      "Rendered inside the field on the right, e.g. a filter or mic button."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus ring, caret and Cancel colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view around the field, cancel button and suggestions."
+    ],
+    [
+      "…TextInputProps",
+      "",
+      "",
+      "placeholder, onSubmitEditing, autoFocus, …"
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "On focus a halo glows and the magnifier pops; Cancel slides in as the field springs narrower and the clear button scales in. loading swaps the magnifier for a spinning arc."
+    ],
+    [
+      "Touch",
+      "The 'minimal' variant rests as a round icon and expands into a full field when tapped. Picking a suggestion fills the query and dismisses the keyboard."
+    ],
+    [
+      "Screen readers",
+      "The input has the search role, labelled by its placeholder. 'Clear search', Cancel and each suggestion are labelled buttons."
+    ],
+    [
+      "Web",
+      "The browser outline is replaced by the border and halo, and the suggestion panel stays open a beat after blur so clicks land."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { SearchBar } from '@/components/ui/search-bar';\n\nconst [query, setQuery] = useState('');\n<SearchBar value={query} onChangeText={setQuery} placeholder=\"Search products\" />",
+  "examples": [
+    {
+      "name": "WithSuggestions",
+      "title": "With Suggestions",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { SearchBar, type SearchSuggestion } from '@/components/ui/search-bar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst SUGGESTIONS: SearchSuggestion[] = [\n  { key: 'r1', label: 'Noise cancelling headphones', icon: 'recent' },\n  { key: 'r2', label: 'Running shoes', icon: 'recent' },\n  { key: 't1', label: 'Mechanical keyboard', icon: 'trending', hint: 'Trending' },\n  { key: 't2', label: 'Standing desk', icon: 'trending', hint: '2.1k searches' },\n  { key: 's1', label: 'Wireless charger', hint: 'Electronics' },\n  { key: 's2', label: 'Coffee grinder', hint: 'Kitchen' },\n];\n\nexport default function WithSuggestions() {\n  const { colors } = useKit();\n  const [query, setQuery] = useState('');\n  const [picked, setPicked] = useState<string | null>(null);\n  return (\n    // Reserve room for the open list, so the bar stays put when suggestions drop down below it.\n    <View style={{ gap: 10, minHeight: 400 }}>\n      <SearchBar\n        value={query}\n        onChangeText={setQuery}\n        placeholder=\"Search products\"\n        suggestions={SUGGESTIONS}\n        maxSuggestions={5}\n        onSelectSuggestion={(item) => setPicked(item.label)}\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{picked ? `Showing results for “${picked}”` : 'Tap the field to see recent and trending searches'}</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "LiveResults",
+      "title": "Live Results",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { SearchBar, type SearchSuggestion } from '@/components/ui/search-bar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst CONTACTS = [\n  { name: 'Aarav Mehta', role: 'Design lead' },\n  { name: 'Priya Nair', role: 'Product manager' },\n  { name: 'Rohan Kapoor', role: 'iOS engineer' },\n  { name: 'Sara Ali', role: 'Marketing' },\n  { name: 'Vikram Rao', role: 'Backend engineer' },\n];\n\nexport default function LiveResults() {\n  const { colors } = useKit();\n  const [query, setQuery] = useState('');\n  const [loading, setLoading] = useState(false);\n  useEffect(() => {\n    if (!query) return setLoading(false);\n    setLoading(true);\n    const id = setTimeout(() => setLoading(false), 600);\n    return () => clearTimeout(id);\n  }, [query]);\n  const q = query.trim().toLowerCase();\n  const results = CONTACTS.filter((c) => c.name.toLowerCase().includes(q) || c.role.toLowerCase().includes(q));\n  return (\n    <Card>\n      <SearchBar variant=\"filled\" value={query} onChangeText={setQuery} loading={loading} placeholder=\"Search people\" />\n      {loading ? (\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Searching your team…</Text>\n      ) : results.length ? (\n        results.slice(0, 4).map((c) => (\n          <View key={c.name} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View style={{ width: 34, height: 34, borderRadius: 17, backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }}>\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{c.name.split(' ').map((p) => p[0]).join('')}</Text>\n            </View>\n            <View>\n              <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>{c.name}</Text>\n              <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>{c.role}</Text>\n            </View>\n          </View>\n        ))\n      ) : (\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>No one matches “{query}”</Text>\n      )}\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Minimal",
+      "title": "Minimal",
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { SearchBar, type SearchSuggestion } from '@/components/ui/search-bar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Minimal() {\n  const { colors } = useKit();\n  return (\n    <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.4, color: colors.foreground }}>Inbox</Text>\n      <SearchBar variant=\"minimal\" align=\"right\" placeholder=\"Search mail\" style={{ flex: 1 }} />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "WithFilter",
+      "title": "With Filter",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { SearchBar, type SearchSuggestion } from '@/components/ui/search-bar';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction FilterButton({ count, onPress }: { count: number; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      hitSlop={8}\n      accessibilityRole=\"button\"\n      accessibilityLabel={`Filters, ${count} active`}\n      style={{ height: 32, paddingHorizontal: 10, borderRadius: radius.capsule(32), backgroundColor: count ? colors.accent : colors.muted, flexDirection: 'row', alignItems: 'center', gap: 6 }}\n    >\n      <View style={{ gap: 3, alignItems: 'center' }}>\n        {[14, 10, 6].map((w) => (\n          <View key={w} style={{ width: w, height: 2, borderRadius: 1, backgroundColor: count ? colors.accentForeground : colors.mutedForeground }} />\n        ))}\n      </View>\n      {count ? <Text style={{ fontSize: 12.5, fontWeight: '400', color: colors.accentForeground }}>{count}</Text> : null}\n    </Pressable>\n  );\n}\n\nexport default function WithFilter() {\n  const { colors } = useKit();\n  const [count, setCount] = useState(2);\n  return (\n    <View style={{ gap: 10 }}>\n      <SearchBar\n        placeholder=\"Stays in Goa\"\n        showCancel={false}\n        trailing={<FilterButton count={count} onPress={() => setCount((c) => (c + 1) % 4)} />}\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{count ? `${count} filters · Pool, Under ₹8,000` : 'No filters applied'}</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { SearchBar, type SearchSuggestion } from '@/components/ui/search-bar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      {(['sm', 'md', 'lg'] as const).map((size, i) => (\n        <View key={size} style={{ gap: 6 }}>\n          <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{['Small', 'Medium', 'Large'][i]}</Text>\n          <SearchBar size={size} variant={i === 1 ? 'default' : 'filled'} defaultValue=\"Coffee near me\" showCancel={false} />\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/search-results.json

@@ -0,0 +1,123 @@
+{
+  "name": "search-results",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "SearchResults",
+  "files": [
+    "src/components/blocks/search-results.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "results",
+      "{ id, title, subtitle?, rating, reviews?, price, distance?, freeDelivery?, open?, color?, icon? }[]",
+      "6 coffee results (₹)",
+      "Results for the current query. Filtered and sorted locally."
+    ],
+    [
+      "defaultQuery",
+      "string",
+      "'coffee'",
+      "Initial query in the field and the result count. Empty shows Recent and Trending."
+    ],
+    [
+      "totalCount",
+      "number",
+      "128",
+      "Backend total shown while no filter is active."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Skeleton rows and a spinning search icon."
+    ],
+    [
+      "filters",
+      "('price' | 'rating' | 'free-delivery' | 'open')[]",
+      "—",
+      "Controlled quick filters."
+    ],
+    [
+      "defaultFilters",
+      "SearchFilter[]",
+      "[]",
+      "Initial filters when uncontrolled."
+    ],
+    [
+      "onFiltersChange",
+      "(filters) => void",
+      "—",
+      "Chips or the sheet changed the filters."
+    ],
+    [
+      "recentSearches / trendingSearches",
+      "string[]",
+      "3 / 4 samples",
+      "Shown while the field is empty (recent as rows with Clear, trending as chips). Submitted searches join Recent."
+    ],
+    [
+      "onSearch",
+      "(query: string) => void",
+      "—",
+      "Submitted from the keyboard, a recent / trending search or a no-results chip."
+    ],
+    [
+      "onSelect",
+      "(result) => void",
+      "—",
+      "A result row was tapped."
+    ],
+    [
+      "onClearRecent",
+      "() => void",
+      "—",
+      "Clear next to Recent was tapped."
+    ],
+    [
+      "autoFocus",
+      "boolean",
+      "false",
+      "Focus the field on mount."
+    ],
+    [
+      "currency",
+      "string",
+      "'₹'",
+      "Symbol placed before prices by the default formatter (Indian digit grouping, decimals only when non-zero)."
+    ],
+    [
+      "formatPrice",
+      "(amount) => string",
+      "'₹1,23,456'",
+      "Money formatter for rows, chips and the slider. Overrides currency — use for Intl, other grouping or suffix symbols like '12,50 €'."
+    ],
+    [
+      "maxPrice",
+      "number",
+      "2000",
+      "Top of the price-range slider; the top value reads as \"and up\"."
+    ],
+    [
+      "tintedThumbnails",
+      "boolean",
+      "false",
+      "Tint thumbnails with each result's color instead of the neutral default."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active chip, slider and button colour (black in light, white in dark by default)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/segmented-control.json

@@ -0,0 +1,123 @@
+{
+  "name": "segmented-control",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "SegmentedControl",
+  "files": [
+    "src/components/ui/segmented-control.tsx"
+  ],
+  "summary": "A liquid indicator that stretches as it slides; drag it to scrub.",
+  "props": [
+    [
+      "options",
+      "(string | { value, label?, icon?, disabled? })[]",
+      "—",
+      "Segments. `icon` can be a node or ({ active, color }) => node."
+    ],
+    [
+      "value / onValueChange",
+      "string",
+      "—",
+      "Controlled selection (or use defaultValue; defaults to the first segment)."
+    ],
+    [
+      "defaultValue",
+      "string",
+      "first segment",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "variant",
+      "\"pill\" | \"underline\" | \"outline\"",
+      "\"pill\"",
+      "Raised pill on a track, tab underline, or tinted outline."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "32 / 40 / 48pt tall."
+    ],
+    [
+      "fullWidth",
+      "boolean",
+      "true",
+      "Equal-width segments filling the row, or segments sized to their labels."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Indicator colour (pill becomes a filled accent pill)."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick on change."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the track holding the segments."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The leading edge of the indicator springs ahead and the trailing edge catches up, so it stretches as it travels. Labels squish on press and bounce when selected."
+    ],
+    [
+      "Touch",
+      "A sideways drag that starts on the selected segment scrubs across the others; drags that start elsewhere are left to a parent ScrollView. Short segments get hitSlop up to 44pt."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays on each change (haptics, on by default)."
+    ],
+    [
+      "Screen readers",
+      "A tablist of tabs with selected and disabled state, labelled by each option's label or accessibilityLabel."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nconst [range, setRange] = useState('Week');\n<SegmentedControl options={['Day', 'Week', 'Month', 'Year']} value={range} onValueChange={setRange} />",
+  "examples": [
+    {
+      "name": "Pill",
+      "title": "Pill",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Pill() {\n  return <SegmentedControl options={['Day', 'Week', 'Month', 'Year']} defaultValue=\"Week\" />;\n}\n"
+    },
+    {
+      "name": "Underline",
+      "title": "Underline",
+      "code": "import React, { useState } from 'react';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Underline() {\n  const [tab, setTab] = useState('overview');\n  return (\n    <SegmentedControl\n      variant=\"underline\"\n      fullWidth={false}\n      value={tab}\n      onValueChange={setTab}\n      options={[\n        { value: 'overview', label: 'Overview' },\n        { value: 'activity', label: 'Activity' },\n        { value: 'reviews', label: 'Reviews (128)' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Outline",
+      "title": "Outline",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Outline() {\n  return <SegmentedControl variant=\"outline\" options={['Monthly', 'Yearly · save 20%']} defaultValue=\"Yearly · save 20%\" />;\n}\n"
+    },
+    {
+      "name": "WithIcons",
+      "title": "With Icons",
+      "code": "import { Text, View } from 'react-native';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function WithIcons() {\n  const glyph = (g: string) => ({ color }: { color: string }) => <Text style={{ fontSize: 15, color }}>{g}</Text>;\n  return (\n    <SegmentedControl\n      defaultValue=\"grid\"\n      options={[\n        { value: 'list', label: 'List', icon: glyph('☰') },\n        { value: 'grid', label: 'Grid', icon: glyph('▦') },\n        { value: 'map', label: 'Map', icon: glyph('◎') },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Accent",
+      "title": "Accent",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\nimport { useKit } from '@/lib/kit';\n\nexport default function Accent() {\n  const { colors } = useKit();\n  return (\n    <SegmentedControl\n      accent={colors.accent}\n      options={[\n        { value: 'buy', label: 'Buy' },\n        { value: 'rent', label: 'Rent' },\n        { value: 'sold', label: 'Sold' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Text, View } from 'react-native';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 12 }}>\n      <SegmentedControl size=\"sm\" options={['XS', 'S', 'M', 'L', 'XL']} defaultValue=\"M\" />\n      <SegmentedControl size=\"md\" options={['Small', 'Medium', 'Large']} defaultValue=\"Medium\" />\n      <SegmentedControl size=\"lg\" options={['Pickup', 'Delivery']} />\n    </View>\n  );\n}\n"
+    }
+  ]
+}