softable-pixels-web 1.2.44 → 1.2.45

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 (9) hide show
  1. package/dist/{TextArea-BMJWFF3y.js → TextArea-Dd6Qz38p.js} +17 -11
  2. package/dist/TextArea-Dd6Qz38p.js.map +1 -0
  3. package/dist/{index-BxDK_Go8.d.ts → index-BRP9OEtf.d.ts} +6 -6
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/text-area.d.ts +1 -1
  7. package/dist/text-area.js +1 -1
  8. package/package.json +1 -1
  9. package/dist/TextArea-BMJWFF3y.js.map +0 -1
package/dist/{TextArea-BMJWFF3y.js → TextArea-Dd6Qz38p.js} RENAMED
@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
8
  //#region src/components/commons/inputs/TextArea/styles.ts
9
9
  function createTextAreaStyles(props) {
10
- const { height = "8rem", readOnly } = props;
10
+ const { height = "8rem", readOnly, placeholderColor } = props;
11
11
  return styled({
12
12
  container: {
13
13
  width: "100%",
@@ -24,30 +24,35 @@ function createTextAreaStyles(props) {
24
24
  textArea: {
25
25
  height,
26
26
  width: "100%",
27
+ fontSize: "1rem",
28
+ fontWeight: "400",
29
+ color: "var(--px-text-primary)",
27
30
  paddingBlock: "0.75rem",
28
31
  paddingInline: "0.875rem",
29
32
  borderWidth: 1,
30
33
  borderRadius: "0.5rem",
31
- resize: "none",
32
- fontWeight: "400",
33
- fontSize: "1rem",
34
- color: "var(--px-text-primary)",
35
34
  borderColor: props.errorMessage ? "var(--px-color-error)" : "var(--px-border-primary)",
35
+ resize: "none",
36
36
  outlineOffset: "-1px",
37
37
  cursor: readOnly ? "default" : void 0,
38
38
  __rules: {
39
39
  "&::placeholder": {
40
40
  fontWeight: 400,
41
- color: "var(--px-text-secondary)"
41
+ color: placeholderColor || "var(--px-text-secondary)"
42
42
  },
43
43
  "&:focus-within": {
44
44
  outlineOffset: "-1px",
45
- outline: `2px solid var(${props.errorMessage ? "--px-color-error" : "--px-color-primary"})`
45
+ outline: `2px solid ${getOutlineColor(props)}`
46
46
  }
47
47
  }
48
48
  }
49
49
  });
50
50
  }
51
+ function getOutlineColor(props) {
52
+ if (props.errorMessage) return "var(--px-color-error)";
53
+ if (props.focusedRingColor) return props.focusedRingColor;
54
+ return "var(--px-color-primary)";
55
+ }
51
56
 
52
57
  //#endregion
53
58
  //#region src/components/commons/inputs/TextArea/index.tsx
@@ -60,6 +65,7 @@ const TextArea = (props) => {
60
65
  pick: (p) => [
61
66
  p.height,
62
67
  p.readOnly,
68
+ p.errorMessage,
63
69
  p.placeholderColor,
64
70
  p.focusedRingColor
65
71
  ],
@@ -93,11 +99,12 @@ const TextArea = (props) => {
93
99
  disabled,
94
100
  readOnly,
95
101
  maxLength,
96
- placeholder,
97
102
  style: styles.textArea,
103
+ placeholder,
98
104
  className: classes.textArea,
99
105
  onChange: handleChange
100
106
  }),
107
+ errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { message: errorMessage }) : null,
101
108
  maxLength && !hideMaxLength ? /* @__PURE__ */ jsxs(Typography, {
102
109
  variant: "b2",
103
110
  styles: { text: { marginLeft: "auto" } },
@@ -108,12 +115,11 @@ const TextArea = (props) => {
108
115
  " ",
109
116
  textMaxLength
110
117
  ]
111
- }) : null,
112
- errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { message: errorMessage }) : null
118
+ }) : null
113
119
  ]
