@ufoui/core 0.0.12 → 0.0.58

package/utils/createRipple.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+/**
+ * Creates a material-style ripple effect inside the given element.
+ *
+ * @param el - Target element that receives the ripple.
+ * @param event - Mouse event used to determine the ripple origin.
+ * @param host - Optional host element that receives the ripple container instead of `el`.
+ *
+ * @remarks
+ * - Automatically clears previous ripples.
+ * - Injects a `.ripple-container` and `.ripple` element.
+ * - Uses the element's client size and border radius.
+ * - Safe for buttons, icon buttons, list items, etc.
+ *
+ * @category Utils
+ */
+export declare const createRipple: (el: HTMLElement, event: React.MouseEvent<HTMLElement>, host?: HTMLElement) => void;

package/utils/flatChildren.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * Flattens a React node tree by one level, unwrapping Fragments.
+ *
+ * Accepts a single element, a Fragment, or an array and returns a flat array
+ * of `ReactNode` items. Useful in components that need to identify or count
+ * specific child types via type guards.
+ *
+ * @param node - React node to flatten.
+ * @returns Flat array of React nodes with top-level Fragments unwrapped.
+ *
+ * @example
+ * const items = flatChildren(actions).filter(isDialogAction);
+ *
+ * @category Utils
+ */
+export declare const flatChildren: (node: ReactNode) => ReactNode[];

package/utils/fontRegistry.d.ts

@@ -0,0 +1,29 @@
+import { ElementFont, PartialThemeFonts, ThemeFont } from '../types';
+/**
+ * Built-in font names available in the default font registry.
+ *
+ * @category Theme
+ */
+export declare const coreFonts: readonly ["displayLarge", "displayMedium", "displaySmall", "headlineLarge", "headlineMedium", "headlineSmall", "titleLarge", "titleMedium", "titleSmall", "labelLarge", "labelMedium", "labelSmall", "bodyLarge", "bodyMedium", "bodySmall", "caption", "overline"];
+/**
+ * Replaces the runtime font registry with core fonts plus provided overrides.
+ *
+ * @param fonts - Optional font class overrides keyed by font name.
+ * @category Theme
+ */
+export declare const setFontRegistry: (fonts?: PartialThemeFonts) => void;
+/**
+ * Returns all font names currently registered at runtime.
+ *
+ * @returns List of registered font names.
+ * @category Theme
+ */
+export declare const getFontNames: () => ThemeFont[];
+/**
+ * Returns the CSS class registered for the given font name.
+ *
+ * @param font - Font name key.
+ * @returns Registered CSS class or empty string when key is not registered.
+ * @category Theme
+ */
+export declare const getFontClass: (font: ElementFont) => string;

package/utils/generateMaterialColors.d.ts

@@ -1,8 +1,7 @@
-import { PartialThemeSchemes, ThemeSchemes } from '../types';
-export type ExtraColorOverrides = Partial<Record<'info' | 'warning' | 'success', string>>;
+import { ThemeColorSchemes, ThemeCustomColors } from '../types';
 /**
- * Generates a full ThemeSchemes object (light and dark modes) based on a seed color,
- * optional token overrides, and custom semantic colors (info, warning, success).
+ * Generates a full ThemeColorSchemes object (light and dark modes) based on a seed color,
+ * and optional semantic seed colors.
  *
  * Internally uses the Material Design 3 `themeFromSourceColor()` generator and applies
  * full resolution of all MD3 roles as defined in ThemeSchemeKeys.
@@ -12,20 +11,18 @@ export type ExtraColorOverrides = Partial<Record<'info' | 'warning' | 'success',
  *
  * @param seedColor - Optional seed color in hex (e.g. "#6200ee"). Used as the base for the primary palette.
  *                    Defaults to `#6750A4` if not provided.
- * @param customSchemes - Optional overrides for light and dark color values.
- *                        Partial values will be merged with generated ones.
- * @param extraColors - Optional custom base colors for `info`, `warning`, and `success`.
- *                      These will override the default values (`#03a9f4`, `#ffd600`, `#689f38`).
+ * @param colors - Optional map of semantic base colors (core + augmented).
+ *                 Defaults include `info`, `warning`, and `success`.
  *
- * @returns A fully resolved ThemeSchemes object with all required color roles populated for light and dark modes.
+ * @returns A fully resolved ThemeColorSchemes object with all required color roles populated for light and dark modes.
+ *          Also updates the global color registry via `setColorRegistry()`.
  *
  * @example
  * ```ts
- * const schemes = generateMaterialColors('#6200ee', { info: '#2196f3' }, {});
+ * const schemes = generateMaterialColors('#6200ee', { info: '#2196f3' });
  * const primary = schemes.light.primary;
- * const infoContainer = schemes.dark.infoContainer;
  * ```
  *
  * @category Theme
  */
-export declare function generateMaterialColors(seedColor?: string, extraColors?: ExtraColorOverrides, customSchemes?: PartialThemeSchemes): ThemeSchemes;
+export declare function generateMaterialColors(seedColor?: string, colors?: ThemeCustomColors): ThemeColorSchemes;

package/utils/index.d.ts

@@ -1,10 +1,18 @@
 export * from './color';
+export { getFontNames, getFontClass, setFontRegistry } from './fontRegistry';
+export type { ElementFont } from '../types/fonts';
 export * from './utils';
 export * from './calculateFloatingPosition';
 export * from './interactionMode';
 export * from './generateMaterialColors';
