Textarea

export const Default = () => {
  const [v, setV] = useState('');
  return (
    <div style={{ width: 360 }}>
      <Textarea
        value={v}
        onChange={(e) => setV(e.target.value)}
        placeholder="What was agreed on the call"
        rows={3}
      />
    </div>
  );
};

export const Sizes = () => (
  <div style={row}>
    <Labeled label="rows=3 (min-height 72px)">
      <Textarea rows={3} placeholder="Short note" />
    </Labeled>
    <Labeled label="rows=6">
      <Textarea rows={6} placeholder="Longer description" />
    </Labeled>
  </div>
);

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="placeholder">
        <Textarea rows={3} placeholder="Describe the segment" />
      </Labeled>
      <Labeled label="filled">
        <Textarea
          rows={3}
          defaultValue="Follow up after the demo: send the price list and book a second call with the CFO."
        />
      </Labeled>
      <Labeled label="disabled (native)">
        <Textarea rows={3} defaultValue="Locked after approval." disabled />
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: border turns --accent with a 3px translucent ring (16 %) — same as the input box.
    </span>
  </div>
);

export const Composition = () => (
  <div style={{ width: 360 }}>
    <Field label="Description" hint="Short description — what it is for and whom it contains.">
      <Textarea rows={3} placeholder="E.g. Prague-based decision makers, 30–45" />
    </Field>
  </div>
);