@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/toggle/toggle.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import {
+	Separator as BaseSeparator,
+	type SeparatorProps as BaseSeparatorProps,
+} from "@base-ui/react/separator";
+import {
+	Toggle as BaseToggle,
+	type ToggleProps as BaseToggleProps,
+} from "@base-ui/react/toggle";
+import {
+	ToggleGroup as BaseToggleGroup,
+	type ToggleGroupProps as BaseToggleGroupProps,
+} from "@base-ui/react/toggle-group";
+import { props } from "@stylexjs/stylex";
+import { createContext, useContext } from "react";
+import { controlLabel } from "../../control-label";
+import { buttonStyles } from "../button/button.styles";
+import { ToolbarOrientationContext } from "../toolbar/toolbar-context";
+import { toggleStyles } from "./toggle.styles";
+
+type AccessibleIconName =
+	| { "aria-label": string; "aria-labelledby"?: string }
+	| { "aria-label"?: string; "aria-labelledby": string };
+
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize =
+	| "default"
+	| "icon"
+	| "icon-lg"
+	| "icon-sm"
+	| "lg"
+	| "sm";
+
+type SharedToggleProps<Value extends string> = Omit<
+	BaseToggleProps<Value>,
+	"className" | "nativeButton" | "ref" | "render" | "style"
+> & {
+	ref?: BaseToggleProps<Value>["ref"];
+	variant?: ToggleVariant;
+};
+
+export type ToggleProps<Value extends string = string> =
+	SharedToggleProps<Value> &
+		(
+			| {
+					size?: Exclude<ToggleSize, "icon" | "icon-lg" | "icon-sm">;
+			  }
+			| ({
+					size: "icon" | "icon-lg" | "icon-sm";
+			  } & AccessibleIconName)
+		);
+
+export type ToggleGroupProps<Value extends string = string> = Omit<
+	BaseToggleGroupProps<Value>,
+	"className" | "ref" | "render" | "style"
+> & {
+	ref?: BaseToggleGroupProps<Value>["ref"];
+	size?: ToggleSize;
+	variant?: ToggleVariant;
+};
+
+interface ToggleContextValue {
+	orientation: "horizontal" | "vertical";
+	size: ToggleSize;
+	variant: ToggleVariant;
+}
+
+const defaultToggleContext: ToggleContextValue = {
+	orientation: "horizontal",
+	size: "default",
+	variant: "default",
+};
+const ToggleContext = createContext(defaultToggleContext);
+
+const sizeStyles = {
+	default: buttonStyles.defaultSize,
+	icon: buttonStyles.icon,
+	"icon-lg": buttonStyles["icon-lg"],
+	"icon-sm": buttonStyles["icon-sm"],
+	lg: buttonStyles.lg,
+	sm: buttonStyles.sm,
+};
+
+const orientationStyles = {
+	horizontal: toggleStyles.horizontal,
+	vertical: toggleStyles.vertical,
+};
+
+export function Toggle<Value extends string = string>({
+	children,
+	ref: forwardedRef = undefined,
+	size,
+	type,
+	variant,
+	...rest
+}: ToggleProps<Value>) {
+	const group = useContext(ToggleContext);
+	const resolvedSize = size ?? group.size;
+	const resolvedVariant = variant ?? group.variant;
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "style");
+	Reflect.deleteProperty(rest, "render");
+	Reflect.deleteProperty(rest, "nativeButton");
+
+	return (
+		<BaseToggle
+			{...rest}
+			data-size={resolvedSize}
+			data-slot="toggle"
+			data-variant={resolvedVariant}
+			ref={forwardedRef}
+			type={type ?? "button"}
+			{...props(
+				toggleStyles.base,
+				resolvedVariant === "outline" && toggleStyles.outline,
+				sizeStyles[resolvedSize],
+				group.variant === "outline" &&
+					resolvedVariant === "outline" &&
+					(group.orientation === "horizontal"
+						? toggleStyles.joinedHorizontal
+						: toggleStyles.joinedVertical),
+				toggleStyles.content
+			)}
+		>
+			{controlLabel(children)}
+		</BaseToggle>
+	);
+}
+
+export function ToggleGroup<Value extends string = string>({
+	children,
+	orientation,
+	ref: forwardedRef = undefined,
+	size = "default",
+	variant = "default",
+	...rest
+}: ToggleGroupProps<Value>) {
+	const toolbarOrientation = useContext(ToolbarOrientationContext);
+	const resolvedOrientation = orientation ?? toolbarOrientation ?? "horizontal";
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "style");
+	Reflect.deleteProperty(rest, "render");
+	return (
+		<ToggleContext value={{ orientation: resolvedOrientation, size, variant }}>
+			<BaseToggleGroup
+				{...rest}
+				data-size={size}
+				data-slot="toggle-group"
+				data-variant={variant}
+				orientation={resolvedOrientation}
+				ref={forwardedRef}
+				{...props(
+					toggleStyles.group,
+					orientationStyles[resolvedOrientation],
+					variant === "outline" && toggleStyles.groupOutline,
+					(size === "sm" || size === "icon-sm") && toggleStyles.smallGroup,
+					toolbarOrientation !== null && toggleStyles.embeddedGroup
+				)}
+			>
+				{children}
+			</BaseToggleGroup>
+		</ToggleContext>
+	);
+}
+
+export const ToggleGroupItem = Toggle;
+export type ToggleGroupItemProps<Value extends string = string> =
+	ToggleProps<Value>;
+export type ToggleGroupSeparatorProps = Omit<
+	BaseSeparatorProps,
+	"className" | "style" | "render"
+>;
+
+export function ToggleGroupSeparator({
+	orientation = "vertical",
+	...rest
+}: ToggleGroupSeparatorProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "style");
+	Reflect.deleteProperty(rest, "render");
+	return (
+		<BaseSeparator
+			{...rest}
+			data-slot="toggle-group-separator"
+			orientation={orientation}
+			{...props(
+				toggleStyles.separator,
+				orientation === "horizontal" && toggleStyles.horizontalSeparator
+			)}
+		/>
+	);
+}

