@ufoui/core 0.0.5 → 0.0.12

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';
@@ -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';
+/**
+ * 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 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.
  *
@@ -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;
-};