@skdx/react 0.28.0 → 0.29.0

package/dist/dropdown-menu/types.d.ts

@@ -1,357 +0,0 @@
-import type * as React from 'react';
-import type { MenuSubContentProps, MenuSubProps, MenuSubTriggerProps } from '../utils/menuSub.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 { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
-/**
- * Menu entry: plain action item, separator, checkbox, radio group, or submenu.
- */
-export type MenuItem = {
-    label: string;
-    /**
-     * Called when item is activated; fires before recipe's `onSelect`.
-     * @default undefined — no-op if omitted.
-     */
-    onSelect?: () => void;
-    /**
-     * Keyboard hint rendered as `DropdownMenuShortcut`; aria-hidden.
-     * @default undefined — no shortcut is rendered.
-     */
-    shortcut?: string;
-    /**
-     * Marks item aria-disabled; blocks selection, stays focusable.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Text for typeahead matching; reflected to `data-text-value`.
-     * @default undefined — the item's rendered text is used.
-     */
-    textValue?: string;
-} | {
-    /** Renders a horizontal rule separating item groups. */
-    type: 'separator';
-} | {
-    type: 'checkbox';
-    label: string;
-    /**
-     * Checked state, always externally controlled via `onCheckedChange`.
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * Fires with new checked state when item is selected.
-     * @default undefined — no-op if omitted.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Keyboard hint rendered as `DropdownMenuShortcut`; aria-hidden.
-     * @default undefined — no shortcut is rendered.
-     */
-    shortcut?: string;
-    /**
-     * Marks item aria-disabled; blocks selection, stays focusable.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Text for typeahead matching; reflected to `data-text-value`.
-     * @default undefined — the item's rendered text is used.
-     */
-    textValue?: string;
-} | {
-    type: 'radio-group';
-    /**
-     * Selected option's `value`, externally controlled.
-     * @default undefined — no option is selected.
-     */
-    value?: string;
-    /**
-     * Fires with newly selected option's `value`.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string) => void;
-    items: {
-        label: string;
-        /** Compared against group's `value` for checked state and `onValueChange`. */
-        value: string;
-        /**
-         * Marks option aria-disabled; blocks selection, stays focusable.
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * Text for typeahead matching; reflected to `data-text-value`.
-         * @default undefined — the option's rendered text is used.
-         */
-        textValue?: string;
-    }[];
-} | {
-    type: 'submenu';
-    label: string;
-    items: MenuItem[];
-    /**
-     * Marks SubTrigger aria-disabled; blocks submenu open, stays focusable.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Text for typeahead matching on SubTrigger.
-     * @default undefined — the trigger's rendered text is used.
-     */
-    textValue?: string;
-} | {
-    type: 'group';
-    /**
-     * Heading rendered as `DropdownMenuLabel`; the only accessible name for the group.
-     * @default undefined — the group is rendered unnamed.
-     */
-    label?: string;
-    items: MenuItem[];
-};
-/** Which end of item list the opening key asks focus to land: `first` (Enter/Space/ArrowDown) or `last` (ArrowUp). */
-export type DropdownMenuOpenIntent = 'first' | 'last';
-/** @internal Shared state distributed from {@link DropdownMenu} to its parts via context. */
-export interface DropdownMenuContextValue {
-    triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    contentId: string;
-    /** Trigger's id; Content's `aria-labelledby` points at it for proper menu naming. */
-    triggerId: string;
-    open: boolean;
-    modal: boolean;
-    closeOnSelect: boolean;
-    onOpenChange: (open: boolean) => void;
-    /** Returns focus to Trigger, lifting `modal` inertness so trigger can receive it. */
-    focusTrigger: () => void;
-    /** Content's `onCloseAutoFocus` handler; ref so root can own focus movement. */
-    closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
-    /** Which end of menu the last open request asked for; ref read by Content's open effect. */
-    openIntentRef: React.RefObject<DropdownMenuOpenIntent>;
-    /** Resolved writing direction for portalled content via DirectionProvider or DOM attribute. */
-    dir: string;
-}
-/**
- * Props for the {@link DropdownMenu} recipe.
- * No `children`: the menu is `trigger` plus `items`. Use primitives for manual composition.
- */
-export interface DropdownMenuProps extends PassThroughProps {
-    /**
-     * Element that opens the menu; decorated via `asChild` and merged directly.
-     * @default undefined — no trigger renders.
-     */
-    trigger?: React.ReactElement;
-    /**
-     * Menu's entries rendered into the `DropdownMenuContent` panel.
-     * @default undefined — an empty menu.
-     */
-    items?: MenuItem[];
-    /**
-     * Fires with the activated entry after its own callback.
-     * @default undefined — no-op if omitted.
-     */
-    onSelect?: (item: MenuItem) => void;
-    /**
-     * Which side of trigger the panel opens on.
-     * @default 'bottom'
-     */
-    side?: Side;
-    /**
-     * Alignment of the automatically rendered menu panel relative to the `side` it opens on.
-     * @default 'start'
-     */
-    align?: Align;
-    /**
-     * Render item contents in place of label; not called for separators or groups.
-     * @default undefined — the entry's `label` is rendered.
-     */
-    renderItem?: (item: MenuItem) => React.ReactNode;
-    /**
-     * Whether menu is open; for controlled usage pair with `onOpenChange`.
-     * @default undefined — uncontrolled.
-     */
-    open?: boolean;
-    /**
-     * Whether menu is initially open for uncontrolled usage.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * Whether open menu marks outside content inert and locks body scroll.
-     * Tab closes menu per the WAI-ARIA pattern; focus is not trapped.
-     * @default true
-     */
-    modal?: boolean;
-    /**
-     * Whether selecting an item closes the menu; override per item.
-     * Checkbox items stay open by default; either item's setting or `preventDefault()` can veto.
-     * @default true
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Fires with new open state whenever menu opens or closes.
-     * @default undefined — no-op if omitted.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Fires once open state change finishes on screen, after animation ends.
-     * Use this for work that must not race the transition; `onOpenChange` fires immediately.
-     * @default undefined — no-op if omitted.
-     */
-    onOpenChangeComplete?: (open: boolean) => void;
-}
-/** Props for {@link DropdownMenuTrigger}. */
-export interface DropdownMenuTriggerProps extends PrimitivePropsWithRef<'button'> {
-}
-/** Props for {@link DropdownMenuPortal}; teleports children to `document.body`. */
-export interface DropdownMenuPortalProps extends PortalProps {
-    /**
-     * Render portal while menu is closed instead of unmounting; for animation libraries.
-     * @default false
-     */
-    forceMount?: boolean;
-}
-/** Props for {@link DropdownMenuContent}; extends popper positioning props. */
-export interface DropdownMenuContentProps extends PopperContentProps {
-    /**
-     * Keep panel mounted while closed for animation libraries needing outgoing content.
-     * @default false
-     */
-    forceMount?: boolean;
-    /**
-     * Whether Up/Down arrow-key navigation wraps from last item to first.
-     * @default true
-     */
-    loop?: boolean;
-    /**
-     * Fires when Escape is pressed while menu is open; call `preventDefault()` to stop close.
-     * @default undefined — no-op if omitted.
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Fires on pointer-down outside content; call `preventDefault()` to stop close.
-     * @default undefined — no-op if omitted.
-     */
-    onPointerDownOutside?: (event: PointerEvent) => void;
-    /**
-     * Fires when focus moves outside content; call `preventDefault()` to stop close.
-     * Event carries original `focusin` event as `detail`.
-     * @default undefined — no-op if omitted.
-     */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
-    /**
-     * Fires for either outside interaction (pointer-down or focus); before specific handlers above.
-     * One `preventDefault()` here vetoes dismissal whichever way triggered.
-     * @default undefined — no-op if omitted.
-     */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
-    /**
-     * Fires just before focus returns to trigger as menu closes; call `preventDefault()` to suppress.
-     * @default undefined — no-op if omitted.
-     */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
-}
-/** Props for a single {@link DropdownMenuItem}. */
-export interface DropdownMenuItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
-    /**
-     * Tag name from library's allowlist instead of default `<div>`. Use `asChild` for elements needing own attributes.
-     * @default 'div'
-     */
-    as?: PolymorphicTag;
-    /**
-     * Marks item aria-disabled; blocks selection, stays focusable.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Text for typeahead matching; reflected to `data-text-value`.
-     * Required for items rendering more than label or icon-only items.
-     * @default undefined — the item's rendered text is used.
-     */
-    textValue?: string;
-    /**
-     * Called when item is activated; call `preventDefault()` to keep menu open.
-     * @default undefined — no-op if omitted.
-     */
-    onSelect?: (event: Event) => void;
-    /**
-     * Whether selecting this item closes menu, overriding root's `closeOnSelect`.
-     * Item setting or `preventDefault()` can each veto closing independently.
-     * @default undefined — inherits root's `closeOnSelect`.
-     */
-    closeOnSelect?: boolean;
-}
-/** Props for {@link DropdownMenuCheckboxItem}, a toggleable menu item. */
-export interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
-    /**
-     * Whether the item is checked, mirroring the checkbox's checked/unchecked visual state.
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * Fires with the new checked state when the item is selected.
-     * @default undefined — no-op if omitted.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Whether selecting this item closes the menu.
-     * Unlike other item types, checkbox items stay open by default — they exist to toggle multiple times.
-     * @default false
-     */
-    closeOnSelect?: boolean;
-}
-/** @internal Shared selected-value state distributed from {@link DropdownMenuRadioGroup} to its `DropdownMenuRadioItem`s via context. Not part of the public API. */
-export interface MenuRadioGroupContextValue {
-    value?: string;
-    onValueChange?: (value: string) => void;
-}
-/** Props for {@link DropdownMenuRadioGroup}, a container coordinating a set of mutually-exclusive `DropdownMenuRadioItem`s. */
-export interface DropdownMenuRadioGroupProps extends PrimitivePropsWithRef<'div'> {
-    /**
-     * Selected item's value; compared against each radio item's own `value`.
-     * @default undefined — no item is selected.
-     */
-    value?: string;
-    /**
-     * Fires with the new value when a `DropdownMenuRadioItem` in this group is selected.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string) => void;
-}
-/** Props for a single {@link DropdownMenuRadioItem} inside a `DropdownMenuRadioGroup`. */
-export interface DropdownMenuRadioItemProps extends DropdownMenuItemProps {
-    /** Unique identifier compared against the group's selected `value`. */
-    value: string;
-}
-/** Props for {@link DropdownMenuItemIndicator}, the checked-state glyph inside a checkbox/radio item. */
-export interface DropdownMenuItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
-    /**
-     * Keep indicator mounted while unchecked for animation libraries needing outgoing content.
-     * @default false
-     */
-    forceMount?: boolean;
-}
-/** Props for {@link DropdownMenuGroup}, a semantic grouping of related items. */
-export interface DropdownMenuGroupProps extends PrimitivePropsWithRef<'div'> {
-}
-/** Props for {@link DropdownMenuLabel}, a non-interactive heading for a group of items. */
-export interface DropdownMenuLabelProps extends PrimitivePropsWithRef<'div'> {
-}
-/** Props for {@link DropdownMenuSeparator}, a visual divider between items or groups. */
-export interface DropdownMenuSeparatorProps extends PrimitivePropsWithRef<'div'> {
-}
-/** Props for {@link DropdownMenuShortcut}, the keyboard hint at an item's trailing edge. */
-export interface DropdownMenuShortcutProps extends PrimitivePropsWithRef<'span'> {
-}
-/** Props for {@link DropdownMenuSub}, the root of a nested submenu. */
-export interface DropdownMenuSubProps extends MenuSubProps {
-}
-/** Props for {@link DropdownMenuSubTrigger}, the parent-menu item that opens a submenu and anchors it. */
-export interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {
-}
-/** Props for {@link DropdownMenuSubContent}, the submenu's floating panel. */
-export interface DropdownMenuSubContentProps extends MenuSubContentProps {
-}

