@sparkstudio/common-ui 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -30,7 +30,10 @@ __export(index_exports, {
   LayoutWrapper: () => LayoutWrapper,
   Navigation: () => Navigation,
   NavigationItem: () => NavigationItem,
-  NpmBadge: () => NpmBadge
+  Notifications: () => Notifications,
+  NotificationsProvider: () => NotificationsProvider,
+  NpmBadge: () => NpmBadge,
+  UseNotifications: () => UseNotifications
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -40,7 +43,7 @@ function Body({ title, description, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "col p-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card-body", children }) })
+    children
   ] });
 }
 
@@ -152,22 +155,135 @@ function NavigationItem({ title, type, active, onClick }) {
   ) });
 }
 
-// src/components/wrappers/ContentContainer.tsx
+// src/components/notifications/Notifications.tsx
+var import_react2 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function Notifications({ notifications, onClose }) {
+  (0, import_react2.useEffect)(() => {
+    notifications.forEach((n) => {
+      if (!n.autoCloseMs) return;
+      const timer = setTimeout(() => onClose(n.id), n.autoCloseMs);
+      return () => clearTimeout(timer);
+    });
+  }, [notifications, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: "position-fixed top-0 end-0 p-3",
+      style: { zIndex: 1080, width: 340 },
+      children: notifications.map((n) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          className: `alert alert-${n.type ?? "info"} alert-dismissible fade show shadow-sm mb-2`,
+          role: "alert",
+          children: [
+            n.message,
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "btn-close",
+                "aria-label": "Close",
+                onClick: () => onClose(n.id)
+              }
+            )
+          ]
+        },
+        n.id
+      ))
+    }
+  );
+}
+
+// src/components/notifications/NotificationsProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react3.createContext)(
+  void 0
+);
+function NotificationsProvider({ children }) {
+  const [notifications, setNotifications] = (0, import_react3.useState)([]);
+  const push = (0, import_react3.useCallback)(
+    (message, type = "info", autoCloseMs = 4e3) => {
+      setNotifications((prev) => [
+        ...prev,
+        {
+          id: crypto.randomUUID(),
+          message,
+          type,
+          autoCloseMs
+        }
+      ]);
+    },
+    []
+  );
+  const close = (0, import_react3.useCallback)((id) => {
+    setNotifications((list) => list.filter((n) => n.id !== id));
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const timers = notifications.map((n) => {
+      if (!n.autoCloseMs) return null;
+      return setTimeout(() => close(n.id), n.autoCloseMs);
+    });
+    return () => {
+      timers.forEach((t) => t && clearTimeout(t));
+    };
+  }, [notifications, close]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(NotificationsContext.Provider, { value: { push }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: "position-fixed top-0 end-0 p-3",
+        style: { zIndex: 1080, width: 340 },
+        children: notifications.map((n) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            className: `alert alert-${n.type ?? "info"} alert-dismissible fade show shadow-sm mb-2`,
+            role: "alert",
+            children: [
+              n.message,
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "btn-close",
+                  "aria-label": "Close",
+                  onClick: () => close(n.id)
+                }
+              )
+            ]
+          },
+          n.id
+        ))
+      }
+    ),
+    children
+  ] });
+}
+function UseNotifications() {
+  const ctx = (0, import_react3.useContext)(NotificationsContext);
+  if (!ctx) {
+    throw new Error("useNotifications must be used within a NotificationsProvider");
+  }
+  return ctx;
+}
+
+// src/components/wrappers/ContentContainer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ContentContainer({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "container-fluid flex-grow-1", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "container-fluid flex-grow-1", children });
 }
 
 // src/components/wrappers/ContentRow.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ContentRow({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "row h-100 flex-nowrap", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "row h-100 flex-nowrap", children });
 }
 
 // src/components/wrappers/LayoutWrapper.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function LayoutWrapper({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "d-flex flex-column min-vh-100", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "d-flex flex-column min-vh-100", children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -181,6 +297,9 @@ function LayoutWrapper({ children }) {
   LayoutWrapper,
   Navigation,
   NavigationItem,
