xiod-ui 1.0.0

package/dist/components/button-split.js

@@ -0,0 +1,73 @@
+"use client";
+import { Button } from "./button.js";
+import { Group, GroupSeparator } from "./group.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/button-split.tsx
+const ButtonSplitContext = React$1.createContext({
+	variant: "default",
+	size: "default"
+});
+function ButtonSplit({ variant = "default", size = "default", className, children, ...props }) {
+	const contextValue = React$1.useMemo(() => ({
+		variant,
+		size
+	}), [variant, size]);
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		children: /* @__PURE__ */ jsx(ButtonSplitContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(Group, {
+				className: cn("rounded-lg [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "*:rounded-[inherit] [&>*:before]:rounded-[inherit]", className),
+				"data-slot": "button-split",
+				children
+			})
+		})
+	});
+}
+function ButtonSplitAction({ className, render, ...props }) {
+	const { variant, size } = React$1.useContext(ButtonSplitContext);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: props.variant ?? variant,
+		size: props.size ?? size,
+		className: cn(className),
+		render,
+		...props
+	});
+}
+function ButtonSplitSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(GroupSeparator, {
+		className: cn(className),
+		...props
+	});
+}
+function ButtonSplitTrigger({ className, render, children, ...props }) {
+	const { variant, size } = React$1.useContext(ButtonSplitContext);
+	const triggerSize = size === "sm" ? "icon-sm" : size === "lg" ? "icon-lg" : size === "xs" ? "icon-xs" : size === "xl" ? "icon-xl" : "icon";
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		className: cn(className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant,
+			size: triggerSize
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {})
+	});
+}
+function ButtonSplitContent({ className, sideOffset = 8, hideArrow = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPopup, {
+		className: cn("min-w-(--anchor-width) w-(--popup-width,max-content) **:data-[slot=popover-viewport]:p-1", className),
+		sideOffset,
+		hideArrow,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-full flex-col gap-1",
+			children
+		})
+	});
+}
+//#endregion
+export { ButtonSplit, ButtonSplitAction, ButtonSplitContent, ButtonSplitSeparator, ButtonSplitTrigger };

package/dist/components/button.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/button.d.ts
+declare const buttonVariants: (props?: ({
+  size?: "sm" | "lg" | "xs" | "xl" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "destructive-outline" | "ghost" | "link" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ButtonProps extends useRender.ComponentProps<"button"> {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+}
+declare function Button({ className, variant, size, render, ...props }: ButtonProps): React$1.ReactElement;
+//#endregion
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/button.tsx
+const buttonVariants = cva("[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+			icon: "size-9 sm:size-8",
+			"icon-lg": "size-10 sm:size-9",
+			"icon-sm": "size-8 sm:size-7",
+			"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+		},
+		variant: {
+			default: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
+			destructive: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
+			"destructive-outline": "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
+			ghost: "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
+			link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+			outline: "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
+			secondary: "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90"
+		}
+	}
+});
+function Button({ className, variant, size, render, ...props }) {
+	const typeValue = render ? void 0 : "button";
+	const defaultProps = {
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		})),
+		"data-slot": "button",
+		type: typeValue
+	};
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Button, buttonVariants };

package/dist/components/calendar.d.ts

