@kb.ui/react 0.10.4 → 0.12.0

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/PageHeader/PageHeader.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type PageHeaderSize = "sm" | "md" | "lg";
+export type PageHeaderHeadingLevel = 1 | 2 | 3;
+export type PageHeaderProps = Omit<ComponentProps<"div">, "title"> & {
+    /** Page title; renders as the screen's main heading. */
+    title: ReactNode;
+    /** One or two sentences of context below the title. */
+    description?: ReactNode | undefined;
+    /** Short section or object-type label above the title. */
+    eyebrow?: ReactNode | undefined;
+    /** Back link or breadcrumb trail above the heading. */
+    navigation?: ReactNode | undefined;
+    /** Status badges or metadata beside the title, outside its accessible name. */
+    meta?: ReactNode | undefined;
+    /** Page-level actions; end-aligned, wrapping below the heading when narrow. */
+    actions?: ReactNode | undefined;
+    /** Document outline rank for the title (`1`–`3`); keep `1` for a screen's own header. */
+    headingLevel?: PageHeaderHeadingLevel | undefined;
+    /** Title scale: `sm` for dense app shells, `lg` for landing screens. */
+    size?: PageHeaderSize | undefined;
+    /** Draws a rule below the header to separate it from page content. */
+    divider?: boolean | undefined;
+    classNames?: ClassNames<"navigation" | "main" | "heading" | "eyebrow" | "headline" | "title" | "meta" | "description" | "actions" | "body"> | undefined;
+};
+/** Opening region of a screen: title, context, status and page-level actions. */
+export declare function PageHeader({ title, description, eyebrow, navigation, meta, actions, headingLevel, size, divider, className, classNames, children, ...rest }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/Panel/Panel.d.ts

@@ -12,6 +12,8 @@ export type PanelProps = ComponentProps<"section"> & {
     rail?: PanelRail;
     /** Padding scale. */
     density?: PanelDensity;
+    /** Solid fill with no theme backdrop filter; for content that redraws often. */
+    opaque?: boolean;
     /** Makes Panel.Body collapse and expand from Panel.Toggle. */
     collapsible?: boolean;
     /** Controlled open state; collapsible only. */
@@ -53,7 +55,7 @@ export type PanelHandleProps = Omit<ComponentProps<"div">, "children" | "role">
 } | {
     "aria-labelledby": string;
 });
-declare function PanelRoot({ tone, rail, density, collapsible, open, defaultOpen, onOpenChange, className, children, ref, ...props }: PanelProps): import("react").JSX.Element;
+declare function PanelRoot({ tone, rail, density, opaque, collapsible, open, defaultOpen, onOpenChange, className, children, ref, ...props }: PanelProps): import("react").JSX.Element;
 declare function PanelHeader({ className, ...props }: PanelHeaderProps): import("react").JSX.Element;
 declare function PanelToolbar({ className, ...props }: PanelToolbarProps): import("react").JSX.Element;
 declare function PanelBody({ className, ...props }: PanelBodyProps): import("react").JSX.Element;

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 {};

