@jfrader/ui 0.4.0 → 0.5.1

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

@@ -0,0 +1,55 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type MenuItemTone } from '../menu/menu';
+export type ContextMenuItemTone = MenuItemTone;
+export interface ContextMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface ContextMenuTargetProps extends ComponentPropsWithRef<'div'>, SxProps {
+    /** Also open on a plain click or tap (and Enter/Space on the Target). Only for inert objects:
+     * interactive children would lose their own click. */
+    openOnClick?: boolean;
+    /** Leave the browser's native context menu alone. */
+    disabled?: boolean;
+}
+export interface ContextMenuTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+export interface ContextMenuContentProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface ContextMenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'onSelect'>, SxProps {
+    /** Called once when the item is activated. The menu then closes unless a click handler called
+     * `event.preventDefault()`. */
+    onSelect?: () => void;
+    disabled?: boolean;
+    tone?: ContextMenuItemTone;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+}
+export interface ContextMenuCheckboxItemProps extends Omit<ContextMenuItemProps, 'value' | 'defaultValue'> {
+    value?: boolean;
+    defaultValue?: boolean;
+    onValueChange?: (checked: boolean) => void;
+    /** Close the menu after toggling. Off by default so several options can be toggled in a row. */
+    closeOnSelect?: boolean;
+}
+export interface ContextMenuSeparatorProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+declare function ContextMenuRoot({ open, defaultOpen, onOpenChange, children }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuTarget({ ref, id, openOnClick, disabled, 'aria-labelledby': ariaLabelledBy, className, sx, ...rest }: ContextMenuTargetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ ref, id, className, sx, ...rest }: ContextMenuTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ ref, style, dir, onKeyDown, ...props }: ContextMenuContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ tone, icon, children, ...props }: ContextMenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuCheckboxItem({ value, defaultValue, onValueChange, onSelect, closeOnSelect, tone, icon, children, ...props }: ContextMenuCheckboxItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator(props: ContextMenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: typeof ContextMenuRoot & {
+    Target: typeof ContextMenuTarget;
+    Trigger: typeof ContextMenuTrigger;
+    Content: typeof ContextMenuContent;
+    Item: typeof ContextMenuItem;
+    CheckboxItem: typeof ContextMenuCheckboxItem;
+    Separator: typeof ContextMenuSeparator;
+};
+export {};

package/dist/types/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenu } from './context-menu';
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTargetProps, ContextMenuTriggerProps, } from './context-menu';

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

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import type { SxProps } from '../../styling/sx';
+import { type ButtonSize, type ButtonTone, type ButtonVariant } from '../button';
+export type CopyButtonValue = 'idle' | 'pending' | 'copied' | 'error';
+export type CopyButtonIcons = Partial<Record<CopyButtonValue, ReactNode>>;
+export interface CopyButtonSlotPartProps extends ComponentPropsWithoutRef<'span'> {
+    css?: Interpolation<Theme>;
+}
+export interface CopyButtonSlotProps {
+    icon?: CopyButtonSlotPartProps;
+    label?: CopyButtonSlotPartProps;
+    status?: CopyButtonSlotPartProps;
+}
+export interface CopyButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'value' | 'defaultValue' | 'color' | 'type'>, SxProps {
+    /** The string written to the clipboard. An empty string is a valid payload. */
+    text: string;
+    /** Accessible name and idle face, e.g. "Copy command". */
+    label: string;
+    /** Face and announcement while the write is in flight. */
+    pendingLabel: string;
+    /** Face and announcement after a successful write. */
+    copiedLabel: string;
+    /** Face and announcement after a failed or unavailable write. */
+    errorLabel: string;
+    /** Hides the visible label; the accessible name and announcements stay. */
+    iconOnly?: boolean;
+    /** Decorative icon per face; a supplied key replaces the default, including `null` for none. */
+    icons?: CopyButtonIcons;
+    value?: CopyButtonValue;
+    defaultValue?: CopyButtonValue;
+    onValueChange?: (value: CopyButtonValue) => void;
+    /** Called once per successful write with the text captured at activation. */
+    onCopied?: (text: string) => void;
+    /** Called once per failed write, including a missing Clipboard API. */
+    onCopyError?: (error: unknown) => void;
+    /** Milliseconds before `copied`/`error` request `idle`; 0 keeps the result face. */
+    resetAfterMs?: number;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    slotProps?: CopyButtonSlotProps;
+    /** Consumer style overrides, merged after the component's own styles. */
+    css?: Interpolation<Theme>;
+}
+export declare function CopyButton({ ref, text, label, pendingLabel, copiedLabel, errorLabel, iconOnly, icons, value, defaultValue, onValueChange, onCopied, onCopyError, resetAfterMs, variant, tone, size, slotProps, disabled, onClick, className, css: cssProp, sx, ...rest }: CopyButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace CopyButton {
+    var displayName: string;
+}

package/dist/types/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonIcons, CopyButtonProps, CopyButtonSlotPartProps, CopyButtonSlotProps, CopyButtonValue, } from './copy-button';

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

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type CountdownUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+export type CountdownVariant = 'display' | 'compact';
+export interface CountdownPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface CountdownProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    /** Exact instant: epoch milliseconds, Date, or an ISO date-time with Z or an explicit offset. */
+    target: Date | number | string;
+    variant?: CountdownVariant;
+    units?: readonly CountdownUnit[];
+    label?: ReactNode;
+    locale?: Intl.LocalesArgument;
+    unitDisplay?: 'long' | 'short' | 'narrow';
+    completeLabel?: ReactNode;
+    completeText?: string;
+    pendingLabel?: ReactNode;
+    invalidLabel?: ReactNode;
+    invalidText?: string;
+    /** Authoritative epoch-ms source. Background callbacks run at the first executable wake-up. */
+    clock?: () => number;
+    /** Shared server snapshot for identical SSR and hydration output. */
+    initialNow?: number;
+    /** Once per resolved target identity, including a target already elapsed at mount. */
+    onComplete?: (targetEpochMs: number) => void;
+    announceCompletion?: boolean;
+    completionIcon?: ReactNode;
+    slotProps?: Partial<Record<'label' | 'content' | 'unit' | 'number' | 'complete' | 'icon' | 'description', CountdownPartProps>>;
+}
+/** Noninteractive ARIA timer. Tab and every other key pass through; no focus or editable state. */
+export declare function Countdown({ ref, target, variant, units, label, locale, unitDisplay, completeLabel, completeText, pendingLabel, invalidLabel, invalidText, clock, initialNow, onComplete, announceCompletion, completionIcon, slotProps, className, sx, 'aria-labelledby': externalLabel, 'aria-describedby': externalDescription, 'aria-label': ariaLabel, ...rest }: CountdownProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Countdown {
+    var displayName: string;
+}

package/dist/types/components/countdown/index.d.ts

@@ -0,0 +1 @@
+export { Countdown, type CountdownProps, type CountdownUnit, type CountdownVariant, type CountdownPartProps, } from './countdown';

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

@@ -32,7 +32,7 @@ export interface DatePickerInputProps extends Omit<TextFieldProps, 'value' | 'de
 }
 /** The popup renders its own calendar. */
 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 DatePickerRoot(props: 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 & {

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

@@ -0,0 +1,103 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type CalendarRange, type CalendarWeekday } from '../calendar';
+/** Inclusive range of 'YYYY-MM-DD' dates. */
+export type DateRangeValue = CalendarRange;
+export type DateRangePickerMonths = 'auto' | 1 | 2;
+export type DateRangePickerSize = 'sm' | 'md' | 'lg';
+export interface DateRangePreset {
+    id: string;
+    label: ReactNode;
+    /** The preset's range for the given 'YYYY-MM-DD' today. Out-of-bounds results disable the preset. */
+    range: (today: string) => DateRangeValue;
+}
+export interface DateRangePickerSummaryDetails {
+    /** The range as Intl formats it, e.g. "Oct 3 – 9, 2026". */
+    range: string;
+    /** Inclusive day count, for plural selection. */
+    days: number;
+    /** `days` as Intl.NumberFormat formats it in the locale. */
+    formattedDays: string;
+}
+export interface DateRangePickerMessages {
+    apply: ReactNode;
+    cancel: ReactNode;
+    /** Summary while no range is drafted. */
+    empty: ReactNode;
+    /** Description of the range's first day. */
+    start: string;
+    /** Description of the range's last day. */
+    end: string;
+    /** Summary of the drafted (or previewed) range; select plurals from `days`. */
+    summary: (details: DateRangePickerSummaryDetails) => ReactNode;
+    /** Accessible name of the preset group. */
+    presets?: string;
+    /** Alert shown next to the trigger while the field is invalid. */
+    error?: ReactNode;
+    /** Joined to the trigger's name when `required` is set. */
+    required?: string;
+}
+export interface DateRangePickerProps {
+    value?: DateRangeValue | null;
+    defaultValue?: DateRangeValue | null;
+    /** Apply request; a structurally unchanged range is not requested. Controlled values may reject it. */
+    onValueChange?: (range: DateRangeValue | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Earliest selectable date, 'YYYY-MM-DD'. */
+    min?: string;
+    /** Latest selectable date, 'YYYY-MM-DD'. */
+    max?: string;
+    /** BCP 47 tag. Defaults to `navigator.language` (the Intl default on the server). */
+    locale?: string;
+    /** Defaults to the locale's week start. */
+    firstDayOfWeek?: CalendarWeekday;
+    /** 'YYYY-MM-DD' used for presets and the today marker. Defaults to the local civil date. */
+    today?: string;
+    /** `auto` shows two months when the boundary leaves at least 712px. */
+    months?: DateRangePickerMonths;
+    /** Collision boundary of the dialog. Defaults to the clipping ancestors and the viewport. */
+    boundary?: HTMLElement | null;
+    presets?: readonly DateRangePreset[];
+    /** Blocks the popup, even with controlled open=true, and omits the form fields. */
+    disabled?: boolean;
+    /** The dialog opens for inspection; days, presets and Apply change nothing. */
+    readOnly?: boolean;
+    required?: boolean;
+    /** Hidden form field carrying the start date ('' when empty). */
+    startName?: string;
+    /** Hidden form field carrying the end date ('' when empty). */
+    endName?: string;
+    messages: DateRangePickerMessages;
+    /** One Trigger and one Content. */
+    children?: ReactNode;
+}
+export interface DateRangePickerTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'value' | 'defaultValue' | 'children'>, SxProps {
+    size?: DateRangePickerSize;
+    /** Decorative icon before the range text. */
+    icon?: ReactNode;
+    /** Shown while no valid range is committed. */
+    placeholder?: ReactNode;
+}
+export interface DateRangePickerSlotProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface DateRangePickerContentProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    slotProps?: {
+        presets?: DateRangePickerSlotProps;
+        calendars?: DateRangePickerSlotProps;
+        summary?: DateRangePickerSlotProps;
+        actions?: DateRangePickerSlotProps;
+    };
+}
+declare function DateRangePickerRoot(props: DateRangePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DateRangePickerTrigger({ ref, id: idProp, form, size, icon, placeholder, className, sx, onKeyDown, onKeyUp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalidProp, ...rest }: DateRangePickerTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DateRangePickerContent(props: DateRangePickerContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const DateRangePicker: typeof DateRangePickerRoot & {
+    Trigger: typeof DateRangePickerTrigger;
+    Content: typeof DateRangePickerContent;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerContentProps, DateRangePickerMessages, DateRangePickerMonths, DateRangePickerProps, DateRangePickerSize, DateRangePickerSlotProps, DateRangePickerSummaryDetails, DateRangePickerTriggerProps, DateRangePreset, DateRangeValue, } from './date-range-picker';

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

@@ -0,0 +1,59 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+export type DrawerSide = 'inline-start' | 'inline-end' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg';
+export interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Viewport edge the panel attaches to. Inline sides follow the drawer's effective direction. */
+    side?: DrawerSide;
+    /** Inline size cap for inline sides. Top/bottom panels span the viewport and ignore it. */
+    size?: DrawerSize;
+    /** Lets the header drag the panel toward its edge to dismiss. Ignored under reduced motion. */
+    draggable?: boolean;
+    children?: ReactNode;
+}
+export interface DrawerTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+export interface DrawerContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'>, SxProps {
+    /** Set false to keep structured content out of the drawer's accessible description. */
+    withDescription?: boolean;
+}
+export interface DrawerPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface DrawerHeaderProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface DrawerBodyProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface DrawerFooterProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface DrawerTitleProps extends ComponentPropsWithRef<'h2'>, SxProps {
+}
+export interface DrawerDescriptionProps extends ComponentPropsWithRef<'p'>, SxProps {
+}
+/** Needs visible children or a localized `aria-label`; the library ships no default label. */
+export interface DrawerCloseProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+declare function DrawerRoot({ open: openProp, defaultOpen, onOpenChange, side, size, draggable, children, }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ref, onClick, className, sx, ...rest }: DrawerTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ ref, className, sx, ...props }: DrawerContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerPanel({ ref, className, sx, ...props }: DrawerPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ ref, className, sx, ...props }: DrawerHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerBody({ ref, className, sx, ...props }: DrawerBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ ref, className, sx, ...props }: DrawerFooterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ ref, className, sx, children, ...props }: DrawerTitleProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function DrawerDescription({ ref, className, sx, children, ...props }: DrawerDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function DrawerClose({ ref, onClick, className, sx, ...rest }: DrawerCloseProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Drawer: typeof DrawerRoot & {
+    Trigger: typeof DrawerTrigger;
+    Content: typeof DrawerContent;
+    Panel: typeof DrawerPanel;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    Close: typeof DrawerClose;
+};
+export {};

package/dist/types/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './drawer';
+export type { DrawerBodyProps, DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerPanelProps, DrawerProps, DrawerSide, DrawerSize, DrawerTitleProps, DrawerTriggerProps, } from './drawer';

package/dist/types/components/elastic-slider/elastic-slider.d.ts

@@ -0,0 +1,53 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type SliderMark, type SliderPart as Part } from '../slider/use-slider-interaction';
+export type ElasticSliderMark = SliderMark;
+export type ElasticSliderSize = 'sm' | 'md';
+export interface ElasticSliderSlotProps {
+    label?: Part<'span'>;
+    readout?: Part<'span'>;
+    description?: Part<'div'>;
+    error?: Part<'div'>;
+    control?: Part<'div'>;
+    rail?: Part<'div'>;
+    track?: Part<'div'>;
+    fill?: Part<'div'>;
+    thumb?: Part<'div'>;
+    bubble?: Part<'span'>;
+    tick?: Part<'span'> | ((index: number) => Part<'span'>);
+    mark?: Part<'button'> | ((index: number) => Part<'button'>);
+    start?: Part<'div'>;
+    end?: Part<'div'>;
+}
+export interface ElasticSliderProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    label: ReactNode;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    description?: ReactNode;
+    error?: ReactNode;
+    invalid?: boolean;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    /** Detents. Normalized to the step lattice; invalid or out-of-domain marks are ignored. */
+    marks?: readonly ElasticSliderMark[];
+    locale?: Intl.LocalesArgument;
+    formatOptions?: Intl.NumberFormatOptions;
+    formatValue?: (value: number, formatter: Intl.NumberFormat) => string;
+    showValue?: boolean;
+    start?: ReactNode;
+    end?: ReactNode;
+    /** Short vibration when a touch drag latches onto a detent, where supported. Off under reduced motion. */
+    haptics?: boolean;
+    name?: string;
+    size?: ElasticSliderSize;
+    slotProps?: ElasticSliderSlotProps;
+}
+export declare function ElasticSlider(props: ElasticSliderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ElasticSlider {
+    var displayName: string;
+}

package/dist/types/components/elastic-slider/index.d.ts

@@ -0,0 +1 @@
+export { ElasticSlider, type ElasticSliderProps, type ElasticSliderMark, type ElasticSliderSize, type ElasticSliderSlotProps, } from './elastic-slider';

package/dist/types/components/empty-state/empty-state.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import type { CardHeadingLevel } from '../card';
+export type EmptyStateVariant = 'centered' | 'inline';
+export interface EmptyStatePartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface EmptyStateSlotProps {
+    icon?: EmptyStatePartProps;
+    content?: EmptyStatePartProps;
+    title?: EmptyStatePartProps;
+    description?: EmptyStatePartProps;
+    action?: EmptyStatePartProps;
+}
+export interface EmptyStateProps extends Omit<ComponentPropsWithRef<'section'>, 'title' | 'children'>, SxProps {
+    /** Visible heading. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Decorative; hidden from assistive tech. Never put interactive content here. */
+    icon?: ReactNode;
+    /** Caller-owned controls (Button, link), rendered as given. */
+    action?: ReactNode;
+    headingLevel?: CardHeadingLevel;
+    variant?: EmptyStateVariant;
+    slotProps?: EmptyStateSlotProps;
+}
+/**
+ * Empty view with a literal next action. Use Skeleton while content is pending and Alert for an
+ * error next to existing content. The caller owns copy, translations and result announcements.
+ */
+export declare function EmptyState({ ref, title, description, icon, action, headingLevel, variant, slotProps, className, sx, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: EmptyStateProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace EmptyState {
+    var displayName: string;
+}

package/dist/types/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './empty-state';
+export type { EmptyStatePartProps, EmptyStateProps, EmptyStateSlotProps, EmptyStateVariant } from './empty-state';

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

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
+export interface ExpandableCardProps extends Omit<ComponentPropsWithRef<'article'>, 'defaultValue' | 'onChange'>, SxProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    collapsedInlineSize?: number;
+    expandedInlineSize?: number;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    headingLevel?: 2 | 3 | 4;
+}
+export type ExpandableCardTriggerProps = ComponentPropsWithRef<'button'> & SxProps;
+export type ExpandableCardTitleProps = ComponentPropsWithRef<'span'> & SxProps;
+export type ExpandableCardDescriptionProps = ComponentPropsWithRef<'span'> & SxProps;
+export type ExpandableCardContentProps = Omit<ComponentPropsWithRef<'div'>, 'hidden'> & SxProps;
+declare function ExpandableCardRoot({ ref, open: openProp, defaultOpen, onOpenChange, collapsedInlineSize, expandedInlineSize, size, disabled, headingLevel, className, sx, onKeyDown, children, ...rest }: ExpandableCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ExpandableCardTrigger({ ref, className, sx, onClick, disabled, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: ExpandableCardTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ExpandableCardTitle({ ref, className, sx, children, ...rest }: ExpandableCardTitleProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function ExpandableCardDescription({ ref, className, sx, children, ...rest }: ExpandableCardDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function ExpandableCardContent({ ref, className, sx, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: ExpandableCardContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ExpandableCard: typeof ExpandableCardRoot & {
+    Trigger: typeof ExpandableCardTrigger;
+    Title: typeof ExpandableCardTitle;
+    Description: typeof ExpandableCardDescription;
+    Content: typeof ExpandableCardContent;
+};
+export {};

package/dist/types/components/expandable-card/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableCard } from './expandable-card';
+export type { ExpandableCardProps, ExpandableCardTriggerProps, ExpandableCardTitleProps, ExpandableCardDescriptionProps, ExpandableCardContentProps, } from './expandable-card';

package/dist/types/components/expanding-search/expanding-search.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type CSSProperties, type Ref } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type SearchFieldProps, type SearchFieldSize } from '../search-field';
+export type ExpandingSearchInputProps = Omit<ComponentPropsWithRef<'input'>, 'ref' | 'type' | 'role' | 'size' | 'value' | 'defaultValue' | 'children' | 'disabled' | 'dir' | 'className'>;
+export interface ExpandingSearchProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange'>, SxProps, Pick<SearchFieldProps, 'value' | 'defaultValue' | 'onValueChange' | 'label' | 'description' | 'error' | 'clearable' | 'messages' | 'searchIcon' | 'clearIcon' | 'slotProps'> {
+    /** Accessible name of the collapsed button; also the input's fallback name. */
+    triggerLabel: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchor?: 'start' | 'end';
+    expandedWidth?: CSSProperties['inlineSize'];
+    size?: SearchFieldSize;
+    disabled?: boolean;
+    /** Native attributes and events of the search input. */
+    inputProps?: ExpandingSearchInputProps;
+    inputRef?: Ref<HTMLInputElement>;
+}
+export declare function ExpandingSearch({ ref, inputRef, triggerLabel, open: openProp, defaultOpen, onOpenChange, anchor, expandedWidth, size, disabled, value, defaultValue, onValueChange, label, description, error, clearable, messages, searchIcon, clearIcon, slotProps, inputProps, className, sx, dir, style, onKeyDown, onBlur, ...rootProps }: ExpandingSearchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ExpandingSearch {
+    var displayName: string;
+}

package/dist/types/components/expanding-search/index.d.ts

@@ -0,0 +1 @@
+export { ExpandingSearch, type ExpandingSearchInputProps, type ExpandingSearchProps } from './expanding-search';

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

@@ -29,17 +29,19 @@ export declare function useFieldAnatomy({ id: idProp, description, error, 'aria-
 interface FieldRootProps extends SxProps {
     'data-ui': string;
     className?: string;
+    dir?: string;
     part?: FieldPartProps;
     children: ReactNode;
 }
-export declare function FieldRoot({ 'data-ui': dataUi, className, sx, part, children }: FieldRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FieldRoot({ 'data-ui': dataUi, className, dir, sx, part, children }: FieldRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
 interface FieldLabelProps {
+    id?: string;
     htmlFor: string;
     required?: boolean;
     part?: FieldPartProps;
     children: ReactNode;
 }
-export declare function FieldLabel({ htmlFor, required, part, children }: FieldLabelProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function FieldLabel({ id, htmlFor, required, part, children }: FieldLabelProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 interface FieldMessageProps {
     id: string;
     part?: FieldPartProps;

package/dist/types/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,93 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type FileDropzoneSize = 'sm' | 'md' | 'lg';
+export type FileDropzoneUploadStatus = 'idle' | 'uploading' | 'uploaded' | 'failed';
+export interface FileDropzoneItem {
+    id: string;
+    name: string;
+    size: number;
+    file?: File;
+    preview?: string;
+    uploaded?: boolean;
+}
+export interface FileRejection {
+    file: File;
+    code: 'type' | 'size' | 'count' | 'custom';
+    message: string;
+}
+export type FileDropzoneUpload = (item: FileDropzoneItem, context: {
+    signal: AbortSignal;
+    onProgress: (percent: number) => void;
+}) => Promise<void>;
+export interface FileDropzoneMessages {
+    browse: string;
+    files: string;
+    remove: (name: string) => string;
+    retry: (name: string) => string;
+    rejection: (code: Exclude<FileRejection['code'], 'custom'>, file: File) => string;
+    status: (status: FileDropzoneUploadStatus, name: string) => string;
+    added: (count: number) => string;
+    removed: (name: string) => string;
+    count: (count: number) => string;
+    uploadError: string;
+}
+type Slot<E extends keyof React.JSX.IntrinsicElements> = Omit<ComponentPropsWithRef<E>, 'ref' | 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface FileDropzoneSlotProps {
+    root?: Slot<'div'>;
+    input?: Slot<'input'>;
+    target?: Slot<'div'>;
+    /** The native label: the clickable drop surface that names and opens the input. */
+    label?: Slot<'label'>;
+    browse?: Slot<'span'>;
+    description?: Slot<'div'>;
+    note?: Slot<'div'>;
+    list?: Slot<'ul'>;
+    item?: Slot<'li'>;
+    preview?: Slot<'img'>;
+    progress?: Slot<'div'>;
+    action?: Slot<'button'>;
+    error?: Slot<'div'>;
+    status?: Slot<'div'>;
+}
+export interface FileDropzoneProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    value?: FileDropzoneItem[];
+    defaultValue?: FileDropzoneItem[];
+    onValueChange?: (items: FileDropzoneItem[]) => void;
+    onReject?: (rejections: FileRejection[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    validate?: (file: File) => string | null;
+    onUpload?: FileDropzoneUpload;
+    listPlacement?: 'below' | 'inside';
+    compactAt?: number;
+    label?: ReactNode;
+    description?: ReactNode;
+    note?: ReactNode;
+    dropLabel?: ReactNode;
+    error?: ReactNode;
+    messages: FileDropzoneMessages;
+    locale?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: FileDropzoneSize;
+    paste?: boolean;
+    renderFileIcon?: (item: FileDropzoneItem) => ReactNode;
+    name?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    slotProps?: FileDropzoneSlotProps;
+}
+/** The visible surface is the native label of an operable file input; no custom dropzone role.
+ * Submit canonical value items, not input.files: drops and accumulated batches are not
+ * reflected in native FormData/required. Client validation is a convenience; validate uploads
+ * independently on the server. */
+export declare function FileDropzone({ ref, value, defaultValue, onValueChange, onReject, accept, multiple, maxFiles, maxSize, validate, onUpload, listPlacement, compactAt, label, description, note, dropLabel, error, messages, locale, disabled, readOnly, required, size, paste, renderFileIcon, name, inputRef, slotProps, className, sx, onDragEnter, onDragOver, onDragLeave, onDrop, onPaste, ...rest }: FileDropzoneProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace FileDropzone {
+    var displayName: string;
+}
+export {};

package/dist/types/components/file-dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export { FileDropzone } from './file-dropzone';
+export type { FileDropzoneProps, FileDropzoneItem, FileDropzoneUploadStatus, FileDropzoneUpload, FileRejection, FileDropzoneMessages, FileDropzoneSize, FileDropzoneSlotProps, } from './file-dropzone';