@openwarelabs/ui 0.14.1 → 0.16.0

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

@@ -0,0 +1,125 @@
+import type { KeyboardEvent, ReactNode, RefCallback } from "react";
+export interface MentionOption {
+    /** Identifies what was picked, in `mentions`: a user id, a command name. */
+    id: string;
+    /** The text shown in the list, matched as people type, and put in the text after the trigger: "@Ada Lovelace". */
+    label: string;
+    /** A muted line under the label in the list; matched too when it's a string. */
+    description?: ReactNode;
+    /** A small icon or avatar before the label. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface MentionTrigger {
+    /** What opens the list when it's typed at the start of a word: "@", "/", "#". */
+    char: string;
+    /**
+     * What to suggest. A list is filtered by what's typed after the trigger. A function gets that text and returns
+     * the options to show, itself or in a promise (to search a server); the list shows a spinner while it waits.
+     */
+    options: MentionOption[] | ((query: string) => MentionOption[] | Promise<MentionOption[]>);
+    /** Called after an option is put in the text. */
+    onSelect?(option: MentionOption): void;
+    /** Draws an option's row in the list in place of its icon, label and description. */
+    render?(option: MentionOption): ReactNode;
+    /** Names the list for screen readers while this trigger has it open, such as "People".
+     * @default labels.suggestions */
+    label?: string;
+}
+/** A mention in the text, found from the options picked (and every option of a trigger with a list). */
+export interface Mention {
+    /** The option's id. */
+    id: string;
+    label: string;
+    /** The trigger it was typed with: "@". */
+    trigger: string;
+    /** Where it starts in the text, at the trigger. */
+    start: number;
+    /** Where it ends, after the label. */
+    end: number;
+}
+/** The words it uses, for other languages. */
+export interface MentionLabels {
+    /** Names the list when its trigger has no `label`. @default "Suggestions" */
+    suggestions?: string;
+    /** Shown and read out while options load. @default "Loading…" */
+    loading?: string;
+    /** Shown and read out when nothing matches. @default "No matches" */
+    empty?: string;
+    /** Read out with the number of options. @default (count) => `${count} results` */
+    results?(count: number): string;
+}
+export interface UseMentionsOptions {
+    triggers: MentionTrigger[];
+    /** The text, when you control it, so `mentions` follows changes made from outside (clearing it after a send).
+     * Without it, the hook reads the text box as people type. */
+    value?: string;
+    /** Called with the mentions in the text when they change. */
+    onMentionsChange?(mentions: Mention[]): void;
+    /** Turns the suggestions off.
+     * @default false */
+    disabled?: boolean;
+    /** The list's rows: md 36px, sm 32px.
+     * @default "md" */
+    size?: "sm" | "md";
+    labels?: MentionLabels;
+}
+export interface UseMentionsResult {
+    /** Put on the text box: a <textarea> or <input>, a Textarea, an Input, or PromptInput (its ref is the textarea). */
+    ref: RefCallback<HTMLTextAreaElement | HTMLInputElement>;
+    /** Render it anywhere, such as right after the text box: the floating list and its live region. */
+    list: ReactNode;
+    /** The mentions in the text, in order. */
+    mentions: Mention[];
+    /** Whether the list is open. */
+    isOpen: boolean;
+}
+export interface MentionInputProps {
+    /** The characters that open suggestions, with their options. */
+    triggers: MentionTrigger[];
+    /** The text, when you control it. */
+    value?: string;
+    /** The text at first, when it controls it itself.
+     * @default "" */
+    defaultValue?: string;
+    /** Called with the text on every change. */
+    onChange?(value: string): void;
+    /** Called with the mentions in the text when they change: each one's id, label, trigger and place. */
+    onMentionsChange?(mentions: Mention[]): void;
+    /** A Textarea that grows with its text, in place of a one-line Input.
+     * @default false */
+    multiline?: boolean;
+    /** The rows a multiline box shows when it's empty.
+     * @default 3 */
+    rows?: number;
+    /** The tallest a multiline box grows before it scrolls. A number is pixels.
+     * @default 180 */
+    maxHeight?: number | string;
+    placeholder?: string;
+    /** The text box and the list: sm 32px for toolbars, md 40px in forms. A multiline box keeps its own size.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong. Field sets it when there's an error.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Submits the text under this name, so a Form or a plain form sends it. */
+    name?: string;
+    /** The text box's id, which a Field's label points at. */
+    id?: string;
+    autoFocus?: boolean;
+    /** Called for each key the open list doesn't take, such as Enter to send while it's closed. */
+    onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>): void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    labels?: MentionLabels;
+    className?: string;
+}
+/** The trigger being typed: which one, where it starts, and the text after it. Internal. */
+export interface MentionMatch {
+    trigger: MentionTrigger;
+    start: number;
+    query: string;
+}

