@dismissible/react-client 0.1.0 → 0.2.0

package/README.md

@@ -9,6 +9,7 @@ A React component library for creating dismissible UI elements with persistent s
 
 - 🎯 **Easy to use** - Simple component API for dismissible content
 - 💾 **Persistent state** - Dismissal state is saved and restored across sessions
+- 🔐 **JWT Authentication** - Built-in support for JWT-based user authentication
 - 🎨 **Customizable** - Custom loading, error, and dismiss button components
 - ♿ **Accessible** - Built with accessibility best practices
 - 🪝 **Hook-based** - Includes `useDismissibleItem` hook for custom implementations
@@ -49,6 +50,51 @@ function App() {
 
 ## API Reference
 
+### `<DismissibleProvider>` Component
+
+Context provider for JWT authentication and configuration. Wrap your app or components that need JWT authentication.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `jwt` | `string \| (() => string)` | ❌ | JWT token (static string or function) |
+| `baseUrl` | `string` | ❌ | Custom API base URL override |
+| `children` | `ReactNode` | ✅ | Components that will use the dismissible functionality |
+
+#### Example
+
+```tsx
+import { DismissibleProvider } from '@dismissible/react-client';
+
+// With static JWT
+function App() {
+  return (
+    <DismissibleProvider jwt="eyJhbGciOiJIUzI1NiIs...">
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+
+// With dynamic JWT function
+function AppWithDynamicAuth() {
+  return (
+    <DismissibleProvider jwt={() => getAccessToken()}>
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+
+// Without JWT (anonymous/backwards compatible)
+function AppWithoutAuth() {
+  return (
+    <DismissibleProvider>
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+```
+
 ### `<Dismissible>` Component
 
 The main component for creating dismissible content.
@@ -131,6 +177,56 @@ function CustomDismissible({ id, children }) {
 
 ## Usage Examples
 
+### JWT Authentication Setup
+
+For enterprise accounts that require user-specific dismissible state, wrap your app with the `DismissibleProvider`:
+
+```tsx
+import { DismissibleProvider, Dismissible } from '@dismissible/react-client';
+
+function App() {
+  // Example with static JWT token
+  const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
+  
+  return (
+    <DismissibleProvider jwt={jwt}>
+      <Dashboard />
+    </DismissibleProvider>
+  );
+}
+
+function Dashboard() {
+  return (
+    <div>
+      {/* These dismissible items will be user-specific */}
+      <Dismissible id="user-welcome-banner">
+        <div className="alert alert-info">
+          <h4>Welcome back!</h4>
+          <p>You have 3 new notifications.</p>
+        </div>
+      </Dismissible>
+    </div>
+  );
+}
+```
+
+### Dynamic JWT with Authentication Provider
+
+```tsx
+import { DismissibleProvider } from '@dismissible/react-client';
+import { useAuth } from './auth'; // Your auth context
+
+function App() {
+  const { getAccessToken } = useAuth();
+  
+  return (
+    <DismissibleProvider jwt={() => getAccessToken()}>
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+```
+
 ### Basic Dismissible Banner
 
 ```tsx
@@ -271,10 +367,49 @@ function ConditionalBanner({ user }) {
 }
 ```
 
+### User-Specific vs Anonymous Dismissible Items
+
+The behavior changes based on whether JWT authentication is configured:
+
+```tsx
+import { DismissibleProvider, Dismissible } from '@dismissible/react-client';
+
+// With JWT - dismissible state is user-specific
+function AuthenticatedApp() {
+  return (
+    <DismissibleProvider jwt={() => getAccessToken()}>
+      <div>
+        {/* Each user will see this banner independently */}
+        <Dismissible id="feature-announcement">
+          <div>New feature available!</div>
+        </Dismissible>
+        
+        {/* User A dismissing this won't affect User B */}
+        <Dismissible id="survey-request">
+          <div>Please take our survey!</div>
+        </Dismissible>
+      </div>
+    </DismissibleProvider>
+  );
+}
+
+// Without JWT - dismissible state is account-level (anonymous)
+function AnonymousApp() {
+  return (
+    <div>
+      {/* These will be dismissed for all users of this account */}
+      <Dismissible id="general-announcement">
+        <div>Site maintenance scheduled</div>
+      </Dismissible>
+    </div>
+  );
+}
+```
+
 ### Using the Hook for Complex Logic
 
 ```tsx
-import { useDismissibleItem } from '@dismissible/react-client';
+import { useDismissibleItem, DismissibleProvider } from '@dismissible/react-client';
 import { useState, useEffect } from 'react';
 
 function SmartNotification({ id, message, type = 'info' }) {
@@ -310,6 +445,19 @@ function SmartNotification({ id, message, type = 'info' }) {
     </div>
   );
 }
+
+// Usage with authentication
+function App() {
+  return (
+    <DismissibleProvider jwt={() => getUserToken()}>
+      <SmartNotification 
+        id="user-specific-notification" 
+        message="Welcome back!" 
+        type="info" 
+      />
+    </DismissibleProvider>
+  );
+}
 ```
 
 ## Styling
@@ -342,12 +490,24 @@ The library is written in TypeScript and exports all type definitions:
 ```tsx
 import type { 
   DismissibleProps,
+  DismissibleProviderProps,
+  JwtToken,
   IDismissibleItem 
 } from '@dismissible/react-client';
 
+// Dismissible component with custom props
 const MyComponent: React.FC<DismissibleProps> = (props) => {
   // Your component implementation
 };
+
+// Provider with JWT authentication
+const AuthProvider: React.FC<DismissibleProviderProps> = ({ children, jwt }) => {
+  return (
+    <DismissibleProvider jwt={jwt}>
+      {children}
+    </DismissibleProvider>
+  );
+};
 ```
 
 ## Development

package/dist/contexts/DismissibleContext.d.ts

@@ -0,0 +1,10 @@
+import { DismissibleContextValue } from '../types/dismissible.types';
+/**
+ * React context for sharing dismissible authentication state
+ */
+export declare const DismissibleContext: import('react').Context<DismissibleContextValue | null>;
+/**
+ * Hook to consume the DismissibleContext
+ * @returns The context value or null if not within a provider
+ */
+export declare const useDismissibleContext: () => DismissibleContextValue | null;

package/dist/contexts/DismissibleProvider.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { DismissibleProviderProps } from '../types/dismissible.types';
+/**
+ * Provider component for managing dismissible authentication state
+ *
+ * @example
+ * ```tsx
+ * // With static JWT
+ * <DismissibleProvider jwt="eyJhbGciOiJ..." baseUrl="https://api.dismissible.io">
+ *   <App />
+ * </DismissibleProvider>
+ *
+ * // With dynamic JWT function
+ * <DismissibleProvider
+ *   jwt={() => getAccessToken()}
+ *   baseUrl="https://api.dismissible.io"
+ * >
+ *   <App />
+ * </DismissibleProvider>
+ * ```
+ */
+export declare const DismissibleProvider: React.FC<DismissibleProviderProps>;

package/dist/dismissible-client.es.js

@@ -1,292 +1,292 @@
-import { jsx as E, jsxs as V } from "react/jsx-runtime";
-import { useRef as H, useState as x, useCallback as L, useEffect as P } from "react";
-const ee = /\{[^{}]+\}/g, te = () => {
-  var e, n;
-  return typeof process == "object" && Number.parseInt((n = (e = process == null ? void 0 : process.versions) == null ? void 0 : e.node) == null ? void 0 : n.substring(0, 2)) >= 18 && process.versions.undici;
+import { jsx as I, jsxs as Q } from "react/jsx-runtime";
+import { createContext as te, useContext as re, useMemo as N, useRef as P, useState as q, useCallback as L, useEffect as J } from "react";
+const ne = /\{[^{}]+\}/g, se = () => {
+  var e, r;
+  return typeof process == "object" && Number.parseInt((r = (e = process == null ? void 0 : process.versions) == null ? void 0 : e.node) == null ? void 0 : r.substring(0, 2)) >= 18 && process.versions.undici;
 };
-function re() {
+function ie() {
   return Math.random().toString(36).slice(2, 11);
 }
-function ne(e) {
+function oe(e) {
   let {
-    baseUrl: n = "",
+    baseUrl: r = "",
     Request: t = globalThis.Request,
     fetch: s = globalThis.fetch,
-    querySerializer: r,
-    bodySerializer: i,
-    headers: l,
-    requestInitExt: f = void 0,
-    ...v
+    querySerializer: n,
+    bodySerializer: o,
+    headers: i,
+    requestInitExt: u = void 0,
+    ...d
   } = { ...e };
-  f = te() ? f : void 0, n = W(n);
-  const d = [];
-  async function h(a, o) {
+  u = se() ? u : void 0, r = W(r);
+  const m = [];
+  async function y(c, l) {
     const {
       baseUrl: p,
-      fetch: g = s,
-      Request: S = t,
-      headers: c,
-      params: y = {},
-      parseAs: A = "json",
-      querySerializer: C,
-      bodySerializer: N = i ?? ie,
-      body: F,
-      ...D
-    } = o || {};
-    let q = n;
-    p && (q = W(p) ?? n);
-    let O = typeof r == "function" ? r : _(r);
-    C && (O = typeof C == "function" ? C : _({
-      ...typeof r == "object" ? r : {},
-      ...C
+      fetch: E = s,
+      Request: v = t,
+      headers: C,
+      params: w = {},
+      parseAs: S = "json",
+      querySerializer: A,
+      bodySerializer: a = o ?? ce,
+      body: g,
+      ...$
+    } = l || {};
+    let z = r;
+    p && (z = W(p) ?? r);
+    let H = typeof n == "function" ? n : _(n);
+    A && (H = typeof A == "function" ? A : _({
+      ...typeof n == "object" ? n : {},
+      ...A
     }));
-    const z = F === void 0 ? void 0 : N(
-      F,
+    const k = g === void 0 ? void 0 : a(
+      g,
       // Note: we declare mergeHeaders() both here and below because it’s a bit of a chicken-or-egg situation:
       // bodySerializer() needs all headers so we aren’t dropping ones set by the user, however,
       // the result of this ALSO sets the lowest-priority content-type header. So we re-merge below,
       // setting the content-type at the very beginning to be overwritten.
       // Lastly, based on the way headers work, it’s not a simple “present-or-not” check becauase null intentionally un-sets headers.
-      B(l, c, y.header)
-    ), Y = B(
+      B(i, C, w.header)
+    ), Z = B(
       // with no body, we should not to set Content-Type
-      z === void 0 || // if serialized body is FormData; browser will correctly set Content-Type & boundary expression
-      z instanceof FormData ? {} : {
+      k === void 0 || // if serialized body is FormData; browser will correctly set Content-Type & boundary expression
+      k instanceof FormData ? {} : {
         "Content-Type": "application/json"
       },
-      l,
-      c,
-      y.header
-    ), Z = {
+      i,
+      C,
+      w.header
+    ), ee = {
       redirect: "follow",
-      ...v,
-      ...D,
-      body: z,
-      headers: Y
+      ...d,
+      ...$,
+      body: k,
+      headers: Z
     };
-    let I, $, w = new t(
-      oe(a, { baseUrl: q, params: y, querySerializer: O }),
-      Z
-    ), u;
-    for (const b in D)
-      b in w || (w[b] = D[b]);
-    if (d.length) {
-      I = re(), $ = Object.freeze({
-        baseUrl: q,
-        fetch: g,
-        parseAs: A,
-        querySerializer: O,
-        bodySerializer: N
+    let U, T, R = new t(
+      le(c, { baseUrl: z, params: w, querySerializer: H }),
+      ee
+    ), f;
+    for (const b in $)
+      b in R || (R[b] = $[b]);
+    if (m.length) {
+      U = ie(), T = Object.freeze({
+        baseUrl: z,
+        fetch: E,
+        parseAs: S,
+        querySerializer: H,
+        bodySerializer: a
       });
-      for (const b of d)
+      for (const b of m)
         if (b && typeof b == "object" && typeof b.onRequest == "function") {
-          const m = await b.onRequest({
-            request: w,
-            schemaPath: a,
-            params: y,
-            options: $,
-            id: I
+          const h = await b.onRequest({
+            request: R,
+            schemaPath: c,
+            params: w,
+            options: T,
+            id: U
           });
-          if (m)
-            if (m instanceof t)
-              w = m;
-            else if (m instanceof Response) {
-              u = m;
+          if (h)
+            if (h instanceof t)
+              R = h;
+            else if (h instanceof Response) {
+              f = h;
               break;
             } else
               throw new Error("onRequest: must return new Request() or Response() when modifying the request");
         }
     }
-    if (!u) {
+    if (!f) {
       try {
-        u = await g(w, f);
+        f = await E(R, u);
       } catch (b) {
-        let m = b;
-        if (d.length)
-          for (let R = d.length - 1; R >= 0; R--) {
-            const U = d[R];
-            if (U && typeof U == "object" && typeof U.onError == "function") {
-              const j = await U.onError({
-                request: w,
-                error: m,
-                schemaPath: a,
-                params: y,
-                options: $,
-                id: I
+        let h = b;
+        if (m.length)
+          for (let j = m.length - 1; j >= 0; j--) {
+            const x = m[j];
+            if (x && typeof x == "object" && typeof x.onError == "function") {
+              const D = await x.onError({
+                request: R,
+                error: h,
+                schemaPath: c,
+                params: w,
+                options: T,
+                id: U
               });
-              if (j) {
-                if (j instanceof Response) {
-                  m = void 0, u = j;
+              if (D) {
+                if (D instanceof Response) {
+                  h = void 0, f = D;
                   break;
                 }
-                if (j instanceof Error) {
-                  m = j;
+                if (D instanceof Error) {
+                  h = D;
                   continue;
                 }
                 throw new Error("onError: must return new Response() or instance of Error");
               }
             }
           }
-        if (m)
-          throw m;
+        if (h)
+          throw h;
       }
-      if (d.length)
-        for (let b = d.length - 1; b >= 0; b--) {
-          const m = d[b];
-          if (m && typeof m == "object" && typeof m.onResponse == "function") {
-            const R = await m.onResponse({
-              request: w,
-              response: u,
-              schemaPath: a,
-              params: y,
-              options: $,
-              id: I
+      if (m.length)
+        for (let b = m.length - 1; b >= 0; b--) {
+          const h = m[b];
+          if (h && typeof h == "object" && typeof h.onResponse == "function") {
+            const j = await h.onResponse({
+              request: R,
+              response: f,
+              schemaPath: c,
+              params: w,
+              options: T,
+              id: U
             });
-            if (R) {
-              if (!(R instanceof Response))
+            if (j) {
+              if (!(j instanceof Response))
                 throw new Error("onResponse: must return new Response() when modifying the response");
-              u = R;
+              f = j;
             }
           }
         }
     }
-    if (u.status === 204 || w.method === "HEAD" || u.headers.get("Content-Length") === "0")
-      return u.ok ? { data: void 0, response: u } : { error: void 0, response: u };
-    if (u.ok)
-      return A === "stream" ? { data: u.body, response: u } : { data: await u[A](), response: u };
-    let k = await u.text();
+    if (f.status === 204 || R.method === "HEAD" || f.headers.get("Content-Length") === "0")
+      return f.ok ? { data: void 0, response: f } : { error: void 0, response: f };
+    if (f.ok)
+      return S === "stream" ? { data: f.body, response: f } : { data: await f[S](), response: f };
+    let F = await f.text();
     try {
-      k = JSON.parse(k);
+      F = JSON.parse(F);
     } catch {
     }
-    return { error: k, response: u };
+    return { error: F, response: f };
   }
   return {
-    request(a, o, p) {
-      return h(o, { ...p, method: a.toUpperCase() });
+    request(c, l, p) {
+      return y(l, { ...p, method: c.toUpperCase() });
     },
     /** Call a GET endpoint */
-    GET(a, o) {
-      return h(a, { ...o, method: "GET" });
+    GET(c, l) {
+      return y(c, { ...l, method: "GET" });
     },
     /** Call a PUT endpoint */
-    PUT(a, o) {
-      return h(a, { ...o, method: "PUT" });
+    PUT(c, l) {
+      return y(c, { ...l, method: "PUT" });
     },
     /** Call a POST endpoint */
-    POST(a, o) {
-      return h(a, { ...o, method: "POST" });
+    POST(c, l) {
+      return y(c, { ...l, method: "POST" });
     },
     /** Call a DELETE endpoint */
-    DELETE(a, o) {
-      return h(a, { ...o, method: "DELETE" });
+    DELETE(c, l) {
+      return y(c, { ...l, method: "DELETE" });
     },
     /** Call a OPTIONS endpoint */
-    OPTIONS(a, o) {
-      return h(a, { ...o, method: "OPTIONS" });
+    OPTIONS(c, l) {
+      return y(c, { ...l, method: "OPTIONS" });
     },
     /** Call a HEAD endpoint */
-    HEAD(a, o) {
-      return h(a, { ...o, method: "HEAD" });
+    HEAD(c, l) {
+      return y(c, { ...l, method: "HEAD" });
     },
     /** Call a PATCH endpoint */
-    PATCH(a, o) {
-      return h(a, { ...o, method: "PATCH" });
+    PATCH(c, l) {
+      return y(c, { ...l, method: "PATCH" });
     },
     /** Call a TRACE endpoint */
-    TRACE(a, o) {
-      return h(a, { ...o, method: "TRACE" });
+    TRACE(c, l) {
+      return y(c, { ...l, method: "TRACE" });
     },
     /** Register middleware */
-    use(...a) {
-      for (const o of a)
-        if (o) {
-          if (typeof o != "object" || !("onRequest" in o || "onResponse" in o || "onError" in o))
+    use(...c) {
+      for (const l of c)
+        if (l) {
+          if (typeof l != "object" || !("onRequest" in l || "onResponse" in l || "onError" in l))
             throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");
-          d.push(o);
+          m.push(l);
         }
     },
     /** Unregister middleware */
-    eject(...a) {
-      for (const o of a) {
-        const p = d.indexOf(o);
-        p !== -1 && d.splice(p, 1);
+    eject(...c) {
+      for (const l of c) {
+        const p = m.indexOf(l);
+        p !== -1 && m.splice(p, 1);
       }
     }
   };
 }
-function T(e, n, t) {
-  if (n == null)
+function O(e, r, t) {
+  if (r == null)
     return "";
-  if (typeof n == "object")
+  if (typeof r == "object")
     throw new Error(
       "Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these."
     );
-  return `${e}=${(t == null ? void 0 : t.allowReserved) === !0 ? n : encodeURIComponent(n)}`;
+  return `${e}=${(t == null ? void 0 : t.allowReserved) === !0 ? r : encodeURIComponent(r)}`;
 }
-function X(e, n, t) {
-  if (!n || typeof n != "object")
+function V(e, r, t) {
+  if (!r || typeof r != "object")
     return "";
-  const s = [], r = {
+  const s = [], n = {
     simple: ",",
     label: ".",
     matrix: ";"
   }[t.style] || "&";
   if (t.style !== "deepObject" && t.explode === !1) {
-    for (const f in n)
-      s.push(f, t.allowReserved === !0 ? n[f] : encodeURIComponent(n[f]));
-    const l = s.join(",");
+    for (const u in r)
+      s.push(u, t.allowReserved === !0 ? r[u] : encodeURIComponent(r[u]));
+    const i = s.join(",");
     switch (t.style) {
       case "form":
-        return `${e}=${l}`;
+        return `${e}=${i}`;
       case "label":
-        return `.${l}`;
+        return `.${i}`;
       case "matrix":
-        return `;${e}=${l}`;
+        return `;${e}=${i}`;
       default:
-        return l;
+        return i;
     }
   }
-  for (const l in n) {
-    const f = t.style === "deepObject" ? `${e}[${l}]` : l;
-    s.push(T(f, n[l], t));
+  for (const i in r) {
+    const u = t.style === "deepObject" ? `${e}[${i}]` : i;
+    s.push(O(u, r[i], t));
   }
-  const i = s.join(r);
-  return t.style === "label" || t.style === "matrix" ? `${r}${i}` : i;
+  const o = s.join(n);
+  return t.style === "label" || t.style === "matrix" ? `${n}${o}` : o;
 }
-function K(e, n, t) {
-  if (!Array.isArray(n))
+function X(e, r, t) {
+  if (!Array.isArray(r))
     return "";
   if (t.explode === !1) {
-    const i = { form: ",", spaceDelimited: "%20", pipeDelimited: "|" }[t.style] || ",", l = (t.allowReserved === !0 ? n : n.map((f) => encodeURIComponent(f))).join(i);
+    const o = { form: ",", spaceDelimited: "%20", pipeDelimited: "|" }[t.style] || ",", i = (t.allowReserved === !0 ? r : r.map((u) => encodeURIComponent(u))).join(o);
     switch (t.style) {
       case "simple":
-        return l;
+        return i;
       case "label":
-        return `.${l}`;
+        return `.${i}`;
       case "matrix":
-        return `;${e}=${l}`;
+        return `;${e}=${i}`;
       default:
-        return `${e}=${l}`;
+        return `${e}=${i}`;
     }
   }
-  const s = { simple: ",", label: ".", matrix: ";" }[t.style] || "&", r = [];
-  for (const i of n)
-    t.style === "simple" || t.style === "label" ? r.push(t.allowReserved === !0 ? i : encodeURIComponent(i)) : r.push(T(e, i, t));
-  return t.style === "label" || t.style === "matrix" ? `${s}${r.join(s)}` : r.join(s);
+  const s = { simple: ",", label: ".", matrix: ";" }[t.style] || "&", n = [];
+  for (const o of r)
+    t.style === "simple" || t.style === "label" ? n.push(t.allowReserved === !0 ? o : encodeURIComponent(o)) : n.push(O(e, o, t));
+  return t.style === "label" || t.style === "matrix" ? `${s}${n.join(s)}` : n.join(s);
 }
 function _(e) {
   return function(t) {
     const s = [];
     if (t && typeof t == "object")
-      for (const r in t) {
-        const i = t[r];
-        if (i != null) {
-          if (Array.isArray(i)) {
-            if (i.length === 0)
+      for (const n in t) {
+        const o = t[n];
+        if (o != null) {
+          if (Array.isArray(o)) {
+            if (o.length === 0)
               continue;
             s.push(
-              K(r, i, {
+              X(n, o, {
                 style: "form",
                 explode: !0,
                 ...e == null ? void 0 : e.array,
@@ -295,9 +295,9 @@ function _(e) {
             );
             continue;
           }
-          if (typeof i == "object") {
+          if (typeof o == "object") {
             s.push(
-              X(r, i, {
+              V(n, o, {
                 style: "deepObject",
                 explode: !0,
                 ...e == null ? void 0 : e.object,
@@ -306,67 +306,67 @@ function _(e) {
             );
             continue;
           }
-          s.push(T(r, i, e));
+          s.push(O(n, o, e));
         }
       }
     return s.join("&");
   };
 }
-function se(e, n) {
+function ae(e, r) {
   let t = e;
-  for (const s of e.match(ee) ?? []) {
-    let r = s.substring(1, s.length - 1), i = !1, l = "simple";
-    if (r.endsWith("*") && (i = !0, r = r.substring(0, r.length - 1)), r.startsWith(".") ? (l = "label", r = r.substring(1)) : r.startsWith(";") && (l = "matrix", r = r.substring(1)), !n || n[r] === void 0 || n[r] === null)
+  for (const s of e.match(ne) ?? []) {
+    let n = s.substring(1, s.length - 1), o = !1, i = "simple";
+    if (n.endsWith("*") && (o = !0, n = n.substring(0, n.length - 1)), n.startsWith(".") ? (i = "label", n = n.substring(1)) : n.startsWith(";") && (i = "matrix", n = n.substring(1)), !r || r[n] === void 0 || r[n] === null)
       continue;
-    const f = n[r];
-    if (Array.isArray(f)) {
-      t = t.replace(s, K(r, f, { style: l, explode: i }));
+    const u = r[n];
+    if (Array.isArray(u)) {
+      t = t.replace(s, X(n, u, { style: i, explode: o }));
       continue;
     }
-    if (typeof f == "object") {
-      t = t.replace(s, X(r, f, { style: l, explode: i }));
+    if (typeof u == "object") {
+      t = t.replace(s, V(n, u, { style: i, explode: o }));
       continue;
     }
-    if (l === "matrix") {
-      t = t.replace(s, `;${T(r, f)}`);
+    if (i === "matrix") {
+      t = t.replace(s, `;${O(n, u)}`);
       continue;
     }
-    t = t.replace(s, l === "label" ? `.${encodeURIComponent(f)}` : encodeURIComponent(f));
+    t = t.replace(s, i === "label" ? `.${encodeURIComponent(u)}` : encodeURIComponent(u));
   }
   return t;
 }
-function ie(e, n) {
-  return e instanceof FormData ? e : n && (n.get instanceof Function ? n.get("Content-Type") ?? n.get("content-type") : n["Content-Type"] ?? n["content-type"]) === "application/x-www-form-urlencoded" ? new URLSearchParams(e).toString() : JSON.stringify(e);
+function ce(e, r) {
+  return e instanceof FormData ? e : r && (r.get instanceof Function ? r.get("Content-Type") ?? r.get("content-type") : r["Content-Type"] ?? r["content-type"]) === "application/x-www-form-urlencoded" ? new URLSearchParams(e).toString() : JSON.stringify(e);
 }
-function oe(e, n) {
-  var r;
-  let t = `${n.baseUrl}${e}`;
-  (r = n.params) != null && r.path && (t = se(t, n.params.path));
-  let s = n.querySerializer(n.params.query ?? {});
+function le(e, r) {
+  var n;
+  let t = `${r.baseUrl}${e}`;
+  (n = r.params) != null && n.path && (t = ae(t, r.params.path));
+  let s = r.querySerializer(r.params.query ?? {});
   return s.startsWith("?") && (s = s.substring(1)), s && (t += `?${s}`), t;
 }
 function B(...e) {
-  const n = new Headers();
+  const r = new Headers();
   for (const t of e) {
     if (!t || typeof t != "object")
       continue;
     const s = t instanceof Headers ? t.entries() : Object.entries(t);
-    for (const [r, i] of s)
-      if (i === null)
-        n.delete(r);
-      else if (Array.isArray(i))
-        for (const l of i)
-          n.append(r, l);
-      else i !== void 0 && n.set(r, i);
+    for (const [n, o] of s)
+      if (o === null)
+        r.delete(n);
+      else if (Array.isArray(o))
+        for (const i of o)
+          r.append(n, i);
+      else o !== void 0 && r.set(n, o);
   }
-  return n;
+  return r;
 }
 function W(e) {
   return e.endsWith("/") ? e.substring(0, e.length - 1) : e;
 }
-const ae = {
+const ue = {
   baseUrl: "http://localhost:3200"
-}, ce = {
+}, fe = {
   development: {
     baseUrl: "http://localhost:3200"
   },
@@ -378,69 +378,77 @@ const ae = {
     // baseUrl: import.meta.env.VITE_API_BASE_URL || "https://api.dismissible.io",
     baseUrl: "https://api.dismissible.io"
   }
-}, le = () => ce["production"] || ae, J = (e, n, t) => {
+}, de = () => fe["production"] || ue, M = (e, r, t) => {
   try {
-    const s = `${n}_${e}`, r = localStorage.getItem(s);
-    if (!r) return null;
-    const { data: i, timestamp: l } = JSON.parse(r);
-    return t && Date.now() - l > t ? (localStorage.removeItem(s), null) : i;
+    const s = `${r}_${e}`, n = localStorage.getItem(s);
+    if (!n) return null;
+    const { data: o, timestamp: i } = JSON.parse(n);
+    return t && Date.now() - i > t ? (localStorage.removeItem(s), null) : o;
   } catch {
     return null;
   }
-}, M = (e, n, t) => {
+}, G = (e, r, t) => {
   try {
-    const s = `${t}_${e}`, r = {
-      data: n,
+    const s = `${t}_${e}`, n = {
+      data: r,
       timestamp: Date.now()
     };
-    localStorage.setItem(s, JSON.stringify(r));
+    localStorage.setItem(s, JSON.stringify(n));
   } catch (s) {
     console.warn("Failed to cache dismissible item:", s);
   }
-}, G = (e, n) => {
+}, K = (e, r) => {
   try {
-    const t = `${n}_${e}`;
+    const t = `${r}_${e}`;
     localStorage.removeItem(t);
   } catch (t) {
     console.warn("Failed to remove cached dismissible item:", t);
   }
-}, fe = le(), Q = ne({
-  baseUrl: fe.baseUrl
-}), ue = "dismissible", de = (e, n = {}) => {
+}, Y = te(
+  null
+), me = () => re(Y), he = "dismissible", ye = (e, r = {}) => {
   const {
     initialData: t,
     enableCache: s = !0,
-    cachePrefix: r = ue,
-    cacheExpiration: i
-  } = n, l = H({
+    cachePrefix: n = he,
+    cacheExpiration: o
+  } = r, i = me(), u = N(() => {
+    const a = de(), g = (i == null ? void 0 : i.baseUrl) || a.baseUrl, $ = (i == null ? void 0 : i.getAuthHeaders()) || {};
+    return oe({
+      baseUrl: g,
+      headers: {
+        ...$
+      }
+    });
+  }, [i]), d = N(() => !!(i != null && i.jwt) ? `${e}-auth` : e, [e, i == null ? void 0 : i.jwt]), m = P({
     enableCache: s,
-    cachePrefix: r,
-    cacheExpiration: i
-  }), f = H(e), [v, d] = x(!1), [h, a] = x(null), [o, p] = x(() => {
+    cachePrefix: n,
+    cacheExpiration: o
+  }), y = P(e), c = P(d), [l, p] = q(!1), [E, v] = q(null), [C, w] = q(() => {
     if (t) return t;
     if (s) {
-      const c = J(
-        e,
-        r,
-        i
+      const a = M(
+        d,
+        n,
+        o
       );
-      if (c) return c;
+      if (a) return a;
     }
-  }), g = L(async () => {
+  }), S = L(async () => {
     if (s) {
-      const c = J(
-        e,
-        r,
-        i
+      const a = M(
+        d,
+        n,
+        o
       );
-      if (c != null && c.dismissedAt) {
-        p(c), d(!1);
+      if (a != null && a.dismissedAt) {
+        w(a), p(!1);
         return;
       }
     }
-    d(!0), a(null);
+    p(!0), v(null);
     try {
-      const { data: c, error: y } = await Q.GET(
+      const { data: a, error: g } = await u.GET(
         "/v1/dismissible/{itemId}",
         {
           params: {
@@ -450,33 +458,41 @@ const ae = {
           }
         }
       );
-      if (y)
+      if (g)
         throw new Error(
-          y.error.message || "Failed to fetch dismissible item"
+          g.error.message || "Failed to fetch dismissible item"
         );
-      p(c.data), s && c.data && M(e, c.data, r);
-    } catch (c) {
-      a(
-        c instanceof Error ? c : new Error("Unknown error occurred")
+      w(a.data), s && a.data && G(d, a.data, n);
+    } catch (a) {
+      v(
+        a instanceof Error ? a : new Error("Unknown error occurred")
       );
     } finally {
-      d(!1);
+      p(!1);
     }
-  }, [e, s, r, i]);
-  P(() => {
-    f.current !== e ? (f.current = e, g()) : t || g();
-  }, [e, t]), P(() => {
-    const c = l.current;
-    (c.enableCache !== s || c.cachePrefix !== r || c.cacheExpiration !== i) && (c.cachePrefix !== r && G(e, c.cachePrefix), !s && c.enableCache && G(e, r), l.current = {
+  }, [
+    e,
+    d,
+    s,
+    n,
+    o,
+    u
+  ]);
+  J(() => {
+    const a = y.current !== e, g = c.current !== d;
+    a || g ? (y.current = e, c.current = d, S()) : t || S();
+  }, [e, d, t]), J(() => {
+    const a = m.current;
+    (a.enableCache !== s || a.cachePrefix !== n || a.cacheExpiration !== o) && (a.cachePrefix !== n && K(d, a.cachePrefix), !s && a.enableCache && K(d, n), m.current = {
       enableCache: s,
-      cachePrefix: r,
-      cacheExpiration: i
-    }, g());
-  }, [s, r, i, e]);
-  const S = L(async () => {
-    a(null);
+      cachePrefix: n,
+      cacheExpiration: o
+    }, S());
+  }, [s, n, o, d]);
+  const A = L(async () => {
+    v(null);
     try {
-      const { data: c, error: y } = await Q.DELETE(
+      const { data: a, error: g } = await u.DELETE(
         "/v1/dismissible/{itemId}",
         {
           params: {
@@ -486,74 +502,109 @@ const ae = {
           }
         }
       );
-      if (y)
-        throw new Error(y.error.message || "Failed to dismiss item");
-      p(c.data), s && c.data && M(e, c.data, r);
-    } catch (c) {
-      throw a(
-        c instanceof Error ? c : new Error("Failed to dismiss item")
-      ), c;
+      if (g)
+        throw new Error(g.error.message || "Failed to dismiss item");
+      w(a.data), s && a.data && G(d, a.data, n);
+    } catch (a) {
+      throw v(
+        a instanceof Error ? a : new Error("Failed to dismiss item")
+      ), a;
     }
-  }, [e, s, r]);
+  }, [d, s, n, u]);
   return {
-    dismissedOn: (o == null ? void 0 : o.dismissedAt) ?? null,
-    dismiss: S,
-    isLoading: v,
-    error: h,
-    item: o
+    dismissedOn: (C == null ? void 0 : C.dismissedAt) ?? null,
+    dismiss: A,
+    isLoading: l,
+    error: E,
+    item: C
   };
-}, me = () => /* @__PURE__ */ E("div", { className: "dismissible-loading", "aria-live": "polite", children: "Loading..." }), he = ({
+}, be = () => /* @__PURE__ */ I("div", { className: "dismissible-loading", "aria-live": "polite", children: "Loading..." }), pe = ({
   error: e
-}) => /* @__PURE__ */ V("div", { className: "dismissible-error", role: "alert", children: [
+}) => /* @__PURE__ */ Q("div", { className: "dismissible-error", role: "alert", children: [
   "Error loading dismissible item: ",
   e.message
-] }), ye = ({ id: e, onDismiss: n, ariaLabel: t }) => /* @__PURE__ */ E(
+] }), ge = ({ id: e, onDismiss: r, ariaLabel: t }) => /* @__PURE__ */ I(
   "button",
   {
     id: e,
     className: "dismissible-button",
-    onClick: n,
+    onClick: r,
     "aria-label": t,
     type: "button",
     children: "×"
   }
-), ge = ({
+), Ce = ({
   id: e,
-  children: n,
+  children: r,
   onDismiss: t,
-  LoadingComponent: s = me,
-  ErrorComponent: r = he,
-  DismissButtonComponent: i = ye,
-  enableCache: l,
-  cachePrefix: f,
-  cacheExpiration: v
+  LoadingComponent: s = be,
+  ErrorComponent: n = pe,
+  DismissButtonComponent: o = ge,
+  enableCache: i,
+  cachePrefix: u,
+  cacheExpiration: d
 }) => {
-  const { dismissedOn: d, isLoading: h, error: a, dismiss: o } = de(e, {
-    enableCache: l,
-    cachePrefix: f,
-    cacheExpiration: v
-  }), [p, g] = x(!1), S = async () => {
-    g(!0);
+  const { dismissedOn: m, isLoading: y, error: c, dismiss: l } = ye(e, {
+    enableCache: i,
+    cachePrefix: u,
+    cacheExpiration: d
+  }), [p, E] = q(!1), v = async () => {
+    E(!0);
     try {
-      await o(), t == null || t();
+      await l(), t == null || t();
     } catch {
-      g(!1);
+      E(!1);
     }
   };
-  return h && s ? /* @__PURE__ */ E(s, { id: e }) : h && !s ? null : a && r ? /* @__PURE__ */ E(r, { id: e, error: a }) : d || p ? null : /* @__PURE__ */ V("div", { className: "dismissible-container", children: [
-    /* @__PURE__ */ E("div", { className: "dismissible-content", children: n }),
-    i ? /* @__PURE__ */ E(
-      i,
+  return y && s ? /* @__PURE__ */ I(s, { id: e }) : y && !s ? null : c && n ? /* @__PURE__ */ I(n, { id: e, error: c }) : m || p ? null : /* @__PURE__ */ Q("div", { className: "dismissible-container", children: [
+    /* @__PURE__ */ I("div", { className: "dismissible-content", children: r }),
+    o ? /* @__PURE__ */ I(
+      o,
       {
         id: e,
-        onDismiss: S,
+        onDismiss: v,
         ariaLabel: `Dismiss ${e}`
       }
     ) : null
   ] });
-}, we = "0.1.0";
+}, we = (e) => {
+  if (typeof e == "function")
+    try {
+      return e();
+    } catch (r) {
+      console.warn("Failed to resolve JWT from function:", r);
+      return;
+    }
+  return e;
+}, Re = (e) => {
+  const r = we(e);
+  return r ? { Authorization: `Bearer ${r}` } : {};
+}, Se = (e) => {
+  const r = e.split(".");
+  return r.length === 3 && r.every((t) => t.length > 0);
+}, je = ({
+  jwt: e,
+  baseUrl: r,
+  children: t
+}) => {
+  const s = N(
+    () => ({
+      jwt: e,
+      baseUrl: r,
+      getAuthHeaders: () => Re(e)
+    }),
+    [e, r]
+  );
+  return /* @__PURE__ */ I(Y.Provider, { value: s, children: t });
+}, Ie = "0.1.0";
 export {
-  ge as Dismissible,
-  we as VERSION,
-  de as useDismissibleItem
+  Ce as Dismissible,
+  Y as DismissibleContext,
+  je as DismissibleProvider,
+  Ie as VERSION,
+  Re as getAuthHeaders,
+  Se as isValidJwtFormat,
+  we as resolveJwt,
+  me as useDismissibleContext,
+  ye as useDismissibleItem
 };

package/dist/dismissible-client.umd.js

@@ -1 +1 @@
-(function(w,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],g):(w=typeof globalThis<"u"?globalThis:w||self,g(w.DismissibleClient={},w.React.jsxRuntime,w.React))})(this,function(w,g,E){"use strict";const X=/\{[^{}]+\}/g,K=()=>{var e,n;return typeof process=="object"&&Number.parseInt((n=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:n.substring(0,2))>=18&&process.versions.undici};function Y(){return Math.random().toString(36).slice(2,11)}function Z(e){let{baseUrl:n="",Request:t=globalThis.Request,fetch:s=globalThis.fetch,querySerializer:r,bodySerializer:i,headers:c,requestInitExt:f=void 0,...v}={...e};f=K()?f:void 0,n=_(n);const d=[];async function h(a,o){const{baseUrl:p,fetch:R=s,Request:$=t,headers:l,params:b={},parseAs:A="json",querySerializer:T,bodySerializer:Q=i??te,body:V,...q}=o||{};let O=n;p&&(O=_(p)??n);let z=typeof r=="function"?r:H(r);T&&(z=typeof T=="function"?T:H({...typeof r=="object"?r:{},...T}));const k=V===void 0?void 0:Q(V,L(c,l,b.header)),me=L(k===void 0||k instanceof FormData?{}:{"Content-Type":"application/json"},c,l,b.header),he={redirect:"follow",...v,...q,body:k,headers:me};let x,D,S=new t(re(a,{baseUrl:O,params:b,querySerializer:z}),he),u;for(const y in q)y in S||(S[y]=q[y]);if(d.length){x=Y(),D=Object.freeze({baseUrl:O,fetch:R,parseAs:A,querySerializer:z,bodySerializer:Q});for(const y of d)if(y&&typeof y=="object"&&typeof y.onRequest=="function"){const m=await y.onRequest({request:S,schemaPath:a,params:b,options:D,id:x});if(m)if(m instanceof t)S=m;else if(m instanceof Response){u=m;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!u){try{u=await R(S,f)}catch(y){let m=y;if(d.length)for(let j=d.length-1;j>=0;j--){const U=d[j];if(U&&typeof U=="object"&&typeof U.onError=="function"){const C=await U.onError({request:S,error:m,schemaPath:a,params:b,options:D,id:x});if(C){if(C instanceof Response){m=void 0,u=C;break}if(C instanceof Error){m=C;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(m)throw m}if(d.length)for(let y=d.length-1;y>=0;y--){const m=d[y];if(m&&typeof m=="object"&&typeof m.onResponse=="function"){const j=await m.onResponse({request:S,response:u,schemaPath:a,params:b,options:D,id:x});if(j){if(!(j instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");u=j}}}}if(u.status===204||S.method==="HEAD"||u.headers.get("Content-Length")==="0")return u.ok?{data:void 0,response:u}:{error:void 0,response:u};if(u.ok)return A==="stream"?{data:u.body,response:u}:{data:await u[A](),response:u};let N=await u.text();try{N=JSON.parse(N)}catch{}return{error:N,response:u}}return{request(a,o,p){return h(o,{...p,method:a.toUpperCase()})},GET(a,o){return h(a,{...o,method:"GET"})},PUT(a,o){return h(a,{...o,method:"PUT"})},POST(a,o){return h(a,{...o,method:"POST"})},DELETE(a,o){return h(a,{...o,method:"DELETE"})},OPTIONS(a,o){return h(a,{...o,method:"OPTIONS"})},HEAD(a,o){return h(a,{...o,method:"HEAD"})},PATCH(a,o){return h(a,{...o,method:"PATCH"})},TRACE(a,o){return h(a,{...o,method:"TRACE"})},use(...a){for(const o of a)if(o){if(typeof o!="object"||!("onRequest"in o||"onResponse"in o||"onError"in o))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");d.push(o)}},eject(...a){for(const o of a){const p=d.indexOf(o);p!==-1&&d.splice(p,1)}}}}function I(e,n,t){if(n==null)return"";if(typeof n=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?n:encodeURIComponent(n)}`}function P(e,n,t){if(!n||typeof n!="object")return"";const s=[],r={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const f in n)s.push(f,t.allowReserved===!0?n[f]:encodeURIComponent(n[f]));const c=s.join(",");switch(t.style){case"form":return`${e}=${c}`;case"label":return`.${c}`;case"matrix":return`;${e}=${c}`;default:return c}}for(const c in n){const f=t.style==="deepObject"?`${e}[${c}]`:c;s.push(I(f,n[c],t))}const i=s.join(r);return t.style==="label"||t.style==="matrix"?`${r}${i}`:i}function F(e,n,t){if(!Array.isArray(n))return"";if(t.explode===!1){const i={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",c=(t.allowReserved===!0?n:n.map(f=>encodeURIComponent(f))).join(i);switch(t.style){case"simple":return c;case"label":return`.${c}`;case"matrix":return`;${e}=${c}`;default:return`${e}=${c}`}}const s={simple:",",label:".",matrix:";"}[t.style]||"&",r=[];for(const i of n)t.style==="simple"||t.style==="label"?r.push(t.allowReserved===!0?i:encodeURIComponent(i)):r.push(I(e,i,t));return t.style==="label"||t.style==="matrix"?`${s}${r.join(s)}`:r.join(s)}function H(e){return function(t){const s=[];if(t&&typeof t=="object")for(const r in t){const i=t[r];if(i!=null){if(Array.isArray(i)){if(i.length===0)continue;s.push(F(r,i,{style:"form",explode:!0,...e==null?void 0:e.array,allowReserved:(e==null?void 0:e.allowReserved)||!1}));continue}if(typeof i=="object"){s.push(P(r,i,{style:"deepObject",explode:!0,...e==null?void 0:e.object,allowReserved:(e==null?void 0:e.allowReserved)||!1}));continue}s.push(I(r,i,e))}}return s.join("&")}}function ee(e,n){let t=e;for(const s of e.match(X)??[]){let r=s.substring(1,s.length-1),i=!1,c="simple";if(r.endsWith("*")&&(i=!0,r=r.substring(0,r.length-1)),r.startsWith(".")?(c="label",r=r.substring(1)):r.startsWith(";")&&(c="matrix",r=r.substring(1)),!n||n[r]===void 0||n[r]===null)continue;const f=n[r];if(Array.isArray(f)){t=t.replace(s,F(r,f,{style:c,explode:i}));continue}if(typeof f=="object"){t=t.replace(s,P(r,f,{style:c,explode:i}));continue}if(c==="matrix"){t=t.replace(s,`;${I(r,f)}`);continue}t=t.replace(s,c==="label"?`.${encodeURIComponent(f)}`:encodeURIComponent(f))}return t}function te(e,n){return e instanceof FormData?e:n&&(n.get instanceof Function?n.get("Content-Type")??n.get("content-type"):n["Content-Type"]??n["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function re(e,n){var r;let t=`${n.baseUrl}${e}`;(r=n.params)!=null&&r.path&&(t=ee(t,n.params.path));let s=n.querySerializer(n.params.query??{});return s.startsWith("?")&&(s=s.substring(1)),s&&(t+=`?${s}`),t}function L(...e){const n=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const s=t instanceof Headers?t.entries():Object.entries(t);for(const[r,i]of s)if(i===null)n.delete(r);else if(Array.isArray(i))for(const c of i)n.append(r,c);else i!==void 0&&n.set(r,i)}return n}function _(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const ne={baseUrl:"http://localhost:3200"},se={development:{baseUrl:"http://localhost:3200"},staging:{baseUrl:"https://api.staging.dismissible.io"},production:{baseUrl:"https://api.dismissible.io"}},ie=()=>se["production"]||ne,B=(e,n,t)=>{try{const s=`${n}_${e}`,r=localStorage.getItem(s);if(!r)return null;const{data:i,timestamp:c}=JSON.parse(r);return t&&Date.now()-c>t?(localStorage.removeItem(s),null):i}catch{return null}},M=(e,n,t)=>{try{const s=`${t}_${e}`,r={data:n,timestamp:Date.now()};localStorage.setItem(s,JSON.stringify(r))}catch(s){console.warn("Failed to cache dismissible item:",s)}},W=(e,n)=>{try{const t=`${n}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},oe=ie(),J=Z({baseUrl:oe.baseUrl}),ae="dismissible",G=(e,n={})=>{const{initialData:t,enableCache:s=!0,cachePrefix:r=ae,cacheExpiration:i}=n,c=E.useRef({enableCache:s,cachePrefix:r,cacheExpiration:i}),f=E.useRef(e),[v,d]=E.useState(!1),[h,a]=E.useState(null),[o,p]=E.useState(()=>{if(t)return t;if(s){const l=B(e,r,i);if(l)return l}}),R=E.useCallback(async()=>{if(s){const l=B(e,r,i);if(l!=null&&l.dismissedAt){p(l),d(!1);return}}d(!0),a(null);try{const{data:l,error:b}=await J.GET("/v1/dismissible/{itemId}",{params:{path:{itemId:e}}});if(b)throw new Error(b.error.message||"Failed to fetch dismissible item");p(l.data),s&&l.data&&M(e,l.data,r)}catch(l){a(l instanceof Error?l:new Error("Unknown error occurred"))}finally{d(!1)}},[e,s,r,i]);E.useEffect(()=>{f.current!==e?(f.current=e,R()):t||R()},[e,t]),E.useEffect(()=>{const l=c.current;(l.enableCache!==s||l.cachePrefix!==r||l.cacheExpiration!==i)&&(l.cachePrefix!==r&&W(e,l.cachePrefix),!s&&l.enableCache&&W(e,r),c.current={enableCache:s,cachePrefix:r,cacheExpiration:i},R())},[s,r,i,e]);const $=E.useCallback(async()=>{a(null);try{const{data:l,error:b}=await J.DELETE("/v1/dismissible/{itemId}",{params:{path:{itemId:e}}});if(b)throw new Error(b.error.message||"Failed to dismiss item");p(l.data),s&&l.data&&M(e,l.data,r)}catch(l){throw a(l instanceof Error?l:new Error("Failed to dismiss item")),l}},[e,s,r]);return{dismissedOn:(o==null?void 0:o.dismissedAt)??null,dismiss:$,isLoading:v,error:h,item:o}},le=()=>g.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),ce=({error:e})=>g.jsxs("div",{className:"dismissible-error",role:"alert",children:["Error loading dismissible item: ",e.message]}),fe=({id:e,onDismiss:n,ariaLabel:t})=>g.jsx("button",{id:e,className:"dismissible-button",onClick:n,"aria-label":t,type:"button",children:"×"}),ue=({id:e,children:n,onDismiss:t,LoadingComponent:s=le,ErrorComponent:r=ce,DismissButtonComponent:i=fe,enableCache:c,cachePrefix:f,cacheExpiration:v})=>{const{dismissedOn:d,isLoading:h,error:a,dismiss:o}=G(e,{enableCache:c,cachePrefix:f,cacheExpiration:v}),[p,R]=E.useState(!1),$=async()=>{R(!0);try{await o(),t==null||t()}catch{R(!1)}};return h&&s?g.jsx(s,{id:e}):h&&!s?null:a&&r?g.jsx(r,{id:e,error:a}):d||p?null:g.jsxs("div",{className:"dismissible-container",children:[g.jsx("div",{className:"dismissible-content",children:n}),i?g.jsx(i,{id:e,onDismiss:$,ariaLabel:`Dismiss ${e}`}):null]})},de="0.1.0";w.Dismissible=ue,w.VERSION=de,w.useDismissibleItem=G,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+(function(m,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],w):(m=typeof globalThis<"u"?globalThis:m||self,w(m.DismissibleClient={},m.React.jsxRuntime,m.React))})(this,function(m,w,h){"use strict";const Z=/\{[^{}]+\}/g,ee=()=>{var e,r;return typeof process=="object"&&Number.parseInt((r=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:r.substring(0,2))>=18&&process.versions.undici};function te(){return Math.random().toString(36).slice(2,11)}function re(e){let{baseUrl:r="",Request:t=globalThis.Request,fetch:n=globalThis.fetch,querySerializer:s,bodySerializer:o,headers:i,requestInitExt:u=void 0,...d}={...e};u=ee()?u:void 0,r=B(r);const b=[];async function p(l,c){const{baseUrl:v,fetch:S=n,Request:j=t,headers:I,params:C={},parseAs:D="json",querySerializer:$,bodySerializer:a=o??ne,body:E,...T}=c||{};let P=r;v&&(P=B(v)??r);let k=typeof s=="function"?s:M(s);$&&(k=typeof $=="function"?$:M({...typeof s=="object"?s:{},...$}));const F=E===void 0?void 0:a(E,_(i,I,C.header)),pe=_(F===void 0||F instanceof FormData?{}:{"Content-Type":"application/json"},i,I,C.header),ge={redirect:"follow",...d,...T,body:F,headers:pe};let O,x,R=new t(ie(l,{baseUrl:P,params:C,querySerializer:k}),ge),f;for(const g in T)g in R||(R[g]=T[g]);if(b.length){O=te(),x=Object.freeze({baseUrl:P,fetch:S,parseAs:D,querySerializer:k,bodySerializer:a});for(const g of b)if(g&&typeof g=="object"&&typeof g.onRequest=="function"){const y=await g.onRequest({request:R,schemaPath:l,params:C,options:x,id:O});if(y)if(y instanceof t)R=y;else if(y instanceof Response){f=y;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!f){try{f=await S(R,u)}catch(g){let y=g;if(b.length)for(let A=b.length-1;A>=0;A--){const z=b[A];if(z&&typeof z=="object"&&typeof z.onError=="function"){const U=await z.onError({request:R,error:y,schemaPath:l,params:C,options:x,id:O});if(U){if(U instanceof Response){y=void 0,f=U;break}if(U instanceof Error){y=U;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(y)throw y}if(b.length)for(let g=b.length-1;g>=0;g--){const y=b[g];if(y&&typeof y=="object"&&typeof y.onResponse=="function"){const A=await y.onResponse({request:R,response:f,schemaPath:l,params:C,options:x,id:O});if(A){if(!(A instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");f=A}}}}if(f.status===204||R.method==="HEAD"||f.headers.get("Content-Length")==="0")return f.ok?{data:void 0,response:f}:{error:void 0,response:f};if(f.ok)return D==="stream"?{data:f.body,response:f}:{data:await f[D](),response:f};let N=await f.text();try{N=JSON.parse(N)}catch{}return{error:N,response:f}}return{request(l,c,v){return p(c,{...v,method:l.toUpperCase()})},GET(l,c){return p(l,{...c,method:"GET"})},PUT(l,c){return p(l,{...c,method:"PUT"})},POST(l,c){return p(l,{...c,method:"POST"})},DELETE(l,c){return p(l,{...c,method:"DELETE"})},OPTIONS(l,c){return p(l,{...c,method:"OPTIONS"})},HEAD(l,c){return p(l,{...c,method:"HEAD"})},PATCH(l,c){return p(l,{...c,method:"PATCH"})},TRACE(l,c){return p(l,{...c,method:"TRACE"})},use(...l){for(const c of l)if(c){if(typeof c!="object"||!("onRequest"in c||"onResponse"in c||"onError"in c))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");b.push(c)}},eject(...l){for(const c of l){const v=b.indexOf(c);v!==-1&&b.splice(v,1)}}}}function q(e,r,t){if(r==null)return"";if(typeof r=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?r:encodeURIComponent(r)}`}function L(e,r,t){if(!r||typeof r!="object")return"";const n=[],s={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const u in r)n.push(u,t.allowReserved===!0?r[u]:encodeURIComponent(r[u]));const i=n.join(",");switch(t.style){case"form":return`${e}=${i}`;case"label":return`.${i}`;case"matrix":return`;${e}=${i}`;default:return i}}for(const i in r){const u=t.style==="deepObject"?`${e}[${i}]`:i;n.push(q(u,r[i],t))}const o=n.join(s);return t.style==="label"||t.style==="matrix"?`${s}${o}`:o}function J(e,r,t){if(!Array.isArray(r))return"";if(t.explode===!1){const o={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",i=(t.allowReserved===!0?r:r.map(u=>encodeURIComponent(u))).join(o);switch(t.style){case"simple":return i;case"label":return`.${i}`;case"matrix":return`;${e}=${i}`;default:return`${e}=${i}`}}const n={simple:",",label:".",matrix:";"}[t.style]||"&",s=[];for(const o of r)t.style==="simple"||t.style==="label"?s.push(t.allowReserved===!0?o:encodeURIComponent(o)):s.push(q(e,o,t));return t.style==="label"||t.style==="matrix"?`${n}${s.join(n)}`:s.join(n)}function M(e){return function(t){const n=[];if(t&&typeof t=="object")for(const s in t){const o=t[s];if(o!=null){if(Array.isArray(o)){if(o.length===0)continue;n.push(J(s,o,{style:"form",explode:!0,...e==null?void 0:e.array,allowReserved:(e==null?void 0:e.allowReserved)||!1}));continue}if(typeof o=="object"){n.push(L(s,o,{style:"deepObject",explode:!0,...e==null?void 0:e.object,allowReserved:(e==null?void 0:e.allowReserved)||!1}));continue}n.push(q(s,o,e))}}return n.join("&")}}function se(e,r){let t=e;for(const n of e.match(Z)??[]){let s=n.substring(1,n.length-1),o=!1,i="simple";if(s.endsWith("*")&&(o=!0,s=s.substring(0,s.length-1)),s.startsWith(".")?(i="label",s=s.substring(1)):s.startsWith(";")&&(i="matrix",s=s.substring(1)),!r||r[s]===void 0||r[s]===null)continue;const u=r[s];if(Array.isArray(u)){t=t.replace(n,J(s,u,{style:i,explode:o}));continue}if(typeof u=="object"){t=t.replace(n,L(s,u,{style:i,explode:o}));continue}if(i==="matrix"){t=t.replace(n,`;${q(s,u)}`);continue}t=t.replace(n,i==="label"?`.${encodeURIComponent(u)}`:encodeURIComponent(u))}return t}function ne(e,r){return e instanceof FormData?e:r&&(r.get instanceof Function?r.get("Content-Type")??r.get("content-type"):r["Content-Type"]??r["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function ie(e,r){var s;let t=`${r.baseUrl}${e}`;(s=r.params)!=null&&s.path&&(t=se(t,r.params.path));let n=r.querySerializer(r.params.query??{});return n.startsWith("?")&&(n=n.substring(1)),n&&(t+=`?${n}`),t}function _(...e){const r=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const n=t instanceof Headers?t.entries():Object.entries(t);for(const[s,o]of n)if(o===null)r.delete(s);else if(Array.isArray(o))for(const i of o)r.append(s,i);else o!==void 0&&r.set(s,o)}return r}function B(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const oe={baseUrl:"http://localhost:3200"},ae={development:{baseUrl:"http://localhost:3200"},staging:{baseUrl:"https://api.staging.dismissible.io"},production:{baseUrl:"https://api.dismissible.io"}},le=()=>ae["production"]||oe,W=(e,r,t)=>{try{const n=`${r}_${e}`,s=localStorage.getItem(n);if(!s)return null;const{data:o,timestamp:i}=JSON.parse(s);return t&&Date.now()-i>t?(localStorage.removeItem(n),null):o}catch{return null}},V=(e,r,t)=>{try{const n=`${t}_${e}`,s={data:r,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(s))}catch(n){console.warn("Failed to cache dismissible item:",n)}},G=(e,r)=>{try{const t=`${r}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},H=h.createContext(null),K=()=>h.useContext(H),ce="dismissible",Q=(e,r={})=>{const{initialData:t,enableCache:n=!0,cachePrefix:s=ce,cacheExpiration:o}=r,i=K(),u=h.useMemo(()=>{const a=le(),E=(i==null?void 0:i.baseUrl)||a.baseUrl,T=(i==null?void 0:i.getAuthHeaders())||{};return re({baseUrl:E,headers:{...T}})},[i]),d=h.useMemo(()=>!!(i!=null&&i.jwt)?`${e}-auth`:e,[e,i==null?void 0:i.jwt]),b=h.useRef({enableCache:n,cachePrefix:s,cacheExpiration:o}),p=h.useRef(e),l=h.useRef(d),[c,v]=h.useState(!1),[S,j]=h.useState(null),[I,C]=h.useState(()=>{if(t)return t;if(n){const a=W(d,s,o);if(a)return a}}),D=h.useCallback(async()=>{if(n){const a=W(d,s,o);if(a!=null&&a.dismissedAt){C(a),v(!1);return}}v(!0),j(null);try{const{data:a,error:E}=await u.GET("/v1/dismissible/{itemId}",{params:{path:{itemId:e}}});if(E)throw new Error(E.error.message||"Failed to fetch dismissible item");C(a.data),n&&a.data&&V(d,a.data,s)}catch(a){j(a instanceof Error?a:new Error("Unknown error occurred"))}finally{v(!1)}},[e,d,n,s,o,u]);h.useEffect(()=>{const a=p.current!==e,E=l.current!==d;a||E?(p.current=e,l.current=d,D()):t||D()},[e,d,t]),h.useEffect(()=>{const a=b.current;(a.enableCache!==n||a.cachePrefix!==s||a.cacheExpiration!==o)&&(a.cachePrefix!==s&&G(d,a.cachePrefix),!n&&a.enableCache&&G(d,s),b.current={enableCache:n,cachePrefix:s,cacheExpiration:o},D())},[n,s,o,d]);const $=h.useCallback(async()=>{j(null);try{const{data:a,error:E}=await u.DELETE("/v1/dismissible/{itemId}",{params:{path:{itemId:e}}});if(E)throw new Error(E.error.message||"Failed to dismiss item");C(a.data),n&&a.data&&V(d,a.data,s)}catch(a){throw j(a instanceof Error?a:new Error("Failed to dismiss item")),a}},[d,n,s,u]);return{dismissedOn:(I==null?void 0:I.dismissedAt)??null,dismiss:$,isLoading:c,error:S,item:I}},ue=()=>w.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),fe=({error:e})=>w.jsxs("div",{className:"dismissible-error",role:"alert",children:["Error loading dismissible item: ",e.message]}),de=({id:e,onDismiss:r,ariaLabel:t})=>w.jsx("button",{id:e,className:"dismissible-button",onClick:r,"aria-label":t,type:"button",children:"×"}),me=({id:e,children:r,onDismiss:t,LoadingComponent:n=ue,ErrorComponent:s=fe,DismissButtonComponent:o=de,enableCache:i,cachePrefix:u,cacheExpiration:d})=>{const{dismissedOn:b,isLoading:p,error:l,dismiss:c}=Q(e,{enableCache:i,cachePrefix:u,cacheExpiration:d}),[v,S]=h.useState(!1),j=async()=>{S(!0);try{await c(),t==null||t()}catch{S(!1)}};return p&&n?w.jsx(n,{id:e}):p&&!n?null:l&&s?w.jsx(s,{id:e,error:l}):b||v?null:w.jsxs("div",{className:"dismissible-container",children:[w.jsx("div",{className:"dismissible-content",children:r}),o?w.jsx(o,{id:e,onDismiss:j,ariaLabel:`Dismiss ${e}`}):null]})},X=e=>{if(typeof e=="function")try{return e()}catch(r){console.warn("Failed to resolve JWT from function:",r);return}return e},Y=e=>{const r=X(e);return r?{Authorization:`Bearer ${r}`}:{}},he=e=>{const r=e.split(".");return r.length===3&&r.every(t=>t.length>0)},be=({jwt:e,baseUrl:r,children:t})=>{const n=h.useMemo(()=>({jwt:e,baseUrl:r,getAuthHeaders:()=>Y(e)}),[e,r]);return w.jsx(H.Provider,{value:n,children:t})},ye="0.1.0";m.Dismissible=me,m.DismissibleContext=H,m.DismissibleProvider=be,m.VERSION=ye,m.getAuthHeaders=Y,m.isValidJwtFormat=he,m.resolveJwt=X,m.useDismissibleContext=K,m.useDismissibleItem=Q,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/dist/root.d.ts

@@ -5,4 +5,8 @@
  */
 export * from './components/Dismissible';
 export * from './hooks/useDismissibleItem';
+export * from './contexts/DismissibleContext';
+export * from './contexts/DismissibleProvider';
+export * from './types/dismissible.types';
+export * from './utils/auth.utils';
 export declare const VERSION = "0.1.0";

package/dist/types/dismissible.types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TypeScript types for the Dismissible Provider system
+ */
+/**
+ * JWT token can be either a static string or a function that returns a string
+ */
+export type JwtToken = string | (() => string);
+/**
+ * Configuration options for the DismissibleProvider
+ */
+export interface DismissibleProviderProps {
+    /** JWT token for authentication - can be static string or function */
+    jwt?: JwtToken;
+    /** Base URL for API requests - overrides default configuration */
+    baseUrl?: string;
+    /** Child components */
+    children: React.ReactNode;
+}
+/**
+ * Context value provided by DismissibleProvider
+ */
+export interface DismissibleContextValue {
+    /** JWT token for authentication */
+    jwt?: JwtToken;
+    /** Base URL for API requests */
+    baseUrl?: string;
+    /** Helper function to get authentication headers */
+    getAuthHeaders: () => AuthHeaders;
+}
+/**
+ * Authentication headers type
+ */
+export interface AuthHeaders {
+    Authorization?: string;
+    [key: string]: string | undefined;
+}

package/dist/utils/auth.utils.d.ts

@@ -0,0 +1,19 @@
+import { JwtToken, AuthHeaders } from '../types/dismissible.types';
+/**
+ * Resolves a JWT token from either a static string or a function
+ * @param jwt - The JWT token (string or function)
+ * @returns The resolved JWT token or undefined
+ */
+export declare const resolveJwt: (jwt: JwtToken | undefined) => string | undefined;
+/**
+ * Creates authentication headers from a JWT token
+ * @param jwt - The JWT token (string or function)
+ * @returns Headers object with Authorization header if JWT is available
+ */
+export declare const getAuthHeaders: (jwt?: JwtToken) => AuthHeaders;
+/**
+ * Validates that a JWT token is properly formatted
+ * @param token - The JWT token to validate
+ * @returns True if token appears to be a valid JWT format
+ */
+export declare const isValidJwtFormat: (token: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dismissible/react-client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "dist",
@@ -11,9 +11,9 @@
   "types": "./dist/root.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/root.d.ts",
       "import": "./dist/dismissible-client.es.js",
-      "require": "./dist/dismissible-client.umd.js",
-      "types": "./dist/root.d.ts"
+      "require": "./dist/dismissible-client.umd.js"
     }
   },
   "scripts": {

package/dist/utils/msw-toggle.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-interface MSWContextType {
-    isMSWEnabled: boolean;
-    toggleMSW: (enabled: boolean) => void;
-}
-export declare const useMSW: () => MSWContextType;
-interface MSWProviderProps {
-    children: React.ReactNode;
-    initialEnabled?: boolean;
-}
-export declare const MSWProvider: React.FC<MSWProviderProps>;
-export declare const MSWStatus: React.FC;
-export {};