@zvoove/unity-ui 2.45.1 → 2.47.0

package/dist/llms.txt

@@ -564,7 +564,8 @@ Primary action component with multiple variants.
 import { Button } from '@zvoove/unity-ui';
 
 <Button
-  variant="filled"             // ResponsiveType<'filled' | 'outlined' | 'text' | 'textSecondary' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative'>
+  variant="filled"             // ResponsiveType<'filled' | 'outlined' | 'text' | 'textSecondary' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative' | 'warning' | 'neutral' | 'white' | 'subtle' | 'outlinedPositive' | 'outlinedNegative' | 'outlinedWarning' | 'outlinedNeutral' | 'outlinedSubtle' | 'linkPositive' | 'linkNegative' | 'linkWarning' | 'linkWhite' | 'textPositive' | 'textNegative' | 'textWarning' | 'textWhite' | 'textSubtle'>
+  contrast={false}             // boolean — status variants only: use the container-tier color (lighter in light mode, darker in dark mode) instead of the vivid one
   size="lg"                    // ResponsiveType<'sm' | 'md' | 'lg'> (default: 'lg')
   icon="Plus"                  // CommonIconNames | Omit<IconProps, 'size' | 'color'>
   hideLabel={false}            // ResponsiveType<boolean>
@@ -592,6 +593,29 @@ Variant guide:
 // Success action → positive
 <Button variant="positive" icon="check">Confirm</Button>
 
+// Other status colors: warning, neutral, subtle. Each status color also has an
+// `outlined` counterpart (outlinedPositive, outlinedNegative, outlinedWarning,
+// outlinedNeutral, outlinedSubtle) for a less prominent action, a compact inline
+// `link` counterpart (linkPositive, linkNegative, linkWarning) for a text-only
+// action, and a button-shaped `text` counterpart (textPositive, textNegative,
+// textWarning, textSubtle) for a full-sized text-only action. `link`/`text`
+// counterparts use the same readable color as their `outlined` sibling, not the
+// solid variant's (sometimes pale) background
+<Button variant="warning" icon="warning">Proceed with caution</Button>
+<Button variant="outlinedNegative" icon="delete">Delete</Button>
+<Button variant="textPositive">Confirm</Button>
+
+// contrast: swap a status variant to its container-tier color instead of the
+// vivid one — use it to keep a status action legible when it sits on a
+// background from the same color family (e.g. inside a matching colored InfoBox)
+<Button variant="positive" contrast icon="check">Confirm</Button>
+
+// white / linkWhite / textWhite: uses the `surface` color, which flips opposite
+// of the current theme (white in light mode, dark in dark mode) — for an action
+// on a background that itself flips opposite of the theme, like InfoBox's
+// `default` variant
+<Button variant="white">Confirm</Button>
+
 // Subtle/tertiary action → text
 <Button variant="text">Learn more</Button>
 
@@ -1312,10 +1336,11 @@ import { InfoBox } from '@zvoove/unity-ui';
   variant="positive"            // 'default' | 'positive' | 'warning' | 'error' | 'subtle' | 'neutral' | 'outlined'
   icon="CheckCircle"            // CommonIconNames
   elevated={true}               // boolean (default: true)
-  borderRadius="sm"             // 'none' | 'sm' | 'md' | 'lg' | 'xl' (default: 'sm')
+  borderRadius="rounded"        // 'none' | 'rounded' (default: 'rounded')
+  leftBorder={true}             // boolean (default: false); 4px border colored to match variant
   actions={[                    // InfoBoxAction[] (optional)
-    { label: 'Learn more', onClick: handleLearnMore }, // defaults to text
-    { label: 'Continue', onClick: handleContinue },    // last defaults to filled
+    { label: 'Learn more', onClick: handleLearnMore }, // defaults to a matching Button variant
+    { label: 'Continue', onClick: handleContinue },    // last defaults to a matching Button variant
   ]}
   showCloseButton={true}        // boolean (default: false)
   onClose={handleClose}         // callback; InfoBox stays mounted
@@ -1327,6 +1352,12 @@ own width: content stays inline when it fits and moves the actions to a
 stacked row when the container is below the 480px boundary. A title always
 uses the stacked layout.
 
+Action buttons default to a Button variant matching the InfoBox's own `variant`
+(e.g. `error` → `negative` primary / `outlinedNegative` secondary, `default` →
+`white` primary / `textWhite` secondary) instead of the generic primary color,
+so they read as belonging to the same status. Pass `variant` on an individual
+action to override this.
+
 ### ConfirmationCard
 Status card with actions.
 ```tsx

package/dist/theme.css

@@ -520,6 +520,19 @@
       transform: scale(1);
     }
   }
+
+  @keyframes ai-gradient-move {
+    0% {
+      background-position:
+        0% 0%,
+        0% 50%;
+    }
+    100% {
+      background-position:
+        0% 0%,
+        200% 50%;
+    }
+  }
 }
 
 @layer base {
@@ -753,6 +766,38 @@
     animation: indeterminate 2s ease-in-out infinite;
   }
 
+  /*
+   * Moving multi-color gradient ring for an "AI is working" affordance.
+   * Classic two-background border trick: an inner solid layer clipped to
+   * padding-box (the fill) sits on top of a gradient layer clipped to
+   * border-box (the ring) — pair with a transparent border of the desired
+   * width. The gradient repeats its first color at the end and animates
+   * exactly one pattern-width, so the loop has no visible seam.
+   */
+  .ai-gradient-border {
+    background-image:
+      linear-gradient(var(--color-surface), var(--color-surface)),
+      linear-gradient(
+        90deg,
+        var(--color-primary),
+        var(--color-tertiary),
+        var(--color-pink),
+        var(--color-secondary),
+        var(--color-steel-blue),
+        var(--color-primary)
+      );
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    background-size:
+      100% 100%,
+      300% 100%;
+    animation: ai-gradient-move 6s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
   .animate-circular-indeterminate {
     animation: circular-indeterminate 1.2s ease-in-out infinite;
   }