@flowsta/login-button 0.1.0 → 0.1.2

package/dist/FlowstaLoginButton.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Flowsta Login Button - React Component
+ */
+import type { FlowstaLoginButtonProps } from './types.js';
+/**
+ * Flowsta Login Button component for React
+ *
+ * @example
+ * ```tsx
+ * <FlowstaLoginButton
+ *   clientId="your-client-id"
+ *   redirectUri="https://yourapp.com/callback"
+ *   scopes={['profile', 'email']}
+ *   variant="dark-pill"
+ *   onSuccess={(data) => {
+ *     console.log('Authorization code:', data.code);
+ *   }}
+ *   onError={(error) => {
+ *     console.error('Login error:', error);
+ *   }}
+ * />
+ * ```
+ */
+export declare function FlowstaLoginButton({ clientId, redirectUri, scopes, variant, loginUrl, className, disabled, onSuccess, onError, onClick, children, }: FlowstaLoginButtonProps): JSX.Element;
+export default FlowstaLoginButton;
+//# sourceMappingURL=FlowstaLoginButton.d.ts.map

package/dist/FlowstaLoginButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowstaLoginButton.d.ts","sourceRoot":"","sources":["../src/FlowstaLoginButton.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAI1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,WAAW,EACX,MAA4C,EAC5C,OAAqB,EACrB,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAkEvC;AAED,eAAe,kBAAkB,CAAC"}

package/dist/FlowstaLoginButtonQwik.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Flowsta Login Button - Qwik Component
+ * @jsxImportSource @builder.io/qwik
+ */
+import type { FlowstaLoginConfig, FlowstaLoginSuccess, FlowstaLoginError } from './types.js';
+export interface FlowstaLoginButtonQwikProps extends FlowstaLoginConfig {
+    /** Callback when login succeeds */
+    onSuccess$?: (data: FlowstaLoginSuccess) => void;
+    /** Callback when login fails */
+    onError$?: (error: FlowstaLoginError) => void;
+    /** Callback when button is clicked (before redirect) */
+    onClick$?: () => void;
+    /** Custom CSS class name */
+    class?: string;
+}
+/**
+ * Flowsta Login Button component for Qwik
+ *
+ * @example
+ * ```tsx
+ * import { FlowstaLoginButton } from '@flowsta/login-button/qwik';
+ *
+ * export default component$(() => {
+ *   return (
+ *     <FlowstaLoginButton
+ *       clientId="your-client-id"
+ *       redirectUri="https://yourapp.com/callback"
+ *       scopes={['profile', 'email']}
+ *       variant="dark-pill"
+ *       onSuccess$={(data) => {
+ *         console.log('Authorization code:', data.code);
+ *       }}
+ *       onError$={(error) => {
+ *         console.error('Login error:', error);
+ *       }}
+ *     />
+ *   );
+ * });
+ * ```
+ */
+export declare const FlowstaLoginButton: import("@builder.io/qwik").Component<FlowstaLoginButtonQwikProps>;
+export default FlowstaLoginButton;
+//# sourceMappingURL=FlowstaLoginButtonQwik.d.ts.map

