@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/lightbox/lightbox.styles.ts

@@ -0,0 +1,196 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { borderWidth, focus } 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";
+
+const ROUND = "9999px";
+// Room for Close above the image and the paging pill below it: each sits
+// 16px from the edge and keeps 24px clear of the photo.
+const CHROME = `calc(${space["4"]} + ${space["10"]} + ${space["6"]})`;
+
+const enterExit = {
+	transitionDuration: {
+		[conditions.reducedMotion]: duration.instant,
+		"[data-ending-style]": duration.overlayExit,
+		default: duration.overlayEnter,
+	},
+	transitionTimingFunction: {
+		"[data-ending-style]": easing.easeInOut,
+		default: easing.expoOut,
+	},
+} as const;
+
+export const lightboxStyles = create({
+	// A near-black scrim in both themes, so photos read at their true colors.
+	backdrop: {
+		...enterExit,
+		backdropFilter: {
+			[conditions.forcedColors]: "none",
+			"@media (prefers-reduced-transparency: reduce)": "none",
+			default: "blur(4px)",
+		},
+		backgroundColor: `color-mix(in srgb, ${colors.backdrop} 86%, transparent)`,
+		inset: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		position: "fixed",
+		transitionProperty: "opacity",
+		zIndex: 0,
+	},
+	chevron: {
+		transform: { ":dir(rtl)": "scaleX(-1)", default: "none" },
+	},
+	close: {
+		borderColor: colors.border,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		insetBlockStart: space["4"],
+		insetInlineEnd: space["4"],
+		position: "absolute",
+	},
+	// Round floating buttons: Close, and Previous and Next inside the pill.
+	control: {
+		alignItems: "center",
+		appearance: "none",
+		backgroundColor: {
+			[conditions.canHover]: {
+				":hover": colors.controlSurfaceHover,
+				default: colors.floatingSurface,
+			},
+			default: colors.floatingSurface,
+		},
+		blockSize: space["10"],
+		borderRadius: ROUND,
+		borderWidth: 0,
+		boxSizing: "border-box",
+		color: colors.content,
+		cursor: "pointer",
+		display: "inline-flex",
+		inlineSize: space["10"],
+		justifyContent: "center",
+		margin: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: { ":focus-visible": focus.offset, default: 0 },
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		padding: 0,
+		pointerEvents: "auto",
+	},
+	// Keeps the counter from shifting the buttons as "9 of 10" becomes "10 of 10".
+	counter: {
+		color: colors.mutedContent,
+		fontVariantNumeric: "tabular-nums",
+		minInlineSize: "4.5rem",
+		textAlign: "center",
+	},
+	gallery: {
+		display: "grid",
+		gap: space["2"],
+		gridTemplateColumns: "repeat(auto-fit, minmax(7rem, 1fr))",
+		listStyle: "none",
+		margin: 0,
+		minInlineSize: 0,
+		padding: 0,
+	},
+	galleryCell: { display: "grid", minInlineSize: 0 },
+	galleryImage: {
+		blockSize: "100%",
+		display: "block",
+		inlineSize: "100%",
+		objectFit: "cover",
+		opacity: {
+			[conditions.canHover]: { ":hover": 0.88, default: 1 },
+			default: 1,
+		},
+	},
+	galleryItem: {
+		appearance: "none",
+		aspectRatio: "1",
+		backgroundColor: colors.workarea,
+		borderRadius: shape.controlRadiusLarge,
+		borderWidth: 0,
+		cursor: "zoom-in",
+		margin: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: 2,
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		overflow: "hidden",
+		padding: 0,
+	},
+	// Frameless: the photo keeps its own proportions within the viewport.
+	image: {
+		blockSize: "auto",
+		borderRadius: shape.controlRadius,
+		display: "block",
+		inlineSize: "auto",
+		maxBlockSize: "100%",
+		maxInlineSize: "100%",
+		minBlockSize: 0,
+		objectFit: "contain",
+		pointerEvents: "auto",
+	},
+	// Previous, the position, and Next, floating at the foot of the overlay.
+	pill: {
+		alignItems: "center",
+		backgroundColor: colors.floatingSurface,
+		borderColor: colors.border,
+		borderRadius: ROUND,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		display: "flex",
+		gap: space["1"],
+		insetBlockEnd: space["4"],
+		insetInline: 0,
+		marginInline: "auto",
+		padding: space["1"],
+		pointerEvents: "auto",
+		position: "absolute",
+		width: "fit-content",
+	},
+	pillButton: { blockSize: space["8"], inlineSize: space["8"] },
+	// Covers the viewport but lets clicks on empty space reach the scrim, so
+	// they dismiss the overlay.
+	popup: {
+		...enterExit,
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "grid",
+		gridTemplateColumns: "minmax(0, 1fr)",
+		gridTemplateRows: "minmax(0, 1fr)",
+		inset: 0,
+		justifyItems: "center",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		outline: "none",
+		paddingBlock: CHROME,
+		paddingInline: { [conditions.sm]: CHROME, default: space["4"] },
+		pointerEvents: "none",
+		position: "fixed",
+		transform: {
+			"[data-ending-style]": "scale(0.98)",
+			"[data-starting-style]": "scale(0.96)",
+			default: "none",
+		},
+		transitionProperty: "opacity, transform",
+		zIndex: 1,
+	},
+});

