@kb.ui/react 0.10.4 → 0.12.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,33 @@
+import { Accordion as Base } from "@base-ui/react/accordion";
+export type AccordionProps<Value = string> = Omit<Base.Root.Props<Value>, "className"> & {
+    /** Plain class string on root. */
+    className?: string | undefined;
+};
+export type AccordionItemProps = Omit<Base.Item.Props, "className"> & {
+    /** Plain class string on item. */
+    className?: string | undefined;
+};
+export type AccordionHeaderProps = Omit<Base.Header.Props, "className"> & {
+    /** Plain class string on heading; use render to set heading rank. */
+    className?: string | undefined;
+};
+export type AccordionTriggerProps = Omit<Base.Trigger.Props, "className"> & {
+    /** Plain class string on trigger. */
+    className?: string | undefined;
+};
+export type AccordionPanelProps = Omit<Base.Panel.Props, "className"> & {
+    /** Plain class string on panel. */
+    className?: string | undefined;
+};
+declare function AccordionRoot<Value = string>({ className, ...props }: AccordionProps<Value>): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react").JSX.Element;
+declare function AccordionHeader({ className, ...props }: AccordionHeaderProps): import("react").JSX.Element;
+declare function AccordionTrigger({ className, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+declare function AccordionPanel({ className, children, render, ...props }: AccordionPanelProps): import("react").JSX.Element;
+export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Trigger: typeof AccordionTrigger;
+    Panel: typeof AccordionPanel;
+};
+export {};

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type ImageProps } from "../Image/Image";
+export type AvatarShape = "circle" | "square" | "rounded" | "hexagon" | "diamond";
+export type AvatarProps = Omit<ComponentProps<"span">, "children" | "onLoad" | "onError"> & Pick<ImageProps, "src" | "srcSet" | "sizes" | "loading" | "onLoad" | "onError"> & {
+    /** Full identity; remains accessible when photo fails. */
+    name: string;
+    /** Caller-owned initials; defaults to first and last name initials. */
+    initials?: string | undefined;
+    /** Hide duplicate identity beside visible text. */
+    decorative?: boolean | undefined;
+    /** Fixed identity dimensions. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    /** Identity silhouette; photo and initials remain upright. */
+    shape?: AvatarShape | undefined;
+    /** Extra classes for root, media and initials. */
+    classNames?: ClassNames<"root" | "media" | "initials"> | undefined;
+};
+export declare function Avatar({ name, initials, decorative, size, shape, src, srcSet, sizes, loading, onLoad, onError, className, classNames, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/components/Code/Code.d.ts

@@ -1,3 +1,26 @@
-import type { ComponentProps } from "react";
-export type CodeProps = ComponentProps<"code">;
-export declare function Code({ className, ...props }: CodeProps): import("react").JSX.Element;
+import { type ComponentProps, type Ref } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type CopyFeedbackProps } from "../../utils/useClipboard";
+import { type CodeLanguage, type CodeToken } from "./tokenize";
+export { type CodeLanguage, type CodeSyntaxKind, type CodeToken, tokenizeCode, } from "./tokenize";
+export type CodePart = "header" | "meta" | "title" | "language" | "actions" | "toggle" | "copy" | "feedback" | "viewport" | "pre" | "content" | "line" | "lineNumber" | "lineText";
+export type CodeProps = Omit<ComponentProps<"code">, "ref" | "title" | "onCopy"> & CopyFeedbackProps & {
+    ref?: Ref<HTMLElement> | undefined;
+    block?: boolean | undefined;
+    language?: CodeLanguage | undefined;
+    title?: string | undefined;
+    copyable?: boolean | undefined;
+    lineNumbers?: boolean | undefined;
+    startLine?: number | undefined;
+    highlightLines?: readonly number[] | undefined;
+    minLines?: number | undefined;
+    collapsible?: boolean | undefined;
+    collapsedLines?: number | undefined;
+    defaultCollapsed?: boolean | undefined;
+    collapsed?: boolean | undefined;
+    onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+    maxHeight?: string | number | undefined;
+    tokens?: readonly CodeToken[] | undefined;
+    classNames?: ClassNames<CodePart> | undefined;
+};
+export declare function Code({ ref, block, language, title, copyable, onCopy, onCopyError, disabled, feedbackDuration, copyLabel, copyingLabel, copiedLabel, copyErrorLabel, successMessage, errorMessage, lineNumbers, startLine, highlightLines, minLines, collapsible, collapsedLines, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, maxHeight, tokens, classNames, className, style, children, ...props }: CodeProps): import("react").JSX.Element;

package/dist/components/Code/tokenize.d.ts

@@ -0,0 +1,5 @@
+export type CodeLanguage = "tsx" | "ts" | "typescript" | "jsx" | "js" | "javascript" | "css" | "html" | "json" | "bash" | "sh" | "shell" | "shellscript" | "plain" | "text";
+export type CodeSyntaxKind = "keyword" | "string" | "comment" | "number" | "tag" | "attribute" | "type" | "function" | "operator" | "property";
+export type CodeToken = readonly [start: number, end: number, kind: CodeSyntaxKind];
+export declare function formatCodeLanguage(language?: CodeLanguage): string | undefined;
+export declare function tokenizeCode(code: string, language?: CodeLanguage): CodeToken[];

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from "react";
+import { type CodeProps } from "../Code/Code";
+export type CodeBlockProps = Omit<CodeProps, "block" | "children" | "ref"> & {
+    /** Exact source string, including whitespace and trailing newlines. */
+    children: string;
+    /** Root block element. */
+    ref?: Ref<HTMLDivElement> | undefined;
+};
+/** Explicit block rendering with Code's highlighting, line, and collapse contracts. */
+export declare function CodeBlock({ className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/Collection/Collection.d.ts

@@ -0,0 +1,99 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type UseCollectionOptions } from "./useCollection";
+export type CollectionColumn<T> = {
+    /** Unique column identity used in sort requests. */
+    key: string;
+    /** Visible column label. */
+    header: string;
+    /** Record cell content. */
+    cell: (item: T) => ReactNode;
+    /** Ascending comparator; enables sorting in client mode. */
+    compare?: ((a: T, b: T) => number) | undefined;
+    /** Enable a server-owned sortable column without a local comparator. */
+    sortable?: boolean | undefined;
+};
+export type CollectionFilter = {
+    /** State filter key. */
+    key: string;
+    /** Visible select label. */
+    label: string;
+    /** Nonempty facet values and their visible labels. */
+    options: readonly {
+        value: string;
+        label: string;
+    }[];
+};
+export type CollectionBulkAction = {
+    /** Unique action identity. */
+    key: string;
+    /** Visible action label. */
+    label: string;
+    /** Receives explicit ID snapshot; rejection preserves selection. */
+    onAction: (keys: readonly string[]) => void | Promise<void>;
+    /** Caller-owned permission or availability constraint. */
+    disabled?: boolean | undefined;
+};
+export type CollectionPaginationProps = Omit<ComponentProps<"nav">, "onChange"> & {
+    /** One-based current page; clamped to available pages. */
+    page: number;
+    /** Positive integer page size. */
+    pageSize: number;
+    /** Known non-negative total after filtering. */
+    totalItems: number;
+    /** Receives bounded one-based page requests. */
+    onPageChange: (page: number) => void;
+    /** Receives page-size requests; caller also resets page to one. */
+    onPageSizeChange?: ((pageSize: number) => void) | undefined;
+    /** Positive integer page-size choices. */
+    pageSizes?: readonly number[] | undefined;
+    /** Disable navigation while data or actions are pending. */
+    disabled?: boolean | undefined;
+};
+export declare function CollectionPagination({ page, pageSize, totalItems, onPageChange, onPageSizeChange, pageSizes, disabled, className, ...props }: CollectionPaginationProps): import("react").JSX.Element;
+export type CollectionBulkActionsProps = ComponentProps<"fieldset"> & {
+    /** Explicit selected record IDs, including off-page selection. */
+    selectedKeys: readonly string[];
+    /** Available application-owned operations. */
+    actions: readonly CollectionBulkAction[];
+    /** Clear current selection on request. */
+    onClear: () => void;
+    /** Remove successfully submitted IDs; omitted preserves selection. */
+    onSuccess?: ((keys: readonly string[]) => void) | undefined;
+    /** Lock surrounding collection controls during an operation. */
+    onPendingChange?: ((pending: boolean) => void) | undefined;
+    /** Disable actions while parent data is unavailable. */
+    disabled?: boolean | undefined;
+};
+export declare function CollectionBulkActions({ selectedKeys, actions, onClear, onSuccess, onPendingChange, disabled, className, ...props }: CollectionBulkActionsProps): import("react").JSX.Element;
+type CollectionPart = "toolbar" | "filters" | "viewport" | "table" | "caption" | "head" | "cell" | "row" | "empty" | "status" | "bulk" | "pagination";
+export type CollectionProps<T> = UseCollectionOptions<T> & Omit<ComponentProps<"section">, "children" | "defaultValue"> & {
+    /** Accessible region name and visible table caption. */
+    label: string;
+    /** Stable accessible record name used by selection controls. */
+    getItemLabel: (item: T) => string;
+    /** Ordered table columns. */
+    columns: readonly CollectionColumn<T>[];
+    /** Facet controls; matches applies their values in client mode. */
+    filters?: readonly CollectionFilter[] | undefined;
+    /** Application-owned operations on explicit selected IDs. */
+    bulkActions?: readonly CollectionBulkAction[] | undefined;
+    /** Hide selection controls for read-only collections. */
+    selectable?: boolean | undefined;
+    /** Suppress rows and lock controls while fetching. */
+    loading?: boolean | undefined;
+    /** Caller-owned fetch failure and recovery content. */
+    error?: ReactNode | undefined;
+    /** Content shown when no records match. */
+    empty?: ReactNode | undefined;
+    /** Additional named controls or recovery actions. */
+    toolbar?: ReactNode | undefined;
+    /** Classes for collection slots. */
+    classNames?: ClassNames<CollectionPart> | undefined;
+};
+declare function CollectionRoot<T>({ label, getItemLabel, columns, filters, bulkActions, selectable, loading, error, empty, toolbar, classNames, className, items, getKey, isItemDisabled, matches, compare, mode, totalItems, state, defaultState, onStateChange, ...props }: CollectionProps<T>): import("react").JSX.Element;
+export declare const Collection: typeof CollectionRoot & {
+    Pagination: typeof CollectionPagination;
+    BulkActions: typeof CollectionBulkActions;
+};
+export {};

package/dist/components/Collection/useCollection.d.ts

@@ -0,0 +1,66 @@
+export type CollectionSort = {
+    /** Column identifier. */
+    key: string;
+    /** Comparison direction. */
+    direction: "ascending" | "descending";
+};
+export type CollectionState = {
+    /** Search text, interpreted by matches or the server. */
+    query: string;
+    /** Facet values; empty values mean no constraint. */
+    filters: Readonly<Record<string, string>>;
+    /** Active sort; null preserves input order. */
+    sort: CollectionSort | null;
+    /** One-based page. */
+    page: number;
+    /** Positive integer records per page. */
+    pageSize: number;
+    /** Explicit record IDs; never an implicit all-results selection. */
+    selectedKeys: readonly string[];
+};
+export type CollectionData<T> = {
+    /** Complete local dataset or one server page. */
+    items: readonly T[];
+    /** Unique, stable identity across pages and updates. */
+    getKey: (item: T) => string;
+    /** Disable selection for an ineligible record. */
+    isItemDisabled?: ((item: T) => boolean) | undefined;
+    /** Client search and facet predicate; server mode ignores it. */
+    matches?: ((item: T, query: string, filters: CollectionState["filters"]) => boolean) | undefined;
+    /** Client comparison for the requested sort; server mode ignores it. */
+    compare?: ((a: T, b: T, sort: CollectionSort) => number) | undefined;
+} & ({
+    mode?: "client" | undefined;
+    totalItems?: never;
+} | {
+    mode: "server";
+    totalItems: number;
+});
+export type UseCollectionOptions<T> = CollectionData<T> & {
+    /** Controlled workflow state; owner must apply changes. */
+    state?: CollectionState | undefined;
+    /** Initial uncontrolled workflow state. */
+    defaultState?: Partial<CollectionState> | undefined;
+    /** Receives complete next state for URL, server or external ownership. */
+    onStateChange?: ((state: CollectionState) => void) | undefined;
+};
+export declare function positiveInteger(value: number, name: string): number;
+export declare function collectionPageCount(totalItems: number, pageSize: number): number;
+export declare function useCollection<T>(options: UseCollectionOptions<T>): {
+    state: CollectionState;
+    items: readonly T[];
+    totalItems: number;
+    pageCount: number;
+    pageSelection: "all" | "none" | "some";
+    selectableCount: number;
+    setQuery: (query: string) => void;
+    setFilter: (key: string, value: string) => void;
+    setSort: (sort: CollectionSort | null) => void;
+    setPage: (page: number) => void;
+    setPageSize: (pageSize: number) => void;
+    toggle: (key: string, checked: boolean) => void;
+    selectPage: (checked: boolean) => void;
+    clearSelection: () => void;
+    removeSelection: (keysToRemove: readonly string[]) => void;
+};
+export type CollectionController<T> = ReturnType<typeof useCollection<T>>;

package/dist/components/CollectionList/CollectionList.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from "react";
+export type CollectionListElement = "ul" | "ol";
+export type CollectionListProps<T extends CollectionListElement = "ul"> = ComponentProps<T> & {
+    as?: T | undefined;
+    density?: "comfortable" | "dense" | undefined;
+    dividers?: boolean | undefined;
+};
+export declare function CollectionList<T extends CollectionListElement = "ul">({ as, density, dividers, className, ...props }: CollectionListProps<T>): import("react").DetailedReactHTMLElement<Omit<CollectionListProps<T>, "as" | "className" | "density" | "dividers"> & {
+    role: "list" | NonNullable<CollectionListProps<T>["role"]>;
+} & {
+    className: string;
+} & Record<`data-${string}`, string>, HTMLUListElement>;

package/dist/components/CollectionRow/CollectionRow.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type CollectionRowProps = Omit<ComponentProps<"li">, "title" | "children"> & {
+    /** Primary record name; compose a named link for navigation. */
+    title: ReactNode;
+    /** Supporting detail; rich content and zero values remain intact. */
+    description?: ReactNode | undefined;
+    /** Leading icon, avatar or independent selection control. */
+    leading?: ReactNode | undefined;
+    metadata?: ReactNode | undefined;
+    /** Independent named links, Buttons or Menu composition. */
+    actions?: ReactNode | undefined;
+    /** Visual selection; selection control supplies accessible state. */
+    selected?: boolean | undefined;
+    classNames?: ClassNames<"layout" | "leading" | "content" | "title" | "description" | "aside" | "metadata" | "actions"> | undefined;
+};
+export declare function CollectionRow({ title, description, leading, metadata, actions, selected, classNames, className, ...props }: CollectionRowProps): import("react").JSX.Element;

package/dist/components/Combobox/Combobox.d.ts

@@ -1,6 +1,7 @@
 import { Combobox as Base } from "@base-ui/react/combobox";
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { type ClassNames } from "../../utils/kb";
+import { type MultiSelectProps } from "../MultiSelect/MultiSelect";
 /** Single selectable option in a Combobox list. */
 export interface ComboboxOption {
     /** Option value committed to `onValueChange`. */
@@ -14,6 +15,8 @@ export interface ComboboxOption {
 export type ComboboxSlot = "label" | "shell" | "input" | "actions" | "clear" | "trigger" | "positioner" | "popup" | "list" | "option" | "optionIndicator" | "optionLabel" | "empty" | "description" | "error";
 /** Props for the searchable single-select Combobox component. */
 export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange"> {
+    /** Choose one option; omit for single selection. */
+    multiple?: false | undefined;
     /** Visible label naming the combobox input. */
     label: string;
     /** Selectable options shown and filtered in the popup list. */
@@ -61,5 +64,14 @@ export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<"div">, "de
     /** Extra classes for inner parts, keyed by slot name. */
     classNames?: ClassNames<ComboboxSlot>;
 }
-/** Searchable single-choice combobox with type-to-filter and removable selection. */
-export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;
+/** Multiple-choice combobox props; shares MultiSelect behavior and styling. */
+export interface ComboboxMultipleProps extends MultiSelectProps {
+    /** Enable multiple selections with removable chips. */
+    multiple: true;
+}
+/** Explicit single-selection props; preserves existing ComboboxProps contract. */
+export type ComboboxSingleProps = ComboboxProps;
+type ComboboxSelectionProps = ComboboxProps | ComboboxMultipleProps;
+/** Searchable single or multiple selection with removable values. */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxSelectionProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/ConfirmAction/ConfirmAction.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type DialogContentProps, type DialogTriggerProps } from "../Dialog/Dialog";
+export type ConfirmActionSlot = "popup" | "backdrop" | "details" | "error";
+/** Destructive action behind a modal confirmation; the trigger only opens it. */
+export type ConfirmActionProps = Omit<DialogTriggerProps, "className" | "title" | "children" | "handle" | "payload"> & {
+    /** Trigger text; also the confirm button text unless confirmLabel is set. */
+    children: ReactNode;
+    /** Plain class string for the trigger. */
+    className?: string | undefined;
+    /** Dialog heading and accessible name; ask the question the action settles. */
+    title: ReactNode;
+    /** Consequence of confirming; the dialog's accessible description. */
+    description?: ReactNode | undefined;
+    /** Further consequence detail, such as what else is removed. */
+    details?: ReactNode | undefined;
+    /** Runs the action. Throw or reject to keep the dialog open with an error. */
+    onConfirm: () => unknown;
+    /** Runs once after success, after the dialog has closed; remove the trigger here. */
+    onConfirmed?: (() => void) | undefined;
+    /** Confirm button text; defaults to the trigger's children. */
+    confirmLabel?: ReactNode | undefined;
+    /** Confirm button text while the action runs; defaults to confirmLabel. */
+    pendingLabel?: ReactNode | undefined;
+    /** Cancel button text. */
+    cancelLabel?: ReactNode | undefined;
+    /** Alert shown after a failure; a function receives the thrown reason. */
+    errorMessage?: ReactNode | ((error: unknown) => ReactNode) | undefined;
+    /** Controlled visibility. */
+    open?: boolean | undefined;
+    /** Initial visibility when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Receives each requested visibility change, including the close after success. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Focus target after closing; set it when success removes the trigger. */
+    finalFocus?: DialogContentProps["finalFocus"] | undefined;
+    /** Portal target; defaults to document.body. */
+    container?: DialogContentProps["container"] | undefined;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<ConfirmActionSlot> | undefined;
+};
+export declare function ConfirmAction({ title, description, details, onConfirm, onConfirmed, confirmLabel, pendingLabel, cancelLabel, errorMessage, open, defaultOpen, onOpenChange, finalFocus, container, classNames, className, children, render, ...props }: ConfirmActionProps): import("react").JSX.Element;

package/dist/components/CopyableText/CopyableText.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type CopyFeedbackProps } from "../../utils/useClipboard";
+import type { CodeLanguage } from "../Code/tokenize";
+export type CopyableTextPart = "label" | "value" | "actions" | "toggle" | "copy" | "feedback" | "link" | "highlight" | "code";
+export type CopyableTextFormat = "auto" | "text" | "code";
+export type CopyableTextTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+export type CopyableTextProps = Omit<ComponentProps<"span">, "onCopy"> & CopyFeedbackProps & {
+    /** Exact clipboard value; display formatting never changes copied bytes. */
+    value: string;
+    /** Optional visible context above value. */
+    label?: string | undefined;
+    /** Bordered field or inline text with adjacent copy action. */
+    appearance?: "field" | "plain" | undefined;
+    /** Content and copy target density. */
+    size?: "sm" | "md" | undefined;
+    /** Monospace display for identifiers, paths, and commands. */
+    mono?: boolean | undefined;
+    /** Value color and subtle field tint; independent of clipboard state. */
+    tone?: CopyableTextTone | undefined;
+    /** Single-line preview with explicit full-value disclosure. */
+    truncate?: boolean | undefined;
+    /** Collapsed disclosure button text. */
+    expandLabel?: string | undefined;
+    /** Expanded disclosure button text. */
+    collapseLabel?: string | undefined;
+    /** Case-sensitive literal terms to emphasize; longer matches win overlaps. */
+    highlight?: string | readonly string[] | undefined;
+    /** Automatic recognition, literal text, or explicit source code. */
+    format?: CopyableTextFormat | undefined;
+    /** Code language hint; forces code in automatic mode. */
+    language?: CodeLanguage | undefined;
+    /** Override automatic web/email links when full content is visible. */
+    linkify?: boolean | undefined;
+    /** Extra classes for each rendered part. */
+    classNames?: ClassNames<CopyableTextPart> | undefined;
+};
+export declare function CopyableText({ value, label, appearance, size, mono, tone, truncate, expandLabel, collapseLabel, highlight, linkify, format, language, copyLabel, copyingLabel, copiedLabel, copyErrorLabel, successMessage, errorMessage, disabled, feedbackDuration, onCopy, onCopyError, className, classNames, children, ...props }: CopyableTextProps): import("react").JSX.Element;

package/dist/components/CopyableText/content.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type CodeLanguage } from "../Code/tokenize";
+type ContentOptions = {
+    highlight?: string | readonly string[] | undefined;
+    linkify: boolean;
+    detectCode: boolean;
+    codeLanguage?: CodeLanguage | undefined;
+    codeClassName?: string | undefined;
+    highlightClassName?: string | undefined;
+    linkClassName?: string | undefined;
+};
+export declare function detectCopyableLanguage(value: string): CodeLanguage | undefined;
+export declare function renderCopyableContent(value: string, options: ContentOptions): ReactNode;
+export {};

