kaze-design-system 0.1.0

package/dist/components/Divider/Divider.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const Divider = forwardRef(
+  ({ text, subtle, className, ...rest }, ref) => {
+    if (text) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("divider-text", className),
+          ...rest,
+          children: text
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ref,
+        className: cn("divider", subtle && "divider--subtle", className),
+        ...rest
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/components/DonutChart/DonutChart.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { CHART_COLORS } from "../../lib/chartColors.js";
+const DonutChart = forwardRef(
+  ({
+    data,
+    size = 120,
+    strokeWidth = 16,
+    centerLabel,
+    showLegend = true,
+    "aria-label": ariaLabel,
+    className,
+    ...rest
+  }, ref) => {
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const center = size / 2;
+    let offset = 0;
+    const segments = data.map((d, i) => {
+      const pct = total > 0 ? d.value / total : 0;
+      const dashLength = circumference * pct;
+      const dashOffset = -offset;
+      offset += dashLength;
+      return {
+        ...d,
+        color: d.color ?? CHART_COLORS[i % CHART_COLORS.length],
+        dashLength,
+        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)) })
+    ] });
+  }
+);
+DonutChart.displayName = "DonutChart";
+export {
+  DonutChart
+};

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect, createContext, useContext } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils.js";
+const DropdownContext = createContext(null);
+function useDropdownContext() {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error(
+      "Dropdown compound components must be used within a <Dropdown>"
+    );
+  }
+  return context;
+}
+const Dropdown = forwardRef(
+  ({ children, open: controlledOpen, onOpenChange }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const triggerRef = useRef(null);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const itemCountRef = useRef(0);
+    const setOpen = useCallback(
+      (value) => {
+        if (!isControlled) {
+          setInternalOpen(value);
+        }
+        onOpenChange?.(value);
+        if (!value) {
+          setHighlightedIndex(-1);
+        }
+      },
+      [isControlled, onOpenChange]
+    );
+    const registerItem = useCallback(() => {
+      return itemCountRef.current++;
+    }, []);
+    const resetItems = useCallback(() => {
+      itemCountRef.current = 0;
+    }, []);
+    return /* @__PURE__ */ jsx(
+      DropdownContext.Provider,
+      {
+        value: {
+          open,
+          setOpen,
+          triggerRef,
+          highlightedIndex,
+          setHighlightedIndex,
+          itemCount: itemCountRef.current,
+          registerItem,
+          resetItems
+        },
+        children: /* @__PURE__ */ jsx("div", { ref, style: { display: "contents" }, children })
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
+const DropdownTrigger = forwardRef(
+  ({ children }, ref) => {
+    const { open, setOpen, triggerRef } = useDropdownContext();
+    const handleClick = useCallback(() => {
+      setOpen(!open);
+    }, [open, setOpen]);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setOpen(true);
+        }
+      },
+      [setOpen]
+    );
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": open ? "true" : "false",
+        "aria-haspopup": "menu",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        style: { display: "inline-flex" },
+        children
+      }
+    );
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+const DropdownMenu = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const {
+      open,
+      setOpen,
+      triggerRef,
+      highlightedIndex,
+      setHighlightedIndex,
+      resetItems
+    } = useDropdownContext();
+    const menuRef = useRef(null);
+    const [position, setPosition] = useState({
+      top: 0,
+      left: 0
+    });
+    const itemsRef = useRef([]);
+    useEffect(() => {
+      if (open) {
+        resetItems();
+        itemsRef.current = [];
+      }
+    }, [open, resetItems]);
+    useEffect(() => {
+      if (!open || !triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom + 4 + window.scrollY,
+        left: rect.left + window.scrollX
+      });
+    }, [open, triggerRef]);
+    useEffect(() => {
+      if (open && menuRef.current) {
+        menuRef.current.focus();
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!open) return;
+      const handleClickOutside = (e) => {
+        if (menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [open, setOpen, triggerRef]);
+    const handleKeyDown = useCallback(
+      (e) => {
+        const items = menuRef.current?.querySelectorAll(
+          `[data-dropdown-item]:not([data-disabled="true"])`
+        );
+        if (!items || items.length === 0) return;
+        const count = items.length;
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault();
+            const next = highlightedIndex < count - 1 ? highlightedIndex + 1 : 0;
+            setHighlightedIndex(next);
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault();
+            const prev = highlightedIndex > 0 ? highlightedIndex - 1 : count - 1;
+            setHighlightedIndex(prev);
+            break;
+          }
+          case "Enter":
+          case " ": {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && highlightedIndex < count) {
+              items[highlightedIndex].click();
+            }
+            break;
+          }
+          case "Escape": {
+            e.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+            break;
+          }
+        }
+      },
+      [highlightedIndex, setHighlightedIndex, setOpen, triggerRef]
+    );
+    if (!open) return null;
+    if (typeof document === "undefined") return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            menuRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          role: "menu",
+          tabIndex: -1,
+          className: cn("dropdown__menu", className),
+          style: { top: position.top, left: position.left },
+          onKeyDown: handleKeyDown,
+          ...rest,
+          children
+        }
+      ),
+      document.body
+    );
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+const DropdownItem = forwardRef(
+  ({ onSelect, disabled, children, className, ...rest }, ref) => {
+    const { setOpen } = useDropdownContext();
+    const handleClick = useCallback(() => {
+      if (disabled) return;
+      onSelect?.();
+      setOpen(false);
+    }, [disabled, onSelect, setOpen]);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      [handleClick]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        tabIndex: disabled ? void 0 : -1,
+        "data-dropdown-item": "",
+        "data-disabled": disabled || void 0,
+        className: cn("dropdown__item", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled || void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+const DropdownSeparator = forwardRef(
+  (_props, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, role: "separator", className: "dropdown__separator" });
+  }
+);
+DropdownSeparator.displayName = "DropdownSeparator";
+export {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSeparator,
+  DropdownTrigger
+};

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const EmptyState = forwardRef(
+  ({ icon, title, description, actions, className, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("empty-state", className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "empty-state__icon", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "empty-state__title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "empty-state__description", children: description }),
+    actions && /* @__PURE__ */ jsx("div", { className: "empty-state__actions", children: actions })
+  ] })
+);
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState
+};

