@hackcove/ui-react 0.0.0-stage → 0.8.1

package/dist/Cluster.d.ts

@@ -0,0 +1,51 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+import { type StackGap } from "./Stack.js";
+/** The first three steps of `Stack`'s scale: `xs` between items in a line, `sm` inside a group, `md` between blocks. */
+export type ClusterGap = Extract<StackGap, "xs" | "sm" | "md">;
+export type ClusterAlign = "center" | "baseline" | "start" | "end";
+export type ClusterJustify = "start" | "between" | "end";
+/**
+ * A horizontal row of items a fixed `gap` apart (`xs` by default): the row counterpart of `Stack`. `align` is the
+ * cross axis (`center` default, `baseline` for mixed text sizes, `start`, `end`) and `justify` the
+ * main one (`start` default, `between` to push the first and last items to the two ends, `end`).
+ * `wrap` lets the items flow onto further lines on a narrow viewport (off by default, so a row
+ * stays on one line).
+ *
+ * Put one `ClusterGrow` around the item that takes the room left over, an input beside its
+ * buttons, say. An empty `ClusterGrow` is a spacer that pushes what follows it to the end.
+ * `ButtonGroup` is the row for buttons; use `Cluster` for any other row. `as="span"` is for a row
+ * inside phrasing content, such as a `PageHeader` subtitle (a `<p>`): its items must be phrasing
+ * content too, so no `ClusterGrow`.
+ */
+export declare function Cluster({ as: Tag, gap, align, justify, wrap, children, ...rest }: {
+    /** The element. `span` for a row inside a `<p>` or other phrasing content; default `div`. */
+    as?: "div" | "span" | undefined;
+    /**
+     * The space between items. Defaults to `xs`, not `md`, one of the library's two exceptions to the
+     * `md` default: the items of a row sit closer than the blocks of a column.
+     * @default xs
+     */
+    gap?: ClusterGap | undefined;
+    /**
+     * The cross axis: `center`, `baseline` (for mixed text sizes), `start` or `end`.
+     * @default center
+     */
+    align?: ClusterAlign | undefined;
+    /**
+     * The main axis: `start`, `between` (the first and last items at the two ends) or `end`.
+     * @default start
+     */
+    justify?: ClusterJustify | undefined;
+    /** Let the items flow onto further lines on a narrow viewport. Off, the row stays on one line. */
+    wrap?: boolean | undefined;
+    children?: ReactNode;
+} & Passthrough): ReactElement;
+/**
+ * The one child of a `Cluster` that grows to the room left in the row. It can shrink to nothing
+ * (`min-w-0`), so the items beside it stay on the line and a long value truncates instead of
+ * pushing them out. Empty, it is a spacer.
+ */
+export declare function ClusterGrow({ children, ...rest }: {
+    children?: ReactNode;
+} & Passthrough): ReactElement;

package/dist/Cluster.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { STACK_GAP } from "./Stack.js";
+const ALIGN = {
+    center: "items-center",
+    baseline: "items-baseline",
+    start: "items-start",
+    end: "items-end",
+};
+const JUSTIFY = {
+    start: "justify-start",
+    between: "justify-between",
+    end: "justify-end",
+};
+/**
+ * A horizontal row of items a fixed `gap` apart (`xs` by default): the row counterpart of `Stack`. `align` is the
+ * cross axis (`center` default, `baseline` for mixed text sizes, `start`, `end`) and `justify` the
+ * main one (`start` default, `between` to push the first and last items to the two ends, `end`).
+ * `wrap` lets the items flow onto further lines on a narrow viewport (off by default, so a row
+ * stays on one line).
+ *
+ * Put one `ClusterGrow` around the item that takes the room left over, an input beside its
+ * buttons, say. An empty `ClusterGrow` is a spacer that pushes what follows it to the end.
+ * `ButtonGroup` is the row for buttons; use `Cluster` for any other row. `as="span"` is for a row
+ * inside phrasing content, such as a `PageHeader` subtitle (a `<p>`): its items must be phrasing
+ * content too, so no `ClusterGrow`.
+ */
+export function Cluster({ as: Tag = "div", gap = "xs", align = "center", justify = "start", wrap = false, children, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: cx("flex", STACK_GAP[gap], ALIGN[align], JUSTIFY[justify], wrap && "flex-wrap"), children: children }));
+}
+/**
+ * The one child of a `Cluster` that grows to the room left in the row. It can shrink to nothing
+ * (`min-w-0`), so the items beside it stay on the line and a long value truncates instead of
+ * pushing them out. Empty, it is a spacer.
+ */
+export function ClusterGrow({ children, ...rest }) {
+    return (_jsx("div", { ...rest, className: "min-w-0 flex-1", children: children }));
+}

