@l3mpire/ui 3.0.0 → 3.2.1

package/USAGE.md

@@ -210,12 +210,16 @@ import { faStarOutline } from "@l3mpire/icons";
 <Badge variant="solid" type="primary">New</Badge>
 <Badge variant="light" type="success" size="sm">Active</Badge>
 <Badge variant="outlined" type="critical" icon={faStarOutline}>99</Badge>
+
+// Categorical tone — overrides variant/type
+<Badge tone="indigo">SaaS</Badge>
 ```
 
 | Prop | Values |
 |---|---|
 | `variant` | `"solid"`, `"light"`, `"outlined"` |
 | `type` | `"primary"`, `"success"`, `"critical"`, `"warning"`, `"neutral"` |
+| `tone` | `"indigo"`, `"rose"`, `"lime"`, `"violet"`, `"cyan"`, `"orange"`, `"emerald"`, `"fuchsia"`, `"amber"`, `"slate"` — categorical palette; overrides `variant`/`type` |
 | `size` | `"sm"`, `"md"`, `"lg"` |
 | `icon` | `IconDefinition` (optional) |
 
@@ -231,11 +235,15 @@ import { faPaperPlaneOutline } from "@l3mpire/icons";
 <Tag variant="neutral" icon={faPaperPlaneOutline} onClose={() => {}}>
   Campaign
 </Tag>
+
+// Categorical tone — overrides variant
+<Tag tone="emerald">Finance</Tag>
 ```
 
 | Prop | Values |
 |---|---|
 | `variant` | `"brand"`, `"neutral"` |
+| `tone` | `"indigo"`, `"rose"`, `"lime"`, `"violet"`, `"cyan"`, `"orange"`, `"emerald"`, `"fuchsia"`, `"amber"`, `"slate"` — categorical palette; overrides `variant` |
 | `size` | `"sm"`, `"md"` |
 | `icon` | `IconDefinition` |
 | `onClose` | `() => void` (shows remove button when provided) |
