@jfrader/ui 0.2.0 → 0.4.0

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

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type AccordionType = 'single' | 'multiple';
 export type AccordionValue = string | string[];
-interface AccordionBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+interface AccordionBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     /** Allow closing the last open panel. */
     collapsible?: boolean;
 }
@@ -19,16 +20,16 @@ export interface AccordionMultipleProps extends AccordionBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-export interface AccordionItemProps extends ComponentPropsWithRef<'div'> {
+export interface AccordionItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     value: string;
     disabled?: boolean;
 }
-export type AccordionTriggerProps = ComponentPropsWithRef<'button'>;
-export type AccordionPanelProps = ComponentPropsWithRef<'div'>;
-declare function AccordionRoot({ ref, value: valueProp, defaultValue, onValueChange, type, collapsible, onKeyDown, ...rest }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ ref, value, disabled, ...rest }: AccordionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ ref, onClick, disabled: disabledProp, ...rest }: AccordionTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionPanel({ ref, 'aria-labelledby': ariaLabelledByProp, ...rest }: AccordionPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type AccordionTriggerProps = ComponentPropsWithRef<'button'> & SxProps;
+export type AccordionPanelProps = ComponentPropsWithRef<'div'> & SxProps;
+declare function AccordionRoot({ ref, value: valueProp, defaultValue, onValueChange, type, collapsible, onKeyDown, className, sx, ...rest }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ ref, value, disabled, className, sx, ...rest }: AccordionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ ref, onClick, disabled: disabledProp, className, sx, ...rest }: AccordionTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionPanel({ ref, 'aria-labelledby': ariaLabelledByProp, className, sx, ...rest }: AccordionPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Accordion: typeof AccordionRoot & {
     Item: typeof AccordionItem;
     Trigger: typeof AccordionTrigger;

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

@@ -1,11 +1,12 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
 export interface AlertPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' | 'role'> {
+export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' | 'role'>, SxProps {
     tone?: AlertTone;
     /** Announced tone word. Put visible meaning in the title text. */
     toneLabel?: string;
@@ -20,7 +21,7 @@ export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' |
         dismiss?: AlertPartProps;
     };
 }
-export declare function Alert({ ref, tone, toneLabel, title, children, onDismiss, dismissLabel, slotProps, className, ...rest }: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Alert({ ref, tone, toneLabel, title, children, onDismiss, dismissLabel, slotProps, className, sx, ...rest }: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Alert {
     var displayName: string;
 }

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

@@ -1,12 +1,13 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type AvatarSize = 'sm' | 'md' | 'lg';
 export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
 export interface AvatarPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role' | 'aria-label'> {
+export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role' | 'aria-label'>, SxProps {
     /** Used for the accessible name and the initials fallback. */
     name: string;
     src?: string;
@@ -20,7 +21,7 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'childr
         status?: AvatarPartProps;
     };
 }
