@seedgrid/fe-components 2026.3.20 → 2026.3.27

package/dist/gadgets/clock/SgClock.js

@@ -93,6 +93,7 @@ function buildRange(min, max) {
     return out;
 }
 function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, style, centerOverlay }) {
+    const i18n = useComponentsI18n();
     const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
     void providerTick;
     useSecondTick(!hasProvider);
@@ -107,9 +108,10 @@ function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR"
     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, style: style, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: cn("block", dark ? "dark" : undefined), "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] }) }));
+    return (_jsx("div", { className: className, style: style, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: cn("block", dark ? "dark" : undefined), "aria-label": t(i18n, "components.gadgets.clock.analogAria"), 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({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className, style }) {
+    const i18n = useComponentsI18n();
     const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
     void providerTick;
     useSecondTick(!hasProvider);
@@ -158,7 +160,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
                     fontWeight: 700,
                     lineHeight: 1
                 }, children: value }) }));
-        return (_jsxs("div", { className: cn("flex items-center gap-2", className), style: style, "aria-label": "Digital clock", children: [_jsx(SgFlipDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFlipDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFlipDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgFlipDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFlipDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFlipDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
     }
     if (digitalStyle === "roller3d") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -175,7 +177,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
         const hh = String(safeHour).padStart(2, "0");
         const mm = String(mNum).padStart(2, "0");
         const ss = String(sNum).padStart(2, "0");
-        return (_jsxs("div", { className: cn("flex items-center gap-4", className), style: { ...fontSize, ...style }, "aria-label": "Digital clock", children: [_jsx(SgRoller3DDigit, { value: hh, items: hourItems, fontSize: digitFont }), _jsx(SgRoller3DDigit, { value: mm, items: minuteItems, fontSize: digitFont }), showSeconds ? _jsx(SgRoller3DDigit, { value: ss, items: secondItems, fontSize: digitFont }) : null, format === "12h" && dayPeriod ? (_jsx(SgRoller3DDigit, { value: dayPeriod.toUpperCase(), items: periodItems, fontSize: digitFont })) : null] }));
+        return (_jsxs("div", { className: cn("flex items-center gap-4", className), style: { ...fontSize, ...style }, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgRoller3DDigit, { value: hh, items: hourItems, fontSize: digitFont }), _jsx(SgRoller3DDigit, { value: mm, items: minuteItems, fontSize: digitFont }), showSeconds ? _jsx(SgRoller3DDigit, { value: ss, items: secondItems, fontSize: digitFont }) : null, format === "12h" && dayPeriod ? (_jsx(SgRoller3DDigit, { value: dayPeriod.toUpperCase(), items: periodItems, fontSize: digitFont })) : null] }));
     }
     if (digitalStyle === "fade") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -188,7 +190,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
         const digitFont = Math.round(sizePx * 1.35);
         const cardH = Math.round(digitFont * 1.4);
         const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", style: { height: cardH }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-neutral-500/70" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-neutral-500/70" })] }));
-        return (_jsxs("div", { className: cn("flex items-center gap-2", className), style: style, "aria-label": "Digital clock", children: [_jsx(SgFadeDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFadeDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFadeDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod.toUpperCase() })) : null] }));
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgFadeDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFadeDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFadeDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod.toUpperCase() })) : null] }));
     }
     if (digitalStyle === "discard") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -213,15 +215,15 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
         };
         const Colon = () => (_jsx(SgDiscardDigit, { value: ":", fontSize: Math.max(26, Math.round(digitFont * 0.72)), totalNumberPages: 1, transitionMs: 560, animateOnChange: false }));
         const PeriodCell = ({ value }) => (_jsx(SgDiscardDigit, { value: value, fontSize: Math.max(20, Math.round(digitFont * 0.52)), totalNumberPages: 1, transitionMs: 560, animateOnChange: false }));
