next-helios-fe 1.8.6 → 1.8.8

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.6",
3
+ "version": "1.8.8",
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>
@@ -4,7 +4,10 @@ import { Dropdown } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
 
6
6
  export interface MultipleSelectProps
7
- extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
7
+ extends Omit<
8
+ React.HTMLAttributes<HTMLDivElement>,
9
+ "defaultvalue" | "value" | "onChange"
10
+ > {
8
11
  menus: {
9
12
  label: string;
10
13
  value: string;
@@ -45,7 +48,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
45
48
  const [openDropdown, setOpenDropdown] = useState(false);
46
49
  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
47
50
  const [dropdownHeight, setDropdownHeight] = useState<number>(0);
48
- const inputRef = useRef<HTMLDivElement>(null);
51
+ const fakeInputRef = useRef<HTMLDivElement>(null);
52
+ const itemContainerRef = useRef<HTMLDivElement>(null);
53
+ const inputRef = useRef<HTMLInputElement>(null);
49
54
  const dropdownRef = useRef<HTMLButtonElement>(null);
50
55
  const width = options?.width === "fit" ? "w-fit" : "w-full";
51
56
  const height =
@@ -77,6 +82,22 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
77
82
  });
78
83
  }, [tempValue]);
79
84
 
85
+ useEffect(() => {
86
+ if (tempValue.length === 0) {
87
+ fakeInputRef.current;
88
+ }
89
+ }, [tempValue]);
90
+
91
+ useEffect(() => {
92
+ if (tempValue.length === 0) {
93
+ inputRef.current?.setCustomValidity(
94
+ "Please select some items in the list."
95
+ );
96
+ } else {
97
+ inputRef.current?.setCustomValidity("");
98
+ }
99
+ }, [tempValue]);
100
+
80
101
  return (
81
102
  <div className="flex flex-row-reverse items-end">
82
103
  <label className={`grid gap-2 ${width}`}>
@@ -103,7 +124,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
103
124
  )}
104
125
  <div className="relative flex items-center">
105
126
  <div
106
- ref={inputRef}
127
+ ref={fakeInputRef}
107
128
  className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
108
129
  disabled
109
130
  ? "bg-secondary-light cursor-default pointer-events-none"
@@ -119,24 +140,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
119
140
  setOpenDropdown(true);
120
141
  dropdownRef.current?.click();
121
142
  setDropdownWidth(
122
- inputRef?.current?.getBoundingClientRect()?.width || 0
143
+ fakeInputRef?.current?.getBoundingClientRect()?.width || 0
123
144
  );
124
145
  setDropdownHeight(
125
- inputRef?.current?.getBoundingClientRect()?.height || 0
146
+ fakeInputRef?.current?.getBoundingClientRect()?.height || 0
126
147
  );
127
148
  }}
128
149
  {...rest}
129
150
  >
130
151
  {!tempValue || tempValue?.length === 0 ? (
131
152
  <span
132
- className={`text-slate-300 select-none duration-300 ${
153
+ className={`text-silent select-none duration-300 ${
133
154
  openDropdown ? "translate-x-1" : "translate-x-0"
134
155
  }`}
135
156
  >
136
157
  {placeholder}
137
158
  </span>
138
159
  ) : (
139
- <div className="flex flex-wrap gap-2 h-min pointer-events-none invisible">
160
+ <div
161
+ ref={itemContainerRef}
162
+ className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
163
+ >
140
164
  {tempValue?.map((item) => {
141
165
  return (
142
166
  <div
@@ -157,15 +181,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
157
181
  })}
158
182
  </div>
159
183
  )}
160
- <div className="ms-auto text-xl text-slate-400 pointer-events-none">
184
+ <div className="ms-auto text-xl text-disabled pointer-events-none">
161
185
  <Icon
162
186
  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
163
187
  />
164
188
  </div>
165
189
  </div>
190
+ <input
191
+ ref={inputRef}
192
+ type="text"
193
+ className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
194
+ />
166
195
  <div
167
- className="absolute flex flex-wrap gap-2 h-min ps-4 pe-14 pointer-events-none"
168
- style={{ width: dropdownWidth - 52 }}
196
+ className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
197
+ style={{ width: itemContainerRef.current?.clientWidth }}
169
198
  >
170
199
  {tempValue?.map((item) => {
171
200
  return (
@@ -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();
@@ -61,6 +61,14 @@ export const Select: React.FC<SelectProps> = ({
61
61
  }
62
62
  }, [rest.value, rest.defaultValue]);
63
63
 
64
+ useEffect(() => {
65
+ if (!tempValue) {
66
+ inputRef.current?.setCustomValidity("Please select an item in the list.");
67
+ } else {
68
+ inputRef.current?.setCustomValidity("");
69
+ }
70
+ }, [tempValue]);
71
+
64
72
  return (
65
73
  <div className="flex flex-row-reverse items-end">
66
74
  <label className={`grid gap-2 ${width}`}>
@@ -90,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
90
98
  <input
91
99
  ref={inputRef}
92
100
  type="text"
93
- 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} ${
94
102
  openDropdown
95
103
  ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
96
104
  : "border-default placeholder:translate-x-0"
@@ -98,12 +106,12 @@ export const Select: React.FC<SelectProps> = ({
98
106
  placeholder={placeholder}
99
107
  required={rest.required}
100
108
  disabled={rest.disabled}
101
- readOnly
102
109
  value={
103
110
  tempValue
104
111
  ? menus.find((item) => item.value === tempValue)?.label
105
112
  : ""
106
113
  }
114
+ onChange={(e) => {}}
107
115
  onClick={(e) => {
108
116
  e.preventDefault();
109
117
  setOpenDropdown(true);
@@ -113,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
113
121
  );
114
122
  }}
115
123
  />
116
- <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">
117
125
  <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
118
126
  </div>
119
127
  </div>
@@ -174,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
174
182
  <button
175
183
  key={index}
176
184
  type="button"
177
- 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"
178
186
  disabled={item.disabled}
179
187
  onClick={() => {
180
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);