react-restyle-components 0.4.39 → 0.4.40

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';

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

@@ -1,4 +1,7 @@
-"use strict";import{styled as i,css as e,keyframes as n}from"styled-components";import{tokens as a}from"../../utils/designTokens";const c=n`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const fadeIn = keyframes `
   from {
     opacity: 0;
     transform: scale(0.3);
@@ -7,7 +10,8 @@
     opacity: 1;
     transform: scale(1);
   }
-`,p=n`
+`;
+const fadeOut = keyframes `
   from {
     opacity: 1;
     transform: scale(1);
@@ -16,11 +20,39 @@
     opacity: 0;
     transform: scale(0.3);
   }
-`,x=n`
+`;
+const backdropFadeIn = keyframes `
   from { opacity: 0; }
   to { opacity: 1; }
-`;export const sizeConfig={small:{fabSize:48,actionSize:40,iconSize:24,actionIconSize:20,labelFontSize:"12px"},medium:{fabSize:56,actionSize:48,iconSize:28,actionIconSize:24,labelFontSize:"13px"},large:{fabSize:64,actionSize:56,iconSize:32,actionIconSize:28,labelFontSize:"14px"}};const l={filled:e`
-    background: ${a.primary||"#3b82f6"};
+`;
+// Size configurations
+export const sizeConfig = {
+    small: {
+        fabSize: 48,
+        actionSize: 40,
+        iconSize: 24,
+        actionIconSize: 20,
+        labelFontSize: '12px',
+    },
+    medium: {
+        fabSize: 56,
+        actionSize: 48,
+        iconSize: 28,
+        actionIconSize: 24,
+        labelFontSize: '13px',
+    },
+    large: {
+        fabSize: 64,
+        actionSize: 56,
+        iconSize: 32,
+        actionIconSize: 28,
+        labelFontSize: '14px',
+    },
+};
+// Variant styles for FAB
+const fabVariantStyles = {
+    filled: css `
+    background: ${tokens.primary || '#3b82f6'};
     color: white;
     border: none;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
@@ -29,96 +61,117 @@
       background: #2563eb;
       box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
     }
-  `,outlined:e`
+  `,
+    outlined: css `
     background: white;
-    color: ${a.primary||"#3b82f6"};
-    border: 2px solid ${a.primary||"#3b82f6"};
+    color: ${tokens.primary || '#3b82f6'};
+    border: 2px solid ${tokens.primary || '#3b82f6'};
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     
     &:hover:not(:disabled) {
-      background: ${a.primary||"#3b82f6"}10;
+      background: ${tokens.primary || '#3b82f6'}10;
     }
-  `,soft:e`
-    background: ${a.primary||"#3b82f6"}15;
-    color: ${a.primary||"#3b82f6"};
+  `,
+    soft: css `
+    background: ${tokens.primary || '#3b82f6'}15;
+    color: ${tokens.primary || '#3b82f6'};
     border: none;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     
     &:hover:not(:disabled) {
-      background: ${a.primary||"#3b82f6"}25;
+      background: ${tokens.primary || '#3b82f6'}25;
     }
-  `},d=o=>{switch(o){case"up":return e`
+  `,
+};
+// Direction styles for actions container
+const getDirectionStyles = (direction) => {
+    switch (direction) {
+        case 'up':
+            return css `
         flex-direction: column-reverse;
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-bottom: 16px;
-      `;case"down":return e`
+      `;
+        case 'down':
+            return css `
         flex-direction: column;
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-top: 16px;
-      `;case"left":return e`
+      `;
+        case 'left':
+            return css `
         flex-direction: row-reverse;
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
         padding-right: 16px;
-      `;case"right":return e`
+      `;
+        case 'right':
+            return css `
         flex-direction: row;
         left: 100%;
         top: 50%;
         transform: translateY(-50%);
         padding-left: 16px;
-      `;default:return e`
+      `;
+        default:
+            return css `
         flex-direction: column-reverse;
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-bottom: 16px;
-      `}};export const SpeedDialRoot=i.div`
+      `;
+    }
+};
+export const SpeedDialRoot = styled.div `
   position: relative;
