fromsrc 0.0.0 → 0.0.2

package/dist/components/table.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useId, useMemo, useCallback } from 'react';
+
+function Table({
+  data,
+  columns,
+  defaultSort,
+  defaultDirection = "asc",
+  striped = false,
+  hoverable = true,
+  compact = false,
+  caption,
+  className = ""
+}) {
+  const [sortKey, setSortKey] = useState(defaultSort ?? null);
+  const [sortDir, setSortDir] = useState(defaultSort ? defaultDirection : null);
+  const id = useId();
+  const sorted = useMemo(() => {
+    if (!sortKey || !sortDir) return data;
+    return [...data].sort((a, b) => {
+      const va = a[sortKey];
+      const vb = b[sortKey];
+      if (va === vb) return 0;
+      if (va == null) return 1;
+      if (vb == null) return -1;
+      const cmp = va < vb ? -1 : 1;
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir]);
+  const handleSort = useCallback(
+    (key) => {
+      if (sortKey === key) {
+        setSortDir(sortDir === "asc" ? "desc" : sortDir === "desc" ? null : "asc");
+        if (sortDir === "desc") setSortKey(null);
+      } else {
+        setSortKey(key);
+        setSortDir("asc");
+      }
+    },
+    [sortKey, sortDir]
+  );
+  const padding = compact ? "px-3 py-2" : "px-4 py-3";
+  const getSortLabel = useCallback(
+    (col) => {
+      if (sortKey === col.key) {
+        if (sortDir === "asc") return `${col.header}, sorted ascending`;
+        if (sortDir === "desc") return `${col.header}, sorted descending`;
+      }
+      return `${col.header}, sortable`;
+    },
+    [sortKey, sortDir]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `my-6 overflow-x-auto rounded-lg border border-line ${className}`.trim(),
+      role: "region",
+      "aria-label": caption || "Data table",
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: "w-full text-sm",
+          "aria-rowcount": data.length + 1,
+          "aria-colcount": columns.length,
+          children: [
+            caption && /* @__PURE__ */ jsx("caption", { id: `${id}-caption`, className: "sr-only", children: caption }),
+            /* @__PURE__ */ jsx("thead", { className: "bg-surface", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                style: col.width ? { width: col.width } : void 0,
+                className: `text-left ${padding} font-medium text-fg ${col.hideOnMobile ? "hidden sm:table-cell" : ""}`,
+                "aria-sort": col.sortable && sortKey === col.key && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+                children: col.sortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSort(col.key),
+                    "aria-label": getSortLabel(col),
+                    className: "inline-flex items-center gap-1.5 transition-colors hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded",
+                    children: [
+                      col.header,
+                      /* @__PURE__ */ jsx(
+                        SortIcon,
+                        {
+                          active: sortKey === col.key,
+                          direction: sortKey === col.key ? sortDir : null
+                        }
+                      )
+                    ]
+                  }
+                ) : col.header
+              },
+              col.key
+            )) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: sorted.map((row, i) => /* @__PURE__ */ jsx(
+              "tr",
+              {
+                "aria-rowindex": i + 2,
+                className: `border-t border-line/50 ${striped && i % 2 === 1 ? "bg-surface/30" : ""} ${hoverable ? "hover:bg-surface/50" : ""}`,
+                children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    "aria-colindex": colIndex + 1,
+                    className: `${padding} text-muted ${col.hideOnMobile ? "hidden sm:table-cell" : ""}`,
+                    children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "")
+                  },
+                  col.key
+                ))
+              },
+              i
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+const SortIcon = memo(function SortIcon2({ active, direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      className: `size-3.5 transition-colors ${active && direction ? "text-accent" : "text-muted/50"}`,
+      children: direction === "asc" ? /* @__PURE__ */ jsx("path", { d: "M8 4l4 5H4l4-5z" }) : direction === "desc" ? /* @__PURE__ */ jsx("path", { d: "M8 12l-4-5h8l-4 5z" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 4l3 3.5H5L8 4z", opacity: 0.5 }),
+        /* @__PURE__ */ jsx("path", { d: "M8 12l-3-3.5h6L8 12z", opacity: 0.5 })
+      ] })
+    }
+  );
+});
+
+export { Table };

package/dist/components/tabnav.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+/**
+ * Individual tab configuration for navigation
+ */
+interface NavTab {
+    id: string;
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    match?: string[];
+}
+/**
+ * Props for the horizontal tab navigation component
+ */
+interface TabNavProps {
+    tabs: NavTab[];
+    label?: string;
+}
+declare function TabNav({ tabs, label }: TabNavProps): ReactNode;
+/**
+ * Props for the dropdown tab navigation component
+ */
+interface TabNavDropdownProps {
+    tabs: NavTab[];
+    label?: string;
+}
+declare function TabNavDropdown({ tabs, label }: TabNavDropdownProps): ReactNode;
+
+export { type NavTab, TabNav, TabNavDropdown, type TabNavDropdownProps, type TabNavProps };