package/dist/hover-card/HoverCard.cjs

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

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

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-import type { HoverCardContextValue, HoverCardProps } from './types.cjs';
-export declare const HoverCardRootProvider: {
-    (props: HoverCardContextValue & {
-        children: React.ReactNode;
-    }): 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
- * down to `HoverCardTrigger` / `HoverCardPortal` / `HoverCardContent` /
- * `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
- * trigger: `HoverCardContent` listens for it on the document while open, so a
- * card opened by hover is dismissable even when keyboard focus is elsewhere
- * (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 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>
- *       <p>Kent C. Dodds</p>
- *       <HoverCardArrow />
- *     </HoverCardContent>
- *   </HoverCardPortal>
- * </HoverCardRoot>
- * ```
- */
-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;
-}
-/**
- * Optional visual arrow pointing from `HoverCardContent` back at the
- * trigger. Must be rendered inside `HoverCardContent`; self-positions based
- * on the resolved `side`.
- *
- * @example
- * ```tsx
- * <HoverCardContent>
- *   <p>Kent C. Dodds</p>
- *   <HoverCardArrow />
- * </HoverCardContent>
- * ```
- */
-export declare const HoverCardArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { HoverCardContextValue, HoverCardProps } from './types.js';
-export declare const HoverCardRootProvider: {
-    (props: HoverCardContextValue & {
-        children: React.ReactNode;
-    }): 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
- * down to `HoverCardTrigger` / `HoverCardPortal` / `HoverCardContent` /
- * `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
- * trigger: `HoverCardContent` listens for it on the document while open, so a
- * card opened by hover is dismissable even when keyboard focus is elsewhere
- * (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 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>
- *       <p>Kent C. Dodds</p>
- *       <HoverCardArrow />
- *     </HoverCardContent>
- *   </HoverCardPortal>
- * </HoverCardRoot>
- * ```
- */
-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;
-}
-/**
- * Optional visual arrow pointing from `HoverCardContent` back at the
- * trigger. Must be rendered inside `HoverCardContent`; self-positions based
- * on the resolved `side`.
- *
- * @example
- * ```tsx
- * <HoverCardContent>
- *   <p>Kent C. Dodds</p>
- *   <HoverCardArrow />
- * </HoverCardContent>
- * ```
- */
-export declare const HoverCardArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/hover-card/HoverCard.js

