@ufoui/core 0.0.5 → 0.0.40

package/internal/controlGrid/controlGrid.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { ElementTextPlacement } from '../../utils';
+/**
+ * Props for the ControlGrid component.
+ *
+ * Layout container for form control, label and description.
+ *
+ * @category Slot
+ */
+export interface ControlGridProps {
+    /** Main control element such as checkbox, switch or slider. */
+    control?: ReactNode;
+    /** Label displayed next to the control. */
+    label?: ReactNode;
+    /** Supporting text such as description or error message. */
+    description?: ReactNode;
+    /** Placement of label relative to the control. */
+    textPlacement: ElementTextPlacement;
+    /** Additional root class name. */
+    className?: string;
+    /** Spans description across all grid columns. */
+    spanDesc?: boolean;
+}
+/**
+ * Layout helper that arranges control, label and description.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const ControlGrid: import('react').ForwardRefExoticComponent<ControlGridProps & import('react').RefAttributes<HTMLDivElement>>;

package/internal/controlLabel/controlLabel.d.ts

@@ -0,0 +1,31 @@
+import { ElementType, ReactNode, RefObject } from 'react';
+import { ElementFont } from '../../utils';
+export interface ControlLabelProps {
+    /** Label content. */
+    label?: ReactNode;
+    /** ID of the associated control element. Used when tag is 'label'. */
+    htmlFor?: string;
+    /** DOM id applied to the label element. */
+    id?: string;
+    /** Reference to a control element that should receive focus when the label is clicked. */
+    focusRef?: RefObject<HTMLElement>;
+    /** Displays a required indicator next to the label. */
+    required?: boolean;
+    /** Font applied to the label text. */
+    font?: ElementFont;
+    /** HTML tag used to render the label element. Default: 'label'. */
+    tag?: ElementType;
+}
+/**
+ * Renders a label for form controls.
+ *
+ * Supports both native label behaviour and ARIA labeling for custom controls.
+ * When tag is 'label', htmlFor associates the label with a form element.
+ * When focusRef is provided, clicking the label focuses the referenced control.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const ControlLabel: ({ label, htmlFor, id, required, font, focusRef, tag: Tag, }: ControlLabelProps) => import("react/jsx-runtime").JSX.Element | null;

package/internal/description/description.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface DescriptionProps extends HTMLAttributes<HTMLElement> {
+    /** Supporting description text. */
+    description?: ReactNode;
+    /** Error message text. Overrides description when present. */
+    error?: ReactNode;
+}
+/**
+ * Renders supporting text such as description or error message.
+ *
+ * Error message takes precedence over description.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const Description: ({ description, error, ...rest }: DescriptionProps) => import("react/jsx-runtime").JSX.Element | null;

package/internal/icon/icon.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SurfaceColor } from '../../utils';
+/**
+ * Props for the {@link Icon} wrapper.
+ *
+ * @category Internal components
+ */
+export interface IconProps {
+    /** Icon graphic or element rendered inside the wrapper. */
+    icon: ReactNode;
+    /** Additional class names merged with the base `uui-icon` token. */
+    className?: string;
+    /** Theme surface token as CSS `color` (for `currentColor` SVG). */
+    color?: SurfaceColor;
+}
+/**
+ * Renders icon content with the shared `uui-icon` layout class.
+ *
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Internal components
+ */
+export declare const Icon: {
+    ({ icon, className, color }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/internal/index.d.ts

@@ -0,0 +1,7 @@
+export * from './inlineTooltip';
+export * from './slots/slot';
+export * from './stateLayer/stateLayer';
+export * from './controlGrid/controlGrid';
+export * from './controlLabel/controlLabel';
+export * from './description/description';
+export * from './icon/icon';

package/internal/inlineTooltip/index.d.ts

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

package/internal/inlineTooltip/inlineTooltipManager.d.ts

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

package/internal/slots/slot.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Slot component.
+ *
+ * @category Slot
+ */
+interface SlotProps {
+    /** Element rendered before the content. */
+    start?: ReactNode;
+    /** Element rendered after the content. */
+    end?: ReactNode;
+    /** Main slot content. */
+    content: ReactNode;
+    /** Root class name. */
+    className?: string;
+}
+/**
+ * Layout helper that renders start, content, and end regions.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const Slot: ({ start, end, content, className }: SlotProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Slot wrapper for leading content.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const Leading: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Slot wrapper for trailing content.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Slot
+ */
+export declare const Trailing: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/internal/stateLayer/stateLayer.d.ts

@@ -0,0 +1,33 @@
+import { SurfaceColor } from '../../utils';
+/**
+ * Props for StateLayer component.
+ *
+ * @category Internal components
+ */
+export interface StateLayerProps {
+    /** Background color token. */
+    color?: SurfaceColor;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * StateLayer component.
+ *
+ * Renders a visual state layer used for hover, focus, pressed and selected effects.
+ *
+ * @param color Background color token.
+ * @param className Additional class name.
+ *
+ * @function
+ *
+ * @example
+ * <Component>
+ *   <StateLayer />
+ * </Component>
+ *
+ * @example
+ * <StateLayer color="primary" />
+ *
+ * @category Internal components
+ */
+export declare const StateLayer: ({ color, className }: StateLayerProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ufoui/core",
-  "version": "0.0.5",
+  "version": "0.0.40",
   "description": "Lightweight Material Design 3 UI components for React",
   "type": "module",
   "main": "./index.mjs",
@@ -14,10 +14,19 @@
   },
   "keywords": [
     "react",
+    "react-components",
     "components",
+    "material-design",
+    "material-design-3",
+    "md3",
+    "material-you",
     "ui",
+    "ui-kit",
+    "component-library",
+    "typescript",
+    "esm",
     "ufoui",
-    "core"
+    "ufo-ui"
   ],
   "peerDependencies": {
     "react": "^18.0.0",
@@ -35,4 +44,4 @@
     "./style.css": "./index.css",
     "./style": "./index.css"
   }
-}
+}

package/types/dialog.d.ts

@@ -0,0 +1,37 @@
+import { MotionAnimation } from './motion';
+/**
+ * Layout mode for the DialogBase component.
+ *
+ * @remarks
+ * Determines dialog placement and sizing:
+ * - `'basic'` - centered dialog
+ * - `'fullscreen'` - full viewport
+ * - `'dockLeft'` / `'dockRight'` / `'dockTop'` / `'dockBottom'` -  edge-docked panels
+ *
+ * @category Dialog
+ */
+export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
+/**
+ * Animation preset for open and close transitions.
+ *
+ * @remarks
+ * Use `'none'` to disable motion. Otherwise uses a {@link MotionAnimation} value.
+ * When omitted, a default animation is chosen for the current layout mode.
+ *
+ * @category Dialog
+ */
+export type DialogAnimation = 'none' | MotionAnimation;
+/**
+ * Icon slot within dialog layout.
+ *
+ * Defines where the icon is rendered inside the dialog structure.
+ *
+ * Slots:
+ * - **leading** – inline with the title
+ * - **top** – placed above the title in the header
+ * - **contentLeft** – placed on the left side of the content area
+ * - **contentRight** – placed on the right side of the content area
+ *
+ * @category Dialog
+ */
+export type DialogIconSlot = 'leading' | 'top' | 'contentLeft' | 'contentRight';

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './theme';
 export * from './motion';
+export * from './dialog';

package/types/motion.d.ts

@@ -2,9 +2,9 @@ export type MotionAnimation = 'fade' | 'fadeBlur' | 'scale' | 'scaleBlur' | 'pop
 export declare const motionClassMap: Record<MotionAnimation, string>;
 /**
  * Returns CSS class name for given motion animation.
- * Returns empty string when animation is not defined.
+ * Returns empty string when animation is not defined or set to 'none'.
  */
-export declare function getAnimationClass(animation?: MotionAnimation): string;
+export declare function getAnimationClass(animation?: MotionAnimation | 'none'): string;
 /**
  * Returns list of available motion animation names.
  */

package/types/theme.d.ts

@@ -166,12 +166,8 @@ export interface ThemeScheme {
     surfaceDim: string;
     /** Pure black color used for contrast or background. */
     black: string;
-    /** Foreground color displayed on black (typically white). */
-    onBlack: string;
     /** Pure white color used for contrast or foreground. */
     white: string;
-    /** Foreground color displayed on white (typically black). */
-    onWhite: string;
     /** Allows for additional custom tokens. */
     [key: string]: string;
 }
@@ -218,29 +214,3 @@ export interface Theme {
     /** Collection of all available color schemes. */
     schemes: ThemeSchemes;
 }
-/**
- * Core subset of theme colors representing primary semantic intents
- * (e.g., primary, error, success).
- * Commonly referenced across UI components.
- *
- * Serves as the base for {@link SemanticColor} and {@link ThemeSchemeKeys}.
- *
- * @category Theme
- */
-export declare const ThemeSemanticColorKeys: readonly ["primary", "secondary", "tertiary", "warning", "info", "success", "error"];
-/**
- * Extended set of semantic theme colors.
- * @category Theme
- */
-export declare const ThemeExtendedColorKeys: readonly ["primary", "secondary", "tertiary", "warning", "info", "success", "error", "primaryContainer", "primaryFixed", "primaryFixedDim", "secondaryContainer", "secondaryFixed", "secondaryFixedDim", "tertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "warningContainer", "warningFixed", "warningFixedDim", "infoContainer", "infoFixed", "infoFixedDim", "successContainer", "successFixed", "successFixedDim", "errorContainer", "errorFixed", "errorFixedDim", "black", "white"];
-/**
- * Surface-level theme colors including extended and neutral tones.
- * @category Theme
- */
-export declare const ThemeSurfaceColorKeys: readonly ["primary", "secondary", "tertiary", "warning", "info", "success", "error", "primaryContainer", "primaryFixed", "primaryFixedDim", "secondaryContainer", "secondaryFixed", "secondaryFixedDim", "tertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "warningContainer", "warningFixed", "warningFixedDim", "infoContainer", "infoFixed", "infoFixedDim", "successContainer", "successFixed", "successFixedDim", "errorContainer", "errorFixed", "errorFixedDim", "black", "white", "outline", "outlineVariant", "surface", "surfaceVariant", "background", "inverseSurface", "inversePrimary", "surfaceContainerHighest", "surfaceContainerHigh", "surfaceContainer", "surfaceContainerLow", "surfaceContainerLowest", "surfaceBright", "surfaceDim"];
-/**
- * Complete set of color tokens defined in {@link ThemeScheme}.
- * Combines all semantic, extended, and surface color roles for full theme coverage.
- * @category Theme
- */
-export declare const ThemeSchemeKeys: readonly ["primary", "secondary", "tertiary", "warning", "info", "success", "error", "primaryContainer", "primaryFixed", "primaryFixedDim", "secondaryContainer", "secondaryFixed", "secondaryFixedDim", "tertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "warningContainer", "warningFixed", "warningFixedDim", "infoContainer", "infoFixed", "infoFixedDim", "successContainer", "successFixed", "successFixedDim", "errorContainer", "errorFixed", "errorFixedDim", "black", "white", "outline", "outlineVariant", "surface", "surfaceVariant", "background", "inverseSurface", "inversePrimary", "surfaceContainerHighest", "surfaceContainerHigh", "surfaceContainer", "surfaceContainerLow", "surfaceContainerLowest", "surfaceBright", "surfaceDim", "onPrimary", "onPrimaryContainer", "onPrimaryFixed", "onPrimaryFixedVariant", "onSecondary", "onSecondaryContainer", "onSecondaryFixed", "onSecondaryFixedVariant", "onTertiary", "onTertiaryContainer", "onTertiaryFixed", "onTertiaryFixedVariant", "onWarning", "onWarningContainer", "onWarningFixed", "onWarningFixedVariant", "onInfo", "onInfoContainer", "onInfoFixed", "onInfoFixedVariant", "onSuccess", "onSuccessContainer", "onSuccessFixed", "onSuccessFixedVariant", "onError", "onErrorContainer", "onErrorFixed", "onErrorFixedVariant", "onSurface", "onSurfaceVariant", "onBackground", "inverseOnSurface", "inversePrimary", "shadow", "surfaceTint", "scrim"];

package/utils/applyThemeTokens.d.ts

@@ -0,0 +1,10 @@
+import { ThemeSchemes } from '../types';
+/**
+ * Applies resolved theme tokens as CSS custom properties.
+ *
+ * @param schemes - Fully resolved theme schemes.
+ * @returns The same input object for convenient chaining.
+ *
+ * @category Theme
+ */
+export declare function applyThemeTokens(schemes: ThemeSchemes): ThemeSchemes;

package/utils/calculateFloatingPosition.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { ElementAlign } from './utils';
+import { ElementPlacement } from './utils';
 /**
  * Floating behavior presets used by `calculateFloatingPosition()`.
  *
@@ -23,7 +23,7 @@ export type ElementFloatingMode = 'tooltip' | 'dropdown' | 'menu' | 'submenu';
  * @category Utils
  */
 export interface CalculateFloatingPositionOptions {
-    placement?: ElementAlign;
+    placement?: ElementPlacement;
     offset?: number;
     mode?: ElementFloatingMode;
 }
@@ -39,7 +39,7 @@ export interface CalculateFloatingPositionOptions {
 export interface ElementFloatingPosition {
     x: number;
     y: number;
-    placement: ElementAlign;
+    placement: ElementPlacement;
 }
 /**
  * Computes the optimal on-screen position for tooltips, dropdowns, menus and submenus.