@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/button/index.js

@@ -1,14 +1,14 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { mergeStatefulStyles } from "../../styles/merge.js";
-import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
+import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { focus } from "../../styles/focus.js";
-import { useRipple } from "../../hooks/useRipple.js";
-import { refCallback } from "../../render/ref.js";
-import ProgressIndicator from "../progress-indicator/index.js";
+import { ButtonBase, ToggleButtonBase } from "../../button/index.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import { groupPressHandlers } from "../../button/group.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, Link } from "react-aria-components";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroupStateContext } from "react-aria-components";
 //#region src/components/button/index.tsx
 const styles = {
 	base: {
@@ -28,6 +28,9 @@ const styles = {
 		kLWn49: "x1lz68p4",
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
+		kIyJzY: "x1qno0dh x12w9bfk",
+		k1ekBW: "x1hdt7lq",
+		kAMwcw: "x1seskgd",
 		$$css: true
 	},
 	disabled: {
@@ -35,8 +38,8 @@ const styles = {
 		$$css: true
 	},
 	elevated: {
-		kWkggS: "x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6",
-		kGVxlE: "x1g60mc1 x1fzngjt x19efjv6",
+		kWkggS: "x1vnz5z6",
+		kGVxlE: "x19efjv6",
 		kMwMTN: "x1mxwv8y",
 		$$css: true
 	},
@@ -47,9 +50,14 @@ const styles = {
 		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
+	elevatedToggleSelected: {
+		kWkggS: "xnety89 x1jzqe4",
+		kMwMTN: "xwjo7ld x1k5gbb1",
+		$$css: true
+	},
 	filled: {
-		kWkggS: "xpky1to x16z974x xyf7a0q xnety89",
-		kGVxlE: "xpk4wdd x1955hzl x1gnnqk1",
+		kWkggS: "xnety89",
+		kGVxlE: "x1gnnqk1",
 		kMwMTN: "xwjo7ld",
 		$$css: true
 	},
@@ -60,21 +68,31 @@ const styles = {
 		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
-	label: {
-		k1xSpc: "xjp7ctv",
+	filledToggle: {
+		kWkggS: "x1mjdul6",
+		kMwMTN: "x1w5n3ug",
 		$$css: true
 	},
-	labelPending: {
-		k33iCy: "xlshs6z",
+	filledToggleSelected: {
+		kWkggS: "xnety89 x1jzqe4",
+		kMwMTN: "xwjo7ld x1k5gbb1",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kjj79g: "xl56j7k",
 		$$css: true
 	},
 	lg: {
-		kZKoxP: "xs1ryiz",
 		kMv6JI: "x46eyla",
 		kGuDYH: "x5ehqhr",
 		k63SB2: "xrf6cl6",
 		kb6lSQ: "x1g135zh",
 		kLWn49: "x1ggk5va",
+		kAzted: "xdovgog",
+		k8WAf4: "x1uvvd8r",
 		kg3NbH: "xg0ps1x",
 		$$css: true
 	},
@@ -83,12 +101,13 @@ const styles = {
 		kGOzcv: "x1gvacq5",
 		kpsdNU: "xm4btww",
 		kEoFBp: "x1hmns74",
-		kZKoxP: "x1rv7mn0",
+		kAzted: "x1cio8j0",
+		k8WAf4: "x1cmllll",
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
 	outlined: {
-		kWkggS: "x1dg9itu x1yu1589 x1728qcm xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kVAM5u: "x133yhug",
 		ksu8eU: "x1y0btm7",
 		kMzoRj: "xmkeg23",
@@ -101,16 +120,18 @@ const styles = {
 		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
-	pending: {
-		kGNEyG: "x6s0dn4",
-		k1xSpc: "x78zum5",
-		kpwlN0: "x10a8y8t",
-		kjj79g: "xl56j7k",
-		kVAEAm: "x10l6tqk",
+	outlinedToggleSelected: {
+		kWkggS: "x1c5gpgi x1jzqe4",
+		kVAM5u: "x9r1u3d x1n2ykn",
+		kMwMTN: "x1girmi0 x1k5gbb1",
+		$$css: true
+	},
+	round: {
+		kaIpWk: "x1dkaolv",
 		$$css: true
 	},
 	text: {
-		kWkggS: "x12vej0r x598nmq x14dcer4 xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kMzoRj: "xc342km",
 		kMwMTN: "x1mxwv8y",
 		$$css: true
@@ -121,8 +142,8 @@ const styles = {
 		$$css: true
 	},
 	tonal: {
-		kWkggS: "xnqsvhv xc87fxa xlizrex x15dekr4",
-		kGVxlE: "xpk4wdd x1955hzl x1gnnqk1",
+		kWkggS: "x15dekr4",
+		kGVxlE: "x1gnnqk1",
 		kMwMTN: "x1sawysd",
 		$$css: true
 	},
@@ -133,14 +154,20 @@ const styles = {
 		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
+	tonalToggleSelected: {
+		kWkggS: "x167r6xl x1jzqe4",
+		kMwMTN: "x1lba3jz x1k5gbb1",
+		$$css: true
+	},
 	xl: {
-		kZKoxP: "x1xaimp3",
 		kMv6JI: "x1fz0g89",
 		kGuDYH: "xkb6epg",
 		k63SB2: "x76yrz5",
 		kOIVth: "x1gka490",
 		kb6lSQ: "x1s1qhaa",
 		kLWn49: "x1voeury",
+		kAzted: "x112cvos",
+		k8WAf4: "xny1cbh",
 		kg3NbH: "x1sdxjpb",
 		$$css: true
 	},
@@ -149,18 +176,20 @@ const styles = {
 		kGOzcv: "x1arwny6",
 		kpsdNU: "xm4btww",
 		kEoFBp: "x1hmns74",
-		kZKoxP: "xig8zya",
+		kAzted: "xlzjxrf",
+		k8WAf4: "xmqoko8",
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
 	xxl: {
-		kZKoxP: "x173yhrv",
 		kMv6JI: "x1vsmgmf",
 		kGuDYH: "xh9c4x",
 		k63SB2: "x1y15vu6",
 		kOIVth: "xxj4525",
 		kb6lSQ: "xoqu3bc",
 		kLWn49: "x10x9d6x",
+		kAzted: "xldltni",
+		k8WAf4: "x1lrxzt4",
 		kg3NbH: "x1dao9b2",
 		$$css: true
 	}
@@ -187,6 +216,215 @@ const outlineWidths = {
 		$$css: true
 	}
 };
+const iconSizes = {
+	lg: {
+		kGuDYH: "x1pvqxga",
+		$$css: true
+	},
+	md: {
+		kGuDYH: "xwsyq91",
+		$$css: true
+	},
+	xl: {
+		kGuDYH: "x1s3cmhv",
+		$$css: true
+	},
+	xs: {
+		kGuDYH: "xwsyq91",
+		$$css: true
+	},
+	xxl: {
+		kGuDYH: "x1tgwohi",
+		$$css: true
+	}
+};
+const PADDINGS = {
+	lg: spacing.xl,
+	md: spacing.lg,
+	xl: "48px",
+	xs: spacing.lg,
+	xxl: "64px"
+};
+const shifted = { padding: (value) => [{
+	kg3NbH: value != null ? "x30g6up" : value,
+	$$css: true
+}, { "--x-paddingInline": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(value) }] };
+const squareShapes = {
+	lg: {
+		kaIpWk: "xhpdng0",
+		$$css: true
+	},
+	md: {
+		kaIpWk: "x62ce2h",
+		$$css: true
+	},
+	xl: {
+		kaIpWk: "x19pkqky",
+		$$css: true
+	},
+	xs: {
+		kaIpWk: "x62ce2h",
+		$$css: true
+	},
+	xxl: {
+		kaIpWk: "x19pkqky",
+		$$css: true
+	}
+};
+const pressedShapes = {
+	lg: {
+		kaIpWk: "x62ce2h",
+		$$css: true
+	},
+	md: {
+		kaIpWk: "x1xdvaa9",
+		$$css: true
+	},
+	xl: {
+		kaIpWk: "xhpdng0",
+		$$css: true
+	},
+	xs: {
+		kaIpWk: "x1xdvaa9",
+		$$css: true
+	},
+	xxl: {
+		kaIpWk: "xhpdng0",
+		$$css: true
+	}
+};
+const hovered = {
+	elevated: {
+		kWkggS: "xltxkvm",
+		kGVxlE: "x1os83gw",
+		$$css: true
+	},
+	elevatedToggleSelected: {
+		kWkggS: "xo1ct44 x1jzqe4",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "xo1ct44",
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
+	filledToggle: {
+		kWkggS: "xtxe0ya",
+		$$css: true
+	},
+	filledToggleSelected: {
+		kWkggS: "xo1ct44 x1jzqe4",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x14noynh",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "x1hxzsxp x1jzqe4",
+		$$css: true
+	},
+	text: {
+		kWkggS: "x659ado",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1fctxn6",
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x12r95rf x1jzqe4",
+		$$css: true
+	}
+};
+const focused = {
+	elevated: {
+		kWkggS: "xcn1wy9",
+		$$css: true
+	},
+	elevatedToggleSelected: {
+		kWkggS: "xhodiby x1jzqe4",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "xhodiby",
+		$$css: true
+	},
+	filledToggle: {
+		kWkggS: "x1ppcb1",
+		$$css: true
+	},
+	filledToggleSelected: {
+		kWkggS: "xhodiby x1jzqe4",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x19p5drm",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "xn4e5mw x1jzqe4",
+		$$css: true
+	},
+	text: {
+		kWkggS: "x1sog3nf",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x16tkg7c x1jzqe4",
+		$$css: true
+	}
+};
+const pressed = {
+	elevated: {
+		kWkggS: "x1d33wxb",
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
+	elevatedToggleSelected: {
+		kWkggS: "x7b25lv x1jzqe4",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "x7b25lv",
+		kGVxlE: "x1gnnqk1",
+		$$css: true
+	},
+	filledToggle: {
+		kWkggS: "x1qdfkg1",
+		$$css: true
+	},
+	filledToggleSelected: {
+		kWkggS: "x7b25lv x1jzqe4",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x123fei2",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "x167cdfs x1jzqe4",
+		$$css: true
+	},
+	text: {
+		kWkggS: "x1dvjsmr",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "xzpauq9",
+		kGVxlE: "x1gnnqk1",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x12o6fnv x1jzqe4",
+		$$css: true
+	}
+};
 const disabledStyles = {
 	elevated: styles.elevatedDisabled,
 	filled: styles.filledDisabled,
@@ -194,129 +432,144 @@ const disabledStyles = {
 	text: styles.textDisabled,
 	tonal: styles.tonalDisabled
 };
+const toggleContainers = {
+	elevated: {
+		selected: "elevatedToggleSelected",
+		unselected: "elevated"
+	},
+	filled: {
+		selected: "filledToggleSelected",
+		unselected: "filledToggle"
+	},
+	outlined: {
+		selected: "outlinedToggleSelected",
+		unselected: "outlined"
+	},
+	tonal: {
+		selected: "tonalToggleSelected",
+		unselected: "tonal"
+	}
+};
 /**
-* The design's button, at five emphasis levels and five control heights.
-* Given `href` it is a link with the same appearance. Every `aria-*` prop is
-* forwarded to the element; React Aria alone would keep only the labelling
-* ones.
+* The design's button, at five emphasis levels and five control heights,
+* round or square. Given `href` it is a link with the same appearance. Every
+* `aria-*` prop is forwarded to the element; React Aria alone would keep only
+* the labelling ones.
+*
+* Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which
+* reports its state through `aria-pressed` and draws the page's second pair
+* of colour roles for its variant. A toggle takes neither `href` nor the
+* pending props, and a `text` button never toggles.
+*
+* ```tsx
+* <Button defaultSelected variant="tonal">
+*   Label
+* </Button>
+* ```
 */
 function Button$1(t0) {
-	const $ = c(26);
-	const { children, disableRipple: t1, href, isDisabled: t2, isPending: t3, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t4, ref, rel, render, size: t5, target, variant: t6, ...props$1 } = t0;
-	const disableRipple = t1 === void 0 ? false : t1;
-	const isDisabled = t2 === void 0 ? false : t2;
-	const isPending = t3 === void 0 ? false : t3;
-	const pendingLabel = t4 === void 0 ? "Loading" : t4;
-	const size = t5 === void 0 ? "md" : t5;
-	const variant = t6 === void 0 ? "filled" : t6;
-	let t7;
-	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t7 = {
-			onClick,
-			onContextMenu,
-			onPointerCancel,
-			onPointerDown,
-			onPointerLeave,
-			onPointerUp
-		};
-		$[0] = onClick;
-		$[1] = onContextMenu;
-		$[2] = onPointerCancel;
-		$[3] = onPointerDown;
-		$[4] = onPointerLeave;
-		$[5] = onPointerUp;
-		$[6] = t7;
-	} else t7 = $[6];
-	const ripple = useRipple(!disableRipple && !isDisabled && !isPending, t7);
-	let t8;
-	if ($[7] !== size || $[8] !== variant) {
-		t8 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
-		$[7] = size;
-		$[8] = variant;
-		$[9] = t8;
-	} else t8 = $[9];
-	const styleProps = mergeStatefulStyles(t8, props$1);
-	const element = {
-		aria: ariaAttributesOf(props$1),
-		onKeyDown,
-		onKeyUp
-	};
-	let t9;
-	if ($[10] !== ref) {
-		t9 = refCallback(ref);
-		$[10] = ref;
-		$[11] = t9;
-	} else t9 = $[11];
-	const forwarded = t9;
-	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
-		href,
-		isDisabled,
-		ref: forwarded,
-		rel,
-		render: linkRenderer(element),
-		target,
-		...ripple.handlers,
-		...props$1,
-		...styleProps,
-		children: [children, ripple.surface]
-	});
-	const T0 = Button;
-	const t10 = buttonRenderer(element, render);
-	const t11 = ripple.handlers;
-	let t12;
-	if ($[12] !== children || $[13] !== pendingLabel || $[14] !== ripple) {
-		t12 = buttonContent(children, pendingLabel, ripple);
-		$[12] = children;
-		$[13] = pendingLabel;
-		$[14] = ripple;
-		$[15] = t12;
-	} else t12 = $[15];
-	let t13;
-	if ($[16] !== T0 || $[17] !== forwarded || $[18] !== isDisabled || $[19] !== isPending || $[20] !== props$1 || $[21] !== ripple.handlers || $[22] !== styleProps || $[23] !== t10 || $[24] !== t12) {
-		t13 = /* @__PURE__ */ jsx(T0, {
-			isDisabled,
-			isPending,
-			ref: forwarded,
-			render: t10,
-			...t11,
+	const $ = c(33);
+	const { children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape: t1, size: ownSize, target, variant: t2, ...props$1 } = t0;
+	const shape = t1 === void 0 ? "round" : t1;
+	const variant = t2 === void 0 ? "filled" : t2;
+	const group = useContext(ButtonGroupItemContext);
+	const size = ownSize ?? group?.size ?? "md";
+	const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;
+	const press = groupPressHandlers(group, props$1.onPressStart, props$1.onPressEnd);
+	let t3;
+	if ($[0] !== children || $[1] !== icon || $[2] !== size) {
+		t3 = icon === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			...props(styles.icon, iconSizes[size]),
+			children: icon
+		}), children] });
+		$[0] = children;
+		$[1] = icon;
+		$[2] = size;
+		$[3] = t3;
+	} else t3 = $[3];
+	const content = t3;
+	if (inSelectingGroup || variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0)) {
+		let t4;
+		if ($[4] !== group || $[5] !== shape || $[6] !== size || $[7] !== variant) {
+			t4 = variant === "text" ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group);
+			$[4] = group;
+			$[5] = shape;
+			$[6] = size;
+			$[7] = variant;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== content || $[10] !== defaultSelected || $[11] !== isPending || $[12] !== isSelected || $[13] !== onChange || $[14] !== press || $[15] !== props$1 || $[16] !== t4) {
+			t5 = /* @__PURE__ */ jsx(ToggleButtonBase, {
+				...props$1,
+				...press,
+				classes: t4,
+				defaultSelected,
+				isPending,
+				isSelected,
+				onChange,
+				children: content
+			});
+			$[9] = content;
+			$[10] = defaultSelected;
+			$[11] = isPending;
+			$[12] = isSelected;
+			$[13] = onChange;
+			$[14] = press;
+			$[15] = props$1;
+			$[16] = t4;
+			$[17] = t5;
+		} else t5 = $[17];
+		return t5;
+	}
+	let t4;
+	if ($[18] !== group || $[19] !== shape || $[20] !== size || $[21] !== variant) {
+		t4 = buttonClasses(shape, size, variant, group);
+		$[18] = group;
+		$[19] = shape;
+		$[20] = size;
+		$[21] = variant;
+		$[22] = t4;
+	} else t4 = $[22];
+	let t5;
+	if ($[23] !== content || $[24] !== href || $[25] !== isPending || $[26] !== pendingLabel || $[27] !== press || $[28] !== props$1 || $[29] !== rel || $[30] !== t4 || $[31] !== target) {
+		t5 = /* @__PURE__ */ jsx(ButtonBase, {
 			...props$1,
-			...styleProps,
-			children: t12
+			...press,
+			classes: t4,
+			href,
+			isPending,
+			pendingLabel,
+			rel,
+			target,
+			children: content
 		});
-		$[16] = T0;
-		$[17] = forwarded;
-		$[18] = isDisabled;
-		$[19] = isPending;
-		$[20] = props$1;
-		$[21] = ripple.handlers;
-		$[22] = styleProps;
-		$[23] = t10;
-		$[24] = t12;
-		$[25] = t13;
-	} else t13 = $[25];
-	return t13;
+		$[23] = content;
+		$[24] = href;
+		$[25] = isPending;
+		$[26] = pendingLabel;
+		$[27] = press;
+		$[28] = props$1;
+		$[29] = rel;
+		$[30] = t4;
+		$[31] = target;
+		$[32] = t5;
+	} else t5 = $[32];
+	return t5;
+}
+function buttonClasses(shape, size, variant, group) {
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" && squareShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 }
-function buttonContent(children, pendingLabel, ripple) {
-	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "xjp7ctv" },
-				1: { className: "xjp7ctv xlshs6z" }
-			}[!!state.isPending << 0],
-			children
-		}),
-		state.isPending ? /* @__PURE__ */ jsx("span", {
-			className: "x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk",
-			children: /* @__PURE__ */ jsx(ProgressIndicator, {
-				"aria-label": pendingLabel,
-				isIndeterminate: true,
-				size: "1em",
-				tone: "inherit",
-				variant: "circular"
-			})
-		}) : null,
-		ripple.surface
-	] });
+function groupStyles(group, size, state) {
+	if (group === null) return null;
+	return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} + ${group.shift / 2}px)`)];
+}
+function toggleClasses(shape, size, variant, group) {
+	return (state) => {
+		const isSelected = state.isSelected === true;
+		const container = toggleContainers[variant][isSelected ? "selected" : "unselected"];
+		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" && squareShapes[size], isSelected && (shape === "square" ? styles.round : squareShapes[size]), variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+	};
 }
 //#endregion
 export { Button$1 as default };