next-helios-fe 1.8.2 → 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 (6) 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/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/form/input/checkbox.tsx +20 -7
  6. package/src/components/form/input/radio.tsx +20 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.2",
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
  );