;
}
`,__src__:"registry/default/examples/textarea-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />;"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,l.jsxs)(r,{children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(d,{value:"cli",children:"CLI"}),(0,l.jsx)(d,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/textarea"
`,__npmCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/textarea"
`,__yarnCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/textarea"
`,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://ui.fingertip.com/r/styles/default/textarea"
`,__bunCommand__:`bun x --bun shadcn@latest add "https://ui.fingertip.com/r/styles/default/textarea"
`,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "https://ui.fingertip.com/r/styles/default/textarea"'})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(s,{name:"textarea",children:(0,l.jsx)(e.figure,{__src__:"registry/default/ui/textarea.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`"use client";

import { CircleXFilledIcon } from "@fingertip/icons";
import * as React from "react";
import TextareaAutosize from "react-textarea-autosize";

import { cn } from "@/lib/utils";

export interface TextareaProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
  hasError?: boolean;
  clearable?: boolean;
  onClear?: () => void;
  clearClassName?: string;
  leftAddon?: React.ReactNode | null;
  rightAddon?: React.ReactNode | null;
  leftControl?: React.ReactNode | null;
  rightControl?: React.ReactNode | null;
  minRows?: number;
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    {
      className,
      onClear,
      clearable,
      hasError,
      leftAddon,
      rightAddon,
      clearClassName,
      leftControl,
      rightControl,
      minRows,
      ...props
    },
    ref,
  ) => {
    return (
      <label
        className={cn("relative w-full", {
          "input-group": !!leftAddon || !!rightAddon,
        })}
      >
        {leftAddon && (
          <span className="shrink-0 cursor-pointer">{leftAddon}</span>
        )}

{leftControl && (
          <div className="absolute left-0 top-0 flex h-full flex-row place-items-center items-center justify-center">
            {leftControl}
          </div>
        )}

{clearable && !!props.value && (
          <div className="absolute right-0 top-0">
            <button
              tabIndex={-1}
              className={cn(
                "flex h-[52px] w-10 items-center cursor-pointer justify-center p-0! text-muted-foreground",
                clearClassName,
              )}
              type="button"
              onClick={() => onClear?.()}
              aria-label="clear input"
            >
              <CircleXFilledIcon className="size-4 text-muted-foreground/50" />
            </button>
          </div>
        )}

{rightControl && (
          <div
            className={cn(
              "absolute right-0 top-0 flex h-full flex-row place-items-center items-center justify-center",
              {
                "right-9": clearable && !!props.value,
              },
            )}
          >
            {rightControl}
          </div>
        )}

{rightAddon && (
          <span className="shrink-0 cursor-pointer">{rightAddon}</span>
        )}
      </label>
    );
  },
);
Textarea.displayName = "Textarea";

export { Textarea };
`,__src__:"registry/default/ui/textarea.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { CircleXFilledIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@fingertip/icons"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" TextareaAutosize "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react-textarea-autosize"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" interface"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaProps"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  extends"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Omit"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"TextareaHTMLAttributes"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">, "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"style"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  hasError"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  clearable"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"  onClear"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" void"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  clearClassName"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  leftAddon"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  rightAddon"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  leftControl"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  rightControl"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  minRows"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" Textarea"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"TextareaProps"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  ("})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    {"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      className,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      onClear,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      clearable,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      hasError,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      leftAddon,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      rightAddon,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      clearClassName,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      leftControl,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      rightControl,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      minRows,"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"      ..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    },"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    ref,"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  ) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"    return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"label"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"        className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative w-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'          "input-group"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"!!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"leftAddon "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" !!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"rightAddon,"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        })}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      >"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        {leftAddon "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"shrink-0 cursor-pointer"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{leftAddon}</"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        )}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        {leftControl "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute left-0 top-0 flex h-full flex-row place-items-center items-center justify-center"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            {leftControl}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        )}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"TextareaAutosize"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"          className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'            "flex h-[52px] w-full rounded-2xl border border-input transition-colors shadow-input hover:border-input-hover bg-card px-4 py-[14px] font-sans font-normal text-base leading-snug text-foreground placeholder:text-placeholder-foreground focus:outline-hidden focus:border-ring focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            {"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'              "border-destructive-foreground"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": hasError,"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'              "pr-9"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": clearable "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" !!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.value,"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'              "pr-12"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": clearable "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" !!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" rightControl,"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            },"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            className,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          )}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"          ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"          minRows"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{minRows}"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        />"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        {clearable "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" !!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute right-0 top-0"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              tabIndex"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'                "flex h-[52px] w-10 items-center cursor-pointer justify-center p-0! text-muted-foreground"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"                clearClassName,"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              )}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              type"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onClear"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"?.()}"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"clear input"'})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            >"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"CircleXFilledIcon"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4 text-muted-foreground/50"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        )}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        {rightControl "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"            className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'              "absolute right-0 top-0 flex h-full flex-row place-items-center items-center justify-center"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              {"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'                "right-9"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": clearable "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" !!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.value,"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              },"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            )}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          >"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            {rightControl}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        )}"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        {rightAddon "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"shrink-0 cursor-pointer"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{rightAddon}</"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        )}"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    );"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  },"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Textarea.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "Textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea };"})]})]})})})}),(0,l.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from "@/components/ui/textarea";
`,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]})})})}),`
`,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`<Textarea />
`,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})}),`
`,(0,l.jsxs)(e.h2,{id:"examples",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),`
`,(0,l.jsxs)(e.h3,{id:"default",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Default"]}),`
`,(0,l.jsx)(a,{name:"textarea-demo",description:"A textarea",children:(0,l.jsx)(e.figure,{__src__:"registry/default/examples/textarea-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from "@/components/ui/textarea";

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}
`,__src__:"registry/default/examples/textarea-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />;"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,l.jsxs)(e.h3,{id:"disabled",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#disabled",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Disabled"]}),`
`,(0,l.jsx)(a,{name:"textarea-disabled",description:"A disabled textarea",children:(0,l.jsx)(e.figure,{__src__:"registry/default/examples/textarea-disabled.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from "@/components/ui/textarea";

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />;
}
`,__src__:"registry/default/examples/textarea-disabled.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaDisabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />;"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,l.jsxs)(e.h3,{id:"with-label",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"With Label"]}),`
`,(0,l.jsx)(a,{name:"textarea-with-label",className:"[&_div.grid]:w-full",description:"A textarea with a label",children:(0,l.jsx)(e.figure,{__src__:"registry/default/examples/textarea-with-label.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  );
}
`,__src__:"registry/default/examples/textarea-with-label.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaWithLabel"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Your message</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,l.jsxs)(e.h3,{id:"with-text",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"With Text"]}),`
`,(0,l.jsx)(a,{name:"textarea-with-text",description:"A textarea with text",children:(0,l.jsx)(e.figure,{__src__:"registry/default/examples/textarea-with-text.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  );
}
`,__src__:"registry/default/examples/textarea-with-text.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaWithText"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Your Message</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        Your message will be copied to the support team."})}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,l.jsxs)(e.h3,{id:"with-button",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"With Button"]}),`
`,(0,l.jsx)(a,{name:"textarea-with-button",description:"A textarea with a button",children:(0,l.jsx)(e.figure,{__src__:"registry/default/examples/textarea-with-button.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

export function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  );
}
`,__src__:"registry/default/examples/textarea-with-button.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:" "}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaWithButton"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Send message</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(u,{...n})}):u(n)}function t(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(N);})();
;return Component;</article></body></html>