@seeqdev/qomponents 0.0.54 → 0.0.55

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AccordionProps } from './Accordion.types';
+declare const Accordion: React.FunctionComponent<AccordionProps>;
+export default Accordion;

package/dist/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllAccordionVariants: () => JSX.Element;

package/dist/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Accordion/Accordion.types.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface AccordionProps {
+    extraClassNames?: string;
+    defaultValue?: string;
+    value: string;
+    disabled?: boolean;
+    accordionItems: AccordionItem[];
+    testId?: string;
+    onItemSelect: (key: string) => void;
+}
+interface AccordionItem {
+    value: string;
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    itemTestId?: string;
+    id?: string;
+    disabled?: boolean;
+    contentClassNames?: string;
+}
+export {};

package/dist/Accordion/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Accordion';

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import Icon from './Icon';
 import Select from './Select';
 import Modal from './Modal';
 import Tabs from './Tabs';
+import Accordion from './Accordion';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -19,3 +20,4 @@ export { Icon };
 export { Select };
 export { QTip };
 export { Modal };
+export { Accordion };

package/dist/index.esm.js

@@ -14517,5 +14517,402 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
         tabs.map((tab, index) => (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] tw-z-[500] tw-flex tw-flex-col tw-flex-grow ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
 };
 
-export { Button, Checkbox, Icon, Modal, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+/* -------------------------------------------------------------------------------------------------
+ * Collapsible
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$COLLAPSIBLE_NAME = 'Collapsible';
+const [$409067139f391064$var$createCollapsibleContext, $409067139f391064$export$952b32dcbe73087a] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($409067139f391064$var$COLLAPSIBLE_NAME);
+const [$409067139f391064$var$CollapsibleProvider, $409067139f391064$var$useCollapsibleContext] = $409067139f391064$var$createCollapsibleContext($409067139f391064$var$COLLAPSIBLE_NAME);
+const $409067139f391064$export$6eb0f7ddcda6131f = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeCollapsible: __scopeCollapsible , open: openProp , defaultOpen: defaultOpen , disabled: disabled , onOpenChange: onOpenChange , ...collapsibleProps } = props;
+    const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+    });
+    return /*#__PURE__*/ createElement($409067139f391064$var$CollapsibleProvider, {
+        scope: __scopeCollapsible,
+        disabled: disabled,
+        contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
+        open: open,
+        onOpenToggle: useCallback(()=>setOpen((prevOpen)=>!prevOpen
+            )
+        , [
+            setOpen
+        ])
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+        "data-state": $409067139f391064$var$getState(open),
+        "data-disabled": disabled ? '' : undefined
+    }, collapsibleProps, {
+        ref: forwardedRef
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * CollapsibleTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$TRIGGER_NAME = 'CollapsibleTrigger';
+const $409067139f391064$export$c135dce7b15bbbdc = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeCollapsible: __scopeCollapsible , ...triggerProps } = props;
+    const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$TRIGGER_NAME, __scopeCollapsible);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button",
+        "aria-controls": context.contentId,
+        "aria-expanded": context.open || false,
+        "data-state": $409067139f391064$var$getState(context.open),
+        "data-disabled": context.disabled ? '' : undefined,
+        disabled: context.disabled
+    }, triggerProps, {
+        ref: forwardedRef,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, context.onOpenToggle)
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * CollapsibleContent
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$CONTENT_NAME = 'CollapsibleContent';
+const $409067139f391064$export$aadde00976f34151 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...contentProps } = props;
+    const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$CONTENT_NAME, props.__scopeCollapsible);
+    return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, ({ present: present  })=>/*#__PURE__*/ createElement($409067139f391064$var$CollapsibleContentImpl, _extends({}, contentProps, {
+            ref: forwardedRef,
+            present: present
+        }))
+    );
+});
+/* -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$CollapsibleContentImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeCollapsible: __scopeCollapsible , present: present , children: children , ...contentProps } = props;
+    const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$CONTENT_NAME, __scopeCollapsible);
+    const [isPresent, setIsPresent] = useState(present);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+    const heightRef = useRef(0);
+    const height = heightRef.current;
+    const widthRef = useRef(0);
+    const width = widthRef.current; // when opening we want it to immediately open to retrieve dimensions
+    // when closing we delay `present` to retrieve dimensions before closing
+    const isOpen = context.open || isPresent;
+    const isMountAnimationPreventedRef = useRef(isOpen);
+    const originalStylesRef = useRef();
+    useEffect(()=>{
+        const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
+        );
+        return ()=>cancelAnimationFrame(rAF)
+        ;
+    }, []);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        const node = ref.current;
+        if (node) {
+            originalStylesRef.current = originalStylesRef.current || {
+                transitionDuration: node.style.transitionDuration,
+                animationName: node.style.animationName
+            }; // block any animations/transitions so the element renders at its full dimensions
+            node.style.transitionDuration = '0s';
+            node.style.animationName = 'none'; // get width and height from full dimensions
+            const rect = node.getBoundingClientRect();
+            heightRef.current = rect.height;
+            widthRef.current = rect.width; // kick off any animations/transitions that were originally set up if it isn't the initial mount
+            if (!isMountAnimationPreventedRef.current) {
+                node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+                node.style.animationName = originalStylesRef.current.animationName;
+            }
+            setIsPresent(present);
+        }
+    /**
+     * depends on `context.open` because it will change to `false`
+     * when a close is triggered but `present` will be `false` on
+     * animation end (so when close finishes). This allows us to
+     * retrieve the dimensions *before* closing.
+     */ }, [
+        context.open,
+        present
+    ]);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+        "data-state": $409067139f391064$var$getState(context.open),
+        "data-disabled": context.disabled ? '' : undefined,
+        id: context.contentId,
+        hidden: !isOpen
+    }, contentProps, {
+        ref: composedRefs,
+        style: {
+            [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined,
+            [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined,
+            ...props.style
+        }
+    }), isOpen && children);
+});
+/* -----------------------------------------------------------------------------------------------*/ function $409067139f391064$var$getState(open) {
+    return open ? 'open' : 'closed';
+}
+const $409067139f391064$export$be92b6f5f03c0fe9 = $409067139f391064$export$6eb0f7ddcda6131f;
+const $409067139f391064$export$41fb9f06171c75f4 = $409067139f391064$export$c135dce7b15bbbdc;
+const $409067139f391064$export$7c6e2c02157bb7d2 = $409067139f391064$export$aadde00976f34151;
+
+/* -------------------------------------------------------------------------------------------------
+ * Accordion
+ * -----------------------------------------------------------------------------------------------*/ const $1bf158f521e1b1b4$var$ACCORDION_NAME = 'Accordion';
+const $1bf158f521e1b1b4$var$ACCORDION_KEYS = [
+    'Home',
+    'End',
+    'ArrowDown',
+    'ArrowUp',
+    'ArrowLeft',
+    'ArrowRight'
+];
+const [$1bf158f521e1b1b4$var$Collection, $1bf158f521e1b1b4$var$useCollection, $1bf158f521e1b1b4$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($1bf158f521e1b1b4$var$ACCORDION_NAME);
+const [$1bf158f521e1b1b4$var$createAccordionContext, $1bf158f521e1b1b4$export$9748edc328a73be1] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($1bf158f521e1b1b4$var$ACCORDION_NAME, [
+    $1bf158f521e1b1b4$var$createCollectionScope,
+    $409067139f391064$export$952b32dcbe73087a
+]);
+const $1bf158f521e1b1b4$var$useCollapsibleScope = $409067139f391064$export$952b32dcbe73087a();
+const $1bf158f521e1b1b4$export$a766cd26d0d69044 = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { type: type , ...accordionProps } = props;
+    const singleProps = accordionProps;
+    const multipleProps = accordionProps;
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$Collection.Provider, {
+        scope: props.__scopeAccordion
+    }, type === 'multiple' ? /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionImplMultiple, _extends({}, multipleProps, {
+        ref: forwardedRef
+    })) : /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionImplSingle, _extends({}, singleProps, {
+        ref: forwardedRef
+    })));
+});
+$1bf158f521e1b1b4$export$a766cd26d0d69044.propTypes = {
+    type (props) {
+        const value = props.value || props.defaultValue;
+        if (props.type && ![
+            'single',
+            'multiple'
+        ].includes(props.type)) return new Error('Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.');
+        if (props.type === 'multiple' && typeof value === 'string') return new Error('Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.');
+        if (props.type === 'single' && Array.isArray(value)) return new Error('Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.');
+        return null;
+    }
+};
+/* -----------------------------------------------------------------------------------------------*/ const [$1bf158f521e1b1b4$var$AccordionValueProvider, $1bf158f521e1b1b4$var$useAccordionValueContext] = $1bf158f521e1b1b4$var$createAccordionContext($1bf158f521e1b1b4$var$ACCORDION_NAME);
+const [$1bf158f521e1b1b4$var$AccordionCollapsibleProvider, $1bf158f521e1b1b4$var$useAccordionCollapsibleContext] = $1bf158f521e1b1b4$var$createAccordionContext($1bf158f521e1b1b4$var$ACCORDION_NAME, {
+    collapsible: false
+});
+const $1bf158f521e1b1b4$var$AccordionImplSingle = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange = ()=>{} , collapsible: collapsible = false , ...accordionSingleProps } = props;
+    const [value, setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange: onValueChange
+    });
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionValueProvider, {
+        scope: props.__scopeAccordion,
+        value: value ? [
+            value
+        ] : [],
+        onItemOpen: setValue,
+        onItemClose: React__default.useCallback(()=>collapsible && setValue('')
+        , [
+            collapsible,
+            setValue
+        ])
+    }, /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionCollapsibleProvider, {
+        scope: props.__scopeAccordion,
+        collapsible: collapsible
+    }, /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionImpl, _extends({}, accordionSingleProps, {
+        ref: forwardedRef
+    }))));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $1bf158f521e1b1b4$var$AccordionImplMultiple = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange = ()=>{} , ...accordionMultipleProps } = props;
+    const [value1 = [], setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange: onValueChange
+    });
+    const handleItemOpen = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>[
+                ...prevValue,
+                itemValue
+            ]
+        )
+    , [
+        setValue
+    ]);
+    const handleItemClose = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>prevValue.filter((value)=>value !== itemValue
+            )
+        )
+    , [
+        setValue
+    ]);
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionValueProvider, {
+        scope: props.__scopeAccordion,
+        value: value1,
+        onItemOpen: handleItemOpen,
+        onItemClose: handleItemClose
+    }, /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionCollapsibleProvider, {
+        scope: props.__scopeAccordion,
+        collapsible: true
+    }, /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionImpl, _extends({}, accordionMultipleProps, {
+        ref: forwardedRef
+    }))));
+});
+/* -----------------------------------------------------------------------------------------------*/ const [$1bf158f521e1b1b4$var$AccordionImplProvider, $1bf158f521e1b1b4$var$useAccordionContext] = $1bf158f521e1b1b4$var$createAccordionContext($1bf158f521e1b1b4$var$ACCORDION_NAME);
+const $1bf158f521e1b1b4$var$AccordionImpl = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { __scopeAccordion: __scopeAccordion , disabled: disabled , dir: dir , orientation: orientation = 'vertical' , ...accordionProps } = props;
+    const accordionRef = React__default.useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(accordionRef, forwardedRef);
+    const getItems = $1bf158f521e1b1b4$var$useCollection(__scopeAccordion);
+    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const isDirectionLTR = direction === 'ltr';
+    const handleKeyDown = $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
+        var _triggerCollection$cl;
+        if (!$1bf158f521e1b1b4$var$ACCORDION_KEYS.includes(event.key)) return;
+        const target = event.target;
+        const triggerCollection = getItems().filter((item)=>{
+            var _item$ref$current;
+            return !((_item$ref$current = item.ref.current) !== null && _item$ref$current !== void 0 && _item$ref$current.disabled);
+        });
+        const triggerIndex = triggerCollection.findIndex((item)=>item.ref.current === target
+        );
+        const triggerCount = triggerCollection.length;
+        if (triggerIndex === -1) return; // Prevents page scroll while user is navigating
+        event.preventDefault();
+        let nextIndex = triggerIndex;
+        const homeIndex = 0;
+        const endIndex = triggerCount - 1;
+        const moveNext = ()=>{
+            nextIndex = triggerIndex + 1;
+            if (nextIndex > endIndex) nextIndex = homeIndex;
+        };
+        const movePrev = ()=>{
+            nextIndex = triggerIndex - 1;
+            if (nextIndex < homeIndex) nextIndex = endIndex;
+        };
+        switch(event.key){
+            case 'Home':
+                nextIndex = homeIndex;
+                break;
+            case 'End':
+                nextIndex = endIndex;
+                break;
+            case 'ArrowRight':
+                if (orientation === 'horizontal') {
+                    if (isDirectionLTR) moveNext();
+                    else movePrev();
+                }
+                break;
+            case 'ArrowDown':
+                if (orientation === 'vertical') moveNext();
+                break;
+            case 'ArrowLeft':
+                if (orientation === 'horizontal') {
+                    if (isDirectionLTR) movePrev();
+                    else moveNext();
+                }
+                break;
+            case 'ArrowUp':
+                if (orientation === 'vertical') movePrev();
+                break;
+        }
+        const clampedIndex = nextIndex % triggerCount;
+        (_triggerCollection$cl = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection$cl === void 0 || _triggerCollection$cl.focus();
+    });
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionImplProvider, {
+        scope: __scopeAccordion,
+        disabled: disabled,
+        direction: dir,
+        orientation: orientation
+    }, /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$Collection.Slot, {
+        scope: __scopeAccordion
+    }, /*#__PURE__*/ React__default.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, accordionProps, {
+        "data-orientation": orientation,
+        ref: composedRefs,
+        onKeyDown: disabled ? undefined : handleKeyDown
+    }))));
+});
+/* -------------------------------------------------------------------------------------------------
+ * AccordionItem
+ * -----------------------------------------------------------------------------------------------*/ const $1bf158f521e1b1b4$var$ITEM_NAME = 'AccordionItem';
+const [$1bf158f521e1b1b4$var$AccordionItemProvider, $1bf158f521e1b1b4$var$useAccordionItemContext] = $1bf158f521e1b1b4$var$createAccordionContext($1bf158f521e1b1b4$var$ITEM_NAME);
+/**
+ * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
+ */ const $1bf158f521e1b1b4$export$d99097c13d4dac9f = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { __scopeAccordion: __scopeAccordion , value: value , ...accordionItemProps } = props;
+    const accordionContext = $1bf158f521e1b1b4$var$useAccordionContext($1bf158f521e1b1b4$var$ITEM_NAME, __scopeAccordion);
+    const valueContext = $1bf158f521e1b1b4$var$useAccordionValueContext($1bf158f521e1b1b4$var$ITEM_NAME, __scopeAccordion);
+    const collapsibleScope = $1bf158f521e1b1b4$var$useCollapsibleScope(__scopeAccordion);
+    const triggerId = $1746a345f3d73bb7$export$f680877a34711e37();
+    const open1 = value && valueContext.value.includes(value) || false;
+    const disabled = accordionContext.disabled || props.disabled;
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$AccordionItemProvider, {
+        scope: __scopeAccordion,
+        open: open1,
+        disabled: disabled,
+        triggerId: triggerId
+    }, /*#__PURE__*/ React__default.createElement($409067139f391064$export$be92b6f5f03c0fe9, _extends({
+        "data-orientation": accordionContext.orientation,
+        "data-state": $1bf158f521e1b1b4$var$getState(open1)
+    }, collapsibleScope, accordionItemProps, {
+        ref: forwardedRef,
+        disabled: disabled,
+        open: open1,
+        onOpenChange: (open)=>{
+            if (open) valueContext.onItemOpen(value);
+            else valueContext.onItemClose(value);
+        }
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * AccordionTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $1bf158f521e1b1b4$var$TRIGGER_NAME = 'AccordionTrigger';
+/**
+ * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
+ * should always be nested inside of an `AccordionHeader`.
+ */ const $1bf158f521e1b1b4$export$94e939b1f85bdd73 = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { __scopeAccordion: __scopeAccordion , ...triggerProps } = props;
+    const accordionContext = $1bf158f521e1b1b4$var$useAccordionContext($1bf158f521e1b1b4$var$ACCORDION_NAME, __scopeAccordion);
+    const itemContext = $1bf158f521e1b1b4$var$useAccordionItemContext($1bf158f521e1b1b4$var$TRIGGER_NAME, __scopeAccordion);
+    const collapsibleContext = $1bf158f521e1b1b4$var$useAccordionCollapsibleContext($1bf158f521e1b1b4$var$TRIGGER_NAME, __scopeAccordion);
+    const collapsibleScope = $1bf158f521e1b1b4$var$useCollapsibleScope(__scopeAccordion);
+    return /*#__PURE__*/ React__default.createElement($1bf158f521e1b1b4$var$Collection.ItemSlot, {
+        scope: __scopeAccordion
+    }, /*#__PURE__*/ React__default.createElement($409067139f391064$export$41fb9f06171c75f4, _extends({
+        "aria-disabled": itemContext.open && !collapsibleContext.collapsible || undefined,
+        "data-orientation": accordionContext.orientation,
+        id: itemContext.triggerId
+    }, collapsibleScope, triggerProps, {
+        ref: forwardedRef
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * AccordionContent
+ * -----------------------------------------------------------------------------------------------*/ const $1bf158f521e1b1b4$var$CONTENT_NAME = 'AccordionContent';
+/**
+ * `AccordionContent` contains the collapsible content for an `AccordionItem`.
+ */ const $1bf158f521e1b1b4$export$985b9a77379b54a0 = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+    const { __scopeAccordion: __scopeAccordion , ...contentProps } = props;
+    const accordionContext = $1bf158f521e1b1b4$var$useAccordionContext($1bf158f521e1b1b4$var$ACCORDION_NAME, __scopeAccordion);
+    const itemContext = $1bf158f521e1b1b4$var$useAccordionItemContext($1bf158f521e1b1b4$var$CONTENT_NAME, __scopeAccordion);
+    const collapsibleScope = $1bf158f521e1b1b4$var$useCollapsibleScope(__scopeAccordion);
+    return /*#__PURE__*/ React__default.createElement($409067139f391064$export$7c6e2c02157bb7d2, _extends({
+        role: "region",
+        "aria-labelledby": itemContext.triggerId,
+        "data-orientation": accordionContext.orientation
+    }, collapsibleScope, contentProps, {
+        ref: forwardedRef,
+        style: {
+            ['--radix-accordion-content-height']: 'var(--radix-collapsible-content-height)',
+            ['--radix-accordion-content-width']: 'var(--radix-collapsible-content-width)',
+            ...props.style
+        }
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ function $1bf158f521e1b1b4$var$getState(open) {
+    return open ? 'open' : 'closed';
+}
+const $1bf158f521e1b1b4$export$be92b6f5f03c0fe9 = $1bf158f521e1b1b4$export$a766cd26d0d69044;
+const $1bf158f521e1b1b4$export$6d08773d2e66f8f2 = $1bf158f521e1b1b4$export$d99097c13d4dac9f;
+const $1bf158f521e1b1b4$export$41fb9f06171c75f4 = $1bf158f521e1b1b4$export$94e939b1f85bdd73;
+const $1bf158f521e1b1b4$export$7c6e2c02157bb7d2 = $1bf158f521e1b1b4$export$985b9a77379b54a0;
+
+const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
+    return (React__default.createElement($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { className: "rounded-md w-full", type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value) }, accordionItems.map((item) => (React__default.createElement($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full ${extraClassNames || ''}`, key: item.value, disabled: disabled, value: item.value },
+        React__default.createElement($1bf158f521e1b1b4$export$41fb9f06171c75f4, { disabled: disabled, className: `tw-w-full tw-cursor-default` }, item.trigger),
+        React__default.createElement($1bf158f521e1b1b4$export$7c6e2c02157bb7d2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden ${item.contentClassNames || ''}` }, item.content))))));
+};
+
+export { Accordion, Button, Checkbox, Icon, Modal, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map