@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/loyalty-card.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/loyalty-card.tsx"
   ],
+  "summary": "A points or stamp card on a shop photo that tilts and flips to a member code.",
   "props": [
     [
       "brand",
@@ -104,5 +105,20 @@
       "Style for the root."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the card to flip it to the member code for the till, and tap again to turn it back."
+    ],
+    [
+      "Motion",
+      "With tilt on (the default) the card leans toward your finger with a moving reflection, then turns over in 3D on a spring."
+    ],
+    [
+      "Screen readers",
+      "The card is a button labelled with the brand, member and their points or stamp count."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/morphing-button-group.json

@@ -0,0 +1,96 @@
+{
+  "name": "morphing-button-group",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "MorphingButtonGroup",
+  "files": [
+    "src/components/ui/morphing-button-group.tsx"
+  ],
+  "summary": "Buttons that split, join and stretch between sets — with a signature sheet built on it.",
+  "props": [
+    [
+      "buttons",
+      "{ key, label, icon?, variant?, onPress? }[]",
+      "—",
+      "MorphingButtonGroup: the buttons to show now; changing it morphs the row."
+    ],
+    [
+      "height",
+      "number",
+      "44",
+      "Button height."
+    ],
+    [
+      "gap",
+      "number",
+      "10",
+      "Space between buttons."
+    ],
+    [
+      "duration",
+      "number",
+      "380",
+      "Morph length in ms."
+    ],
+    [
+      "SignatureSheet label",
+      "string",
+      "'Sign'",
+      "The pill's text."
+    ],
+    [
+      "SignatureSheet title",
+      "string",
+      "'Add Signature'",
+      "Card title."
+    ],
+    [
+      "SignatureSheet onConfirm",
+      "({ paths, width, height }) => void",
+      "—",
+      "The finished signature."
+    ],
+    [
+      "SignatureSheet onCancel",
+      "() => void",
+      "—",
+      "Closed without signing."
+    ],
+    [
+      "SignatureSheet cardHeight",
+      "number",
+      "340",
+      "Height of the open card."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Morph",
+      "Buttons with the same key keep their place and resize; new ones grow in from nothing and leaving ones shrink away, on one smooth ease (no bounce)."
+    ],
+    [
+      "Labels",
+      "A label change cross-fades while the button resizes."
+    ],
+    [
+      "Signature",
+      "The pad draws smoothed strokes; undo removes the last one, Reset clears, Confirm asks once more. onConfirm gets SVG path data and the pad size."
+    ],
+    [
+      "Haptics",
+      "A tick on each button, a light tap opening the sheet, success on confirm."
+    ],
+    [
+      "Reduced motion",
+      "Morphs are instant."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

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/orb-reveal.json

@@ -0,0 +1,132 @@
+{
+  "name": "orb-reveal",
+  "category": "Motion",
+  "aliases": [],
+  "exportName": "OrbReveal",
+  "files": [
+    "src/components/ui/orb-reveal.tsx"
+  ],
+  "summary": "Drag a liquid-glass orb up: it shows your title through the lens, then fountains glass marbles into a heart.",
+  "props": [
+    [
+      "headline",
+      "string",
+      "'A new era of…'",
+      "Copy shown before the reveal."
+    ],
+    [
+      "title",
+      "string",
+      "'Meet Wabi.'",
+      "The line the lens uncovers."
+    ],
+    [
+      "subtitle",
+      "string",
+      "'The first personal…'",
+      "Lines under the title."
+    ],
+    [
+      "hint",
+      "string",
+      "'Swipe up to enter'",
+      "Faint hint under the resting orb."
+    ],
+    [
+      "images",
+      "string[]",
+      "—",
+      "Image URIs for the marbles (app icons, avatars)."
+    ],
+    [
+      "emoji",
+      "string[]",
+      "24 emoji",
+      "Marble pictures when there are no images, each on a bright gradient."
+    ],
+    [
+      "count",
+      "number",
+      "52",
+      "Marbles in the heart (max 60), plus a trail of specks."
+    ],
+    [
+      "glowColors",
+      "[string, string]",
+      "blue, violet",
+      "The glow while you hold the orb."
+    ],
+    [
+      "background",
+      "string",
+      "theme background",
+      "Page colour."
+    ],
+    [
+      "footer",
+      "ReactNode",
+      "—",
+      "Fades in after the reveal: sign-in buttons, a CTA."
+    ],
+    [
+      "revealed",
+      "boolean",
+      "—",
+      "Controlled state."
+    ],
+    [
+      "defaultRevealed",
+      "boolean",
+      "false",
+      "Uncontrolled initial state."
+    ],
+    [
+      "onRevealChange",
+      "(revealed: boolean) => void",
+      "—",
+      "The orb settled in a new state."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "flex: 1",
+      "Root style; give it a screen or a tall card."
+    ]
+  ],
+  "behavior": [
+    [
+      "Hold",
+      "The orb swells and lifts, a blue-violet smile of light glows through it and the headline fades."
+    ],
+    [
+      "Drag",
+      "Drag up past halfway (or flick) to reveal; drag the small orb down to go back. A quick tap toggles; a hold or a drag back to the start stays put."
+    ],
+    [
+      "Lens",
+      "Two Skia shaders refract the page under the orb and the title the lens uncovers: magnified middle, mirrored bevel, red/blue split at the edge."
+    ],
+    [
+      "Marbles",
+      "Fountain out of the button on arcs, pop to size and settle into a heart, then drift. Going back down, they float off the top."
+    ],
+    [
+      "Copy",
+      "The title rides with the orb. It and the footer appear as the orb settles and stay until it is most of the way back down."
+    ],
+    [
+      "Haptics",
+      "A tick when you pick the orb up and a medium impact on reveal."
+    ],
+    [
+      "Reduced motion",
+      "The orb snaps between states and the marbles appear in place."
+    ],
+    [
+      "Web",
+      "Needs CanvasKit loaded (LoadSkiaWeb); without it the revealed copy and footer are shown."
+    ]
+  ],
+  "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,26 +105,49 @@
       "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",
       "title": "Verify Phone",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function VerifyPhone() {\n  const { colors } = useKit();\n  const [code, setCode] = useState('');\n  const [left, setLeft] = useState(24);\n  useEffect(() => {\n    if (left <= 0) return;\n    const id = setTimeout(() => setLeft((s) => s - 1), 1000);\n    return () => clearTimeout(id);\n  }, [left]);\n  const done = code.length === 6;\n  return (\n    <Card>\n      <Header title=\"Verify your number\" body=\"Enter the code sent to +91 98•••• 4210\" />\n      <OtpInput\n        value={code}\n        onChangeText={setCode}\n        success={code === '123456'}\n        error={done && code !== '123456'}\n        successText=\"Number verified\"\n        errorText=\"That code didn't match. Try 123456.\"\n        helperText=\"Tip: the demo code is 123456\"\n      />\n      <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 16 }}>\n        <Pressable disabled={left > 0} onPress={() => { setLeft(24); setCode(''); }} hitSlop={10}>\n          <Text style={{ fontSize: 13, fontWeight: '400', color: left > 0 ? colors.mutedForeground : colors.accent }}>\n            {left > 0 ? `Resend in 0:${String(left).padStart(2, '0')}` : 'Resend code'}\n          </Text>\n        </Pressable>\n        <Pressable hitSlop={10} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>Change number</Text>\n        </Pressable>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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({ style, screen, ...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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function VerifyPhone({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [code, setCode] = useState('');\n  const [left, setLeft] = useState(24);\n  useEffect(() => {\n    if (left <= 0) return;\n    const id = setTimeout(() => setLeft((s) => s - 1), 1000);\n    return () => clearTimeout(id);\n  }, [left]);\n  const done = code.length === 6;\n  return (\n    <Card screen={screen}>\n      <Header title=\"Verify your number\" body=\"Enter the code sent to +91 98•••• 4210\" />\n      <OtpInput\n        value={code}\n        onChangeText={setCode}\n        success={code === '123456'}\n        error={done && code !== '123456'}\n        successText=\"Number verified\"\n        errorText=\"That code didn't match. Try 123456.\"\n        helperText=\"Tip: the demo code is 123456\"\n      />\n      <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 16 }}>\n        <Pressable disabled={left > 0} onPress={() => { setLeft(24); setCode(''); }} hitSlop={10}>\n          <Text style={{ fontSize: 13, fontWeight: '400', color: left > 0 ? colors.mutedForeground : colors.accent }}>\n            {left > 0 ? `Resend in 0:${String(left).padStart(2, '0')}` : 'Resend code'}\n          </Text>\n        </Pressable>\n        <Pressable hitSlop={10} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>Change number</Text>\n        </Pressable>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Pin",
       "title": "Pin",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Pin() {\n  const [pin, setPin] = useState('');\n  return (\n    <Card>\n      <Header title=\"Enter your PIN\" body=\"Confirm the transfer of ₹2,400 to Ananya\" />\n      <OtpInput variant=\"pill\" length={4} secure value={pin} onChangeText={setPin} maxCellSize={56} />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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({ style, screen, ...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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Pin({ screen }: DemoProps) {\n  const [pin, setPin] = useState('');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Enter your PIN\" body=\"Confirm the transfer of ₹2,400 to Ananya\" />\n      <OtpInput variant=\"pill\" length={4} secure value={pin} onChangeText={setPin} maxCellSize={56} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Underline",
       "title": "Underline",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Underline() {\n  return (\n    <Card>\n      <Header title=\"Check your inbox\" body=\"We emailed a 6-digit code to karan@…\" />\n      <OtpInput variant=\"underline\" helperText=\"Code expires in 10 minutes\" />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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({ style, screen, ...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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Underline({ screen }: DemoProps) {\n  return (\n    <Card screen={screen}>\n      <Header title=\"Check your inbox\" body=\"We emailed a 6-digit code to karan@…\" />\n      <OtpInput variant=\"underline\" helperText=\"Code expires in 10 minutes\" />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "WithSeparator",
       "title": "With Separator",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function WithSeparator() {\n  return (\n    <Card>\n      <Header title=\"Two-factor authentication\" body=\"Open your authenticator app\" />\n      <OtpInput separatorAfter={3} maxCellSize={46} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { 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({ style, screen, ...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\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function WithSeparator({ screen }: DemoProps) {\n  return (\n    <Card screen={screen}>\n      <Header title=\"Two-factor authentication\" body=\"Open your authenticator app\" />\n      <OtpInput separatorAfter={3} maxCellSize={46} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "States",

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,16 +63,35 @@
       "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",
       "title": "Create Password",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CreatePassword() {\n  const [password, setPassword] = useState('Sunset');\n  const [confirm, setConfirm] = useState('');\n  return (\n    <Card title=\"Choose a password\" subtitle=\"You'll use it to sign in on new devices.\">\n      <PasswordInput label=\"New password\" value={password} onChangeText={setPassword} requirements />\n      <PasswordInput label=\"Confirm password\" value={confirm} onChangeText={setConfirm} confirmOf={password} />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\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          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CreatePassword({ screen }: DemoProps) {\n  const [password, setPassword] = useState('Sunset');\n  const [confirm, setConfirm] = useState('');\n  return (\n    <Card screen={screen} title=\"Choose a password\" subtitle=\"You'll use it to sign in on new devices.\">\n      <PasswordInput label=\"New password\" value={password} onChangeText={setPassword} requirements />\n      <PasswordInput label=\"Confirm password\" value={confirm} onChangeText={setConfirm} confirmOf={password} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "SignIn",
       "title": "Sign In",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function SignIn() {\n  const { colors } = useKit();\n  return (\n    <Card title=\"Welcome back\">\n      <FloatingInput label=\"Email\" defaultValue=\"maya@studio.io\" keyboardType=\"email-address\" autoCapitalize=\"none\" />\n      <PasswordInput label=\"Password\" strength={false} defaultValue=\"correct horse\" />\n      <Text style={{ alignSelf: 'flex-end', fontSize: 13, fontWeight: '400', color: colors.accent }}>Forgot password?</Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\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          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function SignIn({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen} title=\"Welcome back\">\n      <FloatingInput label=\"Email\" defaultValue=\"maya@studio.io\" keyboardType=\"email-address\" autoCapitalize=\"none\" />\n      <PasswordInput label=\"Password\" strength={false} defaultValue=\"correct horse\" />\n      <Text style={{ alignSelf: 'flex-end', fontSize: 13, fontWeight: '400', color: colors.accent }}>Forgot password?</Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "StrengthMeter",
@@ -81,7 +101,7 @@
     {
       "name": "CustomRules",
       "title": "Custom Rules",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CustomRules() {\n  return (\n    <Card title=\"Wi-Fi password\" subtitle=\"Your router needs 12+ characters and no spaces.\">\n      <PasswordInput\n        variant=\"filled\"\n        label=\"Network password\"\n        strength={false}\n        defaultValue=\"cafe latte\"\n        requirements={[\n          { label: '12+ characters', test: (v) => v.length >= 12 },\n          { label: 'No spaces', test: (v) => v.length > 0 && !/\\s/.test(v) },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\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          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CustomRules({ screen }: DemoProps) {\n  return (\n    <Card screen={screen} title=\"Wi-Fi password\" subtitle=\"Your router needs 12+ characters and no spaces.\">\n      <PasswordInput\n        variant=\"filled\"\n        label=\"Network password\"\n        strength={false}\n        defaultValue=\"cafe latte\"\n        requirements={[\n          { label: '12+ characters', test: (v) => v.length >= 12 },\n          { label: 'No spaces', test: (v) => v.length > 0 && !/\\s/.test(v) },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "WrongPassword",

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": []
 }