TabNav component

Author: GoldGroove06

src/components/ui/TabNav/TabNav.tsx

@@ -0,0 +1,12 @@
+import TabNavLink from './fragments/TabNavLink';
+import TabNavRoot from './fragments/TabNavRoot';
+
+const TabNav = () => {
+    console.warn('Direct usage of TabNav is not supported. Please use TabNav.Root, TabNav.Link instead.');
+    return null;
+};
+
+export default TabNav;
+
+TabNav.Root = TabNavRoot;
+TabNav.Link = TabNavLink;

src/components/ui/TabNav/context/TabNav.context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface TabNavContextType {
+    rootClass?: string;
+}
+
+const TabNavContext = createContext<TabNavContextType>({
+    rootClass: 'TabNav'
+});
+
+export default TabNavContext;

src/components/ui/TabNav/fragments/TabNavLink.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { clsx } from 'clsx';
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
+import Primitive from '~/core/primitives/Primitive';
+import TabNavContext from '../context/TabNav.context';
+
+export type TabNavLinkProps = {
+    children: React.ReactNode,
+    className?: string,
+    href?: string,
+    disabled?: boolean,
+
+}
+
+const TabNavLink = ({ className = '', href = '#', children, disabled }: TabNavLinkProps) => {
+    const { rootClass } = useContext(TabNavContext);
+
+    return (
+        <RovingFocusGroup.Item>
+            <Primitive.a
+                className={clsx(`${rootClass}-link`, className)}
+                data-disabled={disabled}
+                {...disabled ? {} : { href }}
+            >
+                {children}
+            </Primitive.a>
+        </RovingFocusGroup.Item>
+    );
+};
+
+export default TabNavLink;

src/components/ui/TabNav/fragments/TabNavRoot.tsx

@@ -0,0 +1,34 @@
+import React, { Children } from 'react';
+import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
+import TabNavContext from '../context/TabNav.context';
+
+const COMPONENT_NAME = 'TabNav';
+
+export type TabNavRootProps = {
+    className?: string,
+    loop?: boolean,
+    orientation?: 'horizontal' | 'vertical',
+    children: React.ReactNode,
+    customRootClass?: string,
+}
+
+const TabNavRoot = ({ className, loop = true, orientation = 'horizontal', children, customRootClass = '', ...props }: TabNavRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    return (
+        <TabNavContext.Provider
+            value={{
+                rootClass
+            }}>
+            <RovingFocusGroup.Root loop={loop} orientation={orientation} >
+                <RovingFocusGroup.Group className={clsx(rootClass, className)}>
+                    {children}
+                </RovingFocusGroup.Group>
+            </RovingFocusGroup.Root>
+        </TabNavContext.Provider>
+
+    );
+};
+
+export default TabNavRoot;

src/components/ui/TabNav/stories/TabNav.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import TabNav from '../TabNav';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'WIP/TabNav',
+    component: TabNav,
+    render: (args: React.JSX.IntrinsicAttributes) => <SandboxEditor>
+        <div >
+            <TabNav.Root>
+                <TabNav.Link disabled href={'###'}>Tab 1</TabNav.Link>
+                <TabNav.Link>Tab 2</TabNav.Link>
+                <TabNav.Link>Tab 3</TabNav.Link>
+            </TabNav.Root>
+        </div>
+    </SandboxEditor>
+};
+
+export const All = {
+    args: {
+        className: 'text-gray-950'
+    }
+};

styles/themes/components/tab-nav.scss

@@ -0,0 +1,23 @@
+.rad-ui-tab-nav{
+    display: flex;
+    gap: 6px;
+
+    .rad-ui-tab-nav-link {
+        background-color: white;
+        color: #65636d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 1px;
+
+        &:focus-visible {
+            outline: 2px solid var(--rad-ui-color-accent-900);
+            outline-offset: 2px;
+        }
+
+        &:hover{
+            background-color: var(--rad-ui-color-accent-300);
+            color: var(--rad-ui-color-accent-950);
+        }
+}
+}

styles/themes/default.scss

@@ -28,6 +28,7 @@
 @use "components/skeleton";
 @use "components/visuallyhidden";
 @use "components/collapsible";
+@use "components/tab-nav";
 
 // import .css file
 @use "../cssTokens/base.tokens";