@zvoove/unity-ui 2.45.1 → 2.46.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