@marianmeres/stuic 3.68.0 → 3.70.0

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

@@ -0,0 +1,77 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { RegisterFieldConfig, RegisterFormData, RegisterFormValidationError } from "./_internal/register-form-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
+    /** Bindable register data. Default: createEmptyRegisterFormData() */
+    formData?: RegisterFormData;
+    /** Called on form submit after client-side validation passes. */
+    onSubmit: (data: RegisterFormData) => void;
+    /** Whether the form is currently submitting (disables CTA) */
+    isSubmitting?: boolean;
+    /** Field-specific validation errors (e.g., from server) */
+    errors?: RegisterFormValidationError[];
+    /**
+     * General error message (not field-specific).
+     * Rendered as an alert box above the form.
+     * Example: "Email already registered"
+     */
+    error?: string;
+    /** Show password confirmation field. Default: true */
+    showPasswordConfirm?: boolean;
+    /** Minimum password length. Fed into FieldInput `minlength` + validator. Default: 8 */
+    passwordMinLength?: number;
+    /**
+     * Declarative extra fields rendered as FieldInput entries.
+     * Values bind into `formData.extra[name]`.
+     */
+    extraFields?: RegisterFieldConfig[];
+    /**
+     * Escape hatch for non-FieldInput extras (e.g., terms-of-service checkbox).
+     * Rendered after the declarative `extraFields` (bottom position) and before the submit.
+     * Receives `formData` (bindable) and a `fieldError(name)` lookup.
+     */
+    extraFieldsSlot?: Snippet<[
+        {
+            formData: RegisterFormData;
+            fieldError: (name: string) => string | undefined;
+        }
+    ]>;
+    /** Override CTA label */
+    submitLabel?: string;
+    /** Override CTA label while submitting */
+    submittingLabel?: string;
+    /** Override the CTA section */
+    submitButton?: Snippet<[{
+        isSubmitting: boolean;
+        disabled: boolean;
+    }]>;
+    /**
+     * Social/OAuth login buttons rendered below the primary form.
+     * When provided, a styled "or continue with" divider is shown above.
+     * Consumer renders the buttons — the library provides layout + divider.
+     */
+    socialLogins?: Snippet;
+    /**
+     * Override the divider label above social login buttons.
+     * Default: i18n key "register_form.social_divider" ("or continue with").
+     * Set to `false` to hide the divider while still rendering socialLogins.
+     */
+    socialDividerLabel?: string | false;
+    /**
+     * Content below the form.
+     * Use for "Already have an account?" links, legal text, etc.
+     */
+    footer?: Snippet;
+    /** Optional notifications instance — errors will be sent via notifications.error() */
+    notifications?: NotificationsStack;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLFormElement;
+    compact?: boolean;
+}
+declare const RegisterForm: import("svelte").Component<Props, {}, "el" | "formData">;
+type RegisterForm = ReturnType<typeof RegisterForm>;
+export default RegisterForm;

package/dist/components/RegisterForm/RegisterFormModal.svelte

