@primitiv-ui/react 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/AccessibleIcon/AccessibleIcon.tsx

@@ -1,5 +1,5 @@
 import { Children, cloneElement, ReactElement } from "react";
-import { VisuallyHidden } from "../VisuallyHidden";
+import { VisuallyHidden } from "../VisuallyHidden/index.ts";
 import { AccessibleIconProps } from "./types";
 
 type DecorativeIconProps = { "aria-hidden": string; focusable: string };
@@ -26,7 +26,10 @@ type DecorativeIconProps = { "aria-hidden": string; focusable: string };
  * </button>
  * ```
  */
-export function AccessibleIcon({ label, children }: AccessibleIconProps) {
+export function AccessibleIcon({
+  label,
+  children,
+}: AccessibleIconProps): ReactElement {
   const icon = Children.only(children) as ReactElement<DecorativeIconProps>;
 
   return (

package/src/AccessibleIcon/__tests__/AccessibleIcon.test.tsx

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

package/src/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import { Ref, useEffect } from "react";
+import type { ReactElement } from "react";
 
-import { useDirection } from "../DirectionProvider";
-import { Slot } from "../Slot";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { Slot } from "../Slot/index.ts";
 
 import type {
   AccordionRootProps,
@@ -21,7 +22,7 @@ import {
   useAccordionItem,
   useAccordionItemContext,
   useAccordionRoot,
-} from "./hooks";
+} from "./hooks/index.ts";
 import { useAccordionTrigger } from "./hooks/useAccordionTrigger";
 
 /**
@@ -78,7 +79,7 @@ export function AccordionRoot({
   orientation = "vertical",
   dir,
   ...rest
-}: AccordionRootProps) {
+}: AccordionRootProps): ReactElement {
   const resolvedDir = dir ?? useDirection();
   const { contextValue } = useAccordionRoot(
     controlledValue,
@@ -124,7 +125,7 @@ export function AccordionItem({
   children,
   value,
   ...rest
-}: AccordionItemProps) {
+}: AccordionItemProps): ReactElement {
   const { contextValue } = useAccordionItem(value);
 
   return (
@@ -156,7 +157,7 @@ export function AccordionHeader({
   children,
   level = 3,
   ...rest
-}: AccordionHeaderProps) {
+}: AccordionHeaderProps): ReactElement {
   useAccordionHeaderContext();
   const HeadingTag: HeadingTag = `h${level}`;
 
@@ -229,16 +230,14 @@ AccordionHeader.displayName = "AccordionHeader";
  * </Accordion.Trigger>
  * ```
  */