package/dist/components/Settings/Settings.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SettingsPart = "header" | "sections";
+export interface SettingsProps extends ComponentProps<"div"> {
+    /** Page title and intro above the sections. */
+    header?: ReactNode | undefined;
+    /** Classes for inner regions, keyed by region. */
+    classNames?: ClassNames<SettingsPart> | undefined;
+}
+/** Layout intent for sections of fields and managed lists, each saved on its own. */
+export declare const Settings: ({ ref, header, className, classNames, children, ...props }: SettingsProps) => import("react").JSX.Element;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SkeletonVariant = "text" | "rect" | "circle" | "pill" | "auto";
+export type SkeletonSize = "sm" | "md" | "lg";
+export type SkeletonAnimation = "shimmer" | "pulse" | "wave" | "none";
+export type SkeletonTone = "default" | "subtle" | "accent";
+export type SkeletonPart = "root" | "line" | "content" | "status";
+export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
+    /** Shape preset; `auto` shapes placeholders from kbui children, falling back to `text` without them. */
+    variant?: SkeletonVariant | undefined;
+    /** Size preset controlling line height or avatar diameter. */
+    size?: SkeletonSize | undefined;
+    /** Number of stacked placeholder lines when `variant="text"`. */
+    lines?: number | undefined;
+    /** Enable motion on placeholder shapes; set `false` for static placeholders. */
+    animated?: boolean | undefined;
+    /** Motion: `shimmer` sweep, `pulse` fade, `wave` staggered fade, or `none`. */
+    animation?: SkeletonAnimation | undefined;
+    /** Surface color: `default`, `subtle` recessed, or `accent` tinted. */
+    tone?: SkeletonTone | undefined;
+    /** Whether content is still loading; when `false`, renders `children` inside `.kb-skeleton-content`. */
+    loading?: boolean | undefined;
+    /** Loading status announced by `variant="auto"`. */
+    label?: string | undefined;
+    /** Optional explicit inline size (`px` number or CSS length string). */
+    width?: number | string | undefined;
+    /** Optional explicit block size (`px` number or CSS length string). */
+    height?: number | string | undefined;
+    /** Loaded content; `variant="auto"` also renders it inert as the placeholder layout. */
+    children?: ReactNode | undefined;
+    /** Custom class names for internal component slots. */
+    classNames?: ClassNames<SkeletonPart> | undefined;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SpinnerSize = "sm" | "md" | "lg";
+export type SpinnerTone = "current" | "accent" | "neutral" | "info" | "success" | "warning" | "danger";
+export type SpinnerVariant = "ring" | "orbit" | "dots" | "bars";
+export type SpinnerAppearance = "plain" | "pill";
+export type SpinnerPart = "root" | "icon" | "track" | "arc" | "core" | "dot" | "bar" | "label";
+export interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    /** Accessible status label announced by assistive technology and optionally shown beside the indicator. */
+    label?: string | undefined;
+    /** Render the label visibly beside the spinner instead of visually hidden. */
+    showLabel?: boolean | undefined;
+    /** Mark spinner as purely decorative (`aria-hidden="true"`, no status role) when a parent control already owns busy semantics. */
+    decorative?: boolean | undefined;
+    /** Visual size token preset. */
+    size?: SpinnerSize | undefined;
+    /** Semantic color tone; use `current` inside buttons or badges to inherit text color. */
+    tone?: SpinnerTone | undefined;
+    /** Indicator geometry and motion style. */
+    variant?: SpinnerVariant | undefined;
+    /** Container framing; `pill` wraps the indicator and label in a tinted status pill. */
+    appearance?: SpinnerAppearance | undefined;
+    /** Custom class names for internal component slots. */
+    classNames?: ClassNames<SpinnerPart> | undefined;
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,15 @@
+import type { LayoutElementProps, LayoutGap } from "../../utils/layout";
+export type StackElement = "div" | "section" | "article" | "aside" | "ul" | "ol" | "nav" | "form";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between";
+export type StackProps<T extends StackElement = "div"> = LayoutElementProps<T> & {
+    /** Space between stacked items. */
+    gap?: LayoutGap;
+    /** Inline-axis alignment; stretch fills the stack width. */
+    align?: StackAlign;
+    /** Block-axis distribution when the stack is taller than its content. */
+    justify?: StackJustify;
+};
+export declare function Stack<T extends StackElement = "div">({ as, gap, align, justify, className, ...props }: StackProps<T>): import("react").DetailedReactHTMLElement<Omit<StackProps<T>, "align" | "as" | "className" | "gap" | "justify"> & {
+    className: string;
+} & Record<`data-${string}`, string>, HTMLElement>;

package/dist/components/StatsRow/StatsRow.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type StatsRowAppearance = "plain" | "outlined";
+export type StatsRowTrend = "up" | "down" | "flat";
+export type StatsRowTone = "positive" | "negative" | "neutral";
+export type StatsRowProps = ComponentProps<"ul"> & {
+    /** Plain metrics on the page, or each metric on an outlined card surface. */
+    appearance?: StatsRowAppearance | undefined;
+};
+/** A list of comparable metrics that fills its region and wraps when narrow. */
+declare function StatsRowRoot({ appearance, className, ...rest }: StatsRowProps): import("react").JSX.Element;
+export type StatsRowItemProps = Omit<ComponentProps<"li">, "children"> & {
+    /** What the value measures, including its period when that changes the meaning. */
+    label: ReactNode;
+    /** The figure with its unit; figures are tabular. */
+    value: ReactNode;
+    /** Change since the comparison period; its text must state the direction, such as `+12.8%`. */
+    change?: ReactNode | undefined;
+    /** Direction glyph beside `change`; decorative, so the change text carries the meaning. */
+    trend?: StatsRowTrend | undefined;
+    /** Colors `change` by whether it is good or bad news; color alone, so state it in text too. */
+    tone?: StatsRowTone | undefined;
+    /** Comparison period or freshness, such as `vs. previous month`. */
+    context?: ReactNode | undefined;
+    /** Optional link to the detail behind the metric. */
+    link?: ReactNode | undefined;
+    classNames?: ClassNames<"stat" | "label" | "value" | "trend" | "change" | "glyph" | "context" | "link"> | undefined;
+};
+declare function StatsRowItem({ label, value, change, trend, tone, context, link, className, classNames, ...rest }: StatsRowItemProps): import("react").JSX.Element;
+export declare const StatsRow: typeof StatsRowRoot & {
+    Item: typeof StatsRowItem;
+};
+export {};