package/dist/components/tabnav.js

@@ -0,0 +1,199 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useRef, useCallback, useState, useId } from 'react';
+import { getNextIndex } from '../hooks/arrownav';
+import { IconChevronDown } from './icons';
+
+function TabNav({ tabs, label = "Navigation" }) {
+  const pathname = usePathname();
+  const refs = useRef([]);
+  const isActive = useCallback(
+    (tab) => {
+      if (tab.match) {
+        return tab.match.some((pattern) => pathname.startsWith(pattern));
+      }
+      return pathname.startsWith(tab.href);
+    },
+    [pathname]
+  );
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      const next = getNextIndex(e.key, {
+        count: tabs.length,
+        current: index,
+        direction: "both",
+        wrap: true
+      });
+      if (next === index) return;
+      e.preventDefault();
+      refs.current[next]?.focus();
+    },
+    [tabs.length]
+  );
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, role: "tablist", className: "flex gap-1 p-1 bg-surface rounded-lg", children: tabs.map((tab, i) => {
+    const active = isActive(tab);
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        href: tab.href,
+        role: "tab",
+        tabIndex: active ? 0 : -1,
+        "aria-selected": active,
+        "aria-current": active ? "page" : void 0,
+        onKeyDown: (e) => handleKeyDown(e, i),
+        className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${active ? "bg-bg text-fg shadow-sm" : "text-muted hover:text-fg hover:bg-bg/50"}`,
+        children: [
+          tab.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", "aria-hidden": "true", children: tab.icon }),
+          tab.label
+        ]
+      },
+      tab.id
+    );
+  }) });
+}
+function TabNavDropdown({ tabs, label = "Navigation" }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(0);
+  const containerRef = useRef(null);
+  const buttonRef = useRef(null);
+  const optionRefs = useRef([]);
+  const listId = useId();
+  const isActive = useCallback(
+    (tab) => {
+      if (tab.match) {
+        return tab.match.some((pattern) => pathname.startsWith(pattern));
+      }
+      return pathname.startsWith(tab.href);
+    },
+    [pathname]
+  );
+  const currentTab = tabs.find((tab) => isActive(tab)) || tabs[0];
+  const currentIndex = tabs.findIndex((tab) => isActive(tab));
+  const openMenu = useCallback((index) => {
+    setOpen(true);
+    setFocused(index);
+    requestAnimationFrame(() => {
+      optionRefs.current[index]?.focus();
+    });
+  }, []);
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    buttonRef.current?.focus();
+  }, []);
+  const handleButtonKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openMenu(currentIndex >= 0 ? currentIndex : 0);
+      }
+    },
+    [currentIndex, openMenu]
+  );
+  const handleOptionKeyDown = useCallback(
+    (e, index) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeMenu();
+        return;
+      }
+      if (e.key === "Tab") {
+        setOpen(false);
+        return;
+      }
+      const next = getNextIndex(e.key, {
+        count: tabs.length,
+        current: index,
+        wrap: true
+      });
+      if (next === index) return;
+      e.preventDefault();
+      setFocused(next);
+      optionRefs.current[next]?.focus();
+    },
+    [closeMenu, tabs.length]
+  );
+  const handleButtonClick = useCallback(() => {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu(currentIndex >= 0 ? currentIndex : 0);
+    }
+  }, [open, closeMenu, openMenu, currentIndex]);
+  const handleBlur = useCallback(
+    (e) => {
+      if (!containerRef.current?.contains(e.relatedTarget)) {
+        setOpen(false);
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: "relative", ref: containerRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleButtonClick,
+        onKeyDown: handleButtonKeyDown,
+        onBlur: handleBlur,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": listId,
+        className: "flex items-center gap-2 px-3 py-2 w-full rounded-lg bg-surface border border-line text-sm font-medium text-fg hover:bg-surface/80 transition-colors",
+        children: [
+          currentTab?.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", "aria-hidden": "true", children: currentTab.icon }),
+          currentTab?.label,
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 16,
+              className: `ml-auto text-muted transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: listId,
+        role: "listbox",
+        "aria-activedescendant": tabs[focused]?.id,
+        className: "absolute left-0 right-0 top-full mt-1 bg-surface border border-line rounded-lg shadow-lg overflow-hidden z-50",
+        children: tabs.map((tab, i) => {
+          const active = isActive(tab);
+          return /* @__PURE__ */ jsxs(
+            Link,
+            {
+              id: tab.id,
+              ref: (el) => {
+                optionRefs.current[i] = el;
+              },
+              href: tab.href,
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": active,
+              onClick: () => setOpen(false),
+              onKeyDown: (e) => handleOptionKeyDown(e, i),
+              onBlur: handleBlur,
+              className: `flex items-center gap-2 px-3 py-2 text-sm transition-colors ${active ? "bg-bg text-fg" : "text-muted hover:text-fg hover:bg-bg/50"} ${i === focused ? "ring-1 ring-inset ring-accent" : ""}`,
+              children: [
+                tab.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", "aria-hidden": "true", children: tab.icon }),
+                tab.label
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { TabNav, TabNavDropdown };

package/dist/components/tabs.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, JSX } from 'react';
+
+interface TabsProps {
+    items: readonly string[];
+    defaultValue?: string;
+    children: ReactNode;
+}
+declare function Tabs({ items, defaultValue, children }: TabsProps): JSX.Element;
+interface TabProps {
+    value: string;
+    children: ReactNode;
+}
+declare function Tab({ value, children }: TabProps): JSX.Element | null;
+
+export { Tab, type TabProps, Tabs, type TabsProps };

package/dist/components/tabs.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useId, useRef, useCallback, useContext } from 'react';
+import { getNextIndex } from '../hooks/arrownav';
+
+const TabsContext = createContext(null);
+function Tabs({ items, defaultValue, children }) {
+  const [active, setActive] = useState(defaultValue ?? items[0] ?? "");
+  const id = useId();
+  const tabsRef = useRef(null);
+  const tabMap = useRef(/* @__PURE__ */ new Map());
+  for (const item of items) {
+    if (!tabMap.current.has(item)) {
+      tabMap.current.set(item, tabMap.current.size);
+    }
+  }
+  const getTabId = useCallback(
+    (value) => {
+      const index = tabMap.current.get(value) ?? 0;
+      return `${id}-tab-${index}`;
+    },
+    [id]
+  );
+  const getPanelId = useCallback(
+    (value) => {
+      const index = tabMap.current.get(value) ?? 0;
+      return `${id}-panel-${index}`;
+    },
+    [id]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const currentIndex = items.indexOf(active);
+      const nextIndex = getNextIndex(e.key, {
+        count: items.length,
+        current: currentIndex,
+        direction: "horizontal",
+        wrap: true
+      });
+      if (nextIndex === currentIndex) return;
+      e.preventDefault();
+      const nextItem = items[nextIndex];
+      if (nextItem !== void 0) {
+        setActive(nextItem);
+      }
+      const tabs = tabsRef.current?.querySelectorAll('[role="tab"]');
+      tabs?.[nextIndex]?.focus();
+    },
+    [active, items]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active, setActive, id, getTabId, getPanelId }, children: /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tabsRef,
+        role: "tablist",
+        onKeyDown: handleKeyDown,
+        className: "flex border-b border-line",
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: getTabId(item),
+            type: "button",
+            role: "tab",
+            "aria-selected": active === item,
+            "aria-controls": getPanelId(item),
+            tabIndex: active === item ? 0 : -1,
+            onClick: () => setActive(item),
+            className: `px-4 py-2 text-sm font-medium transition-colors border-b -mb-px ${active === item ? "text-fg border-fg" : "text-muted hover:text-fg border-transparent"}`,
+            children: item
+          },
+          item
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: getPanelId(active),
+        role: "tabpanel",
+        "aria-labelledby": getTabId(active),
+        tabIndex: 0,
+        className: "pt-4",
+        children
+      }
+    )
+  ] }) });
+}
+function Tab({ value, children }) {
+  const context = useContext(TabsContext);
+  if (!context) return null;
+  if (context.active !== value) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+export { Tab, Tabs };

package/dist/components/tag.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ReactElement } from 'react';
+
+type TagVariant = "default" | "primary" | "success" | "warning" | "danger";
+/**
+ * Props for the Tag component
+ */
+interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Visual style variant
+     */
+    variant?: TagVariant;
+    /**
+     * Tag content
+     */
+    children: ReactNode;
+}
+declare function TagBase({ variant, className, children, ...props }: TagProps): ReactElement;
+declare const Tag: react.MemoExoticComponent<typeof TagBase>;
+/**
+ * Props for the Tags container component
+ */
+interface TagsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Tag elements to render
+     */
+    children: ReactNode;
+}
+declare function TagsBase({ className, children, ...props }: TagsProps): ReactElement;
+declare const Tags: react.MemoExoticComponent<typeof TagsBase>;
+
+export { Tag, type TagProps, type TagVariant, Tags, type TagsProps };

