@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
46 lines • 1.91 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as TabsPrimitive from '@radix-ui/react-tabs';
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import { forwardRef } from 'react';
const TabsListCss = cva({
base: {
display: 'flex',
alignItems: 'center',
borderRadius: 8,
p: '1',
backgroundColor: 'gray2',
border: 'none'
}
});
const TabsTriggerCss = cva({
base: {
width: '100%',
fontWeight: '500',
fontSize: '14px',
cursor: 'pointer',
py: '2px',
color: 'gray12',
borderRadius: 8,
backgroundColor: 'transparent',
border: 'none',
'&[data-state="active"]': {
backgroundColor: 'subtle-background-color',
'--borderColor': 'colors.gray.5',
border: '1px solid var(--borderColor)'
}
}
});
const TabsList = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(TabsPrimitive.List, { ...props, ref: forwardedRef, className: designCss(TabsListCss.raw(), designCss.raw(css)), children: children }));
});
const TabsTrigger = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(TabsPrimitive.Trigger, { ...props, ref: forwardedRef, className: designCss(TabsTriggerCss.raw(), designCss.raw(css)), children: children }));
});
const TabsContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(TabsPrimitive.Content, { ...props, ref: forwardedRef, className: designCss(designCss.raw(css)), children: children }));
});
const TabsRoot = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(TabsPrimitive.Root, { ...props, ref: forwardedRef, className: designCss(designCss.raw(css)), children: children }));
});
export { TabsRoot, TabsList, TabsTrigger, TabsContent };
//# sourceMappingURL=Tabs.js.map