@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/browser-tabs/browser-tabs.js

@@ -0,0 +1,418 @@
+"use client";
+import { focusRing, focusRingInset, mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { springEasing } from "./browser-tabs-spring.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region src/components/browser-tabs/browser-tabs.tsx
+const PREFIX = "browser-tabs";
+/** Space between tabs, and the strip's height, in px (bencho's geometry). */
+const GAP = 11;
+/** How far the pointer travels before a press becomes a drag. */
+const DRAG_SLOP = 3;
+/** Spring duration. The overshoot comes from the easing, not from the time. */
+const SPRING_MS = 460;
+const STYLES = `@supports (transition-timing-function: linear(0, 1)){[data-slot="${PREFIX}-leaf"],[data-slot="${PREFIX}-ear"],[data-slot="${PREFIX}-tab"],[data-slot="${PREFIX}-body"]{transition-timing-function:var(--${PREFIX}-spring)}}`;
+/** Surface and ink as variables, so every colour mix follows the tone. */
+const browserTabsVariants = cva("relative flex w-[var(--browser-tabs-width)] max-w-full flex-col bg-muted text-[var(--browser-tabs-ink)]", {
+	variants: { 
+	/** `default` is a card-coloured window; `inverted` swaps surface and ink. */
+tone: {
+		default: "[--browser-tabs-ink:var(--color-foreground)] [--browser-tabs-surface:var(--color-card)]",
+		inverted: "[--browser-tabs-ink:var(--color-background)] [--browser-tabs-surface:var(--color-foreground)]"
+	} },
+	defaultVariants: { tone: "default" }
+});
+/** Ink mixed toward the surface: bencho's inactive, nav and URL colours. */
+const ink = (percent) => `color-mix(in oklab, var(--browser-tabs-ink) ${String(percent)}%, var(--browser-tabs-surface))`;
+const DEFAULT_LABELS = {
+	tabList: "Tabs",
+	back: "Back",
+	forward: "Forward",
+	reload: "Reload"
+};
+const defaultFormatMove = (tab, position, total) => `Moved ${tab.label} to position ${String(position)} of ${String(total)}`;
+/** A consistent order: known values once each, then any tab it left out. */
+function normalizeOrder(order, tabs) {
+	const values = tabs.map((tab) => tab.value);
+	const known = (order ?? []).filter((value, index, all) => values.includes(value) && all.indexOf(value) === index);
+	return [...known, ...values.filter((value) => !known.includes(value))];
+}
+function moveItem(order, from, to) {
+	const next = [...order];
+	const [item] = next.splice(from, 1);
+	next.splice(to, 0, item);
+	return next;
+}
+/** Whether an element lays out right-to-left: the nearest `dir`, else computed style. */
+function readRtl(element) {
+	const attribute = element.closest("[dir]")?.getAttribute("dir");
+	if (attribute === "rtl" || attribute === "ltr") return attribute === "rtl";
+	return getComputedStyle(element).direction === "rtl";
+}
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/** Back, forward and reload: a real button only when it does something. */
+function NavGlyph({ label, onPress, children }) {
+	const glyph = cn("flex size-6 shrink-0 items-center justify-center rounded-md [&_svg]:size-[1.125rem]", "text-[var(--browser-tabs-nav)]");
+	if (!onPress) return /* @__PURE__ */ jsx("span", {
+		"data-slot": `${PREFIX}-nav`,
+		"aria-hidden": "true",
+		className: glyph,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": `${PREFIX}-nav`,
+		"aria-label": label,
+		onClick: onPress,
+		className: cn(glyph, focusRing, "transition-colors duration-[var(--duration-fast)] hover:text-[var(--browser-tabs-ink)]"),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "contents",
+			children
+		})
+	});
+}
+const svgProps = {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": true
+};
+/** A tablist in a miniature browser window, with drag and keyboard reordering. */
+function BrowserTabs({ className, style, tabs, value: valueProp, defaultValue, onValueChange, order: orderProp, defaultOrder, onOrderChange, bounce = 15, corner = 20, tabWidth = 100, stroke = false, tone, children, renderPanel, onBack, onForward, onReload, labels: labelsProp, formatMove = defaultFormatMove, dir, ...props }) {
+	const id = useId();
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const [valueState, setValueState] = useState(defaultValue ?? tabs[0]?.value);
+	const value = valueProp ?? valueState;
+	const active = tabs.find((tab) => tab.value === value) ?? tabs[0];
+	const [orderState, setOrderState] = useState(() => normalizeOrder(defaultOrder, tabs));
+	const order = useMemo(() => normalizeOrder(orderProp ?? orderState, tabs), [
+		orderProp,
+		orderState,
+		tabs
+	]);
+	const orderRef = useRef(order);
+	useLayoutEffect(() => {
+		orderRef.current = order;
+	});
+	const [drag, setDrag] = useState(null);
+	const held = useRef(null);
+	const tabRefs = useRef(/* @__PURE__ */ new Map());
+	const listRef = useRef(null);
+	const [announcement, setAnnouncement] = useState("");
+	const [inheritedRtl, setInheritedRtl] = useState(false);
+	useLayoutEffect(() => {
+		if (dir || !listRef.current) return;
+		setInheritedRtl(readRtl(listRef.current));
+	}, [dir]);
+	const rtl = dir ? dir === "rtl" : inheritedRtl;
+	const sign = rtl ? -1 : 1;
+	const count = order.length;
+	const step = tabWidth + GAP;
+	const maxX = Math.max(0, (count - 1) * step);
+	const stripWidth = count * tabWidth + Math.max(0, count - 1) * GAP;
+	const tabRadius = Math.round(corner * .56 * 10) / 10;
+	function select(next) {
+		if (next === value) return;
+		if (valueProp === void 0) setValueState(next);
+		onValueChange?.(next);
+	}
+	function commitOrder(next) {
+		orderRef.current = next;
+		if (orderProp === void 0) setOrderState(next);
+		onOrderChange?.(next);
+	}
+	function announceMove(tab, index) {
+		setAnnouncement(formatMove(tab, index + 1, count));
+	}
+	function handleKeyDown(event, tab) {
+		const index = orderRef.current.indexOf(tab.value);
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const backward = rtl ? "ArrowRight" : "ArrowLeft";
+		let moveTo = null;
+		if (event.altKey && (event.key === forward || event.key === backward)) moveTo = index + (event.key === forward ? 1 : -1);
+		else if (event.ctrlKey && event.shiftKey && /^Page(Up|Down)$/.test(event.key)) moveTo = index + (event.key === "PageDown" ? 1 : -1);
+		if (moveTo !== null) {
+			event.preventDefault();
+			if (moveTo < 0 || moveTo >= count) return;
+			commitOrder(moveItem(orderRef.current, index, moveTo));
+			announceMove(tab, moveTo);
+			return;
+		}
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		let next = null;
+		if (event.key === forward) next = (index + 1) % count;
+		else if (event.key === backward) next = (index - 1 + count) % count;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = count - 1;
+		if (next === null) return;
+		event.preventDefault();
+		const target = orderRef.current[next];
+		select(target);
+		tabRefs.current.get(target)?.focus();
+	}
+	function handlePointerDown(event, tab) {
+		if (event.button !== 0) return;
+		select(tab.value);
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const startIndex = orderRef.current.indexOf(tab.value);
+		held.current = {
+			pointerId: event.pointerId,
+			value: tab.value,
+			startX: event.clientX,
+			originX: startIndex * step,
+			startIndex,
+			moved: false
+		};
+	}
+	function handlePointerMove(event) {
+		const current = held.current;
+		if (!current || current.pointerId !== event.pointerId) return;
+		const dx = (event.clientX - current.startX) * sign;
+		if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;
+		current.moved = true;
+		const x = clamp(current.originX + dx, 0, maxX);
+		setDrag({
+			value: current.value,
+			x
+		});
+		const from = orderRef.current.indexOf(current.value);
+		const to = clamp(Math.round(x / step), 0, count - 1);
+		if (to !== from) commitOrder(moveItem(orderRef.current, from, to));
+	}
+	function handlePointerEnd(event, tab) {
+		const current = held.current;
+		if (!current || current.pointerId !== event.pointerId) return;
+		held.current = null;
+		setDrag(null);
+		const index = orderRef.current.indexOf(current.value);
+		if (current.moved && index !== current.startIndex) announceMove(tab, index);
+	}
+	const heldValue = drag?.value;
+	const slotX = (tabValue) => drag && tabValue === drag.value ? drag.x : order.indexOf(tabValue) * step;
+	const transition = (still) => ({ transitionDuration: still ? "0s" : `calc(${String(SPRING_MS)}ms * var(--motion-scale))` });
+	const activeValue = active?.value ?? "";
+	const leafX = slotX(activeValue);
+	const leafHeld = heldValue === activeValue;
+	const atStart = leafX < .5;
+	const activeTabId = `${id}-tab-${String(Math.max(0, tabs.indexOf(active)))}`;
+	const panelId = `${id}-panel`;
+	const ear = (side) => {
+		const outerOnLeft = side === "start" !== rtl;
+		return {
+			position: "absolute",
+			bottom: 0,
+			width: tabRadius,
+			height: tabRadius,
+			[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: -tabRadius,
+			background: `radial-gradient(circle at ${outerOnLeft ? "0 0" : "100% 0"}, transparent ${String(tabRadius - .5)}px, var(--browser-tabs-surface) ${String(tabRadius)}px)`,
+			transformOrigin: outerOnLeft ? "100% 100%" : "0 100%",
+			scale: side === "start" && atStart ? "0" : "1",
+			...transition(leafHeld)
+		};
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": PREFIX,
+		dir,
+		className: cn(browserTabsVariants({ tone }), className),
+		style: {
+			"--browser-tabs-width": `max(20rem, ${String(stripWidth + Math.max(8, corner))}px)`,
+			"--browser-tabs-spring": springEasing(clamp(bounce, 0, 30) / 30 * .6),
+			"--browser-tabs-nav": ink(54),
+			borderRadius: corner,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: `dowel-${PREFIX}`,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": `${PREFIX}-bar`,
+				className: "relative z-1 flex items-end pt-2",
+				style: { paddingInlineEnd: Math.max(8, corner) },
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: listRef,
+					role: "tablist",
+					"aria-label": labels.tabList,
+					"aria-orientation": "horizontal",
+					"data-slot": `${PREFIX}-list`,
+					className: "relative h-9 shrink-0",
+					style: { width: stripWidth },
+					children: [/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": "true",
+						"data-slot": `${PREFIX}-leaf`,
+						"data-at-start": atStart ? "" : void 0,
+						className: cn("pointer-events-none absolute start-0 top-0 bg-[var(--browser-tabs-surface)]", "transition-[translate] ease-[var(--ease-overshoot)]", stroke && "shadow-[inset_0_1px_0_0_var(--color-border),inset_1px_0_0_0_var(--color-border),inset_-1px_0_0_0_var(--color-border)]"),
+						style: {
+							width: tabWidth,
+							height: 37,
+							translate: `${String(leafX * sign)}px 0`,
+							borderRadius: `${String(tabRadius)}px ${String(tabRadius)}px 0 0`,
+							...transition(leafHeld)
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-slot": `${PREFIX}-ear`,
+							"data-side": "start",
+							className: "transition-[scale] ease-[var(--ease-overshoot)]",
+							style: ear("start")
+						}), /* @__PURE__ */ jsx("span", {
+							"data-slot": `${PREFIX}-ear`,
+							"data-side": "end",
+							className: "transition-[scale] ease-[var(--ease-overshoot)]",
+							style: ear("end")
+						})]
+					}), tabs.map((tab, index) => {
+						const selected = tab.value === activeValue;
+						const isHeld = heldValue === tab.value;
+						return /* @__PURE__ */ jsxs("button", {
+							ref: (node) => {
+								if (node) tabRefs.current.set(tab.value, node);
+								else tabRefs.current.delete(tab.value);
+							},
+							type: "button",
+							role: "tab",
+							id: `${id}-tab-${String(index)}`,
+							"aria-selected": selected,
+							"aria-controls": panelId,
+							"aria-posinset": order.indexOf(tab.value) + 1,
+							"aria-setsize": count,
+							tabIndex: selected ? 0 : -1,
+							"data-slot": `${PREFIX}-tab`,
+							"data-state": selected ? "active" : "inactive",
+							"data-held": isHeld ? "" : void 0,
+							className: cn("absolute start-0 top-0 flex h-9 cursor-grab touch-none items-center gap-1.75 px-2.5 select-none", "text-[13.5px] font-medium data-[held]:cursor-grabbing", "text-[var(--browser-tabs-idle)] hover:text-[var(--browser-tabs-hover)] aria-selected:text-[var(--browser-tabs-ink)]", "transition-[translate,color] ease-[var(--ease-overshoot)]", focusRingInset),
+							style: {
+								"--browser-tabs-idle": ink(67),
+								"--browser-tabs-hover": ink(73),
+								width: tabWidth,
+								translate: `${String(slotX(tab.value) * sign)}px 0`,
+								borderRadius: `${String(tabRadius)}px ${String(tabRadius)}px 0 0`,
+								...transition(isHeld)
+							},
+							onClick: () => {
+								select(tab.value);
+							},
+							onKeyDown: (event) => {
+								handleKeyDown(event, tab);
+							},
+							onPointerDown: (event) => {
+								handlePointerDown(event, tab);
+							},
+							onPointerMove: handlePointerMove,
+							onPointerUp: (event) => {
+								handlePointerEnd(event, tab);
+							},
+							onPointerCancel: (event) => {
+								handlePointerEnd(event, tab);
+							},
+							children: [tab.icon != null ? /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": `${PREFIX}-icon`,
+								className: "flex size-4 shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4",
+								children: tab.icon
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate",
+								children: tab.label
+							})]
+						}, tab.value);
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": `${PREFIX}-body`,
+				className: cn("relative overflow-hidden bg-[var(--browser-tabs-surface)]", "transition-[border-radius] ease-[var(--ease-overshoot)]", stroke && "ring-1 ring-border ring-inset"),
+				style: {
+					borderStartStartRadius: atStart ? 0 : corner,
+					borderStartEndRadius: corner,
+					borderEndEndRadius: corner,
+					borderEndStartRadius: corner,
+					...transition(leafHeld)
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-slot": `${PREFIX}-toolbar`,
+					className: "flex items-center gap-3 px-3 py-2.5",
+					children: [
+						/* @__PURE__ */ jsx(NavGlyph, {
+							label: labels.back,
+							onPress: onBack,
+							children: /* @__PURE__ */ jsx("svg", {
+								...svgProps,
+								className: mirrorForDirection,
+								children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+							})
+						}),
+						/* @__PURE__ */ jsx(NavGlyph, {
+							label: labels.forward,
+							onPress: onForward,
+							children: /* @__PURE__ */ jsx("svg", {
+								...svgProps,
+								className: mirrorForDirection,
+								children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+							})
+						}),
+						/* @__PURE__ */ jsx(NavGlyph, {
+							label: labels.reload,
+							onPress: onReload,
+							children: /* @__PURE__ */ jsxs("svg", {
+								...svgProps,
+								children: [/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": `${PREFIX}-url`,
+							className: "flex h-9 min-w-0 flex-1 items-center gap-1.5 rounded-full px-3.5 text-[13px]",
+							style: {
+								background: `color-mix(in oklab, var(--browser-tabs-ink) 6%, var(--browser-tabs-surface))`,
+								color: ink(64)
+							},
+							children: [/* @__PURE__ */ jsxs("svg", {
+								...svgProps,
+								className: "size-3.5 shrink-0",
+								children: [/* @__PURE__ */ jsx("rect", {
+									width: "18",
+									height: "11",
+									x: "3",
+									y: "11",
+									rx: "2",
+									ry: "2"
+								}), /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: active?.url
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					role: "tabpanel",
+					id: panelId,
+					"aria-labelledby": activeTabId,
+					tabIndex: 0,
+					"data-slot": `${PREFIX}-panel`,
+					className: cn("min-h-23 border-t border-[color-mix(in_oklab,var(--browser-tabs-ink)_7%,transparent)]", focusRingInset),
+					children: renderPanel && active ? renderPanel(active) : children
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { BrowserTabs, browserTabsVariants };
+
+//# sourceMappingURL=browser-tabs.js.map

package/dist/components/browser-tabs/browser-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-tabs.js","names":[],"sources":["../../../src/components/browser-tabs/browser-tabs.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Browser tabs (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing, focusRingInset, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { springEasing } from \"./browser-tabs-spring\";\n\n/*\n * A miniature browser window whose tabs are a real tablist.\n *\n * The source is buttons with aria-pressed and a pointer-only reorder. Here the\n * strip is `role=\"tablist\"` with roving focus and automatic activation, and a\n * tab moves one slot with Alt+Arrow or Ctrl+Shift+PageUp/PageDown, announced\n * through a polite live region, so dragging is never the only way to reorder.\n *\n * Tabs stay in the DOM in the order they were given and are placed by\n * `translate`. Moving a DOM node drops its before-change style, so a reordered\n * node would jump instead of springing; instead the visual position is exposed\n * with aria-posinset, and the arrow keys follow the visual order.\n *\n * The springs are CSS transitions whose easing is a `linear()` spring curve\n * (./browser-tabs-spring), so no animation library is needed and the global\n * reduced-motion rule settles everything at once. While a tab is held it\n * follows the pointer 1:1 with no transition; on release it springs home.\n */\n\nconst PREFIX = \"browser-tabs\";\n/** Space between tabs, and the strip's height, in px (bencho's geometry). */\nconst GAP = 11;\nconst STRIP = 36;\n/** How far the pointer travels before a press becomes a drag. */\nconst DRAG_SLOP = 3;\n/** Spring duration. The overshoot comes from the easing, not from the time. */\nconst SPRING_MS = 460;\n\nconst STYLES = `@supports (transition-timing-function: linear(0, 1)){[data-slot=\"${PREFIX}-leaf\"],[data-slot=\"${PREFIX}-ear\"],[data-slot=\"${PREFIX}-tab\"],[data-slot=\"${PREFIX}-body\"]{transition-timing-function:var(--${PREFIX}-spring)}}`;\n\n/** Surface and ink as variables, so every colour mix follows the tone. */\nconst browserTabsVariants = cva(\n  \"relative flex w-[var(--browser-tabs-width)] max-w-full flex-col bg-muted text-[var(--browser-tabs-ink)]\",\n  {\n    variants: {\n      /** `default` is a card-coloured window; `inverted` swaps surface and ink. */\n      tone: {\n        default:\n          \"[--browser-tabs-ink:var(--color-foreground)] [--browser-tabs-surface:var(--color-card)]\",\n        inverted:\n          \"[--browser-tabs-ink:var(--color-background)] [--browser-tabs-surface:var(--color-foreground)]\",\n      },\n    },\n    defaultVariants: { tone: \"default\" },\n  },\n);\n\n/** Ink mixed toward the surface: bencho's inactive, nav and URL colours. */\nconst ink = (percent: number) =>\n  `color-mix(in oklab, var(--browser-tabs-ink) ${String(percent)}%, var(--browser-tabs-surface))`;\n\nexport interface BrowserTab {\n  /** Stable id, used for selection and ordering. */\n  value: string;\n  /** The tab's title, also its accessible name. */\n  label: string;\n  /** A favicon: an `<img>`, an inline SVG or an icon component. Decorative. */\n  icon?: ReactNode;\n  /** Shown in the address field while this tab is active. */\n  url?: string;\n}\n\nexport interface BrowserTabsLabels {\n  /** The tablist's accessible name. */\n  tabList: string;\n  back: string;\n  forward: string;\n  reload: string;\n}\n\nexport interface BrowserTabsProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof browserTabsVariants> {\n  tabs: BrowserTab[];\n  /** The active tab's value (controlled). */\n  value?: string;\n  /** The initially active tab when uncontrolled. Defaults to the first tab. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Tab values in visual order (controlled). Unknown values are dropped, missing ones appended. */\n  order?: string[];\n  /** Initial order when uncontrolled. Defaults to the order of `tabs`. */\n  defaultOrder?: string[];\n  /** Called with the new order after a drag swap or a keyboard move. */\n  onOrderChange?: (order: string[]) => void;\n  /** Spring overshoot for the leaf and tabs, 0–30. */\n  bounce?: number;\n  /** Window corner radius in px; the tab's top radius derives from it. */\n  corner?: number;\n  /** Tab width in px. */\n  tabWidth?: number;\n  /** Adds a 1px hairline to the window and the active tab. */\n  stroke?: boolean;\n  /** Page content for the active tab. Ignored when `renderPanel` is given. */\n  children?: ReactNode;\n  /** Renders the page for the active tab. */\n  renderPanel?: (tab: BrowserTab) => ReactNode;\n  /** Makes the back glyph a real button. Without a handler it is decoration. */\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  labels?: Partial<BrowserTabsLabels>;\n  /** The live-region message after a move. `position` is 1-based. */\n  formatMove?: (tab: BrowserTab, position: number, total: number) => string;\n}\n\nconst DEFAULT_LABELS: BrowserTabsLabels = {\n  tabList: \"Tabs\",\n  back: \"Back\",\n  forward: \"Forward\",\n  reload: \"Reload\",\n};\n\nconst defaultFormatMove = (tab: BrowserTab, position: number, total: number) =>\n  `Moved ${tab.label} to position ${String(position)} of ${String(total)}`;\n\n/** A consistent order: known values once each, then any tab it left out. */\nfunction normalizeOrder(order: readonly string[] | undefined, tabs: BrowserTab[]): string[] {\n  const values = tabs.map((tab) => tab.value);\n  const known = (order ?? []).filter(\n    (value, index, all) => values.includes(value) && all.indexOf(value) === index,\n  );\n  return [...known, ...values.filter((value) => !known.includes(value))];\n}\n\nfunction moveItem(order: string[], from: number, to: number): string[] {\n  const next = [...order];\n  const [item] = next.splice(from, 1);\n  next.splice(to, 0, item as string);\n  return next;\n}\n\n/** Whether an element lays out right-to-left: the nearest `dir`, else computed style. */\nfunction readRtl(element: HTMLElement): boolean {\n  const attribute = element.closest(\"[dir]\")?.getAttribute(\"dir\");\n  if (attribute === \"rtl\" || attribute === \"ltr\") return attribute === \"rtl\";\n  return getComputedStyle(element).direction === \"rtl\";\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\ninterface Held {\n  pointerId: number;\n  value: string;\n  startX: number;\n  originX: number;\n  startIndex: number;\n  moved: boolean;\n}\n\n/** Back, forward and reload: a real button only when it does something. */\nfunction NavGlyph({\n  label,\n  onPress,\n  children,\n}: {\n  label: string;\n  onPress?: () => void;\n  children: ReactNode;\n}) {\n  const glyph = cn(\n    \"flex size-6 shrink-0 items-center justify-center rounded-md [&_svg]:size-[1.125rem]\",\n    \"text-[var(--browser-tabs-nav)]\",\n  );\n  if (!onPress) {\n    return (\n      <span data-slot={`${PREFIX}-nav`} aria-hidden=\"true\" className={glyph}>\n        {children}\n      </span>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      data-slot={`${PREFIX}-nav`}\n      aria-label={label}\n      onClick={onPress}\n      className={cn(\n        glyph,\n        focusRing,\n        \"transition-colors duration-[var(--duration-fast)] hover:text-[var(--browser-tabs-ink)]\",\n      )}\n    >\n      <span aria-hidden=\"true\" className=\"contents\">\n        {children}\n      </span>\n    </button>\n  );\n}\n\nconst svgProps = {\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 2,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  \"aria-hidden\": true,\n} as const;\n\n/** A tablist in a miniature browser window, with drag and keyboard reordering. */\nexport function BrowserTabs({\n  className,\n  style,\n  tabs,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  order: orderProp,\n  defaultOrder,\n  onOrderChange,\n  bounce = 15,\n  corner = 20,\n  tabWidth = 100,\n  stroke = false,\n  tone,\n  children,\n  renderPanel,\n  onBack,\n  onForward,\n  onReload,\n  labels: labelsProp,\n  formatMove = defaultFormatMove,\n  dir,\n  ...props\n}: BrowserTabsProps) {\n  const id = useId();\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const [valueState, setValueState] = useState(defaultValue ?? tabs[0]?.value);\n  const value = valueProp ?? valueState;\n  const active = tabs.find((tab) => tab.value === value) ?? tabs[0];\n\n  const [orderState, setOrderState] = useState(() => normalizeOrder(defaultOrder, tabs));\n  const order = useMemo(\n    () => normalizeOrder(orderProp ?? orderState, tabs),\n    [orderProp, orderState, tabs],\n  );\n  // The latest order, including a swap made earlier in the same pointer stream\n  // before React has re-rendered.\n  const orderRef = useRef(order);\n  useLayoutEffect(() => {\n    orderRef.current = order;\n  });\n\n  const [drag, setDrag] = useState<{ value: string; x: number } | null>(null);\n  const held = useRef<Held | null>(null);\n  const tabRefs = useRef(new Map<string, HTMLButtonElement>());\n  const listRef = useRef<HTMLDivElement>(null);\n  const [announcement, setAnnouncement] = useState(\"\");\n\n  const [inheritedRtl, setInheritedRtl] = useState(false);\n  useLayoutEffect(() => {\n    if (dir || !listRef.current) return;\n    setInheritedRtl(readRtl(listRef.current));\n  }, [dir]);\n  const rtl = dir ? dir === \"rtl\" : inheritedRtl;\n  const sign = rtl ? -1 : 1;\n\n  const count = order.length;\n  const step = tabWidth + GAP;\n  const maxX = Math.max(0, (count - 1) * step);\n  const stripWidth = count * tabWidth + Math.max(0, count - 1) * GAP;\n  const tabRadius = Math.round(corner * 0.56 * 10) / 10;\n\n  function select(next: string) {\n    if (next === value) return;\n    if (valueProp === undefined) setValueState(next);\n    onValueChange?.(next);\n  }\n\n  function commitOrder(next: string[]) {\n    orderRef.current = next;\n    if (orderProp === undefined) setOrderState(next);\n    onOrderChange?.(next);\n  }\n\n  function announceMove(tab: BrowserTab, index: number) {\n    setAnnouncement(formatMove(tab, index + 1, count));\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, tab: BrowserTab) {\n    const index = orderRef.current.indexOf(tab.value);\n    const forward = rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = rtl ? \"ArrowRight\" : \"ArrowLeft\";\n\n    let moveTo: number | null = null;\n    if (event.altKey && (event.key === forward || event.key === backward)) {\n      moveTo = index + (event.key === forward ? 1 : -1);\n    } else if (event.ctrlKey && event.shiftKey && /^Page(Up|Down)$/.test(event.key)) {\n      moveTo = index + (event.key === \"PageDown\" ? 1 : -1);\n    }\n    if (moveTo !== null) {\n      event.preventDefault();\n      if (moveTo < 0 || moveTo >= count) return;\n      commitOrder(moveItem(orderRef.current, index, moveTo));\n      announceMove(tab, moveTo);\n      return;\n    }\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n\n    let next: number | null = null;\n    if (event.key === forward) next = (index + 1) % count;\n    else if (event.key === backward) next = (index - 1 + count) % count;\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = count - 1;\n    if (next === null) return;\n\n    event.preventDefault();\n    const target = orderRef.current[next] as string;\n    select(target);\n    tabRefs.current.get(target)?.focus();\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLButtonElement>, tab: BrowserTab) {\n    if (event.button !== 0) return;\n    select(tab.value);\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const startIndex = orderRef.current.indexOf(tab.value);\n    held.current = {\n      pointerId: event.pointerId,\n      value: tab.value,\n      startX: event.clientX,\n      originX: startIndex * step,\n      startIndex,\n      moved: false,\n    };\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {\n    const current = held.current;\n    if (!current || current.pointerId !== event.pointerId) return;\n    const dx = (event.clientX - current.startX) * sign;\n    if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;\n    current.moved = true;\n    const x = clamp(current.originX + dx, 0, maxX);\n    setDrag({ value: current.value, x });\n\n    // Crossing a neighbour's midpoint swaps: the held tab takes the nearest slot.\n    const from = orderRef.current.indexOf(current.value);\n    const to = clamp(Math.round(x / step), 0, count - 1);\n    if (to !== from) commitOrder(moveItem(orderRef.current, from, to));\n  }\n\n  function handlePointerEnd(event: PointerEvent<HTMLButtonElement>, tab: BrowserTab) {\n    const current = held.current;\n    if (!current || current.pointerId !== event.pointerId) return;\n    held.current = null;\n    setDrag(null);\n    const index = orderRef.current.indexOf(current.value);\n    if (current.moved && index !== current.startIndex) announceMove(tab, index);\n  }\n\n  const heldValue = drag?.value;\n  const slotX = (tabValue: string) =>\n    drag && tabValue === drag.value ? drag.x : order.indexOf(tabValue) * step;\n  const transition = (still: boolean): CSSProperties => ({\n    transitionDuration: still ? \"0s\" : `calc(${String(SPRING_MS)}ms * var(--motion-scale))`,\n  });\n\n  const activeValue = active?.value ?? \"\";\n  const leafX = slotX(activeValue);\n  const leafHeld = heldValue === activeValue;\n  const atStart = leafX < 0.5;\n  const activeTabId = `${id}-tab-${String(Math.max(0, tabs.indexOf(active as BrowserTab)))}`;\n  const panelId = `${id}-panel`;\n\n  const ear = (side: \"start\" | \"end\"): CSSProperties => {\n    // The concave cut is centred on the ear's outer top corner.\n    const outerOnLeft = (side === \"start\") !== rtl;\n    return {\n      position: \"absolute\",\n      bottom: 0,\n      width: tabRadius,\n      height: tabRadius,\n      [side === \"start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: -tabRadius,\n      background: `radial-gradient(circle at ${outerOnLeft ? \"0 0\" : \"100% 0\"}, transparent ${String(tabRadius - 0.5)}px, var(--browser-tabs-surface) ${String(tabRadius)}px)`,\n      transformOrigin: outerOnLeft ? \"100% 100%\" : \"0 100%\",\n      scale: side === \"start\" && atStart ? \"0\" : \"1\",\n      ...transition(leafHeld),\n    };\n  };\n\n  return (\n    <div\n      data-slot={PREFIX}\n      dir={dir}\n      className={cn(browserTabsVariants({ tone }), className)}\n      style={\n        {\n          \"--browser-tabs-width\": `max(20rem, ${String(stripWidth + Math.max(8, corner))}px)`,\n          \"--browser-tabs-spring\": springEasing((clamp(bounce, 0, 30) / 30) * 0.6),\n          \"--browser-tabs-nav\": ink(54),\n          borderRadius: corner,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <style href={`dowel-${PREFIX}`} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot={`${PREFIX}-bar`}\n        className=\"relative z-1 flex items-end pt-2\"\n        style={{ paddingInlineEnd: Math.max(8, corner) }}\n      >\n        <div\n          ref={listRef}\n          role=\"tablist\"\n          aria-label={labels.tabList}\n          aria-orientation=\"horizontal\"\n          data-slot={`${PREFIX}-list`}\n          className=\"relative h-9 shrink-0\"\n          style={{ width: stripWidth }}\n        >\n          <div\n            aria-hidden=\"true\"\n            data-slot={`${PREFIX}-leaf`}\n            data-at-start={atStart ? \"\" : undefined}\n            className={cn(\n              \"pointer-events-none absolute start-0 top-0 bg-[var(--browser-tabs-surface)]\",\n              \"transition-[translate] ease-[var(--ease-overshoot)]\",\n              stroke &&\n                \"shadow-[inset_0_1px_0_0_var(--color-border),inset_1px_0_0_0_var(--color-border),inset_-1px_0_0_0_var(--color-border)]\",\n            )}\n            style={{\n              width: tabWidth,\n              height: STRIP + 1,\n              translate: `${String(leafX * sign)}px 0`,\n              borderRadius: `${String(tabRadius)}px ${String(tabRadius)}px 0 0`,\n              ...transition(leafHeld),\n            }}\n          >\n            <span\n              data-slot={`${PREFIX}-ear`}\n              data-side=\"start\"\n              className=\"transition-[scale] ease-[var(--ease-overshoot)]\"\n              style={ear(\"start\")}\n            />\n            <span\n              data-slot={`${PREFIX}-ear`}\n              data-side=\"end\"\n              className=\"transition-[scale] ease-[var(--ease-overshoot)]\"\n              style={ear(\"end\")}\n            />\n          </div>\n          {tabs.map((tab, index) => {\n            const selected = tab.value === activeValue;\n            const isHeld = heldValue === tab.value;\n            return (\n              <button\n                key={tab.value}\n                ref={(node) => {\n                  if (node) tabRefs.current.set(tab.value, node);\n                  else tabRefs.current.delete(tab.value);\n                }}\n                type=\"button\"\n                role=\"tab\"\n                id={`${id}-tab-${String(index)}`}\n                aria-selected={selected}\n                aria-controls={panelId}\n                aria-posinset={order.indexOf(tab.value) + 1}\n                aria-setsize={count}\n                tabIndex={selected ? 0 : -1}\n                data-slot={`${PREFIX}-tab`}\n                data-state={selected ? \"active\" : \"inactive\"}\n                data-held={isHeld ? \"\" : undefined}\n                className={cn(\n                  \"absolute start-0 top-0 flex h-9 cursor-grab touch-none items-center gap-1.75 px-2.5 select-none\",\n                  \"text-[13.5px] font-medium data-[held]:cursor-grabbing\",\n                  \"text-[var(--browser-tabs-idle)] hover:text-[var(--browser-tabs-hover)] aria-selected:text-[var(--browser-tabs-ink)]\",\n                  \"transition-[translate,color] ease-[var(--ease-overshoot)]\",\n                  focusRingInset,\n                )}\n                style={\n                  {\n                    \"--browser-tabs-idle\": ink(67),\n                    \"--browser-tabs-hover\": ink(73),\n                    width: tabWidth,\n                    translate: `${String(slotX(tab.value) * sign)}px 0`,\n                    borderRadius: `${String(tabRadius)}px ${String(tabRadius)}px 0 0`,\n                    ...transition(isHeld),\n                  } as CSSProperties\n                }\n                onClick={() => {\n                  select(tab.value);\n                }}\n                onKeyDown={(event) => {\n                  handleKeyDown(event, tab);\n                }}\n                onPointerDown={(event) => {\n                  handlePointerDown(event, tab);\n                }}\n                onPointerMove={handlePointerMove}\n                onPointerUp={(event) => {\n                  handlePointerEnd(event, tab);\n                }}\n                onPointerCancel={(event) => {\n                  handlePointerEnd(event, tab);\n                }}\n              >\n                {tab.icon != null ? (\n                  <span\n                    aria-hidden=\"true\"\n                    data-slot={`${PREFIX}-icon`}\n                    className=\"flex size-4 shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4\"\n                  >\n                    {tab.icon}\n                  </span>\n                ) : null}\n                <span className=\"min-w-0 truncate\">{tab.label}</span>\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div\n        data-slot={`${PREFIX}-body`}\n        className={cn(\n          \"relative overflow-hidden bg-[var(--browser-tabs-surface)]\",\n          \"transition-[border-radius] ease-[var(--ease-overshoot)]\",\n          stroke && \"ring-1 ring-border ring-inset\",\n        )}\n        style={{\n          borderStartStartRadius: atStart ? 0 : corner,\n          borderStartEndRadius: corner,\n          borderEndEndRadius: corner,\n          borderEndStartRadius: corner,\n          ...transition(leafHeld),\n        }}\n      >\n        <div data-slot={`${PREFIX}-toolbar`} className=\"flex items-center gap-3 px-3 py-2.5\">\n          <NavGlyph label={labels.back} onPress={onBack}>\n            <svg {...svgProps} className={mirrorForDirection}>\n              <path d=\"m15 18-6-6 6-6\" />\n            </svg>\n          </NavGlyph>\n          <NavGlyph label={labels.forward} onPress={onForward}>\n            <svg {...svgProps} className={mirrorForDirection}>\n              <path d=\"m9 18 6-6-6-6\" />\n            </svg>\n          </NavGlyph>\n          <NavGlyph label={labels.reload} onPress={onReload}>\n            <svg {...svgProps}>\n              <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n              <path d=\"M21 3v5h-5\" />\n            </svg>\n          </NavGlyph>\n          <div\n            data-slot={`${PREFIX}-url`}\n            className=\"flex h-9 min-w-0 flex-1 items-center gap-1.5 rounded-full px-3.5 text-[13px]\"\n            style={{\n              background: `color-mix(in oklab, var(--browser-tabs-ink) 6%, var(--browser-tabs-surface))`,\n              color: ink(64),\n            }}\n          >\n            <svg {...svgProps} className=\"size-3.5 shrink-0\">\n              <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\" />\n              <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n            </svg>\n            <span className=\"truncate\">{active?.url}</span>\n          </div>\n        </div>\n        <div\n          role=\"tabpanel\"\n          id={panelId}\n          aria-labelledby={activeTabId}\n          tabIndex={0}\n          data-slot={`${PREFIX}-panel`}\n          className={cn(\n            \"min-h-23 border-t border-[color-mix(in_oklab,var(--browser-tabs-ink)_7%,transparent)]\",\n            focusRingInset,\n          )}\n        >\n          {renderPanel && active ? renderPanel(active) : children}\n        </div>\n      </div>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n\nexport { browserTabsVariants };\n"],"mappings":"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"}

package/dist/components/browser-tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { BrowserTab, BrowserTabs, BrowserTabsLabels, BrowserTabsProps, browserTabsVariants } from "./browser-tabs.js";
+export { type BrowserTab, BrowserTabs, type BrowserTabsLabels, type BrowserTabsProps, browserTabsVariants };

package/dist/components/browser-tabs/index.js

@@ -0,0 +1,2 @@
+import { BrowserTabs, browserTabsVariants } from "./browser-tabs.js";
+export { BrowserTabs, browserTabsVariants };

package/dist/components/browser-tabs/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/browser-tabs/meta.ts
+const meta = defineMeta({
+	name: "browser-tabs",
+	title: "Browser Tabs",
+	description: "A miniature browser window whose tabs are a real tablist: a card-coloured leaf springs under the active tab, and tabs reorder by drag or keyboard.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["browser-tabs.tsx", "browser-tabs-spring.ts"],
+	a11y: "The strip is role=\"tablist\" (named by labels.tabList) of role=\"tab\" buttons with aria-selected, aria-controls and aria-posinset/aria-setsize reporting each tab's visual position; one role=\"tabpanel\" is labelled by the active tab. Left/Right (mirrored in right-to-left layouts) move focus and select with wrap-around, Home/End jump to the ends. Alt+Left/Right and Ctrl+Shift+PageUp/PageDown move the focused tab one slot, and every move — keyboard or drag — is announced through a polite live region (\"Moved Finds to position 1 of 2\"), so dragging is never the only way to reorder. Back, forward and reload are decorative (aria-hidden) unless onBack/onForward/onReload are given, when they become named buttons. The leaf and its ears are aria-hidden; the springs are CSS transitions that settle at once under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/browser-tabs/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/browser-tabs/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"browser-tabs\",\n  title: \"Browser Tabs\",\n  description:\n    \"A miniature browser window whose tabs are a real tablist: a card-coloured leaf springs under the active tab, and tabs reorder by drag or keyboard.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"browser-tabs.tsx\", \"browser-tabs-spring.ts\"],\n  a11y:\n    'The strip is role=\"tablist\" (named by labels.tabList) of role=\"tab\" buttons with aria-selected, aria-controls and ' +\n    'aria-posinset/aria-setsize reporting each tab\\'s visual position; one role=\"tabpanel\" is labelled by the active ' +\n    \"tab. Left/Right (mirrored in right-to-left layouts) move focus and select with wrap-around, Home/End jump to the \" +\n    \"ends. Alt+Left/Right and Ctrl+Shift+PageUp/PageDown move the focused tab one slot, and every move — keyboard or \" +\n    'drag — is announced through a polite live region (\"Moved Finds to position 1 of 2\"), so dragging is never the ' +\n    \"only way to reorder. Back, forward and reload are decorative (aria-hidden) unless onBack/onForward/onReload are \" +\n    \"given, when they become named buttons. The leaf and its ears are aria-hidden; the springs are CSS transitions \" +\n    \"that settle at once under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,oBAAoB,wBAAwB;CACpD,MACE;AAQJ,CAAC"}

package/dist/components/button/button.d.ts

@@ -2,8 +2,10 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "secondary" | "outline" | "destructive" | "primary" | "ghost" | null | undefined;
+  variant?: "link" | "primary" | "destructive" | "secondary" | "outline" | "ghost" | "soft" | "gradient" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+  shape?: "default" | "pill" | "square" | null | undefined;
+  press?: "none" | "scale" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<typeof buttonVariants> {
   /**
@@ -22,7 +24,7 @@ interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<type
   loading?: boolean;
 }
 /** Triggers an action or event. */
-declare function Button({ className, variant, size, asChild, loading, disabled, onClick, children, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ className, variant, size, shape, press, asChild, loading, disabled, onClick, children, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { Button, ButtonProps, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;cAUM,iBAAc;;;6CAyCnB;UAEgB,oBACP,iCAAiC,oBAAoB;;;;;EAK7D;;;;;;;;;EASA;;;iBAIc,SACd,WACA,SACA,MACA,SACA,SACA,UACA,SACA,aACG,SACF,8BAAW,IAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;cAWM,iBAAc;;;;;6CA6FnB;UAEgB,oBACP,iCAAiC,oBAAoB;;;;;EAK7D;;;;;;;;;EASA;;;iBAIc,SACd,WACA,SACA,MACA,OACA,OACA,SACA,SACA,UACA,SACA,aACG,SACF,8BAAW,IAAA"}

package/dist/components/button/button.js

@@ -6,7 +6,7 @@ import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/button/button.tsx
-const buttonVariants = cva(cn("inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none", "transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", focusRing, disabledStyles, iconSlot), {
+const buttonVariants = cva(cn("inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none", "transition-[background-color,border-color,color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", focusRing, disabledStyles, iconSlot), {
 	variants: {
 		variant: {
 			primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
@@ -14,7 +14,15 @@ const buttonVariants = cva(cn("inline-flex shrink-0 items-center justify-center
 			outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary",
 			ghost: "text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
-			link: "text-primary underline-offset-4 hover:underline"
+			link: "text-primary underline-offset-4 hover:underline",
+			/** A tint of the primary colour. Quieter than primary, warmer than ghost. */
+			soft: cn("bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary", "hover:bg-[color-mix(in_oklab,var(--color-primary)_18%,transparent)]", "active:bg-[color-mix(in_oklab,var(--color-primary)_24%,transparent)]"),
+			/**
+			* SmoothUI's "candy": primary running into its hover shade, with a
+			* hairline highlight along the top edge. Every stop is a token, so it
+			* follows the theme and the monochrome preset.
+			*/
+			gradient: cn("bg-linear-to-b from-primary to-primary-hover text-primary-foreground", "shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-primary-foreground)_25%,transparent),0_1px_2px_color-mix(in_oklab,var(--color-foreground)_20%,transparent)]", "hover:from-primary-hover hover:to-primary-hover", "active:from-primary-active active:to-primary-active")
 		},
 		size: {
 			sm: "h-8 gap-1.5 rounded-md px-3 text-sm",
@@ -22,6 +30,24 @@ const buttonVariants = cva(cn("inline-flex shrink-0 items-center justify-center
 			lg: "h-10 gap-2 rounded-lg px-5 text-base",
 			icon: "size-9 rounded-md",
 			"icon-sm": "size-8 rounded-md"
+		},
+		/**
+		* Corner treatment, independent of size. Declared after `size` so its
+		* radius wins the merge. `default` keeps each size's own radius.
+		*/
+		shape: {
+			default: "",
+			pill: "rounded-full",
+			square: "rounded-none"
+		},
+		/**
+		* Press feedback. `scale` shrinks the button to 97% while it is held —
+		* a transform, so nothing around it moves, and it only exists when the
+		* reader has not asked for reduced motion. `none` opts out.
+		*/
+		press: {
+			scale: "",
+			none: ""
 		}
 	},
 	compoundVariants: [
@@ -39,15 +65,30 @@ const buttonVariants = cva(cn("inline-flex shrink-0 items-center justify-center
 			variant: "link",
 			size: "lg",
 			className: "h-auto px-0"
+		},
+		{
+			press: "scale",
+			variant: [
+				"primary",
+				"secondary",
+				"outline",
+				"ghost",
+				"destructive",
+				"soft",
+				"gradient"
+			],
+			className: "motion-safe:active:scale-[0.97]"
 		}
 	],
 	defaultVariants: {
 		variant: "primary",
-		size: "md"
+		size: "md",
+		shape: "default",
+		press: "scale"
 	}
 });
 /** Triggers an action or event. */
-function Button({ className, variant, size, asChild = false, loading = false, disabled, onClick, children, ...props }) {
+function Button({ className, variant, size, shape, press, asChild = false, loading = false, disabled, onClick, children, ...props }) {
 	const Comp = asChild ? Slot.Root : "button";
 	function handleClick(event) {
 		if (loading) {
@@ -60,7 +101,9 @@ function Button({ className, variant, size, asChild = false, loading = false, di
 	return /* @__PURE__ */ jsxs(Comp, {
 		className: cn(buttonVariants({
 			variant,
-			size
+			size,
+			shape,
+			press
 		}), className),
 		disabled,
 		"aria-disabled": loading || void 0,