@designa8/vibedesign-stripe-deepseek-85ea 0.2.0 → 0.2.2

package/README.md

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

package/dist/index.cjs

@@ -6995,6 +6995,19 @@ var Drawer = React35.forwardRef(
     }, [open, autoFocusNote]);
     const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
+    const body = children === void 0 ? null : children;
+    const hasCustomBody = children !== void 0;
+    const footerNode = footer === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        fullWidth: true,
+        disabled: actionDisabled,
+        onClick: onAction,
+        children: actionLabel
+      }
+    ) : footer;
     const panel = !mounted || typeof document === "undefined" ? null : ReactDOM5.createPortal(
       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
@@ -7010,8 +7023,9 @@ var Drawer = React35.forwardRef(
           style: { zIndex: "var(--z-modal, 1200)" },
           className: cn28(
             "fixed inset-0 flex overflow-hidden",
+            "transition-[visibility] duration-200 ease-out",
             side === "right" ? "justify-end" : "justify-start",
-            open ? "" : "pointer-events-none"
+            open ? "visible" : "invisible pointer-events-none"
           ),
           ...rest,
           children: [
@@ -7023,7 +7037,7 @@ var Drawer = React35.forwardRef(
                 className: cn28(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+                  open ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -7034,8 +7048,11 @@ var Drawer = React35.forwardRef(
                 "data-state": open ? "open" : "closed",
                 className: cn28(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right" ? "data-[state=closed]:translate-x-full sm:rounded-l-lg" : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className
                 ),
@@ -7061,7 +7078,7 @@ var Drawer = React35.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-xl", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: hasCustomBody ? body : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-xl", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-lg", children: [
                       status ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Badge,
@@ -7098,17 +7115,7 @@ var Drawer = React35.forwardRef(
                       }
                     ) : null
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Button,
-                    {
-                      variant: "primary",
-                      size: "lg",
-                      fullWidth: true,
-                      disabled: actionDisabled,
-                      onClick: onAction,
-                      children: actionLabel
-                    }
-                  ) })
+                  footerNode ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footerNode }) : null
                 ]
               }
             )
@@ -9637,8 +9644,7 @@ var Modal = React50.forwardRef(
           contained ? "max-h-full" : placement === "top" ? "max-h-[calc(88dvh-1rem)]" : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 opacity-0",
           className
         ),
         ...rest,
