@archbase/components 3.0.25 → 4.0.1

package/dist/onboarding/ArchbaseOnboardingTour.d.ts

@@ -1,99 +1,50 @@
 import { ReactNode } from 'react';
-import { OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
 export interface ArchbaseOnboardingTourStep {
-    /**
-     * ID único do step
-     */
+    /** ID único do step */
     id: string;
-    /**
-     * Seletor CSS do elemento a ser destacado
-     */
+    /** Seletor CSS do elemento a ser destacado */
     target?: string;
-    /**
-     * Título do step
-     */
+    /** Título do step */
     title?: ReactNode;
-    /**
-     * Conteúdo/descrição do step
-     */
+    /** Conteúdo/descrição do step */
     content?: ReactNode;
 }
 export interface ArchbaseOnboardingTourProps {
-    /**
-     * Array de steps do tour
-     */
+    /** Array de steps do tour */
     steps: ArchbaseOnboardingTourStep[];
-    /**
-     * Callback quando o tour é iniciado
-     */
+    /** Callback quando o tour é iniciado */
     onStart?: () => void;
-    /**
-     * Callback quando o tour é finalizado
-     */
+    /** 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
-     */
+    /** Callback quando o step muda */
+    onChange?: (step: ArchbaseOnboardingTourStep) => void;
+    /** Iniciar o tour automaticamente ao montar o componente */
     autoStart?: boolean;
-    /**
-     * Se o tour deve ser repetido (loop)
-     */
+    /** Se o tour deve ser repetido (loop) */
     loop?: boolean;
-    /**
-     * Conteúdo da aplicação (children é obrigatório no componente base)
-     */
+    /** Conteúdo da aplicação */
     children: ReactNode;
+    /** Label do botão próximo */
+    nextLabel?: string;
+    /** Label do botão anterior */
+    prevLabel?: string;
+    /** Label do botão finalizar */
+    finishLabel?: string;
+    /** Label do botão pular */
+    skipLabel?: string;
+    /** Mostrar botão pular */
+    showSkip?: boolean;
 }
 /**
- * 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>
- *   );
- * }
- * ```
+ * ArchbaseOnboardingTour — Tour interativo de onboarding sem dependências externas.
+ * Usa Mantine Overlay + Portal para destacar elementos e exibir tooltips.
  */
-export declare function ArchbaseOnboardingTour({ steps, onStart, onEnd, onChange, autoStart, loop, children, }: ArchbaseOnboardingTourProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArchbaseOnboardingTour({ steps, onStart, onEnd, onChange, autoStart, loop, children, nextLabel, prevLabel, finishLabel, skipLabel, showSkip, }: 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
+ * Hook para controlar o tour programaticamente
  */
 export declare function useArchbaseOnboarding(): {
+    started: boolean;
     start: () => void;
     stop: () => void;
 };

package/dist/viewers/ArchbaseDocViewer.d.ts

@@ -0,0 +1,40 @@
+import { IArchbaseDataSourceBase } from '@archbase/data';
+type DocumentType = 'pdf' | 'image' | 'text' | 'office' | 'unknown';
+export interface ArchbaseDocViewerProps<T> {
+    /** DataSource to read the URL or base64 value from */
+    dataSource?: IArchbaseDataSourceBase<T>;
+    /** Field name within the DataSource */
+    dataField?: string;
+    /** Standalone URL string */
+    uri?: string;
+    /** Standalone base64 string (include the data URI prefix or provide mimeType) */
+    base64?: string;
+    /** Explicit MIME type – auto-detected from the URL extension when omitted */
+    mimeType?: string;
+    /** Height of the viewer @default '600px' */
+    height?: string | number;
+    /** Width of the viewer @default '100%' */
+    width?: string | number;
+    /** Show the toolbar with download / open-in-new-tab buttons @default true */
+    showToolbar?: boolean;
+    /** Label for Input.Wrapper */
+    label?: string;
+    /** Description for Input.Wrapper */
+    description?: string;
+    /** Error message for Input.Wrapper */
+    error?: string;
+    /** Callback fired when the document finishes loading */
+    onDocumentLoad?: () => void;
+    /** Callback fired when the document fails to load */
+    onDocumentError?: (error: Error) => void;
+    /** Custom style applied to the outer container */
+    style?: React.CSSProperties;
+    /** Custom class name */
+    className?: string;
+}
+declare function ArchbaseDocViewer<T>({ dataSource, dataField, uri, base64, mimeType: mimeTypeProp, height, width, showToolbar, label, description, error: errorProp, onDocumentLoad, onDocumentError, style, className, }: ArchbaseDocViewerProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ArchbaseDocViewer {
+    var displayName: string;
+}
+export { ArchbaseDocViewer };
+export type { DocumentType };

package/dist/viewers/ArchbasePdfBuilder.d.ts

@@ -0,0 +1,53 @@
+import { CSSProperties } from 'react';
+import { Designer, Form, Viewer } from '@pdfme/ui';
+import { Template, Font } from '@pdfme/common';
+export interface ArchbasePdfBuilderRef {
+    /** Generate a PDF from the current template + inputs and return its bytes. */
+    generatePdf(): Promise<Uint8Array>;
+    /** Return the current pdfme instance (Designer | Form | Viewer) if available. */
+    getInstance(): Designer | Form | Viewer | null;
+}
+export interface ArchbasePdfBuilderProps<T = unknown> {
+    /** Which pdfme UI to render. */
+    mode?: 'designer' | 'form' | 'viewer';
+    /** The pdfme template object. */
+    template: Template;
+    /**
+     * Optional Archbase DataSource – used in `form` mode to populate inputs
+     * from the current record.
+     */
+    dataSource?: any;
+    /** Field path inside the data source record. */
+    dataField?: string;
+    /**
+     * Standalone inputs for `form` / `viewer` mode.
+     * Each element maps schema field names to string values.
+     */
+    inputs?: Record<string, string>[];
+    /** Fired whenever the designer changes the template. */
+    onTemplateChange?: (template: Template) => void;
+    /** Fired when `generatePdf` completes. */
+    onGenerate?: (pdf: Uint8Array) => void;
+    /**
+     * Additional pdfme schema plugins.
+     * Defaults to `[text, image, barcodes]`.
+     */
+    plugins?: Record<string, any>;
+    /** Custom font configuration forwarded to pdfme. */
+    font?: Font;
+    /** Container height. */
+    height?: string | number;
+    /** Container width. */
+    width?: string | number;
+    /** Optional label rendered above the builder (uses Mantine Input.Wrapper). */
+    label?: string;
+    /** Optional description rendered below the label. */
+    description?: string;
+    /** Extra inline styles applied to the outer wrapper. */
+    style?: CSSProperties;
+    /** Extra CSS class name applied to the outer wrapper. */
+    className?: string;
+}
+export declare const ArchbasePdfBuilder: <T = unknown>(props: ArchbasePdfBuilderProps<T> & {
+    ref?: React.Ref<ArchbasePdfBuilderRef>;
+}) => React.ReactElement | null;

package/dist/viewers/ArchbaseXmlViewer.d.ts

@@ -0,0 +1,36 @@
+import { IArchbaseDataSourceBase } from '@archbase/data';
+export interface ArchbaseXmlViewerProps<T> {
+    /** DataSource to read the XML string value from */
+    dataSource?: IArchbaseDataSourceBase<T>;
+    /** Field name within the DataSource */
+    dataField?: string;
+    /** Standalone XML string value */
+    value?: string;
+    /** Alias for value - standalone XML string */
+    xml?: string;
+    /** Label for Input.Wrapper */
+    label?: string;
+    /** Description for Input.Wrapper */
+    description?: string;
+    /** Error message for Input.Wrapper */
+    error?: string;
+    /** Whether to show line numbers @default true */
+    showLineNumbers?: boolean;
+    /** Whether to show the copy button @default true */
+    showCopyButton?: boolean;
+    /** Whether to auto-format/indent the XML @default true */
+    formatXml?: boolean;
+    /** Max height - enables scroll area when set */
+    maxHeight?: string | number;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Custom class name */
+    className?: string;
+    /** Width of the viewer */
+    width?: string | number;
+}
+declare function ArchbaseXmlViewer<T>({ dataSource, dataField, value: valueProp, xml, label, description, error, showCopyButton, formatXml, maxHeight, style, className, width, }: ArchbaseXmlViewerProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ArchbaseXmlViewer {
+    var displayName: string;
+}
+export { ArchbaseXmlViewer };

package/dist/viewers/index.d.ts

@@ -2,4 +2,10 @@ export { ArchbasePDFViewer } from './ArchbasePDFViewer';
 export { ArchbasePDFViewerToolbar } from './ArchbasePDFViewer.toolbar';
 export { ArchbasePDFAnnotations, ArchbasePDFAnnotationsList, } from './ArchbasePDFViewer.annotations';
 export type { ArchbasePDFViewerProps, PDFSource, PDFAnnotation, PDFRenderMode, PDFTextLayerMode, PDFToolbarActions, } from './ArchbasePDFViewer.types';
+export { ArchbaseXmlViewer } from './ArchbaseXmlViewer';
+export type { ArchbaseXmlViewerProps } from './ArchbaseXmlViewer';
+export { ArchbasePdfBuilder } from './ArchbasePdfBuilder';
+export type { ArchbasePdfBuilderProps, ArchbasePdfBuilderRef } from './ArchbasePdfBuilder';
+export { ArchbaseDocViewer } from './ArchbaseDocViewer';
+export type { ArchbaseDocViewerProps } from './ArchbaseDocViewer';
 export * from './file-preview';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "3.0.25",
+  "version": "4.0.1",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -23,29 +23,35 @@
     "src"
   ],
   "peerDependencies": {
-    "@mantine/carousel": "8.3.18",
-    "@mantine/charts": "8.3.18",
-    "@mantine/code-highlight": "8.3.18",
-    "@mantine/core": "8.3.18",
-    "@mantine/dates": "8.3.18",
-    "@mantine/dropzone": "8.3.18",
-    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "8.3.18",
+    "@mantine/carousel": "9.1.1",
+    "@mantine/charts": "9.1.1",
+    "@mantine/code-highlight": "9.1.1",
+    "@mantine/core": "9.1.1",
+    "@mantine/dates": "9.1.1",
+    "@mantine/dropzone": "9.1.1",
+    "@mantine/form": "9.1.1",
+    "@mantine/hooks": "9.1.1",
+    "@mantine/modals": "9.1.1",
+    "@mantine/notifications": "9.1.1",
     "@tabler/icons-react": "^3.26.0",
     "react": "^18.3.0 || ^19.2.0",
     "react-dom": "^18.3.0 || ^19.2.0"
   },
   "dependencies": {
-    "@archbase/core": "3.0.25",
-    "@archbase/data": "3.0.25",
-    "@archbase/layout": "3.0.25",
-    "@gfazioli/mantine-list-view-table": "^1.1.9",
-    "@gfazioli/mantine-onboarding-tour": "^2.6.5",
+    "@archbase/core": "4.0.1",
+    "@archbase/data": "4.0.1",
+    "@archbase/layout": "4.0.1",
+    "@fortune-sheet/core": "^1.0.4",
+    "@fortune-sheet/react": "^1.0.4",
+    "@pdfme/ui": "^5.3.6",
+    "@pdfme/common": "^5.3.6",
+    "@pdfme/schemas": "^5.3.6",
+    "@pdfme/generator": "^5.3.6",
+    "@gfazioli/mantine-list-view-table": "^2.2.0",
     "@mui/x-data-grid": "^7.28.3",
     "@rehooks/component-size": "^1.0.3",
     "ajv": "^8.16.0",
+    "cep-promise": "^4.4.0",
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -57,6 +63,7 @@
     "export-to-csv": "^0.2.2",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.15.0",
+    "gantt-task-react": "^0.3.9",
     "html2canvas": "^1.4.1",
     "i18next": "^23.10.0",
     "immer": "^10.1.1",
@@ -72,22 +79,28 @@
     "overlayscrollbars": "^2.8.3",
     "pdfjs-dist": "^4.0.379",
     "pubsub-js": "^1.9.4",
+    "qrcode.react": "^4.2.0",
     "ramda": "~0.29.1",
     "react-chartjs-2": "^5.2.0",
     "react-date-object": "^2.1.8",
+    "react-diff-viewer-continued": "^4.0.5",
     "react-easy-crop": "^4.7.4",
     "react-frame-component": "^5.2.7",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^13.5.0",
     "react-imask": "^7.6.1",
     "react-inspector": "^9.0.0",
+    "react-json-view-lite": "^2.1.0",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
     "react-markdown-editor-lite": "^1.3.5",
     "react-modal": "^3.16.1",
+    "react-phone-number-input": "^3.4.0",
     "react-multi-date-picker": "4.1.2",
+    "react-multi-email": "^1.0.24",
     "react-pdf": "^9.1.0",
     "react-router": "^6.22.0",
+    "react-signature-canvas": "^1.0.7",
     "react-router-dom": "^6.22.0",
     "react-speech-recognition": "^3.10.0",
     "react-thermal-printer": "^0.22.0",
@@ -102,7 +115,15 @@
     "uuid": "^9.0.1",
     "validator": "^13.12.0",
     "vis-timeline": "^7.7.3",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "react-mentions": "^4.4.10",
+    "sheet-happens": "^0.0.57",
+    "mantine-contextmenu": "^7.14.0",
+    "jsbarcode": "^3.11.6",
+    "yet-another-react-lightbox": "^3.21.0",
+    "react-photo-album": "^3.0.0",
+    "react-image-picker-editor": "^1.1.1",
+    "react-pro-sidebar": "^1.1.0"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
@@ -110,6 +131,7 @@
     "@types/node": "^22.16.1",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.2",
+    "@types/react-signature-canvas": "^1.0.5",
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
@@ -117,7 +139,8 @@
     "typescript": "~5.7.2",
     "vite": "^6.0.3",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^2.1.8"
+    "vitest": "^2.1.8",
+    "@types/react-mentions": "^4.1.13"
   },
   "publishConfig": {
     "registry": "http://192.168.1.110:4873"

package/src/buttons/ArchbaseSpeedDial.tsx

@@ -0,0 +1,282 @@
+import React, { forwardRef, useCallback, useState, ReactNode } from 'react';
+import {
+  ActionIcon,
+  Box,
+  Tooltip,
+  MantineColor,
+  MantineSize,
+  MantineRadius,
+  Transition,
+  Text,
+} from '@mantine/core';
+import { IconPlus, IconX } from '@tabler/icons-react';
+
+export interface ArchbaseSpeedDialAction {
+  /** ID único da ação */
+  id: string;
+  /** Ícone da ação */
+  icon: ReactNode;
+  /** Label da ação (tooltip) */
+  label: string;
+  /** Callback ao clicar */
+  onClick: () => void;
+  /** Cor da ação */
+  color?: MantineColor;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Se deve mostrar label junto ao botão */
+  showLabel?: boolean;
+}
+
+export interface ArchbaseSpeedDialProps {
+  /** Ações do speed dial */
+  actions: ArchbaseSpeedDialAction[];
+  /** Ícone quando fechado */
+  icon?: ReactNode;
+  /** Ícone quando aberto */
+  openIcon?: ReactNode;
+  /** Cor do botão principal */
+  color?: MantineColor;
+  /** Tamanho dos botões */
+  size?: MantineSize;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Direção de expansão */
+  direction?: 'up' | 'down' | 'left' | 'right';
+  /** Se está aberto (controlado) */
+  opened?: boolean;
+  /** Callback ao abrir/fechar */
+  onOpenChange?: (opened: boolean) => void;
+  /** Se deve fechar ao clicar em uma ação */
+  closeOnActionClick?: boolean;
+  /** Posição no layout */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  /** Se está fixo na tela */
+  fixed?: boolean;
+  /** Espaçamento da borda quando fixo */
+  offset?: number;
+  /** Espaçamento entre ações */
+  gap?: number;
+  /** Variante do botão */
+  variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default';
+  /** Se deve mostrar backdrop */
+  withBackdrop?: boolean;
+  /** Callback ao clicar no backdrop */
+  onBackdropClick?: () => void;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseSpeedDial = forwardRef<HTMLDivElement, ArchbaseSpeedDialProps>(
+  (
+    {
+      actions,
+      icon,
+      openIcon,
+      color = 'blue',
+      size = 'lg',
+      radius = 'xl',
+      direction = 'up',
+      opened: controlledOpened,
+      onOpenChange,
+      closeOnActionClick = true,
+      position = 'bottom-right',
+      fixed = true,
+      offset = 24,
+      gap = 12,
+      variant = 'filled',
+      withBackdrop = false,
+      onBackdropClick,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [internalOpened, setInternalOpened] = useState(false);
+
+    const isOpened = controlledOpened !== undefined ? controlledOpened : internalOpened;
+
+    const handleToggle = useCallback(() => {
+      const newValue = !isOpened;
+      if (controlledOpened === undefined) {
+        setInternalOpened(newValue);
+      }
+      onOpenChange?.(newValue);
+    }, [controlledOpened, isOpened, onOpenChange]);
+
+    const handleClose = useCallback(() => {
+      if (controlledOpened === undefined) {
+        setInternalOpened(false);
+      }
+      onOpenChange?.(false);
+    }, [controlledOpened, onOpenChange]);
+
+    const handleActionClick = useCallback(
+      (action: ArchbaseSpeedDialAction) => {
+        if (action.disabled) return;
+        action.onClick();
+        if (closeOnActionClick) {
+          handleClose();
+        }
+      },
+      [closeOnActionClick, handleClose]
+    );
+
+    const handleBackdropClick = useCallback(() => {
+      handleClose();
+      onBackdropClick?.();
+    }, [handleClose, onBackdropClick]);
+
+    // Calcula a posição do container
+    const positionStyles = fixed
+      ? {
+          position: 'fixed' as const,
+          ...(position.includes('top') ? { top: offset } : { bottom: offset }),
+          ...(position.includes('left') ? { left: offset } : { right: offset }),
+        }
+      : {};
+
+    // Calcula a direção de expansão
+    const getActionPosition = (index: number): React.CSSProperties => {
+      const distance = (index + 1) * (getSizeValue(size) + gap);
+
+      switch (direction) {
+        case 'up':
+          return { bottom: distance, left: 0 };
+        case 'down':
+          return { top: distance, left: 0 };
+        case 'left':
+          return { right: distance, top: 0 };
+        case 'right':
+          return { left: distance, top: 0 };
+        default:
+          return { bottom: distance, left: 0 };
+      }
+    };
+
+    // Tamanho numérico baseado no MantineSize
+    const getSizeValue = (s: MantineSize): number => {
+      const sizes: Record<MantineSize, number> = {
+        xs: 30,
+        sm: 36,
+        md: 42,
+        lg: 50,
+        xl: 60,
+      };
+      return sizes[s] || 42;
+    };
+
+    // Tamanho do action (um pouco menor)
+    const actionSize = size === 'xl' ? 'lg' : size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs';
+
+    const DefaultIcon = isOpened ? IconX : IconPlus;
+    const displayIcon = isOpened ? (openIcon || <IconX />) : (icon || <IconPlus />);
+
+    return (
+      <>
+        {/* Backdrop */}
+        {withBackdrop && (
+          <Transition mounted={isOpened} transition="fade" duration={200}>
+            {(styles) => (
+              <Box
+                onClick={handleBackdropClick}
+                style={{
+                  ...styles,
+                  position: 'fixed',
+                  inset: 0,
+                  backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                  zIndex: 999,
+                }}
+              />
+            )}
+          </Transition>
+        )}
+
+        {/* Speed Dial Container */}
+        <Box
+          ref={ref}
+          className={className}
+          style={{
+            ...positionStyles,
+            ...style,
+            zIndex: 1000,
+          }}
+        >
+          {/* Actions */}
+          <Box style={{ position: 'relative' }}>
+            {actions.map((action, index) => (
+              <Transition
+                key={action.id}
+                mounted={isOpened}
+                transition="pop"
+                duration={200}
+                timingFunction="ease"
+              >
+                {(styles) => (
+                  <Box
+                    style={{
+                      ...styles,
+                      position: 'absolute',
+                      ...getActionPosition(index),
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                      flexDirection: direction === 'left' ? 'row-reverse' : 'row',
+                      transitionDelay: `${index * 50}ms`,
+                    }}
+                  >
+                    {action.showLabel && (
+                      <Text
+                        size="sm"
+                        style={{
+                          whiteSpace: 'nowrap',
+                          backgroundColor: 'var(--mantine-color-dark-7)',
+                          color: 'white',
+                          padding: '4px 8px',
+                          borderRadius: 4,
+                        }}
+                      >
+                        {action.label}
+                      </Text>
+                    )}
+                    <Tooltip label={action.label} position={direction === 'right' ? 'right' : 'left'}>
+                      <ActionIcon
+                        size={actionSize}
+                        radius={radius}
+                        variant={variant}
+                        color={action.color || color}
+                        disabled={action.disabled}
+                        onClick={() => handleActionClick(action)}
+                      >
+                        {action.icon}
+                      </ActionIcon>
+                    </Tooltip>
+                  </Box>
+                )}
+              </Transition>
+            ))}
+
+            {/* Main Button */}
+            <ActionIcon
+              size={size}
+              radius={radius}
+              variant={variant}
+              color={color}
+              onClick={handleToggle}
+              style={{
+                transition: 'transform 0.2s ease',
+                transform: isOpened ? 'rotate(45deg)' : 'rotate(0deg)',
+              }}
+            >
+              {displayIcon}
+            </ActionIcon>
+          </Box>
+        </Box>
+      </>
+    );
+  }
+);
+
+ArchbaseSpeedDial.displayName = 'ArchbaseSpeedDial';