@archbase/layout 3.0.25 → 4.0.0

package/dist/containers/index.d.ts

@@ -5,3 +5,5 @@ export * from './window';
 export * from './split-pane';
 export { ArchbaseDockableContainer } from './ArchbaseDockableContainer';
 export type { ArchbaseDockableContainerProps } from './ArchbaseDockableContainer';
+export * from './mosaic';
+export * from './resizable';

package/dist/containers/mosaic/ArchbaseMosaicLayout.d.ts

@@ -0,0 +1,43 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { MosaicNode, MosaicDirection } from 'react-mosaic-component';
+export interface ArchbaseMosaicPanelDef {
+    /** Unique identifier for the panel */
+    id: string;
+    /** Title displayed in the panel header */
+    title: string;
+    /** Optional icon displayed alongside the title */
+    icon?: ReactNode;
+    /** The content to render inside the panel */
+    component: ReactNode | (() => ReactNode);
+    /** Whether the panel can be closed. Defaults to true */
+    closable?: boolean;
+    /** Custom toolbar controls for the panel window */
+    toolbarControls?: ReactNode[];
+}
+export interface ArchbaseMosaicLayoutProps {
+    /** Map of panel definitions keyed by panel id */
+    panels: Record<string, ArchbaseMosaicPanelDef>;
+    /** The initial mosaic tree layout structure */
+    initialLayout: MosaicNode<string>;
+    /** Callback fired when the layout changes */
+    onChange?: (layout: MosaicNode<string> | null) => void;
+    /** Callback fired when a panel is closed */
+    onPanelClose?: (panelId: string) => void;
+    /** View shown when no panels are open */
+    zeroStateView?: ReactNode;
+    /** Resize configuration */
+    resize?: {
+        minimumPaneSizePercentage?: number;
+    };
+    /** Custom inline style */
+    style?: CSSProperties;
+    /** Custom CSS class name */
+    className?: string;
+    /** Height of the mosaic container */
+    height?: string | number;
+    /** Width of the mosaic container */
+    width?: string | number;
+}
+declare const ArchbaseMosaicLayout: React.FC<ArchbaseMosaicLayoutProps>;
+export { ArchbaseMosaicLayout };
+export type { MosaicNode, MosaicDirection };

package/dist/containers/mosaic/index.d.ts

@@ -0,0 +1,3 @@
+export { ArchbaseMosaicLayout } from './ArchbaseMosaicLayout';
+export type { ArchbaseMosaicLayoutProps, ArchbaseMosaicPanelDef, } from './ArchbaseMosaicLayout';
+export type { MosaicNode, MosaicDirection } from './ArchbaseMosaicLayout';

package/dist/containers/resizable/ArchbaseResizableLayout.d.ts

