@civic/auth 0.6.0-beta.3 → 0.6.1-beta.1

package/dist/vanillajs/ui/LoadingComponents.d.ts

@@ -0,0 +1,51 @@
+/**
+ * UI Components for Civic Auth Vanilla JS implementation
+ * Converted from React components to vanilla DOM elements
+ */
+export interface ShimmerLoaderOptions {
+    backgroundColor?: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+}
+/**
+ * Creates a horizontal shimmer loader element (SVG-based)
+ * Equivalent to the SVGLoading component from React implementation
+ */
+export declare function createShimmerLoader(options?: ShimmerLoaderOptions): HTMLElement;
+/**
+ * Creates a shimmer loader for iframe loading states
+ * Positioned to center within an iframe container
+ */
+export declare function createIframeShimmerLoader(backgroundColor?: string, maxWidth?: string): HTMLElement;
+/**
+ * Creates a simple horizontal skeleton loader (CSS-based alternative)
+ * Lighter weight alternative to SVG shimmer
+ */
+export declare function createSkeletonLoader(options?: ShimmerLoaderOptions): HTMLElement;
+/**
+ * Creates a button content loader that hides content and shows a skeleton
+ * Equivalent to ButtonContentOrLoader from React implementation
+ */
+export declare function createButtonContentLoader(content: string | HTMLElement): {
+    container: HTMLElement;
+    showLoader: () => void;
+    hideLoader: () => void;
+    setContent: (newContent: string | HTMLElement) => void;
+};
+/**
+ * Creates a close icon (X) SVG element
+ * Equivalent to the CloseIcon component from React implementation
+ */
+export declare function createCloseIcon(): SVGElement;
+/**
+ * Creates a close button for modal iframes
+ * Positioned absolutely in the top-right corner
+ */
+export declare function createCloseButton(onClose: () => void): HTMLButtonElement;
+/**
+ * Utility function to remove all civic auth loading styles from the document
+ * Useful for cleanup
+ */
+export declare function cleanupLoadingStyles(): void;
+//# sourceMappingURL=LoadingComponents.d.ts.map

package/dist/vanillajs/ui/LoadingComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingComponents.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/ui/LoadingComponents.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA2BH,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,oBAAyB,GACjC,WAAW,CAmIb;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,eAAe,SAAY,EAC3B,QAAQ,CAAC,EAAE,MAAM,GAChB,WAAW,CAoCb;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,oBAAyB,GACjC,WAAW,CAqCb;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG;IACxE,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;CACxD,CA0EA;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,UAAU,CA8B5C;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,iBAAiB,CAwCxE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C"}

package/dist/vanillajs/ui/LoadingComponents.js

