sprint-asia-custom-component 0.1.76 → 0.1.78

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 (5) hide show
  1. package/dist/index.js +23 -19
  2. package/package.json +1 -1
  3. package/src/components/chip/index.js +3 -2
  4. package/src/components/textarea/index.js +122 -0
  5. package/src/components/textinput/index.js +23 -18
package/dist/index.js CHANGED
@@ -351,13 +351,14 @@
351
351
  }) => {
352
352
  return /*#__PURE__*/React__default["default"].createElement("a", {
353
353
  className: `
354
- ${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer"}
354
+ ${type == "white" && "text-neutral300 border-white bg-neutral40"}
355
+ ${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
355
356
  ${type == "success" && "text-success600 border-success600 bg-success50"}
356
357
  ${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
357
358
  ${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
358
359
  ${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
359
360
  ${type == "danger" && "text-danger800 border-danger800 bg-danger50"}
360
- ' rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`,
361
+ ' cursor-pointer rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`,
361
362
  onClick: onClick
362
363
  }, /*#__PURE__*/React__default["default"].createElement("div", {
363
364
  className: "flex items-center"
@@ -28936,7 +28937,9 @@
28936
28937
  isRequired = true,
28937
28938
  value,
28938
28939
  onChangeInput,
28939
- className = ""
28940
+ className = "",
28941
+ rightAdornment,
28942
+ leftAdornment
28940
28943
  }) => {
28941
28944
  const [isFocused, setIsFocused] = React.useState(false);
28942
28945
  const [showPassword, setShowPassword] = React.useState(false);
@@ -28959,15 +28962,15 @@
28959
28962
  className: "text-sm font-normal text-danger500 ml-1"
28960
28963
  }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
28961
28964
  className: "relative rounded-md"
28962
- }, leftIcon && /*#__PURE__*/React__default["default"].createElement("span", {
28963
- className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
28964
- }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
28965
+ }, /*#__PURE__*/React__default["default"].createElement("section", {
28966
+ className: "absolute inset-y-0 left-0 pl-2 flex items-center justify-center gap-2"
28967
+ }, leftAdornment && leftAdornment, leftIcon && /*#__PURE__*/React__default["default"].createElement(PiInfo, {
28965
28968
  size: 16,
28966
28969
  className: `
28967
- ${mode === "primary" && "text-black"}
28968
- ${mode === "disable" && "text-neutral50"}
28969
- ${mode === "danger" && "text-danger500"}
28970
- `
28970
+ ${mode === "primary" && "text-black"}
28971
+ ${mode === "disable" && "text-neutral50"}
28972
+ ${mode === "danger" && "text-danger500"}
28973
+ `
28971
28974
  })), /*#__PURE__*/React__default["default"].createElement("input", {
28972
28975
  type: type === "password" ? showPassword ? "text" : "password" : type,
28973
28976
  className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
@@ -28976,9 +28979,10 @@
28976
28979
  ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
28977
28980
  ${mode === "disable" && "bg-neutral30 border-neutral50"}
28978
28981
  ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
28979
- ${leftIcon ? "pl-10" : "pl-3"}
28980
- ${rightIcon ? "pr-10" : "pr-3"}`,
28982
+ ${leftIcon ? "pl-8" : "pl-3"}
28983
+ ${rightIcon ? "pr-8" : "pr-3"}`,
28981
28984
  placeholder: placeholder,
28985
+ "data-mask": "000.000.000-00",
28982
28986
  disabled: mode === "disable",
28983
28987
  value: value,
28984
28988
  onChange: onChangeInput,
@@ -28993,15 +28997,15 @@
28993
28997
  }) : /*#__PURE__*/React__default["default"].createElement(PiEyeClosedLight, {
28994
28998
  size: 16,
28995
28999
  className: `text-black ${mode === "danger" && "text-danger500"}`
28996
- })), rightIcon && /*#__PURE__*/React__default["default"].createElement("span", {
28997
- className: "absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"
28998
- }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
29000
+ })), /*#__PURE__*/React__default["default"].createElement("section", {
29001
+ className: "absolute inset-y-0 right-0 pr-4 flex items-center justify-center gap-2"
29002
+ }, rightAdornment && rightAdornment, rightIcon && /*#__PURE__*/React__default["default"].createElement(PiInfo, {
28999
29003
  size: 16,
29000
29004
  className: `
29001
- ${mode === "primary" && "text-black"}
29002
- ${mode === "disable" && "text-neutral50"}
29003
- ${mode === "danger" && "text-danger500"}
29004
- `
29005
+ ${mode === "primary" && "text-black"}
29006
+ ${mode === "disable" && "text-neutral50"}
29007
+ ${mode === "danger" && "text-danger500"}
29008
+ `
29005
29009
  }))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
29006
29010
  className: "mt-1"
29007
29011
  }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.76",
