@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/icon-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, toggleButtonRenderer } from "../../render/aria.js";
+import { sizing } 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, ButtonContext, Link, ToggleButton, useSlottedContext } from "react-aria-components";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroupStateContext } from "react-aria-components";
 //#region src/components/icon-button/index.tsx
 const styles = {
 	base: {
@@ -26,9 +26,9 @@ const styles = {
 		kmVPX3: "x1717udv",
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
-		kIyJzY: "x1iuyhda",
-		k1ekBW: "xb5u718",
-		kAMwcw: "x15l9jch",
+		kIyJzY: "x9w8ftz",
+		k1ekBW: "x1n0k3g7",
+		kAMwcw: "x1hu1jz6",
 		$$css: true
 	},
 	disabled: {
@@ -37,7 +37,7 @@ const styles = {
 		$$css: true
 	},
 	filled: {
-		kWkggS: "xpky1to xyf7a0q xnety89",
+		kWkggS: "xnety89",
 		kMwMTN: "xwjo7ld",
 		$$css: true
 	},
@@ -48,26 +48,18 @@ const styles = {
 		$$css: true
 	},
 	filledToggle: {
-		kWkggS: "xbck2fw x1h1ujn1 x1mjdul6",
+		kWkggS: "x1mjdul6",
 		kMwMTN: "x1w5n3ug",
 		$$css: true
 	},
 	filledToggleSelected: {
-		kWkggS: "xpky1to xyf7a0q xnety89 x1jzqe4",
+		kWkggS: "xnety89 x1jzqe4",
 		kMwMTN: "xwjo7ld x1k5gbb1",
 		$$css: true
 	},
-	label: {
-		k1xSpc: "xjp7ctv",
-		$$css: true
-	},
-	labelPending: {
-		k33iCy: "xlshs6z",
-		$$css: true
-	},
 	lg: {
 		kZKoxP: "xs1ryiz",
-		kaIpWk: "xtt5grq x1dkaolv",
+		kaIpWk: "x1dkaolv",
 		kGuDYH: "x1pvqxga",
 		kzqmXN: "x1fh0d6s",
 		$$css: true
@@ -77,13 +69,13 @@ const styles = {
 		kFcpXp: "x1q69gdh",
 		kEoFBp: "x1hmns74",
 		kZKoxP: "x1rv7mn0",
-		kaIpWk: "x1r81nxe x1dkaolv",
+		kaIpWk: "x1dkaolv",
 		kGuDYH: "x1pvqxga",
 		kzqmXN: "x1eujcsb",
 		$$css: true
 	},
 	outlined: {
-		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kVAM5u: "x133yhug",
 		ksu8eU: "x1y0btm7",
 		kMwMTN: "x1w5n3ug",
@@ -96,21 +88,13 @@ const styles = {
 		$$css: true
 	},
 	outlinedToggleSelected: {
-		kWkggS: "x1q27o6y x1v1ylhe x1c5gpgi x1jzqe4",
+		kWkggS: "x1c5gpgi x1jzqe4",
 		kVAM5u: "x9r1u3d x1n2ykn",
 		kMwMTN: "x1girmi0 x1k5gbb1",
 		$$css: true
 	},
-	pending: {
-		kGNEyG: "x6s0dn4",
-		k1xSpc: "x78zum5",
-		kpwlN0: "x10a8y8t",
-		kjj79g: "xl56j7k",
-		kVAEAm: "x10l6tqk",
-		$$css: true
-	},
 	standard: {
-		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kMzoRj: "xc342km",
 		kMwMTN: "x1w5n3ug",
 		$$css: true
@@ -121,13 +105,13 @@ const styles = {
 		$$css: true
 	},
 	standardToggleSelected: {
-		kWkggS: "x12vej0r x14dcer4 xjbqb8w x1jzqe4",
+		kWkggS: "xjbqb8w x1jzqe4",
 		kMzoRj: "xc342km",
 		kMwMTN: "x1mxwv8y x1k5gbb1",
 		$$css: true
 	},
 	tonal: {
-		kWkggS: "xnqsvhv xlizrex x15dekr4",
+		kWkggS: "x15dekr4",
 		kMwMTN: "x1sawysd",
 		$$css: true
 	},
@@ -138,13 +122,13 @@ const styles = {
 		$$css: true
 	},
 	tonalToggleSelected: {
-		kWkggS: "x1q841l6 x1ofvui0 x167r6xl x1jzqe4",
+		kWkggS: "x167r6xl x1jzqe4",
 		kMwMTN: "x1lba3jz x1k5gbb1",
 		$$css: true
 	},
 	xl: {
 		kZKoxP: "x1xaimp3",
-		kaIpWk: "x11f6t2b x1dkaolv",
+		kaIpWk: "x1dkaolv",
 		kGuDYH: "x1s3cmhv",
 		kzqmXN: "xszbqgh",
 		$$css: true
@@ -154,19 +138,133 @@ const styles = {
 		kFcpXp: "x1n6cgzf",
 		kEoFBp: "x1hmns74",
 		kZKoxP: "xig8zya",
-		kaIpWk: "x1r81nxe x1dkaolv",
+		kaIpWk: "x1dkaolv",
 		kGuDYH: "xwsyq91",
 		kzqmXN: "x11ts1a5",
 		$$css: true
 	},
 	xxl: {
 		kZKoxP: "x173yhrv",
-		kaIpWk: "x11f6t2b x1dkaolv",
+		kaIpWk: "x1dkaolv",
 		kGuDYH: "x1tgwohi",
 		kzqmXN: "xz1kjiq",
 		$$css: true
 	}
 };
+const hovered = {
+	filled: {
+		kWkggS: "xo1ct44",
+		$$css: true
+	},
+	filledToggle: {
+		kWkggS: "xtxe0ya",
+		$$css: true
+	},
+	filledToggleSelected: {
+		kWkggS: "xo1ct44 x1jzqe4",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x14noynh",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "x1hxzsxp x1jzqe4",
+		$$css: true
+	},
+	standard: {
+		kWkggS: "x14noynh",
+		$$css: true
+	},
+	standardToggleSelected: {
+		kWkggS: "x659ado x1jzqe4",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1fctxn6",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x12r95rf x1jzqe4",
+		$$css: true
+	}
+};
+const focused = {
+	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
+	},
+	standard: {
+		kWkggS: "x19p5drm",
+		$$css: true
+	},
+	standardToggleSelected: {
+		kWkggS: "x1sog3nf x1jzqe4",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x16tkg7c x1jzqe4",
+		$$css: true
+	}
+};
+const pressed = {
+	filled: {
+		kWkggS: "x7b25lv",
+		$$css: true
+	},
+	filledToggle: {
+		kWkggS: "x1qdfkg1",
+		$$css: true
+	},
+	filledToggleSelected: {
+		kWkggS: "x7b25lv x1jzqe4",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x123fei2",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "x167cdfs x1jzqe4",
+		$$css: true
+	},
+	standard: {
+		kWkggS: "x123fei2",
+		$$css: true
+	},
+	standardToggleSelected: {
+		kWkggS: "x1dvjsmr x1jzqe4",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "xzpauq9",
+		$$css: true
+	},
+	tonalToggleSelected: {
+		kWkggS: "x12o6fnv x1jzqe4",
+		$$css: true
+	}
+};
 const outlineWidths = {
 	lg: {
 		kMzoRj: "xmkeg23",
@@ -189,6 +287,18 @@ const outlineWidths = {
 		$$css: true
 	}
 };
+const EDGES = {
+	lg: sizing.controlLg,
+	md: sizing.controlSm,
+	xl: sizing.controlXl,
+	xs: sizing.controlXs,
+	xxl: sizing.controlXxl
+};
+const _temp = {
+	kzqmXN: "x1uyokj7",
+	"$$css": true
+};
+const shifted = { width: (value) => [_temp, { "--x-inlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(value) }] };
 const selectedShapes = {
 	lg: {
 		kaIpWk: "x62ce2h",
@@ -229,33 +339,33 @@ const toggleStyles = {
 		unselected: styles.tonal
 	}
 };
+const toggleContainers = {
+	filled: {
+		selected: "filledToggleSelected",
+		unselected: "filledToggle"
+	},
+	outlined: {
+		selected: "outlinedToggleSelected",
+		unselected: "outlined"
+	},
+	standard: {
+		selected: "standardToggleSelected",
+		unselected: "standard"
+	},
+	tonal: {
+		selected: "tonalToggleSelected",
+		unselected: "tonal"
+	}
+};
 const disabledStyles = {
 	filled: styles.filledDisabled,
 	outlined: styles.outlinedDisabled,
 	standard: styles.standardDisabled,
 	tonal: styles.tonalDisabled
 };
-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.width(`calc(${EDGES[size]} + ${group.shift}px)`)];
 }
 /**
 * A button that is an icon, at five control heights. Given `href` it is a
@@ -274,131 +384,84 @@ function buttonContent(children, pendingLabel, ripple) {
 * ```
 */
 function IconButton(t0) {
-	const $ = c(29);
-	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isPending: t2, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t3, ref, rel, render, size: t4, target, variant: t5, ...props$1 } = t0;
-	const disableRipple = t1 === void 0 ? false : t1;
-	const isPending = t2 === void 0 ? false : t2;
-	const pendingLabel = t3 === void 0 ? "Loading" : t3;
-	const size = t4 === void 0 ? "md" : t4;
-	const variant = t5 === void 0 ? "standard" : t5;
-	const context = useSlottedContext(ButtonContext, props$1.slot);
-	const disabled = isDisabled ?? context?.isDisabled ?? false;
-	let t6;
-	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t6 = {
-			onClick,
-			onContextMenu,
-			onPointerCancel,
-			onPointerDown,
-			onPointerLeave,
-			onPointerUp
-		};
-		$[0] = onClick;
-		$[1] = onContextMenu;
-		$[2] = onPointerCancel;
-		$[3] = onPointerDown;
-		$[4] = onPointerLeave;
-		$[5] = onPointerUp;
-		$[6] = t6;
-	} else t6 = $[6];
-	const ripple = useRipple(!disableRipple && !disabled && !isPending, t6);
-	const element = {
-		aria: ariaAttributesOf(props$1),
-		onKeyDown,
-		onKeyUp
-	};
-	let t7;
-	if ($[7] !== ref) {
-		t7 = refCallback(ref);
-		$[7] = ref;
-		$[8] = t7;
-	} else t7 = $[8];
-	const forwarded = t7;
-	if (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
-		const t8 = toggleButtonRenderer(element, render);
-		const t9 = ripple.handlers;
-		const t10 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
-		let t11;
-		if ($[9] !== children || $[10] !== ripple) {
-			t11 = toggleContent(children, ripple);
-			$[9] = children;
-			$[10] = ripple;
-			$[11] = t11;
-		} else t11 = $[11];
-		return /* @__PURE__ */ jsx(ToggleButton, {
-			defaultSelected,
-			isDisabled: disabled,
-			isSelected,
-			onChange,
-			ref: forwarded,
-			render: t8,
-			...t9,
-			...props$1,
-			...t10,
-			children: t11
-		});
+	const $ = c(25);
+	const { defaultSelected, href, isPending, isSelected, onChange, pendingLabel, rel, size: ownSize, target, variant: t1, ...props } = t0;
+	const variant = t1 === void 0 ? "standard" : t1;
+	const group = useContext(ButtonGroupItemContext);
+	const size = ownSize ?? group?.size ?? "md";
+	const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;
+	const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);
+	if (inSelectingGroup || defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
+		let t2;
+		if ($[0] !== group || $[1] !== size || $[2] !== variant) {
+			t2 = toggleStyleProps(size, variant, group);
+			$[0] = group;
+			$[1] = size;
+			$[2] = variant;
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== defaultSelected || $[5] !== isPending || $[6] !== isSelected || $[7] !== onChange || $[8] !== press || $[9] !== props || $[10] !== t2) {
+			t3 = /* @__PURE__ */ jsx(ToggleButtonBase, {
+				...props,
+				...press,
+				classes: t2,
+				defaultSelected,
+				isPending,
+				isSelected,
+				onChange
+			});
+			$[4] = defaultSelected;
+			$[5] = isPending;
+			$[6] = isSelected;
+			$[7] = onChange;
+			$[8] = press;
+			$[9] = props;
+			$[10] = t2;
+			$[11] = t3;
+		} else t3 = $[11];
+		return t3;
 	}
-	let t8;
-	if ($[12] !== size || $[13] !== variant) {
-		t8 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
-		$[12] = size;
-		$[13] = variant;
-		$[14] = t8;
-	} else t8 = $[14];
-	const styleProps = mergeStatefulStyles(t8, props$1);
-	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
-		href,
-		isDisabled: disabled,
-		ref: forwarded,
-		rel,
-		render: linkRenderer(element),
-		target,
-		...ripple.handlers,
-		...props$1,
-		...styleProps,
-		children: [children, ripple.surface]
-	});
-	const T0 = Button;
-	const t9 = buttonRenderer(element, render);
-	const t10 = ripple.handlers;
-	let t11;
-	if ($[15] !== children || $[16] !== pendingLabel || $[17] !== ripple) {
-		t11 = buttonContent(children, pendingLabel, ripple);
-		$[15] = children;
-		$[16] = pendingLabel;
-		$[17] = ripple;
-		$[18] = t11;
-	} else t11 = $[18];
-	let t12;
-	if ($[19] !== T0 || $[20] !== disabled || $[21] !== forwarded || $[22] !== isPending || $[23] !== props$1 || $[24] !== ripple.handlers || $[25] !== styleProps || $[26] !== t11 || $[27] !== t9) {
-		t12 = /* @__PURE__ */ jsx(T0, {
-			isDisabled: disabled,
+	let t2;
+	if ($[12] !== group || $[13] !== size || $[14] !== variant) {
+		t2 = iconButtonClasses(size, variant, group);
+		$[12] = group;
+		$[13] = size;
+		$[14] = variant;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== href || $[17] !== isPending || $[18] !== pendingLabel || $[19] !== press || $[20] !== props || $[21] !== rel || $[22] !== t2 || $[23] !== target) {
+		t3 = /* @__PURE__ */ jsx(ButtonBase, {
+			...props,
+			...press,
+			classes: t2,
+			href,
 			isPending,
-			ref: forwarded,
-			render: t9,
-			...t10,
-			...props$1,
-			...styleProps,
-			children: t11
+			pendingLabel,
+			rel,
+			target
 		});
-		$[19] = T0;
-		$[20] = disabled;
-		$[21] = forwarded;
-		$[22] = isPending;
-		$[23] = props$1;
-		$[24] = ripple.handlers;
-		$[25] = styleProps;
-		$[26] = t11;
-		$[27] = t9;
-		$[28] = t12;
-	} else t12 = $[28];
-	return t12;
+		$[16] = href;
+		$[17] = isPending;
+		$[18] = pendingLabel;
+		$[19] = press;
+		$[20] = props;
+		$[21] = rel;
+		$[22] = t2;
+		$[23] = target;
+		$[24] = t3;
+	} else t3 = $[24];
+	return t3;
 }
-function toggleContent(children, ripple) {
-	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });
+function iconButtonClasses(size, variant, group) {
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));
 }
-function toggleStyleProps(size, variant) {
-	return (state) => props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);
+function toggleStyleProps(size, variant, group) {
+	return (state) => {
+		const container = toggleContainers[variant][state.isSelected === true ? "selected" : "unselected"];
+		return props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));
+	};
 }
 //#endregion
 export { IconButton as default };