@@ -0,0 +1,363 @@
+/**
+ * UI Components for Civic Auth Vanilla JS implementation
+ * Converted from React components to vanilla DOM elements
+ */
+/**
+ * Utility function to set multiple styles on an element using a key-value object
+ */
+function setStyles(element, styles) {
+    Object.entries(styles).forEach(([property, value]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- CSSStyleDeclaration has read-only properties that prevent proper typing
+        element.style[property] = value;
+    });
+}
+/**
+ * Utility function to set multiple attributes on an element using a key-value object
+ */
+function setAttributes(element, attributes) {
+    Object.entries(attributes).forEach(([name, value]) => {
+        element.setAttribute(name, value);
+    });
+}
+/**
+ * Creates a horizontal shimmer loader element (SVG-based)
+ * Equivalent to the SVGLoading component from React implementation
+ */
+export function createShimmerLoader(options = {}) {
+    const { backgroundColor = "#ffffff", width = "100%", height = "40px", borderRadius = "0.5rem", } = options;
+    // Create container div
+    const container = document.createElement("div");
+    setStyles(container, {
+        position: "absolute",
+        top: "-6px",
+        left: "0",
+        borderRadius,
+        backgroundColor,
+        width,
+        height,
+        opacity: "1",
+    });
+    setAttributes(container, {
+        class: "civic-auth-shimmer-loader",
+    });
+    // Add CSS animation keyframes
+    const style = document.createElement("style");
+    style.textContent = `
+    @keyframes civic-shimmer {
+      0% {
+        transform: translate(-328px, 0);
+      }
+      100% {
+        transform: translate(328px, 0);
+      }
+    }
+  `;
+    // Only add the style if it doesn't already exist
+    if (!document.querySelector("style[data-civic-shimmer]")) {
+        style.setAttribute("data-civic-shimmer", "true");
+        document.head.appendChild(style);
+    }
+    // Create SVG element
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    setAttributes(svg, {
+        "shape-rendering": "geometricPrecision",
+        "text-rendering": "geometricPrecision",
+        viewBox: "0 0 324 28",
+        height: "40",
+        width: "100%",
+        class: "civic-auth-svg-loading",
+    });
+    setStyles(svg, {
+        position: "absolute",
+        top: "-6px",
+        left: "0",
+        borderRadius,
+        backgroundColor,
+    });
+    // Create gradient definition
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+    setAttributes(gradient, {
+        id: `civic-shimmer-gradient-${Date.now()}`,
+        x2: "320",
+        y1: "15",
+        y2: "15",
+        gradientUnits: "userSpaceOnUse",
+    });
+    // Create gradient stops
+    const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+    setAttributes(stop1, {
+        offset: "0",
+        "stop-color": backgroundColor,
+    });
+    const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+    setAttributes(stop2, {
+        offset: ".511",
+        "stop-color": "#9A9DA6",
+    });
+    const stop3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+    setAttributes(stop3, {
+        offset: "1",
+        "stop-color": backgroundColor,
+    });
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    // Create background rectangle
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    setAttributes(rect, {
+        id: "civic-shimmer-rect",
+        fill: backgroundColor,
+        d: "M0 0h328v28H0z",
+    });
+    // Create shimmer path
+    const shimmer = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    setAttributes(shimmer, {
+        id: "civic-shimmer-path",
+        fill: `url(#${gradient.getAttribute("id")})`,
+        d: "M0 -2h328v34H0z",
+        transform: "translate(-328)",
+    });
+    setStyles(shimmer, {
+        animation: "1s linear infinite both civic-shimmer",
+    });
+    // Assemble SVG
+    svg.appendChild(defs);
+    svg.appendChild(rect);
+    svg.appendChild(shimmer);
+    // Add SVG to container
+    container.appendChild(svg);
+    return container;
+}
+/**
+ * Creates a shimmer loader for iframe loading states
+ * Positioned to center within an iframe container
+ */
+export function createIframeShimmerLoader(backgroundColor = "#ffffff", maxWidth) {
+    const wrapper = document.createElement("div");
+    const wrapperStyles = {
+        width: "100%",
+        height: "26px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        borderRadius: "13px",
+        overflow: "hidden",
+    };
+    // Add max-width if specified
+    if (maxWidth) {
+        wrapperStyles.maxWidth = maxWidth;
+    }
+    setStyles(wrapper, wrapperStyles);
+    setAttributes(wrapper, {
+        "data-testid": "iframe-shimmer-loader",
+        class: "civic-auth-iframe-shimmer-wrapper",
+    });
+    const shimmerLoader = createShimmerLoader({
+        backgroundColor,
+        width: "100%",
+        height: "26px",
+        borderRadius: "13px",
+    });
+    wrapper.appendChild(shimmerLoader);
+    return wrapper;
+}
+/**
+ * Creates a simple horizontal skeleton loader (CSS-based alternative)
+ * Lighter weight alternative to SVG shimmer
+ */
+export function createSkeletonLoader(options = {}) {
+    const { backgroundColor = "#f0f0f0", width = "100%", height = "20px", borderRadius = "4px", } = options;
+    const skeleton = document.createElement("div");
+    setStyles(skeleton, {
+        width,
+        height,
+        background: `linear-gradient(90deg, ${backgroundColor} 25%, #e0e0e0 50%, ${backgroundColor} 75%)`,
+        backgroundSize: "200% 100%",
+        animation: "civic-skeleton-shimmer 1.5s infinite",
+        borderRadius,
+    });
+    setAttributes(skeleton, {
+        class: "civic-auth-skeleton-loader",
+    });
+    // Add CSS animation keyframes for skeleton
+    const style = document.createElement("style");
+    style.textContent = `
+    @keyframes civic-skeleton-shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+  `;
+    // Only add the style if it doesn't already exist
+    if (!document.querySelector("style[data-civic-skeleton]")) {
+        style.setAttribute("data-civic-skeleton", "true");
+        document.head.appendChild(style);
+    }
+    return skeleton;
+}
+/**
+ * Creates a button content loader that hides content and shows a skeleton
+ * Equivalent to ButtonContentOrLoader from React implementation
+ */
+export function createButtonContentLoader(content) {
+    const container = document.createElement("div");
+    setStyles(container, {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    });
+    setAttributes(container, {
+        class: "civic-auth-button-content-loader",
+    });
+    // Content span
+    const contentSpan = document.createElement("span");
+    setStyles(contentSpan, {
+        visibility: "visible",
+        whiteSpace: "nowrap",
+    });
+    setAttributes(contentSpan, {
+        class: "civic-auth-button-content",
+    });
+    if (typeof content === "string") {
+        contentSpan.textContent = content;
+    }
+    else {
+        contentSpan.appendChild(content);
+    }
+    // Loader span (hidden by default)
+    const loaderSpan = document.createElement("span");
+    setStyles(loaderSpan, {
+        position: "absolute",
+        display: "none",
+        justifyContent: "center",
+        alignItems: "center",
+        top: "0",
+        left: "0",
+        right: "0",
+        bottom: "0",
+    });
+    setAttributes(loaderSpan, {
+        class: "civic-auth-button-loader",
+    });
+    // Create skeleton loader for button
+    const skeletonLoader = createSkeletonLoader({
+        width: "70%",
+        height: "14px",
+        borderRadius: "7px",
+    });
+    loaderSpan.appendChild(skeletonLoader);
+    container.appendChild(contentSpan);
+    container.appendChild(loaderSpan);
+    return {
+        container,
+        showLoader: () => {
+            contentSpan.style.visibility = "hidden";
+            loaderSpan.style.display = "flex";
+        },
+        hideLoader: () => {
+            contentSpan.style.visibility = "visible";
+            loaderSpan.style.display = "none";
+        },
+        setContent: (newContent) => {
+            contentSpan.innerHTML = "";
+            if (typeof newContent === "string") {
+                contentSpan.textContent = newContent;
+            }
+            else {
+                contentSpan.appendChild(newContent);
+            }
+        },
+    };
+}
+/**
+ * Creates a close icon (X) SVG element
+ * Equivalent to the CloseIcon component from React implementation
+ */
+export function createCloseIcon() {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    setAttributes(svg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "lucide lucide-x",
+    });
+    // Create the X paths
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    setAttributes(path1, {
+        d: "M18 6 6 18",
+    });
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    setAttributes(path2, {
+        d: "m6 6 12 12",
+    });
+    svg.appendChild(path1);
+    svg.appendChild(path2);
+    return svg;
+}
+/**
+ * Creates a close button for modal iframes
+ * Positioned absolutely in the top-right corner
+ */
+export function createCloseButton(onClose) {
+    const button = document.createElement("button");
+    setStyles(button, {
+        position: "absolute",
+        right: "0.6rem",
+        top: "0.6rem",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        backgroundColor: "transparent",
+        padding: "0.25rem",
+        color: "#9ca3af",
+        zIndex: "100",
+        opacity: "0",
+        transition: "opacity 50ms ease",
+    });
+    setAttributes(button, {
+        type: "button",
+        "aria-label": "Close",
+    });
+    // Add hover effect
+    button.addEventListener("mouseenter", () => {
+        button.style.opacity = "0.8";
+    });
+    button.addEventListener("mouseleave", () => {
+        button.style.opacity = "1";
+    });
+    // Add the close icon
+    const closeIcon = createCloseIcon();
+    button.appendChild(closeIcon);
+    // Add click handler
+    button.addEventListener("click", onClose);
+    return button;
+}
+/**
+ * Utility function to remove all civic auth loading styles from the document
+ * Useful for cleanup
+ */
+export function cleanupLoadingStyles() {
+    const shimmerStyle = document.querySelector("style[data-civic-shimmer]");
+    const skeletonStyle = document.querySelector("style[data-civic-skeleton]");
+    if (shimmerStyle) {
+        shimmerStyle.remove();
+    }
+    if (skeletonStyle) {
+        skeletonStyle.remove();
+    }
+}
+//# sourceMappingURL=LoadingComponents.js.map

