@telegraph/textarea 0.1.8 → 0.1.9
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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/css/default.css +1 -1
- package/dist/esm/index.mjs +86 -34
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/TextArea/TextArea.constants.d.ts +5 -3
- package/dist/types/TextArea/TextArea.constants.d.ts.map +1 -1
- package/dist/types/TextArea/TextArea.d.ts +6 -8
- package/dist/types/TextArea/TextArea.d.ts.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/textarea
|
|
2
2
|
|
|
3
|
+
## 0.1.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#701](https://github.com/knocklabs/telegraph/pull/701) [`16e678c`](https://github.com/knocklabs/telegraph/commit/16e678c5e8bc7f13613116954bc15099a8694bb7) Thanks [@ksorathia](https://github.com/ksorathia)! - Add surface-3 background color for interactive outlined variants.
|
|
8
|
+
|
|
3
9
|
## 0.1.8
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("@telegraph/typography"),s={1:{px:"1_5",py:"1",size:"1",rounded:"2"},2:{px:"2",py:"1_5",size:"2",rounded:"2"},3:{px:"3",py:"2",size:"3",rounded:"2"}},n={outline:{border:"px",borderColor:"gray-6",hover_borderColor:"gray-7",hover_backgroundColor:"surface-2",active_borderColor:"blue-8",active_backgroundColor:"surface-3",focus_borderColor:"blue-8",focus_backgroundColor:"surface-3"},ghost:{border:"px",borderColor:"transparent",hover_borderColor:"gray-7",hover_backgroundColor:"surface-2",active_borderColor:"blue-8",active_backgroundColor:"surface-3",focus_borderColor:"blue-8",focus_backgroundColor:"surface-3"}},i={default:{outline:{bg:"surface-3"},ghost:{bg:"transparent"}},disabled:{outline:{bg:"gray-2",borderColor:"transparent",hover_borderColor:void 0,hover_backgroundColor:void 0,active_borderColor:void 0,active_backgroundColor:void 0,focus_borderColor:void 0,focus_backgroundColor:void 0},ghost:{bg:"transparent",borderColor:"transparent",hover_borderColor:void 0,hover_backgroundColor:void 0,active_borderColor:void 0,active_backgroundColor:void 0,focus_borderColor:void 0,focus_backgroundColor:void 0}},error:{outline:{bg:"surface-3",borderColor:"red-6",hover_borderColor:"red-7"},ghost:{bg:"surface-3",borderColor:"red-6",hover_borderColor:"red-7"}}},g=({disabled:o,errored:r})=>o?"disabled":r?"error":"default",v=({size:o="2",variant:r="outline",resize:a="both",disabled:e,errored:d,textProps:u,...b})=>{const t=g({disabled:e,errored:d});return c.jsx(l.Text,{as:"textarea","data-tgph-textarea":!0,"data-tgph-textarea-state":t,"data-tgph-textarea-variant":r,"data-tgph-textarea-size":o,"data-tgph-textarea-resize":a,disabled:e,...s[o],...n[r],...i[t][r],...u,...b})};exports.TextArea=v;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TextArea/TextArea.constants.ts","../../src/TextArea/TextArea.tsx"],"sourcesContent":["import type { TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Text } from \"@telegraph/typography\";\n\nexport type Size = \"1\" | \"2\" | \"3\";\nexport type Variant = \"outline\" | \"ghost\";\nexport type State = \"default\" | \"disabled\" | \"error\";\n\ntype SizeMap = {\n [key in Size]: Partial<\n Pick
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TextArea/TextArea.constants.ts","../../src/TextArea/TextArea.tsx"],"sourcesContent":["import type { TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Text } from \"@telegraph/typography\";\n\nexport type Size = \"1\" | \"2\" | \"3\";\nexport type Variant = \"outline\" | \"ghost\";\nexport type State = \"default\" | \"disabled\" | \"error\";\n\ntype SizeMap = {\n [key in Size]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n \"p\" | \"size\" | \"px\" | \"py\" | \"rounded\"\n >\n >;\n};\n\ntype VariantMap = {\n [key in Variant]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n | \"border\"\n | \"borderColor\"\n | \"hover_borderColor\"\n | \"hover_backgroundColor\"\n | \"active_borderColor\"\n | \"active_backgroundColor\"\n | \"focus_borderColor\"\n | \"focus_backgroundColor\"\n >\n >;\n};\n\ntype StateMap = {\n [key in State]: {\n [key in Variant]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n | \"bg\"\n | \"borderColor\"\n | \"hover_borderColor\"\n | \"hover_backgroundColor\"\n | \"active_borderColor\"\n | \"active_backgroundColor\"\n | \"focus_borderColor\"\n | \"focus_backgroundColor\"\n >\n >;\n };\n};\n\nexport const sizeMap: SizeMap = {\n \"1\": {\n px: \"1_5\",\n py: \"1\",\n size: \"1\",\n rounded: \"2\",\n },\n \"2\": {\n px: \"2\",\n py: \"1_5\",\n size: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n px: \"3\",\n py: \"2\",\n size: \"3\",\n rounded: \"2\",\n },\n};\n\nexport const variantMap: VariantMap = {\n outline: {\n border: \"px\",\n borderColor: \"gray-6\",\n hover_borderColor: \"gray-7\",\n hover_backgroundColor: \"surface-2\",\n active_borderColor: \"blue-8\",\n active_backgroundColor: \"surface-3\",\n focus_borderColor: \"blue-8\",\n focus_backgroundColor: \"surface-3\",\n },\n ghost: {\n border: \"px\",\n borderColor: \"transparent\",\n hover_borderColor: \"gray-7\",\n hover_backgroundColor: \"surface-2\",\n active_borderColor: \"blue-8\",\n active_backgroundColor: \"surface-3\",\n focus_borderColor: \"blue-8\",\n focus_backgroundColor: \"surface-3\",\n },\n};\n\nexport const stateMap: StateMap = {\n default: {\n outline: {\n bg: \"surface-3\",\n },\n ghost: {\n bg: \"transparent\",\n },\n },\n disabled: {\n outline: {\n bg: \"gray-2\",\n borderColor: \"transparent\",\n hover_borderColor: undefined,\n hover_backgroundColor: undefined,\n active_borderColor: undefined,\n active_backgroundColor: undefined,\n focus_borderColor: undefined,\n focus_backgroundColor: undefined,\n },\n ghost: {\n bg: \"transparent\",\n borderColor: \"transparent\",\n hover_borderColor: undefined,\n hover_backgroundColor: undefined,\n active_borderColor: undefined,\n active_backgroundColor: undefined,\n focus_borderColor: undefined,\n focus_backgroundColor: undefined,\n },\n },\n error: {\n outline: {\n bg: \"surface-3\",\n borderColor: \"red-6\",\n hover_borderColor: \"red-7\",\n },\n ghost: {\n bg: \"surface-3\",\n borderColor: \"red-6\",\n hover_borderColor: \"red-7\",\n },\n },\n};\n","import { Text, type TextProps } from \"@telegraph/typography\";\n\nimport {\n type Size,\n type Variant,\n sizeMap,\n stateMap,\n variantMap,\n} from \"./TextArea.constants\";\n\nconst deriveState = ({\n disabled,\n errored,\n}: Pick<TextAreaBaseProps, \"disabled\" | \"errored\">) => {\n if (disabled) return \"disabled\";\n if (errored) return \"error\";\n return \"default\";\n};\n\ntype TextAreaTextProps = Omit<TextProps<\"textarea\">, \"as\">;\n\ntype TextAreaBaseProps = {\n size?: Size;\n variant?: Variant;\n errored?: boolean;\n disabled?: boolean;\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n textProps?: TextAreaTextProps;\n};\n\ntype TextAreaProps = TextAreaBaseProps & TextAreaTextProps;\n\nconst TextArea = ({\n size = \"2\",\n variant = \"outline\",\n resize = \"both\",\n disabled,\n errored,\n textProps,\n ...props\n}: TextAreaProps) => {\n const derivedState = deriveState({ disabled, errored });\n\n return (\n <Text\n as=\"textarea\"\n data-tgph-textarea\n data-tgph-textarea-state={derivedState}\n data-tgph-textarea-variant={variant}\n data-tgph-textarea-size={size}\n data-tgph-textarea-resize={resize}\n disabled={disabled}\n {...sizeMap[size]}\n {...variantMap[variant]}\n {...stateMap[derivedState][variant]}\n {...textProps}\n {...props}\n />\n );\n};\n\nexport { TextArea, type TextAreaProps };\n"],"names":["sizeMap","variantMap","stateMap","deriveState","disabled","errored","TextArea","size","variant","resize","textProps","props","derivedState","jsx","Text"],"mappings":"wJAkDaA,EAAmB,CAC9B,EAAK,CACH,GAAI,MACJ,GAAI,IACJ,KAAM,IACN,QAAS,GAAA,EAEX,EAAK,CACH,GAAI,IACJ,GAAI,MACJ,KAAM,IACN,QAAS,GAAA,EAEX,EAAK,CACH,GAAI,IACJ,GAAI,IACJ,KAAM,IACN,QAAS,GAAA,CAEb,EAEaC,EAAyB,CACpC,QAAS,CACP,OAAQ,KACR,YAAa,SACb,kBAAmB,SACnB,sBAAuB,YACvB,mBAAoB,SACpB,uBAAwB,YACxB,kBAAmB,SACnB,sBAAuB,WAAA,EAEzB,MAAO,CACL,OAAQ,KACR,YAAa,cACb,kBAAmB,SACnB,sBAAuB,YACvB,mBAAoB,SACpB,uBAAwB,YACxB,kBAAmB,SACnB,sBAAuB,WAAA,CAE3B,EAEaC,EAAqB,CAChC,QAAS,CACP,QAAS,CACP,GAAI,WAAA,EAEN,MAAO,CACL,GAAI,aAAA,CACN,EAEF,SAAU,CACR,QAAS,CACP,GAAI,SACJ,YAAa,cACb,kBAAmB,OACnB,sBAAuB,OACvB,mBAAoB,OACpB,uBAAwB,OACxB,kBAAmB,OACnB,sBAAuB,MAAA,EAEzB,MAAO,CACL,GAAI,cACJ,YAAa,cACb,kBAAmB,OACnB,sBAAuB,OACvB,mBAAoB,OACpB,uBAAwB,OACxB,kBAAmB,OACnB,sBAAuB,MAAA,CACzB,EAEF,MAAO,CACL,QAAS,CACP,GAAI,YACJ,YAAa,QACb,kBAAmB,OAAA,EAErB,MAAO,CACL,GAAI,YACJ,YAAa,QACb,kBAAmB,OAAA,CACrB,CAEJ,EC/HMC,EAAc,CAAC,CACnB,SAAAC,EACA,QAAAC,CACF,IACMD,EAAiB,WACjBC,EAAgB,QACb,UAgBHC,EAAW,CAAC,CAChB,KAAAC,EAAO,IACP,QAAAC,EAAU,UACV,OAAAC,EAAS,OACT,SAAAL,EACA,QAAAC,EACA,UAAAK,EACA,GAAGC,CACL,IAAqB,CACnB,MAAMC,EAAeT,EAAY,CAAE,SAAAC,EAAU,QAAAC,EAAS,EAEtD,OACEQ,EAAAA,IAACC,EAAAA,KAAA,CACC,GAAG,WACH,qBAAkB,GAClB,2BAA0BF,EAC1B,6BAA4BJ,EAC5B,0BAAyBD,EACzB,4BAA2BE,EAC3B,SAAAL,EACC,GAAGJ,EAAQO,CAAI,EACf,GAAGN,EAAWO,CAAO,EACrB,GAAGN,EAASU,CAAY,EAAEJ,CAAO,EACjC,GAAGE,EACH,GAAGC,CAAA,CAAA,CAGV"}
|
package/dist/css/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-tgph-textarea]{-webkit-appearance:none;-moz-appearance:none;appearance:none;
|
|
1
|
+
[data-tgph-textarea]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[data-tgph-textarea]::-moz-placeholder{color:var(--tgph-gray-10)}[data-tgph-textarea]::placeholder{color:var(--tgph-gray-10)}[data-tgph-textarea-state=disabled]{cursor:not-allowed}[data-tgph-textarea-resize=none]{resize:none}[data-tgph-textarea-resize=both]{resize:both}[data-tgph-textarea-resize=vertical]{resize:vertical}[data-tgph-textarea-resize=horizontal]{resize:horizontal}[data-tgph-textarea-variant=ghost]{resize:none}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,68 +1,120 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Text as
|
|
3
|
-
const
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { Text as c } from "@telegraph/typography";
|
|
3
|
+
const s = {
|
|
4
4
|
1: {
|
|
5
5
|
px: "1_5",
|
|
6
6
|
py: "1",
|
|
7
|
-
size: "1"
|
|
7
|
+
size: "1",
|
|
8
|
+
rounded: "2"
|
|
8
9
|
},
|
|
9
10
|
2: {
|
|
10
11
|
px: "2",
|
|
11
12
|
py: "1_5",
|
|
12
|
-
size: "2"
|
|
13
|
+
size: "2",
|
|
14
|
+
rounded: "2"
|
|
13
15
|
},
|
|
14
16
|
3: {
|
|
15
17
|
px: "3",
|
|
16
18
|
py: "2",
|
|
17
|
-
size: "3"
|
|
19
|
+
size: "3",
|
|
20
|
+
rounded: "2"
|
|
18
21
|
}
|
|
19
|
-
},
|
|
22
|
+
}, n = {
|
|
20
23
|
outline: {
|
|
21
|
-
border: "px"
|
|
24
|
+
border: "px",
|
|
25
|
+
borderColor: "gray-6",
|
|
26
|
+
hover_borderColor: "gray-7",
|
|
27
|
+
hover_backgroundColor: "surface-2",
|
|
28
|
+
active_borderColor: "blue-8",
|
|
29
|
+
active_backgroundColor: "surface-3",
|
|
30
|
+
focus_borderColor: "blue-8",
|
|
31
|
+
focus_backgroundColor: "surface-3"
|
|
22
32
|
},
|
|
23
33
|
ghost: {
|
|
24
34
|
border: "px",
|
|
25
|
-
borderColor: "transparent"
|
|
35
|
+
borderColor: "transparent",
|
|
36
|
+
hover_borderColor: "gray-7",
|
|
37
|
+
hover_backgroundColor: "surface-2",
|
|
38
|
+
active_borderColor: "blue-8",
|
|
39
|
+
active_backgroundColor: "surface-3",
|
|
40
|
+
focus_borderColor: "blue-8",
|
|
41
|
+
focus_backgroundColor: "surface-3"
|
|
26
42
|
}
|
|
27
|
-
},
|
|
28
|
-
default: {
|
|
43
|
+
}, i = {
|
|
44
|
+
default: {
|
|
45
|
+
outline: {
|
|
46
|
+
bg: "surface-3"
|
|
47
|
+
},
|
|
48
|
+
ghost: {
|
|
49
|
+
bg: "transparent"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
29
52
|
disabled: {
|
|
30
|
-
|
|
31
|
-
|
|
53
|
+
outline: {
|
|
54
|
+
bg: "gray-2",
|
|
55
|
+
borderColor: "transparent",
|
|
56
|
+
hover_borderColor: void 0,
|
|
57
|
+
hover_backgroundColor: void 0,
|
|
58
|
+
active_borderColor: void 0,
|
|
59
|
+
active_backgroundColor: void 0,
|
|
60
|
+
focus_borderColor: void 0,
|
|
61
|
+
focus_backgroundColor: void 0
|
|
62
|
+
},
|
|
63
|
+
ghost: {
|
|
64
|
+
bg: "transparent",
|
|
65
|
+
borderColor: "transparent",
|
|
66
|
+
hover_borderColor: void 0,
|
|
67
|
+
hover_backgroundColor: void 0,
|
|
68
|
+
active_borderColor: void 0,
|
|
69
|
+
active_backgroundColor: void 0,
|
|
70
|
+
focus_borderColor: void 0,
|
|
71
|
+
focus_backgroundColor: void 0
|
|
72
|
+
}
|
|
32
73
|
},
|
|
33
74
|
error: {
|
|
34
|
-
|
|
75
|
+
outline: {
|
|
76
|
+
bg: "surface-3",
|
|
77
|
+
borderColor: "red-6",
|
|
78
|
+
hover_borderColor: "red-7"
|
|
79
|
+
},
|
|
80
|
+
ghost: {
|
|
81
|
+
bg: "surface-3",
|
|
82
|
+
borderColor: "red-6",
|
|
83
|
+
hover_borderColor: "red-7"
|
|
84
|
+
}
|
|
35
85
|
}
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
86
|
+
}, v = ({
|
|
87
|
+
disabled: o,
|
|
88
|
+
errored: r
|
|
89
|
+
}) => o ? "disabled" : r ? "error" : "default", _ = ({
|
|
90
|
+
size: o = "2",
|
|
91
|
+
variant: r = "outline",
|
|
92
|
+
resize: t = "both",
|
|
41
93
|
disabled: e,
|
|
42
|
-
errored:
|
|
43
|
-
textProps:
|
|
44
|
-
...
|
|
94
|
+
errored: d,
|
|
95
|
+
textProps: u,
|
|
96
|
+
...b
|
|
45
97
|
}) => {
|
|
46
|
-
const a =
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
|
|
98
|
+
const a = v({ disabled: e, errored: d });
|
|
99
|
+
return /* @__PURE__ */ l(
|
|
100
|
+
c,
|
|
49
101
|
{
|
|
50
102
|
as: "textarea",
|
|
51
103
|
"data-tgph-textarea": !0,
|
|
52
104
|
"data-tgph-textarea-state": a,
|
|
53
|
-
"data-tgph-textarea-
|
|
54
|
-
"data-tgph-textarea-
|
|
55
|
-
|
|
105
|
+
"data-tgph-textarea-variant": r,
|
|
106
|
+
"data-tgph-textarea-size": o,
|
|
107
|
+
"data-tgph-textarea-resize": t,
|
|
56
108
|
disabled: e,
|
|
57
|
-
...
|
|
58
|
-
...
|
|
59
|
-
...
|
|
60
|
-
...
|
|
61
|
-
...
|
|
109
|
+
...s[o],
|
|
110
|
+
...n[r],
|
|
111
|
+
...i[a][r],
|
|
112
|
+
...u,
|
|
113
|
+
...b
|
|
62
114
|
}
|
|
63
115
|
);
|
|
64
116
|
};
|
|
65
117
|
export {
|
|
66
|
-
|
|
118
|
+
_ as TextArea
|
|
67
119
|
};
|
|
68
120
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/TextArea/TextArea.constants.ts","../../src/TextArea/TextArea.tsx"],"sourcesContent":["import type { TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Text } from \"@telegraph/typography\";\n\nexport type Size = \"1\" | \"2\" | \"3\";\nexport type Variant = \"outline\" | \"ghost\";\nexport type State = \"default\" | \"disabled\" | \"error\";\n\ntype SizeMap = {\n [key in Size]: Partial<\n Pick
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/TextArea/TextArea.constants.ts","../../src/TextArea/TextArea.tsx"],"sourcesContent":["import type { TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Text } from \"@telegraph/typography\";\n\nexport type Size = \"1\" | \"2\" | \"3\";\nexport type Variant = \"outline\" | \"ghost\";\nexport type State = \"default\" | \"disabled\" | \"error\";\n\ntype SizeMap = {\n [key in Size]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n \"p\" | \"size\" | \"px\" | \"py\" | \"rounded\"\n >\n >;\n};\n\ntype VariantMap = {\n [key in Variant]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n | \"border\"\n | \"borderColor\"\n | \"hover_borderColor\"\n | \"hover_backgroundColor\"\n | \"active_borderColor\"\n | \"active_backgroundColor\"\n | \"focus_borderColor\"\n | \"focus_backgroundColor\"\n >\n >;\n};\n\ntype StateMap = {\n [key in State]: {\n [key in Variant]: Partial<\n Pick<\n TgphComponentProps<typeof Text>,\n | \"bg\"\n | \"borderColor\"\n | \"hover_borderColor\"\n | \"hover_backgroundColor\"\n | \"active_borderColor\"\n | \"active_backgroundColor\"\n | \"focus_borderColor\"\n | \"focus_backgroundColor\"\n >\n >;\n };\n};\n\nexport const sizeMap: SizeMap = {\n \"1\": {\n px: \"1_5\",\n py: \"1\",\n size: \"1\",\n rounded: \"2\",\n },\n \"2\": {\n px: \"2\",\n py: \"1_5\",\n size: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n px: \"3\",\n py: \"2\",\n size: \"3\",\n rounded: \"2\",\n },\n};\n\nexport const variantMap: VariantMap = {\n outline: {\n border: \"px\",\n borderColor: \"gray-6\",\n hover_borderColor: \"gray-7\",\n hover_backgroundColor: \"surface-2\",\n active_borderColor: \"blue-8\",\n active_backgroundColor: \"surface-3\",\n focus_borderColor: \"blue-8\",\n focus_backgroundColor: \"surface-3\",\n },\n ghost: {\n border: \"px\",\n borderColor: \"transparent\",\n hover_borderColor: \"gray-7\",\n hover_backgroundColor: \"surface-2\",\n active_borderColor: \"blue-8\",\n active_backgroundColor: \"surface-3\",\n focus_borderColor: \"blue-8\",\n focus_backgroundColor: \"surface-3\",\n },\n};\n\nexport const stateMap: StateMap = {\n default: {\n outline: {\n bg: \"surface-3\",\n },\n ghost: {\n bg: \"transparent\",\n },\n },\n disabled: {\n outline: {\n bg: \"gray-2\",\n borderColor: \"transparent\",\n hover_borderColor: undefined,\n hover_backgroundColor: undefined,\n active_borderColor: undefined,\n active_backgroundColor: undefined,\n focus_borderColor: undefined,\n focus_backgroundColor: undefined,\n },\n ghost: {\n bg: \"transparent\",\n borderColor: \"transparent\",\n hover_borderColor: undefined,\n hover_backgroundColor: undefined,\n active_borderColor: undefined,\n active_backgroundColor: undefined,\n focus_borderColor: undefined,\n focus_backgroundColor: undefined,\n },\n },\n error: {\n outline: {\n bg: \"surface-3\",\n borderColor: \"red-6\",\n hover_borderColor: \"red-7\",\n },\n ghost: {\n bg: \"surface-3\",\n borderColor: \"red-6\",\n hover_borderColor: \"red-7\",\n },\n },\n};\n","import { Text, type TextProps } from \"@telegraph/typography\";\n\nimport {\n type Size,\n type Variant,\n sizeMap,\n stateMap,\n variantMap,\n} from \"./TextArea.constants\";\n\nconst deriveState = ({\n disabled,\n errored,\n}: Pick<TextAreaBaseProps, \"disabled\" | \"errored\">) => {\n if (disabled) return \"disabled\";\n if (errored) return \"error\";\n return \"default\";\n};\n\ntype TextAreaTextProps = Omit<TextProps<\"textarea\">, \"as\">;\n\ntype TextAreaBaseProps = {\n size?: Size;\n variant?: Variant;\n errored?: boolean;\n disabled?: boolean;\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n textProps?: TextAreaTextProps;\n};\n\ntype TextAreaProps = TextAreaBaseProps & TextAreaTextProps;\n\nconst TextArea = ({\n size = \"2\",\n variant = \"outline\",\n resize = \"both\",\n disabled,\n errored,\n textProps,\n ...props\n}: TextAreaProps) => {\n const derivedState = deriveState({ disabled, errored });\n\n return (\n <Text\n as=\"textarea\"\n data-tgph-textarea\n data-tgph-textarea-state={derivedState}\n data-tgph-textarea-variant={variant}\n data-tgph-textarea-size={size}\n data-tgph-textarea-resize={resize}\n disabled={disabled}\n {...sizeMap[size]}\n {...variantMap[variant]}\n {...stateMap[derivedState][variant]}\n {...textProps}\n {...props}\n />\n );\n};\n\nexport { TextArea, type TextAreaProps };\n"],"names":["sizeMap","variantMap","stateMap","deriveState","disabled","errored","TextArea","size","variant","resize","textProps","props","derivedState","jsx","Text"],"mappings":";;AAkDO,MAAMA,IAAmB;AAAA,EAC9B,GAAK;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,GAAK;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,GAAK;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAyB;AAAA,EACpC,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,EAAA;AAAA,EAEzB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,EAAA;AAE3B,GAEaC,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,IAAI;AAAA,IAAA;AAAA,IAEN,OAAO;AAAA,MACL,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,MACvB,oBAAoB;AAAA,MACpB,wBAAwB;AAAA,MACxB,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,IAAA;AAAA,IAEzB,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,MACvB,oBAAoB;AAAA,MACpB,wBAAwB;AAAA,MACxB,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,IAAA;AAAA,EACzB;AAAA,EAEF,OAAO;AAAA,IACL,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAErB,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,EACrB;AAEJ,GC/HMC,IAAc,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,SAAAC;AACF,MACMD,IAAiB,aACjBC,IAAgB,UACb,WAgBHC,IAAW,CAAC;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,UAAAL;AAAA,EACA,SAAAC;AAAA,EACA,WAAAK;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAMC,IAAeT,EAAY,EAAE,UAAAC,GAAU,SAAAC,GAAS;AAEtD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,sBAAkB;AAAA,MAClB,4BAA0BF;AAAA,MAC1B,8BAA4BJ;AAAA,MAC5B,2BAAyBD;AAAA,MACzB,6BAA2BE;AAAA,MAC3B,UAAAL;AAAA,MACC,GAAGJ,EAAQO,CAAI;AAAA,MACf,GAAGN,EAAWO,CAAO;AAAA,MACrB,GAAGN,EAASU,CAAY,EAAEJ,CAAO;AAAA,MACjC,GAAGE;AAAA,MACH,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -4,13 +4,15 @@ export type Size = "1" | "2" | "3";
|
|
|
4
4
|
export type Variant = "outline" | "ghost";
|
|
5
5
|
export type State = "default" | "disabled" | "error";
|
|
6
6
|
type SizeMap = {
|
|
7
|
-
[key in Size]: Partial<Pick<TgphComponentProps<typeof Text>, "p" | "size" | "px" | "py">>;
|
|
7
|
+
[key in Size]: Partial<Pick<TgphComponentProps<typeof Text>, "p" | "size" | "px" | "py" | "rounded">>;
|
|
8
8
|
};
|
|
9
9
|
type VariantMap = {
|
|
10
|
-
[key in Variant]: Partial<Pick<TgphComponentProps<typeof Text>, "border" | "borderColor">>;
|
|
10
|
+
[key in Variant]: Partial<Pick<TgphComponentProps<typeof Text>, "border" | "borderColor" | "hover_borderColor" | "hover_backgroundColor" | "active_borderColor" | "active_backgroundColor" | "focus_borderColor" | "focus_backgroundColor">>;
|
|
11
11
|
};
|
|
12
12
|
type StateMap = {
|
|
13
|
-
[key in State]:
|
|
13
|
+
[key in State]: {
|
|
14
|
+
[key in Variant]: Partial<Pick<TgphComponentProps<typeof Text>, "bg" | "borderColor" | "hover_borderColor" | "hover_backgroundColor" | "active_borderColor" | "active_backgroundColor" | "focus_borderColor" | "focus_backgroundColor">>;
|
|
15
|
+
};
|
|
14
16
|
};
|
|
15
17
|
export declare const sizeMap: SizeMap;
|
|
16
18
|
export declare const variantMap: VariantMap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.constants.d.ts","sourceRoot":"","sources":["../../../src/TextArea/TextArea.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACnC,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAErD,KAAK,OAAO,GAAG;KACZ,GAAG,IAAI,IAAI,GAAG,OAAO,CACpB,IAAI,
|
|
1
|
+
{"version":3,"file":"TextArea.constants.d.ts","sourceRoot":"","sources":["../../../src/TextArea/TextArea.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACnC,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAErD,KAAK,OAAO,GAAG;KACZ,GAAG,IAAI,IAAI,GAAG,OAAO,CACpB,IAAI,CACF,kBAAkB,CAAC,OAAO,IAAI,CAAC,EAC/B,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CACvC,CACF;CACF,CAAC;AAEF,KAAK,UAAU,GAAG;KACf,GAAG,IAAI,OAAO,GAAG,OAAO,CACvB,IAAI,CACF,kBAAkB,CAAC,OAAO,IAAI,CAAC,EAC7B,QAAQ,GACR,aAAa,GACb,mBAAmB,GACnB,uBAAuB,GACvB,oBAAoB,GACpB,wBAAwB,GACxB,mBAAmB,GACnB,uBAAuB,CAC1B,CACF;CACF,CAAC;AAEF,KAAK,QAAQ,GAAG;KACb,GAAG,IAAI,KAAK,GAAG;SACb,GAAG,IAAI,OAAO,GAAG,OAAO,CACvB,IAAI,CACF,kBAAkB,CAAC,OAAO,IAAI,CAAC,EAC7B,IAAI,GACJ,aAAa,GACb,mBAAmB,GACnB,uBAAuB,GACvB,oBAAoB,GACpB,wBAAwB,GACxB,mBAAmB,GACnB,uBAAuB,CAC1B,CACF;KACF;CACF,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAmBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,UAqBxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QA2CtB,CAAC"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Text } from '@telegraph/typography';
|
|
3
|
-
import { default as React } from 'react';
|
|
1
|
+
import { TextProps } from '@telegraph/typography';
|
|
4
2
|
import { Size, Variant } from './TextArea.constants';
|
|
3
|
+
type TextAreaTextProps = Omit<TextProps<"textarea">, "as">;
|
|
5
4
|
type TextAreaBaseProps = {
|
|
6
5
|
size?: Size;
|
|
7
6
|
variant?: Variant;
|
|
8
7
|
errored?: boolean;
|
|
9
8
|
disabled?: boolean;
|
|
10
9
|
resize?: "both" | "vertical" | "horizontal" | "none";
|
|
11
|
-
textProps?:
|
|
10
|
+
textProps?: TextAreaTextProps;
|
|
12
11
|
};
|
|
13
|
-
type TextAreaProps = TextAreaBaseProps &
|
|
14
|
-
declare const TextArea: ({ size, variant,
|
|
15
|
-
|
|
16
|
-
export { TextArea, type TextAreaExportedProps as TextAreaProps };
|
|
12
|
+
type TextAreaProps = TextAreaBaseProps & TextAreaTextProps;
|
|
13
|
+
declare const TextArea: ({ size, variant, resize, disabled, errored, textProps, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { TextArea, type TextAreaProps };
|
|
17
15
|
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EACL,KAAK,IAAI,EACT,KAAK,OAAO,EAIb,MAAM,sBAAsB,CAAC;AAW9B,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;AAE3D,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEF,KAAK,aAAa,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAE3D,QAAA,MAAM,QAAQ,GAAI,mEAQf,aAAa,4CAmBf,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/textarea",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "A multi-line user input.",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/textarea",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@telegraph/prettier-config": "^0.0.7",
|
|
43
43
|
"@telegraph/vite-config": "^0.0.15",
|
|
44
44
|
"@types/react": "^19.2.9",
|
|
45
|
-
"eslint": "^
|
|
45
|
+
"eslint": "^10.0.2",
|
|
46
46
|
"react": "^19.2.4",
|
|
47
47
|
"react-dom": "^19.2.4",
|
|
48
48
|
"typescript": "^5.9.3",
|