kaze-design-system 0.10.3 → 0.10.4

package/CHANGELOG.md

@@ -16,6 +16,13 @@ CHANGELOG entries and version bumps are generated automatically by `.github/work
 ### 0.x policy
 
 While the major version is 0, a **minor** release may include breaking changes (they are called out in the release notes with a migration note); a **patch** release never does. The public API will be frozen at 1.0.
+## [0.10.4] - 2026-10-29
+
+### Other
+
+- build: move to vite 8 and vitest 5 (#52)
+
+
 ## [0.10.3] - 2026-10-29
 
 ### Other

package/dist/components/Alert/Alert.js

@@ -1,30 +1,30 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
-const Alert = forwardRef(
-  ({ tone: toneProp, variant, icon, title, className, children, ...rest }, ref) => {
-    const tone = renamedProp("Alert", "variant", "tone", variant, toneProp) ?? "info";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: "alert",
-        "data-tone": tone,
-        className: cn("alert", `alert--${tone}`, 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 })
-          ] })
-        ]
-      }
-    );
-  }
-);
+import { renamedProp } from "../../lib/deprecate.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Alert/Alert.tsx
+var Alert = forwardRef(({ tone: toneProp, variant, icon, title, className, children, ...rest }, ref) => {
+	const tone = renamedProp("Alert", "variant", "tone", variant, toneProp) ?? "info";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "alert",
+		"data-tone": tone,
+		className: cn("alert", `alert--${tone}`, 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 {
-  Alert
-};
+export { Alert };

package/dist/components/Avatar/Avatar.js

@@ -1,23 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const Avatar = forwardRef(
-  ({ size = "md", src, alt, fallback, className, ...rest }, ref) => {
-    const showFallback = !src && fallback;
-    const a11yProps = showFallback ? { role: "img", "aria-label": fallback } : {};
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        ...a11yProps,
-        className: cn("avatar", `avatar--${size}`, className),
-        ...rest,
-        children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: fallback })
-      }
-    );
-  }
-);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/Avatar/Avatar.tsx
+var Avatar = forwardRef(({ size = "md", src, alt, fallback, className, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		...!src && fallback ? {
+			role: "img",
+			"aria-label": fallback
+		} : {},
+		className: cn("avatar", `avatar--${size}`, className),
+		...rest,
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: alt ?? ""
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: fallback
+		})
+	});
+});
 Avatar.displayName = "Avatar";
-export {
-  Avatar
-};
+export { Avatar };

package/dist/components/Badge/Badge.js

@@ -1,27 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
-const Badge = forwardRef(
-  ({ tone: toneProp, variant, dot, solid, live, className, children, ...rest }, ref) => {
-    const tone = renamedProp("Badge", "variant", "tone", variant, toneProp) ?? "default";
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref,
-        ...live ? { role: "status" } : {},
-        "data-tone": tone,
-        className: cn("badge", `badge--${tone}`, solid && "badge--solid", className),
-        ...rest,
-        children: [
-          dot && /* @__PURE__ */ jsx("span", { className: "badge__dot", "aria-hidden": "true" }),
-          children
-        ]
-      }
-    );
-  }
-);
+import { renamedProp } from "../../lib/deprecate.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Badge/Badge.tsx
+var Badge = forwardRef(({ tone: toneProp, variant, dot, solid, live, className, children, ...rest }, ref) => {
+	const tone = renamedProp("Badge", "variant", "tone", variant, toneProp) ?? "default";
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		...live ? { role: "status" } : {},
+		"data-tone": tone,
+		className: cn("badge", `badge--${tone}`, solid && "badge--solid", className),
+		...rest,
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			className: "badge__dot",
+			"aria-hidden": "true"
+		}), children]
+	});
+});
 Badge.displayName = "Badge";
-export {
-  Badge
-};
+export { Badge };

package/dist/components/BarChart/BarChart.js

@@ -1,41 +1,51 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 import { CHART_COLORS } from "../../lib/chartColors.js";
-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));
-    const pctOf = (value) => maxVal > 0 ? value / maxVal * 100 : 0;
-    const summary = data.map((d) => `${d.label} ${fmt(d.value)}（${Math.round(pctOf(d.value))}%）`).join("、");
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: the forwarded ref and props are typed as HTMLDivElement (public API); switching to <figure> would change the exported types.
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          role: "figure",
-          "aria-label": ariaLabel,
-          className: cn("bar-chart", className),
-          ...rest,
-          children: [
-            data.length > 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", children: summary }),
-            data.map((item, i) => {
-              const pct = pctOf(item.value);
-              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", "aria-hidden": "true", 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);
-            })
-          ]
-        }
-      )
-    );
-  }
-);
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/BarChart/BarChart.tsx
+var 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));
+	const pctOf = (value) => maxVal > 0 ? value / maxVal * 100 : 0;
+	const summary = data.map((d) => `${d.label} ${fmt(d.value)}（${Math.round(pctOf(d.value))}%）`).join("、");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "figure",
+		"aria-label": ariaLabel,
+		className: cn("bar-chart", className),
+		...rest,
+		children: [data.length > 0 && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: summary
+		}), data.map((item, i) => {
+			const pct = pctOf(item.value);
+			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",
+						"aria-hidden": "true",
+						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";
-export {
-  BarChart
-};
+export { BarChart };

package/dist/components/BarList/BarList.js

@@ -1,45 +1,44 @@
-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) => {
-    const sorted = sortOrder === "none" ? data : [...data].sort(
-      (a, b) => sortOrder === "ascending" ? a.value - b.value : b.value - a.value
-    );
-    const maxValue = Math.max(...sorted.map((d) => d.value), 1);
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("barlist", className), ...rest, children: sorted.map((item) => {
-      const pct = item.value / maxValue * 100;
-      const display = item.displayValue ?? (valueFormatter ? valueFormatter(item.value) : String(item.value));
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "barlist__bar-wrapper", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "barlist__bar",
-              style: {
-                width: `${pct}%`,
-                ...item.color ? { backgroundColor: item.color } : {}
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "barlist__label", children: item.label })
-        ] }),
-        /* @__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
-        },
-        item.label
-      ) : /* @__PURE__ */ jsx("div", { className: "barlist__row", children: content }, item.label);
-    }) });
-  }
-);
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/BarList/BarList.tsx
+var BarList = forwardRef(({ 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);
+	const maxValue = Math.max(...sorted.map((d) => d.value), 1);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("barlist", className),
+		...rest,
+		children: sorted.map((item) => {
+			const pct = item.value / maxValue * 100;
+			const display = item.displayValue ?? (valueFormatter ? valueFormatter(item.value) : String(item.value));
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "barlist__bar-wrapper",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "barlist__bar",
+					style: {
+						width: `${pct}%`,
+						...item.color ? { backgroundColor: item.color } : {}
+					}
+				}), /* @__PURE__ */ jsx("span", {
+					className: "barlist__label",
+					children: item.label
+				})]
+			}), /* @__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
+			}, item.label) : /* @__PURE__ */ jsx("div", {
+				className: "barlist__row",
+				children: content
+			}, item.label);
+		})
+	});
+});
 BarList.displayName = "BarList";
-export {
-  BarList
-};
+export { BarList };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,12 +1,29 @@
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const Breadcrumb = forwardRef(
-  ({ items, label = "パンくず", className, ...rest }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, className, ...rest, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb", children: items.map((item, i) => {
-    const LinkComponent = item.as ?? "a";
-    return /* @__PURE__ */ jsx("li", { className: "breadcrumb__item", children: i < items.length - 1 && item.href ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: "breadcrumb__link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "breadcrumb__current", "aria-current": "page", children: item.label }) }, item.href ?? item.label);
-  }) }) })
-);
+import { jsx } from "react/jsx-runtime";
+// src/components/Breadcrumb/Breadcrumb.tsx
+var Breadcrumb = forwardRef(({ items, label = "パンくず", className, ...rest }, ref) => /* @__PURE__ */ jsx("nav", {
+	ref,
+	"aria-label": label,
+	className,
+	...rest,
+	children: /* @__PURE__ */ jsx("ol", {
+		className: "breadcrumb",
+		children: items.map((item, i) => {
+			const LinkComponent = item.as ?? "a";
+			return /* @__PURE__ */ jsx("li", {
+				className: "breadcrumb__item",
+				children: i < items.length - 1 && item.href ? /* @__PURE__ */ jsx(LinkComponent, {
+					href: item.href,
+					className: "breadcrumb__link",
+					children: item.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "breadcrumb__current",
+					"aria-current": "page",
+					children: item.label
+				})
+			}, item.href ?? item.label);
+		})
+	})
+}));
 Breadcrumb.displayName = "Breadcrumb";
-export {
-  Breadcrumb
-};
+export { Breadcrumb };

package/dist/components/Button/Button.js

@@ -1,47 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/Slot.js";
-const Button = forwardRef(
-  ({
-    variant = "primary",
-    size = "md",
-    fullWidth,
-    iconOnly,
-    disabled,
-    asChild,
-    className,
-    children,
-    onClick,
-    ...rest
-  }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const disabledProps = asChild ? {
-      "aria-disabled": true,
-      "data-disabled": "",
-      onClick: (e) => e.preventDefault()
-    } : { disabled, "aria-disabled": true };
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        onClick,
-        ...disabled ? disabledProps : {},
-        className: cn(
-          "btn",
-          `btn--${variant}`,
-          `btn--${size}`,
-          fullWidth && "btn--full",
-          iconOnly && "btn--icon",
-          className
-        ),
-        ...rest,
-        children
-      }
-    );
-  }
-);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/Button/Button.tsx
+var Button = forwardRef(({ variant = "primary", size = "md", fullWidth, iconOnly, disabled, asChild, className, children, onClick, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		onClick,
+		...disabled ? asChild ? {
+			"aria-disabled": true,
+			"data-disabled": "",
+			onClick: (e) => e.preventDefault()
+		} : {
+			disabled,
+			"aria-disabled": true
+		} : {},
+		className: cn("btn", `btn--${variant}`, `btn--${size}`, fullWidth && "btn--full", iconOnly && "btn--icon", className),
+		...rest,
+		children
+	});
+});
 Button.displayName = "Button";
-export {
-  Button
-};
+export { Button };

package/dist/components/CTABanner/CTABanner.js

@@ -1,16 +1,27 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const CTABanner = forwardRef(
-  ({ title, description, className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("cta-banner", className), ...rest, children: [
-      /* @__PURE__ */ jsx("h2", { className: "cta-banner__title", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "cta-banner__description", children: description }),
-      children && /* @__PURE__ */ jsx("div", { className: "cta-banner__actions", children })
-    ] });
-  }
-);
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/CTABanner/CTABanner.tsx
+var CTABanner = forwardRef(({ title, description, className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("cta-banner", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "cta-banner__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "cta-banner__description",
+				children: description
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "cta-banner__actions",
+				children
+			})
+		]
+	});
+});
 CTABanner.displayName = "CTABanner";
-export {
-  CTABanner
-};
+export { CTABanner };

package/dist/components/Card/Card.js

@@ -1,61 +1,59 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const Card = forwardRef(
-  ({ variant = "default", className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "card",
-          variant === "interactive" && "card--interactive",
-          variant === "compact" && "card--compact",
-          variant === "fill" && "card--fill",
-          className
-        ),
-        ...rest,
-        children
-      }
-    );
-  }
-);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/Card/Card.tsx
+var Card = forwardRef(({ variant = "default", className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("card", variant === "interactive" && "card--interactive", variant === "compact" && "card--compact", variant === "fill" && "card--fill", className),
+		...rest,
+		children
+	});
+});
 Card.displayName = "Card";
-const CardHeader = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__header", className), ...rest, children });
-  }
-);
+var CardHeader = forwardRef(({ className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("card__header", className),
+		...rest,
+		children
+	});
+});
 CardHeader.displayName = "CardHeader";
-const CardTitle = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("h3", { ref, className: cn("card__title", className), ...rest, children });
-  }
-);
+var CardTitle = forwardRef(({ className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("h3", {
+		ref,
+		className: cn("card__title", className),
+		...rest,
+		children
+	});
+});
 CardTitle.displayName = "CardTitle";
-const CardDescription = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("p", { ref, className: cn("card__description", className), ...rest, children });
-  }
-);
+var 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) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__body", className), ...rest, children });
-  }
-);
+var CardBody = forwardRef(({ className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("card__body", className),
+		...rest,
+		children
+	});
+});
 CardBody.displayName = "CardBody";
-const CardFooter = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__footer", className), ...rest, children });
-  }
-);
+var CardFooter = forwardRef(({ className, children, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("card__footer", className),
+		...rest,
+		children
+	});
+});
 CardFooter.displayName = "CardFooter";
-export {
-  Card,
-  CardBody,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle
-};
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle };