@l3mpire/ui 3.2.1 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@l3mpire/ui",
-  "version": "3.2.1",
+  "version": "3.5.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@l3mpire/icons": "0.6.1"
+    "@l3mpire/icons": "0.6.3"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -61,8 +61,8 @@
     "class-variance-authority": "^0.7",
     "clsx": "^2",
     "tailwind-merge": "^3",
-    "@l3mpire/tokens": "0.13.0",
-    "@l3mpire/icons": "0.6.1"
+    "@l3mpire/icons": "0.6.3",
+    "@l3mpire/tokens": "0.15.0"
   },
   "devDependencies": {
     "@types/react": "^19",
@@ -72,7 +72,7 @@
     "tailwindcss": "^4",
     "tsup": "^8",
     "typescript": "^5",
-    "@l3mpire/icons": "0.6.1"
+    "@l3mpire/icons": "0.6.3"
   },
   "scripts": {
     "build": "cp ../../USAGE.md ./USAGE.md && tsup",

package/src/styles/globals.css

@@ -75,13 +75,20 @@ body {
   --font-weight-regular: var(--font-weight-regular);
   --font-weight-medium: var(--font-weight-medium);
   --font-weight-semibold: var(--font-weight-semibold);
-  --font-weight-bold: var(--font-weight-bold);
+  --font-weight-solid: var(--font-weight-solid);
 
   /* ── Shadows ───────────────────────────────────────────────────────────── */
   --shadow-sm: 0 1px 3px 0 var(--shadow-4);
   --shadow-md: 0 0 4px 0 var(--shadow-4), 0 4px 8px 0 var(--shadow-6);
   --shadow-lg: 0 0 4px 0 var(--shadow-4), 0 8px 16px 0 var(--shadow-8);
   --shadow-focus-ring: 0 0 0 3px rgba(49, 107, 255, 0.15);
+  /* AI-specific elevations — composed on top of the shadow tints */
+  --shadow-elevation-sm: 0 1px 2px var(--shadow-4), 0 1px 1px var(--shadow-2);
+  --shadow-elevation-md: 0 4px 12px -2px var(--shadow-6), 0 2px 4px -1px var(--shadow-4);
+  --shadow-elevation-lg: 0 12px 32px -8px var(--shadow-8), 0 4px 8px -2px var(--shadow-4);
+
+  /* ── AI gradient ───────────────────────────────────────────────────────── */
+  --background-image-ai-gradient: linear-gradient(125deg, var(--blue-500) 0%, var(--violet-500) 55%, var(--indigo-500) 100%);
 
   /* ── Colors: Semantic (shadcn compatible) ───────────────────────────────── */
   --color-background: var(--core-bg-main-primary);
@@ -159,37 +166,91 @@ body {
   --color-badge-outlined-warning-text: var(--comp-badge-outlined-warning-text);
   --color-badge-outlined-neutral-border: var(--comp-badge-outlined-neutral-border);
   --color-badge-outlined-neutral-text: var(--comp-badge-outlined-neutral-text);
-  /* Categorical tones (tonal soft tags) */
-  --color-badge-indigo-bg: var(--comp-badge-indigo-bg);
-  --color-badge-indigo-text: var(--comp-badge-indigo-text);
-  --color-badge-indigo-border: var(--comp-badge-indigo-border);
-  --color-badge-rose-bg: var(--comp-badge-rose-bg);
-  --color-badge-rose-text: var(--comp-badge-rose-text);
-  --color-badge-rose-border: var(--comp-badge-rose-border);
-  --color-badge-lime-bg: var(--comp-badge-lime-bg);
-  --color-badge-lime-text: var(--comp-badge-lime-text);
-  --color-badge-lime-border: var(--comp-badge-lime-border);
-  --color-badge-violet-bg: var(--comp-badge-violet-bg);
-  --color-badge-violet-text: var(--comp-badge-violet-text);
-  --color-badge-violet-border: var(--comp-badge-violet-border);
-  --color-badge-cyan-bg: var(--comp-badge-cyan-bg);
-  --color-badge-cyan-text: var(--comp-badge-cyan-text);
-  --color-badge-cyan-border: var(--comp-badge-cyan-border);
-  --color-badge-orange-bg: var(--comp-badge-orange-bg);
-  --color-badge-orange-text: var(--comp-badge-orange-text);
-  --color-badge-orange-border: var(--comp-badge-orange-border);
-  --color-badge-emerald-bg: var(--comp-badge-emerald-bg);
-  --color-badge-emerald-text: var(--comp-badge-emerald-text);
-  --color-badge-emerald-border: var(--comp-badge-emerald-border);
-  --color-badge-fuchsia-bg: var(--comp-badge-fuchsia-bg);
-  --color-badge-fuchsia-text: var(--comp-badge-fuchsia-text);
-  --color-badge-fuchsia-border: var(--comp-badge-fuchsia-border);
-  --color-badge-amber-bg: var(--comp-badge-amber-bg);
-  --color-badge-amber-text: var(--comp-badge-amber-text);
-  --color-badge-amber-border: var(--comp-badge-amber-border);
-  --color-badge-slate-bg: var(--comp-badge-slate-bg);
-  --color-badge-slate-text: var(--comp-badge-slate-text);
-  --color-badge-slate-border: var(--comp-badge-slate-border);
+  /* Categorical tones — solid / light / outlined per hue */
+  --color-badge-solid-indigo-bg: var(--comp-badge-solid-indigo-bg);
+  --color-badge-solid-indigo-text: var(--comp-badge-solid-indigo-text);
+  --color-badge-solid-rose-bg: var(--comp-badge-solid-rose-bg);
+  --color-badge-solid-rose-text: var(--comp-badge-solid-rose-text);
+  --color-badge-solid-lime-bg: var(--comp-badge-solid-lime-bg);
+  --color-badge-solid-lime-text: var(--comp-badge-solid-lime-text);
+  --color-badge-solid-violet-bg: var(--comp-badge-solid-violet-bg);
+  --color-badge-solid-violet-text: var(--comp-badge-solid-violet-text);
+  --color-badge-solid-cyan-bg: var(--comp-badge-solid-cyan-bg);
+  --color-badge-solid-cyan-text: var(--comp-badge-solid-cyan-text);
+  --color-badge-solid-orange-bg: var(--comp-badge-solid-orange-bg);
+  --color-badge-solid-orange-text: var(--comp-badge-solid-orange-text);
+  --color-badge-solid-emerald-bg: var(--comp-badge-solid-emerald-bg);
+  --color-badge-solid-emerald-text: var(--comp-badge-solid-emerald-text);
+  --color-badge-solid-fuchsia-bg: var(--comp-badge-solid-fuchsia-bg);
+  --color-badge-solid-fuchsia-text: var(--comp-badge-solid-fuchsia-text);
+  --color-badge-solid-amber-bg: var(--comp-badge-solid-amber-bg);
+  --color-badge-solid-amber-text: var(--comp-badge-solid-amber-text);
+  --color-badge-solid-slate-bg: var(--comp-badge-solid-slate-bg);
+  --color-badge-solid-slate-text: var(--comp-badge-solid-slate-text);
+  --color-badge-solid-teal-bg: var(--comp-badge-solid-teal-bg);
+  --color-badge-solid-teal-text: var(--comp-badge-solid-teal-text);
+  --color-badge-solid-sky-bg: var(--comp-badge-solid-sky-bg);
+  --color-badge-solid-sky-text: var(--comp-badge-solid-sky-text);
+  --color-badge-solid-purple-bg: var(--comp-badge-solid-purple-bg);
+  --color-badge-solid-purple-text: var(--comp-badge-solid-purple-text);
+  --color-badge-solid-pink-bg: var(--comp-badge-solid-pink-bg);
+  --color-badge-solid-pink-text: var(--comp-badge-solid-pink-text);
+  --color-badge-light-indigo-bg: var(--comp-badge-light-indigo-bg);
+  --color-badge-light-indigo-text: var(--comp-badge-light-indigo-text);
+  --color-badge-light-rose-bg: var(--comp-badge-light-rose-bg);
+  --color-badge-light-rose-text: var(--comp-badge-light-rose-text);
+  --color-badge-light-lime-bg: var(--comp-badge-light-lime-bg);
+  --color-badge-light-lime-text: var(--comp-badge-light-lime-text);
+  --color-badge-light-violet-bg: var(--comp-badge-light-violet-bg);
+  --color-badge-light-violet-text: var(--comp-badge-light-violet-text);
+  --color-badge-light-cyan-bg: var(--comp-badge-light-cyan-bg);
+  --color-badge-light-cyan-text: var(--comp-badge-light-cyan-text);
+  --color-badge-light-orange-bg: var(--comp-badge-light-orange-bg);
+  --color-badge-light-orange-text: var(--comp-badge-light-orange-text);
+  --color-badge-light-emerald-bg: var(--comp-badge-light-emerald-bg);
+  --color-badge-light-emerald-text: var(--comp-badge-light-emerald-text);
+  --color-badge-light-fuchsia-bg: var(--comp-badge-light-fuchsia-bg);
+  --color-badge-light-fuchsia-text: var(--comp-badge-light-fuchsia-text);
+  --color-badge-light-amber-bg: var(--comp-badge-light-amber-bg);
+  --color-badge-light-amber-text: var(--comp-badge-light-amber-text);
+  --color-badge-light-slate-bg: var(--comp-badge-light-slate-bg);
+  --color-badge-light-slate-text: var(--comp-badge-light-slate-text);
+  --color-badge-light-teal-bg: var(--comp-badge-light-teal-bg);
+  --color-badge-light-teal-text: var(--comp-badge-light-teal-text);
+  --color-badge-light-sky-bg: var(--comp-badge-light-sky-bg);
+  --color-badge-light-sky-text: var(--comp-badge-light-sky-text);
+  --color-badge-light-purple-bg: var(--comp-badge-light-purple-bg);
+  --color-badge-light-purple-text: var(--comp-badge-light-purple-text);
+  --color-badge-light-pink-bg: var(--comp-badge-light-pink-bg);
+  --color-badge-light-pink-text: var(--comp-badge-light-pink-text);
+  --color-badge-outlined-indigo-border: var(--comp-badge-outlined-indigo-border);
+  --color-badge-outlined-indigo-text: var(--comp-badge-outlined-indigo-text);
+  --color-badge-outlined-rose-border: var(--comp-badge-outlined-rose-border);
+  --color-badge-outlined-rose-text: var(--comp-badge-outlined-rose-text);
+  --color-badge-outlined-lime-border: var(--comp-badge-outlined-lime-border);
+  --color-badge-outlined-lime-text: var(--comp-badge-outlined-lime-text);
+  --color-badge-outlined-violet-border: var(--comp-badge-outlined-violet-border);
+  --color-badge-outlined-violet-text: var(--comp-badge-outlined-violet-text);
+  --color-badge-outlined-cyan-border: var(--comp-badge-outlined-cyan-border);
+  --color-badge-outlined-cyan-text: var(--comp-badge-outlined-cyan-text);
+  --color-badge-outlined-orange-border: var(--comp-badge-outlined-orange-border);
+  --color-badge-outlined-orange-text: var(--comp-badge-outlined-orange-text);
+  --color-badge-outlined-emerald-border: var(--comp-badge-outlined-emerald-border);
+  --color-badge-outlined-emerald-text: var(--comp-badge-outlined-emerald-text);
+  --color-badge-outlined-fuchsia-border: var(--comp-badge-outlined-fuchsia-border);
+  --color-badge-outlined-fuchsia-text: var(--comp-badge-outlined-fuchsia-text);
+  --color-badge-outlined-amber-border: var(--comp-badge-outlined-amber-border);
+  --color-badge-outlined-amber-text: var(--comp-badge-outlined-amber-text);
+  --color-badge-outlined-slate-border: var(--comp-badge-outlined-slate-border);
+  --color-badge-outlined-slate-text: var(--comp-badge-outlined-slate-text);
+  --color-badge-outlined-teal-border: var(--comp-badge-outlined-teal-border);
+  --color-badge-outlined-teal-text: var(--comp-badge-outlined-teal-text);
+  --color-badge-outlined-sky-border: var(--comp-badge-outlined-sky-border);
+  --color-badge-outlined-sky-text: var(--comp-badge-outlined-sky-text);
+  --color-badge-outlined-purple-border: var(--comp-badge-outlined-purple-border);
+  --color-badge-outlined-purple-text: var(--comp-badge-outlined-purple-text);
+  --color-badge-outlined-pink-border: var(--comp-badge-outlined-pink-border);
+  --color-badge-outlined-pink-text: var(--comp-badge-outlined-pink-text);
 
   /* ── Colors: Button ────────────────────────────────────────────────────── */
   --color-btn-solid-brand-bg-default: var(--comp-btn-solid-brand-bg-default);
@@ -535,6 +596,18 @@ body {
   --color-tag-slate-bg: var(--comp-tag-slate-bg);
   --color-tag-slate-text: var(--comp-tag-slate-text);
   --color-tag-slate-border: var(--comp-tag-slate-border);
+  --color-tag-teal-bg: var(--comp-tag-teal-bg);
+  --color-tag-teal-text: var(--comp-tag-teal-text);
+  --color-tag-teal-border: var(--comp-tag-teal-border);
+  --color-tag-sky-bg: var(--comp-tag-sky-bg);
+  --color-tag-sky-text: var(--comp-tag-sky-text);
+  --color-tag-sky-border: var(--comp-tag-sky-border);
+  --color-tag-purple-bg: var(--comp-tag-purple-bg);
+  --color-tag-purple-text: var(--comp-tag-purple-text);
+  --color-tag-purple-border: var(--comp-tag-purple-border);
+  --color-tag-pink-bg: var(--comp-tag-pink-bg);
+  --color-tag-pink-text: var(--comp-tag-pink-text);
+  --color-tag-pink-border: var(--comp-tag-pink-border);
 
   /* ── Colors: TextInput ─────────────────────────────────────────────────── */
   --color-text-input-bg-default: var(--comp-text-input-bg-default);
@@ -636,6 +709,8 @@ body {
   --animate-modal-out: modal-out 150ms ease-in;
   --animate-sidepanel-in: sidepanel-in 250ms ease-out;
   --animate-sidepanel-out: sidepanel-out 200ms ease-in;
+  --animate-fade-up: fade-up 320ms ease-out;
+  --animate-pop-in: pop-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 @keyframes tooltip-in {
@@ -725,3 +800,198 @@ body {
   --em-rgb-background: 12, 21, 33;
   --em-rgb-input: 17, 30, 46;
 }
+
+/*
+ * ── AI utilities ─────────────────────────────────────────────────────────
+ *
+ * Animation primitives used by AICell, AIBadge, AIColumnSidePanel and any
+ * surface that wants the "AI is thinking" look. The shimmer-text and
+ * icon-spin classes are the load-bearing ones; the rest are decorative.
+ *
+ * FA Kit caveat — `fa-spin` applied directly to an <i> element gets
+ * interrupted because the Kit MutationObserver re-swaps the node into an
+ * <svg> on every className change. Always wrap your icon in a span that
+ * carries `.ai-icon-spin` (or your own rotating wrapper) instead.
+ */
+.ai-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: var(--core-bg-main-secondary);
+}
+.ai-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--core-bg-main-primary) 50%,
+    transparent 100%
+  );
+  animation: ai-skeleton-sweep 1.4s ease-in-out infinite;
+}
+
+.ai-cell-reveal {
+  animation: ai-cell-reveal 320ms ease-out forwards;
+}
+
+.ai-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    var(--core-text-main-tertiary) 0%,
+    var(--core-text-functional-info) 50%,
+    var(--core-text-main-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ai-shimmer-sweep 2.1s linear infinite;
+}
+
+.ai-icon-spin {
+  display: inline-flex;
+  animation: ai-spin 1s linear infinite;
+}
+
+.ai-pulse {
+  animation: ai-pulse 1.6s ease-in-out infinite;
+}
+
+.ai-gradient-text {
+  color: var(--core-text-functional-info);
+}
+
+.ai-orb {
+  position: relative;
+  width: 96px;
+  height: 96px;
+  border-radius: 9999px;
+  background: var(--background-image-ai-gradient);
+  box-shadow: var(--shadow-elevation-md), 0 0 32px -4px var(--blue-500);
+}
+
+.ai-halo {
+  position: absolute;
+  inset: -8px;
+  border-radius: 9999px;
+  background: conic-gradient(from 0deg, transparent, var(--blue-500), transparent);
+  animation: ai-spin 4s linear infinite;
+  opacity: 0.6;
+  filter: blur(8px);
+}
+
+.ai-ring {
+  border: 2px solid var(--blue-500);
+  border-radius: 9999px;
+  animation: ai-ring 2.4s ease-out infinite;
+}
+
+@keyframes ai-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ai-shimmer-sweep {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes ai-skeleton-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes ai-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0.7;
+  }
+}
+
+@keyframes ai-cell-reveal {
+  from {
+    opacity: 0;
+    filter: blur(3px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes ai-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ai-ring {
+  0% {
+    opacity: 0.6;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.4);
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-skeleton::after,
+  .ai-cell-reveal,
+  .ai-shimmer-text,
+  .ai-pulse,
+  .ai-icon-spin,
+  .ai-halo,
+  .ai-ring {
+    animation: none !important;
+  }
+  .ai-shimmer-text {
+    background: none;
+    color: var(--core-text-functional-info);
+    -webkit-text-fill-color: var(--core-text-functional-info);
+  }
+}