Hover Card Slot Recipe (recipes/hover-card.ts)

Provides styling slots and size variants for Chakra's hover card component with animation states.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
import { hoverCardAnatomy } from "../../anatomy"
import { defineSlotRecipe } from "../../styled-system"

export const hoverCardSlotRecipe = defineSlotRecipe({
  className: "chakra-hover-card",
  slots: hoverCardAnatomy.keys(),
  base: {
    content: {
      position: "relative",
      display: "flex",
      flexDirection: "column",
      textStyle: "sm",
      "--hovercard-bg": "colors.bg.panel",
      bg: "var(--hovercard-bg)",
      boxShadow: "lg",
      maxWidth: "80",
      borderRadius: "l3",
      "--hover-card-z-index": "zIndex.popover",
      zIndex: "calc(var(--hover-card-z-index) + var(--layer-index, 0))",
      

... (truncated -- full source via MCP)