kaze-design-system 0.6.1 → 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/CategoryBar/CategoryBar.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const PALETTE_SIZE = 8;
+const defaultFormat = (v) => v.toLocaleString("ja-JP");
+const formatPercent = (ratio) => `${Math.round(ratio * 1e3) / 10}%`;
+const CategoryBar = forwardRef(
+  ({
+    data,
+    marker,
+    showLabels = true,
+    showPercent = false,
+    height = 8,
+    formatValue = defaultFormat,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const items = data.map((d, i) => ({
+      ...d,
+      value: Math.max(0, Number.isFinite(d.value) ? d.value : 0),
+      color: d.color ?? `var(--chart-${i % PALETTE_SIZE + 1})`
+    }));
+    const total = items.reduce((sum, d) => sum + d.value, 0);
+    const ratioOf = (v) => total > 0 ? v / total : 0;
+    const markerPos = marker && total > 0 ? Math.min(1, Math.max(0, ratioOf(marker.value))) : null;
+    const describe = (d) => `${d.label} ${formatValue(d.value)}${showPercent ? ` (${formatPercent(ratioOf(d.value))})` : ""}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("category-bar", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            items.map(describe).join("、"),
+            marker ? `。${marker.label ?? "目標"} ${formatValue(marker.value)}` : ""
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "category-bar__track", style: { height }, "aria-hidden": "true", children: [
+            items.map(
+              (d) => d.value > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "category-bar__segment",
+                  style: { flexGrow: d.value, background: d.color },
+                  title: describe(d)
+                },
+                d.label
+              )
+            ),
+            markerPos !== null && marker && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "category-bar__marker",
+                style: { left: `${markerPos * 100}%`, height: height + 8 },
+                title: `${marker.label ?? "目標"} ${formatValue(marker.value)}`
+              }
+            )
+          ] }),
+          showLabels && /* @__PURE__ */ jsxs("ul", { className: "category-bar__legend", "aria-hidden": "true", children: [
+            items.map((d) => /* @__PURE__ */ jsxs("li", { className: "category-bar__legend-item", children: [
+              /* @__PURE__ */ jsx("span", { className: "category-bar__swatch", style: { background: d.color } }),
+              /* @__PURE__ */ jsx("span", { className: "category-bar__label", children: d.label }),
+              /* @__PURE__ */ jsxs("span", { className: "category-bar__value", children: [
+                formatValue(d.value),
+                showPercent && /* @__PURE__ */ jsxs("span", { className: "category-bar__percent", children: [
+                  " ",
+                  formatPercent(ratioOf(d.value))
+                ] })
+              ] })
+            ] }, d.label)),
+            marker?.label && /* @__PURE__ */ jsxs("li", { className: "category-bar__legend-item", children: [
+              /* @__PURE__ */ jsx("span", { className: "category-bar__swatch category-bar__swatch--marker" }),
+              /* @__PURE__ */ jsx("span", { className: "category-bar__label", children: marker.label }),
+              /* @__PURE__ */ jsx("span", { className: "category-bar__value", children: formatValue(marker.value) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CategoryBar.displayName = "CategoryBar";
+export {
+  CategoryBar
+};