@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/input-group/input-group.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, MouseEvent, ReactElement } from "react";
+import { useCallback } from "react";
+import type { Closed } from "../../closed";
+import { protectRenderSlot } from "../../render-utils";
+import type { InputProps } from "../input/input";
+import { Input } from "../input/input";
+import type { TextareaProps } from "../textarea/textarea";
+import { Textarea } from "../textarea/textarea";
+import { inputGroupStyles } from "./input-group.styles";
+
+export type InputGroupProps = Closed<
+	Omit<ComponentPropsWithRef<"div">, "data-slot">
+>;
+
+export type InputGroupAddonAlign =
+	| "block-end"
+	| "block-start"
+	| "inline-end"
+	| "inline-start";
+
+export type InputGroupAddonProps = Closed<
+	Omit<ComponentPropsWithRef<"div">, "data-slot"> & {
+		align?: InputGroupAddonAlign;
+	}
+>;
+
+export type InputGroupTextProps = Closed<
+	Omit<ComponentPropsWithRef<"span">, "data-slot">
+>;
+
+export type InputGroupInputProps = Closed<
+	Omit<InputProps, "data-slot" | "unstyled">
+>;
+
+export type InputGroupTextareaProps = Closed<
+	Omit<TextareaProps, "data-slot" | "unstyled">
+>;
+
+const alignStyles = {
+	"block-end": inputGroupStyles.alignBlockEnd,
+	"block-start": inputGroupStyles.alignBlockStart,
+	"inline-end": inputGroupStyles.alignInlineEnd,
+	"inline-start": inputGroupStyles.alignInlineStart,
+};
+
+const interactiveSelector =
+	"a[href], button, input, select, textarea, [contenteditable]:not([contenteditable='false']), [tabindex]:not([tabindex^='-']), [role='button'], [role='combobox'], [role='listbox'], [role='menuitem'], [role='checkbox'], [role='radio'], [role='switch'], [role='tab'], [data-slot='select-trigger']";
+
+function shouldRedirectFocus(event: MouseEvent<HTMLDivElement>): boolean {
+	const { currentTarget, target } = event;
+	if (!(target instanceof Element)) {
+		return false;
+	}
+	if (!currentTarget.contains(target)) {
+		return false;
+	}
+	const interactive = target.closest(interactiveSelector);
+	return interactive === null || !currentTarget.contains(interactive);
+}
+
+function findDirectControl(
+	container: HTMLElement
+): HTMLInputElement | HTMLTextAreaElement | null {
+	for (const child of container.children) {
+		if (
+			child instanceof HTMLInputElement &&
+			child.getAttribute("data-slot") === "input-group-input"
+		) {
+			return child;
+		}
+		if (
+			child instanceof HTMLTextAreaElement &&
+			child.getAttribute("data-slot") === "input-group-textarea"
+		) {
+			return child;
+		}
+	}
+	return null;
+}
+
+function hasFocusedDirectControl(container: HTMLElement): boolean {
+	const active = document.activeElement;
+	if (!active || active.parentElement !== container) {
+		return false;
+	}
+	const slot = active.getAttribute("data-slot");
+	return slot === "input-group-input" || slot === "input-group-textarea";
+}
+
+function redirectFocusToSibling(container: HTMLElement | null): void {
+	if (!container || hasFocusedDirectControl(container)) {
+		return;
+	}
+	const control = findDirectControl(container);
+	if (control && !control.disabled) {
+		control.focus();
+	}
+}
+
+export function InputGroup({
+	role = "group",
+	children,
+	ref: forwardedRef,
+	...rest
+}: InputGroupProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<div
+			{...rest}
+			data-slot="input-group"
+			ref={forwardedRef}
+			role={role}
+			{...props(inputGroupStyles.root)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function InputGroupAddon({
+	align = "inline-start",
+	children,
+	onMouseDown,
+	ref: forwardedRef,
+	...rest
+}: InputGroupAddonProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	const handleMouseDown = useCallback(
+		(event: MouseEvent<HTMLDivElement>) => {
+			onMouseDown?.(event);
+			if (event.defaultPrevented || !shouldRedirectFocus(event)) {
+				return;
+			}
+
+			event.preventDefault();
+			redirectFocusToSibling(event.currentTarget.parentElement);
+		},
+		[onMouseDown]
+	);
+
+	const addonProps = {
+		...rest,
+		onMouseDown: handleMouseDown,
+	};
+
+	return (
+		<div
+			{...addonProps}
+			data-align={align}
+			data-slot="input-group-addon"
+			ref={forwardedRef}
+			{...props(inputGroupStyles.addon, alignStyles[align])}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function InputGroupText({
+	children,
+	ref: forwardedRef,
+	...rest
+}: InputGroupTextProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<span
+			{...rest}
+			data-slot="input-group-text"
+			ref={forwardedRef}
+			{...props(inputGroupStyles.text)}
+		>
+			{children}
+		</span>
+	);
+}
+
+export function InputGroupInput({
+	ref: forwardedRef,
+	render,
+	...rest
+}: InputGroupInputProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<Input
+			{...rest}
+			data-slot="input-group-input"
+			ref={forwardedRef}
+			render={protectRenderSlot("input-group-input", render ?? <input />)}
+			unstyled
+		/>
+	);
+}
+
+export function InputGroupTextarea({
+	ref: forwardedRef,
+	...rest
+}: InputGroupTextareaProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<Textarea
+			{...rest}
+			data-slot="input-group-textarea"
+			ref={forwardedRef}
+			unstyled
+		/>
+	);
+}

package/src/components/kbd/kbd.styles.ts

@@ -0,0 +1,42 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } 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 kbdStyles = create({
+	group: {
+		alignItems: "center",
+		display: "inline-flex",
+		fontFamily: "inherit",
+		gap: space["1"],
+	},
+	root: {
+		alignItems: "center",
+		backgroundColor: colors.secondary,
+		borderColor: colors.border,
+		borderRadius: shape.checkboxRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		color: colors.secondaryContent,
+		display: "inline-flex",
+		fontFamily: "inherit",
+		fontSize: fontSize["12"],
+		fontWeight: fontWeight.medium,
+		gap: space["1"],
+		height: "1.25rem",
+		justifyContent: "center",
+		lineHeight: lineHeight["16"],
+		minWidth: "1.25rem",
+		paddingInline: space["1"],
+		pointerEvents: "none",
+		userSelect: "none",
+		whiteSpace: "nowrap",
+	},
+});

