kaze-design-system 0.6.0 → 0.6.1

package/dist/components/Alert/Alert.js

@@ -2,22 +2,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Alert = forwardRef(
-  ({ variant = "info", icon, title, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: cn("alert", `alert--${variant}`, 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 })
-        ] })
-      ]
-    }
-  )
+  ({ variant = "info", icon, title, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn("alert", `alert--${variant}`, 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 {

package/dist/components/Badge/Badge.js

@@ -8,12 +8,7 @@ const Badge = forwardRef(
       {
         ref,
         ...live ? { role: "status" } : {},
-        className: cn(
-          "badge",
-          `badge--${variant}`,
-          solid && "badge--solid",
-          className
-        ),
+        className: cn("badge", `badge--${variant}`, solid && "badge--solid", className),
         ...rest,
         children: [
           dot && /* @__PURE__ */ jsx("span", { className: "badge__dot", "aria-hidden": "true" }),

package/dist/components/BarChart/BarChart.js

@@ -6,21 +6,25 @@ 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));
-    return /* @__PURE__ */ jsx("div", { ref, role: "img", "aria-label": ariaLabel, className: cn("bar-chart", className), ...rest, children: data.map((item, i) => {
-      const pct = maxVal > 0 ? item.value / maxVal * 100 : 0;
-      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", 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);
-    }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("bar-chart", className),
+        ...rest,
+        children: data.map((item, i) => {
+          const pct = maxVal > 0 ? item.value / maxVal * 100 : 0;
+          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", 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";

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

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/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: [

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: "風" })