@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,182 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+function ChevronRightIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+	});
+}
+function EllipsisIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "19",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "5",
+				cy: "12",
+				r: "1"
+			})
+		]
+	});
+}
+const listClasses = "flex flex-wrap items-center gap-1.5 break-words font-sans text-sm text-muted-foreground sm:gap-2.5";
+const itemClasses = "inline-flex items-center gap-1.5";
+const linkClasses = "inline-flex items-center gap-1.5 rounded-md transition-colors duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-[current=page]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+const pageClasses = "font-normal text-foreground";
+const separatorClasses = "select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+const ellipsisClasses = "inline-flex items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/**
+* Navigation landmark that holds the trail. It defaults to
+* `aria-label="Breadcrumb"`; pass a localized `aria-label` (or
+* `aria-labelledby`) when the page language isn't English.
+*/
+const Breadcrumb = forwardRef(({ render, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => useRender({
+	defaultTagName: "nav",
+	render,
+	ref,
+	props: {
+		"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Breadcrumb" : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		...rest,
+		className
+	}
+}));
+Breadcrumb.displayName = "Breadcrumb";
+/**
+* Ordered list of crumbs. It wraps onto new lines on narrow viewports; cap
+* individual crumbs with a truncation `className` instead of letting the
+* whole trail overflow.
+*/
+const BreadcrumbList = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "ol",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(listClasses, className)
+	}
+}));
+BreadcrumbList.displayName = "BreadcrumbList";
+/** One entry in the trail: wraps a link, the current page, or a composed control. */
+const BreadcrumbItem = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "li",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(itemClasses, className)
+	}
+}));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+/**
+* Class list for an element styled as a breadcrumb link.
+*
+* Use it to give non-anchor crumbs the same resting/hover/focus treatment —
+* e.g. a Menu trigger button that reveals collapsed levels:
+*
+*   <MenuTrigger
+*     render={<button aria-label="Show hidden levels" className={breadcrumbLinkVariants()} />}
+*   >
+*     <BreadcrumbEllipsis />
+*   </MenuTrigger>
+*/
+function breadcrumbLinkVariants({ className } = {}) {
+	return cn(linkClasses, className);
+}
+/**
+* Ancestor link in the trail. Inline text links are exempt from the WCAG
+* 2.5.8 target-size floor, but keep the list's default gap so adjacent
+* targets stay distinguishable on touch screens. For the APG variant where
+* the current page stays a link, add `aria-current="page"` — the recipe
+* restyles it to match `BreadcrumbPage`.
+*/
+const BreadcrumbLink = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "a",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(linkClasses, className)
+	}
+}));
+BreadcrumbLink.displayName = "BreadcrumbLink";
+/**
+* The current page, rendered as plain text with `aria-current="page"` — an
+* honest `span`, not a disabled fake link. Use `BreadcrumbLink` with
+* `aria-current="page"` instead when the current page must stay navigable.
+*/
+const BreadcrumbPage = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "span",
+	render,
+	ref,
+	props: {
+		"aria-current": "page",
+		...rest,
+		className: cn(pageClasses, className)
+	}
+}));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+/**
+* Visual divider between crumbs. It is `aria-hidden` with
+* `role="presentation"`, so screen readers hear only the crumbs and the
+* list's item count — never the glyphs.
+*/
+const BreadcrumbSeparator = forwardRef(({ render, className, children = /* @__PURE__ */ jsx(ChevronRightIcon, {}), ...rest }, ref) => useRender({
+	defaultTagName: "li",
+	render,
+	ref,
+	props: {
+		role: "presentation",
+		"aria-hidden": "true",
+		...rest,
+		children,
+		className: cn(separatorClasses, className)
+	}
+}));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+/**
+* Marker for collapsed levels in a deep trail. It is decorative
+* (`aria-hidden`); when the hidden levels must stay reachable, wrap it in a
+* labelled trigger — e.g. a Menu trigger styled with
+* `breadcrumbLinkVariants()` — so the control, not the glyph, carries the
+* accessible name.
+*/
+const BreadcrumbEllipsis = forwardRef(({ render, className, children = /* @__PURE__ */ jsx(EllipsisIcon, {}), ...rest }, ref) => useRender({
+	defaultTagName: "span",
+	render,
+	ref,
+	props: {
+		role: "presentation",
+		"aria-hidden": "true",
+		...rest,
+		children,
+		className: cn(ellipsisClasses, className)
+	}
+}));
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants };

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbLinkVariantsOptions, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, breadcrumbLinkVariants } from "./Breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, breadcrumbLinkVariants };

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants } from "./Breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,57 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Button/Button.d.ts
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonVariantsOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a Button.
+ *
+ * Links must keep link semantics — never render an `<a>` through Button
+ * (it would receive `role="button"`). Style the anchor directly instead:
+ *
+ *   <a href="/docs" className={buttonVariants({ variant: "primary" })}>Docs</a>
+ */
+declare function buttonVariants({ variant, size, fullWidth, iconOnly, className }?: ButtonVariantsOptions): string;
+interface ButtonBaseProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "className"> {
+  /** Visual style of the button */
+  variant?: ButtonVariant;
+  /** Size of the button. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
+  size?: ButtonSize;
+  /** Stretch to fill the container width */
+  fullWidth?: boolean;
+  /**
+   * Show a progress indicator and block interaction while keeping the button
+   * focusable, so keyboard/screen-reader focus is not lost mid-action.
+   * The button keeps its width; the label is swapped for a centered spinner
+   * unless `loadingText` is set.
+   */
+  loading?: boolean;
+  /** Visible label shown next to the spinner while `loading` (announced to screen readers). */
+  loadingText?: ReactNode;
+  /** Decorative icon before the label (hidden from assistive technology). */
+  startIcon?: ReactNode;
+  /** Decorative icon after the label (hidden from assistive technology). */
+  endIcon?: ReactNode;
+  className?: string;
+}
+/** Icon-only buttons have no visible label, so an accessible name is required. */
+type ButtonIconOnlyProps = {
+  iconOnly: true;
+  "aria-label": string;
+} | {
+  iconOnly: true;
+  "aria-labelledby": string;
+} | {
+  iconOnly?: false;
+};
+type ButtonProps = ButtonBaseProps & ButtonIconOnlyProps;
+declare const Button$1: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button$1 as Button, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button/Button.js