-        return (_jsxs("div", { className: cn("relative z-10 flex items-end gap-2", className), style: style, "aria-label": "Digital clock", children: [_jsx(SgDiscardDigit, { value: hh.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: hh.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(Colon, {}), _jsx(SgDiscardDigit, { value: mm.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: mm.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgDiscardDigit, { value: ss.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: ss.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
+        return (_jsxs("div", { className: cn("relative z-10 flex items-end gap-2", className), style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgDiscardDigit, { value: hh.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: hh.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(Colon, {}), _jsx(SgDiscardDigit, { value: mm.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: mm.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgDiscardDigit, { value: ss.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: ss.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
     }
     if (digitalStyle === "matrix") {
         const dotSize = Math.max(3, Math.round(sizePx * 0.32));
-        return (_jsx("div", { className: cn("flex items-center", className), style: style, "aria-label": "Digital clock", children: _jsx(SgMatrixDigit, { value: withPeriod, dotSize: dotSize, gap: Math.max(1, Math.round(dotSize * 0.35)), charGap: Math.max(3, Math.round(dotSize * 0.9)), padding: Math.max(6, Math.round(dotSize * 1.3)), rounded: Math.max(8, Math.round(dotSize * 1.1)) }) }));
+        return (_jsx("div", { className: cn("flex items-center", className), style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: _jsx(SgMatrixDigit, { value: withPeriod, dotSize: dotSize, gap: Math.max(1, Math.round(dotSize * 0.35)), charGap: Math.max(3, Math.round(dotSize * 0.9)), padding: Math.max(6, Math.round(dotSize * 1.3)), rounded: Math.max(8, Math.round(dotSize * 1.1)) }) }));
     }
     if (digitalStyle === "neon") {
         const neonFont = Math.max(18, Math.round(sizePx * 1.35));
-        return (_jsx("div", { className: cn("flex items-center", className), style: style, "aria-label": "Digital clock", children: _jsx(SgNeonDigit, { value: withPeriod, fontSize: neonFont, padding: Math.max(8, Math.round(sizePx * 0.6)), rounded: Math.max(10, Math.round(sizePx * 0.45)) }) }));
+        return (_jsx("div", { className: cn("flex items-center", className), style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: _jsx(SgNeonDigit, { value: withPeriod, fontSize: neonFont, padding: Math.max(8, Math.round(sizePx * 0.6)), rounded: Math.max(10, Math.round(sizePx * 0.45)) }) }));
     }
     if (digitalStyle === "sevenSegment") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -249,7 +251,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
                 paddingLeft: separatorPadding,
                 paddingRight: separatorPadding
             }, children: [_jsx("span", { className: "rounded-full bg-red-500/85", style: { width: dotSize, height: dotSize } }), _jsx("span", { className: "rounded-full bg-red-500/85", style: { width: dotSize, height: dotSize } })] }));
-        return (_jsxs("div", { className: cn("flex items-center", className), style: { gap: digitGap, ...style }, "aria-label": "Digital clock", children: [_jsx(SgSevenSegmentDigit, { value: hh.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: hh.charAt(1), size: digitSize, thickness: thickness }), _jsx(Colon, {}), _jsx(SgSevenSegmentDigit, { value: mm.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: mm.charAt(1), size: digitSize, thickness: thickness }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgSevenSegmentDigit, { value: ss.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: ss.charAt(1), size: digitSize, thickness: thickness })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod.toUpperCase() })) : null] }));
+        return (_jsxs("div", { className: cn("flex items-center", className), style: { gap: digitGap, ...style }, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgSevenSegmentDigit, { value: hh.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: hh.charAt(1), size: digitSize, thickness: thickness }), _jsx(Colon, {}), _jsx(SgSevenSegmentDigit, { value: mm.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: mm.charAt(1), size: digitSize, thickness: thickness }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgSevenSegmentDigit, { value: ss.charAt(0), size: digitSize, thickness: thickness }), _jsx(SgSevenSegmentDigit, { value: ss.charAt(1), size: digitSize, thickness: thickness })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod.toUpperCase() })) : null] }));
     }
     if (digitalStyle === "segment") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -267,9 +269,9 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
                     ? 42
                     : 26;
         const gap = Math.max(2, Math.round(digitSize * 0.18));
-        return (_jsxs("div", { className: cn("flex items-end", className), style: { gap, ...style }, "aria-label": "Digital clock", children: [_jsx(SgSegmentDigit, { value: hh.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: hh.charAt(1), size: digitSize }), _jsx(SgSegmentDigit, { value: ":", size: digitSize }), _jsx(SgSegmentDigit, { value: mm.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: mm.charAt(1), size: digitSize }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(SgSegmentDigit, { value: ":", size: digitSize }), _jsx(SgSegmentDigit, { value: ss.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: ss.charAt(1), size: digitSize })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+        return (_jsxs("div", { className: cn("flex items-end", className), style: { gap, ...style }, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: [_jsx(SgSegmentDigit, { value: hh.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: hh.charAt(1), size: digitSize }), _jsx(SgSegmentDigit, { value: ":", size: digitSize }), _jsx(SgSegmentDigit, { value: mm.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: mm.charAt(1), size: digitSize }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(SgSegmentDigit, { value: ":", size: digitSize }), _jsx(SgSegmentDigit, { value: ss.charAt(0), size: digitSize }), _jsx(SgSegmentDigit, { value: ss.charAt(1), size: digitSize })] })) : null, 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, ...style }, children: [text, format === "12h" && dayPeriod ? (_jsx("span", { className: "ml-2 align-top text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+    return (_jsxs("div", { className: cn("font-mono tabular-nums", classSize, className), style: { ...fontSize, ...style }, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), 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 i18n = useComponentsI18n();

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

@@ -9,6 +9,7 @@ export type SgClockThemePickerProps = {
     previewSize?: number;
     searchable?: boolean;
     fallbackThemeId?: string;
+    defaultOpen?: boolean;
 };
-export declare function SgClockThemePicker({ value, onChange, label, placeholder, className, filter, previewSize, searchable, fallbackThemeId }: SgClockThemePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SgClockThemePicker({ value, onChange, label: labelProp, placeholder: placeholderProp, className, filter, previewSize, searchable, fallbackThemeId, defaultOpen }: SgClockThemePickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgClockThemePicker.d.ts.map

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

@@ -1 +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,2CAoJzB"}
+{"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;AAW5C,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;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,MAAM,EACN,WAAgB,EAChB,UAAiB,EACjB,eAA2B,EAC3B,WAAmB,EACpB,EAAE,uBAAuB,2CA6JzB"}

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

@@ -3,33 +3,31 @@ 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 { filterClockThemes, resolveClockThemeSelection } from "./search";
 import { SgAutocomplete } from "../../../inputs/SgAutocomplete";
+import { t, useComponentsI18n } from "../../../i18n";
 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" }) {
+export function SgClockThemePicker({ value, onChange, label: labelProp, placeholder: placeholderProp, className, filter, previewSize = 56, searchable = true, fallbackThemeId = "classic", defaultOpen = false }) {
+    const i18n = useComponentsI18n();
+    const label = labelProp ?? t(i18n, "components.gadgets.clock.theme");
+    const placeholder = placeholderProp ?? t(i18n, "components.gadgets.clock.selectTheme");
     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 popupId = React.useId();
+    const [open, setOpen] = React.useState(defaultOpen);
     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 currentTheme = React.useMemo(() => resolveClockThemeSelection({
+        resolver,
+        allThemes: all,
+        value,
+        fallbackThemeId
+    }), [resolver, value, all, fallbackThemeId]);
+    const filtered = React.useMemo(() => filterClockThemes(all, q), [all, q]);
     const rootRef = React.useRef(null);
     React.useEffect(() => {
         if (!open)
@@ -44,28 +42,25 @@ export function SgClockThemePicker({ value, onChange, label = "Theme", placehold
         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-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2 text-left text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-sm", "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [currentTheme ? (_jsx("div", { className: "text-[rgb(var(--sg-text,var(--sg-fg)))]", children: _jsx(SgClockThemePreview, { theme: currentTheme, size: previewSize }) })) : (_jsx("div", { className: "h-[56px] w-[56px] rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]" })), _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-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg"), 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) => ({
+    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), "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": popupId, className: cn("w-full rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2 text-left text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-sm", "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [currentTheme ? (_jsx("div", { className: "text-[rgb(var(--sg-text,var(--sg-fg)))]", children: _jsx(SgClockThemePreview, { theme: currentTheme, size: previewSize }) })) : (_jsx("div", { className: "h-[56px] w-[56px] rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]" })), _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", { id: popupId, role: "listbox", className: cn("absolute z-50 mt-2 w-full overflow-hidden rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg"), children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(SgAutocomplete, { value: q, onChange: setQ, id: "sg-clock-theme-search", label: t(i18n, "components.gadgets.clock.searchTheme"), placeholder: t(i18n, "components.gadgets.clock.searchThemePlaceholder"), openOnFocus: true, showDropDownButton: true, clearOnSelect: true, minLengthForSearch: 0, source: (query) => {
+                                const items = filterClockThemes(all, query ?? "").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));
+                                return items;
                             }, 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);
+                            } }) })), _jsx("div", { className: "max-h-80 overflow-auto p-2", children: filtered.length === 0 ? (_jsx("div", { className: "p-3 text-sm opacity-60", children: t(i18n, "components.gadgets.clock.noThemesFound") })) : (_jsx("div", { className: "space-y-1", children: filtered.map((themeOption) => {
+                                const active = themeOption.id === value;
+                                return (_jsx("button", { type: "button", role: "option", "aria-selected": active, onClick: () => {
+                                        onChange(themeOption.id);
                                         setOpen(false);
                                     }, className: cn("w-full rounded-lg p-2 text-left transition", active
                                         ? "bg-[rgb(var(--sg-primary))] text-[rgb(var(--sg-primary-contrast,var(--sg-bg)))]"
-                                        : "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn(active ? "text-[rgb(var(--sg-primary-contrast,var(--sg-bg)))]" : "text-[rgb(var(--sg-text,var(--sg-fg)))]"), 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));
+                                        : "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn(active ? "text-[rgb(var(--sg-primary-contrast,var(--sg-bg)))]" : "text-[rgb(var(--sg-text,var(--sg-fg)))]"), children: _jsx(SgClockThemePreview, { theme: themeOption, size: 44 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: themeOption.label ?? themeOption.id }), _jsx("div", { className: cn("truncate text-xs", active ? "opacity-80" : "opacity-60"), children: themeOption.id })] }), active ? _jsx("div", { className: "text-xs opacity-80", children: t(i18n, "components.gadgets.clock.activeTheme") }) : null] }) }, themeOption.id));
                             }) })) })] }))] }));
 }

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

@@ -0,0 +1,9 @@
+import type { SgClockTheme, SgClockThemeResolver } from "./types";
+export declare function filterClockThemes(themes: SgClockTheme[], query: string): SgClockTheme[];
+export declare function resolveClockThemeSelection(params: {
+    resolver?: SgClockThemeResolver | null;
+    allThemes: SgClockTheme[];
+    value: string;
+    fallbackThemeId: string;
+}): SgClockTheme | null;
+//# sourceMappingURL=search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,kBAOtE;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE;IACjD,QAAQ,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACvC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;CACzB,uBAIA"}

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

@@ -0,0 +1,15 @@
+export function filterClockThemes(themes, query) {
+    const s = query.trim().toLowerCase();
+    if (!s)
+        return themes;
+    return themes.filter((theme) => {
+        const hay = `${theme.id} ${theme.label ?? ""} ${(theme.tags ?? []).join(" ")}`.toLowerCase();
+        return hay.includes(s);
+    });
+}
+export function resolveClockThemeSelection(params) {
+    const found = params.resolver?.resolve(params.value) ?? params.allThemes.find((t) => t.id === params.value) ?? null;
+    if (found)
+        return found;
+    return params.resolver?.resolve(params.fallbackThemeId) ?? params.allThemes.find((t) => t.id === params.fallbackThemeId) ?? null;
+}

package/dist/gadgets/gauge/SgLinearGauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgLinearGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgLinearGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,UAAU,GACV,mBAAmB,GACnB,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEjG,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAEpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAogBhE;yBApgBe,aAAa"}
+{"version":3,"file":"SgLinearGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgLinearGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,UAAU,GACV,mBAAmB,GACnB,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEjG,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAEpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAkhBhE;yBAlhBe,aAAa"}

package/dist/gadgets/gauge/SgLinearGauge.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { t, useComponentsI18n } from "../../i18n";
+import { clampGaugeValue, clientPointToLinearGaugeValue, pointToLinearGaugeValue, ratioToGaugeValue, valueToGaugeRatio } from "./math";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
 function toNumber(value, fallback) {
     return Number.isFinite(value) ? value : fallback;
 }
 const MAIN_POINTER_ID = "__sg-linear-main-pointer__";
 export function SgLinearGauge(props) {
-    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], orientation = "horizontal", isAxisInversed = false, showPrimaryPointer = true, primaryPointerShape = "triangle", primaryPointerColor = "hsl(var(--primary))", primaryPointerSize = 11, primaryPointerDraggable = false, barPointer = true, barColor = "hsl(var(--primary))", barThickness = 8, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", axisThickness = 10, width = orientation === "horizontal" ? 360 : 140, height = orientation === "horizontal" ? 120 : 360, animate = true, animationDuration = 350, className, style, ariaLabel = "Linear gauge" } = props;
+    const i18n = useComponentsI18n();
+    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], orientation = "horizontal", isAxisInversed = false, showPrimaryPointer = true, primaryPointerShape = "triangle", primaryPointerColor = "hsl(var(--primary))", primaryPointerSize = 11, primaryPointerDraggable = false, barPointer = true, barColor = "hsl(var(--primary))", barThickness = 8, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", axisThickness = 10, width = orientation === "horizontal" ? 360 : 140, height = orientation === "horizontal" ? 120 : 360, animate = true, animationDuration = 350, className, style, ariaLabel } = props;
+    const resolvedAriaLabel = ariaLabel ?? t(i18n, "components.gadgets.gauge.linearAria");
     const safeMin = toNumber(min, 0);
     const safeMax = toNumber(max, 100);
     const hasRange = safeMax > safeMin;
@@ -20,9 +21,9 @@ export function SgLinearGauge(props) {
     const [innerValue, setInnerValue] = React.useState(defaultValue);
     const isControlled = value !== undefined;
     const currentValueRaw = isControlled ? value : innerValue;
-    const currentValue = clamp(currentValueRaw, safeMin, safeMax);
+    const currentValue = clampGaugeValue(currentValueRaw, safeMin, safeMax);
     const setMainValue = React.useCallback((next) => {
-        const clamped = clamp(next, safeMin, safeMax);
+        const clamped = clampGaugeValue(next, safeMin, safeMax);
         if (!isControlled)
             setInnerValue(clamped);
         onValueChange?.(clamped);
@@ -30,7 +31,7 @@ export function SgLinearGauge(props) {
     React.useEffect(() => {
         if (isControlled)
             return;
-        setInnerValue((prev) => clamp(prev, safeMin, safeMax));
+        setInnerValue((prev) => clampGaugeValue(prev, safeMin, safeMax));
     }, [isControlled, safeMin, safeMax]);
     const pointerIds = React.useMemo(() => pointers.map((pointer, index) => pointer.id ?? `sg-linear-pointer-${index}`), [pointers]);
     const [dragPointerValues, setDragPointerValues] = React.useState({});
@@ -43,7 +44,7 @@ export function SgLinearGauge(props) {
                 if (!pointer)
                     continue;
                 const pointerId = pointerIds[i] ?? `sg-linear-pointer-${i}`;
-                const clamped = clamp(pointer.value, safeMin, safeMax);
+                const clamped = clampGaugeValue(pointer.value, safeMin, safeMax);
                 if (next[pointerId] !== clamped) {
                     next[pointerId] = clamped;
                     changed = true;
@@ -71,13 +72,10 @@ export function SgLinearGauge(props) {
         ? { x: totalWidth - 16, y: totalHeight - labelSpace - tickSpace - 4 }
         : { x: totalWidth - labelSpace - tickSpace - 4, y: 16 };
     const valueToRatio = React.useCallback((raw) => {
-        const normalized = clamp((raw - safeMin) / span, 0, 1);
-        return isAxisInversed ? 1 - normalized : normalized;
+        return valueToGaugeRatio(raw, safeMin, safeMax, isAxisInversed);
     }, [isAxisInversed, safeMin, span]);
     const ratioToValue = React.useCallback((ratioRaw) => {
-        const ratio = clamp(ratioRaw, 0, 1);
-        const normalized = isAxisInversed ? 1 - ratio : ratio;
-        return safeMin + normalized * span;
+        return ratioToGaugeValue(ratioRaw, safeMin, safeMax, isAxisInversed);
     }, [isAxisInversed, safeMin, span]);
     const valueToPoint = React.useCallback((raw) => {
         const ratio = valueToRatio(raw);
@@ -86,12 +84,16 @@ export function SgLinearGauge(props) {
         return { x, y };
     }, [axisEnd.x, axisEnd.y, axisStart.x, axisStart.y, valueToRatio]);
     const pointToValue = React.useCallback((x, y) => {
-        if (orientation === "horizontal") {
-            const ratio = (x - axisStart.x) / (axisEnd.x - axisStart.x || 1);
-            return ratioToValue(ratio);
-        }
-        const ratio = (y - axisStart.y) / (axisEnd.y - axisStart.y || 1);
-        return ratioToValue(ratio);
+        return pointToLinearGaugeValue({
+            x,
+            y,
+            axisStart,
+            axisEnd,
+            orientation,
+            min: safeMin,
+            max: safeMax,
+            isAxisInversed
+        });
     }, [axisEnd.x, axisEnd.y, axisStart.x, axisStart.y, orientation, ratioToValue]);
     const pointerList = React.useMemo(() => {
         const list = [];
@@ -120,7 +122,7 @@ export function SgLinearGauge(props) {
                 id: pointerId,
                 isPrimary: false,
                 pointer,
-                value: clamp(dragValue ?? pointer.value, safeMin, safeMax)
+                value: clampGaugeValue(dragValue ?? pointer.value, safeMin, safeMax)
             });
         }
         return list;
@@ -154,11 +156,21 @@ export function SgLinearGauge(props) {
             if (!svg || !pointerMeta)
                 return;
             const rect = svg.getBoundingClientRect();
-            if (rect.width <= 0 || rect.height <= 0)
+            const next = clientPointToLinearGaugeValue({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                rect,
+                totalWidth,
+                totalHeight,
+                axisStart,
+                axisEnd,
+                orientation,
+                min: safeMin,
+                max: safeMax,
+                isAxisInversed
+            });
+            if (next === null)
                 return;
-            const localX = ((event.clientX - rect.left) / rect.width) * totalWidth;
-            const localY = ((event.clientY - rect.top) / rect.height) * totalHeight;
-            const next = clamp(pointToValue(localX, localY), safeMin, safeMax);
             if (pointerMeta.isPrimary) {
                 setMainValue(next);
             }
@@ -185,7 +197,6 @@ export function SgLinearGauge(props) {
     }, [
         draggingPointerId,
         onPointerValueChange,
-        pointToValue,
         pointerMap,
         safeMax,
         safeMin,
@@ -205,9 +216,9 @@ export function SgLinearGauge(props) {
         : {};
     const primaryBarEnd = valueToPoint(currentValue);
     const primaryBarStart = valueToPoint(safeMin);
-    return (_jsx("div", { className: cn("inline-flex select-none", className), role: "meter", "aria-label": ariaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: _jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, className: "overflow-visible", children: [_jsx("line", { x1: axisStart.x, y1: axisStart.y, x2: axisEnd.x, y2: axisEnd.y, stroke: axisColor, strokeLinecap: "round", strokeWidth: axisThickness }), ranges.map((range, index) => {
-                    const start = clamp(Math.min(range.start, range.end), safeMin, safeMax);
-                    const end = clamp(Math.max(range.start, range.end), safeMin, safeMax);
+    return (_jsx("div", { className: cn("inline-flex select-none", className), role: "meter", "aria-label": resolvedAriaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: _jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, className: "overflow-visible", children: [_jsx("line", { x1: axisStart.x, y1: axisStart.y, x2: axisEnd.x, y2: axisEnd.y, stroke: axisColor, strokeLinecap: "round", strokeWidth: axisThickness }), ranges.map((range, index) => {
+                    const start = clampGaugeValue(Math.min(range.start, range.end), safeMin, safeMax);
+                    const end = clampGaugeValue(Math.max(range.start, range.end), safeMin, safeMax);
                     const p1 = valueToPoint(start);
                     const p2 = valueToPoint(end);
                     return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, stroke: range.color ?? "hsl(var(--primary))", strokeLinecap: "round", strokeWidth: range.thickness ?? axisThickness + 2, strokeOpacity: range.opacity ?? 0.55 }, `range-${index}`));

package/dist/gadgets/gauge/SgRadialGauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgRadialGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgRadialGauge.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgRadialGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgRadialGauge.tsx"],"names":[],"mappings":"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"}

package/dist/gadgets/gauge/SgRadialGauge.js

@@ -1,16 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { t, useComponentsI18n } from "../../i18n";
+import { angleToRadialGaugeValue, clampGaugeValue, clientPointToRadialGaugeValue, normalizeAngle, normalizeGaugeRange, ratioToGaugeValue, valueToGaugeRatio } from "./math";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
-function normalizeAngle(angle) {
-    const normalized = angle % 360;
-    return normalized < 0 ? normalized + 360 : normalized;
-}
 function toSweep(startAngle, endAngle) {
     const start = normalizeAngle(startAngle);
     const end = normalizeAngle(endAngle);
@@ -35,16 +30,19 @@ function arcPath(cx, cy, radius, startAngle, endAngle) {
 }
 const MAIN_POINTER_ID = "__sg-radial-main-pointer__";
 export function SgRadialGauge(props) {
-    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], annotations = [], startAngle = 135, endAngle = 45, isAxisInversed = false, showPrimaryPointer = true, primaryPointerType = "needle", primaryPointerColor = "hsl(var(--primary))", primaryPointerWidth = 3, primaryPointerSize = 12, primaryPointerShape = "circle", primaryPointerDraggable = false, primaryPointerLabel, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", ringThickness, axisWidth = 14, radiusFactor = 0.9, centerContent, width = 300, height = 300, animate = true, animationDuration = 350, className, style, ariaLabel = "Radial gauge" } = props;
-    const safeMin = Number.isFinite(min) ? min : 0;
-    const safeMax = Number.isFinite(max) && max > safeMin ? max : safeMin + 100;
-    const span = safeMax - safeMin;
+    const i18n = useComponentsI18n();
+    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], annotations = [], startAngle = 135, endAngle = 45, isAxisInversed = false, showPrimaryPointer = true, primaryPointerType = "needle", primaryPointerColor = "hsl(var(--primary))", primaryPointerWidth = 3, primaryPointerSize = 12, primaryPointerShape = "circle", primaryPointerDraggable = false, primaryPointerLabel, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", ringThickness, axisWidth = 14, radiusFactor = 0.9, centerContent, width = 300, height = 300, animate = true, animationDuration = 350, className, style, ariaLabel } = props;
+    const resolvedAriaLabel = ariaLabel ?? t(i18n, "components.gadgets.gauge.radialAria");
+    const range = React.useMemo(() => normalizeGaugeRange(min, max), [min, max]);
+    const safeMin = range.min;
+    const safeMax = range.max;
+    const span = range.span;
     const [innerValue, setInnerValue] = React.useState(defaultValue);
     const isControlled = value !== undefined;
     const currentValueRaw = isControlled ? value : innerValue;
-    const currentValue = clamp(currentValueRaw, safeMin, safeMax);
+    const currentValue = clampGaugeValue(currentValueRaw, safeMin, safeMax);
     const setMainValue = React.useCallback((next) => {
-        const clamped = clamp(next, safeMin, safeMax);
+        const clamped = clampGaugeValue(next, safeMin, safeMax);
         if (!isControlled)
             setInnerValue(clamped);
         onValueChange?.(clamped);
@@ -52,7 +50,7 @@ export function SgRadialGauge(props) {
     React.useEffect(() => {
         if (isControlled)
             return;
-        setInnerValue((prev) => clamp(prev, safeMin, safeMax));
+        setInnerValue((prev) => clampGaugeValue(prev, safeMin, safeMax));
     }, [isControlled, safeMin, safeMax]);
     const pointerIds = React.useMemo(() => pointers.map((pointer, index) => pointer.id ?? `sg-radial-pointer-${index}`), [pointers]);
     const [dragPointerValues, setDragPointerValues] = React.useState({});
@@ -65,7 +63,7 @@ export function SgRadialGauge(props) {
                 if (!pointer)
                     continue;
                 const pointerId = pointerIds[i] ?? `sg-radial-pointer-${i}`;
-                const clamped = clamp(pointer.value, safeMin, safeMax);
+                const clamped = clampGaugeValue(pointer.value, safeMin, safeMax);
                 if (next[pointerId] !== clamped) {
                     next[pointerId] = clamped;
                     changed = true;
@@ -89,27 +87,27 @@ export function SgRadialGauge(props) {
     const safeRadiusFactorRaw = Number.isFinite(radiusFactor) ? radiusFactor : 0.9;
     const safeRadiusFactor = Math.max(0.1, safeRadiusFactorRaw);
     const availableRadius = Math.max(8, Math.min(totalWidth, totalHeight) / 2 - safeAxisWidth / 2 - 6);
-    const baseRadius = clamp(availableRadius * safeRadiusFactor, 8, availableRadius);
+    const baseRadius = clampGaugeValue(availableRadius * safeRadiusFactor, 8, availableRadius);
     const sweep = React.useMemo(() => toSweep(startAngle, endAngle), [endAngle, startAngle]);
     const valueToRatio = React.useCallback((raw) => {
-        const normalized = clamp((raw - safeMin) / span, 0, 1);
-        return isAxisInversed ? 1 - normalized : normalized;
+        return valueToGaugeRatio(raw, safeMin, safeMax, isAxisInversed);
     }, [isAxisInversed, safeMin, span]);
     const ratioToValue = React.useCallback((ratioRaw) => {
-        const ratio = clamp(ratioRaw, 0, 1);
-        const normalized = isAxisInversed ? 1 - ratio : ratio;
-        return safeMin + normalized * span;
+        return ratioToGaugeValue(ratioRaw, safeMin, safeMax, isAxisInversed);
     }, [isAxisInversed, safeMin, span]);
     const valueToAngle = React.useCallback((raw) => {
         const ratio = valueToRatio(raw);
         return startAngle + sweep * ratio;
     }, [startAngle, sweep, valueToRatio]);
     const angleToValue = React.useCallback((rawAngle) => {
-        const start = normalizeAngle(startAngle);
-        const target = normalizeAngle(rawAngle);
-        const distance = (target - start + 360) % 360;
-        const ratio = clamp(distance / sweep, 0, 1);
-        return ratioToValue(ratio);
+        return angleToRadialGaugeValue({
+            rawAngle,
+            startAngle,
+            sweep,
+            min: safeMin,
+            max: safeMax,
+            isAxisInversed
+        });
     }, [ratioToValue, startAngle, sweep]);
     const majorCount = Math.max(1, Math.floor(majorTickCount));
     const minorCount = Math.max(0, Math.floor(minorTicksPerInterval));
@@ -143,7 +141,7 @@ export function SgRadialGauge(props) {
                 id,
                 isPrimary: false,
                 pointer,
-                value: clamp(dragValue ?? pointer.value, safeMin, safeMax)
+                value: clampGaugeValue(dragValue ?? pointer.value, safeMin, safeMax)
             });
         }
         return list;
@@ -180,12 +178,22 @@ export function SgRadialGauge(props) {
             if (!svg || !pointerMeta)
                 return;
             const rect = svg.getBoundingClientRect();
-            if (rect.width <= 0 || rect.height <= 0)
+            const next = clientPointToRadialGaugeValue({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                rect,
+                totalWidth,
+                totalHeight,
+                cx,
+                cy,
+                startAngle,
+                sweep,
+                min: safeMin,
+                max: safeMax,
+                isAxisInversed
+            });
+            if (next === null)
                 return;
-            const localX = ((event.clientX - rect.left) / rect.width) * totalWidth;
-            const localY = ((event.clientY - rect.top) / rect.height) * totalHeight;
-            const angle = normalizeAngle((Math.atan2(localY - cy, localX - cx) * 180) / Math.PI);
-            const next = clamp(angleToValue(angle), safeMin, safeMax);
             if (pointerMeta.isPrimary) {
                 setMainValue(next);
             }
@@ -210,7 +218,6 @@ export function SgRadialGauge(props) {
             window.removeEventListener("pointercancel", onEnd);
         };
     }, [
-        angleToValue,
         cx,
         cy,
         draggingPointerId,
@@ -232,10 +239,10 @@ export function SgRadialGauge(props) {
     const animatedStyle = animate
         ? { transition: `all ${animationDuration}ms ease-out` }
         : {};
-    const centerNode = centerContent ?? (_jsxs("div", { className: "pointer-events-none select-none text-center", children: [_jsx("div", { className: "text-xs uppercase text-muted-foreground", children: "Value" }), _jsx("div", { className: "text-xl font-semibold text-foreground", children: Math.round(currentValue) })] }));
-    return (_jsxs("div", { className: cn("relative inline-flex select-none", className), role: "meter", "aria-label": ariaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: [_jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, children: [_jsx("path", { d: arcPath(cx, cy, baseRadius, startAngle, endAngle), fill: "none", stroke: axisColor, strokeWidth: safeAxisWidth, strokeLinecap: "round" }), ranges.map((range, index) => {
-                        const start = clamp(Math.min(range.start, range.end), safeMin, safeMax);
-                        const end = clamp(Math.max(range.start, range.end), safeMin, safeMax);
+    const centerNode = centerContent ?? (_jsxs("div", { className: "pointer-events-none select-none text-center", children: [_jsx("div", { className: "text-xs uppercase text-muted-foreground", children: t(i18n, "components.gadgets.gauge.value") }), _jsx("div", { className: "text-xl font-semibold text-foreground", children: Math.round(currentValue) })] }));
+    return (_jsxs("div", { className: cn("relative inline-flex select-none", className), role: "meter", "aria-label": resolvedAriaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: [_jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, children: [_jsx("path", { d: arcPath(cx, cy, baseRadius, startAngle, endAngle), fill: "none", stroke: axisColor, strokeWidth: safeAxisWidth, strokeLinecap: "round" }), ranges.map((range, index) => {
+                        const start = clampGaugeValue(Math.min(range.start, range.end), safeMin, safeMax);
+                        const end = clampGaugeValue(Math.max(range.start, range.end), safeMin, safeMax);
                         const startA = valueToAngle(start);
                         const endA = valueToAngle(end);
                         return (_jsx("path", { d: arcPath(cx, cy, baseRadius, startA, endA), fill: "none", stroke: range.color ?? "hsl(var(--primary))", strokeWidth: range.width ?? safeAxisWidth + 2, strokeOpacity: range.opacity ?? 0.55, strokeLinecap: "round" }, `range-${index}`));