beez-ui 0.8.2 → 0.9.0

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

@@ -1,65 +0,0 @@
-/**
- * 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

@@ -1,337 +0,0 @@
-"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;
-}

package/dist/components/month-grid.d.ts

@@ -1,59 +0,0 @@
-/**
- * Month grid of dated items, such as events or deadlines. Wide screens show one pill per item;
- * phones show one dot per item and list the selected day under the grid.
- */
-import { type ReactNode } from "react";
-import { type CalendarWeekStart } from "../lib/month-grid.js";
-/** Presentation of one dated item, already resolved by the application. */
-export interface MonthGridItem {
-    id: string;
-    /** `YYYY-MM-DD` day the item belongs to, in the zone the application displays. */
-    dateKey: string;
-    title: string;
-    /** Short start time, such as "18:00". */
-    timeLabel?: string;
-    /** Past items are muted. */
-    isPast?: boolean;
-    /** Cancelled items are struck through, muted and labelled. */
-    isCancelled?: boolean;
-    /** CSS color of the dot and the pill accent. Defaults to the primary color. */
-    accentColor?: string;
-    /** CSS color of the pill surface. Defaults to the background. */
-    surfaceColor?: string;
-    /** Leading content of the pill, such as a type badge or icon. */
-    leading?: ReactNode;
-}
-export interface MonthGridLabels {
-    table: string;
-    today: string;
-    cancelled: string;
-    /** Accessible name of the phone summary of the selected day. */
-    dayItems: string;
-    /** Accessible name of a phone day button. */
-    dayButton: (dayLabel: string, itemCount: number) => string;
-    /** Seven weekday headers, Monday first; rotated when the week starts on Sunday. */
-    weekDays: readonly string[];
-}
-export interface MonthGridProps<TItem extends MonthGridItem> {
-    /** Visible `YYYY-MM` month. */
-    month: string;
-    items: readonly TItem[];
-    onSelectItem: (item: TItem) => void;
-    /** `YYYY-MM-DD` key of today, or null before hydration. */
-    todayKey?: string | null;
-    weekStartsOn?: CalendarWeekStart;
-    /** Day whose items are listed under the grid on phones. */
-    activeDayKey?: string | null;
-    onSelectDay?: (dayKey: string) => void;
-    /** Renders the phone summary of the selected day. Defaults to a list of item buttons. */
-    renderDaySummary?: (dayKey: string, dayItems: readonly TItem[]) => ReactNode;
-    locale?: string;
-    labels?: Partial<MonthGridLabels>;
-    className?: string;
-}
-/**
- * Renders the month as an accessible table with today marked (`aria-current="date"`).
- * @param props - Month, items, selection callbacks and optional labels.
- * @returns The month grid and its phone day summary.
- */
-export declare function MonthGrid<TItem extends MonthGridItem>({ month, items, onSelectItem, todayKey, weekStartsOn, activeDayKey, onSelectDay, renderDaySummary, locale, labels, className, }: MonthGridProps<TItem>): import("react").JSX.Element;