bordex/dist/index.d.ts

A simple React component library for addding styled borders to your elements.

import * as react from 'react';
import react__default from 'react';

type BorderProperties = 'Top' | 'Right' | 'Bottom' | 'Left';
type BorderOptionName = 'Width' | 'Style' | 'Color';
type BorderShortHandShorcut = {
    border?: React.CSSProperties['border'];
};
type CSSAngle = `${number}deg` | `${number}grad` | `${number}rad` | `${number}turn`;
type BorderOptionsSolo<T extends BorderOptionName> = {
    [K in `border${T}`]?: React.CSSProperties[`border${T}`];
};
type BorderShorthandOptions = {
    [K in `border${BorderProperties}`]?: React.CSSProperties[`border${BorderProperties}`];
};
type BorderOptions<T extends BorderOptionName> = {
    [K in `border${BorderProperties}${T}`]?: React.CSSProperties[`border${BorderProperties}${T}`];
} & BorderOptionsSolo<T> & BorderShorthandOptions & BorderShortHandShorcut;
type DivProps = React.ComponentProps<'div'>;

type BlurBorderProps = {
    children?: React.ReactNode;
    borderBlur?: string;
} & DivProps & BorderOptionsSolo<'Width' | 'Color'>;

declare const BlurBorder: react.ForwardRefExoticComponent<Omit<BlurBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type CornerBorderProps = {
    children?: React.ReactNode;
} & BorderOptionsSolo<'Color' | 'Style' | 'Width'> & DivProps;

declare const CornerBorder: react.ForwardRefExoticComponent<Omit<CornerBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type DisjointedBorderProps = {
    children?: React.ReactNode;
    angle?: CSSAngle;
} & BorderOptionsSolo<'Color'> & DivProps;

declare const DisjointedBorder: react.ForwardRefExoticComponent<Omit<DisjointedBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type FancyBorderProps = {
    children?: React.ReactNode;
} & BorderOptionsSolo<'Width' | 'Style' | 'Color'> & DivProps;

declare const FancyBorder: react.ForwardRefExoticComponent<Omit<FancyBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type GlowingGradientBorderProps = {
    children?: React.ReactNode;
    colors?: React.CSSProperties['color'][];
    angle?: CSSAngle;
} & BorderOptionsSolo<'Width'> & DivProps;

declare const GlowingGradientBorder: react.ForwardRefExoticComponent<Omit<GlowingGradientBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type GradientBorderProps = {
    children?: React.ReactNode;
    colors?: React.CSSProperties['color'][];
    angle?: CSSAngle;
} & BorderOptionsSolo<'Width'> & DivProps;

declare const GradientBorder: react.ForwardRefExoticComponent<Omit<GradientBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type NormalBorderProps = {
    children?: React.ReactNode;
} & BorderOptions<'Color' | 'Style' | 'Width'> & DivProps;

declare const NormalBorder: react.ForwardRefExoticComponent<Omit<NormalBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type OverlapBorderProps = {
    chilldren?: React.ReactNode;
} & BorderOptionsSolo<'Color' | 'Width' | 'Style'> & DivProps;

declare const OverlapBorder: react__default.ForwardRefExoticComponent<Omit<OverlapBorderProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;

type StripeBorderProps = {
    children?: React.ReactNode;
    angle?: CSSAngle;
    stripeWidth?: number;
    colors?: React.CSSProperties['color'][];
} & BorderOptionsSolo<'Width'> & DivProps;

declare const StripeBorder: react.ForwardRefExoticComponent<Omit<StripeBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type ThinBorderProps = {
    children?: React.ReactNode;
    side?: 'top' | 'right' | 'bottom' | 'left' | 'horizontal' | 'vertical';
} & BorderOptionsSolo<'Color'> & DivProps;

declare const ThinBorder: react.ForwardRefExoticComponent<Omit<ThinBorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

export { BlurBorder, CornerBorder, DisjointedBorder, FancyBorder, GlowingGradientBorder, GradientBorder, NormalBorder, OverlapBorder, StripeBorder, ThinBorder };