@rdsaude/pulso-react-components/dist/components/product-header/index.d.ts

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.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { B as ButtonRootProps } from '../../button-root-BYIIM3Zt.js';
import { B as ButtonIcon } from '../../button-icon-CspAf62T.js';
import 'react';
import '@ark-ui/react';
import '@ark-ui/react/factory';
import 'tailwind-variants';
import 'tailwind-merge';
import '../../index-BM7eEaSf.js';
import '@raiadrogasil/pulso-design-tokens';
import '@raiadrogasil/pulso-icons';

/**
 * Representa uma ação exibida no cabeçalho em visualizações mobile.
 * Cada ação é um botão com um ícone específico.
 */
type MobileAction = ButtonRootProps & {
    /**
     * Ícone a ser exibido dentro do botão.
     * Deve ser uma das opções aceitas por `Button.Icon`.
     */
    icon: React.ComponentProps<typeof ButtonIcon>['symbol'];
};
/**
 * Configuração para o componente de cabeçalho em modo **desktop**.
 * Não permite ações interativas (botões).
 */
type ProductHeaderDesktopConfig = {
    /**
     * Variante que define o layout como desktop.
     */
    variant: 'desktop';
    /**
     * Ações não são permitidas no modo desktop.
     */
    actions?: never;
};
/**
 * Configuração para o componente de cabeçalho em modo **mobile**.
 * Exibe até duas ações interativas (botões com ícones).
 */
type ProductHeaderMobileConfig = {
    /**
     * Variante que define o layout como mobile.
     */
    variant: 'mobile';
    /**
     * Ações interativas exibidas no lado direito do cabeçalho.
     * Devem ser exatamente duas ações.
     */
    actions: [MobileAction, MobileAction];
};
/**
 * Propriedades base comuns a todas as variantes do cabeçalho.
 */
type BaseProps$1 = {
    /**
     * Conteúdo principal exibido dentro do cabeçalho.
     */
    children: React.ReactNode;
    /**
     * Título principal do cabeçalho.
     */
    heading: string;
    /**
     * Elemento HTML usado para renderizar o título.
     * Pode ser `h1`, `h2`, `h3`, `h4`, etc.
     * Por padrão, é `"h4"`.
     */
    headingAs?: keyof React.JSX.IntrinsicElements;
};

type ProductHeaderRootProps = BaseProps$1 & (ProductHeaderDesktopConfig | ProductHeaderMobileConfig);
declare function ProductHeaderRoot({ variant, heading, headingAs: Heading, children, actions, }: ProductHeaderRootProps): react_jsx_runtime.JSX.Element;

type BaseProps = {
    context?: 'default' | 'default-icon';
    brand?: string;
    measurement: string;
};
type ProductProps = BaseProps & {
    type: 'product';
    manufacturer: string;
    activeIngredient?: never;
};
type MedicineProps = BaseProps & {
    type: 'medicine';
    activeIngredient: string;
    manufacturer?: never;
};
type ProductHeaderInfoProps = ProductProps | MedicineProps;
declare function ProductHeaderInfo({ type, context, brand, measurement, manufacturer, activeIngredient, }: ProductHeaderInfoProps): react_jsx_runtime.JSX.Element;

declare namespace namespace {
  export { ProductHeaderInfo as Info, ProductHeaderRoot as Root };
}

export { namespace as ProductHeader, type ProductHeaderRootProps as ProductHeaderProps };