@l3mpire/ui 3.0.0 → 3.2.1

package/dist/index.mjs

@@ -44,6 +44,20 @@ var badgeVariants = cva(
         warning: "",
         neutral: ""
       },
+      // Categorical tones — self-contained soft style (bg + text + border).
+      // When `tone` is set it overrides variant/type (handled in the component).
+      tone: {
+        indigo: "bg-badge-indigo-bg text-badge-indigo-text border-badge-indigo-border",
+        rose: "bg-badge-rose-bg text-badge-rose-text border-badge-rose-border",
+        lime: "bg-badge-lime-bg text-badge-lime-text border-badge-lime-border",
+        violet: "bg-badge-violet-bg text-badge-violet-text border-badge-violet-border",
+        cyan: "bg-badge-cyan-bg text-badge-cyan-text border-badge-cyan-border",
+        orange: "bg-badge-orange-bg text-badge-orange-text border-badge-orange-border",
+        emerald: "bg-badge-emerald-bg text-badge-emerald-text border-badge-emerald-border",
+        fuchsia: "bg-badge-fuchsia-bg text-badge-fuchsia-text border-badge-fuchsia-border",
+        amber: "bg-badge-amber-bg text-badge-amber-text border-badge-amber-border",
+        slate: "bg-badge-slate-bg text-badge-slate-text border-badge-slate-border"
+      },
       size: {
         sm: [
           "p-2xs gap-2xs",
@@ -82,20 +96,29 @@ var badgeVariants = cva(
       { variant: "outlined", type: "warning", class: "border-badge-outlined-warning-border text-badge-outlined-warning-text" },
       { variant: "outlined", type: "neutral", class: "border-badge-outlined-neutral-border text-badge-outlined-neutral-text" }
     ],
+    // variant/type defaults are applied in the component so `tone` can suppress them.
     defaultVariants: {
-      variant: "solid",
-      type: "primary",
       size: "md"
     }
   }
 );
 var Badge = React.forwardRef(
-  ({ className, variant, type, size, icon, children, ...props }, ref) => {
+  ({ className, variant, type, tone, size, icon, children, ...props }, ref) => {
+    const tonal = tone != null;
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
-        className: cn(badgeVariants({ variant, type, size }), className),
+        className: cn(
+          badgeVariants({
+            // A categorical tone is self-contained and overrides variant/type.
+            variant: tonal ? void 0 : variant ?? "solid",
+            type: tonal ? void 0 : type ?? "primary",
+            tone,
+            size
+          }),
+          className
+        ),
         ...props,
         children: [
           icon && /* @__PURE__ */ jsx(Icon, { icon, size: "xs" }),
@@ -617,6 +640,7 @@ var BrowserTab = React3.forwardRef(
             /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
               Button,
               {
+                className: "mb-sm",
                 appearance: "ghost",
                 intent: "brand",
                 size: "sm",
@@ -681,6 +705,7 @@ var BrowserTab = React3.forwardRef(
           onAddTab && hasOverflow && /* @__PURE__ */ jsx3(
             Button,
             {
+              className: "mb-sm",
               appearance: "ghost",
               intent: "brand",
               size: "sm",
@@ -3173,6 +3198,20 @@ var tagVariants = cva12(
           "text-tag-neutral-text"
         ]
       },
+      // Categorical tones — soft style with a subtle border.
+      // When `tone` is set it overrides `variant` (handled in the component).
+      tone: {
+        indigo: "bg-tag-indigo-bg text-tag-indigo-text border border-tag-indigo-border",
+        rose: "bg-tag-rose-bg text-tag-rose-text border border-tag-rose-border",
+        lime: "bg-tag-lime-bg text-tag-lime-text border border-tag-lime-border",
+        violet: "bg-tag-violet-bg text-tag-violet-text border border-tag-violet-border",
+        cyan: "bg-tag-cyan-bg text-tag-cyan-text border border-tag-cyan-border",
+        orange: "bg-tag-orange-bg text-tag-orange-text border border-tag-orange-border",
+        emerald: "bg-tag-emerald-bg text-tag-emerald-text border border-tag-emerald-border",
+        fuchsia: "bg-tag-fuchsia-bg text-tag-fuchsia-text border border-tag-fuchsia-border",
+        amber: "bg-tag-amber-bg text-tag-amber-text border border-tag-amber-border",
+        slate: "bg-tag-slate-bg text-tag-slate-text border border-tag-slate-border"
+      },
       size: {
         sm: [
           "p-xs",
@@ -3186,21 +3225,29 @@ var tagVariants = cva12(
         ]
       }
     },
+    // variant default is applied in the component so `tone` can suppress it.
     defaultVariants: {
-      variant: "brand",
       size: "sm"
     }
   }
 );
 var iconSizeMap3 = { sm: "xs", md: "sm" };
 var Tag = React26.forwardRef(
-  ({ className, variant, size, icon, onClose, children, ...props }, ref) => {
+  ({ className, variant, tone, size, icon, onClose, children, ...props }, ref) => {
     const iconSize = iconSizeMap3[size ?? "sm"];
     return /* @__PURE__ */ jsxs24(
       "span",
       {
         ref,
-        className: cn(tagVariants({ variant, size }), className),
+        className: cn(
+          tagVariants({
+            // A categorical tone is self-contained and overrides variant.
+            variant: tone != null ? void 0 : variant ?? "brand",
+            tone,
+            size
+          }),
+          className
+        ),
         ...props,
         children: [
           icon && /* @__PURE__ */ jsx26(Icon17, { icon, size: iconSize, className: "shrink-0" }),
@@ -6348,10 +6395,11 @@ var SaveViewButton = React46.forwardRef(
     const sharedStyle = [
       "relative flex items-center justify-center",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-btn-solid-brand-bg-default from-[10%] to-btn-solid-brand-bg-gradient-to-default",
-      "border border-btn-solid-brand-border-default",
+      "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+      "border border-btn-outlined-neutral-border-default",
       "shadow-sm cursor-pointer transition-colors",
-      "hover:from-btn-solid-brand-bg-hover hover:to-btn-solid-brand-bg-gradient-to-hover"
+      "hover:from-btn-outlined-neutral-bg-hover hover:from-[0%] hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+      "hover:border-btn-outlined-neutral-border-hover"
     ];
     return /* @__PURE__ */ jsxs41(
       "div",
@@ -6360,7 +6408,7 @@ var SaveViewButton = React46.forwardRef(
         className: cn("flex items-center", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
@@ -6370,33 +6418,28 @@ var SaveViewButton = React46.forwardRef(
                 "gap-sm px-base py-sm min-w-[80px]",
                 "rounded-l-md -mr-px"
               ),
-              children: [
-                /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ jsx46("span", { className: "absolute inset-0 rounded-l-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-outlined-neutral-text-default", children: label })
             }
           ),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
               onClick: onDropdown,
+              "aria-label": "More save options",
               className: cn(
                 sharedStyle,
                 "p-sm",
                 "rounded-r-md -ml-px"
               ),
-              children: [
-                /* @__PURE__ */ jsx46(
-                  Icon28,
-                  {
-                    icon: faChevronDownOutline,
-                    size: "sm",
-                    className: "text-btn-solid-brand-text-default"
-                  }
-                ),
-                /* @__PURE__ */ jsx46("span", { className: "absolute inset-0 rounded-r-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ jsx46(
+                Icon28,
+                {
+                  icon: faChevronDownOutline,
+                  size: "sm",
+                  className: "text-btn-outlined-neutral-text-default"
+                }
+              )
             }
           )
         ]