@indobaseinc/auth-ui-svelte 1.0.0

package/dist/Auth/interfaces/VerifyOtp.svelte

@@ -0,0 +1,117 @@
+<script>import Anchor from '../../UI/Anchor.svelte';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Input from '../../UI/Input.svelte';
+import Label from '../../UI/Label.svelte';
+import Message from '../../UI/Message.svelte';
+import { VIEWS } from '@indobaseinc/auth-ui-shared';
+export let i18n;
+export let supabaseClient;
+export let authView;
+export let otpType = 'email';
+export let appearance;
+export let showLinks = false;
+export let email = '';
+export let phone = '';
+export let token = '';
+let message = '';
+let error = '';
+let loading = false;
+async function handleSubmit() {
+    loading = true;
+    error = '';
+    message = '';
+    let verifyOpts = {
+        email,
+        token,
+        type: otpType
+    };
+    if (['sms', 'phone_change'].includes(otpType)) {
+        verifyOpts = {
+            phone,
+            token,
+            type: otpType
+        };
+    }
+    const { error: err } = await supabaseClient.auth.verifyOtp(verifyOpts);
+    if (err)
+        error = err.message;
+    loading = false;
+}
+</script>
+
+<form id="auth-magic-link" method="post" on:submit|preventDefault={handleSubmit}>
+	<Container direction="vertical" gap="large" {appearance}>
+		{#if ['sms', 'phone_change'].includes(otpType)}
+			<div>
+				<Label for="phone" {appearance}>{i18n?.verify_otp?.phone_input_label}</Label>
+				<Input
+					id="phone"
+					type="text"
+					name="phone"
+					autofocus
+					placeholder={i18n?.verify_otp?.phone_input_placeholder}
+					bind:value={phone}
+					autocomplete="phone"
+					{appearance}
+				/>
+			</div>
+		{:else}
+			<div>
+				<Label for="email" {appearance}>{i18n?.verify_otp?.email_input_label}</Label>
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					autofocus
+					placeholder={i18n?.verify_otp?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
+			</div>
+		{/if}
+		<div>
+			<Label for="token" {appearance}>{i18n?.verify_otp?.token_input_label}</Label>
+			<Input
+				id="token"
+				type="text"
+				name="token"
+				placeholder={i18n?.verify_otp?.token_input_placeholder}
+				bind:value={token}
+				autocomplete="token"
+				{appearance}
+			/>
+		</div>
+		<Button type="submit" color="primary" {loading} {appearance}>
+			{loading ? i18n?.verify_otp?.loading_button_label : i18n?.verify_otp?.button_label}
+		</Button>
+
+		{#if showLinks}
+			<Anchor
+				on:click={(e) => {
+					e.preventDefault();
+					authView = VIEWS.SIGN_IN;
+				}}
+				href="#auth-sign-in"
+				{appearance}>{i18n?.sign_in?.link_text}</Anchor
+			>
+		{/if}
+		{#if message}
+			<Message {appearance}>
+				{message}
+			</Message>
+		{/if}
+		{#if error}
+			<Message color="danger" {appearance}>
+				{error}
+			</Message>
+		{/if}
+	</Container>
+</form>
+
+<style>
+	form {
+		width: 100%;
+	}
+</style>

package/dist/Auth/interfaces/VerifyOtp.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type ViewType, type OtpType } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        i18n: I18nVariables;
+        supabaseClient: IndobaseClient;
+        authView: ViewType;
+        otpType?: OtpType | undefined;
+        appearance: Appearance;
+        showLinks?: boolean | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        token?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VerifyOtpProps = typeof __propDef.props;
+export type VerifyOtpEvents = typeof __propDef.events;
+export type VerifyOtpSlots = typeof __propDef.slots;
+export default class VerifyOtp extends SvelteComponentTyped<VerifyOtpProps, VerifyOtpEvents, VerifyOtpSlots> {
+}
+export {};

package/dist/Auth/interfaces/index.d.ts

@@ -0,0 +1,6 @@
+export { default as EmailAuth } from './EmailAuth.svelte';
+export { default as ForgottenPassword } from './ForgottenPassword.svelte';
+export { default as MagicLink } from './MagicLink.svelte';
+export { default as SocialAuth } from './SocialAuth.svelte';
+export { default as UpdatePassword } from './UpdatePassword.svelte';
+export { default as VerifyOtp } from './VerifyOtp.svelte';

package/dist/Auth/interfaces/index.js

@@ -0,0 +1,6 @@
+export { default as EmailAuth } from './EmailAuth.svelte';
+export { default as ForgottenPassword } from './ForgottenPassword.svelte';
+export { default as MagicLink } from './MagicLink.svelte';
+export { default as SocialAuth } from './SocialAuth.svelte';
+export { default as UpdatePassword } from './UpdatePassword.svelte';
+export { default as VerifyOtp } from './VerifyOtp.svelte';

package/dist/Auth/ui/ForgottenPassword.svelte

@@ -0,0 +1,18 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let redirectTo = undefined;
+export let showLinks = false;
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+</script>
+
+<Auth
+	view="forgotten_password"
+	{showLinks}
+	{supabaseClient}
+	{redirectTo}
+	{appearance}
+	{theme}
+	{localization}
+/>

package/dist/Auth/ui/ForgottenPassword.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        redirectTo?: string | undefined;
+        showLinks?: boolean | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ForgottenPasswordProps = typeof __propDef.props;
+export type ForgottenPasswordEvents = typeof __propDef.events;
+export type ForgottenPasswordSlots = typeof __propDef.slots;
+export default class ForgottenPassword extends SvelteComponentTyped<ForgottenPasswordProps, ForgottenPasswordEvents, ForgottenPasswordSlots> {
+}
+export {};

package/dist/Auth/ui/MagicLink.svelte

@@ -0,0 +1,26 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let socialLayout = 'vertical';
+export let providers = [];
+export let providerScopes = undefined;
+export let queryParams = undefined;
+export let redirectTo = undefined;
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+</script>
+
+<Auth
+	{supabaseClient}
+	showLinks={false}
+	magicLink={false}
+	{redirectTo}
+	view="magic_link"
+	{socialLayout}
+	{providers}
+	{providerScopes}
+	{queryParams}
+	{appearance}
+	{theme}
+	{localization}
+/>

package/dist/Auth/ui/MagicLink.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Provider } from '@indobaseinc/auth-js';
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables, ProviderScopes } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        socialLayout?: "horizontal" | "vertical" | undefined;
+        providers?: Provider[] | undefined;
+        providerScopes?: Partial<ProviderScopes> | undefined;
+        queryParams?: {
+            [key: string]: string;
+        } | undefined;
+        redirectTo?: string | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MagicLinkProps = typeof __propDef.props;
+export type MagicLinkEvents = typeof __propDef.events;
+export type MagicLinkSlots = typeof __propDef.slots;
+export default class MagicLink extends SvelteComponentTyped<MagicLinkProps, MagicLinkEvents, MagicLinkSlots> {
+}
+export {};

package/dist/Auth/ui/SignIn.svelte

@@ -0,0 +1,29 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let socialLayout = 'vertical';
+export let providers = [];
+export let providerScopes = undefined;
+export let queryParams = undefined;
+export let redirectTo = undefined;
+export let magicLink = false;
+export let showLinks = false;
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+</script>
+
+<Auth
+	view="sign_in"
+	onlyThirdPartyProviders={false}
+	{supabaseClient}
+	{showLinks}
+	{redirectTo}
+	{socialLayout}
+	{providers}
+	{providerScopes}
+	{queryParams}
+	{magicLink}
+	{appearance}
+	{theme}
+	{localization}
+/>

package/dist/Auth/ui/SignIn.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Provider } from '@indobaseinc/auth-js';
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables, ProviderScopes } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        socialLayout?: "horizontal" | "vertical" | undefined;
+        providers?: Provider[] | undefined;
+        providerScopes?: Partial<ProviderScopes> | undefined;
+        queryParams?: {
+            [key: string]: string;
+        } | undefined;
+        redirectTo?: string | undefined;
+        magicLink?: boolean | undefined;
+        showLinks?: boolean | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SignInProps = typeof __propDef.props;
+export type SignInEvents = typeof __propDef.events;
+export type SignInSlots = typeof __propDef.slots;
+export default class SignIn extends SvelteComponentTyped<SignInProps, SignInEvents, SignInSlots> {
+}
+export {};

