@marianmeres/stuic 3.67.0 → 3.69.0

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -0,0 +1,223 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type { Props as LoginFormProps } from "../LoginForm/LoginForm.svelte";
+	import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
+	import type { Props as RegisterFormProps } from "../RegisterForm/RegisterForm.svelte";
+	import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+
+	export type LoginOrRegisterFormMode = "login" | "register";
+
+	type InnerPropsCommonOmit =
+		| "formData"
+		| "onSubmit"
+		| "isSubmitting"
+		| "t"
+		| "notifications"
+		| "socialLogins"
+		| "socialDividerLabel"
+		| "footer";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** Bindable active mode. Default: "login" */
+		mode?: LoginOrRegisterFormMode;
+
+		/** Bindable login formData (forwarded to LoginForm) */
+		loginData?: LoginFormData;
+
+		/** Bindable register formData (forwarded to RegisterForm) */
+		registerData?: RegisterFormData;
+
+		/** Called when the inner LoginForm submits successfully. */
+		onLogin: (data: LoginFormData) => void;
+
+		/** Called when the inner RegisterForm submits successfully. */
+		onRegister: (data: RegisterFormData) => void;
+
+		/** Applied to both inner forms' submit buttons. */
+		isSubmitting?: boolean;
+
+		/** Pass-through props for the inner LoginForm (spread). */
+		loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+
+		/** Pass-through props for the inner RegisterForm (spread). */
+		registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
+
+		/** Override the built-in ButtonGroupRadio mode switcher. */
+		modeSwitcher?: Snippet<
+			[
+				{
+					mode: LoginOrRegisterFormMode;
+					setMode: (m: LoginOrRegisterFormMode) => void;
+					t: TranslateFn;
+				},
+			]
+		>;
+
+		/** Override the "Log in" tab label. */
+		loginModeLabel?: string;
+
+		/** Override the "Sign up" tab label. */
+		registerModeLabel?: string;
+
+		/**
+		 * Social/OAuth login buttons rendered ONCE below the active form.
+		 * Shared between both modes (OAuth works for either flow).
+		 */
+		socialLogins?: Snippet;
+
+		/**
+		 * Override the divider label above social login buttons.
+		 * Default: i18n key "login_or_register_form.social_divider".
+		 * Set to `false` to hide the divider while still rendering socialLogins.
+		 */
+		socialDividerLabel?: string | false;
+
+		/**
+		 * Footer snippet. Receives the current mode + setter so consumers can
+		 * render mode-aware content (e.g., "Already have an account? Sign in").
+		 */
+		footer?: Snippet<
+			[
+				{
+					mode: LoginOrRegisterFormMode;
+					setMode: (m: LoginOrRegisterFormMode) => void;
+				},
+			]
+		>;
+
+		notifications?: NotificationsStack;
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./_internal/login-or-register-form-i18n-defaults.js";
+	import LoginForm from "../LoginForm/LoginForm.svelte";
+	import { createEmptyLoginFormData } from "../LoginForm/_internal/login-form-utils.js";
+	import RegisterForm from "../RegisterForm/RegisterForm.svelte";
+	import { createEmptyRegisterFormData } from "../RegisterForm/_internal/register-form-utils.js";
+	import ButtonGroupRadio from "../ButtonGroupRadio/ButtonGroupRadio.svelte";
+
+	let {
+		mode = $bindable("login"),
+		loginData = $bindable(createEmptyLoginFormData()),
+		registerData = $bindable(createEmptyRegisterFormData()),
+		onLogin,
+		onRegister,
+		isSubmitting = false,
+		loginProps,
+		registerProps,
+		modeSwitcher,
+		loginModeLabel,
+		registerModeLabel,
+		socialLogins,
+		socialDividerLabel,
+		footer,
+		notifications,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	let loginLabel = $derived(loginModeLabel ?? t("login_or_register_form.mode_login"));
+	let registerLabel = $derived(
+		registerModeLabel ?? t("login_or_register_form.mode_register")
+	);
+
+	// One-shot email transfer at the transition boundary. Keeps the email
+	// persistent across mode switches without setting up a continuous sync
+	// effect (which would be prone to loops).
+	function setMode(next: LoginOrRegisterFormMode) {
+		if (next === mode) return;
+		if (next === "register") {
+			registerData.email = loginData.email;
+		} else {
+			loginData.email = registerData.email;
+		}
+		mode = next;
+	}
+
+	let switcherOptions = $derived([
+		{ label: loginLabel, value: "login" },
+		{ label: registerLabel, value: "register" },
+	]);
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-login-or-register-form", classProp)
+	);
+</script>
+
+<div class={_class} {...rest}>
+	<!-- Mode switcher -->
+	<div class={unstyled ? undefined : "stuic-login-or-register-form-switcher"}>
+		{#if modeSwitcher}
+			{@render modeSwitcher({ mode, setMode, t })}
+		{:else}
+			<ButtonGroupRadio
+				options={switcherOptions}
+				value={mode}
+				onButtonClick={(idx) => {
+					setMode(idx === 0 ? "login" : "register");
+					return false;
+				}}
+			/>
+		{/if}
+	</div>
+
+	<!-- Active form -->
+	<div class={unstyled ? undefined : "stuic-login-or-register-form-body"}>
+		{#if mode === "login"}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<LoginForm
+				bind:formData={loginData}
+				onSubmit={onLogin}
+				{isSubmitting}
+				{notifications}
+				t={tProp}
+				{...loginProps}
+			/>
+		{:else}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<RegisterForm
+				bind:formData={registerData}
+				onSubmit={onRegister}
+				{isSubmitting}
+				{notifications}
+				t={tProp}
+				{...registerProps}
+			/>
+		{/if}
+	</div>
+
+	<!-- Shared social logins -->
+	{#if socialLogins}
+		<div class={unstyled ? undefined : "stuic-login-or-register-form-social"}>
+			{#if socialDividerLabel !== false}
+				<div class={unstyled ? undefined : "stuic-login-or-register-form-social-divider"}>
+					<span>
+						{typeof socialDividerLabel === "string"
+							? socialDividerLabel
+							: t("login_or_register_form.social_divider")}
+					</span>
+				</div>
+			{/if}
+			<div class={unstyled ? undefined : "stuic-login-or-register-form-social-buttons"}>
+				{@render socialLogins()}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Footer -->
+	{#if footer}
+		{@render footer({ mode, setMode })}
+	{/if}
+</div>

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { Props as LoginFormProps } from "../LoginForm/LoginForm.svelte";
+import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
+import type { Props as RegisterFormProps } from "../RegisterForm/RegisterForm.svelte";
+import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+export type LoginOrRegisterFormMode = "login" | "register";
+type InnerPropsCommonOmit = "formData" | "onSubmit" | "isSubmitting" | "t" | "notifications" | "socialLogins" | "socialDividerLabel" | "footer";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Bindable active mode. Default: "login" */
+    mode?: LoginOrRegisterFormMode;
+    /** Bindable login formData (forwarded to LoginForm) */
+    loginData?: LoginFormData;
+    /** Bindable register formData (forwarded to RegisterForm) */
+    registerData?: RegisterFormData;
+    /** Called when the inner LoginForm submits successfully. */
+    onLogin: (data: LoginFormData) => void;
+    /** Called when the inner RegisterForm submits successfully. */
+    onRegister: (data: RegisterFormData) => void;
+    /** Applied to both inner forms' submit buttons. */
+    isSubmitting?: boolean;
+    /** Pass-through props for the inner LoginForm (spread). */
+    loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+    /** Pass-through props for the inner RegisterForm (spread). */
+    registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
+    /** Override the built-in ButtonGroupRadio mode switcher. */
+    modeSwitcher?: Snippet<[
+        {
+            mode: LoginOrRegisterFormMode;
+            setMode: (m: LoginOrRegisterFormMode) => void;
+            t: TranslateFn;
+        }
+    ]>;
+    /** Override the "Log in" tab label. */
+    loginModeLabel?: string;
+    /** Override the "Sign up" tab label. */
+    registerModeLabel?: string;
+    /**
+     * Social/OAuth login buttons rendered ONCE below the active form.
+     * Shared between both modes (OAuth works for either flow).
+     */
+    socialLogins?: Snippet;
+    /**
+     * Override the divider label above social login buttons.
+     * Default: i18n key "login_or_register_form.social_divider".
+     * Set to `false` to hide the divider while still rendering socialLogins.
+     */
+    socialDividerLabel?: string | false;
+    /**
+     * Footer snippet. Receives the current mode + setter so consumers can
+     * render mode-aware content (e.g., "Already have an account? Sign in").
+     */
+    footer?: Snippet<[
+        {
+            mode: LoginOrRegisterFormMode;
+            setMode: (m: LoginOrRegisterFormMode) => void;
+        }
+    ]>;
+    notifications?: NotificationsStack;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+}
+declare const LoginOrRegisterForm: import("svelte").Component<Props, {}, "mode" | "loginData" | "registerData">;
+type LoginOrRegisterForm = ReturnType<typeof LoginOrRegisterForm>;
+export default LoginOrRegisterForm;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -0,0 +1,184 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { TranslateFn } from "../../types.js";
+	import type {
+		LoginOrRegisterFormMode,
+		Props as InnerProps,
+	} from "./LoginOrRegisterForm.svelte";
+	import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
+	import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+
+	export interface Props {
+		/** Bindable active mode. Default: "login" */
+		mode?: LoginOrRegisterFormMode;
+
+		/** Bindable login formData */
+		loginData?: LoginFormData;
+
+		/** Bindable register formData */
+		registerData?: RegisterFormData;
+
+		onLogin: (data: LoginFormData) => void;
+		onRegister: (data: RegisterFormData) => void;
+
+		isSubmitting?: boolean;
+
+		loginProps?: InnerProps["loginProps"];
+		registerProps?: InnerProps["registerProps"];
+
+		modeSwitcher?: InnerProps["modeSwitcher"];
+
+		loginModeLabel?: string;
+		registerModeLabel?: string;
+
+		/** Shared social logins (rendered below the active form). */
+		socialLogins?: Snippet;
+		socialDividerLabel?: string | false;
+
+		/** Footer snippet. Receives mode + setter. */
+		footer?: InnerProps["footer"];
+
+		notifications?: NotificationsStack;
+
+		/**
+		 * Override the modal title. If omitted, a mode-aware default is used
+		 * ("Log In" vs "Create account").
+		 */
+		title?: string;
+
+		/** Bindable modal visibility */
+		visible?: boolean;
+
+		/** Optional trigger element rendered outside the modal. */
+		trigger?: Snippet<[{ open: () => void }]>;
+
+		/** CSS class for the Modal box */
+		classModal?: string;
+
+		/** CSS class for the Modal inner width container */
+		classInner?: string;
+
+		/** CSS class for the LoginOrRegisterForm */
+		classForm?: string;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+
+		noXClose?: boolean;
+		onClose?: () => false | void;
+	}
+</script>
+
+<script lang="ts">
+	import Modal from "../Modal/Modal.svelte";
+	import LoginOrRegisterForm from "./LoginOrRegisterForm.svelte";
+	import Button from "../Button/Button.svelte";
+	import { t_default } from "./_internal/login-or-register-form-i18n-defaults.js";
+	import { createEmptyLoginFormData } from "../LoginForm/_internal/login-form-utils.js";
+	import { createEmptyRegisterFormData } from "../RegisterForm/_internal/register-form-utils.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import H from "../H/H.svelte";
+
+	let {
+		mode = $bindable("login"),
+		loginData = $bindable(createEmptyLoginFormData()),
+		registerData = $bindable(createEmptyRegisterFormData()),
+		onLogin,
+		onRegister,
+		isSubmitting = false,
+		loginProps,
+		registerProps,
+		modeSwitcher,
+		loginModeLabel,
+		registerModeLabel,
+		socialLogins,
+		socialDividerLabel,
+		footer,
+		notifications,
+		title,
+		visible = $bindable(false),
+		trigger,
+		classModal,
+		classInner,
+		classForm,
+		t: tProp,
+		unstyled = false,
+		noXClose = false,
+		onClose,
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	let resolvedTitle = $derived(
+		title ??
+			(mode === "login"
+				? t("login_or_register_form.modal_title_login")
+				: t("login_or_register_form.modal_title_register"))
+	);
+
+	let modal: Modal = $state()!;
+
+	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		modal.open(openerOrEvent);
+	}
+
+	export function close() {
+		modal.close();
+	}
+</script>
+
+{#if trigger}
+	{@render trigger({ open: (e?: MouseEvent) => modal.open(e) })}
+{/if}
+
+<Modal
+	bind:this={modal}
+	bind:visible
+	class={classModal}
+	classInner={twMerge("max-w-sm md:max-w-sm", "h-auto md:h-auto m-auto", classInner)}
+	classDialog="flex items-center justify-center"
+>
+	{#snippet header()}
+		<div class="flex items-center justify-between p-4 pb-0">
+			<H level={1} renderLevel={3} class="pl-2">
+				{resolvedTitle}
+			</H>
+			{#if !noXClose}
+				<Button
+					variant="ghost"
+					onclick={() => {
+						if (onClose?.() === false) return;
+						modal.close();
+					}}
+					aria-label="Close"
+					x
+					iconButton
+				/>
+			{/if}
+		</div>
+	{/snippet}
+
+	<div class="p-6 pt-3">
+		<LoginOrRegisterForm
+			bind:mode
+			bind:loginData
+			bind:registerData
+			{onLogin}
+			{onRegister}
+			{isSubmitting}
+			{loginProps}
+			{registerProps}
+			{modeSwitcher}
+			{loginModeLabel}
+			{registerModeLabel}
+			{socialLogins}
+			{socialDividerLabel}
+			{footer}
+			{notifications}
+			t={tProp}
+			{unstyled}
+			class={classForm}
+		/>
+	</div>
+</Modal>

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from "svelte";
+import type { TranslateFn } from "../../types.js";
+import type { LoginOrRegisterFormMode, Props as InnerProps } from "./LoginOrRegisterForm.svelte";
+import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
+import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+export interface Props {
+    /** Bindable active mode. Default: "login" */
+    mode?: LoginOrRegisterFormMode;
+    /** Bindable login formData */
+    loginData?: LoginFormData;
+    /** Bindable register formData */
+    registerData?: RegisterFormData;
+    onLogin: (data: LoginFormData) => void;
+    onRegister: (data: RegisterFormData) => void;
+    isSubmitting?: boolean;
+    loginProps?: InnerProps["loginProps"];
+    registerProps?: InnerProps["registerProps"];
+    modeSwitcher?: InnerProps["modeSwitcher"];
+    loginModeLabel?: string;
+    registerModeLabel?: string;
+    /** Shared social logins (rendered below the active form). */
+    socialLogins?: Snippet;
+    socialDividerLabel?: string | false;
+    /** Footer snippet. Receives mode + setter. */
+    footer?: InnerProps["footer"];
+    notifications?: NotificationsStack;
+    /**
+     * Override the modal title. If omitted, a mode-aware default is used
+     * ("Log In" vs "Create account").
+     */
+    title?: string;
+    /** Bindable modal visibility */
+    visible?: boolean;
+    /** Optional trigger element rendered outside the modal. */
+    trigger?: Snippet<[{
+        open: () => void;
+    }]>;
+    /** CSS class for the Modal box */
+    classModal?: string;
+    /** CSS class for the Modal inner width container */
+    classInner?: string;
+    /** CSS class for the LoginOrRegisterForm */
+    classForm?: string;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    noXClose?: boolean;
+    onClose?: () => false | void;
+}
+declare const LoginOrRegisterFormModal: import("svelte").Component<Props, {
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    close: () => void;
+}, "visible" | "mode" | "loginData" | "registerData">;
+type LoginOrRegisterFormModal = ReturnType<typeof LoginOrRegisterFormModal>;
+export default LoginOrRegisterFormModal;

package/dist/components/LoginOrRegisterForm/_internal/login-or-register-form-i18n-defaults.d.ts

@@ -0,0 +1 @@
+export declare function t_default(k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean): string;

package/dist/components/LoginOrRegisterForm/_internal/login-or-register-form-i18n-defaults.js

@@ -0,0 +1,17 @@
+import { isPlainObject } from "../../../utils/is-plain-object.js";
+import { replaceMap } from "../../../utils/replace-map.js";
+const DEFAULTS = {
+    "login_or_register_form.mode_login": "Log in",
+    "login_or_register_form.mode_register": "Sign up",
+    "login_or_register_form.social_divider": "or continue with",
+    "login_or_register_form.modal_title_login": "Log In",
+    "login_or_register_form.modal_title_register": "Create account",
+};
+export function t_default(k, values = null, fallback = "") {
+    const out = DEFAULTS[k] ?? (typeof fallback === "string" ? fallback : "") ?? k;
+    return isPlainObject(values)
+        ? replaceMap(out, values, {
+            preSearchKeyTransform: (k) => `{${k}}`,
+        })
+        : out;
+}

package/dist/components/LoginOrRegisterForm/index.css

@@ -0,0 +1,66 @@
+:root {
+	/* LoginOrRegisterForm */
+	--stuic-login-or-register-form-gap: 1rem;
+	--stuic-login-or-register-form-switcher-margin-bottom: 1rem;
+
+	/* Social login section (shared, rendered at composite level) */
+	--stuic-login-or-register-form-social-margin-top: 1rem;
+	--stuic-login-or-register-form-social-gap: 0.75rem;
+	--stuic-login-or-register-form-social-divider-color: var(
+		--stuic-color-muted-foreground
+	);
+	--stuic-login-or-register-form-social-divider-line-color: var(--stuic-color-border);
+	--stuic-login-or-register-form-social-divider-font-size: var(--text-sm);
+	--stuic-login-or-register-form-social-divider-margin-bottom: 0.75rem;
+}
+
+@layer components {
+	.stuic-login-or-register-form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-login-or-register-form-gap);
+	}
+
+	.stuic-login-or-register-form-switcher {
+		display: flex;
+		justify-content: center;
+		margin-bottom: var(--stuic-login-or-register-form-switcher-margin-bottom);
+
+		.stuic-button-group-radio {
+			width: 100%;
+		}
+	}
+
+	.stuic-login-or-register-form-body {
+		display: contents;
+	}
+
+	/* Social login container */
+	.stuic-login-or-register-form-social {
+		margin-top: var(--stuic-login-or-register-form-social-margin-top);
+	}
+
+	/* "or continue with" divider */
+	.stuic-login-or-register-form-social-divider {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-bottom: var(--stuic-login-or-register-form-social-divider-margin-bottom);
+		color: var(--stuic-login-or-register-form-social-divider-color);
+		font-size: var(--stuic-login-or-register-form-social-divider-font-size);
+	}
+
+	.stuic-login-or-register-form-social-divider::before,
+	.stuic-login-or-register-form-social-divider::after {
+		content: "";
+		flex: 1;
+		border-top: 1px solid var(--stuic-login-or-register-form-social-divider-line-color);
+	}
+
+	/* Button container */
+	.stuic-login-or-register-form-social-buttons {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-login-or-register-form-social-gap);
+	}
+}

package/dist/components/LoginOrRegisterForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoginOrRegisterForm, type Props as LoginOrRegisterFormProps, type LoginOrRegisterFormMode, } from "./LoginOrRegisterForm.svelte";
+export { default as LoginOrRegisterFormModal, type Props as LoginOrRegisterFormModalProps, } from "./LoginOrRegisterFormModal.svelte";

package/dist/components/LoginOrRegisterForm/index.js

@@ -0,0 +1,2 @@
+export { default as LoginOrRegisterForm, } from "./LoginOrRegisterForm.svelte";
+export { default as LoginOrRegisterFormModal, } from "./LoginOrRegisterFormModal.svelte";