@idyeah/diya 0.0.0-stage → 1.0.0

package/dist/avatar/Avatar.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { avatarMessages } from './messages.js';
+/** A person's picture or initials, with an optional presence dot. */
+export const Avatar = forwardRef(function Avatar({ name, src, size = 'medium', shape = 'circle', status, className, ...props }, ref) {
+    const t = useDiyaMessages('avatar', avatarMessages);
+    const [failed, setFailed] = useState();
+    const image = useRef(null);
+    useEffect(() => {
+        // A cached failure may finish before hydration can attach the error handler.
+        if (src && image.current?.complete && image.current.naturalWidth === 0)
+            setFailed(src);
+    }, [src]);
+    const initials = name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0]).join('').toUpperCase();
+    return _jsxs("span", { ...props, ref: ref, className: cx('diya-avatar', className), "data-size": size, "data-shape": shape, role: "img", "aria-label": `${name || t.user}${status ? `, ${t[status]}` : ''}`, children: [src && failed !== src ? _jsx("img", { ref: image, src: src, alt: "", onError: () => setFailed(src) }) : initials ? _jsx("span", { "aria-hidden": "true", children: initials }) : _jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("circle", { cx: "12", cy: "8", r: "4" }), _jsx("path", { d: "M4 21v-2a8 8 0 0 1 16 0v2" })] }), status && _jsx("span", { className: "diya-avatar-status", "data-status": status, "aria-hidden": "true" })] });
+});

package/dist/avatar/messages.d.ts

@@ -0,0 +1,7 @@
+/** avatar: English defaults, overridable through DiyaProvider `messages`. */
+export declare const avatarMessages: {
+    user: string;
+    online: string;
+    away: string;
+    busy: string;
+};

package/dist/avatar/messages.js

@@ -0,0 +1,2 @@
+/** avatar: English defaults, overridable through DiyaProvider `messages`. */
+export const avatarMessages = { user: 'User', online: 'online', away: 'away', busy: 'busy' };

package/dist/badge/Badge.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes } from 'react';
+import { badgeMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        badge: typeof badgeMessages;
+    }
+}
+/** Status vocabulary shared by Badge, Tag, Alert and Toast: 'neutral' plain, 'brand' your brand color, 'success' done, 'warning' needs care, 'error' failed, 'info' for information. */
+export type Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** Required, so a Badge never guesses: 'count' shows `count` as a number; 'dot' is a small dot with no text. */
+    variant: 'count' | 'dot';
+    /** Badge size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Color meaning; see `Tone`. 'brand' follows the provider's brand color. Defaults to 'neutral'. */
+    tone?: Tone;
+    /** Whole number shown by a 'count' badge; a count of 0 hides the badge unless `showZero` is set. */
+    count?: number;
+    /** Highest number shown; larger counts show as '{max}+', such as '99+', while the accessible name keeps the real count. Defaults to 99. */
+    max?: number;
+    /** Keeps a 'count' badge visible at 0. */
+    showZero?: boolean;
+    /** Accessible name, never shown: what the dot means, or what is counted, read after the number ("3 unread messages"). For visible text, use Tag. */
+    label: string;
+};
+/** A small count (`variant="count"`) or dot (`variant="dot"`) that flags status or new items. Its `label` is announced, never shown. */
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Required, so a Badge never guesses: 'count' shows `count` as a number; 'dot' is a small dot with no text. */
+    variant: "count" | "dot";
+    /** Badge size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** Color meaning; see `Tone`. 'brand' follows the provider's brand color. Defaults to 'neutral'. */
+    tone?: Tone;
+    /** Whole number shown by a 'count' badge; a count of 0 hides the badge unless `showZero` is set. */
+    count?: number;
+    /** Highest number shown; larger counts show as '{max}+', such as '99+', while the accessible name keeps the real count. Defaults to 99. */
+    max?: number;
+    /** Keeps a 'count' badge visible at 0. */
+    showZero?: boolean;
+    /** Accessible name, never shown: what the dot means, or what is counted, read after the number ("3 unread messages"). For visible text, use Tag. */
+    label: string;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/badge/Badge.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { countLabel } from './badge-utils.js';
+import { badgeMessages } from './messages.js';
+/** A small count (`variant="count"`) or dot (`variant="dot"`) that flags status or new items. Its `label` is announced, never shown. */
+export const Badge = forwardRef(function Badge({ variant, size = 'medium', tone = 'neutral', count = 0, max = 99, showZero = false, label, className, ...props }, ref) {
+    const t = useDiyaMessages('badge', badgeMessages);
+    const dot = variant === 'dot';
+    const value = countLabel(count, max);
+    if (!dot && value.count === 0 && !showZero)
+        return null;
+    return (_jsx("span", { role: "img", ...props, ref: ref, className: cx('diya-badge', className), "data-variant": dot ? 'dot' : 'count', "data-size": size, "data-color": tone, "data-multiple": !dot && value.text.length > 1 ? true : undefined, "aria-label": dot ? label : t.count(value.count, label), children: !dot && _jsx("span", { "aria-hidden": "true", children: value.text }) }));
+});

