kaze-design-system 0.9.0 → 0.10.0

package/dist/components/Sidebar/Sidebar.js

@@ -1,6 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/Slot.js";
 const Sidebar = forwardRef(
   ({ children, logo, footer, navLabel = "メインナビゲーション", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs("aside", { ref, className: cn("sidebar", className), ...rest, children: [
@@ -12,10 +13,10 @@ const Sidebar = forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 const NavItem = forwardRef(
-  ({ icon, active, as: asProp, href, className, children, ...rest }, ref) => {
-    const Component = asProp ?? (href ? "a" : "button");
+  ({ icon, active, as: asProp, href, asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : asProp ?? (href ? "a" : "button");
     const typeAttr = Component === "button" ? { type: "button" } : {};
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Component,
       {
         ref,
@@ -24,10 +25,10 @@ const NavItem = forwardRef(
         href,
         ...typeAttr,
         ...rest,
-        children: [
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
           icon && /* @__PURE__ */ jsx("span", { className: "nav-item__icon", children: icon }),
           children
-        ]
+        ] })
       }
     );
   }

package/dist/components/StatusBadge/StatusBadge.js

@@ -2,17 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Badge } from "../Badge/Badge.js";
 const STATUS_CONFIG = {
-  live: { variant: "positive", label: "自動更新" },
-  stale: { variant: "warning", label: "要更新" },
-  missing: { variant: "negative", label: "欠損" },
-  manual: { variant: "default", label: "手動" },
-  loading: { variant: "info", label: "取得中" }
+  live: { tone: "positive", label: "自動更新" },
+  stale: { tone: "warning", label: "要更新" },
+  missing: { tone: "negative", label: "欠損" },
+  manual: { tone: "default", label: "手動" },
+  loading: { tone: "info", label: "取得中" }
 };
 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, tone: config.tone, dot, live: isLive, ...rest, children: label ?? config.label });
   }
 );
 StatusBadge.displayName = "StatusBadge";

package/dist/components/Stepper/Stepper.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
+import { renamedProp } from "../../lib/deprecate.js";
 const CheckIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -17,46 +18,49 @@ const CheckIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const Stepper = forwardRef(
-  ({ steps, currentStep, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("stepper", className), ...rest, children: /* @__PURE__ */ jsx("ol", { className: "stepper__list", children: steps.map((step, i) => {
-    const isCompleted = i < currentStep;
-    const isActive = i === currentStep;
-    return /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: "stepper__item",
-        "aria-current": isActive ? "step" : void 0,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("stepper__step", isActive && "stepper__step--active"), children: [
-            /* @__PURE__ */ jsx(
+  ({ steps, step: stepProp, currentStep: currentStepProp, className, ...rest }, ref) => {
+    const currentStep = renamedProp("Stepper", "currentStep", "step", currentStepProp, stepProp) ?? 0;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("stepper", className), ...rest, children: /* @__PURE__ */ jsx("ol", { className: "stepper__list", children: steps.map((step, i) => {
+      const isCompleted = i < currentStep;
+      const isActive = i === currentStep;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "stepper__item",
+          "aria-current": isActive ? "step" : void 0,
+          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__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(CheckIcon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "完了" })
+                  ] }) : i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
+            ] }),
+            i < steps.length - 1 && /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
-                  "stepper__circle",
-                  isActive && "stepper__circle--active",
-                  isCompleted && "stepper__circle--completed"
-                ),
-                children: isCompleted ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CheckIcon, {}),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "完了" })
-                ] }) : i + 1
+                  "stepper__connector",
+                  isCompleted && "stepper__connector--completed"
+                )
               }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
-          ] }),
-          i < steps.length - 1 && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "stepper__connector",
-                isCompleted && "stepper__connector--completed"
-              )
-            }
-          )
-        ]
-      },
-      i
-    );
-  }) }) })
+            )
+          ]
+        },
+        i
+      );
+    }) }) });
+  }
 );
 Stepper.displayName = "Stepper";
 export {

package/dist/components/Tabs/Tabs.js

@@ -1,13 +1,26 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useId, useRef, useEffect, useCallback, createContext } from "react";
+import { forwardRef, useContext, useId, useState, useCallback, useMemo, useRef, useEffect, createContext } from "react";
 import { cn } from "../../lib/utils.js";
 import { composeEventHandlers } from "../../lib/composeEventHandlers.js";
