50: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"] 51: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"] 52:T13ee,'use client'; import { createContext, useContext, useId } from 'react'; import { Slot } from 'radix-ui'; import { cn } from '@/lib/utils'; import { Label } from './label'; /** * The wiring every form row needs and nobody writes correctly by hand: a label * bound to the control, a description and an error both referenced from * `aria-describedby`, and `aria-invalid` set when there is an error. * * The part that is easy to get wrong: when a field has BOTH a description and an * error, `aria-describedby` must list both ids, and the error should come first * so it is announced first. Dropping the description when an error appears is * the common bug , the user loses the format hint at the exact moment they need * it. * * ```tsx * * Flag key * * * * Lowercase, dashes only. * {errors.key?.message} * * ``` */ interface FieldContextValue { id: string; descriptionId: string; errorId: string; hasError: boolean; hasDescription: boolean; } const FieldContext = createContext(null); function useField(component: string): FieldContextValue { const ctx = useContext(FieldContext); if (!ctx) throw new Error(`<${component}> must be used inside a .`); return ctx; } export interface FieldProps extends React.ComponentProps<'div'> { /** Overrides the generated id, for when a caller needs a stable one. */ id?: string; /** Presence of a message here is what marks the field invalid. */ error?: string | null; /** Set when a description will be rendered, so ids are wired up front. */ describedBy?: boolean; } function Field({ className, id: idProp, error, describedBy, children, ...props }: FieldProps) { const generated = useId(); const id = idProp ?? generated; return (

{children}

); } function FieldLabel({ className, ...props }: React.ComponentProps) { const { id } = useField('FieldLabel'); return ; } export interface FieldControlProps { /** The single control element to wire up. */ children: React.ReactNode; } /** * Applies the generated `id`, `aria-describedby` and `aria-invalid` onto its * single child via Radix's `Slot`. * * ## Why a Slot and not a render prop * * The render-prop version of this (`{(props) => }`) is * unusable from a Server Component: `Field` is a client component, and React * refuses to serialise a function child across that boundary with * *"Functions cannot be passed directly to Client Components"*. Since half the * point of a design system is that a consumer can drop a form into an RSC page, * the API has to be plain elements. `Slot` merges the props onto the child * instead, and a prop the caller sets explicitly still wins. */ function FieldControl({ children }: FieldControlProps) { const { id, descriptionId, errorId, hasError, hasDescription } = useField('FieldControl'); // Error first: a screen reader announces describedby in order, and the // failure matters more than the hint. Both are listed , losing the hint when // an error appears is the bug this avoids. const describedBy = [hasError ? errorId : null, hasDescription ? descriptionId : null].filter(Boolean).join(' ') || undefined; return ( {children} ); } function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) { const { descriptionId } = useField('FieldDescription'); return (

); } /** * Renders nothing when there is no message, so callers can pass a possibly- * undefined validation message without a conditional. * * `role="alert"` because this appears in response to a user action and should * interrupt , unlike `Alert`, which defaults to polite `status`. */ function FieldError({ className, children, ...props }: React.ComponentProps<'p'>) { const { errorId } = useField('FieldError'); if (!children) return null; return (

{children}

); } export { Field, FieldLabel, FieldControl, FieldDescription, FieldError }; 4f:["$","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,["$","$L50",null,{"namespace":"@velobits","registryDependencies":["https://ui.velobits.dev/r/cn.json","https://ui.velobits.dev/r/label.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/velobits/ui/field.tsx","content":"$52","type":"registry:ui","target":"@ui/velobits/field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]