kaze-design-system 0.4.2 → 0.6.1

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

@@ -1,14 +1,28 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useId, useMemo } from "react";
-import { ChevronRight, Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+const iconSvgProps = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: "disclosure__icon-svg",
+  "aria-hidden": true
+};
 function renderIcon(icon) {
   if (icon === "chevron" || icon == null) {
-    return /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "disclosure__icon-svg" });
+    return /* @__PURE__ */ jsx("svg", { ...iconSvgProps, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
   }
   if (icon === "plus") {
-    return /* @__PURE__ */ jsx(Plus, { size: 16, className: "disclosure__icon-svg" });
+    return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, children: [
+      /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+    ] });
   }
   return icon;
 }
@@ -86,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;
 }
@@ -33,9 +31,6 @@ const Dropdown = forwardRef(
       },
       [isControlled, onOpenChange]
     );
-    const registerItem = useCallback(() => {
-      return itemCountRef.current++;
-    }, []);
     const resetItems = useCallback(() => {
       itemCountRef.current = 0;
     }, []);
@@ -48,8 +43,6 @@ const Dropdown = forwardRef(
           triggerRef,
           highlightedIndex,
           setHighlightedIndex,
-          itemCount: itemCountRef.current,
-          registerItem,
           resetItems
         },
         children: /* @__PURE__ */ jsx("div", { ref, style: { display: "contents" }, children })
@@ -96,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: "風" })

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
       }