@seedgrid/fe-components 0.2.4

package/dist/gadgets/clock/SgClock.js

@@ -0,0 +1,407 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useSgTime } from "./SgTimeProvider";
+import { useSgClockThemeResolver } from "./themes/provider";
+import { ThemeLayer, resolveTheme } from "./themes/renderTheme";
+import { useDarkFlag } from "./themes/useDarkFlag";
+import { getTheme } from "./themes/registry";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function useSecondTick() {
+    const [, setTick] = React.useState(0);
+    React.useEffect(() => {
+        const id = window.setInterval(() => setTick((v) => v + 1), 1000);
+        return () => window.clearInterval(id);
+    }, []);
+}
+function getHmsForTimezone(date, locale, timeZone) {
+    const parts = new Intl.DateTimeFormat(locale, {
+        timeZone,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+    }).formatToParts(date);
+    const get = (type) => {
+        const p = parts.find((x) => x.type === type)?.value ?? "0";
+        const n = Number.parseInt(p, 10);
+        return Number.isFinite(n) ? n : 0;
+    };
+    return { h: get("hour"), m: get("minute"), s: get("second") };
+}
+function sizeToClass(size) {
+    if (typeof size === "number")
+        return "";
+    if (size === "sm")
+        return "text-sm";
+    if (size === "lg")
+        return "text-2xl";
+    return "text-base";
+}
+function digitalSizeToNumber(size) {
+    if (typeof size === "number")
+        return size;
+    if (size === "sm")
+        return 12;
+    if (size === "lg")
+        return 28;
+    return 16;
+}
+function getPrevNext(value, min, max) {
+    const range = max - min + 1;
+    const prev = ((value - 1 - min + range) % range) + min;
+    const next = ((value + 1 - min) % range) + min;
+    return { prev, next };
+}
+function buildRange(min, max) {
+    const out = [];
+    for (let i = min; i <= max; i += 1)
+        out.push(i);
+    return out;
+}
+const SEGMENTS = {
+    "0": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 }
+    ],
+    "1": [
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "2": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "3": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "4": [
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "5": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "6": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "7": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "8": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ],
+    "9": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ]
+};
+function round(n) {
+    return Math.round(n * 1000) / 1000;
+}
+function renderSegmentDigit(digit, x, y, scale, keyPrefix) {
+    const segs = SEGMENTS[digit] ?? [];
+    return segs.map((s, idx) => (_jsx("rect", { x: round(x + s.x * scale), y: round(y + s.y * scale), width: round(s.w * scale), height: round(s.h * scale), className: "fill-neutral-800 dark:fill-neutral-200", rx: round(0.3 * scale) }, `${keyPrefix}-${idx}`)));
+}
+function renderSegmentChar(ch, x, y, scale, keyPrefix) {
+    if (ch === ":") {
+        return (_jsxs("g", { children: [_jsx("rect", { x: round(x + 2.2 * scale), y: round(y + 2 * scale), width: round(1 * scale), height: round(1 * scale), className: "fill-neutral-800 dark:fill-neutral-200" }), _jsx("rect", { x: round(x + 2.2 * scale), y: round(y + 7 * scale), width: round(1 * scale), height: round(1 * scale), className: "fill-neutral-800 dark:fill-neutral-200" })] }, keyPrefix));
+    }
+    if (!SEGMENTS[ch])
+        return null;
+    return _jsx("g", { children: renderSegmentDigit(ch, x, y, scale, keyPrefix) }, keyPrefix);
+}
+function renderSegmentText(text, sizePx) {
+    const baseScale = sizePx / 16;
+    const digitW = 6 * baseScale;
+    const digitH = 10 * baseScale;
+    const gap = 1.4 * baseScale;
+    const colonW = 4 * baseScale;
+    let width = 0;
+    for (const ch of text) {
+        width += ch === ":" ? colonW : digitW;
+        width += gap;
+    }
+    width -= gap;
+    const height = digitH;
+    let cursor = 0;
+    const nodes = [];
+    text.split("").forEach((ch, idx) => {
+        const w = ch === ":" ? colonW : digitW;
+        nodes.push(renderSegmentChar(ch, cursor, 0, baseScale, `seg-${idx}`));
+        cursor += w + gap;
+    });
+    return { width, height, nodes };
+}
+function wrapRange(value, start, end) {
+    const size = end - start + 1;
+    const v = ((value - start) % size + size) % size;
+    return start + v;
+}
+function getTimeValue(date, locale, timeZone, mode, smooth) {
+    const { h, m, s } = getHmsForTimezone(date, locale, timeZone);
+    const ms = date.getMilliseconds();
+    if (mode === "hours") {
+        if (!smooth)
+            return { base: h, frac: 0 };
+        const value = h + m / 60 + s / 3600;
+        return { base: Math.floor(value), frac: value - Math.floor(value) };
+    }
+    if (mode === "minutes") {
+        if (!smooth)
+            return { base: m, frac: 0 };
+        const value = m + s / 60;
+        return { base: Math.floor(value), frac: value - Math.floor(value) };
+    }
+    if (!smooth)
+        return { base: s, frac: 0 };
+    const value = s + ms / 1000;
+    return { base: Math.floor(value), frac: value - Math.floor(value) };
+}
+function AnalogClock({ size = 280, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, centerOverlay }) {
+    const { tick, nowMs } = useSgTime();
+    void tick;
+    useSecondTick();
+    const resolver = useSgClockThemeResolver();
+    const dark = useDarkFlag();
+    const date = new Date(nowMs());
+    const { h, m, s } = getHmsForTimezone(date, locale, timezone);
+    const ms = date.getMilliseconds();
+    const sec = secondHandMode === "smooth" ? s + ms / 1000 : s;
+    const secDeg = (sec / 60) * 360;
+    const minDeg = ((m + sec / 60) / 60) * 360;
+    const hourDeg = (((h % 12) + m / 60 + sec / 3600) / 12) * 360;
+    const themeObj = theme ??
+        (resolver ? resolveTheme(resolver, themeId, "classic") : getTheme(themeId) ?? getTheme("classic"));
+    return (_jsx("div", { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: "block", "aria-label": "Analog clock", children: [_jsx("g", { id: "theme", children: themeObj ? _jsx(ThemeLayer, { theme: themeObj, args: { size, dark } }) : null }), _jsxs("g", { id: "hands", children: [_jsx("g", { transform: `rotate(${hourDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "28", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "2.6", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${minDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "18", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "1.7", strokeLinecap: "round" }) }), showSeconds && (_jsx("g", { transform: `rotate(${secDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "54", x2: "50", y2: "14", className: "stroke-rose-500", strokeWidth: "0.9", strokeLinecap: "round" }) }))] }), _jsx("circle", { cx: "50", cy: "50", r: "2.2", className: "fill-neutral-800 dark:fill-neutral-200" }), showSeconds ? _jsx("circle", { cx: "50", cy: "50", r: "1.1", className: "fill-rose-500" }) : null, centerOverlay ? (_jsx("foreignObject", { x: "35", y: "35", width: "30", height: "30", children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: centerOverlay }) })) : null] }) }));
+}
+function FlipDigitCard({ ch, w, h, digitFont }) {
+    const prevRef = React.useRef(ch);
+    const [prev, setPrev] = React.useState(ch);
+    const [flip, setFlip] = React.useState(false);
+    const [animKey, setAnimKey] = React.useState(0);
+    React.useEffect(() => {
+        if (ch === prevRef.current)
+            return;
+        setPrev(prevRef.current);
+        setFlip(false);
+        const raf = window.requestAnimationFrame(() => {
+            setAnimKey((v) => v + 1);
+            setFlip(true);
+        });
+        const id = window.setTimeout(() => {
+            setFlip(false);
+            prevRef.current = ch;
+        }, 1200);
+        return () => {
+            window.cancelAnimationFrame(raf);
+            window.clearTimeout(id);
+        };
+    }, [ch]);
+    const panel = "relative overflow-hidden rounded-lg bg-neutral-900 text-white shadow-[0_10px_24px_rgba(0,0,0,0.4)]";
+    const seam = "absolute left-0 right-0 top-1/2 z-10 h-[3px] bg-gradient-to-b from-black/70 to-transparent shadow-[0_3px_8px_rgba(0,0,0,0.7),0_-2px_6px_rgba(255,255,255,0.25)]";
+    const half = "absolute left-0 w-full overflow-hidden";
+    const glossTop = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/10 before:to-transparent before:content-['']";
+    const glossBottom = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-transparent after:content-['']";
+    return (_jsxs("div", { className: cn(panel, glossTop, glossBottom), style: { width: w, height: h, transformStyle: "preserve-3d", perspective: "1000px" }, children: [_jsx("div", { className: seam }), _jsx("div", { className: cn(half, "top-0"), style: { height: h / 2 }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
+                        fontSize: digitFont,
+                        lineHeight: 1,
+                        width: "100%",
+                        height: h,
+                        top: 0,
+                        left: 0
+                    }, children: flip ? prev : ch }) }), _jsx("div", { className: cn(half, "bottom-0"), style: { height: h / 2 }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
+                        fontSize: digitFont,
+                        lineHeight: 1,
+                        width: "100%",
+                        height: h,
+                        top: `-${h / 2}px`,
+                        left: 0
+                    }, children: ch }) }), flip ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-0 z-20 w-full overflow-hidden rounded-t-lg", style: { height: h / 2 }, children: _jsx("div", { className: "flip-top", style: {
+                                transformOrigin: "center bottom",
+                                height: "100%",
+                                width: "100%"
+                            }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
+                                    fontSize: digitFont,
+                                    lineHeight: 1,
+                                    width: "100%",
+                                    height: h,
+                                    top: 0,
+                                    left: 0
+                                }, children: prev }) }, `top-${animKey}`) }), _jsx("div", { className: "absolute bottom-0 left-0 z-20 w-full overflow-hidden rounded-b-lg", style: { height: h / 2 }, children: _jsx("div", { className: "flip-bottom", style: {
+                                transformOrigin: "center top",
+                                height: "100%",
+                                width: "100%"
+                            }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
+                                    fontSize: digitFont,
+                                    lineHeight: 1,
+                                    width: "100%",
+                                    height: h,
+                                    top: `-${h / 2}px`,
+                                    left: 0
+                                }, children: ch }) }, `bottom-${animKey}`) })] })) : null] }));
+}
+function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className }) {
+    const { tick, nowMs } = useSgTime();
+    void tick;
+    useSecondTick();
+    const d = new Date(nowMs());
+    const parts = new Intl.DateTimeFormat(locale, {
+        timeZone: timezone,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: showSeconds ? "2-digit" : undefined,
+        hour12: format === "12h"
+    }).formatToParts(d);
+    const getPart = (type) => parts.find((p) => p.type === type)?.value ?? "";
+    const hour = getPart("hour");
+    const minute = getPart("minute");
+    const second = getPart("second");
+    let dayPeriod = getPart("dayPeriod");
+    if (format === "12h" && !dayPeriod) {
+        const { h } = getHmsForTimezone(d, locale, timezone);
+        dayPeriod = h >= 12 ? "PM" : "AM";
+    }
+    const text = `${hour}:${minute}${showSeconds ? `:${second}` : ""}`;
+    const classSize = sizeToClass(size);
+    const fontSize = typeof size === "number" ? { fontSize: `${size}px`, lineHeight: 1 } : undefined;
+    const sizePx = digitalSizeToNumber(size);
+    if (digitalStyle === "flip") {
+        const hNum = Number.parseInt(hour, 10) || 0;
+        const mNum = Number.parseInt(minute, 10) || 0;
+        const sNum = Number.parseInt(second || "0", 10) || 0;
+        const safeHour = format === "12h" ? (hNum === 0 ? 12 : hNum) : hNum;
+        const hh = String(safeHour).padStart(2, "0");
+        const mm = String(mNum).padStart(2, "0");
+        const ss = String(sNum).padStart(2, "0");
+        const w = Math.round(sizePx * 1.62);
+        const h = Math.round(sizePx * 2.35);
+        const digitFont = Math.round(sizePx * 1.4);
+        const panel = "relative overflow-hidden rounded-lg bg-neutral-900 text-white shadow-[0_10px_24px_rgba(0,0,0,0.4)]";
+        const glossTop = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/10 before:to-transparent before:content-['']";
+        const glossBottom = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-transparent after:content-['']";
+        const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center", style: { height: h }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-white/80" }), _jsx("div", { className: "mt-2 h-2 w-2 rounded-full bg-white/80" })] }));
+        const PeriodCell = ({ value }) => (_jsx("div", { className: cn(panel, glossTop, glossBottom, "flex items-center justify-center"), style: { width: Math.round(w * 1.35), height: h }, children: _jsx("span", { className: "font-semibold text-white/90", style: { fontSize: Math.round(sizePx * 1.05), lineHeight: 1 }, children: value }) }));
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx("style", { children: `
+          .flip-top {
+            background: #1a1a1a;
+            border-radius: 8px 8px 0 0;
+            animation: sgFlipTop 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            will-change: transform;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
+          }
+          .flip-bottom {
+            background: #1a1a1a;
+            border-radius: 0 0 8px 8px;
+            animation: sgFlipBottom 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
+            animation-delay: 0.6s;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            will-change: transform;
+            box-shadow: 0 -2px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2);
+          }
+          @keyframes sgFlipTop {
+            0% {
+              transform: rotateX(0deg);
+              z-index: 30;
+            }
+            100% {
+              transform: rotateX(-180deg);
+              z-index: 5;
+            }
+          }
+          @keyframes sgFlipBottom {
+            0% {
+              transform: rotateX(180deg);
+              z-index: 5;
+            }
+            100% {
+              transform: rotateX(0deg);
+              z-index: 30;
+            }
+          }
+        ` }), _jsx(FlipDigitCard, { ch: hh.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: hh.charAt(1), w: w, h: h, digitFont: digitFont }), _jsx(Colon, {}), _jsx(FlipDigitCard, { ch: mm.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: mm.charAt(1), w: w, h: h, digitFont: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(FlipDigitCard, { ch: ss.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: ss.charAt(1), w: w, h: h, digitFont: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
+    }
+    if (digitalStyle === "roller3d") {
+        const hNum = Number.parseInt(hour, 10) || 0;
+        const mNum = Number.parseInt(minute, 10) || 0;
+        const sNum = Number.parseInt(second || "0", 10) || 0;
+        const hourMax = format === "12h" ? 12 : 23;
+        const hourMin = format === "12h" ? 1 : 0;
+        const safeHour = format === "12h" ? (hNum === 0 ? 12 : hNum) : hNum;
+        const hours = buildRange(hourMin, hourMax);
+        const minutes = buildRange(0, 59);
+        const seconds = buildRange(0, 59);
+        const periodList = ["AM", "PM"];
+        const w = Math.round(sizePx * 2.8);
+        const h = Math.round(sizePx * 3.6);
+        const itemH = Math.round(sizePx * 1.6);
+        const glow = "shadow-[inset_0_0_28px_rgba(0,0,0,0.08),0_8px_28px_rgba(0,0,0,0.12)]";
+        const face = "relative overflow-hidden rounded-2xl bg-white text-neutral-900 ring-1 ring-black/5";
+        const topShade = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/6 before:to-transparent before:content-['']";
+        const bottomShade = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/12 after:to-transparent after:content-['']";
+        const divider = "absolute left-0 right-0 top-1/2 h-px bg-red-500/70";
+        const mask = "[mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]";
+        const renderRoll = (list, value, pad = 2) => {
+            const idx = typeof value === "string" ? list.indexOf(value) : list.indexOf(value);
+            const translateY = -idx * itemH + h / 2 - itemH / 2;
+            return (_jsxs("div", { className: cn("relative", glow, face, topShade, bottomShade), style: { width: w, height: h }, children: [_jsx("div", { className: divider }), _jsx("div", { className: cn("absolute left-0 top-0 w-full transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]", mask), style: { transform: `translateY(${translateY}px)` }, children: list.map((v, i) => (_jsx("div", { className: "flex h-[var(--sg-roll-h)] items-center justify-center font-medium tabular-nums text-neutral-400", style: {
+                                height: itemH,
+                                fontSize: Math.round(sizePx * 1.35),
+                                color: i === idx ? "rgb(30 30 34)" : "rgb(163 163 170)"
+                            }, children: typeof v === "number" ? String(v).padStart(pad, "0") : v }, `${v}-${i}`))) })] }));
+        };
+        return (_jsxs("div", { className: cn("flex items-center gap-4", className), style: fontSize, "aria-label": "Digital clock", children: [renderRoll(hours, safeHour), renderRoll(minutes, mNum), showSeconds ? renderRoll(seconds, sNum) : null, format === "12h" && dayPeriod ? renderRoll(periodList, dayPeriod.toUpperCase(), 0) : null] }));
+    }
+    if (digitalStyle === "segment") {
+        const seg = renderSegmentText(text, sizePx);
+        return (_jsxs("div", { className: cn("flex items-end gap-2", className), "aria-label": "Digital clock", children: [_jsx("svg", { width: seg.width, height: seg.height, viewBox: `0 0 ${seg.width} ${seg.height}`, className: "block", children: seg.nodes }), format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+    }
+    return (_jsxs("div", { className: cn("font-mono tabular-nums", classSize, className), style: fontSize, children: [text, format === "12h" && dayPeriod ? (_jsx("span", { className: "ml-2 align-top text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+}
+export function SgClock(props) {
+    const { variant = "digital", size = "md", timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, centerOverlay } = props;
+    if (variant === "analog") {
+        const analogSize = typeof size === "number" ? size : size === "sm" ? 140 : size === "lg" ? 320 : 240;
+        return (_jsx(AnalogClock, { size: analogSize, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, centerOverlay: centerOverlay }));
+    }
+    return (_jsx(DigitalClock, { timezone: timezone, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className }));
+}

package/dist/gadgets/clock/SgTimeProvider.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type SgTimeContextValue = {
+    serverStartMs: number;
+    perfStartMs: number;
+    tick: number;
+    nowMs: () => number;
+};
+export declare function useSgTime(): SgTimeContextValue;
+export declare function SgTimeProvider({ initialServerTime, children }: {
+    initialServerTime: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgTimeProvider.d.ts.map

package/dist/gadgets/clock/SgTimeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgTimeProvider.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgTimeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,MAAM,CAAC;CACrB,CAAC;AAIF,wBAAgB,SAAS,uBAIxB;AAED,wBAAgB,cAAc,CAAC,EAC7B,iBAAiB,EACjB,QAAQ,EACT,EAAE;IACD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAyCA"}

package/dist/gadgets/clock/SgTimeProvider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const SgTimeContext = React.createContext(null);
+export function useSgTime() {
+    const ctx = React.useContext(SgTimeContext);
+    if (!ctx)
+        throw new Error("useSgTime must be used within <SgTimeProvider />");
+    return ctx;
+}
+export function SgTimeProvider({ initialServerTime, children }) {
+    const serverStartMsRef = React.useRef(Date.parse(initialServerTime));
+    const perfStartMsRef = React.useRef(0);
+    const [tick, setTick] = React.useState(0);
+    const [hydrated, setHydrated] = React.useState(false);
+    React.useEffect(() => {
+        perfStartMsRef.current = performance.now();
+        setHydrated(true);
+        const alignDelay = 1000 - (Date.now() % 1000);
+        let intervalId = null;
+        const timeoutId = window.setTimeout(() => {
+            setTick((x) => x + 1);
+            intervalId = window.setInterval(() => setTick((x) => x + 1), 1000);
+        }, alignDelay);
+        return () => {
+            window.clearTimeout(timeoutId);
+            if (intervalId)
+                window.clearInterval(intervalId);
+        };
+    }, []);
+    const nowMs = React.useCallback(() => {
+        if (!hydrated)
+            return serverStartMsRef.current;
+        const delta = performance.now() - perfStartMsRef.current;
+        return serverStartMsRef.current + delta;
+    }, [hydrated]);
+    const value = React.useMemo(() => ({
+        serverStartMs: serverStartMsRef.current,
+        perfStartMs: perfStartMsRef.current,
+        tick,
+        nowMs
+    }), [tick, nowMs]);
+    return _jsx(SgTimeContext.Provider, { value: value, children: children });
+}

package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts

@@ -0,0 +1,14 @@
+import type { SgClockTheme } from "./types";
+export type SgClockThemePickerProps = {
+    value: string;
+    onChange: (id: string) => void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    filter?: (theme: SgClockTheme) => boolean;
+    previewSize?: number;
+    searchable?: boolean;
+    fallbackThemeId?: string;
+};
+export declare function SgClockThemePicker({ value, onChange, label, placeholder, className, filter, previewSize, searchable, fallbackThemeId }: SgClockThemePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgClockThemePicker.d.ts.map

package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgClockThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/SgClockThemePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAe,EACf,WAAiC,EACjC,SAAS,EACT,MAAM,EACN,WAAgB,EAChB,UAAiB,EACjB,eAA2B,EAC5B,EAAE,uBAAuB,2CAsJzB"}

package/dist/gadgets/clock/themes/SgClockThemePicker.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useSgClockThemeResolver } from "./provider";
+import { SgClockThemePreview } from "./SgClockThemePreview";
+import { SgAutocomplete } from "../../../inputs/SgAutocomplete";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+export function SgClockThemePicker({ value, onChange, label = "Theme", placeholder = "Select a theme...", className, filter, previewSize = 56, searchable = true, fallbackThemeId = "classic" }) {
+    const resolver = useSgClockThemeResolver();
+    const all = React.useMemo(() => {
+        const list = resolver?.list() ?? [];
+        return filter ? list.filter(filter) : list;
+    }, [resolver, filter]);
+    const [open, setOpen] = React.useState(false);
+    const [q, setQ] = React.useState("");
+    const currentTheme = React.useMemo(() => {
+        const found = resolver?.resolve(value) ?? all.find((t) => t.id === value) ?? null;
+        if (found)
+            return found;
+        return resolver?.resolve(fallbackThemeId) ?? all.find((t) => t.id === fallbackThemeId) ?? null;
+    }, [resolver, value, all, fallbackThemeId]);
+    const filtered = React.useMemo(() => {
+        const s = q.trim().toLowerCase();
+        if (!s)
+            return all;
+        return all.filter((t) => {
+            const hay = `${t.id} ${t.label ?? ""} ${(t.tags ?? []).join(" ")}`.toLowerCase();
+            return hay.includes(s);
+        });
+    }, [all, q]);
+    const rootRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (e) => {
+            const el = rootRef.current;
+            if (!el)
+                return;
+            if (!el.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDoc);
+        return () => document.removeEventListener("mousedown", onDoc);
+    }, [open]);
+    return (_jsxs("div", { ref: rootRef, className: cn("relative", className), children: [label ? _jsx("div", { className: "mb-1 text-xs font-medium opacity-70", children: label }) : null, _jsx("button", { type: "button", onClick: () => setOpen((v) => !v), className: cn("w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-left shadow-sm", "hover:bg-neutral-50", "dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-900/40"), children: _jsxs("div", { className: "flex items-center gap-3", children: [currentTheme ? (_jsx("div", { className: "text-neutral-800 dark:text-neutral-200", children: _jsx(SgClockThemePreview, { theme: currentTheme, size: previewSize }) })) : (_jsx("div", { className: "h-[56px] w-[56px] rounded-md border border-neutral-200 dark:border-neutral-800" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: currentTheme?.label ?? currentTheme?.id ?? placeholder }), _jsx("div", { className: "truncate text-xs opacity-60", children: currentTheme?.id ?? "" })] }), _jsx("div", { className: "text-xs opacity-60", children: open ? "^" : "v" })] }) }), open && (_jsxs("div", { className: cn("absolute z-50 mt-2 w-full overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-lg", "dark:border-neutral-800 dark:bg-neutral-950"), children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(SgAutocomplete, { id: "sg-clock-theme-search", label: "Search theme", placeholder: "Search theme...", openOnFocus: true, showDropDownButton: true, clearOnSelect: true, minLengthForSearch: 0, source: (query) => {
+                                const s = (query ?? "").trim().toLowerCase();
+                                const items = all.map((t) => ({
+                                    id: t.id,
+                                    label: t.label ?? t.id,
+                                    value: t.id,
+                                    data: t
+                                }));
+                                if (!s)
+                                    return items;
+                                return items.filter((item) => item.label?.toLowerCase().includes(s));
+                            }, onSelect: (item) => {
+                                const id = item.value ?? item.id;
+                                onChange(String(id));
+                                setOpen(false);
+                            } }) })), _jsx("div", { className: "max-h-80 overflow-auto p-2", children: filtered.length === 0 ? (_jsx("div", { className: "p-3 text-sm opacity-60", children: "No themes found." })) : (_jsx("div", { className: "space-y-1", children: filtered.map((t) => {
+                                const active = t.id === value;
+                                return (_jsx("button", { type: "button", onClick: () => {
+                                        onChange(t.id);
+                                        setOpen(false);
+                                    }, className: cn("w-full rounded-lg p-2 text-left transition", active
+                                        ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                                        : "hover:bg-neutral-50 dark:hover:bg-neutral-900/40"), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn(active ? "text-white dark:text-neutral-900" : "text-neutral-800 dark:text-neutral-200"), children: _jsx(SgClockThemePreview, { theme: t, size: 44 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: t.label ?? t.id }), _jsx("div", { className: cn("truncate text-xs", active ? "opacity-80" : "opacity-60"), children: t.id })] }), active ? _jsx("div", { className: "text-xs opacity-80", children: "OK" }) : null] }) }, t.id));
+                            }) })) })] }))] }));
+}

package/dist/gadgets/clock/themes/SgClockThemePreview.d.ts

@@ -0,0 +1,7 @@
+import type { SgClockTheme } from "./types";
+export declare function SgClockThemePreview({ theme, size, className }: {
+    theme: SgClockTheme;
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgClockThemePreview.d.ts.map

package/dist/gadgets/clock/themes/SgClockThemePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgClockThemePreview.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/SgClockThemePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,IAAS,EACT,SAAS,EACV,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAiCA"}

package/dist/gadgets/clock/themes/SgClockThemePreview.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeLayer } from "./renderTheme";
+import { useDarkFlag } from "./useDarkFlag";
+export function SgClockThemePreview({ theme, size = 64, className }) {
+    const dark = useDarkFlag();
+    const hourDeg = 305;
+    const minDeg = 60;
+    const secDeg = 180;
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: className ?? "block", "aria-hidden": "true", children: [_jsx("g", { id: "theme", children: _jsx(ThemeLayer, { theme: theme, args: { size, dark } }) }), _jsxs("g", { id: "hands", opacity: "0.9", children: [_jsx("g", { transform: `rotate(${hourDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "32", stroke: "currentColor", strokeWidth: "2.8", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${minDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "22", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${secDeg} 50 50)`, opacity: "0.7", children: _jsx("line", { x1: "50", y1: "54", x2: "50", y2: "16", stroke: "currentColor", strokeWidth: "0.9", strokeLinecap: "round" }) }), _jsx("circle", { cx: "50", cy: "50", r: "2.2", fill: "currentColor" })] })] }));
+}

package/dist/gadgets/clock/themes/builtins.d.ts

@@ -0,0 +1,3 @@
+import type { SgClockTheme } from "./types";
+export declare const sgClockThemesBuiltIn: SgClockTheme[];
+//# sourceMappingURL=builtins.d.ts.map

package/dist/gadgets/clock/themes/builtins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtins.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/builtins.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgjB5C,eAAO,MAAM,oBAAoB,EAAE,YAAY,EAW9C,CAAC"}