@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/buttons/button/button.mjs

@@ -1,59 +1,69 @@
 "use client";
-import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
 import { Spinner } from "../../feedback/spinner/spinner.mjs";
-import { useTransition } from "react";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import button_module_default from "./button.module.mjs";
+import { clsx } from "clsx";
+import { useMemo, useTransition } from "react";
 import { useFormStatus } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/button/button.tsx
+const VARIANT = {
+	solid: {
+		primary: button_module_default.solidPrimary,
+		secondary: button_module_default.solidSecondary,
+		base: button_module_default.solidBase
+	},
+	outline: {
+		primary: button_module_default.outlinePrimary,
+		secondary: button_module_default.outlineSecondary,
+		base: button_module_default.outlineBase
+	}
+};
+const SIZE = {
+	sm: button_module_default.sm,
+	md: button_module_default.md,
+	lg: button_module_default.lg
+};
 const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "solid", disabled = false, fullWidth = false, isActive = false, onAction, onClick, startIcon, endIcon, renderItem, ...rest }) => {
+	const mergedRef = useMemo(() => ref ? mergeRefs(ref) : void 0, [ref]);
 	const [transitionPending, startTransition] = useTransition();
 	const { pending: formPending } = useFormStatus();
 	const isPending = transitionPending || type === "submit" && formPending;
 	const isDisabled = disabled || isPending;
-	const handleClick = onClick || onAction ? (event) => {
+	const handleClick = onClick || onAction || isDisabled ? (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
 		onClick?.(event);
 		if (event.defaultPrevented) return;
 		if (onAction) startTransition(async () => {
 			await onAction();
 		});
 	} : void 0;
-	const resolvedStartIcon = !renderItem && isPending ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : startIcon;
+	const resolvedStartIcon = isPending ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : startIcon;
 	const hasStartIcon = resolvedStartIcon !== void 0;
 	const hasEndIcon = endIcon !== void 0;
-	const baseClassName = cn("rounded-full border-2 text-center font-bold transition-colors", {
-		"border-transparent bg-primary-bg text-primary-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "solid" && color === "primary",
-		"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "solid" && color === "secondary",
-		"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "solid" && color === "base",
-		"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "primary",
-		"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "secondary",
-		"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "base",
-		"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton"
-	}, FOCUS_RING, size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full vertical:w-auto", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between", isActive && "text-fg-info");
-	const composedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		resolvedStartIcon,
-		children,
-		endIcon
-	] });
-	if (renderItem) return renderItem({
-		className: baseClassName,
-		children: composedChildren
-	});
-	return /* @__PURE__ */ jsx("button", {
+	const className = clsx(button_module_default.root, variant === "skeleton" ? button_module_default.skeleton : VARIANT[variant][color], focus_ring_module_default.ring, SIZE[size], fullWidth && button_module_default.fullWidth, (hasStartIcon || hasEndIcon) && button_module_default.withIcons, hasStartIcon && !hasEndIcon && variant !== "skeleton" ? button_module_default.iconsCentered : hasEndIcon && button_module_default.iconsApart, isActive && button_module_default.active, isDisabled && button_module_default.disabled);
+	const itemProps = {
+		...rest,
 		"aria-busy": isPending || void 0,
-		className: cn(baseClassName, "cursor-pointer", {
-			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "solid" && color === "primary",
-			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "solid" && color === "secondary",
-			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "solid" && color === "base",
-			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outline",
-			"cursor-not-allowed bg-transparent text-fg-mute opacity-35": isDisabled && variant === "skeleton"
-		}),
-		disabled: isDisabled,
+		"aria-disabled": isDisabled || void 0,
+		className,
+		disabled,
 		onClick: handleClick,
-		ref,
-		type: type === "submit" ? "submit" : "button",
-		...rest,
-		children: composedChildren
+		ref: mergedRef,
+		type,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			resolvedStartIcon,
+			children,
+			endIcon
+		] })
+	};
+	return renderItem ? renderItem(itemProps) : /* @__PURE__ */ jsx("button", {
+		...itemProps,
+		type: type === "submit" ? "submit" : "button"
 	});
 };
 //#endregion