4
+ "version": "0.1.78",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/chip/index.js CHANGED
@@ -4,13 +4,14 @@ const Chip = ({ title = "Approve", type = "success", onClick }) => {
4
4
  return (
5
5
  <a
6
6
  className={`
7
- ${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer"}
7
+ ${type == "white" && "text-neutral300 border-white bg-neutral40"}
8
+ ${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
8
9
  ${type == "success" && "text-success600 border-success600 bg-success50"}
9
10
  ${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
10
11
  ${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
11
12
  ${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
12
13
  ${type == "danger" && "text-danger800 border-danger800 bg-danger50"}
13
- ' rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`}
14
+ ' cursor-pointer rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`}
14
15
  onClick={onClick}
15
16
  >
16
17
  <div className="flex items-center">
package/src/components/textarea/index.js ADDED
@@ -0,0 +1,122 @@
1
+ import React, { useState } from "react";
2
+ import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
3
+
4
+ const TextArea = ({
5
+ title = "",
6
+ leftIcon = null,
7
+ rightIcon = null,
8
+ placeholder = "",
9
+ footer = null,
10
+ type = "text",
11
+ mode = "default",
12
+ isRequired = true,
13
+ value,
14
+ onChangeInput,
15
+ className = "",
16
+ }) => {
17
+ const [isFocused, setIsFocused] = useState(false);
18
+ const [showPassword, setShowPassword] = useState(false);
19
+
20
+ const handleFocus = () => {
21
+ setIsFocused(true);
22
+ };
23
+
24
+ const handleBlur = () => {
25
+ setIsFocused(false);
26
+ };
27
+
28
+ const handleTogglePasswordVisibility = () => {
29
+ setShowPassword(!showPassword);
30
+ };
31
+
32
+ return (
33
+ <div className={`w-full ${className}`}>
34
+ {title && (
35
+ <div className="flex">
36
+ <p className="text-sm font-normal text-black mb-1">{title}</p>
37
+ {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
38
+ </div>
39
+ )}
40
+
41
+ <div className="relative rounded-md">
42
+ {leftIcon && (
43
+ <span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
44
+ <PiInfo
45
+ size={16}
46
+ className={`
47
+ ${mode === "primary" && "text-black"}
48
+ ${mode === "disable" && "text-neutral50"}
49
+ ${mode === "danger" && "text-danger500"}
50
+ `}
51
+ />
52
+ </span>
53
+ )}
54
+
55
+ <textarea
56
+ type={type === "password" ? (showPassword ? "text" : "password") : type}
57
+ className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
58
+ ${
59
+ !value &&
60
+ mode === "default" &&
61
+ "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
62
+ }
63
+ ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
64
+ ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
65
+ ${mode === "disable" && "bg-neutral30 border-neutral50"}
66
+ ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
67
+ ${leftIcon ? "pl-10" : "pl-3"}
68
+ ${rightIcon ? "pr-10" : "pr-3"}`}
69
+ placeholder={placeholder}
70
+ disabled={mode === "disable"}
71
+ value={value}
72
+ onChange={onChangeInput}
73
+ onFocus={handleFocus}
74
+ onBlur={handleBlur}
75
+ />
76
+
77
+ {type === "password" && (
78
+ <span
79
+ className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer"
80
+ onClick={handleTogglePasswordVisibility}
81
+ >
82
+ {showPassword ? (
83
+ <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
84
+ ) : (
85
+ <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
86
+ )}
87
+ </span>
88
+ )}
89
+
90
+ {rightIcon && (
91
+ <span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
92
+ <PiInfo
93
+ size={16}
94
+ className={`
95
+ ${mode === "primary" && "text-black"}
96
+ ${mode === "disable" && "text-neutral50"}
97
+ ${mode === "danger" && "text-danger500"}
98
+ `}
99
+ />
100
+ </span>
101
+ )}
102
+ </div>
103
+
104
+ {footer && (
105
+ <div>
106
+ {mode === "danger" ? (
107
+ <div className="flex">
108
+ <div>
109
+ <PiInfo size={16} className="text-danger500" />
110
+ </div>
111
+ <p className="text-danger500 text-xs ml-1">{footer}</p>
112
+ </div>
113
+ ) : (
114
+ <p className="text-black text-xs">{footer}</p>
115
+ )}
116
+ </div>
117
+ )}
118
+ </div>
119
+ );
120
+ };
121
+
122
+ export default TextArea;
package/src/components/textinput/index.js CHANGED
@@ -13,6 +13,8 @@ const TextInput = ({
13
13
  value,
14
14
  onChangeInput,
15
15
  className = "",
16
+ rightAdornment,
17
+ leftAdornment,
16
18
  }) => {
17
19
  const [isFocused, setIsFocused] = useState(false);
18
20
  const [showPassword, setShowPassword] = useState(false);
@@ -39,18 +41,19 @@ const TextInput = ({
39
41
  )}
40
42
 
41
43
  <div className="relative rounded-md">
42
- {leftIcon && (
43
- <span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
44
+ <section className="absolute inset-y-0 left-0 pl-2 flex items-center justify-center gap-2">
45
+ {leftAdornment && leftAdornment}
46
+ {leftIcon && (
44
47
  <PiInfo
45
48
  size={16}
46
49
  className={`
47
- ${mode === "primary" && "text-black"}
48
- ${mode === "disable" && "text-neutral50"}
49
- ${mode === "danger" && "text-danger500"}
50
- `}
50
+ ${mode === "primary" && "text-black"}
51
+ ${mode === "disable" && "text-neutral50"}
52
+ ${mode === "danger" && "text-danger500"}
53
+ `}
51
54
  />
52
- </span>
53
- )}
55
+ )}
56
+ </section>
54
57
 
