@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
16 lines (15 loc) • 1.06 kB
JavaScript
'use client';
import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
import { tabs } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
// ─────────────────────────────────────────────
// Build context utilities for the `tabsRecipe`
// ─────────────────────────────────────────────
const { withSlotProvider, withSlotContext } = makeStyleContext(tabs);
export const TabsRootProvider = withSlotProvider(ArkTabs.RootProvider, 'root');
export const TabsRoot = withSlotProvider(ArkTabs.Root, 'root');
export const TabContent = withSlotContext(ArkTabs.Content, 'content');
export const TabIndicator = withSlotContext(ArkTabs.Indicator, 'indicator');
export const TabList = withSlotContext(ArkTabs.List, 'list');
export const TabTrigger = withSlotContext(ArkTabs.Trigger, 'trigger');
export const TabsContext = ArkTabs.Context;