next-helios-fe 1.8.2 → 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/input/checkbox.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import { Icon } from "@iconify/react";
 
 export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -8,12 +9,14 @@ export interface CheckboxProps
     disableHover?: boolean;
   };
   label?: string;
+  description?: string;
   theme?: string;
 }
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   options,
   label,
+  description,
   theme,
   ...rest
 }) => {
@@ -41,13 +44,23 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         />
       </div>
       {label && (
-        <span
-          className={`flex-1 text-sm select-none ${
-            rest.disabled ? "text-slate-400" : "cursor-pointer"
-          }`}
-        >
-          {label}
-        </span>
+        <div className="flex items-center gap-2">
+          <span
+            className={`flex-1 text-sm select-none ${
+              rest.disabled ? "text-slate-400" : "cursor-pointer"
+            }`}
+          >
+            {label}
+          </span>
+          {description && (
+            <span
+              title={description}
+              className="ms-auto text-sm text-primary-dark"
+            >
+              <Icon icon="octicon:info-16" />
+            </span>
+          )}
+        </div>
       )}
       <div
         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

@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import { Icon } from "@iconify/react";
 
 export interface RadioProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -7,12 +8,14 @@ export interface RadioProps
     disableHover?: boolean;
   };
   label?: string;
+  description?: string;
   theme?: string;
 }
 
 export const Radio: React.FC<RadioProps> = ({
   options,
   label,
+  description,
   theme,
   ...rest
 }) => {
@@ -40,13 +43,23 @@ export const Radio: React.FC<RadioProps> = ({
         />
       </div>
       {label && (
-        <span
-          className={`flex-1 text-sm select-none ${
-            rest.disabled ? "text-slate-400" : "cursor-pointer"
-          }`}
-        >
-          {label}
-        </span>
+        <div className="flex items-center gap-2">
+          <span
+            className={`flex-1 text-sm select-none ${
+              rest.disabled ? "text-slate-400" : "cursor-pointer"
+            }`}
+          >
+            {label}
+          </span>
+          {description && (
+            <span
+              title={description}
+              className="ms-auto text-sm text-primary-dark"
+            >
+              <Icon icon="octicon:info-16" />
+            </span>
+          )}
+        </div>
       )}
     </label>
   );

package/src/components/form/other/select.tsx

@@ -14,6 +14,7 @@ export interface SelectProps
   label?: string;
   placeholder?: string;
   description?: string;
+  labelComponent?: (e?: any) => React.ReactNode;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
@@ -21,11 +22,12 @@ export interface SelectProps
 }
 
 export const Select: React.FC<SelectProps> = ({
-  options,
   label,
   menus,
   placeholder,
   description,
+  labelComponent,
+  options,
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
@@ -151,7 +153,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="button"
-                      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"
+                      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:bg-primary-transparent disabled:text-primary"
                       disabled
                       onClick={() => {
                         setTempValue(item.value);
@@ -162,7 +164,8 @@ export const Select: React.FC<SelectProps> = ({
                         }
                       }}
                     >
-                      {item.label}
+                      <span>{item.label}</span>
+                      {labelComponent ? labelComponent(item) : ""}
                     </button>
                   );
                 } else {
@@ -170,7 +173,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="button"
-                      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"
+                      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"
                       disabled={item.disabled}
                       onClick={() => {
                         setTempValue(item.value);
@@ -181,7 +184,8 @@ export const Select: React.FC<SelectProps> = ({
                         }
                       }}
                     >
-                      {item.label}
+                      <span>{item.label}</span>
+                      {labelComponent ? labelComponent(item) : ""}
                     </button>
                   );
                 }