@primitiv-ui/react 0.1.0 → 0.1.1

package/src/Dropdown/DropdownSubContext.ts

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

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

package/src/Dropdown/hooks/useDropdownContent.ts

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useMemo, KeyboardEventHandler } from "react";
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { MENUITEM_SELECTOR, TYPEAHEAD_RESET_MS } from "../constants";
 import { useDropdownContext } from "./useDropdownContext";
 import { DropdownContentProps } from "../types";

package/src/Dropdown/hooks/useDropdownItem.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler, useState } from "react";
-import { composeEventHandlers, SlotProps } from "../../Slot";
+import { composeEventHandlers, SlotProps } from "../../Slot/index.ts";
 import { useCloseSiblingSub } from "./useCloseSiblingSub";
 import { useDropdownContext } from "./useDropdownContext";
 import { DropdownItemProps } from "../types";

package/src/Dropdown/hooks/useDropdownRoot.ts

@@ -6,8 +6,8 @@ import {
   useRef,
 } from "react";
 
-import { Direction } from "../../DirectionProvider";
-import { useControllableState } from "../../hooks";
+import { Direction } from "../../DirectionProvider/index.ts";
+import { useControllableState } from "../../hooks/index.ts";
 
 type UseDropdownRootArgs = {
   defaultOpen?: boolean;

package/src/Dropdown/hooks/useDropdownTrigger.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from "react";
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { DropdownTriggerProps } from "../types";
 import { useDropdownContext } from "./useDropdownContext";
 

package/src/Dropdown/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 DropdownRootBaseProps = {
   children?: ReactNode;

package/src/EmptyState/EmptyState.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 import {
   EmptyStateActionsProps,
   EmptyStateDescriptionProps,
@@ -38,7 +40,7 @@ function EmptyStateRoot({
   asChild = false,
   children,
   ...rest
-}: EmptyStateRootProps) {
+}: EmptyStateRootProps): ReactElement {
   const rootProps = { role: "status", ...rest };
 
   if (asChild) {
@@ -76,7 +78,7 @@ function EmptyStateMedia({
   asChild = false,
   children,
   ...rest
-}: EmptyStateMediaProps) {
+}: EmptyStateMediaProps): ReactElement {
   const mediaProps = { "aria-hidden": true, ...rest };
 
   if (asChild) {
@@ -111,7 +113,7 @@ function EmptyStateTitle({
   asChild = false,
   children,
   ...rest
-}: EmptyStateTitleProps) {
+}: EmptyStateTitleProps): ReactElement {
   if (asChild) {
     return <Slot {...rest}>{children}</Slot>;
   }
@@ -141,7 +143,7 @@ function EmptyStateDescription({
   asChild = false,
   children,
   ...rest
-}: EmptyStateDescriptionProps) {
+}: EmptyStateDescriptionProps): ReactElement {
   if (asChild) {
     return <Slot {...rest}>{children}</Slot>;
   }
@@ -175,7 +177,7 @@ function EmptyStateActions({
   asChild = false,
   children,
   ...rest
-}: EmptyStateActionsProps) {
+}: EmptyStateActionsProps): ReactElement {
   if (asChild) {
     return <Slot {...rest}>{children}</Slot>;
   }

package/src/EmptyState/__tests__/EmptyState.Actions.test.tsx

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

package/src/EmptyState/__tests__/EmptyState.Description.test.tsx

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

package/src/EmptyState/__tests__/EmptyState.Media.test.tsx

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

package/src/EmptyState/__tests__/EmptyState.Root.test.tsx

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

package/src/EmptyState/__tests__/EmptyState.Title.test.tsx

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

package/src/Field/Field.tsx

@@ -1,8 +1,9 @@
 import { useId, useMemo } from "react";
+import type { ReactElement } from "react";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 import { FieldContext } from "./FieldContext";
-import { useFieldContext } from "./hooks";
+import { useFieldContext } from "./hooks/index.ts";
 import {
   FieldDescriptionProps,
   FieldErrorTextProps,
@@ -53,7 +54,7 @@ function FieldRoot({
   asChild = false,
   children,
   ...rest
-}: FieldRootProps) {
+}: FieldRootProps): ReactElement {
   const autoId = useId();
   const id = idProp ?? autoId;
   const descriptionId = `${id}-description`;
@@ -94,7 +95,11 @@ FieldRoot.displayName = "FieldRoot";
  *
  * @throws If rendered outside a `<Field.Root>`.
  */
-function FieldLabel({ asChild = false, children, ...rest }: FieldLabelProps) {
+function FieldLabel({
+  asChild = false,
+  children,
+  ...rest
+}: FieldLabelProps): ReactElement {
   const { id } = useFieldContext();
   const labelProps = { ...rest, htmlFor: id };
 
@@ -121,7 +126,7 @@ function FieldDescription({
   asChild = false,
   children,
   ...rest
-}: FieldDescriptionProps) {
+}: FieldDescriptionProps): ReactElement {
   const { descriptionId } = useFieldContext();
   const descriptionProps = { ...rest, id: descriptionId };
 
@@ -155,7 +160,7 @@ function FieldErrorText({
   asChild = false,
   children,
   ...rest
-}: FieldErrorTextProps) {
+}: FieldErrorTextProps): ReactElement | null {
   const { errorId, invalid } = useFieldContext();
   if (!invalid) return null;
   const errorProps = { ...rest, id: errorId, role: "alert" as const };

package/src/Field/FieldContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 export type FieldContextValue = {
   /** Stable id for the control wired to this field. */

package/src/Fieldset/Fieldset.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import { FieldsetLegendProps, FieldsetProps } from "./types";
 
 /**
@@ -27,7 +29,11 @@ import { FieldsetLegendProps, FieldsetProps } from "./types";
  * </Fieldset.Root>
  * ```
  */
-function Fieldset({ disabled, children, ...rest }: FieldsetProps) {
+function Fieldset({
+  disabled,
+  children,
+  ...rest
+}: FieldsetProps): ReactElement {
   return (
     <fieldset
       {...rest}
@@ -53,7 +59,10 @@ Fieldset.displayName = "Fieldset";
  * <Fieldset.Legend>Shipping address</Fieldset.Legend>
  * ```
  */
-function FieldsetLegend({ children, ...rest }: FieldsetLegendProps) {
+function FieldsetLegend({
+  children,
+  ...rest
+}: FieldsetLegendProps): ReactElement {
   return <legend {...rest}>{children}</legend>;
 }
 

package/src/Input/Input.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 { InputProps } from "./types";
 
 /**
@@ -101,7 +103,7 @@ export function Input({
   children,
   ref,
   ...consumer
-}: InputProps) {
+}: InputProps): ReactElement {
   const merged = useFieldProps(consumer);
 
   const rootProps = {

package/src/Input/__tests__/Input.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 { Input } from "../Input";
 
 describe("Input — Field integration", () => {

package/src/InputGroup/InputGroup.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 import { InputGroupAdornmentProps, InputGroupRootProps } from "./types";
 
 /**
@@ -39,7 +41,7 @@ function InputGroupRoot({
   children,
   ref,
   ...rest
-}: InputGroupRootProps) {
+}: InputGroupRootProps): ReactElement {
   const rootProps = {
     ...rest,
     ref,
@@ -94,7 +96,7 @@ function InputGroupLeadingAdornment({
   children,
   ref,
   ...rest
-}: InputGroupAdornmentProps) {
+}: InputGroupAdornmentProps): ReactElement {
   const adornmentProps = {
     ...rest,
     ref,
@@ -141,7 +143,7 @@ function InputGroupTrailingAdornment({
   children,
   ref,
   ...rest
-}: InputGroupAdornmentProps) {
+}: InputGroupAdornmentProps): ReactElement {
   const adornmentProps = {
     ...rest,
     ref,

package/src/MillerColumns/MillerColumns.tsx

@@ -1,7 +1,8 @@
 import { Ref } from "react";
+import type { ReactElement, ReactPortal } from "react";
 import { createPortal } from "react-dom";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 
 import {
   MillerColumnsContext,
@@ -15,7 +16,7 @@ import {
   useMillerColumnsItemContext,
   useMillerColumnsResizeHandle,
   useMillerColumnsRoot,
-} from "./hooks";
+} from "./hooks/index.ts";
 
 import { partitionItemChildren } from "./utils";
 
@@ -53,7 +54,7 @@ export function MillerColumnsRoot({
   value,
   onValueChange,
   ...rest
-}: MillerColumnsRootProps) {
+}: MillerColumnsRootProps): ReactElement {
   const { contextValue, columnCount, registerSlotRef, stripRef } =
     useMillerColumnsRoot(value, defaultValue, onValueChange);
 
@@ -99,7 +100,7 @@ export function MillerColumnsColumn({
   children,
   style,
   ...rest
-}: MillerColumnsColumnProps) {
+}: MillerColumnsColumnProps): ReactPortal | null {
   const { slot, depth, width, columnContextValue } = useMillerColumnsColumn();
 
   if (!slot) {
@@ -166,7 +167,7 @@ export function MillerColumnsItem<T extends HTMLElement = HTMLDivElement>({
   ref,
   asChild = false,
   ...props
-}: MillerColumnsItemProps<T>) {
+}: MillerColumnsItemProps<T>): ReactElement {
   const { cell, column } = partitionItemChildren(children);
   const { itemProps, selected, itemContextValue } = useMillerColumnsItem(
     { ref: ref as Ref<HTMLDivElement>, ...props },
@@ -212,7 +213,7 @@ MillerColumnsItem.displayName = "MillerColumnsItem";
 export function MillerColumnsItemIndicator({
   children,
   ...rest
-}: MillerColumnsItemIndicatorProps) {
+}: MillerColumnsItemIndicatorProps): ReactElement | null {
   const { selected, hasChildren } = useMillerColumnsItemContext();
 
   if (!hasChildren) {
@@ -252,7 +253,7 @@ MillerColumnsItemIndicator.displayName = "MillerColumnsItemIndicator";
  */
 export function MillerColumnsResizeHandle(
   props: MillerColumnsResizeHandleProps,
-) {
+): ReactElement {
   const { handleProps } = useMillerColumnsResizeHandle(props);
 
   return <div {...handleProps} />;
@@ -291,7 +292,7 @@ MillerColumnsResizeHandle.displayName = "MillerColumnsResizeHandle";
 export function MillerColumnsPreviewPanel({
   children,
   ...rest
-}: MillerColumnsPreviewPanelProps) {
+}: MillerColumnsPreviewPanelProps): ReactElement {
   useMillerColumnsContext();
 
   return (

package/src/MillerColumns/MillerColumnsContext.ts

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

package/src/MillerColumns/hooks/useMillerColumnsItem.ts

@@ -7,8 +7,8 @@ import {
   useRef,
 } from "react";
 
-import { useRovingTabindex } from "../../hooks";
-import { composeRefs } from "../../Slot";
+import { useRovingTabindex } from "../../hooks/index.ts";
+import { composeRefs } from "../../Slot/index.ts";
 
 import type {
   MillerColumnsItemContextValue,

package/src/MillerColumns/useMillerColumnsSelection.ts

@@ -1,4 +1,4 @@
-import { useMillerColumnsContext } from "./hooks";
+import { useMillerColumnsContext } from "./hooks/index.ts";
 
 import type { MillerColumnsSelection } from "./types";
 

package/src/Modal/Modal.tsx

@@ -1,7 +1,8 @@
 import { Ref, useEffect, useId } from "react";
+import type { ReactElement } from "react";
 
-import { Portal } from "../Portal";
-import { Slot, composeEventHandlers, composeRefs } from "../Slot";
+import { Portal } from "../Portal/index.ts";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
 
 import { ModalProvider } from "./ModalContext";
 import {
@@ -9,7 +10,7 @@ import {
   useModalContext,
   useModalRoot,
   useModalTrigger,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   ModalCloseProps,
   ModalContentProps,
@@ -73,7 +74,7 @@ function ModalRoot({
   defaultOpen,
   open,
   onOpenChange,
-}: ModalRootProps) {
+}: ModalRootProps): ReactElement {
   const { contextValue } = useModalRoot(
     { defaultOpen, open, onOpenChange },
     ref,
@@ -110,7 +111,7 @@ function ModalTrigger({
   type,
   asChild = false,
   ...rest
-}: ModalTriggerProps) {
+}: ModalTriggerProps): ReactElement {
   const { getTriggerProps } = useModalTrigger(onClick, rest);
 
   if (asChild) {
@@ -141,7 +142,11 @@ ModalTrigger.displayName = "ModalTrigger";
  * </Modal.Portal>
  * ```
  */
-function ModalPortal({ children, container, forceMount }: ModalPortalProps) {
+function ModalPortal({
+  children,
+  container,
+  forceMount,
+}: ModalPortalProps): ReactElement | null {
   const { open } = useModalContext();
 
   if (!open && !forceMount) return null;
@@ -189,7 +194,7 @@ function ModalOverlay({
   asChild = false,
   forceMount,
   ...rest
-}: ModalOverlayProps) {
+}: ModalOverlayProps): ReactElement | null {
   const { open } = useModalContext();
   if (!open && !forceMount) return null;
   const overlayProps = {
@@ -252,7 +257,7 @@ function ModalContent({
   onPointerDownOutside,
   ref: externalRef,
   ...rest
-}: ModalContentProps & { ref?: Ref<HTMLDialogElement> }) {
+}: ModalContentProps & { ref?: Ref<HTMLDialogElement> }): ReactElement {
   const { ref: innerRef, open, contentId } = useModalContent();
   const { contentCallbacksRef, titleId, descriptionId } = useModalContext();
   // Keep the ref pointed at the latest callbacks so event handlers wired
@@ -297,7 +302,11 @@ ModalContent.displayName = "ModalContent";
  * </Modal.Title>
  * ```
  */
-function ModalTitle({ children, asChild = false, ...rest }: ModalTitleProps) {
+function ModalTitle({
+  children,
+  asChild = false,
+  ...rest
+}: ModalTitleProps): ReactElement {
   const { registerTitle } = useModalContext();
   const id = useId();
 
@@ -342,7 +351,7 @@ function ModalDescription({
   children,
   asChild = false,
   ...rest
-}: ModalDescriptionProps) {
+}: ModalDescriptionProps): ReactElement {
   const { registerDescription } = useModalContext();
   const id = useId();
 
@@ -386,7 +395,11 @@ ModalDescription.displayName = "ModalDescription";
  * </Modal.Close>
  * ```
  */
-function ModalClose({ onClick, asChild = false, ...rest }: ModalCloseProps) {
+function ModalClose({
+  onClick,
+  asChild = false,
+  ...rest
+}: ModalCloseProps): ReactElement {
   const { setOpen } = useModalContext();
   const closeProps = {
     ...rest,

package/src/Modal/ModalContext.ts

@@ -1,12 +1,16 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { ModalContextValue } from "./types";
 
-export const [ModalContext, useModalContext] =
-  createStrictContext<ModalContextValue>(
-    "Component must be rendered as a child of Modal.Root",
-    "ModalContext",
-  );
+const modalContextPair = createStrictContext<ModalContextValue>(
+  "Component must be rendered as a child of Modal.Root",
+  "ModalContext",
+);
+
+export const ModalContext: Context<ModalContextValue | null> =
+  modalContextPair[0];
+export const useModalContext: () => ModalContextValue = modalContextPair[1];
 
 const ModalProvider = ModalContext.Provider;
 

package/src/Modal/hooks/useModalRoot.ts

@@ -8,7 +8,7 @@ import {
   useState,
 } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 
 import {
   ModalContentCallbacks,

package/src/Modal/hooks/useModalTrigger.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from "react";
-import { useModalContext } from ".";
-import { composeEventHandlers } from "../../Slot";
+import { useModalContext } from "./index.ts";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import type { ModalTriggerProps } from "../types";
 
 export function useModalTrigger(

package/src/Portal/Portal.tsx

@@ -1,3 +1,4 @@
+import type { ReactPortal } from "react";
 import { createPortal } from "react-dom";
 
 import type { PortalProps } from "./types";
@@ -19,7 +20,7 @@ import type { PortalProps } from "./types";
  *   <div role="dialog">…</div>
  * </Portal>
  */
-function Portal({ children, container }: PortalProps) {
+function Portal({ children, container }: PortalProps): ReactPortal {
   return createPortal(children, container ?? document.body);
 }
 

package/src/Progress/Progress.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from "react";
+import type { ReactElement } from "react";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 
 import { ProgressContext } from "./ProgressContext";
-import { useProgressContext, useProgressRoot } from "./hooks";
+import { useProgressContext, useProgressRoot } from "./hooks/index.ts";
 import { ProgressIndicatorProps, ProgressRootProps } from "./types";
 
 function defaultGetValueLabel(value: number, max: number): string {
@@ -53,7 +54,7 @@ function ProgressRoot({
   asChild = false,
   children,
   ...rest
-}: ProgressRootProps) {
+}: ProgressRootProps): ReactElement {
   const resolved = useProgressRoot({ value, max });
   const { state } = resolved;
 
@@ -120,7 +121,7 @@ function ProgressIndicator({
   asChild = false,
   children,
   ...rest
-}: ProgressIndicatorProps) {
+}: ProgressIndicatorProps): ReactElement {
   const { value, max, state } = useProgressContext();
   const indicatorProps = {
     ...rest,

package/src/Progress/ProgressContext.ts

@@ -1,4 +1,5 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { ProgressState } from "./types";
 
@@ -8,8 +9,12 @@ export type ProgressContextValue = {
   state: ProgressState;
 };
 
-export const [ProgressContext, useProgressContext] =
-  createStrictContext<ProgressContextValue>(
-    "Progress.Indicator must be rendered inside a <Progress.Root>.",
-    "ProgressContext",
-  );
+const progressContextPair = createStrictContext<ProgressContextValue>(
+  "Progress.Indicator must be rendered inside a <Progress.Root>.",
+  "ProgressContext",
+);
+
+export const ProgressContext: Context<ProgressContextValue | null> =
+  progressContextPair[0];
+export const useProgressContext: () => ProgressContextValue =
+  progressContextPair[1];