{indeterminate ? "Partially selected" : "Selected"}

4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T55b1,"use client"; // karaui.kamisama-v0.my.id/components/blocks/login-form import { ArrowLeft, Building2, Fingerprint, type LucideIcon, Mail, MailCheck, } from "lucide-react"; import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { type FormEvent, type ReactNode, useCallback, useEffect, useId, useRef, useState, } from "react"; import { Button, StatefulButton } from "@/components/motion/button"; import { Checkbox } from "@/components/motion/checkbox"; import { Input } from "@/components/motion/input"; import { OTPInput } from "@/components/motion/otp-input"; import { PasswordInput } from "@/components/motion/password-input"; import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease"; import { MIN_PASSWORD_LENGTH } from "@/lib/password-strength"; import { cn } from "@/lib/utils"; /** The card's screens, in the order the recovery flow walks them. */ export type LoginView = "sign-in" | "forgot" | "sent" | "reset" | "done"; export type LoginValues = { email: string; password: string; remember: boolean; }; export type LoginResetValues = { email: string; code: string; password: string; }; export type LoginSocialProvider = { id: string; label: string; /** Any icon component. Generic glyphs by default — bring your own brand marks. */ icon?: LucideIcon; }; export interface LoginFormProps { /** Controlled screen. Omit to let the card manage its own flow. */ view?: LoginView; defaultView?: LoginView; onViewChange?: (view: LoginView) => void; defaultValues?: Partial; /** Called with valid values. Reject (or throw) with a message to show it and shake the card. */ onSubmit?: (values: LoginValues) => void | Promise; /** Social / SSO buttons. Pass `[]` to hide the row. */ providers?: LoginSocialProvider[]; onProviderClick?: (id: string) => void | Promise; /** Sends the reset code. Reject to show an error on the request screen. */ onRequestReset?: (email: string) => void | Promise; /** Verifies the code and stores the new password. Reject to shake the code. */ onResetPassword?: (values: LoginResetValues) => void | Promise; /** Length of the emailed code. Default 6. */ codeLength?: number; /** Seconds before "Resend code" unlocks again. Default 30. */ resendCooldown?: number; title?: ReactNode; description?: ReactNode; footer?: ReactNode; className?: string; } type Status = "idle" | "loading" | "success" | "error"; const DEFAULT_PROVIDERS: LoginSocialProvider[] = [ { id: "sso", label: "SSO", icon: Building2 }, { id: "passkey", label: "Passkey", icon: Fingerprint }, ]; // Same deliberately permissive check as SignUpForm. const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const SHAKE = { x: [0, -8, 8, -5, 5, -2, 0] }; const ORDER: LoginView[] = ["sign-in", "forgot", "sent", "reset", "done"]; function messageOf(reason: unknown, fallback: string) { if (reason instanceof Error && reason.message) return reason.message; if (typeof reason === "string" && reason) return reason; return fallback; } function emailError(email: string) { if (!email.trim()) return "Enter your email."; if (!EMAIL_PATTERN.test(email)) return "That doesn't look like an email address."; return undefined; } /** * Sign-in card, sibling of `SignUpForm`: email + password with remember-me and * generic social buttons, plus a password-recovery flow that morphs inside the * same card — request a code, "check your inbox", OTP + new password, success. * Every handler may return a promise; rejections surface their message and * shake the active screen. */ export function LoginForm({ view: viewProp, defaultView = "sign-in", onViewChange, defaultValues, onSubmit, providers = DEFAULT_PROVIDERS, onProviderClick, onRequestReset, onResetPassword, codeLength = 6, resendCooldown = 30, title = "Welcome back", description = "Sign in to continue to your workspace.", footer, className, }: LoginFormProps) { const reduce = useReducedMotion(); const baseId = useId(); const [internalView, setInternalView] = useState(defaultView); const view = viewProp ?? internalView; const [direction, setDirection] = useState<1 | -1>(1); const [email, setEmail] = useState(defaultValues?.email ?? ""); const [password, setPassword] = useState(defaultValues?.password ?? ""); const [remember, setRemember] = useState(defaultValues?.remember ?? true); const [touched, setTouched] = useState<{ email?: boolean; password?: boolean }>( {}, ); const [code, setCode] = useState(""); const [newPassword, setNewPassword] = useState(""); const [resetTouched, setResetTouched] = useState(false); const [status, setStatus] = useState("idle"); const [error, setError] = useState(); const [providerPending, setProviderPending] = useState(null); const [cooldown, setCooldown] = useState(0); const shakeRef = useRef(null); const headingRef = useRef(null); const shownView = useRef(view); const go = useCallback( (next: LoginView) => { // Finishing the reset loops forward to sign-in; every other move slides // by its place in the flow. setDirection( view === "done" || ORDER.indexOf(next) >= ORDER.indexOf(view) ? 1 : -1, ); setStatus("idle"); setError(undefined); if (viewProp === undefined) setInternalView(next); onViewChange?.(next); }, [view, viewProp, onViewChange], ); // Move focus to the new screen's heading so keyboard users land on it. useEffect(() => { // Only after navigation, never on first render. if (shownView.current === view) return; shownView.current = view; const id = window.setTimeout( () => headingRef.current?.focus({ preventScroll: true }), 60, ); return () => window.clearTimeout(id); }, [view]); useEffect(() => { if (cooldown <= 0) return; const id = window.setTimeout(() => setCooldown((s) => s - 1), 1000); return () => window.clearTimeout(id); }, [cooldown]); const shake = () => { if (reduce || !shakeRef.current) return; animate(shakeRef.current, SHAKE, { duration: 0.42, ease: EASE_OUT }); }; /** Shared async runner: pending → success | error (+ shake). */ const run = async ( task: (() => void | Promise) | undefined, fallback: string, ) => { setError(undefined); setStatus("loading"); try { await task?.(); setStatus("success"); return true; } catch (reason) { setStatus("error"); setError(messageOf(reason, fallback)); shake(); return false; } }; const signInErrors = { email: emailError(email), password: password ? undefined : "Enter your password.", }; const handleSignIn = async (event: FormEvent) => { event.preventDefault(); setTouched({ email: true, password: true }); if (signInErrors.email || signInErrors.password) { shake(); return; } await run( onSubmit && (() => onSubmit({ email, password, remember })), "Couldn't sign you in. Try again.", ); }; const handleRequest = async (event: FormEvent) => { event.preventDefault(); setTouched((t) => ({ ...t, email: true })); if (emailError(email)) { shake(); return; } const ok = await run( onRequestReset && (() => onRequestReset(email)), "Couldn't send the code. Try again.", ); if (ok) { setCooldown(resendCooldown); go("sent"); } }; const handleResend = async () => { if (cooldown > 0) return; try { await onRequestReset?.(email); setCooldown(resendCooldown); } catch (reason) { setError(messageOf(reason, "Couldn't resend the code.")); shake(); } }; const resetErrors = { code: code.length < codeLength ? `Enter the ${codeLength}-digit code.` : undefined, password: newPassword.length < MIN_PASSWORD_LENGTH ? `Use at least ${MIN_PASSWORD_LENGTH} characters.` : undefined, }; const handleReset = async (event: FormEvent) => { event.preventDefault(); setResetTouched(true); if (resetErrors.code || resetErrors.password) { shake(); return; } const ok = await run( onResetPassword && (() => onResetPassword({ email, code, password: newPassword })), "That code didn't work.", ); if (ok) { setPassword(""); setCode(""); setNewPassword(""); setResetTouched(false); go("done"); } else { setCode(""); } }; const handleProvider = async (id: string) => { if (providerPending) return; setProviderPending(id); setError(undefined); try { await onProviderClick?.(id); } catch (reason) { setError(messageOf(reason, "That sign-in method is unavailable.")); shake(); } finally { setProviderPending(null); } }; const busy = status === "loading"; const errorId = `${baseId}-error`; const offset = reduce ? 0 : 28; const heading = (text: ReactNode, sub: ReactNode) => (

