@expokit/cli 0.2.0 → 0.3.0

package/registry/_docs/tabs.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/tabs.tsx"
   ],
+  "summary": "Underline tabs whose indicator moves like liquid, leading edge first.",
   "props": [
     [
       "items",
@@ -80,6 +81,29 @@
       "Style for the root view wrapping the tab bar and content."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a tab or drag the content panes sideways; the underline follows your finger, with rubber-band resistance at the ends."
+    ],
+    [
+      "Motion",
+      "The underline is measured to each label and springs with the leading edge first. Badges pop, and an overflowing bar scrolls to centre the active tab."
+    ],
+    [
+      "Reduced motion",
+      "Springs become short timings, the bar scrolls without animating and badges change without the pop."
+    ],
+    [
+      "Haptics",
+      "A selection tick on every change; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The bar is a tablist of tabs with selected and disabled state; badges are read with the label, and inactive panes are hidden."
+    ]
+  ],
+  "usage": "import { Tabs } from '@/components/ui/tabs';\n\n<Tabs\n  items={[\n    { value: 'overview', label: 'Overview', content: <Overview /> },\n    { value: 'reviews', label: 'Reviews', badge: 128, content: <Reviews /> },\n  ]}\n/>",
   "examples": [
     {
       "name": "Underline",

package/registry/_docs/tag-input.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/tag-input.tsx"
   ],
+  "summary": "Chips that spring in on Enter or comma and shrink away as neighbours slide over.",
   "props": [
     [
       "value / defaultValue",
@@ -98,6 +99,25 @@
       "placeholder, keyboardType, …"
     ]
   ],
+  "behavior": [
+    [
+      "Keyboard",
+      "Enter or a separator commits the text as a chip. Backspace in an empty field highlights the last chip, and a second press removes it."
+    ],
+    [
+      "Motion",
+      "Chips pop in on a spring and shrink out on removal; duplicates bump and a rejected tag shakes the field."
+    ],
+    [
+      "Screen readers",
+      "Each chip has a 'Remove' button and each suggestion an 'Add' button; error messages land in a polite live region and the counter reads '3 of 5 tags'."
+    ],
+    [
+      "Web",
+      "The browser focus outline on the input is removed; the field draws its own focus state."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { TagInput } from '@/components/ui/tag-input';\n\nconst [skills, setSkills] = useState(['TypeScript']);\n<TagInput value={skills} onChange={setSkills} placeholder=\"Add a skill…\" suggestions={['React', 'Swift', 'Kotlin']} />",
   "examples": [
     {
       "name": "Skills",

package/registry/_docs/text-animation.json

@@ -0,0 +1,141 @@
+{
+  "name": "text-animation",
+  "category": "Motion",
+  "aliases": [
+    "text-effect",
+    "animated-text",
+    "typewriter",
+    "shimmer-text",
+    "scramble-text"
+  ],
+  "exportName": "AnimatedText",
+  "files": [
+    "src/components/ui/text-animation.tsx"
+  ],
+  "summary": "Reveal, shimmer, cascade, scramble and typewriter text effects.",
+  "props": [
+    [
+      "children",
+      "string",
+      "—",
+      "The text to animate."
+    ],
+    [
+      "variant",
+      "\"reveal\" | \"shimmer\" | \"cascade\" | \"scramble\" | \"typewriter\"",
+      "\"reveal\"",
+      "Which effect to play."
+    ],
+    [
+      "trigger",
+      "\"mount\" | \"change\"",
+      "\"change\" for cascade / typewriter, else \"mount\"",
+      "Animate once on mount, or also every time the text changes. A typewriter keeps typing when the new text extends the old (streaming)."
+    ],
+    [
+      "delay",
+      "number",
+      "0",
+      "ms before the first animation."
+    ],
+    [
+      "stagger",
+      "number",
+      "70 reveal · 80 shimmer · 28 cascade · 45 scramble · 32 typewriter",
+      "ms between words (reveal) or letters. Shimmer: ms of sweep per letter."
+    ],
+    [
+      "speed",
+      "number",
+      "1",
+      "Speed multiplier: 2 plays twice as fast."
+    ],
+    [
+      "color",
+      "string",
+      "theme foreground",
+      "Text colour."
+    ],
+    [
+      "caret",
+      "boolean",
+      "true",
+      "Blinking caret for the typewriter."
+    ],
+    [
+      "replayKey",
+      "string | number",
+      "—",
+      "Change it to replay the animation."
+    ],
+    [
+      "onComplete",
+      "() => void",
+      "—",
+      "Called when an animation finishes (not for the looping shimmer)."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "fontSize, fontWeight, lineHeight, letterSpacing, textAlign… for every letter."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "Reveal, shimmer and cascade run one native-driver clock per animation with spring curves pre-sampled into interpolations; scramble and typewriter use a light JS timer. Text wraps by word."
+    ],
+    [
+      "Reduced motion",
+      "Shows the final text immediately; shimmer stays static and the typewriter caret is hidden."
+    ],
+    [
+      "Screen readers",
+      "The whole string is one text element; the per-letter views are hidden. Cascade and typewriter announce new text when it changes (typewriter once streaming settles)."
+    ],
+    [
+      "Platforms",
+      "iOS, Android and web. Arabic, Hebrew, Indic, Thai and other connected scripts animate a word at a time so shaping is never broken; right-to-left text flows from the right."
+    ]
+  ],
+  "usage": "import { AnimatedText } from '@/components/ui/text-animation';\n\n<AnimatedText textStyle={{ fontSize: 28, fontWeight: '600' }}>\n  Ship native apps that feel alive.\n</AnimatedText>\n\n<AnimatedText variant=\"shimmer\">Thinking…</AnimatedText>\n<AnimatedText variant=\"cascade\">{status}</AnimatedText>",
+  "examples": [
+    {
+      "name": "Reveal",
+      "title": "Reveal",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport default function Reveal() {\n  const [run, setRun] = useState(0);\n  return (\n    <View style={{ gap: 16 }}>\n      <AnimatedText replayKey={run} textStyle={{ fontSize: 30, fontWeight: '600', letterSpacing: -0.8, lineHeight: 36 }}>\n        Ship native apps that feel alive.\n      </AnimatedText>\n      <Chip label=\"Replay\" onPress={() => setRun((r) => r + 1)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Thinking",
+      "title": "Thinking",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nexport default function Thinking() {\n  const { colors, radius } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, padding: 14, borderRadius: radius.lg, backgroundColor: colors.card, borderWidth: 1, borderColor: colors.border }}>\n      <View style={{ width: 28, height: 28, borderRadius: radius.capsule(28), backgroundColor: colors.accent }} />\n      <AnimatedText variant=\"shimmer\" textStyle={{ fontSize: 16 }}>\n        Thinking…\n      </AnimatedText>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "DeployStatus",
+      "title": "Deploy Status",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst STATUSES = ['Queued', 'Building', 'Deploying', 'Live'];\n\nexport default function DeployStatus() {\n  const { colors, radius } = useKit();\n  const [i, setI] = useState(0);\n  const status = STATUSES[i];\n  const live = status === 'Live';\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <View style={{ width: 10, height: 10, borderRadius: radius.capsule(10), backgroundColor: live ? colors.success : colors.warning }} />\n        <Text style={{ fontSize: 17, color: colors.mutedForeground }}>expokit.dev</Text>\n        <AnimatedText variant=\"cascade\" color={live ? colors.success : colors.foreground} textStyle={{ fontSize: 17, fontWeight: '600' }}>\n          {status}\n        </AnimatedText>\n      </View>\n      <Chip label=\"Next status\" onPress={() => setI((n) => (n + 1) % STATUSES.length)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Scramble",
+      "title": "Scramble",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport default function Scramble() {\n  const { colors, font } = useKit();\n  const [run, setRun] = useState(0);\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ gap: 4 }}>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Your referral code</Text>\n        <AnimatedText variant=\"scramble\" replayKey={run} textStyle={{ fontSize: 28, fontWeight: '600', letterSpacing: 2, fontFamily: font.mono }}>\n          SPRING-7Q2X\n        </AnimatedText>\n      </View>\n      <Chip label=\"Generate again\" onPress={() => setRun((r) => r + 1)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Streaming",
+      "title": "Streaming",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst ANSWER =\n  'Spring animations feel natural because they keep momentum: a flick carries its speed into the motion, and nothing stops dead.';\n\nexport default function Streaming() {\n  const { colors, radius } = useKit();\n  const [text, setText] = useState('');\n  const [run, setRun] = useState(0);\n  useEffect(() => {\n    // Simulates tokens arriving from a model, a few words at a time.\n    const words = ANSWER.split(' ');\n    let n = 0;\n    const id = setInterval(() => {\n      n = Math.min(words.length, n + 1 + Math.floor(Math.random() * 3));\n      setText(words.slice(0, n).join(' '));\n      if (n >= words.length) clearInterval(id);\n    }, 260);\n    return () => clearInterval(id);\n  }, [run]);\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ padding: 14, borderRadius: radius.lg, backgroundColor: colors.muted }}>\n        <AnimatedText key={run} variant=\"typewriter\" textStyle={{ fontSize: 16, lineHeight: 23 }}>\n          {text}\n        </AnimatedText>\n      </View>\n      <Chip\n        label=\"Ask again\"\n        onPress={() => {\n          setText('');\n          setRun((r) => r + 1);\n        }}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nexport default function Hero() {\n  const { colors } = useKit();\n  const [run, setRun] = useState(0);\n  return (\n    <Pressable accessibilityRole=\"button\" accessibilityHint=\"Replays the animation\" onPress={() => setRun((r) => r + 1)} style={{ alignItems: 'center', gap: 10, paddingVertical: 12 }}>\n      <AnimatedText variant=\"scramble\" replayKey={run} color={colors.accent} style={{ alignSelf: 'stretch' }} textStyle={{ fontSize: 13, fontWeight: '600', letterSpacing: 1.5, textAlign: 'center' }}>\n        NEW IN EXPOKIT\n      </AnimatedText>\n      <AnimatedText replayKey={run} delay={250} style={{ alignSelf: 'stretch' }} textStyle={{ fontSize: 34, fontWeight: '700', letterSpacing: -1, lineHeight: 40, textAlign: 'center' }}>\n        Motion your users can feel\n      </AnimatedText>\n      <AnimatedText variant=\"typewriter\" replayKey={run} delay={900} caret={false} style={{ alignSelf: 'stretch' }} color={colors.mutedForeground} textStyle={{ fontSize: 15, textAlign: 'center' }}>\n        Tap anywhere to play it again.\n      </AnimatedText>\n    </Pressable>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/textarea.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/textarea.tsx"
   ],
+  "summary": "A multiline field that glides taller line by line, with a ring-style counter.",
   "props": [
     [
       "label",
@@ -140,6 +141,21 @@
       "value, defaultValue, onChangeText, placeholder, …"
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The box grows smoothly between minRows and maxRows as you type; the label floats up on focus and a halo glows around the field."
+    ],
+    [
+      "Screen readers",
+      "The input is labelled by label or placeholder; the counter reads like '42 of 200 characters left' and error / success messages land in a polite live region."
+    ],
+    [
+      "Web",
+      "The browser focus outline is removed; the field draws its own focus halo."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Textarea } from '@/components/ui/textarea';\n\nconst [review, setReview] = useState('');\n<Textarea label=\"Your review\" value={review} onChangeText={setReview} maxLength={200} />",
   "examples": [
     {
       "name": "Composer",

package/registry/_docs/ticket-card.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/ticket-card.tsx"
   ],
+  "summary": "A boarding pass or event ticket with real notches and a stub you can tear off.",
   "props": [
     [
       "brand / logo",
@@ -170,5 +171,24 @@
       "Style for the root (width, margins)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "The card tilts toward your finger (tilt={false} turns it off). Tap to flip it to the big code and notes; with onTear set, swipe the stub sideways to tear it off."
+    ],
+    [
+      "Motion",
+      "A holo badge shimmers as the card leans, a stamp thumps down when set, and a torn stub falls away along the tear line."
+    ],
+    [
+      "Haptics",
+      "A success notification when the stub tears off."
+    ],
+    [
+      "Screen readers",
+      "One element whose label joins the brand, title or route, every field and the stamp; it is a button when there is a back to flip to."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/ticket-shape.json

@@ -6,6 +6,9 @@
   "files": [
     "src/lib/ticket-shape.tsx"
   ],
+  "summary": null,
   "props": [],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/tilt-card.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/tilt-card.tsx"
   ],
+  "summary": "A card that leans toward your finger in 3D while a glare slides across it.",
   "props": [
     [
       "children",
@@ -116,6 +117,21 @@
       "The card's live tilt values (native-driver friendly) for your own effects."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Press and drag to tilt up to maxTilt degrees; the card scales by pressScale and springs flat on release. onPress fires on a tap, not after a drag."
+    ],
+    [
+      "Motion",
+      "The shadow slides away from the light and the glare (soft, sharp or holo) glides across. TiltLayer children float at their own depth, and idle makes it sway gently at rest."
+    ],
+    [
+      "Screen readers",
+      "Exposed as one element when it has onPress or accessibilityLabel; with onPress it is a button with an 'activate' action."
+    ]
+  ],
+  "usage": "import { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\n\n<TiltCard image={{ uri: photoUrl }} idle accessibilityLabel=\"Manarola, Cinque Terre\" style={{ width: 270, height: 360 }}>\n  <TiltLayer depth={1}>\n    <PlaceCaption place={place} />\n  </TiltLayer>\n</TiltCard>",
   "examples": [
     {
       "name": "TravelCard",

package/registry/_docs/time-picker.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/time-picker.tsx"
   ],
+  "summary": "A time picker as 3D wheel drums, a draggable clock dial or bookable time chips.",
   "props": [
     [
       "value",
@@ -218,6 +219,21 @@
       "Sheet: the sheet / dialog panel — background, border, radius, padding, shadow (transform and opacity are animated)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Wheel drums snap with momentum and a tapped row jumps into the band. On the clock, drag the hand anywhere on the dial; it snaps to hours, then moves on to minutes when you let go."
+    ],
+    [
+      "Motion",
+      "Wheel rows tilt, shrink and fade past the selection band, driven by scroll on the native driver; the clock header crossfades between hours and minutes."
+    ],
+    [
+      "Screen readers",
+      "Each wheel column and the clock dial are adjustable with increment / decrement actions; AM / PM and the time chips are radio groups, with booked or unavailable slots named. The sheet field is a button with expanded state."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { TimePicker, type TimeValue } from '@/components/ui/time-picker';\n\nconst [time, setTime] = useState<TimeValue | null>({ hours: 7, minutes: 30 });\n<TimePicker value={time} onChange={setTime} hour12 />",
   "examples": [
     {
       "name": "Alarm",

package/registry/_docs/timeline-chart.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/timeline-chart.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -26,5 +27,7 @@
       "Axis labels."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/timeline.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/timeline.tsx"
   ],
+  "summary": "A vertical timeline whose connector fills down to the current step as dots check off.",
   "props": [
     [
       "items",
@@ -116,6 +117,21 @@
       "Root style — for variant=\"scroll\" this is the scroll view, so set a height."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Items rise in, then the line fills to the current step: done dots draw their check as it arrives and the current dot pulses. The scroll variant ties the fill to the scroll position."
+    ],
+    [
+      "Reduced motion",
+      "Everything renders in its final state with no rise, fill or pulse, the same as animated={false}."
+    ],
+    [
+      "Screen readers",
+      "The timeline is a list; each entry is read as its title, time, description and status, and links are exposed as links."
+    ]
+  ],
+  "usage": "import { Timeline } from '@/components/ui/timeline';\n\n<Timeline\n  items={[\n    { title: 'Order placed', time: '9:41 AM', status: 'done' },\n    { title: 'Out for delivery', time: '1:15 PM', status: 'current' },\n    { title: 'Delivered', status: 'upcoming' },\n  ]}\n/>",
   "examples": [
     {
       "name": "OrderTracking",

package/registry/_docs/toast.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/toast.tsx"
   ],
+  "summary": "Sonner-style toasts whose tone icon draws itself while a hairline drains away.",
   "props": [
     [
       "toast(title, options?)",
@@ -116,6 +117,29 @@
       "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",

package/registry/_docs/treemap.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/treemap.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -26,5 +27,7 @@
       "Tile colours."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/waterfall.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/waterfall.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -32,5 +33,7 @@
       "Change labels."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/wheel-list.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/wheel-list.tsx"
   ],
+  "summary": "An iOS alarm-style picker whose rows curve away on a 3D cylinder.",
   "props": [
     [
       "data",
@@ -98,5 +99,24 @@
       "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": []
 }