@sarunyu/system-one 4.9.30 → 4.9.31

package/AGENTS.md

@@ -25,6 +25,7 @@ in this package.** This file is the short version: the rules you must follow.
    - 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
@@ -155,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 26 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`, `Avatar`, `AvatarStack`, `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

@@ -6121,6 +6121,25 @@ function AvatarStack({
     );
   }) });
 }
+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,
@@ -6156,6 +6175,7 @@ const index = {
   TimeInput,
   Avatar,
   AvatarStack,
+  Breadcrumb,
   cn,
   useIsMobile
 };
@@ -6164,6 +6184,7 @@ exports.Avatar = Avatar;
 exports.AvatarStack = AvatarStack;
 exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;