@sarunyu/system-one 4.5.0 → 4.5.1

package/AGENTS.md

@@ -22,8 +22,8 @@ in this package.** This file is the short version: the rules you must follow.
    - Custom bottom sheets / drawers from the bottom → use `<BottomSheet>` (it ships its own backdrop via Vaul).
    - Custom inline status banners → use `<Alert>` (never hand-roll tinted divs with icons).
    - Custom toast / snackbar notifications → use `<Toast>` / `<ToastStack>` in a `fixed` portal.
-   - Filter buttons with count badges or notification bell buttons → use `<Badge>`.
-   - Custom notification panels / bell popover → use `<Notification>`.
+   - Filter buttons with count badges → use `<Badge>` (`variant="button"`).
+   - Notification bell + list panel → use `<Notification>`. Never use `<Badge variant="notification">` standalone or wire it to a custom `onClick` (toast, popover, etc.) — `<Notification>` handles both the bell and the panel.
 
 2. **Use token-backed Tailwind classes for color.** Never emit hard-coded colors:
    - Hex (`#3b82f6`), arbitrary (`bg-[#...]`), and palette utilities
@@ -49,8 +49,9 @@ in this package.** This file is the short version: the rules you must follow.
    - `BottomSheet` is mobile-only. On desktop, use `Modal` instead.
    - `Alert` is always-visible (no open state). Pass `status` + `message`; add `onClose` only for dismissible alerts.
    - `Toast` / `ToastStack` are floating — render them in a `fixed` portal (`fixed bottom-4 right-4 z-50`). Never inline them in page flow.
-   - `Badge` wraps a trigger element via children and adds a count or dot on top. Pass `variant="notification"` for the bell, `variant="filter"` for buttons.
-   - `Notification` manages its own popover; pass `groups` (array of `{ label, items }`). It renders both the bell trigger and the panel.
+   - `Badge variant="button"` (default) — filter button with optional count. Pass `count`, `label`, `iconOnly`, and `onClick`.
+   - `Badge variant="notification"` — internal to `<Notification>`; never use standalone or attach your own `onClick` to it.
+   - `Notification` manages its own popover; pass `groups` (array of `{ label, items }`). It renders both the bell trigger and the panel. This is the only correct way to show a notification list.
 
 6. **Mobile forms and action-heavy modals MUST use `<BottomSheet>`, not `<Modal>`.**
    Login, signup, settings panels, profile editors, any multi-field form,

package/llms.txt

@@ -690,7 +690,9 @@ Props (ToastStack): `items: (ToastProps & { id: string })[]`, `className`, `rend
 Button with a count indicator. Two variants:
 
 - `"button"` (default) — filter/action button (funnel icon) that shows a count badge when active. Use in toolbars and filter bars.
-- `"notification"` — bell icon button; typically used as the trigger inside `<Notification>` rather than standalone.
+- `"notification"` — bell icon button used **internally** by `<Notification>`. Do not use standalone.
+
+**Critical rule:** `<Badge variant="notification">` is an internal building block of `<Notification>`. Never wire it to your own `onClick` (a toast, a custom popover, etc.). If you need a notification bell that opens a list, use `<Notification>` — it renders the bell and the panel together.
 
 ```tsx
 // Filter button — inactive and active states
@@ -698,8 +700,11 @@ Button with a count indicator. Two variants:
 <Badge label="Filter" count={3} onClick={openFilter} />
 <Badge iconOnly count={2} onClick={openFilter} />
 
-// Notification bell (standalone)
-<Badge variant="notification" count={5} />
+// WRONG — do not do this:
+// <Badge variant="notification" count={5} onClick={showToast} />
+
+// CORRECT — for a notification bell + list, always use <Notification>:
+<Notification groups={groups} onItemClick={handleClick} />
 ```
 
 Props: `variant?` (`"button"` | `"notification"`, default `"button"`), `count?`, `maxCount?` (default 99), `label?` (button variant, default `"Filter"`), `iconOnly?`, `icon?` (custom icon), `notificationState?` (`"default"` | `"active"` | `"noti"`), plus native `<button>` props.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "type": "module",
   "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
   "keywords": [