@primitiv-ui/react 0.1.1 → 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Simon Revill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.1",
+  "version": "0.1.3",
+  "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/AccessibleIcon/AccessibleIcon.tsx

@@ -40,4 +40,5 @@ export function AccessibleIcon({
   );
 }
 
+/** @internal */
 AccessibleIcon.displayName = "AccessibleIcon";

package/src/AccessibleIcon/types.ts

@@ -1,5 +1,9 @@
 import { ReactElement } from "react";
 
+/**
+ * Props for {@link AccessibleIcon} — a single icon element plus the
+ * visually-hidden `label` announced as its accessible name.
+ */
 export type AccessibleIconProps = {
   /** Text announced by assistive technology as the icon's accessible name. */
   label: string;

package/src/Accordion/Accordion.tsx

@@ -99,6 +99,7 @@ export function AccordionRoot({
   );
 }
 
+/** @internal */
 AccordionRoot.displayName = "AccordionRoot";
 
 /**
@@ -135,6 +136,7 @@ export function AccordionItem({
   );
 }
 
+/** @internal */
 AccordionItem.displayName = "AccordionItem";
 
 /**
@@ -164,6 +166,7 @@ export function AccordionHeader({
   return <HeadingTag {...rest}>{children}</HeadingTag>;
 }
 
+/** @internal */
 AccordionHeader.displayName = "AccordionHeader";
 
 /**
@@ -260,6 +263,7 @@ export function AccordionTrigger<T extends HTMLElement = HTMLButtonElement>({
   );
 }
 
+/** @internal */
 AccordionTrigger.displayName = "AccordionTrigger";
 
 /**
@@ -329,6 +333,7 @@ export function AccordionContent({
   );
 }
 
+/** @internal */
 AccordionContent.displayName = "AccordionContent";
 
 /**
@@ -386,8 +391,10 @@ export function AccordionTriggerIcon({
   );
 }
 
+/** @internal */
 AccordionTriggerIcon.displayName = "AccordionTriggerIcon";
 
+/** @internal */
 type AccordionCompound = typeof AccordionRoot & {
   Root: typeof AccordionRoot;
   Item: typeof AccordionItem;
@@ -397,6 +404,22 @@ type AccordionCompound = typeof AccordionRoot & {
   TriggerIcon: typeof AccordionTriggerIcon;
 };
 
+/**
+ * Headless, accessible **Accordion** — a compound component for a vertically
+ * (or horizontally) stacked set of collapsible sections, following the
+ * [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
+ * with zero styles.
+ *
+ * `Accordion` is both callable (an alias of {@link AccordionRoot | `Accordion.Root`})
+ * and carries its sub-components as static properties:
+ *
+ * - {@link AccordionRoot | `Accordion.Root`} — state owner and context provider.
+ * - {@link AccordionItem | `Accordion.Item`} — one collapsible section.
+ * - {@link AccordionHeader | `Accordion.Header`} — heading wrapper for the trigger.
+ * - {@link AccordionTrigger | `Accordion.Trigger`} — button that toggles the section.
+ * - {@link AccordionContent | `Accordion.Content`} — the collapsible panel.
+ * - {@link AccordionTriggerIcon | `Accordion.TriggerIcon`} — decorative state indicator.
+ */
 const AccordionCompound: AccordionCompound = Object.assign(AccordionRoot, {
   Root: AccordionRoot,
   Item: AccordionItem,

package/src/Accordion/index.ts

@@ -1 +1,2 @@
-export * from './Accordion';
+export * from "./Accordion";
+export * from "./types";

package/src/Accordion/types.ts

@@ -1,81 +1,123 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 import { HeadingLevel } from "../types";
 
-type AccordionRootBaseProps = ComponentProps<"div"> & {
+/** Props shared by both control modes of `Accordion.Root`. */
+export type AccordionRootBaseProps = ComponentProps<"div"> & {
+  /** Allow more than one section to be expanded at a time. */
   multiple?: boolean;
+  /** Layout axis, controlling arrow-key navigation. Defaults to `"vertical"`. */
   orientation?: "vertical" | "horizontal";
+  /** Reading direction, controlling left/right key semantics. */
   dir?: AccordionReadingDirection;
 };
 
-type AccordionRootUncontrolledProps = AccordionRootBaseProps & {
+/** `Accordion.Root` props for the uncontrolled (self-managed) expanded state. */
+export type AccordionRootUncontrolledProps = AccordionRootBaseProps & {
+  /** Initially expanded item value when uncontrolled. */
   defaultValue?: string;
   value?: never;
   onValueChange?: never;
 };
 
-type AccordionRootControlledProps = AccordionRootBaseProps & {
+/** `Accordion.Root` props for the controlled expanded state. */
+export type AccordionRootControlledProps = AccordionRootBaseProps & {
   defaultValue?: never;
+  /** Controlled set of expanded item values. */
   value: string[];
+  /** Called whenever the set of expanded item values changes. */
   onValueChange: (values: string[]) => void;
 };
 
+/** Reading direction for an accordion. */
 export type AccordionReadingDirection = "ltr" | "rtl";
 
+/** Props for `Accordion.Root`, in either the controlled or uncontrolled mode. */
 export type AccordionRootProps =
   | AccordionRootUncontrolledProps
   | AccordionRootControlledProps;
 
+/** Props for `Accordion.Item` — a single collapsible section. */
 export type AccordionItemProps = ComponentProps<"div"> & {
+  /** Section contents — typically a `Header` + `Content` pair. */
   children: ReactNode;
+  /** Stable value identifying the item; auto-generated via `useId()` when omitted. */
   value?: string; // Optional - if not provided, useId() will generate one
 };
 
-export type AccordionTriggerProps<
-  T extends HTMLElement = HTMLButtonElement,
-> = Omit<ComponentProps<"button">, "disabled" | "ref"> & {
-  children: ReactNode;
-  disabled?: boolean;
-  asChild?: boolean;
-  /** Ref to the rendered element. Defaults to `HTMLButtonElement`; when using
-   * `asChild`, specify the child's element type (e.g. `HTMLAnchorElement`). */
-  ref?: Ref<T>;
-};
+/** Props for `Accordion.Trigger` — the button that toggles a section. */
+export type AccordionTriggerProps<T extends HTMLElement = HTMLButtonElement> =
+  Omit<ComponentProps<"button">, "disabled" | "ref"> & {
+    /** Trigger label / contents. */
+    children: ReactNode;
+    /** Disable the trigger, removing it from keyboard navigation. */
+    disabled?: boolean;
+    /** Render into the consumer's own element instead of a `<button>`. */
+    asChild?: boolean;
+    /** Ref to the rendered element. Defaults to `HTMLButtonElement`; when using
+     * `asChild`, specify the child's element type (e.g. `HTMLAnchorElement`). */
+    ref?: Ref<T>;
+  };
 
+/** Props for `Accordion.Header` — the heading wrapping a trigger. */
 export type AccordionHeaderProps = ComponentProps<"h3"> & {
+  /** Header contents — typically an `Accordion.Trigger`. */
   children: ReactNode;
+  /** Heading level rendered (`h1`–`h6`). Defaults to `3`. */
   level?: HeadingLevel;
 };
 
+/** Props for `Accordion.Content` — the collapsible panel. */
 export type AccordionContentProps = ComponentProps<"div"> & {
+  /** Panel contents. */
   children: ReactNode;
+  /** Keep the panel mounted even while collapsed. */
   forceMount?: boolean;
 };
 
+/** Props for `Accordion.TriggerIcon` — a decorative open/closed indicator. */
 export type AccordionTriggerIconProps = ComponentProps<"span"> & {
+  /** Icon contents. */
   children: ReactNode;
 };
 
+/** Context value published by `Accordion.Root` to coordinate its sections. */
 export type AccordionContextValue = {
+  /** Generated id namespacing the accordion's element ids. */
   accordionId: string;
+  /** Set of currently expanded item values. */
   expandedItems: Set<string>;
+  /** Layout axis used for arrow-key navigation. */
   orientation: "vertical" | "horizontal";
+  /** Reading direction used for left/right key semantics. */
   dir: AccordionReadingDirection;
+  /** Toggles the expanded state of the given item. */
   toggleItem: (itemId: string) => void;
+  /** Registers a trigger element so roving focus can reach it. */
   registerTrigger: (
     itemId: string,
     element: HTMLButtonElement | null,
     disabled?: boolean,
   ) => void;
+  /** Ordered ids of registered triggers, used for focus movement. */
   registeredTriggerItemIds: string[];
+  /** Set of item ids whose triggers are disabled. */
   disabledItemIds: Set<string>;
+  /** Moves focus to the given item's trigger. */
   focusTrigger: (itemId: string) => void;
+  /** Registers a content panel as mounted. */
   registerPanel: (itemId: string) => void;
+  /** Removes a previously registered content panel. */
   unregisterPanel: (itemId: string) => void;
 };
 
+/** Context value published by `Accordion.Item` to its header and content. */
 export type AccordionItemContextValue = {
+  /** Id of the trigger button. */
   buttonId: string;
+  /** Id of the content panel. */
   panelId: string;
+  /** Stable value identifying this item. */
   itemId: string;
+  /** Whether this item is currently expanded. */
   isExpanded: boolean;
 };

package/src/Alert/Alert.tsx

@@ -46,4 +46,5 @@ export function Alert({
   return <div {...rootProps}>{children}</div>;
 }
 
+/** @internal */
 Alert.displayName = "Alert";

package/src/Alert/types.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 
+/** Props for the `Alert` — a live-region `<div role="alert">`; native `<div>` props plus `asChild`. */
 export type AlertProps = ComponentProps<"div"> & {
   asChild?: boolean;
 };

package/src/Avatar/Avatar.tsx

@@ -23,7 +23,7 @@ import {
  * **`asChild` prop.** Pass `asChild` to render the consumer's own element as
  * the container, with the `data-status` hook merged in.
  */
-function AvatarRoot({
+export function AvatarRoot({
   asChild = false,
   children,
   ...rest
@@ -45,6 +45,7 @@ function AvatarRoot({
   );
 }
 
+/** @internal */
 AvatarRoot.displayName = "AvatarRoot";
 
 /**
@@ -60,7 +61,7 @@ AvatarRoot.displayName = "AvatarRoot";
  *
  * @throws if rendered outside an `Avatar.Root`.
  */
-function AvatarImage({
+export function AvatarImage({
   asChild = false,
   children,
   ...rest
@@ -86,6 +87,7 @@ function AvatarImage({
   return <img {...imageProps} ref={ref} />;
 }
 
+/** @internal */
 AvatarImage.displayName = "AvatarImage";
 
 /**
@@ -101,7 +103,7 @@ AvatarImage.displayName = "AvatarImage";
  *
  * @throws if rendered outside an `Avatar.Root`.
  */
-function AvatarFallback({
+export function AvatarFallback({
   delayMs,
   asChild = false,
   children,
@@ -131,9 +133,11 @@ function AvatarFallback({
   return <span {...fallbackProps}>{children}</span>;
 }
 
+/** @internal */
 AvatarFallback.displayName = "AvatarFallback";
 
-type TAvatarCompound = typeof AvatarRoot & {
+/** Static-property shape of the compound {@link Avatar} export: the callable {@link AvatarRoot} plus its namespaced sub-components. */
+export type TAvatarCompound = typeof AvatarRoot & {
   Root: typeof AvatarRoot;
   Image: typeof AvatarImage;
   Fallback: typeof AvatarFallback;

package/src/Avatar/AvatarContext.ts

@@ -19,6 +19,8 @@ const avatarContextPair = createStrictContext<AvatarContextValue>(
   "AvatarContext",
 );
 
+/** React context carrying the {@link AvatarContextValue} shared by the avatar's sub-components. */
 export const AvatarContext: Context<AvatarContextValue | null> =
   avatarContextPair[0];
+/** Hook returning the {@link AvatarContextValue}; throws when used outside an `<Avatar.Root>`. */
 export const useAvatarContext: () => AvatarContextValue = avatarContextPair[1];

package/src/Breadcrumb/Breadcrumb.tsx

@@ -26,7 +26,7 @@ import {
  * </Breadcrumb.Root>
  * ```
  */
-function BreadcrumbRoot({
+export function BreadcrumbRoot({
   children,
   ...rest
 }: BreadcrumbRootProps): ReactElement {
@@ -37,6 +37,7 @@ function BreadcrumbRoot({
   );
 }
 
+/** @internal */
 BreadcrumbRoot.displayName = "BreadcrumbRoot";
 
 /**
@@ -56,13 +57,14 @@ BreadcrumbRoot.displayName = "BreadcrumbRoot";
  * </Breadcrumb.List>
  * ```
  */
-function BreadcrumbList({
+export function BreadcrumbList({
   children,
   ...rest
 }: BreadcrumbListProps): ReactElement {
   return <ol {...rest}>{children}</ol>;
 }
 
+/** @internal */
 BreadcrumbList.displayName = "BreadcrumbList";
 
 /**
@@ -78,13 +80,14 @@ BreadcrumbList.displayName = "BreadcrumbList";
  * </Breadcrumb.Item>
  * ```
  */
-function BreadcrumbItem({
+export function BreadcrumbItem({
   children,
   ...rest
 }: BreadcrumbItemProps): ReactElement {
   return <li {...rest}>{children}</li>;
 }
 
+/** @internal */
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 /**
@@ -109,7 +112,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
  * </Breadcrumb.Link>
  * ```
  */
-function BreadcrumbLink({
+export function BreadcrumbLink({
   children,
   asChild = false,
   ...rest
@@ -120,6 +123,7 @@ function BreadcrumbLink({
   return <a {...rest}>{children}</a>;
 }
 
+/** @internal */
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 /**
@@ -136,7 +140,7 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
  * </Breadcrumb.Item>
  * ```
  */
-function BreadcrumbPage({
+export function BreadcrumbPage({
   children,
   ...rest
 }: BreadcrumbPageProps): ReactElement {
@@ -147,6 +151,7 @@ function BreadcrumbPage({
   );
 }
 
+/** @internal */
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 /**
@@ -171,7 +176,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
  * <Breadcrumb.Separator><ChevronRight /></Breadcrumb.Separator>
  * ```
  */
-function BreadcrumbSeparator({
+export function BreadcrumbSeparator({
   children = "/",
   ...rest
 }: BreadcrumbSeparatorProps): ReactElement {
@@ -182,9 +187,11 @@ function BreadcrumbSeparator({
   );
 }
 
+/** @internal */
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
-type TBreadcrumbCompound = typeof BreadcrumbRoot & {
+/** Type of the {@link Breadcrumb} compound: the root callable plus its attached sub-components. */
+export type TBreadcrumbCompound = typeof BreadcrumbRoot & {
   Root: typeof BreadcrumbRoot;
   List: typeof BreadcrumbList;
   Item: typeof BreadcrumbItem;
@@ -243,6 +250,7 @@ const BreadcrumbCompound: TBreadcrumbCompound = Object.assign(BreadcrumbRoot, {
   Separator: BreadcrumbSeparator,
 });
 
+/** @internal */
 BreadcrumbCompound.displayName = "Breadcrumb";
 
 export { BreadcrumbCompound as Breadcrumb };

package/src/Button/Button.tsx

@@ -94,4 +94,5 @@ export function Button({
   );
 }
 
+/** @internal */
 Button.displayName = "Button";

package/src/Button/types.ts

@@ -1,5 +1,9 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
+/**
+ * Props for {@link Button} — all native `<button>` attributes (with `type`
+ * defaulting to `"button"`) plus the `asChild` escape hatch and a typed `ref`.
+ */
 export type ButtonProps = Omit<ComponentProps<"button">, "type"> & {
   type?: "button" | "submit" | "reset";
   asChild?: boolean;

package/src/Carousel/Carousel.tsx

@@ -210,6 +210,7 @@ export function CarouselViewport({
   );
 }
 
+/** @internal */
 CarouselViewport.displayName = "CarouselViewport";
 
 /**
@@ -286,6 +287,7 @@ export function CarouselSlide({
   );
 }
 
+/** @internal */
 CarouselSlide.displayName = "CarouselSlide";
 
 /**
@@ -353,6 +355,7 @@ export function CarouselNextTrigger({
   );
 }
 
+/** @internal */
 CarouselNextTrigger.displayName = "CarouselNextTrigger";
 
 /**
@@ -415,6 +418,7 @@ export function CarouselPreviousTrigger({
   );
 }
 
+/** @internal */
 CarouselPreviousTrigger.displayName = "CarouselPreviousTrigger";
 
 /**
@@ -469,6 +473,7 @@ export function CarouselIndicatorGroup({
   );
 }
 
+/** @internal */
 CarouselIndicatorGroup.displayName = "CarouselIndicatorGroup";
 
 /**
@@ -535,6 +540,7 @@ export function CarouselIndicator({
   );
 }
 
+/** @internal */
 CarouselIndicator.displayName = "CarouselIndicator";
 
 /**
@@ -571,6 +577,7 @@ export function CarouselIndicators(
   );
 }
 
+/** @internal */
 CarouselIndicators.displayName = "CarouselIndicators";
 
 /**
@@ -644,8 +651,10 @@ export function CarouselPlayPauseTrigger({
   );
 }
 
+/** @internal */
 CarouselPlayPauseTrigger.displayName = "CarouselPlayPauseTrigger";
 
+/** Static-property shape of the compound {@link Carousel} export: the callable {@link CarouselRoot} plus its namespaced sub-components. */
 type CarouselCompound = typeof CarouselRoot & {
   Root: typeof CarouselRoot;
   Viewport: typeof CarouselViewport;

package/src/Carousel/CarouselContext.ts

@@ -1,12 +1,15 @@
-import { createContext, type Context } from "react";
+import { createContext, type Context, type Provider } from "react";
 
 import type { CarouselContextValue } from "./types";
 
+/** React context carrying the {@link CarouselContextValue} shared by the carousel's sub-components. */
 export const CarouselContext: Context<CarouselContextValue | null> =
   createContext<CarouselContextValue | null>(null);
 
 CarouselContext.displayName = "CarouselContext";
 
-const CarouselProvider = CarouselContext.Provider;
+/** Provider for {@link CarouselContext}; wraps the carousel subtree with its shared state. */
+const CarouselProvider: Provider<CarouselContextValue | null> =
+  CarouselContext.Provider;
 
 export { CarouselProvider };

package/src/Carousel/types.ts

@@ -153,6 +153,7 @@ export type CarouselTranslations = {
   stopSlideshow?: string;
 };
 
+/** Props for `Carousel.Root` — the labelled `<section>` wrapping the whole widget; combines label, page-state, and playing-state shapes with autoplay, transition, and layout options. */
 export type CarouselRootProps = Omit<
   ComponentProps<"section">,
   "aria-label" | "aria-labelledby"
@@ -278,8 +279,10 @@ export type CarouselContextValue = {
   isProgrammaticScrollRef: RefObject<boolean>;
 };
 
+/** Props for `Carousel.Viewport` — the scroll-snap slide container; accepts all native `<div>` props. */
 export type CarouselViewportProps = ComponentProps<"div">;
 
+/** Props for `Carousel.Slide` — an individual slide that self-registers with the Root; native `<div>` props plus an optional accessible-label override. */
 export type CarouselSlideProps = Omit<ComponentProps<"div">, "aria-label"> & {
   /** Override the auto-generated `"N of M"` `aria-label`. Use this when
    * the slide has a more meaningful description than its position
@@ -288,6 +291,7 @@ export type CarouselSlideProps = Omit<ComponentProps<"div">, "aria-label"> & {
   ariaLabel?: string;
 };
 
+/** Props for `Carousel.NextTrigger` — the button that advances one page; native `<button>` props plus `asChild`. */
 export type CarouselNextTriggerProps = ComponentProps<"button"> & {
   /** Render the child element instead of the default `<button>`. All
    * trigger props (onClick, disabled, ids.nextTrigger, …) are merged
@@ -295,6 +299,7 @@ export type CarouselNextTriggerProps = ComponentProps<"button"> & {
   asChild?: boolean;
 };
 
+/** Props for `Carousel.PreviousTrigger` — the button that retreats one page; native `<button>` props plus `asChild`. */
 export type CarouselPreviousTriggerProps = ComponentProps<"button"> & {
   /** See `CarouselNextTriggerProps.asChild`. */
   asChild?: boolean;
@@ -315,6 +320,7 @@ export type CarouselIndicatorGroupProps = Omit<
     | { label?: never; ariaLabelledBy: string }
   );
 
+/** Props for `Carousel.Indicator` — a button that jumps to its target page; native `<button>` props plus the target `index` and `asChild`. */
 export type CarouselIndicatorProps = ComponentProps<"button"> & {
   /** Zero-based page this indicator targets. Clicking jumps to it. */
   index: number;
@@ -357,6 +363,7 @@ export type CarouselImperativeApi = {
   isInView: (slideIndex: number) => boolean;
 };
 
+/** Live progress snapshot reported by the carousel: the active page, the total page count, and a normalised `value` in `[0, 1]`. */
 export type CarouselProgress = {
   page: number;
   totalPages: number;
@@ -388,6 +395,7 @@ export type CarouselPlayPauseTriggerChildren =
   | ReactNode
   | ((state: { playing: boolean }) => ReactNode);
 
+/** Props for `Carousel.PlayPauseTrigger` — toggles autoplay; native `<button>` props with a state-aware render-prop `children` and `asChild`. */
 export type CarouselPlayPauseTriggerProps = Omit<
   ComponentProps<"button">,
   "children"

package/src/Checkbox/Checkbox.tsx

@@ -77,7 +77,7 @@ function dataStateOf(checked: CheckedState) {
  * </Checkbox.Root>
  * ```
  */
-function CheckboxRoot(props: CheckboxRootProps): ReactElement {
+export function CheckboxRoot(props: CheckboxRootProps): ReactElement {
   const {
     defaultChecked,
     checked,
@@ -119,6 +119,7 @@ function CheckboxRoot(props: CheckboxRootProps): ReactElement {
   );
 }
 
+/** @internal */
 CheckboxRoot.displayName = "CheckboxRoot";
 
 /**
@@ -165,7 +166,7 @@ CheckboxRoot.displayName = "CheckboxRoot";
  *
  * @throws if rendered outside a `Checkbox.Root`.
  */
-function CheckboxIndicator({
+export function CheckboxIndicator({
   children,
   forceMount,
   asChild = false,
@@ -185,9 +186,11 @@ function CheckboxIndicator({
   return <span {...indicatorProps}>{children}</span>;
 }
 
+/** @internal */
 CheckboxIndicator.displayName = "CheckboxIndicator";
 
-type TCheckboxCompound = typeof CheckboxRoot & {
+/** Type of the {@link Checkbox} compound: the root callable plus its attached sub-components. */
+export type TCheckboxCompound = typeof CheckboxRoot & {
   Root: typeof CheckboxRoot;
   Indicator: typeof CheckboxIndicator;
 };
@@ -224,6 +227,7 @@ const CheckboxCompound: TCheckboxCompound = Object.assign(CheckboxRoot, {
   Indicator: CheckboxIndicator,
 });
 
+/** @internal */
 CheckboxCompound.displayName = "Checkbox";
 
 export { CheckboxCompound as Checkbox };

package/src/Checkbox/index.ts

@@ -1 +1,2 @@
 export * from "./Checkbox";
+export * from "./types";