@l3mpire/ui 3.5.0 → 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 })
         ]
       }
     );
@@ -7172,6 +7218,18 @@ function ColumnFilterPopover({
     ) })
   ] });
 }
+function pinnedStickyStyle(pinned, offset, zIndex) {
+  if (pinned === "left") return { position: "sticky", left: offset, zIndex };
+  if (pinned === "right") return { position: "sticky", right: offset, zIndex };
+  return {};
+}
+function pinnedDividerClass(pinned) {
+  if (pinned === "left")
+    return "shadow-[1px_0_0_0_var(--core-border-main-primary)]";
+  if (pinned === "right")
+    return "shadow-[-1px_0_0_0_var(--core-border-main-primary)]";
+  return "";
+}
 function DraggableHeaderCell({
   header,
   enableSorting,
@@ -7199,6 +7257,7 @@ function DraggableHeaderCell({
     disabled: !canDrag
   });
   const pinned = header.column.getIsPinned();
+  const pinOffset = pinned === "left" ? header.column.getStart("left") : pinned === "right" ? header.column.getAfter("right") : void 0;
   const style = {
     width: enableColumnResizing ? header.getSize() : void 0,
     minWidth: enableColumnResizing ? header.column.columnDef.minSize : void 0,
@@ -7209,18 +7268,7 @@ function DraggableHeaderCell({
     // Pinning sticky positioning — must override the default `relative` we
     // also use for the resize handle. The resize handle is still absolutely
     // positioned because it references `right: 0` relative to the cell.
-    ...pinned === "left" ? {
-      position: "sticky",
-      left: header.column.getStart("left"),
-      zIndex: isDragging ? 5 : 3
-    } : pinned === "right" ? {
-      position: "sticky",
-      right: header.column.getAfter("right"),
-      zIndex: isDragging ? 5 : 3
-    } : {
-      position: "relative",
-      zIndex: isDragging ? 1 : void 0
-    }
+    ...pinned ? pinnedStickyStyle(pinned, pinOffset, isDragging ? 5 : 3) : { position: "relative", zIndex: isDragging ? 1 : void 0 }
   };
   return /* @__PURE__ */ jsxs48(
     TableHead,
@@ -7234,8 +7282,7 @@ function DraggableHeaderCell({
         // Pinned columns keep their bg so the scrolling content can pass
         // under them. The default `bg-table-head-bg-default` is already on
         // <th> so we only need to add a divider on the boundary.
-        pinned === "left" && "shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-        pinned === "right" && "shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+        pinnedDividerClass(pinned)
       ),
       onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
       onMouseEnter: () => setIsHovered(true),
@@ -7464,15 +7511,22 @@ function DataTableInner({
     }).filter(Boolean),
     [columns]
   );
+  const lastSyncedColumnIdsRef = React54.useRef(null);
   React54.useEffect(() => {
     if (!enableColumnDrag) return;
+    const signature = allColumnIds.join(" ");
+    if (signature === lastSyncedColumnIdsRef.current) return;
+    lastSyncedColumnIdsRef.current = signature;
     if (columnOrder.length === 0) {
       setColumnOrder(allColumnIds);
       return;
     }
-    const missing = allColumnIds.filter((id) => !columnOrder.includes(id));
-    if (missing.length > 0) {
-      setColumnOrder([...columnOrder, ...missing]);
+    const pruned = columnOrder.filter((id) => allColumnIds.includes(id));
+    const missing = allColumnIds.filter((id) => !pruned.includes(id));
+    const next = [...pruned, ...missing];
+    const changed = next.length !== columnOrder.length || next.some((id, i) => id !== columnOrder[i]);
+    if (changed) {
+      setColumnOrder(next);
     }
   }, [enableColumnDrag, columnOrder, allColumnIds, setColumnOrder]);
   const table = useReactTable({
@@ -7589,6 +7643,16 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
+  const pinnedOffsets = React54.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of table.getVisibleLeafColumns()) {
+      const p = col.getIsPinned();
+      if (p === "left") map.set(col.id, { side: "left", offset: col.getStart("left") });
+      else if (p === "right")
+        map.set(col.id, { side: "right", offset: col.getAfter("right") });
+    }
+    return map;
+  }, [table, table.getState().columnPinning, table.getState().columnSizing]);
   const tableContent = /* @__PURE__ */ jsxs48("div", { className: cn("w-full", className), style: columnSizeVars, children: [
     /* @__PURE__ */ jsxs48(
       Table,
@@ -7664,17 +7728,10 @@ function DataTableInner({
               "data-state": row.getIsSelected() ? "selected" : void 0,
               children: row.getVisibleCells().map((cell) => {
                 const cellPinned = cell.column.getIsPinned();
+                const pin = cellPinned ? pinnedOffsets.get(cell.column.id) : void 0;
                 const cellStyle = {
                   ...enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : {},
-                  ...cellPinned === "left" ? {
-                    position: "sticky",
-                    left: cell.column.getStart("left"),
-                    zIndex: 2
-                  } : cellPinned === "right" ? {
-                    position: "sticky",
-                    right: cell.column.getAfter("right"),
-                    zIndex: 2
-                  } : {}
+                  ...pinnedStickyStyle(cellPinned, pin?.offset, 2)
                 };
                 return /* @__PURE__ */ jsx54(
                   TableCell,
@@ -7685,8 +7742,8 @@ function DataTableInner({
                       enableColumnResizing && "truncate",
                       // Pinned cells need an opaque background so scrolled
                       // content does not show through.
-                      cellPinned === "left" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-                      cellPinned === "right" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+                      cellPinned && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected",
+                      pinnedDividerClass(cellPinned)
                     ),
                     children: flexRender(
                       cell.column.columnDef.cell,