@alexandregme/zljs 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -37,6 +37,7 @@ interface ButtonProps {
     variant?: ButtonVariant;
     color?: ButtonColor;
     size?: Size;
+    fullWidth?: boolean;
     icon?: IconName;
     iconPosition?: "left" | "right";
     disabled?: boolean;
@@ -44,7 +45,7 @@ interface ButtonProps {
     onClick?: () => void;
 }
 
-declare const Button: ({ children, type, variant: variantProp, color, size, icon, iconPosition, disabled, "aria-label": ariaLabel, onClick, }: ButtonProps) => react.JSX.Element;
+declare const Button: ({ children, type, variant: variantProp, color, size, fullWidth, icon, iconPosition, disabled, "aria-label": ariaLabel, onClick, }: ButtonProps) => react.JSX.Element;
 
 interface DataGridCellParams<T extends Record<string, unknown> = Record<string, unknown>> {
     value?: any;

package/dist/index.js

@@ -47,33 +47,38 @@ var Icon = ({
 // core/button/button.styles.ts
 import { tv } from "tailwind-variants";
 var button = tv({
-  base: "cursor-pointer font-medium focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
+  // outline-current covers the colors with no outline class (ghost, none): without it, browsers keep their default focus color.
+  base: "cursor-pointer font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
   variants: {
     variant: {
-      default: "px-4 py-2 text-white text-sm gap-2 rounded-md focus:ring-2 focus:ring-offset-2",
-      icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:ring-gray-500 rounded-md focus:ring-2 focus:ring-offset-2",
-      link: "text-xs hover:underline"
+      default: "px-4 py-2 text-white text-sm gap-2 rounded-md",
+      icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md",
+      // The invisible ::after grows the touch target to 44px without changing the layout.
+      link: "relative text-xs hover:underline rounded-sm after:absolute after:top-1/2 after:left-1/2 after:h-11 after:w-full after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2"
     },
     color: {
-      primary: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
-      success: "bg-green-600 hover:bg-green-700 focus:ring-green-500",
-      danger: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
-      warning: "bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500 text-gray-900",
-      info: "bg-cyan-500 hover:bg-cyan-600 focus:ring-cyan-500",
-      ghost: "bg-transparent text-neutral-400 hover:text-white hover:bg-neutral-800 focus:ring-neutral-600",
+      primary: "bg-blue-600 hover:bg-blue-700 focus-visible:outline-blue-600",
+      success: "bg-green-700 hover:bg-green-800 focus-visible:outline-green-700",
+      danger: "bg-red-600 hover:bg-red-700 focus-visible:outline-red-600",
+      warning: "bg-yellow-500 hover:bg-yellow-600 focus-visible:outline-yellow-700 text-gray-900",
+      info: "bg-cyan-700 hover:bg-cyan-800 focus-visible:outline-cyan-700",
+      ghost: "bg-transparent text-current hover:text-current hover:bg-neutral-500/20",
       none: ""
     },
     size: {
       sm: "",
       md: "",
       lg: ""
+    },
+    fullWidth: {
+      true: "w-full"
     }
   },
   compoundVariants: [
     {
       variant: "default",
       color: "none",
-      class: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500"
+      class: "bg-gray-100 text-gray-900 hover:bg-gray-200"
     },
     {
       variant: "default",
@@ -103,7 +108,7 @@ var button = tv({
     {
       variant: "link",
       color: "success",
-      class: "text-green-600 hover:text-green-800"
+      class: "text-green-700 hover:text-green-900"
     },
     {
       variant: "link",
@@ -113,22 +118,17 @@ var button = tv({
     {
       variant: "link",
       color: "warning",
-      class: "text-yellow-600 hover:text-yellow-800"
+      class: "text-yellow-700 hover:text-yellow-900"
     },
     {
       variant: "link",
       color: "info",
-      class: "text-cyan-600 hover:text-cyan-800"
-    },
-    {
-      variant: "link",
-      color: "ghost",
-      class: "text-neutral-400 hover:text-neutral-600"
+      class: "text-cyan-700 hover:text-cyan-900"
     },
     {
       variant: "link",
       color: "none",
-      class: "text-slate-500 hover:text-slate-700"
+      class: "text-slate-600 hover:text-slate-800"
     },
     {
       variant: "link",
@@ -150,6 +150,7 @@ var Button = ({
   variant: variantProp,
   color = "primary",
   size = "md",
+  fullWidth = false,
   icon,
   iconPosition = "left",
   disabled = false,
@@ -184,7 +185,8 @@ var Button = ({
       className: button({
         variant,
         color: variant === "icon" && color !== "ghost" ? "none" : color,
-        size
+        size,
+        fullWidth
       }),
       children: renderContent()
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",