@seedgrid/fe-components 0.2.4

package/dist/buttons/SgFloatActionButton.js

@@ -0,0 +1,532 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { t, useComponentsI18n } from "../i18n";
+import { SgPopup } from "../overlay/SgPopup";
+/* ── helpers ── */
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/* ── constants ── */
+const EDGE = 24;
+const POS_CSS = {
+    "left-top": { top: EDGE, left: EDGE },
+    "left-center": { left: EDGE, top: "50%" },
+    "left-bottom": { bottom: EDGE, left: EDGE },
+    "center-top": { top: EDGE, left: "50%" },
+    "center-bottom": { bottom: EDGE, left: "50%" },
+    "right-top": { top: EDGE, right: EDGE },
+    "right-center": { right: EDGE, top: "50%" },
+    "right-bottom": { bottom: EDGE, right: EDGE },
+};
+const CENTER_TX = {
+    "left-center": "translateY(-50%)",
+    "right-center": "translateY(-50%)",
+    "center-top": "translateX(-50%)",
+    "center-bottom": "translateX(-50%)",
+};
+const DEFAULT_HINT = {
+    "left-top": "right", "left-center": "right", "left-bottom": "right",
+    "center-top": "bottom", "center-bottom": "top",
+    "right-top": "left", "right-center": "left", "right-bottom": "left",
+};
+const DEFAULT_DIR = {
+    "left-top": "down", "left-center": "right", "left-bottom": "up",
+    "center-top": "down", "center-bottom": "up",
+    "right-top": "down", "right-center": "left", "right-bottom": "up",
+};
+const COLORS = {
+    primary: {
+        bg: "var(--sg-btn-primary-bg, hsl(var(--primary)))",
+        fg: "var(--sg-btn-primary-fg, hsl(var(--primary-foreground)))",
+        ring: "var(--sg-btn-primary-ring, hsl(var(--primary)/0.35))",
+    },
+    secondary: {
+        bg: "var(--sg-btn-secondary-bg, hsl(var(--secondary)))",
+        fg: "var(--sg-btn-secondary-fg, hsl(var(--secondary-foreground)))",
+        ring: "var(--sg-btn-secondary-ring, hsl(var(--secondary)/0.35))",
+    },
+    success: {
+        bg: "var(--sg-btn-success-bg, hsl(var(--tertiary, var(--accent))))",
+        fg: "var(--sg-btn-success-fg, hsl(var(--tertiary-foreground, var(--accent-foreground, 0 0% 100%))))",
+        ring: "var(--sg-btn-success-ring, hsl(var(--tertiary, var(--accent))/0.35))",
+    },
+    info: {
+        bg: "var(--sg-btn-info-bg, hsl(var(--secondary, var(--primary))))",
+        fg: "var(--sg-btn-info-fg, hsl(var(--secondary-foreground, var(--primary-foreground))))",
+        ring: "var(--sg-btn-info-ring, hsl(var(--secondary, var(--primary))/0.35))",
+    },
+    warning: {
+        bg: "var(--sg-btn-warning-bg, hsl(var(--secondary, var(--accent))))",
+        fg: "var(--sg-btn-warning-fg, hsl(var(--secondary-foreground, var(--accent-foreground, 0 0% 100%))))",
+        ring: "var(--sg-btn-warning-ring, hsl(var(--secondary, var(--accent))/0.35))",
+    },
+    help: {
+        bg: "var(--sg-btn-help-bg, hsl(var(--secondary, var(--primary))))",
+        fg: "var(--sg-btn-help-fg, hsl(var(--secondary-foreground, var(--primary-foreground))))",
+        ring: "var(--sg-btn-help-ring, hsl(var(--secondary, var(--primary))/0.35))",
+    },
+    danger: {
+        bg: "var(--sg-btn-danger-bg, hsl(var(--destructive)))",
+        fg: "var(--sg-btn-danger-fg, hsl(var(--destructive-foreground)))",
+        ring: "var(--sg-btn-danger-ring, hsl(var(--destructive)/0.35))",
+    },
+    plain: {
+        bg: "hsl(var(--muted))",
+        fg: "hsl(var(--muted-foreground))",
+        ring: "hsl(var(--muted)/0.35)",
+    },
+};
+const BTN_WH = { sm: 40, md: 56, lg: 64 };
+const ICON_SZ = { sm: 18, md: 22, lg: 26 };
+const ACT_WH = { sm: 36, md: 44, lg: 52 };
+const ACT_ICON = { sm: 14, md: 18, lg: 20 };
+const SHAPE_CLS = {
+    circle: "rounded-full",
+    rounded: "rounded-xl",
+    square: "rounded-sm",
+};
+const ELEV_CLS = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md shadow-black/15",
+    lg: "shadow-lg shadow-black/20",
+};
+const TIP_CLS = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+const ACT_TIP_DIR = {
+    up: "left", down: "right", left: "top", right: "bottom",
+};
+// linear spacing between main FAB and action buttons (and among actions)
+const ITEM_GAP = { sm: 48, md: 60, lg: 72 };
+const DEFAULT_RADIUS = { sm: 100, md: 120, lg: 150 };
+const DIRECTION_START_ANGLE = {
+    up: 270,
+    down: 90,
+    left: 180,
+    right: 0
+};
+/* ── positioning helpers ── */
+function degToRad(deg) {
+    return (deg * Math.PI) / 180;
+}
+function computeItemPositions(count, type, direction, size, radius) {
+    if (count === 0)
+        return [];
+    if (type === "linear") {
+        const gap = ITEM_GAP[size];
+        return Array.from({ length: count }, (_, i) => {
+            const dist = gap * (i + 1);
+            switch (direction) {
+                case "up":
+                    return { x: 0, y: -dist };
+                case "down":
+                    return { x: 0, y: dist };
+                case "left":
+                    return { x: -dist, y: 0 };
+                case "right":
+                    return { x: dist, y: 0 };
+            }
+        });
+    }
+    const r = radius ?? DEFAULT_RADIUS[size];
+    const centerAngle = DIRECTION_START_ANGLE[direction] ?? 0;
+    let totalArc;
+    switch (type) {
+        case "circle":
+            totalArc = 360;
+            break;
+        case "semi-circle":
+            totalArc = 180;
+            break;
+        case "quarter-circle":
+            totalArc = 90;
+            break;
+        default:
+            totalArc = 360;
+    }
+    const step = type === "circle" ? totalArc / count : totalArc / Math.max(count - 1, 1);
+    const startAngle = type === "circle" ? centerAngle : centerAngle - totalArc / 2;
+    return Array.from({ length: count }, (_, i) => {
+        const angle = startAngle + step * i;
+        const rad = degToRad(angle);
+        return {
+            x: Math.round(r * Math.cos(rad)),
+            y: Math.round(r * Math.sin(rad))
+        };
+    });
+}
+/* ── icons ── */
+function PlusIcon({ size }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5v14" })] }));
+}
+function Spinner({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: "animate-spin", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }), _jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] }));
+}
+/* ── slide offset by position ── */
+function slideInit(pos) {
+    if (pos.endsWith("bottom"))
+        return "translateY(24px)";
+    if (pos.endsWith("top"))
+        return "translateY(-24px)";
+    if (pos.startsWith("left"))
+        return "translateX(-24px)";
+    return "translateX(24px)";
+}
+/* ── component ── */
+export function SgFloatActionButton(props) {
+    const i18n = useComponentsI18n();
+    const { hint, hintDelay = 300, icon, activeIcon, position = "right-bottom", offset, enableDragDrop = false, dragId, severity = "primary", variant, color, size = "md", shape = "circle", elevation = "md", disabled = false, loading = false, autoHideOnScroll = false, hideDirection = "down", animation = "scale", animationOn = "mount", animationDuration = 200, type = "linear", radius, transitionDelay = 30, actions, onClick, className, style, zIndex = 50, absolute = false, } = props;
+    const hintPos = props.hintPosition ?? DEFAULT_HINT[position];
+    const dir = props.direction ?? DEFAULT_DIR[position];
+    const [mounted, setMounted] = React.useState(false);
+    const [hovered, setHovered] = React.useState(false);
+    const [clicked, setClicked] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const [hidden, setHidden] = React.useState(false);
+    const [hintShow, setHintShow] = React.useState(false);
+    const [dragPos, setDragPos] = React.useState(null);
+    const dragPosRef = React.useRef(null);
+    const hasStoredPosRef = React.useRef(false);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const dragStart = React.useRef(null);
+    const dragMoved = React.useRef(false);
+    const containerRef = React.useRef(null);
+    const fabBtnRef = React.useRef(null);
+    const hintTimer = React.useRef(null);
+    const isAbsolute = absolute === true;
+    React.useEffect(() => { const t = setTimeout(() => setMounted(true), 20); return () => clearTimeout(t); }, []);
+    React.useEffect(() => {
+        if (!clicked)
+            return;
+        const t = setTimeout(() => setClicked(false), animationDuration);
+        return () => clearTimeout(t);
+    }, [clicked, animationDuration]);
+    React.useEffect(() => {
+        if (!autoHideOnScroll)
+            return;
+        let lastY = window.scrollY;
+        const onScroll = () => {
+            const cur = window.scrollY;
+            const d = cur - lastY;
+            if (hideDirection === "down" && d > 5)
+                setHidden(true);
+            else if (hideDirection === "up" && d < -5)
+                setHidden(true);
+            else if (Math.abs(d) > 5)
+                setHidden(false);
+            lastY = cur;
+        };
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [autoHideOnScroll, hideDirection]);
+    React.useEffect(() => {
+        if (!enableDragDrop || !dragId)
+            return;
+        try {
+            const stored = localStorage.getItem(`sg-fab-pos:${dragId}`);
+            if (!stored)
+                return;
+            const parsed = JSON.parse(stored);
+            if (!parsed ||
+                typeof parsed.x !== "number" ||
+                typeof parsed.y !== "number" ||
+                !Number.isFinite(parsed.x) ||
+                !Number.isFinite(parsed.y)) {
+                localStorage.removeItem(`sg-fab-pos:${dragId}`);
+                return;
+            }
+            const px = parsed.x;
+            const py = parsed.y;
+            const wh = BTN_WH[size];
+            let maxX = Math.max(0, window.innerWidth - wh);
+            let maxY = Math.max(0, window.innerHeight - wh);
+            if (isAbsolute && containerRef.current) {
+                const parent = containerRef.current.offsetParent;
+                if (parent) {
+                    const rect = parent.getBoundingClientRect();
+                    maxX = Math.max(0, rect.width - wh);
+                    maxY = Math.max(0, rect.height - wh);
+                }
+            }
+            const clamped = {
+                x: Math.min(Math.max(px, 0), maxX),
+                y: Math.min(Math.max(py, 0), maxY)
+            };
+            dragPosRef.current = clamped;
+            setDragPos(clamped);
+            hasStoredPosRef.current = true;
+        }
+        catch {
+            // ignore
+        }
+    }, [enableDragDrop, dragId, size, isAbsolute]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onMd = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => { if (e.key === "Escape")
+            setOpen(false); };
+        document.addEventListener("mousedown", onMd);
+        document.addEventListener("keydown", onKey);
+        return () => { document.removeEventListener("mousedown", onMd); document.removeEventListener("keydown", onKey); };
+    }, [open]);
+    const onEnter = React.useCallback(() => {
+        setHovered(true);
+        if (hint)
+            hintTimer.current = setTimeout(() => setHintShow(true), hintDelay);
+    }, [hint, hintDelay]);
+    const onLeave = React.useCallback(() => {
+        setHovered(false);
+        if (hintTimer.current)
+            clearTimeout(hintTimer.current);
+        setHintShow(false);
+    }, []);
+    const handleClick = React.useCallback(() => {
+        if (disabled || loading)
+            return;
+        if (enableDragDrop && dragMoved.current) {
+            dragMoved.current = false;
+            return;
+        }
+        if (menuOpen) {
+            setMenuOpen(false);
+            return;
+        }
+        setClicked(true);
+        if (actions && actions.length > 0)
+            setOpen((p) => !p);
+        else
+            onClick?.();
+    }, [disabled, loading, actions, onClick, enableDragDrop, menuOpen]);
+    const handlePointerDown = React.useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        if (!enableDragDrop || disabled || loading)
+            return;
+        if (!containerRef.current)
+            return;
+        event.preventDefault();
+        const rect = containerRef.current.getBoundingClientRect();
+        const parent = isAbsolute
+            ? (containerRef.current.offsetParent?.getBoundingClientRect() ?? {
+                left: 0,
+                top: 0
+            })
+            : { left: 0, top: 0 };
+        dragStart.current = {
+            x: event.clientX,
+            y: event.clientY,
+            left: rect.left - parent.left,
+            top: rect.top - parent.top
+        };
+        dragMoved.current = false;
+        setIsDragging(true);
+        const handleMove = (moveEvent) => {
+            if (!dragStart.current)
+                return;
+            const dx = moveEvent.clientX - dragStart.current.x;
+            const dy = moveEvent.clientY - dragStart.current.y;
+            if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+                dragMoved.current = true;
+                if (actions && actions.length > 0)
+                    setOpen(true);
+            }
+            const nextPos = {
+                x: dragStart.current.left + dx,
+                y: dragStart.current.top + dy
+            };
+            dragPosRef.current = nextPos;
+            setDragPos(nextPos);
+            hasStoredPosRef.current = true;
+        };
+        const handleUp = () => {
+            setIsDragging(false);
+            dragStart.current = null;
+            if (enableDragDrop && dragId && dragPosRef.current) {
+                try {
+                    localStorage.setItem(`sg-fab-pos:${dragId}`, JSON.stringify(dragPosRef.current));
+                }
+                catch {
+                    // ignore
+                }
+            }
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+            window.removeEventListener("pointercancel", handleUp);
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+    }, [enableDragDrop, disabled, loading, actions, dragId, isAbsolute]);
+    const handleContextMenu = React.useCallback((event) => {
+        if (!enableDragDrop || !dragId)
+            return;
+        if (!hasStoredPosRef.current)
+            return;
+        event.preventDefault();
+        setMenuOpen(true);
+    }, [enableDragDrop, dragId]);
+    const handleResetConfirm = React.useCallback((confirmed) => {
+        if (!confirmed || !dragId) {
+            setMenuOpen(false);
+            return;
+        }
+        try {
+            localStorage.removeItem(`sg-fab-pos:${dragId}`);
+        }
+        catch (error) {
+            // ignore
+        }
+        dragPosRef.current = null;
+        setDragPos(null);
+        setOpen(false);
+        setMenuOpen(false);
+        hasStoredPosRef.current = false;
+        dragMoved.current = false;
+    }, [dragId]);
+    /* colors */
+    const resolvedSeverity = severity ?? variant ?? "primary";
+    const c = COLORS[resolvedSeverity];
+    const bg = color ?? c.bg;
+    const fg = color ? "white" : c.fg;
+    const ring = color ? `color-mix(in srgb, ${color} 35%, transparent)` : c.ring;
+    /* sizing */
+    const wh = BTN_WH[size];
+    const iconSz = ICON_SZ[size];
+    const actWh = ACT_WH[size];
+    const actIcon = ACT_ICON[size];
+    /* container position */
+    const posStyle = { position: absolute ? "absolute" : "fixed", ...POS_CSS[position], zIndex };
+    if (enableDragDrop && dragPos) {
+        posStyle.left = dragPos.x;
+        posStyle.top = dragPos.y;
+        delete posStyle.right;
+        delete posStyle.bottom;
+    }
+    if (offset?.x) {
+        if (posStyle.right !== undefined)
+            posStyle.right = (typeof posStyle.right === "number" ? posStyle.right : 0) - offset.x;
+        else if (posStyle.left !== undefined)
+            posStyle.left = (typeof posStyle.left === "number" ? posStyle.left : 0) + offset.x;
+    }
+    if (offset?.y) {
+        if (posStyle.bottom !== undefined)
+            posStyle.bottom = (typeof posStyle.bottom === "number" ? posStyle.bottom : 0) - offset.y;
+        else if (posStyle.top !== undefined)
+            posStyle.top = (typeof posStyle.top === "number" ? posStyle.top : 0) + offset.y;
+    }
+    const inlinePosition = !absolute && (style?.position === "relative" || style?.position === "static");
+    const useFloating = !inlinePosition;
+    const txParts = [];
+    const ctx = useFloating && !(enableDragDrop && dragPos) ? CENTER_TX[position] : undefined;
+    if (ctx)
+        txParts.push(ctx);
+    if (useFloating && hidden) {
+        txParts.push(hideDirection === "down" ? "translateY(100px)" : "translateY(-100px)");
+    }
+    /* button animation */
+    const anim = { transition: `transform ${animationDuration}ms ease, opacity ${animationDuration}ms ease` };
+    if (animationOn === "mount") {
+        switch (animation) {
+            case "scale":
+                anim.transform = mounted ? "scale(1)" : "scale(0)";
+                anim.opacity = mounted ? 1 : 0;
+                break;
+            case "fade":
+                anim.opacity = mounted ? 1 : 0;
+                break;
+            case "rotate":
+                anim.transform = mounted ? "rotate(0deg)" : "rotate(-180deg)";
+                anim.opacity = mounted ? 1 : 0;
+                break;
+            case "slide":
+                anim.transform = mounted ? "translate(0,0)" : slideInit(position);
+                anim.opacity = mounted ? 1 : 0;
+                break;
+            case "pulse":
+                if (mounted)
+                    anim.animation = "sg-fab-pulse 1.5s ease-in-out infinite";
+                else
+                    anim.opacity = 0;
+                break;
+        }
+    }
+    else if (animationOn === "hover") {
+        switch (animation) {
+            case "scale":
+                anim.transform = hovered ? "scale(1.1)" : "scale(1)";
+                break;
+            case "rotate":
+                anim.transform = hovered ? "rotate(15deg)" : "rotate(0deg)";
+                break;
+            case "pulse":
+                if (hovered)
+                    anim.animation = "sg-fab-pulse 0.8s ease-in-out infinite";
+                break;
+        }
+    }
+    else if (animationOn === "click") {
+        switch (animation) {
+            case "scale":
+                anim.transform = clicked ? "scale(0.9)" : "scale(1)";
+                break;
+            case "rotate":
+                anim.transform = clicked ? "rotate(90deg)" : "rotate(0deg)";
+                break;
+        }
+    }
+    /* action positions */
+    const actPos = computeItemPositions((actions ?? []).length, type, dir, size, radius);
+    const isOff = disabled || loading;
+    return (_jsxs("div", { ref: containerRef, style: {
+            ...(inlinePosition ? { position: style?.position } : posStyle),
+            transform: txParts.length > 0 ? txParts.join(" ") : undefined,
+            transition: "transform 300ms ease, opacity 300ms ease",
+            opacity: useFloating && hidden ? 0 : 1,
+            ...style,
+        }, className: cn("inline-flex items-center justify-center", className), onContextMenu: (event) => {
+            if (!enableDragDrop || !dragId)
+                return;
+            handleContextMenu(event);
+        }, children: [animation === "pulse" && (_jsx("style", { children: `@keyframes sg-fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}` })), actions?.map((a, i) => {
+                const p = actPos[i] ?? { x: 0, y: 0 };
+                const actionSeverity = a.severity ?? a.variant ?? "plain";
+                const ac = COLORS[actionSeverity];
+                return (_jsx("div", { className: "absolute", style: {
+                        transform: open ? `translate(${p.x}px, ${p.y}px) scale(1)` : "translate(0,0) scale(0)",
+                        opacity: open ? 1 : 0,
+                        transition: "transform 200ms ease, opacity 200ms ease",
+                        transitionDelay: open ? `${i * transitionDelay}ms` : `${((actions.length - 1 - i) * transitionDelay)}ms`,
+                    }, children: _jsxs("div", { className: "relative group", children: [_jsx("button", { disabled: a.disabled, className: cn("inline-flex items-center justify-center rounded-full", "hover:brightness-90 active:brightness-[0.85]", "focus-visible:outline-none focus-visible:ring-2", "disabled:opacity-50 disabled:cursor-not-allowed", "shadow-md transition-[filter] duration-150"), style: {
+                                    width: actWh, height: actWh,
+                                    backgroundColor: ac.bg, color: ac.fg,
+                                    ["--tw-ring-color"]: ac.ring,
+                                }, onClick: () => { a.onClick?.(); setOpen(false); }, "aria-label": a.label, children: a.icon }), a.label ? (_jsx("span", { className: cn("absolute whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-xs text-background", "opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none", TIP_CLS[ACT_TIP_DIR[dir] ?? "top"]), children: a.label })) : null] }) }, i));
+            }), _jsxs("button", { ref: fabBtnRef, disabled: isOff, className: cn("relative inline-flex items-center justify-center", "hover:brightness-90 active:brightness-[0.85]", "focus-visible:outline-none focus-visible:ring-4", "disabled:opacity-60 disabled:cursor-not-allowed", "transition-[filter] duration-150", enableDragDrop ? (isDragging ? "cursor-grabbing" : "cursor-pointer") : "", SHAPE_CLS[shape], ELEV_CLS[elevation]), style: {
+                    width: wh, height: wh,
+                    backgroundColor: bg, color: fg,
+                    ["--tw-ring-color"]: ring,
+                    ...anim,
+                }, onClick: handleClick, onPointerDown: handlePointerDown, onContextMenu: handleContextMenu, onMouseEnter: onEnter, onMouseLeave: onLeave, "aria-label": hint ?? (open ? "Close" : "Open"), "aria-expanded": actions ? open : undefined, children: [loading ? (_jsx(Spinner, { size: iconSz })) : (_jsx("span", { className: "inline-flex items-center justify-center transition-transform duration-300", style: { transform: open && actions ? "rotate(45deg)" : "rotate(0deg)" }, children: open && activeIcon ? activeIcon : (icon ?? _jsx(PlusIcon, { size: iconSz })) })), hint && !open ? (_jsx("span", { className: cn("absolute whitespace-nowrap rounded bg-foreground/90 px-2.5 py-1.5 text-xs font-medium text-background", "transition-opacity duration-200 pointer-events-none", hintShow ? "opacity-100" : "opacity-0", TIP_CLS[hintPos]), children: hint })) : null] }), _jsx(SgPopup, { title: t(i18n, "components.fab.resetPosition"), open: menuOpen, onOpenChange: setMenuOpen, anchorRef: fabBtnRef, placement: "auto", preferPlacement: "left", align: "start", offset: 8, actions: [
+                    {
+                        label: t(i18n, "components.fab.yes"),
+                        closeOnClick: false,
+                        onClick: () => handleResetConfirm(true)
+                    },
+                    {
+                        label: t(i18n, "components.fab.no"),
+                        closeOnClick: false,
+                        onClick: () => handleResetConfirm(false)
+                    }
+                ] })] }));
+}
+SgFloatActionButton.displayName = "SgFloatActionButton";

