@bysages/react 0.2.2 → 0.3.0

package/dist/components/back-top/index.d.mts

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react";
+//#region src/components/back-top/index.d.ts
+export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
+  /** How far the reader must have travelled (px) before the affordance
+   * appears. */
+  threshold?: number;
+  /** The accessible name; the control is icon-only by default. */
+  label?: string;
+  /** Ride a scrolling element of your own instead of the page: the
+   * control moors inside that element's corner and watches its
+   * scrollTop. The host supplies the positioning context. */
+  scrollEl?: () => HTMLElement | null;
+}
+/**
+ * A way home: after the page has scrolled past `threshold`, a small
+ * floating control rises at the page's corner and returns the reader to
+ * the top. The scroll itself stays native — `window.scrollTo` defers to
+ * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+ * back into an instant jump (a moored control asks the media query
+ * directly, since a scroller of its own has no stylesheet to defer to).
+ * The button stays mounted either way so the entrance is a transition,
+ * never a pop.
+ *
+ * The control itself is the shared `Button` (outline, square) — the
+ * paper, hairline and halo are its; this family owns only the floating
+ * and the entrance.
+ */
+export declare function BackTop({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
+//#endregion

package/dist/components/back-top/index.mjs

@@ -0,0 +1,82 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/back-top/index.tsx
+/** The single glyph a way-home control needs: one stroke pointing up. */
+function chevronUp() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 14 6-6 6 6" })
+	});
+}
+/**
+* A way home: after the page has scrolled past `threshold`, a small
+* floating control rises at the page's corner and returns the reader to
+* the top. The scroll itself stays native — `window.scrollTo` defers to
+* the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+* back into an instant jump (a moored control asks the media query
+* directly, since a scroller of its own has no stylesheet to defer to).
+* The button stays mounted either way so the entrance is a transition,
+* never a pop.
+*
+* The control itself is the shared `Button` (outline, square) — the
+* paper, hairline and halo are its; this family owns only the floating
+* and the entrance.
+*/
+function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
+	injectComponentStyle("back-top");
+	const [visible, setVisible] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const el = scrollEl?.() ?? null;
+		const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
+		onScroll();
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			if (el) el.removeEventListener("scroll", onScroll);
+			else window.removeEventListener("scroll", onScroll);
+		};
+	}, [threshold, scrollEl]);
+	const toTop = () => {
+		const el = scrollEl?.();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "back-top",
+		"data-part": "root",
+		"data-state": visible ? "shown" : "hidden",
+		...scrollEl ? { "data-container": "" } : {},
+		children: /* @__PURE__ */ jsx(Button, {
+			...rest,
+			variant: "outline",
+			square: true,
+			size: "lg",
+			type: "button",
+			"aria-label": label,
+			"aria-hidden": visible ? void 0 : "true",
+			tabIndex: visible ? 0 : -1,
+			onClick: toTop,
+			children: rest.children ?? chevronUp()
+		})
+	});
+}
+//#endregion
+export { BackTop };

package/dist/components/badge/index.d.mts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+//#region src/components/badge/index.d.ts
+/** A small seal of state. Ink is the neutral tone; the four semantic
+ * pigments are fixed. Subtle and outline re-register the same pigment. */
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  variant?: "solid" | "subtle" | "outline";
+}
+export declare function Badge({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/badge/index.mjs

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/index.tsx
+function Badge({ tone = "ink", variant = "solid", ...rest }) {
+	injectComponentStyle("badge");
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"data-scope": "badge",
+		"data-part": "root",
+		"data-tone": tone,
+		"data-variant": variant
+	});
+}
+//#endregion
+export { Badge };

package/dist/components/banner/index.d.mts

