kaze-design-system 0.6.0 → 0.7.0

package/dist/components/LineChart/LineChart.js

@@ -0,0 +1,314 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useCallback } 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 PAD_TOP = 8;
+const PAD_BOTTOM = 24;
+const PAD_RIGHT = 12;
+const X_LABEL_MIN_GAP = 64;
+const INITIAL_WIDTH = 600;
+const num = (v) => Number(v.toFixed(2));
+function toNumber(v) {
+  return typeof v === "number" && Number.isFinite(v) ? v : null;
+}
+function splitRuns(points) {
+  const runs = [];
+  let cur = [];
+  for (const p of points) {
+    if (p) cur.push(p);
+    else if (cur.length) {
+      runs.push(cur);
+      cur = [];
+    }
+  }
+  if (cur.length) runs.push(cur);
+  return runs;
+}
+const at = (arr, i) => arr[i];
+function monotoneTangents(pts) {
+  const n = pts.length;
+  const d = [];
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = at(pts, i);
+    const p1 = at(pts, i + 1);
+    d.push((p1.y - p0.y) / (p1.x - p0.x || 1));
+  }
+  const m = new Array(n).fill(0);
+  m[0] = at(d, 0);
+  m[n - 1] = at(d, n - 2);
+  for (let i = 1; i < n - 1; i++) {
+    const prev = at(d, i - 1);
+    const next = at(d, i);
+    m[i] = prev * next <= 0 ? 0 : (prev + next) / 2;
+  }
+  for (let i = 0; i < n - 1; i++) {
+    const di = at(d, i);
+    if (di === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+      continue;
+    }
+    const a = at(m, i) / di;
+    const b = at(m, i + 1) / di;
+    const s = a * a + b * b;
+    if (s > 9) {
+      const t = 3 / Math.sqrt(s);
+      m[i] = t * a * di;
+      m[i + 1] = t * b * di;
+    }
+  }
+  return m;
+}
+function linePath(run, curve) {
+  const first = at(run, 0);
+  let d = `M${num(first.x)},${num(first.y)}`;
+  if (curve === "monotone" && run.length > 2) {
+    const m = monotoneTangents(run);
+    for (let i = 0; i < run.length - 1; i++) {
+      const p0 = at(run, i);
+      const p1 = at(run, i + 1);
+      const dx = (p1.x - p0.x) / 3;
+      d += `C${num(p0.x + dx)},${num(p0.y + at(m, i) * dx)},${num(p1.x - dx)},${num(p1.y - at(m, i + 1) * dx)},${num(p1.x)},${num(p1.y)}`;
+    }
+    return d;
+  }
+  for (let i = 1; i < run.length; i++) {
+    const p = at(run, i);
+    d += `L${num(p.x)},${num(p.y)}`;
+  }
+  return d;
+}
+const LineChart = forwardRef(
+  ({
+    data,
+    index,
+    series,
+    height = 240,
+    area = false,
+    curve = "linear",
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = true,
+    showLegend = true,
+    showDots = false,
+    yAxisWidth = 48,
+    formatValue = defaultFormat,
+    "aria-label": ariaLabel,
+    className,
+    ...rest
+  }, ref) => {
+    const wrapRef = useRef(null);
+    const svgRef = useRef(null);
+    const [width, setWidth] = useState(INITIAL_WIDTH);
+    const [hidden, setHidden] = useState([]);
+    const [active, setActive] = useState(null);
+    useEffect(() => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const measure = () => {
+        const w = Math.round(el.getBoundingClientRect().width);
+        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((h) => h.includes(key) ? h.filter((k) => k !== key) : [...h, key]);
+    }, []);
+    const items = series.map((s, i) => ({
+      key: s.key,
+      label: s.label,
+      color: s.color ?? CHART_COLORS[i % CHART_COLORS.length] ?? "var(--chart-emerald)"
+    }));
+    const visible = items.filter((s) => !hidden.includes(s.key));
+    const n = data.length;
+    const padLeft = showYAxis ? yAxisWidth : 8;
+    const padBottom = showXAxis ? PAD_BOTTOM : 4;
+    const plotW = Math.max(width - padLeft - PAD_RIGHT, 1);
+    const plotH = Math.max(height - PAD_TOP - padBottom, 1);
+    let lo = Number.POSITIVE_INFINITY;
+    let hi = Number.NEGATIVE_INFINITY;
+    for (const s of visible) {
+      for (const row of data) {
+        const v = toNumber(row[s.key]);
+        if (v === null) continue;
+        lo = Math.min(lo, v);
+        hi = Math.max(hi, v);
+      }
+    }
+    if (!Number.isFinite(lo)) {
+      lo = 0;
+      hi = 1;
+    }
+    const scale = niceScale(lo, hi, 5);
+    const yOf = linearScale([scale.min, scale.max], [PAD_TOP + plotH, PAD_TOP]);
+    const xOf = (i) => padLeft + (n <= 1 ? plotW / 2 : i / (n - 1) * plotW);
+    const labelStep = Math.max(1, Math.ceil(X_LABEL_MIN_GAP / (n <= 1 ? plotW : plotW / (n - 1))));
+    const indexFromPointer = (e) => {
+      const rect = svgRef.current?.getBoundingClientRect();
+      if (!rect || n === 0) return null;
+      const scaleX = rect.width ? width / rect.width : 1;
+      const x = (e.clientX - rect.left) * scaleX - padLeft;
+      if (n === 1) return 0;
+      return Math.min(n - 1, Math.max(0, Math.round(x / plotW * (n - 1))));
+    };
+    const onKeyDown = (e) => {
+      if (n === 0) return;
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        setActive((a) => a === null ? 0 : Math.min(n - 1, a + 1));
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        setActive((a) => a === null ? n - 1 : Math.max(0, a - 1));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(n - 1);
+      } else if (e.key === "Escape") {
+        setActive(null);
+      }
+    };
+    const activeX = active !== null && active < n ? xOf(active) : null;
+    const activeRow = active !== null ? data[active] : void 0;
+    const flip = activeX !== null && activeX > width / 2;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("line-chart", className), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "chart", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: svgRef,
+            className: "chart__svg line-chart__svg",
+            role: "img",
+            "aria-label": ariaLabel,
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            tabIndex: 0,
+            onPointerMove: (e) => setActive(indexFromPointer(e)),
+            onPointerLeave: () => setActive(null),
+            onKeyDown,
+            onBlur: () => setActive(null),
+            children: [
+              showGrid && /* @__PURE__ */ jsx("g", { className: "chart-grid", children: scale.ticks.map((t) => /* @__PURE__ */ jsx("line", { x1: padLeft, x2: padLeft + plotW, y1: yOf(t), y2: yOf(t) }, t)) }),
+              showYAxis && /* @__PURE__ */ jsx("g", { className: "chart-axis", children: scale.ticks.map((t) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: padLeft - 8,
+                  y: yOf(t),
+                  textAnchor: "end",
+                  dominantBaseline: "middle",
+                  children: formatValue(t)
+                },
+                t
+              )) }),
+              showXAxis && /* @__PURE__ */ jsx("g", { className: "chart-axis", children: data.map(
+                (row, i) => i % labelStep === 0 ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: xOf(i),
+                    y: PAD_TOP + plotH + 16,
+                    textAnchor: "middle",
+                    children: String(row[index] ?? "")
+                  },
+                  i
+                ) : null
+              ) }),
+              visible.map((s) => {
+                const pts = data.map((row, i) => {
+                  const v = toNumber(row[s.key]);
+                  return v === null ? null : { x: xOf(i), y: yOf(v) };
+                });
+                const runs = splitRuns(pts);
+                const base = yOf(Math.max(scale.min, Math.min(0, scale.max)));
+                return /* @__PURE__ */ jsxs("g", { className: "line-chart__series", style: { color: s.color }, children: [
+                  area && runs.filter((r) => r.length > 1).map((r) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      className: "line-chart__area",
+                      d: `${linePath(r, curve)}L${num(at(r, r.length - 1).x)},${num(base)}L${num(at(r, 0).x)},${num(base)}Z`
+                    },
+                    `a${at(r, 0).x}`
+                  )),
+                  runs.map(
+                    (r) => r.length > 1 ? /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "line-chart__line",
+                        d: linePath(r, curve)
+                      },
+                      `l${at(r, 0).x}`
+                    ) : /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "line-chart__dot",
+                        cx: at(r, 0).x,
+                        cy: at(r, 0).y,
+                        r: 3
+                      },
+                      `s${at(r, 0).x}`
+                    )
+                  ),
+                  showDots && runs.filter((r) => r.length > 1).flat().map((p) => /* @__PURE__ */ jsx("circle", { className: "line-chart__dot", cx: p.x, cy: p.y, r: 3 }, p.x)),
+                  active !== null && pts[active] && /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: "line-chart__dot line-chart__dot--active",
+                      cx: pts[active]?.x,
+                      cy: pts[active]?.y,
+                      r: 4.5
+                    }
+                  )
+                ] }, s.key);
+              }),
+              activeX !== null && /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "chart-crosshair",
+                  x1: activeX,
+                  x2: activeX,
+                  y1: PAD_TOP,
+                  y2: PAD_TOP + plotH
+                }
+              )
+            ]
+          }
+        ),
+        activeRow && activeX !== null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "chart-tooltip line-chart__tooltip",
+            style: {
+              left: activeX,
+              top: PAD_TOP,
+              transform: `translateX(${flip ? "calc(-100% - 12px)" : "12px"})`
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: String(activeRow[index] ?? "") }),
+              visible.map((s) => {
+                const v = toNumber(activeRow[s.key]);
+                return /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row", children: [
+                  /* @__PURE__ */ jsx("span", { className: "chart-tooltip__swatch", style: { background: s.color } }),
+                  /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: s.label }),
+                  /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: v === null ? "-" : formatValue(v) })
+                ] }, s.key);
+              })
+            ]
+          }
+        )
+      ] }),
+      showLegend && /* @__PURE__ */ jsx(ChartLegend, { items, hidden, onToggle: toggle })
+    ] });
+  }
+);
+LineChart.displayName = "LineChart";
+export {
+  LineChart
+};

