@hanzogui/tabs 2.0.0

package/dist/jsx/index.mjs

@@ -0,0 +1,11 @@
+import { createTabs } from "./createTabs.mjs";
+import { DefaultTabsContentFrame, DefaultTabsFrame, DefaultTabsTabFrame } from "./Tabs.mjs";
+export * from "./createTabs.mjs";
+export * from "./StyledContext.mjs";
+const Tabs = createTabs({
+  ContentFrame: DefaultTabsContentFrame,
+  TabFrame: DefaultTabsTabFrame,
+  TabsFrame: DefaultTabsFrame
+});
+export { Tabs };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createTabs","DefaultTabsContentFrame","DefaultTabsFrame","DefaultTabsTabFrame","Tabs","ContentFrame","TabFrame","TabsFrame"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,UAAA,QAAkB;AAC3B,SAASC,uBAAA,EAAyBC,gBAAA,EAAkBC,mBAAA,QAA2B;AAC/E,cAAc;AACd,cAAc;AAEP,MAAMC,IAAA,GAAOJ,UAAA,CAAW;EAC7BK,YAAA,EAAcJ,uBAAA;EACdK,QAAA,EAAUH,mBAAA;EACVI,SAAA,EAAWL;AACb,CAAC","ignoreList":[]}

package/dist/jsx/index.native.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var index_exports = {};
+__export(index_exports, {
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(index_exports);
+var import_createTabs = require("./createTabs.native.js"),
+  import_Tabs = require("./Tabs.native.js");
+__reExport(index_exports, require("./createTabs.native.js"), module.exports);
+__reExport(index_exports, require("./StyledContext.native.js"), module.exports);
+var Tabs = (0, import_createTabs.createTabs)({
+  ContentFrame: import_Tabs.DefaultTabsContentFrame,
+  TabFrame: import_Tabs.DefaultTabsTabFrame,
+  TabsFrame: import_Tabs.DefaultTabsFrame
+});
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAyB;AAClC,IAAAC,gBAAc,GAAAF,MAAA,CAAAG,wBAAA;AACd,IAAAC,iBAAc,GAAAJ,MAAA,CAAAK,mBAAA;AAEP,IAAAC,YAAa,GAAAN,MAAW,CAAAO,SAAA,CAAAC,cAAA;AAAA,IAC7BC,QAAA,GAAAA,CAAcC,MAAA,EAAAC,GAAA;IACd,SAAAC,IAAU,IAAAD,GAAA,EACVZ,SAAW,CAAAW,MAAA,EAAAE,IAAA;MAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;MAAAE,UAAA;IAAA;EACb,CAAC;EAAAC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA","ignoreList":[]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@hanzogui/tabs",
+  "version": "2.0.0",
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/compose-refs": "2.0.0-rc.29",
+    "@hanzogui/constants": "2.0.0-rc.29",
+    "@hanzogui/core": "2.0.0-rc.29",
+    "@hanzogui/create-context": "2.0.0-rc.29",
+    "@hanzogui/element": "2.0.0-rc.29",
+    "@hanzogui/get-button-sized": "2.0.0-rc.29",
+    "@hanzogui/group": "2.0.0",
+    "@hanzogui/helpers": "2.0.0-rc.29",
+    "@hanzogui/roving-focus": "2.0.0",
+    "@hanzogui/sizable-context": "2.0.0-rc.29",
+    "@hanzogui/stacks": "2.0.0",
+    "@hanzogui/use-controllable-state": "2.0.0-rc.29",
+    "@hanzogui/use-direction": "2.0.0",
+    "@hanzogui/web": "2.0.0-rc.29"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.29",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/StyledContext.tsx

@@ -0,0 +1,19 @@
+import type { SizeTokens } from '@hanzogui/core'
+import { createStyledContext } from '@hanzogui/core'
+import type { TabsProps } from './createTabs'
+
+export type TabsContextValue = {
+  baseId: string
+  value?: string
+  onChange: (value: string) => void
+  orientation?: TabsProps['orientation']
+  dir?: TabsProps['dir']
+  activationMode?: TabsProps['activationMode']
+  size: SizeTokens
+  registerTrigger: () => void
+  unregisterTrigger: () => void
+  triggersCount: number
+}
+
+export const { Provider: TabsProvider, useStyledContext: useTabsContext } =
+  createStyledContext<TabsContextValue>()

package/src/Tabs.tsx

@@ -0,0 +1,69 @@
+import { styled, View } from '@hanzogui/core'
+import { getButtonSized } from '@hanzogui/get-button-sized'
+import { SizableStack, ThemeableStack } from '@hanzogui/stacks'
+
+const TABS_NAME = 'Tabs'
+export const DefaultTabsFrame = styled(SizableStack, {
+  name: TABS_NAME,
+})
+
+const TRIGGER_NAME = 'TabsTrigger'
+
+export const DefaultTabsTabFrame = styled(
+  View,
+  {
+    name: TRIGGER_NAME,
+    role: 'tab',
+
+    variants: {
+      size: {
+        '...size': getButtonSized,
+      },
+
+      disabled: {
+        true: {
+          pointerEvents: 'none',
+        },
+      },
+
+      unstyled: {
+        false: {
+          borderWidth: 0,
+          backgroundColor: '$background',
+          userSelect: 'none',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          flexDirection: 'row',
+          cursor: 'pointer',
+
+          pressStyle: {
+            backgroundColor: '$backgroundPress',
+          },
+
+          focusVisibleStyle: {
+            outlineColor: '$outlineColor',
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            zIndex: 10,
+          },
+        },
+      },
+    } as const,
+
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    },
+  },
+  {
+    accept: {
+      activeStyle: 'style',
+    } as const,
+  }
+)
+
+const CONTENT_NAME = 'TabsContent'
+
+export const DefaultTabsContentFrame = styled(ThemeableStack, {
+  name: CONTENT_NAME,
+})

package/src/createTabs.tsx

@@ -0,0 +1,433 @@
+import { composeRefs } from '@hanzogui/compose-refs'
+import { isWeb } from '@hanzogui/constants'
+import type { GroupProps } from '@hanzogui/group'
+import { Group, useGroupItem } from '@hanzogui/group'
+import { composeEventHandlers, withStaticProperties } from '@hanzogui/helpers'
+import { RovingFocusGroup, type RovingFocusGroupProps } from '@hanzogui/roving-focus'
+import { SizableContext } from '@hanzogui/sizable-context'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import { useDirection } from '@hanzogui/use-direction'
+import type { GetProps, GuiElement, ViewProps } from '@hanzogui/web'
+import { useEvent } from '@hanzogui/web'
+import * as React from 'react'
+import type { LayoutRectangle } from 'react-native'
+import { TabsProvider, useTabsContext } from './StyledContext'
+import { DefaultTabsContentFrame, DefaultTabsFrame, DefaultTabsTabFrame } from './Tabs'
+
+type TabsComponent = (props: { direction: 'horizontal' | 'vertical' } & ViewProps) => any
+type TabComponent = (props: { active?: boolean } & ViewProps) => any
+type ContentComponent = (props: ViewProps) => any
+
+export function createTabs<
+  C extends TabsComponent,
+  T extends TabComponent,
+  F extends ContentComponent,
+>(createProps: { ContentFrame: F; TabFrame: T; TabsFrame: C }) {
+  const {
+    ContentFrame = DefaultTabsContentFrame,
+    TabFrame = DefaultTabsTabFrame,
+    TabsFrame = DefaultTabsFrame,
+  } = createProps as unknown as {
+    ContentFrame: typeof DefaultTabsContentFrame
+    TabFrame: typeof DefaultTabsTabFrame
+    TabsFrame: typeof DefaultTabsFrame
+  }
+
+  const TABS_CONTEXT = 'TabsContext'
+
+  const TAB_LIST_NAME = 'TabsList'
+
+  const TabsList = React.forwardRef<GuiElement, TabsListProps>(
+    (props: ScopedProps<TabsListProps>, forwardedRef) => {
+      const { __scopeTabs, loop = true, children, ...listProps } = props
+      const context = useTabsContext(__scopeTabs)
+
+      return (
+        <RovingFocusGroup
+          __scopeRovingFocusGroup={__scopeTabs || TABS_CONTEXT}
+          orientation={context.orientation}
+          dir={context.dir}
+          loop={loop}
+          asChild
+        >
+          <Group
+            role="tablist"
+            componentName={TAB_LIST_NAME}
+            aria-orientation={context.orientation}
+            ref={forwardedRef}
+            orientation={context.orientation}
+            {...listProps}
+          >
+            {children}
+          </Group>
+        </RovingFocusGroup>
+      )
+    }
+  )
+
+  TabsList.displayName = TAB_LIST_NAME
+
+  /* -------------------------------------------------------------------------------------------------
+   * TabsTrigger
+   * -----------------------------------------------------------------------------------------------*/
+
+  const TRIGGER_NAME = 'TabsTrigger'
+
+  /**
+   * @deprecated Use `TabLayout` instead
+   */
+
+  const TabsTrigger = TabFrame.styleable<ScopedProps<TabsTabProps>>(
+    (props, forwardedRef) => {
+      const {
+        __scopeTabs,
+        value,
+        disabled = false,
+        onInteraction,
+        activeStyle,
+        activeTheme,
+        unstyled = false,
+        ...triggerProps
+      } = props
+      const context = useTabsContext(__scopeTabs)
+      const triggerId = makeTriggerId(context.baseId, value)
+      const contentId = makeContentId(context.baseId, value)
+      const isSelected = value === context.value
+      const [layout, setLayout] = React.useState<TabLayout | null>(null)
+      const triggerRef = React.useRef<GuiElement>(null)
+      const groupItemProps = useGroupItem({ disabled: !!disabled })
+
+      React.useEffect(() => {
+        context.registerTrigger()
+        return () => context.unregisterTrigger()
+      }, [])
+
+      React.useEffect(() => {
+        if (!triggerRef.current || !isWeb) return
+
+        const el = triggerRef.current as unknown as HTMLElement
+
+        function getTriggerSize() {
+          if (!el) return
+          setLayout({
+            width: el.offsetWidth,
+            height: el.offsetHeight,
+            x: el.offsetLeft,
+            y: el.offsetTop,
+          })
+        }
+        getTriggerSize()
+
+        const observer = new ResizeObserver(getTriggerSize)
+        observer.observe(el)
+
+        return () => {
+          observer.unobserve(el)
+        }
+      }, [context.triggersCount])
+
+      React.useEffect(() => {
+        if (isSelected && layout) {
+          onInteraction?.('select', layout)
+        }
+      }, [isSelected, value, layout])
+
+      return (
+        <RovingFocusGroup.Item
+          __scopeRovingFocusGroup={__scopeTabs || TABS_CONTEXT}
+          asChild
+          focusable={!disabled}
+          active={isSelected}
+        >
+          <TabFrame
+            onMouseEnter={composeEventHandlers(props.onMouseEnter, () => {
+              if (layout) {
+                onInteraction?.('hover', layout)
+              }
+            })}
+            onMouseLeave={composeEventHandlers(props.onMouseLeave, () => {
+              onInteraction?.('hover', null)
+            })}
+            role="tab"
+            aria-selected={isSelected}
+            aria-controls={contentId}
+            data-state={isSelected ? 'active' : 'inactive'}
+            data-disabled={disabled ? '' : undefined}
+            id={triggerId}
+            theme={activeTheme ?? null}
+            unstyled={unstyled}
+            {...(!unstyled && {
+              size: context.size,
+            })}
+            {...(isSelected && {
+              ...(!unstyled &&
+                !activeStyle && {
+                  backgroundColor: '$backgroundActive',
+                }),
+              ...(activeStyle as object),
+            })}
+            {...groupItemProps}
+            disabled={disabled ?? groupItemProps.disabled}
+            {...triggerProps}
+            ref={composeRefs(forwardedRef, triggerRef)}
+            onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {
+              // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+              // but not when the control key is pressed (avoiding MacOS right click)
+
+              const webChecks =
+                !isWeb ||
+                ((event as unknown as React.MouseEvent).button === 0 &&
+                  (event as unknown as React.MouseEvent).ctrlKey === false)
+              if (!disabled && !isSelected && webChecks) {
+                context.onChange(value)
+              }
+            })}
+            {...(isWeb && {
+              onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+                if ([' ', 'Enter'].includes(event.key)) {
+                  context.onChange(value)
+                  event.preventDefault()
+                }
+              }),
+              onFocus: composeEventHandlers(props.onFocus, (event) => {
+                if (layout) {
+                  onInteraction?.('focus', layout)
+                }
+                // handle "automatic" activation if necessary
+                // ie. activate tab following focus
+                const isAutomaticActivation = context.activationMode !== 'manual'
+                if (!isSelected && !disabled && isAutomaticActivation) {
+                  context.onChange(value)
+                }
+              }),
+              onBlur: composeEventHandlers(props.onBlur, () => {
+                onInteraction?.('focus', null)
+              }),
+            })}
+          />
+        </RovingFocusGroup.Item>
+      )
+    }
+  )
+
+  TabsTrigger.displayName = TRIGGER_NAME
+
+  /* -------------------------------------------------------------------------------------------------
+   * TabsContent
+   * -----------------------------------------------------------------------------------------------*/
+
+  const TabsContent = ContentFrame.styleable<TabsContentExtraProps>(function TabsContent(
+    props: ScopedProps<TabsContentProps>,
+    forwardedRef
+  ) {
+    const { __scopeTabs, value, forceMount, children, ...contentProps } = props
+    const context = useTabsContext(__scopeTabs)
+    const isSelected = value === context.value
+    const show = forceMount || isSelected
+
+    const triggerId = makeTriggerId(context.baseId, value)
+    const contentId = makeContentId(context.baseId, value)
+
+    if (!show) {
+      return null
+    }
+
+    return (
+      <ContentFrame
+        key={value}
+        data-state={isSelected ? 'active' : 'inactive'}
+        data-orientation={context.orientation}
+        role="tabpanel"
+        aria-labelledby={triggerId}
+        // @ts-ignore
+        hidden={!show}
+        id={contentId}
+        tabIndex={0}
+        {...contentProps}
+        ref={forwardedRef}
+      >
+        {children}
+      </ContentFrame>
+    )
+  })
+
+  /* -------------------------------------------------------------------------------------------------
+   * Tabs
+   * -----------------------------------------------------------------------------------------------*/
+
+  type ScopedProps<P> = P & { __scopeTabs?: string }
+  // const [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
+  //   createRovingFocusGroupScope,
+  // ])
+  // const useRovingFocusGroupScope = createRovingFocusGroupScope()
+
+  type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
+
+  const TabsComponent = TabsFrame.styleable<TabsExtraProps>(function Tabs(
+    props: ScopedProps<TabsProps>,
+    forwardedRef
+  ) {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = 'horizontal',
+      dir,
+      activationMode = 'manual',
+      size = '$true',
+      ...tabsProps
+    } = props
+    const direction = useDirection(dir)
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? '',
+    })
+    const [triggersCount, setTriggersCount] = React.useState(0)
+    const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))
+    const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))
+
+    return (
+      <SizableContext.Provider size={size}>
+        <TabsProvider
+          scope={__scopeTabs}
+          baseId={React.useId()}
+          value={value}
+          onChange={setValue}
+          orientation={orientation}
+          dir={direction}
+          activationMode={activationMode}
+          size={size}
+          registerTrigger={registerTrigger}
+          triggersCount={triggersCount}
+          unregisterTrigger={unregisterTrigger}
+        >
+          <TabsFrame
+            direction={direction}
+            data-orientation={orientation}
+            {...tabsProps}
+            ref={forwardedRef}
+          />
+        </TabsProvider>
+      </SizableContext.Provider>
+    )
+  })
+
+  // make it so it can accept a generic
+  // this broke things outside our repo, but not sure why, all non style props were missing
+  // like onPress etc
+  // as <Tab = string>(
+  //   props: TabsProps<Tab> & { ref?: React.Ref<GuiElement> }
+  // ) => React.JSX.Element
+
+  return withStaticProperties(TabsComponent, {
+    List: TabsList,
+    /**
+     * @deprecated Use Tabs.Tab instead
+     */
+    Trigger: TabsTrigger,
+    Tab: TabsTrigger,
+    Content: TabsContent,
+  })
+}
+/* ---------------------------------------------------------------------------------------------- */
+
+function makeTriggerId(baseId: string, value: string) {
+  return `${baseId}-trigger-${value}`
+}
+
+function makeContentId(baseId: string, value: string) {
+  return `${baseId}-content-${value}`
+}
+
+// Types
+type TabsFrameProps = GetProps<typeof DefaultTabsFrame>
+
+type TabsExtraProps<Tab = string> = {
+  /** The value for the selected tab, if controlled */
+  value?: string
+  /** The value of the tab to select by default, if uncontrolled */
+  defaultValue?: Tab
+  /** A function called when a new tab is selected */
+  onValueChange?: (value: Tab) => void
+  /**
+   * The orientation the tabs are layed out.
+   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+   * @defaultValue horizontal
+   */
+  orientation?: RovingFocusGroupProps['orientation']
+  /**
+   * The direction of navigation between toolbar items.
+   */
+  dir?: RovingFocusGroupProps['dir']
+  /**
+   * Whether a tab is activated automatically or manually. Only supported in web.
+   * @defaultValue automatic
+   * */
+  activationMode?: 'automatic' | 'manual'
+}
+
+type TabsProps<Tab = string> = TabsFrameProps & TabsExtraProps<Tab>
+
+type TabsListFrameProps = GroupProps
+
+type TabsListProps = TabsListFrameProps & {
+  /**
+   * Whether to loop over after reaching the end or start of the items
+   * @default true
+   */
+  loop?: boolean
+}
+
+type InteractionType = 'select' | 'focus' | 'hover'
+
+type TabLayout = LayoutRectangle
+
+type TabsTriggerFrameProps = GetProps<typeof DefaultTabsTabFrame>
+
+/**
+ * @deprecated use `TabTabsProps` instead
+ */
+type TabsTriggerProps = TabsTriggerFrameProps & {
+  /** The value for the tabs state to be changed to after activation of the trigger */
+  value: string
+
+  /** Used for making custom indicators when trigger interacted with */
+  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void
+
+  /** Custom styles to apply when tab is active */
+  activeStyle?: TabsTriggerFrameProps
+
+  /** Theme to apply when tab is active (use null for no theme) */
+  activeTheme?: string | null
+}
+
+type TabsTabProps = TabsTriggerProps
+
+type TabsTriggerLayout = LayoutRectangle
+
+type TabsContentFrameProps = GetProps<typeof DefaultTabsContentFrame>
+
+type TabsContentExtraProps = {
+  /** Will show the content when the value matches the state of Tabs root */
+  value: string
+
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Gui animations.
+   */
+  forceMount?: boolean
+}
+
+type TabsContentProps = TabsContentFrameProps & TabsContentExtraProps
+
+export type {
+  TabLayout,
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTabProps,
+  TabsTriggerLayout,
+  TabsTriggerProps,
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+import { createTabs } from './createTabs'
+import { DefaultTabsContentFrame, DefaultTabsFrame, DefaultTabsTabFrame } from './Tabs'
+export * from './createTabs'
+export * from './StyledContext'
+
+export const Tabs = createTabs({
+  ContentFrame: DefaultTabsContentFrame,
+  TabFrame: DefaultTabsTabFrame,
+  TabsFrame: DefaultTabsFrame,
+})

package/types/StyledContext.d.ts

@@ -0,0 +1,19 @@
+import type { SizeTokens } from '@gui/core';
+import type { TabsProps } from './createTabs';
+export type TabsContextValue = {
+    baseId: string;
+    value?: string;
+    onChange: (value: string) => void;
+    orientation?: TabsProps['orientation'];
+    dir?: TabsProps['dir'];
+    activationMode?: TabsProps['activationMode'];
+    size: SizeTokens;
+    registerTrigger: () => void;
+    unregisterTrigger: () => void;
+    triggersCount: number;
+};
+export declare const TabsProvider: import("react").Provider<TabsContextValue> & import("react").ProviderExoticComponent<Partial<TabsContextValue> & {
+    children?: import("react").ReactNode;
+    scope?: string;
+}>, useTabsContext: (scope?: string) => TabsContextValue;
+//# sourceMappingURL=StyledContext.d.ts.map