@dtcode/ui 0.1.0 → 0.2.0

package/dist/button.d.ts

@@ -1,9 +1,10 @@
 export type ButtonVariant = "primary" | "secondary" | "accent" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
-export declare function buttonClasses({ variant, size, block, className, }?: {
+export declare function buttonClasses({ variant, size, block, loading, className, }?: {
     variant?: ButtonVariant;
     size?: ButtonSize;
     block?: boolean;
+    loading?: boolean;
     className?: string;
 }): string;
 export type ButtonProps = React.ComponentProps<"button"> & {
@@ -14,6 +15,8 @@ export type ButtonProps = React.ComponentProps<"button"> & {
     /** Material Symbol exibido depois do texto. */
     iconRight?: string;
     loading?: boolean;
+    /** Texto anunciado por leitores de tela durante o carregamento. */
+    loadingLabel?: string;
     block?: boolean;
 };
-export declare function Button({ variant, size, icon, iconRight, loading, block, className, children, disabled, type, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, icon, iconRight, loading, loadingLabel, block, className, children, disabled, type, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -5,8 +5,10 @@ import { Loader } from "./loader.js";
 const base = "group/btn inline-flex items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold " +
     "transition-[translate,scale,box-shadow,background-color,color,opacity] duration-150 ease-brand " +
     "hover:-translate-y-px active:translate-y-0 active:scale-[.97] " +
-    "disabled:pointer-events-none disabled:opacity-45 disabled:shadow-none " +
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+const disabledCls = "disabled:pointer-events-none disabled:opacity-45 disabled:shadow-none";
+// Carregando (como no login): mantém a cor do botão, sem esmaecer como desabilitado, e só bloqueia o clique.
+const loadingCls = "pointer-events-none cursor-progress";
 const variants = {
     primary: "bg-action text-on-action shadow-2 hover:bg-action-hover hover:shadow-3",
     secondary: "bg-surface text-fg border-border-strong shadow-1 hover:bg-surface-subtle",
@@ -21,9 +23,11 @@ const sizes = {
     lg: "h-13 px-6 text-[17px] font-bold rounded-lg",
 };
 const iconSize = { sm: 16, md: 18, lg: 20 };
-export function buttonClasses({ variant = "primary", size = "md", block, className, } = {}) {
-    return cn(base, variants[variant], sizes[size], block && "w-full", className);
+export function buttonClasses({ variant = "primary", size = "md", block, loading, className, } = {}) {
+    return cn(base, variants[variant], sizes[size], loading ? loadingCls : disabledCls, block && "w-full", className);
 }
-export function Button({ variant, size = "md", icon, iconRight, loading, block, className, children, disabled, type = "button", ...props }) {
-    return (_jsxs("button", { type: type, className: buttonClasses({ variant, size, block, className }), disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? _jsx(Loader, { size: "sm" }) : icon && _jsx(Icon, { name: icon, size: iconSize[size] }), children, iconRight && !loading && (_jsx(Icon, { name: iconRight, size: iconSize[size], className: "transition-[translate] duration-200 ease-brand group-hover/btn:translate-x-0.5" }))] }));
+export function Button({ variant, size = "md", icon, iconRight, loading, loadingLabel, block, className, children, disabled, type = "button", ...props }) {
+    return (_jsxs("button", { type: type, className: buttonClasses({ variant, size, block, loading, className }), disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? (
+            // No accent o fundo já é o gradiente da marca: os losangos ficam na cor do texto para aparecer.
+            _jsx(Loader, { size: "sm", label: loadingLabel, className: variant === "accent" ? "[&_i]:bg-current [&_i]:bg-none" : undefined })) : (icon && _jsx(Icon, { name: icon, size: iconSize[size] })), children, iconRight && !loading && (_jsx(Icon, { name: iconRight, size: iconSize[size], className: "transition-[translate] duration-200 ease-brand group-hover/btn:translate-x-0.5" }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtcode/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Componentes React e tokens do Design System dtcode (Tailwind CSS v4).",
   "license": "UNLICENSED",
   "repository": {