4b: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"] 4c: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"] 4d:T239d,"use client"; import * as React from "react"; import type { GroupField as GroupFieldDef } from "@buildnbuzz/form-react"; import { useDataField, useNestedErrorCount } from "@buildnbuzz/form-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Field, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSet, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // UI options // --------------------------------------------------------------------------- interface GroupUi { /** Visual variant. Defaults to `"card"`. */ variant?: "card" | "bordered" | "ghost" | "flat"; /** Vertical spacing between nested fields. Defaults to `"md"`. */ spacing?: "sm" | "md" | "lg"; /** Start collapsed (card and bordered variants only). Defaults to `false`. */ collapsed?: boolean; /** Show an error-count badge next to the label. Defaults to `true`. */ showErrorBadge?: boolean; /** Description rendered below the label. */ description?: string; /** Controls required asterisk visibility. */ asterisk?: boolean; } // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- const spacingClass: Record, string> = { sm: "space-y-3", md: "space-y-4", lg: "space-y-6", }; function TriggerChevron({ open }: { open: boolean }) { return ( ); } // --------------------------------------------------------------------------- // GroupField // --------------------------------------------------------------------------- export function GroupField({ children }: { children?: React.ReactNode }) { const { fieldApi, field, isDisabled, isRequired, label, description: resolvedDescription, errors, isInvalid, descriptionId, errorId, } = useDataField(); const ui = field.ui as GroupUi | undefined; const variant = ui?.variant ?? "card"; const spacing = ui?.spacing ?? "md"; const showErrorBadge = ui?.showErrorBadge !== false; const description = ui?.description ?? resolvedDescription; const [isOpen, setIsOpen] = React.useState(!(ui?.collapsed ?? false)); // Error count scoped to this group's nested fields const errorCount = useNestedErrorCount(field.fields, fieldApi.name); // Inline label+badge used inside trigger buttons (phrasing content only) const triggerLabelContent = label ? ( <> {label} {showErrorBadge && errorCount > 0 && ( {errorCount} )} ) : null; const descriptionNode = description ? ( {description} ) : null; const errorNode = isInvalid ? ( ) : null; // ── FLAT ─────────────────────────────────────────────────────────────────── if (variant === "flat") { return (

{label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} {showErrorBadge && errorCount > 0 && ( {errorCount} )} )} {descriptionNode} {errorNode} {children}

); } // ── GHOST ────────────────────────────────────────────────────────────────── if (variant === "ghost") { return (

{label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} {showErrorBadge && errorCount > 0 && ( {errorCount} )} )} {descriptionNode} {errorNode}

{children}

); } // ── BORDERED ─────────────────────────────────────────────────────────────── if (variant === "bordered") { return (

{label && ( {triggerLabelContent} )}

{descriptionNode} {errorNode} {children}

); } // ── CARD (default) ───────────────────────────────────────────────────────── return ( {label && ( {triggerLabelContent} )} {descriptionNode} {errorNode} {children} ); } 4a:["$","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,["$","$L4b",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","card","collapsible","badge"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/fields/group.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/fields/group.tsx"}],"className":"h-[70svh] min-h-80"}]]}]