@designa8/vibedesign-stripe-deepseek-2-176b 0.2.2 → 0.2.3

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.2.2**.
+Complete design system generated by Atoms Design, version **0.2.3**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -10633,6 +10633,7 @@ var React54 = __toESM(require("react"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var cn46 = (...values) => values.filter(Boolean).join(" ");
 var tabular2 = { fontFeatureSettings: '"tnum"' };
+var NARROW_FEED_WIDTH = 560;
 var defaultFilters = [
   { value: "all", label: "All" },
   { value: "payouts", label: "Payouts" },
@@ -10710,9 +10711,39 @@ var defaultItems = [
     filter: "risk"
   }
 ];
+function useMergedRef(forwarded, internal) {
+  return React54.useCallback(
+    (node) => {
+      internal.current = node;
+      if (typeof forwarded === "function") forwarded(node);
+      else if (forwarded) {
+        forwarded.current = node;
+      }
+    },
+    [forwarded, internal]
+  );
+}
+function useNarrowContainer(ref) {
+  const [narrow, setNarrow] = React54.useState(false);
+  React54.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const measure = (width) => setNarrow(width < NARROW_FEED_WIDTH);
+    measure(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) measure(entry.contentRect.width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return narrow;
+}
 var NotificationFeed = React54.forwardRef(
   ({
     title = "Notification center / feed",
+    titleSize = "lg",
     filters = defaultFilters,
     items,
     filter,
@@ -10730,6 +10761,9 @@ var NotificationFeed = React54.forwardRef(
     className,
     ...rest
   }, ref) => {
+    const internalRef = React54.useRef(null);
+    const setRootRef = useMergedRef(ref, internalRef);
+    const narrow = useNarrowContainer(internalRef);
     const isFilterControlled = filter !== void 0;
     const [internalFilter, setInternalFilter] = React54.useState(defaultFilter);
     const activeFilter = isFilterControlled ? filter : internalFilter;
@@ -10751,6 +10785,8 @@ var NotificationFeed = React54.forwardRef(
     );
     const unreadCount = visible.filter((item) => item.unread).length;
     const isBare = chrome === "bare";
+    const hasTitle = title !== null;
+    const hasFilterRow = filters.length > 0 || modes.length > 0 || Boolean(actions);
     const handleItemClick = (item, event) => {
       if (!onItemClick) return;
       if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
@@ -10760,157 +10796,247 @@ var NotificationFeed = React54.forwardRef(
       event.preventDefault();
       onItemClick(item, event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref, className: cn46("w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-col gap-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-start justify-between gap-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { className: "text-display-lg text-ink", children: title }),
-          unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            "span",
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "div",
+      {
+        ref: setRootRef,
+        className: cn46("@container w-full", className),
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-col gap-lg", children: [
+          hasTitle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-start justify-between gap-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "h2",
+                {
+                  className: cn46(
+                    "text-ink",
+                    titleSize === "md" ? "text-heading-md" : "text-display-lg"
+                  ),
+                  children: title
+                }
+              ),
+              unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                "span",
+                {
+                  className: cn46(
+                    "inline-flex shrink-0 items-center justify-center rounded-full bg-primary px-xs text-body-sm text-on-primary"
+                  ),
+                  style: tabular2,
+                  children: [
+                    unreadCount,
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "sr-only", children: [
+                      " ",
+                      "unread",
+                      " ",
+                      unreadCount === 1 ? "notification" : "notifications"
+                    ] })
+                  ]
+                }
+              ) : null
+            ] }),
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-sm", children: actions }) : null
+          ] }) : null,
+          hasFilterRow ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            "div",
             {
               className: cn46(
-                "inline-flex shrink-0 items-center justify-center rounded-full bg-primary px-xs text-body-sm text-on-primary"
+                "flex w-full gap-md",
+                narrow ? "flex-col" : "flex-row flex-wrap items-center justify-between"
               ),
-              style: tabular2,
               children: [
-                unreadCount,
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "sr-only", children: [
-                  " ",
-                  "unread ",
-                  unreadCount === 1 ? "notification" : "notifications"
-                ] })
+                filters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "div",
+                  {
+                    role: "group",
+                    "aria-label": "Filter notifications",
+                    className: cn46(
+                      "min-w-0",
+                      narrow ? (
+                        // One scrollable line of pills instead of a second row.
+                        "w-full overflow-x-auto pb-xxs"
+                      ) : "overflow-visible"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "div",
+                      {
+                        className: cn46(
+                          "flex items-center gap-sm",
+                          narrow ? "w-max flex-nowrap" : "w-auto flex-wrap"
+                        ),
+                        children: filters.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Chip,
+                          {
+                            size: "md",
+                            appearance: "quiet",
+                            selected: option.value === activeFilter,
+                            onClick: () => selectFilter(option.value),
+                            children: option.label
+                          },
+                          option.value
+                        ))
+                      }
+                    )
+                  }
+                ) : null,
+                modes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-full min-w-0 shrink-0 max-w-drawer", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  ButtonGroup,
+                  {
+                    options: modes,
+                    value: activeMode,
+                    onValueChange: selectMode,
+                    label: "Notification mode",
+                    size: "sm"
+                  }
+                ) }) : null,
+                !hasTitle && actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "div",
+                  {
+                    className: cn46(
+                      "flex shrink-0 items-center gap-sm",
+                      narrow ? "w-full" : "ml-auto w-auto"
+                    ),
+                    children: actions
+                  }
+                ) : null
               ]
             }
