@jfrader/ui 0.4.0 → 0.5.1

package/dist/types/components/slider/use-slider-interaction.d.ts

@@ -0,0 +1,79 @@
+import { type ComponentPropsWithRef, type KeyboardEvent, type PointerEvent, type ReactNode, type RefCallback, type RefObject } from 'react';
+import type { Interpolation, Theme } from '../../styling/css';
+export type SliderValue = number | readonly [number, number];
+export type SliderMark = number | {
+    value: number;
+    label?: ReactNode;
+};
+export type SliderPart<E extends 'div' | 'span' | 'button'> = ComponentPropsWithRef<E> & {
+    css?: Interpolation<Theme>;
+};
+/** Pointer position for one gesture sample, in domain units plus the geometry to convert them. */
+export interface SliderPointerSample {
+    /** Unclamped domain value under the pointer (grab offset applied). */
+    raw: number;
+    /** Bounds the dragged thumb may take. */
+    low: number;
+    high: number;
+    /** CSS pixels per domain unit along the control. */
+    pxPerUnit: number;
+    rtl: boolean;
+    pointerType: string;
+}
+export declare function joinIds(...values: (string | false | undefined)[]): string | undefined;
+export declare function hasContent(node: ReactNode): boolean;
+export declare function indexedPart<E extends 'div' | 'span' | 'button'>(part: SliderPart<E> | ((index: number) => SliderPart<E>) | undefined, index: number): SliderPart<E> | undefined;
+export declare function useSliderFormat(locale: Intl.LocalesArgument, formatOptions: Intl.NumberFormatOptions | undefined, formatValue: ((value: number, formatter: Intl.NumberFormat) => string) | undefined): {
+    formatter: Intl.NumberFormat;
+    format: (n: number) => string;
+};
+export interface SliderInteractionOptions {
+    /** Public component name used in configuration errors. */
+    component: string;
+    range: boolean;
+    value: SliderValue | undefined;
+    defaultValue: SliderValue | undefined;
+    min: number;
+    max: number;
+    step: number;
+    largeStep: number | undefined;
+    minStepsBetweenThumbs: number;
+    disabled: boolean;
+    onValueChange: (next: SliderValue) => void;
+    onValueCommit: (next: SliderValue) => void;
+    /** Visual feedback hook: runs for every accepted pointer sample, before the value request. */
+    onPointerSample?: (sample: SliderPointerSample) => void;
+    /** Maps a pointer sample to the raw domain target (e.g. magnetic detents). Defaults to `raw`. */
+    resolvePointer?: (sample: SliderPointerSample) => number;
+    /** Runs once when a gesture ends: completed (pointerup) or cancelled (cancel, lost capture, disable, reset). */
+    onGestureEnd?: (completed: boolean) => void;
+}
+export interface SliderInteraction {
+    id: string;
+    controlRef: RefObject<HTMLDivElement | null>;
+    current: SliderValue;
+    values: number[] | readonly [number, number];
+    active: number | null;
+    bounds: (index: number) => number[];
+    percent: (n: number) => number;
+    normalizeMarks: (marks: readonly SliderMark[]) => {
+        value: number;
+        label?: ReactNode;
+    }[];
+    /** Handlers for the pointer-capture control; consumer slot handlers run first and may veto. */
+    controlHandlers: (part: SliderPart<'div'> | undefined) => {
+        ref: RefCallback<HTMLDivElement>;
+        onPointerDown: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerCancel: (e: PointerEvent<HTMLDivElement>) => void;
+        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => void;
+    };
+    /** Root `onKeyDown` tail: routes movement keys from a thumb inside this control. */
+    handleRootKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    /** Activation of a mark shortcut: one change + commit for a changed request, nothing otherwise. */
+    selectMark: (markValue: number) => void;
+    /** Remembers the last focused thumb for equidistant range presses. */
+    noteFocus: (index: number) => void;
+}
+export declare function useSliderInteraction(options: SliderInteractionOptions): SliderInteraction;

package/dist/types/components/sortable-data-table/index.d.ts

