kaze-design-system 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -16,6 +16,25 @@ CHANGELOG entries and version bumps are generated automatically by `.github/work
 ### 0.x policy
 
 While the major version is 0, a **minor** release may include breaking changes (they are called out in the release notes with a migration note); a **patch** release never does. The public API will be frozen at 1.0.
+## [0.10.0] - 2026-10-29
+
+### Features
+
+- feat: unify the component API vocabulary (tone, Size, value/onValueChange, asChild, data-state) (#50)
+
+
+## [0.9.1] - 2026-10-29
+
+### Bug Fixes
+
+- fix: drop the lucide Github icon and split major dependency bumps (#44)
+
+### Other
+
+- chore(deps): bump actions/setup-node from 4 to 7 (#42)
+- chore(deps): bump actions/checkout from 4 to 7 (#41)
+
+
 ## [0.9.0] - 2026-10-29
 
 ### Features

package/components.css

@@ -2576,7 +2576,8 @@
   flex-direction: column;
 }
 
-.list--divided .list-item + .list-item {
+.list--divided .list-item + .list-item,
+.list--divided li + li > .list-item {
   border-top: 1px solid var(--color-border);
 }
 

package/dist/components/Alert/Alert.js

@@ -1,14 +1,28 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { renamedProp } from "../../lib/deprecate.js";
 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 })
-    ] })
-  ] })
+  ({ tone: toneProp, variant, icon, title, className, children, ...rest }, ref) => {
+    const tone = renamedProp("Alert", "variant", "tone", variant, toneProp) ?? "info";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-tone": tone,
+        className: cn("alert", `alert--${tone}`, 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 {

package/dist/components/Badge/Badge.js

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

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/Slot.js";
 const Button = forwardRef(
   ({
     variant = "primary",
@@ -8,16 +9,24 @@ const Button = forwardRef(
     fullWidth,
     iconOnly,
     disabled,
+    asChild,
     className,
     children,
+    onClick,
     ...rest
   }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const disabledProps = asChild ? {
+      "aria-disabled": true,
+      "data-disabled": "",
+      onClick: (e) => e.preventDefault()
+    } : { disabled, "aria-disabled": true };
     return /* @__PURE__ */ jsx(
-      "button",
+      Comp,
       {
         ref,
-        disabled,
-        ...disabled ? { "aria-disabled": true } : {},
+        onClick,
+        ...disabled ? disabledProps : {},
         className: cn(
           "btn",
           `btn--${variant}`,

package/dist/components/CommandPalette/CommandPalette.js

@@ -143,6 +143,7 @@ const CommandPalette = forwardRef(
           "aria-modal": "true",
           "aria-label": label ?? "コマンドパレット",
           className: cn("command-palette", className),
+          "data-state": "open",
           ...rest,
           onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
           children: [

package/dist/components/Dialog/Dialog.js

@@ -5,14 +5,25 @@ import { createPortal } from "react-dom";
 import { cn } from "../../lib/utils.js";
 import { useFocusTrap } from "../../hooks/useFocusTrap.js";
 import { lockScroll } from "../../utils/scrollLock.js";
+import { warnDeprecated } from "../../lib/deprecate.js";
 const CLOSE_ANIMATION_MS = 200;
 const dialogStack = [];
 const Dialog = forwardRef(
-  ({ open, onClose, returnFocusRef: _returnFocusRef, className, children, ...rest }, ref) => {
+  ({ open, onOpenChange, 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 requestClose = useCallback(() => {
+      if (onClose) {
+        warnDeprecated(
+          "Dialog.onClose",
+          "Dialog の `onClose` は `onOpenChange` に改名しました。次のマイナーバージョンで削除します"
+        );
+      }
+      onOpenChange?.(false);
+      onClose?.();
+    }, [onOpenChange, onClose]);
     const mergedRef = useCallback(
       (node) => {
         internalRef.current = node;
@@ -67,7 +78,7 @@ const Dialog = forwardRef(
       const onKeyDown = (e) => {
         if (e.key !== "Escape" || dialogStack[dialogStack.length - 1] !== token) return;
         e.stopPropagation();
-        onClose();
+        requestClose();
       };
       document.addEventListener("keydown", onKeyDown);
       return () => {
@@ -75,33 +86,42 @@ const Dialog = forwardRef(
         const i = dialogStack.indexOf(token);
         if (i >= 0) dialogStack.splice(i, 1);
       };
-    }, [trapActive, onClose]);
+    }, [trapActive, requestClose]);
     const handleOverlayClick = useCallback(
       (e) => {
         if (e.target === e.currentTarget) {
-          onClose();
+          requestClose();
         }
       },
-      [onClose]
+      [requestClose]
     );
     if (!visible) return null;
     if (typeof document === "undefined") return null;
     return createPortal(
       // biome-ignore lint/a11y/useKeyWithClickEvents: Escape is handled on document (see above), so the backdrop needs no key handler.
       // biome-ignore lint/a11y/noStaticElementInteractions: the backdrop only handles click-outside-to-close; keyboard users close the dialog with Escape, and the backdrop itself must not be focusable.
-      /* @__PURE__ */ jsx("div", { className: cn("overlay", closing && "overlay--closing"), onClick: handleOverlayClick, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         "div",
         {
-          ref: mergedRef,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          tabIndex: -1,
-          className: cn("dialog", className),
-          ...rest,
-          children: /* @__PURE__ */ jsx(DialogTitleIdContext.Provider, { value: titleId, children })
+          className: cn("overlay", closing && "overlay--closing"),
+          "data-state": open && !closing ? "open" : "closed",
+          onClick: handleOverlayClick,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: mergedRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              tabIndex: -1,
+              className: cn("dialog", className),
+              "data-state": open && !closing ? "open" : "closed",
+              ...rest,
+              children: /* @__PURE__ */ jsx(DialogTitleIdContext.Provider, { value: titleId, children })
+            }
+          )
         }
-      ) }),
+      ),
       document.body
     );
   }

package/dist/components/Disclosure/Disclosure.js

@@ -93,6 +93,7 @@ const Disclosure = forwardRef(
                 triggerClassName
               ),
               "aria-expanded": isOpen,
+              "data-state": isOpen ? "open" : "closed",
               "aria-controls": contentId,
               disabled,
               onClick: toggle,
@@ -129,6 +130,7 @@ const Disclosure = forwardRef(
               "aria-labelledby": triggerId,
               className: cn("disclosure__content", contentClassName),
               hidden: !isOpen,
+              "data-state": isOpen ? "open" : "closed",
               children: /* @__PURE__ */ jsx("div", { className: "disclosure__content-inner", children })
             }
           )

package/dist/components/Dropdown/Dropdown.js

@@ -85,6 +85,7 @@ const DropdownTrigger = forwardRef(
       "aria-haspopup": "menu",
       "aria-expanded": open,
       "aria-controls": open ? menuId : void 0,
+      "data-state": open ? "open" : "closed",
       onClick: composeEventHandlers(childProps?.onClick, handleClick),
       onKeyDown: composeEventHandlers(childProps?.onKeyDown, handleKeyDown)
     };
@@ -191,6 +192,7 @@ const DropdownMenu = forwardRef(
           tabIndex: -1,
           "aria-labelledby": rest["aria-labelledby"] ?? triggerId,
           className: cn("dropdown__menu", className),
+          "data-state": "open",
           style: { ...style, top: position.top, left: position.left },
           onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
           children

package/dist/components/FAB/FAB.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 FAB = forwardRef(
   ({
     label,
@@ -8,14 +9,25 @@ const FAB = forwardRef(
     size = "md",
     position = "bottom-right",
     extended,
+    disabled,
+    asChild,
     className,
     children,
+    onClick,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "button",
+    const Comp = asChild ? Slot : "button";
+    const disabledProps = asChild ? {
+      "aria-disabled": true,
+      "data-disabled": "",
+      onClick: (e) => e.preventDefault()
+    } : { disabled, "aria-disabled": true };
+    return /* @__PURE__ */ jsx(
+      Comp,
       {
         ref,
+        onClick,
+        ...disabled ? disabledProps : {},
         "aria-label": extended ? void 0 : label,
         className: cn(
           "fab",
@@ -26,10 +38,10 @@ const FAB = forwardRef(
           className
         ),
         ...rest,
-        children: [
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
           children,
           extended && /* @__PURE__ */ jsx("span", { className: "fab__label", children: label })
-        ]
+        ] })
       }
     );
   }

package/dist/components/FilterPill/FilterPill.js

@@ -12,6 +12,7 @@ const FilterPill = forwardRef(
         className: cn("filter-pill", active && "filter-pill--active", className),
         style: pillStyle,
         "aria-pressed": active,
+        "data-state": active ? "on" : "off",
         ...rest,
         children: [
           dot && /* @__PURE__ */ jsx("span", { className: "filter-pill__dot", "aria-hidden": "true" }),

package/dist/components/HelpButton/HelpButton.js

@@ -87,6 +87,7 @@ const HelpButton = forwardRef(
           className: cn("help-button", className),
           "aria-label": ariaLabel,
           "aria-expanded": open,
+          "data-state": open ? "open" : "closed",
           "aria-controls": open ? popoverId : void 0,
           onClick: () => setOpen((v) => !v),
           children: icon ?? "?"
@@ -100,6 +101,7 @@ const HelpButton = forwardRef(
             id: popoverId,
             role: "dialog",
             "aria-modal": "false",
+            "data-state": "open",
             className: cn("help-popover", `help-popover--${size}`),
             style: { top: coords.top, left: coords.left },
             children: [

package/dist/components/List/List.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, Children, isValidElement, cloneElement } from "react";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/Slot.js";
 const List = forwardRef(
   ({ divided, marker, className, children, ...rest }, ref) => {
     const Tag = marker === "decimal" ? "ol" : "ul";
@@ -22,23 +23,26 @@ const List = forwardRef(
 );
 List.displayName = "List";
 const ListItem = forwardRef(
-  ({ leading, trailing, title, description, interactive, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
-    "li",
-    {
-      ref,
-      className: cn("list-item", interactive && "list-item--interactive", className),
-      ...rest,
-      children: [
-        leading && /* @__PURE__ */ jsx("span", { className: "list-item__leading", children: leading }),
-        /* @__PURE__ */ jsxs("span", { className: "list-item__content", children: [
-          title && /* @__PURE__ */ jsx("span", { className: "list-item__title", children: title }),
-          description && /* @__PURE__ */ jsx("span", { className: "list-item__description", children: description }),
-          children
-        ] }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "list-item__trailing", children: trailing })
-      ]
+  ({ leading, trailing, title, description, interactive, asChild, className, children, ...rest }, ref) => {
+    const classes = cn("list-item", interactive && "list-item--interactive", className);
+    const row = (content) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading && /* @__PURE__ */ jsx("span", { className: "list-item__leading", children: leading }),
+      /* @__PURE__ */ jsxs("span", { className: "list-item__content", children: [
+        title && /* @__PURE__ */ jsx("span", { className: "list-item__title", children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: "list-item__description", children: description }),
+        content
+      ] }),
+      trailing && /* @__PURE__ */ jsx("span", { className: "list-item__trailing", children: trailing })
+    ] });
+    if (asChild) {
+      const child = Children.only(children);
+      if (!isValidElement(child)) {
+        throw new Error("[kaze] ListItem (asChild) には React 要素を 1 つだけ渡してください");
+      }
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...rest, children: cloneElement(child, void 0, row(child.props.children)) }) });
     }
-  )
+    return /* @__PURE__ */ jsx("li", { ref, className: classes, ...rest, children: row(children) });
+  }
 );
 ListItem.displayName = "ListItem";
 export {

package/dist/components/Meter/Meter.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { renamedProp } from "../../lib/deprecate.js";
 import { cn } from "../../lib/utils.js";
 function autoColor(pct, warn, danger) {
   if (pct >= danger) return "negative";
@@ -15,6 +16,7 @@ const Meter = forwardRef(
     dangerThreshold = 0.9,
     label,
     showValue,
+    tone: toneProp,
     color,
     size = "md",
     className,
@@ -22,8 +24,8 @@ const Meter = forwardRef(
   }, ref) => {
     const range = max - min || 1;
     const pct = Math.min(1, Math.max(0, (value - min) / range));
-    const resolvedColor = color ?? autoColor(pct, warningThreshold, dangerThreshold);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("meter", className), ...rest, children: [
+    const tone = renamedProp("Meter", "color", "tone", color, toneProp) ?? autoColor(pct, warningThreshold, dangerThreshold);
+    return /* @__PURE__ */ jsxs("div", { ref, "data-tone": tone, className: cn("meter", className), ...rest, children: [
       (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "meter__label-row", children: [
         label && /* @__PURE__ */ jsx("span", { className: "meter__label", children: label }),
         showValue && /* @__PURE__ */ jsxs("span", { className: "meter__value-text", children: [
@@ -45,10 +47,7 @@ const Meter = forwardRef(
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(
-                  "meter__fill",
-                  resolvedColor !== "default" && `meter__fill--${resolvedColor}`
-                ),
+                className: cn("meter__fill", tone !== "default" && `meter__fill--${tone}`),
                 style: { width: `${pct * 100}%` }
               }
             ),

package/dist/components/Navbar/Navbar.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/Slot.js";
 const Navbar = forwardRef(
   ({ logo, actions, transparent, className, children, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -28,12 +29,14 @@ const NavbarLinks = forwardRef(
 );
 NavbarLinks.displayName = "NavbarLinks";
 const NavbarLink = forwardRef(
-  ({ active, as: Component = "a", className, children, ...rest }, ref) => {
+  ({ active, as: asProp = "a", asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : asProp;
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Component,
       {
         ref,
         className: cn("navbar__link", active && "navbar__link--active", className),
+        "aria-current": active ? "page" : void 0,
         ...rest,
         children
       }

package/dist/components/NumberField/NumberField.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useId, useState, useRef, useCallback, useEffect } from "react";
 import { cn } from "../../lib/utils.js";
 import { composeEventHandlers } from "../../lib/composeEventHandlers.js";
+import { renamedProp } from "../../lib/deprecate.js";
 import { normalizeNumericInput, isComposingEvent } from "../../lib/jaText.js";
 const currencyConfig = {
   JPY: { locale: "ja-JP", symbol: "¥", decimals: 0 },
@@ -49,6 +50,7 @@ const NumberField = forwardRef(
   ({
     value: valueProp,
     defaultValue,
+    onValueChange,
     onChange,
     min,
     max,
@@ -81,12 +83,19 @@ const NumberField = forwardRef(
     const [internalValue, setInternalValue] = useState(defaultValue ?? null);
     const value = isControlled ? valueProp : internalValue;
     const numberLocale = resolveLocale(locale, currency);
+    const handleValueChange = renamedProp(
+      "NumberField",
+      "onChange",
+      "onValueChange",
+      onChange,
+      onValueChange
+    );
     const emit = useCallback(
       (next) => {
         if (!isControlled) setInternalValue(next);
-        onChange?.(next);
+        handleValueChange?.(next);
       },
-      [isControlled, onChange]
+      [isControlled, handleValueChange]
     );
     const resolvedPrefix = prefixProp ?? (currency ? currencyConfig[currency].symbol : void 0);
     const clamp = useCallback(

package/dist/components/Pagination/Pagination.js

@@ -1,6 +1,8 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { cn } from "../../lib/utils.js";
+import { renamedProp } from "../../lib/deprecate.js";
 function getPages(current, total, siblings) {
   const range = [];
   const left = Math.max(2, current - siblings);
@@ -15,7 +17,9 @@ function getPages(current, total, siblings) {
 const defaultPageLabel = (page) => `${page}ページ目`;
 const Pagination = forwardRef(
   ({
-    currentPage,
+    page: pageProp,
+    defaultPage = 1,
+    currentPage: currentPageProp,
     totalPages,
     onPageChange,
     siblingCount = 1,
@@ -26,6 +30,19 @@ const Pagination = forwardRef(
     className,
     ...rest
   }, ref) => {
+    const controlledPage = renamedProp(
+      "Pagination",
+      "currentPage",
+      "page",
+      currentPageProp,
+      pageProp
+    );
+    const [internalPage, setInternalPage] = useState(defaultPage);
+    const currentPage = controlledPage ?? internalPage;
+    const goTo = (next) => {
+      if (controlledPage === void 0) setInternalPage(next);
+      onPageChange?.(next);
+    };
     const pages = getPages(currentPage, totalPages, siblingCount);
     return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, className: cn("pagination", className), ...rest, children: [
       /* @__PURE__ */ jsx(
@@ -34,7 +51,7 @@ const Pagination = forwardRef(
           type: "button",
           className: "pagination__btn",
           disabled: currentPage <= 1,
-          onClick: () => onPageChange?.(currentPage - 1),
+          onClick: () => goTo(currentPage - 1),
           "aria-label": prevLabel,
           children: "‹"
         }
@@ -45,7 +62,7 @@ const Pagination = forwardRef(
           {
             type: "button",
             className: cn("pagination__btn", page === currentPage && "pagination__btn--active"),
-            onClick: () => onPageChange?.(page),
+            onClick: () => goTo(page),
             "aria-label": pageLabel(page),
             "aria-current": page === currentPage ? "page" : void 0,
             children: page
@@ -59,7 +76,7 @@ const Pagination = forwardRef(
           type: "button",
           className: "pagination__btn",
           disabled: currentPage >= totalPages,
-          onClick: () => onPageChange?.(currentPage + 1),
+          onClick: () => goTo(currentPage + 1),
           "aria-label": nextLabel,
           children: "›"
         }

package/dist/components/Progress/Progress.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { renamedProp } from "../../lib/deprecate.js";
 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, tone: toneProp, color, size = "md", className, ...rest }, ref) => {
+    const tone = renamedProp("Progress", "color", "tone", color, toneProp) ?? "default";
     const pct = Math.min(100, Math.max(0, value / max * 100));
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("progress", className), ...rest, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, "data-tone": tone, className: cn("progress", className), ...rest, children: [
       (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "progress__label-row", children: [
         label && /* @__PURE__ */ jsx("span", { className: "progress__label", children: label }),
         showValue && /* @__PURE__ */ jsxs("span", { className: "progress__value-text", children: [
@@ -24,7 +26,7 @@ const Progress = forwardRef(
           children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("progress__fill", color !== "default" && `progress__fill--${color}`),
+              className: cn("progress__fill", tone !== "default" && `progress__fill--${tone}`),
               style: { width: `${pct}%` }
             }
           )

package/dist/components/Search/Search.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import { cn } from "../../lib/utils.js";
+import { renamedProp } from "../../lib/deprecate.js";
 import { composeEventHandlers } from "../../lib/composeEventHandlers.js";
 import { isComposingEvent } from "../../lib/jaText.js";
 const Search = forwardRef(
@@ -10,24 +11,33 @@ const Search = forwardRef(
     shortcut,
     onSearch,
     value: valueProp,
+    defaultValue = "",
+    onValueChange,
     onChange: onChangeProp,
     "aria-label": ariaLabel,
     inputProps,
     className,
     ...rest
   }, ref) => {
-    const [internalValue, setInternalValue] = useState("");
+    const [internalValue, setInternalValue] = useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const currentValue = isControlled ? valueProp : internalValue;
+    const onValueChangeResolved = renamedProp(
+      "Search",
+      "onChange",
+      "onValueChange",
+      onChangeProp,
+      onValueChange
+    );
     const handleChange = useCallback(
       (e) => {
         const newValue = e.target.value;
         if (!isControlled) {
           setInternalValue(newValue);
         }
-        onChangeProp?.(newValue);
+        onValueChangeResolved?.(newValue);
       },
-      [isControlled, onChangeProp]
+      [isControlled, onValueChangeResolved]
     );
     const handleKeyDown = useCallback(
       (e) => {

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -98,6 +98,7 @@ const SegmentedControl = forwardRef(
                   role: "radio",
                   "aria-checked": checked,
                   "data-value": o.value,
+                  "data-state": checked ? "on" : "off",
                   disabled: o.disabled,
                   tabIndex: o.value === tabStop ? 0 : -1,
                   className: "segmented-control__option",