package/dist/Code.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+/** Inline code: mono, on a subtle inset background. It takes the surrounding text colour and size (a touch smaller, for the mono face). */
+export declare function Code(props: Unstyled<HTMLAttributes<HTMLElement>>): ReactElement;

package/dist/Code.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Inline code: mono, on a subtle inset background. It takes the surrounding text colour and size (a touch smaller, for the mono face). */
+export function Code(props) {
+    return _jsx("code", { ...props, className: "rounded bg-slate-100 px-1 py-0.5 font-mono text-[0.9em]" });
+}

package/dist/CodeBlock.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import type { CodeLanguage } from "./highlight.js";
+import type { Unstyled } from "./props.js";
+/** Exactly one of `children` (a string, newlines kept) or `lines` (one array entry per line). */
+type CodeBlockSource = {
+    children: string;
+    /** The code as one array entry per line, in place of `children`. */
+    lines?: never;
+} | {
+    /** The code as one array entry per line, in place of `children`. */
+    lines: string[];
+    children?: never;
+};
+/**
+ * A static multi-line block of code: mono, in a bordered inset box, long lines wrap. No client JS;
+ * `language` colours it, and `label` names the language or file (`bash`, `css`) in a caption above
+ * the code. `text` (the default) leaves the code in one colour, for a block that is not a language.
+ * Give the text as `children` or as `lines`. Every other figure prop goes on the root `<figure>`.
+ * For one line a reader copies, use `CopyLine`.
+ */
+export declare function CodeBlock({ label, language, children, lines, ...rest }: {
+    /** A caption above the code naming its language or file (`bash`, `theme.css`). */
+    label?: string;
+    /** What the code is written in; `text` (the default) colours nothing. */
+    language?: CodeLanguage;
+} & CodeBlockSource & Unstyled<Omit<ComponentPropsWithoutRef<"figure">, "children">>): ReactElement;
+export {};

package/dist/CodeBlock.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeText } from "./CodeText.js";
+/**
+ * A static multi-line block of code: mono, in a bordered inset box, long lines wrap. No client JS;
+ * `language` colours it, and `label` names the language or file (`bash`, `css`) in a caption above
+ * the code. `text` (the default) leaves the code in one colour, for a block that is not a language.
+ * Give the text as `children` or as `lines`. Every other figure prop goes on the root `<figure>`.
+ * For one line a reader copies, use `CopyLine`.
+ */
+export function CodeBlock({ label, language = "text", children, lines, ...rest }) {
+    return (_jsxs("figure", { ...rest, className: "overflow-hidden rounded-lg border border-slate-200 bg-slate-50 font-mono text-[12.5px] text-slate-900", children: [label && (_jsx("figcaption", { className: "border-b border-slate-200 px-3 py-1.5 text-xs text-slate-500", children: label })), _jsx("pre", { className: "whitespace-pre-wrap break-words px-3 py-2.5", children: _jsx(CodeText, { code: lines ? lines.join("\n") : children, language: language }) })] }));
+}