package/dist/vanillajs/ui/LoadingComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingComponents.js","sourceRoot":"","sources":["../../../src/vanillajs/ui/LoadingComponents.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * UI Components for Civic Auth Vanilla JS implementation\n * Converted from React components to vanilla DOM elements\n */\n\n/**\n * Utility function to set multiple styles on an element using a key-value object\n */\nfunction setStyles(\n  element: HTMLElement | SVGElement,\n  styles: Record<string, string>,\n): void {\n  Object.entries(styles).forEach(([property, value]) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- CSSStyleDeclaration has read-only properties that prevent proper typing\n    (element.style as any)[property] = value;\n  });\n}\n\n/**\n * Utility function to set multiple attributes on an element using a key-value object\n */\nfunction setAttributes(\n  element: Element,\n  attributes: Record<string, string>,\n): void {\n  Object.entries(attributes).forEach(([name, value]) => {\n    element.setAttribute(name, value);\n  });\n}\n\nexport interface ShimmerLoaderOptions {\n  backgroundColor?: string;\n  width?: string;\n  height?: string;\n  borderRadius?: string;\n}\n\n/**\n * Creates a horizontal shimmer loader element (SVG-based)\n * Equivalent to the SVGLoading component from React implementation\n */\nexport function createShimmerLoader(\n  options: ShimmerLoaderOptions = {},\n): HTMLElement {\n  const {\n    backgroundColor = \"#ffffff\",\n    width = \"100%\",\n    height = \"40px\",\n    borderRadius = \"0.5rem\",\n  } = options;\n\n  // Create container div\n  const container = document.createElement(\"div\");\n  setStyles(container, {\n    position: \"absolute\",\n    top: \"-6px\",\n    left: \"0\",\n    borderRadius,\n    backgroundColor,\n    width,\n    height,\n    opacity: \"1\",\n  });\n  setAttributes(container, {\n    class: \"civic-auth-shimmer-loader\",\n  });\n\n  // Add CSS animation keyframes\n  const style = document.createElement(\"style\");\n  style.textContent = `\n    @keyframes civic-shimmer {\n      0% {\n        transform: translate(-328px, 0);\n      }\n      100% {\n        transform: translate(328px, 0);\n      }\n    }\n  `;\n\n  // Only add the style if it doesn't already exist\n  if (!document.querySelector(\"style[data-civic-shimmer]\")) {\n    style.setAttribute(\"data-civic-shimmer\", \"true\");\n    document.head.appendChild(style);\n  }\n\n  // Create SVG element\n  const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n  setAttributes(svg, {\n    \"shape-rendering\": \"geometricPrecision\",\n    \"text-rendering\": \"geometricPrecision\",\n    viewBox: \"0 0 324 28\",\n    height: \"40\",\n    width: \"100%\",\n    class: \"civic-auth-svg-loading\",\n  });\n  setStyles(svg, {\n    position: \"absolute\",\n    top: \"-6px\",\n    left: \"0\",\n    borderRadius,\n    backgroundColor,\n  });\n\n  // Create gradient definition\n  const defs = document.createElementNS(\"http://www.w3.org/2000/svg\", \"defs\");\n  const gradient = document.createElementNS(\n    \"http://www.w3.org/2000/svg\",\n    \"linearGradient\",\n  );\n  setAttributes(gradient, {\n    id: `civic-shimmer-gradient-${Date.now()}`,\n    x2: \"320\",\n    y1: \"15\",\n    y2: \"15\",\n    gradientUnits: \"userSpaceOnUse\",\n  });\n\n  // Create gradient stops\n  const stop1 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n  setAttributes(stop1, {\n    offset: \"0\",\n    \"stop-color\": backgroundColor,\n  });\n\n  const stop2 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n  setAttributes(stop2, {\n    offset: \".511\",\n    \"stop-color\": \"#9A9DA6\",\n  });\n\n  const stop3 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n  setAttributes(stop3, {\n    offset: \"1\",\n    \"stop-color\": backgroundColor,\n  });\n\n  gradient.appendChild(stop1);\n  gradient.appendChild(stop2);\n  gradient.appendChild(stop3);\n  defs.appendChild(gradient);\n\n  // Create background rectangle\n  const rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n  setAttributes(rect, {\n    id: \"civic-shimmer-rect\",\n    fill: backgroundColor,\n    d: \"M0 0h328v28H0z\",\n  });\n\n  // Create shimmer path\n  const shimmer = document.createElementNS(\n    \"http://www.w3.org/2000/svg\",\n    \"path\",\n  );\n  setAttributes(shimmer, {\n    id: \"civic-shimmer-path\",\n    fill: `url(#${gradient.getAttribute(\"id\")})`,\n    d: \"M0 -2h328v34H0z\",\n    transform: \"translate(-328)\",\n  });\n  setStyles(shimmer, {\n    animation: \"1s linear infinite both civic-shimmer\",\n  });\n\n  // Assemble SVG\n  svg.appendChild(defs);\n  svg.appendChild(rect);\n  svg.appendChild(shimmer);\n\n  // Add SVG to container\n  container.appendChild(svg);\n\n  return container;\n}\n\n/**\n * Creates a shimmer loader for iframe loading states\n * Positioned to center within an iframe container\n */\nexport function createIframeShimmerLoader(\n  backgroundColor = \"#ffffff\",\n  maxWidth?: string,\n): HTMLElement {\n  const wrapper = document.createElement(\"div\");\n  const wrapperStyles: Record<string, string> = {\n    width: \"100%\",\n    height: \"26px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    borderRadius: \"13px\",\n    overflow: \"hidden\",\n  };\n\n  // Add max-width if specified\n  if (maxWidth) {\n    wrapperStyles.maxWidth = maxWidth;\n  }\n\n  setStyles(wrapper, wrapperStyles);\n  setAttributes(wrapper, {\n    \"data-testid\": \"iframe-shimmer-loader\",\n    class: \"civic-auth-iframe-shimmer-wrapper\",\n  });\n\n  const shimmerLoader = createShimmerLoader({\n    backgroundColor,\n    width: \"100%\",\n    height: \"26px\",\n    borderRadius: \"13px\",\n  });\n\n  wrapper.appendChild(shimmerLoader);\n  return wrapper;\n}\n\n/**\n * Creates a simple horizontal skeleton loader (CSS-based alternative)\n * Lighter weight alternative to SVG shimmer\n */\nexport function createSkeletonLoader(\n  options: ShimmerLoaderOptions = {},\n): HTMLElement {\n  const {\n    backgroundColor = \"#f0f0f0\",\n    width = \"100%\",\n    height = \"20px\",\n    borderRadius = \"4px\",\n  } = options;\n\n  const skeleton = document.createElement(\"div\");\n  setStyles(skeleton, {\n    width,\n    height,\n    background: `linear-gradient(90deg, ${backgroundColor} 25%, #e0e0e0 50%, ${backgroundColor} 75%)`,\n    backgroundSize: \"200% 100%\",\n    animation: \"civic-skeleton-shimmer 1.5s infinite\",\n    borderRadius,\n  });\n  setAttributes(skeleton, {\n    class: \"civic-auth-skeleton-loader\",\n  });\n\n  // Add CSS animation keyframes for skeleton\n  const style = document.createElement(\"style\");\n  style.textContent = `\n    @keyframes civic-skeleton-shimmer {\n      0% { background-position: -200% 0; }\n      100% { background-position: 200% 0; }\n    }\n  `;\n\n  // Only add the style if it doesn't already exist\n  if (!document.querySelector(\"style[data-civic-skeleton]\")) {\n    style.setAttribute(\"data-civic-skeleton\", \"true\");\n    document.head.appendChild(style);\n  }\n\n  return skeleton;\n}\n\n/**\n * Creates a button content loader that hides content and shows a skeleton\n * Equivalent to ButtonContentOrLoader from React implementation\n */\nexport function createButtonContentLoader(content: string | HTMLElement): {\n  container: HTMLElement;\n  showLoader: () => void;\n  hideLoader: () => void;\n  setContent: (newContent: string | HTMLElement) => void;\n} {\n  const container = document.createElement(\"div\");\n  setStyles(container, {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  });\n  setAttributes(container, {\n    class: \"civic-auth-button-content-loader\",\n  });\n\n  // Content span\n  const contentSpan = document.createElement(\"span\");\n  setStyles(contentSpan, {\n    visibility: \"visible\",\n    whiteSpace: \"nowrap\",\n  });\n  setAttributes(contentSpan, {\n    class: \"civic-auth-button-content\",\n  });\n\n  if (typeof content === \"string\") {\n    contentSpan.textContent = content;\n  } else {\n    contentSpan.appendChild(content);\n  }\n\n  // Loader span (hidden by default)\n  const loaderSpan = document.createElement(\"span\");\n  setStyles(loaderSpan, {\n    position: \"absolute\",\n    display: \"none\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    top: \"0\",\n    left: \"0\",\n    right: \"0\",\n    bottom: \"0\",\n  });\n  setAttributes(loaderSpan, {\n    class: \"civic-auth-button-loader\",\n  });\n\n  // Create skeleton loader for button\n  const skeletonLoader = createSkeletonLoader({\n    width: \"70%\",\n    height: \"14px\",\n    borderRadius: \"7px\",\n  });\n  loaderSpan.appendChild(skeletonLoader);\n\n  container.appendChild(contentSpan);\n  container.appendChild(loaderSpan);\n\n  return {\n    container,\n    showLoader: () => {\n      contentSpan.style.visibility = \"hidden\";\n      loaderSpan.style.display = \"flex\";\n    },\n    hideLoader: () => {\n      contentSpan.style.visibility = \"visible\";\n      loaderSpan.style.display = \"none\";\n    },\n    setContent: (newContent: string | HTMLElement) => {\n      contentSpan.innerHTML = \"\";\n      if (typeof newContent === \"string\") {\n        contentSpan.textContent = newContent;\n      } else {\n        contentSpan.appendChild(newContent);\n      }\n    },\n  };\n}\n\n/**\n * Creates a close icon (X) SVG element\n * Equivalent to the CloseIcon component from React implementation\n */\nexport function createCloseIcon(): SVGElement {\n  const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n  setAttributes(svg, {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: \"24\",\n    height: \"24\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    \"stroke-width\": \"2\",\n    \"stroke-linecap\": \"round\",\n    \"stroke-linejoin\": \"round\",\n    class: \"lucide lucide-x\",\n  });\n\n  // Create the X paths\n  const path1 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n  setAttributes(path1, {\n    d: \"M18 6 6 18\",\n  });\n\n  const path2 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n  setAttributes(path2, {\n    d: \"m6 6 12 12\",\n  });\n\n  svg.appendChild(path1);\n  svg.appendChild(path2);\n\n  return svg;\n}\n\n/**\n * Creates a close button for modal iframes\n * Positioned absolutely in the top-right corner\n */\nexport function createCloseButton(onClose: () => void): HTMLButtonElement {\n  const button = document.createElement(\"button\");\n  setStyles(button, {\n    position: \"absolute\",\n    right: \"0.6rem\",\n    top: \"0.6rem\",\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: \"0.25rem\",\n    color: \"#9ca3af\",\n    zIndex: \"100\",\n    opacity: \"0\",\n    transition: \"opacity 50ms ease\",\n  });\n  setAttributes(button, {\n    type: \"button\",\n    \"aria-label\": \"Close\",\n  });\n\n  // Add hover effect\n  button.addEventListener(\"mouseenter\", () => {\n    button.style.opacity = \"0.8\";\n  });\n\n  button.addEventListener(\"mouseleave\", () => {\n    button.style.opacity = \"1\";\n  });\n\n  // Add the close icon\n  const closeIcon = createCloseIcon();\n  button.appendChild(closeIcon);\n\n  // Add click handler\n  button.addEventListener(\"click\", onClose);\n\n  return button;\n}\n\n/**\n * Utility function to remove all civic auth loading styles from the document\n * Useful for cleanup\n */\nexport function cleanupLoadingStyles(): void {\n  const shimmerStyle = document.querySelector(\"style[data-civic-shimmer]\");\n  const skeletonStyle = document.querySelector(\"style[data-civic-skeleton]\");\n\n  if (shimmerStyle) {\n    shimmerStyle.remove();\n  }\n\n  if (skeletonStyle) {\n    skeletonStyle.remove();\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+import type { Endpoints } from "../../types.js";
+interface BuildAuthUrlParams {
+    endpoints: Endpoints;
+    clientId: string;
+    redirectUrl: string;
+    scopes: string[];
+    codeChallenge: string;
+    state: string;
+    prompt?: string;
+}
+export declare function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, }: BuildAuthUrlParams): string;
+export {};
+//# sourceMappingURL=auth-utils.d.ts.map

