feat: add hover card

.vscode/settings.json

@@ -15,8 +15,7 @@
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"editor.codeActionsOnSave": {
-		"source.fixAll": "explicit",
-		"source.fixAll.eslint": "explicit"
+		"source.fixAll": "explicit"
 	},
 	"editor.defaultFormatter": "biomejs.biome",
 	"editor.formatOnPaste": false,

app.tsx

@@ -1,21 +1,12 @@
 import {
-	Button,
-	Combobox,
-	ComboboxContent,
-	ComboboxItem,
-	ComboboxTrigger,
-	Drawer,
-	DrawerContent,
-	DrawerTrigger,
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
 } from '@/components'
-import { DrawerClose } from '@/components/drawer/components/drawer-close'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/drawer'
 import { DrawerDescription } from '@/components/drawer/components/drawer-description'
 import { DrawerHeader } from '@/components/drawer/components/drawer-header'
 import { DrawerTitle } from '@/components/drawer/components/drawer-title'
@@ -54,14 +45,25 @@ const App = () => {
       </Combobox> */}
 			<Drawer>
 				<DrawerTrigger>Trigger</DrawerTrigger>
-				<DrawerContent>
-					<DrawerClose>X</DrawerClose>
+				<DrawerContent className='min-h-[600px]'>
 					<DrawerHeader>
 						<DrawerTitle>Title</DrawerTitle>
 						<DrawerDescription>Description</DrawerDescription>
 					</DrawerHeader>
 				</DrawerContent>
 			</Drawer>
+			<Popover>
+				<PopoverTrigger>Trigger</PopoverTrigger>
+				<PopoverContent>Content</PopoverContent>
+			</Popover>
+			<HoverCard>
+				<HoverCardTrigger>Trigger</HoverCardTrigger>
+				<HoverCardContent>
+					<div className='max-w-[100px]'>
+						feiaojfpijeap apej fpeaij paej peaj epai jpia jfaepij fpeiaj pieajfp
+					</div>
+				</HoverCardContent>
+			</HoverCard>
 		</div>
 	)
 }

main.tsx

@@ -1,12 +1,10 @@
-/* eslint-disable no-relative-import-paths/no-relative-import-paths */
 import './globals.css'
 
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import { App } from './app'
 
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 ReactDOM.createRoot(document.querySelector('#root') as HTMLElement).render(
 	<React.StrictMode>
 		<App />

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@renderui/core",
-	"version": "1.5.5",
+	"version": "1.5.8",
 	"private": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",
 	"license": "MIT",
@@ -22,19 +22,19 @@
 		"build": "bunchee -m",
 		"dev": "vite dev",
 		"commitlint:init": "chmod +x .lefthook/commit-msg/commitlint.sh",
-		"lefthook:init": "yarn lefthook install",
+		"lefthook:init": "npx lefthook install",
 		"type:check": "tsc --noEmit",
 		"type:coverage": "typescript-coverage-report",
-		"lint": "yarn @biomejs/biome lint ./src",
-		"lint:check": "yarn @biomejs/biome check ./src",
-		"lint:format": "yarn @biomejs/biome format ./src",
-		"lint:fix": "yarn @biomejs/biome lint --write ./src"
+		"lint": "npx @biomejs/biome lint ./src",
+		"lint:check": "npx @biomejs/biome check ./src",
+		"lint:format": "npx @biomejs/biome format ./src",
+		"lint:fix": "npx @biomejs/biome lint --write ./src"
 	},
 	"dependencies": {
-		"@biomejs/biome": "^1.8.3",
 		"@radix-ui/react-accordion": "^1.2.0",
 		"@radix-ui/react-collapsible": "^1.1.0",
 		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-hover-card": "^1.1.1",
 		"@radix-ui/react-navigation-menu": "^1.2.0",
 		"@radix-ui/react-popover": "^1.1.1",
 		"@radix-ui/react-portal": "^1.1.1",
@@ -45,32 +45,28 @@
 		"@radix-ui/react-toggle": "^1.1.0",
 		"@radix-ui/react-toggle-group": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.2",
-		"@renderui/utils": "^0.2.0",
-		"@types/react": "yarn:types-react@rc",
-		"@types/react-dom": "yarn:types-react-dom@rc",
+		"@renderui/utils": "^0.2.2",
 		"cmdk": "^1.0.0",
 		"next-themes": "^0.3.0",
 		"react-aria": "^3.33.1",
 		"react-hotkeys-hook": "^4.5.0",
 		"sonner": "^1.5.0",
 		"vaul": "^0.9.1"
 	},
-	"overrides": {
-		"@types/react": "yarn:types-react@rc",
-		"@types/react-dom": "yarn:types-react-dom@rc"
-	},
 	"devDependencies": {
+		"@biomejs/biome": "^1.8.3",
+		"@biomejs/monorepo": "biomejs/biome",
 		"@changesets/cli": "^2.26.0",
-		"@vitejs/plugin-react": "4.2.1",
 		"@commitlint/cli": "^18.6.1",
 		"@commitlint/config-conventional": "^18.6.2",
-		"lefthook": "^1.7.12",
+		"@vitejs/plugin-react": "4.2.1",
 		"autoprefixer": "^10.4.17",
 		"bunchee": "^5.3.2",
 		"framer-motion": "^11.3.28",
+		"lefthook": "^1.7.12",
 		"postcss": "^8.4.35",
-		"react": "^19.0.0-rc-fb9a90fa48-20240614",
-		"react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
+		"react": "19.0.0-rc-a960b92c-20240819",
+		"react-dom": "19.0.0-rc-a960b92c-20240819",
 		"tailwindcss": "^3.4.1",
 		"types-react": "^19.0.0-rc.1",
 		"types-react-dom": "^19.0.0-rc.1",
@@ -80,8 +76,10 @@
 	},
 	"peerDependencies": {
 		"framer-motion": "^11.3.28",
-		"react": "^19.0.0-rc-fb9a90fa48-20240614",
-		"react-dom": "^19.0.0-rc-fb9a90fa48-20240614"
+		"react": "19.0.0-rc-a960b92c-20240819",
+		"react-dom": "19.0.0-rc-a960b92c-20240819",
+		"types-react": "^19.0.0-rc.1",
+		"types-react-dom": "^19.0.0-rc.1"
 	},
 	"publishConfig": {
 		"access": "public"

src/components/_shared/components/field/field-context/field-context.ts

@@ -1,5 +1,5 @@
 import { initializeContext } from '@renderui/utils'
-import React from 'react'
+import type React from 'react'
 
 const [FieldProvider, useFieldContext] = initializeContext<{
 	id: string

src/components/_shared/components/icons/caret-sort-icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 const CaretSortIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 	return (

src/components/_shared/components/icons/check-icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 const CheckIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 	return (

src/components/_shared/components/icons/chevron-down-icon.tsx

@@ -1,3 +1,4 @@
+// biome-ignore lint/style/useImportType: react import needed here
 import React from 'react'
 
 const ChevronDownIcon = (props: React.ComponentPropsWithRef<'svg'>) => {

src/components/_shared/components/icons/chevron-up-icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 const ChevronUpIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 	return (

src/components/_shared/components/icons/cross-small-icon.tsx

@@ -1,3 +1,4 @@
+// biome-ignore lint/style/useImportType: react import needed here
 import React from 'react'
 
 const CrossSmallIcon = (props: React.ComponentPropsWithRef<'svg'>) => {

src/components/_shared/components/icons/eye-none-icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 const EyeNoneIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 	return (

src/components/_shared/components/icons/eye-open-icon.tsx

@@ -1,3 +1,4 @@
+// biome-ignore lint/style/useImportType: react import needed here
 import React from 'react'
 
 const EyeOpenIcon = (props: React.ComponentPropsWithRef<'svg'>) => {

src/components/_shared/components/icons/magnifying-glass-icon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const MagnifyingGlassIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 	return (
 		<svg width='15' height='15' viewBox='0 0 15 15' fill='none' {...props}>
@@ -8,7 +6,7 @@ const MagnifyingGlassIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
 				fill='currentColor'
 				fillRule='evenodd'
 				clipRule='evenodd'
-			></path>
+			/>
 		</svg>
 	)
 }

src/components/_shared/components/modal-close/modal-close.tsx

@@ -2,7 +2,6 @@
 
 import { DialogClose as DialogClosePrimitive } from '@radix-ui/react-dialog'
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 type DialogCloseProps = React.ComponentProps<typeof DialogClosePrimitive>
 

src/components/_shared/components/modal-description/modal-description.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@renderui/utils'
 import React from 'react'
 
-import { Text, TextProps } from '@/components/text'
+import { Text, type TextProps } from '@/components/text'
 
 const ModalDescription = (props: TextProps) => {
 	const { className, size = 'sm', ...restProps } = props

src/components/_shared/components/modal-footer/modal-footer.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@renderui/utils'
 import React from 'react'
 
-import { Flex, FlexProps } from '@/components/flex'
+import { Flex, type FlexProps } from '@/components/flex'
 
 const ModalFooter = (props: FlexProps) => {
 	const { className, ...restProps } = props

src/components/_shared/components/modal-header/modal-header.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@renderui/utils'
 import React from 'react'
 
-import { Grid, GridProps } from '@/components/grid'
+import { Grid, type GridProps } from '@/components/grid'
 
 const ModalHeader = (props: GridProps) => {
 	const { className, ...restProps } = props

src/components/_shared/components/modal-title/modal-title.tsx

@@ -1,5 +1,5 @@
 import { cx } from '@renderui/utils'
-import React, { ComponentProps } from 'react'
+import React, { type ComponentProps } from 'react'
 
 import { DialogTitle } from '@radix-ui/react-dialog'
 

src/components/_shared/constants/constants.ts

@@ -1,4 +1,6 @@
+// biome-ignore lint/suspicious/noExplicitAny: generic
 const EMPTY_OBJECT: Record<string, any> = {}
+// biome-ignore lint/suspicious/noExplicitAny: generic
 const EMPTY_ARRAY: any[] = []
 
 export { EMPTY_OBJECT, EMPTY_ARRAY }

src/components/_shared/hooks/use-aria-handlers.ts

@@ -1,23 +1,23 @@
 import { mergeProps } from '@renderui/utils'
 import React from 'react'
 import {
-	FocusProps,
-	FocusRingProps,
-	HoverProps,
-	LongPressProps,
-	PressEvent,
-	PressHookProps,
+	type FocusProps,
+	type FocusRingProps,
+	type HoverProps,
+	type LongPressProps,
+	type PressEvent,
+	type PressHookProps,
 	useFocus,
 	useFocusRing,
 	useHover,
 	useLongPress,
 	usePress,
 } from 'react-aria'
 
-import { UseAriaHandlersProps } from '@/components/_shared/types/aria'
-import { OrUndefined } from '@/components/_shared/types/or-undefined'
+import type { UseAriaHandlersProps } from '@/components/_shared/types/aria'
+import type { OrUndefined } from '@/components/_shared/types/or-undefined'
 import { isKeyboardPointerType } from '@/components/_shared/utils/is-keyboard-pointer-type'
-import { chain } from '@renderui/utils/chain'
+import { chain } from '@renderui/utils'
 
 function useAriaHandlers<T extends HTMLElement>(
 	props: OrUndefined<UseAriaHandlersProps>,

src/components/_shared/hooks/use-controllable-state.ts

@@ -2,11 +2,11 @@
 
 import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
 import {
-	UseControllableStateProps,
+	type UseControllableStateProps,
 	useUncontrolledState,
 } from '@/components/_shared/hooks/use-uncontrolled-state'
-import { isFunction } from '@renderui/utils/is-function'
-import { noop } from '@renderui/utils/noop'
+import { isFunction } from '@renderui/utils'
+import { noop } from '@renderui/utils'
 import React from 'react'
 
 type SetStateFunction<T> = (previousState?: T) => T

src/components/_shared/hooks/use-event-listener.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
-import { noop } from '@renderui/utils/noop'
+import { noop } from '@renderui/utils'
 import React from 'react'
 
 /* MediaQueryList Event based useEventListener interface */
@@ -47,6 +47,7 @@ function useEventListener<
 	KW extends keyof WindowEventMap,
 	KH extends keyof HTMLElementEventMap,
 	KM extends keyof MediaQueryListEventMap,
+	// biome-ignore lint/suspicious/noConfusingVoidType: allow void
 	T extends HTMLElement | MediaQueryList | void = void,
 >(props: {
 	event: KW | KH | KM
@@ -63,14 +64,15 @@ function useEventListener<
 	const freshHandler = useFreshRef(handler)
 	const freshOptions = useFreshRef(options)
 
+	/* biome-ignore lint/correctness/useExhaustiveDependencies: using fresh ref pattern, ref dep not needed */
 	React.useEffect(() => {
 		if (!enabled) return noop
 
 		/* Define the listening target */
 		const targetElement: T | HTMLElement | null =
 			element ?? (typeof window !== 'undefined' ? window.document.documentElement : null)
 
-		if (!(targetElement && targetElement.addEventListener)) return noop
+		if (!targetElement?.addEventListener) return noop
 
 		/* Create event listener that calls handler function stored in ref */
 		const listener: typeof handler = (event) => freshHandler.current(event)