@kb.ui/react 0.10.3 → 0.11.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/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/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/Grid/Grid.d.ts

@@ -1,12 +1,23 @@
 import { type ComponentProps } from "react";
-type Container = "div" | "ul" | "ol";
-export type GridProps<T extends Container = "div"> = ComponentProps<T> & {
+import type { LayoutAlign, LayoutGap } from "../../utils/layout";
+export type GridElement = "div" | "ul" | "ol";
+export type GridLayout = "auto" | "stack";
+export type GridColumns = "auto" | 1 | 2 | 3 | 4;
+export type GridMinItemWidth = "sm" | "md" | "lg";
+export type GridProps<T extends GridElement = "div"> = ComponentProps<T> & {
     /** Native container; list children must be list items. */
-    as?: T;
+    as?: T | undefined;
     /** Responsive equal columns or a single vertical track. */
-    layout?: "auto" | "stack";
+    layout?: GridLayout | undefined;
+    /** Explicit column count or automatic wrapping columns. */
+    columns?: GridColumns | undefined;
+    /** Minimum column width before automatic columns wrap. */
+    minItemWidth?: GridMinItemWidth | undefined;
+    /** Space between columns and stacked rows. */
+    gap?: LayoutGap | undefined;
+    /** Cross-axis alignment within each grid row. */
+    align?: LayoutAlign | undefined;
 };
-export declare function Grid<T extends Container = "div">({ as, layout, className, ...props }: GridProps<T>): import("react").ReactElement<Omit<GridProps<T>, "as" | "className" | "layout"> & {
+export declare function Grid<T extends GridElement = "div">({ as, layout, columns, minItemWidth, gap, align, className, ...props }: GridProps<T>): import("react").ReactElement<Omit<GridProps<T>, "align" | "as" | "className" | "columns" | "gap" | "layout" | "minItemWidth"> & {
     className: string;
 } & Record<`data-${string}`, string>, string | import("react").JSXElementConstructor<any>>;
-export {};

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

@@ -0,0 +1,20 @@
+import { type ComponentProps, type CSSProperties, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type ImageRatio = "square" | "landscape" | "portrait" | "wide" | "auto";
+type SourceProps = Pick<ComponentProps<"img">, "src" | "srcSet" | "sizes" | "width" | "height" | "loading" | "decoding" | "crossOrigin" | "referrerPolicy" | "fetchPriority" | "onLoad" | "onError">;
+export type ImageProps = Omit<ComponentProps<"span">, "children" | "onLoad" | "onError"> & SourceProps & {
+    /** Image alternative; empty string marks decorative media. */
+    alt: string;
+    /** Reserved frame ratio; auto uses width/height, then landscape. */
+    ratio?: ImageRatio | undefined;
+    /** Crop to fill frame or keep entire image visible. */
+    fit?: "cover" | "contain" | undefined;
+    /** Focal point within image frame. */
+    position?: CSSProperties["objectPosition"] | undefined;
+    /** Non-interactive visual shown while missing, loading or failed. */
+    fallback?: ReactNode | undefined;
+    /** Extra classes for frame, image and fallback. */
+    classNames?: ClassNames<"root" | "image" | "fallback"> | undefined;
+};
+export declare function Image(props: ImageProps): import("react").JSX.Element;
+export {};

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,19 @@
-import type { ComponentProps } from "react";
+import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 export type LinkProps = ComponentProps<"a"> & {
     /** Navigation destination; use Button for actions. */
     href: string;
 };
-export declare function Link({ className, ...props }: LinkProps): import("react").JSX.Element;
+/** Router adapter contract: render an anchor with href; pass other props and ref through. */
+export type LinkComponent = "a" | ComponentType<LinkProps>;
+export type LinkProviderProps = {
+    /** Renders every kbui anchor below it; adapt your router's link here. */
+    component: LinkComponent;
+    children?: ReactNode;
+};
+declare function LinkProvider({ component, children }: LinkProviderProps): import("react").JSX.Element;
+export declare function useLinkComponent(): LinkComponent;
+declare function LinkRoot({ className, ...props }: LinkProps): import("react").JSX.Element;
+export declare const Link: typeof LinkRoot & {
+    Provider: typeof LinkProvider;
+};
+export {};

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,55 @@
+import { Popover as Base } from "@base-ui/react/popover";
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type PopoverProps = Base.Root.Props;
+export type PopoverTriggerProps = Base.Trigger.Props;
+export type PopoverCloseProps = Base.Close.Props;
+export type PopoverSectionProps = ComponentProps<"div">;
+export type PopoverTitleProps = Omit<Base.Title.Props, "className"> & {
+    /** Plain class string on title. */
+    className?: string | undefined;
+};
+export type PopoverDescriptionProps = Omit<Base.Description.Props, "className"> & {
+    /** Plain class string on description. */
+    className?: string | undefined;
+};
+export type PopoverContentProps = Omit<Base.Popup.Props, "className" | "title"> & {
+    /** Accessible name; omit when composing Popover.Title. */
+    title?: ReactNode;
+    /** Accessible description; omit when composing Popover.Description. */
+    description?: ReactNode;
+    /** Plain class string on popup. */
+    className?: string | undefined;
+    /** Portal target; pass nested theme host when needed. */
+    container?: Base.Portal.Props["container"];
+    /** Preferred side; collision handling may flip it. */
+    side?: Base.Positioner.Props["side"];
+    /** Alignment relative to trigger. */
+    align?: Base.Positioner.Props["align"];
+    /** Gap between trigger and popup, in CSS pixels. */
+    sideOffset?: Base.Positioner.Props["sideOffset"];
+    /** Advanced positioning, including collision boundary, padding and anchor. */
+    positionerProps?: Omit<Base.Positioner.Props, "children" | "className" | "side" | "align" | "sideOffset"> | undefined;
+    /** Classes for inner positioner. */
+    classNames?: ClassNames<"positioner"> | undefined;
+};
+declare function PopoverRoot(props: PopoverProps): import("react").JSX.Element;
+declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
+declare function PopoverClose(props: PopoverCloseProps): import("react").JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
+declare function PopoverHeader({ className, ...props }: PopoverSectionProps): import("react").JSX.Element;
+declare function PopoverBody({ className, ...props }: PopoverSectionProps): import("react").JSX.Element;
+declare function PopoverFooter({ className, ...props }: PopoverSectionProps): import("react").JSX.Element;
+declare function PopoverContent({ title, description, container, side, align, sideOffset, positionerProps, classNames, className, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+    Title: typeof PopoverTitle;
+    Description: typeof PopoverDescription;
+    Close: typeof PopoverClose;
+    Header: typeof PopoverHeader;
+    Body: typeof PopoverBody;
+    Footer: typeof PopoverFooter;
+};
+export {};