51: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"] 52: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"] 53:T8bd,"use client"; import { X } from "lucide-react"; import { useId, type ComponentProps, type ReactNode } from "react"; import { Button } from "./button"; import { FeedbackIcon, type FeedbackVariant } from "./feedback"; import { cn } from "./lib/cn"; import "./shared/alert.css"; import "./alert.css"; export type AlertProps = Omit, "title"> & { title: ReactNode; variant?: FeedbackVariant; loading?: boolean; action?: ReactNode; onDismiss?: () => void; }; export function Alert({ title, variant = "neutral", loading = false, children, action, onDismiss, className, ...props }: AlertProps) { const titleId = useId(); return (

{title}

{children != null && (

{children}

)} {action != null && (

{action}

)}

{onDismiss && ( )}

); } 54:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 55:T436,"use client"; import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps, } from "react"; import "./checkbox.css"; export type CheckboxProps = Omit, "type"> & { indeterminate?: boolean; }; export function Checkbox({ ref, indeterminate = false, ...props }: CheckboxProps) { const input = useRef(null); useImperativeHandle(ref, () => input.current!, []); // Native activation clears mixed state. Derive this prop from the group's // selection; synchronize again whenever the caller renders that state. useLayoutEffect(() => { if (input.current) input.current.indeterminate = indeterminate; }); return ( ); } 56:Tb6d,"use client"; import { CircleAlert, CircleCheck, LoaderCircle } from "lucide-react"; import { useId, type ReactNode } from "react"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./shared/field-message.css"; import "./shared/loading-indicator.css"; import "./field.css"; export type FieldControlProps = { id: string; "aria-describedby"?: string; "aria-invalid"?: true; "aria-required"?: true; }; export const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); /** * A label, a control and one message line wired together for assistive * technology. Hint, async status and error share the same reserved line and * rewrite it in place, so validation never pushes the next field down. */ export function Field({ label, description, error, status, statusTone = "pending", count, required, optional, action, className, children, }: { label: string; /** Hint shown on the message line until a status or error replaces it. */ description?: ReactNode; /** Replaces the hint and is announced when it appears. */ error?: string; /** An async result such as “Checking availability…” or “Available”. */ status?: string; statusTone?: "pending" | "success"; /** Right-aligned counter on the message line, e.g. “6 / 40”. */ count?: string; required?: boolean; /** Adds "(optional)" after the label. */ optional?: boolean; /** Something aligned with the label, such as a "Forgot password?" link. */ action?: ReactNode; className?: string; children: (props: FieldControlProps) => ReactNode; }) { const id = useId(); const message = `${id}-message`; const hasMessage = Boolean(error || status || description || count); const tone = error ? "error" : status ? statusTone : "hint"; return (

{label} {optional && (optional)} {action}

{children({ id, "aria-describedby": hasMessage ? message : undefined, "aria-invalid": error ? true : undefined, "aria-required": required ? true : undefined, })}

{tone === "error" &&

); } 57:T6db,import type { ComponentProps, ReactNode } from "react"; import { cn } from "./lib/cn"; import "./shared/input.css"; import "./shared/input-2.css"; import "./input.css"; const fieldText = "w-full min-w-0 text-base text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm"; export type InputProps = ComponentProps<"input"> & { /** Fixed text or an icon before the value, e.g. "caliper.app/". */ leading?: ReactNode; /** Text, an icon or a status after the value, e.g. a spinner or a count. */ trailing?: ReactNode; }; /** * A recessed text field. Fields sit slightly below the paper (an inner shade * and a 3:1 ring); buttons stand on it, so what you fill and what you press * never look alike. */ export function Input({ className, leading, trailing, ...props }: InputProps) { if (leading === undefined && trailing === undefined) { return ( ); } return ( {leading !== undefined && {leading}} {trailing !== undefined && {trailing}} ); } 58:Tb42,"use client"; import { Eye } from "lucide-react"; import { useId, useState, type ComponentProps } from "react"; import { Input } from "./input"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./password-field.css"; export function PasswordField({ label, description, id, messages, className, onFocus, onBlur, onKeyUp, ...props }: { label: string; description?: string; messages?: { show?: string; hide?: string }; } & Omit, "type">) { const generated = useId(); const fieldId = id ?? generated; const descriptionId = `${fieldId}-description`; const capsId = `${fieldId}-caps`; const [visible, setVisible] = useState(false); const [caps, setCaps] = useState(false); const [focused, setFocused] = useState(false); const show = messages?.show ?? "Show password"; const hide = messages?.hide ?? "Hide password"; const describedBy = [description ? descriptionId : null, focused && caps ? capsId : null].filter(Boolean).join(" ") || undefined; return (

