@sarunyu/system-one 4.5.1 → 4.6.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 { 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 { 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, Gift, 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";
@@ -244,11 +244,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__ */ jsx(BellSimple, { size: 19, weight: "fill" }) : /* @__PURE__ */ jsx(BellSimple, { size: 19, weight: "regular" }) : icon ?? /* @__PURE__ */ jsx(FunnelSimple, { size: 18, weight: "regular" });
+  const visualIcon = variant === "notification" ? /* @__PURE__ */ jsx(BellSimple, { size: 18, weight: notificationIsFilled ? "fill" : "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,
@@ -256,10 +255,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
       }
@@ -268,8 +264,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
       }
@@ -278,8 +274,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
       }
@@ -288,10 +284,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__ */ jsx("p", { className: "text-center text-xs leading-4 text-on-primary-action", children: formatCount(count, maxCount) })
+        children: /* @__PURE__ */ jsx("p", { className: "text-center text-xs leading-4 font-normal text-text-default-white", children: formatCount(count, maxCount) })
       }
     )
   ] });
@@ -363,6 +359,22 @@ const Alert = forwardRef(function Alert2({ status = "normal", message, multiline
   );
 });
 Alert.displayName = "Alert";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
 function BannerMedia({ src, alt }) {
   if (!src) {
     return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
@@ -470,7 +482,7 @@ const tagConfig = {
 };
 const Card = forwardRef(function Card2({
   variant = "default",
-  size = "desktop",
+  size: sizeProp,
   children,
   title,
   locked = true,
@@ -494,9 +506,11 @@ const Card = forwardRef(function Card2({
   // live
   duration
 }, ref) {
+  const isMobile = useIsMobile();
+  const size = sizeProp ?? (isMobile ? "mobile" : "desktop");
   const bannerSrc = image ?? "";
   if (variant === "default") {
-    const shellPadding = size === "desktop" ? "p-4" : size === "tablet" ? "p-3" : "p-2.5";
+    const shellPadding = size === "desktop" ? "p-4" : "p-3";
     const shellRadius = size === "mobile" ? "rounded-[6px]" : "rounded-[8px]";
     return /* @__PURE__ */ jsx(
       "div",
@@ -954,7 +968,8 @@ function NewsContent({
 }
 function CheckboxVisual({
   state,
-  disabled
+  disabled,
+  error
 }) {
   if (state === "default") {
     return /* @__PURE__ */ jsx(
@@ -963,12 +978,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__ */ jsxs(
@@ -1030,6 +1045,8 @@ function CheckboxVisual({
 const Checkbox = forwardRef(function Checkbox2({
   checked = false,
   disabled = false,
+  error = false,
+  errorMessage = "Error message",
   label,
   description,
   variant = "text",
@@ -1061,59 +1078,72 @@ const Checkbox = 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__ */ 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__ */ jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
-          /* @__PURE__ */ 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__ */ jsx(CheckboxVisual, { state, disabled })
-        ] }),
-        hasText && /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
-          label !== void 0 && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-base leading-6",
-                disabled ? "text-disabled" : "text-foreground"
-              ),
-              children: label
-            }
-          ),
-          description !== void 0 && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-xs leading-4",
-                disabled ? "text-disabled" : "text-subtle-text"
-              ),
-              children: description
-            }
-          )
-        ] })
+        /* @__PURE__ */ 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__ */ jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
+                /* @__PURE__ */ 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__ */ jsx(CheckboxVisual, { state, disabled, error: showError })
+              ] }),
+              hasText && /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+                label !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-base leading-6",
+                      disabled ? "text-disabled" : "text-foreground"
+                    ),
+                    children: label
+                  }
+                ),
+                description !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-xs leading-4",
+                      disabled ? "text-disabled" : "text-subtle-text"
+                    ),
+                    children: description
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showError && /* @__PURE__ */ jsx("span", { className: "mt-1 ml-7 text-xs text-destructive", children: errorMessage })
       ]
     }
   );
@@ -1381,22 +1411,6 @@ const Chip = forwardRef(function Chip2({
   );
 });
 Chip.displayName = "Chip";
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(
-    void 0
-  );
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
 function Drawer({
   ...props
 }) {
@@ -3647,7 +3661,7 @@ const Input = 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: [
       {
@@ -3665,7 +3679,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: [
       {
@@ -3679,7 +3693,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: [
       {
@@ -3864,18 +3878,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__ */ 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),
@@ -3893,22 +3908,11 @@ function NotificationRow({
             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 })
-          ] }),
+        ) : /* @__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(Gift, { size: 20, weight: "regular" }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-base leading-6 font-semibold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-5 text-muted-foreground", children: item.description }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: item.time }),
           item.actionLabel && /* @__PURE__ */ jsx(
             Button,
             {
@@ -3923,7 +3927,14 @@ function NotificationRow({
               children: item.actionLabel
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-2 shrink-0 items-start justify-center pt-2", children: showIndicator ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-2 w-2 rounded-full bg-destructive"
+          }
+        ) : null })
       ]
     }
   );
@@ -3934,6 +3945,7 @@ const Notification = forwardRef(
     badgeCount,
     panelWidth = 375,
     emptyText = "No notifications",
+    showGroupLabels = true,
     clearBadgeOnOpen = true,
     open,
     defaultOpen,
@@ -3945,16 +3957,23 @@ const Notification = forwardRef(
   }, ref) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
     const [isBadgeCleared, setIsBadgeCleared] = useState(false);
+    const [clickedItemIds, setClickedItemIds] = useState(/* @__PURE__ */ new Set());
+    const [wasDismissed, setWasDismissed] = useState(false);
+    const [mobileAlign, setMobileAlign] = useState(null);
+    const triggerRef = useRef(null);
     const controlled = open !== void 0;
     const resolvedOpen = controlled ? open : internalOpen;
-    const unreadCount = useMemo(
+    const newCount = 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 = useRef(nextCount);
     useEffect(() => {
       const prevCount = prevCountRef.current;
@@ -3963,9 +3982,29 @@ const Notification = forwardRef(
       }
       prevCountRef.current = nextCount;
     }, [nextCount]);
+    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();
@@ -3973,8 +4012,17 @@ const Notification = 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__ */ 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(
+      /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex", className), children: /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { ref: triggerRef, className: "relative", children: /* @__PURE__ */ jsx(
         Badge,
         {
           variant: "notification",
@@ -3987,22 +4035,26 @@ const Notification = forwardRef(
       /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
         Popover.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__ */ jsxs("div", { className: "max-h-[480px] overflow-y-auto py-2", children: [
+          style: { width: (mobileAlign == null ? void 0 : mobileAlign.width) ?? panelWidth },
+          children: /* @__PURE__ */ jsxs("div", { className: "max-h-[480px] overflow-y-auto", 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 }),
+              showGroupLabels && group.label ? /* @__PURE__ */ jsx(NotificationDivider, { label: group.label }) : null,
               /* @__PURE__ */ jsx("div", { className: "divide-y divide-divider", children: group.items.map((item) => /* @__PURE__ */ jsx(
                 NotificationRow,
                 {
                   item,
-                  onItemClick
+                  onItemClick: handleItemClick,
+                  hideIndicator: clickedItemIds.has(item.id),
+                  demoteNewBackground: wasDismissed
                 },
                 item.id
               )) })