How to create "as" prop

[Zyr0nX]

I want to create a custom heading component and wonder how I can implement "as" prop like chakra-ui. I tried to dig into chakra source code but no luck. Is there a way to do this with current ark-ui? my current implement is like below, and obviously it doesn't work, but it shows what I want to achieve

import { ark, HTMLArkProps } from "@ark-ui/react/factory";
import { tv, type VariantProps } from "tailwind-variants";
import { styled } from "~/lib/styled.tsx";
import { ElementType } from "react";

type HeadingVariantProps = VariantProps<typeof styles>;
export type HeadingProps = HeadingVariantProps &
  HTMLArkProps<"h2"> & { as: ElementType };

const styles = tv({
  base: "heading",
  defaultVariants: { size: "md" },
  variants: {
    size: {
      sm: "heading--size_sm",
      md: "heading--size_md",
      lg: "heading--size_lg",
      xl: "heading--size_xl",
    },
  },
});

export const Heading = ({ as }: HeadingProps) => {
  return styled<HeadingProps>(ark.as, styles);
};