kaze-design-system 0.6.0 → 0.7.0

package/dist/components/DonutChart/DonutChart.js

@@ -30,56 +30,60 @@ const DonutChart = forwardRef(
         dashOffset
       };
     });
-    return /* @__PURE__ */ jsxs("div", { ref, role: "img", "aria-label": ariaLabel, className: cn("donut-chart", className), ...rest, children: [
-      /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          className: "donut-chart__svg",
-          width: size,
-          height: size,
-          viewBox: `0 0 ${size} ${size}`,
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                className: "donut-chart__track",
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth
-              }
-            ),
-            segments.map((seg) => /* @__PURE__ */ jsx(
-              "circle",
-              {
-                className: "donut-chart__segment",
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth,
-                stroke: seg.color,
-                strokeDasharray: `${seg.dashLength} ${circumference - seg.dashLength}`,
-                strokeDashoffset: seg.dashOffset
-              },
-              seg.label
-            )),
-            centerLabel && /* @__PURE__ */ jsx("text", { className: "donut-chart__center-label", x: center, y: center, children: centerLabel })
-          ]
-        }
-      ),
-      showLegend && /* @__PURE__ */ jsx("div", { className: "donut-chart__legend", children: segments.map((seg) => /* @__PURE__ */ jsxs("span", { className: "donut-chart__legend-item", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "donut-chart__legend-dot",
-            style: { background: seg.color }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "donut-chart__legend-label", children: seg.label }),
-        /* @__PURE__ */ jsx("span", { className: "donut-chart__legend-value", children: seg.value })
-      ] }, seg.label)) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("donut-chart", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "donut-chart__svg",
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "donut-chart__track",
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    strokeWidth
+                  }
+                ),
+                segments.map((seg) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "donut-chart__segment",
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    strokeWidth,
+                    stroke: seg.color,
+                    strokeDasharray: `${seg.dashLength} ${circumference - seg.dashLength}`,
+                    strokeDashoffset: seg.dashOffset
+                  },
+                  seg.label
+                )),
+                centerLabel && /* @__PURE__ */ jsx("text", { className: "donut-chart__center-label", x: center, y: center, children: centerLabel })
+              ]
+            }
+          ),
+          showLegend && /* @__PURE__ */ jsx("div", { className: "donut-chart__legend", children: segments.map((seg) => /* @__PURE__ */ jsxs("span", { className: "donut-chart__legend-item", children: [
+            /* @__PURE__ */ jsx("span", { className: "donut-chart__legend-dot", style: { background: seg.color } }),
+            /* @__PURE__ */ jsx("span", { className: "donut-chart__legend-label", children: seg.label }),
+            /* @__PURE__ */ jsx("span", { className: "donut-chart__legend-value", children: seg.value })
+          ] }, seg.label)) })
+        ]
+      }
+    );
   }
 );
 DonutChart.displayName = "DonutChart";

package/dist/components/Dropdown/Dropdown.js

@@ -7,9 +7,7 @@ const DropdownContext = createContext(null);
 function useDropdownContext() {
   const context = useContext(DropdownContext);
   if (!context) {
-    throw new Error(
-      "Dropdown compound components must be used within a <Dropdown>"
-    );
+    throw new Error("Dropdown compound components must be used within a <Dropdown>");
   }
   return context;
 }
