next-helios-fe 1.6.26 → 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.
Files changed (25) hide show
  1. package/dist/components/form/input/email.d.ts +1 -0
  2. package/dist/components/form/input/file.d.ts +1 -0
  3. package/dist/components/form/input/number.d.ts +1 -0
  4. package/dist/components/form/input/password.d.ts +1 -0
  5. package/dist/components/form/input/range.d.ts +1 -0
  6. package/dist/components/form/input/text.d.ts +1 -0
  7. package/dist/components/form/other/textarea.d.ts +1 -0
  8. package/dist/index.js +1 -1
  9. package/package.json +1 -1
  10. package/src/components/form/input/color.tsx +22 -17
  11. package/src/components/form/input/date.tsx +22 -17
  12. package/src/components/form/input/email.tsx +27 -20
  13. package/src/components/form/input/file.tsx +31 -22
  14. package/src/components/form/input/number.tsx +28 -21
  15. package/src/components/form/input/password.tsx +27 -20
  16. package/src/components/form/input/range.tsx +27 -20
  17. package/src/components/form/input/text.tsx +27 -20
  18. package/src/components/form/input/time.tsx +22 -17
  19. package/src/components/form/other/autocomplete.tsx +22 -17
  20. package/src/components/form/other/multipleSelect.tsx +21 -17
  21. package/src/components/form/other/phoneNumber.tsx +22 -17
  22. package/src/components/form/other/pin.tsx +22 -17
  23. package/src/components/form/other/secret.tsx +22 -17
  24. package/src/components/form/other/select.tsx +22 -17
  25. package/src/components/form/other/textarea.tsx +27 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.6.26",
3
+ "version": "1.6.28",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/color.tsx CHANGED
@@ -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
package/src/components/form/input/date.tsx CHANGED
@@ -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"
package/src/components/form/input/email.tsx CHANGED
@@ -9,6 +9,7 @@ export interface EmailProps
9
9
  options?: {
10
10
  width?: "full" | "fit";
11
11
  height?: "short" | "medium" | "high";
12
+ hideInputDetail?: boolean;
12
13
  };
13
14
  }
14
15
 
@@ -28,30 +29,36 @@ export const Email: React.FC<EmailProps> = ({
28
29
 
29
30
  return (
30
31
  <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
- <div className="flex items-center gap-2">
43
- {(rest.minLength || rest.maxLength) && (
44
- <span className="text-sm select-none">
45
- {rest.minLength || 0}/{rest.maxLength || "∞"}
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}
46
44
  </span>
47
45
  )}
48
- {description && (
49
- <span title={description} className="text-sm text-primary-dark">
50
- <Icon icon="octicon:info-16" />
51
- </span>
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>
52
59
  )}
53
60
  </div>
54
- </div>
61
+ )}
55
62
  <input
56
63
  type="email"
57
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}`}
package/src/components/form/input/file.tsx CHANGED
@@ -12,6 +12,7 @@ export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
12
12
  buttonOnly?: boolean;
13
13
  width?: "full" | "fit";
14
14
  height?: "short" | "medium" | "high";
15
+ hideInputDetail?: boolean;
15
16
  };
16
17
  defaultValue?: any[];
17
18
  value?: any[];
@@ -56,32 +57,40 @@ export const File: React.FC<FileProps> = ({
56
57
 
57
58
  return (
58
59
  <label className={`grid gap-2 ${width}`}>
59
- {!options?.buttonOnly && (
60
- <div className="flex justify-between">
61
- {label && (
62
- <span
63
- className={`text-sm select-none ${
64
- rest.required &&
65
- "after:content-['*'] after:ml-1 after:text-danger"
66
- }`}
67
- >
68
- {label}
69
- </span>
70
- )}
71
- <div className="flex items-center gap-2">
72
- {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
73
- <span className="text-sm select-none">
74
- {options?.maxSizeInMb} MB
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}
75
73
  </span>
76
74
  )}
77
- {description && (
78
- <span title={description} className="text-sm text-primary-dark">
79
- <Icon icon="octicon:info-16" />
80
- </span>
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>
81
91
  )}
82
92
  </div>
83
- </div>
84
- )}
93
+ )}
85
94
  <div
86
95
  className={`flex items-center gap-4 ${
87
96
  !options?.buttonOnly && "flex-row-reverse"
package/src/components/form/input/number.tsx CHANGED
@@ -9,6 +9,7 @@ export interface NumberProps
9
9
  options?: {
10
10
  width?: "full" | "fit";
11
11
  height?: "short" | "medium" | "high";
12
+ hideInputDetail?: boolean;
12
13
  };
13
14
  }
14
15
 
