@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index62.js

@@ -1,439 +1,96 @@
+"use client";
 import { cx } from "./index3.js";
-import auth_pages_module_default from "./index61.js";
+import segmented_toggle_module_default from "./index61.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/auth-pages/AuthPages.tsx
-function EyeIcon({ open }) {
-	if (open) return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		"aria-hidden": "true",
-		className: auth_pages_module_default.eyeIcon,
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
-			stroke: "currentColor",
-			strokeWidth: "2"
-		}), /* @__PURE__ */ jsx("circle", {
-			cx: "12",
-			cy: "12",
-			r: "3",
-			stroke: "currentColor",
-			strokeWidth: "2"
-		})]
-	});
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		"aria-hidden": "true",
-		className: auth_pages_module_default.eyeIcon,
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94",
-				stroke: "currentColor",
-				strokeWidth: "2"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19",
-				stroke: "currentColor",
-				strokeWidth: "2"
-			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: "1",
-				y1: "1",
-				x2: "23",
-				y2: "23",
-				stroke: "currentColor",
-				strokeWidth: "2"
-			})
-		]
-	});
-}
-function Field({ label, id, children, error }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: auth_pages_module_default.field,
-		children: [
-			/* @__PURE__ */ jsx("label", {
-				htmlFor: id,
-				className: auth_pages_module_default.label,
-				children: label
-			}),
-			children,
-			error && /* @__PURE__ */ jsx("span", {
-				className: auth_pages_module_default.error,
-				children: error
-			})
-		]
-	});
-}
-function PasswordField({ id, label, placeholder, value, onChange, error }) {
-	const [show, setShow] = React.useState(false);
-	const toggleRef = React.useRef(null);
-	return /* @__PURE__ */ jsx(Field, {
-		label: label ?? "Password",
-		id,
-		error,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: auth_pages_module_default.passwordWrapper,
-			children: [/* @__PURE__ */ jsx("input", {
-				id,
-				type: show ? "text" : "password",
-				placeholder,
-				value,
-				onChange,
-				className: auth_pages_module_default.input
-			}), /* @__PURE__ */ jsx("button", {
-				ref: toggleRef,
-				type: "button",
-				onClick: () => setShow((s) => !s),
-				className: auth_pages_module_default.toggle,
-				"aria-label": show ? "Hide password" : "Show password",
-				children: /* @__PURE__ */ jsx(EyeIcon, { open: show })
-			})]
-		})
-	});
-}
-function CheckboxRow({ label, linkText, linkHref, checked, onChange }) {
-	if (!label) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: auth_pages_module_default.checkboxRow,
-		children: [/* @__PURE__ */ jsxs("label", {
-			className: auth_pages_module_default.checkboxLabel,
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				className: auth_pages_module_default.checkbox,
-				checked,
-				onChange: (e) => onChange?.(e.target.checked)
-			}), /* @__PURE__ */ jsx("span", { children: label })]
-		}), linkHref && /* @__PURE__ */ jsx("a", {
-			href: linkHref,
-			className: auth_pages_module_default.forgotLink,
-			children: linkText
-		})]
-	});
-}
-function SignInPage({ title = "Sign in", subtitle, footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", passwordPlaceholder = "Password", rememberLabel = "Remember me", forgotLinkText = "Forgot password?", forgotLinkHref }) {
-	const id = React.useId();
-	const [email, setEmail] = React.useState("");
-	const [password, setPassword] = React.useState("");
-	const [rememberMe, setRememberMe] = React.useState(false);
-	const [errors, setErrors] = React.useState({});
-	const [submitted, setSubmitted] = React.useState(false);
-	const validate = () => {
-		const newErrors = {};
-		if (!email.trim()) newErrors.email = "Email is required";
-		else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email";
-		if (!password) newErrors.password = "Password is required";
-		setErrors(newErrors);
-		return Object.keys(newErrors).length === 0;
+import { jsx } from "react/jsx-runtime";
+//#region src/components/segmented-toggle/SegmentedToggle.tsx
+function SegmentedToggle({ options, value, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className }) {
+	const itemRefs = React.useRef([]);
+	const selectedIndex = options.findIndex((opt) => opt.value === value);
+	const fallbackIndex = options.findIndex((opt) => !opt.disabled);
+	let lastEnabledIndex = -1;
+	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index]?.disabled) {
+		lastEnabledIndex = index;
+		break;
+	}
+	const tabbableIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : fallbackIndex;
+	const focusItem = (index) => {
+		itemRefs.current[index]?.focus();
 	};
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		setSubmitted(true);
-		if (!validate()) return;
-		onSubmit?.({
-			email,
-			password,
-			rememberMe
-		});
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(auth_pages_module_default.authLayout, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: auth_pages_module_default.authCard,
-			children: [
-				brand && /* @__PURE__ */ jsx("div", {
-					className: auth_pages_module_default.authBrand,
-					children: brand
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: auth_pages_module_default.authHeader,
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: auth_pages_module_default.authTitle,
-						children: title
-					}), subtitle && /* @__PURE__ */ jsx("p", {
-						className: auth_pages_module_default.authSubtitle,
-						children: subtitle
-					})]
-				}),
-				/* @__PURE__ */ jsxs("form", {
-					onSubmit: handleSubmit,
-					className: auth_pages_module_default.authForm,
-					children: [
-						/* @__PURE__ */ jsx(Field, {
-							label: emailPlaceholder,
-							id: id + "-email",
-							error: submitted ? errors.email : void 0,
-							children: /* @__PURE__ */ jsx("input", {
-								id: id + "-email",
-								type: "email",
-								placeholder: "you@example.com",
-								value: email,
-								onChange: (e) => setEmail(e.target.value),
-								className: auth_pages_module_default.input,
-								autoComplete: "email",
-								autoFocus: true
-							})
-						}),
-						/* @__PURE__ */ jsx(PasswordField, {
-							label: passwordPlaceholder,
-							id: id + "-password",
-							placeholder: passwordPlaceholder,
-							value: password,
-							onChange: (e) => {
-								setPassword(e.target.value);
-								if (submitted) setSubmitted(false);
-							},
-							error: submitted ? errors.password : void 0
-						}),
-						/* @__PURE__ */ jsx(CheckboxRow, {
-							label: rememberLabel,
-							linkText: forgotLinkText,
-							linkHref: forgotLinkHref,
-							checked: rememberMe,
-							onChange: (c) => {
-								setRememberMe(c);
-								if (submitted) setSubmitted(false);
-							}
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "submit",
-							disabled: loading,
-							className: auth_pages_module_default.submitButton,
-							children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: auth_pages_module_default.spinner }), "Signing in..."] }) : "Sign in"
-						})
-					]
-				}),
-				footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", { className: auth_pages_module_default.divider }), /* @__PURE__ */ jsx("p", {
-					className: auth_pages_module_default.authFooter,
-					children: footer
-				})] })
-			]
-		})
-	});
-}
-function SignUpPage({ title = "Create an account", subtitle, footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", passwordPlaceholder = "Password", confirmPasswordPlaceholder = "Confirm password", checkboxLabel, checkboxLinkText, checkboxLinkHref }) {
-	const id = React.useId();
-	const [email, setEmail] = React.useState("");
-	const [password, setPassword] = React.useState("");
-	const [confirmPassword, setConfirmPassword] = React.useState("");
-	const [agreed, setAgreed] = React.useState(false);
-	const [errors, setErrors] = React.useState({});
-	const [submitted, setSubmitted] = React.useState(false);
-	const validate = () => {
-		const newErrors = {};
-		if (!email.trim()) newErrors.email = "Email is required";
-		else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email";
-		if (!password) newErrors.password = "Password is required";
-		else if (password.length < 8) newErrors.password = "At least 8 characters";
-		if (password !== confirmPassword) newErrors.confirmPassword = "Passwords do not match";
-		if (!agreed) newErrors.agreed = "You must agree to continue";
-		setErrors(newErrors);
-		return Object.keys(newErrors).length === 0;
+	const findEnabledIndex = (startIndex, direction) => {
+		if (options.length === 0) return -1;
+		let nextIndex = startIndex;
+		for (let i = 0; i < options.length; i += 1) {
+			nextIndex = (nextIndex + direction + options.length) % options.length;
+			if (!options[nextIndex]?.disabled) return nextIndex;
+		}
+		return startIndex;
 	};
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		setSubmitted(true);
-		if (!validate()) return;
-		onSubmit?.({
-			email,
-			password,
-			agreed
-		});
+	const selectIndex = (index) => {
+		const nextOption = options[index];
+		if (!nextOption || nextOption.disabled || nextOption.value === value) return;
+		onChange(nextOption.value);
 	};
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(auth_pages_module_default.authLayout, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: auth_pages_module_default.authCard,
-			children: [
-				brand && /* @__PURE__ */ jsx("div", {
-					className: auth_pages_module_default.authBrand,
-					children: brand
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: auth_pages_module_default.authHeader,
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: auth_pages_module_default.authTitle,
-						children: title
-					}), subtitle && /* @__PURE__ */ jsx("p", {
-						className: auth_pages_module_default.authSubtitle,
-						children: subtitle
-					})]
-				}),
-				/* @__PURE__ */ jsxs("form", {
-					onSubmit: handleSubmit,
-					className: auth_pages_module_default.authForm,
-					children: [
-						/* @__PURE__ */ jsx(Field, {
-							label: emailPlaceholder,
-							id: id + "-email",
-							error: submitted ? errors.email : void 0,
-							children: /* @__PURE__ */ jsx("input", {
-								id: id + "-email",
-								type: "email",
-								placeholder: "you@example.com",
-								value: email,
-								onChange: (e) => {
-									setEmail(e.target.value);
-									if (submitted) setSubmitted(false);
-								},
-								className: auth_pages_module_default.input,
-								autoComplete: "email",
-								autoFocus: true
-							})
-						}),
-						/* @__PURE__ */ jsx(PasswordField, {
-							label: passwordPlaceholder,
-							id: id + "-password",
-							placeholder: passwordPlaceholder,
-							value: password,
-							onChange: (e) => {
-								setPassword(e.target.value);
-								if (submitted) setSubmitted(false);
-							},
-							error: submitted ? errors.password : void 0
-						}),
-						/* @__PURE__ */ jsx(PasswordField, {
-							label: confirmPasswordPlaceholder,
-							id: id + "-confirm",
-							placeholder: confirmPasswordPlaceholder,
-							value: confirmPassword,
-							onChange: (e) => {
-								setConfirmPassword(e.target.value);
-								if (submitted) setSubmitted(false);
-							},
-							error: submitted ? errors.confirmPassword : void 0
-						}),
-						checkboxLabel && /* @__PURE__ */ jsx("div", {
-							className: auth_pages_module_default.checkboxRow,
-							children: /* @__PURE__ */ jsxs("label", {
-								className: auth_pages_module_default.checkboxLabel,
-								children: [/* @__PURE__ */ jsx("input", {
-									id: id + "-agreed",
-									type: "checkbox",
-									checked: agreed,
-									onChange: (e) => {
-										setAgreed(e.target.checked);
-										if (submitted) setSubmitted(false);
-									},
-									className: auth_pages_module_default.checkbox
-								}), /* @__PURE__ */ jsx("span", { children: checkboxLinkText ? /* @__PURE__ */ jsxs(Fragment, { children: [
-									"I agree to the",
-									" ",
-									/* @__PURE__ */ jsx("a", {
-										href: checkboxLinkHref,
-										className: auth_pages_module_default.checkboxLink,
-										children: checkboxLinkText
-									})
-								] }) : checkboxLabel })]
-							})
-						}),
-						submitted && errors.agreed && /* @__PURE__ */ jsx("span", {
-							className: auth_pages_module_default.error,
-							children: errors.agreed
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "submit",
-							disabled: loading,
-							className: auth_pages_module_default.submitButton,
-							children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: auth_pages_module_default.spinner }), "Creating account..."] }) : "Create account"
-						})
-					]
-				}),
-				footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", { className: auth_pages_module_default.divider }), /* @__PURE__ */ jsx("p", {
-					className: auth_pages_module_default.authFooter,
-					children: footer
-				})] })
-			]
-		})
-	});
-}
-function ForgotPasswordPage({ title = "Reset password", subtitle = "Enter your email and we'll send a reset link", footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", buttonText = "Send reset link", backLinkText = "Back to sign in", backLinkHref = "/signin" }) {
-	const id = React.useId();
-	const [email, setEmail] = React.useState("");
-	const [error, setError] = React.useState("");
-	const [sent, setSent] = React.useState(false);
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		if (!email.trim()) {
-			setError("Email is required");
-			return;
+	const handleKeyDown = (event, index) => {
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown": {
+				event.preventDefault();
+				const nextIndex = findEnabledIndex(index, 1);
+				focusItem(nextIndex);
+				selectIndex(nextIndex);
+				break;
+			}
+			case "ArrowLeft":
+			case "ArrowUp": {
+				event.preventDefault();
+				const nextIndex = findEnabledIndex(index, -1);
+				focusItem(nextIndex);
+				selectIndex(nextIndex);
+				break;
+			}
+			case "Home":
+				event.preventDefault();
+				focusItem(fallbackIndex);
+				if (fallbackIndex >= 0) selectIndex(fallbackIndex);
+				break;
+			case "End":
+				event.preventDefault();
+				if (lastEnabledIndex >= 0) {
+					focusItem(lastEnabledIndex);
+					selectIndex(lastEnabledIndex);
+				}
+				break;
+			default: break;
 		}
-		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-			setError("Enter a valid email");
-			return;
-		}
-		onSubmit?.({ email });
-		setSent(true);
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(auth_pages_module_default.authLayout, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: auth_pages_module_default.authCard,
-			children: [
-				brand && /* @__PURE__ */ jsx("div", {
-					className: auth_pages_module_default.authBrand,
-					children: brand
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: auth_pages_module_default.authHeader,
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: auth_pages_module_default.authTitle,
-						children: title
-					}), subtitle && /* @__PURE__ */ jsx("p", {
-						className: auth_pages_module_default.authSubtitle,
-						children: subtitle
-					})]
-				}),
-				sent ? /* @__PURE__ */ jsxs("div", {
-					className: auth_pages_module_default.sentMessage,
-					children: [/* @__PURE__ */ jsxs("p", {
-						className: auth_pages_module_default.sentText,
-						children: [
-							"If an account exists for ",
-							/* @__PURE__ */ jsx("strong", { children: email }),
-							", you'll receive a reset link shortly."
-						]
-					}), /* @__PURE__ */ jsx("a", {
-						href: backLinkHref,
-						className: auth_pages_module_default.backLink,
-						children: backLinkText
-					})]
-				}) : /* @__PURE__ */ jsxs("form", {
-					onSubmit: handleSubmit,
-					className: auth_pages_module_default.authForm,
-					children: [/* @__PURE__ */ jsx(Field, {
-						label: emailPlaceholder,
-						id: id + "-email",
-						error,
-						children: /* @__PURE__ */ jsx("input", {
-							id: id + "-email",
-							type: "email",
-							placeholder: "you@example.com",
-							value: email,
-							onChange: (e) => {
-								setEmail(e.target.value);
-								setError("");
-							},
-							className: auth_pages_module_default.input,
-							autoComplete: "email",
-							autoFocus: true
-						})
-					}), /* @__PURE__ */ jsx("button", {
-						type: "submit",
-						disabled: loading,
-						className: auth_pages_module_default.submitButton,
-						children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: auth_pages_module_default.spinner }), "Sending..."] }) : buttonText
-					})]
-				}),
-				footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", { className: auth_pages_module_default.divider }), /* @__PURE__ */ jsx("p", {
-					className: auth_pages_module_default.authFooter,
-					children: footer
-				})] })
-			]
-		})
+		className: cx(segmented_toggle_module_default.track, className),
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		children: options.map((opt, index) => /* @__PURE__ */ jsx("button", {
+			ref: (node) => {
+				itemRefs.current[index] = node;
+			},
+			type: "button",
+			role: "radio",
+			"aria-checked": opt.value === value,
+			disabled: opt.disabled,
+			tabIndex: opt.disabled ? -1 : index === tabbableIndex ? 0 : -1,
+			onClick: () => {
+				if (opt.value !== value) onChange(opt.value);
+			},
+			onKeyDown: (event) => handleKeyDown(event, index),
+			className: cx(segmented_toggle_module_default.option),
+			children: /* @__PURE__ */ jsx("span", {
+				className: segmented_toggle_module_default.label,
+				children: opt.label
+			})
+		}, opt.value))
 	});
 }
 //#endregion
