next-helios-fe 1.8.7 → 1.8.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.7",
3
+ "version": "1.8.9",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -61,7 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
61
61
  </div>
62
62
  <button
63
63
  type="button"
64
- className="flex justify-center items-center rounded-full p-1 text-slate-400 hover:bg-secondary-light"
64
+ className="flex justify-center items-center rounded-full p-1 text-disabled hover:bg-secondary-light"
65
65
  onClick={() => {
66
66
  setOpen(false);
67
67
  }}
@@ -68,10 +68,10 @@ export const Modal: React.FC<ModalProps> = ({
68
68
  <span className="text-lg">{title}</span>
69
69
  {!options?.disableClose && (
70
70
  <div className="flex items-center gap-2">
71
- <span className="text-sm text-slate-400">[esc]</span>
71
+ <span className="text-sm text-disabled">[esc]</span>
72
72
  <button
73
73
  type="button"
74
- className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
74
+ className="flex justify-center items-center rounded-full px-1 py-1 text-disabled hover:bg-secondary-light"
75
75
  onClick={() => {
76
76
  onClose && onClose();
77
77
  }}
@@ -108,7 +108,10 @@ export const Wizard: WizardComponent = ({
108
108
  setActiveTab(index);
109
109
  }}
110
110
  >
111
- <Icon icon={tab.icon} className="text-2xl pointer-events-none" />
111
+ <Icon
112
+ icon={tab.icon}
113
+ className="text-2xl pointer-events-none"
114
+ />
112
115
  </button>
113
116
  </div>
114
117
  <div className="flex flex-col items-center text-center">
@@ -135,7 +138,7 @@ export const Wizard: WizardComponent = ({
135
138
  <div className="flex justify-between">
136
139
  <button
137
140
  type="button"
138
- className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
141
+ className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
139
142
  disabled={activeTab === 0}
140
143
  onClick={() => {
141
144
  setActiveTab((prev) => prev - 1);
@@ -148,7 +151,7 @@ export const Wizard: WizardComponent = ({
148
151
  </button>
149
152
  <button
150
153
  type="button"
151
- className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
154
+ className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
152
155
  disabled={activeTab === childrenList.length - 1}
153
156
  onClick={() => {
154
157
  setActiveTab((prev) => prev + 1);
@@ -84,7 +84,7 @@ export const Dialog: React.FC<DialogProps> = ({
84
84
  <div className="flex justify-end gap-4">
85
85
  <button
86
86
  type="button"
87
- className={`disabled:text-slate-400 disabled:pointer-events-none ${actionVariant}`}
87
+ className={`disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
88
88
  disabled={loading}
89
89
  onClick={() => {
90
90
  action.onClick && action.onClick();
@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
47
47
  <div className="flex items-center gap-2">
48
48
  <span
49
49
  className={`flex-1 text-sm select-none ${
50
- rest.disabled ? "text-slate-400" : "cursor-pointer"
50
+ rest.disabled ? "text-disabled" : "cursor-pointer"
51
51
  }`}
52
52
  >
53
53
  {label}
@@ -75,7 +75,7 @@ export const Color: React.FC<ColorProps> = ({
75
75
  <div className="relative flex flex-col">
76
76
  <button
77
77
  type="button"
78
- className={`h-full px-4 border-default border rounded-md text-slate-400 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
78
+ className={`h-full px-4 border-default border rounded-md text-disabled cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
79
79
  style={{ backgroundColor: tempValue }}
80
80
  tabIndex={-1}
81
81
  onClick={() => {
@@ -99,14 +99,14 @@ export const Color: React.FC<ColorProps> = ({
99
99
  <div className="relative flex-1 flex items-center">
100
100
  <input
101
101
  type="text"
102
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
102
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
103
103
  placeholder={rest.placeholder}
104
104
  value={tempValue}
105
105
  onChange={(e) => setTempValue(e.target.value.toUpperCase())}
106
106
  />
107
107
  <button
108
108
  type="button"
109
- className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
109
+ className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
110
110
  tabIndex={-1}
111
111
  onClick={(e) => {
112
112
  e.preventDefault();
@@ -111,7 +111,7 @@ export const Date: React.FC<DateProps> = ({
111
111
  <div className="relative flex items-center">
112
112
  <input
113
113
  type="text"
114
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
114
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
115
115
  disabled={rest.disabled}
116
116
  readOnly
117
117
  value={
@@ -128,7 +128,7 @@ export const Date: React.FC<DateProps> = ({
128
128
  />
129
129
  <button
130
130
  type="button"
131
- className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
131
+ className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
132
132
  tabIndex={-1}
133
133
  disabled={rest.disabled}
134
134
  onClick={(e) => {
@@ -61,7 +61,7 @@ export const Email: React.FC<EmailProps> = ({
61
61
  )}
62
62
  <input
63
63
  type="email"
64
- className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
64
+ className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
65
65
  {...rest}
66
66
  />
67
67
  </label>
@@ -105,7 +105,7 @@ export const File: React.FC<FileProps> = ({
105
105
  <input
106
106
  ref={inputRef}
107
107
  type="file"
108
- className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
108
+ className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
109
109
  onChange={(e) => {
110
110
  if (rest.onChange) {
111
111
  rest.onChange({
@@ -120,7 +120,7 @@ export const File: React.FC<FileProps> = ({
120
120
  <span
121
121
  className={`absolute px-4 pointer-events-none ${
122
122
  tempFile.length === 0 &&
123
- "text-slate-300 duration-300 translate-x-0 peer-focus/file:translate-x-1"
123
+ "text-silent duration-300 translate-x-0 peer-focus/file:translate-x-1"
124
124
  }`}
125
125
  >
126
126
  {tempFile[0]?.name ?? rest.placeholder}
@@ -194,14 +194,14 @@ export const File: React.FC<FileProps> = ({
194
194
  tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
195
195
  }
196
196
  className={`text-5xl ${
197
- tempFile.length !== 0 ? "" : "text-slate-400"
197
+ tempFile.length !== 0 ? "" : "text-disabled"
198
198
  }`}
199
199
  />
200
200
  <div className="flex flex-col gap-2 items-center">
201
201
  {tempFile.length !== 0 ? (
202
202
  <span>{tempFile[0]?.name}</span>
203
203
  ) : (
204
- <div className="flex gap-2 text-slate-400">
204
+ <div className="flex gap-2 text-disabled">
205
205
  <span className="underline underline-offset-2">
206
206
  Click to upload
207
207
  </span>
@@ -210,7 +210,7 @@ export const File: React.FC<FileProps> = ({
210
210
  )}
211
211
  <span
212
212
  className={`text-sm font-light ${
213
- tempFile.length !== 0 ? "" : "text-slate-400"
213
+ tempFile.length !== 0 ? "" : "text-disabled"
214
214
  }`}
215
215
  >
216
216
  {tempFile.length !== 0
@@ -65,7 +65,7 @@ export const Number: React.FC<NumberProps> = ({
65
65
  <input
66
66
  ref={inputRef}
67
67
  type="number"
68
- className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
68
+ className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
69
69
  {...rest}
70
70
  />
71
71
  <div className="absolute right-4 flex gap-2">
@@ -63,12 +63,12 @@ export const Password: React.FC<PasswordProps> = ({
63
63
  <div className="relative flex items-center">
64
64
  <input
65
65
  type={show ? "text" : "password"}
66
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
66
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
67
67
  {...rest}
68
68
  />
69
69
  <button
70
70
  type="button"
71
- className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
71
+ className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
72
72
  tabIndex={-1}
73
73
  onClick={(e) => {
74
74
  e.preventDefault();
@@ -46,7 +46,7 @@ export const Radio: React.FC<RadioProps> = ({
46
46
  <div className="flex items-center gap-2">
47
47
  <span
48
48
  className={`flex-1 text-sm select-none ${
49
- rest.disabled ? "text-slate-400" : "cursor-pointer"
49
+ rest.disabled ? "text-disabled" : "cursor-pointer"
50
50
  }`}
51
51
  >
52
52
  {label}
@@ -23,17 +23,17 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
23
23
  <label className={`relative flex items-center ${width}`}>
24
24
  <Icon
25
25
  icon="ic:round-search"
26
- className="absolute left-3 text-lg text-slate-400"
26
+ className="absolute left-3 text-lg text-disabled"
27
27
  />
28
28
  <input
29
29
  type="search"
30
- className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
30
+ className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
31
31
  {...rest}
32
32
  />
33
33
  {rest.value && (
34
34
  <div
35
35
  className={
36
- "absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
36
+ "absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
37
37
  }
38
38
  onClick={() => {
39
39
  rest.onChange &&
@@ -60,7 +60,7 @@ export const Text: React.FC<TextProps> = ({
60
60
  )}
61
61
  <input
62
62
  type="text"
63
- className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
63
+ className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
64
64
  {...rest}
65
65
  />
66
66
  </label>
@@ -184,7 +184,7 @@ export const Time: React.FC<TimeProps> = ({
184
184
  <div className="relative flex items-center">
185
185
  <input
186
186
  type="time"
187
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
187
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
188
188
  value={tempValue}
189
189
  onChange={(e) => {
190
190
  setTempValue(e.target.value);
@@ -193,7 +193,7 @@ export const Time: React.FC<TimeProps> = ({
193
193
  />
194
194
  <button
195
195
  type="button"
196
- className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
196
+ className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
197
197
  tabIndex={-1}
198
198
  disabled={rest.disabled}
199
199
  onClick={(e) => {
@@ -138,7 +138,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
138
138
  >
139
139
  <input
140
140
  type="text"
141
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
141
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
142
142
  placeholder={placeholder}
143
143
  required={rest.required}
144
144
  disabled={rest.disabled}
@@ -152,7 +152,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
152
152
  setTempFilter("");
153
153
  }}
154
154
  />
155
- <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
155
+ <div className="absolute right-4 text-xl text-disabled pointer-events-none">
156
156
  <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
157
157
  </div>
158
158
  </div>
@@ -69,25 +69,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
69
69
  }, []);
70
70
 
71
71
  useEffect(() => {
72
- if (value) {
72
+ if (value?.length) {
73
73
  setTempValue(value);
74
74
  return;
75
75
  }
76
76
  }, [value]);
77
77
 
78
- useEffect(() => {
79
- onChange &&
80
- onChange({
81
- target: { value: tempValue },
82
- });
83
- }, [tempValue]);
84
-
85
- useEffect(() => {
86
- if (tempValue.length === 0) {
87
- fakeInputRef.current;
88
- }
89
- }, [tempValue]);
90
-
91
78
  useEffect(() => {
92
79
  if (tempValue.length === 0) {
93
80
  inputRef.current?.setCustomValidity(
@@ -150,7 +137,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
150
137
  >
151
138
  {!tempValue || tempValue?.length === 0 ? (
152
139
  <span
153
- className={`text-slate-300 select-none duration-300 ${
140
+ className={`text-silent select-none duration-300 ${
154
141
  openDropdown ? "translate-x-1" : "translate-x-0"
155
142
  }`}
156
143
  >
@@ -168,12 +155,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
168
155
  className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default pointer-events-auto"
169
156
  >
170
157
  <span>{menus.find((i) => i.value === item)?.label}</span>
171
- <div
172
- className="cursor-pointer"
173
- onClick={() => {
174
- setTempValue(tempValue.filter((i) => i !== item));
175
- }}
176
- >
158
+ <div className="cursor-pointer">
177
159
  <Icon icon="pajamas:close" />
178
160
  </div>
179
161
  </div>
@@ -181,7 +163,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
181
163
  })}
182
164
  </div>
183
165
  )}
184
- <div className="ms-auto text-xl text-slate-400 pointer-events-none">
166
+ <div className="ms-auto text-xl text-disabled pointer-events-none">
185
167
  <Icon
186
168
  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
187
169
  />
@@ -210,6 +192,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
210
192
  onClick={() => {
211
193
  if (!disabled) {
212
194
  setTempValue(tempValue.filter((i) => i !== item));
195
+ if (onChange) {
196
+ onChange({
197
+ target: {
198
+ value: tempValue.filter((i) => i !== item),
199
+ },
200
+ } as any);
201
+ }
213
202
  }
214
203
  }}
215
204
  >
@@ -258,6 +247,11 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
258
247
  }
259
248
  onClick={() => {
260
249
  setTempValue([...tempValue, item.value]);
250
+ if (onChange) {
251
+ onChange({
252
+ target: { value: [...tempValue, item.value] },
253
+ } as any);
254
+ }
261
255
  }}
262
256
  >
263
257
  {item.label}
@@ -1595,7 +1595,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1595
1595
  <div className="flex flex-row-reverse gap-4">
1596
1596
  <div className="relative flex-1 flex items-center">
1597
1597
  <div className="absolute left-0 flex justify-center w-14 border-r">
1598
- <span className="text-slate-400">
1598
+ <span className="text-disabled">
1599
1599
  {countryCodes.find(
1600
1600
  (item) => item.code === tempValue[0].split(" ")[1]
1601
1601
  )?.dial_code || ""}
@@ -1603,7 +1603,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1603
1603
  </div>
1604
1604
  <input
1605
1605
  type="number"
1606
- className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
1606
+ className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
1607
1607
  value={tempValue[1]}
1608
1608
  onChange={(e) => {
1609
1609
  setTempValue((prev) => [prev[0], e.target.value]);
@@ -1614,7 +1614,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1614
1614
  <div className="relative" ref={triggerRef}>
1615
1615
  <input
1616
1616
  type="text"
1617
- className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
1617
+ className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height}`}
1618
1618
  disabled={rest.disabled}
1619
1619
  value={tempValue[0]}
1620
1620
  onChange={(e) => {
@@ -53,7 +53,7 @@ export const Pin: React.FC<PinProps> = ({
53
53
  )}
54
54
  <div className="flex items-center gap-4">
55
55
  <PinField
56
- className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
56
+ className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
57
57
  length={6}
58
58
  validate={/^[0-9]$/}
59
59
  onChange={(value) => {
@@ -98,7 +98,7 @@ export const Rating: React.FC<RatingProps> = ({
98
98
  }
99
99
  }}
100
100
  className={`duration-300 ease-in-out ${starHeight} ${
101
- rest.disabled ? "text-slate-400" : "text-warning"
101
+ rest.disabled ? "text-disabled" : "text-warning"
102
102
  }`}
103
103
  >
104
104
  <Icon
@@ -58,7 +58,7 @@ export const Secret: React.FC<SecretProps> = ({
58
58
  <div className="relative flex items-center">
59
59
  <input
60
60
  type="text"
61
- className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
61
+ className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
62
62
  value={show ? value : value ? value.slice(0, 3) + ".." : ""}
63
63
  disabled
64
64
  {...rest}
@@ -66,7 +66,7 @@ export const Secret: React.FC<SecretProps> = ({
66
66
  <div className="absolute right-4 flex">
67
67
  <button
68
68
  type="button"
69
- className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
69
+ className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
70
70
  tabIndex={-1}
71
71
  onClick={(e) => {
72
72
  e.preventDefault();
@@ -77,7 +77,7 @@ export const Secret: React.FC<SecretProps> = ({
77
77
  </button>
78
78
  <button
79
79
  type="button"
80
- className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
80
+ className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
81
81
  tabIndex={-1}
82
82
  onClick={(e) => {
83
83
  e.preventDefault();
@@ -98,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
98
98
  <input
99
99
  ref={inputRef}
100
100
  type="text"
101
- className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height} ${
101
+ className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
102
102
  openDropdown
103
103
  ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
104
104
  : "border-default placeholder:translate-x-0"
@@ -121,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
121
121
  );
122
122
  }}
123
123
  />
124
- <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
124
+ <div className="absolute right-4 text-xl text-disabled pointer-events-none">
125
125
  <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
126
126
  </div>
127
127
  </div>
@@ -182,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
182
182
  <button
183
183
  key={index}
184
184
  type="button"
185
- className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-slate-400"
185
+ className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-disabled"
186
186
  disabled={item.disabled}
187
187
  onClick={() => {
188
188
  setTempValue(item.value);
@@ -61,7 +61,7 @@ export const Textarea: React.FC<TextareaProps> = ({
61
61
  )}
62
62
  <textarea
63
63
  rows={rest.rows || 10}
64
- className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
64
+ className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
65
65
  {...rest}
66
66
  />
67
67
  </label>
@@ -31,7 +31,7 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
31
31
  {codeString}
32
32
  </SH>
33
33
  <div
34
- className="absolute top-4 right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
34
+ className="absolute top-4 right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
35
35
  onClick={(e) => {
36
36
  e.preventDefault();
37
37
  navigator.clipboard.writeText(codeString);
@@ -348,11 +348,11 @@ export const Table: TableComponentProps = ({
348
348
  <div className="relative flex items-center">
349
349
  <Icon
350
350
  icon="ic:round-search"
351
- className="absolute text-sm text-slate-400"
351
+ className="absolute text-sm text-disabled"
352
352
  />
353
353
  <input
354
354
  type="search"
355
- className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
355
+ className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
356
356
  placeholder="search.."
357
357
  value={
358
358
  filter?.find((filterItem) => filterItem.key === item.key)
@@ -371,7 +371,7 @@ export const Table: TableComponentProps = ({
371
371
  {filter?.find((filterItem) => filterItem.key === item.key)
372
372
  ?.value && (
373
373
  <button
374
- className="absolute right-0 rounded-full text-slate-400 hover:bg-secondary-light"
374
+ className="absolute right-0 rounded-full text-disabled hover:bg-secondary-light"
375
375
  onClick={() => {
376
376
  setFilter(
377
377
  filter?.map((filterItem) => {
@@ -669,7 +669,7 @@ export const Table: TableComponentProps = ({
669
669
  <div className="invisible w-0 overflow-hidden">
670
670
  <input
671
671
  type="search"
672
- className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
672
+ className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
673
673
  />
674
674
  </div>
675
675
  )}
@@ -684,7 +684,7 @@ export const Table: TableComponentProps = ({
684
684
  <div className="invisible w-0 overflow-hidden">
685
685
  <input
686
686
  type="search"
687
- className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
687
+ className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
688
688
  />
689
689
  </div>
690
690
  )}
@@ -701,7 +701,7 @@ export const Table: TableComponentProps = ({
701
701
  <div className="invisible w-0 overflow-hidden">
702
702
  <input
703
703
  type="search"
704
- className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
704
+ className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
705
705
  />
706
706
  </div>
707
707
  )}
@@ -768,7 +768,7 @@ export const Table: TableComponentProps = ({
768
768
  />
769
769
  </div>
770
770
  {filteredData && filteredData.length !== 0 && (
771
- <span className="hidden md:block text-sm text-slate-400">{`Showing ${
771
+ <span className="hidden md:block text-sm text-disabled">{`Showing ${
772
772
  (page - 1) * maxRow + 1
773
773
  } to ${
774
774
  page * maxRow > filteredData?.length
@@ -779,7 +779,7 @@ export const Table: TableComponentProps = ({
779
779
  <div className="flex items-center gap-2 text-xs">
780
780
  <button
781
781
  type="button"
782
- className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
782
+ className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
783
783
  disabled={page === 1}
784
784
  onClick={() => {
785
785
  setPage(1);
@@ -793,7 +793,7 @@ export const Table: TableComponentProps = ({
793
793
  </button>
794
794
  <button
795
795
  type="button"
796
- className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
796
+ className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
797
797
  disabled={page === 1}
798
798
  onClick={() => {
799
799
  setPage((prev) => prev - 1);
@@ -827,7 +827,7 @@ export const Table: TableComponentProps = ({
827
827
  </div>
828
828
  <button
829
829
  type="button"
830
- className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
830
+ className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
831
831
  disabled={filteredData?.length <= page * maxRow}
832
832
  onClick={() => {
833
833
  setPage((prev) => prev + 1);
@@ -838,7 +838,7 @@ export const Table: TableComponentProps = ({
838
838
  </button>
839
839
  <button
840
840
  type="button"
841
- className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
841
+ className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
842
842
  disabled={filteredData?.length <= page * maxRow}
843
843
  onClick={() => {
844
844
  setPage(Math.ceil(filteredData?.length / maxRow));