package/src/components/lightbox/lightbox.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import {
+	Dialog as BaseDialog,
+	type DialogDescriptionProps as BaseDialogDescriptionProps,
+	type DialogPopupProps as BaseDialogPopupProps,
+	type DialogTitleProps as BaseDialogTitleProps,
+} from "@base-ui/react/dialog";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { IconX } from "../../icons";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import {
+	Dialog,
+	DialogClose,
+	type DialogCloseProps,
+	type DialogProps,
+	DialogTrigger,
+	type DialogTriggerProps,
+} from "../dialog/dialog";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { lightboxStyles } from "./lightbox.styles";
+
+const blockedHostProps = new Set(["className", "data-slot", "role", "style"]);
+
+export function guardHostProps(propsToGuard: object) {
+	return Object.fromEntries(
+		Object.entries(propsToGuard).filter(([name]) => !blockedHostProps.has(name))
+	);
+}
+
+export type LightboxProps<Payload = unknown> = DialogProps<Payload>;
+export type LightboxTriggerProps<Payload = unknown> =
+	DialogTriggerProps<Payload>;
+export type LightboxTitleProps = Closed<BaseDialogTitleProps>;
+export type LightboxDescriptionProps = Closed<BaseDialogDescriptionProps>;
+export type LightboxCloseProps = DialogCloseProps;
+export type LightboxPopupProps = Omit<
+	Closed<BaseDialogPopupProps>,
+	"data-slot" | "render" | "role"
+>;
+export type LightboxImageProps = Omit<
+	Closed<ComponentPropsWithRef<"img">>,
+	"alt" | "data-slot" | "role" | "src"
+> & {
+	alt: string;
+	src: string;
+};
+
+export const Lightbox = Dialog;
+export const LightboxTrigger = DialogTrigger;
+export const LightboxClose = DialogClose;
+
+/** Names the overlay for assistive technology; the image speaks for itself on screen. */
+export function LightboxTitle({
+	ref: forwardedRef,
+	...rest
+}: LightboxTitleProps) {
+	return (
+		<BaseDialog.Title
+			{...guardHostProps(rest)}
+			data-slot="lightbox-title"
+			ref={forwardedRef}
+			{...props(visuallyHiddenStyles.root)}
+		/>
+	);
+}
+
+/** Describes the image for assistive technology, without covering it. */
+export function LightboxDescription({
+	ref: forwardedRef,
+	...rest
+}: LightboxDescriptionProps) {
+	return (
+		<BaseDialog.Description
+			{...guardHostProps(rest)}
+			data-slot="lightbox-description"
+			ref={forwardedRef}
+			{...props(visuallyHiddenStyles.root)}
+		/>
+	);
+}
+
+/**
+ * A fullscreen overlay: the image sits frameless on a dark scrim, with Close
+ * in the corner. Escape, the close button, and a click on the scrim dismiss it.
+ */
+export function LightboxPopup({
+	children,
+	ref: forwardedRef,
+	...rest
+}: LightboxPopupProps) {
+	return (
+		<BaseDialog.Portal {...props(overlayLayerStyles.modalPortal)}>
+			<BaseDialog.Backdrop
+				data-slot="lightbox-backdrop"
+				{...props(lightboxStyles.backdrop)}
+			/>
+			<BaseDialog.Popup
+				{...guardHostProps(rest)}
+				data-slot="lightbox-popup"
+				ref={forwardedRef}
+				{...props(lightboxStyles.popup)}
+			>
+				<BaseDialog.Close
+					aria-label="Close"
+					data-slot="lightbox-close"
+					{...props(lightboxStyles.control, lightboxStyles.close)}
+				>
+					<IconX aria-hidden="true" focusable="false" size={18} />
+				</BaseDialog.Close>
+				{children}
+			</BaseDialog.Popup>
+		</BaseDialog.Portal>
+	);
+}
+
+export function LightboxImage({
+	alt,
+	ref: forwardedRef,
+	src,
+	...rest
+}: LightboxImageProps) {
+	return (
+		// biome-ignore lint/correctness/useImageSize: callers may omit source dimensions; the image keeps intrinsic ratio and viewport bounds.
+		// biome-ignore lint/performance/noImgElement: Lightbox uses native images so this package stays framework-neutral.
+		<img
+			{...guardHostProps(rest)}
+			alt={alt}
+			data-slot="lightbox-image"
+			ref={forwardedRef}
+			src={src}
+			{...props(lightboxStyles.image)}
+		/>
+	);
+}

