CSS Recipes only apply if components have specific names (menu, dialog, tooltip)

[leoreisdias]

Hello,

I have noticed a significant issue with the CSS recipes in ParkUI. After some tests, it seems that the recipes for menu, dialog, and tooltip only take effect if the component I create has exactly these names.

For example, I wanted to create a simple tooltip that only needs to receive a child and text:

import { createStyleContext } from "@/providers/parkui";
import type { Assign } from "@ark-ui/react";
import { Tooltip as ArkTooltip } from "@ark-ui/react/tooltip";
import { ReactNode } from "react";
import { type TooltipVariantProps, tooltip } from "styled-system/recipes";
import type { JsxStyleProps } from "styled-system/types";

const { withRootProvider, withContext } = createStyleContext(tooltip);

export interface RootProps extends ArkTooltip.RootProps, TooltipVariantProps {}
export const Root = withRootProvider<RootProps>(ArkTooltip.Root);

export const Arrow = withContext<
  HTMLDivElement,
  Assign<JsxStyleProps, ArkTooltip.ArrowProps>
>(ArkTooltip.Arrow, "arrow");

export const ArrowTip = withContext<
  HTMLDivElement,
  Assign<JsxStyleProps, ArkTooltip.ArrowTipProps>
>(ArkTooltip.ArrowTip, "arrowTip");

export const Content = withContext<
  HTMLDivElement,
  Assign<JsxStyleProps, ArkTooltip.ContentProps>
>(ArkTooltip.Content, "content");

export const Positioner = withContext<
  HTMLDivElement,
  Assign<JsxStyleProps, ArkTooltip.PositionerProps>
>(ArkTooltip.Positioner, "positioner");

export const Trigger = withContext<
  HTMLButtonElement,
  Assign<JsxStyleProps, ArkTooltip.TriggerProps>
>(ArkTooltip.Trigger, "trigger");

export {
  TooltipContext as Context,
  type TooltipContextProps as ContextProps,
} from "@ark-ui/react/tooltip";

export const Tooltip = (props: ArkTooltip.RootProps & { text: string }) => (
  <Root {...props} openDelay={500}>
    <Trigger asChild>{props.children as ReactNode}</Trigger>
    <Positioner>
      <Arrow>
        <ArrowTip />
      </Arrow>
      <Content>{props.text}</Content>
    </Positioner>
  </Root>
);

Creating it this way works very well, but if I name the component something other than "Tooltip", the panda-css stops generating the CSS for the "tooltip" slotRecipe. This behavior limits the flexibility in naming components and affects the usability of the library.

Expected behavior:

The CSS recipes should be applied regardless of the component names, allowing developers to name their components freely without losing styling functionality.

Actual behavior:

The CSS recipes for menu, dialog, and tooltip only take effect if the component names are exactly "menu", "dialog", or "tooltip". Renaming these components causes the CSS not to be generated.

[spd789562]

Same problem here also drawer do this, and it can't even use type Alias like import { Drawer as LoginDrawer }, but as long as the final JSX name is Drawer, it work fin, like import { LoginDrawer as Drawer } can normally import css

[spd789562]

Seems the only way is extend the panda css for new jsx names, it kinda not parkUI's fault see panda#1749