@keboola/design 13.1.2 → 13.2.0

package/dist/{Button-B21oVcPU.js → Button-D2JqBAq7.js}

@@ -1,9 +1,135 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Loader2 } from "./icons-wcA70iQx.js";
+import { mergeRefs } from "./internal/utils/mergeRefs.js";
+import { Loader2 } from "./icons-ZIeZXXS7.js";
+import { Fragment, createElement, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 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/motion.ts
+const ends = (animation) => Number.isFinite(animation.effect?.getComputedTiming().endTime);
+/** Runs `callback` once the finite `animations` have finished or been cancelled; returns a cancel. */
+const afterAnimations = (animations, callback) => {
+	let isCurrent = true;
+	Promise.allSettled(animations.filter(ends).map((animation) => animation.finished)).then(() => {
+		if (isCurrent) callback();
+	});
+	return () => {
+		isCurrent = false;
+	};
+};
+let waiting = /* @__PURE__ */ new Set();
+let framed = /* @__PURE__ */ new Set();
+let isTicking = false;
+const tick = () => {
+	for (const node of framed) if (node.isConnected) node.setAttribute("data-button-ready", "");
+	framed = waiting;
+	waiting = /* @__PURE__ */ new Set();
+	isTicking = framed.size > 0;
+	if (isTicking) requestAnimationFrame(tick);
+};
+/**
+* Sets `data-button-ready` on `node` two frames after it mounts, arming its entry animations.
+*
+* - One shared frame loop serves every Button mounting at once.
+* - Arming twice is a no-op, so a re-attached ref doesn't restart the countdown.
+*/
+const armMotion = (node) => {
+	if (node.hasAttribute("data-button-ready") || waiting.has(node) || framed.has(node)) return;
+	waiting.add(node);
+	if (!isTicking) {
+		isTicking = true;
+		requestAnimationFrame(tick);
+	}
+};
+//#endregion
+//#region src/components/Button/ButtonLabel.tsx
+const isText = (node) => typeof node === "string" || typeof node === "number";
+/** Milliseconds from a computed `transition-duration` such as `0.3s`. */
+const toMs = (duration) => parseFloat(duration) * (duration.endsWith("ms") ? 1 : 1e3);
+/**
+* A button's text, rolled over when it changes.
+*
+* - The new text rolls in; the old one stays absolutely positioned while it rolls out.
+* - The width animates from the old text's to the new one's, so neighbours slide instead of jumping.
+* - Motion lives in `styles.css` under `[data-slot='button-label']`.
+*/
+const ButtonLabel = ({ text }) => {
+	const ref = useRef(null);
+	const exitRef = useRef(null);
+	const interruptedWidthRef = useRef(null);
+	const [shown, setShown] = useState(text);
+	const [exiting, setExiting] = useState(null);
+	const [hasChanged, setHasChanged] = useState(false);
+	if (shown !== text) {
+		setShown(text);
+		setExiting(shown);
+		setHasChanged(true);
+	}
+	useLayoutEffect(() => {
+		const node = ref.current;
+		const from = interruptedWidthRef.current ?? exitRef.current?.offsetWidth;
+		interruptedWidthRef.current = null;
+		if (!node || !from || !node.closest("[data-button-ready]")) return;
+		const to = node.offsetWidth;
+		if (Math.abs(to - from) < .5 || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const { transitionDuration, transitionTimingFunction } = getComputedStyle(node);
+		const animation = node.animate?.([{
+			width: `${from}px`,
+			overflowX: "clip",
+			textAlign: "start"
+		}, {
+			width: `${to}px`,
+			overflowX: "clip",
+			textAlign: "start"
+		}], {
+			duration: toMs(transitionDuration),
+			easing: transitionTimingFunction
+		});
+		return () => {
+			if (animation?.playState === "running") interruptedWidthRef.current = node.offsetWidth;
+			animation?.cancel();
+		};
+	}, [text]);
+	useEffect(() => {
+		const node = exitRef.current;
+		if (!node) return;
+		return afterAnimations(node.getAnimations?.() ?? [], () => setExiting(null));
+	}, [exiting]);
+	if (!hasChanged) return text;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "button-label",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "button-label-text",
+			children: text
+		}, text), exiting !== null && /* @__PURE__ */ jsx("span", {
+			ref: exitRef,
+			"aria-hidden": true,
+			"data-slot": "button-label-exit",
+			children: exiting
+		}, exiting)]
+	});
+};
+/**
+* `children` with each run of text wrapped in a `ButtonLabel`.
+*
+* - Positions are kept: a joined run leaves `null` behind, so siblings keep their identity.
+* - Whitespace-only text stays bare: as a span it would become a flex item and take a gap.
+*/
+const withLabels = (children) => {
+	if (isValidElement(children) && children.type === Fragment) return withLabels(children.props.children);
+	const items = Array.isArray(children) ? children : [children];
+	const wrapped = items.map((item, index) => {
+		if (!isText(item)) return item;
+		if (index > 0 && isText(items[index - 1])) return null;
+		let text = "";
+		for (let i = index; i < items.length && isText(items[i]); i++) text += String(items[i]);
+		return text.trim() ? /* @__PURE__ */ jsx(ButtonLabel, { text }, index) : text;
+	});
+	return createElement(Fragment, null, ...wrapped);
+};
+//#endregion
 //#region src/components/Button/styles.ts
 const variants = cva([
 	"tailwindcss-preflight",
@@ -190,12 +316,12 @@ const argoVariants = cva([
 	"tw:!outline-hidden",
 	"tw:focus-visible:ring-2",
 	"tw:disabled:cursor-not-allowed",
-	"tw:disabled:opacity-50",
+	"tw:disabled:opacity-disabled",
 	"tw:active:opacity-60",
 	"tw:transition-all",
 	"tw:!no-underline",
 	"tw:aria-disabled:cursor-not-allowed",
-	"tw:aria-disabled:opacity-50",
+	"tw:aria-disabled:opacity-disabled",
 	"tw:shrink-0",
 	"tw:[&_svg]:pointer-events-none",
 	"tw:[&_svg]:shrink-0",
@@ -303,6 +429,12 @@ const argoVariants = cva([
 });
 //#endregion
 //#region src/components/Button/Button.tsx
+/** The children that render anything, looking through arrays and fragments. */
+const renderedChildren = (node) => {
+	if (Array.isArray(node)) return node.flatMap(renderedChildren);
+	if (isValidElement(node) && node.type === Fragment) return renderedChildren(node.props.children);
+	return node == null || typeof node === "boolean" || typeof node === "string" && !node.trim() ? [] : [node];
+};
 /**
 * Any user-initiated action; `size="icon-*"` with no children is the icon-only button.
 *
@@ -327,6 +459,57 @@ const Button = ({ ref, children, disabled = false, className, type = "button", i
 		block,
 		className
 	});
+	const content = asChild && isValidElement(children) ? children.props.children : children;
+	const rendered = renderedChildren(content);
+	const leadsWithElement = isValidElement(rendered[0]);
+	const elementTypes = rendered.flatMap((child) => isValidElement(child) ? [child.type] : []);
+	const [prev, setPrev] = useState({
+		leadsWithElement,
+		elementTypes
+	});
+	const [spinnerEnter, setSpinnerEnter] = useState(isLoading ? "fade" : null);
+	const [iconEnter, setIconEnter] = useState("fade");
+	const placement = isIconOnly ? "center" : leadsWithElement ? "leading" : "inline";
+	if (isLoading && !spinnerEnter) setSpinnerEnter(placement === "inline" && !prev.leadsWithElement ? "grow" : "fade");
+	const typesChanged = prev.elementTypes.length !== elementTypes.length || prev.elementTypes.some((type, index) => type !== elementTypes[index]);
+	if (typesChanged || prev.leadsWithElement !== leadsWithElement) setPrev({
+		leadsWithElement,
+		elementTypes
+	});
+	if (typesChanged) setIconEnter(elementTypes.length > prev.elementTypes.length && !isLoading && !spinnerEnter ? "grow" : "fade");
+	const spinnerRef = useRef(null);
+	useEffect(() => {
+		const node = spinnerRef.current;
+		if (isLoading || !node) return;
+		return afterAnimations(node.getAnimations?.() ?? [], () => setSpinnerEnter(null));
+	}, [isLoading]);
+	useLayoutEffect(() => {
+		const slot = spinnerRef.current;
+		const button = slot?.offsetParent;
+		if (!slot || !button || placement !== "leading") return;
+		const centre = () => {
+			const icon = slot.nextElementSibling;
+			if (!(icon instanceof SVGElement)) return;
+			const [iconBox, buttonBox] = [icon.getBoundingClientRect(), button.getBoundingClientRect()];
+			const scale = buttonBox.width / (button instanceof HTMLElement ? button.offsetWidth : 1) || 1;
+			const x = (iconBox.left - buttonBox.left + iconBox.width / 2) / scale - button.clientLeft;
+			slot.style.left = `${x - parseFloat(getComputedStyle(slot).width) / 2}px`;
+		};
+		centre();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(centre);
+		observer.observe(button);
+		return () => observer.disconnect();
+	}, [placement, spinnerEnter]);
+	const buttonRef = useRef(null);
+	const armRef = useCallback((node) => node ? armMotion(node) : void 0, []);
+	const mergedRef = useMemo(() => mergeRefs(ref, buttonRef, armRef), [ref, armRef]);
+	useEffect(() => {
+		const node = buttonRef.current;
+		if (iconEnter !== "grow" || !node) return;
+		const entries = [...node.querySelectorAll(":scope > svg")].flatMap((icon) => icon.getAnimations?.() ?? []);
+		return afterAnimations(entries, () => setIconEnter("fade"));
+	}, [iconEnter]);
 	const handleClick = (event) => {
 		if (event.currentTarget.tagName === "A" && disabled) {
 			event.preventDefault();
@@ -336,15 +519,24 @@ const Button = ({ ref, children, disabled = false, className, type = "button", i
 	};
 	return /* @__PURE__ */ jsxs(Comp, {
 		...buttonProps,
-		ref,
+		ref: mergedRef,
 		disabled,
 		"aria-disabled": buttonProps["aria-disabled"] ?? disabled,
 		"data-variant": variant,
 		"data-icon-only": isIconOnly,
+		"data-icon-enter": iconEnter,
 		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 })]
+		children: [spinnerEnter && /* @__PURE__ */ jsx("span", {
+			ref: spinnerRef,
+			"aria-hidden": true,
+			"data-slot": "button-spinner",
+			"data-state": isLoading ? "open" : "closed",
+			"data-placement": placement,
+			"data-enter": spinnerEnter,
+			children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" })
+		}), /* @__PURE__ */ jsx(Slottable, { children: asChild ? children : withLabels(children) })]
 	});
 };
 //#endregion
