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:T1c95,"use client"; import * as React from "react"; import type { SelectField as SelectFieldDef } from "@buildnbuzz/form-react"; import { useDataField, useFieldOptions } from "@buildnbuzz/form-react"; import type { NormalizedOption } from "@buildnbuzz/form-react"; import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxValue, } from "@/components/ui/combobox"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // UI options // --------------------------------------------------------------------------- interface SelectUi { /** Show a clear button when a value is selected. Defaults to `true` when not required. */ isClearable?: boolean; /** className applied to ``. */ className?: string; /** Inline width applied to ``. */ width?: string | number; /** Controls required asterisk visibility. */ asterisk?: boolean; /** Text and label overrides. */ labels?: { /** Message shown when no options match the search query. */ empty?: React.ReactNode; }; } // --------------------------------------------------------------------------- // Option item renderer // --------------------------------------------------------------------------- function OptionContent({ opt, hideDescription, }: { opt: NormalizedOption; hideDescription?: boolean; }) { const optDescription = opt.ui?.description as React.ReactNode; const showDescription = optDescription && !hideDescription; return ( {opt.label} {showDescription && ( {optDescription} )} ); } // --------------------------------------------------------------------------- // SelectField // --------------------------------------------------------------------------- export function SelectField() { const { fieldApi, field, isDisabled, isReadOnly, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, } = useDataField(); const { options, isLoading } = useFieldOptions(field.options); const ui = field.ui as SelectUi | undefined; const isClearable = ui?.isClearable ?? !isRequired; const hasMany = !!field.hasMany; const widthStyle = ui?.width ? { width: typeof ui.width === "number" ? `${ui.width}px` : ui.width, flex: "0 1 auto", } : undefined; const value = fieldApi.state.value; const selectedValues = React.useMemo(() => { if (hasMany) { const vals = (Array.isArray(value) ? value : []) as string[]; return vals .map((v) => options.find((o) => o.value === v)) .filter(Boolean) as NormalizedOption[]; } return value ? (options.find((o) => o.value === (value as string)) ?? null) : null; }, [value, options, hasMany]); const handleValueChange = ( val: NormalizedOption[] | NormalizedOption | null, ) => { if (isReadOnly) return; if (hasMany && Array.isArray(val)) { if (field.maxSelected !== undefined && val.length > field.maxSelected) return; fieldApi.handleChange(val.map((o) => o.value)); } else { fieldApi.handleChange( ((val as NormalizedOption | null)?.value ?? undefined) as string, ); } }; return ( {label && ( {label} {isRequired && ui?.asterisk !== false && ( * )} )} typeof opt.label === "string" ? opt.label : opt.value } > {hasMany ? ( {(values: NormalizedOption[]) => ( {values.map((opt) => ( {opt.label} ))} )} ) : ( )} {ui?.labels?.empty ?? "No results found."} {(opt: NormalizedOption) => ( )} {description && !isInvalid && ( {description} )} {isInvalid && } ); } 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":"@buzzform","registryDependencies":["@buzzform/init","combobox","input-group","field"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/fields/select.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/fields/select.tsx"}],"className":"h-[70svh] min-h-80"}]]}]