next-helios-fe 1.4.30 → 1.4.32

package/package.json

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

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

@@ -75,11 +75,11 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         </span>
       )}
       <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-light ${
+        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 ${
           options?.variant !== "switch" && "hidden"
         }`}
       >
-        <div className="w-4 h-4 rounded-full bg-primary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
+        <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
       </div>
     </label>
   );

package/src/components/table/index.tsx

@@ -377,7 +377,7 @@ export const Table: TableComponentProps = ({
       return (
         <tr key={item.id}>
           {checkbox && (
-            <td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
+            <td className="sticky left-0 w-8 px-4 py-1 bg-secondary-bg">
               <Form.Checkbox
                 options={{ disableHover: true }}
                 checked={
@@ -398,7 +398,7 @@ export const Table: TableComponentProps = ({
             </td>
           )}
           {!options?.hideNumberColumn && (
-            <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
+            <td className="sticky left-0 px-4 py-1 bg-secondary-bg text-center">
               {(page - 1) * maxRow + index + 1}
             </td>
           )}
@@ -409,7 +409,7 @@ export const Table: TableComponentProps = ({
                 return (
                   <td
                     key={headerItem.key}
-                    className="px-4 py-1 border-b bg-secondary-bg whitespace-nowrap"
+                    className="px-4 py-1 bg-secondary-bg whitespace-nowrap"
                   >
                     {headerItem.render(item)}
                   </td>
@@ -418,7 +418,7 @@ export const Table: TableComponentProps = ({
                 return (
                   <td
                     key={headerItem.key}
-                    className="px-4 py-1 border-b bg-secondary-bg whitespace-nowrap"
+                    className="px-4 py-1 bg-secondary-bg whitespace-nowrap"
                   >
                     {item[headerItem.key as keyof typeof item]}
                   </td>
@@ -426,7 +426,7 @@ export const Table: TableComponentProps = ({
               }
             })}
           {actionColumn && (
-            <td className="sticky right-0 px-4 py-1 border-b bg-secondary-bg text-center">
+            <td className="sticky right-0 px-4 py-1 bg-secondary-bg text-center">
               {actionColumn(item)}
             </td>
           )}
@@ -450,7 +450,7 @@ export const Table: TableComponentProps = ({
           <div className="flex items-center gap-4">
             {options?.toolbar?.customTool &&
               options?.toolbar?.customTool?.length !== 0 &&
-              options?.toolbar?.customTool.map((item) => {
+              options?.toolbar?.customTool.map((item, index) => {
                 const variant =
                   item.variant === "secondary"
                     ? "bg-secondary hover:bg-secondary-dark"
@@ -464,6 +464,7 @@ export const Table: TableComponentProps = ({
 
                 return (
                   <button
+                    key={index}
                     type="button"
                     className={`p-1.5 rounded-full text-white active:opacity-70 active:duration-300 active:ease-out ${variant}`}
                     onClick={(e) => {
@@ -556,8 +557,8 @@ export const Table: TableComponentProps = ({
           options?.border && "border rounded-md"
         }`}
       >
-        <table className="w-full text-sm overflow-x-auto">
-          <thead className="sticky top-0 z-10 border-b">
+        <table className="w-full divide-y text-sm overflow-x-auto">
+          <thead className="sticky top-0 z-10">
             <tr>
               {checkbox && (
                 <th className="sticky left-0 w-8 px-4 py-2 bg-secondary-bg">
@@ -636,7 +637,7 @@ export const Table: TableComponentProps = ({
               )}
             </tr>
           </thead>
-          <tbody>{dataArr}</tbody>
+          <tbody className="divide-y">{dataArr}</tbody>
         </table>
       </div>
       {options?.toolbar?.pagination?.show !== false && (