react-restyle-components 0.4.23 → 0.4.24

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

@@ -0,0 +1,128 @@
+'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.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { SpeedDialDirection, SpeedDialSize, SpeedDialVariant } from './types';
+export declare const sizeConfig: Record<SpeedDialSize, {
+    fabSize: number;
+    actionSize: number;
+    iconSize: number;
+    actionIconSize: number;
+    labelFontSize: string;
+}>;
+export declare const SpeedDialRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $zIndex: number;
+    $hidden: boolean;
+}>> & string;
+export declare const SpeedDialBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isOpen: boolean;
+    $opacity: number;
+    $zIndex: number;
+}>> & string;
+export declare const SpeedDialFab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size: SpeedDialSize;
+    $variant: SpeedDialVariant;
+    $isOpen: boolean;
+    $rotateOnToggle: boolean;
+    $rotationDegrees: number;
+    $customBg?: string | undefined;
+    $customColor?: string | undefined;
+}>> & string;
+export declare const SpeedDialActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $direction: SpeedDialDirection;
+    $gap: number;
+    $isOpen: boolean;
+}>> & string;
+export declare const SpeedDialActionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $direction: SpeedDialDirection;
+    $showLabels: boolean;
+}>> & string;
+export declare const SpeedDialActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size: SpeedDialSize;
+    $isOpen: boolean;
+    $index: number;
+    $staggerDelay: number;
+    $animationDuration: number;
+    $customBg?: string | undefined;
+    $customColor?: string | undefined;
+}>> & string;
+export declare const SpeedDialActionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: SpeedDialSize;
+    $direction: SpeedDialDirection;
+    $isOpen: boolean;
+    $index: number;
+    $staggerDelay: number;
+}>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: SpeedDialSize;
+    $isAction?: boolean | undefined;
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/SpeedDial/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/SpeedDial/elements.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA+B5E,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB,CAsBA,CAAC;AAmFF,eAAO,MAAM,aAAa;aACf,MAAM;aACN,OAAO;YAKjB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aACnB,OAAO;cACN,MAAM;aACP,MAAM;YAShB,CAAC;AAEF,eAAO,MAAM,YAAY;WAChB,aAAa;cACV,gBAAgB;aACjB,OAAO;qBACC,OAAO;sBACN,MAAM;;;YAkDzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBACf,kBAAkB;UACxB,MAAM;aACH,OAAO;YASjB,CAAC;AAEF,eAAO,MAAM,sBAAsB;gBACrB,kBAAkB;iBACjB,OAAO;YAcrB,CAAC;AAEF,eAAO,MAAM,qBAAqB;WACzB,aAAa;aACX,OAAO;YACR,MAAM;mBACC,MAAM;wBACD,MAAM;;;YAsD3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;WACxB,aAAa;gBACR,kBAAkB;aACrB,OAAO;YACR,MAAM;mBACC,MAAM;YA2BtB,CAAC;AAEF,eAAO,MAAM,WAAW;WACf,aAAa;;YAerB,CAAC"}

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

