@expokit/cli 0.3.0 → 0.4.0

package/registry/_docs/floating-input.json

@@ -170,12 +170,12 @@
     {
       "name": "SignUp",
       "title": "Sign Up",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function SignUp() {\n  const { colors } = useKit();\n  const [name, setName] = useState('Priya Sharma');\n  const [email, setEmail] = useState('priya@');\n  const [phone, setPhone] = useState('');\n  const emailError = email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined;\n  return (\n    <Card title=\"Create your account\" subtitle=\"It takes less than a minute.\">\n      <FloatingInput label=\"Full name\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        label=\"Email\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={emailError}\n        success={isEmail(email) ? 'Looks good' : undefined}\n      />\n      <FloatingInput\n        label=\"Mobile number\"\n        prefix=\"+91\"\n        value={phone}\n        onChangeText={(v) => setPhone(v.replace(/\\D/g, ''))}\n        keyboardType=\"phone-pad\"\n        maxLength={10}\n        success={phone.length === 10}\n        helper=\"We'll text you a 6-digit code\"\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        Already have an account? <Text style={{ fontWeight: '400', color: colors.accent }}>Sign in</Text>\n      </Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, 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\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function SignUp({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [name, setName] = useState('Priya Sharma');\n  const [email, setEmail] = useState('priya@');\n  const [phone, setPhone] = useState('');\n  const emailError = email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined;\n  return (\n    <Card title=\"Create your account\" subtitle=\"It takes less than a minute.\" screen={screen}>\n      <FloatingInput label=\"Full name\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        label=\"Email\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={emailError}\n        success={isEmail(email) ? 'Looks good' : undefined}\n      />\n      <FloatingInput\n        label=\"Mobile number\"\n        prefix=\"+91\"\n        value={phone}\n        onChangeText={(v) => setPhone(v.replace(/\\D/g, ''))}\n        keyboardType=\"phone-pad\"\n        maxLength={10}\n        success={phone.length === 10}\n        helper=\"We'll text you a 6-digit code\"\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        Already have an account? <Text style={{ fontWeight: '400', color: colors.accent }}>Sign in</Text>\n      </Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Payment",
       "title": "Payment",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nconst formatCard = (v: string) =>\n  v\n    .replace(/\\D/g, '')\n    .slice(0, 16)\n    .replace(/(\\d{4})(?=\\d)/g, '$1 ');\n\nconst formatExpiry = (v: string) => {\n  const d = v.replace(/\\D/g, '').slice(0, 4);\n  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;\n};\n\nconst cardBrand = (v: string) => {\n  const d = v.replace(/\\D/g, '');\n  if (/^4/.test(d)) return 'VISA';\n  if (/^(5[1-5]|2[2-7])/.test(d)) return 'MC';\n  if (/^3[47]/.test(d)) return 'AMEX';\n  return undefined;\n};\n\n/** '' = not finished yet, otherwise an error message or null when valid. */\nconst expiryError = (v: string): string | null | '' => {\n  if (v.length < 5) return '';\n  const month = Number(v.slice(0, 2));\n  const year = 2000 + Number(v.slice(3));\n  if (month < 1 || month > 12) return 'Month must be 01–12';\n  const now = new Date();\n  if (year < now.getFullYear() || (year === now.getFullYear() && month < now.getMonth() + 1)) return 'This card has expired';\n  return null;\n};\n\nconst rupees = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Payment() {\n  const { colors, radius } = useKit();\n  const [amount, setAmount] = useState('1299');\n  const [card, setCard] = useState('4242 4242 4242 4242');\n  const [expiry, setExpiry] = useState('');\n  const [cvc, setCvc] = useState('');\n  const [paid, setPaid] = useState(false);\n  const brand = cardBrand(card);\n  const cvcLen = brand === 'AMEX' ? 4 : 3;\n  const expErr = expiryError(expiry);\n  const ready = Number(amount) > 0 && card.length >= 18 && expErr === null && cvc.length === cvcLen;\n  return (\n    <Card title=\"Add funds\" subtitle=\"Charged securely — you can cancel anytime.\">\n      <FloatingInput label=\"Amount\" prefix=\"₹\" suffix=\"INR\" keyboardType=\"decimal-pad\" value={amount} onChangeText={setAmount} />\n      <FloatingInput\n        label=\"Card number\"\n        keyboardType=\"number-pad\"\n        autoComplete=\"cc-number\"\n        value={card}\n        onChangeText={(v) => setCard(formatCard(v))}\n        maxLength={19}\n        suffix={brand}\n        success={card.length === 19}\n      />\n      <View style={{ flexDirection: 'row', gap: 10, alignItems: 'flex-start' }}>\n        <FloatingInput\n          label=\"MM/YY\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-exp\"\n          value={expiry}\n          onChangeText={(v) => setExpiry(formatExpiry(v))}\n          maxLength={5}\n          error={expErr || undefined}\n          success={expErr === null}\n          style={{ flex: 1 }}\n        />\n        <FloatingInput\n          label=\"CVC\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-csc\"\n          secureTextEntry\n          value={cvc}\n          onChangeText={(v) => setCvc(v.replace(/\\D/g, '').slice(0, cvcLen))}\n          maxLength={cvcLen}\n          helper={`${cvcLen} digits on the ${brand === 'AMEX' ? 'front' : 'back'}`}\n          style={{ flex: 1 }}\n        />\n      </View>\n      <Pressable\n        disabled={!ready}\n        onPress={() => setPaid(true)}\n        accessibilityRole=\"button\"\n        accessibilityState={{ disabled: !ready }}\n        style={({ pressed }) => ({\n          height: 50,\n          marginTop: 4,\n          borderRadius: radius.md,\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: ready ? colors.accent : colors.muted,\n          opacity: pressed ? 0.85 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 16, fontWeight: '400', color: ready ? readableOn(colors.accent) : colors.mutedForeground }}>\n          {paid ? 'Paid ✓' : `Pay ${rupees(Number(amount) || 0)}`}\n        </Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, 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\nconst formatCard = (v: string) =>\n  v\n    .replace(/\\D/g, '')\n    .slice(0, 16)\n    .replace(/(\\d{4})(?=\\d)/g, '$1 ');\n\nconst formatExpiry = (v: string) => {\n  const d = v.replace(/\\D/g, '').slice(0, 4);\n  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;\n};\n\nconst cardBrand = (v: string) => {\n  const d = v.replace(/\\D/g, '');\n  if (/^4/.test(d)) return 'VISA';\n  if (/^(5[1-5]|2[2-7])/.test(d)) return 'MC';\n  if (/^3[47]/.test(d)) return 'AMEX';\n  return undefined;\n};\n\n/** '' = not finished yet, otherwise an error message or null when valid. */\nconst expiryError = (v: string): string | null | '' => {\n  if (v.length < 5) return '';\n  const month = Number(v.slice(0, 2));\n  const year = 2000 + Number(v.slice(3));\n  if (month < 1 || month > 12) return 'Month must be 01–12';\n  const now = new Date();\n  if (year < now.getFullYear() || (year === now.getFullYear() && month < now.getMonth() + 1)) return 'This card has expired';\n  return null;\n};\n\nconst rupees = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Payment({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [amount, setAmount] = useState('1299');\n  const [card, setCard] = useState('4242 4242 4242 4242');\n  const [expiry, setExpiry] = useState('');\n  const [cvc, setCvc] = useState('');\n  const [paid, setPaid] = useState(false);\n  const brand = cardBrand(card);\n  const cvcLen = brand === 'AMEX' ? 4 : 3;\n  const expErr = expiryError(expiry);\n  const ready = Number(amount) > 0 && card.length >= 18 && expErr === null && cvc.length === cvcLen;\n  return (\n    <Card title=\"Add funds\" subtitle=\"Charged securely — you can cancel anytime.\" screen={screen}>\n      <FloatingInput label=\"Amount\" prefix=\"₹\" suffix=\"INR\" keyboardType=\"decimal-pad\" value={amount} onChangeText={setAmount} />\n      <FloatingInput\n        label=\"Card number\"\n        keyboardType=\"number-pad\"\n        autoComplete=\"cc-number\"\n        value={card}\n        onChangeText={(v) => setCard(formatCard(v))}\n        maxLength={19}\n        suffix={brand}\n        success={card.length === 19}\n      />\n      <View style={{ flexDirection: 'row', gap: 10, alignItems: 'flex-start' }}>\n        <FloatingInput\n          label=\"MM/YY\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-exp\"\n          value={expiry}\n          onChangeText={(v) => setExpiry(formatExpiry(v))}\n          maxLength={5}\n          error={expErr || undefined}\n          success={expErr === null}\n          style={{ flex: 1 }}\n        />\n        <FloatingInput\n          label=\"CVC\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-csc\"\n          secureTextEntry\n          value={cvc}\n          onChangeText={(v) => setCvc(v.replace(/\\D/g, '').slice(0, cvcLen))}\n          maxLength={cvcLen}\n          helper={`${cvcLen} digits on the ${brand === 'AMEX' ? 'front' : 'back'}`}\n          style={{ flex: 1 }}\n        />\n      </View>\n      <Pressable\n        disabled={!ready}\n        onPress={() => setPaid(true)}\n        accessibilityRole=\"button\"\n        accessibilityState={{ disabled: !ready }}\n        style={({ pressed }) => ({\n          height: 50,\n          marginTop: 4,\n          borderRadius: radius.md,\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: ready ? colors.accent : colors.muted,\n          opacity: pressed ? 0.85 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 16, fontWeight: '400', color: ready ? readableOn(colors.accent) : colors.mutedForeground }}>\n          {paid ? 'Paid ✓' : `Pay ${rupees(Number(amount) || 0)}`}\n        </Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Variants",
@@ -190,7 +190,7 @@
     {
       "name": "Website",
       "title": "Website",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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 Website() {\n  const [slug, setSlug] = useState('');\n  return (\n    <Card title=\"Your public page\">\n      <FloatingInput\n        label=\"Website\"\n        prefix=\"https://\"\n        keyboardType=\"url\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        clearable\n      />\n      <FloatingInput\n        label=\"Handle\"\n        prefix=\"@\"\n        suffix=\".expo.page\"\n        value={slug}\n        onChangeText={(v) => setSlug(v.toLowerCase().replace(/[^a-z0-9-]/g, ''))}\n        autoCapitalize=\"none\"\n        maxLength={20}\n        counter\n        helper=\"Letters, numbers and dashes\"\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, 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 Website({ screen }: DemoProps) {\n  const [slug, setSlug] = useState('');\n  return (\n    <Card title=\"Your public page\" screen={screen}>\n      <FloatingInput\n        label=\"Website\"\n        prefix=\"https://\"\n        keyboardType=\"url\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        clearable\n      />\n      <FloatingInput\n        label=\"Handle\"\n        prefix=\"@\"\n        suffix=\".expo.page\"\n        value={slug}\n        onChangeText={(v) => setSlug(v.toLowerCase().replace(/[^a-z0-9-]/g, ''))}\n        autoCapitalize=\"none\"\n        maxLength={20}\n        counter\n        helper=\"Letters, numbers and dashes\"\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
@@ -200,12 +200,12 @@
     {
       "name": "LabelAbove",
       "title": "Label Above",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function LabelAbove() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [bio, setBio] = useState('');\n  return (\n    <Card title=\"Edit profile\" subtitle=\"This is how others will see you.\">\n      <FloatingInput floatingLabel={false} label=\"Full name\" placeholder=\"Priya Sharma\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined}\n        helper=\"We'll never share it.\"\n      />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Bio\"\n        placeholder=\"A line about you\"\n        value={bio}\n        onChangeText={setBio}\n        maxLength={80}\n        counter\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, 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\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function LabelAbove({ screen }: DemoProps) {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [bio, setBio] = useState('');\n  return (\n    <Card title=\"Edit profile\" subtitle=\"This is how others will see you.\" screen={screen}>\n      <FloatingInput floatingLabel={false} label=\"Full name\" placeholder=\"Priya Sharma\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined}\n        helper=\"We'll never share it.\"\n      />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Bio\"\n        placeholder=\"A line about you\"\n        value={bio}\n        onChangeText={setBio}\n        maxLength={80}\n        counter\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "CustomStyles",
       "title": "Custom Styles",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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 CustomStyles() {\n  const { colors, radius } = useKit();\n  const [handle, setHandle] = useState('priya.codes');\n  return (\n    <Card title=\"Custom styles\" subtitle=\"fieldStyle, labelStyle, inputStyle, messageStyle.\">\n      <FloatingInput\n        label=\"Username\"\n        prefix=\"@\"\n        value={handle}\n        onChangeText={setHandle}\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        helper=\"Letters, numbers and dots.\"\n        fieldStyle={{ borderWidth: 2, borderColor: colors.border, borderRadius: radius.lg, backgroundColor: colors.card }}\n        surface={colors.card}\n        labelStyle={{ fontSize: 15, fontWeight: '400', letterSpacing: 0.2 }}\n        inputStyle={{ fontSize: 17, fontWeight: '400', letterSpacing: 0.3 }}\n        prefixStyle={{ color: colors.accent, fontWeight: '400' }}\n        messageStyle={{ fontStyle: 'italic' }}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, 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 CustomStyles({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [handle, setHandle] = useState('priya.codes');\n  return (\n    <Card title=\"Custom styles\" subtitle=\"fieldStyle, labelStyle, inputStyle, messageStyle.\" screen={screen}>\n      <FloatingInput\n        label=\"Username\"\n        prefix=\"@\"\n        value={handle}\n        onChangeText={setHandle}\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        helper=\"Letters, numbers and dots.\"\n        fieldStyle={{ borderWidth: 2, borderColor: colors.border, borderRadius: radius.lg, backgroundColor: colors.card }}\n        surface={colors.card}\n        labelStyle={{ fontSize: 15, fontWeight: '400', letterSpacing: 0.2 }}\n        inputStyle={{ fontSize: 17, fontWeight: '400', letterSpacing: 0.3 }}\n        prefixStyle={{ color: colors.accent, fontWeight: '400' }}\n        messageStyle={{ fontStyle: 'italic' }}\n      />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/food-app.json

@@ -0,0 +1,47 @@
+{
+  "name": "food-app",
+  "category": "Templates",
+  "aliases": [],
+  "exportName": null,
+  "files": [
+    "src/app/(tabs)/_layout.tsx",
+    "src/app/(tabs)/bag.tsx",
+    "src/app/(tabs)/index.tsx",
+    "src/app/(tabs)/offers.tsx",
+    "src/app/(tabs)/profile.tsx",
+    "src/app/_layout.tsx",
+    "src/app/onboarding.tsx",
+    "src/app/settings.tsx",
+    "src/app/sign-in.tsx",
+    "src/components/food-app/tabs.tsx",
+    "src/lib/food-app/cart.tsx",
+    "src/lib/food-app/data.tsx",
+    "src/lib/food-app/session.tsx"
+  ],
+  "summary": null,
+  "props": [],
+  "behavior": [
+    [
+      "Flow",
+      "Onboarding shows once, then sign in, then the tabs. Signing out returns to sign in. The session is saved on the device (AsyncStorage) and guarded with Expo Router’s Stack.Protected."
+    ],
+    [
+      "Tabs",
+      "Menu (rolling donut shelf), Offers (coupons that unlock with the bag total), Bag (checkout) and Profile. The kit’s BottomNav is the tab bar, with the bag count as a badge."
+    ],
+    [
+      "Bag",
+      "Donuts added on the Menu land in the bag; a coupon picked on Offers is applied at checkout. Pay is a stand-in — wire it to your payment sheet."
+    ],
+    [
+      "Settings",
+      "Pushed from Profile. Appearance (System / Light / Dark) re-themes every kit component instantly."
+    ],
+    [
+      "Your backend",
+      "Auth handlers in app/sign-in.tsx and payment in app/(tabs)/bag.tsx are stand-ins that wait and succeed. Menu, coupons and the user live in lib/food-app/data.tsx."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/glass.json

@@ -2,7 +2,7 @@
   "name": "glass",
   "category": "Glass",
   "aliases": [],
-  "exportName": "GlassProvider",
+  "exportName": "Glass",
   "files": [
     "src/components/ui/glass.tsx"
   ],

package/registry/_docs/grain.json

@@ -0,0 +1,80 @@
+{
+  "name": "grain",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "GrainGradient",
+  "files": [
+    "src/components/ui/grain.tsx"
+  ],
+  "summary": "A soft blob gradient with real film grain, plus a grain overlay for anything.",
+  "props": [
+    [
+      "palette",
+      "sunset | ocean | aurora | dusk | peach | graphite | ember | mint | lavender | candy | forest | noir",
+      "\"sunset\"",
+      "Built-in colour set."
+    ],
+    [
+      "colors",
+      "string[]",
+      "—",
+      "Base colour first, then up to four blob colours. Overrides palette."
+    ],
+    [
+      "grain",
+      "number",
+      "0.55",
+      "Grain strength, 0–1."
+    ],
+    [
+      "seed",
+      "number",
+      "0",
+      "Shuffles where the blobs sit."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style; give it a size or flex: 1."
+    ],
+    [
+      "GrainOverlay grain",
+      "number",
+      "0.55",
+      "Grain only, laid over its parent."
+    ]
+  ],
+  "behavior": [
+    [
+      "Gradient",
+      "A base colour with up to four radial blobs, drawn with react-native-svg so it scales to any size."
+    ],
+    [
+      "Grain",
+      "A tiny tiling noise image drawn at 2×, so the speckle stays fine on every screen; grain sets its strength."
+    ],
+    [
+      "Touch",
+      "The gradient and grain never take touches; children render on top."
+    ]
+  ],
+  "usage": "import { GrainGradient, GrainOverlay } from '@/components/ui/grain';\n\n<GrainGradient palette=\"aurora\" style={{ flex: 1 }}>\n  {/* your screen */}\n</GrainGradient>",
+  "examples": [
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import { Text, View } from 'react-native';\nimport { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\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\nexport default function Hero({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <GrainGradient palette=\"ember\" seed={1} style={screen ? { flex: 1 } : { height: 460, borderRadius: radius.xl }}>\n      <View style={{ flex: 1, justifyContent: 'flex-end', padding: 24, gap: 6 }}>\n        <Text style={{ color: '#ffffff', fontSize: 34, fontWeight: '700', letterSpacing: -0.8 }}>Golden hour</Text>\n        <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 15 }}>Warm light, soft grain, no photo needed.</Text>\n      </View>\n    </GrainGradient>\n  );\n}\n"
+    },
+    {
+      "name": "Palettes",
+      "title": "Palettes",
+      "code": "import { Text, View } from 'react-native';\nimport { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\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\nexport default function Palettes({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <View style={[{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }, screen && { padding: 16 }]}>\n      {GRAIN_PALETTES.map((p, i) => (\n        <GrainGradient key={p} palette={p} seed={i} style={{ width: '47%', flexGrow: 1, height: 120, borderRadius: radius.lg }}>\n          <Text style={{ margin: 12, color: ['peach', 'mint', 'lavender'].includes(p) ? '#1d1a26' : '#ffffff', fontWeight: '600', textTransform: 'capitalize' }}>{p}</Text>\n        </GrainGradient>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Custom",
+      "title": "Custom",
+      "code": "import { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\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\nexport default function Custom({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <GrainGradient colors={['#0c0a1f', '#ff4d6d', '#ffd166', '#06d6a0']} grain={0.9} seed={2} style={screen ? { flex: 1 } : { height: 400, borderRadius: radius.xl }} />\n  );\n}\n"
+    }
+  ]
+}

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/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

@@ -132,22 +132,22 @@
     {
       "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/password-input.json

@@ -86,12 +86,12 @@
     {
       "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",
@@ -101,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",