@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/data-list/DataList.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Labels and their values, as a description list (<dl>), e.g. a student's details.
+ *
+ *   <DataList items={[
+ *     { label: 'Email', value: 'ada@example.com' },
+ *     { label: 'Year', value: 11, info: 'School year in September' },
+ *   ]} />
+ *
+ * Or as markup, when values need more than text:
+ *
+ *   <DataList>
+ *     <DataList.Item label="Status"><Badge variant="success">Active</Badge></DataList.Item>
+ *   </DataList>
+ *
+ * - `items`: `{ label, value, info }`
+ * - `orientation`: 'horizontal' (default; labels beside values) or 'vertical' (labels above)
+ * - `variant`: 'plain' (default), 'divided' (lines between items) or 'card'
+ *   (a bordered box with lines between)
+ * - `columns`: lays items out in a grid of this many columns (stacking on
+ *   narrow screens); best with vertical items
+ * - `labelWidth`: the label column's width when horizontal ('10rem')
+ * - DataList.Item (also DataItem): `label`; `info` adds an icon with this
+ *   text in a tooltip; its content is the value
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './data-list.css';
+type ItemClasses = Classes<'item' | 'label' | 'info' | 'value'>;
+export type DataEntry = {
+    label: ReactNode;
+    value?: ReactNode;
+    info?: ReactNode;
+};
+export type DataListProps = HTMLAttributes<HTMLDivElement> & {
+    items?: DataEntry[] | null;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'plain' | 'divided' | 'card';
+    columns?: number | null;
+    labelWidth?: string | null;
+    classes?: Classes<'root' | 'list'> & ItemClasses;
+};
+declare function DataListShortcut({ items, orientation, variant, columns, labelWidth, className, classes, style, children, ...rest }: DataListProps): import("react").JSX.Element;
+export type DataItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    label?: ReactNode;
+    info?: ReactNode;
+    classes?: ItemClasses;
+};
+/** One label and its value (the content), in a DataList. */
+export declare function DataItem({ label, info, className, classes, children, ...rest }: DataItemProps): import("react").JSX.Element;
+export declare const DataList: typeof DataListShortcut & {
+    Item: typeof DataItem;
+};
+export {};

