react-tvcx
Version:
A library providing functions to help users create a reusable component system for their projects using React, Tailwind CSS, and TypeScript.
69 lines (64 loc) • 4.61 kB
TypeScript
import { ClassValue } from 'clsx';
import React from 'react';
import { VariantProps } from 'tailwind-variants';
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;
/**
* Inherited from React.ExoticComponent
*/
readonly $$typeof: symbol;
}
interface NamedExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends ExoticComponentWithAs<DefaultComponentType, ComponentProps> {
/**
* Inherited from React.NamedExoticComponent
*/
displayName?: string;
}
interface ForwardRefExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<DefaultComponentType, ComponentProps> {
defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
propTypes?: React.WeakValidationMap<PropsWithAs<DefaultComponentType, ComponentProps>>;
}
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;
declare function createComponentFactory<TVFN extends Recipe, Slot extends keyof ReturnType<TVFN>>(tvFn: TVFN): {
withRoot: <C extends React.ElementType>(Component: C, slot?: Slot) => 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) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<C>> & VariantProps<TVFN> & UnstyledProps> & React.RefAttributes<React.ElementRef<C>>>;
};
declare function styled<TVFN extends Recipe, C extends React.ElementType>(Component: C, tvFn: TVFN): ForwardRefExoticComponentWithAs<C, React.PropsWithoutRef<React.ComponentProps<C>> & VariantProps<TVFN>>;
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 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 };