@pittorica/text-area-react 0.24.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +22 -5
  2. package/dist/TextArea.d.ts +12 -7
  3. package/dist/TextArea.d.ts.map +1 -1
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +248 -247
  7. package/package.json +10 -10
  8. package/dist/TeaxtArea.test.d.ts +0 -5
  9. package/dist/TeaxtArea.test.d.ts.map +0 -1
  10. package/dist/TextArea.stories.d.ts +0 -16
  11. package/dist/TextArea.stories.d.ts.map +0 -1
package/README.md CHANGED
@@ -4,16 +4,33 @@ The `TextArea` component.
4
4
 
5
5
  ## Installation
6
6
 
7
- ```bash
7
+ \`\`\`bash
8
8
  npm install @pittorica/text-area-react
9
- ```
9
+ \`\`\`
10
10
 
11
11
  ## Usage
12
12
 
13
- ```jsx
13
+ \`\`\`jsx
14
14
  import { TextArea } from '@pittorica/text-area-react';
15
- // TODO: Add usage example
16
- ```
15
+
16
+ function MyForm() {
17
+ return (
18
+
19
+ <form>
20
+ <TextArea.Root
21
+ label="Comments"
22
+ name="comments"
23
+ required // Mark as required
24
+ color="source" // Default color is now 'source'
25
+ size="sm"
26
+ helperText="Enter your feedback below." >
27
+ <TextArea.Content placeholder="Type your message here..." />
28
+ </TextArea.Root>
29
+ <button type="submit">Submit</button>
30
+ </form>
31
+ );
32
+ }
33
+ \`\`\`
17
34
 
18
35
  ## License
19
36
 
package/dist/TextArea.d.ts CHANGED
@@ -1,21 +1,26 @@
1
- import { type ReactNode } from 'react';
1
+ import React, { type ElementType, type ReactNode } from 'react';
2
2
  import { type BoxProps } from '@pittorica/box-react';
3
3
  import type { PittoricaColor } from '@pittorica/text-react';
4
4
  type TextAreaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
- export interface TextAreaRootProps extends BoxProps {
5
+ /**
6
+ * Fix TS2314 & TS2312: Use 'type' alias for intersection with polymorphic BoxProps<E>.
7
+ */
8
+ export type TextAreaRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
6
9
  label?: ReactNode;
7
10
  helperText?: ReactNode;
8
11
  error?: boolean;
9
12
  color?: PittoricaColor;
10
13
  disabled?: boolean;
11
14
  name?: string;
15
+ required?: boolean;
12
16
  /** @default 'sm' */
13
17
  size?: TextAreaSize;
14
- }
18
+ };
15
19
  /**
16
20
  * Radix-like Outlined TextArea Root with support for multiple sizes.
21
+ * Polymorphic and agnostic implementation.
17
22
  */
18
- export declare const TextAreaRoot: ({ children, label, helperText, error, color, disabled, name, size, className, style, ...props }: TextAreaRootProps) => import("react/jsx-runtime").JSX.Element;
23
+ 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;
19
24
  export interface TextAreaContentProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
20
25
  /** Enables automatic vertical resizing based on content */
21
26
  autoResize?: boolean;
@@ -23,10 +28,10 @@ export interface TextAreaContentProps extends React.TextareaHTMLAttributes<HTMLT
23
28
  /**
24
29
  * Textarea element optimized for SSR and fluid interactions.
25
30
  */
26
- export declare const TextAreaContent: ({ className, autoResize, onChange, value, defaultValue, name: propsName, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
31
+ export declare const TextAreaContent: ({ className, autoResize, onChange, value, defaultValue, name: propsName, required, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
27
32
  export declare const TextArea: {
28
- Root: ({ children, label, helperText, error, color, disabled, name, size, className, style, ...props }: TextAreaRootProps) => import("react/jsx-runtime").JSX.Element;
29
- Content: ({ className, autoResize, onChange, value, defaultValue, name: propsName, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
33
+ 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;
34
+ Content: ({ className, autoResize, onChange, value, defaultValue, name: propsName, required, ...props }: TextAreaContentProps) => import("react/jsx-runtime").JSX.Element;
30
35
  };
31
36
  export {};
32
37
  //# sourceMappingURL=TextArea.d.ts.map
package/dist/TextArea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,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;AAoBrD,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,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;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,iGAY1B,iBAAiB,4CAwDnB,CAAC;AAGF,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;4GA/HlB,iBAAiB;mGA2EjB,oBAAoB;CAuDtB,CAAC"}
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;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 CHANGED
@@ -1,3 +1,2 @@
1
- export type { TextAreaContentProps, TextAreaRootProps } from './TextArea.js';
2
- export { TextArea, TextAreaContent, TextAreaRoot } from './TextArea.js';
1
+ export * from './TextArea.js';
3
2
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
package/dist/index.js CHANGED
@@ -1,182 +1,162 @@
1
- import { jsx as u, jsxs as D } from "react/jsx-runtime";
2
- import { createContext as G, useRef as J, useEffect as K, useId as C, use as M } from "react";
3
- function I(t) {
4
- var i, r, e = "";
5
- if (typeof t == "string" || typeof t == "number") e += t;
1
+ import { jsx as x, jsxs as j } from "react/jsx-runtime";
2
+ import { createContext as G, useRef as J, useEffect as K, useId as S, use as M } from "react";
3
+ function q(t) {
4
+ var a, i, r = "";
5
+ if (typeof t == "string" || typeof t == "number") r += t;
6
6
  else if (typeof t == "object") if (Array.isArray(t)) {
7
- var a = t.length;
8
- for (i = 0; i < a; i++) t[i] && (r = I(t[i])) && (e && (e += " "), e += r);
9
- } else for (r in t) t[r] && (e && (e += " "), e += r);
10
- return e;
7
+ var n = t.length;
8
+ for (a = 0; a < n; a++) t[a] && (i = q(t[a])) && (r && (r += " "), r += i);
9
+ } else for (i in t) t[i] && (r && (r += " "), r += i);
10
+ return r;
11
11
  }
12
- function L() {
13
- for (var t, i, r = 0, e = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (i = I(t)) && (e && (e += " "), e += i);
14
- return e;
12
+ function z() {
13
+ for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = q(t)) && (r && (r += " "), r += a);
14
+ return r;
15
15
  }
16
- function S(t) {
17
- var i, r, e = "";
18
- if (typeof t == "string" || typeof t == "number") e += t;
16
+ function C(t) {
17
+ var a, i, r = "";
18
+ if (typeof t == "string" || typeof t == "number") r += t;
19
19
  else if (typeof t == "object") if (Array.isArray(t)) {
20
- var a = t.length;
21
- for (i = 0; i < a; i++) t[i] && (r = S(t[i])) && (e && (e += " "), e += r);
22
- } else for (r in t) t[r] && (e && (e += " "), e += r);
23
- return e;
20
+ var n = t.length;
21
+ for (a = 0; a < n; a++) t[a] && (i = C(t[a])) && (r && (r += " "), r += i);
22
+ } else for (i in t) t[i] && (r && (r += " "), r += i);
23
+ return r;
24
24
  }
25
25
  function O() {
26
- for (var t, i, r = 0, e = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (i = S(t)) && (e && (e += " "), e += i);
27
- return e;
26
+ for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = C(t)) && (r && (r += " "), r += a);
27
+ return r;
28
28
  }
29
- const W = ({
30
- ref: t,
31
- as: i = "div",
32
- children: r,
33
- display: e,
34
- m: a,
35
- mt: s,
36
- mr: l,
37
- mb: d,
38
- ml: m,
29
+ const I = ({
30
+ as: t,
31
+ children: a,
32
+ display: i,
33
+ m: r,
34
+ mt: n,
35
+ mr: m,
36
+ mb: o,
37
+ ml: c,
38
+ mx: p,
39
+ my: d,
39
40
  p: f,
40
41
  pt: h,
41
- pr: p,
42
- pb: c,
43
- pl: g,
44
- width: o,
45
- height: v,
46
- position: y,
47
- style: x,
48
- className: b,
49
- href: $,
50
- target: w,
51
- rel: A,
52
- htmlFor: N,
53
- type: T,
54
- name: j,
55
- disabled: B,
56
- ...F
42
+ pr: g,
43
+ pb: l,
44
+ pl: v,
45
+ px: s,
46
+ py: u,
47
+ width: $,
48
+ height: y,
49
+ position: b,
50
+ style: T,
51
+ className: A,
52
+ disabled: w,
53
+ required: N,
54
+ ...B
57
55
  }) => {
58
- const n = {};
59
- e && (n.display = e), o && (n.width = o), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), l && (n.marginRight = `var(--pittorica-space-${l})`), d && (n.marginBottom = `var(--pittorica-space-${d})`), m && (n.marginLeft = `var(--pittorica-space-${m})`), f && (n.padding = `var(--pittorica-space-${f})`), h && (n.paddingTop = `var(--pittorica-space-${h})`), p && (n.paddingRight = `var(--pittorica-space-${p})`), c && (n.paddingBottom = `var(--pittorica-space-${c})`), g && (n.paddingLeft = `var(--pittorica-space-${g})`);
56
+ const L = t || "div", e = {};
57
+ 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})`);
60
58
  const R = {
61
- ...x,
62
- ...n
59
+ ...T,
60
+ ...e
63
61
  };