package/dist/badge/badge-utils.d.ts

@@ -0,0 +1,6 @@
+export declare function normalizeHex(value: string): string | null;
+export declare function badgeForeground(hex: string): '#000000' | '#FFFFFF';
+export declare function countLabel(count: number, maximum: number): {
+    count: number;
+    text: string;
+};

package/dist/badge/badge-utils.js

@@ -0,0 +1,24 @@
+'use client';
+export function normalizeHex(value) {
+    const hex = value.trim().replace(/^#/, '');
+    if (/^[\da-f]{3}$/i.test(hex))
+        return `#${[...hex]
+            .map((x) => x + x)
+            .join('')
+            .toUpperCase()}`;
+    return /^[\da-f]{6}$/i.test(hex) ? `#${hex.toUpperCase()}` : null;
+}
+export function badgeForeground(hex) {
+    const color = normalizeHex(hex) ?? '#808080';
+    const channels = [1, 3, 5].map((index) => {
+        const value = parseInt(color.slice(index, index + 2), 16) / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+    return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? '#000000' : '#FFFFFF';
+}
+export function countLabel(count, maximum) {
+    const safeCount = Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0;
+    const safeMax = Number.isFinite(maximum) ? Math.max(1, Math.floor(maximum)) : 99;
+    return { count: safeCount, text: safeCount > safeMax ? `${safeMax}+` : String(safeCount) };
+}

package/dist/badge/messages.d.ts

@@ -0,0 +1,4 @@
+/** badge: English defaults, overridable through DiyaProvider `messages`. */
+export declare const badgeMessages: {
+    count: (count: number, label: string) => string;
+};

package/dist/badge/messages.js

@@ -0,0 +1,2 @@
+/** badge: English defaults, overridable through DiyaProvider `messages`. */
+export const badgeMessages = { count: (count, label) => `${count} ${label}` };

package/dist/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes } from 'react';
+import { breadcrumbsMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        breadcrumbs: typeof breadcrumbsMessages;
+    }
+}
+export type BreadcrumbItem = {
+    /** Visible page name. */
+    label: string;
+    /** Link target; also the item's key, so keep it unique. */
+    href: string;
+};
+export type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {
+    /** The trail from the top level to the current page; the last item is the current page and is not a link. */
+    items: BreadcrumbItem[];
+    /** Replaces the first item's text with a home icon; its `label` stays as the accessible name. */
+    showHomeIcon?: boolean;
+    /** With more than three items, folds the middle ones into a "More pages" menu. */
+    collapsed?: boolean;
+    /** Handles plain left-clicks and menu picks in the app instead of following `href`; modified clicks still open the link. Without it, items are links through the provider's `linkComponent`. */
+    onNavigate?: (item: BreadcrumbItem) => void;
+};
+/** A trail of links from the top level to the current page; the ref, `className`, `style` and other attributes go to the `nav`. */
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** The trail from the top level to the current page; the last item is the current page and is not a link. */
+    items: BreadcrumbItem[];
+    /** Replaces the first item's text with a home icon; its `label` stays as the accessible name. */
+    showHomeIcon?: boolean;
+    /** With more than three items, folds the middle ones into a "More pages" menu. */
+    collapsed?: boolean;
+    /** Handles plain left-clicks and menu picks in the app instead of following `href`; modified clicks still open the link. Without it, items are links through the provider's `linkComponent`. */
+    onNavigate?: (item: BreadcrumbItem) => void;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Menu } from '../menu/Menu.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { useDiyaLinkComponent } from '../internal/link.js';
+import { breadcrumbsMessages } from './messages.js';
+/** A trail of links from the top level to the current page; the ref, `className`, `style` and other attributes go to the `nav`. */
+export const Breadcrumbs = forwardRef(function Breadcrumbs({ items, showHomeIcon = false, collapsed = false, onNavigate, className, ...props }, ref) {
+    const t = useDiyaMessages('breadcrumbs', breadcrumbsMessages);
+    const Link = useDiyaLinkComponent();
+    if (!items.length)
+        return null;
+    const middle = items.slice(1, -1);
+    const shown = collapsed && items.length > 3 ? [items[0], null, items[items.length - 1]] : items;
+    return _jsx("nav", { "aria-label": t.label, ...props, ref: ref, className: cx('diya-breadcrumbs', className), children: _jsx("ol", { children: shown.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("svg", { className: "diya-breadcrumb-separator", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m9 5 7 7-7 7" }) }), !item ? _jsx("span", { className: "diya-breadcrumb-collapse", children: _jsx(Menu, { label: t.morePages, items: middle.map((entry) => ({ id: entry.href, label: entry.label, href: entry.href, onSelect: onNavigate && (() => onNavigate(entry)) })) }) }) : index === shown.length - 1 ? _jsx("span", { "aria-current": "page", children: item.label }) : _jsx(Link, { href: item.href, "aria-label": showHomeIcon && index === 0 ? item.label : undefined, onClick: onNavigate ? (event) => { if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                            return; event.preventDefault(); onNavigate(item); } : undefined, children: showHomeIcon && index === 0 ? _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m3 10 9-7 9 7v11H3Z M9 21v-8h6v8" }) }) : item.label })] }, `${item?.href ?? 'collapsed'}-${index}`)) }) });
+});

