@sarunyu/system-one 4.3.1 → 4.5.0

package/dist/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useId, useMemo, useLayoutEffect, useContext, createContext } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { BookmarkSimpleIcon, BroadcastIcon, CalendarBlank, MapPin, Users, XCircle, CheckCircle, Lock, Check, Plus, Circle, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, MagnifyingGlass, ArrowUp, ArrowDown, ArrowsDownUp, Clock } from "@phosphor-icons/react";
+import { BellSimple, FunnelSimple, CheckCircle, Warning, XCircle, Info, BookmarkSimpleIcon, BroadcastIcon as BroadcastIcon$1, CalendarBlank, MapPin, Users, Lock, Check, Plus, Circle, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, ImageSquare, MegaphoneSimple, GearSix, MagnifyingGlass, ArrowUp, ArrowDown, ArrowsDownUp, Clock } from "@phosphor-icons/react";
 import { DayPicker, useNavigation } from "react-day-picker";
 import * as Popover from "@radix-ui/react-popover";
 import { Drawer as Drawer$1 } from "vaul";
@@ -228,6 +228,154 @@ const Button = 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__ */ jsx(BellSimple, { size: 19, weight: "fill" }) : /* @__PURE__ */ jsx(BellSimple, { size: 19, weight: "regular" }) : icon ?? /* @__PURE__ */ jsx(FunnelSimple, { size: 18, weight: "regular" });
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
+    variant === "notification" ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(CheckCircle, { size: 16, weight: "fill", className });
+  if (status === "warning") return /* @__PURE__ */ jsx(Warning, { size: 16, weight: "fill", className });
+  if (status === "critical") return /* @__PURE__ */ jsx(XCircle, { size: 16, weight: "fill", className });
+  return /* @__PURE__ */ jsx(Info, { size: 16, weight: "fill", className });
+}
+const Alert = forwardRef(function Alert2({ status = "normal", message, multiline = false, className }, ref) {
+  const style = alertStyles[status];
+  return /* @__PURE__ */ 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__ */ jsx(AlertStatusIcon, { status, className: cn("shrink-0", multiline && "mt-0.5", style.icon) }),
+        /* @__PURE__ */ 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__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt,
+      className: "pointer-events-none absolute inset-0 size-full object-cover",
+      src
+    }
+  );
+}
 function DurationBadge({
   duration,
   size
@@ -241,7 +389,7 @@ function DurationBadge({
         size === "lg" ? "bottom-[6px] right-[6px] h-[20px] px-[4px]" : "bottom-[4px] right-[4px] h-[16px] px-[2px]"
       ),
       children: [
-        isUpcoming && /* @__PURE__ */ jsx(BroadcastIcon, { size: 14, className: "text-white" }),
+        isUpcoming && /* @__PURE__ */ jsx(BroadcastIcon$1, { size: 14, className: "text-white" }),
         /* @__PURE__ */ jsx(
           "p",
           {
@@ -321,7 +469,7 @@ const tagConfig = {
   }
 };
 const Card = forwardRef(function Card2({
-  variant = "event",
+  variant = "default",
   size = "desktop",
   children,
   title,
@@ -435,14 +583,7 @@ const Card = forwardRef(function Card2({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                alt: "social thumbnail",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ) })
+            /* @__PURE__ */ jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "social thumbnail" }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             isDesktop ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[12px]", children: [
@@ -525,14 +666,7 @@ const Card = forwardRef(function Card2({
                 imgHeight
               ),
               children: [
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: "live thumbnail",
-                    className: "pointer-events-none absolute inset-0 size-full object-cover",
-                    src: bannerSrc
-                  }
-                ),
+                /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "live thumbnail" }),
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -569,14 +703,7 @@ const Card = forwardRef(function Card2({
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative h-[184px] w-full shrink-0 overflow-clip", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                alt: "news banner",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ),
+            /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
             locked && /* @__PURE__ */ jsx(LockBadge, {})
           ] }),
           /* @__PURE__ */ jsx(
@@ -606,14 +733,7 @@ const Card = forwardRef(function Card2({
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative h-[114px] w-[171px] shrink-0 overflow-clip", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                alt: "news banner",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ),
+            /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
             locked && /* @__PURE__ */ jsx(LockBadge, {})
           ] }),
           /* @__PURE__ */ jsx(
@@ -651,11 +771,10 @@ const Card = forwardRef(function Card2({
             className: cn("relative w-full shrink-0 overflow-clip", bannerClass),
             children: [
               /* @__PURE__ */ jsx(
-                "img",
+                BannerMedia,
                 {
-                  alt: variant === "news" ? "news banner" : "event banner",
-                  className: "pointer-events-none absolute inset-0 size-full object-cover",
-                  src: bannerSrc
+                  src: bannerSrc,
+                  alt: variant === "news" ? "news banner" : "event banner"
                 }
               ),
               locked && /* @__PURE__ */ jsx(LockBadge, { size })
@@ -3737,6 +3856,293 @@ function ModalActions({
     )
   ] });
 }
+function NotificationDivider({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "shrink-0 text-sm leading-5 text-subtle-text", children: label }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex w-10 shrink-0 items-start justify-center py-0.5", children: showImage ? item.imageSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: "",
+            className: "h-10 w-10 rounded object-cover",
+            src: item.imageSrc
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-disabled-bg text-disabled", children: /* @__PURE__ */ jsx(ImageSquare, { size: 20, weight: "regular" }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center text-subtle-text", children: item.icon ?? /* @__PURE__ */ jsx(Circle, { size: 20, weight: "regular" }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base leading-6 font-bold text-foreground", children: item.title }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              showUnread && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-2 w-2 rounded-full bg-primary-action"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: item.time })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "col-start-1 mt-1 line-clamp-2 text-sm leading-5 text-muted-foreground", children: item.description })
+          ] }),
+          item.actionLabel && /* @__PURE__ */ 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 = forwardRef(
+  function Notification2({
+    groups,
+    badgeCount,
+    panelWidth = 375,
+    emptyText = "No notifications",
+    clearBadgeOnOpen = true,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onBadgeCleared,
+    onItemClick,
+    className,
+    panelClassName
+  }, ref) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+    const [isBadgeCleared, setIsBadgeCleared] = useState(false);
+    const controlled = open !== void 0;
+    const resolvedOpen = controlled ? open : internalOpen;
+    const unreadCount = useMemo(
+      () => groups.reduce(
+        (acc, group) => acc + group.items.filter((item) => Boolean(item.unread)).length,
+        0
+      ),
+      [groups]
+    );
+    const nextCount = badgeCount ?? unreadCount;
+    const prevCountRef = useRef(nextCount);
+    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__ */ jsxs(Popover.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex", className), children: /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "notification",
+          count: displayCount,
+          maxCount: 99,
+          notificationState: displayCount > 0 ? "noti" : resolvedOpen ? "active" : "default",
+          "aria-label": "Open notifications"
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+        Popover.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__ */ jsxs("div", { className: "max-h-[480px] overflow-y-auto py-2", children: [
+            !hasItems && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: emptyText }),
+            groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+              /* @__PURE__ */ jsx(NotificationDivider, { label: group.label }),
+              /* @__PURE__ */ jsx("div", { className: "divide-y divide-divider", children: group.items.map((item) => /* @__PURE__ */ 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__ */ jsx(CheckCircle, { className, size: 24, weight: "fill" });
+  if (status === "warning") return /* @__PURE__ */ jsx(Warning, { className, size: 24, weight: "fill" });
+  if (status === "critical") return /* @__PURE__ */ jsx(XCircle, { className, size: 24, weight: "fill" });
+  return /* @__PURE__ */ jsx(Info, { className, size: 24, weight: "fill" });
+}
+function BroadcastIcon({
+  status,
+  className
+}) {
+  if (status === "information") {
+    return /* @__PURE__ */ jsx(MegaphoneSimple, { className, size: 20, weight: "fill" });
+  }
+  return /* @__PURE__ */ jsx(GearSix, { className, size: 20, weight: "fill" });
+}
+function ToastCloseButton({
+  colorClass,
+  onClose
+}) {
+  return /* @__PURE__ */ 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__ */ jsx(X, { size: 12, weight: "bold" })
+    }
+  );
+}
+const Toast = 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__ */ 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__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 gap-2",
+              multiline ? "items-start" : "items-center",
+              variant === "default" && !hasAction && "opacity-80"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("shrink-0", multiline && "pt-0.5"), children: /* @__PURE__ */ jsx(Icon, { status: effectiveStatus, className: effectiveStyle.icon }) }),
+              /* @__PURE__ */ jsx("p", { className: cn("min-w-0 flex-1 text-sm leading-5 font-normal", effectiveStyle.text), children: message })
+            ]
+          }
+        ),
+        showActions && hasAction ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "cursor-pointer text-sm leading-5 underline underline-offset-2",
+                effectiveStyle.link
+              ),
+              onClick: onActionClick,
+              children: actionLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(ToastCloseButton, { colorClass: effectiveStyle.icon, onClose })
+        ] }) : showActions ? /* @__PURE__ */ jsx(ToastCloseButton, { colorClass: effectiveStyle.icon, onClose }) : null
+      ]
+    }
+  );
+});
+Toast.displayName = "Toast";
+function ToastStack({ items, className, renderItem }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: items.map(
+    (item) => renderItem ? /* @__PURE__ */ jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsx(Toast, { ...item }, item.id)
+  ) });
+}
 const OptionList = forwardRef(
   function OptionList2({
     options,
@@ -5370,6 +5776,8 @@ const TimeInput = forwardRef(
 );
 TimeInput.displayName = "TimeInput";
 export {
+  Alert,
+  Badge,
   BottomSheet,
   Button,
   Card,
@@ -5380,6 +5788,7 @@ export {
   DropdownMultiple,
   Input,
   Modal,
+  Notification,
   OptionList,
   Radio,
   SearchInput,
@@ -5393,6 +5802,8 @@ export {
   Tag,
   TextArea,
   TimeInput,
+  Toast,
+  ToastStack,
   Toggle,
   cn,
   useIsMobile