-  NpmBadge
+  Notifications,
+  NotificationsProvider,
+  NpmBadge,
+  UseNotifications
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Body.tsx","../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/NpmBadge.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from \"./components/Body\";\nexport * from \"./components/Button\";\nexport * from \"./components/Footer\";\nexport * from \"./components/Header\";\nexport * from \"./components/HeaderText\";\nexport * from \"./components/NpmBadge\";\nexport * from \"./components/navigation/Navigation\";\nexport * from \"./components/navigation/NavigationItem\";\nexport * from \"./components/wrappers/ContentContainer\";\nexport * from \"./components/wrappers/ContentRow\";\nexport * from \"./components/wrappers/LayoutWrapper\";\n","import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n  title: ReactNode;\r\n  description?: ReactNode;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n  return (\r\n    <main className=\"col p-4\">\r\n      <h2>{title}</h2>\r\n\r\n      {description && <p>{description}</p>}\r\n\r\n      <div className=\"card mt-3\">\r\n        <div className=\"card-body\">\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </main>\r\n  );\r\n}\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n      onClick={handleClick}\r\n      disabled={disabled || loading}\r\n    >\r\n      {loading ? (\r\n        renderLoading?.() ??\r\n        loadingChildren ?? (\r\n          <>\r\n            {showSpinner && (\r\n              <span\r\n                className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                role=\"status\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            )}\r\n            {loadingText}\r\n          </>\r\n        )\r\n      ) : (\r\n        renderContent?.() ?? children\r\n      )}\r\n    </button>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n  return (\r\n    <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n      {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n    </footer>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n  return (\r\n    <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n      {children ?? (\r\n        <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n      )}\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n  return (\r\n    <span className=\"navbar-brand mb-0 h4\">\r\n      {children}\r\n    </span>\r\n  );\r\n}\r\n","// components/NpmBadge.tsx\r\ninterface NpmBadgeProps {\r\n  packageLabel: string;\r\n  packageName: string;\r\n  packageUrl: string;          // e.g. \"@sparkstudio/authentication-ui\"\r\n  color?: string;               // optional (default black)\r\n  height?: number;              // optional (default 22)\r\n}\r\n\r\nexport function NpmBadge({ packageName, packageLabel, packageUrl, color = \"black\", height = 22 }: NpmBadgeProps) {\r\n  const encodedLabel = encodeURIComponent(packageLabel);\r\n  const badgeUrl = `https://img.shields.io/npm/v/${packageName}?logo=npm&label=${encodedLabel}&color=${color}`;\r\n  const npmUrl = packageUrl;\r\n\r\n  return (\r\n    <a href={npmUrl} target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <img src={badgeUrl} alt={`${packageName} version`} style={{ height }} />\r\n    </a>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n  title?: ReactNode;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n  return (\r\n    <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n      <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n      <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n        {children}\r\n      </ul>\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n  title: ReactNode;\r\n  type: string;\r\n  active?: boolean;\r\n  onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n  return (\r\n    <li className=\"nav-item\">\r\n      <button\r\n        type=\"button\"\r\n        className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n        onClick={() => onClick?.(type)}\r\n      >\r\n        {title}\r\n      </button>\r\n    </li>\r\n  );\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n  return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n  return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n  return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACUI;AAFG,SAAS,KAAK,EAAE,OAAO,aAAa,SAAS,GAAc;AAChE,SACE,6CAAC,UAAK,WAAU,WACd;AAAA,gDAAC,QAAI,iBAAM;AAAA,IAEV,eAAe,4CAAC,OAAG,uBAAY;AAAA,IAEhC,4CAAC,SAAI,WAAU,aACb,sDAAC,SAAI,WAAU,aACZ,UACH,GACF;AAAA,KACF;AAEJ;;;ACtBA,mBAA0D;AA0EhD,IAAAA,sBAAA;AAnDH,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,8EACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB;AAEJ;;;AClFI,IAAAC,sBAAA;AAFG,SAAS,OAAO,EAAE,SAAS,GAAgB;AAChD,SACE,6CAAC,YAAO,WAAU,+CACf,sBAAY,kDACf;AAEJ;;;ACFQ,IAAAC,sBAAA;AAJD,SAAS,OAAO,EAAE,SAAS,GAAgB;AAChD,SACE,6CAAC,SAAI,WAAU,8CACZ,sBACC,6CAAC,UAAK,WAAU,wBAAuB,wBAAU,GAErD;AAEJ;;;ACNI,IAAAC,sBAAA;AAFG,SAAS,WAAW,EAAE,SAAS,GAAqB;AACzD,SACE,6CAAC,UAAK,WAAU,wBACb,UACH;AAEJ;;;ACIM,IAAAC,sBAAA;AAPC,SAAS,SAAS,EAAE,aAAa,cAAc,YAAY,QAAQ,SAAS,SAAS,GAAG,GAAkB;AAC/G,QAAM,eAAe,mBAAmB,YAAY;AACpD,QAAM,WAAW,gCAAgC,WAAW,mBAAmB,YAAY,UAAU,KAAK;AAC1G,QAAM,SAAS;AAEf,SACE,6CAAC,OAAE,MAAM,QAAQ,QAAO,UAAS,KAAI,uBACnC,uDAAC,SAAI,KAAK,UAAU,KAAK,GAAG,WAAW,YAAY,OAAO,EAAE,OAAO,GAAG,GACxE;AAEJ;;;ACVI,IAAAC,sBAAA;AAFG,SAAS,WAAW,EAAE,QAAQ,cAAc,SAAS,GAAoB;AAC9E,SACE,8CAAC,SAAI,WAAU,yCACb;AAAA,iDAAC,QAAG,WAAU,6BAA6B,iBAAM;AAAA,IAEjD,6CAAC,QAAG,WAAU,wCACX,UACH;AAAA,KACF;AAEJ;;;ACLM,IAAAC,sBAAA;AAHC,SAAS,eAAe,EAAE,OAAO,MAAM,QAAQ,QAAQ,GAAwB;AACpF,SACE,6CAAC,QAAG,WAAU,YACZ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,6BAA6B,SAAS,WAAW,EAAE;AAAA,MAC9D,SAAS,MAAM,UAAU,IAAI;AAAA,MAE5B;AAAA;AAAA,EACH,GACF;AAEJ;;;ACpBS,IAAAC,sBAAA;AADF,SAAS,iBAAiB,EAAE,SAAS,GAA4B;AACtE,SAAO,6CAAC,SAAI,WAAU,+BAA+B,UAAS;AAChE;;;ACDS,IAAAC,uBAAA;AADF,SAAS,WAAW,EAAE,SAAS,GAA4B;AAChE,SAAO,8CAAC,SAAI,WAAU,yBAAyB,UAAS;AAC1D;;;ACDS,IAAAC,uBAAA;AADF,SAAS,cAAc,EAAE,SAAS,GAA4B;AACnE,SAAO,8CAAC,SAAI,WAAU,iCAAiC,UAAS;AAClE;","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Body.tsx","../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/NpmBadge.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/notifications/Notifications.tsx","../src/components/notifications/NotificationsProvider.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from \"./components/Body\";\nexport * from \"./components/Button\";\nexport * from \"./components/Footer\";\nexport * from \"./components/Header\";\nexport * from \"./components/HeaderText\";\nexport * from \"./components/NpmBadge\";\nexport * from \"./components/navigation/Navigation\";\nexport * from \"./components/navigation/NavigationItem\";\nexport * from \"./components/notifications/Notifications\";\nexport * from \"./components/notifications/NotificationsProvider\";\nexport * from \"./components/wrappers/ContentContainer\";\nexport * from \"./components/wrappers/ContentRow\";\nexport * from \"./components/wrappers/LayoutWrapper\";\n","import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n  title: ReactNode;\r\n  description?: ReactNode;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n  return (\r\n    <main className=\"col p-4\">\r\n      <h2>{title}</h2>\r\n\r\n      {description && <p>{description}</p>}\r\n      {children}\r\n    </main>\r\n  );\r\n}\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n      onClick={handleClick}\r\n      disabled={disabled || loading}\r\n    >\r\n      {loading ? (\r\n        renderLoading?.() ??\r\n        loadingChildren ?? (\r\n          <>\r\n            {showSpinner && (\r\n              <span\r\n                className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                role=\"status\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            )}\r\n            {loadingText}\r\n          </>\r\n        )\r\n      ) : (\r\n        renderContent?.() ?? children\r\n      )}\r\n    </button>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n  return (\r\n    <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n      {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n    </footer>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n  return (\r\n    <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n      {children ?? (\r\n        <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n      )}\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n  return (\r\n    <span className=\"navbar-brand mb-0 h4\">\r\n      {children}\r\n    </span>\r\n  );\r\n}\r\n","// components/NpmBadge.tsx\r\ninterface NpmBadgeProps {\r\n  packageLabel: string;\r\n  packageName: string;\r\n  packageUrl: string;          // e.g. \"@sparkstudio/authentication-ui\"\r\n  color?: string;               // optional (default black)\r\n  height?: number;              // optional (default 22)\r\n}\r\n\r\nexport function NpmBadge({ packageName, packageLabel, packageUrl, color = \"black\", height = 22 }: NpmBadgeProps) {\r\n  const encodedLabel = encodeURIComponent(packageLabel);\r\n  const badgeUrl = `https://img.shields.io/npm/v/${packageName}?logo=npm&label=${encodedLabel}&color=${color}`;\r\n  const npmUrl = packageUrl;\r\n\r\n  return (\r\n    <a href={npmUrl} target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <img src={badgeUrl} alt={`${packageName} version`} style={{ height }} />\r\n    </a>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n  title?: ReactNode;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n  return (\r\n    <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n      <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n      <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n        {children}\r\n      </ul>\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n  title: ReactNode;\r\n  type: string;\r\n  active?: boolean;\r\n  onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n  return (\r\n    <li className=\"nav-item\">\r\n      <button\r\n        type=\"button\"\r\n        className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n        onClick={() => onClick?.(type)}\r\n      >\r\n        {title}\r\n      </button>\r\n    </li>\r\n  );\r\n}\r\n","import { useEffect } from \"react\";\r\n\r\nexport type NotificationType = \"success\" | \"info\" | \"warning\" | \"danger\";\r\n\r\nexport interface Notification {\r\n  id: string;\r\n  message: string;\r\n  type?: NotificationType;\r\n  autoCloseMs?: number;\r\n}\r\n\r\ninterface NotificationsProps {\r\n  notifications: Notification[];\r\n  onClose: (id: string) => void;\r\n}\r\n\r\nexport function Notifications({ notifications, onClose }: NotificationsProps) {\r\n  useEffect(() => {\r\n    notifications.forEach((n) => {\r\n      if (!n.autoCloseMs) return;\r\n\r\n      const timer = setTimeout(() => onClose(n.id), n.autoCloseMs);\r\n      return () => clearTimeout(timer);\r\n    });\r\n  }, [notifications, onClose]);\r\n\r\n  return (\r\n    <div\r\n      className=\"position-fixed top-0 end-0 p-3\"\r\n      style={{ zIndex: 1080, width: 340 }}\r\n    >\r\n      {notifications.map((n) => (\r\n        <div\r\n          key={n.id}\r\n          className={`alert alert-${n.type ?? \"info\"} alert-dismissible fade show shadow-sm mb-2`}\r\n          role=\"alert\"\r\n        >\r\n          {n.message}\r\n\r\n          <button\r\n            type=\"button\"\r\n            className=\"btn-close\"\r\n            aria-label=\"Close\"\r\n            onClick={() => onClose(n.id)}\r\n          />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n","import {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useState,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\nexport type NotificationType = \"success\" | \"info\" | \"warning\" | \"danger\";\r\n\r\n// Rename to avoid conflict with browser Notification type\r\nexport interface AppNotification {\r\n  id: string;\r\n  message: string;\r\n  type?: NotificationType;\r\n  autoCloseMs?: number;\r\n}\r\n\r\ninterface NotificationsContextValue {\r\n  push: (message: string, type?: NotificationType, autoCloseMs?: number) => void;\r\n}\r\n\r\nconst NotificationsContext = createContext<NotificationsContextValue | undefined>(\r\n  undefined\r\n);\r\n\r\ninterface NotificationsProviderProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function NotificationsProvider({ children }: NotificationsProviderProps) {\r\n  const [notifications, setNotifications] = useState<AppNotification[]>([]);\r\n\r\n  const push = useCallback(\r\n    (message: string, type: NotificationType = \"info\", autoCloseMs = 4000) => {\r\n      setNotifications((prev) => [\r\n        ...prev,\r\n        {\r\n          id: crypto.randomUUID(),\r\n          message,\r\n          type,\r\n          autoCloseMs,\r\n        },\r\n      ]);\r\n    },\r\n    []\r\n  );\r\n\r\n  const close = useCallback((id: string) => {\r\n    setNotifications((list) => list.filter((n) => n.id !== id));\r\n  }, []);\r\n\r\n  // Handle auto close timers\r\n  useEffect(() => {\r\n    const timers = notifications.map((n) => {\r\n      if (!n.autoCloseMs) return null;\r\n      return setTimeout(() => close(n.id), n.autoCloseMs);\r\n    });\r\n\r\n    return () => {\r\n      timers.forEach((t) => t && clearTimeout(t));\r\n    };\r\n  }, [notifications, close]);\r\n\r\n  return (\r\n    <NotificationsContext.Provider value={{ push }}>\r\n      {/* overlay renderer */}\r\n      <div\r\n        className=\"position-fixed top-0 end-0 p-3\"\r\n        style={{ zIndex: 1080, width: 340 }}\r\n      >\r\n        {notifications.map((n) => (\r\n          <div\r\n            key={n.id}\r\n            className={`alert alert-${n.type ?? \"info\"} alert-dismissible fade show shadow-sm mb-2`}\r\n            role=\"alert\"\r\n          >\r\n            {n.message}\r\n            <button\r\n              type=\"button\"\r\n              className=\"btn-close\"\r\n              aria-label=\"Close\"\r\n              onClick={() => close(n.id)}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      {children}\r\n    </NotificationsContext.Provider>\r\n  );\r\n}\r\n\r\nexport function UseNotifications(): NotificationsContextValue {\r\n  const ctx = useContext(NotificationsContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useNotifications must be used within a NotificationsProvider\");\r\n  }\r\n  return ctx;\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n  return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n  return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n  return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.js

