@ufoui/core 0.0.88 → 0.0.124

package/assets/spinners.d.ts

@@ -1,16 +1,86 @@
 import { default as React } from 'react';
+/** Generic SVG props used by spinner assets. */
 type SvgProps = React.ComponentPropsWithoutRef<'svg'>;
+/** Circle-specific SVG props for spinner ring parts. */
 type CircleProps = React.ComponentPropsWithoutRef<'circle'>;
+/**
+ * Props for {@link SpinnerRingSvg}.
+ *
+ * @category Assets
+ */
 interface SpinnerRingSvgProps extends SvgProps {
+    /** Props forwarded to the ring track circle element. */
     trackProps?: CircleProps;
+    /** Props forwarded to the ring indicator circle element. */
     indicatorProps?: CircleProps;
 }
+/**
+ * Ring spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - SVG props including optional `trackProps` and `indicatorProps`.
+ * @param props.trackProps - Props forwarded to the track `<circle>`.
+ * @param props.indicatorProps - Props forwarded to the indicator `<circle>`.
+ *
+ * @example
+ * <SpinnerRingSvg className="uui-spinner" />
+ */
 export declare const SpinnerRingSvg: ({ trackProps, indicatorProps, ...props }: SpinnerRingSvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Three-dots spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerDotsSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Blade-style spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerBladeSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Vertical-bars spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerBarsSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Orbit spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerOrbitSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Arc spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerArcSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Step-bar spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerStepBarSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Dual-ring spinner SVG asset.
+ *
+ * @category Assets
+ * @function
+ * @param props - Standard SVG props.
+ */
 export declare const SpinnerDualRingSvg: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/accordion/accordion.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { BoxBaseProps } from '../base';
 import { BaseColor, BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFont, ElementShape } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 export type AccordionVariant = 'text' | 'pills' | 'grouped' | 'segmented';
 export type AccordionConfig = {
     variant?: AccordionVariant;
@@ -12,9 +12,7 @@ export type AccordionConfig = {
     border?: ElementBorder;
     borderColor?: BorderColor;
     shape?: ElementShape;
-    animation?: MotionAnimation;
-    motionStyle?: MotionStyle;
-    duration?: number;
+    animation?: ElementAnimation;
     color?: BaseColor;
     disabled?: boolean;
 };
@@ -35,9 +33,7 @@ export interface AccordionProps extends Omit<BoxBaseProps, 'type' | 'gap' | 'gap
     border?: ElementBorder;
     borderColor?: BorderColor;
     font?: ElementFont;
-    animation?: MotionAnimation;
-    motionStyle?: MotionStyle;
-    duration?: number;
+    animation?: ElementAnimation;
 }
 /**
  * Container component that manages accordion selection state.
@@ -49,4 +45,4 @@ export interface AccordionProps extends Omit<BoxBaseProps, 'type' | 'gap' | 'gap
  *
  * @category Accordion
  */
-export declare const Accordion: ({ type, variant, children, density, border, borderColor, elevation, showIcon, font, shape, animation, motionStyle, duration, color, disabled, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ type, variant, children, density, border, borderColor, elevation, showIcon, font, shape, animation, color, disabled, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/components/accordion/accordionItem.d.ts

@@ -2,7 +2,7 @@ import { default as React, ReactNode } from 'react';
 import { IS_ACCORDION_ITEM } from './accordionItem.guards';
 import { AccordionVariant } from './accordion';
 import { ElementFocusEffect, ElementFont, ElementHoverEffect, ElementPressedEffect, ElementSelectedEffect, ElementTouchEffect, SurfaceColor } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 /**
  * Props for {@link AccordionItem}.
  *
@@ -21,9 +21,7 @@ export interface AccordionItemProps {
     showIcon?: boolean;
     variant?: AccordionVariant;
     font?: ElementFont;
-    animation?: MotionAnimation;
-    motionStyle?: MotionStyle;
-    duration?: number;
+    animation?: ElementAnimation;
     flush?: boolean;
     divided?: boolean;
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;
@@ -52,7 +50,7 @@ export interface AccordionItemProps {
  * @category Accordion
  */
 export declare const AccordionItem: {
-    ({ value, label, children, leading, trailing, showIcon, icon, font, variant, animation, duration, motionStyle, flush, divided, onFocus, onBlur, color, disabled, hoverEffects, focusEffects, pressedEffects, touchEffects, selectedEffects, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, label, children, leading, trailing, showIcon, icon, font, variant, animation, flush, divided, onFocus, onBlur, color, disabled, hoverEffects, focusEffects, pressedEffects, touchEffects, selectedEffects, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Marks this component as an AccordionItem for runtime type guards.
      *

package/components/base/checkboxBase.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
 import { BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPlacement, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 /**
  * Props for the CheckboxBase component.
  *
@@ -10,8 +10,8 @@ import { MotionAnimation, MotionStyle } from '../../types';
  * @category Base components
  */
 export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
-    /** Animation preset for check and uncheck transitions. */
-    animation?: MotionAnimation;
+    /** Motion value (`MotionAnimation` or full motion config). */
+    animation?: ElementAnimation;
     /** Border style. */
     border?: ElementBorder;
     /** Border color override. */
@@ -30,8 +30,6 @@ export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLIn
     descriptionColor?: SurfaceColor;
     /** Font applied to the description text. */
     descriptionFont?: ElementFont;
-    /** Duration in milliseconds for the check or uncheck animation. */
-    duration?: number;
     /** Required root class name for styling. */
     elementClass: string;
     /** Elevation level applied to the glyph. */
@@ -60,8 +58,6 @@ export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLIn
     label?: string;
     /** Text color override for the label. */
     labelColor?: SurfaceColor;
-    /** Motion style applied to animated elements. */
-    motionStyle?: MotionStyle;
     /** DOM name attribute. */
     name?: string;
     /** Change event handler. */

package/components/base/dialogBase.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactElement, ReactNode } from 'react';
 import { BorderColor, ElementElevation, ElementFont, ElementOutline, ElementShape, ElementSize, SurfaceColor } from '../../utils';
-import { DialogIconSlot, DialogType, MotionAnimation, MotionStyle } from '../../types';
+import { DialogIconSlot, DialogType, ElementAnimation } from '../../types';
 /**
  * Props for the DialogBase component.
  *
@@ -38,10 +38,8 @@ export interface DialogBaseProps {
     fit?: boolean;
     /** Renders the panel in detached layout style. */
     detached?: boolean;
-    /** Animation preset; `'none'` disables motion. */
-    animation?: MotionAnimation;
-    /** Duration in milliseconds for open and close animations. Default: 500 */
-    duration?: number;
+    /** Motion value (`MotionAnimation` or full motion config). */
+    animation?: ElementAnimation;
     /** Whether the dialog closes when the backdrop is clicked. Default: true */
     closeOnBackdrop?: boolean;
     /** Whether the dialog closes when Escape is pressed. Default: true */
@@ -90,8 +88,6 @@ export interface DialogBaseProps {
     onBack?: () => void;
     /** Additional class names for the dialog panel. */
     className?: string;
-    /** Motion style helper classes for the panel. */
-    motionStyle?: MotionStyle;
     /** Enables modal behaviour, focus trap, aria-modal, and body scroll lock when applicable. */
     modal?: boolean;
     /** Focuses the dialog when opened (with modal focus trap). */

package/components/base/textBase.d.ts

@@ -1,5 +1,6 @@
 import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
+import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../utils';
+import { TextColor } from '../../types';
 /**
  * Props for {@link TextBase}.
  *
@@ -17,8 +18,8 @@ export interface TextBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     borderColor?: BorderColor;
     /** Text content. */
     children?: ReactNode;
-    /** Surface background token. */
-    color?: SurfaceColor;
+    /** Text color token. */
+    color?: TextColor;
     /** Semantic UUI element class (e.g. uui-text, uui-heading). */
     elementClass?: string;
     /** Elevation level (0–5). */

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ElementType, ReactNode } from 'react';
 import { BoxBaseProps } from '../base';
 import { ElementDensity, ElementFont, SurfaceColor } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 /**
  * Breadcrumb item.
  *
@@ -35,9 +35,7 @@ export interface BreadcrumbsProps extends BoxBaseProps {
     density?: ElementDensity;
     font?: ElementFont;
     color?: SurfaceColor;
-    animation?: MotionAnimation;
-    motionStyle?: MotionStyle;
-    duration?: number;
+    animation?: ElementAnimation;
 }
 /**
  * Breadcrumbs navigation component.

package/components/card/card.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ElementType, ReactNode } from 'react';
 import { BorderColor, ElementElevation, ElementShape, SurfaceColor } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 import { BoxBaseProps } from '../base';
 export type CardVariant = 'elevated' | 'filled' | 'outlined';
 /**
@@ -21,12 +21,8 @@ export interface CardProps extends Omit<BoxBaseProps, 'type' | 'elementClass' |
     variant?: CardVariant;
     /** Whether the card is visible. */
     open?: boolean;
-    /** Entry/exit animation preset. Use `none` to disable. */
-    animation?: MotionAnimation;
-    /** Animation duration in ms. */
-    duration?: number;
-    /** Motion style helper classes. */
-    motionStyle?: MotionStyle;
+    /** Motion value (`MotionAnimation` or full motion config). */
+    animation?: ElementAnimation;
     /** Surface color token override. */
     color?: SurfaceColor;
     /** Elevation override. */

package/components/collapse/collapse.d.ts

@@ -1,24 +1,20 @@
 import { ReactNode } from 'react';
 import { BoxBaseProps } from '../base';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAnimation } from '../../types';
 /**
  * Props for the Collapse component.
  *
  * @category Collapse
  */
 export interface CollapseProps extends Omit<BoxBaseProps, 'elevation'> {
-    /** Motion animation key. Default: slideDown. */
-    animation?: MotionAnimation;
+    /** Motion value (`MotionAnimation` or full motion config). */
+    animation?: ElementAnimation;
     /** Content rendered inside the container. */
     children?: ReactNode;
     /** Additional root class name. */
     className?: string;
-    /** Animation duration in milliseconds. Default: 220. */
-    duration?: number;
-    /** Motion style variant. */
-    motionStyle?: MotionStyle;
     /** Controls whether the container is expanded. */
-    open: boolean;
+    open?: boolean;
 }
 /**
  * Animated container that expands and collapses vertically.

package/components/item/item.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/**
+ * Props for the {@link Item} component.
+ *
+ * @category Item
+ */
+export interface ItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Secondary supporting text. */
+    description?: string;
+    /** Disables interactions and focus. */
+    disabled?: boolean;
+    /** Leading slot content. */
+    leading?: React.ReactNode;
+    /** Primary label text. */
+    label?: string;
+    /** Trailing slot content. */
+    trailing?: React.ReactNode;
+    /** Value identifier used for selection. */
+    value?: string;
+}
+/**
+ * **Item** — dumb renderer for list, listbox and menu contexts.
+ *
+ * Reads ARIA role and density from {@link SelectionContext}. Registers
+ * itself with the roving focus controller provided by the parent `List`.
+ *
+ * @remarks
+ * Export aliases: `ListItem`, `Option`.
+ *
+ * @example
+ * ```tsx
+ * <List variant="listbox" type="single">
+ *   <Item value="a" label="Apple" />
+ *   <Item value="b" label="Banana" description="Yellow fruit" />
+ * </List>
+ * ```
+ *
+ * @function
+ * @category Item
+ */
+export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
+/** @category Item */
+export declare const Option: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;

package/components/item/item.guards.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactElement } from 'react';
+import { ItemProps } from './item';
+export declare const IS_ITEM: unique symbol;
+/**
+ * Type guard that checks whether a React node is an Item component.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is an Item element.
+ *
+ * @internal
+ */
+export declare function isItem(el: React.ReactNode): el is ReactElement<ItemProps>;

package/components/list/list.d.ts

@@ -1,8 +1,49 @@
 import { ReactNode } from 'react';
+import { ElementDensity } from '../../utils';
 import { BoxBaseProps } from '../base/boxBase';
-export interface ListProps extends Omit<BoxBaseProps, 'type'> {
-    type?: 'single' | 'multiple';
-    defaultValue?: string;
+/** @category List */
+export type ListVariant = 'list' | 'listbox';
+/** @category List */
+export interface ListConfig {
+    density?: ElementDensity;
+    itemRole: 'listitem' | 'option';
+    variant: ListVariant;
+}
+/**
+ * Props for the {@link List} component.
+ *
+ * @category List
+ */
+export interface ListProps extends Omit<BoxBaseProps, 'type' | 'onChange'> {
     children: ReactNode;
+    /** Uncontrolled initial selected value(s). */
+    defaultValue?: string | string[];
+    /** Density preset propagated to all child items. */
+    density?: ElementDensity;
+    /** Change handler called with the new selected values array. */
+    onChange?: (values: string[]) => void;
+    /** Selection type for listbox variant. */
+    type?: 'single' | 'multiple';
+    /** Controlled selected value(s). */
+    value?: string | string[];
+    /** Switches between display list and selectable listbox. */
+    variant?: ListVariant;
 }
-export declare const List: ({ type, defaultValue, children }: ListProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * **List** — vertical container for {@link Item} elements.
+ *
+ * When `variant="listbox"` is set, enables keyboard navigation and
+ * selection via {@link SelectionContext}. Supports both controlled
+ * (`value` + `onChange`) and uncontrolled (`defaultValue`) modes.
+ *
+ * @example
+ * ```tsx
+ * <List variant="listbox" type="single" defaultValue="a">
+ *   <Item value="a" label="Apple" />
+ *   <Item value="b" label="Banana" />
+ * </List>
+ * ```
+ *
+ * @category List
+ */
+export declare const List: ({ children, className, variant, type, value, defaultValue, onChange, density, ...props }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/components/listbox/listBox.d.ts

@@ -0,0 +1,25 @@
+import { ListProps } from '../list/list';
+/**
+ * Props for the {@link ListBox} component.
+ *
+ * @category ListBox
+ */
+export type ListBoxProps = Omit<ListProps, 'variant'>;
+/**
+ * **ListBox** — thin semantic wrapper over `List` that presets `variant="listbox"`.
+ *
+ * @remarks
+ * Prefer using `List` with `variant="listbox"` directly when composing
+ * with `Select` or other controlled parents.
+ *
+ * @example
+ * ```tsx
+ * <ListBox type="single" defaultValue="a">
+ *   <Item value="a" label="Apple" />
+ *   <Item value="b" label="Banana" />
+ * </ListBox>
+ * ```
+ *
+ * @category ListBox
+ */
+export declare const ListBox: (props: ListBoxProps) => import("react/jsx-runtime").JSX.Element;

package/components/progress/progress.d.ts

@@ -1,27 +1,51 @@
-import { default as React } from 'react';
-import { ElementSize, SemanticColor } from '../../utils';
-import { BoxBaseProps } from '../base';
+import { HTMLAttributes } from 'react';
+import { ElementSize, SemanticColor, SurfaceColor, WrapperProps } from '../../utils';
 /**
  * Props for {@link Progress}.
  *
+ * Supports both linear and circular progress indicators, in determinate
+ * (`value` provided) and indeterminate (`value` omitted) modes.
+ *
  * @category Progress
  */
-export interface ProgressProps extends Omit<BoxBaseProps, 'children'> {
-    variant?: 'linear' | 'circular';
-    value?: number;
-    min?: number;
-    max?: number;
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, Omit<WrapperProps, 'shape'> {
+    /** Semantic color of the active indicator. */
     color?: SemanticColor;
+    /** Maximum value of the progress range. */
+    max?: number;
+    /** Minimum value of the progress range. */
+    min?: number;
+    /** Size preset of the progress component. */
     size?: ElementSize;
-    thickness?: number;
+    /** Surface color of the track/background. */
+    trackColor?: SurfaceColor;
+    /** Current value for determinate mode. Leave undefined for indeterminate mode. */
+    value?: number;
+    /** Visual style of the indicator. */
+    variant?: 'linear' | 'circular';
 }
 /**
  * Visual progress indicator.
  *
- * @function
+ * Renders either a linear bar or a circular ring. The component is:
+ * - determinate when `value` is provided,
+ * - indeterminate when `value` is omitted.
  *
+ * @function
  * @param props - Component props.
  *
  * @category Progress
+ *
+ * @example
+ * <Progress value={42} />
+ *
+ * @example
+ * <Progress variant="circular" value={75} />
+ *
+ * @example
+ * <Progress variant="linear" />
  */
-export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Progress: {
+    ({ variant, value, min, max, color, trackColor, size, className, style, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/select/select.d.ts

@@ -1,32 +1,41 @@
 import { ReactNode } from 'react';
 import { FieldBaseProps } from '../base/fieldBase';
 /**
- * Props for {@link Select}.
+ * Props for the {@link Select} component.
  *
  * @category Field
  */
-export interface SelectProps extends Omit<FieldBaseProps, 'elementClass' | 'value' | 'onChange'> {
-    /** Current selected value. */
-    value?: string | string[];
-    /** Placeholder displayed when no value is selected. */
-    placeholder?: string;
-    /** Change handler called with the selected value. */
+export interface SelectProps extends Omit<FieldBaseProps, 'elementClass' | 'value' | 'onChange' | 'trailing' | 'defaultValue'> {
+    /** Select options — `Item` or `Option` elements. */
+    children?: ReactNode;
+    /** Change handler called with the new selected value. */
     onChange?: (value: string | string[] | undefined) => void;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string | string[];
     /** Enables multiple value selection. */
     multiple?: boolean;
-    /** Makes the control read-only. */
-    readOnly?: boolean;
-    /** Custom renderer for the selected value. */
-    renderValue?: (value: string | string[] | undefined) => ReactNode;
-    /** Select options. */
-    children?: ReactNode;
+    /** Placeholder displayed when no value is selected. */
+    placeholder?: string;
+    /** Controlled selected value. */
+    value?: string | string[];
 }
 /**
- * **Select** – form control used to choose one or multiple values
- * from a predefined list of options.
+ * **Select** — field control that opens a listbox dropdown for picking values.
+ *
+ * Composes `FieldBase` (trigger) with `List variant="listbox"` (dropdown).
+ * Supports single and multiple selection, controlled and uncontrolled modes.
  *
- * @param props
+ * @example
+ * ```tsx
+ * <Select label="Fruit" value={fruit} onChange={v => setFruit(v as string)}>
+ *   <Item value="apple" label="Apple" />
+ *   <Item value="banana" label="Banana" />
+ * </Select>
+ * ```
  *
  * @category Field
- * @function
  */
+export declare const Select: {
+    ({ value, defaultValue, onChange, multiple, placeholder, children, density, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};