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

package/README.md

@@ -290,11 +290,64 @@ The theme model is described in [decision 0024](../../docs/decisions/0024-theme-
 
 ## Primitives
 
-`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
+`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Slider`, `TagsInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `PillTrigger`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
 
 - Every component accepts `className`, and `xxxClassName` props for its inner elements (`labelClassName`, `inputClassName`…).
 - Labelled controls take `label`, `description` and `errors` (a list of messages: any message makes the control invalid and describes it).
-- They work on phones: larger touch targets on touch screens, dialogs as bottom sheets, scrolling tabs.
+- They work on phones: larger touch targets on touch screens, dialogs as bottom sheets (or the whole screen, with `fullScreenOnPhone`), scrolling tabs.
+
+### Rich choices
+
+Picking one item among a few rich ones, such as an account (an avatar, a name, a handle), a plan or a template, takes a menu or radio cards.
+
+- **`Menu`** groups its items in `MenuSection`s, whose `title` is a small muted eyebrow that labels the group, and takes a `footer`: a short note under the items, after a line, which describes the menu and can't be focused. With `selectionMode` (`single` or `multiple`) and `selectedKeys`, its items are radio or checkbox items, and the selected ones have a check at their end and a sunken background.
+- **`MenuItem`** takes a leading `media` (an avatar or an image) instead of an `icon`: larger when the item has a `description`, and clipped to a circle by default (`--panneau-menu-media-radius`).
+- **`PillTrigger`** is a compact rounded button that shows the current value, with an optional leading `media` and a chevron, for a `MenuTrigger` or a `PopoverTrigger`. Its accessible name is its value: give it an `aria-label` that contains the value when the value alone doesn't say what it picks.
+
+```tsx
+<MenuTrigger>
+    <PillTrigger size="sm" media={<Avatar user={account} />}>
+        {account.name}
+    </PillTrigger>
+    <Menu
+        aria-label="Accounts"
+        selectionMode="single"
+        selectedKeys={[account.id]}
+        onSelectionChange={(keys) => keys !== 'all' && onChange([...keys][0])}
+        footer="Only this step changes."
+    >
+        <MenuSection title="Publish on">
+            {accounts.map((item) => (
+                <MenuItem
+                    key={item.id}
+                    id={item.id}
+                    media={<Avatar user={item} />}
+                    description={item.handle}
+                >
+                    {item.name}
+                </MenuItem>
+            ))}
+        </MenuSection>
+    </Menu>
+</MenuTrigger>
+```
+
+- **`RadioGroup`** with `appearance="cards"` shows its options as bordered cards in a grid of `columns` (2 by default): each card has the radio, the option's `media`, its label and its description, and the selected card has a stronger border. The grid is a size container of its own, and becomes a single column when it is narrower than 28rem. Keyboard and focus work as in a list of radios.
+
+```tsx
+<RadioGroup
+    label="Publish on"
+    appearance="cards"
+    options={accounts.map((item) => ({
+        value: item.id,
+        label: item.name,
+        description: item.handle,
+        media: <Avatar user={item} />,
+    }))}
+    value={accountId}
+    onChange={setAccountId}
+/>
+```
 
 ## Icons
 

package/dist/command-palette/CommandPalette.css

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

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type CommandPaletteGroup } from './match';
+export interface CommandPaletteProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * The groups of items. The palette matches them with the query itself, except groups that
+     * are already `matched`, such as results of a server, which come after the others.
+     */
+    groups: readonly CommandPaletteGroup[];
+    /** The query, controlled: to search a server with it. Empty each time the palette opens. */
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    /** Accessible name of the palette and its field. Defaults to "Search". */
+    'aria-label'?: string;
+    placeholder?: string;
+    /** A line under the results, and in place of them when there are none: loading or failed
+     * results of a server, a query too short to search. */
+    status?: ReactNode;
+    /**
+     * What the search is narrowed to, such as one resource, shown as a chip before the field.
+     * Backspace in the empty field, or the chip's button, calls `onScopeRemove`.
+     */
+    scope?: string | null;
+    onScopeRemove?: () => void;
+    className?: string;
+}
+/**
+ * A command palette: a search field over groups of items to go to or run, in a dialog near the top
+ * of the screen. Typing matches the items without case or accents, every word having to match,
+ * the best matches first. Arrow keys move through the items, Enter opens one and closes the
+ * palette, Escape clears the field, then closes it. A `scope` narrows what it searches, as a chip
+ * before the field. It knows no data or router: links go through
+ * the app's `RouterProvider`. `useCommandShortcut()` opens it with ⌘K or Ctrl+K.
+ */
+export declare function CommandPalette({ isOpen, onOpenChange, groups, inputValue: controlledValue, onInputChange, 'aria-label': ariaLabel, placeholder, status, scope, onScopeRemove, className, }: CommandPaletteProps): import("react").JSX.Element | null;
+//# sourceMappingURL=CommandPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/command-palette/CommandPalette.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAuBjD,OAAO,EAAE,KAAK,mBAAmB,EAAiB,MAAM,SAAS,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,MAAM,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACvC,4FAA4F;IAC5F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;2DACuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,YAAY,EACZ,MAAM,EACN,UAAU,EAAE,eAAe,EAC3B,aAAa,EACb,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,MAAM,EACN,KAAY,EACZ,aAAa,EACb,SAAS,GACZ,EAAE,mBAAmB,sCA2KrB"}