package/dist/components/SupportingPane/SupportingPane.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SupportingPanePart = "main" | "aside";
+export interface SupportingPaneProps extends ComponentProps<"div"> {
+    /** Supporting content, such as an order summary; moves below main at compact size. */
+    aside?: ReactNode | undefined;
+    /** Accessible name for the aside landmark. */
+    asideLabel?: string | undefined;
+    /** Id of a visible heading that names the aside; preferred over `asideLabel`. */
+    asideLabelledBy?: string | undefined;
+    /** Classes for inner regions, keyed by region. */
+    classNames?: ClassNames<SupportingPanePart> | undefined;
+}
+/** Layout intent for a main column with a complementary aside beside it, or below it when narrow. */
+export declare const SupportingPane: ({ ref, aside, asideLabel, asideLabelledBy, className, classNames, children, ...props }: SupportingPaneProps) => import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentProps, CSSProperties } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { Checkbox, type CheckboxProps } from "../Checkbox/Checkbox";
+export type TableProps = ComponentProps<"table"> & {
+    /** Cell spacing; dense retains full-size control targets. */
+    density?: "comfortable" | "dense" | undefined;
+    stickyHeader?: boolean | undefined;
+    /** Fixed column sizing; supply widths through colgroup or cell styles. */
+    layout?: "auto" | "fixed" | undefined;
+};
+export declare function TableRoot({ density, stickyHeader, layout, className, ...props }: TableProps): import("react").JSX.Element;
+export type TableScrollContainerProps = ComponentProps<"section"> & {
+    label: string;
+    /** Height cap; sticky headers use this scroll boundary. */
+    maxHeight?: CSSProperties["maxHeight"] | undefined;
+};
+export declare function TableScrollContainer({ label, maxHeight, onFocus, className, style, ...props }: TableScrollContainerProps): import("react").JSX.Element;
+export type TableCaptionProps = ComponentProps<"caption">;
+export declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
+export type TableHeadProps = ComponentProps<"thead">;
+export declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
+export type TableBodyProps = ComponentProps<"tbody">;
+export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+export type TableFootProps = ComponentProps<"tfoot">;
+export declare function TableFoot({ className, ...props }: TableFootProps): import("react").JSX.Element;
+export type TableRowProps = ComponentProps<"tr"> & {
+    /** Highlight a row whose checkbox is selected; adds no grid role. */
+    selected?: boolean | undefined;
+};
+export declare function TableRow({ selected, className, ...props }: TableRowProps): import("react").JSX.Element;
+export type TableCellOptions = {
+    align?: "start" | "center" | "end" | undefined;
+    /** Pin one edge cell; use matching edges in header and body. */
+    sticky?: "start" | "end" | undefined;
+};
+export type TableSortDirection = "none" | "ascending" | "descending";
+export type TableColumnHeaderProps = Omit<ComponentProps<"th">, "align"> & TableCellOptions & {
+    /** Controlled order; app owns sorting and resets other columns to none. */
+    sortDirection?: TableSortDirection | undefined;
+    /** Enables native sort button; none starts ascending, then toggles. */
+    onSortChange?: ((direction: Exclude<TableSortDirection, "none">) => void) | undefined;
+    sortDisabled?: boolean | undefined;
+    classNames?: ClassNames<"sortButton" | "sortIcon"> | undefined;
+};
+export declare function TableColumnHeader({ align, sticky, sortDirection, onSortChange, sortDisabled, className, classNames, children, scope, "aria-sort": ariaSort, ...props }: TableColumnHeaderProps): import("react").JSX.Element;
+export type TableRowHeaderProps = Omit<ComponentProps<"th">, "align"> & TableCellOptions;
+export declare function TableRowHeader({ align, sticky, scope, className, ...props }: TableRowHeaderProps): import("react").JSX.Element;
+export type TableCellProps = Omit<ComponentProps<"td">, "align"> & TableCellOptions;
+export declare function TableCell({ align, sticky, className, ...props }: TableCellProps): import("react").JSX.Element;
+export type TableSelectionCheckboxProps = CheckboxProps;
+export type TableRowActionsProps = ComponentProps<"div">;
+export declare function TableRowActions({ className, ...props }: TableRowActionsProps): import("react").JSX.Element;
+export declare const Table: typeof TableRoot & {
+    ScrollContainer: typeof TableScrollContainer;
+    Caption: typeof TableCaption;
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Foot: typeof TableFoot;
+    Row: typeof TableRow;
+    ColumnHeader: typeof TableColumnHeader;
+    RowHeader: typeof TableRowHeader;
+    Cell: typeof TableCell;
+    SelectionCheckbox: typeof Checkbox;
+    RowActions: typeof TableRowActions;
+};

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,69 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import type { ClassNames } from "../../utils/kb";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsVariant = "line" | "pill";
+export type TabsSize = "sm" | "md";
+export type TabsClassKey = "root" | "list" | "tab" | "tabIcon" | "tabLabel" | "tabBadge" | "indicator" | "panel";
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Root>, "className" | "orientation" | "value" | "defaultValue" | "onValueChange"> {
+    /** Controlled active tab value. */
+    value?: string | number | null | undefined;
+    /** Initial active tab value when uncontrolled. */
+    defaultValue?: string | number | null | undefined;
+    /** Called when the active tab value changes. */
+    onValueChange?: ((value: string | number | null, eventDetails: BaseTabs.Root.ChangeEventDetails) => void) | undefined;
+    /** Layout axis for the tab list and panels. */
+    orientation?: TabsOrientation | undefined;
+    /** Visual treatment of the tab list and active indicator. */
+    variant?: TabsVariant | undefined;
+    /** Control density for tab triggers. */
+    size?: TabsSize | undefined;
+    /** Additional root class name. */
+    className?: string | undefined;
+    /** Custom class names for inner anatomy slots. */
+    classNames?: ClassNames<TabsClassKey> | undefined;
+}
+export interface TabsListProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.List>, "className"> {
+    /** Move selection automatically when focus moves between tabs. */
+    activateOnFocus?: boolean | undefined;
+    /** Wrap arrow-key focus from the last tab back to the first. */
+    loopFocus?: boolean | undefined;
+    /** Render the sliding active indicator inside the list. */
+    showIndicator?: boolean | undefined;
+    /** Additional tablist class name. */
+    className?: string | undefined;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Tab>, "className" | "value"> {
+    /** Unique value matching the associated panel. */
+    value: string | number;
+    /** Prevent selecting or activating the tab. */
+    disabled?: boolean | undefined;
+    /** Optional leading icon rendered inside the tab trigger. */
+    icon?: ReactNode | undefined;
+    /** Optional trailing count or status badge. */
+    badge?: ReactNode | undefined;
+    /** Additional tab button class name. */
+    className?: string | undefined;
+}
+export interface TabsIndicatorProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Indicator>, "className"> {
+    /** Additional indicator class name. */
+    className?: string | undefined;
+}
+export interface TabsPanelProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Panel>, "className" | "value"> {
+    /** Tab value that reveals this panel when active. */
+    value: string | number;
+    /** Keep inactive panel DOM mounted when hidden. */
+    keepMounted?: boolean | undefined;
+    /** Additional panel class name. */
+    className?: string | undefined;
+}
+export declare const TabsIndicator: import("react").ForwardRefExoticComponent<TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
+    List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Tab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Panel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, type TabsClassKey, TabsIndicator, type TabsIndicatorProps, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, } from "./Tabs";

