@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/date-range-picker/date-range-picker-views.tsx

@@ -0,0 +1,144 @@
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback } from "react";
+import { Calendar } from "../calendar/calendar";
+import type { CalendarRangeValue } from "../calendar/calendar.types";
+import { dateRangePickerStyles } from "./date-range-picker.styles";
+import type {
+	DateRangePickerProps,
+	DateRangePreset,
+} from "./date-range-picker.types";
+import type { RangeConstraints } from "./date-range-picker-date";
+import { isRangeConstraintSatisfied } from "./date-range-picker-date";
+
+interface DateRangePresetButtonProps {
+	readonly disabled: boolean;
+	readonly label: string;
+	readonly onSelect: (value: CalendarRangeValue) => void;
+	readonly value: CalendarRangeValue;
+}
+
+function DateRangePresetButton({
+	disabled,
+	label,
+	onSelect,
+	value,
+}: DateRangePresetButtonProps): ReactElement {
+	const handleClick = useCallback(() => {
+		onSelect(value);
+	}, [onSelect, value]);
+
+	return (
+		<button
+			disabled={disabled}
+			onClick={handleClick}
+			type="button"
+			{...props(
+				dateRangePickerStyles.presetButton,
+				disabled && dateRangePickerStyles.presetButtonDisabled
+			)}
+		>
+			{label}
+		</button>
+	);
+}
+
+interface DateRangePresetsListProps {
+	readonly constraints: RangeConstraints;
+	readonly disabled: boolean;
+	readonly onSelect: (value: CalendarRangeValue) => void;
+	readonly presets?: readonly DateRangePreset[] | undefined;
+	readonly readOnly: boolean;
+}
+
+function DateRangePresetsList({
+	constraints,
+	disabled,
+	onSelect,
+	presets,
+	readOnly,
+}: DateRangePresetsListProps): ReactElement | null {
+	if (!presets || presets.length === 0) {
+		return null;
+	}
+
+	return (
+		<div {...props(dateRangePickerStyles.presetsRow)}>
+			{presets.map((preset) => {
+				const isPresetValid = isRangeConstraintSatisfied(
+					preset.value,
+					constraints
+				);
+				const isBtnDisabled = disabled || readOnly || !isPresetValid;
+
+				return (
+					<DateRangePresetButton
+						disabled={isBtnDisabled}
+						key={preset.label}
+						label={preset.label}
+						onSelect={onSelect}
+						value={preset.value}
+					/>
+				);
+			})}
+		</div>
+	);
+}
+
+export interface DateRangeCalendarViewProps {
+	readonly committedValue?: CalendarRangeValue | undefined;
+	readonly constraints: RangeConstraints;
+	readonly disabled: boolean;
+	readonly onCalendarSelect: (value: CalendarRangeValue | undefined) => void;
+	readonly onPresetSelect: (value: CalendarRangeValue) => void;
+	readonly props: DateRangePickerProps;
+	readonly readOnly: boolean;
+}
+
+export function DateRangeCalendarView({
+	committedValue,
+	constraints,
+	disabled,
+	onCalendarSelect,
+	onPresetSelect,
+	props: calendarViewProps,
+	readOnly,
+}: DateRangeCalendarViewProps): ReactElement {
+	return (
+		<div {...props(dateRangePickerStyles.popupContainer)}>
+			<DateRangePresetsList
+				constraints={constraints}
+				disabled={disabled}
+				onSelect={onPresetSelect}
+				presets={calendarViewProps.presets}
+				readOnly={readOnly}
+			/>
+			<Calendar
+				aria-label={
+					calendarViewProps["aria-label"] ?? "Date range picker calendar"
+				}
+				autoFocus
+				captionLayout={calendarViewProps.captionLayout}
+				defaultMonth={committedValue?.from}
+				dir={calendarViewProps.dir}
+				disabled={disabled}
+				endMonth={calendarViewProps.endMonth}
+				isDateUnavailable={calendarViewProps.isDateUnavailable}
+				locale={calendarViewProps.locale}
+				maxNights={calendarViewProps.maxNights}
+				maxValue={calendarViewProps.maxValue}
+				minNights={calendarViewProps.minNights ?? 0}
+				minValue={calendarViewProps.minValue}
+				mode="range"
+				onValueChange={onCalendarSelect}
+				readOnly={readOnly}
+				required={calendarViewProps.required}
+				resetOnSelect
+				startMonth={calendarViewProps.startMonth}
+				value={committedValue}
+				variant="embedded"
+				weekStartsOn={calendarViewProps.weekStartsOn}
+			/>
+		</div>
+	);
+}

