kaze-design-system 0.1.0

package/dist/components/Alert/Alert.js

@@ -0,0 +1,25 @@
+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 })
+        ] })
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+export {
+  Alert
+};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const Avatar = forwardRef(
+  ({ size = "md", src, alt, fallback, className, ...rest }, ref) => {
+    const showFallback = !src && fallback;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: showFallback ? "img" : void 0,
+        "aria-label": showFallback ? fallback : void 0,
+        className: cn("avatar", `avatar--${size}`, className),
+        ...rest,
+        children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: fallback })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar
+};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const Badge = forwardRef(
+  ({ variant = "default", dot, solid, live, className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        ...live ? { role: "status" } : {},
+        className: cn(
+          "badge",
+          `badge--${variant}`,
+          solid && "badge--solid",
+          className
+        ),
+        ...rest,
+        children: [
+          dot && /* @__PURE__ */ jsx("span", { className: "badge__dot", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+export {
+  Badge
+};

package/dist/components/BarChart/BarChart.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { CHART_COLORS } from "../../lib/chartColors.js";
+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);
+    }) });
+  }
+);
+BarChart.displayName = "BarChart";
+export {
+  BarChart
+};

package/dist/components/BarList/BarList.js

@@ -0,0 +1,51 @@
+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) => {
+    const sorted = sortOrder === "none" ? data : [...data].sort(
+      (a, b) => sortOrder === "ascending" ? a.value - b.value : b.value - a.value
+    );
+    const maxValue = Math.max(...sorted.map((d) => d.value), 1);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("barlist", className), ...rest, children: sorted.map((item, i) => {
+      const pct = item.value / maxValue * 100;
+      const display = item.displayValue ?? (valueFormatter ? valueFormatter(item.value) : String(item.value));
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "barlist__bar-wrapper", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "barlist__bar",
+              style: {
+                width: `${pct}%`,
+                ...item.color ? { backgroundColor: item.color } : {}
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "barlist__label", children: item.label })
+        ] }),
+        /* @__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);
+    }) });
+  }
+);
+BarList.displayName = "BarList";
+export {
+  BarList
+};

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Breadcrumb = forwardRef(
+  ({ items, label = "パンくず", className, ...rest }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, className, ...rest, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb", children: items.map((item, i) => {
+    const LinkComponent = item.as ?? "a";
+    return /* @__PURE__ */ jsx("li", { className: "breadcrumb__item", children: i < items.length - 1 && item.href ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: "breadcrumb__link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "breadcrumb__current", "aria-current": "page", children: item.label }) }, item.href ?? item.label);
+  }) }) })
+);
+Breadcrumb.displayName = "Breadcrumb";
+export {
+  Breadcrumb
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    fullWidth,
+    iconOnly,
+    disabled,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        disabled,
+        ...disabled ? { "aria-disabled": true } : {},
+        className: cn(
+          "btn",
+          `btn--${variant}`,
+          `btn--${size}`,
+          fullWidth && "btn--full",
+          iconOnly && "btn--icon",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/components/CTABanner/CTABanner.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const CTABanner = forwardRef(
+  ({ title, description, className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("cta-banner", className), ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { className: "cta-banner__title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "cta-banner__description", children: description }),
+      children && /* @__PURE__ */ jsx("div", { className: "cta-banner__actions", children })
+    ] });
+  }
+);
+CTABanner.displayName = "CTABanner";
+export {
+  CTABanner
+};

package/dist/components/Card/Card.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const Card = forwardRef(
+  ({ variant = "default", className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "card",
+          variant === "interactive" && "card--interactive",
+          variant === "compact" && "card--compact",
+          variant === "fill" && "card--fill",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+const CardHeader = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__header", className), ...rest, children });
+  }
+);
+CardHeader.displayName = "CardHeader";
+const CardTitle = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("h3", { ref, className: cn("card__title", className), ...rest, children });
+  }
+);
+CardTitle.displayName = "CardTitle";
+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) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__body", className), ...rest, children });
+  }
+);
+CardBody.displayName = "CardBody";
+const CardFooter = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("card__footer", className), ...rest, children });
+  }
+);
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils.js";
+const Checkbox = forwardRef(
+  ({ label, className, id: idProp, ...rest }, ref) => {
+    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
+        }
+      ),
+      label && /* @__PURE__ */ jsx("span", { children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/dist/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { lockScroll } from "../../utils/scrollLock.js";
+const CommandPalette = forwardRef(
+  ({
+    open,
+    onOpenChange,
+    commands,
+    placeholder = "コマンドを検索...",
+    searchLabel = "コマンド検索",
+    label,
+    emptyMessage = "該当するコマンドが見つかりません",
+    className,
+    ...rest
+  }, ref) => {
+    const [query, setQuery] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const dialogRef = useRef(null);
+    useFocusTrap(dialogRef, open);
+    useEffect(() => {
+      if (!open) return;
+      const unlock = lockScroll();
+      return unlock;
+    }, [open]);
+    const filtered = useMemo(() => {
+      if (!query.trim()) return commands;
+      const lower = query.toLowerCase();
+      return commands.filter((cmd) => cmd.label.toLowerCase().includes(lower));
+    }, [commands, query]);
+    const grouped = useMemo(() => {
+      const groups = /* @__PURE__ */ new Map();
+      for (const cmd of filtered) {
+        const group = cmd.group ?? "";
+        if (!groups.has(group)) {
+          groups.set(group, []);
+        }
+        groups.get(group).push(cmd);
+      }
+      return groups;
+    }, [filtered]);
+    const flatList = useMemo(() => {
+      const items = [];
+      for (const cmds of grouped.values()) {
+        items.push(...cmds);
+      }
+      return items;
+    }, [grouped]);
+    useEffect(() => {
+      if (open) {
+        setQuery("");
+        setHighlightedIndex(0);
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!listRef.current) return;
+      const items = listRef.current.querySelectorAll(
+        "[data-command-item]"
+      );
+      const highlighted = items[highlightedIndex];
+      highlighted?.scrollIntoView({ block: "nearest" });
+    }, [highlightedIndex]);
+    const handleInputChange = useCallback((e) => {
+      setQuery(e.target.value);
+      setHighlightedIndex(0);
+    }, []);
+    const handleSelect = useCallback(
+      (cmd) => {
+        cmd.onSelect();
+        onOpenChange(false);
+      },
+      [onOpenChange]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < flatList.length - 1 ? prev + 1 : 0
+            );
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : flatList.length - 1
+            );
+            break;
+          }
+          case "Enter": {
+            e.preventDefault();
+            if (flatList[highlightedIndex]) {
+              handleSelect(flatList[highlightedIndex]);
+            }
+            break;
+          }
+          case "Escape": {
+            e.stopPropagation();
+            onOpenChange(false);
+            break;
+          }
+        }
+      },
+      [flatList, highlightedIndex, handleSelect, onOpenChange]
+    );
+    const handleOverlayClick = useCallback(
+      (e) => {
+        if (e.target === e.currentTarget) {
+          onOpenChange(false);
+        }
+      },
+      [onOpenChange]
+    );
+    if (!open) return null;
+    if (typeof document === "undefined") return null;
+    let flatIndex = 0;
+    return createPortal(
+      /* @__PURE__ */ jsx("div", { className: "overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (node) => {
+            dialogRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label ?? "コマンドパレット",
+          className: cn("command-palette", className),
+          onKeyDown: handleKeyDown,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                className: "command-palette__input",
+                placeholder,
+                value: query,
+                onChange: handleInputChange,
+                "aria-label": searchLabel,
+                autoComplete: "off"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { ref: listRef, className: "command-palette__list", role: "listbox", children: [
+              flatList.length === 0 && /* @__PURE__ */ jsx("div", { className: "command-palette__empty", children: emptyMessage }),
+              Array.from(grouped.entries()).map(([group, cmds]) => /* @__PURE__ */ jsxs("div", { children: [
+                group && /* @__PURE__ */ jsx("div", { className: "command-palette__group", children: group }),
+                cmds.map((cmd) => {
+                  const index = flatIndex++;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "option",
+                      "data-command-item": "",
+                      "aria-selected": index === highlightedIndex,
+                      className: cn(
+                        "command-palette__item",
+                        index === highlightedIndex && "command-palette__item--active"
+                      ),
+                      onClick: () => handleSelect(cmd),
+                      onMouseEnter: () => setHighlightedIndex(index),
+                      children: [
+                        cmd.icon && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              display: "inline-flex",
+                              flexShrink: 0
+                            },
+                            children: cmd.icon
+                          }
+                        ),
+                        cmd.label
+                      ]
+                    },
+                    cmd.id
+                  );
+                })
+              ] }, group || "__default"))
+            ] })
+          ]
+        }
+      ) }),
+      document.body
+    );
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+export {
+  CommandPalette
+};

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,29 @@
+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
+  }
+));
+DescriptionList.displayName = "DescriptionList";
+const DescriptionItem = forwardRef(
+  ({ term, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("dl__group", className), ...rest, children: [
+    /* @__PURE__ */ jsx("dt", { className: "dl__term", children: term }),
+    /* @__PURE__ */ jsx("dd", { className: "dl__detail", children })
+  ] })
+);
+DescriptionItem.displayName = "DescriptionItem";
+export {
+  DescriptionItem,
+  DescriptionList
+};

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useRef, useState, useCallback, useEffect, useContext, createContext } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { lockScroll } from "../../utils/scrollLock.js";
+const CLOSE_ANIMATION_MS = 200;
+const Dialog = forwardRef(
+  ({ open, onClose, returnFocusRef: _returnFocusRef, className, children, ...rest }, ref) => {
+    const titleId = useId();
+    const internalRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const mergedRef = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    useEffect(() => {
+      if (open) {
+        setVisible(true);
+        setClosing(false);
+      } else if (visible) {
+        setClosing(true);
+        const timer = setTimeout(() => {
+          setClosing(false);
+          setVisible(false);
+        }, CLOSE_ANIMATION_MS);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!open) return;
+      const unlock = lockScroll();
+      return unlock;
+    }, [open]);
+    useFocusTrap(internalRef, open);
+    const handleOverlayClick = useCallback(
+      (e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      [onClose]
+    );
+    const handleOverlayKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+        }
+      },
+      [onClose]
+    );
+    if (!visible) return null;
+    if (typeof document === "undefined") return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("overlay", closing && "overlay--closing"),
+          onClick: handleOverlayClick,
+          onKeyDown: handleOverlayKeyDown,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: mergedRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              className: cn("dialog", className),
+              ...rest,
+              children: /* @__PURE__ */ jsx(DialogTitleIdContext.Provider, { value: titleId, children })
+            }
+          )
+        }
+      ),
+      document.body
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+const DialogTitleIdContext = createContext(void 0);
+const DialogHeader = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("dialog__header", className), ...rest, children });
+  }
+);
+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
+      }
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+const DialogBody = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("dialog__body", className), ...rest, children });
+  }
+);
+DialogBody.displayName = "DialogBody";
+const DialogFooter = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("dialog__footer", className), ...rest, children });
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+export {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+};