@geoinsight/react-components 0.3.6 → 0.4.1

package/dist/cjs/index.css

@@ -114,6 +114,102 @@
   --color-primary-800: #2c5f1c;
   --color-primary-900: #1e3f12;
 }
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.accordion-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.accordion-button.button {
+  border: unset;
+  border-radius: var(--spacing-8);
+  color: var(--color-neutral-900);
+  justify-content: flex-end;
+}
+
+.accordion-button__button.button {
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion-button__link.button {
+  padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-16);
+}
+
+.accordion-button__link.button:hover {
+  background-color: var(--color-primary) !important;
+  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
+transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
+  color: var(--color-neutral-900);
+  text-decoration: unset;
+  text-underline-offset: unset;
+}
+
+.accordion-button__button--dark.button {
+  background-color: var(--color-neutral-200);
+}
+
+.accordion-button__button--light.button {
+  background-color: var(--color-neutral-800);
+}
+
+.accordion-button__link--dark.button {
+  background-color: var(--color-neutral-100) !important;
+}
+
+.accordion-button__link--light.button {
+  background-color: var(--color-neutral-700) !important;
+}
+
+.accordion-content {
+  border-radius: var(--spacing-8);
+  /* color: var(--color-neutral-100); */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+}
+
+/* .accordion__title {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+} */
+/* 
+.accordion__child {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  font-size: var(--font-size-14);
+}
+
+.accordion__child--active {
+  background-color: var(--color-neutral-500);
+} */
+/* 
+.accordion__check {
+  color: var(--color-neutral-500);
+  margin-right: calc(var(--spacing-24) * -1);
+  position: absolute;
+  right: 0;
+} */
+
 .button {
   align-items: center;
   border-radius: var(--spacing-32);
@@ -195,47 +291,6 @@
   padding: var(--spacing-16);
 }
 
-.accordion {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4)
-}
-
-.accordion__title {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-700);
-  color: var(--color-neutral-100);
-  justify-content: flex-end;
-  gap: 8px;
-  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
-}
-
-.accordion__menu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  padding: 0 0 var(--spacing-8) var(--spacing-16);
-}
-
-.accordion__child {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-900);
-  /* background: none !important; */
-  font-size: var(--font-size-14);
-}
-
-.accordion__child--active {
-  background-color: var(--color-neutral-500);
-}
-
-.accordion__check {
-  color: var(--color-neutral-500);
-  margin-right: calc(var(--spacing-24)*-1);
-  position: absolute;
-  right: 0;
-}
-
 .input-group {
   display: flex;
   flex-direction: column;

package/dist/cjs/index.js

@@ -4,62 +4,92 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('clsx');
 var tfi = require('react-icons/tfi');
-var bs = require('react-icons/bs');
 var tb = require('react-icons/tb');
 var io5 = require('react-icons/io5');
 
-const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
-function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
-    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx("button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`, className), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
-}
-
-function Accordion({ menu, allExpanded, defaultValue, selectValue, }) {
-    const [toggle, setToggle] = react.useState(Object.fromEntries(Object.entries(menu).map(([key, { isExpanded = false }]) => [
-        key,
-        allExpanded !== undefined ? allExpanded : isExpanded,
-    ])));
-    const [selected, setSelected] = react.useState(defaultValue);
-    const handleToggle = (name) => {
-        setToggle((prev) => {
-            return { ...prev, [name]: !prev[name] };
-        });
-    };
-    return (jsxRuntime.jsx("div", { className: "accordion", children: Object.keys(menu).map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { className: "accordion__title", "data-theme": menu[item].dataTheme, icon: toggle[item] ? jsxRuntime.jsx(tfi.TfiAngleDown, {}) : jsxRuntime.jsx(tfi.TfiAngleUp, {}), onClick: () => handleToggle(item), children: menu[item].label }), toggle[item] && (jsxRuntime.jsx("div", { className: "accordion__menu", children: menu[item].children.map((child) => (jsxRuntime.jsx(Button, { mode: "secondary", "data-theme": menu[item].dataTheme, className: `accordion__child ${child.id === selected &&
-                            ` accordion__child--active`}`, onClick: () => {
-                            setSelected(child.id);
-                            selectValue && selectValue(item, child);
-                        }, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child.label, child.id === selected ? (jsxRuntime.jsx(bs.BsCheckLg, { className: "accordion__check", size: "1rem" })) : ("")] }) }))) }))] }))) }));
-}
-
-function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
+function recursiveChildren(children, i = 0) {
+    return react.Children.map(children, (child, index) => {
+        if (!react.isValidElement(child)) {
+            return child;
+        }
+        if (child.props.children) {
+            return react.cloneElement(child, {
+                ...child.props,
+                children: recursiveChildren(child.props.children, i++),
+                ...(child?.type?.displayName === "AccordionItem" && {
+                    label: `${child?.type?.displayName}-${index}-${i}`,
+                }),
+            });
+        }
+    });
 }
