@pittorica/text-field-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/TextField.d.ts +39 -13
  3. package/dist/TextField.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 +257 -238
  7. package/package.json +10 -10
  8. package/dist/TextField.stories.d.ts +0 -16
  9. package/dist/TextField.stories.d.ts.map +0 -1
  10. package/dist/TextField.test.d.ts +0 -5
  11. package/dist/TextField.test.d.ts.map +0 -1
package/README.md CHANGED
@@ -4,16 +4,33 @@ The `TextField` component.
4
4
 
5
5
  ## Installation
6
6
 
7
- ```bash
7
+ \`\`\`bash
8
8
  npm install @pittorica/text-field-react
9
- ```
9
+ \`\`\`
10
10
 
11
11
  ## Usage
12
12
 
13
- ```jsx
13
+ \`\`\`jsx
14
14
  import { TextField } from '@pittorica/text-field-react';
15
- // TODO: Add usage example
16
- ```
15
+
16
+ function MyForm() {
17
+ return (
18
+
19
+ <form>
20
+ <TextField.Root
21
+ label="Username"
22
+ name="username"
23
+ required // Mark as required
24
+ color="source" // Default color is now 'source'
25
+ size="sm"
26
+ helperText="Enter your username." >
27
+ <TextField.Input placeholder="e.g. john_doe" />
28
+ </TextField.Root>
29
+ <button type="submit">Submit</button>
30
+ </form>
31
+ );
32
+ }
33
+ \`\`\`
17
34
 
18
35
  ## License
19
36
 
package/dist/TextField.d.ts CHANGED
@@ -1,38 +1,64 @@
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;
9
12
  color?: PittoricaColor;
10
13
  disabled?: boolean;
11
14
  name?: string;
15
+ required?: boolean;
12
16
  /** @default 'sm' */
13
17
  size?: TextFieldSize;
14
- }
18
+ };
15
19
  /**
16
20
  * Root container for TextField. Orchestrates layout, context, and sizes.
17
21
  */
18
- export declare const TextFieldRoot: ({ children, label, helperText, error, color, disabled, name, size, className, style, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const TextFieldRoot: {
23
+ <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
24
+ displayName: string;
25
+ };
26
+ /**
27
+ * Fix ESLint: @typescript-eslint/no-empty-object-type
28
+ * Changed from interface to type alias.
29
+ */
19
30
  export type TextFieldInputProps = React.InputHTMLAttributes<HTMLInputElement>;
20
31
  /**
21
32
  * Native input element with semantic context and responsive sizing.
22
33
  */
23
- export declare const TextFieldInput: ({ className, ref, ...props }: TextFieldInputProps & {
24
- ref?: Ref<HTMLInputElement>;
25
- }) => import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextFieldInput: {
35
+ ({ className, ...props }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
36
+ displayName: string;
37
+ };
26
38
  /**
27
39
  * Visual slot for icons or interactive elements.
40
+ * Aligned with the polymorphic Box architecture.
28
41
  */
29
- export declare const TextFieldSlot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
42
+ export declare const TextFieldSlot: {
43
+ <E extends ElementType = "div">({ children, className, as, ...props }: BoxProps<E>): import("react/jsx-runtime").JSX.Element;
44
+ displayName: string;
45
+ };
30
46
  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;
47
+ <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
48
+ displayName: string;
49
+ } & {
50
+ Root: {
51
+ <E extends ElementType = "div">({ children, label, helperText, error, color, disabled, name, required, size, className, style, as, ...props }: TextFieldRootProps<E>): import("react/jsx-runtime").JSX.Element;
52
+ displayName: string;
53
+ };
54
+ Input: {
55
+ ({ className, ...props }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
56
+ displayName: string;
57
+ };
58
+ Slot: {
59
+ <E extends ElementType = "div">({ children, className, as, ...props }: BoxProps<E>): import("react/jsx-runtime").JSX.Element;
60
+ displayName: string;
61
+ };
36
62
  };
37
63
  export {};
38
64
  //# 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;AAwBtD;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;CA6DvB,CAAC;AAIF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CAoBrB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;CAWb,CAAC;AAEF,eAAO,MAAM,SAAS;KAzIQ,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;;;SAdM,CAAC,SAAS,WAAW,yHAchD,kBAAkB,CAAC,CAAC,CAAC;;;;kCA6ErB,mBAAmB;;;;SA4BQ,CAAC,SAAS,WAAW,iDAKhD,QAAQ,CAAC,CAAC,CAAC;;;CAiBZ,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- export type { TextFieldInputProps, TextFieldRootProps } from './TextField.js';
2
- export { TextField, TextFieldInput, TextFieldRoot, TextFieldSlot, } from './TextField.js';
1
+ export * from './TextField.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,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EACL,SAAS,EACT,cAAc,EACd,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
package/dist/index.js CHANGED
@@ -1,182 +1,162 @@
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 x, jsxs as q } from "react/jsx-runtime";
2
+ import { createContext as K, useId as I, use as M } from "react";
3
+ function W(t) {
4
+ var e, r, 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 (e = 0; e < p; e++) t[e] && (r = W(t[e])) && (i && (i += " "), i += r);
9
+ } else for (r in t) t[r] && (i && (i += " "), i += r);
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 L() {
13
+ for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = W(t)) && (i && (i += " "), i += e);
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 C(t) {
17
+ var e, r, 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 (e = 0; e < p; e++) t[e] && (r = C(t[e])) && (i && (i += " "), i += r);
22
+ } else for (r in t) t[r] && (i && (i += " "), i += r);
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 P() {
26
+ for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = C(t)) && (i && (i += " "), i += e);
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,
29
+ const S = ({
30
+ as: t,
31
+ children: e,
32
+ display: r,
33
+ m: i,
34
+ mt: p,
35
+ mr: s,
36
+ mb: o,
38
37
  ml: d,
39
- p: m,
38
+ mx: n,
39
+ my: c,
40
+ p: u,
40
41
  pt: f,
41
- pr: c,
42
+ pr: v,
42
43
  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
44
+ pl: m,
45
+ px: g,
46
+ py: h,
47
+ width: $,
48
+ height: y,
49
+ position: b,
50
+ style: T,
51
+ className: N,
52
+ disabled: w,
53
+ required: R,
54
+ ...F
57
55
  }) => {
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
56
+ const A = t || "div", a = {};
57
+ r && (a.display = r), $ && (a.width = $), y && (a.height = y), b && (a.position = b), i && (a.margin = `var(--pittorica-space-${i})`), p && (a.marginTop = `var(--pittorica-space-${p})`), s && (a.marginRight = `var(--pittorica-space-${s})`), o && (a.marginBottom = `var(--pittorica-space-${o})`), d && (a.marginLeft = `var(--pittorica-space-${d})`), n && (a.marginLeft = `var(--pittorica-space-${n})`, a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginTop = `var(--pittorica-space-${c})`, a.marginBottom = `var(--pittorica-space-${c})`), u && (a.padding = `var(--pittorica-space-${u})`), f && (a.paddingTop = `var(--pittorica-space-${f})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), l && (a.paddingBottom = `var(--pittorica-space-${l})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`, a.paddingRight = `var(--pittorica-space-${g})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
58
+ const B = {
59
+ ...T,
60
+ ...a
63
61
  };
64
- return /* @__PURE__ */ h(
65
- r,
62
+ return /* @__PURE__ */ x(
63
+ A,
66
64
  {
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
65
+ className: P("pittorica-box", N),
66
+ style: B,
67
+ disabled: w,
68
+ required: R,
69
+ ...F,
70
+ children: e
79
71
  }
80
72
  );
81
73
  };
82
- C.displayName = "Box";
74
+ S.displayName = "Box";
83
75
  function k(t) {
84
- var r, i, e = "";
85
- if (typeof t == "string" || typeof t == "number") e += t;
76
+ var e, r, i = "";
77
+ if (typeof t == "string" || typeof t == "number") i += t;
86
78
  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;
79
+ var p = t.length;
80
+ for (e = 0; e < p; e++) t[e] && (r = k(t[e])) && (i && (i += " "), i += r);
81
+ } else for (r in t) t[r] && (i && (i += " "), i += r);
82
+ return i;
91
83
  }
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;
84
+ function j() {
85
+ for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = k(t)) && (i && (i += " "), i += e);
86
+ return i;
95
87
  }
96
- function q(t) {
97
- var r, i, e = "";
98
- if (typeof t == "string" || typeof t == "number") e += t;
88
+ function E(t) {
89
+ var e, r, i = "";
90
+ if (typeof t == "string" || typeof t == "number") i += t;
99
91
  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;
92
+ var p = t.length;
93
+ for (e = 0; e < p; e++) t[e] && (r = E(t[e])) && (i && (i += " "), i += r);
94
+ } else for (r in t) t[r] && (i && (i += " "), i += r);
95
+ return i;
104
96
  }
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;
97
+ function Q() {
98
+ for (var t, e, r = 0, i = "", p = arguments.length; r < p; r++) (t = arguments[r]) && (e = E(t)) && (i && (i += " "), i += e);
99
+ return i;
108
100
  }
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,
101
+ const O = ({
102
+ as: t,
103
+ children: e,
104
+ display: r,
105
+ m: i,
106
+ mt: p,
107
+ mr: s,
108
+ mb: o,
118
109
  ml: d,
119
- p: m,
110
+ mx: n,
111
+ my: c,
112
+ p: u,
120
113
  pt: f,
121
- pr: c,
114
+ pr: v,
122
115
  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
116
+ pl: m,
117
+ px: g,
118
+ py: h,
119
+ width: $,
120
+ height: y,
121
+ position: b,
122
+ style: T,
123
+ className: N,
124
+ disabled: w,
125
+ required: R,
126
+ ...F
137
127
  }) => {
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
128
+ const A = t || "div", a = {};
129
+ r && (a.display = r), $ && (a.width = $), y && (a.height = y), b && (a.position = b), i && (a.margin = `var(--pittorica-space-${i})`), p && (a.marginTop = `var(--pittorica-space-${p})`), s && (a.marginRight = `var(--pittorica-space-${s})`), o && (a.marginBottom = `var(--pittorica-space-${o})`), d && (a.marginLeft = `var(--pittorica-space-${d})`), n && (a.marginLeft = `var(--pittorica-space-${n})`, a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginTop = `var(--pittorica-space-${c})`, a.marginBottom = `var(--pittorica-space-${c})`), u && (a.padding = `var(--pittorica-space-${u})`), f && (a.paddingTop = `var(--pittorica-space-${f})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), l && (a.paddingBottom = `var(--pittorica-space-${l})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`, a.paddingRight = `var(--pittorica-space-${g})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
130
+ const B = {
131
+ ...T,
132
+ ...a
143
133
  };
144
- return /* @__PURE__ */ h(
145
- r,
134
+ return /* @__PURE__ */ x(
135
+ A,
146
136
  {
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
137
+ className: Q("pittorica-box", N),
138
+ style: B,
139
+ disabled: w,
140
+ required: R,
141
+ ...F,
142
+ children: e
159
143
  }
160
144
  );
161
145
  };
162
- z.displayName = "Box";
163
- const O = ({
146
+ O.displayName = "Box";
147
+ const D = ({
164
148
  children: t,
165
- as: r = "span",
149
+ as: e,
150
+ size: r,
166
151
  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
152
+ align: p,
153
+ truncate: s = !1,
154
+ color: o,
155
+ className: d,
156
+ style: n,
157
+ ...c
178
158
  }) => {
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([
159
+ const u = e || "span", f = (o == null ? void 0 : o.startsWith("#")) || (o == null ? void 0 : o.startsWith("rgb")) || (o == null ? void 0 : o.startsWith("hsl")), v = /* @__PURE__ */ new Set([
180
160
  "danger",
181
161
  "success",
182
162
  "error",
@@ -188,123 +168,162 @@ const O = ({
188
168
  "slate",
189
169
  "blue",
190
170
  "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
171
+ ]), l = (() => {
172
+ if (o)
173
+ return o === "inherit" ? "inherit" : f ? o : v.has(o) ? `var(--pittorica-${o}-9)` : o;
174
+ })(), m = r ? typeof r == "string" ? `pittorica-text--size-${r}` : j({
175
+ [`pittorica-text--size-${r.initial}`]: r.initial,
176
+ [`pittorica-text--xs-size-${r.xs}`]: r.xs,
177
+ [`pittorica-text--sm-size-${r.sm}`]: r.sm,
178
+ [`pittorica-text--md-size-${r.md}`]: r.md,
179
+ [`pittorica-text--lg-size-${r.lg}`]: r.lg,
180
+ [`pittorica-text--xl-size-${r.xl}`]: r.xl
181
+ }) : null, g = {
182
+ ...n,
183
+ textAlign: p,
184
+ color: l
198
185
  };
199
- return /* @__PURE__ */ h(
200
- z,
186
+ return /* @__PURE__ */ x(
187
+ O,
201
188
  {
202
- as: r,
203
- className: K(
189
+ as: u,
190
+ className: j(
204
191
  "pittorica-text",
205
- { "pittorica-text--truncate": a },
206
- o
192
+ m,
193
+ { "pittorica-text--truncate": s },
194
+ d
207
195
  ),
208
196
  "data-weight": i,
209
- style: x,
210
- href: d,
211
- target: m,
212
- rel: f,
213
- htmlFor: c,
214
- name: l,
215
- ...u,
197
+ style: g,
198
+ ...c,
216
199
  children: t
217
200
  }
218
201
  );
219
- }, E = G(null), P = () => {
220
- const t = H(E);
202
+ };
203
+ D.displayName = "Text";
204
+ const G = K(null), U = () => {
205
+ const t = M(G);
221
206
  if (!t)
222
207
  throw new Error(
223
208
  "TextField components must be wrapped in <TextField.Root />"
224
209
  );
225
210
  return t;
226
- }, Q = ({
211
+ }, z = ({
227
212
  children: t,
228
- label: r,
229
- helperText: i,
230
- error: e,
231
- color: a = "indigo",
213
+ label: e,
214
+ helperText: r,
215
+ error: i,
216
+ color: p = "source",
232
217
  disabled: s,
233
218
  name: o,
234
- size: p = "sm",
235
- className: d,
236
- style: m,
237
- ...f
219
+ required: d,
220
+ size: n = "sm",
221
+ className: c,
222
+ style: u,
223
+ as: f,
224
+ ...v
238
225
  }) => {
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,
226
+ const l = I(), m = I(), h = p !== "inherit" && !(p != null && p.startsWith("#")) && !(p != null && p.startsWith("rgb")) ? `var(--pittorica-${p}-9)` : p;
227
+ return /* @__PURE__ */ x(
228
+ G,
242
229
  {
243
- ...f,
244
- className: S(
245
- "pittorica-text-field-root",
246
- `pittorica-text-field--${p}`,
247
- d
248
- ),
249
- "data-error": e,
250
- children: [
251
- r && /* @__PURE__ */ h(
252
- O,
253
- {
254
- as: "label",
255
- htmlFor: c,
256
- weight: "medium",
257
- style: {
258
- paddingLeft: "4px",
259
- fontSize: "var(--pittorica-font-size-1)",
260
- marginBottom: "4px",
261
- display: "inline-block"
262
- },
263
- children: r
264
- }
265
- ),
266
- /* @__PURE__ */ h(
267
- "div",
268
- {
269
- className: "pittorica-text-field-input-wrapper",
270
- "data-disabled": s,
271
- style: {
272
- "--pittorica-source-color": g,
273
- ...m
274
- },
275
- children: t
276
- }
277
- ),
278
- i && /* @__PURE__ */ h("div", { id: l, className: "pittorica-text-field-helper", children: i })
279
- ]
230
+ value: { inputId: l, helperId: m, disabled: s, size: n, name: o, required: d },
231
+ children: /* @__PURE__ */ q(
232
+ S,
233
+ {
234
+ as: f || "div",
235
+ className: L(
236
+ "pittorica-text-field-root",
237
+ `pittorica-text-field--${n}`,
238
+ c
239
+ ),
240
+ "data-error": i,
241
+ ...v,
242
+ children: [
243
+ e && /* @__PURE__ */ q(
244
+ D,
245
+ {
246
+ as: "label",
247
+ htmlFor: l,
248
+ weight: "medium",
249
+ style: {
250
+ paddingLeft: "4px",
251
+ fontSize: "var(--pittorica-font-size-1)",
252
+ marginBottom: "4px",
253
+ display: "inline-block"
254
+ },
255
+ children: [
256
+ e,
257
+ " ",
258
+ d && /* @__PURE__ */ x("span", { "aria-hidden": "true", children: "*" })
259
+ ]
260
+ }
261
+ ),
262
+ /* @__PURE__ */ x(
263
+ "div",
264
+ {
265
+ className: "pittorica-text-field-input-wrapper",
266
+ "data-disabled": s,
267
+ style: {
268
+ "--pittorica-source-color": h,
269
+ ...u
270
+ },
271
+ children: t
272
+ }
273
+ ),
274
+ r && /* @__PURE__ */ x("div", { id: m, className: "pittorica-text-field-helper", children: r })
275
+ ]
276
+ }
277
+ )
280
278
  }
281
- ) });
282
- }, U = ({
279
+ );
280
+ }, H = ({
283
281
  className: t,
284
- ref: r,
285
- ...i
282
+ ...e
286
283
  }) => {
287
- const { inputId: e, helperId: a, disabled: s, name: o } = P();
288
- return /* @__PURE__ */ h(
284
+ const {
285
+ inputId: r,
286
+ helperId: i,
287
+ disabled: p,
288
+ name: s,
289
+ required: o
290
+ } = U();
291
+ return /* @__PURE__ */ x(
289
292
  "input",
290
293
  {
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)
294
+ name: s,
295
+ ...e,
296
+ id: r,
297
+ "aria-describedby": i,
298
+ disabled: p,
299
+ required: o,
300
+ className: L("pittorica-text-field-input", t)
298
301
  }
299
302
  );
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
304
- };
303
+ }, J = ({
304
+ children: t,
305
+ className: e,
306
+ as: r,
307
+ ...i
308
+ }) => /* @__PURE__ */ x(
309
+ S,
310
+ {
311
+ as: r || "div",
312
+ className: L("pittorica-text-field-slot", e),
313
+ ...i,
314
+ children: t
315
+ }
316
+ ), Y = Object.assign(z, {
317
+ Root: z,
318
+ Input: H,
319
+ Slot: J
320
+ });
321
+ z.displayName = "TextField.Root";
322
+ H.displayName = "TextField.Input";
323
+ J.displayName = "TextField.Slot";
305
324
  export {
306
- Z as TextField,
307
- U as TextFieldInput,
308
- Q as TextFieldRoot,
309
- V as TextFieldSlot
325
+ Y as TextField,
326
+ H as TextFieldInput,
327
+ z as TextFieldRoot,
328
+ J as TextFieldSlot
310
329
  };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@pittorica/text-field-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/text-react": "0.26.0",
15
+ "@pittorica/box-react": "0.26.0"
15
16
  },
16
17
  "devDependencies": {
17
18
  "@tabler/icons-react": "^3.36.1",
@@ -22,11 +23,11 @@
22
23
  "@vitejs/plugin-react": "^4.0.0",
23
24
  "jsdom": "^22.0.0",
24
25
  "typescript": "^5.0.0",
25
- "vite": "^5.0.0",
26
- "vitest": "^2.1.9",
27
- "@pittorica/flex-react": "0.24.0",
28
- "@pittorica/theme-react": "0.24.0",
29
- "pittorica": "0.24.0"
26
+ "vite": "^6.4.1",
27
+ "vitest": "^3.2.4",
28
+ "@pittorica/theme-react": "0.26.0",
29
+ "@pittorica/flex-react": "0.26.0",
30
+ "pittorica": "0.26.0"
30
31
  },
31
32
  "peerDependencies": {
32
33
  "react": ">=19",
@@ -36,8 +37,7 @@
36
37
  "build": "npm run clean && npm run build:js && npm run build:types",
37
38
  "build:js": "vite build",
38
39
  "build:types": "tsc -p tsconfig.json",
39
- "clean": "rm -rf dist",
40
- "dev": "vite",
40
+ "clean": "rm -rf dist *.tsbuildinfo",
41
41
  "test": "vitest run",
42
42
  "test:watch": "vitest"
43
43
  }
package/dist/TextField.stories.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { TextField } from './TextField.js';
3
- /**
4
- * TextField component following Radix UI's compact design.
5
- * Supports 5 sizes and compound component architecture for slots.
6
- */
7
- declare const meta: Meta<typeof TextField.Root>;
8
- export default meta;
9
- export declare const Basic: StoryObj;
10
- /**
11
- * Visualization of the 5 sizes scaling height and font-size.
12
- */
13
- export declare const AllSizes: StoryObj;
14
- export declare const WithDecorators: StoryObj;
15
- export declare const Search: StoryObj;
16
- //# sourceMappingURL=TextField.stories.d.ts.map
package/dist/TextField.stories.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../src/TextField.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAAC,IAAI,CAiBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAUnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,QAoBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAuB5B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAqBpB,CAAC"}
package/dist/TextField.test.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- import '@testing-library/jest-dom';
5
- //# sourceMappingURL=TextField.test.d.ts.map
package/dist/TextField.test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../src/TextField.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}