package/dist/data-list/DataList.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Labels and their values, as a description list (<dl>), e.g. a student's details.
+ *
+ *   <DataList items={[
+ *     { label: 'Email', value: 'ada@example.com' },
+ *     { label: 'Year', value: 11, info: 'School year in September' },
+ *   ]} />
+ *
+ * Or as markup, when values need more than text:
+ *
+ *   <DataList>
+ *     <DataList.Item label="Status"><Badge variant="success">Active</Badge></DataList.Item>
+ *   </DataList>
+ *
+ * - `items`: `{ label, value, info }`
+ * - `orientation`: 'horizontal' (default; labels beside values) or 'vertical' (labels above)
+ * - `variant`: 'plain' (default), 'divided' (lines between items) or 'card'
+ *   (a bordered box with lines between)
+ * - `columns`: lays items out in a grid of this many columns (stacking on
+ *   narrow screens); best with vertical items
+ * - `labelWidth`: the label column's width when horizontal ('10rem')
+ * - DataList.Item (also DataItem): `label`; `info` adds an icon with this
+ *   text in a tooltip; its content is the value
+ */
+import { createContext, useContext } from 'react';
+import 'iconify-icon';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { cx, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './data-list.css';
+const PartContext = createContext(null);
+function DataListShortcut({ items = null, orientation = 'horizontal', variant = 'plain', columns = null, labelWidth = null, className, classes, style, children, ...rest }) {
+    const part = partsOf('data-list', classes);
+    return (_jsx(PartContext, { value: part, children: _jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-orientation": orientation, "data-variant": variant, "data-grid": columns ? '' : undefined, style: { ...style, ...(columns && { '--columns': columns }), ...(labelWidth && { '--label-width': labelWidth }) }, children: _jsxs("dl", { ...part('list'), children: [(items ?? []).map((item, i) => _jsx(DataItem, { label: item.label, info: item.info, children: item.value ?? '' }, i)), children] }) }) }));
+}
+/** One label and its value (the content), in a DataList. */
+export function DataItem({ label = null, info = null, className, classes, children, ...rest }) {
+    const inherited = useContext(PartContext);
+    const part = classes || !inherited ? partsOf('data-list', classes) : inherited;
+    return (_jsxs("div", { ...rest, ...part('item'), className: cx(className, part('item').className), children: [_jsxs("dt", { ...part('label'), children: [_jsx("span", { children: label }), info && (_jsx(Tooltip, { content: info, children: _jsx("span", { ...part('info'), tabIndex: 0, "aria-label": typeof info === 'string' ? info : undefined, children: _jsx("iconify-icon", { icon: "lucide:info" }) }) }))] }), _jsx("dd", { ...part('value'), children: children })] }));
+}
+export const DataList = withParts(DataListShortcut, { Item: DataItem });

package/dist/data-list/data-list.css

@@ -0,0 +1,19 @@
+@layer ui {
+  [data-scope=data-list][data-part=root] { display: block; width: 100%; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; }
+  /* Each item's bottom line overlaps the next (and the last is clipped), so lines only sit between items. */
+  [data-scope=data-list][data-part=list] { display: grid; margin: 0; padding: 0; overflow: hidden;
+    [data-variant=card] > & { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px);
+      box-shadow: var(--ui-card-shadow); padding: 0 1rem; }
+    [data-grid] > & { column-gap: 1.5rem; }
+    @media (min-width: 640px) { [data-grid] > & { grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr)); } } }
+  [data-scope=data-list][data-part=item] {
+    [data-orientation=horizontal] > [data-part=list] > & { display: grid; grid-template-columns: var(--label-width, 10rem) minmax(0, 1fr); gap: 1rem; padding: 0.5rem 0; align-items: baseline; }
+    [data-orientation=vertical] > [data-part=list] > & { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0; }
+    :is([data-variant=divided], [data-variant=card]) > [data-part=list] > & { padding: 0.75rem 0; border-bottom: 1px solid var(--ui-border); margin-bottom: -1px; }
+  }
+  [data-scope=data-list][data-part=label] { display: flex; align-items: center; gap: 0.25rem; margin: 0; color: var(--ui-muted); }
+  [data-scope=data-list][data-part=value] { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+  [data-scope=data-list][data-part=info] { display: inline-flex; color: var(--ui-muted); cursor: help; border-radius: 9999px; font-size: 13px;
+    &:hover { color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+}

package/dist/date-picker/DatePicker.d.ts

@@ -0,0 +1,95 @@
+/**
+ * A date picker: type a date, or pick it from a calendar.
+ *
+ *   <DatePicker label="Lesson date" value={date} onValueChange={setDate} min="2026-01-01" />
+ *
+ * - `value`, `defaultValue`: an ISO date ('YYYY-MM-DD'), or an array of two with `range`
+ * - `onValueChange`: called with the new value (the same shape)
+ * - `range`: pick a start and an end
+ * - `min`, `max`: ISO dates
+ * - `unavailable`: function(CalendarDate) returning true for dates that can't
+ *   be picked (weekends, holidays); they show struck through
+ * - `locale`: for formatting and the first day of the week (the
+ *   LocaleProvider's, or 'en-GB')
+ * - `placement`: where the calendar opens ('bottom-start')
+ * - `inline`: just the calendar, always showing (no input or popup), e.g. a
+ *   month beside a schedule
+ * - `prev`, `next`: elements to use as those buttons; they get the trigger's
+ *   props, so a component must pass them on (as Button does)
+ *
+ * Up and Down in the input step its date by a day (Shift: a week), skipping
+ * unavailable ones; on an empty input the first press picks today. Typing
+ * puts in the locale's separators (11102026 → 11/10/2026; 11.10.2026 in
+ * German); a separator typed by hand, or a pasted date, works too.
+ *
+ * A typed date is taken on Enter or when the input loses focus. One it can't
+ * take (past `min` or `max`, `unavailable`, or not a whole date) stays in the
+ * input, marked invalid with the reason under it, and the value doesn't
+ * change; the input's validity is set too, so a form won't submit with it.
+ * - `onInvalidChange`: called with the reason when that happens, and null
+ *   once the input holds a date it takes (or is cleared)
+ *
+ * By hand, with Ark's parts: DatePicker.Root, Control, Input, Trigger,
+ * Positioner, Content, View (one per view), ViewControl, PrevTrigger,
+ * ViewTrigger, NextTrigger, Table, TableHead, TableHeader, TableBody,
+ * TableRow, TableCell, TableCellTrigger, with DatePicker.Context for the
+ * weeks, months and years to lay out.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { DatePicker as Ark, parseDate, type DatePickerValueChangeDetails, type DateValue } from '@ark-ui/react/date-picker';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './date-picker.css';
+type One = {
+    range?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null, details: DatePickerValueChangeDetails) => void;
+};
+type Range = {
+    range: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[], details: DatePickerValueChangeDetails) => void;
+};
+export type DatePickerProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'min' | 'max' | 'label' | 'selectionMode'> & {
+    label?: ReactNode;
+    min?: string | null;
+    max?: string | null;
+    unavailable?: ((date: DateValue) => boolean) | null;
+    placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
+    prev?: ReactElement | null;
+    next?: ReactElement | null;
+    inline?: boolean;
+    onInvalidChange?: ((reason: string | null) => void) | null;
+    classes?: Classes<'root' | 'label' | 'control' | 'input' | 'separator' | 'clearTrigger' | 'trigger' | 'positioner' | 'content' | 'view' | 'viewControl' | 'prevTrigger' | 'viewTrigger' | 'nextTrigger' | 'table' | 'tableHeader' | 'tableCell' | 'tableCellTrigger' | 'error'>;
+} & (One | Range);
+declare function DatePickerShortcut(props: DatePickerProps): import("react").JSX.Element;
+export declare const DatePicker: typeof DatePickerShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Ark.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Ark.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    View: import("react").ForwardRefExoticComponent<Ark.ViewProps & import("react").RefAttributes<HTMLDivElement>>;
+    ViewControl: import("react").ForwardRefExoticComponent<Ark.ViewControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    PrevTrigger: import("react").ForwardRefExoticComponent<Ark.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ViewTrigger: import("react").ForwardRefExoticComponent<Ark.ViewTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    NextTrigger: import("react").ForwardRefExoticComponent<Ark.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    RangeText: import("react").ForwardRefExoticComponent<Ark.RangeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    Table: import("react").ForwardRefExoticComponent<Ark.TableProps & import("react").RefAttributes<HTMLTableElement>>;
+    TableHead: import("react").ForwardRefExoticComponent<Ark.TableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    TableHeader: import("react").ForwardRefExoticComponent<Ark.TableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    TableBody: import("react").ForwardRefExoticComponent<Ark.TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    TableRow: import("react").ForwardRefExoticComponent<Ark.TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    TableCell: import("react").ForwardRefExoticComponent<Ark.TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    TableCellTrigger: import("react").ForwardRefExoticComponent<Ark.TableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    PresetTrigger: import("react").ForwardRefExoticComponent<Ark.PresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export { parseDate };

package/dist/date-picker/DatePicker.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A date picker: type a date, or pick it from a calendar.
+ *
+ *   <DatePicker label="Lesson date" value={date} onValueChange={setDate} min="2026-01-01" />
+ *
+ * - `value`, `defaultValue`: an ISO date ('YYYY-MM-DD'), or an array of two with `range`
+ * - `onValueChange`: called with the new value (the same shape)
+ * - `range`: pick a start and an end
+ * - `min`, `max`: ISO dates
+ * - `unavailable`: function(CalendarDate) returning true for dates that can't
+ *   be picked (weekends, holidays); they show struck through
+ * - `locale`: for formatting and the first day of the week (the
+ *   LocaleProvider's, or 'en-GB')
+ * - `placement`: where the calendar opens ('bottom-start')
+ * - `inline`: just the calendar, always showing (no input or popup), e.g. a
+ *   month beside a schedule
+ * - `prev`, `next`: elements to use as those buttons; they get the trigger's
+ *   props, so a component must pass them on (as Button does)
+ *
+ * Up and Down in the input step its date by a day (Shift: a week), skipping
+ * unavailable ones; on an empty input the first press picks today. Typing
+ * puts in the locale's separators (11102026 → 11/10/2026; 11.10.2026 in
+ * German); a separator typed by hand, or a pasted date, works too.
+ *
+ * A typed date is taken on Enter or when the input loses focus. One it can't
+ * take (past `min` or `max`, `unavailable`, or not a whole date) stays in the
+ * input, marked invalid with the reason under it, and the value doesn't
+ * change; the input's validity is set too, so a form won't submit with it.
+ * - `onInvalidChange`: called with the reason when that happens, and null
+ *   once the input holds a date it takes (or is cleared)
+ *
+ * By hand, with Ark's parts: DatePicker.Root, Control, Input, Trigger,
+ * Positioner, Content, View (one per view), ViewControl, PrevTrigger,
+ * ViewTrigger, NextTrigger, Table, TableHead, TableHeader, TableBody,
+ * TableRow, TableCell, TableCellTrigger, with DatePicker.Context for the
+ * weeks, months and years to lay out.
+ */
+import { Fragment, useId, useMemo, useState } from 'react';
+import { DatePicker as Ark, parseDate, useDatePicker } from '@ark-ui/react/date-picker';
+import { useFieldContext } from '@ark-ui/react/field';
+import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date';
+import { parseDateString } from '@zag-js/date-utils';
+import 'iconify-icon';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { cx, partsOf, useControllable, withParts } from '../utils.js';
+import '../theme.css';
+import './date-picker.css';
+// Zag formats the input when the picker starts: a new locale (say, from the
+// LocaleProvider) starts it afresh, so the dates show in the new format.
+// The input's date pattern for a locale: its fields in order (with how many
+// digits each takes) and the separator between them ('/', '.', '-').
+function patternOf(locale) {
+    const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2000, 0, 1));
+    const fields = parts.filter((p) => p.type === 'day' || p.type === 'month' || p.type === 'year').map((p) => (p.type === 'year' ? 4 : 2));
+    const separator = parts.find((p) => p.type === 'literal')?.value.trim() || '/';
+    return { fields, separator };
+}
+// Typing at the end: once a field has its digits, add the separator after it;
+// more digits than it takes (inserted in one go) carry on into the next field;
+// a separator typed straight after one we added is dropped (no "11//").
+// Runs before Zag's own handler, which then reads the new value.
+function separate(e, { fields, separator }) {
+    const input = e.currentTarget;
+    const native = e.nativeEvent;
+    if (native.inputType !== 'insertText' || input.selectionStart !== input.value.length)
+        return;
+    if (native.data === separator && input.value.endsWith(separator + separator)) {
+        input.value = input.value.slice(0, -1);
+        return;
+    }
+    const pieces = input.value.split(separator);
+    if (!pieces.every((piece) => /^\d*$/.test(piece)))
+        return;
+    while (pieces.length < fields.length && pieces[pieces.length - 1].length > fields[pieces.length - 1]) {
+        const last = pieces.pop();
+        pieces.push(last.slice(0, fields[pieces.length]), last.slice(fields[pieces.length]));
+    }
+    const index = pieces.length - 1;
+    if (index < fields.length - 1 && pieces[index].length === fields[index])
+        pieces.push('');
+    const next = pieces.join(separator);
+    if (next !== input.value)
+        input.value = next;
+}
+function DatePickerShortcut(props) {
+    const app = useLocale();
+    const locale = props.locale ?? app ?? 'en-GB';
+    return _jsx(DatePickerInner, { ...props, locale: locale }, locale);
+}
+function DatePickerInner(props) {
+    const { label = null, value, defaultValue, onValueChange, range = false, min = null, max = null, unavailable = null, locale: localeProp, placement = 'bottom-start', prev = null, next = null, inline = false, onInvalidChange = null, className, classes, ...rest } = props;
+    const field = useFieldContext();
+    const t = useMessages();
+    // Its own, the LocaleProvider's, or British (for day-month order and a Monday start).
+    const locale = localeProp ?? 'en-GB';
+    const pattern = useMemo(() => patternOf(locale), [locale]);
+    const part = partsOf('date-picker', classes);
+    const [current, setCurrent] = useControllable(value, defaultValue ?? (range ? [] : null), undefined);
+    // CalendarDate#toString is ISO.
+    function change(details) {
+        report(null);
+        const iso = details.value.map(String);
+        const next = range ? iso : iso[0] ?? null;
+        setCurrent(next);
+        onValueChange?.(next, details);
+    }
+    const picker = useDatePicker({
+        locale, selectionMode: range ? 'range' : 'single',
+        value: [].concat(current ?? []).filter((iso) => !!iso).map((iso) => parseDate(iso)),
+        onValueChange: change,
+        ...(min && { min: parseDate(min) }), ...(max && { max: parseDate(max) }),
+        ...(unavailable && { isDateUnavailable: unavailable }),
+        positioning: { placement },
+        ...(t.zag.datePicker && { translations: t.zag.datePicker }),
+        ...(inline && { inline: true }),
+        // Inside a Field, its label points at the first input.
+        ...(field && { ids: { label: () => field.ids.label, input: (index) => (index === 0 ? field.ids.control : `${field.ids.control}-${index}`) }, invalid: field.invalid }),
+    });
+    // A typed date it can't take: the reason, shown under the input and set as
+    // its validity (so a form won't submit), until a date it takes is chosen.
+    const [problem, setProblem] = useState(null);
+    const errorId = useId();
+    function report(next, input) {
+        if (next)
+            input?.setCustomValidity(next.reason);
+        else
+            document.querySelectorAll(`[data-error-for="${errorId}"]`).forEach((el) => el.setCustomValidity(''));
+        if (next?.reason === problem?.reason && next?.index === problem?.index)
+            return;
+        setProblem(next);
+        onInvalidChange?.(next?.reason ?? null);
+    }
+    // Why a typed date can't be taken, or the date itself.
+    const dateText = (date) => new DateFormatter(locale).format(date.toDate(getLocalTimeZone()));
+    function check(input) {
+        const text = input.value.trim();
+        if (!text)
+            return null;
+        const pieces = text.split(pattern.separator);
+        const date = pieces.length === pattern.fields.length && pieces.every((piece) => /^\d+$/.test(piece))
+            ? parseDateString(text, locale, getLocalTimeZone()) : undefined;
+        if (!date)
+            return { reason: t.datePicker.format(input.placeholder) };
+        if (min && date.compare(parseDate(min)) < 0)
+            return { reason: t.datePicker.min(dateText(parseDate(min))) };
+        if (max && date.compare(parseDate(max)) > 0)
+            return { reason: t.datePicker.max(dateText(parseDate(max))) };
+        if (picker.isUnavailable(date))
+            return { reason: t.datePicker.unavailable };
+        return { date };
+    }
+    // Takes the typed date, or reports why not (Zag would clamp or revert it).
+    function commit(input, index) {
+        const result = check(input);
+        if (!result) {
+            report(null, input);
+            return true;
+        }
+        if ('reason' in result) {
+            report({ index, ...result }, input);
+            return false;
+        }
+        report(null, input);
+        const values = picker.value.slice();
+        values[index] = result.date;
+        if (range && !values[1 - index])
+            values[1 - index] = result.date;
+        if (range && values[0] && values[1] && values[0].compare(values[1]) > 0)
+            values.reverse();
+        picker.setValue(values);
+        return true;
+    }
+    // Up/Down step an input's date by a day (Shift: a week), skipping unavailable
+    // ones; in range mode the other end moves along so start never passes end.
+    // Captured, so Zag's own key handling (which skips handled keys) stands aside.
+    function step(e, index) {
+        // Enter takes the typed date only if it can (Zag shows "undefined" for a
+        // part-typed one, 11/1); otherwise it reports why.
+        if (e.key === 'Enter') {
+            if (!commit(e.currentTarget, index))
+                e.preventDefault();
+            return;
+        }
+        const dir = { ArrowUp: 1, ArrowDown: -1 }[e.key];
+        if (!dir || e.altKey || e.metaKey || e.ctrlKey)
+            return;
+        e.preventDefault();
+        const values = picker.value.slice();
+        let date = values[index] ? values[index].add({ days: dir * (e.shiftKey ? 7 : 1) }) : today(getLocalTimeZone());
+        for (let tries = 0; picker.isUnavailable(date); date = date.add({ days: dir }))
+            if (++tries > 366)
+                return;
+        values[index] = date;
+        if (range) {
+            const other = 1 - index;
+            const crossed = values[other] && (index === 0 ? date.compare(values[1]) > 0 : date.compare(values[0]) < 0);
+            if (!values[other] || crossed)
+                values[other] = date;
+        }
+        picker.setValue(values);
+    }
+    const view = picker.view;
+    const content = (_jsx(Ark.Content, { ...part('content'), children: _jsxs(Ark.View, { view: view, ...part('view'), children: [_jsxs(Ark.ViewControl, { ...part('view-control'), children: [prev ? _jsx(Ark.PrevTrigger, { asChild: true, children: prev })
+                            : _jsx(Ark.PrevTrigger, { ...part('prev-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevron-left" }) }), _jsx(Ark.ViewTrigger, { ...part('view-trigger'), children: view === 'day' ? picker.visibleRangeText.start
+                                : view === 'month' ? picker.visibleRange.start.year
+                                    : `${picker.getDecade().start} – ${picker.getDecade().end}` }), next ? _jsx(Ark.NextTrigger, { asChild: true, children: next })
+                            : _jsx(Ark.NextTrigger, { ...part('next-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevron-right" }) })] }), view === 'day' && (_jsxs(Ark.Table, { ...part('table'), children: [_jsx(Ark.TableHead, { children: _jsx(Ark.TableRow, { children: picker.weekDays.map((day, i) => _jsx(Ark.TableHeader, { ...part('table-header'), "aria-label": day.long, children: day.narrow }, i)) }) }), _jsx(Ark.TableBody, { children: picker.weeks.map((week, i) => (_jsx(Ark.TableRow, { children: week.map((date) => (_jsx(Ark.TableCell, { value: date, ...part('table-cell'), children: _jsx(Ark.TableCellTrigger, { ...part('table-cell-trigger'), children: date.day }) }, date.toString()))) }, i))) })] })), view === 'month' && (_jsx(Ark.Table, { columns: 4, ...part('table'), children: _jsx(Ark.TableBody, { children: picker.getMonthsGrid({ columns: 4, format: 'short' }).map((row, i) => (_jsx(Ark.TableRow, { children: row.map((month) => (_jsx(Ark.TableCell, { value: month.value, columns: 4, ...part('table-cell'), children: _jsx(Ark.TableCellTrigger, { ...part('table-cell-trigger'), "data-wide": "", children: month.label }) }, month.value))) }, i))) }) })), view === 'year' && (_jsx(Ark.Table, { columns: 4, ...part('table'), children: _jsx(Ark.TableBody, { children: picker.getYearsGrid({ columns: 4 }).map((row, i) => (_jsx(Ark.TableRow, { children: row.map((year) => (_jsx(Ark.TableCell, { value: year.value, columns: 4, ...part('table-cell'), children: _jsx(Ark.TableCellTrigger, { ...part('table-cell-trigger'), "data-wide": "", children: year.label }) }, year.value))) }, i))) }) }))] }) }));
+    return (_jsxs(Ark.RootProvider, { value: picker, ...rest, ...part('root'), className: cx(className, classes?.root), "data-inline": inline || undefined, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), !inline && _jsxs(Ark.Control, { ...part('control'), children: [(range ? [0, 1] : [0]).map((index) => _jsxs(Fragment, { children: [index === 1 && _jsx("span", { ...part('separator'), children: "\u2013" }), _jsx(Ark.Input, { index: index, ...part('input'), size: 10, fixOnBlur: false, "data-error-for": errorId, onKeyDownCapture: (e) => step(e, index), onInputCapture: (e) => separate(e, pattern), onBlur: (e) => commit(e.currentTarget, index), "aria-invalid": problem?.index === index || undefined, "aria-describedby": [field?.ariaDescribedby, problem?.index === index && errorId].filter(Boolean).join(' ') || undefined })] }, index)), _jsx(Ark.ClearTrigger, { ...part('clear-trigger'), onClick: () => report(null), children: _jsx("iconify-icon", { icon: "lucide:x" }) }), _jsx(Ark.Trigger, { ...part('trigger'), children: _jsx("iconify-icon", { icon: "lucide:calendar" }) })] }), problem && !inline && _jsx("div", { ...part('error'), id: errorId, role: "alert", children: problem.reason }), inline ? content : _jsx(Ark.Positioner, { ...part('positioner'), children: content })] }));
+}
+export const DatePicker = withParts(DatePickerShortcut, {
+    Root: Ark.Root,
+    RootProvider: Ark.RootProvider,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    ClearTrigger: Ark.ClearTrigger,
+    Trigger: Ark.Trigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    View: Ark.View,
+    ViewControl: Ark.ViewControl,
+    PrevTrigger: Ark.PrevTrigger,
+    ViewTrigger: Ark.ViewTrigger,
+    NextTrigger: Ark.NextTrigger,
+    RangeText: Ark.RangeText,
+    Table: Ark.Table,
+    TableHead: Ark.TableHead,
+    TableHeader: Ark.TableHeader,
+    TableBody: Ark.TableBody,
+    TableRow: Ark.TableRow,
+    TableCell: Ark.TableCell,
+    TableCellTrigger: Ark.TableCellTrigger,
+    PresetTrigger: Ark.PresetTrigger,
+    Context: Ark.Context,
+});
+export { parseDate };

package/dist/date-picker/date-picker.css

@@ -0,0 +1,53 @@
+/* Parts are matched by Zag's own data-part names (prev-trigger,
+   table-cell-trigger…); the `classes` prop uses the short ones (prev, cell). */
+@layer ui {
+  [data-scope=date-picker][data-part=root] { display: inline-block; position: relative;
+    color: var(--ui-text); font-family: var(--ui-font);
+    /* The calendar's own width, even where a grid or flex column would stretch it. */
+    &[data-inline] { width: fit-content; } }
+  [data-scope=date-picker][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=date-picker][data-part=control] { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem;
+    height: var(--ui-control-height); box-sizing: border-box; background: var(--ui-surface);
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
+    &[data-disabled] { opacity: 0.5; } }
+  [data-scope=date-picker][data-part=input] { min-width: 0; padding: 0; border: none; background: transparent;
+    outline: none; font-size: 14px; color: inherit; field-sizing: content;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=date-picker][data-part=input]:last-of-type { flex-grow: 1; }
+  [data-scope=date-picker][data-part=error] { margin-top: 0.375rem; font-size: 12px; color: var(--ui-danger); }
+  [data-scope=date-picker][data-part=separator] { color: var(--ui-muted); font-size: 14px; padding: 0 0.25rem; }
+  [data-scope=date-picker]:is([data-part=clear-trigger], [data-part=trigger], [data-part=prev-trigger], [data-part=next-trigger]) {
+    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: none; background: transparent;
+    border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=date-picker][data-part=content] { z-index: 50; padding: 0.75rem; background: var(--ui-surface); outline: none;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow);
+    /* An inline calendar in a popover (EventCalendar's date jump): the popover is the card. */
+    [data-scope=popover] & { padding: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; } }
+  [data-scope=date-picker][data-part=view-control] { display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 0.5rem; }
+  [data-scope=date-picker][data-part=view-trigger] { font-weight: 600; font-size: 14px; border: none; background: transparent;
+    color: inherit; border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer;
+    &:hover { background: var(--ui-hover); } }
+  [data-scope=date-picker][data-part=table] { border-collapse: collapse; }
+  [data-scope=date-picker][data-part=table-header] { font-size: 12px; font-weight: 500; color: var(--ui-muted);
+    width: 2.25rem; height: 2rem; }
+  [data-scope=date-picker][data-part=table-cell] { padding: 0; }
+  [data-scope=date-picker][data-part=table-cell-trigger] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
+    border-radius: var(--ui-radius); font-size: 14px; cursor: pointer; user-select: none;
+    &:hover { background: var(--ui-hover); }
+    &[data-wide] { width: 4rem; height: 2.5rem; }
+    &[data-outside-range] { color: var(--ui-muted); opacity: 0.5; }
+    &[data-today] { font-weight: 700; color: var(--ui-accent); }
+    &[data-in-range] { background: var(--ui-accent-soft); border-radius: 0; }
+    &[data-range-start] { border-start-start-radius: var(--ui-radius); border-end-start-radius: var(--ui-radius); }
+    &[data-range-end] { border-start-end-radius: var(--ui-radius); border-end-end-radius: var(--ui-radius); }
+    &[data-selected] { background: var(--ui-accent); color: var(--ui-accent-text); }
+    &[data-focus] { outline: 2px solid var(--ui-ring); outline-offset: -2px; }
+    &:is([data-disabled], [data-unavailable]) { opacity: 0.3; cursor: not-allowed; }
+    &[data-unavailable] { text-decoration: line-through; } }
+}

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,98 @@
+/**
+ * A modal dialog, rendered at the end of <body> so no ancestor's stacking or
+ * overflow can trap it.
+ *
+ *   <Dialog heading="Delete lesson?" description="This cannot be undone."
+ *     trigger={<Button>Delete</Button>}
+ *     footer={<Button onClick={…}>Cancel</Button>}>
+ *     …body…
+ *   </Dialog>
+ *
+ * Focus moves in and is trapped while it is open, the page behind doesn't
+ * scroll, Escape or a click on the backdrop closes it, and focus returns to
+ * the trigger.
+ *
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state;
+ *   `onExitComplete`: called once it has animated out
+ * - `trigger`: the element that opens it (optional; it gets the trigger's props,
+ *   so a component must pass them and its ref on, as Button does)
+ * - `heading`, `description`: label and describe it for assistive tech
+ * - `footer`: buttons along the bottom
+ * - `alert`: an alertdialog, for confirmations; the backdrop doesn't close it
+ * - `size`: 'sm', 'md' (default) or 'lg'
+ * - `closable`: false hides the close button
+ *
+ * Or composed, with the overlay still done for you (backdrop, positioning,
+ * close button), from Header, Body and Footer; a Dialog.Trigger child opens it:
+ *
+ *   <Dialog>
+ *     <Dialog.Trigger asChild><Button>Edit</Button></Dialog.Trigger>
+ *     <Dialog.Header heading="Edit student" description="Saved to their profile." />
+ *     <Dialog.Body>…</Dialog.Body>
+ *     <Dialog.Footer><Dialog.CloseTrigger asChild><Button>Cancel</Button></Dialog.CloseTrigger>…</Dialog.Footer>
+ *   </Dialog>
+ *
+ * Fully by hand, with Ark's parts (and Header, Body and Footer for the layout):
+ *
+ *   <Dialog.Root>
+ *     <Dialog.Trigger asChild><Button>Open</Button></Dialog.Trigger>
+ *     <Portal>
+ *       <Dialog.Backdrop />
+ *       <Dialog.Positioner>
+ *         <Dialog.Content>
+ *           <Dialog.Header><Dialog.Title>Title</Dialog.Title></Dialog.Header>
+ *           <Dialog.Body>…</Dialog.Body>
+ *           <Dialog.Footer><Dialog.CloseTrigger asChild><Button>Close</Button></Dialog.CloseTrigger></Dialog.Footer>
+ *         </Dialog.Content>
+ *       </Dialog.Positioner>
+ *     </Portal>
+ *   </Dialog.Root>
+ */
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Dialog as Ark, type DialogOpenChangeDetails } from '@ark-ui/react/dialog';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './dialog.css';
+export type DialogProps = Omit<Ark.ContentProps, 'children'> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: DialogOpenChangeDetails) => void;
+    onExitComplete?: () => void;
+    heading?: ReactNode;
+    description?: ReactNode;
+    alert?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    closable?: boolean;
+    trigger?: ReactElement | null;
+    footer?: ReactNode;
+    classes?: Classes<'backdrop' | 'positioner' | 'content' | 'closeTrigger' | 'header' | 'title' | 'description' | 'body' | 'footer'>;
+    children?: ReactNode;
+};
+type HeaderProps = ComponentProps<'div'> & {
+    heading?: ReactNode;
+    description?: ReactNode;
+};
+declare function Header({ heading, description, children, ...rest }: HeaderProps): import("react").JSX.Element;
+declare function DialogShortcut({ open, defaultOpen, onOpenChange, onExitComplete, heading, description, alert, size, closable, trigger, footer, className, classes, children, ...rest }: DialogProps): import("react").JSX.Element;
+export declare const Dialog: typeof DialogShortcut & {
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Ark.BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Ark.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<Ark.TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Ark.DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Header: typeof Header;
+    Body: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Footer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};