react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,16 +1,11 @@
-import { styled, css, keyframes } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-import { breakpoints } from '../../utils/abstracts';
-// Animations
-const pulse = keyframes `
+"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`
   0%, 100% {
     opacity: 1;
   }
   50% {
     opacity: 0.4;
   }
-`;
-const wave = keyframes `
+`,l=o`
   0% {
     transform: translateX(-100%);
   }
@@ -20,16 +15,14 @@ const wave = keyframes `
   100% {
     transform: translateX(100%);
   }
-`;
-const shimmer = keyframes `
+`,x=o`
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`;
-const glow = keyframes `
+`,u=o`
   0%, 100% {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
     opacity: 0.8;
@@ -38,48 +31,9 @@ const glow = keyframes `
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     opacity: 1;
   }
-`;
-// 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 `
+`,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`
         position: relative;
         overflow: hidden;
         
@@ -93,91 +47,57 @@ const getAnimationStyles = (animation, duration, theme) => {
           background: linear-gradient(
             90deg,
             transparent 0%,
-            ${colors.wave} 50%,
+            ${n.wave} 50%,
             transparent 100%
           );
-          animation: ${wave} ${duration}ms ease-in-out infinite;
+          animation: ${l} ${r}ms ease-in-out infinite;
         }
-      `;
-        case 'shimmer':
-            return css `
+      `;case"shimmer":return t`
         background: linear-gradient(
           90deg,
-          ${colors.base} 0%,
-          ${colors.highlight} 20%,
-          ${colors.highlight} 40%,
-          ${colors.base} 100%
+          ${n.base} 0%,
+          ${n.highlight} 20%,
+          ${n.highlight} 40%,
+          ${n.base} 100%
         );
         background-size: 400% 100%;
-        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 `
+        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`
         border-radius: 50%;
-      `;
-        case 'text':
-            return css `
+      `;case"text":return t`
         border-radius: 6px;
-      `;
-        case 'button':
-            return css `
-        border-radius: ${tokens.borderRadius050 || '6px'};
-      `;
-        case 'badge':
-            return css `
+      `;case"button":return t`
+        border-radius: ${s.borderRadius050||"6px"};
+      `;case"badge":return t`
         border-radius: 9999px;
-      `;
-        case 'rounded':
-            return css `
-        border-radius: ${borderRadius || tokens.borderRadius100 || '12px'};
-      `;
-        case 'rectangular':
-        default:
-            return css `
+      `;case"rounded":return t`
+        border-radius: ${r||s.borderRadius100||"12px"};
+      `;default:return t`
         border-radius: 4px;
-      `;
-    }
-};
-export const SkeletonElement = styled.div `
+      `}};export const SkeletonElement=i.div`
   display: block;
   flex-shrink: 0;
-  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)};
+  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};
   
-  ${({ $aspectRatio }) => $aspectRatio &&
-    css `
-      aspect-ratio: ${$aspectRatio};
+  ${({$aspectRatio:e})=>e&&t`
+      aspect-ratio: ${e};
     `}
   
-  ${({ $variant, $borderRadius }) => getVariantStyles($variant, $borderRadius)}
-  ${({ $animation, $duration, $theme }) => getAnimationStyles($animation, $duration, $theme)}
+  ${({$variant:e,$borderRadius:r})=>f(e,r)}
+  ${({$animation:e,$duration:r,$theme:a})=>m(e,r,a)}
   
   /* Stagger animation */
-  ${({ $staggerIndex }) => $staggerIndex !== undefined &&
-    css `
-      animation-delay: ${$staggerIndex * 100}ms;
+  ${({$staggerIndex:e})=>e!==void 0&&t`
+      animation-delay: ${e*100}ms;
     `}
   
   /* Responsive */
-  ${({ $responsive }) => $responsive &&
-    css `
-      ${breakpoints.sm} {
+  ${({$responsive:e})=>e&&t`
+      ${d.sm} {
         width: 100%;
       }
     `}
@@ -190,49 +110,40 @@ export const SkeletonElement = styled.div `
       animation: none;
     }
   }
-`;
-export const SkeletonWrapper = styled.div `
+`,SkeletonWrapper=i.div`
   display: flex;
-  flex-direction: ${({ $direction }) => $direction};
-  gap: ${({ $gap }) => $gap};
-`;
-export const SkeletonGroupContainer = styled.div `
+  flex-direction: ${({$direction:e})=>e};
+  gap: ${({$gap:e})=>e};
+`,SkeletonGroupContainer=i.div`
   display: flex;
-  flex-direction: ${({ $direction }) => $direction};
-  gap: ${({ $gap }) => $gap};
-  align-items: ${({ $align }) => $align === 'start' ? 'flex-start' :
-    $align === 'end' ? 'flex-end' :
-        $align === 'stretch' ? 'stretch' : 'center'};
+  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"};
   
-  ${({ $wrap }) => $wrap &&
-    css `
+  ${({$wrap:e})=>e&&t`
       flex-wrap: wrap;
     `}
   
   /* Responsive stacking */
-  ${({ $responsive, $direction }) => $responsive &&
-    $direction === 'row' &&
-    css `
-      ${breakpoints.sm} {
+  ${({$responsive:e,$direction:r})=>e&&r==="row"&&t`
+      ${d.sm} {
         flex-direction: column;
         align-items: stretch;
       }
     `}
-`;
-export const SkeletonCardContainer = styled.div `
-  background: ${({ $theme }) => $theme === 'dark' ? '#1f2937' : '#ffffff'};
-  border-radius: ${tokens.borderRadius100 || '12px'};
+`,SkeletonCardContainer=i.div`
+  background: ${({$theme:e})=>e==="dark"?"#1f2937":"#ffffff"};
+  border-radius: ${s.borderRadius100||"12px"};
   padding: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid ${({ $theme }) => $theme === 'dark' ? '#374151' : '#f3f4f6'};
+  border: 1px solid ${({$theme:e})=>e==="dark"?"#374151":"#f3f4f6"};
   overflow: hidden;
   
-  ${breakpoints.sm} {
+  ${d.sm} {
     padding: 12px;
   }
-`;
-export const SkeletonTextContainer = styled.div `
+`,SkeletonTextContainer=i.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ $gap }) => $gap};
+  gap: ${({$gap:e})=>e};
 `;

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

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

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

@@ -1,4 +1 @@
-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'];
+"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"];

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

@@ -1,128 +1 @@
-'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';
+"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";