kaze-design-system 0.10.2 → 0.10.4

package/dist/components/CategoryBar/CategoryBar.js

@@ -1,88 +1,90 @@
-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) })
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/CategoryBar/CategoryBar.tsx
+var PALETTE_SIZE = 8;
+var defaultFormat = (v) => v.toLocaleString("ja-JP");
+var formatPercent = (ratio) => `${Math.round(ratio * 1e3) / 10}%`;
+var 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
-};
+export { CategoryBar };

package/dist/components/ChartLegend/ChartLegend.js

@@ -1,43 +1,34 @@
-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
-      );
-    }) });
-  }
-);
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/ChartLegend/ChartLegend.tsx
+var 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
-};
+export { ChartLegend };

package/dist/components/Checkbox/Checkbox.js

@@ -1,27 +1,22 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
 import { cn } from "../../lib/utils.js";
-const Checkbox = forwardRef(
-  ({ label, error, className, id: idProp, "aria-invalid": ariaInvalid, ...rest }, ref) => {
-    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",
-          "aria-invalid": error ? "true" : ariaInvalid,
-          ...rest
-        }
-      ),
-      label && /* @__PURE__ */ jsx("span", { children: label })
-    ] });
-  }
-);
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Checkbox/Checkbox.tsx
+var Checkbox = forwardRef(({ label, error, className, id: idProp, "aria-invalid": ariaInvalid, ...rest }, ref) => {
+	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",
+			"aria-invalid": error ? "true" : ariaInvalid,
+			...rest
+		}), label && /* @__PURE__ */ jsx("span", { children: label })]
+	});
+});
 Checkbox.displayName = "Checkbox";
-export {
-  Checkbox
-};
+export { Checkbox };