@sarunyu/system-one 4.4.1 → 4.5.1

package/AGENTS.md

@@ -20,6 +20,10 @@ in this package.** This file is the short version: the rules you must follow.
    - Custom tables → use `<Table>` + `<TableRow>` + `<TableHeaderCell>` + `<TableCell>`.
    - Custom modals/dialogs/alerts → use `<Modal>` (wrap it in your own `fixed inset-0` backdrop).
    - 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 → 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
@@ -43,6 +47,11 @@ in this package.** This file is the short version: the rules you must follow.
    - One `<Button variant="primary">` per context.
    - `Modal` renders the panel only — provide your own `fixed inset-0` backdrop + open/close state. One primary action per modal.
    - `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 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/README.md

@@ -68,6 +68,10 @@ ships no `Page`/`Section`/`Stack` primitives — use whatever layout looks right
 | `Table` | Data tables (`TableRow` / `TableHeaderCell` / `TableCell`) |
 | `Modal` | Centered overlay — dialog / content / alert variants |
 | `BottomSheet` | Mobile-first bottom sheet (Vaul-based, with backdrop) |
+| `Alert` | Inline persistent status banner — information / success / warning / critical |
+| `Toast` / `ToastStack` | Floating transient notification — default and broadcast variants |
+| `Badge` | Count badge overlay on a trigger (notification bell or filter button) |
+| `Notification` | Bell trigger + popover panel with grouped notification items |
 
 Full prop reference: [`llms.txt`](./llms.txt).
 
@@ -124,6 +128,9 @@ import type {
   InputProps, DropdownOption,
   ToggleSize, ToggleProps,
   ModalVariant, ModalActionLayout,
+  AlertStatus,
+  ToastVariant, ToastStatus,
+  NotificationItem, NotificationGroup,
 } from "@sarunyu/system-one";
 ```
 

package/dist/index.cjs

@@ -247,6 +247,141 @@ const Button = React.forwardRef(function Button2({
   );
 });
 Button.displayName = "Button";
+function formatCount(count, maxCount) {
+  if (count > maxCount) return `${maxCount}+`;
+  return String(count);
+}
+function Badge({
+  variant = "button",
+  count = 0,
+  maxCount = 99,
+  label = "Filter",
+  iconOnly = false,
+  icon,
+  notificationState,
+  className,
+  ...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" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex", className), children: [
+    variant === "notification" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        "aria-label": "Notification",
+        size: "icon-xs",
+        variant: "plain-black",
+        className: cn(
+          "text-subtle-text",
+          notificationIsFilled && "text-primary-action"
+        ),
+        ...props,
+        children: visualIcon
+      }
+    ) : iconOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        "aria-label": label,
+        size: "icon-md",
+        variant: isActive ? "outline" : "outline-black",
+        className: cn(isActive && "bg-primary-action-light border-primary-action-light"),
+        ...props,
+        children: visualIcon
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        size: "md",
+        leftIcon: visualIcon,
+        variant: isActive ? "outline" : "outline-black",
+        className: cn(isActive && "bg-primary-action-light border-primary-action-light"),
+        ...props,
+        children: label
+      }
+    ),
+    (variant === "notification" ? showNotificationDot : hasCount) && /* @__PURE__ */ jsxRuntime.jsx(
+      "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"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs leading-4 text-on-primary-action", children: formatCount(count, maxCount) })
+      }
+    )
+  ] });
+}
+const alertStyles = {
+  normal: {
+    container: "bg-default-secondary",
+    text: "text-default-secondary",
+    icon: "text-default-secondary"
+  },
+  information: {
+    container: "bg-[var(--bg-info-light)]",
+    text: "text-[var(--text-info-primary)]",
+    icon: "text-[var(--icon-brand-primary)]"
+  },
+  success: {
+    container: "bg-[var(--bg-success-light)]",
+    text: "text-[var(--text-success-primary)]",
+    icon: "text-[var(--icon-success)]"
+  },
+  warning: {
+    container: "bg-[var(--bg-warning-soft)]",
+    text: "text-[var(--text-warning-primary)]",
+    icon: "text-[var(--icon-warning)]"
+  },
+  critical: {
+    container: "bg-[var(--bg-danger-light)]",
+    text: "text-[var(--text-danger-primary)]",
+    icon: "text-[var(--icon-danger)]"
+  }
+};
+function AlertStatusIcon({
+  status,
+  className
+}) {
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(react.CheckCircle, { size: 16, weight: "fill", className });
+  if (status === "warning") return /* @__PURE__ */ jsxRuntime.jsx(react.Warning, { size: 16, weight: "fill", className });
+  if (status === "critical") return /* @__PURE__ */ jsxRuntime.jsx(react.XCircle, { size: 16, weight: "fill", className });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Info, { size: 16, weight: "fill", className });
+}
+const Alert = React.forwardRef(function Alert2({ status = "normal", message, multiline = false, className }, ref) {
+  const style = alertStyles[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      className: cn(
+        "flex w-full items-center gap-1.5 rounded px-2 py-1",
+        multiline && "items-start",
+        style.container,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertStatusIcon, { status, className: cn("shrink-0", multiline && "mt-0.5", style.icon) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "min-w-0 flex-1 text-sm leading-5 font-normal",
+              multiline ? "line-clamp-2" : "truncate",
+              style.text
+            ),
+            children: message
+          }
+        )
+      ]
+    }
+  );
+});
+Alert.displayName = "Alert";
 function BannerMedia({ src, alt }) {
   if (!src) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
@@ -3740,6 +3875,293 @@ function ModalActions({
     )
   ] });
 }
