@ufoui/core 0.0.4 → 0.0.5

package/components/toast/toast.d.ts

@@ -0,0 +1,38 @@
+import { default as React, ReactNode } from 'react';
+import { ElementElevation, ElementShape, SurfaceColor } from '../../utils';
+import { BoxBaseProps } from '../base';
+import { ToastStatus } from '../../utils/toasts/toast';
+/**
+ * Props for Toast component.
+ *
+ * @category Toast
+ */
+export interface ToastProps extends Omit<BoxBaseProps, 'children'> {
+    /** 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;
+    /** Elevation token. Default: 3 */
+    elevation?: ElementElevation;
+    /** Status variant applied as CSS modifier class. */
+    status?: ToastStatus;
+    /** Shape token. Default: smooth */
+    shape?: ElementShape;
+}
+/**
+ * Toast overlay container.
+ *
+ * @function
+ * @param props Component props.
+ *
+ * @category Toast
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

package/components/toast/toastViewport.d.ts

@@ -0,0 +1,6 @@
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface ToastViewportProps {
+    position?: ToastPosition;
+    gap?: number;
+}
+export declare const ToastViewport: ({ position, gap, }: 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. */
+    fullWidth?: 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,31 @@
+/**
+ * Context value shared by components that rely on selection behavior.
+ *
+ * Provides state and control logic for managing single or multiple
+ * selected values.
+ *
+ * @category Contexts
+ */
+export interface SelectionContextValue {
+    /** Currently selected values. */
+    values: string[];
+    /** Selection mode: single or multiple. */
+    mode: 'single' | 'multiple';
+    /** Toggles selection state for a given value. */
+    toggle: (value: string) => void;
+    /** Sets a value directly (primarily for single mode). */
+    set: (value: string) => void;
+    /** Clears all selected values. */
+    clear: () => void;
+}
+/**
+ * SelectionContext provides access to shared selection state.
+ *
+ * Used by components such as Accordion, Tabs, RadioGroup,
+ * and similar patterns that require controlled selection logic.
+ *
+ * Returns `null` if used outside a provider.
+ *
+ * @category Contexts
+ */
+export declare const SelectionContext: import('react').Context<SelectionContextValue | null>;

package/context/themeContext.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '../types/index.ts';
-import { ThemeColor } from '../index.ts';
+import { Theme } from '../types';
+import { ThemeColor } from '../utils';
 /**
  * Provides shape for the theme context shared across the application.
  * Allows reading and updating theme configuration and resolving token values.

package/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from './useAnimate';
+export * from './useClickOutside';
+export * from './useEscapeHandler';
+export * from './useFocusState';
+export * from './useFocusVisible';
+export * from './useResizeObserver';
+export * from './useSelection';
+export * from './useTheme';

package/hooks/useAnimate.d.ts

@@ -10,8 +10,8 @@ export interface UseAnimateOptions {
     t2?: number;
     /** Enables one-shot animation behavior. */
     oneShot?: boolean;
-    /** One-time start command executed on mount. */
-    action?: 'idle' | 'open' | 'close';
+    /** Initial phase on mount. */
+    initial?: 'idle' | 'open' | 'closed';
 }
 /**
  * Result returned by the useAnimate hook.

package/hooks/useResizeObserver.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+/**
+ * Size information reported by ResizeObserver.
+ *
+ * @category Hooks
+ */
+export interface ObservedElementSize {
+    /** Element width in pixels. */
+    width: number;
+    /** Element height in pixels. */
+    height: number;
+}
+/**
+ * Observes a single DOM element using ResizeObserver
+ * and invokes a callback when its content box size changes.
+ *
+ * Does not trigger component re-render.
+ *
+ * @function
+ * @param ref Reference to the observed HTMLElement.
+ * @param onResize Called when size changes.
+ * @param enabled Enables or disables observation. Default: true.
+ *
+ * @category Hooks
+ */
+export declare function useResizeObserver<T extends HTMLElement>(ref: RefObject<T>, onResize: (size: ObservedElementSize) => void, enabled?: boolean): void;

package/hooks/useSelection.d.ts

@@ -0,0 +1,13 @@
+import { SelectionContextValue } from '../context/selectionContext';
+/**
+ * Hook to access the current selection context.
+ *
+ * Must be used within a component that provides SelectionContext.
+ * If used outside, it will throw an error.
+ *
+ * @throws Error if the context is unavailable.
+ * @returns The current SelectionContextValue.
+ *
+ * @category Hooks
+ */
+export declare function useSelection(): SelectionContextValue;