react-restyle-components 0.4.47 → 0.4.48

package/lib/src/core-components/src/components/Skeleton/elements.js

@@ -1,11 +1,16 @@
-"use strict";import{styled as i,css as t,keyframes as o}from"styled-components";import{tokens as s}from"../../utils/designTokens";import{breakpoints as d}from"../../utils/abstracts";const c=o`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+import { breakpoints } from '../../utils/abstracts';
+// Animations
+const pulse = keyframes `
   0%, 100% {
     opacity: 1;
   }
   50% {
     opacity: 0.4;
   }
-`,l=o`
+`;
+const wave = keyframes `
   0% {
     transform: translateX(-100%);
   }
@@ -15,14 +20,16 @@
   100% {
     transform: translateX(100%);
   }
-`,x=o`
+`;
+const shimmer = keyframes `
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`,u=o`
+`;
+const glow = keyframes `
   0%, 100% {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
     opacity: 0.8;
@@ -31,9 +38,48 @@
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     opacity: 1;
   }
-`,p=e=>e==="dark"?{base:"#374151",highlight:"#4b5563",wave:"rgba(255, 255, 255, 0.1)"}:{base:"#e5e7eb",highlight:"#f3f4f6",wave:"rgba(255, 255, 255, 0.6)"},$={xs:{width:"40px",height:"12px"},sm:{width:"80px",height:"16px"},md:{width:"120px",height:"20px"},lg:{width:"180px",height:"24px"},xl:{width:"240px",height:"32px"}};export const avatarSizes={xs:"24px",sm:"32px",md:"48px",lg:"64px",xl:"96px"};const m=(e,r,a)=>{const n=p(a);switch(e){case"pulse":return t`
-        animation: ${c} ${r}ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
-      `;case"wave":return t`
+`;
+// Theme colors
+const getThemeColors = (theme) => {
+    if (theme === 'dark') {
+        return {
+            base: '#374151',
+            highlight: '#4b5563',
+            wave: 'rgba(255, 255, 255, 0.1)',
+        };
+    }
+    // light or auto (defaults to light)
+    return {
+        base: '#e5e7eb',
+        highlight: '#f3f4f6',
+        wave: 'rgba(255, 255, 255, 0.6)',
+    };
+};
+// Size presets
+const sizePresets = {
+    xs: { width: '40px', height: '12px' },
+    sm: { width: '80px', height: '16px' },
+    md: { width: '120px', height: '20px' },
+    lg: { width: '180px', height: '24px' },
+    xl: { width: '240px', height: '32px' },
+};
+// Avatar size presets
+export const avatarSizes = {
+    xs: '24px',
+    sm: '32px',
+    md: '48px',
+    lg: '64px',
+    xl: '96px',
+};
+const getAnimationStyles = (animation, duration, theme) => {
+    const colors = getThemeColors(theme);
+    switch (animation) {
+        case 'pulse':
+            return css `
+        animation: ${pulse} ${duration}ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      `;
+        case 'wave':
+            return css `
         position: relative;
         overflow: hidden;
         
@@ -47,57 +93,91 @@
           background: linear-gradient(
             90deg,
             transparent 0%,
-            ${n.wave} 50%,
+            ${colors.wave} 50%,
             transparent 100%
           );
-          animation: ${l} ${r}ms ease-in-out infinite;
+          animation: ${wave} ${duration}ms ease-in-out infinite;
         }
-      `;case"shimmer":return t`
+      `;
+        case 'shimmer':
+            return css `
         background: linear-gradient(
           90deg,
-          ${n.base} 0%,
-          ${n.highlight} 20%,
-          ${n.highlight} 40%,
-          ${n.base} 100%
+          ${colors.base} 0%,
+          ${colors.highlight} 20%,
+          ${colors.highlight} 40%,
+          ${colors.base} 100%
         );
         background-size: 400% 100%;
-        animation: ${x} ${r}ms linear infinite;
-      `;case"glow":return t`
-        animation: ${u} ${r}ms ease-in-out infinite;
-      `;default:return t``}},f=(e,r)=>{switch(e){case"circular":case"avatar":return t`
+        animation: ${shimmer} ${duration}ms linear infinite;
+      `;
+        case 'glow':
+            return css `
+        animation: ${glow} ${duration}ms ease-in-out infinite;
+      `;
+        case 'none':
+        default:
+            return css ``;
+    }
+};
+const getVariantStyles = (variant, borderRadius) => {
+    switch (variant) {
+        case 'circular':
+        case 'avatar':
+            return css `
         border-radius: 50%;
-      `;case"text":return t`
+      `;
+        case 'text':
+            return css `
         border-radius: 6px;
