@l3mpire/ui 2.25.1 → 2.26.0

package/USAGE.md

@@ -70,13 +70,14 @@ Use design token spacing classes — never arbitrary pixel values.
 | `p-xs` / `gap-xs` | 4px |
 | `p-sm` / `gap-sm` | 6px |
 | `p-base` / `gap-base` | 8px |
-| `p-md` / `gap-md` | 12px |
-| `p-lg` / `gap-lg` | 16px |
-| `p-xl` / `gap-xl` | 20px |
+| `p-md` / `gap-md` | 10px |
+| `p-lg` / `gap-lg` | 12px |
+| `p-xl` / `gap-xl` | 16px |
 | `p-2xl` / `gap-2xl` | 24px |
 | `p-3xl` / `gap-3xl` | 32px |
 | `p-4xl` / `gap-4xl` | 40px |
 | `p-5xl` / `gap-5xl` | 48px |
+| `p-6xl` / `gap-6xl` | 56px |
 
 Works with all Tailwind spacing prefixes: `p-`, `px-`, `py-`, `m-`, `mx-`, `my-`, `gap-`, `space-x-`, `space-y-`, `w-`, `h-`, `top-`, `left-`, etc.
 
@@ -91,9 +92,10 @@ Works with all Tailwind spacing prefixes: `p-`, `px-`, `py-`, `m-`, `mx-`, `my-`
 | `rounded-xs` | 4px |
 | `rounded-sm` | 6px |
 | `rounded-base` | 8px |
-| `rounded-md` | 12px |
-| `rounded-lg` | 16px |
-| `rounded-xl` | 20px |
+| `rounded-md` | 10px |
+| `rounded-lg` | 12px |
+| `rounded-xl` | 16px |
+| `rounded-2xl` | 24px |
 | `rounded-full` | 9999px |
 
 ---
@@ -168,7 +170,7 @@ import { faPaperPlaneOutline } from "@l3mpire/icons";
   Send
 </Button>
 
-<Button appearance="outlined" intent="neutral" size="sm" leftIcon={faPaperPlaneOutline}>
+<Button appearance="outlined" intent="brand" size="sm" leftIcon={faPaperPlaneOutline}>
   Send
 </Button>
 
@@ -177,16 +179,22 @@ import { faPaperPlaneOutline } from "@l3mpire/icons";
 </Button>
 
 <Button appearance="solid" intent="brand" size="md" iconOnly leftIcon={faPaperPlaneOutline} />
+
+{/* With a counter badge — color follows `intent` */}
+<Button appearance="solid" intent="brand" size="md" badge={99}>
+  Notifications
+</Button>
 ```
 
 | Prop | Values |
 |---|---|
 | `appearance` | `"solid"`, `"outlined"`, `"ghost"` |
-| `intent` | `"brand"`, `"neutral"`, `"alert"` |
-| `size` | `"sm"`, `"md"`, `"lg"` |
+| `intent` | `"brand"`, `"alert"` |
+| `size` | `"sm"` (24px), `"md"` (32px, radius 10px), `"lg"` (40px, radius 12px) |
 | `leftIcon` | `IconDefinition` |
 | `rightIcon` | `IconDefinition` |
 | `iconOnly` | `boolean` |
+| `badge` | `React.ReactNode` — counter/accent next to the label (ignored when `iconOnly`) |
 | `loading` | `boolean` |
 | `disabled` | `boolean` |
 | `asChild` | `boolean` (render as child element) |
@@ -794,26 +802,39 @@ import { Tabs, TabList, TabTrigger, TabContent } from "@l3mpire/ui";
 
 ```tsx
 import { BrowserTab, BrowserTabItem } from "@l3mpire/ui";
