@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/switch/switch.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../../lib/utils";
+const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export {
+  Switch
+};

package/dist/components/table/index.js

@@ -0,0 +1,20 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./table";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/components/table/table.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const Table = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    className: cn("w-full caption-bottom text-sm", className),
+    ref,
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ref, ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    className: cn("[&_tr:last-child]:border-0", className),
+    ref,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ref,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/components/table-of-contents/index.js

@@ -0,0 +1,4 @@
+import { TableOfContents } from "./table-of-contents";
+export {
+  TableOfContents
+};

package/dist/components/table-of-contents/table-of-contents.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/utils";
+function handleClick(id) {
+  const element = document.querySelector(`#${id}`);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+function useActiveSection(sections) {
+  const [activeSection, setActiveSection] = useState(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: "-100px 0px -66% 0px",
+        threshold: 0
+      }
+    );
+    sections.forEach((section) => {
+      const element = document.querySelector(`#${section.id}`);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    return () => {
+      sections.forEach((section) => {
+        const element = document.querySelector(`#${section.id}`);
+        if (element) {
+          observer.unobserve(element);
+        }
+      });
+    };
+  }, [sections]);
+  return activeSection;
+}
+function TableOfContents({ sections }) {
+  const activeSection = useActiveSection(sections);
+  if (sections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("aside", { className: "hidden xl:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-8", children: /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-border pl-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mb-4 text-muted-foreground uppercase tracking-wider", children: "On This Page" }),
+    /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "block text-left text-sm transition-colors",
+          "hover:text-foreground",
+          activeSection === section.id ? "text-foreground font-medium" : "text-muted-foreground"
+        ),
+        onClick: () => {
+          handleClick(section.id);
+        },
+        type: "button",
+        children: section.title
+      },
+      section.id
+    )) })
+  ] }) }) });
+}
+export {
+  TableOfContents
+};

package/dist/components/table-of-contents-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  TableOfContentsPanel
+} from "./table-of-contents-panel";
+export {
+  TableOfContentsPanel
+};

package/dist/components/table-of-contents-panel/table-of-contents-panel.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import { cn } from "../../lib/utils";
+function TableOfContentsPanelImpl({
+  className,
+  closeIcon,
+  completedSections,
+  completionCount,
+  currentSectionIndex,
+  isOpen,
+  onClose,
+  onReset,
+  onSelectSection,
+  progressLabel = "Progress",
+  resetLabel = "Reset Progress",
+  sections,
+  title = "Table of Contents",
+  totalSections
+}) {
+  const panelRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    closeButtonRef.current?.focus();
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const completionPercent = totalSections > 0 ? Math.round(completionCount / totalSections * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": "toc-title",
+      "aria-modal": "true",
+      className: "fixed inset-0 z-50",
+      role: "dialog",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute right-0 top-0 h-full w-full max-w-md bg-background shadow-xl",
+              className
+            ),
+            ref: panelRef,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "toc-title", children: title }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": "Close table of contents",
+                    className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted",
+                    onClick: onClose,
+                    ref: closeButtonRef,
+                    type: "button",
+                    children: closeIcon ?? /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "h-5 w-5",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M6 18L18 6M6 6l12 12",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-4 py-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: progressLabel }),
+                  /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                    completionCount,
+                    " / ",
+                    totalSections,
+                    " (",
+                    completionPercent,
+                    "%)"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full rounded-full bg-primary transition-all duration-300",
+                    style: { width: `${completionPercent}%` }
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  "aria-label": "Sections",
+                  className: "flex-1 overflow-y-auto px-4 py-3",
+                  children: /* @__PURE__ */ jsx("ol", { className: "space-y-1", children: sections.map((section, index) => {
+                    const isCompleted = completedSections.has(section.id);
+                    const isCurrent = index === currentSectionIndex;
+                    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: cn(
+                          "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
+                          isCurrent ? "bg-primary/10 text-primary font-medium" : "hover:bg-muted text-foreground"
+                        ),
+                        onClick: () => {
+                          onSelectSection(index);
+                          onClose();
+                        },
+                        type: "button",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
+                                isCompleted ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground"
+                              ),
+                              children: isCompleted ? /* @__PURE__ */ jsx(
+                                "svg",
+                                {
+                                  className: "h-3 w-3",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  viewBox: "0 0 24 24",
+                                  children: /* @__PURE__ */ jsx(
+                                    "path",
+                                    {
+                                      d: "M5 13l4 4L19 7",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round",
+                                      strokeWidth: 2
+                                    }
+                                  )
+                                }
+                              ) : /* @__PURE__ */ jsx("span", { className: "text-xs", children: index + 1 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: isCompleted ? "line-through opacity-60" : "",
+                              children: section.title
+                            }
+                          )
+                        ]
+                      }
+                    ) }, `${section.id}-${index}`);
+                  }) })
+                }
+              ),
+              completionCount > 0 && onReset ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "w-full rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+                  onClick: onReset,
+                  type: "button",
+                  children: resetLabel
+                }
+              ) }) : null
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+const TableOfContentsPanel = memo(TableOfContentsPanelImpl);
+TableOfContentsPanel.displayName = "TableOfContentsPanel";
+export {
+  TableOfContentsPanel
+};

