@civic/auth 0.8.2 → 0.9.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingComponents.js","sourceRoot":"","sources":["../../../src/vanillajs/ui/LoadingComponents.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,SAAS,SAAS,CAChB,OAAiC,EACjC,MAA8B;IAE9B,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,yIAAyI;QACxI,OAAO,CAAC,KAAa,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,aAAa,CACpB,OAAgB,EAChB,UAAkC;IAElC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC;AASD;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CACjC,UAAgC,EAAE;IAElC,MAAM,EACJ,eAAe,GAAG,SAAS,EAC3B,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,YAAY,GAAG,QAAQ,GACxB,GAAG,OAAO,CAAC;IAEZ,uBAAuB;IACvB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,GAAG;QACT,YAAY;QACZ,eAAe;QACf,KAAK;QACL,MAAM;QACN,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IACH,aAAa,CAAC,SAAS,EAAE;QACvB,KAAK,EAAE,2BAA2B;KACnC,CAAC,CAAC;IAEH,8BAA8B;IAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,WAAW,GAAG;;;;;;;;;GASnB,CAAC;IAEF,iDAAiD;IACjD,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,EAAE,CAAC;QACzD,KAAK,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QACjD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,qBAAqB;IACrB,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAC1E,aAAa,CAAC,GAAG,EAAE;QACjB,iBAAiB,EAAE,oBAAoB;QACvC,gBAAgB,EAAE,oBAAoB;QACtC,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,wBAAwB;KAChC,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,GAAG;QACT,YAAY;QACZ,eAAe;KAChB,CAAC,CAAC;IAEH,6BAA6B;IAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC5E,MAAM,QAAQ,GAAG,QAAQ,CAAC,eAAe,CACvC,4BAA4B,EAC5B,gBAAgB,CACjB,CAAC;IACF,aAAa,CAAC,QAAQ,EAAE;QACtB,EAAE,EAAE,0BAA0B,IAAI,CAAC,GAAG,EAAE,EAAE;QAC1C,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,IAAI;QACR,EAAE,EAAE,IAAI;QACR,aAAa,EAAE,gBAAgB;KAChC,CAAC,CAAC;IAEH,wBAAwB;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC7E,aAAa,CAAC,KAAK,EAAE;QACnB,MAAM,EAAE,GAAG;QACX,YAAY,EAAE,eAAe;KAC9B,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC7E,aAAa,CAAC,KAAK,EAAE;QACnB,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,SAAS;KACxB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC7E,aAAa,CAAC,KAAK,EAAE;QACnB,MAAM,EAAE,GAAG;QACX,YAAY,EAAE,eAAe;KAC9B,CAAC,CAAC;IAEH,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE3B,8BAA8B;IAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC5E,aAAa,CAAC,IAAI,EAAE;QAClB,EAAE,EAAE,oBAAoB;QACxB,IAAI,EAAE,eAAe;QACrB,CAAC,EAAE,gBAAgB;KACpB,CAAC,CAAC;IAEH,sBAAsB;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CACtC,4BAA4B,EAC5B,MAAM,CACP,CAAC;IACF,aAAa,CAAC,OAAO,EAAE;QACrB,EAAE,EAAE,oBAAoB;QACxB,IAAI,EAAE,QAAQ,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG;QAC5C,CAAC,EAAE,iBAAiB;QACpB,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IACH,SAAS,CAAC,OAAO,EAAE;QACjB,SAAS,EAAE,uCAAuC;KACnD,CAAC,CAAC;IAEH,eAAe;IACf,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEzB,uBAAuB;IACvB,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE3B,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CACvC,eAAe,GAAG,SAAS,EAC3B,QAAiB;IAEjB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,aAAa,GAA2B;QAC5C,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;QAClC,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEF,6BAA6B;IAC7B,IAAI,QAAQ,EAAE,CAAC;QACb,aAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACpC,CAAC;IAED,SAAS,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAClC,aAAa,CAAC,OAAO,EAAE;QACrB,aAAa,EAAE,uBAAuB;QACtC,KAAK,EAAE,mCAAmC;KAC3C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,mBAAmB,CAAC;QACxC,eAAe;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;KACrB,CAAC,CAAC;IAEH,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACnC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,UAAgC,EAAE;IAElC,MAAM,EACJ,eAAe,GAAG,SAAS,EAC3B,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,YAAY,GAAG,KAAK,GACrB,GAAG,OAAO,CAAC;IAEZ,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,SAAS,CAAC,QAAQ,EAAE;QAClB,KAAK;QACL,MAAM;QACN,UAAU,EAAE,0BAA0B,eAAe,sBAAsB,eAAe,OAAO;QACjG,cAAc,EAAE,WAAW;QAC3B,SAAS,EAAE,sCAAsC;QACjD,YAAY;KACb,CAAC,CAAC;IACH,aAAa,CAAC,QAAQ,EAAE;QACtB,KAAK,EAAE,4BAA4B;KACpC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,WAAW,GAAG;;;;;GAKnB,CAAC;IAEF,iDAAiD;IACjD,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC1D,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;QAClD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAA6B;IAMrE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAC;IACH,aAAa,CAAC,SAAS,EAAE;QACvB,KAAK,EAAE,kCAAkC;KAC1C,CAAC,CAAC;IAEH,eAAe;IACf,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnD,SAAS,CAAC,WAAW,EAAE;QACrB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;KACrB,CAAC,CAAC;IACH,aAAa,CAAC,WAAW,EAAE;QACzB,KAAK,EAAE,2BAA2B;KACnC,CAAC,CAAC;IAEH,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;IACpC,CAAC;SAAM,CAAC;QACN,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,kCAAkC;IAClC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,SAAS,CAAC,UAAU,EAAE;QACpB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IACH,aAAa,CAAC,UAAU,EAAE;QACxB,KAAK,EAAE,0BAA0B;KAClC,CAAC,CAAC;IAEH,oCAAoC;IACpC,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;KACpB,CAAC,CAAC;IACH,UAAU,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAEvC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAElC,OAAO;QACL,SAAS;QACT,UAAU,EAAE,GAAG,EAAE;YACf,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YACxC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,CAAC;QACD,UAAU,EAAE,GAAG,EAAE;YACf,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;YACzC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,CAAC;QACD,UAAU,EAAE,CAAC,UAAgC,EAAE,EAAE;YAC/C,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;YAC3B,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;gBACnC,WAAW,CAAC,WAAW,GAAG,UAAU,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAC1E,aAAa,CAAC,GAAG,EAAE;QACjB,KAAK,EAAE,4BAA4B;QACnC,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,cAAc;QACtB,cAAc,EAAE,GAAG;QACnB,gBAAgB,EAAE,OAAO;QACzB,iBAAiB,EAAE,OAAO;QAC1B,KAAK,EAAE,iBAAiB;KACzB,CAAC,CAAC;IAEH,qBAAqB;IACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC7E,aAAa,CAAC,KAAK,EAAE;QACnB,CAAC,EAAE,YAAY;KAChB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;IAC7E,aAAa,CAAC,KAAK,EAAE;QACnB,CAAC,EAAE,YAAY;KAChB,CAAC,CAAC;IAEH,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEvB,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAmB;IACnD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,SAAS,CAAC,MAAM,EAAE;QAChB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,QAAQ;QACf,GAAG,EAAE,QAAQ;QACb,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,aAAa;QAC9B,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,mBAAmB;KAChC,CAAC,CAAC;IACH,aAAa,CAAC,MAAM,EAAE;QACpB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,OAAO;KACtB,CAAC,CAAC;IAEH,mBAAmB;IACnB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,qBAAqB;IACrB,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IACpC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAE9B,oBAAoB;IACpB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAE1C,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAClC,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAE3E,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,aAAa,CAAC,MAAM,EAAE,CAAC;IACzB,CAAC;AACH,CAAC","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"]}
+{"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\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: \"flex-end\",\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\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civic/auth",
-  "version": "0.8.2",
+  "version": "0.9.0-beta.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -60,6 +60,7 @@
     "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/debug": "^4.1.12",
+    "@types/express": "^4.17.21",
     "@types/node": "^22.7.4",
     "@types/picomatch": "^3.0.1",
     "@types/react": "18.3.11",
@@ -85,7 +86,8 @@
   },
   "peerDependencies": {
     "next": "^14.2.25 || >=15.2.3",
-    "react": ">=18"
+    "react": ">=18",
+    "express": ">=4.0.0"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -93,6 +95,9 @@
     },
     "react": {
       "optional": false
+    },
+    "express": {
+      "optional": true
     }
   },
   "scripts": {