@@ -1085,7 +1093,15 @@ import {
   filterState={filterState}
   onFilterStateChange={setFilterState}
   sortFields={SORT_FIELDS}
-  actions={<SaveViewButton />}
+  // Row 1 (always): page-level actions
+  actions={<Button appearance="solid" intent="brand">Start tasks</Button>}
+  // Row 2 (while editing filters): view-related actions
+  filterActions={
+    <>
+      <Button appearance="ghost" intent="brand">Discard changes</Button>
+      <SaveViewButton />
+    </>
+  }
 >
   <SearchBar size="sm" className="w-[200px]" />
 </FilterSystem>
@@ -1118,7 +1134,7 @@ import {
 | `AdvancedRow` | Single condition row (property + operator + type-aware value popover + actions) |
 | `AdvancedGroup` | Nested group container with shared connector and inline property selector |
 | `FilterNodeActions` | Kebab menu shared by rows and groups (Duplicate / Turn into group↔filter / Delete) |
-| `SaveViewButton` | Split button (Save view + dropdown chevron) |
+| `SaveViewButton` | Outlined split button (Save view + dropdown chevron for Save for me / everyone). Goes in the Row 2 `filterActions` slot. |
 | `SummaryChip` | Minimal mode: "Filters (N)" with interactive popover |
 
 **Responsive:** FilterSystem auto-detects container width via `ResizeObserver`:
@@ -1126,7 +1142,7 @@ import {
 - **Minimal** (≤breakpoint): SummaryChip "Filters (N)" with interactive popover, icon-only Sort/Filter buttons
 - The breakpoint is configurable via the `breakpoint` prop on `FilterSystem` (default: `600`).
 
-**Built-in Clear:** appears inline after the last filter chip ("Clear" text in default, × icon in minimal). Separate from "Discard changes" which goes in `actions` (right side) to revert a saved view.
+**Built-in Clear:** appears inline after the last filter chip ("Clear" text in default, × icon in minimal). Separate from "Discard changes", which goes in the Row 2 `filterActions` slot (far right, next to `SaveViewButton`) to revert a saved view's unsaved edits. Page-level actions (Create / Import / Start tasks) belong in the Row 1 `actions` slot and stay visible at all times — `SaveViewButton` should **not** be placed there.
 
 **And/Or toggle:** each row in the advanced popover has an independent And/Or toggle button. The choice is **persisted on each `FilterCondition` as `logicOperator: "and" | "or"`** (defaults to `"and"` when undefined), so it survives remounts and can be serialized.
 

package/dist/index.d.mts

@@ -261,6 +261,7 @@ declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAtt
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "light" | "outlined" | null | undefined;
     type?: "primary" | "success" | "critical" | "warning" | "neutral" | null | undefined;
+    tone?: "indigo" | "rose" | "lime" | "violet" | "cyan" | "orange" | "emerald" | "fuchsia" | "amber" | "slate" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "type">, VariantProps<typeof badgeVariants> {
@@ -412,6 +413,7 @@ declare const TabContent: React.ForwardRefExoticComponent<TabContentProps & Reac
 
 declare const tagVariants: (props?: ({
     variant?: "neutral" | "brand" | null | undefined;
+    tone?: "indigo" | "rose" | "lime" | "violet" | "cyan" | "orange" | "emerald" | "fuchsia" | "amber" | "slate" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "type">, VariantProps<typeof tagVariants> {
@@ -1011,9 +1013,9 @@ interface SaveViewButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     onDropdown?: () => void;
 }
 /**
- * Split button for saving filtered views.
- * Left side: "Save view" (solid brand, rounded-left).
- * Right side: chevron-down (solid brand, rounded-right).
+ * Split button for saving filtered views (outlined, neutral).
+ * Left side: "Save view" (rounded-left).
+ * Right side: chevron-down dropdown (e.g. Save for me / Save for everyone).
  */
 declare const SaveViewButton: React.ForwardRefExoticComponent<SaveViewButtonProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -261,6 +261,7 @@ declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAtt
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "light" | "outlined" | null | undefined;
     type?: "primary" | "success" | "critical" | "warning" | "neutral" | null | undefined;
+    tone?: "indigo" | "rose" | "lime" | "violet" | "cyan" | "orange" | "emerald" | "fuchsia" | "amber" | "slate" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "type">, VariantProps<typeof badgeVariants> {
@@ -412,6 +413,7 @@ declare const TabContent: React.ForwardRefExoticComponent<TabContentProps & Reac
 
 declare const tagVariants: (props?: ({
     variant?: "neutral" | "brand" | null | undefined;
+    tone?: "indigo" | "rose" | "lime" | "violet" | "cyan" | "orange" | "emerald" | "fuchsia" | "amber" | "slate" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "type">, VariantProps<typeof tagVariants> {
@@ -1011,9 +1013,9 @@ interface SaveViewButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     onDropdown?: () => void;
 }
 /**
- * Split button for saving filtered views.
- * Left side: "Save view" (solid brand, rounded-left).
- * Right side: chevron-down (solid brand, rounded-right).
+ * Split button for saving filtered views (outlined, neutral).
+ * Left side: "Save view" (rounded-left).
+ * Right side: chevron-down dropdown (e.g. Save for me / Save for everyone).
  */
 declare const SaveViewButton: React.ForwardRefExoticComponent<SaveViewButtonProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -231,6 +231,20 @@ var badgeVariants = (0, import_class_variance_authority.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",
@@ -269,20 +283,29 @@ var badgeVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon, size: "xs" }),
@@ -804,6 +827,7 @@ var BrowserTab = React3.forwardRef(
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               Button,
               {
+                className: "mb-sm",
                 appearance: "ghost",
                 intent: "brand",
                 size: "sm",
@@ -868,6 +892,7 @@ var BrowserTab = React3.forwardRef(
           onAddTab && hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Button,
             {
+              className: "mb-sm",
               appearance: "ghost",
               intent: "brand",
               size: "sm",
@@ -3336,6 +3361,20 @@ var tagVariants = (0, import_class_variance_authority12.cva)(
           "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",
@@ -3349,21 +3388,29 @@ var tagVariants = (0, import_class_variance_authority12.cva)(
         ]
       }
     },
+    // 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__ */ (0, import_jsx_runtime26.jsxs)(
       "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__ */ (0, import_jsx_runtime26.jsx)(import_icons18.Icon, { icon, size: iconSize, className: "shrink-0" }),
@@ -6463,10 +6510,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__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
@@ -6475,7 +6523,7 @@ var SaveViewButton = React46.forwardRef(
         className: cn("flex items-center", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "button",
             {
               type: "button",
@@ -6485,33 +6533,28 @@ var SaveViewButton = React46.forwardRef(
                 "gap-sm px-base py-sm min-w-[80px]",
                 "rounded-l-md -mr-px"
               ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "absolute inset-0 rounded-l-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-outlined-neutral-text-default", children: label })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "button",
             {
               type: "button",
               onClick: onDropdown,
+              "aria-label": "More save options",
               className: cn(
                 sharedStyle,
                 "p-sm",
                 "rounded-r-md -ml-px"
               ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                  import_icons30.Icon,
-                  {
-                    icon: import_icons30.faChevronDownOutline,
-                    size: "sm",
-                    className: "text-btn-solid-brand-text-default"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "absolute inset-0 rounded-r-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                import_icons30.Icon,
+                {
+                  icon: import_icons30.faChevronDownOutline,
+                  size: "sm",
+                  className: "text-btn-outlined-neutral-text-default"
+                }
+              )
             }
           )
         ]