@seedgrid/fe-components 0.2.4

package/dist/buttons/SgSpeedDial.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { SgButton } from "./SgButton";
+/* ── helpers ── */
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/* ── constants ── */
+const ITEM_GAP = { sm: 40, md: 48, lg: 56 };
+const DEFAULT_RADIUS = { sm: 100, md: 120, lg: 150 };
+const DIRECTION_START_ANGLE = {
+    up: 270,
+    down: 90,
+    left: 180,
+    right: 0
+};
+const DEFAULT_TOOLTIP = {
+    up: "left",
+    down: "right",
+    left: "top",
+    right: "bottom"
+};
+/* ── positioning ── */
+function degToRad(deg) {
+    return (deg * Math.PI) / 180;
+}
+function computeItemPositions(items, type, direction, size, radius) {
+    const count = items.length;
+    if (count === 0)
+        return [];
+    if (type === "linear") {
+        const gap = ITEM_GAP[size];
+        return items.map((_, i) => {
+            const dist = gap * (i + 1);
+            switch (direction) {
+                case "up":
+                    return { x: 0, y: -dist };
+                case "down":
+                    return { x: 0, y: dist };
+                case "left":
+                    return { x: -dist, y: 0 };
+                case "right":
+                    return { x: dist, y: 0 };
+            }
+        });
+    }
+    const r = radius ?? DEFAULT_RADIUS[size];
+    const centerAngle = DIRECTION_START_ANGLE[direction];
+    let totalArc;
+    switch (type) {
+        case "circle":
+            totalArc = 360;
+            break;
+        case "semi-circle":
+            totalArc = 180;
+            break;
+        case "quarter-circle":
+            totalArc = 90;
+            break;
+        default:
+            totalArc = 360;
+    }
+    const step = type === "circle" ? totalArc / count : totalArc / Math.max(count - 1, 1);
+    const startAngle = type === "circle" ? centerAngle : centerAngle - totalArc / 2;
+    return items.map((_, i) => {
+        const angle = startAngle + step * i;
+        const rad = degToRad(angle);
+        return {
+            x: Math.round(r * Math.cos(rad)),
+            y: Math.round(r * Math.sin(rad))
+        };
+    });
+}
+/* ── default icons ── */
+function PlusIcon() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5v14" })] }));
+}
+/* ── tooltip ── */
+const TOOLTIP_POS = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+/* ── component ── */
+export function SgSpeedDial(props) {
+    const { items, direction = "up", type = "linear", severity = "primary", appearance = "solid", size = "md", icon, activeIcon, radius, disabled = false, className, style, transitionDelay = 30, mask = false, tooltipPosition, onOpen, onClose } = props;
+    const [open, setOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const toggle = React.useCallback(() => {
+        if (disabled)
+            return;
+        setOpen((prev) => {
+            const next = !prev;
+            if (next)
+                onOpen?.();
+            else
+                onClose?.();
+            return next;
+        });
+    }, [disabled, onOpen, onClose]);
+    const close = React.useCallback(() => {
+        if (open) {
+            setOpen(false);
+            onClose?.();
+        }
+    }, [open, onClose]);
+    // click-outside
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function handleClick(e) {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                close();
+            }
+        }
+        function handleEscape(e) {
+            if (e.key === "Escape")
+                close();
+        }
+        document.addEventListener("mousedown", handleClick);
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("mousedown", handleClick);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [open, close]);
+    const positions = computeItemPositions(items, type, direction, size, radius);
+    const tipPos = tooltipPosition ?? DEFAULT_TOOLTIP[direction];
+    const triggerIcon = icon ?? _jsx(PlusIcon, {});
+    const triggerActiveIcon = activeIcon ?? triggerIcon;
+    return (_jsxs(_Fragment, { children: [mask ? (_jsx("div", { className: cn("fixed inset-0 bg-black/50 transition-opacity duration-300 z-40", open ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: close })) : null, _jsxs("div", { ref: containerRef, className: cn("relative inline-flex items-center justify-center", mask && open ? "z-50" : "z-auto", className), style: style, children: [items.map((item, i) => {
+                        const pos = positions[i] ?? { x: 0, y: 0 };
+                        const itemSeverity = item.severity ?? "plain";
+                        return (_jsx("div", { className: "absolute", style: {
+                                transform: open
+                                    ? `translate(${pos.x}px, ${pos.y}px) scale(1)`
+                                    : "translate(0, 0) scale(0)",
+                                opacity: open ? 1 : 0,
+                                transition: `transform 200ms ease, opacity 200ms ease`,
+                                transitionDelay: open ? `${i * transitionDelay}ms` : `${(items.length - 1 - i) * transitionDelay}ms`
+                            }, children: _jsxs("div", { className: "relative group", children: [_jsx(SgButton, { severity: itemSeverity, appearance: itemSeverity === "plain" ? "solid" : appearance, size: size, shape: "rounded", disabled: item.disabled, className: item.className, onClick: () => {
+                                            item.onClick?.();
+                                            close();
+                                        }, "aria-label": item.label, leftIcon: item.icon }), item.label ? (_jsx("span", { className: cn("absolute whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-xs text-background", "opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none", TOOLTIP_POS[tipPos]), children: item.label })) : null] }) }, i));
+                    }), _jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: "rounded", disabled: disabled, onClick: toggle, "aria-label": open ? "Close" : "Open", "aria-expanded": open, leftIcon: _jsx("span", { className: "inline-flex transition-transform duration-300", style: { transform: open ? "rotate(45deg)" : "rotate(0deg)" }, children: open ? triggerActiveIcon : triggerIcon }) })] })] }));
+}
+SgSpeedDial.displayName = "SgSpeedDial";

