@ratio-ui/core 0.2.0 → 0.4.0

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,19 @@
+import { Accordion } from "@base-ui/react/accordion";
+import { JSX } from "react";
+/** The props of Accordion: Base UI's accordion props, except className, style and render. */
+export type AccordionProps = Omit<Accordion.Root.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionItem: Base UI's item props, except className, style and render. Give each a value. */
+export type AccordionItemProps = Omit<Accordion.Item.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionTrigger: Base UI's trigger props, except className, style and render. */
+export type AccordionTriggerProps = Omit<Accordion.Trigger.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionContent: Base UI's panel props, except className, style and render. */
+export type AccordionContentProps = Omit<Accordion.Panel.Props, 'className' | 'style' | 'render'>;
+/** A stack of sections that open and close. One section is open at a time unless multiple is set. */
+declare function Accordion$1({ ...props }: AccordionProps): JSX.Element;
+/** One section: a trigger and its content, separated from the next by a hairline. */
+export declare function AccordionItem({ ...props }: AccordionItemProps): JSX.Element;
+/** The heading row of a section, with a chevron that turns when it is open. */
+export declare function AccordionTrigger({ children, ...props }: AccordionTriggerProps): JSX.Element;
+/** The body of a section. It appears and disappears at once, with no height animation. */
+export declare function AccordionContent({ children, ...props }: AccordionContentProps): JSX.Element;
+export { Accordion$1 as Accordion };

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,52 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/accordion/Accordion.tsx
+/** A stack of sections that open and close. One section is open at a time unless multiple is set. */
+function Accordion$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: "rt:flex rt:w-full rt:flex-col",
+		...props
+	});
+}
+/** One section: a trigger and its content, separated from the next by a hairline. */
+function AccordionItem({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: "rt:not-last:border-b rt:not-last:border-divider",
+		...props
+	});
+}
+/** The heading row of a section, with a chevron that turns when it is open. */
+function AccordionTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "rt:flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("rt:group/accordion-trigger rt:flex rt:flex-1 rt:cursor-pointer rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-transparent rt:py-2.75 rt:text-left rt:text-b4 rt:text-foreground rt:outline-none", "rt:focus-visible:focus-ring rt:forced-outline", "rt:disabled:cursor-not-allowed rt:disabled:opacity-50 rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+			...props,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				className: "rt:flex rt:shrink-0 rt:rotate-0 rt:text-muted-foreground rt:group-aria-expanded/accordion-trigger:rotate-180",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "nav-chevron",
+					size: 12
+				})
+			})]
+		})
+	});
+}
+/** The body of a section. It appears and disappears at once, with no height animation. */
+function AccordionContent({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "rt:overflow-hidden rt:text-b3 rt:text-foreground",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:pb-2.75",
+			children
+		})
+	});
+}
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./Accordion.js";
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+/** The tone of an alert. Critical uses the question 1 tokens. */
+export type AlertTone = 'info' | 'success' | 'warning' | 'critical';
+/** The props of Alert: the HTML attributes of its div, except className, style, children and title. */
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title'> & {
+  /** The tone. Defaults to info. */
+  tone?: AlertTone;
+  /** An optional bold first line. */
+  title?: ReactNode;
+  /** An optional second line. */
+  description?: ReactNode;
+  /** An optional action on the right, usually one Button. */
+  action?: ReactNode;
+  /** Receives the rendered div. */
+  ref?: Ref<HTMLDivElement>;
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+export declare function Alert({ tone, title, description, action, ref, ...rest }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/alert/Alert.tsx
+const TONES = {
+	info: {
+		box: "rt:bg-primary-tint rt:border-primary-tint",
+		glyph: "rt:text-primary",
+		icon: "info-circle"
+	},
+	success: {
+		box: "rt:bg-success-tint rt:border-success-border",
+		glyph: "rt:text-success",
+		icon: "check"
+	},
+	warning: {
+		box: "rt:bg-warning-tint rt:border-warning-border",
+		glyph: "rt:text-warning",
+		icon: "alert-triangle"
+	},
+	critical: {
+		box: "rt:bg-alert-critical-background rt:border-alert-critical-border rt:text-alert-critical-foreground",
+		glyph: "rt:text-error-icon",
+		icon: "alert-triangle"
+	}
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+function Alert({ tone = "info", title, description, action, ref, ...rest }) {
+	const t = TONES[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: tone === "warning" || tone === "critical" ? "alert" : "status",
+		"data-slot": "alert",
+		...rest,
+		ref,
+		"data-tone": tone,
+		className: cn("rt:flex rt:w-full rt:min-w-0 rt:items-start rt:gap-2 rt:rounded-lg rt:border rt:px-3 rt:py-2 rt:text-left rt:text-foreground", t.box),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("rt:mt-0.5 rt:shrink-0", t.glyph),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: t.icon,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:gap-0.5",
+				children: [title ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					variant: "b4",
+					tone: tone === "critical" ? "inherit" : "default",
+					children: title
+				}) : null, description ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					tone: tone === "critical" ? "inherit" : "subdued",
+					children: description
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-action",
+				className: "rt:shrink-0",
+				children: action
+			}) : null
+		]
+	});
+}
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertTone } from "./Alert.js";
+export { Alert, type AlertProps, type AlertTone };

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export { Alert } from "./Alert.js";

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,48 @@
+import { ButtonVariant } from "../button/Button.js";
+import "../button/index.js";
+import { ComponentProps, JSX } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+/**
+ * The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+ * control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+ */
+declare function AlertDialog$1(props: AlertDialog.Root.Props): JSX.Element;
+/** Props of AlertDialogTrigger. */
+export type AlertDialogTriggerProps = Omit<AlertDialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the confirmation. */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): JSX.Element;
+/** Props of AlertDialogContent. */
+export type AlertDialogContentProps = Omit<AlertDialog.Popup.Props, 'className' | 'style'>;
+/**
+ * The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+ * AlertDialogHeader and AlertDialogFooter inside.
+ */
+export declare function AlertDialogContent(props: AlertDialogContentProps): JSX.Element;
+/** Props of AlertDialogHeader. */
+export type AlertDialogHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked. */
+export declare function AlertDialogHeader(props: AlertDialogHeaderProps): JSX.Element;
+/** Props of AlertDialogFooter. */
+export type AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom, aligned to the end. */
+export declare function AlertDialogFooter(props: AlertDialogFooterProps): JSX.Element;
+/** Props of AlertDialogTitle. */
+export type AlertDialogTitleProps = Omit<AlertDialog.Title.Props, 'className' | 'style'>;
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+export declare function AlertDialogTitle(props: AlertDialogTitleProps): JSX.Element;
+/** Props of AlertDialogDescription. */
+export type AlertDialogDescriptionProps = Omit<AlertDialog.Description.Props, 'className' | 'style'>;
+/** What will happen, in subdued body text. */
+export declare function AlertDialogDescription(props: AlertDialogDescriptionProps): JSX.Element;
+/** Props of AlertDialogAction. */
+export interface AlertDialogActionProps extends Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'> {
+  /** The Button look. Defaults to destructive; use main for a confirmation that deletes nothing. */
+  variant?: Extract<ButtonVariant, 'destructive' | 'main'>;
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+export declare function AlertDialogAction({ variant, ...props }: AlertDialogActionProps): JSX.Element;
+/** Props of AlertDialogCancel. */
+export type AlertDialogCancelProps = Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'>;
+/** The secondary button that closes the dialog without doing anything. */
+export declare function AlertDialogCancel(props: AlertDialogCancelProps): JSX.Element;
+export { AlertDialog$1 as AlertDialog };