package/src/components/date-range-picker/date-range-picker.styles.ts

@@ -0,0 +1,80 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+	opacity,
+} 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 dateRangePickerStyles = create({
+	popupContainer: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: colors.border,
+		borderRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		maxWidth: "100vw",
+		overflow: "hidden",
+	},
+	presetButton: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":hover": { [conditions.canHover]: colors.secondary },
+			default: "transparent",
+		},
+		borderColor: colors.border,
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		color: colors.content,
+		cursor: "pointer",
+		display: "inline-flex",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		paddingBlock: space["1"],
+		paddingInline: space["1"],
+		whiteSpace: "nowrap",
+	},
+	presetButtonDisabled: {
+		cursor: "not-allowed",
+		opacity: opacity.disabled,
+	},
+	presetsRow: {
+		borderBottomColor: colors.border,
+		borderBottomStyle: "solid",
+		borderBottomWidth: borderWidth.thin,
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+		padding: space["3"],
+	},
+});

package/src/components/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { assignRef } from "../../ref-utils";
+import type { CalendarRangeValue } from "../calendar/calendar.types";
+import { datePickerStyles } from "../date-picker/date-picker.styles";
+import { CalendarIcon } from "../date-picker/date-picker-icon";
+import { BoundFieldProvider } from "../field/field-context";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "../input-group/input-group";
+import { Popover, PopoverPopup, PopoverTrigger } from "../popover/popover";
+import type { DateRangePickerProps } from "./date-range-picker.types";
+import {
+	formatIsoRange,
+	getRangeInputValidationMessage,
+} from "./date-range-picker-date";
+import { useDateRangePickerDraft } from "./date-range-picker-state";
+import { DateRangeCalendarView } from "./date-range-picker-views";
+
+export type {
+	DateRangePickerProps,
+	DateRangePreset,
+} from "./date-range-picker.types";
+
+export function DateRangePicker(
+	dateRangePickerProps: DateRangePickerProps
+): ReactElement {
+	const [isControlled] = useState(() =>
+		Object.hasOwn(dateRangePickerProps, "value")
+	);
+	const [uncontrolledValue, setUncontrolledValue] = useState<
+		CalendarRangeValue | undefined
+	>(dateRangePickerProps.defaultValue);
+	const initialValue = useRef(dateRangePickerProps.defaultValue);
+	const committedValue = isControlled
+		? dateRangePickerProps.value
+		: uncontrolledValue;
+
+	const generatedId = useId();
+	const inputId = dateRangePickerProps.id ?? generatedId;
+
+	const committedText = useMemo(
+		() => formatIsoRange(committedValue),
+		[committedValue]
+	);
+
+	const groupRef = useRef<HTMLDivElement | null>(null);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const constraints = useMemo(
+		() => ({
+			isDateUnavailable: dateRangePickerProps.isDateUnavailable,
+			maxNights: dateRangePickerProps.maxNights,
+			maxValue: dateRangePickerProps.maxValue,
+			minNights: dateRangePickerProps.minNights,
+			minValue: dateRangePickerProps.minValue,
+			required: dateRangePickerProps.required,
+		}),
+		[
+			dateRangePickerProps.isDateUnavailable,
+			dateRangePickerProps.maxNights,
+			dateRangePickerProps.maxValue,
+			dateRangePickerProps.minNights,
+			dateRangePickerProps.minValue,
+			dateRangePickerProps.required,
+		]
+	);
+
+	const {
+		displayText,
+		handleCalendarSelect,
+		handleInputBlur,
+		handleInputChange,
+		handleInputFocus,
+		handleInputKeyDown,
+		handlePresetSelect,
+		handleDraftReset,
+		isLocalInvalid,
+	} = useDateRangePickerDraft({
+		committedText,
+		committedValue,
+		constraints,
+		disabled: dateRangePickerProps.disabled ?? false,
+		isControlled,
+		onValueChange: dateRangePickerProps.onValueChange,
+		readOnly: dateRangePickerProps.readOnly ?? false,
+		setIsOpen,
+		setUncontrolledValue,
+	});
+
+	const isEffectivelyInvalid = Boolean(
+		dateRangePickerProps.invalid || isLocalInvalid
+	);
+	const resolvedDisabled = Boolean(dateRangePickerProps.disabled);
+	const resolvedReadOnly = Boolean(dateRangePickerProps.readOnly);
+	const size = dateRangePickerProps.size ?? "default";
+	const setInputRef = useCallback(
+		(node: HTMLInputElement | null) => {
+			if (!node) {
+				return assignRef(dateRangePickerProps.ref, node);
+			}
+
+			node.setCustomValidity(
+				resolvedDisabled || resolvedReadOnly
+					? ""
+					: getRangeInputValidationMessage(displayText, constraints)
+			);
+			const { form } = node;
+			const handleFormReset = (event: Event) => {
+				queueMicrotask(() => {
+					if (event.defaultPrevented) {
+						return;
+					}
+					setUncontrolledValue(initialValue.current);
+					setIsOpen(false);
+					handleDraftReset();
+				});
+			};
+			if (form && !isControlled) {
+				form.addEventListener("reset", handleFormReset);
+			}
+			const cleanupRef = assignRef(dateRangePickerProps.ref, node);
+			return () => {
+				if (form && !isControlled) {
+					form.removeEventListener("reset", handleFormReset);
+				}
+				cleanupRef?.();
+			};
+		},
+		[
+			constraints,
+			dateRangePickerProps.ref,
+			displayText,
+			handleDraftReset,
+			isControlled,
+			resolvedDisabled,
+			resolvedReadOnly,
+		]
+	);
+
+	return (
+		<Popover onOpenChange={setIsOpen} open={isOpen}>
+			<BoundFieldProvider value={null}>
+				<InputGroup ref={groupRef}>
+					<InputGroupInput
+						aria-describedby={dateRangePickerProps["aria-describedby"]}
+						aria-label={dateRangePickerProps["aria-label"]}
+						aria-labelledby={dateRangePickerProps["aria-labelledby"]}
+						autoFocus={dateRangePickerProps.autoFocus}
+						disabled={resolvedDisabled}
+						id={inputId}
+						invalid={isEffectivelyInvalid}
+						name={dateRangePickerProps.name}
+						onBlur={handleInputBlur}
+						onChange={handleInputChange}
+						onFocus={handleInputFocus}
+						onKeyDown={handleInputKeyDown}
+						placeholder="YYYY-MM-DD – YYYY-MM-DD"
+						readOnly={resolvedReadOnly}
+						ref={setInputRef}
+						required={dateRangePickerProps.required}
+						size={size}
+						value={displayText}
+					/>
+					<InputGroupAddon align="inline-end">
+						<PopoverTrigger
+							aria-label="Open calendar"
+							disabled={resolvedDisabled}
+							{...props(
+								datePickerStyles.triggerButton,
+								resolvedDisabled && datePickerStyles.triggerButtonDisabled
+							)}
+						>
+							<span {...props(datePickerStyles.triggerIcon)}>
+								<CalendarIcon />
+							</span>
+						</PopoverTrigger>
+					</InputGroupAddon>
+				</InputGroup>
+			</BoundFieldProvider>
+
+			<PopoverPopup
+				align="start"
+				anchor={groupRef}
+				aria-label={
+					dateRangePickerProps["aria-label"] ??
+					"Date range picker calendar dialog"
+				}
+				variant="bare"
+			>
+				<DateRangeCalendarView
+					committedValue={committedValue}
+					constraints={constraints}
+					disabled={resolvedDisabled}
+					onCalendarSelect={handleCalendarSelect}
+					onPresetSelect={handlePresetSelect}
+					props={dateRangePickerProps}
+					readOnly={resolvedReadOnly}
+				/>
+			</PopoverPopup>
+		</Popover>
+	);
+}

