@giro-ds/react 5.0.1 → 6.0.0

package/dist/index.d.ts

@@ -80,34 +80,17 @@ interface BadgeProps extends BaseProps {
 declare const Badge: React__default.FC<BadgeProps>;
 
 /**
- * Props do componente Button
- * @example
- * ```tsx
- * <Button variant="filled" size="lg" onClick={handleClick}>
- *   Clique aqui
- * </Button>
- * ```
- * @example
- * ```tsx
- * <Button
- *   variant="outlined"
- *   icon={<Icon />}
- *   iconPosition="left"
- *   loading={isLoading}
- * >
- *   Salvar
- * </Button>
- * ```
+ * Props base do Button, independentes da variante iconOnly/icon.
+ * `target`, `rel`, `type` e `onClick` são declarados aqui para garantir
+ * que o destructuring funcione em todos os modos (button | a | custom).
  */
-interface ButtonProps extends BaseProps, React__default.HTMLAttributes<HTMLElement> {
+type ButtonOwnPropsBase = {
     /** Elemento customizado a ser renderizado (ex: 'a', Link do React Router) */
     as?: React__default.ElementType;
     /** Conteúdo do botão */
     children?: React__default.ReactNode;
     /** Variante visual do botão */
     variant?: Variant;
-    /** Define se o botão exibe apenas ícone (sem texto) */
-    iconOnly?: boolean;
     /** Posição do ícone em relação ao texto */
     iconPosition?: Position;
     /** URL de destino quando usado como link (renderiza <a>) */
@@ -124,8 +107,6 @@ interface ButtonProps extends BaseProps, React__default.HTMLAttributes<HTMLEleme
     type?: 'button' | 'submit' | 'reset';
     /** Tamanho do botão */
     size?: Size;
-    /** Ícone a ser exibido no botão */
-    icon?: React__default.ReactNode;
     /** Define se o botão ocupa 100% da largura do container */
     fullWidth?: boolean;
     /** Label acessível para leitores de tela */
@@ -138,9 +119,56 @@ interface ButtonProps extends BaseProps, React__default.HTMLAttributes<HTMLEleme
     tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
     /** Alinhamento do tooltip */
     tooltipAlign?: 'start' | 'center' | 'end';
-}
+    /** Handler de clique; tipado em HTMLElement para ser compatível com todos os modos */
+    onClick?: React__default.MouseEventHandler<HTMLElement>;
+} & BaseProps;
+/**
+ * Props próprias do componente Button.
+ * Quando `iconOnly: true`, a prop `icon` é **obrigatória**.
+ * Isso evita que botões icon-only sejam renderizados sem ícone definido.
+ */
+type ButtonOwnProps = (ButtonOwnPropsBase & {
+    /** Exibe apenas o ícone, sem texto. Requer obrigatoriamente a prop `icon`. */
+    iconOnly: true;
+    /** Ícone exibido no botão — obrigatório quando `iconOnly` é true */
+    icon: React__default.ReactNode;
+}) | (ButtonOwnPropsBase & {
+    /** @default false */
+    iconOnly?: false;
+    /** Ícone a ser exibido no botão */
+    icon?: React__default.ReactNode;
+});
+/** Button renderizado como `<button>` — recebe atributos HTML precisos de HTMLButtonElement */
+type ButtonAsButton = ButtonOwnProps & Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps>;
+/** Button renderizado como `<a>` — recebe atributos HTML precisos de HTMLAnchorElement */
+type ButtonAsAnchor = ButtonOwnProps & Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonOwnProps>;
+/** Button renderizado como elemento customizado via prop `as` */
+type ButtonAsCustom = ButtonOwnProps & Omit<React__default.HTMLAttributes<HTMLElement>, keyof ButtonOwnProps> & {
+    as: React__default.ElementType;
+};
+/**
+ * Props do componente Button
+ * @example
+ * ```tsx
+ * <Button variant="filled" size="lg" onClick={handleClick}>
+ *   Clique aqui
+ * </Button>
+ * ```
+ * @example
+ * ```tsx
+ * <Button
+ *   variant="outlined"
+ *   icon={<Icon />}
+ *   iconPosition="left"
+ *   loading={isLoading}
+ * >
+ *   Salvar
+ * </Button>
+ * ```
+ */
+type ButtonProps = ButtonAsButton | ButtonAsAnchor | ButtonAsCustom;
 
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 /** Formato de exibição da data aceito pelo componente. */
 type DateFormat = 'dd/mm/yyyy' | 'mm/dd/yyyy' | (string & {});
@@ -271,33 +299,35 @@ declare const Checkbox: React$1.FC<CheckboxProps>;
  * Props do componente Chips
  * @example
  * ```tsx
- * <Chips
- *   type="success"
- *   title="Ativo"
- *   leftIcon={<CheckIcon />}
- * />
+ * <Chips variant="success" leftIcon={<CheckIcon />}>
+ *   Ativo
+ * </Chips>
  * ```
  * @example
  * ```tsx
  * <Chips
- *   type="brand"
- *   title="Novo"
- *   rightIcon={<CloseIcon />}
- *   disabled={false}
- * />
+ *   backgroundColor="color-brand-secondary-medium"
+ *   textColor="color-brand-secondary-dark"
+ * >
+ *   Alerta
+ * </Chips>
  * ```
  */
-interface ChipsProps extends BaseProps {
-    /** Tipo visual do chip */
-    type?: TextVariant;
-    /** Texto a ser exibido dentro do chip */
-    title: string;
+interface ChipsProps extends BaseProps, Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Variante semântica do chip. Define o preset de cor de fundo. */
+    variant?: Exclude<TextVariant, 'color'>;
+    /** Token CSS para a cor de fundo. Ex: 'color-brand-secondary-medium'. Sobrescreve o variant. */
+    backgroundColor?: string;
+    /** Token CSS para a cor do texto e ícones. Ex: 'color-brand-secondary-dark'. Sobrescreve o variant. */
+    textColor?: string;
+    /** Conteúdo exibido dentro do chip */
+    children: React$1.ReactNode;
     /** Ícone posicionado à esquerda do texto */
     leftIcon?: React$1.ReactNode;
     /** Ícone posicionado à direita do texto */
     rightIcon?: React$1.ReactNode;
-    /** Props adicionais para o elemento div */
-    [key: string]: any;
+    /** Estilos inline adicionais */
+    style?: React$1.CSSProperties;
 }
 
 declare const MemoizedChips: React__default.NamedExoticComponent<ChipsProps>;
@@ -662,6 +692,53 @@ interface MenuProps extends BaseProps {
 
 declare const Menu: React__default.FC<MenuProps>;
 
+/**
+ * Props do componente Modal
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isModalOpen}
+ *   onClose={() => setIsModalOpen(false)}
+ *   title="Título do Modal"
+ * >
+ *   <p>Conteúdo do modal</p>
+ * </Modal>
+ * ```
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={showModal}
+ *   onClose={handleClose}
+ *   title="Confirmar ação"
+ *   closeOnOverlayClick={false}
+ * >
+ *   <MyForm />
+ * </Modal>
+ * ```
+ */
+interface ModalProps extends BaseProps {
+    /** Define se o modal está aberto */
+    isOpen: boolean;
+    /** Callback executado ao fechar o modal */
+    onClose: () => void;
+    /** Título exibido no cabeçalho do modal */
+    title?: string;
+    /** Conteúdo a ser exibido dentro do modal */
+    children?: ReactNode;
+    /** Conteúdo customizado no cabeçalho, exibido ao lado do título */
+    headerContent?: ReactNode;
+    /** Define se o modal fecha ao clicar no overlay (padrão: true) */
+    closeOnOverlayClick?: boolean;
+    /** Conteúdo do rodapé do modal */
+    footer?: ReactNode;
+    /** Largura customizada do modal (ex: '500px', '80%') */
+    customWidth?: string;
+    /** Define se o modal ocupa toda a tela. Tem prioridade sobre customWidth */
+    fullscreen?: boolean;
+}
+
+declare const Modal: React$1.FC<ModalProps>;
+
 interface PopoverProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
@@ -704,7 +781,7 @@ declare const Popover: React$1.FC<PopoverProps>;
  * @example
  * ```tsx
  * <Quantity
- *   defaultValue={1}
+ *   value={1}
  *   decimal={true}
  *   decimalPlaces={2}
  *   step={0.5}
@@ -713,9 +790,7 @@ declare const Popover: React$1.FC<PopoverProps>;
  * ```
  */
 interface QuantityProps extends BaseProps {
-    /** Valor inicial (modo não controlado) */
-    defaultValue?: number;
-    /** Valor atual (modo controlado) */
+    /** Valor do componente */
     value?: number;
     /** Callback executado quando o valor muda: (value) => void */
     onChange?: (value: number) => void;
@@ -726,7 +801,24 @@ interface QuantityProps extends BaseProps {
     /** Número de casas decimais permitidas */
     decimalPlaces?: number;
     /** Incremento/decremento ao clicar nos botões */
-    step?: number;
+    valueIncrement?: number;
+    /**
+     * Tamanho fixo do input, medido em caracteres (unidade CSS `ch`).
+     * O valor define quantos caracteres cabem visivelmente no campo sem necessidade de rolar.
+     * Exemplo: `inputSize={4}` reserva espaço para 4 caracteres ("9999").
+     * Se omitido, o tamanho é ajustado automaticamente conforme o conteúdo digitado.
+     */
+    inputSize?: number;
+    /** Valor mínimo permitido */
+    minValue?: number;
+    /** Valor máximo permitido */
+    maxValue?: number;
+    /** Aria label for the decrement button. Default: 'Decrease quantity' */
+    decrementAriaLabel?: string;
+    /** Aria label for the increment button. Default: 'Increase quantity' */
+    incrementAriaLabel?: string;
+    /** Aria label for the quantity input. Default: 'Quantity' */
+    inputAriaLabel?: string;
 }
 
 declare const memorizedQuantity: React__default.NamedExoticComponent<QuantityProps>;
@@ -1560,5 +1652,5 @@ declare function useInfiniteScroll({ status, page, lastPage, onLoadMore, thresho
 
 declare const normalizeText: (text: React.ReactNode) => string;
 
-export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
-export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FilterItem, FilterProps, ListItemProps, MenuProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };
+export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
+export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FilterItem, FilterProps, ListItemProps, MenuProps, ModalProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };