@bug-on/md3-react 3.0.1 → 3.0.3

package/src/ui/buttons/button-group/button-group.tsx

@@ -0,0 +1,699 @@
+import {
+	AnimatePresence,
+	m,
+	type TargetAndTransition,
+	type Transition,
+} from "motion/react";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+import type { MD3Size } from "../../../types/md3";
+import { Icon } from "../../icon";
+import type { ButtonProps } from "../button";
+import {
+	BUTTON_RADIUS_SPRING,
+	BUTTON_SHAPE_MORPH_SPRING,
+	BUTTON_SIZE_TOKENS,
+} from "../button/button-tokens";
+import {
+	ButtonGroupDefaults,
+	PRESSED_RADIUS_MAP,
+	type ShapeSet,
+} from "./button-group-defaults";
+import type { ButtonGroupProps } from "./types";
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+const PILL_BORDER_RADIUS = 9999;
+const MIN_FLEX_GROW = 0.01;
+const PADDING_EXPAND_MULTIPLIER = 4;
+
+const NAVBAR_INDICATOR_HEIGHT_MAP: Record<string, string> = {
+	xs: "h-[calc(100%-4px)]",
+	sm: "h-[calc(100%-8px)]",
+	md: "h-[calc(100%-12px)]",
+	lg: "h-[calc(100%-16px)]",
+	xl: "h-[calc(100%-24px)]",
+};
+
+const CHECK_ICON_SIZE = 24;
+const CHECK_ICON = <Icon name="check" size={CHECK_ICON_SIZE} weight={700} />;
+
+const CHECK_ICON_GAP_MAP: Record<string, number> = {
+	xs: 6,
+	sm: 8,
+	md: 8,
+	lg: 12,
+	xl: 12,
+};
+
+const CHECK_ICON_MOTION: Transition = {
+	type: "spring",
+	stiffness: 420,
+	damping: 34,
+	mass: 0.75,
+};
+
+const WIDTH_MORPH_SPRING: Transition = {
+	type: "spring",
+	stiffness: 360,
+	damping: 38,
+	mass: 0.85,
+};
+
+const NAVBAR_EXPRESSIVE_SPRING: Transition = {
+	type: "spring",
+	stiffness: 430,
+	damping: 38,
+	mass: 0.8,
+};
+
+// ─── Sub-components ──────────────────────────────────────────────────────────
+
+const AnimatedCheckLabel = React.memo(function AnimatedCheckLabel({
+	selected,
+	size,
+	children,
+}: {
+	selected: boolean;
+	size: string;
+	children: React.ReactNode;
+}) {
+	const gap = CHECK_ICON_GAP_MAP[size] ?? CHECK_ICON_GAP_MAP.sm;
+
+	return (
+		<m.span
+			layout
+			className="inline-flex min-w-0 items-center justify-center whitespace-nowrap align-middle"
+		>
+			<AnimatePresence initial={false}>
+				{selected && (
+					<m.span
+						key="selected-check"
+						aria-hidden="true"
+						initial={{ width: 0, opacity: 0, marginRight: 0, x: -4 }}
+						animate={{
+							width: CHECK_ICON_SIZE,
+							opacity: 1,
+							marginRight: gap,
+							x: 0,
+						}}
+						exit={{ width: 0, opacity: 0, marginRight: 0, x: -4 }}
+						transition={CHECK_ICON_MOTION}
+						className="inline-flex shrink-0 items-center justify-center overflow-hidden"
+						style={{ willChange: "width, opacity, transform, margin-right" }}
+					>
+						<span className="inline-flex h-6 w-6 items-center justify-center">
+							{CHECK_ICON}
+						</span>
+					</m.span>
+				)}
+			</AnimatePresence>
+			<m.span layout="position" className="min-w-0 truncate">
+				{children}
+			</m.span>
+		</m.span>
+	);
+});
+
+const AnimatedNavbarLabel = React.memo(function AnimatedNavbarLabel({
+	show,
+	children,
+}: {
+	show: boolean;
+	children: React.ReactNode;
+}) {
+	return (
+		<AnimatePresence initial={false} mode="popLayout">
+			{show && (
+				<m.span
+					key="navbar-label"
+					initial={{ width: 0, opacity: 0, x: -6 }}
+					animate={{ width: "auto", opacity: 1, x: 0 }}
+					exit={{ width: 0, opacity: 0, x: -6 }}
+					transition={NAVBAR_EXPRESSIVE_SPRING}
+					className="overflow-hidden whitespace-nowrap text-sm font-semibold tracking-[0.01em] ml-2"
+				>
+					{children}
+				</m.span>
+			)}
+		</AnimatePresence>
+	);
+});
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function resolveConnectedShapes(
+	variant: string,
+	orientation: string,
+	isFirst: boolean,
+	isLast: boolean,
+	itemSize: MD3Size,
+): ShapeSet {
+	const defaults = ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
+	if (variant !== "connected") return defaults;
+
+	if (orientation === "horizontal") {
+		if (isFirst && !isLast)
+			return ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
+		if (!isFirst && isLast)
+			return ButtonGroupDefaults.connectedTrailingButtonShapes(itemSize);
+		if (!isFirst && !isLast)
+			return ButtonGroupDefaults.connectedMiddleButtonShapes(itemSize);
+	} else {
+		if (isFirst && !isLast)
+			return ButtonGroupDefaults.connectedTopButtonShapes(itemSize);
+		if (!isFirst && isLast)
+			return ButtonGroupDefaults.connectedBottomButtonShapes(itemSize);
+		if (!isFirst && !isLast)
+			return ButtonGroupDefaults.connectedMiddleButtonShapes(itemSize);
+	}
+
+	return defaults;
+}
+
+interface ResolvedIcon {
+	icon: React.ReactNode;
+	label: React.ReactNode;
+}
+
+function resolveIconAndLabel(
+	element: React.ReactElement<ButtonProps>,
+	isSelected: boolean,
+	itemSize: string,
+	variant: string,
+	showCheck: boolean,
+	iconBehavior: ButtonGroupProps["iconBehavior"],
+	labelBehavior: ButtonGroupProps["labelBehavior"],
+): ResolvedIcon {
+	let icon: React.ReactNode = element.props.icon;
+	let label: React.ReactNode = element.props.children;
+
+	const animateCheckInLabel =
+		showCheck &&
+		iconBehavior !== "none" &&
+		iconBehavior !== "selected" &&
+		label !== undefined;
+
+	if (iconBehavior === "none" || animateCheckInLabel) {
+		icon = undefined;
+	} else if (iconBehavior === "selected") {
+		icon = isSelected ? element.props.icon : undefined;
+	}
+
+	if (labelBehavior === "none") {
+		label = undefined;
+	} else if (labelBehavior === "selected") {
+		label = isSelected ? element.props.children : undefined;
+	}
+
+	if (animateCheckInLabel && label !== undefined) {
+		label = (
+			<AnimatedCheckLabel selected={isSelected} size={itemSize}>
+				{label}
+			</AnimatedCheckLabel>
+		);
+	} else if (variant === "navbar" && label !== undefined) {
+		const showLabel =
+			!labelBehavior ||
+			labelBehavior === "all" ||
+			(labelBehavior === "selected" && isSelected);
+		label = <AnimatedNavbarLabel show={showLabel}>{label}</AnimatedNavbarLabel>;
+	}
+
+	return { icon, label };
+}
+
+interface FlexTargets {
+	flexGrow?: number;
+	paddingInline?: string;
+}
+
+function resolveFlexTargets(
+	variant: string,
+	orientation: string,
+	isSelected: boolean,
+	isPressed: boolean,
+	hasSelected: boolean,
+	count: number,
+	fullWidth: boolean,
+	activeMorphing: boolean,
+	morphingWidth: boolean,
+	expandedRatio: number,
+	basePx: string,
+): FlexTargets {
+	const increment = expandedRatio * PADDING_EXPAND_MULTIPLIER;
+
+	if (activeMorphing) {
+		const isFlexLayout =
+			fullWidth || (variant === "connected" && orientation === "horizontal");
+
+		if (isFlexLayout) {
+			if (isSelected) return { flexGrow: 1 + expandedRatio };
+			if (hasSelected && count > 1)
+				return {
+					flexGrow: Math.max(MIN_FLEX_GROW, 1 - expandedRatio / (count - 1)),
+				};
+			return { flexGrow: 1 };
+		}
+
+		if (isSelected)
+			return { paddingInline: `calc(${basePx} + ${increment}rem)` };
+		if (hasSelected && count > 1) {
+			const decrement = increment / (count - 1);
+			return { paddingInline: `calc(${basePx} - ${decrement}rem)` };
+		}
+		return { paddingInline: basePx };
+	}
+
+	if (morphingWidth && variant === "standard") {
+		if (fullWidth) return { flexGrow: isPressed ? 1 + expandedRatio : 1 };
+		return {
+			paddingInline: isPressed ? `calc(${basePx} + ${increment}rem)` : basePx,
+		};
+	}
+
+	return {};
+}
+
+type MotionOverrides = {
+	animate: TargetAndTransition;
+	whileTap?: TargetAndTransition;
+	transition?: Transition;
+	layout?: boolean | "position" | "size" | "preserve-aspect";
+};
+
+function buildMotionProps(
+	variant: string,
+	isSelected: boolean,
+	isPressed: boolean,
+	itemSize: MD3Size,
+	shapes: ShapeSet,
+	flex: FlexTargets,
+	existingAnimate: TargetAndTransition,
+	existingWhileTap: TargetAndTransition,
+): MotionOverrides {
+	const props: MotionOverrides = { animate: { ...existingAnimate } };
+
+	if (flex.flexGrow !== undefined) {
+		props.animate.flexGrow = flex.flexGrow;
+	}
+	if (flex.paddingInline !== undefined) {
+		props.animate.paddingInline = flex.paddingInline;
+	}
+
+	if (variant === "standard") {
+		const pressedRadius = PRESSED_RADIUS_MAP[itemSize] ?? PRESSED_RADIUS_MAP.sm;
+		const itemSizeTokens =
+			BUTTON_SIZE_TOKENS[itemSize] ?? BUTTON_SIZE_TOKENS.sm;
+		const isSquish = isSelected || isPressed;
+
+		props.animate.borderRadius = isSquish
+			? pressedRadius
+			: itemSizeTokens.roundShapeRadius;
+		props.whileTap = {
+			scale: 0.98,
+			...existingWhileTap,
+		};
+		props.transition = {
+			borderRadius: BUTTON_RADIUS_SPRING,
+			flexGrow: WIDTH_MORPH_SPRING,
+			paddingInline: WIDTH_MORPH_SPRING,
+			layout: WIDTH_MORPH_SPRING,
+			default: BUTTON_SHAPE_MORPH_SPRING,
+		};
+		props.layout = true;
+	}
+
+	if (variant === "connected") {
+		const { tl, tr, br, bl } = isSelected
+			? {
+					tl: PILL_BORDER_RADIUS,
+					tr: PILL_BORDER_RADIUS,
+					br: PILL_BORDER_RADIUS,
+					bl: PILL_BORDER_RADIUS,
+				}
+			: shapes.default;
+
+		props.animate = {
+			...props.animate,
+			borderRadius: undefined,
+			borderTopLeftRadius: tl,
+			borderTopRightRadius: tr,
+			borderBottomRightRadius: br,
+			borderBottomLeftRadius: bl,
+		};
+		props.whileTap = {
+			borderRadius: undefined,
+			borderTopLeftRadius: shapes.pressed.tl,
+			borderTopRightRadius: shapes.pressed.tr,
+			borderBottomRightRadius: shapes.pressed.br,
+			borderBottomLeftRadius: shapes.pressed.bl,
+			...existingWhileTap,
+		};
+		props.transition = {
+			...BUTTON_SHAPE_MORPH_SPRING,
+			flexGrow: WIDTH_MORPH_SPRING,
+			paddingInline: WIDTH_MORPH_SPRING,
+			borderTopLeftRadius: BUTTON_RADIUS_SPRING,
+			borderTopRightRadius: BUTTON_RADIUS_SPRING,
+			borderBottomRightRadius: BUTTON_RADIUS_SPRING,
+			borderBottomLeftRadius: BUTTON_RADIUS_SPRING,
+			layout: WIDTH_MORPH_SPRING,
+		};
+		props.layout = true;
+	}
+
+	if (variant === "navbar") {
+		props.layout = true;
+		props.transition = {
+			layout: WIDTH_MORPH_SPRING,
+			default: BUTTON_SHAPE_MORPH_SPRING,
+		};
+	}
+
+	return props;
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+const ButtonGroupComponent = React.forwardRef<
+	HTMLFieldSetElement,
+	ButtonGroupProps
+>(
+	(
+		{
+			className,
+			variant = "standard",
+			orientation = "horizontal",
+			fullWidth = false,
+			size,
+			morphingWidth = true,
+			activeMorphing = false,
+			itemClassName,
+			expandedRatio = ButtonGroupDefaults.expandedRatio,
+			showCheck = false,
+			children,
+			iconBehavior,
+			labelBehavior,
+			style,
+			...props
+		},
+		ref,
+	) => {
+		const [pressedIndex, setPressedIndex] = React.useState<number | null>(null);
+		const [lockedGroupSize, setLockedGroupSize] = React.useState<number | null>(
+			null,
+		);
+		const layoutIdGroup = React.useId();
+		const rootRef = React.useRef<HTMLFieldSetElement | null>(null);
+
+		const setRootRef = React.useCallback(
+			(node: HTMLFieldSetElement | null) => {
+				rootRef.current = node;
+				if (typeof ref === "function") {
+					ref(node);
+				} else if (ref) {
+					(ref as React.MutableRefObject<HTMLFieldSetElement | null>).current =
+						node;
+				}
+			},
+			[ref],
+		);
+
+		const childrenArray = React.useMemo(
+			() => React.Children.toArray(children).filter(React.isValidElement),
+			[children],
+		);
+		const count = childrenArray.length;
+
+		const groupSizeSignature = React.useMemo(
+			() =>
+				`${childrenArray
+					.map((child, index) => {
+						const element = child as React.ReactElement<ButtonProps>;
+						const label =
+							typeof element.props.children === "string" ||
+							typeof element.props.children === "number"
+								? element.props.children
+								: (element.key ?? index);
+						return [
+							element.key ?? index,
+							element.props.size ?? size ?? "",
+							label,
+							Boolean(element.props.icon),
+							element.props.className ?? "",
+						].join(":");
+					})
+					.join("|")}|${variant}|${orientation}|${showCheck}`,
+			[childrenArray, orientation, showCheck, size, variant],
+		);
+
+		const groupSizeSignatureRef = React.useRef(groupSizeSignature);
+		React.useLayoutEffect(() => {
+			if (groupSizeSignatureRef.current !== groupSizeSignature) {
+				groupSizeSignatureRef.current = groupSizeSignature;
+				setLockedGroupSize(null);
+			}
+		}, [groupSizeSignature]);
+
+		const hasExplicitGroupSize =
+			orientation === "horizontal"
+				? style?.width !== undefined || style?.inlineSize !== undefined
+				: style?.height !== undefined || style?.blockSize !== undefined;
+		const shouldLockGroupSize =
+			activeMorphing && !fullWidth && !hasExplicitGroupSize && count > 1;
+
+		React.useLayoutEffect(() => {
+			if (!shouldLockGroupSize) {
+				if (lockedGroupSize !== null) setLockedGroupSize(null);
+				return;
+			}
+			if (lockedGroupSize !== null) return;
+
+			const node = rootRef.current;
+			if (!node) return;
+
+			const rect = node.getBoundingClientRect();
+			const nextSize = orientation === "horizontal" ? rect.width : rect.height;
+			if (nextSize > 0) {
+				setLockedGroupSize(Math.ceil(nextSize * 100) / 100);
+			}
+		}, [lockedGroupSize, orientation, shouldLockGroupSize]);
+
+		const groupStyle = React.useMemo<React.CSSProperties>(() => {
+			const nextStyle: React.CSSProperties = { ...style };
+			if (shouldLockGroupSize && lockedGroupSize !== null) {
+				if (orientation === "horizontal") {
+					nextStyle.inlineSize = `${lockedGroupSize}px`;
+				} else {
+					nextStyle.blockSize = `${lockedGroupSize}px`;
+				}
+			}
+			return nextStyle;
+		}, [lockedGroupSize, orientation, shouldLockGroupSize, style]);
+
+		const hasSelected = React.useMemo(
+			() =>
+				childrenArray.some(
+					(child) => (child as React.ReactElement<ButtonProps>).props.selected,
+				),
+			[childrenArray],
+		);
+
+		const handlePointerLeaveAndUp = React.useCallback(() => {
+			setPressedIndex(null);
+		}, []);
+
+		return (
+			<fieldset
+				ref={setRootRef}
+				className={cn(
+					"inline-flex p-0 m-0 border-none max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+					orientation === "vertical"
+						? "flex-col items-stretch overflow-y-auto overflow-x-hidden"
+						: "flex-row overflow-x-auto overflow-y-hidden",
+					variant === "standard"
+						? "gap-3"
+						: variant === "navbar"
+							? "gap-1 h-full"
+							: "gap-0.5",
+					fullWidth && "w-full",
+					fullWidth && orientation === "vertical" && "h-full",
+					className,
+				)}
+				style={groupStyle}
+				onPointerLeave={handlePointerLeaveAndUp}
+				onPointerUp={handlePointerLeaveAndUp}
+				{...props}
+			>
+				{childrenArray.map((child, index) => {
+					const element = child as React.ReactElement<ButtonProps>;
+					const isSelected = element.props.selected === true;
+					const isFirst = index === 0;
+					const isLast = index === count - 1;
+					const itemSize = (size || element.props.size || "sm") as MD3Size;
+					const basePx = BUTTON_SIZE_TOKENS[itemSize]?.leadingSpace || "1rem";
+					const isPressed = pressedIndex === index;
+
+					const { icon: explicitIcon, label: explicitLabel } =
+						resolveIconAndLabel(
+							element,
+							isSelected,
+							itemSize,
+							variant,
+							showCheck,
+							iconBehavior,
+							labelBehavior,
+						);
+
+					const shapes = resolveConnectedShapes(
+						variant,
+						orientation,
+						isFirst,
+						isLast,
+						itemSize,
+					);
+
+					const flex = resolveFlexTargets(
+						variant,
+						orientation,
+						isSelected,
+						isPressed,
+						hasSelected,
+						count,
+						fullWidth,
+						activeMorphing,
+						morphingWidth,
+						expandedRatio,
+						basePx,
+					);
+
+					const dynamicStyle: React.CSSProperties = {
+						...element.props.style,
+					} as React.CSSProperties;
+
+					if (flex.flexGrow !== undefined && fullWidth) {
+						dynamicStyle.flexBasis = 0;
+						dynamicStyle.flexShrink = 1;
+						dynamicStyle.minWidth = 0;
+					}
+
+					const existingAnimate =
+						typeof element.props.animate === "object" &&
+						!Array.isArray(element.props.animate)
+							? element.props.animate
+							: {};
+					const existingWhileTap =
+						typeof element.props.whileTap === "object" &&
+						!Array.isArray(element.props.whileTap)
+							? element.props.whileTap
+							: {};
+
+					const motionProps = buildMotionProps(
+						variant,
+						isSelected,
+						isPressed,
+						itemSize,
+						shapes,
+						flex,
+						existingAnimate as TargetAndTransition,
+						existingWhileTap as TargetAndTransition,
+					);
+
+					const connectedClasses =
+						variant === "connected" && isSelected ? "z-20" : "";
+
+					const clonedElement = React.cloneElement(element, {
+						key: element.key ?? index,
+						tabIndex: isFirst ? 0 : -1,
+						size: size || element.props.size,
+						icon: explicitIcon,
+						children: explicitLabel,
+						...(variant === "connected" && {
+							colorStyle: element.props.colorStyle || "tonal",
+							selectedColorStyle: element.props.selectedColorStyle || "filled",
+						}),
+						...(variant === "navbar" && {
+							colorStyle: "text",
+							selectedColorStyle: "text",
+							className: cn(
+								element.props.className,
+								"w-full! h-full! px-3! min-w-0! relative z-20",
+								isSelected
+									? "text-m3-on-secondary-container! hover:bg-transparent! active:bg-transparent!"
+									: "text-m3-on-surface-variant! hover:bg-transparent! active:bg-transparent!",
+								itemClassName,
+							),
+						}),
+						...(variant !== "navbar" && {
+							className: cn(
+								element.props.className,
+								connectedClasses,
+								"focus-visible:z-10 hover:z-10 relative min-w-0",
+								orientation === "vertical" && "w-full",
+								itemClassName,
+							),
+						}),
+						style:
+							variant === "navbar"
+								? { ...dynamicStyle, minWidth: 0 }
+								: dynamicStyle,
+						onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
+							setPressedIndex(index);
+							if (element.props.onPointerDown) element.props.onPointerDown(e);
+						},
+						...motionProps,
+					} as Partial<ButtonProps>);
+
+					if (variant === "navbar") {
+						const indicatorHeight =
+							NAVBAR_INDICATOR_HEIGHT_MAP[itemSize] || "h-[calc(100%-8px)]";
+
+						return (
+							<m.div
+								layout
+								whileTap={{ scale: 0.96 }}
+								transition={NAVBAR_EXPRESSIVE_SPRING}
+								key={element.key ?? index}
+								className="group relative h-full flex items-center justify-center"
+							>
+								<div
+									className="absolute inset-0 flex items-center justify-center pointer-events-none"
+									style={{ zIndex: 1 }}
+								>
+									<div
+										className={cn(
+											"absolute inset-x-0.5 bg-m3-on-surface-variant/8 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+											indicatorHeight,
+										)}
+										style={{ borderRadius: PILL_BORDER_RADIUS }}
+									/>
+									<AnimatePresence>
+										{isSelected && (
+											<m.div
+												layoutId={`navbar-active-indicator-${layoutIdGroup}`}
+												className={cn(
+													"absolute inset-x-0.5 bg-m3-secondary-container",
+													indicatorHeight,
+												)}
+												style={{ borderRadius: PILL_BORDER_RADIUS }}
+												transition={NAVBAR_EXPRESSIVE_SPRING}
+											/>
+										)}
+									</AnimatePresence>
+								</div>
+								{clonedElement}
+							</m.div>
+						);
+					}
+
+					return clonedElement;
+				})}
+			</fieldset>
+		);
+	},
+);
+
+ButtonGroupComponent.displayName = "ButtonGroup";
+
+export const ButtonGroup = React.memo(ButtonGroupComponent);

package/src/ui/buttons/button-group/index.ts

@@ -0,0 +1,8 @@
+export { ButtonGroup } from "./button-group";
+export { ButtonGroupDefaults } from "./button-group-defaults";
+export { BUTTON_GROUP_TOKENS } from "./button-group-tokens";
+export type {
+	ButtonGroupOrientation,
+	ButtonGroupProps,
+	ButtonGroupVariant,
+} from "./types";