@pittorica/text-area-react 0.25.0 → 0.26.0

package/README.md

@@ -4,16 +4,33 @@ The `TextArea` component.
 
 ## Installation
 
-```bash
+\`\`\`bash
 npm install @pittorica/text-area-react
-```
+\`\`\`
 
 ## Usage
 
-```jsx
+\`\`\`jsx
 import { TextArea } from '@pittorica/text-area-react';
-// TODO: Add usage example
-```
+
+function MyForm() {
+return (
+
+<form>
+<TextArea.Root
+label="Comments"
+name="comments"
+required // Mark as required
+color="source" // Default color is now 'source'
+size="sm"
+helperText="Enter your feedback below." >
+<TextArea.Content placeholder="Type your message here..." />
+</TextArea.Root>
+<button type="submit">Submit</button>
+</form>
+);
+}
+\`\`\`
 
 ## License
 

package/dist/TextArea.d.ts

@@ -12,6 +12,7 @@ export type TextAreaRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
     color?: PittoricaColor;
     disabled?: boolean;
     name?: string;
+    required?: boolean;
     /** @default 'sm' */
     size?: TextAreaSize;
 };
@@ -19,7 +20,7 @@ export type TextAreaRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
  * Radix-like Outlined TextArea Root with support for multiple sizes.
  * Polymorphic and agnostic implementation.
  */
-export declare const TextAreaRoot: <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextAreaRootProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaRoot: <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextAreaRootProps<E>) => import("react/jsx-runtime").JSX.Element;
 export interface TextAreaContentProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** Enables automatic vertical resizing based on content */
     autoResize?: boolean;
@@ -27,10 +28,10 @@ export interface TextAreaContentProps extends React.TextareaHTMLAttributes<HTMLT
 /**
  * Textarea element optimized for SSR and fluid interactions.
  */
-export declare const TextAreaContent: ({ className, autoResize, onChange, value, defaultValue, name: propsName, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaContent: ({ className, autoResize, onChange, value, defaultValue, name: propsName, required, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TextArea: {
-    Root: <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextAreaRootProps<E>) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ className, autoResize, onChange, value, defaultValue, name: propsName, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
+    Root: <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextAreaRootProps<E>) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, autoResize, onChange, value, defaultValue, name: propsName, required, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrD;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,qGAazD,iBAAiB,CAAC,CAAC,CAAC,4CA2DtB,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IAC7F,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,qFAQ7B,oBAAoB,4CAkDtB,CAAC;AAEF,eAAO,MAAM,QAAQ;WAhJQ,CAAC,SAAS,WAAW,+GAa/C,iBAAiB,CAAC,CAAC,CAAC;mGA+EpB,oBAAoB;CAuDtB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAsBrD;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,+GAczD,iBAAiB,CAAC,CAAC,CAAC,4CA6DtB,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IAC7F,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,+FAS7B,oBAAoB,4CAmDtB,CAAC;AAEF,eAAO,MAAM,QAAQ;WArJQ,CAAC,SAAS,WAAW,yHAc/C,iBAAiB,CAAC,CAAC,CAAC;6GAkFpB,oBAAoB;CAwDtB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { TextAreaContentProps, TextAreaRootProps } from './TextArea.js';
-export { TextArea, TextAreaContent, TextAreaRoot } from './TextArea.js';
+export * from './TextArea.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1,16 +1,16 @@
-import { jsx as x, jsxs as q } from "react/jsx-runtime";
-import { createContext as D, useRef as G, useEffect as J, useId as R, use as K } from "react";
-function W(t) {
+import { jsx as x, jsxs as j } from "react/jsx-runtime";
+import { createContext as G, useRef as J, useEffect as K, useId as S, use as M } from "react";
+function q(t) {
   var a, i, r = "";
   if (typeof t == "string" || typeof t == "number") r += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var n = t.length;
-    for (a = 0; a < n; a++) t[a] && (i = W(t[a])) && (r && (r += " "), r += i);
+    for (a = 0; a < n; a++) t[a] && (i = q(t[a])) && (r && (r += " "), r += i);
   } else for (i in t) t[i] && (r && (r += " "), r += i);
   return r;
 }
 function z() {
-  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = W(t)) && (r && (r += " "), r += a);
+  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = q(t)) && (r && (r += " "), r += a);
   return r;
 }
 function C(t) {
@@ -22,7 +22,7 @@ function C(t) {
   } else for (i in t) t[i] && (r && (r += " "), r += i);
   return r;
 }
-function M() {
+function O() {
   for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = C(t)) && (r && (r += " "), r += a);
   return r;
 }
@@ -32,17 +32,17 @@ const I = ({
   display: i,
   m: r,
   mt: n,
-  mr: l,
+  mr: m,
   mb: o,
-  ml: g,
+  ml: c,
   mx: p,
-  my: c,
+  my: d,
   p: f,
-  pt: m,
-  pr: d,
-  pb: h,
-  pl: s,
-  px: v,
+  pt: h,
+  pr: g,
+  pb: l,
+  pl: v,
+  px: s,
   py: u,
   width: $,
   height: y,
@@ -50,69 +50,71 @@ const I = ({
   style: T,
   className: A,
   disabled: w,
-  ...N
+  required: N,
+  ...B
 }) => {
-  const B = t || "div", e = {};
-  i && (e.display = i), $ && (e.width = $), y && (e.height = y), b && (e.position = b), r && (e.margin = `var(--pittorica-space-${r})`), n && (e.marginTop = `var(--pittorica-space-${n})`), l && (e.marginRight = `var(--pittorica-space-${l})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), g && (e.marginLeft = `var(--pittorica-space-${g})`), p && (e.marginLeft = `var(--pittorica-space-${p})`, e.marginRight = `var(--pittorica-space-${p})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), m && (e.paddingTop = `var(--pittorica-space-${m})`), d && (e.paddingRight = `var(--pittorica-space-${d})`), h && (e.paddingBottom = `var(--pittorica-space-${h})`), s && (e.paddingLeft = `var(--pittorica-space-${s})`), v && (e.paddingLeft = `var(--pittorica-space-${v})`, e.paddingRight = `var(--pittorica-space-${v})`), u && (e.paddingTop = `var(--pittorica-space-${u})`, e.paddingBottom = `var(--pittorica-space-${u})`);
-  const L = {
+  const L = t || "div", e = {};
+  i && (e.display = i), $ && (e.width = $), y && (e.height = y), b && (e.position = b), r && (e.margin = `var(--pittorica-space-${r})`), n && (e.marginTop = `var(--pittorica-space-${n})`), m && (e.marginRight = `var(--pittorica-space-${m})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), c && (e.marginLeft = `var(--pittorica-space-${c})`), p && (e.marginLeft = `var(--pittorica-space-${p})`, e.marginRight = `var(--pittorica-space-${p})`), d && (e.marginTop = `var(--pittorica-space-${d})`, e.marginBottom = `var(--pittorica-space-${d})`), f && (e.padding = `var(--pittorica-space-${f})`), h && (e.paddingTop = `var(--pittorica-space-${h})`), g && (e.paddingRight = `var(--pittorica-space-${g})`), l && (e.paddingBottom = `var(--pittorica-space-${l})`), v && (e.paddingLeft = `var(--pittorica-space-${v})`), s && (e.paddingLeft = `var(--pittorica-space-${s})`, e.paddingRight = `var(--pittorica-space-${s})`), u && (e.paddingTop = `var(--pittorica-space-${u})`, e.paddingBottom = `var(--pittorica-space-${u})`);
+  const R = {
     ...T,
     ...e
   };
   return /* @__PURE__ */ x(
-    B,
+    L,
     {
-      className: M("pittorica-box", A),
-      style: L,
+      className: O("pittorica-box", A),
+      style: R,
       disabled: w,
-      ...N,
+      required: N,
+      ...B,
       children: a
     }
   );
 };
 I.displayName = "Box";
