@dudousxd/adonis-authkit-react 0.1.2 → 0.2.0

package/README.md

@@ -108,6 +108,32 @@ import { AuthProvider } from '@dudousxd/adonis-authkit-react'
 </AuthProvider>
 ```
 
+## 5. Config + componentes prontos
+
+Envolva a app com `<AuthkitProvider>` para configurar URLs/endpoints e use os
+hooks headless e componentes prontos:
+
+```tsx
+import '@dudousxd/adonis-authkit-react/styles.css'
+import {
+  AuthkitProvider,
+  useSignIn, useSignOut, useUser, useProfile, useSessions, useAuthorizedApps,
+  SignInButton, SignOutButton, UserButton, UserProfile, AuthorizedApps,
+} from '@dudousxd/adonis-authkit-react'
+
+<AuthkitProvider config={{ csrfToken: page.props.csrfToken }}>
+  <UserButton />
+  <UserProfile />
+  <AuthorizedApps />
+</AuthkitProvider>
+```
+
+Defaults dos endpoints apontam para as rotas reais do host-kit
+(`/auth/login`, `/account/logout`, `/account/security`, `/account/security/profile`,
+`/account/apps`, …). Numa topologia de *client app*, aponte-os para rotas locais que
+redirecionam para o IdP. Temável via CSS vars `--authkit-*`. Veja a
+[doc de React](https://...) para detalhes.
+
 ## Helpers puros
 
 Para uso fora de componentes, as funções de papéis são exportadas e livres de React:

package/build/index.d.ts

@@ -1,9 +1,40 @@
 export { useAuth } from './src/use_auth.js';
 export { AuthProvider, AuthContext } from './src/provider.js';
 export type { AuthProviderProps } from './src/provider.js';
+export { AuthkitProvider } from './src/authkit_provider.js';
+export type { AuthkitProviderProps } from './src/authkit_provider.js';
+export { AuthkitConfigContext, useAuthkitConfig, resolveConfig, buildAuthUrl, DEFAULT_CONFIG, } from './src/config.js';
+export type { AuthkitConfig, ResolvedAuthkitConfig, AuthkitEndpoints, } from './src/config.js';
+export { useSignIn } from './src/hooks/use_sign_in.js';
+export type { SignInOptions } from './src/hooks/use_sign_in.js';
+export { useSignOut } from './src/hooks/use_sign_out.js';
+export type { SignOutOptions } from './src/hooks/use_sign_out.js';
+export { useUser } from './src/hooks/use_user.js';
+export type { UseUserResult } from './src/hooks/use_user.js';
+export { useProfile } from './src/hooks/use_profile.js';
+export type { UseProfileResult, ProfileUpdate } from './src/hooks/use_profile.js';
+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 { jsonRequest, useResource } from './src/hooks/use_resource.js';
+export type { ResourceState } from './src/hooks/use_resource.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';
 export { Can } from './src/components/can.js';
 export type { CanProps } from './src/components/can.js';
+export { SignInButton } from './src/components/sign_in_button.js';
+export type { SignInButtonProps } from './src/components/sign_in_button.js';
+export { SignOutButton } from './src/components/sign_out_button.js';
+export type { SignOutButtonProps } from './src/components/sign_out_button.js';
+export { Avatar } from './src/components/avatar.js';
+export type { AvatarProps } from './src/components/avatar.js';
+export { UserButton } from './src/components/user_button.js';
+export type { UserButtonProps } from './src/components/user_button.js';
+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 { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';
 export type { AuthUser, AuthSharedProps, AuthState } from './src/types.js';

package/build/index.js

@@ -1,5 +1,21 @@
 export { useAuth } from './src/use_auth.js';
 export { AuthProvider, AuthContext } from './src/provider.js';
+export { AuthkitProvider } from './src/authkit_provider.js';
+export { AuthkitConfigContext, useAuthkitConfig, resolveConfig, buildAuthUrl, DEFAULT_CONFIG, } from './src/config.js';
+export { useSignIn } from './src/hooks/use_sign_in.js';
+export { useSignOut } from './src/hooks/use_sign_out.js';
+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 { jsonRequest, useResource } from './src/hooks/use_resource.js';
+export { deriveInitials, currentUrl } from './src/utils.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export { Can } from './src/components/can.js';
+export { SignInButton } from './src/components/sign_in_button.js';
+export { SignOutButton } from './src/components/sign_out_button.js';
+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 { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';

package/build/src/authkit_provider.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type AuthkitConfig } from './config.js';
+import type { AuthSharedProps } from './types.js';
+export interface AuthkitProviderProps {
+    config?: AuthkitConfig;
+    value?: AuthSharedProps['authkit'];
+    children: ReactNode;
+}
+export declare function AuthkitProvider({ config, value, children }: AuthkitProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
+    user: import("./types.js").AuthUser | null;
+    globalRoles: string[];
+    appRoles?: string[];
+} | undefined>> | import("react").FunctionComponentElement<import("react").ProviderProps<import("./config.js").ResolvedAuthkitConfig>>;

package/build/src/authkit_provider.js

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { AuthContext } from './provider.js';
+import { AuthkitConfigContext, resolveConfig } from './config.js';
+export function AuthkitProvider({ config, value, children }) {
+    const resolved = resolveConfig(config);
+    const tree = createElement(AuthkitConfigContext.Provider, { value: resolved }, children);
+    if (value !== undefined) {
+        return createElement(AuthContext.Provider, { value }, tree);
+    }
+    return tree;
+}

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

@@ -0,0 +1,8 @@
+export interface AuthorizedAppsProps {
+    className?: string;
+    revokeLabel?: string;
+    emptyLabel?: string;
+}
+export declare function AuthorizedApps({ className, revokeLabel, emptyLabel, }: AuthorizedAppsProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/authorized_apps.js

@@ -0,0 +1,26 @@
+import { createElement } from 'react';
+import { useAuthorizedApps } from '../hooks/use_authorized_apps.js';
+export function AuthorizedApps({ className, revokeLabel = 'Revogar', emptyLabel = 'Nenhum app autorizado.', }) {
+    const { data, loading, error, actions } = useAuthorizedApps();
+    if (loading && !data) {
+        return createElement('div', { className: 'authkit-apps__loading' }, 'Carregando…');
+    }
+    if (error) {
+        return createElement('p', { className: 'authkit-error', role: 'alert' }, error.message);
+    }
+    const apps = data ?? [];
+    if (apps.length === 0) {
+        return createElement('p', { className: 'authkit-apps__empty' }, emptyLabel);
+    }
+    return createElement('ul', { className: ['authkit-apps', className].filter(Boolean).join(' ') }, ...apps.map((app) => createElement('li', { key: app.clientId, className: 'authkit-apps__item' }, createElement('div', { className: 'authkit-apps__info' }, app.logoUrl
+        ? createElement('img', {
+            className: 'authkit-apps__logo',
+            src: app.logoUrl,
+            alt: '',
+        })
+        : null, createElement('span', { className: 'authkit-apps__name' }, app.name ?? app.clientId)), createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: () => void actions.revoke(app.clientId),
+    }, revokeLabel))));
+}

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

@@ -0,0 +1,22 @@
+import type { AuthUser } from '../types.js';
+export interface AvatarProps {
+    user: Pick<AuthUser, 'name' | 'email' | 'avatarUrl'>;
+    size?: number;
+    className?: string;
+}
+export declare function Avatar({ user, size, className }: AvatarProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    src: string;
+    alt: string;
+    style: {
+        width: number;
+        height: number;
+    };
+}, HTMLElement> | import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        width: number;
+        height: number;
+    };
+    'aria-hidden': true;
+}, HTMLElement>;

package/build/src/components/avatar.js

@@ -0,0 +1,15 @@
+import { createElement } from 'react';
+import { deriveInitials } from '../utils.js';
+export function Avatar({ user, size = 36, className }) {
+    const cls = ['authkit-avatar', className].filter(Boolean).join(' ');
+    const style = { width: size, height: size };
+    if (user.avatarUrl) {
+        return createElement('img', {
+            className: cls,
+            src: user.avatarUrl,
+            alt: user.name ?? user.email ?? '',
+            style,
+        });
+    }
+    return createElement('span', { className: cls, style, 'aria-hidden': true }, deriveInitials(user.name, user.email));
+}

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

@@ -0,0 +1,297 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface SignInButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    children?: ReactNode;
+    returnTo?: string;
+    showWhenAuthenticated?: boolean;
+}
+export declare function SignInButton({ children, returnTo, showWhenAuthenticated, className, ...rest }: SignInButtonProps): import("react").DetailedReactHTMLElement<{
+    id?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    disabled?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    type: string;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    className: string;
+    onClick: () => void;
+}, HTMLElement> | null;

package/build/src/components/sign_in_button.js

@@ -0,0 +1,16 @@
+import { createElement } from 'react';
+import { useSignIn } from '../hooks/use_sign_in.js';
+import { useAuth } from '../use_auth.js';
+export function SignInButton({ children = 'Entrar', returnTo, showWhenAuthenticated = false, className, ...rest }) {
+    const { signIn } = useSignIn();
+    const { isAuthenticated } = useAuth();
+    if (isAuthenticated && !showWhenAuthenticated)
+        return null;
+    const opts = returnTo ? { returnTo } : undefined;
+    return createElement('button', {
+        type: 'button',
+        className: ['authkit-button', 'authkit-button--primary', className].filter(Boolean).join(' '),
+        onClick: () => signIn(opts),
+        ...rest,
+    }, children);
+}