@skdx/react 0.26.0 → 0.28.0

package/dist/hover-card/HoverCard.d.ts

@@ -7,6 +7,16 @@ export declare const HoverCardRootProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useHoverCardContext: (consumerName: string) => HoverCardContextValue;
+/** Props for {@link HoverCardRoot}: {@link HoverCardProps} minus the derived-anatomy-only props. */
+export type HoverCardRootProps = Omit<HoverCardProps, 'trigger' | 'side' | 'align' | 'showArrow'>;
+/**
+ * State/context root with independent open/close delays. Wraps children in
+ * popper root, renders no DOM. Use directly for full manual composition.
+ */
+export declare function HoverCardRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, openDelay, closeDelay, disabled, }: HoverCardRootProps): React.JSX.Element;
+export declare namespace HoverCardRoot {
+    var displayName: string;
+}
 /**
  * Root of a hover-revealed preview card (e.g. a user profile preview behind
  * a link): owns open state with independent open/close delays and hands it
@@ -14,6 +24,13 @@ export declare const HoverCardRootProvider: {
  * `HoverCardArrow` via context. Wraps children in the shared popper
  * positioning root. Renders no DOM element itself.
  *
+ * Always draws the derived anatomy from `trigger`: the trigger (merged onto
+ * `trigger` via `asChild` — no extra wrapping `<a>`), the portal, and the
+ * floating card around the body (`children`). `children` is the card's
+ * body, never a switch — this component never inspects what it was given,
+ * only whether it exists. For full manual composition of the parts, use
+ * `HoverCardRoot` from `@skdx/react/primitives/hover-card` instead of this recipe.
+ *
  * Unlike `Tooltip`, the pointer can move from the trigger onto the content
  * itself without the card closing — `HoverCardContent` cancels the close
  * timer on pointer-enter. Escape closes the card and returns focus to the
@@ -22,9 +39,32 @@ export declare const HoverCardRootProvider: {
  * (WCAG 2.2 SC 1.4.13). Works controlled (`open` + `onOpenChange`) or
  * uncontrolled (`defaultOpen`).
  *
+ * The card is **pointer-only, and its content is not keyboard-reachable by
+ * design** — the same position Radix, Zag and Base UI take (Base UI renamed
+ * its family `PreviewCard`). Hover opens it, focus does not, no key does, and
+ * `Tab` moves through the page as if it were closed. **`HoverCardContent`
+ * must therefore hold nothing tabbable: use `Popover` when the content has to
+ * be operated** — a hover card whose content is interactive is a popover.
+ * Escape is the exception, and it is a dismissal rather than
+ * an activation.
+ *
+ * `disabled` suppresses the card in place: the pointer entering the trigger
+ * does nothing, `aria-describedby` never appears, `data-state` stays `closed`
+ * and `onOpenChange` never fires. Hover is the only activation there is, so
+ * suppressing it suppresses the card entirely.
+ *
  * @example
  * ```tsx
- * <HoverCard>
+ * <HoverCard trigger={<a href="/users/kent">@kentcdodds</a>}>
+ *   <p>Kent C. Dodds</p>
+ * </HoverCard>
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/hover-card`.
+ * ```tsx
+ * import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from '@skdx/react/primitives/hover-card';
+ *
+ * <HoverCardRoot>
  *   <HoverCardTrigger href="/users/kent">@kentcdodds</HoverCardTrigger>
  *   <HoverCardPortal>
  *     <HoverCardContent>
@@ -32,10 +72,10 @@ export declare const HoverCardRootProvider: {
  *       <HoverCardArrow />
  *     </HoverCardContent>
  *   </HoverCardPortal>
- * </HoverCard>
+ * </HoverCardRoot>
  * ```
  */
-export declare function HoverCard({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, openDelay, closeDelay, }: HoverCardProps): React.JSX.Element;
+export declare function HoverCard({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, openDelay, closeDelay, disabled, trigger, side, align, showArrow, ...rest }: HoverCardProps): React.JSX.Element;
 export declare namespace HoverCard {
     var displayName: string;
 }

package/dist/hover-card/HoverCard.js