package/dist/Auth/ui/SignUp.svelte

@@ -0,0 +1,35 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let socialLayout = 'vertical';
+export let providers = [];
+export let providerScopes = undefined;
+export let queryParams = undefined;
+export let redirectTo = undefined;
+export let magicLink = false;
+export let showLinks = false;
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+export let passwordLimit = false;
+export let additionalData = undefined;
+</script>
+
+<Auth
+	view="sign_up"
+	onlyThirdPartyProviders={false}
+	{supabaseClient}
+	{showLinks}
+	{redirectTo}
+	{socialLayout}
+	{providers}
+	{providerScopes}
+	{queryParams}
+	{magicLink}
+	{appearance}
+	{theme}
+	{localization}
+	{passwordLimit}
+	{additionalData}
+>
+	<slot />
+</Auth>

package/dist/Auth/ui/SignUp.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Provider } from '@indobaseinc/auth-js';
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables, ProviderScopes } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        socialLayout?: "horizontal" | "vertical" | undefined;
+        providers?: Provider[] | undefined;
+        providerScopes?: Partial<ProviderScopes> | undefined;
+        queryParams?: {
+            [key: string]: string;
+        } | undefined;
+        redirectTo?: string | undefined;
+        magicLink?: boolean | undefined;
+        showLinks?: boolean | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+        passwordLimit?: boolean | undefined;
+        additionalData?: {
+            [key: string]: any;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SignUpProps = typeof __propDef.props;
+export type SignUpEvents = typeof __propDef.events;
+export type SignUpSlots = typeof __propDef.slots;
+export default class SignUp extends SvelteComponentTyped<SignUpProps, SignUpEvents, SignUpSlots> {
+}
+export {};

package/dist/Auth/ui/SocialAuth.svelte

@@ -0,0 +1,26 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let socialLayout = 'vertical';
+export let providers = [];
+export let providerScopes = undefined;
+export let queryParams = undefined;
+export let redirectTo = undefined;
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+</script>
+
+<Auth
+	view="sign_in"
+	showLinks={false}
+	onlyThirdPartyProviders={true}
+	{supabaseClient}
+	{redirectTo}
+	{socialLayout}
+	{providers}
+	{providerScopes}
+	{queryParams}
+	{appearance}
+	{theme}
+	{localization}
+/>

package/dist/Auth/ui/SocialAuth.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Provider } from '@indobaseinc/auth-js';
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables, ProviderScopes } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        socialLayout?: "horizontal" | "vertical" | undefined;
+        providers?: Provider[] | undefined;
+        providerScopes?: Partial<ProviderScopes> | undefined;
+        queryParams?: {
+            [key: string]: string;
+        } | undefined;
+        redirectTo?: string | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SocialAuthProps = typeof __propDef.props;
+export type SocialAuthEvents = typeof __propDef.events;
+export type SocialAuthSlots = typeof __propDef.slots;
+export default class SocialAuth extends SvelteComponentTyped<SocialAuthProps, SocialAuthEvents, SocialAuthSlots> {
+}
+export {};