package/dist/breadcrumbs/messages.d.ts

@@ -0,0 +1,5 @@
+/** breadcrumbs: English defaults, overridable through DiyaProvider `messages`. */
+export declare const breadcrumbsMessages: {
+    label: string;
+    morePages: string;
+};

package/dist/breadcrumbs/messages.js

@@ -0,0 +1,2 @@
+/** breadcrumbs: English defaults, overridable through DiyaProvider `messages`. */
+export const breadcrumbsMessages = { label: 'Breadcrumb', morePages: 'More pages' };

package/dist/button/Button.d.ts

@@ -0,0 +1,46 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** 'solid' for the main action, 'outline' for secondary ones, 'quiet' for low-emphasis ones, 'destructive' for an action that deletes or can't be undone. Defaults to 'solid'. */
+    variant?: 'solid' | 'outline' | 'quiet' | 'destructive';
+    /** Button height and text size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** 'pill' is fully round; 'rounded' uses the shared control corner, like fields. Defaults to 'pill'. */
+    shape?: 'pill' | 'rounded';
+    /** Square button for a single icon child; give it an `aria-label`, since the icon is its only content. */
+    iconOnly?: boolean;
+    /** Shows a working indicator and sets `aria-busy`; the label stays unless `iconOnly`. The button stays focusable, so focus isn't lost while it works, but it is inert: `aria-disabled="true"`, and clicks, Enter and Space do nothing, so it can't submit twice. */
+    loading?: boolean;
+    /** Renders a link to this URL that looks like a Button, through the provider's `linkComponent` (a plain anchor by default). */
+    href?: string;
+    /** With `href`, where the link opens, such as '_blank'. */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** With `href`, the link's relationship to this page, such as 'noopener'. */
+    rel?: string;
+    /** With `href`, downloads the target instead of opening it; a string names the saved file. */
+    download?: AnchorHTMLAttributes<HTMLAnchorElement>['download'];
+    /** Styles your single child element as the Button instead of rendering one, such as a router `Link`; DIYA's classes, attributes and handlers merge into it. */
+    asChild?: boolean;
+};
+/** A native button in DIYA's styles, or a link that looks like one with `href` or `asChild`; other button attributes pass through, and `type` defaults to 'button'. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** 'solid' for the main action, 'outline' for secondary ones, 'quiet' for low-emphasis ones, 'destructive' for an action that deletes or can't be undone. Defaults to 'solid'. */
+    variant?: "solid" | "outline" | "quiet" | "destructive";
+    /** Button height and text size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** 'pill' is fully round; 'rounded' uses the shared control corner, like fields. Defaults to 'pill'. */
+    shape?: "pill" | "rounded";
+    /** Square button for a single icon child; give it an `aria-label`, since the icon is its only content. */
+    iconOnly?: boolean;
+    /** Shows a working indicator and sets `aria-busy`; the label stays unless `iconOnly`. The button stays focusable, so focus isn't lost while it works, but it is inert: `aria-disabled="true"`, and clicks, Enter and Space do nothing, so it can't submit twice. */
+    loading?: boolean;
+    /** Renders a link to this URL that looks like a Button, through the provider's `linkComponent` (a plain anchor by default). */
+    href?: string;
+    /** With `href`, where the link opens, such as '_blank'. */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    /** With `href`, the link's relationship to this page, such as 'noopener'. */
+    rel?: string;
+    /** With `href`, downloads the target instead of opening it; a string names the saved file. */
+    download?: AnchorHTMLAttributes<HTMLAnchorElement>["download"];
+    /** Styles your single child element as the Button instead of rendering one, such as a router `Link`; DIYA's classes, attributes and handlers merge into it. */
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/button/Button.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { cx } from '../internal/cx.js';
+import { useDiyaLinkComponent } from '../internal/link.js';
+import { onlyChild, renderSlot } from '../internal/slot.js';
+// A link can't be disabled natively, so its clicks stop here, before the link or a router sees them.
+function stopClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+// A loading button keeps focus but must not act: Enter and Space would activate it, so they stop here too.
+function stopActivation(event) {
+    if (event.key === 'Enter' || event.key === ' ')
+        event.preventDefault();
+}
+/** A native button in DIYA's styles, or a link that looks like one with `href` or `asChild`; other button attributes pass through, and `type` defaults to 'button'. */
+export const Button = forwardRef(function Button({ variant = 'solid', size = 'medium', shape = 'pill', iconOnly = false, loading = false, disabled, children, className, type = 'button', href, target, rel, download, asChild = false, ...props }, ref) {
+    const Link = useDiyaLinkComponent();
+    const inactive = !!disabled || loading;
+    const shared = { className: cx('diya-button', className), 'data-variant': variant, 'data-size': size, 'data-shape': shape, 'data-icon-only': iconOnly || undefined, 'aria-busy': loading || undefined };
+    const content = (inner) => _jsxs(_Fragment, { children: [loading && _jsx("span", { className: "diya-button-progress", "aria-hidden": "true", children: "\u00B7\u00B7\u00B7" }), !(iconOnly && loading) && inner] });
+    if (asChild) {
+        const child = onlyChild(children);
+        if (!isValidElement(child))
+            return null;
+        const own = child;
+        const filled = loading ? cloneElement(own, undefined, content(own.props.children)) : own;
+        return renderSlot(filled, { ...props, ...shared, 'aria-disabled': inactive || undefined, onClickCapture: inactive ? stopClick : undefined }, ref);
+    }
+    if (href !== undefined) {
+        const anchor = props;
+        const anchorRef = ref;
+        // Without its href the anchor leaves the tab order and can't be followed, like a disabled button.
+        if (inactive)
+            return _jsx("a", { ...anchor, ...shared, ref: anchorRef, role: "link", "aria-disabled": "true", onClickCapture: stopClick, children: content(children) });
+        return _jsx(Link, { ...anchor, ...shared, ref: anchorRef, href: href, target: target, rel: rel, download: download, children: content(children) });
+    }
+    // Loading keeps the button in the tab order with focus on it, unlike disabled; aria-disabled and the
+    // blocked click (which Enter, Space and a form's implicit submission all go through) make it inert.
+    const busy = loading && !disabled;
+    const button = props;
+    return _jsx("button", { ...button, ...shared, ref: ref, type: type, disabled: !!disabled, "aria-disabled": busy ? true : button['aria-disabled'], onClickCapture: busy ? stopClick : button.onClickCapture, onKeyDown: busy ? stopActivation : button.onKeyDown, children: content(children) });
+});