@@ -0,0 +1,212 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { TranslateFn } from "../../types.js";
+	import type {
+		RegisterFieldConfig,
+		RegisterFormData,
+		RegisterFormValidationError,
+	} from "./_internal/register-form-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+
+	export interface Props {
+		/** Bindable register data. Default: createEmptyRegisterFormData() */
+		formData?: RegisterFormData;
+
+		/** Called on form submit after client-side validation passes. */
+		onSubmit: (data: RegisterFormData) => void;
+
+		/** Whether the form is currently submitting (disables CTA) */
+		isSubmitting?: boolean;
+
+		/** Field-specific validation errors (e.g., from server) */
+		errors?: RegisterFormValidationError[];
+
+		/**
+		 * General error message (not field-specific).
+		 * Rendered as an alert box above the form.
+		 */
+		error?: string;
+
+		/** Show password confirmation field. Default: true */
+		showPasswordConfirm?: boolean;
+
+		/** Minimum password length. Default: 8 */
+		passwordMinLength?: number;
+
+		/** Declarative extra fields */
+		extraFields?: RegisterFieldConfig[];
+
+		/** Escape-hatch slot for non-FieldInput extras */
+		extraFieldsSlot?: Snippet<
+			[
+				{
+					formData: RegisterFormData;
+					fieldError: (name: string) => string | undefined;
+				},
+			]
+		>;
+
+		/** Override CTA label */
+		submitLabel?: string;
+
+		/** Override CTA label while submitting */
+		submittingLabel?: string;
+
+		/** Override the CTA section */
+		submitButton?: Snippet<[{ isSubmitting: boolean; disabled: boolean }]>;
+
+		/**
+		 * Social/OAuth login buttons rendered below the primary form.
+		 */
+		socialLogins?: Snippet;
+
+		/**
+		 * Override the divider label above social login buttons.
+		 */
+		socialDividerLabel?: string | false;
+
+		/**
+		 * Content below the form.
+		 */
+		footer?: Snippet;
+
+		/** Optional notifications instance */
+		notifications?: NotificationsStack;
+
+		/** Modal title. Default: i18n key "register_form.modal_title" ("Create account") */
+		title?: string;
+
+		/** Bindable modal visibility */
+		visible?: boolean;
+
+		/**
+		 * Optional trigger element rendered outside the modal.
+		 * Receives an `open` callback.
+		 */
+		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 RegisterForm */
+		classForm?: string;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+
+		noXClose?: boolean;
+		onClose?: () => false | void;
+	}
+</script>
+
+<script lang="ts">
+	import Modal from "../Modal/Modal.svelte";
+	import RegisterForm from "./RegisterForm.svelte";
+	import Button from "../Button/Button.svelte";
+	import { t_default } from "./_internal/register-form-i18n-defaults.js";
+	import { createEmptyRegisterFormData } from "./_internal/register-form-utils.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import H from "../H/H.svelte";
+
+	let {
+		formData = $bindable(createEmptyRegisterFormData()),
+		onSubmit,
+		isSubmitting = false,
+		errors,
+		error,
+		showPasswordConfirm,
+		passwordMinLength,
+		extraFields,
+		extraFieldsSlot,
+		submitLabel,
+		submittingLabel,
+		submitButton,
+		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 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">
+				{title ?? t("register_form.modal_title")}
+			</H>
+			{#if !noXClose}
+				<Button
+					variant="ghost"
+					onclick={() => {
+						// no auto close if explicit false signal returned
+						if (onClose?.() === false) return;
+						modal.close();
+					}}
+					aria-label="Close"
+					x
+					iconButton
+				/>
+			{/if}
+		</div>
+	{/snippet}
+
+	<div class="p-6 pt-3">
+		<RegisterForm
+			bind:formData
+			{onSubmit}
+			{isSubmitting}
+			{errors}
+			{error}
+			{showPasswordConfirm}
+			{passwordMinLength}
+			{extraFields}
+			{extraFieldsSlot}
+			{submitLabel}
+			{submittingLabel}
+			{submitButton}
+			{socialLogins}
+			{socialDividerLabel}
+			{footer}
+			{notifications}
+			t={tProp}
+			{unstyled}
+			class={classForm}
+			compact
+		/>
+	</div>
+</Modal>

package/dist/components/RegisterForm/RegisterFormModal.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { Snippet } from "svelte";
+import type { TranslateFn } from "../../types.js";
+import type { RegisterFieldConfig, RegisterFormData, RegisterFormValidationError } from "./_internal/register-form-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+export interface Props {
+    /** Bindable register data. Default: createEmptyRegisterFormData() */
+    formData?: RegisterFormData;
+    /** Called on form submit after client-side validation passes. */
+    onSubmit: (data: RegisterFormData) => void;
+    /** Whether the form is currently submitting (disables CTA) */
+    isSubmitting?: boolean;
+    /** Field-specific validation errors (e.g., from server) */
+    errors?: RegisterFormValidationError[];
+    /**
+     * General error message (not field-specific).
+     * Rendered as an alert box above the form.
+     */
+    error?: string;
+    /** Show password confirmation field. Default: true */
+    showPasswordConfirm?: boolean;
+    /** Minimum password length. Default: 8 */
+    passwordMinLength?: number;
+    /** Declarative extra fields */
+    extraFields?: RegisterFieldConfig[];
+    /** Escape-hatch slot for non-FieldInput extras */
+    extraFieldsSlot?: Snippet<[
+        {
+            formData: RegisterFormData;
+            fieldError: (name: string) => string | undefined;
+        }
+    ]>;
+    /** Override CTA label */
+    submitLabel?: string;
+    /** Override CTA label while submitting */
+    submittingLabel?: string;
+    /** Override the CTA section */
+    submitButton?: Snippet<[{
+        isSubmitting: boolean;
+        disabled: boolean;
+    }]>;
+    /**
+     * Social/OAuth login buttons rendered below the primary form.
+     */
+    socialLogins?: Snippet;
+    /**
+     * Override the divider label above social login buttons.
+     */
+    socialDividerLabel?: string | false;
+    /**
+     * Content below the form.
+     */
+    footer?: Snippet;
+    /** Optional notifications instance */
+    notifications?: NotificationsStack;
+    /** Modal title. Default: i18n key "register_form.modal_title" ("Create account") */
+    title?: string;
+    /** Bindable modal visibility */
+    visible?: boolean;
+    /**
+     * Optional trigger element rendered outside the modal.
+     * Receives an `open` callback.
+     */
+    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 RegisterForm */
+    classForm?: string;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    noXClose?: boolean;
+    onClose?: () => false | void;
+}
+declare const RegisterFormModal: import("svelte").Component<Props, {
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    close: () => void;
+}, "visible" | "formData">;
+type RegisterFormModal = ReturnType<typeof RegisterFormModal>;
+export default RegisterFormModal;

package/dist/components/RegisterForm/_internal/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/RegisterForm/_internal/register-form-i18n-defaults.js

@@ -0,0 +1,30 @@
+import { isPlainObject } from "../../../utils/is-plain-object.js";
+import { replaceMap } from "../../../utils/replace-map.js";
+const DEFAULTS = {
+    "register_form.email_label": "Email",
+    "register_form.email_placeholder": "you@example.com",
+    "register_form.password_label": "Password",
+    "register_form.password_placeholder": "",
+    "register_form.password_confirm_label": "Confirm password",
+    "register_form.password_confirm_placeholder": "",
+    "register_form.submit": "Create account",
+    "register_form.submitting": "Creating account...",
+    "register_form.email_required": "Email is required",
+    "register_form.email_invalid": "Please enter a valid email address",
+    "register_form.password_required": "Password is required",
+    "register_form.password_too_short": "Password must be at least {min} characters",
+    "register_form.password_confirm_required": "Please confirm your password",
+    "register_form.password_mismatch": "Passwords do not match",
+    "register_form.field_required": "{label} is required",
+    "register_form.social_divider": "or continue with",
+    "register_form.already_have_account": "Already have an account?",
+    "register_form.modal_title": "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/RegisterForm/_internal/register-form-types.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+export interface RegisterFormData {
+    email: string;
+    password: string;
+    passwordConfirm: string;
+    /** Values for consumer-defined extraFields, keyed by field name. */
+    extra: Record<string, unknown>;
+}
+export interface RegisterFormValidationError {
+    field: string;
+    message: string;
+}
+/** Declarative descriptor for a consumer-defined FieldInput-style extra field. */
+export interface RegisterFieldConfig {
+    /** Key under formData.extra where the value lives. Must be unique. */
+    name: string;
+    /** Visible label (already translated; RegisterForm does not apply `t()` here). */
+    label: string;
+    /** FieldInput `type`. Default "text". */
+    type?: "text" | "email" | "tel" | "url" | "password" | "number";
+    placeholder?: string;
+    required?: boolean;
+    autocomplete?: HTMLInputAttributes["autocomplete"];
+    /** Initial value to seed into formData.extra[name] if undefined. */
+    initialValue?: unknown;
+    /**
+     * Synchronous validator. Return empty string / undefined for "valid".
+     * Return a message string for "invalid" (wired into the same allErrors pipeline).
+     */
+    validate?: (value: unknown, data: RegisterFormData) => string | undefined;
+    /** Render before core fields ("top") or after passwordConfirm ("bottom"). Default "bottom". */
+    position?: "top" | "bottom";
+    /** Extra passthrough props merged onto FieldInput. */
+    props?: Record<string, unknown>;
+}

package/dist/components/RegisterForm/_internal/register-form-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/RegisterForm/_internal/register-form-utils.d.ts

@@ -0,0 +1,7 @@
+import type { RegisterFieldConfig, RegisterFormData, RegisterFormValidationError } from "./register-form-types.js";
+import type { TranslateFn } from "../../../types.js";
+export declare function validateRegisterForm(data: RegisterFormData, t: TranslateFn, extraFields?: RegisterFieldConfig[], options?: {
+    showPasswordConfirm?: boolean;
+    passwordMinLength?: number;
+}): RegisterFormValidationError[];
+export declare function createEmptyRegisterFormData(): RegisterFormData;

package/dist/components/RegisterForm/_internal/register-form-utils.js

@@ -0,0 +1,55 @@
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export function validateRegisterForm(data, t, extraFields = [], options = {}) {
+    const { showPasswordConfirm = true, passwordMinLength = 8 } = options;
+    const errors = [];
+    const trimmedEmail = data.email.trim();
+    if (!trimmedEmail) {
+        errors.push({ field: "email", message: t("register_form.email_required") });
+    }
+    else if (!EMAIL_RE.test(trimmedEmail)) {
+        errors.push({ field: "email", message: t("register_form.email_invalid") });
+    }
+    if (!data.password) {
+        errors.push({ field: "password", message: t("register_form.password_required") });
+    }
+    else if (data.password.length < passwordMinLength) {
+        errors.push({
+            field: "password",
+            message: t("register_form.password_too_short", { min: passwordMinLength }),
+        });
+    }
+    if (showPasswordConfirm) {
+        if (!data.passwordConfirm) {
+            errors.push({
+                field: "passwordConfirm",
+                message: t("register_form.password_confirm_required"),
+            });
+        }
+        else if (data.password && data.password !== data.passwordConfirm) {
+            errors.push({
+                field: "passwordConfirm",
+                message: t("register_form.password_mismatch"),
+            });
+        }
+    }
+    for (const cfg of extraFields) {
+        const value = data.extra?.[cfg.name];
+        const asString = typeof value === "string" ? value : value == null ? "" : String(value);
+        if (cfg.required && !asString.trim()) {
+            errors.push({
+                field: cfg.name,
+                message: t("register_form.field_required", { label: cfg.label }),
+            });
+            continue;
+        }
+        if (cfg.validate) {
+            const msg = cfg.validate(value, data);
+            if (msg)
+                errors.push({ field: cfg.name, message: msg });
+        }
+    }
+    return errors;
+}
+export function createEmptyRegisterFormData() {
+    return { email: "", password: "", passwordConfirm: "", extra: {} };
+}

package/dist/components/RegisterForm/index.css

@@ -0,0 +1,70 @@
+:root {
+	/* RegisterForm */
+	--stuic-register-form-gap: 0rem;
+	--stuic-register-form-gap-row: 1rem;
+
+	/* Social login section */
+	--stuic-register-form-social-margin-top: 1rem;
+	--stuic-register-form-social-gap: 0.75rem;
+	--stuic-register-form-social-divider-color: var(--stuic-color-muted-foreground);
+	--stuic-register-form-social-divider-line-color: var(--stuic-color-border);
+	--stuic-register-form-social-divider-font-size: var(--text-sm);
+	--stuic-register-form-social-divider-margin-bottom: 0.75rem;
+}
+
+@layer components {
+	.stuic-register-form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-register-form-gap);
+	}
+
+	.stuic-register-form-submit {
+		margin-top: 1rem;
+	}
+
+	/* Social login container */
+	.stuic-register-form-social {
+		margin-top: var(--stuic-register-form-social-margin-top);
+	}
+
+	/* "or continue with" divider */
+	.stuic-register-form-social-divider {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-bottom: var(--stuic-register-form-social-divider-margin-bottom);
+		color: var(--stuic-register-form-social-divider-color);
+		font-size: var(--stuic-register-form-social-divider-font-size);
+	}
+
+	.stuic-register-form-social-divider::before,
+	.stuic-register-form-social-divider::after {
+		content: "";
+		flex: 1;
+		border-top: 1px solid var(--stuic-register-form-social-divider-line-color);
+	}
+
+	/* Button container */
+	.stuic-register-form-social-buttons {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-register-form-social-gap);
+	}
+
+	.stuic-register-form-compact-cta {
+		display: flex;
+		align-items: center;
+		margin-top: 0.5rem;
+		gap: 2rem;
+	}
+
+	.stuic-register-form[data-compact] {
+		.stuic-register-form-submit {
+			margin-top: 0.5rem;
+		}
+		.stuic-button {
+			flex: 1;
+		}
+	}
+}

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

