refactor(primitives): switch to useContextProps

packages/components/src/components/Dialog/components/DialogBody.tsx

@@ -1,14 +1,12 @@
 'use client';
 
 import type { ReactNode, ComponentRef } from 'react';
-import { forwardRef, useContext, createContext } from 'react';
+import { forwardRef, createContext } from 'react';
 
-import {
-  clsx,
-  type ExtendableComponentPropsWithRef,
-  mergeProps,
-  useMultiRef,
-} from '@koobiq/react-core';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import { clsx } from '@koobiq/react-core';
+import type { ContextValue } from '@koobiq/react-primitives';
+import { useContextProps } from '@koobiq/react-primitives';
 
 import { utilClasses } from '../../../styles/utility';
 import s from '../Dialog.module.css';
@@ -27,16 +25,16 @@ export type DialogBodyProps = ExtendableComponentPropsWithRef<
   'div'
 >;
 
-export const DialogBodyContext = createContext<DialogBodyProps>({});
+export const DialogBodyContext =
+  createContext<ContextValue<DialogBodyProps, HTMLDivElement>>(null);
 
 export const DialogBody = forwardRef<DialogBodyRef, DialogBodyProps>(
   ({ children, className, ...other }, ref) => {
-    const defaultProps = useContext(DialogBodyContext);
-    const { ref: contextRef } = mergeProps(defaultProps, other);
+    const [, ctxRef] = useContextProps({}, ref, DialogBodyContext);
 
     return (
       <div
-        ref={useMultiRef([ref, contextRef])}
+        ref={ctxRef}
         className={clsx(
           s.content,
           utilClasses.typography['text-normal'],

packages/primitives/src/components/Button/Button.tsx

@@ -10,15 +10,14 @@ import {
 } from '@koobiq/react-core';
 
 import { useButton } from '../../behaviors';
-import { useRenderProps } from '../../utils';
-import { useSlottedContext } from '../../utils/useSlottedContext';
+import { useContextProps, useRenderProps } from '../../utils';
 
 import { ButtonContext } from './ButtonContext';
 import type { ButtonBaseProps } from './types';
 
 export const Button = polymorphicForwardRef<'button', ButtonBaseProps>(
   (props, ref) => {
-    const commonProps = useSlottedContext(props, ButtonContext, props.slot);
+    const [ctxProps, ctxRef] = useContextProps(props, ref, ButtonContext);
 
     const {
       as,
@@ -33,16 +32,16 @@ export const Button = polymorphicForwardRef<'button', ButtonBaseProps>(
       formMethod,
       formNoValidate,
       formTarget,
-    } = commonProps;
+    } = ctxProps;
 
     const Tag = as || 'button';
 
-    const domRef = useDOMRef(ref);
+    const domRef = useDOMRef(ctxRef);
 
     const { isHovered, isPressed, isFocused, isFocusVisible, buttonProps } =
       useButton(
         {
-          ...commonProps,
+          ...ctxProps,
           ...((isLoading || isDisabled) && {
             onPress: undefined,
             onPressStart: undefined,
@@ -96,8 +95,8 @@ export const Button = polymorphicForwardRef<'button', ButtonBaseProps>(
         data-loading={isLoading || undefined}
         data-disabled={isDisabled || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        {...('tabIndex' in commonProps && { tabIndex })}
-        aria-hidden={commonProps['aria-hidden']}
+        {...('tabIndex' in ctxProps && { tabIndex })}
+        aria-hidden={ctxProps['aria-hidden']}
         aria-disabled={isLoading ? 'true' : buttonProps['aria-disabled']}
         aria-busy={isLoading}
         ref={domRef}

packages/primitives/src/components/Button/ButtonContext.tsx

@@ -2,10 +2,10 @@
 
 import { createContext } from 'react';
 
-import type { ButtonProps } from './index';
+import type { ContextValue } from '../../utils';
 
-export type ButtonContextProps = {
-  slots?: Record<string, ButtonProps>;
-};
+import type { ButtonProps } from './index';
 
-export const ButtonContext = createContext<ButtonContextProps>({});
+export const ButtonContext = createContext<
+  ContextValue<ButtonProps, HTMLElement>
+>({});

packages/primitives/src/components/Label/Label.tsx

@@ -1,22 +1,22 @@
 'use client';
 
 import type { ComponentPropsWithRef, ElementType } from 'react';
-import { useContext } from 'react';
 
-import { polymorphicForwardRef, mergeProps } from '@koobiq/react-core';
+import { polymorphicForwardRef } from '@koobiq/react-core';
+
+import { useContextProps } from '../../utils';
 
 import type { LabelBaseProps } from './index';
 import { LabelContext } from './index';
 
 export const Label = polymorphicForwardRef<'label', LabelBaseProps>(
   (props, ref) => {
-    const { as: Tag = 'label', children, ...other } = props;
+    const [ctxProps, ctxRef] = useContextProps(props, ref, LabelContext);
 
-    const defaultProps = useContext(LabelContext);
-    const commonProps = mergeProps(defaultProps, other);
+    const { as: Tag = 'label', children, ...other } = ctxProps;
 
     return (
-      <Tag {...commonProps} ref={ref}>
+      <Tag {...other} ref={ctxRef}>
         {children}
       </Tag>
     );

packages/primitives/src/components/Label/LabelContext.tsx

@@ -2,6 +2,9 @@
 
 import { createContext } from 'react';
 
+import type { ContextValue } from '../../utils';
+
 import type { LabelProps } from './index';
 
-export const LabelContext = createContext<LabelProps>({});
+export const LabelContext =
+  createContext<ContextValue<LabelProps, HTMLElement>>(null);

packages/primitives/src/components/Text/Text.tsx

@@ -4,17 +4,17 @@ import type { ComponentPropsWithRef, ComponentRef, ElementType } from 'react';
 
 import { polymorphicForwardRef } from '@koobiq/react-core';
 
-import { useSlottedContext } from '../../utils/useSlottedContext';
+import { useContextProps } from '../../utils';
 
 import { type TextBaseProps, TextContext } from './index';
 
 export const Text = polymorphicForwardRef<'p', TextBaseProps>((props, ref) => {
-  const { as: Tag = 'p', children, slot, ...other } = props;
+  const [ctxProps, ctxRef] = useContextProps(props, ref, TextContext);
 
-  const commonProps = useSlottedContext(other, TextContext, slot);
+  const { as: Tag = 'p', children, ...other } = ctxProps;
 
   return (
-    <Tag {...commonProps} ref={ref}>
+    <Tag {...other} ref={ctxRef}>
       {children}
     </Tag>
   );

packages/primitives/src/components/Text/TextContext.tsx

@@ -2,10 +2,10 @@
 
 import { createContext } from 'react';
 
-import type { TextProps } from './Text';
+import type { ContextValue } from '../../utils';
 
-export type TextContextProps = {
-  slots?: Record<string, TextProps>;
-};
+import type { TextProps } from './Text';
 
-export const TextContext = createContext<TextContextProps>({});
+export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>(
+  {}
+);

packages/primitives/src/utils/index.tsx

@@ -12,7 +12,12 @@ import type {
   DOMProps as SharedDOMProps,
   RefObject,
 } from '@koobiq/react-core';
-import { mergeProps, mergeRefs, useObjectRef } from '@koobiq/react-core';
+import {
+  isNotNil,
+  mergeProps,
+  mergeRefs,
+  useObjectRef,
+} from '@koobiq/react-core';
 
 export const DEFAULT_SLOT = Symbol('default');
 
@@ -179,8 +184,7 @@ export function useSlottedContext<T>(
 ): T | null | undefined {
   const ctx = useContext(context);
 
-  if (slot === null) {
-    // An explicit `null` slot means don't use context.
+  if (!isNotNil(slot)) {
     return null;
   }