package/dist/components/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+import { type ImageProps } from "../Image/Image";
+export type ThumbnailProps = Omit<ComponentProps<"figure">, "children"> & Pick<ImageProps, "src" | "alt" | "ratio" | "fit" | "position" | "fallback"> & {
+    /** Visible title; may contain a native link or button. */
+    caption?: ReactNode | undefined;
+    /** Supporting metadata; remains visible when media fails. */
+    description?: ReactNode | undefined;
+    /** Native source/loading attributes and Image styling hooks. */
+    imageProps?: Omit<ImageProps, "src" | "alt" | "ratio" | "fit" | "position" | "fallback"> | undefined;
+    /** Extra classes for figure, media, caption, title and description. */
+    classNames?: ClassNames<"root" | "media" | "caption" | "title" | "description"> | undefined;
+};
+export declare function Thumbnail({ src, alt, ratio, fit, position, fallback, caption, description, imageProps, className, classNames, ...props }: ThumbnailProps): import("react").JSX.Element;

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,72 @@
+import { Toast as Base, type ToastManagerAddOptions as BaseAddOptions, type ToastManagerPromiseOptions as BasePromiseOptions, type ToastManager as BaseToastManager, type ToastObject as BaseToastObject, type ToastManagerUpdateOptions as BaseUpdateOptions, type UseToastManagerReturnValue } from "@base-ui/react/toast";
+import type { ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type ToastPlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end" | "inline";
+export type ToastObject<Data extends object = Record<string, unknown>> = BaseToastObject<Data>;
+export type ToastManager<Data extends object = Record<string, unknown>> = BaseToastManager<Data>;
+export type ToastAddOptions<Data extends object = Record<string, unknown>> = BaseAddOptions<Data>;
+export type ToastUpdateOptions<Data extends object = Record<string, unknown>> = BaseUpdateOptions<Data>;
+export type ToastPromiseOptions<Value, Data extends object = Record<string, unknown>> = BasePromiseOptions<Value, Data>;
+export type ToastProviderProps = Base.Provider.Props;
+export type ToastContentProps = Omit<Base.Content.Props, "className"> & {
+    /** Extra classes for content. */
+    className?: string | undefined;
+};
+export type ToastTitleProps = Omit<Base.Title.Props, "className"> & {
+    /** Extra classes for title. */
+    className?: string | undefined;
+};
+export type ToastDescriptionProps = Omit<Base.Description.Props, "className"> & {
+    /** Extra classes for description. */
+    className?: string | undefined;
+};
+export type ToastActionProps = Omit<Base.Action.Props, "className"> & {
+    /** Extra classes for action. */
+    className?: string | undefined;
+};
+export type ToastCloseProps = Omit<Base.Close.Props, "className"> & {
+    /** Extra classes for dismissal control. */
+    className?: string | undefined;
+};
+export type ToastProps<Data extends object = Record<string, unknown>> = Omit<Base.Root.Props, "className" | "toast"> & {
+    /** Message object from the matching provider. */
+    toast: ToastObject<Data>;
+    /** Extra classes for root. */
+    className?: string | undefined;
+    /** Visual emphasis; defaults to matching toast.type, with error mapped to danger. */
+    tone?: ToastTone | undefined;
+    /** Localized accessible name for default dismissal control. */
+    closeLabel?: string | undefined;
+    /** Classes for default parts; custom children own their part classes. */
+    classNames?: ClassNames<"content" | "title" | "description" | "action" | "close"> | undefined;
+};
+export type ToastViewportProps<Data extends object = Record<string, unknown>> = Omit<Base.Viewport.Props, "className"> & {
+    /** Extra classes for viewport. */
+    className?: string | undefined;
+    /** Logical screen corner; inline participates in surrounding layout without a portal. */
+    placement?: ToastPlacement | undefined;
+    /** Theme-scoped portal host; defaults to document.body for fixed placements. */
+    container?: Base.Portal.Props["container"];
+    /** Custom renderer for each message; defaults to a complete Toast with all parts. */
+    renderToast?: ((toast: ToastObject<Data>) => ReactNode) | undefined;
+};
+export declare function createToastManager<Data extends object = Record<string, unknown>>(): ToastManager<Data>;
+export declare function useToastManager<Data extends object = Record<string, unknown>>(): UseToastManagerReturnValue<Data>;
+declare function ToastContent({ className, ...props }: ToastContentProps): import("react").JSX.Element;
+declare function ToastTitle({ className, ...props }: ToastTitleProps): import("react").JSX.Element;
+declare function ToastDescription({ className, ...props }: ToastDescriptionProps): import("react").JSX.Element;
+declare function ToastAction({ className, ...props }: ToastActionProps): import("react").JSX.Element;
+declare function ToastClose({ className, ...props }: ToastCloseProps): import("react").JSX.Element;
+declare function ToastRoot<Data extends object = Record<string, unknown>>({ toast, tone, closeLabel, classNames, className, children, ...props }: ToastProps<Data>): import("react").JSX.Element;
+declare function ToastViewport<Data extends object = Record<string, unknown>>({ placement, container, renderToast, className, children, ...props }: ToastViewportProps<Data>): import("react").JSX.Element;
+export declare const Toast: typeof ToastRoot & {
+    Provider: import("react").FC<import("@base-ui/react").ToastProviderProps>;
+    Viewport: typeof ToastViewport;
+    Content: typeof ToastContent;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    Action: typeof ToastAction;
+    Close: typeof ToastClose;
+};
+export {};