@ufoui/core 0.0.12 → 0.0.40

package/assets/icons.d.ts

@@ -1,11 +1,14 @@
+export declare const ChevronRightIcon: import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: import("react/jsx-runtime").JSX.Element;
+export declare const ArrowBackIcon: import("react/jsx-runtime").JSX.Element;
+export declare const MoreVertIcon: import("react/jsx-runtime").JSX.Element;
 export declare const CheckmarkIcon: import("react/jsx-runtime").JSX.Element;
 export declare const IndeterminateIcon: import("react/jsx-runtime").JSX.Element;
 export declare const RadioIcon: import("react/jsx-runtime").JSX.Element;
-export declare const ArrowRightIcon: import("react/jsx-runtime").JSX.Element;
 export declare const CheckboxIcon: import("react/jsx-runtime").JSX.Element;
+export declare const MenuCheckIcon: import("react/jsx-runtime").JSX.Element;
 export declare const RadioCheckedIcon: import("react/jsx-runtime").JSX.Element;
 export declare const RadioUncheckedIcon: import("react/jsx-runtime").JSX.Element;
-export declare const MenuCheckIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ExpandIcon: import("react/jsx-runtime").JSX.Element;
 export declare const StarIcon: import("react/jsx-runtime").JSX.Element;
 export declare const StarFilledIcon: import("react/jsx-runtime").JSX.Element;

