@keboola/design 11.0.0 → 11.0.1

package/dist/Button-nzmDNS2q.js

@@ -0,0 +1,391 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Loader2 } from "./icons-Cek151jC.js";
+import { Root, Slottable } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button/styles.ts
+const variants = cva([
+	"tailwindcss-preflight",
+	"tw:group/button",
+	"tw:border-box",
+	"tw:relative",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-2",
+	"tw:text-xs",
+	"tw:leading-5",
+	"tw:font-medium",
+	"tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome",
+	"tw:[[data-brand^=keboola-legacy]_&]:uppercase",
+	"tw:rounded",
+	"tw:border",
+	"tw:border-transparent",
+	"tw:shadow-none",
+	"tw:[a]:cursor-pointer",
+	"tw:focus-visible:outline",
+	"tw:focus-visible:outline-1",
+	"tw:focus-visible:-outline-offset-1",
+	"tw:focus-visible:outline-ring",
+	"tw:focus-visible:ring-4",
+	"tw:focus-visible:ring-ring/30",
+	"tw:disabled:opacity-40",
+	"tw:disabled:cursor-not-allowed",
+	"tw:!no-underline",
+	"tw:aria-disabled:opacity-40",
+	"tw:aria-disabled:cursor-not-allowed",
+	"tw:[&_svg]:shrink-0"
+], {
+	defaultVariants: {
+		size: "medium",
+		variant: "primary",
+		block: false
+	},
+	variants: {
+		block: { true: ["tw:w-full"] },
+		variant: {
+			primary: [
+				"tw:text-white",
+				"tw:bg-primary-500",
+				"tw:focus:text-white",
+				"tw:hover:text-white",
+				"tw:hover:not-disabled:bg-primary-600",
+				"tw:active:not-disabled:bg-primary-800",
+				"tw:aria-disabled:!bg-primary-500"
+			],
+			secondary: [
+				"tw:text-white",
+				"tw:bg-secondary-500",
+				"tw:focus:text-white",
+				"tw:hover:text-white",
+				"tw:hover:not-disabled:bg-secondary-700",
+				"tw:active:not-disabled:bg-secondary-800",
+				"tw:aria-disabled:!bg-secondary-500"
+			],
+			danger: [
+				"tw:text-white",
+				"tw:bg-error-500",
+				"tw:focus:text-white",
+				"tw:hover:text-white",
+				"tw:hover:not-disabled:bg-error-600",
+				"tw:active:not-disabled:bg-error-700",
+				"tw:aria-disabled:!bg-error-500"
+			],
+			invisible: [
+				"tw:text-foreground",
+				"tw:bg-transparent",
+				"tw:focus:text-foreground",
+				"tw:hover:not-disabled:bg-muted",
+				"tw:hover:text-foreground",
+				"tw:active:not-disabled:bg-secondary",
+				"tw:[&_svg]:text-neutral-400",
+				"tw:hover:not-disabled:[&_svg]:text-secondary-600",
+				"tw:active:not-disabled:[&_svg]:text-secondary-600",
+				"tw:aria-disabled:!bg-transparent"
+			],
+			outline: [
+				"tw:text-neutral-800",
+				"tw:bg-white",
+				"tw:!border-neutral-200",
+				"tw:hover:text-neutral-800",
+				"tw:focus:text-neutral-800",
+				"tw:hover:not-disabled:!border-neutral-300",
+				"tw:hover:not-disabled:bg-neutral-100",
+				"tw:active:not-disabled:bg-neutral-200",
+				"tw:[&_svg]:text-neutral-400",
+				"tw:not-disabled:hover:[&_svg]:text-secondary-600",
+				"tw:active:not-disabled:[&_svg]:text-secondary-600",
+				"tw:aria-disabled:!bg-white",
+				"tw:aria-disabled:!border-neutral-200"
+			],
+			inline: [
+				"tw:text-neutral-800",
+				"tw:bg-transparent",
+				"tw:rounded-full",
+				"tw:[&_svg]:text-neutral-400",
+				"tw:not-disabled:hover:[&_svg]:text-secondary-600",
+				"tw:not-disabled:focus:[&_svg]:text-secondary-600"
+			]
+		},
+		size: {
+			medium: [
+				"tw:max-h-10",
+				"tw:min-h-10",
+				"tw:px-4",
+				"tw:py-2.5",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			small: [
+				"tw:max-h-8",
+				"tw:min-h-8",
+				"tw:px-4",
+				"tw:py-1.5",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			large: [
+				"tw:max-h-12",
+				"tw:min-h-12",
+				"tw:px-4",
+				"tw:py-3.5",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			"icon-lg": [
+				"tw:size-12",
+				"tw:p-0",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-6"
+			],
+			icon: [
+				"tw:size-10",
+				"tw:p-0",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			"icon-sm": [
+				"tw:size-8",
+				"tw:p-0",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			"icon-xs": [
+				"tw:size-6",
+				"tw:p-0",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			],
+			"icon-2xs": [
+				"tw:!inline-flex",
+				"tw:size-5",
+				"tw:max-h-5",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-3"
+			],
+			"icon-3xs": [
+				"tw:h-fit",
+				"tw:w-fit",
+				"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+			]
+		}
+	}
+});
+const argoVariants = cva([
+	"tailwindcss-preflight",
+	"tw:relative",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:whitespace-nowrap",
+	"tw:gap-2",
+	"tw:border",
+	"tw:border-transparent",
+	"tw:rounded-[var(--radius-lg,0.25rem)]",
+	"tw:font-medium",
+	"tw:select-none",
+	"tw:!outline-hidden",
+	"tw:focus-visible:ring-2",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:opacity-50",
+	"tw:active:opacity-60",
+	"tw:transition-all",
+	"tw:bg-clip-padding",
+	"tw:!no-underline",
+	"tw:aria-disabled:cursor-not-allowed",
+	"tw:aria-disabled:opacity-50",
+	"tw:shrink-0",
+	"tw:[&_svg]:pointer-events-none",
+	"tw:[&_svg]:shrink-0",
+	"tw:[&_svg:not([class*='tw:size-'])]:size-4"
+], {
+	defaultVariants: {
+		variant: "primary",
+		size: "medium"
+	},
+	variants: {
+		block: { true: ["tw:w-full"] },
+		variant: {
+			primary: [
+				"tw:bg-primary",
+				"tw:text-primary-foreground",
+				"tw:[a]:hover:bg-primary/80",
+				"tw:hover:not-disabled:bg-primary/90",
+				"tw:hover:text-primary-foreground",
+				"tw:focus:text-primary-foreground",
+				"tw:focus-visible:border-primary",
+				"tw:focus-visible:ring-ring/50"
+			],
+			secondary: [
+				"tw:bg-primary/10",
+				"tw:text-primary",
+				"tw:hover:not-disabled:bg-primary/20",
+				"tw:focus-visible:border-primary",
+				"tw:focus-visible:ring-ring/50"
+			],
+			danger: [
+				"tw:bg-destructive",
+				"tw:text-destructive-foreground",
+				"tw:hover:not-disabled:bg-destructive/90",
+				"tw:hover:text-destructive-foreground",
+				"tw:focus:text-destructive-foreground",
+				"tw:focus-visible:border-destructive",
+				"tw:focus-visible:ring-destructive/20"
+			],
+			outline: [
+				"tw:!border-input",
+				"tw:bg-background",
+				"tw:text-foreground",
+				"tw:hover:not-disabled:bg-primary/10",
+				"tw:hover:not-disabled:text-primary",
+				"tw:hover:active:bg-background",
+				"tw:focus-visible:!border-primary",
+				"tw:focus-visible:ring-ring/50"
+			],
+			invisible: [
+				"tw:bg-transparent",
+				"tw:text-foreground",
+				"tw:hover:not-disabled:bg-primary/10",
+				"tw:hover:not-disabled:text-primary",
+				"tw:hover:not-disabled:border-primary/10",
+				"tw:focus-visible:ring-ring/50"
+			],
+			inline: [
+				"tw:bg-transparent",
+				"tw:text-primary",
+				"tw:hover:underline",
+				"tw:hover:active:bg-transparent",
+				"tw:focus-visible:ring-ring/50"
+			]
+		},
+		size: {
+			medium: [
+				"tw:max-h-9",
+				"tw:py-2",
+				"tw:px-4",
+				"tw:text-sm"
+			],
+			small: [
+				"tw:max-h-8",
+				"tw:py-2",
+				"tw:px-3",
+				"tw:text-xs"
+			],
+			large: [
+				"tw:max-h-10",
+				"tw:py-2.5",
+				"tw:px-6",
+				"tw:text-sm"
+			],
+			"icon-lg": ["tw:size-10"],
+			icon: ["tw:size-9"],
+			"icon-sm": ["tw:size-8"],
+			"icon-xs": ["tw:size-6"],
+			"icon-2xs": [],
+			"icon-3xs": []
+		}
+	}
+});
+//#endregion
+//#region src/components/Button/Button.tsx
+/**
+* Primary action surface for the design system — covers all clickable controls except inline text links.
+*
+* **When to use:** any user-initiated action (submit, save, open modal, run job). Use `size="icon-*"` with no
+* children for an icon-only button; there is no separate `IconButton` component.
+* **When NOT to use:** for inline text-link actions inside body copy use `ButtonInline`; for navigation that
+* opens a URL use `Link`; for "primary action + dropdown of related actions" use `SplitButton`.
+* **Composition:** wrap in `Tooltip` when icon-only or when disabled state needs an explanation; pair with
+* `Popconfirm` for destructive confirmations; pass through `Modal.Trigger` / `DropdownMenu.Trigger` via `asChild`.
+*
+* @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
+* @see RECIPES.md#confirm-dialog — for destructive-action confirmation
+*/
+const Button = ({ ref, children, disabled = false, className, type = "button", isLoading = false, asChild = false, onClick, variant = "primary", size = "medium", block = false, ...buttonProps }) => {
+	const renderArgo = useArgoDesign();
+	const Comp = asChild ? Root : "button";
+	const isIconOnly = String(size).startsWith("icon");
+	const classNames = renderArgo ? argoVariants({
+		variant,
+		size,
+		block,
+		className
+	}) : variants({
+		size,
+		variant,
+		block,
+		className
+	});
+	const handleClick = (event) => {
+		if (event.currentTarget.tagName === "A" && disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsxs(Comp, {
+		...buttonProps,
+		ref,
+		disabled,
+		"aria-disabled": disabled,
+		"data-variant": variant,
+		"data-icon-only": isIconOnly,
+		type,
+		onClick: handleClick,
+		className: cn(classNames),
+		children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }), /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })]
+	});
+};
+//#endregion
+//#region src/components/Button/ButtonInline.tsx
+const buttonInlineVariants = cva([
+	"tailwindcss-preflight",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:gap-2",
+	"tw:underline-offset-2",
+	"tw:disabled:opacity-40",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:text-neutral-500",
+	"tw:disabled:no-underline",
+	"tw:disabled:[&_svg]:text-neutral-400",
+	"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+	"tw:[&_svg]:shrink-0"
+], {
+	defaultVariants: {
+		variant: "link",
+		color: "link"
+	},
+	variants: {
+		color: {
+			link: [
+				"tw:text-primary",
+				"tw:hover:text-primary/90",
+				"tw:[&_svg]:text-primary"
+			],
+			dark: ["tw:text-neutral-800 tw:[&_svg]:text-neutral-400"],
+			danger: ["tw:text-error-500 tw:[&_svg]:text-error-500"],
+			muted: ["tw:text-muted-foreground tw:[&_svg]:text-muted-foreground"],
+			custom: []
+		},
+		variant: {
+			link: ["tw:underline", "tw:hover:no-underline"],
+			"link-reverse": [
+				"tw:no-underline",
+				"",
+				"tw:hover:underline"
+			],
+			custom: []
+		}
+	}
+});
+const ButtonInline = ({ ref, children, className, variant, color, type = "button", asChild = false, ...buttonProps }) => {
+	return /* @__PURE__ */ jsx(asChild ? Root : "button", {
+		...buttonProps,
+		ref,
+		type: asChild ? void 0 : type,
+		className: buttonInlineVariants({
+			variant,
+			color,
+			className
+		}),
+		children
+	});
+};
+//#endregion
+export { Button, ButtonInline, argoVariants };
+
+//# sourceMappingURL=Button-nzmDNS2q.js.map

package/dist/Button-nzmDNS2q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-nzmDNS2q.js","names":[],"sources":["../src/components/Button/styles.ts","../src/components/Button/Button.tsx","../src/components/Button/ButtonInline.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/button',\n    'tw:border-box',\n\n    // layout\n    'tw:relative',\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-2',\n\n    // text — chrome weight/tracking are brand-overridable tokens\n    // (`--font-weight-medium` / `--letter-spacing-chrome`). Casing: standard case is\n    // the default; only legacy brands (`keboola-legacy-*`) uppercase the chrome, so\n    // modern brands (incl. Keboola V2) read naturally. Mirrors the V2 standard-case\n    // treatment shipped for Tooltip/Badge (PR 7629).\n    'tw:text-xs',\n    'tw:leading-5',\n    'tw:font-medium',\n    'tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome',\n    'tw:[[data-brand^=keboola-legacy]_&]:uppercase',\n\n    // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.\n    'tw:rounded',\n    'tw:border',\n    'tw:border-transparent',\n\n    // styling\n    'tw:shadow-none',\n    'tw:[a]:cursor-pointer', // explicitly set for anchor\n\n    'tw:focus-visible:outline',\n    'tw:focus-visible:outline-1',\n    'tw:focus-visible:-outline-offset-1',\n    'tw:focus-visible:outline-ring',\n    'tw:focus-visible:ring-4',\n    'tw:focus-visible:ring-ring/30',\n\n    // disabled\n    'tw:disabled:opacity-40',\n    'tw:disabled:cursor-not-allowed',\n\n    // anchor support\n    'tw:!no-underline',\n    'tw:aria-disabled:opacity-40',\n    'tw:aria-disabled:cursor-not-allowed',\n\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'primary',\n      block: false,\n    },\n    variants: {\n      block: {\n        true: ['tw:w-full'],\n      },\n      variant: {\n        primary: [\n          'tw:text-white',\n          'tw:bg-primary-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-primary-600',\n          'tw:active:not-disabled:bg-primary-800',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-primary-500',\n        ],\n        secondary: [\n          'tw:text-white',\n          'tw:bg-secondary-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-secondary-700',\n          'tw:active:not-disabled:bg-secondary-800',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-secondary-500',\n        ],\n        danger: [\n          'tw:text-white',\n          'tw:bg-error-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-error-600',\n          'tw:active:not-disabled:bg-error-700',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-error-500',\n        ],\n        // The label and the hover/active fills read tokens rather than the fixed\n        // neutral scale, so the variant follows the active brand and colour scheme\n        // (argo's `invisible` already did). A transparent button inherits whatever\n        // surface it is dropped on, so it is the one legacy variant that cannot\n        // assume a light page — pinning it forced every dark-scheme call site to\n        // re-declare the colour by hand.\n        invisible: [\n          'tw:text-foreground',\n          'tw:bg-transparent',\n\n          'tw:focus:text-foreground',\n          'tw:hover:not-disabled:bg-muted',\n          'tw:hover:text-foreground',\n          'tw:active:not-disabled:bg-secondary',\n\n          // contrasting icon on hover/active\n          'tw:[&_svg]:text-neutral-400',\n          'tw:hover:not-disabled:[&_svg]:text-secondary-600',\n          'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-transparent',\n        ],\n        outline: [\n          'tw:text-neutral-800',\n          'tw:bg-white',\n          // border\n          'tw:!border-neutral-200',\n          'tw:hover:text-neutral-800',\n          'tw:focus:text-neutral-800',\n          'tw:hover:not-disabled:!border-neutral-300',\n          'tw:hover:not-disabled:bg-neutral-100',\n          'tw:active:not-disabled:bg-neutral-200',\n\n          // contrasting icon hover, same as invisible\n          'tw:[&_svg]:text-neutral-400',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n          'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-white',\n          'tw:aria-disabled:!border-neutral-200',\n        ],\n\n        inline: [\n          'tw:text-neutral-800',\n          'tw:bg-transparent',\n          'tw:rounded-full',\n\n          'tw:[&_svg]:text-neutral-400',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n          'tw:not-disabled:focus:[&_svg]:text-secondary-600',\n        ],\n      },\n      size: {\n        medium: [\n          'tw:max-h-10',\n          'tw:min-h-10',\n          'tw:px-4',\n          'tw:py-2.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n        small: [\n          'tw:max-h-8',\n          'tw:min-h-8',\n          'tw:px-4',\n          'tw:py-1.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n        large: [\n          'tw:max-h-12',\n          'tw:min-h-12',\n          'tw:px-4',\n          'tw:py-3.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n\n        'icon-lg': ['tw:size-12', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6'],\n        icon: ['tw:size-10', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-sm': ['tw:size-8', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-xs': ['tw:size-6', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-2xs': [\n          'tw:!inline-flex',\n          'tw:size-5',\n          'tw:max-h-5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n        ],\n        'icon-3xs': ['tw:h-fit', 'tw:w-fit', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n      },\n    },\n  },\n);\n\nexport const argoVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    // layout\n    'tw:relative',\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:whitespace-nowrap',\n    'tw:gap-2',\n\n    // border\n    'tw:border',\n    'tw:border-transparent',\n    'tw:rounded-[var(--radius-lg,0.25rem)]',\n\n    // text\n    'tw:font-medium',\n    'tw:select-none',\n\n    // focus visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n\n    // disabled\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-50',\n    'tw:active:opacity-60',\n\n    'tw:transition-all',\n    'tw:bg-clip-padding',\n\n    // anchor support\n    'tw:!no-underline',\n    'tw:aria-disabled:cursor-not-allowed',\n    'tw:aria-disabled:opacity-50',\n\n    // icon\n    'tw:shrink-0',\n    'tw:[&_svg]:pointer-events-none',\n    'tw:[&_svg]:shrink-0',\n    \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n  ],\n  {\n    defaultVariants: {\n      variant: 'primary',\n      size: 'medium',\n    },\n    variants: {\n      block: {\n        true: ['tw:w-full'],\n      },\n      variant: {\n        primary: [\n          'tw:bg-primary',\n          'tw:text-primary-foreground',\n          'tw:[a]:hover:bg-primary/80',\n          'tw:hover:not-disabled:bg-primary/90',\n          'tw:hover:text-primary-foreground',\n          'tw:focus:text-primary-foreground',\n\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n        secondary: [\n          'tw:bg-primary/10',\n          'tw:text-primary',\n          'tw:hover:not-disabled:bg-primary/20',\n\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n\n        // should be called \"destructive\" by Figma\n        danger: [\n          'tw:bg-destructive',\n          'tw:text-destructive-foreground',\n          'tw:hover:not-disabled:bg-destructive/90',\n          'tw:hover:text-destructive-foreground',\n          'tw:focus:text-destructive-foreground',\n\n          'tw:focus-visible:border-destructive',\n          'tw:focus-visible:ring-destructive/20',\n        ],\n        outline: [\n          'tw:!border-input',\n          'tw:bg-background',\n          // Semantic base text color so the label/icon flips in dark mode\n          // (matches `invisible`); previously unset → inherited a fixed dark color.\n          'tw:text-foreground',\n          // Hover follows the brand primary (translucent tint), matching the\n          // `secondary` variant — not the fixed `accent` blue.\n          'tw:hover:not-disabled:bg-primary/10',\n          'tw:hover:not-disabled:text-primary',\n          'tw:hover:active:bg-background',\n          'tw:focus-visible:!border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n\n        // should be called \"ghost\" by Figma\n        invisible: [\n          'tw:bg-transparent',\n          'tw:text-foreground',\n          'tw:hover:not-disabled:bg-primary/10',\n          'tw:hover:not-disabled:text-primary',\n          'tw:hover:not-disabled:border-primary/10',\n\n          'tw:focus-visible:ring-ring/50',\n        ],\n        // should be called \"link\" by Figma\n        inline: [\n          'tw:bg-transparent',\n          'tw:text-primary',\n          'tw:hover:underline',\n          'tw:hover:active:bg-transparent',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n      size: {\n        // should be called \"default\" by Figma\n        medium: ['tw:max-h-9', 'tw:py-2', 'tw:px-4', 'tw:text-sm'],\n        // should be called \"small\" by Figma\n        small: ['tw:max-h-8', 'tw:py-2', 'tw:px-3', 'tw:text-xs'],\n        // should be called \"large\" by Figma\n        large: ['tw:max-h-10', 'tw:py-2.5', 'tw:px-6', 'tw:text-sm'],\n\n        'icon-lg': ['tw:size-10'],\n        icon: ['tw:size-9'],\n        'icon-sm': ['tw:size-8'],\n        'icon-xs': ['tw:size-6'],\n        // unsupported in ARGO, remove when old design is gone\n        'icon-2xs': [],\n        'icon-3xs': [],\n      },\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { argoVariants, variants } from './styles';\n\n/**\n * Props for the `Button` component.\n *\n * Pass `variant` for primary/secondary/danger/outline/invisible looks, `size`\n * for height (including `icon-*` sizes when rendering icon-only). Icons are\n * composed as children — `<Button><Trash2 className=\"tw:size-4\" /> Delete</Button>`.\n */\ntype Props = {\n  /** Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. */\n  isLoading?: boolean;\n  /** Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. */\n  asChild?: boolean;\n} & ComponentProps<'button'> &\n  VariantProps<typeof variants>;\n\n/**\n * Primary action surface for the design system — covers all clickable controls except inline text links.\n *\n * **When to use:** any user-initiated action (submit, save, open modal, run job). Use `size=\"icon-*\"` with no\n * children for an icon-only button; there is no separate `IconButton` component.\n * **When NOT to use:** for inline text-link actions inside body copy use `ButtonInline`; for navigation that\n * opens a URL use `Link`; for \"primary action + dropdown of related actions\" use `SplitButton`.\n * **Composition:** wrap in `Tooltip` when icon-only or when disabled state needs an explanation; pair with\n * `Popconfirm` for destructive confirmations; pass through `Modal.Trigger` / `DropdownMenu.Trigger` via `asChild`.\n *\n * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern\n * @see RECIPES.md#confirm-dialog — for destructive-action confirmation\n */\nexport const Button = ({\n  ref,\n  children,\n  disabled = false,\n  className,\n  type = 'button',\n  isLoading = false,\n  asChild = false,\n  onClick,\n  variant = 'primary',\n  size = 'medium',\n  block = false,\n  ...buttonProps\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  const Comp = asChild ? Root : 'button';\n  const isIconOnly = String(size).startsWith('icon');\n  const classNames = renderArgo\n    ? argoVariants({ variant, size, block, className })\n    : variants({ size, variant, block, className });\n\n  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n    const isAnchor = event.currentTarget.tagName === 'A';\n\n    // <a/> does not support disabled by default, and we cannot use pointer-events: none because cursor-not-allowed would not work.\n    if (isAnchor && disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClick?.(event);\n  };\n\n  return (\n    <Comp\n      {...buttonProps}\n      ref={ref}\n      disabled={disabled}\n      aria-disabled={disabled}\n      data-variant={variant}\n      // `size=\"icon\"` / `size=\"icon-*\"` flags the button as icon-only — needed\n      // by `ButtonGroup space=\"block\"` which stretches non-icon children to\n      // equal width.\n      data-icon-only={isIconOnly}\n      type={type}\n      onClick={handleClick}\n      className={cn(classNames)}\n    >\n      {isLoading && <Loader2 className=\"tw:size-4 tw:shrink-0 tw:animate-spin\" />}\n      <Slottable>{isLoading && isIconOnly ? null : children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst buttonInlineVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:gap-2',\n\n    'tw:underline-offset-2',\n\n    'tw:disabled:opacity-40',\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:text-neutral-500',\n    'tw:disabled:no-underline',\n    'tw:disabled:[&_svg]:text-neutral-400',\n\n    // Default size for nested Lucide icons; 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      variant: 'link',\n      color: 'link',\n    },\n    variants: {\n      color: {\n        link: ['tw:text-primary', 'tw:hover:text-primary/90', 'tw:[&_svg]:text-primary'],\n        dark: ['tw:text-neutral-800 tw:[&_svg]:text-neutral-400'],\n        danger: ['tw:text-error-500 tw:[&_svg]:text-error-500'],\n        muted: ['tw:text-muted-foreground tw:[&_svg]:text-muted-foreground'],\n        custom: [],\n      },\n      variant: {\n        link: ['tw:underline', 'tw:hover:no-underline'],\n        'link-reverse': ['tw:no-underline', '', 'tw:hover:underline'],\n        custom: [],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> &\n  VariantProps<typeof buttonInlineVariants> & { asChild?: boolean };\n\nexport const ButtonInline = ({\n  ref,\n  children,\n  className,\n  variant,\n  color,\n  type = 'button',\n  asChild = false,\n  ...buttonProps\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n\n  return (\n    <Comp\n      {...buttonProps}\n      ref={ref}\n      type={asChild ? undefined : type}\n      className={buttonInlineVariants({ variant, color, className })}\n    >\n      {children}\n    </Comp>\n  );\n};\n"],"mappings":";;;;;;;AAEA,MAAa,WAAW,IACtB;CACE;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAOA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,CAAC,WAAW,EACpB;EACA,SAAS;GACP,SAAS;IACP;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GACA,WAAW;IACT;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GACA,QAAQ;IACN;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GAOA,WAAW;IACT;IACA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IACA;GACF;GAEA,QAAQ;IACN;IACA;IACA;IAEA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;GAEA,WAAW;IAAC;IAAc;IAAU;GAA4C;GAChF,MAAM;IAAC;IAAc;IAAU;GAA4C;GAC3E,WAAW;IAAC;IAAa;IAAU;GAA4C;GAC/E,WAAW;IAAC;IAAa;IAAU;GAA4C;GAC/E,YAAY;IACV;IACA;IACA;IACA;GACF;GACA,YAAY;IAAC;IAAY;IAAY;GAA4C;EACnF;CACF;AACF,CACF;AAEA,MAAa,eAAe,IAC1B;CACE;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;CACA,UAAU;EACR,OAAO,EACL,MAAM,CAAC,WAAW,EACpB;EACA,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IAEA;IACA;GACF;GAGA,QAAQ;IACN;IACA;IACA;IACA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IAGA;IAGA;IACA;IACA;IACA;IACA;GACF;GAGA,WAAW;IACT;IACA;IACA;IACA;IACA;IAEA;GACF;GAEA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GAEJ,QAAQ;IAAC;IAAc;IAAW;IAAW;GAAY;GAEzD,OAAO;IAAC;IAAc;IAAW;IAAW;GAAY;GAExD,OAAO;IAAC;IAAe;IAAa;IAAW;GAAY;GAE3D,WAAW,CAAC,YAAY;GACxB,MAAM,CAAC,WAAW;GAClB,WAAW,CAAC,WAAW;GACvB,WAAW,CAAC,WAAW;GAEvB,YAAY,CAAC;GACb,YAAY,CAAC;EACf;CACF;AACF,CACF;;;;;;;;;;;;;;;;ACpSA,MAAa,UAAU,EACrB,KACA,UACA,WAAW,OACX,WACA,OAAO,UACP,YAAY,OACZ,UAAU,OACV,SACA,UAAU,WACV,OAAO,UACP,QAAQ,OACR,GAAG,kBACQ;CACX,MAAM,aAAa,cAAc;CACjC,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,aAAa,OAAO,IAAI,CAAC,CAAC,WAAW,MAAM;CACjD,MAAM,aAAa,aACf,aAAa;EAAE;EAAS;EAAM;EAAO;CAAU,CAAC,IAChD,SAAS;EAAE;EAAM;EAAS;EAAO;CAAU,CAAC;CAEhD,MAAM,eAAoD,UAAU;EAIlE,IAHiB,MAAM,cAAc,YAAY,OAGjC,UAAU;GACxB,MAAM,eAAe;GACrB;EACF;EAEA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACK;EACV,iBAAe;EACf,gBAAc;EAId,kBAAgB;EACV;EACN,SAAS;EACT,WAAW,GAAG,UAAU;EAZ1B,UAAA,CAcG,aAAa,oBAAC,SAAD,EAAS,WAAU,wCAAyC,CAAA,GAC1E,oBAAC,WAAD,EAAA,UAAY,aAAa,aAAa,OAAO,SAAoB,CAAA,CAC7D;;AAEV;;;ACrFA,MAAM,uBAAuB,IAC3B;CACE;CAEA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,OAAO;GACL,MAAM;IAAC;IAAmB;IAA4B;GAAyB;GAC/E,MAAM,CAAC,iDAAiD;GACxD,QAAQ,CAAC,6CAA6C;GACtD,OAAO,CAAC,2DAA2D;GACnE,QAAQ,CAAC;EACX;EACA,SAAS;GACP,MAAM,CAAC,gBAAgB,uBAAuB;GAC9C,gBAAgB;IAAC;IAAmB;IAAI;GAAoB;GAC5D,QAAQ,CAAC;EACX;CACF;AACF,CACF;AAKA,MAAa,gBAAgB,EAC3B,KACA,UACA,WACA,SACA,OACA,OAAO,UACP,UAAU,OACV,GAAG,kBACQ;CAGX,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,GAAI;EACC;EACL,MAAM,UAAU,KAAA,IAAY;EAC5B,WAAW,qBAAqB;GAAE;GAAS;GAAO;EAAU,CAAC;EAE5D;CACG,CAAA;AAEV"}