package/src/components/kbd/kbd.tsx

@@ -0,0 +1,70 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { controlLabel } from "../../control-label";
+import { kbdStyles } from "./kbd.styles";
+
+type NativeKbdProps = ComponentPropsWithRef<"kbd">;
+
+export type KbdProps = Omit<
+	NativeKbdProps,
+	| "aria-label"
+	| "aria-labelledby"
+	| "className"
+	| "data-slot"
+	| "role"
+	| "style"
+>;
+
+export type KbdGroupProps = Omit<
+	NativeKbdProps,
+	| "aria-label"
+	| "aria-labelledby"
+	| "className"
+	| "data-slot"
+	| "role"
+	| "style"
+>;
+
+export function Kbd({ children, ref: forwardedRef, ...rest }: KbdProps) {
+	Reflect.deleteProperty(rest, "aria-label");
+	Reflect.deleteProperty(rest, "aria-labelledby");
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "role");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<kbd
+			{...rest}
+			data-slot="kbd"
+			ref={forwardedRef}
+			{...props(kbdStyles.root)}
+		>
+			{controlLabel(children)}
+		</kbd>
+	);
+}
+
+export function KbdGroup({
+	children,
+	ref: forwardedRef,
+	...rest
+}: KbdGroupProps) {
+	Reflect.deleteProperty(rest, "aria-label");
+	Reflect.deleteProperty(rest, "aria-labelledby");
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "role");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<kbd
+			{...rest}
+			data-slot="kbd-group"
+			ref={forwardedRef}
+			{...props(kbdStyles.group)}
+		>
+			{children}
+		</kbd>
+	);
+}

package/src/components/label/label.styles.ts

@@ -0,0 +1,8 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+
+export const labelStyles = create({
+	base: {
+		color: colors.content,
+	},
+});

package/src/components/label/label.tsx

@@ -0,0 +1,29 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { typeRoles } from "../../styles/typography.styles";
+import { labelStyles } from "./label.styles";
+
+type NativeLabelProps = ComponentPropsWithRef<"label">;
+
+export type LabelProps = Omit<NativeLabelProps, "className" | "role" | "style">;
+
+export function Label({
+	children,
+	htmlFor,
+	ref: forwardedRef,
+	...rest
+}: LabelProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<label
+			htmlFor={htmlFor}
+			{...rest}
+			data-slot="label"
+			ref={forwardedRef}
+			{...props(labelStyles.base, typeRoles.label)}
+		>
+			{children}
+		</label>
+	);
+}

