kaze-design-system 0.6.0 → 0.7.0

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/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
+};

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const ChartLegend = forwardRef(
+  ({ items, hidden = [], onToggle, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("chart-legend", className), ...rest, children: items.map((item) => {
+      const isHidden = hidden.includes(item.key);
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "chart-legend__swatch",
+            style: { background: item.color },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "chart-legend__label", children: item.label })
+      ] });
+      return onToggle ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("chart-legend__item", isHidden && "chart-legend__item--hidden"),
+          "aria-pressed": !isHidden,
+          onClick: () => onToggle(item.key),
+          children: content
+        },
+        item.key
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("chart-legend__item", isHidden && "chart-legend__item--hidden"),
+          children: content
+        },
+        item.key
+      );
+    }) });
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+export {
+  ChartLegend
+};

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 })
     ] });
   }

package/dist/components/ColumnChart/ColumnChart.js

@@ -0,0 +1,290 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { cn } from "../../lib/utils.js";
+import { CHART_COLORS } from "../../lib/chartColors.js";
+import { niceScale, linearScale, defaultFormat } from "../../lib/chartScale.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+const FALLBACK_WIDTH = 640;
+const PAD_TOP = 8;
+const PAD_RIGHT = 8;
+const BAR_GAP = 2;
+function toNumber(v) {
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+function barPath(x, y0, y1, w, radius, roundEnd) {
+  const h = Math.abs(y1 - y0);
+  if (h === 0 || w <= 0) return "";
+  const r = roundEnd ? Math.min(radius, w / 2, h) : 0;
+  const x1 = x + w;
+  if (y1 <= y0) {
+    return `M${x},${y0}V${y1 + r}${r ? `Q${x},${y1} ${x + r},${y1}` : ""}H${x1 - r}${r ? `Q${x1},${y1} ${x1},${y1 + r}` : ""}V${y0}Z`;
+  }
+  return `M${x},${y0}V${y1 - r}${r ? `Q${x},${y1} ${x + r},${y1}` : ""}H${x1 - r}${r ? `Q${x1},${y1} ${x1},${y1 - r}` : ""}V${y0}Z`;
+}
+const ColumnChart = forwardRef(
+  ({
+    data,
+    index,
+    series,
+    layout = "grouped",
+    height = 240,
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = true,
+    showLegend = true,
+    yAxisWidth = 48,
+    formatValue = defaultFormat,
+    barRadius = 2,
+    "aria-label": ariaLabel,
+    className,
+    onKeyDown,
+    onBlur,
+    ...rest
+  }, ref) => {
+    const wrapRef = useRef(null);
+    const [width, setWidth] = useState(FALLBACK_WIDTH);
+    const [hidden, setHidden] = useState([]);
+    const [active, setActive] = useState(null);
+    useEffect(() => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const measure = () => {
+        const w = el.clientWidth;
+        if (w > 0) setWidth(w);
+      };
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const toggle = useCallback((key) => {
+      setHidden((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
+    }, []);
+    const colorOf = (s, i) => s.color ?? CHART_COLORS[i % CHART_COLORS.length] ?? "var(--chart-1)";
+    const visible = useMemo(() => series.filter((s) => !hidden.includes(s.key)), [series, hidden]);
+    const stacked = layout === "stacked";
+    const left = showYAxis ? yAxisWidth : 4;
+    const bottom = showXAxis ? 24 : 4;
+    const plotW = Math.max(width - left - PAD_RIGHT, 1);
+    const plotH = Math.max(height - PAD_TOP - bottom, 1);
+    const n = data.length;
+    const step = n > 0 ? plotW / n : plotW;
+    const scale = useMemo(() => {
+      let lo = 0;
+      let hi = 0;
+      for (const row of data) {
+        let pos = 0;
+        let neg = 0;
+        for (const s of visible) {
+          const v = toNumber(row[s.key]);
+          if (stacked) {
+            if (v >= 0) pos += v;
+            else neg += v;
+          } else {
+            lo = Math.min(lo, v);
+            hi = Math.max(hi, v);
+          }
+        }
+        if (stacked) {
+          lo = Math.min(lo, neg);
+          hi = Math.max(hi, pos);
+        }
+      }
+      return niceScale(lo, hi);
+    }, [data, visible, stacked]);
+    const y = linearScale([scale.min, scale.max], [PAD_TOP + plotH, PAD_TOP]);
+    const y0 = y(0);
+    const columns = useMemo(() => {
+      const groupW = step * 0.7;
+      return data.map((row, ci) => {
+        const gx = left + ci * step + (step - groupW) / 2;
+        const bars = [];
+        if (stacked) {
+          let pos = 0;
+          let neg = 0;
+          const lastPos = [...visible].reverse().find((s) => toNumber(row[s.key]) > 0)?.key;
+          const lastNeg = [...visible].reverse().find((s) => toNumber(row[s.key]) < 0)?.key;
+          for (const s of visible) {
+            const v = toNumber(row[s.key]);
+            if (v === 0) continue;
+            const from = v > 0 ? pos : neg;
+            const to = from + v;
+            if (v > 0) pos = to;
+            else neg = to;
+            bars.push({
+              key: s.key,
+              x: gx,
+              width: groupW,
+              from,
+              to,
+              roundEnd: s.key === (v > 0 ? lastPos : lastNeg)
+            });
+          }
+        } else {
+          const k = Math.max(visible.length, 1);
+          const bw = Math.max((groupW - BAR_GAP * (k - 1)) / k, 1);
+          visible.forEach((s, si) => {
+            bars.push({
+              key: s.key,
+              x: gx + si * (bw + BAR_GAP),
+              width: bw,
+              from: 0,
+              to: toNumber(row[s.key]),
+              roundEnd: true
+            });
+          });
+        }
+        return bars;
+      });
+    }, [data, visible, stacked, step, left]);
+    const labels = data.map((row) => String(row[index] ?? ""));
+    const longest = labels.reduce((m, l) => Math.max(m, l.length), 0);
+    const labelEvery = Math.max(1, Math.ceil((longest * 8 + 12) / step));
+    const onKey = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || n === 0) return;
+      let next;
+      if (e.key === "ArrowRight") next = active === null ? 0 : Math.min(active + 1, n - 1);
+      else if (e.key === "ArrowLeft") next = active === null ? n - 1 : Math.max(active - 1, 0);
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = n - 1;
+      else if (e.key === "Escape") next = null;
+      else return;
+      e.preventDefault();
+      setActive(next ?? null);
+    };
+    const activeRow = active !== null ? data[active] : void 0;
+    const activeCenter = active !== null ? left + (active + 0.5) * step : 0;
+    const activeTotal = activeRow ? visible.reduce((sum, s) => sum + toNumber(activeRow[s.key]), 0) : 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("chart", "column-chart", className), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "column-chart__plot", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "img",
+            "aria-label": ariaLabel,
+            tabIndex: 0,
+            className: "column-chart__figure",
+            onKeyDown: onKey,
+            onBlur: (e) => {
+              onBlur?.(e);
+              setActive(null);
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "chart__svg column-chart__svg",
+                width,
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                onPointerLeave: () => setActive(null),
+                "aria-hidden": "true",
+                children: [
+                  showGrid && /* @__PURE__ */ jsx("g", { className: "chart-grid", children: scale.ticks.map((t) => /* @__PURE__ */ jsx("line", { x1: left, x2: left + plotW, y1: y(t), y2: y(t) }, t)) }),
+                  showYAxis && /* @__PURE__ */ jsx("g", { className: "chart-axis column-chart__y-axis", children: scale.ticks.map((t) => /* @__PURE__ */ jsx("text", { x: left - 8, y: y(t), textAnchor: "end", dominantBaseline: "middle", children: formatValue(t) }, t)) }),
+                  active !== null && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      className: "column-chart__band",
+                      x: left + active * step,
+                      y: PAD_TOP,
+                      width: step,
+                      height: plotH
+                    }
+                  ),
+                  columns.map((bars, ci) => /* @__PURE__ */ jsx("g", { className: "column-chart__column", children: bars.map((b) => {
+                    const s = series.find((x) => x.key === b.key);
+                    if (!s) return null;
+                    return /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "column-chart__bar",
+                        d: barPath(b.x, y(b.from), y(b.to), b.width, barRadius, b.roundEnd),
+                        fill: colorOf(s, series.indexOf(s))
+                      },
+                      b.key
+                    );
+                  }) }, labels[ci] + String(ci))),
+                  /* @__PURE__ */ jsxs("g", { className: "chart-axis", children: [
+                    /* @__PURE__ */ jsx("line", { x1: left, x2: left + plotW, y1: y0, y2: y0 }),
+                    showXAxis && labels.map(
+                      (l, ci) => ci % labelEvery === 0 ? /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: left + (ci + 0.5) * step,
+                          y: PAD_TOP + plotH + 16,
+                          textAnchor: "middle",
+                          children: l
+                        },
+                        ci
+                      ) : null
+                    )
+                  ] }),
+                  labels.map((l, ci) => /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      className: "column-chart__hit",
+                      x: left + ci * step,
+                      y: PAD_TOP,
+                      width: step,
+                      height: plotH,
+                      onPointerEnter: () => setActive(ci),
+                      children: /* @__PURE__ */ jsx("title", { children: l })
+                    },
+                    ci
+                  ))
+                ]
+              }
+            )
+          }
+        ),
+        activeRow && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "chart-tooltip column-chart__tooltip",
+            role: "status",
+            style: {
+              left: activeCenter,
+              top: PAD_TOP,
+              transform: activeCenter > width / 2 ? "translateX(calc(-100% - 12px))" : "translateX(12px)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: labels[active ?? 0] }),
+              visible.map((s) => /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "chart-tooltip__swatch",
+                    style: { background: colorOf(s, series.indexOf(s)) }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: s.label }),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: formatValue(toNumber(activeRow[s.key])) })
+              ] }, s.key)),
+              stacked && visible.length > 1 && /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row column-chart__total", children: [
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: "合計" }),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: formatValue(activeTotal) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      showLegend && /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          className: "column-chart__legend",
+          items: series.map((s, i) => ({ key: s.key, label: s.label, color: colorOf(s, i) })),
+          hidden,
+          onToggle: toggle
+        }
+      )
+    ] });
+  }
+);
+ColumnChart.displayName = "ColumnChart";
+export {
+  ColumnChart
+};

