@enigmax/primitives 0.21.0 → 0.23.0

package/dist/react/select.d.ts

@@ -0,0 +1,217 @@
+import { ReactNode, RefObject, CSSProperties, ComponentPropsWithoutRef } from 'react';
+import { c as SelectOption, a as SelectInstance, e as SelectState, d as SelectOptions } from '../select-ClSy-J1f.js';
+export { S as SELECT_SEARCH_KEYS, b as SelectMoveKey, f as createSelect } from '../select-ClSy-J1f.js';
+import '../search-DYgqRp37.js';
+
+/**
+ * One option, as React draws it. The core carries `icon` as `unknown` because it cannot
+ * know what a node is; here it is one.
+ */
+interface SelectItem extends SelectOption {
+    icon?: ReactNode;
+}
+interface SelectContextValue {
+    instance: SelectInstance;
+    state: SelectState;
+    /** Open or close the panel. React owns that flag; the instance follows it. */
+    setOpen: (open: boolean) => void;
+    disabled: boolean;
+    /** Whether the trigger offers a × that empties the selection. */
+    clearable: boolean;
+    searchable: boolean;
+    /**
+     * There is nothing to choose from at all - not a filter that matched nothing, an option
+     * list that is empty. The trigger says so and refuses to open, because a panel holding one
+     * line of apology is worse than a control that reads as unavailable.
+     */
+    empty: boolean;
+    /** The options have not arrived yet, which is a different thing from there being none. */
+    loading: boolean;
+    emptyLabel: ReactNode;
+    loadingLabel: ReactNode;
+    /** ids the parts need to point at each other. */
+    ids: {
+        trigger: string;
+        list: string;
+        field: string;
+    };
+    optionId: (index: number) => string;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    fieldRef: RefObject<HTMLInputElement | null>;
+    /** Close and put focus back where it came from - the trigger, always. */
+    close: () => void;
+    /** The keys the list answers to, shared by the trigger and the search field. */
+    onListKeyDown: (event: React.KeyboardEvent) => void;
+}
+declare function useSelectContext(part: string): SelectContextValue;
+
+interface SelectRootBase extends Omit<SelectOptions, "options" | "value" | "onValueChange" | "onChange" | "multiple" | "searchable"> {
+    options: SelectItem[];
+    /** `"auto"` (the default) puts a filter on a list of eight or more. */
+    searchable?: boolean | "auto";
+    disabled?: boolean;
+    /**
+     * Submit with a plain HTML form: a hidden input per chosen value, so the select works
+     * in a form that posts, not only in one wired to state.
+     */
+    name?: string;
+    required?: boolean;
+    /** Controlled panel. Omit both for a panel that manages itself. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * A × that empties the selection. It takes the caret's place while the pointer is on
+     * the control - see the trigger below for why it is not a second glyph beside it.
+     * Default: on when many values are allowed.
+     */
+    clearable?: boolean;
+    /**
+     * The options have not arrived yet. Distinct from having none: a select that is still
+     * loading and one that will never have anything look identical otherwise, and only one of
+     * them is worth waiting for.
+     */
+    loading?: boolean;
+    /** What the trigger says with no options at all. */
+    emptyLabel?: ReactNode;
+    loadingLabel?: ReactNode;
+    /** Inject the baseline stylesheet. See the note above. */
+    styles?: boolean;
+    /**
+     * On the ROOT, which is the element with a size: the trigger fills it, so this is what
+     * a `width` belongs on. `triggerProps.className` dresses the button itself.
+     */
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** One value: `value` is a string, and so is what the change reports. */
+interface SelectSingleProps extends SelectRootBase {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string, option: SelectItem | null) => void;
+}
+/** Many values: everything that was one string is a list, checked by the compiler. */
+interface SelectMultipleProps extends SelectRootBase {
+    multiple: true;
+    value?: string[] | null;
+    defaultValue?: string[] | null;
+    onValueChange?: (value: string[], options: SelectItem[]) => void;
+}
+type SelectRootProps = SelectSingleProps | SelectMultipleProps;
+declare function SelectRoot(props: SelectRootProps): ReactNode;
+interface SelectTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> {
+    /** Put the behaviour on your own element instead of ours. */
+    asChild?: boolean;
+    /**
+     * Draw the caret, and the clear × in its place. On by default, and never through a slot:
+     * the child owns its own markup there.
+     */
+    indicator?: boolean;
+}
+declare function SelectTrigger({ asChild, indicator, children, onClick, onKeyDown, ...props }: SelectTriggerProps): ReactNode;
+interface SelectValueProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    placeholder?: ReactNode;
+    /**
+     * Show each chosen option as a removable tag. On by default when many values are
+     * allowed, because a comma-separated line of eight labels is not something you can
+     * take one item out of.
+     */
+    tags?: boolean;
+    /** How many tags before the rest collapse into "+N". */
+    maxTags?: number;
+    /** Draw the value yourself, from what is chosen. */
+    children?: ReactNode | ((selected: SelectItem[]) => ReactNode);
+}
+declare function SelectValue({ placeholder, tags, maxTags, children, ...props }: SelectValueProps): ReactNode;
+interface SelectContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Keep the panel mounted while it animates out. ms. */
+    closeDuration?: number;
+}
+declare function SelectContent({ closeDuration, children, ...props }: SelectContentProps): ReactNode;
+interface SelectSearchProps extends Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange" | "type"> {
+    placeholder?: string;
+}
+declare function SelectSearch({ placeholder, onKeyDown, ...props }: SelectSearchProps): ReactNode;
+interface SelectListProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Render one option. Default: icon, label, description and the check. */
+    children?: (option: SelectItem, index: number) => ReactNode;
+    /** What to show when the filter matches nothing. */
+    empty?: ReactNode;
+    /**
+     * How many rows to put in the document at once. The rest arrive a chunk at a time as
+     * the list is scrolled - see the note below. `Infinity` renders the lot.
+     */
+    chunk?: number;
+}
+declare function SelectList({ children, empty, chunk, ...props }: SelectListProps): ReactNode;
+interface SelectOptionProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    option: SelectItem;
+    /** Its position in the FLAT list, which is what the keyboard moves through. */
+    index: number;
+    children?: ReactNode;
+}
+declare function SelectOptionRow({ option, index, children, ...props }: SelectOptionProps): ReactNode;
+
+/**
+ * The select's baseline look.
+ *
+ * A string rather than a stylesheet because `<Select.Root>` injects it - see the note in
+ * root.tsx for why this one component ships a look at all. `scripts/sync-recipes.mjs`
+ * generates `recipes/select/styles.css` from here, and CI fails when the two drift, so this
+ * module is the source and the `.css` is a copy for anyone who prefers the import.
+ *
+ * Everything below is either a custom property or an attribute selector: override the
+ * properties on `:root` for a different-looking select without writing one selector, and
+ * override a selector for the rest. The sheet is PREPENDED to `<head>`, so anything the
+ * document already has wins on source order at equal specificity.
+ */
+declare const SELECT_STYLES = "\n:root {\n    --enigma-select-bg: #171717;\n    --enigma-select-border: #404040;\n    --enigma-select-border-focus: #a3a3a3;\n    --enigma-select-text: #f5f5f5;\n    --enigma-select-muted: #a3a3a3;\n    --enigma-select-radius: 0.5rem;\n    --enigma-select-font-size: 0.875rem;\n    --enigma-select-padding: 0.5rem 0.75rem;\n\n    --enigma-select-panel-bg: #1c1c1c;\n    --enigma-select-panel-border: #333333;\n    --enigma-select-panel-radius: 0.625rem;\n    --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);\n    --enigma-select-panel-width: 100%;\n    --enigma-select-list-height: 15rem;\n\n    --enigma-select-active-bg: #2a2a2a;\n    --enigma-select-accent: #fbbf24;\n    --enigma-select-tag-bg: #2a2a2a;\n}\n\n@media (prefers-color-scheme: light) {\n    :root {\n        --enigma-select-bg: #ffffff;\n        --enigma-select-border: #d4d4d4;\n        --enigma-select-border-focus: #737373;\n        --enigma-select-text: #171717;\n        --enigma-select-muted: #737373;\n        --enigma-select-panel-bg: #ffffff;\n        --enigma-select-panel-border: #e5e5e5;\n        --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n        --enigma-select-active-bg: #f5f5f5;\n        --enigma-select-accent: #b45309;\n        --enigma-select-tag-bg: #f0f0f0;\n    }\n}\n\n[data-enigma-select-root] { position: relative; display: inline-block; min-width: 0; }\n\n[data-enigma-select-trigger] {\n    display: flex; align-items: center; gap: 0.5rem;\n    width: 100%; min-width: 0; box-sizing: border-box;\n    padding: var(--enigma-select-padding);\n    font: inherit; font-size: var(--enigma-select-font-size); text-align: left;\n    color: var(--enigma-select-text); background: var(--enigma-select-bg);\n    border: 1px solid var(--enigma-select-border); border-radius: var(--enigma-select-radius);\n    cursor: pointer;\n}\n[data-enigma-select-trigger]:focus-visible { outline: 2px solid var(--enigma-select-border-focus); outline-offset: 1px; }\n[data-enigma-select-trigger][data-open] { border-color: var(--enigma-select-border-focus); }\n[data-enigma-select-trigger]:disabled,\n[data-enigma-select-trigger][aria-disabled=\"true\"] { opacity: 0.5; cursor: not-allowed; }\n/* Nothing to choose, or nothing yet: the control reads as unavailable and the caret fades,\n   because a caret at full strength promises a panel that will never open. Not the disabled\n   look, which would say the field is off rather than that the list is empty. */\n[data-enigma-select-trigger][data-empty],\n[data-enigma-select-trigger][data-loading] { opacity: 1; cursor: default; }\n[data-enigma-select-trigger][data-empty] [data-enigma-select-caret],\n[data-enigma-select-trigger][data-loading] [data-enigma-select-caret] { opacity: 0.25; }\n\n/* The indicator: one slot, holding the caret and the \u00D7 stacked in the same cell. Side by\n   side they would be two targets a pixel apart - one of which throws away your choice - and\n   the pair would change the trigger's width the moment a value appeared. */\n[data-enigma-select-indicator] {\n    display: grid; place-items: center; flex: none;\n    margin-left: auto; width: 1rem; height: 1rem;\n}\n[data-enigma-select-indicator] > * { grid-area: 1 / 1; }\n\n/* The caret, drawn rather than loaded: an icon font or an SVG file is a request, and this\n   is two borders. */\n[data-enigma-select-caret] {\n    width: 0.4rem; height: 0.4rem;\n    /* Decoration, and it must not be the hit target: the rotation gives it a stacking\n       context, which paints it OVER the \u00D7 sharing its cell and swallows the click. */\n    pointer-events: none;\n    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;\n    transform: translateY(-0.1rem) rotate(45deg);\n    opacity: 0.6; transition: transform 120ms ease-out, opacity 120ms ease-out;\n}\n[data-enigma-select-trigger][data-open] [data-enigma-select-caret] { transform: translateY(0.1rem) rotate(225deg); }\n\n[data-enigma-select-value] {\n    display: flex; align-items: center; gap: 0.375rem;\n    /* min-width: 0 is what lets the ellipsis happen: a flex item's default minimum is its\n       content, so without it a long label pushes the caret out of the button. */\n    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n[data-enigma-select-value][data-placeholder] { color: var(--enigma-select-muted); }\n[data-enigma-select-value][data-tags] { flex-wrap: wrap; white-space: normal; }\n\n[data-enigma-select-tag] {\n    display: inline-flex; align-items: center; gap: 0.25rem;\n    padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n    font-size: 0.8125rem; line-height: 1.4;\n    background: var(--enigma-select-tag-bg); border-radius: 999px;\n}\n[data-enigma-select-tag][data-rest] { padding: 0.125rem 0.5rem; color: var(--enigma-select-muted); }\n\n[data-enigma-select-tag-remove] {\n    display: grid; place-items: center;\n    width: 1rem; height: 1rem; border-radius: 999px;\n    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;\n}\n[data-enigma-select-tag-remove]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }\n\n/* The \u00D7, in the caret's place and only while the control is under the pointer or holds\n   focus. \":focus\" and not \":focus-visible\": a tap focuses the button, and on a touch screen\n   there is no hover to reveal it with. */\n[data-enigma-select-clear] {\n    display: grid; place-items: center;\n    width: 1rem; height: 1rem; border-radius: 999px;\n    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;\n    opacity: 0; pointer-events: none; transition: opacity 120ms ease-out;\n}\n[data-enigma-select-trigger]:hover [data-enigma-select-clear],\n[data-enigma-select-trigger]:focus [data-enigma-select-clear] { opacity: 1; pointer-events: auto; }\n/* Scoped to a trigger that HAS a \u00D7 - otherwise hovering a select with nothing to clear\n   would hide its caret and leave an empty slot. */\n[data-enigma-select-trigger][data-clearable]:hover [data-enigma-select-caret],\n[data-enigma-select-trigger][data-clearable]:focus [data-enigma-select-caret] { opacity: 0; }\n[data-enigma-select-clear]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }\n\n[data-enigma-select-content] {\n    position: absolute; z-index: 50;\n    top: calc(100% + 0.25rem); left: 0;\n    min-width: var(--enigma-select-panel-width); box-sizing: border-box;\n    padding: 0.25rem;\n    background: var(--enigma-select-panel-bg);\n    border: 1px solid var(--enigma-select-panel-border);\n    border-radius: var(--enigma-select-panel-radius);\n    box-shadow: var(--enigma-select-panel-shadow);\n    animation: enigma-select-in 120ms ease-out;\n    /* A bound, because the content is arbitrary: a long option label or a query typed into\n       the filter would otherwise widen the panel with it. min-width still wins for a\n       trigger wider than this, which is what it is for. */\n    max-width: min(28rem, calc(100vw - 2rem));\n}\n/* Opening upwards is not a variant, it is the same panel measured against the window: near\n   the bottom of the screen the list would otherwise be unreachable. */\n[data-enigma-select-content][data-side=\"top\"] { top: auto; bottom: calc(100% + 0.25rem); }\n[data-enigma-select-content][data-state=\"closed\"] { animation: enigma-select-out 120ms ease-in forwards; pointer-events: none; }\n\n@keyframes enigma-select-in {\n    from { opacity: 0; transform: translateY(-0.25rem); }\n    to { opacity: 1; transform: none; }\n}\n@keyframes enigma-select-out {\n    from { opacity: 1; }\n    to { opacity: 0; transform: translateY(-0.125rem); }\n}\n@media (prefers-reduced-motion: reduce) {\n    [data-enigma-select-content],\n    [data-enigma-select-content][data-state=\"closed\"] { animation: none; }\n    [data-enigma-select-trigger]::after { transition: none; }\n}\n\n[data-enigma-select-search] {\n    width: 100%; box-sizing: border-box;\n    padding: 0.375rem 0.5rem 0.5rem;\n    font: inherit; font-size: var(--enigma-select-font-size);\n    color: var(--enigma-select-text); background: transparent;\n    border: 0; border-bottom: 1px solid var(--enigma-select-panel-border);\n    outline: none;\n}\n/* WebKit's own clear cross, gone: it is drawn on no other engine, so leaving it in gives\n   half the visitors a control the other half never sees. */\n[data-enigma-select-search]::-webkit-search-cancel-button,\n[data-enigma-select-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }\n\n[data-enigma-select-list] {\n    max-height: var(--enigma-select-list-height);\n    margin-top: 0.25rem;\n    overflow-y: auto; overscroll-behavior: contain;\n}\n\n[data-enigma-select-group-label] {\n    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;\n    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;\n    color: var(--enigma-select-muted);\n}\n\n[data-enigma-select-option] {\n    display: flex; align-items: center; gap: 0.5rem;\n    padding: 0.4375rem 0.5rem; border-radius: 0.375rem;\n    font-size: var(--enigma-select-font-size); color: var(--enigma-select-text);\n    cursor: pointer;\n}\n[data-enigma-select-option][data-active] { background: var(--enigma-select-active-bg); }\n[data-enigma-select-option][data-disabled] { opacity: 0.45; cursor: not-allowed; }\n\n[data-enigma-select-option-text] { display: grid; min-width: 0; }\n[data-enigma-select-option-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n[data-enigma-select-option-description] {\n    font-size: 0.75rem; color: var(--enigma-select-muted);\n    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n\n[data-enigma-select-icon] { display: inline-flex; align-items: center; flex: none; max-height: 1.25em; line-height: 0; }\n\n/* The check, drawn with two borders and shown only where it belongs. Reserved space either\n   way, so choosing a row does not shift the label under the pointer. */\n[data-enigma-select-check] {\n    flex: none; margin-left: auto;\n    width: 0.35rem; height: 0.6rem;\n    border-right: 2px solid var(--enigma-select-accent); border-bottom: 2px solid var(--enigma-select-accent);\n    transform: rotate(45deg) translate(-0.05rem, -0.05rem);\n    opacity: 0;\n}\n[data-enigma-select-option][data-selected] [data-enigma-select-check] { opacity: 1; }\n\n/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */\n[data-enigma-select-more] { height: 1px; }\n\n[data-enigma-select-empty] {\n    margin: 0; padding: 0.75rem 0.5rem;\n    font-size: var(--enigma-select-font-size); color: var(--enigma-select-muted);\n    /* The quoted query is cut in the text as well, but a pasted string with no spaces has\n       no break opportunity at all - so this is what stops it stretching the panel. */\n    overflow-wrap: anywhere;\n}\n";
+
+type SelectProps = SelectRootProps & {
+    /** What the trigger says with nothing chosen. */
+    placeholder?: ReactNode;
+    searchPlaceholder?: string;
+    /** Removable tags instead of a comma-separated line. Default: on when `multiple`. */
+    tags?: boolean;
+    maxTags?: number;
+    /** Shown when the filter matches nothing. */
+    empty?: ReactNode;
+    /** Draw a row yourself: the icon, label, description and check are the default. */
+    renderOption?: SelectListProps["children"];
+    /** On the root, which is the element with a size. `triggerProps` dresses the button. */
+    className?: string;
+    triggerProps?: SelectTriggerProps;
+    contentProps?: SelectContentProps;
+};
+/**
+ * The select, assembled.
+ *
+ * ```tsx
+ * <Select
+ *     options={[{ value: "es", label: "Spain", icon: <Flag code="es" /> }]}
+ *     value={country}
+ *     onValueChange={setCountry}
+ * />
+ * ```
+ *
+ * Everything it renders is a part you can render yourself instead - see `Select.Root` for
+ * the anatomy. This is those parts in the order they belong in, not a different component.
+ *
+ * `multiple` changes the types with it: `value` and what the change reports are a list, and
+ * the compiler says so at the call site. A filter appears on its own once the list is long
+ * enough to need one, fuzzy if you hand over Fuse's constructor and plain otherwise.
+ */
+declare function Select(props: SelectProps): ReactNode;
+declare namespace Select {
+    var Root: typeof SelectRoot;
+    var Trigger: typeof SelectTrigger;
+    var Value: typeof SelectValue;
+    var Content: typeof SelectContent;
+    var Search: typeof SelectSearch;
+    var List: typeof SelectList;
+    var Option: typeof SelectOptionRow;
+}
+
+export { SELECT_STYLES, Select, SelectContent, type SelectContentProps, type SelectContextValue, SelectInstance, type SelectItem, SelectList, type SelectListProps, type SelectMultipleProps, SelectOption, type SelectOptionProps, SelectOptionRow, SelectOptions, type SelectProps, SelectRoot, type SelectRootProps, SelectSearch, type SelectSearchProps, type SelectSingleProps, SelectState, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, useSelectContext };