-  display: ${({$hidden:o})=>o?"none":"inline-flex"};
-  z-index: ${({$zIndex:o})=>o};
-`,SpeedDialBackdrop=i.div`
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'inline-flex')};
+  z-index: ${({ $zIndex }) => $zIndex};
+`;
+export const SpeedDialBackdrop = styled.div `
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, ${({$opacity:o})=>o});
-  z-index: ${({$zIndex:o})=>o-1};
-  pointer-events: ${({$isOpen:o})=>o?"auto":"none"};
-  opacity: ${({$isOpen:o})=>o?1:0};
+  background: rgba(0, 0, 0, ${({ $opacity }) => $opacity});
+  z-index: ${({ $zIndex }) => $zIndex - 1};
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
   transition: opacity 0.2s ease;
-`,SpeedDialFab=i.button`
+`;
+export const SpeedDialFab = styled.button `
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o})=>sizeConfig[o].fabSize}px;
-  height: ${({$size:o})=>sizeConfig[o].fabSize}px;
+  width: ${({ $size }) => sizeConfig[$size].fabSize}px;
+  height: ${({ $size }) => sizeConfig[$size].fabSize}px;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   z-index: 2;
   
-  ${({$variant:o})=>l[o]}
+  ${({ $variant }) => fabVariantStyles[$variant]}
   
   /* Custom colors override */