@@ -29,31 +30,37 @@ export const Number: React.FC<NumberProps> = ({
29
30
 
30
31
  return (
31
32
  <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
- <div className="flex items-center gap-2">
44
- {(rest.min || rest.max) && (
45
- <span className="text-sm select-none">
46
- {rest.min || rest.min === 0 ? rest.min : "∞"}/
47
- {rest.max || rest.max === 0 ? rest.max : "∞"}
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}
48
45
  </span>
49
46
  )}
50
- {description && (
51
- <span title={description} className="text-sm text-primary-dark">
52
- <Icon icon="octicon:info-16" />
53
- </span>
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>
54
61
  )}
55
62
  </div>
56
- </div>
63
+ )}
57
64
  <div className="relative flex items-center">
58
65
  <input
59
66
  ref={inputRef}
package/src/components/form/input/password.tsx CHANGED
@@ -9,6 +9,7 @@ export interface PasswordProps
9
9
  options?: {
10
10
  width?: "full" | "fit";
11
11
  height?: "short" | "medium" | "high";
12
+ hideInputDetail?: boolean;
12
13
  };
13
14
  }
14
15
 
@@ -29,30 +30,36 @@ export const Password: React.FC<PasswordProps> = ({
29
30
 
30
31
  return (
31
32
  <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
- <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 || "∞"}
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}
47
45
  </span>
48
46
  )}
49
- {description && (
50
- <span title={description} className="text-sm text-primary-dark">
51
- <Icon icon="octicon:info-16" />
52
- </span>
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>
53
60
  )}
54
61
  </div>
55
- </div>
62
+ )}
56
63
  <div className="relative flex items-center">
57
64
  <input
58
65
  type={show ? "text" : "password"}
package/src/components/form/input/range.tsx CHANGED
@@ -9,6 +9,7 @@ export interface RangeProps
9
9
  theme?: string;
10
10
  options?: {
11
11
  width?: "full" | "fit";
12
+ hideInputDetail?: boolean;
12
13
  };
13
14
  }
14
15
 
@@ -24,30 +25,36 @@ export const Range: React.FC<RangeProps> = ({
24
25
 
25
26
  return (
26
27
  <label className={`grid gap-2 ${width}`}>
27
- <div className="flex justify-between">
28
- {label && (
29
- <span
30
- className={`text-sm select-none ${
31
- rest.required &&
32
- "after:content-['*'] after:ml-1 after:text-danger"
33
- }`}
34
- >
35
- {label}
36
- </span>
37
- )}
38
- <div className="flex items-center gap-2">
39
- {(rest.min || rest.max) && (
40
- <span className="text-sm select-none">
41
- {rest.min || 0}/{rest.max || 100}
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}
42
40
  </span>
43
41
  )}
44
- {description && (
45
- <span title={description} className="text-sm text-primary-dark">
46
- <Icon icon="octicon:info-16" />
47
- </span>
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>
48
55
  )}
49
56
  </div>
50
- </div>
57
+ )}
51
58
  <div className="flex gap-2">
52
59
  <input
53
60
  ref={inputRef}
package/src/components/form/input/text.tsx CHANGED
@@ -8,6 +8,7 @@ export interface TextProps extends React.InputHTMLAttributes<HTMLInputElement> {
8
8
  options?: {
9
9
  width?: "full" | "fit";
10
10
  height?: "short" | "medium" | "high";
11
+ hideInputDetail?: boolean;
11
12
  };
12
13
  }
13
14
 
@@ -27,30 +28,36 @@ export const Text: React.FC<TextProps> = ({
27
28
 
28
29
  return (
29
30
  <label className={`grid gap-2 ${width}`}>
30
- <div className="flex justify-between">
31
- {label && (
32
- <span
33
- className={`text-sm select-none ${
34
- rest.required &&
35
- "after:content-['*'] after:ml-1 after:text-danger"
36
- }`}
37
- >
38
- {label}
39
- </span>
40
- )}
41
- <div className="flex items-center gap-2">
42
- {(rest.minLength || rest.maxLength) && (
43
- <span className="text-sm select-none">
44
- {rest.minLength || 0}/{rest.maxLength || "∞"}
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}
45
43
  </span>
46
44
  )}
47
- {description && (
48
- <span title={description} className="text-sm text-primary-dark">
49
- <Icon icon="octicon:info-16" />
50
- </span>
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>
51
58
  )}
52
59
  </div>
53
- </div>
60
+ )}
54
61
  <input
55
62
  type="text"
56
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}`}
package/src/components/form/input/time.tsx CHANGED
@@ -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"
package/src/components/form/other/autocomplete.tsx CHANGED
@@ -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"
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -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}