forlogic-core 3.0.11 → 4.0.0

package/dist/legacy/components/ui/status-badge.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type LucideIcon } from 'lucide-react';
+export interface StatusBadgeProps {
+    /** Texto exibido no badge */
+    label: string;
+    /** Cor semântica (hex) — gera fundo pastel automaticamente */
+    color: string;
+    /** Ícone Lucide exibido à esquerda do texto */
+    icon?: LucideIcon;
+    /** Exibe o ícone (default: true quando icon fornecido) */
+    showIcon?: boolean;
+    /** Tamanho do badge */
+    size?: 'sm' | 'md' | 'lg';
+    /** Variante visual */
+    variant?: 'filled' | 'outline' | 'ghost';
+    /** Override do fundo pastel automático */
+    backgroundColor?: string;
+    /** Classes adicionais */
+    className?: string;
+}
+export interface StatusConfig {
+    label: string;
+    color: string;
+    icon?: LucideIcon;
+    tooltipText?: string;
+}
+/**
+ * Badge de status genérico e reutilizável.
+ * Aceita cor semântica e gera fundo pastel automaticamente.
+ * Pode ser usado em qualquer CRUD, tabela ou card.
+ *
+ * @example
+ * StatusBadge();
+ */
+export declare function StatusBadge({ label, color, icon: Icon, showIcon, size, variant, backgroundColor, className, }: StatusBadgeProps): React.JSX.Element;
+/**
+ * Cria um lookup type-safe de configuração de status.
+ * Útil para mapear enums de domínio para props do StatusBadge.
+ *
+ * @example
+ * ```ts
+ * const getOrderStatus = createStatusConfig({
+ *   pending: { label: 'Pendente', color: '#8B7355', icon: Clock },
+ *   approved: { label: 'Aprovado', color: '#3D7A40', icon: CheckCircle2 },
+ *   rejected: { label: 'Rejeitado', color: '#B44A4A', icon: X },
+ * });
+ *
+ * // Uso:
+ * const config = getOrderStatus('pending');
+ * <StatusBadge {...config} />
+ * ```
+ */
+export declare function createStatusConfig<T extends string | number>(statuses: Record<T, StatusConfig>): (status: T) => StatusConfig;

package/dist/legacy/components/ui/step-selector.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+/**
+ * @deprecated Use `DialogWizard` para wizards em dialogs. O `StepSelector` será removido em versão futura.
+ * Para wizards dentro de Dialog, use o componente `DialogWizard` que implementa o padrão v2
+ * com stepper vertical lateral.
+ *
+ * StepSelector - Componente de navegação para Wizards multi-etapas (legacy)
+ *
+ * Combina um DropdownMenu para seleção de etapas com uma barra de Progress
+ * para indicação visual do progresso.
+ *
+ * @example
+ * ```tsx
+ * // ✅ Novo padrão — use DialogWizard
+ * <DialogWizard steps={['Tipo', 'Dados', 'Config']} currentStep={step} ... />
+ *
+ * // ⚠️ Legacy — ainda funciona mas será removido
+ * <StepSelector currentStep={step} totalSteps={4} onStepChange={setStep} />
+ * ```
+ */
+export interface StepSelectorProps {
+    /** Etapa atual (1-indexed) */
+    currentStep: number;
+    /** Total de etapas */
+    totalSteps: number;
+    /** Callback chamado quando uma etapa é selecionada */
+    onStepChange: (step: number) => void;
+    /** Labels customizados para cada etapa (opcional) */
+    stepLabels?: string[];
+    /**
+     * Função que valida se pode navegar para uma etapa específica.
+     * Retornar etapas anteriores é sempre permitido.
+     * Se não fornecida, todas as etapas são acessíveis.
+     */
+    canGoToStep?: (targetStep: number) => boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Largura da barra de progresso */
+    progressWidth?: string;
+}
+/**
+ * Função utilitária `StepSelector`.
+ * @example
+ * StepSelector();
+ */
+declare function StepSelector({ currentStep, totalSteps, onStepChange, stepLabels, canGoToStep, className, progressWidth, }: StepSelectorProps): React.JSX.Element;
+export { StepSelector };