@@ -4,7 +4,7 @@ function Body({ title, description, children }) {
   return /* @__PURE__ */ jsxs("main", { className: "col p-4", children: [
     /* @__PURE__ */ jsx("h2", { children: title }),
     description && /* @__PURE__ */ jsx("p", { children: description }),
-    /* @__PURE__ */ jsx("div", { className: "card mt-3", children: /* @__PURE__ */ jsx("div", { className: "card-body", children }) })
+    children
   ] });
 }
 
@@ -116,22 +116,141 @@ function NavigationItem({ title, type, active, onClick }) {
   ) });
 }
 
+// src/components/notifications/Notifications.tsx
+import { useEffect } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Notifications({ notifications, onClose }) {
+  useEffect(() => {
+    notifications.forEach((n) => {
+      if (!n.autoCloseMs) return;
+      const timer = setTimeout(() => onClose(n.id), n.autoCloseMs);
+      return () => clearTimeout(timer);
+    });
+  }, [notifications, onClose]);
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "position-fixed top-0 end-0 p-3",
+      style: { zIndex: 1080, width: 340 },
+      children: notifications.map((n) => /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: `alert alert-${n.type ?? "info"} alert-dismissible fade show shadow-sm mb-2`,
+          role: "alert",
+          children: [
+            n.message,
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "btn-close",
+                "aria-label": "Close",
+                onClick: () => onClose(n.id)
+              }
+            )
+          ]
+        },
+        n.id
+      ))
+    }
+  );
+}
+
+// src/components/notifications/NotificationsProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var NotificationsContext = createContext(
+  void 0
+);
+function NotificationsProvider({ children }) {
+  const [notifications, setNotifications] = useState2([]);
+  const push = useCallback(
+    (message, type = "info", autoCloseMs = 4e3) => {
+      setNotifications((prev) => [
+        ...prev,
+        {
+          id: crypto.randomUUID(),
+          message,
+          type,
+          autoCloseMs
+        }
+      ]);
+    },
+    []
+  );
+  const close = useCallback((id) => {
+    setNotifications((list) => list.filter((n) => n.id !== id));
+  }, []);
+  useEffect2(() => {
+    const timers = notifications.map((n) => {
+      if (!n.autoCloseMs) return null;
+      return setTimeout(() => close(n.id), n.autoCloseMs);
+    });
+    return () => {
+      timers.forEach((t) => t && clearTimeout(t));
+    };
+  }, [notifications, close]);
+  return /* @__PURE__ */ jsxs5(NotificationsContext.Provider, { value: { push }, children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "position-fixed top-0 end-0 p-3",
+        style: { zIndex: 1080, width: 340 },
+        children: notifications.map((n) => /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: `alert alert-${n.type ?? "info"} alert-dismissible fade show shadow-sm mb-2`,
+            role: "alert",
+            children: [
+              n.message,
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  className: "btn-close",
+                  "aria-label": "Close",
+                  onClick: () => close(n.id)
+                }
+              )
+            ]
+          },
+          n.id
+        ))
+      }
+    ),
+    children
+  ] });
+}
+function UseNotifications() {
+  const ctx = useContext(NotificationsContext);
+  if (!ctx) {
+    throw new Error("useNotifications must be used within a NotificationsProvider");
+  }
+  return ctx;
+}
+
 // src/components/wrappers/ContentContainer.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function ContentContainer({ children }) {
