@oyolincc/create 0.4.0 → 0.5.1

package/templates/hono-fullstack/libs/ui/stories/display/Table.stories.tsx

@@ -0,0 +1,222 @@
+import { Button, Heading, Table, Text } from '@repo/ui'
+import { useState } from 'react'
+import { hstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const rows = [
+  { name: 'Table', group: '数据展示', count: 12 },
+  { name: 'Tag', group: '数据展示', count: 8 },
+  { name: 'Breadcrumb', group: '导航', count: 5 },
+  { name: 'Grid', group: '布局', count: 3 },
+  { name: 'Stack', group: '布局', count: 9 },
+  { name: 'FileUpload', group: '表单', count: 6 },
+]
+const meta = {
+  title: 'Display/Table',
+  component: Table.Root,
+  args: { size: 'md', variant: 'plain', striped: true, interactive: true, columnBorder: false },
+  argTypes: {
+    columnBorder: { control: 'boolean' },
+    interactive: { control: 'boolean' },
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled'] },
+    stickyHeader: { control: 'boolean' },
+    striped: { control: 'boolean' },
+    variant: { control: 'select', options: ['line', 'outline', 'plain', 'surface', 'unstyled'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '表头固定、滚动、原生插槽、条纹与悬停高亮。' },
+    },
+  },
+} satisfies Meta<typeof Table.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ['columnBorder', 'interactive', 'size', 'stickyHeader', 'striped', 'variant'],
+    },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Table.Root {...args}>
+        <Table.Caption>组件统计</Table.Caption>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader>组件</Table.ColumnHeader>
+            <Table.ColumnHeader>类别</Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Button</Table.Cell>
+            <Table.Cell>操作</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Select</Table.Cell>
+            <Table.Cell>集合</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </div>
+  ),
+}
+
+export const Scrollable: Story = {
+  render: function Scrollable() {
+    const [striped, setStriped] = useState(true)
+    const [interactive, setInteractive] = useState(true)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          固定表头、滚动和可组合配方
+        </Heading>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => setStriped((value) => !value)}>
+            条纹：{striped ? '开启' : '关闭'}
+          </Button>
+          <Button variant="outline" onClick={() => setInteractive((value) => !value)}>
+            悬停高亮：{interactive ? '开启' : '关闭'}
+          </Button>
+        </div>
+        <Table.ScrollArea
+          maxHeight="56"
+          borderWidth="1px"
+          borderRadius="sm"
+          tabIndex={0}
+          aria-label="组件统计表滚动区域">
+          <Table.Root
+            size="md"
+            striped={striped}
+            interactive={interactive}
+            stickyHeader
+            columnBorder
+            minWidth="640px">
+            <Table.Caption>组件使用次数示例</Table.Caption>
+            <Table.ColumnGroup>
+              <Table.Column width="45%" />
+              <Table.Column />
+              <Table.Column />
+            </Table.ColumnGroup>
+            <Table.Header bg="bg.page">
+              <Table.Row>
+                <Table.ColumnHeader>名称</Table.ColumnHeader>
+                <Table.ColumnHeader>类别</Table.ColumnHeader>
+                <Table.ColumnHeader textAlign="end">次数</Table.ColumnHeader>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {rows.map((row) => (
+                <Table.Row key={row.name}>
+                  <Table.Cell>{row.name}</Table.Cell>
+                  <Table.Cell>{row.group}</Table.Cell>
+                  <Table.Cell textAlign="end">{row.count}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+            <Table.Footer>
+              <Table.Row>
+                <Table.Cell colSpan={2}>合计</Table.Cell>
+                <Table.Cell textAlign="end">43</Table.Cell>
+              </Table.Row>
+            </Table.Footer>
+          </Table.Root>
+        </Table.ScrollArea>
+        <Text>悬停高亮可以与条纹同时使用；数字列通过 textAlign 右对齐。</Text>
+      </div>
+    )
+  },
+}
+export const NativeAndSizes: Story = {
+  render: function NativeAndSizes() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          原生表格与小尺寸
+        </Heading>
+        <Table.Root native size="sm" variant="outline" striped>
+          <caption>native 模式直接使用 HTML 插槽</caption>
+          <thead>
+            <tr>
+              <th scope="col">名称</th>
+              <th scope="col">类别</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.slice(0, 3).map((row) => (
+              <tr key={row.name}>
+                <td>{row.name}</td>
+                <td>{row.group}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table.Root>
+        <Table.Root size="lg" variant="line" interactive>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>lg + line 配方</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          Table · 分维度定制
+        </Heading>
+        <Table.Root
+          native
+          size="unstyled"
+          variant="outline"
+          css={{ '& th, & td': { px: '2', py: '1.5', textStyle: 'sm' } }}>
+          <caption>自定紧凑尺寸 · native 模式</caption>
+          <thead>
+            <tr>
+              <th scope="col">名称</th>
+              <th scope="col">次数</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.slice(0, 2).map((row) => (
+              <tr key={row.name}>
+                <td>{row.name}</td>
+                <td>{row.count}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table.Root>
+        <Table.Root variant="unstyled">
+          <Table.Caption color="gray.fg.muted">自定外观 · 保留默认尺寸</Table.Caption>
+          <Table.Header bg="lime.3" color="lime.11">
+            <Table.Row>
+              <Table.ColumnHeader>名称</Table.ColumnHeader>
+              <Table.ColumnHeader>次数</Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rows.slice(0, 2).map((row) => (
+              <Table.Row key={row.name}>
+                <Table.Cell borderBottomWidth="1px" borderColor="lime.5">
+                  {row.name}
+                </Table.Cell>
+                <Table.Cell borderBottomWidth="1px" borderColor="lime.5">
+                  {row.count}
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Tag.stories.tsx

@@ -0,0 +1,168 @@
+import { Avatar, Button, Heading, Tag } from '@repo/ui'
+import { useState } from 'react'
+import { hstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Tag',
+  component: Tag.Root,
+  args: { size: 'md', variant: 'surface' },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xl'] },
+    variant: { control: 'select', options: ['outline', 'solid', 'subtle', 'surface', 'unstyled'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { type: 'code' }, description: { component: '标签外观、插槽、关闭和恢复。' } },
+  },
+} satisfies Meta<typeof Tag.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Tag.Root {...args}>
+        <Tag.Label>技术标签</Tag.Label>
+      </Tag.Root>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    const [, setTags] = useState(['Panda CSS', 'Ark UI', 'Park UI'])
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          Tag 配方、尺寸与插槽
+        </Heading>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Tag.Root size="sm" variant="subtle">
+            <Tag.Label>Small</Tag.Label>
+          </Tag.Root>
+          <Tag.Root size="md" variant="surface">
+            <Tag.Label>Medium</Tag.Label>
+          </Tag.Root>
+          <Tag.Root size="lg" variant="outline">
+            <Tag.Label>Large</Tag.Label>
+          </Tag.Root>
+          <Tag.Root size="xl" variant="solid">
+            <Tag.Label>Extra large</Tag.Label>
+          </Tag.Root>
+          <Tag.Root size="lg" colorPalette="green">
+            <Tag.StartElement>
+              <Avatar.Root size="full">
+                <Avatar.Fallback name="Ada" />
+              </Avatar.Root>
+            </Tag.StartElement>
+            <Tag.Label>Ada</Tag.Label>
+          </Tag.Root>
+          <Tag.Root maxWidth="40">
+            <Tag.Label>这是一段需要截断的较长标签文本</Tag.Label>
+          </Tag.Root>
+          <Tag.Root asChild variant="outline">
+            <button type="button" onClick={() => setTags(['Panda CSS', 'Ark UI', 'Park UI'])}>
+              <Tag.Label>重置标签</Tag.Label>
+            </button>
+          </Tag.Root>
+        </div>
+      </div>
+    )
+  },
+}
+export const Closable: Story = {
+  render: function Closable() {
+    const [tags, setTags] = useState(['Panda CSS', 'Ark UI', 'Park UI'])
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          {tags.map((label) => (
+            <Tag.Root key={label}>
+              <Tag.Label>{label}</Tag.Label>
+              <Tag.EndElement>
+                <Tag.CloseTrigger
+                  aria-label={`移除 ${label}`}
+                  onClick={() => setTags((current) => current.filter((value) => value !== label))}
+                />
+              </Tag.EndElement>
+            </Tag.Root>
+          ))}
+          <Tag.Root variant="outline">
+            <Tag.Label>自定义关闭内容</Tag.Label>
+            <Tag.EndElement>
+              <Tag.CloseTrigger aria-label="禁用的关闭按钮" disabled>
+                ×
+              </Tag.CloseTrigger>
+            </Tag.EndElement>
+          </Tag.Root>
+        </div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    const [customTagVisible, setCustomTagVisible] = useState(true)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          Tag · 分维度定制
+        </Heading>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          {customTagVisible && (
+            <Tag.Root size="unstyled" minHeight="26px" px="2" gap="1.5" lineHeight="1">
+              <Tag.StartElement width="18px" height="18px">
+                <Avatar.Root size="full">
+                  <Avatar.Fallback name="Ada" />
+                </Avatar.Root>
+              </Tag.StartElement>
+              <Tag.Label textStyle="xs">自定尺寸</Tag.Label>
+              <Tag.EndElement width="14px" height="14px">
+                <Tag.CloseTrigger
+                  aria-label="移除自定尺寸标签"
+                  onClick={() => setCustomTagVisible(false)}
+                />
+              </Tag.EndElement>
+            </Tag.Root>
+          )}
+          {!customTagVisible && (
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => setCustomTagVisible(true)}>
+              恢复自定尺寸标签
+            </Button>
+          )}
+          <Tag.Root
+            variant="unstyled"
+            bg="lime.3"
+            color="lime.11"
+            borderRadius="full"
+            fontWeight="semibold">
+            <Tag.Label>自定外观</Tag.Label>
+            <Tag.EndElement>
+              <Tag.CloseTrigger
+                borderRadius="full"
+                focusVisibleRing="inside"
+                aria-label="禁用的自定外观关闭按钮"
+                disabled
+                css={{ _disabled: { opacity: 0.5 } }}
+              />
+            </Tag.EndElement>
+          </Tag.Root>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Text.stories.tsx

@@ -0,0 +1,32 @@
+import { Text } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Text',
+  component: Text,
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { type: 'code' }, description: { component: '文本样式与多行截断。' } },
+  },
+} satisfies Meta<typeof Text>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Truncation: Story = {
+  render: function Truncation() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Text textStyle="lg">
+          Text 继承主题文本样式，Heading 默认使用 h2，可按标题层级修改 as。
+        </Text>
+        <Text color="fg.muted" lineClamp={2}>
+          这是一段用于展示两行截断的较长文字。基础排版支持 Panda
+          的样式属性和原生属性，应用可直接使用主题
+          token；组件库保留配方源码以便后续调整。重复内容让示例覆盖多行文本截断。
+        </Text>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Timeline.stories.tsx

@@ -0,0 +1,241 @@
+import { Avatar, Badge, Button, Heading, Text, Timeline } from '@repo/ui'
+import { useRef, useState } from 'react'
+import { grid, hstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const events = [
+  { title: '订单已创建', date: '2026-10-11', description: '已确认商品与配送地址。' },
+  { title: '订单已发货', date: '2026-10-12', description: '包裹正在运输中。' },
+  { title: '订单已签收', date: '2026-10-13', description: '感谢使用。' },
+]
+function VariantItems({ label }: { label: string }) {
+  return events.slice(0, 2).map((event, index) => (
+    <Timeline.Item key={event.date}>
+      <Timeline.Connector>
+        <Timeline.Separator />
+        <Timeline.Indicator>{index + 1}</Timeline.Indicator>
+      </Timeline.Connector>
+      <Timeline.Content>
+        <Timeline.Title>
+          {label} · {event.title}
+        </Timeline.Title>
+        <Timeline.Description>{event.description}</Timeline.Description>
+      </Timeline.Content>
+    </Timeline.Item>
+  ))
+}
+const meta = {
+  title: 'Display/Timeline',
+  component: Timeline.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '时间线样式、交替布局、组件组合及末尾连线。' },
+    },
+  },
+} satisfies Meta<typeof Timeline.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ControlledSeparator: Story = {
+  render: function ControlledSeparator() {
+    const [showLastSeparator, setShowLastSeparator] = useState(false)
+    const rootRef = useRef<HTMLDivElement>(null)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Text>插槽组合与 Chakra 一致，支持自定义指示器、前置内容及交替排列。</Text>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => setShowLastSeparator((value) => !value)}>
+            末尾连线：{showLastSeparator ? '显示' : '隐藏'}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() =>
+              rootRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+            }>
+            通过 ref 定位时间线
+          </Button>
+        </div>
+        <Timeline.Root ref={rootRef} showLastSeparator={showLastSeparator} aria-label="订单进度">
+          {events.map((event, index) => (
+            <Timeline.Item key={event.date}>
+              <Timeline.Connector>
+                <Timeline.Separator />
+                <Timeline.Indicator>{index + 1}</Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content>
+                <Timeline.Title>{event.title}</Timeline.Title>
+                <Timeline.Description asChild>
+                  <time dateTime={event.date}>{event.date}</time>
+                </Timeline.Description>
+                <Text textStyle="sm">{event.description}</Text>
+              </Timeline.Content>
+            </Timeline.Item>
+          ))}
+        </Timeline.Root>
+      </div>
+    )
+  },
+}
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          样式与尺寸
+        </Heading>
+        <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
+          <Timeline.Root variant="solid" size="sm" colorPalette="green" aria-label="solid 配方">
+            <VariantItems label="solid · sm" />
+          </Timeline.Root>
+          <Timeline.Root variant="subtle" size="md" colorPalette="green" aria-label="subtle 配方">
+            <VariantItems label="subtle · md" />
+          </Timeline.Root>
+          <Timeline.Root variant="outline" size="lg" colorPalette="green" aria-label="outline 配方">
+            <VariantItems label="outline · lg" />
+          </Timeline.Root>
+          <Timeline.Root variant="plain" size="xl" colorPalette="green" aria-label="plain 配方">
+            <VariantItems label="plain · xl" />
+          </Timeline.Root>
+        </div>
+      </div>
+    )
+  },
+}
+export const Alternating: Story = {
+  render: function Alternating() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          前置日期与交替排列
+        </Heading>
+        <Timeline.Root size="lg" variant="outline" aria-label="项目动态">
+          {events.map((event, index) => (
+            <Timeline.Item key={event.date}>
+              <Timeline.Content textAlign="end" alignItems="flex-end">
+                {index % 2 === 0 ? (
+                  <Timeline.Description asChild>
+                    <time dateTime={event.date}>{event.date}</time>
+                  </Timeline.Description>
+                ) : (
+                  <Timeline.Title>{event.title}</Timeline.Title>
+                )}
+              </Timeline.Content>
+              <Timeline.Connector>
+                <Timeline.Separator />
+                <Timeline.Indicator>{index + 1}</Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content>
+                {index % 2 === 0 ? (
+                  <Timeline.Title>{event.title}</Timeline.Title>
+                ) : (
+                  <Timeline.Description asChild>
+                    <time dateTime={event.date}>{event.date}</time>
+                  </Timeline.Description>
+                )}
+                <Text textStyle="sm">{event.description}</Text>
+              </Timeline.Content>
+            </Timeline.Item>
+          ))}
+        </Timeline.Root>
+      </div>
+    )
+  },
+}
+export const Composition: Story = {
+  render: function Composition() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          自定义指示器与组件组合
+        </Heading>
+        <Timeline.PropsProvider value={{ size: 'xl', variant: 'plain' }}>
+          <Timeline.Root showLastSeparator aria-label="协作动态">
+            <Timeline.Item>
+              <Timeline.Connector>
+                <Timeline.Separator />
+                <Timeline.Indicator asChild>
+                  <Avatar.Root size="full">
+                    <Avatar.Fallback name="Ada" />
+                  </Avatar.Root>
+                </Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content>
+                <Timeline.Title>
+                  Ada 更新了状态 <Badge colorPalette="green">已完成</Badge>
+                </Timeline.Title>
+                <Timeline.Description>刚刚</Timeline.Description>
+                <Text textStyle="sm">指示器可以使用 Avatar、图标或自定义内容。</Text>
+              </Timeline.Content>
+            </Timeline.Item>
+            <Timeline.Item>
+              <Timeline.Connector>
+                <Timeline.Separator />
+                <Timeline.Indicator>✓</Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content>
+                <Timeline.Title>构建成功</Timeline.Title>
+                <Timeline.Description>无需额外状态管理。</Timeline.Description>
+              </Timeline.Content>
+            </Timeline.Item>
+          </Timeline.Root>
+        </Timeline.PropsProvider>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    const [showLastSeparator] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading as="h3" size="lg">
+          分维度定制
+        </Heading>
+        <Timeline.Root
+          size="unstyled"
+          showLastSeparator={showLastSeparator}
+          aria-label="自定尺寸时间线">
+          {events.slice(0, 2).map((event, index) => (
+            <Timeline.Item key={event.date} gap="3">
+              <Timeline.Connector>
+                <Timeline.Separator borderInlineStartWidth="1px" insetInlineStart="10px" />
+                <Timeline.Indicator boxSize="20px" textStyle="xs">
+                  {index + 1}
+                </Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content pb="4" gap="1">
+                <Timeline.Title textStyle="sm">{event.title}</Timeline.Title>
+                <Timeline.Description textStyle="xs">{event.description}</Timeline.Description>
+              </Timeline.Content>
+            </Timeline.Item>
+          ))}
+        </Timeline.Root>
+        <Timeline.Root
+          variant="unstyled"
+          showLastSeparator={showLastSeparator}
+          aria-label="自定外观时间线">
+          {events.slice(0, 2).map((event, index) => (
+            <Timeline.Item key={event.date}>
+              <Timeline.Connector>
+                <Timeline.Separator borderColor="lime.6" />
+                <Timeline.Indicator bg="lime.3" color="lime.11" borderRadius="sm">
+                  {index + 1}
+                </Timeline.Indicator>
+              </Timeline.Connector>
+              <Timeline.Content>
+                <Timeline.Title fontWeight="semibold">{event.title}</Timeline.Title>
+                <Timeline.Description color="gray.fg.muted">
+                  {event.description}
+                </Timeline.Description>
+              </Timeline.Content>
+            </Timeline.Item>
+          ))}
+        </Timeline.Root>
+      </div>
+    )
+  },
+}