@primitiv-ui/react 0.1.0 → 0.1.1

package/src/Carousel/__tests__/Carousel.slides-per-page.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel slidesPerPage", () => {
   it("should mark every slide on the active page as active when slidesPerPage > 1", () => {

package/src/Carousel/__tests__/Carousel.touch-interaction.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel autoplay touch-pause (WCAG 2.2.2)", () => {
   beforeEach(() => {

package/src/Carousel/__tests__/Carousel.transition-modes.test.tsx

@@ -1,7 +1,7 @@
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 function fireScrollSnapChange(
   viewport: HTMLElement,

package/src/Carousel/__tests__/Carousel.translations.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel translations", () => {
   it("should override the slide aria-label format via translations.slideLabel", () => {

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel uncontrolled page state", () => {
   it("should mark the slide at index 0 as active by default when no defaultPage is provided", () => {

package/src/Checkbox/Checkbox.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from "react";
+import type { ReactElement } from "react";
 
-import { Slot, composeEventHandlers } from "../Slot";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
 
 import { CheckboxContext } from "./CheckboxContext";
-import { useCheckboxContext, useCheckboxRoot } from "./hooks";
+import { useCheckboxContext, useCheckboxRoot } from "./hooks/index.ts";
 import {
   CheckboxIndicatorProps,
   CheckboxRootProps,
@@ -76,7 +77,7 @@ function dataStateOf(checked: CheckedState) {
  * </Checkbox.Root>
  * ```
  */
-function CheckboxRoot(props: CheckboxRootProps) {
+function CheckboxRoot(props: CheckboxRootProps): ReactElement {
   const {
     defaultChecked,
     checked,
@@ -169,7 +170,7 @@ function CheckboxIndicator({
   forceMount,
   asChild = false,
   ...rest
-}: CheckboxIndicatorProps) {
+}: CheckboxIndicatorProps): ReactElement | null {
   const { checked } = useCheckboxContext();
   const isVisible = checked !== false;
   if (!isVisible && !forceMount) return null;

package/src/Checkbox/CheckboxContext.ts

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

package/src/Checkbox/hooks/useCheckboxRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 
 import { CheckedState } from "../types";
 

package/src/CheckboxCard/CheckboxCard.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from "react";
+import type { ReactElement } from "react";
 
-import { Slot, composeEventHandlers } from "../Slot";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
 
 import { CheckboxCardContext } from "./CheckboxCardContext";
-import { useCheckboxCardContext, useCheckboxCardRoot } from "./hooks";
+import { useCheckboxCardContext, useCheckboxCardRoot } from "./hooks/index.ts";
 import {
   CheckboxCardIndicatorProps,
   CheckboxCardRootProps,
@@ -66,7 +67,7 @@ function dataStateOf(checked: CheckedState) {
  * </CheckboxCard.Root>
  * ```
  */
-function CheckboxCardRoot(props: CheckboxCardRootProps) {
+function CheckboxCardRoot(props: CheckboxCardRootProps): ReactElement {
   const {
     defaultChecked,
     checked,
@@ -141,7 +142,7 @@ function CheckboxCardIndicator({
   forceMount,
   asChild = false,
   ...rest
-}: CheckboxCardIndicatorProps) {
+}: CheckboxCardIndicatorProps): ReactElement | null {
   const { checked } = useCheckboxCardContext();
   const isVisible = checked !== false;
   if (!isVisible && !forceMount) return null;

package/src/CheckboxCard/CheckboxCardContext.ts

@@ -1,4 +1,5 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { CheckedState } from "./types";
 
@@ -6,7 +7,11 @@ export type CheckboxCardContextValue = {
   checked: CheckedState;
 };
 
-export const [CheckboxCardContext, useCheckboxCardContext] =
-  createStrictContext<CheckboxCardContextValue>(
-    "CheckboxCard sub-components must be rendered inside a <CheckboxCard.Root>.",
-  );
+const checkboxCardContextPair = createStrictContext<CheckboxCardContextValue>(
+  "CheckboxCard sub-components must be rendered inside a <CheckboxCard.Root>.",
+);
+
+export const CheckboxCardContext: Context<CheckboxCardContextValue | null> =
+  checkboxCardContextPair[0];
+export const useCheckboxCardContext: () => CheckboxCardContextValue =
+  checkboxCardContextPair[1];

package/src/CheckboxCard/hooks/useCheckboxCardRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 
 import { CheckedState } from "../types";
 

package/src/Collapsible/Collapsible.tsx

@@ -1,9 +1,13 @@
 import { Ref } from "react";
+import type { ReactElement } from "react";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 
-import { CollapsibleContext, useCollapsibleContext } from "./CollapsibleContext";
-import { useCollapsibleRoot, useCollapsibleTrigger } from "./hooks";
+import {
+  CollapsibleContext,
+  useCollapsibleContext,
+} from "./CollapsibleContext";
+import { useCollapsibleRoot, useCollapsibleTrigger } from "./hooks/index.ts";
 
 import type {
   CollapsibleRootProps,
@@ -63,7 +67,7 @@ export function CollapsibleRoot({
   onOpenChange,
   disabled = false,
   ...rest
-}: CollapsibleRootProps) {
+}: CollapsibleRootProps): ReactElement {
   const { contextValue } = useCollapsibleRoot(
     controlledOpen,
     defaultOpen,
@@ -140,16 +144,14 @@ CollapsibleRoot.displayName = "CollapsibleRoot";
  * </Collapsible.Trigger>
  * ```
  */
-export function CollapsibleTrigger<
-  T extends HTMLElement = HTMLButtonElement,
->({
+export function CollapsibleTrigger<T extends HTMLElement = HTMLButtonElement>({
   ref,
   children,
   onClick,
   onKeyDown,
   asChild = false,
   ...rest
-}: CollapsibleTriggerProps<T>) {
+}: CollapsibleTriggerProps<T>): ReactElement {
   const { triggerProps } = useCollapsibleTrigger({
     ref: ref as Ref<HTMLButtonElement>,
     onClick,
@@ -222,7 +224,7 @@ export function CollapsibleContent({
   children,
   forceMount = false,
   ...rest
-}: CollapsibleContentProps) {
+}: CollapsibleContentProps): ReactElement {
   const { open, disabled, contentId } = useCollapsibleContext();
 
   return (
@@ -281,15 +283,11 @@ CollapsibleContent.displayName = "CollapsibleContent";
 export function CollapsibleTriggerIcon({
   children,
   ...rest
-}: CollapsibleTriggerIconProps) {
+}: CollapsibleTriggerIconProps): ReactElement {
   const { open } = useCollapsibleContext();
 
   return (
-    <span
-      aria-hidden="true"
-      data-state={open ? "open" : "closed"}
-      {...rest}
-    >
+    <span aria-hidden="true" data-state={open ? "open" : "closed"} {...rest}>
       {children}
     </span>
   );
@@ -304,12 +302,15 @@ type CollapsibleCompound = typeof CollapsibleRoot & {
   TriggerIcon: typeof CollapsibleTriggerIcon;
 };
 
-const CollapsibleCompound: CollapsibleCompound = Object.assign(CollapsibleRoot, {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent,
-  TriggerIcon: CollapsibleTriggerIcon,
-});
+const CollapsibleCompound: CollapsibleCompound = Object.assign(
+  CollapsibleRoot,
+  {
+    Root: CollapsibleRoot,
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+    TriggerIcon: CollapsibleTriggerIcon,
+  },
+);
 
 CollapsibleCompound.displayName = "Collapsible";
 

package/src/Collapsible/CollapsibleContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 import { CollapsibleContextValue } from "./types";
 
 export const [CollapsibleContext, useCollapsibleContext] =

package/src/Collapsible/hooks/useCollapsibleRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useId, useMemo } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 
 export function useCollapsibleRoot(
   controlledOpen: boolean | undefined,

package/src/Collapsible/hooks/useCollapsibleTrigger.ts

@@ -1,6 +1,6 @@
 import { useRef, MouseEvent, KeyboardEvent } from "react";
 
-import { composeRefs } from "../../Slot";
+import { composeRefs } from "../../Slot/index.ts";
 
 import { CollapsibleTriggerProps } from "../types";
 import { useCollapsibleContext } from "../CollapsibleContext";

package/src/ContextMenu/ContextMenu.tsx

@@ -7,12 +7,13 @@ import {
   useRef,
   useState,
 } from "react";
+import type { ReactElement } from "react";
 
-import { useCheckboxRoot } from "../Checkbox/hooks";
-import { useDirection } from "../DirectionProvider";
-import { useRadioGroupRoot } from "../RadioGroup/hooks";
-import { useControllableState } from "../hooks";
-import { Slot, composeEventHandlers } from "../Slot";
+import { useCheckboxRoot } from "../Checkbox/hooks/index.ts";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRadioGroupRoot } from "../RadioGroup/hooks/index.ts";
+import { useControllableState } from "../hooks/index.ts";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
 
 import {
   ContextMenuContext,
@@ -73,7 +74,7 @@ function ContextMenuRoot({
   onOpenChange,
   dir,
   children,
-}: ContextMenuRootProps) {
+}: ContextMenuRootProps): ReactElement {
   const contentId = useId();
   const triggerRef = useRef<HTMLElement | null>(null);
   const [position, setPosition] = useState<ContextMenuPosition | null>(null);
@@ -146,7 +147,7 @@ function ContextMenuTrigger({
   asChild = false,
   disabled,
   ...rest
-}: ContextMenuTriggerProps) {
+}: ContextMenuTriggerProps): ReactElement {
   const { setOpen, setPosition, triggerRef } = useContextMenuContext();
 
   const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
@@ -201,7 +202,7 @@ function ContextMenuContent({
   onKeyDown,
   asChild = false,
   ...rest
-}: ContextMenuContentProps) {
+}: ContextMenuContentProps): ReactElement {
   const { open, setOpen, position, contentId, triggerRef } =
     useContextMenuContext();
   const menuRef = useRef<HTMLMenuElement | null>(null);
@@ -393,7 +394,7 @@ function ContextMenuItem({
   disabled,
   asChild = false,
   ...rest
-}: ContextMenuItemProps) {
+}: ContextMenuItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -441,7 +442,7 @@ function ContextMenuSeparator({
   asChild = false,
   children,
   ...rest
-}: ContextMenuSeparatorProps) {
+}: ContextMenuSeparatorProps): ReactElement {
   const separatorProps = { ...rest, role: "separator" as const };
 
   if (asChild) {
@@ -465,7 +466,7 @@ function ContextMenuGroup({
   children,
   asChild = false,
   ...rest
-}: ContextMenuGroupProps) {
+}: ContextMenuGroupProps): ReactElement {
   const labelId = useId();
   const contextValue = useMemo(() => ({ labelId }), [labelId]);
   const groupProps = {
@@ -501,7 +502,7 @@ function ContextMenuLabel({
   children,
   asChild = false,
   ...rest
-}: ContextMenuLabelProps) {
+}: ContextMenuLabelProps): ReactElement {
   const group = useContext(ContextMenuGroupContext);
   const labelProps = { ...rest, id: id ?? group?.labelId };
 
@@ -536,7 +537,7 @@ function ContextMenuCheckboxItem({
   onCheckedChange,
   asChild = false,
   ...rest
-}: ContextMenuCheckboxItemProps) {
+}: ContextMenuCheckboxItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -609,7 +610,7 @@ function ContextMenuItemIndicator({
   asChild = false,
   forceMount = false,
   ...rest
-}: ContextMenuItemIndicatorProps) {
+}: ContextMenuItemIndicatorProps): ReactElement | null {
   const context = useContext(ContextMenuItemIndicatorContext);
   if (!context) {
     throw new Error(
@@ -650,7 +651,7 @@ function ContextMenuRadioGroup({
   children,
   asChild = false,
   ...rest
-}: ContextMenuRadioGroupProps) {
+}: ContextMenuRadioGroupProps): ReactElement {
   const { value, select } = useRadioGroupRoot({
     defaultValue,
     value: controlledValue,
@@ -694,7 +695,7 @@ function ContextMenuRadioItem({
   value: itemValue,
   asChild = false,
   ...rest
-}: ContextMenuRadioItemProps) {
+}: ContextMenuRadioItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -761,7 +762,7 @@ function ContextMenuSub({
   open: controlledOpen,
   onOpenChange,
   children,
-}: ContextMenuSubProps) {
+}: ContextMenuSubProps): ReactElement {
   const contentId = useId();
   const triggerRef = useRef<HTMLLIElement | null>(null);
   const [open, setOpenBase] = useControllableState<boolean>(
@@ -834,7 +835,7 @@ function ContextMenuSubTrigger({
   disabled,
   asChild = false,
   ...rest
-}: ContextMenuSubTriggerProps) {
+}: ContextMenuSubTriggerProps): ReactElement {
   const sub = useContextMenuSubContext();
   const { dir } = useContextMenuContext();
   const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
@@ -894,7 +895,7 @@ function ContextMenuSubContent({
   onKeyDown,
   asChild = false,
   ...rest
-}: ContextMenuSubContentProps) {
+}: ContextMenuSubContentProps): ReactElement {
   const sub = useContextMenuSubContext();
   const { dir } = useContextMenuContext();
   const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";

package/src/ContextMenu/ContextMenuContext.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 
-import { Direction } from "../DirectionProvider";
-import { createStrictContext } from "../utils";
+import { Direction } from "../DirectionProvider/index.ts";
+import { createStrictContext } from "../utils/index.ts";
 
 export type ContextMenuPosition = { x: number; y: number };
 

package/src/ContextMenu/ContextMenuSubContext.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 export type ContextMenuSubContextValue = {
   open: boolean;

package/src/ContextMenu/__tests__/ContextMenu.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 { ContextMenu } from "../ContextMenu";
 
 describe("ContextMenu reading direction", () => {

package/src/ContextMenu/types.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
 import { CheckedState } from "../Checkbox/types";
-import { Direction } from "../DirectionProvider";
+import { Direction } from "../DirectionProvider/index.ts";
 
 type ContextMenuRootBaseProps = {
   children?: ReactNode;

package/src/DirectionProvider/DirectionProvider.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import { DirectionContext } from "./DirectionContext";
 import { DirectionProviderProps } from "./types";
 
@@ -20,7 +22,10 @@ import { DirectionProviderProps } from "./types";
  * </DirectionProvider>
  * ```
  */
-export function DirectionProvider({ dir, children }: DirectionProviderProps) {
+export function DirectionProvider({
+  dir,
+  children,
+}: DirectionProviderProps): ReactElement {
   return (
     <DirectionContext.Provider value={dir}>
       {children}

package/src/DirectionProvider/__tests__/DirectionProvider.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { DirectionProvider, useDirection } from "..";
+import { DirectionProvider, useDirection } from "../index.ts";
 
 function DirectionProbe() {
   return <span data-testid="probe">{useDirection()}</span>;

package/src/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import { DividerProps } from "./types";
 
 /**
@@ -43,7 +45,7 @@ export function Divider({
   orientation = "horizontal",
   className = "",
   ...rest
-}: DividerProps) {
+}: DividerProps): ReactElement {
   return (
     <span
       role="separator"

package/src/Divider/__tests__/Divider.test.tsx

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

package/src/Dropdown/Dropdown.tsx

@@ -1,9 +1,10 @@
 import { useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import type { ReactElement } from "react";
 
-import { useCheckboxRoot } from "../Checkbox/hooks";
-import { useDirection } from "../DirectionProvider";
-import { useRadioGroupRoot } from "../RadioGroup/hooks";
-import { composeEventHandlers, Slot } from "../Slot";
+import { useCheckboxRoot } from "../Checkbox/hooks/index.ts";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRadioGroupRoot } from "../RadioGroup/hooks/index.ts";
+import { composeEventHandlers, Slot } from "../Slot/index.ts";
 
 import { DropdownContext } from "./DropdownContext";
 import { DropdownContentContext } from "./DropdownContentContext";
@@ -21,7 +22,7 @@ import {
   useDropdownRoot,
   useDropdownSubContext,
   useDropdownTrigger,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   DropdownCheckboxItemProps,
   DropdownContentProps,
@@ -90,7 +91,7 @@ function DropdownRoot({
   onOpenChange,
   dir,
   children,
-}: DropdownRootProps) {
+}: DropdownRootProps): ReactElement {
   const inheritedDir = useDirection();
   const { contextValue } = useDropdownRoot({
     defaultOpen,
@@ -131,7 +132,7 @@ function DropdownTrigger({
   onClick,
   asChild = false,
   ...rest
-}: DropdownTriggerProps) {
+}: DropdownTriggerProps): ReactElement {
   const { triggerProps } = useDropdownTrigger({ onClick, restProps: rest });
 
   if (asChild) {
@@ -183,7 +184,7 @@ function DropdownContent({
   onKeyDown,
   asChild = false,
   ...rest
-}: DropdownContentProps) {
+}: DropdownContentProps): ReactElement {
   const { contentContextValue, contentProps } = useDropdownContent({
     onKeyDown,
     restProps: rest,
@@ -222,7 +223,7 @@ function DropdownItem({
   disabled,
   asChild = false,
   ...rest
-}: DropdownItemProps) {
+}: DropdownItemProps): ReactElement {
   const { itemProps } = useDropdownItem({
     disabled,
     onClick,
@@ -248,7 +249,7 @@ function DropdownSeparator({
   asChild = false,
   children,
   ...rest
-}: DropdownSeparatorProps) {
+}: DropdownSeparatorProps): ReactElement {
   const separatorProps = { ...rest, role: "separator" as const };
 
   if (asChild) {
@@ -274,7 +275,7 @@ function DropdownGroup({
   children,
   asChild = false,
   ...rest
-}: DropdownGroupProps) {
+}: DropdownGroupProps): ReactElement {
   const { contextValue, groupProps } = useDropdownGroup({ restProps: rest });
 
   return (
@@ -306,7 +307,7 @@ function DropdownLabel({
   children,
   asChild = false,
   ...rest
-}: DropdownLabelProps) {
+}: DropdownLabelProps): ReactElement {
   const { labelProps } = useDropdownLabel({ id, restProps: rest });
 
   if (asChild) {
@@ -353,7 +354,7 @@ function DropdownCheckboxItem({
   onCheckedChange,
   asChild = false,
   ...rest
-}: DropdownCheckboxItemProps) {
+}: DropdownCheckboxItemProps): ReactElement {
   const { setOpen, triggerRef } = useDropdownContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -424,7 +425,7 @@ function DropdownRadioGroup({
   children,
   asChild = false,
   ...rest
-}: DropdownRadioGroupProps) {
+}: DropdownRadioGroupProps): ReactElement {
   const { value, select } = useRadioGroupRoot({
     defaultValue,
     value: controlledValue,
@@ -475,7 +476,7 @@ function DropdownRadioItem({
   value: itemValue,
   asChild = false,
   ...rest
-}: DropdownRadioItemProps) {
+}: DropdownRadioItemProps): ReactElement {
   const { setOpen, triggerRef } = useDropdownContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -559,7 +560,7 @@ function DropdownItemIndicator({
   asChild = false,
   forceMount = false,
   ...rest
-}: DropdownItemIndicatorProps) {
+}: DropdownItemIndicatorProps): ReactElement | null {
   const context = useContext(DropdownItemIndicatorContext);
   if (!context) {
     throw new Error(
@@ -613,7 +614,7 @@ function DropdownSub({
   open: controlledOpen,
   onOpenChange,
   children,
-}: DropdownSubProps) {
+}: DropdownSubProps): ReactElement {
   const { open, setOpen } = useDropdownRoot({
     defaultOpen,
     open: controlledOpen,
@@ -678,7 +679,7 @@ function DropdownSubTrigger({
   disabled,
   asChild = false,
   ...rest
-}: DropdownSubTriggerProps) {
+}: DropdownSubTriggerProps): ReactElement {
   const sub = useDropdownSubContext();
   const { dir } = useDropdownContext();
   const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
@@ -741,7 +742,7 @@ function DropdownSubContent({
   onKeyDown,
   asChild = false,
   ...rest
-}: DropdownSubContentProps) {
+}: DropdownSubContentProps): ReactElement {
   const sub = useDropdownSubContext();
   const { dir } = useDropdownContext();
   const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";

package/src/Dropdown/DropdownContext.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 
-import { Direction } from "../DirectionProvider";
-import { createStrictContext } from "../utils";
+import { Direction } from "../DirectionProvider/index.ts";
+import { createStrictContext } from "../utils/index.ts";
 
 export type DropdownContextValue = {
   open: boolean;