+function NotificationDivider({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-sm leading-5 text-subtle-text", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "h-px min-w-0 flex-1 bg-divider" })
+  ] });
+}
+function NotificationRow({
+  item,
+  onItemClick
+}) {
+  const rowType = item.type ?? "icon";
+  const showImage = rowType === "image";
+  const showUnread = Boolean(item.unread);
+  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"
+      ),
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onItemClick == null ? void 0 : onItemClick(item),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onItemClick == null ? void 0 : onItemClick(item);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-10 shrink-0 items-start justify-center py-0.5", children: showImage ? item.imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            alt: "",
+            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 })
+          ] }),
+          item.actionLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              className: "mt-2",
+              size: "md",
+              variant: "primary",
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = item.onActionClick) == null ? void 0 : _a.call(item);
+              },
+              children: item.actionLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Notification = React.forwardRef(
+  function Notification2({
+    groups,
+    badgeCount,
+    panelWidth = 375,
+    emptyText = "No notifications",
+    clearBadgeOnOpen = true,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onBadgeCleared,
+    onItemClick,
+    className,
+    panelClassName
+  }, ref) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const [isBadgeCleared, setIsBadgeCleared] = React.useState(false);
+    const controlled = open !== void 0;
+    const resolvedOpen = controlled ? open : internalOpen;
+    const unreadCount = React.useMemo(
+      () => groups.reduce(
+        (acc, group) => acc + group.items.filter((item) => Boolean(item.unread)).length,
+        0
+      ),
+      [groups]
+    );
+    const nextCount = badgeCount ?? unreadCount;
+    const prevCountRef = React.useRef(nextCount);
+    React.useEffect(() => {
+      const prevCount = prevCountRef.current;
+      if (nextCount <= 0 || nextCount > prevCount) {
+        setIsBadgeCleared(false);
+      }
+      prevCountRef.current = nextCount;
+    }, [nextCount]);
+    const displayCount = clearBadgeOnOpen && isBadgeCleared ? 0 : nextCount;
+    const hasItems = groups.some((group) => group.items.length > 0);
+    const handleOpenChange = (next) => {
+      if (next && clearBadgeOnOpen && nextCount > 0) {
+        setIsBadgeCleared(true);
+        onBadgeCleared == null ? void 0 : onBadgeCleared();
+      }
+      if (!controlled) setInternalOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    };
+    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(
+        Badge,
+        {
+          variant: "notification",
+          count: displayCount,
+          maxCount: 99,
+          notificationState: displayCount > 0 ? "noti" : resolvedOpen ? "active" : "default",
+          "aria-label": "Open notifications"
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Popover__namespace.Content,
+        {
+          align: "end",
+          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: [
+            !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 }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-divider", children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                NotificationRow,
+                {
+                  item,
+                  onItemClick
+                },
+                item.id
+              )) })
+            ] }, group.label))
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+Notification.displayName = "Notification";
+const statusStyles = {
+  information: {
+    bg: "bg-[var(--bg-info-light)]",
+    text: "text-[var(--text-info-primary)]",
+    icon: "text-[var(--icon-brand-primary)]",
+    link: "text-[var(--text-brand-link-primary)]"
+  },
+  success: {
+    bg: "bg-[var(--bg-success-light)]",
+    text: "text-[var(--text-success-primary)]",
+    icon: "text-[var(--icon-success)]",
+    link: "text-[var(--text-success-link)]"
+  },
+  warning: {
+    bg: "bg-[var(--bg-warning-soft)]",
+    text: "text-[var(--text-warning-primary)]",
+    icon: "text-[var(--icon-warning)]",
+    link: "text-[var(--text-warning-link)]"
+  },
+  critical: {
+    bg: "bg-[var(--bg-danger-light)]",
+    text: "text-[var(--text-danger-primary)]",
+    icon: "text-[var(--icon-danger)]",
+    link: "text-[var(--text-danger-link)]"
+  }
+};
+function DefaultIcon({
+  status,
+  className
+}) {
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(react.CheckCircle, { className, size: 24, weight: "fill" });
+  if (status === "warning") return /* @__PURE__ */ jsxRuntime.jsx(react.Warning, { className, size: 24, weight: "fill" });
+  if (status === "critical") return /* @__PURE__ */ jsxRuntime.jsx(react.XCircle, { className, size: 24, weight: "fill" });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Info, { className, size: 24, weight: "fill" });
+}
+function BroadcastIcon({
+  status,
+  className
+}) {
+  if (status === "information") {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.MegaphoneSimple, { className, size: 20, weight: "fill" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.GearSix, { className, size: 20, weight: "fill" });
+}
+function ToastCloseButton({
+  colorClass,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close toast",
+      className: cn(
+        "inline-flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center",
+        colorClass
+      ),
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 12, weight: "bold" })
+    }
+  );
+}
+const Toast = React.forwardRef(function Toast2({
+  variant = "default",
+  status = "information",
+  message,
+  actionLabel,
+  multiline = false,
+  onActionClick,
+  onClose,
+  className
+}, ref) {
+  const hasAction = Boolean(actionLabel);
+  const effectiveStatus = variant === "broadcast" && status === "success" ? "information" : status;
+  const effectiveStyle = statusStyles[effectiveStatus];
+  const Icon = variant === "broadcast" ? BroadcastIcon : DefaultIcon;
+  const showActions = variant === "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      className: cn(
+        "flex w-full p-3",
+        variant === "default" ? "items-center gap-2 rounded-lg shadow-[0px_1px_2px_0px_rgba(0,0,0,0.10),0px_1px_3px_1px_rgba(0,0,0,0.05)]" : "items-center gap-2",
+        multiline && "items-start",
+        effectiveStyle.bg,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 gap-2",
+              multiline ? "items-start" : "items-center",
+              variant === "default" && !hasAction && "opacity-80"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0", multiline && "pt-0.5"), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { status: effectiveStatus, className: effectiveStyle.icon }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("min-w-0 flex-1 text-sm leading-5 font-normal", effectiveStyle.text), children: message })
+            ]
+          }
+        ),
+        showActions && hasAction ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "cursor-pointer text-sm leading-5 underline underline-offset-2",
+                effectiveStyle.link
+              ),
+              onClick: onActionClick,
+              children: actionLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ToastCloseButton, { colorClass: effectiveStyle.icon, onClose })
+        ] }) : showActions ? /* @__PURE__ */ jsxRuntime.jsx(ToastCloseButton, { colorClass: effectiveStyle.icon, onClose }) : null
+      ]
+    }
+  );
+});
+Toast.displayName = "Toast";
+function ToastStack({ items, className, renderItem }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", className), children: items.map(
+    (item) => renderItem ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...item }, item.id)
+  ) });
+}
 const OptionList = React.forwardRef(
   function OptionList2({
     options,
@@ -5372,6 +5794,8 @@ const TimeInput = React.forwardRef(
   }
 );
 TimeInput.displayName = "TimeInput";
+exports.Alert = Alert;
+exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.Card = Card;
@@ -5382,6 +5806,7 @@ exports.Dropdown = Dropdown;
 exports.DropdownMultiple = DropdownMultiple;
 exports.Input = Input;
 exports.Modal = Modal;
+exports.Notification = Notification;
 exports.OptionList = OptionList;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
@@ -5395,6 +5820,8 @@ exports.TableRow = TableRow;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
+exports.Toast = Toast;
+exports.ToastStack = ToastStack;
 exports.Toggle = Toggle;
 exports.cn = cn;
 exports.useIsMobile = useIsMobile;