package/dist/react/select.js

@@ -0,0 +1,7 @@
+"use client";
+export { SELECT_STYLES, Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';
+export { SELECT_SEARCH_KEYS, createSelect } from '../chunk-NONGREXC.js';
+import '../chunk-4VUHQFAT.js';
+import '../chunk-HS3X3XCW.js';
+import '../chunk-DTWZDONY.js';
+import '../chunk-4ZPMP47J.js';

package/dist/react/selection.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import { e as SelectionOptions, d as SelectionInstance, g as SelectionState } from '../selection-B_pmzHpy.js';
+export { D as DEFAULT_SELECTION_SHORTCUTS, S as SelectionClickModifiers, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, f as SelectionShortcuts, h as createSelection } from '../selection-B_pmzHpy.js';
+export { S as Shortcut, b as ShortcutSpec, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
+
+/**
+ * The selection model as a hook, plus the props that put it on real elements.
+ *
+ * Prop getters rather than components, because a selectable list is every shape at once - a
+ * table, a grid of cards, a tree, a virtualized window - and a component that owned the markup
+ * would fit exactly one of them. `<SelectionList>` next door IS this hook with a container and
+ * rows around it, for the case where the shape is a plain list.
+ */
+interface UseSelectionOptions<Item> extends Omit<SelectionOptions<Item>, "items"> {
+    items: readonly Item[];
+    /** Bring the cursor into view when the keyboard moves it. Default: on. */
+    scrollIntoView?: boolean;
+}
+interface UseSelectionResult<Item> {
+    instance: SelectionInstance<Item>;
+    state: SelectionState<Item>;
+    /** Whether a row is selected, by id. */
+    isSelected: (id: string) => boolean;
+    /** The container: the keyboard, the roles and the id the rows point at. */
+    getListProps: <T extends HTMLElement = HTMLElement>(props?: HTMLAttributes<T>) => HTMLAttributes<T> & {
+        ref: (node: T | null) => void;
+    };
+    /** One row: its state, its id, and the click rule. */
+    getItemProps: <T extends HTMLElement = HTMLElement>(index: number, props?: HTMLAttributes<T>) => HTMLAttributes<T> & {
+        id: string;
+    };
+    /**
+     * A press on the empty space of the container, for a rubber band. Composed OVER the list
+     * props rather than beside them, so the two handlers do not overwrite each other:
+     * `<div {...getMarqueeProps(getListProps())}>`.
+     */
+    getMarqueeProps: <T extends HTMLElement = HTMLElement>(props?: HTMLAttributes<T>) => HTMLAttributes<T>;
+    /** The rubber band's rectangle while it is being dragged, in container coordinates. */
+    marquee: MarqueeRect | null;
+    ids: {
+        list: string;
+    };
+    itemId: (index: number) => string;
+}
+/** A rubber band, in coordinates relative to the scrolling container's content. */
+interface MarqueeRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+declare function useSelection<Item>(options: UseSelectionOptions<Item>): UseSelectionResult<Item>;
+/** What a row renderer is handed. Everything it needs to draw one row and nothing else. */
+interface SelectionRowRender<Item> {
+    item: Item;
+    index: number;
+    selected: boolean;
+    cursor: boolean;
+    disabled: boolean;
+}
+type SelectionRenderer<Item> = (row: SelectionRowRender<Item>) => ReactNode;
+
+/**
+ * `onChange` is dropped from BOTH sides on purpose: the model's means "the state moved" and a
+ * div's means an input inside it changed, and one name cannot be both. The selection is
+ * reported through `onSelectionChange`, and the whole state through `useSelection`.
+ */
+interface SelectionListProps<Item> extends Omit<UseSelectionOptions<Item>, "onChange">, Omit<ComponentPropsWithoutRef<"div">, "children" | "onSelect" | "onChange"> {
+    /** Draw one row. What it returns goes inside the row element, which this component owns. */
+    children: SelectionRenderer<Item>;
+    /** Shown instead of the rows when there are none. */
+    empty?: ReactNode;
+    /** Drag a rubber band over the empty space to select what it covers. Default: on. */
+    marquee?: boolean;
+}
+/**
+ * A list whose rows can be selected the way a file manager's are.
+ *
+ * ```tsx
+ * <SelectionList
+ *     items={files}
+ *     getId={(file) => file.path}
+ *     onCommand={(event) => {
+ *         if (event.command === "delete") remove(event.items);
+ *         if (event.command === "rename") rename(event.cursor);
+ *     }}
+ * >
+ *     {({ item }) => <><FileIcon kind={item.kind} />{item.name}</>}
+ * </SelectionList>
+ * ```
+ *
+ * It renders a container and one element per row, with the roles, the ids and the state
+ * attributes on them - and nothing else. No borders, no padding, no highlight: `[data-selected]`
+ * and `[data-cursor]` are there for the stylesheet, so the list looks like the rest of the
+ * product rather than like this package.
+ *
+ * The shape is the only thing it decides. A table, a grid of cards, a tree or a virtualized
+ * window - and anything that needs to reach the model itself, to clear the selection from a
+ * toolbar or read it into a header checkbox - uses `useSelection` directly and puts the same
+ * props on its own markup. That is the same component with the markup handed back.
+ */
+declare function SelectionList<Item>(props: SelectionListProps<Item>): ReactNode;
+
+export { type MarqueeRect, SelectionInstance, SelectionList, type SelectionListProps, SelectionOptions, type SelectionRenderer, type SelectionRowRender, SelectionState, type UseSelectionOptions, type UseSelectionResult, useSelection };

package/dist/react/selection.js

@@ -0,0 +1,4 @@
+"use client";
+export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
+export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from '../chunk-WSQC3PCC.js';
+export { matchesShortcut, parseShortcut, shortcutText, shortcutTokens } from '../chunk-4VUHQFAT.js';

package/dist/react/slot.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -42,6 +42,6 @@ interface SlotProps extends Props {
  * papering over: `asChild` with two children has no answer to "which one gets the
  * behaviour", and rendering nothing would be a blank space nobody can debug.
  */
-declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Slot: React.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & React.RefAttributes<HTMLElement>>;
 
 export { Slot, type SlotProps, mergeSlotProps };

package/dist/react/toast.d.ts

@@ -1,41 +1,174 @@
-import { d as Notifications, N as Notification } from '../notifications-BpVV6sel.js';
-export { a as NotificationAction, b as NotificationInput, c as NotificationTone } from '../notifications-BpVV6sel.js';
-import { ReactNode, CSSProperties } from 'react';
+import { d as Notifications } from '../notifications-BpVV6sel.js';
+export { N as Notification, a as NotificationAction, b as NotificationInput, c as NotificationTone } from '../notifications-BpVV6sel.js';
+import React__default, { ReactNode } from 'react';
 export { createNotificationQueue, defaultQueue, useNotifications } from './notifications.js';
 
-type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-interface ToasterProps {
-    /** Which queue to render. The shared one by default. */
-    queue?: Notifications;
-    position?: ToastPosition;
+type ToastTypes = "normal" | "action" | "success" | "info" | "warning" | "error" | "loading" | "default";
+type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
+type PromiseTResult<Data = any> = string | React__default.ReactNode | ((data: Data) => React__default.ReactNode | string | Promise<React__default.ReactNode | string>);
+type PromiseExternalToast = Omit<ExternalToast, "description">;
+type PromiseData<ToastData = any> = PromiseExternalToast & {
+    loading?: string | React__default.ReactNode;
+    success?: PromiseTResult<ToastData>;
+    error?: PromiseTResult;
+    description?: PromiseTResult;
+    finally?: () => void | Promise<void>;
+};
+interface ToastClassnames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    loader?: string;
+    closeButton?: string;
+    cancelButton?: string;
+    actionButton?: string;
+    success?: string;
+    error?: string;
+    info?: string;
+    warning?: string;
+    loading?: string;
+    default?: string;
+    content?: string;
+    icon?: string;
+}
+interface ToastIcons {
+    success?: React__default.ReactNode;
+    info?: React__default.ReactNode;
+    warning?: React__default.ReactNode;
+    error?: React__default.ReactNode;
+    loading?: React__default.ReactNode;
+    close?: React__default.ReactNode;
+}
+interface Action {
+    label: React__default.ReactNode;
+    onClick: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    actionButtonStyle?: React__default.CSSProperties;
+}
+interface ToastT {
+    id: number | string;
+    title?: (() => React__default.ReactNode) | React__default.ReactNode;
+    type?: ToastTypes;
+    icon?: React__default.ReactNode;
+    jsx?: React__default.ReactNode;
+    richColors?: boolean;
+    invert?: boolean;
+    closeButton?: boolean;
+    dismissible?: boolean;
+    description?: (() => React__default.ReactNode) | React__default.ReactNode;
+    duration?: number;
+    delete?: boolean;
+    action?: Action | React__default.ReactNode;
+    cancel?: Action | React__default.ReactNode;
+    onDismiss?: (toast: ToastT) => void;
+    onAutoClose?: (toast: ToastT) => void;
+    promise?: PromiseT;
+    cancelButtonStyle?: React__default.CSSProperties;
+    actionButtonStyle?: React__default.CSSProperties;
+    style?: React__default.CSSProperties;
+    unstyled?: boolean;
+    className?: string;
+    classNames?: ToastClassnames;
+    descriptionClassName?: string;
+    position?: Position;
+}
+type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
+interface ToastOptions {
+    className?: string;
+    closeButton?: boolean;
+    descriptionClassName?: string;
+    style?: React__default.CSSProperties;
+    cancelButtonStyle?: React__default.CSSProperties;
+    actionButtonStyle?: React__default.CSSProperties;
+    duration?: number;
+    unstyled?: boolean;
+    classNames?: ToastClassnames;
+}
+type Offset = {
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+} | string | number;
+interface ToasterProps$1 {
+    invert?: boolean;
+    theme?: "light" | "dark" | "system";
+    position?: Position;
+    hotkey?: string[];
+    richColors?: boolean;
+    expand?: boolean;
+    duration?: number;
+    gap?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    toastOptions?: ToastOptions;
+    className?: string;
+    style?: React__default.CSSProperties;
+    offset?: Offset;
+    mobileOffset?: Offset;
+    dir?: "rtl" | "ltr" | "auto";
+    swipeDirections?: SwipeDirection[];
     /**
-     * How long the exit animation lasts, in ms. The node stays mounted for exactly this
-     * long after it leaves the queue - a toast that vanishes the instant it is dismissed
-     * cannot animate out, and that is the only reason this component keeps its own list.
+     * @deprecated Please use the `icons` prop instead:
+     * ```jsx
+     * <Toaster
+     *   icons={{ loading: <LoadingIcon /> }}
+     * />
+     * ```
      */
-    exitDuration?: number;
-    /** Px a toast must travel before the release dismisses it. */
-    swipeThreshold?: number;
-    /** Render a toast yourself. The default renders title, body and the action. */
-    children?: (notification: Notification, controls: ToastControls) => ReactNode;
-    /** How many toasts are drawn at once. The rest wait behind them. Default 3. */
-    visibleCount?: number;
-    /** Fan the stack out permanently, instead of only while the pointer is on it. */
-    expand?: boolean;
+    loadingIcon?: React__default.ReactNode;
+    icons?: ToastIcons;
+    containerAriaLabel?: string;
+    pauseWhenPageIsHidden?: boolean;
+}
+type SwipeDirection = "top" | "right" | "bottom" | "left";
+interface ToastToDismiss {
+    id: number | string;
+    dismiss: boolean;
+}
+type ExternalToast = Omit<ToastT, "id" | "type" | "title" | "jsx" | "delete" | "promise"> & {
+    id?: number | string;
+};
+
+type titleT = (() => React__default.ReactNode) | React__default.ReactNode;
+declare const toast: ((message: titleT, data?: ExternalToast) => string | number) & {
+    success: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+    info: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+    warning: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+    error: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+    custom: (jsx: (id: number | string) => React__default.ReactElement, data?: ExternalToast) => string | number;
+    message: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+    promise: <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData> | undefined) => (string & {
+        unwrap: () => Promise<ToastData>;
+    }) | (number & {
+        unwrap: () => Promise<ToastData>;
+    }) | {
+        unwrap: () => Promise<ToastData>;
+    } | undefined;
+    dismiss: (id?: number | string) => string | number | undefined;
+    loading: (message: titleT | React__default.ReactNode, data?: ExternalToast) => string | number;
+} & {
+    getHistory: () => (ToastT | ToastToDismiss)[];
+};
+
+declare function useSonner(): {
+    toasts: ToastT[];
+};
+
+interface ToasterProps extends ToasterProps$1 {
     /**
-     * Inject the theme. On by default - see the note above; `false` leaves the markup
-     * unstyled for your own stylesheet, and `@enigmax/primitives/toast.css` is the same
-     * sheet if you would rather import it.
+     * Inject the stylesheet. On by default - see the note above. `false` leaves the markup
+     * bare for a theme of your own.
      */
     styles?: boolean;
-    /** Accessible name for the region. */
-    label?: string;
-    className?: string;
-    style?: CSSProperties;
-}
-interface ToastControls {
-    dismiss: () => void;
+    /**
+     * A notification QUEUE to render, alongside anything raised with `toast()`.
+     *
+     * This is the bridge for `useNotifications().notify()`, which predates the vendored
+     * component: everything already written against the queue keeps working, and both APIs
+     * end up in one stack rather than in two competing ones. `null` unsubscribes.
+     */
+    queue?: Notifications | null;
 }
-declare function Toaster({ queue, position, exitDuration, swipeThreshold, visibleCount, expand, styles: withStyles, children, label, className, style }: ToasterProps): ReactNode;
+declare function Toaster({ styles, queue, ...props }: ToasterProps): ReactNode;
 
-export { Notification, Notifications, type ToastControls, type ToastPosition, Toaster, type ToasterProps };
+export { type Action, type ExternalToast, Notifications, type ToastClassnames, type ToastT, Toaster, type ToasterProps, toast, useSonner };

package/dist/react/toast.js

@@ -1,4 +1,4 @@
 "use client";
-export { Toaster } from '../chunk-JCCL7XKC.js';
+export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
 export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 import '../chunk-SNYUBXWQ.js';

package/dist/react-router/index.d.ts

@@ -1,17 +1,17 @@
-import * as react from 'react';
+import * as React from 'react';
 import { ButtonProps } from '../react/button.js';
 export { UseMarqueeResult, useMarquee } from '../react/marquee.js';
 export { M as MarqueeHover, a as MarqueeInstance, b as MarqueeOptions } from '../marquee-CJ3Uwy3E.js';
 export { PasswordStrength, PasswordStrengthProps, UseButtonResult, UseInputResult, getLinkComponent, setLinkComponent, useButton, useInput } from '../react/index.js';
 export { UseSearchResult, useSearch } from '../react/search.js';
 export { I as InputAction, b as InputIcon, d as InputOptions } from '../input-BwXjFenq.js';
-export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions } from '../search-DXxY8SEH.js';
+export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, s as shortenQuery } from '../search-DYgqRp37.js';
 export { c as ButtonOptions, d as ButtonState } from '../button-CaXaqG_K.js';
