@expokit/cli 0.2.0 → 0.3.0

package/registry/_docs/number-ticker.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/number-ticker.tsx"
   ],
+  "summary": "Each digit rolls like an odometer, flashing green or red as it changes.",
   "props": [
     [
       "value",
@@ -92,5 +93,20 @@
       "Style for the row of digits."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Each digit springs along its own 0–9 strip, up when the value grows and down when it shrinks, staggered right to left. The text briefly tints green or red on every change."
+    ],
+    [
+      "Screen readers",
+      "The whole number is one text element, read with its prefix and suffix instead of digit by digit."
+    ],
+    [
+      "Platforms",
+      "Plain Animated views on iOS, Android and web. The digit rolls use the native driver; only the colour flash runs in JS."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/offers.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/offers.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "offers",
@@ -74,5 +75,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/onboarding.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/onboarding.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "steps",
@@ -62,5 +63,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/otp-input.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/otp-input.tsx"
   ],
+  "summary": "Digits pop into cells that size themselves, with SMS autofill and paste.",
   "props": [
     [
       "length",
@@ -104,6 +105,29 @@
       "Style for the root view around the cells and message."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the row focuses one hidden number-pad input. Pasting a code like 123-456 strips the non-digits and fills every cell."
+    ],
+    [
+      "Motion",
+      "Digits pop in on a bouncy spring and the active cell glows with a halo and a blinking caret. Errors shake the row; success pulses across the cells."
+    ],
+    [
+      "Platforms",
+      "Sets textContentType 'oneTimeCode' and autoComplete 'one-time-code', so codes from SMS can autofill."
+    ],
+    [
+      "Screen readers",
+      "The cells are hidden; the input is labelled 'One-time code, 6 digits' with a hint. Helper, error and success messages are a polite live region."
+    ],
+    [
+      "Web",
+      "The browser focus outline is removed; the border and halo show focus instead."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { OtpInput } from '@/components/ui/otp-input';\n\nconst [code, setCode] = useState('');\n<OtpInput value={code} onChangeText={setCode} helperText=\"Sent to +1 415 555 0132\" />",
   "examples": [
     {
       "name": "VerifyPhone",

package/registry/_docs/pagination-dots.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/pagination-dots.tsx"
   ],
+  "summary": "The active dot stretches into a pill that follows your swipe live.",
   "props": [
     [
       "count",
@@ -68,6 +69,25 @@
       "Style for the row of dots (the numbers pill or line track in those variants)."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Pass a live progress value (scroll offset ÷ page width) and the indicator tracks the finger; with index alone it springs across. Variants stretch a pill, scale a dot, fill line segments or roll the page number."
+    ],
+    [
+      "Touch",
+      "With onPress, each dot becomes a button with an enlarged hit area that reports its page."
+    ],
+    [
+      "Screen readers",
+      "Read as one element with 'N of M'. With onPress it is adjustable, so swiping up or down changes the page."
+    ],
+    [
+      "Platforms",
+      "The 'dots' variant animates widths, so drive its progress with useNativeDriver: false. The other variants work with either driver."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\n\nconst [page, setPage] = useState(0);\n<PaginationDots count={4} index={page} onPress={setPage} />",
   "examples": [
     {
       "name": "Onboarding",

package/registry/_docs/parallax-layers.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/parallax-layers.tsx"
   ],
+  "summary": "Drag across a layered scene: near layers slide further while it tilts in 3D.",
   "props": [
     [
       "children",
@@ -80,5 +81,24 @@
       "Style for the layer (it fills the scene)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "The finger position steers the scene and release springs it back to centre. A parent ScrollView can still take over a scroll that starts on it."
+    ],
+    [
+      "Motion",
+      "Each layer moves by its depth times travel while the whole scene tilts in perspective. Left alone, it drifts slowly on a loop."
+    ],
+    [
+      "Screen readers",
+      "With accessibilityLabel the scene is one image element with that label; without it, it is not exposed."
+    ],
+    [
+      "Platforms",
+      "Transforms run on the native driver with PanResponder, so it works on iOS, Android and web with no native modules."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/parallax-scroll.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/parallax-scroll.tsx"
   ],
+  "summary": "A photo header glides slower than the content, then a title bar fades in.",
   "props": [
     [
       "children",
@@ -182,5 +183,28 @@
       "The live scroll offset (native-driver friendly), viewport size and content size for your own effects; null outside a ParallaxScrollView."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The header lags behind the scroll and darkens as it leaves. The bar, title and button bubbles fade in once it has scrolled under the bar."
+    ],
+    [
+      "Touch",
+      "On iOS, pulling down past the top stretches the header to fill the gap. Set stretch to false when you use a refreshControl."
+    ],
+    [
+      "Reduced motion",
+      "With Reduce Motion on, the header, ParallaxImage and ParallaxView parallax offsets switch off; the stretch and the fades stay."
+    ],
+    [
+      "Screen readers",
+      "The bar comes first in reading order and its title is a header. Header and ParallaxImage photos are labelled images only when you give them a label."
+    ],
+    [
+      "Platforms",
+      "The scroll offset drives everything through a native Animated.event, so there is no JS work while scrolling."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/password-input.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/password-input.tsx"
   ],
+  "summary": "An eye toggle that twists between states, and a strength meter that springs full.",
   "props": [
     [
       "strength",
@@ -62,6 +63,25 @@
       "Every Floating Input prop (error, success, size, variant, …)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "The eye button has a 44pt hit area and toggles secureTextEntry. With confirmOf, a match or mismatch message appears as soon as the typing diverges."
+    ],
+    [
+      "Motion",
+      "Eye and eye-off cross-fade with a spring twist. The four meter segments fill left to right in a stagger, and checklist ticks pop in as rules are met."
+    ],
+    [
+      "Keyboard",
+      "Auto-capitalisation and autocorrect are turned off for the field."
+    ],
+    [
+      "Screen readers",
+      "The toggle is a button labelled 'Show password' or 'Hide password'. The meter reads 'Password strength: Strong' and each requirement reads as done or not yet."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { PasswordInput } from '@/components/ui/password-input';\n\nconst [password, setPassword] = useState('');\n<PasswordInput label=\"New password\" value={password} onChangeText={setPassword} requirements />",
   "examples": [
     {
       "name": "CreatePassword",

package/registry/_docs/payment-card.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/payment-card.tsx"
   ],
+  "summary": "A bank card that tilts toward your finger and flips on tap to its back.",
   "props": [
     [
       "number",
@@ -128,6 +129,21 @@
       "Style for the root (width, margins)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "A tap flips the card to its back (stripe, signature panel, CVV, hologram); frozen cards ignore taps. flippable={false} makes a still card for use inside something tappable."
+    ],
+    [
+      "Motion",
+      "With tilt on, the card leans toward the finger with a soft glare, and its shadow narrows as it turns edge-on mid-flip."
+    ],
+    [
+      "Screen readers",
+      "Read as '{bank} card ending {last4}', plus 'Frozen' when frozen. The number is masked to the last four digits by default."
+    ]
+  ],
+  "usage": "import { PaymentCard } from '@/components/ui/payment-card';\n\n<PaymentCard\n  bank=\"Northwind\"\n  number=\"5412 7590 1234 0317\"\n  name=\"Maya Patel\"\n  expiry=\"09/29\"\n  brand=\"mastercard\"\n/>",
   "examples": [
     {
       "name": "WalletScreen",

package/registry/_docs/pixel-bar.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/pixel-bar.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -62,5 +63,7 @@
       "Fade colour upwards."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/polar-area.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/polar-area.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -74,5 +75,7 @@
       "Grid circles."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/profile.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/profile.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "user",
@@ -80,5 +81,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

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/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,6 +111,25 @@
       "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",

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",

package/registry/_docs/select.json

@@ -1,11 +1,17 @@
 {
   "name": "select",
   "category": "Inputs",
-  "aliases": [],
+  "aliases": [
+    "multi-select",
+    "multiselect",
+    "combobox",
+    "dropdown"
+  ],
   "exportName": "Select",
   "files": [
     "src/components/ui/select.tsx"
   ],
+  "summary": "A dropdown or sheet picker with a floating label; multi-select shows removable chips.",
   "props": [
     [
       "options",
@@ -212,6 +218,25 @@
       "Each option's label text."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the field opens a dropdown anchored under it, flipping above when there's no room. presentation='sheet' slides up a bottom sheet you drag down to dismiss (a centred dialog on wide screens)."
+    ],
+    [
+      "Motion",
+      "The label floats onto the border, a focus halo glows and the chevron turns. In multiple mode chips pop in and collapse out, overflowing into a '+N' chip."
+    ],
+    [
+      "Keyboard",
+      "On web, arrow keys move the highlight, Home and End jump, Enter picks, and Escape or Tab close the menu."
+    ],
+    [
+      "Screen readers",
+      "The field is a combobox whose value lists the selection, with an expanded state. Options are menu items, or checkboxes in multiple mode."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Select } from '@/components/ui/select';\n\nconst [team, setTeam] = useState<string[]>([]);\n<Select multiple label=\"Assignees\" options={['Amelia', 'Ravi', 'Sofia', 'Kenji']} values={team} onValuesChange={setTeam} />",
   "examples": [
     {
       "name": "Validation",

package/registry/_docs/settings.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/settings.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "user",
@@ -68,5 +69,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }