@ufoui/core 0.0.5 → 0.0.40

package/components/dialogs/dialogActions.d.ts

@@ -1,14 +1,26 @@
 import { ReactNode } from 'react';
-import { BorderColor, ElementOutline, SurfaceColor } from '../../utils';
+/** Slot contract for components that can act as dialog actions. */
+export interface DialogActionProps {
+    label?: string;
+    'aria-label'?: string;
+    icon?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    disabled?: boolean;
+}
 export interface DialogActionsProps {
-    children?: ReactNode;
+    actions?: ReactNode;
+    placement?: 'top' | 'subtitle' | 'bottom' | 'inline';
+    align?: 'start' | 'center' | 'end';
+    stack?: boolean;
     className?: string;
-    color?: SurfaceColor;
-    borderTop?: boolean;
-    borderTopWidth?: ElementOutline;
-    borderColor?: BorderColor;
+    /** Maximum number of visible actions before the rest collapse into an overflow menu. */
+    maxActions?: number;
+    /** Accessible label for the overflow actions button. Default: "More actions" */
+    moreLabel?: string;
+    moreIcon?: ReactNode;
 }
 export declare const DialogActions: {
-    ({ children, className, color, borderTop, borderTopWidth, borderColor, }: DialogActionsProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ actions, className, placement, align, stack, maxActions, moreLabel, }: DialogActionsProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/components/dialogs/dialogActions.guards.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from 'react';
+import { DialogActionProps } from './dialogActions';
+export declare const IS_DIALOG_ACTION: unique symbol;
+/**
+ * Type guard that checks whether a React node is a dialog action component.
+ *
+ * Identifies dialog action elements by the internal {@link IS_DIALOG_ACTION} symbol
+ * attached to the component type.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is a dialog action element.
+ *
+ * @internal
+ */
+export declare function isDialogAction(el: ReactNode): el is ReactElement<DialogActionProps>;

package/components/dialogs/dialogContent.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
+import { SurfaceColor } from '../../utils';
+import { DialogIconSlot } from '../../types';
 export interface DialogContentProps {
     children?: ReactNode;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    iconColor?: SurfaceColor;
+    iconSlot?: DialogIconSlot;
     className?: string;
 }
 export declare const DialogContent: {
-    ({ children, className }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ children, iconSlot, icon, showIcon, iconColor, className }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/components/dialogs/dialogHeader.d.ts

@@ -0,0 +1,60 @@
+import { ReactElement, ReactNode } from 'react';
+import { DialogActionsProps } from './dialogActions';
+import { ElementFont, SurfaceColor } from '../../utils';
+import { DialogIconSlot } from '../../types';
+/**
+ * Props for {@link DialogHeader}.
+ *
+ * @category Dialog
+ */
+export interface DialogHeaderProps {
+    /** Optional content before the back button and title row. */
+    leading?: ReactNode;
+    /** When true, renders the back affordance with {@link backIcon}. */
+    showBack?: boolean;
+    /** Invoked when the back control is activated. */
+    onBack?: () => void;
+    /** Icon element for the back control. */
+    backIcon?: ReactElement;
+    /** Resolved icon wrapper for leading/top slots; omit when no dialog icon. */
+    icon?: ReactElement;
+    showIcon?: boolean;
+    iconColor?: SurfaceColor;
+    /** Where the icon is placed inside the header vs content (see {@link DialogIconSlot}). */
+    iconSlot: DialogIconSlot;
+    /** Title alignment passed to {@link DialogTitle}. */
+    titleAlign?: 'start' | 'center' | 'end';
+    /** Title text. */
+    label?: string;
+    /** Action buttons (see {@link DialogActions}). */
+    actions?: DialogActionsProps['actions'];
+    actionsAlign?: DialogActionsProps['align'];
+    actionsStack?: DialogActionsProps['stack'];
+    maxActions?: DialogActionsProps['maxActions'];
+    moreLabel?: DialogActionsProps['moreLabel'];
+    moreIcon?: DialogActionsProps['moreIcon'];
+    /** Optional content after actions / before close in the header row. */
+    trailing?: ReactNode;
+    /** When true, renders the close control with {@link closeIcon}. */
+    showClose?: boolean;
+    /** Invoked when the close control is activated. */
+    onClose?: () => void;
+    /** Icon element for the close control (already resolved to default or override). */
+    closeIcon?: ReactElement;
+    font?: ElementFont;
+}
+/**
+ * Dialog title row: leading/back/icon, title, inline actions, trailing, and close.
+ *
+ * @remarks
+ * Non-inline actions are omitted here and rendered below the content by the parent.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Dialog
+ */
+export declare const DialogHeader: {
+    ({ leading, showBack, onBack, backIcon, icon, showIcon, iconColor, iconSlot, titleAlign, label, actions, actionsAlign, actionsStack, maxActions, moreLabel, moreIcon, trailing, showClose, onClose, closeIcon, font, }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/dialogs/dialogTitle.d.ts

@@ -1,15 +1,19 @@
 import { ReactNode } from 'react';
 import { ElementFont, SurfaceColor } from '../../utils';
+import { DialogIconSlot } from '../../types';
 export interface DialogTitleProps {
-    icon?: ReactNode;
     label?: string;
-    children?: ReactNode;
     className?: string;
     font?: ElementFont;
-    color?: SurfaceColor;
-    textColor?: SurfaceColor;
+    /** Resolved icon wrapper for leading/top slots; omit when no dialog icon. */
+    icon?: ReactNode | null;
+    /** Where the icon is placed inside the header vs content (see {@link DialogIconSlot}). */
+    iconSlot?: DialogIconSlot;
+    showIcon?: boolean;
+    iconColor?: SurfaceColor;
+    align?: 'start' | 'center' | 'end';
 }
 export declare const DialogTitle: {
-    ({ icon, label, children, className, font, }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ label, icon, iconSlot, className, iconColor, showIcon, align, font, }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/components/dialogs/drawer.d.ts

@@ -1,4 +1,4 @@
-import { DialogBaseProps } from '../base/dialogBase';
+import { DialogBaseProps } from '../base';
 /**
  * Props for {@link Drawer}.
  * Extends {@link DialogBaseProps}.

package/components/dialogs/index.d.ts

@@ -1,6 +1,7 @@
 export * from './dialog';
 export * from './dialogActions';
 export * from './dialogContent';
+export * from './dialogHeader';
 export * from './dialogTitle';
 export * from './drawer';
 export * from './bottomSheet';

package/components/fieldset/fieldset.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ElementFont, SurfaceColor } from '../../utils';
-import { BoxBaseProps } from '../base/boxBase';
+import { BoxBaseProps } from '../base';
 /**
  * Props for {@link Fieldset}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/link/link.d.ts

@@ -0,0 +1,58 @@
+import { default as React, ElementType, ReactNode } from 'react';
+import { ElementFocusEffect, ElementFont, ElementHoverEffect, ElementPressedEffect, SurfaceColor } from '../../utils';
+/**
+ * Props for the Link component.
+ *
+ * Inline link element with optional leading and trailing content and animated underline.
+ *
+ * @category Link
+ */
+export type LinkProps<T extends ElementType = 'a'> = {
+    /** Underlying element or router component. */
+    as?: T;
+    /** Link content. */
+    children?: ReactNode;
+    /** Fallback text when children is not provided. */
+    label?: string;
+    /** Leading visual element. */
+    leading?: ReactNode;
+    /** Trailing visual element. */
+    trailing?: ReactNode;
+    /** Surface color token applied to text. */
+    color?: SurfaceColor;
+    /** Underline visibility behavior. */
+    underline?: 'none' | 'hover' | 'always';
+    /** Font token applied to content. */
+    font?: ElementFont;
+    /** Opens link in new tab with security attributes. */
+    isExternal?: boolean;
+    /** Accessibility label override. */
+    'aria-label'?: string;
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Disables interaction and focus. */
+    disabled?: boolean;
+    /** Hover visual effects. */
+    hoverEffects?: ElementHoverEffect[];
+    /** Focus visual effects. */
+    focusEffects?: ElementFocusEffect[];
+    /** Pressed visual effects. */
+    pressedEffects?: ElementPressedEffect[];
+    /** Underline animation origin. */
+    underlineOrigin?: 'left' | 'center';
+    /** Underline animation type. */
+    underlineAnimation?: 'scale' | 'fade';
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'color' | 'children' | 'className'>;
+export interface LinkComponent {
+    <T extends ElementType = 'a'>(props: LinkProps<T>): ReactNode;
+    displayName?: string;
+}
+/**
+ * Inline link component with optional leading and trailing content and animated underline.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Link
+ */
+export declare const Link: LinkComponent;

package/components/list/list.d.ts

@@ -5,4 +5,4 @@ export interface ListProps extends Omit<BoxBaseProps, 'type'> {
     defaultValue?: string;
     children: ReactNode;
 }
-export declare const List: ({ type, defaultValue, children, }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ type, defaultValue, children }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/components/menu/menu.d.ts

@@ -1,6 +1,6 @@
 import { default as React, HTMLAttributes, ReactNode, RefObject } from 'react';
 import { MotionAnimation, MotionStyle } from '../../types';
-import { BorderColor, ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFloatingMode, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
+import { BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFloatingMode, ElementFocusEffect, ElementFont, ElementPlacement, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
 /**
  * Visual style preset for the Menu component.
  *
@@ -85,7 +85,7 @@ export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     /** Opens the menu on pointer hover. */
     openOnHover?: boolean;
     /** Preferred placement relative to the anchor. */
-    placement?: ElementAlign;
+    placement?: ElementPlacement;
     /** Icon used for checked radio items. */
     radioCheckedIcon?: ReactNode;
     /** Icon used for unchecked radio items. */

package/components/rating/rating.d.ts

@@ -0,0 +1,68 @@
+import { default as React, ReactNode } from 'react';
+import { ElementDensity, ElementFocusEffect, ElementFont, ElementPlacement, ElementSize, ElementTextPlacement, SurfaceColor } from '../../utils';
+/**
+ * Props for the Rating component.
+ *
+ * Numeric rating control rendered as a star slider with optional label and description.
+ *
+ * @category Rating
+ */
+export interface RatingProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'size'> {
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Color applied to the filled icons. */
+    color?: SurfaceColor;
+    /** Initial rating value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Visual density of the control. */
+    density?: ElementDensity;
+    /** Supporting text displayed below the control. */
+    description?: string;
+    /** Disables interaction with the control. */
+    disabled?: boolean;
+    /** Icon used for the empty rating state. */
+    emptyIcon?: ReactNode;
+    /** Error message displayed below the control. */
+    error?: string;
+    /** Enables filled visual style for icons. */
+    filled?: boolean;
+    /** Visual effects applied when the control receives focus. */
+    focusEffects?: ElementFocusEffect[];
+    /** Font applied to the label text. */
+    font?: ElementFont;
+    /** Icon used for the filled rating state. */
+    icon?: ReactNode;
+    /** DOM id used for accessibility attributes. */
+    id?: string;
+    /** Label text displayed next to the control. */
+    label?: string;
+    /** Maximum rating value. */
+    max?: number;
+    /** Called when the rating value changes. */
+    onChange?: (value: number) => void;
+    /** Prevents value changes while keeping the control focusable. */
+    readOnly?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** Visual size of the rating icons. */
+    size?: ElementSize;
+    /** Step size used for keyboard and pointer interaction. */
+    step?: number;
+    /** Placement of label and description relative to the control. */
+    textPlacement?: ElementTextPlacement;
+    /** Tooltip alignment relative to the control. */
+    tooltipAlign?: ElementPlacement;
+    /** Current rating value when used as a controlled component. */
+    value?: number;
+}
+/**
+ * Star rating input rendered as an interactive slider.
+ *
+ * Supports mouse, keyboard and form integration through a hidden input.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Rating
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;

package/components/slider/slider.d.ts

@@ -0,0 +1,11 @@
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { BorderColor, ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+import { BorderColor, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPlacement, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor } from '../../utils';
 /**
  * Props for the Switch component.
  *
@@ -26,10 +26,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     density?: ElementDensity;
     /** Supporting text displayed below the label. */
     description?: string;
-    /** Text color override for the description. */
-    descriptionColor?: SurfaceColor;
-    /** Font token applied to the description text. */
-    descriptionFont?: ElementFont;
     /** Elevation level of the control surface. */
     elevation?: ElementElevation;
     /** Error message text. Overrides description when present. */
@@ -50,8 +46,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     id?: string;
     /** Text label associated with the control. */
     label?: string;
-    /** Text color override for the label. */
-    labelColor?: SurfaceColor;
     /** Name attribute forwarded to the input element. */
     name?: string;
     /** Change event handler. */
@@ -66,12 +60,10 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     shape?: ElementShape;
     /** Size of the control. */
     size?: ElementSize;
-    /** Text color override for label and content. */
-    textColor?: SurfaceColor;
     /** Layout of text relative to the control. */
     textPlacement?: ElementTextPlacement;
     /** Tooltip alignment relative to the control. */
-    tooltipAlign?: ElementAlign;
+    tooltipAlign?: ElementPlacement;
     /** Touch and click visual effects. */
     touchEffects?: ElementTouchEffect[];
     /** Border style when unchecked. */

package/components/themeProvider/themeProvider.d.ts

@@ -12,20 +12,14 @@ export interface ThemeProviderProps {
      * Defaults to #6750A4 if omitted.
      */
     seedColor?: string;
-    /**
-     * Optional custom colors used for info, warning, and success roles.
-     * If omitted, defaults to:
-     * - info: #03a9f4
-     * - warning: #ffd600
-     * - success: #689f38
-     */
-    extraColors?: Partial<Record<'info' | 'warning' | 'success', string>>;
+    /** Optional custom colors map used to define or override generated theme roles. */
+    colors?: Record<string, string>;
 }
 /**
  * Provides a ThemeContext to all descendant components using Material Design 3 color tokens.
  *
  * - Dynamically generates full theme schemes (`light` and `dark`) based on the provided `seedColor`
- *   and optional `extraColors` (`info`, `warning`, `success`).
+ *   and optional `colors`.
  * - Injects resolved colors as CSS custom properties into the DOM (`:root` and `.dark`).
  * - Automatically toggles the `.dark` class on `<body>` based on `colorMode`.
  * - Exposes utility functions via context:
@@ -36,14 +30,15 @@ export interface ThemeProviderProps {
  *
  * This provider must wrap your application to enable theming and contextual access to color tokens.
  *
- * @param children - React children rendered within the theme context.
- * @param colorMode - Optional color mode: `'light'` or `'dark'`. Defaults to `'light'`.
- * @param seedColor - Optional base color used to generate the theme. Defaults to `#6750A4`.
- * @param extraColors - Optional custom base colors for semantic roles (`info`, `warning`, `success`).
+ * @param props - Theme provider props.
+ * @param props.children - React children rendered within the theme context.
+ * @param props.colorMode - Optional color mode: `'light'` or `'dark'`. Defaults to `'light'`.
+ * @param props.seedColor - Optional base color used to generate the theme. Defaults to `#6750A4`.
+ * @param props.colors - Optional custom colors map used to define or override generated theme roles.
  *
  * @example
  * ```tsx
- * <ThemeProvider colorMode="dark" seedColor="#6200ee" extraColors={{ info: '#2196f3' }}>
+ * <ThemeProvider colorMode="dark" seedColor="#6200ee" colors={{ info: '#2196f3', primary: '#0f62fe' }}>
  *   <App />
  * </ThemeProvider>
  * ```
@@ -51,4 +46,4 @@ export interface ThemeProviderProps {
  * @category Components
  * @group Theme
  */
-export declare const ThemeProvider: ({ children, colorMode, seedColor, extraColors, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, colorMode, seedColor, colors }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/components/toast/toast.d.ts

@@ -1,13 +1,15 @@
 import { default as React, ReactNode } from 'react';
-import { ElementElevation, ElementShape, SurfaceColor } from '../../utils';
+import { ElementElevation, ElementShape, SurfaceColor, ToastStatus } from '../../utils';
 import { BoxBaseProps } from '../base';
-import { ToastStatus } from '../../utils/toasts/toast';
+import { MotionAnimation, MotionStyle } from '../../types';
 /**
  * Props for Toast component.
  *
  * @category Toast
  */
 export interface ToastProps extends Omit<BoxBaseProps, 'children'> {
+    /** Toast identifier used for lifecycle control. */
+    id: string;
     /** Primary heading text. */
     title?: string;
     /** Secondary supporting text. */
@@ -20,18 +22,30 @@ export interface ToastProps extends Omit<BoxBaseProps, 'children'> {
     action?: ReactNode;
     /** Full content override replacing internal layout. */
     content?: ReactNode;
+    /** Time in milliseconds before the toast is automatically dismissed. */
+    timeout?: number;
     /** Elevation token. Default: 3 */
     elevation?: ElementElevation;
     /** Status variant applied as CSS modifier class. */
     status?: ToastStatus;
     /** Shape token. Default: smooth */
     shape?: ElementShape;
+    /** Animation preset used by internal motion elements. */
+    animation?: MotionAnimation;
+    /** Animation duration in milliseconds. */
+    duration?: number;
+    /** Motion style applied to animated elements. */
+    motionStyle?: MotionStyle;
+    leaving?: boolean;
+    onExitComplete?: (id: string) => void;
 }
 /**
- * Toast overlay container.
+ * Toast notification container.
+ *
+ * Handles auto-dismiss lifecycle using the timeout property.
  *
  * @function
- * @param props Component props.
+ * @param props Component properties.
  *
  * @category Toast
  */

package/components/toast/toastViewport.d.ts

@@ -1,6 +1,7 @@
-export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type ToastPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
 export interface ToastViewportProps {
     position?: ToastPosition;
-    gap?: number;
+    timeout?: number;
+    limit?: number;
 }
-export declare const ToastViewport: ({ position, gap, }: ToastViewportProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToastViewport: ({ position, timeout, limit }: ToastViewportProps) => import("react/jsx-runtime").JSX.Element;

package/components/tooltip/tooltip.d.ts

@@ -1,8 +1,8 @@
 import { HTMLProps, ReactNode } from 'react';
-import { ElementAlign } from '../../utils';
+import { ElementPlacement } from '../../utils';
 export interface TooltipProps extends HTMLProps<HTMLDivElement> {
     title: string;
     children?: ReactNode;
-    align?: ElementAlign;
+    align?: ElementPlacement;
 }
 export declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/context/selectionContext.d.ts

@@ -1,31 +1,32 @@
+import { useRovingFocus } from '../hooks/useRovingFocus';
 /**
  * Context value shared by components that rely on selection behavior.
  *
- * Provides state and control logic for managing single or multiple
- * selected values.
+ * @typeParam T - Optional configuration object provided by the parent component.
  *
  * @category Contexts
  */
-export interface SelectionContextValue {
-    /** Currently selected values. */
-    values: string[];
-    /** Selection mode: single or multiple. */
-    mode: 'single' | 'multiple';
-    /** Toggles selection state for a given value. */
-    toggle: (value: string) => void;
-    /** Sets a value directly (primarily for single mode). */
-    set: (value: string) => void;
+export interface SelectionContextValue<T = unknown> {
     /** Clears all selected values. */
     clear: () => void;
+    /** Optional configuration object passed from the parent component. */
+    config?: T;
+    /** Selection type: single or multiple. */
+    type: 'single' | 'multiple';
+    /** Optional roving focus controller for keyboard navigation between items. */
+    roving?: ReturnType<typeof useRovingFocus>;
+    /** Sets a value directly. */
+    set: (value: string) => void;
+    /** Toggles selection state for a given value. */
+    toggle: (value: string) => void;
+    /** Currently selected values. */
+    values: string[];
 }
 /**
- * SelectionContext provides access to shared selection state.
- *
- * Used by components such as Accordion, Tabs, RadioGroup,
- * and similar patterns that require controlled selection logic.
+ * React context that exposes shared selection state and optional configuration.
  *
- * Returns `null` if used outside a provider.
+ * Returns `null` when accessed outside of a provider.
  *
  * @category Contexts
  */
-export declare const SelectionContext: import('react').Context<SelectionContextValue | null>;
+export declare const SelectionContext: import('react').Context<SelectionContextValue<unknown> | null>;

package/hooks/index.d.ts

@@ -1,8 +1,10 @@
 export * from './useAnimate';
 export * from './useClickOutside';
 export * from './useEscapeHandler';
-export * from './useFocusState';
 export * from './useFocusVisible';
 export * from './useResizeObserver';
 export * from './useSelection';
 export * from './useTheme';
+export * from './useSliderKeys';
+export * from './useSelectionState';
+export * from './useFocusTrap';

package/hooks/useAnimate.d.ts

@@ -19,36 +19,56 @@ export interface UseAnimateOptions {
  * @category Hooks
  */
 export interface UseAnimateResult {
-    /** True while in the opening phase. */
+    /** True during the opening phase. */
     opening: boolean;
-    /** True while in the closing phase. */
+    /** True during the closing phase. */
     closing: boolean;
-    /** True while an animation is actively running. */
+    /** True when animation is running and not temporarily suppressed. */
     animating: boolean;
-    /** True when no animation is active. */
+    /** True while animation is in progress (opening or closing). */
+    active: boolean;
+    /** True only before any animation has started. */
     idle: boolean;
     /** CSS variables controlling animation timing and direction. */
     animationVars: Record<string, string>;
-    /** Triggers the next animation step or forces open or closed direction. */
+    /** Triggers animation towards open or closed state. */
     animate(next?: 'open' | 'closed'): void;
 }
 /**
- * Animation state hook supporting automatic, one-shot, and manual step modes.
+ * Handles open/close animation with interrupt support.
  *
- * Mode behavior:
- * - Automatic mode: when t1 is provided, animate runs a timed open or close sequence.
- * - One-shot mode: when enabled, only the opening transition is performed.
- * - Manual mode: when t1 is not provided, each animate call advances the phase by one step.
+ * Flow:
+ * - animate('open') → sets phase to "opening" and starts a timer
+ * - after t1 → phase becomes "open" and timer is cleared
+ * - animate('closed') → sets phase to "closing" and starts a timer
+ * - after t2 → phase becomes "closed" and timer is cleared
  *
- * The hook handles animation interruption by clearing active timers and
- * temporarily suppressing visual animation to avoid glitches.
+ * Interrupt:
+ * - calling animate() during an active transition clears the current timer
+ * - a new transition starts immediately
+ * - for one render animating = false (reset frame)
  *
- * animationVars return CSS custom properties describing the active phase:
- * - --uui-duration defines the duration of the current phase in milliseconds.
- * - --uui-reverse indicates whether the animation direction should be reversed.
+ * State usage:
+ * - opening / closing → current transition phase
+ * - active → true while transition is in progress (used for mount/visibility)
+ * - animating → same as active, but disabled during reset frame (used for CSS classes)
+ * - idle → true only before the first animation
+ *
+ * Important:
+ * - use `active` to control visibility (mount/unmount)
+ * - use `animating` to apply or remove animation classes
+ *
+ * Timer:
+ * - created when transition starts
+ * - cleared on completion or interrupt
+ *
+ * Modes:
+ * - t1 defined → automatic timed transitions
+ * - t1 undefined → manual stepper (each call advances phase)
+ * - oneShot → only opening transition is executed
  *
  * @function
- * @param options Hook configuration options.
+ * @param options Hook configuration options
  *
  * @category Hooks
  */