"use client"; import { Field as FieldPrimitive } from "@base-ui/react/field"; import type React from "react"; function Field({ className, ...props }: FieldPrimitive.Root.Props): React.ReactElement { return ( ); } function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props): React.ReactElement { return ( ); } function FieldItem({ className, ...props }: FieldPrimitive.Item.Props): React.ReactElement { return ( ); } function FieldDescription({ className, ...props }: FieldPrimitive.Description.Props): React.ReactElement { return ( ); } function FieldError({ className, ...props }: FieldPrimitive.Error.Props): React.ReactElement { return ( ); } const FieldControl: typeof FieldPrimitive.Control = FieldPrimitive.Control; const FieldValidity: typeof FieldPrimitive.Validity = FieldPrimitive.Validity; import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)); } import { useCallback, useRef, useState } from "react"; import { Textarea } from "@/registry/default/ui/textarea"; const MAX_CHARS = 280; export function Pattern() { const [value, setValue] = useState(""); const textareaRef = useRef(null); const handleChange = useCallback( (e: React.ChangeEvent) => { const newValue = e.target.value; if (newValue.length <= MAX_CHARS) { setValue(newValue); } const textarea = textareaRef.current; if (textarea) { textarea.style.height = "auto"; textarea.style.height = `${textarea.scrollHeight}px`; } }, [], ); const remaining = MAX_CHARS - value.length; const isNearLimit = remaining <= 20; const isAtLimit = remaining === 0; return (

Bio {value.length}/{MAX_CHARS}