-
-function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
-    const ref = react.useRef();
-    const [isShow, setIsShow] = react.useState(false);
-    const handleClickToggle = () => {
-        if (ref && ref.current) {
-            if (isShow) {
-                ref.current.style.height = hideHeight;
+function recursiveToggle(children, toggleArray = {}, i = 0, props) {
+    if ((children && typeof children === "string") ||
+        (Array.isArray(children) && typeof children[0] === "string")) {
+        return;
+    }
+    for (const child of children) {
+        if (react.isValidElement(child)) {
+            if (child?.type?.displayName === "AccordionItem" && child.props.label) {
+                toggleArray[child.props.label] = {
+                    isToggle: props.expanded === "all"
+                        ? true
+                        : props.expanded === "none"
+                            ? false
+                            : props.expanded === "custom"
+                                ? child?.props.isExpanded
+                                : false,
+                    depth: i,
+                    paddingLeft: `${16 * i}px`,
+                };
             }
-            else {
-                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+            if (typeof child.props.children !== "string" &&
+                child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
+                recursiveToggle(Array.isArray(child.props.children)
+                    ? child.props.children
+                    : [child.props.children], toggleArray, i + 1, props);
             }
-            setIsShow((prev) => !prev);
         }
-    };
-    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
-                    height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+    }
+    return toggleArray;
 }
 
-function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
+const AccordionContext = react.createContext(undefined);
+const AccordionProvider = ({ children, expanded = "all" }) => {
+    const newChildren = react.useMemo(() => recursiveChildren(children, 0), []);
+    const [toggle, setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
+    return (jsxRuntime.jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsxRuntime.jsx("div", { className: "accordion", children: newChildren }) }));
+};
+const useAccordion = () => {
+    const context = react.useContext(AccordionContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};
+
+function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
+    // const { dataTheme } = useTheme();
+    return (jsxRuntime.jsx(AccordionProvider, { expanded: expanded, children: children }));
 }
 
-function Loading({ img, children }) {
-    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+const AccordionItem = react.forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
+    const { toggle, setToggle } = useAccordion();
+    return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
+            paddingLeft: toggle && label && toggle[label].paddingLeft,
+        }, children: react.Children.map(children, (child) => react.cloneElement(child, {
+            toggle: toggle,
+            setToggle: setToggle,
+            ...(child?.type?.displayName !== "AccordionItem" && {
+                label: label,
+            }),
+            isExpanded: isExpanded,
+        })) }));
+});
+
+const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
 const ThemeContext = react.createContext(undefined);
@@ -110,6 +140,64 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
     return context;
 }
 
