Update UI package with styling and loading indicator modifications

The user interface package (ui package.json) has been updated to version 0.1.80 to include styling refinements for disabled state buttons and a simplified loading indicator. The styling updates provide better visibility for disabled buttons across all styles. The loading indicator now utilizes a data-slot, improving the streamline of implementation.

Author: thevuong

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.80
+
+### Patch Changes
+
+- Refine disabled state styling and simplify loading indicator
+
 ## 0.1.79
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.79",
+  "version": "0.1.80",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/src/classes/button.ts

@@ -117,7 +117,7 @@ export const buttonVariants = cva(
     'relative items-center gap-2 whitespace-nowrap text-sm font-medium transition-colors',
     'ring-offset-background',
     'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-    'disabled:cursor-not-allowed',
+    'disabled:cursor-not-allowed disabled:duration-0',
   ],
   {
     compoundVariants: [...compoundSizes],
@@ -156,28 +156,38 @@ export const buttonVariants = cva(
         primary: [
           'bg-primary text-primary-foreground',
           'hover:bg-primary/90',
-          'disabled:bg-primary/50 disabled:text-primary-foreground/0 [&_[data-loading]]:disabled:text-primary-foreground',
+          'disabled:bg-primary/50 disabled:text-primary-foreground/80',
+          'has-[[data-slot=loading]]:text-primary-foreground/0 [&_[data-slot=loading]]:disabled:text-primary-foreground',
         ],
         destructive: [
           'bg-destructive text-destructive-foreground',
           'hover:bg-destructive/90',
-          'disabled:bg-destructive/50 disabled:text-destructive-foreground/0 [&_[data-loading]]:disabled:text-destructive-foreground',
+          'disabled:bg-destructive/50 disabled:text-destructive-foreground/80',
+          'has-[[data-slot=loading]]:text-destructive-foreground/0 [&_[data-slot=loading]]:disabled:text-destructive-foreground',
         ],
         secondary: [
           'bg-secondary text-secondary-foreground',
           'hover:bg-secondary/90',
-          'disabled:bg-secondary/50 disabled:text-secondary-foreground/0 [&_[data-loading]]:disabled:text-secondary-foreground',
+          'disabled:bg-secondary/50 disabled:text-secondary-foreground/80',
+          'has-[[data-slot=loading]]:text-secondary-foreground/0 [&_[data-slot=loading]]:disabled:text-secondary-foreground',
         ],
         outline: [
           'border-input border',
           'hover:border-input/90 hover:bg-accent hover:text-accent-foreground',
-          'disabled:border-input/50 disabled:text-accent-foreground/0 [&_[data-loading]]:disabled:text-accent-foreground',
+          'disabled:border-input/50 disabled:text-accent-foreground/80',
+          'has-[[data-slot=loading]]:text-accent-foreground/0 [&_[data-slot=loading]]:disabled:text-accent-foreground',
         ],
         ghost: [
           'hover:bg-accent hover:text-accent-foreground',
-          'disabled:text-accent-foreground/0 [&_[data-loading]]:disabled:text-accent-foreground',
+          'disabled:text-accent-foreground/80',
+          'has-[[data-slot=loading]]:text-accent-foreground/0 [&_[data-slot=loading]]:disabled:text-accent-foreground',
+        ],
+        link: [
+          'text-primary rounded-none',
+          'hover:underline',
+          'disabled:text-primary/80',
+          'has-[[data-slot=loading]]:text-primary/0 [&_[data-slot=loading]]:disabled:text-primary',
         ],
-        link: ['text-primary rounded-none', 'hover:underline'],
       },
     },
   },

packages/ui/src/react/button.tsx

@@ -60,12 +60,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {endIcon}
 
         {loading ? (
-          <span className="rounded-inherit absolute inset-0 flex items-center justify-center">
-            <Loader2Icon
-              className="animate-spin"
-              data-loading={loading}
-              size={18}
-            />
+          <span
+            className="rounded-inherit absolute inset-0 z-10 flex items-center justify-center"
+            data-slot="loading"
+          >
+            <Loader2Icon className="animate-spin" size={18} />
           </span>
         ) : null}
       </button>