@ufoui/core 0.0.5 → 0.0.40

package/utils/toasts/toast.d.ts

@@ -1,29 +1,85 @@
 import { ReactNode } from 'react';
 import { SurfaceColor } from '../index';
+/**
+ * Status variant applied to a toast.
+ *
+ * @category Toast
+ */
 export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Options used to create or update a toast.
+ *
+ * @category Toast
+ */
 export interface ToastOptions {
-    id?: string;
-    title?: string;
-    description?: string;
+    /** Action element rendered inside the toast. */
+    action?: ReactNode | ((id: string) => ReactNode);
+    /** Surface color token overriding background and text colors. */
     color?: SurfaceColor;
-    status?: ToastStatus;
+    /** Full custom content replacing default layout. */
+    content?: ReactNode;
+    /** Supporting message text. */
+    description?: string;
+    /** Leading visual element such as an icon. */
     icon?: ReactNode;
-    action?: ReactNode | ((id: string) => ReactNode);
-    duration?: number;
+    /** Optional identifier. Generated automatically if not provided. */
+    id?: string;
+    /** Priority toasts appear before normal queued toasts. */
+    priority?: boolean;
+    /** Status variant applied as CSS modifier class. */
+    status?: ToastStatus;
+    /** Time in milliseconds before the toast is automatically dismissed. */
+    timeout?: number;
+    /** Primary heading text. */
+    title?: string;
 }
+/**
+ * Message descriptor used by promise helper.
+ *
+ * @category Toast
+ */
+type ToastPromiseMessage<T> = string | ToastOptions | ((v: T) => string | ToastOptions);
+/**
+ * Creates and displays a toast.
+ *
+ * Accepts either a message string or a ToastOptions object.
+ *
+ * @function
+ */
 declare function show(input: string | ToastOptions): string;
+/**
+ * Toast API used to create, update and manage notifications.
+ *
+ * @category Toast
+ */
 export declare const toast: typeof show & {
-    update: (id: string, partial: Partial<ToastOptions>) => void;
+    /** Updates an existing toast. */
+    update: (id: string, partial: import('./toastStore').ToastUpdate) => void;
+    /** Removes a toast by id. */
     dismiss: (id: string) => void;
+    /** Removes all toasts. */
     clear: () => void;
+    /** Creates a success toast. */
     success: (description: string, o?: ToastOptions) => string;
+    /** Creates an error toast. */
     error: (description: string, o?: ToastOptions) => string;
+    /** Creates an informational toast. */
     info: (description: string, o?: ToastOptions) => string;
+    /** Creates a warning toast. */
     warning: (description: string, o?: ToastOptions) => string;
+    /**
+     * Displays toast lifecycle bound to a promise.
+     *
+     * Promise toasts use priority so the user immediately
+     * sees feedback for the triggered action.
+     *
+     * @category Toast
+     * @function
+     */
     promise<T>(p: Promise<T>, m: {
-        loading: string;
-        success: string | ((v: T) => string);
-        error: string | ((e: unknown) => string);
+        loading: ToastPromiseMessage<void>;
+        success: ToastPromiseMessage<T>;
+        error: ToastPromiseMessage<unknown>;
     }): Promise<T>;
 };
 export {};

package/utils/toasts/toastStore.d.ts

@@ -1,11 +1,65 @@
 import { ToastOptions } from './toast';
+/**
+ * Internal toast state stored in the toast store.
+ *
+ * @category Toast
+ */
 export type ToastState = Required<Pick<ToastOptions, 'id'>> & Omit<ToastOptions, 'id'>;
+/**
+ * Partial update object used when modifying a toast.
+ *
+ * @category Toast
+ */
+export type ToastUpdate = Partial<Omit<ToastOptions, 'id'>>;
+/**
+ * Subscriber function receiving current toast list.
+ *
+ * @category Toast
+ */
 export type ToastStoreSubscriber = (toasts: ToastState[]) => void;