package/src/components/token/token.styles.ts

@@ -0,0 +1,135 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	opacity,
+} from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const tokenStyles = create({
+	action: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		// Tints with the token's own ink, so hover reads in light and dark.
+		backgroundColor: {
+			":hover": {
+				[conditions.canHover]:
+					"color-mix(in oklch, currentColor 6%, transparent)",
+			},
+			default: "transparent",
+		},
+		borderColor: {
+			[conditions.forcedColors]: "ButtonText",
+			default: "transparent",
+		},
+		borderRadius: "inherit",
+		borderStyle: "solid",
+		borderWidth: 0,
+		cursor: "pointer",
+		// Covers the token's border: the hit area is the whole visible chip.
+		inset: `calc(-1 * ${borderWidth.thin}px)`,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: borderWidth.focus,
+		padding: 0,
+		position: "absolute",
+	},
+	adornment: {
+		alignItems: "center",
+		display: "inline-flex",
+		flexShrink: 0,
+		justifyContent: "center",
+		pointerEvents: "none",
+	},
+	disabled: { opacity: opacity.disabled },
+	label: {
+		// Keep glyph ink outside the trimmed cap box inside the overflow clip.
+		marginBlock: "-0.5em",
+		minWidth: 0,
+		overflow: "hidden",
+		paddingBlock: "0.5em",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	lg: { fontSize: fontSize["16"], minHeight: "2rem" },
+	md: { fontSize: fontSize["14"], minHeight: "1.75rem" },
+	remove: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":hover": {
+				[conditions.canHover]:
+					"color-mix(in oklch, currentColor 12%, transparent)",
+			},
+			default: "transparent",
+		},
+		borderRadius: shape.controlRadius,
+		borderWidth: 0,
+		color: "inherit",
+		cursor: "pointer",
+		display: "inline-flex",
+		flexShrink: 0,
+		height: "1.5rem",
+		justifyContent: "center",
+		marginInlineEnd: "-0.25rem",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: borderWidth.focus,
+		padding: 0,
+		position: "relative",
+		width: "1.5rem",
+		zIndex: 1,
+	},
+	root: {
+		alignItems: "center",
+		backgroundColor: colors.controlSurface,
+		borderColor: "transparent",
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "inline-flex",
+		fontFamily: "inherit",
+		fontWeight: fontWeight.medium,
+		gap: space["1"],
+		lineHeight: lineHeight.none,
+		maxWidth: "100%",
+		minWidth: 0,
+		paddingInline: space["1"],
+		position: "relative",
+		verticalAlign: "middle",
+	},
+	sm: { fontSize: fontSize["12"], minHeight: "1.5rem" },
+	tint: (tone: string) => ({
+		backgroundColor: `color-mix(in oklch, ${tone} 18%, ${colors.surface})`,
+		borderColor: `color-mix(in oklch, ${tone} 28%, ${colors.surface})`,
+		color: `color-mix(in oklch, ${tone} 45%, ${colors.content})`,
+	}),
+});