package/dist/CodeExample.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * One framed example: the rendered `children` on top and the `code` that makes them attached
+ * underneath, in a single bordered box with one divider between. No client JS. An optional `caption`
+ * is the frame's last band. The code is React, so it is coloured as TSX. The preview is its own
+ * height, never padded to match a neighbour, down to a shared minimum so two frames side by side
+ * start alike. A wide preview or a long line of code scrolls inside the frame instead of widening the
+ * page or wrapping.
+ */
+export declare function CodeExample({ code, caption, children, ...rest }: {
+    /** The source shown under the preview, newlines kept. */
+    code: string;
+    /** One note on the example, under the code. */
+    caption?: ReactNode;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/CodeExample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeText } from "./CodeText.js";
+/**
+ * One framed example: the rendered `children` on top and the `code` that makes them attached
+ * underneath, in a single bordered box with one divider between. No client JS. An optional `caption`
+ * is the frame's last band. The code is React, so it is coloured as TSX. The preview is its own
+ * height, never padded to match a neighbour, down to a shared minimum so two frames side by side
+ * start alike. A wide preview or a long line of code scrolls inside the frame instead of widening the
+ * page or wrapping.
+ */
+export function CodeExample({ code, caption, children, ...rest }) {
+    return (_jsxs("figure", { ...rest, className: "overflow-hidden rounded-lg border border-slate-200 bg-white", children: [_jsx("div", { className: "min-h-24 overflow-x-auto p-5", children: children }), _jsx("pre", { className: "overflow-x-auto border-t border-slate-200 bg-slate-50 px-3 py-2.5 font-mono text-[12.5px] whitespace-pre text-slate-900", children: _jsx(CodeText, { code: code, language: "tsx" }) }), caption && (_jsx("figcaption", { className: "border-t border-slate-200 px-3 py-2.5 text-sm/5 text-slate-500", children: caption }))] }));
+}

package/dist/CodeText.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import { type CodeLanguage } from "./highlight.js";
+/** The `<code>` for a `<pre>`: the source in mono, one span per coloured run. */
+export declare function CodeText({ code, language, }: {
+    code: string;
+    language: CodeLanguage;
+}): ReactElement;

package/dist/CodeText.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { highlight } from "./highlight.js";
+/**
+ * Each kind borrows a colour family already in `palette.json`, so a theme recolours code like
+ * anything else: keywords and element names read as the accent (violet), strings as positive
+ * (emerald), numbers as warn (amber), attribute names as sky, calls as info (blue), comments muted.
+ */
+const TOKEN_CLASS = {
+    plain: "",
+    comment: "text-slate-500 italic",
+    keyword: "text-violet-700",
+    tag: "text-red-700",
+    attr: "text-sky-700",
+    string: "text-emerald-700",
+    number: "text-amber-700",
+    function: "text-blue-700",
+};
+/** The `<code>` for a `<pre>`: the source in mono, one span per coloured run. */
+export function CodeText({ code, language, }) {
+    return (_jsx("code", { children: highlight(code, language).map((token, index) => token.kind === "plain" ? (token.text) : (_jsx("span", { className: TOKEN_CLASS[token.kind], children: token.text }, index))) }));
+}

package/dist/ColourSchemeToggle.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, type ReactElement } from "react";
+import { type ColourScheme, type ColourSchemeClasses } from "./colourScheme.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+/**
+ * A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`, unless you pass `schemes` or `initial`: the script knows only the `dark` class and the stored choice, so an app that sets the scheme itself leaves it out.
+ *
+ * An app whose light scheme has a class of its own passes `schemes` (`{ light: "my-light", dark: "dark" }`);
+ * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
+ * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
+ * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
+ * The icon follows the class on `<html>` through CSS, so even without `initial` a dark page shows
+ * the sun from the first frame; the button's name catches up once the client has hydrated.
+ * `store={false}` skips `localStorage`, for an app that keeps the choice in a server cookie and
+ * writes it from `onChange`. Every other button prop (`id`, `data-*`, `aria-*`) goes on the button.
+ */
+export declare function ColourSchemeToggle({ onChange, schemes, initial, store, size, ...rest }: {
+    /**
+     * The button's height, as an `IconButton`'s.
+     * @default md
+     */
+    size?: Size | undefined;
+    /** Called with the new scheme after a click, for an app that persists the choice itself (a cookie). */
+    onChange?: (scheme: ColourScheme) => void;
+    /** The class each scheme puts on `<html>`. */
+    schemes?: ColourSchemeClasses | undefined;
+    /**
+     * The scheme the server rendered. What the server and the hydrating client show; the real state follows right after.
+     * @default light
+     */
+    initial?: ColourScheme | undefined;
+    /** Remember the choice in `localStorage`. `false` leaves persisting to `onChange`. */
+    store?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "onChange" | "onClick" | "children" | "aria-label" | "title">>): ReactElement;

package/dist/ColourSchemeToggle.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { appliedColourScheme, applyColourScheme, storeColourScheme, } from "./colourScheme.js";
+import { IconButton } from "./IconButton.js";
+const sun = (_jsxs("svg", { "data-scheme-icon": "sun", viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })] }));
+const moon = (_jsx("svg", { "data-scheme-icon": "moon", viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" }) }));
+// Both icons are always drawn and the page's own class picks one, so the first frame is right before
+// React runs: a dark visitor with no cookie has the dark class on <html> from the head script, but the
+// server rendered "light". The icon shows the scheme you would switch to: the moon on a light page,
+// the sun on a dark one. The classes are the app's (`schemes`), so the rule is written here: a dark
+// page has the dark class, or, when dark has none, lacks the light one.
+function iconRules(schemes) {
+    const sunIcon = '[data-scheme-icon="sun"]';
+    const moonIcon = '[data-scheme-icon="moon"]';
+    let dark = "";
+    if (schemes.dark !== "")
+        dark = `:root[class~=${JSON.stringify(schemes.dark)}]`;
+    else if (schemes.light !== "")
+        dark = `:root:not([class~=${JSON.stringify(schemes.light)}])`;
+    return (`${sunIcon}{display:none}` +
+        (dark === "" ? "" : `${dark} ${sunIcon}{display:inline}${dark} ${moonIcon}{display:none}`));
+}
+// The scheme's class on <html> is the source of truth: the head script or the server set it before React ran.
+function subscribe(onChange) {
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+}
+/**
+ * A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`, unless you pass `schemes` or `initial`: the script knows only the `dark` class and the stored choice, so an app that sets the scheme itself leaves it out.
+ *
+ * An app whose light scheme has a class of its own passes `schemes` (`{ light: "my-light", dark: "dark" }`);
+ * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
+ * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
+ * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
+ * The icon follows the class on `<html>` through CSS, so even without `initial` a dark page shows
+ * the sun from the first frame; the button's name catches up once the client has hydrated.
+ * `store={false}` skips `localStorage`, for an app that keeps the choice in a server cookie and
+ * writes it from `onChange`. Every other button prop (`id`, `data-*`, `aria-*`) goes on the button.
+ */
+export function ColourSchemeToggle({ onChange, schemes = { light: "", dark: "dark" }, initial, store = true, size = "md", ...rest }) {
+    const scheme = useSyncExternalStore(subscribe, () => appliedColourScheme(document.documentElement, schemes), () => initial ?? "light");
+    const next = scheme === "dark" ? "light" : "dark";
+    return (_jsxs(IconButton, { ...rest, size: size, label: `Switch to ${next} theme`, onClick: () => {
+            applyColourScheme(next, document.documentElement, schemes);
+            if (store)
+                storeColourScheme(next);
+            onChange?.(next);
+        }, children: [_jsx("style", { children: iconRules(schemes) }), sun, moon] }));
+}