package/dist/components/MentionInput/useMentions.d.cts

@@ -0,0 +1,8 @@
+import type { UseMentionsOptions, UseMentionsResult } from "./MentionInput.types.cjs";
+/**
+ * `@` mentions and `/` commands for any text box. Put `ref` on a textarea or input (a Textarea, an Input, or
+ * PromptInput) and render `list`: typing a trigger at the start of a word opens suggestions at the caret, and picking
+ * one puts "@Label " in the text. The box becomes a combobox; the hook listens to it directly, so the component that
+ * owns it needs no changes.
+ */
+export declare function useMentions({ triggers, value, onMentionsChange, disabled, size, labels }: UseMentionsOptions): UseMentionsResult;

package/dist/components/MentionInput/useMentions.d.ts

@@ -0,0 +1,8 @@
+import type { UseMentionsOptions, UseMentionsResult } from "./MentionInput.types.js";
+/**
+ * `@` mentions and `/` commands for any text box. Put `ref` on a textarea or input (a Textarea, an Input, or
+ * PromptInput) and render `list`: typing a trigger at the start of a word opens suggestions at the caret, and picking
+ * one puts "@Label " in the text. The box becomes a combobox; the hook listens to it directly, so the component that
+ * owns it needs no changes.
+ */
+export declare function useMentions({ triggers, value, onMentionsChange, disabled, size, labels }: UseMentionsOptions): UseMentionsResult;

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/NotificationCenter/NotificationCenter.d.cts

@@ -0,0 +1,12 @@
+import type { NotificationCenterProps, NotificationListProps } from "./NotificationCenter.types.cjs";
+export type { NotificationCenterProps, NotificationFilter, NotificationItem, NotificationLabels, NotificationListProps, } from "./NotificationCenter.types.cjs";
+/**
+ * The notifications as a list, newest first, optionally under Today, Yesterday and Earlier. NotificationCenter shows it
+ * in its popover; use it on its own for a full page of them.
+ */
+export declare function NotificationList({ items, onRead, onDismiss, onItemClick, groupByDay, empty, locale, labels, "aria-label": ariaLabel, className, }: NotificationListProps): import("react").JSX.Element;
+/**
+ * A bell with the unread count that opens the latest notifications in a popover: All and Unread tabs, "Mark all as
+ * read", and a footer for a link to the full page. New ones that arrive while it's closed are announced once.
+ */
+export declare function NotificationCenter({ items, onRead, onReadAll, onDismiss, onItemClick, open, defaultOpen, onOpenChange, tabs, filter, defaultFilter, onFilterChange, footer, empty, maxCount, trigger, width, groupByDay, locale, labels, className, }: NotificationCenterProps): import("react").JSX.Element;

package/dist/components/NotificationCenter/NotificationCenter.d.ts