package/src/components/token/token.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type {
+	ComponentPropsWithRef,
+	MouseEventHandler,
+	ReactNode,
+} from "react";
+import type { Closed } from "../../closed";
+import { IconX } from "../../icons";
+import { colors } from "../../styles/colors.stylex";
+import { palette } from "../../styles/palette.stylex";
+import { typographyStyles } from "../../styles/typography.styles";
+import { tokenStyles } from "./token.styles";
+
+export type TokenColor =
+	| "default"
+	| "red"
+	| "orange"
+	| "yellow"
+	| "green"
+	| "teal"
+	| "cyan"
+	| "blue"
+	| "purple"
+	| "pink"
+	| "gray";
+export type TokenSize = "sm" | "md" | "lg";
+export type TokenProps = Omit<
+	Closed<ComponentPropsWithRef<"span">>,
+	"children" | "data-slot" | "onClick" | "role"
+> & {
+	label: string;
+	color?: TokenColor;
+	size?: TokenSize;
+	icon?: ReactNode;
+	endContent?: ReactNode;
+	href?: string;
+	disabled?: boolean;
+	onClick?: MouseEventHandler<HTMLElement>;
+	onRemove?: MouseEventHandler<HTMLElement>;
+};
+const tones = {
+	blue: palette.blue700,
+	cyan: `color-mix(in oklch, ${palette.blue700}, ${palette.teal700})`,
+	default: colors.mutedContent,
+	gray: colors.mutedContent,
+	green: palette.green700,
+	orange: palette.orange700,
+	pink: palette.pink700,
+	purple: palette.violet700,
+	red: palette.rose700,
+	teal: palette.teal700,
+	yellow: palette.amber700,
+};
+const sizes = { lg: tokenStyles.lg, md: tokenStyles.md, sm: tokenStyles.sm };
+
+type ActionProps = Pick<
+	TokenProps,
+	| "label"
+	| "aria-description"
+	| "href"
+	| "disabled"
+	| "onClick"
+	| "aria-pressed"
+>;
+function TokenAction({
+	label,
+	"aria-description": description,
+	href,
+	disabled,
+	onClick,
+	"aria-pressed": pressed,
+}: ActionProps) {
+	if (href) {
+		return (
+			<a
+				aria-description={description}
+				aria-disabled={disabled || undefined}
+				aria-label={label}
+				href={disabled ? undefined : href}
+				onClick={disabled ? undefined : onClick}
+				role={disabled ? "link" : undefined}
+				tabIndex={disabled ? -1 : undefined}
+				{...props(tokenStyles.action)}
+			/>
+		);
+	}
+	return (
+		<button
+			aria-description={description}
+			aria-label={label}
+			aria-pressed={pressed}
+			disabled={disabled}
+			onClick={onClick}
+			type="button"
+			{...props(tokenStyles.action)}
+		/>
+	);
+}
+
+function TokenContents({
+	actionable,
+	icon,
+	endContent,
+	disabled,
+	label,
+	onRemove,
+}: Pick<
+	TokenProps,
+	"icon" | "endContent" | "disabled" | "label" | "onRemove"
+> & { actionable: boolean }) {
+	return (
+		<>
+			{" "}
+			{icon ? (
+				<span aria-hidden {...props(tokenStyles.adornment)}>
+					{icon}
+				</span>
+			) : null}
+			<span
+				aria-hidden={actionable}
+				{...props(tokenStyles.label, typographyStyles.controlLabel)}
+			>
+				{label}
+			</span>
+			{endContent ? (
+				<span {...props(tokenStyles.adornment)}>{endContent}</span>
+			) : null}
+			{onRemove ? (
+				<button
+					aria-label={`Remove ${label}`}
+					disabled={disabled}
+					onClick={onRemove}
+					type="button"
+					{...props(tokenStyles.remove)}
+				>
+					<IconX aria-hidden size={12} />
+				</button>
+			) : null}
+		</>
+	);
+}
+
+function getTokenStyles(color: TokenColor, size: TokenSize, disabled: boolean) {
+	return props(
+		tokenStyles.root,
+		sizes[size],
+		color !== "default" && tokenStyles.tint(tones[color]),
+		disabled && tokenStyles.disabled
+	);
+}
+
+export function Token({
+	label,
+	color = "default",
+	size = "md",
+	icon,
+	endContent,
+	"aria-description": description,
+	href,
+	disabled = false,
+	onClick,
+	onRemove,
+	ref,
+	"aria-pressed": pressed,
+	...rest
+}: TokenProps) {
+	if (!label.trim()) {
+		throw new TypeError("Token requires a non-empty label.");
+	}
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const actionable = Boolean(href || onClick);
+	return (
+		<span
+			{...rest}
+			aria-description={description}
+			data-color={color}
+			data-disabled={disabled || undefined}
+			data-size={size}
+			data-slot="token"
+			ref={ref}
+			title={label}
+			{...getTokenStyles(color, size, disabled)}
+		>
+			{actionable ? (
+				<TokenAction
+					aria-description={description}
+					aria-pressed={pressed}
+					disabled={disabled}
+					href={href}
+					label={label}
+					onClick={onClick}
+				/>
+			) : null}
+			<TokenContents
+				actionable={actionable}
+				disabled={disabled}
+				endContent={endContent}
+				icon={icon}
+				label={label}
+				onRemove={onRemove}
+			/>
+		</span>
+	);
+}