package/src/components/link/link.styles.ts

@@ -0,0 +1,41 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+
+export const linkStyles = create({
+	root: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		borderRadius: `calc(${shape.controlRadius} / 3)`,
+		color: colors.brandForeground,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		overflowWrap: "anywhere",
+		textDecorationLine: "underline",
+		textDecorationThickness: {
+			":active": "0.16em",
+			[conditions.canHover]: { ":hover:not(:active)": "0.12em" },
+			default: "0.08em",
+		},
+		textUnderlineOffset: "0.25em",
+	},
+});

package/src/components/link/link.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { props } from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { protectRenderSlot } from "../../render-utils";
+import { linkStyles } from "./link.styles";
+
+type NativeLinkProps = Omit<
+	Closed<useRender.ComponentProps<"a">>,
+	"children" | "data-slot" | "href" | "render" | "role"
+> & { children: ReactNode };
+
+export type LinkProps = NativeLinkProps &
+	(
+		| { href: string; render?: undefined }
+		| {
+				href?: string;
+				render: NonNullable<useRender.ComponentProps<"a">["render"]>;
+		  }
+	);
+
+export function Link({
+	children,
+	href,
+	ref: forwardedRef,
+	render,
+	...rest
+}: LinkProps) {
+	if (!render && typeof href !== "string") {
+		throw new TypeError("Link requires an href string or a render target.");
+	}
+	for (const name of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(rest, props(linkStyles.root), {
+			children,
+			"data-slot": "link",
+			...(href === undefined ? {} : { href }),
+		}),
+		ref: forwardedRef,
+		render: protectRenderSlot("link", render),
+	});
+}

package/src/components/list/list.styles.ts

@@ -0,0 +1,49 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const listStyles = create({
+	actions: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "flex-end",
+		minWidth: 0,
+	},
+	content: {
+		flexBasis: "16rem",
+		flexGrow: 1,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	item: {
+		alignItems: "center",
+		borderBlockEndColor: colors.border,
+		borderBlockEndStyle: "solid",
+		// Rows in a vertical list get dividers; chips in an Overflow List do not.
+		borderBlockEndWidth: {
+			":is([data-slot='overflow-list-items'] > *)": 0,
+			":last-child": 0,
+			default: borderWidth.thin,
+		},
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["3"],
+		minWidth: 0,
+		paddingBlock: {
+			":is([data-slot='overflow-list-items'] > *)": 0,
+			default: space["3"],
+		},
+	},
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["0"],
+		listStyleType: "none",
+		margin: 0,
+		minWidth: 0,
+		paddingInlineStart: 0,
+	},
+});