-export function AccordionTrigger<
-  T extends HTMLElement = HTMLButtonElement,
->({
+export function AccordionTrigger<T extends HTMLElement = HTMLButtonElement>({
   ref,
   children,
   onClick,
   disabled = false,
   asChild = false,
   ...rest
-}: AccordionTriggerProps<T>) {
+}: AccordionTriggerProps<T>): ReactElement {
   // Cast the external ref to match the internal button ref's element type —
   // RefObject<T> is invariant in React's types, but at runtime the callback
   // receives whatever DOM element is actually rendered (button or asChild).
@@ -306,7 +305,7 @@ export function AccordionContent({
   children,
   forceMount = false,
   ...rest
-}: AccordionContentProps) {
+}: AccordionContentProps): ReactElement {
   const { panelId, buttonId, itemId, isExpanded } = useAccordionItemContext();
   const { registerPanel, unregisterPanel } = useAccordionContext();
 
@@ -373,7 +372,7 @@ AccordionContent.displayName = "AccordionContent";
 export function AccordionTriggerIcon({
   children,
   ...rest
-}: AccordionTriggerIconProps) {
+}: AccordionTriggerIconProps): ReactElement {
   const { isExpanded } = useAccordionItemContext();
 
   return (

package/src/Accordion/AccordionContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 import { AccordionContextValue, AccordionItemContextValue } from "./types";
 
 export const [AccordionContext, useAccordionContext] =

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

package/src/Accordion/hooks/useAccordionItem.ts

@@ -1,6 +1,6 @@
 import { useId, useMemo } from "react";
 
-import { deriveId } from "../../utils";
+import { deriveId } from "../../utils/index.ts";
 
 import { useAccordionContext } from "./useAccordionContext";
 

package/src/Accordion/hooks/useAccordionRoot.ts

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

package/src/Accordion/hooks/useAccordionTrigger.ts

@@ -1,7 +1,7 @@
 import { useMemo, useRef, useEffect, MouseEvent, KeyboardEvent } from "react";
 
-import { useRovingTabindex } from "../../hooks";
-import { composeRefs } from "../../Slot";
+import { useRovingTabindex } from "../../hooks/index.ts";
+import { composeRefs } from "../../Slot/index.ts";
 
 import { AccordionTriggerProps } from "../types";
 

package/src/Alert/Alert.tsx

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

package/src/Alert/__tests__/Alert.test.tsx

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

package/src/Avatar/Avatar.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
+import type { ReactElement } from "react";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 
 import { AvatarContext } from "./AvatarContext";
-import { useAvatarContext, useAvatarImage } from "./hooks";
+import { useAvatarContext, useAvatarImage } from "./hooks/index.ts";
 import {
   AvatarFallbackProps,
   AvatarImageLoadingStatus,
@@ -22,7 +23,11 @@ import {
  * **`asChild` prop.** Pass `asChild` to render the consumer's own element as
  * the container, with the `data-status` hook merged in.
  */
-function AvatarRoot({ asChild = false, children, ...rest }: AvatarRootProps) {
+function AvatarRoot({
+  asChild = false,
+  children,
+  ...rest
+}: AvatarRootProps): ReactElement {
   const [status, setStatus] = useState<AvatarImageLoadingStatus>("idle");
 
   const contextValue = useMemo(() => ({ status, setStatus }), [status]);
@@ -55,7 +60,11 @@ AvatarRoot.displayName = "AvatarRoot";
  *
  * @throws if rendered outside an `Avatar.Root`.
  */
-function AvatarImage({ asChild = false, children, ...rest }: AvatarImageProps) {
+function AvatarImage({
+  asChild = false,
+  children,
+  ...rest
+}: AvatarImageProps): ReactElement {
   const { status, setStatus } = useAvatarContext();
   const { ref, onLoad, onError } = useAvatarImage(setStatus);
 
@@ -97,7 +106,7 @@ function AvatarFallback({
   asChild = false,
   children,
   ...rest
-}: AvatarFallbackProps) {
+}: AvatarFallbackProps): ReactElement | null {
   const { status } = useAvatarContext();
   const [delayElapsed, setDelayElapsed] = useState(delayMs === undefined);
 

package/src/Avatar/AvatarContext.ts

@@ -1,4 +1,5 @@
-import { createStrictContext } from "../utils";
+import type { Context } from "react";
+import { createStrictContext } from "../utils/index.ts";
 
 import { AvatarImageLoadingStatus } from "./types";
 
@@ -13,8 +14,11 @@ export type AvatarContextValue = {
   setStatus: (status: AvatarImageLoadingStatus) => void;
 };
 
-export const [AvatarContext, useAvatarContext] =
-  createStrictContext<AvatarContextValue>(
-    "Avatar.Image and Avatar.Fallback must be rendered inside an <Avatar.Root>.",
-    "AvatarContext",
-  );
+const avatarContextPair = createStrictContext<AvatarContextValue>(
+  "Avatar.Image and Avatar.Fallback must be rendered inside an <Avatar.Root>.",
+  "AvatarContext",
+);
+
+export const AvatarContext: Context<AvatarContextValue | null> =
+  avatarContextPair[0];
+export const useAvatarContext: () => AvatarContextValue = avatarContextPair[1];

package/src/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 
 import {
   BreadcrumbItemProps,
@@ -24,7 +26,10 @@ import {
  * </Breadcrumb.Root>
  * ```
  */
-function BreadcrumbRoot({ children, ...rest }: BreadcrumbRootProps) {
+function BreadcrumbRoot({
+  children,
+  ...rest
+}: BreadcrumbRootProps): ReactElement {
   return (
     <nav aria-label="Breadcrumb" {...rest}>
       {children}
@@ -51,7 +56,10 @@ BreadcrumbRoot.displayName = "BreadcrumbRoot";
  * </Breadcrumb.List>
  * ```
  */
-function BreadcrumbList({ children, ...rest }: BreadcrumbListProps) {
+function BreadcrumbList({
+  children,
+  ...rest
+}: BreadcrumbListProps): ReactElement {
   return <ol {...rest}>{children}</ol>;
 }
 
@@ -70,7 +78,10 @@ BreadcrumbList.displayName = "BreadcrumbList";
  * </Breadcrumb.Item>
  * ```
  */
-function BreadcrumbItem({ children, ...rest }: BreadcrumbItemProps) {
+function BreadcrumbItem({
+  children,
+  ...rest
+}: BreadcrumbItemProps): ReactElement {
   return <li {...rest}>{children}</li>;
 }
 
@@ -102,7 +113,7 @@ function BreadcrumbLink({
   children,
   asChild = false,
   ...rest
-}: BreadcrumbLinkProps) {
+}: BreadcrumbLinkProps): ReactElement {
   if (asChild) {
     return <Slot {...rest}>{children}</Slot>;
   }
@@ -125,7 +136,10 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
  * </Breadcrumb.Item>
  * ```
  */
-function BreadcrumbPage({ children, ...rest }: BreadcrumbPageProps) {
+function BreadcrumbPage({
+  children,
+  ...rest
+}: BreadcrumbPageProps): ReactElement {
   return (
     <span aria-current="page" {...rest}>
       {children}
@@ -160,7 +174,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 function BreadcrumbSeparator({
   children = "/",
   ...rest
-}: BreadcrumbSeparatorProps) {
+}: BreadcrumbSeparatorProps): ReactElement {
   return (
     <li role="presentation" aria-hidden="true" {...rest}>
       {children}

package/src/Button/Button.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 import { ButtonProps } from "./types";
 
 /**
@@ -73,7 +75,7 @@ export function Button({
   children,
   ref,
   ...rest
-}: ButtonProps) {
+}: ButtonProps): ReactElement {
   const rootProps = {
     ...rest,
     ref,

package/src/Carousel/Carousel.tsx

@@ -1,13 +1,19 @@
 import { forwardRef, MouseEvent, useCallback } from "react";
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  ReactElement,
+  RefAttributes,
+} from "react";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 import { CarouselProvider } from "./CarouselContext";
 import {
   useCarouselContext,
   useCarouselRoot,
   useCarouselSlide,
   useCarouselViewport,
-} from "./hooks";
+} from "./hooks/index.ts";
 import type {
   CarouselImperativeApi,
   CarouselRootProps,
@@ -69,10 +75,9 @@ import type {
  * <Carousel.Root ariaLabelledBy="promos">…</Carousel.Root>
  * ```
  */
-export const CarouselRoot = forwardRef<
-  CarouselImperativeApi,
-  CarouselRootProps
->(function CarouselRoot(
+export const CarouselRoot: ForwardRefExoticComponent<
+  PropsWithoutRef<CarouselRootProps> & RefAttributes<CarouselImperativeApi>
+> = forwardRef<CarouselImperativeApi, CarouselRootProps>(function CarouselRoot(
   {
     className = "",
     ariaLabel,
@@ -185,7 +190,7 @@ export function CarouselViewport({
   className = "",
   children,
   ...rest
-}: CarouselViewportProps) {
+}: CarouselViewportProps): ReactElement {
   const { isAutoRotating, ids } = useCarouselContext();
   const { viewportRef, onKeyDown } = useCarouselViewport();
 
@@ -254,7 +259,7 @@ export function CarouselSlide({
   ariaLabel,
   children,
   ...rest
-}: CarouselSlideProps) {
+}: CarouselSlideProps): ReactElement {
   const { slideRef, index, total, state } = useCarouselSlide();
   const { translations } = useCarouselContext();
   const autoLabel =
@@ -311,7 +316,7 @@ export function CarouselNextTrigger({
   asChild = false,
   children,
   ...rest
-}: CarouselNextTriggerProps) {
+}: CarouselNextTriggerProps): ReactElement {
   const { next, canGoNext, ids } = useCarouselContext();
   const isDisabled = disabled === true || !canGoNext;
 
@@ -377,7 +382,7 @@ export function CarouselPreviousTrigger({
   asChild = false,
   children,
   ...rest
-}: CarouselPreviousTriggerProps) {
+}: CarouselPreviousTriggerProps): ReactElement {
   const { previous, canGoPrevious, ids } = useCarouselContext();
   const isDisabled = disabled === true || !canGoPrevious;
 
@@ -445,7 +450,7 @@ export function CarouselIndicatorGroup({
   ariaLabelledBy,
   children,
   ...rest
-}: CarouselIndicatorGroupProps) {
+}: CarouselIndicatorGroupProps): ReactElement {
   const { ids } = useCarouselContext();
 
   return (
@@ -497,7 +502,7 @@ export function CarouselIndicator({
   asChild = false,
   children,
   ...rest
-}: CarouselIndicatorProps) {
+}: CarouselIndicatorProps): ReactElement {
   const { goTo, currentPage, translations } = useCarouselContext();
   const isActive = index === currentPage;
 
@@ -552,7 +557,9 @@ CarouselIndicator.displayName = "CarouselIndicator";
  * <Carousel.Indicators label="Choose slide" />
  * ```
  */
-export function CarouselIndicators(props: CarouselIndicatorsProps) {
+export function CarouselIndicators(
+  props: CarouselIndicatorsProps,
+): ReactElement {
   const { totalPages } = useCarouselContext();
 
   return (
@@ -594,7 +601,7 @@ export function CarouselPlayPauseTrigger({
   asChild = false,
   children,
   ...rest
-}: CarouselPlayPauseTriggerProps) {
+}: CarouselPlayPauseTriggerProps): ReactElement {
   const { playing, togglePlaying, translations, ids, autoplayEnabled } =
     useCarouselContext();
 

package/src/Carousel/CarouselContext.ts

@@ -1,8 +1,9 @@
-import { createContext } from "react";
+import { createContext, type Context } from "react";
 
 import type { CarouselContextValue } from "./types";
 
-export const CarouselContext = createContext<CarouselContextValue | null>(null);
+export const CarouselContext: Context<CarouselContextValue | null> =
+  createContext<CarouselContextValue | null>(null);
 
 CarouselContext.displayName = "CarouselContext";
 

package/src/Carousel/__tests__/Carousel.asChild.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.NextTrigger asChild", () => {
   it("should render the supplied child element and route the click through to the page-advance handler", async () => {

package/src/Carousel/__tests__/Carousel.auto-play.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 timer", () => {
   beforeEach(() => {

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

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

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

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel controlled page state", () => {
   it("should derive the active slide from the controlled page prop", () => {

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

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel error handling", () => {
   it("should throw when Carousel.PlayPauseTrigger is rendered without autoplay enabled on Carousel.Root", () => {

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

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel custom ids", () => {
   it("should apply ids.root to the rendered <section>", () => {

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

@@ -1,8 +1,8 @@
 import { createRef, useRef } from "react";
 import { act, render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
-import type { CarouselImperativeApi } from "..";
+import { Carousel } from "../index.ts";
+import type { CarouselImperativeApi } from "../index.ts";
 
 function ImperativeFixture({
   apiRef,

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

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel.IndicatorGroup", () => {
   it('should render with role="group"', () => {

package/src/Carousel/__tests__/Carousel.intersection-observer.test.tsx

@@ -2,8 +2,8 @@ import { RefObject, useRef } from "react";
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
-import type { CarouselImperativeApi } from "..";
+import { Carousel } from "../index.ts";
+import type { CarouselImperativeApi } from "../index.ts";
 import { MockIntersectionObserver } from "../../test/intersectionObserverPolyfill";
 
 describe("Carousel IntersectionObserver fallback + isInView", () => {

package/src/Carousel/__tests__/Carousel.keyboard-navigation.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 keyboard navigation", () => {
   it("should advance the active page when ArrowRight is pressed with the viewport focused", async () => {

package/src/Carousel/__tests__/Carousel.play-pause.test.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 describe("Carousel.PlayPauseTrigger basic shape", () => {
   it("should render the PlayPauseTrigger as <button type='button'>", () => {

package/src/Carousel/__tests__/Carousel.prev-next.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";
 
 function renderWithSlides(
   rootProps: { defaultPage?: number } = {},

package/src/Carousel/__tests__/Carousel.reduced-motion.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";
 
 function mockReducedMotion(matches: boolean) {
   window.matchMedia = vi.fn().mockImplementation((query: string) => ({

package/src/Carousel/__tests__/Carousel.refresh-progress.test.tsx

@@ -1,8 +1,8 @@
 import { createRef } from "react";
 import { act, render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
-import type { CarouselImperativeApi } from "..";
+import { Carousel } from "../index.ts";
+import type { CarouselImperativeApi } from "../index.ts";
 
 function fixture(apiRef: React.Ref<CarouselImperativeApi>, slides = 3) {
   return (

package/src/Carousel/__tests__/Carousel.scroll-snap-change.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from "@testing-library/react";
 
-import { Carousel } from "..";
+import { Carousel } from "../index.ts";
 
 function fireScrollSnapChange(viewport: HTMLElement, snapTarget: HTMLElement) {
   const event = new Event("scrollsnapchange", { bubbles: false });

package/src/Carousel/__tests__/Carousel.scroll-sync.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 scroll sync (programmatic page change)", () => {
   it("should call scrollIntoView on the first slide of the target page when the active page changes", async () => {

package/src/Carousel/__tests__/Carousel.slides-per-move.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 numeric slidesPerMove", () => {
   it("should render `floor((total - slidesPerPage) / slidesPerMove) + 1` indicators", () => {