@@ -91,14 +89,7 @@ const DropdownTrigger = forwardRef(
 DropdownTrigger.displayName = "DropdownTrigger";
 const DropdownMenu = forwardRef(
   ({ children, className, ...rest }, ref) => {
-    const {
-      open,
-      setOpen,
-      triggerRef,
-      highlightedIndex,
-      setHighlightedIndex,
-      resetItems
-    } = useDropdownContext();
+    const { open, setOpen, triggerRef, highlightedIndex, setHighlightedIndex, resetItems } = useDropdownContext();
     const menuRef = useRef(null);
     const [position, setPosition] = useState({
       top: 0,

package/dist/components/FAQ/FAQ.js

@@ -2,59 +2,49 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { cn } from "../../lib/utils.js";
-const FAQ = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("faq", className), ...rest, children });
-  }
-);
+const FAQ = forwardRef(({ className, children, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("faq", className), ...rest, children });
+});
 FAQ.displayName = "FAQ";
 const FAQItem = forwardRef(
   ({ question, answer, className, children, ...rest }, ref) => {
     const [open, setOpen] = useState(false);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn("faq__item", open && "faq__item--open", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "faq__trigger",
-              "aria-expanded": open,
-              onClick: () => setOpen((prev) => !prev),
-              children: [
-                question,
-                /* @__PURE__ */ jsx(
-                  "svg",
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("faq__item", open && "faq__item--open", className), ...rest, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "faq__trigger",
+          "aria-expanded": open,
+          onClick: () => setOpen((prev) => !prev),
+          children: [
+            question,
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "faq__chevron",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
                   {
-                    className: "faq__chevron",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M4 6l4 4 4-4",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                      }
-                    )
+                    d: "M4 6l4 4 4-4",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "faq__answer", children: /* @__PURE__ */ jsx("div", { className: "faq__answer-inner", children: answer ?? children }) })
-        ]
-      }
-    );
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "faq__answer", children: /* @__PURE__ */ jsx("div", { className: "faq__answer-inner", children: answer ?? children }) })
+    ] });
   }
 );
 FAQItem.displayName = "FAQItem";

package/dist/components/FeatureGrid/FeatureGrid.js

@@ -7,11 +7,7 @@ const FeatureGrid = forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          "feature-grid",
-          columns !== 3 && `feature-grid--cols-${columns}`,
-          className
-        ),
+        className: cn("feature-grid", columns !== 3 && `feature-grid--cols-${columns}`, className),
         ...rest,
         children
       }

package/dist/components/FilterPill/FilterPill.js

@@ -9,11 +9,7 @@ const FilterPill = forwardRef(
       {
         ref,
         type: "button",
-        className: cn(
-          "filter-pill",
-          active && "filter-pill--active",
-          className
-        ),
+        className: cn("filter-pill", active && "filter-pill--active", className),
         style: pillStyle,
         "aria-pressed": active,
         ...rest,

package/dist/components/FormField/FormField.js

@@ -2,17 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useId, isValidElement, cloneElement } from "react";
 import { cn } from "../../lib/utils.js";
 const FormField = forwardRef(
-  ({
-    label,
-    description,
-    error,
-    required,
-    maxLength,
-    currentLength,
-    children,
-    className,
-    ...rest
-  }, ref) => {
+  ({ label, description, error, required, maxLength, currentLength, children, className, ...rest }, ref) => {
     const generatedId = useId();
     const inputId = `form-field-${generatedId}`;
     const descriptionId = description ? `${inputId}-description` : void 0;
@@ -29,10 +19,7 @@ const FormField = forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: cn(
-            "form-field__label",
-            required && "form-field__label--required"
-          ),
+          className: cn("form-field__label", required && "form-field__label--required"),
           children: label
         }
       ),

package/dist/components/Grid/Grid.js

@@ -35,15 +35,7 @@ const Grid = forwardRef(
       ...resolvedGapMd != null ? { "--grid-gap-md": resolvedGapMd } : {},
       ...resolvedGapSm != null ? { "--grid-gap-sm": resolvedGapSm } : {}
     };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("grid", className),
-        style: vars,
-        ...rest
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("grid", className), style: vars, ...rest });
   }
 );
 Grid.displayName = "Grid";

package/dist/components/Heatmap/Heatmap.js