package/dist/components/tag.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const styles = {
+  default: "bg-surface border-line text-muted",
+  primary: "bg-accent/10 border-accent/20 text-accent",
+  success: "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
+  warning: "bg-amber-500/10 border-amber-500/20 text-amber-400",
+  danger: "bg-red-500/10 border-red-500/20 text-red-400"
+};
+function TagBase({ variant = "default", className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "listitem",
+      className: `inline-flex items-center px-2 py-0.5 text-xs font-medium rounded border ${styles[variant]}${className ? ` ${className}` : ""}`,
+      ...props,
+      children
+    }
+  );
+}
+const Tag = memo(TagBase);
+function TagsBase({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": "Tags",
+      className: `flex flex-wrap gap-1.5 my-4${className ? ` ${className}` : ""}`,
+      ...props,
+      children
+    }
+  );
+}
+const Tags = memo(TagsBase);
+
+export { Tag, Tags };

package/dist/components/terminal.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * props for the terminal container component
+ */
+interface TerminalProps {
+    title?: string;
+    children: ReactNode;
+}
+/**
+ * terminal window with macos-style title bar
+ */
+declare const Terminal: react.NamedExoticComponent<TerminalProps>;
+/**
+ * props for terminal command line
+ */
+interface LineProps {
+    prompt?: string;
+    children: ReactNode;
+}
+/**
+ * command line with prompt symbol
+ */
+declare const Line: react.NamedExoticComponent<LineProps>;
+/**
+ * props for terminal output
+ */
+interface OutputProps {
+    children: ReactNode;
+}
+/**
+ * command output text
+ */
+declare const Output: react.NamedExoticComponent<OutputProps>;
+/**
+ * props for typewriter animation
+ */
+interface TypedProps {
+    text: string;
+    speed?: number;
+}
+/**
+ * typewriter text animation with blinking caret
+ */
+declare function Typed({ text, speed }: TypedProps): ReactNode;
+
+export { Line, type LineProps, Output, type OutputProps, Terminal, type TerminalProps, Typed, type TypedProps };

