@jfrader/ui 0.1.2 → 0.3.0

package/dist/types/components/badge/badge.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type BadgeVariant = 'standard' | 'dot';
 export type BadgeTone = 'accent' | 'danger' | 'neutral';
 export type BadgeOverlap = 'rectangular' | 'circular';
@@ -11,7 +12,7 @@ export interface BadgePartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends ComponentPropsWithRef<'span'>, SxProps {
     children: ReactNode;
     badgeContent?: ReactNode;
     /** Numbers above `max` render as `max+`. */
@@ -33,4 +34,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * - Control with an explicit `aria-label`: put the count in the label (`aria-label="Inbox, 3 unread"`).
  * - Control named by its visible text: the count is read right after the control's name.
  */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Badge({ ref, children, badgeContent, max, showZero, invisible, variant, tone, anchor, overlap, slotProps, className, sx, ...rest }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Badge {
+    var displayName: string;
+}

package/dist/types/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,15 +1,19 @@
-import { type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react';
-export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+export interface BreadcrumbsProps extends ComponentPropsWithRef<'nav'>, SxProps {
     /** Accessible name of the navigation landmark. */
     label?: string;
     /** Rendered (aria-hidden) between items. */
     separator?: ReactNode;
 }
-export interface BreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement> {
+export interface BreadcrumbsItemProps extends ComponentPropsWithRef<'li'>, SxProps {
     href?: string;
     /** Marks the current page. Defaults to the last item when no item sets it. */
     current?: boolean;
 }
-export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLElement>> & {
-    Item: import("react").ForwardRefExoticComponent<BreadcrumbsItemProps & import("react").RefAttributes<HTMLLIElement>>;
+declare function BreadcrumbsRoot({ ref, label, separator, children, className, sx, ...rest }: BreadcrumbsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BreadcrumbsItem({ ref, href, current, children, className, sx, ...rest }: BreadcrumbsItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Breadcrumbs: typeof BreadcrumbsRoot & {
+    Item: typeof BreadcrumbsItem;
 };
+export {};

package/dist/types/components/button/button.d.ts

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes, type ReactNode, type RefCallback } from 'react';
+import { type ButtonHTMLAttributes, type ComponentPropsWithRef, type ReactNode, type RefCallback } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
 export type ButtonTone = 'neutral' | 'accent' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -9,7 +10,7 @@ export interface ButtonRenderProps extends Omit<ButtonHTMLAttributes<HTMLElement
     css: Interpolation<Theme>;
     'data-ui': string;
 }
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'color'>, SxProps {
     variant?: ButtonVariant;
     tone?: ButtonTone;
     size?: ButtonSize;
@@ -31,4 +32,7 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      */
     render?: (props: ButtonRenderProps) => ReactNode;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Button({ ref, variant, tone, size, loading, startIcon, endIcon, type, children, onClick, className, css: cssProp, sx, render, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+}

package/dist/types/components/calendar/calendar.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 /** Day of the week as counted by `Date#getUTCDay`: 0 is Sunday, 6 is Saturday. */
 export type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
     /** Selected date, 'YYYY-MM-DD'. */
     value?: string;
     defaultValue?: string;
@@ -20,9 +21,13 @@ export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'def
     firstDayOfWeek?: CalendarWeekday;
 }
 /** The header renders its own month buttons and label. */
-export type CalendarHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
-export type CalendarGridProps = HTMLAttributes<HTMLTableElement>;
-export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<CalendarHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Grid: import("react").ForwardRefExoticComponent<CalendarGridProps & import("react").RefAttributes<HTMLTableElement>>;
+export type CalendarHeaderProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & SxProps;
+export type CalendarGridProps = ComponentPropsWithRef<'table'> & SxProps;
+declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, className, sx, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CalendarHeader({ ref, className, sx, ...props }: CalendarHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CalendarGrid({ ref, onKeyDown, 'aria-labelledby': ariaLabelledByProp, 'aria-label': ariaLabelProp, className, sx, ...rest }: CalendarGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Calendar: typeof CalendarRoot & {
+    Header: typeof CalendarHeader;
+    Grid: typeof CalendarGrid;
 };
+export {};

package/dist/types/components/card/card.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type CardVariant = 'flat' | 'raised';
 export type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface CardPartProps {
@@ -14,21 +15,28 @@ export interface CardSlotProps {
     content?: CardPartProps;
     footer?: CardPartProps;
 }
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends ComponentPropsWithRef<'div'>, SxProps {
     variant?: CardVariant;
     slotProps?: CardSlotProps;
 }
-export type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
-export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+export type CardHeaderProps = ComponentPropsWithRef<'div'> & SxProps;
+export interface CardTitleProps extends ComponentPropsWithRef<'h3'>, SxProps {
     level?: CardHeadingLevel;
 }
-export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
-export type CardContentProps = HTMLAttributes<HTMLDivElement>;
-export type CardFooterProps = HTMLAttributes<HTMLDivElement>;
-export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<CardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Title: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    Description: import("react").ForwardRefExoticComponent<CardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-    Content: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type CardDescriptionProps = ComponentPropsWithRef<'p'> & SxProps;
+export type CardContentProps = ComponentPropsWithRef<'div'> & SxProps;
+export type CardFooterProps = ComponentPropsWithRef<'div'> & SxProps;
+declare function CardRoot({ ref, variant, slotProps, className, sx, ...rest }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardHeader({ ref, className, sx, ...rest }: CardHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardTitle({ ref, level, className, sx, ...rest }: CardTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardDescription({ ref, className, sx, ...rest }: CardDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardContent({ ref, className, sx, ...rest }: CardContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardFooter({ ref, className, sx, ...rest }: CardFooterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
 };
+export {};

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,11 +1,12 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type CheckboxSize = 'sm' | 'md';
 export interface CheckboxPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     indeterminate?: boolean;
@@ -18,4 +19,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
         description?: CheckboxPartProps;
     };
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, sx, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}

package/dist/types/components/combobox/combobox.d.ts

@@ -1,4 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
 import { type TextFieldProps } from '../text-field';
 export interface ComboboxProps {
     /** `null` is the controlled "nothing selected" state. */
@@ -25,20 +26,24 @@ export interface ComboboxInputProps extends Omit<TextFieldProps, 'value' | 'defa
     /** Initial input text; when set, it filters the options from the first render. */
     defaultInputValue?: string;
 }
-export interface ComboboxListProps extends HTMLAttributes<HTMLDivElement> {
+export interface ComboboxListProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface ComboboxItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface ComboboxItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     /** Unique within the combobox. */
     value: string;
     disabled?: boolean;
 }
-export interface ComboboxEmptyProps extends HTMLAttributes<HTMLDivElement> {
+export interface ComboboxEmptyProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 declare function ComboboxRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, name, filter, onInputChange, children, }: ComboboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ComboboxInput({ ref, inputValue, defaultInputValue, label, description, error, size, slotProps, className, sx, id: idProp, onChange, onKeyDown, onBlur, disabled, ...rest }: ComboboxInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ ref, id: idProp, style, onMouseDown, children, className, sx, ...rest }: ComboboxListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ ref, value, disabled, onClick, children, className, sx, ...rest }: ComboboxItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ComboboxEmpty({ ref, children, className, sx, ...rest }: ComboboxEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Combobox: typeof ComboboxRoot & {
-    Input: import("react").ForwardRefExoticComponent<ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
-    List: import("react").ForwardRefExoticComponent<ComboboxListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Empty: import("react").ForwardRefExoticComponent<ComboboxEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: typeof ComboboxInput;
+    List: typeof ComboboxList;
+    Item: typeof ComboboxItem;
+    Empty: typeof ComboboxEmpty;
 };
 export {};

package/dist/types/components/command-palette/command-palette.d.ts

@@ -1,4 +1,5 @@
-import { type ButtonHTMLAttributes, type DialogHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
 export interface CommandPaletteProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -13,21 +14,21 @@ export interface CommandPaletteProps {
     formatResultCount?: (count: number) => string;
     children?: ReactNode;
 }
-export interface CommandPaletteTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface CommandPaletteTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface CommandPaletteContentProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'> {
+export interface CommandPaletteContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'>, SxProps {
 }
-export interface CommandPaletteInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'type'> {
+export interface CommandPaletteInputProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'>, SxProps {
 }
-export interface CommandPaletteListProps extends HTMLAttributes<HTMLDivElement> {
+export interface CommandPaletteListProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface CommandPaletteEmptyProps extends HTMLAttributes<HTMLDivElement> {
+export interface CommandPaletteEmptyProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface CommandPaletteGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface CommandPaletteGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
     label: ReactNode;
     children?: ReactNode;
 }
-export interface CommandPaletteItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'>, SxProps {
     /** Unique within the palette. */
     value: string;
     onSelect?: () => void;
@@ -35,13 +36,20 @@ export interface CommandPaletteItemProps extends Omit<HTMLAttributes<HTMLDivElem
     keywords?: string;
 }
 declare function CommandPaletteRoot({ open: openProp, defaultOpen, onOpenChange, label, filter, emptyMessage, formatResultCount, children, }: CommandPaletteProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteTrigger({ ref, onClick, className, sx, ...rest }: CommandPaletteTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteContent({ ref, className, sx, ...props }: CommandPaletteContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteInput({ ref, onChange, onKeyDown, className, sx, ...rest }: CommandPaletteInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteList({ ref, onMouseDown, children, className, sx, ...rest }: CommandPaletteListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteEmpty({ ref, children, className, sx, ...rest }: CommandPaletteEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function CommandPaletteGroup({ ref, label, children, 'aria-labelledby': externalLabelledBy, className, sx, ...rest }: CommandPaletteGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteItem({ ref, value, onSelect, keywords, onClick, children, className, sx, ...rest }: CommandPaletteItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const CommandPalette: typeof CommandPaletteRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<CommandPaletteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<CommandPaletteContentProps & import("react").RefAttributes<HTMLDialogElement>>;
-    Input: import("react").ForwardRefExoticComponent<CommandPaletteInputProps & import("react").RefAttributes<HTMLInputElement>>;
-    List: import("react").ForwardRefExoticComponent<CommandPaletteListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Empty: import("react").ForwardRefExoticComponent<CommandPaletteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
-    Group: import("react").ForwardRefExoticComponent<CommandPaletteGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<CommandPaletteItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof CommandPaletteTrigger;
+    Content: typeof CommandPaletteContent;
+    Input: typeof CommandPaletteInput;
+    List: typeof CommandPaletteList;
+    Empty: typeof CommandPaletteEmpty;
+    Group: typeof CommandPaletteGroup;
+    Item: typeof CommandPaletteItem;
 };
 export {};

package/dist/types/components/container/container.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { type LayoutSpace } from '../../styling/layout-style';
+import { type SxProps } from '../../styling/sx';
 export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl';
-export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface ContainerProps extends ComponentPropsWithRef<'div'>, SxProps {
     size?: ContainerSize;
     paddingInline?: LayoutSpace;
 }
@@ -11,4 +12,7 @@ export declare const CONTAINER_MAX_INLINE_SIZE: {
     readonly lg: '1024px';
     readonly xl: '1280px';
 };
-export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Container({ ref, size, paddingInline, className, sx, ...rest }: ContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Container {
+    var displayName: string;
+}

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,4 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
 import { type CalendarWeekday } from '../calendar';
 import { type TextFieldProps } from '../text-field';
 export interface DatePickerProps {
@@ -30,10 +31,12 @@ export interface DatePickerProps {
 export interface DatePickerInputProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'readOnly' | 'placeholder' | 'name' | 'type'> {
 }
 /** The popup renders its own calendar. */
-export type DatePickerPopupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type DatePickerPopupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & SxProps;
 declare function DatePickerRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek, disabled: disabledProp, name, placeholder: placeholderProp, children, }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DatePickerInput({ ref, label, id: idProp, disabled: disabledProp, slotProps, onKeyDown, onKeyUp, ...rest }: DatePickerInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DatePickerPopup({ ref, style, className, sx, ...rest }: DatePickerPopupProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const DatePicker: typeof DatePickerRoot & {
-    Input: import("react").ForwardRefExoticComponent<DatePickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
-    Popup: import("react").ForwardRefExoticComponent<DatePickerPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: typeof DatePickerInput;
+    Popup: typeof DatePickerPopup;
 };
 export {};

package/dist/types/components/dialog/dialog.d.ts

@@ -1,4 +1,5 @@
-import { type ButtonHTMLAttributes, type DialogHTMLAttributes, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type ButtonHTMLAttributes, type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
+import { type SxProps } from '../../styling/sx';
 export interface DialogProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -10,7 +11,7 @@ export interface DialogPartRenderProps extends ButtonHTMLAttributes<HTMLButtonEl
     ref: Ref<HTMLButtonElement>;
     'data-ui': string;
 }
-export interface DialogTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DialogTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
     /**
      * Replaces the default button. Spread ALL supplied props onto the operative element and attach
      * the supplied ref, including when composing through Button. The forwarded and callback refs
@@ -26,15 +27,15 @@ export interface DialogTriggerProps extends ButtonHTMLAttributes<HTMLButtonEleme
      */
     render?: (props: DialogPartRenderProps) => ReactNode;
 }
-export interface DialogContentProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'> {
+export interface DialogContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'>, SxProps {
     /** Set false to keep structured content out of the dialog's accessible description. */
     withDescription?: boolean;
 }
-export interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+export interface DialogTitleProps extends ComponentPropsWithRef<'h2'>, SxProps {
 }
-export interface DialogDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface DialogDescriptionProps extends ComponentPropsWithRef<'p'>, SxProps {
 }
-export interface DialogCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DialogCloseProps extends ComponentPropsWithRef<'button'>, SxProps {
     /**
      * Replaces the default button. Spread ALL supplied props onto the operative element and attach
      * the supplied ref, including when composing through Button. The forwarded and callback refs
@@ -51,11 +52,16 @@ export interface DialogCloseProps extends ButtonHTMLAttributes<HTMLButtonElement
     render?: (props: DialogPartRenderProps) => ReactNode;
 }
 declare function DialogRoot({ open: openProp, defaultOpen, onOpenChange, children }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ref, onClick, render, className, sx, ...rest }: DialogTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DialogContent({ ref, className, sx, ...props }: DialogContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ ref, className, sx, ...props }: DialogTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ ref, className, sx, ...props }: DialogDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ref, onClick, render, className, sx, ...rest }: DialogCloseProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Dialog: typeof DialogRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDialogElement>>;
-    Title: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    Description: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-    Close: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: typeof DialogTrigger;
+    Content: typeof DialogContent;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
 };
 export {};

package/dist/types/components/divider/divider.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type DividerOrientation = 'horizontal' | 'vertical';
-type DividerBaseProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'aria-orientation'>;
+type DividerBaseProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'aria-orientation'> & RefAttributes<HTMLElement> & SxProps;
 export interface DividerHorizontalProps extends DividerBaseProps {
     orientation?: 'horizontal';
     label?: ReactNode;
@@ -10,5 +11,8 @@ export interface DividerVerticalProps extends DividerBaseProps {
     label?: never;
 }
 export type DividerProps = DividerHorizontalProps | DividerVerticalProps;
-export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Divider({ ref, orientation, label, 'aria-labelledby': ariaLabelledBy, className, sx, ...rest }: DividerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Divider {
+    var displayName: string;
+}
 export {};

package/dist/types/components/field/field-anatomy.d.ts

@@ -1,5 +1,6 @@
 import { type AriaAttributes, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export interface FieldPartProps {
     className?: string;
     css?: Interpolation<Theme>;
@@ -25,13 +26,13 @@ export declare function useFieldAnatomy({ id: idProp, description, error, 'aria-
     describedBy: string | undefined;
     ariaInvalid: "false" | "grammar" | "spelling" | "true" | boolean | undefined;
 };
-interface FieldRootProps {
+interface FieldRootProps extends SxProps {
     'data-ui': string;
     className?: string;
     part?: FieldPartProps;
     children: ReactNode;
 }
-export declare function FieldRoot({ 'data-ui': dataUi, className, part, children }: FieldRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FieldRoot({ 'data-ui': dataUi, className, sx, part, children }: FieldRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
 interface FieldLabelProps {
     htmlFor: string;
     required?: boolean;

package/dist/types/components/flex/flex.d.ts

@@ -1,4 +1,8 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { type LayoutProps } from '../../styling/layout-style';
-export type FlexProps = HTMLAttributes<HTMLDivElement> & LayoutProps;
-export declare const Flex: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & LayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type SxProps } from '../../styling/sx';
+export type FlexProps = ComponentPropsWithRef<'div'> & LayoutProps & SxProps;
+export declare function Flex({ ref, direction, wrap, inline, align, justify, gap, className, sx, ...rest }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Flex {
+    var displayName: string;
+}

package/dist/types/components/kbd/kbd.d.ts

@@ -1,6 +1,10 @@
-import { type HTMLAttributes } from 'react';
-export type KbdProps = HTMLAttributes<HTMLElement>;
-export type KbdGroupProps = HTMLAttributes<HTMLSpanElement>;
-export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").ForwardRefExoticComponent<KbdGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
+export type KbdProps = ComponentPropsWithRef<'kbd'> & SxProps;
+export type KbdGroupProps = ComponentPropsWithRef<'span'> & SxProps;
+declare function KbdRoot({ ref, className, sx, ...props }: KbdProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function KbdGroup({ ref, children, className, sx, ...rest }: KbdGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Kbd: typeof KbdRoot & {
+    Group: typeof KbdGroup;
 };
+export {};

package/dist/types/components/menu/menu.d.ts

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
+import { type SxProps } from '../../styling/sx';
 export interface MenuProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -7,23 +8,27 @@ export interface MenuProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface MenuTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'onSelect'>, SxProps {
     /** Called when the item is activated. The menu then closes unless a click handler called
      * `event.preventDefault()`. */
     onSelect?: () => void;
     disabled?: boolean;
 }
-export interface MenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuSeparatorProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 declare function MenuRoot({ open: openProp, defaultOpen, onOpenChange, placement, children, }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function MenuTrigger({ ref, className, sx, ...props }: MenuTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function MenuContent({ ref, style, children, className, sx, ...rest }: MenuContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function MenuItem({ ref, onSelect, disabled, onClick, className, sx, ...rest }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function MenuSeparator({ ref, className, sx, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Menu: typeof MenuRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<MenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Separator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    Separator: typeof MenuSeparator;
 };
 export {};

package/dist/types/components/navigation/navigation.d.ts

@@ -1,16 +1,17 @@
-import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
-export interface NavigationProps extends HTMLAttributes<HTMLElement> {
+import { type AnchorHTMLAttributes, type ComponentPropsWithRef, type ReactNode, type RefAttributes } from 'react';
+import { type SxProps } from '../../styling/sx';
+export interface NavigationProps extends ComponentPropsWithRef<'nav'>, SxProps {
     /** Accessible name of the navigation landmark. */
     label?: string;
 }
-export interface NavigationGroupProps extends HTMLAttributes<HTMLElement> {
+export interface NavigationGroupProps extends ComponentPropsWithRef<'section'>, SxProps {
     label?: ReactNode;
     /** Render as a native <details> disclosure; the label becomes its <summary>. */
     collapsible?: boolean;
     /** Initial `open` attribute of a collapsible group. The browser owns the state afterwards. */
     defaultOpen?: boolean;
 }
-export interface NavigationItemProps extends AnchorHTMLAttributes<HTMLElement> {
+export interface NavigationItemProps extends AnchorHTMLAttributes<HTMLElement>, RefAttributes<HTMLElement>, SxProps {
     href?: string;
     /** Marks the current page (aria-current="page"). */
     active?: boolean;
@@ -18,7 +19,11 @@ export interface NavigationItemProps extends AnchorHTMLAttributes<HTMLElement> {
     /** Decorative leading icon, hidden from assistive tech. */
     icon?: ReactNode;
 }
-export declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").ForwardRefExoticComponent<NavigationGroupProps & import("react").RefAttributes<HTMLElement>>;
-    Item: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLElement>>;
+declare function NavigationRoot({ ref, label, className, sx, ...rest }: NavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function NavigationGroup({ ref, label, collapsible, defaultOpen, children, className, sx, ...rest }: NavigationGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function NavigationItem({ ref, href, active, disabled, icon, children, className, sx, ...rest }: NavigationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Navigation: typeof NavigationRoot & {
+    Group: typeof NavigationGroup;
+    Item: typeof NavigationItem;
 };
+export {};

package/dist/types/components/pagination/pagination.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
+export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onChange'>, SxProps {
     page: number;
     totalPages: number;
     onPageChange?: (page: number) => void;
@@ -11,4 +12,7 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onCh
     nextLabel?: string;
     locale?: string;
 }
-export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Pagination({ ref, page, totalPages, onPageChange, siblingCount, label, previousLabel, nextLabel, locale, className, sx, ...rest }: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Pagination {
+    var displayName: string;
+}

package/dist/types/components/pill/pill.d.ts

@@ -1,6 +1,10 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type PillTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
-export interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+export interface PillProps extends ComponentPropsWithRef<'span'>, SxProps {
     tone?: PillTone;
 }
-export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Pill({ ref, tone, className, sx, ...rest }: PillProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Pill {
+    var displayName: string;
+}