sprint-asia-custom-component 0.1.76 → 0.1.77

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 (3) hide show
  1. package/dist/index.js +20 -17
  2. package/package.json +1 -1
  3. package/src/components/textinput/index.js +23 -18
package/dist/index.js CHANGED
@@ -28936,7 +28936,9 @@
28936
28936
  isRequired = true,
28937
28937
  value,
28938
28938
  onChangeInput,
28939
- className = ""
28939
+ className = "",
28940
+ rightAdornment,
28941
+ leftAdornment
28940
28942
  }) => {
28941
28943
  const [isFocused, setIsFocused] = React.useState(false);
28942
28944
  const [showPassword, setShowPassword] = React.useState(false);
@@ -28959,15 +28961,15 @@
28959
28961
  className: "text-sm font-normal text-danger500 ml-1"
28960
28962
  }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
28961
28963
  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, {
28964
+ }, /*#__PURE__*/React__default["default"].createElement("section", {
28965
+ className: "absolute inset-y-0 left-0 pl-2 flex items-center justify-center gap-2"
28966
+ }, leftAdornment && leftAdornment, leftIcon && /*#__PURE__*/React__default["default"].createElement(PiInfo, {
28965
28967
  size: 16,
28966
28968
  className: `
28967
- ${mode === "primary" && "text-black"}
28968
- ${mode === "disable" && "text-neutral50"}
28969
- ${mode === "danger" && "text-danger500"}
28970
- `
28969
+ ${mode === "primary" && "text-black"}
28970
+ ${mode === "disable" && "text-neutral50"}
28971
+ ${mode === "danger" && "text-danger500"}
28972
+ `
28971
28973
  })), /*#__PURE__*/React__default["default"].createElement("input", {
28972
28974
  type: type === "password" ? showPassword ? "text" : "password" : type,
28973
28975
  className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
@@ -28976,9 +28978,10 @@
28976
28978
  ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
28977
28979
  ${mode === "disable" && "bg-neutral30 border-neutral50"}
28978
28980
  ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
28979
- ${leftIcon ? "pl-10" : "pl-3"}
28980
- ${rightIcon ? "pr-10" : "pr-3"}`,
28981
+ ${leftIcon ? "pl-8" : "pl-3"}
28982
+ ${rightIcon ? "pr-8" : "pr-3"}`,
28981
28983
  placeholder: placeholder,
28984
+ "data-mask": "000.000.000-00",
28982
28985
  disabled: mode === "disable",
28983
28986
  value: value,
28984
28987
  onChange: onChangeInput,
@@ -28993,15 +28996,15 @@
28993
28996
  }) : /*#__PURE__*/React__default["default"].createElement(PiEyeClosedLight, {
28994
28997
  size: 16,
28995
28998
  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, {
28999
+ })), /*#__PURE__*/React__default["default"].createElement("section", {
29000
+ className: "absolute inset-y-0 right-0 pr-4 flex items-center justify-center gap-2"
29001
+ }, rightAdornment && rightAdornment, rightIcon && /*#__PURE__*/React__default["default"].createElement(PiInfo, {
28999
29002
  size: 16,
29000
29003
  className: `
29001
- ${mode === "primary" && "text-black"}
29002
- ${mode === "disable" && "text-neutral50"}
29003
- ${mode === "danger" && "text-danger500"}
29004
- `
29004
+ ${mode === "primary" && "text-black"}
29005
+ ${mode === "disable" && "text-neutral50"}
29006
+ ${mode === "danger" && "text-danger500"}
29007
+ `
29005
29008
  }))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
29006
29009
  className: "mt-1"
29007
29010
  }, 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.77",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
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 && (