51: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"] 52: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"] 53:T1bcc,import * as React from 'react' import { cn } from '@/lib/utils' import { useMergedRefs } from '@/lib/merge-refs' /** Fraction of `limit` at which the counter turns advisory. */ const WARN_AT = 0.9 export type CounterTone = 'muted' | 'warning' | 'error' /** The tone `limit` characters produce at `length`. Exported so a caller * rendering its own count elsewhere (a grid tile, a table row) matches the * field rather than inventing a second set of thresholds. */ export function counterTone(length: number, limit: number): CounterTone { if (length > limit) return 'error' if (length >= Math.floor(limit * WARN_AT)) return 'warning' return 'muted' } /** Code points, so an emoji counts once instead of twice. Not grapheme * clusters: a flag or a skin-toned emoji still counts more than one. */ export const countCharacters = (value: string): number => Array.from(value).length const TONE_CLASS: Record = { muted: 'text-[var(--color-text-muted-light)] dark:text-[var(--color-text-muted-dark)]', warning: 'text-[var(--color-warning-700)] dark:text-[var(--color-warning-400)]', error: 'text-[var(--color-error-700)] dark:text-[var(--color-error-400)]', } export interface TextareaProps extends React.TextareaHTMLAttributes { /** * Rendered above the field as a real ``, with an `id` generated via * `useId` when none is passed. An explicit `id` or `aria-label` wins. */ label?: React.ReactNode /** * Advisory character target. Renders a `84 / 125` readout that shifts muted * → warning → error, and **never blocks typing**: `maxLength` stays unset on * purpose, because a hard stop mid-word produces worse text than an * overlong sentence, and the caller may have a good reason to exceed it. */ limit?: number /** * Translated sentence naming the limit, wired to the field through * `aria-describedby` (for example "Aim for 125 characters or fewer"). The * visible readout is `aria-hidden`, since announcing a new number on every * keystroke makes a field unusable with a screen reader, so this is the only * way the limit reaches assistive tech. Ignored without `limit`. */ limitDescription?: string /** * Grow with the content instead of scrolling, starting at `rows`. Off by * default: it is right for a field that owns its column and wrong inside a * fixed-height row, where a virtualised list needs every row the same * height. */ autoGrow?: boolean } /** * The multi-line field. `Input`'s shape and label behaviour, plus an optional * character readout and auto-grow. * * The counter's thresholds live here rather than in each app because they are * an accessibility decision: the state is carried by the number itself and by * `aria-describedby`, so it never rests on colour alone. * * ```tsx *

setDraft(e.target.value)}
 * />
 * ```
 */
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    {
      className,
      label,
      limit,
      limitDescription,
      autoGrow = false,
      id: idProp,
      rows = 3,
      onChange,
      'aria-describedby': describedByProp,
      ...props
    },
    ref,
  ) => {
    const autoId = React.useId()
    const id = idProp ?? (label !== undefined ? autoId : undefined)
    const describedById = `${autoId}-limit`

const innerRef = React.useRef<HTMLTextAreaElement>(null)
    const mergedRef = useMergedRefs(innerRef, ref)

// Controlled fields read their length from the prop; uncontrolled ones have
    // to be tracked, since there is nothing else to read between renders.
    const controlled = props.value !== undefined
    const [innerValue, setInnerValue] = React.useState(() => String(props.defaultValue ?? ''))
    const text = controlled ? String(props.value ?? '') : innerValue
    const length = limit === undefined ? 0 : countCharacters(text)
    const tone = limit === undefined ? 'muted' : counterTone(length, limit)

const resize = React.useCallback(() => {
      const el = innerRef.current
      if (!el || !autoGrow) return
      // Collapse first: scrollHeight never reports a height below the current
      // one, so measuring without this makes the field a ratchet.
      el.style.height = 'auto'
      el.style.height = `${el.scrollHeight}px`
    }, [autoGrow])

React.useLayoutEffect(() => {
      resize()
    }, [resize, text])

const handleChange = React.useCallback(
      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        if (!controlled) setInnerValue(event.target.value)
        onChange?.(event)
      },
      [controlled, onChange],
    )

const field = (
      <textarea
        id={id}
        ref={mergedRef}
        rows={rows}
        onChange={handleChange}
        aria-describedby={
          [describedByProp, limit !== undefined && limitDescription ? describedById : null]
            .filter(Boolean)
            .join(' ') || undefined
        }
        className={cn(
          // The field vocabulary Input and SearchField share: regular radius,
          // solid border, no fill of its own, deboss recess.
          'block w-full rounded-lg',
          'border border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]',
          'bg-transparent shadow-deboss',
          'px-3 py-2 text-sm',
          'text-[var(--color-text-primary-light)] dark:text-[var(--color-text-primary-dark)]',
          'placeholder:text-[var(--color-text-muted-light)] dark:placeholder:text-[var(--color-text-muted-dark)]',
          'wj-focus-ring transition-colors',
          'hover:border-[var(--color-warm-300)] dark:hover:border-[var(--color-neutral-700)]',
          'disabled:cursor-not-allowed disabled:opacity-50',
          'disabled:hover:border-[var(--color-border-light)] dark:disabled:hover:border-[var(--color-border-dark)]',
          autoGrow ? 'resize-none overflow-hidden' : 'resize-y',
          className,
        )}
        {...props}
      />
    )

if (label === undefined && limit === undefined) return field

return (
      <div className="flex flex-col gap-1">
        {label !== undefined && (
          <label
            htmlFor={id}
            className="block text-sm font-medium text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)]"
          >
            {label}
          </label>
        )}
        {field}
        {limit !== undefined && (
          <>
            <span
              aria-hidden="true"
              className={cn('self-end text-xs tabular-nums transition-colors', TONE_CLASS[tone])}
            >
              {length} / {limit}
            </span>
            {limitDescription && (
              <span id={describedById} className="sr-only">
                {limitDescription}
              </span>
            )}
          </>
        )}
      </div>
    )
  },
)
Textarea.displayName = 'Textarea'

export { Textarea }
50:["$","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,["$","$L51",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/textarea.tsx","content":"$53","type":"registry:ui","target":"components/ui/textarea.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>