@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/commons/SgToaster.js

@@ -13,24 +13,86 @@ const POSITION_CLASS = {
     "bottom-left": "bottom-4 left-4 items-start",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
 };
-const RICH_TYPE_CLASS = {
-    default: "border-border bg-background text-foreground",
-    success: "border-green-500 bg-green-600 text-white",
-    info: "border-sky-500 bg-sky-600 text-white",
-    warning: "border-amber-500 bg-amber-500 text-black",
-    error: "border-red-500 bg-red-600 text-white",
-    loading: "border-blue-500 bg-blue-600 text-white"
+const RICH_TYPE_COLORS = {
+    default: {
+        border: "hsl(var(--border))",
+        bg: "hsl(var(--background))",
+        fg: "hsl(var(--foreground))"
+    },
+    success: {
+        border: "#22c55e",
+        bg: "#16a34a",
+        fg: "#ffffff"
+    },
+    info: {
+        border: "#0ea5e9",
+        bg: "#0284c7",
+        fg: "#ffffff"
+    },
+    warning: {
+        border: "#f59e0b",
+        bg: "#f59e0b",
+        fg: "#000000"
+    },
+    error: {
+        border: "#ef4444",
+        bg: "#dc2626",
+        fg: "#ffffff"
+    },
+    loading: {
+        border: "#3b82f6",
+        bg: "#2563eb",
+        fg: "#ffffff"
+    }
 };
-const SOFT_TYPE_CLASS = {
-    default: "border-border bg-background text-foreground",
-    success: "border-green-300 bg-green-50 text-green-900",
-    info: "border-sky-300 bg-sky-50 text-sky-900",
-    warning: "border-amber-300 bg-amber-50 text-amber-900",
-    error: "border-red-300 bg-red-50 text-red-900",
-    loading: "border-blue-300 bg-blue-50 text-blue-900"
+const SOFT_TYPE_COLORS = {
+    default: {
+        border: "hsl(var(--border))",
+        bg: "hsl(var(--background))",
+        fg: "hsl(var(--foreground))"
+    },
+    success: {
+        border: "#86efac",
+        bg: "#f0fdf4",
+        fg: "#14532d"
+    },
+    info: {
+        border: "#7dd3fc",
+        bg: "#f0f9ff",
+        fg: "#0c4a6e"
+    },
+    warning: {
+        border: "#fcd34d",
+        bg: "#fffbeb",
+        fg: "#78350f"
+    },
+    error: {
+        border: "#fca5a5",
+        bg: "#fef2f2",
+        fg: "#7f1d1d"
+    },
+    loading: {
+        border: "#93c5fd",
+        bg: "#eff6ff",
+        fg: "#1e3a8a"
+    }
 };
+function clampTransparency(value) {
+    if (value === undefined || Number.isNaN(value))
+        return 0;
+    return Math.max(0, Math.min(100, value));
+}
+function resolveToastColors(type, richColors, customColors) {
+    const base = richColors ? RICH_TYPE_COLORS[type] : SOFT_TYPE_COLORS[type];
+    const custom = customColors?.[type];
+    return {
+        border: custom?.border ?? base.border,
+        bg: custom?.bg ?? base.bg,
+        fg: custom?.fg ?? base.fg
+    };
+}
 export function SgToaster(props) {
-    const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, className, style, ...rest } = props;
+    const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, transparency = 0, customColors, className, style, ...rest } = props;
     const [toasts, setToasts] = React.useState([]);
     const timersRef = React.useRef({});
     React.useEffect(() => subscribeSgToasts(setToasts), []);
@@ -74,10 +136,17 @@ export function SgToaster(props) {
             timersRef.current = {};
         };
     }, []);
