@sarunyu/system-one 4.5.2 → 4.6.1

package/AGENTS.md

@@ -32,14 +32,35 @@ in this package.** This file is the short version: the rules you must follow.
      `bg-background`, `bg-card`, `bg-muted`, `bg-primary-action`,
      `border-border`, `border-divider`, etc. See `llms.txt` for the full table.
 
-3. **Do not add text/font utility classes to `<h1>`–`<h4>`.** They are pre-styled.
+3. **No arbitrary bracket values for spacing/sizing/typography.** Use scale utilities only.
+   - **Forbidden**: `max-w-[1100px]`, `h-[317px]`, `min-h-[calc(100vh-64px)]`,
+     `w-[272px]`, `gap-[14px]`, `p-[10px]`, `text-[13px]`, `leading-[22px]`,
+     `rounded-[10px]`, `top-[7px]`.
+   - **Allowed**: scale values — `max-w-5xl` / `max-w-2xl`, `h-80` (=320px),
+     `w-64` (=256px), `gap-4`, `p-6`, `text-sm`, `leading-6`, `rounded-lg`,
+     `top-2`. The spacing scale is 4px-based: `0.5` (2px), `1` (4px), `2` (8px),
+     `3` (12px), `4` (16px), `5` (20px), `6` (24px), `8` (32px), `10` (40px),
+     `12` (48px), `16` (64px), `20` (80px), `24` (96px).
+   - **Exception — container widths only**: these specific arbitrary widths are
+     safelisted and may be used: `max-w-[480px]`, `max-w-[640px]`, `max-w-[720px]`,
+     `max-w-[800px]`, `max-w-[960px]`, `max-w-[1024px]`, `max-w-[1200px]`,
+     `max-w-[1280px]`, `max-w-[1440px]`. For other widths, pick the nearest
+     `max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}`.
+   - **Why**: the library's shipped `styles.css` only contains scale utilities
+     + the safelisted arbitrary container widths. Any other `[...]` value needs
+     host-side Tailwind to compile — in a plain host (e.g. Claude Code / Cursor
+     vibe-coded Vite project without Tailwind setup) the class is a no-op and
+     layout collapses. If a design truly requires an odd value, snap to the
+     nearest scale step.
+
+4. **Do not add text/font utility classes to `<h1>`–`<h4>`.** They are pre-styled.
    Use them as-is.
 
-4. **Layout is your job, with plain Tailwind.** The library has NO layout primitives.
+5. **Layout is your job, with plain Tailwind.** The library has NO layout primitives.
    Do not import `Page`, `Section`, `Stack`, `CardGrid`, `Toolbar` — they do not exist.
    Build structure with `<div>` + `flex` / `grid` / `max-w-*` / `gap-*` / `p-*`.
 
-5. **Component props are documented in `llms.txt` and in the `.d.ts` files.**
+6. **Component props are documented in `llms.txt` and in the `.d.ts` files.**
    - `Input.onChange` receives `(value: string)`, not an event.
    - `placeholder` IS the label (floats up on fill). Don't add a separate `<label>`.
    - Checkbox/Radio take their `label` as a prop. Don't wrap them in `<label>`.
@@ -53,7 +74,7 @@ in this package.** This file is the short version: the rules you must follow.
    - `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>`.**
+7. **Mobile forms and action-heavy modals MUST use `<BottomSheet>`, not `<Modal>`.**
    Login, signup, settings panels, profile editors, any multi-field form,
    multi-step flow, long picker list, or action menu — on mobile (< 768px)
    these render as `<BottomSheet>`. Only simple `variant="alert"` and short
@@ -75,6 +96,20 @@ import "@sarunyu/system-one/styles.css";
 
 If the screen looks unstyled, this import is missing.
 
+**If the host project has Tailwind (v4) in a separate CSS file, import this
+library BEFORE Tailwind:**
+
+```css
+/* app/globals.css */
+@import "@sarunyu/system-one/styles.css";   /* first */
+@import "tailwindcss";                       /* second */
+```
+
+The library ships its CSS wrapped in `@layer system-one` so host utilities can
+override library utilities — but that only works if host's Tailwind layer is
+declared AFTER the library's. Reversing the import order makes library
+utilities (`p-6`, `gap-4`, `max-w-*`, etc.) win over host-written ones.
+
 ## Dark mode
 
 Add `.dark` to any ancestor (usually `<html>`). All tokens adapt automatically.

