# BlueAI デザインシステム

> マルナゲ プロダクト共通の UI コンポーネントライブラリ。`@blueai/ui` パッケージとして全アプリで利用。

## コンポーネント

### フォームと入力
- Button: ボタン。バリアント（primary, secondary, danger, ghost）とサイズを指定可能
- FormInput: テキスト入力。label, error, multiline 対応。onChange は (value: string) を受け取る
- FormSelect: セレクト。onChange は (value: string) を受け取る。children に <option> を配置
- Combobox: 検索可能なセレクト
- Checkbox: チェックボックス
- RadioGroup: ラジオボタングループ
- ColorInput: カラーピッカー入力
- Range: レンジスライダー
- FileInput: ファイルアップロード入力
- DatePicker: 日付入力
- SearchInput: 検索入力
- Toggle: オン/オフ トグルスイッチ
- FileDropZone: ドラッグ&ドロップ ファイルアップロード
- MultiSelect: 複数選択コンポーネント

### データ表示
- Badge: バッジ
- StatusBadge: ステータスバッジ（色バリアント付き）
- StatusDot: ステータスドット
- CodeBlock: シンタックスハイライト付きコード表示
- DataTable: ソート・ページネーション付きデータテーブル
- StatCard: 統計カード
- DetailPage: 詳細ページレイアウト
- DetailRow: キー・バリュー形式の詳細行
- EmptyState: 空状態プレースホルダー
- Spinner: ローディングスピナー
- Avatar: アバター表示
- Card: カードコンテナ
- Tag: 削除可能なタグ
- Skeleton: ローディングスケルトン
- Timeline: 縦型タイムライン
- ProgressBar: プログレスバー
- Divider: 水平区切り線
- LineItemTable: 編集可能な明細テーブル
- FilePreview: ファイルプレビュー

### ナビゲーション
- TabButton: タブボタン
- TabFilterBar: タブフィルターバー
- BackLink: 戻るリンク
- Breadcrumb: パンくずリスト
- Pagination: ページネーション
- Stepper: ステッパー（複数ステップ進捗表示）
- Accordion: アコーディオン（折りたたみ）

### オーバーレイ
- Modal: モーダルダイアログ
- SlidePanel: スライドパネル
- Tooltip: ツールチップ
- CommandPalette: コマンドパレット（⌘K）
- ContextMenu: コンテキストメニュー
- Popover: ポップオーバー
- ConfirmDialog: 確認ダイアログ

### フィードバック
- Alert: アラートバナー
- CopyButton: コピーボタン
- Toast: トースト通知
- Snackbar: スナックバー
- InlineConfirm: インライン確認アクション

### その他
- RichTextDisplay: リッチテキスト表示

## フック
- useForm: Zod スキーマによるフォーム状態管理
- useListFilter: リストフィルタリング

## ユーティリティ
- formatDate: 日付フォーマット
- formatYen: 日本円フォーマット
- formatFileSize: ファイルサイズフォーマット

## インポート
すべてのコンポーネントは `@blueai/ui` からインポート:
```
import { Button, FormInput, DataTable } from "@blueai/ui";
```

## リンク
- デザインシステム: https://design.blueai.co.jp
- API ドキュメント: https://docs.blueai.jp/api