@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.
766 lines (760 loc) • 21 kB
TypeScript
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';
import { Scope } from '@radix-ui/react-context';
import { B as ButtonRootProps } from './button-root-BYIIM3Zt.js';
import { T as TInputCounterProps } from './input-counter.types-DcRlbuku.js';
import { I as InputTextProps, d as InputTextFieldProps, g as InputTextClearButtonProps } from './input-text.types-BERcFR4R.js';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React$1 from 'react';
import { HTMLAttributes } from 'react';
type TRatingSizes = 'tiny' | 'small';
interface IRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
/**
* Tamanho do ícone. ("tiny" | "small" )
*/
size?: TRatingSizes;
/**
* Valor da avaliação.
*/
value?: number | undefined;
/**
* Propriedade para renderizar a quantidade de slots de avaliação.
*/
ratingLimit?: number;
/**
* Função de callback ao pressionar o componente.
*/
onClick: (value: number) => void;
}
declare const ProductCardVariants: tailwind_variants.TVReturnType<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, undefined, {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
shipping?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
variantCard?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
variantPrice?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: true;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, tailwind_variants.TVReturnType<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}>, unknown, unknown, undefined>>;
/**
* Representa as props para o componente ProductCard.
*/
type CardProps = {
/**
* id do card e ou produto
*/
id?: string;
/**
* Define o tipo do card
*/
variantCard?: 'default' | 'medicament' | 'marktplace' | 'subscription' | 'pim' | 'kit';
/**
* Exibe a tag patrocinado
*/
sponsored?: boolean;
/**
* Exibe a tag de desconto
*/
onSale?: number;
/**
* Conteúdo a ser renderizado dentro do card
*/
children?: React.ReactNode;
/**
* Ação do card
*/
handleClick?: () => void;
/**
* Slot para conteúdo.
*/
slotTrade?: React.ReactNode;
/**
* Texto para a tag de assinatura
*/
subscriptionText?: string;
/**
/**
* Utilizado para testes.
*/
testId?: string;
};
type ImageProps = {
/**
* Caminho ou url da imagem
*/
imgpath?: string;
/**
* Texto alternativo para a imagem
*/
alt?: string;
};
type ProductProps = {
/**
* Loja parceira.
*/
mktShopName?: string;
/**
* Loja parceira oficial?
*/
mktOfficialShop?: boolean;
/**
* Define a descrição do produto
*/
description?: string;
/**
* Define a marca do produto
*/
brand?: string;
/**
* Define o detalhe do produto
*/
detail?: string;
/**
* exibe a quantidade do produtos
*/
quantity?: number;
/**
* exibe a quantidade de opções do produto
*/
pimTag?: number;
};
type ProductContainerProps = {
/**
* exibe conteúdo customizável dentro do card
*/
children?: React.ReactNode;
};
type ShippingProps = {
/**
* Define o tipo de frete
*/
shipping?: 'fixed' | 'fast';
/**
* Define o tipo de frete
*/
shippingValue?: string;
};
type PriceProps = {
/**
* Define o tipo de price
*/
variantPrice?: 'default' | 'pbm' | 'univers' | 'lmpm' | 'stixgain' | 'stixcash' | 'stixpoints' | 'ofex' | 'ofexonsale' | 'ofexlmpm' | 'nostock' | 'availability' | 'coupon' | 'couponbuy';
/**
* Valor do produto original / sem desconto
*/
oldValue?: string;
/**
* Valor do produto atual / com desconto
*/
value?: string;
/**
* Valor do produto no cartão
*/
cardValue?: string;
/**
* Nome parceria univers
*/
universBrand?: string;
/**
* Quantidade de produtos LMPM
*/
lmpmQuantity?: number;
/**
* Valor de frete fixo
*/
shippingValue?: string;
};
type ActionProps = {
/**
* Define o tipo de botão de ação
*/
variantAction?: 'buy' | 'ofex' | 'nostock' | 'availability';
/**
* Define o tipo de ação
*/
actionType?: 'input-text' | 'button' | 'input-counter' | 'loading';
/**
* Define as propriedades do Button
*/
buttonProps?: Omit<ButtonRootProps, 'variant' | 'size' | 'full'>;
/**
* Define as propriedades do InputText
*/
inputTextProps?: {
root?: Omit<InputTextProps, 'size'>;
field?: InputTextFieldProps;
clearButton?: InputTextClearButtonProps;
};
/**
* Define as propriedades do InputCounter
*/
inputCounterProps?: Omit<TInputCounterProps, 'size'>;
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
type ValidateProps = {
/**
* Define o tipo de validade / contagem da oferta
*/
validate?: 'validate' | 'coutdowndays' | 'coutdowshours';
/**
* Data limite oferta
*/
expirationDate?: string;
/**
* valor da contagem
*/
countdownValue?: number;
};
type ProductCardProps = CardProps & ImageProps & ProductProps & ProductContainerProps & ShippingProps & ActionProps & PriceProps & ValidateProps & VariantProps<typeof ProductCardVariants> & {};
interface ProductCardContext extends ProductCardProps {
}
type ProductCardScopedProps<P> = P & {
__scopeProductCard?: Scope;
};
declare const DISPLAY_NAME = "ProductCard";
declare const ProductCardProvider: ProviderType<ProductCardContext>;
declare const useProductCardContext: (consumerName: string, scope: Scope) => ProductCardContext;
declare const ProductCard: {
Root: {
(props: ProductCardScopedProps<ProductCardProps>): react_jsx_runtime.JSX.Element;
displayName: string;
};
Action: React$1.ForwardRefExoticComponent<{
variantAction?: "buy" | "ofex" | "nostock" | "availability";
actionType?: "input-text" | "button" | "input-counter" | "loading";
buttonProps?: Omit<ButtonRootProps, "variant" | "size" | "full">;
inputTextProps?: {
root?: Omit<InputTextProps, "size">;
field?: InputTextFieldProps;
clearButton?: InputTextClearButtonProps;
};
inputCounterProps?: Omit<TInputCounterProps, "size">;
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "style" | "className"> & React$1.RefAttributes<HTMLDivElement>>;
Rating: React$1.ForwardRefExoticComponent<Omit<IRatingProps, "onClick"> & React$1.RefAttributes<HTMLDivElement>>;
Trade: ({ children, }: {
children: string | React.ReactElement;
}) => react_jsx_runtime.JSX.Element;
Shipping: React$1.ForwardRefExoticComponent<ShippingProps & React$1.RefAttributes<HTMLDivElement>>;
Image: React$1.ForwardRefExoticComponent<ImageProps & React$1.RefAttributes<HTMLDivElement>>;
Info: React$1.ForwardRefExoticComponent<ProductProps & React$1.RefAttributes<HTMLDivElement>>;
Price: React$1.ForwardRefExoticComponent<PriceProps & React$1.RefAttributes<HTMLDivElement>>;
Validate: React$1.ForwardRefExoticComponent<{
id?: string;
variantCard?: "default" | "medicament" | "marktplace" | "subscription" | "pim" | "kit";
sponsored?: boolean;
onSale?: number;
children?: React.ReactNode;
handleClick?: () => void;
slotTrade?: React.ReactNode;
subscriptionText?: string;
testId?: string;
} & ImageProps & ProductProps & ProductContainerProps & ShippingProps & {
variantAction?: "buy" | "ofex" | "nostock" | "availability";
actionType?: "input-text" | "button" | "input-counter" | "loading";
buttonProps?: Omit<ButtonRootProps, "variant" | "size" | "full">;
inputTextProps?: {
root?: Omit<InputTextProps, "size">;
field?: InputTextFieldProps;
clearButton?: InputTextClearButtonProps;
};
inputCounterProps?: Omit<TInputCounterProps, "size">;
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "style" | "className"> & PriceProps & ValidateProps & tailwind_variants.VariantProps<tailwind_variants.TVReturnType<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, undefined, {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
shipping?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
variantCard?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
variantPrice?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & tailwind_variants_dist_config_js.TWMConfig & {
twMerge: true;
twMergeConfig: {
extend: {
classGroups: {
'font-size': {
text: string[];
}[];
'border-width': {
border: string[];
}[];
'--tw-ring-inset': {
ring: string[];
}[];
};
};
};
}, {
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, tailwind_variants.TVReturnType<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
root: string;
imgcontainer: string;
fare: string;
price: string;
oldprice: string;
cardprice: string;
productinfo: string;
productbrand: string;
productdetail: string;
productquantity: string;
productpimtag: string;
mkttag: string;
pricetag: string;
subscriptiontag: string;
availabilitytag: string;
nostokTitle: string;
nostokText: string;
ofexValidate: string;
countdownText: string;
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}, {
variantCard: {
default: string;
medicament: string;
marktplace: string;
subscription: string;
pim: string;
kit: string;
};
shipping: {
fast: {
fare: string;
};
fixed: {
fare: string;
};
};
variantPrice: {
default: string;
stix: string;
stixcash: string;
stixpoints: string;
stixgain: string;
ofex: string;
ofexonsale: string;
ofexlmpm: string;
nostock: string;
availability: string;
coupon: string;
couponbuy: string;
pbm: string;
univers: string;
lmpm: string;
};
}>, unknown, unknown, undefined>>> & React$1.RefAttributes<HTMLDivElement>>;
};
export { type ActionProps as A, DISPLAY_NAME as D, type IRatingProps as I, type ProductCardProps as P, ProductCardProvider as a, ProductCard as b, useProductCardContext as u };