+    const toastOpacity = 1 - clampTransparency(transparency) / 100;
     return (_jsx("div", { className: cn("pointer-events-none fixed z-[1100] flex max-h-screen w-full flex-col gap-2 p-4 sm:w-auto", POSITION_CLASS[position], className), style: style, ...rest, children: visible.map((toast) => {
-            const typeClass = richColors ? RICH_TYPE_CLASS[toast.type] : SOFT_TYPE_CLASS[toast.type];
+            const typeColors = resolveToastColors(toast.type, richColors, customColors);
             const canClose = toast.closeButton ?? closeButton;
-            return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 rounded-md border px-3 py-2 shadow-lg", typeClass, toast.className), style: toast.style, role: "status", "aria-live": "polite", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [toast.title ? _jsx("div", { className: "text-sm font-semibold", children: toast.title }) : null, toast.description ? _jsx("div", { className: "mt-0.5 text-xs opacity-90", children: toast.description }) : null] }), toast.action ? (_jsx("button", { type: "button", className: "rounded border border-current/30 px-2 py-1 text-xs font-medium opacity-95 hover:opacity-100", onClick: () => {
+            return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 rounded-md border px-3 py-2 shadow-lg", toast.className), style: {
+                    borderColor: typeColors.border,
+                    backgroundColor: typeColors.bg,
+                    color: typeColors.fg,
+                    opacity: toastOpacity,
+                    ...toast.style
+                }, role: "status", "aria-live": "polite", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [toast.title ? _jsx("div", { className: "text-sm font-semibold", children: toast.title }) : null, toast.description ? _jsx("div", { className: "mt-0.5 text-xs opacity-90", children: toast.description }) : null] }), toast.action ? (_jsx("button", { type: "button", className: "rounded border border-current/30 px-2 py-1 text-xs font-medium opacity-95 hover:opacity-100", onClick: () => {
                             toast.action?.onClick?.();
                             dismissSgToast(toast.id);
                         }, children: toast.action.label })) : null, canClose ? (_jsx("button", { type: "button", className: "rounded px-1.5 py-0.5 text-xs opacity-80 hover:opacity-100", onClick: () => dismissSgToast(toast.id), "aria-label": "Close toast", children: "x" })) : null] }, toast.id));

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"}

