@ufoui/core 0.0.4 → 0.0.12

package/utils/toasts/toast.d.ts

@@ -0,0 +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 {
+    /** Action element rendered inside the toast. */
+    action?: ReactNode | ((id: string) => ReactNode);
+    /** Surface color token overriding background and text colors. */
+    color?: SurfaceColor;
+    /** Full custom content replacing default layout. */
+    content?: ReactNode;
+    /** Supporting message text. */
+    description?: string;
+    /** Leading visual element such as an icon. */
+    icon?: ReactNode;
+    /** 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 & {
+    /** 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: ToastPromiseMessage<void>;
+        success: ToastPromiseMessage<T>;
+        error: ToastPromiseMessage<unknown>;
+    }): Promise<T>;
+};
+export {};

package/utils/toasts/toastStore.d.ts

@@ -0,0 +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;
+    /**
+     * 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/uniqueID.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Generates a fast, pseudo-random unique ID.
+ *
+ * @param prefix - String prepended to the generated ID.
+ * @returns A unique ID in the form `${prefix}_xxxx`.
+ *
+ * @remarks
+ * - Uses `Math.random()` → extremely fast, ideal for UI/runtime IDs.
+ * - Not cryptographically secure.
+ * - Suitable for components, form fields, ripple effects, etc.
+ *
+ * @category Utils
+ */
+export declare const uniqueID: (prefix: string) => string;

package/utils/utils.d.ts

@@ -1,4 +1,3 @@
-import { default as React, ReactNode } 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';
@@ -18,6 +17,22 @@ export type ElementShape = 'square' | 'smooth' | 'rounded' | 'round';
  */
 export type ElementBorder = 0 | 1 | 2 | 3 | 4;
 export type ElementOutline = 0 | 1 | 2 | 3 | 4;
+/**
+ * Layout orientation used by axis-based components.
+ *
+ * @remarks
+ * Determines whether a component operates along the vertical
+ * (top-to-bottom) or horizontal (left-to-right) axis.
+ *
+ * Commonly used by components that can render in two directions,
+ * such as Collapse, Tabs, Divider, and Accordion.
+ *
+ * - **vertical** – primary axis is height (Y-axis)
+ * - **horizontal** – primary axis is width (X-axis)
+ *
+ * @category Utils
+ */
+export type ElementOrientation = 'vertical' | 'horizontal';
 /**
  * Elevation (shadow depth) levels used across UUI surfaces.
  *
@@ -68,10 +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';
+/**
+ * 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 getAlignClass: (position: ElementAlign) => string;
-export declare const getShapeClass: (shape: ElementShape) => "uui-square" | "uui-smooth" | "uui-rounded" | "uui-round" | "";
-export declare const getBodySizeClass: (size: ElementSize) => "uui-font-body-large" | "uui-font-body-medium" | "uui-font-body-small";
-export declare const getSizeClass: (size: ElementSize) => "uui-extra-small" | "uui-small" | "uui-medium" | "uui-large" | "uui-extra-large";
+/**
+ * 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.
  *
@@ -80,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.
@@ -124,79 +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;
 /**
- * Generates a fast, pseudo-random unique ID.
- *
- * @param prefix - String prepended to the generated ID.
- * @returns A unique ID in the form `${prefix}_xxxx`.
- *
- * @remarks
- * - Uses `Math.random()` → extremely fast, ideal for UI/runtime IDs.
- * - Not cryptographically secure.
- * - Suitable for components, form fields, ripple effects, etc.
- *
- * @category Utils
- */
-export declare const uniqueID: (prefix: string) => string;
-/**
- * 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;
-/**
- * Returns the `displayName` of a React element if available.
+ * Joins class names into a single string.
  *
- * @param el - A React node to inspect.
- * @returns The component's display name, or `undefined` if not found.
+ * Accepts strings or arrays of strings and filters out falsy values.
  *
- * @remarks
- * - Works with function components, `memo()`, and `forwardRef()`.
- * - Safe for any `ReactNode` (`string`, `null`, DOM elements, fragments, etc.).
+ * @function
+ * @param classes Class names to combine.
  *
  * @category Utils
  */
-export declare function getElementDisplayName(el: ReactNode): string | undefined;
-/**
- * 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).
- *
- * Adds `.uui-focus-visible` to the element on focus, and
- * removes it automatically on blur.
- *
- * 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.
- *
- * @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/components/base/dialogBase/dialog.d.ts

@@ -1,35 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { ElementElevation, ElementOutline, ElementShape, ElementSize } from '../../../utils/utils.ts';
-import { MotionAnimation, MotionStyle } from '../../../types/index.ts';
-import { BorderColor, SurfaceColor } from '../../../utils/color';
-export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
-export type DialogAnimation = 'auto' | 'none' | MotionAnimation;
-export interface DialogProps {
-    open: boolean;
-    onClose?: () => void;
-    type?: DialogType;
-    color?: SurfaceColor;
-    elevation?: ElementElevation;
-    size?: ElementSize;
-    shape?: ElementShape;
-    border?: ElementOutline;
-    borderColor?: BorderColor;
-    animation?: DialogAnimation;
-    duration?: number;
-    disableBackdropClose?: boolean;
-    disableEscapeKey?: boolean;
-    children?: ReactNode;
-    className?: string;
-    motionStyle?: MotionStyle;
-    modal?: boolean;
-    title?: string;
-    actions?: ReactNode[];
-    icon?: ReactNode;
-    showCloseButton?: boolean;
-    showHandle?: boolean;
-    autoFocus?: boolean;
-}
-export declare const Dialog: {
-    ({ open, onClose, type, color, elevation, shape, border, borderColor, size, animation, duration, disableBackdropClose, disableEscapeKey, children, className, motionStyle, modal, }: DialogProps): React.ReactPortal | null;
-    displayName: string;
-};

package/components/base/inlineBase/inlineBase.d.ts

@@ -1,62 +0,0 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../../utils/utils.ts';
-import { BorderColor, SurfaceColor } from '../../../utils/color';
-/**
- * Props for {@link InlineBase}.
- *
- * @remarks
- * Defines visual and typographic styling for inline-level elements
- * without imposing any layout behaviour.
- *
- * @category Inline
- */
-export interface InlineBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
-    /** Custom HTML element/component. Default: `span`. */
-    component?: React.ElementType;
-    /** Font token controlling typography (size, weight, line-height). */
-    font?: ElementFont;
-    /** Surface background token. */
-    color?: SurfaceColor;
-    /** Elevation level (0–5). */
-    elevation?: ElementElevation;
-    /** Shape/border-radius token. */
-    shape?: ElementShape;
-    /** Border width (0–5). */
-    border?: ElementBorder;
-    /** Border color token. */
-    borderColor?: BorderColor;
-    /** Renders as `inline-block` instead of `inline`. */
-    inlineBlock?: boolean;
-    /** Semantic UUI element class (e.g. 'uui-text', 'uui-heading'). */
-    elementClass?: string;
-    /** Inline content. */
-    children?: ReactNode;
-}
-/**
- * `InlineBase` — core primitive for inline semantic components.
- *
- * Provides typography, color, border, shape and elevation styling
- * for inline-level elements without introducing layout semantics.
- *
- * Intended as a foundation for components such as `Text`, `Heading`,
- * `Label`, `Code`, or inline UI tokens.
- *
- * @category Inline
- * @function
- * @param props - Inline styling and typography props.
- *
- * @example
- * ```tsx
- * <InlineBase font="bodyMedium">
- *   Inline text
- * </InlineBase>
- * ```
- *
- * @example
- * ```tsx
- * <InlineBase component="h2" font="headlineSmall">
- *   Section title
- * </InlineBase>
- * ```
- */
-export declare const InlineBase: React.ForwardRefExoticComponent<InlineBaseProps & React.RefAttributes<HTMLElement>>;

package/components/dateInput/dateInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const DateInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/dateTimeInput/dateTimeInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const DateTimeInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/emailInput/emailInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const EmailInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/numberInput/numberInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const NumberInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/telInput/telInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const TelInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/textField/textField.d.ts

@@ -1,9 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-/**
- * Props for {@link TextField}.
- * Extends {@link FieldBaseProps}.
- *
- * @category Field
- */
-export type FieldProps = Omit<FieldBaseProps, 'elementClass'>;
-export declare const TextField: import('react').ForwardRefExoticComponent<FieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/timeInput/timeInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const TimeInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/urlInput/urlInput.d.ts

@@ -1,2 +0,0 @@
-import { FieldBaseProps } from '../../index.ts';
-export declare const UrlInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

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