@@ -0,0 +1,177 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Button/Button.tsx
+const baseClasses = "relative inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-semibold transition-colors duration-150 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const variantClasses = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-primary-300 active:bg-primary-400",
+	outline: "border border-border bg-transparent text-foreground hover:bg-muted active:bg-slate-200",
+	ghost: "bg-transparent text-primary hover:bg-primary-50 active:bg-primary-100",
+	destructive: "bg-destructive text-destructive-foreground hover:bg-error-700 active:bg-error-800",
+	link: "bg-transparent text-primary underline-offset-4 hover:underline active:text-primary-800"
+};
+const sizeClasses = {
+	sm: "h-8 gap-1.5 px-3 text-sm",
+	md: "h-10 gap-2 px-4 text-sm",
+	lg: "h-12 gap-2 px-6 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+const iconOnlySizeClasses = {
+	sm: "w-8 px-0",
+	md: "w-10 px-0",
+	lg: "w-12 px-0"
+};
+/**
+* Class list for an element styled as a Button.
+*
+* Links must keep link semantics — never render an `<a>` through Button
+* (it would receive `role="button"`). Style the anchor directly instead:
+*
+*   <a href="/docs" className={buttonVariants({ variant: "primary" })}>Docs</a>
+*/
+function buttonVariants({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, className } = {}) {
+	return cn(baseClasses, variantClasses[variant], sizeClasses[size], iconOnly && iconOnlySizeClasses[size], fullWidth && "w-full", className);
+}
+const loadingDataAttributes = { "data-loading": "" };
+const RIPPLE_DURATION_MS = 550;
+const RIPPLE_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+const RIPPLE_OPACITY = .12;
+const RIPPLE_TOUCH_DELAY_MS = 80;
+let reducedMotionQuery;
+function prefersReducedMotion() {
+	reducedMotionQuery ??= window.matchMedia("(prefers-reduced-motion: reduce)");
+	return reducedMotionQuery.matches;
+}
+/**
+* Expand a ripple from the press point (or the center for keyboard presses).
+*
+* Built for cheap rendering: one geometry read followed by one style write
+* (no interleaving that would force extra layouts), the circle is created at
+* its final size so the Web Animation touches only compositor-friendly
+* `transform`/`opacity`, and the node removes itself when the animation
+* settles — WAAPI fires `finish` even for hidden elements, so unlike
+* `animationend` this cannot leave orphaned nodes behind.
+*/
+function spawnRipple(container, clientX, clientY) {
+	const rect = container.getBoundingClientRect();
+	const x = clientX === void 0 ? rect.width / 2 : clientX - rect.left;
+	const y = clientY === void 0 ? rect.height / 2 : clientY - rect.top;
+	const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+	const span = document.createElement("span");
+	span.style.cssText = `position:absolute;left:${x - radius}px;top:${y - radius}px;width:${radius * 2}px;height:${radius * 2}px;border-radius:50%;background-color:currentColor;pointer-events:none;`;
+	container.appendChild(span);
+	const animation = span.animate([
+		{
+			transform: "scale(0)",
+			opacity: RIPPLE_OPACITY
+		},
+		{
+			transform: "scale(1)",
+			opacity: RIPPLE_OPACITY,
+			offset: .6
+		},
+		{
+			transform: "scale(1)",
+			opacity: 0
+		}
+	], {
+		duration: RIPPLE_DURATION_MS,
+		easing: RIPPLE_EASING
+	});
+	const cleanup = () => {
+		clearTimeout(fallback);
+		span.remove();
+	};
+	const fallback = setTimeout(cleanup, 650);
+	animation.onfinish = animation.oncancel = cleanup;
+}
+function Spinner() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "animate-spin",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4",
+			className: "opacity-25"
+		}), /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			className: "opacity-75",
+			d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	});
+}
+const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, loading = false, loadingText, startIcon, endIcon, disabled = false, focusableWhenDisabled = false, onPointerDown, onClick, className, children, ...rest }, ref) => {
+	const rippleContainerRef = useRef(null);
+	const handleRipplePointerDown = (event) => {
+		const container = rippleContainerRef.current;
+		if (container && !prefersReducedMotion()) {
+			const { clientX, clientY, currentTarget } = event;
+			if (event.pointerType === "touch") {
+				let timer;
+				const cancel = () => clearTimeout(timer);
+				timer = setTimeout(() => {
+					currentTarget.removeEventListener("pointercancel", cancel);
+					spawnRipple(container, clientX, clientY);
+				}, RIPPLE_TOUCH_DELAY_MS);
+				currentTarget.addEventListener("pointercancel", cancel, { once: true });
+			} else spawnRipple(container, clientX, clientY);
+		}
+		onPointerDown?.(event);
+	};
+	const handleRippleClick = (event) => {
+		if (event.detail === 0 && rippleContainerRef.current && !prefersReducedMotion()) spawnRipple(rippleContainerRef.current);
+		onClick?.(event);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		startIcon != null && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "inline-flex items-center",
+			children: startIcon
+		}),
+		children,
+		endIcon != null && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "inline-flex items-center",
+			children: endIcon
+		})
+	] });
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		disabled: disabled || loading,
+		focusableWhenDisabled: focusableWhenDisabled || loading,
+		"aria-busy": loading || void 0,
+		onPointerDown: handleRipplePointerDown,
+		onClick: handleRippleClick,
+		className: cn(buttonVariants({
+			variant,
+			size,
+			fullWidth,
+			iconOnly
+		}), loading && "data-disabled:opacity-100", className),
+		...loading ? loadingDataAttributes : void 0,
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: rippleContainerRef,
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [contain:strict]"
+		}), loading ? loadingText != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, {}), loadingText] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "invisible contents",
+			children: content
+		})] }) : content]
+	});
+});
+Button$1.displayName = "Button";
+//#endregion
+export { Button$1 as Button, buttonVariants };

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants } from "./Button.js";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, buttonVariants };

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+import { Button, buttonVariants } from "./Button.js";
+export { Button, buttonVariants };

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,140 @@
+import { ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Calendar/Calendar.d.ts
+type CalendarMode = "single" | "multiple" | "range";
+/** Inclusive date range. `onValueChange` only ever emits complete ranges. */
+interface CalendarDateRange {
+  start: Date;
+  end: Date;
+}
+/** State passed to the `render` callback (also exposed as root data-attributes). */
+type CalendarState = {
+  mode: CalendarMode;
+  disabled: boolean;
+  readOnly: boolean;
+};
+interface CalendarBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "className" | "children" | "defaultValue"> {
+  /**
+   * Month shown in the first grid (controlled). Any day of the month works;
+   * it is normalized to the first. Pair with `onMonthChange`.
+   */
+  month?: Date;
+  /**
+   * Initial visible month (uncontrolled). Defaults to the month of the first
+   * selected date, else the current month.
+   */
+  defaultMonth?: Date;
+  /** Called when the visible month changes (navigation buttons or keyboard paging). */
+  onMonthChange?: (month: Date) => void;
+  /**
+   * Months rendered side by side (wraps on narrow containers). Navigation
+   * pages by this amount so months never repeat across a page turn.
+   * @default 1
+   */
+  numberOfMonths?: number;
+  /**
+   * Earliest selectable day. Days before it are hard-disabled: dimmed,
+   * skipped by keyboard focus, and the previous-month button disables at
+   * the boundary.
+   */
+  minDate?: Date;
+  /** Latest selectable day — the `minDate` counterpart. */
+  maxDate?: Date;
+  /**
+   * Marks days as unavailable (e.g. sold out). Unlike `minDate`/`maxDate`,
+   * unavailable days stay keyboard-focusable and readable (WCAG 4.5:1) so
+   * screen-reader users can discover them — they just can't be selected.
+   * In `range` mode a pending selection is limited to the contiguous
+   * available run around its start date.
+   */
+  isDateUnavailable?: (date: Date) => boolean;
+  /** Disable the whole calendar: selection and navigation. */
+  disabled?: boolean;
+  /** Keep the calendar navigable but ignore selection — for display-only surfaces. */
+  readOnly?: boolean;
+  /**
+   * BCP-47 tag (e.g. `"en-US"`, `"th-TH"`) for the caption, weekday names,
+   * day numerals, and day-cell accessible labels via `Intl.DateTimeFormat`.
+   * Defaults to the runtime locale. Rendering stays Gregorian, but locales
+   * with a different default calendar display accordingly (Thai → Buddhist-era
+   * years).
+   */
+  locale?: string;
+  /**
+   * First day of the week: 0 = Sunday … 6 = Saturday. Defaults to the
+   * locale's week convention when the runtime exposes it, else Sunday.
+   */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Show the leading/trailing days of adjacent months. They are inert
+   * (visual continuity only) and hidden from assistive technology.
+   * @default true
+   */
+  showOutsideDays?: boolean;
+  /**
+   * Always render six weeks per month so the calendar height never changes
+   * while paging — recommended inside popovers.
+   * @default false
+   */
+  fixedWeeks?: boolean;
+  /**
+   * The day highlighted as "today" (`aria-current="date"`). Defaults to the
+   * current date; pin it in tests and visual baselines for determinism.
+   */
+  today?: Date;
+  /** Move focus to the focus-target day (selected → today → first enabled) on mount. */
+  autoFocus?: boolean;
+  /**
+   * Accessible label for the previous-month navigation button.
+   * @default "Previous month"
+   */
+  previousMonthLabel?: string;
+  /**
+   * Accessible label for the next-month navigation button.
+   * @default "Next month"
+   */
+  nextMonthLabel?: string;
+  className?: string;
+  /** Replace the root element — Base UI's composition prop. */
+  render?: useRender.RenderProp<CalendarState>;
+}
+/** Selection props follow `mode`, so a mismatched value shape fails to compile. */
+type CalendarModeProps = {
+  /** Selection behavior. `single` picks one date. @default "single" */
+  mode?: "single";
+  /** Selected date (controlled). `null` = empty. */
+  value?: Date | null;
+  /** Initial selected date (uncontrolled). */
+  defaultValue?: Date | null;
+  /** Called with the new date, or `null` when deselected via `allowDeselect`. */
+  onValueChange?: (value: Date | null) => void;
+  /**
+   * Let clicking the selected date clear it — for optional filters.
+   * @default false
+   */
+  allowDeselect?: boolean;
+} | {
+  /** `multiple` toggles any number of dates. */
+  mode: "multiple";
+  /** Selected dates (controlled), kept sorted ascending. */
+  value?: Date[];
+  /** Initial selected dates (uncontrolled). */
+  defaultValue?: Date[];
+  /** Called with the new sorted date list after every toggle. */
+  onValueChange?: (value: Date[]) => void;
+  allowDeselect?: never;
+} | {
+  /** `range` picks a start and end with a live preview in between. */
+  mode: "range";
+  /** Selected range (controlled). `null` = empty. */
+  value?: CalendarDateRange | null;
+  /** Initial selected range (uncontrolled). */
+  defaultValue?: CalendarDateRange | null;
+  /** Called only with complete `{ start, end }` ranges (ends ordered, never inverted). */
+  onValueChange?: (value: CalendarDateRange | null) => void;
+  allowDeselect?: never;
+};
+type CalendarProps = CalendarBaseProps & CalendarModeProps;
+declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Calendar, CalendarDateRange, CalendarMode, CalendarProps, CalendarState };