@uipath/apollo-wind 2.2.1 → 2.3.0-pr525.ea16466

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "./badge" (module) {
+    "@/components/ui/badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -30,13 +30,13 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -60,10 +60,10 @@ var __webpack_modules__ = {
     "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -72,7 +72,7 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "@/components/ui/input" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("./badge");
+    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -276,7 +276,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -290,7 +290,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -311,7 +311,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -346,14 +346,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -374,7 +374,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/dist/styles.css

@@ -8065,7 +8065,7 @@ body.future-dark, .future-dark {
   --surface-hover: var(--color-zinc-700);
   --surface-muted: var(--color-zinc-500);
   --surface-inverse: var(--color-zinc-50);
-  --brand: var(--color-cyan-600);
+  --brand: var(--color-cyan-500);
   --brand-subtle: var(--color-cyan-950);
   --foreground: var(--color-zinc-50);
   --foreground-secondary: var(--color-zinc-100);
@@ -8073,8 +8073,8 @@ body.future-dark, .future-dark {
   --foreground-muted: var(--color-zinc-400);
   --foreground-subtle: var(--color-zinc-500);
   --foreground-inverse: var(--color-zinc-950);
-  --foreground-on-accent: var(--color-zinc-50);
-  --foreground-accent: var(--color-cyan-600);
+  --foreground-on-accent: var(--color-zinc-950);
+  --foreground-accent: var(--color-cyan-500);
   --foreground-accent-muted: var(--color-cyan-400);
   --ap-wind-border: var(--color-zinc-700);
   --border-subtle: var(--color-zinc-800);
@@ -8103,6 +8103,19 @@ body.future-dark, .future-dark {
   --warning-background: #000000;
   --info: #42a1ff;
   --info-background: #000000;
+  --status-destructive: var(--color-red-950);
+  --status-destructive-fg: var(--color-red-400);
+  --status-success: var(--color-emerald-950);
+  --status-success-fg: var(--color-emerald-400);
+  --status-warning: var(--color-amber-950);
+  --status-warning-fg: var(--color-amber-400);
+  --status-info: var(--color-cyan-950);
+  --status-info-fg: var(--color-cyan-400);
+  --chart-1: var(--color-cyan-400);
+  --chart-2: var(--color-violet-400);
+  --chart-3: var(--color-emerald-400);
+  --chart-4: var(--color-amber-400);
+  --chart-5: var(--color-rose-400);
   --background: var(--surface);
   --card: var(--surface-raised);
   --card-foreground: var(--foreground);
@@ -8136,7 +8149,7 @@ body.future-light, .future-light {
   --surface-hover: var(--color-zinc-300);
   --surface-muted: var(--color-zinc-400);
   --surface-inverse: var(--color-zinc-950);
-  --brand: var(--color-cyan-600);
+  --brand: var(--color-cyan-500);
   --brand-subtle: var(--color-cyan-50);
   --foreground: var(--color-zinc-950);
   --foreground-secondary: var(--color-zinc-900);
@@ -8144,8 +8157,8 @@ body.future-light, .future-light {
   --foreground-muted: var(--color-zinc-500);
   --foreground-subtle: var(--color-zinc-400);
   --foreground-inverse: var(--color-zinc-50);
-  --foreground-on-accent: var(--color-zinc-50);
-  --foreground-accent: var(--color-cyan-600);
+  --foreground-on-accent: var(--color-zinc-950);
+  --foreground-accent: var(--color-cyan-500);
   --foreground-accent-muted: var(--color-cyan-600);
   --ap-wind-border: var(--color-zinc-300);
   --border-subtle: var(--color-zinc-200);
@@ -8174,6 +8187,19 @@ body.future-light, .future-light {
   --warning-background: #fff3db;
   --info: #1665b3;
   --info-background: #e9f1fa;
+  --status-destructive: var(--color-red-100);
+  --status-destructive-fg: var(--color-red-700);
+  --status-success: var(--color-emerald-100);
+  --status-success-fg: var(--color-emerald-700);
+  --status-warning: var(--color-amber-100);
+  --status-warning-fg: var(--color-amber-700);
+  --status-info: var(--color-cyan-100);
+  --status-info-fg: var(--color-cyan-700);
+  --chart-1: var(--color-cyan-600);
+  --chart-2: var(--color-violet-600);
+  --chart-3: var(--color-emerald-600);
+  --chart-4: var(--color-amber-600);
+  --chart-5: var(--color-rose-600);
   --background: var(--surface);
   --card: var(--surface-raised);
   --card-foreground: var(--foreground);
@@ -8443,6 +8469,17 @@ body.canvas, .canvas {
     opacity: 0;
   }
 }
+@keyframes apollo-glow {
+  0% {
+    box-shadow: 0 0 0 0 var(--_glow-shadow, currentColor);
+  }
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
 .future-dark, .dark, .dark-hc {
   scrollbar-width: thin;
   scrollbar-color: var(--color-border) transparent;

package/dist/tailwind.css

@@ -377,7 +377,7 @@ body.future-dark, .future-dark {
   /* buttons on dark bg */
 
   /* ── Brand ──────────────────────────────────────────────────────────── */
-  --brand: var(--color-cyan-600);
+  --brand: var(--color-cyan-500);
   /* logo, submit, run */
   --brand-subtle: var(--color-cyan-950);
   /* status badge, active nav */
@@ -395,9 +395,9 @@ body.future-dark, .future-dark {
   /* labels, muted */
   --foreground-inverse: var(--color-zinc-950);
   /* icons on light bg */
-  --foreground-on-accent: var(--color-zinc-50);
+  --foreground-on-accent: var(--color-zinc-950);
   /* text on accent bg */
-  --foreground-accent: var(--color-cyan-600);
+  --foreground-accent: var(--color-cyan-500);
   /* accent text */
   --foreground-accent-muted: var(--color-cyan-400);
   /* muted accent text */
@@ -457,6 +457,21 @@ body.future-dark, .future-dark {
   --warning-background: #000000;
   --info: #42a1ff;
   --info-background: #000000;
+  --status-destructive: var(--color-red-950);
+  --status-destructive-fg: var(--color-red-400);
+  --status-success: var(--color-emerald-950);
+  --status-success-fg: var(--color-emerald-400);
+  --status-warning: var(--color-amber-950);
+  --status-warning-fg: var(--color-amber-400);
+  --status-info: var(--color-cyan-950);
+  --status-info-fg: var(--color-cyan-400);
+
+  /* ── Chart ───────────────────────────────────────────────────────────── */
+  --chart-1: var(--color-cyan-400);
+  --chart-2: var(--color-violet-400);
+  --chart-3: var(--color-emerald-400);
+  --chart-4: var(--color-amber-400);
+  --chart-5: var(--color-rose-400);
 
   /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
   --background: var(--surface);
@@ -509,7 +524,7 @@ body.future-light, .future-light {
   /* buttons on light bg */
 
   /* ── Brand ──────────────────────────────────────────────────────────── */
-  --brand: var(--color-cyan-600);
+  --brand: var(--color-cyan-500);
   /* logo, submit, run */
   --brand-subtle: var(--color-cyan-50);
   /* status badge, active nav */
@@ -527,9 +542,9 @@ body.future-light, .future-light {
   /* labels, muted */
   --foreground-inverse: var(--color-zinc-50);
   /* icons on dark bg */
-  --foreground-on-accent: var(--color-zinc-50);
+  --foreground-on-accent: var(--color-zinc-950);
   /* text on accent bg */
-  --foreground-accent: var(--color-cyan-600);
+  --foreground-accent: var(--color-cyan-500);
   /* accent text */
   --foreground-accent-muted: var(--color-cyan-600);
   /* muted accent text */
@@ -589,6 +604,21 @@ body.future-light, .future-light {
   --warning-background: #fff3db;
   --info: #1665b3;
   --info-background: #e9f1fa;
+  --status-destructive: var(--color-red-100);
+  --status-destructive-fg: var(--color-red-700);
+  --status-success: var(--color-emerald-100);
+  --status-success-fg: var(--color-emerald-700);
+  --status-warning: var(--color-amber-100);
+  --status-warning-fg: var(--color-amber-700);
+  --status-info: var(--color-cyan-100);
+  --status-info-fg: var(--color-cyan-700);
+
+  /* ── Chart ───────────────────────────────────────────────────────────── */
+  --chart-1: var(--color-cyan-600);
+  --chart-2: var(--color-violet-600);
+  --chart-3: var(--color-emerald-600);
+  --chart-4: var(--color-amber-600);
+  --chart-5: var(--color-rose-600);
 
   /* ── shadcn aliases ──────────────────────────────────────────────────── */
   --background: var(--surface);
@@ -1228,6 +1258,45 @@ body.canvas, .canvas {
   --animate-collapsible-up: collapsible-up 200ms ease-out;
 }
 
+/* ============================================================================
+ * Glow — attention-drawing ring pulse
+ *
+ * `animate-glow` drives an expanding box-shadow ring around any element.
+ * The color and intensity are driven by CSS variables so the same utility
+ * works for status indicators, brand highlights, ad-hoc attention prompts,
+ * or any custom color.
+ *
+ * Knobs (set via inline style or a Tailwind arbitrary value):
+ *   --glow-color    source color  (default: currentColor)
+ *   --glow-strength mix percent   (default: 40%)
+ *
+ * Examples:
+ *   <div className="animate-glow [--glow-color:var(--error)]" />
+ *   <div className="animate-glow [--glow-color:var(--info)] [--glow-strength:60%]" />
+ *   <div className="text-info animate-glow" />   // picks up --brand or falls back to currentColor
+ *
+ * Implementation note: the color-mix lives in the utility body (not the
+ * keyframe) to avoid a lightningcss bug that drops keyframe declarations
+ * containing `color-mix(... var(...) ...)`. The internal `--_glow-shadow`
+ * holds the pre-mixed value for the keyframe to consume.
+ * ============================================================================ */
+
+@keyframes apollo-glow {
+  0%   { box-shadow: 0 0 0 0 var(--_glow-shadow, currentColor); }
+  70%  { box-shadow: 0 0 0 10px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+
+@utility animate-glow {
+  --_glow-shadow: color-mix(
+    in srgb,
+    var(--glow-color, var(--brand, currentColor)) var(--glow-strength, 40%),
+    transparent
+  );
+  will-change: box-shadow;
+  animation: apollo-glow 2s infinite;
+}
+
 /* ============================================================================
  * Theme-aware scrollbars
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.2.1",
+  "version": "2.3.0-pr525.ea16466",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",