package/dist/legacy/components/ui/stimulsoft-viewer.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type IframeDialogProps } from './iframe-dialog';
+/**
+ * Tipo `StimulsoftViewerProps` exportado pela lib.
+ * @example
+ * const value: StimulsoftViewerProps = {} as StimulsoftViewerProps;
+ */
+export interface StimulsoftViewerProps extends Omit<IframeDialogProps, 'url' | 'minHeight'> {
+    /** Base URL of the report API (e.g. environment.reportApiUrl) */
+    reportApiUrl: string;
+    /**
+     * Parameters passed as query-string to the viewer.
+     * Common keys: Lang, Image, ImageFooter, plus report-specific ones.
+     */
+    parameters?: Record<string, string>;
+    /** Min height for the iframe area (default: 80vh) */
+    minHeight?: string;
+}
+/**
+ * Stimulsoft report viewer — wraps IframeDialog pointing to a
+ * Stimulsoft Viewer endpoint with the given parameters.
+ *
+ * Ported from legacy `qex-stimulsoft-viewer`.
+ *
+ * @example
+ * StimulsoftViewer();
+ */
+export declare function StimulsoftViewer({ reportApiUrl, parameters, minHeight, ...dialogProps }: StimulsoftViewerProps): React.JSX.Element;
+export default StimulsoftViewer;