@@ -0,0 +1 @@
+export { SortableDataTable, type SortableDataTableProps, type DataColumn, type DataTableMessages, type DataTablePartProps, type DataTableSlotProps, type SortDirection, type SortState, } from './sortable-data-table';

package/dist/types/components/sortable-data-table/sortable-data-table.d.ts

@@ -0,0 +1,76 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode, type Ref } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type SortDirection = 'asc' | 'desc';
+export interface SortState {
+    columnId: string;
+    direction: SortDirection;
+}
+export interface DataColumn<T> {
+    id: string;
+    header: ReactNode;
+    accessor?: (row: T) => string | number | Date | null | undefined;
+    cell?: (row: T) => ReactNode;
+    sortable?: boolean;
+    sortLabel?: string;
+    compare?: (a: T, b: T) => number;
+    numeric?: boolean;
+    width?: CSSProperties['width'];
+}
+export interface DataTableMessages {
+    empty: string;
+    missing: string;
+    clear: string;
+    scrollLabel: string;
+    sortButton: (header: string, direction: SortDirection | null) => string;
+    sortStatus: (header: string, direction: SortDirection) => string;
+    selectRow: (rowLabel: string) => string;
+    selectAll: string;
+    selectionStatus: (visibleSelected: number, totalSelected: number, visibleRows: number, formatted: {
+        visibleSelected: string;
+        totalSelected: string;
+        visibleRows: string;
+    }) => string;
+}
+export interface DataTablePartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export type DataTableSlotProps = Partial<Record<'scroller' | 'table' | 'caption' | 'headerCell' | 'sortButton' | 'row' | 'cell' | 'footer' | 'status', DataTablePartProps>>;
+export type SortableDataTableProps<T> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange'> & SxProps & {
+    rows: readonly T[];
+    columns: readonly DataColumn<T>[];
+    getRowId: (row: T) => string;
+    caption: ReactNode;
+    captionHidden?: boolean;
+    defaultValue?: SortState | null;
+    onValueChange?: (sort: SortState | null) => void;
+    selectedKeys?: readonly string[];
+    defaultSelectedKeys?: readonly string[];
+    onSelectionChange?: (keys: readonly string[]) => void;
+    locale?: Intl.LocalesArgument;
+    dateFormatOptions?: Intl.DateTimeFormatOptions;
+    timeZone?: string;
+    messages?: Partial<DataTableMessages>;
+    empty?: ReactNode;
+    loading?: boolean;
+    size?: 'sm' | 'md';
+    tableRef?: Ref<HTMLTableElement>;
+    slotProps?: DataTableSlotProps;
+} & ({
+    sortMode: 'manual';
+    value: SortState | null;
+} | {
+    sortMode?: 'client';
+    value?: SortState | null;
+}) & ({
+    selectable: true;
+    getRowLabel: (row: T) => string;
+} | {
+    selectable?: false;
+    getRowLabel?: (row: T) => string;
+});
+export declare function SortableDataTable<T>({ ref, rows, columns, getRowId, caption, captionHidden, value, defaultValue, onValueChange, sortMode, selectable, getRowLabel, selectedKeys, defaultSelectedKeys, onSelectionChange, locale, dateFormatOptions, timeZone, messages: messageOverrides, empty, loading, size, tableRef, slotProps, className, sx, ...rest }: SortableDataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace SortableDataTable {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { SplitButton } from './split-button';
+export type { SplitButtonActionProps, SplitButtonContentProps, SplitButtonItemProps, SplitButtonItemTone, SplitButtonProps, SplitButtonSeparatorProps, SplitButtonTriggerProps, } from './split-button';

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

@@ -0,0 +1,55 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Placement } from '@floating-ui/react';
+import { type SxProps } from '../../styling/sx';
+import { type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant } from '../button';
+import { type MenuItemTone, type MenuContentProps, type MenuItemProps, type MenuSeparatorProps } from '../menu/menu';
+export type SplitButtonItemTone = MenuItemTone;
+export interface SplitButtonProps extends Omit<ComponentPropsWithRef<'div'>, 'role'>, SxProps {
+    /** Appearance of the Action; the Trigger uses the matching subdued fill. */
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    /** Disables Action, Trigger and items, and asks once for an open menu to close. */
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Menu placement relative to the Trigger; `start`/`end` follow the group's direction. */
+    placement?: Placement;
+    children?: ReactNode;
+}
+export interface SplitButtonActionProps extends Omit<ButtonProps, 'render'> {
+    /**
+     * Labels the Action may show. They share one grid cell so the Action keeps the width of the
+     * longest one while its label changes; a label swap fades in.
+     */
+    reserveLabels?: readonly string[];
+}
+type SplitButtonTriggerBaseProps = Omit<ButtonProps, 'render' | 'variant' | 'tone' | 'size' | 'loading' | 'startIcon' | 'endIcon' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls'>;
+/** The Trigger has no visible text: it needs a localized `aria-label` or `aria-labelledby`. */
+export type SplitButtonTriggerProps = SplitButtonTriggerBaseProps & ({
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+});
+export interface SplitButtonContentProps extends Omit<MenuContentProps, 'role'> {
+}
+export interface SplitButtonItemProps extends MenuItemProps {
+    tone?: SplitButtonItemTone;
+}
+export interface SplitButtonSeparatorProps extends MenuSeparatorProps {
+}
+declare function SplitButtonRoot({ ref, variant, tone, size, disabled, open: openProp, defaultOpen, onOpenChange, placement, className, sx, children, ...rest }: SplitButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SplitButtonAction({ ref, variant, tone, size, disabled, reserveLabels, children, className, sx, ...rest }: SplitButtonActionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SplitButtonTrigger({ ref, disabled, children, className, sx, ...rest }: SplitButtonTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SplitButtonContent({ dir, 'aria-labelledby': ariaLabelledBy, ...props }: SplitButtonContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SplitButtonItem({ tone, disabled, ...props }: SplitButtonItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SplitButtonSeparator(props: SplitButtonSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SplitButton: typeof SplitButtonRoot & {
+    Action: typeof SplitButtonAction;
+    Trigger: typeof SplitButtonTrigger;
+    Content: typeof SplitButtonContent;
+    Item: typeof SplitButtonItem;
+    Separator: typeof SplitButtonSeparator;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { Stepper } from './stepper';
+export type { StepperBaseProps, StepperDetails, StepperHeadSlotProps, StepperInteractiveProps, StepperOrientation, StepperPartProps, StepperProps, StepperSize, StepperSlotProps, StepperStaticProps, StepperStatus, StepperStep, } from './stepper';

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

@@ -0,0 +1,85 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperSize = 'sm' | 'md';
+export type StepperDetails = 'all' | 'current';
+export type StepperStatus = 'complete' | 'current' | 'upcoming' | 'error';
+export interface StepperStep {
+    /** Stable unique identity. */
+    id: string;
+    /** Visible label; the default accessible name starts with it. */
+    label: string;
+    /** Secondary text. `0` renders; `false`/`null`/`undefined` render nothing. */
+    description?: ReactNode;
+    /** Error text; when renderable the step's status is `error` and the text is always shown. */
+    error?: ReactNode;
+    /** A disabled completed step cannot be selected or focused. */
+    disabled?: boolean;
+    /** Decorative marker content replacing the numeral/check/error glyph. */
+    icon?: ReactNode;
+}
+export interface StepperPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+/**
+ * Native button props for interactive step heads; static heads only use `className`/`css`.
+ * Step names come from `getStepLabel`, so the slot takes no `aria-label`/`aria-labelledby`.
+ */
+export type StepperHeadSlotProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'ref' | 'type' | 'disabled' | 'tabIndex' | 'aria-current' | 'aria-disabled' | 'aria-label' | 'aria-labelledby'> & StepperPartProps;
+export interface StepperSlotProps {
+    root?: StepperPartProps;
+    list?: StepperPartProps;
+    item?: StepperPartProps;
+    head?: StepperHeadSlotProps;
+    marker?: StepperPartProps;
+    label?: StepperPartProps;
+    description?: StepperPartProps;
+    connector?: StepperPartProps;
+    caption?: StepperPartProps;
+}
+export interface StepperBaseProps extends SxProps {
+    steps: readonly StepperStep[];
+    /** Controlled current index, `0..steps.length` (`steps.length` = all complete). */
+    value?: number;
+    /** Uncontrolled initial current index. */
+    defaultValue?: number;
+    /** Requested index after a completed step is activated (interactive mode). */
+    onValueChange?: (index: number) => void;
+    orientation?: StepperOrientation;
+    /** Which descriptions show; errors always show. */
+    details?: StepperDetails;
+    /** Markers only, with the current step in a caption. Error steps keep their label and text. */
+    compact?: boolean;
+    /** Horizontal steppers fold to compact below a 30rem container width. */
+    responsive?: boolean;
+    /** Marker and text scale; interactive targets stay at least 32px. */
+    size?: StepperSize;
+    /** Accessible name of the group/navigation when no `aria-label`/`aria-labelledby` is given. */
+    label?: string;
+    /** Caption shown once every step is complete. */
+    completeLabel?: ReactNode;
+    /** Locale for the default numerals and counts. */
+    locale?: Intl.LocalesArgument;
+    /** Full accessible name of a step; translate the wording here. */
+    getStepLabel?: (step: StepperStep, index: number, count: number, status: StepperStatus) => string;
+    /** Live summary of an accepted change; `step` is null when every step is complete. */
+    getChangeLabel?: (step: StepperStep | null, index: number, count: number) => string;
+    /** Announces accepted value changes in a polite live region. */
+    announceChanges?: boolean;
+    slotProps?: StepperSlotProps;
+}
+export type StepperStaticProps = StepperBaseProps & {
+    /** Static indicator: a labelled group without controls. */
+    interactive?: false;
+} & Omit<ComponentPropsWithRef<'div'>, keyof StepperBaseProps | 'children'>;
+export type StepperInteractiveProps = StepperBaseProps & {
+    /** Navigation: completed steps are buttons that request `onValueChange`. */
+    interactive: true;
+} & Omit<ComponentPropsWithRef<'nav'>, keyof StepperBaseProps | 'children'>;
+export type StepperProps = StepperStaticProps | StepperInteractiveProps;
+export declare function Stepper(props: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Stepper {
+    var displayName: string;
+}

package/dist/types/components/swipe-actions/index.d.ts

@@ -0,0 +1,2 @@
+export { SwipeActions } from './swipe-actions';
+export type { SwipeAction, SwipeActionsProps, SwipeActionsRowProps, SwipeActionsSide, SwipeActionsValue, } from './swipe-actions';

package/dist/types/components/swipe-actions/swipe-actions.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type SwipeActionsSide = 'leading' | 'trailing';
+export type SwipeActionsValue = {
+    id: string;
+    side: SwipeActionsSide;
+} | null;
+export interface SwipeAction {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    tone?: 'neutral' | 'accent' | 'danger';
+    disabled?: boolean;
+    onSelect: () => void;
+    /** Caller intent that this command keeps its row. Every command closes the rail and the row
+     * never deletes data itself, so this is metadata for the caller's `onSelect`. */
+    keepRow?: boolean;
+}
+type Slot = {
+    className?: string;
+    css?: Interpolation<Theme>;
+};
+export interface SwipeActionsProps extends Omit<ComponentPropsWithRef<'ul'>, 'value' | 'defaultValue'>, SxProps {
+    value?: SwipeActionsValue;
+    defaultValue?: SwipeActionsValue;
+    onValueChange?: (value: SwipeActionsValue) => void;
+}
+export interface SwipeActionsRowProps extends ComponentPropsWithRef<'li'>, SxProps {
+    id: string;
+    label: string;
+    actionsLabel: string;
+    leading?: readonly SwipeAction[];
+    trailing?: readonly SwipeAction[];
+    fullSwipe?: boolean;
+    disabled?: boolean;
+    slotProps?: Partial<Record<'content' | 'body' | 'action' | 'actionIcon' | 'actionLabel' | 'trigger' | 'menu' | 'menuItem', Slot>>;
+}
+declare function SwipeActionsRoot({ ref, className, sx, value: valueProp, defaultValue, onValueChange, children, onKeyDown, ...props }: SwipeActionsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SwipeActionsRow({ id, label, actionsLabel, leading, trailing, fullSwipe, disabled, ref, className, sx, children, slotProps, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onClickCapture, ...props }: SwipeActionsRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SwipeActions: typeof SwipeActionsRoot & {
+    Row: typeof SwipeActionsRow;
+};
+export {};

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

@@ -18,7 +18,7 @@ export interface TabsPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 declare function TabsRoot({ ref, value: valueProp, defaultValue, onValueChange, orientation, activation, className, sx, ...rest }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function TabsList({ ref, onKeyDown, className, sx, ...rest }: TabsListProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TabsTab({ ref, value, disabled, onClick, onFocus, className, sx, ...rest }: TabsTabProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsTab({ ref, value, disabled, onClick, onFocus, onPointerDown, className, sx, ...rest }: TabsTabProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function TabsPanel({ ref, value, tabIndex, 'aria-labelledby': ariaLabelledByProp, className, sx, ...rest }: TabsPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Tabs: typeof TabsRoot & {
     List: typeof TabsList;

package/dist/types/components/tag-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TagInput } from './tag-input';
+export type { TagInputMessages, TagInputPartProps, TagInputProps, TagInputSeparator, TagInputSize, TagInputSlotProps, } from './tag-input';

package/dist/types/components/tag-input/tag-input.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { SxProps } from '../../styling/sx';
+import { type FieldPartProps, type FieldSlotProps } from '../field/field-anatomy';
+export type TagInputSize = 'sm' | 'md' | 'lg';
+export type TagInputSeparator = 'Enter' | ',';
+export interface TagInputMessages {
+    /** Accessible name of the token list. */
+    listLabel: string;
+    /** Accessible name of a token's remove button. */
+    remove: (token: string) => string;
+    added: (token: string) => string;
+    removed: (token: string) => string;
+    picked: (token: string) => string;
+    /** Receives the committed token the draft matched. */
+    duplicate: (token: string) => string;
+    /** Receives `maxTokens`. */
+    limit: (count: number) => string;
+    /** Validation message while `required` and no token is committed. */
+    required: string;
+}
+export interface TagInputPartProps extends FieldPartProps {
+}
+export interface TagInputSlotProps extends FieldSlotProps<TagInputPartProps> {
+    list?: TagInputPartProps;
+    token?: TagInputPartProps;
+    remove?: TagInputPartProps;
+    input?: TagInputPartProps;
+    status?: TagInputPartProps;
+}
+export interface TagInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'value' | 'defaultValue' | 'type' | 'children'>, SxProps {
+    /**
+     * Committed tokens in order. Entries must be unique, nonempty and already normalized; the
+     * component renders them as given and never rewrites a provided list.
+     */
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Draft text in the input, independent from the committed tokens. */
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    size?: TagInputSize;
+    /** Keys that commit the draft. Without `','`, commas are ordinary token text. */
+    separators?: readonly TagInputSeparator[];
+    /** Commit the draft when focus leaves the whole field. */
+    commitOnBlur?: boolean;
+    /** Turns the draft into a token before comparison. Defaults to trimming whitespace. */
+    normalize?: (draft: string) => string;
+    /** Returns a rejection message, or `null` to accept the token. */
+    validateToken?: (token: string) => string | null;
+    /** Additions stop at this count; an initial or controlled list longer than it is kept. */
+    maxTokens?: number;
+    /** Locale for duplicate comparison and default number formatting. */
+    locale?: Intl.LocalesArgument;
+    messages?: Partial<TagInputMessages>;
+    /** Replaces the remove glyph; rendered decoratively inside each remove button. */
+    removeIcon?: ReactNode;
+    slotProps?: TagInputSlotProps;
+}
+export declare function TagInput({ ref, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputChange, label, description, error, size, separators, commitOnBlur, normalize, validateToken, maxTokens, locale, messages: messagesProp, removeIcon, slotProps, className, sx, dir, name, form, disabled, readOnly, required, onChange, onKeyDown, onBlur, onCompositionStart, onCompositionEnd, id: idProp, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TagInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace TagInput {
+    var displayName: string;
+}

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

@@ -12,7 +12,7 @@ export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'si
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextFieldPartProps>;
 }
-export declare function TextField({ ref, label, description, error, size, onChange, onValueChange, slotProps, className, sx, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TextField({ ref, label, description, error, size, onChange, onValueChange, slotProps, className, sx, required, id: idProp, dir, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace TextField {
     var displayName: string;
 }

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

@@ -15,7 +15,7 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'>, SxProp
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextareaPartProps>;
 }
-export declare function Textarea({ ref, label, description, error, size, resize, autoResize, rows, onChange, onValueChange, slotProps, className, sx, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Textarea({ ref, label, description, error, size, resize, autoResize, rows, onChange, onValueChange, slotProps, className, sx, dir, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Textarea {
     var displayName: string;
 }

package/dist/types/components/theme-switch/index.d.ts

@@ -0,0 +1 @@
+export { ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchValue, type ThemeSwitchTransition, type ThemeSwitchChangeDetails, } from './theme-switch';

package/dist/types/components/theme-switch/theme-switch.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type SwitchPartProps, type SwitchProps } from '../switch';
+export type ThemeSwitchValue = 'light' | 'dark';
+export type ThemeSwitchTransition = 'reveal' | 'eclipse' | 'split' | 'rise';
+export interface ThemeSwitchChangeDetails {
+    transition: ThemeSwitchTransition;
+    trigger: HTMLInputElement;
+    reducedMotion: boolean;
+}
+export interface ThemeSwitchProps extends Omit<SwitchProps, 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'onCheckedChange' | 'children' | 'slotProps'> {
+    value?: ThemeSwitchValue;
+    defaultValue?: ThemeSwitchValue;
+    onValueChange?: (next: ThemeSwitchValue, details: ThemeSwitchChangeDetails) => void;
+    label: ReactNode;
+    iconOnly?: boolean;
+    lightIcon?: ReactNode;
+    darkIcon?: ReactNode;
+    transition?: ThemeSwitchTransition;
+    loading?: boolean;
+    slotProps?: SwitchProps['slotProps'] & {
+        iconFrame?: SwitchPartProps;
+        lightIcon?: SwitchPartProps;
+        darkIcon?: SwitchPartProps;
+    };
+}
+/** Composes Switch: Space toggles dark appearance; the accessible name stays stable.
+ * The consumer applies the requested theme. The ref reaches Switch's native input.
+ * The decorative icon frame is a hidden label for the input, so clicking the glyph toggles too.
+ */
+export declare function ThemeSwitch({ value: valueProp, defaultValue, onValueChange, label, iconOnly, lightIcon, darkIcon, transition, loading, className, sx, slotProps, onChange, onClick, dir, id: idProp, ...rest }: ThemeSwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ThemeSwitch {
+    var displayName: string;
+}

package/dist/types/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './time-picker';
+export type { TimePickerProps, TimePickerSize, TimePickerSlotProps, TimePickerMinuteStep, TimePickerHourCycle, } from './time-picker';

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

@@ -0,0 +1,48 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type TimePickerSize = 'sm' | 'md' | 'lg';
+export type TimePickerMinuteStep = 1 | 5 | 10 | 15 | 30;
+export type TimePickerHourCycle = 'h12' | 'h23';
+type Slot<Tag extends 'div' | 'span' | 'label' | 'button'> = Omit<ComponentPropsWithRef<Tag>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface TimePickerSlotProps {
+    root?: Slot<'div'>;
+    label?: Slot<'label'>;
+    control?: Slot<'button'>;
+    content?: Slot<'div'>;
+    option?: Slot<'div'>;
+    description?: Slot<'span'>;
+    error?: Slot<'span'>;
+    icon?: Slot<'span'>;
+}
+export interface TimePickerProps extends Omit<ComponentPropsWithRef<'button'>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'children'>, SxProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (time: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    minuteStep?: TimePickerMinuteStep;
+    min?: string;
+    max?: string;
+    /** Supply a locale for deterministic server rendering. */
+    locale?: string;
+    hourCycle?: TimePickerHourCycle;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    placeholder?: ReactNode;
+    size?: TimePickerSize;
+    readOnly?: boolean;
+    /** Semantic only: the hidden form field does not enforce native required validation. */
+    required?: boolean;
+    icon?: ReactNode;
+    slotProps?: TimePickerSlotProps;
+}
+export declare function TimePicker({ ref, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, minuteStep, min, max, locale, hourCycle, label, description, error, placeholder, size, disabled, readOnly, required, name, icon, slotProps, className, sx, dir, id: idProp, onClick, onKeyDown, onBlur, ...rest }: TimePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace TimePicker {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { Timeline } from './timeline';
+export type { TimelineEvent, TimelineHeadingLevel, TimelineLabels, TimelinePartProps, TimelineProps, TimelineSize, TimelineSlotProps, TimelineTone, } from './timeline';

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

@@ -0,0 +1,66 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type TimelineTone = 'neutral' | 'success' | 'danger';
+export type TimelineSize = 'sm' | 'md';
+export type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface TimelineEvent {
+    /** Unique, stable identity across updates. */
+    id: string;
+    /** Epoch ms, a Date, or an ISO date-time with `Z` or an explicit offset. */
+    at: string | number | Date;
+    /** Who acted; shown as text next to the title. */
+    actor?: string;
+    /** Literal outcome ("Deploy failed"), so tone is never the only cue. */
+    title: ReactNode;
+    meta?: ReactNode;
+    /** Content (including 0; not false, null or '') makes the title a disclosure button for this panel. */
+    detail?: ReactNode;
+    /** Actor portrait URL; takes precedence over `icon`. */
+    avatar?: string;
+    icon?: ReactNode;
+    tone?: TimelineTone;
+}
+export interface TimelineLabels {
+    /** Region name when neither `aria-label` nor `aria-labelledby` is given. */
+    region: string;
+    empty: string;
+    /** Heading of the trailing group for events whose date cannot be read. */
+    invalidTime: string;
+    /** Announced when events with new ids arrive. */
+    newEvents: (count: number) => string;
+    /** Event count shown beside each day heading. */
+    dayCount: (count: number) => string;
+}
+export interface TimelinePartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export type TimelineSlotProps = Partial<Record<'scroller' | 'group' | 'heading' | 'list' | 'item' | 'marker' | 'trigger' | 'time' | 'detail' | 'status', TimelinePartProps>>;
+export interface TimelineProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    /** Caller-owned events in any order; the component sorts a copy. */
+    events: readonly TimelineEvent[];
+    /** Reference instant in epoch ms. Pass the same value on server and client. */
+    now: number;
+    /** Ids of events whose detail is open (controlled). */
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    /** Requested open ids after a disclosure interaction. */
+    onValueChange?: (ids: string[]) => void;
+    /** Formatting locale; pass one explicitly for matching server and client output. */
+    locale?: Intl.LocalesArgument;
+    /** IANA zone used for day grouping and every displayed date. */
+    timeZone?: string;
+    headingLevel?: TimelineHeadingLevel;
+    /** Bounds the timeline in its own scroller; without it the timeline grows in page flow. */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Scroll to an event newer than any shown before. Never moves focus. */
+    scrollToNew?: boolean;
+    size?: TimelineSize;
+    labels?: Partial<TimelineLabels>;
+    slotProps?: TimelineSlotProps;
+}
+export declare function Timeline({ ref, events, now, value, defaultValue, onValueChange, locale, timeZone, headingLevel, maxHeight, scrollToNew, size, labels: labelProps, slotProps, className, sx, onKeyDown, onFocus, onBlur, 'aria-label': ariaLabelProp, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest }: TimelineProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Timeline {
+    var displayName: string;
+}