@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/toolbar/toolbar.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import {
+	Toolbar as BaseToolbar,
+	type ToolbarButtonProps as BaseToolbarButtonProps,
+	type ToolbarGroupProps as BaseToolbarGroupProps,
+	type ToolbarInputProps as BaseToolbarInputProps,
+	type ToolbarLinkProps as BaseToolbarLinkProps,
+	type ToolbarRootProps as BaseToolbarRootProps,
+	type ToolbarSeparatorProps as BaseToolbarSeparatorProps,
+} from "@base-ui/react/toolbar";
+import { props } from "@stylexjs/stylex";
+import { type ReactElement, type ReactNode, useContext } from "react";
+import type { Closed } from "../../closed";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot } from "../../render-utils";
+import type { ButtonProps } from "../button/button";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+import { toolbarStyles } from "./toolbar.styles";
+import { ToolbarOrientationContext } from "./toolbar-context";
+
+type ClosedProps<T> = Omit<Closed<T>, "data-slot" | "ref" | "render" | "role">;
+
+function stripStyleProps<T extends object>(target: T): T {
+	Reflect.deleteProperty(target, "className");
+	Reflect.deleteProperty(target, "data-slot");
+	Reflect.deleteProperty(target, "style");
+	return target;
+}
+
+function stripClosedProps<T extends object>(target: T): T {
+	const safe = stripStyleProps(target);
+	Reflect.deleteProperty(safe, "render");
+	Reflect.deleteProperty(safe, "role");
+	return safe;
+}
+
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown
+	? Omit<T, K>
+	: never;
+
+export type ToolbarProps = ClosedProps<BaseToolbarRootProps> & {
+	ref?: BaseToolbarRootProps["ref"];
+};
+
+export type ToolbarGroupProps = ClosedProps<BaseToolbarGroupProps> & {
+	ref?: BaseToolbarGroupProps["ref"];
+};
+
+export type ToolbarLinkProps = ClosedProps<BaseToolbarLinkProps> & {
+	ref?: BaseToolbarLinkProps["ref"];
+};
+
+export type ToolbarSeparatorProps = Omit<
+	Closed<BaseToolbarSeparatorProps>,
+	"data-slot" | "ref" | "render" | "role"
+> & {
+	ref?: BaseToolbarSeparatorProps["ref"];
+};
+
+type ToolbarButtonBaseProps = Omit<
+	Closed<BaseToolbarButtonProps>,
+	"children" | "data-slot" | "ref" | "render"
+> & {
+	children?: ReactNode;
+	ref?: BaseToolbarButtonProps["ref"];
+};
+
+export type ToolbarButtonProps = ToolbarButtonBaseProps &
+	(
+		| (DistributiveOmit<
+				ButtonProps,
+				"children" | "nativeButton" | "ref" | "render"
+		  > & {
+				render?: never;
+		  })
+		| { render: ReactElement }
+	);
+
+export function Toolbar({
+	children,
+	orientation = "horizontal",
+	ref: forwardedRef,
+	...rest
+}: ToolbarProps) {
+	return (
+		<ToolbarOrientationContext value={orientation}>
+			<BaseToolbar.Root
+				{...stripClosedProps(rest)}
+				data-slot="toolbar"
+				orientation={orientation}
+				ref={forwardedRef}
+				{...props(
+					toolbarStyles.root,
+					orientation === "horizontal"
+						? toolbarStyles.horizontal
+						: toolbarStyles.vertical
+				)}
+			>
+				{children}
+			</BaseToolbar.Root>
+		</ToolbarOrientationContext>
+	);
+}
+
+export function ToolbarButton(toolbarButtonProps: ToolbarButtonProps) {
+	const { children, ref: forwardedRef, render, ...rest } = toolbarButtonProps;
+	const safeProps = stripStyleProps(rest);
+
+	if (toolbarButtonProps.render) {
+		return (
+			<BaseToolbar.Button
+				{...safeProps}
+				data-slot="toolbar-button"
+				ref={forwardedRef}
+				render={protectRenderSlot("toolbar-button", render)}
+			>
+				{children}
+			</BaseToolbar.Button>
+		);
+	}
+
+	const defaultButtonProps = toolbarButtonProps;
+	const { loading, size, variant, ...buttonProps } = defaultButtonProps;
+	const buttonRenderProps = {
+		"aria-label": defaultButtonProps["aria-label"],
+		"aria-labelledby": defaultButtonProps["aria-labelledby"],
+		focusableWhenDisabled: defaultButtonProps.focusableWhenDisabled ?? true,
+		loading,
+		size: size ?? "default",
+		variant: variant ?? "ghost",
+	} as ButtonProps;
+
+	return (
+		<BaseToolbar.Button
+			{...stripStyleProps(buttonProps)}
+			data-slot="toolbar-button"
+			ref={forwardedRef}
+			render={<Button {...buttonRenderProps} />}
+		>
+			{children}
+		</BaseToolbar.Button>
+	);
+}
+
+export function ToolbarGroup({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ToolbarGroupProps) {
+	const orientation = useContext(ToolbarOrientationContext);
+	return (
+		<BaseToolbar.Group
+			{...stripClosedProps(rest)}
+			data-slot="toolbar-group"
+			ref={forwardedRef}
+			{...props(
+				toolbarStyles.group,
+				orientation === "vertical" && toolbarStyles.vertical
+			)}
+		>
+			{children}
+		</BaseToolbar.Group>
+	);
+}
+
+export function ToolbarLink({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ToolbarLinkProps) {
+	return (
+		<BaseToolbar.Link
+			{...stripClosedProps(rest)}
+			data-slot="toolbar-link"
+			ref={forwardedRef}
+			{...props(toolbarStyles.link)}
+		>
+			{controlLabel(children)}
+		</BaseToolbar.Link>
+	);
+}
+
+export function ToolbarSeparator({
+	orientation,
+	ref: forwardedRef,
+	...rest
+}: ToolbarSeparatorProps) {
+	const toolbarOrientation = useContext(ToolbarOrientationContext);
+	const resolvedOrientation =
+		orientation ??
+		(toolbarOrientation === "horizontal" ? "vertical" : "horizontal");
+
+	return (
+		<BaseToolbar.Separator
+			{...stripClosedProps(rest)}
+			data-slot="toolbar-separator"
+			orientation={resolvedOrientation}
+			ref={forwardedRef}
+			{...props(toolbarStyles.separator)}
+		/>
+	);
+}
+
+export type ToolbarInputProps = ClosedProps<BaseToolbarInputProps> & {
+	ref?: BaseToolbarInputProps["ref"];
+};
+
+export function ToolbarInput({ ref, size, ...rest }: ToolbarInputProps) {
+	return (
+		<BaseToolbar.Input
+			{...stripClosedProps(rest)}
+			data-slot="toolbar-input"
+			ref={ref}
+			render={<Input render={<input size={size} />} />}
+		/>
+	);
+}

package/src/components/tooltip/tooltip.styles.ts

@@ -0,0 +1,104 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const tooltipStyles = create({
+	popup: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		fontSize: fontSize["12"],
+		fontWeight: fontWeight.regular,
+		height: "var(--popup-height, auto)",
+		lineHeight: lineHeight["16"],
+		// Wide enough that one-sentence tooltips stay on one line.
+		maxWidth: "min(20rem, var(--available-width), calc(100vw - 2rem))",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		overflowWrap: "anywhere",
+		position: "relative",
+		// A box keeps its full width once text wraps, so balance leaves empty
+		// space; pretty only avoids a one-word last line.
+		textWrap: "pretty",
+		transform: {
+			"[data-ending-style]": "scale(0.98)",
+			"[data-starting-style]": "scale(0.98)",
+			default: "none",
+		},
+		transformOrigin: "var(--transform-origin)",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-instant]": duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "width, height, opacity, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "var(--popup-width, max-content)",
+	},
+	positioner: {
+		height: "var(--positioner-height)",
+		maxWidth: "min(var(--available-width), calc(100vw - 2rem))",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-instant]": duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "top, left, right, bottom, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "var(--positioner-width)",
+		zIndex: 50,
+	},
+	viewport: {
+		boxSizing: "border-box",
+		height: "100%",
+		overflow: "clip",
+		paddingBlock: space["1"],
+		paddingInline: space["3"],
+		position: "relative",
+		width: "100%",
+	},
+	viewportContent: {
+		opacity: {
+			":is(*) > :is([data-current], [data-previous])": 1,
+			":is(*) > :is([data-current], [data-previous]):is([data-starting-style], [data-ending-style])": 0,
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: {
+				":is(*) > :is([data-current], [data-previous])": duration.instant,
+			},
+			":is(*) > :is([data-current], [data-previous])": duration.fast,
+			"[data-instant]": {
+				":is(*) > :is([data-current], [data-previous])": duration.instant,
+			},
+		},
+		transitionProperty: {
+			":is(*) > :is([data-current], [data-previous])": "opacity",
+		},
+		width: {
+			":is(*) > :is([data-current], [data-previous])":
+				"calc(var(--popup-width) - 1.25rem - 2px)",
+		},
+	},
+});

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+	Tooltip as BaseTooltip,
+	type TooltipPopupProps as BaseTooltipPopupProps,
+	type TooltipPortalProps as BaseTooltipPortalProps,
+	type TooltipPositionerProps as BaseTooltipPositionerProps,
+	type TooltipProviderProps as BaseTooltipProviderProps,
+	type TooltipRootProps as BaseTooltipRootProps,
+	type TooltipTriggerProps as BaseTooltipTriggerProps,
+} from "@base-ui/react/tooltip";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { protectRenderSlot } from "../../render-utils";
+import { tooltipStyles } from "./tooltip.styles";
+
+type TooltipTriggerRef = ComponentPropsWithRef<
+	typeof BaseTooltip.Trigger
+>["ref"];
+type TooltipPopupRef = ComponentPropsWithRef<typeof BaseTooltip.Popup>["ref"];
+
+export type TooltipProps<Payload = unknown> = Closed<
+	BaseTooltipRootProps<Payload>
+>;
+export type TooltipProviderProps = Closed<BaseTooltipProviderProps>;
+
+export type TooltipTriggerProps<Payload = unknown> = Closed<
+	Omit<BaseTooltipTriggerProps<Payload>, "ref"> & {
+		ref?: TooltipTriggerRef;
+	}
+>;
+
+export type TooltipPopupProps = Closed<
+	Omit<BaseTooltipPopupProps, "ref"> & {
+		align?: BaseTooltipPositionerProps["align"];
+		anchor?: BaseTooltipPositionerProps["anchor"];
+		portalProps?: Closed<BaseTooltipPortalProps>;
+		ref?: TooltipPopupRef;
+		side?: BaseTooltipPositionerProps["side"];
+		sideOffset?: BaseTooltipPositionerProps["sideOffset"];
+	}
+>;
+
+export const TooltipCreateHandle = BaseTooltip.createHandle;
+
+export const Tooltip = BaseTooltip.Root;
+export const TooltipPrimitive = BaseTooltip;
+export const TooltipProvider = BaseTooltip.Provider;
+
+export function TooltipTrigger<Payload = unknown>({
+	ref: forwardedRef = undefined,
+	render,
+	type,
+	...rest
+}: TooltipTriggerProps<Payload>) {
+	return (
+		<BaseTooltip.Trigger
+			{...rest}
+			data-slot="tooltip-trigger"
+			ref={forwardedRef}
+			render={protectRenderSlot("tooltip-trigger", render)}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function TooltipPopup({
+	align = "center",
+	anchor,
+	children,
+	render,
+	portalProps,
+	ref: forwardedRef = undefined,
+	side = "top",
+	sideOffset = 4,
+	...rest
+}: TooltipPopupProps) {
+	return (
+		<BaseTooltip.Portal {...portalProps}>
+			<BaseTooltip.Positioner
+				align={align}
+				anchor={anchor}
+				data-slot="tooltip-positioner"
+				side={side}
+				sideOffset={sideOffset}
+				{...props(tooltipStyles.positioner)}
+			>
+				<BaseTooltip.Popup
+					{...rest}
+					data-slot="tooltip-popup"
+					ref={forwardedRef}
+					render={protectRenderSlot("tooltip-popup", render)}
+					{...props(tooltipStyles.popup)}
+				>
+					<BaseTooltip.Viewport
+						data-slot="tooltip-viewport"
+						{...props(tooltipStyles.viewport, tooltipStyles.viewportContent)}
+					>
+						{children}
+					</BaseTooltip.Viewport>
+				</BaseTooltip.Popup>
+			</BaseTooltip.Positioner>
+		</BaseTooltip.Portal>
+	);
+}

package/src/components/tree/tree.styles.ts

@@ -0,0 +1,133 @@
+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 { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight, lineHeight } from "../../styles/typography.stylex";
+
+// Rows are 32px. The chevron sits 8px in, so its center is 16px from the
+// row edge; each group draws its guide there and steps children 24px in.
+const GUIDE_INSET = "calc(1rem - 0.5px)";
+
+export const treeStyles = create({
+	chevronIcon: {
+		blockSize: "1rem",
+		inlineSize: "1rem",
+		rotate: { ":is([data-expanded] > *)": "90deg", default: "0deg" },
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "rotate",
+		transitionTimingFunction: easing.expoOut,
+	},
+	group: {
+		borderInlineStartColor: colors.border,
+		borderInlineStartStyle: "solid",
+		borderInlineStartWidth: borderWidth.thin,
+		display: "flex",
+		flexDirection: "column",
+		gap: space.px,
+		listStyleType: "none",
+		marginBlock: 0,
+		marginBlockStart: space.px,
+		marginInlineStart: GUIDE_INSET,
+		minInlineSize: 0,
+		paddingBlock: 0,
+		paddingInlineStart: "calc(0.5rem - 0.5px)",
+	},
+	// Muted by default; the selected row tints its icon with its label.
+	icon: {
+		alignItems: "center",
+		blockSize: "1rem",
+		color: {
+			":is([data-selected] > *)": "inherit",
+			default: colors.mutedContent,
+		},
+		display: "inline-flex",
+		flexShrink: 0,
+		inlineSize: "1rem",
+		justifyContent: "center",
+	},
+	indicator: {
+		alignItems: "center",
+		blockSize: "1rem",
+		color: colors.mutedContent,
+		display: "inline-flex",
+		flexShrink: 0,
+		inlineSize: "1rem",
+		justifyContent: "center",
+		transform: { ":dir(rtl)": "scaleX(-1)", default: "none" },
+	},
+	item: { listStyleType: "none", minInlineSize: 0 },
+	label: {
+		fontWeight: {
+			":is([data-selected] > *)": fontWeight.medium,
+			default: fontWeight.regular,
+		},
+		minInlineSize: 0,
+		overflowWrap: "anywhere",
+	},
+	root: {
+		animationDuration: { ":focus-visible": focusMotion.duration },
+		animationName: { ":focus-visible": focusMotion.ring },
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		gap: space.px,
+		inlineSize: "100%",
+		listStyleType: "none",
+		margin: 0,
+		minInlineSize: 0,
+		outlineColor: colors.focusRing,
+		outlineOffset: focus.offset,
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		paddingInlineStart: 0,
+	},
+	row: {
+		alignItems: "center",
+		backgroundColor: {
+			":is([data-selected])": colors.brandBackground,
+			":not([data-selected]):not([data-disabled]):hover":
+				colors.controlSurfaceHover,
+			default: "transparent",
+		},
+		borderRadius: shape.controlRadius,
+		boxSizing: "border-box",
+		color: {
+			":is([data-selected])": colors.brandForeground,
+			default: colors.content,
+		},
+		cursor: { ":is([data-disabled])": "not-allowed", default: "pointer" },
+		display: "flex",
+		gap: space["2"],
+		minBlockSize: "2rem",
+		minInlineSize: 0,
+		opacity: { ":is([data-disabled])": opacity.disabled, default: 1 },
+		outlineColor: colors.focusRing,
+		outlineOffset: -1,
+		// The keyboard row shows a ring; a mouse click shows the selection only.
+		outlineStyle: {
+			":is([role='tree']:focus-visible [data-active])": "solid",
+			default: "none",
+		},
+		outlineWidth: 1,
+		overflowWrap: "anywhere",
+		paddingBlock: `calc((2rem - ${lineHeight["20"]}) / 2)`,
+		paddingInline: space["2"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, color",
+	},
+});