@keboola/design 13.1.3 → 14.0.0

package/dist/InlineEdit-D5RdunZo.js

@@ -0,0 +1,370 @@
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip } from "./utils-LQ4jJA-9.js";
+import { ArgoDesignContext } from "./context-U293r3v-.js";
+import { Check, Loader2, X } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { Kbd, keys } from "./Kbd-3YM7NQO4.js";
+import { useAutosizeInput } from "./internal/hooks/useAutosizeInput.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/InlineEdit/InlineEdit.tsx
+/** A sized `fill` row at least this wide shows Save / Cancel as text; a narrower one as icons. */
+const LABELLED_BUTTONS_MIN_WIDTH = 480;
+/** Below this a `multiline` field keeps the row and Save / Cancel move under it. */
+const INLINE_BUTTONS_MIN_WIDTH = 320;
+/** How long the field and the buttons take to open and close. */
+const EXPAND_MS = 200;
+/**
+* Box and button height per size; the font is always the surrounding one.
+*
+* - Buttons take the box's height, not the brand's own button height, so the row lines up.
+* - The box overhangs its line by the same amount it pads it, so the line box never changes.
+* - `auto` scales the icon buttons with the text instead of picking a fixed height.
+*/
+const SIZES = {
+	auto: {
+		box: "tw:py-px tw:-my-[2px]",
+		icon: "icon-xs",
+		label: "medium",
+		fit: "",
+		iconFit: ""
+	},
+	sm: {
+		box: "tw:py-[max(1px,calc((1.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((1.5rem-1lh)/2))]",
+		icon: "icon-xs",
+		label: "small",
+		fit: "tw:h-6 tw:min-h-6 tw:max-h-6",
+		iconFit: "tw:size-6"
+	},
+	md: {
+		box: "tw:py-[max(1px,calc((2rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2rem-1lh)/2))]",
+		icon: "icon-sm",
+		label: "small",
+		fit: "tw:h-8 tw:min-h-8 tw:max-h-8",
+		iconFit: "tw:size-8"
+	},
+	lg: {
+		box: "tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]",
+		icon: "icon",
+		label: "medium",
+		fit: "tw:h-10 tw:min-h-10 tw:max-h-10",
+		iconFit: "tw:size-10"
+	},
+	title: {
+		box: "tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]",
+		icon: "icon",
+		label: "medium",
+		fit: "tw:h-10 tw:min-h-10 tw:max-h-10",
+		iconFit: "tw:size-10"
+	}
+};
+const BOX_CLASS = cn("tw:relative tw:-left-1.5 tw:rounded-md tw:border tw:px-[5px] tw:leading-[inherit]", "tw:transition-[border-color,background-color,box-shadow] tw:duration-150 tw:ease-out");
+const VIEW_BOX_CLASS = cn("tw:border-transparent", "tw:hover:border-input tw:hover:bg-muted-foreground/10", "tw:has-[:focus-visible]:border-input tw:has-[:focus-visible]:bg-muted-foreground/10");
+const FIELD_CLASS = cn("tw:m-0 tw:block tw:border-0 tw:bg-transparent tw:p-0 tw:outline-hidden", "tw:[font:inherit] tw:[letter-spacing:inherit] tw:[color:inherit]", "tw:placeholder:text-muted-foreground");
+const AUTO_ICON_BUTTON_CLASS = "tw:size-[max(1.5rem,1.1em)] tw:text-[length:inherit]";
+const ShortcutLabel = ({ label, shortcut }) => /* @__PURE__ */ jsxs("span", {
+	className: "tw:inline-flex tw:items-center tw:gap-2",
+	children: [label, /* @__PURE__ */ jsx(Kbd, {
+		variant: "primary",
+		children: shortcut
+	})]
+});
+const keepFieldFocus = (event) => event.preventDefault();
+/**
+* Click-to-edit text: a page title, an entity name, a short label in a row.
+*
+* - The caller owns the draft and the editing flag, so it can validate, save and fail on its own terms.
+* - Enter saves a change and closes an unchanged edit; Escape cancels.
+* - Not for multi-paragraph or markdown text: use `MarkdownEditor`.
+*/
+const InlineEdit = ({ value, onChange, onSubmit, onCancel, isEditing, onEditStart, isChanged, isSaving = false, invalidReason = null, readOnly = false, fill = true, multiline = false, size = "auto", truncate = false, placeholder = "Click to edit", editTooltip = "Click to edit", tooltipPlacement = "top", maxLength, "aria-label": ariaLabel, className }) => {
+	const formRef = useRef(null);
+	const viewButtonRef = useRef(null);
+	const textareaRef = useRef(null);
+	const wasEditingRef = useRef(isEditing);
+	const reasonId = useId();
+	const { inputRef, inputStyle, sizerElement } = useAutosizeInput({
+		value,
+		placeholder
+	});
+	const [rowWidth, setRowWidth] = useState(0);
+	const boxRef = useRef(null);
+	const buttonsRef = useRef(null);
+	const boxWidthRef = useRef(0);
+	const [isPrimed, setIsPrimed] = useState(false);
+	const [isTipQuiet, setIsTipQuiet] = useState(false);
+	const isValid = !invalidReason;
+	const canSave = isChanged && isValid && !isSaving;
+	const showLabels = fill && size !== "auto" && rowWidth >= LABELLED_BUTTONS_MIN_WIDTH;
+	const stackButtons = fill && multiline && rowWidth > 0 && rowWidth < INLINE_BUTTONS_MIN_WIDTH;
+	const sizing = SIZES[size];
+	useEffect(() => {
+		const wasEditing = wasEditingRef.current;
+		wasEditingRef.current = isEditing;
+		if (isEditing) {
+			const field = textareaRef.current ?? inputRef.current;
+			field?.focus();
+			field?.setSelectionRange(field.value.length, field.value.length);
+			return;
+		}
+		if (!wasEditing) return;
+		setIsTipQuiet(true);
+		if (!document.activeElement || document.activeElement === document.body) viewButtonRef.current?.focus();
+	}, [isEditing, inputRef]);
+	useLayoutEffect(() => {
+		const box = boxRef.current;
+		if (!box || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			boxWidthRef.current = box.offsetWidth;
+		});
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const box = boxRef.current;
+		const buttons = buttonsRef.current;
+		const from = boxWidthRef.current;
+		if (!box || !buttons || !from) return;
+		for (const running of box.getAnimations()) running.cancel();
+		const to = box.offsetWidth;
+		boxWidthRef.current = to;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || typeof box.animate !== "function") return;
+		const timing = {
+			duration: EXPAND_MS,
+			easing: "ease-out"
+		};
+		if (from !== to) {
+			const property = fill && isEditing ? "maxWidth" : "width";
+			const field = textareaRef.current;
+			if (field) field.style.whiteSpace = "nowrap";
+			const animation = box.animate([{ [property]: `${from}px` }, { [property]: `${to}px` }], timing);
+			const heldRow = fill && !isEditing ? formRef.current : null;
+			if (heldRow) heldRow.dataset.expanded = "true";
+			animation.onfinish = () => {
+				if (field) field.style.whiteSpace = "";
+				if (!heldRow) return;
+				delete heldRow.dataset.expanded;
+				heldRow.dataset.settled = "true";
+			};
+		}
+		for (const running of buttons.getAnimations()) running.cancel();
+		const buttonsWidth = `${buttons.scrollWidth}px`;
+		buttons.style.overflowX = "clip";
+		buttons.animate(isEditing ? [{ maxWidth: "0px" }, { maxWidth: buttonsWidth }] : [{ maxWidth: buttonsWidth }, { maxWidth: "0px" }], timing).onfinish = () => {
+			buttons.style.overflowX = "";
+		};
+	}, [isEditing, fill]);
+	useLayoutEffect(() => {
+		const textarea = textareaRef.current;
+		if (!textarea) return;
+		const fitHeight = () => {
+			textarea.style.height = "auto";
+			textarea.style.height = `${textarea.scrollHeight}px`;
+		};
+		fitHeight();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(fitHeight);
+		observer.observe(textarea);
+		return () => observer.disconnect();
+	}, [isEditing, value]);
+	useLayoutEffect(() => {
+		const form = formRef.current;
+		if (!fill || !isEditing || !form) return;
+		const fitButtons = (width) => setRowWidth(width);
+		fitButtons(form.offsetWidth);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => fitButtons(form.offsetWidth));
+		observer.observe(form);
+		return () => observer.disconnect();
+	}, [fill, isEditing]);
+	if (readOnly) return /* @__PURE__ */ jsx("span", {
+		className: cn(truncate && "tw:block tw:truncate", className),
+		children: value
+	});
+	const handleKeyDown = (event) => {
+		event.stopPropagation();
+		if (event.key === "Escape") {
+			event.preventDefault();
+			if (!isSaving) onCancel();
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (isSaving) return;
+			if (!isChanged) onCancel();
+			else if (isValid) onSubmit();
+		}
+	};
+	const handleBlur = (event) => {
+		if (!isEditing || isSaving) return;
+		if (!document.hasFocus()) return;
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget.contains(next)) return;
+		if (!isChanged) onCancel();
+		else if (isValid) onSubmit();
+	};
+	const handleChange = (event) => {
+		onChange(multiline ? event.target.value.replace(/[\r\n]+/g, " ") : event.target.value);
+	};
+	const fieldProps = {
+		value,
+		placeholder,
+		maxLength,
+		readOnly: isSaving,
+		"aria-label": ariaLabel ?? placeholder,
+		"aria-invalid": !isValid || void 0,
+		"aria-describedby": invalidReason ? reasonId : void 0,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		onKeyUp: (event) => event.stopPropagation(),
+		onClick: (event) => event.stopPropagation()
+	};
+	const saveTooltip = (() => {
+		if (isSaving) return "Saving…";
+		if (!isChanged) return "No changes to save";
+		if (invalidReason) return invalidReason;
+		return /* @__PURE__ */ jsx(ShortcutLabel, {
+			label: "Save",
+			shortcut: keys.enter.symbol
+		});
+	})();
+	const iconButtonClass = size === "auto" ? AUTO_ICON_BUTTON_CLASS : sizing.iconFit;
+	const labelButtonClass = sizing.fit;
+	const buttonSize = showLabels ? sizing.label : sizing.icon;
+	const view = /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: editTooltip,
+		placement: tooltipPlacement,
+		forceHide: isTipQuiet,
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			ref: viewButtonRef,
+			type: "button",
+			"data-testid": "inline-edit-trigger",
+			className: cn("tw:block tw:max-w-full tw:cursor-text tw:text-left tw:outline-hidden", "tw:[font:inherit] tw:leading-[inherit] tw:[color:inherit]", "tw:after:absolute tw:after:inset-0", truncate && "tw:min-w-0 tw:truncate"),
+			onClick: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				onEditStart?.();
+			},
+			onBlur: () => setIsTipQuiet(false),
+			onPointerLeave: () => setIsTipQuiet(false),
+			children: value ? /* @__PURE__ */ jsx("span", {
+				className: cn(!truncate && !multiline && "tw:line-clamp-2", "tw:break-words"),
+				children: value
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "tw:text-muted-foreground",
+				children: placeholder
+			})
+		})
+	});
+	const field = multiline ? /* @__PURE__ */ jsx("textarea", {
+		ref: textareaRef,
+		rows: 1,
+		className: cn(FIELD_CLASS, "tw:w-full tw:resize-none tw:overflow-hidden tw:break-words"),
+		...fieldProps
+	}) : /* @__PURE__ */ jsx("input", {
+		ref: inputRef,
+		type: "text",
+		className: cn(FIELD_CLASS, fill ? "tw:w-full" : "tw:max-w-full"),
+		style: fill ? void 0 : inputStyle,
+		...fieldProps
+	});
+	const buttons = /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex tw:items-center tw:gap-1", stackButtons ? "tw:pt-2" : "tw:h-[1lh] tw:pl-2", "tw:transition-opacity tw:duration-200 tw:ease-out", isEditing ? "tw:opacity-100" : "tw:opacity-0"),
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			tooltip: saveTooltip,
+			placement: "top",
+			triggerAsChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				className: cn("tw:inline-flex", !canSave && "tw:cursor-not-allowed"),
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "primary",
+					size: buttonSize,
+					"aria-label": showLabels ? void 0 : "Save",
+					isLoading: !showLabels && isSaving,
+					disabled: !canSave,
+					onMouseDown: keepFieldFocus,
+					className: cn("tw:transition-colors", showLabels ? labelButtonClass : iconButtonClass, !canSave && "tw:pointer-events-none"),
+					children: showLabels ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: cn(isSaving && "tw:invisible"),
+						children: "Save"
+					}), isSaving && /* @__PURE__ */ jsx(Loader2, { className: "tw:absolute tw:size-4 tw:animate-spin" })] }) : /* @__PURE__ */ jsx(Check, {})
+				})
+			})
+		}), /* @__PURE__ */ jsx(Tooltip, {
+			tooltip: /* @__PURE__ */ jsx(ShortcutLabel, {
+				label: "Cancel",
+				shortcut: "Esc"
+			}),
+			placement: "top",
+			triggerAsChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: buttonSize,
+				"aria-label": showLabels ? void 0 : "Cancel",
+				disabled: isSaving,
+				className: cn("tw:transition-colors", showLabels ? labelButtonClass : iconButtonClass),
+				onMouseDown: keepFieldFocus,
+				onClick: (event) => {
+					event.stopPropagation();
+					onCancel();
+				},
+				children: showLabels ? "Cancel" : /* @__PURE__ */ jsx(X, {})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("form", {
+		ref: formRef,
+		"data-slot": "inline-edit",
+		"data-state": isEditing ? "edit" : "view",
+		"data-expanded": fill && isEditing || void 0,
+		"aria-busy": isSaving || void 0,
+		className: cn("tw:leading-[inherit]", fill && isEditing ? "tw:flex tw:w-full tw:min-w-0 tw:items-start" : "tw:inline-flex tw:max-w-full tw:items-center", fill && isEditing && multiline && "tw:flex-wrap", truncate && !isEditing && "tw:flex tw:min-w-0", className),
+		onSubmit: (event) => {
+			event.preventDefault();
+			if (canSave) onSubmit();
+		},
+		onBlur: handleBlur,
+		onKeyDown: (event) => {
+			if (event.key !== "Escape" || !isEditing) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!isSaving) onCancel();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: boxRef,
+				onPointerEnter: () => setIsPrimed(true),
+				onFocus: () => setIsPrimed(true),
+				className: cn(BOX_CLASS, sizing.box, "tw:min-w-0", fill && isEditing && "tw:flex-1", fill && isEditing && multiline && "tw:min-w-[min(100%,12rem)]", !isEditing && VIEW_BOX_CLASS, isEditing && (isValid ? "tw:border-ring tw:bg-input-background tw:ring-3 tw:ring-ring/25" : "tw:border-destructive tw:bg-input-background tw:ring-3 tw:ring-destructive/20"), isEditing && !fill && !multiline && "tw:inline-flex"),
+				children: [isEditing ? field : view, !fill && !multiline && (isPrimed || isEditing) && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "tw:absolute tw:size-0 tw:overflow-hidden",
+					children: sizerElement
+				})]
+			}),
+			isEditing && invalidReason && /* @__PURE__ */ jsx("span", {
+				id: reasonId,
+				className: "tw:sr-only",
+				"aria-live": "polite",
+				children: invalidReason
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: buttonsRef,
+				inert: !isEditing,
+				"aria-hidden": !isEditing || void 0,
+				className: cn(fill ? "tw:self-start" : "tw:self-center", !isEditing && "tw:max-w-0 tw:overflow-x-clip", stackButtons && isEditing && "tw:basis-full"),
+				children: /* @__PURE__ */ jsx(ArgoDesignContext, {
+					value: true,
+					children: buttons
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { InlineEdit };
+
+//# sourceMappingURL=InlineEdit-D5RdunZo.js.map

package/dist/InlineEdit-D5RdunZo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit-D5RdunZo.js","names":[],"sources":["../src/blocks/InlineEdit/InlineEdit.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Kbd, keys } from '../../components/Kbd';\nimport { ArgoDesignContext } from '../../components/ThemeProvider/context';\nimport { Tooltip } from '../../components/Tooltip';\nimport { useAutosizeInput } from '../../hooks/useAutosizeInput';\nimport { Check, Loader2, X } from '../../icons';\nimport { cn } from '../../utils';\n\n/** A sized `fill` row at least this wide shows Save / Cancel as text; a narrower one as icons. */\nconst LABELLED_BUTTONS_MIN_WIDTH = 480;\n/** Below this a `multiline` field keeps the row and Save / Cancel move under it. */\nconst INLINE_BUTTONS_MIN_WIDTH = 320;\n/** How long the field and the buttons take to open and close. */\nconst EXPAND_MS = 200;\n\ntype Size = 'auto' | 'sm' | 'md' | 'lg' | 'title';\n\n/**\n * Box and button height per size; the font is always the surrounding one.\n *\n * - Buttons take the box's height, not the brand's own button height, so the row lines up.\n * - The box overhangs its line by the same amount it pads it, so the line box never changes.\n * - `auto` scales the icon buttons with the text instead of picking a fixed height.\n */\n// Class names are spelled out in full: Tailwind only generates the ones it can read here.\nconst SIZES = {\n  auto: { box: 'tw:py-px tw:-my-[2px]', icon: 'icon-xs', label: 'medium', fit: '', iconFit: '' },\n  sm: {\n    box: 'tw:py-[max(1px,calc((1.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((1.5rem-1lh)/2))]',\n    icon: 'icon-xs',\n    label: 'small',\n    fit: 'tw:h-6 tw:min-h-6 tw:max-h-6',\n    iconFit: 'tw:size-6',\n  },\n  md: {\n    box: 'tw:py-[max(1px,calc((2rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2rem-1lh)/2))]',\n    icon: 'icon-sm',\n    label: 'small',\n    fit: 'tw:h-8 tw:min-h-8 tw:max-h-8',\n    iconFit: 'tw:size-8',\n  },\n  lg: {\n    box: 'tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]',\n    icon: 'icon',\n    label: 'medium',\n    fit: 'tw:h-10 tw:min-h-10 tw:max-h-10',\n    iconFit: 'tw:size-10',\n  },\n  title: {\n    box: 'tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]',\n    icon: 'icon',\n    label: 'medium',\n    fit: 'tw:h-10 tw:min-h-10 tw:max-h-10',\n    iconFit: 'tw:size-10',\n  },\n} as const satisfies Record<\n  Size,\n  { box: string; icon: string; label: string; fit: string; iconFit: string }\n>;\n\n// One box in view and edit; only its colours change, so nothing moves and the change can animate.\n// - 1px border + 5px padding = the 6px the box shifts left, so the text stays where it was.\n// - A shift, not a negative margin: that would shrink the width a fit-content parent gives it.\n// - `leading-[inherit]` beats the 1.5 a Tooltip trigger's scoped preflight would set.\nconst BOX_CLASS = cn(\n  'tw:relative tw:-left-1.5 tw:rounded-md tw:border tw:px-[5px] tw:leading-[inherit]',\n  'tw:transition-[border-color,background-color,box-shadow] tw:duration-150 tw:ease-out',\n);\n\nconst VIEW_BOX_CLASS = cn(\n  'tw:border-transparent',\n  'tw:hover:border-input tw:hover:bg-muted-foreground/10',\n  'tw:has-[:focus-visible]:border-input tw:has-[:focus-visible]:bg-muted-foreground/10',\n);\n\n// The field takes the surrounding typography instead of the browser's form-control defaults.\nconst FIELD_CLASS = cn(\n  'tw:m-0 tw:block tw:border-0 tw:bg-transparent tw:p-0 tw:outline-hidden',\n  'tw:[font:inherit] tw:[letter-spacing:inherit] tw:[color:inherit]',\n  'tw:placeholder:text-muted-foreground',\n);\n\n// `auto` icon buttons scale with the text: 24px beside body copy, ~33px beside a page title.\nconst AUTO_ICON_BUTTON_CLASS = 'tw:size-[max(1.5rem,1.1em)] tw:text-[length:inherit]';\n\nconst ShortcutLabel = ({ label, shortcut }: { label: string; shortcut: string }) => (\n  <span className=\"tw:inline-flex tw:items-center tw:gap-2\">\n    {label}\n    <Kbd variant=\"primary\">{shortcut}</Kbd>\n  </span>\n);\n\n// Keeps focus in the field, so pressing a button never blurs it into an early save first.\nconst keepFieldFocus = (event: MouseEvent) => event.preventDefault();\n\ntype Props = {\n  /** The text shown, and the draft while editing. */\n  value: string;\n  onChange: (value: string) => void;\n  /** Enter, Save, or a blur with a valid change. */\n  onSubmit: () => void;\n  /** Escape, Cancel, or leaving the field with nothing changed. */\n  onCancel: () => void;\n  isEditing: boolean;\n  /** Opens the editor from view mode; omit when the caller opens it some other way. */\n  onEditStart?: () => void;\n  /** Whether `value` differs from the saved value; nothing to save while false. */\n  isChanged: boolean;\n  /** A save is in flight: buttons and keys are held until it settles. */\n  isSaving?: boolean;\n  /** Why the draft can't be saved; disables Save and becomes its tooltip. */\n  invalidReason?: string | null;\n  /** Renders the value as plain text. */\n  readOnly?: boolean;\n  /** Fills the row while editing (default); `false` keeps the field as wide as its text. */\n  fill?: boolean;\n  /** Long text wraps and the field grows a line at a time; without it the field stays one line. */\n  multiline?: boolean;\n  /** Box height and buttons: sm 24, md 32, lg and title 40px, or `auto` to follow the text. */\n  size?: Size;\n  /** One line with an ellipsis in view mode; otherwise up to two lines. */\n  truncate?: boolean;\n  placeholder?: string;\n  /** Tooltip on the value in view mode. */\n  editTooltip?: ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  maxLength?: number;\n  /** Accessible name of the field; defaults to `placeholder`. */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/**\n * Click-to-edit text: a page title, an entity name, a short label in a row.\n *\n * - The caller owns the draft and the editing flag, so it can validate, save and fail on its own terms.\n * - Enter saves a change and closes an unchanged edit; Escape cancels.\n * - Not for multi-paragraph or markdown text: use `MarkdownEditor`.\n */\nexport const InlineEdit = ({\n  value,\n  onChange,\n  onSubmit,\n  onCancel,\n  isEditing,\n  onEditStart,\n  isChanged,\n  isSaving = false,\n  invalidReason = null,\n  readOnly = false,\n  fill = true,\n  multiline = false,\n  size = 'auto',\n  truncate = false,\n  placeholder = 'Click to edit',\n  editTooltip = 'Click to edit',\n  tooltipPlacement = 'top',\n  maxLength,\n  'aria-label': ariaLabel,\n  className,\n}: Props) => {\n  const formRef = useRef<HTMLFormElement>(null);\n  const viewButtonRef = useRef<HTMLButtonElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const wasEditingRef = useRef(isEditing);\n  const reasonId = useId();\n  const { inputRef, inputStyle, sizerElement } = useAutosizeInput({ value, placeholder });\n  const [rowWidth, setRowWidth] = useState(0);\n  const boxRef = useRef<HTMLDivElement>(null);\n  const buttonsRef = useRef<HTMLDivElement>(null);\n  const boxWidthRef = useRef(0);\n  // The width sizer mounts on first hover or focus, before the first open, not with every row.\n  const [isPrimed, setIsPrimed] = useState(false);\n  // Focus returning after an edit doesn't pop \"Click to edit\"; it shows again once the user moves on.\n  const [isTipQuiet, setIsTipQuiet] = useState(false);\n\n  const isValid = !invalidReason;\n  const canSave = isChanged && isValid && !isSaving;\n  // Text labels only beside a sized box: next to small `auto` text a 40px label would tower.\n  const showLabels = fill && size !== 'auto' && rowWidth >= LABELLED_BUTTONS_MIN_WIDTH;\n  const stackButtons = fill && multiline && rowWidth > 0 && rowWidth < INLINE_BUTTONS_MIN_WIDTH;\n  const sizing = SIZES[size];\n\n  useEffect(() => {\n    const wasEditing = wasEditingRef.current;\n    wasEditingRef.current = isEditing;\n\n    if (isEditing) {\n      const field = textareaRef.current ?? inputRef.current;\n      field?.focus();\n      field?.setSelectionRange(field.value.length, field.value.length);\n      return;\n    }\n\n    if (!wasEditing) return;\n    // oxlint-disable-next-line react-x/set-state-in-effect -- the close is a prop change, seen only here\n    setIsTipQuiet(true);\n    // Closing the editor removed the focused field; hand focus back to the value, not to <body>.\n    if (!document.activeElement || document.activeElement === document.body) {\n      viewButtonRef.current?.focus();\n    }\n  }, [isEditing, inputRef]);\n\n  // Tracks the box's width, so a toggle knows where its animation starts.\n  useLayoutEffect(() => {\n    const box = boxRef.current;\n    if (!box || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      boxWidthRef.current = box.offsetWidth;\n    });\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, []);\n\n  // Grows the box from its text to the row and slides Save / Cancel open, then reverses both.\n  // - Measured widths, not `fr` tracks: an `fr` track sized by its content doesn't transition.\n  useLayoutEffect(() => {\n    const box = boxRef.current;\n    const buttons = buttonsRef.current;\n    const from = boxWidthRef.current;\n    if (!box || !buttons || !from) return;\n\n    // A toggle mid-animation measures the box's own size, not the one the last animation holds.\n    for (const running of box.getAnimations()) running.cancel();\n    const to = box.offsetWidth;\n    boxWidthRef.current = to;\n    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n    if (reduceMotion || typeof box.animate !== 'function') return;\n\n    const timing = { duration: EXPAND_MS, easing: 'ease-out' };\n    if (from !== to) {\n      // An open `fill` box is a growing flex item, which ignores `width`; `max-width` holds it.\n      const property = fill && isEditing ? 'maxWidth' : 'width';\n      const field = textareaRef.current;\n      // One line while it grows, so the text doesn't wrap and unwrap as the box widens.\n      if (field) field.style.whiteSpace = 'nowrap';\n      const animation = box.animate(\n        [{ [property]: `${from}px` }, { [property]: `${to}px` }],\n        timing,\n      );\n      // A closing `fill` field holds its row until it has shrunk:\n      // - `data-expanded` stays on until the animation ends;\n      // - `data-settled` then marks that a rename closed here, so what the row hid fades back in.\n      const heldRow = fill && !isEditing ? formRef.current : null;\n      if (heldRow) heldRow.dataset.expanded = 'true';\n      animation.onfinish = () => {\n        if (field) field.style.whiteSpace = '';\n        if (!heldRow) return;\n        delete heldRow.dataset.expanded;\n        heldRow.dataset.settled = 'true';\n      };\n    }\n\n    // - Clips only sideways, so buttons taller than the line keep their borders.\n    // - Open buttons aren't clipped at all, so their focus rings show.\n    for (const running of buttons.getAnimations()) running.cancel();\n    const buttonsWidth = `${buttons.scrollWidth}px`;\n    buttons.style.overflowX = 'clip';\n    buttons.animate(\n      isEditing\n        ? [{ maxWidth: '0px' }, { maxWidth: buttonsWidth }]\n        : [{ maxWidth: buttonsWidth }, { maxWidth: '0px' }],\n      timing,\n    ).onfinish = () => {\n      buttons.style.overflowX = '';\n    };\n  }, [isEditing, fill]);\n\n  useLayoutEffect(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n\n    const fitHeight = () => {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n    };\n    fitHeight();\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(fitHeight);\n    observer.observe(textarea);\n    return () => observer.disconnect();\n  }, [isEditing, value]);\n\n  useLayoutEffect(() => {\n    const form = formRef.current;\n    if (!fill || !isEditing || !form) return;\n\n    // Measured before paint, so the buttons never render at one size and settle at another.\n    // `offsetWidth` is the layout width: a scale transform (an opening modal) doesn't change it.\n    // oxlint-disable-next-line react-x/set-state-in-effect -- a layout read has to happen before paint\n    const fitButtons = (width: number) => setRowWidth(width);\n    fitButtons(form.offsetWidth);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => fitButtons(form.offsetWidth));\n    observer.observe(form);\n    return () => observer.disconnect();\n  }, [fill, isEditing]);\n\n  if (readOnly) {\n    return <span className={cn(truncate && 'tw:block tw:truncate', className)}>{value}</span>;\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      if (!isSaving) onCancel();\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (isSaving) return;\n      if (!isChanged) onCancel();\n      else if (isValid) onSubmit();\n    }\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLFormElement>) => {\n    if (!isEditing || isSaving) return;\n    // Focus left the window (resizing it, switching apps), not the field: keep editing.\n    if (!document.hasFocus()) return;\n    const next = event.relatedTarget;\n    if (next instanceof Node && event.currentTarget.contains(next)) return;\n    if (!isChanged) onCancel();\n    else if (isValid) onSubmit();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    onChange(multiline ? event.target.value.replace(/[\\r\\n]+/g, ' ') : event.target.value);\n  };\n\n  const fieldProps = {\n    value,\n    placeholder,\n    maxLength,\n    readOnly: isSaving,\n    'aria-label': ariaLabel ?? placeholder,\n    'aria-invalid': !isValid || undefined,\n    'aria-describedby': invalidReason ? reasonId : undefined,\n    onChange: handleChange,\n    onKeyDown: handleKeyDown,\n    onKeyUp: (event: KeyboardEvent) => event.stopPropagation(),\n    onClick: (event: MouseEvent) => event.stopPropagation(),\n  };\n\n  const saveTooltip = (() => {\n    if (isSaving) return 'Saving…';\n    if (!isChanged) return 'No changes to save';\n    if (invalidReason) return invalidReason;\n    return <ShortcutLabel label=\"Save\" shortcut={keys.enter.symbol} />;\n  })();\n\n  const iconButtonClass = size === 'auto' ? AUTO_ICON_BUTTON_CLASS : sizing.iconFit;\n  // Labelled buttons match the box's height whatever the brand's own button height is.\n  const labelButtonClass = sizing.fit;\n  const buttonSize = showLabels ? sizing.label : sizing.icon;\n\n  const view = (\n    <Tooltip\n      tooltip={editTooltip}\n      placement={tooltipPlacement}\n      forceHide={isTipQuiet}\n      triggerAsChild\n    >\n      <button\n        ref={viewButtonRef}\n        type=\"button\"\n        data-testid=\"inline-edit-trigger\"\n        className={cn(\n          'tw:block tw:max-w-full tw:cursor-text tw:text-left tw:outline-hidden',\n          'tw:[font:inherit] tw:leading-[inherit] tw:[color:inherit]',\n          // The whole box takes the click, not just the glyphs.\n          'tw:after:absolute tw:after:inset-0',\n          truncate && 'tw:min-w-0 tw:truncate',\n        )}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          onEditStart?.();\n        }}\n        onBlur={() => setIsTipQuiet(false)}\n        onPointerLeave={() => setIsTipQuiet(false)}\n      >\n        {value ? (\n          <span className={cn(!truncate && !multiline && 'tw:line-clamp-2', 'tw:break-words')}>\n            {value}\n          </span>\n        ) : (\n          <span className=\"tw:text-muted-foreground\">{placeholder}</span>\n        )}\n      </button>\n    </Tooltip>\n  );\n\n  const field = multiline ? (\n    <textarea\n      ref={textareaRef}\n      rows={1}\n      className={cn(FIELD_CLASS, 'tw:w-full tw:resize-none tw:overflow-hidden tw:break-words')}\n      {...fieldProps}\n    />\n  ) : (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      className={cn(FIELD_CLASS, fill ? 'tw:w-full' : 'tw:max-w-full')}\n      style={fill ? undefined : inputStyle}\n      {...fieldProps}\n    />\n  );\n\n  const buttons = (\n    <div\n      className={cn(\n        'tw:flex tw:items-center tw:gap-1',\n        // - The gap lives inside the collapsing track, so a closed field leaves no trailing space.\n        // - Beside the field the row is one line tall, so taller buttons overhang it evenly.\n        stackButtons ? 'tw:pt-2' : 'tw:h-[1lh] tw:pl-2',\n        'tw:transition-opacity tw:duration-200 tw:ease-out',\n        isEditing ? 'tw:opacity-100' : 'tw:opacity-0',\n      )}\n    >\n      <Tooltip tooltip={saveTooltip} placement=\"top\" triggerAsChild>\n        <span className={cn('tw:inline-flex', !canSave && 'tw:cursor-not-allowed')}>\n          <Button\n            type=\"submit\"\n            variant=\"primary\"\n            size={buttonSize}\n            aria-label={showLabels ? undefined : 'Save'}\n            isLoading={!showLabels && isSaving}\n            disabled={!canSave}\n            onMouseDown={keepFieldFocus}\n            className={cn(\n              'tw:transition-colors',\n              showLabels ? labelButtonClass : iconButtonClass,\n              !canSave && 'tw:pointer-events-none',\n            )}\n          >\n            {showLabels ? (\n              // The spinner overlays the label, so Save keeps its width and Cancel stays put.\n              <>\n                <span className={cn(isSaving && 'tw:invisible')}>Save</span>\n                {isSaving && <Loader2 className=\"tw:absolute tw:size-4 tw:animate-spin\" />}\n              </>\n            ) : (\n              <Check />\n            )}\n          </Button>\n        </span>\n      </Tooltip>\n      <Tooltip\n        tooltip={<ShortcutLabel label=\"Cancel\" shortcut=\"Esc\" />}\n        placement=\"top\"\n        triggerAsChild\n      >\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size={buttonSize}\n          aria-label={showLabels ? undefined : 'Cancel'}\n          disabled={isSaving}\n          className={cn('tw:transition-colors', showLabels ? labelButtonClass : iconButtonClass)}\n          onMouseDown={keepFieldFocus}\n          onClick={(event) => {\n            event.stopPropagation();\n            onCancel();\n          }}\n        >\n          {showLabels ? 'Cancel' : <X />}\n        </Button>\n      </Tooltip>\n    </div>\n  );\n\n  return (\n    <form\n      ref={formRef}\n      data-slot=\"inline-edit\"\n      data-state={isEditing ? 'edit' : 'view'}\n      data-expanded={(fill && isEditing) || undefined}\n      aria-busy={isSaving || undefined}\n      className={cn(\n        'tw:leading-[inherit]',\n        // Top-aligned: Save / Cancel sit on the first line however many lines the text wraps to.\n        fill && isEditing\n          ? 'tw:flex tw:w-full tw:min-w-0 tw:items-start'\n          : 'tw:inline-flex tw:max-w-full tw:items-center',\n        // Only a wrapping title moves Save / Cancel under the field; one line keeps them beside it.\n        fill && isEditing && multiline && 'tw:flex-wrap',\n        truncate && !isEditing && 'tw:flex tw:min-w-0',\n        className,\n      )}\n      onSubmit={(event) => {\n        event.preventDefault();\n        if (canSave) onSubmit();\n      }}\n      onBlur={handleBlur}\n      // Escape on Save / Cancel cancels too; the field handles its own keys first.\n      onKeyDown={(event) => {\n        if (event.key !== 'Escape' || !isEditing) return;\n        event.preventDefault();\n        event.stopPropagation();\n        if (!isSaving) onCancel();\n      }}\n    >\n      <div\n        ref={boxRef}\n        onPointerEnter={() => setIsPrimed(true)}\n        onFocus={() => setIsPrimed(true)}\n        className={cn(\n          BOX_CLASS,\n          sizing.box,\n          'tw:min-w-0',\n          fill && isEditing && 'tw:flex-1',\n          fill && isEditing && multiline && 'tw:min-w-[min(100%,12rem)]',\n          !isEditing && VIEW_BOX_CLASS,\n          isEditing &&\n            (isValid\n              ? 'tw:border-ring tw:bg-input-background tw:ring-3 tw:ring-ring/25'\n              : 'tw:border-destructive tw:bg-input-background tw:ring-3 tw:ring-destructive/20'),\n          isEditing && !fill && !multiline && 'tw:inline-flex',\n        )}\n      >\n        {isEditing ? field : view}\n        {/* Measures from first hover, so the first open already knows the field's width. */}\n        {!fill && !multiline && (isPrimed || isEditing) && (\n          <span aria-hidden className=\"tw:absolute tw:size-0 tw:overflow-hidden\">\n            {sizerElement}\n          </span>\n        )}\n      </div>\n      {isEditing && invalidReason && (\n        <span id={reasonId} className=\"tw:sr-only\" aria-live=\"polite\">\n          {invalidReason}\n        </span>\n      )}\n      {/* Stays mounted, inert while closed, so it can slide shut after Save / Cancel. */}\n      <div\n        ref={buttonsRef}\n        inert={!isEditing}\n        aria-hidden={!isEditing || undefined}\n        className={cn(\n          fill ? 'tw:self-start' : 'tw:self-center',\n          !isEditing && 'tw:max-w-0 tw:overflow-x-clip',\n          stackButtons && isEditing && 'tw:basis-full',\n        )}\n      >\n        {/* Argo on every brand, so Save / Cancel look the same on legacy pages too. */}\n        <ArgoDesignContext value>{buttons}</ArgoDesignContext>\n      </div>\n    </form>\n  );\n};\n"],"mappings":"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"}

package/dist/{InputGroup-CrlMRz4X.js → InputGroup-Dm014ruw.js}

@@ -1,6 +1,6 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import TextareaAutosize from "react-textarea-autosize";
@@ -230,7 +230,7 @@ const inputGroupVariants = cva([
 				"tw:bg-muted",
 				"tw:border-input",
 				"tw:text-foreground",
-				"tw:has-[:is(input,textarea):disabled]:opacity-50",
+				"tw:has-[:is(input,textarea):disabled]:opacity-disabled",
 				"tw:has-[:is(input,textarea)[readonly]]:bg-muted",
 				"tw:has-[:is(input,textarea)[readonly]]:border-input",
 				"tw:has-[:is(input,textarea)[readonly]:focus]:border-input",
@@ -296,4 +296,4 @@ InputGroup.Text = InputGroupText;
 //#endregion
 export { InputGroup };
 
-//# sourceMappingURL=InputGroup-CrlMRz4X.js.map
+//# sourceMappingURL=InputGroup-Dm014ruw.js.map

package/dist/{InputGroup-CrlMRz4X.js.map → InputGroup-Dm014ruw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputGroup-CrlMRz4X.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-1',\n\n    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-start',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first', 'tw:shrink-0', 'tw:[&:not(:empty)]:pl-4'],\n        'inline-end': ['tw:order-last', 'tw:shrink-0', 'tw:[&:not(:empty)]:pr-4'],\n        'block-start': [\n          'tw:order-first',\n          // `tw:w-full` needs to be empty-conditional too — when the addon\n          // has no content the root stays in flex-row, and a 100%-wide\n          // empty addon would claim half of the input row beside the input.\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n        'block-end': [\n          'tw:order-last',\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n  children,\n  align = 'inline-start',\n  className,\n  ...props\n}: Props) => (\n  <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n  <Button\n    {...props}\n    tabIndex={tabIndex}\n    ref={ref}\n    variant=\"invisible\"\n    size=\"icon-sm\"\n    className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n  <input\n    {...inputProps}\n    ref={ref}\n    className={cn(\n      'tw:flex-1',\n      'tw:min-w-0',\n      'tw:bg-transparent',\n      'tw:outline-hidden',\n\n      // font\n      'tw:font-sans',\n      'tw:text-sm',\n\n      // placeholder\n      'tw:placeholder:text-neutral-400',\n      'tw:placeholder:font-normal',\n\n      // disabled\n      'tw:disabled:cursor-not-allowed',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n  <span\n    className={cn(\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n      'tw:text-sm',\n      'tw:text-muted-foreground',\n      'tw:[&_svg]:pointer-events-none',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n  ComponentProps<typeof TextareaAutosize>,\n  'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  onValueBlur?: (value: string) => void;\n  maxRows?: number | 'unlimited';\n  disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n  ref,\n  className,\n  onChange,\n  onValueChange,\n  value,\n  defaultValue,\n  onBlur,\n  onValueBlur,\n  disableResize = false,\n  minRows = 1,\n  maxRows = 4,\n  ...props\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueChange?.(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  return (\n    <TextareaAutosize\n      {...props}\n      ref={ref}\n      value={value ?? undefined}\n      defaultValue={defaultValue ?? undefined}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      minRows={minRows}\n      maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n      className={cn(\n        'tw:w-full',\n        'tw:bg-transparent',\n        'tw:outline-hidden',\n        'tw:px-4',\n\n        // font\n        'tw:font-sans',\n        'tw:text-sm',\n\n        // placeholder\n        'tw:placeholder:text-neutral-400',\n        'tw:placeholder:font-normal',\n\n        // disabled\n        'tw:disabled:cursor-not-allowed',\n        {\n          'tw:resize-none': disableResize,\n        },\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group',\n\n    'tw:overflow-hidden',\n    'tw:box-border',\n\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    // A flex item's default `min-width: auto` floors the group at its content's intrinsic width,\n    // so a constrained row (several groups side by side) overflows rather than sharing the space.\n    // The group clips its own content anyway, and the input inside already carries `min-w-0`.\n    'tw:min-w-0',\n\n    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with\n    // the brand radius token in the `argo` variant below.\n    'tw:rounded',\n    'tw:border',\n    'tw:border-solid',\n    // `border-input` and `text-foreground` follow the colour scheme.\n    'tw:border-input',\n    'tw:text-foreground',\n    'tw:transition',\n\n    // focus\n    'tw:has-[:is(input,textarea):focus]:ring-4',\n\n    // readonly\n    'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n    'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n    'tw:has-[:is(input,textarea)[readonly]]:border-input',\n\n    // disabled cursor (opacity owned by variant)\n    'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n\n    // textarea: top-align addons, allow vertical expansion, own its y-padding\n    'tw:has-[textarea]:items-start',\n\n    'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n    'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n    'tw:[&_input]:px-4',\n    'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n    'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n  ],\n  {\n    defaultVariants: {\n      variant: 'primary',\n      state: 'default',\n      sizing: 'medium',\n      focusVariant: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'secondary',\n        state: 'error',\n        // The fixed light fill needs pinned dark text — `foreground` is near-white in dark.\n        className: ['tw:bg-error-100', 'tw:text-neutral-800'],\n      },\n      {\n        variant: 'secondary',\n        state: 'warning',\n        // Same pin as `error` above.\n        className: ['tw:bg-warning-100', 'tw:text-neutral-800'],\n      },\n      {\n        variant: 'primary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-neutral-200'],\n      },\n      {\n        variant: 'secondary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-secondary'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-error-500', 'tw:!ring-error-200'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'warning',\n        focusVariant: 'on',\n        className: ['tw:!border-warning-500', 'tw:!ring-warning-200'],\n      },\n      // --- argo ---\n      {\n        variant: 'argo',\n        state: 'default',\n        className: [\n          'tw:has-[:is(input,textarea):focus]:border-primary',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n        ],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        className: [\n          'tw:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n        ],\n      },\n      {\n        variant: 'argo',\n        focusVariant: 'on',\n        className: ['tw:!border-primary', 'tw:!ring-ring/50'],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n      },\n      {\n        variant: 'argo',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n      },\n    ],\n    variants: {\n      focusVariant: {\n        default: [],\n        on: ['tw:!border-ring', 'tw:!ring-ring/30', 'tw:!ring-4'],\n        off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n      },\n      variant: {\n        primary: [\n          // The field-surface token — white in the light scheme, so this is a\n          // no-op there; the dark scheme gets a field fill, not a white slab.\n          'tw:bg-input-background',\n          'tw:text-foreground',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (mirrors the `state=\"error\"` legacy tokens). Higher specificity than\n          // the default focus selector, so it wins without `!important`.\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        secondary: [\n          'tw:bg-secondary',\n          'tw:border-secondary',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        argo: [\n          // argo follows the brand radius token (overrides the static base)\n          'tw:rounded-[var(--radius-lg,0.25rem)]',\n          // muted filled input surface — gray, distinct from white containers; not the app-background token.\n          // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a\n          // grey inset by design. Converging the two is a brand-value decision, not a component one.\n          'tw:bg-muted',\n          'tw:border-input',\n          'tw:text-foreground',\n          'tw:has-[:is(input,textarea):disabled]:opacity-50',\n          // readonly: muted fill, input border — same pair as the editable argo field.\n          'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n          'tw:has-[:is(input,textarea)[readonly]]:border-input',\n          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly\n          'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (uses the themeable `destructive` status token).\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n        ],\n      },\n      sizing: {\n        default: [\n          'tw:[&_:is(input,textarea)]:py-2.5',\n          'tw:[&_:is(input,textarea)]:leading-[18px]',\n          'tw:[&_textarea]:!min-h-[calc(2.5rem-2px)]',\n        ],\n        small: [\n          'tw:[&_:is(input,textarea)]:py-2',\n          'tw:[&_:is(input,textarea)]:leading-[16px]',\n          'tw:[&_textarea]:!min-h-[calc(2rem-2px)]',\n        ],\n        medium: [\n          'tw:[&_:is(input,textarea)]:py-2',\n          'tw:[&_:is(input,textarea)]:leading-[18px]',\n          'tw:[&_textarea]:!min-h-[calc(2.25rem-2px)]',\n        ],\n      },\n      state: {\n        default: [\n          'tw:has-[:is(input,textarea):focus]:border-ring',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/30',\n        ],\n        error: [\n          'tw:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:ring-error-200',\n        ],\n        warning: [\n          'tw:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:ring-warning-200',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentPropsWithRef<'div'> &\n  Omit<VariantProps<typeof inputGroupVariants>, 'variant'> & {\n    variant?: Exclude<VariantProps<typeof inputGroupVariants>['variant'], 'argo'>;\n  };\n\nconst InputGroupRoot = ({\n  ref,\n  children,\n  state,\n  variant,\n  sizing,\n  focusVariant,\n  className,\n  ...props\n}: Props) => {\n  const isArgo = useArgoDesign();\n  const effectiveVariant = isArgo ? 'argo' : variant;\n  const effectiveSizing = effectiveVariant === 'argo' ? 'medium' : sizing;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cn(\n        inputGroupVariants({\n          state,\n          variant: effectiveVariant,\n          sizing: effectiveSizing,\n          focusVariant,\n          className,\n        }),\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n  Input: typeof InputGroupInput;\n  Addon: typeof InputGroupAddon;\n  Button: typeof InputGroupButton;\n  TextArea: typeof InputGroupTextArea;\n  Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":"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AK,CAAC,4CAA4C;EACpD;EACA,SAAS;GACP,SAAS;IAGP;IACA;IACA;IAIA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IAIA;IACA;IACA;IACA;IAEA;IACA;IAEA;IAGA;IACA;IACA;GACF;EACF;EACA,QAAQ;GACN,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,SAAS,CACP,kDACA,iDACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAOA,MAAM,kBAAkB,EACtB,KACA,UACA,OACA,SACA,QACA,cACA,WACA,GAAG,YACQ;CAEX,MAAM,mBADS,cACe,IAAI,SAAS;CAC3C,MAAM,kBAAkB,qBAAqB,SAAS,WAAW;CACjE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,mBAAmB;GACjB;GACA,SAAS;GACT,QAAQ;GACR;GACA;EACF,CAAC,CACH;EAEC;CACE,CAAA;AAET;AAEA,MAAa,aAAa;AAQ1B,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO"}
+{"version":3,"file":"InputGroup-Dm014ruw.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-1',\n\n    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-start',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first', 'tw:shrink-0', 'tw:[&:not(:empty)]:pl-4'],\n        'inline-end': ['tw:order-last', 'tw:shrink-0', 'tw:[&:not(:empty)]:pr-4'],\n        'block-start': [\n          'tw:order-first',\n          // `tw:w-full` needs to be empty-conditional too — when the addon\n          // has no content the root stays in flex-row, and a 100%-wide\n          // empty addon would claim half of the input row beside the input.\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n        'block-end': [\n          'tw:order-last',\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n  children,\n  align = 'inline-start',\n  className,\n  ...props\n}: Props) => (\n  <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n  <Button\n    {...props}\n    tabIndex={tabIndex}\n    ref={ref}\n    variant=\"invisible\"\n    size=\"icon-sm\"\n    className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n  <input\n    {...inputProps}\n    ref={ref}\n    className={cn(\n      'tw:flex-1',\n      'tw:min-w-0',\n      'tw:bg-transparent',\n      'tw:outline-hidden',\n\n      // font\n      'tw:font-sans',\n      'tw:text-sm',\n\n      // placeholder\n      'tw:placeholder:text-neutral-400',\n      'tw:placeholder:font-normal',\n\n      // disabled\n      'tw:disabled:cursor-not-allowed',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n  <span\n    className={cn(\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n      'tw:text-sm',\n      'tw:text-muted-foreground',\n      'tw:[&_svg]:pointer-events-none',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n  ComponentProps<typeof TextareaAutosize>,\n  'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  onValueBlur?: (value: string) => void;\n  maxRows?: number | 'unlimited';\n  disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n  ref,\n  className,\n  onChange,\n  onValueChange,\n  value,\n  defaultValue,\n  onBlur,\n  onValueBlur,\n  disableResize = false,\n  minRows = 1,\n  maxRows = 4,\n  ...props\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueChange?.(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  return (\n    <TextareaAutosize\n      {...props}\n      ref={ref}\n      value={value ?? undefined}\n      defaultValue={defaultValue ?? undefined}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      minRows={minRows}\n      maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n      className={cn(\n        'tw:w-full',\n        'tw:bg-transparent',\n        'tw:outline-hidden',\n        'tw:px-4',\n\n        // font\n        'tw:font-sans',\n        'tw:text-sm',\n\n        // placeholder\n        'tw:placeholder:text-neutral-400',\n        'tw:placeholder:font-normal',\n\n        // disabled\n        'tw:disabled:cursor-not-allowed',\n        {\n          'tw:resize-none': disableResize,\n        },\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group',\n\n    'tw:overflow-hidden',\n    'tw:box-border',\n\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    // A flex item's default `min-width: auto` floors the group at its content's intrinsic width,\n    // so a constrained row (several groups side by side) overflows rather than sharing the space.\n    // The group clips its own content anyway, and the input inside already carries `min-w-0`.\n    'tw:min-w-0',\n\n    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with\n    // the brand radius token in the `argo` variant below.\n    'tw:rounded',\n    'tw:border',\n    'tw:border-solid',\n    // `border-input` and `text-foreground` follow the colour scheme.\n    'tw:border-input',\n    'tw:text-foreground',\n    'tw:transition',\n\n    // focus\n    'tw:has-[:is(input,textarea):focus]:ring-4',\n\n    // readonly\n    'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n    'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n    'tw:has-[:is(input,textarea)[readonly]]:border-input',\n\n    // disabled cursor (opacity owned by variant)\n    'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n\n    // textarea: top-align addons, allow vertical expansion, own its y-padding\n    'tw:has-[textarea]:items-start',\n\n    'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n    'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n    'tw:[&_input]:px-4',\n    'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n    'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n  ],\n  {\n    defaultVariants: {\n      variant: 'primary',\n      state: 'default',\n      sizing: 'medium',\n      focusVariant: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'secondary',\n        state: 'error',\n        // The fixed light fill needs pinned dark text — `foreground` is near-white in dark.\n        className: ['tw:bg-error-100', 'tw:text-neutral-800'],\n      },\n      {\n        variant: 'secondary',\n        state: 'warning',\n        // Same pin as `error` above.\n        className: ['tw:bg-warning-100', 'tw:text-neutral-800'],\n      },\n      {\n        variant: 'primary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-neutral-200'],\n      },\n      {\n        variant: 'secondary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-secondary'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-error-500', 'tw:!ring-error-200'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'warning',\n        focusVariant: 'on',\n        className: ['tw:!border-warning-500', 'tw:!ring-warning-200'],\n      },\n      // --- argo ---\n      {\n        variant: 'argo',\n        state: 'default',\n        className: [\n          'tw:has-[:is(input,textarea):focus]:border-primary',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n        ],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        className: [\n          'tw:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n        ],\n      },\n      {\n        variant: 'argo',\n        focusVariant: 'on',\n        className: ['tw:!border-primary', 'tw:!ring-ring/50'],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n      },\n      {\n        variant: 'argo',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n      },\n    ],\n    variants: {\n      focusVariant: {\n        default: [],\n        on: ['tw:!border-ring', 'tw:!ring-ring/30', 'tw:!ring-4'],\n        off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n      },\n      variant: {\n        primary: [\n          // The field-surface token — white in the light scheme, so this is a\n          // no-op there; the dark scheme gets a field fill, not a white slab.\n          'tw:bg-input-background',\n          'tw:text-foreground',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (mirrors the `state=\"error\"` legacy tokens). Higher specificity than\n          // the default focus selector, so it wins without `!important`.\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        secondary: [\n          'tw:bg-secondary',\n          'tw:border-secondary',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        argo: [\n          // argo follows the brand radius token (overrides the static base)\n          'tw:rounded-[var(--radius-lg,0.25rem)]',\n          // muted filled input surface — gray, distinct from white containers; not the app-background token.\n          // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a\n          // grey inset by design. Converging the two is a brand-value decision, not a component one.\n          'tw:bg-muted',\n          'tw:border-input',\n          'tw:text-foreground',\n          'tw:has-[:is(input,textarea):disabled]:opacity-disabled',\n          // readonly: muted fill, input border — same pair as the editable argo field.\n          'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n          'tw:has-[:is(input,textarea)[readonly]]:border-input',\n          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly\n          'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (uses the themeable `destructive` status token).\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n        ],\n      },\n      sizing: {\n        default: [\n          'tw:[&_:is(input,textarea)]:py-2.5',\n          'tw:[&_:is(input,textarea)]:leading-[18px]',\n          'tw:[&_textarea]:!min-h-[calc(2.5rem-2px)]',\n        ],\n        small: [\n          'tw:[&_:is(input,textarea)]:py-2',\n          'tw:[&_:is(input,textarea)]:leading-[16px]',\n          'tw:[&_textarea]:!min-h-[calc(2rem-2px)]',\n        ],\n        medium: [\n          'tw:[&_:is(input,textarea)]:py-2',\n          'tw:[&_:is(input,textarea)]:leading-[18px]',\n          'tw:[&_textarea]:!min-h-[calc(2.25rem-2px)]',\n        ],\n      },\n      state: {\n        default: [\n          'tw:has-[:is(input,textarea):focus]:border-ring',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/30',\n        ],\n        error: [\n          'tw:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:ring-error-200',\n        ],\n        warning: [\n          'tw:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:ring-warning-200',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentPropsWithRef<'div'> &\n  Omit<VariantProps<typeof inputGroupVariants>, 'variant'> & {\n    variant?: Exclude<VariantProps<typeof inputGroupVariants>['variant'], 'argo'>;\n  };\n\nconst InputGroupRoot = ({\n  ref,\n  children,\n  state,\n  variant,\n  sizing,\n  focusVariant,\n  className,\n  ...props\n}: Props) => {\n  const isArgo = useArgoDesign();\n  const effectiveVariant = isArgo ? 'argo' : variant;\n  const effectiveSizing = effectiveVariant === 'argo' ? 'medium' : sizing;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cn(\n        inputGroupVariants({\n          state,\n          variant: effectiveVariant,\n          sizing: effectiveSizing,\n          focusVariant,\n          className,\n        }),\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n  Input: typeof InputGroupInput;\n  Addon: typeof InputGroupAddon;\n  Button: typeof InputGroupButton;\n  TextArea: typeof InputGroupTextArea;\n  Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,IACpB;CACE;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,eACT;CACA,UAAU,EACR,OAAO;EACL,gBAAgB;GAAC;GAAkB;GAAe;EAAyB;EAC3E,cAAc;GAAC;GAAiB;GAAe;EAAyB;EACxE,eAAe;GACb;GAIA;GACA;GACA;EACF;EACA,aAAa;GACX;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAIA,MAAa,mBAAmB,EAC9B,UACA,QAAQ,gBACR,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,GAAI;CAAO,cAAY;CAAO,WAAW,GAAG,cAAc;EAAE;EAAO;CAAU,CAAC,CAAC;CACjF;AACE,CAAA;;;AC9CP,MAAa,oBAAoB,EAAE,KAAK,WAAW,WAAW,IAAI,GAAG,YACnE,oBAAC,QAAD;CACE,GAAI;CACM;CACL;CACL,SAAQ;CACR,MAAK;CACL,WAAW,GAAG,aAAa,oCAAoC,SAAS;AACzE,CAAA;;;ACXH,MAAa,mBAAmB,EAAE,KAAK,WAAW,GAAG,iBACnD,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GACT,aACA,cACA,qBACA,qBAGA,gBACA,cAGA,mCACA,8BAGA,kCAEA,SACF;AACD,CAAA;;;ACvBH,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,QAAD;CACE,WAAW,GACT,WACA,mBACA,YACA,cACA,4BACA,kCACA,gDACA,SACF;CACA,GAAI;AACL,CAAA;;;ACAH,MAAa,sBAAsB,EACjC,KACA,WACA,UACA,eACA,OACA,cACA,QACA,aACA,gBAAgB,OAChB,UAAU,GACV,UAAU,GACV,GAAG,YACQ;CACX,MAAM,gBAAyD,UAAU;EACvE,gBAAgB,MAAM,OAAO,KAAK;EAClC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAsD,UAAU;EACpE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,kBAAD;EACE,GAAI;EACC;EACL,OAAO,SAAS,KAAA;EAChB,cAAc,gBAAgB,KAAA;EAC9B,UAAU;EACV,QAAQ;EACC;EACT,SAAS,YAAY,cAAc,KAAA,IAAY;EAC/C,WAAW,GACT,aACA,qBACA,qBACA,WAGA,gBACA,cAGA,mCACA,8BAGA,kCACA,EACE,kBAAkB,cACpB,GAEA,SACF;CACD,CAAA;AAEL;;;ACjEA,MAAM,qBAAqB,IACzB;CACE;CACA;CAEA;CACA;CAGA;CACA;CAIA;CAIA;CACA;CACA;CAEA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GAEP,WAAW,CAAC,mBAAmB,qBAAqB;EACtD;EACA;GACE,SAAS;GACT,OAAO;GAEP,WAAW,CAAC,qBAAqB,qBAAqB;EACxD;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,uDAAuD;EACrE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,qDAAqD;EACnE;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,wBAAwB,oBAAoB;EAC1D;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,sBAAsB;EAC9D;EAEA;GACE,SAAS;GACT,OAAO;GACP,WAAW,CACT,qDACA,iDACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;IACT;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,cAAc;GACd,WAAW,CAAC,sBAAsB,kBAAkB;EACtD;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,yBAAyB;EACjE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,iDAAiD;EAC/D;CACF;CACA,UAAU;EACR,cAAc;GACZ,SAAS,CAAC;GACV,IAAI;IAAC;IAAmB;IAAoB;GAAY;GACxD,KAAK,CAAC,4CAA4C;EACpD;EACA,SAAS;GACP,SAAS;IAGP;IACA;IACA;IAIA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IAIA;IACA;IACA;IACA;IAEA;IACA;IAEA;IAGA;IACA;IACA;GACF;EACF;EACA,QAAQ;GACN,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,SAAS,CACP,kDACA,iDACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAOA,MAAM,kBAAkB,EACtB,KACA,UACA,OACA,SACA,QACA,cACA,WACA,GAAG,YACQ;CAEX,MAAM,mBADS,cACe,IAAI,SAAS;CAC3C,MAAM,kBAAkB,qBAAqB,SAAS,WAAW;CACjE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,mBAAmB;GACjB;GACA,SAAS;GACT,QAAQ;GACR;GACA;EACF,CAAC,CACH;EAEC;CACE,CAAA;AAET;AAEA,MAAa,aAAa;AAQ1B,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO"}

package/dist/{Kbd-J4n1J6i4.js → Kbd-3YM7NQO4.js}

@@ -1,5 +1,5 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { isMac } from "./utils-Bd28bWgm.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { isMac } from "./utils-LQ4jJA-9.js";
 import { Children, Fragment } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -128,4 +128,4 @@ const keys = createKeyboardKeys();
 //#endregion
 export { Kbd, kbdVariants, keys };
 
-//# sourceMappingURL=Kbd-J4n1J6i4.js.map
+//# sourceMappingURL=Kbd-3YM7NQO4.js.map

package/dist/{Kbd-J4n1J6i4.js.map → Kbd-3YM7NQO4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Kbd-J4n1J6i4.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * The `+` / `then` glue between two `Kbd` keys.\n *\n * - Follows the muted chrome token by default.\n * - Turns white inside the legacy dark tooltip, which sets `data-tooltip-content`.\n */\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n  <span\n    {...props}\n    className={cn(\n      'tw:text-xs tw:text-muted-foreground',\n      'tw:[[data-tooltip-content=true]_&]:text-white/70',\n      className,\n    )}\n  />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n    >\n      {separator\n        ? // oxlint-disable-next-line react-x/no-children-to-array\n          Children.toArray(children).map((child, index) => (\n            // oxlint-disable-next-line\n            <Fragment key={index}>\n              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </kbd>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  [\n    'tailwindcss-preflight',\n    // style\n    'tw:pointer-events-none',\n    'tw:w-fit',\n    'tw:h-5',\n    'tw:min-w-5',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-1',\n    'tw:shrink-0',\n\n    // spacing\n    'tw:px-1',\n    'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n    'tw:text-xs',\n    'tw:font-medium',\n\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n      casing: 'upper',\n    },\n    variants: {\n      // Uppercase like a keycap; `as-written` for layout-printed labels, where the transform\n      // changes glyph count (`ß` → `SS`).\n      casing: {\n        upper: 'tw:uppercase',\n        'as-written': '',\n      },\n      variant: {\n        default: 'tw:bg-muted tw:text-muted-foreground',\n        // Tooltip shortcut key: white only inside the dark `data-tooltip-content` tooltip;\n        // Argo's light tooltip sets no such attribute, so white there would be invisible.\n        primary: [\n          'tw:bg-muted tw:text-muted-foreground',\n          'tw:[[data-tooltip-content=true]_&]:bg-white/20',\n          'tw:[[data-tooltip-content=true]_&]:text-white',\n        ],\n      },\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, casing, ...rest }: Props) => (\n  <kbd {...rest} className={kbdVariants({ className, variant, casing })}>\n    {children}\n  </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n  mac: KeyRepresentation;\n  windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n  mod: {\n    mac: { symbol: '⌘', text: 'Command' },\n    windows: { symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  option: {\n    mac: { symbol: '⌥', text: 'Option' },\n    windows: { symbol: 'Alt', text: 'Alt' },\n  },\n  shift: {\n    mac: { symbol: '⇧', text: 'Shift' },\n    windows: { symbol: '⇧', text: 'Shift' },\n  },\n  enter: {\n    mac: { symbol: '⏎', text: 'Enter' },\n    windows: { symbol: '⏎', text: 'Enter' },\n  },\n};\n\nconst createKeyboardKeys = () => {\n  const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n  for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n    keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n  }\n\n  return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,uCACA,oDACA,SACF;AACD,CAAA;;;ACXH,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAGR,QAAQ;GACN,OAAO;GACP,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GAGT,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;;;AC1CA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ,GAAG,WAC7D,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;EAAS;CAAO,CAAC;CACjE;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}
+{"version":3,"file":"Kbd-3YM7NQO4.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * The `+` / `then` glue between two `Kbd` keys.\n *\n * - Follows the muted chrome token by default.\n * - Turns white inside the legacy dark tooltip, which sets `data-tooltip-content`.\n */\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n  <span\n    {...props}\n    className={cn(\n      'tw:text-xs tw:text-muted-foreground',\n      'tw:[[data-tooltip-content=true]_&]:text-white/70',\n      className,\n    )}\n  />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n    >\n      {separator\n        ? // oxlint-disable-next-line react-x/no-children-to-array\n          Children.toArray(children).map((child, index) => (\n            // oxlint-disable-next-line\n            <Fragment key={index}>\n              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </kbd>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  [\n    'tailwindcss-preflight',\n    // style\n    'tw:pointer-events-none',\n    'tw:w-fit',\n    'tw:h-5',\n    'tw:min-w-5',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-1',\n    'tw:shrink-0',\n\n    // spacing\n    'tw:px-1',\n    'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n    'tw:text-xs',\n    'tw:font-medium',\n\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n      casing: 'upper',\n    },\n    variants: {\n      // Uppercase like a keycap; `as-written` for layout-printed labels, where the transform\n      // changes glyph count (`ß` → `SS`).\n      casing: {\n        upper: 'tw:uppercase',\n        'as-written': '',\n      },\n      variant: {\n        default: 'tw:bg-muted tw:text-muted-foreground',\n        // Tooltip shortcut key: white only inside the dark `data-tooltip-content` tooltip;\n        // Argo's light tooltip sets no such attribute, so white there would be invisible.\n        primary: [\n          'tw:bg-muted tw:text-muted-foreground',\n          'tw:[[data-tooltip-content=true]_&]:bg-white/20',\n          'tw:[[data-tooltip-content=true]_&]:text-white',\n        ],\n      },\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, casing, ...rest }: Props) => (\n  <kbd {...rest} className={kbdVariants({ className, variant, casing })}>\n    {children}\n  </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n  mac: KeyRepresentation;\n  windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n  mod: {\n    mac: { symbol: '⌘', text: 'Command' },\n    windows: { symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  option: {\n    mac: { symbol: '⌥', text: 'Option' },\n    windows: { symbol: 'Alt', text: 'Alt' },\n  },\n  shift: {\n    mac: { symbol: '⇧', text: 'Shift' },\n    windows: { symbol: '⇧', text: 'Shift' },\n  },\n  enter: {\n    mac: { symbol: '⏎', text: 'Enter' },\n    windows: { symbol: '⏎', text: 'Enter' },\n  },\n};\n\nconst createKeyboardKeys = () => {\n  const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n  for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n    keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n  }\n\n  return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,uCACA,oDACA,SACF;AACD,CAAA;;;ACXH,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAGR,QAAQ;GACN,OAAO;GACP,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GAGT,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;;;AC1CA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ,GAAG,WAC7D,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;EAAS;CAAO,CAAC;CACjE;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}