@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/flip-card.json

@@ -0,0 +1,111 @@
+{
+  "name": "flip-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "FlipCard",
+  "files": [
+    "src/components/ui/flip-card.tsx"
+  ],
+  "props": [
+    [
+      "front",
+      "ReactNode",
+      "—",
+      "First face. Sets the card's size."
+    ],
+    [
+      "back",
+      "ReactNode",
+      "—",
+      "Second face, filling the same box."
+    ],
+    [
+      "flipped",
+      "boolean",
+      "—",
+      "Controlled side — true shows the back."
+    ],
+    [
+      "defaultFlipped",
+      "boolean",
+      "false",
+      "Uncontrolled initial side."
+    ],
+    [
+      "onFlip",
+      "(flipped: boolean) => void",
+      "—",
+      "Fires when tapped."
+    ],
+    [
+      "direction",
+      "\"horizontal\" | \"vertical\"",
+      "\"horizontal\"",
+      "Turn around the vertical or the horizontal axis."
+    ],
+    [
+      "trigger",
+      "\"press\" | \"none\"",
+      "\"press\"",
+      "Flip on tap, or only through `flipped`."
+    ],
+    [
+      "perspective",
+      "number",
+      "1000",
+      "Depth of the effect — smaller is more dramatic."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius of both faces."
+    ],
+    [
+      "shadow",
+      "boolean",
+      "true",
+      "Soft shadow that narrows as the card turns edge-on."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Label for screen readers."
+    ],
+    [
+      "labels",
+      "{ toBack?: string; toFront?: string }",
+      "English hints",
+      "Screen-reader hints for each side."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width, margins)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Polaroid",
+      "title": "Polaroid",
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\nconst hand = Platform.select({ ios: 'Noteworthy', android: 'casual', default: '\"Bradley Hand\", \"Segoe Print\", cursive' });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Polaroid() {\n  const { colors } = useKit();\n  const paper = { width: 240, padding: 12, paddingBottom: 0, backgroundColor: '#f7f5f0' } as const;\n  return (\n    <View style={{ gap: 26 }}>\n      <Header title=\"Memories\" sub=\"Lisbon · June 2025 · 24 photos\" />\n      <FlipCard\n      radius={6}\n      accessibilityLabel=\"Polaroid of a Lisbon tram\"\n      style={{ alignSelf: 'center', transform: [{ rotate: '-2deg' }] }}\n      front={\n        <View style={paper}>\n          <Image alt=\"\" source={photo(419, 480, 480)} style={{ width: 216, height: 216, backgroundColor: '#ddd' }} />\n          <Text style={{ fontFamily: hand, fontSize: 19, color: '#2b2b2b', textAlign: 'center', paddingVertical: 14 }}>Lisbon, June ’25</Text>\n        </View>\n      }\n      back={\n        <View style={[paper, { flex: 1, padding: 22, backgroundColor: '#efe9dc', justifyContent: 'space-between' }]}>\n          <Text style={{ fontFamily: hand, fontSize: 18, lineHeight: 27, color: '#2f2a22' }}>\n            Tram 28 all the way up to Graça. Pastéis de nata still warm. Best trip yet — come back next year?\n          </Text>\n          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>\n            <Text style={{ fontFamily: hand, fontSize: 16, color: '#5b5245' }}>— M.</Text>\n            <View style={{ paddingHorizontal: 8, paddingVertical: 4, borderWidth: 1.5, borderColor: '#b04a3a', borderRadius: 4, transform: [{ rotate: '6deg' }] }}>\n              <Text style={{ color: '#b04a3a', fontSize: 10, fontWeight: '800', letterSpacing: 1 }}>LISBOA · 14 JUN</Text>\n            </View>\n          </View>\n        </View>\n      }\n      />\n      <Text style={{ color: colors.mutedForeground, fontSize: 13, textAlign: 'center' }}>Tap the photo to read the note on the back</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Recipe",
+      "title": "Recipe",
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Recipe() {\n  const { colors } = useKit();\n  const items = ['3 parsnips, halved', '2 red onions, quartered', '4 carrots', 'Parsley & dill', 'Olive oil, salt, cracked pepper'];\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"Tonight’s dinner\" sub=\"Picked for you · vegetarian\" />\n      <FlipCard\n      radius={22}\n      accessibilityLabel=\"Roasted root vegetables recipe\"\n      front={\n        <View style={{ height: 260, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(292, 720, 520)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18, gap: 2 }}>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>45 MIN · SERVES 4</Text>\n            <Text style={{ color: '#fff', fontSize: 26, fontWeight: '800', letterSpacing: -0.5 }}>Roasted roots</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12 }}>Tap for ingredients</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 20, backgroundColor: '#f6f1e7', gap: 10 }}>\n          <Text style={{ color: '#3b3226', fontSize: 12, fontWeight: '800', letterSpacing: 1.2 }}>INGREDIENTS</Text>\n          {items.map((it) => (\n            <View key={it} style={{ flexDirection: 'row', alignItems: 'center', gap: 10, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: 'rgba(59,50,38,0.12)' }}>\n              <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#c9a227' }} />\n              <Text style={{ color: '#3b3226', fontSize: 15 }}>{it}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 8 }}>\n        {['45 min', 'Serves 4', '520 kcal'].map((t) => (\n          <View key={t} style={{ flex: 1, alignItems: 'center', paddingVertical: 9, borderRadius: 12, backgroundColor: colors.muted }}>\n            <Text style={{ color: colors.foreground, fontSize: 13, fontWeight: '600' }}>{t}</Text>\n          </View>\n        ))}\n      </View>\n      <Pressable accessibilityRole=\"button\" style={{ alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Start cooking</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Profile",
+      "title": "Profile",
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Profile() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 20 }}>\n      <Header title=\"Design team\" sub=\"Tap a card to see their year\" />\n      <FlipCard\n      radius={24}\n      accessibilityLabel=\"Ana Lima, lead designer\"\n      style={{ alignSelf: 'center', width: 250 }}\n      front={\n        <View style={{ height: 320, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(1027, 500, 640)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n            <Text style={{ color: '#fff', fontSize: 24, fontWeight: '800', letterSpacing: -0.4 }}>Ana Lima</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>Lead designer · Lisbon</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 22, backgroundColor: '#141416', justifyContent: 'space-between' }}>\n          <Text style={{ color: 'rgba(255,255,255,0.55)', fontSize: 11, fontWeight: '700', letterSpacing: 1.2 }}>THIS YEAR</Text>\n          {[\n            ['Projects shipped', '24'],\n            ['Design reviews', '138'],\n            ['Mentees', '6'],\n          ].map(([k, v]) => (\n            <View key={k}>\n              <Text style={{ color: '#fff', fontSize: 34, fontWeight: '800', letterSpacing: -1 }}>{v}</Text>\n              <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13 }}>{k}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n          <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Message Ana</Text>\n        </Pressable>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.muted }}>\n          <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '600' }}>View work</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Flashcard",
+      "title": "Flashcard",
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Flashcard() {\n  const { colors } = useKit();\n  const [flipped, setFlipped] = useState(false);\n  return (\n    <View style={{ gap: 14 }}>\n      <Header\n        title=\"Spanish · Fruit\"\n        sub=\"12 cards left today\"\n        right={<Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>8 / 20</Text>}\n      />\n      <View style={{ height: 6, borderRadius: 3, backgroundColor: colors.muted, marginBottom: 6 }}>\n        <View style={{ width: '40%', height: 6, borderRadius: 3, backgroundColor: colors.success }} />\n      </View>\n      <FlipCard\n        radius={22}\n        flipped={flipped}\n        onFlip={setFlipped}\n        accessibilityLabel=\"Flashcard\"\n        front={\n          <View style={{ height: 240, backgroundColor: '#3a0d10' }}>\n            <Image alt=\"\" source={photo(1080, 720, 400)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n            <Scrim max={0.8} />\n            <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n              <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>SPANISH</Text>\n              <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800' }}>la fresa</Text>\n            </View>\n          </View>\n        }\n        back={\n          <View style={{ flex: 1, padding: 20, backgroundColor: colors.card, justifyContent: 'center', gap: 6 }}>\n            <Text style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>ENGLISH</Text>\n            <Text style={{ color: colors.foreground, fontSize: 30, fontWeight: '800' }}>the strawberry</Text>\n            <Text style={{ color: colors.mutedForeground, fontSize: 14 }}>“Me encantan las fresas con nata.”</Text>\n          </View>\n        }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        {['Again', 'Good', 'Easy'].map((label) => (\n          <Pressable\n            key={label}\n            onPress={() => setFlipped((f) => !f)}\n            accessibilityRole=\"button\"\n            style={{ flex: 1, alignItems: 'center', paddingVertical: 12, borderRadius: 12, backgroundColor: colors.muted }}\n          >\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '600' }}>{label}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/floating-input.json

@@ -0,0 +1,191 @@
+{
+  "name": "floating-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "FloatingInput",
+  "files": [
+    "src/components/ui/floating-input.tsx"
+  ],
+  "props": [
+    [
+      "label",
+      "string",
+      "—",
+      "Placeholder that floats onto the border."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Set to false to put the label above the field as static text (no notch) and show placeholder inside; filled and underline work too."
+    ],
+    [
+      "variant",
+      "\"outlined\" | \"filled\" | \"underline\"",
+      "\"outlined\"",
+      "Notched outline, rounded filled, or bare underline (filled/underline bars grow from the centre on focus)."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "44 / 54 / 64pt — font, padding, radius and icons scale too."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Red state, icon + message that slides in, one shake."
+    ],
+    [
+      "success",
+      "boolean | string",
+      "—",
+      "Green border + animated check; a string is shown as the message."
+    ],
+    [
+      "helper",
+      "string",
+      "—",
+      "Hint under the field."
+    ],
+    [
+      "prefix / suffix",
+      "string",
+      "—",
+      "Inline text like \"₹\", \"+91\", \"INR\" — fades in when the label floats."
+    ],
+    [
+      "counter",
+      "boolean",
+      "false",
+      "Shows length/maxLength under the field (needs maxLength)."
+    ],
+    [
+      "left / right",
+      "ReactNode",
+      "—",
+      "Icons or adornments inside the field."
+    ],
+    [
+      "clearable",
+      "boolean",
+      "false",
+      "Animated SVG clear button while there's text."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus border, halo and label colour."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the field (paints the notch)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer wrapper around the field and message line (the one that shakes)."
+    ],
+    [
+      "fieldStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "The bordered box: background, border width / colour, radius, height, padding. Wins over the computed style; a borderColor replaces the resting border only (focus, error and success colours still show). A numeric height / borderRadius re-centres the label and resizes the halo."
+    ],
+    [
+      "inputStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The typed text — fontSize, fontWeight, color, letterSpacing, fontFamily."
+    ],
+    [
+      "labelStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Label in both modes (floating and above). color is the resting colour — focus (accent), error and success still take over; fontSize sets the resting size, it floats at the same ratio and the notch follows its width."
+    ],
+    [
+      "messageStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Helper / error / success text. color applies to the helper; error and success keep their tone colour."
+    ],
+    [
+      "prefixStyle / suffixStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Prefix / suffix text (still fades in with the label)."
+    ],
+    [
+      "counterStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The length/maxLength counter; turns danger at the limit regardless."
+    ],
+    [
+      "placeholderTextColor",
+      "string",
+      "theme mutedForeground",
+      "Placeholder colour (floatingLabel={false})."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Clear button colour at rest."
+    ],
+    [
+      "…TextInputProps",
+      "",
+      "",
+      "Everything TextInput accepts."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\n\nexport default function Variants() {\n  return (\n    <View style={{ gap: 18 }}>\n      <FloatingInput label=\"Outlined\" defaultValue=\"Notch cuts the border\" helper=\"Tap to see the focus halo\" />\n      <FloatingInput variant=\"filled\" label=\"Filled\" defaultValue=\"Bar grows from the centre\" />\n      <FloatingInput variant=\"underline\" label=\"Underline\" defaultValue=\"Minimal, for dense forms\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "States",
+      "title": "States",
+      "code": "import { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\n\nexport default function States() {\n  return (\n    <View style={{ gap: 16 }}>\n      <FloatingInput label=\"Username\" defaultValue=\"admin\" error=\"That username is already taken\" />\n      <FloatingInput label=\"Username\" defaultValue=\"priya.codes\" success=\"Nice — it's available\" />\n      <FloatingInput label=\"Workspace\" defaultValue=\"Acme Inc.\" editable={false} helper=\"Only owners can rename the workspace\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 14 }}>\n      <FloatingInput size=\"sm\" label=\"Small · 44pt\" defaultValue=\"Compact filters and toolbars\" clearable />\n      <FloatingInput size=\"md\" label=\"Medium · 54pt\" defaultValue=\"The default for forms\" clearable />\n      <FloatingInput size=\"lg\" label=\"Large · 64pt\" defaultValue=\"Hero fields\" clearable />\n    </View>\n  );\n}\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/gift-card.json

@@ -0,0 +1,108 @@
+{
+  "name": "gift-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "GiftCard",
+  "files": [
+    "src/components/ui/gift-card.tsx"
+  ],
+  "props": [
+    [
+      "amount",
+      "string",
+      "—",
+      "Formatted amount, e.g. \"₹2,000\"."
+    ],
+    [
+      "brand",
+      "string",
+      "—",
+      "Store / brand, top-left."
+    ],
+    [
+      "message",
+      "string",
+      "—",
+      "Short note on the front."
+    ],
+    [
+      "from / to",
+      "string",
+      "—",
+      "Who sent it and who it's for."
+    ],
+    [
+      "code",
+      "string",
+      "—",
+      "Redeem code, revealed on the back (grouped in fours)."
+    ],
+    [
+      "validity",
+      "string",
+      "—",
+      "Expiry line on the back."
+    ],
+    [
+      "onCopy",
+      "(code: string) => void",
+      "—",
+      "Shows a Copy button — wire it to expo-clipboard."
+    ],
+    [
+      "image",
+      "ImageSourcePropType",
+      "deep plum",
+      "Card art — a photo or texture (require() or { uri })."
+    ],
+    [
+      "tone",
+      "\"light\" | \"dark\"",
+      "\"light\"",
+      "Light text for dark art, dark text for pale art."
+    ],
+    [
+      "redeemed",
+      "boolean",
+      "false",
+      "Dim the card with a Redeemed label."
+    ],
+    [
+      "flipped / defaultFlipped / onFlip",
+      "boolean / boolean / (flipped) => void",
+      "— / false / —",
+      "Controlled or uncontrolled side."
+    ],
+    [
+      "tilt",
+      "boolean",
+      "true",
+      "Tilt toward the finger."
+    ],
+    [
+      "radius",
+      "number",
+      "18",
+      "Corner radius."
+    ],
+    [
+      "background",
+      "string",
+      "\"#2a1630\"",
+      "Card colour when there is no image."
+    ],
+    [
+      "labels",
+      "{ tag?, for?, from?, redeemed?, code?, back?, copy?, copied? }",
+      "English",
+      "Every built-in string, for translation."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/glass-button.json

@@ -0,0 +1,118 @@
+{
+  "name": "glass-button",
+  "category": "Glass",
+  "aliases": [
+    "liquid-glass-button",
+    "glass-toolbar",
+    "floating-controls"
+  ],
+  "exportName": "GlassButton",
+  "files": [
+    "src/components/ui/glass-button.tsx"
+  ],
+  "props": [
+    [
+      "label",
+      "string",
+      "—",
+      "Button text. Leave it out (with an icon) for a circular icon button."
+    ],
+    [
+      "icon",
+      "ReactNode",
+      "—",
+      "Icon before the label. `useGlassButtonInk({ variant, tint, scheme })` returns the colour to draw it in."
+    ],
+    [
+      "size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Height 36 / 44 / 52; icon-only buttons are circles of that size. `GLASS_ICON_SIZE[size]` is the matching icon size."
+    ],
+    [
+      "variant",
+      "'glass' | 'tinted'",
+      "'glass'",
+      "Plain monochrome glass, or glass washed with `tint` — the label switches to black or white to stay readable."
+    ],
+    [
+      "tint",
+      "string",
+      "kit accent",
+      "Wash colour for the tinted variant."
+    ],
+    [
+      "scheme",
+      "'light' | 'dark'",
+      "kit theme",
+      "Force light or dark glass, e.g. 'dark' over photos."
+    ],
+    [
+      "onPress / disabled",
+      "() => void / boolean",
+      "— / false",
+      "Press handler; disabled dims the button and blocks presses."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light impact on press."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "label",
+      "Required for icon-only buttons."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Outer style: margins, position, width or flex (buttons hug their content by default)."
+    ],
+    [
+      "GlassToolbar items",
+      "{ key, icon, label, onPress?, active?, disabled? }[]",
+      "—",
+      "Icon buttons. `icon` is a node or `({ color, size, active }) => node`; `label` is the accessibility label; `active` draws a soft bubble in the accent colour."
+    ],
+    [
+      "GlassToolbar size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Item size, 36 / 44 / 52."
+    ],
+    [
+      "GlassToolbar floating",
+      "boolean",
+      "false",
+      "A cluster of separate glass circles (melting together on iOS 26) instead of one capsule."
+    ],
+    [
+      "GlassToolbar direction",
+      "'row' | 'column'",
+      "'row'",
+      "Lay items out horizontally or vertically (map-style controls)."
+    ],
+    [
+      "GlassToolbar separators / gap",
+      "boolean / number",
+      "true / 8",
+      "Hairlines between capsule items; space between floating circles."
+    ],
+    [
+      "GlassToolbar accent",
+      "string",
+      "kit accent (glass ink)",
+      "Colour of active items."
+    ],
+    [
+      "GlassToolbar scheme / haptics / accessibilityLabel / style",
+      "—",
+      "kit theme / true / — / —",
+      "As on GlassButton; accessibilityLabel names the toolbar."
+    ]
+  ],
+  "examples": []
+}

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

@@ -0,0 +1,78 @@
+{
+  "name": "glass-nav-bar",
+  "category": "Glass",
+  "aliases": [],
+  "exportName": "GlassNavBar",
+  "files": [
+    "src/components/ui/glass-nav-bar.tsx"
+  ],
+  "props": [
+    [
+      "title",
+      "string",
+      "—",
+      "Centred bar title (and the large title when largeTitle is on)."
+    ],
+    [
+      "largeTitle",
+      "boolean",
+      "false",
+      "Big title under the bar that scrolls away while the small centred title fades in. Needs scrollY."
+    ],
+    [
+      "scrollY",
+      "Animated.Value",
+      "—",
+      "Your scroll view's offset (useGlassNavScroll). The glass fades in over ~40pt as content passes under the bar; without it the bar is solid glass."
+    ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows a round glass back button with a chevron."
+    ],
+    [
+      "backLabel",
+      "string",
+      "—",
+      "Text beside the chevron (the button becomes a pill) and its accessibility label; \"Back\" otherwise."
+    ],
+    [
+      "actions",
+      "{ key, icon, onPress, accessibilityLabel }[]",
+      "[]",
+      "Round glass buttons on the right, grouped so they merge on iOS 26."
+    ],
+    [
+      "scheme",
+      "'light' | 'dark'",
+      "kit theme",
+      "Force light or dark glass and ink, e.g. over a photo."
+    ],
+    [
+      "topInset",
+      "number",
+      "0",
+      "Space above the bar for the status bar — pass your safe-area top inset."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the bar container, which pins to the top of its parent."
+    ],
+    [
+      "useGlassNavScroll(listener?)",
+      "hook → { scrollY, onScroll }",
+      "—",
+      "Native-driver Animated.event for an Animated.ScrollView / FlatList (scrollEventThrottle 16)."
+    ],
+    [
+      "GLASS_NAV_HEIGHT / glassNavInset({ largeTitle, topInset })",
+      "number / function",
+      "54",
+      "Bar row height, and the full height the bar covers — use it as your content's paddingTop."
+    ]
+  ],
+  "examples": []
+}