@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/markdown/markdown.tsx

@@ -0,0 +1,268 @@
+import { props } from "@stylexjs/stylex";
+import {
+	type ComponentProps,
+	type ComponentPropsWithRef,
+	isValidElement,
+	type JSX,
+	type ReactNode,
+} from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { Code } from "../code/code";
+import { CodeBlockContent } from "../code-block/code-block";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "../table/table";
+import { markdownStyles } from "./markdown.styles";
+
+type NativeProps = ComponentPropsWithRef<"div">;
+const tableAlignments = {
+	center: "center",
+	left: "start",
+	right: "end",
+} as const;
+
+// Renderers pass their syntax-tree node as `node`; the map ignores it.
+type ElementProps<Tag extends keyof JSX.IntrinsicElements> =
+	ComponentProps<Tag> & { node?: unknown };
+type MarkdownComponents = {
+	[Tag in keyof JSX.IntrinsicElements]?: (
+		props: ElementProps<Tag>
+	) => ReactNode;
+};
+
+export type MarkdownProps = Omit<
+	Closed<NativeProps>,
+	"data-slot" | "dangerouslySetInnerHTML" | "role"
+>;
+
+function alignTableCell(align: string | undefined) {
+	if (align === "center" || align === "left" || align === "right") {
+		return tableAlignments[align];
+	}
+	return "start";
+}
+
+// Code blocks arrive as rendered children; keep only their text.
+function textOf(node: ReactNode): string {
+	if (typeof node === "string" || typeof node === "number") {
+		return String(node);
+	}
+	if (Array.isArray(node)) {
+		return node.map(textOf).join("");
+	}
+	if (isValidElement<{ children?: ReactNode }>(node)) {
+		return textOf(node.props.children);
+	}
+	return "";
+}
+
+// Element map for any renderer that accepts a components prop, such as
+// react-markdown or MDX. Parsing, plugins, and URL policy stay with the app.
+export const markdownComponents = {
+	a: ({ children, href, node: _node, title, ...rest }) => (
+		<a
+			{...rest}
+			data-slot="markdown-link"
+			href={href || undefined}
+			title={title}
+			{...props(markdownStyles.link)}
+		>
+			{children}
+		</a>
+	),
+	blockquote: ({ children, node: _node, ...rest }) => (
+		<blockquote
+			{...rest}
+			data-slot="markdown-blockquote"
+			{...props(markdownStyles.blockquote)}
+		>
+			{children}
+		</blockquote>
+	),
+	code: ({ children, className: _className, node: _node, ...rest }) => (
+		<Code {...rest}>{children}</Code>
+	),
+	h1: ({ children, node: _node, ...rest }) => (
+		<h1
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, typeRoles.title)}
+		>
+			{children}
+		</h1>
+	),
+	h2: ({ children, node: _node, ...rest }) => (
+		<h2
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, typeRoles.heading)}
+		>
+			{children}
+		</h2>
+	),
+	h3: ({ children, node: _node, ...rest }) => (
+		<h3
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, markdownStyles.headingThree)}
+		>
+			{children}
+		</h3>
+	),
+	h4: ({ children, node: _node, ...rest }) => (
+		<h4
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, markdownStyles.headingFour)}
+		>
+			{children}
+		</h4>
+	),
+	h5: ({ children, node: _node, ...rest }) => (
+		<h5
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, markdownStyles.headingFive)}
+		>
+			{children}
+		</h5>
+	),
+	h6: ({ children, node: _node, ...rest }) => (
+		<h6
+			{...rest}
+			data-slot="markdown-heading"
+			{...props(markdownStyles.heading, markdownStyles.headingSix)}
+		>
+			{children}
+		</h6>
+	),
+	hr: ({ node: _node, ...rest }) => (
+		<hr {...rest} data-slot="markdown-rule" {...props(markdownStyles.rule)} />
+	),
+	img: ({ alt, height, node: _node, src, title, width, ...rest }) => (
+		// biome-ignore lint/performance/noImgElement: Markdown images accept arbitrary sources and must stay framework-neutral.
+		<img
+			{...rest}
+			alt={alt ?? ""}
+			data-slot="markdown-image"
+			height={height}
+			src={src || undefined}
+			title={title}
+			width={width}
+			{...props(markdownStyles.image)}
+		/>
+	),
+	input: ({ checked, node: _node, type, ...rest }) => (
+		<input
+			{...rest}
+			aria-label={checked ? "Task completed" : "Task not completed"}
+			checked={checked}
+			data-slot="markdown-task"
+			disabled
+			type={type}
+			{...props(markdownStyles.checkbox)}
+		/>
+	),
+	li: ({ children, className: _className, node: _node, ...rest }) => (
+		<li
+			{...rest}
+			data-slot="markdown-list-item"
+			{...props(markdownStyles.listItem)}
+		>
+			{children}
+		</li>
+	),
+	ol: ({ children, node: _node, ...rest }) => (
+		<ol
+			{...rest}
+			data-slot="markdown-ordered-list"
+			{...props(markdownStyles.list, typeRoles.body)}
+		>
+			{children}
+		</ol>
+	),
+	p: ({ children, node: _node, ...rest }) => (
+		<p
+			{...rest}
+			data-slot="markdown-paragraph"
+			{...props(markdownStyles.paragraph, typeRoles.body)}
+		>
+			{children}
+		</p>
+	),
+	pre: ({ children }) => (
+		<CodeBlockContent aria-label="Code block">
+			{textOf(children)}
+		</CodeBlockContent>
+	),
+	table: ({ children, node: _node }) => (
+		<TableContainer aria-label="Markdown table" scroll="horizontal">
+			<Table>{children}</Table>
+		</TableContainer>
+	),
+	tbody: ({ children, node: _node, ...rest }) => (
+		<TableBody {...rest}>{children}</TableBody>
+	),
+	td: ({ align, children, node: _node, ...rest }) => (
+		<TableCell {...rest} align={alignTableCell(align)}>
+			{children}
+		</TableCell>
+	),
+	th: ({ align, children, node: _node, ...rest }) => (
+		<TableHead {...rest} align={alignTableCell(align)} scope="col">
+			{children}
+		</TableHead>
+	),
+	thead: ({ children, node: _node, ...rest }) => (
+		<TableHeader sticky={false} {...rest}>
+			{children}
+		</TableHeader>
+	),
+	tr: ({ children, node: _node, ...rest }) => (
+		<TableRow {...rest}>{children}</TableRow>
+	),
+	ul: ({ children, className: _className, node: _node, ...rest }) => (
+		<ul
+			{...rest}
+			data-slot="markdown-unordered-list"
+			{...props(markdownStyles.list, typeRoles.body)}
+		>
+			{children}
+		</ul>
+	),
+} satisfies MarkdownComponents;
+
+function stripReservedProps(attributes: Record<string, unknown>) {
+	Reflect.deleteProperty(attributes, "className");
+	Reflect.deleteProperty(attributes, "data-slot");
+	Reflect.deleteProperty(attributes, "dangerouslySetInnerHTML");
+	Reflect.deleteProperty(attributes, "role");
+	Reflect.deleteProperty(attributes, "style");
+}
+
+// Reading layout for rendered Markdown. Render the document inside it with
+// `markdownComponents`.
+export function Markdown({
+	children,
+	ref: forwardedRef,
+	...rest
+}: MarkdownProps) {
+	stripReservedProps(rest);
+	return (
+		<div
+			{...rest}
+			data-slot="markdown"
+			ref={forwardedRef}
+			{...props(markdownStyles.root, typeRoles.body)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/menu/menu-align-context.ts

@@ -0,0 +1,8 @@
+import type { Menu as BaseMenu } from "@base-ui/react/menu";
+import { type ComponentProps, createContext } from "react";
+
+// A menubar aligns its menus with the start of their triggers, like desktop
+// menubars; standalone menus keep Base UI's centered default.
+export const MenuAlignContext = createContext<
+	ComponentProps<typeof BaseMenu.Positioner>["align"] | undefined
+>(undefined);

package/src/components/menu/menu.styles.ts

@@ -0,0 +1,281 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { floatingItemColors } from "../../styles/floating-item-colors.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import {
+	borderWidth,
+	forcedColorAdjust,
+	opacity,
+} 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,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const menuStyles = create({
+	checkIcon: {
+		display: "block",
+		height: "1rem",
+		width: "1rem",
+	},
+	chevron: {
+		color: "currentColor",
+		flexShrink: 0,
+		height: "1rem",
+		marginInlineStart: "auto",
+		width: "1rem",
+	},
+	// The rows' 8px inset, inside the scroll area so the fade reaches the edge.
+	content: { padding: space["2"] },
+	group: {
+		display: "flex",
+		flexDirection: "column",
+	},
+	groupLabel: {
+		color: colors.mutedContent,
+		fontSize: fontSize["12"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.medium,
+		letterSpacing: letterSpacing.caption,
+		lineHeight: lineHeight["16"],
+		overflowWrap: "anywhere",
+		paddingBlockEnd: space["1"],
+		paddingBlockStart: space["2"],
+		paddingInline: space["2"],
+	},
+	indicator: {
+		alignItems: "center",
+		color: { "[data-checked]": colors.accent },
+		display: "inline-flex",
+		flexShrink: 0,
+		height: "1rem",
+		justifyContent: "center",
+		opacity: { "[data-checked]": 1, default: 0 },
+		transform: { "[data-checked]": "scale(1)", default: "scale(0.5)" },
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "1rem",
+	},
+	inset: {
+		paddingInlineStart: space["8"],
+	},
+	item: {
+		alignItems: "center",
+		// Concentric with the 24px popup: its radius minus the 8px row inset.
+		borderEndEndRadius: `calc(${shape.floatingRadius} - ${space["2"]})`,
+		borderEndStartRadius: `calc(${shape.floatingRadius} - ${space["2"]})`,
+		borderStartEndRadius: `calc(${shape.floatingRadius} - ${space["2"]})`,
+		borderStartStartRadius: `calc(${shape.floatingRadius} - ${space["2"]})`,
+		boxSizing: "border-box",
+		cursor: { "[data-disabled]": "not-allowed", default: "default" },
+		display: "flex",
+		fontFamily: "inherit",
+		fontSize: fontSize["14"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.regular,
+		forcedColorAdjust: {
+			"[data-highlighted]": forcedColorAdjust.selectedState,
+		},
+		gap: space["2"],
+		lineHeight: lineHeight["20"],
+		minHeight: "2rem",
+		minWidth: 0,
+		opacity: { "[data-disabled]": opacity.disabled, default: 1 },
+		// Keyboard focus draws the ring; the row under the pointer keeps the tint.
+		outlineColor: {
+			":focus-visible:not(:hover)": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: `-${borderWidth.focus}px`,
+		outlineStyle: { ":focus-visible:not(:hover)": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		overflowWrap: "anywhere",
+		paddingBlock: `calc((2rem - ${lineHeight["20"]}) / 2)`,
+		paddingInline: space["2"],
+		textDecoration: "none",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, color, opacity",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+	},
+	itemDefault: {
+		backgroundColor: {
+			"[data-highlighted]": floatingItemColors.highlightBackground,
+			default: "transparent",
+		},
+		color: {
+			"[data-highlighted]": floatingItemColors.highlightForeground,
+			default: colors.content,
+		},
+	},
+	itemDestructive: {
+		backgroundColor: {
+			"[data-highlighted]": floatingItemColors.destructiveHighlightBackground,
+			default: "transparent",
+		},
+		color: {
+			"[data-highlighted]": floatingItemColors.destructiveHighlightForeground,
+			default: colors.destructive,
+		},
+	},
+	popup: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		// About ten rows, then the list scrolls; long menus never fill the screen.
+		maxHeight: "min(var(--available-height), 20rem)",
+		maxWidth: "min(var(--available-width), calc(100vw - 2rem))",
+		minWidth: "12rem",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		outline: "none",
+		overflow: "hidden",
+		transform: {
+			"[data-ending-style][data-side='bottom']":
+				"translateY(-0.25rem) scale(0.98)",
+			"[data-ending-style][data-side='inline-end']":
+				"translateX(-0.25rem) scale(0.98)",
+			"[data-ending-style][data-side='inline-start']":
+				"translateX(0.25rem) scale(0.98)",
+			"[data-ending-style][data-side='left']":
+				"translateX(0.25rem) scale(0.98)",
+			"[data-ending-style][data-side='right']":
+				"translateX(-0.25rem) scale(0.98)",
+			"[data-ending-style][data-side='top']": "translateY(0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='bottom']":
+				"translateY(-0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='inline-end']":
+				"translateX(-0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='inline-start']":
+				"translateX(0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='left']":
+				"translateX(0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='right']":
+				"translateX(-0.25rem) scale(0.98)",
+			"[data-starting-style][data-side='top']":
+				"translateY(0.25rem) scale(0.98)",
+			default: "none",
+		},
+		transformOrigin: "var(--transform-origin)",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-instant]": duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: easing.expoOut,
+	},
+	positioner: {
+		maxWidth: "calc(100vw - 2rem)",
+		zIndex: 50,
+	},
+	radioDot: {
+		backgroundColor: "currentColor",
+		borderEndEndRadius: "50%",
+		borderEndStartRadius: "50%",
+		borderStartEndRadius: "50%",
+		borderStartStartRadius: "50%",
+		height: "0.375rem",
+		width: "0.375rem",
+	},
+	separator: {
+		backgroundColor: colors.border,
+		height: borderWidth.thin,
+		marginBlock: space["1"],
+		marginInline: space["2"],
+	},
+	shortcut: {
+		color: {
+			[conditions.forcedColors]: "inherit",
+			default: colors.mutedContent,
+		},
+		flexShrink: 0,
+		fontFamily: "inherit",
+		fontSize: fontSize["12"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+		letterSpacing: letterSpacing.caption,
+		marginInlineStart: "auto",
+		whiteSpace: "nowrap",
+	},
+	subTrigger: {
+		backgroundColor: {
+			"[data-popup-open]": floatingItemColors.highlightBackground,
+		},
+		color: { "[data-popup-open]": floatingItemColors.highlightForeground },
+	},
+	switchIndicator: {
+		alignItems: "center",
+		backgroundColor: colors.controlSurfaceHover,
+		borderEndEndRadius: "9999px",
+		borderEndStartRadius: "9999px",
+		borderStartEndRadius: "9999px",
+		borderStartStartRadius: "9999px",
+		boxShadow: shadows.recessedRest,
+		boxSizing: "border-box",
+		display: "inline-flex",
+		flexShrink: 0,
+		height: "1rem",
+		marginInlineStart: "auto",
+		padding: "0.125rem",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color",
+		transitionTimingFunction: easing.expoOut,
+		width: "1.75rem",
+	},
+	switchIndicatorChecked: {
+		backgroundColor: colors.accent,
+	},
+	switchThumb: {
+		backgroundColor: colors.controlThumb,
+		borderEndEndRadius: "50%",
+		borderEndStartRadius: "50%",
+		borderStartEndRadius: "50%",
+		borderStartStartRadius: "50%",
+		boxShadow: shadows.filledRest,
+		height: "0.75rem",
+		marginInlineStart: 0,
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, margin-inline-start",
+		transitionTimingFunction: easing.expoOut,
+		width: "0.75rem",
+	},
+	switchThumbChecked: {
+		backgroundColor: colors.controlThumb,
+		marginInlineStart: "0.75rem",
+	},
+});