Textarea

---
import Textarea from "../Textarea.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea feedback="neutral" placeholder="Neutral" />
  <Textarea feedback="primary" placeholder="Primary" />
  <Textarea feedback="success" placeholder="Success" />
  <Textarea feedback="danger" placeholder="Danger" />
  <Textarea feedback="warning" placeholder="Warning" />
</div>

import { Textarea } from "../Textarea";
import { stack } from "@pindoba/styled-system/patterns";

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Textarea feedback="neutral" placeholder="Neutral" />
      <Textarea feedback="primary" placeholder="Primary" />
      <Textarea feedback="success" placeholder="Success" />
      <Textarea feedback="danger" placeholder="Danger" />
      <Textarea feedback="warning" placeholder="Warning" />
    </div>
  );
}

<script lang="ts">
  import Textarea from "../Textarea.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea feedback="neutral" placeholder="Neutral" />
  <Textarea feedback="primary" placeholder="Primary" />
  <Textarea feedback="success" placeholder="Success" />
  <Textarea feedback="danger" placeholder="Danger" />
  <Textarea feedback="warning" placeholder="Warning" />
</div>

<script setup lang="ts">
import { Textarea } from "@pindoba/vue-textarea";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <Textarea feedback="neutral" placeholder="Neutral" />
    <Textarea feedback="primary" placeholder="Primary" />
    <Textarea feedback="success" placeholder="Success" />
    <Textarea feedback="danger" placeholder="Danger" />
    <Textarea feedback="warning" placeholder="Warning" />
  </div>
</template>

---
import Textarea from "../Textarea.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea size="xs" placeholder="Extra Small" />
  <Textarea size="sm" placeholder="Small" />
  <Textarea size="md" placeholder="Medium" />
  <Textarea size="lg" placeholder="Large" />
</div>

import { Textarea } from "../Textarea";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Textarea size="xs" placeholder="Extra Small" />
      <Textarea size="sm" placeholder="Small" />
      <Textarea size="md" placeholder="Medium" />
      <Textarea size="lg" placeholder="Large" />
    </div>
  );
}

<script lang="ts">
  import Textarea from "../Textarea.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea size="xs" placeholder="Extra Small" />
  <Textarea size="sm" placeholder="Small" />
  <Textarea size="md" placeholder="Medium" />
  <Textarea size="lg" placeholder="Large" />
</div>

<script setup lang="ts">
import { Textarea } from "@pindoba/vue-textarea";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <Textarea size="xs" placeholder="Extra Small" />
    <Textarea size="sm" placeholder="Small" />
    <Textarea size="md" placeholder="Medium" />
    <Textarea size="lg" placeholder="Large" />
  </div>
</template>

---
import TextareaRoot from "../TextareaRoot.astro";
import TextareaField from "../TextareaField.astro";
import Affix from "@pindoba/astro-affix";
import Stamp from "@pindoba/astro-stamp";
import { MessageSquare, Search, Paperclip } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
---

<div class={stack({ gap: "md", direction: "column" })}>
  {
    sizes.map((size) => (
      <TextareaRoot size={size}>
        <Affix>
          <Stamp emphasis="ghost" border="muted">
            <MessageSquare />
          </Stamp>
        </Affix>
        <TextareaField placeholder={`Message (${size})`} />
        <Affix side="end">
          <Stamp emphasis="ghost" border="muted">
            <Paperclip />
          </Stamp>
        </Affix>
      </TextareaRoot>
    ))
  }
  {
    sizes.map((size) => (
      <TextareaRoot size={size}>
        <Affix>
          <Stamp emphasis="ghost" border="muted">
            <Search />
          </Stamp>
        </Affix>
        <TextareaField placeholder={`Search (${size})`} />
      </TextareaRoot>
    ))
  }
</div>

import { TextareaRoot } from "../TextareaRoot";
import { TextareaField } from "../TextareaField";
import { Affix } from "@pindoba/react-affix";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const MessageSquareIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>
);

const PaperclipIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />
  </svg>
);

const sizes = ["xs", "sm", "md", "lg"] as const;

export default function LeadingTrailingSizesDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      {sizes.map((size) => (
        <TextareaRoot key={`message-${size}`} size={size}>
          <Affix fit="row">
            <Stamp emphasis="ghost" border="muted">
              <MessageSquareIcon />
            </Stamp>
          </Affix>
          <TextareaField placeholder={`Message (${size})`} rows={3} />
          <Affix side="end" fit="row">
            <Stamp emphasis="ghost" border="muted">
              <PaperclipIcon />
            </Stamp>
          </Affix>
        </TextareaRoot>
      ))}
    </div>
  );
}

<script lang="ts">
  import TextareaRoot from "../textarea-root.svelte";
  import TextareaField from "../textarea-field.svelte";
  import Affix from "@pindoba/svelte-affix";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideMessageSquare from "@lucide/svelte/icons/message-square";
  import LucidePaperclip from "@lucide/svelte/icons/paperclip";
  import { stack } from "@pindoba/styled-system/patterns";

  const sizes = ["xs", "sm", "md", "lg"] as const;
