@l3mpire/ui 3.5.1 → 3.6.0

package/USAGE.md

@@ -156,13 +156,15 @@ icon-spin classes are the load-bearing ones; the rest are decorative.
 
 | Class | Usage |
 |---|---|
-| `bg-ai-gradient` | Brand AI gradient (blue → violet → indigo, 125deg) |
+| `bg-ai-gradient` | Decorative brand AI gradient (blue → violet → indigo, 125deg) |
+| `bg-ai-subtle` / `-hover` / `-pressed` | Translucent AI wash (ghost AI surfaces) |
+| `bg-ai-strong` / `-hover` / `-pressed` | Vivid AI gradient (solid AI fill) |
+| `ai-grad-text` | Gradient-clipped text/icons (outlined/ghost AI); follows `[data-ai-text]` host hover/pressed |
 | `ai-shimmer-text` | Text with a tertiary → info → tertiary sweep (2.1s) |
 | `ai-icon-spin` | Wrapper that rotates its child icon (see FA Kit caveat below) |
 | `ai-skeleton` | Surface skeleton with a horizontal sheen sweep |
 | `ai-cell-reveal` | One-shot blur(3px) → clear, 320ms fade-in for cells |
 | `ai-pulse` | Breathing scale + opacity for dot indicators |
-| `ai-gradient-text` | Flat info-blue accent for AI labels |
 | `ai-orb` | Decorative gradient disc with a soft glow |
 | `ai-halo` | Conic-gradient halo that rotates around an orb |
 | `ai-ring` | Pulsing concentric ring |
@@ -236,12 +238,19 @@ import { faPaperPlaneOutline } from "@l3mpire/icons";
 <Button appearance="solid" intent="brand" size="md" badge={99}>
   Notifications
 </Button>
+
+{/* AI intent — brand→violet gradient. Solid = vivid fill + white label;
+    outlined/ghost = gradient-clipped label & icons. No disabled-specific
+    art (falls back to the appearance's disabled style). */}
+<Button appearance="solid" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
+<Button appearance="outlined" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
+<Button appearance="ghost" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
 ```
 
 | Prop | Values |
 |---|---|
 | `appearance` | `"solid"`, `"outlined"`, `"ghost"` |
-| `intent` | `"brand"`, `"alert"` |
+| `intent` | `"brand"`, `"alert"`, `"ai"` |
 | `size` | `"sm"` (24px), `"md"` (32px, radius 10px), `"lg"` (40px, radius 12px) |
 | `leftIcon` | `IconDefinition` |
 | `rightIcon` | `IconDefinition` |

package/dist/index.d.mts

@@ -489,7 +489,7 @@ declare const BrowserTab: React.ForwardRefExoticComponent<BrowserTabProps & Reac
 
 declare const buttonVariants: (props?: ({
     appearance?: "solid" | "outlined" | "ghost" | null | undefined;
-    intent?: "alert" | "brand" | null | undefined;
+    intent?: "alert" | "brand" | "ai" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
@@ -652,7 +652,7 @@ interface InputLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPri
 declare const InputLabel: React.ForwardRefExoticComponent<InputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const infoMessageVariants: (props?: ({
-    type?: "alert" | "success" | "warning" | "info" | "ai" | "empty" | null | undefined;
+    type?: "alert" | "success" | "warning" | "ai" | "info" | "empty" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InfoMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof infoMessageVariants> {
     title: React.ReactNode;

package/dist/index.d.ts

@@ -489,7 +489,7 @@ declare const BrowserTab: React.ForwardRefExoticComponent<BrowserTabProps & Reac
 
 declare const buttonVariants: (props?: ({
     appearance?: "solid" | "outlined" | "ghost" | null | undefined;
-    intent?: "alert" | "brand" | null | undefined;
+    intent?: "alert" | "brand" | "ai" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
@@ -652,7 +652,7 @@ interface InputLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPri
 declare const InputLabel: React.ForwardRefExoticComponent<InputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const infoMessageVariants: (props?: ({
-    type?: "alert" | "success" | "warning" | "info" | "ai" | "empty" | null | undefined;
+    type?: "alert" | "success" | "warning" | "ai" | "info" | "empty" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InfoMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof infoMessageVariants> {
     title: React.ReactNode;

package/dist/index.js

@@ -700,7 +700,8 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
       },
       intent: {
         brand: [],
-        alert: []
+        alert: [],
+        ai: []
       },
       size: {
         sm: [
@@ -822,6 +823,48 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
           "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" },
@@ -884,6 +927,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,
@@ -893,7 +938,7 @@ var Button = React6.forwardRef(
       className
     });
     const labelNode = !isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: textWrapperClass(resolvedSize), children: [
-      children,
+      aiGradientText ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: aiTextClass, children }) : children,
       badge != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonBadge, { size: resolvedSize, intent, children: badge })
     ] }) : null;
     if (asChild) {
@@ -906,11 +951,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__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: import_icons5.faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: leftIcon, size: iconSize }) : null,
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: import_icons5.faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: leftIcon, size: iconSize, className: aiTextClass }) : null,
           labelNode,
-          rightIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: rightIcon, size: iconSize })
+          rightIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: rightIcon, size: iconSize, className: aiTextClass })
         ]
       }
     );