kaze-design-system 0.4.0 → 0.4.2

package/README.md

@@ -3,11 +3,49 @@
 [![npm version](https://img.shields.io/npm/v/kaze-design-system)](https://www.npmjs.com/package/kaze-design-system)
 [![GitHub](https://img.shields.io/github/license/yuki930/kaze-design-system)](https://github.com/yuki930/kaze-design-system/blob/main/LICENSE)
 
-Zinc ベースのミニマルデザインシステム。日本語組版に最適化。React 19 + TypeScript、62 コンポーネント、ライト/ダーク両対応。
+**Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 63 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
 
-- **Docs**: https://kaze-design-system.vercel.app/docs/components
-- **npm**: https://www.npmjs.com/package/kaze-design-system
-- **GitHub**: https://github.com/yuki930/kaze-design-system
+- 🎨 **63 コンポーネント** — フォーム、テーブル、チャート、ダッシュボード UI、ランディングページ、マーケティングパーツまで
+- 🌏 **日本語組版に最適化** — PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
+- 🌓 **ライト / ダーク両対応** — `data-theme` 属性で切替、`prefers-color-scheme` 連動
+- 🎯 **素の CSS + カスケードレイヤー** — `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
+- 📦 **ESM only + Tree-shakeable** — React 19 + TypeScript、peer deps は `react`, `react-dom`, `lucide-react` のみ
+- 🤖 **AI フレンドリー** — [`/llms.txt`](https://kaze-design-system.vercel.app/llms.txt) で全コンポーネント API を 1 ファイル配信
+
+## 🚀 Links
+
+| | |
+|---|---|
+| **ライブプレビュー (ショーケース)** | https://kaze-design-system.vercel.app |
+| **コンポーネントドキュメント** | https://kaze-design-system.vercel.app/docs/components |
+| **サンプルページギャラリー** | https://kaze-design-system.vercel.app/gallery |
+| **npm パッケージ** | https://www.npmjs.com/package/kaze-design-system |
+| **GitHub** | https://github.com/yuki930/kaze-design-system |
+
+## 🖼 Live Examples
+
+実際のアプリケーション/ページ単位のサンプル実装。Vercel にデプロイされています:
+
+### ダッシュボード / 管理画面
+- [**分析ダッシュボード**](https://kaze-design-system.vercel.app/dashboard) — メトリック、チャート、テーブル組み合わせ
+- [**Analytics**](https://kaze-design-system.vercel.app/analytics) — KPI 一覧、BarList、Tracker
+- [**SaaS Stats**](https://kaze-design-system.vercel.app/saas-stats) — SaaS 系ダッシュボード
+- [**EC ダッシュボード**](https://kaze-design-system.vercel.app/ec-dashboard) — EC 管理画面
+- [**設定画面**](https://kaze-design-system.vercel.app/settings) — フォーム・FormField 活用例
+
+### ランディング・マーケティング
+- [**LP (SaaS)**](https://kaze-design-system.vercel.app/lp) — Hero, Features, Pricing, Testimonial, FAQ, CTA
+- [**LP 2**](https://kaze-design-system.vercel.app/lp2) — 異なる雰囲気の LP
+- [**Pricing**](https://kaze-design-system.vercel.app/pricing) — 料金プラン
+- [**Blog**](https://kaze-design-system.vercel.app/blog) — 記事一覧・記事詳細
+- [**Jobs**](https://kaze-design-system.vercel.app/jobs) — 求人ページ
+
+### アプリケーション
+- [**Login**](https://kaze-design-system.vercel.app/login) — 認証画面
+- [**Todo**](https://kaze-design-system.vercel.app/todo) — シンプルな Todo アプリ
+- [**Shopping**](https://kaze-design-system.vercel.app/shopping) — EC 商品一覧
+- [**Article**](https://kaze-design-system.vercel.app/article) — 記事ページ
+- [**Help**](https://kaze-design-system.vercel.app/help) — ヘルプセンター
 
 > **ESM only** — このパッケージは ES Modules のみを提供します。
 > `"type": "module"` が設定された環境、または ESM 対応バンドラー（Vite, Next.js, webpack 5+）で使用してください。
@@ -79,7 +117,7 @@ function App() {
 }
 ```
 
-## コンポーネント一覧（62 コンポーネント）
+## コンポーネント一覧（63 コンポーネント）
 
 | カテゴリ | コンポーネント |
 |---|---|
@@ -87,12 +125,14 @@ function App() {
 | **データ表示** | Card, Badge, StatusBadge, Table, Metric, Avatar, BarList, Tracker, Watermark |
 | **チャート** | BarChart, DonutChart, Sparkline |
 | **フィードバック** | Alert, Progress, Meter, Skeleton, EmptyState, Toast |
-| **ナビゲーション** | Tabs, Sidebar, TopBar, Breadcrumb, Pagination, Stepper |
+| **ナビゲーション** | Tabs, Sidebar, TopBar, Breadcrumb, Pagination, Stepper, Disclosure |
 | **オーバーレイ** | Dialog, Tooltip, HelpButton, Dropdown, CommandPalette |
 | **レイアウト** | AppLayout, Divider, Grid, Search, Logo, Icon, Heading, Text |
 | **リスト** | List, DescriptionList, Timeline |
 | **マーケティング** | Navbar, Hero, Section, SplitSection, FeatureGrid, Stats, Pricing, Testimonial, FAQ, CTABanner, LPFooter |
 
+詳細は [kaze-design-system.vercel.app/docs/components](https://kaze-design-system.vercel.app/docs/components) を参照してください。
+
 ## Hooks
 
 ```tsx

package/dist/components/FilterPill/FilterPill.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const FilterPill = forwardRef(
-  ({ active, color, dot, className, style, children, ...rest }, ref) => {
+  ({ active = false, color, dot, className, style, children, ...rest }, ref) => {
     const pillStyle = color ? { ...style, "--filter-pill-color": color } : style;
     return /* @__PURE__ */ jsxs(
       "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/yuki930/kaze-design-system/issues"
   },
-  "description": "Zinc-based minimal design system optimized for Japanese typography and financial UI",
+  "description": "Minimal React design system for dashboards and Japanese UI — quiet neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
   "keywords": [
     "design-system",
     "react",
@@ -62,6 +62,9 @@
     "prebuild": "node scripts/generate-llms.mjs",
     "build": "next build",
     "docs:llms": "node scripts/generate-llms.mjs",
+    "docs:stories": "node scripts/generate-stories.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "start": "next start",
     "build:lib": "rm -rf dist && vite build --config vite.config.lib.ts && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",