@kazee-ds/react 0.5.5 → 0.6.0

package/dist/types/Alert.d.ts

@@ -1,7 +1,9 @@
-import type { ReactNode } from 'react';
+import { type StylingProps } from './styling.js';
+import type { ReactNode, HTMLAttributes } from 'react';
 import type { BadgeTone } from './Badge.js';
-export interface AlertProps {
-    title: string;
+export type AlertPart = 'root' | 'title' | 'description' | 'actions';
+export interface AlertProps extends StylingProps<AlertPart> {
+    title?: string;
     description?: string;
     tone?: BadgeTone;
     announcement?: 'off' | 'polite' | 'assertive';
@@ -9,4 +11,18 @@ export interface AlertProps {
     actions?: ReactNode;
     id?: string;
 }
-export declare function Alert({ title, description, tone, announcement, children, actions, id, }: AlertProps): import("react").JSX.Element;
+declare function AlertRoot({ className, style, classNames, title, description, tone, announcement, children, actions, id, }: AlertProps): import("react").JSX.Element;
+export declare function AlertTitle({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function AlertDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function AlertContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function AlertActions({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function AlertIndicator({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+    Root: typeof AlertRoot;
+    Title: typeof AlertTitle;
+    Description: typeof AlertDescription;
+    Content: typeof AlertContent;
+    Actions: typeof AlertActions;
+    Indicator: typeof AlertIndicator;
+};
+export {};

package/dist/types/Badge.d.ts

@@ -1,7 +1,8 @@
 import type { HTMLAttributes } from 'react';
 export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    classNames?: Partial<Record<'root', string>>;
     tone?: BadgeTone;
 }
 /** Static status text. Dynamic announcements belong in an application-owned live region. */
-export declare function Badge({ tone, className, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ tone, className, classNames, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/types/Breadcrumb.d.ts

@@ -1,8 +1,30 @@
+import { type StylingProps } from './styling.js';
 import type { BreadcrumbItem } from './dashboard-types.js';
-export interface BreadcrumbProps {
+import type { HTMLAttributes, AnchorHTMLAttributes } from 'react';
+export type BreadcrumbPart = 'root' | 'list' | 'item' | 'separator' | 'link' | 'current';
+export interface BreadcrumbProps extends StylingProps<BreadcrumbPart> {
     items: BreadcrumbItem[];
     label?: string;
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function Breadcrumb({ items, label, dir, id }: BreadcrumbProps): import("react").JSX.Element;
+export declare function BreadcrumbRoot({ className, label, ...props }: HTMLAttributes<HTMLElement> & {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function BreadcrumbList(props: HTMLAttributes<HTMLOListElement>): import("react").JSX.Element;
+export declare function BreadcrumbItemPart(props: HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
+export declare function BreadcrumbLink({ children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+export declare function BreadcrumbCurrent(props: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+declare function BreadcrumbComponent(props: BreadcrumbProps | (HTMLAttributes<HTMLElement> & {
+    label?: string;
+})): import("react").JSX.Element;
+export declare const Breadcrumb: typeof BreadcrumbComponent & {
+    Root: typeof BreadcrumbRoot;
+    List: typeof BreadcrumbList;
+    Item: typeof BreadcrumbItemPart;
+    Link: typeof BreadcrumbLink;
+    Current: typeof BreadcrumbCurrent;
+    Separator: typeof BreadcrumbSeparator;
+};
+export {};

package/dist/types/Button.d.ts

@@ -1,3 +1,4 @@
+import { type StylingProps } from './styling.js';
 import { type ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
 import { type ReactNode } from 'react';
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline' | 'tertiary' | 'ghost' | 'danger-soft' | 'ai';
@@ -17,7 +18,7 @@ export interface ButtonRenderProps {
  * The props the design system supports on `Button`. Anything not listed here is not part of the
  * public API, even if the underlying React Aria button would accept it.
  */
-export interface ButtonProps {
+export interface ButtonProps extends StylingProps {
     /** Label or content of the button. */
     children?: ReactNode | ((state: ButtonRenderProps) => ReactNode);
     /** Square icon button. Supply aria-label or aria-labelledby. */
@@ -50,4 +51,4 @@ export interface ButtonProps {
     /** Focuses the button when it first renders. */
     autoFocus?: boolean;
 }
-export declare function Button({ variant, size, isIconOnly, isPending, isDisabled, fullWidth, type, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, isIconOnly, isPending, isDisabled, fullWidth, type, children, className: consumerClassName, classNames, style, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/types/ButtonGroup.d.ts

@@ -1,6 +1,7 @@
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import { type ButtonSize, type ButtonVariant } from './Button.js';
-export interface ButtonGroupProps {
+export interface ButtonGroupProps extends StylingProps {
     label: string;
     children: ReactNode;
     variant?: ButtonVariant;
@@ -10,8 +11,8 @@ export interface ButtonGroupProps {
     orientation?: 'horizontal' | 'vertical';
     dir?: 'ltr' | 'rtl';
 }
-export declare function ButtonGroupSeparator(): import("react").JSX.Element;
-declare function Root({ children, label, variant, size, isDisabled, fullWidth, orientation, dir, }: ButtonGroupProps): import("react").JSX.Element;
+export declare function ButtonGroupSeparator({ className, style, classNames }?: StylingProps): import("react").JSX.Element;
+declare function Root({ children, label, variant, size, isDisabled, fullWidth, orientation, dir, className, style, classNames, }: ButtonGroupProps): import("react").JSX.Element;
 export declare const ButtonGroup: typeof Root & {
     Separator: typeof ButtonGroupSeparator;
 };

package/dist/types/Card.d.ts

@@ -1,5 +1,7 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+import { type StylingProps } from './styling.js';
+export type CardPart = 'root' | 'header' | 'heading' | 'titleRow' | 'title' | 'description' | 'actions' | 'content' | 'footer';
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, StylingProps<CardPart> {
     title?: string;
     description?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -11,4 +13,27 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     footer?: ReactNode;
 }
 /** A content container; place links and buttons inside rather than making it clickable. */
-export declare function Card({ title, description, headingLevel, actions, header, titleExtras, footer, children, className, ...props }: CardProps): import("react").JSX.Element;
+declare function CompactCard({ title, description, headingLevel, actions, header, titleExtras, footer, children, className, classNames, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardRoot({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardHeading({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardTitleRow({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardTitle({ className, headingLevel, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function CardActions({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare const Card: typeof CompactCard & {
+    Root: typeof CardRoot;
+    Header: typeof CardHeader;
+    Heading: typeof CardHeading;
+    TitleRow: typeof CardTitleRow;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Actions: typeof CardActions;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+};
+export {};

package/dist/types/Chart.d.ts

@@ -1,5 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import { ChartRoot, ChartTitle, ChartDescription, ChartPlot } from './layout-parts.js';
+import { type StylingProps } from './styling.js';
 import type { ChartDatum } from './dashboard-types.js';
-export interface ChartProps {
+export type ChartPart = 'root' | 'title' | 'description' | 'plot' | 'axis' | 'line' | 'bar' | 'label' | 'table' | 'empty';
+export interface ChartProps extends StylingProps<ChartPart> {
     label: string;
     data: ChartDatum[];
     type?: 'bar' | 'line';
@@ -12,4 +16,11 @@ export interface ChartProps {
     id?: string;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Chart({ label, data, type, description, locale, formatOptions, categoryLabel, valueLabel, emptyMessage, id, dir, }: ChartProps): import("react").JSX.Element;
+declare function ChartComponent(props: ChartProps | HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare const Chart: typeof ChartComponent & {
+    Root: typeof ChartRoot;
+    Title: typeof ChartTitle;
+    Description: typeof ChartDescription;
+    Plot: typeof ChartPlot;
+};
+export {};

package/dist/types/Checkbox.d.ts

@@ -1,5 +1,7 @@
+import { CheckboxComposition, CheckboxControl, CheckboxIndicator, ChoiceContent, type CheckboxCompositionProps } from './choice-composition.js';
+import { type StylingProps } from './styling.js';
 import { type FieldFeedbackProps } from './field.js';
-export interface CheckboxProps extends FieldFeedbackProps {
+export interface CheckboxProps extends FieldFeedbackProps, StylingProps<'root' | 'choice' | 'control' | 'indicator' | 'dash' | 'label' | 'description' | 'error'> {
     label: string;
     isSelected?: boolean;
     defaultSelected?: boolean;
@@ -13,4 +15,11 @@ export interface CheckboxProps extends FieldFeedbackProps {
     id?: string;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Checkbox({ label, description, errorMessage, isInvalid, isSelected, defaultSelected, onChange, isDisabled, isRequired, isIndeterminate, name, value, id, dir, }: CheckboxProps): import("react").JSX.Element;
+declare function CheckboxRoot(props: CheckboxProps | CheckboxCompositionProps): import("react").JSX.Element;
+export declare const Checkbox: typeof CheckboxRoot & {
+    Root: typeof CheckboxComposition;
+    Control: typeof CheckboxControl;
+    Indicator: typeof CheckboxIndicator;
+    Content: typeof ChoiceContent;
+};
+export type { CheckboxCompositionProps } from './choice-composition.js';

package/dist/types/Combobox.d.ts

@@ -1,6 +1,8 @@
+import { ComboboxComposition, ComboboxInputGroup, ComboboxInput, ComboboxTrigger, ComboboxPopover, ComboboxClearButton, type ComboboxCompositionProps } from './combobox-composition.js';
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import { type SelectOption } from './selection-options.js';
-export interface ComboboxProps {
+export interface ComboboxProps extends StylingProps<'root' | 'label' | 'required' | 'control' | 'leading' | 'input' | 'clearButton' | 'clearIcon' | 'trigger' | 'indicator' | 'popover' | 'list' | 'empty' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
     label: string;
     options: SelectOption[];
     value?: string | null;
@@ -23,5 +25,13 @@ export interface ComboboxProps {
     dir?: 'ltr' | 'rtl';
     renderOption?: (option: SelectOption) => ReactNode;
 }
-/** Searchable single selection. Draft text is never submitted as a value. */
-export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
+declare function ComboboxRoot(props: ComboboxProps | ComboboxCompositionProps): import("react").JSX.Element;
+export declare const Combobox: typeof ComboboxRoot & {
+    Root: typeof ComboboxComposition;
+    InputGroup: typeof ComboboxInputGroup;
+    Input: typeof ComboboxInput;
+    Trigger: typeof ComboboxTrigger;
+    Popover: typeof ComboboxPopover;
+    ClearButton: typeof ComboboxClearButton;
+};
+export type { ComboboxCompositionProps } from './combobox-composition.js';

package/dist/types/DataTable.d.ts

@@ -1,6 +1,10 @@
+import { TableRoot, TableHeader, TableBody, TableFooter, TableRow, TableCell, TableCaption, TableScrollContainer } from './structural-parts.js';
+import { DataTableRoot, DataTableSortButton, DataTableStatus, DataTableError, DataTableColumn as DataTableColumnPart, DataTableEmpty } from './layout-parts.js';
+import { type StylingProps } from './styling.js';
 import type { ReactNode } from 'react';
 import type { DataTableColumn, DataTableRow, TableSort } from './data-table-types.js';
-export interface DataTableProps {
+export type DataTablePart = 'root' | 'table' | 'scroll' | 'caption' | 'header' | 'body' | 'row' | 'column' | 'cell' | 'sort' | 'empty' | 'status' | 'error';
+export interface DataTableProps extends StylingProps<DataTablePart> {
     caption: string;
     columns: DataTableColumn[];
     rows: DataTableRow[];
@@ -15,4 +19,21 @@ export interface DataTableProps {
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function DataTable({ caption, columns, rows, sort, onSortChange, isLoading, isDisabled, emptyMessage, loadingMessage, errorMessage, renderCell, dir, id, }: DataTableProps): import("react").JSX.Element;
+declare function DataTableComponent(props: DataTableProps | import('./layout-parts.js').DataTableRootProps): import("react").JSX.Element;
+export declare const DataTable: typeof DataTableComponent & {
+    Root: typeof DataTableRoot;
+    SortButton: typeof DataTableSortButton;
+    Status: typeof DataTableStatus;
+    Error: typeof DataTableError;
+    Table: typeof TableRoot;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    Column: typeof DataTableColumnPart;
+    Empty: typeof DataTableEmpty;
+    Cell: typeof TableCell;
+    Caption: typeof TableCaption;
+    ScrollContainer: typeof TableScrollContainer;
+};
+export {};

package/dist/types/DateRangePicker.d.ts

@@ -1,7 +1,11 @@
+import { DateRangeTrigger, DateRangeValue, DateRangeIndicator, DateRangePopover, DateRangeContent, DateRangeCalendar, DateRangeInput, DateRangeApplyButton, DateRangeClearButton, DateRangeCancelButton } from './date-range-composition.js';
+import { type StylingProps } from './styling.js';
+import { type ReactNode } from 'react';
 import { type DateRange, type DateRangeOptions } from './date-range-model.js';
-export interface DateRangePickerProps extends DateRangeOptions {
+export interface DateRangePickerProps extends DateRangeOptions, StylingProps<'root' | 'content' | 'intro' | 'summary' | 'body' | 'presets' | 'preset' | 'main' | 'inputs' | 'field' | 'input' | 'inputLabel' | 'monthSelect' | 'yearInput' | 'title' | 'draftError' | 'jump' | 'calendar' | 'navigation' | 'navigationButton' | 'months' | 'month' | 'heading' | 'grid' | 'weekday' | 'day' | 'validation' | 'footer' | 'clearButton' | 'cancelButton' | 'applyButton' | 'label' | 'panel' | 'trigger' | 'icon' | 'value' | 'chevron' | 'dialog' | 'description' | 'error'> {
     value?: DateRange | null;
     onChange?: (value: DateRange | null) => void;
+    children?: ReactNode;
     onApply?: (value: DateRange | null) => void;
     onOpenChange?: (open: boolean) => void;
     isDisabled?: boolean;
@@ -9,4 +13,18 @@ export interface DateRangePickerProps extends DateRangeOptions {
     isRequired?: boolean;
     isInvalid?: boolean;
 }
-export declare function DateRangePicker(props: DateRangePickerProps): import("react").JSX.Element;
+declare function DateRangePickerRoot(props: DateRangePickerProps): import("react").JSX.Element;
+export declare const DateRangePicker: typeof DateRangePickerRoot & {
+    Root: typeof DateRangePickerRoot;
+    Trigger: typeof DateRangeTrigger;
+    Value: typeof DateRangeValue;
+    Indicator: typeof DateRangeIndicator;
+    Popover: typeof DateRangePopover;
+    Content: typeof DateRangeContent;
+    Calendar: typeof DateRangeCalendar;
+    Input: typeof DateRangeInput;
+    ApplyButton: typeof DateRangeApplyButton;
+    ClearButton: typeof DateRangeClearButton;
+    CancelButton: typeof DateRangeCancelButton;
+};
+export {};

package/dist/types/Dialog.d.ts

@@ -1,7 +1,11 @@
+import type { DialogRootProps } from './structural-parts.js';
+import { OverlayHeading, DialogCloseButton, DialogRoot, DialogContent, OverlayDescription } from './structural-parts.js';
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import type { ButtonVariant } from './Button.js';
 import type { DialogSize, DialogPlacement, DialogScroll, DialogBackdrop } from './overlay-model.js';
-export interface DialogProps {
+export type DialogPart = 'root' | 'trigger' | 'backdrop' | 'panel' | 'content' | 'header' | 'title' | 'description' | 'body' | 'footer' | 'close' | 'footerClose';
+export interface DialogProps extends StylingProps<DialogPart> {
     triggerLabel: string;
     title: string;
     description?: string;
@@ -26,4 +30,18 @@ export interface DialogProps {
     showFooterClose?: boolean;
     closeIconLabel?: string;
 }
-export declare function Dialog(props: DialogProps): import("react").JSX.Element;
+declare function DialogComponent(props: DialogProps | DialogRootProps): import("react").JSX.Element;
+export declare const Dialog: typeof DialogComponent & {
+    Root: typeof DialogRoot;
+    Trigger: ({ className, ...props }: import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>;
+    Backdrop: ({ className, ...props }: import("react-aria-components").ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<import("react-aria-components").ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>, string | import("react").JSXElementConstructor<any>>;
+    Panel: ({ className, ...props }: import("react-aria-components").ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<import("react-aria-components").ModalOverlayProps & import("react").RefAttributes<HTMLDivElement>, string | import("react").JSXElementConstructor<any>>;
+    Content: typeof DialogContent;
+    Header: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Heading: typeof OverlayHeading;
+    Description: typeof OverlayDescription;
+    Body: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Footer: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    CloseButton: typeof DialogCloseButton;
+};
+export {};

package/dist/types/DropdownMenu.d.ts

@@ -1,8 +1,13 @@
+import { DropdownItemIndicator, DropdownSubmenuIndicator, type DropdownRootProps } from './structural-parts.js';
+import { DropdownRoot, DropdownList } from './structural-parts.js';
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
+import { type PopoverProps } from 'react-aria-components/Popover';
 import { type MenuSelectionMode, type MenuPlacement } from './overlay-model.js';
 import type { DropdownMenuItem } from './dashboard-types.js';
 import type { ButtonVariant } from './Button.js';
-export interface DropdownMenuProps {
+export type DropdownMenuPart = 'root' | 'trigger' | 'panel' | 'list' | 'item' | 'check' | 'icon' | 'text' | 'description' | 'shortcut' | 'arrow' | 'separator' | 'heading' | 'section';
+export interface DropdownMenuProps extends StylingProps<DropdownMenuPart> {
     triggerLabel: string;
     items: DropdownMenuItem[];
     onAction?: (id: string) => void;
@@ -22,4 +27,18 @@ export interface DropdownMenuProps {
     closeOnSelect?: boolean;
     placement?: MenuPlacement;
 }
-export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;
+declare function DropdownMenuComponent(props: DropdownMenuProps | DropdownRootProps): import("react").JSX.Element;
+export declare const DropdownMenu: typeof DropdownMenuComponent & {
+    Root: typeof DropdownRoot;
+    Trigger: ({ className, ...props }: import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>;
+    Popover: ({ className, ...props }: PopoverProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<PopoverProps & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+    Menu: typeof DropdownList;
+    Item: ({ className, ...props }: import("react-aria-components").MenuItemProps<unknown> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<import("react-aria-components").MenuItemProps<unknown> & import("react").RefAttributes<HTMLDivElement>, string | import("react").JSXElementConstructor<any>>;
+    Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+    Heading: ({ className, ...props }: import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+    Separator: ({ className, ...props }: import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+    ItemIndicator: typeof DropdownItemIndicator;
+    SubmenuTrigger: (props: import("react-aria-components").SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    SubmenuIndicator: typeof DropdownSubmenuIndicator;
+};
+export {};

package/dist/types/Empty.d.ts

@@ -1,5 +1,8 @@
+import { EmptyRoot, EmptyTitle, EmptyDescription, EmptyActions } from './layout-parts.js';
+import { type StylingProps } from './styling.js';
 import type { ReactNode } from 'react';
-export interface EmptyProps {
+export type EmptyPart = 'root' | 'title' | 'description' | 'actions';
+export interface EmptyProps extends StylingProps<EmptyPart> {
     title: string;
     description?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -7,4 +10,11 @@ export interface EmptyProps {
     children?: ReactNode;
     id?: string;
 }
-export declare function Empty({ title, description, headingLevel, actions, children, id }: EmptyProps): import("react").JSX.Element;
+declare function CompactEmpty({ className, style, classNames, title, description, headingLevel, actions, children, id, }: EmptyProps): import("react").JSX.Element;
+export declare const Empty: typeof CompactEmpty & {
+    Root: typeof EmptyRoot;
+    Title: typeof EmptyTitle;
+    Description: typeof EmptyDescription;
+    Actions: typeof EmptyActions;
+};
+export {};

package/dist/types/FieldComponent.d.ts

@@ -1,3 +1,4 @@
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 /** Bind these props to exactly one native input, textarea, or select. */
 export interface FieldControlProps {
@@ -17,7 +18,7 @@ export interface FieldRenderProps {
     errorMessage: string | undefined;
 }
 /** Experimental composition API; the application owns the control value. */
-export interface FieldProps {
+export interface FieldProps extends StylingProps<'root' | 'description' | 'error' | 'label' | 'input'> {
     label: string;
     name: string;
     children: (field: FieldRenderProps) => ReactNode;
@@ -30,4 +31,4 @@ export interface FieldProps {
     isRequired?: boolean;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Field({ label, name, children, id, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, dir, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, name, children, id, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, dir, className, style, classNames, }: FieldProps): import("react").JSX.Element;

package/dist/types/Form.d.ts

@@ -1,7 +1,8 @@
+import { type StylingProps } from './styling.js';
 import type { FormEvent, ReactNode } from 'react';
 import { type ValidationErrors } from './form-context.js';
 /** Experimental client form. Submission always prevents page navigation. */
-export interface FormProps {
+export interface FormProps extends StylingProps<'root'> {
     children: ReactNode;
     validationErrors?: ValidationErrors;
     onSubmit?: (data: FormData, event: FormEvent<HTMLFormElement>) => void;
@@ -14,4 +15,4 @@ export interface FormProps {
     'aria-labelledby'?: string;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Form({ children, validationErrors, onSubmit, onReset, noValidate, id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, dir, }: FormProps): import("react").JSX.Element;
+export declare function Form({ children, validationErrors, onSubmit, onReset, noValidate, id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, dir, className, style, classNames, }: FormProps): import("react").JSX.Element;

package/dist/types/Input.d.ts

@@ -1,3 +1,5 @@
+import { InputRoot, InputGroup, InputPrefix, InputSuffix, type InputCompositionProps } from './control-composition.js';
+import { type StylingProps } from './styling.js';
 import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from 'react';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
@@ -5,7 +7,7 @@ export type InputVariant = 'primary' | 'secondary';
 export type InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 export type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 /** A labeled single-line string field. Numeric/date parsing is a separate contract. */
-export interface InputProps {
+export interface InputProps extends StylingProps<'root' | 'input' | 'control' | 'label' | 'boundary' | 'prefix' | 'suffix' | 'description' | 'error' | 'group'> {
     label: string;
     value?: string;
     defaultValue?: string;
@@ -44,4 +46,12 @@ export interface InputProps {
     onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     dir?: 'ltr' | 'rtl';
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<(InputCompositionProps | InputProps) & import("react").RefAttributes<HTMLInputElement>> & {
+    Root: typeof InputRoot;
+    Control: import("react").ForwardRefExoticComponent<Omit<import("react-aria-components").InputProps, "className"> & {
+        className?: string;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    Group: typeof InputGroup;
+    Prefix: typeof InputPrefix;
+    Suffix: typeof InputSuffix;
+};

package/dist/types/Label.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
-export interface LabelProps {
+import { type StylingProps } from './styling.js';
+import { type ReactNode } from 'react';
+export interface LabelProps extends StylingProps<'root'> {
     children: ReactNode;
     htmlFor?: string;
     id?: string;
 }
 /** Associates visible text with a separately rendered control. */
-export declare function Label({ children, htmlFor, id }: LabelProps): import("react").JSX.Element;
+export declare function Label({ children, htmlFor, id, className, style, classNames }: LabelProps): import("react").JSX.Element;

package/dist/types/Listbox.d.ts

@@ -1,6 +1,8 @@
+import { ListBoxRoot, ListBoxItemPart, ListBoxSectionPart, ListBoxItemIndicator } from './control-composition.js';
+import { type StylingProps } from './styling.js';
 import { type FieldFeedbackProps } from './field.js';
 import { type ListboxOption, type ListboxSelectionMode } from './listbox-selection.js';
-export interface ListboxProps extends FieldFeedbackProps {
+export interface ListboxProps extends FieldFeedbackProps, StylingProps<'root' | 'label' | 'list' | 'empty' | 'item' | 'itemLabel' | 'indicator' | 'description' | 'error'> {
     label: string;
     options: ListboxOption[];
     /** Always an array; empty selection is []. */
@@ -14,4 +16,11 @@ export interface ListboxProps extends FieldFeedbackProps {
     dir?: 'ltr' | 'rtl';
     emptyMessage?: string;
 }
-export declare function Listbox({ label, options, value, defaultValue, onChange, selectionMode, isDisabled, description, errorMessage, isInvalid, name, id, dir, emptyMessage, }: ListboxProps): import("react").JSX.Element;
+declare function ListboxRoot(props: ListboxProps | Parameters<typeof ListBoxRoot>[0]): import("react").JSX.Element;
+export declare const Listbox: typeof ListboxRoot & {
+    Root: typeof ListBoxRoot;
+    Item: typeof ListBoxItemPart;
+    Section: typeof ListBoxSectionPart;
+    ItemIndicator: typeof ListBoxItemIndicator;
+};
+export {};

package/dist/types/NumberField.d.ts

@@ -1,4 +1,6 @@
-export interface NumberFieldProps {
+import { NumberFieldComposition, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, type NumberFieldCompositionProps } from './number-composition.js';
+import { type StylingProps } from './styling.js';
+export interface NumberFieldProps extends StylingProps<'root' | 'label' | 'group' | 'input' | 'button' | 'decrementButton' | 'incrementButton' | 'description' | 'error'> {
     label: string;
     value?: number | null;
     defaultValue?: number | null;
@@ -21,4 +23,12 @@ export interface NumberFieldProps {
     incrementLabel?: string;
     decrementLabel?: string;
 }
-export declare function NumberField({ label, value, defaultValue, onChange, min, max, step, locale, formatOptions, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, name, id, dir, incrementLabel, decrementLabel, }: NumberFieldProps): import("react").JSX.Element;
+declare function NumberFieldRoot(props: NumberFieldProps | NumberFieldCompositionProps): import("react").JSX.Element;
+export declare const NumberField: typeof NumberFieldRoot & {
+    Root: typeof NumberFieldComposition;
+    Group: typeof NumberFieldGroup;
+    Input: typeof NumberFieldInput;
+    IncrementButton: typeof NumberFieldIncrement;
+    DecrementButton: typeof NumberFieldDecrement;
+};
+export type { NumberFieldCompositionProps } from './number-composition.js';

package/dist/types/Pagination.d.ts

@@ -1,4 +1,7 @@
-export interface PaginationProps {
+import { type StylingProps } from './styling.js';
+import { type HTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type PaginationPart = 'root' | 'button' | 'gap' | 'summary';
+export interface PaginationProps extends StylingProps<PaginationPart> {
     totalItems: number;
     pageSize?: number;
     value?: number;
@@ -13,4 +16,28 @@ export interface PaginationProps {
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function Pagination({ totalItems, pageSize, value, defaultValue, onChange, isDisabled, siblingCount, label, previousLabel, nextLabel, pageLabel, dir, id, }: PaginationProps): import("react").JSX.Element;
+export interface PaginationRootProps extends Omit<PaginationProps, 'previousLabel' | 'nextLabel' | 'pageLabel'> {
+    children?: ReactNode;
+}
+export declare function PaginationRoot({ totalItems, pageSize, value, defaultValue, onChange, isDisabled, siblingCount, label, className, classNames, style, dir, id, children, }: PaginationRootProps): import("react").JSX.Element;
+export declare function PaginationPageButton({ page, className, onClick, disabled, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    page: number;
+}): import("react").JSX.Element;
+export declare function PaginationPrevious(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function PaginationNext(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function PaginationSummary({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function PaginationContent(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function PaginationItem(props: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+declare function PaginationComponent(props: PaginationProps | PaginationRootProps): import("react").JSX.Element;
+export declare const Pagination: typeof PaginationComponent & {
+    Root: typeof PaginationRoot;
+    Content: typeof PaginationContent;
+    Item: typeof PaginationItem;
+    PageButton: typeof PaginationPageButton;
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+    Summary: typeof PaginationSummary;
+    Ellipsis: typeof PaginationEllipsis;
+};
+export {};

package/dist/types/Popover.d.ts

@@ -1,5 +1,9 @@
+import type { DialogRootProps } from './structural-parts.js';
+import { PopoverDialog, OverlayHeading, DialogRoot, PopoverCloseButton, OverlayDescription } from './structural-parts.js';
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
-export interface PopoverProps {
+export type PopoverPart = 'root' | 'trigger' | 'panel' | 'content' | 'title' | 'description' | 'body' | 'footer' | 'close';
+export interface PopoverProps extends StylingProps<PopoverPart> {
     triggerLabel: string;
     title: string;
     description?: string;
@@ -11,4 +15,17 @@ export interface PopoverProps {
     closeLabel?: string;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Popover({ triggerLabel, title, description, children, open, defaultOpen, onOpenChange, isDisabled, closeLabel, dir, }: PopoverProps): import("react").JSX.Element;
+declare function PopoverComponent(props: PopoverProps | DialogRootProps): import("react").JSX.Element;
+export declare const Popover: typeof PopoverComponent & {
+    Root: typeof DialogRoot;
+    Trigger: ({ className, ...props }: import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>;
+    Content: ({ className, ...props }: import("react-aria-components").PopoverProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<import("react-aria-components").PopoverProps & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+    Dialog: typeof PopoverDialog;
+    Heading: typeof OverlayHeading;
+    Description: typeof OverlayDescription;
+    Header: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Body: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Footer: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    CloseButton: typeof PopoverCloseButton;
+};
+export {};