@openwarelabs/ui 0.13.0 → 0.14.1

package/README.md

@@ -54,21 +54,21 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-93 components, each with a page in the docs.
+106 components, each with a page in the docs.
 
 | 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) |
 | 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) |
-| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `ChoiceCard`, `ListBox` (one or many, on the page) |
+| 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) |
 | 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` |
-| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `Menu` + `MenuItem`, `CommandPalette` |
+| 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` |
 | Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
-| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User` |
+| 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) |
 | 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` |
+| Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden`, `AspectRatio`, `Splitter` + `SplitterPanel` + `SplitterHandle` (panels you resize by dragging or with the arrow keys, collapsible, remembered) |
 | 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/AspectRatio/AspectRatio.d.cts

@@ -0,0 +1,7 @@
+import type { AspectRatioProps } from "./AspectRatio.types.cjs";
+export type { AspectRatioProps } from "./AspectRatio.types.cjs";
+/**
+ * A box that keeps a shape as its width changes, such as 16:9 for a video or 1:1 for a thumbnail. Whatever is inside
+ * fills it; an image, video, iframe or embed is cropped to cover it.
+ */
+export declare function AspectRatio({ ratio, as: Element, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,7 @@
+import type { AspectRatioProps } from "./AspectRatio.types.js";
+export type { AspectRatioProps } from "./AspectRatio.types.js";
+/**
+ * A box that keeps a shape as its width changes, such as 16:9 for a video or 1:1 for a thumbnail. Whatever is inside
+ * fills it; an image, video, iframe or embed is cropped to cover it.
+ */
+export declare function AspectRatio({ ratio, as: Element, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface AspectRatioProps extends HTMLAttributes<HTMLElement> {
+    /** Width over height, such as `16 / 9`, `4 / 3` or `1` for a square. The box is as wide as its container. @default 16 / 9 */
+    ratio?: number;
+    /** The element to render, such as `figure` or `span`. @default "div" */
+    as?: ElementType;
+}

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

@@ -0,0 +1,7 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface AspectRatioProps extends HTMLAttributes<HTMLElement> {
+    /** Width over height, such as `16 / 9`, `4 / 3` or `1` for a square. The box is as wide as its container. @default 16 / 9 */
+    ratio?: number;
+    /** The element to render, such as `figure` or `span`. @default "div" */
+    as?: ElementType;
+}

package/dist/components/Banner/Banner.d.cts

@@ -0,0 +1,7 @@
+import type { BannerProps } from "./Banner.types.cjs";
+export type { BannerProps, BannerTone } from "./Banner.types.cjs";
+/**
+ * A bar across the top of a page or app for news and notices that concern all of it: a launch, being offline, a
+ * trial running out. It's a named region, not an alert, unless you make it `live`.
+ */
+export declare function Banner({ tone, icon, action, dismissible, onDismiss, dismissKey, sticky, align, contained, live, label, dismissLabel, className, children, ...props }: BannerProps): import("react").JSX.Element | null;

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import type { BannerProps } from "./Banner.types.js";
+export type { BannerProps, BannerTone } from "./Banner.types.js";
+/**
+ * A bar across the top of a page or app for news and notices that concern all of it: a launch, being offline, a
+ * trial running out. It's a named region, not an alert, unless you make it `live`.
+ */
+export declare function Banner({ tone, icon, action, dismissible, onDismiss, dismissKey, sticky, align, contained, live, label, dismissLabel, className, children, ...props }: BannerProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ContainerSize } from "../Container/Container.types.cjs";
+export type BannerTone = "brand" | "neutral" | "info" | "success" | "warning" | "danger";
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /**
+     * The bar's colour: `brand` a solid bar in the brand colour for news, `neutral` a quiet grey one, `info`, `success`,
+     * `warning` and `danger` the tinted grounds Alert uses, for notices about the app itself.
+     * @default "brand"
+     */
+    tone?: BannerTone;
+    /** Replaces the tone's icon; `false` hides it. */
+    icon?: ReactNode | false;
+    /** A link or a small button after the message, such as `<Link href="…">Read the post</Link>`. It moves below the message on narrow screens. */
+    action?: ReactNode;
+    /** Shows a ✕ that hides the bar. @default false */
+    dismissible?: boolean;
+    /** Called when the person dismisses the bar. */
+    onDismiss?(): void;
+    /**
+     * Remembers the dismissal in this browser (localStorage, as `ow-banner:<key>`), so the bar stays hidden on the next
+     * visit. Change the key for a new announcement.
+     */
+    dismissKey?: string;
+    /** Keeps the bar at the top of the window as the page scrolls. @default false */
+    sticky?: boolean;
+    /** Where the message sits: in the middle of the bar, or at its start. @default "center" */
+    align?: "center" | "start";
+    /**
+     * Lines the content up with a Container of this size, so it starts where the page below does. `true` is `page`.
+     * @default false
+     */
+    contained?: boolean | ContainerSize;
+    /**
+     * Reads the message out when it appears: `polite` (role="status") waits for a pause, `assertive` (role="alert")
+     * interrupts, for something urgent like going offline. Leave it out for an announcement that's there when the page
+     * loads: it's then a region the person can find.
+     */
+    live?: "polite" | "assertive";
+    /** The region's name for screen readers, when it isn't live. @default "Announcement" */
+    label?: string;
+    /** The ✕'s name for screen readers. @default "Dismiss" */
+    dismissLabel?: string;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ContainerSize } from "../Container/Container.types.js";
+export type BannerTone = "brand" | "neutral" | "info" | "success" | "warning" | "danger";
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /**
+     * The bar's colour: `brand` a solid bar in the brand colour for news, `neutral` a quiet grey one, `info`, `success`,
+     * `warning` and `danger` the tinted grounds Alert uses, for notices about the app itself.
+     * @default "brand"
+     */
+    tone?: BannerTone;
+    /** Replaces the tone's icon; `false` hides it. */
+    icon?: ReactNode | false;
+    /** A link or a small button after the message, such as `<Link href="…">Read the post</Link>`. It moves below the message on narrow screens. */
+    action?: ReactNode;
+    /** Shows a ✕ that hides the bar. @default false */
+    dismissible?: boolean;
+    /** Called when the person dismisses the bar. */
+    onDismiss?(): void;
+    /**
+     * Remembers the dismissal in this browser (localStorage, as `ow-banner:<key>`), so the bar stays hidden on the next
+     * visit. Change the key for a new announcement.
+     */
+    dismissKey?: string;
+    /** Keeps the bar at the top of the window as the page scrolls. @default false */
+    sticky?: boolean;
+    /** Where the message sits: in the middle of the bar, or at its start. @default "center" */
+    align?: "center" | "start";
+    /**
+     * Lines the content up with a Container of this size, so it starts where the page below does. `true` is `page`.
+     * @default false
+     */
+    contained?: boolean | ContainerSize;
+    /**
+     * Reads the message out when it appears: `polite` (role="status") waits for a pause, `assertive` (role="alert")
+     * interrupts, for something urgent like going offline. Leave it out for an announcement that's there when the page
+     * loads: it's then a region the person can find.
+     */
+    live?: "polite" | "assertive";
+    /** The region's name for screen readers, when it isn't live. @default "Announcement" */
+    label?: string;
+    /** The ✕'s name for screen readers. @default "Dismiss" */
+    dismissLabel?: string;
+    children?: ReactNode;
+}

package/dist/components/Carousel/Carousel.d.cts

@@ -0,0 +1,9 @@
+import type { CarouselProps, CarouselSlideProps } from "./Carousel.types.cjs";
+export type { CarouselLabels, CarouselProps, CarouselSlideProps } from "./Carousel.types.cjs";
+/**
+ * Slides in a row that scroll and snap into place: swipe them, or use the previous and next buttons, the dots or the
+ * arrow keys. It's the browser's own scrolling, so it follows a finger or a trackpad exactly.
+ */
+export declare function Carousel({ label, children, slidesPerView, gap, align, index, defaultIndex, onIndexChange, loop, autoplay, arrows, indicators, labels, className, style, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: CarouselProps): import("react").JSX.Element;
+/** One slide of a Carousel. Screen readers hear it as a slide, named "2 of 5" unless you give it a `label`. */
+export declare function CarouselSlide({ label, className, ...props }: CarouselSlideProps): import("react").JSX.Element;

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselProps, CarouselSlideProps } from "./Carousel.types.js";
+export type { CarouselLabels, CarouselProps, CarouselSlideProps } from "./Carousel.types.js";
+/**
+ * Slides in a row that scroll and snap into place: swipe them, or use the previous and next buttons, the dots or the
+ * arrow keys. It's the browser's own scrolling, so it follows a finger or a trackpad exactly.
+ */
+export declare function Carousel({ label, children, slidesPerView, gap, align, index, defaultIndex, onIndexChange, loop, autoplay, arrows, indicators, labels, className, style, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: CarouselProps): import("react").JSX.Element;
+/** One slide of a Carousel. Screen readers hear it as a slide, named "2 of 5" unless you give it a `label`. */
+export declare function CarouselSlide({ label, className, ...props }: CarouselSlideProps): import("react").JSX.Element;

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

@@ -0,0 +1,63 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SpaceToken } from "../Layout/Layout.cjs";
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Names the carousel for screen readers, e.g. "Featured projects". */
+    label: string;
+    /** The slides: one CarouselSlide each. */
+    children: ReactNode;
+    /** How many slides show at once. A fraction (1.2) lets the next one peek in. To change it with the screen's width,
+     * set `--ow-carousel-per-view` in your own CSS instead.
+     * @default 1 */
+    slidesPerView?: number;
+    /** The space between slides.
+     * @default "md" */
+    gap?: SpaceToken;
+    /** Where a slide comes to rest: at the `start` of the carousel, or in its `center` with its neighbours either side.
+     * @default "start" */
+    align?: "start" | "center";
+    /** The slide at the start (or centre), from 0, when you control it. */
+    index?: number;
+    /** The slide it starts on, when it controls itself.
+     * @default 0 */
+    defaultIndex?: number;
+    /** Called when another slide comes to rest, from the buttons, the dots, the keys or a swipe. */
+    onIndexChange?(index: number): void;
+    /** Next from the last slide goes back to the first, and previous from the first goes to the last.
+     * @default false */
+    loop?: boolean;
+    /** Moves on by itself every this many milliseconds (`true` is 5000), with a button to pause. It waits while the
+     * pointer is over it or focus is in it, and starts paused when the system asks for reduced motion.
+     * @default false */
+    autoplay?: boolean | number;
+    /** Where the previous and next buttons go: `overlay` on the slides' edges, `outside` beside them (it takes room
+     * either side), or `false` for none.
+     * @default "overlay" */
+    arrows?: "overlay" | "outside" | false;
+    /** Shows a dot for each place it can rest, to go straight there.
+     * @default true */
+    indicators?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: CarouselLabels;
+}
+export interface CarouselLabels {
+    /** @default "Previous slide" */
+    previous?: string;
+    /** @default "Next slide" */
+    next?: string;
+    /** The button that stops autoplay. @default "Pause slides" */
+    pause?: string;
+    /** The button that starts it again. @default "Play slides" */
+    play?: string;
+    /** Names the dots. @default "Choose a slide" */
+    indicators?: string;
+    /** Names a dot, and is read out when another slide comes to rest. @default (n, count) => `Slide ${n} of ${count}` */
+    slide?(n: number, count: number): string;
+    /** Names a slide, which screen readers already call a slide. @default (n, count) => `${n} of ${count}` */
+    position?(n: number, count: number): string;
+}
+export interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the slide for screen readers.
+     * @default its place, e.g. "2 of 5" */
+    label?: string;
+}

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

@@ -0,0 +1,63 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SpaceToken } from "../Layout/Layout.js";
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Names the carousel for screen readers, e.g. "Featured projects". */
+    label: string;
+    /** The slides: one CarouselSlide each. */
+    children: ReactNode;
+    /** How many slides show at once. A fraction (1.2) lets the next one peek in. To change it with the screen's width,
+     * set `--ow-carousel-per-view` in your own CSS instead.
+     * @default 1 */
+    slidesPerView?: number;
+    /** The space between slides.
+     * @default "md" */
+    gap?: SpaceToken;
+    /** Where a slide comes to rest: at the `start` of the carousel, or in its `center` with its neighbours either side.
+     * @default "start" */
+    align?: "start" | "center";
+    /** The slide at the start (or centre), from 0, when you control it. */
+    index?: number;
+    /** The slide it starts on, when it controls itself.
+     * @default 0 */
+    defaultIndex?: number;
+    /** Called when another slide comes to rest, from the buttons, the dots, the keys or a swipe. */
+    onIndexChange?(index: number): void;
+    /** Next from the last slide goes back to the first, and previous from the first goes to the last.
+     * @default false */
+    loop?: boolean;
+    /** Moves on by itself every this many milliseconds (`true` is 5000), with a button to pause. It waits while the
+     * pointer is over it or focus is in it, and starts paused when the system asks for reduced motion.
+     * @default false */
+    autoplay?: boolean | number;
+    /** Where the previous and next buttons go: `overlay` on the slides' edges, `outside` beside them (it takes room
+     * either side), or `false` for none.
+     * @default "overlay" */
+    arrows?: "overlay" | "outside" | false;
+    /** Shows a dot for each place it can rest, to go straight there.
+     * @default true */
+    indicators?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: CarouselLabels;
+}
+export interface CarouselLabels {
+    /** @default "Previous slide" */
+    previous?: string;
+    /** @default "Next slide" */
+    next?: string;
+    /** The button that stops autoplay. @default "Pause slides" */
+    pause?: string;
+    /** The button that starts it again. @default "Play slides" */
+    play?: string;
+    /** Names the dots. @default "Choose a slide" */
+    indicators?: string;
+    /** Names a dot, and is read out when another slide comes to rest. @default (n, count) => `Slide ${n} of ${count}` */
+    slide?(n: number, count: number): string;
+    /** Names a slide, which screen readers already call a slide. @default (n, count) => `${n} of ${count}` */
+    position?(n: number, count: number): string;
+}
+export interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the slide for screen readers.
+     * @default its place, e.g. "2 of 5" */
+    label?: string;
+}

package/dist/components/ContextMenu/ContextMenu.d.cts

@@ -0,0 +1,7 @@
+import type { ContextMenuProps } from "./ContextMenu.types.cjs";
+export type { ContextMenuProps } from "./ContextMenu.types.cjs";
+/**
+ * A menu of actions for an area, opened where you right-click it, with a long press on a touch screen, or with
+ * Shift+F10 or the context menu key when focus is inside it. It uses Menu's items and keyboard, and looks the same.
+ */
+export declare function ContextMenu({ children, menu, label, width, disabled, onOpenChange, className }: ContextMenuProps): import("react").JSX.Element;

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,7 @@
+import type { ContextMenuProps } from "./ContextMenu.types.js";
+export type { ContextMenuProps } from "./ContextMenu.types.js";
+/**
+ * A menu of actions for an area, opened where you right-click it, with a long press on a touch screen, or with
+ * Shift+F10 or the context menu key when focus is inside it. It uses Menu's items and keyboard, and looks the same.
+ */
+export declare function ContextMenu({ children, menu, label, width, disabled, onOpenChange, className }: ContextMenuProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import type { ReactNode, RefObject } from "react";
+export interface ContextMenuProps {
+    /** The area that opens the menu: one element or several. Give it something focusable, so the keyboard can reach it. */
+    children: ReactNode;
+    /** The menu: MenuItem, MenuLabel and MenuSeparator, as in a Menu. */
+    menu: ReactNode;
+    /** Names the menu for screen readers, e.g. "File actions". */
+    label: string;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Leaves the browser's own context menu in place and opens nothing.
+     * @default false */
+    disabled?: boolean;
+    /** Called when it opens or closes, e.g. to highlight the row it's for. */
+    onOpenChange?(open: boolean): void;
+    /** Classes for the menu panel. */
+    className?: string;
+}
+/** The panel inside a ContextMenu, remade for each opening. Internal. */
+export interface ContextMenuPanelProps extends Pick<ContextMenuProps, "label" | "width" | "className"> {
+    /** Where it opens: a point for the pointer, the focused element's box for the keyboard. */
+    anchor: () => DOMRect;
+    open: boolean;
+    state: "open" | "closed";
+    menuRef: RefObject<HTMLDivElement>;
+    /** The element to return focus to on Escape. */
+    restoreRef: RefObject<HTMLElement | null>;
+    id: string;
+    /** Escape or Tab in the menu. */
+    onClose(): void;
+    children: ReactNode;
+}

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

@@ -0,0 +1,32 @@
+import type { ReactNode, RefObject } from "react";
+export interface ContextMenuProps {
+    /** The area that opens the menu: one element or several. Give it something focusable, so the keyboard can reach it. */
+    children: ReactNode;
+    /** The menu: MenuItem, MenuLabel and MenuSeparator, as in a Menu. */
+    menu: ReactNode;
+    /** Names the menu for screen readers, e.g. "File actions". */
+    label: string;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Leaves the browser's own context menu in place and opens nothing.
+     * @default false */
+    disabled?: boolean;
+    /** Called when it opens or closes, e.g. to highlight the row it's for. */
+    onOpenChange?(open: boolean): void;
+    /** Classes for the menu panel. */
+    className?: string;
+}
+/** The panel inside a ContextMenu, remade for each opening. Internal. */
+export interface ContextMenuPanelProps extends Pick<ContextMenuProps, "label" | "width" | "className"> {
+    /** Where it opens: a point for the pointer, the focused element's box for the keyboard. */
+    anchor: () => DOMRect;
+    open: boolean;
+    state: "open" | "closed";
+    menuRef: RefObject<HTMLDivElement>;
+    /** The element to return focus to on Escape. */
+    restoreRef: RefObject<HTMLElement | null>;
+    id: string;
+    /** Escape or Tab in the menu. */
+    onClose(): void;
+    children: ReactNode;
+}

package/dist/components/DescriptionList/DescriptionList.d.cts

@@ -0,0 +1,9 @@
+import type { DescriptionItemProps, DescriptionListProps } from "./DescriptionList.types.cjs";
+export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps } from "./DescriptionList.types.cjs";
+/**
+ * Terms and their values, for detail pages, settings summaries and receipts: a `<dl>` with a DescriptionItem for each
+ * pair. Horizontal by default, stacking in a narrow container; vertical; or a grid of columns.
+ */
+export declare function DescriptionList({ layout, columns, divided, density, termWidth, className, style, ...props }: DescriptionListProps): import("react").JSX.Element;
+/** One term and its value in a DescriptionList, with an optional action at the end of the row. */
+export declare function DescriptionItem({ term, children, action, span, className, ...props }: DescriptionItemProps): import("react").JSX.Element;

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,9 @@
+import type { DescriptionItemProps, DescriptionListProps } from "./DescriptionList.types.js";
+export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps } from "./DescriptionList.types.js";
+/**
+ * Terms and their values, for detail pages, settings summaries and receipts: a `<dl>` with a DescriptionItem for each
+ * pair. Horizontal by default, stacking in a narrow container; vertical; or a grid of columns.
+ */
+export declare function DescriptionList({ layout, columns, divided, density, termWidth, className, style, ...props }: DescriptionListProps): import("react").JSX.Element;
+/** One term and its value in a DescriptionList, with an optional action at the end of the row. */
+export declare function DescriptionItem({ term, children, action, span, className, ...props }: DescriptionItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type DescriptionListLayout = "horizontal" | "vertical" | "grid";
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /**
+     * `horizontal` puts each term in a column on the left and its value on the right, and stacks them when the list is
+     * narrower than 420px; `vertical` puts each term above its value, one pair under another; `grid` lays the pairs out
+     * in `columns`, term above value, for a summary at a glance.
+     * @default "horizontal"
+     */
+    layout?: DescriptionListLayout;
+    /** How many columns a `grid` has, at most: a column is at least 160px wide, so a narrow list has fewer. @default 2 */
+    columns?: 2 | 3 | 4;
+    /** A hairline between rows. In a grid, every row has one above it. @default false */
+    divided?: boolean;
+    /** `compact` rows have 8px above and below; `comfortable` 12px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** How wide the term column is in a `horizontal` list: a number of pixels, or any CSS width. @default 160 */
+    termWidth?: number | string;
+    /** DescriptionItems. */
+    children?: ReactNode;
+}
+export interface DescriptionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What the value is, in a word or two: "Email", "Plan". It renders a `<dt>`. */
+    term: ReactNode;
+    /** The value: text, or a Badge, User, Link or Code. It renders a `<dd>`. */
+    children?: ReactNode;
+    /** Something to do with the value, at the end of the row: an "Edit" ghost Button or a CopyButton. Name it, as it's read after the value. */
+    action?: ReactNode;
+    /** How many columns it takes in a `grid`; `full` takes the whole row. It takes the whole row where the grid has fewer columns. @default 1 */
+    span?: 1 | 2 | 3 | 4 | "full";
+}

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

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type DescriptionListLayout = "horizontal" | "vertical" | "grid";
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /**
+     * `horizontal` puts each term in a column on the left and its value on the right, and stacks them when the list is
+     * narrower than 420px; `vertical` puts each term above its value, one pair under another; `grid` lays the pairs out
+     * in `columns`, term above value, for a summary at a glance.
+     * @default "horizontal"
+     */
+    layout?: DescriptionListLayout;
+    /** How many columns a `grid` has, at most: a column is at least 160px wide, so a narrow list has fewer. @default 2 */
+    columns?: 2 | 3 | 4;
+    /** A hairline between rows. In a grid, every row has one above it. @default false */
+    divided?: boolean;
+    /** `compact` rows have 8px above and below; `comfortable` 12px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** How wide the term column is in a `horizontal` list: a number of pixels, or any CSS width. @default 160 */
+    termWidth?: number | string;
+    /** DescriptionItems. */
+    children?: ReactNode;
+}
+export interface DescriptionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What the value is, in a word or two: "Email", "Plan". It renders a `<dt>`. */
+    term: ReactNode;
+    /** The value: text, or a Badge, User, Link or Code. It renders a `<dd>`. */
+    children?: ReactNode;
+    /** Something to do with the value, at the end of the row: an "Edit" ghost Button or a CopyButton. Name it, as it's read after the value. */
+    action?: ReactNode;
+    /** How many columns it takes in a `grid`; `full` takes the whole row. It takes the whole row where the grid has fewer columns. @default 1 */
+    span?: 1 | 2 | 3 | 4 | "full";
+}

package/dist/components/HoverCard/HoverCard.d.cts

@@ -0,0 +1,8 @@
+import type { HoverCardProps } from "./HoverCard.types.cjs";
+export type { HoverCardProps } from "./HoverCard.types.cjs";
+/**
+ * A preview card that opens when the pointer rests on its trigger (a link to a person or a page) or the trigger gets
+ * keyboard focus, and closes when the pointer leaves both, on Escape, or when focus moves away. It's extra: whatever
+ * it shows must also be reachable through the trigger, as touch screens never open it.
+ */
+export declare function HoverCard({ trigger, children, open, defaultOpen, onOpenChange, placement, openDelay, closeDelay, width, className, }: HoverCardProps): import("react").JSX.Element;

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,8 @@
+import type { HoverCardProps } from "./HoverCard.types.js";
+export type { HoverCardProps } from "./HoverCard.types.js";
+/**
+ * A preview card that opens when the pointer rests on its trigger (a link to a person or a page) or the trigger gets
+ * keyboard focus, and closes when the pointer leaves both, on Escape, or when focus moves away. It's extra: whatever
+ * it shows must also be reachable through the trigger, as touch screens never open it.
+ */
+export declare function HoverCard({ trigger, children, open, defaultOpen, onOpenChange, placement, openDelay, closeDelay, width, className, }: HoverCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Placement } from "../../hooks/useFloating.cjs";
+export interface HoverCardProps {
+    /** What people point at or tab to: usually a Link to a profile or a page. It keeps working as it is; touch opens the link, not the card. */
+    trigger: ReactElement;
+    /** The card's content: a preview of what the trigger leads to. It may hold links and buttons. */
+    children: ReactNode;
+    /** Whether it's showing, when you keep that in your own state. */
+    open?: boolean;
+    /** Whether it's showing at first, when it keeps its own state.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?(open: boolean): void;
+    /** Where it opens relative to the trigger; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+    /** Milliseconds the pointer rests on the trigger before it opens. Keyboard focus opens it at once.
+     * @default 500 */
+    openDelay?: number;
+    /** Milliseconds it waits after the pointer leaves before it closes, so the pointer can cross into the card.
+     * @default 250 */
+    closeDelay?: number;
+    /** Pixels, or any CSS width.
+     * @default 320 */
+    width?: number | string;
+    className?: string;
+}

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

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Placement } from "../../hooks/useFloating.js";
+export interface HoverCardProps {
+    /** What people point at or tab to: usually a Link to a profile or a page. It keeps working as it is; touch opens the link, not the card. */
+    trigger: ReactElement;
+    /** The card's content: a preview of what the trigger leads to. It may hold links and buttons. */
+    children: ReactNode;
+    /** Whether it's showing, when you keep that in your own state. */
+    open?: boolean;
+    /** Whether it's showing at first, when it keeps its own state.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?(open: boolean): void;
+    /** Where it opens relative to the trigger; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+    /** Milliseconds the pointer rests on the trigger before it opens. Keyboard focus opens it at once.
+     * @default 500 */
+    openDelay?: number;
+    /** Milliseconds it waits after the pointer leaves before it closes, so the pointer can cross into the card.
+     * @default 250 */
+    closeDelay?: number;
+    /** Pixels, or any CSS width.
+     * @default 320 */
+    width?: number | string;
+    className?: string;
+}

package/dist/components/Image/Image.d.cts

@@ -0,0 +1,7 @@
+import type { ImageProps } from "./Image.types.cjs";
+export type { ImageFit, ImageProps, ImageRadius } from "./Image.types.cjs";
+/**
+ * An `<img>` with a pulsing placeholder while it loads and a fallback if it fails, lazy loaded by default. Give it a
+ * `ratio` to fill a box of that shape, and a `caption` to put it in a figure.
+ */
+export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,7 @@
+import type { ImageProps } from "./Image.types.js";
+export type { ImageFit, ImageProps, ImageRadius } from "./Image.types.js";
+/**
+ * An `<img>` with a pulsing placeholder while it loads and a fallback if it fails, lazy loaded by default. Give it a
+ * `ratio` to fill a box of that shape, and a `caption` to put it in a figure.
+ */
+export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;

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

@@ -0,0 +1,28 @@
+import type { CSSProperties, ImgHTMLAttributes, ReactNode } from "react";
+export type ImageFit = "cover" | "contain";
+export type ImageRadius = "none" | "control" | "container";
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
+    /**
+     * What the image shows, for screen readers and when it can't load. Required: pass `alt=""` for a decorative image
+     * that adds nothing to the text around it.
+     */
+    alt: string;
+    /** Width over height, such as `16 / 9` or `1`: the image fills a box of that shape as wide as its container. Leave it out to keep the image's own size. */
+    ratio?: number;
+    /** `cover` fills the box and crops what's over; `contain` shows the whole image, with space around it if the shapes differ. @default "cover" */
+    fit?: ImageFit;
+    /** The corners: `control` matches inputs and buttons (8px), `container` matches cards (12px). @default "none" */
+    radius?: ImageRadius;
+    /** Shown instead when the image fails to load or there's no `src`. @default an image icon on a muted ground */
+    fallback?: ReactNode;
+    /** A line under the image. With it, the image and the caption come in a `<figure>`. */
+    caption?: ReactNode;
+    /** Lazy loads the image only as it nears the screen; pass `"eager"` for one at the top of the page. @default "lazy" */
+    loading?: "lazy" | "eager";
+    /** @default "async" */
+    decoding?: "async" | "sync" | "auto";
+    /** Goes on the outer box (or the figure), not the `<img>`, so you can size and place it. */
+    className?: string;
+    /** Goes on the outer box (or the figure), not the `<img>`, so you can size and place it. */
+    style?: CSSProperties;
+}