@nex-ui/styled/dist/types/types.d.ts

Styled API for creating atomic, theme-aware component styling.

import { ComponentType, ComponentProps, ElementType, JSX } from 'react';
import { Interpolation } from '@nex-ui/system';

type Overwrite<K, T> = Omit<K, keyof T> & T;
type GenericStyledComponentProps<E extends ElementType = ElementType> = Overwrite<ComponentProps<E>, {
    as?: E;
    sx?: Interpolation;
}>;
interface CreateGenericStyledComponent<C extends ElementType> {
    (interpolation?: Interpolation): <E extends ElementType = C>(props: GenericStyledComponentProps<E>) => JSX.Element;
}
interface CreateStyledComponent<C extends ElementType> {
    (interpolation?: Interpolation): (props: ComponentProps<C> & {
        sx: Interpolation;
    }) => JSX.Element;
}
type HTMLElementTagName = keyof JSX.IntrinsicElements;
interface CreateStyled {
    <Tag extends HTMLElementTagName>(tag: Tag): CreateGenericStyledComponent<Tag>;
    <C extends ComponentType<ComponentProps<C>>>(component: C): CreateStyledComponent<C>;
}
type StyledTags = {
    [Tag in HTMLElementTagName]: CreateGenericStyledComponent<Tag>;
};
type NexUIFactory = {
    [Tag in HTMLElementTagName]: <E extends ElementType = Tag>(props: Overwrite<ComponentProps<E>, {
        as?: E;
        sx?: Interpolation;
    }>) => JSX.Element;
};
interface Styled extends StyledTags, CreateStyled {
}

export type { CreateGenericStyledComponent, CreateStyled, CreateStyledComponent, GenericStyledComponentProps, NexUIFactory, Styled };