@ballistix.digital/react-components 6.0.3-next-43.0 → 6.0.3-next-44.0

package/dist/index.js

@@ -45,6 +45,7 @@ $parcel$export(module.exports, "ButtonElement", () => $98b8616b6ef0f950$export$2
 $parcel$export(module.exports, "ButtonGroupElement", () => $49256f91bd9e1c3f$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "DropdownElement", () => $6f7275eb03c2b93c$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "IconElement", () => $2125901b4a9afff9$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "CollapsibleElement", () => $9a91e005c750fbb3$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "InputGroupForm", () => $75cfef1d7ff66e89$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "ContainerLayout", () => $f73096bc2c28d1e8$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "DividerLayout", () => $b249780162e56cf8$export$2e2bcd8739ae039);
@@ -1237,6 +1238,71 @@ var $6f7275eb03c2b93c$export$2e2bcd8739ae039 = $6f7275eb03c2b93c$var$DropdownEle
 
 
 
+var $4b59a3e0d0d66995$var$styles = {
+    container: '',
+    icon: {
+        container: 'w-4 h-4 flex ease-in-out duration-300',
+        rotate: 'transform rotate-90',
+        svg: 'w-4 h-4 flex'
+    }
+};
+var $4b59a3e0d0d66995$export$2e2bcd8739ae039 = $4b59a3e0d0d66995$var$styles;
+
+
+
+
+
+
+var $9a91e005c750fbb3$var$RotatingIcon = function(_a) {
+    var isVisible = _a.isVisible, styles = _a.styles;
+    return (0, $iA2ta$reactjsxruntime.jsx)("div", {
+        className: styles.icon.container,
+        children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
+            className: styles.icon.svg,
+            accessor: "chevron-right"
+        })
+    });
+};
+var $9a91e005c750fbb3$var$Collapsible = function(props) {
+    var children = props.children, _a = props.isDefaultOpen, isDefaultOpen = _a === void 0 ? false : _a, trigger = props.trigger, stylesOverrides = props.styles;
+    var _b = (0, $iA2ta$react.useState)(isDefaultOpen), isVisible = _b[0], setIsVisible = _b[1];
+    var handleToggle = (0, $iA2ta$react.useCallback)(function() {
+        return setIsVisible(function(visibility) {
+            return !visibility;
+        });
+    }, []);
+    var handleGenerateStyle = function() {
+        var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039));
+        var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039));
+        keys.forEach(function(key) {
+            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039), key), isVisible && key.includes('icon.container') && (0, $4b59a3e0d0d66995$export$2e2bcd8739ae039).icon.rotate, (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+        className: styles.container,
+        children: [
+            trigger({
+                handleToggle: handleToggle,
+                rotatingIcon: (0, $iA2ta$reactjsxruntime.jsx)($9a91e005c750fbb3$var$RotatingIcon, {
+                    isVisible: isVisible,
+                    styles: styles
+                }),
+                isVisible: isVisible
+            }),
+            isVisible && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                children: children
+            })
+        ]
+    });
+};
+var $9a91e005c750fbb3$export$2e2bcd8739ae039 = $9a91e005c750fbb3$var$Collapsible;
+
+
+
+
+