package/src/components/date-range-picker/date-range-picker.types.ts

@@ -0,0 +1,41 @@
+import type { ComponentPropsWithRef } from "react";
+import type {
+	CalendarCommonProps,
+	CalendarLocale,
+	CalendarRangeValue,
+} from "../calendar/calendar.types";
+
+export interface DateRangePreset {
+	readonly label: string;
+	readonly value: CalendarRangeValue & { readonly to: Date };
+}
+
+export interface DateRangePickerProps {
+	readonly "aria-describedby"?: string | undefined;
+	readonly "aria-label"?: string | undefined;
+	readonly "aria-labelledby"?: string | undefined;
+	autoFocus?: boolean | undefined;
+	captionLayout?: CalendarCommonProps["captionLayout"];
+	defaultValue?: CalendarRangeValue | undefined;
+	dir?: "ltr" | "rtl" | undefined;
+	disabled?: boolean | undefined;
+	endMonth?: Date | undefined;
+	id?: string | undefined;
+	invalid?: boolean | undefined;
+	isDateUnavailable?: ((date: Date) => boolean) | undefined;
+	locale?: CalendarLocale | undefined;
+	maxNights?: number | undefined;
+	maxValue?: Date | undefined;
+	minNights?: number | undefined;
+	minValue?: Date | undefined;
+	name?: string | undefined;
+	onValueChange?: ((value: CalendarRangeValue | undefined) => void) | undefined;
+	presets?: readonly DateRangePreset[] | undefined;
+	readOnly?: boolean | undefined;
+	ref?: ComponentPropsWithRef<"input">["ref"] | undefined;
+	required?: boolean | undefined;
+	size?: "default" | "lg" | "sm" | undefined;
+	startMonth?: Date | undefined;
+	value?: CalendarRangeValue | undefined;
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}

