@marianmeres/stuic 3.70.0 → 3.71.0

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

@@ -5,8 +5,9 @@ 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 { Props as EmailVerifyFormProps } from "../EmailVerifyForm/EmailVerifyForm.svelte";
 import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
-export type LoginOrRegisterFormMode = "login" | "register";
+export type LoginOrRegisterFormMode = "login" | "register" | "verify";
 type InnerPropsCommonOmit = "formData" | "onSubmit" | "isSubmitting" | "t" | "notifications" | "socialLogins" | "socialDividerLabel" | "footer";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Bindable active mode. Default: "login" */
@@ -25,6 +26,19 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
     /** Pass-through props for the inner RegisterForm (spread). */
     registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
+    /**
+     * Bindable email used by EmailVerifyForm (typically copied from registerData.email
+     * when transitioning to "verify" mode).
+     */
+    verifyEmail?: string;
+    /** Called when the user submits a code in the verify view. */
+    onVerify?: (code: string) => void;
+    /** Called when the user clicks "Resend code" in the verify view. */
+    onResendCode?: () => Promise<void> | void;
+    /** Pass-through props for the inner EmailVerifyForm (spread). */
+    verifyProps?: Omit<EmailVerifyFormProps, "email" | "onSubmit" | "onResend" | "isSubmitting" | "t" | "notifications" | "footer">;
+    /** Reserved for future use (verify mode is not exposed in the default switcher). */
+    verifyModeLabel?: string;
     /** Override the built-in ButtonGroupRadio mode switcher. */
     modeSwitcher?: Snippet<[
         {
@@ -63,6 +77,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     unstyled?: boolean;
     class?: string;
 }
-declare const LoginOrRegisterForm: import("svelte").Component<Props, {}, "mode" | "loginData" | "registerData">;
+declare const LoginOrRegisterForm: import("svelte").Component<Props, {}, "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterForm = ReturnType<typeof LoginOrRegisterForm>;
 export default LoginOrRegisterForm;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -19,18 +19,29 @@
 		/** Bindable register formData */
 		registerData?: RegisterFormData;
 
+		/** Bindable email used by EmailVerifyForm. */
+		verifyEmail?: string;
+
 		onLogin: (data: LoginFormData) => void;
 		onRegister: (data: RegisterFormData) => void;
 
+		/** Called when the user submits a code in the verify view. */
+		onVerify?: (code: string) => void;
+
+		/** Called when the user clicks "Resend code" in the verify view. */
+		onResendCode?: () => Promise<void> | void;
+
 		isSubmitting?: boolean;
 
 		loginProps?: InnerProps["loginProps"];
 		registerProps?: InnerProps["registerProps"];
+		verifyProps?: InnerProps["verifyProps"];
 
 		modeSwitcher?: InnerProps["modeSwitcher"];
 
 		loginModeLabel?: string;
 		registerModeLabel?: string;
+		verifyModeLabel?: string;
 
 		/** Shared social logins (rendered below the active form). */
 		socialLogins?: Snippet;
@@ -84,14 +95,19 @@
 		mode = $bindable("login"),
 		loginData = $bindable(createEmptyLoginFormData()),
 		registerData = $bindable(createEmptyRegisterFormData()),
+		verifyEmail = $bindable(""),
 		onLogin,
 		onRegister,
+		onVerify,
+		onResendCode,
 		isSubmitting = false,
 		loginProps,
 		registerProps,
+		verifyProps,
 		modeSwitcher,
 		loginModeLabel,
 		registerModeLabel,
+		verifyModeLabel,
 		socialLogins,
 		socialDividerLabel,
 		footer,
@@ -112,9 +128,11 @@
 
 	let resolvedTitle = $derived(
 		title ??
-			(mode === "login"
-				? t("login_or_register_form.modal_title_login")
-				: t("login_or_register_form.modal_title_register"))
+			(mode === "verify"
+				? t("login_or_register_form.modal_title_verify")
+				: mode === "login"
+					? t("login_or_register_form.modal_title_login")
+					: t("login_or_register_form.modal_title_register"))
 	);
 
 	let modal: Modal = $state()!;
@@ -164,14 +182,19 @@
 			bind:mode
 			bind:loginData
 			bind:registerData
+			bind:verifyEmail
 			{onLogin}
 			{onRegister}
+			{onVerify}
+			{onResendCode}
 			{isSubmitting}
 			{loginProps}
 			{registerProps}
+			{verifyProps}
 			{modeSwitcher}
 			{loginModeLabel}
 			{registerModeLabel}
+			{verifyModeLabel}
 			{socialLogins}
 			{socialDividerLabel}
 			{footer}

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

@@ -11,14 +11,22 @@ export interface Props {
     loginData?: LoginFormData;
     /** Bindable register formData */
     registerData?: RegisterFormData;
+    /** Bindable email used by EmailVerifyForm. */
+    verifyEmail?: string;
     onLogin: (data: LoginFormData) => void;
     onRegister: (data: RegisterFormData) => void;
+    /** Called when the user submits a code in the verify view. */
+    onVerify?: (code: string) => void;
+    /** Called when the user clicks "Resend code" in the verify view. */
+    onResendCode?: () => Promise<void> | void;
     isSubmitting?: boolean;
     loginProps?: InnerProps["loginProps"];
     registerProps?: InnerProps["registerProps"];
+    verifyProps?: InnerProps["verifyProps"];
     modeSwitcher?: InnerProps["modeSwitcher"];
     loginModeLabel?: string;
     registerModeLabel?: string;
+    verifyModeLabel?: string;
     /** Shared social logins (rendered below the active form). */
     socialLogins?: Snippet;
     socialDividerLabel?: string | false;
@@ -50,6 +58,6 @@ export interface Props {
 declare const LoginOrRegisterFormModal: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
     close: () => void;
-}, "visible" | "mode" | "loginData" | "registerData">;
+}, "visible" | "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterFormModal = ReturnType<typeof LoginOrRegisterFormModal>;
 export default LoginOrRegisterFormModal;

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

@@ -3,9 +3,11 @@ 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.mode_verify": "Verify",
     "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",
+    "login_or_register_form.modal_title_verify": "Verify your email",
 };
 export function t_default(k, values = null, fallback = "") {
     const out = DEFAULTS[k] ?? (typeof fallback === "string" ? fallback : "") ?? k;

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

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "oninput"> {
+    /** Bindable concatenated value (e.g., "123456"). Length always equals `length` or shorter. */
+    value?: string;
+    /** Number of slots. Default: 6. Sensible range: 4..8. */
+    length?: number;
+    /** Fired when all slots are filled. Receives the concatenated string. */
+    onComplete?: (code: string) => void;
+    /** Fired on every change (keystroke, paste, backspace). */
+    oninput?: (value: string) => void;
+    /** When true, slots render in error styling (red border + aria-invalid). */
+    error?: boolean;
+    /** Disables all slots. */
+    disabled?: boolean;
+    /** Auto-focus the first empty slot on mount. Default: true. */
+    autoFocus?: boolean;
+    /** Restrict input. "numeric" (default) | "alphanumeric". */
+    mode?: "numeric" | "alphanumeric";
+    /** Pass-through to first slot for browser auto-fill. Default: "one-time-code". */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
+    /** Skip default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes on the root */
+    class?: string;
+    /** Bindable root element ref */
+    el?: HTMLDivElement;
+}
+declare const OtpInput: import("svelte").Component<Props, {}, "el" | "value">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;

package/dist/components/OtpInput/README.md

@@ -0,0 +1,55 @@
+# OtpInput
+
+Generic N-slot one-time-code input. 6 digits by default, configurable. Building block for email verification, 2FA, and password-reset OTP flows.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { OtpInput } from "@marianmeres/stuic";
+
+	let code = $state("");
+</script>
+
+<OtpInput
+	bind:value={code}
+	length={6}
+	onComplete={(c) => console.log("Got code:", c)}
+/>
+```
+
+## Props
+
+| Prop           | Type                            | Default            | Description                                                       |
+| -------------- | ------------------------------- | ------------------ | ----------------------------------------------------------------- |
+| `value`        | `string`                        | `""`               | Bindable concatenated value                                       |
+| `length`       | `number`                        | `6`                | Number of slots                                                   |
+| `onComplete`   | `(code: string) => void`        | —                  | Fired when all slots are filled                                   |
+| `oninput`      | `(value: string) => void`       | —                  | Fired on every change                                             |
+| `error`        | `boolean`                       | `false`            | Renders error styling + `aria-invalid`                            |
+| `disabled`     | `boolean`                       | `false`            | Disables all slots                                                |
+| `autoFocus`    | `boolean`                       | `true`             | Auto-focus the first empty slot on mount                          |
+| `mode`         | `"numeric" \| "alphanumeric"`   | `"numeric"`        | Restrict input characters                                         |
+| `autocomplete` | `string`                        | `"one-time-code"`  | Pass-through to first slot for browser/iOS auto-fill              |
+| `unstyled`     | `boolean`                       | `false`            | Skip default styling                                              |
+| `class`        | `string`                        | —                  | Additional CSS classes on the root                                |
+| `el`           | `HTMLDivElement`                | —                  | Bindable root element ref                                         |
+
+## Behavior
+
+- **Auto-advance**: typing in slot K moves focus to slot K+1.
+- **Backspace**: clears current slot; if already empty, jumps to and clears slot K-1.
+- **Arrow keys**: ←/→ navigate without modifying values.
+- **Paste**: any slot accepts paste; the pasted string is sanitized to allowed chars, truncated to `length`, and distributed across all slots starting from slot 0.
+- **iOS/Android SMS auto-fill**: first slot has `autocomplete="one-time-code"` by default. The OS auto-fills the full code into slot 0 — the input handler distributes it.
+- **Click**: focusing a filled slot selects its content (for easy overwrite).
+- **Enter**: bubbles a native submit to the surrounding `<form>`.
+- **Accessibility**: each slot gets `aria-label="Digit {n+1} of {length}"`.
+
+## CSS Tokens
+
+Prefix: `--stuic-otp-input-*`
+
+`gap`, `slot-size`, `font-size`, `bg`, `color`, `radius`, `border-width`, `border-color`, `border-color-focus`, `border-color-error`, `transition`
+
+The shared structural tokens `--stuic-radius`, `--stuic-border-width`, and `--stuic-transition` are used as fallbacks.

package/dist/components/OtpInput/index.css

@@ -0,0 +1,41 @@
+@layer components {
+	.stuic-otp-input {
+		display: flex;
+		gap: var(--stuic-otp-input-gap, 0.5rem);
+	}
+
+	.stuic-otp-input-slot {
+		width: var(--stuic-otp-input-slot-size, 2.75rem);
+		height: var(--stuic-otp-input-slot-size, 2.75rem);
+		text-align: center;
+		font-size: var(--stuic-otp-input-font-size, 1.25rem);
+		font-variant-numeric: tabular-nums;
+		background: var(--stuic-otp-input-bg, var(--stuic-color-background));
+		color: var(--stuic-otp-input-color, var(--stuic-color-foreground));
+		border-radius: var(--stuic-otp-input-radius, var(--stuic-radius));
+		border-style: solid;
+		border-width: var(--stuic-otp-input-border-width, var(--stuic-border-width));
+		border-color: var(--stuic-otp-input-border-color, var(--stuic-color-border));
+		transition: border-color var(--stuic-otp-input-transition, var(--stuic-transition));
+	}
+
+	.stuic-otp-input-slot:focus {
+		border-color: var(
+			--stuic-otp-input-border-color-focus,
+			var(--stuic-color-primary)
+		);
+		outline: none;
+	}
+
+	.stuic-otp-input-slot:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.stuic-otp-input[data-error="true"] .stuic-otp-input-slot {
+		border-color: var(
+			--stuic-otp-input-border-color-error,
+			var(--stuic-color-destructive)
+		);
+	}
+}

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

@@ -0,0 +1 @@
+export { default as OtpInput, type Props as OtpInputProps, } from "./OtpInput.svelte";

package/dist/components/OtpInput/index.js

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

package/dist/components/TabbedMenu/TabbedMenu.svelte

@@ -1,12 +1,13 @@
 <script lang="ts" module>
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { THC } from "../Thc/index.js";
+	import { tr, type MaybeLocalized } from "../../utils/tr.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Thc from "../Thc/Thc.svelte";
 
 	export interface TabbedMenuItem {
 		id: string | number;
-		label: THC;
+		label: THC | MaybeLocalized;
 		disabled?: boolean;
 		class?: string;
 		data?: Record<string, any>;
@@ -20,6 +21,8 @@
 		disabled?: boolean;
 		onSelect?: (item: TabbedMenuItem) => void;
 		orientation?: "horizontal" | "vertical";
+		/** Current locale for MaybeLocalized resolution */
+		locale?: string;
 		//
 		class?: string;
 		classItem?: string;
@@ -41,6 +44,7 @@
 		disabled,
 		onSelect,
 		orientation = "horizontal",
+		locale,
 		//
 		class: classProp,
 		classItem,
@@ -54,6 +58,26 @@
 		...rest
 	}: Props = $props();
 
+	// The `label` accepts both THC and MaybeLocalized. Since MaybeLocalized's
+	// `Record<string, string>` shape has no discriminator key that Thc recognizes
+	// (`text`/`html`/`component`/`snippet`), a locale-keyed object would otherwise
+	// fall through to Thc's string-cast fallback and render as `[object Object]`.
+	// So we detect that case here and resolve it via `tr()` before handing to Thc.
+	function resolveLabel(label: TabbedMenuItem["label"]): THC {
+		if (
+			label &&
+			typeof label === "object" &&
+			typeof label !== "function" &&
+			!("text" in label) &&
+			!("html" in label) &&
+			!("component" in label) &&
+			!("snippet" in label)
+		) {
+			return tr(label as MaybeLocalized, locale);
+		}
+		return label as THC;
+	}
+
 	let buttonEls = $state<Record<string | number, HTMLButtonElement | HTMLAnchorElement>>(
 		{}
 	);
@@ -136,11 +160,11 @@
 			>
 				{#if item.href}
 					<a href={item.href} {...props} bind:this={buttonEls[item.id]}>
-						<Thc thc={item.label} />
+						<Thc thc={resolveLabel(item.label)} />
 					</a>
 				{:else}
 					<button type="button" {...props} bind:this={buttonEls[item.id]}>
-						<Thc thc={item.label} />
+						<Thc thc={resolveLabel(item.label)} />
 					</button>
 				{/if}
 			</li>

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

@@ -1,8 +1,9 @@
 import type { HTMLAttributes } from "svelte/elements";
 import type { THC } from "../Thc/index.js";
+import { type MaybeLocalized } from "../../utils/tr.js";
 export interface TabbedMenuItem {
     id: string | number;
-    label: THC;
+    label: THC | MaybeLocalized;
     disabled?: boolean;
     class?: string;
     data?: Record<string, any>;
@@ -15,6 +16,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "children"
     disabled?: boolean;
     onSelect?: (item: TabbedMenuItem) => void;
     orientation?: "horizontal" | "vertical";
+    /** Current locale for MaybeLocalized resolution */
+    locale?: string;
     class?: string;
     classItem?: string;
     classButton?: string;

package/dist/index.css

@@ -71,6 +71,7 @@ In practice:
 @import "./components/DataTable/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
+@import "./components/EmailVerifyForm/index.css";
 @import "./components/H/index.css";
 @import "./components/Header/index.css";
 @import "./components/ImageCycler/index.css";
@@ -82,6 +83,7 @@ In practice:
 @import "./components/ModalDialog/index.css";
 @import "./components/Nav/index.css";
 @import "./components/Notifications/index.css";
+@import "./components/OtpInput/index.css";
 @import "./components/PricingTable/index.css";
 @import "./components/Progress/index.css";
 @import "./components/Separator/index.css";

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
+export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";
@@ -58,6 +59,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
+export * from "./components/OtpInput/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";

package/dist/index.js

@@ -44,6 +44,7 @@ export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
+export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";
@@ -59,6 +60,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
+export * from "./components/OtpInput/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";