@seedgrid/fe-components 2026.3.4 → 2026.3.9

package/dist/buttons/SgFloatActionButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 export type FABPosition = "left-top" | "left-center" | "left-bottom" | "center-top" | "center-bottom" | "right-top" | "right-center" | "right-bottom";
 export type FABSeverity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger" | "plain";
-export type FABVariant = FABSeverity;
 export type FABSize = "sm" | "md" | "lg";
 export type FABShape = "circle" | "rounded" | "square";
 export type FABElevation = "none" | "sm" | "md" | "lg";
@@ -13,7 +12,7 @@ export type SgFABAction = {
     label?: string;
     onClick?: () => void;
     severity?: FABSeverity;
-    variant?: FABSeverity;
+    floatActionButtonStyle?: FABSeverity;
     disabled?: boolean;
 };
 export type SgFloatActionButtonProps = {
@@ -30,7 +29,7 @@ export type SgFloatActionButtonProps = {
     enableDragDrop?: boolean;
     dragId?: string;
     severity?: FABSeverity;
-    variant?: FABSeverity;
+    floatActionButtonStyle?: FABSeverity;
     color?: string;
     size?: FABSize;
     shape?: FABShape;

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

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

package/dist/buttons/SgFloatActionButton.js

@@ -214,7 +214,7 @@ export function SgFloatActionButton(props) {
     const i18n = useComponentsI18n();
     const hasEnvironmentProvider = useHasSgEnvironmentProvider();
     const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
-    const { hint, hintDelay = 300, icon, activeIcon, position = "right-bottom", offset, enableDragDrop = false, dragId, severity = "primary", variant, color, size = "md", shape = "circle", elevation = "md", disabled = false, loading = false, autoHideOnScroll = false, hideDirection = "down", animation = "scale", animationOn = "mount", animationDuration = 200, type = "linear", radius, transitionDelay = 30, actions, onClick, className, style, zIndex = 50, absolute = false, } = props;
+    const { hint, hintDelay = 300, icon, activeIcon, position = "right-bottom", offset, enableDragDrop = false, dragId, severity = "primary", floatActionButtonStyle, color, size = "md", shape = "circle", elevation = "md", disabled = false, loading = false, autoHideOnScroll = false, hideDirection = "down", animation = "scale", animationOn = "mount", animationDuration = 200, type = "linear", radius, transitionDelay = 30, actions, onClick, className, style, zIndex = 50, absolute = false, } = props;
     const hintPos = props.hintPosition ?? DEFAULT_HINT[position];
     const dir = props.direction ?? DEFAULT_DIR[position];
     const [mounted, setMounted] = React.useState(false);
@@ -512,7 +512,7 @@ export function SgFloatActionButton(props) {
         dragMoved.current = false;
     }, [clearStoredPosition, dragId]);
     /* colors */
-    const resolvedSeverity = severity ?? variant ?? "primary";
+    const resolvedSeverity = severity ?? floatActionButtonStyle ?? "primary";
     const c = COLORS[resolvedSeverity];
     const bg = color ?? c.bg;
     const fg = color ? "white" : c.fg;
@@ -629,7 +629,7 @@ export function SgFloatActionButton(props) {
             handleContextMenu(event);
         }, children: [animation === "pulse" && (_jsx("style", { children: `@keyframes sg-fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}` })), actions?.map((a, i) => {
                 const p = actPos[i] ?? { x: 0, y: 0 };
-                const actionSeverity = a.severity ?? a.variant ?? "plain";
+                const actionSeverity = a.severity ?? a.floatActionButtonStyle ?? "plain";
                 const ac = COLORS[actionSeverity];
                 return (_jsx("div", { className: "absolute", style: {
                         transform: open ? `translate(${p.x}px, ${p.y}px) scale(1)` : "translate(0,0) scale(0)",

package/dist/buttons/SgSplitButton.d.ts

@@ -26,6 +26,7 @@ export type SgSplitButtonProps = {
     items: SgSplitButtonItem[];
     customColors?: SgButtonCustomColors;
     className?: string;
+    style?: React.CSSProperties;
 };
 export declare const SgSplitButton: React.ForwardRefExoticComponent<SgSplitButtonProps & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1 +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,2FAiIzB,CAAC"}
+{"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;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAmBF,eAAO,MAAM,aAAa,2FAkIzB,CAAC"}

package/dist/buttons/SgSplitButton.js

@@ -5,7 +5,7 @@ import { SgButton } 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) => {
+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, style }, ref) => {
     const [open, setOpen] = React.useState(false);
     const containerRef = React.useRef(null);
     const menuRef = React.useRef(null);
@@ -50,6 +50,6 @@ export const SgSplitButton = React.forwardRef(({ label, leftIcon, severity = "pr
         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 left-0 top-full z-50 mt-1 ${s.menu} overflow-hidden rounded-lg shadow-lg bg-background text-foreground border border-border`, children: items.map((item, i) => (_jsxs(React.Fragment, { children: [item.separator && i > 0 ? (_jsx("div", { className: "my-0.5 border-t border-border" })) : null, _jsxs("button", { role: "menuitem", type: "button", disabled: item.disabled, className: `flex w-full items-center gap-2 ${s.item} ${s.text} transition-colors hover:bg-muted/60 disabled:opacity-50 disabled:cursor-not-allowed`, onClick: () => handleItemClick(item), children: [item.icon ? _jsx("span", { className: `shrink-0 ${s.iconSize}`, children: item.icon }) : null, _jsx("span", { children: item.label })] })] }, i))) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: `relative inline-flex ${className ?? ""}`, style: style, 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 left-0 top-full z-50 mt-1 ${s.menu} overflow-hidden rounded-lg shadow-lg bg-background text-foreground border border-border`, children: items.map((item, i) => (_jsxs(React.Fragment, { children: [item.separator && i > 0 ? (_jsx("div", { className: "my-0.5 border-t border-border" })) : null, _jsxs("button", { role: "menuitem", type: "button", disabled: item.disabled, className: `flex w-full items-center gap-2 ${s.item} ${s.text} transition-colors hover:bg-muted/60 disabled:opacity-50 disabled:cursor-not-allowed`, 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/commons/SgBadge.d.ts

@@ -22,7 +22,7 @@ export type SgBadgePartsClassName = {
 export type SgBadgeProps = {
     value?: React.ReactNode;
     severity?: SgBadgeSeverity;
-    variant?: SgBadgeVariant;
+    badgeStyle?: SgBadgeVariant;
     size?: SgBadgeSize;
     rounded?: boolean;
     dot?: boolean;
@@ -41,6 +41,7 @@ export type SgBadgeProps = {
     hint?: string;
     customColors?: SgBadgeCustomColors;
     className?: string;
+    style?: React.CSSProperties;
     partsClassName?: SgBadgePartsClassName;
     "aria-label"?: string;
 };

package/dist/commons/SgBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgBadge.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AA0HF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,kDAiHpD;yBAjHe,OAAO"}
+{"version":3,"file":"SgBadge.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AA0HF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,kDAmHpD;yBAnHe,OAAO"}

package/dist/commons/SgBadge.js

@@ -108,11 +108,12 @@ function getDisplayValue(value, max, showZero) {
     return value ?? null;
 }
 export function SgBadge(props) {
-    const { value, severity = "primary", variant = "solid", size = "md", rounded = true, dot = false, pulse = false, max, showZero = true, leftIcon, rightIcon, removable = false, onRemove, removeAriaLabel = "Remover", autoRemove = false, onClick, disabled, title, hint, customColors, className, partsClassName, ...aria } = props;
+    const { value, severity = "primary", badgeStyle = "solid", size = "md", rounded = true, dot = false, pulse = false, max, showZero = true, leftIcon, rightIcon, removable = false, onRemove, removeAriaLabel = "Remover", autoRemove = false, onClick, disabled, title, hint, customColors, className, style, partsClassName, ...aria } = props;
     const displayValue = getDisplayValue(value, max, showZero);
     const [autoRemoved, setAutoRemoved] = React.useState(false);
+    const cssVars = buildVars(severity, customColors);
     if (dot) {
-        return (_jsxs("span", { title: hint ?? title, className: cn("relative inline-flex items-center justify-center", partsClassName?.dot, className), style: buildVars(severity, customColors), ...aria, children: [pulse ? (_jsx("span", { className: "absolute inline-flex size-3 rounded-full bg-[var(--sg-badge-bg)] opacity-75 animate-ping" })) : null, _jsx("span", { className: "inline-flex size-2.5 rounded-full bg-[var(--sg-badge-bg)]" })] }));
+        return (_jsxs("span", { title: hint ?? title, className: cn("relative inline-flex items-center justify-center", partsClassName?.dot, className), style: { ...cssVars, ...style }, ...aria, children: [pulse ? (_jsx("span", { className: "absolute inline-flex size-3 rounded-full bg-[var(--sg-badge-bg)] opacity-75 animate-ping" })) : null, _jsx("span", { className: "inline-flex size-2.5 rounded-full bg-[var(--sg-badge-bg)]" })] }));
     }
     if (autoRemoved)
         return null;
@@ -120,18 +121,18 @@ export function SgBadge(props) {
         return null;
     const isButton = typeof onClick === "function";
     const Tag = isButton ? "button" : "span";
-    const base = cn("inline-flex items-center gap-1.5 whitespace-nowrap font-medium", "transition-[color,background-color,border-color] duration-150", SIZE[size], rounded ? "rounded-full" : "rounded-md", variant === "solid"
+    const base = cn("inline-flex items-center gap-1.5 whitespace-nowrap font-medium", "transition-[color,background-color,border-color] duration-150", SIZE[size], rounded ? "rounded-full" : "rounded-md", badgeStyle === "solid"
         ? "bg-[var(--sg-badge-bg)] text-[var(--sg-badge-fg)] border border-[var(--sg-badge-border)]"
-        : variant === "soft"
+        : badgeStyle === "soft"
             ? "bg-[var(--sg-badge-soft-bg)] text-[var(--sg-badge-soft-fg)] border border-transparent"
-            : variant === "outline"
+            : badgeStyle === "outline"
                 ? "bg-transparent text-[var(--sg-badge-bg)] border border-[var(--sg-badge-border)]"
-                : "bg-transparent text-[var(--sg-badge-bg)] border border-transparent", variant === "ghost" || variant === "outline"
+                : "bg-transparent text-[var(--sg-badge-bg)] border border-transparent", badgeStyle === "ghost" || badgeStyle === "outline"
         ? "hover:bg-[var(--sg-badge-hover-bg)] hover:text-[var(--sg-badge-hover-fg)] hover:border-[var(--sg-badge-hover-border)]"
         : "", isButton
         ? cn("cursor-pointer select-none", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sg-badge-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background", disabled ? "pointer-events-none opacity-50" : "")
         : "", className, partsClassName?.container);
-    return (_jsxs(Tag, { type: isButton ? "button" : undefined, title: hint ?? title, onClick: disabled ? undefined : onClick, disabled: isButton ? disabled : undefined, style: buildVars(severity, customColors), className: base, role: isButton ? undefined : "status", ...aria, children: [leftIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: leftIcon }) : null, displayValue !== null ? _jsx("span", { className: cn("inline-flex items-center", partsClassName?.label), children: displayValue }) : null, rightIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: rightIcon }) : null, removable ? (_jsx("button", { type: "button", onClick: (e) => {
+    return (_jsxs(Tag, { type: isButton ? "button" : undefined, title: hint ?? title, onClick: disabled ? undefined : onClick, disabled: isButton ? disabled : undefined, style: { ...cssVars, ...style }, className: base, role: isButton ? undefined : "status", ...aria, children: [leftIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: leftIcon }) : null, displayValue !== null ? _jsx("span", { className: cn("inline-flex items-center", partsClassName?.label), children: displayValue }) : null, rightIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: rightIcon }) : null, removable ? (_jsx("button", { type: "button", onClick: (e) => {
                     e.stopPropagation();
                     if (autoRemove)
                         setAutoRemoved(true);

package/dist/commons/SgBadgeOverlay.d.ts

@@ -5,6 +5,7 @@ export type SgBadgeOverlayProps = {
     badge: React.ReactNode;
     placement?: SgBadgeOverlayPlacement;
     className?: string;
+    style?: React.CSSProperties;
 };
 export declare function SgBadgeOverlay(props: Readonly<SgBadgeOverlayProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SgBadgeOverlay {

package/dist/commons/SgBadgeOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgBadgeOverlay.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadgeOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,OAAO,GACP,MAAM,GACN,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmBlE;yBAnBe,cAAc"}
+{"version":3,"file":"SgBadgeOverlay.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadgeOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,OAAO,GACP,MAAM,GACN,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmBlE;yBAnBe,cAAc"}

package/dist/commons/SgBadgeOverlay.js

@@ -4,7 +4,7 @@ function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
 export function SgBadgeOverlay(props) {
-    const { children, badge, placement = "top-right", className } = props;
+    const { children, badge, placement = "top-right", className, style } = props;
     const pos = {
         "top-left": "left-0 top-0 -translate-x-1/3 -translate-y-1/3",
         "top-right": "right-0 top-0 translate-x-1/3 -translate-y-1/3",
@@ -15,6 +15,6 @@ export function SgBadgeOverlay(props) {
         top: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
         bottom: "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
     };
-    return (_jsxs("span", { className: cn("relative inline-flex", className), children: [children, _jsx("span", { className: cn("absolute", pos[placement]), children: badge })] }));
+    return (_jsxs("span", { className: cn("relative inline-flex", className), style: style, children: [children, _jsx("span", { className: cn("absolute", pos[placement]), children: badge })] }));
 }
 SgBadgeOverlay.displayName = "SgBadgeOverlay";

package/dist/commons/SgToastHost.d.ts

@@ -0,0 +1,17 @@
+import { type SgToasterProps } from "./SgToaster";
+export type SgToastHostProps = SgToasterProps;
+/**
+ * SgToastHost — marks the location where toasts will appear.
+ *
+ * Drop it anywhere in your tree. If multiple hosts exist simultaneously
+ * (e.g. one in a layout and one inside the page), the one deeper in the
+ * React tree (last to mount) takes priority. When that host unmounts the
+ * next most-recently-mounted host becomes active automatically.
+ *
+ * When any SgToastHost is present, SgToaster automatically defers to it
+ * and stops rendering, so both components can coexist without duplication.
+ *
+ * Accepts the same props as SgToaster (position, duration, richColors, etc.).
+ */
+export declare function SgToastHost(props: SgToastHostProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SgToastHost.d.ts.map

package/dist/commons/SgToastHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgToastHost.d.ts","sourceRoot":"","sources":["../../src/commons/SgToastHost.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAanF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAiClD"}

package/dist/commons/SgToastHost.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SgToaster, SgToasterHostContext } from "./SgToaster";
+import { registerHost, unregisterHost, getActiveHostId, subscribeHostRegistry, nextHostId } from "./sgToastHostRegistry";
+/**
+ * SgToastHost — marks the location where toasts will appear.
+ *
+ * Drop it anywhere in your tree. If multiple hosts exist simultaneously
+ * (e.g. one in a layout and one inside the page), the one deeper in the
+ * React tree (last to mount) takes priority. When that host unmounts the
+ * next most-recently-mounted host becomes active automatically.
+ *
+ * When any SgToastHost is present, SgToaster automatically defers to it
+ * and stops rendering, so both components can coexist without duplication.
+ *
+ * Accepts the same props as SgToaster (position, duration, richColors, etc.).
+ */
+export function SgToastHost(props) {
+    // Stable ID across re-renders, generated once per component instance.
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        idRef.current = nextHostId();
+    }
+    const id = idRef.current;
+    // Start as inactive to avoid SSR hydration mismatches.
+    const [isActive, setIsActive] = React.useState(false);
+    // Register on mount, unregister on unmount.
+    React.useEffect(() => {
+        registerHost(id);
+        setIsActive(getActiveHostId() === id);
+        return () => {
+            unregisterHost(id);
+        };
+    }, [id]);
+    // React to other hosts registering / unregistering.
+    React.useEffect(() => {
+        return subscribeHostRegistry(() => {
+            setIsActive(getActiveHostId() === id);
+        });
+    }, [id]);
+    if (!isActive)
+        return null;
+    return (_jsx(SgToasterHostContext.Provider, { value: true, children: _jsx(SgToaster, { ...props }) }));
+}

package/dist/commons/SgToaster.d.ts

@@ -16,5 +16,7 @@ export type SgToasterProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childre
     transparency?: number;
     customColors?: SgToasterCustomColors;
 };
-export declare function SgToaster(props: SgToasterProps): import("react/jsx-runtime").JSX.Element;
+/** @internal — used by SgToastHost to skip the host-presence check */
+export declare const SgToasterHostContext: React.Context<boolean>;
+export declare function SgToaster(props: SgToasterProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SgToaster.d.ts.map

package/dist/commons/SgToaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAMlF,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAgGF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkI9C"}
+{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAOlF,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAgGF,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,wBAA6B,CAAC;AAE/D,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDA6I9C"}

package/dist/commons/SgToaster.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { dismissSgToast, subscribeSgToasts } from "./SgToast";
+import { hasAnyHost, subscribeHostRegistry } from "./sgToastHostRegistry";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
@@ -91,11 +92,21 @@ function resolveToastColors(type, richColors, customColors) {
         fg: custom?.fg ?? base.fg
     };
 }
+/** @internal — used by SgToastHost to skip the host-presence check */
+export const SgToasterHostContext = React.createContext(false);
 export function SgToaster(props) {
+    const renderedByHost = React.useContext(SgToasterHostContext);
     const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, transparency = 0, customColors, className, style, ...rest } = props;
     const [toasts, setToasts] = React.useState([]);
     const timersRef = React.useRef({});
+    const [hostPresent, setHostPresent] = React.useState(() => !renderedByHost && hasAnyHost());
     React.useEffect(() => subscribeSgToasts(setToasts), []);
+    React.useEffect(() => {
+        if (renderedByHost)
+            return;
+        setHostPresent(hasAnyHost());
+        return subscribeHostRegistry(() => setHostPresent(hasAnyHost()));
+    }, [renderedByHost]);
     const visible = React.useMemo(() => {
         if (visibleToasts <= 0) {
             return [];
@@ -137,6 +148,8 @@ export function SgToaster(props) {
         };
     }, []);
     const toastOpacity = 1 - clampTransparency(transparency) / 100;
+    if (hostPresent)
+        return null;
     return (_jsx("div", { className: cn("pointer-events-none fixed z-[1100] flex max-h-screen w-full flex-col gap-2 p-4 sm:w-auto", POSITION_CLASS[position], className), style: style, ...rest, children: visible.map((toast) => {
             const typeColors = resolveToastColors(toast.type, richColors, customColors);
             const canClose = toast.closeButton ?? closeButton;

package/dist/commons/sgToastHostRegistry.d.ts

@@ -0,0 +1,7 @@
+export declare function registerHost(id: string): void;
+export declare function unregisterHost(id: string): void;
+export declare function getActiveHostId(): string | null;
+export declare function hasAnyHost(): boolean;
+export declare function subscribeHostRegistry(fn: () => void): () => void;
+export declare function nextHostId(): string;
+//# sourceMappingURL=sgToastHostRegistry.d.ts.map

package/dist/commons/sgToastHostRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgToastHostRegistry.d.ts","sourceRoot":"","sources":["../../src/commons/sgToastHostRegistry.ts"],"names":[],"mappings":"AAeA,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,QAKtC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,QAMxC;AAED,wBAAgB,eAAe,IAAI,MAAM,GAAG,IAAI,CAE/C;AAED,wBAAgB,UAAU,IAAI,OAAO,CAEpC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKhE;AAED,wBAAgB,UAAU,IAAI,MAAM,CAGnC"}

package/dist/commons/sgToastHostRegistry.js

@@ -0,0 +1,41 @@
+// ---------------------------------------------------------------------------
+// Shared host registry — used by both SgToastHost and SgToaster.
+//
+// SgToastHost instances push/pop themselves onto this stack.
+// SgToaster subscribes: if the stack is non-empty it yields to the active host.
+// ---------------------------------------------------------------------------
+let _counter = 0;
+const _stack = [];
+const _listeners = new Set();
+function _notify() {
+    _listeners.forEach((fn) => fn());
+}
+export function registerHost(id) {
+    if (!_stack.includes(id)) {
+        _stack.push(id);
+        _notify();
+    }
+}
+export function unregisterHost(id) {
+    const i = _stack.indexOf(id);
+    if (i >= 0) {
+        _stack.splice(i, 1);
+        _notify();
+    }
+}
+export function getActiveHostId() {
+    return _stack[_stack.length - 1] ?? null;
+}
+export function hasAnyHost() {
+    return _stack.length > 0;
+}
+export function subscribeHostRegistry(fn) {
+    _listeners.add(fn);
+    return () => {
+        _listeners.delete(fn);
+    };
+}
+export function nextHostId() {
+    _counter += 1;
+    return `sg-toast-host-${_counter}`;
+}

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { SgClockTheme } from "./themes/types";
 export type SgClockProps = {
-    variant?: "digital" | "analog";
+    clockStyle?: "digital" | "analog";
     size?: "sm" | "md" | "lg" | number;
     initialServerTime?: string;
     timezone?: string;
@@ -13,6 +13,7 @@ export type SgClockProps = {
     themeId?: string;
     theme?: SgClockTheme;
     className?: string;
+    style?: React.CSSProperties;
     centerOverlay?: React.ReactNode;
 };
 export type SgClockDigitalStyle = "default" | "segment" | "roller3d" | "flip" | "fade" | "matrix" | "neon" | "discard";

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

@@ -1 +1 @@
-{"version":3,"file":"SgClock.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiDnD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,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,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,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;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AA4iBd,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA+C1C"}
+{"version":3,"file":"SgClock.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiDnD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,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,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AA8iBd,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAkD1C"}

package/dist/gadgets/clock/SgClock.js

@@ -196,7 +196,7 @@ function renderSegmentText(text, sizePx) {
     });
     return { width, height, nodes };
 }
-function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, centerOverlay }) {
+function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, style, centerOverlay }) {
     const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
     void providerTick;
     useSecondTick(!hasProvider);
@@ -211,9 +211,9 @@ 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, 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] }) }));
+    return (_jsx("div", { className: className, style: style, 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({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className }) {
+function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className, style }) {
     const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
     void providerTick;
     useSecondTick(!hasProvider);
@@ -257,7 +257,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
                 padding: `0 ${Math.round(sizePx * 0.4)}px`,
                 boxShadow: "0 .125em .3125em rgba(0,0,0,.25)",
             }, children: _jsx("span", { style: { fontSize: Math.round(sizePx * 0.9), color: "#edebeb", fontWeight: 700, lineHeight: 1 }, children: value }) }));
-        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "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": "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] }));
     }
     if (digitalStyle === "roller3d") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -274,7 +274,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, "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": "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] }));
     }
     if (digitalStyle === "fade") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -287,7 +287,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), "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": "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] }));
     }
     if (digitalStyle === "discard") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -312,27 +312,27 @@ 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("flex items-end gap-2", className), "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("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] }));
     }
     if (digitalStyle === "matrix") {
         const dotSize = Math.max(3, Math.round(sizePx * 0.32));
-        return (_jsx("div", { className: cn("flex items-center", className), "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": "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)) }) }));
     }
     if (digitalStyle === "neon") {
         const neonFont = Math.max(18, Math.round(sizePx * 1.35));
-        return (_jsx("div", { className: cn("flex items-center", className), "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": "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)) }) }));
     }
     if (digitalStyle === "segment") {
         const seg = renderSegmentText(text, sizePx);
-        return (_jsxs("div", { className: cn("flex items-end gap-2", className), "aria-label": "Digital clock", children: [_jsx("svg", { width: seg.width, height: seg.height, viewBox: `0 0 ${seg.width} ${seg.height}`, className: "block", children: seg.nodes }), format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+        return (_jsxs("div", { className: cn("flex items-end gap-2", className), style: style, "aria-label": "Digital clock", children: [_jsx("svg", { width: seg.width, height: seg.height, viewBox: `0 0 ${seg.width} ${seg.height}`, className: "block", children: seg.nodes }), format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
     }
-    return (_jsxs("div", { className: cn("font-mono tabular-nums", classSize, className), style: fontSize, children: [text, format === "12h" && dayPeriod ? (_jsx("span", { className: "ml-2 align-top text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
+    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] }));
 }
 export function SgClock(props) {
-    const { variant = "digital", size = "md", initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, centerOverlay } = props;
-    if (variant === "analog") {
+    const { clockStyle = "digital", size = "md", initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, style, centerOverlay } = props;
+    if (clockStyle === "analog") {
         const analogSize = typeof size === "number" ? size : size === "sm" ? 140 : size === "lg" ? 320 : 240;
-        return (_jsx(AnalogClock, { size: analogSize, initialServerTime: initialServerTime, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, centerOverlay: centerOverlay }));
+        return (_jsx(AnalogClock, { size: analogSize, initialServerTime: initialServerTime, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, style: style, centerOverlay: centerOverlay }));
     }
-    return (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className }));
+    return (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className, style: style }));
 }

package/dist/gadgets/string-animator/SgStringAnimator.d.ts

@@ -21,7 +21,7 @@ export type SgStringAnimatorProps = {
      * - "matrix": pontos em matriz LED (SgMatrixDigit)
      * @default "roller3d"
      */
-    style?: SgStringAnimatorStyle;
+    stringAnimatorStyle?: SgStringAnimatorStyle;
     /**
      * Velocidade de 1 (muito lento) a 100 (muito rapido).
      * Controla o intervalo de tempo entre a troca de cada caractere.

package/dist/gadgets/string-animator/SgStringAnimator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgStringAnimator.d.ts","sourceRoot":"","sources":["../../../src/gadgets/string-animator/SgStringAnimator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,eAAO,MAAM,kCAAkC,EAAE,MAAM,EAQtD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAC7B,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG;IAChC,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,uCAAuC;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,mGA2L5B,CAAC"}
+{"version":3,"file":"SgStringAnimator.d.ts","sourceRoot":"","sources":["../../../src/gadgets/string-animator/SgStringAnimator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,eAAO,MAAM,kCAAkC,EAAE,MAAM,EAQtD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAC7B,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG;IAChC,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,uCAAuC;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,mGA2L5B,CAAC"}

package/dist/gadgets/string-animator/SgStringAnimator.js

@@ -48,7 +48,7 @@ const GAP_BY_STYLE = {
  * <SgStringAnimator sourceString="LUCIANO" targetString={target} style="fade" autoStart />
  * <button onClick={() => setTarget("MARTA")}>Trocar</button>
  */
-export const SgStringAnimator = React.forwardRef(function SgStringAnimator({ sourceString, targetString, style = "roller3d", velocity = 50, emptyChar = " ", alignTo = "left", autoStart = false, fontSize = 32, charset = SG_STRING_ANIMATOR_DEFAULT_CHARSET, color, backgroundColor, className, }, ref) {
+export const SgStringAnimator = React.forwardRef(function SgStringAnimator({ sourceString, targetString, stringAnimatorStyle: style = "roller3d", velocity = 50, emptyChar = " ", alignTo = "left", autoStart = false, fontSize = 32, charset = SG_STRING_ANIMATOR_DEFAULT_CHARSET, color, backgroundColor, className, }, ref) {
     // Normalize emptyChar to a single character
     const safeEmpty = emptyChar.charAt(0) || " ";
     // Clamp velocity 1-100 and compute step delay:

package/dist/i18n/en-US.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../src/i18n/en-US.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmFhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../src/i18n/en-US.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkGhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/i18n/en-US.js

@@ -80,6 +80,21 @@ const enUS = {
     "components.actions.confirm": "Confirm",
     "components.rating.required": "Please provide a rating",
     "components.rating.cancel": "Cancel rating",
-    "components.radiogroup.cancel": "No option"
+    "components.radiogroup.cancel": "No option",
+    "components.checkboxgroup.checkAll": "Select all",
+    "components.orderlist.moveTop": "Move to top",
+    "components.orderlist.moveUp": "Move up",
+    "components.orderlist.moveDown": "Move down",
+    "components.orderlist.moveBottom": "Move to bottom",
+    "components.orderlist.empty": "No items available.",
+    "components.picklist.moveToTarget": "Move selected to target",
+    "components.picklist.moveAllToTarget": "Move all to target",
+    "components.picklist.moveToSource": "Move selected to source",
+    "components.picklist.moveAllToSource": "Move all to source",
+    "components.picklist.sourceHeader": "Source",
+    "components.picklist.targetHeader": "Target",
+    "components.picklist.sourceFilterPlaceholder": "Search source",
+    "components.picklist.targetFilterPlaceholder": "Search target",
+    "components.picklist.empty": "No items available."
 };
 export default enUS;

package/dist/i18n/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../src/i18n/es.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmF9B,CAAC;AAEF,eAAe,EAAE,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../src/i18n/es.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkG9B,CAAC;AAEF,eAAe,EAAE,CAAC"}