@@ -406,4 +598,4 @@ const ButtonInline = ({ ref, children, className, variant, color, type = "button
 //#endregion
 export { Button, ButtonInline, argoVariants };
 
-//# sourceMappingURL=Button-B21oVcPU.js.map
+//# sourceMappingURL=Button-D2JqBAq7.js.map

package/dist/Button-D2JqBAq7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-D2JqBAq7.js","names":[],"sources":["../src/components/Button/motion.ts","../src/components/Button/ButtonLabel.tsx","../src/components/Button/styles.ts","../src/components/Button/Button.tsx","../src/components/Button/ButtonInline.tsx"],"sourcesContent":["const ends = (animation: Animation) =>\n  Number.isFinite(animation.effect?.getComputedTiming().endTime);\n\n/** Runs `callback` once the finite `animations` have finished or been cancelled; returns a cancel. */\nexport const afterAnimations = (animations: Animation[], callback: () => void) => {\n  let isCurrent = true;\n  Promise.allSettled(animations.filter(ends).map((animation) => animation.finished)).then(() => {\n    if (isCurrent) callback();\n  });\n  return () => {\n    isCurrent = false;\n  };\n};\n\nlet waiting = new Set<Element>();\nlet framed = new Set<Element>();\nlet isTicking = false;\n\nconst tick = () => {\n  for (const node of framed) if (node.isConnected) node.setAttribute('data-button-ready', '');\n  framed = waiting;\n  waiting = new Set();\n  isTicking = framed.size > 0;\n  if (isTicking) requestAnimationFrame(tick);\n};\n\n/**\n * Sets `data-button-ready` on `node` two frames after it mounts, arming its entry animations.\n *\n * - One shared frame loop serves every Button mounting at once.\n * - Arming twice is a no-op, so a re-attached ref doesn't restart the countdown.\n */\nexport const armMotion = (node: Element) => {\n  if (node.hasAttribute('data-button-ready') || waiting.has(node) || framed.has(node)) return;\n  waiting.add(node);\n  if (!isTicking) {\n    isTicking = true;\n    requestAnimationFrame(tick);\n  }\n};\n","import {\n  createElement,\n  Fragment,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { afterAnimations } from './motion';\n\nconst isText = (node: ReactNode): node is string | number =>\n  typeof node === 'string' || typeof node === 'number';\n\n/** Milliseconds from a computed `transition-duration` such as `0.3s`. */\nconst toMs = (duration: string) => parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n\n/**\n * A button's text, rolled over when it changes.\n *\n * - The new text rolls in; the old one stays absolutely positioned while it rolls out.\n * - The width animates from the old text's to the new one's, so neighbours slide instead of jumping.\n * - Motion lives in `styles.css` under `[data-slot='button-label']`.\n */\nconst ButtonLabel = ({ text }: { text: string }) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const exitRef = useRef<HTMLSpanElement>(null);\n  const interruptedWidthRef = useRef<number | null>(null);\n  const [shown, setShown] = useState(text);\n  const [exiting, setExiting] = useState<string | null>(null);\n  const [hasChanged, setHasChanged] = useState(false);\n  if (shown !== text) {\n    setShown(text);\n    setExiting(shown);\n    setHasChanged(true);\n  }\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    // An interrupted animation's on-screen width, else the outgoing text's, still in the DOM.\n    const from = interruptedWidthRef.current ?? exitRef.current?.offsetWidth;\n    interruptedWidthRef.current = null;\n    if (!node || !from || !node.closest('[data-button-ready]')) return;\n\n    const to = node.offsetWidth;\n    if (\n      Math.abs(to - from) < 0.5 ||\n      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n    )\n      return;\n\n    const { transitionDuration, transitionTimingFunction } = getComputedStyle(node);\n    const animation = node.animate?.(\n      [\n        { width: `${from}px`, overflowX: 'clip', textAlign: 'start' },\n        { width: `${to}px`, overflowX: 'clip', textAlign: 'start' },\n      ],\n      { duration: toMs(transitionDuration), easing: transitionTimingFunction },\n    );\n    return () => {\n      if (animation?.playState === 'running') {\n        interruptedWidthRef.current = node.offsetWidth;\n      }\n      animation?.cancel();\n    };\n  }, [text]);\n\n  useEffect(() => {\n    const node = exitRef.current;\n    if (!node) return;\n    return afterAnimations(node.getAnimations?.() ?? [], () => setExiting(null));\n  }, [exiting]);\n\n  // Bare text until the first change, so an unchanged button keeps its markup.\n  if (!hasChanged) return text;\n\n  return (\n    <span ref={ref} data-slot=\"button-label\">\n      <span key={text} data-slot=\"button-label-text\">\n        {text}\n      </span>\n      {exiting !== null && (\n        <span key={exiting} ref={exitRef} aria-hidden data-slot=\"button-label-exit\">\n          {exiting}\n        </span>\n      )}\n    </span>\n  );\n};\n\n/**\n * `children` with each run of text wrapped in a `ButtonLabel`.\n *\n * - Positions are kept: a joined run leaves `null` behind, so siblings keep their identity.\n * - Whitespace-only text stays bare: as a span it would become a flex item and take a gap.\n */\nexport const withLabels = (children: ReactNode): ReactNode => {\n  if (isValidElement<{ children?: ReactNode }>(children) && children.type === Fragment) {\n    return withLabels(children.props.children);\n  }\n  const items = Array.isArray(children) ? children : [children];\n  const wrapped = items.map((item: ReactNode, index) => {\n    if (!isText(item)) return item;\n    if (index > 0 && isText(items[index - 1])) return null;\n\n    let text = '';\n    for (let i = index; i < items.length && isText(items[i]); i++) text += String(items[i]);\n    return text.trim() ? <ButtonLabel key={index} text={text} /> : text;\n  });\n  return createElement(Fragment, null, ...wrapped);\n};\n","import { cva } from 'class-variance-authority';\n\n// Opaque tints use `bg-[color-mix(in_oklab,rgb(var(--tint))_N%,rgb(var(--base)))]`, not `bg-<token>/N`.\n//\n// - `bg-<token>/N` mixes into `transparent`, showing whatever the button overlaps.\n// - Raw `--*` triples: `--color-*` exist at build time only; unresolved → `transparent`.\n// - Write the whole class literally — Tailwind scans source; assembled strings get no CSS.\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 — weight/tracking are brand tokens; only `keboola-legacy-*` brands uppercase\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        // Kai's actions: its gradient, three light pools drifting behind the label.\n        kai: [\n          'tw:bg-kai',\n          'tw:animate-kai-drift',\n          'tw:motion-reduce:animate-none',\n          'tw:text-white',\n          'tw:hover:text-white',\n          'tw:focus:text-white',\n          'tw:hover:not-disabled:brightness-110',\n          'tw:focus-visible:ring-ring/50',\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        // Tokens, not the fixed neutral scale: a transparent button cannot assume a light page.\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-foreground',\n          'tw:bg-card',\n          // border\n          'tw:!border-input',\n          'tw:hover:text-foreground',\n          'tw:focus:text-foreground',\n          // Hover/pressed are `muted-foreground` tints: `bg-muted` is 4/255 from `bg-card` in dark.\n          //\n          // - Fills mix into `--card`: unchanged on a card, opaque off one.\n          // - Border tints `transparent`: no `bg-clip-padding`, so it composites over the fill.\n          'tw:hover:not-disabled:!border-muted-foreground/60',\n          'tw:hover:not-disabled:bg-[color-mix(in_oklab,rgb(var(--muted-foreground))_15%,rgb(var(--card)))]',\n          'tw:active:not-disabled:bg-[color-mix(in_oklab,rgb(var(--muted-foreground))_35%,rgb(var(--card)))]',\n\n          // contrasting icon hover, same as invisible\n          'tw:[&_svg]:text-muted-foreground',\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-card',\n          'tw:aria-disabled:!border-input',\n        ],\n\n        inline: [\n          'tw:text-foreground',\n          'tw:bg-transparent',\n          'tw:rounded-full',\n\n          'tw:[&_svg]:text-muted-foreground',\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-disabled',\n    'tw:active:opacity-60',\n\n    'tw:transition-all',\n\n    // anchor support\n    'tw:!no-underline',\n    'tw:aria-disabled:cursor-not-allowed',\n    'tw:aria-disabled:opacity-disabled',\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        // Kai's actions: its gradient, three light pools drifting behind the label.\n        kai: [\n          'tw:bg-kai',\n          'tw:animate-kai-drift',\n          'tw:motion-reduce:animate-none',\n          'tw:text-white',\n          'tw:hover:text-white',\n          'tw:focus:text-white',\n          'tw:hover:not-disabled:brightness-110',\n          'tw:focus-visible:ring-ring/50',\n        ],\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          'tw:bg-clip-padding',\n          // Semantic text color so the label/icon flips in dark mode (matches `invisible`).\n          'tw:text-foreground',\n          // Hover hue comes from the brand primary, not the fixed `accent` blue.\n          //\n          // - Fill mixes into `--background`: `bg-clip-padding` gives a translucent fill no backing.\n          // - The *chrome* border carries the state (fill is ~1.5:1); `--primary` is for `focus-visible`.\n          // - Border is solid, not a tint: its contrast would depend on the call site.\n          'tw:hover:not-disabled:bg-[color-mix(in_oklab,rgb(var(--primary))_10%,rgb(var(--background)))]',\n          'tw:hover:not-disabled:!border-muted-foreground',\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:bg-clip-padding',\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 {\n  type ComponentProps,\n  Fragment,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Loader2 } from '../../icons';\nimport { cn, mergeRefs } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { withLabels } from './ButtonLabel';\nimport { afterAnimations, armMotion } from './motion';\nimport { argoVariants, variants } from './styles';\n\n/** Props for `Button`; icons are composed as children. */\ntype Props = {\n  /** Shows a spinner in place of the leading icon, or before the label when there is none. 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/** The children that render anything, looking through arrays and fragments. */\nconst renderedChildren = (node: ReactNode): ReactNode[] => {\n  if (Array.isArray(node)) return node.flatMap(renderedChildren);\n  if (isValidElement<{ children?: ReactNode }>(node) && node.type === Fragment) {\n    return renderedChildren(node.props.children);\n  }\n  const isBlank =\n    node == null || typeof node === 'boolean' || (typeof node === 'string' && !node.trim());\n  return isBlank ? [] : [node];\n};\n\n/**\n * Any user-initiated action; `size=\"icon-*\"` with no children is the icon-only button.\n *\n * - Not for: inline text links (`ButtonInline`), URL navigation (`Link`), action + dropdown (`SplitButton`).\n * - Wrap in `Tooltip` when icon-only or disabled; `Popconfirm` for destructive actions.\n *\n * @see RECIPES.md#disabled-button-tooltip\n * @see RECIPES.md#confirm-dialog\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 content =\n    asChild && isValidElement<{ children?: ReactNode }>(children)\n      ? children.props.children\n      : children;\n  const rendered = renderedChildren(content);\n  const leadsWithElement = isValidElement(rendered[0]);\n  const elementTypes = rendered.flatMap((child) => (isValidElement(child) ? [child.type] : []));\n\n  // The previous render's children, which decide how the spinner and a new icon enter.\n  const [prev, setPrev] = useState({ leadsWithElement, elementTypes });\n  const [spinnerEnter, setSpinnerEnter] = useState<'grow' | 'fade' | null>(\n    isLoading ? 'fade' : null,\n  );\n  const [iconEnter, setIconEnter] = useState<'grow' | 'fade'>('fade');\n  const placement = isIconOnly ? 'center' : leadsWithElement ? 'leading' : 'inline';\n\n  if (isLoading && !spinnerEnter) {\n    // `fade` also when the caller dropped its leading icon this render: the spinner takes that icon's place.\n    setSpinnerEnter(placement === 'inline' && !prev.leadsWithElement ? 'grow' : 'fade');\n  }\n  const typesChanged =\n    prev.elementTypes.length !== elementTypes.length ||\n    prev.elementTypes.some((type, index) => type !== elementTypes[index]);\n  if (typesChanged || prev.leadsWithElement !== leadsWithElement) {\n    setPrev({ leadsWithElement, elementTypes });\n  }\n  if (typesChanged) {\n    const isAdded = elementTypes.length > prev.elementTypes.length;\n    setIconEnter(isAdded && !isLoading && !spinnerEnter ? 'grow' : 'fade');\n  }\n\n  // The spinner stays mounted through its exit transition and unmounts when that ends.\n  const spinnerRef = useRef<HTMLSpanElement>(null);\n  useEffect(() => {\n    const node = spinnerRef.current;\n    if (isLoading || !node) return;\n    return afterAnimations(node.getAnimations?.() ?? [], () => setSpinnerEnter(null));\n  }, [isLoading]);\n\n  // A leading spinner is kept centred over the leading icon while the button resizes.\n  useLayoutEffect(() => {\n    const slot = spinnerRef.current;\n    const button = slot?.offsetParent;\n    if (!slot || !button || placement !== 'leading') return;\n    const centre = () => {\n      const icon = slot.nextElementSibling;\n      if (!(icon instanceof SVGElement)) return;\n      const [iconBox, buttonBox] = [icon.getBoundingClientRect(), button.getBoundingClientRect()];\n      const scale = buttonBox.width / (button instanceof HTMLElement ? button.offsetWidth : 1) || 1;\n      const x = (iconBox.left - buttonBox.left + iconBox.width / 2) / scale - button.clientLeft;\n      slot.style.left = `${x - parseFloat(getComputedStyle(slot).width) / 2}px`;\n    };\n    centre();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(centre);\n    observer.observe(button);\n    return () => observer.disconnect();\n  }, [placement, spinnerEnter]);\n\n  // `data-button-ready` arms the entry animations a frame after mount, so nothing animates on page load.\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const armRef = useCallback(\n    (node: HTMLButtonElement | null) => (node ? armMotion(node) : undefined),\n    [],\n  );\n  const mergedRef = useMemo(() => mergeRefs(ref, buttonRef, armRef), [ref, armRef]);\n\n  // `grow` lasts only through the entry, so a later rotation or swap keeps the default origin.\n  useEffect(() => {\n    const node = buttonRef.current;\n    if (iconEnter !== 'grow' || !node) return;\n    const entries = [...node.querySelectorAll(':scope > svg')].flatMap(\n      (icon) => icon.getAnimations?.() ?? [],\n    );\n    return afterAnimations(entries, () => setIconEnter('fade'));\n  }, [iconEnter]);\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={mergedRef}\n      disabled={disabled}\n      // An explicit `aria-disabled` wins: unavailable yet focusable, unlike `disabled`.\n      aria-disabled={buttonProps['aria-disabled'] ?? disabled}\n      data-variant={variant}\n      // Icon-only flag; `ButtonGroup space=\"block\"` stretches only non-icon children.\n      data-icon-only={isIconOnly}\n      data-icon-enter={iconEnter}\n      type={type}\n      onClick={handleClick}\n      className={cn(classNames)}\n    >\n      {spinnerEnter && (\n        // Motion lives in `styles.css` under `[data-slot='button-spinner']`.\n        <span\n          ref={spinnerRef}\n          aria-hidden\n          data-slot=\"button-spinner\"\n          data-state={isLoading ? 'open' : 'closed'}\n          data-placement={placement}\n          data-enter={spinnerEnter}\n        >\n          <Loader2 className=\"tw:animate-spin\" />\n        </span>\n      )}\n      <Slottable>{asChild ? children : withLabels(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-foreground tw:[&_svg]:text-muted-foreground'],\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":"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,KAAK,IAAI,oBAAC,aAAD,EAA+B,KAAO,GAApB,KAAoB,IAAI;CACjE,CAAC;CACD,OAAO,cAAc,UAAU,MAAM,GAAG,OAAO;AACjD;;;ACxGA,MAAa,WAAW,IACtB;CACE;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;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;GAEA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GAEA,WAAW;IACT;IACA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IACA;IAKA;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;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"}

package/dist/{Calendar-DFtmZzbF.js → Calendar-BnKi1kPu.js}

@@ -1,5 +1,5 @@
 import { __exportAll } from "./rolldown-runtime-Bdc48AWt.js";
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region ../../node_modules/.pnpm/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tzName/index.js
@@ -6740,7 +6740,7 @@ const rangePickerClassNames = {
 	range_start: `tw:bg-primary tw:rounded-r-none tw:font-medium tw:border-primary tw:hover:bg-primary/90 tw:hover:border-primary/90 tw:text-primary-foreground`,
 	range_end: `tw:bg-primary tw:rounded-l-none tw:font-medium tw:border-primary tw:hover:bg-primary/90 tw:hover:border-primary/90 tw:text-primary-foreground`,
 	selected: `tw:font-medium tw:rounded`,
-	range_middle: `tw:bg-accent tw:border-accent tw:text-accent-foreground tw:rounded-none tw:font-medium`
+	range_middle: `tw:bg-selected tw:border-selected tw:text-selected-foreground tw:rounded-none tw:font-medium`
 };
 const Calendar = ({ className, classNames, ...props }) => {
 	const defaultClassNames = getDefaultClassNames();
@@ -6750,7 +6750,7 @@ const Calendar = ({ className, classNames, ...props }) => {
 		className: cn(className, "tw:p-3"),
 		classNames: {
 			chevron: `${defaultClassNames.chevron} tw:fill-foreground`,
-			day: `${defaultClassNames.day} tw:hover:bg-accent tw:rounded`,
+			day: `${defaultClassNames.day} tw:hover:bg-hover tw:rounded`,
 			day_button: `${defaultClassNames.day_button} tw:rounded`,
 			today: `tw:bg-accent tw:text-accent-foreground tw:font-medium`,
 			...dayPickerClassNames,
@@ -6765,4 +6765,4 @@ Calendar.displayName = "Calendar";
 //#endregion
 export { Calendar };
 
-//# sourceMappingURL=Calendar-DFtmZzbF.js.map
+//# sourceMappingURL=Calendar-BnKi1kPu.js.map