-  return /* @__PURE__ */ jsx9("div", { className: "container-fluid flex-grow-1", children });
+  return /* @__PURE__ */ jsx11("div", { className: "container-fluid flex-grow-1", children });
 }
 
 // src/components/wrappers/ContentRow.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function ContentRow({ children }) {
-  return /* @__PURE__ */ jsx10("div", { className: "row h-100 flex-nowrap", children });
+  return /* @__PURE__ */ jsx12("div", { className: "row h-100 flex-nowrap", children });
 }
 
 // src/components/wrappers/LayoutWrapper.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function LayoutWrapper({ children }) {
-  return /* @__PURE__ */ jsx11("div", { className: "d-flex flex-column min-vh-100", children });
+  return /* @__PURE__ */ jsx13("div", { className: "d-flex flex-column min-vh-100", children });
 }
 export {
   Body,
@@ -144,6 +263,9 @@ export {
   LayoutWrapper,
   Navigation,
   NavigationItem,
-  NpmBadge
+  Notifications,
+  NotificationsProvider,
+  NpmBadge,
+  UseNotifications
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Body.tsx","../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/NpmBadge.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n  title: ReactNode;\r\n  description?: ReactNode;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n  return (\r\n    <main className=\"col p-4\">\r\n      <h2>{title}</h2>\r\n\r\n      {description && <p>{description}</p>}\r\n\r\n      <div className=\"card mt-3\">\r\n        <div className=\"card-body\">\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </main>\r\n  );\r\n}\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n      onClick={handleClick}\r\n      disabled={disabled || loading}\r\n    >\r\n      {loading ? (\r\n        renderLoading?.() ??\r\n        loadingChildren ?? (\r\n          <>\r\n            {showSpinner && (\r\n              <span\r\n                className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                role=\"status\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            )}\r\n            {loadingText}\r\n          </>\r\n        )\r\n      ) : (\r\n        renderContent?.() ?? children\r\n      )}\r\n    </button>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n  return (\r\n    <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n      {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n    </footer>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n  return (\r\n    <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n      {children ?? (\r\n        <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n      )}\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n  return (\r\n    <span className=\"navbar-brand mb-0 h4\">\r\n      {children}\r\n    </span>\r\n  );\r\n}\r\n","// components/NpmBadge.tsx\r\ninterface NpmBadgeProps {\r\n  packageLabel: string;\r\n  packageName: string;\r\n  packageUrl: string;          // e.g. \"@sparkstudio/authentication-ui\"\r\n  color?: string;               // optional (default black)\r\n  height?: number;              // optional (default 22)\r\n}\r\n\r\nexport function NpmBadge({ packageName, packageLabel, packageUrl, color = \"black\", height = 22 }: NpmBadgeProps) {\r\n  const encodedLabel = encodeURIComponent(packageLabel);\r\n  const badgeUrl = `https://img.shields.io/npm/v/${packageName}?logo=npm&label=${encodedLabel}&color=${color}`;\r\n  const npmUrl = packageUrl;\r\n\r\n  return (\r\n    <a href={npmUrl} target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <img src={badgeUrl} alt={`${packageName} version`} style={{ height }} />\r\n    </a>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n  title?: ReactNode;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n  return (\r\n    <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n      <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n      <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n        {children}\r\n      </ul>\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n  title: ReactNode;\r\n  type: string;\r\n  active?: boolean;\r\n  onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n  return (\r\n    <li className=\"nav-item\">\r\n      <button\r\n        type=\"button\"\r\n        className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n        onClick={() => onClick?.(type)}\r\n      >\r\n        {title}\r\n      </button>\r\n    </li>\r\n  );\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n  return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n  return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n  return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsx","jsx","jsx","jsx","jsxs","jsx","jsx","jsx","jsx"]}
+{"version":3,"sources":["../src/components/Body.tsx","../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/NpmBadge.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/notifications/Notifications.tsx","../src/components/notifications/NotificationsProvider.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n  title: ReactNode;\r\n  description?: ReactNode;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n  return (\r\n    <main className=\"col p-4\">\r\n      <h2>{title}</h2>\r\n\r\n      {description && <p>{description}</p>}\r\n      {children}\r\n    </main>\r\n  );\r\n}\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n      onClick={handleClick}\r\n      disabled={disabled || loading}\r\n    >\r\n      {loading ? (\r\n        renderLoading?.() ??\r\n        loadingChildren ?? (\r\n          <>\r\n            {showSpinner && (\r\n              <span\r\n                className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                role=\"status\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            )}\r\n            {loadingText}\r\n          </>\r\n        )\r\n      ) : (\r\n        renderContent?.() ?? children\r\n      )}\r\n    </button>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n  return (\r\n    <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n      {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n    </footer>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n  return (\r\n    <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n      {children ?? (\r\n        <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n      )}\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n  return (\r\n    <span className=\"navbar-brand mb-0 h4\">\r\n      {children}\r\n    </span>\r\n  );\r\n}\r\n","// components/NpmBadge.tsx\r\ninterface NpmBadgeProps {\r\n  packageLabel: string;\r\n  packageName: string;\r\n  packageUrl: string;          // e.g. \"@sparkstudio/authentication-ui\"\r\n  color?: string;               // optional (default black)\r\n  height?: number;              // optional (default 22)\r\n}\r\n\r\nexport function NpmBadge({ packageName, packageLabel, packageUrl, color = \"black\", height = 22 }: NpmBadgeProps) {\r\n  const encodedLabel = encodeURIComponent(packageLabel);\r\n  const badgeUrl = `https://img.shields.io/npm/v/${packageName}?logo=npm&label=${encodedLabel}&color=${color}`;\r\n  const npmUrl = packageUrl;\r\n\r\n  return (\r\n    <a href={npmUrl} target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <img src={badgeUrl} alt={`${packageName} version`} style={{ height }} />\r\n    </a>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n  title?: ReactNode;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n  return (\r\n    <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n      <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n      <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n        {children}\r\n      </ul>\r\n    </nav>\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n  title: ReactNode;\r\n  type: string;\r\n  active?: boolean;\r\n  onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n  return (\r\n    <li className=\"nav-item\">\r\n      <button\r\n        type=\"button\"\r\n        className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n        onClick={() => onClick?.(type)}\r\n      >\r\n        {title}\r\n      </button>\r\n    </li>\r\n  );\r\n}\r\n","import { useEffect } from \"react\";\r\n\r\nexport type NotificationType = \"success\" | \"info\" | \"warning\" | \"danger\";\r\n\r\nexport interface Notification {\r\n  id: string;\r\n  message: string;\r\n  type?: NotificationType;\r\n  autoCloseMs?: number;\r\n}\r\n\r\ninterface NotificationsProps {\r\n  notifications: Notification[];\r\n  onClose: (id: string) => void;\r\n}\r\n\r\nexport function Notifications({ notifications, onClose }: NotificationsProps) {\r\n  useEffect(() => {\r\n    notifications.forEach((n) => {\r\n      if (!n.autoCloseMs) return;\r\n\r\n      const timer = setTimeout(() => onClose(n.id), n.autoCloseMs);\r\n      return () => clearTimeout(timer);\r\n    });\r\n  }, [notifications, onClose]);\r\n\r\n  return (\r\n    <div\r\n      className=\"position-fixed top-0 end-0 p-3\"\r\n      style={{ zIndex: 1080, width: 340 }}\r\n    >\r\n      {notifications.map((n) => (\r\n        <div\r\n          key={n.id}\r\n          className={`alert alert-${n.type ?? \"info\"} alert-dismissible fade show shadow-sm mb-2`}\r\n          role=\"alert\"\r\n        >\r\n          {n.message}\r\n\r\n          <button\r\n            type=\"button\"\r\n            className=\"btn-close\"\r\n            aria-label=\"Close\"\r\n            onClick={() => onClose(n.id)}\r\n          />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n","import {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useState,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\nexport type NotificationType = \"success\" | \"info\" | \"warning\" | \"danger\";\r\n\r\n// Rename to avoid conflict with browser Notification type\r\nexport interface AppNotification {\r\n  id: string;\r\n  message: string;\r\n  type?: NotificationType;\r\n  autoCloseMs?: number;\r\n}\r\n\r\ninterface NotificationsContextValue {\r\n  push: (message: string, type?: NotificationType, autoCloseMs?: number) => void;\r\n}\r\n\r\nconst NotificationsContext = createContext<NotificationsContextValue | undefined>(\r\n  undefined\r\n);\r\n\r\ninterface NotificationsProviderProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function NotificationsProvider({ children }: NotificationsProviderProps) {\r\n  const [notifications, setNotifications] = useState<AppNotification[]>([]);\r\n\r\n  const push = useCallback(\r\n    (message: string, type: NotificationType = \"info\", autoCloseMs = 4000) => {\r\n      setNotifications((prev) => [\r\n        ...prev,\r\n        {\r\n          id: crypto.randomUUID(),\r\n          message,\r\n          type,\r\n          autoCloseMs,\r\n        },\r\n      ]);\r\n    },\r\n    []\r\n  );\r\n\r\n  const close = useCallback((id: string) => {\r\n    setNotifications((list) => list.filter((n) => n.id !== id));\r\n  }, []);\r\n\r\n  // Handle auto close timers\r\n  useEffect(() => {\r\n    const timers = notifications.map((n) => {\r\n      if (!n.autoCloseMs) return null;\r\n      return setTimeout(() => close(n.id), n.autoCloseMs);\r\n    });\r\n\r\n    return () => {\r\n      timers.forEach((t) => t && clearTimeout(t));\r\n    };\r\n  }, [notifications, close]);\r\n\r\n  return (\r\n    <NotificationsContext.Provider value={{ push }}>\r\n      {/* overlay renderer */}\r\n      <div\r\n        className=\"position-fixed top-0 end-0 p-3\"\r\n        style={{ zIndex: 1080, width: 340 }}\r\n      >\r\n        {notifications.map((n) => (\r\n          <div\r\n            key={n.id}\r\n            className={`alert alert-${n.type ?? \"info\"} alert-dismissible fade show shadow-sm mb-2`}\r\n            role=\"alert\"\r\n          >\r\n            {n.message}\r\n            <button\r\n              type=\"button\"\r\n              className=\"btn-close\"\r\n              aria-label=\"Close\"\r\n              onClick={() => close(n.id)}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      {children}\r\n    </NotificationsContext.Provider>\r\n  );\r\n}\r\n\r\nexport function UseNotifications(): NotificationsContextValue {\r\n  const ctx = useContext(NotificationsContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useNotifications must be used within a NotificationsProvider\");\r\n  }\r\n  return ctx;\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n  return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n  return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n  return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsx","jsx","jsx","jsx","jsxs","jsx","jsx","jsxs","useEffect","useState","jsx","jsxs","jsx","jsx","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/common-ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/dist/index.css

@@ -1,3 +0,0 @@
-@import "/node_modules/bootstrap/dist/css/bootstrap.css";
-
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"AAAQ","file":"index.css"}

package/dist/index.d.cts

@@ -1,73 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, MouseEvent } from 'react';
-
-interface BodyProps {
-    title: ReactNode;
-    description?: ReactNode;
-    children?: ReactNode;
-}
-declare function Body({ title, description, children }: BodyProps): react_jsx_runtime.JSX.Element;
-
-interface ButtonProps {
-    buttonClassName?: string;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    onAction?: () => Promise<unknown>;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onDone?: (result: unknown) => void;
-    onError?: (error: unknown) => void;
-    onFinally?: () => void;
-    children?: ReactNode;
-    loadingChildren?: ReactNode;
-    renderContent?: () => ReactNode;
-    renderLoading?: () => ReactNode;
-    loadingText?: string;
-    showSpinner?: boolean;
-}
-declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-interface FooterProps {
-    children?: ReactNode;
-}
-declare function Footer({ children }: FooterProps): react_jsx_runtime.JSX.Element;
-
-interface HeaderProps {
-    children?: ReactNode;
-}
-declare function Header({ children }: HeaderProps): react_jsx_runtime.JSX.Element;
-
-interface HeaderBrandProps {
-    children: ReactNode;
-}
-declare function HeaderText({ children }: HeaderBrandProps): react_jsx_runtime.JSX.Element;
-
-interface NpmBadgeProps {
-    packageLabel: string;
-    packageName: string;
-    packageUrl: string;
-    color?: string;
-    height?: number;
-}
-declare function NpmBadge({ packageName, packageLabel, packageUrl, color, height }: NpmBadgeProps): react_jsx_runtime.JSX.Element;
-
-interface NavigationProps {
-    title?: ReactNode;
-    children: ReactNode;
-}
-declare function Navigation({ title, children }: NavigationProps): react_jsx_runtime.JSX.Element;
-
-interface NavigationItemProps {
-    title: ReactNode;
-    type: string;
-    active?: boolean;
-    onClick?: (type: string) => void;
-}
-declare function NavigationItem({ title, type, active, onClick }: NavigationItemProps): react_jsx_runtime.JSX.Element;
-
-declare function ContentContainer({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-declare function ContentRow({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-declare function LayoutWrapper({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-export { Body, Button, type ButtonProps, ContentContainer, ContentRow, Footer, Header, HeaderText, LayoutWrapper, Navigation, NavigationItem, NpmBadge };

package/dist/index.d.ts

@@ -1,73 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, MouseEvent } from 'react';
-
-interface BodyProps {
-    title: ReactNode;
-    description?: ReactNode;
-    children?: ReactNode;
-}
-declare function Body({ title, description, children }: BodyProps): react_jsx_runtime.JSX.Element;
-
-interface ButtonProps {
-    buttonClassName?: string;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    onAction?: () => Promise<unknown>;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onDone?: (result: unknown) => void;
-    onError?: (error: unknown) => void;
-    onFinally?: () => void;
-    children?: ReactNode;
-    loadingChildren?: ReactNode;
-    renderContent?: () => ReactNode;
-    renderLoading?: () => ReactNode;
-    loadingText?: string;
-    showSpinner?: boolean;
-}
-declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-interface FooterProps {
-    children?: ReactNode;
-}
-declare function Footer({ children }: FooterProps): react_jsx_runtime.JSX.Element;
-
-interface HeaderProps {
-    children?: ReactNode;
-}
-declare function Header({ children }: HeaderProps): react_jsx_runtime.JSX.Element;
-
-interface HeaderBrandProps {
-    children: ReactNode;
-}
-declare function HeaderText({ children }: HeaderBrandProps): react_jsx_runtime.JSX.Element;
-
-interface NpmBadgeProps {
-    packageLabel: string;
-    packageName: string;
-    packageUrl: string;
-    color?: string;
-    height?: number;
-}
-declare function NpmBadge({ packageName, packageLabel, packageUrl, color, height }: NpmBadgeProps): react_jsx_runtime.JSX.Element;
-
-interface NavigationProps {
-    title?: ReactNode;
-    children: ReactNode;
-}
-declare function Navigation({ title, children }: NavigationProps): react_jsx_runtime.JSX.Element;
-
-interface NavigationItemProps {
-    title: ReactNode;
-    type: string;
-    active?: boolean;
-    onClick?: (type: string) => void;
-}
-declare function NavigationItem({ title, type, active, onClick }: NavigationItemProps): react_jsx_runtime.JSX.Element;
-
-declare function ContentContainer({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-declare function ContentRow({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-declare function LayoutWrapper({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-
-export { Body, Button, type ButtonProps, ContentContainer, ContentRow, Footer, Header, HeaderText, LayoutWrapper, Navigation, NavigationItem, NpmBadge };