</script>

<!--
  Corner affixes are for compact controls — a leading icon, a trailing
  icon-button. Wide content (a character counter, a hint) belongs below the
  field so it never overlaps wrapped text; see the "Character count" demo.
-->
<div class={stack({ gap: "md", direction: "column" })}>
  {#each sizes as size (size)}
    <TextareaRoot {size}>
      <Affix>
        <Stamp emphasis="ghost" border="muted">
          <LucideMessageSquare />
        </Stamp>
      </Affix>
      <TextareaField rows={3} placeholder={`Message (${size})`} />
      <Affix side="end">
        <Stamp emphasis="ghost" border="muted">
          <LucidePaperclip />
        </Stamp>
      </Affix>
    </TextareaRoot>
  {/each}
</div>

<script setup lang="ts">
import { TextareaRoot, TextareaField } from "@pindoba/vue-textarea";
import { Affix } from "@pindoba/vue-affix";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { MessageSquare, Paperclip } from "./_icons";
const col = stack({ gap: "md", direction: "column" });
const sizes = ["xs", "sm", "md", "lg"] as const;
// Affixes top-align to the first row of the multi-line field.
const top = { root: { style: { alignSelf: "flex-start" } } } as const;
</script>

<template>
  <div :class="col">
    <TextareaRoot v-for="size in sizes" :key="`msg-${size}`" :size="size">
      <Affix :passThrough="top"
        ><Stamp emphasis="ghost" border="muted"><MessageSquare /></Stamp
      ></Affix>
      <TextareaField :rows="3" :placeholder="`Message (${size})`" />
      <Affix side="end" :passThrough="top"
        ><Stamp emphasis="ghost" border="muted"><Paperclip /></Stamp
      ></Affix>
    </TextareaRoot>
  </div>
</template>

---
import Textarea from "../Textarea.astro";
import Attachment from "@pindoba/astro-attachment";
import { css } from "@pindoba/styled-system/css";

// The counter floats below the field via the Attachment component. Astro
// renders statically, so the count is illustrative — the Svelte / React / Vue
// tabs update it live.
const MAX = 280;

const field = {
  root: { style: { display: "block", width: "20rem", maxWidth: "100%" } },
};

const counter = css({
  fontSize: "xs",
  fontVariantNumeric: "tabular-nums",
  color: "neutral.text.muted",
  background: "neutral.surface.hill",
  borderRadius: "sm",
  paddingInline: "2xs",
  paddingBlock: "3xs",
});
---

<Attachment placement="bottom-end" anchor="outside" passThrough={field}>
  <Textarea rows={4} fullWidth maxlength={MAX} placeholder="Write a message…" />
  <span slot="content" class={counter}>0 / {MAX}</span>
</Attachment>

import { useState } from "react";
import { Textarea } from "../Textarea";
import { Attachment } from "@pindoba/react-attachment";
import { css } from "@pindoba/styled-system/css";

const MAX = 280;

// Make the attachment wrap the field as a block so the counter anchors to the
// full-width bottom edge (the attachment root is inline-flex by default).
const field = {
  root: { style: { display: "block", width: "20rem", maxWidth: "100%" } },
};

const counter = (over: boolean) =>
  css({
    fontSize: "xs",
    fontVariantNumeric: "tabular-nums",
    color: over ? "danger.text" : "neutral.text.muted",
    background: "neutral.surface.hill",
    borderRadius: "sm",
    paddingInline: "2xs",
    paddingBlock: "3xs",
  });

/**
 * A character counter reads best pinned just below the field. The Attachment
 * component floats it at the bottom-right, outside the frame, so it never
 * overlaps the text or the resize grabber — no extra Textarea API needed.
 */
export default function CharacterCountDemo() {
  const [value, setValue] = useState("");
  return (
    <Attachment
      placement="bottom-end"
      anchor="outside"
      passThrough={field}
      content={
        <span className={counter(value.length >= MAX)}>
          {value.length} / {MAX}
        </span>
      }
    >
      <Textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={4}
        fullWidth
        maxLength={MAX}
        placeholder="Write a message…"
      />
    </Attachment>
  );
}

<script lang="ts">
  import Textarea from "../Textarea.svelte";
  import Attachment from "@pindoba/svelte-attachment";
  import { css } from "@pindoba/styled-system/css";

  const MAX = 280;
  let value = $state("");

  // Make the attachment wrap the field as a block so the counter anchors to the
  // full-width bottom edge (the attachment root is inline-flex by default).
  const field = {
    root: { style: { display: "block", width: "20rem", maxWidth: "100%" } },
  } as const;

  const counter = (over: boolean) =>
    css({
      fontSize: "xs",
      fontVariantNumeric: "tabular-nums",
      color: over ? "danger.text" : "neutral.text.muted",
      background: "neutral.surface.hill",
      borderRadius: "sm",
      paddingInline: "2xs",
      paddingBlock: "3xs",
    });
</script>

<!--
  A character counter reads best pinned just below the field. The Attachment
  component floats it at the bottom-right, outside the frame, so it never
  overlaps the text or the resize grabber — no extra Textarea API needed.
-->
<Attachment placement="bottom-end" anchor="outside" passThrough={field}>
  <Textarea
    bind:value
    rows={4}
    fullWidth
    maxlength={MAX}
    placeholder="Write a message…"
  />
  {#snippet content()}
    <span class={counter(value.length >= MAX)}>{value.length} / {MAX}</span>
  {/snippet}
</Attachment>

<script setup lang="ts">
import { ref } from "vue";
import { Textarea } from "@pindoba/vue-textarea";
import { Attachment } from "@pindoba/vue-attachment";
import { css } from "@pindoba/styled-system/css";

const MAX = 280;
const value = ref("");

// Make the attachment wrap the field as a block so the counter anchors to the
// full-width bottom edge (the attachment root is inline-flex by default).
const field = {
  root: { style: { display: "block", width: "20rem", maxWidth: "100%" } },
} as const;

const counter = (over: boolean) =>
  css({
    fontSize: "xs",
    fontVariantNumeric: "tabular-nums",
    color: over ? "danger.text" : "neutral.text.muted",
    background: "neutral.surface.hill",
    borderRadius: "sm",
    paddingInline: "2xs",
    paddingBlock: "3xs",
  });
</script>

<!--
  A character counter reads best pinned just below the field. The Attachment
  component floats it at the bottom-right, outside the frame, so it never
  overlaps the text or the resize grabber — no extra Textarea API needed.
-->
<template>
  <Attachment placement="bottom-end" anchor="outside" :passThrough="field">
    <Textarea
      :value="value"
      :rows="4"
      :maxlength="MAX"
      fullWidth
      placeholder="Write a message…"
      @input="value = ($event.target as HTMLTextAreaElement).value"
    />
    <template #content>
      <span :class="counter(value.length >= MAX)">
        {{ value.length }} / {{ MAX }}
      </span>
    </template>
  </Attachment>
</template>

---
import Textarea from "../Textarea.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea
    autoResize
    resize="none"
    rows={2}
    placeholder="Type multiple lines…"
    fullWidth
  />
</div>

import { Textarea } from "../Textarea";
import { stack } from "@pindoba/styled-system/patterns";

export default function AutoResizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Textarea
        autoResize
        resize="none"
        rows={2}
        placeholder="Type multiple lines…"
        fullWidth
      />
    </div>
  );
}