@@ -1 +1 @@
-import*as e from"react";import{createSafeContext as k}from"../utils/createContext.js";import{skdxPart as F}from"../utils/part.js";import{PopperArrow as O,PopperRoot as A}from"../utils/popper.js";import{useControllableState as M}from"../utils/useControllableState.js";import{useOpenChangeComplete as I}from"../utils/useOpenChangeComplete.js";import{jsx as R}from"react/jsx-runtime";var[D,d]=k("HoverCard");function S({children:t,open:s,defaultOpen:o=!1,onOpenChange:p,onOpenChangeComplete:c,openDelay:m=700,closeDelay:l=300}){let f=e.useRef(null),C=e.useRef(null),r=e.useRef(!1),u=e.useRef(0),n=e.useRef(0),[P=!1,i]=M({prop:s,defaultProp:o,onChange:p});I(P,C,c);let a=e.useCallback(()=>{window.clearTimeout(u.current),window.clearTimeout(n.current)},[]);e.useEffect(()=>a,[a]);let L=e.useCallback(()=>{a(),i(!0)},[a,i]),N=e.useCallback(()=>{a(),i(!1)},[a,i]),b=e.useCallback(()=>{a(),u.current=window.setTimeout(()=>i(!0),m)},[a,i,m]),H=e.useCallback(()=>{a(),n.current=window.setTimeout(()=>i(!1),l)},[a,i,l]);return R(A,{children:R(D,{contentId:e.useId(),open:P,triggerRef:f,contentRef:C,ignoreNextFocusRef:r,onOpen:L,onClose:N,onTriggerEnter:b,onTriggerLeave:H,onContentEnter:a,onContentLeave:H,children:t})})}S.displayName="HoverCard";var B=e.forwardRef((t,s)=>R(O,{...t,...F("hover-card","arrow",t.className),ref:s}));B.displayName="HoverCardArrow";import*as T from"react";import{useComposedRefs as V}from"../utils/composeRefs.js";import{skdxPart as W}from"../utils/part.js";import{PopperAnchor as K}from"../utils/popper.js";import{composeEventHandlers as v,Primitive as q}from"../utils/primitive.js";import{jsx as g}from"react/jsx-runtime";var x=T.forwardRef((t,s)=>{let o=d("HoverCardTrigger"),p=V(s,o.triggerRef);return g(K,{asChild:!0,children:g(q.a,{"aria-describedby":o.open?o.contentId:void 0,"data-state":o.open?"open":"closed",...t,...W("hover-card","trigger",t.className),ref:p,onPointerEnter:v(t.onPointerEnter,c=>{c.pointerType!=="touch"&&o.onTriggerEnter()}),onPointerLeave:v(t.onPointerLeave,c=>{c.pointerType!=="touch"&&o.onTriggerLeave()}),onFocus:v(t.onFocus,()=>{if(o.ignoreNextFocusRef.current){o.ignoreNextFocusRef.current=!1;return}o.onOpen()}),onBlur:v(t.onBlur,o.onClose)})})});x.displayName="HoverCardTrigger";import{Portal as z}from"../utils/portal.js";import{jsx as G}from"react/jsx-runtime";var y=({forceMount:t,children:s,...o})=>{let p=d("HoverCardPortal");return t||p.open?G(z,{...o,children:s}):null};y.displayName="HoverCardPortal";import*as E from"react";import{useComposedRefs as J}from"../utils/composeRefs.js";import{skdxPart as Q}from"../utils/part.js";import{PopperContent as U}from"../utils/popper.js";import{composeEventHandlers as h}from"../utils/primitive.js";import{useDismiss as X}from"../utils/useDismiss.js";import{jsx as Y}from"react/jsx-runtime";var w=E.forwardRef(({forceMount:t,side:s="bottom",sideOffset:o=4,onEscapeKeyDown:p,onPointerDownOutside:c,onFocusOutside:m,onInteractOutside:l,...f},C)=>{let r=d("HoverCardContent"),u=J(C,r.contentRef);return X({enabled:r.open,onEscapeKeyDown:n=>{p?.(n),n.defaultPrevented||(r.onClose(),r.ignoreNextFocusRef.current=!0,r.triggerRef.current?.focus())},onInteractOutside:l,onPointerDownOutside:n=>{c?.(n),n.defaultPrevented||r.onClose()},onFocusOutside:n=>{m?.(n),n.defaultPrevented||r.onClose()}},[r.triggerRef,r.contentRef]),t||r.open?Y(U,{component:"hover-card",id:r.contentId,"data-state":r.open?"open":"closed",side:s,sideOffset:o,...f,...Q("hover-card","content",f.className),ref:u,onPointerEnter:h(f.onPointerEnter,n=>{n.pointerType!=="touch"&&r.onContentEnter()}),onPointerLeave:h(f.onPointerLeave,n=>{n.pointerType!=="touch"&&r.onContentLeave()})}):null});w.displayName="HoverCardContent";export{S as HoverCard,B as HoverCardArrow,w as HoverCardContent,y as HoverCardPortal,D as HoverCardRootProvider,x as HoverCardTrigger,d as useHoverCardContext};
+import*as t from"react";import{createSafeContext as X}from"../utils/createContext.js";import{skdxPart as Y}from"../utils/part.js";import{PopperArrow as Z,PopperRoot as _}from"../utils/popper.js";import{useControllableState as $}from"../utils/useControllableState.js";import{useOpenChangeComplete as j}from"../utils/useOpenChangeComplete.js";import*as E from"react";import{useComposedRefs as I}from"../utils/composeRefs.js";import{skdxPart as V}from"../utils/part.js";import{PopperContent as W}from"../utils/popper.js";import{composeEventHandlers as x}from"../utils/primitive.js";import{useDismiss as B}from"../utils/useDismiss.js";import{jsx as F}from"react/jsx-runtime";var R=E.forwardRef(({forceMount:e,side:i="bottom",sideOffset:n=4,onEscapeKeyDown:s,onPointerDownOutside:p,onFocusOutside:m,onInteractOutside:c,...a},v)=>{let o=l("HoverCardContent"),C=I(v,o.contentRef);return B({enabled:o.open,onEscapeKeyDown:r=>{s?.(r),r.defaultPrevented||(o.onClose(),o.triggerRef.current?.focus())},onInteractOutside:c,onPointerDownOutside:r=>{p?.(r),r.defaultPrevented||o.onClose()},onFocusOutside:r=>{m?.(r),r.defaultPrevented||o.onClose()}},[o.triggerRef,o.contentRef]),e||o.open?F(W,{component:"hover-card",id:o.contentId,"data-state":o.open?"open":"closed",side:i,sideOffset:n,...a,...V("hover-card","content",a.className),ref:C,onPointerEnter:x(a.onPointerEnter,r=>{r.pointerType!=="touch"&&o.onContentEnter()}),onPointerLeave:x(a.onPointerLeave,r=>{r.pointerType!=="touch"&&o.onContentLeave()})}):null});R.displayName="HoverCardContent";import{Portal as K}from"../utils/portal.js";import{jsx as q}from"react/jsx-runtime";var P=({forceMount:e,children:i,...n})=>{let s=l("HoverCardPortal");return e||s.open?q(K,{...n,children:i}):null};P.displayName="HoverCardPortal";import*as b from"react";import{useComposedRefs as z}from"../utils/composeRefs.js";import{skdxPart as G}from"../utils/part.js";import{PopperAnchor as J}from"../utils/popper.js";import{composeEventHandlers as A,Primitive as Q}from"../utils/primitive.js";import{jsx as L}from"react/jsx-runtime";var g=b.forwardRef((e,i)=>{let n=l("HoverCardTrigger"),s=z(i,n.triggerRef);return L(J,{asChild:!0,children:L(Q.a,{"aria-describedby":n.open?n.contentId:void 0,"data-state":n.open?"open":"closed",...e,...G("hover-card","trigger",e.className),ref:s,onPointerEnter:A(e.onPointerEnter,p=>{p.pointerType!=="touch"&&n.onTriggerEnter()}),onPointerLeave:A(e.onPointerLeave,p=>{p.pointerType!=="touch"&&n.onTriggerLeave()})})})});g.displayName="HoverCardTrigger";import{Fragment as U,jsx as y,jsxs as O}from"react/jsx-runtime";var N=({trigger:e,side:i,align:n,showArrow:s,children:p,passThrough:m})=>{let{open:c}=l("HoverCardAnatomy"),a=c&&m?.id?{"aria-describedby":m.id}:{};return O(U,{children:[e?y(g,{asChild:!0,...a,children:e}):null,y(P,{children:O(R,{...m,side:i,align:n,children:[p,s?y(h,{}):null]})})]})};import{jsx as u}from"react/jsx-runtime";var[ee,l]=X("HoverCard");function k({children:e,open:i,defaultOpen:n=!1,onOpenChange:s,onOpenChangeComplete:p,openDelay:m=700,closeDelay:c=300,disabled:a=!1}){let v=t.useRef(null),o=t.useRef(null),C=t.useRef(0),r=t.useRef(0),[H=!1,f]=$({prop:i,defaultProp:n,onChange:s}),T=a?!1:H;j(T,o,p);let d=t.useCallback(()=>{window.clearTimeout(C.current),window.clearTimeout(r.current)},[]);t.useEffect(()=>d,[d]);let S=t.useCallback(()=>{a||(d(),f(!0))},[d,f,a]),D=t.useCallback(()=>{d(),f(!1)},[d,f]),M=t.useCallback(()=>{a||(d(),C.current=window.setTimeout(()=>f(!0),m))},[d,f,m,a]),w=t.useCallback(()=>{d(),r.current=window.setTimeout(()=>f(!1),c)},[d,f,c]);return u(_,{children:u(ee,{contentId:t.useId(),open:T,triggerRef:v,contentRef:o,onOpen:S,onClose:D,onTriggerEnter:M,onTriggerLeave:w,onContentEnter:d,onContentLeave:w,children:e})})}k.displayName="HoverCardRoot";function oe({children:e,open:i,defaultOpen:n,onOpenChange:s,onOpenChangeComplete:p,openDelay:m,closeDelay:c,disabled:a,trigger:v,side:o,align:C,showArrow:r=!1,...H}){return u(k,{open:i,defaultOpen:n,onOpenChange:s,onOpenChangeComplete:p,openDelay:m,closeDelay:c,disabled:a,children:u(N,{trigger:v,side:o,align:C,showArrow:r,passThrough:H,children:e})})}oe.displayName="HoverCard";var h=t.forwardRef((e,i)=>u(Z,{...e,...Y("hover-card","arrow",e.className),ref:i}));h.displayName="HoverCardArrow";export{oe as HoverCard,h as HoverCardArrow,R as HoverCardContent,P as HoverCardPortal,k as HoverCardRoot,ee as HoverCardRootProvider,g as HoverCardTrigger,l as useHoverCardContext};

