@ufoui/core 0.0.2 → 0.0.5

package/internal/inlineTooltip/inlineTooltip.d.ts

@@ -5,7 +5,7 @@ interface InlineTooltipProps extends HTMLProps<HTMLSpanElement> {
     triggerRef: React.RefObject<HTMLElement>;
 }
 export declare const InlineTooltip: {
-    ({ id, title, triggerRef }: InlineTooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, title, triggerRef, }: InlineTooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/internal/inlineTooltip/inlineTooltipManager.d.ts

@@ -1,12 +1,12 @@
 import { default as React, HTMLProps, ReactElement } from 'react';
-import { ElementAlign } from '../../index.ts';
+import { ElementAlign } from '../../utils';
 interface InlineTooltipManagerProps extends HTMLProps<HTMLSpanElement> {
     triggerRef: React.RefObject<HTMLElement>;
     tooltip: ReactElement;
     align: ElementAlign;
 }
 export declare const InlineTooltipManager: {
-    ({ tooltip, align, triggerRef }: InlineTooltipManagerProps): React.ReactPortal;
+    ({ tooltip, align, triggerRef, }: InlineTooltipManagerProps): React.ReactPortal;
     displayName: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ufoui/core",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Lightweight Material Design 3 UI components for React",
   "type": "module",
   "main": "./index.mjs",

package/utils/calculateFloatingPosition.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { ElementAlign } from '../index.ts';
+import { ElementAlign } from './utils';
 /**
  * Floating behavior presets used by `calculateFloatingPosition()`.
  *

package/utils/color.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { ThemeExtendedColorKeys, ThemeSchemeKeys, ThemeSemanticColorKeys, ThemeSurfaceColorKeys } from '../types/index.ts';
+import { ThemeExtendedColorKeys, ThemeSchemeKeys, ThemeSemanticColorKeys, ThemeSurfaceColorKeys } from '../types';
 /**
  * Represents a high-level semantic color token (e.g. `primary`, `error`, `success`).
  * Derived from {@link ThemeSemanticColorKeys}.
@@ -322,94 +321,5 @@ export declare function getTintOverlayColor(elevation: number, tintColor: string
  * @returns Object with fixed color class mappings.
  */
 export declare const getFixedColorClasses: () => Record<string, string>;
-/**
- * Returns a map of `uui-current-*` classes for the given element color.
- *
- * @param color - The base color name (e.g. 'primary', 'error', etc.)
- * @returns An object with `uui-current-*` class names for various variants.
- */
-export declare const getCurrentColorClasses: (color: SemanticColor) => {
-    [k: string]: `uui-current-${string}` | `uui-current-on-${string}` | `uui-current-${string}-container` | `uui-current-on-${string}-container` | `uui-current-${string}-fixed` | `uui-current-on-${string}-fixed` | `uui-current-${string}-fixed-dim` | `uui-current-on-${string}-fixed-variant`;
-};
-/**
- * Creates a style builder for MD3 color tokens.
- *
- * @remarks
- * The builder provides typed functions for applying theme color tokens
- * to background, text, border, and outline properties using CSS variables.
- *
- * - `bg(color)` — sets background from any ThemeColor
- * - `bg.on(surfaceColor)` — sets background from corresponding `on-*` surface color
- * - `bg.container(semanticColor)` — sets semantic `*-container` background
- * - `bg.onContainer(semanticColor)` — sets semantic `on-*-container` background
- * - `bg.fixed(semanticColor)` — semantic `*-fixed` background
- * - `bg.fixedDim(semanticColor)` — semantic `*-fixed-dim` background
- *
- * - `text(color)` — sets text color from any ThemeColor
- * - `text.on(surfaceColor)` — sets text from `on-*` surface colors
- * - `text.onContainer(semanticColor)` — sets text from semantic `on-*-container`
- *
- * - `border(color)` — sets border-color from any ThemeColor
- * - `outline(color)` — sets outline-color from any ThemeColor
- *
- * The builder accumulates all style operations internally
- * and exposes them via `.get()` as a final React.CSSProperties object.
- *
- * @example
- * const style = ColorStyle();
- * style.bg('surfaceContainerLow');
- * style.text.on('surface');
- * return <button style={style.get()}>Press</button>;
- */
-/**
- * Creates a strictly typed style builder for MD3 color tokens.
- *
- * @category Color
- */
-type CSSPropertyKey = Extract<keyof React.CSSProperties, string>;
-type CSSVar = `--${string}`;
-export declare function ControlStyle(initial?: React.CSSProperties): {
-    bg: ((color?: ThemeColor) => void) & {
-        on(color?: SurfaceColor): void;
-        container(color?: SemanticColor): void;
-        onContainer(color?: SemanticColor): void;
-        fixed(color?: SemanticColor): void;
-        fixedDim(color?: SemanticColor): void;
-    };
-    text: ((color?: ThemeColor) => void) & {
-        on(color?: SurfaceColor): void;
-        container(color?: SemanticColor): void;
-        onContainer(color?: SemanticColor): void;
-        fixed(color?: SemanticColor): void;
-        fixedDim(color?: SemanticColor): void;
-    };
-    border: ((color?: ThemeColor) => void) & {
-        on(color?: SurfaceColor): void;
-        container(color?: SemanticColor): void;
-        onContainer(color?: SemanticColor): void;
-        fixed(color?: SemanticColor): void;
-        fixedDim(color?: SemanticColor): void;
-    };
-    outline: ((color?: ThemeColor) => void) & {
-        on(color?: SurfaceColor): void;
-        container(color?: SemanticColor): void;
-        onContainer(color?: SemanticColor): void;
-        fixed(color?: SemanticColor): void;
-        fixedDim(color?: SemanticColor): void;
-    };
-    current: ((color?: ThemeColor) => void) & {
-        on(color?: SurfaceColor): void;
-        container(color?: SemanticColor): void;
-        onContainer(color?: SemanticColor): void;
-        fixed(color?: SemanticColor): void;
-        fixedDim(color?: SemanticColor): void;
-    };
-    set: {
-        <K extends CSSPropertyKey>(key: K, value: React.CSSProperties[K]): void;
-        (key: CSSVar, value: string): void;
-    };
-    get(): React.CSSProperties;
-    merge(styles?: React.CSSProperties): void;
-};
+export declare function capitalize(s: string): string;
 export declare function getBorderColor(borderColor?: BorderColor): BorderColor;
-export {};

package/utils/controlStyle.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+import { SemanticColor, SurfaceColor, ThemeColor } from './color';
+/**
+ * Creates a strictly typed style builder for MD3 color tokens.
+ *
+ * @category Color
+ */
+type CSSPropertyKey = Extract<keyof React.CSSProperties, string>;
+type CSSVar = `--${string}`;
+export declare function ControlStyle(initial?: React.CSSProperties): {
+    bg: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    text: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    border: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    outline: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    current: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    stroke: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    fill: ((color?: ThemeColor) => void) & {
+        on(color?: SurfaceColor): void;
+        container(color?: SemanticColor): void;
+        onContainer(color?: SemanticColor): void;
+        fixed(color?: SemanticColor): void;
+        fixedDim(color?: SemanticColor): void;
+    };
+    set: {
+        <K extends CSSPropertyKey>(key: K, value: React.CSSProperties[K]): void;
+        (key: CSSVar, value: string): void;
+    };
+    get(): React.CSSProperties;
+    merge(styles?: React.CSSProperties): void;
+};
+export {};

package/utils/generateMaterialColors.d.ts

@@ -1,4 +1,4 @@
-import { PartialThemeSchemes, ThemeSchemes } from '../types/index.ts';
+import { PartialThemeSchemes, ThemeSchemes } from '../types';
 export type ExtraColorOverrides = Partial<Record<'info' | 'warning' | 'success', string>>;
 /**
  * Generates a full ThemeSchemes object (light and dark modes) based on a seed color,

package/utils/generateSchemes.d.ts

@@ -1,5 +1,5 @@
-import { PartialThemeSchemes, ThemeSchemes } from '../types/index.ts';
 import { ExtraColorOverrides } from './generateMaterialColors';
+import { PartialThemeSchemes, ThemeSchemes } from '../types';
 /**
  * Generates and injects CSS custom properties for Material Design 3 theme colors.
  *

package/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './color';
+export * from './utils';
+export * from './calculateFloatingPosition';
+export * from './interactionMode';
+export * from './generateMaterialColors';
+export * from './generateSchemes';
+export * from './toasts';
+export * from './uniqueID';
+export * from './controlStyle';

package/utils/{inputhMethod.d.ts → interactionMode.d.ts}

@@ -14,4 +14,4 @@ export declare function ensureInputMethod(): void;
  *
  * @internal
  */
-export declare function getInputMethod(): "pointer" | "keyboard";
+export declare function getInputMethod(): "keyboard" | "pointer";

package/utils/toasts/ensureViewport.d.ts

@@ -0,0 +1,2 @@
+export declare const TOAST_VIEWPORT_ID = "uui-toast-viewport-root";
+export declare function ensureViewport(): void;

package/utils/toasts/index.d.ts

@@ -0,0 +1 @@
+export * from './toast';

package/utils/toasts/toast.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { SurfaceColor } from '../index';
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+export interface ToastOptions {
+    id?: string;
+    title?: string;
+    description?: string;
+    color?: SurfaceColor;
+    status?: ToastStatus;
+    icon?: ReactNode;
+    action?: ReactNode | ((id: string) => ReactNode);
+    duration?: number;
+}
+declare function show(input: string | ToastOptions): string;
+export declare const toast: typeof show & {
+    update: (id: string, partial: Partial<ToastOptions>) => void;
+    dismiss: (id: string) => void;
+    clear: () => void;
+    success: (description: string, o?: ToastOptions) => string;
+    error: (description: string, o?: ToastOptions) => string;
+    info: (description: string, o?: ToastOptions) => string;
+    warning: (description: string, o?: ToastOptions) => string;
+    promise<T>(p: Promise<T>, m: {
+        loading: string;
+        success: string | ((v: T) => string);
+        error: string | ((e: unknown) => string);
+    }): Promise<T>;
+};
+export {};

package/utils/toasts/toastStore.d.ts

@@ -0,0 +1,11 @@
+import { ToastOptions } from './toast';
+export type ToastState = Required<Pick<ToastOptions, 'id'>> & Omit<ToastOptions, 'id'>;
+export type ToastStoreSubscriber = (toasts: ToastState[]) => void;
+export declare const toastStore: {
+    subscribe(subscriber: ToastStoreSubscriber): () => void;
+    add(toast: ToastState): void;
+    update(id: string, partial: Partial<ToastOptions>): void;
+    remove(id: string): void;
+    clear(): void;
+    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,4 @@
-import { default as React, ReactNode } from 'react';
+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';
@@ -18,6 +18,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.
  *
@@ -70,7 +86,6 @@ export type ElementFont = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'h
 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 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 border size.
@@ -123,20 +138,6 @@ export declare function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback
  * @category Utils
  */
 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.
  *
@@ -150,19 +151,6 @@ export declare const uniqueID: (prefix: string) => string;
  * @category Utils
  */
 export declare function toKebabCase(str: string): string;
-/**
- * Returns the `displayName` of a React element if available.
- *
- * @param el - A React node to inspect.
- * @returns The component's display name, or `undefined` if not found.
- *
- * @remarks
- * - Works with function components, `memo()`, and `forwardRef()`.
- * - Safe for any `ReactNode` (`string`, `null`, DOM elements, fragments, etc.).
- *
- * @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

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