@@ -0,0 +1,4 @@
+export { default as RegisterForm, type Props as RegisterFormProps, } from "./RegisterForm.svelte";
+export { default as RegisterFormModal, type Props as RegisterFormModalProps, } from "./RegisterFormModal.svelte";
+export { createEmptyRegisterFormData } from "./_internal/register-form-utils.js";
+export type { RegisterFormData, RegisterFormValidationError, RegisterFieldConfig, } from "./_internal/register-form-types.js";

package/dist/components/RegisterForm/index.js

@@ -0,0 +1,3 @@
+export { default as RegisterForm, } from "./RegisterForm.svelte";
+export { default as RegisterFormModal, } from "./RegisterFormModal.svelte";
+export { createEmptyRegisterFormData } from "./_internal/register-form-utils.js";

package/dist/index.css

@@ -63,6 +63,8 @@ In practice:
 @import "./components/Card/index.css";
 @import "./components/Carousel/index.css";
 @import "./components/LoginForm/index.css";
+@import "./components/RegisterForm/index.css";
+@import "./components/LoginOrRegisterForm/index.css";
 @import "./components/Checkout/index.css";
 @import "./components/CommandMenu/index.css";
 @import "./components/CronInput/index.css";

package/dist/index.d.ts

@@ -51,6 +51,8 @@ export * from "./components/IconSwap/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";
 export * from "./components/LoginForm/index.js";
+export * from "./components/RegisterForm/index.js";
+export * from "./components/LoginOrRegisterForm/index.js";
 export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";

package/dist/index.js

@@ -52,6 +52,8 @@ export * from "./components/IconSwap/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";
 export * from "./components/LoginForm/index.js";
+export * from "./components/RegisterForm/index.js";
+export * from "./components/LoginOrRegisterForm/index.js";
 export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.68.0",
+  "version": "3.70.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",