package/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BoxBaseProps } from '../base';
-import { BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
+import { BaseColor, BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFont, ElementShape } from '../../utils';
 import { MotionAnimation, MotionStyle } from '../../types';
 export type AccordionVariant = 'text' | 'pills' | 'grouped' | 'segmented';
 export type AccordionConfig = {
@@ -15,7 +15,7 @@ export type AccordionConfig = {
     animation?: MotionAnimation;
     motionStyle?: MotionStyle;
     duration?: number;
-    color?: SurfaceColor;
+    color?: BaseColor;
     disabled?: boolean;
 };
 /**

package/components/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../../utils/utils';
+import { ElementBorder, ElementElevation, ElementFont, ElementPlacement, ElementShape, ElementSize } from '../../utils/utils';
 import { BorderColor, SemanticColor } from '../../utils/color';
 /**
  * Props for the Badge component.
@@ -10,7 +10,7 @@ import { BorderColor, SemanticColor } from '../../utils/color';
  */
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'ref' | 'size'> {
     /** Position relative to the parent element. */
-    align?: ElementAlign;
+    align?: ElementPlacement;
     /** Accessible label for screen readers when badge conveys information. */
     ariaLabel?: string;
     /** Border width when outlined. */

package/components/base/boxBase.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor, WrapperProps } from '../../utils';
+import { BaseColor, BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, WrapperProps } from '../../utils';
 /**
  * Layout mode for {@link BoxBase}.
  *
@@ -41,7 +41,7 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     /** Layout direction shortcut. Same as `direction="col"`. */
     col?: boolean;
     /** Surface background token. Default: `'surface'`. */
-    color?: SurfaceColor;
+    color?: BaseColor;
     /** Grid template columns (`3` → `repeat(3, 1fr)`). */
     cols?: number | string;
     /** Custom HTML element/component. Default: `div`. */
@@ -59,9 +59,9 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     /** Font token controlling typography (size, weight, line-height). */
     font?: ElementFont;
     /** Forces full height (100%). */
-    hf?: boolean;
+    fullHeight?: boolean;
     /** Forces full width (100%). */
-    wf?: boolean;
+    fullWidth?: boolean;
     /** Gap between children (flex/grid). */
     gap?: number | string;
     /** Horizontal gap (`column-gap`). */

package/components/base/buttonBase.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, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+import { BaseColor, BorderColor, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPlacement, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect, SemanticColor } from '../../utils';
 /**
  * Props for the ButtonBase component.
  *
@@ -37,7 +37,7 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Font token for label and content. */
     font?: ElementFont;
     /** Expands button to full width. */
-    wf?: boolean;
+    fullWidth?: boolean;
     /** Hover visual effects. */
     hoverEffects?: ElementHoverEffect[];
     /** Icon rendered at the start of the button. */
@@ -77,13 +77,13 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Shape override when selected. */
     selectedShape?: ElementShape;
     /** Text color override when selected. */
-    selectedTextColor?: SurfaceColor;
+    selectedTextColor?: BaseColor;
     /** Shape of the button. */
     shape?: ElementShape;
     /** Predefined button size. Default: medium */
     size?: ElementSize;
     /** Text color override. */
-    textColor?: SurfaceColor;
+    textColor?: BaseColor;
     /** Tooltip text and accessibility label fallback. */
     title?: string;
     /** Enables toggle button behavior. */
@@ -91,7 +91,7 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Enables tonal style. */
     tonal?: boolean;
     /** Tooltip alignment relative to the button. */
-    tooltipAlign?: ElementAlign;
+    tooltipAlign?: ElementPlacement;
     /** Touch and click visual effects. */
     touchEffects?: ElementTouchEffect[];
     /** Custom trailing content. */

package/components/base/checkboxBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { BorderColor, ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+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';
 /**
  * Props for the CheckboxBase component.
@@ -83,7 +83,7 @@ export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLIn
     /** Placement 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[];
     /** Input type. */

package/components/base/dialogBase.d.ts

@@ -1,34 +1,130 @@
-import { default as React, ReactNode } from 'react';
-import { BorderColor, ElementElevation, ElementOutline, ElementShape, ElementSize, SurfaceColor } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
-export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
-export type DialogAnimation = 'none' | MotionAnimation;
+import { default as React, ReactElement, ReactNode } from 'react';
+import { BorderColor, ElementElevation, ElementFont, ElementOutline, ElementShape, ElementSize, SurfaceColor } from '../../utils';
+import { DialogAnimation, DialogIconSlot, DialogType, MotionStyle } from '../../types';
+/**
+ * Props for the DialogBase component.
+ *
+ * Supports backdrop and portal rendering, transitions, Escape and backdrop
+ * dismiss, and optional modal focus trap and scroll locking.
+ *
+ * @category Base components
+ */
 export interface DialogBaseProps {
+    /** Semantic UUI element class for the dialog panel. */
     elementClass?: string;
+    /** Whether the dialog is open. */
     open: boolean;
+    /** Handler invoked when the dialog should close. */
     onClose?: () => void;
+    /** Layout mode. Default: basic */
     type?: DialogType;
+    /** Surface background token. */
     color?: SurfaceColor;
+    /** Elevation level. Default: 3 for non-fullscreen layouts. */
     elevation?: ElementElevation;
+    /** Predefined panel size. Default: small for horizontal docks, medium otherwise. */
     size?: ElementSize;
+    /** Shape of the dialog panel. */
     shape?: ElementShape;
+    /** Outline thickness when outlined. */
     border?: ElementOutline;
+    /** Outline color when outlined. */
     borderColor?: BorderColor;
-    wf?: boolean;
-    hf?: boolean;
+    /** Expands panel to full width. */
+    fullWidth?: boolean;
+    /** Expands panel to full height. */
+    fullHeight?: boolean;
+    /** Fits content to the panel. */
     fit?: boolean;
+    /** Renders the panel in detached layout style. */
     detached?: boolean;
+    /** Animation preset; `'none'` disables motion. */
     animation?: DialogAnimation;
+    /** Duration in milliseconds for open and close animations. Default: 500 */
     duration?: number;
-    disableBackdropClose?: boolean;
-    disableEscapeKey?: boolean;
+    /** Whether the dialog closes when the backdrop is clicked. Default: true */
+    closeOnBackdrop?: boolean;
+    /** Whether the dialog closes when Escape is pressed. Default: true */
+    closeOnEsc?: boolean;
+    /** Dialog content. */
     children?: ReactNode;
+    /** Visual title text. Referenced via aria-labelledby on the dialog element. */
+    label?: string;
+    /** Accessible label for dialogs without a visible title. */
+    'aria-label'?: string;
+    /** Icon rendered in the dialog. Position controlled by iconSlot. */
+    icon?: ReactElement;
+    showIcon?: boolean;
+    iconColor?: SurfaceColor;
+    /** Where the icon is placed. Default: leading */
+    iconSlot?: DialogIconSlot;
+    /** Alignment of the title text. Default: start */
+    titleAlign?: 'start' | 'center' | 'end';
+    /** Full leading slot content for the title area. */
+    leading?: ReactNode;
+    /** Trailing slot content for the title area. */
+    trailing?: ReactNode;
+    /** Action buttons rendered in the dialog. */
+    actions?: ReactNode;
+    /** Where actions are placed. Default: inline for fullscreen, bottom otherwise (MD3) */
+    actionsPlacement?: 'top' | 'subtitle' | 'bottom' | 'inline';
+    /** Alignment of action buttons. Default: end (MD3) */
+    actionsAlign?: 'start' | 'center' | 'end';
+    /** Stack actions vertically instead of horizontally. Default: false (MD3) */
+    actionsStack?: boolean;
+    /** Maximum number of visible actions before the rest collapse into an overflow menu. Only applies when actionsPosition is inline. */
+    maxActions?: number;
+    /** Accessible label for the overflow actions button. Default: "More actions" */
+    moreLabel?: string;
+    /** Custom icon for the overflow actions button. */
+    moreIcon?: ReactElement;
+    /** Renders a close button in the trailing slot. */
+    showClose?: boolean;
+    /** Custom icon for the close button. */
+    closeIcon?: ReactElement;
+    /** Renders a back button in the leading slot. */
+    showBack?: boolean;
+    /** Custom icon for the back button. */
+    backIcon?: ReactElement;
+    /** Handler for the back button. Defaults to onClose. */
+    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). */
     autoFocus?: boolean;
+    /** Removes default panel padding. */
     flush?: boolean;
+    /** Renders inline without a portal (e.g. docked regions). */
     docked?: boolean;
+    /** Skips portaling and modal body scroll lock; for anchored overlays. */
     anchored?: boolean;
+    font?: ElementFont;
+    titleFont?: ElementFont;
 }
+/**
+ * Low-level base component for modal and docked dialogs.
+ *
+ * Renders a backdrop and panel (via BoxBase), portaled to `#dialog-root` (created if
+ * missing; see {@link renderPortal}) unless `docked` or `anchored`.
+ *
+ *
+ * @param props Component properties.
+ * @function
+ *
+ * @example
+ * <DialogBase open={open} onClose={() => setOpen(false)} modal>
+ * {children}
+ * </DialogBase>
+ *
+ * @example
+ * <DialogBase open type="dockRight" anchored >
+ * {children}
+ * </DialogBase>
+ *
+ * @category Base components
+ */
 export declare const DialogBase: React.ForwardRefExoticComponent<DialogBaseProps & React.RefAttributes<HTMLDivElement>>;

package/components/base/fieldBase.d.ts

@@ -21,7 +21,7 @@ export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInput
     outlined?: boolean;
     filled?: boolean;
     classic?: boolean;
-    wFull?: boolean;
+    fullWidth?: boolean;
     /** Control shape variant. */
     shape?: ElementShape;
     /** Text color override for the label. */

package/components/card/card.d.ts

@@ -1,10 +1,10 @@
 import { HTMLProps } from 'react';
-import { ElementAlign, ElementShape, ElementSize } from '../../utils/utils';
+import { ElementPlacement, ElementShape, ElementSize } from '../../utils/utils';
 import { SemanticColor } from '../../utils/color';
 export interface CardProps extends Omit<HTMLProps<HTMLSpanElement>, 'ref' | 'size'> {
     value: string | number;
     color?: SemanticColor;
-    position?: ElementAlign;
+    position?: ElementPlacement;
     size?: ElementSize;
     shape?: ElementShape;
     raised?: boolean;

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/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/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

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementDensity, ElementFocusEffect, ElementFont, ElementSize, ElementTextPlacement, SurfaceColor } from '../../utils';
+import { ElementDensity, ElementFocusEffect, ElementFont, ElementPlacement, ElementSize, ElementTextPlacement, SurfaceColor } from '../../utils';
 /**
  * Props for the Rating component.
  *
@@ -51,7 +51,7 @@ export interface RatingProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /** Placement of label and description relative to the control. */
     textPlacement?: ElementTextPlacement;
     /** Tooltip alignment relative to the control. */
-    tooltipAlign?: ElementAlign;
+    tooltipAlign?: ElementPlacement;
     /** Current rating value when used as a controlled component. */
     value?: number;
 }

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 } 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.
  *
@@ -63,7 +63,7 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /** 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/toolbar/toolbar.d.ts

@@ -19,7 +19,7 @@ export interface ToolbarProps extends Omit<BoxBaseProps, 'component' | 'elementC
     /** Density token. */
     density?: ElementDensity;
     /** Makes toolbar full width. */
-    wFull?: boolean;
+    fullWidth?: boolean;
     /** Positions floating toolbar. */
     placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
     /** Makes floating toolbar fixed. */

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>>;