@primitiv-ui/react 0.1.0 → 0.1.1

package/src/Tabs/Tabs.tsx

@@ -1,14 +1,20 @@
 import { forwardRef, Ref } from "react";
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  ReactElement,
+  RefAttributes,
+} from "react";
 
-import { useDirection } from "../DirectionProvider";
-import { Slot, composeRefs } from "../Slot";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { Slot, composeRefs } from "../Slot/index.ts";
 
 import {
   useTabsRoot,
   useTabsContext,
   useTabsTrigger,
   useTabsContent,
-} from "./hooks";
+} from "./hooks/index.ts";
 import { TabsProvider } from "./TabsContext";
 import type {
   TabsRootProps,
@@ -96,7 +102,9 @@ import type {
  * <button onClick={() => ref.current?.setActiveTab("two")}>Go to two</button>
  * ```
  */
-const TabsRoot = forwardRef<TabsImperativeApi, TabsRootProps>(function TabsRoot(
+const TabsRoot: ForwardRefExoticComponent<
+  PropsWithoutRef<TabsRootProps> & RefAttributes<TabsImperativeApi>
+> = forwardRef<TabsImperativeApi, TabsRootProps>(function TabsRoot(
   {
     className = "",
     orientation = "horizontal",
@@ -166,7 +174,7 @@ export function TabsList({
   label,
   ariaLabelledBy,
   ...rest
-}: TabsListProps) {
+}: TabsListProps): ReactElement {
   const { orientation } = useTabsContext();
 
   return (
@@ -259,7 +267,7 @@ export function TabsTrigger<T extends HTMLElement = HTMLButtonElement>({
   disabled = false,
   asChild = false,
   ...rest
-}: TabsTriggerProps<T>) {
+}: TabsTriggerProps<T>): ReactElement {
   const {
     buttonRef,
     triggerId,
@@ -345,9 +353,16 @@ export function TabsContent({
   className = "",
   value,
   ...rest
-}: TabsContentProps) {
-  const { panelId, triggerId, orientation, isActive, state, tabIndex, shouldRender } =
-    useTabsContent({ value });
+}: TabsContentProps): ReactElement {
+  const {
+    panelId,
+    triggerId,
+    orientation,
+    isActive,
+    state,
+    tabIndex,
+    shouldRender,
+  } = useTabsContent({ value });
 
   return (
     <div

package/src/Tabs/TabsContext.ts

@@ -1,12 +1,15 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { TabsContextValue } from "./types";
 
-export const [TabsContext, useTabsContext] =
-  createStrictContext<TabsContextValue>(
-    "Component must be rendered as a child of Tabs.Root",
-    "TabsContext",
-  );
+const tabsContextPair = createStrictContext<TabsContextValue>(
+  "Component must be rendered as a child of Tabs.Root",
+  "TabsContext",
+);
+
+export const TabsContext: Context<TabsContextValue | null> = tabsContextPair[0];
+export const useTabsContext: () => TabsContextValue = tabsContextPair[1];
 
 const TabsProvider = TabsContext.Provider;
 

package/src/Tabs/__tests__/Tabs.asChild.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createRef } from "react";
 
-import { Tabs } from "..";
+import { Tabs } from "../index.ts";
 
 describe("Tabs.Trigger asChild", () => {
   it("renders the child element instead of a <button> when asChild is true", () => {

package/src/Tabs/__tests__/Tabs.basic-rendering.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Tabs, TabsOrientation } from "..";
+import { Tabs, TabsOrientation } from "../index.ts";
 
 describe("Tabs basic rendering tests", () => {
   describe("Tabs.Root", () => {

package/src/Tabs/__tests__/Tabs.change-event-callbacks.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 import { mouseChangeEventCases, keyboardChangeEventCases } from './Tabs.fixtures';
 

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

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 describe('Tabs controlled state tests', () => {
   it('should respect the value prop for active tab', () => {

package/src/Tabs/__tests__/Tabs.error-handling.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { act, useState } from 'react';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 import { errorCases } from './Tabs.fixtures';
 

package/src/Tabs/__tests__/Tabs.imperative-api.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { createRef } from "react";
 
-import { Tabs, TabsImperativeApi } from "..";
+import { Tabs, TabsImperativeApi } from "../index.ts";
 
 describe("Tabs Imperative API", () => {
   it("should expose setActiveTab method via ref", () => {

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 import { arrowKeyCases } from './Tabs.fixtures';
 

package/src/Tabs/__tests__/Tabs.lazy-mount.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Tabs } from "..";
+import { Tabs } from "../index.ts";
 
 function renderTabs(lazyMount: boolean) {
   return render(

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 describe('Tabs mouse interaction tests', () => {
   describe('tab and panel activation', () => {

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { DirectionProvider } from "../../DirectionProvider";
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
 import { Tabs } from "../Tabs";
 import { TabsReadingDirection } from "../types";
 

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Tabs } from '..';
+import { Tabs } from '../index.ts';
 
 describe('Tabs state tests', () => {
   describe('no defaultValue provided', () => {

package/src/Tabs/hooks/useTabsContent.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { TabsContentProps } from "../types";
 import { getTriggerAndPanelIds } from "../utils";
 
-import { useTabsContext } from ".";
+import { useTabsContext } from "./index.ts";
 
 export function useTabsContent({ value }: Pick<TabsContentProps, "value">) {
   const { orientation, activeValue, tabsId, lazyMount } = useTabsContext();

package/src/Tabs/hooks/useTabsRoot.ts

@@ -7,7 +7,7 @@ import {
   Ref,
 } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 
 import type { TabsRootProps, TabsImperativeApi } from "../types";
 

package/src/Tabs/hooks/useTabsTrigger.ts

@@ -5,7 +5,7 @@ import {
   MouseEvent,
 } from "react";
 
-import { useRovingTabindex } from "../../hooks";
+import { useRovingTabindex } from "../../hooks/index.ts";
 
 import { TabsTriggerProps } from "../types";
 import { getTriggerAndPanelIds } from "../utils";

package/src/Tabs/utils.ts

@@ -1,4 +1,4 @@
-import { deriveId } from "../utils";
+import { deriveId } from "../utils/index.ts";
 
 export function getTriggerAndPanelIds(tabsId: string, value: string) {
   return {

package/src/Textarea/Textarea.tsx

@@ -1,5 +1,7 @@
-import { useFieldProps } from "../Field/hooks";
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { useFieldProps } from "../Field/hooks/index.ts";
+import { Slot } from "../Slot/index.ts";
 import { TextareaProps } from "./types";
 
 /**
@@ -74,7 +76,7 @@ export function Textarea({
   children,
   ref,
   ...consumer
-}: TextareaProps) {
+}: TextareaProps): ReactElement {
   const merged = useFieldProps(consumer);
 
   const rootProps = {

package/src/Textarea/__tests__/Textarea.field-integration.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Field } from "../../Field";
+import { Field } from "../../Field/index.ts";
 import { Textarea } from "../Textarea";
 
 describe("Textarea — Field integration", () => {

package/src/Toggle/Toggle.tsx

@@ -1,5 +1,7 @@
-import { useControllableState } from "../hooks";
-import { Slot, composeEventHandlers } from "../Slot";
+import type { ReactElement } from "react";
+
+import { useControllableState } from "../hooks/index.ts";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
 
 import { ToggleProps } from "./types";
 
@@ -50,7 +52,7 @@ function Toggle({
   children,
   ref,
   ...rest
-}: ToggleProps) {
+}: ToggleProps): ReactElement {
   const [pressed, setPressed] = useControllableState<boolean>(
     controlledPressed,
     defaultPressed ?? false,
@@ -73,7 +75,11 @@ function Toggle({
   };
 
   if (asChild) return <Slot {...toggleProps}>{children}</Slot>;
-  return <button type="button" {...toggleProps}>{children}</button>;
+  return (
+    <button type="button" {...toggleProps}>
+      {children}
+    </button>
+  );
 }
 
 Toggle.displayName = "Toggle";

package/src/ToggleGroup/ToggleGroup.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useRef } from "react";
+import type { ReactElement } from "react";
 
-import { useDirection } from "../DirectionProvider";
-import { useRovingTabindex } from "../hooks";
-import { Slot, composeEventHandlers, composeRefs } from "../Slot";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRovingTabindex } from "../hooks/index.ts";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
 
 import { ToggleGroupContext } from "./ToggleGroupContext";
-import { useToggleGroupRoot, useToggleGroupContext } from "./hooks";
+import { useToggleGroupRoot, useToggleGroupContext } from "./hooks/index.ts";
 import { ToggleGroupItemProps, ToggleGroupRootProps } from "./types";
 
 /**
@@ -73,7 +74,7 @@ function ToggleGroupRoot({
   children,
   ref,
   ...rest
-}: ToggleGroupRootProps) {
+}: ToggleGroupRootProps): ReactElement {
   const resolvedDir = dir ?? useDirection();
   const {
     value,
@@ -177,7 +178,7 @@ function ToggleGroupItem({
   children,
   ref,
   ...rest
-}: ToggleGroupItemProps) {
+}: ToggleGroupItemProps): ReactElement {
   const {
     value: groupValue,
     toggle,
@@ -288,10 +289,13 @@ type TToggleGroupCompound = typeof ToggleGroupRoot & {
  * @see {@link ToggleGroupRoot} for type modes, state, and ARIA.
  * @see {@link ToggleGroupItem} for selection, roving tabindex, and keyboard navigation.
  */
-const ToggleGroupCompound: TToggleGroupCompound = Object.assign(ToggleGroupRoot, {
-  Root: ToggleGroupRoot,
-  Item: ToggleGroupItem,
-});
+const ToggleGroupCompound: TToggleGroupCompound = Object.assign(
+  ToggleGroupRoot,
+  {
+    Root: ToggleGroupRoot,
+    Item: ToggleGroupItem,
+  },
+);
 
 ToggleGroupCompound.displayName = "ToggleGroup";
 

package/src/ToggleGroup/ToggleGroupContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 import { ToggleGroupContextValue } from "./types";
 

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { DirectionProvider } from "../../DirectionProvider";
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
 import { ToggleGroup } from "../ToggleGroup";
 
 describe("ToggleGroup reading direction", () => {

package/src/ToggleGroup/hooks/useToggleGroupRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 
 type ItemMeta = { element: HTMLButtonElement; disabled: boolean };
 

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,7 @@
-import { Portal } from "../Portal";
-import { Slot, composeRefs } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Portal } from "../Portal/index.ts";
+import { Slot, composeRefs } from "../Slot/index.ts";
 
 import {
   TooltipProvider,
@@ -11,7 +13,7 @@ import {
   useTooltipProvider,
   useTooltipRoot,
   useTooltipTrigger,
-} from "./hooks";
+} from "./hooks/index.ts";
 import type {
   TooltipArrowProps,
   TooltipContentProps,
@@ -37,8 +39,11 @@ function TooltipProviderComponent({
   children,
   delayDuration = 700,
   skipDelayDuration = 300,
-}: TooltipProviderProps) {
-  const { contextValue } = useTooltipProvider({ delayDuration, skipDelayDuration });
+}: TooltipProviderProps): ReactElement {
+  const { contextValue } = useTooltipProvider({
+    delayDuration,
+    skipDelayDuration,
+  });
   return (
     <TooltipProviderProvider value={contextValue}>
       {children}
@@ -72,7 +77,7 @@ function TooltipRoot({
   onOpenChange,
   delayDuration,
   disableHoverableContent,
-}: TooltipRootProps) {
+}: TooltipRootProps): ReactElement {
   const { contextValue } = useTooltipRoot({
     defaultOpen,
     open,
@@ -114,7 +119,7 @@ function TooltipTrigger({
   onKeyDown,
   type,
   ...rest
-}: TooltipTriggerProps) {
+}: TooltipTriggerProps): ReactElement {
   const { getTriggerProps } = useTooltipTrigger({
     onPointerEnter,
     onPointerLeave,
@@ -149,7 +154,11 @@ TooltipTrigger.displayName = "TooltipTrigger";
  * </Tooltip.Portal>
  * ```
  */
-function TooltipPortal({ children, container, forceMount }: TooltipPortalProps) {
+function TooltipPortal({
+  children,
+  container,
+  forceMount,
+}: TooltipPortalProps): ReactElement | null {
   const { open } = useTooltipContext();
 
   if (!open && !forceMount) return null;
@@ -195,7 +204,7 @@ function TooltipContent({
   onPointerEnter,
   onPointerLeave,
   ...rest
-}: TooltipContentProps) {
+}: TooltipContentProps): ReactElement | null {
   const { open } = useTooltipContext();
   const { getContentProps, internalRef } = useTooltipContent({
     onEscapeKeyDown,
@@ -227,7 +236,11 @@ TooltipContent.displayName = "TooltipContent";
  * </Tooltip.Content>
  * ```
  */
-function TooltipArrow({ ref, asChild = false, ...rest }: TooltipArrowProps) {
+function TooltipArrow({
+  ref,
+  asChild = false,
+  ...rest
+}: TooltipArrowProps): ReactElement {
   if (asChild) {
     return <Slot ref={ref} {...rest} />;
   }

package/src/Tooltip/TooltipContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 import type { TooltipContextValue, TooltipProviderContextValue } from "./types";
 

package/src/Tooltip/hooks/useTooltipContent.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { useTooltipContext } from "../TooltipContext";
 import type { TooltipContentProps } from "../types";
 

package/src/Tooltip/hooks/useTooltipRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useId, useMemo, useRef } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 import { useTooltipProviderContext } from "../TooltipContext";
 import type { TooltipContextValue, TooltipRootProps } from "../types";
 

package/src/Tooltip/hooks/useTooltipTrigger.ts

@@ -1,6 +1,6 @@
 import { KeyboardEvent } from "react";
 
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { useTooltipContext } from "../TooltipContext";
 import type { TooltipTriggerProps } from "../types";
 

package/src/Tree/Tree.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useLayoutEffect, useRef } from "react";
+import type { ReactElement } from "react";
 
-import { Breadcrumb } from "../Breadcrumb";
-import { Slot, composeEventHandlers } from "../Slot";
-import { deriveId } from "../utils";
+import { Breadcrumb } from "../Breadcrumb/index.ts";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
+import { deriveId } from "../utils/index.ts";
 
 import {
   TreeContext,
@@ -16,7 +17,7 @@ import {
   useTreeItemKeyboard,
   useTreeRoot,
   useTreeSelectionPaths,
-} from "./hooks";
+} from "./hooks/index.ts";
 import { partitionBranchChildren } from "./utils";
 
 import type {
@@ -63,7 +64,7 @@ import type {
  * </Tree.Root>
  * ```
  */
-export function TreeRoot(props: TreeRootProps) {
+export function TreeRoot(props: TreeRootProps): ReactElement {
   const {
     children,
     expandedValues,
@@ -141,7 +142,7 @@ export function TreeItem({
   onFocus,
   onKeyDown,
   ...rest
-}: TreeItemProps) {
+}: TreeItemProps): ReactElement {
   const { depth, parentValue } = useTreeLevelContext();
   const { isSelected, select, registerNode, tabStop, setActiveValue } =
     useTreeContext();
@@ -235,7 +236,7 @@ export function TreeBranch({
   onFocus,
   onKeyDown,
   ...rest
-}: TreeBranchProps) {
+}: TreeBranchProps): ReactElement {
   const { depth, parentValue } = useTreeLevelContext();
   const {
     rootId,
@@ -321,7 +322,7 @@ export function TreeBranchControl({
   children,
   onClick,
   ...rest
-}: TreeBranchControlProps) {
+}: TreeBranchControlProps): ReactElement {
   const { value, disabled, controlId } = useTreeItemContext();
   const { toggleExpanded, select } = useTreeContext();
 
@@ -363,7 +364,7 @@ export function TreeBranchContent({
   children,
   forceMount = false,
   ...rest
-}: TreeBranchContentProps) {
+}: TreeBranchContentProps): ReactElement {
   const { depth } = useTreeLevelContext();
   const { value: branchValue, expanded } = useTreeItemContext();
 
@@ -413,7 +414,7 @@ export function TreeBranchIndicator({
   children,
   asChild = false,
   ...rest
-}: TreeBranchIndicatorProps) {
+}: TreeBranchIndicatorProps): ReactElement {
   const { expanded } = useTreeItemContext();
 
   const indicatorProps = {
@@ -483,7 +484,7 @@ export function TreeSelectionPath({
   children,
   separator,
   ...rest
-}: TreeSelectionPathProps) {
+}: TreeSelectionPathProps): ReactElement {
   const paths = useTreeSelectionPaths();
   const empty = paths.length === 0;
 

package/src/Tree/TreeContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 import type {
   TreeContextValue,

package/src/Tree/__tests__/Tree.selection-path.test.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Tree, useTreePath, useTreeSelectionPaths } from "../../Tree";
-import type { TreePathSegment } from "../../Tree";
+import { Tree, useTreePath, useTreeSelectionPaths } from "../../Tree/index.ts";
+import type { TreePathSegment } from "../../Tree/index.ts";
 
 function PathProbe({ value }: { value: string }) {
   const path = useTreePath(value);

package/src/Tree/hooks/useTreeItemKeyboard.ts

@@ -1,6 +1,6 @@
 import type { KeyboardEvent } from "react";
 
-import { useRovingTabindex } from "../../hooks";
+import { useRovingTabindex } from "../../hooks/index.ts";
 import { useTreeContext } from "../TreeContext";
 
 type TreeItemKeyboardOptions = {

package/src/Tree/hooks/useTreeRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useId, useRef, useState } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 
 import type {
   SelectionMode,

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties } from "react";
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+import { Slot } from "../Slot/index.ts";
 import { VisuallyHiddenProps } from "./types";
 
 const visuallyHiddenStyle: CSSProperties = {
@@ -51,7 +52,7 @@ export function VisuallyHidden({
   children,
   style,
   ...rest
-}: VisuallyHiddenProps) {
+}: VisuallyHiddenProps): ReactElement {
   const rootProps = {
     ...rest,
     style: { ...visuallyHiddenStyle, ...style },

package/src/VisuallyHidden/__tests__/VisuallyHidden.test.tsx

@@ -1,4 +1,4 @@
-import { VisuallyHidden } from "..";
+import { VisuallyHidden } from "../index.ts";
 import { render, screen } from "@testing-library/react";
 
 describe("VisuallyHidden component", () => {