@dktunited-techoff/techoff-suite-ui 1.6.4 → 1.6.6

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 (19) hide show
  1. package/esm/components/TsInput/TsInput/TsInput.css +9 -0
  2. package/esm/components/TsInput/TsInput/TsInput.js +5 -2
  3. package/esm/components/TsInput/TsInput/TsInput.js.map +1 -1
  4. package/esm/components/TsInput/TsInput/TsInput.tsx +10 -2
  5. package/esm/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  6. package/esm/components/TsInput/TsInput/TsInput.types.tsx +1 -3
  7. package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +1 -0
  8. package/lib/components/TsInput/TsInput/TsInput.css +9 -0
  9. package/lib/components/TsInput/TsInput/TsInput.js +5 -2
  10. package/lib/components/TsInput/TsInput/TsInput.js.map +1 -1
  11. package/lib/components/TsInput/TsInput/TsInput.tsx +10 -2
  12. package/lib/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  13. package/lib/components/TsInput/TsInput/TsInput.types.tsx +1 -3
  14. package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +1 -0
  15. package/package.json +1 -1
  16. package/src/components/TsInput/TsInput/TsInput.css +9 -0
  17. package/src/components/TsInput/TsInput/TsInput.tsx +10 -2
  18. package/src/components/TsInput/TsInput/TsInput.types.tsx +1 -3
  19. package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +1 -0
package/esm/components/TsInput/TsInput/TsInput.css CHANGED
@@ -15,8 +15,17 @@
15
15
  border: 1px solid #e3262f;
16
16
  }
17
17
  .ts-input-error {
18
+ display: flex;
19
+ margin-top: 4px;
18
20
  color: #e3262f;
19
21
  }
22
+ .ts-input-error--icon {
23
+ margin-right: 4px;
24
+ }
25
+ .ts-input-error--label {
26
+ font-size: 12px;
27
+ font-weight: 500;
28
+ }
20
29
  input::placeholder {
21
30
  color: #7a7a7a;
22
31
  font-weight: 400;
package/esm/components/TsInput/TsInput/TsInput.js CHANGED
@@ -9,7 +9,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props })
9
9
  const handleBlur = (e) => {
10
10
  props.onBlur?.(e);
11
11
  if (onValidate) {
12
- const validateResult = onValidate(value);
12
+ const validateResult = onValidate();
13
13
  if (validateResult instanceof Promise)
14
14
  validateResult.then(setError);
15
15
  else
@@ -24,6 +24,9 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props })
24
24
  React.createElement("input", { type: "text", value: value, onBlur: handleBlur, onChange: e => onChange(e.target.value), ...props }),
25
25
  icon && (React.createElement("div", { className: "ts-input-icon" },
26
26
  React.createElement(TsIcon, { name: icon, size: "16" })))),
27
- React.createElement("div", { className: "ts-input-error" }, error)));
27
+ error && (React.createElement("div", { className: "ts-input-error" },
28
+ React.createElement("div", { className: "ts-input-error--icon" },
29
+ React.createElement(TsIcon, { name: "alert-circle", size: "16" })),
30
+ React.createElement("div", { className: "ts-input-error--label" }, error)))));
28
31
  };
29
32
  //# sourceMappingURL=TsInput.js.map
package/esm/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QACN,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO,CACzC,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;YACpC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -13,7 +13,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
13
13
  props.onBlur?.(e);
14
14
 
15
15
  if (onValidate) {
16
- const validateResult = onValidate(value);
16
+ const validateResult = onValidate();
17
17
  if (validateResult instanceof Promise) validateResult.then(setError);
18
18
  else setError(validateResult);
19
19
  }
@@ -32,7 +32,15 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
32
32
  </div>
33
33
  )}
34
34
  </div>
