@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import type {
+	ComboboxEmptyProps,
+	ComboboxGroupLabelProps,
+	ComboboxGroupProps,
+	ComboboxRowProps,
+	ComboboxSeparatorProps,
+	ComboboxStatusProps,
+} from "./combobox.types";
+import { comboboxPopupStyles } from "./combobox-popup.styles";
+
+export function ComboboxSeparator({
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxSeparatorProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Separator
+			{...rest}
+			data-slot="combobox-separator"
+			ref={forwardedRef}
+			render={protectSlot("combobox-separator", render)}
+			{...props(comboboxPopupStyles.separator)}
+		/>
+	);
+}
+
+export function ComboboxGroup({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxGroupProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Group
+			{...rest}
+			data-slot="combobox-group"
+			ref={forwardedRef}
+			render={protectSlot("combobox-group", render)}
+			{...props(comboboxPopupStyles.group)}
+		>
+			{children}
+		</ComboboxPrimitive.Group>
+	);
+}
+
+export function ComboboxGroupLabel({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxGroupLabelProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.GroupLabel
+			{...rest}
+			data-slot="combobox-group-label"
+			ref={forwardedRef}
+			render={protectSlot("combobox-group-label", render)}
+			{...props(comboboxPopupStyles.groupLabel)}
+		>
+			{children}
+		</ComboboxPrimitive.GroupLabel>
+	);
+}
+
+export function ComboboxEmpty({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxEmptyProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Empty
+			{...rest}
+			data-slot="combobox-empty"
+			ref={forwardedRef}
+			render={protectSlot("combobox-empty", render)}
+			{...props(comboboxPopupStyles.empty)}
+		>
+			{children}
+		</ComboboxPrimitive.Empty>
+	);
+}
+
+export function ComboboxRow({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxRowProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Row
+			{...rest}
+			data-slot="combobox-row"
+			ref={forwardedRef}
+			render={protectSlot("combobox-row", render)}
+			{...props(comboboxPopupStyles.row)}
+		>
+			{children}
+		</ComboboxPrimitive.Row>
+	);
+}
+
+export function ComboboxStatus({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ComboboxStatusProps): ReactElement {
+	Reflect.deleteProperty(rest, "data-slot");
+
+	return (
+		<ComboboxPrimitive.Status
+			{...rest}
+			data-slot="combobox-status"
+			ref={forwardedRef}
+			render={protectSlot("combobox-status", render)}
+			{...props(comboboxPopupStyles.status)}
+		>
+			{children}
+		</ComboboxPrimitive.Status>
+	);
+}

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type { ReactElement } from "react";
+import { useRef } from "react";
+import type {
+	ComboboxChipProps,
+	ComboboxChipRemoveProps,
+	ComboboxChipsInputProps,
+	ComboboxChipsProps,
+	ComboboxClearProps,
+	ComboboxEmptyProps,
+	ComboboxGroupLabelProps,
+	ComboboxGroupProps,
+	ComboboxInputProps,
+	ComboboxItemProps,
+	ComboboxListProps,
+	ComboboxPopupProps,
+	ComboboxProps,
+	ComboboxRowProps,
+	ComboboxSeparatorProps,
+	ComboboxStatusProps,
+	ComboboxTriggerProps,
+} from "./combobox.types";
+import {
+	ComboboxChip as BaseComboboxChip,
+	ComboboxChipRemove as BaseComboboxChipRemove,
+	ComboboxChips as BaseComboboxChips,
+	ComboboxChipsInput as BaseComboboxChipsInput,
+} from "./combobox-chips";
+import { ComboboxContext as BaseComboboxContext } from "./combobox-context";
+import {
+	ComboboxClear as BaseComboboxClear,
+	ComboboxInput as BaseComboboxInput,
+	ComboboxTrigger as BaseComboboxTrigger,
+} from "./combobox-input";
+import {
+	ComboboxItem as BaseComboboxItem,
+	ComboboxList as BaseComboboxList,
+	ComboboxPopup as BaseComboboxPopup,
+} from "./combobox-popup";
+import {
+	ComboboxEmpty as BaseComboboxEmpty,
+	ComboboxGroup as BaseComboboxGroup,
+	ComboboxGroupLabel as BaseComboboxGroupLabel,
+	ComboboxRow as BaseComboboxRow,
+	ComboboxSeparator as BaseComboboxSeparator,
+	ComboboxStatus as BaseComboboxStatus,
+} from "./combobox-structure";
+
+export function Combobox<
+	Value,
+	Multiple extends boolean | undefined = false,
+	Item = Value,
+>(props: ComboboxProps<Value, Multiple, Item>): ReactElement {
+	const chipsRef = useRef<Element | null>(null);
+	return (
+		<BaseComboboxContext.Provider
+			value={{ chipsRef, multiple: Boolean(props.multiple) }}
+		>
+			<BaseCombobox.Root {...props} />
+		</BaseComboboxContext.Provider>
+	);
+}
+
+export const ComboboxContext = BaseComboboxContext;
+export const ComboboxPrimitive = BaseCombobox;
+export const ComboboxValue = BaseCombobox.Value;
+export const ComboboxCollection = BaseCombobox.Collection;
+export const createComboboxItems = BaseCombobox.createItems;
+export const useComboboxFilter = BaseCombobox.useFilter;
+
+export function ComboboxChips(props: ComboboxChipsProps): ReactElement {
+	return <BaseComboboxChips {...props} />;
+}
+
+export function ComboboxChip(props: ComboboxChipProps): ReactElement {
+	return <BaseComboboxChip {...props} />;
+}
+
+export function ComboboxChipRemove(
+	props: ComboboxChipRemoveProps
+): ReactElement {
+	return <BaseComboboxChipRemove {...props} />;
+}
+
+export function ComboboxChipsInput(
+	props: ComboboxChipsInputProps
+): ReactElement {
+	return <BaseComboboxChipsInput {...props} />;
+}
+
+export function ComboboxInput(props: ComboboxInputProps): ReactElement {
+	return <BaseComboboxInput {...props} />;
+}
+
+export function ComboboxTrigger(props: ComboboxTriggerProps): ReactElement {
+	return <BaseComboboxTrigger {...props} />;
+}
+
+export function ComboboxClear(props: ComboboxClearProps): ReactElement {
+	return <BaseComboboxClear {...props} />;
+}
+
+export function ComboboxPopup(props: ComboboxPopupProps): ReactElement {
+	return <BaseComboboxPopup {...props} />;
+}
+
+export function ComboboxItem(props: ComboboxItemProps): ReactElement {
+	return <BaseComboboxItem {...props} />;
+}
+
+export function ComboboxList(props: ComboboxListProps): ReactElement {
+	return <BaseComboboxList {...props} />;
+}
+
+export function ComboboxGroup(props: ComboboxGroupProps): ReactElement {
+	return <BaseComboboxGroup {...props} />;
+}
+
+export function ComboboxGroupLabel(
+	props: ComboboxGroupLabelProps
+): ReactElement {
+	return <BaseComboboxGroupLabel {...props} />;
+}
+
+export function ComboboxSeparator(props: ComboboxSeparatorProps): ReactElement {
+	return <BaseComboboxSeparator {...props} />;
+}
+
+export function ComboboxEmpty(props: ComboboxEmptyProps): ReactElement {
+	return <BaseComboboxEmpty {...props} />;
+}
+
+export function ComboboxRow(props: ComboboxRowProps): ReactElement {
+	return <BaseComboboxRow {...props} />;
+}
+
+export function ComboboxStatus(props: ComboboxStatusProps): ReactElement {
+	return <BaseComboboxStatus {...props} />;
+}
+
+export type {
+	ComboboxChipProps,
+	ComboboxChipRemoveProps,
+	ComboboxChipsInputProps,
+	ComboboxChipsProps,
+	ComboboxClearProps,
+	ComboboxEmptyProps,
+	ComboboxGroupLabelProps,
+	ComboboxGroupProps,
+	ComboboxInputProps,
+	ComboboxItemProps,
+	ComboboxListProps,
+	ComboboxPopupProps,
+	ComboboxProps,
+	ComboboxRowProps,
+	ComboboxSeparatorProps,
+	ComboboxSize,
+	ComboboxStatusProps,
+	ComboboxTriggerProps,
+} from "./combobox.types";

package/src/components/combobox/combobox.types.ts

@@ -0,0 +1,77 @@
+import type { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+
+export type ComboboxSize = "default" | "lg" | "sm";
+
+export type ComboboxProps<
+	Value,
+	Multiple extends boolean | undefined = false,
+	Item = Value,
+> = ComboboxPrimitive.Root.Props<Value, Multiple, Item>;
+
+export type ComboboxInputProps = Closed<
+	Omit<ComboboxPrimitive.Input.Props, "size"> & {
+		clearProps?: ComboboxPrimitive.Clear.Props;
+		ref?: ComponentPropsWithRef<"input">["ref"];
+		showClear?: boolean;
+		showTrigger?: boolean;
+		size?: ComboboxSize | number;
+		startAddon?: ReactNode;
+		triggerProps?: ComboboxPrimitive.Trigger.Props;
+	}
+>;
+
+export type ComboboxChipsInputProps = Closed<
+	Omit<ComboboxPrimitive.Input.Props, "size"> & {
+		ref?: ComponentPropsWithRef<"input">["ref"];
+		size?: ComboboxSize | number;
+	}
+>;
+
+export type ComboboxTriggerProps = Closed<ComboboxPrimitive.Trigger.Props>;
+
+export type ComboboxClearProps = Closed<ComboboxPrimitive.Clear.Props>;
+
+export type ComboboxPopupProps = Closed<
+	ComboboxPrimitive.Popup.Props & {
+		align?: ComboboxPrimitive.Positioner.Props["align"];
+		alignOffset?: ComboboxPrimitive.Positioner.Props["alignOffset"];
+		anchor?: ComboboxPrimitive.Positioner.Props["anchor"];
+		portalProps?: Closed<ComboboxPrimitive.Portal.Props>;
+		side?: ComboboxPrimitive.Positioner.Props["side"];
+		sideOffset?: ComboboxPrimitive.Positioner.Props["sideOffset"];
+	}
+>;
+
+export type ComboboxItemProps = Closed<ComboboxPrimitive.Item.Props>;
+
+export type ComboboxSeparatorProps = Closed<ComboboxPrimitive.Separator.Props>;
+
+export type ComboboxGroupProps = Closed<ComboboxPrimitive.Group.Props>;
+
+export type ComboboxGroupLabelProps =
+	Closed<ComboboxPrimitive.GroupLabel.Props>;
+
+export type ComboboxEmptyProps = Closed<ComboboxPrimitive.Empty.Props>;
+
+export type ComboboxRowProps = Closed<ComboboxPrimitive.Row.Props>;
+
+export type ComboboxListProps = Closed<ComboboxPrimitive.List.Props>;
+
+export type ComboboxStatusProps = Closed<ComboboxPrimitive.Status.Props>;
+
+export type ComboboxChipsProps = Closed<
+	ComboboxPrimitive.Chips.Props & {
+		startAddon?: ReactNode;
+	}
+>;
+
+export type ComboboxChipProps = Closed<
+	ComboboxPrimitive.Chip.Props & {
+		removeProps?: ComboboxPrimitive.ChipRemove.Props;
+	}
+>;
+
+export type ComboboxChipRemoveProps =
+	Closed<ComboboxPrimitive.ChipRemove.Props>;

package/src/components/command/command-dialog.styles.ts

@@ -0,0 +1,43 @@
+import { create } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const commandDialogStyles = create({
+	backdrop: { zIndex: 50 },
+	popup: {
+		maxHeight: "min(26.25rem, calc(100dvh - 2rem))",
+		maxWidth: "36rem",
+		minHeight: 0,
+		minWidth: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: "calc(1 - 0.1 * var(--nested-dialogs, 0))",
+		},
+		transform: {
+			"[data-ending-style]": "translateY(0.25rem) scale(0.98)",
+			"[data-starting-style]": "translateY(0.5rem) scale(0.96)",
+			default:
+				"translateY(calc(-1.25rem * var(--nested-dialogs, 0))) scale(calc(1 - 0.1 * var(--nested-dialogs, 0)))",
+		},
+	},
+	viewport: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		inset: 0,
+		overflowY: "auto",
+		overscrollBehavior: "contain",
+		paddingBlock: {
+			[conditions.sm]: "10vh",
+			default: "max(1rem, 4vh)",
+		},
+		paddingInline: {
+			[conditions.sm]: space["4"],
+			default: space["2"],
+		},
+		position: "fixed",
+		zIndex: 50,
+	},
+});

