@seedgrid/fe-components 0.2.10 → 2026.3.1

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

package/dist/digits/flip-digit/SgFlipDigit.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+// CSS from @pqina/flip v1.8.4 (MIT) — embedded to avoid CSS import in tsc-only build
+const FLIP_CSS = `.tick{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;position:relative;z-index:1;line-height:1.4}.tick *{box-sizing:inherit}.tick [data-view]{max-width:100%}.tick span[data-view]{display:inline-block}.tick .tick-credits{display:none}.tick [data-layout~=pad]{margin:-.25em}.tick [data-layout~=pad]>*{margin:.25em}.tick [data-layout~=horizontal]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=baseline]{-ms-flex-align:baseline;align-items:baseline}.tick [data-layout~=horizontal][data-layout~=center]{-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=right]{-ms-flex-pack:end;justify-content:flex-end}.tick [data-layout~=horizontal][data-layout~=left]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=horizontal][data-layout~=fill],.tick [data-layout~=horizontal][data-layout~=stretch]{-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tick [data-layout~=horizontal][data-layout~=fill]>*,.tick [data-layout~=horizontal][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0;width:100%}.tick [data-layout~=horizontal][data-layout~=multi-line]{-ms-flex-wrap:wrap;flex-wrap:wrap}.tick [data-layout~=horizontal][data-layout~=fit]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:center;align-content:center;white-space:nowrap;-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.tick [data-layout~=vertical][data-layout~=top]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical][data-layout~=bottom]{-ms-flex-pack:end;justify-content:flex-end;min-height:100%}.tick [data-layout~=vertical][data-layout~=middle]{-ms-flex-pack:center;justify-content:center;min-height:100%}.tick [data-layout~=vertical][data-layout~=left]{-ms-flex-align:start;align-items:flex-start}.tick [data-layout~=vertical][data-layout~=right]{-ms-flex-align:end;align-items:flex-end}.tick [data-layout~=vertical][data-layout~=center]{text-align:center}.tick [data-layout~=vertical][data-layout~=fill],.tick [data-layout~=vertical][data-layout~=stretch]{-ms-flex-align:stretch;align-items:stretch;min-height:100%}.tick [data-layout~=vertical][data-layout~=fill]>*,.tick [data-layout~=vertical][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0}.tick [data-layout~=vertical]>*+*{margin-top:.5em}.tick [data-layout~=overlay]{position:relative}.tick [data-layout~=overlay]>*{margin:0}.tick [data-layout~=overlay][data-layout~=center]{text-align:center}.tick [data-layout~=overlay][data-layout~=left]{text-align:left}.tick [data-layout~=overlay][data-layout~=right]{text-align:right}.tick [data-layout~=overlay]>[data-overlay=fill],.tick [data-layout~=overlay]>[data-overlay=stretch]{position:absolute;left:0;right:0;top:0;bottom:0}.tick [data-layout~=overlay]>[data-overlay=center]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0}.tick-flip{position:relative;text-align:center}.tick-flip *{border-radius:inherit;white-space:pre;letter-spacing:inherit;text-indent:inherit}.tick-flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0}.tick-flip-back{border-top-left-radius:0;border-top-right-radius:0}.tick-flip-spacer{display:block;visibility:hidden}.tick-flip-shadow{position:absolute;left:1px;right:1px;top:1px;bottom:1px;color:transparent!important;background:transparent!important}.tick-flip-shadow-top{bottom:calc(50% - 1px)}.tick-flip-shadow-bottom{top:calc(50% + 1px)}.tick-flip-card-shadow{position:absolute;left:.15em;right:.15em;bottom:.125em;height:.5em;background-color:transparent;border-radius:0;opacity:0;transform-origin:0 100%;box-shadow:0 .125em .25em rgba(0,0,0,.5),0 .125em .5em rgba(0,0,0,.75);z-index:0}.tick-flip-card{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;perspective:4em}.tick-flip-panel-back,.tick-flip-panel-front{position:absolute;left:0;width:100%;height:51%;backface-visibility:hidden;transform-style:preserve-3d}.tick-flip-panel-back-text,.tick-flip-panel-front-text{position:absolute;left:-1px;top:0;right:-1px;height:100%;overflow:hidden}.tick-flip-panel-text-wrapper{position:absolute;left:0;top:0;right:0;height:100%}.tick-flip-panel-back-text .tick-flip-panel-text-wrapper{height:200%;top:-100%}.tick-flip-panel-front{transform-origin:center bottom;top:0;z-index:2;box-shadow:inset 0 1px hsla(0,0%,100%,.05)}.tick-flip-panel-back{transform-origin:center top;top:50%;z-index:1;box-shadow:inset 0 -1px rgba(0,0,0,.1)}.tick-flip-panel-back:after{z-index:1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 1px,rgba(0,0,0,.15) 0,transparent 30%)}.tick-flip-panel-back-shadow{z-index:2}.tick-flip-panel-back-highlight{z-index:3}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow,.tick-flip-panel-front-shadow{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}.tick-flip-panel-front-shadow{background-image:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.3))}.tick-flip-panel-back-shadow{background-image:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.5))}.tick-flip-panel-back-highlight{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.3))}.tick [data-style*="shadow:inner"],.tick [data-style*="shadow:inner"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back,.tick [data-style*="shadow:none"] .tick-flip-panel-front,.tick [data-style*="shadow:none"] .tick-flip-shadow{box-shadow:none}.tick [data-style*="shadow:none"] .tick-flip-back:after,.tick [data-style*="shadow:none"] .tick-flip-panel-back-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back-text:after,.tick [data-style*="shadow:none"] .tick-flip-panel-front-shadow{background-image:none}.tick [data-style*="rounded:none"]{border-radius:0}.tick [data-style*="rounded:panels"] .tick-flip-front,.tick [data-style*="rounded:panels"] .tick-flip-shadow-bottom{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick [data-style*="rounded:panels"] .tick-flip-back,.tick [data-style*="rounded:panels"] .tick-flip-panel-back:after,.tick [data-style*="rounded:panels"] .tick-flip-shadow-top{border-top-left-radius:inherit;border-top-right-radius:inherit}.tick-flip{margin-left:.0625em;margin-right:.0625em;min-width:1.125em;border-radius:.125em;letter-spacing:.25em;text-indent:.25em}.tick-flip-panel{color:#edebeb;background-color:#333232}.tick-flip-shadow{box-shadow:0 .125em .3125em rgba(0,0,0,.25),0 .02125em .06125em rgba(0,0,0,.25)}`;
+let flipCssInjected = false;
+function ensureFlipCss() {
+    if (flipCssInjected || typeof document === "undefined")
+        return;
+    if (document.getElementById("pqina-flip-css")) {
+        flipCssInjected = true;
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = "pqina-flip-css";
+    style.textContent = FLIP_CSS;
+    document.head.appendChild(style);
+    flipCssInjected = true;
+}
+/**
+ * SgFlipDigit - Animated flip card powered by @pqina/flip (MIT)
+ *
+ * @example
+ * ```tsx
+ * const [digit, setDigit] = useState("0");
+ * <SgFlipDigit value={digit} fontSize={70} />
+ * ```
+ */
+export function SgFlipDigit({ value, fontSize = 70, className, }) {
+    const containerRef = React.useRef(null);
+    const tickRef = React.useRef(null);
+    const valueRef = React.useRef(value);
+    // Mount: inject CSS + create Tick instance
+    React.useEffect(() => {
+        ensureFlipCss();
+        const el = containerRef.current;
+        if (!el)
+            return;
+        let cancelled = false;
+        let destroyFn = null;
+        // Dynamic import: @pqina/flip touches window/document at module evaluation,
+        // so it must never run on the server (SSR). useEffect is client-only.
+        import("@pqina/flip").then(({ default: Tick }) => {
+            if (cancelled || !el.isConnected)
+                return;
+            // Build the required inner DOM structure for @pqina/flip
+            const repeat = document.createElement("div");
+            repeat.setAttribute("data-repeat", "true");
+            repeat.setAttribute("aria-hidden", "true");
+            const flipSpan = document.createElement("span");
+            flipSpan.setAttribute("data-view", "flip");
+            repeat.appendChild(flipSpan);
+            el.appendChild(repeat);
+            tickRef.current = Tick.DOM.create(el, { value: valueRef.current });
+            destroyFn = () => Tick.DOM.destroy(el);
+        });
+        return () => {
+            cancelled = true;
+            destroyFn?.();
+            tickRef.current = null;
+        };
+    }, []);
+    // Update value
+    React.useEffect(() => {
+        valueRef.current = value;
+        if (tickRef.current) {
+            tickRef.current.value = value;
+        }
+    }, [value]);
+    return (_jsx("div", { ref: containerRef, className: ["tick", className].filter(Boolean).join(" "), style: { fontSize, display: "inline-block" } }));
+}

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

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

package/dist/digits/matrix-digit/SgMatrixDigit.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type SgMatrixDigitProps = {
+    /**
+     * Text to render using matrix dots.
+     * Supports letters, numbers and common symbols.
+     */
+    value: string;
+    /** Color of active dots. */
+    color?: string;
+    /** Background color of the matrix container. */
+    backgroundColor?: string;
+    /** Color of inactive dots. */
+    offColor?: string;
+    /** Dot size in pixels. */
+    dotSize?: number;
+    /** Gap between dots in pixels. */
+    gap?: number;
+    /** Gap between characters in pixels. */
+    charGap?: number;
+    /** Internal padding in pixels. */
+    padding?: number;
+    /** Border radius of the matrix container in pixels. */
+    rounded?: number;
+    /** Add a subtle glow around active dots. */
+    glow?: boolean;
+    /** Additional CSS classes for the outer wrapper. */
+    className?: string;
+    /** Additional CSS style for the outer wrapper. */
+    style?: React.CSSProperties;
+};
+export declare function SgMatrixDigit({ value, color, backgroundColor, offColor, dotSize, gap, charGap, padding, rounded, glow, className, style }: Readonly<SgMatrixDigitProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgMatrixDigit.d.ts.map

package/dist/digits/matrix-digit/SgMatrixDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgMatrixDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/matrix-digit/SgMatrixDigit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAuDF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAiB,EACjB,eAA2B,EAC3B,QAAsC,EACtC,OAAW,EACX,GAAO,EACP,OAAW,EACX,OAAW,EACX,OAAY,EACZ,IAAW,EACX,SAAS,EACT,KAAK,EACN,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAyD9B"}