@oneplatformdev/ui 0.1.99-beta.227 → 0.1.99-beta.228

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.1.99-beta.228 (2026-02-23)
+
+### 🚀 Features
+
+- **Textarea:** set `counter` default to true and ensure proper handling in FormTextarea ([b7f5ec8](https://github.com/oneplatformdev/core-web/commit/b7f5ec8))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.228
+- Updated @oneplatformdev/hooks to 0.1.99-beta.228
+- Updated @oneplatformdev/tokens to 0.1.99-beta.228
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
 ## 0.1.99-beta.227 (2026-02-23)
 
 ### 🚀 Features

package/FormInput/FormInput.js

@@ -1,24 +1,24 @@
 import { jsx as m } from "react/jsx-runtime";
-import { FormControl as T } from "../Form/Form.js";
-import { FormRenderControl as S } from "../Form/FormRenderControl.js";
-import { Input as V } from "../Input/Input.js";
-import { forwardRef as j } from "react";
-function q(D, o) {
-  const { form: a, tooltip: x, tooltipProps: P, label: b, name: u, maxLength: s, counter: y, onChange: C, onBlur: F, onPaste: w, style: I, onPastePrepare: p, ...B } = D;
+import { FormControl as S } from "../Form/Form.js";
+import { FormRenderControl as V } from "../Form/FormRenderControl.js";
+import { Input as j } from "../Input/Input.js";
+import { forwardRef as q } from "react";
+function w(D, o) {
+  const { form: a, tooltip: x, tooltipProps: P, label: b, name: u, maxLength: s, counter: y, onChange: C, onBlur: F, onPaste: A, style: I, onPastePrepare: p, ...B } = D;
   return /* @__PURE__ */ m(
-    S,
+    V,
     {
       form: a,
       name: u,
       tooltip: x,
       tooltipProps: P,
       label: b,
-      render: ({ field: n }) => /* @__PURE__ */ m(T, { children: /* @__PURE__ */ m(
-        V,
+      render: ({ field: n, fieldState: R }) => /* @__PURE__ */ m(S, { children: /* @__PURE__ */ m(
+        j,
         {
           ...n,
           ...B,
-          counter: y,
+          counter: R.error ? !1 : y,
           maxLength: s,
           ref: (t) => {
             n.ref(t), typeof o == "function" ? o(t) : o && (o.current = t);
@@ -43,8 +43,8 @@ function q(D, o) {
               t.preventDefault();
               return;
             }
-            const i = h.slice(0, v), R = l + i + d;
-            t.preventDefault(), a.setValue(u, R, {
+            const i = h.slice(0, v), T = l + i + d;
+            t.preventDefault(), a.setValue(u, T, {
               shouldDirty: !0,
               shouldTouch: !0
             }), requestAnimationFrame(() => {
@@ -62,8 +62,8 @@ function q(D, o) {
     }
   );
 }
-const z = j(q);
+const G = q(w);
 export {
-  z as FormInput
+  G as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/FormInput/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Input } from '../Input';\nimport { FormInputProps } from './FormInput.types';\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\n\n// TODO: add description\n// export const FormInput = <Data extends FieldValues>(\n//   props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\n// ) => {\n//   const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\n//     props;\n//   return (\n//     <FormRenderControl\n//       form={form}\n//       name={name}\n//       label={label}\n//       render={({ field }) => (\n//         <FormControl>\n//           <Input\n//             {...field}\n//             {...rest}\n//             ref={(el) => {\n//               field.ref(el);\n//               if (typeof inputRef === 'function') {\n//                 inputRef(el);\n//               } else if (inputRef) {\n//                 (inputRef as RefObject<HTMLInputElement | null>).current = el;\n//               }\n//             }}\n//             style={style}\n//             value={field.value || ''}\n//             onChange={(...rest) => {\n//               field.onChange?.(...rest);\n//               onChange?.(...rest);\n//             }}\n//             onBlur={(...rest) => {\n//               field.onBlur?.();\n//               onBlur?.(...rest);\n//             }}\n//           />\n//         </FormControl>\n//       )}\n//     />\n//   );\n// };\n\nfunction FormInputInner<Data extends FieldValues>(\n  props: FormInputProps<Data>,\n  ref: Ref<HTMLInputElement>\n) {\n  const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\n  return (\n    <FormRenderControl\n      form={form}\n      name={name}\n      tooltip={tooltip}\n      tooltipProps={tooltipProps}\n      label={label}\n      render={({ field }) => (\n        <FormControl>\n          <Input\n            {...field}\n            {...rest}\n            counter={counter}\n            maxLength={maxLength}\n            ref={(el) => {\n              field.ref(el);\n              if (typeof ref === 'function') {\n                ref(el);\n              } else if (ref) {\n                (ref as RefObject<HTMLInputElement | null>).current = el;\n              }\n            }}\n            style={style}\n            value={field.value || ''}\n            onChange={(...rest) => {\n              field.onChange?.(...rest);\n              onChange?.(...rest);\n            }}\n            onPaste={(e) => {\n              const pasted = e.clipboardData.getData('text');\n              const input = e.currentTarget;\n\n              const start = input.selectionStart ?? input.value.length;\n              const end = input.selectionEnd ?? input.value.length;\n\n              const current = input.value;\n\n              let next = current.slice(0, start) + pasted + current.slice(end);\n\n              if (onPastePrepare) {\n                next = onPastePrepare(next, e);\n              }\n\n              if (typeof maxLength !== 'number') {\n                e.preventDefault();\n\n                form.setValue(name, next as PathValue<Data, Path<Data>>, {\n                  shouldDirty: true,\n                  shouldTouch: true,\n                });\n\n                return;\n              }\n\n              const before = current.slice(0, start);\n              const after = current.slice(end);\n\n              const available = maxLength - (before.length + after.length);\n\n              if (available <= 0) {\n                e.preventDefault();\n                return;\n              }\n\n              const limitedPaste = pasted.slice(0, available);\n              const limitedNext = before + limitedPaste + after;\n\n              e.preventDefault();\n\n              form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\n                shouldDirty: true,\n                shouldTouch: true,\n              });\n\n              requestAnimationFrame(() => {\n                input.setSelectionRange(\n                  before.length + limitedPaste.length,\n                  before.length + limitedPaste.length\n                );\n              });\n            }}\n            onBlur={(...rest) => {\n              field.onBlur?.();\n              onBlur?.(...rest);\n            }}\n          />\n        </FormControl>\n      )}\n    />\n  );\n}\n\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\n  props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\n) => ReactElement;\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,SAAAN;AAAA,UACA,WAAAD;AAAA,UACA,KAAK,CAACa,MAAO;AACX,YAAAH,EAAM,IAAIG,CAAE,GACR,OAAOnB,KAAQ,aACjBA,EAAImB,CAAE,IACGnB,MACRA,EAA2C,UAAUmB;AAAA,UAE1D;AAAA,UACA,OAAAR;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACO,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIZ,MACFc,IAAOd,EAAec,GAAMN,CAAC,IAG3B,OAAOd,KAAc,UAAU;AACjC,cAAAc,EAAE,eAAA,GAEFnB,EAAK,SAASI,GAAMqB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYvB,KAAaqB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFnB,EAAK,SAASI,GAAM0B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIjB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMmB,IAAYC,EAAWnC,CAAc;"}
+{"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Input } from '../Input';\nimport { FormInputProps } from './FormInput.types';\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\n\n// TODO: add description\n// export const FormInput = <Data extends FieldValues>(\n//   props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\n// ) => {\n//   const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\n//     props;\n//   return (\n//     <FormRenderControl\n//       form={form}\n//       name={name}\n//       label={label}\n//       render={({ field }) => (\n//         <FormControl>\n//           <Input\n//             {...field}\n//             {...rest}\n//             ref={(el) => {\n//               field.ref(el);\n//               if (typeof inputRef === 'function') {\n//                 inputRef(el);\n//               } else if (inputRef) {\n//                 (inputRef as RefObject<HTMLInputElement | null>).current = el;\n//               }\n//             }}\n//             style={style}\n//             value={field.value || ''}\n//             onChange={(...rest) => {\n//               field.onChange?.(...rest);\n//               onChange?.(...rest);\n//             }}\n//             onBlur={(...rest) => {\n//               field.onBlur?.();\n//               onBlur?.(...rest);\n//             }}\n//           />\n//         </FormControl>\n//       )}\n//     />\n//   );\n// };\n\nfunction FormInputInner<Data extends FieldValues>(\n  props: FormInputProps<Data>,\n  ref: Ref<HTMLInputElement>\n) {\n  const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\n  return (\n    <FormRenderControl\n      form={form}\n      name={name}\n      tooltip={tooltip}\n      tooltipProps={tooltipProps}\n      label={label}\n      render={({ field, fieldState }) => (\n        <FormControl>\n          <Input\n            {...field}\n            {...rest}\n            counter={!!fieldState.error ? false : counter}\n            maxLength={maxLength}\n            ref={(el) => {\n              field.ref(el);\n              if (typeof ref === 'function') {\n                ref(el);\n              } else if (ref) {\n                (ref as RefObject<HTMLInputElement | null>).current = el;\n              }\n            }}\n            style={style}\n            value={field.value || ''}\n            onChange={(...rest) => {\n              field.onChange?.(...rest);\n              onChange?.(...rest);\n            }}\n            onPaste={(e) => {\n              const pasted = e.clipboardData.getData('text');\n              const input = e.currentTarget;\n\n              const start = input.selectionStart ?? input.value.length;\n              const end = input.selectionEnd ?? input.value.length;\n\n              const current = input.value;\n\n              let next = current.slice(0, start) + pasted + current.slice(end);\n\n              if (onPastePrepare) {\n                next = onPastePrepare(next, e);\n              }\n\n              if (typeof maxLength !== 'number') {\n                e.preventDefault();\n\n                form.setValue(name, next as PathValue<Data, Path<Data>>, {\n                  shouldDirty: true,\n                  shouldTouch: true,\n                });\n\n                return;\n              }\n\n              const before = current.slice(0, start);\n              const after = current.slice(end);\n\n              const available = maxLength - (before.length + after.length);\n\n              if (available <= 0) {\n                e.preventDefault();\n                return;\n              }\n\n              const limitedPaste = pasted.slice(0, available);\n              const limitedNext = before + limitedPaste + after;\n\n              e.preventDefault();\n\n              form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\n                shouldDirty: true,\n                shouldTouch: true,\n              });\n\n              requestAnimationFrame(() => {\n                input.setSelectionRange(\n                  before.length + limitedPaste.length,\n                  before.length + limitedPaste.length\n                );\n              });\n            }}\n            onBlur={(...rest) => {\n              field.onBlur?.();\n              onBlur?.(...rest);\n            }}\n          />\n        </FormControl>\n      )}\n    />\n  );\n}\n\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\n  props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\n) => ReactElement;\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","fieldState","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACH,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQV;AAAA,UACtC,WAAAD;AAAA,UACA,KAAK,CAACc,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOpB,KAAQ,aACjBA,EAAIoB,CAAE,IACGpB,MACRA,EAA2C,UAAUoB;AAAA,UAE1D;AAAA,UACA,OAAAT;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACQ,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIb,MACFe,IAAOf,EAAee,GAAMN,CAAC,IAG3B,OAAOf,KAAc,UAAU;AACjC,cAAAe,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAMsB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYxB,KAAasB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAM2B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIlB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMoB,IAAYC,EAAWpC,CAAc;"}

package/Textarea/Textarea.js

@@ -1,62 +1,62 @@
 import { jsxs as d, Fragment as v, jsx as A } from "react/jsx-runtime";
 import * as w from "react";
 import { useId as y, useRef as z, useState as F, useImperativeHandle as N, useEffect as T } from "react";
-import { cn as f } from "@oneplatformdev/utils";
+import { cn as m } from "@oneplatformdev/utils";
 import { useAutosizeTextArea as C } from "./useAutosizeTextArea.js";
 const R = w.forwardRef(
-  (m, c) => {
+  (f, c) => {
     const {
       className: g,
       value: r = "",
-      maxHeight: i = Number.MAX_SAFE_INTEGER,
-      minHeight: a = 40,
+      maxHeight: a = Number.MAX_SAFE_INTEGER,
+      minHeight: i = 40,
       resizeble: x = !1,
-      counter: s = !0,
-      id: n = "",
+      counter: n = !0,
+      id: s = "",
       onChange: p,
       onTransform: l,
       ...o
-    } = m, u = y(), t = z(null), [b, h] = F("");
+    } = f, u = y(), t = z(null), [b, h] = F("");
     return C({
       textAreaRef: t,
       triggerAutoSize: b,
-      maxHeight: i,
-      minHeight: a
+      maxHeight: a,
+      minHeight: i
     }), N(c, () => ({
       ...t.current ?? {},
       textArea: t.current,
       focus: () => t?.current?.focus(),
-      maxHeight: i,
-      minHeight: a
+      maxHeight: a,
+      minHeight: i
     })), T(() => {
       h(r);
     }, [o?.defaultValue, r]), /* @__PURE__ */ d(v, { children: [
       /* @__PURE__ */ A(
         "textarea",
         {
-          id: n || u,
+          id: s || u,
           ...o,
           ref: t,
           value: r,
           onChange: (e) => {
             typeof l?.(e.target.value, e) == "string" && (e.target.value = l(e.target.value, e)), p?.(e);
           },
-          className: f(
+          className: m(
             "flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm",
             "rounded-lg border border-input bg-[#FCFCFC] shadow-none",
             "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
             "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
             x ? "resize" : "resize-none overflow-hidden!",
-            s && "pb-1",
+            n && "pb-1",
             g
           )
         }
       ),
-      s && /* @__PURE__ */ d(
+      n && typeof o?.maxLength == "number" && /* @__PURE__ */ d(
         "label",
         {
-          htmlFor: n || u,
-          className: f(
+          htmlFor: s || u,
+          className: m(
             "w-full text-right inline-flex items-center justify-end",
             "text-xs font-medium leading-[1.2] text-muted-foreground",
             "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

package/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (textareaProps, ref) => {\n    const {\n      className,\n      value = '',\n      maxHeight = Number.MAX_SAFE_INTEGER,\n      minHeight = 40,\n      resizeble = false,\n      counter = true,\n      id: customId = '',\n      onChange,\n      onTransform,\n      ...props\n    } = textareaProps;\n    const id = useId();\n    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n    const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n    useAutosizeTextArea({\n      textAreaRef,\n      triggerAutoSize: triggerAutoSize,\n      maxHeight,\n      minHeight,\n    });\n\n    useImperativeHandle(ref, () => ({\n      ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n      textArea: textAreaRef.current as HTMLTextAreaElement,\n      focus: () => textAreaRef?.current?.focus(),\n      maxHeight,\n      minHeight,\n    }));\n\n    useEffect(() => {\n      setTriggerAutoSize(value as string);\n    }, [props?.defaultValue, value]);\n\n    return (\n      <>\n        <textarea\n          id={customId || id}\n          {...props}\n          ref={textAreaRef}\n          value={value}\n          onChange={(e) => {\n            if (typeof onTransform?.(e.target.value, e) === 'string') {\n              e.target.value = onTransform(e.target.value, e);\n            }\n            onChange?.(e);\n          }}\n          className={cn(\n            'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n            'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\n            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n            'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n            resizeble ? 'resize' : 'resize-none overflow-hidden!',\n            counter && 'pb-1',\n            className\n          )}\n        />\n        {counter && (\n          <label\n            htmlFor={customId || id}\n            className={cn(\n              'w-full text-right inline-flex items-center justify-end',\n              'text-xs font-medium leading-[1.2] text-muted-foreground',\n              'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n            )}\n          >\n            {String(value || '').length} / {props?.maxLength}\n          </label>\n        )}\n      </>\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","onChange","onTransform","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GACEY,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAZ;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDe,EAAoBnB,GAAK,OAAO;AAAA,MAC9B,GAAKa,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFgB,EAAU,MAAM;AACd,MAAAJ,EAAmBd,CAAe;AAAA,IACpC,GAAG,CAACQ,GAAO,cAAcR,CAAK,CAAC,GAG7B,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIhB,KAAYI;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAX;AAAA,UACA,UAAU,CAAC,MAAM;AACf,YAAI,OAAOO,IAAc,EAAE,OAAO,OAAO,CAAC,KAAM,aAC9C,EAAE,OAAO,QAAQA,EAAY,EAAE,OAAO,OAAO,CAAC,IAEhDD,IAAW,CAAC;AAAA,UACd;AAAA,UACA,WAAWgB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAnB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASd,KAAYI;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOtB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIQ,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAb,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (textareaProps, ref) => {\n    const {\n      className,\n      value = '',\n      maxHeight = Number.MAX_SAFE_INTEGER,\n      minHeight = 40,\n      resizeble = false,\n      counter = true,\n      id: customId = '',\n      onChange,\n      onTransform,\n      ...props\n    } = textareaProps;\n    const id = useId();\n    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n    const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n    useAutosizeTextArea({\n      textAreaRef,\n      triggerAutoSize: triggerAutoSize,\n      maxHeight,\n      minHeight,\n    });\n\n    useImperativeHandle(ref, () => ({\n      ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n      textArea: textAreaRef.current as HTMLTextAreaElement,\n      focus: () => textAreaRef?.current?.focus(),\n      maxHeight,\n      minHeight,\n    }));\n\n    useEffect(() => {\n      setTriggerAutoSize(value as string);\n    }, [props?.defaultValue, value]);\n\n    return (\n      <>\n        <textarea\n          id={customId || id}\n          {...props}\n          ref={textAreaRef}\n          value={value}\n          onChange={(e) => {\n            if (typeof onTransform?.(e.target.value, e) === 'string') {\n              e.target.value = onTransform(e.target.value, e);\n            }\n            onChange?.(e);\n          }}\n          className={cn(\n            'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n            'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\n            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n            'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n            resizeble ? 'resize' : 'resize-none overflow-hidden!',\n            counter && 'pb-1',\n            className\n          )}\n        />\n        {counter && typeof props?.maxLength === 'number' && (\n          <label\n            htmlFor={customId || id}\n            className={cn(\n              'w-full text-right inline-flex items-center justify-end',\n              'text-xs font-medium leading-[1.2] text-muted-foreground',\n              'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n            )}\n          >\n            {String(value || '').length} / {props?.maxLength}\n          </label>\n        )}\n      </>\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","onChange","onTransform","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GACEY,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAZ;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDe,EAAoBnB,GAAK,OAAO;AAAA,MAC9B,GAAKa,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFgB,EAAU,MAAM;AACd,MAAAJ,EAAmBd,CAAe;AAAA,IACpC,GAAG,CAACQ,GAAO,cAAcR,CAAK,CAAC,GAG7B,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIhB,KAAYI;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAX;AAAA,UACA,UAAU,CAAC,MAAM;AACf,YAAI,OAAOO,IAAc,EAAE,OAAO,OAAO,CAAC,KAAM,aAC9C,EAAE,OAAO,QAAQA,EAAY,EAAE,OAAO,OAAO,CAAC,IAEhDD,IAAW,CAAC;AAAA,UACd;AAAA,UACA,WAAWgB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAnB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KAAW,OAAOI,GAAO,aAAc,YACtC,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASd,KAAYI;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOtB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIQ,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAb,EAAS,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.227",
+  "version": "0.1.99-beta.228",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -106,9 +106,9 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/tokens": "^0.1.99-beta.227",
-    "@oneplatformdev/utils": "^0.1.99-beta.227",
-    "@oneplatformdev/hooks": "^0.1.99-beta.227"
+    "@oneplatformdev/tokens": "^0.1.99-beta.228",
+    "@oneplatformdev/utils": "^0.1.99-beta.228",
+    "@oneplatformdev/hooks": "^0.1.99-beta.228"
   },
   "scripts": {
     "chromatic": "chromatic"