@openwarelabs/ui 0.14.0 → 0.15.0

package/README.md

@@ -58,17 +58,17 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 | Group | Components |
 | --- | --- |
-| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet`, `Prose` (styles rendered Markdown or HTML, at chat or article size) |
+| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet`, `Prose` (styles rendered Markdown or HTML, at chat or article size), `InlineEdit` (text you click to edit in place; Enter saves, Escape cancels, async saves) |
 | Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl`, `ToggleButtonGroup` (one or several on), `Toolbar` + `ToolbarSeparator` (arrow keys across its controls) |
 | Inputs | `Form` (the browser's checks, your own and the server's errors, under each field; `useFormStatus`), `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField`, `DateField` and `TimeField` (typed in segments, in the locale's order), `TagInput` (several values as tags, typed or picked from suggestions), `PasswordInput` (show and hide, a strength meter, a checklist of rules; `passwordStrength()`) |
-| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `Rating` (pick a score or show one), `ChoiceCard`, `ListBox` (one or many, on the page) |
+| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `Rating` (pick a score or show one), `ChoiceCard`, `ListBox` (one or many, on the page), `TreeView` (rows that open, select or check, with children loaded on demand) |
 | Pickers | `Calendar`, `DatePicker`, `RangeCalendar`, `DateRangePicker` (with presets), `ColorPicker`, `ColorArea`, `ColorSlider`, `ColorSwatchPicker`, `FileDropZone` |
 | Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Meter` (an amount in a range, toned by thresholds), `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip`, `Banner` (an announcement bar across the top, dismissible and remembered) |
-| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `HoverCard` (a preview when the pointer rests on a link), `Menu` + `MenuItem`, `CommandPalette`, `ContextMenu` (right-click, long press or Shift+F10, with the same items), `Tour` (steps that point at parts of the page, with an optional spotlight) + `Coachmark` |
+| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `HoverCard` (a preview when the pointer rests on a link), `Menu` + `MenuItem`, `CommandPalette`, `ContextMenu` (right-click, long press or Shift+F10, with the same items), `Tour` (steps that point at parts of the page, with an optional spotlight) + `Coachmark`, `NavigationMenu` + `NavigationMenuItem` + `NavigationMenuLink` (a site's top nav with dropdown panels and mega-menus) |
 | Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
-| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Image` (a placeholder while it loads, a fallback if it fails, `ratio`, `caption`), `Timeline` + `TimelineItem`, `DescriptionList` + `DescriptionItem`, `Carousel` + `CarouselSlide` (scroll-snap, arrows, dots, autoplay) |
+| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Image` (a placeholder while it loads, a fallback if it fails, `ratio`, `caption`), `Timeline` + `TimelineItem`, `DescriptionList` + `DescriptionItem`, `Carousel` + `CarouselSlide` (scroll-snap, arrows, dots, autoplay), `SortableList` (reorder by dragging or with the keyboard) |
 | AI | `PromptInput` (attachments, stop while streaming) + `PromptSuggestion`, `ChatConversation` (follows the newest message, jump to latest), `ChatMessage` + `ChatMessageActions`, `ChatLoader`, `ChatTool` (a tool call with its status, input, output and approval), `ChainOfThought`, `ChatSource` + `ChatSources`, `TextShimmer` |
-| Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden`, `AspectRatio`, `Splitter` + `SplitterPanel` + `SplitterHandle` (panels you resize by dragging or with the arrow keys, collapsible, remembered) |
+| Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden`, `AspectRatio`, `Splitter` + `SplitterPanel` + `SplitterHandle` (panels you resize by dragging or with the arrow keys, collapsible, remembered), `VirtualList` (renders only the rows in view, for 10,000 rows, logs and infinite feeds) |
 | Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
 
 Hooks for your own components: `useControllableState`, `useFloating` (top-layer positioning that flips), `usePresence` (keeps a layer mounted while it animates out), `useDismiss`, `useModalDialog`, `useMenuKeyboard`. Every prop is typed and described, so your editor explains it on hover.

package/dist/components/InlineEdit/InlineEdit.d.cts

@@ -0,0 +1,8 @@
+import type { InlineEditProps } from "./InlineEdit.types.cjs";
+export type { InlineEditLabels, InlineEditProps } from "./InlineEdit.types.cjs";
+/**
+ * Text that people click, or focus and press Enter, to edit where it is: a project's name, a title, a value in a
+ * settings row. Enter saves and Escape cancels; focus goes back to the text either way. `onSave` can return a Promise:
+ * the editor stays open while it runs, and shows its error if it fails.
+ */
+export declare function InlineEdit({ value, defaultValue, onSave, onCancel, label, placeholder, multiline, validate, required, maxLength, textVariant, saveOnBlur, showActions, editing, defaultEditing, onEditingChange, selectOnFocus, disabled, readOnly, labels: labelsProp, id, className, }: InlineEditProps): import("react").JSX.Element;

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,8 @@
+import type { InlineEditProps } from "./InlineEdit.types.js";
+export type { InlineEditLabels, InlineEditProps } from "./InlineEdit.types.js";
+/**
+ * Text that people click, or focus and press Enter, to edit where it is: a project's name, a title, a value in a
+ * settings row. Enter saves and Escape cancels; focus goes back to the text either way. `onSave` can return a Promise:
+ * the editor stays open while it runs, and shows its error if it fails.
+ */
+export declare function InlineEdit({ value, defaultValue, onSave, onCancel, label, placeholder, multiline, validate, required, maxLength, textVariant, saveOnBlur, showActions, editing, defaultEditing, onEditingChange, selectOnFocus, disabled, readOnly, labels: labelsProp, id, className, }: InlineEditProps): import("react").JSX.Element;

package/dist/components/InlineEdit/InlineEdit.types.d.cts

@@ -0,0 +1,74 @@
+import type { TextVariant } from "../Text/Text.cjs";
+export interface InlineEditLabels {
+    /** Names the text's button, given `label`. @default (label) => `Edit ${label.toLowerCase()}` */
+    edit?(label: string): string;
+    /** The Save button, with `showActions`. @default "Save" */
+    save?: string;
+    /** The Cancel button, with `showActions`. @default "Cancel" */
+    cancel?: string;
+    /** Read out while a slow `onSave` runs. @default "Saving" */
+    saving?: string;
+    /** Shown when a `required` value is left empty. @default "This can't be empty." */
+    required?: string;
+    /** Shown when `onSave` fails without a message of its own. @default "Couldn't save. Try again." */
+    failed?: string;
+}
+export interface InlineEditProps {
+    /** The text, when you control it. Update it in `onSave`. */
+    value?: string;
+    /** The text at first, when it keeps the text itself.
+     * @default "" */
+    defaultValue?: string;
+    /**
+     * Called with the new text when people save a change (not when they save it unchanged). Return a Promise to keep
+     * the editor open, showing that it's saving, until it settles; if it rejects or throws, its message is shown and
+     * the editor stays open to try again.
+     */
+    onSave?(value: string): void | Promise<unknown>;
+    /** Called when people cancel an edit, with Escape, the Cancel button or, without `saveOnBlur`, by leaving it. */
+    onCancel?(): void;
+    /** What the text is, such as "Project name": the editor's name, and the button's ("Edit project name"). Required. */
+    label: string;
+    /** Shown, muted, when the text is empty, and in the empty editor.
+     * @default label */
+    placeholder?: string;
+    /** Edits in a Textarea that grows with the text: Enter adds a line, and Ctrl+Enter or ⌘Enter saves.
+     * @default false */
+    multiline?: boolean;
+    /** Checks the text before it's saved; return a message to show instead of saving, or undefined when it's fine. */
+    validate?(value: string): string | undefined;
+    /** Refuses to save empty text (or only spaces), with `labels.required`.
+     * @default false */
+    required?: boolean;
+    /** The most characters it takes. */
+    maxLength?: number;
+    /** A Text style for the text and the editor, so it can be a heading or a caption. Left out, it takes the font around it. */
+    textVariant?: TextVariant;
+    /** Leaving the editor saves. When false, leaving it cancels.
+     * @default true */
+    saveOnBlur?: boolean;
+    /** Shows Save and Cancel buttons beside the editor.
+     * @default false */
+    showActions?: boolean;
+    /** Whether it's editing, when you control it. */
+    editing?: boolean;
+    /** Whether it starts out editing, when it controls that itself.
+     * @default false */
+    defaultEditing?: boolean;
+    /** Called when it starts or stops editing. */
+    onEditingChange?(editing: boolean): void;
+    /** Selects all the text when the editor opens, to type over it. Otherwise the caret goes at the end.
+     * @default false */
+    selectOnFocus?: boolean;
+    /** Shows the text dimmed, and it can't be edited or focused.
+     * @default false */
+    disabled?: boolean;
+    /** Shows the text plainly, as text, with nothing to click.
+     * @default false */
+    readOnly?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: InlineEditLabels;
+    /** The display button's id. */
+    id?: string;
+    className?: string;
+}

package/dist/components/InlineEdit/InlineEdit.types.d.ts

@@ -0,0 +1,74 @@
+import type { TextVariant } from "../Text/Text.js";
+export interface InlineEditLabels {
+    /** Names the text's button, given `label`. @default (label) => `Edit ${label.toLowerCase()}` */
+    edit?(label: string): string;
+    /** The Save button, with `showActions`. @default "Save" */
+    save?: string;
+    /** The Cancel button, with `showActions`. @default "Cancel" */
+    cancel?: string;
+    /** Read out while a slow `onSave` runs. @default "Saving" */
+    saving?: string;
+    /** Shown when a `required` value is left empty. @default "This can't be empty." */
+    required?: string;
+    /** Shown when `onSave` fails without a message of its own. @default "Couldn't save. Try again." */
+    failed?: string;
+}
+export interface InlineEditProps {
+    /** The text, when you control it. Update it in `onSave`. */
+    value?: string;
+    /** The text at first, when it keeps the text itself.
+     * @default "" */
+    defaultValue?: string;
+    /**
+     * Called with the new text when people save a change (not when they save it unchanged). Return a Promise to keep
+     * the editor open, showing that it's saving, until it settles; if it rejects or throws, its message is shown and
+     * the editor stays open to try again.
+     */
+    onSave?(value: string): void | Promise<unknown>;
+    /** Called when people cancel an edit, with Escape, the Cancel button or, without `saveOnBlur`, by leaving it. */
+    onCancel?(): void;
+    /** What the text is, such as "Project name": the editor's name, and the button's ("Edit project name"). Required. */
+    label: string;
+    /** Shown, muted, when the text is empty, and in the empty editor.
+     * @default label */
+    placeholder?: string;
+    /** Edits in a Textarea that grows with the text: Enter adds a line, and Ctrl+Enter or ⌘Enter saves.
+     * @default false */
+    multiline?: boolean;
+    /** Checks the text before it's saved; return a message to show instead of saving, or undefined when it's fine. */
+    validate?(value: string): string | undefined;
+    /** Refuses to save empty text (or only spaces), with `labels.required`.
+     * @default false */
+    required?: boolean;
+    /** The most characters it takes. */
+    maxLength?: number;
+    /** A Text style for the text and the editor, so it can be a heading or a caption. Left out, it takes the font around it. */
+    textVariant?: TextVariant;
+    /** Leaving the editor saves. When false, leaving it cancels.
+     * @default true */
+    saveOnBlur?: boolean;
+    /** Shows Save and Cancel buttons beside the editor.
+     * @default false */
+    showActions?: boolean;
+    /** Whether it's editing, when you control it. */
+    editing?: boolean;
+    /** Whether it starts out editing, when it controls that itself.
+     * @default false */
+    defaultEditing?: boolean;
+    /** Called when it starts or stops editing. */
+    onEditingChange?(editing: boolean): void;
+    /** Selects all the text when the editor opens, to type over it. Otherwise the caret goes at the end.
+     * @default false */
+    selectOnFocus?: boolean;
+    /** Shows the text dimmed, and it can't be edited or focused.
+     * @default false */
+    disabled?: boolean;
+    /** Shows the text plainly, as text, with nothing to click.
+     * @default false */
+    readOnly?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: InlineEditLabels;
+    /** The display button's id. */
+    id?: string;
+    className?: string;
+}

package/dist/components/NavigationMenu/NavigationMenu.d.cts

@@ -0,0 +1,14 @@
+import type { NavigationMenuGroupProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuProps } from "./NavigationMenu.types.cjs";
+export type { NavigationMenuGroupProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuProps } from "./NavigationMenu.types.cjs";
+/**
+ * A site's top navigation: buttons that open panels of links (with icons, descriptions and columns, up to full-width
+ * mega-menus), and plain links. It's the disclosure pattern, not a menu: each trigger is a button with aria-expanded,
+ * and its panel follows it in the Tab order.
+ */
+export declare function NavigationMenu({ label, landmark, value, defaultValue, onValueChange, panelWidth, openDelay, closeDelay, children, className, }: NavigationMenuProps): import("react").JSX.Element;
+/** A top-level item: a button that opens a panel of links, or a plain link when given an `href`. */
+export declare function NavigationMenuItem({ trigger, value, href, active, columns, width, children, className }: NavigationMenuItemProps): import("react").JSX.Element;
+/** A link in a panel, with an optional icon and a line of description. */
+export declare function NavigationMenuLink({ title, description, icon, active, featured, className, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+/** A titled column of links in a panel. */
+export declare function NavigationMenuGroup({ title, children, className }: NavigationMenuGroupProps): import("react").JSX.Element;

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,14 @@
+import type { NavigationMenuGroupProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuProps } from "./NavigationMenu.types.js";
+export type { NavigationMenuGroupProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuProps } from "./NavigationMenu.types.js";
+/**
+ * A site's top navigation: buttons that open panels of links (with icons, descriptions and columns, up to full-width
+ * mega-menus), and plain links. It's the disclosure pattern, not a menu: each trigger is a button with aria-expanded,
+ * and its panel follows it in the Tab order.
+ */
+export declare function NavigationMenu({ label, landmark, value, defaultValue, onValueChange, panelWidth, openDelay, closeDelay, children, className, }: NavigationMenuProps): import("react").JSX.Element;
+/** A top-level item: a button that opens a panel of links, or a plain link when given an `href`. */
+export declare function NavigationMenuItem({ trigger, value, href, active, columns, width, children, className }: NavigationMenuItemProps): import("react").JSX.Element;
+/** A link in a panel, with an optional icon and a line of description. */
+export declare function NavigationMenuLink({ title, description, icon, active, featured, className, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+/** A titled column of links in a panel. */
+export declare function NavigationMenuGroup({ title, children, className }: NavigationMenuGroupProps): import("react").JSX.Element;

package/dist/components/NavigationMenu/NavigationMenu.types.d.cts

@@ -0,0 +1,84 @@
+import type { AnchorHTMLAttributes, MutableRefObject, ReactNode, RefObject } from "react";
+export interface NavigationMenuProps {
+    /** Names the navigation for screen readers, such as "Main". */
+    label?: string;
+    /** Renders a `<nav>` landmark. Turn it off when it already sits in one, like SiteHeader's `nav` slot, so screen
+     * readers don't hear two.
+     * @default true */
+    landmark?: boolean;
+    /** The open item's `value`, or null when every panel is closed, when you control it. */
+    value?: string | null;
+    /** The item open at first, when it controls itself.
+     * @default null */
+    defaultValue?: string | null;
+    /** Called with the item that opens, or null when its panel closes. */
+    onValueChange?(value: string | null): void;
+    /** How wide panels are: as wide as their content (`"auto"`), or as wide as the header the menu sits in (or the
+     * menu itself, outside a header) for mega-menus (`"full"`). An item's own `width` wins.
+     * @default "auto" */
+    panelWidth?: "auto" | "full";
+    /** How long the pointer rests on a trigger before its panel opens, in milliseconds.
+     * @default 150 */
+    openDelay?: number;
+    /** How long a panel opened by hovering stays after the pointer leaves, so it can cross the gap into it.
+     * @default 300 */
+    closeDelay?: number;
+    /** The NavigationMenuItems. */
+    children: ReactNode;
+    className?: string;
+}
+export interface NavigationMenuItemProps {
+    /** The words on the top-level button, or on the link when there's an `href`. */
+    trigger: ReactNode;
+    /** Names the item for `value` and `onValueChange`. Defaults to a generated id. */
+    value?: string;
+    /** Makes it a plain top-level link instead of a button with a panel. */
+    href?: string;
+    /** Marks a plain link (or a trigger whose panel holds the current page) as where the person is. */
+    active?: boolean;
+    /** The panel's columns, side by side; they stack on narrow screens.
+     * @default 1 */
+    columns?: number;
+    /** This panel's width: pixels, any CSS width, or `"full"` to match the header. Defaults to the menu's `panelWidth`. */
+    width?: number | string;
+    /** The panel's content: NavigationMenuLinks, NavigationMenuGroups, or anything else. */
+    children?: ReactNode;
+    className?: string;
+}
+export interface NavigationMenuLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+    href: string;
+    /** The link's name. */
+    title: ReactNode;
+    /** A line under the title on what's there. */
+    description?: ReactNode;
+    /** An icon before the title, such as a lucide-react icon at size 18. */
+    icon?: ReactNode;
+    /** The page the person is on: sets aria-current="page". */
+    active?: boolean;
+    /** Shows it as a tinted card that fills its column, to feature one page in a mega-menu. */
+    featured?: boolean;
+}
+export interface NavigationMenuGroupProps {
+    /** A few words over the column, such as "Resources". */
+    title: ReactNode;
+    /** Its NavigationMenuLinks. */
+    children: ReactNode;
+    className?: string;
+}
+/** What a NavigationMenu shares with its items. Internal. */
+export interface NavigationMenuContextValue {
+    value: string | null;
+    /** Opens an item (or closes with null); `hover` marks a panel that closes again when the pointer leaves. */
+    open(value: string | null, hover?: boolean): void;
+    /** Opens an item after the open delay, or closes after the close delay with null. */
+    soon(value: string | null): void;
+    /** Cancels a pending open or close. */
+    cancel(): void;
+    /** A click on a trigger: opens its panel, or closes it, but keeps a panel the pointer just opened by hovering. */
+    toggle(value: string): void;
+    rootRef: RefObject<HTMLElement | null>;
+    triggers: MutableRefObject<Map<string, HTMLElement>>;
+    /** The item whose panel should take focus once it opens (Down on its trigger). */
+    focusInto: MutableRefObject<string | null>;
+    panelWidth: "auto" | "full";
+}

package/dist/components/NavigationMenu/NavigationMenu.types.d.ts

@@ -0,0 +1,84 @@
+import type { AnchorHTMLAttributes, MutableRefObject, ReactNode, RefObject } from "react";
+export interface NavigationMenuProps {
+    /** Names the navigation for screen readers, such as "Main". */
+    label?: string;
+    /** Renders a `<nav>` landmark. Turn it off when it already sits in one, like SiteHeader's `nav` slot, so screen
+     * readers don't hear two.
+     * @default true */
+    landmark?: boolean;
+    /** The open item's `value`, or null when every panel is closed, when you control it. */
+    value?: string | null;
+    /** The item open at first, when it controls itself.
+     * @default null */
+    defaultValue?: string | null;
+    /** Called with the item that opens, or null when its panel closes. */
+    onValueChange?(value: string | null): void;
+    /** How wide panels are: as wide as their content (`"auto"`), or as wide as the header the menu sits in (or the
+     * menu itself, outside a header) for mega-menus (`"full"`). An item's own `width` wins.
+     * @default "auto" */
+    panelWidth?: "auto" | "full";
+    /** How long the pointer rests on a trigger before its panel opens, in milliseconds.
+     * @default 150 */
+    openDelay?: number;
+    /** How long a panel opened by hovering stays after the pointer leaves, so it can cross the gap into it.
+     * @default 300 */
+    closeDelay?: number;
+    /** The NavigationMenuItems. */
+    children: ReactNode;
+    className?: string;
+}
+export interface NavigationMenuItemProps {
+    /** The words on the top-level button, or on the link when there's an `href`. */
+    trigger: ReactNode;
+    /** Names the item for `value` and `onValueChange`. Defaults to a generated id. */
+    value?: string;
+    /** Makes it a plain top-level link instead of a button with a panel. */
+    href?: string;
+    /** Marks a plain link (or a trigger whose panel holds the current page) as where the person is. */
+    active?: boolean;
+    /** The panel's columns, side by side; they stack on narrow screens.
+     * @default 1 */
+    columns?: number;
+    /** This panel's width: pixels, any CSS width, or `"full"` to match the header. Defaults to the menu's `panelWidth`. */
+    width?: number | string;
+    /** The panel's content: NavigationMenuLinks, NavigationMenuGroups, or anything else. */
+    children?: ReactNode;
+    className?: string;
+}
+export interface NavigationMenuLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+    href: string;
+    /** The link's name. */
+    title: ReactNode;
+    /** A line under the title on what's there. */
+    description?: ReactNode;
+    /** An icon before the title, such as a lucide-react icon at size 18. */
+    icon?: ReactNode;
+    /** The page the person is on: sets aria-current="page". */
+    active?: boolean;
+    /** Shows it as a tinted card that fills its column, to feature one page in a mega-menu. */
+    featured?: boolean;
+}
+export interface NavigationMenuGroupProps {
+    /** A few words over the column, such as "Resources". */
+    title: ReactNode;
+    /** Its NavigationMenuLinks. */
+    children: ReactNode;
+    className?: string;
+}
+/** What a NavigationMenu shares with its items. Internal. */
+export interface NavigationMenuContextValue {
+    value: string | null;
+    /** Opens an item (or closes with null); `hover` marks a panel that closes again when the pointer leaves. */
+    open(value: string | null, hover?: boolean): void;
+    /** Opens an item after the open delay, or closes after the close delay with null. */
+    soon(value: string | null): void;
+    /** Cancels a pending open or close. */
+    cancel(): void;
+    /** A click on a trigger: opens its panel, or closes it, but keeps a panel the pointer just opened by hovering. */
+    toggle(value: string): void;
+    rootRef: RefObject<HTMLElement | null>;
+    triggers: MutableRefObject<Map<string, HTMLElement>>;
+    /** The item whose panel should take focus once it opens (Down on its trigger). */
+    focusInto: MutableRefObject<string | null>;
+    panelWidth: "auto" | "full";
+}

package/dist/components/SortableList/SortableList.d.cts

@@ -0,0 +1,7 @@
+import type { SortableListProps } from "./SortableList.types.cjs";
+export type { SortableListItemState, SortableListLabels, SortableListProps } from "./SortableList.types.cjs";
+/**
+ * A list people put in order: drag an item (by the whole row, or by its grip with `handle`) and the others move to
+ * make room, or focus it, press Space, move it with the arrow keys and press Space again. Each step is read out.
+ */
+export declare function SortableList<Item>({ items, defaultItems, onReorder, renderItem, getKey, itemLabel, label, handle, orientation, disabled, labels: labelsProp, className, ...props }: SortableListProps<Item>): import("react").JSX.Element;

package/dist/components/SortableList/SortableList.d.ts

@@ -0,0 +1,7 @@
+import type { SortableListProps } from "./SortableList.types.js";
+export type { SortableListItemState, SortableListLabels, SortableListProps } from "./SortableList.types.js";
+/**
+ * A list people put in order: drag an item (by the whole row, or by its grip with `handle`) and the others move to
+ * make room, or focus it, press Space, move it with the arrow keys and press Space again. Each step is read out.
+ */
+export declare function SortableList<Item>({ items, defaultItems, onReorder, renderItem, getKey, itemLabel, label, handle, orientation, disabled, labels: labelsProp, className, ...props }: SortableListProps<Item>): import("react").JSX.Element;

package/dist/components/SortableList/SortableList.types.d.cts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+export interface SortableListLabels {
+    /** Read out when an item is picked up.
+     * @default (item, position, total) => `Picked up ${item}. Position ${position} of ${total}.` */
+    pickedUp?(item: string, position: number, total: number): string;
+    /** Read out at each step while it's carried.
+     * @default (item, position, total) => `${item}, position ${position} of ${total}.` */
+    moved?(item: string, position: number, total: number): string;
+    /** Read out when it's put down.
+     * @default (item, position, total) => `Dropped ${item} at position ${position} of ${total}.` */
+    dropped?(item: string, position: number, total: number): string;
+    /** Read out when Escape puts it back.
+     * @default (item, position, total) => `Cancelled. ${item} is back at position ${position} of ${total}.` */
+    cancelled?(item: string, position: number, total: number): string;
+    /** Each item's description, telling screen reader users how to move it.
+     * @default "Press Space to pick up, the arrow keys to move, Space to drop, Escape to cancel." */
+    instructions?: string;
+    /** The grip's name, before the item's own text: "Reorder Columns".
+     * @default "Reorder" */
+    handle?: string;
+}
+export interface SortableListItemState {
+    /** Where the item is in the list, from 0. */
+    index: number;
+    /** It's picked up: being dragged, or carried with the keyboard. */
+    isDragging: boolean;
+}
+export interface SortableListProps<Item> extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "onChange" | "defaultValue"> {
+    /** The items in order, when you control them. */
+    items?: Item[];
+    /** The items at first, when it keeps the order itself.
+     * @default [] */
+    defaultItems?: Item[];
+    /** Called with the items in their new order, and where the moved one was and went (indexes from 0). */
+    onReorder?(items: Item[], move: {
+        from: number;
+        to: number;
+    }): void;
+    /** What each item shows. */
+    renderItem(item: Item, state: SortableListItemState): ReactNode;
+    /** Gives each item a unique key.
+     * @default (item) => item.id, or the item itself when it's a string or a number */
+    getKey?(item: Item): Key;
+    /** Names an item in what's read out as it moves ("Picked up Email"). Defaults to the item when it's a string
+     * or a number, else the text it shows. */
+    itemLabel?(item: Item): string;
+    /** Names the list for screen readers: "Column order". Required unless `aria-labelledby` points at a heading. */
+    label?: string;
+    /**
+     * Only a grip at the start of each row picks it up, rather than the whole row. Use it when rows hold their own
+     * buttons, switches or links, or on long lists people scroll by touch.
+     * @default false
+     */
+    handle?: boolean;
+    /** `horizontal` lays the items in a row that scrolls sideways; the arrow keys follow the text direction.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** @default false */
+    disabled?: boolean;
+    /** The words it reads out, for other languages. */
+    labels?: SortableListLabels;
+}
+/** Where the items were when the drag started, along the list's axis, in viewport pixels. Internal. */
+export interface SortableGeometry {
+    lo: number[];
+    hi: number[];
+    /** -1 when the list runs backwards on screen: a row in right-to-left text. */
+    dir: number;
+    /** How far the others move to make room: the picked-up item's size and the gap after it. */
+    step: number;
+    scroller: Element;
+    scroll: number;
+}
+/** A drag in progress, by pointer or keyboard. Internal. */
+export interface SortableDrag {
+    from: number;
+    to: number;
+    /** How far a dragged item has followed the pointer. */
+    offset: number;
+    keyboard: boolean;
+    geo: SortableGeometry;
+}

package/dist/components/SortableList/SortableList.types.d.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+export interface SortableListLabels {
+    /** Read out when an item is picked up.
+     * @default (item, position, total) => `Picked up ${item}. Position ${position} of ${total}.` */
+    pickedUp?(item: string, position: number, total: number): string;
+    /** Read out at each step while it's carried.
+     * @default (item, position, total) => `${item}, position ${position} of ${total}.` */
+    moved?(item: string, position: number, total: number): string;
+    /** Read out when it's put down.
+     * @default (item, position, total) => `Dropped ${item} at position ${position} of ${total}.` */
+    dropped?(item: string, position: number, total: number): string;
+    /** Read out when Escape puts it back.
+     * @default (item, position, total) => `Cancelled. ${item} is back at position ${position} of ${total}.` */
+    cancelled?(item: string, position: number, total: number): string;
+    /** Each item's description, telling screen reader users how to move it.
+     * @default "Press Space to pick up, the arrow keys to move, Space to drop, Escape to cancel." */
+    instructions?: string;
+    /** The grip's name, before the item's own text: "Reorder Columns".
+     * @default "Reorder" */
+    handle?: string;
+}
+export interface SortableListItemState {
+    /** Where the item is in the list, from 0. */
+    index: number;
+    /** It's picked up: being dragged, or carried with the keyboard. */
+    isDragging: boolean;
+}
+export interface SortableListProps<Item> extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "onChange" | "defaultValue"> {
+    /** The items in order, when you control them. */
+    items?: Item[];
+    /** The items at first, when it keeps the order itself.
+     * @default [] */
+    defaultItems?: Item[];
+    /** Called with the items in their new order, and where the moved one was and went (indexes from 0). */
+    onReorder?(items: Item[], move: {
+        from: number;
+        to: number;
+    }): void;
+    /** What each item shows. */
+    renderItem(item: Item, state: SortableListItemState): ReactNode;
+    /** Gives each item a unique key.
+     * @default (item) => item.id, or the item itself when it's a string or a number */
+    getKey?(item: Item): Key;
+    /** Names an item in what's read out as it moves ("Picked up Email"). Defaults to the item when it's a string
+     * or a number, else the text it shows. */
+    itemLabel?(item: Item): string;
+    /** Names the list for screen readers: "Column order". Required unless `aria-labelledby` points at a heading. */
+    label?: string;
+    /**
+     * Only a grip at the start of each row picks it up, rather than the whole row. Use it when rows hold their own
+     * buttons, switches or links, or on long lists people scroll by touch.
+     * @default false
+     */
+    handle?: boolean;
+    /** `horizontal` lays the items in a row that scrolls sideways; the arrow keys follow the text direction.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** @default false */
+    disabled?: boolean;
+    /** The words it reads out, for other languages. */
+    labels?: SortableListLabels;
+}
+/** Where the items were when the drag started, along the list's axis, in viewport pixels. Internal. */
+export interface SortableGeometry {
+    lo: number[];
+    hi: number[];
+    /** -1 when the list runs backwards on screen: a row in right-to-left text. */
+    dir: number;
+    /** How far the others move to make room: the picked-up item's size and the gap after it. */
+    step: number;
+    scroller: Element;
+    scroll: number;
+}
+/** A drag in progress, by pointer or keyboard. Internal. */
+export interface SortableDrag {
+    from: number;
+    to: number;
+    /** How far a dragged item has followed the pointer. */
+    offset: number;
+    keyboard: boolean;
+    geo: SortableGeometry;
+}

package/dist/components/TreeView/TreeView.d.cts

@@ -0,0 +1,8 @@
+import type { TreeViewProps } from "./TreeView.types.cjs";
+export type { TreeItem, TreeViewLabels, TreeViewProps, TreeViewSelectionMode } from "./TreeView.types.cjs";
+/**
+ * A tree of rows that open and close, for categories, org charts, permissions, nested settings or navigation. Rows can
+ * be selected (one or many), checked with tri-state parents, activated, and their children fetched when they first open.
+ * It's one tab stop: the arrow keys move and open, Home/End jump, typing finds a row, Space selects and Enter activates.
+ */
+export declare function TreeView({ items, label, "aria-labelledby": ariaLabelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode, selected, defaultSelected, onSelectedChange, checkboxes, loadChildren, onAction, renderLabel, labels: labelsProp, className, }: TreeViewProps): import("react").JSX.Element;

package/dist/components/TreeView/TreeView.d.ts

@@ -0,0 +1,8 @@
+import type { TreeViewProps } from "./TreeView.types.js";
+export type { TreeItem, TreeViewLabels, TreeViewProps, TreeViewSelectionMode } from "./TreeView.types.js";
+/**
+ * A tree of rows that open and close, for categories, org charts, permissions, nested settings or navigation. Rows can
+ * be selected (one or many), checked with tri-state parents, activated, and their children fetched when they first open.
+ * It's one tab stop: the arrow keys move and open, Home/End jump, typing finds a row, Space selects and Enter activates.
+ */
+export declare function TreeView({ items, label, "aria-labelledby": ariaLabelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode, selected, defaultSelected, onSelectedChange, checkboxes, loadChildren, onAction, renderLabel, labels: labelsProp, className, }: TreeViewProps): import("react").JSX.Element;