@marianmeres/stuic 3.67.0 → 3.69.0

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.67.0",
+  "version": "3.69.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",