kaze-design-system 0.4.2 → 0.6.1

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}%` }
             }
           )

package/dist/components/Radio/Radio.js

@@ -24,24 +24,12 @@ const Radio = forwardRef(
 );
 Radio.displayName = "Radio";
 const RadioGroup = forwardRef(
-  ({
-    label,
-    orientation = "vertical",
-    error,
-    errorMessage,
-    className,
-    children,
-    ...rest
-  }, ref) => {
+  ({ label, orientation = "vertical", error, errorMessage, className, children, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs(
       "fieldset",
       {
         ref,
-        className: cn(
-          "radio-group",
-          `radio-group--${orientation}`,
-          className
-        ),
+        className: cn("radio-group", `radio-group--${orientation}`, className),
         "aria-invalid": error || void 0,
         ...rest,
         children: [

package/dist/components/Search/Search.js

@@ -3,7 +3,16 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import { cn } from "../../lib/utils.js";
 const Search = forwardRef(
-  ({ placeholder = "Search...", shortcut, onSearch, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel, className, ...rest }, ref) => {
+  ({
+    placeholder = "Search...",
+    shortcut,
+    onSearch,
+    value: valueProp,
+    onChange: onChangeProp,
+    "aria-label": ariaLabel,
+    className,
+    ...rest
+  }, ref) => {
     const [internalValue, setInternalValue] = useState("");
     const isControlled = valueProp !== void 0;
     const currentValue = isControlled ? valueProp : internalValue;

package/dist/components/Section/Section.js

@@ -22,18 +22,10 @@ const Section = forwardRef(
 Section.displayName = "Section";
 const SectionHeader = forwardRef(
   ({ title, description, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn("section-header", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("h2", { className: "section-header__title", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "section-header__description", children: description })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("section-header", className), ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { className: "section-header__title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "section-header__description", children: description })
+    ] });
   }
 );
 SectionHeader.displayName = "SectionHeader";

package/dist/components/Sidebar/Sidebar.js

@@ -3,19 +3,11 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Sidebar = forwardRef(
   ({ children, logo, footer, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "aside",
-      {
-        ref,
-        className: cn("sidebar", className),
-        ...rest,
-        children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "sidebar__logo", children: logo }),
-          /* @__PURE__ */ jsx("nav", { className: "sidebar__nav", children }),
-          footer && /* @__PURE__ */ jsx("div", { className: "sidebar__footer", children: footer })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("aside", { ref, className: cn("sidebar", className), ...rest, children: [
+      logo && /* @__PURE__ */ jsx("div", { className: "sidebar__logo", children: logo }),
+      /* @__PURE__ */ jsx("nav", { className: "sidebar__nav", children }),
+      footer && /* @__PURE__ */ jsx("div", { className: "sidebar__footer", children: footer })
+    ] });
   }
 );
 Sidebar.displayName = "Sidebar";
@@ -40,29 +32,13 @@ const NavItem = forwardRef(
 NavItem.displayName = "NavItem";
 const SidebarGroupLabel = forwardRef(
   ({ className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("sidebar__group-label", className),
-        ...rest,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("sidebar__group-label", className), ...rest, children });
   }
 );
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 const SidebarDivider = forwardRef(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("sidebar__divider", className),
-        role: "separator",
-        ...rest
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("sidebar__divider", className), role: "separator", ...rest });
   }
 );
 SidebarDivider.displayName = "SidebarDivider";

package/dist/components/SplitSection/SplitSection.js

@@ -10,11 +10,7 @@ const SplitSection = forwardRef(
       "section",
       {
         ref,
-        className: cn(
-          "split-section",
-          reverse && "split-section--reverse",
-          className
-        ),
+        className: cn("split-section", reverse && "split-section--reverse", className),
         ...rest,
         children: [
           mediaSlot,

package/dist/components/StatusBadge/StatusBadge.js

@@ -12,17 +12,7 @@ const StatusBadge = forwardRef(
   ({ status, label, dot = true, live, ...rest }, ref) => {
     const config = STATUS_CONFIG[status];
     const isLive = live ?? (status === "live" || status === "loading");
-    return /* @__PURE__ */ jsx(
-      Badge,
-      {
-        ref,
-        variant: config.variant,
-        dot,
-        live: isLive,
-        ...rest,
-        children: label ?? config.label
-      }
-    );
+    return /* @__PURE__ */ jsx(Badge, { ref, variant: config.variant, dot, live: isLive, ...rest, children: label ?? config.label });
   }
 );
 StatusBadge.displayName = "StatusBadge";

package/dist/components/Stepper/Stepper.js

@@ -1,42 +1,44 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const CheckIcon = () => /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+const CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
 const Stepper = forwardRef(
   ({ steps, currentStep, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("stepper", className), ...rest, children: steps.map((step, i) => {
     const isCompleted = i < currentStep;
     const isActive = i === currentStep;
     return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "stepper__step",
-            isActive && "stepper__step--active"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "stepper__circle",
-                  isActive && "stepper__circle--active",
-                  isCompleted && "stepper__circle--completed"
-                ),
-                children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {}) : i + 1
-              }
+      /* @__PURE__ */ jsxs("div", { className: cn("stepper__step", isActive && "stepper__step--active"), children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "stepper__circle",
+              isActive && "stepper__circle--active",
+              isCompleted && "stepper__circle--completed"
             ),
-            /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
-          ]
-        }
-      ),
+            children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {}) : i + 1
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
+      ] }),
       i < steps.length - 1 && /* @__PURE__ */ jsx(
         "span",
         {
-          className: cn(
-            "stepper__connector",
-            isCompleted && "stepper__connector--completed"
-          )
+          className: cn("stepper__connector", isCompleted && "stepper__connector--completed")
         }
       )
     ] }, i);

package/dist/components/Table/Table.js

@@ -16,9 +16,11 @@ const Table = forwardRef(
   }
 );
 Table.displayName = "Table";
-const TableHeader = forwardRef(({ className, children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx("thead", { ref, className, ...rest, children });
-});
+const TableHeader = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("thead", { ref, className, ...rest, children });
+  }
+);
 TableHeader.displayName = "TableHeader";
 const TableBody = forwardRef(
   ({ className, children, ...rest }, ref) => {

package/dist/components/Tabs/Tabs.js

@@ -12,48 +12,41 @@ const TabGroup = forwardRef(
 TabGroup.displayName = "TabGroup";
 const Tabs = forwardRef(
   ({ variant = "default", className, children, ...rest }, ref) => {
-    const handleKeyDown = useCallback(
-      (e) => {
-        const target = e.target;
-        if (target.getAttribute("role") !== "tab") return;
-        const tabs = Array.from(
-          e.currentTarget.querySelectorAll(
-            '[role="tab"]:not([disabled])'
-          )
-        );
-        const currentIndex = tabs.indexOf(target);
-        if (currentIndex === -1) return;
-        let nextIndex = null;
-        if (e.key === "ArrowRight") {
-          nextIndex = (currentIndex + 1) % tabs.length;
-        } else if (e.key === "ArrowLeft") {
-          nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
-        } else if (e.key === "Home") {
-          nextIndex = 0;
-        } else if (e.key === "End") {
-          nextIndex = tabs.length - 1;
-        }
-        if (nextIndex !== null) {
-          const nextTab = tabs[nextIndex];
-          if (nextTab) {
-            e.preventDefault();
-            nextTab.focus();
-            nextTab.click();
-          }
+    const handleKeyDown = useCallback((e) => {
+      const target = e.target;
+      if (target.getAttribute("role") !== "tab") return;
+      const tabs = Array.from(
+        e.currentTarget.querySelectorAll(
+          '[role="tab"]:not([disabled])'
+        )
+      );
+      const currentIndex = tabs.indexOf(target);
+      if (currentIndex === -1) return;
+      let nextIndex = null;
+      if (e.key === "ArrowRight") {
+        nextIndex = (currentIndex + 1) % tabs.length;
+      } else if (e.key === "ArrowLeft") {
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      } else if (e.key === "Home") {
+        nextIndex = 0;
+      } else if (e.key === "End") {
+        nextIndex = tabs.length - 1;
+      }
+      if (nextIndex !== null) {
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+          e.preventDefault();
+          nextTab.focus();
+          nextTab.click();
         }
-      },
-      []
-    );
+      }
+    }, []);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         role: "tablist",
-        className: cn(
-          "tabs",
-          variant === "pills" && "tabs--pills",
-          className
-        ),
+        className: cn("tabs", variant === "pills" && "tabs--pills", className),
         onKeyDown: handleKeyDown,
         ...rest,
         children

package/dist/components/Testimonial/Testimonial.js

@@ -2,31 +2,27 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 import { Avatar } from "../Avatar/Avatar.js";
-const TestimonialGrid = forwardRef(({ className, children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("testimonial-grid", className),
-      ...rest,
-      children
-    }
-  );
-});
+const TestimonialGrid = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("testimonial-grid", className), ...rest, children });
+  }
+);
 TestimonialGrid.displayName = "TestimonialGrid";
-const TestimonialCard = forwardRef(({ quote, authorName, authorRole, authorImage, showIcon, className, ...rest }, ref) => {
-  const initials = authorName.split(/\s+/).map((w) => w[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("testimonial", className), ...rest, children: [
-    /* @__PURE__ */ jsx("blockquote", { className: "testimonial__quote", children: quote }),
-    /* @__PURE__ */ jsxs("div", { className: "testimonial__author", children: [
-      showIcon && (authorImage ? /* @__PURE__ */ jsx(Avatar, { size: "sm", src: authorImage, alt: authorName }) : /* @__PURE__ */ jsx("span", { className: "testimonial__icon", children: initials })),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "testimonial__name", children: authorName }),
-        authorRole && /* @__PURE__ */ jsx("span", { className: "testimonial__role", children: authorRole })
+const TestimonialCard = forwardRef(
+  ({ quote, authorName, authorRole, authorImage, showIcon, className, ...rest }, ref) => {
+    const initials = authorName.split(/\s+/).map((w) => w[0]).join("").slice(0, 2);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("testimonial", className), ...rest, children: [
+      /* @__PURE__ */ jsx("blockquote", { className: "testimonial__quote", children: quote }),
+      /* @__PURE__ */ jsxs("div", { className: "testimonial__author", children: [
+        showIcon && (authorImage ? /* @__PURE__ */ jsx(Avatar, { size: "sm", src: authorImage, alt: authorName }) : /* @__PURE__ */ jsx("span", { className: "testimonial__icon", children: initials })),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "testimonial__name", children: authorName }),
+          authorRole && /* @__PURE__ */ jsx("span", { className: "testimonial__role", children: authorRole })
+        ] })
       ] })
-    ] })
-  ] });
-});
+    ] });
+  }
+);
 TestimonialCard.displayName = "TestimonialCard";
 export {
   TestimonialCard,

package/dist/components/Text/Text.js

@@ -1,17 +1,7 @@
 import { forwardRef, createElement } from "react";
 import { cn } from "../../lib/utils.js";
 const Text = forwardRef(
-  ({
-    variant = "body",
-    size,
-    weight,
-    color,
-    align,
-    as = "p",
-    className,
-    children,
-    ...rest
-  }, ref) => {
+  ({ variant = "body", size, weight, color, align, as = "p", className, children, ...rest }, ref) => {
     return createElement(
       as,
       {