@@ -0,0 +1,63 @@
+import * as React$1 from "react";
+//#region src/components/calendar.d.ts
+export type CalendarMode = "single" | "range";
+export interface DateRange {
+  from?: Date;
+  to?: Date;
+}
+export type Matcher = boolean | Date | Date[] | ((date: Date) => boolean) | {
+  before?: Date;
+  after?: Date;
+} | {
+  after?: Date;
+} | {
+  before?: Date;
+} | {
+  dayOfWeek?: number | number[];
+};
+export interface CalendarClassNames {
+  root?: string;
+  nav?: string;
+  button_previous?: string;
+  button_next?: string;
+  caption_label?: string;
+  grid?: string;
+  weekday?: string;
+  day?: string;
+  day_selected?: string;
+  day_today?: string;
+  day_outside?: string;
+  day_range_start?: string;
+  day_range_end?: string;
+  day_range_middle?: string;
+  month_view_grid?: string;
+  year_view_grid?: string;
+  footer?: string;
+  today_button?: string;
+}
+export interface CalendarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSelect" | "disabled"> {
+  mode?: CalendarMode;
+  selected?: Date | DateRange | null;
+  onSelect?: (date: Date | DateRange | undefined) => void;
+  showOutsideDays?: boolean;
+  disableOutsideDays?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: Matcher | Matcher[];
+  modifiers?: Record<string, Matcher | Matcher[]>;
+  modifiersClassNames?: Record<string, string>;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  numberOfMonths?: number;
+  fixedWeeks?: boolean;
+  localeWeekdays?: string[];
+  localeWeekdaysLong?: string[];
+  localeMonths?: string[];
+  localeMonthsShort?: string[];
+  classNames?: CalendarClassNames;
+}
+declare function Calendar({ className, mode, selected, onSelect, showOutsideDays, disableOutsideDays, minDate, maxDate, disabled, modifiers, modifiersClassNames, weekStartsOn, numberOfMonths, fixedWeeks, localeWeekdays, localeWeekdaysLong, localeMonths, localeMonthsShort, classNames, ...props }: CalendarProps): React$1.JSX.Element;
+declare namespace Calendar {
+  var displayName: string;
+}
+//#endregion
+export { Calendar };

package/dist/components/calendar.js