package/dist/Auth/ui/UpdatePassword.svelte

@@ -0,0 +1,20 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let redirectTo = undefined;
+export let showLinks = false;
+export let appearance = {};
+export let theme = 'default';
+export let passwordLimit = false;
+export let localization = {};
+</script>
+
+<Auth
+	view="update_password"
+	{showLinks}
+	{supabaseClient}
+	{redirectTo}
+	{appearance}
+	{theme}
+	{passwordLimit}
+	{localization}
+/>

package/dist/Auth/ui/UpdatePassword.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        redirectTo?: string | undefined;
+        showLinks?: boolean | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        passwordLimit?: boolean | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdatePasswordProps = typeof __propDef.props;
+export type UpdatePasswordEvents = typeof __propDef.events;
+export type UpdatePasswordSlots = typeof __propDef.slots;
+export default class UpdatePassword extends SvelteComponentTyped<UpdatePasswordProps, UpdatePasswordEvents, UpdatePasswordSlots> {
+}
+export {};

package/dist/Auth/ui/VerifyOtp.svelte

@@ -0,0 +1,18 @@
+<script>import Auth from '../Auth.svelte';
+export let supabaseClient;
+export let otpType = 'email';
+export let appearance = {};
+export let theme = 'default';
+export let localization = {};
+</script>
+
+<Auth
+	{supabaseClient}
+	showLinks={false}
+	magicLink={false}
+	view="verify_otp"
+	{otpType}
+	{appearance}
+	{theme}
+	{localization}
+/>

