@seedgrid/fe-components 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "peerDependencies": {

package/dist/buttons/SgSpeedDial.d.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-import { type SgButtonProps } from "./SgButton";
-type Severity = NonNullable<SgButtonProps["severity"]>;
-type Appearance = NonNullable<SgButtonProps["appearance"]>;
-type Size = NonNullable<SgButtonProps["size"]>;
-export type SpeedDialDirection = "up" | "down" | "left" | "right";
-export type SpeedDialType = "linear" | "circle" | "semi-circle" | "quarter-circle";
-export type SgSpeedDialItem = {
-    icon: React.ReactNode;
-    label?: string;
-    onClick?: () => void;
-    severity?: Severity;
-    disabled?: boolean;
-    className?: string;
-};
-export type SgSpeedDialProps = {
-    items: SgSpeedDialItem[];
-    direction?: SpeedDialDirection;
-    type?: SpeedDialType;
-    severity?: Severity;
-    appearance?: Appearance;
-    size?: Size;
-    icon?: React.ReactNode;
-    activeIcon?: React.ReactNode;
-    radius?: number;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    transitionDelay?: number;
-    mask?: boolean;
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-    onOpen?: () => void;
-    onClose?: () => void;
-};
-export declare function SgSpeedDial(props: Readonly<SgSpeedDialProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace SgSpeedDial {
-    var displayName: string;
-}
-export {};
-//# sourceMappingURL=SgSpeedDial.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SgSpeedDial.d.ts","sourceRoot":"","sources":["../../src/buttons/SgSpeedDial.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAU1D,KAAK,QAAQ,GAAG,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;AACvD,KAAK,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;AAC3D,KAAK,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA4GF,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA2J5D;yBA3Je,WAAW"}

package/dist/buttons/SgSpeedDial.js

@@ -1,149 +0,0 @@
-"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/clock/SgClock.d.ts

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,280 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,44 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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/clock/themes/SgClockThemePicker.d.ts.map

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