@dudousxd/adonis-authkit-react 0.2.0 → 0.3.1

package/build/index.d.ts

@@ -17,8 +17,18 @@ export { useSessions } from './src/hooks/use_sessions.js';
 export type { UseSessionsResult, AuthSession } from './src/hooks/use_sessions.js';
 export { useAuthorizedApps } from './src/hooks/use_authorized_apps.js';
 export type { UseAuthorizedAppsResult, AuthorizedApp } from './src/hooks/use_authorized_apps.js';
+export { useOrganizations } from './src/hooks/use_organizations.js';
+export type { UseOrganizationsResult, OrgEntry } from './src/hooks/use_organizations.js';
+export { useOrganization } from './src/hooks/use_organization.js';
+export type { UseOrganizationResult, ActiveOrgDetail, OrgMemberEntry } from './src/hooks/use_organization.js';
+export { useSwitchOrganization } from './src/hooks/use_switch_organization.js';
+export type { UseSwitchOrganizationResult } from './src/hooks/use_switch_organization.js';
+export { useOrgInvitations } from './src/hooks/use_org_invitations.js';
+export type { UseOrgInvitationsResult, OrgInvitationEntry } from './src/hooks/use_org_invitations.js';
 export { jsonRequest, useResource } from './src/hooks/use_resource.js';
 export type { ResourceState } from './src/hooks/use_resource.js';
+export { usePasswordStrength, heuristicScorer, } from './src/hooks/use_password_strength.js';
+export type { PasswordStrengthScore, PasswordStrengthResult, PasswordScorer, UsePasswordStrengthOptions, } from './src/hooks/use_password_strength.js';
 export { deriveInitials, currentUrl } from './src/utils.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export type { AuthenticatedProps, GuestProps } from './src/components/authenticated.js';
@@ -36,5 +46,11 @@ export { UserProfile } from './src/components/user_profile.js';
 export type { UserProfileProps } from './src/components/user_profile.js';
 export { AuthorizedApps } from './src/components/authorized_apps.js';
 export type { AuthorizedAppsProps } from './src/components/authorized_apps.js';
+export { PasswordStrengthMeter } from './src/components/password_strength_meter.js';
+export type { PasswordStrengthMeterProps } from './src/components/password_strength_meter.js';
+export { OrganizationSwitcher } from './src/components/organization_switcher.js';
+export type { OrganizationSwitcherProps } from './src/components/organization_switcher.js';
+export { OrganizationProfile } from './src/components/organization_profile.js';
+export type { OrganizationProfileProps } from './src/components/organization_profile.js';
 export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';
 export type { AuthUser, AuthSharedProps, AuthState } from './src/types.js';

package/build/index.js

@@ -8,7 +8,12 @@ export { useUser } from './src/hooks/use_user.js';
 export { useProfile } from './src/hooks/use_profile.js';
 export { useSessions } from './src/hooks/use_sessions.js';
 export { useAuthorizedApps } from './src/hooks/use_authorized_apps.js';
+export { useOrganizations } from './src/hooks/use_organizations.js';
+export { useOrganization } from './src/hooks/use_organization.js';
+export { useSwitchOrganization } from './src/hooks/use_switch_organization.js';
+export { useOrgInvitations } from './src/hooks/use_org_invitations.js';
 export { jsonRequest, useResource } from './src/hooks/use_resource.js';
+export { usePasswordStrength, heuristicScorer, } from './src/hooks/use_password_strength.js';
 export { deriveInitials, currentUrl } from './src/utils.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export { Can } from './src/components/can.js';
@@ -18,4 +23,7 @@ export { Avatar } from './src/components/avatar.js';
 export { UserButton } from './src/components/user_button.js';
 export { UserProfile } from './src/components/user_profile.js';
 export { AuthorizedApps } from './src/components/authorized_apps.js';
+export { PasswordStrengthMeter } from './src/components/password_strength_meter.js';
+export { OrganizationSwitcher } from './src/components/organization_switcher.js';
+export { OrganizationProfile } from './src/components/organization_profile.js';
 export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';

package/build/src/components/organization_profile.d.ts

