@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/task-menu/parts/RawSubTask.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as e, Fragment as d } from "react/jsx-runtime";
+import { jsxs as n, jsx as e, Fragment as m } from "react/jsx-runtime";
 import { forwardRef as L, useEffect as R } from "react";
 import { uyTv as j } from "@payfit/unity-themes";
 import { Link as O, Button as z } from "react-aria-components";
@@ -57,7 +57,7 @@ const V = j({
       taskStatus: "uncompleted",
       className: {
         text: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ]
       }
     },
@@ -66,19 +66,19 @@ const V = j({
       taskStatus: "locked",
       className: {
         text: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ]
       }
     }
   ]
-}), B = (t, o, n) => {
+}), B = (t, o, r) => {
   switch (t) {
     case "completed":
-      return /* @__PURE__ */ a(d, { children: [
+      return /* @__PURE__ */ n(m, { children: [
         /* @__PURE__ */ e(
           p,
           {
-            className: n?.completed,
+            className: r?.completed,
             src: "CheckCircleOutlined",
             size: 20,
             color: "content.success",
@@ -97,12 +97,12 @@ const V = j({
         ) })
       ] });
     case "locked":
-      return /* @__PURE__ */ a(d, { children: [
+      return /* @__PURE__ */ n(m, { children: [
         /* @__PURE__ */ e(
           p,
           {
             "aria-hidden": "true",
-            className: n?.locked,
+            className: r?.locked,
             src: "LockOutlined",
             size: 20,
             color: "content.neutral.lowest",
@@ -127,43 +127,43 @@ const V = j({
   ({
     href: t,
     label: o,
-    taskStatus: n = "uncompleted",
-    isExact: l,
+    taskStatus: r = "uncompleted",
+    isExact: u,
     isDisabled: y,
     onPress: f,
-    uniqueId: r,
+    uniqueId: s,
     ...c
   }, g) => {
-    const k = E(), u = F(), { currentTask: b, setCurrentTask: m, state: h } = A();
+    const k = E(), d = F(), { currentTask: b, setCurrentTask: l, state: h } = A();
     R(() => {
-      t && u?.isActive(t.toString(), l) && m?.({ uniqueId: r, label: o });
-    }, [t, l, u, r, o]);
-    const s = b?.uniqueId === r, { base: v, element: S, text: x, dot: N, lock: w } = V({
-      isSelected: s,
-      taskStatus: n
+      t && d?.isActive(t.toString(), u) && l?.({ uniqueId: s, label: o });
+    }, [t, u, d, s, o, l]);
+    const a = b?.uniqueId === s, { base: v, element: S, text: x, dot: N, lock: w } = V({
+      isSelected: a,
+      taskStatus: r
     }), M = Object.assign(
       {},
-      s !== void 0 && {
-        "data-current": s,
-        "aria-current": s ? "page" : void 0
+      a !== void 0 && {
+        "data-current": a,
+        "aria-current": a ? "page" : void 0
       }
     ), T = t ? O : z;
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ n(
       "li",
       {
         ref: g,
         className: v(),
-        ...s ? { "data-current": !0 } : {},
+        ...a ? { "data-current": !0 } : {},
         ...c,
         children: [
           /* @__PURE__ */ e(D, { width: 8, height: 8, className: N(), role: "presentation" }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ n(
             T,
             {
               className: S(),
               href: t,
               onPress: (C) => {
-                m?.({ uniqueId: r, label: o }), h?.toggle(), f?.(C);
+                l?.({ uniqueId: s, label: o }), h?.toggle(), f?.(C);
               },
               isDisabled: y,
               ...M,
@@ -174,11 +174,11 @@ const V = j({
                   {
                     asElement: "span",
                     className: x(),
-                    variant: s ? "bodyStrong" : "body",
+                    variant: a ? "bodyStrong" : "body",
                     children: o
                   }
                 ),
-                B(n, k, {
+                B(r, k, {
                   locked: w(),
                   completed: "uy:self-center"
                 })

package/dist/esm/components/task-menu/parts/RawTask.js

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
 import { forwardRef as O, useEffect as F } from "react";
 import { uyTv as G } from "@payfit/unity-themes";
 import { Link as P, Button as z } from "react-aria-components";
@@ -12,7 +12,7 @@ const H = G({
   extend: D,
   slots: {
     base: [],
-    element: ["uy:p-200", "uy:md:p-0"],
+    element: ["uy:p-200", "uy:md:p-0", "uy:cursor-pointer"],
     text: "uy:leading-[1]",
     lock: "uy:self-center",
     number: ""
@@ -37,10 +37,12 @@ const H = G({
       taskStatus: "uncompleted",
       className: {
         number: [
-          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed",
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+          "uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed",
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     },
     {
@@ -48,58 +50,60 @@ const H = G({
       taskStatus: "locked",
       className: {
         number: [
-          "uy:group-hover/element:text-content-neutral-hover",
-          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover',
+          "uy:group-data-[pressed]/element:bg-surface-neutral-lowest-pressed"
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     }
   ]
 }), I = O(
   ({
-    href: s,
-    isExact: l = !1,
-    label: a,
+    href: a,
+    isExact: u = !1,
+    label: s,
     onPress: f,
     taskNumber: b,
     taskStatus: o = "uncompleted",
     children: h,
-    uniqueId: n,
-    ...u
+    uniqueId: r,
+    ...c
   }, v) => {
-    const c = B(), m = A(), {
+    const d = B(), m = A(), {
       currentTask: x,
-      setCurrentTask: d,
+      setCurrentTask: l,
       state: N,
       expandedTaskGroup: i,
       toggleTaskGroup: T
-    } = V(), S = s ? P : z;
+    } = V(), S = a ? P : z;
     F(() => {
-      s && c?.isActive(s.toString(), l) && d?.({ uniqueId: n, label: a });
-    }, [s, l, c, a, n]);
-    const t = x?.uniqueId === n, M = Object.assign(
+      a && d?.isActive(a.toString(), u) && l?.({ uniqueId: r, label: s });
+    }, [a, u, d, s, r, l]);
+    const t = x?.uniqueId === r, M = Object.assign(
       {},
       t !== void 0 && {
         "data-current": t,
         "aria-current": t ? "page" : void 0
       }
-    ), { base: C, number: w, element: L, text: R, lock: j } = H({
+    ), { base: w, number: C, element: L, text: R, lock: j } = H({
       isSelected: t,
       taskStatus: o
     });
-    return /* @__PURE__ */ r("li", { ref: v, className: C(), ...u, children: [
-      /* @__PURE__ */ r(
+    return /* @__PURE__ */ n("li", { ref: v, className: w(), ...c, children: [
+      /* @__PURE__ */ n(
         S,
         {
           className: L(),
-          href: s,
+          href: a,
           onPress: (E) => {
-            d?.({ uniqueId: n, label: a }), N?.toggle(), i && T?.(i), f?.(E);
+            l?.({ uniqueId: r, label: s }), N?.toggle(), i && T?.(i), f?.(E);
           },
           ...M,
-          ...u,
+          ...c,
           children: [
-            /* @__PURE__ */ e("div", { className: w(), children: o === "completed" ? /* @__PURE__ */ r(p, { children: [
+            /* @__PURE__ */ e("div", { className: C(), children: o === "completed" ? /* @__PURE__ */ n(p, { children: [
               /* @__PURE__ */ e(
                 y,
                 {
@@ -134,10 +138,10 @@ const H = G({
                 asElement: "span",
                 className: R(),
                 variant: t ? "bodyStrong" : "body",
-                children: a
+                children: s
               }
             ),
-            o === "locked" && /* @__PURE__ */ r(p, { children: [
+            o === "locked" && /* @__PURE__ */ n(p, { children: [
               /* @__PURE__ */ e(
                 y,
                 {

package/dist/esm/components/task-menu/parts/TaskGroup.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as j, Children as i, isValidElement as u, cloneElement as A } from "react";
+import { forwardRef as j, Children as i, isValidElement as o, cloneElement as A } from "react";
 import { uyTv as V } from "@payfit/unity-themes";
 import { useId as $ } from "react-aria";
 import { Button as B } from "react-aria-components";
@@ -12,9 +12,9 @@ const P = V({
   extend: O,
   slots: {
     base: ["uy:relative uy:flex-col uy:px-200", "uy:md:px-0"],
-    element: ["uy:z-[1] uy:py-200", "uy:md:py-0"],
+    element: ["uy:z-[1] uy:py-200", "uy:md:py-0", "uy:cursor-pointer"],
     bar: [
-      "uy:absolute uy:top-0 uy:bottom-0 uy:bg-surface-neutral-lowest uy:w-300 uy:z-[0] uy:rounded-200 uy:my-250",
+      "uy:absolute uy:top-0 uy:bottom-0 uy:bg-surface-neutral-low uy:w-300 uy:z-[0] uy:rounded-200 uy:mt-250 uy:mb-75",
       "uy:md:my-75"
     ],
     containerSubTasks: [
@@ -23,7 +23,7 @@ const P = V({
     containerSubTasksWrapper: [
       "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"
     ],
-    number: ""
+    number: "uy:bg-surface-neutral-lowest"
   },
   variants: {
     expanded: {
@@ -55,9 +55,11 @@ const P = V({
       taskStatus: "uncompleted",
       className: {
         number: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     },
     {
@@ -65,39 +67,41 @@ const P = V({
       taskStatus: "locked",
       className: {
         number: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-pressed'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     }
   ]
 }), R = (e, t) => e ? i.toArray(t).some(
-  (s) => u(s) && s.props.uniqueId === e
+  (s) => o(s) && s.props.uniqueId === e
 ) : !1, U = (e) => e ? i.toArray(e).find(
-  (t) => u(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
+  (t) => o(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
 ) : null, J = j(
   ({
     children: e,
     label: t,
     taskNumber: s,
-    taskStatus: m = "uncompleted",
-    uniqueId: c,
+    taskStatus: d = "uncompleted",
+    uniqueId: m,
     ...g
   }, k) => {
-    const { currentTask: v, setCurrentTask: x, toggleTaskGroup: S, expandedTaskGroup: h } = H(), d = $(), T = D(), a = h === c, N = (n) => {
-      if (S?.(c), !n) {
+    const { currentTask: v, setCurrentTask: x, toggleTaskGroup: S, expandedTaskGroup: h } = H(), c = $(), T = D(), a = h === m, N = (u) => {
+      if (S?.(m), !u) {
         const b = U(e);
-        if (u(b)) {
+        if (o(b)) {
           const { uniqueId: M, label: W } = b.props;
           x?.({ uniqueId: M, label: W });
         }
       }
-    }, I = i.map(e, (n) => u(n) ? A(n, { isDisabled: !a }) : n), p = `${d}-toggle`, y = `${d}-content`, o = R(
+    }, w = i.map(e, (u) => o(u) ? A(u, { isDisabled: !a }) : u), p = `${c}-toggle`, y = `${c}-content`, n = R(
       v?.uniqueId,
       e
-    ), { base: w, number: C, text: E, bar: G, element: z, containerSubTasks: q } = P({
-      taskStatus: m,
-      hasSelectedSubTask: o,
+    ), { base: I, number: C, text: E, bar: G, element: z, containerSubTasks: q } = P({
+      taskStatus: d,
+      hasSelectedSubTask: n,
       expanded: a
     });
     return /* @__PURE__ */ l(
@@ -105,8 +109,8 @@ const P = V({
       {
         ref: k,
         "data-group": "true",
-        "data-active-group": o,
-        className: w(),
+        "data-active-group": n,
+        className: I(),
         children: [
           /* @__PURE__ */ l(
             B,
@@ -120,7 +124,7 @@ const P = V({
               "aria-controls": y,
               ...g,
               children: [
-                /* @__PURE__ */ r("div", { className: C(), children: m === "completed" ? /* @__PURE__ */ r(
+                /* @__PURE__ */ r("div", { className: C(), children: d === "completed" ? /* @__PURE__ */ r(
                   F,
                   {
                     size: 24,
@@ -134,7 +138,7 @@ const P = V({
                   f,
                   {
                     asElement: "span",
-                    variant: o ? "bodyStrong" : "body",
+                    variant: n ? "bodyStrong" : "body",
                     className: "uy:leading-[1]",
                     children: s
                   }
@@ -144,7 +148,7 @@ const P = V({
                   {
                     asElement: "span",
                     className: E(),
-                    variant: o ? "bodyStrong" : "body",
+                    variant: n ? "bodyStrong" : "body",
                     children: t
                   }
                 )
@@ -159,10 +163,10 @@ const P = V({
                 "aria-labelledby": p,
                 "aria-hidden": !a,
                 className: q(),
-                children: I
+                children: w
               }
             ),
-            /* @__PURE__ */ r("div", { role: "presentation", className: G() })
+            a && /* @__PURE__ */ r("div", { role: "presentation", className: G() })
           ] })
         ]
       }

package/dist/esm/components/task-menu/parts/task.variants.js

@@ -8,7 +8,7 @@ const u = e({
     element: [
       "uy:group/element",
       "uy:gap-75 uy:flex uy:flex-1 uy:flex-row uy:items-stretch uy:outline-none uy:rounded-50",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+      'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
     ],
     text: [
       "uy:px-150 uy:py-25 uy:rounded-75 uy:grow uy:text-left uy:min-h-400 uy:leading-[1] uy:content-center",
@@ -24,6 +24,8 @@ const u = e({
         element: ["uy:data-[pressed]:text-content-neutral-pressed"],
         number: [
           "uy:bg-surface-neutral-lowest",
+          "uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed",
+          "uy:group-hover/element:bg-surface-neutral-lowest-hover uy:group-hover/element:text-content-neutral-hover",
           'uy:group-data-[current="true"]/element:bg-surface-primary-active uy:group-data-[current="true"]/element:text-content-inverted-active'
         ],
         text: [
@@ -39,7 +41,7 @@ const u = e({
         text: ["uy:text-content-neutral-enabled uy:bg-[transparent]"],
         number: [
           "uy:bg-surface-neutral-disabled uy:text-content-neutral-lowest",
-          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+          "uy:group-data-[pressed=true]/element:bg-surface-neutral-pressed"
         ],
         lock: [
           "uy:text-content-neutral-lowest uy:bg-surface-neutral-lowest uy:p-25 uy:rounded-75 uy:my-50",

package/dist/esm/components/text/Text.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { HTMLAttributes, PropsWithChildren } from 'react';
 import { text } from './Text.variants.js';
-export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'displayHeading' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
 export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
     /**
      * The HTML element to render the text as. Defaults to a recommended element based on the variant.
@@ -38,6 +38,11 @@ export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
      * @default undefined
      */
     className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
 }>;
 /**
  * The `Text` component is used to render text with different variants and colors.
@@ -78,6 +83,11 @@ declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default undefined
      */
     className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
 } & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLElement>>;

package/dist/esm/components/text/Text.js

@@ -1,8 +1,9 @@
-import { jsx as h } from "react/jsx-runtime";
-import { forwardRef as y, useMemo as c } from "react";
-import { text as g } from "./Text.variants.js";
-const b = {
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as g } from "react";
+import { text as b } from "./Text.variants.js";
+const N = {
   inherit: "span",
+  displayHeading: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -21,41 +22,50 @@ const b = {
   actionLarge: "span",
   actionSmall: "span",
   actionInfo: "span"
-}, x = y(
+}, S = h(
   ({
-    children: l,
-    variant: o,
-    color: t,
-    isTruncated: e,
-    lineClamp: s,
-    asElement: m,
-    className: n,
-    ...r
-  }, i) => {
-    const a = s !== void 0, p = c(
-      () => g({
-        variant: o,
-        color: t,
-        isTruncated: e,
-        isLineClamped: a,
-        className: n
+    children: r,
+    variant: t,
+    color: s,
+    isTruncated: n,
+    lineClamp: e,
+    asElement: l,
+    className: a,
+    maxWidthCh: o,
+    ...d
+  }, m) => {
+    const i = e !== void 0, p = g(
+      () => b({
+        variant: t,
+        color: s,
+        isTruncated: n,
+        isLineClamped: i,
+        className: a,
+        hasCharLimit: o !== void 0
       }),
-      [n, t, a, e, o]
-    ), d = b[o ?? "inherit"];
-    return /* @__PURE__ */ h(
-      m ?? d,
+      [a, s, i, n, t, o]
+    ), y = N[t ?? "inherit"];
+    return /* @__PURE__ */ c(
+      l ?? y,
       {
         "data-dd-privacy": "mask",
-        ...r,
-        ref: i,
+        ...d,
+        ref: m,
         className: p,
-        style: { "--uy-text-line-clamp": s },
-        children: l
+        style: {
+          ...e !== void 0 && {
+            "--uy-text-line-clamp": e
+          },
+          ...o !== void 0 && {
+            "--uy-text-max-width-ch": `${o}ch`
+          }
+        },
+        children: r
       }
     );
   }
 );
-x.displayName = "Text";
+S.displayName = "Text";
 export {
-  x as Text
+  S as Text
 };

package/dist/esm/components/text/Text.variants.d.ts

@@ -1,6 +1,7 @@
 export declare const text: import('tailwind-variants').TVReturnType<{
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -95,9 +96,13 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, "", {
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -192,9 +197,13 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -289,4 +298,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, "", unknown, unknown, undefined>>;

package/dist/esm/components/text/Text.variants.js

@@ -4,6 +4,7 @@ const n = t({
   variants: {
     variant: {
       inherit: "",
+      displayHeading: "uy:typography-display-heading",
       h1: "uy:typography-h1",
       h2: "uy:typography-h2",
       h3: "uy:typography-h3",
@@ -97,6 +98,9 @@ const n = t({
     },
     isLineClamped: {
       true: "uy:line-clamp-[var(--uy-text-line-clamp)]"
+    },
+    hasCharLimit: {
+      true: "uy:inline-block uy:max-w-[var(--uy-text-max-width-ch)] uy:truncate"
     }
   },
   defaultVariants: {

package/dist/esm/components/text-area/TanstackTextArea.d.ts

@@ -0,0 +1,21 @@
+import { TextAreaProps } from './TextArea.js';
+export type TanstackTextAreaProps = Omit<TextAreaProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackTextArea` is a controlled textarea wired to the TanStack Form field context.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ bio: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="bio">
+ *         {() => <TanstackTextArea placeholder="Short bio" rows={4} />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackTextArea: import('react').ForwardRefExoticComponent<TanstackTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TanstackTextArea };