@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/progress-steps.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/progress-steps.tsx"
   ],
+  "summary": "Finished steps pop and draw a check while the line pours into the next one.",
   "props": [
     [
       "steps",
@@ -62,6 +63,29 @@
       "Style for the step row / column (the bar container in the bar variant)."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "When current changes, the finished node pops and draws its check, the connector fills toward the next step and the new step lights up. The current step's ring pulses."
+    ],
+    [
+      "Touch",
+      "With onStepPress, steps become buttons that squish on press; pressableSteps='completed' limits taps to finished steps."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays whenever current changes (haptics, on by default)."
+    ],
+    [
+      "Reduced motion",
+      "Steps move with a short timing instead of springs, the ring stops pulsing and the done node appears without the overshoot pop."
+    ],
+    [
+      "Screen readers",
+      "Each step reads like 'Step 2 of 4, Shipping, current'. The bar variant is a progressbar labelled 'Step N of M' with the step name."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\n\nconst [step, setStep] = useState(1);\n<ProgressSteps steps={['Cart', 'Shipping', 'Payment', 'Review']} current={step} onStepPress={setStep} pressableSteps=\"completed\" />",
   "examples": [
     {
       "name": "Checkout",

package/registry/_docs/progress.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/progress.tsx"
   ],
+  "summary": "A bar, ring or segments with a glowing head; finishing flashes and draws a check.",
   "props": [
     [
       "variant",
@@ -92,6 +93,25 @@
       "Style for the root view of the bar, ring or step row."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The fill springs to each value with a glow riding its head, and the ring's percentage counts up. Reaching max flashes the fill and morphs the value into a drawn check."
+    ],
+    [
+      "Reduced motion",
+      "The completion flash, moving stripes and segment pop and pulse are skipped. The fill still springs and indeterminate loops still run."
+    ],
+    [
+      "Screen readers",
+      "A progressbar with your label and its min, max and current value. Indeterminate progress is marked busy."
+    ],
+    [
+      "Platforms",
+      "Transforms and opacity use the native driver; only the ring's SVG stroke and the check drawing use the JS driver."
+    ]
+  ],
+  "usage": "import { Progress } from '@/components/ui/progress';\n\n<Progress value={64} label=\"Uploading trip-to-lisbon.mov\" showValue />\n<Progress variant=\"circular\" value={64} />",
   "examples": [
     {
       "name": "Linear",

package/registry/_docs/qr-code-button.json

@@ -0,0 +1,122 @@
+{
+  "name": "qr-code-button",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "QrCodeButton",
+  "files": [
+    "src/components/ui/qr-code-button.tsx"
+  ],
+  "summary": "A pill that morphs into a card with a real, scannable QR code.",
+  "props": [
+    [
+      "value",
+      "string",
+      "—",
+      "What the code encodes: a URL, a payment link, a ticket id."
+    ],
+    [
+      "label",
+      "string",
+      "'Show QR Code'",
+      "Text on the pill."
+    ],
+    [
+      "copyLabel",
+      "string",
+      "'Copy'",
+      "Copy button text."
+    ],
+    [
+      "copiedLabel",
+      "string",
+      "'Copied'",
+      "Shown after Copy is pressed."
+    ],
+    [
+      "onCopy",
+      "(value: string) => void",
+      "—",
+      "Wire your clipboard here (expo-clipboard)."
+    ],
+    [
+      "open",
+      "boolean",
+      "—",
+      "Controlled state."
+    ],
+    [
+      "defaultOpen",
+      "boolean",
+      "false",
+      "Uncontrolled initial state."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Opened or closed."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Pill height 36 / 44 / 52."
+    ],
+    [
+      "codeSize",
+      "number",
+      "168",
+      "Side of the code in points; the card wraps it."
+    ],
+    [
+      "color",
+      "string",
+      "white (dark) / primary (light)",
+      "Pill colour. The card stays white so the code scans."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "label",
+      "Screen reader label for the pill."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "Press swells the pill; it glides into the card while its label fades out and the code fades and scales in. Close glides it back."
+    ],
+    [
+      "Layout",
+      "Reserves the open card's size up front, so nothing around it moves and every control stays inside its own bounds (taps work on Android)."
+    ],
+    [
+      "Code",
+      "Encoded in the component: UTF-8 bytes, error correction M, smallest version that fits, mask chosen by the spec's penalty rules. Always dark on white so it scans in dark mode too."
+    ],
+    [
+      "Copy",
+      "Calls onCopy with the value and flips to a tick and \"Copied\" for 1.5 s."
+    ],
+    [
+      "Haptics",
+      "A light impact on open, a success tap on Copy, a tick on close."
+    ],
+    [
+      "Reduced motion",
+      "Opens and closes with a short fade."
+    ],
+    [
+      "Screen readers",
+      "A button with an expanded state; the code reads as \"QR code for …\"."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/radio-group.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/radio-group.tsx"
   ],
+  "summary": "The dot springs in with a ripple; cards light up and draw a check badge.",
   "props": [
     [
       "options",
@@ -62,6 +63,25 @@
       "Style for the group container (the bordered card in the segmented-list variant)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Rows squish on press in the default and card variants, and the default dot has extra hitSlop. Disabled options are dimmed and ignore taps."
+    ],
+    [
+      "Motion",
+      "The selected dot pops on a bouncy spring with a ripple ring. Cards tint their border and pop a self-drawing check; the list variant draws a tick."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays on each change (haptics, on by default)."
+    ],
+    [
+      "Screen readers",
+      "The group is a radiogroup and each option a radio with checked and disabled state. Descriptions are read as hints."
+    ]
+  ],
+  "usage": "import { RadioGroup } from '@/components/ui/radio-group';\n\n<RadioGroup\n  defaultValue=\"standard\"\n  options={[\n    { value: 'standard', label: 'Standard shipping', description: '4–6 business days · Free' },\n    { value: 'express', label: 'Express', description: '1–2 business days · $9' },\n  ]}\n/>",
   "examples": [
     {
       "name": "Default",

package/registry/_docs/rating.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/rating.tsx"
   ],
+  "summary": "Drag across the stars to rate; the top one throws a little spark burst.",
   "props": [
     [
       "value / onValueChange",
@@ -86,5 +87,28 @@
       "Style for the row of icons."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap or drag across the row to set the value, to half-icon precision with allowHalf. With clearable, tapping the current value clears it."
+    ],
+    [
+      "Motion",
+      "Icons fill smoothly and pop in a quick stagger with a wobble. When you raise the rating, the top icon throws a spark burst."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays for every step while tapping or dragging."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element read as 'N of 5'. Swipe up or down to change it by one step."
+    ],
+    [
+      "Web",
+      "Works with the mouse too, and shows a pointer cursor while interactive."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/ring-carousel.json

@@ -6,6 +6,7 @@
   "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",
@@ -98,5 +99,24 @@
       "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

@@ -6,6 +6,7 @@
   "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",
@@ -86,5 +87,24 @@
       "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

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/search-bar.tsx"
   ],
+  "summary": "Focus pops the magnifier and springs in Cancel; suggestions drop down below.",
   "props": [
     [
       "variant",
@@ -110,21 +111,40 @@
       "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"
+      "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/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\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({ screen }: DemoProps) {\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 }, screen ? { flex: 1 } : { 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"
+      "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/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { 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({ screen }: DemoProps) {\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 screen={screen}>\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"
+      "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/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { 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({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen} 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",

package/registry/_docs/search-results.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/search-results.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "results",
@@ -116,5 +117,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/segmented-control.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/segmented-control.tsx"
   ],
+  "summary": "A liquid indicator that stretches as it slides; drag it to scrub.",
   "props": [
     [
       "options",
@@ -68,6 +69,25 @@
       "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",