package/dist/components/buttons/button/button.module.mjs

@@ -0,0 +1,23 @@
+import './button.css';
+//#region src/components/buttons/button/button.module.css
+var button_module_default = {
+	"active": "_8QHOaq_active",
+	"disabled": "_8QHOaq_disabled",
+	"fullWidth": "_8QHOaq_fullWidth",
+	"iconsApart": "_8QHOaq_iconsApart",
+	"iconsCentered": "_8QHOaq_iconsCentered",
+	"lg": "_8QHOaq_lg",
+	"md": "_8QHOaq_md",
+	"outlineBase": "_8QHOaq_outlineBase",
+	"outlinePrimary": "_8QHOaq_outlinePrimary",
+	"outlineSecondary": "_8QHOaq_outlineSecondary",
+	"root": "_8QHOaq_root",
+	"skeleton": "_8QHOaq_skeleton",
+	"sm": "_8QHOaq_sm",
+	"solidBase": "_8QHOaq_solidBase",
+	"solidPrimary": "_8QHOaq_solidPrimary",
+	"solidSecondary": "_8QHOaq_solidSecondary",
+	"withIcons": "_8QHOaq_withIcons"
+};
+//#endregion
+export { button_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Button } from "./button.mjs";
-export { Button };
+import { Button, ButtonRenderItemProps } from "./button.mjs";
+export { Button, type ButtonRenderItemProps };

package/dist/components/buttons/button/index.mjs

@@ -1,2 +1 @@
-import { Button } from "./button.mjs";
-export { Button };
+export { Button } from "./button.mjs";

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

