@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, CSSProperties, ButtonHTMLAttributes, InputHTMLAttributes, ElementType, HTMLAttributes, RefObject, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ReactElement, CSSProperties, ButtonHTMLAttributes, InputHTMLAttributes, ElementType, HTMLAttributes, RefObject, TextareaHTMLAttributes, ComponentType } from 'react';
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type Variant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning';
 export type AlertType = 'success' | 'error' | 'warning' | 'info';
@@ -45,8 +45,10 @@ export interface InputProps extends BaseComponentProps, Omit<InputHTMLAttributes
     disabled?: boolean;
     required?: boolean;
     clearable?: boolean;
-    icon?: ReactNode;
-    iconPosition?: 'left' | 'right';
+    /** Decorative icon before the value (`type="search"` shows its own search icon instead). Renamed from `icon` in 2.0.0. */
+    leftIcon?: ReactNode;
+    /** Decorative icon after the value; hidden while the password toggle or clear button shows. Replaces `iconPosition="right"` in 2.0.0. */
+    rightIcon?: ReactNode;
     showCount?: boolean;
     maxLength?: number;
     readOnly?: boolean;
@@ -101,7 +103,19 @@ export interface SelectProps extends BaseComponentProps {
     renderGroupLabel?: (label: string) => ReactNode;
     /** Trigger size. `md` grows to the 44px touch target on coarse pointers; `lg` is 44px everywhere. */
     size?: 'sm' | 'md' | 'lg';
-}
+    /**
+     * How the open menu presents. `auto` (default) is a bottom sheet on small
+     * touch screens (`(pointer: coarse) and (max-width: 639px)`) and an anchored
+     * popover elsewhere (always a popover on the server).
+     */
+    presentation?: 'auto' | 'popover' | 'sheet';
+}
+/**
+ * Checkbox / Switch `color`: a token preset (`green` = success, `danger` / `red`
+ * = error) or a custom CSS colour string. The raw-palette presets `blue`,
+ * `indigo` and `purple` were removed in 2.0.0.
+ */
+export type ToggleColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'green' | 'danger' | 'red' | (string & {});
 export interface CheckboxProps extends BaseComponentProps {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -115,9 +129,12 @@ export interface CheckboxProps extends BaseComponentProps {
     value?: string | number;
     ariaLabel?: string;
     labelPosition?: 'left' | 'right';
-    borderColor?: string;
+    /** Token preset (aliases `green` / `danger` / `red`), or a custom CSS colour string. */
+    color?: ToggleColor;
     iconClass?: string;
     checkedClass?: string;
+    /** Opt-in `selection` vibration on change (no-op without the Vibration API or under reduced motion). */
+    haptics?: boolean;
 }
 export interface RadioOption {
     value: string | number;
@@ -138,6 +155,29 @@ export interface RadioProps extends BaseComponentProps {
     radioColor?: string;
     ariaLabel?: string;
 }
+export type SegmentedControlValue = string | number;
+export interface SegmentedControlOption {
+    value: SegmentedControlValue;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+/** Radiogroup view toggle. Use `Tabs variant="segmented"` when the choice switches panels. */
+export interface SegmentedControlProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'id' | 'onChange' | 'defaultValue' | 'children'> {
+    options: SegmentedControlOption[];
+    value?: SegmentedControlValue;
+    defaultValue?: SegmentedControlValue;
+    /** Receives the newly selected option's `value` (not a DOM event). */
+    onChange?: (value: SegmentedControlValue) => void;
+    /** `md` (default). Every size grows to 44px tall on coarse pointers. */
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    /** Submits the selected value through a hidden input. */
+    name?: string;
+    disabled?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
 export interface SwitchProps extends BaseComponentProps {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -145,6 +185,8 @@ export interface SwitchProps extends BaseComponentProps {
     disabled?: boolean;
     size?: Size;
     name?: string;
+    /** Token preset or a custom CSS colour string (raw-palette presets removed in 2.0.0). */
+    color?: ToggleColor;
     trackClass?: string;
     thumbClass?: string;
     topLabel?: ReactNode;
@@ -152,6 +194,8 @@ export interface SwitchProps extends BaseComponentProps {
     leftLabel?: ReactNode;
     rightLabel?: ReactNode;
     ariaLabel?: string;
+    /** Opt-in `selection` vibration on toggle (no-op without the Vibration API or under reduced motion). */
+    haptics?: boolean;
 }
 export interface DatePickerProps extends BaseComponentProps {
     value?: Date | string | null;
@@ -170,6 +214,7 @@ export interface DatePickerProps extends BaseComponentProps {
     locale?: any;
     showClear?: boolean;
     closeOnSelect?: boolean;
+    presentation?: 'auto' | 'popover' | 'sheet';
 }
 export interface DateRange {
     start: Date | null;
@@ -192,6 +237,12 @@ export interface DateRangePickerProps extends BaseComponentProps {
     locale?: any;
     showClear?: boolean;
     closeOnSelect?: boolean;
+    presentation?: 'auto' | 'popover' | 'sheet';
+    presets?: DateRangePreset[];
+}
+export interface DateRangePreset {
+    label: string;
+    range: [Date | string, Date | string];
 }
 export interface ColorPickerProps extends BaseComponentProps {
     value?: string;
@@ -292,7 +343,10 @@ export interface TableAction<T = any> {
     hidden?: TableValueOrFn<boolean, T>;
     disabled?: TableValueOrFn<boolean, T>;
     inline?: boolean;
+    tone?: 'default' | 'destructive';
+    destructive?: boolean;
 }
+export type OverlayPresentation = 'auto' | 'popover' | 'sheet';
 export interface TableSortConfig {
     key: string | null;
     direction: 'asc' | 'desc';
@@ -359,6 +413,7 @@ export interface TableProps<T = any> extends BaseComponentProps {
     stripedRows?: boolean;
     theme?: TableTheme;
     responsiveBreakpoint?: number;
+    actionMenuPresentation?: OverlayPresentation;
     showToolbar?: boolean;
     showColumnPicker?: boolean;
     wrapCells?: boolean;
@@ -395,6 +450,85 @@ export interface TableProps<T = any> extends BaseComponentProps {
     }) => void;
     onRowAdd?: (row: Partial<T>) => void;
     onRowDelete?: (rowKey: string) => void;
+    /**
+     * Layout on the server and while hydrating, before the breakpoint media
+     * query can be read. `true` renders cards first (phone-first pages).
+     * Default `false`.
+     */
+    defaultMobileView?: boolean;
+    /**
+     * Card-mode filters (`filterable`): `sheet` is a Filters button opening a
+     * bottom Sheet with Apply / Clear; `inline` is the collapsible panel; `auto`
+     * (default) uses the sheet on small touch screens.
+     */
+    mobileFiltersPresentation?: 'auto' | 'sheet' | 'inline';
+    /**
+     * Swipe actions for the mobile cards (built on SwipeableListItem). Return
+     * `null` (or empty arrays) for rows without any.
+     */
+    swipeActions?: (row: T, index: number) => TableSwipeActions | null | undefined;
+    /**
+     * Sticky desktop header. `true` sticks within the table's scroll container;
+     * a CSS length (`"24rem"`) or a number (px) also caps the container height
+     * so the body scrolls under the header.
+     */
+    stickyHeader?: boolean | string | number;
+}
+export interface TableSwipeActions {
+    leading?: SwipeAction[];
+    trailing?: SwipeAction[];
+}
+export type SwipeActionTone = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error' | 'destructive';
+export type SwipeSide = 'leading' | 'trailing';
+export interface SwipeAction {
+    key: string;
+    label: ReactNode;
+    /** A node (`<Trash2 />`) or a component (`Trash2`). */
+    icon?: ReactNode | React.ComponentType<{
+        className?: string;
+    }>;
+    tone?: SwipeActionTone;
+    disabled?: boolean;
+    /** `source` is how it was triggered: a revealed button, a full swipe, or the menu. */
+    onSelect?: (event: {
+        action: SwipeAction;
+        source: 'button' | 'full-swipe' | 'menu';
+    }) => void;
+}
+export interface SwipeableListItemProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> {
+    /** Root element, e.g. `"li"`. Default `"div"`. */
+    as?: React.ElementType;
+    children?: ReactNode;
+    /** Revealed by swiping right; the first one sits at the left edge. */
+    leadingActions?: SwipeAction[];
+    /** Revealed by swiping left; the first one sits at the right edge. */
+    trailingActions?: SwipeAction[];
+    /** A swipe past `fullSwipeThreshold` commits the first action of that side. Default `true`. */
+    fullSwipe?: boolean | {
+        leading?: boolean;
+        trailing?: boolean;
+    };
+    /** Fraction of the row width a full swipe must travel. Default `0.6`. */
+    fullSwipeThreshold?: number;
+    /** Width (px) of each revealed action. Default `80`. */
+    actionWidth?: number;
+    /** Controlled open side (`null` = closed). */
+    open?: SwipeSide | null;
+    defaultOpen?: SwipeSide | null;
+    onOpenChange?: (side: SwipeSide | null) => void;
+    /** Turns the gesture and the More actions button off. */
+    disabled?: boolean;
+    /**
+     * The gesture-free "More actions" button: `focus` (default) shows it on
+     * keyboard focus and mouse hover, `always` keeps it visible, `false` removes it.
+     */
+    moreActions?: 'focus' | 'always' | false;
+    /** Accessible name of the More actions button and its menu. Default `"More actions"`. */
+    moreActionsLabel?: string;
+    /** How the More actions menu opens. Default `'auto'` (action sheet on phones). */
+    menuPresentation?: OverlayPresentation;
+    /** Classes for the sliding content layer (default `bg-surface`). */
+    contentClassName?: string;
 }
 export interface NavItem {
     id: string;
@@ -463,6 +597,10 @@ export interface NavbarProps extends BaseComponentProps {
     rightMenuContent?: ReactNode | ((props: {
         notifications?: Notification[];
     }) => ReactNode);
+    /** Sticky top bar: `sticky top-0 z-sticky pt-safe`, translucent `bg-surface/80 backdrop-blur`. Default `false`. */
+    sticky?: boolean;
+    /** iOS large title (an `<h1>` under the bar) that collapses into the bar on window scroll. */
+    largeTitle?: ReactNode;
 }
 export interface SidebarProps extends BaseComponentProps {
     items: SidebarItem[];
@@ -483,6 +621,8 @@ export interface SidebarProps extends BaseComponentProps {
     footer?: ReactNode | ((ctx: SidebarFooterContext) => ReactNode);
     stickyOffset?: number | string;
     containerClassName?: string;
+    /** Phones: edge swipe opens the drawer, swiping it toward its edge closes it. Default `true`. */
+    swipeable?: boolean;
 }
 export interface SidebarFooterContext {
     collapsed: boolean;
@@ -517,12 +657,17 @@ export interface BreadcrumbsProps extends BaseComponentProps {
     onHomeClick?: (item: BreadcrumbItem) => void;
     maxItems?: number;
 }
+export type AlertVariant = AlertType | 'neutral';
 export interface AlertProps extends BaseComponentProps {
-    variant?: AlertType;
+    variant?: AlertVariant;
     title?: string;
     children?: ReactNode;
+    /** Rendered after the description (buttons, links). */
+    actions?: ReactNode;
     dismissible?: boolean;
     onDismiss?: () => void;
+    /** Accessible name of the dismiss button. Default `'Dismiss'`. */
+    dismissLabel?: string;
 }
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface DialogProps extends BaseComponentProps {
@@ -537,6 +682,11 @@ export interface DialogProps extends BaseComponentProps {
     onOpen?: (context: {
         dialogRef: HTMLDivElement | null;
     }) => void;
+    /**
+     * `'popover'` is the centred modal, `'sheet'` a bottom Sheet with stacked
+     * full-width footer actions, `'auto'` (default) picks per device.
+     */
+    presentation?: OverlayPresentation;
 }
 export interface ToastProps extends BaseComponentProps {
     id: string;
@@ -546,14 +696,42 @@ export interface ToastProps extends BaseComponentProps {
     duration?: number;
     onClose?: (id: string) => void;
     position?: Position;
-}
-export interface ToastContainerProps {
+    /** Pause the auto-dismiss timer from outside (the stack does this while expanded). */
+    paused?: boolean;
+    /** Horizontal swipe (pointer drag past 64px, or a flick) dismisses. Default `true`. */
+    swipeToDismiss?: boolean;
+    /**
+     * Placement on phones (coarse pointer, < 640px): full width inside a 1rem
+     * gutter. `false` keeps `position`. Default `'bottom-center'`.
+     */
+    mobilePosition?: ToastMobilePosition | false;
+    /** Gap above the bottom edge on phones (px or CSS length); sets `--dt-toast-mobile-offset`. Default `5rem` (clears FootNav). */
+    mobileOffset?: number | string;
+    /** Accessible name of the close button. Default `'Close notification'`. */
+    closeLabel?: string;
+}
+export type ToastMobilePosition = 'bottom-center' | 'top-center';
+export interface ToastStackOptions {
+    /**
+     * `undefined` (default): collapse into a peek stack past `visibleToasts`,
+     * expanding on hover / focus / tap. `true`: always list every toast.
+     * `false`: collapse whenever there is more than one toast.
+     */
+    expand?: boolean;
+    /** Toasts shown before the stack collapses (and peeking while collapsed). Default `3`. */
+    visibleToasts?: number;
+    /** Phone placement; `false` keeps `position`. Default `'bottom-center'`. */
+    mobilePosition?: ToastMobilePosition | false;
+    /** Gap above the bottom edge on phones (px or CSS length). Default `5rem` (clears FootNav). */
+    mobileOffset?: number | string;
+}
+export interface ToastContainerProps extends ToastStackOptions {
     toasts?: ToastProps[];
     position?: Position;
     onRemove?: (id: string) => void;
     className?: string;
 }
-export interface ToastProviderProps {
+export interface ToastProviderProps extends ToastStackOptions {
     children?: ReactNode;
     position?: Position;
     className?: string;
@@ -623,8 +801,10 @@ export interface TabListProps extends BaseComponentProps {
 export interface TabProps extends BaseComponentProps {
     children?: ReactNode;
     index?: number;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
+    /** Renamed from `iconLeft` in 2.0.0. */
+    leftIcon?: ReactNode;
+    /** Renamed from `iconRight` in 2.0.0. */
+    rightIcon?: ReactNode;
     disabled?: boolean;
     tabClassName?: string;
 }
@@ -711,15 +891,15 @@ export interface SkeletonProps extends BaseComponentProps {
     inline?: boolean;
     children?: ReactNode;
 }
+export type ProgressBarVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive';
 export interface ProgressBarProps extends BaseComponentProps {
     value?: number;
     max?: number;
     size?: Size | number;
     showValue?: boolean;
     rounded?: boolean;
-    color?: string;
-    bgColor?: string;
-    valueColor?: string;
+    /** Token tone for the fill and track. The HEX props `color` / `bgColor` / `valueColor` were removed in 2.0.0. */
+    variant?: ProgressBarVariant;
     striped?: boolean;
     animated?: boolean;
     label?: ReactNode;
@@ -740,7 +920,7 @@ export interface RoundedTagProps extends BaseComponentProps {
     initialClassname?: string;
 }
 export type TooltipTrigger = 'hover' | 'click' | 'focus';
-export interface TooltipProps extends BaseComponentProps {
+export interface TooltipProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'id' | 'content' | 'children' | 'onChange'> {
     position?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
     trigger?: TooltipTrigger | TooltipTrigger[];
     content?: ReactNode | ((args: {
@@ -786,8 +966,6 @@ export interface RateProps extends BaseComponentProps {
     readOnly?: boolean;
     icon?: ReactNode;
     toggledIcon?: ReactNode;
-    activeColor?: string;
-    inactiveColor?: string;
     size?: number;
     onChange?: (value: number) => void;
     onClick?: (value: number) => void;
@@ -801,14 +979,18 @@ export interface ThreeDotPopoverItem {
     onClick?: (item: ThreeDotPopoverItem) => void;
     disabled?: boolean;
     destructive?: boolean;
+    tone?: 'default' | 'destructive';
 }
 export interface ThreeDotPopoverProps extends BaseComponentProps {
     items?: ThreeDotPopoverItem[];
     trigger?: ReactElement;
+    wrapperClassName?: string;
     menuClass?: string;
     menuItemClass?: string;
     closeOnSelect?: boolean;
     ariaLabel?: string;
+    presentation?: OverlayPresentation;
+    cancelLabel?: ReactNode;
 }
 export interface LatLng {
     lat: number;
@@ -888,6 +1070,21 @@ export interface ApiConfig {
     createRequestInstance?: (baseURL?: string | null, defaultHeaders?: Record<string, string>) => any;
     sendRequest?: (requestInstance: any, method: string, url: string, data?: any, headers?: Record<string, string>) => Promise<any>;
 }
+export type HapticPatternName = "selection" | "success" | "warning" | "error";
+/** A named pattern, a single duration in ms, or a vibrate/pause sequence. */
+export type HapticPattern = HapticPatternName | number | number[];
+export interface UseHapticsOptions {
+    /** Gates every `trigger` call (default `true`). */
+    enabled?: boolean;
+}
+export interface UseHapticsReturn {
+    /** Requests a vibration; returns `true` when one was requested. */
+    trigger: (pattern?: HapticPattern) => boolean;
+    /** `true` when the device exposes `navigator.vibrate` (`false` on the server and while hydrating). */
+    supported: boolean;
+    /** Mirrors `prefers-reduced-motion`; `trigger` is a no-op while it is `true`. */
+    reducedMotion: boolean;
+}
 export interface UseApiReturn {
     data: any;
     error: any;
@@ -953,12 +1150,82 @@ export interface DrawerProps extends BaseComponentProps, Omit<HTMLAttributes<HTM
     initialFocusRef?: RefObject<HTMLElement>;
     /** Decorative grab handle. Defaults to `true` for `placement="bottom"`. */
     handle?: boolean;
-    /** Bottom sheet only: dragging the handle/header down past a threshold calls `onClose`. */
+    /** Dragging the handle/header toward the drawer's own edge past a threshold (or a flick) calls `onClose`. Any placement. */
     swipeToClose?: boolean;
 }
 export interface DrawerSectionProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
     children?: ReactNode;
 }
+export type SheetPlacement = 'bottom' | 'top' | 'left' | 'right';
+export type SheetCloseReason = 'escape' | 'backdrop' | 'drag' | 'close-button';
+export interface SheetProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
+    /** Controlled visibility. */
+    open?: boolean;
+    /** Alias of `open` (matches Drawer / Dialog). */
+    isOpen?: boolean;
+    /** Called with why the sheet wants to close. */
+    onClose?: (reason: SheetCloseReason) => void;
+    placement?: SheetPlacement;
+    /** Fractions of the visual viewport height in (0, 1]; bottom/top only. */
+    snapPoints?: number[];
+    /** Controlled snap index into `snapPoints`. */
+    activeSnap?: number;
+    /** Uncontrolled initial snap index (default 0); restored on every open. */
+    defaultSnap?: number;
+    onSnapChange?: (index: number) => void;
+    /** Opt-in `selection` vibration when a drag or arrow key settles on a new snap point. */
+    haptics?: boolean;
+    /** `false` disables Escape, backdrop and drag dismissal (drags rubber-band back). */
+    dismissible?: boolean;
+    /** Grab handle. Defaults to `true` for `placement="bottom"`. */
+    handle?: boolean;
+    /** Scale the element marked `data-sheet-background` while open. No-op under reduced motion. */
+    scaleBackground?: boolean;
+    /** Rendered in an automatic Sheet.Header; labels the dialog. */
+    title?: ReactNode;
+    /** Rendered under the title; wired to `aria-describedby`. */
+    description?: ReactNode;
+    /** Close button in the automatic header (shown when `title`/`description` is set). */
+    showCloseButton?: boolean;
+    /** Element to focus on open (default: first focusable element, skipping the handle). */
+    initialFocus?: RefObject<HTMLElement>;
+    children?: ReactNode;
+}
+export interface SheetSectionProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    children?: ReactNode;
+}
+export type ActionSheetCloseReason = 'select' | 'cancel' | 'escape' | 'backdrop' | 'drag';
+export interface ActionSheetAction {
+    /** React key; defaults to the index. */
+    key?: string | number;
+    label: ReactNode;
+    /** A node (`<Trash2 />`) or a component type (`Trash2`). */
+    icon?: ReactNode | ComponentType<{
+        className?: string;
+    }>;
+    /** `'destructive'` renders the row in the error tone. Default `'default'`. */
+    tone?: 'default' | 'destructive';
+    /** Called before the sheet's `onClose('select')`. */
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+export interface ActionSheetProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
+    /** Controlled visibility. */
+    open?: boolean;
+    /** Alias of `open`. */
+    isOpen?: boolean;
+    /** Called after an action's `onSelect` (reason `'select'`), on Cancel, Escape, backdrop or drag. */
+    onClose?: (reason: ActionSheetCloseReason) => void;
+    /** Small heading above the actions; names the sheet unless `aria-label` is set. */
+    title?: ReactNode;
+    /** Muted text under the title; wired to `aria-describedby`. */
+    message?: ReactNode;
+    actions?: ActionSheetAction[];
+    /** Text of the separate Cancel button. Default `'Cancel'`. */
+    cancelLabel?: ReactNode;
+    /** `false` disables Escape, backdrop and drag dismissal. Default `true`. */
+    dismissible?: boolean;
+}
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface PopoverProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title' | 'children'> {
     /** The element that toggles the popover. Non-elements are wrapped in a `<button>`. */
@@ -975,6 +1242,8 @@ export interface PopoverProps extends BaseComponentProps, Omit<HTMLAttributes<HT
     title?: ReactNode;
     initialFocusRef?: RefObject<HTMLElement>;
     disabled?: boolean;
+    /** `auto` (default): a bottom Sheet on phones, the anchored panel elsewhere. */
+    presentation?: OverlayPresentation;
 }
 export interface TextareaProps extends BaseComponentProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
     label?: ReactNode;
@@ -1053,7 +1322,7 @@ export interface SortableProps<T = any> extends BaseComponentProps, Omit<HTMLAtt
     itemClassName?: string;
     messages?: SortableMessages;
 }
-export type TourPlacement = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export type TourPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'center';
 export type TourTarget = string | RefObject<HTMLElement> | HTMLElement | (() => HTMLElement | null);
 export type TourCloseReason = 'skip' | 'escape' | 'close' | 'finish';
 export interface TourStep {
@@ -1084,6 +1353,71 @@ export interface TourProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLD
     /** How long (ms) to wait for a step's target before showing a centred card. */
     targetTimeout?: number;
     spotlightPadding?: number;
+    /**
+     * `sheet` docks the step card at the bottom of the screen (swipe left/right
+     * for next/back); `popover` anchors it to the target; `auto` (default) docks
+     * on small touch screens.
+     */
+    presentation?: OverlayPresentation;
+}
+export interface SearchFieldResultsContext {
+    /** The current text. */
+    value: string;
+    /** Hides the results (popover or sheet). */
+    close: () => void;
+}
+export interface SearchFieldProps extends BaseComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'value' | 'defaultValue' | 'onChange' | 'type' | 'size' | 'results'> {
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value. Default `""`. */
+    defaultValue?: string;
+    /** New text on every change (typing, clear, Escape, Cancel). */
+    onValueChange?: (value: string) => void;
+    /** The input's change event; clear / Escape / Cancel pass `{ target: { value: "" } }`. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /** Enter (outside IME composition). */
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    /** After Cancel clears and blurs the field. */
+    onCancel?: () => void;
+    /** `'auto'` (default): on phones while focused. */
+    showCancel?: boolean | 'auto';
+    /** Default `"Cancel"`. */
+    cancelLabel?: string;
+    /** Default `"Clear search"`. */
+    clearLabel?: string;
+    /** Results content; turns the results surface on. */
+    results?: ReactNode;
+    renderResults?: (ctx: SearchFieldResultsContext) => ReactNode;
+    /** Controlled results visibility. */
+    resultsOpen?: boolean;
+    onResultsOpenChange?: (open: boolean) => void;
+    /** Accessible name of the results region / sheet. Default `"Search results"`. */
+    resultsLabel?: string;
+    /** `'auto'` (default): a full-height Sheet on phones, a popover beneath the field elsewhere. */
+    presentation?: OverlayPresentation;
+    /** Classes for the `<input>`; `className` styles the root wrapper. */
+    inputClassName?: string;
 }
 export * from './blocks';
+export interface PullToRefreshProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** Called on release past `threshold`; the spinner spins until the returned promise settles. */
+    onRefresh?: () => Promise<unknown> | void;
+    /** Pull distance (px, after resistance) that arms a refresh. Default 64. */
+    threshold?: number;
+    /** Ceiling of the resistance-scaled pull (px). Default `threshold * 2`. */
+    maxPull?: number;
+    disabled?: boolean;
+    /** Polite live-region text while refreshing. Default "Refreshing…". */
+    refreshingLabel?: string;
+    /** Your own scroll container inside `children`; omit to let PullToRefresh render one. */
+    scrollRef?: RefObject<HTMLElement>;
+    /** Classes for the inner content (scroll) element. */
+    contentClassName?: string;
+    children?: ReactNode;
+}
 //# sourceMappingURL=index.d.ts.map