@kazee-ds/react 0.5.5 → 0.7.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/Avatar.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type ImgHTMLAttributes, type Ref } from 'react';
+import { type StylingProps } from './styling.js';
+import type { AvatarVariant, ComponentSize, ImageLoadingStatus, IndicatorPlacement, Tone } from './visual.js';
+export declare const AvatarGroupContext: import("react").Context<{
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+}>;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, StylingProps<'image' | 'fallback' | 'badge'> {
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    asChild?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarRoot({ size, tone, variant, radius, asChild, children, className, classNames, ...props }: AvatarProps): import("react").JSX.Element;
+export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    asChild?: boolean;
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    ref?: Ref<HTMLImageElement>;
+}
+export declare function AvatarImage(props: AvatarImageProps): import("react").JSX.Element;
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLSpanElement> {
+    delayMs?: number;
+    tone?: Tone;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarFallback({ delayMs, tone, className, ...props }: AvatarFallbackProps): import("react").JSX.Element | null;
+export interface AvatarBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: ComponentSize;
+    tone?: Tone;
+    placement?: IndicatorPlacement;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarBadge({ size, tone, placement, className, children, ...props }: AvatarBadgeProps): import("react").JSX.Element;
+export declare const Avatar: typeof AvatarRoot & {
+    Root: typeof AvatarRoot;
+    Image: typeof AvatarImage;
+    Fallback: typeof AvatarFallback;
+    Badge: typeof AvatarBadge;
+};

package/dist/types/AvatarGroup.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from 'react';
+import { type AvatarProps } from './Avatar.js';
+import { type StylingProps } from './styling.js';
+import type { AvatarVariant, ComponentSize, Tone } from './visual.js';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, StylingProps<'count'> {
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+    max?: number;
+    isGrid?: boolean;
+    overlap?: 'clip' | 'ring';
+}
+export declare function AvatarGroupCount({ className, ...props }: AvatarProps): import("react").JSX.Element;
+export declare function AvatarGroupRoot({ size, tone, variant, max, isGrid, overlap, className, classNames, children, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export declare const AvatarGroup: typeof AvatarGroupRoot & {
+    Root: typeof AvatarGroupRoot;
+    Count: typeof AvatarGroupCount;
+};

package/dist/types/Badge.d.ts

@@ -1,7 +1,26 @@
-import type { HTMLAttributes } from 'react';
-export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+import { type HTMLAttributes, type Ref } from 'react';
+import type { ComponentSize, IndicatorPlacement, Tone } from './visual.js';
+export type BadgeTone = Tone;
+export type BadgeVariant = 'default' | 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    classNames?: Partial<Record<'root' | 'label', string>>;
     tone?: BadgeTone;
+    size?: ComponentSize;
+    variant?: BadgeVariant;
+    placement?: IndicatorPlacement;
+    asChild?: boolean;
+    ref?: Ref<HTMLSpanElement>;
 }
-/** Static status text. Dynamic announcements belong in an application-owned live region. */
-export declare function Badge({ tone, className, ...props }: BadgeProps): import("react").JSX.Element;
+/** Static status text; wrap in Badge.Anchor to position it relative to another element. */
+export declare function BadgeRoot({ tone, size, variant, placement, asChild, children, className, classNames, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function BadgeAnchor({ className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+}): import("react").JSX.Element;
+export declare function BadgeLabel({ className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+}): import("react").JSX.Element;
+export declare const Badge: typeof BadgeRoot & {
+    Root: typeof BadgeRoot;
+    Anchor: typeof BadgeAnchor;
+    Label: typeof BadgeLabel;
+};

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,7 +1,8 @@
+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';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** The event passed to `onPress`: pointer type, modifier keys, and the target element. */
 export type ButtonPressEvent = Parameters<NonNullable<AriaButtonProps['onPress']>>[0];
 /** Public flags supplied to the Button render function. */
@@ -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/Calendar.d.ts

@@ -0,0 +1,60 @@
+import { type HTMLAttributes } from 'react';
+import { CalendarDate } from '@internationalized/date';
+import { type StylingProps } from './styling.js';
+import type { TemporalRange } from './temporal-model.js';
+export interface MonthPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: number;
+    year?: number;
+    onChange?: (month: number) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function MonthPicker({ value, year, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: MonthPickerProps): import("react").JSX.Element;
+export interface YearPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: number;
+    onChange?: (year: number) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function YearPicker({ value, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: YearPickerProps): import("react").JSX.Element;
+export interface MonthYearNavigationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function MonthYearNavigation({ value, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: MonthYearNavigationProps): import("react").JSX.Element;
+/** Reads actual visibleRange rather than assuming the focused day is the first panel. */
+export declare function CalendarViewHeader({ offset, onNavigate, ...props }: Omit<MonthYearNavigationProps, 'value' | 'onChange'> & {
+    offset?: number;
+    onNavigate: (value: CalendarDate) => void;
+}): import("react").JSX.Element;
+export interface CalendarProps extends StylingProps<'header' | 'grid' | 'day' | 'month'> {
+    label?: string;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    minDate?: string;
+    maxDate?: string;
+    isDateUnavailable?: (value: string) => boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    weekStartsOn?: 0 | 1;
+    visibleMonths?: 1 | 2;
+    referenceDate?: string;
+}
+export interface RangeCalendarProps extends Omit<CalendarProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: TemporalRange | null;
+    defaultValue?: TemporalRange | null;
+    onChange?: (value: TemporalRange | null) => void;
+}
+export declare function Calendar(props: CalendarProps): import("react").JSX.Element;
+export declare function RangeCalendar(props: RangeCalendarProps): import("react").JSX.Element;

package/dist/types/Card.d.ts

@@ -1,5 +1,20 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+import type { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import { type StylingProps } from './styling.js';
+export type CardPart = 'root' | 'action' | 'header' | 'heading' | 'titleRow' | 'title' | 'description' | 'actions' | 'content' | 'footer';
+export interface CardInteractionProps {
+    density?: 'default' | 'compact';
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: string;
+    onPress?: () => void;
+    isDisabled?: boolean;
+    actionLabel?: string;
+    actionLabelledBy?: string;
+    actionClassName?: string;
+    /** Compose a router link using the supplied native anchor props. */
+    renderLink?: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => ReactNode;
+}
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, StylingProps<CardPart>, CardInteractionProps {
     title?: string;
     description?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -9,6 +24,36 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     titleExtras?: ReactNode;
     actions?: ReactNode;
     footer?: ReactNode;
+    headerAlign?: 'start' | 'center' | 'end';
+    dividedHeader?: boolean;
+    flushFooter?: boolean;
 }
-/** 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, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, headerAlign, dividedHeader, flushFooter, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardRoot({ className, classNames, children, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, ...props }: HTMLAttributes<HTMLDivElement> & CardInteractionProps & StylingProps<'action'>): import("react").JSX.Element;
+export declare function CardHeader({ className, align, divided, ...props }: HTMLAttributes<HTMLDivElement> & {
+    align?: 'start' | 'center' | 'end';
+    divided?: boolean;
+}): 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, flush, ...props }: HTMLAttributes<HTMLDivElement> & {
+    flush?: boolean;
+}): 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 {
+import type { ButtonVariant, ButtonSize } from './Button.js';
+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;
@@ -14,6 +19,7 @@ export interface DropdownMenuProps {
     triggerContent?: ReactNode;
     triggerIconOnly?: boolean;
     triggerVariant?: ButtonVariant;
+    triggerSize?: ButtonSize;
     renderIcon?: (item: DropdownMenuItem) => ReactNode;
     selectionMode?: MenuSelectionMode;
     selectedKeys?: string[];
@@ -22,4 +28,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;