-export declare function Avatar({ ref, name, src, size, status, statusLabel, slotProps, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Avatar({ ref, name, src, size, status, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Avatar {
     var displayName: string;
 }

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

@@ -1,5 +1,6 @@
 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 ComponentPropsWithRef<'span'> {
+export interface BadgeProps extends ComponentPropsWithRef<'span'>, SxProps {
     children: ReactNode;
     badgeContent?: ReactNode;
     /** Numbers above `max` render as `max+`. */
@@ -33,7 +34,7 @@ export interface BadgeProps extends ComponentPropsWithRef<'span'> {
  * - 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 function Badge({ ref, children, badgeContent, max, showZero, invisible, variant, tone, anchor, overlap, slotProps, className, ...rest }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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,17 +1,18 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
-export interface BreadcrumbsProps extends ComponentPropsWithRef<'nav'> {
+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 ComponentPropsWithRef<'li'> {
+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;
 }
-declare function BreadcrumbsRoot({ ref, label, separator, children, ...rest }: BreadcrumbsProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function BreadcrumbsItem({ ref, href, current, children, ...rest }: BreadcrumbsItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 };

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

@@ -1,5 +1,6 @@
 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<ComponentPropsWithRef<'button'>, 'color'> {
+export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'color'>, SxProps {
     variant?: ButtonVariant;
     tone?: ButtonTone;
     size?: ButtonSize;
@@ -31,7 +32,7 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'colo
      */
     render?: (props: ButtonRenderProps) => ReactNode;
 }
-export declare function Button({ ref, variant, tone, size, loading, startIcon, endIcon, type, children, onClick, css: cssProp, render, ...props }: ButtonProps): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+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 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<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
     /** Selected date, 'YYYY-MM-DD'. */
     value?: string;
     defaultValue?: string;
@@ -20,11 +21,11 @@ export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defau
     firstDayOfWeek?: CalendarWeekday;
 }
 /** The header renders its own month buttons and label. */
-export type CalendarHeaderProps = Omit<ComponentPropsWithRef<'div'>, 'children'>;
-export type CalendarGridProps = ComponentPropsWithRef<'table'>;
-declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CalendarHeader({ ref, ...props }: CalendarHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CalendarGrid({ ref, onKeyDown, 'aria-labelledby': ariaLabelledByProp, 'aria-label': ariaLabelProp, ...rest }: CalendarGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,5 +1,6 @@
 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,23 +15,23 @@ export interface CardSlotProps {
     content?: CardPartProps;
     footer?: CardPartProps;
 }
-export interface CardProps extends ComponentPropsWithRef<'div'> {
+export interface CardProps extends ComponentPropsWithRef<'div'>, SxProps {
     variant?: CardVariant;
     slotProps?: CardSlotProps;
 }
-export type CardHeaderProps = ComponentPropsWithRef<'div'>;
-export interface CardTitleProps extends ComponentPropsWithRef<'h3'> {
+export type CardHeaderProps = ComponentPropsWithRef<'div'> & SxProps;
+export interface CardTitleProps extends ComponentPropsWithRef<'h3'>, SxProps {
     level?: CardHeadingLevel;
 }
-export type CardDescriptionProps = ComponentPropsWithRef<'p'>;
-export type CardContentProps = ComponentPropsWithRef<'div'>;
-export type CardFooterProps = ComponentPropsWithRef<'div'>;
-declare function CardRoot({ ref, variant, slotProps, className, ...rest }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CardHeader({ ref, className, ...rest }: CardHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CardTitle({ ref, level, className, ...rest }: CardTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CardDescription({ ref, className, ...rest }: CardDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CardContent({ ref, className, ...rest }: CardContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CardFooter({ ref, className, ...rest }: CardFooterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,11 +1,12 @@
 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<ComponentPropsWithRef<'input'>, 'size' | 'type'> {
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     indeterminate?: boolean;
@@ -18,7 +19,7 @@ export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'siz
         description?: CheckboxPartProps;
     };
 }
-export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 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,20 @@ 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 ComponentPropsWithRef<'div'> {
+export interface ComboboxListProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface ComboboxItemProps extends ComponentPropsWithRef<'div'> {
+export interface ComboboxItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     /** Unique within the combobox. */
     value: string;
     disabled?: boolean;
 }
-export interface ComboboxEmptyProps extends ComponentPropsWithRef<'div'> {
+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, id: idProp, onChange, onKeyDown, onBlur, disabled, ...rest }: ComboboxInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function ComboboxList({ ref, id: idProp, style, onMouseDown, children, ...rest }: ComboboxListProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function ComboboxItem({ ref, value, disabled, onClick, children, ...rest }: ComboboxItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function ComboboxEmpty({ ref, children, ...rest }: ComboboxEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+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: typeof ComboboxInput;
     List: typeof ComboboxList;

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

@@ -1,4 +1,5 @@
 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 ComponentPropsWithRef<'button'> {
+export interface CommandPaletteTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface CommandPaletteContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'> {
+export interface CommandPaletteContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'>, SxProps {
 }
-export interface CommandPaletteInputProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'> {
+export interface CommandPaletteInputProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'>, SxProps {
 }
-export interface CommandPaletteListProps extends ComponentPropsWithRef<'div'> {
+export interface CommandPaletteListProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface CommandPaletteEmptyProps extends ComponentPropsWithRef<'div'> {
+export interface CommandPaletteEmptyProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface CommandPaletteGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+export interface CommandPaletteGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
     label: ReactNode;
     children?: ReactNode;
 }
-export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'>, SxProps {
     /** Unique within the palette. */
     value: string;
     onSelect?: () => void;
@@ -35,13 +36,13 @@ export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div
     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, ...rest }: CommandPaletteTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteContent({ ref, ...props }: CommandPaletteContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteInput({ ref, onChange, onKeyDown, ...rest }: CommandPaletteInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteList({ ref, onMouseDown, children, ...rest }: CommandPaletteListProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteEmpty({ ref, children, ...rest }: CommandPaletteEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
-declare function CommandPaletteGroup({ ref, label, children, 'aria-labelledby': externalLabelledBy, ...rest }: CommandPaletteGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteItem({ ref, value, onSelect, keywords, onClick, children, ...rest }: CommandPaletteItemProps): 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: typeof CommandPaletteTrigger;
     Content: typeof CommandPaletteContent;

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

@@ -1,7 +1,8 @@
 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 ComponentPropsWithRef<'div'> {
+export interface ContainerProps extends ComponentPropsWithRef<'div'>, SxProps {
     size?: ContainerSize;
     paddingInline?: LayoutSpace;
 }
@@ -11,7 +12,7 @@ export declare const CONTAINER_MAX_INLINE_SIZE: {
     readonly lg: '1024px';
     readonly xl: '1280px';
 };
-export declare function Container({ ref, size, paddingInline, ...rest }: ContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 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,10 @@ 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<ComponentPropsWithRef<'div'>, '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, ...rest }: DatePickerPopupProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function DatePickerPopup({ ref, style, className, sx, ...rest }: DatePickerPopupProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const DatePicker: typeof DatePickerRoot & {
     Input: typeof DatePickerInput;
     Popup: typeof DatePickerPopup;

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

@@ -1,4 +1,5 @@
 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 ComponentPropsWithRef<'button'> {
+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 ComponentPropsWithRef<'button'> {
      */
     render?: (props: DialogPartRenderProps) => ReactNode;
 }
-export interface DialogContentProps extends Omit<ComponentPropsWithRef<'dialog'>, '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 ComponentPropsWithRef<'h2'> {
+export interface DialogTitleProps extends ComponentPropsWithRef<'h2'>, SxProps {
 }
-export interface DialogDescriptionProps extends ComponentPropsWithRef<'p'> {
+export interface DialogDescriptionProps extends ComponentPropsWithRef<'p'>, SxProps {
 }
-export interface DialogCloseProps extends ComponentPropsWithRef<'button'> {
+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,11 @@ export interface DialogCloseProps extends ComponentPropsWithRef<'button'> {
     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, ...rest }: DialogTriggerProps): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-declare function DialogContent({ ref, ...props }: DialogContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ ref, ...props }: DialogTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ ref, ...props }: DialogDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ref, onClick, render, ...rest }: DialogCloseProps): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+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: typeof DialogTrigger;
     Content: typeof DialogContent;

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

@@ -1,6 +1,7 @@
 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'> & RefAttributes<HTMLElement>;
+type DividerBaseProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'aria-orientation'> & RefAttributes<HTMLElement> & SxProps;
 export interface DividerHorizontalProps extends DividerBaseProps {
     orientation?: 'horizontal';
     label?: ReactNode;
@@ -10,7 +11,7 @@ export interface DividerVerticalProps extends DividerBaseProps {
     label?: never;
 }
 export type DividerProps = DividerHorizontalProps | DividerVerticalProps;
-export declare function Divider({ ref, orientation, label, 'aria-labelledby': ariaLabelledBy, ...rest }: DividerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 }

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,7 +1,8 @@
 import type { ComponentPropsWithRef } from 'react';
 import { type LayoutProps } from '../../styling/layout-style';
-export type FlexProps = ComponentPropsWithRef<'div'> & LayoutProps;
-export declare function Flex({ ref, direction, wrap, inline, align, justify, gap, ...rest }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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,8 +1,9 @@
 import { type ComponentPropsWithRef } from 'react';
-export type KbdProps = ComponentPropsWithRef<'kbd'>;
-export type KbdGroupProps = ComponentPropsWithRef<'span'>;
-declare function KbdRoot({ ref, ...props }: KbdProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function KbdGroup({ ref, children, ...rest }: KbdGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 };

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

@@ -1,5 +1,6 @@
 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,23 @@ export interface MenuProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface MenuTriggerProps extends ComponentPropsWithRef<'button'> {
+export interface MenuTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface MenuContentProps extends ComponentPropsWithRef<'div'> {
+export interface MenuContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, '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 ComponentPropsWithRef<'div'> {
+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, ...props }: MenuTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuContent({ ref, style, children, ...rest }: MenuContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
-declare function MenuItem({ ref, onSelect, disabled, onClick, ...rest }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuSeparator({ ref, ...props }: MenuSeparatorProps): 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: typeof MenuTrigger;
     Content: typeof MenuContent;

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

@@ -1,16 +1,17 @@
 import { type AnchorHTMLAttributes, type ComponentPropsWithRef, type ReactNode, type RefAttributes } from 'react';
-export interface NavigationProps extends ComponentPropsWithRef<'nav'> {
+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 ComponentPropsWithRef<'section'> {
+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>, RefAttributes<HTMLElement> {
+export interface NavigationItemProps extends AnchorHTMLAttributes<HTMLElement>, RefAttributes<HTMLElement>, SxProps {
     href?: string;
     /** Marks the current page (aria-current="page"). */
     active?: boolean;
@@ -18,9 +19,9 @@ export interface NavigationItemProps extends AnchorHTMLAttributes<HTMLElement>,
     /** Decorative leading icon, hidden from assistive tech. */
     icon?: ReactNode;
 }
-declare function NavigationRoot({ ref, label, ...rest }: NavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function NavigationGroup({ ref, label, collapsible, defaultOpen, children, ...rest }: NavigationGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function NavigationItem({ ref, href, active, disabled, icon, children, ...rest }: NavigationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
-export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onChange'> {
+import { type SxProps } from '../../styling/sx';
+export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onChange'>, SxProps {
     page: number;
     totalPages: number;
     onPageChange?: (page: number) => void;
@@ -11,7 +12,7 @@ export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onC
     nextLabel?: string;
     locale?: string;
 }
-export declare function Pagination({ ref, page, totalPages, onPageChange, siblingCount, label, previousLabel, nextLabel, locale, ...rest }: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 }