114
120
  });
115
121
  };
116
122
 
117
123
  //#endregion
118
124
  export { TextArea as t };
119
- //# sourceMappingURL=TextArea-BMJWFF3y.js.map
125
+ //# sourceMappingURL=TextArea-Dd6Qz38p.js.map
package/dist/TextArea-Dd6Qz38p.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextArea-Dd6Qz38p.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n const { height = '8rem', readOnly, placeholderColor } = props\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n\n fontSize: '1rem',\n fontWeight: '400',\n color: 'var(--px-text-primary)',\n\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n\n borderWidth: 1,\n borderRadius: '0.5rem',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n resize: 'none',\n outlineOffset: '-1px',\n cursor: readOnly ? 'default' : undefined,\n\n __rules: {\n '&::placeholder': {\n fontWeight: 400,\n color: placeholderColor || 'var(--px-text-secondary)'\n },\n\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid ${getOutlineColor(props)}`\n }\n }\n }\n })\n}\n\nfunction getOutlineColor(props: TextAreaProps) {\n if (props.errorMessage) return 'var(--px-color-error)'\n if (props.focusedRingColor) return props.focusedRingColor\n return 'var(--px-color-primary)'\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n delay,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n errorMessage,\n label,\n required,\n requiredColor,\n labelConfig,\n onChange\n } = props\n\n // Refs\n const timeoutRef = useRef<number>(null)\n\n // States\n const [inputValue, setInputValue] = useState(value)\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [\n p.height,\n p.readOnly,\n p.errorMessage,\n p.placeholderColor,\n p.focusedRingColor\n ],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n\n const value = e.target.value\n\n setInputValue(value)\n\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n if (!delay) onChange?.(value)\n else {\n timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n }\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div>\n <Label\n label={label}\n htmlFor={inputId}\n required={required}\n requiredColor={requiredColor}\n {...labelConfig}\n />\n </div>\n )\n }\n\n return (\n <div style={styles.container}>\n {renderLabel()}\n\n <textarea\n value={inputValue}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n style={styles.textArea}\n placeholder={placeholder}\n className={classes.textArea}\n onChange={handleChange}\n />\n\n {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value?.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,UAAU,qBAAqB;AAExD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GAEP,UAAU;GACV,YAAY;GACZ,OAAO;GAEP,cAAc;GACd,eAAe;GAEf,aAAa;GACb,cAAc;GACd,aAAa,MAAM,eACf,0BACA;GAEJ,QAAQ;GACR,eAAe;GACf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO,oBAAoB;KAC5B;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,aAAa,gBAAgB,MAAM;KAC7C;IACF;GACF;EACF,CAAC;;AAGJ,SAAS,gBAAgB,OAAsB;AAC7C,KAAI,MAAM,aAAc,QAAO;AAC/B,KAAI,MAAM,iBAAkB,QAAO,MAAM;AACzC,QAAO;;;;;AC5CT,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cACA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAe,KAAK;CAGvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACX,OAAO,OAAO;IACD;IACb,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;GAEzD,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;;GACA"}
package/dist/{index-BxDK_Go8.d.ts → index-BRP9OEtf.d.ts} RENAMED
@@ -19,21 +19,21 @@ declare function createTextAreaStyles(props: TextAreaProps): {
19
19
  textArea: {
20
20
  height: string;
21
21
  width: string;
22
+ fontSize: string;
23
+ fontWeight: "400";
24
+ color: "var(--px-text-primary)";
22
25
  paddingBlock: string;
23
26
  paddingInline: string;
24
27
  borderWidth: number;
25
28
  borderRadius: string;
26
- resize: "none";
27
- fontWeight: "400";
28
- fontSize: string;
29
- color: "var(--px-text-primary)";
30
29
  borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
30
+ resize: "none";
31
31
  outlineOffset: string;
32
32
  cursor: "default" | undefined;
33
33
  __rules: {
34
34
  '&::placeholder': {
35
35
  fontWeight: number;
36
- color: "var(--px-text-secondary)";
36
+ color: string;
37
37
  };
38
38
  '&:focus-within': {
39
39
  outlineOffset: string;
@@ -70,4 +70,4 @@ interface TextAreaProps {
70
70
  declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
71
71
  //#endregion
72
72
  export { TextArea as t };
73
- //# sourceMappingURL=index-BxDK_Go8.d.ts.map
73
+ //# sourceMappingURL=index-BRP9OEtf.d.ts.map
package/dist/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { t as Input } from "./index-DdjILY3C.js";
10
10
  import { t as SearchInput } from "./index-MyZ_XVsH.js";
11
11
  import { n as types_d_exports$6, t as Select } from "./index-BmFKokpv.js";
12
12
  import { t as index_d_exports } from "./index-CriBmhqv.js";
13
- import { t as TextArea } from "./index-BxDK_Go8.js";
13
+ import { t as TextArea } from "./index-BRP9OEtf.js";
14
14
  import { t as Popover } from "./index-tivXt3ba.js";
15
15
  import { t as BasePopover } from "./index-BKsKKh1p.js";
16
16
  import { t as Breadcrumb } from "./index-CBHEtmuG.js";
package/dist/index.js CHANGED
@@ -25,7 +25,7 @@ import { t as Button } from "./Button-CWZvWbMh.js";
25
25
  import { n as types_exports$6, t as ScrollPaginationContainer } from "./ScrollPaginationContainer-isAA4BsG.js";
26
26
  import { c as MaskModule, o as Locale, s as MaskType } from "./MaskModule-CnJJhVLo.js";
27
27
  import { t as Input } from "./Input-DrSNwdgM.js";
28
- import { t as TextArea } from "./TextArea-BMJWFF3y.js";
28
+ import { t as TextArea } from "./TextArea-Dd6Qz38p.js";
29
29
  import { t as SearchInput } from "./SearchInput-zePMheJK.js";
30
30
  import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-BBTuW0Bp.js";
31
31
  import { t as Skeleton } from "./Skeleton-pvWAx_gn.js";
package/dist/text-area.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as TextArea } from "./index-BxDK_Go8.js";
1
+ import { t as TextArea } from "./index-BRP9OEtf.js";
2
2
  export { TextArea };
package/dist/text-area.js CHANGED
@@ -2,6 +2,6 @@ import "./useThemedStyles-Dco_54KA.js";
2
2
  import "./Typography-CcQTHV-F.js";
3
3
  import "./Label-CBUa-x13.js";
4
4
  import "./ErrorMessage-6pG4hFId.js";
5
- import { t as TextArea } from "./TextArea-BMJWFF3y.js";
5
+ import { t as TextArea } from "./TextArea-Dd6Qz38p.js";
6
6
 
7
7
  export { TextArea };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.2.44",
3
+ "version": "1.2.45",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
package/dist/TextArea-BMJWFF3y.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea-BMJWFF3y.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n const { height = '8rem', readOnly } = props\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderWidth: 1,\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n\n __rules: {\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n },\n\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n }\n })\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n delay,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n errorMessage,\n\n label,\n required,\n requiredColor,\n labelConfig,\n onChange\n } = props\n\n // Refs\n const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n // States\n const [inputValue, setInputValue] = useState(value)\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n\n const value = e.target.value\n\n setInputValue(value)\n\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n if (!delay) onChange?.(value)\n else {\n timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n }\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div>\n <Label\n label={label}\n htmlFor={inputId}\n required={required}\n requiredColor={requiredColor}\n {...labelConfig}\n />\n </div>\n )\n }\n\n return (\n <div style={styles.container}>\n {renderLabel()}\n\n <textarea\n value={inputValue}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value?.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n\n {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}