package/dist/calendar/Calendar.d.ts

@@ -0,0 +1,55 @@
+import { type HTMLAttributes } from 'react';
+import { calendarMessages } from './messages.js';
+import { type DateRange } from './month.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        calendar: typeof calendarMessages;
+    }
+}
+type CalendarBase = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> & {
+    /** Visible label above the calendar; also names it for assistive tech. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the calendar's accessible name. */
+    hideLabel?: boolean;
+    /** Day height and type size, matching fields of the same size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Earliest date that can be chosen, as ISO YYYY-MM-DD; earlier days show as unavailable. */
+    min?: string;
+    /** Latest date that can be chosen, as ISO YYYY-MM-DD; later days show as unavailable. */
+    max?: string;
+    /** Called with each ISO YYYY-MM-DD day on show; return true to mark the day unavailable (announced, and it can't be chosen), as with `min` and `max`. */
+    isDateUnavailable?: (date: string) => boolean;
+    /** Dims the calendar and stops every day and month button. */
+    disabled?: boolean;
+    /** The month on show as ISO YYYY-MM, when controlled; pair it with `onMonthChange`. Left out, the calendar starts on the chosen date's month, or today's. */
+    month?: string;
+    /** Called with the ISO YYYY-MM month to show: from the month buttons, from the keyboard moving into another month, or when `value` changes to a date in another month. */
+    onMonthChange?: (month: string) => void;
+};
+/** One ISO date (YYYY-MM-DD), '' for none. */
+export type CalendarSingleProps = CalendarBase & {
+    /** Single-date mode (the default): leave unset or false. */
+    range?: false;
+    /** The chosen date as ISO YYYY-MM-DD, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen ISO date when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the chosen ISO YYYY-MM-DD date. */
+    onValueChange?: (value: string) => void;
+};
+/** A start and end date. */
+export type CalendarRangeProps = CalendarBase & {
+    /** Range mode: the first click sets the start, the second the end (swapped if earlier); the next click starts a new range. */
+    range: true;
+    /** The chosen range as ISO YYYY-MM-DD dates, a bound '' while unset, when controlled; pair it with `onValueChange`. */
+    value?: DateRange;
+    /** The initially chosen range when uncontrolled. */
+    defaultValue?: DateRange;
+    /** Called with the new range after each click; `end` is '' until the second date is chosen. */
+    onValueChange?: (value: DateRange) => void;
+};
+/** One ISO date ('' for none) by default; `range` takes and returns a DateRange. Other attributes and the ref go on the outer element. */
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/** A labeled month calendar that stays on the page; picks one ISO date, or a start and end date with `range`. */
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/calendar/Calendar.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useRef, useState } from 'react';
+import { useDiyaLocale, useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { calendarMessages } from './messages.js';
+import { iso, monthOf, useClientLayoutEffect, useMonthGrid, useToday } from './month.js';
+const toMonth = (date) => iso(date).slice(0, 7);
+const fromMonth = (text) => text && /^\d{4}-(0[1-9]|1[0-2])$/.test(text) ? new Date(Number(text.slice(0, 4)), Number(text.slice(5)) - 1, 1) : undefined;
+/** A labeled month calendar that stays on the page; picks one ISO date, or a start and end date with `range`. */
+export const Calendar = forwardRef(function Calendar(props, ref) {
+    const { label, hideLabel = false, size = 'medium', min, max, isDateUnavailable, disabled = false, month: monthProp, onMonthChange, className, range: _range, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, ...rest } = props;
+    const t = useDiyaMessages('calendar', calendarMessages);
+    const locale = useDiyaLocale();
+    const id = useId();
+    const range = props.range === true;
+    const controlled = props.value !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => props.range ? props.defaultValue ?? { start: '', end: '' } : { start: props.defaultValue ?? '', end: '' });
+    // Internally a value is always a range; a single date is { start: date, end: '' }.
+    const value = !controlled ? uncontrolled : props.range ? props.value ?? { start: '', end: '' } : { start: props.value ?? '', end: '' };
+    // A start without an end means the next day chosen ends the range.
+    const choosingEnd = range && !!value.start && !value.end;
+    // With no date to show, the server and the first browser render both open on the UTC month, so
+    // they agree whatever the reader's time zone; the reader's own month follows once the page is live.
+    const today = useToday();
+    const [ownMonth, setOwnMonth] = useState(() => value.start ? monthOf(value.start, min, max) : null);
+    const shownKey = fromMonth(monthProp) ? monthProp : toMonth(ownMonth ?? monthOf(today || new Date().toISOString().slice(0, 10), min, max));
+    const month = useMemo(() => fromMonth(shownKey), [shownKey]);
+    function changeMonth(next) {
+        if (monthProp === undefined)
+            setOwnMonth(next);
+        onMonthChange?.(toMonth(next));
+    }
+    // A new value in another month (a "Next day" button, say) turns the page to it.
+    const lastStart = useRef(value.start);
+    useClientLayoutEffect(() => {
+        if (value.start === lastStart.current)
+            return;
+        lastStart.current = value.start;
+        if (!value.start)
+            return;
+        const target = monthOf(value.start, min, max);
+        if (toMonth(target) !== shownKey)
+            changeMonth(target);
+    }, [value.start]);
+    function choose(day) {
+        if (disabled || monthGrid.isBlocked(day))
+            return;
+        const next = !range ? { start: day, end: '' }
+            : !choosingEnd ? { start: day, end: '' }
+                : { start: day < value.start ? day : value.start, end: day < value.start ? value.start : day };
+        if (!controlled)
+            setUncontrolled(next);
+        if (props.range)
+            props.onValueChange?.(next);
+        else
+            props.onValueChange?.(next.start);
+    }
+    const monthGrid = useMonthGrid({ locale, month, onMonthChange: changeMonth, value, range, choosingEnd, min, max, isDateUnavailable, disabled, active: true, strings: t, onChoose: choose });
+    return _jsxs("div", { ...rest, ref: ref, role: "group", "aria-labelledby": `${id}-label`, "aria-disabled": disabled || undefined, className: cx('diya-inline-calendar', className), "data-size": size, "data-disabled": disabled || undefined, children: [_jsx("span", { id: `${id}-label`, className: hideLabel ? 'diya-sr-only' : 'diya-calendar-label', children: label }), monthGrid.render()] });
+});