@@ -0,0 +1,8 @@
+export interface OrganizationProfileProps {
+    inviteLabel?: string;
+    leaveLabel?: string;
+    className?: string;
+}
+export declare function OrganizationProfile({ inviteLabel, leaveLabel, className, }: OrganizationProfileProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;

package/build/src/components/organization_profile.js

@@ -0,0 +1,87 @@
+import { createElement, useState } from 'react';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useOrganization } from '../hooks/use_organization.js';
+import { useAuth } from '../use_auth.js';
+import { useAuthkitConfig } from '../config.js';
+import { jsonRequest } from '../hooks/use_resource.js';
+export function OrganizationProfile({ inviteLabel = 'Convidar membro', leaveLabel = 'Sair da organização', className, }) {
+    const { isAuthenticated } = useAuth();
+    const config = useAuthkitConfig();
+    const { activeOrgId, actions: orgListActions } = useOrganizations();
+    const { data: org, loading, error, actions } = useOrganization(activeOrgId);
+    const [inviteEmail, setInviteEmail] = useState('');
+    const [inviteRole, setInviteRole] = useState('member');
+    const [inviteLoading, setInviteLoading] = useState(false);
+    const [inviteError, setInviteError] = useState(null);
+    if (!isAuthenticated || !activeOrgId)
+        return null;
+    if (loading)
+        return createElement('div', { className: 'authkit-org-profile__loading' }, 'Carregando…');
+    if (error)
+        return createElement('div', { className: 'authkit-error' }, error.message);
+    if (!org)
+        return null;
+    const base = config.endpoints.orgs.replace('/json', '');
+    const handleInvite = async (e) => {
+        e.preventDefault();
+        if (!inviteEmail.trim())
+            return;
+        setInviteLoading(true);
+        setInviteError(null);
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/invite`, {
+                method: 'POST',
+                body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+                csrfToken: config.csrfToken,
+            });
+            setInviteEmail('');
+            await actions.refetch();
+        }
+        catch (err) {
+            setInviteError(err);
+        }
+        finally {
+            setInviteLoading(false);
+        }
+    };
+    const handleLeave = async () => {
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/leave`, {
+                method: 'POST',
+                csrfToken: config.csrfToken,
+            });
+            await orgListActions.refetch();
+        }
+        catch {
+        }
+    };
+    const memberList = createElement('div', { className: 'authkit-org-profile__members' }, createElement('h3', { className: 'authkit-org-profile__section-title' }, 'Membros'), ...(org.members.length === 0
+        ? [createElement('p', { className: 'authkit-org-profile__empty' }, 'Nenhum membro.')]
+        : org.members.map((m) => createElement('div', { key: m.accountId, className: 'authkit-org-profile__member' }, createElement('div', { className: 'authkit-org-profile__member-info' }, createElement('span', { className: 'authkit-org-profile__member-email' }, m.email ?? m.accountId), createElement('span', { className: 'authkit-org-profile__member-role' }, m.role))))));
+    const inviteForm = org.canManage
+        ? createElement('form', { className: 'authkit-org-profile__invite-form', onSubmit: handleInvite }, createElement('h3', { className: 'authkit-org-profile__section-title' }, inviteLabel), createElement('input', {
+            className: 'authkit-input',
+            type: 'email',
+            placeholder: 'Email',
+            value: inviteEmail,
+            onChange: (e) => setInviteEmail(e.target.value),
+        }), createElement('input', {
+            className: 'authkit-input',
+            placeholder: 'Papel (ex: member)',
+            value: inviteRole,
+            onChange: (e) => setInviteRole(e.target.value),
+        }), inviteError
+            ? createElement('p', { className: 'authkit-error', role: 'alert' }, inviteError.message)
+            : null, createElement('button', {
+            type: 'submit',
+            className: 'authkit-button authkit-button--primary',
+            disabled: inviteLoading,
+        }, inviteLoading ? 'Enviando…' : inviteLabel))
+        : null;
+    const leaveButton = createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: handleLeave,
+    }, leaveLabel);
+    return createElement('div', { className: ['authkit-card', 'authkit-org-profile', className].filter(Boolean).join(' ') }, createElement('div', { className: 'authkit-org-profile__header' }, createElement('div', { className: 'authkit-org-profile__name' }, org.name), createElement('div', { className: 'authkit-org-profile__slug' }, org.slug)), memberList, inviteForm, leaveButton);
+}

package/build/src/components/organization_switcher.d.ts