-          ) : null
-        ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-sm", children: actions }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-center justify-between gap-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          "div",
-          {
-            role: "group",
-            "aria-label": "Filter notifications",
-            className: "flex flex-wrap items-center gap-sm",
-            children: filters.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              Chip,
-              {
-                size: "md",
-                appearance: "quiet",
-                selected: option.value === activeFilter,
-                onClick: () => selectFilter(option.value),
-                children: option.label
-              },
-              option.value
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-full shrink-0 sm:ml-auto sm:max-w-drawer", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          ButtonGroup,
-          {
-            options: modes,
-            value: activeMode,
-            onValueChange: selectMode,
-            label: "Notification mode",
-            size: "sm"
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        "section",
-        {
-          "aria-label": feedLabel,
-          className: cn46(
-            "w-full",
-            isBare ? "overflow-hidden" : "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card"
-          ),
-          children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            "p",
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "section",
             {
+              "aria-label": feedLabel,
               className: cn46(
-                "text-body-md text-muted",
-                isBare ? "py-xl" : "px-xxl py-xl"
+                "w-full",
+                isBare ? "overflow-hidden" : "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card"
               ),
-              children: emptyMessage
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex w-full flex-col", children: visible.map((item, index) => {
-            const isFirst = index === 0;
-            const isLast = index === visible.length - 1;
-            const needsTopRule = index > 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-              "li",
-              {
-                className: cn46(
-                  "relative flex w-full items-center gap-lg py-lg pr-xl pl-xxl",
-                  needsTopRule && "border-t border-hairline"
-                ),
-                children: [
-                  item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: "absolute inset-y-0 left-0 w-xs bg-primary"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                    "div",
-                    {
-                      "aria-hidden": "true",
-                      className: "relative flex w-xl shrink-0 items-center justify-center self-stretch",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          "span",
-                          {
-                            className: cn46(
-                              "absolute left-1/2 w-px -translate-x-1/2 bg-hairline",
-                              isFirst ? "top-1/2" : "-top-lg",
-                              isLast ? "bottom-1/2" : "-bottom-lg"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          "span",
-                          {
-                            className: cn46(
-                              "relative size-md rounded-full ring-2 ring-canvas",
-                              item.unread ? "bg-primary" : "bg-muted-soft"
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-body-md font-weight-label text-ink", children: item.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-body-md text-muted", style: tabular2, children: item.description }),
-                    item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "Unread" }) : null
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "p",
-                    {
-                      className: "hidden shrink-0 whitespace-nowrap text-body-md text-muted sm:block sm:min-w-[7.5rem]",
-                      style: tabular2,
-                      children: item.timestamp
-                    }
+              children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "p",
+                {
+                  className: cn46(
+                    "text-body-md text-muted",
+                    isBare ? "py-xl" : "px-xxl py-xl"
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    Link,
-                    {
-                      href: item.href,
-                      size: "md",
-                      underline: "always",
-                      className: "whitespace-nowrap",
-                      onClick: (event) => handleItemClick(item, event),
-                      children: item.linkLabel ?? "View details"
-                    }
-                  ) })
-                ]
-              },
-              item.id
-            );
-          }) })
-        }
-      )
-    ] }) });
+                  children: emptyMessage
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex w-full flex-col", children: visible.map((item, index) => {
+                const isFirst = index === 0;
+                const isLast = index === visible.length - 1;
+                const needsTopRule = index > 0;
+                const timestampNode = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "p",
+                  {
+                    className: cn46(
+                      "shrink-0 whitespace-nowrap text-muted",
+                      narrow ? "text-body-sm" : "text-body-md"
+                    ),
+                    style: tabular2,
+                    children: item.timestamp
+                  }
+                );
+                const actionNode = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  Link,
+                  {
+                    href: item.href,
+                    size: "md",
+                    underline: "always",
+                    className: "whitespace-nowrap",
+                    onClick: (event) => handleItemClick(item, event),
+                    children: item.linkLabel ?? "View details"
+                  }
+                ) });
+                return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                  "li",
+                  {
+                    className: cn46(
+                      "relative flex w-full",
+                      narrow ? "items-start gap-md py-md pr-md pl-lg" : "items-center gap-lg py-lg pr-xl pl-xxl",
+                      needsTopRule && "border-t border-hairline"
+                    ),
+                    children: [
+                      item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "absolute inset-y-0 left-0 w-xs bg-primary"
+                        }
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: "relative flex w-xl shrink-0 items-center justify-center self-stretch",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "span",
+                              {
+                                className: cn46(
+                                  "absolute left-1/2 w-px -translate-x-1/2 bg-hairline",
+                                  isFirst ? "top-1/2" : narrow ? "-top-md" : "-top-lg",
+                                  isLast ? "bottom-1/2" : narrow ? "-bottom-md" : "-bottom-lg"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "span",
+                              {
+                                className: cn46(
+                                  "relative size-md rounded-full ring-2 ring-canvas",
+                                  item.unread ? "bg-primary" : "bg-muted-soft"
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          className: cn46(
+                            "flex min-w-0 flex-1 flex-col gap-xxs",
+                            narrow ? void 0 : "max-w-none"
+                          ),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "p",
+                              {
+                                className: cn46(
+                                  "text-body-md font-weight-label text-ink",
+                                  narrow ? "truncate" : "whitespace-normal wrap-break-word"
+                                ),
+                                children: item.title
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "p",
+                              {
+                                className: cn46(
+                                  "text-body-md text-muted",
+                                  narrow ? "line-clamp-2" : void 0
+                                ),
+                                style: tabular2,
+                                children: item.description
+                              }
+                            ),
+                            item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "Unread" }) : null,
+                            narrow ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mt-xxs flex w-full min-w-0 items-center justify-between gap-sm", children: [
+                              timestampNode,
+                              actionNode
+                            ] }) : null
+                          ]
+                        }
+                      ),
+                      !narrow ? timestampNode : null,
+                      !narrow ? actionNode : null
+                    ]
+                  },
+                  item.id
+                );
+              }) })
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 NotificationFeed.displayName = "NotificationFeed";