@@ -0,0 +1,12 @@
+import type { NotificationCenterProps, NotificationListProps } from "./NotificationCenter.types.js";
+export type { NotificationCenterProps, NotificationFilter, NotificationItem, NotificationLabels, NotificationListProps, } from "./NotificationCenter.types.js";
+/**
+ * The notifications as a list, newest first, optionally under Today, Yesterday and Earlier. NotificationCenter shows it
+ * in its popover; use it on its own for a full page of them.
+ */
+export declare function NotificationList({ items, onRead, onDismiss, onItemClick, groupByDay, empty, locale, labels, "aria-label": ariaLabel, className, }: NotificationListProps): import("react").JSX.Element;
+/**
+ * A bell with the unread count that opens the latest notifications in a popover: All and Unread tabs, "Mark all as
+ * read", and a footer for a link to the full page. New ones that arrive while it's closed are announced once.
+ */
+export declare function NotificationCenter({ items, onRead, onReadAll, onDismiss, onItemClick, open, defaultOpen, onOpenChange, tabs, filter, defaultFilter, onFilterChange, footer, empty, maxCount, trigger, width, groupByDay, locale, labels, className, }: NotificationCenterProps): import("react").JSX.Element;

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

@@ -0,0 +1,129 @@
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+export interface NotificationItem {
+    /** Unique among the items. */
+    id: string;
+    /** What happened, in a line: "Clara mentioned you in Pricing". It names the item for screen readers. */
+    title: ReactNode;
+    /** A second line: a quote, or where it happened. */
+    description?: ReactNode;
+    /** When it happened: a Date or an ISO string. It shows as "5 min ago", with the full date on hover. */
+    time: Date | string;
+    /** Seen already. Unread items are bold, with a dot and a hidden "Unread" for screen readers. */
+    read?: boolean;
+    /** Who it's from, usually an `<Avatar>`. Hidden from screen readers: say who in the title. */
+    avatar?: ReactNode;
+    /** A 16px icon on a round tile, for things no person did (a deploy, a reminder), when there's no avatar. */
+    icon?: ReactNode;
+    /** Makes the item a link to what it's about. Without it, the item is a button. */
+    href?: string;
+    /** A button or two beside the item, such as Accept and Decline. They sit outside the item's own link. */
+    actions?: ReactNode;
+    /** The heading it's listed under. Set it to group by your own sections; it wins over `groupByDay`. */
+    group?: string;
+}
+export interface NotificationLabels {
+    /** The popover's heading and name. @default "Notifications" */
+    title?: string;
+    /** The bell's name with the count. @default (unread) => unread ? `Notifications, ${unread} unread` : "Notifications" */
+    trigger?(unread: number): string;
+    /** @default "Mark all as read" */
+    markAllRead?: string;
+    /** The tab list's name. @default "Show" */
+    filter?: string;
+    /** @default "All" */
+    all?: string;
+    /** @default "Unread" */
+    unreadTab?: string;
+    /** Read before each unread item. @default "Unread" */
+    unread?: string;
+    /** The ✕ on each item, followed by its title. @default "Dismiss" */
+    dismiss?: string;
+    /** Said once when new ones arrive while it's closed. @default (count) => count === 1 ? "1 new notification" : `${count} new notifications` */
+    announce?(count: number): string;
+    /** @default "Today" */
+    today?: string;
+    /** @default "Yesterday" */
+    yesterday?: string;
+    /** @default "Earlier" */
+    earlier?: string;
+    /** The empty list's title. @default "You're all caught up" */
+    empty?: string;
+    /** The empty Unread tab's title. @default "No unread notifications" */
+    emptyUnread?: string;
+}
+export interface NotificationListProps {
+    /** The notifications, newest first. */
+    items: NotificationItem[];
+    /** Called with an unread item's id when it's opened. */
+    onRead?(id: string): void;
+    /** Shows a ✕ on each item that calls this with its id; remove the item from `items`. */
+    onDismiss?(id: string): void;
+    /** Called when an item is clicked, before its link is followed. */
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+    /** Lists the items under Today, Yesterday and Earlier. An item's own `group` wins.
+     * @default false */
+    groupByDay?: boolean;
+    /** What shows when there are no items.
+     * @default an EmptyState saying "You're all caught up" */
+    empty?: ReactNode;
+    /** The locale for "5 min ago" and dates. Defaults to the browser's. */
+    locale?: string;
+    /** The words it uses, for other languages. */
+    labels?: NotificationLabels;
+    /** Names the list for screen readers, when it has no heading of its own. */
+    "aria-label"?: string;
+    className?: string;
+}
+export interface NotificationCenterProps extends Omit<NotificationListProps, "aria-label"> {
+    /** Called when "Mark all as read" is pressed; mark every item read. */
+    onReadAll?(): void;
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself. Opened on load, it doesn't pull focus into it.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?(open: boolean): void;
+    /** All and Unread tabs above the list.
+     * @default true */
+    tabs?: boolean;
+    /** The tab showing, when you control it. */
+    filter?: NotificationFilter;
+    /** The tab it starts on, when it controls itself.
+     * @default "all" */
+    defaultFilter?: NotificationFilter;
+    /** Called when the tab changes. */
+    onFilterChange?(filter: NotificationFilter): void;
+    /** Under the list, such as a "View all" link to a full page. */
+    footer?: ReactNode;
+    /** The badge shows "9+" above this.
+     * @default 9 */
+    maxCount?: number;
+    /** Your own button in place of the bell. Give it an aria-label with the unread count. */
+    trigger?: ReactElement;
+    /** Pixels, or any CSS width. It never gets wider than the window, less a margin.
+     * @default 380 */
+    width?: number | string;
+}
+/** Which items a NotificationCenter lists. */
+export type NotificationFilter = "all" | "unread";
+/** Internal: a run of items under one heading. */
+export interface NotificationGroup {
+    key: string;
+    label?: string;
+    items: NotificationItem[];
+}
+/** Internal: one row of the list. */
+export interface NotificationRowProps {
+    item: NotificationItem;
+    /** "5 min ago", or the date when it's older than a week. */
+    relative: string;
+    /** The full date and time, for the hover title. */
+    full: string;
+    /** The machine-readable time, for `<time dateTime>`. */
+    iso?: string;
+    labels: NotificationLabels;
+    onRead?(id: string): void;
+    onDismiss?(id: string): void;
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+}

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

