Textarea

import { Field } from '@/components/ui/field'
import { Textarea } from '@/components/ui/input'
import { DemoColumn, DemoStage } from './_kit'

export default function TextareaDemo() {
  return (
    <DemoStage>
      <DemoColumn width="lg">
        <Field
          name="summary"
          label="Release summary"
          hint="Appears at the top of the changelog entry. Markdown is supported."
          required
        >
          {(field) => (
            <Textarea
              {...field}
              rows={4}
              placeholder="What changed, and who it matters to…"
              defaultValue="Adds density as a first-class theme axis. Every control height now resolves from a token, so compact admin surfaces and relaxed marketing pages share one component set."
            />
          )}
        </Field>

        <Field name="notes" label="Internal notes" error="Notes must be at least 20 characters.">
          {(field) => <Textarea {...field} rows={3} defaultValue="Too short" />}
        </Field>

        <Field name="archive" label="Archived description">
          {(field) => (
            <Textarea
              {...field}
              rows={3}
              disabled
              defaultValue="Locked while the release is published."
            />
          )}
        </Field>
      </DemoColumn>
    </DemoStage>
  )
}

import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react'
import { cn } from '@/lib/cn'

/**
 * Input / Textarea
 *
 * Shared control chrome lives in `controlSurface` so every text-entry control
 * in the library — including the combobox and OTP field — sits on exactly the
 * same border, radius, height and invalid treatment.
 */
export const controlSurface = cn(
  'w-full min-w-0 bg-surface text-ink placeholder:text-ink-subtle',
  'border border-line rounded-md',
  'transition-[border-color,background-color] duration-150 ease-standard',
  'hover:border-line-strong',
  'disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-ink-subtle disabled:hover:border-line',
  'aria-[invalid=true]:border-danger aria-[invalid=true]:bg-danger-soft',
  'read-only:bg-surface-sunken',
)

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  inputSize?: 'sm' | 'md' | 'lg'
  /** Icon or text rendered inside the control on the leading edge. */
  leading?: ReactNode
  trailing?: ReactNode
}

const heights = {
  sm: 'h-control-sm text-xs',
  md: 'h-control text-sm',
  lg: 'h-control-lg text-base',
} as const

export function Input({ inputSize = 'md', leading, trailing, className, ...props }: InputProps) {
  const paddingX = inputSize === 'lg' ? 'px-3.5' : 'px-3'

  if (!leading && !trailing) {
    return (
      <input className={cn(controlSurface, heights[inputSize], paddingX, className)} {...props} />
    )
  }

  return (
    <div
      className={cn(
        'relative flex items-center',
        // The wrapper carries no border; the input keeps it so focus-visible
        // still lands on the real control.
      )}
    >
      {leading ? (
        <span
          className="pointer-events-none absolute left-3 flex items-center text-ink-subtle"
          aria-hidden="true"
        >
          {leading}
        </span>
      ) : null}
      <input
        className={cn(
          controlSurface,
          heights[inputSize],
          paddingX,
          leading && 'pl-9',
          trailing && 'pr-9',
          className,
        )}
        {...props}
      />
      {trailing ? (
        <span className="absolute right-2.5 flex items-center text-ink-subtle">{trailing}</span>
      ) : null}
    </div>
  )
}

export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  /** Grows with content up to this many rows before scrolling. */
  rows?: number
}

export function Textarea({ rows = 4, className, ...props }: TextareaProps) {
  return (
    <textarea
      rows={rows}
      className={cn(controlSurface, 'resize-y px-3 py-2 text-sm leading-normal', className)}
      {...props}
    />
  )
}