forlogic-core 3.0.10 → 4.0.0

package/dist/legacy/components/ui/empty-state.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from "react";
+/**
+ * EmptyStateProps
+ *
+ * Propriedades do componente EmptyState.
+ *
+ * @property icon - Ícone customizado (sobrescreve o variant)
+ * @property title - Título principal
+ * @property description - Descrição opcional
+ * @property action - Botão de ação opcional
+ * @property className - Classes CSS adicionais
+ * @property variant - Tipo de estado vazio (default, search, error)
+ */
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+    variant?: "default" | "search" | "error";
+}
+/**
+ * EmptyState Component
+ *
+ * Componente para exibir estados vazios com ícone, mensagem e ação opcional.
+ *
+ * @example
+ * ```tsx
+ * // Estado vazio padrão
+ * <EmptyState
+ *   title={t('no_items_found_empty')}
+ *   description=t('add_first_item')
+ *   action={{
+ *     label: t('add_item'),
+ *     onClick: () => handleAddItem()
+ *   }}
+ * />
+ *
+ * // Sem resultados de busca
+ * <EmptyState
+ *   variant="search"
+ *   title={t('no_results')}
+ *   description=t('try_adjust_search')
+ * />
+ *
+ * // Estado de erro
+ * <EmptyState
+ *   variant="error"
+ *   title={t('error_loading_data')}
+ *   description=t('could_not_load_info')
+ *   action={{
+ *     label: t('try_again'),
+ *     onClick: () => refetch()
+ *   }}
+ * />
+ *
+ * // Ícone customizado
+ * <EmptyState
+ *   icon={<Package className="h-8 w-8" />}
+ *   title={t('no_products')}
+ * />
+ * ```
+ *
+ * ## Variants
+ * - `default`: Ícone FileX - para listas vazias gerais
+ * - `search`: Ícone Search - para resultados de busca vazios
+ * - `error`: Ícone AlertCircle - para estados de erro
+ *
+ * ## Características
+ * - Ícones pré-configurados por variant
+ * - Suporte a ícone customizado
+ * - Botão de ação opcional
+ * - Centralizado e responsivo
+ */
+export declare function EmptyState({ icon, title, description, action, className, variant }: EmptyStateProps): import("react").JSX.Element;
+export {};

package/dist/legacy/components/ui/export-dialog.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+/**
+ * Enum `ExportFormat` exportado pela lib.
+ * @example
+ * const v = ExportFormat;
+ */
+export declare enum ExportFormat {
+    CSV = "csv",
+    PDF = "pdf",
+    XLSX = "xlsx",
+    PNG = "png",
+    JPEG = "jpeg",
+    SVG = "svg"
+}
+/**
+ * Tipo `ExportDialogOption` exportado pela lib.
+ * @example
+ * const value: ExportDialogOption = {} as ExportDialogOption;
+ */
+export interface ExportDialogOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+/**
+ * Tipo `ExportDialogProps` exportado pela lib.
+ * @example
+ * const value: ExportDialogProps = {} as ExportDialogProps;
+ */
+export interface ExportDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onExport: (format: string) => void;
+    /** 'table' shows CSV/PDF/XLSX, 'chart' shows PNG/JPEG/SVG/PDF */
+    mode?: 'table' | 'chart';
+    /** Override default options */
+    options?: ExportDialogOption[];
+    title?: string;
+    description?: string;
+    cancelLabel?: string;
+    exportLabel?: string;
+}
+/**
+ * Função utilitária `ExportDialog`.
+ * @example
+ * ExportDialog();
+ */
+export declare function ExportDialog({ open, onOpenChange, onExport, mode, options, title, description, cancelLabel, exportLabel, }: ExportDialogProps): React.JSX.Element;