@@ -0,0 +1,113 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ArchbaseResizablePanelDef {
+    /** Identificador único do painel */
+    id: string;
+    /** Conteúdo do painel */
+    children: ReactNode;
+    /** Tamanho padrão do painel em porcentagem */
+    defaultSize?: number;
+    /** Tamanho mínimo do painel em porcentagem (default 10) */
+    minSize?: number;
+    /** Tamanho máximo do painel em porcentagem */
+    maxSize?: number;
+    /** Permite colapsar o painel (default false) */
+    collapsible?: boolean;
+    /** Tamanho colapsado em porcentagem (default 0) */
+    collapsedSize?: number;
+    /** Ordem de renderização */
+    order?: number;
+}
+export interface ArchbaseResizableLayoutProps {
+    /** Direção do layout (default 'horizontal') */
+    direction?: 'horizontal' | 'vertical';
+    /** Definições dos painéis */
+    panels: ArchbaseResizablePanelDef[];
+    /** Callback quando o layout muda */
+    onLayout?: (sizes: number[]) => void;
+    /** Identificador para salvar o layout no localStorage */
+    autoSaveId?: string;
+    /** Tamanho da alça de redimensionamento em pixels (default 4) */
+    handleSize?: number;
+    /** ClassName adicional para a alça */
+    handleClassName?: string;
+    /** Exibe indicador de grip na alça (default true) */
+    showHandleGrip?: boolean;
+    /** Estilo do container */
+    style?: CSSProperties;
+    /** ClassName do container */
+    className?: string;
+    /** Altura do container */
+    height?: string | number;
+    /** Largura do container */
+    width?: string | number;
+}
+export interface ArchbaseResizablePanelProps {
+    children: ReactNode;
+    /** Identificador único */
+    id?: string;
+    /** Tamanho padrão em porcentagem */
+    defaultSize?: number;
+    /** Tamanho mínimo em porcentagem */
+    minSize?: number;
+    /** Tamanho máximo em porcentagem */
+    maxSize?: number;
+    /** Permite colapsar */
+    collapsible?: boolean;
+    /** Tamanho colapsado */
+    collapsedSize?: number;
+    /** Ordem de renderização */
+    order?: number;
+    /** Estilo do painel */
+    style?: CSSProperties;
+    /** ClassName do painel */
+    className?: string;
+}
+/**
+ * Wrapper sobre Panel do react-resizable-panels.
+ * Pode ser usado de forma standalone (fora do ArchbaseResizableLayout)
+ * quando se deseja montar o layout manualmente.
+ */
+export declare const ArchbaseResizablePanel: {
+    ({ children, id, defaultSize, minSize, maxSize, collapsible, collapsedSize, order, style, className, }: ArchbaseResizablePanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ArchbaseResizableHandleProps {
+    /** Direção do handle – define a orientação do grip */
+    direction?: 'horizontal' | 'vertical';
+    /** Tamanho do handle em pixels (default 4) */
+    size?: number;
+    /** ClassName adicional */
+    className?: string;
+    /** Exibe indicador de grip (default true) */
+    showGrip?: boolean;
+}
+/**
+ * Wrapper sobre PanelResizeHandle do react-resizable-panels.
+ * Pode ser usado de forma standalone quando se deseja montar o layout manualmente.
+ */
+export declare const ArchbaseResizableHandle: {
+    ({ direction, size, className, showGrip, }: ArchbaseResizableHandleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * ArchbaseResizableLayout
+ *
+ * Wrapper declarativo sobre react-resizable-panels.
+ * Recebe um array de `panels` e renderiza o PanelGroup com handles entre eles.
+ *
+ * @example
+ * ```tsx
+ * <ArchbaseResizableLayout
+ *   direction="horizontal"
+ *   autoSaveId="main-layout"
+ *   panels={[
+ *     { id: 'sidebar', children: <Sidebar />, defaultSize: 25, minSize: 15, collapsible: true },
+ *     { id: 'content', children: <Content />, defaultSize: 75 },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ArchbaseResizableLayout: {
+    ({ direction, panels, onLayout, autoSaveId, handleSize, handleClassName, showHandleGrip, style, className, height, width, }: ArchbaseResizableLayoutProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/containers/resizable/index.d.ts

@@ -0,0 +1,2 @@
+export { ArchbaseResizableLayout, ArchbaseResizablePanel, ArchbaseResizableHandle, } from './ArchbaseResizableLayout';
+export type { ArchbaseResizableLayoutProps, ArchbaseResizablePanelDef, ArchbaseResizablePanelProps, ArchbaseResizableHandleProps, } from './ArchbaseResizableLayout';

package/dist/containers/split-pane/ArchbaseSplitPane.d.ts

@@ -39,21 +39,29 @@ export interface ArchbaseSplitPaneProps {
      * ClassName adicional
      */
     className?: string;
+    /**
+     * Chave para persistir layout no localStorage
+     */
+    autoSaveId?: string;
 }
 export interface ArchbaseSplitPanePaneProps {
     children: ReactNode;
     /**
-     * Tamanho mínimo do painel em pixels
+     * Tamanho mínimo do painel em porcentagem
      */
     minSize?: number | string;
     /**
-     * Tamanho máximo do painel em pixels
+     * Tamanho máximo do painel em porcentagem
      */
     maxSize?: number | string;
     /**
-     * Tamanho padrão do painel em pixels ou porcentagem
+     * Tamanho padrão do painel em porcentagem
      */
     defaultSize?: number | string;
+    /**
+     * Permitir colapsar o painel
+     */
+    collapsible?: boolean;
     /**
      * Estilo adicional do painel
      */
@@ -76,49 +84,32 @@ export interface ArchbaseSplitPaneResizerProps {
 /**
  * Componente ArchbaseSplitPane
  *
- * Wrapper sobre @gfazioli/mantine-split-pane para criar layouts redimensionáveis
- * com painéis divisórios. Ideal para master-detail views, painéis laterais,
- * editores com preview, etc.
+ * Layout redimensionável com painéis divisórios baseado em react-resizable-panels.
+ * Ideal para master-detail views, painéis laterais, editores com preview, etc.
  *
  * @example
  * ```tsx
  * <ArchbaseSplitPane direction="row">
- *   <ArchbaseSplitPanePane>
+ *   <ArchbaseSplitPanePane defaultSize={30}>
  *     <FilterPanel />
  *   </ArchbaseSplitPanePane>
  *   <ArchbaseSplitPaneResizer />
- *   <ArchbaseSplitPanePane>
+ *   <ArchbaseSplitPanePane defaultSize={70}>
  *     <ArchbaseDataGrid />
  *   </ArchbaseSplitPanePane>
  * </ArchbaseSplitPane>
  * ```
  */
-export declare const ArchbaseSplitPane: ({ children, direction, splitterSize, splitterColor, splitterHoverColor, splitterRadius, withKnob, opacity, style, className, }: ArchbaseSplitPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArchbaseSplitPane: ({ children, direction, splitterSize, splitterColor, splitterHoverColor, style, className, autoSaveId, }: ArchbaseSplitPaneProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Componente ArchbaseSplitPanePane
  *
  * Representa um painel individual dentro do ArchbaseSplitPane.
- * Deve ser usado como filho direto de ArchbaseSplitPane.
- *
- * @example
- * ```tsx
- * <ArchbaseSplitPanePane minSize={200} maxSize={600}>
- *   <Content />
- * </ArchbaseSplitPanePane>
- * ```
  */
-export declare const ArchbaseSplitPanePane: ({ children, minSize, maxSize, defaultSize, style, className, }: ArchbaseSplitPanePaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArchbaseSplitPanePane: ({ children, minSize, maxSize, defaultSize, collapsible, style, className, }: ArchbaseSplitPanePaneProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Componente ArchbaseSplitPaneResizer
  *
  * Barra divisória arrastável entre painéis.
- * Deve ser usado entre ArchbaseSplitPanePane components.
- *
- * @example
- * ```tsx
- * <ArchbaseSplitPanePane>...</ArchbaseSplitPanePane>
- * <ArchbaseSplitPaneResizer />
- * <ArchbaseSplitPanePane>...</ArchbaseSplitPanePane>
- * ```
  */
-export declare const ArchbaseSplitPaneResizer: ({ style, className, }: ArchbaseSplitPaneResizerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArchbaseSplitPaneResizer: ({ style, className, ...props }: ArchbaseSplitPaneResizerProps & Record<string, any>) => import("react/jsx-runtime").JSX.Element;