-  ${({$customBg:o})=>o&&e`background: ${o};`}
-  ${({$customColor:o})=>o&&e`color: ${o};`}
+  ${({ $customBg }) => $customBg && css `background: ${$customBg};`}
+  ${({ $customColor }) => $customColor && css `color: ${$customColor};`}
   
   /* Icon rotation */
   & > * {
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    ${({$isOpen:o,$rotateOnToggle:t,$rotationDegrees:r})=>o&&t&&e`
-        transform: rotate(${r}deg);
+    ${({ $isOpen, $rotateOnToggle, $rotationDegrees }) => $isOpen && $rotateOnToggle && css `
+        transform: rotate(${$rotationDegrees}deg);
       `}
   }
   
   /* Focus ring */
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${a.primary||"#3b82f6"}40;
+    box-shadow: 0 0 0 3px ${tokens.primary || '#3b82f6'}40;
   }
   
   /* Disabled state */
@@ -135,30 +188,40 @@
   &:active:not(:disabled) {
     transform: scale(0.95);
   }
-`,SpeedDialActions=i.div`
+`;
+export const SpeedDialActions = styled.div `
   position: absolute;
   display: flex;
   align-items: center;
-  gap: ${({$gap:o})=>o}px;
-  pointer-events: ${({$isOpen:o})=>o?"auto":"none"};
+  gap: ${({ $gap }) => $gap}px;
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
   
-  ${({$direction:o})=>d(o)}
-`,SpeedDialActionWrapper=i.div`
+  ${({ $direction }) => getDirectionStyles($direction)}
+`;
+export const SpeedDialActionWrapper = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
   
-  ${({$direction:o,$showLabels:t})=>t?o==="up"||o==="down"?e`flex-direction: row;`:e`flex-direction: column;`:""}
-`,SpeedDialActionButton=i.button`
+  ${({ $direction, $showLabels }) => {
+    if (!$showLabels)
+        return '';
+    if ($direction === 'up' || $direction === 'down') {
+        return css `flex-direction: row;`;
+    }
+    return css `flex-direction: column;`;
+}}
+`;
+export const SpeedDialActionButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o})=>sizeConfig[o].actionSize}px;
-  height: ${({$size:o})=>sizeConfig[o].actionSize}px;
+  width: ${({ $size }) => sizeConfig[$size].actionSize}px;
+  height: ${({ $size }) => sizeConfig[$size].actionSize}px;
   border-radius: 50%;
   border: none;
-  background: ${({$customBg:o})=>o||"white"};
-  color: ${({$customColor:o})=>o||"#374151"};
+  background: ${({ $customBg }) => $customBg || 'white'};
+  color: ${({ $customColor }) => $customColor || '#374151'};
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all 0.2s ease;
@@ -169,17 +232,19 @@
   opacity: 0;
   transform: scale(0.3);
   
-  ${({$isOpen:o,$index:t,$staggerDelay:r,$animationDuration:s})=>o?e`
-          animation: ${c} ${s}ms ease forwards;
-          animation-delay: ${t*r}ms;
-        `:e`
-          animation: ${p} ${s*.5}ms ease forwards;
-          animation-delay: ${t*(r*.3)}ms;
+  ${({ $isOpen, $index, $staggerDelay, $animationDuration }) => $isOpen
+    ? css `
+          animation: ${fadeIn} ${$animationDuration}ms ease forwards;
+          animation-delay: ${$index * $staggerDelay}ms;
+        `
+    : css `
+          animation: ${fadeOut} ${$animationDuration * 0.5}ms ease forwards;
+          animation-delay: ${$index * ($staggerDelay * 0.3)}ms;
         `}
   
   /* Focus ring */
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${a.primary||"#3b82f6"}40;
+    box-shadow: 0 0 0 3px ${tokens.primary || '#3b82f6'}40;
   }
   
   /* Disabled state */
@@ -197,8 +262,9 @@
   &:active:not(:disabled) {
     transform: scale(0.95);
   }
-`,SpeedDialActionLabel=i.span`
-  font-size: ${({$size:o})=>sizeConfig[o].labelFontSize};
+`;
+export const SpeedDialActionLabel = styled.span `
+  font-size: ${({ $size }) => sizeConfig[$size].labelFontSize};
   font-weight: 500;
   color: #374151;
   white-space: nowrap;
@@ -209,18 +275,22 @@
   
   /* Animation */
   opacity: 0;
-  transform: translateX(${({$direction:o})=>o==="left"?"10px":o==="right"?"-10px":"0"}) translateY(${({$direction:o})=>o==="up"?"10px":o==="down"?"-10px":"0"});
+  transform: translateX(${({ $direction }) => $direction === 'left' ? '10px' :
+    $direction === 'right' ? '-10px' : '0'}) translateY(${({ $direction }) => $direction === 'up' ? '10px' :
+    $direction === 'down' ? '-10px' : '0'});
   
-  ${({$isOpen:o,$index:t,$staggerDelay:r})=>o&&e`
-      animation: ${c} 150ms ease forwards;
-      animation-delay: ${t*r+50}ms;
+  ${({ $isOpen, $index, $staggerDelay }) => $isOpen &&
+    css `
+      animation: ${fadeIn} 150ms ease forwards;
+      animation-delay: ${$index * $staggerDelay + 50}ms;
     `}
-`,IconWrapper=i.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o,$isAction:t})=>t?sizeConfig[o].actionIconSize:sizeConfig[o].iconSize}px;
-  height: ${({$size:o,$isAction:t})=>t?sizeConfig[o].actionIconSize:sizeConfig[o].iconSize}px;
+  width: ${({ $size, $isAction }) => $isAction ? sizeConfig[$size].actionIconSize : sizeConfig[$size].iconSize}px;
+  height: ${({ $size, $isAction }) => $isAction ? sizeConfig[$size].actionIconSize : sizeConfig[$size].iconSize}px;
   
   svg {
     width: 100%;

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

@@ -1 +1,2 @@
-"use strict";export{SpeedDial}from"./SpeedDial";export*from"./types";
+export { SpeedDial } from './SpeedDial';
+export * from './types';

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

@@ -1 +1,3 @@
-"use strict";export const SPEED_DIAL_DIRECTIONS=["up","down","left","right"],SPEED_DIAL_SIZES=["small","medium","large"],SPEED_DIAL_VARIANTS=["filled","outlined","soft"];
+export const SPEED_DIAL_DIRECTIONS = ['up', 'down', 'left', 'right'];
+export const SPEED_DIAL_SIZES = ['small', 'medium', 'large'];
+export const SPEED_DIAL_VARIANTS = ['filled', 'outlined', 'soft'];

package/lib/src/core-components/src/components/Stepper2/stepper.component.js

@@ -1 +1,139 @@
-"use strict";import{jsx as p,jsxs as v}from"react/jsx-runtime";import e from"../../tc.module.css";import{cn as n}from"../../utils";const _={completedColor:"#ffae1a",activeColor:"#ffae1a",pendingColor:"#d1d5db",lineColor:"#d1d5db",completedTextColor:"#374151",activeTextColor:"#ffffff",pendingTextColor:"#9ca3af"},D={sm:{stepSize:24,fontSize:"0.625rem",padding:2},md:{stepSize:32,fontSize:"0.75rem",padding:4},lg:{stepSize:40,fontSize:"0.875rem",padding:6}};export const Stepper=({className:$="",steps:f,currentStep:b=1,onStepClick:m,size:S="md",colors:I={},showNumbers:C=!0,lineThickness:x=2,stepSize:w,clickable:h=!0,style:y,orientation:H="horizontal",classNames:i={},styles:l={}})=>{const o={..._,...I},c=D[S],g=w||c.stepSize,z=c.padding+g/2,T=n($,e["w-full"],e["px-4"],e["sm:px-8"],i.container),k=(r,a)=>typeof r=="string"?{label:r,number:a+1,description:void 0,status:void 0}:{label:r.label,number:r.number??a+1,description:r.description,status:r.status},L=f?.map((r,a)=>{const s=k(r,a),u=s.number;let d;s.status?d=s.status:u<b?d="completed":u===b?d="current":d="pending";let N=n(e["inline-block"],e.transform,e["-translate-x-1/2"],e["rounded-full"],e["text-center"],e["font-medium"],e.border);const t={width:`${g}px`,height:`${g}px`,fontSize:c.fontSize,position:"relative",zIndex:10,display:"flex",alignItems:"center",justifyContent:"center",borderWidth:"2px",borderStyle:"solid",transition:"all 0.3s ease",lineHeight:1};return d==="completed"?(t.borderColor=o.completedColor,t.backgroundColor="#ffffff",t.color=o.completedTextColor):d==="current"?(t.borderColor=o.activeColor,t.backgroundColor=o.activeColor,t.color=o.activeTextColor):(t.borderColor=o.pendingColor,t.backgroundColor="#ffffff",t.color=o.pendingTextColor),h&&m&&(t.cursor="pointer"),v("div",{style:{left:f.length>1?`${a/(f.length-1)*100}%`:"50%",...l.stepWrapper},className:n(e.absolute,i.stepWrapper),children:[p("span",{className:n(N,e["font-arimaRegular"],i.stepCircle),style:{...t,...l.stepCircle},onClick:()=>{h&&m&&m(u,r,a)},children:C?u:s.label}),!C&&s.description&&p("div",{className:i.stepDescription,style:{position:"absolute",top:`${g+8}px`,left:"50%",transform:"translateX(-50%)",fontSize:"0.75rem",color:d==="current"?o.activeColor:o.pendingTextColor,whiteSpace:"nowrap",...l.stepDescription},children:s.description})]},`step-${a}-${s.label}`)}),W=f.length>1?`${(b-1)/(f.length-1)*100}%`:"0%",j=c.padding*2+g;return p("div",{className:T,style:{...y,...l.container},children:v("div",{className:n(e["w-full"],e.relative,i.stepsWrapper),style:{minHeight:`${j}px`,paddingTop:`${c.padding}px`,...l.stepsWrapper},children:[p("div",{className:n(e.absolute,e["left-0"],e["w-full"],e["transition-width"],e["ease-in-out"],e["duration-500"],i.backgroundLine),style:{top:`${z}px`,height:`${x}px`,backgroundColor:o.lineColor,transform:"translateY(-50%)",zIndex:0,...l.backgroundLine}}),p("div",{className:n(e.absolute,e["left-0"],e["transition-width"],e["ease-in-out"],e["duration-500"],i.progressLine),style:{top:`${z}px`,width:W,height:`${x}px`,backgroundColor:o.completedColor,transform:"translateY(-50%)",zIndex:1,...l.progressLine}}),p("div",{className:n(e.relative,e["sm:block"]),style:{zIndex:2},children:L})]})})};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const DEFAULT_COLORS = {
+    completedColor: '#ffae1a',
+    activeColor: '#ffae1a',
+    pendingColor: '#d1d5db',
+    lineColor: '#d1d5db',
+    completedTextColor: '#374151',
+    activeTextColor: '#ffffff',
+    pendingTextColor: '#9ca3af', // gray-400
+};
+const SIZE_CONFIG = {
+    sm: { stepSize: 24, fontSize: '0.625rem', padding: 2 },
+    md: { stepSize: 32, fontSize: '0.75rem', padding: 4 },
+    lg: { stepSize: 40, fontSize: '0.875rem', padding: 6 },
+};
+export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', classNames: customClassNames = {}, styles: customStyles = {}, }) => {
+    const mergedColors = { ...DEFAULT_COLORS, ...colors };
+    const sizeConfig = SIZE_CONFIG[size];
+    const finalStepSize = stepSize || sizeConfig.stepSize;
+    const linePosition = sizeConfig.padding + finalStepSize / 2;
+    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8'], customClassNames.container);
+    // Helper to get step info
+    const getStepInfo = (step, index) => {
+        if (typeof step === 'string') {
+            return {
+                label: step,
+                number: index + 1,
+                description: undefined,
+                status: undefined,
+            };
+        }
+        return {
+            label: step.label,
+            number: step.number ?? index + 1,
+            description: step.description,
+            status: step.status,
+        };
+    };
+    const Steps = steps?.map((step, index) => {
+        const stepInfo = getStepInfo(step, index);
+        const stepNumber = stepInfo.number;
+        // Determine status
+        let status;
+        if (stepInfo.status) {
+            status = stepInfo.status;
+        }
+        else if (stepNumber < currentStep) {
+            status = 'completed';
+        }
+        else if (stepNumber === currentStep) {
+            status = 'current';
+        }
+        else {
+            status = 'pending';
+        }
+        // Base step classes
+        let stepClass = cn(s['inline-block'], s['transform'], s['-translate-x-1/2'], s['rounded-full'], s['text-center'], s['font-medium'], s['border']);
+        // Apply styles based on status
+        const stepStyles = {
+            width: `${finalStepSize}px`,
+            height: `${finalStepSize}px`,
+            fontSize: sizeConfig.fontSize,
+            position: 'relative',
+            zIndex: 10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: '2px',
+            borderStyle: 'solid',
+            transition: 'all 0.3s ease',
+            lineHeight: 1,
+        };
+        if (status === 'completed') {
+            stepStyles.borderColor = mergedColors.completedColor;
+            stepStyles.backgroundColor = '#ffffff';
+            stepStyles.color = mergedColors.completedTextColor;
+        }
+        else if (status === 'current') {
+            stepStyles.borderColor = mergedColors.activeColor;
+            stepStyles.backgroundColor = mergedColors.activeColor;
+            stepStyles.color = mergedColors.activeTextColor;
+        }
+        else {
+            // pending
+            stepStyles.borderColor = mergedColors.pendingColor;
+            stepStyles.backgroundColor = '#ffffff';
+            stepStyles.color = mergedColors.pendingTextColor;
+        }
+        if (clickable && onStepClick) {
+            stepStyles.cursor = 'pointer';
+        }
+        return (_jsxs("div", { style: {
+                left: steps.length > 1 ? `${(index / (steps.length - 1)) * 100}%` : '50%',
+                ...customStyles.stepWrapper,
+            }, className: cn(s['absolute'], customClassNames.stepWrapper), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular'], customClassNames.stepCircle), style: { ...stepStyles, ...customStyles.stepCircle }, onClick: () => {
+                        if (clickable && onStepClick) {
+                            onStepClick(stepNumber, step, index);
+                        }
+                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { className: customClassNames.stepDescription, style: {
+                        position: 'absolute',
+                        top: `${finalStepSize + 8}px`,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        fontSize: '0.75rem',
+                        color: status === 'current'
+                            ? mergedColors.activeColor
+                            : mergedColors.pendingTextColor,
+                        whiteSpace: 'nowrap',
+                        ...customStyles.stepDescription,
+                    }, children: stepInfo.description }))] }, `step-${index}-${stepInfo.label}`));
+    });
+    // Calculate progress width based on current step
+    const progressWidth = steps.length > 1
+        ? `${((currentStep - 1) / (steps.length - 1)) * 100}%`
+        : '0%';
+    const containerHeight = sizeConfig.padding * 2 + finalStepSize;
+    return (_jsx("div", { className: finalClass, style: { ...style, ...customStyles.container }, children: _jsxs("div", { className: cn(s['w-full'], s['relative'], customClassNames.stepsWrapper), style: {
+                minHeight: `${containerHeight}px`,
+                paddingTop: `${sizeConfig.padding}px`,
+                ...customStyles.stepsWrapper,
+            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.backgroundLine), style: {
+                        top: `${linePosition}px`,
+                        height: `${lineThickness}px`,
+                        backgroundColor: mergedColors.lineColor,
+                        transform: 'translateY(-50%)',
+                        zIndex: 0,
+                        ...customStyles.backgroundLine,
+                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.progressLine), style: {
+                        top: `${linePosition}px`,
+                        width: progressWidth,
+                        height: `${lineThickness}px`,
+                        backgroundColor: mergedColors.completedColor,
+                        transform: 'translateY(-50%)',
+                        zIndex: 1,
+                        ...customStyles.progressLine,
+                    } }), _jsx("div", { className: cn(s['relative'], s['sm:block']), style: { zIndex: 2 }, children: Steps })] }) }));
+};