package/dist/command-palette/CommandPalette.js

@@ -0,0 +1,194 @@
+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 { usePortalContainer } from "../root/PanneauRoot.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import CommandPalette_module_default from "./CommandPalette.module.js";
+import { matchCommands } from "./match.js";
+import { ArrowDownUp, CornerDownLeft, Search, X } from "lucide-react";
+import { Autocomplete, Button, Dialog, Header, Input, Menu, MenuItem, MenuSection, Modal, ModalOverlay, SearchField, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/command-palette/CommandPalette.tsx
+/**
+* A command palette: a search field over groups of items to go to or run, in a dialog near the top
+* of the screen. Typing matches the items without case or accents, every word having to match,
+* the best matches first. Arrow keys move through the items, Enter opens one and closes the
+* palette, Escape clears the field, then closes it. A `scope` narrows what it searches, as a chip
+* before the field. It knows no data or router: links go through
+* the app's `RouterProvider`. `useCommandShortcut()` opens it with ⌘K or Ctrl+K.
+*/
+function CommandPalette({ isOpen, onOpenChange, groups, inputValue: controlledValue, onInputChange, "aria-label": ariaLabel, placeholder, status, scope = null, onScopeRemove, className }) {
+	const intl = usePanneauIntl();
+	const container = usePortalContainer();
+	const [uncontrolledValue, setUncontrolledValue] = useState("");
+	const value = controlledValue ?? uncontrolledValue;
+	const setValue = (next) => {
+		setUncontrolledValue(next);
+		onInputChange?.(next);
+	};
+	const label = ariaLabel ?? intl.formatMessage(messages.commandPalette);
+	const visible = matchCommands(groups, value, intl.locale);
+	const count = visible.reduce((total, group) => total + group.items.length, 0);
+	const changeOpen = (open) => {
+		if (!open) setValue("");
+		onOpenChange(open);
+	};
+	if (container === null) return null;
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		isOpen,
+		onOpenChange: changeOpen,
+		isDismissable: true,
+		className: CommandPalette_module_default.overlay,
+		UNSTABLE_portalContainer: container,
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: CommandPalette_module_default.modal,
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				"aria-label": label,
+				className: cx("panneau-command-palette", CommandPalette_module_default.dialog, className),
+				children: [/* @__PURE__ */ jsxs(Autocomplete, {
+					inputValue: value,
+					onInputChange: setValue,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: CommandPalette_module_default.field,
+						children: [/* @__PURE__ */ jsxs(SearchField, {
+							"aria-label": scope !== null ? `${label}: ${scope}` : label,
+							autoFocus: true,
+							className: CommandPalette_module_default.search,
+							children: [
+								/* @__PURE__ */ jsx(Icon, {
+									icon: Search,
+									size: "md",
+									className: CommandPalette_module_default.fieldIcon
+								}),
+								scope !== null ? /* @__PURE__ */ jsxs("span", {
+									className: CommandPalette_module_default.scope,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: CommandPalette_module_default.scopeLabel,
+										children: scope
+									}), /* @__PURE__ */ jsx(Button, {
+										"aria-label": intl.formatMessage(messages.commandRemoveScope, { scope }),
+										className: CommandPalette_module_default.scopeRemove,
+										onPress: onScopeRemove,
+										children: /* @__PURE__ */ jsx(Icon, {
+											icon: X,
+											size: "xs"
+										})
+									})]
+								}) : null,
+								/* @__PURE__ */ jsx(Input, {
+									placeholder: placeholder ?? label,
+									className: CommandPalette_module_default.input,
+									onKeyDown: (event) => {
+										if (event.key === "Backspace" && value === "" && scope !== null) {
+											event.preventDefault();
+											onScopeRemove?.();
+										}
+									}
+								})
+							]
+						}), /* @__PURE__ */ jsx(IconButton, {
+							icon: X,
+							label: intl.formatMessage(messages.close),
+							size: "sm",
+							showTooltip: false,
+							className: CommandPalette_module_default.close,
+							onPress: () => changeOpen(false)
+						})]
+					}), /* @__PURE__ */ jsx(Menu, {
+						"aria-label": label,
+						className: CommandPalette_module_default.list,
+						renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+							className: CommandPalette_module_default.empty,
+							children: status ?? intl.formatMessage(messages.commandResults, { count: 0 })
+						}),
+						children: visible.map((group_0) => /* @__PURE__ */ jsxs(MenuSection, {
+							id: group_0.id,
+							className: CommandPalette_module_default.group,
+							children: [/* @__PURE__ */ jsx(Header, {
+								className: CommandPalette_module_default.groupLabel,
+								children: group_0.label
+							}), group_0.items.map((item) => /* @__PURE__ */ jsxs(MenuItem, {
+								id: `${group_0.id}:${item.id}`,
+								textValue: item.label,
+								href: item.href,
+								onAction: () => {
+									item.onAction?.();
+									if (item.keepsOpen !== true) changeOpen(false);
+								},
+								className: CommandPalette_module_default.item,
+								children: [item.imageUrl !== void 0 ? /* @__PURE__ */ jsx("img", {
+									src: item.imageUrl,
+									alt: "",
+									className: CommandPalette_module_default.image
+								}) : /* @__PURE__ */ jsx("span", {
+									className: CommandPalette_module_default.icon,
+									"aria-hidden": "true",
+									children: item.icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+										icon: item.icon,
+										size: "md"
+									}) : null
+								}), /* @__PURE__ */ jsxs("span", {
+									className: CommandPalette_module_default.text,
+									children: [/* @__PURE__ */ jsx(Text, {
+										slot: "label",
+										className: CommandPalette_module_default.label,
+										children: item.label
+									}), item.description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+										slot: "description",
+										className: CommandPalette_module_default.description,
+										children: item.description
+									}) : null]
+								})]
+							}, item.id))]
+						}, group_0.id))
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: CommandPalette_module_default.footer,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: CommandPalette_module_default.status,
+						role: "status",
+						children: status ?? intl.formatMessage(messages.commandResults, { count })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: CommandPalette_module_default.hints,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: CommandPalette_module_default.hint,
+								children: [/* @__PURE__ */ jsx("kbd", {
+									className: CommandPalette_module_default.key,
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: ArrowDownUp,
+										size: "xs"
+									})
+								}), intl.formatMessage(messages.commandHintMove)]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: CommandPalette_module_default.hint,
+								children: [/* @__PURE__ */ jsx("kbd", {
+									className: CommandPalette_module_default.key,
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: CornerDownLeft,
+										size: "xs"
+									})
+								}), intl.formatMessage(messages.commandHintOpen)]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: CommandPalette_module_default.hint,
+								children: [/* @__PURE__ */ jsx("kbd", {
+									className: CommandPalette_module_default.key,
+									children: "esc"
+								}), intl.formatMessage(messages.commandHintClose)]
+							})
+						]
+					})]
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { CommandPalette };
+
+//# sourceMappingURL=CommandPalette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","names":["group","styles"],"sources":["../../src/command-palette/CommandPalette.tsx"],"sourcesContent":["import { ArrowDownUp, CornerDownLeft, Search, X } from 'lucide-react';\nimport { type ReactNode, useState } from 'react';\nimport {\n    Autocomplete,\n    Button,\n    Dialog,\n    Header,\n    Input,\n    Menu,\n    MenuItem,\n    MenuSection,\n    Modal,\n    ModalOverlay,\n    SearchField,\n    Text,\n} from 'react-aria-components';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './CommandPalette.module.css';\nimport { type CommandPaletteGroup, matchCommands } from './match';\n\nexport interface CommandPaletteProps {\n    isOpen: boolean;\n    onOpenChange: (isOpen: boolean) => void;\n    /**\n     * The groups of items. The palette matches them with the query itself, except groups that\n     * are already `matched`, such as results of a server, which come after the others.\n     */\n    groups: readonly CommandPaletteGroup[];\n    /** The query, controlled: to search a server with it. Empty each time the palette opens. */\n    inputValue?: string;\n    onInputChange?: (value: string) => void;\n    /** Accessible name of the palette and its field. Defaults to \"Search\". */\n    'aria-label'?: string;\n    placeholder?: string;\n    /** A line under the results, and in place of them when there are none: loading or failed\n     * results of a server, a query too short to search. */\n    status?: ReactNode;\n    /**\n     * What the search is narrowed to, such as one resource, shown as a chip before the field.\n     * Backspace in the empty field, or the chip's button, calls `onScopeRemove`.\n     */\n    scope?: string | null;\n    onScopeRemove?: () => void;\n    className?: string;\n}\n\n/**\n * A command palette: a search field over groups of items to go to or run, in a dialog near the top\n * of the screen. Typing matches the items without case or accents, every word having to match,\n * the best matches first. Arrow keys move through the items, Enter opens one and closes the\n * palette, Escape clears the field, then closes it. A `scope` narrows what it searches, as a chip\n * before the field. It knows no data or router: links go through\n * the app's `RouterProvider`. `useCommandShortcut()` opens it with ⌘K or Ctrl+K.\n */\nexport function CommandPalette({\n    isOpen,\n    onOpenChange,\n    groups,\n    inputValue: controlledValue,\n    onInputChange,\n    'aria-label': ariaLabel,\n    placeholder,\n    status,\n    scope = null,\n    onScopeRemove,\n    className,\n}: CommandPaletteProps) {\n    const intl = usePanneauIntl();\n    const container = usePortalContainer();\n    const [uncontrolledValue, setUncontrolledValue] = useState('');\n    const value = controlledValue ?? uncontrolledValue;\n    const setValue = (next: string) => {\n        setUncontrolledValue(next);\n        onInputChange?.(next);\n    };\n    const label = ariaLabel ?? intl.formatMessage(messages.commandPalette);\n    const visible = matchCommands(groups, value, intl.locale);\n    const count = visible.reduce((total, group) => total + group.items.length, 0);\n\n    const changeOpen = (open: boolean) => {\n        if (!open) {\n            setValue('');\n        }\n        onOpenChange(open);\n    };\n\n    if (container === null) {\n        return null;\n    }\n    return (\n        <ModalOverlay\n            isOpen={isOpen}\n            onOpenChange={changeOpen}\n            isDismissable\n            className={styles.overlay}\n            UNSTABLE_portalContainer={container}\n        >\n            <Modal className={styles.modal}>\n                <Dialog\n                    aria-label={label}\n                    className={cx('panneau-command-palette', styles.dialog, className)}\n                >\n                    <Autocomplete inputValue={value} onInputChange={setValue}>\n                        <div className={styles.field}>\n                            <SearchField\n                                aria-label={scope !== null ? `${label}: ${scope}` : label}\n                                autoFocus\n                                className={styles.search}\n                            >\n                                <Icon icon={Search} size=\"md\" className={styles.fieldIcon} />\n                                {scope !== null ? (\n                                    <span className={styles.scope}>\n                                        <span className={styles.scopeLabel}>{scope}</span>\n                                        <Button\n                                            aria-label={intl.formatMessage(\n                                                messages.commandRemoveScope,\n                                                { scope },\n                                            )}\n                                            className={styles.scopeRemove}\n                                            onPress={onScopeRemove}\n                                        >\n                                            <Icon icon={X} size=\"xs\" />\n                                        </Button>\n                                    </span>\n                                ) : null}\n                                <Input\n                                    placeholder={placeholder ?? label}\n                                    className={styles.input}\n                                    onKeyDown={(event) => {\n                                        if (\n                                            event.key === 'Backspace' &&\n                                            value === '' &&\n                                            scope !== null\n                                        ) {\n                                            event.preventDefault();\n                                            onScopeRemove?.();\n                                        }\n                                    }}\n                                />\n                            </SearchField>\n                            {/* Touch screens have no Escape key. */}\n                            <IconButton\n                                icon={X}\n                                label={intl.formatMessage(messages.close)}\n                                size=\"sm\"\n                                showTooltip={false}\n                                className={styles.close}\n                                onPress={() => changeOpen(false)}\n                            />\n                        </div>\n                        <Menu\n                            aria-label={label}\n                            className={styles.list}\n                            // Without results, the status says why: loading, failed, too short…\n                            renderEmptyState={() => (\n                                <p className={styles.empty}>\n                                    {status ??\n                                        intl.formatMessage(messages.commandResults, { count: 0 })}\n                                </p>\n                            )}\n                        >\n                            {visible.map((group) => (\n                                <MenuSection key={group.id} id={group.id} className={styles.group}>\n                                    <Header className={styles.groupLabel}>{group.label}</Header>\n                                    {group.items.map((item) => (\n                                        <MenuItem\n                                            key={item.id}\n                                            id={`${group.id}:${item.id}`}\n                                            textValue={item.label}\n                                            href={item.href}\n                                            onAction={() => {\n                                                item.onAction?.();\n                                                if (item.keepsOpen !== true) {\n                                                    changeOpen(false);\n                                                }\n                                            }}\n                                            className={styles.item}\n                                        >\n                                            {item.imageUrl !== undefined ? (\n                                                <img\n                                                    src={item.imageUrl}\n                                                    alt=\"\"\n                                                    className={styles.image}\n                                                />\n                                            ) : (\n                                                <span className={styles.icon} aria-hidden=\"true\">\n                                                    {item.icon !== undefined ? (\n                                                        <Icon icon={item.icon} size=\"md\" />\n                                                    ) : null}\n                                                </span>\n                                            )}\n                                            <span className={styles.text}>\n                                                <Text slot=\"label\" className={styles.label}>\n                                                    {item.label}\n                                                </Text>\n                                                {item.description !== undefined ? (\n                                                    <Text\n                                                        slot=\"description\"\n                                                        className={styles.description}\n                                                    >\n                                                        {item.description}\n                                                    </Text>\n                                                ) : null}\n                                            </span>\n                                        </MenuItem>\n                                    ))}\n                                </MenuSection>\n                            ))}\n                        </Menu>\n                    </Autocomplete>\n                    <div className={styles.footer}>\n                        <span className={styles.status} role=\"status\">\n                            {status ?? intl.formatMessage(messages.commandResults, { count })}\n                        </span>\n                        <span className={styles.hints} aria-hidden=\"true\">\n                            <span className={styles.hint}>\n                                <kbd className={styles.key}>\n                                    <Icon icon={ArrowDownUp} size=\"xs\" />\n                                </kbd>\n                                {intl.formatMessage(messages.commandHintMove)}\n                            </span>\n                            <span className={styles.hint}>\n                                <kbd className={styles.key}>\n                                    <Icon icon={CornerDownLeft} size=\"xs\" />\n                                </kbd>\n                                {intl.formatMessage(messages.commandHintOpen)}\n                            </span>\n                            <span className={styles.hint}>\n                                <kbd className={styles.key}>esc</kbd>\n                                {intl.formatMessage(messages.commandHintClose)}\n                            </span>\n                        </span>\n                    </div>\n                </Dialog>\n            </Modal>\n        </ModalOverlay>\n    );\n}\n"],"mappings":"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"}