@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/button-group/button-group.css

@@ -0,0 +1,115 @@
+/* Triggers rendered as Buttons (Menu, Popover, Dialog) carry their own slot,
+   such as menu-trigger, so they join the group too. First and last are
+   counted among items only: an open popup inserts hidden focus guards. */
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"]) {
+	flex-shrink: 0;
+	align-self: stretch !important;
+	white-space: nowrap;
+}
+
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"]):focus-visible {
+	z-index: 1;
+}
+
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	position: absolute;
+	pointer-events: none;
+	content: "";
+	background-color: var(--mizen-joined-divider-color);
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	inset-block: var(--mizen-joined-divider-inset);
+	inset-inline-start: 0;
+	inline-size: 1px;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	inset-block-start: 0;
+	inset-inline: var(--mizen-joined-divider-inset);
+	block-size: 1px;
+}
+
+/* System-owned attached geometry overrides StyleX's atomic radius priority. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"]) {
+	margin-inline-start: -1px;
+	border-inline-start-color: transparent !important;
+	border-start-start-radius: 0 !important;
+	border-end-start-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	) {
+	border-inline-end-color: transparent !important;
+	border-start-end-radius: 0 !important;
+	border-end-end-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"]) {
+	margin-block-start: -1px;
+	border-block-start-color: transparent !important;
+	border-start-start-radius: 0 !important;
+	border-start-end-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	) {
+	border-block-end-color: transparent !important;
+	border-end-start-radius: 0 !important;
+	border-end-end-radius: 0 !important;
+}
+
+/* Joined edges also hide the surface layer's border. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::before {
+	border-inline-start-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	)::before {
+	border-inline-end-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::before {
+	border-block-start-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	)::before {
+	border-block-end-color: transparent !important;
+}
+
+/* Pressing a joined button contracts only across the group, so the shared
+   outline stays continuous along it. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):active::before {
+	inset-inline: -1px !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):active::before {
+	inset-block: -1px !important;
+}

package/src/components/button-group/button-group.styles.ts

@@ -0,0 +1,24 @@
+import { create } from "@stylexjs/stylex";
+import { borderWidth, focus } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const buttonGroupStyles = create({
+	base: {
+		"--mizen-joined-divider-color":
+			"color-mix(in oklch, currentColor 12%, transparent)",
+		"--mizen-joined-divider-inset": space["2"],
+		alignItems: "stretch",
+		display: "inline-flex",
+		maxWidth: "100%",
+		minWidth: 0,
+		width: "fit-content",
+	},
+	horizontal: {
+		flexDirection: "row",
+		overflowX: "auto",
+		paddingBlock: `calc(${borderWidth.focus}px + ${focus.offset})`,
+		paddingInline: `calc(${borderWidth.focus}px + ${focus.offset})`,
+		scrollPaddingInline: space["1"],
+	},
+	vertical: { flexDirection: "column" },
+});

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

@@ -0,0 +1,46 @@
+/// <reference path="../button/button.css.d.ts" />
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactElement } from "react";
+import "./button-group.css";
+import type { Closed } from "../../closed";
+import { buttonGroupStyles } from "./button-group.styles";
+
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"data-orientation" | "data-slot" | "role"
+> & {
+	orientation?: ButtonGroupOrientation;
+};
+
+export function ButtonGroup({
+	children,
+	orientation = "horizontal",
+	ref: forwardedRef,
+	...rest
+}: ButtonGroupProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-orientation");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "role");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: This groups actions rather than form fields.
+		<div
+			{...rest}
+			data-orientation={orientation}
+			data-slot="button-group"
+			ref={forwardedRef}
+			role="group"
+			{...props(
+				buttonGroupStyles.base,
+				orientation === "vertical"
+					? buttonGroupStyles.vertical
+					: buttonGroupStyles.horizontal
+			)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/calendar/calendar-components.tsx

@@ -0,0 +1,187 @@
+import type {
+	ChevronProps,
+	CustomComponents,
+	DayButtonProps,
+	MonthGridProps,
+	NextMonthButtonProps,
+	PreviousMonthButtonProps,
+} from "@daypicker/react";
+import {
+	DayButton as DayPickerDayButton,
+	MonthGrid as DayPickerMonthGrid,
+	NextMonthButton as DayPickerNextMonthButton,
+	PreviousMonthButton as DayPickerPreviousMonthButton,
+} from "@daypicker/react";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { controlLabel } from "../../control-label";
+import {
+	IconChevronDown,
+	IconChevronLeft,
+	IconChevronRight,
+	IconChevronUp,
+} from "../../icons";
+import { buttonStyles } from "../button/button.styles";
+import { calendarStyles } from "./calendar.styles";
+import { useCalendarGridContext } from "./calendar-context";
+import {
+	CalendarMonthsDropdown,
+	CalendarYearsDropdown,
+} from "./calendar-dropdowns";
+
+type ChevronOrientation = "up" | "down" | "left" | "right";
+
+const chevronIcons = {
+	down: IconChevronDown,
+	left: IconChevronLeft,
+	right: IconChevronRight,
+	up: IconChevronUp,
+} satisfies Record<ChevronOrientation, typeof IconChevronRight>;
+
+function CalendarChevron({
+	disabled,
+	orientation = "right",
+	size = 16,
+}: ChevronProps): ReactElement {
+	const Icon = chevronIcons[orientation];
+
+	return (
+		<Icon
+			aria-hidden="true"
+			data-disabled={disabled ? "" : undefined}
+			data-orientation={orientation}
+			data-slot="calendar-chevron"
+			focusable={false}
+			{...props(calendarStyles.chevron)}
+			size={size}
+		/>
+	);
+}
+
+function CalendarPreviousMonthButton(
+	buttonProps: PreviousMonthButtonProps
+): ReactElement {
+	return (
+		<DayPickerPreviousMonthButton
+			{...buttonProps}
+			data-slot="calendar-previous"
+			{...getNavigationStyles(
+				Boolean(buttonProps.disabled || buttonProps["aria-disabled"])
+			)}
+		/>
+	);
+}
+
+function CalendarNextMonthButton(
+	buttonProps: NextMonthButtonProps
+): ReactElement {
+	return (
+		<DayPickerNextMonthButton
+			{...buttonProps}
+			data-slot="calendar-next"
+			{...getNavigationStyles(
+				Boolean(buttonProps.disabled || buttonProps["aria-disabled"])
+			)}
+		/>
+	);
+}
+
+function CalendarMonthGrid(gridProps: MonthGridProps): ReactElement {
+	const context = useCalendarGridContext();
+	const baseAriaLabel = gridProps["aria-label"];
+	let combinedAriaLabel = baseAriaLabel;
+	if (context?.ariaLabel) {
+		combinedAriaLabel = baseAriaLabel
+			? `${context.ariaLabel}, ${baseAriaLabel}`
+			: context.ariaLabel;
+	}
+
+	return (
+		<DayPickerMonthGrid
+			{...gridProps}
+			aria-describedby={context?.ariaDescribedBy}
+			aria-invalid={context?.invalid ? true : undefined}
+			aria-label={combinedAriaLabel}
+			aria-labelledby={context?.ariaLabelledBy}
+			aria-readonly={context?.readOnly ? true : undefined}
+		/>
+	);
+}
+
+export const calendarComponents: Partial<CustomComponents> = {
+	Chevron: CalendarChevron,
+	DayButton: CalendarDayButton,
+	MonthGrid: CalendarMonthGrid,
+	MonthsDropdown: CalendarMonthsDropdown,
+	NextMonthButton: CalendarNextMonthButton,
+	PreviousMonthButton: CalendarPreviousMonthButton,
+	YearsDropdown: CalendarYearsDropdown,
+};
+
+function getNavigationStyles(disabled?: boolean) {
+	return props(
+		buttonStyles.base,
+		buttonStyles.outline,
+		buttonStyles["icon-sm"],
+		buttonStyles.loading,
+		calendarStyles.navigationButton,
+		disabled ? buttonStyles.disabled : buttonStyles.press,
+		!disabled && buttonStyles.interactionOutline
+	);
+}
+
+// Ghost hides the press surface at rest; selected days show it filled.
+function getDaySurfaceStyle(selected: boolean) {
+	return selected ? calendarStyles.selectedDay : buttonStyles.ghost;
+}
+
+function getDayInteractionStyles(
+	interactive: boolean,
+	selected: boolean,
+	today: boolean
+) {
+	const quietInteraction = today
+		? calendarStyles.todayInteraction
+		: buttonStyles.interactionGhost;
+	return interactive
+		? [
+				buttonStyles.press,
+				selected ? buttonStyles.interactionBrand : quietInteraction,
+			]
+		: [];
+}
+
+function CalendarDayButton({
+	children,
+	modifiers,
+	...buttonProps
+}: DayButtonProps) {
+	const readOnly = useCalendarGridContext()?.readOnly;
+	const selected = modifiers.selected && !modifiers.range_middle;
+	const interactive = !(modifiers.disabled || readOnly);
+
+	return (
+		<DayPickerDayButton
+			{...buttonProps}
+			modifiers={modifiers}
+			{...props(
+				buttonStyles.base,
+				getDaySurfaceStyle(Boolean(selected)),
+				buttonStyles.icon,
+				calendarStyles.dayButton,
+				modifiers.today && calendarStyles.todayButton,
+				selected && buttonStyles.brand,
+				...getDayInteractionStyles(
+					interactive,
+					Boolean(selected),
+					Boolean(modifiers.today)
+				),
+				modifiers.today && calendarStyles.todayIndicator,
+				modifiers.today && selected && calendarStyles.todayIndicatorSelected,
+				readOnly && calendarStyles.readOnly
+			)}
+		>
+			{controlLabel(children)}
+		</DayPickerDayButton>
+	);
+}

package/src/components/calendar/calendar-context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+
+export interface CalendarGridContextValue {
+	readonly ariaDescribedBy?: string | undefined;
+	readonly ariaLabel?: string | undefined;
+	readonly ariaLabelledBy?: string | undefined;
+	readonly invalid?: boolean | undefined;
+	readonly readOnly?: boolean | undefined;
+}
+
+export const CalendarGridContext =
+	createContext<CalendarGridContextValue | null>(null);
+
+export function useCalendarGridContext(): CalendarGridContextValue | null {
+	return useContext(CalendarGridContext);
+}

package/src/components/calendar/calendar-dropdowns.tsx

@@ -0,0 +1,84 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { type DropdownProps, useDayPicker } from "@daypicker/react";
+import { props } from "@stylexjs/stylex";
+import { useCallback } from "react";
+import {
+	Select,
+	SelectItem,
+	SelectPopup,
+	SelectTrigger,
+	SelectValue,
+} from "../select/select";
+import { calendarStyles } from "./calendar.styles";
+
+type CalendarDropdownProps = DropdownProps & { part: "month" | "year" };
+
+function CalendarDropdown({
+	part,
+	options = [],
+	value,
+	disabled,
+	"aria-label": label,
+}: CalendarDropdownProps) {
+	const { months, goToMonth, dayPickerProps } = useDayPicker();
+	const displayedMonth = months[0]?.date;
+	const monthLabel =
+		displayedMonth &&
+		new Intl.DateTimeFormat(dayPickerProps.locale?.code ?? "en-US", {
+			month: "short",
+		}).format(displayedMonth);
+	const items = options.map((option) => ({
+		label: option.label,
+		value: option.value,
+	}));
+	const changeMonth = useCallback(
+		(nextValue: number | null) => {
+			if (nextValue === null || !displayedMonth) {
+				return;
+			}
+			const nextMonth = new Date(displayedMonth);
+			nextMonth.setDate(1);
+			if (part === "month") {
+				nextMonth.setMonth(nextValue);
+			} else {
+				nextMonth.setFullYear(nextValue);
+			}
+			goToMonth(nextMonth);
+		},
+		[displayedMonth, goToMonth, part]
+	);
+	// Its own field root: an enclosing Field must not label or id this select.
+	return (
+		<BaseField.Root {...props(calendarStyles.dropdown)}>
+			<Select<number>
+				disabled={disabled}
+				items={items}
+				onValueChange={changeMonth}
+				value={Number(value)}
+			>
+				<SelectTrigger aria-label={label} size="sm">
+					<SelectValue>{part === "month" ? monthLabel : null}</SelectValue>
+				</SelectTrigger>
+				<SelectPopup alignItemWithTrigger={false}>
+					{options.map((option) => (
+						<SelectItem
+							disabled={option.disabled}
+							key={option.value}
+							value={option.value}
+						>
+							{option.label}
+						</SelectItem>
+					))}
+				</SelectPopup>
+			</Select>
+		</BaseField.Root>
+	);
+}
+
+export function CalendarMonthsDropdown(dropdownProps: DropdownProps) {
+	return <CalendarDropdown {...dropdownProps} part="month" />;
+}
+
+export function CalendarYearsDropdown(dropdownProps: DropdownProps) {
+	return <CalendarDropdown {...dropdownProps} part="year" />;
+}

package/src/components/calendar/calendar-utils.ts

@@ -0,0 +1,67 @@
+import type { ClassNames, DateRange, Matcher } from "@daypicker/react";
+import { props } from "@stylexjs/stylex";
+import { calendarStyles } from "./calendar.styles";
+import type { CalendarRangeValue } from "./calendar.types";
+
+export function normalizeCalendarRange(
+	range: DateRange | undefined
+): CalendarRangeValue | undefined {
+	return range?.from ? { from: range.from, to: range.to } : undefined;
+}
+
+export function buildDisabledMatchers(
+	disabled?: boolean,
+	minValue?: Date,
+	maxValue?: Date,
+	isDateUnavailable?: (date: Date) => boolean
+): Matcher[] {
+	if (disabled) {
+		return [true];
+	}
+	const matchers: Matcher[] = [];
+	if (minValue) {
+		matchers.push({ before: minValue });
+	}
+	if (maxValue) {
+		matchers.push({ after: maxValue });
+	}
+	if (isDateUnavailable) {
+		matchers.push(isDateUnavailable);
+	}
+	return matchers;
+}
+
+export function getCalendarClassNames(
+	mode: "single" | "range",
+	readOnly: boolean
+): Partial<ClassNames> {
+	return {
+		caption_label: props(calendarStyles.captionLabel).className,
+		day: props(calendarStyles.day).className,
+		day_button: props(
+			calendarStyles.dayButton,
+			readOnly && calendarStyles.dayButtonReadOnly
+		).className,
+		disabled: props(calendarStyles.dayDisabled).className,
+		dropdowns: props(calendarStyles.dropdowns).className,
+		focused: "",
+		month: props(calendarStyles.month).className,
+		month_caption: props(calendarStyles.monthCaption).className,
+		month_grid: props(calendarStyles.monthGrid).className,
+		months: props(calendarStyles.months).className,
+		nav: props(calendarStyles.nav).className,
+		outside: props(calendarStyles.outside).className,
+		range_end: props(calendarStyles.rangeEnd).className,
+		range_middle: props(calendarStyles.rangeMiddle).className,
+		range_start: props(calendarStyles.rangeStart).className,
+		root: props(calendarStyles.dayPickerRoot).className,
+		selected: props(
+			mode === "range" ? calendarStyles.selectedRange : calendarStyles.selected
+		).className,
+		today: props(calendarStyles.today).className,
+		week: props(calendarStyles.week).className,
+		weekday: props(calendarStyles.weekday).className,
+		weekdays: props(calendarStyles.weekdays).className,
+		weeks: props(calendarStyles.weeks).className,
+	};
+}