package/dist/Auth/ui/VerifyOtp.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import type { I18nVariables, OtpType } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        otpType?: OtpType | undefined;
+        appearance?: Appearance | undefined;
+        theme?: string | undefined;
+        localization?: {
+            variables?: I18nVariables | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VerifyOtpProps = typeof __propDef.props;
+export type VerifyOtpEvents = typeof __propDef.events;
+export type VerifyOtpSlots = typeof __propDef.slots;
+export default class VerifyOtp extends SvelteComponentTyped<VerifyOtpProps, VerifyOtpEvents, VerifyOtpSlots> {
+}
+export {};

package/dist/Auth/ui/index.d.ts

@@ -0,0 +1,7 @@
+export { default as SignUp } from './SignUp.svelte';
+export { default as SignIn } from './SignIn.svelte';
+export { default as MagicLink } from './MagicLink.svelte';
+export { default as SocialAuth } from './SocialAuth.svelte';
+export { default as ForgottenPassword } from './ForgottenPassword.svelte';
+export { default as UpdatePassword } from './UpdatePassword.svelte';
+export { default as VerifyOtp } from './VerifyOtp.svelte';

package/dist/Auth/ui/index.js

@@ -0,0 +1,7 @@
+export { default as SignUp } from './SignUp.svelte';
+export { default as SignIn } from './SignIn.svelte';
+export { default as MagicLink } from './MagicLink.svelte';
+export { default as SocialAuth } from './SocialAuth.svelte';
+export { default as ForgottenPassword } from './ForgottenPassword.svelte';
+export { default as UpdatePassword } from './UpdatePassword.svelte';
+export { default as VerifyOtp } from './VerifyOtp.svelte';

package/dist/UI/Anchor.svelte

@@ -0,0 +1,22 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const anchorHTMLAttributes = css({
+    fontFamily: '$bodyFontFamily',
+    fontSize: '$baseBodySize',
+    marginBottom: '$anchorBottomMargin',
+    color: '$anchorTextColor',
+    display: 'block',
+    textAlign: 'center',
+    textDecoration: 'underline',
+    '&:hover': {
+        color: '$anchorTextHoverColor'
+    }
+});
+export let href;
+export let appearance = {};
+$: classNames = generateClassNames('anchor', anchorHTMLAttributes(), appearance);
+</script>
+
+<a on:click {href} {...$$restProps} style={appearance?.style?.anchor} class={classNames.join(' ')}>
+	<slot />
+</a>

package/dist/UI/Anchor.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Appearance } from '../types';
+declare const __propDef: {
+    props: Omit<svelte.JSX.HTMLAttributes<HTMLAnchorElement>, "href"> & {
+        href: string;
+        appearance?: Appearance | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type AnchorProps_ = typeof __propDef.props;
+export { AnchorProps_ as AnchorProps };
+export type AnchorEvents = typeof __propDef.events;
+export type AnchorSlots = typeof __propDef.slots;
+export default class Anchor extends SvelteComponentTyped<AnchorProps_, AnchorEvents, AnchorSlots> {
+}

package/dist/UI/Button.svelte

@@ -0,0 +1,47 @@
+<script>import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+export let color = 'default';
+export let appearance = {};
+export let loading = false;
+$: classNames = generateClassNames('button', color, appearance);
+</script>
+
+<button on:click {...$$restProps} disabled={loading} style={appearance?.style?.button} class={classNames.join(' ')}>
+	<slot />
+</button>
+
+<style>
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		border-radius: var(--radii-borderRadiusButton);
+		font-size: var(--fontSizes-baseButtonSize);
+		padding: var(--space-buttonPadding);
+		cursor: pointer;
+		border-width: var(--borderWidths-buttonBorderWidth);
+		border-style: solid;
+		width: 100%;
+		transition-property: background-color;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 100ms;
+	}
+
+	button.default {
+		background-color: var(--colors-defaultButtonBackground);
+		color: var(--colors-defaultButtonText);
+		border-color: var(--colors-defaultButtonBorder);
+	}
+	button.default:hover {
+		background-color: var(--colors-defaultButtonBackgroundHover);
+	}
+
+	button.primary {
+		background-color: var(--colors-brand);
+		color: var(--colors-brandButtonText);
+		border-color: var(--colors-brandAccent);
+	}
+	button.primary:hover {
+		background-color: var(--colors-brandAccent);
+	}
+</style>