package/dist/components/terminal.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useCallback, useEffect } from 'react';
+
+const Terminal = memo(function Terminal2({ title = "Terminal", children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-xl border border-line overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5 bg-[#0a0a0a] border-b border-line", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[#ff5f57]" }),
+        /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[#febc2e]" }),
+        /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[#28c840]" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted ml-2", children: title })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-4 bg-[#0a0a0a] font-mono text-sm", children })
+  ] });
+});
+const Line = memo(function Line2({ prompt = "$", children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-emerald-400 select-none shrink-0", children: prompt }),
+    /* @__PURE__ */ jsx("span", { className: "text-zinc-300", children })
+  ] });
+});
+const Output = memo(function Output2({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "text-zinc-500 pl-5", children });
+});
+const caretStyle = {
+  animation: "caret 530ms steps(1) infinite"
+};
+function Typed({ text, speed = 50 }) {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+  const indexRef = useRef(0);
+  const reset = useCallback(() => {
+    setDisplayed("");
+    setDone(false);
+    indexRef.current = 0;
+  }, []);
+  const tick = useCallback(() => {
+    if (indexRef.current < text.length) {
+      indexRef.current++;
+      setDisplayed(text.slice(0, indexRef.current));
+    } else {
+      setDone(true);
+    }
+  }, [text]);
+  useEffect(() => {
+    reset();
+  }, [text, reset]);
+  useEffect(() => {
+    if (done) return;
+    const interval = setInterval(tick, speed);
+    return () => clearInterval(interval);
+  }, [text, speed, done, tick]);
+  return /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx("style", { children: `@keyframes caret { 50% { opacity: 0; } }` }),
+    displayed,
+    !done && /* @__PURE__ */ jsx("span", { style: caretStyle, "aria-hidden": "true", children: "\u258B" })
+  ] });
+}
+
+export { Line, Output, Terminal, Typed };

package/dist/components/textarea.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TextareaVariant = "default" | "error";
+type TextareaSize = "sm" | "md" | "lg";
+/**
+ * Props for the Textarea component.
+ * @property variant - visual style variant
+ * @property size - textarea size
+ * @property label - accessible label
+ * @property error - error message
+ * @property hint - helper text
+ * @property autoresize - auto-resize based on content
+ * @property maxLength - maximum character count
+ * @property showCount - show character count
+ * @property tooltip - help text shown on hover
+ */
+interface TextareaProps extends Omit<React.ComponentPropsWithRef<"textarea">, "size"> {
+    variant?: TextareaVariant;
+    size?: TextareaSize;
+    label?: ReactNode;
+    error?: ReactNode;
+    hint?: ReactNode;
+    autoresize?: boolean;
+    showCount?: boolean;
+    tooltip?: ReactNode;
+}
+declare const Textarea: react.NamedExoticComponent<Omit<TextareaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps, type TextareaSize, type TextareaVariant };