-function S(t) {
+function k(t) {
   var a, i, r = "";
   if (typeof t == "string" || typeof t == "number") r += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var n = t.length;
-    for (a = 0; a < n; a++) t[a] && (i = S(t[a])) && (r && (r += " "), r += i);
+    for (a = 0; a < n; a++) t[a] && (i = k(t[a])) && (r && (r += " "), r += i);
   } else for (i in t) t[i] && (r && (r += " "), r += i);
   return r;
 }
-function j() {
-  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = S(t)) && (r && (r += " "), r += a);
+function W() {
+  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = k(t)) && (r && (r += " "), r += a);
   return r;
 }
-function k(t) {
+function E(t) {
   var a, i, r = "";
   if (typeof t == "string" || typeof t == "number") r += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var n = t.length;
-    for (a = 0; a < n; a++) t[a] && (i = k(t[a])) && (r && (r += " "), r += i);
+    for (a = 0; a < n; a++) t[a] && (i = E(t[a])) && (r && (r += " "), r += i);
   } else for (i in t) t[i] && (r && (r += " "), r += i);
   return r;
 }
-function O() {
-  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = k(t)) && (r && (r += " "), r += a);
+function P() {
+  for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = E(t)) && (r && (r += " "), r += a);
   return r;
 }
-const E = ({
+const H = ({
   as: t,
   children: a,
   display: i,
   m: r,
   mt: n,
-  mr: l,
+  mr: m,
   mb: o,
-  ml: g,
+  ml: c,
   mx: p,
-  my: c,
+  my: d,
   p: f,
-  pt: m,
-  pr: d,
-  pb: h,
-  pl: s,
-  px: v,
+  pt: h,
+  pr: g,
+  pb: l,
+  pl: v,
+  px: s,
   py: u,
   width: $,
   height: y,
@@ -120,39 +122,41 @@ const E = ({
   style: T,
   className: A,
   disabled: w,
-  ...N
+  required: N,
+  ...B
 }) => {
-  const B = t || "div", e = {};
-  i && (e.display = i), $ && (e.width = $), y && (e.height = y), b && (e.position = b), r && (e.margin = `var(--pittorica-space-${r})`), n && (e.marginTop = `var(--pittorica-space-${n})`), l && (e.marginRight = `var(--pittorica-space-${l})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), g && (e.marginLeft = `var(--pittorica-space-${g})`), p && (e.marginLeft = `var(--pittorica-space-${p})`, e.marginRight = `var(--pittorica-space-${p})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), m && (e.paddingTop = `var(--pittorica-space-${m})`), d && (e.paddingRight = `var(--pittorica-space-${d})`), h && (e.paddingBottom = `var(--pittorica-space-${h})`), s && (e.paddingLeft = `var(--pittorica-space-${s})`), v && (e.paddingLeft = `var(--pittorica-space-${v})`, e.paddingRight = `var(--pittorica-space-${v})`), u && (e.paddingTop = `var(--pittorica-space-${u})`, e.paddingBottom = `var(--pittorica-space-${u})`);
-  const L = {
+  const L = t || "div", e = {};
+  i && (e.display = i), $ && (e.width = $), y && (e.height = y), b && (e.position = b), r && (e.margin = `var(--pittorica-space-${r})`), n && (e.marginTop = `var(--pittorica-space-${n})`), m && (e.marginRight = `var(--pittorica-space-${m})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), c && (e.marginLeft = `var(--pittorica-space-${c})`), p && (e.marginLeft = `var(--pittorica-space-${p})`, e.marginRight = `var(--pittorica-space-${p})`), d && (e.marginTop = `var(--pittorica-space-${d})`, e.marginBottom = `var(--pittorica-space-${d})`), f && (e.padding = `var(--pittorica-space-${f})`), h && (e.paddingTop = `var(--pittorica-space-${h})`), g && (e.paddingRight = `var(--pittorica-space-${g})`), l && (e.paddingBottom = `var(--pittorica-space-${l})`), v && (e.paddingLeft = `var(--pittorica-space-${v})`), s && (e.paddingLeft = `var(--pittorica-space-${s})`, e.paddingRight = `var(--pittorica-space-${s})`), u && (e.paddingTop = `var(--pittorica-space-${u})`, e.paddingBottom = `var(--pittorica-space-${u})`);
+  const R = {
     ...T,
     ...e
   };
   return /* @__PURE__ */ x(
-    B,
+    L,
     {
-      className: O("pittorica-box", A),
-      style: L,
+      className: P("pittorica-box", A),
+      style: R,
       disabled: w,
-      ...N,
+      required: N,
+      ...B,
       children: a
     }
   );
 };
-E.displayName = "Box";
-const H = ({
+H.displayName = "Box";
+const F = ({
   children: t,
   as: a,
   size: i,
   weight: r = "regular",
   align: n,
-  truncate: l = !1,
+  truncate: m = !1,
   color: o,
-  className: g,
+  className: c,
   style: p,
-  ...c
+  ...d
 }) => {
-  const f = a || "span", m = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), d = /* @__PURE__ */ new Set([
+  const f = a || "span", h = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), g = /* @__PURE__ */ new Set([
     "danger",
     "success",
     "error",
@@ -164,150 +168,164 @@ const H = ({
     "slate",
     "blue",
     "red"
-  ]), h = (() => {
+  ]), l = (() => {
     if (o)
-      return o === "inherit" ? "inherit" : m ? o : d.has(o) ? `var(--pittorica-${o}-9)` : o;
-  })(), s = i ? typeof i == "string" ? `pittorica-text--size-${i}` : j({
+      return o === "inherit" ? "inherit" : h ? o : g.has(o) ? `var(--pittorica-${o}-9)` : o;
+  })(), v = i ? typeof i == "string" ? `pittorica-text--size-${i}` : W({
     [`pittorica-text--size-${i.initial}`]: i.initial,
     [`pittorica-text--xs-size-${i.xs}`]: i.xs,
     [`pittorica-text--sm-size-${i.sm}`]: i.sm,
     [`pittorica-text--md-size-${i.md}`]: i.md,
     [`pittorica-text--lg-size-${i.lg}`]: i.lg,
     [`pittorica-text--xl-size-${i.xl}`]: i.xl
-  }) : null, v = {
+  }) : null, s = {
     ...p,
     textAlign: n,
-    color: h
+    color: l
   };
   return /* @__PURE__ */ x(
-    E,
+    H,
     {
       as: f,
-      className: j(
+      className: W(
         "pittorica-text",
-        s,
-        { "pittorica-text--truncate": l },
-        g
+        v,
+        { "pittorica-text--truncate": m },
+        c
       ),
       "data-weight": r,
-      style: v,
-      ...c,
+      style: s,
+      ...d,
       children: t
     }
   );
 };
-H.displayName = "Text";
-const F = D(null), P = () => {
-  const t = K(F);
+F.displayName = "Text";
+const D = G(null), Q = () => {
+  const t = M(D);
   if (!t)
     throw new Error("TextArea components must be wrapped in <TextArea.Root />");
   return t;
-}, Q = ({
+}, U = ({
   children: t,
   label: a,
   helperText: i,
   error: r,
-  color: n = "indigo",
-  disabled: l,
+  color: n = "source",
+  disabled: m,
   name: o,
-  size: g = "sm",
-  className: p,
-  style: c,
-  as: f,
-  ...m
+  required: c,
+  size: p = "sm",
+  className: d,
+  style: f,
+  as: h,
+  ...g
 }) => {
-  const d = R(), h = R(), v = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
-  return /* @__PURE__ */ x(F, { value: { inputId: d, helperId: h, disabled: l, size: g, name: o }, children: /* @__PURE__ */ q(
-    I,
+  const l = S(), v = S(), u = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
+  return /* @__PURE__ */ x(
+    D,
     {
-      as: f || "div",
-      className: z(
-        "pittorica-textarea-root",
-        `pittorica-textarea--${g}`,
-        p
-      ),
-      "data-error": r,
-      ...m,
-      children: [
-        a && /* @__PURE__ */ x(
-          H,
-          {
-            as: "label",
-            htmlFor: d,
-            weight: "medium",
-            style: {
-              paddingLeft: "4px",
-              fontSize: "var(--pittorica-font-size-1)",
-              marginBottom: "4px",
-              display: "inline-block"
-            },
-            children: a
-          }
-        ),
-        /* @__PURE__ */ x(
-          "div",
-          {
-            className: "pittorica-textarea-wrapper",
-            "data-disabled": l,
-            style: {
-              "--pittorica-source-color": v,
-              ...c
-            },
-            children: t
-          }
-        ),
-        i && /* @__PURE__ */ x("div", { id: h, className: "pittorica-textarea-helper", children: i })
-      ]
+      value: { inputId: l, helperId: v, disabled: m, size: p, name: o, required: c },
+      children: /* @__PURE__ */ j(
+        I,
+        {
+          as: h || "div",
+          className: z(
+            "pittorica-textarea-root",
+            `pittorica-textarea--${p}`,
+            d
+          ),
+          "data-error": r,
+          ...g,
+          children: [
+            a && /* @__PURE__ */ j(
+              F,
+              {
+                as: "label",
+                htmlFor: l,
+                weight: "medium",
+                style: {
+                  paddingLeft: "4px",
+                  fontSize: "var(--pittorica-font-size-1)",
+                  marginBottom: "4px",
+                  display: "inline-block"
+                },
+                children: [
+                  a,
+                  " ",
+                  c && /* @__PURE__ */ x("span", { "aria-hidden": "true", children: "*" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ x(
+              "div",
+              {
+                className: "pittorica-textarea-wrapper",
+                "data-disabled": m,
+                style: {
+                  "--pittorica-source-color": u,
+                  ...f
+                },
+                children: t
+              }
+            ),
+            i && /* @__PURE__ */ x("div", { id: v, className: "pittorica-textarea-helper", children: i })
+          ]
+        }
+      )
     }
-  ) });
-}, U = ({
+  );
+}, X = ({
   className: t,
   autoResize: a = !1,
   onChange: i,
   value: r,
   defaultValue: n,
-  name: l,
-  ...o
+  name: m,
+  required: o,
+  // Add required prop here
+  ...c
 }) => {
   const {
-    inputId: g,
-    helperId: p,
-    disabled: c,
-    name: f
-  } = P(), m = G(null), d = () => {
+    inputId: p,
+    helperId: d,
+    disabled: f,
+    name: h
+  } = Q(), g = J(null), l = () => {
     if (globalThis.window === void 0) return;
-    const s = m.current;
+    const s = g.current;
     !s || !a || (s.style.height = "auto", s.style.height = `${s.scrollHeight}px`);
   };
-  return J(() => {
-    a && d();
+  return K(() => {
+    a && l();
   }, [r, n, a]), /* @__PURE__ */ x(
     "textarea",
     {
-      name: l ?? f,
-      ...o,
-      id: g,
-      ref: m,
+      name: m ?? h,
+      ...c,
+      id: p,
+      ref: g,
       value: r,
       defaultValue: n,
-      disabled: c,
-      "aria-describedby": p,
+      disabled: f,
+      required: o,
+      "aria-describedby": d,
       onChange: (s) => {
-        a && d(), i == null || i(s);
+        a && l(), i == null || i(s);
       },
       className: z("pittorica-textarea-input", t),
       style: {
         overflow: a ? "hidden" : void 0,
-        ...o.style
+        ...c.style
       }
     }
   );
-}, Z = {
-  Root: Q,
-  Content: U
+}, _ = {
+  Root: U,
+  Content: X
 };
 export {
-  Z as TextArea,
-  U as TextAreaContent,
-  Q as TextAreaRoot
+  _ as TextArea,
+  X as TextAreaContent,
+  U as TextAreaRoot
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/text-area-react",
-  "version": "0.25.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +11,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/text-react": "0.25.0",
-    "@pittorica/box-react": "0.25.0"
+    "@pittorica/box-react": "0.26.0",
+    "@pittorica/text-react": "0.26.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -21,11 +22,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/theme-react": "0.25.0",
-    "@pittorica/flex-react": "0.25.0",
-    "pittorica": "0.25.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/flex-react": "0.26.0",
+    "@pittorica/theme-react": "0.26.0",
+    "pittorica": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -35,7 +36,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/TeaxtArea.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=TeaxtArea.test.d.ts.map

package/dist/TeaxtArea.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TeaxtArea.test.d.ts","sourceRoot":"","sources":["../src/TeaxtArea.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}

package/dist/TextArea.stories.d.ts

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextArea } from './TextArea.js';
-/**
- * Storybook configuration for Outlined TextArea.
- * Supports 5 compact sizes and auto-resizing logic.
- */
-declare const meta: Meta<typeof TextArea.Root>;
-export default meta;
-export declare const Basic: StoryObj<typeof TextArea.Root>;
-/**
- * Visualization of the 5 sizes scaling min-height and typography.
- */
-export declare const AllSizes: StoryObj<typeof TextArea.Root>;
-export declare const AutoResizing: StoryObj<typeof TextArea.Root>;
-export declare const States: StoryObj<typeof TextArea.Root>;
-//# sourceMappingURL=TextArea.stories.d.ts.map

package/dist/TextArea.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../src/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAAC,IAAI,CA0BpC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAC,IAAI,CAchD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAC,IAAI,CAoBnD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAC,IAAI,CAgBvD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAC,IAAI,CAsBjD,CAAC"}