@@ -0,0 +1,129 @@
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+export interface NotificationItem {
+    /** Unique among the items. */
+    id: string;
+    /** What happened, in a line: "Clara mentioned you in Pricing". It names the item for screen readers. */
+    title: ReactNode;
+    /** A second line: a quote, or where it happened. */
+    description?: ReactNode;
+    /** When it happened: a Date or an ISO string. It shows as "5 min ago", with the full date on hover. */
+    time: Date | string;
+    /** Seen already. Unread items are bold, with a dot and a hidden "Unread" for screen readers. */
+    read?: boolean;
+    /** Who it's from, usually an `<Avatar>`. Hidden from screen readers: say who in the title. */
+    avatar?: ReactNode;
+    /** A 16px icon on a round tile, for things no person did (a deploy, a reminder), when there's no avatar. */
+    icon?: ReactNode;
+    /** Makes the item a link to what it's about. Without it, the item is a button. */
+    href?: string;
+    /** A button or two beside the item, such as Accept and Decline. They sit outside the item's own link. */
+    actions?: ReactNode;
+    /** The heading it's listed under. Set it to group by your own sections; it wins over `groupByDay`. */
+    group?: string;
+}
+export interface NotificationLabels {
+    /** The popover's heading and name. @default "Notifications" */
+    title?: string;
+    /** The bell's name with the count. @default (unread) => unread ? `Notifications, ${unread} unread` : "Notifications" */
+    trigger?(unread: number): string;
+    /** @default "Mark all as read" */
+    markAllRead?: string;
+    /** The tab list's name. @default "Show" */
+    filter?: string;
+    /** @default "All" */
+    all?: string;
+    /** @default "Unread" */
+    unreadTab?: string;
+    /** Read before each unread item. @default "Unread" */
+    unread?: string;
+    /** The ✕ on each item, followed by its title. @default "Dismiss" */
+    dismiss?: string;
+    /** Said once when new ones arrive while it's closed. @default (count) => count === 1 ? "1 new notification" : `${count} new notifications` */
+    announce?(count: number): string;
+    /** @default "Today" */
+    today?: string;
+    /** @default "Yesterday" */
+    yesterday?: string;
+    /** @default "Earlier" */
+    earlier?: string;
+    /** The empty list's title. @default "You're all caught up" */
+    empty?: string;
+    /** The empty Unread tab's title. @default "No unread notifications" */
+    emptyUnread?: string;
+}
+export interface NotificationListProps {
+    /** The notifications, newest first. */
+    items: NotificationItem[];
+    /** Called with an unread item's id when it's opened. */
+    onRead?(id: string): void;
+    /** Shows a ✕ on each item that calls this with its id; remove the item from `items`. */
+    onDismiss?(id: string): void;
+    /** Called when an item is clicked, before its link is followed. */
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+    /** Lists the items under Today, Yesterday and Earlier. An item's own `group` wins.
+     * @default false */
+    groupByDay?: boolean;
+    /** What shows when there are no items.
+     * @default an EmptyState saying "You're all caught up" */
+    empty?: ReactNode;
+    /** The locale for "5 min ago" and dates. Defaults to the browser's. */
+    locale?: string;
+    /** The words it uses, for other languages. */
+    labels?: NotificationLabels;
+    /** Names the list for screen readers, when it has no heading of its own. */
+    "aria-label"?: string;
+    className?: string;
+}
+export interface NotificationCenterProps extends Omit<NotificationListProps, "aria-label"> {
+    /** Called when "Mark all as read" is pressed; mark every item read. */
+    onReadAll?(): void;
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself. Opened on load, it doesn't pull focus into it.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?(open: boolean): void;
+    /** All and Unread tabs above the list.
+     * @default true */
+    tabs?: boolean;
+    /** The tab showing, when you control it. */
+    filter?: NotificationFilter;
+    /** The tab it starts on, when it controls itself.
+     * @default "all" */
+    defaultFilter?: NotificationFilter;
+    /** Called when the tab changes. */
+    onFilterChange?(filter: NotificationFilter): void;
+    /** Under the list, such as a "View all" link to a full page. */
+    footer?: ReactNode;
+    /** The badge shows "9+" above this.
+     * @default 9 */
+    maxCount?: number;
+    /** Your own button in place of the bell. Give it an aria-label with the unread count. */
+    trigger?: ReactElement;
+    /** Pixels, or any CSS width. It never gets wider than the window, less a margin.
+     * @default 380 */
+    width?: number | string;
+}
+/** Which items a NotificationCenter lists. */
+export type NotificationFilter = "all" | "unread";
+/** Internal: a run of items under one heading. */
+export interface NotificationGroup {
+    key: string;
+    label?: string;
+    items: NotificationItem[];
+}
+/** Internal: one row of the list. */
+export interface NotificationRowProps {
+    item: NotificationItem;
+    /** "5 min ago", or the date when it's older than a week. */
+    relative: string;
+    /** The full date and time, for the hover title. */
+    full: string;
+    /** The machine-readable time, for `<time dateTime>`. */
+    iso?: string;
+    labels: NotificationLabels;
+    onRead?(id: string): void;
+    onDismiss?(id: string): void;
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+}

package/dist/components/QRCode/QRCode.d.cts

@@ -0,0 +1,18 @@
+import type { QRCodeDataURLOptions, QRCodeProps } from "./QRCode.types.cjs";
+export type { QRCodeDataURLOptions, QRCodeProps, QRLevel, QROptions } from "./QRCode.types.cjs";
+export { encodeQR } from "./qr.cjs";
+/**
+ * A QR code, drawn as one SVG path: for sharing a link, setting up two-factor authentication or pairing a device.
+ * The encoder is built in. It's near black on near white in both themes, because scanners need a light ground.
+ */
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * The SVG markup of a rendered QR code, with its colours written in, ready to save as a .svg file. Pass the element
+ * from the QRCode's ref.
+ */
+export declare function qrCodeToSVG(svg: SVGSVGElement): string;
+/**
+ * A rendered QR code as an image data URL, PNG by default, for a download link or a canvas. `scale` multiplies its
+ * size for a sharper image. A logo from another origin that doesn't allow CORS is left out; the code still scans.
+ */
+export declare function qrCodeToDataURL(svg: SVGSVGElement, { type, scale }?: QRCodeDataURLOptions): Promise<string>;