package/src/components/command/command-dialog.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import { dialogStyles } from "../dialog/dialog.styles";
+import type {
+	CommandDialogBackdropProps,
+	CommandDialogPopupProps,
+	CommandDialogTriggerProps,
+	CommandDialogViewportProps,
+} from "./command.types";
+import { commandDialogStyles } from "./command-dialog.styles";
+
+export const CommandDialogPrimitive = BaseDialog;
+
+export const CommandDialog = BaseDialog.Root;
+
+export const CommandDialogPortal: (
+	props: Closed<BaseDialog.Portal.Props>
+) => ReactNode = BaseDialog.Portal;
+
+export const CommandCreateHandle = BaseDialog.createHandle;
+
+export function CommandDialogTrigger<Payload = unknown>({
+	ref: forwardedRef = undefined,
+	render,
+	type,
+	...rest
+}: CommandDialogTriggerProps<Payload>): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<CommandDialogPrimitive.Trigger
+			{...rest}
+			data-slot="command-dialog-trigger"
+			ref={forwardedRef}
+			render={protectSlot("command-dialog-trigger", render)}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function CommandDialogBackdrop({
+	ref: forwardedRef = undefined,
+	render,
+	...rest
+}: CommandDialogBackdropProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<CommandDialogPrimitive.Backdrop
+			{...rest}
+			data-slot="command-dialog-backdrop"
+			ref={forwardedRef}
+			render={protectSlot("command-dialog-backdrop", render)}
+			{...props(
+				dialogStyles.backdrop,
+				overlayLayerStyles.backdrop,
+				commandDialogStyles.backdrop
+			)}
+		/>
+	);
+}
+
+export function CommandDialogViewport({
+	children,
+	ref: forwardedRef = undefined,
+	render,
+	...rest
+}: CommandDialogViewportProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<CommandDialogPrimitive.Viewport
+			{...rest}
+			data-slot="command-dialog-viewport"
+			ref={forwardedRef}
+			render={protectSlot("command-dialog-viewport", render)}
+			{...props(commandDialogStyles.viewport)}
+		>
+			{children}
+		</CommandDialogPrimitive.Viewport>
+	);
+}
+
+export function CommandDialogPopup({
+	children,
+	portalProps,
+	ref: forwardedRef = undefined,
+	render,
+	...rest
+}: CommandDialogPopupProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<CommandDialogPortal
+			{...portalProps}
+			{...props(overlayLayerStyles.modalPortal)}
+		>
+			<CommandDialogBackdrop />
+			<CommandDialogViewport>
+				<CommandDialogPrimitive.Popup
+					{...rest}
+					data-slot="command-dialog-popup"
+					ref={forwardedRef}
+					render={protectSlot("command-dialog-popup", render)}
+					{...props(dialogStyles.popup, commandDialogStyles.popup)}
+				>
+					{children}
+				</CommandDialogPrimitive.Popup>
+			</CommandDialogViewport>
+		</CommandDialogPortal>
+	);
+}

