beez-ui 0.6.2 → 0.8.0

package/dist/components/form.js

@@ -49,6 +49,11 @@ const FormField = (t0) => {
 	}
 	return t3;
 };
+/**
+* Reads the field and item context shared by the form parts.
+* @returns Accessible ids plus the react-hook-form state of the enclosing field.
+* @throws When used outside `<FormField>`, where no field name is available.
+*/
 const useFormField = () => {
 	const $ = _c(13);
 	const fieldContext = React.useContext(FormFieldContext);
@@ -63,6 +68,9 @@ const useFormField = () => {
 		t0 = $[1];
 	}
 	const formState = useFormState(t0);
+	if (!fieldContext.name) {
+		throw new Error("useFormField: must be used within <FormField>, which provides the field name");
+	}
 	let t1;
 	if ($[2] !== fieldContext.name || $[3] !== formState || $[4] !== getFieldState) {
 		t1 = getFieldState(fieldContext.name, formState);
@@ -74,9 +82,6 @@ const useFormField = () => {
 		t1 = $[5];
 	}
 	const fieldState = t1;
-	if (!fieldContext) {
-		throw new Error("useFormField should be used within <FormField>");
-	}
 	const { id } = itemContext;
 	const t2 = `${id}-form-item`;
 	const t3 = `${id}-form-item-description`;
@@ -149,12 +154,9 @@ function FormItem(t0) {
 	}
 	let t4;
 	if ($[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsx(FormItemContext.Provider, {
-				value: t1,
-				children: t3
-			})
+		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+			value: t1,
+			children: t3
 		});
 		$[10] = t1;
 		$[11] = t3;

package/dist/components/info-popover.d.ts

@@ -0,0 +1,23 @@
+/** Icon button that toggles a short explanatory message, for inline help next to labels. */
+import { type ReactNode } from "react";
+export interface InfoPopoverLabels {
+    /** Accessible name of the close button inside the message. */
+    close?: string;
+    /** Accessible name of the icon-only trigger. */
+    trigger?: string;
+}
+export interface InfoPopoverProps {
+    /** Explanation shown inside the popover. */
+    message: ReactNode;
+    labels?: InfoPopoverLabels;
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * Renders an info icon that opens the message on click or tap, unlike a hover tooltip, so it
+ * works on touch devices. Escape, an outside click or the close button dismiss it.
+ * @param props - Message, optional labels, side and class names.
+ * @returns The trigger with its popover.
+ */
+export declare function InfoPopover({ message, labels, side, className, contentClassName }: InfoPopoverProps): import("react").JSX.Element;

package/dist/components/info-popover.js

@@ -0,0 +1,158 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Icon button that toggles a short explanatory message, for inline help next to labels. */
+import { useState } from "react";
+import { Info, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const INFO_POPOVER_DEFAULT_LABELS = {
+	close: "Cerrar ayuda",
+	trigger: "Más información"
+};
+/**
+* Renders an info icon that opens the message on click or tap, unlike a hover tooltip, so it
+* works on touch devices. Escape, an outside click or the close button dismiss it.
+* @param props - Message, optional labels, side and class names.
+* @returns The trigger with its popover.
+*/
+export function InfoPopover(t0) {
+	const $ = _c(25);
+	const { message, labels, side: t1, className, contentClassName } = t0;
+	const side = t1 === undefined ? "top" : t1;
+	let t2;
+	if ($[0] !== labels) {
+		t2 = {
+			...INFO_POPOVER_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const resolvedLabels = t2;
+	const [isOpen, setIsOpen] = useState(false);
+	const t3 = resolvedLabels.trigger;
+	let t4;
+	if ($[2] !== className) {
+		t4 = cn("text-muted-foreground hover:text-foreground aria-expanded:text-foreground", className);
+		$[2] = className;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx(Info, {
+			"aria-hidden": "true",
+			className: "size-[0.95rem]"
+		});
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	let t6;
+	if ($[5] !== resolvedLabels.trigger || $[6] !== t4) {
+		t6 = /* @__PURE__ */ _jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(Button, {
+				"data-slot": "info-popover-trigger",
+				"aria-label": t3,
+				className: t4,
+				size: "icon-xs",
+				type: "button",
+				variant: "ghost",
+				children: t5
+			})
+		});
+		$[5] = resolvedLabels.trigger;
+		$[6] = t4;
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	let t7;
+	if ($[8] !== contentClassName) {
+		t7 = cn("relative w-[min(20rem,calc(100vw-2rem))] py-3.5 pr-10 pl-3.5", contentClassName);
+		$[8] = contentClassName;
+		$[9] = t7;
+	} else {
+		t7 = $[9];
+	}
+	let t8;
+	let t9;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => setIsOpen(false);
+		t9 = /* @__PURE__ */ _jsx(X, {
+			"aria-hidden": "true",
+			className: "size-[0.95rem]"
+		});
+		$[10] = t8;
+		$[11] = t9;
+	} else {
+		t8 = $[10];
+		t9 = $[11];
+	}
+	let t10;
+	if ($[12] !== resolvedLabels.close) {
+		t10 = /* @__PURE__ */ _jsx(Button, {
+			"aria-label": resolvedLabels.close,
+			className: "absolute top-2 right-2",
+			size: "icon-xs",
+			type: "button",
+			variant: "ghost",
+			onClick: t8,
+			children: t9
+		});
+		$[12] = resolvedLabels.close;
+		$[13] = t10;
+	} else {
+		t10 = $[13];
+	}
+	let t11;
+	if ($[14] !== message) {
+		t11 = /* @__PURE__ */ _jsx("div", {
+			className: "m-0 text-sm leading-normal text-foreground",
+			children: message
+		});
+		$[14] = message;
+		$[15] = t11;
+	} else {
+		t11 = $[15];
+	}
+	let t12;
+	if ($[16] !== side || $[17] !== t10 || $[18] !== t11 || $[19] !== t7) {
+		t12 = /* @__PURE__ */ _jsxs(PopoverContent, {
+			"data-slot": "info-popover-content",
+			side,
+			sideOffset: 10,
+			collisionPadding: 16,
+			className: t7,
+			children: [t10, t11]
+		});
+		$[16] = side;
+		$[17] = t10;
+		$[18] = t11;
+		$[19] = t7;
+		$[20] = t12;
+	} else {
+		t12 = $[20];
+	}
+	let t13;
+	if ($[21] !== isOpen || $[22] !== t12 || $[23] !== t6) {
+		t13 = /* @__PURE__ */ _jsxs(Popover, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: [t6, t12]
+		});
+		$[21] = isOpen;
+		$[22] = t12;
+		$[23] = t6;
+		$[24] = t13;
+	} else {
+		t13 = $[24];
+	}
+	return t13;
+}

package/dist/components/input-group.js

@@ -23,7 +23,7 @@ function InputGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
+		t1 = cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-[color,background-color,border-color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/input.js

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }) {
 		children: /* @__PURE__ */ _jsx(InputPrimitive, {
 			type,
 			"data-slot": "input",
-			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,background-color,border-color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 			...props
 		})
 	});

package/dist/components/month-calendar-header.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Month calendar toolbar: previous/next month navigation with an animated title, a "today"
+ * shortcut with an optional clock label, an optional view toggle and slots for actions and filters.
+ */
+import { type ComponentType, type ReactNode, type SVGProps } from "react";
+import type { MonthTransitionDirection } from "../hooks/use-month-transition-direction.js";
+export interface MonthCalendarHeaderLabels {
+    previousMonth: string;
+    nextMonth: string;
+    today: string;
+    viewMode: string;
+}
+/** One option of the view toggle, such as list or calendar. */
+export interface MonthCalendarViewOption<TView extends string> {
+    value: TView;
+    label: string;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+}
+/** Navigation target: a URL rendered as a link, or a callback rendered as a button. */
+export type MonthCalendarNavigation = {
+    href: string;
+    onSelect?: never;
+} | {
+    href?: never;
+    onSelect: () => void;
+};
+export interface MonthCalendarHeaderProps<TView extends string> {
+    /** Visible `YYYY-MM` month. */
+    month: string;
+    previousMonth: MonthCalendarNavigation;
+    nextMonth: MonthCalendarNavigation;
+    today?: MonthCalendarNavigation;
+    /** Title of the month. Defaults to the localized month and year, such as "Mayo de 2026". */
+    title?: ReactNode;
+    titleAs?: "h1" | "h2";
+    /** Side the title slides in from after a month change (see `useMonthTransitionDirection`). */
+    monthTransitionDirection?: MonthTransitionDirection;
+    /** Clock label next to the "today" shortcut, or null before hydration. */
+    timeLabel?: string | null;
+    viewOptions?: readonly MonthCalendarViewOption<TView>[];
+    view?: TView;
+    onViewChange?: (view: TView) => void;
+    /** Glide the active view marker; turn off while the view still follows the viewport. */
+    shouldAnimateView?: boolean;
+    actions?: ReactNode;
+    /** Rendered as the last row, such as filter chips. */
+    filters?: ReactNode;
+    locale?: string;
+    labels?: Partial<MonthCalendarHeaderLabels>;
+    className?: string;
+}
+/**
+ * Formats a month key as a capitalized month and year.
+ * @param month - `YYYY-MM` month key.
+ * @param locale - BCP 47 locale.
+ * @returns For example "Mayo de 2026".
+ */
+export declare function formatMonthTitle(month: string, locale?: string): string;
+/**
+ * Renders the header of a month calendar. The title is keyed by month so it replays its entrance,
+ * and the view marker glides between the toggle buttons.
+ * @param props - Month, navigation targets, optional view toggle, actions and labels.
+ * @returns The calendar header.
+ */
+export declare function MonthCalendarHeader<TView extends string>({ month, previousMonth, nextMonth, today, title, titleAs: TitleElement, monthTransitionDirection, timeLabel, viewOptions, view, onViewChange, shouldAnimateView, actions, filters, locale, labels, className, }: MonthCalendarHeaderProps<TView>): import("react").JSX.Element;

package/dist/components/month-calendar-header.js

@@ -0,0 +1,337 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Month calendar toolbar: previous/next month navigation with an animated title, a "today"
+* shortcut with an optional clock label, an optional view toggle and slots for actions and filters.
+*/
+import { useId } from "react";
+import { motion } from "motion/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { SPRING_LAYOUT } from "../motion/tokens.js";
+import { Button } from "./button.js";
+import { Link } from "./link.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOCALE = "es-AR";
+const MONTH_KEY_FIRST_DAY_SUFFIX = "-01T12:00:00Z";
+/** Moves the view marker without animation (for example while the view follows the viewport). */
+const INSTANT_TRANSITION = { duration: 0 };
+const MONTH_CALENDAR_HEADER_DEFAULT_LABELS = {
+	previousMonth: "Mes anterior",
+	nextMonth: "Mes siguiente",
+	today: "Hoy",
+	viewMode: "Vista"
+};
+/**
+* Formats a month key as a capitalized month and year.
+* @param month - `YYYY-MM` month key.
+* @param locale - BCP 47 locale.
+* @returns For example "Mayo de 2026".
+*/
+export function formatMonthTitle(month, locale = DEFAULT_LOCALE) {
+	const monthTitle = new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(new Date(month + MONTH_KEY_FIRST_DAY_SUFFIX));
+	return monthTitle.charAt(0).toLocaleUpperCase(locale) + monthTitle.slice(1);
+}
+const PILL_LINK_CLASS_NAME = "inline-flex items-center justify-center rounded-full border border-border bg-background font-semibold text-foreground no-underline [-webkit-tap-highlight-color:transparent] transition-[border-color,background-color,scale] hover:border-[color-mix(in_oklab,var(--foreground)_24%,var(--border))] hover:bg-accent active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+/**
+* Renders a navigation target as a router link or a button.
+* @param props - Target, class name, accessible name and content.
+* @returns The control.
+*/
+function NavigationControl(t0) {
+	const $ = _c(12);
+	const { navigation, className, ariaLabel, children } = t0;
+	if (navigation.href !== undefined) {
+		let t1;
+		if ($[0] !== ariaLabel || $[1] !== children || $[2] !== className || $[3] !== navigation.href) {
+			t1 = /* @__PURE__ */ _jsx(Link, {
+				"aria-label": ariaLabel,
+				className,
+				href: navigation.href,
+				children
+			});
+			$[0] = ariaLabel;
+			$[1] = children;
+			$[2] = className;
+			$[3] = navigation.href;
+			$[4] = t1;
+		} else {
+			t1 = $[4];
+		}
+		return t1;
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cn("cursor-pointer", className);
+		$[5] = className;
+		$[6] = t1;
+	} else {
+		t1 = $[6];
+	}
+	let t2;
+	if ($[7] !== ariaLabel || $[8] !== children || $[9] !== navigation.onSelect || $[10] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("button", {
+			"aria-label": ariaLabel,
+			className: t1,
+			type: "button",
+			onClick: navigation.onSelect,
+			children
+		});
+		$[7] = ariaLabel;
+		$[8] = children;
+		$[9] = navigation.onSelect;
+		$[10] = t1;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	return t2;
+}
+/**
+* Renders the header of a month calendar. The title is keyed by month so it replays its entrance,
+* and the view marker glides between the toggle buttons.
+* @param props - Month, navigation targets, optional view toggle, actions and labels.
+* @returns The calendar header.
+*/
+export function MonthCalendarHeader(t0) {
+	const $ = _c(47);
+	const { month, previousMonth, nextMonth, today, title, titleAs: t1, monthTransitionDirection, timeLabel, viewOptions, view, onViewChange, shouldAnimateView: t2, actions, filters, locale: t3, labels, className } = t0;
+	const TitleElement = t1 === undefined ? "h1" : t1;
+	const shouldAnimateView = t2 === undefined ? true : t2;
+	const locale = t3 === undefined ? DEFAULT_LOCALE : t3;
+	let t4;
+	if ($[0] !== labels) {
+		t4 = {
+			...MONTH_CALENDAR_HEADER_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t4;
+	} else {
+		t4 = $[1];
+	}
+	const resolvedLabels = t4;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const viewIndicatorLayoutId = useId();
+	const hasToolbar = Boolean(today || timeLabel || viewOptions && viewOptions.length > 0 || actions);
+	const viewIndicatorTransition = shouldAnimateView && !shouldReduceMotion ? SPRING_LAYOUT : INSTANT_TRANSITION;
+	let t5;
+	if ($[2] !== className) {
+		t5 = cn("grid grid-cols-[minmax(0,1fr)] items-center gap-x-6 gap-y-3 border-b border-border/75 pb-4 lg:grid-cols-[auto_minmax(0,1fr)]", className);
+		$[2] = className;
+		$[3] = t5;
+	} else {
+		t5 = $[3];
+	}
+	const t6 = resolvedLabels.previousMonth;
+	let t7;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = cn(PILL_LINK_CLASS_NAME, "group/previous size-9 flex-none");
+		$[4] = t7;
+	} else {
+		t7 = $[4];
+	}
+	let t8;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ _jsx(ChevronLeftIcon, {
+			"aria-hidden": true,
+			className: "size-[1.1rem] transition-transform [@media(hover:hover)_and_(pointer:fine)]:group-hover/previous:-translate-x-0.5"
+		});
+		$[5] = t8;
+	} else {
+		t8 = $[5];
+	}
+	let t9;
+	if ($[6] !== previousMonth || $[7] !== resolvedLabels.previousMonth) {
+		t9 = /* @__PURE__ */ _jsx(NavigationControl, {
+			ariaLabel: t6,
+			className: t7,
+			navigation: previousMonth,
+			children: t8
+		});
+		$[6] = previousMonth;
+		$[7] = resolvedLabels.previousMonth;
+		$[8] = t9;
+	} else {
+		t9 = $[8];
+	}
+	let t10;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = cn("m-0 min-w-0 text-center font-display text-[clamp(1.6rem,4vw,2.25rem)] leading-[1.1] font-semibold text-foreground [overflow-wrap:anywhere] lg:px-1 lg:text-left", "data-[month-transition=next]:[--beez-month-enter-offset:10px] data-[month-transition=previous]:[--beez-month-enter-offset:-10px]", "data-[month-transition=next]:animate-[beez-month-title-enter_280ms_cubic-bezier(0.16,1,0.3,1)_both] data-[month-transition=previous]:animate-[beez-month-title-enter_280ms_cubic-bezier(0.16,1,0.3,1)_both]");
+		$[9] = t10;
+	} else {
+		t10 = $[9];
+	}
+	let t11;
+	if ($[10] !== locale || $[11] !== month || $[12] !== title) {
+		t11 = title ?? formatMonthTitle(month, locale);
+		$[10] = locale;
+		$[11] = month;
+		$[12] = title;
+		$[13] = t11;
+	} else {
+		t11 = $[13];
+	}
+	let t12;
+	if ($[14] !== TitleElement || $[15] !== month || $[16] !== monthTransitionDirection || $[17] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(TitleElement, {
+			className: t10,
+			"data-month-transition": monthTransitionDirection,
+			children: t11
+		}, month);
+		$[14] = TitleElement;
+		$[15] = month;
+		$[16] = monthTransitionDirection;
+		$[17] = t11;
+		$[18] = t12;
+	} else {
+		t12 = $[18];
+	}
+	const t13 = resolvedLabels.nextMonth;
+	let t14;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = cn(PILL_LINK_CLASS_NAME, "group/next size-9 flex-none");
+		$[19] = t14;
+	} else {
+		t14 = $[19];
+	}
+	let t15;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
+			"aria-hidden": true,
+			className: "size-[1.1rem] transition-transform [@media(hover:hover)_and_(pointer:fine)]:group-hover/next:translate-x-0.5"
+		});
+		$[20] = t15;
+	} else {
+		t15 = $[20];
+	}
+	let t16;
+	if ($[21] !== nextMonth || $[22] !== resolvedLabels.nextMonth) {
+		t16 = /* @__PURE__ */ _jsx(NavigationControl, {
+			ariaLabel: t13,
+			className: t14,
+			navigation: nextMonth,
+			children: t15
+		});
+		$[21] = nextMonth;
+		$[22] = resolvedLabels.nextMonth;
+		$[23] = t16;
+	} else {
+		t16 = $[23];
+	}
+	let t17;
+	if ($[24] !== t12 || $[25] !== t16 || $[26] !== t9) {
+		t17 = /* @__PURE__ */ _jsxs("div", {
+			className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 lg:grid-cols-[auto_auto_auto]",
+			children: [
+				t9,
+				t12,
+				t16
+			]
+		});
+		$[24] = t12;
+		$[25] = t16;
+		$[26] = t9;
+		$[27] = t17;
+	} else {
+		t17 = $[27];
+	}
+	let t18;
+	if ($[28] !== actions || $[29] !== hasToolbar || $[30] !== onViewChange || $[31] !== resolvedLabels.today || $[32] !== resolvedLabels.viewMode || $[33] !== timeLabel || $[34] !== today || $[35] !== view || $[36] !== viewIndicatorLayoutId || $[37] !== viewIndicatorTransition || $[38] !== viewOptions) {
+		t18 = hasToolbar ? /* @__PURE__ */ _jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-center justify-between gap-3 lg:justify-end",
+			children: [today || timeLabel ? /* @__PURE__ */ _jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-[0.6rem]",
+				children: [today ? /* @__PURE__ */ _jsx(NavigationControl, {
+					className: cn(PILL_LINK_CLASS_NAME, "min-h-9 px-[0.9rem] text-[0.9rem]"),
+					navigation: today,
+					children: resolvedLabels.today
+				}) : null, timeLabel ? /* @__PURE__ */ _jsx("p", {
+					className: "m-0 text-[0.85rem] text-muted-foreground tabular-nums",
+					children: timeLabel
+				}) : null]
+			}) : null, /* @__PURE__ */ _jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-[0.6rem]",
+				children: [viewOptions && viewOptions.length > 0 ? /* @__PURE__ */ _jsx("div", {
+					"aria-label": resolvedLabels.viewMode,
+					className: "isolate inline-flex gap-1 rounded-xl border border-border p-[0.2rem]",
+					role: "group",
+					children: viewOptions.map((option) => {
+						const isActive = view === option.value;
+						const ViewIcon = option.icon;
+						return /* @__PURE__ */ _jsxs("span", {
+							className: "relative inline-flex",
+							children: [isActive ? /* @__PURE__ */ _jsx(motion.span, {
+								"aria-hidden": true,
+								className: "pointer-events-none absolute inset-0 -z-10 rounded-(--radius) bg-secondary",
+								layoutId: viewIndicatorLayoutId,
+								transition: viewIndicatorTransition
+							}) : null, /* @__PURE__ */ _jsxs(Button, {
+								"aria-pressed": isActive,
+								className: cn(isActive && "bg-transparent text-secondary-foreground hover:bg-transparent"),
+								size: "icon",
+								type: "button",
+								variant: "ghost",
+								onClick: () => onViewChange?.(option.value),
+								children: [/* @__PURE__ */ _jsx(ViewIcon, { "aria-hidden": true }), /* @__PURE__ */ _jsx("span", {
+									className: "sr-only",
+									children: option.label
+								})]
+							})]
+						}, option.value);
+					})
+				}) : null, actions]
+			})]
+		}) : null;
+		$[28] = actions;
+		$[29] = hasToolbar;
+		$[30] = onViewChange;
+		$[31] = resolvedLabels.today;
+		$[32] = resolvedLabels.viewMode;
+		$[33] = timeLabel;
+		$[34] = today;
+		$[35] = view;
+		$[36] = viewIndicatorLayoutId;
+		$[37] = viewIndicatorTransition;
+		$[38] = viewOptions;
+		$[39] = t18;
+	} else {
+		t18 = $[39];
+	}
+	let t19;
+	if ($[40] !== filters) {
+		t19 = filters ? /* @__PURE__ */ _jsx("div", {
+			className: "col-span-full min-w-0",
+			children: filters
+		}) : null;
+		$[40] = filters;
+		$[41] = t19;
+	} else {
+		t19 = $[41];
+	}
+	let t20;
+	if ($[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t5) {
+		t20 = /* @__PURE__ */ _jsxs("header", {
+			"data-slot": "month-calendar-header",
+			className: t5,
+			children: [
+				t17,
+				t18,
+				t19
+			]
+		});
+		$[42] = t17;
+		$[43] = t18;
+		$[44] = t19;
+		$[45] = t5;
+		$[46] = t20;
+	} else {
+		t20 = $[46];
+	}
+	return t20;
+}