package/DESIGN.md

@@ -242,6 +242,7 @@ Use sparingly. Corporate UIs prefer border separation over heavy elevation.
 | Keep whitespace controlled: `gap-4`–`gap-6` inside sections | Over-pad with `gap-10`+ inside cards |
 | One `variant="primary"` Button per context | Two or more primary buttons side by side |
 | Separate sections with `gap-12` or a `border-divider` line | Use heavy drop shadows to separate sections |
+| Use scale values — `max-w-5xl`, `h-80`, `w-64`, `gap-4`, `p-6`, `text-sm` | Use arbitrary brackets — `max-w-[1100px]`, `h-[317px]`, `gap-[14px]`, `text-[13px]` (won't compile in hosts without Tailwind; see AGENTS.md rule 3) |
 
 ---
 

package/README.md

@@ -27,6 +27,27 @@ import "@sarunyu/system-one/styles.css";
 
 No provider, no wrapper. Components ship with `"use client"`.
 
+### Import order matters (if host has Tailwind)
+
+The library's CSS is pre-wrapped in `@layer system-one` so host utilities can
+override library utilities. For that to hold, import this library **before**
+`tailwindcss` / your own utility CSS:
+
+```css
+/* app/globals.css — CORRECT */
+@import "@sarunyu/system-one/styles.css";
+@import "tailwindcss";
+```
+
+```css
+/* app/globals.css — WRONG (library utilities will beat yours) */
+@import "tailwindcss";
+@import "@sarunyu/system-one/styles.css";
+```
+
+For hosts without Tailwind (Claude Code / Cursor vibe-coded projects), order
+doesn't matter — unlayered host rules always beat the library's layered rules.
+
 ## Use
 
 ```tsx

package/dist/index.cjs

@@ -263,11 +263,10 @@ function Badge({
   ...props
 }) {
   const hasCount = count > 0;
-  const isActive = hasCount;
   const resolvedNotificationState = notificationState ?? (hasCount ? "noti" : "default");
   const notificationIsFilled = resolvedNotificationState === "active" || resolvedNotificationState === "noti";
   const showNotificationDot = resolvedNotificationState === "noti" && hasCount;
-  const visualIcon = variant === "notification" ? notificationIsFilled ? /* @__PURE__ */ jsxRuntime.jsx(react.BellSimple, { size: 19, weight: "fill" }) : /* @__PURE__ */ jsxRuntime.jsx(react.BellSimple, { size: 19, weight: "regular" }) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.FunnelSimple, { size: 18, weight: "regular" });
+  const visualIcon = variant === "notification" ? /* @__PURE__ */ jsxRuntime.jsx(react.BellSimple, { size: 18, weight: notificationIsFilled ? "fill" : "regular" }) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.FunnelSimple, { size: 18, weight: "regular" });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex", className), children: [
     variant === "notification" ? /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -275,10 +274,7 @@ function Badge({
         "aria-label": "Notification",
         size: "icon-xs",
         variant: "plain-black",
-        className: cn(
-          "text-subtle-text",
-          notificationIsFilled && "text-primary-action"
-        ),
+        className: "text-icon-brand [&>span]:!h-[18px] [&>span]:!w-[18px]",
         ...props,
         children: visualIcon
       }
@@ -287,8 +283,8 @@ function Badge({
       {
         "aria-label": label,
         size: "icon-md",
-        variant: isActive ? "outline" : "outline-black",
-        className: cn(isActive && "bg-primary-action-light border-primary-action-light"),
+        variant: hasCount ? "outline" : "outline-black",
+        className: cn(hasCount && "bg-primary-action-light border-primary-action-light"),
         ...props,
         children: visualIcon
       }
@@ -297,8 +293,8 @@ function Badge({
       {
         size: "md",
         leftIcon: visualIcon,
-        variant: isActive ? "outline" : "outline-black",
-        className: cn(isActive && "bg-primary-action-light border-primary-action-light"),
+        variant: hasCount ? "outline" : "outline-black",
+        className: cn(hasCount && "bg-primary-action-light border-primary-action-light"),
         ...props,
         children: label
       }
@@ -307,10 +303,10 @@ function Badge({
       "div",
       {
         className: cn(
-          "absolute flex items-center justify-center rounded-[60px] px-1",
-          variant === "notification" ? "-right-0.5 -top-0.5 h-[14px] min-w-[14px] bg-destructive" : "-right-1 -top-[7px] h-4 min-w-4 bg-primary-action"
+          "absolute flex h-[14px] min-h-[14px] min-w-[14px] items-center justify-center rounded-[60px]",
+          variant === "notification" ? "-right-0.5 -top-0.5 bg-destructive px-[2.5px]" : "-right-1 -top-[7px] h-4 min-w-4 bg-primary-action"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs leading-4 text-on-primary-action", children: formatCount(count, maxCount) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs leading-4 font-normal text-text-default-white", children: formatCount(count, maxCount) })
       }
     )
   ] });
@@ -991,7 +987,8 @@ function NewsContent({
 }
 function CheckboxVisual({
   state,
-  disabled
+  disabled,
+  error
 }) {
   if (state === "default") {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1000,12 +997,12 @@ function CheckboxVisual({
         "aria-hidden": "true",
         className: cn(
           "block w-4 h-4 rounded-[2px] border-[1.5px]",
-          disabled ? "bg-disabled-bg border-[var(--fill-black-100)]" : "bg-background border-[var(--fill-black-200)]"
+          disabled ? "bg-disabled-bg border-[var(--fill-black-100)]" : error ? "bg-background border-destructive" : "bg-background border-[var(--fill-black-200)]"
         )
       }
     );
   }
-  const containerFill = disabled ? "var(--fill-gray-300)" : "var(--fill-p1-600)";
+  const containerFill = disabled ? "var(--disabled-bg)" : "var(--fill-p1-600)";
   const iconFill = disabled ? "var(--fill-gray-400)" : "var(--fill-white-1000)";
   if (state === "checked") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1067,6 +1064,8 @@ function CheckboxVisual({
 const Checkbox = React.forwardRef(function Checkbox2({
   checked = false,
   disabled = false,
+  error = false,
+  errorMessage = "Error message",
   label,
   description,
   variant = "text",
@@ -1098,59 +1097,72 @@ const Checkbox = React.forwardRef(function Checkbox2({
   const hasText = label !== void 0 || description !== void 0;
   const hasActiveBorder = state === "checked" || state === "indeterminate";
   const isButton = variant === "button";
-  const buttonBorder = disabled ? "border-[var(--fill-black-100)]" : hasActiveBorder ? "border-primary-action" : "border-[var(--fill-black-200)]";
+  const buttonBorder = disabled ? "border-[var(--fill-black-100)]" : error ? "border-destructive" : hasActiveBorder ? "border-primary-action" : "border-[var(--fill-black-200)]";
+  const showError = error && !disabled;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
       className: cn(
-        "inline-flex gap-1 select-none",
-        description ? "items-start" : "items-center",
+        "flex flex-col select-none",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
-        isButton && cn("bg-background rounded-lg border py-2.5 pl-3 pr-4", buttonBorder),
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref: setRefs,
-              id,
-              name,
-              value,
-              type: "checkbox",
-              checked: checked === true,
-              disabled,
-              onChange: handleChange,
-              "aria-label": ariaLabel,
-              "aria-checked": checked === "indeterminate" ? "mixed" : checked,
-              className: "absolute inset-0 w-full h-full opacity-0 m-0 cursor-[inherit] disabled:cursor-[inherit]"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(CheckboxVisual, { state, disabled })
-        ] }),
-        hasText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
-          label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "text-base leading-6",
-                disabled ? "text-disabled" : "text-foreground"
-              ),
-              children: label
-            }
-          ),
-          description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "text-xs leading-4",
-                disabled ? "text-disabled" : "text-subtle-text"
-              ),
-              children: description
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex gap-1",
+              description ? "items-start" : "items-center",
+              isButton && cn("bg-background rounded-lg border py-2.5 pl-3 pr-4", buttonBorder)
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: setRefs,
+                    id,
+                    name,
+                    value,
+                    type: "checkbox",
+                    checked: checked === true,
+                    disabled,
+                    onChange: handleChange,
+                    "aria-label": ariaLabel,
+                    "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+                    "aria-invalid": showError || void 0,
+                    className: "absolute inset-0 w-full h-full opacity-0 m-0 cursor-[inherit] disabled:cursor-[inherit]"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(CheckboxVisual, { state, disabled, error: showError })
+              ] }),
+              hasText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+                label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-base leading-6",
+                      disabled ? "text-disabled" : "text-foreground"
+                    ),
+                    children: label
+                  }
+                ),
+                description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-xs leading-4",
+                      disabled ? "text-disabled" : "text-subtle-text"
+                    ),
+                    children: description
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showError && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 ml-7 text-xs text-destructive", children: errorMessage })
       ]
     }
   );
@@ -3668,7 +3680,7 @@ const Input = React.forwardRef(function Input2({
 Input.displayName = "Input";
 const ALERT_CONFIG = {
   warning: {
-    titleColor: "var(--accent-orange)",
+    titleColor: "var(--text-warning-primary)",
     background: "https://www.figma.com/api/mcp/asset/f4ca68ad-5732-4124-9ff4-cfb69330cc02",
     layers: [
       {
@@ -3686,7 +3698,7 @@ const ALERT_CONFIG = {
     ]
   },
   success: {
-    titleColor: "var(--success)",
+    titleColor: "var(--text-success-primary)",
     background: "https://www.figma.com/api/mcp/asset/2a865e6f-8a92-4496-88b5-71ac99e2c385",
     layers: [
       {
@@ -3700,7 +3712,7 @@ const ALERT_CONFIG = {
     ]
   },
   danger: {
-    titleColor: "var(--destructive)",
+    titleColor: "var(--text-danger-primary)",
     background: "https://www.figma.com/api/mcp/asset/c7a65595-684e-4a04-b7fd-d443951f680a",
     layers: [
       {
@@ -3885,18 +3897,19 @@ function NotificationDivider({ label }) {
 }
 function NotificationRow({
   item,
-  onItemClick
+  onItemClick,
+  hideIndicator = false,
+  demoteNewBackground = false
 }) {
   const rowType = item.type ?? "icon";
   const showImage = rowType === "image";
-  const showUnread = Boolean(item.unread);
+  const status = item.status ?? (item.unread ? "unread" : "read");
+  const showIndicator = (status === "new" || status === "unread") && !hideIndicator;
+  const rowBackground = status === "new" && !demoteNewBackground ? "bg-muted" : "bg-background";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "flex w-full items-start gap-3 px-4 py-3",
-        showUnread ? "bg-primary-action-light/40" : "bg-background"
-      ),
+      className: cn("flex w-full items-start gap-3 px-4 py-3", rowBackground),
       role: "button",
       tabIndex: 0,
       onClick: () => onItemClick == null ? void 0 : onItemClick(item),
@@ -3914,22 +3927,11 @@ function NotificationRow({
             className: "h-10 w-10 rounded object-cover",
             src: item.imageSrc
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-disabled-bg text-disabled", children: /* @__PURE__ */ jsxRuntime.jsx(react.ImageSquare, { size: 20, weight: "regular" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center text-subtle-text", children: item.icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 20, weight: "regular" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 truncate text-base leading-6 font-bold text-foreground", children: item.title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
-              showUnread && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "h-2 w-2 rounded-full bg-primary-action"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: item.time })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "col-start-1 mt-1 line-clamp-2 text-sm leading-5 text-muted-foreground", children: item.description })
-          ] }),
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-disabled-bg text-disabled", children: /* @__PURE__ */ jsxRuntime.jsx(react.ImageSquare, { size: 20, weight: "regular" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center text-subtle-text", children: item.icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Gift, { size: 20, weight: "regular" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-base leading-6 font-semibold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-3 text-sm leading-5 text-muted-foreground", children: item.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: item.time }),
           item.actionLabel && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
@@ -3944,7 +3946,14 @@ function NotificationRow({
               children: item.actionLabel
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-2 shrink-0 items-start justify-center pt-2", children: showIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-2 w-2 rounded-full bg-destructive"
+          }
+        ) : null })
       ]
     }
   );
@@ -3955,6 +3964,7 @@ const Notification = React.forwardRef(
     badgeCount,
     panelWidth = 375,
     emptyText = "No notifications",
+    showGroupLabels = true,
     clearBadgeOnOpen = true,
     open,
     defaultOpen,
@@ -3966,16 +3976,23 @@ const Notification = React.forwardRef(
   }, ref) {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const [isBadgeCleared, setIsBadgeCleared] = React.useState(false);
+    const [clickedItemIds, setClickedItemIds] = React.useState(/* @__PURE__ */ new Set());
+    const [wasDismissed, setWasDismissed] = React.useState(false);
+    const [mobileAlign, setMobileAlign] = React.useState(null);
+    const triggerRef = React.useRef(null);
     const controlled = open !== void 0;
     const resolvedOpen = controlled ? open : internalOpen;
-    const unreadCount = React.useMemo(
+    const newCount = React.useMemo(
       () => groups.reduce(
-        (acc, group) => acc + group.items.filter((item) => Boolean(item.unread)).length,
+        (acc, group) => acc + group.items.filter((item) => {
+          const status = item.status ?? (item.unread ? "unread" : "read");
+          return status === "new";
+        }).length,
         0
       ),
       [groups]
     );
-    const nextCount = badgeCount ?? unreadCount;
+    const nextCount = badgeCount ?? newCount;
     const prevCountRef = React.useRef(nextCount);
     React.useEffect(() => {
       const prevCount = prevCountRef.current;
@@ -3984,9 +4001,29 @@ const Notification = React.forwardRef(
       }
       prevCountRef.current = nextCount;
     }, [nextCount]);
+    React.useEffect(() => {
+      const update = () => {
+        if (window.innerWidth > 640 || !triggerRef.current) {
+          setMobileAlign(null);
+          return;
+        }
+        const contentWidth = Math.min(panelWidth, window.innerWidth - 32);
+        const triggerLeft = triggerRef.current.getBoundingClientRect().left;
+        setMobileAlign({
+          alignOffset: (window.innerWidth - contentWidth) / 2 - triggerLeft,
+          width: contentWidth
+        });
+      };
+      update();
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }, [panelWidth]);
     const displayCount = clearBadgeOnOpen && isBadgeCleared ? 0 : nextCount;
     const hasItems = groups.some((group) => group.items.length > 0);
     const handleOpenChange = (next) => {
+      if (resolvedOpen && !next) {
+        setWasDismissed(true);
+      }
       if (next && clearBadgeOnOpen && nextCount > 0) {
         setIsBadgeCleared(true);
         onBadgeCleared == null ? void 0 : onBadgeCleared();
@@ -3994,8 +4031,17 @@ const Notification = React.forwardRef(
       if (!controlled) setInternalOpen(next);
       onOpenChange == null ? void 0 : onOpenChange(next);
     };
+    const handleItemClick = (item) => {
+      setClickedItemIds((prev) => {
+        if (prev.has(item.id)) return prev;
+        const next = new Set(prev);
+        next.add(item.id);
+        return next;
+      });
+      onItemClick == null ? void 0 : onItemClick(item);
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("inline-flex", className), children: /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("inline-flex", className), children: /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
         Badge,
         {
           variant: "notification",
@@ -4008,22 +4054,26 @@ const Notification = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
         Popover__namespace.Content,
         {
-          align: "end",
+          align: mobileAlign ? "start" : "end",
+          alignOffset: (mobileAlign == null ? void 0 : mobileAlign.alignOffset) ?? 0,
+          avoidCollisions: !mobileAlign,
           sideOffset: 10,
           className: cn(
             "z-50 overflow-hidden rounded-lg border border-border bg-background shadow-lg",
             panelClassName
           ),
-          style: { width: panelWidth },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[480px] overflow-y-auto py-2", children: [
+          style: { width: (mobileAlign == null ? void 0 : mobileAlign.width) ?? panelWidth },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[480px] overflow-y-auto", children: [
             !hasItems && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: emptyText }),
             groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(NotificationDivider, { label: group.label }),
+              showGroupLabels && group.label ? /* @__PURE__ */ jsxRuntime.jsx(NotificationDivider, { label: group.label }) : null,
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-divider", children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
                 NotificationRow,
                 {
                   item,
-                  onItemClick
+                  onItemClick: handleItemClick,
+                  hideIndicator: clickedItemIds.has(item.id),
+                  demoteNewBackground: wasDismissed
                 },
                 item.id
               )) })