package/src/components/date-time-input/date-time-input.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import type { ReactElement } from "react";
+import type { InputProps } from "../input/input";
+import { Input } from "../input/input";
+
+export type DateTimeInputProps = Omit<
+	InputProps,
+	| "data-slot"
+	| "defaultValue"
+	| "max"
+	| "min"
+	| "render"
+	| "type"
+	| "unstyled"
+	| "value"
+> & {
+	"data-slot"?: never;
+	defaultValue?: string;
+	max?: string;
+	min?: string;
+	render?: never;
+	type?: never;
+	unstyled?: never;
+	value?: string;
+};
+
+export function DateTimeInput(props: DateTimeInputProps): ReactElement {
+	return <Input {...props} data-slot="date-time-input" type="datetime-local" />;
+}

package/src/components/diagram/diagram-renderer.ts

@@ -0,0 +1,35 @@
+import type { Mounted, MountOptions } from "pele/core";
+
+const ZOOM_LABELS = {
+	reset: "Fit diagram",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+};
+
+/**
+ * Loads only the grammar the source uses, then mounts it. Every Mermaid type
+ * Pele renders works; cancelled mounts never touch detached DOM.
+ */
+export async function mountDiagram(
+	element: HTMLElement,
+	source: string,
+	options: MountOptions,
+	signal: AbortSignal
+): Promise<Mounted | undefined> {
+	const { detectType, load, mount } = await import("pele/lazy");
+	const supported = await load(detectType(source));
+	if (signal.aborted) {
+		return;
+	}
+	if (!supported) {
+		throw new Error("This diagram type isn't supported.");
+	}
+	return mount(element, source, {
+		...options,
+		fontSize: Number.parseFloat(getComputedStyle(element).fontSize),
+		images: false,
+		links: false,
+		// Fits the container; large diagrams get pinch, Ctrl+scroll, and + or −.
+		zoom: { labels: ZOOM_LABELS },
+	});
+}

package/src/components/diagram/diagram.css

@@ -0,0 +1,51 @@
+/* Pele owns the SVG DOM. Center diagrams narrower than their container. */
+[data-slot="diagram-canvas"] > svg {
+	display: block;
+	margin-inline: auto;
+}
+
+/* Pele styles its zoom controls inline; match Mizen's quiet floating toolbar.
+   They appear on hover or keyboard focus so they never cover the diagram at
+   rest; touch screens zoom with a pinch, so the buttons stay hidden there. */
+[data-slot="diagram-canvas"] .pele-zoom {
+	padding: 3px !important;
+	border-color: color-mix(in oklch, var(--pele-fg) 12%, transparent) !important;
+	border-radius: 10px !important;
+	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
+	opacity: 0;
+	transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+[data-slot="diagram-canvas"] .pele-zoom button {
+	width: 26px !important;
+	height: 26px !important;
+	color: var(--pele-muted) !important;
+	border-radius: 7px !important;
+}
+[data-slot="diagram-canvas"]:focus-within .pele-zoom {
+	opacity: 1;
+}
+@media (hover: none) {
+	[data-slot="diagram-canvas"] .pele-zoom {
+		display: none !important;
+	}
+}
+@media (hover: hover) {
+	[data-slot="diagram-canvas"]:hover .pele-zoom {
+		opacity: 1;
+	}
+	[data-slot="diagram-canvas"] .pele-zoom button:hover:not(:disabled) {
+		color: var(--pele-fg) !important;
+		background: color-mix(in oklch, var(--pele-fg) 8%, transparent) !important;
+	}
+}
+[data-slot="diagram-canvas"] .pele-zoom button:focus-visible {
+	outline: 3px solid var(--pele-accent);
+	outline-offset: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-slot="diagram-canvas"] * {
+		transition: none !important;
+		animation: none !important;
+	}
+}