package/dist/legacy/components/ui/forlogic-assembly.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * Props do `ForlogicAssembly`.
+ */
+export interface ForlogicAssemblyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tamanho (px quando número). Default: 56. */
+    size?: number | string;
+    /** Cor base da marca (herdada por `currentColor`). */
+    color?: string;
+    /** Aumenta a opacidade dos blocos (uso em fundos claros). */
+    emphasis?: boolean;
+    /** Rótulo acessível. */
+    label?: string;
+    /** Força o estado revelado (sem hover). */
+    active?: boolean;
+    /** Classe do SVG interno. */
+    svgClassName?: string;
+    /** Classe de cada bloco. */
+    pieceClassName?: string;
+}
+/**
+ * Animação premium da marca Forlogic (3 blocos com revelação escalonada).
+ *
+ * Revela os blocos em `hover`/`focus-within` do grupo pai (`group`) ou quando
+ * `active` é verdadeiro. Usada como decoração dos `StatCard` e reutilizável em loaders.
+ *
+ * @example
+ * ```tsx
+ * <ForlogicAssembly size={56} active />
+ * ```
+ */
+export declare const ForlogicAssembly: React.ForwardRefExoticComponent<ForlogicAssemblyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/legacy/components/ui/forlogic-loader.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+declare const SIZES: {
+    readonly sm: "h-5 w-5";
+    readonly md: "h-8 w-8";
+    readonly lg: "h-12 w-12";
+    readonly xl: "h-20 w-20";
+};
+/**
+ * Props do `ForlogicLoader`.
+ */
+export interface ForlogicLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tamanho do loader. Default: `md`. */
+    size?: keyof typeof SIZES;
+    /** Duração de um ciclo da órbita. Default: `1900ms`. */
+    duration?: string;
+    /** Rótulo acessível / texto opcional. */
+    label?: string;
+    /** Exibe o rótulo visualmente (default apenas leitor de tela). */
+    showLabel?: boolean;
+}
+/**
+ * Loader baseado na marca Forlogic (órbita dos 3 blocos).
+ *
+ * @example
+ * ```tsx
+ * <ForlogicLoader size="lg" showLabel label="Carregando dados" />
+ * ```
+ */
+export declare const ForlogicLoader: React.ForwardRefExoticComponent<ForlogicLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/legacy/components/ui/forlogic-mark.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Paths dos 3 blocos que compõem a marca Forlogic.
+ * Exportado para reutilização em loaders e decorações.
+ */
+export declare const FORLOGIC_PIECES: readonly ["M0 16.6702V8.05894C0 7.28714 0.928937 6.87021 1.53434 7.36945L15.8045 19.1542C16.2918 19.5563 16.2266 20.3052 15.6767 20.6223L11.2959 23.1468C11.0029 23.3155 10.6391 23.3155 10.3461 23.1468L0.456838 17.4501C0.173574 17.2868 0 16.9913 0 16.6715V16.6702Z", "M3.28677 4.20813L10.3739 0.126497C10.6669 -0.0421656 11.0307 -0.0421656 11.3237 0.126497L18.0581 4.00573C18.6774 4.3633 18.6636 5.239 18.0332 5.57632L9.5033 10.1464C9.16449 10.3286 8.74515 10.2867 8.45078 10.0439L3.15902 5.67617C2.67164 5.27408 2.7369 4.52521 3.28677 4.20813Z", "M12.0721 11.4257L20.4645 6.92851C21.0851 6.59523 21.8461 7.03241 21.8461 7.72055V16.5517C21.8461 16.8729 21.6711 17.1683 21.3878 17.3316L19.5314 18.3949C19.1898 18.5905 18.7579 18.5541 18.4552 18.3045L11.9193 12.9086C11.4222 12.4984 11.5014 11.732 12.0721 11.4257Z"];
+/**
+ * Props do primitivo SVG da marca.
+ */
+export interface ForlogicMarkPiecesProps extends React.SVGProps<SVGSVGElement> {
+    /** Classe aplicada em cada bloco (`path`) da marca. */
+    pieceClassName?: string;
+}
+/**
+ * Primitivo SVG dos 3 blocos da marca Forlogic.
+ *
+ * Não possui animação própria — combine com as classes
+ * `ds-forlogic-assembly` (revelação) ou `ds-forlogic-orbit` (loader).
+ *
+ * @example
+ * ```tsx
+ * <ForlogicMarkPieces className="ds-forlogic-orbit h-8 w-8 text-primary" />
+ * ```
+ */
+export declare const ForlogicMarkPieces: React.ForwardRefExoticComponent<Omit<ForlogicMarkPiecesProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/legacy/components/ui/form.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+/**
+ * Provider raiz do formulário (alias de `FormProvider` do `react-hook-form`).
+ * Sempre passe o objeto retornado por `useForm()` via spread (`{...form}`).
+ *
+ * @example
+ * const form = useForm<Inputs>({ defaultValues: { email: '' } });
+ *
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField name="email" control={form.control} render={...} />
+ *   </form>
+ * </Form>
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * Conecta um campo do `react-hook-form` ao sistema de Form da lib.
+ * Forneça `control` (de `useForm()`) e `name`. Os IDs e o estado de erro fluem automaticamente
+ * para `FormLabel`, `FormControl`, `FormDescription` e `FormMessage`.
+ *
+ * @example
+ * ```tsx
+ * const form = useForm<Inputs>();
+ *
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="email"
+ *       render={({ field }) => (
+ *         <FormItem>
+ *           <FormLabel>Email</FormLabel>
+ *           <FormControl><Input {...field} /></FormControl>
+ *           <FormMessage />
+ *         </FormItem>
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ * ```
+ *
+ * @see `docs/design-system/inputs.md`
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+/**
+ * Hook interno usado pelos subcomponentes (`FormLabel`, `FormControl`,
+ * `FormDescription`, `FormMessage`) para acessar IDs e estado de erro do campo
+ * envolvente. Deve ser chamado **dentro** de um `FormField` + `FormItem`.
+ *
+ * Útil quando você cria um wrapper customizado e precisa do estado:
+ *
+ * @example
+ * function CustomError() {
+ *   const { error, formMessageId } = useFormField();
+ *   return error ? <span id={formMessageId} className="text-danger">{String(error.message)}</span> : null;
+ * }
+ */
+declare const 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;
+};
+/**
+ * Wrapper de um campo do formulário (gera um `id` único compartilhado pelos filhos).
+ * Sempre o filho direto do `render` de um `FormField`.
+ *
+ * @example
+ * <FormItem>
+ *   <FormLabel>Email</FormLabel>
+ *   <FormControl><Input type="email" {...field} /></FormControl>
+ *   <FormDescription>Nunca compartilharemos seu email.</FormDescription>
+ *   <FormMessage />
+ * </FormItem>
+ */
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Label do campo (já conectado via `htmlFor` ao `FormControl`). Aplica cor
+ * `text-destructive` automaticamente quando o campo tem erro.
+ *
+ * @example
+ * <FormLabel>Nome completo</FormLabel>
+ */
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Slot que injeta `id`, `aria-describedby` e `aria-invalid` no input filho.
+ * Use **um único filho** (Input, Textarea, Combobox, Select, etc).
+ *
+ * @example
+ * <FormControl><Input placeholder="seu@email.com" {...field} /></FormControl>
+ */
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Texto de ajuda exibido abaixo do controle (em `text-muted-foreground`).
+ * Já mapeado para `aria-describedby` do input.
+ *
+ * @example
+ * <FormDescription>Mínimo de 8 caracteres, com pelo menos um número.</FormDescription>
+ */
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Mensagem de erro do campo (`text-danger`). Renderiza automaticamente o
+ * `error.message` do `react-hook-form` — não precisa passar `children`.
+ *
+ * @example
+ * <FormMessage />
+ * // Com fallback custom (sem erro):
+ * <FormMessage>Preencha um valor válido.</FormMessage>
+ */
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/legacy/components/ui/grid.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+/**
+ * GridProps
+ *
+ * Propriedades do componente Grid.
+ *
+ * @property children - Elementos filhos do grid
+ * @property cols - Número de colunas ou modo responsivo (auto-fit/auto-fill)
+ * @property gap - Espaçamento entre itens
+ * @property className - Classes CSS adicionais
+ */
+interface GridProps {
+    children: ReactNode;
+    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "auto-fit" | "auto-fill";
+    gap?: "xs" | "sm" | "md" | "lg" | "xl";
+    className?: string;
+}
+/**
+ * Grid Component
+ *
+ * Sistema de grid responsivo com configuração simplificada.
+ *
+ * @example
+ * ```tsx
+ * // Grid com 3 colunas fixas
+ * <Grid cols="3" gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Grid>
+ *
+ * // Grid responsivo (auto-fit)
+ * <Grid cols="auto-fit" gap="lg">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Grid>
+ * ```
+ *
+ * ## Opções de Colunas
+ * - `"1"` a `"6"`: Número fixo de colunas
+ * - `"auto-fit"`: Ajusta automaticamente o número de colunas (mín. 250px)
+ * - `"auto-fill"`: Preenche o espaço disponível (mín. 250px)
+ *
+ * ## Opções de Gap
+ * - `xs`: 0.25rem (4px)
+ * - `sm`: 0.5rem (8px)
+ * - `md`: 1rem (16px) - padrão
+ * - `lg`: 1.5rem (24px)
+ * - `xl`: 2rem (32px)
+ */
+export declare function Grid({ children, cols, gap, className }: GridProps): import("react").JSX.Element;
+export {};

