@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,128 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { codeBlockStyles } from "./code-block.styles";
+import {
+	type CodeBlockLanguage,
+	HighlightedCode,
+} from "./code-block-highlight";
+
+type Part<T> = Omit<Closed<T>, "children" | "data-slot" | "role"> & {
+	children: ReactNode;
+};
+
+export type CodeBlockProps = Part<ComponentPropsWithRef<"figure">>;
+export type CodeBlockHeaderProps = Part<ComponentPropsWithRef<"figcaption">>;
+export type CodeBlockTitleProps = Part<ComponentPropsWithRef<"span">>;
+export type CodeBlockContentProps = Omit<
+	Closed<ComponentPropsWithRef<"pre">>,
+	"aria-label" | "children" | "data-slot" | "role" | "tabIndex"
+> & {
+	"aria-label": string;
+	children: ReactNode;
+	/** Colors string children as this language. Without it, code stays plain. */
+	language?: CodeBlockLanguage;
+};
+
+function stripReservedProps(attributes: object) {
+	for (const name of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(attributes, name);
+	}
+}
+
+export function CodeBlock({
+	children,
+	ref: forwardedRef,
+	...rest
+}: CodeBlockProps) {
+	stripReservedProps(rest);
+	return (
+		<figure
+			{...rest}
+			data-slot="code-block"
+			ref={forwardedRef}
+			{...props(codeBlockStyles.root, typeRoles.body)}
+		>
+			{children}
+		</figure>
+	);
+}
+
+export function CodeBlockHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: CodeBlockHeaderProps) {
+	stripReservedProps(rest);
+	return (
+		<figcaption
+			{...rest}
+			data-slot="code-block-header"
+			ref={forwardedRef}
+			{...props(codeBlockStyles.header, typeRoles.body)}
+		>
+			{children}
+		</figcaption>
+	);
+}
+
+export function CodeBlockTitle({
+	children,
+	ref: forwardedRef,
+	...rest
+}: CodeBlockTitleProps) {
+	stripReservedProps(rest);
+	return (
+		<span
+			{...rest}
+			data-slot="code-block-title"
+			ref={forwardedRef}
+			{...props(typeRoles.ui, codeBlockStyles.title)}
+		>
+			{children}
+		</span>
+	);
+}
+
+export function CodeBlockContent({
+	"aria-label": ariaLabel,
+	children,
+	language,
+	ref: forwardedRef,
+	...rest
+}: CodeBlockContentProps) {
+	if (!ariaLabel.trim()) {
+		throw new TypeError(
+			"CodeBlockContent requires a non-empty accessible name."
+		);
+	}
+	stripReservedProps(rest);
+	Reflect.deleteProperty(rest, "tabIndex");
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: pre preserves code semantics while naming the scroll region.
+		<pre
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="code-block-content"
+			ref={forwardedRef}
+			role="region"
+			// biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard focus lets users scroll long code.
+			tabIndex={0}
+			{...props(typeRoles.mono, codeBlockStyles.content)}
+		>
+			<code data-language={language} {...props(codeBlockStyles.code)}>
+				{language && typeof children === "string" ? (
+					<HighlightedCode code={children} language={language} />
+				) : (
+					children
+				)}
+			</code>
+		</pre>
+	);
+}
+
+export type { CodeBlockCopyProps } from "./code-block-copy";
+// biome-ignore lint/performance/noBarrelFile: Keep the complete code block API beside its native figure anatomy.
+export { CodeBlockCopy } from "./code-block-copy";
+export type { CodeBlockLanguage } from "./code-block-highlight";

package/src/components/collapsible/collapsible.styles.ts

@@ -0,0 +1,22 @@
+import { create } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const collapsibleStyles = create({
+	content: { paddingBlockStart: space["2"] },
+	panel: {
+		height: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: "var(--collapsible-panel-height)",
+		},
+		overflow: "hidden",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "height",
+		transitionTimingFunction: easing.expoOut,
+	},
+});

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { protectRenderSlot } from "../../render-utils";
+import { Button } from "../button/button";
+import { collapsibleStyles } from "./collapsible.styles";
+
+type BaseCollapsibleRootProps = ComponentPropsWithRef<
+	typeof BaseCollapsible.Root
+>;
+type BaseCollapsibleTriggerProps = ComponentPropsWithRef<
+	typeof BaseCollapsible.Trigger
+>;
+type BaseCollapsiblePanelProps = ComponentPropsWithRef<
+	typeof BaseCollapsible.Panel
+>;
+
+export type CollapsibleProps = Omit<
+	BaseCollapsibleRootProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseCollapsibleRootProps["ref"];
+};
+
+export type CollapsibleTriggerProps = Omit<
+	BaseCollapsibleTriggerProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseCollapsibleTriggerProps["ref"];
+};
+
+export type CollapsiblePanelProps = Omit<
+	BaseCollapsiblePanelProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseCollapsiblePanelProps["ref"];
+};
+
+export function Collapsible({
+	ref: forwardedRef,
+	render,
+	...rest
+}: CollapsibleProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseCollapsible.Root
+			{...rest}
+			data-slot="collapsible"
+			ref={forwardedRef}
+			render={protectRenderSlot("collapsible", render)}
+		/>
+	);
+}
+
+export function CollapsibleTrigger({
+	ref: forwardedRef,
+	render,
+	...rest
+}: CollapsibleTriggerProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseCollapsible.Trigger
+			{...rest}
+			data-slot="collapsible-trigger"
+			ref={forwardedRef}
+			render={protectRenderSlot(
+				"collapsible-trigger",
+				render ?? <Button variant="ghost" />
+			)}
+		/>
+	);
+}
+
+export function CollapsiblePanel({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: CollapsiblePanelProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseCollapsible.Panel
+			{...rest}
+			data-slot="collapsible-panel"
+			ref={forwardedRef}
+			render={protectRenderSlot("collapsible-panel", render)}
+			{...props(collapsibleStyles.panel)}
+		>
+			<div
+				data-slot="collapsible-content"
+				{...props(collapsibleStyles.content)}
+			>
+				{children}
+			</div>
+		</BaseCollapsible.Panel>
+	);
+}
+export const CollapsiblePrimitive = BaseCollapsible;

package/src/components/combobox/combobox-chips.styles.ts

@@ -0,0 +1,182 @@
+import { create } from "@stylexjs/stylex";
+import { colors, fieldColors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+} 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 comboboxChipsStyles = create({
+	chip: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: colors.secondary,
+		borderRadius: shape.controlRadius,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "inline-flex",
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["20"],
+		minHeight: "1.5rem",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: {
+			":focus-visible": focus.offset,
+			default: focus.offset,
+		},
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: "solid",
+		},
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: 0,
+		},
+		paddingInlineStart: space["2"],
+	},
+	chipRemove: {
+		alignItems: "center",
+		// Fill the chip's height: a 24px target, not the 16px glyph.
+		alignSelf: "stretch",
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderWidth: 0,
+		color: "currentColor",
+		cursor: "pointer",
+		display: "inline-flex",
+		justifyContent: "center",
+		opacity: {
+			":hover": { [conditions.canHover]: 1 },
+			default: 0.8,
+		},
+		outline: "none",
+		paddingBlock: 0,
+		paddingInline: space["1"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	chips: {
+		alignItems: "center",
+
+		animationDuration: {
+			":focus-within": focusMotion.duration,
+		},
+		animationName: {
+			":focus-within": focusMotion.ring,
+		},
+		backgroundColor: {
+			":has([data-slot='combobox-chips-input']:disabled)": fieldColors.disabled,
+			default: fieldColors.surface,
+		},
+		borderColor: {
+			":is([aria-invalid='true'], [data-invalid], :has([data-slot='combobox-chips-input']:is([aria-invalid='true'], [data-invalid]))):not(:has([data-slot='combobox-chips-input']:disabled))": `color-mix(in oklch, ${colors.destructive} 54%, ${fieldColors.surface})`,
+			default: "transparent",
+		},
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: {
+			":has([data-slot='combobox-chips-input']:disabled)": "none",
+			default: shadows.recessedRest,
+		},
+		boxSizing: "border-box",
+		color: {
+			":has([data-slot='combobox-chips-input']:disabled)": colors.mutedContent,
+			default: colors.content,
+		},
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+		minHeight: {
+			":has([data-size='lg'])": controlSize.lg,
+			":has([data-size='sm'])": controlSize.sm,
+			default: controlSize.md,
+		},
+		outlineColor: {
+			":focus-within": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: {
+			":focus-within": focus.offset,
+			default: focus.offset,
+		},
+		outlineStyle: {
+			":focus-within": "solid",
+			default: "solid",
+		},
+		outlineWidth: {
+			":focus-within": borderWidth.focus,
+			default: 0,
+		},
+		padding: space["1"],
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "border-color, box-shadow, outline-color",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	chipsInput: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		backgroundColor: "transparent",
+		borderWidth: 0,
+		boxSizing: "border-box",
+		color: "inherit",
+		flexBasis: "3rem",
+		flexGrow: 1,
+		flexShrink: 1,
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		lineHeight: lineHeight["24"],
+		minWidth: "3rem",
+		outline: "none",
+		paddingBlock: space["0"],
+		paddingInline: space["1"],
+	},
+	chipsInputDefault: {
+		fontSize: fontSize["16"],
+		minHeight: "1.75rem",
+	},
+	chipsInputLg: {
+		fontSize: fontSize["16"],
+		minHeight: "2rem",
+	},
+	chipsInputSm: {
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		minHeight: "1.5rem",
+	},
+	startAddon: {
+		alignItems: "center",
+		color: colors.content,
+		display: "inline-flex",
+		flexShrink: 0,
+		opacity: 0.8,
+		paddingInlineEnd: space["1"],
+		paddingInlineStart: space["1"],
+	},
+});

package/src/components/combobox/combobox-chips.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback, useContext } from "react";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import type {
+	ComboboxChipProps,
+	ComboboxChipRemoveProps,
+	ComboboxChipsInputProps,
+	ComboboxChipsProps,
+	ComboboxSize,
+} from "./combobox.types";
+import { comboboxChipsStyles } from "./combobox-chips.styles";
+import { ComboboxContext, XIcon } from "./combobox-context";
+
+export function ComboboxChipRemove({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxChipRemoveProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.ChipRemove
+			aria-label="Remove"
+			{...rest}
+			data-slot="combobox-chip-remove"
+			ref={forwardedRef}
+			render={protectSlot("combobox-chip-remove", render)}
+			{...props(comboboxChipsStyles.chipRemove)}
+		>
+			{children ?? <XIcon />}
+		</ComboboxPrimitive.ChipRemove>
+	);
+}
+
+export function ComboboxChip({
+	children,
+	ref: forwardedRef,
+	removeProps,
+	render,
+	...rest
+}: ComboboxChipProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Chip
+			{...rest}
+			data-slot="combobox-chip"
+			ref={forwardedRef}
+			render={protectSlot("combobox-chip", render)}
+			{...props(comboboxChipsStyles.chip)}
+		>
+			{controlLabel(children)}
+			<ComboboxChipRemove aria-label="Remove" {...removeProps} />
+		</ComboboxPrimitive.Chip>
+	);
+}
+
+export function ComboboxChips({
+	children,
+	ref: forwardedRef,
+	render,
+	startAddon,
+	...rest
+}: ComboboxChipsProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	const { chipsRef } = useContext(ComboboxContext);
+	const targetRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (chipsRef) {
+				chipsRef.current = element;
+			}
+			const cleanup =
+				typeof forwardedRef === "function" ? forwardedRef(element) : undefined;
+			if (forwardedRef && "current" in forwardedRef) {
+				forwardedRef.current = element;
+			}
+
+			return () => {
+				if (chipsRef) {
+					chipsRef.current = null;
+				}
+				if (typeof cleanup === "function") {
+					cleanup();
+				} else if (typeof forwardedRef === "function") {
+					if (element !== null) {
+						forwardedRef(null);
+					}
+				} else if (forwardedRef && "current" in forwardedRef) {
+					forwardedRef.current = null;
+				}
+			};
+		},
+		[chipsRef, forwardedRef]
+	);
+
+	return (
+		<ComboboxPrimitive.Chips
+			{...rest}
+			data-slot="combobox-chips"
+			ref={targetRef}
+			render={protectSlot("combobox-chips", render)}
+			{...props(comboboxChipsStyles.chips)}
+		>
+			{startAddon ? (
+				<div
+					aria-hidden="true"
+					data-slot="combobox-start-addon"
+					{...props(comboboxChipsStyles.startAddon)}
+				>
+					{startAddon}
+				</div>
+			) : null}
+			{children}
+		</ComboboxPrimitive.Chips>
+	);
+}
+
+const chipsInputSizeStyles = {
+	default: comboboxChipsStyles.chipsInputDefault,
+	lg: comboboxChipsStyles.chipsInputLg,
+	sm: comboboxChipsStyles.chipsInputSm,
+};
+
+function getChipsInputSizeStyle(size?: ComboboxSize | number) {
+	if (size === "lg") {
+		return chipsInputSizeStyles.lg;
+	}
+	if (size === "sm") {
+		return chipsInputSizeStyles.sm;
+	}
+	return chipsInputSizeStyles.default;
+}
+
+export function ComboboxChipsInput({
+	ref: forwardedRef,
+	render,
+	size = "default",
+	...rest
+}: ComboboxChipsInputProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	const sizeProp = typeof size === "number" ? size : undefined;
+	const dataSize = typeof size === "string" ? size : undefined;
+	const sizeStyle = getChipsInputSizeStyle(size);
+
+	return (
+		<ComboboxPrimitive.Input
+			{...rest}
+			data-size={dataSize}
+			data-slot="combobox-chips-input"
+			ref={forwardedRef}
+			render={protectSlot("combobox-chips-input", render)}
+			size={sizeProp}
+			{...props(comboboxChipsStyles.chipsInput, sizeStyle)}
+		/>
+	);
+}

package/src/components/combobox/combobox-context.tsx

@@ -0,0 +1,26 @@
+import type { Context, ReactElement, RefObject } from "react";
+import { createContext } from "react";
+import { IconCheck, IconSelector, IconX } from "../../icons";
+
+export interface ComboboxContextValue {
+	chipsRef: RefObject<Element | null> | null;
+	multiple: boolean;
+}
+
+export const ComboboxContext: Context<ComboboxContextValue> =
+	createContext<ComboboxContextValue>({
+		chipsRef: null,
+		multiple: false,
+	});
+
+export function ChevronsUpDownIcon(): ReactElement {
+	return <IconSelector aria-hidden="true" focusable="false" size="16" />;
+}
+
+export function CheckIcon(): ReactElement {
+	return <IconCheck aria-hidden="true" focusable="false" size="16" />;
+}
+
+export function XIcon(): ReactElement {
+	return <IconX aria-hidden="true" focusable="false" size="16" />;
+}