@l3mpire/ui 3.0.0 → 3.3.0

package/USAGE.md

@@ -210,12 +210,18 @@ 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 — combines with variant (solid/light/outlined), overrides type
+<Badge tone="indigo">SaaS</Badge>
+<Badge variant="light" tone="amber">Manufacturing</Badge>
+<Badge variant="outlined" tone="emerald">Finance</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; combines with `variant`, overrides `type` |
 | `size` | `"sm"`, `"md"`, `"lg"` |
 | `icon` | `IconDefinition` (optional) |
 
@@ -231,11 +237,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) |
@@ -894,6 +904,8 @@ import { faRocketOutline } from "@l3mpire/icons";
 
 Active tabs render with concave bottom corners that fuse into the bar divider (real browser-tab look). Inactive tabs get a hover fill + soft shadow on the inner pill (active tabs keep their bg on hover).
 
+The close `×` only appears **on hover** of a non-pinned tab, as an absolutely-positioned overlay with a gradient fade — it never takes layout space (the label slides under the gradient instead of being pushed). Set `pinned` to hide the close button entirely and show a **"Pinned tab"** tooltip on hover.
+
 | Prop (BrowserTab) | Values |
 |---|---|
 | `onAddTab` | `() => void` (shows + button) |
@@ -907,7 +919,8 @@ Active tabs render with concave bottom corners that fuse into the bar divider (r
 | `icon` | `IconDefinition` |
 | `badge` | `string` |
 | `isActive` | `boolean` |
-| `onClose` | `(e) => void` |
+| `pinned` | `boolean` (no close button, "Pinned tab" tooltip on hover) |
+| `onClose` | `(e) => void` (close `×` appears on hover only; ignored when `pinned`) |
 | `onRename` | `(newLabel: string) => void` (enables dbl-click rename) |
 
 ---
@@ -1085,7 +1098,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 +1139,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 +1147,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

@@ -26,6 +26,12 @@ interface BrowserTabItemProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     badge?: string;
     isActive?: boolean;
+    /** Pinned tabs can't be closed and show a "Pinned tab" tooltip on hover. */
+    pinned?: boolean;
+    /** When true, an edit (pencil) button appears in the hover overlay, left of the close button. */
+    isEditable?: boolean;
+    /** Called when the edit button is clicked. */
+    onEdit?: (e: React.MouseEvent) => void;
     onClose?: (e: React.MouseEvent) => void;
     /** Called with the new label after double-click rename. Omit to disable rename. */
     onRename?: (newLabel: string) => void;
@@ -261,6 +267,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 +419,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 +1019,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

@@ -26,6 +26,12 @@ interface BrowserTabItemProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     badge?: string;
     isActive?: boolean;
+    /** Pinned tabs can't be closed and show a "Pinned tab" tooltip on hover. */
+    pinned?: boolean;
+    /** When true, an edit (pencil) button appears in the hover overlay, left of the close button. */
+    isEditable?: boolean;
+    /** Called when the edit button is clicked. */
+    onEdit?: (e: React.MouseEvent) => void;
     onClose?: (e: React.MouseEvent) => void;
     /** Called with the new label after double-click rename. Omit to disable rename. */
     onRename?: (newLabel: string) => void;
@@ -261,6 +267,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 +419,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 +1019,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>>;