@sarunyu/system-one 4.9.28 → 4.9.31

package/AGENTS.md

@@ -24,6 +24,8 @@ in this package.** This file is the short version: the rules you must follow.
    - 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.
+   - User profile photos, initials circles, or silhouette placeholders → use `<Avatar>`. For grouped users, use `<AvatarStack>`. Never hand-roll `<img>` or `<div>` avatar shapes.
+   - Custom breadcrumb / navigation trails → use `<Breadcrumb>`.
 
 2. **Use token-backed Tailwind classes for color.** Never emit hard-coded colors:
    - Hex (`#3b82f6`), arbitrary (`bg-[#...]`), and palette utilities
@@ -154,7 +156,7 @@ Build it with tokens. Never introduce new colors.
 
 If the custom thing is conceptually a button/input/tag/chip/tab/card/table,
 **stop and use the library's component instead.** Only build custom when the
-concept isn't covered (hero section, chart, breadcrumb, etc.).
+concept isn't covered (hero section, chart, etc.).
 
 ## Read this before generating code
 

package/DESIGN.md

@@ -248,9 +248,9 @@ Use sparingly. Corporate UIs prefer border separation over heavy elevation.
 
 ## Component library
 
-This design system ships 24 pre-built components. **Always use them — never recreate with raw HTML.**
+This design system ships 27 pre-built components. **Always use them — never recreate with raw HTML.**
 
-Key components: `Button`, `Input`, `TextArea`, `SearchInput`, `Dropdown`, `DropdownMultiple`, `Checkbox`, `Radio`, `Toggle`, `DateInput`, `TimeInput`, `Tag`, `StatusTag`, `Chip`, `TabGroup`, `Card`, `Table` + `TableRow` + `TableHeaderCell` + `TableCell`, `Modal`, `BottomSheet`, `Alert`, `Toast`, `ToastStack`, `Notification`, `Badge`.
+Key components: `Button`, `Input`, `TextArea`, `SearchInput`, `Dropdown`, `DropdownMultiple`, `Checkbox`, `Radio`, `Toggle`, `DateInput`, `TimeInput`, `Avatar`, `AvatarStack`, `Breadcrumb`, `Tag`, `StatusTag`, `Chip`, `TabGroup`, `Card`, `Table` + `TableRow` + `TableHeaderCell` + `TableCell`, `Modal`, `BottomSheet`, `Alert`, `Toast`, `ToastStack`, `Notification`, `Badge`.
 
 For props, variants, and usage rules → read `AGENTS.md` and `llms.txt` in this package.
 

package/dist/index.cjs