{label}

{ setFocused(true); onFocus?.(event); }} onBlur={(event) => { setFocused(false); onBlur?.(event); }} onKeyUp={(event) => { setCaps(event.getModifierState("CapsLock")); onKeyUp?.(event); }} />

{description ? (

{description}

) : null}

{focused && caps ? "Caps Lock is on." : ""}

); } 59:T1028,"use client"; import { Check } from "lucide-react"; import { useId, useState, type ComponentProps } from "react"; import { PasswordField } from "./password-field"; import { cn } from "./lib/cn"; import "./password-strength.css"; export type PasswordRule = { id: string; label: string; test: (value: string) => boolean; }; export const passwordRules: readonly PasswordRule[] = [ { id: "length", label: "At least 12 characters", test: (value) => value.length >= 12 }, { id: "case", label: "Uppercase and lowercase letters", test: (value) => /[a-z]/.test(value) && /[A-Z]/.test(value) }, { id: "number", label: "A number", test: (value) => /\d/.test(value) }, { id: "symbol", label: "A symbol", test: (value) => /[^A-Za-z0-9\s]/.test(value) }, ]; const words = ["Weak", "Weak", "Fair", "Good", "Strong"] as const; export type PasswordStrengthResult = { level: number; word: string; met: number; }; export function scorePassword(value: string, rules: readonly PasswordRule[] = passwordRules): PasswordStrengthResult { const met = rules.filter((rule) => rule.test(value)).length; if (!value) return { level: 0, word: "No password yet", met }; if (value.length < 8) return { level: 1, word: "Too short", met }; return { level: Math.max(met, 1), word: words[met] ?? "Weak", met }; } export function PasswordStrength({ label = "New password", rules = passwordRules, onValueChange, value, defaultValue = "", onChange, className, ...props }: { label?: string; rules?: readonly PasswordRule[]; onValueChange?: (value: string, strength: PasswordStrengthResult) => void; } & Omit, "label" | "description" | "type">) { const listId = useId(); const [local, setLocal] = useState(String(defaultValue ?? "")); const current = String(value ?? local); const strength = scorePassword(current, rules); const levelName = !current ? "empty" : current.length < 8 ? "short" : (["weak", "weak", "fair", "good", "strong"][strength.met] ?? "weak"); return (

{ const next = event.currentTarget.value; if (value == null) setLocal(next); onChange?.(event); onValueChange?.(next, scorePassword(next, rules)); }} />

{rules.map((rule, index) => ( ))}

); } 5a:T1ed7,"use client"; import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react"; import { Alert } from "./alert"; import { Button } from "./button"; import { Checkbox } from "./checkbox"; import { Field, isEmail } from "./field"; import { Input } from "./input"; import { Label } from "./label"; import { cn } from "./lib/cn"; import { PasswordField } from "./password-field"; export type AuthProvider = { id: string; label: string; icon?: ReactNode; onClick: () => void }; export type SignInResult = void | { error?: string; fields?: { email?: string; password?: string } }; export function Providers({ providers, disabled, verb = "Continue with" }: { providers: readonly AuthProvider[]; disabled?: boolean; verb?: string }) { return (

