next-helios-fe 1.8.1 → 1.8.3

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 (8) hide show
  1. package/dist/components/form/input/checkbox.d.ts +1 -0
  2. package/dist/components/form/input/radio.d.ts +1 -0
  3. package/dist/components/form/other/select.d.ts +1 -0
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/form/input/checkbox.tsx +20 -7
  7. package/src/components/form/input/radio.tsx +20 -7
  8. package/src/components/form/other/select.tsx +42 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.1",
3
+ "version": "1.8.3",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/checkbox.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Icon } from "@iconify/react";
3
4
 
4
5
  export interface CheckboxProps
5
6
  extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -8,12 +9,14 @@ export interface CheckboxProps
8
9
  disableHover?: boolean;
9
10
  };
10
11
  label?: string;
12
+ description?: string;
11
13
  theme?: string;
12
14
  }
13
15
 
14
16
  export const Checkbox: React.FC<CheckboxProps> = ({
15
17
  options,
16
18
  label,
19
+ description,
17
20
  theme,
18
21
  ...rest
19
22
  }) => {
@@ -41,13 +44,23 @@ export const Checkbox: React.FC<CheckboxProps> = ({
41
44
  />
42
45
  </div>
43
46
  {label && (
44
- <span
45
- className={`flex-1 text-sm select-none ${
46
- rest.disabled ? "text-slate-400" : "cursor-pointer"
47
- }`}
48
- >
49
- {label}
50
- </span>
47
+ <div className="flex items-center gap-2">
48
+ <span
49
+ className={`flex-1 text-sm select-none ${
50
+ rest.disabled ? "text-slate-400" : "cursor-pointer"
51
+ }`}
52
+ >
53
+ {label}
54
+ </span>
55
+ {description && (
56
+ <span
57
+ title={description}
58
+ className="ms-auto text-sm text-primary-dark"
59
+ >
60
+ <Icon icon="octicon:info-16" />
61
+ </span>
62
+ )}
63
+ </div>
51
64
  )}
52
65
  <div
53
66
  className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled:checked]/checkbox:bg-secondary-dark ${
package/src/components/form/input/radio.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Icon } from "@iconify/react";
3
4
 
4
5
  export interface RadioProps
5
6
  extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -7,12 +8,14 @@ export interface RadioProps
7
8
  disableHover?: boolean;
8
9
  };
9
10
  label?: string;
11
+ description?: string;
10
12
  theme?: string;
11
13
  }
12
14
 
13
15
  export const Radio: React.FC<RadioProps> = ({
14
16
  options,
15
17
  label,
18
+ description,
16
19
  theme,
17
20
  ...rest
18
21
  }) => {
@@ -40,13 +43,23 @@ export const Radio: React.FC<RadioProps> = ({
40
43
  />
41
44
  </div>
42
45
  {label && (
43
- <span
44
- className={`flex-1 text-sm select-none ${
45
- rest.disabled ? "text-slate-400" : "cursor-pointer"
46
- }`}
47
- >
48
- {label}
49
- </span>
46
+ <div className="flex items-center gap-2">
47
+ <span
48
+ className={`flex-1 text-sm select-none ${
49
+ rest.disabled ? "text-slate-400" : "cursor-pointer"
50
+ }`}
51
+ >
52
+ {label}
53
+ </span>
54
+ {description && (
55
+ <span
56
+ title={description}
57
+ className="ms-auto text-sm text-primary-dark"
58
+ >
59
+ <Icon icon="octicon:info-16" />
60
+ </span>
61
+ )}
62
+ </div>
50
63
  )}
51
64
  </label>
52
65
  );
package/src/components/form/other/select.tsx CHANGED
@@ -8,6 +8,7 @@ export interface SelectProps
8
8
  menus: {
9
9
  label: string;
10
10
  value: string;
11
+ disabled?: boolean;
11
12
  [key: string]: any;
12
13
  }[];
13
14
  label?: string;
@@ -144,24 +145,47 @@ export const Select: React.FC<SelectProps> = ({
144
145
  <span className="px-4 py-1">No data found</span>
145
146
  </div>
146
147
  ) : (
147
- menus.map((item, index) => (
148
- <button
149
- key={index}
150
- type="button"
151
- className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
152
- disabled={tempValue === item.value}
153
- onClick={() => {
154
- setTempValue(item.value);
155
- if (rest.onChange) {
156
- rest.onChange({
157
- target: { value: item.value } as HTMLSelectElement,
158
- } as any);
159
- }
160
- }}
161
- >
162
- {item.label}
163
- </button>
164
- ))
148
+ menus.map((item, index) => {
149
+ if (tempValue === item.value) {
150
+ return (
151
+ <button
152
+ key={index}
153
+ type="button"
154
+ className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
155
+ disabled
156
+ onClick={() => {
157
+ setTempValue(item.value);
158
+ if (rest.onChange) {
159
+ rest.onChange({
160
+ target: { value: item.value } as HTMLSelectElement,
161
+ } as any);
162
+ }
163
+ }}
164
+ >
165
+ {item.label}
166
+ </button>
167
+ );
168
+ } else {
169
+ return (
170
+ <button
171
+ key={index}
172
+ type="button"
173
+ className="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"
174
+ disabled={item.disabled}
175
+ onClick={() => {
176
+ setTempValue(item.value);
177
+ if (rest.onChange) {
178
+ rest.onChange({
179
+ target: { value: item.value } as HTMLSelectElement,
180
+ } as any);
181
+ }
182
+ }}
183
+ >
184
+ {item.label}
185
+ </button>
186
+ );
187
+ }
188
+ })
165
189
  )}
166
190
  </div>
167
191
  </Dropdown>