package/dist/legacy/components/ui/iframe-dialog.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * Tipo `IframeDialogProps` exportado pela lib.
+ * @example
+ * const value: IframeDialogProps = {} as IframeDialogProps;
+ */
+export interface IframeDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** URL to embed in the iframe */
+    url: string;
+    /** Optional title for the dialog header */
+    title?: string;
+    /** Custom className */
+    className?: string;
+    /** Min height for the iframe area */
+    minHeight?: string;
+}
+/**
+ * Função utilitária `IframeDialog`.
+ * @example
+ * IframeDialog();
+ */
+export declare function IframeDialog({ open, onOpenChange, url, title, className, minHeight, }: IframeDialogProps): React.JSX.Element;
+export default IframeDialog;

package/dist/legacy/components/ui/input-group.d.ts

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonProps } from "./button";
+/**
+ * InputGroup Component
+ *
+ * Agrupa inputs com addons de prefixo, sufixo, ícones e botões.
+ * Segue a API oficial do shadcn/ui.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon>
+ *     <Search className="h-4 w-4" />
+ *   </InputGroupAddon>
+ *   <InputGroupInput placeholder="Buscar..." />
+ * </InputGroup>
+ * ```
+ */
+declare const InputGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * InputGroupAddon Variants
+ *
+ * @example
+ * inputGroupAddonVariants;
+ */
+declare const inputGroupAddonVariants: (props?: {
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start";
+} & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * Tipo `InputGroupAddonProps` exportado pela lib.
+ * @example
+ * const value: InputGroupAddonProps = {} as InputGroupAddonProps;
+ */
+export interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupAddonVariants> {
+}
+/**
+ * InputGroupAddon Component
+ *
+ * Exibe ícones, textos, botões ou outros conteúdos junto aos inputs.
+ *
+ * @prop align - Alinhamento do addon: "inline-start" | "inline-end" | "block-start" | "block-end"
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-start">
+ *   <Search className="h-4 w-4" />
+ * </InputGroupAddon>
+ * ```
+ */
+declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * InputGroupButton Variants
+ *
+ * @example
+ * inputGroupButtonVariants;
+ */
+declare const inputGroupButtonVariants: (props?: {
+    size?: "sm" | "md" | "xs" | "icon-sm" | "icon-xs" | "icon-md";
+} & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * Tipo `InputGroupButtonProps` exportado pela lib.
+ * @example
+ * const value: InputGroupButtonProps = {} as InputGroupButtonProps;
+ */
+export interface InputGroupButtonProps extends Omit<ButtonProps, "size">, VariantProps<typeof inputGroupButtonVariants> {
+}
+/**
+ * InputGroupButton Component
+ *
+ * Botão estilizado para uso dentro de InputGroup.
+ *
+ * @prop size - Tamanho do botão: "md" | "icon-md" (default) | "sm" | "icon-sm" | "xs" | "icon-xs"
+ * @prop variant - Variante do botão (herda do Button)
+ *
+ * @example
+ * ```tsx
+ * <InputGroupButton variant="ghost" size="icon-md">
+ *   <X className="h-4 w-4" />
+ * </InputGroupButton>
+ * ```
+ */
+declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * InputGroupInput Component
+ *
+ * Input estilizado para uso dentro de InputGroup.
+ * Remove bordas e estilos de foco para integração com o grupo.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupInput placeholder="Digite aqui..." />
+ * ```
+ */
+declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<Omit<import("./input").InputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * InputGroupTextarea Component
+ *
+ * Textarea estilizado para uso dentro de InputGroup.
+ * Usado com align="block-start" ou "block-end" no addon.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup className="flex-col">
+ *   <InputGroupAddon align="block-start">
+ *     <span>Descrição</span>
+ *   </InputGroupAddon>
+ *   <InputGroupTextarea placeholder="Digite..." />
+ * </InputGroup>
+ * ```
+ */
+declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea").TextareaProps & React.RefAttributes<HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };

package/dist/legacy/components/ui/loading-state.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+interface LoadingStateProps {
+    isLoading: boolean;
+    children: ReactNode;
+    className?: string;
+    type?: "spinner" | "skeleton" | "overlay";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Componente para gerenciar estados de loading de forma declarativa
+ *
+ * Oferece 3 tipos de loading states:
+ * - **spinner**: Mostra apenas o spinner (esconde children)
+ * - **skeleton**: Mostra um placeholder animado
+ * - **overlay**: Mostra children com spinner sobreposto
+ *
+ * @example
+ * ```typescript
+ * import { LoadingState } from 'forlogic-core/modular';
+ *
+ * function MyComponent() {
+ *   const { data, isLoading } = useQuery(...);
+ *
+ *   return (
+ *     <LoadingState isLoading={isLoading} type="spinner">
+ *       <div>{data?.content}</div>
+ *     </LoadingState>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Skeleton para placeholders
+ * <LoadingState isLoading={isLoading} type="skeleton" className="h-32">
+ *   <ProductCard product={product} />
+ * </LoadingState>
+ *
+ * // Overlay para preservar layout
+ * <LoadingState isLoading={isSaving} type="overlay">
+ *   <form>...</form>
+ * </LoadingState>
+ * ```
+ *
+ * @param props.isLoading Se true, mostra o estado de loading
+ * @param props.children Conteúdo a ser renderizado quando não está loading
+ * @param props.type Tipo de loading: "spinner" | "skeleton" | "overlay" (default: "spinner")
+ * @param props.size Tamanho do spinner: "sm" | "md" | "lg" (default: "md")
+ * @param props.className Classes CSS adicionais
+ */
+export declare function LoadingState({ isLoading, children, className, type, size }: LoadingStateProps): import("react").JSX.Element;
+export {};