{providers.map((p) => ( ))}

); } /** Email and password sign in with inline validation, a server error area and optional single sign-on buttons. */ export function SignInForm({ title = "Sign in", description, onSubmit, providers, forgotHref, onForgot, signUp, rememberMe = true, defaultEmail = "", className, }: { title?: string; description?: string; onSubmit: (values: { email: string; password: string; remember: boolean }) => Promise | SignInResult; providers?: readonly AuthProvider[]; forgotHref?: string; onForgot?: () => void; /** Where people without an account go. */ signUp?: { href?: string; onClick?: () => void }; rememberMe?: boolean; defaultEmail?: string; className?: string; }) { const [values, setValues] = useState({ email: defaultEmail, password: "", remember: true }); const [touched, setTouched] = useState({ email: false, password: false }); const [server, setServer] = useState<{ error?: string; fields?: { email?: string; password?: string } }>({}); const [pending, setPending] = useState(false); const form = useRef(null); const refocus = useRef(null); // Fields are disabled while sending; move focus to the first problem once they can take it. useEffect(() => { if (pending || !refocus.current) return; form.current?.querySelector(`[name="${refocus.current}"]`)?.focus(); refocus.current = null; }, [pending]); const local = { email: !values.email.trim() ? "Enter your email address." : !isEmail(values.email) ? "Enter a valid email address, like name@example.com." : "", password: !values.password ? "Enter your password." : "", }; const errors = { email: (touched.email && local.email) || server.fields?.email || "", password: (touched.password && local.password) || server.fields?.password || "", }; const submit = async (event: FormEvent) => { event.preventDefault(); if (pending) return; setTouched({ email: true, password: true }); setServer({}); const first = local.email ? "email" : local.password ? "password" : null; if (first) { form.current?.querySelector(`[name="${first}"]`)?.focus(); return; } setPending(true); let target: string | null = null; try { const result = await onSubmit({ email: values.email.trim(), password: values.password, remember: values.remember }); if (result && (result.error || result.fields)) { setServer(result); target = result.fields?.email ? "email" : result.fields?.password ? "password" : null; } } catch (error) { setServer({ error: error instanceof Error ? error.message : "Something went wrong. Try again." }); } finally { setPending(false); } if (target) refocus.current = target; }; return (

{title}

{description &&

{description}

}

{server.error && ( )} {providers && providers.length > 0 && } {(control) => ( { setValues({ ...values, email: e.target.value }); if (server.fields?.email || server.error) setServer({}); }} onBlur={() => setTouched((t) => ({ ...t, email: true }))} /> )}

{ setValues({ ...values, password: e.target.value }); if (server.fields?.password || server.error) setServer({}); }} onBlur={() => setTouched((t) => ({ ...t, password: true }))} /> {(forgotHref || onForgot) && ( { if (onForgot) { event.preventDefault(); onForgot(); } }} className="absolute right-0 top-0 rounded-control text-xs text-muted-foreground underline underline-offset-4 outline-none hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" > Forgot password? )}

{errors.password && (

{errors.password}

)}