package/dist/calendar/messages.d.ts

@@ -0,0 +1,8 @@
+/** calendar: English defaults, overridable through DiyaProvider `messages`. */
+export declare const calendarMessages: {
+    previousMonth: string;
+    nextMonth: string;
+    chooseStart: string;
+    chooseEnd: string;
+    unavailableDay: (date: string) => string;
+};

package/dist/calendar/messages.js

@@ -0,0 +1,2 @@
+/** calendar: English defaults, overridable through DiyaProvider `messages`. */
+export const calendarMessages = { previousMonth: 'Previous month', nextMonth: 'Next month', chooseStart: 'Choose start date', chooseEnd: 'Choose end date', unavailableDay: (date) => `${date}, unavailable` };

package/dist/calendar/month.d.ts

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+/** A date range as ISO dates (YYYY-MM-DD); '' while a bound is unset. */
+export type DateRange = {
+    start: string;
+    end: string;
+};
+export declare const iso: (date: Date) => string;
+export declare const parse: (value: string) => Date;
+export declare const display: (value: string, locale: string) => string;
+export declare const useClientLayoutEffect: typeof useEffect;
+/** Whether `day` falls before `min` or after `max`. */
+export declare const outsideLimits: (day: string, min?: string, max?: string) => boolean;
+/** `day` moved inside `min` and `max`. */
+export declare const clampToLimits: (day: string, min?: string, max?: string) => string;
+/** The first of the month that shows `day` (today when it is '' or invalid), kept inside `min` and `max`. */
+export declare function monthOf(day: string, min?: string, max?: string): Date;
+/** Today as an ISO date; '' while hydrating server HTML, so a server in another time zone never marks the wrong day. */
+export declare const useToday: () => string;
+export type MonthGridStrings = {
+    previousMonth: string;
+    nextMonth: string;
+    chooseStart: string;
+    chooseEnd: string;
+    unavailableDay: (date: string) => string;
+};
+type MonthGridOptions = {
+    locale: string;
+    /** The first of the month on show. */
+    month: Date;
+    /** Asks to show another month: the month buttons, or the keyboard crossing into it. */
+    onMonthChange: (month: Date) => void;
+    value: DateRange;
+    range: boolean;
+    /** In range mode, whether the next choice sets the end. */
+    choosingEnd: boolean;
+    min?: string;
+    max?: string;
+    isDateUnavailable?: (date: string) => boolean;
+    /** Disables every button in the grid (Calendar's `disabled`). */
+    disabled?: boolean;
+    /** Whether the grid is on screen; focus follows the keyboard into a new month only then. */
+    active: boolean;
+    strings: MonthGridStrings;
+    onChoose: (day: string) => void;
+};
+/**
+ * The month grid DatePicker shows in its popup and Calendar shows on the page: the
+ * month heading with its buttons, the range hint, then the ARIA date grid of the APG
+ * date picker example. The grid is named by the month; a header row of weekday column
+ * headers, then a row per week of gridcells. Each day is a native button with the
+ * gridcell role, named with its weekday ("Thursday, November 12, 2026"): chosen days
+ * carry aria-selected, today aria-current="date". One day is a Tab stop; arrows,
+ * Home/End and PageUp/PageDown move it, kept inside min and max. Days outside them,
+ * or unavailable, say so in their name and aria-disabled, and can't be chosen.
+ */
+export declare function useMonthGrid(options: MonthGridOptions): {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    resetCursor: () => void;
+    isBlocked: (day: string) => boolean;
+};
+export {};