@gunjo/ui 0.0.1-alpha.0

package/README.md

@@ -0,0 +1,129 @@
+# @gunjo/ui
+
+[![npm version](https://img.shields.io/npm/v/@gunjo/ui.svg)](https://www.npmjs.com/package/@gunjo/ui)
+
+> ⚠️ **Early alpha** — `0.0.1-alpha.0` は名前確保とドライラン目的の初回 publish です。API は今後変更される可能性があります。本格採用は `1.0.0` stable リリース以降を推奨。
+
+SSOT-driven な React + Tailwind デザインシステム。Pen / source / docs の 3 軸で整合性検証された 70 コンポーネントを提供。
+
+## 📘 デザイン仕様（正式）
+
+- UI デザイン仕様の正式ドキュメントは [DESIGN.md](./DESIGN.md) を参照してください。
+- SSOT 運用・同期手順は [design/README.md](./design/README.md) を参照してください。
+- 今回対応の概要と運用 RUNBOOK は [SSOT_RUNBOOK.md](./SSOT_RUNBOOK.md) を参照してください。
+- コンポーネント突合表（Source / Docs / Pen）は [COMPONENT_COVERAGE_MATRIX.md](./COMPONENT_COVERAGE_MATRIX.md) を参照してください。
+- 視覚監査台帳（docs vs pen）は [COMPONENT_VISUAL_AUDIT.md](./COMPONENT_VISUAL_AUDIT.md) を参照してください。
+
+## 🚀 採用ガイド（他プロジェクトから使う）
+
+GunjoUI を別アプリに導入したい場合：
+
+- [docs/adoption.md](./docs/adoption.md) — **5 分インストール**（ここから始める）
+- [docs/adoption-strategy.md](./docs/adoption-strategy.md) — 配布形態の決定書
+- [docs/migration-playbook.md](./docs/migration-playbook.md) — 既存アプリの段階移行
+- [docs/dependencies.md](./docs/dependencies.md) — peer dependency 範囲とテスト済み組み合わせ
+- [docs/versioning.md](./docs/versioning.md) — semver 運用と破壊的変更ポリシー
+
+GunjoUI に新規コンポーネントを足したい場合：
+
+- [docs/component-addition.md](./docs/component-addition.md) — SSOT 三軸（pen + source + docs）で追加する手順
+
+## 📦 セットアップ
+
+### 依存関係のインストール
+
+```bash
+cd gunjo
+npm install
+```
+
+### 型チェック
+
+```bash
+npm run type-check
+```
+
+## 🚀 ドキュメントサイトの起動
+
+```bash
+npm run dev
+```
+
+ドキュメントサイトは `http://localhost:13030` で起動します。
+
+## 📚 使用方法（ライブラリとして）
+
+### インストール（他のプロジェクトから）
+
+```bash
+# npm から（推奨）
+npm install @gunjo/ui
+
+# ローカルパスで（開発時）
+npm install file:../gunjo
+```
+
+> **重要**：採用先 Next.js では `next.config.ts` に `transpilePackages: ["@gunjo/ui"]` を追加してください（本パッケージは TypeScript ソースを直接配布するため）。詳細は [docs/adoption.md §2](./docs/adoption.md#2-nextjs-設定必須)。
+
+### インポート
+
+```typescript
+// コンポーネント
+import { Button, Input, Card } from '@gunjo/ui';
+
+// スタイル
+import '@gunjo/ui/styles';
+
+// Tailwindプリセット
+import gunjoPreset from '@gunjo/ui/tailwind-preset';
+```
+
+## ✅ 完全独立
+
+- ✅ 他のパッケージへの依存なし
+- ✅ 相対パスはすべて `gunjo/` ディレクトリ内
+- ✅ どこに移動しても動作します
+- ✅ `npm install` で依存関係をインストール可能
+- ✅ ドキュメントサイトも含まれています
+
+## 🤖 AIエディタでの利用
+
+コンポーネントは **AI エディタ（Cursor 等）で読み出して使いやすい** 構成にしています。
+
+- **単一エントリ**: すべての公開 API を `src/index.ts` から re-export しているため、`import { Button, Card } from '@gunjo/ui'` の形で一覧・利用しやすい
+- **TypeScript**: 各コンポーネントの props が型付けされており、補完・推論がしやすい
+- **Atomic Design**: Atoms / Molecules / Organisms / Templates で整理され、役割ごとに検索しやすい
+- **Radix UI ベース**: アクセシビリティ（ARIA・キーボード操作）を考慮した構造で、意味の読み取りがしやすい
+
+利用時は `@gunjo/ui` から必要なコンポーネントを import し、`@gunjo/ui/styles` と Tailwind プリセットを併用してください。
+
+## 📁 構造
+
+```
+gunjo/
+├── src/                    # コンポーネントライブラリ
+│   ├── components/
+│   │   ├── atoms/          # 原子コンポーネント
+│   │   ├── molecules/      # 分子コンポーネント
+│   │   ├── organisms/       # 有機体コンポーネント
+│   │   └── templates/       # テンプレート
+│   ├── lib/                # ユーティリティ
+│   ├── globals.css         # グローバルスタイル
+│   └── index.ts            # エクスポート
+├── docs/                   # ドキュメントサイト（Next.js）
+│   ├── app/                # Next.jsアプリ
+│   ├── components/         # ドキュメント用コンポーネント
+│   └── lib/                # ドキュメント用ユーティリティ
+├── public/                 # 静的ファイル
+├── tailwind-preset.js     # Tailwindプリセット
+├── next.config.ts         # Next.js設定
+├── postcss.config.mjs     # PostCSS設定
+├── package.json
+└── tsconfig.json
+```
+
+## 📝 注意事項
+
+- ライブラリとして使用する場合: `src/` からコンポーネントをインポート
+- ドキュメントサイトを起動する場合: `npm run dev` で起動
+- すべての依存関係は `package.json` に含まれています

package/design/atoms-metadata.json

@@ -0,0 +1,82 @@
+{
+  "button": {
+    "title": "Button",
+    "description": "Displays a button or a component that looks like a button."
+  },
+  "input": {
+    "title": "Input",
+    "description": "Displays a form input field or a component that looks like an input field."
+  },
+  "badge": {
+    "title": "Badge",
+    "description": "Displays a badge or a component that looks like a badge."
+  },
+  "label": {
+    "title": "Label",
+    "description": "Renders an accessible label associated with controls."
+  },
+  "checkbox": {
+    "title": "Checkbox",
+    "description": "A control that allows the user to toggle between checked and not checked."
+  },
+  "separator": {
+    "title": "Separator",
+    "description": "Visually or semantically separates content."
+  },
+  "switch": {
+    "title": "Switch",
+    "description": "A control that allows the user to toggle between checked and not checked."
+  },
+  "textarea": {
+    "title": "Textarea",
+    "description": "Displays a form textarea or a component that looks like a textarea."
+  },
+  "alert": {
+    "title": "Alert",
+    "description": "Displays a callout for user attention."
+  },
+  "avatar": {
+    "title": "Avatar",
+    "description": "An image element with a fallback for representing the user."
+  },
+  "kbd": {
+    "title": "Kbd",
+    "description": "Displays a keyboard shortcut key."
+  },
+  "img": {
+    "title": "Img",
+    "description": "An enhanced image component with loading skeleton and error fallback."
+  },
+  "progress": {
+    "title": "Progress",
+    "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar."
+  },
+  "spinner": {
+    "title": "Spinner",
+    "description": "A visual indicator that content is being loaded."
+  },
+  "radioGroup": {
+    "title": "RadioGroup",
+    "description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time."
+  },
+  "slider": {
+    "title": "Slider",
+    "description": "An input where the user selects a value from within a given range."
+  },
+  "select": {
+    "title": "Select",
+    "description": "Displays a list of options for the user to pick from."
+  },
+  "toggleGroup": {
+    "title": "ToggleGroup",
+    "description": "A set of two-state buttons that can be toggled on or off."
+  },
+  "toolPill": {
+    "title": "ToolPill",
+    "description": "Compact icon pill used for toolbar quick actions with active and danger states."
+  },
+  "skeleton": {
+    "title": "Skeleton",
+    "description": "Loading placeholder for content while it is being fetched."
+  }
+}

package/design/molecules-metadata.json

@@ -0,0 +1,130 @@
+{
+  "card": {
+    "title": "Card",
+    "description": "Displays a card with header, content, and footer."
+  },
+  "list": {
+    "title": "List",
+    "description": "A semantic list component with customizable markers and spacing."
+  },
+  "accordion": {
+    "title": "Accordion",
+    "description": "A vertically stacked set of interactive headings that each reveal a section of content."
+  },
+  "breadcrumb": {
+    "title": "Breadcrumb",
+    "description": "Displays the path to the current resource using a hierarchy of links."
+  },
+  "dropdownMenu": {
+    "title": "Dropdown Menu",
+    "description": "Displays a menu to the user—such as a set of actions or functions—triggered by a button."
+  },
+  "popover": {
+    "title": "Popover",
+    "description": "Displays rich content in a portal, triggered by a button."
+  },
+  "command": {
+    "title": "Command",
+    "description": "Fast, composable, unstyled command menu for React."
+  },
+  "calendar": {
+    "title": "Calendar",
+    "description": "A date field component that allows users to enter and edit date."
+  },
+  "table": {
+    "title": "Table",
+    "description": "A responsive table component."
+  },
+  "tabs": {
+    "title": "Tabs",
+    "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time."
+  },
+  "toast": {
+    "title": "Toast",
+    "description": "Transient feedback message with semantic variants."
+  },
+  "modal": {
+    "title": "Modal",
+    "description": "Dialog surface with header, content, and optional footer actions."
+  },
+  "carousel": {
+    "title": "Carousel",
+    "description": "Embla-powered slider with keyboard and arrow controls."
+  },
+  "pagination": {
+    "title": "Pagination",
+    "description": "Navigation controls for traversing paged content."
+  },
+  "notificationCenter": {
+    "title": "Notification Center",
+    "description": "Popover-based inbox for unread activity and quick actions."
+  },
+  "dialog": {
+    "title": "Dialog",
+    "description": "Centered modal dialog with overlay, header, and footer actions."
+  },
+  "sheet": {
+    "title": "Sheet",
+    "description": "Side panel variant with overlay, heading, and action area."
+  },
+  "tooltip": {
+    "title": "Tooltip",
+    "description": "Compact helper text bubble for hover and focus states."
+  },
+  "hoverCard": {
+    "title": "HoverCard",
+    "description": "Rich hover content with compact profile-like layout."
+  },
+  "contextMenu": {
+    "title": "ContextMenu",
+    "description": "Right-click style action list with labels and nested trigger."
+  },
+  "menubar": {
+    "title": "Menubar",
+    "description": "Top application menu with trigger items and nested submenu entry."
+  },
+  "scrollArea": {
+    "title": "ScrollArea",
+    "description": "Custom scrollbar container with viewport and thumb controls."
+  },
+  "resizable": {
+    "title": "Resizable",
+    "description": "Pane group with draggable handle and optional grip indicator."
+  },
+  "statusBar": {
+    "title": "StatusBar",
+    "description": "Bottom fixed utility bar with left, center and right regions."
+  },
+  "sidebarItem": {
+    "title": "SidebarItem",
+    "description": "Nested sidebar row with chevron, icon, label, and counter area."
+  },
+  "aiChatInput": {
+    "title": "AIChatInput",
+    "description": "Composer row with attachments, autosizing textarea, and send/stop actions."
+  },
+  "aiChatMessage": {
+    "title": "AIChatMessage",
+    "description": "Chat row for user/assistant with avatar, bubble, and action controls."
+  },
+  "filterButton": {
+    "title": "FilterButton",
+    "description": "Filter trigger with dashed border, count badge, and command popover list."
+  },
+  "sortButton": {
+    "title": "SortButton",
+    "description": "Three-state sort trigger (none, asc, desc) with icon + text."
+  },
+  "progressWidget": {
+    "title": "ProgressWidget",
+    "description": "Metric card showing title, value, progress bar, and optional subtext."
+  },
+  "stepper": {
+    "title": "Stepper",
+    "description": "A multi-step progress indicator with completed, current, and upcoming states."
+  },
+  "form": {
+    "title": "Form",
+    "description": "Compound form primitives: Form / FormField / FormLabel / FormControl / FormDescription / FormMessage."
+  }
+}

package/design/organisms-metadata.json

@@ -0,0 +1,38 @@
+{
+  "appRail": {
+    "title": "App Rail",
+    "description": "Primary vertical icon rail used for application-wide navigation."
+  },
+  "commandPalette": {
+    "title": "Command Palette",
+    "description": "Global quick-action launcher with grouped commands and keyboard shortcuts."
+  },
+  "rightRail": {
+    "title": "Right Rail",
+    "description": "Secondary side panel for contextual tools and inspector content."
+  },
+  "floatingPanel": {
+    "title": "Floating Panel",
+    "description": "Animated floating container for transient UI surfaces."
+  },
+  "inspectorPanel": {
+    "title": "Inspector Panel",
+    "description": "Structured side panel for detailed property editing."
+  },
+  "spatialCanvas": {
+    "title": "Spatial Canvas",
+    "description": "Large grid-based interaction surface for node and layout editing."
+  },
+  "shareModal": {
+    "title": "Share Modal",
+    "description": "Dialog for toggling public access and copying shareable URLs."
+  },
+  "fileUploader": {
+    "title": "File Uploader",
+    "description": "Drag-and-drop file intake with compact list rendering."
+  },
+  "toastProvider": {
+    "title": "Toast Provider",
+    "description": "Global toast stack manager for showing transient feedback messages."
+  }
+}

package/design/templates-metadata.json

@@ -0,0 +1,38 @@
+{
+  "dashboardTemplate": {
+    "title": "Dashboard Template",
+    "description": "Two-column dashboard shell with optional header and sidebar."
+  },
+  "editorTemplate": {
+    "title": "Editor Template",
+    "description": "Panel-based editing layout with top bar and side docks."
+  },
+  "landingTemplate": {
+    "title": "Landing Template",
+    "description": "Marketing page skeleton with sticky header and section rhythm."
+  },
+  "authTemplate": {
+    "title": "Auth Template",
+    "description": "Split authentication layout with branded panel and centered form."
+  },
+  "kanbanTemplate": {
+    "title": "Kanban Template",
+    "description": "Board workflow shell with optional sidebar and horizontal columns."
+  },
+  "chatTemplate": {
+    "title": "Chat Template",
+    "description": "Conversation layout with channel rail, message area, and detail pane."
+  },
+  "settingsTemplate": {
+    "title": "Settings Template",
+    "description": "Responsive settings layout with mobile stack and desktop split view."
+  },
+  "bannalyzeTemplate": {
+    "title": "Bannalyze Template",
+    "description": "Three-region analysis workspace with center canvas and side inspectors."
+  },
+  "mediaLibraryTemplate": {
+    "title": "Media Library Template",
+    "description": "Asset management workspace with folders, grid area, and details pane."
+  }
+}

package/package.json

@@ -0,0 +1,158 @@
+{
+  "name": "@gunjo/ui",
+  "version": "0.0.1-alpha.0",
+  "description": "GunjoUI — SSOT-driven React + Tailwind design system. Pen / source / docs three-axis verified. Early alpha: API may change. See docs/adoption.md to consume from another project.",
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwindcss",
+    "radix-ui",
+    "shadcn",
+    "ssot"
+  ],
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/globals.css",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tailwind-theme-extend": "./tailwind-theme-extend.cjs"
+  },
+  "files": [
+    "src",
+    "tailwind-preset.js",
+    "tailwind-theme-extend.cjs",
+    "design/atoms-metadata.json",
+    "design/molecules-metadata.json",
+    "design/organisms-metadata.json",
+    "design/templates-metadata.json"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit --incremental false",
+    "dev": "next dev -p 13030",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "prepare": "npm run hooks:install",
+    "hooks:install": "node scripts/install-git-hooks.mjs",
+    "design:sync": "node scripts/design-sync.mjs",
+    "design:sync:tokens": "node scripts/design-sync.mjs --tokens",
+    "design:sync:metadata": "node scripts/design-sync.mjs --metadata",
+    "design:sync:components": "node scripts/design-sync.mjs --components",
+    "design:sync:docs-navigation": "node scripts/design-sync.mjs --docs-navigation",
+    "design:sync:docs-pages": "node scripts/design-sync.mjs --docs-pages",
+    "design:sync:docs-pages:refresh": "node scripts/design-sync.mjs --docs-pages --refresh-generated",
+    "design:sync:stubs": "node scripts/design-sync.mjs --stubs",
+    "design:sync:stubs:refresh": "node scripts/design-sync.mjs --stubs --refresh-generated",
+    "design:sync:stubs:production": "node scripts/design-sync.mjs --stubs --production-stubs",
+    "design:sync:stubs:production:refresh": "node scripts/design-sync.mjs --stubs --refresh-generated --production-stubs",
+    "design:sync:from-metadata": "node scripts/design-sync.mjs --from-metadata",
+    "design:verify": "node scripts/design-verify.mjs",
+    "design:verify:metadata-map": "node scripts/design-verify-metadata-map-coverage.mjs",
+    "design:verify:coverage": "node scripts/design-verify-spec-coverage.mjs",
+    "design:verify:docs-metadata": "node scripts/design-verify-docs-metadata-coverage.mjs",
+    "design:verify:docs-content-ssot": "node scripts/design-verify-docs-content-ssot.mjs",
+    "design:verify:docs-navigation": "node scripts/design-verify-docs-navigation-coverage.mjs",
+    "design:verify:docs-spec-imports": "node scripts/design-verify-docs-spec-imports.mjs",
+    "design:verify:nav-translations": "node scripts/design-verify-nav-translation-coverage.mjs",
+    "design:verify:node-snapshots": "node scripts/design-verify-node-snapshot-coverage.mjs",
+    "design:verify:slot-nodes": "node scripts/design-verify-slot-node-coverage.mjs",
+    "design:verify:atom-variant-keys": "node scripts/design-verify-atom-variant-key-coverage.mjs",
+    "design:verify:atom-generated-variant-keys": "node scripts/design-verify-atom-generated-variant-key-coverage.mjs",
+    "design:verify:atom-generated-variant-key-usage": "node scripts/design-verify-atom-generated-variant-key-usage.mjs",
+    "design:verify:molecule-variant-keys": "node scripts/design-verify-molecule-variant-key-coverage.mjs",
+    "design:verify:molecule-generated-variant-key-usage": "node scripts/design-verify-molecule-generated-variant-key-usage.mjs",
+    "design:verify:default-variant-keys": "node scripts/design-verify-default-variant-key-coverage.mjs",
+    "design:verify:default-variant-key-usage": "node scripts/design-verify-default-variant-key-usage.mjs",
+    "design:verify:component-style-hints": "node scripts/design-verify-component-style-hints-coverage.mjs",
+    "design:verify:component-style-drift-report": "node scripts/design-verify-component-style-drift-report.mjs",
+    "design:verify:component-style-drift": "node scripts/design-verify-component-style-drift-report.mjs --strict",
+    "design:verify:component-style-drift:scoped": "node scripts/design-verify-component-style-drift-report.mjs --strict --strict-target-policy",
+    "design:verify:hardcoded-color-classes": "node scripts/design-verify-hardcoded-color-classes.mjs",
+    "design:verify:tailwind-color-tokens": "node scripts/design-verify-tailwind-color-tokens.mjs",
+    "design:verify:tailwind-foundation-tokens": "node scripts/design-verify-tailwind-foundation-tokens.mjs",
+    "design:verify:tailwind-theme-ssot": "node scripts/design-verify-tailwind-theme-ssot.mjs",
+    "design:verify:tailwind-preset-plugins": "node scripts/design-verify-tailwind-preset-plugins.mjs",
+    "design:verify:css-vars": "node scripts/design-verify-css-variable-coverage.mjs",
+    "design:verify:app-globals": "node scripts/design-verify-app-globals-sync.mjs",
+    "design:verify:generated-stubs": "node scripts/design-verify-generated-stub-coverage.mjs",
+    "design:verify:generated-stubs:report": "node scripts/design-verify-generated-stub-coverage.mjs --report",
+    "design:verify:generated-docs-pages": "node scripts/design-verify-generated-docs-page-coverage.mjs",
+    "design:verify:generated-docs-pages:report": "node scripts/design-verify-generated-docs-page-coverage.mjs --report",
+    "design:verify:generated-artifacts:report": "node scripts/design-verify-generated-artifacts-report.mjs",
+    "design:verify:ssot-progress-report": "node scripts/design-verify-ssot-progress-report.mjs",
+    "design:verify:ssot-progress-report:json": "node scripts/design-verify-ssot-progress-report.mjs --json",
+    "design:verify:ssot-progress-summary": "node scripts/design-verify-ssot-progress-summary.mjs",
+    "design:verify:ssot-progress-diff": "node scripts/design-verify-ssot-progress-diff.mjs",
+    "design:verify:ssot-progress-regressions": "node scripts/design-verify-ssot-progress-regressions.mjs",
+    "design:verify:ssot-progress-regression-summary": "node scripts/design-verify-ssot-progress-regression-summary.mjs",
+    "design:verify:ssot-progress-pr-comment": "node scripts/design-verify-ssot-progress-pr-comment.mjs",
+    "design:verify:ssot-progress-thresholds": "node scripts/design-verify-ssot-progress-thresholds.mjs",
+    "design:verify:ssot-pr-comment-docs": "node scripts/design-verify-ssot-pr-comment-docs.mjs",
+    "design:report:component-coverage": "node scripts/design-generate-component-coverage-matrix.mjs",
+    "design:audit:docs-capture": "node scripts/design-capture-doc-component-screenshots.mjs",
+    "design:audit:checklist": "node scripts/design-generate-visual-audit-checklist.mjs",
+    "design:audit:refresh": "npm run -s design:audit:docs-capture && npm run -s design:audit:checklist",
+    "design:verify:components": "node scripts/design-verify-components.mjs",
+    "design:verify:molecules": "node scripts/design-verify-molecule-drift.mjs",
+    "design:verify:organisms": "node scripts/design-verify-organism-drift.mjs",
+    "design:verify:templates": "node scripts/design-verify-template-drift.mjs"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.0.0 || ^4.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.0.0",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.0.11",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^3.20.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.0",
+    "postcss": "^8.5.6",
+    "puppeteer": "^24.41.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/src/components/atoms/Alert.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import type { AlertVariantKey } from "./generated/variant-keys"
+import { alertDefaultVariantKey } from "./generated/default-variant-keys"
+
+const alertVariantClasses: Record<AlertVariantKey, string> = {
+    default: "border-border bg-background text-foreground",
+    destructive:
+        "border-destructive/20 bg-destructive/10 text-destructive [&>svg]:text-destructive",
+}
+
+const alertVariants = cva(
+    "relative inline-flex h-fit w-[320px] max-w-full items-center gap-1 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+    {
+        variants: {
+            variant: alertVariantClasses,
+        },
+        defaultVariants: {
+            variant: alertDefaultVariantKey,
+        },
+    }
+)
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+        {...props}
+    />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }