@meonode/ui/dist/types/hoc/component.hoc.d.ts

A structured approach to component composition, direct CSS-first prop styling, built-in theming, smart prop handling (including raw property pass-through), and dynamic children.

import type { Children, ComponentNode, DependencyList, HasCSSCompatibleStyleProp, ThemedCSSProperties } from '../types/node.type.js';
import type { ReactElement } from 'react';
/**
 * Props definition for components wrapped using the `Component` higher-order function.
 *
 * This type adapts based on whether the underlying component defines its own props:
 *
 * - If `TProps` is `undefined`, only `children` can be passed.
 * - If `TProps` is defined, the component will accept:
 *   - The full prop shape `TProps`
 *   - Optional `props` to override part of `TProps` (excluding `children`)
 *   - Optional `children`
 *
 * If the component supports inline styles (determined via `HasCSSCompatibleStyleProp`), the props also allow `CSSProperties`.
 */
export type ComponentNodeProps<TProps> = TProps extends undefined ? Partial<{
    children: Children;
}> : TProps & (HasCSSCompatibleStyleProp<TProps> extends true ? ThemedCSSProperties : object) & Partial<{
    props: Partial<TProps> & {
        children?: never;
    };
    children: Children;
}>;
/**
 * Creates a component from a function that uses no custom props.
 * @template TProps Must be `undefined`
 * @param component A function that returns a MeoNode `ComponentNode` and only uses basic props like `children`.
 * @returns A React-compatible component that can accept `children`.
 * @example
 * ```ts
 * const Title = Component((props) => {
 *   return H1(props.children)
 * })
 *
 * Title({ children: 'Hello' })
 * ```
 */
export declare function Component<TProps extends undefined>(component: (props: ComponentNodeProps<TProps>) => ComponentNode): (props?: ComponentNodeProps<TProps>, deps?: DependencyList) => ReactElement | Promise<Awaited<ReactElement>>;
/**
 * Creates a component from a function that uses a defined props interface.
 * @template TProps Props interface expected by the component.
 * @param component A function that returns a MeoNode `ComponentNode` using props of type `TProps`.
 * @returns A React-compatible component that supports full prop shape and `children`/`props` overrides.
 * @example
 * ```ts
 * interface ButtonProps {
 *   label: string
 *   onClick: () => void
 * }
 *
 * const Button = Component<ButtonProps>((props) => {
 *   return Div({
 *     children: props.label,
 *     onClick: props.onClick,
 *   })
 * })
 *
 * Button({ label: 'Click me', onClick: () => alert('clicked')})
 * ```
 */
export declare function Component<TProps extends Record<string, any>>(component: (props: ComponentNodeProps<TProps>) => ComponentNode): (props: ComponentNodeProps<TProps>, deps?: DependencyList) => ReactElement | Promise<Awaited<ReactElement>>;
//# sourceMappingURL=component.hoc.d.ts.map