package/dist/buttons/SgSpeedDial.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { type SgButtonProps } from "./SgButton";
+type Severity = NonNullable<SgButtonProps["severity"]>;
+type Appearance = NonNullable<SgButtonProps["appearance"]>;
+type Size = NonNullable<SgButtonProps["size"]>;
+export type SpeedDialDirection = "up" | "down" | "left" | "right";
+export type SpeedDialType = "linear" | "circle" | "semi-circle" | "quarter-circle";
+export type SgSpeedDialItem = {
+    icon: React.ReactNode;
+    label?: string;
+    onClick?: () => void;
+    severity?: Severity;
+    disabled?: boolean;
+    className?: string;
+};
+export type SgSpeedDialProps = {
+    items: SgSpeedDialItem[];
+    direction?: SpeedDialDirection;
+    type?: SpeedDialType;
+    severity?: Severity;
+    appearance?: Appearance;
+    size?: Size;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    radius?: number;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    transitionDelay?: number;
+    mask?: boolean;
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+export declare function SgSpeedDial(props: Readonly<SgSpeedDialProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgSpeedDial {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=SgSpeedDial.d.ts.map

package/dist/buttons/SgSpeedDial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgSpeedDial.d.ts","sourceRoot":"","sources":["../../src/buttons/SgSpeedDial.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAU1D,KAAK,QAAQ,GAAG,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;AACvD,KAAK,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;AAC3D,KAAK,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA4GF,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA2J5D;yBA3Je,WAAW"}