@panneau/ui 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/command-palette/CommandPalette.module.js

@@ -0,0 +1,62 @@
+import "./CommandPalette.css";
+//#region src/command-palette/CommandPalette.module.css
+var overlay = "panneau-command-palette-overlay";
+var fade = "panneau-command-palette-fade";
+var modal = "panneau-command-palette-modal";
+var rise = "panneau-command-palette-rise";
+var dialog = "panneau-command-palette-dialog";
+var field = "panneau-command-palette-field";
+var search = "panneau-command-palette-search";
+var close = "panneau-command-palette-close";
+var fieldIcon = "panneau-command-palette-field-icon";
+var scope = "panneau-command-palette-scope";
+var scopeLabel = "panneau-command-palette-scope-label";
+var scopeRemove = "panneau-command-palette-scope-remove";
+var input = "panneau-command-palette-input";
+var list = "panneau-command-palette-list";
+var group = "panneau-command-palette-group";
+var groupLabel = "panneau-command-palette-group-label";
+var item = "panneau-command-palette-item";
+var icon = "panneau-command-palette-icon";
+var image = "panneau-command-palette-image";
+var text = "panneau-command-palette-text";
+var label = "panneau-command-palette-label";
+var description = "panneau-command-palette-description";
+var empty = "panneau-command-palette-empty";
+var footer = "panneau-command-palette-footer";
+var hints = "panneau-command-palette-hints";
+var hint = "panneau-command-palette-hint";
+var key = "panneau-command-palette-key";
+var CommandPalette_module_default = {
+	overlay,
+	fade,
+	modal,
+	rise,
+	dialog,
+	field,
+	search,
+	close,
+	fieldIcon,
+	scope,
+	scopeLabel,
+	scopeRemove,
+	input,
+	list,
+	group,
+	groupLabel,
+	item,
+	icon,
+	image,
+	text,
+	label,
+	description,
+	empty,
+	footer,
+	hints,
+	hint,
+	key
+};
+//#endregion
+export { close, CommandPalette_module_default as default, description, dialog, empty, fade, field, fieldIcon, footer, group, groupLabel, hint, hints, icon, image, input, item, key, label, list, modal, overlay, rise, scope, scopeLabel, scopeRemove, search, text };
+
+//# sourceMappingURL=CommandPalette.module.js.map