-const TabsIdContext = createContext(void 0);
+import { warnDeprecated } from "../../lib/deprecate.js";
+import { Slot } from "../../lib/Slot.js";
+const TabsContext = createContext(void 0);
 const TabGroup = forwardRef(
-  ({ children, className, ...rest }, ref) => {
+  ({ value: valueProp, defaultValue, onValueChange, children, className, ...rest }, ref) => {
     const prefix = useId();
-    return /* @__PURE__ */ jsx(TabsIdContext.Provider, { value: prefix, children: /* @__PURE__ */ jsx("div", { ref, className, ...rest, children }) });
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = valueProp !== void 0;
+    const value = isControlled ? valueProp : internalValue;
+    const select = useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const context = useMemo(() => ({ prefix, value, select }), [prefix, value, select]);
+    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ref, className, ...rest, children }) });
   }
 );
 TabGroup.displayName = "TabGroup";
@@ -80,25 +93,39 @@ const Tabs = forwardRef(
 );
 Tabs.displayName = "Tabs";
 const Tab = forwardRef(
-  ({ active, id, value, className, children, ...rest }, ref) => {
-    const contextPrefix = useContext(TabsIdContext);
+  ({ active: activeProp, id, value, asChild, className, children, onClick, ...rest }, ref) => {
+    const context = useContext(TabsContext);
     const fallbackPrefix = useId();
-    const prefix = contextPrefix ?? fallbackPrefix;
+    const prefix = context?.prefix ?? fallbackPrefix;
+    if (activeProp !== void 0) {
+      warnDeprecated(
+        "Tab.active",
+        "Tab の `active` は `TabGroup` の `value` / `defaultValue` に置き換わりました。次のマイナーバージョンで削除します"
+      );
+    }
+    const active = context?.value !== void 0 ? value !== void 0 && value === context.value : activeProp;
     const tabId = id ?? (value ? `${prefix}-tab-${value}` : void 0);
     const panelId = value ? `${prefix}-panel-${value}` : void 0;
     const text = typeof children === "string" ? children : void 0;
+    const handleClick = () => {
+      if (value !== void 0) context?.select(value);
+    };
+    const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
-      "button",
+      Comp,
       {
         ref,
         id: tabId,
         role: "tab",
+        type: asChild ? void 0 : "button",
         "aria-selected": active,
         "aria-controls": panelId,
         tabIndex: active ? 0 : -1,
         className: cn("tab", active && "tab--active", className),
+        "data-state": active ? "active" : "inactive",
         "data-text": text,
         ...rest,
+        onClick: composeEventHandlers(onClick, handleClick),
         children
       }
     );
@@ -106,12 +133,19 @@ const Tab = forwardRef(
 );
 Tab.displayName = "Tab";
 const TabPanel = forwardRef(
-  ({ value, selected, children, className, ...rest }, ref) => {
-    const contextPrefix = useContext(TabsIdContext);
+  ({ value, selected: selectedProp, children, className, ...rest }, ref) => {
+    const context = useContext(TabsContext);
     const fallbackPrefix = useId();
-    const prefix = contextPrefix ?? fallbackPrefix;
+    const prefix = context?.prefix ?? fallbackPrefix;
     const panelId = `${prefix}-panel-${value}`;
     const tabId = `${prefix}-tab-${value}`;
+    if (selectedProp !== void 0) {
+      warnDeprecated(
+        "TabPanel.selected",
+        "TabPanel の `selected` は `TabGroup` の `value` / `defaultValue` に置き換わりました。次のマイナーバージョンで削除します"
+      );
+    }
+    const selected = context?.value !== void 0 ? context.value : selectedProp;
     if (value !== selected) return null;
     return /* @__PURE__ */ jsx(
       "div",
@@ -122,6 +156,7 @@ const TabPanel = forwardRef(
         tabIndex: 0,
         "aria-labelledby": tabId,
         className: cn("tab-panel", className),
+        "data-state": "active",
         ...rest,
         children
       }

package/dist/components/Timeline/Timeline.js

@@ -1,25 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
 const Timeline = forwardRef(
   ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("timeline", className), ...rest, children })
 );
 Timeline.displayName = "Timeline";
 const TimelineItem = forwardRef(
-  ({ time, title, description, status = "default", className, ...rest }, ref) => /* @__PURE__ */ jsxs("li", { ref, className: cn("timeline-item", className), ...rest, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "timeline-item__dot",
-          status !== "default" && `timeline-item__dot--${status}`
-        )
-      }
-    ),
-    time && /* @__PURE__ */ jsx("span", { className: "timeline-item__time", children: time }),
-    /* @__PURE__ */ jsx("span", { className: "timeline-item__title", children: title }),
-    description && /* @__PURE__ */ jsx("span", { className: "timeline-item__description", children: description })
-  ] })
+  ({ time, title, description, tone: toneProp, status, className, ...rest }, ref) => {
+    const tone = renamedProp("TimelineItem", "status", "tone", status, toneProp) ?? "default";
+    return /* @__PURE__ */ jsxs("li", { ref, "data-tone": tone, className: cn("timeline-item", className), ...rest, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("timeline-item__dot", tone !== "default" && `timeline-item__dot--${tone}`)
+        }
+      ),
+      time && /* @__PURE__ */ jsx("span", { className: "timeline-item__time", children: time }),
+      /* @__PURE__ */ jsx("span", { className: "timeline-item__title", children: title }),
+      description && /* @__PURE__ */ jsx("span", { className: "timeline-item__description", children: description })
+    ] });
+  }
 );
 TimelineItem.displayName = "TimelineItem";
 export {

package/dist/components/Toast/Toast.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useMemo, useContext, createContext, forwardRef, useEffect } from "react";
 import { createPortal } from "react-dom";
