@primitiv-ui/react 0.1.1 → 0.1.2

package/src/InputGroup/InputGroup.tsx

@@ -36,7 +36,7 @@ import { InputGroupAdornmentProps, InputGroupRootProps } from "./types";
  * </InputGroup>
  * ```
  */
-function InputGroupRoot({
+export function InputGroupRoot({
   asChild = false,
   children,
   ref,
@@ -55,6 +55,7 @@ function InputGroupRoot({
   return <div {...rootProps}>{children}</div>;
 }
 
+/** @internal */
 InputGroupRoot.displayName = "InputGroupRoot";
 
 /**
@@ -91,7 +92,7 @@ InputGroupRoot.displayName = "InputGroupRoot";
  * </InputGroup.LeadingAdornment>
  * ```
  */
-function InputGroupLeadingAdornment({
+export function InputGroupLeadingAdornment({
   asChild = false,
   children,
   ref,
@@ -110,6 +111,7 @@ function InputGroupLeadingAdornment({
   return <span {...adornmentProps}>{children}</span>;
 }
 
+/** @internal */
 InputGroupLeadingAdornment.displayName = "InputGroupLeadingAdornment";
 
 /**
@@ -138,7 +140,7 @@ InputGroupLeadingAdornment.displayName = "InputGroupLeadingAdornment";
  * </InputGroup.TrailingAdornment>
  * ```
  */
-function InputGroupTrailingAdornment({
+export function InputGroupTrailingAdornment({
   asChild = false,
   children,
   ref,
@@ -157,9 +159,11 @@ function InputGroupTrailingAdornment({
   return <span {...adornmentProps}>{children}</span>;
 }
 
+/** @internal */
 InputGroupTrailingAdornment.displayName = "InputGroupTrailingAdornment";
 
-type TInputGroupCompound = typeof InputGroupRoot & {
+/** Type of the {@link InputGroup} compound: the root callable plus its attached sub-components. */
+export type TInputGroupCompound = typeof InputGroupRoot & {
   Root: typeof InputGroupRoot;
   LeadingAdornment: typeof InputGroupLeadingAdornment;
   TrailingAdornment: typeof InputGroupTrailingAdornment;
@@ -225,6 +229,7 @@ const InputGroupCompound: TInputGroupCompound = Object.assign(InputGroupRoot, {
   TrailingAdornment: InputGroupTrailingAdornment,
 });
 
+/** @internal */
 InputGroupCompound.displayName = "InputGroup";
 
 export { InputGroupCompound as InputGroup };

package/src/InputGroup/types.ts

@@ -1,11 +1,20 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
+/**
+ * Props for {@link InputGroup.Root} — all `<div>` attributes plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
 export type InputGroupRootProps = ComponentProps<"div"> & {
   asChild?: boolean;
   ref?: Ref<HTMLDivElement>;
   children?: ReactNode;
 };
 
+/**
+ * Props for {@link InputGroup.LeadingAdornment} and
+ * {@link InputGroup.TrailingAdornment} — all `<span>` attributes plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
 export type InputGroupAdornmentProps = ComponentProps<"span"> & {
   asChild?: boolean;
   ref?: Ref<HTMLSpanElement>;

package/src/MillerColumns/MillerColumns.tsx

@@ -81,6 +81,7 @@ export function MillerColumnsRoot({
   );
 }
 
+/** @internal */
 MillerColumnsRoot.displayName = "MillerColumnsRoot";
 
 /**
@@ -123,6 +124,7 @@ export function MillerColumnsColumn({
   );
 }
 
+/** @internal */
 MillerColumnsColumn.displayName = "MillerColumnsColumn";
 
 /**
@@ -186,6 +188,7 @@ export function MillerColumnsItem<T extends HTMLElement = HTMLDivElement>({
   );
 }
 
+/** @internal */
 MillerColumnsItem.displayName = "MillerColumnsItem";
 
 /**
@@ -232,6 +235,7 @@ export function MillerColumnsItemIndicator({
   );
 }
 
+/** @internal */
 MillerColumnsItemIndicator.displayName = "MillerColumnsItemIndicator";
 
 /**
@@ -259,6 +263,7 @@ export function MillerColumnsResizeHandle(
   return <div {...handleProps} />;
 }
 
+/** @internal */
 MillerColumnsResizeHandle.displayName = "MillerColumnsResizeHandle";
 
 /**
@@ -302,17 +307,31 @@ export function MillerColumnsPreviewPanel({
   );
 }
 
+/** @internal */
 MillerColumnsPreviewPanel.displayName = "MillerColumnsPreviewPanel";
 
+/** Type of the {@link MillerColumns} compound — the Root callable plus its sub-components. */
 type MillerColumnsCompound = typeof MillerColumnsRoot & {
+  /** The root strip, owning selection state and portal slots. */
   Root: typeof MillerColumnsRoot;
+  /** A single vertical list within the strip. */
   Column: typeof MillerColumnsColumn;
+  /** A selectable node within a column. */
   Item: typeof MillerColumnsItem;
+  /** The branch-item chevron affordance. */
   ItemIndicator: typeof MillerColumnsItemIndicator;
+  /** The drag-to-resize separator. */
   ResizeHandle: typeof MillerColumnsResizeHandle;
+  /** The trailing preview pane. */
   PreviewPanel: typeof MillerColumnsPreviewPanel;
 };
 
+/**
+ * MillerColumns — a horizontal strip of vertical lists where selecting a
+ * node reveals its children in the next column. Use as a namespace
+ * (`MillerColumns.Root`, `MillerColumns.Column`, `MillerColumns.Item`, …);
+ * the default export is also callable as the Root.
+ */
 const MillerColumnsCompound: MillerColumnsCompound = Object.assign(
   MillerColumnsRoot,
   {

package/src/MillerColumns/index.ts

@@ -1,3 +1,3 @@
 export * from "./MillerColumns";
 export { useMillerColumnsSelection } from "./useMillerColumnsSelection";
-export type { MillerColumnsSelection } from "./types";
+export * from "./types";

package/src/MillerColumns/types.ts

@@ -1,51 +1,80 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
-type MillerColumnsRootBaseProps = Omit<ComponentProps<"div">, "ref"> & {
+/** Props common to both controlled and uncontrolled `MillerColumns.Root` modes. */
+export type MillerColumnsRootBaseProps = Omit<ComponentProps<"div">, "ref"> & {
+  /** The columns and panels that make up the strip. */
   children: ReactNode;
 };
 
-type MillerColumnsRootUncontrolledProps = MillerColumnsRootBaseProps & {
+/**
+ * Props for `MillerColumns.Root` in uncontrolled mode — the component owns the
+ * selection path. Pass `defaultValue` to set the initial path.
+ */
+export type MillerColumnsRootUncontrolledProps = MillerColumnsRootBaseProps & {
+  /** Initial selection path when uncontrolled. */
   defaultValue?: string[];
+  /** Forbidden in uncontrolled mode. */
   value?: never;
+  /** Forbidden in uncontrolled mode. */
   onValueChange?: never;
 };
 
-type MillerColumnsRootControlledProps = MillerColumnsRootBaseProps & {
+/**
+ * Props for `MillerColumns.Root` in controlled mode — the parent owns the
+ * selection path. Pass `value` and `onValueChange` together.
+ */
+export type MillerColumnsRootControlledProps = MillerColumnsRootBaseProps & {
+  /** Forbidden in controlled mode. */
   defaultValue?: never;
+  /** The controlled selection path, root column first. */
   value: string[];
+  /** Called with the new path whenever the selection changes. */
   onValueChange: (path: string[]) => void;
 };
 
+/** Props for `MillerColumns.Root` — discriminated controlled/uncontrolled union. */
 export type MillerColumnsRootProps =
   | MillerColumnsRootUncontrolledProps
   | MillerColumnsRootControlledProps;
 
+/** Props for `MillerColumns.Column`, a single vertical list within the strip. */
 export type MillerColumnsColumnProps = ComponentProps<"div"> & {
+  /** The items (and optional resize handle) of this column. */
   children: ReactNode;
 };
 
-export type MillerColumnsItemProps<
-  T extends HTMLElement = HTMLDivElement,
-> = Omit<ComponentProps<"div">, "ref"> & {
-  value: string;
-  disabled?: boolean;
-  asChild?: boolean;
-  children: ReactNode;
-  /** Ref to the rendered element. Defaults to `HTMLDivElement`; when using
-   * `asChild`, specify the child's element type. */
-  ref?: Ref<T>;
-};
+/** Props for `MillerColumns.Item`, a single selectable node within a column. */
+export type MillerColumnsItemProps<T extends HTMLElement = HTMLDivElement> =
+  Omit<ComponentProps<"div">, "ref"> & {
+    /** Stable identifier used to match this item against the selection path. */
+    value: string;
+    /** When `true`, the item cannot be selected or focused. */
+    disabled?: boolean;
+    /** Render the child element instead of the default `<div>`. */
+    asChild?: boolean;
+    /** Cell content and, for a branch, a nested `<MillerColumns.Column>`. */
+    children: ReactNode;
+    /** Ref to the rendered element. Defaults to `HTMLDivElement`; when using
+     * `asChild`, specify the child's element type. */
+    ref?: Ref<T>;
+  };
 
+/** Props for `MillerColumns.ItemIndicator`, the branch chevron affordance. */
 export type MillerColumnsItemIndicatorProps = ComponentProps<"span"> & {
+  /** The glyph to render (defaults to none). */
   children?: ReactNode;
 };
 
+/** Props for `MillerColumns.ResizeHandle`, the drag-to-resize separator. */
 export type MillerColumnsResizeHandleProps = ComponentProps<"div">;
 
+/** Props for `MillerColumns.PreviewPanel`, the trailing preview pane. */
 export type MillerColumnsPreviewPanelProps = ComponentProps<"div"> & {
+  /** The preview content for the current selection. */
   children?: ReactNode;
 };
 
+/** The current selection, as returned by `useMillerColumnsSelection`. */
 export type MillerColumnsSelection = {
   /** The full active path — selected item ids, root column first. */
   path: string[];
@@ -53,41 +82,65 @@ export type MillerColumnsSelection = {
   selectedValue: string | undefined;
 };
 
+/** Metadata recorded for each registered item, used for column navigation. */
 export type MillerColumnsItemMeta = {
+  /** The item's stable identifier. */
   value: string;
+  /** Whether the item is disabled. */
   disabled: boolean;
 };
 
+/** A depth + value pair locating an item within the strip. */
 export type MillerColumnsItemAddress = {
+  /** The zero-based column depth. */
   depth: number;
+  /** The item's stable identifier. */
   value: string;
 };
 
+/** Value shared through the root MillerColumns context. */
 export type MillerColumnsContextValue = {
+  /** Portal slots keyed by column depth. */
   slots: Map<number, HTMLElement>;
+  /** Per-depth column widths set via the resize handle. */
   columnWidths: Map<number, number>;
+  /** Record a column's width at the given depth. */
   setColumnWidth: (depth: number, width: number) => void;
+  /** The active selection path. */
   activePath: string[];
+  /** Select the item at the given depth and value. */
   select: (depth: number, value: string) => void;
+  /** Register (or unregister, with a `null` element) an item. */
   registerItem: (
     depth: number,
     value: string,
     element: HTMLElement | null,
     disabled: boolean,
   ) => void;
+  /** Get the registered items for a column. */
   getColumnItems: (depth: number) => MillerColumnsItemMeta[];
+  /** Move focus to the given item. */
   focusItem: (depth: number, value: string) => void;
+  /** Focus the first item in a column; returns whether one was focused. */
   focusFirstInColumn: (depth: number) => boolean;
+  /** Request that focus move into the given column. */
   requestColumnFocus: (depth: number) => void;
+  /** The currently active (focused) item, if any. */
   activeItem: MillerColumnsItemAddress | null;
+  /** Set the active (focused) item. */
   setActiveItem: (item: MillerColumnsItemAddress) => void;
 };
 
+/** Value shared through a column's context. */
 export type MillerColumnsColumnContextValue = {
+  /** The column's zero-based depth. */
   depth: number;
 };
 
+/** Value shared through an item's context. */
 export type MillerColumnsItemContextValue = {
+  /** Whether this item is on the active path. */
   selected: boolean;
+  /** Whether this item has a nested child column. */
   hasChildren: boolean;
 };

package/src/Modal/Modal.tsx

@@ -415,6 +415,7 @@ function ModalClose({
 
 ModalClose.displayName = "ModalClose";
 
+/** @internal */
 type ModalCompound = typeof ModalRoot & {
   Root: typeof ModalRoot;
   Trigger: typeof ModalTrigger;

package/src/Modal/ModalContext.ts

@@ -1,4 +1,4 @@
-import type { Context } from "react";
+import type { Context, Provider } from "react";
 import { createStrictContext } from "../utils/index.ts";
 
 import { ModalContextValue } from "./types";
@@ -8,10 +8,13 @@ const modalContextPair = createStrictContext<ModalContextValue>(
   "ModalContext",
 );
 
+/** React context carrying the shared {@link ModalContextValue} for a modal. */
 export const ModalContext: Context<ModalContextValue | null> =
   modalContextPair[0];
+/** Hook returning the nearest {@link ModalContextValue}; throws outside `Modal.Root`. */
 export const useModalContext: () => ModalContextValue = modalContextPair[1];
 
-const ModalProvider = ModalContext.Provider;
+/** Context provider for {@link ModalContext}, rendered internally by `Modal.Root`. */
+const ModalProvider: Provider<ModalContextValue | null> = ModalContext.Provider;
 
 export { ModalProvider };

package/src/Modal/types.ts

@@ -6,71 +6,120 @@ import {
   RefObject,
 } from "react";
 
+/**
+ * Imperative handle exposed on `Modal.Root`'s `ref`, letting callers open
+ * and close the modal programmatically.
+ */
 export type ModalImperativeApi = {
+  /** Opens the modal. */
   open: () => void;
+  /** Closes the modal. */
   close: () => void;
 };
 
+/**
+ * Optional escape-hatch callbacks accepted by `Modal.Content` for
+ * intercepting dismissal gestures.
+ */
 export type ModalContentCallbacks = {
+  /** Fires when the user presses Escape; call `preventDefault` to keep the modal open. */
   onEscapeKeyDown?: (event: Event) => void;
+  /** Fires on a pointer-down outside the content; call `preventDefault` to keep the modal open. */
   onPointerDownOutside?: (event: PointerEvent) => void;
 };
 
+/**
+ * Shared context value published by `Modal.Root` and consumed by every
+ * sub-component to coordinate open state, ids, and ARIA wiring.
+ */
 export type ModalContextValue = {
+  /** Whether the modal is currently open. */
   open: boolean;
+  /** Sets the open state. */
   setOpen: (open: boolean) => void;
+  /** Generated id of the dialog content element. */
   contentId: string;
+  /** Mutable ref holding the current content callbacks. */
   contentCallbacksRef: RefObject<ModalContentCallbacks>;
+  /** Id of the registered title, or `undefined` when none is rendered. */
   titleId: string | undefined;
+  /** Id of the registered description, or `undefined` when none is rendered. */
   descriptionId: string | undefined;
+  /** Registers (or clears) the title id for `aria-labelledby`. */
   registerTitle: (id: string | undefined) => void;
+  /** Registers (or clears) the description id for `aria-describedby`. */
   registerDescription: (id: string | undefined) => void;
 };
 
+/** Props for `Modal.Content` — native `<dialog>` props plus dismissal callbacks. */
 export type ModalContentProps = ComponentProps<"dialog"> &
   ModalContentCallbacks;
 
-type UncontrolledModalRootProps = {
+/** `Modal.Root` props for the uncontrolled (self-managed) open state. */
+export type UncontrolledModalRootProps = {
+  /** Initial open state when uncontrolled. */
   defaultOpen?: boolean;
   open?: never;
+  /** Called whenever the open state changes. */
   onOpenChange?: (open: boolean) => void;
 };
 
-type ControlledModalRootProps = {
+/** `Modal.Root` props for the controlled open state. */
+export type ControlledModalRootProps = {
+  /** Controlled open state. */
   open: boolean;
+  /** Called whenever the modal requests an open-state change. */
   onOpenChange: (open: boolean) => void;
   defaultOpen?: never;
 };
 
+/** Props for `Modal.Root`, in either the controlled or uncontrolled mode. */
 export type ModalRootProps = {
+  /** Modal sub-components. */
   children?: ReactNode;
 } & (UncontrolledModalRootProps | ControlledModalRootProps) & {
+    /** Ref receiving the imperative open/close handle. */
     ref?: Ref<ModalImperativeApi>;
   };
 
+/** Props for `Modal.Trigger` — a `<button>` that opens the modal. */
 export type ModalTriggerProps = ComponentProps<"button"> & {
+  /** Render into the consumer's own element instead of a `<button>`. */
   asChild?: boolean;
 };
 
+/** Props for `Modal.Close` — a `<button>` that closes the modal. */
 export type ModalCloseProps = ComponentProps<"button"> & {
+  /** Render into the consumer's own element instead of a `<button>`. */
   asChild?: boolean;
 };
 
+/** Props for `Modal.Portal` — renders its children into `container`. */
 export type ModalPortalProps = {
+  /** Content to portal. */
   children?: ReactNode;
+  /** Target element to portal into. Defaults to `document.body`. */
   container?: HTMLElement;
+  /** Keep the portal mounted even while the modal is closed. */
   forceMount?: boolean;
 };
 
+/** Props for `Modal.Overlay` — the click-outside backdrop. */
 export type ModalOverlayProps = ComponentProps<"div"> & {
+  /** Render into the consumer's own element instead of a `<div>`. */
   asChild?: boolean;
+  /** Keep the overlay mounted even while the modal is closed. */
   forceMount?: boolean;
 };
 
+/** Props for `Modal.Title` — supplies the dialog's accessible name. */
 export type ModalTitleProps = HTMLAttributes<HTMLElement> & {
+  /** Render into the consumer's own element instead of an `<h2>`. */
   asChild?: boolean;
 };
 
+/** Props for `Modal.Description` — supplies the dialog's accessible description. */
 export type ModalDescriptionProps = HTMLAttributes<HTMLElement> & {
+  /** Render into the consumer's own element instead of a `<p>`. */
   asChild?: boolean;
 };

package/src/Portal/Portal.tsx

@@ -24,6 +24,7 @@ function Portal({ children, container }: PortalProps): ReactPortal {
   return createPortal(children, container ?? document.body);
 }
 
+/** @internal */
 Portal.displayName = "Portal";
 
 export { Portal };

package/src/Portal/types.ts

@@ -1,5 +1,9 @@
 import { ReactNode } from "react";
 
+/**
+ * Props for {@link Portal} — the `children` to teleport and an optional
+ * `container` to render into (defaults to `document.body`).
+ */
 export type PortalProps = {
   children?: ReactNode;
   container?: HTMLElement;

package/src/Progress/Progress.tsx

@@ -47,7 +47,7 @@ function defaultGetValueLabel(value: number, max: number): string {
  * </Progress.Root>
  * ```
  */
-function ProgressRoot({
+export function ProgressRoot({
   value,
   max,
   getValueLabel = defaultGetValueLabel,
@@ -93,6 +93,7 @@ function ProgressRoot({
   );
 }
 
+/** @internal */
 ProgressRoot.displayName = "ProgressRoot";
 
 /**
@@ -117,7 +118,7 @@ ProgressRoot.displayName = "ProgressRoot";
  *
  * @throws if rendered outside a `Progress.Root`.
  */
-function ProgressIndicator({
+export function ProgressIndicator({
   asChild = false,
   children,
   ...rest
@@ -135,9 +136,11 @@ function ProgressIndicator({
   return <div {...indicatorProps}>{children}</div>;
 }
 
+/** @internal */
 ProgressIndicator.displayName = "ProgressIndicator";
 
-type TProgressCompound = typeof ProgressRoot & {
+/** Type of the {@link Progress} compound: the root callable plus its attached sub-components. */
+export type TProgressCompound = typeof ProgressRoot & {
   Root: typeof ProgressRoot;
   Indicator: typeof ProgressIndicator;
 };
@@ -174,6 +177,7 @@ const ProgressCompound: TProgressCompound = Object.assign(ProgressRoot, {
   Indicator: ProgressIndicator,
 });
 
+/** @internal */
 ProgressCompound.displayName = "Progress";
 
 export { ProgressCompound as Progress };

package/src/Progress/ProgressContext.ts

@@ -3,6 +3,11 @@ import { createStrictContext } from "../utils/index.ts";
 
 import { ProgressState } from "./types";
 
+/**
+ * Context value published by {@link Progress.Root} and consumed by
+ * {@link Progress.Indicator} — the current `value` (or `null` while
+ * indeterminate), the `max`, and the derived loading `state`.
+ */
 export type ProgressContextValue = {
   value: number | null;
   max: number;
@@ -14,7 +19,9 @@ const progressContextPair = createStrictContext<ProgressContextValue>(
   "ProgressContext",
 );
 
+/** React context carrying the {@link ProgressContextValue}; `null` when no provider is present. */
 export const ProgressContext: Context<ProgressContextValue | null> =
   progressContextPair[0];
+/** Reads the {@link ProgressContextValue}; throws if used outside a {@link Progress.Root}. */
 export const useProgressContext: () => ProgressContextValue =
   progressContextPair[1];

package/src/RadioCard/RadioCard.tsx

@@ -73,7 +73,7 @@ import {
  * </RadioCard.Root>
  * ```
  */
-function RadioCardRoot({
+export function RadioCardRoot({
   defaultValue,
   value: controlledValue,
   onValueChange,
@@ -129,6 +129,7 @@ function RadioCardRoot({
   );
 }
 
+/** @internal */
 RadioCardRoot.displayName = "RadioCardRoot";
 
 /**
@@ -158,7 +159,7 @@ RadioCardRoot.displayName = "RadioCardRoot";
  *
  * @throws if rendered outside a `RadioCard.Root`.
  */
-function RadioCardItem({
+export function RadioCardItem({
   value,
   children,
   onClick,
@@ -232,6 +233,7 @@ function RadioCardItem({
   );
 }
 
+/** @internal */
 RadioCardItem.displayName = "RadioCardItem";
 
 /**
@@ -260,7 +262,7 @@ RadioCardItem.displayName = "RadioCardItem";
  *
  * @throws if rendered outside a `RadioCard.Item`.
  */
-function RadioCardIndicator({
+export function RadioCardIndicator({
   children,
   forceMount,
   asChild = false,
@@ -279,9 +281,12 @@ function RadioCardIndicator({
   return <span {...indicatorProps}>{children}</span>;
 }
 
+/** @internal */
 RadioCardIndicator.displayName = "RadioCardIndicator";
 
-type TRadioCardCompound = typeof RadioCardRoot & {
+/** Type of the {@link RadioCard} compound: the callable `RadioCard.Root`
+ * component augmented with its sub-components as static properties. */
+export type TRadioCardCompound = typeof RadioCardRoot & {
   Root: typeof RadioCardRoot;
   Item: typeof RadioCardItem;
   Indicator: typeof RadioCardIndicator;

package/src/RadioCard/RadioCardContext.ts

@@ -3,6 +3,9 @@ import { createStrictContext } from "../utils/index.ts";
 
 import { RadioCardOrientation, RadioCardReadingDirection } from "./types";
 
+/** The value shared by `RadioCard.Root` with its items through context: the
+ * current selection and setter, the item registry used for roving focus and
+ * keyboard navigation, and the resolved orientation/direction. */
 export type RadioCardContextValue = {
   value: string | undefined;
   select: (value: string) => void;
@@ -22,7 +25,11 @@ const radioCardContextPair = createStrictContext<RadioCardContextValue>(
   "RadioCard sub-components must be rendered inside a <RadioCard.Root>.",
 );
 
+/** Strict React context carrying the {@link RadioCardContextValue} from
+ * `RadioCard.Root` to its items. `null` when read outside a `RadioCard.Root`. */
 export const RadioCardContext: Context<RadioCardContextValue | null> =
   radioCardContextPair[0];
+/** Reads the {@link RadioCardContextValue}; throws when used outside a
+ * `RadioCard.Root`. */
 export const useRadioCardContext: () => RadioCardContextValue =
   radioCardContextPair[1];

package/src/RadioCard/RadioCardItemContext.ts

@@ -1,7 +1,10 @@
 import type { Context } from "react";
 import { createStrictContext } from "../utils/index.ts";
 
+/** The value shared by `RadioCard.Item` with its `RadioCard.Indicator`,
+ * exposing whether the item is currently selected. */
 export type RadioCardItemContextValue = {
+  /** Whether the enclosing item is the selected card. */
   checked: boolean;
 };
 
@@ -9,7 +12,12 @@ const radioCardItemContextPair = createStrictContext<RadioCardItemContextValue>(
   "RadioCard.Indicator must be rendered inside a <RadioCard.Item>.",
 );
 
+/** Strict React context carrying the {@link RadioCardItemContextValue} from
+ * `RadioCard.Item` to its indicator. `null` when read outside a
+ * `RadioCard.Item`. */
 export const RadioCardItemContext: Context<RadioCardItemContextValue | null> =
   radioCardItemContextPair[0];
+/** Reads the {@link RadioCardItemContextValue}; throws when used outside a
+ * `RadioCard.Item`. */
 export const useRadioCardItemContext: () => RadioCardItemContextValue =
   radioCardItemContextPair[1];