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:T10dc,"use client"; import { useRef, useEffect } from "react"; import type { TextareaField as TextareaFieldDef } from "@buildnbuzz/form-react"; import { useDataField } from "@buildnbuzz/form-react"; import { Textarea } from "@/components/ui/textarea"; import { CopyButton } from "../components/copy-button"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; interface TextareaUi { autoResize?: boolean; rows?: number; copyable?: boolean; autoFocus?: boolean; className?: string; width?: string | number; asterisk?: boolean; } export function TextareaField() { const { fieldApi, field, isDisabled, isReadOnly, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleChange, handleBlur, } = useDataField(); const textareaRef = useRef(null); const value = (fieldApi.state.value as string) ?? ""; const ui = field.ui as TextareaUi | undefined; const width = ui?.width; const widthStyle = width ? { width: typeof width === "number" ? `${width}px` : width, flex: "0 1 auto", } : undefined; // Character count logic const showCharCount = field.maxLength !== undefined; const charCount = typeof value === "string" ? value.length : 0; const isOverLimit = showCharCount && charCount > field.maxLength!; // Auto-resize logic useEffect(() => { const textarea = textareaRef.current; if (textarea && ui?.autoResize) { textarea.style.height = "auto"; textarea.style.height = `${textarea.scrollHeight}px`; } }, [value, ui?.autoResize]); return ( {label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} )}

handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder={placeholder}
              disabled={isDisabled}
              readOnly={isReadOnly}
              aria-invalid={isInvalid || isOverLimit}
              aria-describedby={ariaDescribedBy}
              minLength={field.minLength}
              maxLength={field.maxLength}
              required={isRequired}
              rows={ui?.rows ?? 3}
              className={cn(ui?.copyable && "pr-9")}
              style={
                ui?.autoResize
                  ? { resize: "none", overflow: "hidden" }
                  : ({
                      resize: "none",
                      fieldSizing: "fixed",
                    } as React.CSSProperties)
              }
            />
            {ui?.copyable && (
              <CopyButton
                value={value}
                disabled={isDisabled}
                className="absolute right-0 top-0 h-9 px-2.5 text-muted-foreground hover:text-foreground"
              />
            )}
          </div>

{/* Character count */}
          {showCharCount && (
            <div
              className={cn(
                "text-xs mt-1.5 text-right",
                isOverLimit ? "text-destructive" : "text-muted-foreground",
              )}
            >
              {charCount} / {field.maxLength}
            </div>
          )}
        </FieldContent>

{description && !isInvalid && (
          <FieldDescription id={descriptionId}>{description}</FieldDescription>
        )}

{isInvalid && <FieldError id={errorId} errors={errors} />}
      </Field>
    </FieldGroup>
  );
}
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","textarea","field","@buzzform/copy"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/fields/textarea.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/fields/textarea.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>