@rdsaude/pulso-react-components
Version:
Biblioteca de componentes React do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da RDSaúde. Ideal para desenvolver aplicações modernas e acessíveis.
456 lines (445 loc) • 14.2 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Assign } from '@ark-ui/react';
import { ark } from '@ark-ui/react/factory';
import * as tailwind_variants from 'tailwind-variants';
import { VariantProps } from 'tailwind-variants';
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
/**
* Estilos para o componente BigNumber.
* Renderiza números grandes com diferentes tamanhos.
*/
declare const bigNumber: tailwind_variants.TVReturnType<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, "font-bold font-sans leading-tiny tracking-normal no-underline", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: false;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, "font-bold font-sans leading-tiny tracking-normal no-underline", tailwind_variants_dist_config_js.TVConfig<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, {
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}>, unknown, unknown, undefined>>;
/**
* Estilos para o componente Title.
* Renderiza títulos com diferentes tamanhos.
*/
declare const title: tailwind_variants.TVReturnType<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, "font-bold font-sans leading-tiny tracking-normal no-underline", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: false;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, undefined, "font-bold font-sans leading-tiny tracking-normal no-underline", tailwind_variants_dist_config_js.TVConfig<{
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}, {
variant: {
'large-bold': string;
'default-bold': string;
'small-bold': string;
};
}>, unknown, unknown, undefined>>;
/**
* Estilos para o componente Subtitle.
* Renderiza subtítulos com diferentes estilos.
*/
declare const subtitle: tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "font-sans text-[length:var(--font-size-fourpulse)] tracking-normal no-underline", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: false;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "font-sans text-[length:var(--font-size-fourpulse)] tracking-normal no-underline", tailwind_variants_dist_config_js.TVConfig<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}>, unknown, unknown, undefined>>;
/**
* Estilos para o componente Body.
* Renderiza texto do corpo com diferentes estilos.
*/
declare const body: tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "font-sans text-[length:var(--font-size-threeandhalfpulse)] tracking-normal no-underline", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: false;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "font-sans text-[length:var(--font-size-threeandhalfpulse)] tracking-normal no-underline", tailwind_variants_dist_config_js.TVConfig<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}>, unknown, unknown, undefined>>;
/**
* Estilos para o componente Caption.
* Renderiza legendas e textos pequenos com diferentes estilos.
*/
declare const caption: tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "inline font-sans text-[length:var(--font-size-threepulse)] tracking-normal no-underline", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: false;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, undefined, "inline font-sans text-[length:var(--font-size-threepulse)] tracking-normal no-underline", tailwind_variants_dist_config_js.TVConfig<{
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}, {
variant: {
'default-bold': null;
'underline-bold': null;
'default-semibold': null;
'underline-semibold': null;
'default-regular': string;
};
}>, unknown, unknown, undefined>>;
/**
* Props compartilhadas entre todos os componentes de tipografia.
*/
type TypographySharedProps = {
/**
* Quando true, o componente será renderizado como seu primeiro filho,
* herdando props e classes para máxima flexibilidade.
* @default false
*/
asChild?: boolean;
};
/**
* Props do componente BigNumber.
* Renderiza números grandes com diferentes tamanhos.
*/
type BigNumberProps = Assign<React.ComponentProps<typeof ark.h1>, VariantProps<typeof bigNumber> & TypographySharedProps>;
/**
* Props do componente Title.
* Renderiza títulos com diferentes tamanhos.
*/
type TitleProps = Assign<React.ComponentProps<typeof ark.h2>, VariantProps<typeof title> & TypographySharedProps>;
/**
* Props do componente Subtitle.
* Renderiza subtítulos com diferentes estilos.
*/
type SubtitleProps = Assign<React.ComponentProps<typeof ark.h3>, VariantProps<typeof subtitle> & TypographySharedProps>;
/**
* Props do componente Body.
* Renderiza texto do corpo com diferentes estilos.
*/
type BodyProps = Assign<React.ComponentProps<typeof ark.p>, VariantProps<typeof body> & TypographySharedProps>;
/**
* Props do componente Caption.
* Renderiza legendas e textos pequenos com diferentes estilos.
*/
type CaptionProps = Assign<React.ComponentProps<typeof ark.span>, VariantProps<typeof caption> & TypographySharedProps>;
/**
* Componente BigNumber para renderizar números grandes.
*
* @example
* ```tsx
* <TypographyBigNumber variant="large-bold">123</TypographyBigNumber>
*
* // Com asChild para máxima flexibilidade
* <TypographyBigNumber variant="large-bold" asChild>
* <h1>123</h1>
* </TypographyBigNumber>
* ```
*/
declare function TypographyBigNumber({ variant, asChild, className, children, ...props }: BigNumberProps): react_jsx_runtime.JSX.Element;
declare namespace TypographyBigNumber {
var displayName: string;
}
/**
* Componente Title para renderizar títulos.
*
* @example
* ```tsx
* <TypographyTitle variant="h1">Título principal</TypographyTitle>
*
* // Com asChild para máxima flexibilidade
* <TypographyTitle variant="h1" asChild>
* <h1>Título principal</h1>
* </TypographyTitle>
* ```
*/
declare function TypographyTitle({ variant, asChild, className, children, ...props }: TitleProps): react_jsx_runtime.JSX.Element;
declare namespace TypographyTitle {
var displayName: string;
}
/**
* Componente Subtitle para renderizar subtítulos.
*
* @example
* ```tsx
* <TypographySubtitle variant="h3">Subtítulo</TypographySubtitle>
*
* // Com asChild para máxima flexibilidade
* <TypographySubtitle variant="h3" asChild>
* <h3>Subtítulo</h3>
* </TypographySubtitle>
* ```
*/
declare function TypographySubtitle({ variant, asChild, className, children, ...props }: SubtitleProps): react_jsx_runtime.JSX.Element;
declare namespace TypographySubtitle {
var displayName: string;
}
/**
* Componente Body para renderizar texto do corpo.
*
* @example
* ```tsx
* <TypographyBody variant="default-bold">Texto do corpo</TypographyBody>
*
* // Com asChild para máxima flexibilidade
* <TypographyBody variant="default-bold" asChild>
* <p>Texto do corpo</p>
* </TypographyBody>
* ```
*/
declare function TypographyBody({ variant, asChild, className, children, ...props }: BodyProps): react_jsx_runtime.JSX.Element;
declare namespace TypographyBody {
var displayName: string;
}
/**
* Componente Caption para renderizar legendas e textos pequenos.
*
* @example
* ```tsx
* <TypographyCaption variant="small">Legenda pequena</TypographyCaption>
*
* // Com asChild para máxima flexibilidade
* <TypographyCaption variant="small" asChild>
* <span>Legenda pequena</span>
* </TypographyCaption>
* ```
*/
declare function TypographyCaption({ variant, asChild, className, children, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
declare namespace TypographyCaption {
var displayName: string;
}
/**
* Namespace que exporta todos os componentes de tipografia.
* Segue o padrão ArkJS para composição de componentes.
*/
declare namespace namespace {
export { TypographyBigNumber as BigNumber, TypographyBody as Body, TypographyCaption as Caption, TypographySubtitle as Subtitle, TypographyTitle as Title };
}
export { type BigNumberProps, type BodyProps, type CaptionProps, type SubtitleProps, type TitleProps, namespace as Typography };