@@ -0,0 +1,15 @@
+@layer properties, theme, base;
+
+@layer components {
+  .bpJt3q_copied {
+    color: var(--color-fg-success);
+    display: contents;
+  }
+
+  .bpJt3q_failed {
+    color: var(--color-fg-error);
+    display: contents;
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+//#region src/components/buttons/copy-button/copy-button.d.ts
+export declare const CopyButton: FC<{
+  value: string | (() => string | Promise<string>);
+  label?: string;
+  iconOnly?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}>;
+//#endregion

package/dist/components/buttons/copy-button/copy-button.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import { Button } from "../button/button.mjs";
+import { AlertIcon, CheckIcon, CopyIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../icon-button/icon-button.mjs";
+import copy_button_module_default from "./copy-button.module.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/copy-button/copy-button.tsx
+const RESULT_MS = 2e3;
+const CopyButton = ({ value, label, iconOnly = false, size = "md", disabled = false }) => {
+	const messages = getMessages();
+	const [result, setResult] = useState(null);
+	useEffect(() => {
+		if (result === null) return;
+		const timer = setTimeout(() => {
+			setResult(null);
+		}, RESULT_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [result]);
+	const settle = (status) => {
+		setResult((previous) => ({
+			status,
+			count: (previous?.count ?? 0) + 1
+		}));
+	};
+	const copy = async () => {
+		try {
+			await navigator.clipboard.write([new ClipboardItem({ "text/plain": typeof value === "function" ? value() : value })]);
+			settle("copied");
+		} catch {
+			settle("failed");
+		}
+	};
+	const iconSize = iconOnly ? size : size === "lg" ? "md" : "sm";
+	const icon = result?.status === "copied" ? /* @__PURE__ */ jsx("span", {
+		className: copy_button_module_default.copied,
+		children: /* @__PURE__ */ jsx(CheckIcon, { size: iconSize })
+	}) : result?.status === "failed" ? /* @__PURE__ */ jsx("span", {
+		className: copy_button_module_default.failed,
+		children: /* @__PURE__ */ jsx(AlertIcon, {
+			size: iconSize,
+			status: "error"
+		})
+	}) : /* @__PURE__ */ jsx(CopyIcon, { size: iconSize });
+	const name = label ?? messages.copy;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [iconOnly ? /* @__PURE__ */ jsx(IconButton, {
+		disabled,
+		label: name,
+		onAction: copy,
+		size,
+		children: icon
+	}) : /* @__PURE__ */ jsx(Button, {
+		disabled,
+		onAction: copy,
+		size,
+		startIcon: icon,
+		variant: "outline",
+		children: name
+	}), /* @__PURE__ */ jsx("span", {
+		className: sr_only_module_default.srOnly,
+		role: "status",
+		children: result === null ? null : /* @__PURE__ */ jsx("span", { children: result.status === "copied" ? messages.copied : messages.copyFailed }, result.count)
+	})] });
+};
+//#endregion
+export { CopyButton };

package/dist/components/buttons/copy-button/copy-button.module.mjs

@@ -0,0 +1,8 @@
+import './copy-button.css';
+//#region src/components/buttons/copy-button/copy-button.module.css
+var copy_button_module_default = {
+	"copied": "bpJt3q_copied",
+	"failed": "bpJt3q_failed"
+};
+//#endregion
+export { copy_button_module_default as default };

package/dist/components/buttons/copy-button/index.d.mts

@@ -0,0 +1,2 @@
+import { CopyButton } from "./copy-button.mjs";
+export { CopyButton };

package/dist/components/buttons/copy-button/index.mjs

@@ -0,0 +1 @@
+export { CopyButton } from "./copy-button.mjs";

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

@@ -0,0 +1,81 @@
+@layer properties, theme, base;
+
+@layer components {
+  .uGNMOG_root {
+    cursor: pointer;
+    border-radius: var(--radius-full);
+    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);
+    display: inline-flex;
+  }
+
+  .uGNMOG_transparent {
+    background-color: #0000;
+  }
+
+  .uGNMOG_base {
+    background-color: var(--color-bg-base);
+  }
+
+  .uGNMOG_primary {
+    background-color: var(--color-primary-bg);
+  }
+
+  .uGNMOG_secondary {
+    background-color: var(--color-secondary-bg);
+  }
+
+  @media (hover: hover) {
+    .uGNMOG_transparent:hover, .uGNMOG_base:hover {
+      background-color: var(--color-bg-subtle);
+    }
+
+    .uGNMOG_primary:hover {
+      background-color: var(--color-primary-bg-emphasize);
+    }
+
+    .uGNMOG_secondary:hover {
+      background-color: var(--color-secondary-bg-emphasize);
+    }
+
+    .uGNMOG_disabled:hover {
+      background-color: #0000;
+    }
+  }
+
+  .uGNMOG_transparent:active, .uGNMOG_base:active {
+    background-color: var(--color-bg-mute);
+  }
+
+  .uGNMOG_primary:active {
+    background-color: var(--color-primary-bg-emphasize);
+  }
+
+  .uGNMOG_secondary:active {
+    background-color: var(--color-secondary-bg-emphasize);
+  }
+
+  .uGNMOG_disabled:active {
+    background-color: #0000;
+  }
+
+  .uGNMOG_sm {
+    padding: calc(var(--spacing) * 1);
+  }
+
+  .uGNMOG_md {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .uGNMOG_lg {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .uGNMOG_disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+}
+
+@layer utilities;

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

@@ -1,9 +1,41 @@
 import { Placement } from "../../../types/variables.mjs";
 import { TooltipTriggerProps } from "../../overlays/tooltip/tooltip.mjs";
 import "../../overlays/tooltip/index.mjs";
-import { ComponentPropsWithRef, FC, ReactNode } from "react";
+import { ButtonHTMLAttributes, ComponentPropsWithRef, FC, MouseEventHandler, ReactNode } from "react";
 //#region src/components/buttons/icon-button/icon-button.d.ts
-type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
+export type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
+/**
+ * `renderItem` が受け取る props。既定の `<button>` に渡すものと同じ
+ * オブジェクトで、`<button>` には `triggerProps` ともども展開できる。
+ * `<a>` など別の要素を描画するときは `<button>` 専用の `disabled` /
+ * `type` を分割代入で外してから残りを展開する。無効状態は同梱の
+ * `aria-disabled` で表現できる。`ref` は tooltip の配線と合成済みのものが
+ * `triggerProps` に入っているので、平置きでは渡さない。
+ *
+ * `disabled` が表すのは利用者が渡した `disabled` だけ。`onAction` や属する
+ * フォームの送信が保留中のあいだは、`aria-disabled` と `aria-busy` が立っても
+ * `disabled` は `false` のままで、押された要素はフォーカスを保つ。その間に
+ * 押されても `onClick` が何もしない。
+ *
+ * ハンドラの要素型を `HTMLButtonElement` ではなく `HTMLElement` にしているのは、
+ * `ClipboardEventHandler<HTMLButtonElement>` のような兄弟型が `<a>` の同名 props
+ * に代入できず、束ごと展開できなくなるため。
+ */
+export type IconButtonRenderItemProps = Omit<ButtonHTMLAttributes<HTMLElement>, 'aria-busy' | 'aria-describedby' | 'aria-disabled' | 'aria-label' | 'children' | 'className' | 'disabled' | 'onBlur' | 'onClick' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'style' | 'type'> & {
+  className: string;
+  children: ReactNode;
+  type: 'button';
+  disabled: boolean;
+  'aria-label': string;
+  'aria-busy': true | undefined;
+  'aria-disabled': true | undefined;
+  onClick: MouseEventHandler<HTMLElement> | undefined;
+  /**
+   * tooltip の配線（ref・hover/focus ハンドラ・`aria-describedby`）。
+   * 利用者が渡した同名のハンドラも連結済みなので、描画する要素へ展開する。
+   */
+  triggerProps: IconButtonTriggerProps;
+};
 type Props = {
   size?: 'sm' | 'md' | 'lg';
   color?: 'transparent' | 'base' | 'primary' | 'secondary';
@@ -12,18 +44,14 @@ type Props = {
   tooltipDisabled?: boolean;
   /**
    * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
-   * `aria-busy` を立てる糖衣。素のクリックイベントが必要なら `onClick` を使う。
+   * `aria-busy` を立てる糖衣。保留中は押しても何もしないが、ボタンはフォーカスを
+   * 持ったままでいる。素のクリックイベントが必要なら `onClick` を使う。
    * 両者は併用可能で `onClick` → `onAction` の順に実行される（`onClick` が
    * `preventDefault` した場合は `onAction` をスキップ）。
    */
   onAction?: () => void | Promise<void>;
-  renderItem?: (props: {
-    className: string;
-    children: ReactNode;
-    'aria-label': string;
-    triggerProps: IconButtonTriggerProps;
-  }) => ReactNode;
+  renderItem?: (props: IconButtonRenderItemProps) => ReactNode;
 } & Omit<ComponentPropsWithRef<'button'>, 'type' | 'className' | 'style'>;
-declare const IconButton: FC<Props>;
+export declare const IconButton: FC<Props>;
 //#endregion
-export { IconButton, IconButtonTriggerProps };
+export {};

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -1,83 +1,96 @@
 "use client";
-import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { chain } from "../../../helpers/chain.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { chain } from "../../../helpers/chain.mjs";
 import { Tooltip } from "../../overlays/tooltip/index.mjs";
-import { useTransition } from "react";
+import icon_button_module_default from "./icon-button.module.mjs";
+import { clsx } from "clsx";
+import { useMemo, useTransition } from "react";
 import { useFormStatus } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/icon-button/icon-button.tsx
+const COLOR = {
+	transparent: icon_button_module_default.transparent,
+	base: icon_button_module_default.base,
+	primary: icon_button_module_default.primary,
+	secondary: icon_button_module_default.secondary
+};
+const SIZE = {
+	sm: icon_button_module_default.sm,
+	md: icon_button_module_default.md,
+	lg: icon_button_module_default.lg
+};
 const joinIds = (...ids) => {
 	const filtered = ids.filter(Boolean);
 	return filtered.length === 0 ? void 0 : filtered.join(" ");
 };
+/**
+* 描画する要素そのもの。IconButton から切り出しているのは合成 ref のため。
+* mergeRefs は呼ぶたび新しい関数を返し、React が毎レンダー ref を付け外しする。
+* 合成先の triggerProps は Tooltip.Trigger から引数で届くので IconButton 側では
+* useMemo に包めず、triggerProps を props として受け取るここでだけ包める。
+*
+* ref を `buttonRef` という名前で受けているのは、`ref` で受けると react(refs) が
+* レンダー中に一切触れない値として扱い、renderItem へ渡す設計が成り立たなくなるため。
+*/
+const Item = ({ buttonRef, triggerProps, build, renderItem }) => {
+	const triggerRef = triggerProps.ref;
+	const itemProps = build(triggerProps, useMemo(() => mergeRefs(buttonRef, triggerRef), [buttonRef, triggerRef]));
+	if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(itemProps) });
+	const { triggerProps: resolvedTriggerProps, ...rest } = itemProps;
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		...resolvedTriggerProps,
+		type: "button"
+	});
+};
 const IconButton = ({ ref, size = "md", color = "transparent", label, tooltipPlacement = "top", tooltipDisabled = false, children, onAction, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, disabled, renderItem, "aria-describedby": describedBy, ...props }) => {
 	const [transitionPending, startTransition] = useTransition();
 	const { pending: formPending } = useFormStatus();
 	const isPending = transitionPending || formPending;
 	const isDisabled = Boolean(disabled) || isPending;
-	const handleClick = onClick || onAction ? (event) => {
+	const handleClick = onClick || onAction || isDisabled ? (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
 		onClick?.(event);
 		if (event.defaultPrevented) return;
 		if (onAction) startTransition(async () => {
 			await onAction();
 		});
 	} : void 0;
-	const className = cn("inline-flex rounded-full transition-colors", FOCUS_RING, (color === "transparent" || color === "base") && "hover:bg-bg-subtle active:bg-bg-mute", color === "base" && "bg-bg-base", color === "transparent" && "bg-transparent", color === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", color === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", !renderItem && "cursor-pointer", !renderItem && isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent");
-	if (tooltipDisabled) {
-		if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem({
-			className,
-			children,
-			"aria-label": label,
-			triggerProps: {}
-		}) });
-		return /* @__PURE__ */ jsx("button", {
-			...props,
-			"aria-busy": isPending || void 0,
-			"aria-describedby": describedBy,
-			"aria-label": label,
-			className,
-			disabled: isDisabled,
-			onBlur,
-			onClick: handleClick,
-			onFocus,
-			onMouseEnter,
-			onMouseLeave,
-			ref,
-			type: "button",
-			children
-		});
-	}
+	const className = clsx(icon_button_module_default.root, focus_ring_module_default.ring, COLOR[color], SIZE[size], isDisabled && icon_button_module_default.disabled);
+	const buildItemProps = (triggerProps, mergedRef) => ({
+		...props,
+		"aria-busy": isPending || void 0,
+		"aria-disabled": isDisabled || void 0,
+		"aria-label": label,
+		children,
+		className,
+		disabled: Boolean(disabled),
+		onClick: handleClick,
+		type: "button",
+		triggerProps: {
+			...triggerProps,
+			"aria-describedby": joinIds(describedBy, triggerProps["aria-describedby"]),
+			onBlur: chain(triggerProps.onBlur, onBlur),
+			onFocus: chain(triggerProps.onFocus, onFocus),
+			onMouseEnter: chain(triggerProps.onMouseEnter, onMouseEnter),
+			onMouseLeave: chain(triggerProps.onMouseLeave, onMouseLeave),
+			ref: mergedRef
+		}
+	});
+	const render = (triggerProps) => /* @__PURE__ */ jsx(Item, {
+		build: buildItemProps,
+		buttonRef: ref,
+		renderItem,
+		triggerProps
+	});
+	if (tooltipDisabled) return render({});
 	return /* @__PURE__ */ jsxs(Tooltip.Root, {
 		placement: tooltipPlacement,
-		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { renderItem: (triggerProps) => {
-			if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem({
-				className,
-				children,
-				"aria-label": label,
-				triggerProps: {
-					...triggerProps,
-					"aria-describedby": joinIds(describedBy, triggerProps["aria-describedby"])
-				}
-			}) });
-			return /* @__PURE__ */ jsx("button", {
-				...props,
-				"aria-busy": isPending || void 0,
-				"aria-describedby": joinIds(describedBy, triggerProps["aria-describedby"]),
-				"aria-label": label,
-				className,
-				disabled: isDisabled,
-				onBlur: chain(triggerProps.onBlur, onBlur),
-				onClick: handleClick,
-				onFocus: chain(triggerProps.onFocus, onFocus),
-				onMouseEnter: chain(triggerProps.onMouseEnter, onMouseEnter),
-				onMouseLeave: chain(triggerProps.onMouseLeave, onMouseLeave),
-				ref: mergeRefs(ref, triggerProps.ref),
-				type: "button",
-				children
-			});
-		} }), /* @__PURE__ */ jsx(Tooltip.Content, { children: label })]
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { renderItem: render }), /* @__PURE__ */ jsx(Tooltip.Content, { children: label })]
 	});
 };
 //#endregion