{rememberMe && (

setValues({ ...values, remember: e.target.checked })} /> Keep me signed in on this device

)} {signUp && (

No account yet?{" "} { if (signUp.onClick) { event.preventDefault(); signUp.onClick(); } }} className="rounded-control font-medium text-foreground underline underline-offset-4 outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" > Create one

)} ); } 5b:T1ef2,"use client"; import { useEffect, useRef, useState, type FormEvent } from "react"; import { Alert } from "./alert"; import { Button } from "./button"; import { Checkbox } from "./checkbox"; import { Field, isEmail } from "./field"; import { Input } from "./input"; import { Label } from "./label"; import { cn } from "./lib/cn"; import { PasswordStrength, scorePassword } from "./password-strength"; import { Providers, type AuthProvider } from "./sign-in-form"; export type SignUpResult = void | { error?: string; fields?: { name?: string; email?: string; password?: string } }; /** Name, email and a password with live strength guidance, plus consent. Creates nothing itself: you decide what happens next. */ export function SignUpForm({ title = "Create your account", description, onSubmit, providers, signIn, termsHref, privacyHref, minimumRules = 3, className, }: { title?: string; description?: string; onSubmit: (values: { name: string; email: string; password: string }) => Promise | SignUpResult; providers?: readonly AuthProvider[]; signIn?: { href?: string; onClick?: () => void }; termsHref?: string; privacyHref?: string; /** How many password rules must be met before the form can be sent. */ minimumRules?: number; className?: string; }) { const [values, setValues] = useState({ name: "", email: "", password: "", agree: false }); const [touched, setTouched] = useState({ name: false, email: false, password: false, agree: false }); const [server, setServer] = useState<{ error?: string; fields?: { name?: string; email?: string; password?: string } }>({}); const [pending, setPending] = useState(false); const form = useRef(null); const refocus = useRef(null); // Fields are disabled while sending; move focus to the first problem once they can take it. useEffect(() => { if (pending || !refocus.current) return; form.current?.querySelector(`[name="${refocus.current}"]`)?.focus(); refocus.current = null; }, [pending]); const strength = scorePassword(values.password); const local = { name: !values.name.trim() ? "Tell us your name." : "", email: !values.email.trim() ? "Enter your email address." : !isEmail(values.email) ? "Enter a valid email address, like name@example.com." : "", password: !values.password ? "Choose a password." : strength.met < minimumRules ? "Make the password stronger. Meet more of the requirements below." : "", agree: !values.agree ? "Agree to the terms to continue." : "", }; const errors = { name: (touched.name && local.name) || server.fields?.name || "", email: (touched.email && local.email) || server.fields?.email || "", password: (touched.password && local.password) || server.fields?.password || "", agree: touched.agree && local.agree, }; const submit = async (event: FormEvent) => { event.preventDefault(); if (pending) return; setTouched({ name: true, email: true, password: true, agree: true }); setServer({}); const first = (["name", "email", "password", "agree"] as const).find((k) => local[k]); if (first) { form.current?.querySelector(`[name="${first}"]`)?.focus(); return; } setPending(true); let target: string | undefined; try { const result = await onSubmit({ name: values.name.trim(), email: values.email.trim(), password: values.password }); if (result && (result.error || result.fields)) { setServer(result); target = (["name", "email", "password"] as const).find((k) => result.fields?.[k]); } } catch (error) { setServer({ error: error instanceof Error ? error.message : "Something went wrong. Try again." }); } finally { setPending(false); } if (target) refocus.current = target; }; return (

{title}

{description &&

{description}

}

{server.error && } {providers && providers.length > 0 && } {(control) => ( setValues({ ...values, name: e.target.value })} onBlur={() => setTouched((t) => ({ ...t, name: true }))} /> )} {(control) => ( { setValues({ ...values, email: e.target.value }); if (server.fields?.email) setServer({}); }} onBlur={() => setTouched((t) => ({ ...t, email: true }))} /> )}

setValues((v) => ({ ...v, password: next }))} onBlur={() => setTouched((t) => ({ ...t, password: true }))} /> {errors.password && (

{errors.password}

)}

{ setValues({ ...values, agree: e.target.checked }); setTouched((t) => ({ ...t, agree: true })); }} /> I agree to the{" "} Terms {" "} and{" "} Privacy Policy .

{errors.agree && (

{errors.agree}

)}

