kaze-design-system 0.6.0 → 0.7.0

package/README.md

@@ -3,9 +3,9 @@
 [![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)
 
-**Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 63 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
+**Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 69 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
 
-- **63 コンポーネント**: フォーム、テーブル、チャート、ダッシュボード UI、ランディングページ、マーケティングパーツまで
+- **69 コンポーネント**: フォーム、テーブル、依存ゼロの SVG チャート（折れ線・縦棒・ヒートマップ等）、ダッシュボード UI、ランディングページ、マーケティングパーツまで
 - **日本語組版に最適化**: PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
 - **ライト / ダーク両対応**: `data-theme` 属性で切替、`prefers-color-scheme` 連動
 - **素の CSS + カスケードレイヤー**: `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
@@ -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` には 63 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
+`llms-full.txt` には 69 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
 
 ## インストール
 
@@ -122,7 +122,7 @@ function App() {
 kaze は1パッケージ・3レイヤーで構成されています。
 
 - **Foundation**: デザイントークン（カラー・タイポグラフィ・スペーシング）と CSS。両レイヤー共通の土台
-- **Application UI**: 管理画面・アプリ向けの52コンポーネント。`kaze-design-system` から import
+- **Application UI**: 管理画面・アプリ向けの58コンポーネント。`kaze-design-system` から import
 - **Marketing**: LP・キャンペーンページ向けの11コンポーネント。`kaze-design-system/marketing` から import
 
 ```tsx
@@ -133,15 +133,15 @@ import { Table, Sidebar, CommandPalette } from "kaze-design-system";
 import { Hero, PricingGrid, CTABanner } from "kaze-design-system/marketing";
 ```
 
-## コンポーネント一覧（63 コンポーネント）
+## コンポーネント一覧（69 コンポーネント）
 
-### Application UI（52）
+### Application UI（58）
 
 | カテゴリ | コンポーネント |
 |---|---|
-| **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField, FilterPill |
+| **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField, FilterPill, SegmentedControl |
 | **データ表示** | Card, Badge, StatusBadge, Table, Metric, Avatar, BarList, Tracker, Watermark |
-| **チャート** | BarChart, DonutChart, Sparkline |
+| **チャート** | BarChart, DonutChart, Sparkline, LineChart, ColumnChart, Heatmap, CategoryBar, ChartLegend |
 | **フィードバック** | Alert, Progress, Meter, Skeleton, EmptyState, Toast |
 | **ナビゲーション** | Tabs, Sidebar, TopBar, Breadcrumb, Pagination, Stepper, Disclosure |
 | **オーバーレイ** | Dialog, Tooltip, HelpButton, Dropdown, CommandPalette |
@@ -156,6 +156,51 @@ import { Hero, PricingGrid, CTABanner } from "kaze-design-system/marketing";
 
 詳細は [kaze-design-system.vercel.app/docs/components](https://kaze-design-system.vercel.app/docs/components) を参照してください。
 
+## チャート
+
+チャートはすべて SVG の手書き実装で、追加の依存はありません（recharts 等は不要）。色は `--chart-*` トークンを使うので、ダークモードとパレット切り替えに自動で追従します。
+
+| コンポーネント | 用途 |
+|---|---|
+| `LineChart` | 時系列の折れ線 / 面グラフ。複数系列、欠損値、ホバーとキーボードのツールチップ |
+| `ColumnChart` | 縦棒グラフ。グループ / 積み上げ、負の値 |
+| `BarChart` | 横棒のランキング |
+| `DonutChart` | 構成比のドーナツ |
+| `CategoryBar` | 構成比を 1 本の帯で。目標線マーカー付き |
+| `Heatmap` | 曜日×時間などの行列、日別カレンダー |
+| `Sparkline` | 表やカードに埋め込む小さな推移 |
+| `ChartLegend` | 系列の表示 / 非表示を切り替える凡例 |
+| `SegmentedControl` | 期間（1W / 1M / 1Y）や表示の切り替え |
+
+```tsx
+import { LineChart, SegmentedControl } from "kaze-design-system";
+
+<SegmentedControl
+  aria-label="期間"
+  options={[
+    { value: "1m", label: "1M" },
+    { value: "3m", label: "3M" },
+    { value: "1y", label: "1Y" },
+  ]}
+  defaultValue="3m"
+/>
+<LineChart
+  aria-label="月別の売上と利用者数"
+  index="month"
+  data={[
+    { month: "4月", sales: 320, users: 210 },
+    { month: "5月", sales: 340, users: 230 },
+    { month: "6月", sales: 310, users: 245 },
+  ]}
+  series={[
+    { key: "sales", label: "売上（万円）" },
+    { key: "users", label: "利用者数（人）" },
+  ]}
+  curve="monotone"
+  area
+/>
+```
+
 ## Hooks
 
 ```tsx
@@ -169,7 +214,7 @@ import { useFocusTrap, useLegendToggle } from "kaze-design-system/hooks";
 
 ## バンドルサイズ
 
-63 コンポーネント全部込みで **JS 38 kB gzip + CSS 23 kB gzip ≒ 61 kB gz**。ただし、個別 import すれば使った分だけが bundle に入ります。
+63 コンポーネント時点の計測で **JS 38 kB gzip + CSS 23 kB gzip ≒ 61 kB gz**。ただし、個別 import すれば使った分だけが bundle に入ります。
 
 | 区分 | 生サイズ | gzip |
 |---|---:|---:|

package/components.css

@@ -2891,6 +2891,482 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* ── ChartLegend ─────────────────────────────────────────── */
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-4);
+  font-size: var(--font-size-xs);
+}
+
+.chart-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--color-fg-secondary);
+  font: inherit;
+  transition: opacity var(--duration-normal) var(--ease-default);
+}
+
+button.chart-legend__item {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+button.chart-legend__item:hover {
+  color: var(--color-fg);
+}
+
+button.chart-legend__item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+}
+
+.chart-legend__item--hidden {
+  opacity: 0.4;
+}
+
+.chart-legend__swatch {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+/* ── Chart primitives (shared by LineChart / ColumnChart / Heatmap) ── */
+.chart {
+  position: relative;
+  width: 100%;
+}
+
+.chart__svg {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+.chart-grid line {
+  stroke: var(--color-border-subtle);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+.chart-axis text {
+  fill: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-axis line {
+  stroke: var(--color-border);
+  shape-rendering: crispEdges;
+}
+
+.chart-crosshair {
+  stroke: var(--color-border-strong);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.chart-tooltip {
+  position: absolute;
+  z-index: var(--z-tooltip);
+  min-width: 8rem;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface);
+  color: var(--color-fg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--font-size-xs);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.chart-tooltip__title {
+  margin-bottom: var(--space-1);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-secondary);
+}
+
+.chart-tooltip__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.chart-tooltip__swatch {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.chart-tooltip__label {
+  flex: 1;
+  color: var(--color-fg-secondary);
+}
+
+.chart-tooltip__value {
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ================================================================
+   Chart: LineChart
+   Uses the shared "Chart primitives" (.chart, .chart-grid, .chart-axis,
+   .chart-crosshair, .chart-tooltip). Series color is set via `color`
+   on .line-chart__series and consumed with currentColor.
+   ================================================================ */
+
+.line-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.line-chart__svg {
+  touch-action: pan-y;
+}
+
+.line-chart__svg:focus-visible {
+  outline: var(--ring-width) solid var(--ring-color);
+  outline-offset: var(--ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.line-chart__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.line-chart__area {
+  fill: currentColor;
+  fill-opacity: 0.12;
+  stroke: none;
+}
+
+.line-chart__dot {
+  fill: var(--color-surface);
+  stroke: currentColor;
+  stroke-width: 2;
+}
+
+.line-chart__dot--active {
+  fill: currentColor;
+  stroke: var(--color-surface);
+}
+
+.line-chart__tooltip {
+  /* position / transform are set inline from the active point */
+  pointer-events: none;
+}
+
+/* ── ColumnChart ─────────────────────────────────────────── */
+.column-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+.column-chart__figure:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+}
+
+.column-chart__plot {
+  position: relative;
+  width: 100%;
+}
+
+.column-chart__hit {
+  fill: transparent;
+}
+
+.column-chart__band {
+  fill: var(--color-surface-active);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.column-chart__bar {
+  transition: opacity var(--duration-normal) var(--ease-default);
+}
+
+.column-chart__total {
+  margin-top: var(--space-1);
+  padding-top: var(--space-1);
+  border-top: 1px solid var(--color-border-subtle);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Heatmap ── */
+.heatmap {
+  --heatmap-color: var(--chart-1);
+  --heatmap-cell: 16px;
+  --heatmap-gap: 3px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.heatmap__scroll {
+  overflow-x: auto;
+  padding-block: var(--space-1);
+}
+
+.heatmap__grid {
+  display: inline-grid;
+  gap: var(--heatmap-gap);
+  align-items: center;
+}
+
+.heatmap__label {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-tertiary);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.heatmap__label--row {
+  padding-right: var(--space-2);
+  text-align: right;
+}
+
+.heatmap__label--column {
+  text-align: center;
+  overflow: visible;
+}
+
+.heatmap__label[hidden] {
+  display: block;
+  visibility: hidden;
+}
+
+/* Spans several week columns so "10月" is not clipped by one narrow cell. */
+.heatmap__label--month {
+  text-align: left;
+}
+
+.heatmap__cell {
+  width: var(--heatmap-cell);
+  height: var(--heatmap-cell);
+  border-radius: calc(var(--heatmap-cell) * 0.2);
+  background: var(--color-bg-tertiary);
+  outline: 1px solid transparent;
+  outline-offset: 1px;
+}
+
+.heatmap__cell:hover {
+  outline-color: var(--color-fg-secondary);
+}
+
+.heatmap__legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-1);
+  margin-top: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-tertiary);
+}
+
+.heatmap__legend > span:first-child {
+  margin-right: var(--space-1);
+}
+
+.heatmap__legend > span:last-child {
+  margin-left: var(--space-1);
+}
+
+.heatmap__swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: calc(12px * 0.2);
+}
+
+.heatmap__tooltip {
+  transform: translate(-50%, calc(-100% - 6px));
+}
+
+/* ── CategoryBar ─────────────────────────────────────────── */
+.category-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+.category-bar__track {
+  position: relative;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  width: 100%;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-full);
+}
+
+.category-bar__segment {
+  flex-basis: 0;
+  min-width: 2px;
+  height: 100%;
+}
+
+.category-bar__segment:first-child {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+.category-bar__segment:last-of-type {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.category-bar__segment:only-of-type {
+  border-radius: var(--radius-full);
+}
+
+.category-bar__marker {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  background: var(--color-fg);
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 1px var(--color-surface);
+  transform: translate(-50%, -50%);
+}
+
+.category-bar__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--font-size-xs);
+}
+
+.category-bar__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.category-bar__swatch {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+
+.category-bar__swatch--marker {
+  width: 2px;
+  height: 12px;
+  background: var(--color-fg);
+}
+
+.category-bar__label {
+  color: var(--color-fg-secondary);
+}
+
+.category-bar__value {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.category-bar__percent {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-fg-secondary);
+}
+
+/* ── SegmentedControl ────────────────────────────────────── */
+.segmented-control {
+  --segmented-control-padding: 2px;
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  padding: var(--segmented-control-padding);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-field);
+}
+
+.segmented-control--full {
+  display: grid;
+  width: 100%;
+}
+
+.segmented-control__indicator {
+  position: absolute;
+  top: var(--segmented-control-padding);
+  bottom: var(--segmented-control-padding);
+  left: var(--segmented-control-padding);
+  background: var(--color-surface);
+  border-radius: calc(var(--radius-field) - 2px);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+
+.segmented-control__option {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--density-control-height) - var(--segmented-control-padding) * 2);
+  padding: 0 var(--space-3);
+  font: inherit;
+  font-size: var(--density-font-size-ui);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-secondary);
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius-field) - 2px);
+  cursor: pointer;
+  transition: color var(--duration-normal) var(--ease-out);
+}
+
+.segmented-control__option:hover:not(:disabled) {
+  color: var(--color-fg);
+}
+
+.segmented-control__option[aria-checked="true"] {
+  color: var(--color-fg);
+}
+
+.segmented-control__option:focus-visible {
+  outline: var(--ring-width) solid var(--ring-color);
+  outline-offset: var(--ring-offset);
+}
+
+.segmented-control__option:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.segmented-control--sm .segmented-control__option {
+  height: calc(var(--density-control-height) - 0.5rem - var(--segmented-control-padding) * 2);
+  padding: 0 var(--space-2);
+  font-size: var(--font-size-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .segmented-control__indicator,
+  .segmented-control__option {
+    transition: none;
+  }
+}
+
 /* ================================================================
    Chart — DonutChart
    ================================================================ */

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";