-
-<BrowserTab activeTabId="1" onTabSelect={(id) => {}}>
-  <BrowserTabItem id="1" label="Page 1" onClose={(id) => {}} />
-  <BrowserTabItem id="2" label="Page 2" onClose={(id) => {}} />
+import { faRocketOutline } from "@l3mpire/icons";
+
+<BrowserTab draggable onReorder={(from, to) => {}} onAddTab={() => {}}>
+  <BrowserTabItem
+    icon={faRocketOutline}
+    label="Campaigns"
+    badge="99"
+    isActive
+    onClick={() => setActive(0)}
+    onClose={() => removeTab(0)}
+    onRename={(newLabel) => renameTab(0, newLabel)}
+  />
+  <BrowserTabItem label="Leads" onClick={() => setActive(1)} onClose={() => removeTab(1)} />
 </BrowserTab>
 ```
 
+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).
+
 | Prop (BrowserTab) | Values |
 |---|---|
-| `activeTabId` | `string` |
-| `onTabSelect` | `(id: string) => void` |
-| `onNewTab` | `() => void` (shows + button) |
-| `onReorder` | `(ids: string[]) => void` |
+| `onAddTab` | `() => void` (shows + button) |
+| `draggable` | `boolean` |
+| `onReorder` | `(from: number, to: number) => void` |
+| `onOverflowSelect` | `(hiddenIndex: number, lastVisibleIndex: number) => void` |
 
 | Prop (BrowserTabItem) | Values |
 |---|---|
-| `id` | `string` (required) |
-| `label` | `string` |
+| `label` | `string` (required) |
 | `icon` | `IconDefinition` |
-| `onClose` | `(id: string) => void` |
+| `badge` | `string` |
+| `isActive` | `boolean` |
+| `onClose` | `(e) => void` |
+| `onRename` | `(newLabel: string) => void` (enables dbl-click rename) |
 
 ---
 
@@ -1246,7 +1267,7 @@ import { ProductLogo } from "@l3mpire/ui";
 
 ### BulkAction
 
-Bottom-anchored toolbar that appears when one or more list items are selected. Hosts a Clear button + selection count on the left, and a fully composable, **responsive** action slot on the right. Actions that don't fit collapse automatically into a "more" menu.
+Bottom-anchored toolbar that appears when one or more list items are selected. The selection count sits on the **left**, a fully composable **responsive** actions slot in the middle, and a ghost-brand icon-only **close button on the right** (uses `clearLabel` as its `aria-label`). Actions that don't fit collapse automatically into a "more" menu.
 
 ```tsx
 import { BulkAction, type BulkActionItem } from "@l3mpire/ui";
@@ -1270,9 +1291,9 @@ const actions: BulkActionItem[] = [
 | Prop | Description |
 |---|---|
 | `count` | Number of selected items (rendered as `{count} {countLabel}`) |
-| `onClear` | Called when the user clicks the Clear button |
+| `onClear` | Called when the user clicks the right-side close button |
 | `countLabel` | Defaults to `"selected"` — override for i18n |
-| `clearLabel` | Defaults to `"Clear"` — override for i18n |
+| `clearLabel` | Defaults to `"Clear"` — used as the close button's `aria-label` |
 | `actions` | `BulkActionItem[]` — items collapse into a "more" menu when they overflow |
 | `sticky` | `true` (default) → `position: sticky; bottom: 0`. Set to `false` when placing it manually inside a flex column above a footer (e.g. inside a SidePanel) |
 

package/dist/index.d.mts

@@ -55,6 +55,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
     leftIcon?: IconDefinition;
     rightIcon?: IconDefinition;
     iconOnly?: boolean;
+    /** Optional badge (e.g. counter) shown next to the label. Ignored when iconOnly. */
+    badge?: React.ReactNode;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -320,7 +322,7 @@ interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 interface TabListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
-    /** Add horizontal padding (px-lg) when used inline within a page section. */
+    /** Add horizontal padding (px-xl) when used inline within a page section. */
     hasOffset?: boolean;
 }
 declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -55,6 +55,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
     leftIcon?: IconDefinition;
     rightIcon?: IconDefinition;
     iconOnly?: boolean;
+    /** Optional badge (e.g. counter) shown next to the label. Ignored when iconOnly. */
+    badge?: React.ReactNode;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -320,7 +322,7 @@ interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 interface TabListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
-    /** Add horizontal padding (px-lg) when used inline within a page section. */
+    /** Add horizontal padding (px-xl) when used inline within a page section. */
     hasOffset?: boolean;
 }
 declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;