@@ -0,0 +1,255 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { defaultFormat } from "../../lib/chartScale.js";
+const DAY_MS = 864e5;
+const DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+const WEEKDAY_LABELS = ["日", "月", "火", "水", "木", "金", "土"];
+const LABELLED_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
+function parseDay(date) {
+  const m = DATE_RE.exec(date);
+  if (!m) return null;
+  const ms = Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  const d = new Date(ms);
+  if (d.getUTCMonth() !== Number(m[2]) - 1) return null;
+  return ms / DAY_MS;
+}
+function formatDay(day) {
+  return new Date(day * DAY_MS).toISOString().slice(0, 10);
+}
+function levelOf(value, max, levels) {
+  if (value === null || value <= 0 || max <= 0) return 0;
+  return Math.min(levels, Math.max(1, Math.ceil(value / max * levels)));
+}
+function levelColor(level, levels) {
+  if (level === 0) return void 0;
+  const pct = levels === 1 ? 100 : Math.round(25 + 75 * (level - 1) / (levels - 1));
+  return `color-mix(in srgb, var(--heatmap-color) ${pct}%, var(--color-bg-tertiary))`;
+}
+const Heatmap = forwardRef(
+  ({
+    variant = "matrix",
+    rows = [],
+    columns = [],
+    values = [],
+    data = [],
+    startDate,
+    endDate,
+    weekStartsOn = 1,
+    color = "var(--chart-1)",
+    levels = 5,
+    max,
+    cellSize = 16,
+    gap = 3,
+    showLegend = true,
+    formatValue = defaultFormat,
+    formatTooltip,
+    "aria-label": ariaLabel,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const rootRef = useRef(null);
+    const [tip, setTip] = useState(null);
+    const stepCount = Math.max(1, Math.floor(levels));
+    const cells = [];
+    let gridColumns = 0;
+    const monthLabels = [];
+    let maxValue = max;
+    if (variant === "matrix") {
+      gridColumns = columns.length;
+      rows.forEach((row, r) => {
+        columns.forEach((column, c) => {
+          const raw = values[r]?.[c];
+          cells.push({
+            key: `${r}:${c}`,
+            row,
+            column,
+            value: typeof raw === "number" && Number.isFinite(raw) ? raw : null,
+            gridRow: r + 2,
+            gridColumn: c + 2
+          });
+        });
+      });
+    } else {
+      const byDay = /* @__PURE__ */ new Map();
+      for (const d of data) {
+        const day = parseDay(d.date);
+        if (day === null || !Number.isFinite(d.value)) continue;
+        byDay.set(day, (byDay.get(day) ?? 0) + d.value);
+      }
+      const days = [...byDay.keys()];
+      const start = startDate ? parseDay(startDate) : days.length ? Math.min(...days) : null;
+      const end = endDate ? parseDay(endDate) : days.length ? Math.max(...days) : null;
+      if (start !== null && end !== null && end >= start) {
+        const rowOf = (day) => (new Date(day * DAY_MS).getUTCDay() - weekStartsOn + 7) % 7;
+        const gridStart = start - rowOf(start);
+        gridColumns = Math.floor((end - gridStart) / 7) + 1;
+        let lastLabelWeek = -Infinity;
+        let lastMonth = -1;
+        for (let day = start; day <= end; day++) {
+          const week = Math.floor((day - gridStart) / 7);
+          const month = new Date(day * DAY_MS).getUTCMonth();
+          if (month !== lastMonth) {
+            if (week - lastLabelWeek >= 3) {
+              monthLabels.push({ label: `${month + 1}月`, gridColumn: week + 2 });
+              lastLabelWeek = week;
+            }
+            lastMonth = month;
+          }
+          cells.push({
+            key: formatDay(day),
+            date: formatDay(day),
+            value: byDay.get(day) ?? null,
+            gridRow: rowOf(day) + 2,
+            gridColumn: week + 2
+          });
+        }
+      }
+    }
+    if (maxValue === void 0) {
+      maxValue = cells.reduce((acc, c) => c.value !== null && c.value > acc ? c.value : acc, 0);
+    }
+    const scaleMax = maxValue;
+    const show = (cell, el) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const a = el.getBoundingClientRect();
+      const b = root.getBoundingClientRect();
+      const { row, column, date, value } = cell;
+      setTip({
+        x: a.left - b.left + a.width / 2,
+        y: a.top - b.top,
+        cell: { row, column, date, value }
+      });
+    };
+    const tooltipBody = (cell) => {
+      if (formatTooltip) return /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: formatTooltip(cell) });
+      const title = cell.date ?? `${cell.row} ${cell.column}`;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: "値" }),
+          /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: cell.value === null ? "データなし" : formatValue(cell.value) })
+        ] })
+      ] });
+    };
+    const rootStyle = {
+      "--heatmap-color": color,
+      "--heatmap-cell": `${cellSize}px`,
+      "--heatmap-gap": `${gap}px`,
+      ...style
+    };
+    const longestColumnLabel = columns.reduce((m, c) => Math.max(m, String(c).length), 0);
+    const columnLabelStep = Math.max(1, Math.ceil((longestColumnLabel * 8 + 6) / (cellSize + gap)));
+    const gridStyle = {
+      gridTemplateColumns: `auto repeat(${gridColumns}, var(--heatmap-cell))`,
+      gridTemplateRows: `auto repeat(${variant === "matrix" ? rows.length : 7}, var(--heatmap-cell))`
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("chart", "heatmap", `heatmap--${variant}`, className),
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "heatmap__scroll", children: /* @__PURE__ */ jsxs("div", { className: "heatmap__grid", style: gridStyle, onMouseLeave: () => setTip(null), children: [
+            variant === "matrix" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              columns.map((c, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  hidden: i % columnLabelStep !== 0,
+                  className: "heatmap__label heatmap__label--column",
+                  style: { gridRow: 1, gridColumn: i + 2 },
+                  children: c
+                },
+                `c${i}`
+              )),
+              rows.map((r, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "heatmap__label heatmap__label--row",
+                  style: { gridRow: i + 2, gridColumn: 1 },
+                  children: r
+                },
+                `r${i}`
+              ))
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              monthLabels.map((m) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "heatmap__label heatmap__label--month",
+                  style: { gridRow: 1, gridColumn: `${m.gridColumn} / span 3` },
+                  children: m.label
+                },
+                m.gridColumn
+              )),
+              Array.from({ length: 7 }, (_, row) => {
+                const dow = (row + weekStartsOn) % 7;
+                return LABELLED_WEEKDAYS.has(dow) ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "heatmap__label heatmap__label--row",
+                    style: { gridRow: row + 2, gridColumn: 1 },
+                    children: WEEKDAY_LABELS[dow]
+                  },
+                  dow
+                ) : null;
+              })
+            ] }),
+            cells.map((cell) => {
+              const level = levelOf(cell.value, scaleMax, stepCount);
+              const { key, gridRow, gridColumn } = cell;
+              return (
+                // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only tooltip; the chart is exposed as role=img
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("heatmap__cell", level === 0 && "heatmap__cell--empty"),
+                    "data-level": level,
+                    style: { gridRow, gridColumn, background: levelColor(level, stepCount) },
+                    onMouseEnter: (e) => show(cell, e.currentTarget)
+                  },
+                  key
+                )
+              );
+            })
+          ] }) }),
+          showLegend && /* @__PURE__ */ jsxs("div", { className: "heatmap__legend", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { children: "少" }),
+            Array.from({ length: stepCount }, (_, i) => i + 1).map((level) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "heatmap__swatch",
+                style: { background: levelColor(level, stepCount) }
+              },
+              level
+            )),
+            /* @__PURE__ */ jsx("span", { children: "多" })
+          ] }),
+          tip && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "chart-tooltip heatmap__tooltip",
+              style: { left: tip.x, top: tip.y },
+              "aria-hidden": "true",
+              children: tooltipBody(tip.cell)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Heatmap.displayName = "Heatmap";
+export {
+  Heatmap
+};

package/dist/components/HelpButton/HelpButton.js

@@ -31,15 +31,7 @@ function computePosition(trigger, pop, side) {
   }
 }
 const HelpButton = forwardRef(
-  ({
-    title,
-    children,
-    position = "bottom",
-    size = "md",
-    icon,
-    ariaLabel = "ヘルプ",
-    className
-  }, ref) => {
+  ({ title, children, position = "bottom", size = "md", icon, ariaLabel = "ヘルプ", className }, ref) => {
     const [open, setOpen] = useState(false);
     const [coords, setCoords] = useState({
       top: 0,

package/dist/components/LPFooter/LPFooter.js

@@ -2,16 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const LPFooter = forwardRef(
-  ({
-    logo,
-    description,
-    columns,
-    bottomLeft,
-    bottomRight,
-    className,
-    children,
-    ...rest
-  }, ref) => {
+  ({ logo, description, columns, bottomLeft, bottomRight, className, children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx("footer", { ref, className: cn("lp-footer", className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: "lp-footer__inner", children: [
       /* @__PURE__ */ jsxs("div", { className: "lp-footer__grid", children: [
         /* @__PURE__ */ jsxs("div", { className: "lp-footer__brand", children: [