kaze-design-system 0.6.0 → 0.7.0

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/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../lib/utils.js";
+const SegmentedControl = forwardRef(
+  ({
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size = "md",
+    fullWidth = false,
+    name,
+    className,
+    onKeyDown,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const [inner, setInner] = useState(defaultValue);
+    const isControlled = valueProp !== void 0;
+    const current = isControlled ? valueProp : inner;
+    const buttons = useRef({});
+    const enabled = options.filter((o) => !o.disabled);
+    const selected = options.find((o) => o.value === current && !o.disabled);
+    const tabStop = selected?.value ?? enabled[0]?.value;
+    const selectedIndex = selected ? options.indexOf(selected) : -1;
+    const select = (v) => {
+      if (!isControlled) setInner(v);
+      if (v !== current) onValueChange?.(v);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || enabled.length === 0) return;
+      const focused = e.target.closest("[data-value]")?.getAttribute("data-value");
+      const from = enabled.findIndex((o) => o.value === focused);
+      let next;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = (from + 1) % enabled.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = (from - 1 + enabled.length) % enabled.length;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = enabled.length - 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const target = enabled[next];
+      if (!target) return;
+      buttons.current[target.value]?.focus();
+      select(target.value);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        className: cn(
+          "segmented-control",
+          size !== "md" && `segmented-control--${size}`,
+          fullWidth && "segmented-control--full",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+          selectedIndex >= 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "segmented-control__indicator",
+              "aria-hidden": "true",
+              style: {
+                width: `calc((100% - 4px) / ${options.length})`,
+                transform: `translateX(${selectedIndex * 100}%)`
+              }
+            }
+          ),
+          options.map((o) => {
+            const checked = o.value === selected?.value;
+            return (
+              // biome-ignore lint/a11y/useSemanticElements: custom radiogroup (roving tabindex + sliding pill); native radios cannot render the segment layout
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (el) => {
+                    buttons.current[o.value] = el;
+                  },
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": checked,
+                  "data-value": o.value,
+                  disabled: o.disabled,
+                  tabIndex: o.value === tabStop ? 0 : -1,
+                  className: "segmented-control__option",
+                  onClick: () => select(o.value),
+                  children: o.label
+                },
+                o.value
+              )
+            );
+          }),
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected?.value ?? "" })
+        ]
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+export {
+  SegmentedControl
+};

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,
       {