@seedgrid/fe-components 0.2.10 → 2026.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"SgFloatActionButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgFloatActionButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgFloatActionButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgFloatActionButton.tsx"],"names":[],"mappings":"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"}

package/dist/buttons/SgFloatActionButton.js

@@ -3,10 +3,33 @@ 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";
+import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
 /* ── helpers ── */
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
+function parseStoredDragPosition(raw) {
+    const value = typeof raw === "string" ? (() => {
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    })() : raw;
+    if (!value ||
+        typeof value !== "object" ||
+        typeof value.x !== "number" ||
+        typeof value.y !== "number" ||
+        !Number.isFinite(value.x) ||
+        !Number.isFinite(value.y)) {
+        return null;
+    }
+    return {
+        x: value.x,
+        y: value.y
+    };
+}
 /* ── constants ── */
 const EDGE = 24;
 const POS_CSS = {
@@ -177,9 +200,20 @@ function slideInit(pos) {
         return "translateX(-24px)";
     return "translateX(24px)";
 }
+function slideNudge(pos, dist = 10) {
+    if (pos.endsWith("bottom"))
+        return `translateY(${dist}px)`;
+    if (pos.endsWith("top"))
+        return `translateY(-${dist}px)`;
+    if (pos.startsWith("left"))
+        return `translateX(-${dist}px)`;
+    return `translateX(${dist}px)`;
+}
 /* ── component ── */
 export function SgFloatActionButton(props) {
     const i18n = useComponentsI18n();
+    const hasEnvironmentProvider = useHasSgEnvironmentProvider();
+    const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
     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];
@@ -199,7 +233,81 @@ export function SgFloatActionButton(props) {
     const containerRef = React.useRef(null);
     const fabBtnRef = React.useRef(null);
     const hintTimer = React.useRef(null);
+    const dragCleanupRef = React.useRef(null);
     const isAbsolute = absolute === true;
+    const storageKey = dragId ? `sg-fab-pos:${dragId}` : null;
+    const loadStoredPosition = React.useCallback(async () => {
+        if (!storageKey)
+            return null;
+        if (hasEnvironmentProvider) {
+            try {
+                const loaded = await loadPersistedState(storageKey);
+                if (loaded === null || loaded === undefined)
+                    return null;
+                const parsed = parseStoredDragPosition(loaded);
+                if (!parsed) {
+                    await clearPersistedState(storageKey);
+                    return null;
+                }
+                return parsed;
+            }
+            catch {
+                return null;
+            }
+        }
+        try {
+            const raw = localStorage.getItem(storageKey);
+            if (!raw)
+                return null;
+            const parsed = parseStoredDragPosition(raw);
+            if (!parsed) {
+                localStorage.removeItem(storageKey);
+                return null;
+            }
+            return parsed;
+        }
+        catch {
+            return null;
+        }
+    }, [clearPersistedState, hasEnvironmentProvider, loadPersistedState, storageKey]);
+    const saveStoredPosition = React.useCallback(async (nextPos) => {
+        if (!storageKey)
+            return;
+        if (hasEnvironmentProvider) {
+            try {
+                await savePersistedState(storageKey, nextPos);
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(nextPos));
+        }
+        catch {
+            // ignore
+        }
+    }, [hasEnvironmentProvider, savePersistedState, storageKey]);
+    const clearStoredPosition = React.useCallback(async () => {
+        if (!storageKey)
+            return;
+        if (hasEnvironmentProvider) {
+            try {
+                await clearPersistedState(storageKey);
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            localStorage.removeItem(storageKey);
+        }
+        catch {
+            // ignore
+        }
+    }, [clearPersistedState, hasEnvironmentProvider, storageKey]);
     React.useEffect(() => { const t = setTimeout(() => setMounted(true), 20); return () => clearTimeout(t); }, []);
     React.useEffect(() => {
         if (!clicked)
@@ -228,19 +336,11 @@ export function SgFloatActionButton(props) {
     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}`);
+        let alive = true;
+        (async () => {
+            const parsed = await loadStoredPosition();
+            if (!alive || !parsed)
                 return;
-            }
             const px = parsed.x;
             const py = parsed.y;
             const wh = BTN_WH[size];
@@ -261,11 +361,11 @@ export function SgFloatActionButton(props) {
             dragPosRef.current = clamped;
             setDragPos(clamped);
             hasStoredPosRef.current = true;
-        }
-        catch {
-            // ignore
-        }
-    }, [enableDragDrop, dragId, size, isAbsolute]);
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [enableDragDrop, dragId, loadStoredPosition, size, isAbsolute]);
     React.useEffect(() => {
         if (!open)
             return;
@@ -279,6 +379,12 @@ export function SgFloatActionButton(props) {
         document.addEventListener("keydown", onKey);
         return () => { document.removeEventListener("mousedown", onMd); document.removeEventListener("keydown", onKey); };
     }, [open]);
+    React.useEffect(() => {
+        return () => {
+            dragCleanupRef.current?.();
+            dragCleanupRef.current = null;
+        };
+    }, []);
     const onEnter = React.useCallback(() => {
         setHovered(true);
         if (hint)
@@ -314,7 +420,11 @@ export function SgFloatActionButton(props) {
             return;
         if (!containerRef.current)
             return;
+        dragCleanupRef.current?.();
+        dragCleanupRef.current = null;
         event.preventDefault();
+        const doc = event.currentTarget.ownerDocument ?? document;
+        const view = doc.defaultView ?? window;
         const rect = containerRef.current.getBoundingClientRect();
         const parent = isAbsolute
             ? (containerRef.current.offsetParent?.getBoundingClientRect() ?? {
@@ -348,25 +458,38 @@ export function SgFloatActionButton(props) {
             setDragPos(nextPos);
             hasStoredPosRef.current = true;
         };
-        const handleUp = () => {
+        let finalized = false;
+        const finalizeDrag = () => {
+            if (finalized)
+                return;
+            finalized = true;
             setIsDragging(false);
             dragStart.current = null;
             if (enableDragDrop && dragId && dragPosRef.current) {
-                try {
-                    localStorage.setItem(`sg-fab-pos:${dragId}`, JSON.stringify(dragPosRef.current));
-                }
-                catch {
-                    // ignore
-                }
+                void saveStoredPosition(dragPosRef.current);
+            }
+            view.removeEventListener("pointermove", handleMove);
+            view.removeEventListener("pointerup", handleUp);
+            view.removeEventListener("pointercancel", handleUp);
+            view.removeEventListener("blur", handleUp);
+            doc.removeEventListener("visibilitychange", handleVisibilityChange);
+            if (dragCleanupRef.current === finalizeDrag) {
+                dragCleanupRef.current = null;
+            }
+        };
+        const handleUp = () => finalizeDrag();
+        const handleVisibilityChange = () => {
+            if (doc.visibilityState === "hidden") {
+                finalizeDrag();
             }
-            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]);
+        dragCleanupRef.current = finalizeDrag;
+        view.addEventListener("pointermove", handleMove);
+        view.addEventListener("pointerup", handleUp);
+        view.addEventListener("pointercancel", handleUp);
+        view.addEventListener("blur", handleUp);
+        doc.addEventListener("visibilitychange", handleVisibilityChange);
+    }, [enableDragDrop, disabled, loading, actions, dragId, isAbsolute, saveStoredPosition]);
     const handleContextMenu = React.useCallback((event) => {
         if (!enableDragDrop || !dragId)
             return;
@@ -380,19 +503,14 @@ export function SgFloatActionButton(props) {
             setMenuOpen(false);
             return;
         }
-        try {
-            localStorage.removeItem(`sg-fab-pos:${dragId}`);
-        }
-        catch (error) {
-            // ignore
-        }
+        void clearStoredPosition();
         dragPosRef.current = null;
         setDragPos(null);
         setOpen(false);
         setMenuOpen(false);
         hasStoredPosRef.current = false;
         dragMoved.current = false;
-    }, [dragId]);
+    }, [clearStoredPosition, dragId]);
     /* colors */
     const resolvedSeverity = severity ?? variant ?? "primary";
     const c = COLORS[resolvedSeverity];
@@ -465,6 +583,12 @@ export function SgFloatActionButton(props) {
             case "scale":
                 anim.transform = hovered ? "scale(1.1)" : "scale(1)";
                 break;
+            case "fade":
+                anim.opacity = hovered ? 0.62 : 1;
+                break;
+            case "slide":
+                anim.transform = hovered ? slideNudge(position, 10) : "translate(0,0)";
+                break;
             case "rotate":
                 anim.transform = hovered ? "rotate(15deg)" : "rotate(0deg)";
                 break;
@@ -479,6 +603,12 @@ export function SgFloatActionButton(props) {
             case "scale":
                 anim.transform = clicked ? "scale(0.9)" : "scale(1)";
                 break;
+            case "fade":
+                anim.opacity = clicked ? 0.52 : 1;
+                break;
+            case "slide":
+                anim.transform = clicked ? slideNudge(position, 14) : "translate(0,0)";
+                break;
             case "rotate":
                 anim.transform = clicked ? "rotate(90deg)" : "rotate(0deg)";
                 break;

package/dist/commons/SgAvatar.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export type SgAvatarSeverity = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral" | "custom";
+export type SgAvatarShape = "circle" | "square";
+export type SgAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SgAvatarCustomColors = {
+    bg?: string;
+    fg?: string;
+    border?: string;
+    ring?: string;
+};
+export type SgAvatarProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    src?: string;
+    alt?: string;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    fallback?: React.ReactNode;
+    size?: SgAvatarSize;
+    shape?: SgAvatarShape;
+    severity?: SgAvatarSeverity;
+    bordered?: boolean;
+    disabled?: boolean;
+    customColors?: SgAvatarCustomColors;
+    imageClassName?: string;
+    children?: React.ReactNode;
+    onImageError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+export type SgAvatarGroupOverlap = "none" | "sm" | "md" | "lg";
+export type SgAvatarGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: React.ReactNode;
+    max?: number;
+    total?: number;
+    overlap?: SgAvatarGroupOverlap;
+    moreSeverity?: SgAvatarSeverity;
+    moreLabel?: (remaining: number) => React.ReactNode;
+    size?: SgAvatarSize;
+    shape?: SgAvatarShape;
+    bordered?: boolean;
+};
+export declare const SgAvatar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color" | "children"> & {
+    src?: string;
+    alt?: string;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    fallback?: React.ReactNode;
+    size?: SgAvatarSize;
+    shape?: SgAvatarShape;
+    severity?: SgAvatarSeverity;
+    bordered?: boolean;
+    disabled?: boolean;
+    customColors?: SgAvatarCustomColors;
+    imageClassName?: string;
+    children?: React.ReactNode;
+    onImageError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const SgAvatarGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: React.ReactNode;
+    max?: number;
+    total?: number;
+    overlap?: SgAvatarGroupOverlap;
+    moreSeverity?: SgAvatarSeverity;
+    moreLabel?: (remaining: number) => React.ReactNode;
+    size?: SgAvatarSize;
+    shape?: SgAvatarShape;
+    bordered?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SgAvatar.d.ts.map

package/dist/commons/SgAvatar.d.ts.map

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

package/dist/commons/SgAvatar.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const SIZE = {
+    xs: { box: "size-6", text: "text-[11px]", icon: "size-3.5" },
+    sm: { box: "size-8", text: "text-xs", icon: "size-4" },
+    md: { box: "size-10", text: "text-sm", icon: "size-5" },
+    lg: { box: "size-14", text: "text-lg", icon: "size-7" },
+    xl: { box: "size-20", text: "text-2xl", icon: "size-9" }
+};
+const GROUP_OVERLAP = {
+    none: "",
+    sm: "-ml-1",
+    md: "-ml-2",
+    lg: "-ml-3"
+};
+const PRESET = {
+    primary: {
+        bg: "hsl(var(--primary))",
+        fg: "hsl(var(--primary-foreground))",
+        border: "hsl(var(--primary))",
+        ring: "hsl(var(--ring, var(--primary)))"
+    },
+    secondary: {
+        bg: "hsl(var(--secondary))",
+        fg: "hsl(var(--secondary-foreground))",
+        border: "hsl(var(--secondary))",
+        ring: "hsl(var(--ring, var(--secondary)))"
+    },
+    success: {
+        bg: "hsl(var(--tertiary, var(--accent, var(--primary))))",
+        fg: "hsl(var(--tertiary-foreground, var(--accent-foreground, var(--primary-foreground))))",
+        border: "hsl(var(--tertiary, var(--accent, var(--primary))))",
+        ring: "hsl(var(--ring, var(--tertiary, var(--accent, var(--primary)))))"
+    },
+    warning: {
+        bg: "hsl(var(--accent, var(--secondary, var(--primary))))",
+        fg: "hsl(var(--accent-foreground, var(--secondary-foreground, var(--primary-foreground))))",
+        border: "hsl(var(--accent, var(--secondary, var(--primary))))",
+        ring: "hsl(var(--ring, var(--accent, var(--secondary, var(--primary)))))"
+    },
+    danger: {
+        bg: "hsl(var(--destructive))",
+        fg: "hsl(var(--destructive-foreground))",
+        border: "hsl(var(--destructive))",
+        ring: "hsl(var(--ring, var(--destructive)))"
+    },
+    info: {
+        bg: "hsl(var(--secondary, var(--primary)))",
+        fg: "hsl(var(--secondary-foreground, var(--primary-foreground)))",
+        border: "hsl(var(--secondary, var(--primary)))",
+        ring: "hsl(var(--ring, var(--secondary, var(--primary))))"
+    },
+    neutral: {
+        bg: "hsl(var(--muted))",
+        fg: "hsl(var(--muted-foreground))",
+        border: "hsl(var(--border))",
+        ring: "hsl(var(--ring, var(--muted)))"
+    }
+};
+function resolveAvatarColors(severity, custom) {
+    const base = severity === "custom" ? PRESET.primary : PRESET[severity];
+    return {
+        bg: custom?.bg ?? base.bg,
+        fg: custom?.fg ?? base.fg,
+        border: custom?.border ?? base.border,
+        ring: custom?.ring ?? base.ring
+    };
+}
+function buildVars(severity, custom) {
+    const merged = resolveAvatarColors(severity, custom);
+    return {
+        ["--sg-avatar-bg"]: merged.bg,
+        ["--sg-avatar-fg"]: merged.fg,
+        ["--sg-avatar-border"]: merged.border,
+        ["--sg-avatar-ring"]: merged.ring
+    };
+}
+function hasRenderable(value) {
+    if (value === null || value === undefined || value === false)
+        return false;
+    if (typeof value === "string")
+        return value.trim().length > 0;
+    return true;
+}
+function normalizeLabel(label) {
+    if (typeof label !== "string")
+        return label;
+    const trimmed = label.trim();
+    if (!trimmed)
+        return "";
+    if (trimmed.length <= 2)
+        return trimmed.toUpperCase();
+    const words = trimmed.split(/\s+/).filter(Boolean);
+    if (words.length >= 2) {
+        return `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`.toUpperCase();
+    }
+    return trimmed.slice(0, 2).toUpperCase();
+}
+export const SgAvatar = React.forwardRef(({ src, alt = "Avatar", label, icon, fallback, size = "md", shape = "circle", severity = "primary", bordered = true, disabled = false, customColors, className, imageClassName, children, onImageError, onClick, role, tabIndex, style, title, ["aria-label"]: ariaLabel, ...rest }, ref) => {
+    const [imageFailed, setImageFailed] = React.useState(false);
+    const s = SIZE[size];
+    React.useEffect(() => {
+        setImageFailed(false);
+    }, [src]);
+    const hasChildren = hasRenderable(children);
+    const showImage = !hasChildren && !!src && !imageFailed;
+    const showIcon = !hasChildren && !showImage && hasRenderable(icon);
+    const showLabel = !hasChildren && !showImage && !showIcon && hasRenderable(label);
+    const interactive = typeof onClick === "function" || role === "button" || typeof tabIndex === "number";
+    const resolvedAriaLabel = ariaLabel ?? (typeof label === "string" ? label : alt);
+    const squareRadius = size === "xs" || size === "sm" ? "rounded-md" : "rounded-xl";
+    return (_jsx("span", { ref: ref, title: title, role: role, tabIndex: tabIndex, onClick: disabled ? undefined : onClick, "aria-label": resolvedAriaLabel, style: { ...buildVars(severity, customColors), ...style }, className: cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden", "font-medium leading-none", s.box, s.text, shape === "circle" ? "rounded-full" : squareRadius, bordered ? "border border-[var(--sg-avatar-border)]" : "border border-transparent", showImage ? "bg-muted text-transparent" : "bg-[var(--sg-avatar-bg)] text-[var(--sg-avatar-fg)]", interactive
+            ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sg-avatar-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            : "", disabled ? "pointer-events-none opacity-55" : "", className), ...rest, children: hasChildren ? (children) : showImage ? (_jsx("img", { src: src, alt: alt, loading: "lazy", draggable: false, className: cn("size-full object-cover", imageClassName), onError: (event) => {
+                setImageFailed(true);
+                onImageError?.(event);
+            } })) : showIcon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", s.icon), children: icon })) : showLabel ? (_jsx("span", { className: "uppercase", children: normalizeLabel(label) })) : (_jsx("span", { className: cn("inline-flex items-center justify-center", s.icon), children: hasRenderable(fallback) ? fallback : "?" })) }));
+});
+SgAvatar.displayName = "SgAvatar";
+export const SgAvatarGroup = React.forwardRef(({ children, max, total, overlap = "md", moreSeverity = "neutral", moreLabel, size = "md", shape = "circle", bordered = true, className, ...rest }, ref) => {
+    const avatars = React.Children.toArray(children).filter((item) => item !== null && item !== undefined);
+    const normalizedMax = typeof max === "number" && Number.isFinite(max) && max > 0 ? Math.floor(max) : undefined;
+    const visibleCount = normalizedMax ? Math.min(normalizedMax, avatars.length) : avatars.length;
+    const visible = avatars.slice(0, visibleCount);
+    const calculatedTotal = Math.max(total ?? avatars.length, avatars.length);
+    const hiddenCount = Math.max(calculatedTotal - visibleCount, 0);
+    return (_jsxs("div", { ref: ref, className: cn("inline-flex items-center", className), ...rest, children: [visible.map((child, index) => {
+                const key = React.isValidElement(child) && child.key != null ? String(child.key) : `sg-avatar-${index}`;
+                return (_jsx("span", { className: cn("inline-flex", index === 0 ? "" : GROUP_OVERLAP[overlap]), children: child }, key));
+            }), hiddenCount > 0 ? (_jsx("span", { className: cn("inline-flex", visibleCount === 0 ? "" : GROUP_OVERLAP[overlap]), children: _jsx(SgAvatar, { label: moreLabel ? moreLabel(hiddenCount) : `+${hiddenCount}`, size: size, shape: shape, severity: moreSeverity, bordered: bordered }) })) : null] }));
+});
+SgAvatarGroup.displayName = "SgAvatarGroup";

package/dist/commons/SgSkeleton.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type SgSkeletonShape = "text" | "rectangle" | "rounded" | "square" | "circle";
+export type SgSkeletonAnimation = "wave" | "pulse" | "none";
+export type SgSkeletonProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    width?: number | string;
+    height?: number | string;
+    size?: number | string;
+    borderRadius?: number | string;
+    shape?: SgSkeletonShape;
+    animation?: SgSkeletonAnimation;
+};
+export declare function SgSkeleton(props: Readonly<SgSkeletonProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgSkeleton {
+    var displayName: string;
+}
+//# sourceMappingURL=SgSkeleton.d.ts.map

package/dist/commons/SgSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgSkeleton.d.ts","sourceRoot":"","sources":["../../src/commons/SgSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAsF1D;yBAtFe,UAAU"}

package/dist/commons/SgSkeleton.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function SgSkeleton(props) {
+    const { width, height, size, borderRadius, shape = "text", animation = "wave", className, style, ...rest } = props;
+    const waveOverlayRef = React.useRef(null);
+    React.useEffect(() => {
+        if (animation !== "wave")
+            return;
+        const node = waveOverlayRef.current;
+        if (!node || typeof node.animate !== "function")
+            return;
+        const wave = node.animate([{ transform: "translateX(-100%)" }, { transform: "translateX(100%)" }], {
+            duration: 1300,
+            iterations: Infinity,
+            easing: "ease-in-out"
+        });
+        return () => {
+            wave.cancel();
+        };
+    }, [animation]);
+    const cssSize = toCssSize(size);
+    const cssWidth = cssSize ??
+        toCssSize(width) ??
+        (shape === "square" || shape === "circle" ? "2.5rem" : "100%");
+    const cssHeight = cssSize ??
+        toCssSize(height) ??
+        (shape === "text" ? "1rem" : shape === "square" || shape === "circle" ? "2.5rem" : "2rem");
+    const cssBorderRadius = toCssSize(borderRadius) ??
+        (shape === "circle"
+            ? "9999px"
+            : shape === "square"
+                ? "0"
+                : shape === "rounded"
+                    ? "0.75rem"
+                    : shape === "text"
+                        ? "9999px"
+                        : "0.375rem");
+    return (_jsx("div", { className: cn("relative block overflow-hidden bg-muted/80", animation === "pulse" ? "animate-pulse" : "", className), style: {
+            width: cssWidth,
+            height: cssHeight,
+            borderRadius: cssBorderRadius,
+            ...style
+        }, ...rest, children: animation === "wave" ? (_jsx("span", { ref: waveOverlayRef, "aria-hidden": "true", className: "pointer-events-none absolute inset-0", style: {
+                backgroundImage: "linear-gradient(90deg, transparent 0%, hsl(var(--background) / 0.55) 50%, transparent 100%)",
+                transform: "translateX(-100%)",
+                willChange: "transform"
+            } })) : null }));
+}
+SgSkeleton.displayName = "SgSkeleton";

package/dist/digits/discard-digit/SgDiscardDigit.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type SgDiscardDigitProps = {
+    /** Texto/valor exibido na folha do topo. */
+    value: string;
+    /** Cor do texto principal. */
+    color?: string;
+    /** Fonte (font-family) usada no texto. */
+    font?: string;
+    /** Cor de fundo das folhas. */
+    backgroundColor?: string;
+    /** Tamanho da fonte em px (escala geral do bloco). */
+    fontSize?: number;
+    /** Peso da fonte. */
+    fontWeight?: number | string;
+    /** Ativa animacao de descarte quando o valor muda. */
+    animateOnChange?: boolean;
+    /** Duracao total da animacao em ms. */
+    transitionMs?: number;
+    /** Quantidade de folhas visiveis na pilha (min 2, max 30). Ignorado se totalNumberPages for definido. */
+    stackDepth?: number;
+    /** Total de paginas do monte. Quando definido, a pilha visual encolhe a cada increasePage(). */
+    totalNumberPages?: number;
+    /** Estrategia de animacao para mudancas por prop `value`. */
+    changeAnimationMode?: "discard" | "incoming";
+    /** Classes CSS adicionais. */
+    className?: string;
+    /** Estilo inline adicional. */
+    style?: React.CSSProperties;
+};
+export type SgDiscardDigitHandle = {
+    /** Decrementa a pagina atual (minimo 1). */
+    decreasePage(): void;
+    /** Incrementa a pagina atual (maximo totalNumberPages). */
+    increasePage(): void;
+    /** Retorna a pagina atual (1-indexed). */
+    page(): number;
+};
+export declare const SgDiscardDigit: React.ForwardRefExoticComponent<SgDiscardDigitProps & React.RefAttributes<SgDiscardDigitHandle>>;
+//# sourceMappingURL=SgDiscardDigit.d.ts.map

package/dist/digits/discard-digit/SgDiscardDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgDiscardDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/discard-digit/SgDiscardDigit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,sDAAsD;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC7C,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,4CAA4C;IAC5C,YAAY,IAAI,IAAI,CAAC;IACrB,2DAA2D;IAC3D,YAAY,IAAI,IAAI,CAAC;IACrB,0CAA0C;IAC1C,IAAI,IAAI,MAAM,CAAC;CAChB,CAAC;AAmBF,eAAO,MAAM,cAAc,kGAkYzB,CAAC"}