@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/sign-in.json

@@ -0,0 +1,198 @@
+{
+  "name": "sign-in",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "SignIn",
+  "files": [
+    "src/components/blocks/sign-in.tsx"
+  ],
+  "props": [
+    [
+      "methods",
+      "('apple' | 'google' | 'microsoft' | 'github' | 'phone' | 'email')[]",
+      "['apple', 'google', 'phone', 'email']",
+      "Options in display order. OAuth ones render as 'Continue with X'; phone / email open their step. Exactly one of phone / email and no OAuth skips the welcome step."
+    ],
+    [
+      "emailMode",
+      "'password' | 'code' | 'magic-link'",
+      "'password'",
+      "What follows the email step: a password, a one-time email code, or a magic link + 'Check your inbox'."
+    ],
+    [
+      "mode / defaultMode",
+      "'sign-in' | 'sign-up'",
+      "'sign-in'",
+      "Controlled / initial mode. Sign-up shows 'Create account' and a password strength meter."
+    ],
+    [
+      "onModeChange",
+      "(mode) => void",
+      "—",
+      "The footer 'Sign up' / 'Sign in' link toggled the mode."
+    ],
+    [
+      "initialStep",
+      "'welcome' | 'phone' | 'otp' | 'email' | 'password' | 'email-code' | 'check-email' | 'forgot'",
+      "'welcome'",
+      "Step to open on mount (demos, deep links). Back still walks a sensible stack."
+    ],
+    [
+      "defaultPhone",
+      "string",
+      "''",
+      "Prefill the number (digits; a leading dial code is stripped)."
+    ],
+    [
+      "defaultEmail",
+      "string",
+      "''",
+      "Prefill the email field."
+    ],
+    [
+      "countryCode",
+      "string",
+      "'+91'",
+      "Selected dial code. +91 formats as '98765 43210' and needs 10 digits; others accept 7–15."
+    ],
+    [
+      "countries",
+      "{ code, dial, flag? }[]",
+      "IN, US, GB, AE, SG, AU",
+      "Dial-code picker list (tap the chip). One entry hides the picker."
+    ],
+    [
+      "otpLength",
+      "number",
+      "6",
+      "Digits in the one-time code."
+    ],
+    [
+      "resendSeconds",
+      "number",
+      "30",
+      "Countdown before 'Resend code' / 'Resend' is available."
+    ],
+    [
+      "onOAuth",
+      "(provider) => void | Promise",
+      "—",
+      "OAuth button pressed. Spinner while pending; resolve → onSuccess, throw → message shown inline."
+    ],
+    [
+      "onSendPhoneCode",
+      "(fullPhone: string) => void | Promise",
+      "—",
+      "Send an SMS code to the E.164 number ('+919876543210'). Resolve to open the code step; also used by Resend."
+    ],
+    [
+      "onVerifyPhoneCode",
+      "(fullPhone, code) => void | Promise",
+      "—",
+      "Called when the cells fill. Resolve → success state then onSuccess; throw → error on the cells."
+    ],
+    [
+      "onEmailPassword",
+      "({ email, password, mode }) => void | Promise",
+      "—",
+      "Password step submitted. Resolve → onSuccess; throw → message under the field."
+    ],
+    [
+      "onSendEmailCode",
+      "(email) => void | Promise",
+      "—",
+      "emailMode 'code': send the code. Resolve to open the code step."
+    ],
+    [
+      "onVerifyEmailCode",
+      "(email, code) => void | Promise",
+      "—",
+      "emailMode 'code': check the code. Resolve → onSuccess."
+    ],
+    [
+      "onSendMagicLink",
+      "(email) => void | Promise",
+      "—",
+      "emailMode 'magic-link': send the link. Resolve to show 'Check your inbox'."
+    ],
+    [
+      "onForgotPassword",
+      "(email) => void | Promise",
+      "—",
+      "'Send reset link' pressed on the forgot step. Resolve to show 'Check your inbox'."
+    ],
+    [
+      "onSuccess",
+      "() => void",
+      "—",
+      "Called after any successful final step (OAuth, code verified, email + password)."
+    ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows a back button on the first step."
+    ],
+    [
+      "onTerms / onPrivacy",
+      "() => void",
+      "—",
+      "Make 'Terms' / 'Privacy Policy' in the legal line tappable."
+    ],
+    [
+      "appName",
+      "string",
+      "'Northwind'",
+      "Used in the default title and the logo initial."
+    ],
+    [
+      "logo",
+      "ReactNode",
+      "monochrome initial mark",
+      "Replace the welcome logo."
+    ],
+    [
+      "title",
+      "string",
+      "`Welcome to ${appName}`",
+      "Welcome heading."
+    ],
+    [
+      "subtitle",
+      "string",
+      "'Sign in to continue.'",
+      "Line under the welcome heading."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Primary buttons, links and focus rings (black in light, white in dark by default)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ],
+    [
+      "error / onDismissError",
+      "string / () => void",
+      "—",
+      "Controlled error shown on the current step; onDismissError fires when the user edits or navigates."
+    ],
+    [
+      "onSignUp",
+      "() => void",
+      "—",
+      "Pressed 'Sign up' — called instead of toggling the mode."
+    ],
+    [
+      "onSubmit / onSocial / providers",
+      "deprecated",
+      "—",
+      "Aliases of onEmailPassword / onOAuth; providers (apple / google) sets the OAuth part of methods when methods isn't given."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/skeleton.json

@@ -0,0 +1,142 @@
+{
+  "name": "skeleton",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "SkeletonGroup",
+  "files": [
+    "src/components/ui/skeleton.tsx"
+  ],
+  "props": [
+    [
+      "width / height",
+      "DimensionValue",
+      "\"100%\" / 14",
+      "Block width and height, in points or percent."
+    ],
+    [
+      "radius",
+      "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"capsule\" | \"full\" | number",
+      "\"sm\"",
+      "Corner radius. 'capsule' follows the kit radius for bars; 'full' is always a pill / circle."
+    ],
+    [
+      "variant",
+      "\"shimmer\" | \"wave\" | \"pulse\" | \"static\"",
+      "\"shimmer\"",
+      "Angled light band sweeping all blocks as one wave, a staggered top-to-bottom brighten, an opacity pulse, or no motion. Every variant is static when reduce motion is on."
+    ],
+    [
+      "color",
+      "string",
+      "faint foreground",
+      "Block colour."
+    ],
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "Centred overlay inside the block (e.g. a faint glyph)."
+    ],
+    [
+      "Skeleton.Text",
+      "{ lines, lineHeight, gap, lastLineWidth }",
+      "3 lines",
+      "Paragraph placeholder with a slightly ragged edge."
+    ],
+    [
+      "Skeleton.Avatar",
+      "{ size, shape: \"circle\" | \"rounded\" }",
+      "40, circle",
+      "Avatar placeholder."
+    ],
+    [
+      "Skeleton.Media",
+      "{ aspectRatio, height, width, glyph, glyphSize, radius }",
+      "16 / 9, glyph off",
+      "Image block with a faint picture glyph in the centre."
+    ],
+    [
+      "Skeleton.List",
+      "{ rows, avatarSize, avatarShape, trailing, dividers }",
+      "4 rows, 44, circle, trailing on",
+      "Rows with an avatar, two lines and a trailing pill."
+    ],
+    [
+      "Skeleton.Card",
+      "{ media, mediaHeight, header, lines, actions }",
+      "all on, 168",
+      "Feed post: author row with menu, caption, media and an action bar."
+    ],
+    [
+      "Skeleton.Nav",
+      "{ header, back, actions, tabs, tabCount, rows, children }",
+      "header + 4 tabs + 4 rows",
+      "Screen chrome while content loads — app bar, list body, bottom tabs."
+    ],
+    [
+      "Skeleton.Group",
+      "{ style, children }",
+      "window",
+      "Frame the shimmer / wave travels across, so blocks inside line up as one wave (Nav and Reveal add one)."
+    ],
+    [
+      "Skeleton.Reveal",
+      "{ loading, skeleton, children, stagger, animateHeight, loadingLabel }",
+      "—, 3 lines, —, 70, true, \"Loading\"",
+      "Shows `skeleton` while loading; then it dissolves, top-level children rise in with a stagger and the height glides between the two."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the block (composites apply it to their wrapper)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Shimmer",
+      "title": "Shimmer",
+      "code": "import { Text, View, type DimensionValue } from 'react-native';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Shimmer() {\n  return (\n    <Skeleton.Group style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>\n      <Skeleton.Avatar size={52} />\n      <View style={{ flex: 1, gap: 10 }}>\n        <Skeleton width=\"70%\" height={14} radius=\"capsule\" />\n        <Skeleton width=\"45%\" height={12} radius=\"capsule\" />\n      </View>\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "Card",
+      "title": "Card",
+      "code": "import { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Card() {\n  return (\n    <Skeleton.Group style={{ gap: 14 }}>\n      <Skeleton.Card />\n      <Skeleton.Card media={false} lines={3} />\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "List",
+      "title": "List",
+      "code": "import { Skeleton } from '@/components/ui/skeleton';\nimport { useKit } from '@/lib/kit';\n\nexport default function List() {\n  const { radius } = useKit();\n  return (\n    <Skeleton.Group style={{ gap: 8 }}>\n      <Skeleton height={40} radius={radius.capsule(40)} />\n      <Skeleton.List rows={5} dividers />\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "ProductGrid",
+      "title": "Product Grid",
+      "code": "import { Text, View, type DimensionValue } from 'react-native';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nexport default function ProductGrid() {\n  return (\n    <Skeleton.Group style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>\n      {[0, 1, 2, 3].map((i) => (\n        <View key={i} style={{ flexBasis: '45%', flexGrow: 1, gap: 8 }}>\n          <Skeleton.Media aspectRatio={1} radius=\"lg\" />\n          <Skeleton width={i % 2 ? '70%' : '86%'} height={12} radius=\"capsule\" />\n          <Skeleton width={56} height={14} radius=\"capsule\" />\n        </View>\n      ))}\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "ProfileHeader",
+      "title": "Profile Header",
+      "code": "import { Text, View, type DimensionValue } from 'react-native';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { useKit } from '@/lib/kit';\n\nconst ROW_W: DimensionValue[] = ['34%', '46%', '28%'];\n\nexport default function ProfileHeader() {\n  const { colors, radius, dark } = useKit();\n  const surface = { backgroundColor: dark ? colors.card : colors.muted, borderRadius: radius.xl, paddingHorizontal: 14 };\n  return (\n    <Skeleton.Group style={{ gap: 20 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>\n        <Skeleton.Avatar size={72} />\n        <View style={{ flex: 1, gap: 9 }}>\n          <Skeleton width=\"58%\" height={16} radius=\"capsule\" />\n          <Skeleton width=\"74%\" height={11} radius=\"capsule\" />\n          <Skeleton width={96} height={28} radius=\"full\" style={{ marginTop: 4 }} />\n        </View>\n      </View>\n      {[3, 2].map((rows, g) => (\n        <View key={g} style={{ gap: 8 }}>\n          <Skeleton width={g ? 84 : 120} height={10} radius=\"capsule\" />\n          <View style={surface}>\n            {Array.from({ length: rows }, (_, i) => (\n              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, height: 52 }}>\n                <Skeleton width={30} height={30} radius=\"md\" />\n                <Skeleton width={ROW_W[i % 3]} height={12} radius=\"capsule\" />\n                <View style={{ flex: 1 }} />\n                <Skeleton width={[64, 40, 52][i % 3]} height={11} radius=\"capsule\" />\n              </View>\n            ))}\n          </View>\n        </View>\n      ))}\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "LoadingSwap",
+      "title": "Loading Swap",
+      "code": "import React, { useEffect, useRef, useState } from 'react';\nimport { Text, View, type DimensionValue } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { useKit } from '@/lib/kit';\n\nexport default function LoadingSwap() {\n  const { colors, radius, text } = useKit();\n  const [loading, setLoading] = useState(true);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const reload = () => {\n    setLoading(true);\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setLoading(false), 1600);\n  };\n  useEffect(() => {\n    timer.current = setTimeout(() => setLoading(false), 1600);\n    return () => {\n      if (timer.current) clearTimeout(timer.current);\n    };\n  }, []);\n  return (\n    <View style={{ gap: 16 }}>\n      <Skeleton.Reveal\n        loading={loading}\n        skeleton={\n          <View style={{ gap: 12 }}>\n            <Skeleton.List rows={1} trailing={false} />\n            <Skeleton.Text lines={2} />\n          </View>\n        }\n      >\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 }}>\n          <View style={{ width: 44, height: 44, borderRadius: radius.full, backgroundColor: colors.accent, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ color: colors.accentForeground, fontSize: 16, fontWeight: '400' }}>MC</Text>\n          </View>\n          <View style={{ flex: 1 }}>\n            <Text style={[text.md, { color: colors.foreground, fontWeight: '400' }]}>Maya Chen</Text>\n            <Text style={[text.sm, { color: colors.mutedForeground, fontWeight: '400' }]}>Product designer · Lisbon</Text>\n          </View>\n        </View>\n        <Text style={[text.sm, { color: colors.foreground, fontWeight: '400', marginTop: 4 }]}>\n          Shipped the new onboarding flow today. Activation is up 18% in the first week — thanks to everyone who tested the beta.\n        </Text>\n        <Text style={[text.xs, { color: colors.mutedForeground, fontWeight: '400', marginTop: 10 }]}>\n          124 likes · 18 comments\n        </Text>\n      </Skeleton.Reveal>\n      <Button size=\"sm\" variant=\"outline\" style={{ alignSelf: 'flex-start' }} disabled={loading} onPress={reload}>\n        {loading ? 'Loading…' : 'Reload'}\n      </Button>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Wave",
+      "title": "Wave",
+      "code": "import { Text, View, type DimensionValue } from 'react-native';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Wave() {\n  return (\n    <Skeleton.Group style={{ gap: 16 }}>\n      <Skeleton.Media variant=\"wave\" radius=\"lg\" />\n      <Skeleton.Text variant=\"wave\" lines={3} />\n      <Skeleton.List variant=\"wave\" rows={2} />\n    </Skeleton.Group>\n  );\n}\n"
+    },
+    {
+      "name": "Pulse",
+      "title": "Pulse",
+      "code": "import { Text, View, type DimensionValue } from 'react-native';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Pulse() {\n  return (\n    <View style={{ gap: 16 }}>\n      <Skeleton variant=\"pulse\" height={140} radius=\"lg\" />\n      <Skeleton.Text variant=\"pulse\" lines={3} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Nav",
+      "title": "Nav",
+      "code": "import { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Nav() {\n  return <Skeleton.Nav rows={6} tabCount={5} style={{ minHeight: 600 }} />;\n}\n"
+    }
+  ]
+}

package/registry/_docs/slide-to-confirm.json

@@ -0,0 +1,84 @@
+{
+  "name": "slide-to-confirm",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "SlideToConfirm",
+  "files": [
+    "src/components/ui/slide-to-confirm.tsx"
+  ],
+  "props": [
+    [
+      "label",
+      "string",
+      "\"Slide to confirm\"",
+      "Shimmering text in the track."
+    ],
+    [
+      "confirmedLabel",
+      "string",
+      "\"Confirmed\"",
+      "Text once completed."
+    ],
+    [
+      "onConfirm",
+      "() => void | Promise<unknown>",
+      "—",
+      "Fires at the end. Return a promise to show a spinner in the thumb; a rejection shakes the track, flashes the danger colour and slides back."
+    ],
+    [
+      "variant",
+      "\"default\" | \"gradient\" | \"outline\" | \"compact\"",
+      "\"default\"",
+      "Tinted track with a solid thumb, opt-in two-tone gradient track with a white thumb, transparent track with a tinted hairline, or a 48pt slim track."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Thumb, trail and track colour; only the gradient variant derives a second tone from it."
+    ],
+    [
+      "icon",
+      "ReactNode",
+      "animated chevrons",
+      "Custom thumb icon."
+    ],
+    [
+      "resetAfter",
+      "number",
+      "—",
+      "Auto-reset after this many ms. Otherwise call ref.reset()."
+    ],
+    [
+      "threshold",
+      "number",
+      "0.82",
+      "Fraction of the track that confirms on release."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Ticks at 25 / 50 / 75 %, success on confirm, error on failure."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Locks the thumb."
+    ],
+    [
+      "ref",
+      "{ reset(): void }",
+      "—",
+      "Imperative reset."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the track (merged over its height, radius and colour)."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/slider.json

@@ -0,0 +1,157 @@
+{
+  "name": "slider",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Slider",
+  "files": [
+    "src/components/ui/slider.tsx"
+  ],
+  "props": [
+    [
+      "value / defaultValue",
+      "number | [number, number]",
+      "min / [min, max]",
+      "Controlled or uncontrolled. A number, or [from, to] when range is set (typed by the range prop)."
+    ],
+    [
+      "onValueChange",
+      "(value) => void",
+      "—",
+      "Fires when the stepped value changes (drag, tap, icon or accessibility action)."
+    ],
+    [
+      "onSlidingStart / onSlidingComplete",
+      "(value) => void",
+      "—",
+      "Drag lifecycle."
+    ],
+    [
+      "min / max / step",
+      "number",
+      "0 / 100 / 1",
+      "Bounds and snap interval (0 = continuous). Coarse steps spring between positions; fine ones follow the finger and snap on release."
+    ],
+    [
+      "range",
+      "boolean",
+      "false",
+      "Two thumbs selecting a span; value becomes [from, to]."
+    ],
+    [
+      "variant",
+      "\"default\" | \"bar\" | \"stepped\"",
+      "\"default\"",
+      "Thin track + round thumb, a tall Control-Center bar with no thumb, or a track with a tick at every step."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Scales track, thumb, bar height and text. Hit area is always ≥ 44pt."
+    ],
+    [
+      "marks",
+      "boolean | (number | { value, label })[]",
+      "stepped: true",
+      "Ticks at every step, or custom values with labels under the track."
+    ],
+    [
+      "showValue",
+      "\"drag\" | \"always\" | \"never\"",
+      "\"drag\" (bar: \"never\")",
+      "Value tooltip above the thumb. On a bar, \"always\" shows the value inside the bar instead."
+    ],
+    [
+      "formatValue",
+      "(value) => string",
+      "—",
+      "Text for the tooltip, labels and accessibility value."
+    ],
+    [
+      "showMinMax / minLabel / maxLabel",
+      "boolean / string / string",
+      "—",
+      "Labels under both ends of the track (formatted min / max by default)."
+    ],
+    [
+      "icon",
+      "SliderIconName | ReactNode | (color) => ReactNode",
+      "—",
+      "Bar only: icon inside the bar that changes colour as the fill passes over it."
+    ],
+    [
+      "leftIcon / rightIcon",
+      "SliderIconName | ReactNode | (color) => ReactNode",
+      "—",
+      "Icon beside the track. Built-ins ('volume-low', 'volume-high', 'volume-off', 'sun-low', 'sun-high', 'minus', 'plus') step the value when tapped."
+    ],
+    [
+      "thickFill",
+      "boolean",
+      "false",
+      "Default variant: draws the fill thicker than the track."
+    ],
+    [
+      "histogram / histogramHeight",
+      "number[] / number",
+      "— / 44",
+      "Bars above the track; bars inside the selection use the accent."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and ignores touches."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Fill colour."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Announced with the adjustable role; range thumbs get “minimum” / “maximum”."
+    ],
+    [
+      "style / trackStyle / fillStyle / thumbStyle / labelStyle",
+      "StyleProp",
+      "—",
+      "Root, inactive track, active fill, thumb and value text."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "ControlCenter",
+      "title": "Control Center",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function ControlCenter() {\n  const [brightness, setBrightness] = useState(72);\n  return (\n    <Card>\n      <Header title=\"Display & sound\" />\n      <Slider\n        variant=\"bar\"\n        size=\"lg\"\n        step={0}\n        value={brightness}\n        onValueChange={setBrightness}\n        icon=\"sun-high\"\n        showValue=\"always\"\n        formatValue={(v) => `${Math.round(v)}%`}\n        accessibilityLabel=\"Brightness\"\n      />\n      <Slider variant=\"bar\" size=\"lg\" defaultValue={40} icon=\"volume-high\" accessibilityLabel=\"Volume\" />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Default",
+      "title": "Default",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Default() {\n  const [volume, setVolume] = useState(64);\n  return (\n    <Card>\n      <Header title=\"Media volume\" value={`${volume}%`} />\n      <Slider\n        value={volume}\n        onValueChange={setVolume}\n        leftIcon=\"volume-low\"\n        rightIcon=\"volume-high\"\n        formatValue={(v) => `${v}%`}\n        accessibilityLabel=\"Media volume\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "PriceRange",
+      "title": "Price Range",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst PRICE_MAX = 2000;\n\nconst rupees = (v: number) => `₹${String(v).replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}`;\n\nconst PRICES = [2, 4, 7, 11, 16, 22, 30, 34, 38, 33, 29, 26, 21, 18, 14, 12, 9, 7, 5, 4, 3, 2, 2, 1];\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function PriceRange() {\n  const { colors } = useKit();\n  const [price, setPrice] = useState<[number, number]>([400, 1400]);\n  const per = PRICE_MAX / PRICES.length;\n  const results = PRICES.reduce((n, c, i) => (i * per + per / 2 >= price[0] && i * per + per / 2 <= price[1] ? n + c : n), 0);\n  return (\n    <Card>\n      <Header title=\"Price\" value={`${rupees(price[0])} – ${rupees(price[1])}${price[1] === PRICE_MAX ? '+' : ''}`} />\n      <Slider\n        range\n        min={0}\n        max={PRICE_MAX}\n        step={50}\n        value={price}\n        onValueChange={setPrice}\n        histogram={PRICES}\n        histogramHeight={40}\n        showMinMax\n        maxLabel={`${rupees(PRICE_MAX)}+`}\n        formatValue={rupees}\n        accessibilityLabel=\"Price\"\n      />\n      <Text style={[s.note, { color: colors.mutedForeground }]}>{results * 3} stays match</Text>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "FontSize",
+      "title": "Font Size",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function FontSize() {\n  const { colors } = useKit();\n  const [size, setSize] = useState(17);\n  const glyph = (px: number) => <Text style={{ color: colors.mutedForeground, fontSize: px, fontWeight: '400' }}>A</Text>;\n  return (\n    <Card>\n      <Header title=\"Text size\" value={`${size} pt`} />\n      <Text style={{ color: colors.foreground, fontSize: size, lineHeight: size * 1.35 }}>\n        Your reading view will look like this.\n      </Text>\n      <Slider\n        variant=\"stepped\"\n        min={13}\n        max={23}\n        step={2}\n        value={size}\n        onValueChange={setSize}\n        leftIcon={glyph(13)}\n        rightIcon={glyph(21)}\n        showValue=\"never\"\n        accessibilityLabel=\"Text size\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  const label = (t: string) => <Text style={[s.label, { color: colors.mutedForeground }]}>{t}</Text>;\n  return (\n    <Card>\n      {label('Small')}\n      <Slider size=\"sm\" defaultValue={25} accessibilityLabel=\"Small\" />\n      {label('Medium')}\n      <Slider size=\"md\" defaultValue={50} accessibilityLabel=\"Medium\" />\n      {label('Large')}\n      <Slider size=\"lg\" defaultValue={75} accessibilityLabel=\"Large\" />\n      {label('Disabled')}\n      <Slider defaultValue={40} disabled accessibilityLabel=\"Disabled\" />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Colors",
+      "title": "Colors",
+      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\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={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Header title=\"Daily goals\" />\n      <Slider defaultValue={80} accent={colors.success} showValue=\"always\" formatValue={(v) => `${v}% steps`} accessibilityLabel=\"Steps\" />\n      <Slider variant=\"bar\" size=\"sm\" defaultValue={55} accent={colors.warning} accessibilityLabel=\"Calories\" />\n      <Slider variant=\"stepped\" min={0} max={10} step={1} defaultValue={3} accent={colors.danger} accessibilityLabel=\"Screen time hours\" />\n    </Card>\n  );\n}\n"
+    }
+  ]
+}