@l3mpire/ui 2.25.2 → 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) |
@@ -1259,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";
@@ -1283,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>>;