react-tvcx/dist/index.d.ts

A library providing functions to help users create a reusable component system for their projects using React, Tailwind CSS, and TypeScript.

import * as tailwind_variants from 'tailwind-variants';
import { VariantProps, tv } from 'tailwind-variants';
import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
import * as tailwind_merge from 'tailwind-merge';
import { ClassValue } from 'clsx';
import React from 'react';

/**
 * Combines multiple class names using clsx and tailwind-merge
 * @param inputs - Class names to be combined
 * @returns Merged class names string
 */
declare function cn(...inputs: ClassValue[]): string;
type As<BaseProps = any> = React.ElementType<BaseProps>;
type PropsWithAs<ComponentType extends As, ComponentProps> = ComponentProps & Omit<React.ComponentPropsWithRef<ComponentType>, 'as' | keyof ComponentProps> & {
    as?: ComponentType;
};
type PropsFromAs<ComponentType extends As, ComponentProps> = (PropsWithAs<ComponentType, ComponentProps> & {
    as: ComponentType;
}) & PropsWithAs<ComponentType, ComponentProps>;
interface ForwardRefWithAsRenderFunction<DefaultComponentType extends As, ComponentProps = {}> {
    (props: React.PropsWithChildren<PropsFromAs<DefaultComponentType, ComponentProps>>, ref: ((instance: (DefaultComponentType extends keyof ElementTagNameMap ? ElementTagNameMap[DefaultComponentType] : any) | null) => void) | React.MutableRefObject<(DefaultComponentType extends keyof ElementTagNameMap ? ElementTagNameMap[DefaultComponentType] : any) | null> | null): React.ReactElement | null;
    displayName?: string;
    defaultProps?: never;
    propTypes?: never;
}
interface ExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> {
    (props: PropsWithAs<DefaultComponentType, ComponentProps>): React.ReactElement | null;
    <ComponentType extends As>(props: PropsWithAs<ComponentType, ComponentProps> & {
        as: ComponentType;
    }): React.ReactElement | null;
    readonly $$typeof: symbol;
}
interface NamedExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends ExoticComponentWithAs<DefaultComponentType, ComponentProps> {
    displayName?: string;
}
interface ForwardRefExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<DefaultComponentType, ComponentProps> {
    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
    propTypes?: any;
}
/**
 * Enhanced version of React.forwardRef with additional type safety and 'as' prop support
 */
declare function forwardRef<DefaultComponentType extends As = 'div', Props = {}>(render: ForwardRefWithAsRenderFunction<DefaultComponentType, Props>): ForwardRefExoticComponentWithAs<DefaultComponentType, Props>;
interface ComponentMetadata {
    displayName?: string;
    defaultProps?: Partial<any>;
    id?: string;
}
type Recipe = (...args: any) => any;
type TVSlot2ClassNames<Slots extends string> = Partial<Record<Slots, any>>;
type TVReturn<TVFN extends Recipe> = ReturnType<TVFN>;
type TVSlots<TVFN extends Recipe> = keyof TVReturn<TVFN>;
type TVSlotClassNamesProps<TVFN extends Recipe> = TVSlots<TVFN> extends string ? {
    classNames?: TVSlot2ClassNames<TVSlots<TVFN>>;
} : object;
type ComposedTVProps<TVFN extends Recipe> = VariantProps<TVFN> & TVSlotClassNamesProps<TVFN>;
type UnstyledProps = {
    unstyled?: boolean;
};
type CtxClassNames<TVFN extends Recipe> = ComposedTVProps<TVFN> extends {
    classNames: any;
} ? ComposedTVProps<TVFN>['classNames'] : unknown;
interface ComponentConfig<C extends React.ElementType, TVFN extends Recipe> {
    defaultProps?: Partial<React.ComponentPropsWithoutRef<C> & ComposedTVProps<TVFN> & UnstyledProps>;
    displayName?: string;
}
type ComponentSlots<T> = {
    [K in keyof T as K extends string ? Uncapitalize<K> : never]: any;
};
/**
 * Creates a TVCX component with the given configuration
 */
declare const tvcx: <T extends Record<string, any>>(config: Parameters<typeof tv>[0] & {
    slots?: Partial<ComponentSlots<T>>;
}) => tailwind_variants.TVReturnType<any, Record<string, tailwind_merge.ClassNameValue> & Partial<ComponentSlots<T>>, string | false | 0 | 0n | tailwind_merge.ClassNameValue[] | null | undefined, tailwind_variants_dist_config.TVConfig<any, any>, any, any, any>;
/**
 * Creates a component factory with root and slot functionality
 */
declare function createComponentFactory<TVFN extends Recipe, Slot extends keyof ReturnType<TVFN>>(tvFn: TVFN): {
    withRoot: <C extends React.ElementType>(Component: C, slot?: Slot, config?: ComponentConfig<C, TVFN>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<C>> & VariantProps<TVFN> & TVSlotClassNamesProps<TVFN> & UnstyledProps> & React.RefAttributes<React.ElementRef<C>>>;
    withSlot: <C extends React.ElementType>(Component: C, slot?: Slot, config?: ComponentConfig<C, TVFN>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<C>> & VariantProps<TVFN> & UnstyledProps> & React.RefAttributes<React.ElementRef<C>>>;
};
/**
 * Creates a styled component with TVCX functionality
 */
declare function styled<TVFN extends Recipe, C extends React.ElementType>(Component: C, tvFn: TVFN): ForwardRefExoticComponentWithAs<C, React.PropsWithoutRef<React.ComponentProps<C>> & VariantProps<TVFN>>;
/**
 * Creates a component tree with nested children
 */
declare function createComponentTree<F extends React.ElementType, N extends Readonly<Record<string, React.ElementType | ((...args: any) => any)>>>(Factory: F, nestedChildren: Readonly<N>): F & N & Readonly<N>;

export { type As, type ComponentConfig, type ComponentMetadata, type ComposedTVProps, type CtxClassNames, type ForwardRefExoticComponentWithAs, type ForwardRefWithAsRenderFunction, type PropsFromAs, type PropsWithAs, type Recipe, type TVReturn, type TVSlot2ClassNames, type TVSlotClassNamesProps, type TVSlots, type UnstyledProps, cn, createComponentFactory, createComponentTree, forwardRef, styled, tvcx };