package/dist/command-palette/CommandPalette.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.module.js","names":[],"sources":["../../src/command-palette/CommandPalette.module.css"],"sourcesContent":["/* A dialog near the top of the screen: the search field over the results, and a footer with the\n * count and the keys. The whole screen on a phone. */\n\n.overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--panneau-z-overlay);\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding: var(--panneau-command-palette-offset-top, 12dvh) var(--panneau-space-4)\n        var(--panneau-space-4);\n    background-color: var(--panneau-color-backdrop);\n}\n\n.overlay[data-entering] {\n    animation: fade var(--panneau-duration) ease-out;\n}\n\n.modal {\n    display: flex;\n    width: 100%;\n    max-width: var(--panneau-command-palette-width, 40rem);\n    outline: none;\n}\n\n.modal[data-entering] {\n    animation: rise var(--panneau-duration) ease-out;\n}\n\n.dialog {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    overflow: hidden;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-command-palette-bg, var(--panneau-color-surface-raised));\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-command-palette-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n}\n\n.field {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.search {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.close {\n    display: none;\n}\n\n.fieldIcon {\n    flex: none;\n    color: var(--panneau-color-text-muted);\n}\n\n/* What the search is narrowed to, before the field. */\n.scope {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    max-width: 50%;\n    padding: 0 var(--panneau-space-1) 0 var(--panneau-space-2);\n    border-radius: var(--panneau-radius-full);\n    background-color: var(--panneau-color-surface-sunken);\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.scopeLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.scopeRemove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--panneau-space-1);\n    border: 0;\n    border-radius: var(--panneau-radius-full);\n    background: none;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    outline: none;\n}\n\n.scopeRemove[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.scopeRemove[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n}\n\n.input {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--panneau-space-1) 0;\n    border: 0;\n    background: none;\n    color: inherit;\n    font: inherit;\n    font-size: var(--panneau-font-size-lg);\n    outline: none;\n}\n\n.input::placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n/* The browser's own clear button: Escape clears the field. */\n.input::-webkit-search-cancel-button {\n    appearance: none;\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    max-height: var(--panneau-command-palette-list-max-height, 60dvh);\n    padding: var(--panneau-space-2);\n    overflow-y: auto;\n    outline: none;\n}\n\n.group {\n    display: flex;\n    flex-direction: column;\n}\n\n.groupLabel {\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-3);\n    min-height: var(--panneau-control-height);\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    border-radius: var(--panneau-command-palette-item-radius, var(--panneau-radius-md));\n    color: var(--panneau-color-text);\n    text-decoration: none;\n    cursor: pointer;\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-command-palette-item-active-bg, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    box-shadow: inset 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.icon,\n.image {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--panneau-radius-sm);\n    color: var(--panneau-color-text-muted);\n    background-color: var(--panneau-color-surface-sunken);\n    object-fit: cover;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.label,\n.description {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.description {\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.empty {\n    margin: 0;\n    padding: var(--panneau-space-6) var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n    text-align: center;\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-2) var(--panneau-space-4);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-xs);\n}\n\n.hints {\n    display: flex;\n    gap: var(--panneau-space-3);\n}\n\n.hint {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n}\n\n.key {\n    display: inline-grid;\n    place-items: center;\n    min-width: 1.25rem;\n    height: 1.25rem;\n    padding: 0 var(--panneau-space-1);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-sm);\n    background: var(--panneau-color-surface);\n    font-family: inherit;\n    font-size: var(--panneau-font-size-xs);\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes rise {\n    from {\n        transform: translateY(-0.5rem);\n        opacity: 0;\n    }\n}\n\n/* A phone: the whole screen, without the keys, which a touch screen has no use for. */\n@container panneau-root (max-width: 40rem) {\n    .overlay {\n        padding: 0;\n    }\n\n    .modal {\n        max-width: none;\n        height: 100dvh;\n    }\n\n    .dialog {\n        border: 0;\n        border-radius: 0;\n    }\n\n    .list {\n        flex: 1 1 auto;\n        max-height: none;\n    }\n\n    .hints {\n        display: none;\n    }\n\n    .close {\n        display: inline-flex;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay[data-entering],\n    .modal[data-entering] {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/command-palette/match.d.ts

@@ -0,0 +1,39 @@
+import type { IconComponent } from '../icon/Icon';
+/** An item of a `CommandPalette`: a link to follow, or an action to run. */
+export interface CommandPaletteItem {
+    /** Unique in the palette. */
+    id: string;
+    label: string;
+    /** A second line, such as the subtitle of an item or what an action does. */
+    description?: string;
+    /** More words it is found by, never shown. */
+    keywords?: readonly string[];
+    icon?: IconComponent;
+    /** An image instead of an icon, such as the thumbnail of an item. */
+    imageUrl?: string;
+    /** A path or URL to go to, through the app's `RouterProvider`. */
+    href?: string;
+    /** Runs when the item is chosen, after which the palette closes. */
+    onAction?: () => void;
+    /** The palette stays open after `onAction`, such as an item that narrows the search. */
+    keepsOpen?: boolean;
+}
+/** A titled group of items. */
+export interface CommandPaletteGroup {
+    id: string;
+    label: string;
+    items: readonly CommandPaletteItem[];
+    /**
+     * The items already match the query, such as results of a server: they are shown as they are,
+     * after the groups that the palette matches itself.
+     */
+    matched?: boolean;
+}
+/** Lower case, without accents: `Été` and `ete` are the same. */
+export declare function normalizeSearch(text: string, locale?: string): string;
+/**
+ * The groups of a palette for a query: the items that match it, ranked, in non-empty groups. Groups
+ * that are already `matched` keep their items, after the others. Without a query, every item.
+ */
+export declare function matchCommands(groups: readonly CommandPaletteGroup[], query: string, locale?: string): CommandPaletteGroup[];
+//# sourceMappingURL=match.d.ts.map

package/dist/command-palette/match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../src/command-palette/match.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,4EAA4E;AAC5E,MAAM,WAAW,kBAAkB;IAC/B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,+BAA+B;AAC/B,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iEAAiE;AACjE,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAMrE;AAyBD;;;GAGG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE,SAAS,mBAAmB,EAAE,EACtC,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,GAChB,mBAAmB,EAAE,CAuBvB"}

package/dist/command-palette/match.js

@@ -0,0 +1,44 @@
+//#region src/command-palette/match.ts
+/** Lower case, without accents: `Été` and `ete` are the same. */
+function normalizeSearch(text, locale) {
+	return text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase(locale).trim();
+}
+/**
+* How well an item matches a query, lower being better, or `null` when it doesn't: every word of
+* the query must be in its label, description or keywords. A label that starts with the query
+* comes first, then a label with a word that starts with it, then a label that contains it.
+*/
+function score(item, query, words, locale) {
+	const label = normalizeSearch(item.label, locale);
+	const text = normalizeSearch([
+		item.label,
+		item.description ?? "",
+		...item.keywords ?? []
+	].join(" "), locale);
+	if (!words.every((word) => text.includes(word))) return null;
+	if (label.startsWith(query)) return 0;
+	if (label.split(/\s+/).some((word) => word.startsWith(query))) return 1;
+	return label.includes(query) ? 2 : 3;
+}
+/**
+* The groups of a palette for a query: the items that match it, ranked, in non-empty groups. Groups
+* that are already `matched` keep their items, after the others. Without a query, every item.
+*/
+function matchCommands(groups, query, locale) {
+	const normalized = normalizeSearch(query, locale);
+	const words = normalized.split(/\s+/).filter((word) => word !== "");
+	const local = groups.filter((group) => group.matched !== true);
+	const remote = groups.filter((group) => group.matched === true);
+	return [...words.length === 0 ? local : local.map((group) => ({
+		...group,
+		items: group.items.map((item, index) => ({
+			item,
+			index,
+			rank: score(item, normalized, words, locale)
+		})).filter((entry) => entry.rank !== null).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ item }) => item)
+	})), ...remote].filter((group) => group.items.length > 0);
+}
+//#endregion
+export { matchCommands, normalizeSearch };
+
+//# sourceMappingURL=match.js.map

package/dist/command-palette/match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.js","names":[],"sources":["../../src/command-palette/match.ts"],"sourcesContent":["import type { IconComponent } from '../icon/Icon';\n\n/** An item of a `CommandPalette`: a link to follow, or an action to run. */\nexport interface CommandPaletteItem {\n    /** Unique in the palette. */\n    id: string;\n    label: string;\n    /** A second line, such as the subtitle of an item or what an action does. */\n    description?: string;\n    /** More words it is found by, never shown. */\n    keywords?: readonly string[];\n    icon?: IconComponent;\n    /** An image instead of an icon, such as the thumbnail of an item. */\n    imageUrl?: string;\n    /** A path or URL to go to, through the app's `RouterProvider`. */\n    href?: string;\n    /** Runs when the item is chosen, after which the palette closes. */\n    onAction?: () => void;\n    /** The palette stays open after `onAction`, such as an item that narrows the search. */\n    keepsOpen?: boolean;\n}\n\n/** A titled group of items. */\nexport interface CommandPaletteGroup {\n    id: string;\n    label: string;\n    items: readonly CommandPaletteItem[];\n    /**\n     * The items already match the query, such as results of a server: they are shown as they are,\n     * after the groups that the palette matches itself.\n     */\n    matched?: boolean;\n}\n\n/** Lower case, without accents: `Été` and `ete` are the same. */\nexport function normalizeSearch(text: string, locale?: string): string {\n    return text\n        .normalize('NFD')\n        .replace(/\\p{Diacritic}/gu, '')\n        .toLocaleLowerCase(locale)\n        .trim();\n}\n\n/**\n * How well an item matches a query, lower being better, or `null` when it doesn't: every word of\n * the query must be in its label, description or keywords. A label that starts with the query\n * comes first, then a label with a word that starts with it, then a label that contains it.\n */\nfunction score(item: CommandPaletteItem, query: string, words: string[], locale?: string) {\n    const label = normalizeSearch(item.label, locale);\n    const text = normalizeSearch(\n        [item.label, item.description ?? '', ...(item.keywords ?? [])].join(' '),\n        locale,\n    );\n    if (!words.every((word) => text.includes(word))) {\n        return null;\n    }\n    if (label.startsWith(query)) {\n        return 0;\n    }\n    if (label.split(/\\s+/).some((word) => word.startsWith(query))) {\n        return 1;\n    }\n    return label.includes(query) ? 2 : 3;\n}\n\n/**\n * The groups of a palette for a query: the items that match it, ranked, in non-empty groups. Groups\n * that are already `matched` keep their items, after the others. Without a query, every item.\n */\nexport function matchCommands(\n    groups: readonly CommandPaletteGroup[],\n    query: string,\n    locale?: string,\n): CommandPaletteGroup[] {\n    const normalized = normalizeSearch(query, locale);\n    const words = normalized.split(/\\s+/).filter((word) => word !== '');\n    const local = groups.filter((group) => group.matched !== true);\n    const remote = groups.filter((group) => group.matched === true);\n    const matched =\n        words.length === 0\n            ? local\n            : local.map((group) => ({\n                  ...group,\n                  items: group.items\n                      .map((item, index) => ({\n                          item,\n                          index,\n                          rank: score(item, normalized, words, locale),\n                      }))\n                      .filter(\n                          (entry): entry is typeof entry & { rank: number } => entry.rank !== null,\n                      )\n                      .sort((a, b) => a.rank - b.rank || a.index - b.index)\n                      .map(({ item }) => item),\n              }));\n    return [...matched, ...remote].filter((group) => group.items.length > 0);\n}\n"],"mappings":";;AAmCA,SAAgB,gBAAgB,MAAc,QAAyB;CACnE,OAAO,KACF,UAAU,KAAK,CAAC,CAChB,QAAQ,mBAAmB,EAAE,CAAC,CAC9B,kBAAkB,MAAM,CAAC,CACzB,KAAK;AACd;;;;;;AAOA,SAAS,MAAM,MAA0B,OAAe,OAAiB,QAAiB;CACtF,MAAM,QAAQ,gBAAgB,KAAK,OAAO,MAAM;CAChD,MAAM,OAAO,gBACT;EAAC,KAAK;EAAO,KAAK,eAAe;EAAI,GAAI,KAAK,YAAY,CAAA;CAAG,CAAC,CAAC,KAAK,GAAG,GACvE,MACJ;CACA,IAAI,CAAC,MAAM,OAAO,SAAS,KAAK,SAAS,IAAI,CAAC,GAC1C,OAAO;CAEX,IAAI,MAAM,WAAW,KAAK,GACtB,OAAO;CAEX,IAAI,MAAM,MAAM,KAAK,CAAC,CAAC,MAAM,SAAS,KAAK,WAAW,KAAK,CAAC,GACxD,OAAO;CAEX,OAAO,MAAM,SAAS,KAAK,IAAI,IAAI;AACvC;;;;;AAMA,SAAgB,cACZ,QACA,OACA,QACqB;CACrB,MAAM,aAAa,gBAAgB,OAAO,MAAM;CAChD,MAAM,QAAQ,WAAW,MAAM,KAAK,CAAC,CAAC,QAAQ,SAAS,SAAS,EAAE;CAClE,MAAM,QAAQ,OAAO,QAAQ,UAAU,MAAM,YAAY,IAAI;CAC7D,MAAM,SAAS,OAAO,QAAQ,UAAU,MAAM,YAAY,IAAI;CAkB9D,OAAO,CAAC,GAhBJ,MAAM,WAAW,IACX,QACA,MAAM,KAAK,WAAW;EAClB,GAAG;EACH,OAAO,MAAM,MACR,KAAK,MAAM,WAAW;GACnB;GACA;GACA,MAAM,MAAM,MAAM,YAAY,OAAO,MAAM;EAC/C,EAAE,CAAC,CACF,QACI,UAAoD,MAAM,SAAS,IACxE,CAAC,CACA,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CACpD,KAAK,EAAE,WAAW,IAAI;CAC/B,EAAE,GACQ,GAAG,MAAM,CAAC,CAAC,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;AAC3E"}

package/dist/command-palette/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of CommandPalette. */
+export declare const commandPaletteTokens: import("..").ComponentTokens<"command-palette", "panneau-command-palette-width" | "panneau-command-palette-radius" | "panneau-command-palette-bg" | "panneau-command-palette-offset-top" | "panneau-command-palette-list-max-height" | "panneau-command-palette-item-radius" | "panneau-command-palette-item-active-bg">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/command-palette/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/command-palette/tokens.ts"],"names":[],"mappings":"AAEA,gCAAgC;AAChC,eAAO,MAAM,oBAAoB,0TAe/B,CAAC"}

package/dist/command-palette/tokens.js

@@ -0,0 +1,23 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/command-palette/tokens.ts
+/** Tokens of CommandPalette. */
+var commandPaletteTokens = defineComponentTokens("command-palette", {
+	/** Maximum width. */
+	width: "40rem",
+	/** Space above the palette, which opens near the top of the screen. */
+	"offset-top": "12dvh",
+	/** Maximum height of the list of results. */
+	"list-max-height": "60dvh",
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Corner radius of the items. */
+	"item-radius": "var(--panneau-radius-md)",
+	/** Background of the item chosen with the keyboard or the pointer. */
+	"item-active-bg": "var(--panneau-color-hover)"
+});
+//#endregion
+export { commandPaletteTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/command-palette/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/command-palette/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of CommandPalette. */\nexport const commandPaletteTokens = defineComponentTokens('command-palette', {\n    /** Maximum width. */\n    width: '40rem',\n    /** Space above the palette, which opens near the top of the screen. */\n    'offset-top': '12dvh',\n    /** Maximum height of the list of results. */\n    'list-max-height': '60dvh',\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Corner radius of the items. */\n    'item-radius': 'var(--panneau-radius-md)',\n    /** Background of the item chosen with the keyboard or the pointer. */\n    'item-active-bg': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,uBAAuB,sBAAsB,mBAAmB;;CAEzE,OAAO;;CAEP,cAAc;;CAEd,mBAAmB;;CAEnB,IAAI;;CAEJ,QAAQ;;CAER,eAAe;;CAEf,kBAAkB;AACtB,CAAC"}

package/dist/command-palette/useCommandShortcut.d.ts

@@ -0,0 +1,12 @@
+/** Whether the platform's shortcut key is ⌘ (Apple) rather than Ctrl. */
+export declare function isApplePlatform(): boolean;
+/**
+ * Calls `onToggle` on ⌘K (Apple) or Ctrl+K (elsewhere), to open or close a `CommandPalette`. The
+ * key is left alone when something already handled it (an editor that links with Mod-K), when it
+ * repeats, during a composition, or when another modal dialog is open while the palette is closed.
+ */
+export declare function useCommandShortcut(onToggle: () => void, { isOpen, enabled }?: {
+    isOpen?: boolean;
+    enabled?: boolean;
+}): void;
+//# sourceMappingURL=useCommandShortcut.d.ts.map

package/dist/command-palette/useCommandShortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommandShortcut.d.ts","sourceRoot":"","sources":["../../src/command-palette/useCommandShortcut.ts"],"names":[],"mappings":"AAEA,yEAAyE;AACzE,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAC9B,QAAQ,EAAE,MAAM,IAAI,EACpB,EAAE,MAAc,EAAE,OAAc,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GACjF,IAAI,CA2BN"}

package/dist/command-palette/useCommandShortcut.js

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+//#region src/command-palette/useCommandShortcut.ts
+/** Whether the platform's shortcut key is ⌘ (Apple) rather than Ctrl. */
+function isApplePlatform() {
+	return typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform);
+}
+/**
+* Calls `onToggle` on ⌘K (Apple) or Ctrl+K (elsewhere), to open or close a `CommandPalette`. The
+* key is left alone when something already handled it (an editor that links with Mod-K), when it
+* repeats, during a composition, or when another modal dialog is open while the palette is closed.
+*/
+function useCommandShortcut(onToggle, { isOpen = false, enabled = true } = {}) {
+	useEffect(() => {
+		if (!enabled) return;
+		const onKeyDown = (event) => {
+			const modifier = isApplePlatform() ? event.metaKey : event.ctrlKey;
+			if (event.key.toLowerCase() !== "k" || !modifier || event.altKey || event.shiftKey || event.defaultPrevented || event.repeat || event.isComposing) return;
+			if (!isOpen && document.querySelector("[role=\"dialog\"][aria-modal=\"true\"]") !== null) return;
+			event.preventDefault();
+			onToggle();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	});
+}
+//#endregion
+export { isApplePlatform, useCommandShortcut };
+
+//# sourceMappingURL=useCommandShortcut.js.map

package/dist/command-palette/useCommandShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommandShortcut.js","names":[],"sources":["../../src/command-palette/useCommandShortcut.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/** Whether the platform's shortcut key is ⌘ (Apple) rather than Ctrl. */\nexport function isApplePlatform(): boolean {\n    return typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test(navigator.platform);\n}\n\n/**\n * Calls `onToggle` on ⌘K (Apple) or Ctrl+K (elsewhere), to open or close a `CommandPalette`. The\n * key is left alone when something already handled it (an editor that links with Mod-K), when it\n * repeats, during a composition, or when another modal dialog is open while the palette is closed.\n */\nexport function useCommandShortcut(\n    onToggle: () => void,\n    { isOpen = false, enabled = true }: { isOpen?: boolean; enabled?: boolean } = {},\n): void {\n    useEffect(() => {\n        if (!enabled) {\n            return undefined;\n        }\n        const onKeyDown = (event: KeyboardEvent) => {\n            const modifier = isApplePlatform() ? event.metaKey : event.ctrlKey;\n            if (\n                event.key.toLowerCase() !== 'k' ||\n                !modifier ||\n                event.altKey ||\n                event.shiftKey ||\n                event.defaultPrevented ||\n                event.repeat ||\n                event.isComposing\n            ) {\n                return;\n            }\n            if (!isOpen && document.querySelector('[role=\"dialog\"][aria-modal=\"true\"]') !== null) {\n                return;\n            }\n            event.preventDefault();\n            onToggle();\n        };\n        window.addEventListener('keydown', onKeyDown);\n        return () => window.removeEventListener('keydown', onKeyDown);\n    });\n}\n"],"mappings":";;;AAGA,SAAgB,kBAA2B;CACvC,OAAO,OAAO,cAAc,eAAe,wBAAwB,KAAK,UAAU,QAAQ;AAC9F;;;;;;AAOA,SAAgB,mBACZ,UACA,EAAE,SAAS,OAAO,UAAU,SAAkD,CAAC,GAC3E;CACJ,gBAAgB;EACZ,IAAI,CAAC,SACD;EAEJ,MAAM,aAAa,UAAyB;GACxC,MAAM,WAAW,gBAAgB,IAAI,MAAM,UAAU,MAAM;GAC3D,IACI,MAAM,IAAI,YAAY,MAAM,OAC5B,CAAC,YACD,MAAM,UACN,MAAM,YACN,MAAM,oBACN,MAAM,UACN,MAAM,aAEN;GAEJ,IAAI,CAAC,UAAU,SAAS,cAAc,wCAAoC,MAAM,MAC5E;GAEJ,MAAM,eAAe;GACrB,SAAS;EACb;EACA,OAAO,iBAAiB,WAAW,SAAS;EAC5C,aAAa,OAAO,oBAAoB,WAAW,SAAS;CAChE,CAAC;AACL"}

package/dist/date-picker/DatePicker.css

@@ -22,6 +22,8 @@
 .panneau-date-picker-segment[data-type='literal'] {
     padding: 0;
     color: var(--panneau-color-text-muted);
+    /* The space of `10/15/2026, 9:30 AM`, which a flex item would drop */
+    white-space: pre;
 }
 
 .panneau-date-picker-segment[data-placeholder] {
@@ -57,6 +59,42 @@
     outline-offset: -2px;
 }
 
+/* As wide as the calendar, not as the field. */
+.panneau-date-picker-popover.panneau-date-picker-popover {
+    min-width: 0;
+}
+
+/* The previous and next months. */
+.panneau-date-picker-nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--panneau-calendar-cell-size, 2.25rem);
+    height: var(--panneau-calendar-cell-size, 2.25rem);
+    padding: 0;
+    color: var(--panneau-color-text-muted);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--panneau-calendar-cell-radius, var(--panneau-radius-md));
+    outline: none;
+}
+
+.panneau-date-picker-nav-button[data-hovered] {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-date-picker-nav-button[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: -2px;
+}
+
+.panneau-date-picker-nav-button[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
 .panneau-date-picker-calendar {
     width: max-content;
     max-width: 100%;
@@ -132,4 +170,6 @@
 
 .panneau-date-picker-time {
     margin-top: var(--panneau-space-3);
+    padding-top: var(--panneau-space-3);
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
 }

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

@@ -6,7 +6,8 @@ export interface DatePickerProps extends Omit<AriaDatePickerProps<DateValue>, 'c
 }
 /**
  * A date, or a date and time with `granularity="minute"`, typed segment by segment in the order of
- * the locale, or picked in a calendar. Values are `@internationalized/date` objects.
+ * the locale, or picked in a calendar. With a time, the calendar has a field for it, and stays
+ * open after a day is picked. Values are `@internationalized/date` objects.
  */
 export declare function DatePicker({ label, description, errors, isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, popoverClassName, ...props }: DatePickerProps): import("react").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAU3C,KAAK,SAAS,EAIjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAO7B,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,CAAC,SAAS,CAAC,EAC9B,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAChE,EACD,gBAAgB;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BA0DjB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAW3C,KAAK,SAAS,EAIjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAiC7B,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,CAAC,SAAS,CAAC,EAC9B,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAChE,EACD,gBAAgB;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BAgEjB"}

package/dist/date-picker/DatePicker.js

@@ -1,21 +1,67 @@
 import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
 import Field_module_default from "../field/Field.module.js";
 import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
 import Popover_module_default from "../popover/Popover.module.js";
 import { PopoverSurface } from "../popover/Popover.js";
 import DatePicker_module_default from "./DatePicker.module.js";
+import { TimeInput } from "../time-input/TimeInput.js";
 import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
-import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePicker, DateSegment, Dialog, Group, Heading } from "react-aria-components";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePicker, DatePickerStateContext, DateSegment, Dialog, Group, Heading } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/date-picker/DatePicker.tsx
+/** The time of a date and time, under the calendar: the calendar alone can't set it. */
+function CalendarTime() {
+	const $ = c(9);
+	const intl = usePanneauIntl();
+	const state = use(DatePickerStateContext);
+	if (state === null || !state.hasTime) return null;
+	const granularity = state.granularity === "day" ? "minute" : state.granularity;
+	let t0;
+	if ($[0] !== intl) {
+		t0 = intl.formatMessage(messages.time);
+		$[0] = intl;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== state) {
+		t1 = (value) => {
+			if (value !== null) state.setTimeValue(value);
+		};
+		$[2] = state;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== granularity || $[5] !== state.timeValue || $[6] !== t0 || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TimeInput, {
+			label: t0,
+			value: state.timeValue,
+			onChange: t1,
+			granularity,
+			className: DatePicker_module_default.time
+		});
+		$[4] = granularity;
+		$[5] = state.timeValue;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
 /**
 * A date, or a date and time with `granularity="minute"`, typed segment by segment in the order of
-* the locale, or picked in a calendar. Values are `@internationalized/date` objects.
+* the locale, or picked in a calendar. With a time, the calendar has a field for it, and stays
+* open after a day is picked. Values are `@internationalized/date` objects.
 */
 function DatePicker$1({ label, description, errors = [], isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, popoverClassName, ...props }) {
 	const invalid = errors.length > 0;
+	const hasTime = props.granularity === "hour" || props.granularity === "minute" || props.granularity === "second";
 	return /* @__PURE__ */ jsxs(DatePicker, {
+		shouldCloseOnSelect: !hasTime,
 		...props,
 		isRequired,
 		isReadOnly,
@@ -51,23 +97,23 @@ function DatePicker$1({ label, description, errors = [], isRequired, isReadOnly,
 				className: errorsClassName
 			}),
 			/* @__PURE__ */ jsx(PopoverSurface, {
-				className: popoverClassName,
-				children: /* @__PURE__ */ jsx(Dialog, {
+				className: cx(DatePicker_module_default.popover, popoverClassName),
+				children: /* @__PURE__ */ jsxs(Dialog, {
 					className: Popover_module_default.dialog,
-					children: /* @__PURE__ */ jsxs(Calendar, {
+					children: [/* @__PURE__ */ jsxs(Calendar, {
 						className: DatePicker_module_default.calendar,
 						children: [/* @__PURE__ */ jsxs("header", {
 							className: DatePicker_module_default.header,
 							children: [
 								/* @__PURE__ */ jsx(Button, {
 									slot: "previous",
-									className: DatePicker_module_default.button,
+									className: DatePicker_module_default.navButton,
 									children: /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft })
 								}),
 								/* @__PURE__ */ jsx(Heading, { className: DatePicker_module_default.heading }),
 								/* @__PURE__ */ jsx(Button, {
 									slot: "next",
-									className: DatePicker_module_default.button,
+									className: DatePicker_module_default.navButton,
 									children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })
 								})
 							]
@@ -81,7 +127,7 @@ function DatePicker$1({ label, description, errors = [], isRequired, isReadOnly,
 								className: DatePicker_module_default.cell
 							}) })]
 						})]
-					})
+					}), /* @__PURE__ */ jsx(CalendarTime, {})]
 				})
 			})
 		]