package/dist/vanillajs/utils/auth-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-utils.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,MAAM,EACN,aAAa,EACb,KAAK,EACL,MAAM,GACP,EAAE,kBAAkB,GAAG,MAAM,CAe7B"}

package/dist/vanillajs/utils/auth-utils.js

@@ -0,0 +1,15 @@
+export function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, }) {
+    const authUrl = new URL(endpoints.auth);
+    authUrl.searchParams.append("client_id", clientId);
+    authUrl.searchParams.append("redirect_uri", redirectUrl);
+    authUrl.searchParams.append("response_type", "code");
+    authUrl.searchParams.append("scope", scopes.join(" "));
+    authUrl.searchParams.append("state", state);
+    authUrl.searchParams.append("code_challenge", codeChallenge);
+    authUrl.searchParams.append("code_challenge_method", "S256");
+    if (prompt) {
+        authUrl.searchParams.append("prompt", prompt);
+    }
+    return authUrl.toString();
+}
+//# sourceMappingURL=auth-utils.js.map

package/dist/vanillajs/utils/auth-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-utils.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,MAAM,EACN,aAAa,EACb,KAAK,EACL,MAAM,GACa;IACnB,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACrD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;IAC7D,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IAE7D,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC;AAC5B,CAAC","sourcesContent":["import type { Endpoints } from \"../../types.js\";\n\ninterface BuildAuthUrlParams {\n  endpoints: Endpoints;\n  clientId: string;\n  redirectUrl: string;\n  scopes: string[];\n  codeChallenge: string;\n  state: string;\n  prompt?: string;\n}\n\nexport function buildAuthUrl({\n  endpoints,\n  clientId,\n  redirectUrl,\n  scopes,\n  codeChallenge,\n  state,\n  prompt,\n}: BuildAuthUrlParams): string {\n  const authUrl = new URL(endpoints.auth);\n  authUrl.searchParams.append(\"client_id\", clientId);\n  authUrl.searchParams.append(\"redirect_uri\", redirectUrl);\n  authUrl.searchParams.append(\"response_type\", \"code\");\n  authUrl.searchParams.append(\"scope\", scopes.join(\" \"));\n  authUrl.searchParams.append(\"state\", state);\n  authUrl.searchParams.append(\"code_challenge\", codeChallenge);\n  authUrl.searchParams.append(\"code_challenge_method\", \"S256\");\n\n  if (prompt) {\n    authUrl.searchParams.append(\"prompt\", prompt);\n  }\n\n  return authUrl.toString();\n}\n"]}

