50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T25b6,"use client"; import { forwardRef, useRef, useState } from "react"; import type { ChangeEvent, ComponentPropsWithoutRef, HTMLInputAutoCompleteAttribute } from "react"; import { cn } from "../../utils"; import { useField } from "../../internals/field"; import { mergeIds } from "../../internals/merge-ids"; import { useFancyId } from "../../internals/use-id"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import "./textarea.css"; export interface TextareaOwnProps { /** * Current value. Controlled when supplied: pair it with `onValueChange`, * the React counterpart of the Svelte source's `bind:value`. */ value?: string; /** Initial value when uncontrolled (no `value` prop given). */ defaultValue?: string; /** Called with the new value on every input event. */ onValueChange?: (value: string) => void; /** Shown while the field is empty. */ placeholder?: string; /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */ disabled?: boolean; /** Blocks typing but stays focusable and is still submitted, unlike `disabled`. */ readonly?: boolean; /** Native `required`. Overridden by a surrounding FormField. */ required?: boolean; /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */ invalid?: boolean; /** Element id. Overridden by a surrounding FormField's own `controlId`. */ id?: string; /** Native `name`, read on form submission. */ name?: string; /** Native `autocomplete` hint — the real token set the DOM accepts, not a bare string. */ autocomplete?: HTMLInputAutoCompleteAttribute; /** Accessible name — for a control with no visible Label next to it. */ label?: string; /** Visible height in text rows before anything grows it. Also the no-JS fallback height. */ rows?: number; /** Native character ceiling; also the counter's denominator. */ maxlength?: number; /** Renders the live "n / max" counter under the field. */ showCount?: boolean; /** Grows to fit content instead of scrolling; disables manual resize. */ autoResize?: boolean; /** Additional CSS classes — applied to the `

` itself, not the wrapper. */
	className?: string;
}

/**
 * Own props plus every native `<textarea>` attribute and listener; the rest are
 * spread onto the inner `<textarea>` (see the component README for the rules).
 */
export interface TextareaProps
	extends Omit<ComponentPropsWithoutRef<"textarea">, keyof TextareaOwnProps>, TextareaOwnProps {}

