luaniverse 4.2.23 → 4.2.25

package/dist/safelist.js

@@ -221,6 +221,7 @@ export const luaniverseSafelist = [
   'lua:border-primary',
   'lua:border-secondary',
   'lua:border-destructive',
+  'lua:border-danger',
   'lua:border-success',
   'lua:border-warning',
   'lua:border-info',
@@ -280,7 +281,14 @@ export const luaniverseSafelist = [
   'lua:bg-accent',
   'lua:text-accent-foreground',
   
-  // Semantic Color Tokens - Destructive (Danger - Red)
+  // Semantic Color Tokens - Danger (Error/Validation Indicators)
+  'lua:text-danger',
+  'lua:border-danger',
+  'lua:bg-danger',
+  'lua:text-danger-foreground',
+  'lua:hover:bg-danger-hover',
+
+  // Semantic Color Tokens - Destructive (Action - Dark Maroon)
   'lua:bg-destructive',
   'lua:text-destructive-foreground',
   'lua:bg-destructive-hover',
@@ -464,6 +472,34 @@ export const luaniverseSafelist = [
   'lua:before:min-w-[100px]',
   'lua:md:before:content-none',
 
+  // Button loading state
+  'lua-btn-loading',
+  'lua-btn-loader-dot',
+
+  // Button
+  'lua:gap-1.5',
+  'lua:h-7',
+  'lua:h-9',
+  'lua:h-12',
+  'lua:leading-5',
+  'lua:leading-6',
+  'lua:size-4',
+  'lua:text-current',
+  'lua:pl-3',
+  'lua:pr-3',
+  'lua:disabled:bg-black/5',
+  'lua:disabled:text-black/15',
+  'lua:disabled:shadow-none',
+  'lua:disabled:border-transparent',
+  'lua:active:bg-primary-active',
+  'lua:active:text-primary-foreground',
+  'lua:active:bg-secondary-active',
+  'lua:active:bg-secondary-hover',
+  'lua:active:bg-secondary',
+  'lua:active:bg-default-active',
+  'lua:active:bg-destructive-active',
+  'lua:hover:bg-muted',
+
   // IconButton
   'lua:size-7',
   'lua:size-10',
@@ -483,7 +519,7 @@ export const luaniverseSafelist = [
   'lua:data-[state=checked]:bg-primary',
   'lua:data-[state=checked]:text-primary-foreground',
   'lua:data-[state=checked]:border-primary',
-  'lua:aria-[invalid=true]:border-destructive',
+  'lua:aria-[invalid=true]:border-danger',
   'lua:disabled:opacity-50',
   'lua:disabled:cursor-not-allowed',
   'lua:focus-visible:ring-offset-2',
@@ -647,7 +683,9 @@ export const luaniverseSafelist = [
   'lua:border-input',
   'lua:focus-visible:ring-ring',
   'lua:border-destructive',
+  'lua:border-danger',
   'lua:focus-visible:ring-destructive',
+  'lua:focus-visible:ring-danger',
   'lua:border-success',
   'lua:focus-visible:ring-success',
   'lua:opacity-50',

package/dist/safelist.txt

@@ -5,7 +5,7 @@
 # Usage in your CSS:
 # @source "./node_modules/@lua-ai-global/luaniverse/dist/safelist.txt";
 #
-# Total classes: 654
+# Total classes: 686
 
 lua:bg-emphasis-base
 lua:bg-emphasis-hover
@@ -185,6 +185,7 @@ lua:border-border
 lua:border-primary
 lua:border-secondary
 lua:border-destructive
+lua:border-danger
 lua:border-success
 lua:border-warning
 lua:border-info
@@ -229,6 +230,11 @@ lua:bg-muted
 lua:text-muted-foreground
 lua:bg-accent
 lua:text-accent-foreground
+lua:text-danger
+lua:border-danger
+lua:bg-danger
+lua:text-danger-foreground
+lua:hover:bg-danger-hover
 lua:bg-destructive
 lua:text-destructive-foreground
 lua:bg-destructive-hover
@@ -393,6 +399,30 @@ lua:before:font-normal
 lua:before:mr-4
 lua:before:min-w-[100px]
 lua:md:before:content-none
+lua-btn-loading
+lua-btn-loader-dot
+lua:gap-1.5
+lua:h-7
+lua:h-9
+lua:h-12
+lua:leading-5
+lua:leading-6
+lua:size-4
+lua:text-current
+lua:pl-3
+lua:pr-3
+lua:disabled:bg-black/5
+lua:disabled:text-black/15
+lua:disabled:shadow-none
+lua:disabled:border-transparent
+lua:active:bg-primary-active
+lua:active:text-primary-foreground
+lua:active:bg-secondary-active
+lua:active:bg-secondary-hover
+lua:active:bg-secondary
+lua:active:bg-default-active
+lua:active:bg-destructive-active
+lua:hover:bg-muted
 lua:size-7
 lua:size-10
 lua:size-12
@@ -409,7 +439,7 @@ lua:outline-hidden
 lua:data-[state=checked]:bg-primary
 lua:data-[state=checked]:text-primary-foreground
 lua:data-[state=checked]:border-primary
-lua:aria-[invalid=true]:border-destructive
+lua:aria-[invalid=true]:border-danger
 lua:disabled:opacity-50
 lua:disabled:cursor-not-allowed
 lua:focus-visible:ring-offset-2
@@ -555,7 +585,9 @@ lua:focus-visible:ring-offset-background
 lua:border-input
 lua:focus-visible:ring-ring
 lua:border-destructive
+lua:border-danger
 lua:focus-visible:ring-destructive
+lua:focus-visible:ring-danger
 lua:border-success
 lua:focus-visible:ring-success
 lua:opacity-50

package/dist/theme.css

@@ -29,14 +29,14 @@
     /* Default (Emphasis - Black/Bold) */
     --default: 0 0% 0%;
     --default-foreground: 0 0% 100%;
-    --default-hover: 0 0% 10%;
-    --default-active: 0 0% 10%;
+    --default-hover: 0 0% 20%;
+    --default-active: 0 0% 30%;
 
     /* Primary (Brand - Blue) */
-    --primary: 221 83% 53%;
+    --primary: 218 100% 59%;
     --primary-foreground: 0 0% 100%;
-    --primary-hover: 221 83% 45%;
-    --primary-active: 221 77% 40%;
+    --primary-hover: 218 74% 53%;
+    --primary-active: 218 66% 48%;
 
     /* Secondary (Neutral) */
     --secondary: 220 13% 95%;
@@ -49,7 +49,7 @@
     --muted-foreground: 215 16% 47%;
 
     /* Accent */
-    --accent: 221 83% 53%;
+    --accent: 218 100% 59%;
     --accent-foreground: 0 0% 100%;
 
     /* Accent Subtle (for tabs, pills) */
@@ -57,11 +57,16 @@
     --accent-subtle-foreground: 213 97% 27%;
     --accent-subtle-hover: 214 100% 92%;
 
-    /* Destructive (Danger) */
-    --destructive: 0 84% 60%;
+    /* Destructive (Action - Dark Maroon for button fills) */
+    --destructive: 0 63% 31%;
     --destructive-foreground: 0 0% 100%;
-    --destructive-hover: 0 72% 51%;
-    --destructive-active: 0 74% 42%;
+    --destructive-hover: 0 63% 36%;
+    --destructive-active: 0 63% 26%;
+
+    /* Danger (Indicator - Bright red for errors, alerts, validation) */
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --danger-hover: 0 72% 51%;
 
     /* Success */
     --success: 142 71% 45%;
@@ -81,12 +86,13 @@
     /* Border & Input */
     --border: 220 13% 87%;
     --input: 220 13% 87%;
-    --ring: 221 83% 53%;
+    --ring: 218 100% 59%;
 
     /* Semantic Border Tokens */
-    --border-primary: 221 83% 53%;
+    --border-primary: 218 100% 59%;
     --border-secondary: 220 13% 87%;
-    --border-destructive: 0 84% 60%;
+    --border-destructive: 0 63% 31%;
+    --border-danger: 0 84% 60%;
     --border-success: 142 71% 45%;
     --border-warning: 38 92% 50%;
     --border-info: 217 91% 60%;
@@ -137,12 +143,17 @@
   --color-accent-subtle-foreground: hsl(var(--accent-subtle-foreground));
   --color-accent-subtle-hover: hsl(var(--accent-subtle-hover));
 
-  /* Destructive Tokens (Danger - Red) */
+  /* Destructive Tokens (Action - Dark Maroon) */
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
   --color-destructive-hover: hsl(var(--destructive-hover));
   --color-destructive-active: hsl(var(--destructive-active));
 
+  /* Danger Tokens (Indicator - Bright Red) */
+  --color-danger: hsl(var(--danger));
+  --color-danger-foreground: hsl(var(--danger-foreground));
+  --color-danger-hover: hsl(var(--danger-hover));
+
   /* Success Tokens (Green) */
   --color-success: hsl(var(--success));
   --color-success-foreground: hsl(var(--success-foreground));
@@ -167,6 +178,7 @@
   --color-border-primary: hsl(var(--border-primary));
   --color-border-secondary: hsl(var(--border-secondary));
   --color-border-destructive: hsl(var(--border-destructive));
+  --color-border-danger: hsl(var(--border-danger));
   --color-border-success: hsl(var(--border-success));
   --color-border-warning: hsl(var(--border-warning));
   --color-border-info: hsl(var(--border-info));
@@ -216,12 +228,17 @@
     --accent-subtle-foreground: 213 94% 68%;
     --accent-subtle-hover: 217 19% 35%;
 
-    /* Destructive (Danger) - Bright enough for readability */
+    /* Destructive (Action) - Inverted for dark mode */
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --destructive-hover: 0 91% 71%;
     --destructive-active: 0 72% 51%;
 
+    /* Danger (Indicator) - Bright red for errors on dark backgrounds */
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 98%;
+    --danger-hover: 0 91% 71%;
+
     /* Success - Slightly lighter */
     --success: 142 71% 45%;
     --success-foreground: 0 0% 100%;
@@ -246,12 +263,88 @@
     --border-primary: 217 91% 60%;
     --border-secondary: 220 13% 24%;
     --border-destructive: 0 84% 60%;
+    --border-danger: 0 84% 60%;
     --border-success: 142 71% 45%;
     --border-warning: 38 92% 50%;
     --border-info: 213 97% 70%;
   }
 }
 
+/* Button gradient shine overlay - subtle white-to-transparent highlight from Figma */
+.lua-btn-shine {
+  position: relative;
+  overflow: hidden;
+}
+.lua-btn-shine::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 1;
+}
+.lua-btn-shine-brand::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+.lua-btn-shine-destructive::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+}
+.lua-btn-shine:disabled::before {
+  display: none;
+}
+
+@keyframes button-loader-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.95); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+.lua-btn-loader-dot {
+  animation: button-loader-pulse 1.4s ease-in-out infinite;
+}
+
+.lua-btn-loader-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.lua-btn-loader-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.lua-btn-loading[data-loading='true'] {
+  --lua-loading-bg: hsl(220 13% 95%);
+  --lua-loading-text: hsl(220 9% 46%);
+  background-color: var(--lua-loading-bg) !important;
+  color: var(--lua-loading-text) !important;
+  border-color: transparent !important;
+}
+
+.lua-btn-loading[data-loading='true'][data-variant='brand'] {
+  --lua-loading-bg: hsl(218 100% 59% / 0.15);
+  --lua-loading-text: hsl(218 100% 59%);
+}
+
+.lua-btn-loading[data-loading='true'][data-variant='destructive'] {
+  --lua-loading-bg: hsl(0 63% 31% / 0.12);
+  --lua-loading-text: hsl(0 63% 31%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .lua-btn-loading[data-loading='true'] {
+    --lua-loading-bg: hsl(220 13% 16%);
+    --lua-loading-text: hsl(220 9% 65%);
+  }
+
+  .lua-btn-loading[data-loading='true'][data-variant='brand'] {
+    --lua-loading-bg: hsl(217 91% 60% / 0.2);
+    --lua-loading-text: hsl(213 97% 70%);
+  }
+
+  .lua-btn-loading[data-loading='true'][data-variant='destructive'] {
+    --lua-loading-bg: hsl(0 84% 60% / 0.15);
+    --lua-loading-text: hsl(0 91% 71%);
+  }
+}
+
 .rdp-root {
   /* Calendar background */
   --rdp-background-color: hsl(var(--surface));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luaniverse",
-  "version": "4.2.23",
+  "version": "4.2.25",
   "description": "Lua Design System - A React component library for Lua applications",
   "type": "module",
   "main": "dist/index.cjs",