package/dist/components/buttons/icon-button/icon-button.module.mjs

@@ -0,0 +1,15 @@
+import './icon-button.css';
+//#region src/components/buttons/icon-button/icon-button.module.css
+var icon_button_module_default = {
+	"base": "uGNMOG_base",
+	"disabled": "uGNMOG_disabled",
+	"lg": "uGNMOG_lg",
+	"md": "uGNMOG_md",
+	"primary": "uGNMOG_primary",
+	"root": "uGNMOG_root",
+	"secondary": "uGNMOG_secondary",
+	"sm": "uGNMOG_sm",
+	"transparent": "uGNMOG_transparent"
+};
+//#endregion
+export { icon_button_module_default as default };

package/dist/components/buttons/icon-button/index.d.mts

@@ -1,2 +1,2 @@
-import { IconButton, IconButtonTriggerProps } from "./icon-button.mjs";
-export { IconButton, type IconButtonTriggerProps };
+import { IconButton, IconButtonRenderItemProps, IconButtonTriggerProps } from "./icon-button.mjs";
+export { IconButton, type IconButtonRenderItemProps, type IconButtonTriggerProps };

package/dist/components/buttons/icon-button/index.mjs

@@ -1,2 +1 @@
-import { IconButton } from "./icon-button.mjs";
-export { IconButton };
+export { IconButton } from "./icon-button.mjs";