@@ -0,0 +1,7 @@
+export interface OrganizationSwitcherProps {
+    personalAccountLabel?: string;
+    className?: string;
+}
+export declare function OrganizationSwitcher({ personalAccountLabel, className, }: OrganizationSwitcherProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;

package/build/src/components/organization_switcher.js

@@ -0,0 +1,57 @@
+import { createElement, useState } from 'react';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useSwitchOrganization } from '../hooks/use_switch_organization.js';
+import { useAuth } from '../use_auth.js';
+export function OrganizationSwitcher({ personalAccountLabel = 'Conta pessoal', className, }) {
+    const { isAuthenticated } = useAuth();
+    const { data: orgs, activeOrgId, supported } = useOrganizations();
+    const { activate, deactivate, loading: switching } = useSwitchOrganization();
+    const [open, setOpen] = useState(false);
+    if (!isAuthenticated || !supported)
+        return null;
+    const activeOrg = orgs?.find((o) => o.id === activeOrgId) ?? null;
+    const label = activeOrg ? activeOrg.name : personalAccountLabel;
+    const trigger = createElement('button', {
+        type: 'button',
+        className: 'authkit-orgswitcher__trigger',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': open,
+        disabled: switching,
+        onClick: () => setOpen((v) => !v),
+    }, createElement('span', { className: 'authkit-orgswitcher__label' }, label), createElement('span', { className: 'authkit-orgswitcher__chevron', 'aria-hidden': 'true' }, '▾'));
+    const menu = open
+        ? createElement('div', { className: 'authkit-orgswitcher__menu', role: 'listbox' }, createElement('button', {
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                !activeOrgId ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': !activeOrgId,
+            onClick: async () => {
+                setOpen(false);
+                if (activeOrgId)
+                    await deactivate();
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, personalAccountLabel)), ...(orgs ?? []).map((org) => createElement('button', {
+            key: org.id,
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                org.isActive ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': org.isActive,
+            onClick: async () => {
+                setOpen(false);
+                if (!org.isActive)
+                    await activate(org.id);
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, org.name), createElement('span', { className: 'authkit-orgswitcher__item-role' }, org.role))))
+        : null;
+    return createElement('div', { className: ['authkit-orgswitcher', className].filter(Boolean).join(' ') }, trigger, menu);
+}

package/build/src/components/password_strength_meter.d.ts

@@ -0,0 +1,11 @@
+import { type PasswordScorer } from '../hooks/use_password_strength.js';
+export interface PasswordStrengthMeterProps {
+    password: string;
+    scorer?: PasswordScorer;
+    showFeedback?: boolean;
+    labels?: [string, string, string, string, string];
+    className?: string;
+}
+export declare function PasswordStrengthMeter({ password, scorer, showFeedback, labels, className, }: PasswordStrengthMeterProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/password_strength_meter.js

@@ -0,0 +1,39 @@
+import { createElement } from 'react';
+import { usePasswordStrength, } from '../hooks/use_password_strength.js';
+const DEFAULT_LABELS = [
+    'Very weak',
+    'Weak',
+    'Fair',
+    'Good',
+    'Strong',
+];
+export function PasswordStrengthMeter({ password, scorer, showFeedback = true, labels = DEFAULT_LABELS, className, }) {
+    const { score, feedback } = usePasswordStrength(password, { scorer });
+    const cls = ['authkit-strength', className].filter(Boolean).join(' ');
+    const segments = [0, 1, 2, 3].map((i) => createElement('span', {
+        key: i,
+        className: [
+            'authkit-strength__segment',
+            i < score ? 'authkit-strength__segment--filled' : '',
+        ]
+            .filter(Boolean)
+            .join(' '),
+    }));
+    const children = [
+        createElement('div', {
+            key: 'bar',
+            className: 'authkit-strength__bar',
+            role: 'meter',
+            'aria-valuemin': 0,
+            'aria-valuemax': 4,
+            'aria-valuenow': score,
+            'aria-label': labels[score],
+            'data-score': score,
+        }, segments),
+        createElement('span', { key: 'label', className: 'authkit-strength__label' }, labels[score]),
+    ];
+    if (showFeedback && feedback && feedback.length > 0) {
+        children.push(createElement('ul', { key: 'feedback', className: 'authkit-strength__feedback' }, feedback.map((tip, i) => createElement('li', { key: i }, tip))));
+    }
+    return createElement('div', { className: cls }, children);
+}

package/build/src/config.d.ts

@@ -3,6 +3,8 @@ export interface AuthkitEndpoints {
     sessions: string;
     apps: string;
     passkeys: string;
+    orgs: string;
+    orgInvitations: string;
 }
 export interface AuthkitConfig {
     loginUrl?: string;

package/build/src/config.js

@@ -8,6 +8,8 @@ export const DEFAULT_CONFIG = {
         sessions: '/account/security',
         apps: '/account/apps',
         passkeys: '/account/mfa/passkeys',
+        orgs: '/account/orgs/json',
+        orgInvitations: '/account/orgs/invitations/json',
     },
 };
 export function resolveConfig(config) {
@@ -20,6 +22,8 @@ export function resolveConfig(config) {
             sessions: config?.endpoints?.sessions ?? DEFAULT_CONFIG.endpoints.sessions,
             apps: config?.endpoints?.apps ?? DEFAULT_CONFIG.endpoints.apps,
             passkeys: config?.endpoints?.passkeys ?? DEFAULT_CONFIG.endpoints.passkeys,
+            orgs: config?.endpoints?.orgs ?? DEFAULT_CONFIG.endpoints.orgs,
+            orgInvitations: config?.endpoints?.orgInvitations ?? DEFAULT_CONFIG.endpoints.orgInvitations,
         },
         csrfToken: config?.csrfToken,
     };

package/build/src/hooks/use_org_invitations.d.ts

@@ -0,0 +1,19 @@
+import { type ResourceState } from './use_resource.js';
+export interface OrgInvitationEntry {
+    id: string;
+    organizationId: string;
+    orgName: string;
+    orgSlug: string;
+    email: string;
+    role: string;
+    expiresAt: string;
+    createdAt: string;
+    [key: string]: unknown;
+}
+export interface UseOrgInvitationsResult extends ResourceState<OrgInvitationEntry[]> {
+    actions: {
+        refetch(): Promise<void>;
+        accept(token: string): Promise<void>;
+    };
+}
+export declare function useOrgInvitations(): UseOrgInvitationsResult;

package/build/src/hooks/use_org_invitations.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useAuthkitConfig } from '../config.js';
+import { jsonRequest, useResource } from './use_resource.js';
+export function useOrgInvitations() {
+    const config = useAuthkitConfig();
+    const { data, loading, error, refetch } = useResource(config.endpoints.orgInvitations, config.csrfToken);
+    const accept = useCallback(async (token) => {
+        await jsonRequest(`/account/orgs/invitations/${encodeURIComponent(token)}/accept`, {
+            method: 'POST',
+            csrfToken: config.csrfToken,
+        });
+        await refetch();
+    }, [config.csrfToken, refetch]);
+    return {
+        data: data?.invitations ?? null,
+        loading,
+        error,
+        actions: { refetch, accept },
+    };
+}

package/build/src/hooks/use_organization.d.ts

@@ -0,0 +1,23 @@
+import { type ResourceState } from './use_resource.js';
+export interface OrgMemberEntry {
+    accountId: string;
+    email: string | null;
+    role: string;
+    joinedAt: string;
+}
+export interface ActiveOrgDetail {
+    id: string;
+    name: string;
+    slug: string;
+    logoUrl: string | null;
+    role: string;
+    canManage: boolean;
+    members: OrgMemberEntry[];
+    [key: string]: unknown;
+}
+export interface UseOrganizationResult extends ResourceState<ActiveOrgDetail> {
+    actions: {
+        refetch(): Promise<void>;
+    };
+}
+export declare function useOrganization(orgId: string | null): UseOrganizationResult;

package/build/src/hooks/use_organization.js

@@ -0,0 +1,8 @@
+import { useAuthkitConfig } from '../config.js';
+import { useResource } from './use_resource.js';
+export function useOrganization(orgId) {
+    const config = useAuthkitConfig();
+    const url = orgId ? `${config.endpoints.orgs.replace('/json', '')}/${encodeURIComponent(orgId)}/json` : '';
+    const { data, loading, error, refetch } = useResource(url, config.csrfToken);
+    return { data, loading: url ? loading : false, error, actions: { refetch } };
+}

package/build/src/hooks/use_organizations.d.ts

@@ -0,0 +1,18 @@
+import { type ResourceState } from './use_resource.js';
+export interface OrgEntry {
+    id: string;
+    name: string;
+    slug: string;
+    logoUrl: string | null;
+    role: string;
+    isActive: boolean;
+    [key: string]: unknown;
+}
+export interface UseOrganizationsResult extends ResourceState<OrgEntry[]> {
+    activeOrgId: string | null;
+    supported: boolean;
+    actions: {
+        refetch(): Promise<void>;
+    };
+}
+export declare function useOrganizations(): UseOrganizationsResult;

package/build/src/hooks/use_organizations.js

@@ -0,0 +1,14 @@
+import { useAuthkitConfig } from '../config.js';
+import { useResource } from './use_resource.js';
+export function useOrganizations() {
+    const config = useAuthkitConfig();
+    const { data, loading, error, refetch } = useResource(config.endpoints.orgs, config.csrfToken);
+    return {
+        data: data?.orgs ?? null,
+        loading,
+        error,
+        activeOrgId: data?.activeOrgId ?? null,
+        supported: data?.supported ?? true,
+        actions: { refetch },
+    };
+}

package/build/src/hooks/use_password_strength.d.ts

@@ -0,0 +1,11 @@
+export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
+export interface PasswordStrengthResult {
+    score: PasswordStrengthScore;
+    feedback?: string[];
+}
+export type PasswordScorer = (password: string) => PasswordStrengthResult;
+export interface UsePasswordStrengthOptions {
+    scorer?: PasswordScorer;
+}
+export declare function heuristicScorer(password: string): PasswordStrengthResult;
+export declare function usePasswordStrength(password: string, options?: UsePasswordStrengthOptions): PasswordStrengthResult;

package/build/src/hooks/use_password_strength.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+export function heuristicScorer(password) {
+    if (!password)
+        return { score: 0, feedback: ['Enter a password.'] };
+    const feedback = [];
+    const classes = [/[a-z]/, /[A-Z]/, /[0-9]/, /[^A-Za-z0-9]/];
+    const variety = classes.filter((re) => re.test(password)).length;
+    const length = password.length;
+    let points = 0;
+    if (length >= 8)
+        points += 1;
+    if (length >= 12)
+        points += 1;
+    if (length >= 16)
+        points += 1;
+    if (variety >= 2)
+        points += 1;
+    if (variety >= 3)
+        points += 1;
+    if (length < 12)
+        feedback.push('Use at least 12 characters.');
+    if (!/[A-Z]/.test(password))
+        feedback.push('Add an uppercase letter.');
+    if (!/[0-9]/.test(password))
+        feedback.push('Add a number.');
+    if (!/[^A-Za-z0-9]/.test(password))
+        feedback.push('Add a symbol.');
+    const score = Math.max(0, Math.min(4, points));
+    return { score, feedback: feedback.length ? feedback : undefined };
+}
+export function usePasswordStrength(password, options = {}) {
+    const scorer = options.scorer ?? heuristicScorer;
+    return useMemo(() => scorer(password), [password, scorer]);
+}

package/build/src/hooks/use_switch_organization.d.ts

@@ -0,0 +1,7 @@
+export interface UseSwitchOrganizationResult {
+    loading: boolean;
+    error: Error | null;
+    activate(orgId: string): Promise<void>;
+    deactivate(): Promise<void>;
+}
+export declare function useSwitchOrganization(): UseSwitchOrganizationResult;

package/build/src/hooks/use_switch_organization.js

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react';
+import { useAuthkitConfig } from '../config.js';
+import { jsonRequest } from './use_resource.js';
+export function useSwitchOrganization() {
+    const config = useAuthkitConfig();
+    const base = config.endpoints.orgs.replace('/json', '');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const activate = useCallback(async (orgId) => {
+        setLoading(true);
+        setError(null);
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(orgId)}/activate`, {
+                method: 'POST',
+                csrfToken: config.csrfToken,
+            });
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [base, config.csrfToken]);
+    const deactivate = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            await jsonRequest(`${base}/deactivate`, {
+                method: 'POST',
+                csrfToken: config.csrfToken,
+            });
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [base, config.csrfToken]);
+    return { loading, error, activate, deactivate };
+}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@dudousxd/adonis-authkit-react",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Frontend ergonomics over AuthKit for AdonisJS + Inertia + React apps: a typed useAuth() hook, role-gating hooks and gating components.",
   "license": "MIT",
   "author": "dudousxd",
-  "homepage": "https://github.com/DavideCarvalho/streaming-educacao/tree/main/packages/authkit-react#readme",
+  "homepage": "https://github.com/DavideCarvalho/adonis-authkit/tree/main/packages/authkit-react#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/DavideCarvalho/streaming-educacao.git",
+    "url": "https://github.com/DavideCarvalho/adonis-authkit.git",
     "directory": "packages/authkit-react"
   },
   "bugs": {
-    "url": "https://github.com/DavideCarvalho/streaming-educacao/issues"
+    "url": "https://github.com/DavideCarvalho/adonis-authkit/issues"
   },
   "keywords": [
     "adonisjs",
@@ -43,7 +43,7 @@
     "react-dom": "19.2.6"
   },
   "dependencies": {
-    "@dudousxd/adonis-authkit-core": "0.2.0"
+    "@dudousxd/adonis-authkit-core": "0.3.1"
   },
   "devDependencies": {
     "@adonisjs/tsconfig": "2.0.0",

package/styles.css

@@ -187,3 +187,108 @@
   color: var(--authkit-muted);
   font-size: 0.9rem;
 }
+
+/* Medidor de força de senha (PasswordStrengthMeter). */
+.authkit-strength {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.authkit-strength__bar {
+  display: flex;
+  gap: 0.25rem;
+}
+.authkit-strength__segment {
+  flex: 1 1 0;
+  height: 5px;
+  border-radius: 999px;
+  background: var(--authkit-border);
+  transition: background-color 0.15s ease;
+}
+/* Cor por score, do mais fraco ao mais forte (via data-score no bar). */
+.authkit-strength__bar[data-score='1'] .authkit-strength__segment--filled {
+  background: var(--authkit-danger);
+}
+.authkit-strength__bar[data-score='2'] .authkit-strength__segment--filled {
+  background: #f5a524;
+}
+.authkit-strength__bar[data-score='3'] .authkit-strength__segment--filled {
+  background: #d6c20a;
+}
+.authkit-strength__bar[data-score='4'] .authkit-strength__segment--filled {
+  background: #2fb344;
+}
+.authkit-strength__label {
+  font-size: 0.8rem;
+  color: var(--authkit-muted);
+}
+.authkit-strength__feedback {
+  margin: 0;
+  padding-left: 1.1rem;
+  font-size: 0.8rem;
+  color: var(--authkit-muted);
+}
+
+/* ─── OrganizationSwitcher ─────────────────────────────────────────────── */
+.authkit-orgswitcher {
+  position: relative;
+  display: inline-block;
+}
+.authkit-orgswitcher__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.75rem;
+  background: var(--authkit-bg);
+  border: 1px solid var(--authkit-border);
+  border-radius: var(--authkit-radius);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--authkit-fg);
+}
+.authkit-orgswitcher__trigger:disabled { opacity: 0.6; cursor: default; }
+.authkit-orgswitcher__chevron { font-size: 0.65rem; color: var(--authkit-muted); }
+.authkit-orgswitcher__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  background: var(--authkit-bg);
+  border: 1px solid var(--authkit-border);
+  border-radius: var(--authkit-radius);
+  box-shadow: 0 4px 16px rgba(0,0,0,.1);
+  z-index: 50;
+  overflow: hidden;
+}
+.authkit-orgswitcher__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--authkit-fg);
+  text-align: left;
+}
+.authkit-orgswitcher__item:hover { background: color-mix(in srgb, var(--authkit-primary) 8%, transparent); }
+.authkit-orgswitcher__item--active { font-weight: 600; }
+.authkit-orgswitcher__item-name { flex: 1; }
+.authkit-orgswitcher__item-role { font-size: 0.75rem; color: var(--authkit-muted); margin-left: 0.5rem; }
+
+/* ─── OrganizationProfile ──────────────────────────────────────────────── */
+.authkit-org-profile { display: flex; flex-direction: column; gap: var(--authkit-gap); }
+.authkit-org-profile__header { margin-bottom: 0.5rem; }
+.authkit-org-profile__name { font-weight: 600; font-size: 1rem; color: var(--authkit-fg); }
+.authkit-org-profile__slug { font-size: 0.8rem; color: var(--authkit-muted); }
+.authkit-org-profile__section-title { font-size: 0.85rem; font-weight: 600; color: var(--authkit-fg); margin-bottom: 0.4rem; }
+.authkit-org-profile__members { display: flex; flex-direction: column; gap: 0.25rem; }
+.authkit-org-profile__member { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--authkit-border); }
+.authkit-org-profile__member:last-child { border-bottom: none; }
+.authkit-org-profile__member-info { display: flex; flex-direction: column; }
+.authkit-org-profile__member-email { font-size: 0.875rem; color: var(--authkit-fg); }
+.authkit-org-profile__member-role { font-size: 0.75rem; color: var(--authkit-muted); }
+.authkit-org-profile__invite-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
+.authkit-org-profile__empty { font-size: 0.875rem; color: var(--authkit-muted); }