@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/time-picker.json

@@ -0,0 +1,269 @@
+{
+  "name": "time-picker",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "TimePicker",
+  "files": [
+    "src/components/ui/time-picker.tsx"
+  ],
+  "summary": "A time picker as 3D wheel drums, a draggable clock dial or bookable time chips.",
+  "props": [
+    [
+      "value",
+      "{ hours, minutes } | null",
+      "—",
+      "Controlled 24-hour time."
+    ],
+    [
+      "defaultValue",
+      "{ hours, minutes } | null",
+      "null",
+      "Initial time when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(time: TimeValue) => void",
+      "—",
+      "Called when a wheel settles, the clock hand snaps or a chip is picked (or on Set when staged)."
+    ],
+    [
+      "variant",
+      "'wheel' | 'chips' | 'clock'",
+      "'wheel'",
+      "3D wheel drums, a grid of time slots, or an analog dial (24-hour mode adds an inner 13–00 ring)."
+    ],
+    [
+      "presentation",
+      "'inline' | 'sheet'",
+      "'inline'",
+      "Render in place, or as a field that opens a bottom sheet."
+    ],
+    [
+      "hour12",
+      "boolean",
+      "from locale",
+      "12-hour clock: an AM / PM column on the wheel, an AM / PM toggle on the clock."
+    ],
+    [
+      "minuteInterval",
+      "number",
+      "1 (wheel, clock) · 30 (chips)",
+      "Minute step for the wheel and the clock hand (the dial labels every 5); slot spacing for chips."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Used to pick 12h / 24h when hour12 is not set."
+    ],
+    [
+      "startTime",
+      "'HH:mm' | TimeValue",
+      "'09:00'",
+      "Chips: first slot."
+    ],
+    [
+      "endTime",
+      "'HH:mm' | TimeValue",
+      "'17:00'",
+      "Chips: closing time (exclusive)."
+    ],
+    [
+      "slots",
+      "('HH:mm' | TimeValue)[]",
+      "—",
+      "Chips: explicit slot list instead of start / end / interval."
+    ],
+    [
+      "bookedTimes",
+      "('HH:mm' | TimeValue)[]",
+      "—",
+      "Chips: taken slots, struck through and not selectable."
+    ],
+    [
+      "disabledTimes",
+      "('HH:mm' | TimeValue)[]",
+      "—",
+      "Chips: slots unavailable for another reason (faded)."
+    ],
+    [
+      "columns",
+      "number",
+      "3",
+      "Chips per row."
+    ],
+    [
+      "groupByPeriod",
+      "boolean",
+      "false",
+      "Chips: Morning / Afternoon / Evening headings with an open-slot count."
+    ],
+    [
+      "label",
+      "string",
+      "'Time'",
+      "Sheet: field label."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Sheet: set to false to put the label above the field as static text (no notch) and show placeholder inside."
+    ],
+    [
+      "title",
+      "string",
+      "label",
+      "Sheet: heading."
+    ],
+    [
+      "placeholder",
+      "string",
+      "'Select a time'",
+      "Sheet: shown while nothing is picked."
+    ],
+    [
+      "size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Sheet: field height and type size."
+    ],
+    [
+      "confirm",
+      "boolean",
+      "true for wheel and clock",
+      "Sheet: stage the choice behind Cancel / Set; chips otherwise close on pick."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Sheet: red border, icon message and a shake."
+    ],
+    [
+      "success",
+      "boolean | string",
+      "—",
+      "Sheet: success border and check; a string is shown under the field."
+    ],
+    [
+      "helper",
+      "string",
+      "—",
+      "Sheet: hint under the field."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Sheet: dims the field and blocks opening."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Selection band, clock hand and active segment, focus and halo colour."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Sheet: background behind the field (label notch)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the wheel, clock, slot grid or field wrapper, depending on variant and presentation."
+    ],
+    [
+      "fieldStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Sheet: the trigger box — background, border, radius, height, padding. Wins over the computed style; a borderColor replaces the resting border only (open, error and success colours still show). A numeric height / borderRadius re-centres the label and resizes the halo."
+    ],
+    [
+      "inputStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Sheet: the formatted time text in the trigger."
+    ],
+    [
+      "labelStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Sheet: label in both modes. color is the resting colour — open (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>",
+      "—",
+      "Sheet: helper / error / success text. color applies to the helper; error and success keep their tone colour."
+    ],
+    [
+      "placeholderTextColor",
+      "string",
+      "theme mutedForeground",
+      "Sheet: placeholder colour in the trigger."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Sheet: clock icon colour at rest (accent while open)."
+    ],
+    [
+      "menuStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Sheet: the sheet / dialog panel — background, border, radius, padding, shadow (transform and opacity are animated)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Wheel drums snap with momentum and a tapped row jumps into the band. On the clock, drag the hand anywhere on the dial; it snaps to hours, then moves on to minutes when you let go."
+    ],
+    [
+      "Motion",
+      "Wheel rows tilt, shrink and fade past the selection band, driven by scroll on the native driver; the clock header crossfades between hours and minutes."
+    ],
+    [
+      "Screen readers",
+      "Each wheel column and the clock dial are adjustable with increment / decrement actions; AM / PM and the time chips are radio groups, with booked or unavailable slots named. The sheet field is a button with expanded state."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { TimePicker, type TimeValue } from '@/components/ui/time-picker';\n\nconst [time, setTime] = useState<TimeValue | null>({ hours: 7, minutes: 30 });\n<TimePicker value={time} onChange={setTime} hour12 />",
+  "examples": [
+    {
+      "name": "Alarm",
+      "title": "Alarm",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Alarm() {\n  const [time, setTime] = useState<TimeValue>({ hours: 6, minutes: 45 });\n  return (\n    <Card>\n      <View style={s.head}>\n        <View style={s.headText}>\n          <Ink style={s.title}>Wake up</Ink>\n          <Ink tone=\"muted\" style={s.meta}>Weekdays · Radar</Ink>\n        </View>\n        <Ink tone=\"muted\" style={s.meta}>{until(time)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12 />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Clock",
+      "title": "Clock",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\n/** \"in 7 h 20 min\" until the next occurrence of `t`. */\nfunction until(t: TimeValue) {\n  const now = new Date();\n  let diff = t.hours * 60 + t.minutes - (now.getHours() * 60 + now.getMinutes());\n  if (diff <= 0) diff += 24 * 60;\n  const h = Math.floor(diff / 60);\n  return h ? `in ${h} h ${diff % 60} min` : `in ${diff} min`;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Clock() {\n  const { colors, radius } = useKit();\n  const [time, setTime] = useState<TimeValue>({ hours: 7, minutes: 30 });\n  return (\n    <Card>\n      <View style={s.headText}>\n        <Ink style={s.title}>Morning run</Ink>\n        <Ink tone=\"muted\" style={s.meta}>Tap the hour or minute, then drag the dial.</Ink>\n      </View>\n      <TimePicker variant=\"clock\" value={time} onChange={setTime} hour12 />\n      <View style={[s.note, { backgroundColor: colors.muted, borderRadius: radius.md }]}>\n        <Ink tone=\"muted\" style={s.meta}>Rings {until(time)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Appointment",
+      "title": "Appointment",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Appointment() {\n  const { colors, radius } = useKit();\n  const [slot, setSlot] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Dr. Amara Okafor · Dermatology</Ink>\n      <TimePicker\n        variant=\"chips\"\n        value={slot}\n        onChange={setSlot}\n        hour12\n        startTime=\"09:00\"\n        endTime=\"18:00\"\n        minuteInterval={30}\n        bookedTimes={['09:30', '10:00', '11:30', '13:00', '14:30', '15:00', '17:30']}\n        disabledTimes={['12:00', '12:30']}\n        groupByPeriod\n      />\n      <Pressable\n        disabled={!slot}\n        style={[s.button, { backgroundColor: colors.accent, borderRadius: radius.md }, !slot && s.buttonOff]}\n        accessibilityRole=\"button\"\n      >\n        <Text style={[s.buttonText, { color: colors.accentForeground }]}>{slot ? `Book ${formatTime(slot)} · 30 min` : 'Choose a time'}</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Reminder",
+      "title": "Reminder",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Reminder() {\n  const [time, setTime] = useState<TimeValue>({ hours: 21, minutes: 30 });\n  return (\n    <Card>\n      <View style={s.head}>\n        <Ink style={s.title}>Daily journal reminder</Ink>\n        <Ink tone=\"muted\" style={s.meta}>{formatTime(time, false)}</Ink>\n      </View>\n      <TimePicker value={time} onChange={setTime} hour12={false} minuteInterval={15} />\n      <Ink tone=\"muted\" style={s.hint}>24-hour clock, 15-minute steps.</Ink>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "InSheet",
+      "title": "In Sheet",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function InSheet() {\n  const [pickup, setPickup] = useState<TimeValue | null>({ hours: 18, minutes: 15 });\n  const [delivery, setDelivery] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Order #4821 · Green Basket</Ink>\n      <TimePicker presentation=\"sheet\" label=\"Pickup time\" title=\"When will you pick up?\" value={pickup} onChange={setPickup} minuteInterval={5} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"chips\"\n        label=\"Delivery slot\"\n        title=\"Choose a delivery slot\"\n        value={delivery}\n        onChange={setDelivery}\n        hour12\n        startTime=\"08:00\"\n        endTime=\"21:00\"\n        minuteInterval={60}\n        bookedTimes={['08:00', '12:00', '18:00']}\n        groupByPeriod\n        success={delivery ? 'Free delivery in this slot' : undefined}\n        helper=\"We'll text you when the driver is close.\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "ClockInSheet",
+      "title": "Clock In Sheet",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TimePicker, formatTime, type TimeValue } from '@/components/ui/time-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\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\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },\n  headText: { flexShrink: 1, gap: 2 },\n  title: { fontSize: 15, fontWeight: '400' },\n  meta: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  hint: { fontSize: 12.5, textAlign: 'center' },\n  note: { paddingVertical: 10, alignItems: 'center' },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonOff: { opacity: 0.45 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function ClockInSheet() {\n  const [start, setStart] = useState<TimeValue | null>({ hours: 9, minutes: 0 });\n  const [end, setEnd] = useState<TimeValue | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Focus block · Thursday</Ink>\n      <TimePicker presentation=\"sheet\" variant=\"clock\" label=\"Starts\" title=\"Start time\" value={start} onChange={setStart} hour12 />\n      <TimePicker\n        presentation=\"sheet\"\n        variant=\"clock\"\n        label=\"Ends\"\n        title=\"End time\"\n        value={end}\n        onChange={setEnd}\n        minuteInterval={5}\n        hour12\n        helper=\"Snaps to 5-minute steps.\"\n      />\n    </Card>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/timeline-chart.json

@@ -0,0 +1,33 @@
+{
+  "name": "timeline-chart",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "TimelineChart",
+  "files": [
+    "src/components/charts/timeline-chart.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "data",
+      "{ label, start, end, progress? }[]",
+      "—",
+      "Tasks."
+    ],
+    [
+      "marker",
+      "{ value, label? }",
+      "—",
+      "Vertical marker."
+    ],
+    [
+      "formatTick",
+      "(v) => string",
+      "compact",
+      "Axis labels."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/timeline.json

@@ -0,0 +1,172 @@
+{
+  "name": "timeline",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Timeline",
+  "files": [
+    "src/components/ui/timeline.tsx"
+  ],
+  "summary": "A vertical timeline whose connector fills down to the current step as dots check off.",
+  "props": [
+    [
+      "items",
+      "TimelineItem[]",
+      "—",
+      "{ key?, title, description?, time?, status?, icon?, avatar?, image?, images?, tags?, links?, content? } per event."
+    ],
+    [
+      "items[].status",
+      "\"done\" | \"current\" | \"upcoming\" | \"error\"",
+      "\"done\"",
+      "Filled with a drawn check · pulsing · hollow on a dotted track · red with a drawn ✕."
+    ],
+    [
+      "items[].icon",
+      "TimelineIconName | ({ color, size }) => ReactNode",
+      "—",
+      "cart, package, truck, home, rocket, bug, star, chat, tag, user, or your own glyph in a larger dot (done/failed get a mini check/✕ badge)."
+    ],
+    [
+      "items[].avatar",
+      "{ src?, name }",
+      "—",
+      "Avatar (initials fallback) instead of a dot."
+    ],
+    [
+      "items[].image",
+      "string | { uri, aspectRatio? }",
+      "—",
+      "Photo under the text, rounded, fades in when loaded (16:9 by default)."
+    ],
+    [
+      "items[].images",
+      "(string | { uri, aspectRatio? })[]",
+      "—",
+      "Photo gallery: 1-up at its ratio, 2-up side by side, 3-up one large + two stacked (+N for more). Rounded, fades in."
+    ],
+    [
+      "items[].tags",
+      "string[]",
+      "—",
+      "Small accent chips under the text."
+    ],
+    [
+      "items[].links",
+      "{ label, onPress }[]",
+      "—",
+      "Tappable accent links under the text."
+    ],
+    [
+      "items[].content",
+      "ReactNode",
+      "—",
+      "Rich content under the description: a card, quote, tags or buttons."
+    ],
+    [
+      "variant",
+      "\"default\" | \"compact\" | \"card\" | \"scroll\"",
+      "\"default\"",
+      "Roomy rows · small dots on one line · each event on a card (current one tinted) · renders its own scroll view and fills the line as you scroll (give it a height)."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Done / current dots and the filled line."
+    ],
+    [
+      "checks",
+      "boolean",
+      "true",
+      "Draw a check in done dots."
+    ],
+    [
+      "animated",
+      "boolean",
+      "true",
+      "Staggered entrance + connector fill, or the scroll-driven fill (off with reduce motion: everything shows filled)."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the rail — fills hollow dots and mini badge cut-outs."
+    ],
+    [
+      "header",
+      "ReactNode",
+      "—",
+      "scroll: shown above the timeline inside the scroll view."
+    ],
+    [
+      "footer",
+      "ReactNode",
+      "—",
+      "scroll: shown below the timeline inside the scroll view."
+    ],
+    [
+      "contentContainerStyle",
+      "StyleProp<ViewStyle>",
+      "{ paddingVertical: 12 }",
+      "scroll: the scroll view's content container."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style — for variant=\"scroll\" this is the scroll view, so set a height."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "Items rise in, then the line fills to the current step: done dots draw their check as it arrives and the current dot pulses. The scroll variant ties the fill to the scroll position."
+    ],
+    [
+      "Reduced motion",
+      "Everything renders in its final state with no rise, fill or pulse, the same as animated={false}."
+    ],
+    [
+      "Screen readers",
+      "The timeline is a list; each entry is read as its title, time, description and status, and links are exposed as links."
+    ]
+  ],
+  "usage": "import { Timeline } from '@/components/ui/timeline';\n\n<Timeline\n  items={[\n    { title: 'Order placed', time: '9:41 AM', status: 'done' },\n    { title: 'Out for delivery', time: '1:15 PM', status: 'current' },\n    { title: 'Delivered', status: 'upcoming' },\n  ]}\n/>",
+  "examples": [
+    {
+      "name": "OrderTracking",
+      "title": "Order Tracking",
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function OrderTracking() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n        <View style={{ gap: 2 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>ORDER #4821</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Arriving today</Text>\n        </View>\n        <View\n          style={{\n            paddingHorizontal: 10,\n            paddingVertical: 4,\n            borderRadius: radius.capsule(24),\n            backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n          }}\n        >\n          <Text style={{ fontSize: 12.5, color: colors.accent }}>by 6 PM</Text>\n        </View>\n      </View>\n      <Timeline\n        items={[\n          { title: 'Ordered', time: 'Mon 9:12', description: 'Paid with Apple Pay · 2 items', icon: 'cart' },\n          { title: 'Packed', time: 'Tue 16:40', description: 'Left the Rotterdam warehouse', icon: 'package' },\n          {\n            title: 'Out for delivery',\n            time: '11:05',\n            description: 'Jonas is 6 stops away in a white van',\n            icon: 'truck',\n            status: 'current',\n          },\n          { title: 'Delivered', time: 'Est. 17:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Activity",
+      "title": "Activity",
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Activity() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      items={[\n        {\n          title: 'Priya Shah commented',\n          time: '2m',\n          avatar: { name: 'Priya Shah', src: 'https://i.pravatar.cc/120?img=32' },\n          status: 'current',\n          content: (\n            <View\n              style={{\n                padding: 12,\n                borderRadius: radius.md,\n                backgroundColor: alpha(colors.foreground, dark ? 0.06 : 0.035),\n              }}\n            >\n              <Text style={{ fontSize: 14, lineHeight: 20, color: colors.foreground }}>\n                Love the new onboarding — can we try the shorter headline on step two?\n              </Text>\n            </View>\n          ),\n        },\n        {\n          title: 'Marco Bianchi uploaded 3 photos',\n          time: '1h',\n          description: 'Moodboard · Autumn campaign',\n          avatar: { name: 'Marco Bianchi', src: 'https://i.pravatar.cc/120?img=15' },\n          image: { uri: 'https://picsum.photos/id/1043/800/450', aspectRatio: 16 / 9 },\n        },\n        {\n          title: 'Lena Fischer shared a file',\n          time: '3h',\n          avatar: { name: 'Lena Fischer' },\n          content: (\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 12,\n                padding: 12,\n                borderRadius: radius.md,\n                borderWidth: 1,\n                borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n                backgroundColor: colors.card,\n              }}\n            >\n              <View\n                style={{\n                  width: 36,\n                  height: 36,\n                  borderRadius: radius.sm,\n                  backgroundColor: alpha(colors.danger, 0.12),\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Text style={{ fontSize: 11, color: colors.danger }}>PDF</Text>\n              </View>\n              <View style={{ flex: 1 }}>\n                <Text numberOfLines={1} style={{ fontSize: 14, color: colors.foreground }}>Q4 brand guidelines.pdf</Text>\n                <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>4.2 MB · 18 pages</Text>\n              </View>\n            </View>\n          ),\n        },\n        { title: 'Nightly build failed', time: 'Yesterday', description: 'iOS · Signing certificate expired', status: 'error', icon: 'bug' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Release",
+      "title": "Release",
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Release() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      variant=\"card\"\n      items={[\n        { title: 'v3.0 — Widgets', time: 'Next week', description: 'Home-screen widgets for iOS and Android.', icon: 'rocket', status: 'upcoming' },\n        {\n          title: 'v2.4 — Offline mode',\n          time: 'Oct 8',\n          description: 'Edit notes without a connection; changes sync when you are back online.',\n          icon: 'star',\n          status: 'current',\n          content: (\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n              {['New', 'Sync', 'iOS', 'Android'].map((t) => (\n                <View\n                  key={t}\n                  style={{\n                    paddingHorizontal: 9,\n                    paddingVertical: 3,\n                    borderRadius: radius.capsule(22),\n                    backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n                  }}\n                >\n                  <Text style={{ fontSize: 12, color: colors.accent }}>{t}</Text>\n                </View>\n              ))}\n            </View>\n          ),\n        },\n        { title: 'v2.3.2 — Fixes', time: 'Sep 29', description: 'Fixed a crash when sharing large PDFs.', icon: 'bug' },\n        { title: 'v2.3 — Shared folders', time: 'Sep 12', description: 'Invite people to a folder and edit together.', icon: 'user' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Compact",
+      "title": "Compact",
+      "code": "import { Timeline } from '@/components/ui/timeline';\n\nexport default function Compact() {\n  return (\n    <Timeline\n      variant=\"compact\"\n      items={[\n        { title: 'Account created', time: '09:00' },\n        { title: 'Email verified', time: '09:02' },\n        { title: 'Profile completed', time: '09:10', status: 'current' },\n        { title: 'First project', status: 'upcoming' },\n        { title: 'Invite your team', status: 'upcoming' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Support",
+      "title": "Support",
+      "code": "import { Text, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Support() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Avatar size=\"sm\" name=\"Support\" status=\"online\" />\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Refund request #RF-2207</Text>\n      </View>\n      <Timeline\n        variant=\"compact\"\n        accent={colors.success}\n        items={[\n          { title: 'Request received', time: 'Oct 9' },\n          { title: 'Return label sent', time: 'Oct 9' },\n          { title: 'Card refund declined', time: 'Oct 12', status: 'error' },\n          { title: 'Refund to store credit', time: 'Now', status: 'current' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Journey",
+      "title": "Journey",
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function Journey() {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={{ height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>12 DAYS · 1,140 KM</Text>\n          <Text style={{ fontSize: 22, letterSpacing: -0.5, color: colors.foreground }}>Our journey through Portugal</Text>\n        </View>\n      }\n      items={[\n        { title: 'Landed in Lisbon', time: 'Day 1', description: 'Late flight, pastel de nata at the airport, tram 28 into Alfama before the rain.', images: [{ uri: pic('lisbon'), aspectRatio: 3 / 2 }], tags: ['Lisbon'] },\n        { title: 'Lost in Alfama', time: 'Day 2', description: 'Stairs, tiles, a fado bar that only had six chairs. We stayed until two.', images: [pic('alfama'), pic('tiles')] },\n        { title: 'Sintra day trip', time: 'Day 3', description: 'Fog on Pena Palace in the morning, sun in the Moorish castle by noon.', images: [pic('sintra'), pic('palace'), pic('forest'), pic('castle')] },\n        { title: 'Rented the car', time: 'Day 4', description: 'A tiny Fiat with a stubborn second gear. Named it Rosa.' },\n        { title: 'Comporta beaches', time: 'Day 5', description: 'Rice fields on one side, empty dunes on the other.', images: [{ uri: pic('dunes'), aspectRatio: 16 / 9 }], tags: ['Beach', 'Alentejo'] },\n        { title: 'Évora', time: 'Day 6', description: 'Roman temple at sunset and the quietest night of the trip.', images: [pic('evora'), pic('temple'), pic('plains')] },\n        { title: 'Wine in the Alentejo', time: 'Day 7', description: 'A cellar tour that turned into lunch with the owner’s family. Ordered a case home.' },\n        { title: 'Down to the Algarve', time: 'Day 8', description: 'Benagil caves by kayak — go early, the tour boats arrive at ten.', images: [pic('caves'), pic('kayak')], links: [{ label: 'Kayak rental we used', onPress: () => {} }] },\n        { title: 'Lagos', time: 'Day 9', description: 'Cliff walk to Ponta da Piedade and grilled sardines at the harbour.', images: [{ uri: pic('lagos'), aspectRatio: 3 / 2 }] },\n        { title: 'Long drive north', time: 'Day 10', description: 'Six hours, two coffee stops, one wrong turn into a cork forest.' },\n        { title: 'Porto', time: 'Day 11', status: 'current', description: 'Ribeira, the bridge at blue hour, port lodges across the river.', images: [pic('porto'), pic('bridge'), pic('river')], tags: ['Now'] },\n        { title: 'Douro Valley', time: 'Day 12', status: 'upcoming', description: 'Train along the river to Pinhão, then home.' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "DeliveryScroll",
+      "title": "Delivery Scroll",
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst pic = (seed: string) => `https://picsum.photos/seed/${seed}/600/400`;\n\nexport default function DeliveryScroll() {\n  const { colors } = useKit();\n  return (\n    <Timeline\n      variant=\"scroll\"\n      style={{ height: 560 }}\n      header={\n        <View style={{ gap: 2, paddingBottom: 20 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>PARCEL DHL 4471 9902 31</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Out for delivery</Text>\n        </View>\n      }\n      items={[\n        { title: 'Order placed', time: 'Oct 6 · 18:22', description: 'Walnut desk lamp, linen shade · paid with Visa', icon: 'cart' },\n        { title: 'Payment confirmed', time: 'Oct 6 · 18:23', icon: 'tag' },\n        { title: 'Packed', time: 'Oct 7 · 10:40', description: 'Double-boxed with paper padding. Photo from the packing station:', icon: 'package', images: [{ uri: pic('parcel'), aspectRatio: 3 / 2 }] },\n        { title: 'Handed to carrier', time: 'Oct 7 · 16:05', description: 'Picked up from the Leipzig warehouse', icon: 'truck' },\n        { title: 'Left the sorting hub', time: 'Oct 8 · 02:14', description: 'Hauptumschlagbasis Leipzig', icon: 'truck' },\n        { title: 'Arrived in the Netherlands', time: 'Oct 9 · 07:50', description: 'Customs cleared, no fees due', icon: 'home' },\n        { title: 'Delivery attempt failed', time: 'Oct 10 · 14:31', description: 'No one home and no safe place. A card was left in the mailbox.', status: 'error', icon: 'home' },\n        { title: 'Rescheduled', time: 'Oct 10 · 19:02', description: 'You picked Monday, 12:00–18:00', icon: 'chat' },\n        { title: 'Out for delivery', time: '11:05', description: 'Jonas is 6 stops away in a white van', icon: 'truck', status: 'current', links: [{ label: 'Track on map', onPress: () => {} }] },\n        { title: 'Delivered', time: 'Est. 15:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        { title: 'Rate your delivery', status: 'upcoming', icon: 'star' },\n      ]}\n    />\n  );\n}\n"
+    }
+  ]
+}