{text}

{sub ?

{sub}

: null}

); const back = (to: LoginView, label = "Back to sign in") => ( ); const formError = ( {error ? ( {error} ) : null} ); let screen: ReactNode; switch (view) { case "sign-in": screen = (

{heading(title, description)}

} disabled={busy} value={email} onChange={(next) => { setEmail(next); if (status === "error") setStatus("idle"); }} onBlur={() => setTouched((t) => ({ ...t, email: true }))} error={touched.email ? signInErrors.email : undefined} /> { setPassword(next); if (status === "error") setStatus("idle"); }} onBlur={() => setTouched((t) => ({ ...t, password: true }))} error={touched.password ? signInErrors.password : undefined} />

{formError} Sign in {providers.length > 0 ? ( <>

or continue with

1 ? "grid-cols-2" : "grid-cols-1", )} > {providers.map((provider) => { const Icon = provider.icon; const pending = providerPending === provider.id; return ( ); })}

) : null} {footer ? (

{footer}

) : null}

); break; case "forgot": screen = ( ); break; case "sent": screen = (

{heading( "Check your inbox", <> We sent a {codeLength}-digit code to{" "} {email}. , )} {formError}

{back("forgot", "Use another email")}

); break; case "reset": screen = (

{back("sent")} {heading("Choose a new password", `Code sent to ${email}.`)} { setCode(next); if (status === "error") { setStatus("idle"); setError(undefined); } }} disabled={busy} status={ status === "error" ? "error" : resetTouched && resetErrors.code ? "error" : "idle" } errorMessage={ status === "error" ? undefined : resetTouched ? resetErrors.code : undefined } /> {formError} Reset password ); break; case "done": screen = (

{heading( "Password updated", "You can now sign in with your new password.", )}

); break; } return ( // `layout` animates the card's size between screens — a layout job by // design (FLIP transforms under the hood); the screens counter-correct // with layout="position" so their content never stretches.

({ opacity: 0, x: dir * offset, filter: reduce ? "blur(0px)" : "blur(4px)", }), center: { opacity: 1, x: 0, filter: "blur(0px)", transition: { duration: 0.28, ease: EASE_OUT }, }, exit: (dir: number) => ({ opacity: 0, x: dir * -offset, filter: reduce ? "blur(0px)" : "blur(4px)", transition: { duration: 0.16, ease: EASE_OUT }, }), }} initial="enter" animate="center" exit="exit" > {screen}

); } 51:Tfa6,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useId } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { cn } from "@/lib/utils"; const CHECK_PATH = "M5 13l4 4L19 7"; const INDETERMINATE_PATH = "M6 12h12"; export interface CheckboxProps { checked: boolean; onCheckedChange: (checked: boolean) => void; disabled?: boolean; indeterminate?: boolean; label?: string; className?: string; id?: string; "aria-label"?: string; /** Associates an external message (e.g. a form error) with the control. */ "aria-describedby"?: string; } export function Checkbox({ checked, onCheckedChange, disabled, indeterminate, label, className, id: idProp, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: CheckboxProps) { const autoId = useId(); const id = idProp ?? autoId; const reduce = useReducedMotion(); const showMark = checked || indeterminate; const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH; return ( !disabled && onCheckedChange(!checked)} whileTap={reduce || disabled ? undefined : { scale: 0.92 }} transition={SPRING_PRESS} data-state={ checked ? "checked" : indeterminate ? "indeterminate" : "unchecked" } className={cn( "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-60", showMark ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/50 bg-background hover:border-muted-foreground", )} > {showMark ? ( {indeterminate ? "Partially selected" : "Selected"} ) : null} {label ? ( {label} ) : null} ); } 52:T18a8,"use client"; import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { forwardRef, useEffect, useId, useRef, useState, type InputHTMLAttributes, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; export type InputClassNames = { root?: string; label?: string; field?: string; input?: string; leftIcon?: string; rightIcon?: string; successIcon?: string; errorMessage?: string; }; export interface InputProps extends Omit< InputHTMLAttributes, "value" | "defaultValue" | "onChange" > { label?: string; value?: string; defaultValue?: string; onChange?: (value: string) => void; /** Truthy error triggers a shake, red border and (if a string) a message. */ error?: string | boolean; success?: boolean; leftIcon?: ReactNode; rightIcon?: ReactNode; className?: string; classNames?: InputClassNames; } export const Input = forwardRef(function Input( { label, value: valueProp, defaultValue, onChange, onFocus, onBlur, error, success, leftIcon, rightIcon, className, classNames, disabled, id: idProp, type, ...rest }, ref, ) { const reactId = useId(); const id = idProp ?? reactId; const reduce = useReducedMotion(); const controlled = valueProp !== undefined; const [internal, setInternal] = useState(defaultValue ?? ""); const value = controlled ? (valueProp ?? "") : internal; const [focused, setFocused] = useState(false); const fieldRef = useRef(null); const hasError = Boolean(error); const errorMessage = typeof error === "string" ? error : null; // Right edge shows the success check, otherwise the caller's right icon. const rightSlot = success ? null : rightIcon; // Shake the field when an error appears. useEffect(() => { if (!fieldRef.current || reduce || !hasError) return; animate( fieldRef.current, { x: [0, -6, 6, -4, 4, -2, 0] }, { duration: 0.45 }, ); }, [hasError, reduce]); const handleChange = (next: string) => { if (!controlled) setInternal(next); onChange?.(next); }; return (

{label ? ( {label} ) : null}

{leftIcon ? ( {leftIcon} ) : null} handleChange(e.target.value)} onFocus={(event) => { setFocused(true); onFocus?.(event); }} onBlur={(event) => { setFocused(false); onBlur?.(event); }} className={cn( "peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none", "placeholder:text-muted-foreground/60", leftIcon ? "pl-10" : "pl-3.5", rightSlot || success ? "pr-10" : "pr-3.5", disabled && "cursor-not-allowed", classNames?.input, )} /> {success ? ( ) : rightSlot ? ( {rightSlot} ) : null}

{errorMessage ? ( {errorMessage} ) : null}

); }); 53:T35d3,"use client"; import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { useEffect, useId, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type OTPStatus = "idle" | "error" | "success"; export interface OTPInputProps { /** Number of slots. Default 6. */ length?: number; value?: string; defaultValue?: string; onChange?: (value: string) => void; /** Fires once every slot is filled. */ onComplete?: (value: string) => void; /** Optional label rendered above the slots. */ label?: string; /** Helper text shown below the slots while idle. */ hint?: string; /** Message shown below the slots when status is "success". */ successMessage?: string; /** Message shown below the slots when status is "error". */ errorMessage?: string; /** External validation feedback. "error" shakes, "success" draws a check. */ status?: OTPStatus; /** Render dots instead of the typed digits. */ mask?: boolean; disabled?: boolean; autoFocus?: boolean; /** Accessible label for the underlying input. */ "aria-label"?: string; className?: string; } export function OTPInput({ length = 6, value: controlledValue, defaultValue = "", onChange, onComplete, label, hint, successMessage, errorMessage, status = "idle", mask = false, disabled = false, autoFocus = false, "aria-label": ariaLabel = "One-time passcode", className, }: OTPInputProps) { const uid = useId(); const reduce = useReducedMotion(); const inputRef = useRef(null); const slotsRef = useRef(null); const controlled = controlledValue !== undefined; // Source of truth is a fixed-length array, so a cleared middle slot stays an // in-place hole instead of collapsing the digits after it to the left. const [slots, setSlots] = useState(() => toSlots(controlled ? controlledValue : defaultValue, length), ); const [focused, setFocused] = useState(false); const [active, setActive] = useState(0); const joined = slots.join(""); const joinedRef = useRef(joined); useEffect(() => { joinedRef.current = joined; }, [joined]); // Pull in external value changes; skip when the parent is just echoing our own // onChange, so internal holes survive the controlled round-trip. useEffect(() => { if (!controlled) return; const incoming = sanitize(controlledValue, length); if (incoming !== joinedRef.current) setSlots(toSlots(incoming, length)); }, [controlled, controlledValue, length]); const commit = (next: string[]) => { const wasComplete = slots.every((c) => c !== ""); setSlots(next); const str = next.join(""); onChange?.(str); // Fire only on the empty→full transition, not on every edit of a full code. if (!wasComplete && next.every((c) => c !== "")) onComplete?.(str); }; const clearSlot = (idx: number) => { const next = [...slots]; next[idx] = ""; commit(next); }; const slotFromClientX = (clientX: number) => { const els = slotsRef.current?.children; if (!els) return 0; for (let i = 0; i < els.length; i++) { if (clientX < els[i].getBoundingClientRect().right) return i; } return length - 1; }; // Single insertion path: one digit overwrites the active slot and advances; a // multi-digit chunk (paste / SMS autofill) fills forward from the active slot. const insert = (raw: string, from = active) => { const digits = raw.replace(/\D/g, ""); if (!digits) return; const next = [...slots]; let i = from; for (const ch of digits) { if (i >= length) break; next[i] = ch; i++; } commit(next); setActive(Math.min(i, length - 1)); }; // The keyboard is the single source of truth: preventDefault on keydown // reliably blocks native insertion (unlike beforeinput in React), so the hidden // input never accumulates a competing string and slot holes survive. const onKeyDown = (e: React.KeyboardEvent) => { if (disabled || e.metaKey || e.ctrlKey || e.altKey) return; const k = e.key; if (/^[0-9]$/.test(k)) { e.preventDefault(); insert(k); } else if (k === "Backspace") { e.preventDefault(); // A filled slot clears in place; an empty slot steps back and clears there. if (slots[active]) { clearSlot(active); } else if (active > 0) { clearSlot(active - 1); setActive((current) => Math.max(current - 1, 0)); } } else if (k === "Delete") { e.preventDefault(); clearSlot(active); } else if (k === "ArrowLeft") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); } else if (k === "ArrowRight") { e.preventDefault(); setActive((a) => Math.min(a + 1, length - 1)); } else if (k === "Home") { e.preventDefault(); setActive(0); } else if (k === "End") { e.preventDefault(); setActive(length - 1); } }; const onPaste = (e: React.ClipboardEvent) => { if (disabled) return; // preventDefault suppresses the duplicate onChange, keeping that path autofill-only. e.preventDefault(); insert(e.clipboardData.getData("text"), active); }; // Autofill path: SMS one-time-code arrives as a whole value in one shot. // Keystrokes go through onKeyDown and paste through onPaste, so only autofill // reaches here — spread it across the slots from the start. const onChangeNative = (e: React.ChangeEvent) => { const digits = sanitize(e.target.value, length); if (!digits) return; commit(toSlots(digits, length)); setActive(Math.min(digits.length, length - 1)); }; // Error shake — imperative so it replays on every transition into "error". useEffect(() => { if (status !== "error" || reduce || !slotsRef.current) return; animate( slotsRef.current, { x: [0, -5, 5, -3, 3, -1, 0] }, { duration: 0.45, ease: EASE_OUT }, ); }, [status, reduce]); const showSuccess = status === "success"; const activeIndex = focused ? active : -1; const message = showSuccess ? successMessage : status === "error" ? errorMessage : hint; return (

{label ? ( {label} ) : null}

{ if (disabled) return; // Suppress the native click-caret; we drive the active slot ourselves. e.preventDefault(); // Clamp to the first empty slot so a click can't jump ahead of progress. const firstEmpty = slots.indexOf(""); const cap = firstEmpty === -1 ? length - 1 : firstEmpty; setActive(Math.min(slotFromClientX(e.clientX), cap)); inputRef.current?.focus(); }} > setFocused(true)} onBlur={() => setFocused(false)} // Transparent overlay owns focus, the soft keyboard, paste and autofill; // the slots below are purely presentational. className="absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed" />

{Array.from({ length }, (_, i) => { const char = slots[i] ?? ""; const isActive = i === activeIndex; return (

{/* Blinking caret marks the active slot — centered when empty, trailing the digit when the slot is already filled. */} {isActive && !showSuccess ? ( ) : null} {/* Digits roll vertically. Each is absolutely centered so enter and exit overlap in place — no in-flow reflow, no sideways drift. */} {char ? ( {mask ? "•" : char} ) : null}

); })}

{showSuccess ? ( ) : null}

{message ? (

{message}

) : null}

); } function sanitize(raw: string, length: number) { return raw.replace(/\D/g, "").slice(0, length); } function toSlots(raw: string, length: number) { const digits = sanitize(raw, length); return Array.from({ length }, (_, i) => digits[i] ?? ""); } 54:T31cb,"use client"; import { Lock } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { forwardRef, type KeyboardEvent, type ReactNode, useEffect, useId, useMemo, useRef, useState, } from "react"; import { Input, type InputProps } from "@/components/motion/input"; import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease"; import { MIN_PASSWORD_LENGTH, type PasswordStrength, passwordStrength, STRENGTH_COLORS, STRENGTH_LABELS, } from "@/lib/password-strength"; import { cn } from "@/lib/utils"; export type { PasswordStrength } from "@/lib/password-strength"; export type PasswordRequirement = { id: string; label: string; test: (password: string) => boolean; }; /** Default checklist: length, number, symbol, mixed case. */ export function defaultPasswordRequirements( minLength: number = MIN_PASSWORD_LENGTH, ): PasswordRequirement[] { return [ { id: "length", label: `At least ${minLength} characters`, test: (password) => password.length >= minLength, }, { id: "number", label: "A number", test: (password) => /\d/.test(password) }, { id: "symbol", label: "A symbol", test: (password) => /[^A-Za-z0-9\s]/.test(password), }, { id: "case", label: "Upper and lowercase letters", test: (password) => /[a-z]/.test(password) && /[A-Z]/.test(password), }, ]; } const STRENGTH_TEXT = [ "text-destructive", "text-destructive", "text-amber-600 dark:text-amber-400", "text-amber-600 dark:text-amber-400", "text-(--color-success)", ] as const; export interface PasswordInputProps extends Omit { /** Show the segmented strength meter once something is typed. Default true. */ strengthMeter?: boolean; /** * Requirement checklist under the field. `true` uses * `defaultPasswordRequirements(minLength)`; pass an array for custom rules. */ requirements?: boolean | PasswordRequirement[]; /** Length below which the score is 0 ("Too short"). Default 8. */ minLength?: number; /** Fires whenever the 0-4 score changes. */ onStrengthChange?: (strength: PasswordStrength, label: string) => void; /** Allow revealing the password. Default true. */ revealable?: boolean; /** Left icon. Defaults to a lock; pass `null` for none. */ icon?: ReactNode; } /** * Password field over `Input`: eye/eye-off morphing reveal toggle, a caps-lock * warning, a spring-filled strength meter driven by the shared * `passwordStrength` heuristic, and an optional requirement checklist. */ export const PasswordInput = forwardRef( function PasswordInput( { value: valueProp, defaultValue, onChange, onKeyDown, onKeyUp, onBlur, strengthMeter = true, requirements = false, minLength = MIN_PASSWORD_LENGTH, onStrengthChange, revealable = true, icon, disabled, autoComplete, placeholder = "Enter a password", className, ...rest }, ref, ) { const reduce = useReducedMotion(); const baseId = useId(); const statusId = `${baseId}-status`; const controlled = valueProp !== undefined; const [internal, setInternal] = useState(defaultValue ?? ""); const value = controlled ? valueProp : internal; const [revealed, setRevealed] = useState(false); const [capsLock, setCapsLock] = useState(false); const strength = passwordStrength(value, minLength); const reported = useRef(null); const strengthCallback = useRef(onStrengthChange); strengthCallback.current = onStrengthChange; useEffect(() => { if (reported.current === strength) return; reported.current = strength; strengthCallback.current?.(strength, STRENGTH_LABELS[strength]); }, [strength]); const rules = useMemo( () => requirements === true ? defaultPasswordRequirements(minLength) : requirements || [], [requirements, minLength], ); const readCaps = (event: KeyboardEvent) => { // getModifierState is missing on some synthetic/IME events. if (typeof event.getModifierState !== "function") return; setCapsLock(event.getModifierState("CapsLock")); }; const showMeter = strengthMeter && value.length > 0; return (

: icon} onChange={(next) => { if (!controlled) setInternal(next); onChange?.(next); }} onKeyDown={(event) => { readCaps(event); onKeyDown?.(event); }} onKeyUp={(event) => { readCaps(event); onKeyUp?.(event); }} onBlur={(event) => { setCapsLock(false); onBlur?.(event); }} rightIcon={ revealable ? ( ) : undefined } />