+const AccordionButton = react.forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
+    const { dataTheme } = useTheme();
+    const handleToggle = () => {
+        setToggle((prev) => {
+            if (label) {
+                return {
+                    ...prev,
+                    [label]: {
+                        ...(prev && label && prev[label]),
+                        isToggle: prev && !prev[label].isToggle,
+                    },
+                };
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
+            icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
+        }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
+});
+
+const AccordionContent = react.forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
+    return label && toggle && toggle[label].isToggle && jsxRuntime.jsx("div", { className: "accordion-content", children: children });
+});
+
+function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
+    return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
+}
+
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+    const ref = react.useRef();
+    const [isShow, setIsShow] = react.useState(false);
+    const handleClickToggle = () => {
+        if (ref && ref.current) {
+            if (isShow) {
+                ref.current.style.height = hideHeight;
+            }
+            else {
+                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+            }
+            setIsShow((prev) => !prev);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+                    height: hasToggleButton ? hideHeight : showHeight,
+                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+}
+
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
+}
+
+function Loading({ img, children }) {
+    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -232,6 +320,9 @@ function useModal({} = {}) {
 }
 
 exports.Accordion = Accordion;
+exports.AccordionButton = AccordionButton;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
 exports.Button = Button;
 exports.Input = Input;
 exports.Loading = Loading;

package/dist/esm/index.css

@@ -114,6 +114,102 @@
   --color-primary-800: #2c5f1c;
   --color-primary-900: #1e3f12;
 }
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.accordion-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.accordion-button.button {
+  border: unset;
+  border-radius: var(--spacing-8);
+  color: var(--color-neutral-900);
+  justify-content: flex-end;
+}
+
+.accordion-button__button.button {
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion-button__link.button {
+  padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-16);
+}
+
+.accordion-button__link.button:hover {
+  background-color: var(--color-primary) !important;
+  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
+transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
+  color: var(--color-neutral-900);
+  text-decoration: unset;
+  text-underline-offset: unset;
+}
+
+.accordion-button__button--dark.button {
+  background-color: var(--color-neutral-200);
+}
+
+.accordion-button__button--light.button {
+  background-color: var(--color-neutral-800);
+}
+
+.accordion-button__link--dark.button {
+  background-color: var(--color-neutral-100) !important;
+}
+
+.accordion-button__link--light.button {
+  background-color: var(--color-neutral-700) !important;
+}
+
+.accordion-content {
+  border-radius: var(--spacing-8);
+  /* color: var(--color-neutral-100); */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+}
+
+/* .accordion__title {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+} */
+/* 
+.accordion__child {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  font-size: var(--font-size-14);
+}
+
+.accordion__child--active {
+  background-color: var(--color-neutral-500);
+} */
+/* 
+.accordion__check {
+  color: var(--color-neutral-500);
+  margin-right: calc(var(--spacing-24) * -1);
+  position: absolute;
+  right: 0;
+} */
+
 .button {
   align-items: center;
   border-radius: var(--spacing-32);
@@ -195,47 +291,6 @@
   padding: var(--spacing-16);
 }
 
-.accordion {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4)
-}
-
-.accordion__title {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-700);
-  color: var(--color-neutral-100);
-  justify-content: flex-end;
-  gap: 8px;
-  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
-}
-
-.accordion__menu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  padding: 0 0 var(--spacing-8) var(--spacing-16);
-}
-
-.accordion__child {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-900);
-  /* background: none !important; */
-  font-size: var(--font-size-14);
-}
-
-.accordion__child--active {
-  background-color: var(--color-neutral-500);
-}
-
-.accordion__check {
-  color: var(--color-neutral-500);
-  margin-right: calc(var(--spacing-24)*-1);
-  position: absolute;
-  right: 0;
-}
-
 .input-group {
   display: flex;
   flex-direction: column;

package/dist/esm/index.js

@@ -1,63 +1,93 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, createContext, useEffect, useContext, useReducer } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement, createContext, useContext, useMemo, useState, forwardRef, useEffect, useRef, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
-import { BsCheckLg } from 'react-icons/bs';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 import { IoClose } from 'react-icons/io5';
 
-const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
-function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
-    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx("button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`, className), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
-}
-
-function Accordion({ menu, allExpanded, defaultValue, selectValue, }) {
-    const [toggle, setToggle] = useState(Object.fromEntries(Object.entries(menu).map(([key, { isExpanded = false }]) => [
-        key,
-        allExpanded !== undefined ? allExpanded : isExpanded,
-    ])));
-    const [selected, setSelected] = useState(defaultValue);
-    const handleToggle = (name) => {
-        setToggle((prev) => {
-            return { ...prev, [name]: !prev[name] };
-        });
-    };
-    return (jsx("div", { className: "accordion", children: Object.keys(menu).map((item) => (jsxs(Fragment, { children: [jsx(Button, { className: "accordion__title", "data-theme": menu[item].dataTheme, icon: toggle[item] ? jsx(TfiAngleDown, {}) : jsx(TfiAngleUp, {}), onClick: () => handleToggle(item), children: menu[item].label }), toggle[item] && (jsx("div", { className: "accordion__menu", children: menu[item].children.map((child) => (jsx(Button, { mode: "secondary", "data-theme": menu[item].dataTheme, className: `accordion__child ${child.id === selected &&
-                            ` accordion__child--active`}`, onClick: () => {
-                            setSelected(child.id);
-                            selectValue && selectValue(item, child);
-                        }, children: jsxs(Fragment, { children: [child.label, child.id === selected ? (jsx(BsCheckLg, { className: "accordion__check", size: "1rem" })) : ("")] }) }))) }))] }))) }));
-}
-
-function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
-    return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
+function recursiveChildren(children, i = 0) {
+    return Children.map(children, (child, index) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        if (child.props.children) {
+            return cloneElement(child, {
+                ...child.props,
+                children: recursiveChildren(child.props.children, i++),
+                ...(child?.type?.displayName === "AccordionItem" && {
+                    label: `${child?.type?.displayName}-${index}-${i}`,
+                }),
+            });
+        }
+    });
 }