package/dist/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,76 @@
+import { Button } from "../button/Button.js";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/alert-dialog/AlertDialog.tsx
+/**
+* The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+* control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+*/
+function AlertDialog$1(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
+}
+/** The button that opens the confirmation. */
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+/**
+* The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+* AlertDialogHeader and AlertDialogFooter inside.
+*/
+function AlertDialogContent(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, { children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		className: "rt:fixed rt:inset-0 rt:z-50 rt:m-auto rt:flex rt:h-fit rt:max-h-full rt:w-120 rt:max-w-full rt:overflow-y-auto rt:flex-col rt:gap-6 rt:rounded-lg rt:bg-popover rt:p-6 rt:text-b3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:focus-visible:focus-ring",
+		...props
+	}) });
+}
+/** The title and description, stacked. */
+function AlertDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: "rt:flex rt:flex-col rt:gap-1",
+		...props
+	});
+}
+/** The row of actions at the bottom, aligned to the end. */
+function AlertDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: "rt:flex rt:items-center rt:justify-end rt:gap-2",
+		...props
+	});
+}
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+function AlertDialogTitle(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** What will happen, in subdued body text. */
+function AlertDialogDescription(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+function AlertDialogAction({ variant = "destructive", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant }),
+		...props
+	});
+}
+/** The secondary button that closes the dialog without doing anything. */
+function AlertDialogCancel(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+		...props
+	});
+}
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./AlertDialog.js";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog/index.js

@@ -0,0 +1 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.js";

package/dist/components/app-shell/AppShell.js

@@ -1,6 +1,6 @@
 import { ShellNavContext } from "./context.js";
