@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
33 lines • 1.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleListItem = exports.AccessibleList = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ToggleGroup = tslib_1.__importStar(require("@radix-ui/react-toggle-group"));
const css_1 = require("@reservoir0x/relay-design-system/css");
const AccessibleListContainerCss = (0, css_1.cva)({
base: {
display: 'flex',
flexDirection: 'column'
}
});
const AccessibleListItemCss = (0, css_1.cva)({
base: {
display: 'flex',
alignItems: 'center',
position: 'relative',
userSelect: 'none',
cursor: 'pointer',
'&[data-state=on]': {}
}
});
const AccessibleList = ({ children, onSelect, css }) => {
return ((0, jsx_runtime_1.jsx)(ToggleGroup.Root, { type: "single", loop: false, onValueChange: onSelect, className: (0, css_1.css)(AccessibleListContainerCss.raw(), css_1.css.raw(css)), children: children }));
};
exports.AccessibleList = AccessibleList;
exports.AccessibleListItem = (0, react_1.forwardRef)(({ children, value, css, asChild, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(ToggleGroup.Item, { value: value, className: (0, css_1.css)(AccessibleListItemCss.raw(), css_1.css.raw(css)), asChild: asChild, ...props, ref: forwardedRef, children: children }));
});
exports.AccessibleListItem.displayName = 'AccessibleListItem';
//# sourceMappingURL=AccessibleList.js.map