package/dist/components/tabs/index.js

@@ -0,0 +1,12 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./tabs";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+const TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tab components must be used within a Tabs component");
+  }
+  return context;
+}
+function Tabs({
+  children,
+  className,
+  defaultValue,
+  onValueChange
+}) {
+  const [activeTab, setActiveTab] = useState(defaultValue);
+  const handleSetActiveTab = (value) => {
+    setActiveTab(value);
+    onValueChange?.(value);
+  };
+  const contextValue = useMemo(
+    () => ({ activeTab, setActiveTab: handleSetActiveTab }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTab]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("my-6", className), children }) });
+}
+function TabsList({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex border-b border-border overflow-x-auto", className),
+      role: "tablist",
+      children
+    }
+  );
+}
+function TabsTrigger({
+  children,
+  className,
+  value
+}) {
+  const { activeTab, setActiveTab } = useTabsContext();
+  const isActive = activeTab === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-selected": isActive,
+      className: cn(
+        "px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors",
+        "border-b-2 -mb-px",
+        isActive ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50",
+        className
+      ),
+      onClick: () => {
+        setActiveTab(value);
+      },
+      role: "tab",
+      type: "button",
+      children
+    }
+  );
+}
+function TabsContent({
+  children,
+  className,
+  value
+}) {
+  const { activeTab } = useTabsContext();
+  if (activeTab !== value) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("pt-4", className), role: "tabpanel", children });
+}
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/components/terminal/index.js

@@ -0,0 +1,8 @@
+import {
+  SimpleTerminal,
+  Terminal
+} from "./terminal";
+export {
+  SimpleTerminal,
+  Terminal
+};

package/dist/components/terminal/terminal.js

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
+import { Button } from "../button";
+function Terminal({
+  copyable = true,
+  lines,
+  title = "Terminal"
+}) {
+  const [copied, setCopied] = useState(false);
+  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(commands.join("\n"));
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+        ] }),
+        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+          "# ",
+          line.content
+        ] })
+      ] }, index)) }),
+      copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          onClick: handleCopy,
+          size: "icon",
+          variant: "ghost",
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+        }
+      ) : null
+    ] })
+  ] });
+}
+function SimpleTerminal({
+  children,
+  title = "Terminal"
+}) {
+  const [copied, setCopied] = useState(false);
+  const lines = children.trim().split("\n").map((line) => {
+    if (line.startsWith("$ ")) {
+      return { content: line.slice(2), type: "command" };
+    }
+    if (line.startsWith("# ")) {
+      return { content: line.slice(2), type: "comment" };
+    }
+    return { content: line, type: "output" };
+  });
+  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(commands.join("\n"));
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+        ] }),
+        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+          "# ",
+          line.content
+        ] })
+      ] }, index)) }),
+      commands.length > 0 && /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          onClick: handleCopy,
+          size: "icon",
+          variant: "ghost",
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SimpleTerminal,
+  Terminal
+};

package/dist/components/textarea/index.js

@@ -0,0 +1,4 @@
+import { Textarea } from "./textarea";
+export {
+  Textarea
+};

package/dist/components/textarea/textarea.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const Textarea = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};