@navinc/base-react-components
Version:
Nav's Pattern Library
20 lines • 1.37 kB
JavaScript
import * as TabsPrimitive from '@radix-ui/react-tabs';
import { styled } from 'styled-components';
import { addClassNameTo } from '../../add-classname-to.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const TabsInternal = {
Root: styled(TabsPrimitive.Root).attrs((props) => (Object.assign({ activationMode: 'manual' }, props))) ``,
List: addClassNameTo(TabsPrimitive.List, /* cn */ 'flex items-start gap-400 overflow-x-auto'),
Trigger: addClassNameTo(TabsPrimitive.Trigger,
/* cn */ 'title3-emphasized flex items-center justify-center gap-100 shrink-0 bg-none border-0 outline-none py-200 px-0 text-onSurfaceVariant data-[state=active]:text-onSurface data-[state=active]:border-b-2 data-[state=active]:border-onSurface hover:border-b-2 hover:border-b-outlineVariant focus:border-b-2 focus:border-b-outlineVariant active:border-b-2 active:border-b-outlineVariant focus-visible:border-b-2 focus-visible:border-b-outlineVariant'),
Content: styledBackwardsCompatibility(TabsPrimitive.Content),
};
export const Tabs = TabsInternal.Root;
Tabs.displayName = 'Tabs';
Tabs.List = TabsInternal.List;
Tabs.List.displayName = 'Tabs.List';
Tabs.Tab = TabsInternal.Trigger;
Tabs.Tab.displayName = 'Tabs.Tab';
Tabs.Content = TabsInternal.Content;
Tabs.Content.displayName = 'Tabs.Content';
//# sourceMappingURL=tabs.js.map