package/src/components/list/list.tsx

@@ -0,0 +1,105 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { listStyles } from "./list.styles";
+
+export type ListProps = Omit<
+	Closed<ComponentPropsWithRef<"ul">>,
+	"data-slot" | "role"
+>;
+
+export type ListItemProps = Omit<
+	Closed<ComponentPropsWithRef<"li">>,
+	"data-slot" | "role"
+>;
+
+export type ListContentProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"data-slot" | "role"
+>;
+
+export type ListActionsProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"data-slot" | "role"
+>;
+
+function stripReservedProps(rest: object) {
+	for (const key of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, key);
+	}
+}
+
+export function List({ children, ref: forwardedRef, ...rest }: ListProps) {
+	stripReservedProps(rest);
+
+	return (
+		<ul
+			{...rest}
+			data-slot="list"
+			ref={forwardedRef}
+			// biome-ignore lint/a11y/noRedundantRoles: list markers are removed, which can hide list semantics in Safari.
+			role="list"
+			{...props(listStyles.root, typeRoles.body)}
+		>
+			{children}
+		</ul>
+	);
+}
+
+export function ListItem({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ListItemProps) {
+	stripReservedProps(rest);
+
+	return (
+		<li
+			{...rest}
+			data-slot="list-item"
+			ref={forwardedRef}
+			{...props(listStyles.item)}
+		>
+			{children}
+		</li>
+	);
+}
+
+export function ListContent({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ListContentProps) {
+	stripReservedProps(rest);
+
+	return (
+		<div
+			{...rest}
+			data-slot="list-content"
+			ref={forwardedRef}
+			{...props(listStyles.content)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function ListActions({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ListActionsProps) {
+	stripReservedProps(rest);
+
+	return (
+		<div
+			{...rest}
+			data-slot="list-actions"
+			ref={forwardedRef}
+			{...props(listStyles.actions)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/markdown/markdown.styles.ts

@@ -0,0 +1,104 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+} from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const markdownStyles = create({
+	blockquote: {
+		borderInlineStartColor: colors.border,
+		borderInlineStartStyle: "solid",
+		borderInlineStartWidth: borderWidth.focus,
+		marginBlock: space["3"],
+		marginInline: 0,
+		paddingInlineStart: space["3"],
+	},
+	checkbox: {
+		accentColor: colors.primary,
+		marginInlineEnd: space["2"],
+	},
+	heading: {
+		color: colors.content,
+		fontWeight: fontWeight.semibold,
+		marginBlockEnd: space["2"],
+		marginBlockStart: { ":first-child": 0, default: space["3"] },
+	},
+	headingFive: {
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.normal,
+		lineHeight: lineHeight["20"],
+	},
+	headingFour: {
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.subheading,
+		lineHeight: lineHeight["24"],
+	},
+	headingSix: {
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.normal,
+		lineHeight: lineHeight["20"],
+	},
+	headingThree: {
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+	},
+	image: { height: "auto", maxWidth: "100%" },
+	link: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		borderRadius: 2,
+		color: colors.primary,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: 0,
+		},
+		textDecorationLine: "underline",
+		textUnderlineOffset: "0.15em",
+	},
+	list: {
+		marginBlock: 0,
+		marginBlockEnd: { ":last-child": 0, default: space["3"] },
+		paddingInlineStart: space["4"],
+	},
+	listItem: { paddingInlineStart: space["1"] },
+	paragraph: {
+		marginBlock: 0,
+		marginBlockEnd: { ":last-child": 0, default: space["3"] },
+	},
+	root: {
+		color: colors.content,
+		fontWeight: fontWeight.regular,
+		minWidth: 0,
+		overflowWrap: "break-word",
+	},
+	rule: {
+		borderBlockStartColor: colors.border,
+		borderBlockStartStyle: "solid",
+		borderBlockStartWidth: borderWidth.thin,
+		marginBlock: space["3"],
+	},
+});