package/src/components/lightbox/lightbox-gallery.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import {
+	type ComponentPropsWithRef,
+	type KeyboardEvent,
+	useCallback,
+	useState,
+} from "react";
+import type { Closed } from "../../closed";
+import { IconChevronLeft, IconChevronRight } from "../../icons";
+import { typeRoles } from "../../styles/typography.styles";
+import {
+	guardHostProps,
+	Lightbox,
+	LightboxImage,
+	LightboxPopup,
+	LightboxTitle,
+} from "./lightbox";
+import { lightboxStyles } from "./lightbox.styles";
+
+export interface LightboxGalleryImage {
+	alt: string;
+	src: string;
+	/** A smaller file for the grid. Defaults to `src`. */
+	thumbnail?: string;
+}
+
+export type LightboxGalleryProps = Omit<
+	Closed<ComponentPropsWithRef<"ul">>,
+	"aria-label" | "children" | "data-slot"
+> & {
+	/** Names the grid and titles the open lightbox. */
+	"aria-label": string;
+	images: readonly LightboxGalleryImage[];
+};
+
+function Chevron({ next }: { next: boolean }) {
+	const Icon = next ? IconChevronRight : IconChevronLeft;
+	return (
+		<Icon
+			aria-hidden="true"
+			focusable={false}
+			size={18}
+			{...props(lightboxStyles.chevron)}
+		/>
+	);
+}
+
+function GalleryPill({
+	count,
+	index,
+	onStep,
+}: {
+	count: number;
+	index: number;
+	onStep: (delta: number) => void;
+}) {
+	const previous = useCallback(() => onStep(-1), [onStep]);
+	const next = useCallback(() => onStep(1), [onStep]);
+	const button = props(lightboxStyles.control, lightboxStyles.pillButton);
+	return (
+		<div data-slot="lightbox-gallery-controls" {...props(lightboxStyles.pill)}>
+			<button
+				aria-label="Previous image"
+				onClick={previous}
+				type="button"
+				{...button}
+			>
+				<Chevron next={false} />
+			</button>
+			<span aria-live="polite" {...props(typeRoles.ui, lightboxStyles.counter)}>
+				{index + 1} of {count}
+			</span>
+			<button aria-label="Next image" onClick={next} type="button" {...button}>
+				<Chevron next />
+			</button>
+		</div>
+	);
+}
+
+/** The open lightbox for a set of images; Message reuses it for sent files. */
+export function GalleryPopup({
+	images,
+	index,
+	onStep,
+	title,
+}: {
+	images: readonly LightboxGalleryImage[];
+	index: number;
+	onStep: (delta: number) => void;
+	title: string;
+}) {
+	const image = images[index];
+	// Arrow keys follow reading direction, so Right is previous in RTL.
+	const onKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>) => {
+			const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+			const forward = rtl ? "ArrowLeft" : "ArrowRight";
+			const back = rtl ? "ArrowRight" : "ArrowLeft";
+			if (event.key === forward || event.key === back) {
+				event.preventDefault();
+				onStep(event.key === forward ? 1 : -1);
+			}
+		},
+		[onStep]
+	);
+	if (!image) {
+		return null;
+	}
+	return (
+		<LightboxPopup onKeyDown={onKeyDown}>
+			<LightboxTitle>{title}</LightboxTitle>
+			<LightboxImage alt={image.alt} key={image.src} src={image.src} />
+			{images.length > 1 ? (
+				<GalleryPill count={images.length} index={index} onStep={onStep} />
+			) : null}
+		</LightboxPopup>
+	);
+}
+
+function GalleryItem({
+	image,
+	onOpen,
+	position,
+}: {
+	image: LightboxGalleryImage;
+	onOpen: (position: number) => void;
+	position: number;
+}) {
+	const open = useCallback(() => onOpen(position), [onOpen, position]);
+	return (
+		<li {...props(lightboxStyles.galleryCell)}>
+			<button
+				data-slot="lightbox-gallery-item"
+				onClick={open}
+				type="button"
+				{...props(lightboxStyles.galleryItem)}
+			>
+				{/* biome-ignore lint/performance/noImgElement: Lightbox uses native images so this package stays framework-neutral. */}
+				{/* biome-ignore lint/correctness/useImageSize: thumbnails fill a square cell with object-fit. */}
+				<img
+					alt={image.alt}
+					src={image.thumbnail ?? image.src}
+					{...props(lightboxStyles.galleryImage)}
+				/>
+			</button>
+		</li>
+	);
+}
+
+/**
+ * A grid of thumbnails that opens one lightbox. Previous, Next, and the arrow
+ * keys page through the set, wrapping at either end.
+ */
+export function LightboxGallery({
+	"aria-label": label,
+	images,
+	ref: forwardedRef,
+	...rest
+}: LightboxGalleryProps) {
+	const [open, setOpen] = useState(false);
+	const [index, setIndex] = useState(0);
+	const count = images.length;
+	const step = useCallback(
+		(delta: number) => setIndex((current) => (current + delta + count) % count),
+		[count]
+	);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: the React Compiler keeps this memoization only with the setters listed.
+	const openAt = useCallback(
+		(position: number) => {
+			setIndex(position);
+			setOpen(true);
+		},
+		[setIndex, setOpen]
+	);
+	if (!label?.trim()) {
+		throw new TypeError("LightboxGallery requires a non-empty aria-label.");
+	}
+	return (
+		<>
+			<ul
+				{...guardHostProps(rest)}
+				aria-label={label}
+				data-slot="lightbox-gallery"
+				ref={forwardedRef}
+				{...props(lightboxStyles.gallery)}
+			>
+				{images.map((image, position) => (
+					<GalleryItem
+						image={image}
+						key={image.src}
+						onOpen={openAt}
+						position={position}
+					/>
+				))}
+			</ul>
+			<Lightbox onOpenChange={setOpen} open={open}>
+				<GalleryPopup
+					images={images}
+					index={index}
+					onStep={step}
+					title={label}
+				/>
+			</Lightbox>
+		</>
+	);
+}