package/dist/digits/discard-digit/SgDiscardDigit.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function createRandomMotion(fontSize) {
+    const side = Math.random() < 0.5 ? -1 : 1;
+    const base = Math.max(26, Math.round(fontSize * 0.55));
+    return {
+        tx: side * (base + Math.round(Math.random() * base * 0.55)),
+        ty: Math.max(56, Math.round(fontSize * 1.45 + Math.random() * fontSize * 0.55)),
+        rotateZ: side * (8 + Math.round(Math.random() * 12)),
+        rotateX: -(10 + Math.round(Math.random() * 16)),
+        scale: 0.68 + Math.random() * 0.14,
+    };
+}
+/** px that each sheet peeks below the one above — visible "spine" line */
+const PER_LAYER_Y = 3;
+/** horizontal drift per layer — subtle perspective illusion */
+const PER_LAYER_X = 0;
+export const SgDiscardDigit = React.forwardRef(function SgDiscardDigit({ value, color = "#0f172a", font, backgroundColor = "#f8fafc", fontSize = 64, fontWeight = 700, animateOnChange = true, transitionMs = 640, stackDepth = 20, totalNumberPages, changeAnimationMode = "discard", className, style, }, ref) {
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const directionRef = React.useRef("next");
+    React.useImperativeHandle(ref, () => ({
+        decreasePage() {
+            directionRef.current = "prev";
+            setCurrentPage((p) => Math.max(1, p - 1));
+        },
+        increasePage() {
+            directionRef.current = "next";
+            setCurrentPage((p) => (totalNumberPages != null ? Math.min(totalNumberPages, p + 1) : p + 1));
+        },
+        page() {
+            return currentPage;
+        },
+    }), [currentPage, totalNumberPages]);
+    const depth = totalNumberPages != null
+        ? Math.max(1, Math.min(30, totalNumberPages - currentPage + 1))
+        : Math.max(2, Math.min(30, stackDepth));
+    // ── Dimensions ─────────────────────────────────────────────────────────────
+    const cardW = Math.max(74, Math.round(fontSize * 1.14));
+    const cardH = Math.max(96, Math.round(fontSize * 1.52));
+    const radius = Math.max(8, Math.round(fontSize * 0.15));
+    const textSize = Math.max(18, Math.round(fontSize * 0.86));
+    // depth-1 backing layers so total visible sheets = depth
+    const numStack = depth - 1;
+    const PAD = 10;
+    const containerW = cardW + PAD * 2 + Math.ceil(numStack * PER_LAYER_X);
+    const containerH = cardH + numStack * PER_LAYER_Y + PAD * 2;
+    // Left edge where cards start (horizontally centered)
+    const cardLeft = Math.floor((containerW - cardW) / 2);
+    // ── Paper aesthetics ────────────────────────────────────────────────────────
+    const paperEdgeSoft = "rgba(15, 23, 42, 0.16)";
+    const paperEdgeMid = "rgba(15, 23, 42, 0.26)";
+    const paperTexture = "repeating-linear-gradient(0deg, rgba(15,23,42,0.025) 0px, rgba(15,23,42,0.025) 1px, transparent 1px, transparent 4px)";
+    // ── State ───────────────────────────────────────────────────────────────────
+    const [displayValue, setDisplayValue] = React.useState(value);
+    const [activeDiscard, setActiveDiscard] = React.useState(null);
+    const [activeIncoming, setActiveIncoming] = React.useState(null);
+    const discardIdRef = React.useRef(0);
+    const latestValueRef = React.useRef(value);
+    React.useEffect(() => {
+        latestValueRef.current = value;
+    }, [value]);
+    React.useEffect(() => {
+        if (!animateOnChange) {
+            setActiveDiscard(null);
+            setActiveIncoming(null);
+            setDisplayValue(value);
+            return;
+        }
+        if (value === displayValue && activeDiscard === null && activeIncoming === null)
+            return;
+        const shouldUseIncoming = directionRef.current === "prev" || changeAnimationMode === "incoming";
+        if (shouldUseIncoming) {
+            // Incoming: nova folha sobe por baixo revelando o valor anterior
+            if (activeIncoming === null && value !== displayValue) {
+                const nextId = ++discardIdRef.current;
+                setActiveIncoming({
+                    id: nextId,
+                    value,
+                    motion: createRandomMotion(fontSize),
+                    started: false,
+                });
+                // displayValue permanece no valor antigo; atualiza só ao fim da animacao
+            }
+        }
+        else {
+            // Discard: folha atual voa para fora, revelando o novo valor
+            if (activeIncoming === null) {
+                if (activeDiscard === null) {
+                    const nextId = ++discardIdRef.current;
+                    setActiveDiscard({
+                        id: nextId,
+                        value: displayValue,
+                        motion: createRandomMotion(fontSize),
+                        started: false,
+                    });
+                }
+                setDisplayValue(value);
+            }
+        }
+        directionRef.current = "next";
+    }, [activeDiscard, activeIncoming, animateOnChange, changeAnimationMode, displayValue, fontSize, value]);
+    // ── RAF: discard ─────────────────────────────────────────────────────────
+    React.useEffect(() => {
+        if (!activeDiscard || activeDiscard.started)
+            return;
+        let raf = 0;
+        raf = window.requestAnimationFrame(() => {
+            setActiveDiscard((prev) => prev && prev.id === activeDiscard.id ? { ...prev, started: true } : prev);
+        });
+        return () => window.cancelAnimationFrame(raf);
+    }, [activeDiscard]);
+    // ── RAF: incoming ────────────────────────────────────────────────────────
+    React.useEffect(() => {
+        if (!activeIncoming || activeIncoming.started)
+            return;
+        let raf = 0;
+        raf = window.requestAnimationFrame(() => {
+            setActiveIncoming((prev) => prev && prev.id === activeIncoming.id ? { ...prev, started: true } : prev);
+        });
+        return () => window.cancelAnimationFrame(raf);
+    }, [activeIncoming]);
+    // ── Cleanup: discard ─────────────────────────────────────────────────────
+    React.useEffect(() => {
+        if (!activeDiscard || !activeDiscard.started)
+            return;
+        const currentId = activeDiscard.id;
+        const timer = window.setTimeout(() => {
+            setActiveDiscard((prev) => (prev && prev.id === currentId ? null : prev));
+            const latest = latestValueRef.current;
+            setDisplayValue((prev) => (prev === latest ? prev : latest));
+        }, Math.max(120, transitionMs));
+        return () => window.clearTimeout(timer);
+    }, [activeDiscard, transitionMs]);
+    // ── Cleanup: incoming ────────────────────────────────────────────────────
+    React.useEffect(() => {
+        if (!activeIncoming || !activeIncoming.started)
+            return;
+        const currentId = activeIncoming.id;
+        const timer = window.setTimeout(() => {
+            setActiveIncoming((prev) => (prev && prev.id === currentId ? null : prev));
+            setDisplayValue(latestValueRef.current);
+        }, Math.max(120, transitionMs));
+        return () => window.clearTimeout(timer);
+    }, [activeIncoming, transitionMs]);
+    // ── Stack layers ────────────────────────────────────────────────────────────
+    // i=0 → BOTTOM of stack (most displaced, lowest z-index = 1)
+    // i=numStack-1 → just below main card (least displaced, highest z-index = numStack)
+    // Each layer shows exactly PER_LAYER_Y px of its bottom edge.
+    const stackLayers = React.useMemo(() => {
+        return Array.from({ length: numStack }, (_, i) => {
+            const distFromTop = numStack - i; // 1 = closest to main, numStack = bottom
+            return {
+                top: PAD + distFromTop * PER_LAYER_Y,
+                left: cardLeft + distFromTop * PER_LAYER_X,
+                // Subtle darkening toward the bottom of the stack
+                opacity: Math.max(0.80, 1 - (distFromTop - 1) * 0.007),
+                zIndex: i + 1, // bottom=1 (behind), top-of-stack=numStack (in front)
+            };
+        });
+    }, [numStack, cardLeft]);
+    const shadowTone = "rgba(2, 8, 23, 0.28)";
+    const subtleTone = "rgba(2, 8, 23, 0.12)";
+    return (_jsxs("div", { role: "img", "aria-label": value, className: cn("inline-block", className), style: {
+            position: "relative",
+            width: containerW,
+            height: containerH,
+            perspective: "1000px",
+            ...style,
+        }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                    position: "absolute",
+                    width: Math.round(cardW * 0.88),
+                    height: Math.max(14, Math.round(cardH * 0.12)),
+                    left: "50%",
+                    top: PAD + cardH + numStack * PER_LAYER_Y + 2,
+                    transform: "translateX(-50%)",
+                    filter: "blur(8px)",
+                    background: "radial-gradient(ellipse at center, rgba(2,8,23,0.30) 0%, rgba(2,8,23,0.05) 70%, transparent 100%)",
+                } }), stackLayers.map((layer, i) => (_jsx("div", { "aria-hidden": "true", style: {
+                    position: "absolute",
+                    top: layer.top,
+                    left: layer.left,
+                    width: cardW,
+                    height: cardH,
+                    borderRadius: radius,
+                    backgroundColor,
+                    // Visible top + side borders; bottom border slightly stronger so each
+                    // 3-px strip is legible as a distinct sheet edge.
+                    border: `1px solid ${paperEdgeSoft}`,
+                    borderBottom: `1px solid ${paperEdgeMid}`,
+                    boxShadow: `inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(15,23,42,0.06)`,
+                    opacity: layer.opacity,
+                    zIndex: layer.zIndex,
+                } }, `sheet-${i}`))), _jsxs("div", { style: {
+                    position: "absolute",
+                    top: PAD,
+                    left: cardLeft,
+                    width: cardW,
+                    height: cardH,
+                    borderRadius: radius,
+                    backgroundColor,
+                    border: `1px solid ${paperEdgeSoft}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxShadow: `0 8px 16px ${subtleTone}, 0 0 0 1px rgba(255,255,255,0.22), inset 0 1px 0 rgba(255,255,255,0.80), inset 0 -1px 0 rgba(15,23,42,0.07)`,
+                    transition: `opacity ${Math.round(transitionMs * 0.52)}ms ease`,
+                    zIndex: numStack + 1,
+                    overflow: "hidden",
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: `linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.09) 100%), ${paperTexture}`,
+                            pointerEvents: "none",
+                        } }), _jsx("span", { style: {
+                            position: "relative",
+                            zIndex: 1,
+                            color,
+                            fontFamily: font,
+                            fontSize: textSize,
+                            fontWeight,
+                            lineHeight: 1,
+                            userSelect: "none",
+                            textShadow: `0 1px 0 rgba(255,255,255,0.45), 0 10px 16px rgba(2,8,23,0.10)`,
+                        }, children: displayValue })] }), activeIncoming ? (_jsxs("div", { style: {
+                    position: "absolute",
+                    top: PAD,
+                    left: cardLeft,
+                    width: cardW,
+                    height: cardH,
+                    borderRadius: radius,
+                    backgroundColor,
+                    border: `1px solid ${paperEdgeMid}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transform: activeIncoming.started
+                        ? "translate3d(0, 0, 80px) rotateX(0deg) rotateZ(0deg) scale(1)"
+                        : `translate3d(${activeIncoming.motion.tx}px, ${activeIncoming.motion.ty}px, 74px) rotateX(${activeIncoming.motion.rotateX}deg) rotateZ(${activeIncoming.motion.rotateZ}deg) scale(${activeIncoming.motion.scale})`,
+                    transformOrigin: "50% 80%",
+                    opacity: activeIncoming.started ? 1 : 0,
+                    boxShadow: `0 16px 22px ${shadowTone}, 0 30px 30px rgba(2,8,23,0.18), 0 0 0 1px rgba(255,255,255,0.26), inset 0 1px 0 rgba(255,255,255,0.82), inset 0 -1px 0 rgba(15,23,42,0.10)`,
+                    transition: `transform ${transitionMs}ms cubic-bezier(0.18, 0.78, 0.18, 1), opacity ${Math.round(transitionMs * 0.6)}ms ease`,
+                    zIndex: numStack + 20,
+                    overflow: "hidden",
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: `linear-gradient(160deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.12) 100%), ${paperTexture}`,
+                            pointerEvents: "none",
+                        } }), _jsx("span", { style: {
+                            position: "relative",
+                            zIndex: 1,
+                            color,
+                            fontFamily: font,
+                            fontSize: textSize,
+                            fontWeight,
+                            lineHeight: 1,
+                            userSelect: "none",
+                            textShadow: `0 1px 0 rgba(255,255,255,0.45), 0 12px 18px rgba(2,8,23,0.13)`,
+                        }, children: activeIncoming.value })] })) : null, activeDiscard ? (_jsxs("div", { style: {
+                    position: "absolute",
+                    top: PAD,
+                    left: cardLeft,
+                    width: cardW,
+                    height: cardH,
+                    borderRadius: radius,
+                    backgroundColor,
+                    border: `1px solid ${paperEdgeMid}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transform: activeDiscard.started
+                        ? `translate3d(${activeDiscard.motion.tx}px, ${activeDiscard.motion.ty}px, 74px) rotateX(${activeDiscard.motion.rotateX}deg) rotateZ(${activeDiscard.motion.rotateZ}deg) scale(${activeDiscard.motion.scale})`
+                        : "translate3d(0, 0, 80px) rotateX(0deg) rotateZ(0deg) scale(1)",
+                    transformOrigin: "50% 20%",
+                    opacity: activeDiscard.started ? 0 : 1,
+                    boxShadow: activeDiscard.started
+                        ? `0 7px 15px ${shadowTone}, 0 22px 26px rgba(2,8,23,0.14), inset 0 1px 0 rgba(255,255,255,0.72)`
+                        : `0 16px 22px ${shadowTone}, 0 30px 30px rgba(2,8,23,0.18), 0 0 0 1px rgba(255,255,255,0.26), inset 0 1px 0 rgba(255,255,255,0.82), inset 0 -1px 0 rgba(15,23,42,0.10)`,
+                    transition: `transform ${transitionMs}ms cubic-bezier(0.2, 0.82, 0.2, 1), opacity ${transitionMs}ms ease, box-shadow ${Math.round(transitionMs * 0.65)}ms ease`,
+                    zIndex: numStack + 20,
+                    overflow: "hidden",
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: `linear-gradient(160deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.12) 100%), ${paperTexture}`,
+                            pointerEvents: "none",
+                        } }), _jsx("span", { style: {
+                            position: "relative",
+                            zIndex: 1,
+                            color,
+                            fontFamily: font,
+                            fontSize: textSize,
+                            fontWeight,
+                            lineHeight: 1,
+                            userSelect: "none",
+                            textShadow: `0 1px 0 rgba(255,255,255,0.45), 0 12px 18px rgba(2,8,23,0.13)`,
+                        }, children: activeDiscard.value })] })) : null] }));
+});
+SgDiscardDigit.displayName = "SgDiscardDigit";

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

@@ -0,0 +1,3 @@
+export { SgDiscardDigit } from "./SgDiscardDigit";
+export type { SgDiscardDigitProps, SgDiscardDigitHandle } from "./SgDiscardDigit";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/digits/discard-digit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/digits/discard-digit/index.js

@@ -0,0 +1 @@
+export { SgDiscardDigit } from "./SgDiscardDigit";

package/dist/digits/fade-digit/SgFadeDigit.d.ts

@@ -0,0 +1,27 @@
+export type SgFadeDigitProps = {
+    /** Character to display. When changed, the current digit fades out and the new one fades in. */
+    value: string;
+    /** Text color of the digit. @default "#edebeb" */
+    color?: string;
+    /** Card background color. @default "#333232" */
+    backgroundColor?: string;
+    /**
+     * CSS font-family for the digit.
+     * @default undefined (browser default)
+     */
+    font?: string;
+    /** Font size in pixels — controls overall card scale. @default 70 */
+    fontSize?: number;
+    /** Additional CSS classes on the outer card wrapper. */
+    className?: string;
+};
+/**
+ * SgFadeDigit — an animated card that "turns off" its current digit (fade to
+ * transparent) and "turns on" the new one (fade in), simulating a bulb or
+ * display switching effect.
+ *
+ * The card style matches SgFlipDigit (same proportions, divider line and
+ * shadow) so both components can be mixed in clock-style layouts.
+ */
+export declare function SgFadeDigit({ value, color, backgroundColor, font, fontSize, className, }: SgFadeDigitProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgFadeDigit.d.ts.map

package/dist/digits/fade-digit/SgFadeDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgFadeDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/fade-digit/SgFadeDigit.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAiB,EACjB,eAA2B,EAC3B,IAAI,EACJ,QAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CAyGlB"}

package/dist/digits/fade-digit/SgFadeDigit.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+/** Duration of each fade phase (out and in) in ms */
+const FADE_MS = 200;
+/**
+ * SgFadeDigit — an animated card that "turns off" its current digit (fade to
+ * transparent) and "turns on" the new one (fade in), simulating a bulb or
+ * display switching effect.
+ *
+ * The card style matches SgFlipDigit (same proportions, divider line and
+ * shadow) so both components can be mixed in clock-style layouts.
+ */
+export function SgFadeDigit({ value, color = "#edebeb", backgroundColor = "#333232", font, fontSize = 70, className, }) {
+    /**
+     * What is rendered in the card. Lags behind `value` during animation:
+     * we first fade out the old value, swap here, then fade in the new one.
+     */
+    const [displayValue, setDisplayValue] = React.useState(value);
+    /** Drives the CSS opacity transition (1 = fully visible, 0 = invisible). */
+    const [opacity, setOpacity] = React.useState(1);
+    React.useEffect(() => {
+        // Nothing to do — already showing the right value
+        if (value === displayValue)
+            return;
+        // Phase 1: fade out
+        setOpacity(0);
+        // Phase 2: after fade-out completes, swap text and fade in
+        const t = window.setTimeout(() => {
+            setDisplayValue(value); // swap while invisible
+            setOpacity(1); // fade in with new value
+        }, FADE_MS);
+        return () => window.clearTimeout(t);
+        // displayValue intentionally in deps: when setDisplayValue fires it causes
+        // a re-run, which returns early (value === displayValue) — no loop.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, displayValue]);
+    // ── Card dimensions (proportional to fontSize, matching SgFlipDigit) ──────
+    const cardW = Math.round(fontSize * 0.88);
+    const cardH = Math.round(fontSize * 1.38);
+    const cardRadius = Math.max(2, Math.round(fontSize * 0.04));
+    return (_jsxs("div", { "aria-label": displayValue, className: className, style: {
+            display: "inline-block",
+            position: "relative",
+            width: cardW,
+            height: cardH,
+            borderRadius: cardRadius,
+            backgroundColor,
+            boxShadow: "0 .125em .3125em rgba(0,0,0,.25), 0 .02125em .06125em rgba(0,0,0,.25)",
+            overflow: "hidden",
+            flexShrink: 0,
+        }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: Math.round(cardH / 2),
+                    height: 1,
+                    backgroundColor: "rgba(0,0,0,0.35)",
+                    zIndex: 1,
+                    pointerEvents: "none",
+                } }), _jsx("div", { "aria-hidden": "true", style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "linear-gradient(to bottom, rgba(255,255,255,0.045) 0%, transparent 52%)",
+                    zIndex: 2,
+                    pointerEvents: "none",
+                } }), _jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize,
+                    color,
+                    fontFamily: font,
+                    fontWeight: "bold",
+                    lineHeight: 1,
+                    userSelect: "none",
+                    opacity,
+                    // Transition is CONSTANT — direction never changes, so the browser
+                    // always animates when opacity goes 1→0 or 0→1.
+                    transition: `opacity ${FADE_MS}ms ease`,
+                    zIndex: 3,
+                }, children: displayValue })] }));
+}

package/dist/digits/fade-digit/index.d.ts

@@ -0,0 +1,3 @@
+export { SgFadeDigit } from "./SgFadeDigit";
+export type { SgFadeDigitProps } from "./SgFadeDigit";
+//# sourceMappingURL=index.d.ts.map

package/dist/digits/fade-digit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/digits/fade-digit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/digits/fade-digit/index.js

@@ -0,0 +1 @@
+export { SgFadeDigit } from "./SgFadeDigit";

package/dist/digits/flip-digit/SgFlipDigit.d.ts

@@ -0,0 +1,27 @@
+export type SgFlipDigitProps = {
+    /** The character to display (single char) */
+    value: string;
+    /** Font size in pixels — controls overall scale */
+    fontSize?: number;
+    /** Additional CSS classes applied to the outer wrapper */
+    className?: string;
+    /**
+     * @deprecated Use fontSize to control size. width/height are ignored when using @pqina/flip.
+     */
+    width?: number;
+    /**
+     * @deprecated Use fontSize to control size. width/height are ignored when using @pqina/flip.
+     */
+    height?: number;
+};
+/**
+ * SgFlipDigit - Animated flip card powered by @pqina/flip (MIT)
+ *
+ * @example
+ * ```tsx
+ * const [digit, setDigit] = useState("0");
+ * <SgFlipDigit value={digit} fontSize={70} />
+ * ```
+ */
+export declare function SgFlipDigit({ value, fontSize, className, }: SgFlipDigitProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgFlipDigit.d.ts.map

package/dist/digits/flip-digit/SgFlipDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgFlipDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/flip-digit/SgFlipDigit.tsx"],"names":[],"mappings":"AAuBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CAwDlB"}