@jfrader/ui 0.1.2 → 0.2.0

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

@@ -1,4 +1,4 @@
-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';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
 export type ButtonTone = 'neutral' | 'accent' | 'danger';
@@ -9,7 +9,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'> {
     variant?: ButtonVariant;
     tone?: ButtonTone;
     size?: ButtonSize;
@@ -31,4 +31,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, 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 namespace Button {
+    var displayName: string;
+}

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

@@ -1,7 +1,7 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 /** 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'> {
     /** Selected date, 'YYYY-MM-DD'. */
     value?: string;
     defaultValue?: string;
@@ -20,9 +20,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'>;
+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 declare const Calendar: typeof CalendarRoot & {
+    Header: typeof CalendarHeader;
+    Grid: typeof CalendarGrid;
 };
+export {};

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export type CardVariant = 'flat' | 'raised';
 export type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -14,21 +14,28 @@ export interface CardSlotProps {
     content?: CardPartProps;
     footer?: CardPartProps;
 }
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends ComponentPropsWithRef<'div'> {
     variant?: CardVariant;
     slotProps?: CardSlotProps;
 }
-export type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
-export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+export type CardHeaderProps = ComponentPropsWithRef<'div'>;
+export interface CardTitleProps extends ComponentPropsWithRef<'h3'> {
     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'>;
+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 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,11 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 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'> {
     label?: ReactNode;
     description?: ReactNode;
     indeterminate?: boolean;
@@ -18,4 +18,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, '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,4 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type TextFieldProps } from '../text-field';
 export interface ComboboxProps {
     /** `null` is the controlled "nothing selected" state. */
@@ -25,20 +25,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'> {
 }
-export interface ComboboxItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface ComboboxItemProps extends ComponentPropsWithRef<'div'> {
     /** Unique within the combobox. */
     value: string;
     disabled?: boolean;
 }
-export interface ComboboxEmptyProps extends HTMLAttributes<HTMLDivElement> {
+export interface ComboboxEmptyProps extends ComponentPropsWithRef<'div'> {
 }
 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;
 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,4 @@
-import { type ButtonHTMLAttributes, type DialogHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export interface CommandPaletteProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -13,21 +13,21 @@ export interface CommandPaletteProps {
     formatResultCount?: (count: number) => string;
     children?: ReactNode;
 }
-export interface CommandPaletteTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface CommandPaletteTriggerProps extends ComponentPropsWithRef<'button'> {
 }
-export interface CommandPaletteContentProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'> {
+export interface CommandPaletteContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'> {
 }
-export interface CommandPaletteInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'type'> {
+export interface CommandPaletteInputProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'> {
 }
-export interface CommandPaletteListProps extends HTMLAttributes<HTMLDivElement> {
+export interface CommandPaletteListProps extends ComponentPropsWithRef<'div'> {
 }
-export interface CommandPaletteEmptyProps extends HTMLAttributes<HTMLDivElement> {
+export interface CommandPaletteEmptyProps extends ComponentPropsWithRef<'div'> {
 }
-export interface CommandPaletteGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface CommandPaletteGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
     label: ReactNode;
     children?: ReactNode;
 }
-export interface CommandPaletteItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
     /** Unique within the palette. */
     value: string;
     onSelect?: () => void;
@@ -35,13 +35,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, ...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;
 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,7 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { type LayoutSpace } from '../../styling/layout-style';
 export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl';
-export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface ContainerProps extends ComponentPropsWithRef<'div'> {
     size?: ContainerSize;
     paddingInline?: LayoutSpace;
 }
@@ -11,4 +11,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, ...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,4 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type CalendarWeekday } from '../calendar';
 import { type TextFieldProps } from '../text-field';
 export interface DatePickerProps {
@@ -30,10 +30,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'>;
 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;
 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,4 @@
-import { type ButtonHTMLAttributes, type DialogHTMLAttributes, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type ButtonHTMLAttributes, type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
 export interface DialogProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -10,7 +10,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'> {
     /**
      * 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 +26,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'> {
     /** 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'> {
 }
-export interface DialogDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface DialogDescriptionProps extends ComponentPropsWithRef<'p'> {
 }
-export interface DialogCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DialogCloseProps extends ComponentPropsWithRef<'button'> {
     /**
      * 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 +51,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, ...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;
 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,6 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from 'react';
 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>;
 export interface DividerHorizontalProps extends DividerBaseProps {
     orientation?: 'horizontal';
     label?: ReactNode;
@@ -10,5 +10,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, ...rest }: DividerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Divider {
+    var displayName: string;
+}
 export {};

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

@@ -1,4 +1,7 @@
-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>>;
+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;
+export declare namespace Flex {
+    var displayName: string;
+}

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

@@ -1,6 +1,9 @@
-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';
+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;
+export declare const Kbd: typeof KbdRoot & {
+    Group: typeof KbdGroup;
 };
+export {};

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

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
 export interface MenuProps {
     open?: boolean;
@@ -7,23 +7,27 @@ export interface MenuProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface MenuTriggerProps extends ComponentPropsWithRef<'button'> {
 }
-export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuContentProps extends ComponentPropsWithRef<'div'> {
 }
-export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'onSelect'> {
     /** 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'> {
 }
 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;
 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,16 @@
-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';
+export interface NavigationProps extends ComponentPropsWithRef<'nav'> {
     /** Accessible name of the navigation landmark. */
     label?: string;
 }
-export interface NavigationGroupProps extends HTMLAttributes<HTMLElement> {
+export interface NavigationGroupProps extends ComponentPropsWithRef<'section'> {
     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> {
     href?: string;
     /** Marks the current page (aria-current="page"). */
     active?: boolean;
@@ -18,7 +18,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, ...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;
+export declare const Navigation: typeof NavigationRoot & {
+    Group: typeof NavigationGroup;
+    Item: typeof NavigationItem;
 };
+export {};

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

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'react';
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+import { type ComponentPropsWithRef } from 'react';
+export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onChange'> {
     page: number;
     totalPages: number;
     onPageChange?: (page: number) => void;
@@ -11,4 +11,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, ...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,9 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 export type PillTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
-export interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+export interface PillProps extends ComponentPropsWithRef<'span'> {
     tone?: PillTone;
 }
-export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Pill({ ref, tone, ...rest }: PillProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Pill {
+    var displayName: string;
+}

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

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
 export interface PopoverProps {
     open?: boolean;
@@ -7,13 +7,15 @@ export interface PopoverProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface PopoverTriggerProps extends ComponentPropsWithRef<'button'> {
 }
-export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface PopoverContentProps extends ComponentPropsWithRef<'div'> {
 }
 declare function PopoverRoot({ open: openProp, defaultOpen, onOpenChange, placement, children, }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ref, ...props }: PopoverTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ ref, style, ...rest }: PopoverContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
 };
 export {};

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

@@ -1,10 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export interface ProgressPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
     /** Current value in `0..max`; leave undefined for indeterminate progress. */
     value?: number;
     max?: number;
@@ -16,4 +16,7 @@ export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
         indicator?: ProgressPartProps;
     };
 }
-export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Progress({ ref, value, max, label, getValueLabel, slotProps, 'aria-labelledby': ariaLabelledByProp, ...rest }: ProgressProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Progress {
+    var displayName: string;
+}

package/dist/types/components/radio-group/radio-group.d.ts

@@ -1,7 +1,7 @@
-import { type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export type RadioGroupOrientation = 'vertical' | 'horizontal';
-export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+export interface RadioGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -13,7 +13,7 @@ export interface RadioGroupRadioPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface RadioGroupRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'size'> {
+export interface RadioGroupRadioProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'size'> {
     value: string;
     label?: ReactNode;
     description?: ReactNode;
@@ -24,6 +24,9 @@ export interface RadioGroupRadioProps extends Omit<InputHTMLAttributes<HTMLInput
         description?: RadioGroupRadioPartProps;
     };
 }
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Radio: import("react").ForwardRefExoticComponent<RadioGroupRadioProps & import("react").RefAttributes<HTMLInputElement>>;
+declare function RadioGroupRoot({ ref, value: valueProp, defaultValue, onValueChange, name: nameProp, disabled, orientation, ...rest }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function RadioGroupRadio({ ref, value, label, description, disabled: disabledProp, onChange, slotProps, className, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: RadioGroupRadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Radio: typeof RadioGroupRadio;
 };
+export {};