package/dist/vanillajs/utils/logger.d.ts

@@ -0,0 +1,29 @@
+import debug from "debug";
+export declare const loggers: {
+    auth: debug.Debugger;
+    api: debug.Debugger;
+    storage: debug.Debugger;
+    session: debug.Debugger;
+    events: debug.Debugger;
+    utils: debug.Debugger;
+    iframe: debug.Debugger;
+};
+export declare const createLogger: (namespace: string) => {
+    debug: (message: string, ...args: unknown[]) => void;
+    info: (message: string, ...args: unknown[]) => void;
+    warn: (message: string, ...args: unknown[]) => void;
+    error: (message: string, ...args: unknown[]) => void;
+};
+export declare const configureLogging: (config: {
+    enabled: boolean;
+    namespace?: string;
+    level?: "debug" | "info" | "warn" | "error";
+}) => void;
+export declare const setCurrentLogger: (logger: ReturnType<typeof createLogger>) => void;
+export declare const getCurrentLogger: () => {
+    debug: (message: string, ...args: unknown[]) => void;
+    info: (message: string, ...args: unknown[]) => void;
+    warn: (message: string, ...args: unknown[]) => void;
+    error: (message: string, ...args: unknown[]) => void;
+};
+//# sourceMappingURL=logger.d.ts.map

