@primitiv-ui/react 0.1.0 → 0.1.2

package/src/Tooltip/types.ts

@@ -1,5 +1,10 @@
 import { ComponentProps, ReactNode } from "react";
 
+/**
+ * Context published by {@link Tooltip.Provider} — the shared open / skip
+ * delays and the group-wide open coordination callbacks used to suppress
+ * the open delay while another tooltip in the group is already showing.
+ */
 export type TooltipProviderContextValue = {
   delayDuration: number;
   skipDelayDuration: number;
@@ -8,6 +13,11 @@ export type TooltipProviderContextValue = {
   onCloseGlobally: () => void;
 };
 
+/**
+ * Context published by {@link Tooltip.Root} to its descendants — the live
+ * `open` state, the content `id` for ARIA wiring, and the timing callbacks
+ * the trigger and content use to open / close with the correct delays.
+ */
 export type TooltipContextValue = {
   open: boolean;
   contentId: string;
@@ -19,46 +29,84 @@ export type TooltipContextValue = {
   cancelGrace: () => void;
 };
 
+/**
+ * Props for {@link Tooltip.Provider} — sets the `delayDuration` and
+ * `skipDelayDuration` shared by every tooltip in the subtree.
+ */
 export type TooltipProviderProps = {
   children?: ReactNode;
   delayDuration?: number;
   skipDelayDuration?: number;
 };
 
-type UncontrolledTooltipRootProps = {
+/**
+ * Uncontrolled variant of {@link TooltipRootProps}: the component owns the
+ * open state. Pass `defaultOpen` (or omit it); `onOpenChange` is optional
+ * and `open` is forbidden.
+ */
+export type UncontrolledTooltipRootProps = {
   defaultOpen?: boolean;
   open?: never;
   onOpenChange?: (open: boolean) => void;
 };
 
-type ControlledTooltipRootProps = {
+/**
+ * Controlled variant of {@link TooltipRootProps}: the parent owns the open
+ * state. Pass `open` (with an optional `onOpenChange`); `defaultOpen` is
+ * forbidden.
+ */
+export type ControlledTooltipRootProps = {
   open: boolean;
   onOpenChange?: (open: boolean) => void;
   defaultOpen?: never;
 };
 
+/**
+ * Props for {@link Tooltip.Root}. Combines the per-tooltip timing /
+ * hoverable-content options with one of the two state modes
+ * ({@link UncontrolledTooltipRootProps} | {@link ControlledTooltipRootProps}),
+ * so TypeScript accepts exactly one mode.
+ */
 export type TooltipRootProps = {
   children?: ReactNode;
   delayDuration?: number;
   disableHoverableContent?: boolean;
 } & (UncontrolledTooltipRootProps | ControlledTooltipRootProps);
 
+/**
+ * Props for {@link Tooltip.Trigger} — all native `<button>` attributes plus
+ * the `asChild` escape hatch.
+ */
 export type TooltipTriggerProps = ComponentProps<"button"> & {
   asChild?: boolean;
 };
 
+/**
+ * Props for {@link Tooltip.Portal} — the `container` to render the content
+ * into (defaults to `document.body`) and `forceMount` to keep the content
+ * in the DOM while closed for exit animations.
+ */
 export type TooltipPortalProps = {
   children?: ReactNode;
   container?: HTMLElement;
   forceMount?: boolean;
 };
 
+/**
+ * Props for {@link Tooltip.Content} — all native `<div>` attributes plus
+ * `forceMount` and the dismissal callbacks fired on Escape
+ * (`onEscapeKeyDown`) and outside pointer-down (`onPointerDownOutside`).
+ */
 export type TooltipContentProps = ComponentProps<"div"> & {
   forceMount?: boolean;
   onEscapeKeyDown?: (event: KeyboardEvent) => void;
   onPointerDownOutside?: (event: PointerEvent) => void;
 };
 
+/**
+ * Props for {@link Tooltip.Arrow} — all native `<span>` attributes plus the
+ * `asChild` escape hatch.
+ */
 export type TooltipArrowProps = ComponentProps<"span"> & {
   asChild?: boolean;
 };

package/src/Tree/Tree.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useLayoutEffect, useRef } from "react";
+import type { ReactElement } from "react";
 
-import { Breadcrumb } from "../Breadcrumb";
-import { Slot, composeEventHandlers } from "../Slot";
-import { deriveId } from "../utils";
+import { Breadcrumb } from "../Breadcrumb/index.ts";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
+import { deriveId } from "../utils/index.ts";
 
 import {
   TreeContext,
@@ -16,7 +17,7 @@ import {
   useTreeItemKeyboard,
   useTreeRoot,
   useTreeSelectionPaths,
-} from "./hooks";
+} from "./hooks/index.ts";
 import { partitionBranchChildren } from "./utils";
 
 import type {
@@ -63,7 +64,7 @@ import type {
  * </Tree.Root>
  * ```
  */
-export function TreeRoot(props: TreeRootProps) {
+export function TreeRoot(props: TreeRootProps): ReactElement {
   const {
     children,
     expandedValues,
@@ -115,6 +116,7 @@ export function TreeRoot(props: TreeRootProps) {
   );
 }
 
+/** @internal */
 TreeRoot.displayName = "TreeRoot";
 
 /**
@@ -141,7 +143,7 @@ export function TreeItem({
   onFocus,
   onKeyDown,
   ...rest
-}: TreeItemProps) {
+}: TreeItemProps): ReactElement {
   const { depth, parentValue } = useTreeLevelContext();
   const { isSelected, select, registerNode, tabStop, setActiveValue } =
     useTreeContext();
@@ -200,6 +202,7 @@ export function TreeItem({
   );
 }
 
+/** @internal */
 TreeItem.displayName = "TreeItem";
 
 /**
@@ -235,7 +238,7 @@ export function TreeBranch({
   onFocus,
   onKeyDown,
   ...rest
-}: TreeBranchProps) {
+}: TreeBranchProps): ReactElement {
   const { depth, parentValue } = useTreeLevelContext();
   const {
     rootId,
@@ -300,6 +303,7 @@ export function TreeBranch({
   );
 }
 
+/** @internal */
 TreeBranch.displayName = "TreeBranch";
 
 /**
@@ -321,7 +325,7 @@ export function TreeBranchControl({
   children,
   onClick,
   ...rest
-}: TreeBranchControlProps) {
+}: TreeBranchControlProps): ReactElement {
   const { value, disabled, controlId } = useTreeItemContext();
   const { toggleExpanded, select } = useTreeContext();
 
@@ -348,6 +352,7 @@ export function TreeBranchControl({
   );
 }
 
+/** @internal */
 TreeBranchControl.displayName = "TreeBranchControl";
 
 /**
@@ -363,7 +368,7 @@ export function TreeBranchContent({
   children,
   forceMount = false,
   ...rest
-}: TreeBranchContentProps) {
+}: TreeBranchContentProps): ReactElement {
   const { depth } = useTreeLevelContext();
   const { value: branchValue, expanded } = useTreeItemContext();
 
@@ -384,6 +389,7 @@ export function TreeBranchContent({
   );
 }
 
+/** @internal */
 TreeBranchContent.displayName = "TreeBranchContent";
 
 /**
@@ -413,7 +419,7 @@ export function TreeBranchIndicator({
   children,
   asChild = false,
   ...rest
-}: TreeBranchIndicatorProps) {
+}: TreeBranchIndicatorProps): ReactElement {
   const { expanded } = useTreeItemContext();
 
   const indicatorProps = {
@@ -429,6 +435,7 @@ export function TreeBranchIndicator({
   );
 }
 
+/** @internal */
 TreeBranchIndicator.displayName = "TreeBranchIndicator";
 
 /**
@@ -483,7 +490,7 @@ export function TreeSelectionPath({
   children,
   separator,
   ...rest
-}: TreeSelectionPathProps) {
+}: TreeSelectionPathProps): ReactElement {
   const paths = useTreeSelectionPaths();
   const empty = paths.length === 0;
 
@@ -544,9 +551,14 @@ export function TreeSelectionPath({
   );
 }
 
+/** @internal */
 TreeSelectionPath.displayName = "TreeSelectionPath";
 
-type TreeCompound = typeof TreeRoot & {
+/**
+ * The shape of the exported `Tree` value — callable as `Tree.Root` and
+ * carrying every sub-component as a static property.
+ */
+export type TreeCompound = typeof TreeRoot & {
   Root: typeof TreeRoot;
   Item: typeof TreeItem;
   Branch: typeof TreeBranch;
@@ -556,6 +568,39 @@ type TreeCompound = typeof TreeRoot & {
   SelectionPath: typeof TreeSelectionPath;
 };
 
+/**
+ * Headless, accessible **Tree** — a compound component implementing the
+ * WAI-ARIA tree view pattern (`role="tree"` / `treeitem` / `group`) with
+ * roving tabindex, single or multiple selection, and expandable branches,
+ * with zero styles.
+ *
+ * `Tree` is both callable (an alias of {@link TreeRoot | `Tree.Root`}) and
+ * carries its sub-components as static properties:
+ *
+ * - {@link TreeRoot | `Tree.Root`} — state owner, context provider, `role="tree"`.
+ * - {@link TreeItem | `Tree.Item`} — a leaf `role="treeitem"`.
+ * - {@link TreeBranch | `Tree.Branch`} — an expandable `role="treeitem"` with children.
+ * - {@link TreeBranchControl | `Tree.BranchControl`} — the branch's selectable / toggling control.
+ * - {@link TreeBranchContent | `Tree.BranchContent`} — the collapsible `role="group"` of child nodes.
+ * - {@link TreeBranchIndicator | `Tree.BranchIndicator`} — expand/collapse affordance.
+ * - {@link TreeSelectionPath | `Tree.SelectionPath`} — breadcrumb of the selected node's ancestry.
+ *
+ * @example
+ * ```tsx
+ * import { Tree } from "@primitiv-ui/react";
+ *
+ * <Tree.Root>
+ *   <Tree.Branch value="src">
+ *     <Tree.BranchControl>
+ *       src <Tree.BranchIndicator />
+ *     </Tree.BranchControl>
+ *     <Tree.BranchContent>
+ *       <Tree.Item value="index">index.ts</Tree.Item>
+ *     </Tree.BranchContent>
+ *   </Tree.Branch>
+ * </Tree.Root>;
+ * ```
+ */
 const TreeCompound: TreeCompound = Object.assign(TreeRoot, {
   Root: TreeRoot,
   Item: TreeItem,
@@ -566,6 +611,7 @@ const TreeCompound: TreeCompound = Object.assign(TreeRoot, {
   SelectionPath: TreeSelectionPath,
 });
 
+/** @internal */
 TreeCompound.displayName = "Tree";
 
 export { TreeCompound as Tree };

package/src/Tree/TreeContext.ts

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

package/src/Tree/__tests__/Tree.selection-path.test.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { Tree, useTreePath, useTreeSelectionPaths } from "../../Tree";
-import type { TreePathSegment } from "../../Tree";
+import { Tree, useTreePath, useTreeSelectionPaths } from "../../Tree/index.ts";
+import type { TreePathSegment } from "../../Tree/index.ts";
 
 function PathProbe({ value }: { value: string }) {
   const path = useTreePath(value);

package/src/Tree/hooks/useTreeItemKeyboard.ts

@@ -1,6 +1,6 @@
 import type { KeyboardEvent } from "react";
 
-import { useRovingTabindex } from "../../hooks";
+import { useRovingTabindex } from "../../hooks/index.ts";
 import { useTreeContext } from "../TreeContext";
 
 type TreeItemKeyboardOptions = {

package/src/Tree/hooks/useTreeRoot.ts

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

package/src/Tree/index.ts

@@ -1,3 +1,3 @@
 export * from "./Tree";
+export * from "./types";
 export { useTreePath, useTreeSelectionPaths } from "./hooks/useTreePath";
-export type { TreePathSegment } from "./types";

package/src/Tree/types.ts

@@ -1,24 +1,28 @@
 import type { ComponentProps, ReactNode } from "react";
 
-type TreeRootBaseProps = ComponentProps<"div"> & {
+/** Mode-independent props shared by every `Tree.Root` variant. */
+export type TreeRootBaseProps = ComponentProps<"div"> & {
   children: ReactNode;
 };
 
-type TreeRootUncontrolledExpansionProps = {
+/** Uncontrolled expansion — initial expanded branches via `defaultExpandedValues`. */
+export type TreeRootUncontrolledExpansionProps = {
   /** Branch values expanded on first render when uncontrolled. */
   defaultExpandedValues?: string[];
   expandedValues?: never;
   onExpandedChange?: (values: string[]) => void;
 };
 
-type TreeRootControlledExpansionProps = {
+/** Controlled expansion — the expanded set is owned by the consumer. */
+export type TreeRootControlledExpansionProps = {
   defaultExpandedValues?: never;
   /** The set of expanded branch values, owned by the consumer. */
   expandedValues: string[];
   onExpandedChange: (values: string[]) => void;
 };
 
-type TreeRootSingleUncontrolledSelectionProps = {
+/** Single-selection mode, uncontrolled — initial value via `defaultSelectedValue`. */
+export type TreeRootSingleUncontrolledSelectionProps = {
   selectionMode?: "single";
   /** The value selected on first render when uncontrolled. */
   defaultSelectedValue?: string | null;
@@ -29,7 +33,8 @@ type TreeRootSingleUncontrolledSelectionProps = {
   onSelectedValuesChange?: never;
 };
 
-type TreeRootSingleControlledSelectionProps = {
+/** Single-selection mode, controlled — the selected value is owned by the consumer. */
+export type TreeRootSingleControlledSelectionProps = {
   selectionMode?: "single";
   defaultSelectedValue?: never;
   /** The selected value, owned by the consumer. */
@@ -40,7 +45,8 @@ type TreeRootSingleControlledSelectionProps = {
   onSelectedValuesChange?: never;
 };
 
-type TreeRootMultipleUncontrolledSelectionProps = {
+/** Multiple-selection mode, uncontrolled — initial values via `defaultSelectedValues`. */
+export type TreeRootMultipleUncontrolledSelectionProps = {
   selectionMode: "multiple";
   /** The values selected on first render when uncontrolled. */
   defaultSelectedValues?: string[];
@@ -51,7 +57,8 @@ type TreeRootMultipleUncontrolledSelectionProps = {
   onSelectedValueChange?: never;
 };
 
-type TreeRootMultipleControlledSelectionProps = {
+/** Multiple-selection mode, controlled — the selected values are owned by the consumer. */
+export type TreeRootMultipleControlledSelectionProps = {
   selectionMode: "multiple";
   defaultSelectedValues?: never;
   /** The selected values, owned by the consumer. */
@@ -62,6 +69,12 @@ type TreeRootMultipleControlledSelectionProps = {
   onSelectedValueChange?: never;
 };
 
+/**
+ * Props for `Tree.Root`. Combines the shared {@link TreeRootBaseProps} with
+ * one expansion arm (controlled / uncontrolled) and one selection arm
+ * (single / multiple, controlled / uncontrolled), so the relevant
+ * `value` / `defaultValue` / `onChange` shape is enforced per mode.
+ */
 export type TreeRootProps = TreeRootBaseProps &
   (TreeRootUncontrolledExpansionProps | TreeRootControlledExpansionProps) &
   (
@@ -71,6 +84,7 @@ export type TreeRootProps = TreeRootBaseProps &
     | TreeRootMultipleControlledSelectionProps
   );
 
+/** Props for `Tree.Item` — a selectable, focusable leaf treeitem. */
 export type TreeItemProps = ComponentProps<"div"> & {
   /** Stable identifier for this item, unique within the tree. */
   value: string;
@@ -88,6 +102,7 @@ export type TreeItemProps = ComponentProps<"div"> & {
   children: ReactNode;
 };
 
+/** Props for `Tree.Branch` — an expandable treeitem with nested children. */
 export type TreeBranchProps = Omit<ComponentProps<"div">, "ref"> & {
   /** Stable identifier for this branch, unique within the tree. */
   value: string;
@@ -106,12 +121,14 @@ export type TreeBranchProps = Omit<ComponentProps<"div">, "ref"> & {
   children: ReactNode;
 };
 
+/** Props for `Tree.BranchControl` — the branch's selectable, toggling control row. */
 export type TreeBranchControlProps = ComponentProps<"div"> & {
   /** Render the control as the supplied child element instead of `<div>`. */
   asChild?: boolean;
   children: ReactNode;
 };
 
+/** Props for `Tree.BranchContent` — the collapsible group of a branch's child nodes. */
 export type TreeBranchContentProps = ComponentProps<"div"> & {
   children: ReactNode;
   /**
@@ -122,6 +139,7 @@ export type TreeBranchContentProps = ComponentProps<"div"> & {
   forceMount?: boolean;
 };
 
+/** Props for `Tree.BranchIndicator` — the expand/collapse affordance. */
 export type TreeBranchIndicatorProps = ComponentProps<"span"> & {
   /** Render as the supplied child element instead of `<span>`. */
   asChild?: boolean;
@@ -133,6 +151,10 @@ export type TreeSelectionPathRenderProps = {
   paths: TreePathSegment[][];
 };
 
+/**
+ * Props for `Tree.SelectionPath` — a breadcrumb of the selected node's
+ * root-to-leaf ancestry, with an optional render-prop for custom layout.
+ */
 export type TreeSelectionPathProps = Omit<ComponentProps<"div">, "children"> & {
   /**
    * Either standard React children (ignored — the subcomponent does its
@@ -147,6 +169,7 @@ export type TreeSelectionPathProps = Omit<ComponentProps<"div">, "children"> & {
   separator?: ReactNode;
 };
 
+/** Per-level context — the nesting depth and enclosing branch value, shared down each subtree. */
 export type TreeLevelContextValue = {
   /** Zero-based nesting depth — `0` for items directly inside `Tree.Root`. */
   depth: number;
@@ -154,6 +177,7 @@ export type TreeLevelContextValue = {
   parentValue: string | null;
 };
 
+/** Registry entry for one tree node — its value, element, and structural metadata. */
 export type TreeNodeMeta = {
   value: string;
   element: HTMLElement;
@@ -177,14 +201,21 @@ export type TreePathSegment = {
   depth: number;
 };
 
+/** Whether the tree allows one selected node (`"single"`) or many (`"multiple"`). */
 export type SelectionMode = "single" | "multiple";
 
+/** Keyboard/pointer modifiers that influence a selection gesture. */
 export type TreeSelectModifiers = {
   meta: boolean;
   ctrl: boolean;
   shift: boolean;
 };
 
+/**
+ * Context shared from `Tree.Root` to every descendant — selection and
+ * expansion state, the node registry, roving-tabindex bookkeeping, and the
+ * path resolver.
+ */
 export type TreeContextValue = {
   /** Stable id shared across the tree, used to derive ARIA wiring ids. */
   rootId: string;
@@ -215,6 +246,7 @@ export type TreeContextValue = {
   selectedOrder: readonly string[];
 };
 
+/** Context a branch shares with its own control and content — its value, expanded/disabled state, and control id. */
 export type TreeItemContextValue = {
   value: string;
   expanded: boolean;

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties } from "react";
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+import { Slot } from "../Slot/index.ts";
 import { VisuallyHiddenProps } from "./types";
 
 const visuallyHiddenStyle: CSSProperties = {
@@ -51,7 +52,7 @@ export function VisuallyHidden({
   children,
   style,
   ...rest
-}: VisuallyHiddenProps) {
+}: VisuallyHiddenProps): ReactElement {
   const rootProps = {
     ...rest,
     style: { ...visuallyHiddenStyle, ...style },
@@ -64,4 +65,5 @@ export function VisuallyHidden({
   return <span {...rootProps}>{children}</span>;
 }
 
+/** @internal */
 VisuallyHidden.displayName = "VisuallyHidden";

package/src/VisuallyHidden/__tests__/VisuallyHidden.test.tsx

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

package/src/VisuallyHidden/types.ts

@@ -1,5 +1,9 @@
 import { ComponentProps } from "react";
 
+/**
+ * Props for {@link VisuallyHidden} — all native `<span>` attributes plus
+ * the `asChild` escape hatch.
+ */
 export type VisuallyHiddenProps = ComponentProps<"span"> & {
   asChild?: boolean;
 };

package/src/index.ts

@@ -1,38 +1,39 @@
-export * from "./AccessibleIcon";
-export * from "./Accordion";
-export * from "./Alert";
-export * from "./Avatar";
-export * from "./Breadcrumb";
-export * from "./Button";
-export * from "./Carousel";
-export * from "./Checkbox";
-export * from "./CheckboxCard";
-export * from "./Collapsible";
-export * from "./ContextMenu";
-export * from "./DirectionProvider";
-export * from "./Divider";
-export * from "./Dropdown";
-export * from "./EmptyState";
-export * from "./Field";
-export * from "./Fieldset";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./MillerColumns";
-export * from "./Modal";
-export * from "./Portal";
-export * from "./Progress";
-export * from "./RadioCard";
-export * from "./RadioGroup";
-export * from "./Select";
-export * from "./SkipNav";
-export * from "./Slider";
-export * from "./Status";
-export * from "./Switch";
-export * from "./Table";
-export * from "./Tabs";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./ToggleGroup";
-export * from "./Tooltip";
-export * from "./Tree";
-export * from "./VisuallyHidden";
+export * from "./AccessibleIcon/index.ts";
+export * from "./Accordion/index.ts";
+export * from "./Alert/index.ts";
+export * from "./Avatar/index.ts";
+export * from "./Breadcrumb/index.ts";
+export * from "./Button/index.ts";
+export * from "./Carousel/index.ts";
+export * from "./Checkbox/index.ts";
+export * from "./CheckboxCard/index.ts";
+export * from "./Collapsible/index.ts";
+export * from "./ContextMenu/index.ts";
+export * from "./DirectionProvider/index.ts";
+export * from "./Divider/index.ts";
+export * from "./Dropdown/index.ts";
+export * from "./EmptyState/index.ts";
+export * from "./Field/index.ts";
+export * from "./Fieldset/index.ts";
+export * from "./Input/index.ts";
+export * from "./InputGroup/index.ts";
+export * from "./MillerColumns/index.ts";
+export * from "./Modal/index.ts";
+export * from "./Portal/index.ts";
+export * from "./Progress/index.ts";
+export * from "./RadioCard/index.ts";
+export * from "./RadioGroup/index.ts";
+export * from "./Select/index.ts";
+export * from "./SkipNav/index.ts";
+export * from "./Slider/index.ts";
+export * from "./Status/index.ts";
+export * from "./Switch/index.ts";
+export * from "./Table/index.ts";
+export * from "./Tabs/index.ts";
+export * from "./Textarea/index.ts";
+export * from "./Toggle/index.ts";
+export * from "./ToggleGroup/index.ts";
+export * from "./Tooltip/index.ts";
+export * from "./Tree/index.ts";
+export * from "./VisuallyHidden/index.ts";
+export type { HeadingLevel } from "./types.ts";

package/src/types.ts

@@ -8,6 +8,7 @@ export type PossibleRef<T> = Ref<T> | undefined;
 
 export type AnyProps = Record<string, unknown>;
 
+/** A heading level, `1`–`6`, mapped to an `<h1>`–`<h6>` element. */
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/src/utils/createStrictContext.ts

@@ -20,11 +20,15 @@ import { createContext, useContext, type Context } from "react";
  * ```ts
  * type FooContextValue = { count: number };
  *
- * export const [FooContext, useFooContext] =
- *   createStrictContext<FooContextValue>(
- *     "Foo sub-components must be rendered inside <Foo.Root>.",
- *     "FooContext",
- *   );
+ * // JSR rejects array-destructured exports as a "slow type", so bind the
+ * // pair locally and re-export each half with an explicit type:
+ * const fooContext = createStrictContext<FooContextValue>(
+ *   "Foo sub-components must be rendered inside <Foo.Root>.",
+ *   "FooContext",
+ * );
+ *
+ * export const FooContext: Context<FooContextValue | null> = fooContext[0];
+ * export const useFooContext: () => FooContextValue = fooContext[1];
  * ```
  */
 export function createStrictContext<T>(