35
- <div className="ts-input-error">{error}</div>
35
+
36
+ {error && (
37
+ <div className="ts-input-error">
38
+ <div className="ts-input-error--icon">
39
+ <TsIcon name="alert-circle" size="16" />
40
+ </div>
41
+ <div className="ts-input-error--label">{error}</div>
42
+ </div>
43
+ )}
36
44
  </div>
37
45
  );
38
46
  };
package/esm/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -3,5 +3,5 @@ export type TsInputProps = {
3
3
  icon?: string;
4
4
  label?: string;
5
5
  onChange: (value: string) => void;
6
- onValidate?: (value?: string | number | readonly string[] | undefined) => Promise<string | undefined> | string | undefined;
6
+ onValidate?: () => Promise<string | undefined> | string | undefined;
7
7
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/esm/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -4,7 +4,5 @@ export type TsInputProps = {
4
4
  icon?: string;
5
5
  label?: string;
6
6
  onChange: (value: string) => void;
7
- onValidate?: (
8
- value?: string | number | readonly string[] | undefined,
9
- ) => Promise<string | undefined> | string | undefined;
7
+ onValidate?: () => Promise<string | undefined> | string | undefined;
10
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -54,6 +54,7 @@ Input allows the user to enter content and data when the expected user input is
54
54
  value: '',
55
55
  disabled: false,
56
56
  onChange: () => {},
57
+ onValidate: () => {},
57
58
  }}
58
59
  argTypes={inputArgTypes}
59
60
  >
package/lib/components/TsInput/TsInput/TsInput.css CHANGED
@@ -15,8 +15,17 @@
15
15
  border: 1px solid #e3262f;
16
16
  }
17
17
  .ts-input-error {
18
+ display: flex;
19
+ margin-top: 4px;
18
20
  color: #e3262f;
19
21
  }
22
+ .ts-input-error--icon {
23
+ margin-right: 4px;
24
+ }
25
+ .ts-input-error--label {
26
+ font-size: 12px;
27
+ font-weight: 500;
28
+ }
20
29
  input::placeholder {
21
30
  color: #7a7a7a;
22
31
  font-weight: 400;
package/lib/components/TsInput/TsInput/TsInput.js CHANGED
@@ -12,7 +12,7 @@ const TsInput = ({ icon, label, value, onChange, onValidate, ...props }) => {
12
12
  const handleBlur = (e) => {
13
13
  props.onBlur?.(e);
14
14
  if (onValidate) {
15
- const validateResult = onValidate(value);
15
+ const validateResult = onValidate();
16
16
  if (validateResult instanceof Promise)
17
17
  validateResult.then(setError);
18
18
  else
@@ -27,7 +27,10 @@ const TsInput = ({ icon, label, value, onChange, onValidate, ...props }) => {
27
27
  React.createElement("input", { type: "text", value: value, onBlur: handleBlur, onChange: e => onChange(e.target.value), ...props }),
28
28
  icon && (React.createElement("div", { className: "ts-input-icon" },
29
29
  React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })))),
30
- React.createElement("div", { className: "ts-input-error" }, error)));
30
+ error && (React.createElement("div", { className: "ts-input-error" },
31
+ React.createElement("div", { className: "ts-input-error--icon" },
32
+ React.createElement(TsIcon_1.TsIcon, { name: "alert-circle", size: "16" })),
33
+ React.createElement("div", { className: "ts-input-error--label" }, error)))));
31
34
  };
32
35
  exports.TsInput = TsInput;
33
36
  //# sourceMappingURL=TsInput.js.map
package/lib/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA6C;AAC7C,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QACN,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO,CACzC,CACP,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA6C;AAC7C,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;YACpC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,eAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,OAAO,WAuClB"}
package/lib/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -13,7 +13,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
13
13
  props.onBlur?.(e);
14
14
 
15
15
  if (onValidate) {
16
- const validateResult = onValidate(value);
16
+ const validateResult = onValidate();
17
17
  if (validateResult instanceof Promise) validateResult.then(setError);
18
18
  else setError(validateResult);
19
19
  }