package/src/components/command/command-field.styles.ts

@@ -0,0 +1,59 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const commandFieldStyles = create({
+	// A plain search row, not a field: focus never leaves this input while the
+	// arrows move through results, so the caret marks focus and a ring would
+	// sit there permanently (design contract, section 5).
+	input: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderWidth: 0,
+		boxSizing: "border-box",
+		color: { ":disabled": colors.mutedContent, default: colors.content },
+		cursor: { ":disabled": "not-allowed", default: "text" },
+		display: "block",
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		height: controlSize.xl,
+		lineHeight: lineHeight["24"],
+		minWidth: 0,
+		outline: "none",
+		paddingBlock: 0,
+		paddingInlineEnd: space["3"],
+		paddingInlineStart: space["10"],
+		width: "100%",
+	},
+	inputGroup: { position: "relative", width: "100%" },
+	inputWrapper: {
+		borderBlockEndColor: colors.border,
+		borderBlockEndStyle: "solid",
+		borderBlockEndWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		paddingInline: space["1"],
+		width: "100%",
+	},
+	startAddon: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "inline-flex",
+		height: "100%",
+		insetBlock: 0,
+		insetInlineStart: space["3"],
+		justifyContent: "center",
+		pointerEvents: "none",
+		position: "absolute",
+		width: "1rem",
+		zIndex: 1,
+	},
+});

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { IconSearch } from "../../icons";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import type { CommandInputProps } from "./command.types";
+import { commandFieldStyles } from "./command-field.styles";
+
+function SearchIcon(): ReactElement {
+	return <IconSearch aria-hidden="true" focusable="false" size="16" />;
+}
+
+export function CommandInput({
+	autoFocus = true,
+	disabled = false,
+	placeholder,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	render,
+	startAddon,
+	...rest
+}: CommandInputProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			{...props(commandFieldStyles.inputWrapper)}
+		>
+			<BaseAutocomplete.InputGroup
+				data-slot="command-input-group"
+				{...props(commandFieldStyles.inputGroup)}
+			>
+				<div
+					aria-hidden="true"
+					data-slot="command-start-addon"
+					{...props(commandFieldStyles.startAddon)}
+				>
+					{startAddon ?? <SearchIcon />}
+				</div>
+				<BaseAutocomplete.Input
+					{...rest}
+					autoFocus={autoFocus}
+					data-slot="command-input"
+					disabled={disabled}
+					placeholder={placeholder}
+					readOnly={readOnly}
+					ref={forwardedRef}
+					render={protectSlot("command-input", render)}
+					{...props(commandFieldStyles.input)}
+				/>
+			</BaseAutocomplete.InputGroup>
+		</div>
+	);
+}