55
58
  <input
56
59
  type={type === "password" ? (showPassword ? "text" : "password") : type}
@@ -64,9 +67,10 @@ const TextInput = ({
64
67
  ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
65
68
  ${mode === "disable" && "bg-neutral30 border-neutral50"}
66
69
  ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
67
- ${leftIcon ? "pl-10" : "pl-3"}
68
- ${rightIcon ? "pr-10" : "pr-3"}`}
70
+ ${leftIcon ? "pl-8" : "pl-3"}
71
+ ${rightIcon ? "pr-8" : "pr-3"}`}
69
72
  placeholder={placeholder}
73
+ data-mask="000.000.000-00"
70
74
  disabled={mode === "disable"}
71
75
  value={value}
72
76
  onChange={onChangeInput}
@@ -87,18 +91,19 @@ const TextInput = ({
87
91
  </span>
88
92
  )}
89
93
 
90
- {rightIcon && (
91
- <span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
94
+ <section className="absolute inset-y-0 right-0 pr-4 flex items-center justify-center gap-2">
95
+ {rightAdornment && rightAdornment}
96
+ {rightIcon && (
92
97
  <PiInfo
93
98
  size={16}
94
99
  className={`
95
- ${mode === "primary" && "text-black"}
96
- ${mode === "disable" && "text-neutral50"}
97
- ${mode === "danger" && "text-danger500"}
98
- `}
100
+ ${mode === "primary" && "text-black"}
101
+ ${mode === "disable" && "text-neutral50"}
102
+ ${mode === "danger" && "text-danger500"}
103
+ `}
99
104
  />
100
- </span>
101
- )}
105
+ )}
106
+ </section>
102
107
  </div>
103
108
 
104
109
  {footer && (