@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,270 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	forcedColorAdjust,
+	opacity,
+} from "../../styles/interaction.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";
+import { buttonColors } from "../button/button-colors.stylex";
+
+export const calendarStyles = create({
+	captionLabel: {
+		color: colors.content,
+		fontSize: fontSize["16"],
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+	},
+	chevron: {
+		display: "inline-block",
+		flexShrink: 0,
+	},
+	day: {
+		fontVariantNumeric: "tabular-nums",
+		height: {
+			default: "2.25rem",
+			[conditions.sm]: "2.5rem",
+		},
+		padding: 0,
+		textAlign: "center",
+		width: {
+			default: "2.25rem",
+			[conditions.sm]: "2.5rem",
+		},
+	},
+	// Matches range ends, and nests inside the floating corner.
+	dayButton: {
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		color: "inherit",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		height: "2.25rem",
+		position: "relative",
+		width: "2.25rem",
+	},
+	dayButtonReadOnly: {
+		backgroundColor: {
+			":hover": { [conditions.canHover]: "transparent" },
+			default: "transparent",
+		},
+		cursor: "default",
+	},
+	dayDisabled: {
+		cursor: "not-allowed",
+		opacity: opacity.disabled,
+	},
+	dayPickerRoot: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		position: "relative",
+	},
+	disabled: {
+		opacity: opacity.disabled,
+		pointerEvents: "none",
+	},
+	dropdown: { flexShrink: 0, inlineSize: "5rem" },
+	dropdowns: {
+		alignItems: "center",
+		display: "flex",
+		gap: space["1"],
+		paddingInline: "2rem",
+	},
+	invalid: {
+		borderColor: colors.destructive,
+	},
+	month: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["3"],
+	},
+	monthCaption: {
+		alignItems: "center",
+		display: "flex",
+		height: "2.25rem",
+		justifyContent: "center",
+		position: "relative",
+	},
+	monthGrid: {
+		borderCollapse: "collapse",
+		width: "100%",
+	},
+	months: {
+		"::after": {
+			content: '""',
+			flex: `0 0 calc(${borderWidth.focus}px + ${focus.offset})`,
+			marginInlineStart: `calc(-1 * ${space["3"]})`,
+		},
+		display: "flex",
+		gap: space["3"],
+	},
+	nav: {
+		alignItems: "center",
+		display: "flex",
+		insetInline: 0,
+		justifyContent: "space-between",
+		pointerEvents: "none",
+		position: "absolute",
+		zIndex: 1,
+	},
+	navigationButton: { pointerEvents: "auto" },
+	outside: {
+		color: `color-mix(in oklch, ${colors.mutedContent} 90%, ${colors.floatingSurface})`,
+	},
+	// Caps wrap the day button: its radius plus the 2px gap of a wider cell.
+	rangeEnd: {
+		borderEndEndRadius: {
+			default: shape.controlRadius,
+			[conditions.sm]: `calc(${shape.controlRadius} + ${space.px})`,
+		},
+		borderStartEndRadius: {
+			default: shape.controlRadius,
+			[conditions.sm]: `calc(${shape.controlRadius} + ${space.px})`,
+		},
+		color: colors.brandForeground,
+		forcedColorAdjust: forcedColorAdjust.selectedState,
+	},
+	rangeMiddle: {
+		backgroundColor: colors.brandBackground,
+		color: colors.content,
+		forcedColorAdjust: forcedColorAdjust.selectedState,
+	},
+	rangeStart: {
+		borderEndStartRadius: {
+			default: shape.controlRadius,
+			[conditions.sm]: `calc(${shape.controlRadius} + ${space.px})`,
+		},
+		borderStartStartRadius: {
+			default: shape.controlRadius,
+			[conditions.sm]: `calc(${shape.controlRadius} + ${space.px})`,
+		},
+		color: colors.brandForeground,
+		forcedColorAdjust: forcedColorAdjust.selectedState,
+	},
+	readOnly: {
+		cursor: "default",
+	},
+	root: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: colors.border,
+		borderRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.surface,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "inline-block",
+		maxWidth: "100%",
+		overflowX: "auto",
+		paddingBlock: space["2"],
+		paddingInline: {
+			default: `calc(${borderWidth.focus}px + ${focus.offset})`,
+			[conditions.sm]: space["2"],
+		},
+		scrollPaddingInline: space["1"],
+		userSelect: "none",
+	},
+	rootEmbedded: {
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		borderRadius: 0,
+		borderWidth: 0,
+	},
+	selected: {
+		color: colors.accentContent,
+	},
+	// Selected days reuse the Button brand fill; forced colors swap its inks
+	// and hover shade for system selection colors, so every state stays solid.
+	selectedDay: {
+		[colors.accent]: { [conditions.forcedColors]: "Highlight", default: null },
+		[colors.accentContent]: {
+			[conditions.forcedColors]: "HighlightText",
+			default: null,
+		},
+		[buttonColors.brandShade]: {
+			[conditions.forcedColors]: "Highlight",
+			default: null,
+		},
+		forcedColorAdjust: forcedColorAdjust.selectedState,
+	},
+	selectedRange: {
+		backgroundColor: {
+			[conditions.forcedColors]: "Highlight",
+			default: colors.brandBackground,
+		},
+		color: {
+			[conditions.forcedColors]: "HighlightText",
+			default: colors.content,
+		},
+		fontWeight: fontWeight.medium,
+		forcedColorAdjust: forcedColorAdjust.selectedState,
+	},
+	today: {
+		fontWeight: fontWeight.bold,
+	},
+	todayButton: {
+		backgroundColor: colors.brandBackground,
+		color: colors.brandForeground,
+		fontWeight: fontWeight.medium,
+	},
+	todayIndicator: {
+		"::after": {
+			backgroundColor: colors.accent,
+			borderRadius: "50%",
+			bottom: "0.1875rem",
+			content: '""',
+			height: "0.25rem",
+			insetInlineStart: "calc(50% - 0.125rem)",
+			pointerEvents: "none",
+			position: "absolute",
+			width: "0.25rem",
+		},
+	},
+	todayIndicatorSelected: {
+		"::after": { backgroundColor: colors.accentContent },
+	},
+	todayInteraction: {
+		backgroundColor: {
+			":active": `color-mix(in oklch, ${colors.brandBackground} 75%, ${colors.accent})`,
+			":hover": {
+				[conditions.canHover]: `color-mix(in oklch, ${colors.brandBackground} 85%, ${colors.accent})`,
+			},
+			default: colors.brandBackground,
+		},
+	},
+	week: {
+		display: "table-row",
+	},
+	weekday: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		height: "2rem",
+		lineHeight: lineHeight["20"],
+		textAlign: "center",
+		width: {
+			default: "2.25rem",
+			[conditions.sm]: "2.5rem",
+		},
+	},
+	weekdays: {
+		borderBottomColor: colors.border,
+		borderBottomStyle: "solid",
+		borderBottomWidth: borderWidth.thin,
+	},
+	weeks: {
+		margin: 0,
+	},
+});

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import type { DateRange } from "@daypicker/react";
+import { DayPicker } from "@daypicker/react";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { calendarStyles } from "./calendar.styles";
+import type {
+	CalendarProps,
+	CalendarRangeProps,
+	CalendarRangeValue,
+	CalendarSingleProps,
+	CalendarVariant,
+} from "./calendar.types";
+import { calendarComponents } from "./calendar-components";
+import { CalendarGridContext } from "./calendar-context";
+import {
+	buildDisabledMatchers,
+	getCalendarClassNames,
+	normalizeCalendarRange,
+} from "./calendar-utils";
+
+export type {
+	CalendarLocale,
+	CalendarProps,
+	CalendarRangeProps,
+	CalendarRangeValue,
+	CalendarSingleProps,
+	CalendarVariant,
+} from "./calendar.types";
+
+function SingleCalendarView(singleProps: CalendarSingleProps): ReactElement {
+	const [isControlled] = useState(() => Object.hasOwn(singleProps, "value"));
+	const [uncontrolled, setUncontrolled] = useState<Date | undefined>(
+		singleProps.defaultValue
+	);
+	const current = isControlled ? singleProps.value : uncontrolled;
+
+	const {
+		autoFocus,
+		defaultMonth = singleProps.defaultValue ?? singleProps.value,
+		dir,
+		disabled = false,
+		isDateUnavailable,
+		locale,
+		maxValue,
+		minValue,
+		month,
+		onMonthChange,
+		onValueChange,
+		readOnly = false,
+		required,
+		weekStartsOn,
+	} = singleProps;
+
+	const disabledMatchers = useMemo(
+		() =>
+			buildDisabledMatchers(disabled, minValue, maxValue, isDateUnavailable),
+		[disabled, minValue, maxValue, isDateUnavailable]
+	);
+
+	const handleSelect = useCallback(
+		(selected: Date | undefined) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			if (!isControlled) {
+				setUncontrolled(selected);
+			}
+			onValueChange?.(selected);
+		},
+		[disabled, isControlled, onValueChange, readOnly]
+	);
+
+	const classNames = useMemo(
+		() => getCalendarClassNames("single", readOnly),
+		[readOnly]
+	);
+
+	return (
+		<DayPicker
+			autoFocus={autoFocus}
+			captionLayout={singleProps.captionLayout}
+			classNames={classNames}
+			components={calendarComponents}
+			defaultMonth={defaultMonth}
+			dir={dir}
+			disabled={disabledMatchers}
+			disableNavigation={disabled}
+			endMonth={singleProps.endMonth}
+			fixedWeeks
+			locale={locale}
+			mode="single"
+			month={month}
+			onMonthChange={onMonthChange}
+			onSelect={handleSelect}
+			required={required}
+			selected={current}
+			showOutsideDays
+			startMonth={singleProps.startMonth}
+			weekStartsOn={weekStartsOn}
+		/>
+	);
+}
+
+function RangeCalendarView(rangeProps: CalendarRangeProps): ReactElement {
+	const [isControlled] = useState(() => Object.hasOwn(rangeProps, "value"));
+	const [uncontrolled, setUncontrolled] = useState<
+		CalendarRangeValue | undefined
+	>(rangeProps.defaultValue);
+	const current = isControlled ? rangeProps.value : uncontrolled;
+
+	const {
+		autoFocus,
+		defaultMonth = rangeProps.defaultValue?.from ?? rangeProps.value?.from,
+		dir,
+		disabled = false,
+		isDateUnavailable,
+		locale,
+		maxNights,
+		maxValue,
+		minNights,
+		minValue,
+		resetOnSelect,
+		month,
+		onMonthChange,
+		onValueChange,
+		readOnly = false,
+		required,
+		weekStartsOn,
+	} = rangeProps;
+
+	const disabledMatchers = useMemo(
+		() =>
+			buildDisabledMatchers(disabled, minValue, maxValue, isDateUnavailable),
+		[disabled, minValue, maxValue, isDateUnavailable]
+	);
+
+	const handleSelect = useCallback(
+		(range: DateRange | undefined) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			const nextRange = normalizeCalendarRange(range);
+			if (!isControlled) {
+				setUncontrolled(nextRange);
+			}
+			onValueChange?.(nextRange);
+		},
+		[disabled, isControlled, onValueChange, readOnly]
+	);
+
+	const classNames = useMemo(
+		() => getCalendarClassNames("range", readOnly),
+		[readOnly]
+	);
+
+	return (
+		<DayPicker
+			autoFocus={autoFocus}
+			captionLayout={rangeProps.captionLayout}
+			classNames={classNames}
+			components={calendarComponents}
+			defaultMonth={defaultMonth}
+			dir={dir}
+			disabled={disabledMatchers}
+			disableNavigation={disabled}
+			endMonth={rangeProps.endMonth}
+			excludeDisabled
+			fixedWeeks
+			locale={locale}
+			max={maxNights}
+			min={minNights}
+			mode="range"
+			month={month}
+			onMonthChange={onMonthChange}
+			onSelect={handleSelect}
+			required={required}
+			resetOnSelect={resetOnSelect}
+			selected={current ? { from: current.from, to: current.to } : undefined}
+			showOutsideDays
+			startMonth={rangeProps.startMonth}
+			weekStartsOn={weekStartsOn}
+		/>
+	);
+}
+
+function getCalendarStyles(
+	disabled?: boolean,
+	readOnly?: boolean,
+	invalid?: boolean,
+	variant?: CalendarVariant
+) {
+	return props(
+		calendarStyles.root,
+		variant === "embedded" && calendarStyles.rootEmbedded,
+		disabled && calendarStyles.disabled,
+		readOnly && calendarStyles.readOnly,
+		invalid && calendarStyles.invalid
+	);
+}
+
+function getWrapperProps(calendarProps: CalendarProps) {
+	const { disabled, invalid, readOnly, ref, variant } = calendarProps;
+	const styleProps = getCalendarStyles(disabled, readOnly, invalid, variant);
+
+	return {
+		...styleProps,
+		"data-disabled": disabled ? "" : undefined,
+		"data-invalid": invalid ? "" : undefined,
+		"data-readonly": readOnly ? "" : undefined,
+		"data-slot": "calendar",
+		ref,
+	};
+}
+
+export function Calendar(calendarProps: CalendarProps): ReactElement {
+	const wrapperProps = getWrapperProps(calendarProps);
+	const content =
+		calendarProps.mode === "single" ? (
+			<SingleCalendarView {...calendarProps} />
+		) : (
+			<RangeCalendarView {...calendarProps} />
+		);
+
+	const {
+		"aria-describedby": ariaDescribedBy,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		invalid,
+		readOnly,
+	} = calendarProps;
+	const gridContextValue = useMemo(
+		() => ({ ariaDescribedBy, ariaLabel, ariaLabelledBy, invalid, readOnly }),
+		[ariaDescribedBy, ariaLabel, ariaLabelledBy, invalid, readOnly]
+	);
+
+	return (
+		<CalendarGridContext.Provider value={gridContextValue}>
+			<div {...wrapperProps}>{content}</div>
+		</CalendarGridContext.Provider>
+	);
+}

