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:Tc80,import { cn } from "@/lib/utils"; export const optionStyles = { base: "h-15 inline-flex items-center justify-between w-full bg-background border rounded-lg p-4 cursor-pointer transition-all", textSelectionDisabled: "select-none", hover: "hover:ring-1 hover:ring-border", outlineOnSelect: "ring-2 ring-primary hover:ring-2 hover:ring-primary", fillOnSelect: "bg-primary/10", shadowOnSelect: "shadow-md shadow-primary/25", disabled: "opacity-50 cursor-not-allowed", }; export const getOptionClassName = ({ selected = false, highlightOnHover = true, showOutlineOnSelect = true, showFillOnSelect = false, showShadowOnSelect = false, disabled = false, allowTextSelection = false, }: { selected?: boolean; highlightOnHover?: boolean; showOutlineOnSelect?: boolean; showFillOnSelect?: boolean; showShadowOnSelect?: boolean; disabled?: boolean; allowTextSelection?: boolean; }) => cn( optionStyles.base, !allowTextSelection && optionStyles.textSelectionDisabled, highlightOnHover && optionStyles.hover, selected && showOutlineOnSelect && optionStyles.outlineOnSelect, selected && showFillOnSelect && optionStyles.fillOnSelect, selected && showShadowOnSelect && optionStyles.shadowOnSelect, disabled && optionStyles.disabled, ); export const fieldHeaderStyles = { container: "mb-3 space-y-1", title: "text-3xl leading-9 font-medium", titleSm: "text-xl leading-6 font-medium", hint: "text-muted-foreground", hintSm: "text-sm text-muted-foreground", }; export const inputStyles = { wrapper: "relative flex items-center w-full border rounded-2xl bg-background hover:border-primary transition-[color,border-color] overflow-hidden focus-within:ring-1 focus-within:ring-primary focus-within:border-primary", wrapperDefault: "h-[60px]", wrapperSm: "h-10 !rounded-lg", input: "flex-1 w-full bg-transparent border-0 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", inputDefault: "px-5 py-4 text-md placeholder:text-md", inputSm: "h-[38px] p-2 text-sm font-light placeholder:text-sm placeholder:font-light", suffix: "flex items-center pl-2 pr-5 text-muted-foreground text-sm", error: "border-destructive focus-within:outline-destructive/20 focus-within:border-destructive", autofill: "[&:has(input:-webkit-autofill)]:bg-[#e8f0fe]", inputAutofill: "autofill:[box-shadow:inset_0_0_0_9999px_#e8f0fe] autofill:[-webkit-text-fill-color:var(--color-foreground)]", }; export const getInputWrapperClassName = ({ size = "md", hasError = false, }: { size?: "md" | "sm"; hasError?: boolean; }) => cn( inputStyles.wrapper, inputStyles.autofill, size === "sm" ? inputStyles.wrapperSm : inputStyles.wrapperDefault, hasError && inputStyles.error, ); export const getInputClassName = ({ size = "md", hasSuffix = false, }: { size?: "md" | "sm"; hasSuffix?: boolean; }) => cn( inputStyles.input, inputStyles.inputAutofill, size === "sm" ? inputStyles.inputSm : inputStyles.inputDefault, hasSuffix && "pr-0", ); 54:T2076,"use client"; import * as React from "react"; import { InputMask, InputMaskProps } from "@react-input/mask"; import { CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { fieldHeaderStyles, inputStyles, getInputWrapperClassName, getInputClassName, } from "@/lib/styles"; import { Button } from "@/components/ui/button"; import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Calendar } from "@/components/ui/calendar"; const formatDate = (date: Date): string => { const month = String(date.getMonth() + 1).padStart(2, "0"); const day = String(date.getDate()).padStart(2, "0"); const year = date.getFullYear(); return `${month}/${day}/${year}`; }; const parseDate = (str: string): Date | undefined => { if (!str || str.length < 10) return undefined; const match = str.match(/^(\d{2})\/(\d{2})\/(\d{4})$/); if (!match) return undefined; const [, month, day, year] = match; const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day)); if ( date.getFullYear() !== parseInt(year) || date.getMonth() !== parseInt(month) - 1 || date.getDate() !== parseInt(day) ) { return undefined; } return date; }; export type MaskPreset = "tel" | "date" | "custom"; export interface MaskedInputProps extends Omit< React.InputHTMLAttributes, "size" | "onChange" | "value" > { title?: string; hint?: string; size?: "md" | "sm"; suffix?: React.ReactNode; errorMessage?: string; wrapperClassName?: string; value?: string; onChange?: (value: string) => void; preset?: MaskPreset; mask?: string; replacement?: InputMaskProps["replacement"]; separate?: boolean; showMask?: boolean; calendarCaptionLayout?: | "label" | "dropdown" | "dropdown-months" | "dropdown-years"; } const MASK_PRESETS: Record< Exclude, { mask: string; placeholder: string; replacement: InputMaskProps["replacement"]; separate?: boolean; } > = { tel: { mask: "(___) ___-____", placeholder: "(___) ___-____", replacement: { _: /\d/ }, separate: true, }, date: { mask: "MM/DD/YYYY", placeholder: "MM/DD/YYYY", replacement: { M: /\d/, D: /\d/, Y: /\d/ }, }, }; export const MaskedInput = React.forwardRef( ( { title, hint, size = "md", suffix, errorMessage, className, wrapperClassName, disabled, value, onChange, preset = "custom", mask, placeholder, replacement, separate, showMask = true, calendarCaptionLayout = "dropdown", onFocus, ...props }, ref, ) => { const inputId = React.useId(); const [isPopoverOpen, setIsPopoverOpen] = React.useState(false); const presetConfig = preset !== "custom" ? MASK_PRESETS[preset] : null; const resolvedMask = mask ?? presetConfig?.mask; const resolvedPlaceholder = placeholder ?? presetConfig?.placeholder; const resolvedReplacement = replacement ?? presetConfig?.replacement; const resolvedSeparate = separate ?? presetConfig?.separate; const isDateInput = preset === "date"; const hasSuffix = !!suffix || isDateInput; const [internalValue, setInternalValue] = React.useState(value ?? ""); const isControlled = value !== undefined; const currentValue = isControlled ? value : internalValue; const [selectedDate, setSelectedDate] = React.useState( () => { if (!isDateInput || !currentValue) return undefined; return parseDate(currentValue); }, ); const [month, setMonth] = React.useState(selectedDate); React.useEffect(() => { if (!isDateInput) return; const parsed = parseDate(currentValue); setSelectedDate(parsed); if (parsed) { setMonth(parsed); } }, [currentValue, isDateInput]); const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value; if (!isControlled) { setInternalValue(newValue); } onChange?.(newValue); }; const handleFocus = (e: React.FocusEvent) => { const input = e.target as HTMLInputElement; setTimeout(() => { const val = input.value; const hasDigit = /\d/.test(val); if (!hasDigit) { if (isDateInput) { input.setSelectionRange(0, 0); } else if (preset === "tel") { input.setSelectionRange(1, 1); } } }, 50); onFocus?.(e); }; const handleDateSelect = (date: Date | undefined) => { setSelectedDate(date); if (date) { const formatted = formatDate(date); if (!isControlled) { setInternalValue(formatted); } onChange?.(formatted); } setIsPopoverOpen(false); }; const inputElement = ( ); const inputWrapperClassName = cn( getInputWrapperClassName({ size, hasError: !!errorMessage }), disabled && "opacity-50 cursor-not-allowed", wrapperClassName, ); return (

{(title || hint) && (

{title &&

{title}

} {hint &&

{hint}

}

)} {isDateInput ? (

{inputElement}

) : (

{inputElement} {suffix && (

{suffix}

)}

)} {errorMessage && (

{errorMessage}

)}

); }, ); MaskedInput.displayName = "MaskedInput"; 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","@react-input/mask",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-input%2Fmask","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":"@react-input/mask"}]]}]}],["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@turbopills-ui","registryDependencies":["button","popover","calendar"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/turbopills/lib/styles.tsx","content":"$53","type":"registry:lib","target":"lib/styles.tsx"},{"path":"registry/turbopills/ui/masked-input.tsx","content":"$54","type":"registry:component","target":"components/turbopills/ui/masked-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]