{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Grows with its text between row limits, counts near the limit, sends on ⌘↵.", "categories": [ "inputs" ], "dependencies": [ "@base-ui/react", "@number-flow/react" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/textarea.tsx", "content": "\"use client\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport NumberFlow from \"@number-flow/react\";\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\nexport type TextareaProps = Omit, \"value\" | \"defaultValue\" | \"rows\"> & {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** Height when empty, in lines. */\n minRows?: number;\n /** Grows with the text up to this many lines, then scrolls. */\n maxRows?: number;\n /** A soft character limit: typing past it is allowed but marks the field invalid. Use maxLength for a hard stop. */\n limit?: number;\n /** How many characters before the limit the count appears. Defaults to 20% of the limit. */\n countFrom?: number;\n /** Called on Cmd+Enter (Ctrl+Enter off Mac) with the current text. */\n onModEnter?: (value: string) => void;\n /** Label for the shortcut hint shown while focused, e.g. \"to send\". Set to false to hide the hint. */\n modEnterHint?: string | false;\n /** Content for the left of the footer row, after the shortcut hint: a formatting note, an attach button. */\n footer?: React.ReactNode;\n /** Content for the right end of the footer row, after the count: usually the send button. */\n actions?: React.ReactNode;\n invalid?: boolean;\n /** Classes for the inner textarea; `className` styles the outer box. */\n textareaClassName?: string;\n};\n\n// Mac check that is stable through hydration: the server and the first client\n// render both say Mac, then the real answer arrives without a mismatch warning.\nconst subscribe = () => () => {};\nconst isMac = () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\nexport function useIsMac() {\n return useSyncExternalStore(subscribe, isMac, () => true);\n}\n\n/**\n * Sizes a textarea to its content between two line counts. It measures a hidden\n * twin instead of collapsing the real field to auto, so the page never jumps\n * and the height can transition. Returns refs for the field and the twin.\n */\nexport function useAutosize(value: string, { minRows = 2, maxRows = 8 } = {}) {\n const fieldRef = useRef(null);\n const twinRef = useRef(null);\n const [overflow, setOverflow] = useState(false);\n\n const measure = useCallback(() => {\n const el = fieldRef.current;\n const m = twinRef.current;\n if (!el || !m) return;\n const cs = getComputedStyle(el);\n const line = parseFloat(cs.lineHeight) || 20;\n const pad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n m.value = el.value || \" \";\n const content = m.scrollHeight - pad;\n const next = Math.min(Math.max(content, minRows * line), maxRows * line) + pad;\n el.style.height = `${next}px`;\n setOverflow(content > maxRows * line + 1);\n }, [minRows, maxRows]);\n\n useLayoutEffect(measure, [measure, value]);\n\n useEffect(() => {\n const el = fieldRef.current;\n if (!el) return;\n // Width changes rewrap the text, so the height has to follow.\n let w = el.offsetWidth;\n const ro = new ResizeObserver(() => {\n if (el.offsetWidth === w) return;\n w = el.offsetWidth;\n measure();\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, [measure]);\n\n return { fieldRef, twinRef, overflow };\n}\n\nexport function Textarea({\n value: valueProp,\n defaultValue = \"\",\n onValueChange,\n minRows = 2,\n maxRows = 8,\n limit,\n countFrom,\n onModEnter,\n modEnterHint = \"to send\",\n footer,\n actions,\n invalid,\n disabled,\n readOnly,\n className,\n textareaClassName,\n onKeyDown,\n ref,\n ...rest\n}: TextareaProps) {\n const [value, setValue] = useControllableState({ value: valueProp, defaultValue, onChange: onValueChange });\n const { fieldRef, twinRef, overflow } = useAutosize(value, { minRows, maxRows });\n const mac = useIsMac();\n const [fired, setFired] = useState(false);\n const firedTimer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(firedTimer.current), []);\n\n const setRef = useCallback(\n (node: HTMLTextAreaElement | null) => {\n fieldRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n },\n [ref, fieldRef],\n );\n\n const length = value.length;\n const threshold = limit != null ? (countFrom ?? Math.max(10, Math.round(limit * 0.2))) : 0;\n const showCount = limit != null && length >= limit - threshold;\n const over = limit != null && length > limit;\n const isInvalid = invalid || over;\n const showHint = !!onModEnter && modEnterHint !== false && !readOnly;\n const hasFooter = footer != null || actions != null || limit != null || showHint;\n\n // Announce crossings, not keystrokes: entering the last stretch, reaching the limit, going over.\n const remaining = limit != null ? limit - length : 0;\n const announcement =\n limit == null || !showCount ? \"\" : over ? \"Over the character limit\" : remaining === 0 ? \"Character limit reached\" : remaining <= 10 ? \"10 or fewer characters left\" : `${threshold} or fewer characters left`;\n\n return (\n {\n const t = e.target as HTMLElement;\n if (t.closest(\"textarea, button, a, input, [role=button]\") || disabled) return;\n e.preventDefault();\n fieldRef.current?.focus();\n }}\n >\n
\n {/* Base UI Input rendered as a textarea, so Field.Label, validation and Field.Error work as they do for Input. */}\n }\n value={value}\n onValueChange={(next) => setValue(next)}\n disabled={disabled}\n readOnly={readOnly}\n aria-invalid={isInvalid || undefined}\n data-overflow={overflow || undefined}\n className={cn(\n \"block w-full resize-none overflow-hidden bg-transparent px-2.5 py-2 text-base leading-6 outline-none sm:text-[13px] sm:leading-5\",\n \"placeholder:text-fg-4 disabled:cursor-not-allowed\",\n // Growth eases so a new line reads as the box making room, not a jolt.\n \"transition-[height] duration-100 ease-out motion-reduce:transition-none\",\n \"data-overflow:overflow-y-auto [scrollbar-width:thin]\",\n hasFooter && \"pb-1\",\n textareaClassName,\n )}\n render={\n {\n onKeyDown?.(e);\n if (e.defaultPrevented || !onModEnter) return;\n if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {\n e.preventDefault();\n onModEnter(e.currentTarget.value);\n setFired(true);\n window.clearTimeout(firedTimer.current);\n firedTimer.current = window.setTimeout(() => setFired(false), 160);\n }\n }}\n />\n }\n />\n {/* The twin: same box and type, never seen, used only for measuring. */}\n \n
\n\n {hasFooter && (\n
\n
\n {showHint && (\n \n \n {mac ? \"⌘\" : \"Ctrl\"}\n ↵\n \n {modEnterHint}\n \n )}\n {footer}\n
\n\n {limit != null && (\n \n \n /{limit}\n \n )}\n\n {actions}\n
\n )}\n\n \n {announcement}\n \n \n );\n}\n\nfunction Key({ pressed, children }: { pressed: boolean; children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/textarea" }