64
- return /* @__PURE__ */ u(
65
- i,
62
+ return /* @__PURE__ */ x(
63
+ L,
66
64
  {
67
- ref: t,
68
- className: O("pittorica-box", b),
65
+ className: O("pittorica-box", A),
69
66
  style: R,
70
- href: $,
71
- target: w,
72
- rel: A,
73
- htmlFor: N,
74
- type: T,
75
- name: j,
76
- disabled: B,
77
- ...F,
78
- children: r
67
+ disabled: w,
68
+ required: N,
69
+ ...B,
70
+ children: a
79
71
  }
80
72
  );
81
73
  };
82
- W.displayName = "Box";
74
+ I.displayName = "Box";
83
75
  function k(t) {
84
- var i, r, e = "";
85
- if (typeof t == "string" || typeof t == "number") e += t;
76
+ var a, i, r = "";
77
+ if (typeof t == "string" || typeof t == "number") r += t;
86
78
  else if (typeof t == "object") if (Array.isArray(t)) {
87
- var a = t.length;
88
- for (i = 0; i < a; i++) t[i] && (r = k(t[i])) && (e && (e += " "), e += r);
89
- } else for (r in t) t[r] && (e && (e += " "), e += r);
90
- return e;
79
+ var n = t.length;
80
+ for (a = 0; a < n; a++) t[a] && (i = k(t[a])) && (r && (r += " "), r += i);
81
+ } else for (i in t) t[i] && (r && (r += " "), r += i);
82
+ return r;
91
83
  }
