@fast-food/design-system 1.30.1 → 1.32.0

package/dist/components/atoms/Accordion/Accordion.style.d.ts

@@ -4,6 +4,7 @@ export declare const accordionHeaderStyles: (props?: ({} & import('class-varianc
 export declare const accordionContentStyles: (props?: ({
     isOpen?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const accordionBodyStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const accordionIconStyles: (props?: ({
     isOpen?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/atoms/Input/Input.type.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 export type InputVariant = 'default' | 'primary' | 'secondary' | 'error';
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -9,4 +9,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     success?: boolean;
     /** Shows a skeleton placeholder instead of the input control. */
     isLoading?: boolean;
+    /** Conteúdo fixo à esquerda do campo (ícone, "R$", etc.). */
+    startAdornment?: ReactNode;
+    /** Conteúdo fixo à direita do campo (ícone, "%", botão, etc.). */
+    endAdornment?: ReactNode;
 }

package/dist/components/molecules/ComboboxSelect/ComboboxSelect.d.ts

@@ -0,0 +1,6 @@
+import { ComboboxSelectProps } from './ComboboxSelect.type';
+declare function ComboboxSelect<TData, TParams = void>({ id, label, value, onChange, loadOptions, loadPage, loadParams, getValue, getLabel, getDescription, placeholder, searchPlaceholder, loadingText, noOptionsText, loadErrorText, helperText, errorText, error, disabled, readOnly, clearable, onClear, className, containerClassName, reloadOnParamsChange, searchDebounce, }: ComboboxSelectProps<TData, TParams>): import("react/jsx-runtime").JSX.Element;
+declare namespace ComboboxSelect {
+    var displayName: string;
+}
+export default ComboboxSelect;

package/dist/components/molecules/ComboboxSelect/ComboboxSelect.type.d.ts

@@ -0,0 +1,52 @@
+/** Argumentos passados ao carregador paginado (busca no servidor + scroll infinito). */
+export interface LoadPageArgs<TParams = void> {
+    /** Texto de busca atual (já com debounce aplicado). */
+    search: string;
+    /** Página solicitada (base 0). A primeira carga e toda nova busca usam página 0. */
+    page: number;
+    /** Parâmetros extras fornecidos via `loadParams`. */
+    params?: TParams;
+}
+/** Resultado de uma página: itens daquela página + se há mais para carregar. */
+export interface LoadPageResult<TData> {
+    data: TData[];
+    hasMore: boolean;
+}
+export interface ComboboxSelectProps<TData, TParams = void> {
+    id?: string;
+    label?: string;
+    value?: string | null;
+    onChange?: (value: string | null, item: TData | null) => void;
+    /**
+     * Carregador simples: busca todas as opções de uma vez. A busca é feita no
+     * cliente. Use quando a lista é pequena. Obrigatório se `loadPage` não for usado.
+     */
+    loadOptions?: (params?: TParams) => Promise<TData[]>;
+    /**
+     * Carregador paginado com busca no servidor + scroll infinito. Quando fornecido,
+     * tem prioridade sobre `loadOptions`: a busca é debounced e enviada ao servidor,
+     * e novas páginas são carregadas ao rolar até o fim da lista.
+     */
+    loadPage?: (args: LoadPageArgs<TParams>) => Promise<LoadPageResult<TData>>;
+    loadParams?: TParams;
+    getValue: (item: TData) => string;
+    getLabel: (item: TData) => string;
+    getDescription?: (item: TData) => string | undefined;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    loadingText?: string;
+    noOptionsText?: string;
+    loadErrorText?: string;
+    helperText?: string;
+    errorText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    className?: string;
+    containerClassName?: string;
+    reloadOnParamsChange?: boolean;
+    /** Debounce (ms) da busca no servidor quando `loadPage` é usado. Padrão: 300. */
+    searchDebounce?: number;
+}

package/dist/components/molecules/ComboboxSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxSelect } from './ComboboxSelect';
+export type { ComboboxSelectProps, LoadPageArgs, LoadPageResult, } from './ComboboxSelect.type';

package/dist/components/molecules/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DateRangePickerProps } from './DateRangePicker.type';
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export default DateRangePicker;

package/dist/components/molecules/DateRangePicker/DateRangePicker.type.d.ts

@@ -0,0 +1,18 @@
+import { DateRange } from 'react-day-picker';
+export type { DateRange };
+export interface DateRangePreset {
+    label: string;
+    range: () => DateRange;
+}
+export interface DateRangePickerProps {
+    value?: DateRange;
+    onChange?: (range: DateRange | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    /** Exibe botões de atalho (Hoje, Últimos 7 dias…). Padrão: true */
+    showPresets?: boolean;
+    /** Substitui os presets padrão por uma lista customizada */
+    presets?: DateRangePreset[];
+    'aria-invalid'?: boolean;
+}

package/dist/components/molecules/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePicker, default } from './DateRangePicker';
+export type { DateRangePickerProps, DateRangePreset, DateRange } from './DateRangePicker.type';

package/dist/components/molecules/FormFields/ComboboxField/ComboboxField.d.ts

@@ -0,0 +1,8 @@
+import { ComboboxSelectProps } from '../../ComboboxSelect/ComboboxSelect.type';
+import { BaseFieldProps } from '../shared/formFieldTypes';
+export type ComboboxFieldProps<TData, TParams = void> = Omit<ComboboxSelectProps<TData, TParams>, 'label' | 'helperText' | 'errorText' | 'containerClassName'> & BaseFieldProps;
+declare function ComboboxField<TData, TParams = void>({ label, helperText, errorText, containerClassName, id, ...props }: ComboboxFieldProps<TData, TParams>): import("react/jsx-runtime").JSX.Element;
+declare namespace ComboboxField {
+    var displayName: string;
+}
+export default ComboboxField;

package/dist/components/molecules/FormFields/ComboboxField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxField } from './ComboboxField';
+export type { ComboboxFieldProps } from './ComboboxField';

package/dist/components/molecules/FormFields/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ComboboxField';
 export * from './TextField';
 export * from './EmailField';
 export * from './PasswordField';

package/dist/components/molecules/FormFields/shared/applyMask.d.ts

@@ -1,2 +1,12 @@
-/** Máscara com `#` = um dígito; demais caracteres são literais. */
-export declare function applyMask(rawValue: string, mask: string): string;
+/** Conta quantos dígitos-curinga (`#`) a máscara possui. */
+export declare function countMaskSlots(mask: string): number;
+/**
+ * Escolhe a máscara mais adequada à quantidade de dígitos informada.
+ * Entre as máscaras ordenadas por capacidade, retorna a primeira cujo número de
+ * slots `#` comporta os dígitos; se nenhuma comporta, retorna a de maior capacidade.
+ */
+export declare function pickMask(mask: string | string[], digitCount: number): string;
+/** Máscara com `#` = um dígito; demais caracteres são literais. Aceita array de máscaras. */
+export declare function applyMask(rawValue: string, mask: string | string[]): string;
+/** Verifica se os dígitos preencheram completamente a máscara escolhida. */
+export declare function isMaskComplete(rawValue: string, mask: string | string[]): boolean;

package/dist/components/molecules/FormFields/shared/formFieldTypes.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { DateRange } from 'react-day-picker';
 import { DatePickerCalendarProps } from '../../DatePicker/DatePicker.type';
 export type BaseFieldProps = {
     label?: ReactNode;
@@ -9,9 +10,16 @@ export type BaseFieldProps = {
 export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & BaseFieldProps;
 export type EmailFieldProps = InputHTMLAttributes<HTMLInputElement> & BaseFieldProps;
 export type PasswordFieldProps = InputHTMLAttributes<HTMLInputElement> & BaseFieldProps;
-export type NumberFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & BaseFieldProps & {
+export type NumberFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> & BaseFieldProps & {
+    value?: number | null;
     onValueChange?: (value: number | null) => void;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Mínimo permitido — aplicado no onBlur */
+    min?: number;
+    /** Máximo permitido — aplicado no onBlur */
+    max?: number;
+    /** Permite decimais (ponto/vírgula). Padrão: false */
+    allowDecimal?: boolean;
 };
 export type CurrencyFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> & BaseFieldProps & {
     value?: number;
@@ -28,12 +36,24 @@ export type PercentageFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
     max?: number;
 };
 export type MaskFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & BaseFieldProps & {
-    mask: string;
+    /**
+     * Máscara com `#` = um dígito; demais caracteres são literais. Aceita um
+     * array de máscaras — a mais adequada ao número de dígitos digitados é
+     * escolhida automaticamente (ex.: `['###.###.###-##', '##.###.###/####-##']`
+     * para CPF/CNPJ).
+     */
+    mask: string | string[];
     onValueChange?: (value: string) => void;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Disparado quando a máscara escolhida fica completamente preenchida. */
+    onComplete?: (value: string) => void;
 };
 export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & BaseFieldProps & {
     error?: boolean;
+    /** Exibe contador de caracteres. Ativado automaticamente quando `characterLimit` é fornecido. */
+    characterCount?: boolean;
+    /** Limite máximo de caracteres — aplica `maxLength` e exibe contador. */
+    characterLimit?: number;
 };
 export type DateFieldProps = BaseFieldProps & DatePickerCalendarProps & {
     value?: Date;
@@ -51,15 +71,11 @@ export type DateTimeFieldProps = BaseFieldProps & DatePickerCalendarProps & {
     id?: string;
     readOnly?: boolean;
 };
-export type DateRangeValue = {
-    from?: Date;
-    to?: Date;
-};
-export type DateRangeFieldProps = BaseFieldProps & DatePickerCalendarProps & {
-    value?: DateRangeValue;
-    onValueChange?: (value: DateRangeValue) => void;
-    fromPlaceholder?: string;
-    toPlaceholder?: string;
+/** Alias de `DateRange` do react-day-picker para conveniência. */
+export type DateRangeValue = DateRange;
+export type DateRangeFieldProps = BaseFieldProps & {
+    value?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
     disabled?: boolean;
     readOnly?: boolean;
 };

package/dist/components/molecules/PopoverMultiSelect/PopoverMultiSelect.d.ts

@@ -0,0 +1,6 @@
+import { PopoverMultiSelectProps } from './PopoverMultiSelect.type';
+declare function PopoverMultiSelect<TData, TParams = void>({ label, value, onChange, loadOptions, loadPage, loadParams, getValue, getLabel, getSubLabel, placeholder, searchPlaceholder, emptyText, loadingText, loadErrorText, helperText, errorText, error, disabled, readOnly, clearable, previewLimit, className, containerClassName, searchDebounce, }: PopoverMultiSelectProps<TData, TParams>): import("react/jsx-runtime").JSX.Element;
+declare namespace PopoverMultiSelect {
+    var displayName: string;
+}
+export default PopoverMultiSelect;

package/dist/components/molecules/PopoverMultiSelect/PopoverMultiSelect.type.d.ts

@@ -0,0 +1,37 @@
+import { LoadPageArgs, LoadPageResult } from '../ComboboxSelect/ComboboxSelect.type';
+export type { LoadPageArgs, LoadPageResult };
+export interface PopoverMultiSelectProps<TData, TParams = void> {
+    label?: string;
+    value: string[];
+    onChange: (values: string[]) => void;
+    /**
+     * Carregador simples: busca todas as opções de uma vez (filtro no cliente).
+     * Obrigatório se `loadPage` não for usado.
+     */
+    loadOptions?: (params?: TParams) => Promise<TData[]>;
+    /**
+     * Carregador paginado com busca no servidor + scroll infinito. Quando fornecido,
+     * tem prioridade sobre `loadOptions`.
+     */
+    loadPage?: (args: LoadPageArgs<TParams>) => Promise<LoadPageResult<TData>>;
+    loadParams?: TParams;
+    getValue: (item: TData) => string;
+    getLabel: (item: TData) => string;
+    getSubLabel?: (item: TData) => string | undefined;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    loadErrorText?: string;
+    helperText?: string;
+    errorText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    clearable?: boolean;
+    previewLimit?: number;
+    className?: string;
+    containerClassName?: string;
+    /** Debounce (ms) da busca no servidor quando `loadPage` é usado. Padrão: 300. */
+    searchDebounce?: number;
+}

package/dist/components/molecules/PopoverMultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PopoverMultiSelect } from './PopoverMultiSelect';
+export type { PopoverMultiSelectProps } from './PopoverMultiSelect.type';

package/dist/components/molecules/index.d.ts

@@ -1,5 +1,6 @@
 export * from './DashboardChart';
 export * from './DatePicker';
+export * from './DateRangePicker';
 export * from './DateTimePicker';
 export * from './DataTableActions';
 export * from './Drawer';
@@ -17,7 +18,9 @@ export * from './PageLoadingSkeleton';
 export * from './PageHeader';
 export * from './Pagination';
 export * from './PaymentInfo';
+export * from './ComboboxSelect';
 export * from './MultiSelect';
+export * from './PopoverMultiSelect';
 export * from './RadioGroup';
 export * from './Section';
 export * from './SidebarNav';