+/**
+ * Internal store managing toast lifecycle and subscriptions.
+ *
+ * @category Toast
+ */
 export declare const toastStore: {
+    /**
+     * Subscribes to toast state updates.
+     *
+     * @function
+     */
     subscribe(subscriber: ToastStoreSubscriber): () => void;
+    /**
+     * Adds a new toast to the store.
+     *
+     * Priority toasts are inserted at the beginning
+     * so they appear before normal queued toasts.
+     *
+     * @function
+     */
     add(toast: ToastState): void;
-    update(id: string, partial: Partial<ToastOptions>): void;
+    /**
+     * Updates an existing toast.
+     *
+     * @function
+     */
+    update(id: string, partial: ToastUpdate): void;
+    /**
+     * Removes a toast from the store.
+     *
+     * @function
+     */
     remove(id: string): void;
+    /**
+     * Removes all toasts.
+     *
+     * @function
+     */
     clear(): void;
+    /**
+     * Returns current toast list snapshot.
+     *
+     * @function
+     */
     getState(): ToastState[];
 };

package/utils/utils.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 export type ElementSize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
 export type ElementInset = 'none' | 'left' | 'right' | 'top' | 'bottom' | 'middle';
 export type ElementShape = 'square' | 'smooth' | 'rounded' | 'round';
@@ -75,7 +74,7 @@ export type ElementElevation = 0 | 1 | 2 | 3 | 4 | 5;
  *
  * @category Utils
  */
-export type ElementAlign = 'topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topRightOut' | 'topLeftOut' | 'auto';
+export type ElementPlacement = 'topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topRightOut' | 'topLeftOut' | 'auto';
 export type ElementDensity = 'comfortable' | 'compact' | 'dense';
 export type ElementFocusEffect = 'ring' | 'overlay';
 export type ElementPressedEffect = 'elevate' | 'overlay' | 'scale';
@@ -84,9 +83,50 @@ export type ElementSelectedEffect = 'color' | 'morph' | 'border' | 'overlay';
 export type ElementTouchEffect = 'ripple';
 export type ElementFont = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'caption' | 'overline';
 export type ElementTextPlacement = 'start' | 'end' | 'top' | 'bottom';
-export declare const getAlignClass: (position: ElementAlign) => string;
-export declare const getShapeClass: (shape: ElementShape) => "uui-square" | "uui-smooth" | "uui-rounded" | "uui-round" | "";
-export declare const getSizeClass: (size: ElementSize) => "uui-extra-small" | "uui-small" | "uui-medium" | "uui-large" | "uui-extra-large";
+/**
+ * Converts a camelCase, PascalCase, or acronym-based string into kebab-case.
+ *
+ * @param str - Input string to convert.
+ * @returns The kebab-case version of the string.
+ *
+ * @example
+ * toKebabCase("myVariableName"); // "my-variable-name"
+ * toKebabCase("URLParser"); // "url-parser"
+ *
+ * @category Utils
+ */
+export declare function toKebabCase(str: string): string;
+/**
+ * Clamps a numeric value to an integer range with a fallback.
+ *
+ * Converts the input to a number, rounds it to an integer,
+ * then clamps it between `min` and `max`.
+ * If the value is not a finite number, returns `fallback`.
+ *
+ * @param min - Minimum allowed value.
+ * @param max - Maximum allowed value.
+ * @param value - Input value to clamp. Can be any type.
+ * @param fallback - Value returned when input is invalid.
+ * @returns A clamped integer within the given range.
+ *
+ * @category Utils
+ */
+export declare function clampInt(min: number, max: number, value: unknown, fallback?: number): number | undefined;
+export declare const getPlacementClass: (position: ElementPlacement) => string;
+/**
+ * Returns the appropriate CSS class for the given shape token.
+ *
+ * @param shape Shape token.
+ * @returns CSS class for shape variant.
+ */
+export declare const getShapeClass: (shape?: ElementShape) => string;
+/**
+ * Returns the CSS class for the given size token.
+ *
+ * @param size Size token.
+ * @returns CSS class for size variant.
+ */
+export declare const getSizeClass: (size: ElementSize) => string;
 /**
  * Returns the appropriate CSS class for the given border size.
  *
@@ -95,14 +135,25 @@ export declare const getSizeClass: (size: ElementSize) => "uui-extra-small" | "u
  */
 export declare const getBorderClass: (border?: ElementBorder) => string;
 /**
- * Returns the appropriate CSS class for the given outline size.
+ * Returns the appropriate CSS class for the given elevation level.
+ *
+ * @param elevation Elevation token.
+ * @returns CSS class in the form uui-elevation-X.
+ */
+export declare const getElevationClass: (elevation?: ElementElevation) => string;
+/**
+ * Returns the appropriate CSS class for the given density token.
+ *
+ * @param density Density token.
+ * @returns CSS class for density variant.
+ */
+export declare const getDensityClass: (density?: ElementDensity) => string;
+/**
+ * Returns the CSS class for the given typography token.
  *
- * @param size - Outline size (0 to 4)
- * @returns A class name like 'uui-outline-2'
+ * @param font Typography token.
+ * @returns CSS class in the form uui-font-<token>.
  */
-export declare const getOutlineClass: (size: ElementBorder) => string;
-export declare const getElevationClass: (elevation?: ElementElevation) => "" | "uui-elevation-0" | "uui-elevation-1" | "uui-elevation-2" | "uui-elevation-3" | "uui-elevation-4" | "uui-elevation-5";
-export declare const getDensityClass: (density?: ElementDensity) => "" | "uui-compact" | "uui-dense";
 export declare const getFontClass: (font: ElementFont) => string;
 /**
  * Merges multiple React refs into a single ref callback.
@@ -139,52 +190,13 @@ export declare function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback
  */
 export declare const createRipple: (el: HTMLElement, event: React.MouseEvent<HTMLElement>, host?: HTMLElement) => void;
 /**
- * Converts a camelCase, PascalCase, or acronym-based string into kebab-case.
- *
- * @param str - Input string to convert.
- * @returns The kebab-case version of the string.
- *
- * @example
- * toKebabCase("myVariableName"); // "my-variable-name"
- * toKebabCase("URLParser"); // "url-parser"
- *
- * @category Utils
- */
-export declare function toKebabCase(str: string): string;
-/**
- * Forces focus to behave like :focus-visible on all browsers,
- * including Safari which loses :focus-visible heuristics when
- * focus is set programmatically (e.g., in menus or lists).
+ * Joins class names into a single string.
  *
- * Adds `.uui-focus-visible` to the element on focus, and
- * removes it automatically on blur.
+ * Accepts strings or arrays of strings and filters out falsy values.
  *
- * Chrome/Firefox:
- *   - still rely on native :focus-visible
- *   - fallback class is ignored (lower specificity)
- *
- * Safari:
- *   - native :focus-visible is unreliable
- *   - fallback `.uui-focus-visible` replaces it
- *
- * @param el - HTMLElement to focus with visible highlighting.
- *
- * @category Utils
- */
-export declare function setFocusVisible(el: HTMLElement | null): void;
-/**
- * Clamps a numeric value to an integer range with a fallback.
- *
- * Converts the input to a number, rounds it to an integer,
- * then clamps it between `min` and `max`.
- * If the value is not a finite number, returns `fallback`.
- *
- * @param min - Minimum allowed value.
- * @param max - Maximum allowed value.
- * @param value - Input value to clamp. Can be any type.
- * @param fallback - Value returned when input is invalid.
- * @returns A clamped integer within the given range.
+ * @function
+ * @param classes Class names to combine.
  *
  * @category Utils
  */
-export declare function clampInt(min: number, max: number, value: unknown, fallback?: number): number | undefined;
+export declare function cn(...classes: (string | false | null | undefined | string[])[]): string;

package/hooks/useFocusState.d.ts

@@ -1,16 +0,0 @@
-/**
- * Tracks focus state for a DOM element.
- *
- * Provides technical focus state and visual focus visibility.
- * Designed for components that need focus styling without
- * interfering with user-provided focus handlers.
- *
- * @param ref Reference to the target DOM element.
- * @returns Object containing focus state flags.
- *
- * @category Hooks
- */
-export declare function useFocusState<T extends HTMLElement>(ref: React.RefObject<T>): {
-    isFocused: boolean;
-    focusVisible: boolean;
-};