@fast-food/design-system 1.32.0 → 1.33.0

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

@@ -27,6 +27,7 @@ export * from './Radio';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spacer';
+export * from './Spinner';
 export * from './Steps';
 export * from './Switch';
 export * from './Tabs';

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

@@ -1,5 +1,5 @@
 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 function ComboboxSelect<TData, TParams = void>({ id, label, value, onChange, loadOptions, loadPage, loadParams, getValue, getLabel, getDescription, selectedItem: selectedItemProp, 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;
 }

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

@@ -32,6 +32,12 @@ export interface ComboboxSelectProps<TData, TParams = void> {
     getValue: (item: TData) => string;
     getLabel: (item: TData) => string;
     getDescription?: (item: TData) => string | undefined;
+    /**
+     * Item já resolvido correspondente a `value`. Use no modo paginado para
+     * exibir o rótulo de um valor pré-selecionado (edição) que pode não estar
+     * na primeira página carregada.
+     */
+    selectedItem?: TData | null;
     placeholder?: string;
     searchPlaceholder?: string;
     loadingText?: string;

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

@@ -0,0 +1,37 @@
+import { FormProvider, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import * as React from 'react';
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<React.LabelHTMLAttributes<HTMLLabelElement> & import('../../atoms/Label/Label.style').LabelStyleProps & {
+    as?: "label" | "p" | "span";
+} & React.RefAttributes<HTMLLabelElement | HTMLParagraphElement | HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * `Form` equivale ao `FormProvider` do react-hook-form e também agrupa as
+ * primitivas como propriedades: `<Form.Field>`, `<Form.Item>`, `<Form.Label>`,
+ * `<Form.Control>`, `<Form.Description>`, `<Form.Message>`.
+ */
+type FormComponent = typeof FormProvider & {
+    Field: typeof FormField;
+    Item: typeof FormItem;
+    Label: typeof FormLabel;
+    Control: typeof FormControl;
+    Description: typeof FormDescription;
+    Message: typeof FormMessage;
+};
+declare const Form: FormComponent;
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, };

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

@@ -0,0 +1 @@
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField, } from './Form';

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

@@ -1,2 +1,2 @@
-export { default as FormField } from './FormField';
-export type { FormFieldProps } from './FormField.type';
+export { default as FormField, default as InputField } from './FormField';
+export type { FormFieldProps, FormFieldProps as InputFieldProps } from './FormField.type';

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BooleanFieldProps } from '../shared/formFieldTypes';
+export declare const BooleanField: React.FC<BooleanFieldProps>;

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

@@ -0,0 +1 @@
+export { BooleanField } from './BooleanField';

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

