/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { cn } from "../../utils/cn.js";
import { useCopyToClipboard } from "../../hooks/useCopyToClipboard.js";
import { ActionButton } from "../ActionButton/ActionButton.js";
import "../ActionButton/index.js";
import { CopyStateIcon } from "../CopyStateIcon/CopyStateIcon.js";
import "../CopyStateIcon/index.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/CopyButton/CopyButton.tsx
/**
* Standalone copy-to-clipboard affordance: swaps its icon to a check (with a
* teal "pop") and optionally shows "Copied" feedback.
*
* Composes `ActionButton`, so it inherits the shared chrome — focus ring,
* press `active:scale`, sizes, hover, and the re-skinnable `--action-button-*`
* tokens — and stays consistent with other action buttons (e.g. CodeBlock's
* copy button). The success animation lives in `CopyStateIcon`; the clipboard
* behaviour in `useCopyToClipboard`.
*
* Its `'use client'` boundary is the reason it stays a separate component:
* server components (e.g. `forms/TextField` via `showCopyToClipboard`) can
* embed a copy affordance without themselves becoming client components.
*
* Renders ghost (border dropped) so it reads as a quiet affordance in trailing
* slots.
*
* @example
* ```tsx
* <CopyButton value="demo_api_key_abc123" ariaLabel="Copy API key" />
* <CopyButton value={url} withLabel />
* ```
*
* @beta This component is experimental — prop shape may change before release.
*/
var CopyButton = ({ value, withLabel = false, iconSize = 16, size = "md", ariaLabel = "Copy to clipboard", onCopy, className, testId }) => {
	const { copied, copy } = useCopyToClipboard({ onCopy });
	return /* @__PURE__ */ jsxs(ActionButton, {
		ariaLabel,
		title: ariaLabel,
		size,
		onClick: () => copy(value),
		"data-copied": copied || void 0,
		testId,
		className: cn("[--action-button-border:transparent]", className),
		children: [/* @__PURE__ */ jsx(CopyStateIcon, {
			copied,
			size: iconSize
		}), withLabel && /* @__PURE__ */ jsx("span", {
			className: cn("text-xs font-semibold", copied && "text-primary"),
			children: copied ? "Copied" : "Copy"
		})]
	});
};
CopyButton.displayName = "CopyButton";
//#endregion
export { CopyButton };

//# sourceMappingURL=CopyButton.js.map