-export { ForgotPasswordPage, SignInPage, SignUpPage };
+export { SegmentedToggle };
 
 //# sourceMappingURL=index62.js.map

package/dist/index62.js.map

@@ -1 +1 @@
-{"version":3,"file":"index62.js","names":[],"sources":["../src/components/auth-pages/AuthPages.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./auth-pages.module.css\";\n\n// ── Eye icon (show/hide password) ──\nfunction EyeIcon({ open }: { open: boolean }) {\n  if (open) {\n    return (\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className={styles.eyeIcon}>\n        <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      </svg>\n    );\n  }\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className={styles.eyeIcon}>\n      <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" stroke=\"currentColor\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\n\n// ── Internal reusable field ──\ninterface FieldProps {\n  label: string;\n  id: string;\n  children: React.ReactNode;\n  error?: string;\n}\n\nfunction Field({ label, id, children, error }: FieldProps) {\n  return (\n    <div className={styles.field}>\n      <label htmlFor={id} className={styles.label}>\n        {label}\n      </label>\n      {children}\n      {error && <span className={styles.error}>{error}</span>}\n    </div>\n  );\n}\n\n// ── Password input with visibility toggle ──\ninterface PasswordFieldProps {\n  id: string;\n  label?: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  error?: string;\n}\n\nfunction PasswordField({ id, label, placeholder, value, onChange, error }: PasswordFieldProps) {\n  const [show, setShow] = React.useState(false);\n  const toggleRef = React.useRef<HTMLButtonElement>(null);\n\n  return (\n    <Field label={label ?? \"Password\"} id={id} error={error}>\n      <div className={styles.passwordWrapper}>\n        <input\n          id={id}\n          type={show ? \"text\" : \"password\"}\n          placeholder={placeholder}\n          value={value}\n          onChange={onChange}\n          className={styles.input}\n        />\n        <button\n          ref={toggleRef}\n          type=\"button\"\n          onClick={() => setShow((s) => !s)}\n          className={styles.toggle}\n          aria-label={show ? \"Hide password\" : \"Show password\"}\n        >\n          <EyeIcon open={show} />\n        </button>\n      </div>\n    </Field>\n  );\n}\n\n// ── Checkbox row ──\ninterface CheckboxRowProps {\n  label?: string;\n  linkText: string;\n  linkHref?: string;\n}\n\ninterface CheckboxRowPropsExtended extends CheckboxRowProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nfunction CheckboxRow({ label, linkText, linkHref, checked, onChange }: CheckboxRowPropsExtended) {\n  if (!label) return null;\n  return (\n    <div className={styles.checkboxRow}>\n      <label className={styles.checkboxLabel}>\n        <input\n          type=\"checkbox\"\n          className={styles.checkbox}\n          checked={checked}\n          onChange={(e) => onChange?.(e.target.checked)}\n        />\n        <span>{label}</span>\n      </label>\n      {linkHref && (\n        <a href={linkHref} className={styles.forgotLink}>\n          {linkText}\n        </a>\n      )}\n    </div>\n  );\n}\n\n// ── Shared props ──\ninterface BaseAuthPageProps {\n  /** Page title */\n  title: string;\n  /** Page subtitle */\n  subtitle?: string;\n  /** Footer content (e.g., \"No account? Sign up\") */\n  footer?: React.ReactNode;\n  /** Called with form data on valid submit */\n  onSubmit?: (data: Record<string, string | boolean>) => void;\n  /** Loading state for the submit button */\n  loading?: boolean;\n  /** Optional brand/logo element */\n  brand?: React.ReactNode;\n  /** Extra class for the outer wrapper */\n  className?: string;\n}\n\n// ── Sign In Page ──\nexport interface SignInPageProps extends BaseAuthPageProps {\n  /** Email placeholder (default \"Email address\") */\n  emailPlaceholder?: string;\n  /** Password placeholder (default \"Password\") */\n  passwordPlaceholder?: string;\n  /** \"Remember me\" checkbox label */\n  rememberLabel?: string;\n  /** \"Forgot password\" link text */\n  forgotLinkText?: string;\n  /** \"Forgot password\" link href */\n  forgotLinkHref?: string;\n}\n\nexport function SignInPage({\n  title = \"Sign in\",\n  subtitle,\n  footer,\n  onSubmit,\n  loading = false,\n  brand,\n  className,\n  emailPlaceholder = \"Email address\",\n  passwordPlaceholder = \"Password\",\n  rememberLabel = \"Remember me\",\n  forgotLinkText = \"Forgot password?\",\n  forgotLinkHref,\n}: SignInPageProps) {\n  const id = React.useId();\n  const [email, setEmail] = React.useState(\"\");\n  const [password, setPassword] = React.useState(\"\");\n  const [rememberMe, setRememberMe] = React.useState(false);\n  const [errors, setErrors] = React.useState<Record<string, string>>({});\n  const [submitted, setSubmitted] = React.useState(false);\n\n  const validate = (): boolean => {\n    const newErrors: Record<string, string> = {};\n    if (!email.trim()) newErrors.email = \"Email is required\";\n    else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) newErrors.email = \"Enter a valid email\";\n    if (!password) newErrors.password = \"Password is required\";\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n    if (!validate()) return;\n    onSubmit?.({ email, password, rememberMe });\n  };\n\n  return (\n    <div className={cx(styles.authLayout, className)}>\n      <div className={styles.authCard}>\n        {brand && <div className={styles.authBrand}>{brand}</div>}\n        <div className={styles.authHeader}>\n          <h1 className={styles.authTitle}>{title}</h1>\n          {subtitle && <p className={styles.authSubtitle}>{subtitle}</p>}\n        </div>\n        <form onSubmit={handleSubmit} className={styles.authForm}>\n          <Field label={emailPlaceholder} id={id + \"-email\"} error={submitted ? errors.email : undefined}>\n            <input\n              id={id + \"-email\"}\n              type=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              className={styles.input}\n              autoComplete=\"email\"\n              autoFocus\n            />\n          </Field>\n          <PasswordField\n            label={passwordPlaceholder}\n            id={id + \"-password\"}\n            placeholder={passwordPlaceholder}\n            value={password}\n            onChange={(e) => { setPassword(e.target.value); if (submitted) setSubmitted(false); }}\n            error={submitted ? errors.password : undefined}\n          />\n          <CheckboxRow\n            label={rememberLabel}\n            linkText={forgotLinkText}\n            linkHref={forgotLinkHref}\n            checked={rememberMe}\n            onChange={(c) => { setRememberMe(c); if (submitted) setSubmitted(false); }}\n          />\n          <button\n            type=\"submit\"\n            disabled={loading}\n            className={styles.submitButton}\n          >\n            {loading ? (\n              <>\n                <span className={styles.spinner} />\n                Signing in...\n              </>\n            ) : (\n              \"Sign in\"\n            )}\n          </button>\n        </form>\n        {footer && (\n          <>\n            <hr className={styles.divider} />\n            <p className={styles.authFooter}>{footer}</p>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ── Sign Up Page ──\nexport interface SignUpPageProps extends BaseAuthPageProps {\n  /** Email placeholder */\n  emailPlaceholder?: string;\n  /** Password placeholder */\n  passwordPlaceholder?: string;\n  /** Confirm password placeholder */\n  confirmPasswordPlaceholder?: string;\n  /** Checkbox label (e.g., \"I agree to the Terms of Service\") */\n  checkboxLabel?: string;\n  /** Checkbox href */\n  checkboxLinkText?: string;\n  /** Checkbox href */\n  checkboxLinkHref?: string;\n}\n\nexport function SignUpPage({\n  title = \"Create an account\",\n  subtitle,\n  footer,\n  onSubmit,\n  loading = false,\n  brand,\n  className,\n  emailPlaceholder = \"Email address\",\n  passwordPlaceholder = \"Password\",\n  confirmPasswordPlaceholder = \"Confirm password\",\n  checkboxLabel,\n  checkboxLinkText,\n  checkboxLinkHref,\n}: SignUpPageProps) {\n  const id = React.useId();\n  const [email, setEmail] = React.useState(\"\");\n  const [password, setPassword] = React.useState(\"\");\n  const [confirmPassword, setConfirmPassword] = React.useState(\"\");\n  const [agreed, setAgreed] = React.useState(false);\n  const [errors, setErrors] = React.useState<Record<string, string>>({});\n  const [submitted, setSubmitted] = React.useState(false);\n\n  const validate = (): boolean => {\n    const newErrors: Record<string, string> = {};\n    if (!email.trim()) newErrors.email = \"Email is required\";\n    else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) newErrors.email = \"Enter a valid email\";\n    if (!password) newErrors.password = \"Password is required\";\n    else if (password.length < 8) newErrors.password = \"At least 8 characters\";\n    if (password !== confirmPassword) newErrors.confirmPassword = \"Passwords do not match\";\n    if (!agreed) newErrors.agreed = \"You must agree to continue\";\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n    if (!validate()) return;\n    onSubmit?.({ email, password, agreed });\n  };\n\n  return (\n    <div className={cx(styles.authLayout, className)}>\n      <div className={styles.authCard}>\n        {brand && <div className={styles.authBrand}>{brand}</div>}\n        <div className={styles.authHeader}>\n          <h1 className={styles.authTitle}>{title}</h1>\n          {subtitle && <p className={styles.authSubtitle}>{subtitle}</p>}\n        </div>\n        <form onSubmit={handleSubmit} className={styles.authForm}>\n          <Field label={emailPlaceholder} id={id + \"-email\"} error={submitted ? errors.email : undefined}>\n            <input\n              id={id + \"-email\"}\n              type=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={(e) => { setEmail(e.target.value); if (submitted) setSubmitted(false); }}\n              className={styles.input}\n              autoComplete=\"email\"\n              autoFocus\n            />\n          </Field>\n          <PasswordField\n            label={passwordPlaceholder}\n            id={id + \"-password\"}\n            placeholder={passwordPlaceholder}\n            value={password}\n            onChange={(e) => { setPassword(e.target.value); if (submitted) setSubmitted(false); }}\n            error={submitted ? errors.password : undefined}\n          />\n          <PasswordField\n            label={confirmPasswordPlaceholder}\n            id={id + \"-confirm\"}\n            placeholder={confirmPasswordPlaceholder}\n            value={confirmPassword}\n            onChange={(e) => { setConfirmPassword(e.target.value); if (submitted) setSubmitted(false); }}\n            error={submitted ? errors.confirmPassword : undefined}\n          />\n          {checkboxLabel && (\n            <div className={styles.checkboxRow}>\n              <label className={styles.checkboxLabel}>\n                <input\n                  id={id + \"-agreed\"}\n                  type=\"checkbox\"\n                  checked={agreed}\n                  onChange={(e) => { setAgreed(e.target.checked); if (submitted) setSubmitted(false); }}\n                  className={styles.checkbox}\n                />\n                <span>\n                  {checkboxLinkText ? (\n                    <>\n                      I agree to the{\" \"}\n                      <a href={checkboxLinkHref} className={styles.checkboxLink}>\n                        {checkboxLinkText}\n                      </a>\n                    </>\n                  ) : (\n                    checkboxLabel\n                  )}\n                </span>\n              </label>\n            </div>\n          )}\n          {submitted && errors.agreed && <span className={styles.error}>{errors.agreed}</span>}\n          <button\n            type=\"submit\"\n            disabled={loading}\n            className={styles.submitButton}\n          >\n            {loading ? (\n              <>\n                <span className={styles.spinner} />\n                Creating account...\n              </>\n            ) : (\n              \"Create account\"\n            )}\n          </button>\n        </form>\n        {footer && (\n          <>\n            <hr className={styles.divider} />\n            <p className={styles.authFooter}>{footer}</p>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ── Forgot Password Page ──\nexport interface ForgotPasswordPageProps extends BaseAuthPageProps {\n  /** Email placeholder */\n  emailPlaceholder?: string;\n  /** Button text */\n  buttonText?: string;\n  /** Back to sign in link text */\n  backLinkText?: string;\n  /** Back to sign in link href */\n  backLinkHref?: string;\n}\n\nexport function ForgotPasswordPage({\n  title = \"Reset password\",\n  subtitle = \"Enter your email and we'll send a reset link\",\n  footer,\n  onSubmit,\n  loading = false,\n  brand,\n  className,\n  emailPlaceholder = \"Email address\",\n  buttonText = \"Send reset link\",\n  backLinkText = \"Back to sign in\",\n  backLinkHref = \"/signin\",\n}: ForgotPasswordPageProps) {\n  const id = React.useId();\n  const [email, setEmail] = React.useState(\"\");\n  const [error, setError] = React.useState(\"\");\n  const [sent, setSent] = React.useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!email.trim()) { setError(\"Email is required\"); return; }\n    if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) { setError(\"Enter a valid email\"); return; }\n    onSubmit?.({ email });\n    setSent(true);\n  };\n\n  return (\n    <div className={cx(styles.authLayout, className)}>\n      <div className={styles.authCard}>\n        {brand && <div className={styles.authBrand}>{brand}</div>}\n        <div className={styles.authHeader}>\n          <h1 className={styles.authTitle}>{title}</h1>\n          {subtitle && <p className={styles.authSubtitle}>{subtitle}</p>}\n        </div>\n        {sent ? (\n          <div className={styles.sentMessage}>\n            <p className={styles.sentText}>\n              If an account exists for <strong>{email}</strong>, you'll receive a reset link shortly.\n            </p>\n            <a href={backLinkHref} className={styles.backLink}>\n              {backLinkText}\n            </a>\n          </div>\n        ) : (\n          <form onSubmit={handleSubmit} className={styles.authForm}>\n            <Field label={emailPlaceholder} id={id + \"-email\"} error={error}>\n              <input\n                id={id + \"-email\"}\n                type=\"email\"\n                placeholder=\"you@example.com\"\n                value={email}\n                onChange={(e) => { setEmail(e.target.value); setError(\"\"); }}\n                className={styles.input}\n                autoComplete=\"email\"\n                autoFocus\n              />\n            </Field>\n            <button\n              type=\"submit\"\n              disabled={loading}\n              className={styles.submitButton}\n            >\n              {loading ? (\n                <>\n                  <span className={styles.spinner} />\n                  Sending...\n                </>\n              ) : (\n                buttonText\n              )}\n            </button>\n          </form>\n        )}\n        {footer && (\n          <>\n            <hr className={styles.divider} />\n            <p className={styles.authFooter}>{footer}</p>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAS,QAAQ,EAAE,QAA2B;CAC5C,IAAI,MACF,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;EAAO,WAAW,0BAAO;YAA1E,CACE,oBAAC,QAAD;GAAM,GAAE;GAA+C,QAAO;GAAe,aAAY;EAAK,CAAA,GAC9F,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;EAAK,CAAA,CAClE;;CAGT,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;EAAO,WAAW,0BAAO;YAA1E;GACE,oBAAC,QAAD;IAAM,GAAE;IAAkF,QAAO;IAAe,aAAY;GAAK,CAAA;GACjI,oBAAC,QAAD;IAAM,GAAE;IAAyE,QAAO;IAAe,aAAY;GAAK,CAAA;GACxH,oBAAC,QAAD;IAAM,IAAG;IAAI,IAAG;IAAI,IAAG;IAAK,IAAG;IAAK,QAAO;IAAe,aAAY;GAAK,CAAA;EACxE;;AAET;AAUA,SAAS,MAAM,EAAE,OAAO,IAAI,UAAU,SAAqB;CACzD,OACE,qBAAC,OAAD;EAAK,WAAW,0BAAO;YAAvB;GACE,oBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,0BAAO;cACnC;GACI,CAAA;GACN;GACA,SAAS,oBAAC,QAAD;IAAM,WAAW,0BAAO;cAAQ;GAAY,CAAA;EACnD;;AAET;AAYA,SAAS,cAAc,EAAE,IAAI,OAAO,aAAa,OAAO,UAAU,SAA6B;CAC7F,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,YAAY,MAAM,OAA0B,IAAI;CAEtD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS;EAAgB;EAAW;YAChD,qBAAC,OAAD;GAAK,WAAW,0BAAO;aAAvB,CACE,oBAAC,SAAD;IACM;IACJ,MAAM,OAAO,SAAS;IACT;IACN;IACG;IACV,WAAW,0BAAO;GACnB,CAAA,GACD,oBAAC,UAAD;IACE,KAAK;IACL,MAAK;IACL,eAAe,SAAS,MAAM,CAAC,CAAC;IAChC,WAAW,0BAAO;IAClB,cAAY,OAAO,kBAAkB;cAErC,oBAAC,SAAD,EAAS,MAAM,KAAO,CAAA;GAChB,CAAA,CACL;;CACA,CAAA;AAEX;AAcA,SAAS,YAAY,EAAE,OAAO,UAAU,UAAU,SAAS,YAAsC;CAC/F,IAAI,CAAC,OAAO,OAAO;CACnB,OACE,qBAAC,OAAD;EAAK,WAAW,0BAAO;YAAvB,CACE,qBAAC,SAAD;GAAO,WAAW,0BAAO;aAAzB,CACE,oBAAC,SAAD;IACE,MAAK;IACL,WAAW,0BAAO;IACT;IACT,WAAW,MAAM,WAAW,EAAE,OAAO,OAAO;GAC7C,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CACd;MACN,YACC,oBAAC,KAAD;GAAG,MAAM;GAAU,WAAW,0BAAO;aAClC;EACA,CAAA,CAEF;;AAET;AAkCA,SAAgB,WAAW,EACzB,QAAQ,WACR,UACA,QACA,UACA,UAAU,OACV,OACA,WACA,mBAAmB,iBACnB,sBAAsB,YACtB,gBAAgB,eAChB,iBAAiB,oBACjB,kBACkB;CAClB,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,EAAE;CAC3C,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,EAAE;CACjD,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,KAAK;CACxD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAiC,CAAC,CAAC;CACrE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CAEtD,MAAM,iBAA0B;EAC9B,MAAM,YAAoC,CAAC;EAC3C,IAAI,CAAC,MAAM,KAAK,GAAG,UAAU,QAAQ;OAChC,IAAI,CAAC,6BAA6B,KAAK,KAAK,GAAG,UAAU,QAAQ;EACtE,IAAI,CAAC,UAAU,UAAU,WAAW;EACpC,UAAU,SAAS;EACnB,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,WAAW;CAC3C;CAEA,MAAM,gBAAgB,MAAuB;EAC3C,EAAE,eAAe;EACjB,aAAa,IAAI;EACjB,IAAI,CAAC,SAAS,GAAG;EACjB,WAAW;GAAE;GAAO;GAAU;EAAW,CAAC;CAC5C;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAAO,YAAY,SAAS;YAC7C,qBAAC,OAAD;GAAK,WAAW,0BAAO;aAAvB;IACG,SAAS,oBAAC,OAAD;KAAK,WAAW,0BAAO;eAAY;IAAW,CAAA;IACxD,qBAAC,OAAD;KAAK,WAAW,0BAAO;eAAvB,CACE,oBAAC,MAAD;MAAI,WAAW,0BAAO;gBAAY;KAAU,CAAA,GAC3C,YAAY,oBAAC,KAAD;MAAG,WAAW,0BAAO;gBAAe;KAAY,CAAA,CAC1D;;IACL,qBAAC,QAAD;KAAM,UAAU;KAAc,WAAW,0BAAO;eAAhD;MACE,oBAAC,OAAD;OAAO,OAAO;OAAkB,IAAI,KAAK;OAAU,OAAO,YAAY,OAAO,QAAQ,KAAA;iBACnF,oBAAC,SAAD;QACE,IAAI,KAAK;QACT,MAAK;QACL,aAAY;QACZ,OAAO;QACP,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;QACxC,WAAW,0BAAO;QAClB,cAAa;QACb,WAAA;OACD,CAAA;MACI,CAAA;MACP,oBAAC,eAAD;OACE,OAAO;OACP,IAAI,KAAK;OACT,aAAa;OACb,OAAO;OACP,WAAW,MAAM;QAAE,YAAY,EAAE,OAAO,KAAK;QAAG,IAAI,WAAW,aAAa,KAAK;OAAG;OACpF,OAAO,YAAY,OAAO,WAAW,KAAA;MACtC,CAAA;MACD,oBAAC,aAAD;OACE,OAAO;OACP,UAAU;OACV,UAAU;OACV,SAAS;OACT,WAAW,MAAM;QAAE,cAAc,CAAC;QAAG,IAAI,WAAW,aAAa,KAAK;OAAG;MAC1E,CAAA;MACD,oBAAC,UAAD;OACE,MAAK;OACL,UAAU;OACV,WAAW,0BAAO;iBAEjB,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAM,WAAW,0BAAO,QAAU,CAAA,GAAC,eAEnC,EAAA,CAAA,IAEF;MAEI,CAAA;KACJ;;IACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAI,WAAW,0BAAO,QAAU,CAAA,GAChC,oBAAC,KAAD;KAAG,WAAW,0BAAO;eAAa;IAAU,CAAA,CAC5C,EAAA,CAAA;GAED;;CACF,CAAA;AAET;AAkBA,SAAgB,WAAW,EACzB,QAAQ,qBACR,UACA,QACA,UACA,UAAU,OACV,OACA,WACA,mBAAmB,iBACnB,sBAAsB,YACtB,6BAA6B,oBAC7B,eACA,kBACA,oBACkB;CAClB,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,EAAE;CAC3C,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,EAAE;CACjD,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAAS,EAAE;CAC/D,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAiC,CAAC,CAAC;CACrE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CAEtD,MAAM,iBAA0B;EAC9B,MAAM,YAAoC,CAAC;EAC3C,IAAI,CAAC,MAAM,KAAK,GAAG,UAAU,QAAQ;OAChC,IAAI,CAAC,6BAA6B,KAAK,KAAK,GAAG,UAAU,QAAQ;EACtE,IAAI,CAAC,UAAU,UAAU,WAAW;OAC/B,IAAI,SAAS,SAAS,GAAG,UAAU,WAAW;EACnD,IAAI,aAAa,iBAAiB,UAAU,kBAAkB;EAC9D,IAAI,CAAC,QAAQ,UAAU,SAAS;EAChC,UAAU,SAAS;EACnB,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,WAAW;CAC3C;CAEA,MAAM,gBAAgB,MAAuB;EAC3C,EAAE,eAAe;EACjB,aAAa,IAAI;EACjB,IAAI,CAAC,SAAS,GAAG;EACjB,WAAW;GAAE;GAAO;GAAU;EAAO,CAAC;CACxC;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAAO,YAAY,SAAS;YAC7C,qBAAC,OAAD;GAAK,WAAW,0BAAO;aAAvB;IACG,SAAS,oBAAC,OAAD;KAAK,WAAW,0BAAO;eAAY;IAAW,CAAA;IACxD,qBAAC,OAAD;KAAK,WAAW,0BAAO;eAAvB,CACE,oBAAC,MAAD;MAAI,WAAW,0BAAO;gBAAY;KAAU,CAAA,GAC3C,YAAY,oBAAC,KAAD;MAAG,WAAW,0BAAO;gBAAe;KAAY,CAAA,CAC1D;;IACL,qBAAC,QAAD;KAAM,UAAU;KAAc,WAAW,0BAAO;eAAhD;MACE,oBAAC,OAAD;OAAO,OAAO;OAAkB,IAAI,KAAK;OAAU,OAAO,YAAY,OAAO,QAAQ,KAAA;iBACnF,oBAAC,SAAD;QACE,IAAI,KAAK;QACT,MAAK;QACL,aAAY;QACZ,OAAO;QACP,WAAW,MAAM;SAAE,SAAS,EAAE,OAAO,KAAK;SAAG,IAAI,WAAW,aAAa,KAAK;QAAG;QACjF,WAAW,0BAAO;QAClB,cAAa;QACb,WAAA;OACD,CAAA;MACI,CAAA;MACP,oBAAC,eAAD;OACE,OAAO;OACP,IAAI,KAAK;OACT,aAAa;OACb,OAAO;OACP,WAAW,MAAM;QAAE,YAAY,EAAE,OAAO,KAAK;QAAG,IAAI,WAAW,aAAa,KAAK;OAAG;OACpF,OAAO,YAAY,OAAO,WAAW,KAAA;MACtC,CAAA;MACD,oBAAC,eAAD;OACE,OAAO;OACP,IAAI,KAAK;OACT,aAAa;OACb,OAAO;OACP,WAAW,MAAM;QAAE,mBAAmB,EAAE,OAAO,KAAK;QAAG,IAAI,WAAW,aAAa,KAAK;OAAG;OAC3F,OAAO,YAAY,OAAO,kBAAkB,KAAA;MAC7C,CAAA;MACA,iBACC,oBAAC,OAAD;OAAK,WAAW,0BAAO;iBACrB,qBAAC,SAAD;QAAO,WAAW,0BAAO;kBAAzB,CACE,oBAAC,SAAD;SACE,IAAI,KAAK;SACT,MAAK;SACL,SAAS;SACT,WAAW,MAAM;UAAE,UAAU,EAAE,OAAO,OAAO;UAAG,IAAI,WAAW,aAAa,KAAK;SAAG;SACpF,WAAW,0BAAO;QACnB,CAAA,GACD,oBAAC,QAAD,EAAA,UACG,mBACC,qBAAA,UAAA,EAAA,UAAA;SAAE;SACe;SACf,oBAAC,KAAD;UAAG,MAAM;UAAkB,WAAW,0BAAO;oBAC1C;SACA,CAAA;QACH,EAAA,CAAA,IAEF,cAEE,CAAA,CACD;;MACJ,CAAA;MAEN,aAAa,OAAO,UAAU,oBAAC,QAAD;OAAM,WAAW,0BAAO;iBAAQ,OAAO;MAAa,CAAA;MACnF,oBAAC,UAAD;OACE,MAAK;OACL,UAAU;OACV,WAAW,0BAAO;iBAEjB,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAM,WAAW,0BAAO,QAAU,CAAA,GAAC,qBAEnC,EAAA,CAAA,IAEF;MAEI,CAAA;KACJ;;IACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAI,WAAW,0BAAO,QAAU,CAAA,GAChC,oBAAC,KAAD;KAAG,WAAW,0BAAO;eAAa;IAAU,CAAA,CAC5C,EAAA,CAAA;GAED;;CACF,CAAA;AAET;AAcA,SAAgB,mBAAmB,EACjC,QAAQ,kBACR,WAAW,gDACX,QACA,UACA,UAAU,OACV,OACA,WACA,mBAAmB,iBACnB,aAAa,mBACb,eAAe,mBACf,eAAe,aACW;CAC1B,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,EAAE;CAC3C,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,EAAE;CAC3C,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAE5C,MAAM,gBAAgB,MAAuB;EAC3C,EAAE,eAAe;EACjB,IAAI,CAAC,MAAM,KAAK,GAAG;GAAE,SAAS,mBAAmB;GAAG;EAAQ;EAC5D,IAAI,CAAC,6BAA6B,KAAK,KAAK,GAAG;GAAE,SAAS,qBAAqB;GAAG;EAAQ;EAC1F,WAAW,EAAE,MAAM,CAAC;EACpB,QAAQ,IAAI;CACd;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAAO,YAAY,SAAS;YAC7C,qBAAC,OAAD;GAAK,WAAW,0BAAO;aAAvB;IACG,SAAS,oBAAC,OAAD;KAAK,WAAW,0BAAO;eAAY;IAAW,CAAA;IACxD,qBAAC,OAAD;KAAK,WAAW,0BAAO;eAAvB,CACE,oBAAC,MAAD;MAAI,WAAW,0BAAO;gBAAY;KAAU,CAAA,GAC3C,YAAY,oBAAC,KAAD;MAAG,WAAW,0BAAO;gBAAe;KAAY,CAAA,CAC1D;;IACJ,OACC,qBAAC,OAAD;KAAK,WAAW,0BAAO;eAAvB,CACE,qBAAC,KAAD;MAAG,WAAW,0BAAO;gBAArB;OAA+B;OACJ,oBAAC,UAAD,EAAA,UAAS,MAAc,CAAA;OAAC;MAChD;SACH,oBAAC,KAAD;MAAG,MAAM;MAAc,WAAW,0BAAO;gBACtC;KACA,CAAA,CACA;SAEL,qBAAC,QAAD;KAAM,UAAU;KAAc,WAAW,0BAAO;eAAhD,CACE,oBAAC,OAAD;MAAO,OAAO;MAAkB,IAAI,KAAK;MAAiB;gBACxD,oBAAC,SAAD;OACE,IAAI,KAAK;OACT,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM;QAAE,SAAS,EAAE,OAAO,KAAK;QAAG,SAAS,EAAE;OAAG;OAC3D,WAAW,0BAAO;OAClB,cAAa;OACb,WAAA;MACD,CAAA;KACI,CAAA,GACP,oBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,WAAW,0BAAO;gBAEjB,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAM,WAAW,0BAAO,QAAU,CAAA,GAAC,YAEnC,EAAA,CAAA,IAEF;KAEI,CAAA,CACJ;;IAEP,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAI,WAAW,0BAAO,QAAU,CAAA,GAChC,oBAAC,KAAD;KAAG,WAAW,0BAAO;eAAa;IAAU,CAAA,CAC5C,EAAA,CAAA;GAED;;CACF,CAAA;AAET"}
+{"version":3,"file":"index62.js","names":[],"sources":["../src/components/segmented-toggle/SegmentedToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./segmented-toggle.module.css\";\n\nexport type SegmentedToggleOption<T extends string = string> = {\n  label: ReactNode;\n  value: T;\n  disabled?: boolean;\n};\n\nexport type SegmentedToggleProps<T extends string = string> = {\n  options: SegmentedToggleOption<T>[];\n  value: T;\n  onChange: (value: T) => void;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  className?: string;\n};\n\nexport function SegmentedToggle<T extends string = string>({\n  options,\n  value,\n  onChange,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  className,\n}: SegmentedToggleProps<T>) {\n  const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([]);\n  const selectedIndex = options.findIndex((opt) => opt.value === value);\n  const fallbackIndex = options.findIndex((opt) => !opt.disabled);\n  let lastEnabledIndex = -1;\n  for (let index = options.length - 1; index >= 0; index -= 1) {\n    if (!options[index]?.disabled) {\n      lastEnabledIndex = index;\n      break;\n    }\n  }\n  const tabbableIndex =\n    selectedIndex >= 0 && !options[selectedIndex]?.disabled\n      ? selectedIndex\n      : fallbackIndex;\n\n  const focusItem = (index: number) => {\n    itemRefs.current[index]?.focus();\n  };\n\n  const findEnabledIndex = (\n    startIndex: number,\n    direction: 1 | -1,\n  ): number => {\n    if (options.length === 0) return -1;\n\n    let nextIndex = startIndex;\n    for (let i = 0; i < options.length; i += 1) {\n      nextIndex = (nextIndex + direction + options.length) % options.length;\n      if (!options[nextIndex]?.disabled) {\n        return nextIndex;\n      }\n    }\n\n    return startIndex;\n  };\n\n  const selectIndex = (index: number) => {\n    const nextOption = options[index];\n    if (!nextOption || nextOption.disabled || nextOption.value === value) {\n      return;\n    }\n    onChange(nextOption.value);\n  };\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\": {\n        event.preventDefault();\n        const nextIndex = findEnabledIndex(index, 1);\n        focusItem(nextIndex);\n        selectIndex(nextIndex);\n        break;\n      }\n      case \"ArrowLeft\":\n      case \"ArrowUp\": {\n        event.preventDefault();\n        const nextIndex = findEnabledIndex(index, -1);\n        focusItem(nextIndex);\n        selectIndex(nextIndex);\n        break;\n      }\n      case \"Home\": {\n        event.preventDefault();\n        focusItem(fallbackIndex);\n        if (fallbackIndex >= 0) {\n          selectIndex(fallbackIndex);\n        }\n        break;\n      }\n      case \"End\": {\n        event.preventDefault();\n        if (lastEnabledIndex >= 0) {\n          focusItem(lastEnabledIndex);\n          selectIndex(lastEnabledIndex);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      className={cx(styles.track, className)}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {options.map((opt, index) => (\n        <button\n          key={opt.value}\n          ref={(node) => {\n            itemRefs.current[index] = node;\n          }}\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={opt.value === value}\n          disabled={opt.disabled}\n          tabIndex={\n            opt.disabled\n              ? -1\n              : index === tabbableIndex\n                ? 0\n                : -1\n          }\n          onClick={() => {\n            if (opt.value !== value) {\n              onChange(opt.value);\n            }\n          }}\n          onKeyDown={(event) => handleKeyDown(event, index)}\n          className={cx(styles.option)}\n        >\n          <span className={styles.label}>{opt.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,gBAA2C,EACzD,SACA,OACA,UACA,cAAc,WACd,mBAAmB,gBACnB,aAC0B;CAC1B,MAAM,WAAW,MAAM,OAAwC,CAAC,CAAC;CACjE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,IAAI,UAAU,KAAK;CACpE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,CAAC,IAAI,QAAQ;CAC9D,IAAI,mBAAmB;CACvB,KAAK,IAAI,QAAQ,QAAQ,SAAS,GAAG,SAAS,GAAG,SAAS,GACxD,IAAI,CAAC,QAAQ,MAAM,EAAE,UAAU;EAC7B,mBAAmB;EACnB;CACF;CAEF,MAAM,gBACJ,iBAAiB,KAAK,CAAC,QAAQ,cAAc,EAAE,WAC3C,gBACA;CAEN,MAAM,aAAa,UAAkB;EACnC,SAAS,QAAQ,MAAM,EAAE,MAAM;CACjC;CAEA,MAAM,oBACJ,YACA,cACW;EACX,IAAI,QAAQ,WAAW,GAAG,OAAO;EAEjC,IAAI,YAAY;EAChB,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;GAC1C,aAAa,YAAY,YAAY,QAAQ,UAAU,QAAQ;GAC/D,IAAI,CAAC,QAAQ,UAAU,EAAE,UACvB,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,MAAM,eAAe,UAAkB;EACrC,MAAM,aAAa,QAAQ;EAC3B,IAAI,CAAC,cAAc,WAAW,YAAY,WAAW,UAAU,OAC7D;EAEF,SAAS,WAAW,KAAK;CAC3B;CAEA,MAAM,iBACJ,OACA,UACG;EACH,QAAQ,MAAM,KAAd;GACE,KAAK;GACL,KAAK,aAAa;IAChB,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,CAAC;IAC3C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;GACL,KAAK,WAAW;IACd,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,EAAE;IAC5C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;IACH,MAAM,eAAe;IACrB,UAAU,aAAa;IACvB,IAAI,iBAAiB,GACnB,YAAY,aAAa;IAE3B;GAEF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,oBAAoB,GAAG;KACzB,UAAU,gBAAgB;KAC1B,YAAY,gBAAgB;IAC9B;IACA;GAEF,SACE;EACJ;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,gCAAO,OAAO,SAAS;EACrC,MAAK;EACL,cAAY;EACZ,mBAAiB;YAEhB,QAAQ,KAAK,KAAK,UACjB,oBAAC,UAAD;GAEE,MAAM,SAAS;IACb,SAAS,QAAQ,SAAS;GAC5B;GACA,MAAK;GACL,MAAK;GACL,gBAAc,IAAI,UAAU;GAC5B,UAAU,IAAI;GACd,UACE,IAAI,WACA,KACA,UAAU,gBACR,IACA;GAER,eAAe;IACb,IAAI,IAAI,UAAU,OAChB,SAAS,IAAI,KAAK;GAEtB;GACA,YAAY,UAAU,cAAc,OAAO,KAAK;GAChD,WAAW,GAAG,gCAAO,MAAM;aAE3B,oBAAC,QAAD;IAAM,WAAW,gCAAO;cAAQ,IAAI;GAAY,CAAA;EAC1C,GAxBD,IAAI,KAwBH,CACT;CACE,CAAA;AAET"}