@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/floating-input.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/floating-input.tsx"
   ],
+  "summary": "A text field whose label glides onto the border as an accent halo blooms.",
   "props": [
     [
       "label",
@@ -146,16 +147,35 @@
       "Everything TextInput accepts."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping anywhere on the field focuses the input. With clearable, a × springs in once there is text and empties the field."
+    ],
+    [
+      "Motion",
+      "The label springs onto the border on focus or when filled, and a soft halo blooms around the field. An error shakes it once; a success check springs in."
+    ],
+    [
+      "Screen readers",
+      "The input is labelled with your label and the clear button reads \"Clear\" plus the label. Helper, error and success messages are polite live regions."
+    ],
+    [
+      "Web",
+      "Browser autofill floats the label too, and the field keeps its own background instead of the autofill blue."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { FloatingInput } from '@/components/ui/floating-input';\n\nconst [email, setEmail] = useState('');\n<FloatingInput label=\"Email\" value={email} onChangeText={setEmail} keyboardType=\"email-address\" clearable />",
   "examples": [
     {
       "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",
@@ -170,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",
@@ -180,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/gift-card.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/gift-card.tsx"
   ],
+  "summary": "A photo gift card that tilts toward your finger and flips to reveal its code.",
   "props": [
     [
       "amount",
@@ -104,5 +105,20 @@
       "Style for the root."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the card to flip it over to the redeem code. The copy button calls onCopy and reads \"Copied ✓\" for a moment."
+    ],
+    [
+      "Motion",
+      "With tilt on (the default) the card leans toward your finger with a moving reflection, then turns over in 3D on a spring."
+    ],
+    [
+      "Screen readers",
+      "The card is a button labelled with the brand, amount and redeemed state; the code is added to the label once it is flipped."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-button.json

@@ -10,6 +10,7 @@
   "files": [
     "src/components/ui/glass-button.tsx"
   ],
+  "summary": "Liquid Glass buttons and toolbars that spring down under your finger.",
   "props": [
     [
       "label",
@@ -114,5 +115,28 @@
       "As on GlassButton; accessibilityLabel names the toolbar."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Buttons spring down to 0.94 and toolbar icons to 0.86 while pressed, and an active toolbar item springs in a soft bubble. On iOS 26 a GlassButton lets the native glass bounce instead."
+    ],
+    [
+      "Reduced motion",
+      "Press springs are skipped and the active bubble appears without a spring."
+    ],
+    [
+      "Haptics",
+      "A light impact on every press, unless haptics is false."
+    ],
+    [
+      "Screen readers",
+      "Each button has the button role with its label and disabled state; toolbar items also report selected. The toolbar itself has the toolbar role."
+    ],
+    [
+      "Platforms",
+      "iOS 26 shows real interactive Liquid Glass, tinted natively, and floating toolbar circles melt together. Elsewhere it is blurred glass with a stronger colour wash for tinted buttons."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-nav-bar.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/glass-nav-bar.tsx"
   ],
+  "summary": "An iOS 26 glass top bar that fades in as content scrolls under it.",
   "props": [
     [
       "title",
@@ -74,5 +75,28 @@
       "Bar row height, and the full height the bar covers — use it as your content's paddingTop."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "With scrollY the bar starts transparent and its glass fades in as content passes under it. A large title scrolls away while the small centred title fades in, all on the native driver."
+    ],
+    [
+      "Touch",
+      "Back and action buttons spring down under the finger on emulated glass; on iOS 26 the interactive glass bounces natively."
+    ],
+    [
+      "Reduced motion",
+      "The large title no longer scales on pull-down or collapse, and the button press springs are off."
+    ],
+    [
+      "Screen readers",
+      "The title is a header, with the small title hidden while the large one shows. The back button reads backLabel or \"Back\", and actions use their accessibilityLabel."
+    ],
+    [
+      "Platforms",
+      "Real Liquid Glass on iOS 26, where the action buttons merge together. Blur on older iOS, Android and web."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-search-bar.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/glass-search-bar.tsx"
   ],
+  "summary": "A floating glass search pill that swells on focus as a cancel button splits off.",
   "props": [
     [
       "value / defaultValue / onChangeText",
@@ -86,5 +87,28 @@
       "editable, returnKeyType, onFocus, onBlur, onSubmitEditing, … (ref forwards to the TextInput)."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The pill swells a touch on focus and a clear button pops in once there is text. With showCancel, a glass cancel button springs in beside it while searching."
+    ],
+    [
+      "Reduced motion",
+      "The pill no longer swells, and the clear and cancel buttons fade in with a short timing instead of a spring."
+    ],
+    [
+      "Keyboard",
+      "The return key reads Search and calls onSubmit with the query. Cancel clears the text and dismisses the keyboard."
+    ],
+    [
+      "Screen readers",
+      "The field has the search role and is labelled by its placeholder. The clear and cancel buttons read \"Clear search\" and cancelLabel (or \"Cancel search\")."
+    ],
+    [
+      "Platforms",
+      "Real Liquid Glass on iOS 26, where the pill and cancel button melt together. Blur or frosted glass everywhere else."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-segmented.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/glass-segmented.tsx"
   ],
+  "summary": "A glass segmented control whose thumb stretches toward the new segment like a drop.",
   "props": [
     [
       "options",
@@ -62,5 +63,32 @@
       "Style for the glass track."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a segment, or press the thumb and drag it across. It follows your finger and snaps to the nearest segment on release."
+    ],
+    [
+      "Motion",
+      "The thumb springs to the new segment, stretching in the direction of travel before it settles. It lifts slightly while you drag it."
+    ],
+    [
+      "Reduced motion",
+      "The thumb slides over in a short timing with no stretch, and does not lift when dragged."
+    ],
+    [
+      "Haptics",
+      "A selection tick on change and each time a drag crosses into another segment."
+    ],
+    [
+      "Screen readers",
+      "The control is a tablist and each segment a tab with its label and selected state."
+    ],
+    [
+      "Platforms",
+      "Built on Glass: real Liquid Glass on iOS 26, blurred or frosted glass elsewhere."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-sheet.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/glass-sheet.tsx"
   ],
+  "summary": "A floating glass bottom sheet that follows your finger and snaps with velocity.",
   "props": [
     [
       "open",
@@ -104,5 +105,32 @@
       "Sheet content; scrolls at the top snap when taller than the sheet."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag from the grabber or the content. Release velocity picks the snap point, and a fling down or a backdrop tap dismisses it."
+    ],
+    [
+      "Motion",
+      "It springs up over a fading dim and the grabber widens while held. Without snapPoints it sizes to its content, and taller content scrolls."
+    ],
+    [
+      "Reduced motion",
+      "Snapping, opening and closing use short timings instead of springs."
+    ],
+    [
+      "Haptics",
+      "A light tap on open and a selection tick each time it settles on a snap point."
+    ],
+    [
+      "Screen readers",
+      "The sheet is modal and the escape gesture closes it. The grabber is adjustable: increment and decrement step between snap points, and decrement from the lowest one closes it."
+    ],
+    [
+      "Platforms",
+      "Real Liquid Glass on iOS 26, material blur on older iOS and web, and a frosted surface on Android. Android back closes it."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass-tab-bar.json

@@ -10,6 +10,7 @@
   "files": [
     "src/components/ui/glass-tab-bar.tsx"
   ],
+  "summary": "A floating glass tab bar whose selection bubble stretches as it springs between tabs.",
   "props": [
     [
       "tabs",
@@ -72,5 +73,28 @@
       "Exported height of the bar (and the trailing circle) — pad your scroll content by it."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The lighter bubble springs to the selected tab, stretching as it travels and settling when it lands. The selected icon lifts, and buttons spring down while pressed."
+    ],
+    [
+      "Reduced motion",
+      "The bubble jumps to the new tab without stretching, icons switch without a spring and press springs are off."
+    ],
+    [
+      "Haptics",
+      "A selection tick when the tab changes and a light tap on the trailing button."
+    ],
+    [
+      "Screen readers",
+      "The bar is a tablist; each tab is a tab with its selected state, and the badge count is read after the label."
+    ],
+    [
+      "Platforms",
+      "Real Liquid Glass on iOS 26, where the trailing button melts into the bar. Blur everywhere else."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/glass.json

@@ -2,10 +2,11 @@
   "name": "glass",
   "category": "Glass",
   "aliases": [],
-  "exportName": "GlassProvider",
+  "exportName": "Glass",
   "files": [
     "src/components/ui/glass.tsx"
   ],
+  "summary": "A Liquid Glass surface: native on iOS 26, emulated with blur and a rim elsewhere.",
   "props": [
     [
       "variant",
@@ -74,5 +75,20 @@
       "Size, padding and layout."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "With interactive, iOS 26 glass shimmers and bounces under the finger. Elsewhere the prop is ignored."
+    ],
+    [
+      "Platforms",
+      "iOS 26 renders real Liquid Glass that GlassGroup can merge; older iOS uses a system material blur. Android blurs inside GlassProvider + GlassBackdrop and falls back to a frosted fill."
+    ],
+    [
+      "Web",
+      "Blurs what is behind it with a CSS backdrop blur. Wherever glass is emulated it adds a specular rim, a hairline edge and a soft shadow."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

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/inbox.json

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

package/registry/_docs/isometric-bar.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/isometric-bar.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -68,5 +69,7 @@
       "Bar colour."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/kit.json

@@ -6,6 +6,9 @@
   "files": [
     "src/lib/kit.tsx"
   ],
+  "summary": null,
   "props": [],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/liquidglass-tab.json

@@ -16,7 +16,10 @@
     "src/lib/tab-icons.ts",
     "src/lib/tabs.ts"
   ],
+  "summary": null,
   "props": [],
+  "behavior": [],
+  "usage": null,
   "examples": [
     {
       "name": "Preview",

package/registry/_docs/list-item.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/list-item.tsx"
   ],
+  "summary": "Settings, contact and inbox rows with a press highlight that fades in fast, out slow.",
   "props": [
     [
       "title",
@@ -170,6 +171,21 @@
       "Draw the inset hairline under the last row too."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Pressable rows get a UIKit-style highlight that fades in fast and out slowly, and a chevron by default. onLongPress is supported too."
+    ],
+    [
+      "Screen readers",
+      "Pressable rows are buttons labelled with the title, subtitle, value and badge count, with disabled and checked states. ListGroup and ListSection headers are headers."
+    ],
+    [
+      "Platforms",
+      "Plain React Native views, so rows look the same on iOS, Android and web. ListGroup gives the iOS inset-grouped card on every platform."
+    ]
+  ],
+  "usage": "import { ListGroup, ListItem } from '@/components/ui/list-item';\n\n<ListGroup header=\"Account\">\n  <ListItem icon=\"user\" title=\"Profile\" value=\"Amelia Hart\" onPress={openProfile} />\n  <ListItem icon=\"bell\" title=\"Notifications\" badge={3} onPress={openNotifications} />\n</ListGroup>",
   "examples": [
     {
       "name": "Settings",