/*! 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 { CopyStateIcon } from "../CopyStateIcon/CopyStateIcon.js";
import "../CopyStateIcon/index.js";
import { Text } from "../Text/Text.js";
import "../Text/index.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/CopyLabel/CopyLabel.tsx
var FOCUS_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)";
/**
* A label-value pair with one-tap copy-to-clipboard functionality.
* Click anywhere on the value or the copy button to copy.
*
* **Variants:**
* - `boxed` (default) — Value displayed in a bordered box with visual feedback
* - `inline` — Compact side-by-side layout without a box
*
* @example
* ```tsx
* <CopyLabel label="API key" value="demo_api_key_abc123" mono />
* <CopyLabel label="Email" value="user@example.com" variant="inline" />
* ```
*
* @beta This component is experimental — prop shape may change before release.
*/
var CopyLabel = ({ label, value, variant = "boxed", mono = false, className, onCopy }) => {
	const { copied, copy } = useCopyToClipboard({ onCopy });
	if (variant === "inline") return /* @__PURE__ */ jsxs("div", {
		className: cn("flex items-baseline gap-3.5", className),
		children: [/* @__PURE__ */ jsx(Text, {
			as: "span",
			size: "xs",
			weight: "semibold",
			variant: "muted",
			className: "shrink-0 min-w-30 tracking-wide",
			children: label
		}), /* @__PURE__ */ jsxs("button", {
			type: "button",
			onClick: () => copy(value),
			"aria-label": `Copy ${label} to clipboard`,
			title: "Copy to clipboard",
			className: cn("inline-flex items-center gap-2 min-w-0", "-mx-2 -my-1 px-2 py-1", "bg-transparent border-none rounded", "cursor-pointer font-[inherit] text-left", "transition-colors duration-150", "hover:bg-card-hover", FOCUS_RING),
			children: [
				/* @__PURE__ */ jsx("span", {
					className: cn("text-sm text-(--text)", "overflow-hidden text-ellipsis whitespace-nowrap", mono && "font-mono"),
					children: value
				}),
				/* @__PURE__ */ jsx("span", {
					className: cn("flex items-center shrink-0", copied ? "opacity-100" : "opacity-55"),
					children: /* @__PURE__ */ jsx(CopyStateIcon, { copied })
				}),
				copied && /* @__PURE__ */ jsx(Text, {
					as: "span",
					size: "xs",
					weight: "semibold",
					color: "primary",
					className: "shrink-0",
					children: "Copied"
				})
			]
		})]
	});
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex flex-col gap-1.5", className),
		children: [/* @__PURE__ */ jsx(Text, {
			as: "span",
			size: "xs",
			weight: "semibold",
			variant: "muted",
			className: "tracking-wide",
			children: label
		}), /* @__PURE__ */ jsxs("button", {
			type: "button",
			onClick: () => copy(value),
			"aria-label": `Copy ${label} to clipboard`,
			title: "Copy to clipboard",
			className: cn("flex items-center gap-3 w-full", "px-3.5 py-3 box-border", "bg-card border-2 border-solid rounded", "cursor-pointer font-[inherit] text-left", "transition-[border-color,background] duration-200", copied ? "border-primary bg-primary-50" : "border-border-1", !copied && "hover:border-border-2 hover:bg-card-hover", FOCUS_RING),
			children: [/* @__PURE__ */ jsx("span", {
				className: cn("flex-1 min-w-0", "overflow-hidden text-ellipsis whitespace-nowrap text-left", "text-sm text-(--text)", mono && "font-mono"),
				children: value
			}), /* @__PURE__ */ jsx("span", {
				className: "flex items-center shrink-0",
				children: /* @__PURE__ */ jsx(CopyStateIcon, { copied })
			})]
		})]
	});
};
CopyLabel.displayName = "CopyLabel";
//#endregion
export { CopyLabel };

//# sourceMappingURL=CopyLabel.js.map