@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/onboarding.json

@@ -0,0 +1,66 @@
+{
+  "name": "onboarding",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Onboarding",
+  "files": [
+    "src/components/blocks/onboarding.tsx"
+  ],
+  "props": [
+    [
+      "steps",
+      "{ title, body, illustration?, color? }[]",
+      "3 product steps",
+      "Pages to show. illustration is a node or 'capture' | 'insights' | 'together'."
+    ],
+    [
+      "onDone",
+      "() => void",
+      "—",
+      "Pressed the final button."
+    ],
+    [
+      "onSkip",
+      "() => void",
+      "onDone",
+      "Pressed Skip."
+    ],
+    [
+      "onIndexChange",
+      "(index: number) => void",
+      "—",
+      "The visible step changed."
+    ],
+    [
+      "skipLabel",
+      "string",
+      "'Skip'",
+      "Skip button text."
+    ],
+    [
+      "nextLabel",
+      "string",
+      "'Next'",
+      "Accessibility label of the round next button."
+    ],
+    [
+      "doneLabel",
+      "string",
+      "'Get started'",
+      "Button text on the last step."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active dot, primary button and built-in illustration colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/otp-input.json

@@ -0,0 +1,134 @@
+{
+  "name": "otp-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "OtpInput",
+  "files": [
+    "src/components/ui/otp-input.tsx"
+  ],
+  "props": [
+    [
+      "length",
+      "number",
+      "6",
+      "Number of cells."
+    ],
+    [
+      "value / onChangeText",
+      "string",
+      "—",
+      "Controlled code (digits only). Pasting a longer string fills every cell."
+    ],
+    [
+      "onComplete",
+      "(code) => void",
+      "—",
+      "Called when every cell is filled."
+    ],
+    [
+      "variant",
+      "\"box\" | \"underline\" | \"pill\"",
+      "\"box\"",
+      "Rounded box cells, underline bars, or round pill cells."
+    ],
+    [
+      "error",
+      "boolean",
+      "false",
+      "Shakes the row and turns it the danger colour."
+    ],
+    [
+      "errorText",
+      "string",
+      "—",
+      "Message (with icon) shown under the cells while `error` is set."
+    ],
+    [
+      "success",
+      "boolean",
+      "false",
+      "Success colour with a staggered pulse across the cells."
+    ],
+    [
+      "successText",
+      "string",
+      "—",
+      "Message with an animated check shown while `success` is set."
+    ],
+    [
+      "helperText",
+      "string",
+      "—",
+      "Hint shown under the cells otherwise."
+    ],
+    [
+      "separatorAfter",
+      "number",
+      "—",
+      "Draw a dash after this many cells, e.g. 3 → 123 – 456."
+    ],
+    [
+      "maxCellSize",
+      "number",
+      "52",
+      "Largest cell width; cells shrink to fit the row and never overflow."
+    ],
+    [
+      "secure",
+      "boolean",
+      "false",
+      "Dots instead of digits."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks input."
+    ],
+    [
+      "autoFocus",
+      "boolean",
+      "false",
+      "Focus on mount."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active cell colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view around the cells and message."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "States",
+      "title": "States",
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\n\nexport default function States() {\n  return (\n    <View style={{ gap: 18 }}>\n      <OtpInput length={4} value=\"4821\" success successText=\"Verified\" />\n      <OtpInput length={4} value=\"1093\" error errorText=\"Incorrect code\" />\n      <OtpInput length={4} value=\"72\" disabled helperText=\"Too many attempts — try again in 5 min\" />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/pagination-dots.json

@@ -0,0 +1,88 @@
+{
+  "name": "pagination-dots",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "PaginationDots",
+  "files": [
+    "src/components/ui/pagination-dots.tsx"
+  ],
+  "props": [
+    [
+      "count",
+      "number",
+      "—",
+      "Number of pages."
+    ],
+    [
+      "index",
+      "number",
+      "0",
+      "Active page; changes spring the indicator across."
+    ],
+    [
+      "progress",
+      "Animated.Value | AnimatedInterpolation | number",
+      "—",
+      "Live page position (e.g. Animated.divide(scrollX, width)) for smooth tracking while swiping. Use useNativeDriver: false for the 'dots' variant."
+    ],
+    [
+      "variant",
+      "\"dots\" | \"scale\" | \"line\" | \"numbers\"",
+      "\"dots\"",
+      "Stretching pill · growing dot · filling segments · rolling \"2 / 5\"."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "6 / 8 / 10pt dots."
+    ],
+    [
+      "onPress",
+      "(index: number) => void",
+      "—",
+      "Makes dots tappable (44pt hit area) and enables accessibility increment / decrement."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active colour."
+    ],
+    [
+      "inactiveColor",
+      "string",
+      "18% foreground",
+      "Inactive dot colour."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "\"Page\"",
+      "Announced with \"2 of 5\"."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the row of dots (the numbers pill or line track in those variants)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Onboarding",
+      "title": "Onboarding",
+      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nconst PAGES: { color?: string; kicker: string; title: string; body: string }[] = [\n  { kicker: 'PLAN', title: 'Plan your week in minutes', body: 'Drag tasks onto your calendar and we block the time for you.' },\n  { color: '#0ea5e9', kicker: 'FOCUS', title: 'Stay in the zone', body: 'Focus sessions silence notifications until your block ends.' },\n  { color: '#10b981', kicker: 'REVIEW', title: 'See what moved', body: 'A Friday recap shows what you shipped and what slipped.' },\n  { color: '#f59e0b', kicker: 'SHARE', title: 'Bring your team along', body: 'Shared boards keep everyone on the same page.' },\n];\n\nexport default function Onboarding() {\n  const { colors, radius } = useKit();\n  const [width, setWidth] = useState(0);\n  const [page, setPage] = useState(0);\n  const scrollX = useRef(new Animated.Value(0)).current;\n  const ref = useRef<ScrollView>(null);\n  const progress = useMemo(() => (width ? Animated.divide(scrollX, width) : 0), [scrollX, width]);\n  const go = (i: number) => ref.current?.scrollTo({ x: i * width, animated: true });\n\n  return (\n    <View style={{ gap: 18 }} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>\n      <Animated.ScrollView\n        ref={ref}\n        horizontal\n        pagingEnabled\n        showsHorizontalScrollIndicator={false}\n        scrollEventThrottle={16}\n        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: false })}\n        onMomentumScrollEnd={(e) => width && setPage(Math.round(e.nativeEvent.contentOffset.x / width))}\n      >\n        {PAGES.map((p) => (\n          <View key={p.title} style={{ width: width || 1, paddingHorizontal: 2 }}>\n            <View style={{ height: 210, borderRadius: radius.scale(24), backgroundColor: p.color ?? colors.accent, padding: 22, justifyContent: 'flex-end' }}>\n              <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, fontWeight: '400', letterSpacing: 1.2 }}>{p.kicker}</Text>\n              <Text style={{ color: '#fff', fontSize: 24, fontWeight: '400', letterSpacing: -0.5, marginTop: 6 }}>{p.title}</Text>\n              <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, lineHeight: 20, marginTop: 6 }}>{p.body}</Text>\n            </View>\n          </View>\n        ))}\n      </Animated.ScrollView>\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <Pressable onPress={() => go(PAGES.length - 1)} hitSlop={12} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.mutedForeground }}>Skip</Text>\n        </Pressable>\n        <PaginationDots count={PAGES.length} progress={progress} onPress={go} accessibilityLabel=\"Onboarding page\" />\n        <Pressable\n          onPress={() => go(Math.min(PAGES.length - 1, page + 1))}\n          accessibilityRole=\"button\"\n          style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.capsule(44), backgroundColor: colors.accent, justifyContent: 'center' }}\n        >\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.accentForeground }}>{page === PAGES.length - 1 ? 'Done' : 'Next'}</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nfunction Label({ children }: { children: string }) {\n  const { colors } = useKit();\n  return <Text style={{ fontSize: 12, fontWeight: '400', letterSpacing: 0.4, color: colors.mutedForeground }}>{children}</Text>;\n}\n\nexport default function Variants() {\n  const { colors, radius } = useKit();\n  const [i, setI] = useState(1);\n  return (\n    <View style={{ gap: 22 }}>\n      {(['dots', 'scale', 'line', 'numbers'] as const).map((variant) => (\n        <View key={variant} style={{ gap: 10 }}>\n          <Label>{variant.toUpperCase()}</Label>\n          <PaginationDots variant={variant} count={5} index={i} onPress={setI} />\n        </View>\n      ))}\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        {['Previous', 'Next'].map((t, k) => (\n          <Pressable\n            key={t}\n            onPress={() => setI((v) => Math.max(0, Math.min(4, v + (k ? 1 : -1))))}\n            accessibilityRole=\"button\"\n            style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.md, borderWidth: 1, borderColor: colors.border, justifyContent: 'center' }}\n          >\n            <Text style={{ fontSize: 14, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 18, alignItems: 'center' }}>\n      <PaginationDots size=\"sm\" count={6} index={2} />\n      <PaginationDots size=\"md\" count={6} index={2} />\n      <PaginationDots size=\"lg\" count={6} index={2} />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/parallax-layers.json

@@ -0,0 +1,84 @@
+{
+  "name": "parallax-layers",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "ParallaxLayers",
+  "files": [
+    "src/components/ui/parallax-layers.tsx"
+  ],
+  "props": [
+    [
+      "children",
+      "ParallaxLayer[]",
+      "—",
+      "Layers, back to front."
+    ],
+    [
+      "height",
+      "number",
+      "260",
+      "Scene height."
+    ],
+    [
+      "travel",
+      "number",
+      "22",
+      "How far a depth-1 layer moves, in points."
+    ],
+    [
+      "tilt",
+      "number",
+      "8",
+      "Scene tilt in degrees; 0 for flat parallax."
+    ],
+    [
+      "idle",
+      "boolean",
+      "true",
+      "Drift on its own while untouched."
+    ],
+    [
+      "clip",
+      "boolean",
+      "true",
+      "Clip layers to the scene's rounded box."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Describes the scene for screen readers."
+    ],
+    [
+      "radius",
+      "number",
+      "24",
+      "Corner radius of the scene."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the scene."
+    ],
+    [
+      "ParallaxLayer.depth",
+      "number",
+      "0.5",
+      "0 stays put, 1 moves the full travel, negative moves the other way."
+    ],
+    [
+      "ParallaxLayer.scale",
+      "number",
+      "far layers grow slightly",
+      "Extra scale; far layers (depth ≤ 0.35) grow just enough to hide their edges."
+    ],
+    [
+      "ParallaxLayer.style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the layer (it fills the scene)."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/parallax-scroll.json

@@ -0,0 +1,186 @@
+{
+  "name": "parallax-scroll",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "ParallaxScrollView",
+  "files": [
+    "src/components/ui/parallax-scroll.tsx"
+  ],
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "The screen's content, under the header."
+    ],
+    [
+      "header",
+      "ReactNode",
+      "—",
+      "Fills the header area: a photo, a map, a gallery (wins over headerImage)."
+    ],
+    [
+      "headerImage",
+      "ImageSourcePropType",
+      "—",
+      "Shortcut for a full-bleed header photo."
+    ],
+    [
+      "headerAccessibilityLabel",
+      "string",
+      "—",
+      "Describes headerImage for screen readers (skipped when omitted)."
+    ],
+    [
+      "headerHeight",
+      "number",
+      "300",
+      "Header height, including the part under the status bar."
+    ],
+    [
+      "headerSpeed",
+      "number",
+      "0.5",
+      "How the header moves while scrolling up: 0 scrolls with the content, 1 stays pinned while the content slides over it."
+    ],
+    [
+      "stretch",
+      "boolean",
+      "true",
+      "iOS: pulling down stretches the header to fill the gap, anchored at the top. Turn off with a refreshControl."
+    ],
+    [
+      "headerOverlay",
+      "ReactNode",
+      "—",
+      "Pinned to the bottom of the header (a title over the photo); lifts and fades as it scrolls away, over a bottom scrim."
+    ],
+    [
+      "title",
+      "string",
+      "—",
+      "Ready-made top bar (theme background, hairline, centred title) that fades in once the header has scrolled under it."
+    ],
+    [
+      "bar",
+      "ReactNode",
+      "—",
+      "Your own bar instead: fills the bar area (topInset included) and fades in the same way. Decorative — buttons go in barLeft / barRight."
+    ],
+    [
+      "barLeft / barRight",
+      "ReactNode",
+      "—",
+      "Buttons pinned to the bar, visible over the photo too: each child sits on a round theme-coloured bubble that melts into the bar. Pass an array for several."
+    ],
+    [
+      "barHeight",
+      "number",
+      "52",
+      "Height of the bar row, below topInset."
+    ],
+    [
+      "topInset",
+      "number",
+      "0",
+      "Space above the bar for the status bar / notch — pass your safe-area top inset."
+    ],
+    [
+      "contentContainerStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the content under the header (padding, gap, background — theme background by default)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer frame (size, margins, radius). Fills its parent by default."
+    ],
+    [
+      "onScroll",
+      "(e) => void",
+      "—",
+      "JS handler called alongside the native parallax event. For UI-thread effects use useParallaxScroll().scroll instead of your own Animated.event."
+    ],
+    [
+      "ref",
+      "Ref<ScrollView>",
+      "—",
+      "Forwarded to the scroll view, so you can call scrollTo."
+    ],
+    [
+      "…ScrollView props",
+      "ScrollViewProps",
+      "—",
+      "Everything else is passed to the scroll view (vertical only): refreshControl, onScrollEndDrag, nestedScrollEnabled…"
+    ],
+    [
+      "ParallaxImage.source",
+      "ImageSourcePropType",
+      "—",
+      "The photo."
+    ],
+    [
+      "ParallaxImage.height",
+      "number",
+      "200",
+      "Frame height."
+    ],
+    [
+      "ParallaxImage.speed",
+      "number",
+      "0.3",
+      "How much slower than its frame the photo moves: 0 still, 1 fixed on screen, negative the other way."
+    ],
+    [
+      "ParallaxImage.radius",
+      "number",
+      "radius.lg",
+      "Corner radius of the frame."
+    ],
+    [
+      "ParallaxImage.scrim",
+      "boolean",
+      "on with children",
+      "Bottom gradient so white text reads on the photo."
+    ],
+    [
+      "ParallaxImage.children",
+      "ReactNode",
+      "—",
+      "Content over the photo, aligned to the bottom (a caption, a tag)."
+    ],
+    [
+      "ParallaxImage.accessibilityLabel",
+      "string",
+      "—",
+      "Describes the photo for screen readers."
+    ],
+    [
+      "ParallaxImage.style / imageStyle",
+      "StyleProp<ViewStyle> / StyleProp<ImageStyle>",
+      "—",
+      "Style for the frame / for the photo itself."
+    ],
+    [
+      "ParallaxView.speed",
+      "number",
+      "0.2",
+      "Offset relative to the scroll: positive lags behind the content, negative leads it."
+    ],
+    [
+      "ParallaxView.children / style",
+      "ReactNode / StyleProp<ViewStyle>",
+      "—",
+      "What drifts, and its style (the transform is taken by the parallax)."
+    ],
+    [
+      "useParallaxScroll()",
+      "() => { scroll, viewport, contentHeight, contentRef } | null",
+      "—",
+      "The live scroll offset (native-driver friendly), viewport size and content size for your own effects; null outside a ParallaxScrollView."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/password-input.json

@@ -0,0 +1,92 @@
+{
+  "name": "password-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "PasswordInput",
+  "files": [
+    "src/components/ui/password-input.tsx"
+  ],
+  "props": [
+    [
+      "strength",
+      "boolean",
+      "true",
+      "Show the animated strength meter."
+    ],
+    [
+      "score",
+      "(pw) => 0–4",
+      "built-in",
+      "Custom strength scorer."
+    ],
+    [
+      "requirements",
+      "{ label, test }[] | boolean",
+      "—",
+      "Checklist under the field; true uses DEFAULT_PASSWORD_REQUIREMENTS (8+ chars, upper & lower, number, symbol)."
+    ],
+    [
+      "confirmOf",
+      "string",
+      "—",
+      "Confirm-password mode: shows match / mismatch once the user types."
+    ],
+    [
+      "matchMessage / mismatchMessage",
+      "string",
+      "\"Passwords match\" / \"Passwords don't match\"",
+      "Copy for confirm mode."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Passed to FloatingInput: set to false to put the label above the field (no notch) and show placeholder inside."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Eye / eye-off toggle and clear button colour."
+    ],
+    [
+      "fieldStyle / inputStyle / labelStyle / messageStyle / counterStyle",
+      "StyleProp",
+      "—",
+      "Style slots passed straight to FloatingInput — see Floating Input."
+    ],
+    [
+      "…FloatingInputProps",
+      "",
+      "",
+      "Every Floating Input prop (error, success, size, variant, …)."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "StrengthMeter",
+      "title": "Strength Meter",
+      "code": "import { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\n\nexport default function StrengthMeter() {\n  return (\n    <View style={{ gap: 18 }}>\n      <PasswordInput label=\"Password\" defaultValue=\"hunter2\" />\n      <PasswordInput label=\"Password\" defaultValue=\"Hunter2-Lighthouse!\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "WrongPassword",
+      "title": "Wrong Password",
+      "code": "import { PasswordInput } from '@/components/ui/password-input';\n\nexport default function WrongPassword() {\n  return (\n    <PasswordInput\n      label=\"Current password\"\n      strength={false}\n      defaultValue=\"password123\"\n      error=\"That's not your current password\"\n      helper=\"Required to change your email\"\n    />\n  );\n}\n"
+    }
+  ]
+}