package/dist/buttons/SgSplitButton.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { SgButtonCustomColors } from "./SgButton";
+type Severity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger";
+type Appearance = "solid" | "outline" | "ghost";
+type Size = "sm" | "md" | "lg";
+type Shape = "default" | "rounded" | "square";
+type Elevation = "none" | "sm" | "md";
+export type SgSplitButtonItem = {
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    separator?: boolean;
+};
+export type SgSplitButtonProps = {
+    label?: string;
+    leftIcon?: React.ReactNode;
+    severity?: Severity;
+    appearance?: Appearance;
+    size?: Size;
+    shape?: Shape;
+    elevation?: Elevation;
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: () => void;
+    items: SgSplitButtonItem[];
+    customColors?: SgButtonCustomColors;
+    className?: string;
+};
+export declare const SgSplitButton: React.ForwardRefExoticComponent<SgSplitButtonProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=SgSplitButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgSplitButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgSplitButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmBF,eAAO,MAAM,aAAa,2FAkKzB,CAAC"}

package/dist/buttons/SgSplitButton.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SgButton, resolveButtonColors } from "./SgButton";
+function ChevronDown({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+export const SgSplitButton = React.forwardRef(({ label, leftIcon, severity = "primary", appearance = "solid", size = "md", shape = "default", elevation = "none", disabled = false, loading = false, onClick, items, customColors, className }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function handleClickOutside(e) {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        }
+        function handleEscape(e) {
+            if (e.key === "Escape")
+                setOpen(false);
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [open]);
+    const toggle = () => {
+        if (!disabled && !loading)
+            setOpen((prev) => !prev);
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        item.onClick?.();
+        setOpen(false);
+    };
+    const colors = resolveButtonColors(severity, customColors);
+    const toneKey = severity === "danger"
+        ? "error"
+        : severity === "help"
+            ? "tertiary"
+            : severity;
+    const tone100 = `var(--sg-${toneKey}-100, var(--sg-primary-100))`;
+    const tone200 = `var(--sg-${toneKey}-200, ${tone100})`;
+    const tone300 = `var(--sg-${toneKey}-300, ${tone200})`;
+    const menuBg = `rgb(${tone100})`;
+    const menuFg = colors.bg;
+    const menuHoverBg = `rgb(${tone200})`;
+    const menuBorder = `rgb(${tone200})`;
+    const dividerBorderClass = appearance === "solid"
+        ? "border-l border-[rgb(var(--sg-border))]"
+        : appearance === "outline"
+            ? "border-l border-[var(--sg-btn-border,currentColor)]"
+            : "border-l border-current/20";
+    const sizeClasses = {
+        sm: { menu: "min-w-[140px]", item: "px-3 py-1.5", text: "text-sm", iconSize: "size-3.5" },
+        md: { menu: "min-w-[160px]", item: "px-4 py-2", text: "text-sm", iconSize: "size-4" },
+        lg: { menu: "min-w-[180px]", item: "px-5 py-2.5", text: "text-base", iconSize: "size-5" }
+    };
+    const s = sizeClasses[size];
+    return (_jsxs("div", { ref: containerRef, className: `relative inline-flex ${className ?? ""}`, children: [_jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled, loading: loading, leftIcon: leftIcon, onClick: onClick, customColors: customColors, className: "rounded-r-none", children: label }), _jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled || loading, leftIcon: _jsx(ChevronDown, { className: "size-4" }), onClick: toggle, customColors: customColors, className: `rounded-l-none ${dividerBorderClass}`, "aria-haspopup": "true", "aria-expanded": open }), open && (_jsx("div", { ref: menuRef, role: "menu", className: `absolute right-0 top-full z-50 mt-1 ${s.menu} overflow-hidden rounded-lg shadow-lg`, style: {
+                    backgroundColor: menuBg,
+                    color: menuFg,
+                    border: `1px solid ${menuBorder}`
+                }, children: items.map((item, i) => (_jsxs(React.Fragment, { children: [item.separator && i > 0 ? (_jsx("div", { className: "my-0.5", style: {
+                                borderTop: `1px solid ${appearance === "solid" ? `rgb(${tone300})` : "rgb(var(--sg-text)/0.2)"}`
+                            } })) : null, _jsxs("button", { role: "menuitem", type: "button", disabled: item.disabled, className: `flex w-full items-center gap-2 ${s.item} ${s.text} transition-colors disabled:opacity-50 disabled:cursor-not-allowed`, style: {
+                                backgroundColor: "transparent"
+                            }, onMouseEnter: (e) => {
+                                if (!item.disabled)
+                                    (e.currentTarget.style.backgroundColor = menuHoverBg);
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = "transparent";
+                            }, onClick: () => handleItemClick(item), children: [item.icon ? _jsx("span", { className: `shrink-0 ${s.iconSize}`, children: item.icon }) : null, _jsx("span", { children: item.label })] })] }, i))) }))] }));
+});
+SgSplitButton.displayName = "SgSplitButton";