package/dist/vanillajs/utils/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAGF,eAAO,MAAM,YAAY,cAAe,MAAM;qBAGzB,MAAM,WAAW,OAAO,EAAE;oBAC3B,MAAM,WAAW,OAAO,EAAE;oBAC1B,MAAM,WAAW,OAAO,EAAE;qBACzB,MAAM,WAAW,OAAO,EAAE;CAE9C,CAAC;AAGF,eAAO,MAAM,gBAAgB,WAAY;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C,SAwBA,CAAC;AAMF,eAAO,MAAM,gBAAgB,WAAY,UAAU,CAAC,OAAO,YAAY,CAAC,SAEvE,CAAC;AAGF,eAAO,MAAM,gBAAgB;qBA/CR,MAAM,WAAW,OAAO,EAAE;oBAC3B,MAAM,WAAW,OAAO,EAAE;oBAC1B,MAAM,WAAW,OAAO,EAAE;qBACzB,MAAM,WAAW,OAAO,EAAE;CAkD9C,CAAC"}

package/dist/vanillajs/utils/logger.js

@@ -0,0 +1,62 @@
+import debug from "debug";
+// Create namespaced loggers for different components
+export const loggers = {
+    auth: debug("civic:auth"),
+    api: debug("civic:auth:api"),
+    storage: debug("civic:auth:storage"),
+    session: debug("civic:auth:session"),
+    events: debug("civic:auth:events"),
+    utils: debug("civic:auth:utils"),
+    iframe: debug("civic:auth:iframe"),
+};
+// Helper function to create a logger with a specific namespace
+export const createLogger = (namespace) => {
+    const logger = debug(`civic:auth:${namespace}`);
+    return {
+        debug: (message, ...args) => logger(message, ...args),
+        info: (message, ...args) => logger(message, ...args),
+        warn: (message, ...args) => logger(message, ...args),
+        error: (message, ...args) => logger(message, ...args),
+    };
+};
+// Function to configure logging based on config
+export const configureLogging = (config) => {
+    if (typeof window === "undefined")
+        return;
+    if (config.enabled) {
+        // Enable specific namespace if provided, otherwise enable all civic:auth namespaces
+        const namespace = config.namespace
+            ? `civic:auth:${config.namespace}`
+            : "civic:auth:*";
+        debug.enable(namespace);
+        // Override debug's default log function to ensure it works in the browser
+        const originalLog = debug.log;
+        debug.log = (...args) => {
+            if (typeof console !== "undefined") {
+                console.log(...args);
+            }
+            if (originalLog) {
+                originalLog.apply(debug, args);
+            }
+        };
+    }
+    else {
+        // Disable all debug logs
+        debug.disable();
+    }
+};
+// Global variable to store the current logger instance
+let currentLogger = null;
+// Function to set the current logger instance
+export const setCurrentLogger = (logger) => {
+    currentLogger = logger;
+};
+// Function to get the current logger instance
+export const getCurrentLogger = () => {
+    if (!currentLogger) {
+        // Create a default logger if none is set
+        currentLogger = createLogger("default");
+    }
+    return currentLogger;
+};
+//# sourceMappingURL=logger.js.map