-      `;case"button":return t`
-        border-radius: ${s.borderRadius050||"6px"};
-      `;case"badge":return t`
+      `;
+        case 'button':
+            return css `
+        border-radius: ${tokens.borderRadius050 || '6px'};
+      `;
+        case 'badge':
+            return css `
         border-radius: 9999px;
-      `;case"rounded":return t`
-        border-radius: ${r||s.borderRadius100||"12px"};
-      `;default:return t`
+      `;
+        case 'rounded':
+            return css `
+        border-radius: ${borderRadius || tokens.borderRadius100 || '12px'};
+      `;
+        case 'rectangular':
+        default:
+            return css `
         border-radius: 4px;
-      `}};export const SkeletonElement=i.div`
+      `;
+    }
+};
+export const SkeletonElement = styled.div `
   display: block;
   flex-shrink: 0;
-  background-color: ${({$animation:e,$theme:r})=>{const a=p(r);return e==="shimmer"?"transparent":a.base}};
-  width: ${({$width:e})=>typeof e=="number"?`${e}px`:e};
-  height: ${({$height:e,$aspectRatio:r})=>r?"auto":typeof e=="number"?`${e}px`:e};
+  background-color: ${({ $animation, $theme }) => {
+    const colors = getThemeColors($theme);
+    return $animation === 'shimmer' ? 'transparent' : colors.base;
+}};
+  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : $width)};
+  height: ${({ $height, $aspectRatio }) => $aspectRatio ? 'auto' : (typeof $height === 'number' ? `${$height}px` : $height)};
   
-  ${({$aspectRatio:e})=>e&&t`
-      aspect-ratio: ${e};
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
     `}
   
-  ${({$variant:e,$borderRadius:r})=>f(e,r)}
-  ${({$animation:e,$duration:r,$theme:a})=>m(e,r,a)}
+  ${({ $variant, $borderRadius }) => getVariantStyles($variant, $borderRadius)}
+  ${({ $animation, $duration, $theme }) => getAnimationStyles($animation, $duration, $theme)}
   
   /* Stagger animation */
-  ${({$staggerIndex:e})=>e!==void 0&&t`
-      animation-delay: ${e*100}ms;
+  ${({ $staggerIndex }) => $staggerIndex !== undefined &&
+    css `
+      animation-delay: ${$staggerIndex * 100}ms;
     `}
   
   /* Responsive */
-  ${({$responsive:e})=>e&&t`
-      ${d.sm} {
+  ${({ $responsive }) => $responsive &&
+    css `
+      ${breakpoints.sm} {
         width: 100%;
       }
     `}
@@ -110,40 +190,49 @@
       animation: none;
     }
   }
-`,SkeletonWrapper=i.div`
+`;
+export const SkeletonWrapper = styled.div `
   display: flex;
-  flex-direction: ${({$direction:e})=>e};
-  gap: ${({$gap:e})=>e};
-`,SkeletonGroupContainer=i.div`
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+`;
+export const SkeletonGroupContainer = styled.div `
   display: flex;
-  flex-direction: ${({$direction:e})=>e};
-  gap: ${({$gap:e})=>e};
-  align-items: ${({$align:e})=>e==="start"?"flex-start":e==="end"?"flex-end":e==="stretch"?"stretch":"center"};
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+  align-items: ${({ $align }) => $align === 'start' ? 'flex-start' :
+    $align === 'end' ? 'flex-end' :
+        $align === 'stretch' ? 'stretch' : 'center'};
   