@@ -1 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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 +0,0 @@
-import * as React from 'react';
-import type { HoverCardContentProps } from './types.cjs';
-/**
- * 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
- * <HoverCardPortal>
- *   <HoverCardContent side="bottom" align="start">
- *     <p>Kent C. Dodds</p>
- *     <HoverCardArrow />
- *   </HoverCardContent>
- * </HoverCardPortal>
- * ```
- */
-export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { HoverCardContentProps } from './types.js';
-/**
- * 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
- * <HoverCardPortal>
- *   <HoverCardContent side="bottom" align="start">
- *     <p>Kent C. Dodds</p>
- *     <HoverCardArrow />
- *   </HoverCardContent>
- * </HoverCardPortal>
- * ```
- */
-export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,19 +0,0 @@
-import type { HoverCardPortalProps } from './types.cjs';
-/**
- * Teleports `HoverCardContent` to `document.body` (or custom `container`),
- * escaping clipping/`overflow` ancestors. Mounts only while open unless `forceMount`.
- *
- * @example
- * ```tsx
- * <HoverCard>
- *   <HoverCardTrigger href="/users/kent">@kentcdodds</HoverCardTrigger>
- *   <HoverCardPortal>
- *     <HoverCardContent>…</HoverCardContent>
- *   </HoverCardPortal>
- * </HoverCard>
- * ```
- */
-export declare const HoverCardPortal: {
-    ({ forceMount, children, ...props }: HoverCardPortalProps): import("react").JSX.Element | null;
-    displayName: string;
-};