package/dist/vanillajs/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,qDAAqD;AACrD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACpC,OAAO,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACpC,MAAM,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,mBAAmB,CAAC;CACnC,CAAC;AAEF,+DAA+D;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,EAAE;IAChD,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,SAAS,EAAE,CAAC,CAAC;IAChD,OAAO;QACL,KAAK,EAAE,CAAC,OAAe,EAAE,GAAG,IAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QACxE,IAAI,EAAE,CAAC,OAAe,EAAE,GAAG,IAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QACvE,IAAI,EAAE,CAAC,OAAe,EAAE,GAAG,IAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QACvE,KAAK,EAAE,CAAC,OAAe,EAAE,GAAG,IAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;KACzE,CAAC;AACJ,CAAC,CAAC;AAEF,gDAAgD;AAChD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAIhC,EAAE,EAAE;IACH,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IAE1C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;QACnB,oFAAoF;QACpF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS;YAChC,CAAC,CAAC,cAAc,MAAM,CAAC,SAAS,EAAE;YAClC,CAAC,CAAC,cAAc,CAAC;QACnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAExB,0EAA0E;QAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE;YACtB,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE,CAAC;gBACnC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;YACvB,CAAC;YACD,IAAI,WAAW,EAAE,CAAC;gBAChB,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,yBAAyB;QACzB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;AACH,CAAC,CAAC;AAEF,uDAAuD;AACvD,IAAI,aAAa,GAA2C,IAAI,CAAC;AAEjE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAuC,EAAE,EAAE;IAC1E,aAAa,GAAG,MAAM,CAAC;AACzB,CAAC,CAAC;AAEF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,yCAAyC;QACzC,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC","sourcesContent":["import debug from \"debug\";\n\n// Create namespaced loggers for different components\nexport const loggers = {\n  auth: debug(\"civic:auth\"),\n  api: debug(\"civic:auth:api\"),\n  storage: debug(\"civic:auth:storage\"),\n  session: debug(\"civic:auth:session\"),\n  events: debug(\"civic:auth:events\"),\n  utils: debug(\"civic:auth:utils\"),\n  iframe: debug(\"civic:auth:iframe\"),\n};\n\n// Helper function to create a logger with a specific namespace\nexport const createLogger = (namespace: string) => {\n  const logger = debug(`civic:auth:${namespace}`);\n  return {\n    debug: (message: string, ...args: unknown[]) => logger(message, ...args),\n    info: (message: string, ...args: unknown[]) => logger(message, ...args),\n    warn: (message: string, ...args: unknown[]) => logger(message, ...args),\n    error: (message: string, ...args: unknown[]) => logger(message, ...args),\n  };\n};\n\n// Function to configure logging based on config\nexport const configureLogging = (config: {\n  enabled: boolean;\n  namespace?: string;\n  level?: \"debug\" | \"info\" | \"warn\" | \"error\";\n}) => {\n  if (typeof window === \"undefined\") return;\n\n  if (config.enabled) {\n    // Enable specific namespace if provided, otherwise enable all civic:auth namespaces\n    const namespace = config.namespace\n      ? `civic:auth:${config.namespace}`\n      : \"civic:auth:*\";\n    debug.enable(namespace);\n\n    // Override debug's default log function to ensure it works in the browser\n    const originalLog = debug.log;\n    debug.log = (...args) => {\n      if (typeof console !== \"undefined\") {\n        console.log(...args);\n      }\n      if (originalLog) {\n        originalLog.apply(debug, args);\n      }\n    };\n  } else {\n    // Disable all debug logs\n    debug.disable();\n  }\n};\n\n// Global variable to store the current logger instance\nlet currentLogger: ReturnType<typeof createLogger> | null = null;\n\n// Function to set the current logger instance\nexport const setCurrentLogger = (logger: ReturnType<typeof createLogger>) => {\n  currentLogger = logger;\n};\n\n// Function to get the current logger instance\nexport const getCurrentLogger = () => {\n  if (!currentLogger) {\n    // Create a default logger if none is set\n    currentLogger = createLogger(\"default\");\n  }\n  return currentLogger;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civic/auth",
-  "version": "0.6.0-beta.3",
+  "version": "0.6.1-beta.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",