package/dist/components/Dashboard/Dashboard.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type DashboardPart = "header" | "metrics" | "panels" | "primary" | "secondary";
+export interface DashboardProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Page title, freshness and page actions; usually a PageHeader. */
+    header?: ReactNode | undefined;
+    /** Row of headline metrics below the header. */
+    metrics?: ReactNode | undefined;
+    /** Main panels; take two thirds beside secondary on wide pages. */
+    primary?: ReactNode | undefined;
+    /** Supporting panels; move below primary on narrow pages. */
+    secondary?: ReactNode | undefined;
+    /** Classes for inner regions, keyed by region. */
+    classNames?: ClassNames<DashboardPart> | undefined;
+}
+/** Layout intent for an overview page: header, metrics, then primary and secondary panels. */
+export declare const Dashboard: ({ ref, header, metrics, primary, secondary, className, classNames, ...props }: DashboardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+export type DescriptionListProps = ComponentProps<"dl"> & {
+    /** Responsive label/value columns, always horizontal, or always stacked. */
+    layout?: "responsive" | "horizontal" | "stacked" | undefined;
+    density?: "comfortable" | "dense" | undefined;
+    dividers?: boolean | undefined;
+};
+declare function DescriptionListRoot({ layout, density, dividers, className, ...props }: DescriptionListProps): import("react").JSX.Element;
+export type DescriptionListItemProps = ComponentProps<"div">;
+declare function DescriptionListItem({ className, ...props }: DescriptionListItemProps): import("react").JSX.Element;
+export type DescriptionListTermProps = ComponentProps<"dt">;
+declare function DescriptionListTerm({ className, ...props }: DescriptionListTermProps): import("react").JSX.Element;
+export type DescriptionListDetailProps = ComponentProps<"dd">;
+declare function DescriptionListDetail({ className, ...props }: DescriptionListDetailProps): import("react").JSX.Element;
+export declare const DescriptionList: typeof DescriptionListRoot & {
+    Item: typeof DescriptionListItem;
+    Term: typeof DescriptionListTerm;
+    Detail: typeof DescriptionListDetail;
+};
+export {};

package/dist/components/Dialog/Dialog.d.ts

@@ -15,6 +15,8 @@ export type DialogDescriptionProps = Omit<Base.Description.Props, "className"> &
 export type DialogActionsProps = ComponentProps<"div">;
 export type DialogSectionProps = ComponentProps<"div">;
 export type DialogContentProps = Omit<Base.Popup.Props, "className" | "title"> & {
+    /** Centered dialog or inline-end drawer with independently scrolling Body. */
+    layout?: "center" | "drawer";
     /** Accessible name; mutually exclusive with a composed Dialog.Title. */
     title?: ReactNode;
     /** Accessible description; mutually exclusive with a composed Dialog.Description. */
@@ -35,7 +37,7 @@ declare function DialogActions({ className, ...props }: DialogActionsProps): imp
 declare function DialogHeader({ className, ...props }: DialogSectionProps): import("react").JSX.Element;
 declare function DialogBody({ className, ...props }: DialogSectionProps): import("react").JSX.Element;
 declare function DialogFooter({ className, ...props }: DialogSectionProps): import("react").JSX.Element;
-declare function DialogContent({ classNames, title, description, container, children, className, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ layout, classNames, title, description, container, children, className, ...props }: DialogContentProps): import("react").JSX.Element;
 export declare const Dialog: typeof DialogRoot & {
     Trigger: typeof DialogTrigger;
     Content: typeof DialogContent;

package/dist/components/Disclosure/Disclosure.d.ts

@@ -0,0 +1,21 @@
+import { Collapsible as Base } from "@base-ui/react/collapsible";
+export type DisclosureProps = Omit<Base.Root.Props, "className"> & {
+    /** Plain class string on root. */
+    className?: string | undefined;
+};
+export type DisclosureTriggerProps = Omit<Base.Trigger.Props, "className"> & {
+    /** Plain class string on trigger. */
+    className?: string | undefined;
+};
+export type DisclosurePanelProps = Omit<Base.Panel.Props, "className"> & {
+    /** Plain class string on panel. */
+    className?: string | undefined;
+};
+declare function DisclosureRoot({ className, ...props }: DisclosureProps): import("react").JSX.Element;
+declare function DisclosureTrigger({ className, ...props }: DisclosureTriggerProps): import("react").JSX.Element;
+declare function DisclosurePanel({ className, children, render, ...props }: DisclosurePanelProps): import("react").JSX.Element;
+export declare const Disclosure: typeof DisclosureRoot & {
+    Trigger: typeof DisclosureTrigger;
+    Panel: typeof DisclosurePanel;
+};
+export {};

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type EmptyStateSize = "sm" | "md" | "lg";
+export type EmptyStateVariant = "surface" | "subtle" | "plain";
+export type EmptyStateTone = "neutral" | "info" | "warning" | "danger";
+export type EmptyStateHeadingLevel = 2 | 3 | 4;
+export type EmptyStateProps = Omit<ComponentProps<"div">, "title"> & {
+    /** Primary heading explaining why the region is empty or unavailable. */
+    title: ReactNode;
+    /** Supporting guidance explaining what appears here or how to proceed. */
+    description?: ReactNode;
+    /** Short category or state label above the title. */
+    eyebrow?: ReactNode;
+    /** Decorative glyph or emblem rendered above the header. */
+    icon?: ReactNode;
+    /** Primary and secondary recovery or creation controls. */
+    actions?: ReactNode;
+    /** Quiet metadata or secondary link below the actions. */
+    footer?: ReactNode;
+    /** Document outline rank for the title heading (`2`–`4`). */
+    headingLevel?: EmptyStateHeadingLevel;
+    size?: EmptyStateSize;
+    variant?: EmptyStateVariant;
+    tone?: EmptyStateTone;
+    /** Announces dynamic empty or recoverable failure updates via `role="status"`. */
+    live?: boolean;
+    classNames?: ClassNames<"icon" | "header" | "eyebrow" | "title" | "description" | "body" | "actions" | "footer">;
+};
+/** Structured placeholder for empty collections, zero-match filters, and recoverable section errors. */
+export declare function EmptyState({ title, description, eyebrow, icon, actions, footer, headingLevel, size, variant, tone, live, className, classNames, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type FormActionsAlign } from "../FormActions/FormActions";
+export type FormWidth = "sm" | "md" | "full";
+export type FormPart = "header" | "body" | "actions";
+export interface FormProps extends ComponentProps<"form"> {
+    /** Title and intro above the fields, such as a heading or PageHeader. */
+    header?: ReactNode | undefined;
+    /** The task's submit button first, then secondary actions. */
+    actions?: ReactNode | undefined;
+    /** Alignment of the actions row above the compact width. */
+    actionsAlign?: FormActionsAlign | undefined;
+    /** Maximum inline size: sm 32rem, md 40rem or full. */
+    width?: FormWidth | undefined;
+    /** Classes for inner regions, keyed by region. */
+    classNames?: ClassNames<FormPart> | undefined;
+}
+/** Layout intent for one task: header, grouped fields, then its actions. */
+export declare const Form: ({ ref, header, actions, actionsAlign, width, className, classNames, children, ...props }: FormProps) => import("react").JSX.Element;

package/dist/components/FormSection/FormSection.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type FormActionsAlign } from "../FormActions/FormActions";
+export type FormSectionLayout = "stack" | "split";
+export type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type FormSectionPart = "header" | "title" | "description" | "body" | "fields" | "error" | "actions";
+export interface FormSectionProps extends Omit<ComponentProps<"fieldset">, "title"> {
+    /** Section heading; also names the group. */
+    title: ReactNode;
+    /** Heading rank; follow the page hierarchy. */
+    headingLevel?: FormSectionHeadingLevel | undefined;
+    /** Supporting context for the grouped fields. */
+    description?: ReactNode | undefined;
+    /** Section-level validation error. */
+    error?: ReactNode | undefined;
+    /** Buttons for this section, after the fields in Tab order. */
+    actions?: ReactNode | undefined;
+    /** Alignment of the actions row. */
+    actionsAlign?: FormActionsAlign | undefined;
+    /** Heading beside or above fields; unset follows the enclosing intent. */
+    layout?: FormSectionLayout | undefined;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<FormSectionPart> | undefined;
+}
+/** Named group of related fields with its heading, error and actions. */
+export declare const FormSection: ({ ref, title, headingLevel, description, error, actions, actionsAlign, layout, disabled, className, classNames, children, "aria-describedby": ariaDescribedBy, "aria-invalid": callerAriaInvalid, ...props }: FormSectionProps) => import("react").JSX.Element;

package/dist/components/Gallery/Gallery.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type GalleryPart = "header" | "filters" | "items" | "empty";
+export interface GalleryProps extends ComponentProps<"div"> {
+    /** Page title, intro and page actions, usually a PageHeader. */
+    header?: ReactNode | undefined;
+    /** Search, filter and sort controls; they share a row and wrap. */
+    filters?: ReactNode | undefined;
+    /** Accessible name for the item list. */
+    itemsLabel?: string | undefined;
+    /** Shown in place of the list when there are no items. */
+    empty?: ReactNode | undefined;
+    /** Classes for inner regions, keyed by region. */
+    classNames?: ClassNames<GalleryPart> | undefined;
+}
+export interface GalleryItemProps extends ComponentProps<"li"> {
+    /** Spans two columns once the list has two; keep featured items first. */
+    featured?: boolean | undefined;
+}
+declare function GalleryRoot({ ref, header, filters, itemsLabel, empty, className, classNames, children, ...props }: GalleryProps): import("react").JSX.Element;
+declare function GalleryItem({ featured, className, ...props }: GalleryItemProps): import("react").JSX.Element;
+/** Layout intent for a grid of image-led items, such as a product catalog. */
+export declare const Gallery: typeof GalleryRoot & {
+    Item: typeof GalleryItem;
+};
+export {};