package/dist/FlowstaLoginButtonQwik.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowstaLoginButtonQwik.d.ts","sourceRoot":"","sources":["../src/FlowstaLoginButtonQwik.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG7F,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;IACrE,mCAAmC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEjD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE9C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,kBAAkB,mEAkF7B,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/dist/FlowstaLoginButtonVanilla.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Flowsta Login Button - Vanilla JavaScript
+ */
+import type { FlowstaLoginConfig, FlowstaLoginSuccess, FlowstaLoginError } from './types.js';
+export interface FlowstaLoginButtonVanillaOptions extends FlowstaLoginConfig {
+    /** Callback when login succeeds */
+    onSuccess?: (data: FlowstaLoginSuccess) => void;
+    /** Callback when login fails */
+    onError?: (error: FlowstaLoginError) => void;
+    /** Callback when button is clicked (before redirect) */
+    onClick?: () => void;
+}
+/**
+ * Create a Flowsta login button element
+ *
+ * @example
+ * ```javascript
+ * import { createFlowstaLoginButton } from '@flowsta/login-button/vanilla';
+ *
+ * const button = createFlowstaLoginButton({
+ *   clientId: 'your-client-id',
+ *   redirectUri: 'https://yourapp.com/callback',
+ *   scopes: ['profile', 'email'],
+ *   variant: 'dark-pill',
+ *   onSuccess: (data) => {
+ *     console.log('Authorization code:', data.code);
+ *   },
+ *   onError: (error) => {
+ *     console.error('Login error:', error);
+ *   }
+ * });
+ *
+ * document.getElementById('login-container').appendChild(button);
+ * ```
+ */
+export declare function createFlowstaLoginButton(options: FlowstaLoginButtonVanillaOptions): HTMLButtonElement;
+/**
+ * Initialize Flowsta login button in a container element
+ *
+ * @example
+ * ```javascript
+ * import { initFlowstaLoginButton } from '@flowsta/login-button/vanilla';
+ *
+ * initFlowstaLoginButton('#login-button-container', {
+ *   clientId: 'your-client-id',
+ *   redirectUri: 'https://yourapp.com/callback',
+ *   scopes: ['profile', 'email'],
+ *   variant: 'dark-pill'
+ * });
+ * ```
+ */
+export declare function initFlowstaLoginButton(selector: string | HTMLElement, options: FlowstaLoginButtonVanillaOptions): HTMLButtonElement;
+declare const _default: {
+    createFlowstaLoginButton: typeof createFlowstaLoginButton;
+    initFlowstaLoginButton: typeof initFlowstaLoginButton;
+};
+export default _default;
+//# sourceMappingURL=FlowstaLoginButtonVanilla.d.ts.map

package/dist/FlowstaLoginButtonVanilla.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowstaLoginButtonVanilla.d.ts","sourceRoot":"","sources":["../src/FlowstaLoginButtonVanilla.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG7F,MAAM,WAAW,gCAAiC,SAAQ,kBAAkB;IAC1E,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhD,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE7C,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,gCAAgC,GACxC,iBAAiB,CAoFnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAC9B,OAAO,EAAE,gCAAgC,GACxC,iBAAiB,CAanB;;;;;AAED,wBAGE"}

package/dist/buttonAssets.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Flowsta Login Button Assets
+ *
+ * Industry-standard approach: Ship assets with npm package
+ * - Works automatically with all modern bundlers (Vite, Webpack, Parcel, etc.)
+ * - Zero configuration required
+ * - Falls back to CDN if needed
+ *
+ * Usage:
+ * ```tsx
+ * import { getButtonUrl } from '@flowsta/login-button';
+ *
+ * <img src={getButtonUrl('dark', 'pill')} alt="Sign in with Flowsta" />
+ * ```
+ */
+export type ButtonTheme = 'dark' | 'light' | 'neutral';
+export type ButtonShape = 'pill' | 'rectangle';
+/**
+ * Get button asset URL
+ *
+ * @param theme - 'dark' (for light backgrounds), 'light' (for dark backgrounds), or 'neutral' (for any background)
+ * @param shape - 'pill' (rounded) or 'rectangle' (square corners)
+ * @returns URL to button SVG
+ */
+export declare function getButtonUrl(theme: ButtonTheme, shape: ButtonShape): string;
+/**
+ * Pre-made button URLs for all combinations
+ */
+export declare const BUTTON_URLS: {
+    readonly dark: {
+        readonly pill: string;
+        readonly rectangle: string;
+    };
+    readonly light: {
+        readonly pill: string;
+        readonly rectangle: string;
+    };
+    readonly neutral: {
+        readonly pill: string;
+        readonly rectangle: string;
+    };
+};
+//# sourceMappingURL=buttonAssets.d.ts.map

