@archbase/components 3.0.0

package/dist/list-view/ArchbaseListViewTable.d.ts

@@ -0,0 +1,111 @@
+import React, { ReactNode } from 'react';
+export interface ArchbaseListViewColumn<T = any> {
+    /**
+     * Identificador único da coluna (key)
+     */
+    key: keyof T | (string & NonNullable<unknown>);
+    /**
+     * Título da coluna
+     */
+    title?: ReactNode;
+    /**
+     * Largura da coluna em pixels
+     */
+    width?: string | number;
+    /**
+     * Renderizador customizado para a célula
+     */
+    renderCell?: (record: T, index: number) => ReactNode;
+    /**
+     * Alinhamento do conteúdo
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * Se a coluna é ordenável
+     */
+    sortable?: boolean;
+    /**
+     * Se a coluna é redimensionável
+     */
+    resizable?: boolean;
+}
+export interface ArchbaseListViewProps<T = any> {
+    /**
+     * Dados a serem exibidos
+     */
+    data: T[];
+    /**
+     * Colunas da tabela
+     */
+    columns: ArchbaseListViewColumn<T>[];
+    /**
+     * Callback quando uma linha é clicada
+     */
+    onRowClick?: (record: T, index: number) => void;
+    /**
+     * Callback quando uma linha é duplamente clicada
+     */
+    onRowDoubleClick?: (record: T, index: number) => void;
+    /**
+     * Altura da tabela em pixels
+     */
+    height?: number | string;
+    /**
+     * Largura da tabela
+     */
+    width?: number | string;
+    /**
+     * Borda ao redor da tabela
+     */
+    withTableBorder?: boolean;
+    /**
+     * Borda nas colunas
+     */
+    withColumnBorders?: boolean;
+    /**
+     * Borda nas linhas
+     */
+    withRowBorders?: boolean;
+    /**
+     * Row key (para identificar linhas únicas)
+     */
+    rowKey?: keyof T | ((record: T, index: number) => React.Key);
+    /**
+     * Estilo adicional do container
+     */
+    style?: React.CSSProperties;
+    /**
+     * ClassName adicional
+     */
+    className?: string;
+}
+/**
+ * Componente ArchbaseListViewTable
+ *
+ * Wrapper sobre @gfazioli/mantine-list-view-table para criar tabelas no estilo
+ * Finder do macOS, com suporte a ordenação, redimensionamento de colunas e mais.
+ *
+ * @example
+ * ```tsx
+ * interface FileSystemItem {
+ *   id: string;
+ *   name: string;
+ *   size: number;
+ *   type: 'file' | 'folder';
+ * }
+ *
+ * const columns: ArchbaseListViewColumn<FileSystemItem>[] = [
+ *   { key: 'name', title: 'Nome', width: 200 },
+ *   { key: 'size', title: 'Tamanho', width: 100, textAlign: 'right' },
+ *   { key: 'type', title: 'Tipo', width: 100 },
+ * ];
+ *
+ * <ArchbaseListViewTable
+ *   data={fileSystemData}
+ *   columns={columns}
+ *   onRowClick={(item, index) => console.log('Clicked:', item)}
+ *   height={400}
+ * />
+ * ```
+ */
+export declare function ArchbaseListViewTable<T = any>({ data, columns, onRowClick, onRowDoubleClick, height, width, withTableBorder, withColumnBorders, withRowBorders, rowKey, style, className, }: ArchbaseListViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/list-view/index.d.ts

@@ -0,0 +1,2 @@
+export { ArchbaseListViewTable } from './ArchbaseListViewTable';
+export type { ArchbaseListViewProps, ArchbaseListViewColumn } from './ArchbaseListViewTable';

package/dist/markdown/ArchbaseMarkdown.d.ts

@@ -0,0 +1,23 @@
+import type { ArchbaseMarkdownProps } from './ArchbaseMarkdown.types';
+/**
+ * Componente ArchbaseMarkdown - Renderização de Markdown em React
+ *
+ * Baseado em react-markdown com plugins remark/rehype.
+ *
+ * @example
+ * ```tsx
+ * <ArchbaseMarkdown>
+ *   # Título
+ *
+ *   Este é um parágrafo com **negrito** e *itálico*.
+ *
+ *   ```typescript
+ *   const x = 42;
+ *   ```
+ * </ArchbaseMarkdown>
+ * ```
+ */
+export declare function ArchbaseMarkdown({ children, codeOptions, linkOptions, tableOptions, listOptions, pluginOptions, components: customComponents, style, className, contentClassName, disabled, loading, error, ariaLabel, role, onLoadStart, onLoadEnd, onError, onLinkClick, skipHtml, unwrapDisallowed, }: ArchbaseMarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ArchbaseMarkdown {
+    var displayName: string;
+}

package/dist/markdown/ArchbaseMarkdown.types.d.ts

@@ -0,0 +1,181 @@
+import type { CSSProperties, ReactNode, ElementType } from 'react';
+import type { PluggableList } from 'unified';
+/**
+ * Estilo de syntax highlighting para blocos de código
+ */
+export type SyntaxHighlightTheme = 'atom-one-dark' | 'atom-one-light' | 'github-dark' | 'github-light' | 'monokai' | 'nord' | 'dracula' | 'cool' | 'high-contrast';
+/**
+ * Estilo de código inline
+ */
+export type CodeInlineStyle = 'inline' | 'shiki' | 'none';
+/**
+ * Opções de renderização de código
+ */
+export interface CodeOptions {
+    /** Habilitar syntax highlighting */
+    highlightEnabled?: boolean;
+    /** Tema para syntax highlighting */
+    highlightTheme?: SyntaxHighlightTheme;
+    /** Mostrar números de linha */
+    showLineNumbers?: boolean;
+    /** Linguagem padrão quando não especificada */
+    defaultLanguage?: string;
+    /** Estilo de código inline */
+    inlineStyle?: CodeInlineStyle;
+}
+/**
+ * Opções de links
+ */
+export interface LinkOptions {
+    /** Abrir links externos em nova aba */
+    openExternalInNewTab?: boolean;
+    /** Adicionar atributo rel nofollow em links externos */
+    externalNoFollow?: boolean;
+    /** Adicionar atributo rel noopener em links externos */
+    externalNoOpener?: boolean;
+    /** Função customizada para validar URLs */
+    isUrlCustom?: (url: string) => boolean;
+}
+/**
+ * Opções de tabela
+ */
+export interface TableOptions {
+    /** Classe CSS base para tabelas */
+    tableClassName?: string;
+    /** Classe CSS para cabeçalho */
+    headerClassName?: string;
+    /** Classe CSS para corpo */
+    bodyClassName?: string;
+    /** Habilitar estilo striped */
+    striped?: boolean;
+    /** Habilitar hover nas linhas */
+    hover?: boolean;
+    /** Habilitar bordas */
+    bordered?: boolean;
+}
+/**
+ * Opções de lista
+ */
+export interface ListOptions {
+    /** Classe CSS base para listas */
+    listClassName?: string;
+    /** Classe CSS para itens de lista */
+    itemClassName?: string;
+    /** Estilo de marker para listas ordenadas */
+    orderedListStyle?: 'decimal' | 'lower-alpha' | 'upper-alpha' | 'lower-roman' | 'upper-roman';
+}
+/**
+ * Plugin options para remark/rehype
+ */
+export interface PluginOptions {
+    /** Plugins remark customizados */
+    remarkPlugins?: PluggableList;
+    /** Plugins rehype customizados */
+    rehypePlugins?: PluggableList;
+    /** Habilitar GitHub Flavored Markdown */
+    remarkGfm?: boolean;
+    /** Habilitar HTML inline no markdown */
+    rehypeRaw?: boolean;
+}
+/**
+ * Configurações de renderização customizada
+ * Nota: Usamos Omit para evitar conflitos de tipo com Components de react-markdown
+ */
+export interface CustomComponents {
+    /** Componente customizado para parágrafos */
+    p?: ElementType;
+    /** Componente customizado para headings */
+    h1?: ElementType;
+    h2?: ElementType;
+    h3?: ElementType;
+    h4?: ElementType;
+    h5?: ElementType;
+    h6?: ElementType;
+    /** Componente customizado para listas */
+    ul?: ElementType;
+    ol?: ElementType;
+    li?: ElementType;
+    /** Componente customizado para blockquote */
+    blockquote?: ElementType;
+    /** Componente customizado para código */
+    code?: ElementType;
+    pre?: ElementType;
+    /** Componente customizado para tabelas */
+    table?: ElementType;
+    thead?: ElementType;
+    tbody?: ElementType;
+    tr?: ElementType;
+    th?: ElementType;
+    td?: ElementType;
+    /** Componente customizado para links */
+    a?: ElementType;
+    /** Componente customizado para imagens */
+    img?: ElementType;
+    /** Componente customizado para HR */
+    hr?: ElementType;
+    /** Componente customizado para strong/bold */
+    strong?: ElementType;
+    /** Componente customizado para emphasis/italic */
+    em?: ElementType;
+    /** Componente customizado para del */
+    del?: ElementType;
+}
+/**
+ * Props do componente ArchbaseMarkdown
+ */
+export interface ArchbaseMarkdownProps {
+    /** Conteúdo Markdown a ser renderizado */
+    children: string;
+    /** --- Opções de Código --- */
+    codeOptions?: CodeOptions;
+    /** --- Opções de Links --- */
+    linkOptions?: LinkOptions;
+    /** --- Opções de Tabela --- */
+    tableOptions?: TableOptions;
+    /** --- Opções de Lista --- */
+    listOptions?: ListOptions;
+    /** --- Opções de Plugins --- */
+    pluginOptions?: PluginOptions;
+    /** --- Componentes Customizados --- */
+    components?: CustomComponents;
+    /** --- Estilização --- */
+    style?: CSSProperties;
+    className?: string;
+    contentClassName?: string;
+    /** --- Estados --- */
+    disabled?: boolean;
+    loading?: ReactNode;
+    error?: ReactNode;
+    /** --- Eventos --- */
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: Error) => void;
+    onLinkClick?: (href: string) => void | boolean;
+    /** --- Acessibilidade --- */
+    ariaLabel?: string;
+    role?: string;
+    /** --- Outros --- */
+    /** Permitir saltos de linha extras */
+    skipHtml?: boolean;
+    /** Desabilitar quebras de linha automáticas */
+    unwrapDisallowed?: boolean;
+}
+/**
+ * Props internas para componentes de código
+ */
+export interface CodeBlockProps {
+    language?: string;
+    value?: string;
+    className?: string;
+    showLineNumbers?: boolean;
+    theme?: SyntaxHighlightTheme;
+}
+/**
+ * Props internas para link renderer
+ */
+export interface LinkRendererProps {
+    href?: string;
+    children?: ReactNode;
+    openExternalInNewTab?: boolean;
+    onClick?: (href: string) => void | boolean;
+}

package/dist/markdown/components/CodeBlock.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { CodeBlockProps } from '../ArchbaseMarkdown.types';
+/**
+ * Componente para renderização de blocos de código
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock
+ *   language="typescript"
+ *   value="const x = 42;"
+ *   showLineNumbers
+ *   theme="github-dark"
+ * />
+ * ```
+ */
+export declare function ArchbaseCodeBlock({ language, value, className, showLineNumbers, theme, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Componente para código inline
+ */
+export declare function ArchbaseInlineCode({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/markdown/components/LinkRenderer.d.ts

@@ -0,0 +1,16 @@
+import type { LinkRendererProps } from '../ArchbaseMarkdown.types';
+/**
+ * Renderizador de links para Markdown
+ *
+ * @example
+ * ```tsx
+ * <LinkRenderer
+ *   href="https://example.com"
+ *   openExternalInNewTab
+ *   onClick={(href) => console.log('Clicked:', href)}
+ * >
+ *   Link Text
+ * </LinkRenderer>
+ * ```
+ */
+export declare function ArchbaseLinkRenderer({ href, children, openExternalInNewTab, onClick, }: LinkRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/markdown/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ArchbaseMarkdown - Markdown Renderer Component
+ *
+ * Baseado em react-markdown com plugins remark/rehype.
+ * Suporta GitHub Flavored Markdown, syntax highlighting,
+ * HTML inline, e componentes customizados.
+ */
+export { ArchbaseMarkdown } from './ArchbaseMarkdown';
+export { ArchbaseCodeBlock, ArchbaseInlineCode } from './components/CodeBlock';
+export { ArchbaseLinkRenderer } from './components/LinkRenderer';
+export type { ArchbaseMarkdownProps, CodeOptions, CodeInlineStyle, LinkOptions, ListOptions, PluginOptions, CustomComponents, SyntaxHighlightTheme, TableOptions, CodeBlockProps, LinkRendererProps, } from './ArchbaseMarkdown.types';

package/dist/masonry/ArchbaseMasonry.context.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IArchbaseDataSourceBase } from '@archbase/data';
+export interface ArchbaseMasonryContextValue<T, ID> {
+    /** Fonte de dados do masonry (V1 ou V2) */
+    dataSource?: IArchbaseDataSourceBase<T>;
+    /** Function para notificar o masonry que o item foi selecionado */
+    handleSelectItem?: (index: number, data: T) => void;
+    /** Id do masonry pai */
+    ownerId?: any;
+    /** Cor de fundo do item ativo definido globalmente no masonry */
+    activeBackgroundColor?: string;
+    /** Cor da fonte do item ativo definido globalmente no masonry */
+    activeColor?: string;
+    /** Evento gerado quando o mouse está sobre um item */
+    onItemEnter?: (event: React.MouseEvent, data: any) => void;
+    /** Evento gerado quando o mouse sai de um item */
+    onItemLeave?: (event: React.MouseEvent, data: any) => void;
+}
+declare const ArchbaseMasonryContext: React.Context<ArchbaseMasonryContextValue<any, any>>;
+export declare const ArchbaseMasonryProvider: React.Provider<ArchbaseMasonryContextValue<any, any>>;
+export default ArchbaseMasonryContext;

package/dist/masonry/ArchbaseMasonry.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ArchbaseMasonry — layout masonry responsivo com provider de contexto.
+ * @status stable
+ */
+import React, { ReactNode } from 'react';
+export interface ArchbaseMasonryCustomItemProps<T, _ID> {
+    /** Chave */
+    key: string;
+    /** Id do item */
+    id: any;
+    /** Indicador se o Item está ativo */
+    active: boolean;
+    /** Indice dentro da lista */
+    index: number;
+    /** Registro contendo dados de uma linha na lista */
+    recordData: T;
+    /** Indicador se item da lista está desabilitado */
+    disabled: boolean;
+}
+export interface ArchbaseMasonryProps {
+    children: ReactNode | ReactNode[];
+    columnsCount?: number;
+    gutter?: string;
+    className?: string | null;
+    style?: React.CSSProperties;
+}
+export declare const ArchbaseMasonry: React.FC<ArchbaseMasonryProps>;
+interface ArchbaseMasonryResponsiveProps {
+    columnsCountBreakPoints?: Record<number, number>;
+    children: React.ReactNode | React.ReactNode[];
+    className?: string | null;
+    style?: React.CSSProperties | null;
+}
+export declare const ArchbaseMasonryResponsive: React.FC<ArchbaseMasonryResponsiveProps>;
+export {};

package/dist/masonry/index.d.ts

@@ -0,0 +1,5 @@
+import ArchbaseMasonryContext, { ArchbaseMasonryProvider } from './ArchbaseMasonry.context';
+export { ArchbaseMasonry, ArchbaseMasonryResponsive } from './ArchbaseMasonry';
+export type { ArchbaseMasonryCustomItemProps } from './ArchbaseMasonry';
+export type { ArchbaseMasonryContextValue } from './ArchbaseMasonry.context';
+export { ArchbaseMasonryContext, ArchbaseMasonryProvider };

package/dist/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { NavLink as ArchbaseNavLink } from '@mantine/core';
+export { Breadcrumbs as ArchbaseBreadcrumbs } from '@mantine/core';
+export { Pagination as ArchbasePagination } from '@mantine/core';

package/dist/notification/ArchbaseAlert.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ArchbaseAlert — wrapper de alerta (Mantine Alert) para feedback rápido.
+ * @status stable
+ */
+import { AlertProps, AlertVariant, MantineColor } from '@mantine/core';
+import React from 'react';
+export interface ArchbaseAlertProps extends AlertProps {
+    title?: React.ReactNode;
+    variant?: AlertVariant | string;
+    children: React.ReactNode;
+    color?: MantineColor;
+    titleColor?: MantineColor;
+    icon?: React.ReactNode;
+    withCloseButton?: boolean;
+    onClose?: () => void;
+    autoClose?: number;
+    closeButtonLabel?: string;
+    radius?: string | number | undefined;
+    withBorder?: boolean;
+    backgroundColor?: MantineColor;
+}
+export declare function ArchbaseAlert(props: ArchbaseAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/notification/ArchbaseDialog.d.ts

@@ -0,0 +1,16 @@
+import { ContextModalProps } from '@mantine/modals';
+import { ChangeEventHandler, ReactNode } from 'react';
+export declare class ArchbaseDialog {
+    static showConfirmDialogYesNo: (title: string, question: string, onConfirm: () => void, onCancel: () => void) => void;
+    static showInfo: (message: ReactNode, title?: string, onConfirm?: () => void) => void;
+    static showWarning: (message: ReactNode, title?: string, onConfirm?: () => void) => void;
+    static showSuccess: (message: ReactNode, title?: string, onConfirm?: () => void) => void;
+    static showError: (message: ReactNode, title?: string, onConfirm?: () => void) => void;
+    static showErrorWithDetails: (title: string, message: string, detailMessage?: string, onConfirm?: () => void) => void;
+    static showInputDialog: (label: string, placeholder?: string, title?: string, onInputChange?: ChangeEventHandler<any> | undefined, onConfirm?: () => void, onCancel?: () => void) => void;
+}
+export declare const CustomShowErrorModal: ({ context, id, innerProps, }: ContextModalProps<{
+    message: ReactNode;
+    detailMessage?: ReactNode;
+    onConfirm?: () => void;
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/notification/ArchbaseNotifications.d.ts

@@ -0,0 +1,5 @@
+export declare class ArchbaseNotifications {
+    static showError(title: string, error: string, autoClose?: number, variant?: string): void;
+    static showSuccess(title: string, message: string, autoClose?: number, variant?: string): void;
+    static showWarning(title: string, message: string, autoClose?: number, variant?: string): void;
+}

package/dist/notification/index.d.ts

@@ -0,0 +1,4 @@
+export { ArchbaseNotifications } from './ArchbaseNotifications';
+export { ArchbaseAlert } from './ArchbaseAlert';
+export type { ArchbaseAlertProps } from './ArchbaseAlert';
+export { ArchbaseDialog, CustomShowErrorModal } from './ArchbaseDialog';

package/dist/onboarding/ArchbaseOnboardingTour.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+import type { OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
+export interface ArchbaseOnboardingTourStep {
+    /**
+     * ID único do step
+     */
+    id: string;
+    /**
+     * Seletor CSS do elemento a ser destacado
+     */
+    target?: string;
+    /**
+     * Título do step
+     */
+    title?: ReactNode;
+    /**
+     * Conteúdo/descrição do step
+     */
+    content?: ReactNode;
+}
+export interface ArchbaseOnboardingTourProps {
+    /**
+     * Array de steps do tour
+     */
+    steps: ArchbaseOnboardingTourStep[];
+    /**
+     * Callback quando o tour é iniciado
+     */
+    onStart?: () => void;
+    /**
+     * Callback quando o tour é finalizado
+     */
+    onEnd?: () => void;
+    /**
+     * Callback quando o step muda
+     */
+    onChange?: (step: OnboardingTourStep) => void;
+    /**
+     * Iniciar o tour automaticamente ao montar o componente
+     * @default false
+     */
+    autoStart?: boolean;
+    /**
+     * Se o tour deve ser repetido (loop)
+     */
+    loop?: boolean;
+    /**
+     * Conteúdo da aplicação (children é obrigatório no componente base)
+     */
+    children: ReactNode;
+}
+/**
+ * Componente ArchbaseOnboardingTour
+ *
+ * Wrapper sobre @gfazioli/mantine-onboarding-tour para criar tours interativos
+ * de onboarding em aplicações React. Ideal para introduzir novos usuários às
+ * funcionalidades do sistema.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const tourSteps: ArchbaseOnboardingTourStep[] = [
+ *     {
+ *       id: 'welcome',
+ *       target: '#dashboard',
+ *       title: 'Bem-vindo ao Dashboard',
+ *       content: 'Aqui você pode ver todas as suas métricas.',
+ *     },
+ *     {
+ *       id: 'settings',
+ *       target: '#settings',
+ *       title: 'Configurações',
+ *       content: 'Ajuste suas preferências aqui.',
+ *     },
+ *   ];
+ *
+ *   return (
+ *     <ArchbaseOnboardingTour
+ *       steps={tourSteps}
+ *       autoStart={true}
+ *       onEnd={() => console.log('Tour finalizado!')}
+ *     >
+ *       <YourAppContent />
+ *     </ArchbaseOnboardingTour>
+ *   );
+ * }
+ * ```
+ */
+export declare function ArchbaseOnboardingTour({ steps, onStart, onEnd, onChange, autoStart, loop, children, }: ArchbaseOnboardingTourProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook simplificado para controlar o tour programaticamente
+ *
+ * Para controle programático completo, use o hook `useOnboardingTour`
+ * diretamente de @gfazioli/mantine-onboarding-tour
+ */
+export declare function useArchbaseOnboarding(): {
+    start: () => void;
+    stop: () => void;
+};

package/dist/onboarding/index.d.ts

@@ -0,0 +1,2 @@
+export { ArchbaseOnboardingTour, useArchbaseOnboarding } from './ArchbaseOnboardingTour';
+export type { ArchbaseOnboardingTourProps, ArchbaseOnboardingTourStep } from './ArchbaseOnboardingTour';

package/dist/printer/ArchbaseThermalPrinter.d.ts

@@ -0,0 +1,27 @@
+import type { ArchbaseThermalPrinterProps, ReceiptData } from './ArchbaseThermalPrinter.types';
+/**
+ * Componente ArchbaseThermalPrinter - Impressão térmica ESC/POS
+ *
+ * @example
+ * ```tsx
+ * <ArchbaseThermalPrinter
+ *   data={{
+ *     header: { title: 'Minha Loja', address: ['Rua X, 123'] },
+ *     items: [{ name: 'Produto 1', quantity: 2, price: 10.00 }],
+ *     summary: { total: 20.00 }
+ *   }}
+ *   onPrintComplete={() => console.log('Impresso!')}
+ * />
+ * ```
+ */
+export declare function ArchbaseThermalPrinter({ data, options, printerId, autoPrint, template, style, className, disabled, loading, error, onPrintStart, onPrintComplete, onError, onStatusChange, showPreview, previewActions, ariaLabel, title, }: ArchbaseThermalPrinterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ArchbaseThermalPrinter {
+    var displayName: string;
+}
+/**
+ * Componente para teste rápido de impressão
+ */
+export declare function QuickPrintButton({ data, onPrint, }: {
+    data: ReceiptData;
+    onPrint?: () => void;
+}): import("react/jsx-runtime").JSX.Element;