package/src/components/calendar/calendar.types.ts

@@ -0,0 +1,55 @@
+import type { DayPickerLocale } from "@daypicker/react";
+import type { ComponentPropsWithRef } from "react";
+
+export type CalendarLocale = DayPickerLocale;
+
+export type CalendarVariant = "default" | "embedded";
+
+export interface CalendarRangeValue {
+	readonly from: Date;
+	readonly to?: Date | undefined;
+}
+
+export interface CalendarCommonProps {
+	readonly "aria-describedby"?: string | undefined;
+	readonly "aria-label"?: string | undefined;
+	readonly "aria-labelledby"?: string | undefined;
+	autoFocus?: boolean | undefined;
+	captionLayout?: "label" | "dropdown" | undefined;
+	defaultMonth?: Date | undefined;
+	dir?: "ltr" | "rtl" | undefined;
+	disabled?: boolean | undefined;
+	endMonth?: Date | undefined;
+	invalid?: boolean | undefined;
+	isDateUnavailable?: ((date: Date) => boolean) | undefined;
+	locale?: CalendarLocale | undefined;
+	maxValue?: Date | undefined;
+	minValue?: Date | undefined;
+	month?: Date | undefined;
+	onMonthChange?: ((month: Date) => void) | undefined;
+	readOnly?: boolean | undefined;
+	ref?: ComponentPropsWithRef<"div">["ref"] | undefined;
+	required?: boolean | undefined;
+	startMonth?: Date | undefined;
+	variant?: CalendarVariant | undefined;
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}
+
+export interface CalendarSingleProps extends CalendarCommonProps {
+	defaultValue?: Date | undefined;
+	mode: "single";
+	onValueChange?: ((value: Date | undefined) => void) | undefined;
+	value?: Date | undefined;
+}
+
+export interface CalendarRangeProps extends CalendarCommonProps {
+	defaultValue?: CalendarRangeValue | undefined;
+	maxNights?: number | undefined;
+	minNights?: number | undefined;
+	mode: "range";
+	onValueChange?: ((value: CalendarRangeValue | undefined) => void) | undefined;
+	resetOnSelect?: boolean | undefined;
+	value?: CalendarRangeValue | undefined;
+}
+
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;