<script lang="ts">
  import Textarea from "../Textarea.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Textarea
    autoResize
    resize="none"
    rows={2}
    placeholder="Type multiple lines…"
    fullWidth
  />
</div>

<script setup lang="ts">
import { Textarea } from "@pindoba/vue-textarea";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <Textarea
      :autoResize="true"
      resize="none"
      :rows="2"
      placeholder="Type multiple lines…"
      fullWidth
    />
  </div>
</template>

---
import Textarea from "../Textarea.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Textarea
      placeholder="Custom root style"
      passThrough={{
        root: { style: { borderRadius: "full" } },
        textarea: { style: { fontStyle: "italic" } },
      }}
    />
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Textarea
      placeholder="Message..."
      passThrough={{
        textarea: {
          props: {
            "aria-label": "Message textarea",
            "data-testid": "message-textarea",
          },
        },
      }}
    />
  </div>
</div>

import { Textarea } from "../Textarea";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom style via passThrough</h3>
        <Textarea
          placeholder="Custom root style"
          passThrough={{
            root: { style: { borderRadius: "full" } },
            textarea: { style: { fontStyle: "italic" } },
          }}
        />
      </div>

      <div>
        <h3>Custom props via passThrough</h3>
        <Textarea
          placeholder="Message..."
          passThrough={{
            textarea: {
              props: {
                "aria-label": "Message textarea",
                "data-testid": "message-textarea",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

<script lang="ts">
  import Textarea from "../Textarea.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Textarea
      placeholder="Custom root style"
      passThrough={{
        root: { style: { borderRadius: "lg" } },
        textarea: { style: { fontStyle: "italic" } },
      }}
    />
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Textarea
      placeholder="Message..."
      passThrough={{
        textarea: {
          props: {
            "aria-label": "Message textarea",
            "data-testid": "message-textarea",
          },
        },
      }}
    />
  </div>
</div>

<script setup lang="ts">
import { Textarea } from "@pindoba/vue-textarea";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Custom style via passThrough</h3>
      <Textarea
        placeholder="Custom root style"
        :passThrough="{
          root: { style: { borderRadius: 'full' } },
          textarea: { style: { fontStyle: 'italic' } },
        }"
      />
    </div>
    <div>
      <h3>Custom props via passThrough</h3>
      <Textarea
        placeholder="Message..."
        :passThrough="{
          textarea: {
            props: {
              'aria-label': 'Message textarea',
              'data-testid': 'message-textarea',
            },
          },
        }"
      />
    </div>
  </div>
</template>