@@ -1584,21 +1584,37 @@ function Header({
   rightIcon,
   onActionClick
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", rightSide === "action" ? "pr-2" : void 0), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Leading, { headerType, imageSrc, leftIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-base leading-6 font-bold text-foreground", children: title })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Trailing,
-      {
-        rightSide,
-        actionLabel,
-        rightIcon,
-        onActionClick
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3",
+        rightSide === "action" ? "pr-2" : void 0
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Leading,
+            {
+              headerType,
+              imageSrc,
+              leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-base leading-6 font-bold text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Trailing,
+          {
+            rightSide,
+            actionLabel,
+            rightIcon,
+            onActionClick
+          }
+        )
+      ]
+    }
+  );
 }
 function Leading({
   headerType,
@@ -1606,7 +1622,14 @@ function Leading({
   leftIcon
 }) {
   if (headerType === "image") {
-    return imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "size-8 shrink-0 rounded-md object-cover", src: imageSrc }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 rounded-md bg-muted" });
+    return imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        alt: "",
+        className: "size-8 shrink-0 rounded-md object-cover",
+        src: imageSrc
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 rounded-md bg-muted" });
   }
   if (headerType === "icon") {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-foreground", children: leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 22 }) });
@@ -1623,7 +1646,7 @@ function Trailing({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
-        className: "px-0 py-0 text-base leading-6 font-bold",
+        className: "text-base leading-6 font-bold",
         onClick: onActionClick,
         size: "md",
         variant: "plain",
@@ -5966,6 +5989,157 @@ const TimeInput = React.forwardRef(
   }
 );
 TimeInput.displayName = "TimeInput";
+const avatarPlaceholder = "data:image/png;base64,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";
+const TEXT_GRADIENT = "linear-gradient(to top right, #B5D3F8, #E6F6FB)";
+const TEXT_COLOR = "#00A2D9";
+const SIZE_CONFIG = {
+  xxs: { container: "size-4", fontSize: "text-[11px]", dotSize: "size-[5px]", dotRing: "ring-[1.5px]" },
+  xs: { container: "size-5", fontSize: "text-sm", dotSize: "size-[5px]", dotRing: "ring-[1.5px]" },
+  s: { container: "size-6", fontSize: "text-base", dotSize: "size-[6px]", dotRing: "ring-[1.5px]" },
+  m: { container: "size-8", fontSize: "text-xl", dotSize: "size-[7px]", dotRing: "ring-2" },
+  l: { container: "size-10", fontSize: "text-[26px]", dotSize: "size-[9px]", dotRing: "ring-2" },
+  xl: { container: "size-12", fontSize: "text-[32px]", dotSize: "size-[11px]", dotRing: "ring-2" },
+  xxl: { container: "size-13", fontSize: "text-[37px]", dotSize: "size-[13px]", dotRing: "ring-2" }
+};
+function Avatar({
+  type = "photo",
+  size = "m",
+  status = false,
+  src,
+  alt = "",
+  initials,
+  className
+}) {
+  const { container, fontSize, dotSize, dotRing } = SIZE_CONFIG[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex shrink-0", container, className), children: [
+    type === "photo" && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: "size-full rounded-full object-cover bg-bg-default-tertiary"
+      }
+    ),
+    type === "placeholder" && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: avatarPlaceholder,
+        alt: "",
+        className: "size-full rounded-full object-cover",
+        "aria-hidden": "true"
+      }
+    ),
+    type === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative size-full rounded-full overflow-hidden",
+        style: { background: TEXT_GRADIENT },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-1/2 top-1/2 font-bold leading-none select-none whitespace-nowrap",
+              fontSize
+            ),
+            style: {
+              color: TEXT_COLOR,
+              transform: "translate(-50%, calc(-50% + 0.07em))"
+            },
+            children: (initials ?? "").slice(0, 2).toUpperCase()
+          }
+        )
+      }
+    ),
+    status && type === "photo" && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-label": "Online",
+        className: cn(
+          "absolute bottom-0 right-0 block rounded-full bg-bg-success",
+          dotSize,
+          dotRing,
+          "ring-white"
+        )
+      }
+    )
+  ] });
+}
+const STACK_CONFIG = {
+  small: { avatarSize: "xxs", avatarPx: 16, overlapPx: 4 },
+  medium: { avatarSize: "xs", avatarPx: 20, overlapPx: 5 },
+  large: { avatarSize: "s", avatarPx: 24, overlapPx: 5 }
+};
+function subtractMask(avatarPx, overlapPx) {
+  const r = avatarPx / 2;
+  const spacingPx = avatarPx - overlapPx;
+  const biteX = spacingPx + r;
+  const biteY = r;
+  const biteR = r + 1;
+  const self = `radial-gradient(circle at ${r}px ${r}px, white ${r}px, transparent ${r}px)`;
+  const bite = `radial-gradient(circle at ${biteX}px ${biteY}px, white ${biteR}px, transparent ${biteR}px)`;
+  return {
+    maskImage: `${self}, ${bite}`,
+    maskComposite: "subtract",
+    WebkitMaskImage: `${bite}, ${self}`,
+    WebkitMaskComposite: "destination-out"
+  };
+}
+function AvatarStack({
+  items,
+  size = "small",
+  max = 5,
+  className
+}) {
+  const { avatarSize, avatarPx, overlapPx } = STACK_CONFIG[size];
+  const visible = items.slice(0, max);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex shrink-0", className), children: visible.map((item, i) => {
+    const isLast = i === visible.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative flex shrink-0",
+        style: {
+          width: avatarPx,
+          height: avatarPx,
+          marginLeft: i > 0 ? -overlapPx : 0,
+          // Leftmost = highest z-index: its transparent bite reveals the avatar below.
+          zIndex: visible.length - i,
+          ...isLast ? {} : subtractMask(avatarPx, overlapPx)
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Avatar,
+          {
+            type: item.type ?? "photo",
+            size: avatarSize,
+            src: item.src,
+            alt: item.alt,
+            initials: item.initials
+          }
+        )
+      },
+      i
+    );
+  }) });
+}
+function BreadcrumbLabel({ item, isLast }) {
+  const base = "shrink-0 text-sm leading-5";
+  if (isLast) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: `${base} text-text-brand-secondary`, children: item.label });
+  }
+  if (item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: `${base} text-text-default-secondary hover:text-foreground transition-colors`, children: item.label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${base} text-text-default-secondary`, children: item.label });
+}
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center gap-1", className), children: items.map((item, index2) => {
+    const isLast = index2 === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLabel, { item, isLast }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0 text-sm leading-5 text-text-default-placeholder select-none", children: "/" })
+    ] }, index2);
+  }) });
+}
 const index = {
   Button,
   Badge,
@@ -5999,12 +6173,18 @@ const index = {
   TableCell,
   TextArea,
   TimeInput,
+  Avatar,
+  AvatarStack,
+  Breadcrumb,
   cn,
   useIsMobile
 };
 exports.Alert = Alert;
+exports.Avatar = Avatar;
+exports.AvatarStack = AvatarStack;
 exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;