4d: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"] 4e: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"] 4f:T1d20,"use client"; import * as React from "react"; import type { CollapsibleField as CollapsibleFieldDef } from "@buildnbuzz/form-react"; import { useLayoutField, useNestedErrorCount } from "@buildnbuzz/form-react"; import { resolveExpr, toDotNotation } 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 { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // UI options // --------------------------------------------------------------------------- interface CollapsibleUi { /** Visual variant. Defaults to `"bordered"`. */ variant?: "card" | "bordered" | "ghost"; /** Vertical spacing between nested fields. Defaults to `"md"`. */ spacing?: "sm" | "md" | "lg"; /** Show an error-count badge next to the trigger label. Defaults to `true`. */ showErrorBadge?: boolean; /** Description rendered below the trigger label when expanded. */ description?: string; /** Icon rendered before the trigger label. */ icon?: React.ReactNode; } // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- const spacingClass: Record, string> = { sm: "space-y-3", md: "space-y-4", lg: "space-y-6", }; // --------------------------------------------------------------------------- // Shared sub-components // --------------------------------------------------------------------------- function TriggerChevron({ open }: { open: boolean }) { return ( ); } function TriggerLabel({ label, icon, errorCount, showErrorBadge, bold, }: { label: React.ReactNode; icon?: React.ReactNode; errorCount: number; showErrorBadge: boolean; bold?: boolean; }) { return (

{icon && ( {icon} )} {label} {showErrorBadge && errorCount > 0 && ( {errorCount} )}

); } // --------------------------------------------------------------------------- // CollapsibleField // --------------------------------------------------------------------------- export function CollapsibleField({ children }: { children?: React.ReactNode }) { const { field, fieldPath, formData, contextData, label } = useLayoutField(); const ui = field.ui as CollapsibleUi | undefined; const variant = ui?.variant ?? "bordered"; const spacing = ui?.spacing ?? "md"; const showErrorBadge = ui?.showErrorBadge !== false; const description = ui?.description; const icon = ui?.icon; const resolvedCollapsed = resolveExpr( field.collapsed, { data: formData, context: contextData }, ); const [isOpen, setIsOpen] = React.useState(resolvedCollapsed !== true); // Read current error count from the store snapshot (re-renders when form state changes) const errorCount = useNestedErrorCount(field.fields, toDotNotation(fieldPath)); const triggerLabelProps = { label: label || "Toggle", icon, errorCount, showErrorBadge, }; const descriptionNode = description ? (

{description}

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

{descriptionNode} {children}

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

{descriptionNode} {children}

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