feat: create toolip

Author: codebender828

packages/c-tooltip/examples/simple-c-tooltip.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { CTooltip, CTooltipTrigger, CTooltipContent } from "../src"
+import { CTag } from "../../vue/src"
+</script>
+
+<template>
+  <c-tooltip>
+    <c-tooltip-trigger>
+      <c-tag> Hover me </c-tag>
+    </c-tooltip-trigger>
+    <c-tooltip-content>Tooltip content</c-tooltip-content>
+  </c-tooltip>
+</template>

packages/c-tooltip/examples/simple-tooltip.vue

@@ -34,6 +34,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
+    "@chakra-ui/c-tooltip": "workspace:*",
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",

packages/c-tooltip/package.json

@@ -1,4 +1,4 @@
-import { computed, defineComponent, watchEffect } from "vue"
+import { computed, defineComponent } from "vue"
 import { useTooltipContext } from "./tooltip.context"
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
 

packages/c-tooltip/src/c-tooltip-arrow.tsx

@@ -0,0 +1,40 @@
+import { computed, defineComponent, mergeProps } from "vue"
+import { useTooltipContext } from "./tooltip.context"
+import {
+  HTMLChakraProps,
+  ThemingProps,
+  chakra,
+  useStyleConfig,
+} from "@chakra-ui/vue-system"
+import { CTooltipPositioner } from "./c-tooltip-positioner"
+import { filterUndefined } from "@chakra-ui/utils"
+import { vueThemingProps } from "@chakra-ui/vue-utils"
+
+export type CTooltipContentProps = HTMLChakraProps<"div">
+export const CTooltipContent = defineComponent({
+  name: "CTooltipContent",
+  props: vueThemingProps,
+  setup(props, { slots, attrs }) {
+    const api = useTooltipContext()
+
+    const mergedProps = computed(() => mergeProps(props, attrs))
+    const themingProps = computed<ThemingProps>(() =>
+      filterUndefined({
+        colorScheme: mergedProps.value.colorScheme,
+        variant: mergedProps.value.variant,
+        size: mergedProps.value.size,
+        styleConfig: mergedProps.value.styleConfig,
+      })
+    )
+    console.log("styles", themingProps.value)
+    const styles = useStyleConfig("Tooltip", themingProps.value)
+
+    return () => (
+      <CTooltipPositioner>
+        <chakra.div __css={styles.value} {...api.value.contentProps} {...attrs}>
+          {slots.default?.()}
+        </chakra.div>
+      </CTooltipPositioner>
+    )
+  },
+})

packages/c-tooltip/src/c-tooltip-content.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, watchEffect } from "vue"
+import { computed, defineComponent } from "vue"
 import { useTooltipContext } from "./tooltip.context"
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
 

packages/c-tooltip/src/c-tooltip-positioner.tsx

@@ -0,0 +1,15 @@
+import { computed, defineComponent } from "vue"
+import { useTooltipContext } from "./tooltip.context"
+import { withSingleton } from "@chakra-ui/vue-utils"
+
+export const CTooltipTrigger = defineComponent({
+  name: "CTooltipTrigger",
+  setup(_, { slots, attrs }) {
+    const api = useTooltipContext()
+    return () =>
+      withSingleton(slots, "CPopoverTrigger", {
+        ...api.value.triggerProps,
+        ...attrs,
+      })
+  },
+})

packages/c-tooltip/src/c-tooltip-trigger.tsx

@@ -9,7 +9,6 @@
  */
 
 import { computed, defineComponent, h, Fragment, PropType } from "vue"
-import { chakra, DOMElements } from "@chakra-ui/vue-system"
 import { TooltipProvider } from "./tooltip.context"
 import { useTooltip, UseTooltipProps } from "./use-tooltip"
 import type * as PP from "@zag-js/popper"

packages/c-tooltip/src/c-tooltip.tsx

@@ -1 +1,14 @@
 export { CTooltip, type CTooltipProps } from "./c-tooltip"
+export { CTooltipArrow, type CTooltipArrowProps } from "./c-tooltip-arrow"
+export {
+  CTooltipPositioner,
+  type CTooltipPositionerProps,
+} from "./c-tooltip-positioner"
+export { tooltipAnatomy } from "./tooltip.anatomy"
+export {
+  useTooltip,
+  type UseTooltipProps,
+  type UseTooltipReturn,
+} from "./use-tooltip"
+export { CTooltipContent, type CTooltipContentProps } from "./c-tooltip-content"
+export { CTooltipTrigger } from "./c-tooltip-trigger"

packages/c-tooltip/src/index.tsx

@@ -0,0 +1 @@
+export { anatomy as tooltipAnatomy } from "@zag-js/tooltip"