package/dist/clock/SgClock.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { SgClockTheme } from "./themes/types";
+export type SgClockProps = {
+    variant?: "digital" | "analog" | "instrument";
+    size?: "sm" | "md" | "lg" | number;
+    timezone?: string;
+    locale?: string;
+    format?: "12h" | "24h";
+    showSeconds?: boolean;
+    digitalStyle?: "default" | "segment";
+    secondHandMode?: "step" | "smooth";
+    instrumentMode?: "hours" | "minutes" | "seconds";
+    instrumentWindow?: number;
+    instrumentRange?: {
+        start: number;
+        end: number;
+    };
+    instrumentStep?: number;
+    instrumentStyle?: "outlined" | "soft";
+    instrumentHighlight?: boolean;
+    instrumentSmooth?: boolean;
+    themeId?: string;
+    theme?: SgClockTheme;
+    className?: string;
+    centerOverlay?: React.ReactNode;
+};
+export declare function SgClock(props: SgClockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgClock.d.ts.map

package/dist/clock/SgClock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgClock.d.ts","sourceRoot":"","sources":["../../src/clock/SgClock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAenD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AA+bF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqE1C"}

package/dist/clock/SgClock.js

@@ -0,0 +1,280 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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;
+}
+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 InstrumentClock({ size = "md", locale = "pt-BR", timezone, instrumentWindow = 12, instrumentRange, instrumentStep = 1, instrumentStyle = "outlined", instrumentHighlight = true, instrumentSmooth = true, className }) {
+    const { tick, nowMs } = useSgTime();
+    void tick;
+    useSecondTick();
+    const date = new Date(nowMs());
+    const windowSize = instrumentWindow % 2 === 0 ? instrumentWindow + 1 : instrumentWindow;
+    const centerIndex = Math.floor(windowSize / 2);
+    const cellWidth = typeof size === "number" ? size : size === "sm" ? 36 : size === "lg" ? 64 : 48;
+    const height = Math.round(cellWidth * 0.9);
+    const pad = instrumentStyle === "soft" ? "bg-muted/40" : "bg-background";
+    const border = instrumentStyle === "outlined" ? "border border-border" : "";
+    const lastPosRef = React.useRef({
+        hours: null,
+        minutes: null,
+        seconds: null
+    });
+    const renderLine = (mode, range) => {
+        const { base, frac } = getTimeValue(date, locale, timezone, mode, instrumentSmooth);
+        const values = Array.from({ length: windowSize }).map((_, idx) => {
+            const offset = (idx - centerIndex) * instrumentStep;
+            const value = wrapRange(base + offset, range.start, range.end);
+            return value;
+        });
+        const pos = base + frac;
+        const lastPos = lastPosRef.current[mode] ?? null;
+        if (lastPos === null) {
+            lastPosRef.current[mode] = pos;
+        }
+        else if (instrumentSmooth) {
+            const rangeSize = range.end - range.start + 1;
+            const delta = pos - lastPos;
+            if (delta < -rangeSize / 2) {
+                lastPosRef.current[mode] = lastPos - rangeSize;
+            }
+        }
+        const translateX = ((lastPosRef.current[mode] ?? pos) - pos) * cellWidth;
+        lastPosRef.current[mode] = pos;
+        return (_jsxs("div", { className: cn("relative overflow-hidden rounded-lg", pad, border), style: { height }, children: [_jsx("div", { className: "flex items-center", style: {
+                        transform: `translateX(${translateX}px)`,
+                        transition: instrumentSmooth ? "transform 60ms linear" : "none"
+                    }, children: values.map((v, idx) => {
+                        const isCenter = idx === centerIndex;
+                        return (_jsx("div", { className: cn("flex items-center justify-center font-mono tabular-nums text-muted-foreground", isCenter && instrumentHighlight ? "text-foreground font-semibold" : ""), style: { width: cellWidth, height }, children: String(v).padStart(2, "0") }, `${mode}-${v}-${idx}`));
+                    }) }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -top-2 left-1/2 h-2 w-0.5 -translate-x-1/2 bg-foreground" }), _jsx("div", { className: "absolute -bottom-2 left-1/2 h-2 w-0.5 -translate-x-1/2 bg-foreground" }), _jsx("div", { className: "h-full w-0.5 bg-foreground", style: { height } })] }) })] }));
+    };
+    return (_jsxs("div", { className: cn("relative w-full max-w-full space-y-3", className), children: [renderLine("hours", instrumentRange ?? { start: 0, end: 23 }), renderLine("minutes", instrumentRange ?? { start: 0, end: 59 }), renderLine("seconds", instrumentRange ?? { start: 0, end: 59 })] }));
+}
+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 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 text = new Intl.DateTimeFormat(locale, {
+        timeZone: timezone,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: showSeconds ? "2-digit" : undefined,
+        hour12: format === "12h"
+    }).format(d);
+    const classSize = sizeToClass(size);
+    const fontSize = typeof size === "number" ? { fontSize: `${size}px`, lineHeight: 1 } : undefined;
+    const sizePx = digitalSizeToNumber(size);
+    if (digitalStyle === "segment") {
+        const seg = renderSegmentText(text, sizePx);
+        return (_jsx("svg", { width: seg.width, height: seg.height, viewBox: `0 0 ${seg.width} ${seg.height}`, className: cn("block", className), "aria-label": "Digital clock", children: seg.nodes }));
+    }
+    return (_jsx("div", { className: cn("font-mono tabular-nums", classSize, className), style: fontSize, children: text }));
+}
+export function SgClock(props) {
+    const { variant = "digital", size = "md", timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", instrumentMode = "minutes", instrumentWindow = 12, instrumentRange, instrumentStep = 1, instrumentStyle = "outlined", instrumentHighlight = true, instrumentSmooth = true, 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 }));
+    }
+    if (variant === "instrument") {
+        return (_jsx(InstrumentClock, { size: size, locale: locale, timezone: timezone, instrumentMode: instrumentMode, instrumentWindow: instrumentWindow, instrumentRange: instrumentRange, instrumentStep: instrumentStep, instrumentStyle: instrumentStyle, instrumentHighlight: instrumentHighlight, instrumentSmooth: instrumentSmooth, className: className }));
+    }
+    return (_jsx(DigitalClock, { timezone: timezone, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className }));
+}

package/dist/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/clock/SgTimeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgTimeProvider.d.ts","sourceRoot":"","sources":["../../src/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/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/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