package/dist/components/FAB/FAB.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const FAB = forwardRef(
+  ({
+    label,
+    variant = "primary",
+    size = "md",
+    position = "bottom-right",
+    extended,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        "aria-label": extended ? void 0 : label,
+        className: cn(
+          "fab",
+          `fab--${variant}`,
+          `fab--${size}`,
+          `fab--${position}`,
+          extended && "fab--extended",
+          className
+        ),
+        ...rest,
+        children: [
+          children,
+          extended && /* @__PURE__ */ jsx("span", { className: "fab__label", children: label })
+        ]
+      }
+    );
+  }
+);
+FAB.displayName = "FAB";
+export {
+  FAB
+};

package/dist/components/FAQ/FAQ.js

@@ -0,0 +1,64 @@
+"use client";
+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 });
+  }
+);
+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",
+                  {
+                    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"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "faq__answer", children: /* @__PURE__ */ jsx("div", { className: "faq__answer-inner", children: answer ?? children }) })
+        ]
+      }
+    );
+  }
+);
+FAQItem.displayName = "FAQItem";
+export {
+  FAQ,
+  FAQItem
+};

package/dist/components/FeatureGrid/FeatureGrid.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const FeatureGrid = forwardRef(
+  ({ columns = 3, className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "feature-grid",
+          columns !== 3 && `feature-grid--cols-${columns}`,
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+FeatureGrid.displayName = "FeatureGrid";
+const FeatureCard = forwardRef(
+  ({ icon, title, description, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("feature-card", className), ...rest, children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "feature-card__icon", children: icon }),
+      /* @__PURE__ */ jsx("h3", { className: "feature-card__title", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "feature-card__description", children: description })
+    ] });
+  }
+);
+FeatureCard.displayName = "FeatureCard";
+export {
+  FeatureCard,
+  FeatureGrid
+};

package/dist/components/FormField/FormField.js

@@ -0,0 +1,53 @@
+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) => {
+    const generatedId = useId();
+    const inputId = `form-field-${generatedId}`;
+    const descriptionId = description ? `${inputId}-description` : void 0;
+    const errorId = error ? `${inputId}-error` : void 0;
+    const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+    const control = isValidElement(children) ? cloneElement(children, {
+      id: inputId,
+      "aria-invalid": error ? "true" : void 0,
+      "aria-describedby": describedBy,
+      ...error ? { error: true } : {}
+    }) : children;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("form-field", className), ...rest, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "form-field__label",
+            required && "form-field__label--required"
+          ),
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "form-field__description", children: description }),
+      control,
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "form-field__error", role: "alert", children: error }),
+      maxLength != null && /* @__PURE__ */ jsxs("p", { className: "form-field__counter", children: [
+        currentLength ?? 0,
+        " / ",
+        maxLength
+      ] })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+export {
+  FormField
+};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { space } from "../../tokens.js";
+const GAP_MAP = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+const resolveGap = (v) => {
+  if (typeof v === "number") {
+    return space[v] ?? `${v}px`;
+  }
+  if (v in GAP_MAP) {
+    return GAP_MAP[v];
+  }
+  if (v in space) {
+    return space[v];
+  }
+  return v;
+};
+const Grid = forwardRef(
+  ({ columns, columnsMd, columnsSm, gap, gapMd, gapSm, className, style, ...rest }, ref) => {
+    const resolvedGap = gap != null ? resolveGap(gap) : void 0;
+    const resolvedGapMd = gapMd != null ? resolveGap(gapMd) : void 0;
+    const resolvedGapSm = gapSm != null ? resolveGap(gapSm) : void 0;
+    const vars = {
+      ...style,
+      ...columns != null ? { "--grid-cols": columns } : {},
+      ...columnsMd != null ? { "--grid-cols-md": columnsMd } : {},
+      ...columnsSm != null ? { "--grid-cols-sm": columnsSm } : {},
+      ...resolvedGap != null ? { "--grid-gap": resolvedGap } : {},
+      ...resolvedGapMd != null ? { "--grid-gap-md": resolvedGapMd } : {},
+      ...resolvedGapSm != null ? { "--grid-gap-sm": resolvedGapSm } : {}
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid", className),
+        style: vars,
+        ...rest
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+export {
+  Grid
+};

package/dist/components/Heading/Heading.js

@@ -0,0 +1,29 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, createElement } from "react";
+import { cn } from "../../lib/utils.js";
+const Heading = forwardRef(
+  ({ level = 2, as, description, bordered, className, children, ...rest }, ref) => {
+    const tag = as ?? `h${level}`;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      createElement(
+        tag,
+        {
+          ref,
+          className: cn(
+            "heading",
+            `heading--${level}`,
+            bordered && "heading--bordered",
+            className
+          ),
+          ...rest
+        },
+        children
+      ),
+      description && /* @__PURE__ */ jsx("p", { className: "heading__description", children: description })
+    ] });
+  }
+);
+Heading.displayName = "Heading";
+export {
+  Heading
+};