chore: fix imports

.todo

@@ -36,3 +36,8 @@
 
 -refactor: collapsible to use css height: calc-size(auto) when better browser support
 -also see what can be done with starting style and and transition behaviour when better browser support
+
+- fix: react ref types in hooks
+- refactor: make prop naming more consistend, modal/isModal, open/isOpen...
+
+- refactor: remove barrell imports to better support treeshaking with different bundlers/frameworks

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { cx } from '@renderui/utils'
-import React from 'react'
 
 import { Text, type TextProps } from '@/components/text'
 

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

@@ -1,5 +1,4 @@
 import { cx } from '@renderui/utils'
-import React from 'react'
 
 import { Flex, type FlexProps } from '@/components/flex'
 

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

@@ -1,5 +1,4 @@
 import { cx } from '@renderui/utils'
-import React from 'react'
 
 import { Grid, type GridProps } from '@/components/grid'
 

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

@@ -1,17 +1,17 @@
 import { mergeProps } from '@renderui/utils'
 import React from 'react'
 import {
+	useFocus,
+	useFocusRing,
+	useHover,
+	useLongPress,
+	usePress,
 	type FocusProps,
 	type FocusRingProps,
 	type HoverProps,
 	type LongPressProps,
 	type PressEvent,
 	type PressHookProps,
-	useFocus,
-	useFocusRing,
-	useHover,
-	useLongPress,
-	usePress,
 } from 'react-aria'
 
 import type { UseAriaHandlersProps } from '@/components/_shared/types/aria'

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

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

src/components/_shared/hooks/use-is-online.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+function getClientSnapshot() {
+	return navigator.onLine
+}
+
+function getServerSnapshot() {
+	return true
+}
+
+function subscribe(callback: () => void) {
+	window.addEventListener('online', callback)
+	window.addEventListener('offline', callback)
+	return () => {
+		window.removeEventListener('online', callback)
+		window.removeEventListener('offline', callback)
+	}
+}
+
+function useIsOnline() {
+	const isOnline = useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot)
+
+	return isOnline
+}
+
+export { useIsOnline }

src/components/accordion/components/accordion-content.tsx