package/dist/components/CommandPalette/CommandPalette.js

@@ -62,9 +62,7 @@ const CommandPalette = forwardRef(
     }, [open]);
     useEffect(() => {
       if (!listRef.current) return;
-      const items = listRef.current.querySelectorAll(
-        "[data-command-item]"
-      );
+      const items = listRef.current.querySelectorAll("[data-command-item]");
       const highlighted = items[highlightedIndex];
       highlighted?.scrollIntoView({ block: "nearest" });
     }, [highlightedIndex]);
@@ -84,16 +82,12 @@ const CommandPalette = forwardRef(
         switch (e.key) {
           case "ArrowDown": {
             e.preventDefault();
-            setHighlightedIndex(
-              (prev) => prev < flatList.length - 1 ? prev + 1 : 0
-            );
+            setHighlightedIndex((prev) => prev < flatList.length - 1 ? prev + 1 : 0);
             break;
           }
           case "ArrowUp": {
             e.preventDefault();
-            setHighlightedIndex(
-              (prev) => prev > 0 ? prev - 1 : flatList.length - 1
-            );
+            setHighlightedIndex((prev) => prev > 0 ? prev - 1 : flatList.length - 1);
             break;
           }
           case "Enter": {

package/dist/components/DescriptionList/DescriptionList.js

@@ -1,20 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const DescriptionList = forwardRef(({ horizontal, bordered, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(
-  "dl",
-  {
-    ref,
-    className: cn(
-      "dl",
-      horizontal && "dl--horizontal",
-      bordered && "dl--bordered",
-      className
-    ),
-    ...rest,
-    children
-  }
-));
+const DescriptionList = forwardRef(
+  ({ horizontal, bordered, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ref,
+      className: cn("dl", horizontal && "dl--horizontal", bordered && "dl--bordered", className),
+      ...rest,
+      children
+    }
+  )
+);
 DescriptionList.displayName = "DescriptionList";
 const DescriptionItem = forwardRef(
   ({ term, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("dl__group", className), ...rest, children: [

package/dist/components/Dialog/Dialog.js

@@ -97,16 +97,7 @@ DialogHeader.displayName = "DialogHeader";
 const DialogTitle = forwardRef(
   ({ className, children, id, ...rest }, ref) => {
     const contextId = useContext(DialogTitleIdContext);
-    return /* @__PURE__ */ jsx(
-      "h2",
-      {
-        ref,
-        id: id ?? contextId,
-        className: cn("dialog__title", className),
-        ...rest,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx("h2", { ref, id: id ?? contextId, className: cn("dialog__title", className), ...rest, children });
   }
 );
 DialogTitle.displayName = "DialogTitle";

package/dist/components/Disclosure/Disclosure.js

@@ -100,10 +100,7 @@ const Disclosure = forwardRef(
                 iconPosition === "left" && /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: cn(
-                      "disclosure__icon",
-                      isBuiltInIcon && "disclosure__icon--rotate"
-                    ),
+                    className: cn("disclosure__icon", isBuiltInIcon && "disclosure__icon--rotate"),
                     "aria-hidden": "true",
                     children: markerNode
                   }