@nurimedia/react-ui 0.1.0

package/llms.txt

@@ -0,0 +1,369 @@
+# @nurimedia/react-ui — AI 사용 명세
+
+> 이 파일은 AI 코딩 도구(Claude 등)가 @nurimedia/react-ui를 정확히 사용하기 위한 명세다.
+> Nurimedia의 공통 React UI 라이브러리 — 아래 컴포넌트가 필요한 UI는
+> **직접 만들지 말고 반드시 이 라이브러리를 사용할 것.**
+
+## 필수 설정 (앱당 1회, 루트 진입점에서)
+
+```tsx
+// 예: app/layout.tsx 또는 src/main.tsx
+import '@nurimedia/react-ui/tokens.css';      // 디자인 토큰 (필수)
+import '@nurimedia/react-ui/styles.css';      // 컴포넌트 스타일 (필수)
+import '@nurimedia/react-ui/typography.css';  // 타이포 유틸 .nuri-text-* (선택)
+```
+
+- 위 import는 **루트에서 한 번만**. 컴포넌트 사용처마다 CSS를 import하지 않는다.
+- 브랜드 색은 기본값(teal `#29b79c`)이 내장되어 있어 **설정 없이 바로 동작**한다.
+  다른 브랜드 색이 필요할 때만 앱 CSS의 `:root`에서 4개 변수를 덮어쓴다:
+
+```css
+:root {
+  --nuri-color-brand-default: #29b79c;        /* 포인트 색 */
+  --nuri-color-brand-pressed: #1d9b83;        /* 눌림 */
+  --nuri-color-brand-subtle: #e0faf4;         /* 옅은 배경 */
+  --nuri-color-brand-subtle-pressed: #c3eae2; /* 옅은 배경 눌림 */
+}
+```
+
+- 폰트는 강제하지 않는다 — 앱에 설정된 font-family를 그대로 상속한다.
+- Toast를 쓰면 루트에 `<Toaster />` 1회, Tooltip을 많이 쓰면 루트에 `<TooltipProvider>` 권장(없어도 동작).
+
+```tsx
+import { Toaster, TooltipProvider } from '@nurimedia/react-ui';
+
+<TooltipProvider>
+  {children}
+  <Toaster />
+</TooltipProvider>
+```
+
+## 컴포넌트 목록
+
+Button · Input · Textarea · Checkbox · RadioGroup/Radio · Switch · Select · Modal · AlertDialog · Toast · Tooltip
+모두 `import { X } from '@nurimedia/react-ui'` 로 가져온다. 접근성(포커스 관리·ARIA·키보드)은 내장되어 있으므로 별도 처리가 필요 없다.
+(이 목록이 이 버전이 제공하는 전부다 — 여기 없는 UI는 직접 구현해도 된다.)
+
+---
+
+## Button
+
+```tsx
+import { Button } from '@nurimedia/react-ui';
+
+<Button variant="primary" size="md" onClick={onSave}>저장</Button>
+<Button variant="outline" iconLeft={<SearchIcon />}>검색</Button>
+<Button iconOnly aria-label="닫기" variant="ghost"><CloseIcon /></Button>
+<Button loading>저장</Button>
+<Button block>로그인</Button>
+<Button asChild><a href="/about">소개</a></Button>   {/* 링크를 버튼처럼 */}
+```
+
+Props:
+- `variant`: `'primary' | 'secondary' | 'outline' | 'ghost'` (기본 `primary`)
+- `size`: `'sm' | 'md' | 'lg'` — 36/42/48px (기본 `md`)
+- `iconLeft` / `iconRight`: ReactNode — 라벨 옆 아이콘
+- `iconOnly`: boolean — 정사각 아이콘 버튼. **`aria-label` 필수**
+- `block`: boolean — 전체 너비
+- `loading`: boolean — 스피너 표시 + 클릭 차단 (포커스는 유지됨)
+- `disabled`, `type`(`'button'` 기본), `onClick` 등 HTML button 속성 전부 통과
+- `asChild`: boolean — 자식 엘리먼트(a, Link 등)에 버튼 스타일·동작 위임
+
+규칙:
+- 아이콘 전용 버튼에는 반드시 `aria-label`을 지정한다.
+- 제출 버튼은 `type="submit"`을 명시한다 (기본이 `"button"`이므로).
+
+## Input
+
+자체 완결형 — 라벨·힌트·에러 메시지를 내장한다. 별도 `<label>`을 만들지 않는다.
+
+```tsx
+import { Input } from '@nurimedia/react-ui';
+
+<Input label="이메일" placeholder="you@example.com" block />
+<Input label="비밀번호" type="password" description="8자 이상 입력하세요" />
+<Input label="비밀번호" type="password" invalid errorMessage="비밀번호가 일치하지 않습니다" />
+<Input label="검색" hideLabel placeholder="검색어 입력" iconLeft={<SearchIcon />} />
+<Input aria-label="수량" size="sm" />   {/* 라벨 없이 쓸 땐 aria-label 필수 */}
+```
+
+Props:
+- `size`: `'sm' | 'md' | 'lg'` — 36/42/48px (기본 `md`)
+- `label`: ReactNode — 필드 위 라벨 (자동으로 input과 연결됨)
+- `hideLabel`: boolean — 라벨을 시각적으로만 숨김 (스크린리더엔 유지)
+- `description`: ReactNode — 평상시 힌트 (필드 아래, 회색)
+- `invalid`: boolean — 에러 상태 (보더·배경·텍스트가 에러색)
+- `errorMessage`: ReactNode — invalid일 때 description을 대체하는 빨간 메시지
+- `iconLeft` / `iconRight`: ReactNode — 필드 안 어도먼트
+- `block`: boolean — 전체 너비
+- `value`, `onChange`, `placeholder`, `type`, `disabled` 등 HTML input 속성 전부 통과
+
+규칙:
+- `label`이 없으면 반드시 `aria-label`을 지정한다 (placeholder는 라벨 대체가 아니다).
+- 에러는 `invalid` + `errorMessage`를 함께 쓴다.
+
+## Textarea
+
+여러 줄 텍스트 입력. Input과 동일한 라벨/힌트/에러 패턴.
+
+```tsx
+import { Textarea } from '@nurimedia/react-ui';
+
+<Textarea label="문의 내용" rows={5} block />
+<Textarea label="자기소개" description="500자 이내로 작성하세요" />
+<Textarea label="자기소개" invalid errorMessage="글자 수를 초과했습니다" />
+<Textarea aria-label="메모" resize="none" />
+<Textarea label="댓글" autosize rows={3} maxRows={8} />  {/* 내용 따라 3→8줄 확장 후 스크롤 */}
+```
+
+Props:
+- `label` / `hideLabel` / `description` / `invalid` / `errorMessage` / `block` — Input과 동일
+- `rows`: number — 표시 줄 수 (기본 3). size prop은 없다 — 높이는 rows로 제어
+- `resize`: `'vertical'(기본) | 'none'` — 세로 크기 조절 핸들
+- `autosize`: boolean — 내용에 따라 높이 자동 확장 (`rows`가 최소). 켜면 resize 핸들은 무시됨
+- `maxRows`: number — autosize의 최대 줄 수, 넘으면 스크롤 (미지정 시 무제한)
+- `value`, `onChange`, `placeholder`, `disabled` 등 HTML textarea 속성 전부 통과
+
+규칙: `label`이 없으면 반드시 `aria-label`을 지정한다.
+
+## Checkbox
+
+```tsx
+import { Checkbox } from '@nurimedia/react-ui';
+
+<Checkbox label="이용약관에 동의합니다" checked={agreed} onCheckedChange={setAgreed} />
+<Checkbox label="전체 선택" checked={some ? 'indeterminate' : all} onCheckedChange={…} />
+<Checkbox aria-label="행 선택" />   {/* 라벨 없이 — aria-label 필수 */}
+```
+
+Props:
+- `label`: ReactNode — 우측 라벨 (클릭으로도 토글). 없으면 `aria-label` 필수
+- `size`: `'md'(16px, 기본) | 'sm'(12px)`
+- `checked`: `boolean | 'indeterminate'` / `defaultChecked` / `onCheckedChange`
+- `disabled`, `name`(폼 참여), `value`, `required`
+
+여러 개를 배열 하나로 관리 (다중 선택):
+
+```tsx
+const [selected, setSelected] = useState<string[]>([]);
+
+{TOPICS.map((t) => (
+  <Checkbox
+    key={t.value}
+    label={t.label}
+    checked={selected.includes(t.value)}
+    onCheckedChange={(checked) =>
+      setSelected((prev) =>
+        checked === true ? [...prev, t.value] : prev.filter((v) => v !== t.value),
+      )
+    }
+  />
+))}
+```
+
+전체 선택 헤더는 `selected.length`로 파생: 모두 켜짐 `true` / 모두 꺼짐 `false` / 일부만 `'indeterminate'`.
+
+## RadioGroup / Radio
+
+```tsx
+import { RadioGroup, Radio } from '@nurimedia/react-ui';
+
+<RadioGroup aria-label="정렬" value={sort} onValueChange={setSort}>
+  <Radio value="latest" label="최신순" />
+  <Radio value="edited" label="수정순" />
+  <Radio value="author" label="저자이름순" disabled />
+</RadioGroup>
+```
+
+- `RadioGroup`: `value`/`defaultValue`/`onValueChange`, `orientation`(`'vertical'(기본)|'horizontal'`),
+  `disabled`, `name`, `required`. **그룹에 `aria-label` 필수** (시각 제목이 없을 때)
+- `Radio`: `value`(필수), `label`, `disabled` — 반드시 RadioGroup 안에서 사용
+- 화살표 키 그룹 탐색·단일 선택은 자동
+
+## Switch
+
+즉시 적용되는 켬/끔 설정용 토글 (제출이 필요한 선택은 Checkbox 사용).
+
+```tsx
+import { Switch } from '@nurimedia/react-ui';
+
+<Switch label="알림 받기" checked={on} onCheckedChange={setOn} />
+<Switch aria-label="다크 모드" />   {/* 라벨 없이 — aria-label 필수 */}
+```
+
+Props: `label` / `checked` / `defaultChecked` / `onCheckedChange` / `disabled` / `name` / `value` / `required`
+
+## Select
+
+단일 선택 드롭다운. **다중 선택은 지원하지 않는다.**
+
+```tsx
+import { Select } from '@nurimedia/react-ui';
+
+<Select
+  aria-label="정렬"
+  placeholder="정렬 선택"
+  options={[
+    { value: 'latest', label: '최신순' },
+    { value: 'edited', label: '수정순' },
+    { value: 'author', label: '저자이름순', disabled: true },
+  ]}
+  onValueChange={(v) => setSort(v)}
+/>
+<Select aria-label="연도" options={YEARS} defaultValue="2026" size="sm" />
+```
+
+Props:
+- `options`: `{ value: string; label: ReactNode; disabled?: boolean }[]` (필수)
+- `size`: `'sm' | 'md'` — 36/42px (기본 `md`) ※ lg 없음
+- `placeholder`: ReactNode — 값 없을 때 표시
+- `value` / `defaultValue` / `onValueChange(value: string)` — 제어/비제어
+- `disabled`, `block`, `name`(폼 전송용), `required`
+- `aria-label`: 시각 라벨이 없을 때 필수
+
+키보드(화살표·Enter·Esc·글자 입력으로 옵션 점프)는 자동 지원된다.
+
+## Modal
+
+compound 컴포넌트 — 슬롯을 조합해 구성한다. 포커스 트랩·Esc·스크롤 락·포커스 복귀 자동.
+
+```tsx
+import { Modal, Button } from '@nurimedia/react-ui';
+
+// 비제어 (트리거 방식)
+<Modal>
+  <Modal.Trigger asChild><Button>열기</Button></Modal.Trigger>
+  <Modal.Content size="md">
+    <Modal.Header>
+      <Modal.Title>제목</Modal.Title>
+      <Modal.Description>설명 (선택)</Modal.Description>
+      <Modal.CloseButton />
+    </Modal.Header>
+    <Modal.Body>본문 내용</Modal.Body>
+    <Modal.Footer align="end">
+      <Modal.Close asChild><Button variant="outline">취소</Button></Modal.Close>
+      <Button onClick={onConfirm}>확인</Button>
+    </Modal.Footer>
+  </Modal.Content>
+</Modal>
+
+// 제어형
+<Modal open={open} onOpenChange={setOpen}>
+  <Modal.Content>…</Modal.Content>
+</Modal>
+```
+
+슬롯:
+- `Modal` 루트: `open`/`onOpenChange`(제어형) 또는 `Modal.Trigger`(비제어)
+- `Modal.Content`: `placement`(`'center'`(기본)`|'bottom'` 바텀시트), `size`(`'sm'|'md'|'lg'` — 360/480/640px), `overlay`(기본 true)
+- `Modal.Header` / `Modal.Body`(스크롤 가능) / `Modal.Footer`(`align`: `'start'|'center'|'end'(기본)|'between'|'full'`)
+- `Modal.Title` / `Modal.Description` — 스크린리더 자동 연결
+- `Modal.Close`(asChild) / `Modal.CloseButton`(우상단 X)
+
+규칙 (중요):
+- **`Modal.Title`은 반드시 포함한다.** 시각적 제목이 없으면 `<Modal.Title visuallyHidden>이름</Modal.Title>`.
+- 모바일 바텀시트가 필요하면 앱에서 뷰포트를 판단해 `placement`를 바꾼다.
+
+## AlertDialog
+
+확인을 강제하는 다이얼로그 (바깥 클릭으로 닫히지 않음, 기본 포커스가 '취소').
+
+```tsx
+import { AlertDialog, Button } from '@nurimedia/react-ui';
+
+<AlertDialog>
+  <AlertDialog.Trigger asChild><Button>삭제</Button></AlertDialog.Trigger>
+  <AlertDialog.Content tone="warning">
+    <AlertDialog.Header>
+      <AlertDialog.Title>정말 삭제할까요?</AlertDialog.Title>
+      <AlertDialog.Description>되돌릴 수 없습니다.</AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel asChild><Button variant="secondary">취소</Button></AlertDialog.Cancel>
+      <AlertDialog.Action asChild><Button onClick={onDelete}>삭제</Button></AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog>
+```
+
+- `AlertDialog.Content`: `tone`: `'info'(기본) | 'success' | 'warning'` — 상단 아이콘·색 결정.
+  **`danger` 톤은 존재하지 않는다** (디자인 시스템에 없음 — 파괴적 확인도 `warning` 사용).
+- `icon`: 미지정=톤 기본 아이콘 / ReactNode=교체 / `null`=제거
+- 슬롯: Header/Title/Description/Body/Footer(기본 `align="full"` 전체너비 버튼)/Action/Cancel/CloseButton
+- 알림형(버튼 1개)은 Footer에 `Action`만 넣는다.
+
+## Toast
+
+전역 알림. **`<Toaster />`를 앱 루트에 1회만** 마운트하고, 어디서든 `toast()`를 호출한다.
+
+```tsx
+// 루트 (1회)
+import { Toaster } from '@nurimedia/react-ui';
+<body>{children}<Toaster /></body>
+
+// 아무 곳에서나 (컴포넌트, 이벤트 핸들러, API 레이어)
+import { toast } from '@nurimedia/react-ui';
+
+toast('기본 메시지');
+toast.success('저장됐습니다');
+toast.error('오류가 발생했습니다');      // 스크린리더가 즉시 낭독
+toast.info('참고해 주세요');
+const id = toast('진행 중…', { duration: 10000 });
+toast.dismiss(id);                        // 특정 토스트 닫기 (id 없으면 전체)
+```
+
+- 옵션: `{ tone?, duration?(기본 3000ms), id? }`
+- 사용처마다 컴포넌트를 렌더하지 않는다 — 함수 호출만 한다.
+- `<Toaster />`를 여러 번 마운트하지 않는다.
+- 아래로 스와이프해 닫기·hover 시 타이머 정지·F8 키보드 접근이 내장되어 있다.
+
+## Tooltip
+
+```tsx
+import { Tooltip } from '@nurimedia/react-ui';
+
+<Tooltip content="즐겨찾기에 추가">
+  <Button iconOnly aria-label="즐겨찾기">★</Button>
+</Tooltip>
+
+<Tooltip content="설명" side="bottom" align="start">…</Tooltip>
+<Tooltip content="항상 표시" open>…</Tooltip>   {/* 제어형 */}
+```
+
+Props:
+- `content`: ReactNode (필수) — 툴팁 내용
+- `children`: 단일 엘리먼트 (필수) — 트리거
+- `side`: `'top'(기본)|'bottom'|'left'|'right'` / `align`: `'start'|'center'(기본)|'end'`
+- `arrow`: boolean (기본 true) — 꼬리 화살표
+- `delayDuration`: number — 열림 지연 ms (기본 100)
+- `open`/`defaultOpen`/`onOpenChange` — 제어형
+- `disabled`: boolean — true면 툴팁 없이 트리거만 렌더
+
+규칙:
+- hover와 키보드 포커스 모두에서 열린다. 터치 기기에서는 표시되지 않는다 —
+  **터치에서도 필요한 정보는 툴팁에 넣지 않는다.**
+- 툴팁 안에 버튼·링크를 넣지 않는다 (닫기 버튼 있는 안내는 툴팁 용도가 아님).
+- 공간이 부족하면 자동으로 반대쪽으로 반전된다 — 위치 보정 코드를 쓰지 않는다.
+
+---
+
+## 다국어(i18n) 앱에서
+
+사용자에게 보이는 모든 텍스트는 props로 전달되므로 앱의 i18n(next-intl 등)이 그대로 적용된다.
+단, **스크린리더 전용 기본 문자열 3곳은 한국어 기본값**이므로 다국어 앱은 로케일에 맞게 덮어쓴다:
+
+```tsx
+<Modal.CloseButton aria-label={t('close')} />       {/* 기본 "닫기" */}
+<AlertDialog.CloseButton aria-label={t('close')} /> {/* 기본 "닫기" */}
+<Toaster label={t('notifications')} />              {/* 기본 "알림" */}
+```
+
+## 하지 말 것 (요약)
+
+1. 이 문서에 나열된 컴포넌트에 해당하는 UI를 직접 구현하지 않는다 (커스텀 모달/토스트/셀렉트 금지).
+2. `Modal.Title` 생략 금지 — 시각적으로 숨길 땐 `visuallyHidden`.
+3. `AlertDialog`에 `tone="danger"` 없음 — `warning` 사용.
+4. 아이콘 전용 `Button`·라벨 없는 `Input`/`Select`에 `aria-label` 누락 금지.
+5. CSS(`tokens.css`/`styles.css`)를 사용처마다 중복 import하지 않는다 — 루트 1회.
+6. `<Toaster />` 중복 마운트 금지.
+7. 컴포넌트 색을 인라인 스타일로 바꾸지 않는다 — 브랜드 변경은 `:root` 변수 4개로.