package/dist/legacy/components/ui/tab-page-layout.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module TabPageLayout
+ * Layout padrão da Forlogic Core para o conteúdo interno de uma aba (`TabsContent`).
+ * **Não é shadcn** — composição custom da lib. Use a tríade
+ * `TabPageLayout` (raiz com scroll) → `TabPageHeader` (título + ações) → `TabPageContent`.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="config">
+ *   <TabPageLayout>
+ *     <TabPageHeader title="Configurações" description="Ajustes gerais" actions={<Button>Salvar</Button>} />
+ *     <TabPageContent>{children}</TabPageContent>
+ *   </TabPageLayout>
+ * </TabsContent>
+ * ```
+ *
+ * @see `docs/design-system/layout.md`
+ */
+import { ReactNode } from "react";
+interface TabPageLayoutProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TabPageHeaderProps {
+    title: string | ReactNode;
+    description?: string;
+    actions?: ReactNode;
+    className?: string;
+}
+interface TabPageContentProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Função utilitária `TabPageLayout`.
+ * @example
+ * TabPageLayout();
+ */
+export declare function TabPageLayout({ children, className }: TabPageLayoutProps): import("react").JSX.Element;
+/**
+ * Função utilitária `TabPageHeader`.
+ * @example
+ * TabPageHeader();
+ */
+export declare function TabPageHeader({ title, description, actions, className }: TabPageHeaderProps): import("react").JSX.Element;
+/**
+ * Função utilitária `TabPageContent`.
+ * @example
+ * TabPageContent();
+ */
+export declare function TabPageContent({ children, className }: TabPageContentProps): import("react").JSX.Element;
+export {};

package/dist/legacy/components/ui/terms-of-use-dialog.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+/**
+ * Termo de uso a ser exibido. `file` é base64 (PDF/imagem); `description` aceita HTML.
+ *
+ * @example
+ * ```tsx
+ * const term: TermOfUse = { id: 'v3', description: '<p>Atualizamos...</p>', hasUserSignature: false };
+ * ```
+ */
+export interface TermOfUse {
+    /** Unique identifier */
+    id: string;
+    /** Optional description/summary (may contain HTML) */
+    description?: string;
+    /** Base64-encoded file content */
+    file?: string;
+    /** MIME type of the file (e.g. 'application/pdf') */
+    type?: string;
+    /** Whether the current user has already signed this term */
+    hasUserSignature?: boolean;
+}
+/**
+ * Props do `TermsOfUseDialog`. `onAgree` recebe o `term.id` para
+ * registrar a assinatura no backend.
+ *
+ * @example
+ * ```tsx
+ * const props: TermsOfUseDialogProps = { term, open, onClose, onAgree: signTerm };
+ * ```
+ */
+export interface TermsOfUseDialogProps {
+    /** The term of use to display */
+    term: TermOfUse;
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Called when the user clicks t('terms_see_later') or closes */
+    onClose: () => void;
+    /** Called when the user agrees to the terms. Receives the term ID. */
+    onAgree: (termId: string) => void;
+    /** Override title */
+    title?: string;
+    /** Override t('terms_see_later') button text */
+    seeLaterLabel?: string;
+    /** Override "I have read and agree" button text */
+    agreeLabel?: string;
+    /** Override t('terms_view_short') button text */
+    viewTermLabel?: string;
+}
+/**
+ * Props do `TermsOfUseViewer`. Use `viewOnly` para esconder o botão de assinar.
+ *
+ * @example
+ * ```tsx
+ * const props: TermsOfUseViewerProps = { term, open, onClose, viewOnly: true };
+ * ```
+ */
+export interface TermsOfUseViewerProps {
+    /** The term of use to display */
+    term: TermOfUse;
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Called when closing the viewer */
+    onClose: () => void;
+    /** Called when the user signs the term from inside the viewer. Receives the term ID. */
+    onSign?: (termId: string) => void;
+    /** If true, hides the sign button (view-only mode) */
+    viewOnly?: boolean;
+    /** Override title */
+    title?: string;
+    /** Override sign button text */
+    signLabel?: string;
+}
+/**
+ * Dialog que notifica o usuário sobre uma versão atualizada dos termos de uso.
+ * Mostra a descrição (HTML) e botões para visualizar o arquivo completo,
+ * adiar ("ver depois") ou concordar.
+ *
+ * @example
+ * ```tsx
+ * <TermsOfUseDialog
+ *   term={currentTerm}
+ *   open={hasNewTerm}
+ *   onClose={() => setHasNewTerm(false)}
+ *   onAgree={(id) => api.signTerm(id)}
+ * />
+ * ```
+ */
+export declare function TermsOfUseDialog({ term, open, onClose, onAgree, title, seeLaterLabel, agreeLabel, viewTermLabel, }: TermsOfUseDialogProps): React.JSX.Element;
+/**
+ * Visualizador full-screen do arquivo do termo de uso (PDF etc.) em iframe.
+ * Mostra opcionalmente um botão de assinar (oculto se `viewOnly` ou se já assinado).
+ *
+ * @example
+ * ```tsx
+ * <TermsOfUseViewer
+ *   term={term}
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSign={(id) => api.signTerm(id)}
+ * />
+ * ```
+ */
+export declare function TermsOfUseViewer({ term, open, onClose, onSign, viewOnly, title, signLabel, }: TermsOfUseViewerProps): React.JSX.Element;

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Grupo de toggles (single ou multiple). Compartilha `variant`/`size` com seus
+ * `ToggleGroupItem` filhos via Context. Use `type="single"` para seleção única
+ * (rádio-like) ou `type="multiple"` para múltipla.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" value={align} onValueChange={setAlign} variant="outline">
+ *   <ToggleGroupItem value="left"><AlignLeft /></ToggleGroupItem>
+ *   <ToggleGroupItem value="center"><AlignCenter /></ToggleGroupItem>
+ *   <ToggleGroupItem value="right"><AlignRight /></ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "sm" | "lg" | "default";
+} & import("class-variance-authority/types").ClassProp) => string>) & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Item individual de um `ToggleGroup`. Herda `variant`/`size` do grupo, mas
+ * pode sobrescrever localmente.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroupItem value="bold" aria-label="Negrito">
+ *   <Bold className="h-4 w-4" />
+ * </ToggleGroupItem>
+ * ```
+ */
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "sm" | "lg" | "default";
+} & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Variantes do `Toggle` (cva). Combina `variant` (`default` | `outline`) e
+ * `size` (`default` | `sm` | `lg`). Reutilizado por `ToggleGroupItem`.
+ *
+ * @example
+ * ```tsx
+ * <button className={toggleVariants({ variant: 'outline', size: 'sm' })}>B</button>
+ * ```
+ */
+declare const toggleVariants: (props?: {
+    variant?: "default" | "outline";
+    size?: "sm" | "lg" | "default";
+} & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * Botão alternável (on/off). Use para ações binárias como "Negrito", "Itálico"
+ * em editores ou "Modo escuro" em preferências. Estado controlado via `pressed` +
+ * `onPressedChange` (Radix Toggle).
+ *
+ * @example
+ * ```tsx
+ * <Toggle variant="outline" pressed={bold} onPressedChange={setBold}>
+ *   <Bold className="h-4 w-4" />
+ * </Toggle>
+ * ```
+ */
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "sm" | "lg" | "default";
+} & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,61 @@
+/**
+ * @module Tooltip
+ * Tooltip por hover/focus. Composição: `TooltipProvider` (envolve a árvore — pode ser global)
+ * + `Tooltip` (raiz por instância) + `TooltipTrigger` (use `asChild` para reaproveitar elemento)
+ * + `TooltipContent` (texto, com `side`, `sideOffset`, etc).
+ *
+ * `delayDuration` padrão de **300ms** (override do shadcn). Reduz flicker em listas densas.
+ */
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+/**
+ * Provider global de tooltips. Envolva a árvore uma única vez (já incluso em `CoreProviders`).
+ * `delayDuration` padrão: **300ms**.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={300}>
+ *   <App />
+ * </TooltipProvider>
+ * ```
+ */
+declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => React.JSX.Element;
+/**
+ * Raiz de uma instância de tooltip. Re-exporta `TooltipPrimitive.Root` do Radix.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger asChild><Button>?</Button></TooltipTrigger>
+ *   <TooltipContent>Ajuda</TooltipContent>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * Trigger do tooltip. Use `asChild` para herdar o elemento filho (recomendado para botões/ícones).
+ *
+ * @example
+ * ```tsx
+ * <TooltipTrigger asChild>
+ *   <Button variant="icon"><Info /></Button>
+ * </TooltipTrigger>
+ * ```
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Conteúdo do tooltip. Aceita `side` (`top`/`right`/`bottom`/`left`) e `sideOffset` (padrão 4).
+ *
+ * Renderizado via `TooltipPrimitive.Portal` (default: `document.body`) para evitar clipping
+ * em containers com `overflow-auto`/`overflow-hidden` (sidebars, cards com scroll, dialogs).
+ * Use a prop opcional `container` para portar para um nó específico (casos avançados).
+ *
+ * @example
+ * ```tsx
+ * <TooltipContent side="right" sideOffset={8}>Texto explicativo</TooltipContent>
+ * ```
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/legacy/components/ui/truncated-cell.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface TruncatedCellProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Célula com `text-overflow: ellipsis` que detecta truncamento via `ResizeObserver`
+ * e exibe automaticamente um `Tooltip` com o conteúdo completo apenas quando há overflow.
+ *
+ * Disponível também como **alias `EllipsisText`** (padrão de mercado, exportado em `forlogic-core`).
+ *
+ * @example
+ * ```tsx
+ * <TruncatedCell>{textoLongo}</TruncatedCell>
+ * ```
+ *
+ * @see `docs/design-system/data-display.md`
+ */
+export declare function TruncatedCell({ children, className }: TruncatedCellProps): React.JSX.Element;
+export {};

