4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2331,import { useId, useState, type ComponentProps, type ReactNode } from "react" import { cn } from "@/lib/utils" import { Field, FieldDescription, FieldError } from "./field" import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea } from "./input-group" /** * Material 3 text field. * * Kit geometry (Text fields page): 56dp tall, 16dp horizontal padding, * body-large content. The label lives *inside* the field and floats — onto * the outline as a 12/16 label in a Surface-filled notch for the outlined * style, or to the top of the tinted container for the filled style — when the * field is focused or holds a value. * * The outline carries the state: 1dp Outline at rest, 1dp On Surface on hover, * 3dp Primary when focused, 3dp Error when invalid. Extra weight is painted as * an inset shadow so the text never reflows. The filled style keeps only the * bottom "active indicator" (1dp → 3dp). Disabled fields tint the filled * container On Surface at 4% and leave the outlined one unfilled at 12%. */ type TextFieldVariant = "outlined" | "filled" type TextFieldBaseProps = Omit, "defaultValue" | "onChange"> & { autoComplete?: string disabled?: boolean error?: string invalid?: boolean label: string leading?: ReactNode maxLength?: number multiline?: boolean name?: string placeholder?: string prefix?: ReactNode readOnly?: boolean rows?: number suffix?: ReactNode supportingText?: ReactNode trailing?: ReactNode variant?: TextFieldVariant } type TextFieldValueProps = | { defaultValue?: string; onValueChange?: (value: string) => void; value?: never } | { defaultValue?: never; onValueChange: (value: string) => void; value: string } type TextFieldProps = TextFieldBaseProps & TextFieldValueProps // Tailwind only generates classes it can read literally, so every variant // string below is spelled out rather than assembled. function TextField({ autoComplete, className, defaultValue = "", disabled = false, error, invalid = false, label, leading, maxLength, multiline = false, name, onValueChange, placeholder, prefix, readOnly = false, rows = 3, suffix, supportingText, trailing, value: valueProp, variant = "outlined", ...props }: TextFieldProps) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue) const value = valueProp ?? uncontrolledValue const id = useId() const errorId = `${id}-error` const helpId = `${id}-help` const describedBy = error ? errorId : supportingText || maxLength ? helpId : undefined const showError = invalid || Boolean(error) const setValue = (next: string) => { if (valueProp === undefined) setUncontrolledValue(next) onValueChange?.(next) } const controlProps = { id, name, value, disabled, readOnly, maxLength, // A space keeps `:placeholder-shown` meaningful when no placeholder is // given; a real placeholder is only revealed once the label has floated. placeholder: placeholder || " ", autoComplete, "aria-invalid": showError || undefined, "aria-describedby": describedBy, onChange: (event: React.ChangeEvent) => setValue(event.target.value), } const filled = variant === "filled" const controlClassName = cn( "placeholder:text-transparent focus:placeholder:text-m3-on-surface-variant", // Filled: the value sits under the floated label. filled && !multiline && "pt-5 pb-1", filled && multiline && "pt-6", multiline && !filled && "pt-5", ) return ( 0 || undefined} className={cn( "text-foreground transition-[border-color,box-shadow,background-color] duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast) motion-reduce:transition-none", filled ? [ "rounded-t-m3-xs bg-m3-surface-container-highest", // Active indicator: the 1dp bottom rule that grows to 3dp. "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-m3-on-surface-variant", "after:transition-[height,background-color] after:duration-(--m3-spring-effects-fast-duration) after:ease-(--m3-spring-effects-fast)", !disabled && "hover:after:bg-m3-on-surface", "has-[[data-slot=input-group-control]:focus-visible]:after:h-[3px] has-[[data-slot=input-group-control]:focus-visible]:after:bg-m3-primary", showError && "after:h-[3px] after:bg-m3-error hover:after:bg-m3-error has-[[aria-invalid=true]]:after:bg-m3-error", disabled && "bg-m3-on-surface/4 after:bg-m3-on-surface/38", ] : [ "rounded-m3-xs border border-m3-outline bg-transparent", !disabled && "hover:border-m3-on-surface", "has-[[data-slot=input-group-control]:focus-visible]:border-m3-primary has-[[data-slot=input-group-control]:focus-visible]:shadow-[inset_0_0_0_2px_var(--m3-primary)]", showError && "border-m3-error shadow-[inset_0_0_0_2px_var(--m3-error)] hover:border-m3-error has-[[aria-invalid=true]]:border-m3-error has-[[aria-invalid=true]]:shadow-[inset_0_0_0_2px_var(--m3-error)]", disabled && "border-m3-on-surface/12 hover:border-m3-on-surface/12", ], )} > {leading && {leading}} {prefix && {prefix}} {label} {multiline ? ( ) : ( )} {suffix && {suffix}} {trailing && ( svg]:size-6", showError && "text-m3-error")}> {trailing} )} {(supportingText || maxLength) && (

{supportingText ? {supportingText} : } {maxLength && {value.length} / {maxLength}}

)} {error && {error}} ) } export { TextField, type TextFieldProps, type TextFieldVariant } 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/field.json","https://guillermo-rebolledo.github.io/materialcn/r/input-group.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/text-field.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]