next-helios-fe 1.1.39 → 1.1.40

package/package.json

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

package/src/components/content-container/accordion/index.tsx

@@ -4,20 +4,27 @@ import { Item, type ItemProps } from "./item";
 
 interface AccordionProps {
   children: React.ReactNode;
+  options?: {
+    twoColumns?: boolean;
+  };
 }
 
 interface AccordionComponent extends React.FC<AccordionProps> {
   Item: React.FC<ItemProps>;
 }
 
-export const Accordion: AccordionComponent = ({ children }) => {
+export const Accordion: AccordionComponent = ({ children, options }) => {
   const childrenList = React.Children.toArray(children);
   const itemList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Accordion.Item;
   });
 
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div
+      className={`grid gap-x-4 gap-y-2 w-full h-min ${
+        options?.twoColumns && "lg:grid-cols-2"
+      }`}
+    >
       {itemList.map((item) => {
         return item;
       })}

package/src/components/content-container/accordion/item.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 
 export interface ItemProps {
@@ -7,6 +7,7 @@ export interface ItemProps {
   title: string;
   subTitle?: string;
   options?: {
+    defaultOpen?: boolean;
     border?: boolean;
   };
 }
@@ -17,35 +18,41 @@ export const Item: React.FC<ItemProps> = ({
   subTitle,
   options,
 }) => {
-  const [active, setActive] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (options?.defaultOpen) {
+      setOpen(true);
+    }
+  }, [options?.defaultOpen]);
 
   return (
     <div
-      className={`rounded-md overflow-hidden ${options?.border && "border"}`}
+      className={`h-min rounded-md overflow-hidden ${options?.border && "border"}`}
     >
       <div
         className={`grid w-full overflow-hidden duration-300 ${
-          active ? "border-l-4 border-primary" : "border-l-0"
+          open ? "border-l-4 border-primary" : "border-l-0"
         }`}
       >
         <button
           type="button"
           className={`flex justify-between items-center w-full px-4 py-2 hover:bg-secondary-light ${
-            active && "text-primary"
+            open && "text-primary"
           }`}
           onClick={() => {
-            setActive(!active);
+            setOpen(!open);
           }}
         >
-          <div className="flex flex-col items-start">
-            <span>{title}</span>
-            {subTitle && <span className="text-sm">{subTitle}</span>}
+          <div className="flex-1 flex flex-col items-start">
+            <span className="text-start">{title}</span>
+            {subTitle && <span className="text-start text-sm">{subTitle}</span>}
           </div>
-          <Icon icon={`gravity-ui:chevron-${active ? "up" : "down"}`} />
+          <Icon icon={`gravity-ui:chevron-${open ? "up" : "down"}`} />
         </button>
         <div
           className={`overflow-auto duration-300 transition-all ${
-            active ? "max-h-96 border-t" : "max-h-0"
+            open ? "max-h-96 border-t" : "max-h-0"
           }`}
         >
           <div className="px-6 py-4">{children}</div>

package/src/components/content-container/tab/index.tsx

@@ -28,7 +28,7 @@ export const Tab: TabComponent = ({ children, tabs, options }) => {
 
   return (
     <div
-      className={`flex w-full h-full ${
+      className={`flex w-full h-full overlow-hidden ${
         options?.variant !== "horizontal"
           ? "flex-col divide-y-1"
           : "flex-col lg:flex-row  divide-y-1 lg:divide-y-0 divide-x-0 lg:divide-x-1"