{signIn && (

Already have an account?{" "} { if (signIn.onClick) { event.preventDefault(); signIn.onClick(); } }} className="rounded-control font-medium text-foreground underline underline-offset-4 outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" > Sign in

)} ); } 5c:T57b,/* Shared by alert.tsx, toast.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="feedback-message"] { display: block; animation: caliper-fade-in var(--duration-normal) var(--ease-out); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="success"] [data-slot="feedback-icon"] { background: var(--success-subtle); color: var(--success); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="warning"] [data-slot="feedback-icon"] { background: var(--warning-subtle); color: var(--warning); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="error"] [data-slot="feedback-icon"] { background: var(--destructive-subtle); color: var(--destructive); } @container (max-width: 22rem) { [data-slot="feedback-copy"] { display: contents; } [data-slot="feedback-title"] { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 0.25rem; } [data-slot="feedback-description"], [data-slot="feedback-action"] { grid-column: 1 / -1; margin-top: 0; } [data-slot="feedback-description"] { grid-row: 2; } [data-slot="feedback-action"] { grid-row: 3; } } @media (prefers-reduced-motion: reduce) { [data-slot="feedback-message"] { animation: none; } } } 5d:T465,/* alert.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="alert"] { container-type: inline-size; opacity: 1; transform: translateY(0); transition-property: opacity, transform, display; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-out); transition-behavior: allow-discrete; } [data-slot="alert"][hidden] { display: none !important; opacity: 0; pointer-events: none; transition-duration: var(--duration-fast); } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 0; transform: translateY(var(--motion-enter-distance)); } } @container (max-width: 22rem) { [data-slot="alert"] > [data-slot="button"] { grid-column: 3; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { [data-slot="alert"] { transition: none; transform: none !important; } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 1; transform: none; } } } } 5e:T136e,/* button.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="button"] { transition-property: background-color, color, border-color; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } /* Button material. Raised to press: a lit top edge and a small lift; the press travels 1px down and swaps the lift for an inner shade. Only translate animates (release on the settle curve); shadows swap. */ [data-slot="button"] { --b-bg: var(--raised); --b-bg-hover: var(--raised-hover); --b-bg-press: var(--raised-press); --b-fg: var(--foreground); --b-shadow: var(--shadow-raised); --b-shadow-press: var(--shadow-raised-press); background-color: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-shadow); transition-property: background-color, color, border-color, translate; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-normal); transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle); } [data-slot="button"][data-variant="default"] { --b-bg: var(--accent); --b-bg-hover: var(--accent-hover); --b-bg-press: var(--accent-press); --b-fg: var(--accent-foreground); --b-shadow: var(--shadow-accent); --b-shadow-press: var(--shadow-accent-press); } [data-slot="button"][data-variant="destructive"] { --b-bg: var(--danger-fill); --b-bg-hover: var(--danger-fill-hover); --b-bg-press: var(--danger-fill-press); --b-fg: var(--danger-fill-foreground); --b-shadow: var(--shadow-danger); --b-shadow-press: var(--shadow-danger-press); } [data-slot="button"][data-variant="ghost"] { --b-bg: transparent; --b-bg-hover: var(--muted); --b-bg-press: var(--muted); --b-fg: var(--muted-foreground); --b-shadow: none; --b-shadow-press: none; } @media (hover: hover) { [data-slot="button"]:hover { background-color: var(--b-bg-hover); } [data-slot="button"][data-variant="ghost"]:hover { color: var(--foreground); } } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: 0 var(--motion-press-travel); background-color: var(--b-bg-press); box-shadow: var(--b-shadow-press); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms; transition-timing-function: var(--ease-out); } [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background-color: var(--sunken); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); } [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not( [aria-busy="true"] ) { background-color: transparent; box-shadow: none; } /* Loading keeps the exact width: the label stays in flow but invisible. */ [data-slot="button-label"] { display: inline-flex; align-items: center; gap: inherit; } /* Opacity, not visibility, so the label still names the button. */ [data-slot="button-label"][data-hidden="true"] { opacity: 0; } [data-slot="button-busy"] { position: absolute; inset: 0; display: grid; place-items: center; } [data-slot="button-feedback"] { display: inline-flex; align-items: center; gap: inherit; overflow: clip; transition: width var(--duration-normal) var(--ease-out); } [data-slot="button-feedback-label"] { display: inline-flex; flex-shrink: 0; align-items: center; gap: inherit; width: max-content; } [data-slot="button-feedback-label"][data-enter="true"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-out); } [data-slot="button"][aria-busy="true"] { pointer-events: none; } [data-slot="button"][data-action-phase="error"] { color: var(--danger); } @media (prefers-reduced-motion: reduce) { [data-slot="button"], [data-slot="button-feedback"] { transition: none; } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: none; } [data-slot="button-feedback-label"], [data-slot="button-feedback-label"][data-enter="true"] { animation: none; } } /* Toggle: pressed is recessed, as a toggled tool in a button group is. */ /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */ [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] { --b-bg: var(--sunken); --b-bg-hover: var(--sunken); --b-bg-press: var(--sunken); --b-fg: var(--foreground); --b-shadow: var(--shadow-sunken); --b-shadow-press: var(--shadow-sunken); } } 5f:T10bf,/* checkbox.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* The native input fills the target; the smaller indicator is decorative. */ [data-slot="checkbox-root"] { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-height); height: var(--control-height); vertical-align: middle; } [data-slot="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; border: 0; background: transparent; outline: none; cursor: pointer; touch-action: manipulation; } /* Choice marks: one 18px recessed mark for checkbox and radio. Checked marks fill with ink; the check stroke draws itself and the radio dot settles in. The switch thumb stretches while pressed, then settles. */ [data-slot="checkbox-indicator"] { box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: none; background: var(--field); box-shadow: var(--shadow-field); transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } [data-slot="checkbox-indicator"] { width: 18px; height: 18px; } [data-slot="checkbox-indicator"] { border-radius: var(--radius-mark); color: var(--accent-foreground); } [data-slot="checkbox-indicator"] svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-slot="checkbox-indicator"] path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 200ms var(--ease-out); } [data-slot="checkbox"]:checked:not(:indeterminate) + [data-slot="checkbox-indicator"] [data-mark="check"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] [data-mark="mixed"] { stroke-dashoffset: 0; } [data-slot="checkbox"]:checked + [data-slot="checkbox-indicator"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / 14%); } @media (hover: hover) { [data-slot="checkbox"]:hover:not(:disabled):not(:checked) + [data-slot="checkbox-indicator"] { box-shadow: var(--shadow-field-hover); } } [data-slot="checkbox"]:focus-visible + [data-slot="checkbox-indicator"] { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="checkbox"][aria-invalid="true"] + [data-slot="checkbox-indicator"] { box-shadow: var(--shadow-field-invalid); outline-color: var(--destructive); } [data-slot="checkbox"]:disabled { cursor: not-allowed; } [data-slot="checkbox"]:disabled + [data-slot="checkbox-indicator"] { background: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } [data-slot="checkbox"]:disabled:is(:checked, :indeterminate) + [data-slot="checkbox-indicator"] { background: var(--border); box-shadow: none; } @media (forced-colors: active) { [data-slot="checkbox-indicator"] { forced-color-adjust: none; background: Canvas; border-color: CanvasText; } [data-slot="checkbox"]:checked + [data-slot="checkbox-indicator"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] { background: Highlight; border-color: Highlight; } [data-slot="checkbox"]:is(:checked, :indeterminate) + [data-slot="checkbox-indicator"] { color: HighlightText; } [data-slot="checkbox-indicator"] { border: 1px solid CanvasText; box-shadow: none; } [data-slot="checkbox"]:hover:not(:disabled) + [data-slot="checkbox-indicator"] { border-color: CanvasText; } [data-slot="checkbox"]:focus-visible + [data-slot="checkbox-indicator"] { outline-color: Highlight; } } @media (prefers-reduced-motion: reduce) { [data-slot="checkbox-indicator"], [data-slot="checkbox-indicator"] path { transition: none; } } } 60:T519,/* Shared by combobox.tsx, input.tsx, select-menu.tsx, select.tsx, textarea.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { @media (hover: hover) { :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):hover:enabled:not(:focus-visible):not([aria-invalid="true"]) { box-shadow: var(--shadow-field-hover); } } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):focus-visible { outline: none; box-shadow: var(--shadow-field-focus); transition: none; } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"] { box-shadow: var(--shadow-field-invalid); } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"]:focus-visible { box-shadow: var(--shadow-field-invalid), 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):disabled { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } :is([data-slot="input"], [data-slot="textarea"])[readonly] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); } } 61:T8c5,/* input.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Recessed to fill. One ring for every field: 3:1 at rest, darker on hover, a 2px ember ring with a soft halo on focus, danger when invalid. Disabled and read-only drop into the sunken fill and stay legible. */ [data-slot="input-group"] { border: 0; background-color: var(--field); box-shadow: var(--shadow-field); transition: box-shadow var(--duration-fast) var(--ease-out); } @media (hover: hover) { [data-slot="input-group"]:not([data-disabled]):not([data-invalid]):hover:not(:focus-within) { box-shadow: var(--shadow-field-hover); } } [data-slot="input-group"]:focus-within { outline: none; box-shadow: var(--shadow-field-focus); transition: none; } [data-slot="input-group"][data-invalid] { box-shadow: var(--shadow-field-invalid); } [data-slot="input-group"][data-invalid]:focus-within { box-shadow: var(--shadow-field-invalid), 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } [data-slot="input-group"][data-disabled] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } [data-slot="input-group"][data-readonly] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); } [data-slot="input-bare"] { border: 0; box-shadow: none; outline: none; } [data-slot="input-affix"] { display: inline-flex; align-items: center; height: 20px; padding-inline-end: 10px; margin-inline-end: 2px; color: var(--muted-foreground); box-shadow: 1px 0 0 var(--border); white-space: nowrap; } [data-slot="input-affix"]:dir(rtl) { box-shadow: -1px 0 0 var(--border); } [data-slot="input-affix"]:has(> svg:only-child) { padding-inline-end: 0; box-shadow: none; } [data-slot="input-trailing"] { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); white-space: nowrap; font-size: 12px; } :is([data-slot="input-affix"], [data-slot="input-trailing"]) svg { width: 16px; height: 16px; } } 62:T5ab,/* password-strength.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="strength-segment"] { background: var(--muted-foreground); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-travel) var(--ease-showcase); } [data-slot="strength-segment"][data-met="true"] { transform: scaleX(1); } [data-slot="strength-meter"][data-level="short"] [data-slot="strength-segment"][data-met="true"], [data-slot="strength-meter"][data-level="weak"] [data-slot="strength-segment"][data-met="true"] { background: var(--danger); } [data-slot="strength-meter"][data-level="fair"] [data-slot="strength-segment"][data-met="true"] { background: var(--warning); } [data-slot="strength-meter"][data-level="good"] [data-slot="strength-segment"][data-met="true"] { background: var(--foreground); } [data-slot="strength-meter"][data-level="strong"] [data-slot="strength-segment"][data-met="true"] { background: var(--success); } [data-slot="strength-check"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-showcase); } @media (prefers-reduced-motion: reduce) { [data-slot="strength-segment"] { transition: transform 400ms var(--ease-showcase); } [data-slot="strength-check"] { animation: caliper-feedback-enter 180ms var(--ease-showcase); } } } 50:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/alert.tsx","content":"$53","type":"registry:ui","target":"components/ui/alert.tsx"},{"path":"ui/button.tsx","content":"$54","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"ui/checkbox.tsx","content":"$55","type":"registry:ui","target":"components/ui/checkbox.tsx"},{"path":"ui/feedback.tsx","content":"import { CircleCheck, CircleX, Info, LoaderCircle, TriangleAlert } from \"lucide-react\";\nimport \"./feedback.css\";\n\nexport type FeedbackVariant = \"neutral\" | \"success\" | \"warning\" | \"error\";\n\nconst icons = {\n neutral: Info,\n success: CircleCheck,\n warning: TriangleAlert,\n error: CircleX,\n};\n\nexport function FeedbackIcon({\n variant,\n loading = false,\n}: {\n variant: FeedbackVariant;\n loading?: boolean;\n}) {\n const Icon = loading ? LoaderCircle : icons[variant];\n return (\n \n \n \n \n \n );\n}\n","type":"registry:ui","target":"components/ui/feedback.tsx"},{"path":"ui/field.tsx","content":"$56","type":"registry:ui","target":"components/ui/field.tsx"},{"path":"ui/input.tsx","content":"$57","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/password-field.tsx","content":"$58","type":"registry:ui","target":"components/ui/password-field.tsx"},{"path":"ui/password-strength.tsx","content":"$59","type":"registry:ui","target":"components/ui/password-strength.tsx"},{"path":"ui/sign-in-form.tsx","content":"$5a","type":"registry:ui","target":"components/ui/sign-in-form.tsx"},{"path":"ui/sign-up-form.tsx","content":"$5b","type":"registry:ui","target":"components/ui/sign-up-form.tsx"},{"path":"ui/shared/alert.css","content":"$5c","type":"registry:file","target":"components/ui/shared/alert.css"},{"path":"ui/alert.css","content":"$5d","type":"registry:file","target":"components/ui/alert.css"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$5e","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/checkbox.css","content":"$5f","type":"registry:file","target":"components/ui/checkbox.css"},{"path":"ui/feedback.css","content":"/* feedback.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"feedback-icon\"] {\n display: flex;\n width: 2rem;\n height: 2rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-surface);\n background: var(--muted);\n color: var(--muted-foreground);\n transition:\n color var(--duration-fast) var(--ease-out),\n background-color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"feedback-symbol\"] {\n display: flex;\n animation: caliper-feedback-symbol-enter var(--duration-normal) var(--ease-out);\n }\n [data-slot=\"feedback-icon\"] svg {\n width: 1rem;\n height: 1rem;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"feedback-icon\"] {\n transition: none;\n transform: none !important;\n }\n [data-slot=\"feedback-symbol\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/feedback.css"},{"path":"ui/shared/field-message.css","content":"/* Shared by date-input.tsx, field.tsx, scrub-field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"field-message\"] {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n min-height: 18px;\n margin: 0;\n font-size: 12px;\n line-height: 18px;\n color: var(--muted-foreground);\n }\n [data-slot=\"field-message\"] svg {\n flex: none;\n width: 14px;\n height: 14px;\n margin-top: 2px;\n }\n [data-slot=\"field-message\"][data-tone=\"error\"] {\n color: var(--danger);\n }\n [data-slot=\"field-message\"][data-tone=\"success\"] {\n color: var(--success);\n }\n}\n","type":"registry:file","target":"components/ui/shared/field-message.css"},{"path":"ui/field.css","content":"/* field.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"field-count\"] {\n margin-left: auto;\n color: var(--muted-foreground);\n font-family: var(--font-mono);\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n }\n}\n","type":"registry:file","target":"components/ui/field.css"},{"path":"ui/shared/input.css","content":"/* Shared by combobox.tsx, input.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"input\"] {\n transition-property: background-color, color, border-color;\n transition-duration: var(--duration-fast);\n transition-timing-function: var(--ease-out);\n }\n\n /* Recessed to fill. One ring for every field: 3:1 at rest, darker on\n hover, a 2px ember ring with a soft halo on focus, danger when invalid.\n Disabled and read-only drop into the sunken fill and stay legible. */\n [data-slot=\"input\"] {\n border: 0;\n background-color: var(--field);\n box-shadow: var(--shadow-field);\n transition: box-shadow var(--duration-fast) var(--ease-out);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"input\"] {\n transition: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/input.css"},{"path":"ui/shared/input-2.css","content":"$60","type":"registry:file","target":"components/ui/shared/input-2.css"},{"path":"ui/input.css","content":"$61","type":"registry:file","target":"components/ui/input.css"},{"path":"ui/password-field.css","content":"/* password-field.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"password-slash\"] {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.15rem;\n height: 1.5px;\n border-radius: 1px;\n background: currentColor;\n translate: -50% -50%;\n rotate: -40deg;\n scale: 0 1;\n transition: scale var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"password-slash\"][data-drawn=\"true\"] {\n scale: 1 1;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"password-slash\"] {\n transition: scale 400ms var(--ease-showcase);\n }\n }\n}\n","type":"registry:file","target":"components/ui/password-field.css"},{"path":"ui/password-strength.css","content":"$62","type":"registry:file","target":"components/ui/password-strength.css"}],"className":"h-[70svh] min-h-80"}]]}]