@@ -9745,7 +9751,7 @@ var Modal = React50.forwardRef(
             contained ? "absolute inset-0" : "fixed inset-0",
             placement === "top" ? "items-start px-base pt-[12dvh]" : "items-center p-base",
             "transition duration-200 ease-out",
-            "data-[state=closed]:pointer-events-none data-[state=closed]:invisible"
+            isOpen ? "visible" : "invisible pointer-events-none"
           ),
           style: { zIndex: "var(--z-modal, 1200)" },
           children: [
@@ -9762,7 +9768,7 @@ var Modal = React50.forwardRef(
                 style: scrimStyle(contained),
                 className: cn41(
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
+                  isOpen ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -14663,12 +14669,59 @@ var glyph3 = (name, size = 16, strokeWidth = 1.75) => /* @__PURE__ */ (0, import
     style: { color: "inherit" }
   }
 );
+var hasBadge = (badge) => {
+  if (badge === void 0 || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+var badgeText = (badge) => typeof badge === "number" ? badge > 99 ? "99+" : String(badge) : badge.trim();
+var rowAccessibleName = (label, badge) => {
+  if (!hasBadge(badge)) {
+    return label;
+  }
+  return typeof badge === "number" ? `${label}, ${badge} pending` : `${label}, ${badgeText(badge)}`;
+};
+var RailBadge = ({
+  badge,
+  active
+}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  "span",
+  {
+    "aria-hidden": "true",
+    "data-active": active || void 0,
+    className: cn65(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
+    ),
+    children: badgeText(badge)
+  }
+);
+var railGlyph = (item, folded) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", children: [
+  glyph3(item.icon, 16, 1.75),
+  folded && hasBadge(item.badge) ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn65(
+        "pointer-events-none absolute -right-xxs -top-xxs size-2 rounded-full",
+        "bg-primary",
+        "group-data-[active=true]:bg-on-primary"
+      )
+    }
+  ) : null
+] });
 var RowLabel = ({
   folded,
   children
 }) => folded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children });
 var railRowClass = (active, folded) => cn65(
-  "flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
+  "group flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
   "text-body-md transition duration-150 ease-out",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
   "focus-visible:ring-inset",
@@ -15004,6 +15057,7 @@ var SidebarDesktop = React74.forwardRef(
                 className: "flex flex-col gap-xxs",
                 children: navItems.map((item) => {
                   const active = item.id === activeId;
+                  const badged = hasBadge(item.badge);
                   if (!item.children?.length) {
                     return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
                       "a",
@@ -15011,11 +15065,13 @@ var SidebarDesktop = React74.forwardRef(
                         href: item.href ?? `#${item.id}`,
                         onClick: navigate({ id: item.id, href: item.href }),
                         "aria-current": active ? "page" : void 0,
-                        "aria-label": isFolded ? item.label : void 0,
+                        "data-active": active,
+                        "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                         className: railRowClass(active, isFolded),
                         children: [
-                          glyph3(item.icon, 16, 1.75),
-                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label })
+                          railGlyph(item, isFolded),
+                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label }),
+                          !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RailBadge, { badge: item.badge, active }) : null
                         ]
                       },
                       item.id
@@ -15031,22 +15087,32 @@ var SidebarDesktop = React74.forwardRef(
                         size: "rail",
                         "aria-expanded": expanded,
                         "aria-controls": subId,
-                        "aria-label": isFolded ? item.label : void 0,
+                        "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                         "data-active": active,
                         "data-folded": isFolded,
                         onClick: () => toggleExpanded(item.id),
-                        leadingIcon: glyph3(item.icon, 16, 1.75),
-                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: cn65(
-                              "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                              expanded ? "rotate-180" : "rotate-0"
-                            ),
-                            children: glyph3("chevron-down", 16, 2)
-                          }
-                        ),
+                        className: "group",
+                        leadingIcon: railGlyph(item, isFolded),
+                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "flex items-center gap-xs", children: [
+                          badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                            RailBadge,
+                            {
+                              badge: item.badge,
+                              active
+                            }
+                          ) : null,
+                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                            "span",
+                            {
+                              "aria-hidden": "true",
+                              className: cn65(
+                                "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                                expanded ? "rotate-180" : "rotate-0"
+                              ),
+                              children: glyph3("chevron-down", 16, 2)
+                            }
+                          )
+                        ] }),
                         children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label })
                       }
                     ),
@@ -15099,17 +15165,20 @@ var SidebarDesktop = React74.forwardRef(
             ),
             /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("nav", { "aria-label": "Secondary", className: "mt-lg flex flex-col gap-xxs", children: secondaryNav.map((item) => {
               const active = item.id === secondaryActiveId;
+              const badged = hasBadge(item.badge);
               return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
                 "a",
                 {
                   href: item.href ?? `#${item.id}`,
                   onClick: navigate({ id: item.id, href: item.href }),
                   "aria-current": active ? "page" : void 0,
-                  "aria-label": isFolded ? item.label : void 0,
+                  "data-active": active,
+                  "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                   className: railRowClass(active, isFolded),
                   children: [
-                    glyph3(item.icon, 16, 1.75),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label })
+                    railGlyph(item, isFolded),
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label }),
+                    !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RailBadge, { badge: item.badge, active }) : null
                   ]
                 },
                 item.id
@@ -15236,6 +15305,39 @@ var SAMPLE_SECONDARY2 = [
 ];
 var SAMPLE_PLAN2 = { name: "Pro", price: "$2,400.00 / month", href: "#plan" };
 var glyph4 = (name, size = 18, strokeWidth = 1.75) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name, size, strokeWidth, style: { color: "inherit" } });
