@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/ai/suggestion/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/ai/suggestion/index.d.ts
-declare const Suggestion: {
+export declare const Suggestion: {
   readonly List: import("react").FC<{
     label?: string;
     children: import("react").ReactNode;
@@ -10,5 +10,4 @@ declare const Suggestion: {
     children?: import("react").ReactNode;
   }>;
 };
-//#endregion
-export { Suggestion };
+//#endregion

package/dist/components/ai/suggestion/suggestion.css

@@ -0,0 +1,32 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._17P9Rq_list {
+    gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  ._17P9Rq_item {
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-subtle);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    color: var(--color-fg-base);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+  }
+
+  @media (hover: hover) {
+    ._17P9Rq_item:hover {
+      background-color: var(--color-bg-mute);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/ai/suggestion/suggestion.d.mts

@@ -4,12 +4,12 @@ type ListProps = {
   label?: string;
   children: ReactNode;
 };
-declare const List: FC<ListProps>;
+export declare const List: FC<ListProps>;
 type ItemProps = {
   value: string;
   onSelect?: (value: string) => void;
   children?: ReactNode;
 };
-declare const Item: FC<ItemProps>;
+export declare const Item: FC<ItemProps>;
 //#endregion
-export { Item, List };
+export {};

package/dist/components/ai/suggestion/suggestion.mjs

@@ -1,20 +1,21 @@
 "use client";
-import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import suggestion_module_default from "./suggestion.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai/suggestion/suggestion.tsx
 const List = ({ label, children }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": label ?? messages.suggestions,
-		className: "flex flex-wrap gap-2",
+		className: suggestion_module_default.list,
 		role: "group",
 		children
 	});
 };
 const Item = ({ value, onSelect, children }) => /* @__PURE__ */ jsx("button", {
-	className: cn("rounded-full border border-border-base bg-bg-subtle px-3 py-1.5 text-sm text-fg-base transition-colors duration-150 ease-out hover:bg-bg-mute", FOCUS_RING),
+	className: clsx(suggestion_module_default.item, focus_ring_module_default.ring),
 	onClick: () => {
 		onSelect?.(value);
 	},

package/dist/components/ai/suggestion/suggestion.module.mjs

@@ -0,0 +1,8 @@
+import './suggestion.css';
+//#region src/components/ai/suggestion/suggestion.module.css
+var suggestion_module_default = {
+	"item": "_17P9Rq_item",
+	"list": "_17P9Rq_list"
+};
+//#endregion
+export { suggestion_module_default as default };

package/dist/components/ai/tool-invocation/approval-bar.css

@@ -0,0 +1,26 @@
+@layer properties, theme, base;
+
+@layer components {
+  .lz-KpW_root {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .lz-KpW_request {
+    min-width: 0;
+    color: var(--color-fg-base);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    flex: 1;
+  }
+
+  .lz-KpW_buttons {
+    gap: calc(var(--spacing) * 2);
+    flex-shrink: 0;
+    display: flex;
+  }
+}
+
+@layer utilities;

package/dist/components/ai/tool-invocation/approval-bar.d.mts

@@ -0,0 +1,12 @@
+import { ToolApproval, ToolApprovalResponse } from "../types.mjs";
+import { FC } from "react";
+//#region src/components/ai/tool-invocation/approval-bar.d.ts
+type Props = {
+  approval: ToolApproval;
+  nameId: string;
+  triggerId: string;
+  onApprovalResponse?: (response: ToolApprovalResponse) => void | PromiseLike<void>;
+};
+export declare const ApprovalBar: FC<Props>;
+//#endregion
+export {};

package/dist/components/ai/tool-invocation/approval-bar.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import { Button } from "../../buttons/button/button.mjs";
+import approval_bar_module_default from "./approval-bar.module.mjs";
+import { useCallback, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/tool-invocation/approval-bar.tsx
+const renderFocusable = ({ disabled: _disabled, ...props }) => /* @__PURE__ */ jsx("button", {
+	...props,
+	type: "button"
+});
+const ApprovalBar = ({ approval, nameId, triggerId, onApprovalResponse }) => {
+	const messages = getMessages();
+	const [isResponding, startTransition] = useTransition();
+	const keepFocusOnAnswer = useCallback((group) => () => {
+		if (group.contains(document.activeElement)) document.querySelector(`#${CSS.escape(triggerId)}`)?.focus();
+	}, [triggerId]);
+	const respond = (approved) => {
+		startTransition(async () => {
+			await onApprovalResponse?.({
+				id: approval.id,
+				approved
+			});
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-labelledby": nameId,
+		className: approval_bar_module_default.root,
+		ref: keepFocusOnAnswer,
+		role: "group",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: approval_bar_module_default.request,
+			children: approval.requestReason ?? messages.toolApprovalRequest
+		}), onApprovalResponse !== void 0 && /* @__PURE__ */ jsxs("div", {
+			className: approval_bar_module_default.buttons,
+			children: [/* @__PURE__ */ jsx(Button, {
+				color: "base",
+				disabled: isResponding,
+				onClick: () => {
+					respond(false);
+				},
+				renderItem: renderFocusable,
+				size: "sm",
+				variant: "outline",
+				children: messages.toolDeny
+			}), /* @__PURE__ */ jsx(Button, {
+				disabled: isResponding,
+				onClick: () => {
+					respond(true);
+				},
+				renderItem: renderFocusable,
+				size: "sm",
+				children: messages.toolApprove
+			})]
+		})]
+	});
+};
+//#endregion
+export { ApprovalBar };

package/dist/components/ai/tool-invocation/approval-bar.module.mjs

@@ -0,0 +1,9 @@
+import './approval-bar.css';
+//#region src/components/ai/tool-invocation/approval-bar.module.css
+var approval_bar_module_default = {
+	"buttons": "lz-KpW_buttons",
+	"request": "lz-KpW_request",
+	"root": "lz-KpW_root"
+};
+//#endregion
+export { approval_bar_module_default as default };

package/dist/components/ai/tool-invocation/index.mjs

@@ -1,2 +1 @@
-import { ToolInvocation } from "./tool-invocation.mjs";
-export { ToolInvocation };
+export { ToolInvocation } from "./tool-invocation.mjs";

package/dist/components/ai/tool-invocation/tool-invocation.css

@@ -0,0 +1,55 @@
+@layer properties, theme, base;
+
+@layer components {
+  .EmiAxa_info {
+    color: var(--color-fg-info);
+  }
+
+  .EmiAxa_success {
+    color: var(--color-fg-success);
+  }
+
+  .EmiAxa_error {
+    color: var(--color-fg-error);
+  }
+
+  .EmiAxa_warning {
+    color: var(--color-fg-warning);
+  }
+
+  .EmiAxa_name {
+    color: var(--color-fg-base);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .EmiAxa_body {
+    gap: calc(var(--spacing) * 3);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .EmiAxa_caption {
+    margin-bottom: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .EmiAxa_code {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-mute);
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-fg-base);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    overflow-x: auto;
+  }
+
+  .EmiAxa_message {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+}
+
+@layer utilities;

package/dist/components/ai/tool-invocation/tool-invocation.d.mts

@@ -1,4 +1,4 @@
-import { ToolState } from "../types.mjs";
+import { ToolApproval, ToolApprovalResponse, ToolState } from "../types.mjs";
 import { FC, ReactNode } from "react";
 //#region src/components/ai/tool-invocation/tool-invocation.d.ts
 type Props = {
@@ -7,11 +7,12 @@ type Props = {
   input?: unknown;
   output?: ReactNode;
   errorText?: string;
-  deniedReason?: string;
+  approval?: ToolApproval;
+  onApprovalResponse?: (response: ToolApprovalResponse) => void | PromiseLike<void>;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 };
-declare const ToolInvocation: FC<Props>;
+export declare const ToolInvocation: FC<Props>;
 //#endregion
-export { ToolInvocation };
+export {};

package/dist/components/ai/tool-invocation/tool-invocation.mjs

@@ -1,24 +1,34 @@
-"use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { Spinner } from "../../feedback/spinner/spinner.mjs";
 import { AlertIcon, CheckIcon } from "../../icons/lucide.mjs";
 import { Collapsible } from "../_internal/collapsible.mjs";
+import { ApprovalBar } from "./approval-bar.mjs";
+import tool_invocation_module_default from "./tool-invocation.module.mjs";
+import { clsx } from "clsx";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai/tool-invocation/tool-invocation.tsx
-const stateIcon = (state) => {
+const stateIcon = (state, awaitsUser) => {
+	if (awaitsUser) return /* @__PURE__ */ jsx("span", {
+		className: tool_invocation_module_default.info,
+		children: /* @__PURE__ */ jsx(AlertIcon, {
+			size: "sm",
+			status: "info"
+		})
+	});
 	if (state === "output-available") return /* @__PURE__ */ jsx("span", {
-		className: "text-fg-success",
+		className: tool_invocation_module_default.success,
 		children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
 	});
 	if (state === "output-error") return /* @__PURE__ */ jsx("span", {
-		className: "text-fg-error",
+		className: tool_invocation_module_default.error,
 		children: /* @__PURE__ */ jsx(AlertIcon, {
 			size: "sm",
 			status: "error"
 		})
 	});
 	if (state === "output-denied") return /* @__PURE__ */ jsx("span", {
-		className: "text-fg-warning",
+		className: tool_invocation_module_default.warning,
 		children: /* @__PURE__ */ jsx(AlertIcon, {
 			size: "sm",
 			status: "warning"
@@ -34,36 +44,47 @@ const stringify = (value) => {
 		return String(value);
 	}
 };
-const ToolInvocation = ({ name, state, input, output, errorText, deniedReason, isOpen, defaultOpen = false, onChange }) => {
-	const messages = useMessages();
+const ToolInvocation = ({ name, state, input, output, errorText, approval, onApprovalResponse, isOpen, defaultOpen = false, onChange }) => {
+	const messages = getMessages();
+	const nameId = useId();
+	const triggerId = useId();
+	const pendingApproval = state === "approval-requested" && approval?.isAutomatic !== true ? approval : void 0;
 	return /* @__PURE__ */ jsx(Collapsible, {
 		defaultOpen,
-		icon: stateIcon(state),
+		icon: stateIcon(state, pendingApproval !== void 0),
 		isOpen,
 		label: /* @__PURE__ */ jsx("span", {
-			className: "text-fg-base font-medium",
+			className: tool_invocation_module_default.name,
+			id: nameId,
 			children: name
 		}),
 		onChange,
+		triggerId,
+		footer: pendingApproval === void 0 ? void 0 : /* @__PURE__ */ jsx(ApprovalBar, {
+			approval: pendingApproval,
+			nameId,
+			onApprovalResponse,
+			triggerId
+		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3",
+			className: tool_invocation_module_default.body,
 			children: [input !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-				className: "text-fg-mute mb-1 text-xs font-medium",
+				className: tool_invocation_module_default.caption,
 				children: messages.toolInput
 			}), /* @__PURE__ */ jsx("pre", {
-				className: "bg-bg-mute text-fg-base overflow-x-auto rounded-lg p-2 text-xs",
+				className: tool_invocation_module_default.code,
 				children: stringify(input)
 			})] }), state === "output-error" ? /* @__PURE__ */ jsx("p", {
-				className: "text-fg-error text-sm",
+				className: clsx(tool_invocation_module_default.message, tool_invocation_module_default.error),
 				children: errorText ?? messages.toolError
 			}) : state === "output-denied" ? /* @__PURE__ */ jsx("p", {
-				className: "text-fg-warning text-sm",
-				children: deniedReason ?? messages.toolDenied
+				className: clsx(tool_invocation_module_default.message, tool_invocation_module_default.warning),
+				children: approval?.reason ?? messages.toolDenied
 			}) : output === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-				className: "text-fg-mute mb-1 text-xs font-medium",
+				className: tool_invocation_module_default.caption,
 				children: messages.toolOutput
 			}), typeof output === "string" ? /* @__PURE__ */ jsx("pre", {
-				className: "bg-bg-mute text-fg-base overflow-x-auto rounded-lg p-2 text-xs",
+				className: tool_invocation_module_default.code,
 				children: output
 			}) : output] })]
 		})

package/dist/components/ai/tool-invocation/tool-invocation.module.mjs

@@ -0,0 +1,15 @@
+import './tool-invocation.css';
+//#region src/components/ai/tool-invocation/tool-invocation.module.css
+var tool_invocation_module_default = {
+	"body": "EmiAxa_body",
+	"caption": "EmiAxa_caption",
+	"code": "EmiAxa_code",
+	"error": "EmiAxa_error",
+	"info": "EmiAxa_info",
+	"message": "EmiAxa_message",
+	"name": "EmiAxa_name",
+	"success": "EmiAxa_success",
+	"warning": "EmiAxa_warning"
+};
+//#endregion
+export { tool_invocation_module_default as default };

package/dist/components/ai/types.d.mts

@@ -1,5 +1,22 @@
 //#region src/components/ai/types.d.ts
-type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
-type ToolState = 'input-streaming' | 'input-available' | 'approval-requested' | 'approval-responded' | 'output-available' | 'output-error' | 'output-denied';
-//#endregion
-export { ChatStatus, ToolState };
+export type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+export type ToolState = 'input-streaming' | 'input-available' | 'approval-requested' | 'approval-responded' | 'output-available' | 'output-error' | 'output-denied';
+/**
+ * AI SDK の `part.approval` と同じ形にして、パートのオブジェクトをそのまま渡せる
+ * ようにしている。
+ */
+export type ToolApproval = {
+  id: string;
+  approved?: boolean;
+  /** 許可・拒否した理由（答えの側） */
+  reason?: string;
+  /** 承認を求める理由（問いの側） */
+  requestReason?: string;
+  isAutomatic?: boolean;
+};
+export type ToolApprovalResponse = {
+  id: string;
+  approved: boolean;
+};
+export type MessageFeedback = 'positive' | 'negative';
+//#endregion

package/dist/components/buttons/button/button.css

@@ -0,0 +1,158 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._8QHOaq_root {
+    cursor: pointer;
+    border-radius: var(--radius-full);
+    text-align: center;
+    font-weight: var(--font-weight-bold);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    border-width: 2px;
+  }
+
+  ._8QHOaq_solidPrimary {
+    background-color: var(--color-primary-bg);
+    color: var(--color-primary-fg);
+    border-color: #0000;
+  }
+
+  ._8QHOaq_solidSecondary {
+    background-color: var(--color-secondary-bg);
+    color: var(--color-secondary-fg);
+    border-color: #0000;
+  }
+
+  ._8QHOaq_solidBase {
+    background-color: var(--color-bg-subtle);
+    color: var(--color-fg-base);
+    border-color: #0000;
+  }
+
+  ._8QHOaq_outlinePrimary {
+    border-color: var(--color-primary-border);
+    background-color: var(--color-bg-base);
+    color: var(--color-primary-fg);
+  }
+
+  ._8QHOaq_outlineSecondary {
+    border-color: var(--color-secondary-border);
+    background-color: var(--color-bg-base);
+    color: var(--color-secondary-fg);
+  }
+
+  ._8QHOaq_outlineBase {
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-base);
+  }
+
+  ._8QHOaq_skeleton {
+    color: var(--color-fg-mute);
+    background-color: #0000;
+    border-color: #0000;
+  }
+
+  ._8QHOaq_skeleton._8QHOaq_disabled {
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    ._8QHOaq_solidPrimary:not(._8QHOaq_disabled):hover {
+      background-color: var(--color-primary-bg-emphasize);
+    }
+
+    ._8QHOaq_solidSecondary:not(._8QHOaq_disabled):hover {
+      background-color: var(--color-secondary-bg-emphasize);
+    }
+
+    ._8QHOaq_solidBase:not(._8QHOaq_disabled):hover {
+      background-color: var(--color-bg-mute);
+    }
+
+    ._8QHOaq_outlinePrimary:hover, ._8QHOaq_outlineSecondary:hover, ._8QHOaq_outlineBase:hover {
+      background-color: var(--color-bg-subtle);
+    }
+
+    ._8QHOaq_skeleton:hover {
+      background-color: var(--color-bg-subtle);
+      color: var(--color-fg-base);
+    }
+  }
+
+  ._8QHOaq_solidPrimary:not(._8QHOaq_disabled):active {
+    background-color: var(--color-primary-bg-emphasize);
+  }
+
+  ._8QHOaq_solidSecondary:not(._8QHOaq_disabled):active {
+    background-color: var(--color-secondary-bg-emphasize);
+  }
+
+  ._8QHOaq_solidBase:not(._8QHOaq_disabled):active {
+    background-color: var(--color-bg-emphasize);
+  }
+
+  ._8QHOaq_outlinePrimary:active, ._8QHOaq_outlineSecondary:active, ._8QHOaq_outlineBase:active {
+    background-color: var(--color-bg-mute);
+  }
+
+  ._8QHOaq_skeleton:active {
+    background-color: var(--color-bg-mute);
+    color: var(--color-fg-base);
+  }
+
+  ._8QHOaq_sm {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  ._8QHOaq_md {
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+  }
+
+  ._8QHOaq_lg {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+
+  ._8QHOaq_fullWidth {
+    width: 100%;
+
+    @container style(--writing: vertical) {
+      width: auto;
+    }
+  }
+
+  ._8QHOaq_withIcons {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  ._8QHOaq_iconsCentered {
+    justify-content: center;
+  }
+
+  ._8QHOaq_iconsApart {
+    justify-content: space-between;
+  }
+
+  ._8QHOaq_active {
+    color: var(--color-fg-info);
+  }
+
+  ._8QHOaq_disabled {
+    cursor: not-allowed;
+    opacity: .35;
+  }
+}
+
+@layer utilities;

package/dist/components/buttons/button/button.d.mts

@@ -1,5 +1,31 @@
-import { ComponentPropsWithRef, FC, ReactNode } from "react";
+import { ButtonHTMLAttributes, ComponentPropsWithRef, FC, MouseEventHandler, ReactNode, RefCallback } from "react";
 //#region src/components/buttons/button/button.d.ts
+/**
+ * `renderItem` が受け取る props。既定の `<button>` に渡すものと同じ
+ * オブジェクトで、`<button>` にはそのまま展開できる。`<a>` など別の要素を
+ * 描画するときは `<button>` 専用の `disabled` / `type` を分割代入で外してから
+ * 残りを展開する。無効状態は同梱の `aria-disabled` で表現でき、
+ * `onClick` は無効なら何もしないので `<a>` でも遷移しない。
+ *
+ * `disabled` が表すのは利用者が渡した `disabled` だけ。`onAction` の保留中と、
+ * `type="submit"` で属するフォームの送信が保留中のあいだは、`aria-disabled` と
+ * `aria-busy` が立っても `disabled` は `false` のままで、押された要素はフォーカスを
+ * 保つ。その間に押されても `onClick` が何もしない。
+ *
+ * ハンドラの要素型を `HTMLButtonElement` ではなく `HTMLElement` にしているのは、
+ * `ClipboardEventHandler<HTMLButtonElement>` のような兄弟型が `<a>` の同名 props
+ * に代入できず、束ごと展開できなくなるため。
+ */
+export type ButtonRenderItemProps = Omit<ButtonHTMLAttributes<HTMLElement>, 'aria-busy' | 'aria-disabled' | 'children' | 'className' | 'disabled' | 'onClick' | 'style' | 'type'> & {
+  ref: RefCallback<HTMLElement> | undefined;
+  className: string;
+  children: ReactNode;
+  type: 'button' | 'submit';
+  disabled: boolean;
+  'aria-busy': true | undefined;
+  'aria-disabled': true | undefined;
+  onClick: MouseEventHandler<HTMLElement> | undefined;
+};
 type Props = {
   type?: 'button' | 'submit';
   size?: 'sm' | 'md' | 'lg';
@@ -11,17 +37,15 @@ type Props = {
   endIcon?: ReactNode;
   /**
    * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
-   * 自動でスピナーを表示する糖衣。素のクリックイベント（`event` が必要、
+   * 自動でスピナーを表示する糖衣。保留中は押しても何もしないが、ボタンは
+   * フォーカスを持ったままでいる。素のクリックイベント（`event` が必要、
    * `preventDefault` したい等）は `onClick` を使う。両者は併用可能で、
    * `onClick` → `onAction` の順に実行される（`onClick` が `preventDefault`
    * した場合は `onAction` をスキップ）。
    */
   onAction?: () => void | Promise<void>;
-  renderItem?: (props: {
-    className: string;
-    children: ReactNode;
-  }) => ReactNode;
+  renderItem?: (props: ButtonRenderItemProps) => ReactNode;
 } & Omit<ComponentPropsWithRef<'button'>, 'type' | 'className' | 'style'>;
-declare const Button: FC<Props>;
+export declare const Button: FC<Props>;
 //#endregion
-export { Button };
+export {};