@@ -0,0 +1,299 @@
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const fadeOut = keyframes `
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+`;
+const backdropFadeIn = keyframes `
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+// 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);
+    
+    &:hover:not(:disabled) {
+      background: #2563eb;
+      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
+    }
+  `,
+    outlined: css `
+    background: white;
+    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: ${tokens.primary || '#3b82f6'}10;
+    }
+  `,
+    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: ${tokens.primary || '#3b82f6'}25;
+    }
+  `,
+};
+// 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 css `
+        flex-direction: column;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding-top: 16px;
+      `;
+        case 'left':
+            return css `
+        flex-direction: row-reverse;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        padding-right: 16px;
+      `;
+        case 'right':
+            return css `
+        flex-direction: row;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        padding-left: 16px;
+      `;
+        default:
+            return css `
+        flex-direction: column-reverse;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding-bottom: 16px;
+      `;
+    }
+};
+export const SpeedDialRoot = styled.div `
+  position: relative;
+  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 }) => $opacity});
+  z-index: ${({ $zIndex }) => $zIndex - 1};
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity 0.2s ease;
+`;
+export const SpeedDialFab = styled.button `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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 }) => fabVariantStyles[$variant]}
+  
+  /* Custom colors override */
+  ${({ $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, $rotateOnToggle, $rotationDegrees }) => $isOpen && $rotateOnToggle && css `
+        transform: rotate(${$rotationDegrees}deg);
+      `}
+  }
+  
+  /* Focus ring */
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${tokens.primary || '#3b82f6'}40;
+  }
+  
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  /* Hover scale */
+  &:hover:not(:disabled) {
+    transform: scale(1.05);
+  }
+  
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+`;
+export const SpeedDialActions = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: ${({ $gap }) => $gap}px;
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
+  
+  ${({ $direction }) => getDirectionStyles($direction)}
+`;
+export const SpeedDialActionWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  ${({ $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 }) => sizeConfig[$size].actionSize}px;
+  height: ${({ $size }) => sizeConfig[$size].actionSize}px;
+  border-radius: 50%;
+  border: none;
+  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;
+  outline: none;
+  flex-shrink: 0;
+  
+  /* Animation */
+  opacity: 0;
+  transform: scale(0.3);
+  
+  ${({ $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 ${tokens.primary || '#3b82f6'}40;
+  }
+  
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  
+  /* Hover */
+  &:hover:not(:disabled) {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+  
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+`;
+export const SpeedDialActionLabel = styled.span `
+  font-size: ${({ $size }) => sizeConfig[$size].labelFontSize};
+  font-weight: 500;
+  color: #374151;
+  white-space: nowrap;
+  padding: 6px 12px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  
+  /* Animation */
+  opacity: 0;
+  transform: translateX(${({ $direction }) => $direction === 'left' ? '10px' :
+    $direction === 'right' ? '-10px' : '0'}) translateY(${({ $direction }) => $direction === 'up' ? '10px' :
+    $direction === 'down' ? '-10px' : '0'});
+  
+  ${({ $isOpen, $index, $staggerDelay }) => $isOpen &&
+    css `
+      animation: ${fadeIn} 150ms ease forwards;
+      animation-delay: ${$index * $staggerDelay + 50}ms;
+    `}
+`;
+export const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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%;
+    height: 100%;
+  }
+`;

package/lib/src/core-components/src/components/SpeedDial/index.d.ts

@@ -0,0 +1,3 @@
+export { SpeedDial } from './SpeedDial';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/SpeedDial/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/SpeedDial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

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

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

package/lib/src/core-components/src/components/SpeedDial/types.d.ts

@@ -0,0 +1,149 @@
+import React, { CSSProperties } from 'react';
+export declare const SPEED_DIAL_DIRECTIONS: readonly ["up", "down", "left", "right"];
+export type SpeedDialDirection = (typeof SPEED_DIAL_DIRECTIONS)[number];
+export declare const SPEED_DIAL_SIZES: readonly ["small", "medium", "large"];
+export type SpeedDialSize = (typeof SPEED_DIAL_SIZES)[number];
+export declare const SPEED_DIAL_VARIANTS: readonly ["filled", "outlined", "soft"];
+export type SpeedDialVariant = (typeof SPEED_DIAL_VARIANTS)[number];
+/** Individual action item */
+export interface SpeedDialAction {
+    /** Unique identifier */
+    id: string;
+    /** Icon name (from react-icons, e.g., 'FaShare', 'MdPrint') */
+    icon: string;
+    /** Custom icon element (overrides icon name) */
+    iconElement?: React.ReactNode;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Label text (shown next to icon if showLabels is true) */
+    label?: string;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom background color */
+    backgroundColor?: string;
+    /** Custom icon color */
+    iconColor?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+/** UI Configuration */
+export interface SpeedDialUIConfig {
+    /** Direction of expansion */
+    direction?: SpeedDialDirection;
+    /** Size preset */
+    size?: SpeedDialSize;
+    /** Visual variant */
+    variant?: SpeedDialVariant;
+    /** Gap between action buttons */
+    gap?: number;
+    /** Show labels next to actions */
+    showLabels?: boolean;
+    /** Show tooltips on hover */
+    showTooltips?: boolean;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Stagger delay between actions in ms */
+    staggerDelay?: number;
+    /** Backdrop when open */
+    showBackdrop?: boolean;
+    /** Backdrop opacity */
+    backdropOpacity?: number;
+    /** Z-index */
+    zIndex?: number;
+}
+/** Main button configuration */
+export interface SpeedDialMainButtonConfig {
+    /** Open icon name (default: 'MdAdd') */
+    openIcon?: string;
+    /** Close icon name (default: 'MdClose') */
+    closeIcon?: string;
+    /** Custom open icon element */
+    openIconElement?: React.ReactNode;
+    /** Custom close icon element */
+    closeIconElement?: React.ReactNode;
+    /** Background color */
+    backgroundColor?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Rotate animation on toggle */
+    rotateOnToggle?: boolean;
+    /** Rotation degrees */
+    rotationDegrees?: number;
+    /** ARIA label when closed */
+    ariaLabelClosed?: string;
+    /** ARIA label when open */
+    ariaLabelOpen?: string;
+}
+/** Custom class names */
+export interface SpeedDialClassNames {
+    /** Root container */
+    root?: string;
+    /** Main FAB button */
+    fab?: string;
+    /** Actions container */
+    actions?: string;
+    /** Individual action button */
+    action?: string;
+    /** Action label */
+    actionLabel?: string;
+    /** Backdrop */
+    backdrop?: string;
+}
+/** Custom styles */
+export interface SpeedDialStyles {
+    /** Root container */
+    root?: CSSProperties;
+    /** Main FAB button */
+    fab?: CSSProperties;
+    /** Actions container */
+    actions?: CSSProperties;
+    /** Individual action button */
+    action?: CSSProperties;
+    /** Action label */
+    actionLabel?: CSSProperties;
+    /** Backdrop */
+    backdrop?: CSSProperties;
+}
+export interface SpeedDialProps {
+    /** Array of action items */
+    actions: SpeedDialAction[];
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Open state change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when an action is clicked */
+    onActionClick?: (action: SpeedDialAction, e: React.MouseEvent) => void;
+    /** UI configuration */
+    uiConfig?: SpeedDialUIConfig;
+    /** Main button configuration */
+    mainButtonConfig?: SpeedDialMainButtonConfig;
+    /** Custom class names */
+    classNames?: SpeedDialClassNames;
+    /** Custom styles */
+    styles?: SpeedDialStyles;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Hidden state */
+    hidden?: boolean;
+    /** Close on action click */
+    closeOnActionClick?: boolean;
+    /** Close on outside click */
+    closeOnClickOutside?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/SpeedDial/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/SpeedDial/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+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/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwitchProps } from './types';
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Switch.d.ts.map

package/lib/src/core-components/src/components/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAgBpC,eAAO,MAAM,MAAM,sFA8FlB,CAAC"}