package/src/components/tool-call/tool-call-group.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, type RefCallback, useState } from "react";
+import type { Closed } from "../../closed";
+import { IconChevronDown, IconTool } from "../../icons";
+import { Arrivals, MotionScope, Pop, Rise } from "../../motion";
+import { typeRoles } from "../../styles/typography.styles";
+import { formatShortSeconds, useElapsed } from "../../use-elapsed";
+import { agentThinkingStyles } from "../agent-thinking/agent-thinking.styles";
+import {
+	Collapsible,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+} from "../collapsible/collapsible";
+import { Spinner } from "../spinner/spinner";
+import { ToolCall, type ToolCallProps } from "./tool-call";
+import { toolCallStyles as styles } from "./tool-call.styles";
+
+export type ToolCallGroupCall = Omit<ToolCallProps, "ref"> & {
+	/** A stable id for the call, such as the SDK's toolCallId. */
+	id: string;
+};
+
+export type ToolCallGroupProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "data-slot" | "role"
+> & {
+	calls: readonly ToolCallGroupCall[];
+	/** Seconds the calls took together, for a turn loaded from history. */
+	duration?: number;
+};
+
+function Summary({
+	active,
+	calls,
+	markEnd,
+	markStart,
+	seconds,
+}: {
+	active: boolean;
+	calls: readonly ToolCallGroupCall[];
+	markEnd: RefCallback<HTMLElement>;
+	markStart: RefCallback<HTMLElement>;
+	seconds: number | undefined;
+}) {
+	if (active) {
+		return (
+			<span ref={markStart} {...props(agentThinkingStyles.stage)}>
+				Using tools…
+			</span>
+		);
+	}
+	const failed = calls.filter((call) => call.status === "error").length;
+	return (
+		<span ref={markEnd}>
+			Used {calls.length} {calls.length === 1 ? "tool" : "tools"}
+			{failed > 0 ? (
+				<span {...props(styles.groupFailed)}> · {failed} failed</span>
+			) : null}
+			{seconds === undefined ? null : (
+				<span {...props(styles.groupMeta)}>
+					{" "}
+					· {formatShortSeconds(seconds)}
+				</span>
+			)}
+		</span>
+	);
+}
+
+/**
+ * Several tool calls under one header: "Using tools…" while any of them
+ * works or waits, then folded into "Used 3 tools · 1 failed · 2.7s".
+ */
+export function ToolCallGroup({
+	calls,
+	duration,
+	ref: forwardedRef,
+	...rest
+}: ToolCallGroupProps) {
+	const elapsed = useElapsed();
+	const active = calls.some(
+		(call) => call.status === "running" || call.status === "approval"
+	);
+	// null until the reader opens or closes it themselves. Until then it
+	// stays open while calls work and folds into the summary once they finish.
+	const [open, setOpen] = useState<boolean | null>(null);
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	return (
+		<div
+			{...rest}
+			data-slot="tool-call-group"
+			data-status={active ? "running" : "complete"}
+			ref={forwardedRef}
+			{...props(styles.root)}
+		>
+			<MotionScope>
+				<Collapsible
+					onOpenChange={setOpen}
+					open={open === null ? active : open}
+					render={<div {...props(styles.clip)} />}
+				>
+					<CollapsibleTrigger
+						render={
+							<button type="button" {...props(typeRoles.ui, styles.row)} />
+						}
+					>
+						{/* The icon keeps its place, so the summary does not shift. */}
+						<Pop change={active ? "active" : "done"} look={styles.icon}>
+							{active ? (
+								<Spinner aria-hidden="true" />
+							) : (
+								<IconTool aria-hidden="true" size={16} />
+							)}
+						</Pop>
+						<Rise change={active ? "active" : "done"} look={styles.title}>
+							<Summary
+								active={active}
+								calls={calls}
+								markEnd={elapsed.markEnd}
+								markStart={elapsed.markStart}
+								seconds={duration ?? elapsed.seconds}
+							/>
+						</Rise>
+						<IconChevronDown
+							aria-hidden="true"
+							size={14}
+							{...props(styles.chevron)}
+						/>
+					</CollapsibleTrigger>
+					<CollapsiblePanel>
+						<div {...props(styles.panel, styles.groupCalls)}>
+							{/* Calls added while the group is on screen grow in. */}
+							<Arrivals>
+								{calls.map(({ id, ...call }) => (
+									<ToolCall key={id} {...call} />
+								))}
+							</Arrivals>
+						</div>
+					</CollapsiblePanel>
+				</Collapsible>
+			</MotionScope>
+		</div>
+	);
+}