package/dist/legacy/components/ui/updates-notification.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type UpdateNotificationItem } from '../../hooks/useUpdatesNotification';
+/** @deprecated Use `UpdateNotificationItem` instead */
+export type UpdateNotification = UpdateNotificationItem;
+export type { UpdateNotificationItem };
+/**
+ * Props do `UpdatesNotification`. Quando `updates` é `undefined`, ativa o modo
+ * automático (busca da API via `useUpdatesNotification`); quando é um array,
+ * o componente fica controlado.
+ *
+ * @example
+ * ```tsx
+ * // Modo controlado:
+ * const props: UpdatesNotificationProps = { updates: [], badgeCount: 0 };
+ * ```
+ */
+export interface UpdatesNotificationProps {
+    /** Lista de atualizações (undefined = modo automático, [] = vazio controlado) */
+    updates?: UpdateNotificationItem[];
+    /** Badge numérico (undefined = modo automático) */
+    badgeCount?: number;
+    onOpen?: () => void;
+    onViewAll?: () => void;
+    /**
+     * Rota interna (relativa ao router do app, sem base path) do portal de
+     * atualizações. Quando informada, navega internamente em vez de abrir o app
+     * Common V5. Default: abre `{commonV5AppUrl}{alias}/up/view` em nova aba.
+     */
+    viewAllPath?: string;
+}
+/**
+ * Botão de notificações do header (ícone de café ☕). Possui dois modos:
+ *
+ * - **Automático** (sem props): busca atualizações via `useUpdatesNotification`,
+ *   marca como visualizado ao abrir e navega para a rota de atualizações do app.
+ * - **Controlado**: passe `updates` + `badgeCount` + `onOpen` + `onViewAll`.
+ *
+ * @example Automático (recomendado dentro do AppHeader)
+ * ```tsx
+ * <UpdatesNotification />
+ * ```
+ *
+ * @example Controlado
+ * ```tsx
+ * <UpdatesNotification
+ *   updates={updates}
+ *   badgeCount={updates.length}
+ *   onOpen={markAllRead}
+ *   onViewAll={() => navigate('/updates')}
+ * />
+ * ```
+ */
+export declare const UpdatesNotification: React.ForwardRefExoticComponent<UpdatesNotificationProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/legacy/components/ui/users-groups-selector.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+/**
+ * Usuário disponível para seleção. `groupIds` permite o filtro por grupo no header.
+ *
+ * @example
+ * ```tsx
+ * const u: UsersGroupUser = { id: '42', name: 'Ana', email: 'ana@x.com', groupIds: ['g1'] };
+ * ```
+ */
+export interface UsersGroupUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+    groupIds?: string[];
+}
+/**
+ * Grupo usado para filtrar a lista de usuários.
+ *
+ * @example
+ * ```tsx
+ * const g: UsersGroup = { id: 'g1', name: 'Liderança' };
+ * ```
+ */
+export interface UsersGroup {
+    id: string;
+    name: string;
+}
+/**
+ * Props do `UsersGroupsSelector`. Componente controlado: passe `value` (IDs
+ * selecionados) + `onChange`. Quando `disabled`, esconde o header de edição.
+ *
+ * @example
+ * ```tsx
+ * const props: UsersGroupsSelectorProps = {
+ *   users, groups, value, onChange: setSelected
+ * };
+ * ```
+ */
+export interface UsersGroupsSelectorProps {
+    /** Available users to select from */
+    users: UsersGroupUser[];
+    /** Available groups for filtering */
+    groups?: UsersGroup[];
+    /** Currently selected user IDs (controlled) */
+    value: string[];
+    /** Called when selection changes */
+    onChange: (selectedIds: string[]) => void;
+    /** Whether the component is editable */
+    disabled?: boolean;
+    /** Max height of the user list in px */
+    maxHeight?: number;
+    /** Hide the group filter dropdown */
+    hideGroupFilter?: boolean;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Label for "Select" action */
+    selectLabel?: string;
+    /** Label for "Done" action */
+    doneLabel?: string;
+    /** Label for "All" checkbox */
+    allLabel?: string;
+    /** Label for empty state */
+    emptyLabel?: string;
+    /** Label for selected count (singular) */
+    selectedLabel?: string;
+    /** Label for selected count (plural) */
+    selectedPluralLabel?: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Seletor de usuários com avatar, busca por nome/email, filtro por grupo e
+ * "selecionar todos". Possui dois modos visuais alternados pelo header:
+ * **leitura** (mostra apenas selecionados) e **edição** (lista completa filtrável).
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>([]);
+ * <UsersGroupsSelector
+ *   users={users}
+ *   groups={groups}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export declare function UsersGroupsSelector({ users, groups, value, onChange, disabled, maxHeight, hideGroupFilter, searchPlaceholder, selectLabel, doneLabel, allLabel, emptyLabel, selectedLabel, selectedPluralLabel, className, }: UsersGroupsSelectorProps): React.JSX.Element;