/**
 * A styled native `<textarea>` with full FormField integration, an optional
 * character counter and an optional grow-to-fit mode.
 *
 * The element reference arrives through the ref channel (the Svelte source
 * declares `ref = $bindable(null)`), pointing at the native `<textarea>`.
 */
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
	(
		{
			value: valueProp,
			defaultValue = "",
			onValueChange,
			placeholder,
			disabled = false,
			readonly = false,
			required = false,
			invalid = false,
			id,
			name,
			autocomplete,
			label,
			rows = 3,
			maxlength,
			showCount = false,
			autoResize = false,
			className,
			autoComplete: autoCompleteAttr,
			maxLength: maxLengthAttr,
			onChange,
			"aria-describedby": consumerDescribedBy,
			"aria-label": consumerAriaLabel,
			"aria-invalid": consumerAriaInvalid,
			readOnly: readOnlyAttr,
			...rest
		},
		forwardedRef
	) => {
		// The Svelte side's `value = $bindable("")` becomes the standard
		// controlled/uncontrolled split: uncontrolled by default, controlled
		// the moment a `value` prop is passed.
		const isControlled = valueProp !== undefined;
		const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
		const value = isControlled ? valueProp : uncontrolledValue;

// Undefined outside a FormField — every fallback below then uses this
		// component's own props instead of the context, so the control works
		// standalone exactly as it does wrapped.
		const field = useField();

const effectiveId = field?.controlId ?? id;
		const effectiveDisabled = field?.disabled ?? disabled;
		const effectiveRequired = field?.required ?? required;
		const effectiveInvalid = field?.invalid ?? invalid;

const reactId = useFancyId();
		const countId = `${reactId}-count`;
		const count = value.length;
		const effectiveMax = maxlength ?? maxLengthAttr;
		const atLimit = effectiveMax != null && count >= effectiveMax;

// The count rides along on aria-describedby instead of an aria-live
		// region. A screen reader announces a field's description once, when
		// focus lands on it — wiring the counter into the description reports
		// the current count on focus without re-announcing it on every keystroke
		// the way a polite live region would while the user is still typing. The
		// visible counter span below *is* the description target, so there is no
		// separate hidden node to keep in sync with it.
		const describedBy = mergeIds(
			field?.describedBy,
			consumerDescribedBy,
			showCount ? countId : undefined
		);

const classes = cn(
			"ft-textarea w-full rounded-[8px] border border-input bg-background px-[12px] py-[10px] text-[13px] leading-[1.5] text-foreground transition-colors",
			"placeholder:text-muted-foreground",
			"focus-visible:outline-none",
			"disabled:cursor-not-allowed disabled:opacity-50",
			autoResize ? "resize-none overflow-hidden" : "resize-y",
			effectiveInvalid && "border-destructive/50",
			className
		);

const innerRef = useRef<HTMLTextAreaElement | null>(null);
		const composedRef = useComposedRefs(forwardedRef, innerRef);

// Measured once from the mounted element: line-height/padding/border
		// don't change under this component's feet, so re-reading them on every
		// keystroke would force a layout for an answer already known.
		const metricsRef = useRef<{ line: number; extra: number } | null>(null);

function px(input: string): number {
			const parsed = Number.parseFloat(input);
			return Number.isFinite(parsed) ? parsed : 0;
		}

/**
		 * Fits the box to its content, floored at `rows`.
		 *
		 * `height: auto` first, otherwise `scrollHeight` reports the box already
		 * set rather than the text inside it, and the element could only ever
		 * grow. Measures and writes within the same call, and only ever touches
		 * `el.style` — never React state — so this can never re-trigger the
		 * effect that calls it below.
		 */
		function grow() {
			const el = innerRef.current;
			if (!el) return;
			const { line, extra } = measure(el);
			el.style.height = "auto";
			const min = rows * line + extra;
			el.style.height = `${Math.max(el.scrollHeight, min)}px`;
		}

function handleInput(event: ChangeEvent<HTMLTextAreaElement>) {
			if (effectiveDisabled) return;
			const next = event.currentTarget.value;
			if (!isControlled) setUncontrolledValue(next);
			onValueChange?.(next);
			if (autoResize) grow();
			onChange?.(event);
		}

// Growth also has to answer to writes that never pass through
		// `handleInput` — a controlled value assigned from outside, or a
		// restored draft. Reads `value`, writes only `el.style.height`, so it
		// can never wake itself. Layout phase, so the height lands before the
		// user's first painted frame.
		useIsomorphicLayoutEffect(() => {
			if (!autoResize) return;
			grow();
			// grow() reads `rows` and the rendered `value`; both belong in the deps.
			// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [autoResize, value, rows]);

return (
			<div className="ft-textarea-wrapper flex w-full flex-col gap-1.5">
				<textarea
					{...rest}
					ref={composedRef}
					id={effectiveId}
					placeholder={placeholder}
					name={name}
					autoComplete={autocomplete ?? autoCompleteAttr}
					rows={rows}
					maxLength={effectiveMax}
					disabled={effectiveDisabled}
					readOnly={readonly || readOnlyAttr}
					required={effectiveRequired}
					aria-invalid={effectiveInvalid ? "true" : consumerAriaInvalid}
					aria-describedby={describedBy}
					aria-label={label ?? consumerAriaLabel}
					className={classes}
					value={value}
					onChange={handleInput}
				>

{showCount && ( {count} {effectiveMax != null ? ` / ${effectiveMax}` : ""} )} ); } ); Textarea.displayName = "Textarea"; 4f:["$","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,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/textarea/Textarea.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/textarea/Textarea.tsx"},{"path":"react/src/components/textarea/index.ts","content":"\"use client\";\n\nexport { Textarea } from \"./Textarea\";\nexport type { TextareaProps } from \"./Textarea\";\n","type":"registry:ui","target":"@ui/fancy/components/textarea/index.ts"},{"path":"react/src/components/textarea/textarea.css","content":"/*\n * The brand accent has no semantic token, so it is declared locally with a\n * light-dark() fallback — the same shape Toggle, Button and Input use for\n * their own accent ring.\n */\n.ft-textarea:focus-visible {\n\t--ft-textarea-accent: var(\n\t\t--ft-accent,\n\t\tlight-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))\n\t);\n\tborder-color: var(--ft-textarea-accent);\n\tbox-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-textarea-accent) 25%, transparent);\n}\n\n/* Reaching the character limit needs a cue that survives without colour:\n weight carries it here, so a colour-blind or monochrome-display reader\n still sees the counter's state change, not just its digits. */\n.ft-textarea-count[data-limit-reached=\"true\"] {\n\tfont-weight: 600;\n}\n","type":"registry:ui","target":"@ui/fancy/components/textarea/textarea.css"}],"className":"h-[70svh] min-h-80"}]]}]