@@ -32,7 +32,15 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
32
32
  </div>
33
33
  )}
34
34
  </div>
35
- <div className="ts-input-error">{error}</div>
35
+
36
+ {error && (
37
+ <div className="ts-input-error">
38
+ <div className="ts-input-error--icon">
39
+ <TsIcon name="alert-circle" size="16" />
40
+ </div>
41
+ <div className="ts-input-error--label">{error}</div>
42
+ </div>
43
+ )}
36
44
  </div>
37
45
  );
38
46
  };
package/lib/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -3,5 +3,5 @@ export type TsInputProps = {
3
3
  icon?: string;
4
4
  label?: string;
5
5
  onChange: (value: string) => void;
6
- onValidate?: (value?: string | number | readonly string[] | undefined) => Promise<string | undefined> | string | undefined;
6
+ onValidate?: () => Promise<string | undefined> | string | undefined;
7
7
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/lib/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -4,7 +4,5 @@ export type TsInputProps = {
4
4
  icon?: string;
5
5
  label?: string;
6
6
  onChange: (value: string) => void;
7
- onValidate?: (
8
- value?: string | number | readonly string[] | undefined,
9
- ) => Promise<string | undefined> | string | undefined;
7
+ onValidate?: () => Promise<string | undefined> | string | undefined;
10
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -54,6 +54,7 @@ Input allows the user to enter content and data when the expected user input is
54
54
  value: '',
55
55
  disabled: false,
56
56
  onChange: () => {},
57
+ onValidate: () => {},
57
58
  }}
58
59
  argTypes={inputArgTypes}
59
60
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.6.4",
3
+ "version": "1.6.6",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsInput/TsInput/TsInput.css CHANGED
@@ -15,8 +15,17 @@
15
15
  border: 1px solid #e3262f;
16
16
  }
17
17
  .ts-input-error {
18
+ display: flex;
19
+ margin-top: 4px;
18
20
  color: #e3262f;
19
21
  }
22
+ .ts-input-error--icon {
23
+ margin-right: 4px;
24
+ }
25
+ .ts-input-error--label {
26
+ font-size: 12px;
27
+ font-weight: 500;
28
+ }
20
29
  input::placeholder {
21
30
  color: #7a7a7a;
22
31
  font-weight: 400;
package/src/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -13,7 +13,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
13
13
  props.onBlur?.(e);
14
14
 
15
15
  if (onValidate) {
16
- const validateResult = onValidate(value);
16
+ const validateResult = onValidate();
17
17
  if (validateResult instanceof Promise) validateResult.then(setError);
18
18
  else setError(validateResult);
19
19
  }
@@ -32,7 +32,15 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
32
32
  </div>
33
33
  )}
34
34
  </div>
35
- <div className="ts-input-error">{error}</div>
35
+
36
+ {error && (
37
+ <div className="ts-input-error">
38
+ <div className="ts-input-error--icon">
39
+ <TsIcon name="alert-circle" size="16" />
40
+ </div>
41
+ <div className="ts-input-error--label">{error}</div>
42
+ </div>
43
+ )}
36
44
  </div>
37
45
  );
38
46
  };
package/src/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -4,7 +4,5 @@ export type TsInputProps = {
4
4
  icon?: string;
5
5
  label?: string;
6
6
  onChange: (value: string) => void;
7
- onValidate?: (
8
- value?: string | number | readonly string[] | undefined,
9
- ) => Promise<string | undefined> | string | undefined;
7
+ onValidate?: () => Promise<string | undefined> | string | undefined;
10
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -54,6 +54,7 @@ Input allows the user to enter content and data when the expected user input is
54
54
  value: '',
55
55
  disabled: false,
56
56
  onChange: () => {},
57
+ onValidate: () => {},
57
58
  }}
58
59
  argTypes={inputArgTypes}
59
60
  >