package/dist/components/List/List.js

@@ -22,24 +22,11 @@ const List = forwardRef(
 );
 List.displayName = "List";
 const ListItem = forwardRef(
-  ({
-    leading,
-    trailing,
-    title,
-    description,
-    interactive,
-    className,
-    children,
-    ...rest
-  }, ref) => /* @__PURE__ */ jsxs(
+  ({ leading, trailing, title, description, interactive, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "li",
     {
       ref,
-      className: cn(
-        "list-item",
-        interactive && "list-item--interactive",
-        className
-      ),
+      className: cn("list-item", interactive && "list-item--interactive", className),
       ...rest,
       children: [
         leading && /* @__PURE__ */ jsx("span", { className: "list-item__leading", children: leading }),

package/dist/components/Logo/Logo.js

@@ -47,16 +47,7 @@ const Logo = forwardRef(
   ({ size = "md", showText = true, className, ...rest }, ref) => {
     const iconSize = size === "sm" ? 18 : size === "lg" ? 32 : 22;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("logo", className), ...rest, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "logo__mark",
-            `logo__mark--${size}`
-          ),
-          children: /* @__PURE__ */ jsx(WindMark, { size: iconSize })
-        }
-      ),
+      /* @__PURE__ */ jsx("div", { className: cn("logo__mark", `logo__mark--${size}`), children: /* @__PURE__ */ jsx(WindMark, { size: iconSize }) }),
       showText && /* @__PURE__ */ jsxs("span", { className: cn("logo__text", size === "lg" && "logo__text--lg"), children: [
         "kaze",
         /* @__PURE__ */ jsx("span", { className: "logo__kanji", children: "風" })

package/dist/components/Meter/Meter.js

@@ -35,10 +35,7 @@ const Meter = forwardRef(
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(
-            "meter__track",
-            size !== "md" && `meter__track--${size}`
-          ),
+          className: cn("meter__track", size !== "md" && `meter__track--${size}`),
           role: "meter",
           "aria-valuenow": value,
           "aria-valuemin": min,

package/dist/components/Metric/Metric.js

@@ -5,23 +5,8 @@ const Metric = forwardRef(
   ({ label, value, large, change, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("metric", className), ...rest, children: [
       /* @__PURE__ */ jsx("span", { className: "metric__label", children: label }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn("metric__value", large && "metric__value--lg"),
-          children: value
-        }
-      ),
-      change && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "metric__change",
-            `metric__change--${change.trend}`
-          ),
-          children: change.value
-        }
-      )
+      /* @__PURE__ */ jsx("span", { className: cn("metric__value", large && "metric__value--lg"), children: value }),
+      change && /* @__PURE__ */ jsx("span", { className: cn("metric__change", `metric__change--${change.trend}`), children: change.value })
     ] });
   }
 );

package/dist/components/Navbar/Navbar.js

@@ -7,11 +7,7 @@ const Navbar = forwardRef(
       "nav",
       {
         ref,
-        className: cn(
-          "navbar",
-          transparent && "navbar--transparent",
-          className
-        ),
+        className: cn("navbar", transparent && "navbar--transparent", className),
         ...rest,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "navbar__left", children: [
@@ -37,11 +33,7 @@ const NavbarLink = forwardRef(
       Component,
       {
         ref,
-        className: cn(
-          "navbar__link",
-          active && "navbar__link--active",
-          className
-        ),
+        className: cn("navbar__link", active && "navbar__link--active", className),
         ...rest,
         children
       }

package/dist/components/NumberField/NumberField.js

@@ -23,7 +23,7 @@ function formatNumber(value, locale, currency) {
 function parseLocaleNumber(str) {
   const cleaned = str.replace(/[^\d.\-,]/g, "").replace(/,/g, "");
   const num = Number(cleaned);
-  return isNaN(num) ? null : num;
+  return Number.isNaN(num) ? null : num;
 }
 const NumberField = forwardRef(
   ({
@@ -108,7 +108,8 @@ const NumberField = forwardRef(
     };
     useEffect(() => {
       if (typeof ref === "function") ref(innerRef.current);
-      else if (ref) ref.current = innerRef.current;
+      else if (ref)
+        ref.current = innerRef.current;
     });
     const displayValue = editing ? editValue : value != null ? formatNumber(value, locale, currency) : "";
     return /* @__PURE__ */ jsxs("div", { className: cn("number-field", error && "number-field--error", className), children: [
@@ -123,7 +124,18 @@ const NumberField = forwardRef(
             disabled: disabled || min !== void 0 && (value ?? 0) <= min,
             tabIndex: -1,
             "aria-label": decrementLabel,
-            children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6" }) })
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6" })
+              }
+            )
           }
         ),
         resolvedPrefix && /* @__PURE__ */ jsx("span", { className: "number-field__affix", children: resolvedPrefix }),
@@ -156,10 +168,21 @@ const NumberField = forwardRef(
             disabled: disabled || max !== void 0 && (value ?? 0) >= max,
             tabIndex: -1,
             "aria-label": incrementLabel,
-            children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx("line", { x1: "6", y1: "2", x2: "6", y2: "10" }),
-              /* @__PURE__ */ jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6" })
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "2", x2: "6", y2: "10" }),
+                  /* @__PURE__ */ jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6" })
+                ]
+              }
+            )
           }
         )
       ] }),

package/dist/components/Pagination/Pagination.js

@@ -25,52 +25,43 @@ const Pagination = forwardRef(
     ...rest
   }, ref) => {
     const pages = getPages(currentPage, totalPages, siblingCount);
-    return /* @__PURE__ */ jsxs(
-      "nav",
-      {
-        ref,
-        "aria-label": label,
-        className: cn("pagination", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "pagination__btn",
-              disabled: currentPage <= 1,
-              onClick: () => onPageChange?.(currentPage - 1),
-              "aria-label": prevLabel,
-              children: "‹"
-            }
-          ),
-          pages.map(
-            (page, i) => page === "..." ? /* @__PURE__ */ jsx("span", { className: "pagination__ellipsis", children: "…" }, `e${i}`) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: cn(
-                  "pagination__btn",
-                  page === currentPage && "pagination__btn--active"
-                ),
-                onClick: () => onPageChange?.(page),
-                "aria-current": page === currentPage ? "page" : void 0,
-                children: page
-              },
-              page
-            )
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "pagination__btn",
-              disabled: currentPage >= totalPages,
-              onClick: () => onPageChange?.(currentPage + 1),
-              "aria-label": nextLabel,
-              children: "›"
-            }
-          )
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, className: cn("pagination", className), ...rest, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pagination__btn",
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange?.(currentPage - 1),
+          "aria-label": prevLabel,
+          children: "‹"
+        }
+      ),
+      pages.map(
+        (page, i) => page === "..." ? /* @__PURE__ */ jsx("span", { className: "pagination__ellipsis", children: "…" }, `e${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn("pagination__btn", page === currentPage && "pagination__btn--active"),
+            onClick: () => onPageChange?.(page),
+            "aria-current": page === currentPage ? "page" : void 0,
+            children: page
+          },
+          page
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pagination__btn",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange?.(currentPage + 1),
+          "aria-label": nextLabel,
+          children: "›"
+        }
+      )
+    ] });
   }
 );
 Pagination.displayName = "Pagination";

package/dist/components/Pricing/Pricing.js

@@ -8,27 +8,12 @@ const PricingGrid = forwardRef(
 );
 PricingGrid.displayName = "PricingGrid";
 const PricingCard = forwardRef(
-  ({
-    name,
-    description,
-    price,
-    period,
-    features,
-    featured,
-    badge,
-    className,
-    children,
-    ...rest
-  }, ref) => {
+  ({ name, description, price, period, features, featured, badge, className, children, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn(
-          "pricing-card",
-          featured && "pricing-card--featured",
-          className
-        ),
+        className: cn("pricing-card", featured && "pricing-card--featured", className),
         ...rest,
         children: [
           badge && /* @__PURE__ */ jsx("span", { className: "pricing-card__badge", children: badge }),

package/dist/components/Progress/Progress.js

@@ -2,16 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Progress = forwardRef(
-  ({
-    value,
-    max = 100,
-    label,
-    showValue,
-    color = "default",
-    size = "md",
-    className,
-    ...rest
-  }, ref) => {
+  ({ value, max = 100, label, showValue, color = "default", size = "md", className, ...rest }, ref) => {
     const pct = Math.min(100, Math.max(0, value / max * 100));
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("progress", className), ...rest, children: [
       (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "progress__label-row", children: [
@@ -24,10 +15,7 @@ const Progress = forwardRef(
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(
-            "progress__track",
-            size !== "md" && `progress__track--${size}`
-          ),
+          className: cn("progress__track", size !== "md" && `progress__track--${size}`),
           role: "progressbar",
           "aria-label": label,
           "aria-valuenow": value,
@@ -36,10 +24,7 @@ const Progress = forwardRef(
           children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "progress__fill",
-                color !== "default" && `progress__fill--${color}`
-              ),
+              className: cn("progress__fill", color !== "default" && `progress__fill--${color}`),
               style: { width: `${pct}%` }
             }
           )