@seedgrid/fe-components 2026.11.4 → 2026.11.6

package/dist/buttons/SgButton.d.ts

@@ -14,7 +14,24 @@ export type SgButtonCustomColors = {
     activeBg?: string;
     ring?: string;
 };
-export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "disabled"> & {
+export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "disabled" | "onClick"> & {
+    /**
+     * Clique do botão. Pode ser síncrono ou assíncrono (`(event) => unknown`).
+     *
+     * - Síncrono (abrir modal, alternar painel): funciona como sempre, nada muda.
+     * - Se DEVOLVER uma Promise (`async () => { await salvar(); }` ou `() => salvar()`), o botão entra em loading
+     *   sozinho (spinner, desabilitado, aria-busy), ignora cliques até terminar (inclusive cliques seguidos antes do
+     *   re-render) e volta ao normal ao terminar ou falhar. Protege contra duplo clique e reenvio e ajuda na
+     *   idempotência da ação na tela (não substitui a chave de idempotência no servidor).
+     * - Cuidado: precisa DEVOLVER a Promise. `onClick={() => { salvar(); }}` (chaves sem return) NÃO protege.
+     * - Erro: o botão não engole o erro (sai do loading e relança como rejeição não tratada). Trate com try/catch
+     *   dentro do onClick e avise o usuário (ex.: `sgWhistle.error`).
+     * - Use async só quando a ação puder demorar ou falhar (salvar, enviar, pagar); ações instantâneas ficam síncronas.
+     * - A prop `loading` manual continua valendo e vence (loading efetivo = `loading` || Promise pendente).
+     *
+     * O retorno é `unknown` só para não quebrar handlers existentes de corpo-expressão (`() => lista.push(x)`).
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
     /** Quando false, desabilita o botão. Padrão: true. */
     enabled?: boolean;
     severity?: Severity;
@@ -26,11 +43,31 @@ export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     iconOnly?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    /** Exibe spinner e bloqueia o clique. Vence o loading automático do onClick: loading efetivo = `loading` || Promise pendente. */
     loading?: boolean;
     customColors?: SgButtonCustomColors;
 };
-export declare function resolveButtonColors(severity: Severity, custom?: SgButtonCustomColors): Required<SgButtonCustomColors>;
-export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color"> & {
+export declare function resolveButtonColors(severity: Severity, custom?: SgButtonCustomColors): Required<SgButtonCustomColors> & {
+    activeFg: string;
+};
+export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color" | "onClick"> & {
+    /**
+     * Clique do botão. Pode ser síncrono ou assíncrono (`(event) => unknown`).
+     *
+     * - Síncrono (abrir modal, alternar painel): funciona como sempre, nada muda.
+     * - Se DEVOLVER uma Promise (`async () => { await salvar(); }` ou `() => salvar()`), o botão entra em loading
+     *   sozinho (spinner, desabilitado, aria-busy), ignora cliques até terminar (inclusive cliques seguidos antes do
+     *   re-render) e volta ao normal ao terminar ou falhar. Protege contra duplo clique e reenvio e ajuda na
+     *   idempotência da ação na tela (não substitui a chave de idempotência no servidor).
+     * - Cuidado: precisa DEVOLVER a Promise. `onClick={() => { salvar(); }}` (chaves sem return) NÃO protege.
+     * - Erro: o botão não engole o erro (sai do loading e relança como rejeição não tratada). Trate com try/catch
+     *   dentro do onClick e avise o usuário (ex.: `sgWhistle.error`).
+     * - Use async só quando a ação puder demorar ou falhar (salvar, enviar, pagar); ações instantâneas ficam síncronas.
+     * - A prop `loading` manual continua valendo e vence (loading efetivo = `loading` || Promise pendente).
+     *
+     * O retorno é `unknown` só para não quebrar handlers existentes de corpo-expressão (`() => lista.push(x)`).
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
     /** Quando false, desabilita o botão. Padrão: true. */
     enabled?: boolean;
     severity?: Severity;
@@ -42,6 +79,7 @@ export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.Button
     iconOnly?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    /** Exibe spinner e bloqueia o clique. Vence o loading automático do onClick: loading efetivo = `loading` || Promise pendente. */
     loading?: boolean;
     customColors?: SgButtonCustomColors;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,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,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtG,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;IAtJnB,sDAAsD;cAC5C,OAAO;eACN,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;YACb,KAAK,CAAC,SAAS;eACZ,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAmNpC,CAAC"}
+{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,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,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG;IAClH;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC;IAClE,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iIAAiI;IACjI,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAoFF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAcvD;AAqDD,eAAO,MAAM,QAAQ;IAzLnB;;;;;;;;;;;;;;;OAeG;cACO,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO;IACjE,sDAAsD;cAC5C,OAAO;eACN,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;YACb,KAAK,CAAC,SAAS;eACZ,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;IAC3B,iIAAiI;cACvH,OAAO;mBACF,oBAAoB;2CAsQpC,CAAC"}

package/dist/buttons/SgButton.js

@@ -10,6 +10,8 @@ const PRESET = {
         fg: "var(--sg-btn-primary-fg, hsl(var(--primary-foreground)))",
         border: "var(--sg-btn-primary-border, hsl(var(--primary)))",
         hoverBg: "var(--sg-btn-primary-hover-bg, hsl(var(--primary)))",
+        hoverFg: "var(--sg-btn-primary-hover-fg, var(--sg-btn-primary-fg, hsl(var(--primary-foreground))))",
+        activeFg: "var(--sg-btn-primary-active-fg, var(--sg-btn-primary-fg, hsl(var(--primary-foreground))))",
         ring: "var(--sg-btn-primary-ring, hsl(var(--primary)/0.35))"
     },
     secondary: {
@@ -17,6 +19,8 @@ const PRESET = {
         fg: "var(--sg-btn-secondary-fg, hsl(var(--secondary-foreground)))",
         border: "var(--sg-btn-secondary-border, hsl(var(--secondary)))",
         hoverBg: "var(--sg-btn-secondary-hover-bg, hsl(var(--secondary)))",
+        hoverFg: "var(--sg-btn-secondary-hover-fg, var(--sg-btn-secondary-fg, hsl(var(--secondary-foreground))))",
+        activeFg: "var(--sg-btn-secondary-active-fg, var(--sg-btn-secondary-fg, hsl(var(--secondary-foreground))))",
         ring: "var(--sg-btn-secondary-ring, hsl(var(--secondary)/0.35))"
     },
     success: {
@@ -24,6 +28,8 @@ const PRESET = {
         fg: "var(--sg-btn-success-fg, hsl(var(--tertiary-foreground, var(--accent-foreground, 0 0% 100%))))",
         border: "var(--sg-btn-success-border, hsl(var(--tertiary, var(--accent))))",
         hoverBg: "var(--sg-btn-success-hover-bg, hsl(var(--tertiary, var(--accent))))",
+        hoverFg: "var(--sg-btn-success-hover-fg, var(--sg-btn-success-fg, hsl(var(--tertiary-foreground, var(--accent-foreground, 0 0% 100%)))))",
+        activeFg: "var(--sg-btn-success-active-fg, var(--sg-btn-success-fg, hsl(var(--tertiary-foreground, var(--accent-foreground, 0 0% 100%)))))",
         ring: "var(--sg-btn-success-ring, hsl(var(--tertiary, var(--accent))/0.35))"
     },
     info: {
@@ -31,6 +37,8 @@ const PRESET = {
         fg: "var(--sg-btn-info-fg, hsl(var(--secondary-foreground, var(--primary-foreground))))",
         border: "var(--sg-btn-info-border, hsl(var(--secondary, var(--primary))))",
         hoverBg: "var(--sg-btn-info-hover-bg, hsl(var(--secondary, var(--primary))))",
+        hoverFg: "var(--sg-btn-info-hover-fg, var(--sg-btn-info-fg, hsl(var(--secondary-foreground, var(--primary-foreground)))))",
+        activeFg: "var(--sg-btn-info-active-fg, var(--sg-btn-info-fg, hsl(var(--secondary-foreground, var(--primary-foreground)))))",
         ring: "var(--sg-btn-info-ring, hsl(var(--secondary, var(--primary))/0.35))"
     },
     warning: {
@@ -38,6 +46,8 @@ const PRESET = {
         fg: "var(--sg-btn-warning-fg, hsl(var(--secondary-foreground, var(--accent-foreground, 0 0% 100%))))",
         border: "var(--sg-btn-warning-border, hsl(var(--secondary, var(--accent))))",
         hoverBg: "var(--sg-btn-warning-hover-bg, hsl(var(--secondary, var(--accent))))",
+        hoverFg: "var(--sg-btn-warning-hover-fg, var(--sg-btn-warning-fg, hsl(var(--secondary-foreground, var(--accent-foreground, 0 0% 100%)))))",
+        activeFg: "var(--sg-btn-warning-active-fg, var(--sg-btn-warning-fg, hsl(var(--secondary-foreground, var(--accent-foreground, 0 0% 100%)))))",
         ring: "var(--sg-btn-warning-ring, hsl(var(--secondary, var(--accent))/0.35))"
     },
     help: {
@@ -45,6 +55,8 @@ const PRESET = {
         fg: "var(--sg-btn-help-fg, hsl(var(--secondary-foreground, var(--primary-foreground))))",
         border: "var(--sg-btn-help-border, hsl(var(--secondary, var(--primary))))",
         hoverBg: "var(--sg-btn-help-hover-bg, hsl(var(--secondary, var(--primary))))",
+        hoverFg: "var(--sg-btn-help-hover-fg, var(--sg-btn-help-fg, hsl(var(--secondary-foreground, var(--primary-foreground)))))",
+        activeFg: "var(--sg-btn-help-active-fg, var(--sg-btn-help-fg, hsl(var(--secondary-foreground, var(--primary-foreground)))))",
         ring: "var(--sg-btn-help-ring, hsl(var(--secondary, var(--primary))/0.35))"
     },
     danger: {
@@ -52,6 +64,8 @@ const PRESET = {
         fg: "var(--sg-btn-danger-fg, hsl(var(--destructive-foreground)))",
         border: "var(--sg-btn-danger-border, hsl(var(--destructive)))",
         hoverBg: "var(--sg-btn-danger-hover-bg, hsl(var(--destructive)))",
+        hoverFg: "var(--sg-btn-danger-hover-fg, var(--sg-btn-danger-fg, hsl(var(--destructive-foreground))))",
+        activeFg: "var(--sg-btn-danger-active-fg, var(--sg-btn-danger-fg, hsl(var(--destructive-foreground))))",
         ring: "var(--sg-btn-danger-ring, hsl(var(--destructive)/0.35))"
     },
 };
@@ -67,9 +81,11 @@ export function resolveButtonColors(severity, custom) {
         fg: custom?.fg ?? base.fg,
         border: custom?.border ?? base.border,
         hoverBg: custom?.hoverBg ?? base.hoverBg,
-        hoverFg: custom?.hoverFg ?? (custom?.fg ?? base.fg),
+        // Sem cor customizada, cada estado usa o texto escolhido por contraste sobre o proprio fundo (tokens *-hover-fg/*-active-fg).
+        hoverFg: custom?.hoverFg ?? custom?.fg ?? base.hoverFg,
         hoverBorder: custom?.hoverBorder ?? (custom?.border ?? base.border),
         activeBg: custom?.activeBg ?? (custom?.hoverBg ?? base.hoverBg),
+        activeFg: custom?.hoverFg ?? custom?.fg ?? base.activeFg,
         ring: custom?.ring ?? base.ring
     };
 }
@@ -84,6 +100,7 @@ function buildVars(severity, custom) {
         ["--sg-btn-hover-fg"]: merged.hoverFg,
         ["--sg-btn-hover-border"]: merged.hoverBorder,
         ["--sg-btn-active-bg"]: merged.activeBg,
+        ["--sg-btn-active-fg"]: merged.activeFg,
         ["--sg-btn-ring"]: merged.ring,
         ["--sg-btn-tint"]: `var(--sg-${toneKey}-600)`
     };
@@ -91,7 +108,7 @@ function buildVars(severity, custom) {
 function appearanceClass(appearance) {
     switch (appearance) {
         case "solid":
-            return cn("bg-[var(--sg-btn-bg)] text-[var(--sg-btn-fg)] border border-[var(--sg-btn-border)]", "hover:bg-[var(--sg-btn-hover-bg)] hover:text-[var(--sg-btn-hover-fg)] hover:border-[var(--sg-btn-hover-border)]", "active:bg-[var(--sg-btn-active-bg)]");
+            return cn("bg-[var(--sg-btn-bg)] text-[var(--sg-btn-fg)] border border-[var(--sg-btn-border)]", "hover:bg-[var(--sg-btn-hover-bg)] hover:text-[var(--sg-btn-hover-fg)] hover:border-[var(--sg-btn-hover-border)]", "active:bg-[var(--sg-btn-active-bg)] active:text-[var(--sg-btn-active-fg)]");
         case "outline":
             return cn("bg-transparent text-[var(--sg-btn-bg)] border border-[var(--sg-btn-border)]", "hover:bg-[rgb(var(--sg-btn-tint)/0.12)]", "active:bg-[rgb(var(--sg-btn-tint)/0.18)]");
         case "ghost":
@@ -108,16 +125,45 @@ function elevationClass(elevation) {
             return "";
     }
 }
-export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", label, iconOnly, leftIcon, rightIcon, loading = false, enabled = true, className, children, style, customColors, type = "button", ...rest }, ref) => {
+export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", label, iconOnly, leftIcon, rightIcon, loading = false, enabled = true, className, children, style, customColors, type = "button", onClick, ...rest }, ref) => {
+    const [pending, setPending] = React.useState(false);
+    const pendingRef = React.useRef(false);
+    const mountedRef = React.useRef(true);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const isLoading = loading || pending;
+    const handleClick = React.useCallback((event) => {
+        if (!onClick || !enabled || loading || pendingRef.current)
+            return;
+        const result = onClick(event);
+        if (!result || typeof result.then !== "function")
+            return;
+        pendingRef.current = true;
+        setPending(true);
+        const done = () => {
+            pendingRef.current = false;
+            if (mountedRef.current)
+                setPending(false);
+        };
+        // O erro da Promise nao e engolido: segue como rejeicao sem tratamento, como antes.
+        void result.then(done, (error) => {
+            done();
+            throw error;
+        });
+    }, [onClick, enabled, loading]);
     const resolvedChildren = children ?? label;
-    const isDisabled = Boolean(!enabled || loading);
+    const isDisabled = Boolean(!enabled || isLoading);
     const inferredIconOnly = !resolvedChildren && (leftIcon || rightIcon);
     const isIconOnly = iconOnly ?? inferredIconOnly;
     const resolvedSize = size ?? (isIconOnly ? "sm" : "md");
     const resolvedShape = shape ?? (isIconOnly ? "circle" : "default");
     const s = SIZE[resolvedSize];
     const contentClass = cn("inline-flex min-w-0 items-center justify-center", !isIconOnly ? "w-full" : undefined, s.gap);
-    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
+    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, "aria-busy": isLoading ? true : undefined, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, onClick: onClick ? handleClick : undefined, children: isLoading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
 });
 SgButton.displayName = "SgButton";
 function Spinner({ className }) {

package/dist/buttons/SgButton.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgButton.meta.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAiHpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}
+{"version":3,"file":"SgButton.meta.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAoIpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WA6BrB,CAAC"}

package/dist/buttons/SgButton.meta.js

@@ -47,7 +47,7 @@ export const sgMeta = {
             name: "loading",
             type: "boolean",
             default: false,
-            description: "Exibe spinner e bloqueia interacao enquanto a acao esta em progresso.",
+            description: "Exibe spinner e bloqueia o clique. Continua valendo e vence o loading automático do onClick: o loading efetivo é loading ou operação pendente (Promise/Future devolvida pelo onClick).",
             semanticRole: "behavior",
             bindable: true
         },
@@ -75,8 +75,8 @@ export const sgMeta = {
         },
         {
             name: "onClick",
-            type: "MouseEventHandler<HTMLButtonElement>",
-            description: "Callback disparado quando a acao e executada.",
+            type: "(event: MouseEvent<HTMLButtonElement>) => unknown",
+            description: "Clique do botão; pode ser síncrono ou assíncrono. Síncrono (abrir modal, alternar): nada muda. Se DEVOLVER uma Promise/Future, como async () => { await salvar(); } ou () => salvar(), o botão entra em loading sozinho (spinner, desabilitado, aria-busy na web), ignora cliques até terminar (inclusive cliques seguidos antes de a tela atualizar) e volta ao normal ao terminar ou falhar. Protege contra duplo clique e reenvio e ajuda na idempotência da ação na tela (não substitui a chave de idempotência no servidor). Cuidado: a função precisa devolver a operação; com chaves e sem return (ou sem async), como () => { salvar(); } ou () { salvar(); }, não protege; já async () {...} sempre devolve. O erro não é engolido: o botão sai do loading e relança como rejeição não tratada; trate com try/catch dentro do onClick e avise o usuário (sgWhistle.error). Use async só quando a ação puder demorar ou falhar (salvar, enviar, pagar).",
             semanticRole: "event",
             bindable: false
         }
@@ -89,6 +89,24 @@ export const sgMeta = {
             file: "apps/showcase/src/app/components/sg-button/samples/basico.tsx.sample",
             kind: "sample"
         },
+        {
+            id: "auto-loading",
+            title: "Loading automático com Future",
+            file: "apps/showcase/src/app/components/sg-button/samples/loading-automatico-com-future.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "sync-vs-async",
+            title: "onClick síncrono x assíncrono",
+            file: "apps/showcase/src/app/components/sg-button/samples/onclick-sincrono-x-assincrono.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "async-error",
+            title: "Tratando erro no onClick assíncrono",
+            file: "apps/showcase/src/app/components/sg-button/samples/tratando-erro-no-onclick-assincrono.tsx.sample",
+            kind: "sample"
+        },
         {
             id: "playground",
             title: "Playground",
@@ -116,7 +134,8 @@ export const aiHints = {
     preferredUseCases: [
         "Acoes primarias e secundarias em formularios e telas CRUD.",
         "Submit, confirmacao, salvar, cancelar e outras acoes explicitas do usuario.",
-        "Chamadas para acao com feedback visual de loading."
+        "Chamadas para acao com feedback visual de loading.",
+        "Salvar, enviar ou pagar: use onClick assíncrono (async () => { await salvar(); } ou () => salvar()) para o botão entrar em loading sozinho e ignorar duplo clique; acoes instantaneas (abrir modal, alternar) ficam sincronas."
     ],
     avoidUseCases: [
         "Agrupar conteudo ou estruturar layout; nesses casos prefira SgPanel, SgCard ou SgStack.",
@@ -127,7 +146,10 @@ export const aiHints = {
     relatedEntityFields: ["submit", "save", "cancel", "confirm", "delete"],
     compositionHints: [
         "Combinar com SgInputText e outros campos em formularios.",
-        "Usar dentro de SgPanel ou SgDialog para acoes contextuais."
+        "Usar dentro de SgPanel ou SgDialog para acoes contextuais.",
+        "O onClick precisa DEVOLVER a Promise/Future para o loading automatico funcionar: onClick={() => { salvar(); }} (chaves sem return) nao protege; use () => salvar() ou async () => { await salvar(); }. No Flutter, async () {...} sempre devolve Future; () { salvar(); } nao.",
+        "O botao nao engole o erro do onClick assincrono: sai do loading e relanca como rejeicao nao tratada. Trate com try/catch dentro do onClick e avise o usuario com sgWhistle.error (Flutter: sgWhistle.error(SgWhistleOptions(...))).",
+        "O loading automatico protege a acao na tela (duplo clique/reenvio), mas nao substitui a chave de idempotencia no servidor. A prop loading manual vence: loading efetivo = loading ou operacao pendente."
     ],
     rankingSignals: {
         freeText: 0,

package/dist/digits/fade-digit/SgFadeDigit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgFadeDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/fade-digit/SgFadeDigit.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAiB,EACjB,eAA2B,EAC3B,IAAI,EACJ,QAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CAyGlB"}
+{"version":3,"file":"SgFadeDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/fade-digit/SgFadeDigit.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAiB,EACjB,eAA2B,EAC3B,IAAI,EACJ,QAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CA6GlB"}

package/dist/digits/fade-digit/SgFadeDigit.js

@@ -21,8 +21,11 @@ export function SgFadeDigit({ value, color = "#edebeb", backgroundColor = "#3332
     const [opacity, setOpacity] = React.useState(1);
     React.useEffect(() => {
         // Nothing to do — already showing the right value
-        if (value === displayValue)
+        // (and restore opacity: a fade-out may have started for a value that came back to the current one)
+        if (value === displayValue) {
+            setOpacity(1);
             return;
+        }
         // Phase 1: fade out
         setOpacity(0);
         // Phase 2: after fade-out completes, swap text and fade in

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

@@ -10,6 +10,8 @@ export type SgClockProps = {
     format?: "12h" | "24h";
     showSeconds?: boolean;
     digitalStyle?: SgClockDigitalStyle;
+    /** Desenha o relogio digital quando `digitalStyle` e `"custom"`. Sem ele, cai no estilo `default`. */
+    digitBuilder?: SgClockDigitBuilder;
     secondHandMode?: "step" | "smooth";
     themeId?: string;
     theme?: SgClockTheme;
@@ -19,6 +21,28 @@ export type SgClockProps = {
     cardTitle?: React.ReactNode;
     cardProps?: Omit<SgCardProps, "children" | "title">;
 };
-export type SgClockDigitalStyle = "default" | "segment" | "sevenSegment" | "roller3d" | "flip" | "fade" | "matrix" | "neon" | "discard";
+export type SgClockDigitalStyle = "default" | "segment" | "sevenSegment" | "roller3d" | "flip" | "fade" | "matrix" | "neon" | "discard" | "custom";
+/** Partes do relogio digital entregues ao `digitBuilder` (as mesmas do construtor do Flutter). */
+export type SgClockDigitalParts = {
+    /** Sempre com 2 digitos; em 12h vai de 01 a 12. */
+    hour: string;
+    minute: string;
+    /** Vazio quando `showSeconds` e falso. */
+    second: string;
+    /** So em 12h (`AM`/`PM` ou o que o Intl do locale devolve). */
+    dayPeriod: string | undefined;
+    is12h: boolean;
+    showSeconds: boolean;
+    /** `size` original do SgClock (`"sm"`, `"md"`, `"lg"` ou numero). */
+    size: "sm" | "md" | "lg" | number;
+    /** `HH:MM` ou `HH:MM:SS`. */
+    text: string;
+    /** `text` + periodo em maiusculas. */
+    textWithPeriod: string;
+    /** Numero = ele mesmo, sm 12, lg 28, md 16. */
+    sizePx: number;
+};
+/** Recebe as partes do relogio digital e devolve o desenho completo (digitos e separadores). */
+export type SgClockDigitBuilder = (parts: SgClockDigitalParts) => React.ReactNode;
 export declare function SgClock(props: SgClockProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgClock.d.ts.map

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;AAUnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA2C/D,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;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAugBd,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsG1C"}
+{"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;AAUnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA2C/D,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,sGAAsG;IACtG,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;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,kGAAkG;AAClG,MAAM,MAAM,mBAAmB,GAAG;IAChC,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAClC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,gGAAgG;AAChG,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;AA4hBlF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwG1C"}

package/dist/gadgets/clock/SgClock.js

@@ -110,7 +110,7 @@ function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR"
         (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": 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 }) {
+function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", digitBuilder, className, style }) {
     const i18n = useComponentsI18n();
     const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
     void providerTick;
@@ -137,6 +137,21 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
     const fontSize = typeof size === "number" ? { fontSize: `${size}px`, lineHeight: 1 } : undefined;
     const sizePx = digitalSizeToNumber(size);
     const withPeriod = format === "12h" && dayPeriod ? `${text} ${dayPeriod.toUpperCase()}` : text;
+    if (digitalStyle === "custom" && digitBuilder) {
+        const is12h = format === "12h";
+        return (_jsx("div", { className: className, style: style, "aria-label": t(i18n, "components.gadgets.clock.digitalAria"), children: digitBuilder({
+                hour,
+                minute,
+                second: showSeconds ? second : "",
+                dayPeriod: is12h && dayPeriod ? dayPeriod : undefined,
+                is12h,
+                showSeconds,
+                size,
+                text,
+                textWithPeriod: withPeriod,
+                sizePx
+            }) }));
+    }
     if (digitalStyle === "flip") {
         const hNum = Number.parseInt(hour, 10) || 0;
         const mNum = Number.parseInt(minute, 10) || 0;
@@ -275,7 +290,7 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
 }
 export function SgClock(props) {
     const i18n = useComponentsI18n();
-    const { clockStyle = "digital", size = "md", initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, style, centerOverlay, cardTitle, cardProps } = props;
+    const { clockStyle = "digital", size = "md", initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", digitBuilder, secondHandMode = "step", themeId = "classic", theme, className, style, centerOverlay, cardTitle, cardProps } = props;
     const resolvedCardTitle = cardTitle ?? t(i18n, "components.gadgets.clock.title");
     const resolvedDragPersistKey = React.useMemo(() => {
         const explicitPersistKey = cardProps?.dragPersistKey;
@@ -299,6 +314,6 @@ export function SgClock(props) {
     const clockNode = 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, style: style, centerOverlay: centerOverlay }));
-    })()) : (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className, style: style }));
+    })()) : (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, digitBuilder: digitBuilder, className: className, style: style }));
     return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "rgb(var(--sg-surface,var(--sg-bg)))", bgColorTitle: "rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))", cardStyle: "outlined", ...cardProps, className: mergedCardClassName, bodyClassName: mergedCardBodyClassName, style: mergedCardStyle, dragPersistKey: resolvedDragPersistKey, children: clockNode }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SgClock.meta.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEjE,eAAO,MAAM,MAAM,EAAE,QA8BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}
+{"version":3,"file":"SgClock.meta.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEjE,eAAO,MAAM,MAAM,EAAE,QA+BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/gadgets/clock/SgClock.meta.js

@@ -13,7 +13,8 @@ export const sgMeta = {
     fieldSemantics: ["clock", "timeDisplay", "timezoneClock", "digitalClock", "analogClock"],
     props: [
         { name: "clockStyle", type: '"digital" | "analog"', default: "digital", description: "Modo principal de exibicao do relogio.", semanticRole: "appearance", bindable: true },
-        { name: "digitalStyle", type: '"default" | "segment" | "sevenSegment" | "roller3d" | "flip" | "fade" | "matrix" | "neon" | "discard"', default: "default", description: "Estilo visual do relogio digital.", semanticRole: "appearance", bindable: true },
+        { name: "digitalStyle", type: '"default" | "segment" | "sevenSegment" | "roller3d" | "flip" | "fade" | "matrix" | "neon" | "discard" | "custom"', default: "default", description: "Estilo visual do relogio digital.", semanticRole: "appearance", bindable: true },
+        { name: "digitBuilder", type: "(parts: SgClockDigitalParts) => ReactNode", description: "Desenha o relogio digital quando digitalStyle e custom; sem ele, usa o estilo default.", semanticRole: "appearance", bindable: false },
         { name: "timezone", type: "string", description: "Timezone usada no calculo da hora exibida.", semanticRole: "behavior", bindable: true },
         { name: "format", type: '"12h" | "24h"', default: "24h", description: "Formato horario do relogio.", semanticRole: "behavior", bindable: true },
         { name: "showSeconds", type: "boolean", default: true, description: "Exibe ou oculta os segundos.", semanticRole: "appearance", bindable: true },