@pittorica/text-field-react 0.24.0 → 0.25.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 (4) hide show
  1. package/dist/TextField.d.ts +35 -13
  2. package/dist/TextField.d.ts.map +1 -1
  3. package/dist/index.js +214 -217
  4. package/package.json +6 -7
package/dist/TextField.d.ts CHANGED
@@ -1,8 +1,11 @@
1
- import { type ReactNode, type Ref } 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 TextFieldSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
- export interface TextFieldRootProps extends BoxProps {
5
+ /**
6
+ * Fix TS2314 & TS2312: Use 'type' alias for intersection with polymorphic BoxProps<E>.
7
+ */
8
+ export type TextFieldRootProps<E extends ElementType = 'div'> = BoxProps<E> & {
6
9
  label?: ReactNode;
7
10
  helperText?: ReactNode;
8
11
  error?: boolean;
@@ -11,28 +14,47 @@ export interface TextFieldRootProps extends BoxProps {
11
14
  name?: string;
12
15
  /** @default 'sm' */
13
16
  size?: TextFieldSize;
14
- }
17
+ };
15
18
  /**
16
19
  * Root container for TextField. Orchestrates layout, context, and sizes.
17
20
  */
18
- export declare const TextFieldRoot: ({ children, label, helperText, error, color, disabled, name, size, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
21
+ export declare const TextFieldRoot: {
22
+ <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
23
+ displayName: string;
24
+ };
25
+ /**
26
+ * Fix ESLint: @typescript-eslint/no-empty-object-type
27
+ * Changed from interface to type alias.
28
+ */
19
29
  export type TextFieldInputProps = React.InputHTMLAttributes<HTMLInputElement>;
20
30
  /**
21
31
  * Native input element with semantic context and responsive sizing.
22
32
  */
23
- export declare const TextFieldInput: ({ className, ref, ...props }: TextFieldInputProps & {
24
- ref?: Ref<HTMLInputElement>;
25
- }) => import("react/jsx-runtime").JSX.Element;
33
+ export declare const TextFieldInput: {
34
+ ({ className, ...props }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
35
+ displayName: string;
36
+ };
26
37
  /**
27
38
  * Visual slot for icons or interactive elements.
39
+ * Aligned with the polymorphic Box architecture.
28
40
  */
29
- export declare const TextFieldSlot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
41
+ export declare const TextFieldSlot: {
42
+ <E extends ElementType = "div">({ children, className, as, ...props }: BoxProps<E>): import("react/jsx-runtime").JSX.Element;
43
+ displayName: string;
44
+ };
30
45
  export declare const TextField: {
31
- Root: ({ children, label, helperText, error, color, disabled, name, size, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
32
- Input: ({ className, ref, ...props }: TextFieldInputProps & {
33
- ref?: Ref<HTMLInputElement>;
34
- }) => import("react/jsx-runtime").JSX.Element;
35
- Slot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
46
+ Root: {
47
+ <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
48
+ displayName: string;
49
+ };
50
+ Input: {
51
+ ({ className, ...props }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
52
+ displayName: string;
53
+ };
54
+ Slot: {
55
+ <E extends ElementType = "div">({ children, className, as, ...props }: BoxProps<E>): import("react/jsx-runtime").JSX.Element;
56
+ displayName: string;
57
+ };
36
58
  };
37
59
  export {};
38
60
  //# sourceMappingURL=TextField.d.ts.map
package/dist/TextField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAsBtD,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,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,aAAa,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,iGAY3B,kBAAkB,4CAwDpB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,8BAI5B,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,4CAcvD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,mCAAmC,QAAQ,4CAIxE,CAAC;AAEF,eAAO,MAAM,SAAS;4GA9FnB,kBAAkB;0CAoElB,mBAAmB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;KAAE;8CAoBS,QAAQ;CAUxE,CAAC"}
1
+ {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAuBtD;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC5E,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,aAAa,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,+GAahD,kBAAkB,CAAC,CAAC,CAAC;;CA2DvB,CAAC;AAIF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CAarB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;CAWb,CAAC;AAEF,eAAO,MAAM,SAAS;;SA/HQ,CAAC,SAAS,WAAW,+GAahD,kBAAkB,CAAC,CAAC,CAAC;;;;kCA2ErB,mBAAmB;;;;SAqBQ,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;;CAiBb,CAAC"}
package/dist/index.js CHANGED
@@ -1,182 +1,158 @@
1
- import { jsx as h, jsxs as D } from "react/jsx-runtime";
2
- import { createContext as G, useId as j, use as H } from "react";
3
- function L(t) {
4
- var r, i, e = "";
5
- if (typeof t == "string" || typeof t == "number") e += t;
1
+ import { jsx as u, jsxs as J } from "react/jsx-runtime";
2
+ import { createContext as K, useId as L, use as M } from "react";
3
+ function S(t) {
4
+ var r, a, i = "";
5
+ if (typeof t == "string" || typeof t == "number") i += t;
6
6
  else if (typeof t == "object") if (Array.isArray(t)) {
7
- var a = t.length;
8
- for (r = 0; r < a; r++) t[r] && (i = L(t[r])) && (e && (e += " "), e += i);
9
- } else for (i in t) t[i] && (e && (e += " "), e += i);
10
- return e;
7
+ var p = t.length;
8
+ for (r = 0; r < p; r++) t[r] && (a = S(t[r])) && (i && (i += " "), i += a);
9
+ } else for (a in t) t[a] && (i && (i += " "), i += a);
10
+ return i;
11
11
  }
12
- function S() {
13
- for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = L(t)) && (e && (e += " "), e += r);
14
- return e;
12
+ function B() {
13
+ for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = S(t)) && (i && (i += " "), i += r);
14
+ return i;
15
15
  }
16
- function W(t) {
17
- var r, i, e = "";
18
- if (typeof t == "string" || typeof t == "number") e += t;
16
+ function j(t) {
17
+ var r, a, i = "";
18
+ if (typeof t == "string" || typeof t == "number") i += t;
19
19
  else if (typeof t == "object") if (Array.isArray(t)) {
20
- var a = t.length;
21
- for (r = 0; r < a; r++) t[r] && (i = W(t[r])) && (e && (e += " "), e += i);
22
- } else for (i in t) t[i] && (e && (e += " "), e += i);
23
- return e;
20
+ var p = t.length;
21
+ for (r = 0; r < p; r++) t[r] && (a = j(t[r])) && (i && (i += " "), i += a);
22
+ } else for (a in t) t[a] && (i && (i += " "), i += a);
23
+ return i;
24
24
  }
25
- function J() {
26
- for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = W(t)) && (e && (e += " "), e += r);
27
- return e;
25
+ function O() {
26
+ for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = j(t)) && (i && (i += " "), i += r);
27
+ return i;
28
28
  }
29
- const C = ({
30
- ref: t,
31
- as: r = "div",
32
- children: i,
33
- display: e,
34
- m: a,
35
- mt: s,
36
- mr: o,
37
- mb: p,
38
- ml: d,
39
- p: m,
40
- pt: f,
41
- pr: c,
42
- pb: l,
43
- pl: u,
44
- width: g,
45
- height: v,
46
- position: y,
47
- style: x,
48
- className: b,
49
- href: $,
50
- target: F,
51
- rel: w,
52
- htmlFor: N,
53
- type: T,
54
- name: A,
55
- disabled: R,
56
- ...B
29
+ const z = ({
30
+ as: t,
31
+ children: r,
32
+ display: a,
33
+ m: i,
34
+ mt: p,
35
+ mr: s,
36
+ mb: o,
37
+ ml: l,
38
+ mx: n,
39
+ my: c,
40
+ p: f,
41
+ pt: v,
42
+ pr: m,
43
+ pb: g,
44
+ pl: h,
45
+ px: d,
46
+ py: x,
47
+ width: $,
48
+ height: y,
49
+ position: b,
50
+ style: T,
51
+ className: N,
52
+ disabled: w,
53
+ ...F
57
54
  }) => {
58
- const n = {};
59
- e && (n.display = e), g && (n.width = g), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), o && (n.marginRight = `var(--pittorica-space-${o})`), p && (n.marginBottom = `var(--pittorica-space-${p})`), d && (n.marginLeft = `var(--pittorica-space-${d})`), m && (n.padding = `var(--pittorica-space-${m})`), f && (n.paddingTop = `var(--pittorica-space-${f})`), c && (n.paddingRight = `var(--pittorica-space-${c})`), l && (n.paddingBottom = `var(--pittorica-space-${l})`), u && (n.paddingLeft = `var(--pittorica-space-${u})`);
60
- const I = {
61
- ...x,
62
- ...n
55
+ const R = t || "div", e = {};
56
+ a && (e.display = a), $ && (e.width = $), y && (e.height = y), b && (e.position = b), i && (e.margin = `var(--pittorica-space-${i})`), p && (e.marginTop = `var(--pittorica-space-${p})`), s && (e.marginRight = `var(--pittorica-space-${s})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), l && (e.marginLeft = `var(--pittorica-space-${l})`), n && (e.marginLeft = `var(--pittorica-space-${n})`, e.marginRight = `var(--pittorica-space-${n})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), v && (e.paddingTop = `var(--pittorica-space-${v})`), m && (e.paddingRight = `var(--pittorica-space-${m})`), g && (e.paddingBottom = `var(--pittorica-space-${g})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`), d && (e.paddingLeft = `var(--pittorica-space-${d})`, e.paddingRight = `var(--pittorica-space-${d})`), x && (e.paddingTop = `var(--pittorica-space-${x})`, e.paddingBottom = `var(--pittorica-space-${x})`);
57
+ const A = {
58
+ ...T,
59
+ ...e
63
60
  };
64
- return /* @__PURE__ */ h(
65
- r,
61
+ return /* @__PURE__ */ u(
62
+ R,
66
63
  {
67
- ref: t,
68
- className: J("pittorica-box", b),
69
- style: I,
70
- href: $,
71
- target: F,
72
- rel: w,
73
- htmlFor: N,
74
- type: T,
75
- name: A,
76
- disabled: R,
77
- ...B,
78
- children: i
64
+ className: O("pittorica-box", N),
65
+ style: A,
66
+ disabled: w,
67
+ ...F,
68
+ children: r
79
69
  }
80
70
  );
81
71
  };
82
- C.displayName = "Box";
83
- function k(t) {
84
- var r, i, e = "";
85
- if (typeof t == "string" || typeof t == "number") e += t;
72
+ z.displayName = "Box";
73
+ function W(t) {
74
+ var r, a, i = "";
75
+ if (typeof t == "string" || typeof t == "number") i += t;
86
76
  else if (typeof t == "object") if (Array.isArray(t)) {
87
- var a = t.length;
88
- for (r = 0; r < a; r++) t[r] && (i = k(t[r])) && (e && (e += " "), e += i);
89
- } else for (i in t) t[i] && (e && (e += " "), e += i);
90
- return e;
77
+ var p = t.length;
78
+ for (r = 0; r < p; r++) t[r] && (a = W(t[r])) && (i && (i += " "), i += a);
79
+ } else for (a in t) t[a] && (i && (i += " "), i += a);
80
+ return i;
91
81
  }
92
- function K() {
93
- for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = k(t)) && (e && (e += " "), e += r);
94
- return e;
82
+ function I() {
83
+ for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = W(t)) && (i && (i += " "), i += r);
84
+ return i;
95
85
  }
96
- function q(t) {
97
- var r, i, e = "";
98
- if (typeof t == "string" || typeof t == "number") e += t;
86
+ function C(t) {
87
+ var r, a, i = "";
88
+ if (typeof t == "string" || typeof t == "number") i += t;
99
89
  else if (typeof t == "object") if (Array.isArray(t)) {
100
- var a = t.length;
101
- for (r = 0; r < a; r++) t[r] && (i = q(t[r])) && (e && (e += " "), e += i);
102
- } else for (i in t) t[i] && (e && (e += " "), e += i);
103
- return e;
90
+ var p = t.length;
91
+ for (r = 0; r < p; r++) t[r] && (a = C(t[r])) && (i && (i += " "), i += a);
92
+ } else for (a in t) t[a] && (i && (i += " "), i += a);
93
+ return i;
104
94
  }
105
- function M() {
106
- for (var t, r, i = 0, e = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (r = q(t)) && (e && (e += " "), e += r);
107
- return e;
95
+ function P() {
96
+ for (var t, r, a = 0, i = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (r = C(t)) && (i && (i += " "), i += r);
97
+ return i;
108
98
  }
109
- const z = ({
110
- ref: t,
111
- as: r = "div",
112
- children: i,
113
- display: e,
114
- m: a,
115
- mt: s,
116
- mr: o,
117
- mb: p,
118
- ml: d,
119
- p: m,
120
- pt: f,
121
- pr: c,
122
- pb: l,
123
- pl: u,
124
- width: g,
125
- height: v,
126
- position: y,
127
- style: x,
128
- className: b,
129
- href: $,
130
- target: F,
131
- rel: w,
132
- htmlFor: N,
133
- type: T,
134
- name: A,
135
- disabled: R,
136
- ...B
99
+ const k = ({
100
+ as: t,
101
+ children: r,
102
+ display: a,
103
+ m: i,
104
+ mt: p,
105
+ mr: s,
106
+ mb: o,
107
+ ml: l,
108
+ mx: n,
109
+ my: c,
110
+ p: f,
111
+ pt: v,
112
+ pr: m,
113
+ pb: g,
114
+ pl: h,
115
+ px: d,
116
+ py: x,
117
+ width: $,
118
+ height: y,
119
+ position: b,
120
+ style: T,
121
+ className: N,
122
+ disabled: w,
123
+ ...F
137
124
  }) => {
138
- const n = {};
139
- e && (n.display = e), g && (n.width = g), v && (n.height = v), y && (n.position = y), a && (n.margin = `var(--pittorica-space-${a})`), s && (n.marginTop = `var(--pittorica-space-${s})`), o && (n.marginRight = `var(--pittorica-space-${o})`), p && (n.marginBottom = `var(--pittorica-space-${p})`), d && (n.marginLeft = `var(--pittorica-space-${d})`), m && (n.padding = `var(--pittorica-space-${m})`), f && (n.paddingTop = `var(--pittorica-space-${f})`), c && (n.paddingRight = `var(--pittorica-space-${c})`), l && (n.paddingBottom = `var(--pittorica-space-${l})`), u && (n.paddingLeft = `var(--pittorica-space-${u})`);
140
- const I = {
141
- ...x,
142
- ...n
125
+ const R = t || "div", e = {};
126
+ a && (e.display = a), $ && (e.width = $), y && (e.height = y), b && (e.position = b), i && (e.margin = `var(--pittorica-space-${i})`), p && (e.marginTop = `var(--pittorica-space-${p})`), s && (e.marginRight = `var(--pittorica-space-${s})`), o && (e.marginBottom = `var(--pittorica-space-${o})`), l && (e.marginLeft = `var(--pittorica-space-${l})`), n && (e.marginLeft = `var(--pittorica-space-${n})`, e.marginRight = `var(--pittorica-space-${n})`), c && (e.marginTop = `var(--pittorica-space-${c})`, e.marginBottom = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), v && (e.paddingTop = `var(--pittorica-space-${v})`), m && (e.paddingRight = `var(--pittorica-space-${m})`), g && (e.paddingBottom = `var(--pittorica-space-${g})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`), d && (e.paddingLeft = `var(--pittorica-space-${d})`, e.paddingRight = `var(--pittorica-space-${d})`), x && (e.paddingTop = `var(--pittorica-space-${x})`, e.paddingBottom = `var(--pittorica-space-${x})`);
127
+ const A = {
128
+ ...T,
129
+ ...e
143
130
  };
144
- return /* @__PURE__ */ h(
145
- r,
131
+ return /* @__PURE__ */ u(
132
+ R,
146
133
  {
147
- ref: t,
148
- className: M("pittorica-box", b),
149
- style: I,
150
- href: $,
151
- target: F,
152
- rel: w,
153
- htmlFor: N,
154
- type: T,
155
- name: A,
156
- disabled: R,
157
- ...B,
158
- children: i
134
+ className: P("pittorica-box", N),
135
+ style: A,
136
+ disabled: w,
137
+ ...F,
138
+ children: r
159
139
  }
160
140
  );
161
141
  };
162
- z.displayName = "Box";
163
- const O = ({
142
+ k.displayName = "Box";
143
+ const E = ({
164
144
  children: t,
165
- as: r = "span",
145
+ as: r,
146
+ size: a,
166
147
  weight: i = "regular",
167
- align: e,
168
- truncate: a = !1,
169
- color: s,
170
- className: o,
171
- style: p,
172
- href: d,
173
- target: m,
174
- rel: f,
175
- htmlFor: c,
176
- name: l,
177
- ...u
148
+ align: p,
149
+ truncate: s = !1,
150
+ color: o,
151
+ className: l,
152
+ style: n,
153
+ ...c
178
154
  }) => {
179
- const g = (s == null ? void 0 : s.startsWith("#")) || (s == null ? void 0 : s.startsWith("rgb")) || (s == null ? void 0 : s.startsWith("hsl")), v = /* @__PURE__ */ new Set([
155
+ const f = r || "span", v = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), m = /* @__PURE__ */ new Set([
180
156
  "danger",
181
157
  "success",
182
158
  "error",
@@ -188,71 +164,78 @@ const O = ({
188
164
  "slate",
189
165
  "blue",
190
166
  "red"
191
- ]), y = (() => {
192
- if (s)
193
- return s === "inherit" ? "inherit" : g ? s : v.has(s) ? `var(--pittorica-${s}-9)` : s;
194
- })(), x = {
195
- ...p,
196
- textAlign: e,
197
- color: y
167
+ ]), g = (() => {
168
+ if (o)
169
+ return o === "inherit" ? "inherit" : v ? o : m.has(o) ? `var(--pittorica-${o}-9)` : o;
170
+ })(), h = a ? typeof a == "string" ? `pittorica-text--size-${a}` : I({
171
+ [`pittorica-text--size-${a.initial}`]: a.initial,
172
+ [`pittorica-text--xs-size-${a.xs}`]: a.xs,
173
+ [`pittorica-text--sm-size-${a.sm}`]: a.sm,
174
+ [`pittorica-text--md-size-${a.md}`]: a.md,
175
+ [`pittorica-text--lg-size-${a.lg}`]: a.lg,
176
+ [`pittorica-text--xl-size-${a.xl}`]: a.xl
177
+ }) : null, d = {
178
+ ...n,
179
+ textAlign: p,
180
+ color: g
198
181
  };
199
- return /* @__PURE__ */ h(
200
- z,
182
+ return /* @__PURE__ */ u(
183
+ k,
201
184
  {
202
- as: r,
203
- className: K(
185
+ as: f,
186
+ className: I(
204
187
  "pittorica-text",
205
- { "pittorica-text--truncate": a },
206
- o
188
+ h,
189
+ { "pittorica-text--truncate": s },
190
+ l
207
191
  ),
208
192
  "data-weight": i,
209
- style: x,
210
- href: d,
211
- target: m,
212
- rel: f,
213
- htmlFor: c,
214
- name: l,
215
- ...u,
193
+ style: d,
194
+ ...c,
216
195
  children: t
217
196
  }
218
197
  );
219
- }, E = G(null), P = () => {
220
- const t = H(E);
198
+ };
199
+ E.displayName = "Text";
200
+ const q = K(null), Q = () => {
201
+ const t = M(q);
221
202
  if (!t)
222
203
  throw new Error(
223
204
  "TextField components must be wrapped in <TextField.Root />"
224
205
  );
225
206
  return t;
226
- }, Q = ({
207
+ }, D = ({
227
208
  children: t,
228
209
  label: r,
229
- helperText: i,
230
- error: e,
231
- color: a = "indigo",
210
+ helperText: a,
211
+ error: i,
212
+ color: p = "indigo",
232
213
  disabled: s,
233
214
  name: o,
234
- size: p = "sm",
235
- className: d,
236
- style: m,
237
- ...f
215
+ size: l = "sm",
216
+ className: n,
217
+ style: c,
218
+ as: f,
219
+ ...v
238
220
  }) => {
239
- const c = j(), l = j(), g = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
240
- return /* @__PURE__ */ h(E, { value: { inputId: c, helperId: l, disabled: s, size: p, name: o }, children: /* @__PURE__ */ D(
241
- C,
221
+ const m = L(), g = L(), d = p !== "inherit" && !(p != null && p.startsWith("#")) && !(p != null && p.startsWith("rgb")) ? `var(--pittorica-${p}-9)` : p;
222
+ return /* @__PURE__ */ u(q, { value: { inputId: m, helperId: g, disabled: s, size: l, name: o }, children: /* @__PURE__ */ J(
223
+ z,
242
224
  {
243
- ...f,
244
- className: S(
225
+ as: f || "div",
226
+ className: B(
245
227
  "pittorica-text-field-root",
246
- `pittorica-text-field--${p}`,
247
- d
228
+ `pittorica-text-field--${l}`,
229
+ n
248
230
  ),
249
- "data-error": e,
231
+ "data-error": i,
232
+ ...v,
250
233
  children: [
251
- r && /* @__PURE__ */ h(
252
- O,
234
+ r && /* @__PURE__ */ u(
235
+ E,
253
236
  {
254
237
  as: "label",
255
- htmlFor: c,
238
+ htmlFor: m,
256
239
  weight: "medium",
257
240
  style: {
258
241
  paddingLeft: "4px",
@@ -263,48 +246,62 @@ const O = ({
263
246
  children: r
264
247
  }
265
248
  ),
266
- /* @__PURE__ */ h(
249
+ /* @__PURE__ */ u(
267
250
  "div",
268
251
  {
269
252
  className: "pittorica-text-field-input-wrapper",
270
253
  "data-disabled": s,
271
254
  style: {
272
- "--pittorica-source-color": g,
273
- ...m
255
+ "--pittorica-source-color": d,
256
+ ...c
274
257
  },
275
258
  children: t
276
259
  }
277
260
  ),
278
- i && /* @__PURE__ */ h("div", { id: l, className: "pittorica-text-field-helper", children: i })
261
+ a && /* @__PURE__ */ u("div", { id: g, className: "pittorica-text-field-helper", children: a })
279
262
  ]
280
263
  }
281
264
  ) });
282
- }, U = ({
265
+ }, G = ({
283
266
  className: t,
284
- ref: r,
285
- ...i
267
+ ...r
286
268
  }) => {
287
- const { inputId: e, helperId: a, disabled: s, name: o } = P();
288
- return /* @__PURE__ */ h(
269
+ const { inputId: a, helperId: i, disabled: p, name: s } = Q();
270
+ return /* @__PURE__ */ u(
289
271
  "input",
290
272
  {
291
- name: o,
292
- ...i,
293
- id: e,
294
- "aria-describedby": a,
295
- disabled: s,
296
- ref: r,
297
- className: S("pittorica-text-field-input", t)
273
+ name: s,
274
+ ...r,
275
+ id: a,
276
+ "aria-describedby": i,
277
+ disabled: p,
278
+ className: B("pittorica-text-field-input", t)
298
279
  }
299
280
  );
300
- }, V = ({ children: t, className: r, ...i }) => /* @__PURE__ */ h("div", { className: S("pittorica-text-field-slot", r), ...i, children: t }), Z = {
301
- Root: Q,
302
- Input: U,
303
- Slot: V
281
+ }, H = ({
282
+ children: t,
283
+ className: r,
284
+ as: a,
285
+ ...i
286
+ }) => /* @__PURE__ */ u(
287
+ z,
288
+ {
289
+ as: a || "div",
290
+ className: B("pittorica-text-field-slot", r),
291
+ ...i,
292
+ children: t
293
+ }
294
+ ), X = {
295
+ Root: D,
296
+ Input: G,
297
+ Slot: H
304
298
  };
299
+ D.displayName = "TextField.Root";
300
+ G.displayName = "TextField.Input";
301
+ H.displayName = "TextField.Slot";
305
302
  export {
306
- Z as TextField,
307
- U as TextFieldInput,
308
- Q as TextFieldRoot,
309
- V as TextFieldSlot
303
+ X as TextField,
304
+ G as TextFieldInput,
305
+ D as TextFieldRoot,
306
+ H as TextFieldSlot
310
307
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pittorica/text-field-react",
3
- "version": "0.24.0",
3
+ "version": "0.25.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -10,8 +10,8 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "clsx": "^2.1.1",
13
- "@pittorica/box-react": "0.24.0",
14
- "@pittorica/text-react": "0.24.0"
13
+ "@pittorica/text-react": "0.25.0",
14
+ "@pittorica/box-react": "0.25.0"
15
15
  },
16
16
  "devDependencies": {
17
17
  "@tabler/icons-react": "^3.36.1",
@@ -24,9 +24,9 @@
24
24
  "typescript": "^5.0.0",
25
25
  "vite": "^5.0.0",
26
26
  "vitest": "^2.1.9",
27
- "@pittorica/flex-react": "0.24.0",
28
- "@pittorica/theme-react": "0.24.0",
29
- "pittorica": "0.24.0"
27
+ "@pittorica/flex-react": "0.25.0",
28
+ "@pittorica/theme-react": "0.25.0",
29
+ "pittorica": "0.25.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": ">=19",
@@ -37,7 +37,6 @@
37
37
  "build:js": "vite build",
38
38
  "build:types": "tsc -p tsconfig.json",
39
39
  "clean": "rm -rf dist",
40
- "dev": "vite",
41
40
  "test": "vitest run",
42
41
  "test:watch": "vitest"
43
42
  }