+import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
 const ToastContext = createContext(null);
 function useToast() {
@@ -60,7 +61,8 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
     else focusRef.current = false;
     if (!hoverRef.current && !focusRef.current && !removing) startTimer();
   };
-  const variantClass = data.variant && data.variant !== "default" ? `toast--${data.variant}` : void 0;
+  const tone = data.tone ?? data.variant ?? "default";
+  const variantClass = tone !== "default" ? `toast--${tone}` : void 0;
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: hover/focus handlers only pause the auto-dismiss timer (WCAG 2.2.1); the element is a live region, not a control.
     /* @__PURE__ */ jsxs(
@@ -68,8 +70,10 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
       {
         ref,
         className: cn("toast", variantClass),
-        role: data.variant === "negative" || data.variant === "warning" ? "alert" : "status",
+        role: tone === "negative" || tone === "warning" ? "alert" : "status",
         "aria-atomic": "true",
+        "data-tone": tone,
+        "data-state": removing ? "closing" : "open",
         "data-removing": removing || void 0,
         onMouseEnter: () => pause("hover"),
         onMouseLeave: () => resume("hover"),
@@ -78,8 +82,8 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
           if (!e.currentTarget.contains(e.relatedTarget)) resume("focus");
         },
         children: [
-          data.variant && data.variant !== "default" && /* @__PURE__ */ jsxs("span", { className: "toast__icon", "aria-hidden": "true", children: [
-            data.variant === "positive" && /* @__PURE__ */ jsx(
+          tone !== "default" && /* @__PURE__ */ jsxs("span", { className: "toast__icon", "aria-hidden": "true", children: [
+            tone === "positive" && /* @__PURE__ */ jsx(
               "svg",
               {
                 "aria-hidden": "true",
@@ -95,7 +99,7 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
                 children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
               }
             ),
-            data.variant === "negative" && /* @__PURE__ */ jsxs(
+            tone === "negative" && /* @__PURE__ */ jsxs(
               "svg",
               {
                 "aria-hidden": "true",
@@ -115,7 +119,7 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
                 ]
               }
             ),
-            data.variant === "warning" && /* @__PURE__ */ jsxs(
+            tone === "warning" && /* @__PURE__ */ jsxs(
               "svg",
               {
                 "aria-hidden": "true",
@@ -135,7 +139,7 @@ const ToastItem = forwardRef(function ToastItem2(props, ref) {
                 ]
               }
             ),
-            data.variant === "info" && /* @__PURE__ */ jsxs(
+            tone === "info" && /* @__PURE__ */ jsxs(
               "svg",
               {
                 "aria-hidden": "true",
@@ -206,7 +210,7 @@ function ToastProvider({
       id,
       title: options.title,
       description: options.description,
-      variant: options.variant ?? "default",
+      tone: renamedProp("Toast", "variant", "tone", options.variant, options.tone) ?? "default",
       duration: options.duration ?? 4e3
     };
     setToasts((prev) => [...prev, newToast]);

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useId, useCallback, useEffect, useLayoutEffect, cloneElement, version } from "react";
+import { forwardRef, useState, useCallback, useRef, useId, useEffect, useLayoutEffect, cloneElement, version } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../../lib/utils.js";
 const GAP = 8;
@@ -57,8 +57,27 @@ function getChildRef(child) {
   return child.ref;
 }
 const Tooltip = forwardRef(
-  ({ content, children, side = "top", delay = 200, className, style }, ref) => {
-    const [open, setOpen] = useState(false);
+  ({
+    content,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    side = "top",
+    delay = 200,
+    className,
+    style
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== void 0;
+    const open = isControlled ? openProp : internalOpen;
+    const setOpen = useCallback(
+      (next) => {
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
     const [mounted, setMounted] = useState(false);
     const [position, setPosition] = useState({ top: 0, left: 0 });
     const triggerRef = useRef(null);
@@ -99,11 +118,11 @@ const Tooltip = forwardRef(
     const show = useCallback(() => {
       clearTimers();
       showTimerRef.current = setTimeout(() => setOpen(true), delay);
-    }, [delay, clearTimers]);
+    }, [delay, clearTimers, setOpen]);
     const hide = useCallback(() => {
       clearTimers();
       hideTimerRef.current = setTimeout(() => setOpen(false), HIDE_GRACE_MS);
-    }, [clearTimers]);
+    }, [clearTimers, setOpen]);
     const keepOpen = useCallback(() => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
       hideTimerRef.current = null;
@@ -118,7 +137,7 @@ const Tooltip = forwardRef(
       };
       document.addEventListener("keydown", onKeyDown);
       return () => document.removeEventListener("keydown", onKeyDown);
-    }, [open, clearTimers]);
+    }, [open, clearTimers, setOpen]);
     const childProps = children.props;
     const childRef = getChildRef(children);
     const describedBy = [childProps["aria-describedby"], tooltipId].filter(Boolean).join(" ");

package/dist/components/Tracker/Tracker.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
 const STATUS_LABELS = {
   positive: "正常",
@@ -8,8 +9,11 @@ const STATUS_LABELS = {
   info: "情報",
   default: "データなし"
 };
+function resolveTone(item) {
+  return renamedProp("Tracker", "status", "tone", item.status, item.tone) ?? "default";
+}
 function segmentText(item) {
-  const status = STATUS_LABELS[item.status];
+  const status = STATUS_LABELS[resolveTone(item)];
   if (!item.tooltip || item.tooltip === status) return status;
   return `${item.tooltip}（${status}）`;
 }
@@ -25,15 +29,19 @@ const Tracker = forwardRef(
           role: "figure",
           "aria-label": label ?? `${data.length}区間`,
           ...rest,
-          children: /* @__PURE__ */ jsx("ol", { className: "tracker__list", children: data.map((item, i) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              className: cn("tracker__segment", `tracker__segment--${item.status}`),
-              title: item.tooltip,
-              children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: segmentText(item) })
-            },
-            i
-          )) })
+          children: /* @__PURE__ */ jsx("ol", { className: "tracker__list", children: data.map((item, i) => {
+            const tone = resolveTone(item);
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-tone": tone,
+                className: cn("tracker__segment", `tracker__segment--${tone}`),
+                title: item.tooltip,
+                children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: segmentText(item) })
+              },
+              i
+            );
+          }) })
         }
       )
     );

package/dist/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { ThemeProvider, useTheme } from "./hooks/useTheme.js";
+import { Slot } from "./lib/Slot.js";
 import { Alert } from "./components/Alert/Alert.js";
 import { AppLayout } from "./components/Layout/Layout.js";
 import { Avatar } from "./components/Avatar/Avatar.js";
@@ -147,6 +148,7 @@ export {
   SidebarDivider,
   SidebarGroupLabel,
   Skeleton,
+  Slot,
   Sparkline,
   SplitSection,
   StatItem,

package/dist/lib/Slot.js

@@ -0,0 +1,52 @@
+"use client";
+import { version, forwardRef, Children, isValidElement, cloneElement } from "react";
+import { composeEventHandlers } from "./composeEventHandlers.js";
+import { cn } from "./utils.js";
+const REACT_MAJOR = Number.parseInt(version.split(".")[0] ?? "0", 10);
+function assignRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function getElementRef(element) {
+  if (REACT_MAJOR >= 19) return element.props.ref;
+  return element.ref;
+}
+const Slot = forwardRef(
+  ({ children, ...slotProps }, forwardedRef) => {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("[kaze] Slot (asChild) には React 要素を 1 つだけ渡してください");
+    }
+    const merged = mergeProps(slotProps, child.props);
+    const childRef = getElementRef(child);
+    merged.ref = (node) => {
+      assignRef(childRef, node);
+      assignRef(forwardedRef, node);
+    };
+    return cloneElement(child, merged);
+  }
+);
+Slot.displayName = "Slot";
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const [key, childValue] of Object.entries(childProps)) {
+    if (childValue === void 0) continue;
+    const slotValue = slotProps[key];
+    if (key === "className") {
+      merged.className = cn(slotValue, childValue);
+    } else if (key === "style") {
+      merged.style = {
+        ...slotValue,
+        ...childValue
+      };
+    } else if (/^on[A-Z]/.test(key) && typeof slotValue === "function" && typeof childValue === "function") {
+      merged[key] = composeEventHandlers(childValue, slotValue);
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+export {
+  Slot
+};

package/dist/lib/deprecate.js

@@ -0,0 +1,26 @@
+const warned = /* @__PURE__ */ new Set();
+function isProduction() {
+  try {
+    return typeof process !== "undefined" && process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+}
+function warnDeprecated(key, message) {
+  if (isProduction() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[kaze] ${message}`);
+}
+function renamedProp(component, oldName, newName, oldValue, newValue) {
+  if (newValue !== void 0) return newValue;
+  if (oldValue === void 0) return void 0;
+  warnDeprecated(
+    `${component}.${oldName}`,
+    `${component} の \`${oldName}\` は \`${newName}\` に改名しました。次のマイナーバージョンで削除します`
+  );
+  return oldValue;
+}
+export {
+  renamedProp,
+  warnDeprecated
+};

package/dist/types/components/Alert/Alert.d.ts

@@ -1,7 +1,11 @@
 import { type ReactNode, type HTMLAttributes } from "react";
-export type AlertVariant = "default" | "positive" | "negative" | "warning" | "info";
+import type { Tone } from "../../lib/types";
+/** @deprecated `Tone` を使う */
+export type AlertVariant = Tone;
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: AlertVariant;
+    tone?: Tone;
+    /** @deprecated `tone` に改名。次のマイナーで削除 */
+    variant?: Tone;
     icon?: ReactNode;
     title?: string;
     children: ReactNode;

package/dist/types/components/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from "react";
-export type AvatarSize = "xs" | "sm" | "md" | "lg";
+import type { Size } from "../../lib/types";
+export type AvatarSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     size?: AvatarSize;
     src?: string;

package/dist/types/components/Badge/Badge.d.ts

@@ -1,7 +1,11 @@
 import { type HTMLAttributes } from "react";
-export type BadgeVariant = "default" | "positive" | "negative" | "warning" | "info";
+import type { Tone } from "../../lib/types";
+/** @deprecated `Tone` を使う */
+export type BadgeVariant = Tone;
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    variant?: BadgeVariant;
+    tone?: Tone;
+    /** @deprecated `tone` に改名。次のマイナーで削除 */
+    variant?: Tone;
     dot?: boolean;
     /** Solid (inverted) style: filled background with white text */
     solid?: boolean;

package/dist/types/components/Button/Button.d.ts

@@ -1,10 +1,13 @@
 import { type ButtonHTMLAttributes } from "react";
+import type { Size } from "../../lib/types";
 export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
-export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type ButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     fullWidth?: boolean;
     iconOnly?: boolean;
+    /** 子要素にスタイルと振る舞いを委ねる（Next.js の Link など） */
+    asChild?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -1,7 +1,10 @@
 import { type HTMLAttributes, type RefObject } from "react";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     open: boolean;
-    onClose: () => void;
+    /** Escape / 背景クリック / 閉じる操作で呼ばれる。`open` を false にするのは呼び出し側 */
+    onOpenChange?: (open: boolean) => void;
+    /** @deprecated `onOpenChange` に改名。次のマイナーで削除 */
+    onClose?: () => void;
     /** @deprecated useFocusTrap handles focus restoration automatically. Kept for backward compat: ignored. */
     returnFocusRef?: RefObject<HTMLElement | null>;
 }