@iamfiro/design 0.0.0-stage → 0.3.0

package/agents/chat-composer/AGENTS.md

@@ -0,0 +1,251 @@
+# ChatComposer
+
+> 텍스트 입력 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+대화형 AI 화면의 메시지 입력창. 글이 길어지면 maxRows까지 자라고, Enter로 보내고 Shift+Enter로 줄을 바꿔요(한글 조합 중 Enter는 무시). 왼쪽 tools · 오른쪽 actions · 아래 footer 자리에 FilterChip · DropdownMenu · Button 같은 기존 컴포넌트를 그대로 끼워 써요.
+
+```tsx
+import { ChatComposer } from '@iamfiro/design'
+```
+
+## API
+
+### ChatComposer
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value / defaultValue` | `string` |  | 입력 글. 제어/비제어 모두 돼요. |
+| `onValueChange` | `(value: string) => void` |  | 글이 바뀔 때. |
+| `onSubmit` | `(value: string) => void` |  | Enter나 보내기 버튼. 부른 뒤 글을 비워요. 공백만 있으면 보내지 않아요. |
+| `placeholder` | `string` | `'무엇이든 물어보세요'` | 빈 칸 안내 문구. |
+| `pending` | `boolean` |  | 응답 생성 중. 보내기 → 중지 버튼, Esc로도 중지. |
+| `onStop` | `() => void` |  | 중지 버튼이나 Esc. |
+| `onAttach` | `() => void` |  | 주면 왼쪽에 + 버튼이 생겨요. |
+| `attachLabel` | `string` | `'파일 첨부'` | + 버튼의 aria-label. |
+| `tools` | `ReactNode` |  | 도구 막대 왼쪽(+ 다음). 모드 칩 등. |
+| `actions` | `ReactNode` |  | 도구 막대 오른쪽(보내기 앞). 모델 선택, 음성 등. |
+| `attachments` | `ReactNode` |  | 글 위. 첨부 파일, 인용한 메시지. |
+| `footer` | `ReactNode` |  | 옅은 선 아래 띠. 앱 연결, 안내 문구. |
+| `maxRows` | `number` | `8 (sm: 4)` | 이 줄 수까지 자라고 그 뒤로는 스크롤. |
+| `size` | `'sm' \| 'md'` | `'md'` | md: 글 아래 도구 막대 · sm: 글 · actions · 보내기가 한 줄에 놓이는 작은 입력창(답글 · 댓글). |
+| `disabled` | `boolean` |  | 입력 · 첨부 · 보내기를 막아요. tools · actions 안 버튼은 직접 disabled를 주세요. |
+| `autoFocus · name · aria-label` | `—` |  | 안쪽 textarea에 전달돼요. aria-label 기본값은 "메시지". |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+첨부(+) · 승인 요청 칩 · 모델 선택 · 음성 · 보내기, 아래에 앱 연결 줄. 빈 곳 어디를 눌러도 글 입력으로 포커스가 가요.
+
+```tsx
+import { useState } from 'react'
+import { ChevronDown, Hand, Mic } from 'lucide-react'
+import { BrandIcon, Button, Inline, Tooltip, ChatComposer, DropdownMenu, DropdownMenuRadioGroup, DropdownMenuRadioItem, FilterChip, toast } from '@iamfiro/design'
+
+const MODELS = [
+  { value: 'auto', label: '자동', description: '질문에 맞춰 모델을 골라요' },
+  { value: 'fast', label: '빠르게', description: '짧은 답을 바로' },
+  { value: 'deep', label: '깊게 생각', description: '복잡한 문제를 단계별로' },
+]
+
+export default function Example() {
+  const [approval, setApproval] = useState(false)
+  const [model, setModel] = useState('auto')
+  const current = MODELS.find((m) => m.value === model)?.label
+
+  return (
+    <div style={{ width: '100%', maxWidth: 680 }}>
+      <ChatComposer
+        placeholder="입력해서 시작하세요..."
+        onAttach={() => toast('파일 선택 창을 열어요')}
+        onSubmit={(text) => toast.success('보냈어요', { description: text })}
+        tools={
+          <FilterChip icon={<Hand />} selected={approval} onSelectedChange={setApproval}>
+            승인 요청
+          </FilterChip>
+        }
+        actions={
+          <>
+            <DropdownMenu
+              aria-label="모델"
+              align="end"
+              trigger={
+                <Button variant="ghost" iconRight={<ChevronDown />}>
+                  {current}
+                </Button>
+              }
+            >
+              <DropdownMenuRadioGroup label="모델" value={model} onValueChange={setModel}>
+                {MODELS.map((m) => (
+                  <DropdownMenuRadioItem key={m.value} value={m.value} description={m.description}>
+                    {m.label}
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            </DropdownMenu>
+            <Tooltip content="음성 입력">
+              <Button variant="ghost" iconOnly icon={<Mic />} aria-label="음성 입력" />
+            </Tooltip>
+          </>
+        }
+        footer={
+          <Button
+            variant="ghost"
+            size="sm"
+            icon={
+              <Inline gap={1} wrap={false}>
+                <BrandIcon name="gmail" size={16} />
+                <BrandIcon name="slack" size={16} />
+                <BrandIcon name="clickup" size={16} />
+              </Inline>
+            }
+            onClick={() => toast('연결할 앱을 골라요')}
+          >
+            앱 연결
+          </Button>
+        }
+      />
+    </div>
+  )
+}
+```
+
+### 응답 생성 중
+
+pending이면 보내기 버튼이 중지로 바뀌어요. 중지 버튼이나 Esc로 onStop이 불려요. 그동안에도 다음 메시지를 미리 쓸 수 있어요.
+
+```tsx
+import { useEffect, useRef, useState } from 'react'
+import { Stack, Text, ChatComposer } from '@iamfiro/design'
+
+export default function Example() {
+  const [pending, setPending] = useState(false)
+  const [status, setStatus] = useState('메시지를 보내 보세요.')
+  const timer = useRef(0)
+
+  useEffect(() => () => window.clearTimeout(timer.current), [])
+
+  const send = (text: string) => {
+    setPending(true)
+    setStatus(`"${text}"에 답하는 중…`)
+    timer.current = window.setTimeout(() => {
+      setPending(false)
+      setStatus('답변을 마쳤어요.')
+    }, 4000)
+  }
+
+  const stop = () => {
+    window.clearTimeout(timer.current)
+    setPending(false)
+    setStatus('응답을 중지했어요.')
+  }
+
+  return (
+    <Stack gap={3} style={{ width: '100%', maxWidth: 560 }}>
+      <ChatComposer placeholder="질문을 입력하세요" pending={pending} onSubmit={send} onStop={stop} onAttach={() => {}} />
+      <Text variant="body-sm" tone="secondary">
+        {status}
+      </Text>
+    </Stack>
+  )
+}
+```
+
+### 첨부 파일
+
+attachments 자리는 글 위에 놓여요. 제거 가능한 FilterChip으로 첨부 목록을 보여 줘요.
+
+```tsx
+import { useState } from 'react'
+import { FileIcon, Inline, ChatComposer, FilterChip, toast } from '@iamfiro/design'
+
+const SAMPLE = ['3분기 매출 보고서.pdf', '고객 인터뷰 정리.docx', '대시보드 시안.png']
+
+export default function Example() {
+  const [files, setFiles] = useState(SAMPLE.slice(0, 2))
+
+  const attach = () => {
+    const next = SAMPLE.find((f) => !files.includes(f))
+    if (next) setFiles([...files, next])
+    else toast('예시 파일을 모두 첨부했어요')
+  }
+
+  return (
+    <div style={{ width: '100%', maxWidth: 560 }}>
+      <ChatComposer
+        placeholder="첨부한 파일에 대해 물어보세요"
+        defaultValue="두 문서를 비교해서 핵심만 요약해 줘"
+        onAttach={attach}
+        onSubmit={() => {
+          toast.success(`파일 ${files.length}개와 함께 보냈어요`)
+          setFiles([])
+        }}
+        attachments={
+          files.length > 0 && (
+            <Inline gap={2}>
+              {files.map((f) => (
+                <FilterChip key={f} size="sm" icon={<FileIcon name={f} size={16} />} onRemove={() => setFiles(files.filter((x) => x !== f))} removeLabel={`${f} 제거`}>
+                  {f}
+                </FilterChip>
+              ))}
+            </Inline>
+          )
+        }
+      />
+    </div>
+  )
+}
+```
+
+### 상태
+
+disabled면 회색 배경에 금지 커서. 최소 구성(footer · tools 없이)도 그대로 정렬이 맞아요.
+
+```tsx
+import { Stack, ChatComposer } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={4} style={{ width: '100%', maxWidth: 560 }}>
+      <ChatComposer placeholder="최소 구성 — 글과 보내기만" />
+      <ChatComposer placeholder="사용량을 모두 썼어요. 내일 오전 9시에 다시 쓸 수 있어요." disabled onAttach={() => {}} />
+    </Stack>
+  )
+}
+```
+
+### 한 줄 답글 (size="sm")
+
+댓글 · 답글용 작은 입력창. 글 · actions · 작은 보내기 버튼이 한 줄에 놓이고, 글이 길어지면 maxRows(기본 4)까지 자라는 동안 버튼은 마지막 줄에 머물러요. placeholder로 "@로 멤버를 불러 보세요" 같은 안내만 바꾸면 돼요.
+
+```tsx
+import { useState } from 'react'
+import { AtSign } from 'lucide-react'
+import { Button, Stack, Text, ChatComposer } from '@iamfiro/design'
+
+export default function Example() {
+  const [sent, setSent] = useState<string[]>([])
+  return (
+    <Stack gap={5} style={{ width: 380 }}>
+      <Stack gap={2}>
+        {sent.map((s, i) => (
+          <Text key={i} variant="body-sm" tone="secondary">
+            보냄: {s}
+          </Text>
+        ))}
+        <ChatComposer size="sm" placeholder="답글을 쓰거나 @로 멤버를 불러 보세요" aria-label="답글" onSubmit={(v) => setSent((p) => [...p, v])} />
+      </Stack>
+      <ChatComposer
+        size="sm"
+        placeholder="댓글 남기기"
+        aria-label="댓글"
+        onAttach={() => {}}
+        actions={<Button variant="ghost" size="sm" iconOnly icon={<AtSign />} aria-label="멤버 언급" />}
+      />
+      <ChatComposer size="sm" placeholder="보관된 문서에는 댓글을 달 수 없어요" disabled />
+    </Stack>
+  )
+}
+```

package/agents/checkbox/AGENTS.md

@@ -0,0 +1,113 @@
+# Checkbox · Radio · Switch
+
+> 선택 컨트롤 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+켜고 끄는 선택 요소 세 가지. 여러 개를 고를 땐 Checkbox, 하나만 고를 땐 Radio, 바로 적용되는 설정에는 Switch를 써요. 모두 <label>로 감싸져 있어 글자를 눌러도 바뀌고, Space로 토글돼요.
+
+```tsx
+import { Checkbox, Radio, Switch } from '@iamfiro/design'
+```
+
+## API
+
+### Checkbox · Radio · Switch
+
+셋 모두 같은 props를 받아요. label 외의 props는 안쪽 <input>에 전달돼요(type은 정해져 있어요).
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `label` | `ReactNode` |  | 옆에 보일 글자. 눌러도 토글돼요. |
+| `checked` | `boolean` |  | 선택 상태(제어). |
+| `defaultChecked` | `boolean` |  | 처음 선택 상태(비제어). |
+| `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` |  | 바뀔 때. e.target.checked로 새 값을 읽어요. |
+| `disabled` | `boolean` |  | 비활성. |
+| `name / value` | `string` |  | 폼 제출용. Radio는 같은 name끼리 한 그룹이 돼요. |
+| `className` | `string` |  | 바깥 <label>에 붙일 클래스. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### Checkbox
+
+checked / onChange로 제어하거나 defaultChecked로 비제어 사용. disabled는 흐리게 보이고 누를 수 없어요.
+
+```tsx
+import { useState } from 'react'
+import { Checkbox } from '@iamfiro/design'
+
+const NOTICES = [
+  { id: 'comment', label: '내 글에 댓글이 달렸을 때' },
+  { id: 'mention', label: '누군가 나를 언급했을 때' },
+  { id: 'deploy', label: '배포가 끝났을 때' },
+]
+
+export default function Example() {
+  const [checked, setChecked] = useState<string[]>(['mention'])
+
+  const toggle = (id: string) => setChecked((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]))
+
+  return (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {NOTICES.map((n) => (
+        <Checkbox key={n.id} label={n.label} checked={checked.includes(n.id)} onChange={() => toggle(n.id)} />
+      ))}
+      <Checkbox label="보안 알림 (끌 수 없어요)" checked disabled readOnly />
+    </div>
+  )
+}
+```
+
+### Radio
+
+같은 name으로 묶으면 화살표 키로 옮겨 다닐 수 있어요. 바깥에 role="radiogroup"과 aria-label을 주세요.
+
+```tsx
+import { useState } from 'react'
+import { Radio } from '@iamfiro/design'
+
+const CYCLES = [
+  { value: 'monthly', label: '월간 결제 · 월 12,000원' },
+  { value: 'yearly', label: '연간 결제 · 월 9,600원 (20% 할인)' },
+  { value: 'lifetime', label: '평생 이용권 · 준비 중' },
+]
+
+export default function Example() {
+  const [cycle, setCycle] = useState('monthly')
+  return (
+    <div role="radiogroup" aria-label="결제 주기" style={{ display: 'grid', gap: 12 }}>
+      {CYCLES.map((c) => (
+        <Radio
+          key={c.value}
+          name="billing-cycle"
+          value={c.value}
+          label={c.label}
+          checked={cycle === c.value}
+          onChange={() => setCycle(c.value)}
+          disabled={c.value === 'lifetime'}
+        />
+      ))}
+    </div>
+  )
+}
+```
+
+### Switch
+
+저장 버튼 없이 바로 적용되는 설정에 써요. role="switch"가 붙어 있어요.
+
+```tsx
+import { useState } from 'react'
+import { Switch } from '@iamfiro/design'
+
+export default function Example() {
+  const [autoSave, setAutoSave] = useState(true)
+  return (
+    <div style={{ display: 'grid', gap: 14 }}>
+      <Switch label="자동 저장" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} />
+      <Switch label="이메일로 주간 리포트 받기" defaultChecked />
+      <Switch label="다크 모드 (준비 중)" disabled />
+    </div>
+  )
+}
+```

package/agents/code-block/AGENTS.md

@@ -0,0 +1,144 @@
+# CodeBlock
+
+> 텍스트 & 코드 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+읽기 전용 코드 블록. TSX · CSS · 셸 스니펫에 가벼운 문법 색을 입히고 복사 버튼을 달아요. 설치 명령처럼 한 줄짜리는 command로, 긴 코드는 maxHeight로 접어 둘 수 있어요.
+
+```tsx
+import { CodeBlock, type CodeLanguage } from '@iamfiro/design'
+```
+
+## API
+
+### CodeBlock
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `code` (필수) | `string` |  | 보여 줄 코드. 끝의 빈 줄은 잘라요. |
+| `language` | `'tsx' \| 'css' \| 'bash' \| 'text'` | `'tsx'` | 문법 색 규칙. text는 색 없이 보여요. |
+| `title` | `ReactNode` |  | 머리 줄 제목(파일 이름, 탭 이름). |
+| `command` | `boolean` |  | $ 프롬프트가 붙은 한 줄 명령 스타일. bash 규칙으로 색을 입혀요. |
+| `showLineNumbers` | `boolean` |  | 왼쪽에 줄 번호. |
+| `maxHeight` | `number` |  | 이 높이(px)를 넘으면 접고 "코드 더 보기" 버튼을 보여 줘요. |
+| `copyable` | `boolean` | `true` | 복사 버튼 표시. |
+| `className` | `string` |  | 루트에 붙일 클래스. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+code만 넘기면 tsx로 색을 입혀요. title은 머리 줄에 파일 이름처럼 보여요.
+
+```tsx
+import { CodeBlock, Button } from '@iamfiro/design'
+
+const CODE = `
+export function SaveButton({ saving }: { saving: boolean }) {
+  return (
+    <Button variant="primary" loading={saving}>
+      저장
+    </Button>
+  )
+}`
+
+export default function Example() {
+  return (
+    <div style={{ width: '100%', maxWidth: 560 }}>
+      <CodeBlock title="SaveButton.tsx" code={CODE} />
+    </div>
+  )
+}
+```
+
+### 언어
+
+language로 'css', 'bash', 'text'를 고를 수 있어요.
+
+```tsx
+import { CodeBlock } from '@iamfiro/design'
+
+const CSS = `/* 값은 토큰으로 맞춰요 */
+.billing-card {
+  padding: 20px;
+  border-radius: var(--r-lg);
+  background: #ffffff;
+  color: var(--text);
+}`
+
+const BASH = `# 의존성을 설치하고 개발 서버를 띄워요
+npm install
+npm run dev -- --port 5173`
+
+export default function Example() {
+  return (
+    <div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 560 }}>
+      <CodeBlock title="billing.css" language="css" code={CSS} />
+      <CodeBlock title="터미널" language="bash" code={BASH} />
+    </div>
+  )
+}
+```
+
+### 명령어
+
+command는 $ 프롬프트가 붙은 한 줄 스타일이에요. 복사할 때 $는 빠져요.
+
+```tsx
+import { CodeBlock } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 420 }}>
+      <CodeBlock command code="npm install @lumen/ui" />
+      <CodeBlock command code="npx lumen init --template dashboard" />
+    </div>
+  )
+}
+```
+
+### 줄 번호 · 접기
+
+showLineNumbers로 줄 번호를 보여 주고, 코드가 maxHeight보다 길면 접힌 채로 시작해 "코드 더 보기"로 펼쳐요.
+
+```tsx
+import { CodeBlock, Button, Field, Input, toast } from '@iamfiro/design'
+
+const CODE = `import { useState } from 'react'
+
+export function InviteForm() {
+  const [email, setEmail] = useState('')
+  const [sending, setSending] = useState(false)
+
+  const invite = async () => {
+    setSending(true)
+    try {
+      await sendInvite(email)
+      toast.success('초대를 보냈어요', { description: email })
+      setEmail('')
+    } catch {
+      toast.error('초대를 보내지 못했어요')
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <Field label="이메일" htmlFor="invite-email">
+      <Input id="invite-email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      <Button variant="primary" loading={sending} onClick={invite}>
+        초대하기
+      </Button>
+    </Field>
+  )
+}`
+
+export default function Example() {
+  return (
+    <div style={{ width: '100%', maxWidth: 560 }}>
+      <CodeBlock title="InviteForm.tsx" code={CODE} showLineNumbers maxHeight={220} />
+    </div>
+  )
+}
+```

package/agents/color-dot/AGENTS.md

@@ -0,0 +1,120 @@
+# ColorDot
+
+> 라벨 & 배지 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+라벨과 시리즈·분류 색을 이어 주는 작은 색 표시. 차트 범례와 툴팁 행에서 써요. 텍스트 옆에 놓여도 찌그러지지 않아요(flex: none).
+
+```tsx
+import { ColorDot } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- 차트: 시리즈 색은 `--chart-1…6`을 순서대로, 그리드는 `--chart-grid`로 아주 옅게(세로선·축선 없음). 범례·툴팁의 색 표시는 `ColorDot`, 툴팁은 `Card raised` + `Separator`로 조립. 축·툴팁·범례·호버/키보드는 `components/Chart/`의 공용 조각(`ChartTooltip`, `ChartLegend`, `useChartInteraction`)을 쓴다. → `LineChart` · `BarChart` · `PieChart` · `Sparkbar`
+- 시간 축(계획 대비 실제, 워터폴, 하루 일정)은 `Timeline` + `TimelineRow` + `TimelineBar`로. 계획 = 점선 틀(`outline`), 실제 = 옅은 색 막대(`fill`), 계획 초과 = 주황(`limit`), 아직 = `faded` 행. 지금은 파란 `now` 선, 목표·예상은 `markers`(점선/실선 + 아래 Badge 칩 + 옅은 `band`). 진행 중 막대는 `running`(앞 가장자리 + shimmer). 범례 색 표시는 같은 옅기의 `ColorDot variant="soft" | "dashed" | "hatched"`.
+
+## API
+
+### ColorDot
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `color` (필수) | `string` |  | CSS 변수 이름('--chart-1') 또는 아무 CSS 색. |
+| `shape` | `'square' \| 'circle' \| 'line'` | `'square'` | 모양. |
+| `variant` | `'solid' \| 'soft' \| 'dashed' \| 'hatched'` | `'solid'` | 채움 방식. soft는 옅은 색(24%), dashed는 점선 틀, hatched는 빗금. |
+| `size` | `number` | `10` | 한 변 길이(px). |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 모양
+
+square는 범례·툴팁, circle은 상태, line은 선 차트 범례에 어울려요.
+
+```tsx
+import { ColorDot, Inline, Text } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Inline gap={6}>
+      {(['square', 'circle', 'line'] as const).map((shape) => (
+        <Inline key={shape} gap={2}>
+          <ColorDot color="--chart-2" shape={shape} />
+          <Text variant="body-sm" tone="secondary">
+            {shape}
+          </Text>
+        </Inline>
+      ))}
+    </Inline>
+  )
+}
+```
+
+### 범례
+
+Inline + ColorDot + Text로 범례 한 줄을 만들어요.
+
+```tsx
+import { ColorDot, Inline, Text } from '@iamfiro/design'
+
+const SERIES = [
+  { label: '유료 광고', color: '--chart-1' },
+  { label: '검색 유입', color: '--chart-2' },
+  { label: '이메일', color: '--chart-3' },
+  { label: '추천', color: '--chart-4' },
+  { label: '직접 방문', color: '--chart-5' },
+]
+
+export default function Example() {
+  return (
+    <Inline gap={4}>
+      {SERIES.map((s) => (
+        <Inline key={s.label} gap={2}>
+          <ColorDot color={s.color} />
+          <Text variant="body-sm" tone="secondary">
+            {s.label}
+          </Text>
+        </Inline>
+      ))}
+    </Inline>
+  )
+}
+```
+
+### 변형 (variant)
+
+solid는 색 그대로, soft는 TimelineBar 같은 옅은 막대와 같은 색, dashed는 점선 틀(계획·목표), hatched는 빗금(예상·무제한). "계획 / 실제 / 초과" 범례에 써요.
+
+```tsx
+import { ColorDot, Inline, Text, type ColorDotVariant } from '@iamfiro/design'
+
+const ITEMS: Array<{ variant: ColorDotVariant; color: string; label: string }> = [
+  { variant: 'dashed', color: '--n8', label: '계획' },
+  { variant: 'soft', color: '--chart-4', label: '실제' },
+  { variant: 'soft', color: '--chart-6', label: '초과' },
+  { variant: 'hatched', color: '--chart-2', label: '예상' },
+  { variant: 'solid', color: '--chart-2', label: '확정' },
+]
+
+export default function Example() {
+  return (
+    <Inline gap={4}>
+      {ITEMS.map((it) => (
+        <Inline key={it.label} gap={2} wrap={false}>
+          <ColorDot color={it.color} variant={it.variant} size={12} />
+          <Text variant="body-sm" tone="secondary">
+            {it.label}
+          </Text>
+        </Inline>
+      ))}
+      <Inline gap={2} wrap={false}>
+        <ColorDot color="--n8" shape="line" variant="dashed" size={12} />
+        <Text variant="body-sm" tone="secondary">
+          목표선
+        </Text>
+      </Inline>
+    </Inline>
+  )
+}
+```