package/dist/hover-card/HoverCardAnatomy.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { Align, Side } from '../utils/popper.cjs';
+/**
+ * The anatomy a {@link HoverCard} draws: the trigger, portal, and card with
+ * optional arrow.
+ *
+ * @internal
+ */
+export declare const HoverCardAnatomy: ({ trigger, side, align, showArrow, children, passThrough, }: {
+    trigger?: React.ReactElement;
+    side?: Side;
+    align?: Align;
+    showArrow: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/hover-card/HoverCardAnatomy.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { Align, Side } from '../utils/popper.js';
+/**
+ * The anatomy a {@link HoverCard} draws: the trigger, portal, and card with
+ * optional arrow.
+ *
+ * @internal
+ */
+export declare const HoverCardAnatomy: ({ trigger, side, align, showArrow, children, passThrough, }: {
+    trigger?: React.ReactElement;
+    side?: Side;
+    align?: Align;
+    showArrow: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/hover-card/HoverCardContent.d.cts

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { HoverCardContentProps } from './types.cjs';
 /**
- * The card's floating panel, `data-state` (`open`/`closed`), positioned via
- * the shared popper layer against the trigger using `side` (defaults to
- * `'bottom'`) / `align` / `sideOffset` (defaults to `4`) / `alignOffset`,
- * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
- * `false`. Also exposes `data-side`/`data-align` reflecting the resolved
- * placement. Entering the content with the pointer cancels the pending close
- * timer; leaving it reschedules the close. Closes on Escape or on an outside
- * interaction: pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps it open. Mounts only while open
- * unless `forceMount` is set.
+ * Floating panel: pointer-only (no tabbable content; use `Popover` for interactive).
+ * Positioned via popper against trigger, flips/shifts to avoid viewport collisions.
+ * Entering cancels close timer; leaving reschedules. Closes on Escape or outside interaction.
  *
  * @example
  * ```tsx

package/dist/hover-card/HoverCardContent.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { HoverCardContentProps } from './types.js';
 /**
- * The card's floating panel, `data-state` (`open`/`closed`), positioned via
- * the shared popper layer against the trigger using `side` (defaults to
- * `'bottom'`) / `align` / `sideOffset` (defaults to `4`) / `alignOffset`,
- * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
- * `false`. Also exposes `data-side`/`data-align` reflecting the resolved
- * placement. Entering the content with the pointer cancels the pending close
- * timer; leaving it reschedules the close. Closes on Escape or on an outside
- * interaction: pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps it open. Mounts only while open
- * unless `forceMount` is set.
+ * Floating panel: pointer-only (no tabbable content; use `Popover` for interactive).
+ * Positioned via popper against trigger, flips/shifts to avoid viewport collisions.
+ * Entering cancels close timer; leaving reschedules. Closes on Escape or outside interaction.
  *
  * @example
  * ```tsx

package/dist/hover-card/HoverCardPortal.d.cts

@@ -1,8 +1,7 @@
 import type { HoverCardPortalProps } from './types.cjs';
 /**
- * Teleports `HoverCardContent` to `document.body` (or a custom `container`),
- * so the card escapes any clipping/`overflow` ancestors. Mounts only while
- * open unless `forceMount` is set.
+ * Teleports `HoverCardContent` to `document.body` (or custom `container`),
+ * escaping clipping/`overflow` ancestors. Mounts only while open unless `forceMount`.
  *
  * @example
  * ```tsx

package/dist/hover-card/HoverCardPortal.d.ts

@@ -1,8 +1,7 @@
 import type { HoverCardPortalProps } from './types.js';
 /**
- * Teleports `HoverCardContent` to `document.body` (or a custom `container`),
- * so the card escapes any clipping/`overflow` ancestors. Mounts only while
- * open unless `forceMount` is set.
+ * Teleports `HoverCardContent` to `document.body` (or custom `container`),
+ * escaping clipping/`overflow` ancestors. Mounts only while open unless `forceMount`.
  *
  * @example
  * ```tsx

package/dist/hover-card/HoverCardTrigger.d.cts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { HoverCardTriggerProps } from './types.cjs';
 /**
- * Link that reveals the card after `openDelay` on hover (ignored for touch
- * pointers) or immediately on focus, and doubles as the positioning anchor
- * for `HoverCardContent`. Sets `aria-describedby` (only while open) and
- * `data-state` (`open`/`closed`). Renders an `<a>` — pass `href` for it to
- * behave as a real link.
+ * Reveals the card on hover only (not touch, not focus). Renders `<a>` with
+ * `aria-describedby` (open only), `data-state`, and popper anchor. Pass `href`
+ * for a real link (required on touch since card never opens there).
  *
  * @example
  * ```tsx

package/dist/hover-card/HoverCardTrigger.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { HoverCardTriggerProps } from './types.js';
 /**
- * Link that reveals the card after `openDelay` on hover (ignored for touch
- * pointers) or immediately on focus, and doubles as the positioning anchor
- * for `HoverCardContent`. Sets `aria-describedby` (only while open) and
- * `data-state` (`open`/`closed`). Renders an `<a>` — pass `href` for it to
- * behave as a real link.
+ * Reveals the card on hover only (not touch, not focus). Renders `<a>` with
+ * `aria-describedby` (open only), `data-state`, and popper anchor. Pass `href`
+ * for a real link (required on touch since card never opens there).
  *
  * @example
  * ```tsx

package/dist/hover-card/index.d.cts

@@ -1,5 +1,2 @@
 export * from './HoverCard.cjs';
-export { HoverCardTrigger } from './HoverCardTrigger.cjs';
-export { HoverCardPortal } from './HoverCardPortal.cjs';
-export { HoverCardContent } from './HoverCardContent.cjs';
-export type { HoverCardProps, HoverCardTriggerProps, HoverCardPortalProps, HoverCardContentProps, } from './types.cjs';
+export type { HoverCardProps } from './types.cjs';

package/dist/hover-card/index.d.ts

@@ -1,5 +1,2 @@
 export * from './HoverCard.js';
-export { HoverCardTrigger } from './HoverCardTrigger.js';
-export { HoverCardPortal } from './HoverCardPortal.js';
-export { HoverCardContent } from './HoverCardContent.js';
-export type { HoverCardProps, HoverCardTriggerProps, HoverCardPortalProps, HoverCardContentProps, } from './types.js';
+export type { HoverCardProps } from './types.js';

package/dist/hover-card/primitives.d.cts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `HoverCard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from '@skdx/react/primitives/hover-card';
+ *
+ * <HoverCardRoot>
+ *   <HoverCardTrigger href="/users/kent">@kentcdodds</HoverCardTrigger>
+ *   <HoverCardPortal>
+ *     <HoverCardContent>
+ *       <p>Kent C. Dodds</p>
+ *       <HoverCardArrow />
+ *     </HoverCardContent>
+ *   </HoverCardPortal>
+ * </HoverCardRoot>
+ * ```
+ */
+export { HoverCardRoot, HoverCardArrow } from './HoverCard.cjs';
+export { HoverCardTrigger } from './HoverCardTrigger.cjs';
+export { HoverCardPortal } from './HoverCardPortal.cjs';
+export { HoverCardContent } from './HoverCardContent.cjs';
+export type { HoverCardRootProps } from './HoverCard.cjs';
+export type { HoverCardTriggerProps, HoverCardPortalProps, HoverCardContentProps } from './types.cjs';

package/dist/hover-card/primitives.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `HoverCard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from '@skdx/react/primitives/hover-card';
+ *
+ * <HoverCardRoot>
+ *   <HoverCardTrigger href="/users/kent">@kentcdodds</HoverCardTrigger>
+ *   <HoverCardPortal>
+ *     <HoverCardContent>
+ *       <p>Kent C. Dodds</p>
+ *       <HoverCardArrow />
+ *     </HoverCardContent>
+ *   </HoverCardPortal>
+ * </HoverCardRoot>
+ * ```
+ */
+export { HoverCardRoot, HoverCardArrow } from './HoverCard.js';
+export { HoverCardTrigger } from './HoverCardTrigger.js';
+export { HoverCardPortal } from './HoverCardPortal.js';
+export { HoverCardContent } from './HoverCardContent.js';
+export type { HoverCardRootProps } from './HoverCard.js';
+export type { HoverCardTriggerProps, HoverCardPortalProps, HoverCardContentProps } from './types.js';

package/dist/hover-card/types.d.cts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
-import type { PopperContentProps } from '../utils/popper.cjs';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { Align, PopperContentProps, Side } from '../utils/popper.cjs';
 import type { PortalProps } from '../utils/portal.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
@@ -9,8 +10,6 @@ export interface HoverCardContextValue {
     open: boolean;
     triggerRef: React.RefObject<HTMLAnchorElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
-    /** Set right before programmatically refocusing the trigger after a dismiss, so the trigger's onFocus doesn't reopen it. */
-    ignoreNextFocusRef: React.RefObject<boolean>;
     onOpen: () => void;
     onClose: () => void;
     onTriggerEnter: () => void;
@@ -18,16 +17,41 @@ export interface HoverCardContextValue {
     onContentEnter: () => void;
     onContentLeave: () => void;
 }
-/** Props for the {@link HoverCard} root. */
-export interface HoverCardProps {
+/**
+ * Props for the {@link HoverCard} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `HoverCardContent` panel.
+ */
+export interface HoverCardProps extends PassThroughProps {
     /**
-     * The trigger and portal — the card's own DOM (content) is rendered by
-     * {@link HoverCardPortal} elsewhere.
+     * Card body content for derived anatomy, or full manual composition tree.
      * @default undefined — renders nothing if omitted.
      */
     children?: React.ReactNode;
     /**
-     * Whether the card is open, for controlled usage. Pair with `onOpenChange`.
+     * Trigger element; adds `aria-describedby` via `asChild` (ignored with manual composition).
+     * @default undefined — no derived trigger renders.
+     */
+    trigger?: React.ReactElement;
+    /**
+     * Which side of the trigger the derived card opens on. Only read when
+     * `children` is plain body content.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment of the derived card along `side`. Only read when `children`
+     * is plain body content.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * Whether the derived card renders a `HoverCardArrow` pointing back at the
+     * trigger. Only read when `children` is plain body content.
+     * @default false
+     */
+    showArrow?: boolean;
+    /**
+     * Whether the card is open (controlled usage; pair with `onOpenChange`).
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
     open?: boolean;
@@ -49,7 +73,8 @@ export interface HoverCardProps {
      */
     onOpenChangeComplete?: (open: boolean) => void;
     /**
-     * Delay before the card opens on pointer enter (ms).
+     * Delay before the card opens on pointer enter (ms). Hover is the only
+     * activation there is — focus does not open the card.
      * @default 700
      */
     openDelay?: number;
@@ -59,8 +84,13 @@ export interface HoverCardProps {
      * @default 300
      */
     closeDelay?: number;
+    /**
+     * Disables the card; pointer enter does nothing and `aria-describedby` is unset.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for {@link HoverCardTrigger}, the link that reveals the card on hover/focus and anchors its position. */
+/** Props for {@link HoverCardTrigger}, the link that reveals the card on hover and anchors its position. */
 export interface HoverCardTriggerProps extends PrimitivePropsWithRef<'a'> {
 }
 /** Props for {@link HoverCardPortal}, which teleports its children to `document.body`. */
@@ -97,12 +127,12 @@ export interface HoverCardContentProps extends PopperContentProps {
      */
     onPointerDownOutside?: (event: PointerEvent) => void;
     /**
-     * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the card from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * Fires when focus moves outside. Call `event.preventDefault()` to stop closing (receives stand-in for uncancelable `focusin`).
      * @default undefined — no-op if omitted.
      */
     onFocusOutside?: (event: FocusOutsideEvent) => void;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * Fires for pointer-down or focus outside, before specific handlers, with same event.
      * @default undefined — no-op if omitted.
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;

package/dist/hover-card/types.d.ts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
-import type { PopperContentProps } from '../utils/popper.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { Align, PopperContentProps, Side } from '../utils/popper.js';
 import type { PortalProps } from '../utils/portal.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
@@ -9,8 +10,6 @@ export interface HoverCardContextValue {
     open: boolean;
     triggerRef: React.RefObject<HTMLAnchorElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
-    /** Set right before programmatically refocusing the trigger after a dismiss, so the trigger's onFocus doesn't reopen it. */
-    ignoreNextFocusRef: React.RefObject<boolean>;
     onOpen: () => void;
     onClose: () => void;
     onTriggerEnter: () => void;
@@ -18,16 +17,41 @@ export interface HoverCardContextValue {
     onContentEnter: () => void;
     onContentLeave: () => void;
 }
-/** Props for the {@link HoverCard} root. */
-export interface HoverCardProps {
+/**
+ * Props for the {@link HoverCard} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `HoverCardContent` panel.
+ */
+export interface HoverCardProps extends PassThroughProps {
     /**
-     * The trigger and portal — the card's own DOM (content) is rendered by
-     * {@link HoverCardPortal} elsewhere.
+     * Card body content for derived anatomy, or full manual composition tree.
      * @default undefined — renders nothing if omitted.
      */
     children?: React.ReactNode;
     /**
-     * Whether the card is open, for controlled usage. Pair with `onOpenChange`.
+     * Trigger element; adds `aria-describedby` via `asChild` (ignored with manual composition).
+     * @default undefined — no derived trigger renders.
+     */
+    trigger?: React.ReactElement;
+    /**
+     * Which side of the trigger the derived card opens on. Only read when
+     * `children` is plain body content.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment of the derived card along `side`. Only read when `children`
+     * is plain body content.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * Whether the derived card renders a `HoverCardArrow` pointing back at the
+     * trigger. Only read when `children` is plain body content.
+     * @default false
+     */
+    showArrow?: boolean;
+    /**
+     * Whether the card is open (controlled usage; pair with `onOpenChange`).
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
     open?: boolean;
@@ -49,7 +73,8 @@ export interface HoverCardProps {
      */
     onOpenChangeComplete?: (open: boolean) => void;
     /**
-     * Delay before the card opens on pointer enter (ms).
+     * Delay before the card opens on pointer enter (ms). Hover is the only
+     * activation there is — focus does not open the card.
      * @default 700
      */
     openDelay?: number;
@@ -59,8 +84,13 @@ export interface HoverCardProps {
      * @default 300
      */
     closeDelay?: number;
+    /**
+     * Disables the card; pointer enter does nothing and `aria-describedby` is unset.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for {@link HoverCardTrigger}, the link that reveals the card on hover/focus and anchors its position. */
+/** Props for {@link HoverCardTrigger}, the link that reveals the card on hover and anchors its position. */
 export interface HoverCardTriggerProps extends PrimitivePropsWithRef<'a'> {
 }
 /** Props for {@link HoverCardPortal}, which teleports its children to `document.body`. */
@@ -97,12 +127,12 @@ export interface HoverCardContentProps extends PopperContentProps {
      */
     onPointerDownOutside?: (event: PointerEvent) => void;
     /**
-     * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the card from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * Fires when focus moves outside. Call `event.preventDefault()` to stop closing (receives stand-in for uncancelable `focusin`).
      * @default undefined — no-op if omitted.
      */
     onFocusOutside?: (event: FocusOutsideEvent) => void;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * Fires for pointer-down or focus outside, before specific handlers, with same event.
      * @default undefined — no-op if omitted.
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;

package/dist/image/Image.cjs

@@ -0,0 +1 @@
+"use strict";var z=Object.create;var l=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of W(t))!A.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(i=F(t,r))||i.enumerable});return e};var D=(e,t,a)=>(a=e!=null?z(q(e)):{},y(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),G=e=>y(l({},"__esModule",{value:!0}),e);var J={};B(J,{Image:()=>P});module.exports=G(J);var o=D(require("react"),1),I=require("../utils/composeRefs.cjs"),g=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),R=require("../utils/useCallbackRef.cjs"),f=require("react/jsx-runtime"),P=o.forwardRef(({onLoadingStatusChange:e=()=>{},src:t,srcSet:a,sizes:i,alt:r,loading:S="lazy",decoding:L="async",fetchPriority:h="auto",fit:E,position:C,fallback:u,style:b,onLoad:v,onError:H,...c},N)=>{let[d,k]=o.useState("idle"),s=(0,R.useCallbackRef)(m=>{k(m),e(m)}),p=o.useRef(null),x=(0,I.useComposedRefs)(N,p);o.useLayoutEffect(()=>{if(!t){s("idle");return}let m=p.current;if(m?.complete){s(m.naturalWidth>0?"loaded":"error");return}s("loading")},[t,a,i,s]);let M=(0,n.composeEventHandlers)(v,()=>{d!=="error"&&s("loaded")}),T=(0,n.composeEventHandlers)(H,()=>s("error")),j=(0,g.skdxPart)("image","root",c.className);if(d==="error"&&u!==void 0)return(0,f.jsx)(n.Primitive.span,{"data-loading-status":d,...(0,g.skdxPart)("image","fallback",c.className),children:u});let w={objectFit:E,objectPosition:C,...b};return(0,f.jsx)(n.Primitive.img,{src:t,srcSet:a,sizes:i,alt:r,loading:S,decoding:L,fetchPriority:h,"data-loading-status":d,...c,style:w,onLoad:M,onError:T,...j,ref:x})});P.displayName="Image";0&&(module.exports={Image});

package/dist/image/Image.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { ImageProps } from './types.cjs';
+/**
+ * Renders `<img>` unconditionally and drives status off its own load/error
+ * events — unlike `AvatarImage`'s off-DOM probe, which would trigger a
+ * second fetch and defeat `loading="lazy"`.
+ *
+ * @example
+ * ```tsx
+ * <Image src="/hero.jpg" alt="Product hero shot" fit="cover" fallback={<Placeholder />} />
+ * ```
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/image/Image.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { ImageProps } from './types.js';
+/**
+ * Renders `<img>` unconditionally and drives status off its own load/error
+ * events — unlike `AvatarImage`'s off-DOM probe, which would trigger a
+ * second fetch and defeat `loading="lazy"`.
+ *
+ * @example
+ * ```tsx
+ * <Image src="/hero.jpg" alt="Product hero shot" fit="cover" fallback={<Placeholder />} />
+ * ```
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/image/Image.js

@@ -0,0 +1 @@
+import*as e from"react";import{useComposedRefs as M}from"../utils/composeRefs.js";import{skdxPart as l}from"../utils/part.js";import{composeEventHandlers as c,Primitive as g}from"../utils/primitive.js";import{useCallbackRef as T}from"../utils/useCallbackRef.js";import{jsx as f}from"react/jsx-runtime";var j=e.forwardRef(({onLoadingStatusChange:u=()=>{},src:r,srcSet:n,sizes:i,alt:p,loading:y="lazy",decoding:I="async",fetchPriority:R="auto",fit:P,position:S,fallback:m,style:L,onLoad:h,onError:E,...s},C)=>{let[o,b]=e.useState("idle"),t=T(a=>{b(a),u(a)}),d=e.useRef(null),v=M(C,d);e.useLayoutEffect(()=>{if(!r){t("idle");return}let a=d.current;if(a?.complete){t(a.naturalWidth>0?"loaded":"error");return}t("loading")},[r,n,i,t]);let H=c(h,()=>{o!=="error"&&t("loaded")}),N=c(E,()=>t("error")),k=l("image","root",s.className);if(o==="error"&&m!==void 0)return f(g.span,{"data-loading-status":o,...l("image","fallback",s.className),children:m});let x={objectFit:P,objectPosition:S,...L};return f(g.img,{src:r,srcSet:n,sizes:i,alt:p,loading:y,decoding:I,fetchPriority:R,"data-loading-status":o,...s,style:x,onLoad:H,onError:N,...k,ref:v})});j.displayName="Image";export{j as Image};

package/dist/image/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Image.cjs';
+export type { ImageLoadingStatus, ImageProps } from './types.cjs';

package/dist/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Image.js';
+export type { ImageLoadingStatus, ImageProps } from './types.js';

package/dist/image/types.d.cts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { ImageLoadingStatus } from '../avatar/types.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+export type { ImageLoadingStatus };
+/** Props for the {@link Image} root image element. */
+export interface ImageProps extends Omit<PrimitivePropsWithRef<'img'>, 'alt'> {
+    /** Accessible description of the image; pass `""` to opt out for a purely decorative one. */
+    alt: string;
+    /**
+     * `object-fit`, emitted as an inline declaration.
+     * @default undefined — no inline declaration.
+     */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * `object-position`, emitted as an inline declaration.
+     * @default undefined — no inline declaration.
+     */
+    position?: string;
+    /**
+     * Rendered instead of the `<img>` once loading fails.
+     * @default undefined — the failed `<img>` is left in place.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Fires whenever the image's loading status changes.
+     * @default undefined — no-op if omitted.
+     */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}