@ufoui/core 0.0.4 → 0.0.12

package/components/menu/menu.d.ts

@@ -1,8 +1,6 @@
 import { default as React, HTMLAttributes, ReactNode, RefObject } from 'react';
-import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect } from '../../utils/utils.ts';
-import { MotionAnimation, MotionStyle } from '../../types/index.ts';
-import { BorderColor, SurfaceColor } from '../../utils/color';
-import { ElementFloatingMode } from '../../utils/calculateFloatingPosition';
+import { MotionAnimation, MotionStyle } from '../../types';
+import { BorderColor, ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFloatingMode, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
 /**
  * Visual style preset for the Menu component.
  *

package/components/menu/menu.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactElement } from 'react';
-import { MenuInternalProps, MenuProps } from '../../index.ts';
+import { MenuInternalProps, MenuProps } from './menu';
 export declare const IS_MENU: unique symbol;
 /**
  * Type guard that checks whether a React node is a Menu component.

package/components/menuItem/menuItem.d.ts

@@ -1,7 +1,6 @@
 import { default as React, HTMLProps, ReactNode } from 'react';
-import { ElementDensity, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect } from '../../utils/utils.ts';
-import { MenuVariant } from '../../index.ts';
-import { SurfaceColor } from '../../utils/color';
+import { ElementDensity, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
+import { MenuVariant } from '../menu/menu';
 /**
  * Visual variant of a MenuItem.
  *

package/components/menuItem/menuItem.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactElement } from 'react';
-import { MenuItemInternalProps, MenuItemProps } from '../../index.ts';
+import { MenuItemInternalProps, MenuItemProps } from './menuItem';
 export declare const IS_MENU_ITEM: unique symbol;
 /**
  * Type guard that checks whether a React node is a MenuItem component.

package/components/option/option.d.ts

@@ -1,5 +1,5 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { MenuItemInternalProps, MenuItemProps } from '../../index.ts';
+import { MenuItemInternalProps, MenuItemProps } from '../menuItem/menuItem';
 export interface OptionProps extends Omit<MenuItemProps, 'type' | 'checked'> {
     selected?: boolean;
 }

package/components/option/option.guards.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactElement } from 'react';
 import { OptionProps } from './option';
-import { MenuItemInternalProps } from '../../index.ts';
+import { MenuItemInternalProps } from '../menuItem/menuItem';
 export declare const IS_OPTION: unique symbol;
 /**
  * Type guard that checks whether a React node is an Option component.

package/components/progress/progress.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { ElementSize, SemanticColor } from '../../utils';
+import { BoxBaseProps } from '../base';
+/**
+ * Props for {@link Progress}.
+ *
+ * @category Progress
+ */
+export interface ProgressProps extends Omit<BoxBaseProps, 'children'> {
+    variant?: 'linear' | 'circular';
+    value?: number;
+    min?: number;
+    max?: number;
+    color?: SemanticColor;
+    size?: ElementSize;
+    thickness?: number;
+}
+/**
+ * Visual progress indicator.
+ *
+ * @function
+ *
+ * @param props - Component props.
+ *
+ * @category Progress
+ */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxBaseProps } from '../../index.ts';
+import { CheckboxBaseProps } from '../base/checkboxBase';
 /**
  * Props for the Radio component.
  *

package/components/radiogroup/radioGroup.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { FieldsetProps } from '../../index.ts';
+import { FieldsetProps } from '../fieldset/fieldset';
 /**
  * Props for the RadioGroup component.
  *

package/components/rating/rating.d.ts

@@ -0,0 +1,68 @@
+import { default as React, ReactNode } from 'react';
+import { ElementAlign, ElementDensity, ElementFocusEffect, ElementFont, ElementSize, ElementTextPlacement, SurfaceColor } from '../../utils';
+/**
+ * Props for the Rating component.
+ *
+ * Numeric rating control rendered as a star slider with optional label and description.
+ *
+ * @category Rating
+ */
+export interface RatingProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'size'> {
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Color applied to the filled icons. */
+    color?: SurfaceColor;
+    /** Initial rating value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Visual density of the control. */
+    density?: ElementDensity;
+    /** Supporting text displayed below the control. */
+    description?: string;
+    /** Disables interaction with the control. */
+    disabled?: boolean;
+    /** Icon used for the empty rating state. */
+    emptyIcon?: ReactNode;
+    /** Error message displayed below the control. */
+    error?: string;
+    /** Enables filled visual style for icons. */
+    filled?: boolean;
+    /** Visual effects applied when the control receives focus. */
+    focusEffects?: ElementFocusEffect[];
+    /** Font applied to the label text. */
+    font?: ElementFont;
+    /** Icon used for the filled rating state. */
+    icon?: ReactNode;
+    /** DOM id used for accessibility attributes. */
+    id?: string;
+    /** Label text displayed next to the control. */
+    label?: string;
+    /** Maximum rating value. */
+    max?: number;
+    /** Called when the rating value changes. */
+    onChange?: (value: number) => void;
+    /** Prevents value changes while keeping the control focusable. */
+    readOnly?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** Visual size of the rating icons. */
+    size?: ElementSize;
+    /** Step size used for keyboard and pointer interaction. */
+    step?: number;
+    /** Placement of label and description relative to the control. */
+    textPlacement?: ElementTextPlacement;
+    /** Tooltip alignment relative to the control. */
+    tooltipAlign?: ElementAlign;
+    /** Current rating value when used as a controlled component. */
+    value?: number;
+}
+/**
+ * Star rating input rendered as an interactive slider.
+ *
+ * Supports mouse, keyboard and form integration through a hidden input.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Rating
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;

package/components/select/select.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldBaseProps } from '../../index.ts';
+import { FieldBaseProps } from '../base/fieldBase';
 /**
  * Props for {@link Select}.
  *

package/components/slider/slider.d.ts

@@ -0,0 +1,11 @@
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/switch/switch.d.ts

@@ -1,6 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../utils/utils.ts';
-import { BorderColor, SemanticColor, SurfaceColor } from '../../utils/color';
+import { BorderColor, ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor } from '../../utils';
 /**
  * Props for the Switch component.
  *
@@ -27,10 +26,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     density?: ElementDensity;
     /** Supporting text displayed below the label. */
     description?: string;
-    /** Text color override for the description. */
-    descriptionColor?: SurfaceColor;
-    /** Font token applied to the description text. */
-    descriptionFont?: ElementFont;
     /** Elevation level of the control surface. */
     elevation?: ElementElevation;
     /** Error message text. Overrides description when present. */
@@ -51,8 +46,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     id?: string;
     /** Text label associated with the control. */
     label?: string;
-    /** Text color override for the label. */
-    labelColor?: SurfaceColor;
     /** Name attribute forwarded to the input element. */
     name?: string;
     /** Change event handler. */
@@ -67,8 +60,6 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     shape?: ElementShape;
     /** Size of the control. */
     size?: ElementSize;
-    /** Text color override for label and content. */
-    textColor?: SurfaceColor;
     /** Layout of text relative to the control. */
     textPlacement?: ElementTextPlacement;
     /** Tooltip alignment relative to the control. */

package/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tabs';
+export * from './tab';

package/components/tabs/tab.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { IS_TAB } from './tab.guards';
+/**
+ * Props for {@link Tab}.
+ *
+ * @category Tabs
+ */
+export interface TabProps {
+    /** Unique tab value. */
+    value: string;
+    /** Tab label. */
+    label: ReactNode;
+    /** Tab panel content. */
+    children: ReactNode;
+}
+/**
+ * Tab component containing both trigger and panel.
+ *
+ * Displays its content when selected.
+ *
+ * @function
+ *
+ * @category Tabs
+ */
+export declare const Tab: {
+    ({ value, label, children }: TabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    /**
+     * Marks this component as a Tab for runtime type guards.
+     *
+     * Used internally to identify Tab elements via a shared Symbol.
+     * Not part of the public API.
+     *
+     * @internal
+     */
+    [IS_TAB]: boolean;
+};

package/components/tabs/tab.guards.d.ts

@@ -0,0 +1,15 @@
+import { default as React, ReactElement } from 'react';
+import { TabProps } from './tab';
+export declare const IS_TAB: unique symbol;
+/**
+ * Type guard that checks whether a React node is a Tab component.
+ *
+ * Identifies Tab elements by the internal {@link IS_TAB} symbol
+ * attached to the component type.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is a Tab element.
+ *
+ * @internal
+ */
+export declare function isTab(el: React.ReactNode): el is ReactElement<TabProps>;

package/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base/boxBase';
+export interface TabsProps extends BoxBaseProps {
+    defaultValue: string;
+    children: ReactNode;
+}
+export declare const Tabs: ({ defaultValue, children, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/components/toast/index.d.ts

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

package/components/toast/toast.d.ts

@@ -0,0 +1,52 @@
+import { default as React, ReactNode } from 'react';
+import { ElementElevation, ElementShape, SurfaceColor, ToastStatus } from '../../utils';
+import { BoxBaseProps } from '../base';
+import { MotionAnimation, MotionStyle } from '../../types';
+/**
+ * Props for Toast component.
+ *
+ * @category Toast
+ */
+export interface ToastProps extends Omit<BoxBaseProps, 'children'> {
+    /** Toast identifier used for lifecycle control. */
+    id: string;
+    /** Primary heading text. */
+    title?: string;
+    /** Secondary supporting text. */
+    description?: string;
+    /** Surface color token overriding default background and text. */
+    color?: SurfaceColor;
+    /** Leading visual element. */
+    icon?: ReactNode;
+    /** Action element rendered below content. */
+    action?: ReactNode;
+    /** Full content override replacing internal layout. */
+    content?: ReactNode;
+    /** Time in milliseconds before the toast is automatically dismissed. */
+    timeout?: number;
+    /** Elevation token. Default: 3 */
+    elevation?: ElementElevation;
+    /** Status variant applied as CSS modifier class. */
+    status?: ToastStatus;
+    /** Shape token. Default: smooth */
+    shape?: ElementShape;
+    /** Animation preset used by internal motion elements. */
+    animation?: MotionAnimation;
+    /** Animation duration in milliseconds. */
+    duration?: number;
+    /** Motion style applied to animated elements. */
+    motionStyle?: MotionStyle;
+    leaving?: boolean;
+    onExitComplete?: (id: string) => void;
+}
+/**
+ * Toast notification container.
+ *
+ * Handles auto-dismiss lifecycle using the timeout property.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Toast
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

package/components/toast/toastViewport.d.ts

@@ -0,0 +1,7 @@
+export type ToastPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+export interface ToastViewportProps {
+    position?: ToastPosition;
+    timeout?: number;
+    limit?: number;
+}
+export declare const ToastViewport: ({ position, timeout, limit }: ToastViewportProps) => import("react/jsx-runtime").JSX.Element;

package/components/toggleButton/toggleButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 export interface ToggleButtonProps extends Omit<ButtonBaseProps, 'filled' | 'controlClass' | 'iconClass'> {
     selected?: boolean;
     iconPosition?: 'start' | 'end';

package/components/toolbar/toolbar.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { ElementDensity, ElementElevation, ElementOrientation, ElementShape, SurfaceColor } from '../../utils';
+import { BoxBaseProps } from '../base/boxBase';
+/**
+ * Props for {@link Toolbar}.
+ * Extends {@link BoxBaseProps} except for `component` and `elementClass`.
+ *
+ * @category Toolbar
+ */
+export interface ToolbarProps extends Omit<BoxBaseProps, 'component' | 'elementClass' | 'direction' | 'row' | 'col'> {
+    /** Visual variant of the toolbar. */
+    variant?: 'docked' | 'floating';
+    /** Surface color token applied to container. */
+    color?: SurfaceColor;
+    /** Elevation token. */
+    elevation?: ElementElevation;
+    /** Shape token. */
+    shape?: ElementShape;
+    /** Density token. */
+    density?: ElementDensity;
+    /** Makes toolbar full width. */
+    wFull?: boolean;
+    /** Positions floating toolbar. */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    /** Makes floating toolbar fixed. */
+    fixed?: boolean;
+    /** Main content area. */
+    children?: React.ReactNode;
+    /** Adds divider line below toolbar. */
+    divider?: boolean;
+    orientation?: ElementOrientation;
+    /** Additional root class name. */
+    className?: string;
+}
+/**
+ * Expressive contextual action container based on MD3 Toolbar.
+ *
+ * Supports docked and floating variants.
+ *
+ * @function
+ * @example
+ * <Toolbar
+ *   variant="floating"
+ * >
+ *   <IconButton />
+ *   <IconButton />
+ * </Toolbar>
+ *
+ * @category Toolbar
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/components/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
-import { ElementAlign } from '../../utils/utils.ts';
+import { ElementAlign } from '../../utils';
 export interface TooltipProps extends HTMLProps<HTMLDivElement> {
     title: string;
     children?: ReactNode;

package/components/typography/h1.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H1.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H1Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H1 semantic heading.
+ * Renders native h1 element with default headlineLarge font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H1: import('react').ForwardRefExoticComponent<H1Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/h2.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H2.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H2Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H2 semantic heading.
+ * Renders native h2 element with default headlineMedium font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H2: import('react').ForwardRefExoticComponent<H2Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/h3.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H3.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H3Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H3 semantic heading.
+ * Renders native h3 element with default headlineSmall font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H3: import('react').ForwardRefExoticComponent<H3Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/h4.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H4.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H4Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H4 semantic heading.
+ * Renders native h4 element with default titleLarge font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H4: import('react').ForwardRefExoticComponent<H4Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/h5.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H5.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H5Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H5 semantic heading.
+ * Renders native h5 element with default titleMedium font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H5: import('react').ForwardRefExoticComponent<H5Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/h6.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for H6.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type H6Props = Omit<TextBaseProps, 'component'>;
+/**
+ * H6 semantic heading.
+ * Renders native h6 element with default titleSmall font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const H6: import('react').ForwardRefExoticComponent<H6Props & import('react').RefAttributes<HTMLElement>>;

package/components/typography/index.d.ts

@@ -0,0 +1,9 @@
+export * from './h1';
+export * from './h2';
+export * from './h3';
+export * from './h4';
+export * from './h5';
+export * from './h6';
+export * from './p';
+export * from './span';
+export * from './label';

package/components/typography/label.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for Label.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type LabelProps = Omit<TextBaseProps, 'component'>;
+/**
+ * Label semantic text.
+ * Renders native label element with default labelLarge font.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLElement>>;

package/components/typography/p.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for P.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type PProps = Omit<TextBaseProps, 'component'>;
+/**
+ * P semantic paragraph.
+ * Renders native p element.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const P: import('react').ForwardRefExoticComponent<PProps & import('react').RefAttributes<HTMLElement>>;

package/components/typography/span.d.ts

@@ -0,0 +1,18 @@
+import { TextBaseProps } from '../base/textBase';
+/**
+ * Props for Span.
+ * Extends TextBaseProps except component.
+ *
+ * @category Typography
+ */
+export type SpanProps = Omit<TextBaseProps, 'component'>;
+/**
+ * Span semantic inline text wrapper.
+ * Renders native span element.
+ *
+ * @function
+ * @param props - Typography props.
+ *
+ * @category Typography
+ */
+export declare const Span: import('react').ForwardRefExoticComponent<SpanProps & import('react').RefAttributes<HTMLElement>>;

package/context/index.d.ts

@@ -0,0 +1,4 @@
+export * from './radioGroupContext';
+export * from './fieldsetContext';
+export * from './selectionContext';
+export * from './themeContext';

package/context/selectionContext.d.ts

@@ -0,0 +1,32 @@
+import { useRovingFocus } from '../hooks/useRovingFocus';
+/**
+ * Context value shared by components that rely on selection behavior.
+ *
+ * @typeParam T - Optional configuration object provided by the parent component.
+ *
+ * @category Contexts
+ */
+export interface SelectionContextValue<T = unknown> {
+    /** Clears all selected values. */
+    clear: () => void;
+    /** Optional configuration object passed from the parent component. */
+    config?: T;
+    /** Selection type: single or multiple. */
+    type: 'single' | 'multiple';
+    /** Optional roving focus controller for keyboard navigation between items. */
+    roving?: ReturnType<typeof useRovingFocus>;
+    /** Sets a value directly. */
+    set: (value: string) => void;
+    /** Toggles selection state for a given value. */
+    toggle: (value: string) => void;
+    /** Currently selected values. */
+    values: string[];
+}
+/**
+ * React context that exposes shared selection state and optional configuration.
+ *
+ * Returns `null` when accessed outside of a provider.
+ *
+ * @category Contexts
+ */
+export declare const SelectionContext: import('react').Context<SelectionContextValue<unknown> | null>;