package/package.json

@@ -0,0 +1,183 @@
+{
+  "name": "@nurimedia/react-ui",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "누리미디어 공통 헤드리스 React 컴포넌트 + 디자인 토큰 라이브러리. 브랜드 색은 앱이 CSS 변수로 주입합니다.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/donghoonlee94/nuri-ui.git"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "headless",
+    "design-tokens",
+    "radix-ui",
+    "accessibility"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./Button": {
+      "types": "./dist/Button/index.d.ts",
+      "import": "./dist/Button/index.js",
+      "require": "./dist/Button/index.cjs"
+    },
+    "./Button/styles.css": "./dist/Button/styles.css",
+    "./Input": {
+      "types": "./dist/Input/index.d.ts",
+      "import": "./dist/Input/index.js",
+      "require": "./dist/Input/index.cjs"
+    },
+    "./Input/styles.css": "./dist/Input/styles.css",
+    "./Textarea": {
+      "types": "./dist/Textarea/index.d.ts",
+      "import": "./dist/Textarea/index.js",
+      "require": "./dist/Textarea/index.cjs"
+    },
+    "./Textarea/styles.css": "./dist/Textarea/styles.css",
+    "./Checkbox": {
+      "types": "./dist/Checkbox/index.d.ts",
+      "import": "./dist/Checkbox/index.js",
+      "require": "./dist/Checkbox/index.cjs"
+    },
+    "./Checkbox/styles.css": "./dist/Checkbox/styles.css",
+    "./Radio": {
+      "types": "./dist/Radio/index.d.ts",
+      "import": "./dist/Radio/index.js",
+      "require": "./dist/Radio/index.cjs"
+    },
+    "./Radio/styles.css": "./dist/Radio/styles.css",
+    "./Switch": {
+      "types": "./dist/Switch/index.d.ts",
+      "import": "./dist/Switch/index.js",
+      "require": "./dist/Switch/index.cjs"
+    },
+    "./Switch/styles.css": "./dist/Switch/styles.css",
+    "./Modal": {
+      "types": "./dist/Modal/index.d.ts",
+      "import": "./dist/Modal/index.js",
+      "require": "./dist/Modal/index.cjs"
+    },
+    "./Modal/styles.css": "./dist/Modal/styles.css",
+    "./AlertDialog": {
+      "types": "./dist/AlertDialog/index.d.ts",
+      "import": "./dist/AlertDialog/index.js",
+      "require": "./dist/AlertDialog/index.cjs"
+    },
+    "./AlertDialog/styles.css": "./dist/AlertDialog/styles.css",
+    "./Select": {
+      "types": "./dist/Select/index.d.ts",
+      "import": "./dist/Select/index.js",
+      "require": "./dist/Select/index.cjs"
+    },
+    "./Select/styles.css": "./dist/Select/styles.css",
+    "./Toast": {
+      "types": "./dist/Toast/index.d.ts",
+      "import": "./dist/Toast/index.js",
+      "require": "./dist/Toast/index.cjs"
+    },
+    "./Toast/styles.css": "./dist/Toast/styles.css",
+    "./Tooltip": {
+      "types": "./dist/Tooltip/index.d.ts",
+      "import": "./dist/Tooltip/index.js",
+      "require": "./dist/Tooltip/index.cjs"
+    },
+    "./Tooltip/styles.css": "./dist/Tooltip/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./typography.css": "./dist/typography.css"
+  },
+  "files": [
+    "dist",
+    "llms.txt"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.8.0",
+  "scripts": {
+    "build": "node scripts/build-tokens.mjs && tsup",
+    "prepublishOnly": "pnpm build",
+    "dev": "node scripts/build-tokens.mjs && tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,css}\"",
+    "storybook": "node scripts/build-tokens.mjs && storybook dev -p 6006 --ci",
+    "build-storybook": "node scripts/build-tokens.mjs && storybook build",
+    "chromatic": "chromatic --build-script-name build-storybook --exit-zero-on-changes",
+    "clean": "rm -rf dist .turbo storybook-static"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.3.7",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.4.3",
+    "@radix-ui/react-select": "^2.3.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-toast": "^1.2.18",
+    "@radix-ui/react-tooltip": "^1.2.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@storybook/addon-a11y": "^10",
+    "@storybook/addon-docs": "^10",
+    "@storybook/react-vite": "^10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.3",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^18.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10",
+    "style-dictionary": "^4.3.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^6.0.5",
+    "vitest": "^4.1.9"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@bundled-es-modules/glob",
+      "esbuild",
+      "style-dictionary"
+    ]
+  }
+}