-export * from './generateSchemes';
+export * from './applyThemeColors';
+export * from './breakpoints';
 export * from './toasts';
 export * from './uniqueID';
 export * from './controlStyle';
 export * from './getWrapperStyle';
+export * from './flatChildren';
+export * from './renderPortal';
+export * from './colorRegistry';
+export * from './mergeOverrides';
+export { createRipple } from './createRipple';

package/utils/mergeOverrides.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Merges override values into a base string map, skipping `undefined` entries.
+ *
+ * @typeParam TBase - Base map type to preserve in the merged result.
+ * @param base - Base key/value map.
+ * @param overrides - Optional override map where `undefined` means "no change".
+ * @returns Object with merged map and list of keys that were actually applied.
+ * @category Theme
+ */
+export declare function mergeOverrides<TBase extends Record<string, string>>(base: TBase, overrides?: Record<string, string | undefined>): {
+    merged: TBase;
+    appliedKeys: string[];
+};

package/utils/renderPortal.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, ReactPortal } from 'react';
+/**
+ * Returns the portal host element `#id`, creating it when missing.
+ *
+ * @remarks
+ * If the element is missing, a `div` with the given `id` is appended to `document.body`.
+ * The portal mounts **into** that host — `document.body` itself is never used as the
+ * direct portal container.
+ *
+ * @param rootId - `id` of the root node (e.g. `'dialog-root'`).
+ *
+ * @returns The host element, or `null` when `document` is unavailable (e.g. SSR).
+ *
+ * @category Utils
+ */
+export declare function ensurePortalRoot(rootId: string): HTMLElement | null;
+/**
+ * Renders children into a dedicated portal root, creating that node when absent.
+ *
+ * @remarks
+ * Uses {@link ensurePortalRoot}; returns `null` when the document is not available.
+ *
+ * @param rootId - `id` of the portal host (e.g. `'dialog-root'`).
+ * @param children - Tree to render into the host.
+ *
+ * @returns A {@link https://react.dev/reference/react-dom/createPortal | React portal}, or `null`.
+ *
+ * @category Utils
+ */
+export declare function renderPortal(rootId: string, children: ReactNode): ReactPortal | null;

package/utils/utils.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -74,14 +75,13 @@ 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';
 export type ElementHoverEffect = 'elevate' | 'overlay' | 'color';
 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.
@@ -112,7 +112,7 @@ export declare function toKebabCase(str: string): string;
  * @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 getPlacementClass: (position: ElementPlacement) => string;
 /**
  * Returns the appropriate CSS class for the given shape token.
  *
@@ -148,13 +148,6 @@ export declare const getElevationClass: (elevation?: ElementElevation) => string
  * @returns CSS class for density variant.
  */
 export declare const getDensityClass: (density?: ElementDensity) => string;
-/**
- * Returns the CSS class for the given typography token.
- *
- * @param font Typography token.
- * @returns CSS class in the form uui-font-<token>.
- */
-export declare const getFontClass: (font: ElementFont) => string;
 /**
  * Merges multiple React refs into a single ref callback.
  *
@@ -174,21 +167,6 @@ export declare const getFontClass: (font: ElementFont) => string;
  * @category Utils
  */
 export declare function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T>;
-/**
- * Creates a material-style ripple effect inside the given element.
- *
- * @param el - Target element that receives the ripple.
- * @param event - Mouse event used to determine the ripple origin.
- *
- * @remarks
- * - Automatically clears previous ripples.
- * - Injects a `.ripple-container` and `.ripple` element.
- * - Uses the element's client size and border radius.
- * - Safe for buttons, icon buttons, list items, etc.
- *
- * @category Utils
- */
-export declare const createRipple: (el: HTMLElement, event: React.MouseEvent<HTMLElement>, host?: HTMLElement) => void;
 /**
  * Joins class names into a single string.
  *

package/utils/generateSchemes.d.ts

@@ -1,32 +0,0 @@
-import { ExtraColorOverrides } from './generateMaterialColors';
-import { PartialThemeSchemes, ThemeSchemes } from '../types';
-/**
- * Generates and injects CSS custom properties for Material Design 3 theme colors.
- *
- * This function calls `generateMaterialColors()` to resolve a complete light/dark
- * `ThemeSchemes` object based on a seed color, optional extra semantic colors
- * (`info`, `warning`, `success`), and optional overrides for individual color tokens.
- *
- * All resolved tokens are converted to CSS variables using kebab-case, e.g.:
- *   `--uui-color-primary`, `--uui-color-on-surface`, etc.
- *
- * Light mode tokens are injected into `:root`, dark mode tokens into `.dark`.
- * Variables are injected once into a single `<style>` tag with ID `ufo-ui-theme`.
- *
- * @param seedColor - The base seed color used to generate MD3 tonal palettes.
- *                    Defaults to `#6750A4` if not provided.
- * @param extraColors - Optional map of base semantic colors for `info`, `warning`, and `success`.
- *                      These override the default values.
- * @param schemes - Optional overrides for light and dark color tokens.
- *                  Partial values will be merged with the generated ones.
- *
- * @returns A fully resolved `ThemeSchemes` object containing all tokens for light and dark modes.
- *
- * @example
- * ```ts
- * const schemes = generateSchemes('#6200ee', { info: '#0288d1' }, { light: { primary: '#ff5722' } });
- * ```
- *
- * @category Theme
- */
-export declare function generateSchemes(seedColor?: string, extraColors?: ExtraColorOverrides, schemes?: PartialThemeSchemes): ThemeSchemes;