authfyio-react 0.3.9

package/dist/provider.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { AuthfyioReactClient } from './client.js';
+/**
+ * Default browser-side base URL. Resolves to the same-origin proxy mounted
+ * at `/api/af` (provided by `authfyio-nextjs/proxy`) so cookies set by
+ * the upstream API land on the customer's origin.
+ *
+ * For non-Next setups you can pass `baseUrl="https://api.authfyio.com"`
+ * directly, but you must arrange same-origin cookie scoping yourself.
+ */
+export const DEFAULT_PROVIDER_BASE_URL = '/api/af';
+const Ctx = createContext(null);
+export function AuthfyioProvider(props) {
+    const baseUrl = props.baseUrl ?? DEFAULT_PROVIDER_BASE_URL;
+    // Accept the publishable key via prop *or* env var (Next inlines
+    // NEXT_PUBLIC_* into the bundle at build time).
+    const publishableKey = props.publishableKey ??
+        (typeof process !== 'undefined' ? process.env?.NEXT_PUBLIC_AUTHFYIO_PUBLISHABLE_KEY : undefined);
+    const client = useMemo(() => new AuthfyioReactClient({ baseUrl, publishableKey }), [baseUrl, publishableKey]);
+    // Always start signed-out so the SSR markup matches the client's first
+    // render. `document.cookie` doesn't exist on the server, so reading it in
+    // useState's initializer would diverge between server and client and
+    // trip React's hydration guard. The cookie probe runs in the effect
+    // below, after mount.
+    const [session, setSession] = useState({ status: 'signed_out' });
+    const refreshing = useRef(false);
+    const refresh = async () => {
+        if (refreshing.current)
+            return;
+        refreshing.current = true;
+        try {
+            const next = await client.refresh();
+            if (!next.ok) {
+                setSession({ status: 'signed_out' });
+                return;
+            }
+            setSession({ status: 'signed_in', jwt: next.jwt, claims: next.claims });
+        }
+        finally {
+            refreshing.current = false;
+        }
+    };
+    useEffect(() => {
+        const now = client.getSessionFromCookies();
+        if (now) {
+            setSession({ status: 'signed_in', jwt: now.jwt, claims: now.claims });
+            return;
+        }
+        // No `__session` cookie in the browser — but the long-lived `__client`
+        // cookie may still be valid (it's httpOnly so we can't read it from JS).
+        // Try a refresh once: if it succeeds we recover the session without
+        // forcing the user to re-sign-in. We swallow failures because for
+        // genuinely-signed-out visitors the refresh endpoint returns 401.
+        setSession({ status: 'signed_out' });
+        refresh().catch(() => { });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [client]);
+    useEffect(() => {
+        if (props.autoRefresh === false)
+            return;
+        if (session.status !== 'signed_in')
+            return;
+        const exp = session.claims.exp;
+        if (!exp)
+            return;
+        const skew = props.refreshSkewSeconds ?? 15;
+        const msUntil = Math.max(0, exp * 1000 - Date.now() - skew * 1000);
+        const t = window.setTimeout(() => {
+            refresh().catch(() => { });
+        }, msUntil);
+        return () => window.clearTimeout(t);
+    }, [session, props.autoRefresh, props.refreshSkewSeconds]);
+    const value = useMemo(() => ({ client, session, refresh }), [client, session]);
+    return _jsx(Ctx.Provider, { value: value, children: props.children });
+}
+export function useAuthfyio() {
+    const ctx = useContext(Ctx);
+    if (!ctx)
+        throw new Error('AuthfyioProvider missing');
+    return ctx;
+}
+export function useSession() {
+    return useAuthfyio().session;
+}
+export function useUserId() {
+    const s = useSession();
+    if (s.status !== 'signed_in')
+        return null;
+    return s.claims.sub ?? null;
+}

package/dist/ui/CheckoutButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type CheckoutButtonProps = {
+    planId: string;
+    billingCycle?: 'monthly' | 'annual';
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * One-line button that opens a Stripe Checkout session for a specific plan.
+ * Inherits your app's button styling
+ * if you pass `className`; falls back to a minimal primary button otherwise.
+ */
+export declare function CheckoutButton({ planId, billingCycle, children, className }: CheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckoutButton.d.ts.map

package/dist/ui/CheckoutButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckoutButton.d.ts","sourceRoot":"","sources":["../../src/ui/CheckoutButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,YAAwB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CA+B5G"}

package/dist/ui/CheckoutButton.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCheckout } from '../hooks.js';
+/**
+ * One-line button that opens a Stripe Checkout session for a specific plan.
+ * Inherits your app's button styling
+ * if you pass `className`; falls back to a minimal primary button otherwise.
+ */
+export function CheckoutButton({ planId, billingCycle = 'monthly', children, className }) {
+    const { startCheckout, isLoading } = useCheckout();
+    return (_jsx("button", { type: "button", className: className, disabled: isLoading, onClick: () => startCheckout(planId, billingCycle), style: className
+            ? undefined
+            : {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 40,
+                padding: '0 16px',
+                fontSize: 13.5,
+                fontWeight: 500,
+                color: '#fff',
+                background: 'var(--af-primary, #4f3df0)',
+                border: 0,
+                borderRadius: 10,
+                cursor: isLoading ? 'not-allowed' : 'pointer',
+                fontFamily: 'inherit',
+            }, children: isLoading ? 'Opening checkout…' : children ?? 'Upgrade' }));
+}

package/dist/ui/Control.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Renders children only after the Authfyio provider has hydrated — i.e.
+ * once the cookie has been read and the session state resolved on the
+ * client.
+ */
+export declare function AuthfyioLoaded({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement | null;
+/**
+ * Renders children ONLY while the provider is still hydrating. Useful for
+ * spinners and skeleton placeholders.
+ */
+export declare function AuthfyioLoading({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement | null;
+//# sourceMappingURL=Control.d.ts.map

package/dist/ui/Control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/ui/Control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAMrG;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAKtG"}

package/dist/ui/Control.js

@@ -0,0 +1,33 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+/**
+ * Renders children only after the Authfyio provider has hydrated — i.e.
+ * once the cookie has been read and the session state resolved on the
+ * client.
+ */
+export function AuthfyioLoaded({ children }) {
+    const loaded = useClientMounted();
+    // Throws if provider is missing — which is what we want so callers notice.
+    useAuthfyio();
+    if (!loaded)
+        return null;
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * Renders children ONLY while the provider is still hydrating. Useful for
+ * spinners and skeleton placeholders.
+ */
+export function AuthfyioLoading({ children }) {
+    const loaded = useClientMounted();
+    useAuthfyio();
+    if (loaded)
+        return null;
+    return _jsx(_Fragment, { children: children });
+}
+function useClientMounted() {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return mounted;
+}

package/dist/ui/CreateOrganization.d.ts

@@ -0,0 +1,19 @@
+export type CreateOrganizationProps = {
+    /** Redirect target after the org is created. Default: reload. */
+    afterCreateOrganizationUrl?: string;
+    /** Fires with the new org id BEFORE the redirect. */
+    onCreated?: (orgId: string) => void;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Self-service organization creation form. Auto-generates a URL-friendly
+ * slug from the name field unless the user overrides it. The role-set
+ * applied to the new org comes from the tenant's `defaultRoleSet`
+ * configured under Configure → Organization settings — there's no UI
+ * choice here because picking it per-org would be more confusion than
+ * value (the dashboard owner already decided which set is canonical).
+ * Creator's own role is always 'owner'.
+ */
+export declare function CreateOrganization({ afterCreateOrganizationUrl, onCreated, title, subtitle, }: CreateOrganizationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateOrganization.d.ts.map

package/dist/ui/CreateOrganization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateOrganization.d.ts","sourceRoot":"","sources":["../../src/ui/CreateOrganization.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,uBAAuB,GAAG;IACpC,iEAAiE;IACjE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,qDAAqD;IACrD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,0BAA0B,EAC1B,SAAS,EACT,KAAmC,EACnC,QAAkF,GACnF,EAAE,uBAAuB,2CA4FzB"}

package/dist/ui/CreateOrganization.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Self-service organization creation form. Auto-generates a URL-friendly
+ * slug from the name field unless the user overrides it. The role-set
+ * applied to the new org comes from the tenant's `defaultRoleSet`
+ * configured under Configure → Organization settings — there's no UI
+ * choice here because picking it per-org would be more confusion than
+ * value (the dashboard owner already decided which set is canonical).
+ * Creator's own role is always 'owner'.
+ */
+export function CreateOrganization({ afterCreateOrganizationUrl, onCreated, title = 'Create a new organization', subtitle = "Organizations are how you collaborate with teammates inside your app.", }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const [name, setName] = useState('');
+    const [slug, setSlug] = useState('');
+    const [slugTouched, setSlugTouched] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    // Auto-derive slug from name until the user edits it.
+    const suggestedSlug = slugify(name);
+    const effectiveSlug = slugTouched ? slug : suggestedSlug;
+    async function submit(e) {
+        e.preventDefault();
+        setError(null);
+        setBusy(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/orgs`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ name, slug: effectiveSlug }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                throw new Error(body?.message ?? 'Could not create organization.');
+            }
+            const body = (await res.json());
+            if (onCreated)
+                onCreated(body.orgId);
+            // Switch the session to the newly created org.
+            await fetch(`${baseUrl}/v1/orgs/current`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ orgId: body.orgId }),
+            });
+            if (typeof window !== 'undefined') {
+                window.location.href = afterCreateOrganizationUrl ?? window.location.pathname;
+            }
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not create organization.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "af-card", role: "form", "aria-label": "Create organization", children: [_jsx("h1", { className: "af-title", children: title }), _jsx("p", { className: "af-subtitle", children: subtitle }), _jsxs("form", { onSubmit: submit, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Organization name" }), _jsx("input", { className: "af-input", type: "text", required: true, value: name, onChange: (e) => setName(e.target.value), placeholder: "Acme Inc.", maxLength: 120 })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "URL slug" }), _jsx("input", { className: "af-input", type: "text", required: true, pattern: "[a-z0-9-]+", value: effectiveSlug, onChange: (e) => {
+                                    setSlug(e.target.value);
+                                    setSlugTouched(true);
+                                }, placeholder: "acme", maxLength: 60 }), _jsx("p", { style: { marginTop: 6, fontSize: 11.5, color: '#6b7280' }, children: "Lowercase letters, numbers, and hyphens." })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy || !name.trim(), children: busy ? 'Creating…' : 'Create organization' }) })] }), error && _jsx("div", { className: "af-error", children: error })] }));
+}
+function slugify(input) {
+    return input
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 60);
+}

package/dist/ui/OrganizationList.d.ts

@@ -0,0 +1,13 @@
+export type OrganizationListProps = {
+    /** Where to land when the user clicks an org. Must include `{slug}` or `{id}`.
+     *  Default '/org/{slug}'. */
+    hrefPattern?: string;
+    /** Path to the create-organization flow. */
+    createOrganizationUrl?: string;
+};
+/**
+ * List view of every organization the signed-in user belongs to. Useful
+ * as a full-page picker after login.
+ */
+export declare function OrganizationList({ hrefPattern, createOrganizationUrl, }: OrganizationListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrganizationList.d.ts.map

package/dist/ui/OrganizationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationList.d.ts","sourceRoot":"","sources":["../../src/ui/OrganizationList.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,qBAAqB,GAAG;IAClC;iCAC6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAA2B,EAC3B,qBAA8C,GAC/C,EAAE,qBAAqB,2CA4EvB"}

package/dist/ui/OrganizationList.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useAuth } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * List view of every organization the signed-in user belongs to. Useful
+ * as a full-page picker after login.
+ */
+export function OrganizationList({ hrefPattern = '/org/{slug}', createOrganizationUrl = '/create-organization', }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const auth = useAuth();
+    const [orgs, setOrgs] = useState(null);
+    useEffect(() => {
+        if (!auth.isSignedIn) {
+            setOrgs([]);
+            return;
+        }
+        fetch(`${baseUrl}/v1/orgs`, { credentials: 'include' })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => setOrgs(body?.orgs ?? []))
+            .catch(() => setOrgs([]));
+    }, [auth.isSignedIn, baseUrl]);
+    const loading = orgs === null;
+    async function selectOrg(id) {
+        await fetch(`${baseUrl}/v1/orgs/current`, {
+            method: 'PATCH',
+            credentials: 'include',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ orgId: id }),
+        });
+    }
+    return (_jsxs("div", { className: "af-card", style: { maxWidth: 520 }, children: [_jsx("h1", { className: "af-title", children: "Your organizations" }), _jsx("p", { className: "af-subtitle", children: "Pick one to work in, or create a new one." }), loading && _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }), !loading && orgs.length === 0 && (_jsx("div", { className: "af-subtitle", children: "You're not a member of any organizations yet." })), _jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: orgs?.map((o) => {
+                    const href = hrefPattern.replace('{slug}', o.slug).replace('{id}', o.id);
+                    return (_jsx("li", { style: { borderTop: '1px solid rgba(17,24,39,0.06)' }, children: _jsxs("a", { href: href, onClick: () => selectOrg(o.id), style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 12,
+                                padding: '12px 4px',
+                                textDecoration: 'none',
+                                color: '#111827',
+                            }, children: [_jsx("span", { className: "af-avatar", "aria-hidden": true, children: (o.name[0] ?? '?').toUpperCase() }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 13.5, fontWeight: 600 }, children: o.name }), _jsxs("div", { style: { fontSize: 11.5, color: '#6b7280' }, children: ["/", o.slug] })] }), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M5 12h14M13 5l7 7-7 7" }) })] }) }, o.id));
+                }) }), _jsx("div", { className: "af-primary-row", children: _jsx("a", { href: createOrganizationUrl, className: "af-btn af-btn-primary", style: { textDecoration: 'none' }, children: "Create organization" }) })] }));
+}

package/dist/ui/OrganizationProfile.d.ts

@@ -0,0 +1,12 @@
+type Tab = 'general' | 'members' | 'invitations';
+export type OrganizationProfileProps = {
+    initialTab?: Tab;
+};
+/**
+ * Full organization settings panel — general info, members list, pending
+ * invitations. Requires an
+ * active organization; renders a stub when none is selected.
+ */
+export declare function OrganizationProfile({ initialTab }: OrganizationProfileProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OrganizationProfile.d.ts.map

package/dist/ui/OrganizationProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationProfile.d.ts","sourceRoot":"","sources":["../../src/ui/OrganizationProfile.tsx"],"names":[],"mappings":"AAWA,KAAK,GAAG,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,UAAsB,EAAE,EAAE,wBAAwB,2CAiDvF"}

package/dist/ui/OrganizationProfile.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useAuth, useOrganization } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Full organization settings panel — general info, members list, pending
+ * invitations. Requires an
+ * active organization; renders a stub when none is selected.
+ */
+export function OrganizationProfile({ initialTab = 'general' }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const auth = useAuth();
+    const { organization, isLoaded } = useOrganization();
+    const [tab, setTab] = useState(initialTab);
+    if (!auth.isSignedIn) {
+        return (_jsx("div", { className: "af-card", children: _jsx("div", { className: "af-error", children: "You must be signed in." }) }));
+    }
+    if (!isLoaded) {
+        return (_jsx("div", { className: "af-card", children: _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }) }));
+    }
+    if (!organization) {
+        return (_jsxs("div", { className: "af-card", children: [_jsx("h1", { className: "af-title", children: "No active organization" }), _jsx("p", { className: "af-subtitle", children: "Switch to an organization first." })] }));
+    }
+    return (_jsxs("div", { className: "af-card", style: { maxWidth: 720 }, children: [_jsx("h1", { className: "af-title", children: organization.name }), _jsxs("p", { className: "af-subtitle", children: ["/", organization.slug] }), _jsxs("div", { className: "af-profile", children: [_jsxs("div", { className: "af-profile-nav", role: "tablist", children: [_jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'general' ? ' is-active' : ''}`, onClick: () => setTab('general'), children: "General" }), _jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'members' ? ' is-active' : ''}`, onClick: () => setTab('members'), children: "Members" }), _jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'invitations' ? ' is-active' : ''}`, onClick: () => setTab('invitations'), children: "Invitations" })] }), _jsxs("div", { className: "af-profile-panel", role: "tabpanel", children: [tab === 'general' && _jsx(GeneralTab, { org: organization }), tab === 'members' && _jsx(MembersTab, { baseUrl: baseUrl, orgId: organization.id }), tab === 'invitations' && _jsx(InvitationsTab, { baseUrl: baseUrl, orgId: organization.id, role: auth.orgRole ?? 'member' })] })] })] }));
+}
+function GeneralTab({ org }) {
+    return (_jsxs("div", { children: [_jsx("h3", { children: "General" }), _jsx("p", { className: "af-sub", children: "Public identity for this organization." }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "Organization ID" }), _jsx("span", { className: "af-row-val", style: { fontFamily: 'monospace', fontSize: 12 }, children: org.id })] }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "Name" }), _jsx("span", { className: "af-row-val", children: org.name })] }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "Slug" }), _jsxs("span", { className: "af-row-val", children: ["/", org.slug] })] })] }));
+}
+function MembersTab({ baseUrl, orgId }) {
+    const [members, setMembers] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await fetch(`${baseUrl}/v1/orgs/${encodeURIComponent(orgId)}/members`, {
+                    credentials: 'include',
+                });
+                if (!res.ok) {
+                    if (!cancelled) {
+                        setError(res.status === 400 ? 'You are not a member of this organization.' : 'Could not load members.');
+                        setMembers([]);
+                    }
+                    return;
+                }
+                const body = (await res.json());
+                if (!cancelled)
+                    setMembers(body.members ?? []);
+            }
+            catch {
+                if (!cancelled) {
+                    setError('Could not load members.');
+                    setMembers([]);
+                }
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [baseUrl, orgId]);
+    return (_jsxs("div", { children: [_jsx("h3", { children: "Members" }), _jsx("p", { className: "af-sub", children: "People with access to this organization." }), error && _jsx("div", { className: "af-error", children: error }), members === null && _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }), members && members.length === 0 && !error && (_jsx("div", { style: { fontSize: 13, color: '#6b7280' }, children: "No members yet." })), members && members.length > 0 && (_jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, children: members.map((m) => (_jsxs("li", { className: "af-row", style: { padding: '10px 0' }, children: [_jsx("span", { className: "af-row-val", style: { flex: 1, textAlign: 'left' }, children: m.email ?? _jsxs("span", { style: { color: '#9ca3af', fontFamily: 'monospace' }, children: [m.userId.slice(0, 8), "\u2026"] }) }), _jsx("span", { className: "af-pill af-pill-muted", children: m.role })] }, m.userId))) }))] }));
+}
+function InvitationsTab({ baseUrl, orgId, role, }) {
+    const [invites, setInvites] = useState(null);
+    const [email, setEmail] = useState('');
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const canInvite = role === 'admin' || role === 'owner';
+    async function refresh() {
+        try {
+            const res = await fetch(`${baseUrl}/v1/orgs/${encodeURIComponent(orgId)}/invitations`, {
+                credentials: 'include',
+            });
+            if (!res.ok) {
+                setInvites([]);
+                return;
+            }
+            const body = (await res.json());
+            setInvites(body.invitations ?? []);
+        }
+        catch {
+            setInvites([]);
+        }
+    }
+    useEffect(() => {
+        void refresh();
+    }, [baseUrl, orgId]);
+    async function invite(e) {
+        e.preventDefault();
+        setSending(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/orgs/${encodeURIComponent(orgId)}/invitations`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email, role: 'member' }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                throw new Error(body?.message ?? 'Could not invite.');
+            }
+            setEmail('');
+            await refresh();
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not invite.');
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsx("h3", { children: "Invitations" }), _jsx("p", { className: "af-sub", children: "Pending member invitations." }), canInvite && (_jsxs("form", { onSubmit: invite, style: { display: 'flex', gap: 8, marginBottom: 16 }, children: [_jsx("input", { className: "af-input", type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "teammate@example.com", style: { flex: 1 } }), _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: sending, style: { width: 'auto' }, children: sending ? 'Sending…' : 'Invite' })] })), error && _jsx("div", { className: "af-error", children: error }), invites === null && _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }), invites && invites.length === 0 && (_jsx("div", { style: { fontSize: 13, color: '#6b7280' }, children: "No pending invitations." })), invites && invites.length > 0 && (_jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, children: invites.map((inv) => (_jsxs("li", { className: "af-row", style: { padding: '10px 0' }, children: [_jsx("span", { className: "af-row-val", style: { flex: 1, textAlign: 'left' }, children: inv.email }), _jsx("span", { className: "af-pill af-pill-muted", children: inv.role })] }, inv.id))) }))] }));
+}

package/dist/ui/OrganizationSwitcher.d.ts

@@ -0,0 +1,17 @@
+export type OrganizationSwitcherProps = {
+    /** Path users navigate to when they click "Create organization". Default '/create-organization'. */
+    createOrganizationUrl?: string;
+    /** Optional callback after a successful switch (before the page reloads). */
+    afterSelectOrganization?: (orgId: string) => void;
+    /** Where to land after a switch. Default: reload current URL. */
+    redirectUrl?: string;
+    /** Hide the personal ("no org") entry. Default false — */
+    hidePersonal?: boolean;
+};
+/**
+ * Active-organization picker. Lists the signed-in user's orgs, lets them
+ * switch, and links to create a new one.
+ * Invisible when the user is signed out — wrap in `<SignedIn>`.
+ */
+export declare function OrganizationSwitcher({ createOrganizationUrl, afterSelectOrganization, redirectUrl, hidePersonal, }: OrganizationSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=OrganizationSwitcher.d.ts.map

package/dist/ui/OrganizationSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../src/ui/OrganizationSwitcher.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,yBAAyB,GAAG;IACtC,oGAAoG;IACpG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,qBAA8C,EAC9C,uBAAuB,EACvB,WAAW,EACX,YAAoB,GACrB,EAAE,yBAAyB,kDA4G3B"}

package/dist/ui/OrganizationSwitcher.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useAuth } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Active-organization picker. Lists the signed-in user's orgs, lets them
+ * switch, and links to create a new one.
+ * Invisible when the user is signed out — wrap in `<SignedIn>`.
+ */
+export function OrganizationSwitcher({ createOrganizationUrl = '/create-organization', afterSelectOrganization, redirectUrl, hidePersonal = false, }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const auth = useAuth();
+    const [open, setOpen] = useState(false);
+    const [orgs, setOrgs] = useState([]);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!auth.isSignedIn)
+            return;
+        fetch(`${baseUrl}/v1/orgs`, { credentials: 'include' })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => {
+            if (body && Array.isArray(body.orgs))
+                setOrgs(body.orgs);
+        })
+            .catch(() => { });
+    }, [auth.isSignedIn, baseUrl]);
+    useEffect(() => {
+        if (!open)
+            return;
+        function onDocClick(e) {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        }
+        window.addEventListener('mousedown', onDocClick);
+        return () => window.removeEventListener('mousedown', onDocClick);
+    }, [open]);
+    async function selectOrg(orgId) {
+        await fetch(`${baseUrl}/v1/orgs/current`, {
+            method: 'PATCH',
+            credentials: 'include',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ orgId }),
+        });
+        if (afterSelectOrganization && orgId)
+            afterSelectOrganization(orgId);
+        if (typeof window !== 'undefined') {
+            window.location.href = redirectUrl ?? window.location.pathname;
+        }
+    }
+    if (!auth.isSignedIn)
+        return null;
+    const activeOrg = orgs.find((o) => o.id === auth.orgId);
+    const activeLabel = activeOrg?.name ?? (hidePersonal ? 'Select organization' : 'Personal account');
+    return (_jsxs("div", { ref: rootRef, style: { position: 'relative', display: 'inline-block' }, children: [_jsxs("button", { type: "button", className: "af-user-btn", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [_jsx("span", { className: "af-avatar", "aria-hidden": true, style: { background: 'linear-gradient(135deg,#4f3df0,#5b5bd6)', color: '#fff' }, children: (activeLabel[0] ?? '?').toUpperCase() }), _jsx("span", { children: activeLabel }), _jsx("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && (_jsxs("div", { className: "af-menu", role: "menu", style: { minWidth: 260 }, children: [_jsx("div", { style: { padding: '6px 8px 10px', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9ca3af' }, children: "Switch organization" }), !hidePersonal && (_jsxs("button", { type: "button", className: "af-menu-item", role: "menuitem", onClick: () => selectOrg(null), style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { className: "af-avatar af-avatar-sm", "aria-hidden": true, children: "P" }), "Personal account", !auth.orgId && _jsx("span", { style: { marginLeft: 'auto', fontSize: 10.5, color: '#4f3df0' }, children: "Active" })] })), orgs.map((o) => (_jsxs("button", { type: "button", className: "af-menu-item", role: "menuitem", onClick: () => selectOrg(o.id), style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { className: "af-avatar af-avatar-sm", "aria-hidden": true, children: o.name[0]?.toUpperCase() ?? '?' }), _jsx("span", { style: { minWidth: 0, flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }, children: o.name }), o.id === auth.orgId && _jsx("span", { style: { fontSize: 10.5, color: '#4f3df0' }, children: "Active" })] }, o.id))), orgs.length === 0 && (_jsx("div", { style: { padding: '8px 10px', fontSize: 12, color: '#6b7280' }, children: "You're not in any organizations yet." })), _jsx("div", { className: "af-menu-sep" }), _jsx("a", { href: createOrganizationUrl, className: "af-menu-item", role: "menuitem", children: "+ Create organization" })] }))] }));
+}

package/dist/ui/PricingTable.d.ts

@@ -0,0 +1,15 @@
+export type PricingTableProps = {
+    /** Only show these plan names (case-insensitive). Default: all. */
+    includePlans?: string[];
+    /** Which billing cycle to default to. */
+    defaultBillingCycle?: 'monthly' | 'annual';
+    /** Label override for the primary CTA. Default "Subscribe". */
+    ctaLabel?: string;
+};
+/**
+ * Renders every SubscriptionPlanEntity the instance exposes as a cards grid.
+ * Clicking a card triggers `useCheckout().startCheckout(planId, cycle)` which
+ * redirects the browser to Stripe Checkout.
+ */
+export declare function PricingTable({ includePlans, defaultBillingCycle, ctaLabel, }: PricingTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PricingTable.d.ts.map

package/dist/ui/PricingTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingTable.d.ts","sourceRoot":"","sources":["../../src/ui/PricingTable.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,yCAAyC;IACzC,mBAAmB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,mBAA+B,EAC/B,QAAsB,GACvB,EAAE,iBAAiB,2CAkHnB"}