@@ -2,7 +2,6 @@
 
 import { AccordionContent as AccordionContentPrimitive } from '@radix-ui/react-accordion'
 import { cn, getAnimationStyleVariables, getOptionalObject, polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import {
 	DEFAULT_ACCORDION_CONTENT_CHILDREN_CONTAINER_CLASSNAME,

src/components/accordion/components/accordion-item.tsx

@@ -2,7 +2,6 @@
 
 import { AccordionItem as AccordionItemPrimitive } from '@radix-ui/react-accordion'
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 import { DEFAULT_ACCORDION_ITEM_CLASSNAME } from '@/components/accordion/constants/constants'
 import type { AccordionItemProps } from '@/components/accordion/types/accordion-item'

src/components/accordion/components/accordion-trigger.tsx

@@ -5,7 +5,6 @@ import {
 	AccordionTrigger as AccordionTriggerPrimitive,
 } from '@radix-ui/react-accordion'
 import { cn, getOptionalObject } from '@renderui/utils'
-import React from 'react'
 
 import { ChevronDownIcon } from '@/components/_shared/components/icons/chevron-down-icon'
 import {

src/components/accordion/components/accordion.tsx

@@ -2,7 +2,6 @@
 
 import { Accordion as AccordionPrimitive } from '@radix-ui/react-accordion'
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 import type { AccordionProps } from '@/components/accordion/types/accordion'
 

src/components/aspect-ratio/components/aspect-ratio.tsx

@@ -1,5 +1,4 @@
 import { polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import type { AspectRatioProps } from '@/components/aspect-ratio/types/aspect-ratio'
 import { getMergedStyles } from '@/components/aspect-ratio/utils/get-merged-styles'

src/components/box/components/box.tsx

@@ -1,5 +1,4 @@
 import { polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import type { BoxProps } from '@/components/box/types/box'
 import { getMergedClassName } from '@/components/box/utils/get-merged-class-name'

src/components/card/components/card-body.tsx

@@ -1,5 +1,4 @@
 import { cn, polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import { DEFAULT_CARD_BODY_CLASSNAME } from '@/components/card/constants/constants'
 import type { CardBodyProps } from '@/components/card/types/card-body'

src/components/card/components/card-header.tsx

@@ -1,5 +1,4 @@
 import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import {
 	DEFAULT_CARD_HEADER_CHILDREN_CLASSNAME,

src/components/card/components/card.tsx

@@ -1,5 +1,4 @@
 import { cn, polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import { cardClasses } from '@/components/card/classes/card-classes'
 import type { CardProps } from '@/components/card/types/card'

src/components/collapsible/components/collapsible.tsx

@@ -3,7 +3,6 @@
 import type { CollapsibleProps } from '@/components/collapsible/types/collapsible'
 import { Collapsible as CollapsiblePrimitive } from '@radix-ui/react-collapsible'
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 const Collapsible = (props: CollapsibleProps) => {
 	const { className, ...restProps } = props

src/components/combobox/components/combobox-input.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 import type { ComboboxInputProps } from '@/components/combobox/types/combobox-input'
 import { CommandInput } from '@/components/command/components/command-input'

src/components/command/components/command-dialog.tsx

@@ -1,5 +1,4 @@
 import { cx } from '@renderui/utils'
-import React from 'react'
 
 import { Command } from '@/components/command/components/command'
 import {

src/components/command/components/command-empty.tsx

@@ -2,7 +2,6 @@
 
 import { cn } from '@renderui/utils'
 import { CommandEmpty as CommandEmptyPrimitive } from 'cmdk'
-import React from 'react'
 
 import { DEFAULT_COMMAND_EMPTY_CLASSNAME } from '@/components/command/constants/constants'
 import type { CommandEmptyProps } from '@/components/command/types/command-empty'

src/components/command/components/command-group.tsx

@@ -2,7 +2,6 @@
 
 import { cn } from '@renderui/utils'
 import { CommandGroup as CommandGroupPrimitive } from 'cmdk'
-import React from 'react'
 
 import { DEFAULT_COMMAND_GROUP_CLASSNAME } from '@/components/command/constants/constants'
 import type { CommandGroupProps } from '@/components/command/types/command-group'

src/components/command/components/command-input.tsx

@@ -2,7 +2,6 @@
 
 import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
 import { CommandInput as CommandInputPrimitive } from 'cmdk'
-import React from 'react'
 
 import { MagnifyingGlassIcon } from '@/components/_shared/components/icons/magnifying-glass-icon'
 import { useControllableState } from '@/components/_shared/hooks/use-controllable-state'

src/components/command/components/command-item.tsx

@@ -2,7 +2,6 @@
 
 import { cn } from '@renderui/utils'
 import { CommandItem as CommandItemPrimitive } from 'cmdk'
-import React from 'react'
 
 import { DEFAULT_COMMAND_ITEM_CLASSNAME } from '@/components/command/constants/constants'
 import type { CommandItemProps } from '@/components/command/types/command-item'

src/components/command/components/command-list.tsx

@@ -2,7 +2,6 @@
 
 import { cn } from '@renderui/utils'
 import { CommandList as CommandListPrimitive } from 'cmdk'
-import React from 'react'
 
 import { DEFAULT_COMMAND_LIST_CLASSNAME } from '@/components/command/constants/constants'
 import type { CommandListProps } from '@/components/command/types/command-list'

src/components/container/components/container.tsx

@@ -1,5 +1,4 @@
 import { polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import type { ContainerProps } from '@/components/container/types/container'
 import { getMergedClassName } from '@/components/container/utils/get-merged-class-name'

src/components/dialog/components/dialog-content.tsx

@@ -5,7 +5,6 @@ import {
 	DialogPortal as DialogPortalPrimitive,
 } from '@radix-ui/react-dialog'
 import { cn, cx, getOptionalObject } from '@renderui/utils'
-import React from 'react'
 
 import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
 import { Button } from '@/components/button/components/button'

src/components/dialog/components/dialog-trigger.tsx

@@ -2,7 +2,6 @@
 
 import { DialogTrigger as DialogTriggerPrimitive } from '@radix-ui/react-dialog'
 import { cn } from '@renderui/utils'
-import React from 'react'
 
 import { Button } from '@/components/button/components/button'
 import { DEFAULT_DIALOG_TRIGGER_CLASSNAME } from '@/components/dialog/constants/constants'

src/components/dialog/components/dialog.tsx

@@ -1,16 +1,11 @@
 'use client'
 
 import { Dialog as DialogPrimitive } from '@radix-ui/react-dialog'
-import React from 'react'
 
 import type { DialogProps } from '@/components/dialog/types/dialog'
 
 const Dialog = (props: DialogProps) => {
-	const { isModal, ...restProps } = props
-
-	return <DialogPrimitive modal={isModal} {...restProps} />
+	return <DialogPrimitive {...props} />
 }
 
-Dialog.displayName = 'Dialog'
-
 export { Dialog }

src/components/dialog/types/dialog.ts

@@ -1,13 +1,6 @@
-import type { Simplify } from '@/components/_shared/types/simplify'
 import type { Dialog as DialogPrimitive } from '@radix-ui/react-dialog'
 import type React from 'react'
 
-type DialogPrimitiveProps = Omit<React.ComponentProps<typeof DialogPrimitive>, 'modal'>
-
-type DialogCustomProps = {
-	isModal?: boolean
-}
-
-type DialogProps = Simplify<DialogPrimitiveProps & DialogCustomProps>
+type DialogProps = React.ComponentProps<typeof DialogPrimitive>
 
 export type { DialogProps }

src/components/flex/components/flex.tsx

@@ -1,5 +1,4 @@
 import { polymorphic } from '@renderui/utils'
-import React from 'react'
 
 import type { FlexProps } from '@/components/flex/types/flex'
 import { getMergedClassName } from '@/components/flex/utils/get-merged-class-name'