package/dist/buttonAssets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonAssets.d.ts","sourceRoot":"","sources":["../src/buttonAssets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAE/C;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,CAW3E;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAad,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @flowsta/login-button
+ *
+ * Login with Flowsta button components for React, Vue, and vanilla JavaScript
+ *
+ * @packageDocumentation
+ */
+export * from './utils/pkce.js';
+export * from './utils/state.js';
+export * from './utils/oauth.js';
+export * from './types.js';
+export * from './buttonAssets.js';
+export { buildAuthorizationUrl, handleCallback, parseCallbackUrl } from './utils/oauth.js';
+export { generatePKCEPair, generateCodeVerifier, generateCodeChallenge } from './utils/pkce.js';
+export { generateState, validateState } from './utils/state.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAG3B,cAAc,mBAAmB,CAAC;AAGlC,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b as i, a as g, g as o, c, d as p, h as u, p as d, r as f, f as h, s as C, e as b, v } from "./oauth-DEOZXwxb.js";
+import { b as i, g, a as o, c, d as p, h as u, p as d, r as f, e as h, s as C, f as b, v } from "./oauth-DieOmaFh.js";
 function e(a, r) {
   const t = `flowsta_signin_web_${a}_${r}.svg`;
   try {

package/dist/{oauth-DEOZXwxb.js → oauth-DieOmaFh.js}

@@ -85,13 +85,13 @@ function S() {
   return h(window.location.href);
 }
 export {
-  c as a,
+  i as a,
   m as b,
   l as c,
   u as d,
-  f as e,
-  _ as f,
-  i as g,
+  _ as e,
+  f,
+  c as g,
   S as h,
   h as p,
   v as r,

package/dist/qwik.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @flowsta/login-button/qwik
+ *
+ * Qwik components for Flowsta login
+ *
+ * @packageDocumentation
+ */
+export { FlowstaLoginButton, default } from './FlowstaLoginButtonQwik.js';
+export type { FlowstaLoginButtonQwikProps } from './FlowstaLoginButtonQwik.js';
+export * from './utils/oauth.js';
+export * from './types.js';
+//# sourceMappingURL=qwik.d.ts.map

package/dist/qwik.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qwik.d.ts","sourceRoot":"","sources":["../src/qwik.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAG/E,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/qwik.js

@@ -1,59 +1,59 @@
-import { jsx as r } from "@builder.io/qwik/jsx-runtime";
+import { jsx as n } from "@builder.io/qwik/jsx-runtime";
 import { component$ as m, useSignal as h, $ as w } from "@builder.io/qwik";
-import { b } from "./oauth-DEOZXwxb.js";
-import { h as C, p as F } from "./oauth-DEOZXwxb.js";
-const $ = m((n) => {
+import { b } from "./oauth-DieOmaFh.js";
+import { h as S, p as F } from "./oauth-DieOmaFh.js";
+const C = m((e) => {
   const {
-    clientId: s,
-    redirectUri: l,
-    scopes: c = ["profile"],
-    variant: d = "dark-pill",
-    loginUrl: u,
-    className: g = "",
-    disabled: e = !1,
-    onSuccess$: v,
-    onError$: o,
-    onClick$: i
-  } = n, a = h(!1), f = w(async () => {
-    if (!(e || a.value)) {
+    clientId: r,
+    redirectUri: i,
+    scopes: l = ["profile"],
+    variant: s = "dark-pill",
+    loginUrl: c,
+    className: d = "",
+    disabled: t = !1,
+    onSuccess$: k,
+    onError$: u,
+    onClick$: g
+  } = e, a = h(!1), f = w(async () => {
+    if (!(t || a.value)) {
       a.value = !0;
       try {
-        i == null || i();
-        const { url: t } = await b({
-          clientId: s,
-          redirectUri: l,
-          scopes: c,
-          loginUrl: u
+        g?.();
+        const { url: o } = await b({
+          clientId: r,
+          redirectUri: i,
+          scopes: l,
+          loginUrl: c
         });
-        typeof window < "u" && (window.location.href = t);
-      } catch (t) {
-        a.value = !1, o == null || o({
+        typeof window < "u" && (window.location.href = o);
+      } catch (o) {
+        a.value = !1, u?.({
           error: "authorization_failed",
-          errorDescription: t instanceof Error ? t.message : "Unknown error"
+          errorDescription: o instanceof Error ? o.message : "Unknown error"
         });
       }
     }
-  }), p = (t) => `/node_modules/@flowsta/login-button/assets/svg/${`flowsta_signin_web_${t.replace("-", "_")}`}.svg`;
-  return /* @__PURE__ */ r(
+  }), p = (o) => `/node_modules/@flowsta/login-button/assets/svg/${`flowsta_signin_web_${o.replace("-", "_")}`}.svg`;
+  return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       onClick$: f,
-      disabled: e || a.value,
-      class: `flowsta-login-button ${g || n.class || ""}`,
+      disabled: t || a.value,
+      class: `flowsta-login-button ${d || e.class || ""}`,
       "aria-label": "Sign in with Flowsta",
       style: {
         border: "none",
         background: "transparent",
         padding: "0",
-        cursor: e || a.value ? "not-allowed" : "pointer",
-        opacity: e || a.value ? "0.6" : "1",
+        cursor: t || a.value ? "not-allowed" : "pointer",
+        opacity: t || a.value ? "0.6" : "1",
         transition: "opacity 0.2s ease"
       },
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ n(
         "img",
         {
-          src: p(d),
+          src: p(s),
           alt: "Sign in with Flowsta",
           width: 175,
           height: 40,
@@ -68,9 +68,9 @@ const $ = m((n) => {
   );
 });
 export {
-  $ as FlowstaLoginButton,
+  C as FlowstaLoginButton,
   b as buildAuthorizationUrl,
-  $ as default,
-  C as handleCallback,
+  C as default,
+  S as handleCallback,
   F as parseCallbackUrl
 };

package/dist/react.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @flowsta/login-button/react
+ *
+ * React components for Flowsta login
+ *
+ * @packageDocumentation
+ */
+export { FlowstaLoginButton, default } from './FlowstaLoginButton.js';
+export type { FlowstaLoginButtonProps } from './types.js';
+export * from './utils/oauth.js';
+export * from './types.js';
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/react.js

@@ -1,42 +1,42 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as u } from "react/jsx-runtime";
 import { useState as b, useCallback as y } from "react";
-import { b as k } from "./oauth-DEOZXwxb.js";
-import { h as A, p as D } from "./oauth-DEOZXwxb.js";
+import { b as k } from "./oauth-DieOmaFh.js";
+import { h as j, p as A } from "./oauth-DieOmaFh.js";
 import { getButtonUrl as x } from "./index.js";
-function B({
-  clientId: s,
-  redirectUri: i,
-  scopes: r = ["openid", "email", "display_name"],
-  variant: c = "dark-pill",
-  loginUrl: l,
+function z({
+  clientId: r,
+  redirectUri: n,
+  scopes: e = ["openid", "email", "display_name"],
+  variant: p = "dark-pill",
+  loginUrl: i,
   className: h = "",
   disabled: t = !1,
-  onSuccess: S,
-  onError: o,
-  onClick: e,
+  onSuccess: C,
+  onError: s,
+  onClick: l,
   children: m
 }) {
-  const [a, u] = b(!1), f = y(async () => {
+  const [a, c] = b(!1), f = y(async () => {
     if (!(t || a)) {
-      u(!0);
+      c(!0);
       try {
-        e == null || e();
-        const { url: n } = await k({
-          clientId: s,
-          redirectUri: i,
-          scopes: r,
-          loginUrl: l
+        l?.();
+        const { url: o } = await k({
+          clientId: r,
+          redirectUri: n,
+          scopes: e,
+          loginUrl: i
         });
-        window.location.href = n;
-      } catch (n) {
-        u(!1), o == null || o({
+        window.location.href = o;
+      } catch (o) {
+        c(!1), s?.({
           error: "authorization_failed",
-          errorDescription: n instanceof Error ? n.message : "Unknown error"
+          errorDescription: o instanceof Error ? o.message : "Unknown error"
         });
       }
     }
-  }, [s, i, r, l, t, a, e, o]), [g, d] = c.split("-"), w = x(g, d);
-  return /* @__PURE__ */ p(
+  }, [r, n, e, i, t, a, l, s]), [g, d] = p.split("-"), w = x(g, d);
+  return /* @__PURE__ */ u(
     "button",
     {
       type: "button",
@@ -52,7 +52,7 @@ function B({
         opacity: t || a ? 0.6 : 1,
         transition: "opacity 0.2s ease"
       },
-      children: m || /* @__PURE__ */ p(
+      children: m || /* @__PURE__ */ u(
         "img",
         {
           src: w,
@@ -70,9 +70,9 @@ function B({
   );
 }
 export {
-  B as FlowstaLoginButton,
+  z as FlowstaLoginButton,
   k as buildAuthorizationUrl,
-  B as default,
-  A as handleCallback,
-  D as parseCallbackUrl
+  z as default,
+  j as handleCallback,
+  A as parseCallbackUrl
 };

package/dist/types.d.ts

@@ -0,0 +1,100 @@
+/**
+ * TypeScript types for Flowsta Login Button
+ */
+/**
+ * Available button variants
+ */
+export type ButtonVariant = 'dark-pill' | 'dark-rectangle' | 'light-pill' | 'light-rectangle' | 'neutral-pill' | 'neutral-rectangle';
+/**
+ * OAuth scopes for Flowsta (granular)
+ * - openid: User ID (sub) - auto-included
+ * - email: Email address and verification status
+ * - display_name: User's display name
+ * - username: User's @username
+ * - did: W3C Decentralized Identifier
+ * - public_key: Holochain agent public key
+ * - profile_picture: User's profile picture
+ */
+export type FlowstaScope = 'openid' | 'email' | 'display_name' | 'username' | 'did' | 'public_key' | 'profile_picture';
+/**
+ * Configuration for the Flowsta login button
+ */
+export interface FlowstaLoginConfig {
+    /** Your Flowsta application client ID (required) */
+    clientId: string;
+    /** The URI to redirect back to after authentication (required) */
+    redirectUri: string;
+    /** OAuth scopes to request (default: ['profile']) */
+    scopes?: FlowstaScope[];
+    /** Button visual variant (default: 'dark-pill') */
+    variant?: ButtonVariant;
+    /** The Flowsta login URL (default: https://login.flowsta.com) */
+    loginUrl?: string;
+    /** Custom CSS class name for the button */
+    className?: string;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+}
+/**
+ * Callback data after successful authentication
+ */
+export interface FlowstaLoginSuccess {
+    /** Authorization code to exchange for access token */
+    code: string;
+    /** State parameter for validation */
+    state: string;
+}
+/**
+ * Error data after failed authentication
+ */
+export interface FlowstaLoginError {
+    /** Error code */
+    error: string;
+    /** Human-readable error description */
+    errorDescription?: string;
+}
+/**
+ * Props for React component
+ */
+export interface FlowstaLoginButtonProps extends FlowstaLoginConfig {
+    /** Callback when login succeeds */
+    onSuccess?: (data: FlowstaLoginSuccess) => void;
+    /** Callback when login fails */
+    onError?: (error: FlowstaLoginError) => void;
+    /** Callback when button is clicked (before redirect) */
+    onClick?: () => void;
+    /** Custom button content (overrides default image) */
+    children?: React.ReactNode;
+}
+/**
+ * Props for Vue component
+ */
+export interface VueFlowstaLoginButtonProps extends FlowstaLoginConfig {
+    /** Custom button content (overrides default image) */
+    customContent?: string;
+}
+/**
+ * Events for Vue component
+ */
+export interface VueFlowstaLoginButtonEvents {
+    /** Emitted when login succeeds */
+    success: (data: FlowstaLoginSuccess) => void;
+    /** Emitted when login fails */
+    error: (error: FlowstaLoginError) => void;
+    /** Emitted when button is clicked (before redirect) */
+    click: () => void;
+}
+/**
+ * Props for Qwik component
+ */
+export interface FlowstaLoginButtonQwikProps extends FlowstaLoginConfig {
+    /** Callback when login succeeds (Qwik QRL) */
+    onSuccess$?: (data: FlowstaLoginSuccess) => void;
+    /** Callback when login fails (Qwik QRL) */
+    onError$?: (error: FlowstaLoginError) => void;
+    /** Callback when button is clicked (before redirect, Qwik QRL) */
+    onClick$?: () => void;
+    /** Custom CSS class name */
+    class?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,iBAAiB,GACjB,cAAc,GACd,mBAAmB,CAAC;AAExB;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GACpB,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,KAAK,GACL,YAAY,GACZ,iBAAiB,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IAEjB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IAEpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IAExB,mDAAmD;IACnD,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IAEb,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhD,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE7C,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,OAAO,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAE7C,+BAA+B;IAC/B,KAAK,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE1C,uDAAuD;IACvD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;IACrE,8CAA8C;IAC9C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEjD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE9C,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/utils/oauth.d.ts

@@ -0,0 +1,50 @@
+/**
+ * OAuth 2.0 utilities for Flowsta authentication
+ */
+export interface OAuthConfig {
+    /** Your Flowsta application client ID */
+    clientId: string;
+    /** The URI to redirect back to after authentication */
+    redirectUri: string;
+    /** OAuth scopes to request (e.g., ['profile', 'email']) */
+    scopes: string[];
+    /** The Flowsta login URL (default: https://login.flowsta.com) */
+    loginUrl?: string;
+}
+export interface AuthorizationUrlResult {
+    /** The complete authorization URL to redirect to */
+    url: string;
+    /** The state parameter (for validation) */
+    state: string;
+    /** The code verifier (store securely for token exchange) */
+    codeVerifier: string;
+}
+/**
+ * Build the OAuth authorization URL with PKCE
+ * @param config - OAuth configuration
+ * @returns Promise resolving to authorization URL and PKCE parameters
+ */
+export declare function buildAuthorizationUrl(config: OAuthConfig): Promise<AuthorizationUrlResult>;
+/**
+ * Parse the OAuth callback URL for authorization code and state
+ * @param callbackUrl - The full callback URL (or search string)
+ * @returns Object with code, state, and any error
+ */
+export declare function parseCallbackUrl(callbackUrl: string): {
+    code?: string;
+    state?: string;
+    error?: string;
+    errorDescription?: string;
+};
+/**
+ * Handle the OAuth callback after user authentication
+ * This should be called on your redirect URI page
+ * @returns Object with authorization code or error
+ */
+export declare function handleCallback(): {
+    code?: string;
+    state?: string;
+    error?: string;
+    errorDescription?: string;
+};
+//# sourceMappingURL=oauth.d.ts.map

package/dist/utils/oauth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth.d.ts","sourceRoot":"","sources":["../../src/utils/oauth.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,oDAAoD;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,WAAW,GAClB,OAAO,CAAC,sBAAsB,CAAC,CA+BjC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAUA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAEA"}

package/dist/utils/pkce.d.ts

@@ -0,0 +1,36 @@
+/**
+ * PKCE (Proof Key for Code Exchange) utilities for OAuth 2.0
+ * RFC 7636: https://tools.ietf.org/html/rfc7636
+ */
+/**
+ * Generate a random code verifier string
+ * Must be 43-128 characters long, using [A-Z][a-z][0-9]-._~
+ */
+export declare function generateCodeVerifier(): string;
+/**
+ * Generate a code challenge from a code verifier using SHA-256
+ * @param verifier - The code verifier string
+ * @returns Promise that resolves to the code challenge
+ */
+export declare function generateCodeChallenge(verifier: string): Promise<string>;
+/**
+ * Generate a PKCE pair (verifier and challenge)
+ * @returns Promise that resolves to { verifier, challenge }
+ */
+export declare function generatePKCEPair(): Promise<{
+    verifier: string;
+    challenge: string;
+}>;
+/**
+ * Store code verifier in session storage
+ * @param verifier - The code verifier to store
+ * @param state - The state parameter for correlation
+ */
+export declare function storeCodeVerifier(verifier: string, state: string): void;
+/**
+ * Retrieve and remove code verifier from session storage
+ * @param state - The state parameter for correlation
+ * @returns The code verifier or null if not found
+ */
+export declare function retrieveCodeVerifier(state: string): string | null;
+//# sourceMappingURL=pkce.d.ts.map

package/dist/utils/pkce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pkce.d.ts","sourceRoot":"","sources":["../../src/utils/pkce.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAI7C;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAK7E;AAeD;;;GAGG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC,CAID;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAMvE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAWjE"}

package/dist/utils/state.d.ts

@@ -0,0 +1,25 @@
+/**
+ * State parameter utilities for OAuth 2.0 CSRF protection
+ */
+/**
+ * Generate a random state parameter
+ * @returns A random base64url encoded string
+ */
+export declare function generateState(): string;
+/**
+ * Store state in session storage
+ * @param state - The state parameter to store
+ */
+export declare function storeState(state: string): void;
+/**
+ * Retrieve and remove state from session storage
+ * @returns The state parameter or null if not found
+ */
+export declare function retrieveState(): string | null;
+/**
+ * Validate that the returned state matches the stored state
+ * @param returnedState - The state returned from OAuth provider
+ * @returns true if states match, false otherwise
+ */
+export declare function validateState(returnedState: string): boolean;
+//# sourceMappingURL=state.d.ts.map

package/dist/utils/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/utils/state.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAItC;AAeD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAM9C;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,MAAM,GAAG,IAAI,CAW7C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAG5D"}

package/dist/vanilla.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @flowsta/login-button/vanilla
+ *
+ * Vanilla JavaScript implementation for Flowsta login
+ *
+ * @packageDocumentation
+ */
+export { createFlowstaLoginButton, initFlowstaLoginButton, default } from './FlowstaLoginButtonVanilla.js';
+export type { FlowstaLoginButtonVanillaOptions } from './FlowstaLoginButtonVanilla.js';
+export * from './utils/oauth.js';
+export * from './utils/pkce.js';
+export * from './utils/state.js';
+export * from './types.js';
+//# sourceMappingURL=vanilla.d.ts.map

package/dist/vanilla.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla.d.ts","sourceRoot":"","sources":["../src/vanilla.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,wBAAwB,EACxB,sBAAsB,EACtB,OAAO,EACR,MAAM,gCAAgC,CAAC;AAExC,YAAY,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAGvF,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/vanilla.js

@@ -1,19 +1,19 @@
-import { b as w } from "./oauth-DEOZXwxb.js";
-import { a as k, g as _, c as E, d as F, h as L, p as U, r as V, f as $, s as x, e as B, v as N } from "./oauth-DEOZXwxb.js";
-function u(e) {
+import { b as w } from "./oauth-DieOmaFh.js";
+import { g as S, a as E, c as _, d as F, h as L, p as U, r as V, e as $, s as x, f as B, v as N } from "./oauth-DieOmaFh.js";
+function c(e) {
   const {
     clientId: s,
     redirectUri: n,
     scopes: r = ["profile"],
-    variant: g = "dark-pill",
-    loginUrl: p,
-    className: f = "",
+    variant: d = "dark-pill",
+    loginUrl: u,
+    className: g = "",
     disabled: o = !1,
     onSuccess: m,
-    onError: l,
-    onClick: c
+    onError: p,
+    onClick: f
   } = e, t = document.createElement("button");
-  t.type = "button", t.className = `flowsta-login-button ${f}`.trim(), t.setAttribute("aria-label", "Sign in with Flowsta"), t.disabled = o, Object.assign(t.style, {
+  t.type = "button", t.className = `flowsta-login-button ${g}`.trim(), t.setAttribute("aria-label", "Sign in with Flowsta"), t.disabled = o, Object.assign(t.style, {
     border: "none",
     background: "transparent",
     padding: "0",
@@ -21,27 +21,27 @@ function u(e) {
     opacity: o ? "0.6" : "1",
     transition: "opacity 0.2s ease"
   });
-  const a = document.createElement("img"), b = `flowsta_signin_web_${g.replace("-", "_")}`;
+  const a = document.createElement("img"), b = `flowsta_signin_web_${d.replace("-", "_")}`;
   a.src = `/node_modules/@flowsta/login-button/assets/svg/${b}.svg`, a.alt = "Sign in with Flowsta", a.width = 175, a.height = 40, Object.assign(a.style, {
     display: "block",
     maxWidth: "100%",
     height: "auto"
   }), t.appendChild(a);
-  let d = !1;
+  let l = !1;
   return t.addEventListener("click", async () => {
-    if (!(t.disabled || d)) {
-      d = !0, t.style.opacity = "0.6", t.style.cursor = "not-allowed";
+    if (!(t.disabled || l)) {
+      l = !0, t.style.opacity = "0.6", t.style.cursor = "not-allowed";
       try {
-        c == null || c();
+        f?.();
         const { url: i } = await w({
           clientId: s,
           redirectUri: n,
           scopes: r,
-          loginUrl: p
+          loginUrl: u
         });
         window.location.href = i;
       } catch (i) {
-        d = !1, t.style.opacity = o ? "0.6" : "1", t.style.cursor = o ? "not-allowed" : "pointer", l == null || l({
+        l = !1, t.style.opacity = o ? "0.6" : "1", t.style.cursor = o ? "not-allowed" : "pointer", p?.({
           error: "authorization_failed",
           errorDescription: i instanceof Error ? i.message : "Unknown error"
         });
@@ -53,20 +53,20 @@ function h(e, s) {
   const n = typeof e == "string" ? document.querySelector(e) : e;
   if (!n)
     throw new Error(`Container not found: ${e}`);
-  const r = u(s);
+  const r = c(s);
   return n.appendChild(r), r;
 }
 const C = {
-  createFlowstaLoginButton: u,
+  createFlowstaLoginButton: c,
   initFlowstaLoginButton: h
 };
 export {
   w as buildAuthorizationUrl,
-  u as createFlowstaLoginButton,
+  c as createFlowstaLoginButton,
   C as default,
-  k as generateCodeChallenge,
-  _ as generateCodeVerifier,
-  E as generatePKCEPair,
+  S as generateCodeChallenge,
+  E as generateCodeVerifier,
+  _ as generatePKCEPair,
   F as generateState,
   L as handleCallback,
   h as initFlowstaLoginButton,

package/dist/vue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @flowsta/login-button/vue
+ *
+ * Vue 3 components for Flowsta login
+ *
+ * @packageDocumentation
+ */
+export { default as FlowstaLoginButton } from './FlowstaLoginButtonVue.vue';
+export type { VueFlowstaLoginButtonProps, VueFlowstaLoginButtonEvents } from './types.js';
+export * from './utils/oauth.js';
+export * from './types.js';
+//# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,YAAY,EAAE,0BAA0B,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAG1F,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as u, ref as m, computed as s, createElementBlock as p, openBlock as g, normalizeStyle as f, normalizeClass as b, renderSlot as h, createElementVNode as w } from "vue";
-import { b as _ } from "./oauth-DEOZXwxb.js";
-import { h as z, p as I } from "./oauth-DEOZXwxb.js";
+import { defineComponent as u, ref as m, computed as s, openBlock as p, createElementBlock as g, normalizeStyle as f, normalizeClass as b, renderSlot as h, createElementVNode as w } from "vue";
+import { b as _ } from "./oauth-DieOmaFh.js";
+import { h as z, p as I } from "./oauth-DieOmaFh.js";
 const v = ["disabled"], k = ["src"], y = /* @__PURE__ */ u({
   __name: "FlowstaLoginButtonVue",
   props: {
@@ -46,7 +46,7 @@ const v = ["disabled"], k = ["src"], y = /* @__PURE__ */ u({
         }
       }
     };
-    return (o, C) => (g(), p("button", {
+    return (o, C) => (p(), g("button", {
       type: "button",
       class: b(["flowsta-login-button", a.className]),
       disabled: a.disabled || t.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsta/login-button",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Login with Flowsta button components for React, Vue, Qwik, and vanilla JavaScript",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +34,7 @@
   ],
   "scripts": {
     "dev": "vite build --watch",
-    "build": "tsc && vite build",
+    "build": "vite build && tsc",
     "test": "echo 'Tests not yet implemented'",
     "prepublishOnly": "npm run build"
   },
@@ -58,9 +58,9 @@
     "directory": "packages/login-button"
   },
   "peerDependencies": {
+    "@builder.io/qwik": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "vue": "^3.0.0",
-    "@builder.io/qwik": "^1.0.0"
+    "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -77,9 +77,10 @@
     "@builder.io/qwik": "^1.9.0",
     "@types/react": "^18.3.3",
     "@vitejs/plugin-vue": "^6.0.1",
+    "happy-dom": "20.5.0",
     "react": "^18.3.1",
     "typescript": "^5.5.4",
-    "vite": "^5.4.2",
+    "vite": "^7.3.1",
     "vue": "^3.4.0"
   },
   "engines": {