@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
40 lines • 1.71 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as Collapsible from '@radix-ui/react-collapsible';
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import { forwardRef } from 'react';
const CollapsibleContentCss = cva({
base: {
overflow: 'hidden',
_data_state_open: {
animation: `collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)`
},
_data_state_closed: {
animation: `collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)`
}
}
});
const CollapsibleRootCss = cva({
base: {
width: '100%'
}
});
const CollapsibleTriggerCss = cva({
base: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
cursor: 'pointer'
}
});
const CollapsibleContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(Collapsible.CollapsibleContent, { ref: forwardedRef, ...props, className: designCss(CollapsibleContentCss.raw(), designCss.raw(css)), children: children }));
});
const CollapsibleRoot = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(Collapsible.Root, { ref: forwardedRef, ...props, className: designCss(CollapsibleRootCss.raw(), designCss.raw(css)), children: children }));
});
const CollapsibleTrigger = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(Collapsible.Trigger, { ref: forwardedRef, ...props, className: designCss(CollapsibleTriggerCss.raw(), designCss.raw(css)), children: children }));
});
export { CollapsibleRoot, CollapsibleContent, CollapsibleTrigger };
//# sourceMappingURL=Collapsible.js.map