@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/segmented-control.json

@@ -0,0 +1,103 @@
+{
+  "name": "segmented-control",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "SegmentedControl",
+  "files": [
+    "src/components/ui/segmented-control.tsx"
+  ],
+  "props": [
+    [
+      "options",
+      "(string | { value, label?, icon?, disabled? })[]",
+      "—",
+      "Segments. `icon` can be a node or ({ active, color }) => node."
+    ],
+    [
+      "value / onValueChange",
+      "string",
+      "—",
+      "Controlled selection (or use defaultValue; defaults to the first segment)."
+    ],
+    [
+      "defaultValue",
+      "string",
+      "first segment",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "variant",
+      "\"pill\" | \"underline\" | \"outline\"",
+      "\"pill\"",
+      "Raised pill on a track, tab underline, or tinted outline."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "32 / 40 / 48pt tall."
+    ],
+    [
+      "fullWidth",
+      "boolean",
+      "true",
+      "Equal-width segments filling the row, or segments sized to their labels."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Indicator colour (pill becomes a filled accent pill)."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick on change."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the track holding the segments."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Pill",
+      "title": "Pill",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Pill() {\n  return <SegmentedControl options={['Day', 'Week', 'Month', 'Year']} defaultValue=\"Week\" />;\n}\n"
+    },
+    {
+      "name": "Underline",
+      "title": "Underline",
+      "code": "import React, { useState } from 'react';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Underline() {\n  const [tab, setTab] = useState('overview');\n  return (\n    <SegmentedControl\n      variant=\"underline\"\n      fullWidth={false}\n      value={tab}\n      onValueChange={setTab}\n      options={[\n        { value: 'overview', label: 'Overview' },\n        { value: 'activity', label: 'Activity' },\n        { value: 'reviews', label: 'Reviews (128)' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Outline",
+      "title": "Outline",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Outline() {\n  return <SegmentedControl variant=\"outline\" options={['Monthly', 'Yearly · save 20%']} defaultValue=\"Yearly · save 20%\" />;\n}\n"
+    },
+    {
+      "name": "WithIcons",
+      "title": "With Icons",
+      "code": "import { Text, View } from 'react-native';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function WithIcons() {\n  const glyph = (g: string) => ({ color }: { color: string }) => <Text style={{ fontSize: 15, color }}>{g}</Text>;\n  return (\n    <SegmentedControl\n      defaultValue=\"grid\"\n      options={[\n        { value: 'list', label: 'List', icon: glyph('☰') },\n        { value: 'grid', label: 'Grid', icon: glyph('▦') },\n        { value: 'map', label: 'Map', icon: glyph('◎') },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Accent",
+      "title": "Accent",
+      "code": "import { SegmentedControl } from '@/components/ui/segmented-control';\nimport { useKit } from '@/lib/kit';\n\nexport default function Accent() {\n  const { colors } = useKit();\n  return (\n    <SegmentedControl\n      accent={colors.accent}\n      options={[\n        { value: 'buy', label: 'Buy' },\n        { value: 'rent', label: 'Rent' },\n        { value: 'sold', label: 'Sold' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Text, View } from 'react-native';\nimport { SegmentedControl } from '@/components/ui/segmented-control';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 12 }}>\n      <SegmentedControl size=\"sm\" options={['XS', 'S', 'M', 'L', 'XL']} defaultValue=\"M\" />\n      <SegmentedControl size=\"md\" options={['Small', 'Medium', 'Large']} defaultValue=\"Medium\" />\n      <SegmentedControl size=\"lg\" options={['Pickup', 'Delivery']} />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/select.json

@@ -0,0 +1,252 @@
+{
+  "name": "select",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Select",
+  "files": [
+    "src/components/ui/select.tsx"
+  ],
+  "props": [
+    [
+      "options",
+      "(T | { label, value, description?, icon?, group?, disabled? })[]",
+      "—",
+      "Plain values or rich options; `group` adds section headings."
+    ],
+    [
+      "value / defaultValue",
+      "T | null",
+      "null",
+      "Controlled or uncontrolled selection."
+    ],
+    [
+      "onValueChange",
+      "(value, option) => void",
+      "—",
+      "Called when a row is chosen."
+    ],
+    [
+      "multiple",
+      "boolean",
+      "false",
+      "Checkbox rows; the menu stays open while toggling, with Clear / Done in its footer. The field shows animated chips plus a \"+N\" overflow chip."
+    ],
+    [
+      "values / defaultValues",
+      "T[]",
+      "[]",
+      "Controlled or uncontrolled selection in multiple mode."
+    ],
+    [
+      "onValuesChange",
+      "(values, options) => void",
+      "—",
+      "Called whenever a row is toggled in multiple mode."
+    ],
+    [
+      "maxChips",
+      "number",
+      "2",
+      "Selections shown as chips; the rest collapse into a \"+N\" chip (0 shows a single \"N selected\" chip)."
+    ],
+    [
+      "removableChips",
+      "boolean",
+      "true",
+      "Show a ✕ on each chip in the field to remove it without opening the menu."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Floating label / placeholder."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Set to false to put the label above the field as static text (no notch) and show placeholder inside."
+    ],
+    [
+      "placeholder",
+      "string",
+      "\"Select…\"",
+      "Shown in the field while open with nothing selected."
+    ],
+    [
+      "presentation",
+      "\"dropdown\" | \"sheet\"",
+      "\"dropdown\"",
+      "Anchored dropdown under the field (flips above when needed) or a bottom sheet (dialog when wide)."
+    ],
+    [
+      "variant",
+      "\"dropdown\" | \"sheet\"",
+      "—",
+      "Deprecated alias of `presentation`."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Trigger height (44 / 54 / 64, matching FloatingInput), text, padding, radius and chevron size."
+    ],
+    [
+      "searchable",
+      "boolean",
+      "false",
+      "Filter field above the options with highlighted matches and an empty state."
+    ],
+    [
+      "searchPlaceholder",
+      "string",
+      "\"Search\"",
+      "Placeholder of the filter field."
+    ],
+    [
+      "emptyText",
+      "string",
+      "—",
+      "Hint under \"No results\" when the search matches nothing."
+    ],
+    [
+      "title",
+      "string",
+      "label",
+      "Sheet heading (sheet presentation only)."
+    ],
+    [
+      "error / helper",
+      "string",
+      "—",
+      "Message under the field; errors shake once."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims to 50% and blocks opening."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus, label and check colour."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the field (paints the label notch)."
+    ],
+    [
+      "minMenuWidth",
+      "number",
+      "200",
+      "Minimum dropdown width; otherwise it matches the field."
+    ],
+    [
+      "maxMenuHeight",
+      "number",
+      "320",
+      "Dropdown height cap before it scrolls (it also shrinks to the room on screen)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer wrapper around the trigger field and message (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>",
+      "—",
+      "Selected value / placeholder text in the trigger (single mode)."
+    ],
+    [
+      "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 text. color applies to the helper; errors stay danger."
+    ],
+    [
+      "placeholderTextColor",
+      "string",
+      "theme mutedForeground",
+      "Placeholder colour in the trigger."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Chevron colour at rest (accent while open)."
+    ],
+    [
+      "menuStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Dropdown / sheet panel — background, border, radius, padding, shadow (transform and opacity are animated)."
+    ],
+    [
+      "optionStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Each option row — padding, minHeight, radius, background (press / keyboard highlight still show)."
+    ],
+    [
+      "optionTextStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Each option's label text."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Validation",
+      "title": "Validation",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Validation() {\n  const { colors, radius } = useKit();\n  const [size, setSize] = useState<string | null>(null);\n  const [touched, setTouched] = useState(false);\n  const missing = touched && !size;\n  return (\n    <Card>\n      <Heading title=\"Merino crew sweater\" sub=\"₹3,499 · Oatmeal\" />\n      <Select\n        label=\"Size\"\n        floatingLabel={false}\n        placeholder=\"Choose a size\"\n        size=\"sm\"\n        value={size}\n        surface={colors.card}\n        onValueChange={(v) => {\n          setSize(v);\n          setTouched(true);\n        }}\n        options={[\n          { label: 'XS', value: 'XS', disabled: true, description: 'Sold out' },\n          { label: 'S', value: 'S', description: 'Chest 34–36\"' },\n          { label: 'M', value: 'M', description: 'Chest 38–40\"' },\n          { label: 'L', value: 'L', description: 'Chest 42–44\"' },\n          { label: 'XL', value: 'XL', description: 'Chest 46–48\"' },\n        ]}\n        error={missing ? 'Pick a size to add this to your bag' : undefined}\n        helper={missing ? undefined : 'Runs true to size · free exchanges'}\n      />\n      <Pressable\n        onPress={() => setTouched(true)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.md, opacity: pressed ? 0.88 : 1 }]}\n      >\n        <Text style={[s.buttonText, { color: colors.primaryForeground }]}>Add to bag</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Plan",
+      "title": "Plan",
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\n/** Small icon tile for option rows. */\nfunction Glyph({ d, tone }: { d: string; tone?: 'accent' | 'success' | 'warning' }) {\n  const { colors, radius } = useKit();\n  const c = tone ? colors[tone] : colors.mutedForeground;\n  return (\n    <View style={[s.glyph, { borderRadius: radius.scale(8), backgroundColor: tone ? alpha(c, 0.14) : colors.muted }]}>\n      <Svg width={15} height={15} viewBox=\"0 0 24 24\">\n        <Path d={d} stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n      </Svg>\n    </View>\n  );\n}\n\nconst ICON = {\n  leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10ZM2 21c0-3 1.9-5.4 5.2-6',\n  bolt: 'M13 2 3 14h9l-1 8 10-12h-9l1-8Z',\n  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8',\n  building: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v8h4M18 9h2a2 2 0 0 1 2 2v11h-4M10 6h4M10 10h4M10 14h4M10 18h4',\n};\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Plan() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Workspace plan\" sub=\"Billed monthly · change anytime\" />\n      <Select\n        label=\"Plan\"\n        floatingLabel={false}\n        placeholder=\"Select a plan\"\n        size=\"sm\"\n        defaultValue=\"pro\"\n        surface={colors.card}\n        helper=\"You can switch plans later from billing.\"\n        options={[\n          { label: 'Hobby', value: 'hobby', description: 'Free · 1 project', icon: <Glyph d={ICON.leaf} tone=\"success\" /> },\n          { label: 'Pro', value: 'pro', description: '₹499 / seat · unlimited projects', icon: <Glyph d={ICON.bolt} tone=\"accent\" /> },\n          { label: 'Team', value: 'team', description: '₹1,499 / seat · SSO and audit log', icon: <Glyph d={ICON.users} tone=\"warning\" /> },\n          { label: 'Enterprise', value: 'enterprise', description: 'Talk to sales', icon: <Glyph d={ICON.building} />, disabled: true },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Country",
+      "title": "Country",
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Country() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Shipping address\" sub=\"Where should we send this order?\" />\n      <Select\n        searchable\n        label=\"Country\"\n        floatingLabel={false}\n        placeholder=\"Select country\"\n        searchPlaceholder=\"Search countries\"\n        size=\"sm\"\n        defaultValue=\"DE\"\n        surface={colors.card}\n        options={[\n          { label: 'United States', value: 'US', icon: flag('🇺🇸'), group: 'Americas' },\n          { label: 'Canada', value: 'CA', icon: flag('🇨🇦'), group: 'Americas' },\n          { label: 'Brazil', value: 'BR', icon: flag('🇧🇷'), group: 'Americas' },\n          { label: 'United Kingdom', value: 'GB', icon: flag('🇬🇧'), group: 'Europe' },\n          { label: 'Germany', value: 'DE', icon: flag('🇩🇪'), group: 'Europe' },\n          { label: 'France', value: 'FR', icon: flag('🇫🇷'), group: 'Europe' },\n          { label: 'India', value: 'IN', icon: flag('🇮🇳'), group: 'Asia Pacific' },\n          { label: 'Japan', value: 'JP', icon: flag('🇯🇵'), group: 'Asia Pacific' },\n          { label: 'Australia', value: 'AU', icon: flag('🇦🇺'), group: 'Asia Pacific' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Assignees",
+      "title": "Assignees",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Assignees() {\n  const { colors } = useKit();\n  const [people, setPeople] = useState(['maya', 'leo']);\n  return (\n    <Card>\n      <Heading title=\"Fix checkout crash on Android 14\" sub=\"ENG-2142 · In progress\" />\n      <Select\n        multiple\n        searchable\n        label=\"Assignees\"\n        floatingLabel={false}\n        placeholder=\"Add teammates\"\n        searchPlaceholder=\"Search teammates\"\n        size=\"sm\"\n        values={people}\n        onValuesChange={setPeople}\n        surface={colors.card}\n        options={[\n          { label: 'Maya Chen', value: 'maya', description: 'Design', icon: avatar('MC', '#f472b6') },\n          { label: 'Leo Martins', value: 'leo', description: 'iOS', icon: avatar('LM', '#60a5fa') },\n          { label: 'Ana Ruiz', value: 'ana', description: 'Android', icon: avatar('AR', '#34d399') },\n          { label: 'Sam Okafor', value: 'sam', description: 'Backend', icon: avatar('SO', '#fbbf24') },\n          { label: 'Priya Nair', value: 'priya', description: 'QA', icon: avatar('PN', '#a78bfa') },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Sheet",
+      "title": "Sheet",
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sheet() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Notifications\" sub=\"Opens as a sheet instead of a dropdown\" />\n      <Select\n        presentation=\"sheet\"\n        label=\"Email digest\"\n        floatingLabel={false}\n        placeholder=\"How often?\"\n        title=\"How often?\"\n        size=\"sm\"\n        defaultValue=\"weekly\"\n        surface={colors.card}\n        options={[\n          { label: 'Daily', value: 'daily', description: 'Every morning at 8:00' },\n          { label: 'Weekly', value: 'weekly', description: 'Mondays at 8:00' },\n          { label: 'Monthly', value: 'monthly', description: 'First of the month' },\n          { label: 'Never', value: 'never', description: 'Only security alerts' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  const opts = ['Daily', 'Weekly', 'Monthly'];\n  return (\n    <Card style={{ gap: 16 }}>\n      <Select size=\"sm\" label=\"Small\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"md\" label=\"Medium\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"lg\" label=\"Large\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select disabled label=\"Disabled\" floatingLabel={false} placeholder=\"Unavailable\" defaultValue=\"Daily\" options={opts} surface={colors.card} />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Colors",
+      "title": "Colors",
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nfunction Dot({ color }: { color: string }) {\n  return (\n    <Svg width={14} height={14} viewBox=\"0 0 14 14\">\n      <Circle cx={7} cy={7} r={5} fill={color} />\n    </Svg>\n  );\n}\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Project labels\" sub=\"Accent colour drives focus, checks and chips\" />\n      <Select\n        multiple\n        label=\"Labels\"\n        floatingLabel={false}\n        placeholder=\"Add labels\"\n        size=\"sm\"\n        accent={colors.success}\n        defaultValues={['frontend', 'perf']}\n        surface={colors.card}\n        options={[\n          { label: 'Frontend', value: 'frontend' },\n          { label: 'Performance', value: 'perf' },\n          { label: 'Accessibility', value: 'a11y' },\n          { label: 'Docs', value: 'docs' },\n        ]}\n      />\n      <Select\n        label=\"Priority\"\n        floatingLabel={false}\n        placeholder=\"Set priority\"\n        size=\"sm\"\n        accent={colors.warning}\n        defaultValue=\"p1\"\n        surface={colors.card}\n        options={[\n          { label: 'Urgent', value: 'p0', icon: <Dot color={colors.danger} /> },\n          { label: 'High', value: 'p1', icon: <Dot color={colors.warning} /> },\n          { label: 'Medium', value: 'p2', icon: <Dot color={colors.accent} /> },\n          { label: 'Low', value: 'p3', icon: <Dot color={colors.mutedForeground} /> },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/settings.json

@@ -0,0 +1,72 @@
+{
+  "name": "settings",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Settings",
+  "files": [
+    "src/components/blocks/settings.tsx"
+  ],
+  "props": [
+    [
+      "user",
+      "{ name, email, avatar?, plan? }",
+      "sample user",
+      "Profile header. plan shows a badge (e.g. 'Pro')."
+    ],
+    [
+      "values",
+      "SettingsValues",
+      "—",
+      "Controlled values: appearance, pushNotifications, emailDigest, haptics, faceId."
+    ],
+    [
+      "defaultValues",
+      "Partial<SettingsValues>",
+      "—",
+      "Initial values when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(values, key) => void",
+      "—",
+      "Called on every change with the full values and the key that changed."
+    ],
+    [
+      "onNavigate",
+      "(link: 'profile' | 'subscription' | 'privacy' | 'storage' | 'help' | 'feedback') => void",
+      "—",
+      "A chevron row or the profile header was pressed."
+    ],
+    [
+      "onSignOut",
+      "() => void",
+      "—",
+      "Pressed Sign out."
+    ],
+    [
+      "storageUsed",
+      "string",
+      "'1.2 GB'",
+      "Detail on the Data & storage row."
+    ],
+    [
+      "version",
+      "string",
+      "'Version 2.4.1 (412)'",
+      "Footer line. Empty string hides it."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Switch and badge colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/shimmer-button.json

@@ -0,0 +1,78 @@
+{
+  "name": "shimmer-button",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "ShimmerButton",
+  "files": [
+    "src/components/ui/shimmer-button.tsx"
+  ],
+  "props": [
+    [
+      "variant",
+      "\"shimmer\" | \"glow\" | \"border-beam\"",
+      "\"shimmer\"",
+      "Light sweep, breathing halo or orbiting border beam."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "40 / 50 / 58pt tall."
+    ],
+    [
+      "color",
+      "string",
+      "primary / accent",
+      "Button colour (beam colour for border-beam)."
+    ],
+    [
+      "textColor",
+      "string",
+      "readable on color",
+      "Label colour."
+    ],
+    [
+      "speed",
+      "number",
+      "2600 / 2400 / 3200",
+      "Loop length in ms."
+    ],
+    [
+      "pill",
+      "boolean",
+      "true",
+      "Fully rounded ends."
+    ],
+    [
+      "block",
+      "boolean",
+      "false",
+      "Stretches to the parent's width (alignSelf: stretch)."
+    ],
+    [
+      "left / right",
+      "ReactNode",
+      "—",
+      "Icons beside the label."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Style for the label text."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer animated wrapper (margins, alignment)."
+    ],
+    [
+      "…PressableProps",
+      "",
+      "",
+      "onPress, disabled, …"
+    ]
+  ],
+  "examples": []
+}