kaze-design-system 0.4.2 → 0.6.1

package/README.md

@@ -5,14 +5,14 @@
 
 **Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 63 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
 
-- 🎨 **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 ファイル配信
+- **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 18 / 19 + TypeScript、peer deps は `react`, `react-dom`（`lucide-react` は任意）のみ
+- **AI フレンドリー**: [`/llms.txt`](https://kaze-design-system.vercel.app/llms.txt) で全コンポーネント API を 1 ファイル配信
 
-## 🚀 Links
+## Links
 
 | | |
 |---|---|
@@ -22,32 +22,32 @@
 | **npm パッケージ** | https://www.npmjs.com/package/kaze-design-system |
 | **GitHub** | https://github.com/yuki930/kaze-design-system |
 
-## 🖼 Live Examples
+## 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 活用例
+- [**分析ダッシュボード**](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) — 求人ページ
+- [**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) — ヘルプセンター
+- [**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 のみを提供します。
+> **ESM only**: このパッケージは ES Modules のみを提供します。
 > `"type": "module"` が設定された環境、または ESM 対応バンドラー（Vite, Next.js, webpack 5+）で使用してください。
 
 ## For AI assistants (Claude / Cursor / ChatGPT)
@@ -57,7 +57,7 @@ AI コーディングアシスタントは以下のファイルからライブ
 - **Short index**: https://kaze-design-system.vercel.app/llms.txt
 - **Full API reference**: https://kaze-design-system.vercel.app/llms-full.txt
 
-`llms-full.txt` には 62 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
+`llms-full.txt` には 63 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
 
 ## インストール
 
@@ -65,7 +65,7 @@ AI コーディングアシスタントは以下のファイルからライブ
 npm install kaze-design-system
 ```
 
-Peer dependencies: `react@^19`, `react-dom@^19`, `lucide-react`
+Peer dependencies: `react@^18 || ^19`, `react-dom@^18 || ^19`。`lucide-react` は任意（`Icon` に lucide のアイコンを渡す場合やサンプルコードで使用。コンポーネント本体は lucide なしで動きます）
 
 ## CSS の読み込み
 
@@ -117,8 +117,26 @@ function App() {
 }
 ```
 
+## レイヤー構成
+
+kaze は1パッケージ・3レイヤーで構成されています。
+
+- **Foundation**: デザイントークン（カラー・タイポグラフィ・スペーシング）と CSS。両レイヤー共通の土台
+- **Application UI**: 管理画面・アプリ向けの52コンポーネント。`kaze-design-system` から import
+- **Marketing**: LP・キャンペーンページ向けの11コンポーネント。`kaze-design-system/marketing` から import
+
+```tsx
+// Application UI
+import { Table, Sidebar, CommandPalette } from "kaze-design-system";
+
+// Marketing（ルートからの import も引き続き使えます）
+import { Hero, PricingGrid, CTABanner } from "kaze-design-system/marketing";
+```
+
 ## コンポーネント一覧（63 コンポーネント）
 
+### Application UI（52）
+
 | カテゴリ | コンポーネント |
 |---|---|
 | **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField, FilterPill |
@@ -129,6 +147,11 @@ function App() {
 | **オーバーレイ** | Dialog, Tooltip, HelpButton, Dropdown, CommandPalette |
 | **レイアウト** | AppLayout, Divider, Grid, Search, Logo, Icon, Heading, Text |
 | **リスト** | List, DescriptionList, Timeline |
+
+### Marketing（11）
+
+| カテゴリ | コンポーネント |
+|---|---|
 | **マーケティング** | 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) を参照してください。
@@ -136,13 +159,30 @@ function App() {
 ## Hooks
 
 ```tsx
-import { ThemeProvider, useTheme, useFocusTrap } from "kaze-design-system";
-import { useLegendToggle } from "kaze-design-system/hooks";
+import { ThemeProvider, useTheme } from "kaze-design-system";
+import { useFocusTrap, useLegendToggle } from "kaze-design-system/hooks";
 ```
 
-- `useTheme` — ライト/ダークの切り替え
-- `useFocusTrap` — モーダル向けフォーカストラップ
-- `useLegendToggle` — Recharts の凡例クリックで系列 show/hide を切り替え
+- `useTheme`: ライト/ダークの切り替え
+- `useFocusTrap`: モーダル向けフォーカストラップ
+- `useLegendToggle`: Recharts の凡例クリックで系列 show/hide を切り替え
+
+## バンドルサイズ
+
+63 コンポーネント全部込みで **JS 38 kB gzip + CSS 23 kB gzip ≒ 61 kB gz**。ただし、個別 import すれば使った分だけが bundle に入ります。
+
+| 区分 | 生サイズ | gzip |
+|---|---:|---:|
+| JS: 全コンポーネント合計 (tree-shake 対象) | 110 kB | **38 kB** |
+| JS: 最大 (CommandPalette) | 6.4 kB | 1.9 kB |
+| JS: 中央値 (StatusBadge) | 896 B | 476 B |
+| JS: 最小 (Textarea) | 481 B | 280 B |
+| CSS: `tokens.css` | 20.1 kB | 4.9 kB |
+| CSS: `components.css` | 101 kB | 13.6 kB |
+| CSS: `utilities.css` | 18.9 kB | 3.4 kB |
+| CSS: `reset.css` | 3.7 kB | 1.1 kB |
+
+`npm run size` でローカルで最新のサイズを計測できます。React / lucide-react 等の peer dependencies は含まれていません。
 
 ## デザイントークン
 
@@ -153,12 +193,33 @@ CSS カスタムプロパティベース:
 - タイポグラフィ: `--font-size-*`, `--font-weight-*`
 - ボーダー: `--radius-*`
 - シャドウ: `--shadow-*`
+- 密度: `--density-*`（コントロール高さ・行パディング・UI フォントサイズ。下記「密度」参照）
+
+JS から値を参照したい場合は `kaze-design-system/tokens` から import できます。
+
+```ts
+import { space } from "kaze-design-system/tokens";
+```
 
 ## テーマ（ライト / ダーク）
 
 `data-theme="light"` / `data-theme="dark"` で切り替え。
 `ThemeProvider` で自動管理。`prefers-color-scheme` による OS 設定連動にも対応。
 
+`data-palette="cool"` を付けると warm zinc から cool slate のパレットに切り替わります（ライト / ダークどちらとも併用可）。
+
+## 密度（Density）
+
+`data-density="compact"` を祖先要素（`<html>` やパネル単位）に付けると、Input / Select / Table / List / Tabs / Dropdown / Sidebar などが詰まった表示になります。テーマ・パレットとは独立に組み合わせられます。
+
+```html
+<html data-theme="dark" data-density="compact">
+```
+
+## CSS のレイヤーについて
+
+`css/all`（`kaze.css`）は `@layer tokens, reset, components, utilities` でラップされています。`css/components` などを個別に読み込むとレイヤーは付きません。また、レイヤー外のスタイル（CSS Modules など）は常にレイヤー内のスタイルより優先されます。
+
 ## 開発
 
 ```bash
@@ -168,11 +229,13 @@ npm run build:lib     # ライブラリビルド（dist/ に出力）
 npm run docs:llms     # llms.txt / llms-full.txt を再生成
 npm run storybook     # Storybook 起動
 npm run typecheck     # TypeScript 型チェック
+npm run test          # ユニットテスト（jsdom）
+npm run test:storybook # Storybook ブラウザテスト（Playwright）
 ```
 
 ### リリース
 
-main への push 時に GitHub Actions が自動で `npm version patch` → build → `npm publish` を実行します。ライブラリ本体（`src/components/**`, `src/hooks/**`, CSS ファイル等）への変更がある場合のみトリガーされます。
+main への push 時に GitHub Actions が Conventional Commits からバージョン（patch / minor / major）を判定し、build → `npm publish` → release コミットとタグの push を実行します。ライブラリ本体（`src/components/**`, `src/hooks/**`, CSS ファイル、`package.json` 等）への変更がある場合のみトリガーされます。詳しくは [CONTRIBUTING.md](./CONTRIBUTING.md) を参照してください。
 
 ## コントリビュート
 

package/components.css

@@ -65,9 +65,9 @@
 }
 
 .btn--md {
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-4);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
 }
 
 .btn--lg {
@@ -290,9 +290,9 @@
 .input {
   display: flex;
   width: 100%;
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-3);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
   border-radius: var(--radius-field);
@@ -322,10 +322,10 @@
 .select {
   display: flex;
   width: 100%;
-  height: 2.25rem;
+  height: var(--density-control-height);
   padding-inline: var(--space-3);
   padding-right: var(--space-8);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
   border-radius: var(--radius-field);
@@ -348,6 +348,11 @@
 [data-theme="dark"] .select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+}
 
 /* ── Textarea ────────────────────────────────────────────── */
 .textarea {
@@ -355,7 +360,7 @@
   width: 100%;
   min-height: 5rem;
   padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   line-height: var(--line-height-relaxed);
   background-color: var(--color-bg-tertiary);
   border: 1px solid transparent;
@@ -453,10 +458,20 @@
 [data-theme="dark"] .checkbox__input:checked {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .checkbox__input:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  }
+}
 
 [data-theme="dark"] .checkbox__input:indeterminate {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .checkbox__input:indeterminate {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
+  }
+}
 
 /* ── Radio ───────────────────────────────────────────────── */
 .radio {
@@ -611,7 +626,8 @@
 
 .table {
   width: 100%;
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
+  line-height: var(--density-line-height-ui);
 }
 
 .table th {
@@ -621,12 +637,12 @@
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wider);
   color: var(--color-fg-tertiary);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--density-row-py) var(--density-row-px);
   border-bottom: 1px solid var(--color-border);
 }
 
 .table td {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--density-row-py) var(--density-row-px);
   border-bottom: 1px solid var(--color-border-subtle);
   color: var(--color-fg);
   vertical-align: middle;
@@ -685,6 +701,11 @@
 [data-theme="dark"] .avatar img {
   filter: brightness(0.85) contrast(1.1);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .avatar img {
+    filter: brightness(0.85) contrast(1.1);
+  }
+}
 
 /* ── Tabs ────────────────────────────────────────────────── */
 .tabs {
@@ -697,8 +718,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  padding: var(--density-tab-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   font-weight: var(--font-weight-normal);
   color: var(--color-fg-tertiary);
   cursor: pointer;
@@ -750,9 +771,9 @@
 .nav-item {
   display: flex;
   align-items: center;
-  gap: var(--space-2-5);
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
+  gap: var(--density-nav-gap);
+  padding: var(--density-nav-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   font-weight: var(--font-weight-medium);
   color: var(--color-fg-tertiary);
   border-radius: var(--radius-md);
@@ -1398,12 +1419,7 @@
 .feature-card__icon {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--radius-lg);
-  background: var(--color-bg-tertiary);
-  color: var(--color-fg);
+  color: var(--color-fg-secondary);
   margin-bottom: var(--space-4);
 }
 
@@ -2266,14 +2282,19 @@
 
 /* ── Prose: mark ───────────────────────────────────────────── */
 .prose mark {
-  background: var(--color-amber-100);
+  background: var(--amber-100);
   color: inherit;
   padding: var(--space-0-5) var(--space-1);
   border-radius: var(--radius-sm);
 }
 
 [data-theme="dark"] .prose mark {
-  background: var(--color-amber-900);
+  background: var(--amber-900);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .prose mark {
+    background: var(--amber-900);
+  }
 }
 
 /* ── Prose: kbd ────────────────────────────────────────────── */
@@ -2593,8 +2614,9 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3) 0;
-  font-size: var(--font-size-sm);
+  padding: var(--density-row-py) 0;
+  font-size: var(--density-font-size-ui);
+  line-height: var(--density-line-height-ui);
   color: var(--color-fg);
 }
 
@@ -2634,7 +2656,7 @@
 .list-item--interactive {
   cursor: pointer;
   border-radius: var(--radius-md);
-  padding: var(--space-3) var(--space-3);
+  padding: var(--density-row-py) var(--space-3);
   transition: background var(--duration-fast) var(--ease-default);
 }
 
@@ -3204,6 +3226,13 @@
   line-height: var(--line-height-relaxed);
 }
 
+.alert--default {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+.alert--default .alert__icon { color: var(--color-fg-secondary); }
+
 .alert--info {
   background: var(--color-info-light);
   border-color: var(--color-info);
@@ -3552,6 +3581,7 @@
   align-items: center;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
+  height: var(--density-control-height);
   background: var(--color-surface);
   transition: border-color var(--duration-normal) var(--ease-default),
               box-shadow var(--duration-normal) var(--ease-default);
@@ -3576,11 +3606,12 @@
   min-width: 0;
   border: none;
   background: transparent;
+  height: 100%;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  font-size: var(--density-font-size-ui);
   font-variant-numeric: tabular-nums;
   color: var(--color-fg);
-  padding: var(--space-2) var(--space-2);
+  padding: 0 var(--space-2);
   text-align: right;
   outline: none;
 }
@@ -3607,7 +3638,7 @@
   align-items: center;
   justify-content: center;
   width: 32px;
-  height: 36px;
+  height: 100%;
   border: none;
   background: var(--color-bg-secondary);
   color: var(--color-fg-secondary);
@@ -3880,6 +3911,14 @@
   color: var(--color-warning);
 }
 
+.toast--info {
+  border-left: 3px solid var(--color-info);
+}
+
+.toast--info .toast__icon {
+  color: var(--color-info);
+}
+
 /* ── Dropdown ───────────────────────────────────────────── */
 
 .dropdown__menu {
@@ -3902,8 +3941,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--space-1-5) var(--space-3);
-  font-size: var(--font-size-sm);
+  padding: var(--density-dropdown-py) var(--space-3);
+  font-size: var(--density-font-size-ui);
   border-radius: var(--radius-md);
   cursor: pointer;
   color: var(--color-fg);
@@ -4016,8 +4055,8 @@
 .help-button:hover,
 .help-button[aria-expanded="true"] {
   color: var(--color-fg);
-  border-color: var(--color-border-strong, var(--color-fg-tertiary));
-  background: var(--color-bg-subtle, var(--color-bg));
+  border-color: var(--color-border-strong);
+  background: var(--color-surface-hover);
 }
 
 .help-button:focus-visible {
@@ -4118,7 +4157,7 @@
 }
 
 .disclosure__trigger:hover:not(:disabled) {
-  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
+  background: var(--color-surface-hover);
 }
 
 .disclosure__trigger:focus-visible {

package/dist/components/Alert/Alert.js

@@ -2,22 +2,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Alert = forwardRef(
-  ({ variant = "info", icon, title, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: cn("alert", `alert--${variant}`, className),
-      ...rest,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "alert__icon", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "alert__content", children: [
-          title && /* @__PURE__ */ jsx("p", { className: "alert__title", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "alert__description", children })
-        ] })
-      ]
-    }
-  )
+  ({ variant = "info", icon, title, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn("alert", `alert--${variant}`, className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "alert__icon", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "alert__content", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "alert__title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "alert__description", children })
+    ] })
+  ] })
 );
 Alert.displayName = "Alert";
 export {

package/dist/components/Badge/Badge.js

@@ -8,12 +8,7 @@ const Badge = forwardRef(
       {
         ref,
         ...live ? { role: "status" } : {},
-        className: cn(
-          "badge",
-          `badge--${variant}`,
-          solid && "badge--solid",
-          className
-        ),
+        className: cn("badge", `badge--${variant}`, solid && "badge--solid", className),
         ...rest,
         children: [
           dot && /* @__PURE__ */ jsx("span", { className: "badge__dot", "aria-hidden": "true" }),

package/dist/components/BarChart/BarChart.js

@@ -6,21 +6,25 @@ const BarChart = forwardRef(
   ({ data, max, formatValue, "aria-label": ariaLabel, className, ...rest }, ref) => {
     const maxVal = max ?? Math.max(...data.map((d) => d.value));
     const fmt = formatValue ?? ((v) => String(v));
-    return /* @__PURE__ */ jsx("div", { ref, role: "img", "aria-label": ariaLabel, className: cn("bar-chart", className), ...rest, children: data.map((item, i) => {
-      const pct = maxVal > 0 ? item.value / maxVal * 100 : 0;
-      const color = item.color ?? CHART_COLORS[i % CHART_COLORS.length];
-      return /* @__PURE__ */ jsxs("div", { className: "bar-chart__item", children: [
-        /* @__PURE__ */ jsx("span", { className: "bar-chart__label", children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: "bar-chart__track", children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "bar-chart__fill",
-            style: { width: `${pct}%`, background: color }
-          }
-        ) }),
-        /* @__PURE__ */ jsx("span", { className: "bar-chart__value", children: fmt(item.value) })
-      ] }, item.label);
-    }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("bar-chart", className),
+        ...rest,
+        children: data.map((item, i) => {
+          const pct = maxVal > 0 ? item.value / maxVal * 100 : 0;
+          const color = item.color ?? CHART_COLORS[i % CHART_COLORS.length];
+          return /* @__PURE__ */ jsxs("div", { className: "bar-chart__item", children: [
+            /* @__PURE__ */ jsx("span", { className: "bar-chart__label", children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: "bar-chart__track", children: /* @__PURE__ */ jsx("span", { className: "bar-chart__fill", style: { width: `${pct}%`, background: color } }) }),
+            /* @__PURE__ */ jsx("span", { className: "bar-chart__value", children: fmt(item.value) })
+          ] }, item.label);
+        })
+      }
+    );
   }
 );
 BarChart.displayName = "BarChart";

package/dist/components/BarList/BarList.js

@@ -2,13 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const BarList = forwardRef(
-  ({
-    data,
-    sortOrder = "descending",
-    valueFormatter,
-    className,
-    ...rest
-  }, ref) => {
+  ({ data, sortOrder = "descending", valueFormatter, className, ...rest }, ref) => {
     const sorted = sortOrder === "none" ? data : [...data].sort(
       (a, b) => sortOrder === "ascending" ? a.value - b.value : b.value - a.value
     );
@@ -33,15 +27,7 @@ const BarList = forwardRef(
         /* @__PURE__ */ jsx("span", { className: "barlist__value", children: display })
       ] });
       const LinkComponent = item.as ?? "a";
-      return item.href ? /* @__PURE__ */ jsx(
-        LinkComponent,
-        {
-          href: item.href,
-          className: "barlist__row barlist__row--link",
-          children: content
-        },
-        i
-      ) : /* @__PURE__ */ jsx("div", { className: "barlist__row", children: content }, i);
+      return item.href ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: "barlist__row barlist__row--link", children: content }, i) : /* @__PURE__ */ jsx("div", { className: "barlist__row", children: content }, i);
     }) });
   }
 );

package/dist/components/Card/Card.js

@@ -33,9 +33,11 @@ const CardTitle = forwardRef(
   }
 );
 CardTitle.displayName = "CardTitle";
-const CardDescription = forwardRef(({ className, children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx("p", { ref, className: cn("card__description", className), ...rest, children });
-});
+const CardDescription = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("p", { ref, className: cn("card__description", className), ...rest, children });
+  }
+);
 CardDescription.displayName = "CardDescription";
 const CardBody = forwardRef(
   ({ className, children, ...rest }, ref) => {

package/dist/components/Checkbox/Checkbox.js

@@ -6,16 +6,7 @@ const Checkbox = forwardRef(
     const generatedId = useId();
     const id = idProp ?? generatedId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cn("checkbox", className), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          id,
-          type: "checkbox",
-          className: "checkbox__input",
-          ...rest
-        }
-      ),
+      /* @__PURE__ */ jsx("input", { ref, id, type: "checkbox", className: "checkbox__input", ...rest }),
       label && /* @__PURE__ */ jsx("span", { children: label })
     ] });
   }