package/dist/Container.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/**
+ * The one content edge: every page's width and side padding. This file is the only place they are
+ * defined, so a header, a page and a footer inside a Container start at the same x.
+ */
+export declare function Container({ as, elementRef, children, ...rest }: ContainerProps): ReactElement;
+type ContainerProps = {
+    /**
+     * The element: `div`, `main`, `header`, `footer`, `section` or `nav`.
+     * @default div
+     */
+    as?: "div" | "main" | "header" | "footer" | "section" | "nav";
+    /** The rendered element, for a parent that measures or scrolls it. */
+    elementRef?: ((element: HTMLElement | null) => void) | undefined;
+    children?: ReactNode;
+} & Unstyled<Omit<HTMLAttributes<HTMLElement>, "children">>;
+/** Container with the extra classes its own parts need (AppShell's padding): internal, not exported. */
+export declare function ContainerFrame({ as: Tag, className, elementRef, children, ...rest }: ContainerProps & {
+    className?: string;
+}): ReactElement;
+export {};

package/dist/Container.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * The one content edge: every page's width and side padding. This file is the only place they are
+ * defined, so a header, a page and a footer inside a Container start at the same x.
+ */
+export function Container({ as, elementRef, children, ...rest }) {
+    return (_jsx(ContainerFrame, { ...rest, ...(as && { as }), elementRef: elementRef, children: children }));
+}
+/** Container with the extra classes its own parts need (AppShell's padding): internal, not exported. */
+export function ContainerFrame({ as: Tag = "div", className, elementRef, children, ...rest }) {
+    return (_jsx(Tag, { ...rest, ref: elementRef, className: cx("mx-auto w-full max-w-6xl px-4 sm:px-6", className), children: children }));
+}

