@primitiv-ui/react 0.1.0

package/src/Tabs/__tests__/Tabs.mouse-interaction.test.tsx

@@ -0,0 +1,216 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tabs } from '..';
+
+describe('Tabs mouse interaction tests', () => {
+  describe('tab and panel activation', () => {
+    it('should activate a tab when clicked', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      expect(tab2Trigger).toHaveAttribute('aria-selected', 'true');
+      expect(tab2Trigger).toHaveAttribute('data-state', 'active');
+      expect(tab2Trigger).toHaveAttribute('tabindex', '0');
+      expect(tab2Trigger).toHaveFocus();
+    });
+
+    it('should deactivate non-active tabs when activating another', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      const tab3Trigger = screen.getByRole('tab', { name: 'Tab 3' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      expect(tab1Trigger).toHaveAttribute('aria-selected', 'false');
+      expect(tab1Trigger).toHaveAttribute('data-state', 'inactive');
+      expect(tab1Trigger).toHaveAttribute('tabindex', '-1');
+
+      expect(tab3Trigger).toHaveAttribute('aria-selected', 'false');
+      expect(tab3Trigger).toHaveAttribute('data-state', 'inactive');
+      expect(tab3Trigger).toHaveAttribute('tabindex', '-1');
+    });
+
+    it('should activate a content panel when clicked', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      const tab2Panel = screen.getByRole('tabpanel', { name: 'Tab 2' });
+      expect(tab2Panel).toHaveAttribute('data-state', 'active');
+      expect(tab2Panel).toHaveAttribute('tabindex', '0');
+      expect(tab2Panel).not.toHaveAttribute('hidden');
+    });
+
+    it('should deactivate non-active content panels when activating another', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      const panels = screen.queryAllByRole('tabpanel', { hidden: true });
+      const tab1Panel = panels[0];
+      const tab3Panel = panels[2];
+
+      expect(tab1Panel).toHaveAttribute('data-state', 'inactive');
+      expect(tab1Panel).toHaveAttribute('tabindex', '-1');
+      expect(tab1Panel).toHaveAttribute('hidden');
+
+      expect(tab3Panel).toHaveAttribute('data-state', 'inactive');
+      expect(tab3Panel).toHaveAttribute('tabindex', '-1');
+      expect(tab3Panel).toHaveAttribute('hidden');
+    });
+  });
+
+  describe('click handlers', () => {
+    it('should call custom onClick handler when provided', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2" onClick={handleClick}>
+              Tab 2
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call custom onClick handler AND activate the tab', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2" onClick={handleClick}>
+              Tab 2
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(tab2Trigger).toHaveAttribute('aria-selected', 'true');
+      expect(tab2Trigger).toHaveAttribute('data-state', 'active');
+      expect(tab2Trigger).toHaveAttribute('tabindex', '0');
+    });
+
+    it('should receive the click event in custom onClick handler', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2" onClick={handleClick}>
+              Tab 2
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      // Act
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'click',
+          target: tab2Trigger,
+        }),
+      );
+    });
+  });
+});

package/src/Tabs/__tests__/Tabs.reading-direction.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider";
+import { Tabs } from "../Tabs";
+import { TabsReadingDirection } from "../types";
+
+describe("Tabs reading direction tests", () => {
+  it('should have the dir attribute set to "ltr" by default', () => {
+    // Arrange
+    render(<Tabs.Root data-testid="tabs-root" />);
+    const tabsRoot = screen.getByTestId("tabs-root");
+
+    // Assert
+    expect(tabsRoot).toHaveAttribute("dir", "ltr");
+  });
+
+  it.each(["ltr", "rtl"] as TabsReadingDirection[])(
+    "should accept dir prop set to %s by default",
+    (direction) => {
+      // Arrange
+      render(<Tabs.Root data-testid="tabs-root" dir={direction} />);
+      const tabsRoot = screen.getByTestId("tabs-root");
+
+      // Assert
+      expect(tabsRoot).toHaveAttribute("dir", direction);
+    },
+  );
+
+  it("should inherit reading direction from a DirectionProvider", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <Tabs.Root data-testid="tabs-root" defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>
+      </DirectionProvider>,
+    );
+
+    // Assert — provider direction reaches both the DOM and the keyboard
+    expect(screen.getByTestId("tabs-root")).toHaveAttribute("dir", "rtl");
+
+    // Act — in RTL, Arrow Left moves forward
+    await user.tab();
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+  });
+});