package/dist/components/buttons/toolbar/index.d.mts

@@ -0,0 +1,14 @@
+import { ToolbarItemProps } from "./toolbar.mjs";
+//#region src/components/buttons/toolbar/index.d.ts
+export declare const Toolbar: {
+  readonly Root: import("react").FC<{
+    orientation?: "horizontal" | "vertical";
+    ref?: import("react").Ref<HTMLDivElement>;
+  } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "aria-orientation" | "className" | "role" | "style">>;
+  readonly Item: import("react").FC<{
+    renderItem: (props: ToolbarItemProps) => import("react").ReactElement;
+  }>;
+  readonly Separator: import("react").FC;
+};
+//#endregion
+export type { ToolbarItemProps };

package/dist/components/buttons/toolbar/index.mjs

@@ -0,0 +1,9 @@
+import { Item, Root, Separator } from "./toolbar.mjs";
+//#region src/components/buttons/toolbar/index.ts
+const Toolbar = {
+	Root,
+	Item,
+	Separator
+};
+//#endregion
+export { Toolbar };

package/dist/components/buttons/toolbar/toolbar.css

@@ -0,0 +1,30 @@
+@layer properties, theme, base;
+
+@layer components {
+  .PnnNqG_root {
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-subtle);
+    padding: calc(var(--spacing) * 1);
+    display: flex;
+
+    @scope (&) {
+      & > [aria-pressed="true"], & > [aria-pressed="true"]:hover, & > [aria-pressed="true"]:active {
+        background-color: var(--color-bg-emphasize);
+      }
+    }
+  }
+
+  .PnnNqG_vertical {
+    flex-direction: column;
+  }
+
+  .PnnNqG_separator {
+    margin: calc(var(--spacing) * 1);
+    align-self: stretch;
+    display: flex;
+  }
+}
+
+@layer utilities;