@@ -1,3 +1,8 @@
-import { default as React } from 'react';
-import { CurrencyFieldProps } from '../shared/formFieldTypes';
-export declare const CurrencyField: React.FC<CurrencyFieldProps>;
+export declare const CurrencyField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "defaultValue" | "value"> & import('..').BaseFieldProps & {
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (value: number | null) => void;
+    locale?: string;
+    currency?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,6 @@
+export declare const DurationField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "defaultValue" | "value"> & import('..').BaseFieldProps & {
+    value?: number | null;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (value: number | null) => void;
+    lengthHoursMask?: number;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { DurationField } from './DurationField';

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

@@ -1,3 +1 @@
-import { default as React } from 'react';
-import { EmailFieldProps } from '../shared/formFieldTypes';
-export declare const EmailField: React.FC<EmailFieldProps>;
+export declare const EmailField: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & import('..').BaseFieldProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,6 @@
-import { default as React } from 'react';
-import { MaskFieldProps } from '../shared/formFieldTypes';
-export declare const MaskField: React.FC<MaskFieldProps>;
+export declare const MaskField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & import('..').BaseFieldProps & {
+    mask: string | string[];
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,8 @@
-import { default as React } from 'react';
-import { NumberFieldProps } from '../shared/formFieldTypes';
-export declare const NumberField: React.FC<NumberFieldProps>;
+export declare const NumberField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "value"> & import('..').BaseFieldProps & {
+    value?: number | null;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    allowDecimal?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1 @@
-import { default as React } from 'react';
-import { PasswordFieldProps } from '../shared/formFieldTypes';
-export declare const PasswordField: React.FC<PasswordFieldProps>;
+export declare const PasswordField: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & import('..').BaseFieldProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,8 @@
-import { default as React } from 'react';
-import { PercentageFieldProps } from '../shared/formFieldTypes';
-export declare const PercentageField: React.FC<PercentageFieldProps>;
+export declare const PercentageField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "defaultValue" | "value"> & import('..').BaseFieldProps & {
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,5 @@
-import { default as React } from 'react';
-import { TextAreaFieldProps } from '../shared/formFieldTypes';
-export declare const TextAreaField: React.FC<TextAreaFieldProps>;
+export declare const TextAreaField: import('react').ForwardRefExoticComponent<import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & import('..').BaseFieldProps & {
+    error?: boolean;
+    characterCount?: boolean;
+    characterLimit?: number;
+} & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,3 +1,6 @@
-import { default as React } from 'react';
-import { TextFieldProps } from '../shared/formFieldTypes';
-export declare const TextField: React.FC<TextFieldProps>;
+/**
+ * Campo de texto rotulado. Encaminha o `ref` para o `<input>` interno — assim
+ * `<TextField {...register('campo')} />` (react-hook-form, não-controlado) e o
+ * `field.ref` do `Controller` (foco automático no erro) funcionam diretamente.
+ */
+export declare const TextField: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & import('..').BaseFieldProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,5 @@
+export declare const TimeField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "defaultValue" | "value"> & import('..').BaseFieldProps & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { TimeField } from './TimeField';

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

@@ -10,4 +10,7 @@ export * from './TextAreaField';
 export * from './DateField';
 export * from './DateTimeField';
 export * from './DateRangeField';
+export * from './TimeField';
+export * from './DurationField';
+export * from './BooleanField';
 export type * from './shared/formFieldTypes';

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

@@ -0,0 +1,9 @@
+/**
+ * Dispara o valor tratado de um campo tanto para `onChange` (assinatura
+ * RHF-native `(value) => void`, compatível com `{...field}` do `Controller`)
+ * quanto para o alias `onValueChange`. Ambos recebem exatamente o mesmo valor.
+ */
+export declare function emitFieldValue<T>(value: T, handlers: {
+    onChange?: (value: T) => void;
+    onValueChange?: (value: T) => void;
+}): void;

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
 import { DateRange } from 'react-day-picker';
 import { DatePickerCalendarProps } from '../../DatePicker/DatePicker.type';
 export type BaseFieldProps = {
@@ -7,13 +7,20 @@ export type BaseFieldProps = {
     errorText?: ReactNode;
     containerClassName?: string;
 };
+/**
+ * Convenção RHF-native: nos campos de valor abaixo, `onChange` recebe o **valor
+ * já tratado** (e não o evento do DOM), com a mesma assinatura do `field.onChange`
+ * do `Controller` do react-hook-form. Isso permite `<NumberField {...field} />`.
+ * `onValueChange` permanece como alias equivalente (ambos são disparados).
+ */
 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' | 'value'> & BaseFieldProps & {
     value?: number | null;
     onValueChange?: (value: number | null) => void;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** RHF-native: recebe o número tratado (ou `null`). Compatível com `{...field}`. */
+    onChange?: (value: number | null) => void;
     /** Mínimo permitido — aplicado no onBlur */
     min?: number;
     /** Máximo permitido — aplicado no onBlur */
@@ -22,16 +29,20 @@ export type NumberFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type
     allowDecimal?: boolean;
 };
 export type CurrencyFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> & BaseFieldProps & {
-    value?: number;
+    value?: number | null;
     defaultValue?: number;
     onValueChange?: (value: number | null) => void;
+    /** RHF-native: recebe o número tratado (ou `null`). Compatível com `{...field}`. */
+    onChange?: (value: number | null) => void;
     locale?: string;
     currency?: string;
 };
 export type PercentageFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> & BaseFieldProps & {
-    value?: number;
+    value?: number | null;
     defaultValue?: number;
     onValueChange?: (value: number | null) => void;
+    /** RHF-native: recebe o número tratado (ou `null`). Compatível com `{...field}`. */
+    onChange?: (value: number | null) => void;
     min?: number;
     max?: number;
 };
@@ -44,7 +55,8 @@ export type MaskFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
      */
     mask: string | string[];
     onValueChange?: (value: string) => void;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** RHF-native: recebe o valor mascarado. Compatível com `{...field}`. */
+    onChange?: (value: string) => void;
     /** Disparado quando a máscara escolhida fica completamente preenchida. */
     onComplete?: (value: string) => void;
 };
@@ -58,6 +70,8 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & B
 export type DateFieldProps = BaseFieldProps & DatePickerCalendarProps & {
     value?: Date;
     onValueChange?: (value: Date | undefined) => void;
+    /** RHF-native: recebe a data selecionada. Compatível com `{...field}`. */
+    onChange?: (value: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;
     id?: string;
@@ -66,6 +80,8 @@ export type DateFieldProps = BaseFieldProps & DatePickerCalendarProps & {
 export type DateTimeFieldProps = BaseFieldProps & DatePickerCalendarProps & {
     value?: Date;
     onValueChange?: (value: Date | undefined) => void;
+    /** RHF-native: recebe a data/hora selecionada. Compatível com `{...field}`. */
+    onChange?: (value: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;
     id?: string;
@@ -76,6 +92,46 @@ export type DateRangeValue = DateRange;
 export type DateRangeFieldProps = BaseFieldProps & {
     value?: DateRange;
     onValueChange?: (value: DateRange | undefined) => void;
+    /** RHF-native: recebe o intervalo selecionado. Compatível com `{...field}`. */
+    onChange?: (value: DateRange | undefined) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+};
+export type TimeFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> & BaseFieldProps & {
+    /** Valor no formato `HH:mm`. */
+    value?: string;
+    /** Disparado com o valor formatado `HH:mm` (normalizado e clamped no blur). */
+    onValueChange?: (value: string) => void;
+    /** RHF-native: recebe o valor `HH:mm`. Compatível com `{...field}`. */
+    onChange?: (value: string) => void;
+};
+export type DurationFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> & BaseFieldProps & {
+    /** Duração total em minutos. */
+    value?: number | null;
+    /** Disparado com a duração total em minutos (ou `null` quando vazio). */
+    onValueChange?: (value: number | null) => void;
+    /** RHF-native: recebe a duração em minutos (ou `null`). Compatível com `{...field}`. */
+    onChange?: (value: number | null) => void;
+    /** Número de dígitos reservados para as horas. Padrão: 3 (até 999h). */
+    lengthHoursMask?: number;
+};
+export type BooleanFieldProps = BaseFieldProps & {
+    /** Valor booleano. `null`/`undefined` = nenhuma opção selecionada. */
+    value?: boolean | null;
+    onValueChange?: (value: boolean | null) => void;
+    /** RHF-native: recebe o booleano (ou `null`). Compatível com `{...field}`. */
+    onChange?: (value: boolean | null) => void;
+    /** Apresentação do campo. Padrão: `'select'`. */
+    variant?: 'select' | 'radio';
+    /** Rótulo da opção verdadeira. Padrão: `'Sim'`. */
+    trueLabel?: string;
+    /** Rótulo da opção falsa. Padrão: `'Não'`. */
+    falseLabel?: string;
+    /** Texto do placeholder (apenas variante `select`). Padrão: `'Selecione'`. */
+    placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
 };

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

@@ -0,0 +1,24 @@
+/**
+ * Helpers compartilhados pelos campos com máscara numérica
+ * (`TimeField`, `DurationField`, `CurrencyField`). Centralizar essa lógica
+ * evita cópias divergentes de formatação/parsing entre os campos.
+ */
+/** Remove tudo que não é dígito de uma string (tolerante a `null`/`undefined`). */
+export declare const onlyDigits: (raw: string | null | undefined) => string;
+/** Formatação progressiva enquanto digita: `1230` -> `12:30`. */
+export declare function formatTimeMask(raw: string): string;
+/** Normaliza para `HH:mm` válido, com clamp de horas (0-23) e minutos (0-59). */
+export declare function normalizeTime(raw: string): string;
+/** Converte minutos totais para a string `HHhMMm` (horas com zero-padding). */
+export declare function minutesToDisplay(value: number | null | undefined, lengthHoursMask: number): string;
+/**
+ * Interpreta os dígitos digitados: os 2 últimos são minutos (clamp 0-59) e os
+ * demais são horas. Retorna o total de minutos (ou `null` quando vazio).
+ */
+export declare function digitsToMinutes(raw: string, lengthHoursMask: number): number | null;
+/**
+ * Posição do cursor no texto formatado após `n` dígitos (preserva a posição
+ * lógica ao reformatar — ex.: máscara de moeda). Para `n <= 0` retorna o índice
+ * do primeiro dígito (ou o fim quando não há dígitos).
+ */
+export declare function caretPosForDigits(formatted: string, n: number): number;

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

@@ -0,0 +1,7 @@
+import { Ref } from 'react';
+/**
+ * Combina vários refs (callback ou objeto) em um único callback ref. Útil quando
+ * um componente precisa manter um ref interno e, ao mesmo tempo, encaminhar o
+ * `ref` recebido (ex.: `field.ref` do react-hook-form).
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void;

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

@@ -1,5 +1,5 @@
 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 function PopoverMultiSelect<TData, TParams = void>({ label, value, onChange, loadOptions, loadPage, loadParams, getValue, getLabel, getSubLabel, selectedItems: selectedItemsProp, 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;
 }

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

@@ -18,6 +18,12 @@ export interface PopoverMultiSelectProps<TData, TParams = void> {
     getValue: (item: TData) => string;
     getLabel: (item: TData) => string;
     getSubLabel?: (item: TData) => string | undefined;
+    /**
+     * Itens já resolvidos correspondentes a `value`. Use no modo paginado para
+     * exibir os chips de valores pré-selecionados (edição) que podem não estar
+     * nas páginas já carregadas.
+     */
+    selectedItems?: TData[];
     placeholder?: string;
     searchPlaceholder?: string;
     emptyText?: string;

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

@@ -12,6 +12,7 @@ export * from './FilterBar';
 export * from './FilterForm';
 export * from './FormFields';
 export * from './FormField';
+export * from './Form';
 export * from './Grid';
 export * from './ListingTable';
 export * from './PageLoadingSkeleton';