-import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
 // src/components/app-shell/AppShell.tsx
 /**
 * The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its

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

@@ -0,0 +1,19 @@
+import { JSX, Ref } from "react";
+/** One step of the trail. The last item, or any item without an href, is shown as plain text; the last is the current page. */
+export type BreadcrumbItem = {
+  /** The text of the step. */
+  label: string;
+  /** Where the step goes. Leave out for the current page. */
+  href?: string;
+};
+/** The props of Breadcrumb. */
+export type BreadcrumbProps = {
+  /** The trail, from the root to the current page. */
+  items: BreadcrumbItem[];
+  /** Past this many items the middle ones collapse behind an ellipsis, keeping the first and the last two. */
+  maxItems?: number;
+  /** Receives the rendered nav. */
+  ref?: Ref<HTMLElement>;
+};
+/** The trail to the current page: links, chevron separators, the current page as text and an overflow ellipsis. */
+export declare function Breadcrumb({ items, maxItems, ref }: BreadcrumbProps): JSX.Element;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,50 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/breadcrumb/Breadcrumb.tsx
+const STEP = "rt:text-b3 rt:rounded-sm rt:focus-visible:focus-ring";
+/** The trail to the current page: links, chevron separators, the current page as text and an overflow ellipsis. */
+function Breadcrumb({ items, maxItems, ref }) {
+	const [expanded, setExpanded] = useState(false);
+	const shown = !expanded && maxItems !== void 0 && items.length > maxItems && items.length > 3 ? [
+		items[0],
+		"ellipsis",
+		...items.slice(items.length - 2)
+	] : items;
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "rt:flex rt:flex-wrap rt:items-center rt:gap-2 rt:text-foreground-subdued",
+			children: shown.map((item, i) => {
+				const isLast = i === shown.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "rt:inline-flex rt:items-center rt:gap-2",
+					children: [item === "ellipsis" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Show hidden pages",
+						onClick: () => setExpanded(true),
+						className: cn(STEP, "rt:px-1 rt:transition-colors rt:hover:text-foreground"),
+						children: "…"
+					}) : isLast || !item.href ? /* @__PURE__ */ jsx("span", {
+						...isLast ? { "aria-current": "page" } : {},
+						className: cn(STEP, isLast ? "rt:text-foreground" : ""),
+						children: item.label
+					}) : /* @__PURE__ */ jsx(RatioLink, {
+						href: item.href,
+						className: cn(STEP, "rt:transition-colors rt:hover:text-foreground"),
+						children: item.label
+					}), !isLast && /* @__PURE__ */ jsx(Icon, {
+						name: "chevron-right",
+						size: 8,
+						tone: "icon"
+					})]
+				}, item === "ellipsis" ? "ellipsis" : `${item.label}|${item.href ?? ""}`);
+			})
+		})
+	});
+}
+export { Breadcrumb };

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

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb.js";
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb } from "./Breadcrumb.js";

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

@@ -0,0 +1,20 @@
+import { JSX } from "react";
+import { DayPickerProps } from "react-day-picker";
+/** Omit for each member of a union, so the selection modes of DayPicker stay a discriminated union. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * Props of Calendar: DayPicker's props (mode, selected, onSelect, defaultMonth, month, today, disabled, startMonth,
+ * endMonth, numberOfMonths, showOutsideDays, locale, labels and the rest), without the ones that restyle it, replace its
+ * parts, change how a date is written or animate it: the calendar is drawn by the design system, dates are written by
+ * the format module and motion is a colour fade only.
+ */
+export type CalendarProps = DistributiveOmit<DayPickerProps, 'className' | 'style' | 'classNames' | 'styles' | 'modifiersClassNames' | 'modifiersStyles' | 'components' | 'formatters' | 'captionLayout' | 'animate' | 'showWeekNumber'>;
+/**
+ * A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+ * accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+ * the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+ * Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+ * in a popover or a container as drawn.
+ */
+export declare function Calendar({ showOutsideDays, labels, ...props }: CalendarProps): JSX.Element;
+export {};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,119 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate } from "../../lib/format.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { DayPicker } from "react-day-picker";
+// src/components/calendar/Calendar.tsx
+const dayButtonVariants = cva("rt:flex rt:size-7 rt:items-center rt:justify-center rt:border-0 rt:p-0 rt:select-none rt:cursor-pointer rt:transition-colors rt:focus-visible:focus-ring rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { look: {
+		plain: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-foreground rt:hover:bg-muted rt:active:bg-muted",
+		today: "rt:rounded-md rt:bg-transparent rt:text-c3 rt:text-primary rt:hover:bg-muted rt:active:bg-muted",
+		outside: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-muted-foreground rt:hover:bg-muted rt:active:bg-muted",
+		selected: "rt:rounded-md rt:bg-primary rt:text-btn rt:text-primary-foreground rt:hover:bg-primary-hover rt:active:bg-primary-hover",
+		"range-middle": "rt:rounded-none rt:group-first:rounded-l-md rt:group-last:rounded-r-md rt:bg-primary-tint rt:text-btn rt:text-foreground"
+	} },
+	defaultVariants: { look: "plain" }
+});
+/** The look of a day from DayPicker's modifiers: a selection wins over outside, and outside over today. */
+function dayLook(modifiers) {
+	if (modifiers.range_middle) return "range-middle";
+	if (modifiers.selected) return "selected";
+	if (modifiers.outside) return "outside";
+	if (modifiers.today) return "today";
+	return "plain";
+}
+/**
+* The number in a day's button, written as the date pattern writes the day (two digits for DD), so the visible text is a
+* word of the button's name (WCAG 2.5.3): 03 in 03/10/2026.
+*/
+function formatDay(date) {
+	const day = String(date.getDate());
+	return FORMAT.datePattern.includes("DD") ? day.padStart(2, "0") : day;
+}
+/** A day as an accessible name, in the format module's date order: "Today, 28/10/2026, selected". */
+function labelDay(date, modifiers) {
+	return `${modifiers?.today ? "Today, " : ""}${formatDate(date)}${modifiers?.selected ? ", selected" : ""}`;
+}
+/**
+* The button of one day. DayPicker moves focus between days, so the button takes focus when its day is focused. Its look
+* comes after DayPicker's props, so it replaces DayPicker's class name.
+*/
+function CalendarDayButton({ day, modifiers, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...props,
+		"data-day": formatDate(day.date),
+		className: dayButtonVariants({ look: dayLook(modifiers) })
+	});
+}
+/** A month navigation button: the ghost Button with a chevron, disabled at the first or last allowed month. */
+function navButton(icon) {
+	return function CalendarNavButton({ onClick, tabIndex, "aria-label": label, "aria-disabled": ariaDisabled }) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			iconOnly: true,
+			"aria-label": label ?? "",
+			disabled: ariaDisabled === true || ariaDisabled === "true",
+			tabIndex,
+			onClick,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				size: 12
+			})
+		});
+	};
+}
+const PreviousMonthButton = navButton("chevron-left");
+const NextMonthButton = navButton("chevron-right");
+const CLASS_NAMES = {
+	root: "rt:relative rt:w-fit rt:p-2 rt:text-foreground",
+	months: "rt:relative rt:flex rt:flex-col rt:gap-4 rt:md:flex-row",
+	month: "rt:flex rt:w-full rt:flex-col rt:gap-2",
+	nav: "rt:absolute rt:inset-x-0 rt:top-0 rt:z-10 rt:flex rt:w-full rt:items-center rt:justify-between rt:gap-1",
+	month_caption: "rt:flex rt:h-7 rt:w-full rt:items-center rt:justify-center rt:px-7",
+	caption_label: "rt:text-c3 rt:text-foreground rt:select-none",
+	month_grid: "rt:w-full rt:border-collapse",
+	weekdays: "rt:flex",
+	weekday: "rt:flex rt:w-7 rt:items-center rt:justify-center rt:text-c1 rt:text-muted-foreground rt:select-none",
+	week: "rt:mt-1 rt:flex rt:w-full",
+	day: "rt:relative rt:size-7 rt:p-0 rt:text-center rt:select-none rt:first:rounded-l-md rt:last:rounded-r-md rt:group",
+	range_start: "rt:rounded-l-md rt:bg-primary-tint",
+	range_end: "rt:rounded-r-md rt:bg-primary-tint",
+	hidden: "rt:invisible",
+	footer: "rt:pt-2 rt:text-c1 rt:text-muted-foreground"
+};
+/**
+* A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+* accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+* the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+* Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+* in a popover or a container as drawn.
+*/
+function Calendar({ showOutsideDays = true, labels, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		"data-slot": "calendar",
+		showOutsideDays,
+		classNames: CLASS_NAMES,
+		components: {
+			DayButton: CalendarDayButton,
+			PreviousMonthButton,
+			NextMonthButton
+		},
+		formatters: { formatDay },
+		labels: {
+			labelDayButton: labelDay,
+			labelGridcell: labelDay,
+			labelPrevious: () => "Previous month",
+			labelNext: () => "Next month",
+			...labels
+		},
+		...props
+	});
+}
+export { Calendar };

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

@@ -0,0 +1,2 @@
+import { Calendar, CalendarProps } from "./Calendar.js";
+export { Calendar, type CalendarProps };

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar.js";