next-helios-fe 1.6.27 → 1.6.28

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.6.27",
3
+ "version": "1.6.28",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -49,23 +49,28 @@ export const Color: React.FC<ColorProps> = ({
49
49
 
50
50
  return (
51
51
  <label className={`grid gap-2 ${width}`}>
52
- <div className="flex justify-between items-center">
53
- {label && (
54
- <span
55
- className={`text-sm select-none ${
56
- rest.required &&
57
- "after:content-['*'] after:ml-1 after:text-danger"
58
- }`}
59
- >
60
- {label}
61
- </span>
62
- )}
63
- {description && (
64
- <span title={description} className="text-sm text-primary-dark">
65
- <Icon icon="octicon:info-16" />
66
- </span>
67
- )}
68
- </div>
52
+ {(label || description) && (
53
+ <div className="flex items-center">
54
+ {label && (
55
+ <span
56
+ className={`text-sm select-none ${
57
+ rest.required &&
58
+ "after:content-['*'] after:ml-1 after:text-danger"
59
+ }`}
60
+ >
61
+ {label}
62
+ </span>
63
+ )}
64
+ {description && (
65
+ <span
66
+ title={description}
67
+ className="ms-auto text-sm text-primary-dark"
68
+ >
69
+ <Icon icon="octicon:info-16" />
70
+ </span>
71
+ )}
72
+ </div>
73
+ )}
69
74
  <div className="flex gap-4">
70
75
  <div className="relative flex flex-col">
71
76
  <button
@@ -46,23 +46,28 @@ export const Date: React.FC<DateProps> = ({
46
46
  return (
47
47
  <div className="flex items-end">
48
48
  <label className={`grid gap-2 ${width}`}>
49
- <div className="flex justify-between items-center">
50
- {label && (
51
- <span
52
- className={`text-sm select-none ${
53
- rest.required &&
54
- "after:content-['*'] after:ml-1 after:text-danger"
55
- }`}
56
- >
57
- {label}
58
- </span>
59
- )}
60
- {description && (
61
- <span title={description} className="text-sm text-primary-dark">
62
- <Icon icon="octicon:info-16" />
63
- </span>
64
- )}
65
- </div>
49
+ {(label || description) && (
50
+ <div className="flex items-center">
51
+ {label && (
52
+ <span
53
+ className={`text-sm select-none ${
54
+ rest.required &&
55
+ "after:content-['*'] after:ml-1 after:text-danger"
56
+ }`}
57
+ >
58
+ {label}
59
+ </span>
60
+ )}
61
+ {description && (
62
+ <span
63
+ title={description}
64
+ className="ms-auto text-sm text-primary-dark"
65
+ >
66
+ <Icon icon="octicon:info-16" />
67
+ </span>
68
+ )}
69
+ </div>
70
+ )}
66
71
  <div className="relative flex items-center">
67
72
  <input
68
73
  type="text"
@@ -29,32 +29,36 @@ export const Email: React.FC<EmailProps> = ({
29
29
 
30
30
  return (
31
31
  <label className={`grid gap-2 ${width}`}>
32
- <div className="flex justify-between">
33
- {label && (
34
- <span
35
- className={`text-sm select-none ${
36
- rest.required &&
37
- "after:content-['*'] after:ml-1 after:text-danger"
38
- }`}
39
- >
40
- {label}
41
- </span>
42
- )}
43
- {!options?.hideInputDetail && (
44
- <div className="flex items-center gap-2">
45
- {(rest.minLength || rest.maxLength) && (
46
- <span className="text-sm select-none">
47
- {rest.minLength || 0}/{rest.maxLength || "∞"}
48
- </span>
49
- )}
50
- {description && (
51
- <span title={description} className="text-sm text-primary-dark">
52
- <Icon icon="octicon:info-16" />
53
- </span>
54
- )}
55
- </div>
56
- )}
57
- </div>
32
+ {(label ||
33
+ (!options?.hideInputDetail &&
34
+ (rest.minLength || rest.maxLength || description))) && (
35
+ <div className="flex">
36
+ {label && (
37
+ <span
38
+ className={`text-sm select-none ${
39
+ rest.required &&
40
+ "after:content-['*'] after:ml-1 after:text-danger"
41
+ }`}
42
+ >
43
+ {label}
44
+ </span>
45
+ )}
46
+ {!options?.hideInputDetail && (
47
+ <div className="flex justify-end items-center gap-2">
48
+ {(rest.minLength || rest.maxLength) && (
49
+ <span className="text-sm select-none">
50
+ {rest.minLength || 0}/{rest.maxLength || "∞"}
51
+ </span>
52
+ )}
53
+ {description && (
54
+ <span title={description} className="text-sm text-primary-dark">
55
+ <Icon icon="octicon:info-16" />
56
+ </span>
57
+ )}
58
+ </div>
59
+ )}
60
+ </div>
61
+ )}
58
62
  <input
59
63
  type="email"
60
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}`}
@@ -57,34 +57,40 @@ export const File: React.FC<FileProps> = ({
57
57
 
58
58
  return (
59
59
  <label className={`grid gap-2 ${width}`}>
60
- {!options?.buttonOnly && (
61
- <div className="flex justify-between">
62
- {label && (
63
- <span
64
- className={`text-sm select-none ${
65
- rest.required &&
66
- "after:content-['*'] after:ml-1 after:text-danger"
67
- }`}
68
- >
69
- {label}
70
- </span>
71
- )}
72
- {!options?.hideInputDetail && (
73
- <div className="flex items-center gap-2">
74
- {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
75
- <span className="text-sm select-none">
76
- {options?.maxSizeInMb} MB
77
- </span>
78
- )}
79
- {description && (
80
- <span title={description} className="text-sm text-primary-dark">
81
- <Icon icon="octicon:info-16" />
82
- </span>
83
- )}
84
- </div>
85
- )}
86
- </div>
87
- )}
60
+ {!options?.buttonOnly &&
61
+ (label ||
62
+ (!options?.hideInputDetail &&
63
+ (options?.maxSizeInMb || description))) && (
64
+ <div className="flex">
65
+ {label && (
66
+ <span
67
+ className={`text-sm select-none ${
68
+ rest.required &&
69
+ "after:content-['*'] after:ml-1 after:text-danger"
70
+ }`}
71
+ >
72
+ {label}
73
+ </span>
74
+ )}
75
+ {!options?.hideInputDetail && (
76
+ <div className="flex justify-end items-center gap-2">
77
+ {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
78
+ <span className="text-sm select-none">
79
+ {options?.maxSizeInMb} MB
80
+ </span>
81
+ )}
82
+ {description && (
83
+ <span
84
+ title={description}
85
+ className="text-sm text-primary-dark"
86
+ >
87
+ <Icon icon="octicon:info-16" />
88
+ </span>
89
+ )}
90
+ </div>
91
+ )}
92
+ </div>
93
+ )}
88
94
  <div
89
95
  className={`flex items-center gap-4 ${
90
96
  !options?.buttonOnly && "flex-row-reverse"
@@ -30,33 +30,37 @@ export const Number: React.FC<NumberProps> = ({
30
30
 
31
31
  return (
32
32
  <label className={`grid gap-2 ${width}`}>
33
- <div className="flex justify-between">
34
- {label && (
35
- <span
36
- className={`text-sm select-none ${
37
- rest.required &&
38
- "after:content-['*'] after:ml-1 after:text-danger"
39
- }`}
40
- >
41
- {label}
42
- </span>
43
- )}
44
- {!options?.hideInputDetail && (
45
- <div className="flex items-center gap-2">
46
- {(rest.min || rest.max) && (
47
- <span className="text-sm select-none">
48
- {rest.min || rest.min === 0 ? rest.min : "∞"}/
49
- {rest.max || rest.max === 0 ? rest.max : "∞"}
50
- </span>
51
- )}
52
- {description && (
53
- <span title={description} className="text-sm text-primary-dark">
54
- <Icon icon="octicon:info-16" />
55
- </span>
56
- )}
57
- </div>
58
- )}
59
- </div>
33
+ {(label ||
34
+ (!options?.hideInputDetail &&
35
+ (rest.min || rest.max || description))) && (
36
+ <div className="flex">
37
+ {label && (
38
+ <span
39
+ className={`text-sm select-none ${
40
+ rest.required &&
41
+ "after:content-['*'] after:ml-1 after:text-danger"
42
+ }`}
43
+ >
44
+ {label}
45
+ </span>
46
+ )}
47
+ {!options?.hideInputDetail && (
48
+ <div className="flex justify-end items-center gap-2">
49
+ {(rest.min || rest.max) && (
50
+ <span className="text-sm select-none">
51
+ {rest.min || rest.min === 0 ? rest.min : "∞"}/
52
+ {rest.max || rest.max === 0 ? rest.max : "∞"}
53
+ </span>
54
+ )}
55
+ {description && (
56
+ <span title={description} className="text-sm text-primary-dark">
57
+ <Icon icon="octicon:info-16" />
58
+ </span>
59
+ )}
60
+ </div>
61
+ )}
62
+ </div>
63
+ )}
60
64
  <div className="relative flex items-center">
61
65
  <input
62
66
  ref={inputRef}
@@ -30,32 +30,36 @@ export const Password: React.FC<PasswordProps> = ({
30
30
 
31
31
  return (
32
32
  <label className={`grid gap-2 ${width}`}>
33
- <div className="flex justify-between">
34
- {label && (
35
- <span
36
- className={`text-sm select-none ${
37
- rest.required &&
38
- "after:content-['*'] after:ml-1 after:text-danger"
39
- }`}
40
- >
41
- {label}
42
- </span>
43
- )}
44
- {!options?.hideInputDetail && (
45
- <div className="flex items-center gap-2">
46
- {(rest.minLength || rest.maxLength) && (
47
- <span className="text-sm select-none">
48
- {rest.minLength || 0}/{rest.maxLength || "∞"}
49
- </span>
50
- )}
51
- {description && (
52
- <span title={description} className="text-sm text-primary-dark">
53
- <Icon icon="octicon:info-16" />
54
- </span>
55
- )}
56
- </div>
57
- )}
58
- </div>
33
+ {(label ||
34
+ (!options?.hideInputDetail &&
35
+ (rest.minLength || rest.maxLength || description))) && (
36
+ <div className="flex">
37
+ {label && (
38
+ <span
39
+ className={`text-sm select-none ${
40
+ rest.required &&
41
+ "after:content-['*'] after:ml-1 after:text-danger"
42
+ }`}
43
+ >
44
+ {label}
45
+ </span>
46
+ )}
47
+ {!options?.hideInputDetail && (
48
+ <div className="flex justify-end items-center gap-2">
49
+ {(rest.minLength || rest.maxLength) && (
50
+ <span className="text-sm select-none">
51
+ {rest.minLength || 0}/{rest.maxLength || "∞"}
52
+ </span>
53
+ )}
54
+ {description && (
55
+ <span title={description} className="text-sm text-primary-dark">
56
+ <Icon icon="octicon:info-16" />
57
+ </span>
58
+ )}
59
+ </div>
60
+ )}
61
+ </div>
62
+ )}
59
63
  <div className="relative flex items-center">
60
64
  <input
61
65
  type={show ? "text" : "password"}
@@ -25,32 +25,36 @@ export const Range: React.FC<RangeProps> = ({
25
25
 
26
26
  return (
27
27
  <label className={`grid gap-2 ${width}`}>
28
- <div className="flex justify-between">
29
- {label && (
30
- <span
31
- className={`text-sm select-none ${
32
- rest.required &&
33
- "after:content-['*'] after:ml-1 after:text-danger"
34
- }`}
35
- >
36
- {label}
37
- </span>
38
- )}
39
- {!options?.hideInputDetail && (
40
- <div className="flex items-center gap-2">
41
- {(rest.min || rest.max) && (
42
- <span className="text-sm select-none">
43
- {rest.min || 0}/{rest.max || 100}
44
- </span>
45
- )}
46
- {description && (
47
- <span title={description} className="text-sm text-primary-dark">
48
- <Icon icon="octicon:info-16" />
49
- </span>
50
- )}
51
- </div>
52
- )}
53
- </div>
28
+ {(label ||
29
+ (!options?.hideInputDetail &&
30
+ (rest.min || rest.max || description))) && (
31
+ <div className="flex">
32
+ {label && (
33
+ <span
34
+ className={`text-sm select-none ${
35
+ rest.required &&
36
+ "after:content-['*'] after:ml-1 after:text-danger"
37
+ }`}
38
+ >
39
+ {label}
40
+ </span>
41
+ )}
42
+ {!options?.hideInputDetail && (
43
+ <div className="flex justify-end items-center gap-2">
44
+ {(rest.min || rest.max) && (
45
+ <span className="text-sm select-none">
46
+ {rest.min || 0}/{rest.max || 100}
47
+ </span>
48
+ )}
49
+ {description && (
50
+ <span title={description} className="text-sm text-primary-dark">
51
+ <Icon icon="octicon:info-16" />
52
+ </span>
53
+ )}
54
+ </div>
55
+ )}
56
+ </div>
57
+ )}
54
58
  <div className="flex gap-2">
55
59
  <input
56
60
  ref={inputRef}
@@ -28,32 +28,36 @@ export const Text: React.FC<TextProps> = ({
28
28
 
29
29
  return (
30
30
  <label className={`grid gap-2 ${width}`}>
31
- <div className="flex justify-between">
32
- {label && (
33
- <span
34
- className={`text-sm select-none ${
35
- rest.required &&
36
- "after:content-['*'] after:ml-1 after:text-danger"
37
- }`}
38
- >
39
- {label}
40
- </span>
41
- )}
42
- {!options?.hideInputDetail && (
43
- <div className="flex items-center gap-2">
44
- {(rest.minLength || rest.maxLength) && (
45
- <span className="text-sm select-none">
46
- {rest.minLength || 0}/{rest.maxLength || "∞"}
47
- </span>
48
- )}
49
- {description && (
50
- <span title={description} className="text-sm text-primary-dark">
51
- <Icon icon="octicon:info-16" />
52
- </span>
53
- )}
54
- </div>
55
- )}
56
- </div>
31
+ {(label ||
32
+ (!options?.hideInputDetail &&
33
+ (rest.minLength || rest.maxLength || description))) && (
34
+ <div className="flex">
35
+ {label && (
36
+ <span
37
+ className={`text-sm select-none ${
38
+ rest.required &&
39
+ "after:content-['*'] after:ml-1 after:text-danger"
40
+ }`}
41
+ >
42
+ {label}
43
+ </span>
44
+ )}
45
+ {!options?.hideInputDetail && (
46
+ <div className="flex justify-end items-center gap-2">
47
+ {(rest.minLength || rest.maxLength) && (
48
+ <span className="text-sm select-none">
49
+ {rest.minLength || 0}/{rest.maxLength || "∞"}
50
+ </span>
51
+ )}
52
+ {description && (
53
+ <span title={description} className="text-sm text-primary-dark">
54
+ <Icon icon="octicon:info-16" />
55
+ </span>
56
+ )}
57
+ </div>
58
+ )}
59
+ </div>
60
+ )}
57
61
  <input
58
62
  type="text"
59
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}`}
@@ -151,23 +151,28 @@ export const Time: React.FC<TimeProps> = ({
151
151
  return (
152
152
  <div className="flex items-end">
153
153
  <label className={`grid gap-2 ${width}`}>
154
- <div className="flex justify-between items-center">
155
- {label && (
156
- <span
157
- className={`text-sm select-none ${
158
- rest.required &&
159
- "after:content-['*'] after:ml-1 after:text-danger"
160
- }`}
161
- >
162
- {label}
163
- </span>
164
- )}
165
- {description && (
166
- <span title={description} className="text-sm text-primary-dark">
167
- <Icon icon="octicon:info-16" />
168
- </span>
169
- )}
170
- </div>
154
+ {(label || description) && (
155
+ <div className="flex items-center">
156
+ {label && (
157
+ <span
158
+ className={`text-sm select-none ${
159
+ rest.required &&
160
+ "after:content-['*'] after:ml-1 after:text-danger"
161
+ }`}
162
+ >
163
+ {label}
164
+ </span>
165
+ )}
166
+ {description && (
167
+ <span
168
+ title={description}
169
+ className="ms-auto text-sm text-primary-dark"
170
+ >
171
+ <Icon icon="octicon:info-16" />
172
+ </span>
173
+ )}
174
+ </div>
175
+ )}
171
176
  <div className="relative flex items-center">
172
177
  <input
173
178
  type="text"
@@ -118,23 +118,28 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
118
118
 
119
119
  return (
120
120
  <label className={`grid gap-2 ${width}`}>
121
- <div className="flex justify-between items-center">
122
- {label && (
123
- <span
124
- className={`text-sm select-none ${
125
- rest.required &&
126
- "after:content-['*'] after:ml-1 after:text-danger"
127
- }`}
128
- >
129
- {label}
130
- </span>
131
- )}
132
- {description && (
133
- <span title={description} className="text-sm text-primary-dark">
134
- <Icon icon="octicon:info-16" />
135
- </span>
136
- )}
137
- </div>
121
+ {(label || description) && (
122
+ <div className="flex items-center">
123
+ {label && (
124
+ <span
125
+ className={`text-sm select-none ${
126
+ rest.required &&
127
+ "after:content-['*'] after:ml-1 after:text-danger"
128
+ }`}
129
+ >
130
+ {label}
131
+ </span>
132
+ )}
133
+ {description && (
134
+ <span
135
+ title={description}
136
+ className="ms-auto text-sm text-primary-dark"
137
+ >
138
+ <Icon icon="octicon:info-16" />
139
+ </span>
140
+ )}
141
+ </div>
142
+ )}
138
143
  <div className="relative" ref={triggerRef}>
139
144
  <div
140
145
  className="relative flex items-center cursor-pointer"
@@ -80,23 +80,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
80
80
  return (
81
81
  <div className="flex flex-row-reverse items-end">
82
82
  <label className={`grid gap-2 ${width}`}>
83
- <div className="flex justify-between items-center">
84
- {label && (
85
- <span
86
- className={`text-sm select-none ${
87
- required &&
88
- "after:content-['*'] after:ml-1 after:text-danger"
89
- }`}
90
- >
91
- {label}
92
- </span>
93
- )}
94
- {description && (
95
- <span title={description} className="text-sm text-primary-dark">
96
- <Icon icon="octicon:info-16" />
97
- </span>
98
- )}
99
- </div>
83
+ {(label || description) && (
84
+ <div className="flex items-center">
85
+ {label && (
86
+ <span
87
+ className={`text-sm select-none ${
88
+ required && "after:content-['*'] after:ml-1 after:text-danger"
89
+ }`}
90
+ >
91
+ {label}
92
+ </span>
93
+ )}
94
+ {description && (
95
+ <span
96
+ title={description}
97
+ className="ms-auto text-sm text-primary-dark"
98
+ >
99
+ <Icon icon="octicon:info-16" />
100
+ </span>
101
+ )}
102
+ </div>
103
+ )}
100
104
  <div className="relative flex items-center">
101
105
  <div
102
106
  ref={inputRef}