+var hasBadge2 = (badge) => {
+  if (badge === void 0 || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+var badgeText2 = (badge) => typeof badge === "number" ? badge > 99 ? "99+" : String(badge) : badge.trim();
+var rowAccessibleName2 = (label, badge) => {
+  if (!hasBadge2(badge)) {
+    return label;
+  }
+  return typeof badge === "number" ? `${label}, ${badge} pending` : `${label}, ${badgeText2(badge)}`;
+};
+var NavBadge = ({
+  badge,
+  active
+}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  "span",
+  {
+    "aria-hidden": "true",
+    "data-active": active || void 0,
+    className: cn66(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
+    ),
+    children: badgeText2(badge)
+  }
+);
 var rowClass = (active) => cn66(
   "flex min-h-10 w-full cursor-pointer items-center gap-md rounded-lg px-md py-sm",
   "text-body-md transition duration-150 ease-out",
@@ -15548,6 +15650,7 @@ var SidebarMobile = React75.forwardRef(
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("nav", { "aria-label": "Primary", className: "mt-md flex flex-col gap-xxs", children: navItems.map((item) => {
                       const active = item.id === activeId;
+                      const badged = hasBadge2(item.badge);
                       if (!item.children?.length) {
                         return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                           "a",
@@ -15555,10 +15658,18 @@ var SidebarMobile = React75.forwardRef(
                             href: item.href ?? `#${item.id}`,
                             onClick: navigate({ id: item.id, href: item.href }),
                             "aria-current": active ? "page" : void 0,
+                            "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                             className: rowClass(active),
                             children: [
                               glyph4(item.icon, 18, 1.75),
-                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label })
+                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label }),
+                              badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                NavBadge,
+                                {
+                                  badge: item.badge,
+                                  active
+                                }
+                              ) : null
                             ]
                           },
                           item.id
@@ -15574,20 +15685,31 @@ var SidebarMobile = React75.forwardRef(
                             size: "rail",
                             "aria-expanded": expanded,
                             "aria-controls": subId,
+                            "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                             "data-active": active,
                             onClick: () => toggleExpanded(item.id),
                             className: "px-md",
                             leadingIcon: glyph4(item.icon, 18, 1.75),
-                            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                              "span",
-                              {
-                                className: cn66(
-                                  "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                                  expanded ? "rotate-180" : "rotate-0"
-                                ),
-                                children: glyph4("chevron-down", 18, 2)
-                              }
-                            ),
+                            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex items-center gap-xs", children: [
+                              badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                NavBadge,
+                                {
+                                  badge: item.badge,
+                                  active
+                                }
+                              ) : null,
+                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: cn66(
+                                    "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                                    expanded ? "rotate-180" : "rotate-0"
+                                  ),
+                                  children: glyph4("chevron-down", 18, 2)
+                                }
+                              )
+                            ] }),
                             children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-left", children: item.label })
                           }
                         ),
@@ -15643,16 +15765,25 @@ var SidebarMobile = React75.forwardRef(
                     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Divider, { className: "my-md" }),
                     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("nav", { "aria-label": "Secondary", className: "flex flex-col gap-xxs", children: secondaryNav.map((item) => {
                       const active = item.id === secondaryActiveId;
+                      const badged = hasBadge2(item.badge);
                       return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                         "a",
                         {
                           href: item.href ?? `#${item.id}`,
                           onClick: navigate({ id: item.id, href: item.href }),
                           "aria-current": active ? "page" : void 0,
+                          "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                           className: rowClass(active),
                           children: [
                             glyph4(item.icon, 18, 1.75),
-                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label })
+                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label }),
+                            badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                              NavBadge,
+                              {
+                                badge: item.badge,
+                                active
+                              }
+                            ) : null
                           ]
                         },
                         item.id