@cerberus-design/react
Version:
The Cerberus Design React component library.
53 lines (52 loc) • 2.6 kB
text/typescript
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>>;
}