@@ -0,0 +1,425 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { ChevronLeft } from "xiod-icons/icons/ChevronLeft";
+//#region src/components/calendar.tsx
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const firstOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+function buildMonth(cursor, weekStartsOn = 0, fixedWeeks = true) {
+	const first = firstOfMonth(cursor);
+	const offset = (first.getDay() - weekStartsOn + 7) % 7;
+	const start = addDays(first, -offset);
+	const out = [];
+	let totalDays = 42;
+	if (!fixedWeeks) {
+		if (addDays(start, 35).getMonth() !== cursor.getMonth()) totalDays = 35;
+	}
+	for (let i = 0; i < totalDays; i++) {
+		const date = addDays(start, i);
+		out.push({
+			date,
+			inMonth: date.getMonth() === cursor.getMonth()
+		});
+	}
+	return out;
+}
+function matchDate(date, matcher) {
+	if (!matcher) return false;
+	if (Array.isArray(matcher)) return matcher.some((m) => matchDate(date, m));
+	if (typeof matcher === "boolean") return matcher;
+	if (matcher instanceof Date) return sameDay(date, matcher);
+	if (typeof matcher === "function") return matcher(date);
+	if (typeof matcher === "object") {
+		const start = startOfDay(date).getTime();
+		if ("before" in matcher && matcher.before) {
+			if (start < startOfDay(matcher.before).getTime()) return true;
+		}
+		if ("after" in matcher && matcher.after) {
+			if (start > startOfDay(matcher.after).getTime()) return true;
+		}
+		if ("dayOfWeek" in matcher && matcher.dayOfWeek) {
+			const dow = matcher.dayOfWeek;
+			if (Array.isArray(dow)) return dow.includes(date.getDay());
+			return dow === date.getDay();
+		}
+	}
+	return false;
+}
+const WEEKDAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+const WEEKDAYS_LONG = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday"
+];
+const MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const MONTHS_SHORT = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+function getYearRangeStart(date) {
+	const year = date.getFullYear();
+	return year - (year % 12 + 12) % 12;
+}
+function Calendar({ className, mode = "single", selected, onSelect, showOutsideDays = true, disableOutsideDays = false, minDate, maxDate, disabled, modifiers, modifiersClassNames, weekStartsOn = 0, numberOfMonths = 1, fixedWeeks = true, localeWeekdays, localeWeekdaysLong, localeMonths, localeMonthsShort, classNames, ...props }) {
+	const today = React$1.useMemo(() => /* @__PURE__ */ new Date(), []);
+	const weekdaysList = localeWeekdays || WEEKDAYS;
+	const weekdaysLongList = localeWeekdaysLong || WEEKDAYS_LONG;
+	const monthsList = localeMonths || MONTHS;
+	const monthsShortList = localeMonthsShort || MONTHS_SHORT;
+	const initialCursor = React$1.useMemo(() => {
+		if (selected instanceof Date) return firstOfMonth(selected);
+		if (selected && typeof selected === "object" && "from" in selected && selected.from) return firstOfMonth(selected.from);
+		return firstOfMonth(today);
+	}, [selected, today]);
+	const [cursor, setCursor] = React$1.useState(initialCursor);
+	const [viewMode, setViewMode] = React$1.useState("days");
+	React$1.useEffect(() => {
+		if (selected instanceof Date) setCursor(firstOfMonth(selected));
+		else if (selected && typeof selected === "object" && "from" in selected && selected.from) setCursor(firstOfMonth(selected.from));
+	}, [selected]);
+	const [focusDate, setFocusDate] = React$1.useState(() => {
+		if (selected instanceof Date) return selected;
+		if (selected && typeof selected === "object" && "from" in selected && selected.from) return selected.from;
+		return today;
+	});
+	const gridRef = React$1.useRef(null);
+	const isDateDisabled = React$1.useCallback((date) => {
+		if (minDate && startOfDay(date).getTime() < startOfDay(minDate).getTime()) return true;
+		if (maxDate && startOfDay(date).getTime() > startOfDay(maxDate).getTime()) return true;
+		return matchDate(date, disabled);
+	}, [
+		disabled,
+		minDate,
+		maxDate
+	]);
+	const handleDateClick = (date) => {
+		if (isDateDisabled(date)) return;
+		if (mode === "single") onSelect?.(date);
+		else {
+			const range = selected || {};
+			if (!range.from || range.from && range.to) onSelect?.({
+				from: date,
+				to: void 0
+			});
+			else if (range.from && !range.to) {
+				if (date.getTime() < range.from.getTime()) onSelect?.({
+					from: date,
+					to: void 0
+				});
+				else onSelect?.({
+					from: range.from,
+					to: date
+				});
+			}
+		}
+		setFocusDate(date);
+		if (date.getMonth() !== cursor.getMonth()) setCursor(firstOfMonth(date));
+	};
+	const isPrevNavigationDisabled = React$1.useMemo(() => {
+		if (!minDate) return false;
+		const minStart = startOfDay(minDate);
+		if (viewMode === "days") return firstOfMonth(cursor).getTime() <= minStart.getTime();
+		if (viewMode === "months") return cursor.getFullYear() <= minDate.getFullYear();
+		return cursor.getFullYear() - (cursor.getFullYear() % 12 + 12) % 12 <= minDate.getFullYear();
+	}, [
+		cursor,
+		minDate,
+		viewMode
+	]);
+	const isNextNavigationDisabled = React$1.useMemo(() => {
+		if (!maxDate) return false;
+		const maxStart = startOfDay(maxDate);
+		if (viewMode === "days") return new Date(cursor.getFullYear(), cursor.getMonth() + numberOfMonths - 1, 1).getTime() >= firstOfMonth(maxStart).getTime();
+		if (viewMode === "months") return cursor.getFullYear() >= maxDate.getFullYear();
+		return cursor.getFullYear() - (cursor.getFullYear() % 12 + 12) % 12 + 11 >= maxDate.getFullYear();
+	}, [
+		cursor,
+		maxDate,
+		viewMode,
+		numberOfMonths
+	]);
+	const handlePrev = () => {
+		if (isPrevNavigationDisabled) return;
+		if (viewMode === "days") setCursor((c) => new Date(c.getFullYear(), c.getMonth() - numberOfMonths, 1));
+		else if (viewMode === "months") setCursor((c) => new Date(c.getFullYear() - 1, c.getMonth(), 1));
+		else setCursor((c) => new Date(c.getFullYear() - 12, c.getMonth(), 1));
+	};
+	const handleNext = () => {
+		if (isNextNavigationDisabled) return;
+		if (viewMode === "days") setCursor((c) => new Date(c.getFullYear(), c.getMonth() + numberOfMonths, 1));
+		else if (viewMode === "months") setCursor((c) => new Date(c.getFullYear() + 1, c.getMonth(), 1));
+		else setCursor((c) => new Date(c.getFullYear() + 12, c.getMonth(), 1));
+	};
+	const handleHeaderClick = () => {
+		if (viewMode === "days") setViewMode("months");
+		else if (viewMode === "months") setViewMode("years");
+	};
+	const moveFocus = (days) => {
+		setFocusDate((prev) => {
+			const next = addDays(prev, days);
+			if (isDateDisabled(next)) return prev;
+			if (next.getMonth() !== prev.getMonth() || next.getFullYear() !== prev.getFullYear()) setCursor(firstOfMonth(next));
+			return next;
+		});
+	};
+	const handleKeyDown = (e) => {
+		if (viewMode !== "days") return;
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault();
+				moveFocus(-1);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				moveFocus(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				moveFocus(-7);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				moveFocus(7);
+				break;
+			case "PageUp":
+				e.preventDefault();
+				handlePrev();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				handleNext();
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				handleDateClick(focusDate);
+		}
+	};
+	React$1.useEffect(() => {
+		if (viewMode !== "days") return;
+		if (Number.isNaN(focusDate.getTime())) return;
+		(gridRef.current?.querySelector("[data-focused=\"true\"]"))?.focus();
+	}, [viewMode, focusDate]);
+	const renderHeaderLabel = () => {
+		if (viewMode === "days") {
+			if (numberOfMonths === 1) return `${monthsList[cursor.getMonth()]} ${cursor.getFullYear()}`;
+			const nextMonth = new Date(cursor.getFullYear(), cursor.getMonth() + numberOfMonths - 1, 1);
+			return `${monthsList[cursor.getMonth()]} ${cursor.getFullYear()} - ${monthsList[nextMonth.getMonth()]} ${nextMonth.getFullYear()}`;
+		}
+		if (viewMode === "months") return `${cursor.getFullYear()}`;
+		const start = getYearRangeStart(cursor);
+		return `${start} – ${start + 11}`;
+	};
+	const getDaySelectionState = (date) => {
+		const isStart = mode === "range" && selected && typeof selected === "object" && "from" in selected && sameDay(date, selected.from);
+		const isEnd = mode === "range" && selected && typeof selected === "object" && "to" in selected && sameDay(date, selected.to);
+		const isMiddle = mode === "range" && selected && typeof selected === "object" && "from" in selected && "to" in selected && selected.from && selected.to && date.getTime() > selected.from.getTime() && date.getTime() < selected.to.getTime();
+		const isSelectedSingle = mode === "single" && selected instanceof Date && sameDay(date, selected);
+		return {
+			isSelected: isStart || isEnd || isSelectedSingle,
+			isStart,
+			isEnd,
+			isMiddle
+		};
+	};
+	const getModifierClassNames = (date) => {
+		if (!modifiers) return "";
+		const activeModifiers = [];
+		for (const [key, matcher] of Object.entries(modifiers)) if (matchDate(date, matcher)) activeModifiers.push(key);
+		return activeModifiers.map((m) => modifiersClassNames?.[m]).filter(Boolean).join(" ");
+	};
+	const rotatedWeekdays = React$1.useMemo(() => {
+		return [...weekdaysList.slice(weekStartsOn), ...weekdaysList.slice(0, weekStartsOn)];
+	}, [weekdaysList, weekStartsOn]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "calendar",
+		style: { "--number-of-months": numberOfMonths },
+		className: cn("relative flex flex-col rounded-2xl border bg-card p-4 shadow-xs/5 select-none text-foreground before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80", numberOfMonths === 1 ? "w-72" : "w-full md:w-[calc(16rem*var(--number-of-months)+2rem)]", classNames?.root, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center justify-between mb-4", classNames?.nav),
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handlePrev,
+						disabled: isPrevNavigationDisabled,
+						className: cn("relative inline-flex size-8 items-center justify-center rounded-lg border border-input bg-background/20 transition-colors hover:bg-accent hover:text-accent-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 disabled:pointer-events-none disabled:opacity-64", classNames?.button_previous),
+						"aria-label": "Previous Page",
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 shrink-0 pointer-events-none" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleHeaderClick,
+						disabled: viewMode === "years",
+						className: cn("rounded-md px-2.5 py-1 text-sm font-semibold tracking-tight transition-colors outline-none focus-visible:ring-1 focus-visible:ring-ring", viewMode !== "years" && "hover:bg-accent hover:text-accent-foreground", classNames?.caption_label),
+						children: renderHeaderLabel()
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleNext,
+						disabled: isNextNavigationDisabled,
+						className: cn("relative inline-flex size-8 items-center justify-center rounded-lg border border-input bg-background/20 transition-colors hover:bg-accent hover:text-accent-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 disabled:pointer-events-none disabled:opacity-64", classNames?.button_next),
+						"aria-label": "Next Page",
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 pointer-events-none" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: gridRef,
+				onKeyDown: handleKeyDown,
+				className: cn("relative overflow-hidden rounded-xl bg-muted/20 border border-border/30 p-2 shadow-[inset_0_1px_2px_rgba(0,0,0,0.02)]", viewMode === "days" ? "h-fit" : "h-60", classNames?.grid),
+				children: [
+					viewMode === "days" && /* @__PURE__ */ jsx("div", {
+						className: cn("flex flex-col gap-6 md:flex-row", numberOfMonths > 1 && "divide-x divide-border/20 md:gap-0"),
+						children: Array.from({ length: numberOfMonths }).map((_, monthIdx) => {
+							const currentMonthCursor = new Date(cursor.getFullYear(), cursor.getMonth() + monthIdx, 1);
+							return /* @__PURE__ */ jsxs("div", {
+								className: cn("flex flex-col w-full md:w-64", numberOfMonths > 1 && "px-4 first:ps-0 last:pe-0"),
+								children: [
+									numberOfMonths > 1 && /* @__PURE__ */ jsxs("div", {
+										className: "text-center text-xs font-semibold mb-3 tracking-tight text-muted-foreground",
+										children: [
+											monthsList[currentMonthCursor.getMonth()],
+											" ",
+											currentMonthCursor.getFullYear()
+										]
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "grid grid-cols-7 mb-1 text-center w-full",
+										children: rotatedWeekdays.map((d) => /* @__PURE__ */ jsx("span", {
+											className: cn("text-[10px] font-bold uppercase tracking-wider text-muted-foreground/60 h-6 flex items-center justify-center", classNames?.weekday),
+											children: d
+										}, d))
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "grid grid-cols-7 grid-rows-6 gap-y-0.5 w-full",
+										children: buildMonth(currentMonthCursor, weekStartsOn, fixedWeeks).map(({ date, inMonth }) => {
+											const { isSelected, isStart, isEnd, isMiddle } = getDaySelectionState(date);
+											const isToday = sameDay(date, today);
+											const disabledState = isDateDisabled(date) || disableOutsideDays && !inMonth;
+											const showCell = inMonth || showOutsideDays;
+											const customClasses = getModifierClassNames(date);
+											if (!showCell) return /* @__PURE__ */ jsx("div", { className: "h-8 w-8 sm:h-7.5 sm:w-7.5" }, date.toISOString());
+											const isFocused = sameDay(date, focusDate);
+											return /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												tabIndex: isFocused ? 0 : -1,
+												"data-focused": isFocused,
+												disabled: disabledState,
+												onClick: () => handleDateClick(date),
+												className: cn("relative h-8 w-8 sm:h-7.5 sm:w-7.5 m-auto text-[12.5px] font-medium transition-[background-color,color,border-radius] duration-150 flex items-center justify-center outline-none focus-visible:z-10 focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", isMiddle && "bg-primary/12 text-primary rounded-none w-full h-8 sm:h-7.5 m-0", isMiddle && classNames?.day_range_middle, isStart && "bg-primary text-primary-foreground font-semibold rounded-l-lg rounded-r-none w-full h-8 sm:h-7.5 m-0", isStart && classNames?.day_range_start, isEnd && "bg-primary text-primary-foreground font-semibold rounded-r-lg rounded-l-none w-full h-8 sm:h-7.5 m-0", isEnd && classNames?.day_range_end, isSelected && !isStart && !isEnd && "bg-primary text-primary-foreground font-semibold rounded-lg", isSelected && classNames?.day_selected, !isSelected && !isMiddle && !disabledState && "hover:bg-accent hover:text-accent-foreground rounded-lg", !isSelected && !isMiddle && (inMonth ? "text-foreground" : "text-muted-foreground/35"), !inMonth && classNames?.day_outside, isToday && classNames?.day_today, disabledState && "opacity-30 cursor-not-allowed line-through", customClasses, classNames?.day),
+												"aria-label": `${weekdaysLongList[date.getDay()]}, ${monthsList[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`,
+												"aria-pressed": isSelected,
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "relative z-10",
+													children: date.getDate()
+												}), isToday && /* @__PURE__ */ jsx("span", { className: cn("absolute bottom-1 size-1 rounded-full", isSelected || isStart || isEnd ? "bg-primary-foreground" : "bg-primary") })]
+											}, date.toISOString());
+										})
+									})
+								]
+							}, currentMonthCursor.toISOString());
+						})
+					}),
+					viewMode === "months" && /* @__PURE__ */ jsx("div", {
+						className: cn("grid h-full grid-cols-3 grid-rows-4 gap-1.5 p-1 w-full max-w-64 mx-auto", classNames?.month_view_grid),
+						children: monthsShortList.map((mName, mIdx) => {
+							const isSelectedMonth = selected instanceof Date && selected.getMonth() === mIdx && selected.getFullYear() === cursor.getFullYear();
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									setCursor(new Date(cursor.getFullYear(), mIdx, 1));
+									setViewMode("days");
+								},
+								className: cn("rounded-lg text-xs font-semibold transition-colors hover:bg-accent hover:text-accent-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", isSelectedMonth ? "bg-primary text-primary-foreground" : "text-foreground"),
+								children: mName
+							}, mName);
+						})
+					}),
+					viewMode === "years" && /* @__PURE__ */ jsx("div", {
+						className: cn("grid h-full grid-cols-3 grid-rows-4 gap-1.5 p-1 w-full max-w-64 mx-auto", classNames?.year_view_grid),
+						children: Array.from({ length: 12 }, (_, i) => getYearRangeStart(cursor) + i).map((yr) => {
+							const isSelectedYear = selected instanceof Date && selected.getFullYear() === yr;
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									setCursor(new Date(yr, cursor.getMonth(), 1));
+									setViewMode("months");
+								},
+								className: cn("rounded-lg text-xs font-semibold transition-colors hover:bg-accent hover:text-accent-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", isSelectedYear ? "bg-primary text-primary-foreground" : "text-foreground"),
+								children: yr
+							}, yr);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center justify-between mt-3 px-1 pt-1 border-t border-border/20", classNames?.footer),
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							setCursor(firstOfMonth(today));
+							setFocusDate(today);
+							handleDateClick(today);
+							setViewMode("days");
+						},
+						className: cn("text-xs font-semibold text-primary transition-colors hover:text-primary/80 outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", classNames?.today_button),
+						children: "Today"
+					}),
+					selected instanceof Date && /* @__PURE__ */ jsx("span", {
+						className: "text-2xs tabular-nums text-muted-foreground/80 font-medium",
+						children: `${monthsShortList[selected.getMonth()]} ${selected.getDate()}, ${selected.getFullYear()}`
+					}),
+					selected && typeof selected === "object" && "from" in selected && selected.from && /* @__PURE__ */ jsxs("span", {
+						className: "text-2xs tabular-nums text-muted-foreground/80 font-medium",
+						children: [`${monthsShortList[selected.from.getMonth()]} ${selected.from.getDate()}`, selected.to ? ` - ${monthsShortList[selected.to.getMonth()]} ${selected.to.getDate()}` : " - ..."]
+					})
+				]
+			})
+		]
+	});
+}
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar };

package/dist/components/card.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card.d.ts
+declare function Card({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFrame({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFrameHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFrameTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFrameDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFrameFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardAction({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardPanel({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function CardFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+//#endregion
+export { Card, CardAction, CardPanel as CardContent, CardPanel, CardDescription, CardFooter, CardFrame, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle };