feat(tooltip): new component

.npmrc

@@ -1,3 +1,2 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
-ignore-workspace-root-check=true

package.json

@@ -63,6 +63,7 @@
     "@oku-ui/tabs": "workspace:^",
     "@oku-ui/toggle": "workspace:^",
     "@oku-ui/toggle-group": "workspace:^",
+    "@oku-ui/tooltip": "workspace:^",
     "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^",
     "@oku-ui/visually-hidden": "workspace:^",

packages/components/arrow/src/arrow.ts

@@ -16,11 +16,11 @@ export const arrowProps = {
   props: {
     width: {
       type: Number as PropType<number>,
-      default: '5',
+      default: 10,
     },
     height: {
       type: Number as PropType<number>,
-      default: '10',
+      default: 5,
     },
     ...primitiveProps,
   },

packages/components/dismissable-layer/src/DismissableLayer.ts

@@ -275,7 +275,6 @@ const DismissableLayer = defineComponent({
     onUnmounted(() => {
       document.removeEventListener(INJECT_UPDATE, handleUpdate)
     })
-
     const originalReturn = () =>
       h(
         Primitive.div,
@@ -291,7 +290,7 @@ const DismissableLayer = defineComponent({
               : undefined,
             ...(attrs.style as CSSPropertyRule),
           },
-          onFocusCapture: composeEventHandlers<FocusCaptureEvent>((e) => {
+          onFocuscapture: composeEventHandlers<FocusCaptureEvent>((e) => {
             emit('focusCapture', e)
           }, focusoutSide.onFocusCapture),
           onBlurCapture: composeEventHandlers<FocusBlurCaptureEvent>((e) => {

packages/components/popper/src/popper.ts

@@ -39,9 +39,7 @@ const Popper = defineComponent({
       },
     })
 
-    const originalReturn = () => slots.default?.()
-
-    return originalReturn
+    return () => slots.default?.()
   },
 })
 

packages/components/popper/src/popperAnchor.ts

@@ -40,7 +40,7 @@ const popperAnchor = defineComponent({
     ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const { virtualRef } = toRefs(props)
+    const { virtualRef, asChild } = toRefs(props)
     const { ...attrsAnchor } = attrs as PopperAnchorIntrinsicElement
     const inject = usePopperInject(ANCHOR_NAME, props.scopeOkuPopper)
 
@@ -60,7 +60,7 @@ const popperAnchor = defineComponent({
           Primitive.div,
           {
             ...attrsAnchor,
-            asChild: props.asChild,
+            asChild: asChild.value,
             ref: composedRefs,
           },
           {

packages/components/popper/src/popperArrow.ts

@@ -39,8 +39,8 @@ const popperArrow = defineComponent({
     ...scopePopperProps,
   },
   setup(props, { attrs }) {
-    const { height, width } = toRefs(props)
-    const contentInject = usePopperContentInject(ARROW_NAME, props.scopeOkuPopper)
+    const { height, width, asChild, scopeOkuPopper } = toRefs(props)
+    const contentInject = usePopperContentInject(ARROW_NAME, scopeOkuPopper.value)
     const baseSide = computed(() => {
       return OPPOSITE_SIDE[contentInject.placedSide.value]
     })
@@ -80,7 +80,7 @@ const popperArrow = defineComponent({
         [
           h(OkuArrow, {
             ...attrs,
-            asChild: props.asChild,
+            asChild: asChild.value,
             ref: forwardedRef,
             width: width.value,
             height: height.value,

packages/components/popper/src/popperContent.ts

@@ -113,7 +113,7 @@ export const popperContentProps = {
       default: 'optimized',
     },
   },
-  emit: {
+  emits: {
     placed: () => true,
   },
 }
@@ -126,7 +126,7 @@ const PopperContent = defineComponent({
     ...scopePopperProps,
     ...primitiveProps,
   },
-  emits: popperContentProps.emit,
+  emits: popperContentProps.emits,
   setup(props, { attrs, slots }) {
     const {
       side,

packages/components/portal/src/Portal.ts

@@ -17,14 +17,14 @@ export interface PortalProps extends PrimitiveProps {
   /**
    * An optional container where the portaled content should be appended.
    */
-  container?: HTMLElement | null | string
+  container?: HTMLElement | null | string | undefined
 }
 
 export const portalProps = {
   props: {
     ...primitiveProps,
     container: {
-      type: [Object, String] as PropType<HTMLElement | string>,
+      type: [Object, String] as PropType<HTMLElement | string | null | undefined>,
       default: () => globalThis?.document?.body,
     },
   },

packages/components/tooltip/README.md

@@ -0,0 +1,13 @@
+# `tooltip`
+
+<span><a href="https://www.npmjs.com/package/@oku-ui/tooltip "><img src="https://img.shields.io/npm/v/@oku-ui/tooltip?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/tooltip"> <img src="https://img.shields.io/npm/dm/@oku-ui/tooltip?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/tooltip"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/tooltip
+```
+
+## Usage
+
+soon docs

packages/components/tooltip/build.config.ts

@@ -0,0 +1,13 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src/',
+      pattern: ['**/!(*.test|*.stories).ts'],
+    },
+  ],
+  declaration: true,
+  clean: false,
+})

packages/components/tooltip/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@oku-ui/tooltip",
+  "type": "module",
+  "version": "0.2.3",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/tooltip"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@oku-ui/dismissable-layer": "latest",
+    "@oku-ui/popper": "latest",
+    "@oku-ui/portal": "latest",
+    "@oku-ui/presence": "latest",
+    "@oku-ui/primitive": "latest",
+    "@oku-ui/provide": "latest",
+    "@oku-ui/slot": "latest",
+    "@oku-ui/use-composable": "latest",
+    "@oku-ui/utils": "latest",
+    "@oku-ui/visually-hidden": "latest"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/tooltip/src/index.ts

@@ -0,0 +1,62 @@
+export {
+  OkuTooltip,
+  tooltipProps,
+} from './tooltip'
+
+export type {
+  TooltipEmits,
+  TooltipProps,
+} from './tooltip'
+
+export {
+  OkuTooltipProvider,
+  tooltipProviderProps,
+} from './tooltipProvider'
+
+export type {
+  TooltipProviderProps,
+} from './tooltipProvider'
+
+export {
+  OkuTooltipTrigger,
+  tooltipTriggerProps,
+} from './tooltipTrigger'
+
+export type {
+  TooltipTriggerElement,
+  TooltipTriggerIntrinsicElement,
+  TooltipTriggerProps,
+} from './tooltipTrigger'
+
+export {
+  OkuTooltipPortal,
+  tooltipPortalProps,
+} from './tooltipPortal'
+
+export type {
+  TooltipPortalProps,
+  TooltipPortalElement,
+} from './tooltipPortal'
+
+export {
+  OkuTooltipContent,
+  tooltipContentProps,
+} from './tooltipContent'
+
+export type {
+  TooltipContentElement,
+  TooltipContentIntrinsicElement,
+  TooltipContentProps,
+  TooltipContentEmits,
+} from './tooltipContent'
+
+export {
+  OkuTooltipArrow,
+  tooltipArrowProps,
+} from './tooltipArrow'
+
+export type {
+  TooltipArrowElement,
+  TooltipArrowIntrinsicElement,
+  TooltipArrowProps,
+} from './tooltipArrow'

packages/components/tooltip/src/stories/Controlled.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  OkuTooltip,
+  OkuTooltipArrow,
+  OkuTooltipContent,
+  OkuTooltipPortal,
+  OkuTooltipProvider,
+  OkuTooltipTrigger,
+} from '@oku-ui/tooltip'
+import { ref } from 'vue'
+
+const open = ref(true)
+</script>
+
+<template>
+  <OkuTooltipProvider>
+    <OkuTooltip v-model="open">
+      <OkuTooltipTrigger class="triggerClass">
+        I'm controlled, look I'm {{ open ? 'open' : 'closed' }}
+      </OkuTooltipTrigger>
+      <OkuTooltipPortal>
+        <OkuTooltipContent class="contentClass" :side-offset="5">
+          Nicely done!
+          <OkuTooltipArrow class="arrowClass" :offset="10" />
+        </OkuTooltipContent>
+      </OkuTooltipPortal>
+    </OkuTooltip>
+  </OkuTooltipProvider>
+</template>