52: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"] 53: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"] 54: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}} ); } 55: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." : ""}

); } 56: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) => ( ))}

); } 57: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); } } 58: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; } } 59: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); } } } 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/input.tsx","content":"$54","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":"$55","type":"registry:ui","target":"components/ui/password-field.tsx"},{"path":"ui/password-strength.tsx","content":"$56","type":"registry:ui","target":"components/ui/password-strength.tsx"},{"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":"$57","type":"registry:file","target":"components/ui/shared/input-2.css"},{"path":"ui/input.css","content":"$58","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":"$59","type":"registry:file","target":"components/ui/password-strength.css"}],"className":"h-[70svh] min-h-80"}]]}]