@@ -0,0 +1,31 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+//#region src/components/banner/index.d.ts
+export type BannerStatus = "ink" | "info" | "success" | "warning" | "danger";
+export interface BannerRootProps extends HTMLAttributes<HTMLElement> {
+  status?: BannerStatus;
+}
+export declare const Banner: (({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element) & {
+  Root: ({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element;
+  Icon: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Body: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Title: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Description: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Actions: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Close: (rest: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+//#endregion

package/dist/components/banner/index.mjs

@@ -0,0 +1,63 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/banner/index.tsx
+/** A page-level notice, spoken across the full measure: a wash of the
+* status pigment, one heavier hairline on the leading edge, and room
+* for actions and a quiet close. Ink is the neutral register; the four
+* semantic pigments are fixed. */
+const Root = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	role: status === "ink" ? void 0 : "status",
+	"data-scope": "banner",
+	"data-part": "root",
+	"data-status": status,
+	children
+});
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "banner",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Banner" + name;
+	return Component;
+}
+const Icon = part("Icon", "span");
+const Body = part("Body", "div");
+const Title = part("Title", "p");
+const Description = part("Description", "p");
+const Actions = part("Actions", "div");
+/** The quiet close: a plain square-cut button; dismissal stays the
+* consumer's state. */
+const Close = (rest) => /* @__PURE__ */ jsx("button", {
+	...rest,
+	type: rest.type ?? "button",
+	"aria-label": rest["aria-label"] ?? "Dismiss",
+	"data-scope": "banner",
+	"data-part": "close",
+	children: /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 4l8 8M12 4l-8 8",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	})
+});
+const Banner = Object.assign(Root, {
+	Root,
+	Icon,
+	Body,
+	Title,
+	Description,
+	Actions,
+	Close
+});
+injectComponentStyle("banner");
+//#endregion
+export { Banner };

package/dist/components/bento/index.d.mts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/bento/index.d.ts
+export interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+  children?: ReactNode;
+}
+export interface BentoCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** Columns this tile claims. */
+  span?: number;
+  /** Rows this tile claims. */
+  rowSpan?: number;
+  children?: ReactNode;
+}
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+ * The container owns the track count; each cell claims its own span. */
+export declare function BentoRoot({ columns, children, ...rest }: BentoProps): import("react").JSX.Element;
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+ * of the plate stays in measure. */
+export declare function BentoCell({ span, rowSpan, children, ...rest }: BentoCellProps): import("react").JSX.Element;
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+export declare const Bento: typeof BentoRoot & {
+  Root: typeof BentoRoot;
+  Cell: typeof BentoCell;
+};
+//#endregion

package/dist/components/bento/index.mjs

@@ -0,0 +1,41 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bento/index.tsx
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+* The container owns the track count; each cell claims its own span. */
+function BentoRoot({ columns = 3, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-bento-columns": String(columns)
+		},
+		children
+	});
+}
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+* of the plate stays in measure. */
+function BentoCell({ span = 1, rowSpan = 1, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "cell",
+		style: {
+			...rest.style,
+			"--bs-bento-span-x": String(span),
+			"--bs-bento-span-y": String(rowSpan)
+		},
+		children
+	});
+}
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+const Bento = Object.assign(BentoRoot, {
+	Root: BentoRoot,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento, BentoCell, BentoRoot };

package/dist/components/block-ui/index.d.mts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/block-ui/index.d.ts
+export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: ReactNode;
+}
+/** A curtain over content that must wait: the blocked region keeps its
+ * shape and dims under frosted paper while a quiet wheel reports the
+ * wait. Callers own the state; the curtain only answers it. */
+export declare function BlockUI({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+//#endregion

package/dist/components/block-ui/index.mjs

@@ -0,0 +1,24 @@
+import { Spinner } from "../spinner/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/block-ui/index.tsx
+/** A curtain over content that must wait: the blocked region keeps its
+* shape and dims under frosted paper while a quiet wheel reports the
+* wait. Callers own the state; the curtain only answers it. */
+function BlockUI({ blocked = false, children, ...rest }) {
+	injectComponentStyle("block-ui");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "block-ui",
+		"data-part": "root",
+		"data-blocked": blocked ? "" : void 0,
+		"aria-busy": blocked || void 0,
+		children: [children, blocked ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "block-ui",
+			"data-part": "mask",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+		}) : null]
+	});
+}
+//#endregion
+export { BlockUI };

package/dist/components/breadcrumb/index.d.mts

@@ -0,0 +1,32 @@
+import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+//#region src/components/breadcrumb/index.d.ts
+export declare const Breadcrumb: {
+  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  List: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Item: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Link: {
+    ({ children, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Current: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Separator: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/breadcrumb/index.mjs

@@ -0,0 +1,35 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/breadcrumb/index.tsx
+/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
+* each Item carries a Link — or the Current page — parted by a quiet
+* Separator. Links take href and the rest through attributes. */
+function part(name, tag, extra = {}, fallback) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...extra,
+		...rest,
+		"data-scope": "breadcrumb",
+		"data-part": name.toLowerCase(),
+		children: children ?? fallback
+	});
+	Component.displayName = "Breadcrumb" + name;
+	return Component;
+}
+const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+const List = part("List", "ol");
+const Item = part("Item", "li");
+const Link = part("Link", "a");
+const Current = part("Current", "span", { "aria-current": "page" });
+const Separator = part("Separator", "span", { "aria-hidden": "true" }, "/");
+const Breadcrumb = Object.assign(Root, {
+	Root,
+	List,
+	Item,
+	Link,
+	Current,
+	Separator
+});
+injectComponentStyle("breadcrumb");
+//#endregion
+export { Breadcrumb };

package/dist/components/browser/index.d.mts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/browser/index.d.ts
+export interface BrowserPartProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+/** The three lamps are the system's own fixed pigments — the same
+ * semantics reserved for danger, warning, and success. */
+export declare function BrowserDots(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserRoot(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserTitleBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserUrlBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserBody(props: BrowserPartProps): import("react").JSX.Element;
+/** A browser window as a vessel: title bar, the three lamps, the
+ * address well, and a body that carries whatever the site hangs in
+ * it — an iframe, a screenshot, a live page. */
+export declare const Browser: typeof BrowserRoot & {
+  Root: typeof BrowserRoot;
+  TitleBar: typeof BrowserTitleBar;
+  Dots: typeof BrowserDots;
+  UrlBar: typeof BrowserUrlBar;
+  Body: typeof BrowserBody;
+};
+//#endregion

package/dist/components/browser/index.mjs

@@ -0,0 +1,70 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/browser/index.tsx
+/** The three lamps are the system's own fixed pigments — the same
+* semantics reserved for danger, warning, and success. */
+function BrowserDots(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "dots",
+		children: [
+			"danger",
+			"warning",
+			"success"
+		].map((tone) => /* @__PURE__ */ jsx("span", {
+			"data-scope": "browser",
+			"data-part": "dot",
+			"data-tone": tone
+		}, tone))
+	});
+}
+function BrowserRoot(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "root",
+		children: props.children
+	});
+}
+function BrowserTitleBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "titlebar",
+		children: props.children
+	});
+}
+function BrowserUrlBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "urlbar",
+		children: props.children
+	});
+}
+function BrowserBody(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "body",
+		children: props.children
+	});
+}
+/** A browser window as a vessel: title bar, the three lamps, the
+* address well, and a body that carries whatever the site hangs in
+* it — an iframe, a screenshot, a live page. */
+const Browser = Object.assign(BrowserRoot, {
+	Root: BrowserRoot,
+	TitleBar: BrowserTitleBar,
+	Dots: BrowserDots,
+	UrlBar: BrowserUrlBar,
+	Body: BrowserBody
+});
+//#endregion
+export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };

package/dist/components/button/index.d.mts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+//#region src/components/button/index.d.ts
+/** The control recipe as a standalone button: the variant chooses how it
+ * rests, the tone chooses the pigment. Ink is the solemn default; any
+ * action can carry the primary weight. */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "solid" | "outline" | "ghost" | "subtle";
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  size?: "sm" | "md" | "lg";
+  /** Icon-only: the silhouette squares to the control height. */
+  square?: boolean;
+  /** Render the child element as the button — the recipe rides on it
+   * (a router Link, say) instead of wrapping it in a nested <button>. */
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+export declare function Button({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/button/index.mjs

@@ -0,0 +1,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/button/index.tsx
+function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
+	injectComponentStyle("button");
+	const partProps = {
+		...rest,
+		"data-scope": "button",
+		"data-part": "root",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-square": square ? "true" : void 0,
+		"data-motion": "ink-ripple lit"
+	};
+	if (asChild) {
+		const child = Children.only(children);
+		return isValidElement(child) ? cloneElement(child, partProps) : null;
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		disabled,
+		...partProps,
+		children
+	});
+}
+//#endregion
+export { Button };

package/dist/components/button-group/index.d.mts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/button-group/index.d.ts
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** The seam runs across the group (default) or down it. */
+  orientation?: "horizontal" | "vertical";
+  /** One register for every member: falls onto data-size for the
+   * stylesheet to retune the buttons' heights. */
+  size?: "sm" | "md" | "lg";
+  /** The members' corner register: retunes --bs-radius-control for the
+   * whole fused shape — edges and trimmed seams keep one story. */
+  radius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  children?: ReactNode;
+}
+/**
+ * Buttons fused into one control: the group owns only the joinery, so
+ * members keep every variant they were given — a solid action can sit
+ * beside an outline one and the seam still reads. Selection belongs to
+ * the toggle group; this is layout alone.
+ */
+declare function Root({ orientation, size, radius, children, ...rest }: ButtonGroupProps): import("react").JSX.Element;
+export declare const ButtonGroup: typeof Root & {
+  Root: typeof Root;
+};
+//#endregion

package/dist/components/button-group/index.mjs

@@ -0,0 +1,25 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group/index.tsx
+/**
+* Buttons fused into one control: the group owns only the joinery, so
+* members keep every variant they were given — a solid action can sit
+* beside an outline one and the seam still reads. Selection belongs to
+* the toggle group; this is layout alone.
+*/
+function Root({ orientation = "horizontal", size, radius, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "group",
+		"data-scope": "button-group",
+		"data-part": "root",
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-radius": radius,
+		children
+	});
+}
+const ButtonGroup = Object.assign(Root, { Root });
+injectComponentStyle("button-group");
+//#endregion
+export { ButtonGroup };

package/dist/components/calendar/index.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+import { DatePickerRootProps } from "@ark-ui/react/date-picker";
+//#region src/components/calendar/index.d.ts
+export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Selected date(s) — an array, as the machine speaks in ranges. */
+  value?: DatePickerRootProps["value"];
+  min?: DatePickerRootProps["min"];
+  max?: DatePickerRootProps["max"];
+  onValueChange?: (value: NonNullable<DatePickerRootProps["value"]>) => void;
+}
+/** The date-picker's month grid, standing on the page without its
+ * popup: always open, the trigger gone, the vessel a quiet card. The
+ * title zooms out through month and year grids; the grids themselves
+ * are the shared machinery — value, range selection, and focus ride
+ * Ark's own contract. */
+export declare function Calendar({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+//#endregion