92
- function P() {
93
- for (var t, i, r = 0, e = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (i = k(t)) && (e && (e += " "), e += i);
94
- return e;
84
+ function W() {
85
+ for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = k(t)) && (r && (r += " "), r += a);
86
+ return r;
95
87
  }
96
- function q(t) {
97
- var i, r, e = "";
98
- if (typeof t == "string" || typeof t == "number") e += t;
88
+ function E(t) {
89
+ var a, i, r = "";
90
+ if (typeof t == "string" || typeof t == "number") r += t;
99
91
  else if (typeof t == "object") if (Array.isArray(t)) {
100
- var a = t.length;
101
- for (i = 0; i < a; i++) t[i] && (r = q(t[i])) && (e && (e += " "), e += r);
102
- } else for (r in t) t[r] && (e && (e += " "), e += r);
103
- return e;
92
+ var n = t.length;
93
+ for (a = 0; a < n; a++) t[a] && (i = E(t[a])) && (r && (r += " "), r += i);
94
+ } else for (i in t) t[i] && (r && (r += " "), r += i);
95
+ return r;
104
96
  }
105
- function Q() {
106
- for (var t, i, r = 0, e = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (i = q(t)) && (e && (e += " "), e += i);
107
- return e;
97
+ function P() {
98
+ for (var t, a, i = 0, r = "", n = arguments.length; i < n; i++) (t = arguments[i]) && (a = E(t)) && (r && (r += " "), r += a);
99
+ return r;
108
100
  }
109
- const E = ({
110
- ref: t,
111
- as: i = "div",
112
- children: r,
113
- display: e,
114
- m: a,
115
- mt: s,
116
- mr: l,
117
- mb: d,
118
- ml: m,
101
+ const H = ({
102
+ as: t,
103
+ children: a,
104
+ display: i,
105
+ m: r,
106
+ mt: n,
107
+ mr: m,
108
+ mb: o,
109
+ ml: c,
110
+ mx: p,
111
+ my: d,
119
112
  p: f,
120
113
  pt: h,
121
- pr: p,
122
- pb: c,
123
- pl: g,
124
- width: o,
125
- height: v,
126
- position: y,
127
- style: x,
128
- className: b,
129
- href: $,
130
- target: w,
131
- rel: A,
132
- htmlFor: N,
133
- type: T,
134
- name: j,
135
- disabled: B,
136
- ...F
114
+ pr: g,
115
+ pb: l,
116
+ pl: v,
117
+ px: s,
118
+ py: u,
119
+ width: $,
120
+ height: y,
121
+ position: b,
122
+ style: T,
123
+ className: A,
124
+ disabled: w,
125
+ required: N,
126
+ ...B
137
127
  }) => {
138
- const n = {};
139
- e && (n.display = e), o && (n.width = o), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), l && (n.marginRight = `var(--pittorica-space-${l})`), d && (n.marginBottom = `var(--pittorica-space-${d})`), m && (n.marginLeft = `var(--pittorica-space-${m})`), f && (n.padding = `var(--pittorica-space-${f})`), h && (n.paddingTop = `var(--pittorica-space-${h})`), p && (n.paddingRight = `var(--pittorica-space-${p})`), c && (n.paddingBottom = `var(--pittorica-space-${c})`), g && (n.paddingLeft = `var(--pittorica-space-${g})`);
128
+ const L = t || "div", e = {};
129
+ 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})`);
140
130
  const R = {
141
- ...x,
142
- ...n
131
+ ...T,
132
+ ...e
143
133
  };
144
- return /* @__PURE__ */ u(
145
- i,
134
+ return /* @__PURE__ */ x(
135
+ L,
146
136
  {
147
- ref: t,
148
- className: Q("pittorica-box", b),
137
+ className: P("pittorica-box", A),
149
138
  style: R,
150
- href: $,
151
- target: w,
152
- rel: A,
153
- htmlFor: N,
154
- type: T,
155
- name: j,
156
- disabled: B,
157
- ...F,
158
- children: r
139
+ disabled: w,
140
+ required: N,
141
+ ...B,
142
+ children: a
159
143
  }
160
144
  );
161
145
  };
162
- E.displayName = "Box";
163
- const U = ({
146
+ H.displayName = "Box";
147
+ const F = ({
164
148
  children: t,
165
- as: i = "span",
149
+ as: a,
150
+ size: i,
166
151
  weight: r = "regular",
167
- align: e,
168
- truncate: a = !1,
169
- color: s,
170
- className: l,
171
- style: d,
172
- href: m,
173
- target: f,
174
- rel: h,
175
- htmlFor: p,
176
- name: c,
177
- ...g
152
+ align: n,
153
+ truncate: m = !1,
154
+ color: o,
155
+ className: c,
156
+ style: p,
157
+ ...d
178
158
  }) => {
179
- const o = (s == null ? void 0 : s.startsWith("#")) || (s == null ? void 0 : s.startsWith("rgb")) || (s == null ? void 0 : s.startsWith("hsl")), v = /* @__PURE__ */ new Set([
159
+ 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([
180
160
  "danger",
181
161
  "success",
182
162
  "error",
@@ -188,143 +168,164 @@ const U = ({
188
168
  "slate",
189
169
  "blue",
190
170
  "red"
191
- ]), y = (() => {
192
- if (s)
193
- return s === "inherit" ? "inherit" : o ? s : v.has(s) ? `var(--pittorica-${s}-9)` : s;
194
- })(), x = {
195
- ...d,
196
- textAlign: e,
197
- color: y
171
+ ]), l = (() => {
172
+ if (o)
173
+ return o === "inherit" ? "inherit" : h ? o : g.has(o) ? `var(--pittorica-${o}-9)` : o;
174
+ })(), v = i ? typeof i == "string" ? `pittorica-text--size-${i}` : W({
175
+ [`pittorica-text--size-${i.initial}`]: i.initial,
176
+ [`pittorica-text--xs-size-${i.xs}`]: i.xs,
177
+ [`pittorica-text--sm-size-${i.sm}`]: i.sm,
178
+ [`pittorica-text--md-size-${i.md}`]: i.md,
179
+ [`pittorica-text--lg-size-${i.lg}`]: i.lg,
180
+ [`pittorica-text--xl-size-${i.xl}`]: i.xl
181
+ }) : null, s = {
182
+ ...p,
183
+ textAlign: n,
184
+ color: l
198
185
  };
199
- return /* @__PURE__ */ u(
200
- E,
186
+ return /* @__PURE__ */ x(
187
+ H,
201
188
  {
202
- as: i,
203
- className: P(
189
+ as: f,
190
+ className: W(
204
191
  "pittorica-text",
205
- { "pittorica-text--truncate": a },
206
- l
192
+ v,
193
+ { "pittorica-text--truncate": m },
194
+ c
207
195
  ),
208
196
  "data-weight": r,
209
- style: x,
210
- href: m,
211
- target: f,
212
- rel: h,
213
- htmlFor: p,
214
- name: c,
215
- ...g,
197
+ style: s,
198
+ ...d,
216
199
  children: t
217
200
  }
218
201
  );
219
- }, H = G(null), X = () => {
220
- const t = M(H);
202
+ };
203
+ F.displayName = "Text";
204
+ const D = G(null), Q = () => {
205
+ const t = M(D);
221
206
  if (!t)
222
207
  throw new Error("TextArea components must be wrapped in <TextArea.Root />");
223
208
  return t;
224
- }, Y = ({
209
+ }, U = ({
225
210
  children: t,
226
- label: i,
227
- helperText: r,
228
- error: e,
229
- color: a = "indigo",
230
- disabled: s,
231
- name: l,
232
- size: d = "sm",
233
- className: m,
211
+ label: a,
212
+ helperText: i,
213
+ error: r,
214
+ color: n = "source",
215
+ disabled: m,
216
+ name: o,
217
+ required: c,
218
+ size: p = "sm",
219
+ className: d,
234
220
  style: f,
235
- ...h
221
+ as: h,
222
+ ...g
236
223
  }) => {
237
- const p = C(), c = C(), o = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
238
- return /* @__PURE__ */ u(H, { value: { inputId: p, helperId: c, disabled: s, size: d, name: l }, children: /* @__PURE__ */ D(
239
- W,
224
+ const l = S(), v = S(), u = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
225
+ return /* @__PURE__ */ x(
226
+ D,
240
227
  {
241
- ...h,
242
- className: L(
243
- "pittorica-textarea-root",
244
- `pittorica-textarea--${d}`,
245
- m
246
- ),
247
- "data-error": e,
248
- children: [
249
- i && /* @__PURE__ */ u(
250
- U,
251
- {
252
- as: "label",
253
- htmlFor: p,
254
- weight: "medium",
255
- style: {
256
- paddingLeft: "4px",
257
- fontSize: "var(--pittorica-font-size-1)",
258
- marginBottom: "4px",
259
- display: "inline-block"
260
- },
261
- children: i
262
- }
263
- ),
264
- /* @__PURE__ */ u(
265
- "div",
266
- {
267
- className: "pittorica-textarea-wrapper",
268
- "data-disabled": s,
269
- style: {
270
- "--pittorica-source-color": o,
271
- ...f
272
- },
273
- children: t
274
- }
275
- ),
276
- r && /* @__PURE__ */ u("div", { id: c, className: "pittorica-textarea-helper", children: r })
277
- ]
228
+ value: { inputId: l, helperId: v, disabled: m, size: p, name: o, required: c },
229
+ children: /* @__PURE__ */ j(
230
+ I,
231
+ {
232
+ as: h || "div",
233
+ className: z(
234
+ "pittorica-textarea-root",
235
+ `pittorica-textarea--${p}`,
236
+ d
237
+ ),
238
+ "data-error": r,
239
+ ...g,
240
+ children: [
241
+ a && /* @__PURE__ */ j(
242
+ F,
243
+ {
244
+ as: "label",
245
+ htmlFor: l,
246
+ weight: "medium",
247
+ style: {
248
+ paddingLeft: "4px",
249
+ fontSize: "var(--pittorica-font-size-1)",
250
+ marginBottom: "4px",
251
+ display: "inline-block"
252
+ },
253
+ children: [
254
+ a,
255
+ " ",
256
+ c && /* @__PURE__ */ x("span", { "aria-hidden": "true", children: "*" })
257
+ ]
258
+ }
259
+ ),
260
+ /* @__PURE__ */ x(
261
+ "div",
262
+ {
263
+ className: "pittorica-textarea-wrapper",
264
+ "data-disabled": m,
265
+ style: {
266
+ "--pittorica-source-color": u,
267
+ ...f
268
+ },
269
+ children: t
270
+ }
271
+ ),
272
+ i && /* @__PURE__ */ x("div", { id: v, className: "pittorica-textarea-helper", children: i })
273
+ ]
274
+ }
275
+ )
278
276
  }
279
- ) });
280
- }, Z = ({
277
+ );
278
+ }, X = ({
281
279
  className: t,
282
- autoResize: i = !1,
283
- onChange: r,
284
- value: e,
285
- defaultValue: a,
286
- name: s,
287
- ...l
280
+ autoResize: a = !1,
281
+ onChange: i,
282
+ value: r,
283
+ defaultValue: n,
284
+ name: m,
285
+ required: o,
286
+ // Add required prop here
287
+ ...c
288
288
  }) => {
289
289
  const {
290
- inputId: d,
291
- helperId: m,
290
+ inputId: p,
291
+ helperId: d,
292
292
  disabled: f,
293
293
  name: h
294
- } = X(), p = J(null), c = () => {
294
+ } = Q(), g = J(null), l = () => {
295
295
  if (globalThis.window === void 0) return;
296
- const o = p.current;
297
- !o || !i || (o.style.height = "auto", o.style.height = `${o.scrollHeight}px`);
296
+ const s = g.current;
297
+ !s || !a || (s.style.height = "auto", s.style.height = `${s.scrollHeight}px`);
298
298
  };
299
299
  return K(() => {
300
- i && c();
301
- }, [e, a, i]), /* @__PURE__ */ u(
300
+ a && l();
301
+ }, [r, n, a]), /* @__PURE__ */ x(
302
302
  "textarea",
303
303
  {
304
- name: s ?? h,
305
- ...l,
306
- id: d,
307
- ref: p,
308
- value: e,
309
- defaultValue: a,
304
+ name: m ?? h,
305
+ ...c,
306
+ id: p,
307
+ ref: g,
308
+ value: r,
309
+ defaultValue: n,
310
310
  disabled: f,
311
- "aria-describedby": m,
312
- onChange: (o) => {
313
- i && c(), r == null || r(o);
311
+ required: o,
312
+ "aria-describedby": d,
313
+ onChange: (s) => {
314
+ a && l(), i == null || i(s);
314
315
  },
315
- className: L("pittorica-textarea-input", t),
316
+ className: z("pittorica-textarea-input", t),
316
317
  style: {
317
- overflow: i ? "hidden" : void 0,
318
- ...l.style
318
+ overflow: a ? "hidden" : void 0,
319
+ ...c.style
319
320
  }
320
321
  }
321
322
  );
322
- }, z = {
323
- Root: Y,
324
- Content: Z
323
+ }, _ = {
324
+ Root: U,
325
+ Content: X
325
326
  };
326
327
  export {
327
- z as TextArea,
328
- Z as TextAreaContent,
329
- Y as TextAreaRoot
328
+ _ as TextArea,
329
+ X as TextAreaContent,
330
+ U as TextAreaRoot
330
331
  };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@pittorica/text-area-react",
3
- "version": "0.24.0",
3
+ "version": "0.26.0",
4
+ "homepage": "https://pittorica.dcdavidev.me",
4
5
  "type": "module",
5
6
  "main": "./dist/index.js",
6
7
  "module": "./dist/index.js",
@@ -10,8 +11,8 @@
10
11
  ],
11
12
  "dependencies": {
12
13
  "clsx": "^2.1.1",
13
- "@pittorica/box-react": "0.24.0",
14
- "@pittorica/text-react": "0.24.0"
14
+ "@pittorica/box-react": "0.26.0",
15
+ "@pittorica/text-react": "0.26.0"
15
16
  },
16
17
  "devDependencies": {
17
18
  "@testing-library/jest-dom": "^6.9.1",
@@ -21,11 +22,11 @@
21
22
  "@vitejs/plugin-react": "^4.0.0",
22
23
  "jsdom": "^22.0.0",
23
24
  "typescript": "^5.0.0",
24
- "vite": "^5.0.0",
25
- "vitest": "^2.1.9",
26
- "@pittorica/flex-react": "0.24.0",
27
- "@pittorica/theme-react": "0.24.0",
28
- "pittorica": "0.24.0"
25
+ "vite": "^6.4.1",
26
+ "vitest": "^3.2.4",
27
+ "@pittorica/flex-react": "0.26.0",
28
+ "@pittorica/theme-react": "0.26.0",
29
+ "pittorica": "0.26.0"
29
30
  },
30
31
  "peerDependencies": {
31
32
  "react": ">=19",
@@ -35,8 +36,7 @@
35
36
  "build": "npm run clean && npm run build:js && npm run build:types",
36
37
  "build:js": "vite build",
37
38
  "build:types": "tsc -p tsconfig.json",
38
- "clean": "rm -rf dist",
39
- "dev": "vite",
39
+ "clean": "rm -rf dist *.tsbuildinfo",
40
40
  "test": "vitest run",
41
41
  "test:watch": "vitest"
42
42
  }
package/dist/TeaxtArea.test.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- import '@testing-library/jest-dom';
5
- //# sourceMappingURL=TeaxtArea.test.d.ts.map
package/dist/TeaxtArea.test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"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 DELETED
@@ -1,16 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { TextArea } from './TextArea.js';
3
- /**
4
- * Storybook configuration for Outlined TextArea.
5
- * Supports 5 compact sizes and auto-resizing logic.
6
- */
7
- declare const meta: Meta<typeof TextArea.Root>;
8
- export default meta;
9
- export declare const Basic: StoryObj<typeof TextArea.Root>;
10
- /**
11
- * Visualization of the 5 sizes scaling min-height and typography.
12
- */
13
- export declare const AllSizes: StoryObj<typeof TextArea.Root>;
14
- export declare const AutoResizing: StoryObj<typeof TextArea.Root>;
15
- export declare const States: StoryObj<typeof TextArea.Root>;
16
- //# sourceMappingURL=TextArea.stories.d.ts.map
package/dist/TextArea.stories.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"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"}