diff --git a/.gitignore b/.gitignore
index 9de1556..302b56f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ dist/
 
 # misc
 .DS_Store
+.idea
 *.pem
 
 # debug
diff --git a/packages/react/src/components/alert/Alert.tsx b/packages/react/src/components/alert/Alert.tsx
index a75fa93..89e6496 100644
--- a/packages/react/src/components/alert/Alert.tsx
+++ b/packages/react/src/components/alert/Alert.tsx
@@ -4,7 +4,7 @@ import type { AlertVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AlertContext, useAlert } from '~/components/alert/use-alert.hook'
+import { AlertContext, useAlertValue } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAlert({ color })
+    const context = useAlertValue({ color })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/alert/AlertBody.tsx b/packages/react/src/components/alert/AlertBody.tsx
index 81b5712..6756200 100644
--- a/packages/react/src/components/alert/AlertBody.tsx
+++ b/packages/react/src/components/alert/AlertBody.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/alert/AlertHeading.tsx b/packages/react/src/components/alert/AlertHeading.tsx
index c50c8d9..3bff640 100644
--- a/packages/react/src/components/alert/AlertHeading.tsx
+++ b/packages/react/src/components/alert/AlertHeading.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Heading } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'h1'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Heading
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/alert/AlertItem.tsx b/packages/react/src/components/alert/AlertItem.tsx
index f9bb83c..1bd5f1a 100644
--- a/packages/react/src/components/alert/AlertItem.tsx
+++ b/packages/react/src/components/alert/AlertItem.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'li'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/alert/AlertList.tsx b/packages/react/src/components/alert/AlertList.tsx
index d102ce0..eec867b 100644
--- a/packages/react/src/components/alert/AlertList.tsx
+++ b/packages/react/src/components/alert/AlertList.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'ul'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/alert/use-alert.hook.ts b/packages/react/src/components/alert/use-alert.hook.ts
index 789a234..9d5990e 100644
--- a/packages/react/src/components/alert/use-alert.hook.ts
+++ b/packages/react/src/components/alert/use-alert.hook.ts
@@ -4,13 +4,13 @@ import type { AlertVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { alert } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseAlertProps = AlertVariantProps
 
-type UseAlertReturn = ReturnType<typeof useAlert>
+type AlertContextType = ReturnType<typeof useAlertValue>
 
-export const useAlert = (props: UseAlertProps) => {
+export const useAlertValue = (props: UseAlertProps) => {
   const { color } = props
 
   const slots = React.useMemo(() => alert({ color }), [color])
@@ -20,8 +20,8 @@ export const useAlert = (props: UseAlertProps) => {
   }
 }
 
-export const [AlertContext, useAlertContext] = createContext<UseAlertReturn>({
+export const [AlertContext, useAlert] = create<AlertContextType>({
   name: 'AlertContext',
   strict: true,
-  errorMessage: 'useAlertContext: `context` is undefined. Seems you forgot to wrap component within <Alert />',
+  errorMessage: 'useAlert: `context` is undefined. Seems you forgot to wrap component within <Alert.Root />',
 })
diff --git a/packages/react/src/components/avatar/Avatar.tsx b/packages/react/src/components/avatar/Avatar.tsx
index 655ea3f..f5809db 100644
--- a/packages/react/src/components/avatar/Avatar.tsx
+++ b/packages/react/src/components/avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AvatarContext, useAvatar, useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { AvatarContext, useAvatar, useAvatarValue } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,8 +28,8 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const parent = useAvatarContext()
-    const context = useAvatar({
+    const parent = useAvatar()
+    const context = useAvatarValue({
       color: parent?.color ?? color,
       radius: parent?.radius ?? radius,
       size: parent?.size ?? size,
diff --git a/packages/react/src/components/avatar/AvatarGroup.tsx b/packages/react/src/components/avatar/AvatarGroup.tsx
index e506c10..ab96ee0 100644
--- a/packages/react/src/components/avatar/AvatarGroup.tsx
+++ b/packages/react/src/components/avatar/AvatarGroup.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AvatarContext, useAvatar } from '~/components/avatar/use-avatar.hook'
+import { AvatarContext, useAvatarValue } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatar({ color, radius, size, zoomed })
+    const context = useAvatarValue({ color, radius, size, zoomed })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/avatar/AvatarIcon.tsx b/packages/react/src/components/avatar/AvatarIcon.tsx
index 1ed29e6..b04b7bd 100644
--- a/packages/react/src/components/avatar/AvatarIcon.tsx
+++ b/packages/react/src/components/avatar/AvatarIcon.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/avatar/AvatarImage.tsx b/packages/react/src/components/avatar/AvatarImage.tsx
index 7b5fb51..85be98b 100644
--- a/packages/react/src/components/avatar/AvatarImage.tsx
+++ b/packages/react/src/components/avatar/AvatarImage.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'img'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/avatar/AvatarNotification.tsx b/packages/react/src/components/avatar/AvatarNotification.tsx
index 0296c1a..a26d32a 100644
--- a/packages/react/src/components/avatar/AvatarNotification.tsx
+++ b/packages/react/src/components/avatar/AvatarNotification.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/avatar/use-avatar.hook.ts b/packages/react/src/components/avatar/use-avatar.hook.ts
index c98d786..369fd13 100644
--- a/packages/react/src/components/avatar/use-avatar.hook.ts
+++ b/packages/react/src/components/avatar/use-avatar.hook.ts
@@ -4,13 +4,13 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { avatar } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseAvatarProps = AvatarVariantProps
 
-type UseAvatarReturn = ReturnType<typeof useAvatar>
+type AvatarContextType = ReturnType<typeof useAvatarValue>
 
-export const useAvatar = (props: UseAvatarProps) => {
+export const useAvatarValue = (props: UseAvatarProps) => {
   const { color, radius, size, zoomed } = props
 
   const slots = React.useMemo(
@@ -33,8 +33,8 @@ export const useAvatar = (props: UseAvatarProps) => {
   }
 }
 
-export const [AvatarContext, useAvatarContext] = createContext<UseAvatarReturn | undefined>({
+export const [AvatarContext, useAvatar] = create<AvatarContextType | undefined>({
   name: 'AvatarContext',
   strict: false,
-  errorMessage: 'useAvatarContext: `context` is undefined. Seems you forgot to wrap component within <Avatar />',
+  errorMessage: 'useAvatar: `context` is undefined. Seems you forgot to wrap component within <Avatar.Root />',
 })
diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.tsx
index e00c257..bb64726 100644
--- a/packages/react/src/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/Breadcrumb.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Breadcrumbs } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { BreadcrumbContext, useBreadcrumb } from '~/components/breadcrumb/use-breadcrumb.hook'
+import { BreadcrumbContext, useBreadcrumbValue } from '~/components/breadcrumb/use-breadcrumb.hook'
 
 const __ELEMENT_TYPE__ = 'ol'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Breadcrumbs
 
-    const context = useBreadcrumb({ size, separator })
+    const context = useBreadcrumbValue({ size, separator })
 
     const component = React.useMemo<BreadcrumbsProps<TData>>(
       () => ({
diff --git a/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
index d03c147..5d632b4 100644
--- a/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Breadcrumb, Link } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useBreadcrumbContext } from '~/components/breadcrumb/use-breadcrumb.hook'
+import { useBreadcrumb } from '~/components/breadcrumb/use-breadcrumb.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'span'
@@ -32,7 +32,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Breadcrumb
 
-    const { slots, separator } = useBreadcrumbContext()
+    const { slots, separator } = useBreadcrumb()
 
     const component = React.useMemo<Omit<BreadcrumbProps, 'children'>>(
       () => ({
diff --git a/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts b/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
index 5329bcd..4f9188e 100644
--- a/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
+++ b/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
@@ -4,15 +4,15 @@ import type { BreadcrumbVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { breadcrumb } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
-type UseBreadcrumbProps = {
+type UseBreadcrumbProps = BreadcrumbVariantProps & {
   separator?: React.ReactNode
-} & BreadcrumbVariantProps
+}
 
-type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>
+type BreadcrumbContextType = ReturnType<typeof useBreadcrumbValue>
 
-export const useBreadcrumb = (props: UseBreadcrumbProps) => {
+export const useBreadcrumbValue = (props: UseBreadcrumbProps) => {
   const { size, separator = '/' } = props
 
   const slots = React.useMemo(() => breadcrumb({ size }), [size])
@@ -23,9 +23,8 @@ export const useBreadcrumb = (props: UseBreadcrumbProps) => {
   }
 }
 
-export const [BreadcrumbContext, useBreadcrumbContext] = createContext<UseBreadcrumbReturn>({
+export const [BreadcrumbContext, useBreadcrumb] = create<BreadcrumbContextType>({
   name: 'BreadcrumbContext',
   strict: true,
-  errorMessage:
-    'useBreadcrumbContext: `context` is undefined. Seems you forgot to wrap component within <Breadcrumb />',
+  errorMessage: 'useBreadcrumb: `context` is undefined. Seems you forgot to wrap component within <Breadcrumb.Root />',
 })
diff --git a/packages/react/src/components/card/Card.tsx b/packages/react/src/components/card/Card.tsx
index 095cc25..08facf2 100644
--- a/packages/react/src/components/card/Card.tsx
+++ b/packages/react/src/components/card/Card.tsx
@@ -4,7 +4,7 @@ import type { CardVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { CardContext, useCard } from '~/components/card/use-card.hook'
+import { CardContext, useCardValue } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useCard()
+    const context = useCardValue()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/card/CardBody.tsx b/packages/react/src/components/card/CardBody.tsx
index f90095d..a6ea81e 100644
--- a/packages/react/src/components/card/CardBody.tsx
+++ b/packages/react/src/components/card/CardBody.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/card/CardFooter.tsx b/packages/react/src/components/card/CardFooter.tsx
index c47c363..31d9982 100644
--- a/packages/react/src/components/card/CardFooter.tsx
+++ b/packages/react/src/components/card/CardFooter.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/card/CardHeader.tsx b/packages/react/src/components/card/CardHeader.tsx
index 5388d9c..f86248f 100644
--- a/packages/react/src/components/card/CardHeader.tsx
+++ b/packages/react/src/components/card/CardHeader.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/card/use-card.hook.ts b/packages/react/src/components/card/use-card.hook.ts
index 0f27a3a..763787e 100644
--- a/packages/react/src/components/card/use-card.hook.ts
+++ b/packages/react/src/components/card/use-card.hook.ts
@@ -3,11 +3,11 @@
 import React from 'react'
 import { card } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
-type UseCardReturn = ReturnType<typeof useCard>
+type CardContextType = ReturnType<typeof useCardValue>
 
-export const useCard = () => {
+export const useCardValue = () => {
   const slots = React.useMemo(() => card({}), [])
 
   return {
@@ -15,8 +15,8 @@ export const useCard = () => {
   }
 }
 
-export const [CardContext, useCardContext] = createContext<UseCardReturn>({
+export const [CardContext, useCard] = create<CardContextType>({
   name: 'CardContext',
   strict: true,
-  errorMessage: 'useCardContext: `context` is undefined. Seems you forgot to wrap component within <Card />',
+  errorMessage: 'useCard: `context` is undefined. Seems you forgot to wrap component within <Card.Root />',
 })
diff --git a/packages/react/src/components/combo-box/ComboBox.tsx b/packages/react/src/components/combo-box/ComboBox.tsx
index db03253..f6d780f 100644
--- a/packages/react/src/components/combo-box/ComboBox.tsx
+++ b/packages/react/src/components/combo-box/ComboBox.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { ComboBox } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { ComboBoxContext, useComboBox } from '~/components/combo-box/use-combo-box.hook'
+import { ComboBoxContext, useComboBoxValue } from '~/components/combo-box/use-combo-box.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? ComboBox
 
-    const context = useComboBox({ size, status })
+    const context = useComboBoxValue({ size, status })
 
     const component = React.useMemo<ComboBoxProps<TData>>(
       () => ({
diff --git a/packages/react/src/components/combo-box/ComboBoxItem.tsx b/packages/react/src/components/combo-box/ComboBoxItem.tsx
index 407cc6e..692eb64 100644
--- a/packages/react/src/components/combo-box/ComboBoxItem.tsx
+++ b/packages/react/src/components/combo-box/ComboBoxItem.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { ListBoxItem } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useComboBoxContext } from '~/components/combo-box/use-combo-box.hook'
+import { useComboBox } from '~/components/combo-box/use-combo-box.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? ListBoxItem
 
-    const { slots } = useComboBoxContext()
+    const { slots } = useComboBox()
 
     const component = React.useMemo<ListBoxItemProps>(
       () => ({
diff --git a/packages/react/src/components/combo-box/ComboBoxList.tsx b/packages/react/src/components/combo-box/ComboBoxList.tsx
index 77032c0..9d0b785 100644
--- a/packages/react/src/components/combo-box/ComboBoxList.tsx
+++ b/packages/react/src/components/combo-box/ComboBoxList.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { ListBox } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useComboBoxContext } from '~/components/combo-box/use-combo-box.hook'
+import { useComboBox } from '~/components/combo-box/use-combo-box.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? ListBox
 
-    const { slots } = useComboBoxContext()
+    const { slots } = useComboBox()
 
     const component = React.useMemo<ListBoxProps<D>>(
       () => ({
diff --git a/packages/react/src/components/combo-box/ComboBoxPopover.tsx b/packages/react/src/components/combo-box/ComboBoxPopover.tsx
index 23f8682..52d4a8d 100644
--- a/packages/react/src/components/combo-box/ComboBoxPopover.tsx
+++ b/packages/react/src/components/combo-box/ComboBoxPopover.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Popover } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useComboBoxContext } from '~/components/combo-box/use-combo-box.hook'
+import { useComboBox } from '~/components/combo-box/use-combo-box.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Popover
 
-    const { slots } = useComboBoxContext()
+    const { slots } = useComboBox()
 
     const component = React.useMemo<PopoverProps>(
       () => ({
diff --git a/packages/react/src/components/combo-box/use-combo-box.hook.ts b/packages/react/src/components/combo-box/use-combo-box.hook.ts
index 98acae5..76c2b48 100644
--- a/packages/react/src/components/combo-box/use-combo-box.hook.ts
+++ b/packages/react/src/components/combo-box/use-combo-box.hook.ts
@@ -4,13 +4,13 @@ import type { ComboBoxVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { combobox } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseComboBoxProps = ComboBoxVariantProps
 
-type UseComboBoxReturn = ReturnType<typeof useComboBox>
+type ComboBoxContextType = ReturnType<typeof useComboBoxValue>
 
-export const useComboBox = (props: UseComboBoxProps) => {
+export const useComboBoxValue = (props: UseComboBoxProps) => {
   const { size, status } = props
 
   const slots = React.useMemo(() => combobox({ size, status }), [size, status])
@@ -20,8 +20,8 @@ export const useComboBox = (props: UseComboBoxProps) => {
   }
 }
 
-export const [ComboBoxContext, useComboBoxContext] = createContext<UseComboBoxReturn>({
+export const [ComboBoxContext, useComboBox] = create<ComboBoxContextType>({
   name: 'ComboBoxContext',
   strict: true,
-  errorMessage: 'useComboBox: `context` is undefined. Seems you forgot to wrap component within <ComboBox />',
+  errorMessage: 'useComboBox: `context` is undefined. Seems you forgot to wrap component within <ComboBox.Root />',
 })
diff --git a/packages/react/src/components/dialog/Dialog.tsx b/packages/react/src/components/dialog/Dialog.tsx
index 64beca8..e923db6 100644
--- a/packages/react/src/components/dialog/Dialog.tsx
+++ b/packages/react/src/components/dialog/Dialog.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Dialog } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { DialogContext, useDialog } from '~/components/dialog/use-dialog.hook'
+import { DialogContext, useDialogValue } from '~/components/dialog/use-dialog.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Dialog
 
-    const context = useDialog({})
+    const context = useDialogValue({})
 
     const component = React.useMemo<DialogProps>(
       () => ({
diff --git a/packages/react/src/components/dialog/use-dialog.hook.ts b/packages/react/src/components/dialog/use-dialog.hook.ts
index c71259b..2d567ad 100644
--- a/packages/react/src/components/dialog/use-dialog.hook.ts
+++ b/packages/react/src/components/dialog/use-dialog.hook.ts
@@ -4,13 +4,13 @@ import type { DialogVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { dialog } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
-export type UseDialogProps = DialogVariantProps
+type UseDialogProps = DialogVariantProps
 
-export type UseDialogReturn = ReturnType<typeof useDialog>
+type DialogContextType = ReturnType<typeof useDialogValue>
 
-export const useDialog = (_: UseDialogProps) => {
+export const useDialogValue = (_: UseDialogProps) => {
   const slots = React.useMemo(() => dialog(), [])
 
   return {
@@ -18,8 +18,8 @@ export const useDialog = (_: UseDialogProps) => {
   }
 }
 
-export const [DialogContext, useDialogContext] = createContext<UseDialogReturn>({
+export const [DialogContext, useDialog] = create<DialogContextType>({
   name: 'DialogContext',
   strict: true,
-  errorMessage: 'useDialogContext: `context` is undefined. Seems you forgot to wrap component within <Dialog.Root />',
+  errorMessage: 'useDialog: `context` is undefined. Seems you forgot to wrap component within <Dialog.Root />',
 })
diff --git a/packages/react/src/components/form/FormCaption.tsx b/packages/react/src/components/form/FormCaption.tsx
index 8664b21..ebe133a 100644
--- a/packages/react/src/components/form/FormCaption.tsx
+++ b/packages/react/src/components/form/FormCaption.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useFormGroupContext()
+    const context = useFormGroup()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/form/FormFeedback.tsx b/packages/react/src/components/form/FormFeedback.tsx
index fcae66c..176b2ce 100644
--- a/packages/react/src/components/form/FormFeedback.tsx
+++ b/packages/react/src/components/form/FormFeedback.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 import type { FeedbackType } from '~/components/form/use-form-group.hook'
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'span'
@@ -31,7 +31,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useFormGroupContext()
+    const context = useFormGroup()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/form/FormGroup.tsx b/packages/react/src/components/form/FormGroup.tsx
index 3242457..3b47580 100644
--- a/packages/react/src/components/form/FormGroup.tsx
+++ b/packages/react/src/components/form/FormGroup.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useField } from 'react-aria'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { FormGroupContext, useFormGroup } from '~/components/form/use-form-group.hook'
+import { FormGroupContext, useFormGroupValue } from '~/components/form/use-form-group.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -34,7 +34,7 @@ const Component: ComponentType = React.forwardRef(
     const Element = as ?? __ELEMENT_TYPE__
 
     const { labelProps, fieldProps } = useField({ ...props, label: name })
-    const context = useFormGroup({
+    const context = useFormGroupValue({
       ref,
       name,
       labelProps,
diff --git a/packages/react/src/components/form/FormLabel.tsx b/packages/react/src/components/form/FormLabel.tsx
index 709963f..83b51e4 100644
--- a/packages/react/src/components/form/FormLabel.tsx
+++ b/packages/react/src/components/form/FormLabel.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Label } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 
 const __ELEMENT_TYPE__ = 'label'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Label
 
-    const context = useFormGroupContext()
+    const context = useFormGroup()
 
     const component = React.useMemo<LabelProps>(
       () => ({
diff --git a/packages/react/src/components/form/use-form-group.hook.tsx b/packages/react/src/components/form/use-form-group.hook.ts
similarity index 76%
rename from packages/react/src/components/form/use-form-group.hook.tsx
rename to packages/react/src/components/form/use-form-group.hook.ts
index 110ec72..867b82f 100644
--- a/packages/react/src/components/form/use-form-group.hook.tsx
+++ b/packages/react/src/components/form/use-form-group.hook.ts
@@ -6,7 +6,7 @@ import React from 'react'
 import { form } from '@giantnodes/theme'
 
 import type { ChangeHandler } from '~/utilities/types'
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 export type FeedbackType = 'success' | 'info' | 'warning' | 'error'
 
@@ -18,9 +18,9 @@ type UseFormGroupProps = LabelAria & {
   onBlur?: ChangeHandler
 }
 
-type UseFormGroupReturn = ReturnType<typeof useFormGroup>
+type FormGroupContextType = ReturnType<typeof useFormGroupValue>
 
-export const useFormGroup = (props: UseFormGroupProps) => {
+export const useFormGroupValue = (props: UseFormGroupProps) => {
   const { ref, name, fieldProps, labelProps, onChange, onBlur } = props
 
   const [feedback, setFeedback] = React.useState<FeedbackType | null>(null)
@@ -56,8 +56,8 @@ export const useFormGroup = (props: UseFormGroupProps) => {
   }
 }
 
-export const [FormGroupContext, useFormGroupContext] = createContext<UseFormGroupReturn | undefined>({
+export const [FormGroupContext, useFormGroup] = create<FormGroupContextType | undefined>({
   name: 'FormGroupContext',
   strict: false,
-  errorMessage: 'useFormGroupContext: `context` is undefined. Seems you forgot to wrap component within <Form.Group />',
+  errorMessage: 'useFormGroup: `context` is undefined. Seems you forgot to wrap component within <Form.Group />',
 })
diff --git a/packages/react/src/components/input/InputAddon.tsx b/packages/react/src/components/input/InputAddon.tsx
index a7b7d07..043d17e 100644
--- a/packages/react/src/components/input/InputAddon.tsx
+++ b/packages/react/src/components/input/InputAddon.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useInputContext } from '~/components/input/use-input.hook'
+import { useInput } from '~/components/input/use-input.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useInputContext()
+    const context = useInput()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/input/InputGroup.tsx b/packages/react/src/components/input/InputGroup.tsx
index 24aa42a..f048bb9 100644
--- a/packages/react/src/components/input/InputGroup.tsx
+++ b/packages/react/src/components/input/InputGroup.tsx
@@ -6,8 +6,8 @@ import React from 'react'
 import { Group } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
-import { InputContext, useInput } from '~/components/input/use-input.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
+import { InputContext, useInputValue } from '~/components/input/use-input.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -31,8 +31,8 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Group
 
-    const group = useFormGroupContext()
-    const context = useInput({ color: color ?? group?.status, size, shape, variant })
+    const group = useFormGroup()
+    const context = useInputValue({ color: color ?? group?.status, size, shape, variant })
 
     const component = React.useMemo<GroupProps>(
       () => ({
diff --git a/packages/react/src/components/input/InputPhone.tsx b/packages/react/src/components/input/InputPhone.tsx
index 5abd380..158e475 100644
--- a/packages/react/src/components/input/InputPhone.tsx
+++ b/packages/react/src/components/input/InputPhone.tsx
@@ -9,9 +9,9 @@ import examples from 'libphonenumber-js/mobile/examples'
 import { Input } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 import { Addon } from '~/components/input/component.parts'
-import { useInput, useInputContext } from '~/components/input/use-input.hook'
+import { useInput, useInputValue } from '~/components/input/use-input.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'input'
@@ -38,10 +38,10 @@ const Component: ComponentType = React.forwardRef(
     const { as, children, className, country, color, size, shape, variant, onTemplateChange, ...rest } = props
 
     const Element = as ?? Input
-    const group = useFormGroupContext()
-    const context = useInputContext()
+    const group = useFormGroup()
+    const context = useInput()
 
-    const { slots } = useInput({
+    const { slots } = useInputValue({
       color: color ?? group?.status ?? context?.color,
       size: size ?? context?.size,
       shape: shape ?? context?.shape,
diff --git a/packages/react/src/components/input/InputText.tsx b/packages/react/src/components/input/InputText.tsx
index 8b4c7d8..e78143b 100644
--- a/packages/react/src/components/input/InputText.tsx
+++ b/packages/react/src/components/input/InputText.tsx
@@ -6,8 +6,8 @@ import React from 'react'
 import { Input } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
-import { useInput, useInputContext } from '~/components/input/use-input.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
+import { useInput, useInputValue } from '~/components/input/use-input.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'input'
@@ -32,10 +32,10 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Input
 
-    const group = useFormGroupContext()
-    const context = useInputContext()
+    const group = useFormGroup()
+    const context = useInput()
 
-    const { slots } = useInput({
+    const { slots } = useInputValue({
       color: color ?? group?.status ?? context?.color,
       size: size ?? context?.size,
       shape: shape ?? context?.shape,
diff --git a/packages/react/src/components/input/InputTextArea.tsx b/packages/react/src/components/input/InputTextArea.tsx
index acae6e3..89aecfb 100644
--- a/packages/react/src/components/input/InputTextArea.tsx
+++ b/packages/react/src/components/input/InputTextArea.tsx
@@ -6,8 +6,8 @@ import React from 'react'
 import { TextArea } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
-import { useInput, useInputContext } from '~/components/input/use-input.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
+import { useInput, useInputValue } from '~/components/input/use-input.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'textarea'
@@ -32,15 +32,15 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? TextArea
 
-    const context = useInputContext()
-    const { slots } = useInput({
+    const context = useInput()
+    const { slots } = useInputValue({
       color: color ?? context?.color,
       size: size ?? context?.size,
       shape: shape ?? context?.shape,
       variant: variant ?? context?.variant,
     })
 
-    const group = useFormGroupContext()
+    const group = useFormGroup()
 
     const component = React.useMemo<TextAreaProps>(
       () => ({
diff --git a/packages/react/src/components/input/use-input.hook.tsx b/packages/react/src/components/input/use-input.hook.ts
similarity index 56%
rename from packages/react/src/components/input/use-input.hook.tsx
rename to packages/react/src/components/input/use-input.hook.ts
index 9111f04..7bec90b 100644
--- a/packages/react/src/components/input/use-input.hook.tsx
+++ b/packages/react/src/components/input/use-input.hook.ts
@@ -4,13 +4,13 @@ import type { InputVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { input } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseInputProps = InputVariantProps
 
-type UseInputReturn = ReturnType<typeof useInput>
+type InputContextType = ReturnType<typeof useInputValue>
 
-export const useInput = (props: UseInputProps) => {
+export const useInputValue = (props: UseInputProps) => {
   const { color, size, shape, variant } = props
 
   const slots = React.useMemo(() => input({ color, size, shape, variant }), [color, size, shape, variant])
@@ -24,8 +24,8 @@ export const useInput = (props: UseInputProps) => {
   }
 }
 
-export const [InputContext, useInputContext] = createContext<UseInputReturn | undefined>({
+export const [InputContext, useInput] = create<InputContextType | undefined>({
   name: 'InputContext',
   strict: false,
-  errorMessage: 'useInputContext: `context` is undefined. Seems you forgot to wrap component within <Input />',
+  errorMessage: 'useInput: `context` is undefined. Seems you forgot to wrap component within <Input.Root />',
 })
diff --git a/packages/react/src/components/menu/Menu.tsx b/packages/react/src/components/menu/Menu.tsx
index 532a90c..8c64151 100644
--- a/packages/react/src/components/menu/Menu.tsx
+++ b/packages/react/src/components/menu/Menu.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { MenuTrigger } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { MenuContext, useMenu } from '~/components/menu/use-menu.hook'
+import { MenuContext, useMenuValue } from '~/components/menu/use-menu.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = <TElement extends React.ElementType = typeof __
 
   const Element = as ?? MenuTrigger
 
-  const context = useMenu({ size, color })
+  const context = useMenuValue({ size, color })
 
   const component = React.useMemo<Omit<MenuTriggerProps, 'children'>>(
     () => ({
diff --git a/packages/react/src/components/menu/MenuItem.tsx b/packages/react/src/components/menu/MenuItem.tsx
index fef05e5..032324b 100644
--- a/packages/react/src/components/menu/MenuItem.tsx
+++ b/packages/react/src/components/menu/MenuItem.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { MenuItem } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useMenuContext } from '~/components/menu/use-menu.hook'
+import { useMenu } from '~/components/menu/use-menu.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? MenuItem
 
-    const { slots } = useMenuContext()
+    const { slots } = useMenu()
 
     const component = React.useMemo<MenuItemProps>(
       () => ({
diff --git a/packages/react/src/components/menu/MenuList.tsx b/packages/react/src/components/menu/MenuList.tsx
index 35dfb03..6fb0362 100644
--- a/packages/react/src/components/menu/MenuList.tsx
+++ b/packages/react/src/components/menu/MenuList.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Menu } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useMenuContext } from '~/components/menu/use-menu.hook'
+import { useMenu } from '~/components/menu/use-menu.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Menu
 
-    const { slots } = useMenuContext()
+    const { slots } = useMenu()
 
     const component = React.useMemo<MenuProps<TData>>(
       () => ({
diff --git a/packages/react/src/components/menu/MenuPopover.tsx b/packages/react/src/components/menu/MenuPopover.tsx
index d145759..ca4e219 100644
--- a/packages/react/src/components/menu/MenuPopover.tsx
+++ b/packages/react/src/components/menu/MenuPopover.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Popover } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useMenuContext } from '~/components/menu/use-menu.hook'
+import { useMenu } from '~/components/menu/use-menu.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Popover
 
-    const { slots } = useMenuContext()
+    const { slots } = useMenu()
 
     const component = React.useMemo<PopoverProps>(
       () => ({
diff --git a/packages/react/src/components/menu/MenuTrigger.tsx b/packages/react/src/components/menu/MenuTrigger.tsx
index b6cd60a..0bb6ffe 100644
--- a/packages/react/src/components/menu/MenuTrigger.tsx
+++ b/packages/react/src/components/menu/MenuTrigger.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Button } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useMenuContext } from '~/components/menu/use-menu.hook'
+import { useMenu } from '~/components/menu/use-menu.hook'
 
 const __ELEMENT_TYPE__ = 'button'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Button
 
-    const { slots } = useMenuContext()
+    const { slots } = useMenu()
 
     const component = React.useMemo<ButtonProps>(
       () => ({
diff --git a/packages/react/src/components/menu/use-menu.hook.ts b/packages/react/src/components/menu/use-menu.hook.ts
index 82f563e..f06300e 100644
--- a/packages/react/src/components/menu/use-menu.hook.ts
+++ b/packages/react/src/components/menu/use-menu.hook.ts
@@ -4,13 +4,13 @@ import type { MenuVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { menu } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context.jsx'
 
 type UseMenuProps = MenuVariantProps
 
-type UseMenuReturn = ReturnType<typeof useMenu>
+type MenuContextType = ReturnType<typeof useMenuValue>
 
-export const useMenu = (props: UseMenuProps) => {
+export const useMenuValue = (props: UseMenuProps) => {
   const { size, color } = props
 
   const slots = React.useMemo(() => menu({ size, color }), [size, color])
@@ -20,8 +20,8 @@ export const useMenu = (props: UseMenuProps) => {
   }
 }
 
-export const [MenuContext, useMenuContext] = createContext<UseMenuReturn>({
+export const [MenuContext, useMenu] = create<MenuContextType>({
   name: 'MenuContext',
   strict: true,
-  errorMessage: 'useMenuContext: `context` is undefined. Seems you forgot to wrap component within <Menu />',
+  errorMessage: 'useMenu: `context` is undefined. Seems you forgot to wrap component within <Menu.Root />',
 })
diff --git a/packages/react/src/components/modal/Modal.tsx b/packages/react/src/components/modal/Modal.tsx
index 8767cc9..d6db473 100644
--- a/packages/react/src/components/modal/Modal.tsx
+++ b/packages/react/src/components/modal/Modal.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { ModalOverlay } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { ModalContext, useModal } from '~/components/modal/use-modal.hook'
+import { ModalContext, useModalValue } from '~/components/modal/use-modal.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'div'
@@ -29,7 +29,7 @@ const Component: ComponentType = <TElement extends React.ElementType = typeof __
 
   const Element = as ?? ModalOverlay
 
-  const context = useModal({ blur, placement, position })
+  const context = useModalValue({ blur, placement, position })
 
   const component = React.useMemo<ModalOverlayProps>(
     () => ({
diff --git a/packages/react/src/components/modal/ModalContent.tsx b/packages/react/src/components/modal/ModalContent.tsx
index a5ec8d8..3e67e0e 100644
--- a/packages/react/src/components/modal/ModalContent.tsx
+++ b/packages/react/src/components/modal/ModalContent.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Modal } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useModalContext } from '~/components/modal/use-modal.hook'
+import { useModal } from '~/components/modal/use-modal.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'div'
@@ -29,7 +29,7 @@ const Component: ComponentType = <TElement extends React.ElementType = typeof __
 
   const Element = as ?? Modal
 
-  const { slots } = useModalContext()
+  const { slots } = useModal()
 
   const component = React.useMemo<ModalOverlayProps>(
     () => ({
diff --git a/packages/react/src/components/modal/use-modal.hook.ts b/packages/react/src/components/modal/use-modal.hook.ts
index 68e5ab4..0a96e55 100644
--- a/packages/react/src/components/modal/use-modal.hook.ts
+++ b/packages/react/src/components/modal/use-modal.hook.ts
@@ -4,13 +4,13 @@ import type { ModalVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { modal } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
-export type UseModalProps = ModalVariantProps
+type UseModalProps = ModalVariantProps
 
-export type UseModalReturn = ReturnType<typeof useModal>
+type ModalContextType = ReturnType<typeof useModalValue>
 
-export const useModal = (props: UseModalProps) => {
+export const useModalValue = (props: UseModalProps) => {
   const { blur, placement, position } = props
 
   const slots = React.useMemo(() => modal({ blur, placement, position }), [blur, placement, position])
@@ -20,8 +20,8 @@ export const useModal = (props: UseModalProps) => {
   }
 }
 
-export const [ModalContext, useModalContext] = createContext<UseModalReturn>({
+export const [ModalContext, useModal] = create<ModalContextType>({
   name: 'ModalContext',
   strict: true,
-  errorMessage: 'useModalContext: `context` is undefined. Seems you forgot to wrap component within <Modal.Root />',
+  errorMessage: 'useModal: `context` is undefined. Seems you forgot to wrap component within <Modal.Root />',
 })
diff --git a/packages/react/src/components/navigation/Navigation.tsx b/packages/react/src/components/navigation/Navigation.tsx
index bb8a4bb..8250eff 100644
--- a/packages/react/src/components/navigation/Navigation.tsx
+++ b/packages/react/src/components/navigation/Navigation.tsx
@@ -4,7 +4,7 @@ import type { NavigationVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { NavigationContext, useNavigation } from '~/components/navigation/use-navigation.hook'
+import { NavigationContext, useNavigationValue } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'nav'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useNavigation({
+    const context = useNavigationValue({
       orientation,
       position,
       size,
diff --git a/packages/react/src/components/navigation/NavigationBrand.tsx b/packages/react/src/components/navigation/NavigationBrand.tsx
index 56c7302..6732595 100644
--- a/packages/react/src/components/navigation/NavigationBrand.tsx
+++ b/packages/react/src/components/navigation/NavigationBrand.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationDivider.tsx b/packages/react/src/components/navigation/NavigationDivider.tsx
index 0cdca2e..2c41ea7 100644
--- a/packages/react/src/components/navigation/NavigationDivider.tsx
+++ b/packages/react/src/components/navigation/NavigationDivider.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'hr'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationItem.tsx b/packages/react/src/components/navigation/NavigationItem.tsx
index 38ae280..cee54b3 100644
--- a/packages/react/src/components/navigation/NavigationItem.tsx
+++ b/packages/react/src/components/navigation/NavigationItem.tsx
@@ -4,7 +4,7 @@ import type { NavigationVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'li'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationLink.tsx b/packages/react/src/components/navigation/NavigationLink.tsx
index 3d9fb46..59c9326 100644
--- a/packages/react/src/components/navigation/NavigationLink.tsx
+++ b/packages/react/src/components/navigation/NavigationLink.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Link } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'a'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Link
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<LinkProps>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationSegment.tsx b/packages/react/src/components/navigation/NavigationSegment.tsx
index 923d1c3..fd9677f 100644
--- a/packages/react/src/components/navigation/NavigationSegment.tsx
+++ b/packages/react/src/components/navigation/NavigationSegment.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'ul'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationTitle.tsx b/packages/react/src/components/navigation/NavigationTitle.tsx
index d922f25..4d9d3f2 100644
--- a/packages/react/src/components/navigation/NavigationTitle.tsx
+++ b/packages/react/src/components/navigation/NavigationTitle.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/navigation/NavigationTrigger.tsx b/packages/react/src/components/navigation/NavigationTrigger.tsx
index 21f47ea..9477d4e 100644
--- a/packages/react/src/components/navigation/NavigationTrigger.tsx
+++ b/packages/react/src/components/navigation/NavigationTrigger.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Button } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useNavigationContext } from '~/components/navigation/use-navigation.hook'
+import { useNavigation } from '~/components/navigation/use-navigation.hook'
 
 const __ELEMENT_TYPE__ = 'button'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Button
 
-    const { slots } = useNavigationContext()
+    const { slots } = useNavigation()
 
     const component = React.useMemo<ButtonProps>(
       () => ({
diff --git a/packages/react/src/components/navigation/use-navigation.hook.ts b/packages/react/src/components/navigation/use-navigation.hook.ts
index 4d15bd9..a41ce2c 100644
--- a/packages/react/src/components/navigation/use-navigation.hook.ts
+++ b/packages/react/src/components/navigation/use-navigation.hook.ts
@@ -4,13 +4,13 @@ import type { NavigationVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { navigation } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseNavigationProps = NavigationVariantProps
 
-type UseNavigationReturn = ReturnType<typeof useNavigation>
+type NavigationContextType = ReturnType<typeof useNavigationValue>
 
-export const useNavigation = (props: UseNavigationProps) => {
+export const useNavigationValue = (props: UseNavigationProps) => {
   const { orientation, position, size, variant, isBordered } = props
 
   const slots = React.useMemo(
@@ -30,9 +30,8 @@ export const useNavigation = (props: UseNavigationProps) => {
   }
 }
 
-export const [NavigationContext, useNavigationContext] = createContext<UseNavigationReturn>({
+export const [NavigationContext, useNavigation] = create<NavigationContextType>({
   name: 'NavigationContext',
   strict: true,
-  errorMessage:
-    'useNavigationContext: `context` is undefined. Seems you forgot to wrap component within <Navigation />',
+  errorMessage: 'useNavigation: `context` is undefined. Seems you forgot to wrap component within <Navigation.Root />',
 })
diff --git a/packages/react/src/components/progress/Progress.tsx b/packages/react/src/components/progress/Progress.tsx
index eb4b20b..7f2e3a3 100644
--- a/packages/react/src/components/progress/Progress.tsx
+++ b/packages/react/src/components/progress/Progress.tsx
@@ -4,7 +4,7 @@ import type { ProgressVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { ProgressContext, useProgress } from '~/components/progress/use-progress.hook'
+import { ProgressContext, useProgressValue } from '~/components/progress/use-progress.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useProgress({ radius, size })
+    const context = useProgressValue({ radius, size })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/progress/ProgressBar.tsx b/packages/react/src/components/progress/ProgressBar.tsx
index 2e71e1a..aa6d3a4 100644
--- a/packages/react/src/components/progress/ProgressBar.tsx
+++ b/packages/react/src/components/progress/ProgressBar.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useProgressContext } from '~/components/progress/use-progress.hook'
+import { useProgress } from '~/components/progress/use-progress.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useProgressContext()
+    const context = useProgress()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/progress/use-progress.hook.ts b/packages/react/src/components/progress/use-progress.hook.ts
index ea21fc6..8369b82 100644
--- a/packages/react/src/components/progress/use-progress.hook.ts
+++ b/packages/react/src/components/progress/use-progress.hook.ts
@@ -4,13 +4,13 @@ import type { ProgressVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { progress } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseProgressProps = ProgressVariantProps
 
-type UseProgressReturn = ReturnType<typeof useProgress>
+type ProgressContextType = ReturnType<typeof useProgressValue>
 
-export const useProgress = (props: UseProgressProps) => {
+export const useProgressValue = (props: UseProgressProps) => {
   const { radius, size } = props
 
   const slots = React.useMemo(() => progress({ radius, size }), [radius, size])
@@ -20,8 +20,8 @@ export const useProgress = (props: UseProgressProps) => {
   }
 }
 
-export const [ProgressContext, useProgressContext] = createContext<UseProgressReturn>({
+export const [ProgressContext, useProgress] = create<ProgressContextType>({
   name: 'ProgressContext',
   strict: true,
-  errorMessage: 'useProgressContext: `context` is undefined. Seems you forgot to wrap component within <Progress />',
+  errorMessage: 'useProgress: `context` is undefined. Seems you forgot to wrap component within <Progress.Root />',
 })
diff --git a/packages/react/src/components/select/Select.tsx b/packages/react/src/components/select/Select.tsx
index 0fdcb60..0c2dc37 100644
--- a/packages/react/src/components/select/Select.tsx
+++ b/packages/react/src/components/select/Select.tsx
@@ -7,9 +7,9 @@ import { Button, ListBox, Popover, Select } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
 import type { Override } from '~/utilities/types'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 import SelectValue from '~/components/select/SelectValue'
-import { SelectContext, useSelect } from '~/components/select/use-select.hook'
+import { SelectContext, useSelectValue } from '~/components/select/use-select.hook'
 
 const __ELEMENT_TYPE__ = 'select'
 
@@ -67,9 +67,9 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Select
 
-    const group = useFormGroupContext()
+    const group = useFormGroup()
 
-    const context = useSelect({
+    const context = useSelectValue({
       ref: (group?.ref as React.RefObject<HTMLInputElement> | undefined) ?? ref,
       name: group?.name,
       behavior,
diff --git a/packages/react/src/components/select/SelectOption.tsx b/packages/react/src/components/select/SelectOption.tsx
index 90ce958..0850394 100644
--- a/packages/react/src/components/select/SelectOption.tsx
+++ b/packages/react/src/components/select/SelectOption.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { ListBoxItem } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useSelectContext } from '~/components/select/use-select.hook'
+import { useSelect } from '~/components/select/use-select.hook'
 
 const __ELEMENT_TYPE__ = 'option'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? ListBoxItem
 
-    const { slots } = useSelectContext()
+    const { slots } = useSelect()
 
     const component = React.useMemo<ListBoxItemProps>(
       () => ({
diff --git a/packages/react/src/components/select/SelectValue.tsx b/packages/react/src/components/select/SelectValue.tsx
index 9da62cd..204edc1 100644
--- a/packages/react/src/components/select/SelectValue.tsx
+++ b/packages/react/src/components/select/SelectValue.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { SelectStateContext, SelectValue } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useSelectContext } from '~/components/select/use-select.hook'
+import { useSelect } from '~/components/select/use-select.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? SelectValue
 
-    const { slots } = useSelectContext()
+    const { slots } = useSelect()
     const { selectedItem } = React.useContext(SelectStateContext)
 
     const component = React.useMemo<SelectValueProps<TData>>(
diff --git a/packages/react/src/components/select/use-select.hook.ts b/packages/react/src/components/select/use-select.hook.ts
index 82b45b8..a9e14a2 100644
--- a/packages/react/src/components/select/use-select.hook.ts
+++ b/packages/react/src/components/select/use-select.hook.ts
@@ -6,7 +6,7 @@ import React from 'react'
 import { select } from '@giantnodes/theme'
 
 import type { ChangeHandler } from '~/utilities/types'
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseSelectProps<TElement extends object> = SelectVariantProps &
   Pick<SelectProps<TElement>, 'onSelectionChange'> & {
@@ -17,9 +17,9 @@ type UseSelectProps<TElement extends object> = SelectVariantProps &
     onChange?: ChangeHandler
   }
 
-type UseSelectReturn = ReturnType<typeof useSelect>
+type SelectContextType = ReturnType<typeof useSelectValue>
 
-export const useSelect = <TElement extends object>(props: UseSelectProps<TElement>) => {
+export const useSelectValue = <TElement extends object>(props: UseSelectProps<TElement>) => {
   const { ref, name, size, status, onChange, onSelectionChange } = props
 
   const slots = React.useMemo(() => select({ size, status }), [size, status])
@@ -45,8 +45,8 @@ export const useSelect = <TElement extends object>(props: UseSelectProps<TElemen
   }
 }
 
-export const [SelectContext, useSelectContext] = createContext<UseSelectReturn>({
+export const [SelectContext, useSelect] = create<SelectContextType>({
   name: 'SelectContext',
   strict: true,
-  errorMessage: 'useSelectContext: `context` is undefined. Seems you forgot to wrap component within <Select />',
+  errorMessage: 'useSelect: `context` is undefined. Seems you forgot to wrap component within <Select.Root />',
 })
diff --git a/packages/react/src/components/switch/Switch.tsx b/packages/react/src/components/switch/Switch.tsx
index d1def79..ce35c24 100644
--- a/packages/react/src/components/switch/Switch.tsx
+++ b/packages/react/src/components/switch/Switch.tsx
@@ -7,7 +7,7 @@ import { toggle } from '@giantnodes/theme'
 import { Switch } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { useFormGroup } from '~/components/form/use-form-group.hook'
 
 const __ELEMENT_TYPE__ = 'label'
 
@@ -31,7 +31,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Switch
 
-    const group = useFormGroupContext()
+    const group = useFormGroup()
 
     const slots = React.useMemo(() => toggle({ color, size }), [color, size])
 
diff --git a/packages/react/src/components/table/Table.tsx b/packages/react/src/components/table/Table.tsx
index 604e7e2..872145e 100644
--- a/packages/react/src/components/table/Table.tsx
+++ b/packages/react/src/components/table/Table.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Table } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { TableContext, useTable } from '~/components/table/use-table.hook'
+import { TableContext, useTableValue } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'table'
 
@@ -34,7 +34,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Table
 
-    const context = useTable({ size, sticky, striped, headingless })
+    const context = useTableValue({ size, sticky, striped, headingless })
 
     const component = React.useMemo<TableProps>(
       () => ({
diff --git a/packages/react/src/components/table/TableBody.tsx b/packages/react/src/components/table/TableBody.tsx
index e4fd82e..625ac4e 100644
--- a/packages/react/src/components/table/TableBody.tsx
+++ b/packages/react/src/components/table/TableBody.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { TableBody } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useTableContext } from '~/components/table/use-table.hook'
+import { useTable } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'tbody'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? TableBody
 
-    const { slots } = useTableContext()
+    const { slots } = useTable()
 
     const component = React.useMemo<TableBodyProps<TData>>(
       () => ({
diff --git a/packages/react/src/components/table/TableCell.tsx b/packages/react/src/components/table/TableCell.tsx
index 2ff2378..ac77683 100644
--- a/packages/react/src/components/table/TableCell.tsx
+++ b/packages/react/src/components/table/TableCell.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Cell } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useTableContext } from '~/components/table/use-table.hook'
+import { useTable } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'td'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Cell
 
-    const { slots } = useTableContext()
+    const { slots } = useTable()
 
     const component = React.useMemo<CellProps>(
       () => ({
diff --git a/packages/react/src/components/table/TableColumn.tsx b/packages/react/src/components/table/TableColumn.tsx
index 4ebaf7e..b5d17ab 100644
--- a/packages/react/src/components/table/TableColumn.tsx
+++ b/packages/react/src/components/table/TableColumn.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Column } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useTableContext } from '~/components/table/use-table.hook'
+import { useTable } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'th'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Column
 
-    const { slots } = useTableContext()
+    const { slots } = useTable()
 
     const component = React.useMemo<ColumnProps>(
       () => ({
diff --git a/packages/react/src/components/table/TableHead.tsx b/packages/react/src/components/table/TableHead.tsx
index 8f362f4..0bab4c3 100644
--- a/packages/react/src/components/table/TableHead.tsx
+++ b/packages/react/src/components/table/TableHead.tsx
@@ -7,7 +7,7 @@ import { Collection, TableHeader, useTableOptions } from 'react-aria-components'
 import type * as Polymophic from '~/utilities/polymorphic'
 import Checkbox from '~/components/checkbox/Checkbox'
 import TableColumn from '~/components/table/TableColumn'
-import { useTableContext } from '~/components/table/use-table.hook'
+import { useTable } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'thead'
 
@@ -31,7 +31,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? TableHeader
 
-    const { slots } = useTableContext()
+    const { slots } = useTable()
     const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions()
 
     const component = React.useMemo<TableHeaderProps<TData>>(
diff --git a/packages/react/src/components/table/TableRow.tsx b/packages/react/src/components/table/TableRow.tsx
index 34887ca..a18251f 100644
--- a/packages/react/src/components/table/TableRow.tsx
+++ b/packages/react/src/components/table/TableRow.tsx
@@ -7,7 +7,7 @@ import { Button, Collection, Row, useTableOptions } from 'react-aria-components'
 import type * as Polymophic from '~/utilities/polymorphic'
 import Checkbox from '~/components/checkbox/Checkbox'
 import TableCell from '~/components/table/TableCell'
-import { useTableContext } from '~/components/table/use-table.hook'
+import { useTable } from '~/components/table/use-table.hook'
 
 const __ELEMENT_TYPE__ = 'tr'
 
@@ -31,7 +31,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Row
 
-    const { slots } = useTableContext()
+    const { slots } = useTable()
     const { selectionBehavior, allowsDragging } = useTableOptions()
 
     const component = React.useMemo<RowProps<TData>>(
diff --git a/packages/react/src/components/table/use-table.hook.ts b/packages/react/src/components/table/use-table.hook.ts
index 581e1a8..2e0baf4 100644
--- a/packages/react/src/components/table/use-table.hook.ts
+++ b/packages/react/src/components/table/use-table.hook.ts
@@ -4,13 +4,13 @@ import type { TableVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { table } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseTableProps = TableVariantProps
 
-type UseTableReturn = ReturnType<typeof useTable>
+type TableContextType = ReturnType<typeof useTableValue>
 
-export const useTable = (props: UseTableProps) => {
+export const useTableValue = (props: UseTableProps) => {
   const { size, sticky, striped, headingless } = props
 
   const slots = React.useMemo(() => table({ size, sticky, striped, headingless }), [size, sticky, striped, headingless])
@@ -20,8 +20,8 @@ export const useTable = (props: UseTableProps) => {
   }
 }
 
-export const [TableContext, useTableContext] = createContext<UseTableReturn>({
+export const [TableContext, useTable] = create<TableContextType>({
   name: 'TableContext',
   strict: true,
-  errorMessage: 'useTableContext: `context` is undefined. Seems you forgot to wrap component within <Table />',
+  errorMessage: 'useTable: `context` is undefined. Seems you forgot to wrap component within <Table.Root />',
 })
diff --git a/packages/react/src/components/tooltip/Tooltip.tsx b/packages/react/src/components/tooltip/Tooltip.tsx
index ab66346..4d6e4e6 100644
--- a/packages/react/src/components/tooltip/Tooltip.tsx
+++ b/packages/react/src/components/tooltip/Tooltip.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { TooltipTrigger } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { TooltipContext, useTooltip } from '~/components/tooltip/use-tooltip.hook'
+import { TooltipContext, useTooltipValue } from '~/components/tooltip/use-tooltip.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'div'
@@ -29,7 +29,7 @@ const Component: ComponentType = <TElement extends React.ElementType = typeof __
 
   const Element = as ?? TooltipTrigger
 
-  const context = useTooltip({})
+  const context = useTooltipValue({})
 
   const component = React.useMemo<Omit<TooltipTriggerComponentProps, 'children'>>(
     () => ({
diff --git a/packages/react/src/components/tooltip/TooltipArrow.tsx b/packages/react/src/components/tooltip/TooltipArrow.tsx
index a84fa62..4437a5e 100644
--- a/packages/react/src/components/tooltip/TooltipArrow.tsx
+++ b/packages/react/src/components/tooltip/TooltipArrow.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { OverlayArrow } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useTooltipContext } from '~/components/tooltip/use-tooltip.hook'
+import { useTooltip } from '~/components/tooltip/use-tooltip.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? OverlayArrow
 
-    const { slots } = useTooltipContext()
+    const { slots } = useTooltip()
 
     return (
       <Element {...rest} ref={ref}>
diff --git a/packages/react/src/components/tooltip/TooltipPopover.tsx b/packages/react/src/components/tooltip/TooltipPopover.tsx
index e899a73..d216bad 100644
--- a/packages/react/src/components/tooltip/TooltipPopover.tsx
+++ b/packages/react/src/components/tooltip/TooltipPopover.tsx
@@ -6,7 +6,7 @@ import { Tooltip } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
 import TooltipArrow from '~/components/tooltip/TooltipArrow'
-import { useTooltipContext } from '~/components/tooltip/use-tooltip.hook'
+import { useTooltip } from '~/components/tooltip/use-tooltip.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Tooltip
 
-    const { slots } = useTooltipContext()
+    const { slots } = useTooltip()
 
     const component = React.useMemo<TooltipProps>(
       () => ({
diff --git a/packages/react/src/components/tooltip/TooltipTrigger.tsx b/packages/react/src/components/tooltip/TooltipTrigger.tsx
index d28d3c2..2b8b6d5 100644
--- a/packages/react/src/components/tooltip/TooltipTrigger.tsx
+++ b/packages/react/src/components/tooltip/TooltipTrigger.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Button } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useTooltipContext } from '~/components/tooltip/use-tooltip.hook'
+import { useTooltip } from '~/components/tooltip/use-tooltip.hook'
 
 const __ELEMENT_TYPE__ = 'button'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Button
 
-    const { slots } = useTooltipContext()
+    const { slots } = useTooltip()
 
     const component = React.useMemo<ButtonProps>(
       () => ({
diff --git a/packages/react/src/components/tooltip/use-tooltip.hook.ts b/packages/react/src/components/tooltip/use-tooltip.hook.ts
index 693183a..21d68b0 100644
--- a/packages/react/src/components/tooltip/use-tooltip.hook.ts
+++ b/packages/react/src/components/tooltip/use-tooltip.hook.ts
@@ -4,13 +4,13 @@ import type { TooltipVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { tooltip } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseTooltipProps = TooltipVariantProps
 
-type UseTooltipReturn = ReturnType<typeof useTooltip>
+type TooltipContextType = ReturnType<typeof useTooltipValue>
 
-export const useTooltip = (_: UseTooltipProps) => {
+export const useTooltipValue = (_: UseTooltipProps) => {
   const slots = React.useMemo(() => tooltip(), [])
 
   return {
@@ -18,8 +18,8 @@ export const useTooltip = (_: UseTooltipProps) => {
   }
 }
 
-export const [TooltipContext, useTooltipContext] = createContext<UseTooltipReturn>({
+export const [TooltipContext, useTooltip] = create<TooltipContextType>({
   name: 'TooltipContext',
   strict: true,
-  errorMessage: 'useTooltipContext: `context` is undefined. Seems you forgot to wrap component within <Tooltip.Root />',
+  errorMessage: 'useTooltip: `context` is undefined. Seems you forgot to wrap component within <Tooltip.Root />',
 })
diff --git a/packages/react/src/components/typography/TypographyHeadingLevel.tsx b/packages/react/src/components/typography/TypographyHeadingLevel.tsx
index a1b8bfe..f586606 100644
--- a/packages/react/src/components/typography/TypographyHeadingLevel.tsx
+++ b/packages/react/src/components/typography/TypographyHeadingLevel.tsx
@@ -5,15 +5,15 @@ import React from 'react'
 import {
   HeadingLevelContext,
   useHeadingLevel,
-  useHeadingLevelContext,
+  useHeadingLevelValue,
 } from '~/components/typography/use-heading-level.hook'
 
 export type TypographyHeadingLevelProps = React.PropsWithChildren
 
 const TypographyHeadingLevel: React.FC<TypographyHeadingLevelProps> = ({ children }) => {
-  const context = useHeadingLevelContext()
+  const context = useHeadingLevel()
 
-  const value = useHeadingLevel({ level: context?.level })
+  const value = useHeadingLevelValue({ level: context?.level })
 
   return <HeadingLevelContext.Provider value={value}>{children}</HeadingLevelContext.Provider>
 }
diff --git a/packages/react/src/components/typography/use-heading-level.hook.ts b/packages/react/src/components/typography/use-heading-level.hook.ts
index 45b4301..88ca251 100644
--- a/packages/react/src/components/typography/use-heading-level.hook.ts
+++ b/packages/react/src/components/typography/use-heading-level.hook.ts
@@ -2,7 +2,7 @@
 
 import React from 'react'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
 
@@ -10,9 +10,9 @@ type UseHeadingLevelProps = {
   level?: HeadingLevel
 }
 
-type UseHeadingLevelReturn = ReturnType<typeof useHeadingLevel>
+type HeadingLevelContext = ReturnType<typeof useHeadingLevelValue>
 
-export const useHeadingLevel = ({ level }: UseHeadingLevelProps) => {
+export const useHeadingLevelValue = ({ level }: UseHeadingLevelProps) => {
   const calculated = React.useMemo<HeadingLevel>(() => {
     const value = level ?? 0
 
@@ -24,9 +24,9 @@ export const useHeadingLevel = ({ level }: UseHeadingLevelProps) => {
   }
 }
 
-export const [HeadingLevelContext, useHeadingLevelContext] = createContext<UseHeadingLevelReturn | undefined>({
+export const [HeadingLevelContext, useHeadingLevel] = create<HeadingLevelContext | undefined>({
   name: 'HeadingLevelContext',
   strict: false,
   errorMessage:
-    'useHeadingLevelContext: `context` is undefined. Seems you forgot to wrap component within <Typography.HeadingLevel />',
+    'useHeadingLevel: `context` is undefined. Seems you forgot to wrap component within <Typography.HeadingLevel />',
 })
diff --git a/packages/react/src/utilities/context.ts b/packages/react/src/utilities/context.ts
deleted file mode 100644
index 6e7d67d..0000000
--- a/packages/react/src/utilities/context.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-
-export type CreateContextOptions = {
-  /**
-   * If `true`, React will throw if context is `null` or `undefined`
-   * In some cases, you might want to support nested context, so you can set it to `false`
-   */
-  strict?: boolean
-  /**
-   * Error message to throw if the context is `undefined`
-   */
-  errorMessage?: string
-  /**
-   * The display name of the context
-   */
-  name?: string
-}
-
-export type CreateContextReturn<T> = [React.Context<T>, () => T]
-
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-export function createContext<ContextType>(options: CreateContextOptions = {}) {
-  const {
-    strict = true,
-    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
-    name,
-  } = options
-
-  const Context = React.createContext<ContextType | undefined>(undefined)
-
-  Context.displayName = name
-
-  const useContext = () => {
-    const context = React.useContext(Context)
-
-    if (!context && strict) {
-      const error = new Error(errorMessage)
-
-      error.name = 'ContextError'
-      throw error
-    }
-
-    return context
-  }
-
-  return [Context, useContext] as CreateContextReturn<ContextType>
-}
diff --git a/packages/react/src/utilities/create-context.tsx b/packages/react/src/utilities/create-context.tsx
new file mode 100644
index 0000000..fc2a78c
--- /dev/null
+++ b/packages/react/src/utilities/create-context.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import React from 'react'
+
+type CreateContextOptions = {
+  /**
+   * If true, the useContext hook will throw an error when the context is undefined.
+   * Set to false if you want to support nested contexts.
+   *
+   * @default true
+   */
+  strict?: boolean
+
+  /**
+   * Custom error message to display when the context is undefined and strict mode is enabled.
+   *
+   * @default 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider'
+   */
+  errorMessage?: string
+
+  /**
+   * The display name for the context, useful for debugging.
+   */
+  name?: string
+}
+
+type CreateContextReturn<ContextType> = readonly [React.Context<ContextType>, () => ContextType]
+
+/**
+ * A utility function to create a React context with improved type safety, error handling, and state management.
+ *
+ * @template ContextType The type of the context value.
+ * @template ContextProps The type of the props passed to the Provider component.
+ * @param useValue A hook that returns the value to be provided by the context.
+ * @param options Configuration options for creating the context.
+ * @returns A readonly tuple containing the Provider component and a custom useContext hook.
+ *
+ * @example
+ * type UseSessionProps {
+ *   id: User
+ * }
+ *
+ * type SessionContextType = ReturnType<typeof useAlertValue>
+ *
+ * const useSessionValue = ({ id }: UseSessionProps) => {
+ *   const [id, setId] = React.useState<string>(id);
+ *   return { id };
+ * };
+ *
+ * const [SessionContext, useSession] = create<SessionContextType>({
+ *   name: 'SessionContext',
+ * });
+ *
+ * // In the root component:
+ * const context = useSessionValue({ id: "cbf3d503-4af5-4502-8a36-9b6b99a9364d" })
+ *
+ * <SessionContext.Provider value={context}>
+ *   <App />
+ * </SessionContext.Provider>
+ *
+ * // In a consumer component:
+ * const { id } = useSession();
+ */
+export function create<ContextType>(options: CreateContextOptions = {}) {
+  const {
+    strict = true,
+    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+    name,
+  } = options
+
+  const Context = React.createContext<ContextType | undefined>(undefined)
+
+  Context.displayName = name
+
+  const useContext = (): ContextType => {
+    const context = React.useContext(Context)
+
+    if (!context && strict) {
+      const error = new Error(errorMessage)
+      error.name = 'ContextError'
+      throw error
+    }
+
+    return context as ContextType
+  }
+
+  return [Context, useContext] as CreateContextReturn<ContextType>
+}