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: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", ); 51:T8ca,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { fieldHeaderStyles, inputStyles, getInputWrapperClassName, getInputClassName, } from "@/lib/styles"; export interface InputFieldProps extends Omit, "size"> { title?: string; hint?: string; size?: "md" | "sm"; suffix?: React.ReactNode; errorMessage?: string; wrapperClassName?: string; } export const Input = React.forwardRef( ( { title, hint, size = "md", suffix, errorMessage, className, wrapperClassName, disabled, ...props }, ref, ) => { const inputId = React.useId(); return (

{(title || hint) && (

{title &&

{title}

} {hint &&

{hint}

}

)}

{suffix &&

{suffix}

}

{errorMessage && (

{errorMessage}

)}

); }, ); Input.displayName = "Input";4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"registry/turbopills/lib/styles.tsx","content":"$50","type":"registry:lib","target":"lib/styles.tsx"},{"path":"registry/turbopills/ui/input.tsx","content":"$51","type":"registry:component","target":"components/turbopills/ui/input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]