@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/number-ticker.json

@@ -0,0 +1,112 @@
+{
+  "name": "number-ticker",
+  "category": "Motion",
+  "aliases": [],
+  "exportName": "NumberTicker",
+  "files": [
+    "src/components/ui/number-ticker.tsx"
+  ],
+  "summary": "Each digit rolls like an odometer, flashing green or red as it changes.",
+  "props": [
+    [
+      "value",
+      "number",
+      "—",
+      "The number to show."
+    ],
+    [
+      "decimals",
+      "number",
+      "0",
+      "Digits after the decimal point."
+    ],
+    [
+      "prefix / suffix",
+      "string",
+      "—",
+      "Static text around the number (\"₹\", \"%\")."
+    ],
+    [
+      "separator",
+      "string | false",
+      "\",\"",
+      "Thousands separator."
+    ],
+    [
+      "grouping",
+      "'thousands' | 'indian'",
+      "'thousands'",
+      "Digit grouping: 1,234,567 or lakh / crore style 12,34,567."
+    ],
+    [
+      "decimalSeparator",
+      "string",
+      "\".\"",
+      "Decimal point."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+      "\"md\"",
+      "18 / 28 / 40 / 56pt, or a font size."
+    ],
+    [
+      "fontWeight",
+      "TextStyle['fontWeight']",
+      "\"500\"",
+      "Weight of the digits."
+    ],
+    [
+      "color",
+      "string",
+      "theme foreground",
+      "Text colour."
+    ],
+    [
+      "flash",
+      "boolean",
+      "true",
+      "Tint green on increase, red on decrease."
+    ],
+    [
+      "animateOnMount",
+      "boolean",
+      "true",
+      "Roll up from zero on first render."
+    ],
+    [
+      "stagger",
+      "number",
+      "35",
+      "Delay between columns in ms."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Extra glyph styles."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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

@@ -0,0 +1,81 @@
+{
+  "name": "offers",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Offers",
+  "files": [
+    "src/components/blocks/offers.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "offers",
+      "Offer[]",
+      "sample food-delivery offers",
+      "Coupon props plus { id, category?, minOrder?, saves? } — saves is an amount or (total) => amount."
+    ],
+    [
+      "featuredId",
+      "string | null",
+      "first offer",
+      "The offer shown big at the top in 3D; null hides it."
+    ],
+    [
+      "cartTotal",
+      "number",
+      "549",
+      "Decides which coupons are locked and what you save."
+    ],
+    [
+      "appliedId / defaultAppliedId / onApply",
+      "string | null / string | null / (offer | null) => void",
+      "— / null / —",
+      "Controlled or uncontrolled applied coupon; null means removed."
+    ],
+    [
+      "onRedeemCode",
+      "(code) => Offer | null | Promise<…>",
+      "match by code",
+      "Look up a typed code (e.g. on your server)."
+    ],
+    [
+      "onCopy",
+      "(code) => void",
+      "—",
+      "Code chips — wire to expo-clipboard."
+    ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows the back button."
+    ],
+    [
+      "onDone",
+      "(offer | null) => void",
+      "—",
+      "Shows the To pay footer with a Done button."
+    ],
+    [
+      "currency / formatPrice",
+      "string / (amount) => string",
+      "'₹' / Indian grouping",
+      "Money formatting."
+    ],
+    [
+      "labels",
+      "Partial<OffersLabels>",
+      "English",
+      "Every string, with {code} and {amount} placeholders."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/onboarding.json

@@ -0,0 +1,69 @@
+{
+  "name": "onboarding",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Onboarding",
+  "files": [
+    "src/components/blocks/onboarding.tsx"
+  ],
+  "summary": null,
+  "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."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/otp-input.json

@@ -0,0 +1,158 @@
+{
+  "name": "otp-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "OtpInput",
+  "files": [
+    "src/components/ui/otp-input.tsx"
+  ],
+  "summary": "Digits pop into cells that size themselves, with SMS autofill and paste.",
+  "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."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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,108 @@
+{
+  "name": "pagination-dots",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "PaginationDots",
+  "files": [
+    "src/components/ui/pagination-dots.tsx"
+  ],
+  "summary": "The active dot stretches into a pill that follows your swipe live.",
+  "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)."
+    ]
+  ],
+  "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",
+      "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,104 @@
+{
+  "name": "parallax-layers",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "ParallaxLayers",
+  "files": [
+    "src/components/ui/parallax-layers.tsx"
+  ],
+  "summary": "Drag across a layered scene: near layers slide further while it tilts in 3D.",
+  "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)."
+    ]
+  ],
+  "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": []
+}