@fast-food/design-system 1.33.0 → 1.35.0

package/dist/components/atoms/Icon/iconRegistry.d.ts

@@ -47,6 +47,7 @@ export declare const iconRegistry: {
     readonly menu: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     readonly 'message-circle': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     readonly minus: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    readonly monitor: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     readonly moon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     readonly 'more-vertical': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     readonly package: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { FormSectionProps } from './FormSection.type';
+/**
+ * Agrupa campos de um formulário sob um título discreto, padronizando o
+ * espaçamento e a divisória entre seções (substitui agrupamentos ad-hoc).
+ *
+ * @example
+ * <FormSection title="Endereço" description="Onde a filial atende">
+ *   <TextField ... />
+ * </FormSection>
+ */
+export declare const FormSection: React.FC<FormSectionProps>;
+export default FormSection;

package/dist/components/molecules/FormSection/FormSection.style.d.ts

@@ -0,0 +1,7 @@
+export declare const formSectionStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const formSectionHeaderStyles: (props?: ({
+    divider?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const formSectionTitleStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const formSectionDescriptionStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const formSectionBodyStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface FormSectionProps {
+    /** Título da seção (renderizado em caixa-alta discreta). */
+    title?: string;
+    /** Texto de apoio abaixo do título. */
+    description?: ReactNode;
+    /** Conteúdo opcional alinhado à direita do cabeçalho (ex.: switch, botão). */
+    actions?: ReactNode;
+    /** Campos da seção. */
+    children: ReactNode;
+    /** Remove a divisória sob o cabeçalho. */
+    hideDivider?: boolean;
+    /** Classe adicional no container. */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './FormSection';
+export * from './FormSection.type';

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

@@ -0,0 +1,6 @@
+import { ModeToggleProps } from './ModeToggle.type';
+/**
+ * Controle de troca de tema. Deve estar dentro de um `<ThemeProvider>`.
+ */
+export declare const ModeToggle: ({ variant, size, includeSystem, className, "aria-label": ariaLabel }: ModeToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default ModeToggle;

package/dist/components/molecules/ModeToggle/ModeToggle.style.d.ts

@@ -0,0 +1,10 @@
+export declare const modeToggleGroupStyles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modeToggleOptionStyles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modeToggleIconButtonStyles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,21 @@
+import { Theme } from '../../../contexts/theme/theme.type';
+export interface ModeToggleProps {
+    /**
+     * `segmented` mostra os três modos (claro/escuro/sistema) lado a lado.
+     * `icon` mostra um único botão que alterna entre os modos.
+     */
+    variant?: 'segmented' | 'icon';
+    /** Tamanho do controle. */
+    size?: 'sm' | 'md';
+    /** Inclui a opção "Sistema". Padrão: true. */
+    includeSystem?: boolean;
+    /** Classe adicional no container. */
+    className?: string;
+    /** Rótulo acessível do controle. Padrão: "Alternar tema". */
+    'aria-label'?: string;
+}
+export interface ThemeOptionMeta {
+    value: Theme;
+    label: string;
+    icon: 'sun' | 'moon' | 'monitor';
+}

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

@@ -0,0 +1,2 @@
+export * from './ModeToggle';
+export * from './ModeToggle.type';

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

@@ -12,9 +12,11 @@ export * from './FilterBar';
 export * from './FilterForm';
 export * from './FormFields';
 export * from './FormField';
+export * from './FormSection';
 export * from './Form';
 export * from './Grid';
 export * from './ListingTable';
+export * from './ModeToggle';
 export * from './PageLoadingSkeleton';
 export * from './PageHeader';
 export * from './Pagination';

package/dist/components/organisms/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,7 @@
+import { ConfirmationModalProps } from './ConfirmationModal.type';
+/**
+ * Diálogo de confirmação controlado. Para uso imperativo, prefira
+ * `confirm()` / `useConfirmationModal()` com o `<ConfirmationModalHost />`.
+ */
+export declare const ConfirmationModal: ({ isOpen, title, description, confirmLabel, cancelLabel, tone, loading, onConfirm, onCancel }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+export default ConfirmationModal;

package/dist/components/organisms/ConfirmationModal/ConfirmationModal.style.d.ts

@@ -0,0 +1,6 @@
+export declare const confirmationIconStyles: (props?: ({
+    tone?: "default" | "warning" | "danger" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const confirmationBodyStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const confirmationDescriptionStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const confirmationFooterStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/organisms/ConfirmationModal/ConfirmationModal.type.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type ConfirmationTone = 'default' | 'danger' | 'warning';
+export interface ConfirmationOptions {
+    /** Título do diálogo. */
+    title: string;
+    /** Texto explicativo (string ou nó React). */
+    description?: ReactNode;
+    /** Rótulo do botão de confirmação. Padrão: "Confirmar". */
+    confirmLabel?: string;
+    /** Rótulo do botão de cancelamento. Padrão: "Cancelar". */
+    cancelLabel?: string;
+    /** Tom visual — `danger` usa o botão destrutivo. Padrão: `default`. */
+    tone?: ConfirmationTone;
+}
+export interface ConfirmationModalProps extends ConfirmationOptions {
+    /** Controla a visibilidade. */
+    isOpen: boolean;
+    /** Chamado ao confirmar. */
+    onConfirm: () => void;
+    /** Chamado ao cancelar / fechar. */
+    onCancel: () => void;
+    /** Mostra estado de carregamento no botão de confirmação. */
+    loading?: boolean;
+}

package/dist/components/organisms/ConfirmationModal/ConfirmationModalHost.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renderiza a confirmação ativa disparada por `confirm()` / `useConfirmationModal()`.
+ * Monte uma única vez próximo da raiz da aplicação.
+ */
+export declare const ConfirmationModalHost: () => import("react/jsx-runtime").JSX.Element | null;
+export default ConfirmationModalHost;

package/dist/components/organisms/ConfirmationModal/confirm.d.ts

@@ -0,0 +1,11 @@
+import { ConfirmationOptions } from './ConfirmationModal.type';
+/**
+ * Abre um diálogo de confirmação e resolve `true`/`false` conforme a escolha.
+ * Requer um `<ConfirmationModalHost />` montado na árvore.
+ *
+ * @example
+ * if (await confirm({ title: 'Excluir pedido?', tone: 'danger' })) {
+ *   await remove();
+ * }
+ */
+export declare const confirm: (options: ConfirmationOptions) => Promise<boolean>;

package/dist/components/organisms/ConfirmationModal/confirmStore.d.ts

@@ -0,0 +1,19 @@
+import { ConfirmationOptions } from './ConfirmationModal.type';
+export interface ConfirmRequest extends ConfirmationOptions {
+    id: number;
+}
+interface ConfirmState {
+    current: ConfirmRequest | null;
+}
+type Listener = (state: ConfirmState) => void;
+/**
+ * Store da confirmação imperativa. Mantém uma única requisição ativa;
+ * uma nova chamada antes da anterior resolver cancela a anterior (resolve `false`).
+ */
+export declare const confirmStore: {
+    subscribe(listener: Listener): () => void;
+    getSnapshot(): ConfirmState;
+    request(options: ConfirmationOptions): Promise<boolean>;
+    resolve(value: boolean): void;
+};
+export {};

package/dist/components/organisms/ConfirmationModal/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ConfirmationModal';
+export * from './ConfirmationModal.type';
+export * from './ConfirmationModalHost';
+export * from './confirm';
+export * from './useConfirmationModal';
+export { confirmStore } from './confirmStore';

package/dist/components/organisms/ConfirmationModal/useConfirmationModal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Retorna a função `confirm` para abrir confirmações dentro de componentes.
+ * Requer um `<ConfirmationModalHost />` montado na árvore.
+ *
+ * @example
+ * const confirm = useConfirmationModal();
+ * const ok = await confirm({ title: 'Inativar?', tone: 'warning' });
+ */
+export declare const useConfirmationModal: () => (options: import('./ConfirmationModal.type').ConfirmationOptions) => Promise<boolean>;

package/dist/components/organisms/Toaster/Toaster.d.ts

@@ -0,0 +1,10 @@
+import { ToasterProps } from './toast.type';
+/**
+ * Renderiza os toasts disparados pela API imperativa `toast.*`.
+ * Monte uma única vez próximo da raiz da aplicação.
+ *
+ * @example
+ * <Toaster position="top-right" />
+ */
+export declare const Toaster: ({ position, duration, max, className, zIndex }: ToasterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Toaster;

package/dist/components/organisms/Toaster/Toaster.style.d.ts

@@ -0,0 +1,4 @@
+export declare const toasterViewportStyles: (props?: ({
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toasterItemStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/organisms/Toaster/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Toaster';
+export * from './toast';
+export * from './toast.type';
+export * from './useToast';
+export { toastStore } from './toastStore';

package/dist/components/organisms/Toaster/toast.d.ts

@@ -0,0 +1,27 @@
+import { ToastItem, ToastOptions } from './toast.type';
+interface ToastFn {
+    (message: string, options?: ToastOptions): string;
+    success: (message: string, options?: ToastOptions) => string;
+    error: (message: string, options?: ToastOptions) => string;
+    warning: (message: string, options?: ToastOptions) => string;
+    info: (message: string, options?: ToastOptions) => string;
+    /** Cria um toast com controle total do payload. */
+    show: (toast: Omit<ToastItem, 'id'> & {
+        id?: string;
+    }) => string;
+    /** Fecha um toast específico. */
+    dismiss: (id: string) => void;
+    /** Fecha todos os toasts. */
+    clear: () => void;
+}
+/**
+ * API imperativa de toasts — pode ser chamada de qualquer lugar
+ * (services, handlers, etc.), sem hooks. Requer um `<Toaster />`
+ * montado uma vez na árvore para renderizar.
+ *
+ * @example
+ * toast.success('Pedido criado!');
+ * toast.error('Falha ao salvar', { title: 'Erro' });
+ */
+export declare const toast: ToastFn;
+export {};

package/dist/components/organisms/Toaster/toast.type.d.ts

@@ -0,0 +1,32 @@
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastItem {
+    id: string;
+    variant: ToastVariant;
+    title?: string;
+    message: string;
+    /** Duração em ms (0 = não fecha sozinho). Padrão: 5000. */
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: ToastAction;
+}
+/** Opções aceitas pelos atalhos (`toast.success`, etc.). */
+export type ToastOptions = Partial<Omit<ToastItem, 'id' | 'message' | 'variant'>> & {
+    id?: string;
+};
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToasterProps {
+    /** Posição do empilhamento na tela. Padrão: `top-right`. */
+    position?: ToasterPosition;
+    /** Duração padrão aplicada quando o toast não define a sua. */
+    duration?: number;
+    /** Máximo de toasts visíveis ao mesmo tempo (mais antigos são descartados). */
+    max?: number;
+    /** Classe adicional no viewport. */
+    className?: string;
+    /** z-index do viewport. Padrão: 9999. */
+    zIndex?: number;
+}

package/dist/components/organisms/Toaster/toastStore.d.ts

@@ -0,0 +1,17 @@
+import { ToastItem } from './toast.type';
+type Listener = (toasts: ToastItem[]) => void;
+/**
+ * Store externo dos toasts. Consumido pelo `<Toaster />` via
+ * `useSyncExternalStore`. Independente de React para permitir a API
+ * imperativa `toast.*` fora de componentes.
+ */
+export declare const toastStore: {
+    subscribe(listener: Listener): () => void;
+    getSnapshot(): ToastItem[];
+    add(toast: Omit<ToastItem, "id"> & {
+        id?: string;
+    }): string;
+    dismiss(id: string): void;
+    clear(): void;
+};
+export {};

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

@@ -2,3 +2,5 @@ export * from './Header';
 export * from './Layout';
 export * from './Footer';
 export * from './HeroSection';
+export * from './Toaster';
+export * from './ConfirmationModal';

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './theme';

package/dist/contexts/theme/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import { ThemeProviderProps } from './theme.type';
+/**
+ * Provedor de tema (light / dark / system) com persistência em localStorage.
+ * Alterna a classe `dark` em `<html>` — os tokens de cor do design system
+ * já reagem a essa classe (ver `styles/colors.css`).
+ */
+export declare const ThemeProvider: ({ children, defaultTheme, storageKey, disableTransitionOnChange }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;

package/dist/contexts/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeProvider';
+export * from './useTheme';
+export * from './theme.type';

package/dist/contexts/theme/theme.context.d.ts

@@ -0,0 +1,7 @@
+import { ThemeContextValue } from './theme.type';
+/**
+ * Contexto interno do tema. Exposto via `useTheme()`.
+ * Mantido em arquivo separado para evitar avisos de fast-refresh
+ * (arquivos de componente devem exportar apenas componentes).
+ */
+export declare const ThemeContext: import('react').Context<ThemeContextValue | undefined>;

package/dist/contexts/theme/theme.type.d.ts

@@ -0,0 +1,23 @@
+/** Temas suportados. `system` segue a preferência do sistema operacional. */
+export type Theme = 'light' | 'dark' | 'system';
+/** Tema efetivamente aplicado no DOM (nunca `system`). */
+export type ResolvedTheme = 'light' | 'dark';
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Tema inicial quando não há nada persistido. Padrão: `system`. */
+    defaultTheme?: Theme;
+    /** Chave usada no localStorage. Padrão: `fast-food-ui-theme`. */
+    storageKey?: string;
+    /** Desabilita as transições de cor no instante da troca de tema (evita flash). */
+    disableTransitionOnChange?: boolean;
+}
+export interface ThemeContextValue {
+    /** Tema escolhido pelo usuário (`light` | `dark` | `system`). */
+    theme: Theme;
+    /** Tema realmente aplicado (resolve `system` para `light`/`dark`). */
+    resolvedTheme: ResolvedTheme;
+    /** Define o tema. */
+    setTheme: (theme: Theme) => void;
+    /** Alterna entre `light` e `dark` (com base no tema resolvido atual). */
+    toggleTheme: () => void;
+}

package/dist/contexts/theme/useTheme.d.ts

@@ -0,0 +1,6 @@
+import { ThemeContextValue } from './theme.type';
+/**
+ * Acessa o tema atual e as ações de troca.
+ * Precisa estar dentro de um `<ThemeProvider>`.
+ */
+export declare const useTheme: () => ThemeContextValue;