-
-function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
-    const ref = useRef();
-    const [isShow, setIsShow] = useState(false);
-    const handleClickToggle = () => {
-        if (ref && ref.current) {
-            if (isShow) {
-                ref.current.style.height = hideHeight;
+function recursiveToggle(children, toggleArray = {}, i = 0, props) {
+    if ((children && typeof children === "string") ||
+        (Array.isArray(children) && typeof children[0] === "string")) {
+        return;
+    }
+    for (const child of children) {
+        if (isValidElement(child)) {
+            if (child?.type?.displayName === "AccordionItem" && child.props.label) {
+                toggleArray[child.props.label] = {
+                    isToggle: props.expanded === "all"
+                        ? true
+                        : props.expanded === "none"
+                            ? false
+                            : props.expanded === "custom"
+                                ? child?.props.isExpanded
+                                : false,
+                    depth: i,
+                    paddingLeft: `${16 * i}px`,
+                };
             }
-            else {
-                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+            if (typeof child.props.children !== "string" &&
+                child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
+                recursiveToggle(Array.isArray(child.props.children)
+                    ? child.props.children
+                    : [child.props.children], toggleArray, i + 1, props);
             }
-            setIsShow((prev) => !prev);
         }
-    };
-    return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
-                    height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+    }
+    return toggleArray;
 }
 
-function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
-    return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
+const AccordionContext = createContext(undefined);
+const AccordionProvider = ({ children, expanded = "all" }) => {
+    const newChildren = useMemo(() => recursiveChildren(children, 0), []);
+    const [toggle, setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
+    return (jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsx("div", { className: "accordion", children: newChildren }) }));
+};
+const useAccordion = () => {
+    const context = useContext(AccordionContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};
+
+function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
+    // const { dataTheme } = useTheme();
+    return (jsx(AccordionProvider, { expanded: expanded, children: children }));
 }
 
-function Loading({ img, children }) {
-    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+const AccordionItem = forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
+    const { toggle, setToggle } = useAccordion();
+    return (jsx("div", { className: "accordion-item", style: {
+            paddingLeft: toggle && label && toggle[label].paddingLeft,
+        }, children: Children.map(children, (child) => cloneElement(child, {
+            toggle: toggle,
+            setToggle: setToggle,
+            ...(child?.type?.displayName !== "AccordionItem" && {
+                label: label,
+            }),
+            isExpanded: isExpanded,
+        })) }));
+});
+
+const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
 const ThemeContext = createContext(undefined);
@@ -108,6 +138,64 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
     return context;
 }
 
+const AccordionButton = forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
+    const { dataTheme } = useTheme();
+    const handleToggle = () => {
+        setToggle((prev) => {
+            if (label) {
+                return {
+                    ...prev,
+                    [label]: {
+                        ...(prev && label && prev[label]),
+                        isToggle: prev && !prev[label].isToggle,
+                    },
+                };
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
+            icon: label && toggle && toggle[label].isToggle ? (jsx(TfiAngleDown, {})) : (jsx(TfiAngleUp, {})),
+        }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
+});
+
+const AccordionContent = forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
+    return label && toggle && toggle[label].isToggle && jsx("div", { className: "accordion-content", children: children });
+});
+
+function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
+    return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
+}
+
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+    const ref = useRef();
+    const [isShow, setIsShow] = useState(false);
+    const handleClickToggle = () => {
+        if (ref && ref.current) {
+            if (isShow) {
+                ref.current.style.height = hideHeight;
+            }
+            else {
+                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+            }
+            setIsShow((prev) => !prev);
+        }
+    };
+    return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+                    height: hasToggleButton ? hideHeight : showHeight,
+                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+}
+
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
+}
+
+function Loading({ img, children }) {
+    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -229,4 +317,4 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Accordion, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",