@l3mpire/ui 3.5.1 → 3.6.0

package/dist/index.mjs

@@ -492,7 +492,8 @@ var buttonVariants = cva3(
       },
       intent: {
         brand: [],
-        alert: []
+        alert: [],
+        ai: []
       },
       size: {
         sm: [
@@ -614,6 +615,48 @@ var buttonVariants = cva3(
           "active:text-btn-ghost-alert-text-pressed"
         ]
       },
+      // ── Solid + AI ─────────────────────────────────────────────────────
+      // Vivid brand→violet gradient fill, white label/icons, violet outer
+      // border + a translucent-white inner border (via inset shadow).
+      {
+        appearance: "solid",
+        intent: "ai",
+        class: [
+          "bg-ai-strong",
+          "text-[var(--core-text-main-invert-primary)]",
+          "border-[var(--violet-500)]",
+          "shadow-[inset_0_0_0_1px_rgb(255_255_255/0.6),0_1px_3px_0_var(--shadow-4)]",
+          "hover:bg-ai-strong-hover",
+          "active:bg-ai-strong-pressed"
+        ]
+      },
+      // ── Outlined + AI ──────────────────────────────────────────────────
+      // Neutral surface (same as outlined brand), brand-blue border that
+      // deepens per state; label/icons are gradient-clipped (see component).
+      {
+        appearance: "outlined",
+        intent: "ai",
+        class: [
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+          "border-[var(--interactive-bg-primary-dark-default)]",
+          "shadow-[0_1px_3px_0_var(--shadow-4)]",
+          "hover:from-btn-outlined-neutral-bg-hover hover:from-[0%] hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+          "hover:border-[var(--interactive-bg-primary-dark-hover)]",
+          "active:from-btn-outlined-neutral-bg-pressed active:to-btn-outlined-neutral-bg-gradient-to-pressed",
+          "active:border-[var(--interactive-bg-primary-dark-pressed)]"
+        ]
+      },
+      // ── Ghost + AI ─────────────────────────────────────────────────────
+      // Subtle translucent gradient wash, no border; gradient-clipped text.
+      {
+        appearance: "ghost",
+        intent: "ai",
+        class: [
+          "bg-ai-subtle border-transparent",
+          "hover:bg-ai-subtle-hover",
+          "active:bg-ai-subtle-pressed"
+        ]
+      },
       // ── Icon-only size overrides ───────────────────────────────────────
       { size: "sm", iconOnly: true, class: "w-6 min-w-0 px-0" },
       { size: "md", iconOnly: true, class: "w-8 min-w-0 px-0" },
@@ -676,6 +719,8 @@ var Button = React6.forwardRef(
     const isDisabled = disabled || loading;
     const isIconOnly = iconOnlyProp ?? !children;
     const iconSize = iconSizeMap[resolvedSize];
+    const aiGradientText = intent === "ai" && appearance !== "solid" && !isDisabled;
+    const aiTextClass = aiGradientText ? "ai-grad-text" : void 0;
     const variantClasses = buttonVariants({
       appearance,
       intent,
@@ -685,7 +730,7 @@ var Button = React6.forwardRef(
       className
     });
     const labelNode = !isIconOnly ? /* @__PURE__ */ jsxs5("span", { className: textWrapperClass(resolvedSize), children: [
-      children,
+      aiGradientText ? /* @__PURE__ */ jsx6("span", { className: aiTextClass, children }) : children,
       badge != null && /* @__PURE__ */ jsx6(ButtonBadge, { size: resolvedSize, intent, children: badge })
     ] }) : null;
     if (asChild) {
@@ -698,11 +743,12 @@ var Button = React6.forwardRef(
         className: cn(variantClasses),
         disabled: isDisabled,
         "aria-busy": loading || void 0,
+        "data-ai-text": aiGradientText || void 0,
         ...props,
         children: [
-          loading ? /* @__PURE__ */ jsx6(Icon4, { icon: faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ jsx6(Icon4, { icon: leftIcon, size: iconSize }) : null,
+          loading ? /* @__PURE__ */ jsx6(Icon4, { icon: faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ jsx6(Icon4, { icon: leftIcon, size: iconSize, className: aiTextClass }) : null,
           labelNode,
-          rightIcon && !loading && /* @__PURE__ */ jsx6(Icon4, { icon: rightIcon, size: iconSize })
+          rightIcon && !loading && /* @__PURE__ */ jsx6(Icon4, { icon: rightIcon, size: iconSize, className: aiTextClass })
         ]
       }
     );