{capsLock ? ( Caps Lock is on ) : null} {showMeter ? (

{[0, 1, 2, 3].map((index) => ( {/* scaleX, not width — transform only, off layout. */} ))}

Password strength: {STRENGTH_LABELS[strength]} ) : null} {rules.length > 0 ? (

{rule.label} {met ? "(met)" : "(not met)"}

) : null}

); }, ); /** Eye that morphs to eye-off: a slash draws across and the pupil dims. */ function EyeMorph({ closed, reduce }: { closed: boolean; reduce: boolean }) { const transition = reduce ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }; return ( ); } function RequirementMark({ met, reduce }: { met: boolean; reduce: boolean }) { return ( ); } function CapsIcon() { return ( ); } 55:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 56:T551,// Shared password strength heuristic, used by SignUpForm and PasswordInput. export const MIN_PASSWORD_LENGTH = 8; /** Label per score, index 0-4. */ export const STRENGTH_LABELS = [ "Too short", "Weak", "Fair", "Good", "Strong", ] as const; /** Fill color per score, index 0-4 (Tailwind background classes). */ export const STRENGTH_COLORS = [ "bg-destructive", "bg-destructive", "bg-amber-500", "bg-amber-400", "bg-(--color-success)", ] as const; export type PasswordStrength = 0 | 1 | 2 | 3 | 4; /** * Length-weighted strength score, 0-4. NIST SP 800-63B advises against * composition requirements and treats length as the dominant factor, so extra * character classes only nudge the score — they can't rescue a short password. * This is a heuristic for feedback, not entropy estimation; pair it with a * breach-list check server-side for anything real. */ export function passwordStrength( password: string, minLength: number = MIN_PASSWORD_LENGTH, ): PasswordStrength { if (password.length < minLength) return 0; let score = 1; if (password.length >= 12) score += 1; if (password.length >= 16) score += 1; const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((pattern) => pattern.test(password), ).length; if (classes >= 3) score += 1; return Math.min(score, 4) as PasswordStrength; } 57:T149a,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { forwardRef, type PointerEvent, type ReactNode, useCallback, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline"; export type ButtonSize = "sm" | "md" | "lg" | "icon"; export interface ButtonProps extends Omit< HTMLMotionProps<"button">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; /** Spawn a Material-style ripple from the press point. Off by default. */ ripple?: boolean; children?: ReactNode; } export interface ButtonLinkProps extends Omit< HTMLMotionProps<"a">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; children?: ReactNode; } type Ripple = { id: number; x: number; y: number; size: number }; const VARIANT_CLASS: Record = { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-primary/5", outline: "border border-border bg-transparent text-foreground hover:bg-primary/5", }; const SIZE_CLASS: Record = { sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg", }; export const Button = forwardRef( function Button( { variant = "primary", size = "md", pressScale = 0.93, ripple = false, className, children, onPointerDown, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const [ripples, setRipples] = useState([]); const nextId = useRef(0); const handlePointerDown = useCallback( (event: PointerEvent) => { if (ripple && !reduce) { const rect = event.currentTarget.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; const id = nextId.current++; setRipples((prev) => [ ...prev, { id, x: event.clientX - rect.left, y: event.clientY - rect.top, size, }, ]); } onPointerDown?.(event); }, [ripple, reduce, onPointerDown], ); return ( {ripple && !reduce ? ( {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } /> ))} ) : null} {children} ); }, ); export const ButtonLink = forwardRef( function ButtonLink( { variant = "primary", size = "md", pressScale = 0.93, className, children, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); return ( {children} ); }, ); 58:T1b47,"use client"; import { Check, Loader2, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { forwardRef, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_SWAP } from "@/lib/ease"; import { Button, type ButtonProps } from "./base"; export type ButtonState = "idle" | "loading" | "success" | "error"; export interface StatefulButtonProps extends Omit { state?: ButtonState; children: ReactNode; loadingText?: ReactNode; successText?: ReactNode; errorText?: ReactNode; icon?: ReactNode; } const CASCADE_STAGGER = 0.025; const ROLL_BLUR = "blur(6px)"; const CASCADE_LETTER_VARIANTS: Variants = { initial: { opacity: 0, y: "105%", filter: ROLL_BLUR }, animate: (delay: number = 0) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay }, }), exit: (delay: number = 0) => ({ opacity: 0, y: "-105%", filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 }, }), }; const ICON_VARIANTS: Variants = { // Width collapses too, so the icon adds/removes its own space smoothly // instead of popping the row width in a single frame. initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR }, animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP, }, exit: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT }, }, }; function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } function TextSlot({ value, children, }: { value: string; children: ReactNode; }) { const reduce = useReducedMotion(); const measureRef = useRef(null); const [width, setWidth] = useState(); const label = typeof children === "string" ? children : null; const cascade = label !== null && !reduce; // Measure strings with the same per-letter layout as the cascade. Measuring // the whole string preserves kerning, which can make it narrower than the // inline-block letters and clip the final glyph during the width animation. useLayoutEffect(() => { const nextWidth = measureRef.current?.offsetWidth; if (!nextWidth) return; setWidth((current) => (current === nextWidth ? current : nextWidth)); }); return ( {cascade ? label.split("").map((char, index) => ( {char} )) : children} {cascade ? ( <> {label} {label.split("").map((char, index) => ( {char} ))} ) : ( {children} )} ); } export const StatefulButton = forwardRef(function StatefulButton( { state = "idle", children, loadingText = "Loading", successText = "Done", errorText = "Try again", icon, disabled, ...rest }, ref, ) { const isBusy = state === "loading"; const stateText = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; const textKey = typeof stateText === "string" ? `${state}-${stateText}` : state; return ( ); }); 59:T5a6,"use client"; import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { useRef, type ReactNode } from "react"; import { SPRING_MOUSE } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export interface MagneticProps { children: ReactNode; strength?: number; className?: string; } export function Magnetic({ children, strength = 0.35, className }: MagneticProps) { const ref = useRef(null); const reduce = useReducedMotion(); const canHover = useHoverCapable(); // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion. const enabled = !reduce && canHover; const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, SPRING_MOUSE); const sy = useSpring(y, SPRING_MOUSE); const onMove = (e: React.MouseEvent) => { const el = ref.current; if (!el || !enabled) return; const rect = el.getBoundingClientRect(); x.set((e.clientX - rect.left - rect.width / 2) * strength); y.set((e.clientY - rect.top - rect.height / 2) * strength); }; const onLeave = () => { x.set(0); y.set(0); }; return ( {children} ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/login-form.tsx","content":"$50","type":"registry:component","target":"@components/motion/login-form.tsx"},{"path":"components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n","type":"registry:component","target":"@components/motion/button/index.tsx"},{"path":"components/motion/checkbox.tsx","content":"$51","type":"registry:component","target":"@components/motion/checkbox.tsx"},{"path":"components/motion/input.tsx","content":"$52","type":"registry:component","target":"@components/motion/input.tsx"},{"path":"components/motion/otp-input.tsx","content":"$53","type":"registry:component","target":"@components/motion/otp-input.tsx"},{"path":"components/motion/password-input.tsx","content":"$54","type":"registry:component","target":"@components/motion/password-input.tsx"},{"path":"lib/ease.ts","content":"$55","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/password-strength.ts","content":"$56","type":"registry:lib","target":"@lib/password-strength.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/button/base.tsx","content":"$57","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"components/motion/button/magnetic.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Magnetic } from \"../magnetic\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport interface MagneticButtonProps extends ButtonProps {\n /** Magnetic pull strength. Default 0.25. */\n strength?: number;\n /** Class applied to the magnetic wrapper. */\n magneticClassName?: string;\n}\n\nexport const MagneticButton = forwardRef(function MagneticButton(\n { strength = 0.25, magneticClassName, children, ...rest },\n ref,\n) {\n return (\n \n \n \n );\n});\n","type":"registry:component","target":"@components/motion/button/magnetic.tsx"},{"path":"components/motion/button/stateful.tsx","content":"$58","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"components/motion/magnetic.tsx","content":"$59","type":"registry:component","target":"@components/motion/magnetic.tsx"}],"className":"h-[70svh] min-h-80"}]]}]