@uipath/apollo-vertex 0.0.0-stage → 0.3.0

package/dist/tailwind.css

@@ -0,0 +1,26 @@
+/**
+ * Apollo Vertex: Tailwind CSS with the Vertex theme.
+ *
+ * Usage:
+ *   @import "@uipath/apollo-vertex/tailwind.css";
+ *
+ * Add your own @source directive to scan your project files. This file
+ * already registers the package's built components.
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./theme.css";
+
+@source "./";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/theme.css

@@ -0,0 +1,310 @@
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-badge: var(--badge);
+  --color-badge-foreground: var(--badge-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-sans);
+  --color-ai-chat: var(--ai-chat);
+  --color-ai-chat-foreground: var(--ai-chat-foreground);
+  --color-ai-chat-accent: var(--ai-chat-accent);
+  --color-ai-chat-accent-foreground: var(--ai-chat-accent-foreground);
+  --color-ai-chat-bubble-user: var(--ai-chat-bubble-user);
+  --color-ai-chat-bubble-user-foreground: var(--ai-chat-bubble-user-foreground);
+  --color-ai-chat-bubble-assistant: var(--ai-chat-bubble-assistant);
+  --color-ai-chat-bubble-assistant-foreground: var(--ai-chat-bubble-assistant-foreground);
+  --color-ai-chat-border: var(--ai-chat-border);
+  --color-ai-chat-input: var(--ai-chat-input);
+  --color-ai-chat-input-foreground: var(--ai-chat-input-foreground);
+  --color-ai-chat-ring: var(--ai-chat-ring);
+  --color-ai-chat-muted: var(--ai-chat-muted);
+  --color-ai-chat-muted-foreground: var(--ai-chat-muted-foreground);
+  --color-insight-50: var(--insight-50);
+  --color-insight-100: var(--insight-100);
+  --color-insight-200: var(--insight-200);
+  --color-insight-300: var(--insight-300);
+  --color-insight-400: var(--insight-400);
+  --color-insight-500: var(--insight-500);
+  --color-insight-600: var(--insight-600);
+  --color-insight-700: var(--insight-700);
+  --color-insight-800: var(--insight-800);
+  --color-insight-900: var(--insight-900);
+}
+:root {
+  --background: oklch(1 0 89.8800);
+  --foreground: oklch(0.2394 0.0455 252.4500);
+  --card: oklch(1 0 89.8800);
+  --card-foreground: oklch(0.2394 0.0455 252.4500);
+  --popover: oklch(1 0 89.8800);
+  --popover-foreground: oklch(0.2394 0.0455 252.4500);
+  --primary: oklch(0.52 0.120 210);
+  --primary-foreground: oklch(1 0 89.8800);
+  --primary-50: oklch(0.95 0.035 218);
+  --primary-100: oklch(0.92 0.045 216);
+  --primary-200: oklch(0.86 0.060 214);
+  --primary-300: oklch(0.80 0.080 212);
+  --primary-400: oklch(0.75 0.100 210);
+  --primary-500: oklch(0.69 0.112 207);
+  --primary-600: oklch(0.64 0.115 208);
+  --primary-700: oklch(0.52 0.120 210);
+  --primary-800: oklch(0.46 0.095 220);
+  --primary-900: oklch(0.2394 0.0455 252.445);
+  --secondary: oklch(0.9593 0.0069 247.9000);
+  --secondary-foreground: oklch(0.2394 0.0455 252.4500);
+  --muted: oklch(0.9630 0.0062 255.4800);
+  --muted-foreground: oklch(0.4594 0.0280 264.2500);
+  --accent: oklch(0.9593 0.0069 247.9000 / 0.75);
+  --accent-foreground: oklch(0.2394 0.0455 252.4500);
+  --destructive: oklch(0.50 0.15 18);
+  --destructive-foreground: oklch(1 0 89.8800);
+  --brand-orange: #fa4616;
+  --success: oklch(0.57 0.105 152);
+  --success-foreground: oklch(1 0 89.8800);
+  --info: oklch(0.52 0.120 210);
+  --info-foreground: oklch(1 0 89.8800);
+  --warning: oklch(0.80 0.1401 80.82);
+  --warning-foreground: oklch(0.1660 0.0283 203.3400);
+  --badge: oklch(0.5995 0.0199 253.42);
+  --badge-foreground: oklch(1 0 89.8800);
+  --border: oklch(0.9229 0.0065 252.1300);
+  --input: oklch(0.9229 0.0065 252.1300);
+  --ring: oklch(0.64 0.115 208);
+  --chart-1: oklch(0.64 0.115 208);
+  --chart-2: oklch(0.6100 0.1450 285.3000);
+  --chart-3: oklch(0.8300 0.1550 75.2000);
+  --chart-4: oklch(0.7200 0.1800 320.8000);
+  --chart-5: oklch(0.6800 0.1500 245.5000);
+  --sidebar: oklch(0.9723 0.0074 260.7300);
+  --sidebar-foreground: oklch(0.2394 0.0455 252.4450);
+  --sidebar-primary: oklch(0.64 0.115 208);
+  --sidebar-primary-foreground: oklch(0.1660 0.0283 203.3380);
+  --sidebar-accent: oklch(0.9593 0.0069 247.9000);
+  --sidebar-accent-foreground: oklch(0.1660 0.0283 203.3380);
+  --sidebar-border: oklch(0.9237 0.0133 262.3780);
+  --sidebar-ring: oklch(0.64 0.115 208);
+  --insight-50: oklch(0.96 0.03 277);
+  --insight-100: oklch(0.92 0.05 277);
+  --insight-200: oklch(0.86 0.09 277);
+  --insight-300: oklch(0.78 0.14 277);
+  --insight-400: oklch(0.70 0.19 277);
+  --insight-500: oklch(0.62 0.22 277);
+  --insight-600: oklch(0.56 0.20 277);
+  --insight-700: oklch(0.48 0.17 277);
+  --insight-800: oklch(0.38 0.13 278);
+  --insight-900: oklch(0.30 0.10 278);
+  --font-sans: 'Inter Variable', Inter, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: ui-serif, serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.625rem;
+  --shadow-x: 0;
+  --shadow-y: 0px;
+  --shadow-blur: 12px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0.4594 0.0280 264.25);
+  --shadow-2xs: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.05);
+  --shadow-xs: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.05);
+  --shadow-sm: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.10), 0 1px 2px -1px hsl(220.0009 13.0382% 36.0747% / 0.10);
+  --shadow: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.10), 0 1px 2px -1px hsl(220.0009 13.0382% 36.0747% / 0.10);
+  --shadow-md: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.10), 0 2px 4px -1px hsl(220.0009 13.0382% 36.0747% / 0.10);
+  --shadow-lg: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.10), 0 4px 6px -1px hsl(220.0009 13.0382% 36.0747% / 0.10);
+  --shadow-xl: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.10), 0 8px 10px -1px hsl(220.0009 13.0382% 36.0747% / 0.10);
+  --shadow-2xl: 0 0px 12px 0px hsl(220.0009 13.0382% 36.0747% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --info-fg: oklch(0.49 0.12 210);
+  --success-fg: oklch(0.46 0.10 152);
+  --destructive-fg: oklch(0.50 0.14 18);
+  --ai-chat: oklch(0.985 0.002 260);
+  --ai-chat-foreground: oklch(0.2394 0.0455 252.45);
+  --ai-chat-accent: oklch(0.64 0.115 208);
+  --ai-chat-accent-foreground: oklch(1 0 0);
+  --ai-chat-bubble-user: oklch(0.955 0.008 252);
+  --ai-chat-bubble-user-foreground: oklch(0.2394 0.0455 252.45);
+  --ai-chat-bubble-assistant: oklch(0.96 0.020 275);
+  --ai-chat-bubble-assistant-foreground: oklch(0.2394 0.0455 252.45);
+  --ai-chat-border: oklch(0.92 0.008 260);
+  --ai-chat-input: oklch(0.975 0.004 260);
+  --ai-chat-input-foreground: oklch(0.2394 0.0455 252.45);
+  --ai-chat-ring: oklch(0.64 0.115 208);
+  --ai-chat-muted: oklch(0.955 0.006 260);
+  --ai-chat-muted-foreground: oklch(0.50 0.020 260);
+  --ai-chat-brand-gradient: linear-gradient(97.73deg, #5D4ED0 8.79%, #1076A0 91.48%);
+  --ai-gradient: linear-gradient(100.64deg, var(--insight-100) 8.29%, var(--primary-50) 88.73%);
+  --ai-glow-start: var(--insight-100);
+  --ai-glow-end: var(--primary-50);
+  --ai-glass: color-mix(in srgb, var(--card) 80%, transparent);
+  --ai-gradient-fill: linear-gradient(97.73deg, var(--insight-600) 8.79%, var(--primary-700) 91.48%);
+  --ai-gradient-text: linear-gradient(97.73deg, var(--insight-600) 8.79%, var(--primary-700) 91.48%);
+  --ai-gradient-strong: linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%);
+  --ai-gradient-start: #6C5AEF;
+  --ai-gradient-end: #69C7DD;
+}
+.dark {
+  --background: oklch(0.2100 0.0300 258.5000);
+  --foreground: oklch(0.9850 0 0);
+  --card: oklch(0.2330 0.0360 254.7000);
+  --card-foreground: oklch(0.9525 0.0110 225.9800);
+  --popover: oklch(0.2100 0.0300 258.5000);
+  --popover-foreground: oklch(0.9850 0 0);
+  --primary: oklch(0.69 0.112 207);
+  --primary-foreground: oklch(0.1660 0.0283 203.3400);
+  --primary-50: oklch(0.95 0.035 218);
+  --primary-100: oklch(0.92 0.045 216);
+  --primary-200: oklch(0.86 0.060 214);
+  --primary-300: oklch(0.80 0.080 212);
+  --primary-400: oklch(0.75 0.100 210);
+  --primary-500: oklch(0.69 0.112 207);
+  --primary-600: oklch(0.64 0.115 208);
+  --primary-700: oklch(0.52 0.120 210);
+  --primary-800: oklch(0.46 0.095 220);
+  --primary-900: oklch(0.2394 0.0455 252.445);
+  --secondary: oklch(0.3927 0.0289 240.8600);
+  --secondary-foreground: oklch(0.9416 0.0145 244.7200);
+  --muted: oklch(0.2648 0.0329 254.3800);
+  --muted-foreground: oklch(0.7200 0.0300 254.3800);
+  --accent: oklch(0.3927 0.0289 240.8600 / 0.75);
+  --accent-foreground: oklch(0.9416 0.0145 244.7200);
+  --destructive: oklch(0.68 0.155 18);
+  --destructive-foreground: oklch(0.1660 0.0283 203.3400);
+  --brand-orange: #fa4616;
+  --success: oklch(0.70 0.120 152);
+  --success-foreground: oklch(0.1660 0.0283 203.3400);
+  --info: oklch(0.69 0.112 207);
+  --info-foreground: oklch(0.1660 0.0283 203.3400);
+  --warning: oklch(0.6889 0.1401 80.82);
+  --warning-foreground: oklch(0.1660 0.0283 203.3400);
+  --badge: oklch(0.7196 0.0135 255.53);
+  --badge-foreground: oklch(0.1660 0.0283 203.3400);
+  --border: oklch(0.3068 0.0426 258.2900);
+  --input: oklch(0.3068 0.0426 258.2900);
+  --ring: oklch(0.69 0.112 207);
+  --chart-1: oklch(0.69 0.112 207);
+  --chart-2: oklch(0.6100 0.1450 285.3000);
+  --chart-3: oklch(0.8300 0.1550 75.2000);
+  --chart-4: oklch(0.7200 0.1800 320.8000);
+  --chart-5: oklch(0.6800 0.1500 245.5000);
+  --sidebar: oklch(0.1620 0.0310 257.7000);
+  --sidebar-foreground: oklch(0.9525 0.0110 225.9830);
+  --sidebar-primary: oklch(0.69 0.112 207);
+  --sidebar-primary-foreground: oklch(0.1660 0.0283 203.3380);
+  --sidebar-accent: oklch(0.3927 0.0289 240.8600);
+  --sidebar-accent-foreground: oklch(0.9525 0.0110 225.9830);
+  --sidebar-border: oklch(0.9525 0.0110 225.9830);
+  --sidebar-ring: oklch(0.69 0.112 207);
+  --insight-50: oklch(0.96 0.03 277);
+  --insight-100: oklch(0.92 0.05 277);
+  --insight-200: oklch(0.86 0.09 277);
+  --insight-300: oklch(0.78 0.14 277);
+  --insight-400: oklch(0.70 0.19 277);
+  --insight-500: oklch(0.62 0.22 277);
+  --insight-600: oklch(0.56 0.20 277);
+  --insight-700: oklch(0.48 0.17 277);
+  --insight-800: oklch(0.38 0.13 278);
+  --insight-900: oklch(0.30 0.10 278);
+  --font-sans: 'Inter Variable', Inter, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: ui-serif, serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.625rem;
+  --shadow-x: 0;
+  --shadow-y: 0px;
+  --shadow-blur: 12px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 0px 12px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 0px 12px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 0px 12px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 0px 12px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 0px 12px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 0px 12px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 0px 12px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 0px 12px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+  --ai-chat: oklch(0.19 0.025 260);
+  --ai-chat-foreground: oklch(0.95 0.010 225);
+  --ai-chat-accent: oklch(0.69 0.112 207);
+  --ai-chat-accent-foreground: oklch(0.1660 0.0283 203.34);
+  --ai-chat-bubble-user: oklch(0.28 0.035 255);
+  --ai-chat-bubble-user-foreground: oklch(0.95 0.010 225);
+  --ai-chat-bubble-assistant: oklch(0.25 0.030 270);
+  --ai-chat-bubble-assistant-foreground: oklch(0.95 0.010 225);
+  --ai-chat-border: oklch(0.30 0.040 258);
+  --ai-chat-input: oklch(0.22 0.030 258);
+  --ai-chat-input-foreground: oklch(0.95 0.010 225);
+  --ai-chat-ring: oklch(0.69 0.112 207);
+  --ai-chat-muted: oklch(0.26 0.030 258);
+  --ai-chat-muted-foreground: oklch(0.65 0.020 258);
+  --ai-chat-brand-gradient: linear-gradient(97.73deg, #9485F5 8.79%, #69C7DD 91.48%);
+  --ai-gradient: linear-gradient(100.64deg, var(--insight-800) 8.29%, var(--primary-800) 88.73%);
+  --ai-glow-start: var(--insight-800);
+  --ai-glow-end: var(--primary-800);
+  --ai-glass: color-mix(in srgb, var(--card) 90%, transparent);
+  --ai-gradient-fill: linear-gradient(97.73deg, var(--insight-600) 8.79%, var(--primary-700) 91.48%);
+  --ai-gradient-text: linear-gradient(97.73deg, var(--insight-400) 8.79%, var(--primary-400) 91.48%);
+  --ai-gradient-strong: linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%);
+  --ai-gradient-start: #6C5AEF;
+  --ai-gradient-end: #69C7DD;
+}

package/package.json

@@ -1,6 +1,169 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.3.0",
+  "description": "UiPath Apollo Vertex design system components",
+  "license": "MIT",
+  "keywords": [
+    "tanstack-intent"
+  ],
+  "type": "module",
+  "main": "./dist/entries/index.js",
+  "types": "./dist/entries/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/entries/index.d.ts",
+      "default": "./dist/entries/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./tailwind.css": "./dist/tailwind.css",
+    "./locales/*": "./dist/locales/*"
+  },
+  "files": [
+    "dist",
+    "skills"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@mantine/hooks": "^9.6.3",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-store": "^0.11.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/luxon": "^3.7.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^13.1.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.577.0",
+    "luxon": "^3.7.1",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-joyride": "^3.0.2",
+    "react-resizable-panels": "^4.7.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.5"
+  },
+  "peerDependencies": {
+    "@tanstack/ai": "^0.14.0",
+    "@tanstack/ai-client": "^0.8.0",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-router": "^1.132.31",
+    "@ts-rest/core": "^3.53.0-rc.1",
+    "@uipath/uipath-typescript": "^1.7.1",
+    "eventsource-parser": "^3.0.6",
+    "highlight.js": "^11.11.1",
+    "i18next": "^25.8.1 || ^26.0.0",
+    "jwt-decode": "^4.0.0",
+    "pkce-challenge": "^6.0.0",
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0",
+    "react-error-boundary": "^6.0.0",
+    "react-i18next": "^16.5.4 || ^17.0.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^2.15.4",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-db": {
+      "optional": true
+    },
+    "@uipath/proteus-client": {
+      "optional": true
+    },
+    "@uipath/vs-core": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.6",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.19.6",
+    "@tanstack/ai": "0.14.0",
+    "@tanstack/ai-client": "0.8.0",
+    "@tanstack/intent": "0.4.0",
+    "@tanstack/react-query": "^5.104.0",
+    "@tanstack/react-router": "^1.170.40",
+    "@ts-rest/core": "^3.53.0-rc.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.2",
+    "@uipath/uipath-typescript": "^1.8.0",
+    "dependency-cruiser": "^17.3.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eventsource-parser": "^3.0.6",
+    "highlight.js": "^11.11.1",
+    "i18next": "^26.4.2",
+    "jwt-decode": "^4.0.0",
+    "oxlint": "^1.38.0",
+    "oxlint-tsgolint": "^0.18.1",
+    "pkce-challenge": "^6.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-error-boundary": "^6.0.0",
+    "react-i18next": "^17.0.15",
+    "react-markdown": "^10.1.0",
+    "recharts": "2.15.4",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.1.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UiPath/apollo-ui.git",
+    "directory": "packages/apollo-vertex"
+  },
+  "scripts": {
+    "build": "pnpm generate:theme styles/theme.css && rslib build && node scripts/check-dist.mjs",
+    "build:check": "node scripts/check-dist.mjs --list",
+    "generate:theme": "node --experimental-strip-types scripts/generate-theme-css.ts",
+    "dev": "pnpm generate:theme styles/theme.css && rslib build --watch",
+    "clean": "rm -rf dist",
+    "format": "biome format --write",
+    "format:check": "biome format",
+    "lint": "oxlint --type-aware",
+    "lint:fix": "oxlint --fix --type-aware",
+    "lint:deps": "depcruise registry --config .dependency-cruiser.cjs",
+    "typecheck": "tsc --noEmit",
+    "lint:skills": "intent validate skills"
+  }
 }

package/skills/use-vertex-components/SKILL.md

@@ -0,0 +1,168 @@
+---
+name: use-vertex-components
+description: >
+  Build all new UI from @uipath/apollo-vertex components instead of writing
+  new ones. Covers which Vertex component to use for common needs (buttons,
+  forms, dialogs, tables, page headers, empty states, charts, toasts), how to
+  adapt them with variants, className and composition, and what not to do:
+  hand-rolled primitives, raw Radix or other UI libraries, or copied shadcn
+  code. Load before building or changing any UI in an app that uses Apollo
+  Vertex.
+metadata:
+  type: core
+  library: '@uipath/apollo-vertex'
+sources:
+  - 'UiPath/apollo-ui:packages/apollo-vertex/entries/index.ts'
+  - 'UiPath/apollo-ui:packages/apollo-vertex/registry/**/*.tsx'
+---
+
+# Use Apollo Vertex components
+
+Apollo Vertex is the component library for this app. Build every new screen,
+form and widget out of its components. Do not write replacements for Vertex
+components.
+
+## Rules
+
+1. Before writing any markup that renders a control, surface or feedback
+   element, find the Vertex component for it and import it from
+   `@uipath/apollo-vertex`.
+2. If a Vertex component almost fits, adapt it with its props, `variant`,
+   `size`, `className` or `asChild`. Do not fork or copy it.
+3. If no single component fits, compose several Vertex components. A new
+   app-level component is fine only when it is built from Vertex components
+   and adds app logic, not new styling of basic elements.
+4. Never build your own button, input, select, dialog, menu, tooltip, table,
+   tabs, card or similar primitive. Never add another UI library (MUI, Chakra,
+   Ant Design, Headless UI) or raw Radix primitives, and never copy shadcn/ui
+   source into the app.
+5. If you are sure Vertex has nothing for the need, stop and tell the user what
+   is missing before building it.
+
+## Pick the component
+
+| Need | Use |
+| --- | --- |
+| Actions | `Button`, `ButtonGroup`, `Toggle`, `ToggleGroup` |
+| Text and choice inputs | `Input`, `InputGroup`, `Textarea`, `Select`, `Combobox`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `InputOTP` |
+| Dates | `DatePicker`, `Calendar` |
+| Form layout, labels and errors | `Field`, `FieldGroup`, `FieldLabel`, `FieldDescription`, `FieldError`, `Label` |
+| Multi-step forms | `FormWizard`, `Stepper` |
+| Overlays | `Dialog`, `AlertDialog`, `Sheet`, `Drawer`, `Popover`, `HoverCard`, `Tooltip` |
+| Menus | `DropdownMenu`, `ContextMenu`, `Menubar`, `Command`, `NavigationMenu` |
+| Page structure | `PageHeader`, `Breadcrumb`, `Tabs`, `Card`, `Separator`, `ResizablePanelGroup`, `ScrollArea`, `Sidebar` |
+| Lists and tables | `DataTable` with `useDataTable`, `Table`, `Item`, `Pagination` |
+| Status and feedback | `Badge`, `Alert`, `Toaster`, `Progress`, `Spinner`, `Skeleton`, `Empty` |
+| Metrics and charts | `MetricCard`, plus `BarChart`, `LineChart`, `KpiChart` and the other charts |
+| AI content | `AiMark`, `AiGlow`, `AiCaveat`, `ConfidenceSignal`, `FeedbackVoteWidget` |
+| Misc | `Avatar`, `Accordion`, `Collapsible`, `Carousel`, `TimelineRowLayout`, `Kbd`, `AspectRatio` |
+
+Import all of them from `@uipath/apollo-vertex`.
+
+## Adapting a component
+
+Use the built-in variants first:
+
+```tsx
+import { Button } from "@uipath/apollo-vertex";
+
+<Button variant="destructive-outline" size="sm">Delete</Button>
+```
+
+Use `className` for layout and spacing, and `cn()` from the package when classes
+must merge or override:
+
+```tsx
+import { Card, CardContent, cn } from "@uipath/apollo-vertex";
+
+<Card className={cn("w-full", isSelected && "border-primary")}>
+  <CardContent>...</CardContent>
+</Card>
+```
+
+Use `asChild` to give a router link the look of a Vertex component:
+
+```tsx
+<Button asChild variant="link">
+  <Link to="/invoices">Invoices</Link>
+</Button>
+```
+
+Use the theme's semantic tokens (`bg-primary`, `text-muted-foreground`,
+`border-destructive`) rather than raw colors such as `bg-blue-500` or hex values.
+
+## Common Mistakes
+
+### CRITICAL Writing a new primitive
+
+Wrong:
+
+```tsx
+function PrimaryButton({ children, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button className="rounded-md bg-blue-600 px-4 py-2 text-white" {...props}>
+      {children}
+    </button>
+  );
+}
+```
+
+Correct:
+
+```tsx
+import { Button } from "@uipath/apollo-vertex";
+
+<Button>Save</Button>
+```
+
+A hand-rolled control drifts from the design system and misses its focus,
+dark mode and accessibility behavior.
+
+### CRITICAL Bringing in another UI library or raw Radix
+
+Wrong:
+
+```tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+```
+
+Correct:
+
+```tsx
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@uipath/apollo-vertex";
+```
+
+The raw primitive has none of the Vertex styling.
+
+### HIGH Copying a Vertex or shadcn component to change it
+
+Wrong: copying the `Badge` source into `src/components/my-badge.tsx` to add a
+color.
+
+Correct: use an existing `variant`, or pass `className`. If neither is enough,
+tell the user the variant is missing.
+
+A copy stops getting fixes and theme updates from the package.
+
+### HIGH Building an empty or loading state by hand
+
+Wrong:
+
+```tsx
+<div className="flex flex-col items-center p-8 text-gray-500">No invoices yet</div>
+```
+
+Correct:
+
+```tsx
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@uipath/apollo-vertex";
+
+<Empty>
+  <EmptyHeader>
+    <EmptyTitle>No invoices yet</EmptyTitle>
+    <EmptyDescription>Invoices you create appear here.</EmptyDescription>
+  </EmptyHeader>
+</Empty>
+```
+
+Use `Skeleton` or `Spinner` for loading and `Alert` for errors in the same way.