-  ${({$wrap:e})=>e&&t`
+  ${({ $wrap }) => $wrap &&
+    css `
       flex-wrap: wrap;
     `}
   
   /* Responsive stacking */
-  ${({$responsive:e,$direction:r})=>e&&r==="row"&&t`
-      ${d.sm} {
+  ${({ $responsive, $direction }) => $responsive &&
+    $direction === 'row' &&
+    css `
+      ${breakpoints.sm} {
         flex-direction: column;
         align-items: stretch;
       }
     `}
-`,SkeletonCardContainer=i.div`
-  background: ${({$theme:e})=>e==="dark"?"#1f2937":"#ffffff"};
-  border-radius: ${s.borderRadius100||"12px"};
+`;
+export const SkeletonCardContainer = styled.div `
+  background: ${({ $theme }) => $theme === 'dark' ? '#1f2937' : '#ffffff'};
+  border-radius: ${tokens.borderRadius100 || '12px'};
   padding: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid ${({$theme:e})=>e==="dark"?"#374151":"#f3f4f6"};
+  border: 1px solid ${({ $theme }) => $theme === 'dark' ? '#374151' : '#f3f4f6'};
   overflow: hidden;
   
-  ${d.sm} {
+  ${breakpoints.sm} {
     padding: 12px;
   }
-`,SkeletonTextContainer=i.div`
+`;
+export const SkeletonTextContainer = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${({$gap:e})=>e};
+  gap: ${({ $gap }) => $gap};
 `;

package/lib/src/core-components/src/components/Skeleton/index.js

@@ -1 +1,2 @@
-"use strict";export{Skeleton,SkeletonGroup,SkeletonText,SkeletonAvatar,SkeletonCard}from"./Skeleton";export*from"./types";
+export { Skeleton, SkeletonGroup, SkeletonText, SkeletonAvatar, SkeletonCard, } from './Skeleton';
+export * from './types';

package/lib/src/core-components/src/components/Skeleton/types.js

@@ -1 +1,4 @@
-"use strict";export const SKELETON_VARIANTS=["rectangular","circular","text","rounded","button","avatar","badge"],SKELETON_ANIMATIONS=["pulse","wave","shimmer","glow","none"],SKELETON_SIZES=["xs","sm","md","lg","xl"],SKELETON_THEMES=["light","dark","auto"];
+export const SKELETON_VARIANTS = ['rectangular', 'circular', 'text', 'rounded', 'button', 'avatar', 'badge'];
+export const SKELETON_ANIMATIONS = ['pulse', 'wave', 'shimmer', 'glow', 'none'];
+export const SKELETON_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const SKELETON_THEMES = ['light', 'dark', 'auto'];

package/lib/src/core-components/src/components/SpeedDial/SpeedDial.js

@@ -1 +1,128 @@
-"use strict";"use client";import{jsx as n,jsxs as d,Fragment as de}from"react/jsx-runtime";import{forwardRef as ue,useState as pe,useRef as me,useCallback as f,useEffect as w}from"react";import{Icon as k}from"../Icon/Icon";import{Tooltip as fe}from"../Tooltip/Tooltip";import{SpeedDialRoot as $e,SpeedDialBackdrop as be,SpeedDialFab as ge,SpeedDialActions as Ce,SpeedDialActionWrapper as ye,SpeedDialActionButton as he,SpeedDialActionLabel as N,IconWrapper as u,sizeConfig as I}from"./elements";const ke=()=>d("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[n("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),n("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),Se=()=>d("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[n("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),n("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]});export const SpeedDial=ue(function(B,p){const{actions:T,open:O,defaultOpen:j=!1,onOpenChange:$,onActionClick:x,uiConfig:R={},mainButtonConfig:W={},classNames:l={},styles:s={},disabled:b=!1,hidden:F=!1,closeOnActionClick:z=!0,closeOnClickOutside:D=!0,closeOnEscape:L=!0,className:M,style:_,ariaLabel:P}=B,{direction:r="up",size:i="medium",variant:q="filled",gap:G=12,showLabels:S=!1,showTooltips:H=!0,animationDuration:J=200,staggerDelay:g=30,showBackdrop:K=!1,backdropOpacity:Q=.3,zIndex:v=1e3}=R,{openIcon:U="MdAdd",closeIcon:V="MdClose",openIconElement:A,closeIconElement:E,backgroundColor:X,iconColor:Y,rotateOnToggle:C=!0,rotationDegrees:Z=45,ariaLabelClosed:ee="Open speed dial",ariaLabelOpen:ne="Close speed dial"}=W,y=me(null),[oe,ie]=pe(j),h=O!==void 0,o=h?O:oe,m=f(e=>{b||(h||ie(e),$?.(e))},[b,h,$]),te=f(()=>{m(!o)},[o,m]),a=f(()=>{m(!1)},[m]),re=f((e,t)=>{e.disabled||(e.onClick?.(t),x?.(e,t),z&&a())},[z,a,x]);w(()=>{if(!o||!D)return;const e=c=>{y.current&&!y.current.contains(c.target)&&a()},t=setTimeout(()=>{document.addEventListener("mousedown",e)},0);return()=>{clearTimeout(t),document.removeEventListener("mousedown",e)}},[o,D,a]),w(()=>{if(!o||!L)return;const e=t=>{t.key==="Escape"&&a()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[o,L,a]);const le=()=>{if(o){if(E)return E;if(!C)return n(u,{$size:i,children:n(k,{nameIcon:V,propsIcon:{size:I[i].iconSize,color:"currentColor"}})})}return A||(C?n(u,{$size:i,children:n(ke,{})}):n(u,{$size:i,children:n(k,{nameIcon:U,propsIcon:{size:I[i].iconSize,color:"currentColor"}})}))},se=e=>e.iconElement?n(u,{$size:i,$isAction:!0,children:e.iconElement}):n(u,{$size:i,$isAction:!0,children:n(k,{nameIcon:e.icon,propsIcon:{size:I[i].actionIconSize,color:e.iconColor||"currentColor"}})}),ae=(e,t)=>{const c=n(he,{$size:i,$isOpen:o,$index:t,$staggerDelay:g,$animationDuration:J,$customBg:e.backgroundColor,$customColor:e.iconColor,onClick:ce=>re(e,ce),disabled:e.disabled,"aria-label":e.ariaLabel||e.tooltip||e.label,className:l.action||e.className,style:{...s.action,...e.style},children:se(e)},e.id);return S&&e.label?d(ye,{$direction:r,$showLabels:S,children:[(r==="left"||r==="up")&&n(N,{$size:i,$direction:r,$isOpen:o,$index:t,$staggerDelay:g,className:l.actionLabel,style:s.actionLabel,children:e.label}),c,(r==="right"||r==="down")&&n(N,{$size:i,$direction:r,$isOpen:o,$index:t,$staggerDelay:g,className:l.actionLabel,style:s.actionLabel,children:e.label})]},e.id):H&&e.tooltip?n(fe,{content:e.tooltip,position:r==="up"||r==="down"?"left":"top",delay:100,children:c},e.id):c};return d(de,{children:[K&&n(be,{$isOpen:o,$opacity:Q,$zIndex:v,className:l.backdrop,style:s.backdrop,onClick:a}),d($e,{ref:e=>{y.current=e,typeof p=="function"?p(e):p&&(p.current=e)},$zIndex:v,$hidden:F,className:M||l.root,style:{...s.root,..._},role:"menu","aria-label":P||"Speed dial","aria-expanded":o,children:[n(ge,{$size:i,$variant:q,$isOpen:o,$rotateOnToggle:C,$rotationDegrees:Z,$customBg:X,$customColor:Y,onClick:te,disabled:b,"aria-label":o?ne:ee,className:l.fab,style:s.fab,children:le()}),n(Ce,{$direction:r,$gap:G,$isOpen:o,className:l.actions,style:s.actions,role:"menu",children:T.map((e,t)=>ae(e,t))})]})]})});SpeedDial.displayName="SpeedDial";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect, } from 'react';
+import { Icon } from '../Icon/Icon';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { SpeedDialRoot, SpeedDialBackdrop, SpeedDialFab, SpeedDialActions, SpeedDialActionWrapper, SpeedDialActionButton, SpeedDialActionLabel, IconWrapper, sizeConfig, } from './elements';
+// Default icons
+const PlusIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+export const SpeedDial = forwardRef(function SpeedDialComponent(props, ref) {
+    const { actions, open: controlledOpen, defaultOpen = false, onOpenChange, onActionClick, uiConfig = {}, mainButtonConfig = {}, classNames = {}, styles = {}, disabled = false, hidden = false, closeOnActionClick = true, closeOnClickOutside = true, closeOnEscape = true, className, style, ariaLabel, } = props;
+    // Destructure configs with defaults
+    const { direction = 'up', size = 'medium', variant = 'filled', gap = 12, showLabels = false, showTooltips = true, animationDuration = 200, staggerDelay = 30, showBackdrop = false, backdropOpacity = 0.3, zIndex = 1000, } = uiConfig;
+    const { openIcon = 'MdAdd', closeIcon = 'MdClose', openIconElement, closeIconElement, backgroundColor, iconColor, rotateOnToggle = true, rotationDegrees = 45, ariaLabelClosed = 'Open speed dial', ariaLabelOpen = 'Close speed dial', } = mainButtonConfig;
+    // Refs
+    const rootRef = useRef(null);
+    // State
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    // Controlled vs uncontrolled
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    // Handle open/close
+    const setOpen = useCallback((newOpen) => {
+        if (disabled)
+            return;
+        if (isControlled) {
+            onOpenChange?.(newOpen);
+        }
+        else {
+            setInternalOpen(newOpen);
+            onOpenChange?.(newOpen);
+        }
+    }, [disabled, isControlled, onOpenChange]);
+    const toggle = useCallback(() => {
+        setOpen(!isOpen);
+    }, [isOpen, setOpen]);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    // Handle action click
+    const handleActionClick = useCallback((action, e) => {
+        if (action.disabled)
+            return;
+        action.onClick?.(e);
+        onActionClick?.(action, e);
+        if (closeOnActionClick) {
+            close();
+        }
+    }, [closeOnActionClick, close, onActionClick]);
+    // Click outside handler
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside)
+            return;
+        const handleClickOutside = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) {
+                close();
+            }
+        };
+        // Delay to prevent immediate close on open click
+        const timeout = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeout);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, closeOnClickOutside, close]);
+    // Escape key handler
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, closeOnEscape, close]);
+    // Render main button icon
+    const renderMainIcon = () => {
+        if (isOpen) {
+            if (closeIconElement)
+                return closeIconElement;
+            if (!rotateOnToggle) {
+                return (_jsx(IconWrapper, { "$size": size, children: _jsx(Icon, { nameIcon: closeIcon, propsIcon: { size: sizeConfig[size].iconSize, color: 'currentColor' } }) }));
+            }
+        }
+        if (openIconElement)
+            return openIconElement;
+        // Use default plus/close icons for rotation effect
+        if (rotateOnToggle) {
+            return (_jsx(IconWrapper, { "$size": size, children: _jsx(PlusIcon, {}) }));
+        }
+        return (_jsx(IconWrapper, { "$size": size, children: _jsx(Icon, { nameIcon: openIcon, propsIcon: { size: sizeConfig[size].iconSize, color: 'currentColor' } }) }));
+    };
+    // Render action icon
+    const renderActionIcon = (action) => {
+        if (action.iconElement) {
+            return (_jsx(IconWrapper, { "$size": size, "$isAction": true, children: action.iconElement }));
+        }
+        return (_jsx(IconWrapper, { "$size": size, "$isAction": true, children: _jsx(Icon, { nameIcon: action.icon, propsIcon: {
+                    size: sizeConfig[size].actionIconSize,
+                    color: action.iconColor || 'currentColor',
+                } }) }));
+    };
+    // Render action button
+    const renderAction = (action, index) => {
+        const button = (_jsx(SpeedDialActionButton, { "$size": size, "$isOpen": isOpen, "$index": index, "$staggerDelay": staggerDelay, "$animationDuration": animationDuration, "$customBg": action.backgroundColor, "$customColor": action.iconColor, onClick: (e) => handleActionClick(action, e), disabled: action.disabled, "aria-label": action.ariaLabel || action.tooltip || action.label, className: classNames.action || action.className, style: { ...styles.action, ...action.style }, children: renderActionIcon(action) }, action.id));
+        if (showLabels && action.label) {
+            return (_jsxs(SpeedDialActionWrapper, { "$direction": direction, "$showLabels": showLabels, children: [(direction === 'left' || direction === 'up') && (_jsx(SpeedDialActionLabel, { "$size": size, "$direction": direction, "$isOpen": isOpen, "$index": index, "$staggerDelay": staggerDelay, className: classNames.actionLabel, style: styles.actionLabel, children: action.label })), button, (direction === 'right' || direction === 'down') && (_jsx(SpeedDialActionLabel, { "$size": size, "$direction": direction, "$isOpen": isOpen, "$index": index, "$staggerDelay": staggerDelay, className: classNames.actionLabel, style: styles.actionLabel, children: action.label }))] }, action.id));
+        }
+        if (showTooltips && action.tooltip) {
+            return (_jsx(Tooltip, { content: action.tooltip, position: direction === 'up' || direction === 'down' ? 'left' : 'top', delay: 100, children: button }, action.id));
+        }
+        return button;
+    };
+    return (_jsxs(_Fragment, { children: [showBackdrop && (_jsx(SpeedDialBackdrop, { "$isOpen": isOpen, "$opacity": backdropOpacity, "$zIndex": zIndex, className: classNames.backdrop, style: styles.backdrop, onClick: close })), _jsxs(SpeedDialRoot, { ref: (node) => {
+                    rootRef.current = node;
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current = node;
+                    }
+                }, "$zIndex": zIndex, "$hidden": hidden, className: className || classNames.root, style: { ...styles.root, ...style }, role: "menu", "aria-label": ariaLabel || 'Speed dial', "aria-expanded": isOpen, children: [_jsx(SpeedDialFab, { "$size": size, "$variant": variant, "$isOpen": isOpen, "$rotateOnToggle": rotateOnToggle, "$rotationDegrees": rotationDegrees, "$customBg": backgroundColor, "$customColor": iconColor, onClick: toggle, disabled: disabled, "aria-label": isOpen ? ariaLabelOpen : ariaLabelClosed, className: classNames.fab, style: styles.fab, children: renderMainIcon() }), _jsx(SpeedDialActions, { "$direction": direction, "$gap": gap, "$isOpen": isOpen, className: classNames.actions, style: styles.actions, role: "menu", children: actions.map((action, index) => renderAction(action, index)) })] })] }));
+});
+SpeedDial.displayName = 'SpeedDial';