package/dist/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["DatePicker","AriaDatePicker","fieldStyles","styles","popoverStyles"],"sources":["../../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n    DatePicker as AriaDatePicker,\n    type DatePickerProps as AriaDatePickerProps,\n    Button,\n    Calendar,\n    CalendarCell,\n    CalendarGrid,\n    CalendarGridBody,\n    CalendarGridHeader,\n    CalendarHeaderCell,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Dialog,\n    Group,\n    Heading,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport popoverStyles from '../popover/Popover.module.css';\nimport { cx } from '../utils/cx';\nimport styles from './DatePicker.module.css';\n\nexport interface DatePickerProps\n    extends\n        Omit<\n            AriaDatePickerProps<DateValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n    popoverClassName?: string;\n}\n\n/**\n * A date, or a date and time with `granularity=\"minute\"`, typed segment by segment in the order of\n * the locale, or picked in a calendar. Values are `@internationalized/date` objects.\n */\nexport function DatePicker({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    popoverClassName,\n    ...props\n}: DatePickerProps) {\n    const invalid = errors.length > 0;\n    return (\n        <AriaDatePicker\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-date-picker', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                <DateInput className={styles.input}>\n                    {(segment) => <DateSegment segment={segment} className={styles.segment} />}\n                </DateInput>\n                {isReadOnly !== true ? (\n                    <Button className={styles.button}>\n                        <Icon icon={CalendarDays} />\n                    </Button>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <Dialog className={popoverStyles.dialog}>\n                    <Calendar className={styles.calendar}>\n                        <header className={styles.header}>\n                            <Button slot=\"previous\" className={styles.button}>\n                                <Icon icon={ChevronLeft} />\n                            </Button>\n                            <Heading className={styles.heading} />\n                            <Button slot=\"next\" className={styles.button}>\n                                <Icon icon={ChevronRight} />\n                            </Button>\n                        </header>\n                        <CalendarGrid className={styles.grid}>\n                            <CalendarGridHeader>\n                                {(day) => (\n                                    <CalendarHeaderCell className={styles.weekday}>\n                                        {day}\n                                    </CalendarHeaderCell>\n                                )}\n                            </CalendarGridHeader>\n                            <CalendarGridBody>\n                                {(date) => <CalendarCell date={date} className={styles.cell} />}\n                            </CalendarGridBody>\n                        </CalendarGrid>\n                    </Calendar>\n                </Dialog>\n            </PopoverSurface>\n        </AriaDatePicker>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,SAAgBA,aAAW,EACvB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,kBACA,GAAG,SACa;CAChB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAACC,YAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,uBAAuBC,qBAAY,OAAO,SAAS;EANrE,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAO,SAAS,gBAAgB;IACnE,iBAAe,cAAc,KAAA;IAFjC,UAAA,CAII,oBAAC,WAAD;KAAW,WAAWA,0BAAO;KACvB,WAAA,YAAY,oBAAC,aAAD;MAAsB;MAAS,WAAWA,0BAAO;KAAQ,CAAA;IAChE,CAAA,GACV,eAAe,OACZ,oBAAC,QAAD;KAAQ,WAAWA,0BAAO;KACtB,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;IACrB,CAAA,IACR,IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;GACxD,oBAAC,gBAAD;IAAgB,WAAW;IACvB,UAAA,oBAAC,QAAD;KAAQ,WAAWC,uBAAc;KAC7B,UAAA,qBAAC,UAAD;MAAU,WAAWD,0BAAO;MAA5B,UAAA,CACI,qBAAC,UAAD;OAAQ,WAAWA,0BAAO;OAA1B,UAAA;QACI,oBAAC,QAAD;SAAQ,MAAK;SAAW,WAAWA,0BAAO;SACtC,UAAA,oBAAC,MAAD,EAAM,MAAM,YAAY,CAAA;QACpB,CAAA;QACR,oBAAC,SAAD,EAAS,WAAWA,0BAAO,QAAQ,CAAA;QACnC,oBAAC,QAAD;SAAQ,MAAK;SAAO,WAAWA,0BAAO;SAClC,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;QACrB,CAAA;OACJ;MACR,CAAA,GAAA,qBAAC,cAAD;OAAc,WAAWA,0BAAO;OAAhC,UAAA,CACI,oBAAC,oBAAD,EAAA,WACM,QACE,oBAAC,oBAAD;QAAoB,WAAWA,0BAAO;QACjC,UAAA;OACe,CAAA,EAER,CAAA,GACpB,oBAAC,kBAAD,EAAA,WACM,SAAS,oBAAC,cAAD;QAAoB;QAAM,WAAWA,0BAAO;OAAK,CAAA,EAC9C,CAAA,CACR;MACR,CAAA,CAAA;;IACN,CAAA;GACI,CAAA;EACJ;;AAExB"}
+{"version":3,"file":"DatePicker.js","names":["granularity","_c","styles","DatePicker","AriaDatePicker","fieldStyles","popoverStyles"],"sources":["../../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { use } from 'react';\nimport {\n    DatePicker as AriaDatePicker,\n    type DatePickerProps as AriaDatePickerProps,\n    Button,\n    Calendar,\n    CalendarCell,\n    CalendarGrid,\n    CalendarGridBody,\n    CalendarGridHeader,\n    CalendarHeaderCell,\n    DateInput,\n    DatePickerStateContext,\n    DateSegment,\n    type DateValue,\n    Dialog,\n    Group,\n    Heading,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport popoverStyles from '../popover/Popover.module.css';\nimport { TimeInput } from '../time-input/TimeInput';\nimport { cx } from '../utils/cx';\nimport styles from './DatePicker.module.css';\n\n/** The time of a date and time, under the calendar: the calendar alone can't set it. */\nfunction CalendarTime() {\n    const intl = usePanneauIntl();\n    const state = use(DatePickerStateContext);\n    if (state === null || !state.hasTime) {\n        return null;\n    }\n    const granularity = state.granularity === 'day' ? 'minute' : state.granularity;\n    return (\n        <TimeInput\n            label={intl.formatMessage(messages.time)}\n            value={state.timeValue}\n            onChange={(value) => {\n                if (value !== null) {\n                    state.setTimeValue(value);\n                }\n            }}\n            granularity={granularity}\n            className={styles.time}\n        />\n    );\n}\n\nexport interface DatePickerProps\n    extends\n        Omit<\n            AriaDatePickerProps<DateValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n    popoverClassName?: string;\n}\n\n/**\n * A date, or a date and time with `granularity=\"minute\"`, typed segment by segment in the order of\n * the locale, or picked in a calendar. With a time, the calendar has a field for it, and stays\n * open after a day is picked. Values are `@internationalized/date` objects.\n */\nexport function DatePicker({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    popoverClassName,\n    ...props\n}: DatePickerProps) {\n    const invalid = errors.length > 0;\n    const hasTime =\n        props.granularity === 'hour' ||\n        props.granularity === 'minute' ||\n        props.granularity === 'second';\n    return (\n        <AriaDatePicker\n            shouldCloseOnSelect={!hasTime}\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-date-picker', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                <DateInput className={styles.input}>\n                    {(segment) => <DateSegment segment={segment} className={styles.segment} />}\n                </DateInput>\n                {isReadOnly !== true ? (\n                    <Button className={styles.button}>\n                        <Icon icon={CalendarDays} />\n                    </Button>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={cx(styles.popover, popoverClassName)}>\n                <Dialog className={popoverStyles.dialog}>\n                    <Calendar className={styles.calendar}>\n                        <header className={styles.header}>\n                            <Button slot=\"previous\" className={styles.navButton}>\n                                <Icon icon={ChevronLeft} />\n                            </Button>\n                            <Heading className={styles.heading} />\n                            <Button slot=\"next\" className={styles.navButton}>\n                                <Icon icon={ChevronRight} />\n                            </Button>\n                        </header>\n                        <CalendarGrid className={styles.grid}>\n                            <CalendarGridHeader>\n                                {(day) => (\n                                    <CalendarHeaderCell className={styles.weekday}>\n                                        {day}\n                                    </CalendarHeaderCell>\n                                )}\n                            </CalendarGridHeader>\n                            <CalendarGridBody>\n                                {(date) => <CalendarCell date={date} className={styles.cell} />}\n                            </CalendarGridBody>\n                        </CalendarGrid>\n                    </Calendar>\n                    <CalendarTime />\n                </Dialog>\n            </PopoverSurface>\n        </AriaDatePicker>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,SAAA,eAAA;CAAA,MAAA,IAAAC,EAAA,CAAA;CACI,MAAA,OAAa,eAAe;CAC5B,MAAA,QAAc,IAAI,sBAAsB;CACxC,IAAI,UAAU,QAAV,CAAmB,MAAK,SAAQ,OACzB;CAEX,MAAA,cAAoB,MAAK,gBAAiB,QAAtB,WAAyC,MAAK;CAAa,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAGhE,KAAA,KAAI,cAAe,SAAQ,IAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAE9B,MAAA,UAAA;GACN,IAAI,UAAU,MACV,MAAK,aAAc,KAAK;EAC3B;EACJ,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,eAAA,EAAA,OAAA,MAAA,aAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAPL,KAAA,oBAAC,WAAD;GACW,OAAA;GACA,OAAA,MAAK;GACF,UAAA;GAKG;GACF,WAAAC,0BAAM;EAAK,CAAA;EACxB,EAAA,KAAA;EAAA,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAVF;AAUE;;;;;;AAoBV,SAAgBC,aAAW,EACvB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,kBACA,GAAG,SACa;CAChB,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB;CAC1B,OACI,qBAACC,YAAD;EACI,qBAAqB,CAAC;EACtB,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,uBAAuBC,qBAAY,OAAO,SAAS;EAPrE,UAAA;GASI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASH,0BAAO,SAAS,gBAAgB;IACnE,iBAAe,cAAc,KAAA;IAFjC,UAAA,CAII,oBAAC,WAAD;KAAW,WAAWA,0BAAO;KACvB,WAAA,YAAY,oBAAC,aAAD;MAAsB;MAAS,WAAWA,0BAAO;KAAQ,CAAA;IAChE,CAAA,GACV,eAAe,OACZ,oBAAC,QAAD;KAAQ,WAAWA,0BAAO;KACtB,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;IACrB,CAAA,IACR,IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;GACxD,oBAAC,gBAAD;IAAgB,WAAW,GAAGA,0BAAO,SAAS,gBAAgB;IAC1D,UAAA,qBAAC,QAAD;KAAQ,WAAWI,uBAAc;KAAjC,UAAA,CACI,qBAAC,UAAD;MAAU,WAAWJ,0BAAO;MAA5B,UAAA,CACI,qBAAC,UAAD;OAAQ,WAAWA,0BAAO;OAA1B,UAAA;QACI,oBAAC,QAAD;SAAQ,MAAK;SAAW,WAAWA,0BAAO;SACtC,UAAA,oBAAC,MAAD,EAAM,MAAM,YAAY,CAAA;QACpB,CAAA;QACR,oBAAC,SAAD,EAAS,WAAWA,0BAAO,QAAQ,CAAA;QACnC,oBAAC,QAAD;SAAQ,MAAK;SAAO,WAAWA,0BAAO;SAClC,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;QACrB,CAAA;OACJ;MACR,CAAA,GAAA,qBAAC,cAAD;OAAc,WAAWA,0BAAO;OAAhC,UAAA,CACI,oBAAC,oBAAD,EAAA,WACM,QACE,oBAAC,oBAAD;QAAoB,WAAWA,0BAAO;QACjC,UAAA;OACe,CAAA,EAER,CAAA,GACpB,oBAAC,kBAAD,EAAA,WACM,SAAS,oBAAC,cAAD;QAAoB;QAAM,WAAWA,0BAAO;OAAK,CAAA,EAC9C,CAAA,CACR;MACR,CAAA,CAAA;KACV,CAAA,GAAA,oBAAC,cAAD,CAAa,CAAA,CACT;;GACI,CAAA;EACJ;;AAExB"}

package/dist/date-picker/DatePicker.module.js

@@ -4,6 +4,8 @@ var control = "panneau-date-picker-control";
 var input = "panneau-date-picker-input";
 var segment = "panneau-date-picker-segment";
 var button = "panneau-date-picker-button";
+var popover = "panneau-date-picker-popover";
+var navButton = "panneau-date-picker-nav-button";
 var calendar = "panneau-date-picker-calendar";
 var header = "panneau-date-picker-header";
 var heading = "panneau-date-picker-heading";
@@ -16,6 +18,8 @@ var DatePicker_module_default = {
 	input,
 	segment,
 	button,
+	popover,
+	navButton,
 	calendar,
 	header,
 	heading,
@@ -25,6 +29,6 @@ var DatePicker_module_default = {
 	time
 };
 //#endregion
-export { button, calendar, cell, control, DatePicker_module_default as default, grid, header, heading, input, segment, time, weekday };
+export { button, calendar, cell, control, DatePicker_module_default as default, grid, header, heading, input, navButton, popover, segment, time, weekday };
 
 //# sourceMappingURL=DatePicker.module.js.map

package/dist/date-picker/DatePicker.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.module.js","names":[],"sources":["../../src/date-picker/DatePicker.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n}\n\n.input {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    min-width: 0;\n    overflow-x: auto;\n    white-space: nowrap;\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.segment {\n    padding: 0 0.0625rem;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n    caret-color: transparent;\n}\n\n.segment[data-type='literal'] {\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n}\n\n.segment[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.segment[data-focused] {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    align-self: stretch;\n    width: 2.25rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.button[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.calendar {\n    width: max-content;\n    max-width: 100%;\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    margin-bottom: var(--panneau-space-2);\n}\n\n.heading {\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-bold);\n    text-transform: capitalize;\n}\n\n.grid {\n    border-collapse: collapse;\n}\n\n.weekday {\n    padding-bottom: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n}\n\n.cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-calendar-cell-size, 2.25rem);\n    height: var(--panneau-calendar-cell-size, 2.25rem);\n    font-size: var(--panneau-font-size-md);\n    font-variant-numeric: var(--panneau-font-numeric);\n    cursor: pointer;\n    border-radius: var(--panneau-calendar-cell-radius, var(--panneau-radius-md));\n    outline: none;\n}\n\n.cell[data-outside-month] {\n    display: none;\n}\n\n.cell[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.cell[data-selected] {\n    color: var(--panneau-calendar-selected-color, var(--panneau-color-accent-text));\n    background-color: var(--panneau-calendar-selected-bg, var(--panneau-color-accent));\n}\n\n.cell[data-today]:not([data-selected]) {\n    font-weight: var(--panneau-font-weight-bold);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-border-control);\n}\n\n.cell[data-disabled],\n.cell[data-unavailable] {\n    cursor: not-allowed;\n    opacity: 0.4;\n}\n\n.cell[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.time {\n    margin-top: var(--panneau-space-3);\n}\n"],"mappings":""}
+{"version":3,"file":"DatePicker.module.js","names":[],"sources":["../../src/date-picker/DatePicker.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n}\n\n.input {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    min-width: 0;\n    overflow-x: auto;\n    white-space: nowrap;\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.segment {\n    padding: 0 0.0625rem;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n    caret-color: transparent;\n}\n\n.segment[data-type='literal'] {\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    /* The space of `10/15/2026, 9:30 AM`, which a flex item would drop */\n    white-space: pre;\n}\n\n.segment[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.segment[data-focused] {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    align-self: stretch;\n    width: 2.25rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.button[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n/* As wide as the calendar, not as the field. */\n.popover.popover {\n    min-width: 0;\n}\n\n/* The previous and next months. */\n.navButton {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-calendar-cell-size, 2.25rem);\n    height: var(--panneau-calendar-cell-size, 2.25rem);\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--panneau-calendar-cell-radius, var(--panneau-radius-md));\n    outline: none;\n}\n\n.navButton[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.navButton[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.navButton[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.4;\n}\n\n.calendar {\n    width: max-content;\n    max-width: 100%;\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    margin-bottom: var(--panneau-space-2);\n}\n\n.heading {\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-bold);\n    text-transform: capitalize;\n}\n\n.grid {\n    border-collapse: collapse;\n}\n\n.weekday {\n    padding-bottom: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n}\n\n.cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-calendar-cell-size, 2.25rem);\n    height: var(--panneau-calendar-cell-size, 2.25rem);\n    font-size: var(--panneau-font-size-md);\n    font-variant-numeric: var(--panneau-font-numeric);\n    cursor: pointer;\n    border-radius: var(--panneau-calendar-cell-radius, var(--panneau-radius-md));\n    outline: none;\n}\n\n.cell[data-outside-month] {\n    display: none;\n}\n\n.cell[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.cell[data-selected] {\n    color: var(--panneau-calendar-selected-color, var(--panneau-color-accent-text));\n    background-color: var(--panneau-calendar-selected-bg, var(--panneau-color-accent));\n}\n\n.cell[data-today]:not([data-selected]) {\n    font-weight: var(--panneau-font-weight-bold);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-border-control);\n}\n\n.cell[data-disabled],\n.cell[data-unavailable] {\n    cursor: not-allowed;\n    opacity: 0.4;\n}\n\n.cell[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.time {\n    margin-top: var(--panneau-space-3);\n    padding-top: var(--panneau-space-3);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n"],"mappings":""}

package/dist/dialog/Dialog.css

@@ -34,6 +34,10 @@
     max-width: var(--panneau-dialog-width-lg, 48rem);
 }
 
+.panneau-dialog-xl {
+    max-width: var(--panneau-dialog-width-xl, 72rem);
+}
+
 .panneau-dialog-modal[data-entering] {
     animation: panneau-dialog-rise var(--panneau-duration) ease-out;
 }
@@ -58,8 +62,16 @@
         var(--panneau-dialog-padding-x, var(--panneau-space-5));
 }
 
+.panneau-dialog-header-content {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+}
+
 .panneau-dialog-title {
-    flex: 1 1 auto;
+    flex: 1 1 12rem;
     min-width: 0;
     padding-top: var(--panneau-space-1);
     font-size: var(--panneau-dialog-title-font-size, var(--panneau-font-size-lg));
@@ -96,7 +108,8 @@
 
     .panneau-dialog-modal,
     .panneau-dialog-sm,
-    .panneau-dialog-lg {
+    .panneau-dialog-lg,
+    .panneau-dialog-xl {
         max-width: none;
         max-height: calc(100dvh - var(--panneau-space-8));
     }
@@ -107,6 +120,27 @@
         padding-bottom: env(safe-area-inset-bottom);
     }
 
+    /* The whole screen, under the notch. */
+    .panneau-dialog-full-screen-on-phone {
+        height: 100dvh;
+        max-height: 100dvh;
+    }
+
+    .panneau-dialog-full-screen-on-phone .panneau-dialog {
+        border-radius: 0;
+        padding-top: env(safe-area-inset-top);
+    }
+
+    /* The header's content goes under the title and the close button. */
+    .panneau-dialog-header {
+        flex-wrap: wrap;
+    }
+
+    .panneau-dialog-header-content {
+        flex: 1 1 100%;
+        order: 1;
+    }
+
     .panneau-dialog-footer {
         flex-direction: column-reverse;
     }