@cerberus-design/react/dist/system/primitive-factory.d.ts

The Cerberus Design React component library.

import { RecipeVariantRecord } from 'styled-system/types';
import { ElementType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
import { CerberusPrimitiveEl, CerberusPrimitiveProps, CerberusPrimitiveRecipe, WithRecipeOptions } from './types';
import { ExtractProps } from '../types';
/**
 * This module contains a factory for creating Cerberus primitives.
 * @module @cerberus/core/system/factory
 */
export declare class CerberusPrimitive {
    recipe: CerberusPrimitiveRecipe | null;
    constructor(recipe?: CerberusPrimitiveRecipe);
    private hasStyles;
    private setupStyledComponent;
    /**
     * Creates a Cerberus component with bare features and no recipe.
     * @param Component - The React component to enhance with Cerberus features.
     * Can be a string or a component reference.
     * @returns A new React component that applies Cerberus features to the
     * original component.
     *
     * @example
     * ```ts
     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
     * const Button = withNoRecipe('button')
     * ```
     */
    withNoRecipe: <T extends ElementType>(Component: T | CerberusPrimitiveEl<T>, options?: WithRecipeOptions) => {
        (props: CerberusPrimitiveProps<ExtractProps<T>>): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    /**
     * Creates a Cerberus component with the given recipe.
     * @param Component - The React component to enhance with the recipe.
     * @param options - Options for the recipe.
     * @returns A new React component that applies the recipe to the original
     * component.
     */
    withRecipe: <T extends ElementType>(Component: T, options?: WithRecipeOptions) => ForwardRefExoticComponent< PropsWithoutRef<CerberusPrimitiveProps<ExtractProps<T>>> & RefAttributes<unknown>>;
    /**
     * Creates a Cerberus component with a slot recipe applied.
     * @param Component - The React component to enhance with Cerberus features.
     * @param recipe - The slot recipe to apply to the component.
     * @returns A new React component that applies Cerberus features and the
     * specified slot recipe to the original component.
     * @example
     * ```typescript
     * const { withSlotRecipe } = createCerberusPrimitive(field)
     * const Field = withSlotRecipe(RawField, field)
     * ```
     */
    withSlotRecipe: <T extends ElementType>(Component: T, slot: keyof RecipeVariantRecord, options?: WithRecipeOptions) => ForwardRefExoticComponent< PropsWithoutRef<CerberusPrimitiveProps<ExtractProps<T>>> & RefAttributes<unknown>>;
}