package/src/Tabs/__tests__/Tabs.uncontrolled-state.test.tsx

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tabs } from '..';
+
+describe('Tabs state tests', () => {
+  describe('no defaultValue provided', () => {
+    it('should set tabindex=0 on the first trigger so the tablist is keyboard-reachable', () => {
+      render(
+        <Tabs.Root>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveAttribute('tabindex', '0');
+      expect(screen.getByRole('tab', { name: 'Tab 2' })).toHaveAttribute('tabindex', '-1');
+    });
+
+    it('should focus the first trigger when tabbing into the component with no defaultValue', async () => {
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      await user.tab();
+      expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveFocus();
+    });
+  });
+  describe('default active state', () => {
+    describe('default active state - Tabs.Trigger', () => {
+      it.each([
+        { attribute: 'aria-selected', value: 'true' },
+        { attribute: 'data-state', value: 'active' },
+        { attribute: 'tabindex', value: '0' },
+      ])('should set $attribute to $value on the first tab by default', ({ attribute, value }) => {
+        // Arrange
+        render(
+          <Tabs.Root defaultValue="tab1">
+            <Tabs.List label="Test tabs">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Content 1</Tabs.Content>
+            <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          </Tabs.Root>,
+        );
+
+        const firstTab = screen.getByRole('tab', { name: 'Tab 1' });
+
+        // Assert
+        expect(firstTab).toHaveAttribute(attribute, value);
+      });
+
+      it.each([
+        { attribute: 'aria-selected', value: 'false' },
+        { attribute: 'data-state', value: 'inactive' },
+        { attribute: 'tabindex', value: '-1' },
+      ])(
+        'should set $attribute to $value on the non-active tabs by default',
+        ({ attribute, value }) => {
+          // Arrange
+          render(
+            <Tabs.Root defaultValue="tab1">
+              <Tabs.List label="Test tabs">
+                <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+                <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+                <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="tab1">Content 1</Tabs.Content>
+              <Tabs.Content value="tab2">Content 2</Tabs.Content>
+              <Tabs.Content value="tab3">Content 3</Tabs.Content>
+            </Tabs.Root>,
+          );
+
+          const secondTab = screen.getByRole('tab', { name: 'Tab 2' });
+          const thirdTab = screen.getByRole('tab', { name: 'Tab 3' });
+
+          // Assert
+          expect(secondTab).toHaveAttribute(attribute, value);
+          expect(thirdTab).toHaveAttribute(attribute, value);
+        },
+      );
+    });
+
+    describe('default active state - Tabs.Content', () => {
+      it.each([
+        { attribute: 'data-state', value: 'active' },
+        { attribute: 'tabindex', value: '0' },
+      ])(
+        'should set $attribute to $value on the first content panel by default',
+        ({ attribute, value }) => {
+          // Arrange
+          render(
+            <Tabs.Root defaultValue="tab1">
+              <Tabs.List label="Test tabs">
+                <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+                <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+                <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="tab1">Content 1</Tabs.Content>
+              <Tabs.Content value="tab2">Content 2</Tabs.Content>
+              <Tabs.Content value="tab3">Content 3</Tabs.Content>
+            </Tabs.Root>,
+          );
+
+          const firstTabPanel = screen.getByRole('tabpanel', { name: 'Tab 1' });
+
+          // Assert
+          expect(firstTabPanel).toHaveAttribute(attribute, value);
+        },
+      );
+
+      it('should not set hidden attribute on the first content panel by default', () => {
+        render(
+          <Tabs.Root defaultValue="tab1">
+            <Tabs.List label="Test tabs">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Content 1</Tabs.Content>
+            <Tabs.Content value="tab2">Content 2</Tabs.Content>
+            <Tabs.Content value="tab3">Content 3</Tabs.Content>
+          </Tabs.Root>,
+        );
+
+        const firstTabPanel = screen.getByRole('tabpanel', { name: 'Tab 1' });
+
+        expect(firstTabPanel).not.toHaveAttribute('hidden');
+      });
+
+      it.each([
+        { attribute: 'data-state', value: 'inactive' },
+        { attribute: 'tabindex', value: '-1' },
+      ])(
+        'should set $attribute to $value on the non-active content panels by default',
+        ({ attribute, value }) => {
+          // Arrange
+          render(
+            <Tabs.Root defaultValue="tab1">
+              <Tabs.List label="Test tabs">
+                <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+                <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+                <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="tab1">Content 1</Tabs.Content>
+              <Tabs.Content value="tab2">Content 2</Tabs.Content>
+              <Tabs.Content value="tab3">Content 3</Tabs.Content>
+            </Tabs.Root>,
+          );
+
+          const panels = screen.queryAllByRole('tabpanel', { hidden: true });
+          const secondTabPanel = panels[1];
+          const thirdTabPanel = panels[2];
+
+          // Assert
+          expect(secondTabPanel).toHaveAttribute(attribute, value);
+          expect(thirdTabPanel).toHaveAttribute(attribute, value);
+        },
+      );
+
+      it('should set hidden attribute on the non-active content panels by default', () => {
+        render(
+          <Tabs.Root defaultValue="tab1">
+            <Tabs.List label="Test tabs">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Content 1</Tabs.Content>
+            <Tabs.Content value="tab2">Content 2</Tabs.Content>
+            <Tabs.Content value="tab3">Content 3</Tabs.Content>
+          </Tabs.Root>,
+        );
+
+        const panels = screen.queryAllByRole('tabpanel', { hidden: true });
+        const secondTabPanel = panels[1];
+        const thirdTabPanel = panels[2];
+
+        expect(secondTabPanel).toHaveAttribute('hidden');
+        expect(thirdTabPanel).toHaveAttribute('hidden');
+      });
+    });
+  });
+});

package/src/Tabs/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useTabsRoot';
+export * from './useTabsContent';
+export * from './useTabsContext';
+export * from './useTabsTrigger';

package/src/Tabs/hooks/useTabsContent.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+import { TabsContentProps } from "../types";
+import { getTriggerAndPanelIds } from "../utils";
+
+import { useTabsContext } from ".";
+
+export function useTabsContent({ value }: Pick<TabsContentProps, "value">) {
+  const { orientation, activeValue, tabsId, lazyMount } = useTabsContext();
+  const isActive = activeValue === value;
+  const { triggerId, panelId } = getTriggerAndPanelIds(tabsId, value);
+  const state = isActive ? "active" : "inactive";
+  const tabIndex = isActive ? 0 : -1;
+
+  // Track whether this panel has ever been active. Starts true for the
+  // default active panel; flips once on first activation for all others.
+  const [activated, setActivated] = useState(() => isActive);
+  useEffect(() => {
+    if (isActive) setActivated(true);
+  }, [isActive]);
+
+  // When lazyMount is off children always render; when on they render only
+  // after the tab has been activated for the first time.
+  const shouldRender = !lazyMount || activated;
+
+  return { panelId, triggerId, orientation, isActive, state, tabIndex, shouldRender };
+}

package/src/Tabs/hooks/useTabsContext.ts

@@ -0,0 +1 @@
+export { useTabsContext } from "../TabsContext";

package/src/Tabs/hooks/useTabsRoot.ts

@@ -0,0 +1,148 @@
+import {
+  useCallback,
+  useId,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  Ref,
+} from "react";
+
+import { useCollection, useControllableState } from "../../hooks";
+
+import type { TabsRootProps, TabsImperativeApi } from "../types";
+
+type TriggerMeta = {
+  element: HTMLButtonElement;
+  disabled: boolean;
+};
+
+export function useTabsRoot(
+  {
+    orientation = "horizontal",
+    dir = "ltr",
+    activationMode = "automatic",
+    defaultValue,
+    value,
+    onValueChange,
+    onChange,
+    lazyMount = false,
+  }: Omit<TabsRootProps, "className">,
+  ref: Ref<TabsImperativeApi>,
+) {
+  const tabsId = useId();
+  // Tabs intentionally does NOT pass onValueChange to useControllableState:
+  // in uncontrolled mode the existing public contract fires only `onChange`
+  // (with the {index, name} payload), not `onValueChange`. Tabs.Trigger
+  // therefore branches on isControlled and calls onValueChange directly in
+  // the controlled path; the hook's setter is the uncontrolled-mode setState.
+  const [activeValue, setActiveValue, isControlled] =
+    useControllableState<string>(value, defaultValue);
+  const {
+    register: registerTriggerBase,
+    itemsRef: triggersRef,
+    keys: triggerValues,
+  } = useCollection<string, TriggerMeta>();
+
+  const registerTrigger = useCallback(
+    (
+      triggerValue: string,
+      element: HTMLButtonElement | null,
+      disabled = false,
+    ) => {
+      registerTriggerBase(
+        triggerValue,
+        element ? { element, disabled } : null,
+      );
+    },
+    [registerTriggerBase],
+  );
+
+  const disabledTriggerValues = useMemo(
+    () =>
+      new Set(
+        Array.from(triggersRef.current.entries())
+          .filter(([, meta]) => meta.disabled)
+          .map(([v]) => v),
+      ),
+    // triggerValues is a fresh array on every register call, so the memo
+    // re-runs whenever any trigger mounts, unmounts, or toggles disabled.
+    [triggerValues, triggersRef],
+  );
+
+  const focusTrigger = useCallback(
+    (triggerValue: string) => {
+      triggersRef.current.get(triggerValue)?.element.focus();
+    },
+    [triggersRef],
+  );
+
+  useEffect(() => {
+    if (
+      triggerValues.length > 0 &&
+      activeValue !== undefined &&
+      !triggerValues.includes(activeValue)
+    ) {
+      throw new Error(
+        `Invalid active tab value: "${activeValue}". Valid values are: [${triggerValues.join(
+          ", ",
+        )}]`,
+      );
+    }
+  }, [activeValue, triggerValues]);
+
+  // Imperative API
+  useImperativeHandle(
+    ref,
+    () => ({
+      setActiveTab: (newValue: string) => {
+        if (!triggerValues.includes(newValue)) {
+          throw new Error(`Invalid tab value: ${newValue}`);
+        }
+
+        if (isControlled) {
+          onValueChange?.(newValue);
+        } else {
+          setActiveValue(newValue);
+        }
+      },
+    }),
+    [isControlled, setActiveValue, onValueChange, triggerValues],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      orientation,
+      dir,
+      activationMode,
+      tabsId,
+      activeValue,
+      isControlled,
+      setActiveValue,
+      onValueChange,
+      onChange,
+      lazyMount,
+      registerTrigger,
+      triggerValues,
+      disabledTriggerValues,
+      focusTrigger,
+    }),
+    [
+      orientation,
+      dir,
+      activationMode,
+      tabsId,
+      activeValue,
+      isControlled,
+      setActiveValue,
+      onValueChange,
+      onChange,
+      lazyMount,
+      registerTrigger,
+      triggerValues,
+      disabledTriggerValues,
+      focusTrigger,
+    ],
+  );
+
+  return { contextValue };
+}