-export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-dTdAbOWl.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-DQNnohoo.js';
 export { Slot, SlotProps, mergeSlotProps } from '../react/slot.js';
 export { E as EstimateOptions, G as GeneratePasswordOptions, a as PasswordScore, b as PasswordStrengthReport, e as estimatePasswordStrength, g as generatePassword } from '../password-C8lG4Zm9.js';
 export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from '../react/notifications.js';
-export { ToastControls, ToastPosition, Toaster, ToasterProps } from '../react/toast.js';
+export { Action, ExternalToast, ToastClassnames, ToastT, Toaster, ToasterProps, toast, useSonner } from '../react/toast.js';
 export { useNetworkState } from '../react/network.js';
 export { a as NetworkState } from '../network-D2LsBG_k.js';
 export { RelativeTime, RelativeTimeProps } from '../react/relative-time.js';
@@ -21,7 +21,14 @@ export { Flag, FlagProps } from '../react/flag.js';
 export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BQU1V9rE.js';
 export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteListProps, PaletteRoot, PaletteRootProps, PaletteRow, PaletteSection, PaletteTrigger, SearchPalette, SearchPaletteProps, usePaletteContext } from '../react/palette.js';
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
+export { Select, SelectContent, SelectContextValue, SelectItem, SelectList, SelectMultipleProps, SelectOptionRow, SelectProps, SelectRoot, SelectRootProps, SelectSearch, SelectSingleProps, SelectTrigger, SelectValue, useSelectContext } from '../react/select.js';
+export { a as SelectInstance, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from '../select-ClSy-J1f.js';
+export { ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuContextValue, ContextMenuItem, ContextMenuList, ContextMenuNode, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps, useContextMenuContext } from '../react/context-menu.js';
+export { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, g as ContextMenuOptions, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-D3FtTn7v.js';
+export { MarqueeRect, SelectionList, SelectionListProps, SelectionRenderer, SelectionRowRender, UseSelectionOptions, UseSelectionResult, useSelection } from '../react/selection.js';
+export { D as DEFAULT_SELECTION_SHORTCUTS, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, d as SelectionInstance, e as SelectionOptions, f as SelectionShortcuts, g as SelectionState, h as createSelection } from '../selection-B_pmzHpy.js';
+export { S as Shortcut, b as ShortcutSpec, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
 
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
 
 export { Button, ButtonProps };