@primitiv-ui/react 0.1.0 → 0.1.1

package/src/RadioCard/RadioCard.tsx

@@ -1,8 +1,9 @@
 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 { RadioCardContext } from "./RadioCardContext";
 import { RadioCardItemContext } from "./RadioCardItemContext";
@@ -10,7 +11,7 @@ import {
   useRadioCardContext,
   useRadioCardItemContext,
   useRadioCardRoot,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   RadioCardIndicatorProps,
   RadioCardItemProps,
@@ -81,7 +82,7 @@ function RadioCardRoot({
   asChild = false,
   children,
   ...rest
-}: RadioCardRootProps) {
+}: RadioCardRootProps): ReactElement {
   const resolvedDir = dir ?? useDirection();
   const { value, select, registerItem, itemValues, disabledValues, focusItem } =
     useRadioCardRoot({
@@ -166,7 +167,7 @@ function RadioCardItem({
   asChild = false,
   ref,
   ...rest
-}: RadioCardItemProps) {
+}: RadioCardItemProps): ReactElement {
   const {
     value: selectedValue,
     select,
@@ -264,7 +265,7 @@ function RadioCardIndicator({
   forceMount,
   asChild = false,
   ...rest
-}: RadioCardIndicatorProps) {
+}: RadioCardIndicatorProps): ReactElement | null {
   const { checked } = useRadioCardItemContext();
   if (!checked && !forceMount) return null;
   const indicatorProps = {

package/src/RadioCard/RadioCardContext.ts

@@ -1,4 +1,5 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { RadioCardOrientation, RadioCardReadingDirection } from "./types";
 
@@ -17,7 +18,11 @@ export type RadioCardContextValue = {
   dir: RadioCardReadingDirection;
 };
 
-export const [RadioCardContext, useRadioCardContext] =
-  createStrictContext<RadioCardContextValue>(
-    "RadioCard sub-components must be rendered inside a <RadioCard.Root>.",
-  );
+const radioCardContextPair = createStrictContext<RadioCardContextValue>(
+  "RadioCard sub-components must be rendered inside a <RadioCard.Root>.",
+);
+
+export const RadioCardContext: Context<RadioCardContextValue | null> =
+  radioCardContextPair[0];
+export const useRadioCardContext: () => RadioCardContextValue =
+  radioCardContextPair[1];

package/src/RadioCard/RadioCardItemContext.ts

@@ -1,10 +1,15 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 export type RadioCardItemContextValue = {
   checked: boolean;
 };
 
-export const [RadioCardItemContext, useRadioCardItemContext] =
-  createStrictContext<RadioCardItemContextValue>(
-    "RadioCard.Indicator must be rendered inside a <RadioCard.Item>.",
-  );
+const radioCardItemContextPair = createStrictContext<RadioCardItemContextValue>(
+  "RadioCard.Indicator must be rendered inside a <RadioCard.Item>.",
+);
+
+export const RadioCardItemContext: Context<RadioCardItemContextValue | null> =
+  radioCardItemContextPair[0];
+export const useRadioCardItemContext: () => RadioCardItemContextValue =
+  radioCardItemContextPair[1];

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

package/src/RadioCard/hooks/useRadioCardRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 
 type UseRadioCardRootArgs = {
   defaultValue?: string;

package/src/RadioGroup/RadioGroup.tsx

@@ -1,8 +1,9 @@
 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 { RadioGroupContext } from "./RadioGroupContext";
 import { RadioGroupItemContext } from "./RadioGroupItemContext";
@@ -10,7 +11,7 @@ import {
   useRadioGroupContext,
   useRadioGroupItemContext,
   useRadioGroupRoot,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   RadioGroupIndicatorProps,
   RadioGroupItemProps,
@@ -82,7 +83,7 @@ function RadioGroupRoot({
   asChild = false,
   children,
   ...rest
-}: RadioGroupRootProps) {
+}: RadioGroupRootProps): ReactElement {
   const resolvedDir = dir ?? useDirection();
   const { value, select, registerItem, itemValues, disabledValues, focusItem } =
     useRadioGroupRoot({
@@ -172,7 +173,7 @@ function RadioGroupItem({
   asChild = false,
   ref,
   ...rest
-}: RadioGroupItemProps) {
+}: RadioGroupItemProps): ReactElement {
   const {
     value: selectedValue,
     select,
@@ -282,7 +283,7 @@ function RadioGroupIndicator({
   forceMount,
   asChild = false,
   ...rest
-}: RadioGroupIndicatorProps) {
+}: RadioGroupIndicatorProps): ReactElement | null {
   const { checked } = useRadioGroupItemContext();
   if (!checked && !forceMount) return null;
   const indicatorProps = {

package/src/RadioGroup/RadioGroupContext.ts

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

package/src/RadioGroup/RadioGroupItemContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 export type RadioGroupItemContextValue = {
   checked: boolean;

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

package/src/RadioGroup/hooks/useRadioGroupRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 
 type UseRadioGroupRootArgs = {
   defaultValue?: string;

package/src/Select/Select.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, Children, isValidElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 
-import { useFieldProps } from "../Field/hooks";
-import { Slot } from "../Slot";
+import { useFieldProps } from "../Field/hooks/index.ts";
+import { Slot } from "../Slot/index.ts";
 
 import {
   SelectGroupProps,
@@ -59,7 +60,7 @@ function SelectRoot({
   value,
   defaultValue,
   ...consumer
-}: SelectRootProps) {
+}: SelectRootProps): ReactElement {
   const merged = useFieldProps(consumer);
 
   const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
@@ -104,7 +105,7 @@ SelectRoot.displayName = "SelectRoot";
  * Native `<option>` only renders text; rich content (icons, descriptions)
  * is not supported.
  */
-function SelectOption({ children, ...rest }: SelectOptionProps) {
+function SelectOption({ children, ...rest }: SelectOptionProps): ReactElement {
   return <option {...rest}>{children}</option>;
 }
 
@@ -115,7 +116,7 @@ SelectOption.displayName = "SelectOption";
  * native `<optgroup>` element. The `label` is shown by the browser as a
  * non-selectable heading and is announced as the group's accessible name.
  */
-function SelectGroup({ children, ...rest }: SelectGroupProps) {
+function SelectGroup({ children, ...rest }: SelectGroupProps): ReactElement {
   return <optgroup {...rest}>{children}</optgroup>;
 }
 
@@ -131,7 +132,10 @@ SelectGroup.displayName = "SelectGroup";
  * Pair with `required` on {@link Select.Root} to make the browser's
  * native form validation catch an unchosen value at submission.
  */
-function SelectPlaceholder({ children, ...rest }: SelectPlaceholderProps) {
+function SelectPlaceholder({
+  children,
+  ...rest
+}: SelectPlaceholderProps): ReactElement {
   return (
     <option {...rest} value="" disabled hidden>
       {children}

package/src/Select/__tests__/Select.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 { Select } from "../Select";
 
 function renderSelect(children?: React.ReactNode) {

package/src/SkipNav/SkipNav.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import { SkipNavContentProps, SkipNavLinkProps } from "./types";
 
 const DEFAULT_CONTENT_ID = "primitiv-skip-nav";
@@ -34,7 +36,7 @@ function SkipNavLink({
   children,
   contentId = DEFAULT_CONTENT_ID,
   ...rest
-}: SkipNavLinkProps) {
+}: SkipNavLinkProps): ReactElement {
   return (
     <a href={`#${contentId}`} {...rest}>
       {children}
@@ -63,7 +65,10 @@ SkipNavLink.displayName = "SkipNavLink";
  * </SkipNav.Content>
  * ```
  */
-function SkipNavContent({ children, ...rest }: SkipNavContentProps) {
+function SkipNavContent({
+  children,
+  ...rest
+}: SkipNavContentProps): ReactElement {
   return (
     <div id={DEFAULT_CONTENT_ID} tabIndex={-1} {...rest}>
       {children}

package/src/SkipNav/__tests__/SkipNav.ids.test.tsx

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

package/src/Slider/Slider.tsx

@@ -1,8 +1,14 @@
-import { useDirection } from "../DirectionProvider";
-import { Slot, composeEventHandlers, composeRefs } from "../Slot";
+import type { ReactElement } from "react";
+
+import { useDirection } from "../DirectionProvider/index.ts";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
 
 import { SliderContext } from "./SliderContext";
-import { useSliderContext, useSliderRoot, useSliderThumb } from "./hooks";
+import {
+  useSliderContext,
+  useSliderRoot,
+  useSliderThumb,
+} from "./hooks/index.ts";
 import type {
   SliderRangeProps,
   SliderRootProps,
@@ -87,7 +93,7 @@ function SliderRoot({
   ref,
   children,
   ...rest
-}: SliderRootProps) {
+}: SliderRootProps): ReactElement {
   const resolvedDir = dir ?? useDirection();
   const {
     contextValue,
@@ -147,7 +153,11 @@ SliderRoot.displayName = "SliderRoot";
  *
  * @throws if rendered outside a `Slider.Root`.
  */
-function SliderTrack({ children, asChild = false, ...rest }: SliderTrackProps) {
+function SliderTrack({
+  children,
+  asChild = false,
+  ...rest
+}: SliderTrackProps): ReactElement {
   const { orientation, disabled } = useSliderContext();
   const trackProps = {
     ...rest,
@@ -178,7 +188,7 @@ function SliderRange({
   asChild = false,
   children,
   ...rest
-}: SliderRangeProps) {
+}: SliderRangeProps): ReactElement {
   const { values, min, max, orientation, dir, inverted, disabled } =
     useSliderContext();
   const rangeProps = {
@@ -227,7 +237,7 @@ function SliderThumb({
   asChild = false,
   children,
   ...rest
-}: SliderThumbProps) {
+}: SliderThumbProps): ReactElement {
   const {
     ref,
     value,

package/src/Slider/SliderContext.ts

@@ -1,4 +1,5 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import type { SliderDirection, SliderOrientation } from "./types";
 
@@ -17,8 +18,11 @@ export type SliderContextValue = {
   commit: (values: number[]) => void;
 };
 
-export const [SliderContext, useSliderContext] =
-  createStrictContext<SliderContextValue>(
-    "Slider sub-components must be rendered inside a <Slider.Root>.",
-    "SliderContext",
-  );
+const sliderContextPair = createStrictContext<SliderContextValue>(
+  "Slider sub-components must be rendered inside a <Slider.Root>.",
+  "SliderContext",
+);
+
+export const SliderContext: Context<SliderContextValue | null> =
+  sliderContextPair[0];
+export const useSliderContext: () => SliderContextValue = sliderContextPair[1];

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

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { DirectionProvider } from "../../DirectionProvider";
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
 import { Slider } from "../Slider";
 
 import { rtlKeyboardCases } from "./Slider.fixtures";

package/src/Slider/hooks/useSliderRoot.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import type { PointerEvent as ReactPointerEvent } from "react";
 
-import { useCollection, useControllableState } from "../../hooks";
+import { useCollection, useControllableState } from "../../hooks/index.ts";
 import type { SliderContextValue } from "../SliderContext";
 import type { SliderDirection, SliderOrientation } from "../types";
 import { clamp, getClosestThumbIndex, getPointerValue } from "../utils";

package/src/Status/Status.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 import { StatusProps } from "./types";
 
 /**
@@ -31,7 +33,11 @@ import { StatusProps } from "./types";
  * </Status>
  * ```
  */
-export function Status({ asChild = false, children, ...rest }: StatusProps) {
+export function Status({
+  asChild = false,
+  children,
+  ...rest
+}: StatusProps): ReactElement {
   const rootProps = { role: "status", ...rest };
 
   if (asChild) {

package/src/Status/__tests__/Status.test.tsx

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

package/src/Switch/Switch.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 { SwitchContext } from "./SwitchContext";
-import { useSwitchContext, useSwitchRoot } from "./hooks";
+import { useSwitchContext, useSwitchRoot } from "./hooks/index.ts";
 import { SwitchRootProps, SwitchThumbProps } from "./types";
 
 /**
@@ -58,7 +59,7 @@ function SwitchRoot({
   children,
   ref,
   ...rest
-}: SwitchRootProps) {
+}: SwitchRootProps): ReactElement {
   const { checked: isChecked, toggle } = useSwitchRoot({
     defaultChecked,
     checked,
@@ -111,7 +112,11 @@ SwitchRoot.displayName = "SwitchRoot";
  *
  * @throws if rendered outside a `Switch.Root`.
  */
-function SwitchThumb({ children, asChild = false, ...rest }: SwitchThumbProps) {
+function SwitchThumb({
+  children,
+  asChild = false,
+  ...rest
+}: SwitchThumbProps): ReactElement {
   const { checked } = useSwitchContext();
   const thumbProps = {
     ...rest,

package/src/Switch/SwitchContext.ts

@@ -1,10 +1,14 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 export type SwitchContextValue = {
   checked: boolean;
 };
 
-export const [SwitchContext, useSwitchContext] =
-  createStrictContext<SwitchContextValue>(
-    "Switch.Thumb must be rendered inside a <Switch.Root>.",
-  );
+const switchContextPair = createStrictContext<SwitchContextValue>(
+  "Switch.Thumb must be rendered inside a <Switch.Root>.",
+);
+
+export const SwitchContext: Context<SwitchContextValue | null> =
+  switchContextPair[0];
+export const useSwitchContext: () => SwitchContextValue = switchContextPair[1];

package/src/Switch/hooks/useSwitchRoot.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { useControllableState } from "../../hooks";
+import { useControllableState } from "../../hooks/index.ts";
 
 type UseSwitchRootArgs = {
   defaultChecked?: boolean;

package/src/Table/Table.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import {
   TableBodyProps,
   TableCaptionProps,
@@ -40,7 +42,7 @@ import {
  * </Table.Root>
  * ```
  */
-function Table({ children, ...rest }: TableRootProps) {
+function Table({ children, ...rest }: TableRootProps): ReactElement {
   return <table {...rest}>{children}</table>;
 }
 
@@ -63,7 +65,7 @@ Table.displayName = "Table";
  * </Table.Head>
  * ```
  */
-function TableHead({ children, ...rest }: TableHeadProps) {
+function TableHead({ children, ...rest }: TableHeadProps): ReactElement {
   return <thead {...rest}>{children}</thead>;
 }
 
@@ -87,7 +89,7 @@ TableHead.displayName = "TableHead";
  * </Table.Body>
  * ```
  */
-function TableBody({ children, ...rest }: TableBodyProps) {
+function TableBody({ children, ...rest }: TableBodyProps): ReactElement {
   return <tbody {...rest}>{children}</tbody>;
 }
 
@@ -110,7 +112,7 @@ TableBody.displayName = "TableBody";
  * </Table.Footer>
  * ```
  */
-function TableFooter({ children, ...rest }: TableFooterProps) {
+function TableFooter({ children, ...rest }: TableFooterProps): ReactElement {
   return <tfoot {...rest}>{children}</tfoot>;
 }
 
@@ -132,7 +134,7 @@ TableFooter.displayName = "TableFooter";
  * </Table.Row>
  * ```
  */
-function TableRow({ children, ...rest }: TableRowProps) {
+function TableRow({ children, ...rest }: TableRowProps): ReactElement {
   return <tr {...rest}>{children}</tr>;
 }
 
@@ -166,7 +168,7 @@ TableRow.displayName = "TableRow";
  * <Table.Header scope="row">Alice</Table.Header>
  * ```
  */
-function TableHeader({ children, ...rest }: TableHeaderProps) {
+function TableHeader({ children, ...rest }: TableHeaderProps): ReactElement {
   return <th {...rest}>{children}</th>;
 }
 
@@ -188,7 +190,7 @@ TableHeader.displayName = "TableHeader";
  * <Table.Cell colSpan={2}>Full-width note</Table.Cell>
  * ```
  */
-function TableCell({ children, ...rest }: TableCellProps) {
+function TableCell({ children, ...rest }: TableCellProps): ReactElement {
   return <td {...rest}>{children}</td>;
 }
 
@@ -222,7 +224,11 @@ TableCell.displayName = "TableCell";
  * </Table.ScrollArea>
  * ```
  */
-function TableScrollArea({ children, style, ...rest }: TableScrollAreaProps) {
+function TableScrollArea({
+  children,
+  style,
+  ...rest
+}: TableScrollAreaProps): ReactElement {
   return (
     <div
       style={{
@@ -277,7 +283,7 @@ function TableCaption({
   children,
   captionSide = "bottom",
   ...rest
-}: TableCaptionProps) {
+}: TableCaptionProps): ReactElement {
   return (
     <caption style={{ captionSide }} {...rest}>
       {children}

package/src/Table/__tests__/Table.Body.test.tsx

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

package/src/Table/__tests__/Table.Caption.test.tsx

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

package/src/Table/__tests__/Table.Cell.test.tsx

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

package/src/Table/__tests__/Table.Footer.test.tsx

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

package/src/Table/__tests__/Table.Head.test.tsx

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

package/src/Table/__tests__/Table.Header.test.tsx

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

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

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

package/src/Table/__tests__/Table.Row.test.tsx

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

package/src/Table/__tests__/Table.ScrollArea.test.tsx

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