package/dist/CopyButton.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export declare function CopyButton({ text, label, copiedLabel, onClick, ...rest }: {
+    /** What goes on the clipboard. */
+    text: string;
+    /**
+     * The button's text before a copy.
+     * @default copy
+     */
+    label?: string;
+    /**
+     * The button's text once the copy has gone through.
+     * @default copied
+     */
+    copiedLabel?: string;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "children">>): ReactElement;

package/dist/CopyButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { focusRing } from "./cx.js";
+const BASE = `shrink-0 rounded px-1.5 py-0.5 font-sans text-xs text-slate-400 hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export function CopyButton({ text, label = "copy", copiedLabel = "copied", onClick, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", ...rest, className: BASE, onClick: (event) => {
+            onClick?.(event);
+            // The rejection is swallowed on purpose: a denied write is not an error the page can act on.
+            navigator.clipboard?.writeText(text).then(() => setCopied(true), () => { });
+        }, children: copied ? copiedLabel : label }));
+}

package/dist/CopyLine.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `disabled` disables the button, e.g. until hydration. Every other div prop goes on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export declare function CopyLine({ text, disabled, ...rest }: {
+    /** The line shown, and what the button copies. */
+    text: string;
+    /** Disables the copy button, e.g. until hydration. */
+    disabled?: boolean;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"div">, "children">>): ReactElement;

package/dist/CopyLine.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./CopyButton.js";
+const BOX = "flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-2.5 py-2 font-mono text-[12.5px] text-slate-900";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `disabled` disables the button, e.g. until hydration. Every other div prop goes on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export function CopyLine({ text, disabled, ...rest }) {
+    return (_jsxs("div", { ...rest, className: BOX, children: [_jsx("code", { className: "min-w-0 break-words", children: text }), _jsx(CopyButton, { text: text, disabled: disabled })] }));
+}

package/dist/DateCalendar.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+export declare const calendarIcon: import("react").JSX.Element;
+/**
+ * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
+ * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
+ * above the body, so the popover renders inside it (which also keeps the theme's scope class).
+ */
+export declare function CalendarPopover({ container }: {
+    container: Element | undefined;
+}): ReactElement;

package/dist/DateCalendar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { useContext } from "react";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, DatePickerStateContext, Dialog, Popover, } from "react-aria-components";
+import { cx, focusRing } from "./cx.js";
+import { MONTH_OPTIONS, iconButtonClass } from "./DateField.js";
+import { Icon } from "./Icon.js";
+export const calendarIcon = (_jsx(Icon, { children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "2" }), _jsx("path", { d: "M3 8.5h14M7 2.5v4M13 2.5v4" })] }) }));
+const chevron = (d) => (_jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: d }) }) }));
+const selectClass = `rounded-md border border-slate-300 bg-white py-1 pr-1 pl-2 text-sm text-slate-900 transition hover:border-violet-400 ${focusRing}`;
+/** ‹, a month dropdown, a year dropdown and ›: a birth date decades back is two picks away. */
+function CalendarHeader() {
+    const state = useContext(CalendarStateContext);
+    if (!state)
+        return null;
+    const focused = state.focusedDate;
+    const now = today(getLocalTimeZone()).year;
+    const first = Math.min(state.minValue?.year ?? now - 100, focused.year);
+    const last = Math.max(state.maxValue?.year ?? now + 10, focused.year);
+    const years = Array.from({ length: last - first + 1 }, (_, i) => first + i);
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { slot: "previous", className: iconButtonClass, children: chevron("M12.5 15l-5-5 5-5") }), _jsx("select", { "aria-label": "Month", className: cx(selectClass, "flex-1"), value: focused.month, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ month: Number(event.target.value) })), children: MONTH_OPTIONS.map(({ month, name }) => (_jsx("option", { value: month, children: name }, month))) }), _jsx("select", { "aria-label": "Year", className: selectClass, value: focused.year, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ year: Number(event.target.value) })), children: years.map((year) => (_jsx("option", { value: year, children: year }, year))) }), _jsx(Button, { slot: "next", className: iconButtonClass, children: chevron("M7.5 5l5 5-5 5") })] }));
+}
+function ClearButton() {
+    const picker = useContext(DatePickerStateContext);
+    return (_jsx("button", { type: "button", className: `rounded-md px-2 py-1 text-sm font-medium text-violet-600 transition hover:bg-violet-50 ${focusRing}`, onClick: () => {
+            picker?.setValue(null);
+            picker?.close();
+        }, children: "Clear" }));
+}
+const cellClass = ({ isSelected, isOutsideMonth, isDisabled, isUnavailable, isInvalid, }) => {
+    let tone = "cursor-pointer text-slate-700 hover:bg-slate-100";
+    if (isSelected)
+        tone = isInvalid ? "bg-red-50 text-red-700" : "bg-violet-600 text-violet-50";
+    else if (isOutsideMonth || isDisabled || isUnavailable)
+        tone = "text-slate-300";
+    return cx("flex h-9 w-9 items-center justify-center rounded-lg text-sm tabular-nums", tone, focusRing);
+};
+/**
+ * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
+ * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
+ * above the body, so the popover renders inside it (which also keeps the theme's scope class).
+ */
+export function CalendarPopover({ container }) {
+    return (_jsx(Popover, { ...(container ? { UNSTABLE_portalContainer: container } : {}), placement: "bottom start", className: "rounded-xl border border-slate-200 bg-white p-3 text-slate-900 shadow-lg", children: _jsxs(Dialog, { className: "flex flex-col gap-3 outline-none", children: [_jsxs(Calendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsxs(CalendarGrid, { weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-xs font-medium text-slate-500", children: day })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: cellClass }) })] })] }), _jsx("div", { className: "flex justify-end border-t border-slate-200 pt-2", children: _jsx(ClearButton, {}) })] }) }));
+}

package/dist/DateField.d.ts

@@ -0,0 +1,87 @@
+import { type CalendarDate } from "@internationalized/date";
+import { type ContextType, type ReactElement, type ReactNode } from "react";
+import { type DateFieldProps as AriaDateFieldProps, DateFieldStateContext } from "react-aria-components";
+import type { DataAttributes } from "./link.js";
+import type { Size } from "./size.js";
+/** Fixed, whatever the browser's locale: DD/MM/YYYY and Monday-first weeks. */
+export declare const LOCALE = "en-GB";
+export declare const MONTH_OPTIONS: {
+    month: number;
+    name: string;
+}[];
+type Segment = NonNullable<ContextType<typeof DateFieldStateContext>>["segments"][number];
+/** The props of a plain `DateField`, without the calendar. */
+export type FieldProps = {
+    /** The field's visible label, above it. Without one, name the field with `aria-label`. */
+    label?: ReactNode;
+    /** A hint under the field; an error replaces it. */
+    description?: ReactNode;
+    /** Replaces the built-in error message (an impossible date, or one outside min/max). */
+    errorMessage?: ReactNode;
+    /** An error from outside the field (a server's, say). Shown in place of the description, in red with `role="alert"`, and marks the field invalid. Like `Field`'s `error`. */
+    error?: ReactNode;
+    /** Marks the field invalid with no message of its own; pair it with `errorMessage`. */
+    isInvalid?: boolean;
+    /**
+     * The field's height and text, on the same scale as an `Input`: `sm` is `text-xs`, `lg` is
+     * `text-base`.
+     * @default md
+     */
+    size?: Size;
+} & DataAttributes & Pick<AriaDateFieldProps<CalendarDate>, "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDisabled" | "isRequired" | "name" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details">;
+export type DateFieldProps = FieldProps & ({
+    /** Adds a calendar button that opens a month view in a popover; the field is a date picker. */
+    calendar?: false | undefined;
+    /** Only a `calendar` field takes `defaultOpen`. */
+    defaultOpen?: undefined;
+} | {
+    calendar: true;
+    /** Open the calendar on mount. */
+    defaultOpen?: boolean | undefined;
+});
+/** What the segments show, as the day segment reports it to the field. */
+export type Read = {
+    /** The date as `YYYY-MM-DD` once every segment is filled and the day exists, else `""`. */
+    typed: string;
+    /** "February 1990 has 28 days." when the day does not exist. */
+    impossible: string | null;
+    /** Some segments are filled and some are not. */
+    partial: boolean;
+};
+/** One segment. The day segment also reports what the segments show to the field. */
+export declare function FieldSegment({ segment, onRead, }: {
+    segment: Segment;
+    onRead?: (read: Read) => void;
+}): ReactElement;
+export declare function frameClass({ isInvalid, isFocusWithin, isDisabled, }: {
+    isInvalid: boolean;
+    isFocusWithin: boolean;
+    isDisabled: boolean;
+}): string;
+/** The props that force a field invalid: an impossible date, `isInvalid`, or an `error` from outside. Spread onto the React Aria field after the rest. */
+export declare function forcedInvalid({ impossible, isInvalid, error, }: {
+    impossible: string | null;
+    isInvalid: boolean | undefined;
+    error: ReactNode;
+}): {
+    isInvalid?: true;
+};
+/** The label, the description or the error line: the shared outside of both components. */
+export declare function Notes({ description, errorMessage, error, impossible, isInvalid, }: {
+    description: ReactNode;
+    errorMessage: ReactNode;
+    error: ReactNode;
+    impossible: string | null;
+    isInvalid: boolean;
+}): ReactElement;
+export declare const labelClass = "text-sm font-medium text-slate-700";
+/** A small icon button inside a date field or calendar, without its box size. */
+export declare const iconButtonLook = "inline-flex shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";
+export declare const iconButtonClass = "inline-flex shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600 h-7 w-7";
+/**
+ * A segmented DD / MM / YYYY date input. Values are `CalendarDate`s; `name` posts it as
+ * `YYYY-MM-DD`. `calendar` adds a calendar button that opens a month view in a popover, at the
+ * same height as the plain field; `defaultOpen` opens it on mount.
+ */
+export declare function DateField({ calendar, defaultOpen, ...field }: DateFieldProps): ReactElement;
+export {};