@diskette/use-render 0.2.0 → 0.3.0

package/README.md

@@ -1,7 +1,198 @@
 # useRender
 
-_description_
+A React hook for component libraries that enables flexible render prop patterns, allowing consumers to override a component's default rendered element while maintaining proper `ref`, `className`, and `style` merging.
+
+## Installation
+
+```bash
+pnpm add @diskette/use-render
+```
+
+## Features
+
+- **Render prop support** - Override elements via `render` prop (element or function)
+- **State-aware className** - Resolve classNames dynamically based on component state
+- **State-aware style** - Resolve styles dynamically based on component state
+- **Automatic ref merging** - Combines multiple refs seamlessly
+- **Children as render function** - Pass children as a function receiving state
+
+## Usage
+
+### Building a Component
+
+Use `useRender` inside your component to enable the render prop pattern:
+
+```tsx
+import { useRender, type ComponentProps } from '@diskette/use-render'
+
+interface ButtonState {
+  isPressed: boolean
+  isHovered: boolean
+}
+
+type ButtonProps = ComponentProps<'button', ButtonState>
+
+function Button(props: ButtonProps) {
+  const [isPressed, setIsPressed] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+
+  const state: ButtonState = { isPressed, isHovered }
+
+  return useRender('button', state, {
+    defaultProps: {
+      className: 'btn',
+      onMouseDown: () => setIsPressed(true),
+      onMouseUp: () => setIsPressed(false),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+    },
+    props,
+  })
+}
+```
+
+### Consuming the Component
+
+#### Default Usage
+
+```tsx
+<Button className="primary">Click me</Button>
+```
+
+#### Override with Element
+
+```tsx
+<Button render={<a href="/path" />}>Link styled as button</Button>
+```
+
+#### Override with Function
+
+```tsx
+<Button
+  render={(state, props) => (
+    <a {...props} href="/path" data-pressed={state.isPressed} />
+  )}
+>
+  Link with state access
+</Button>
+```
+
+### State-Aware className
+
+Pass a function to resolve className based on component state:
+
+```tsx
+<Button
+  className={(state, defaultClassName) =>
+    `${defaultClassName} ${state.isPressed ? 'pressed' : ''}`
+  }
+>
+  Press me
+</Button>
+```
+
+Or pass a string to merge with the default className (uses `clsx`):
+
+```tsx
+<Button className="primary large">Click me</Button>
+```
+
+### State-Aware style
+
+Pass a function to resolve styles based on component state:
+
+```tsx
+<Button
+  style={(state) => ({
+    backgroundColor: state.isPressed ? 'darkblue' : 'blue',
+    transform: state.isPressed ? 'scale(0.98)' : undefined,
+  })}
+>
+  Press me
+</Button>
+```
+
+### Children as Render Function
+
+Access state in children:
+
+```tsx
+<Button>{(state) => (state.isPressed ? 'Pressing...' : 'Click me')}</Button>
+```
+
+## API
+
+### `useRender(tag, options)`
+
+```ts
+function useRender<T extends ElementType, S>(
+  tag: T,
+  state,
+  options: UseRenderOptions<T, S>,
+): ReactNode
+```
+
+#### Parameters
+
+- `tag` - The default element type to render (e.g., `'button'`, `'div'`)
+- `options` - Configuration object
+
+#### Options
+
+```ts
+interface UseRenderOptions<T extends ElementType, S> {
+  defaultProps?: React.ComponentProps<T>
+  props?: ComponentProps<T, S>
+  ref?: React.Ref<any> | (React.Ref<any> | undefined)[]
+}
+```
+
+| Option         | Description                                                        |
+| -------------- | ------------------------------------------------------------------ |
+| `defaultProps` | Default props applied to the element                               |
+| `props`        | Consumer-provided props (typically forwarded from component props) |
+| `ref`          | Ref(s) to merge with the consumer's ref                            |
+
+### `ComponentProps<T, S>`
+
+Type for component's external public props. Components using `useRender` should use this type (or extend from it) instead of `React.ComponentProps`. It's essentially `React.ComponentProps<T>` augmented with state-aware `className`, `style`, `children`, and the `render` prop:
+
+```ts
+type ComponentProps<T extends ElementType, S> = BaseComponentProps<T> & {
+  children?: ((state: S) => ReactNode) | ReactNode
+  className?: ClassNameResolver<S>
+  style?: StyleResolver<S>
+  render?: Renderer<T, S> | JSX.Element
+}
+```
+
+### `ClassNameResolver<S>`
+
+```ts
+type ClassNameResolver<S> =
+  | ((state: S, defaultClassName?: string) => string | undefined)
+  | string
+  | undefined
+```
+
+### `StyleResolver<S>`
+
+```ts
+type StyleResolver<S> =
+  | ((state: S, defaultStyle?: CSSProperties) => CSSProperties | undefined)
+  | CSSProperties
+  | undefined
+```
+
+### `Renderer<T, S>`
+
+```ts
+type Renderer<T extends ElementType, S> = (
+  state: S,
+  props: ComponentPropsWithRef<T>,
+) => ReactNode
+```
 
 ## License
 
-[MIT](./LICENSE) License ©
+[MIT](./LICENSE) License

package/dist/types.d.ts

@@ -1,6 +1,8 @@
-import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
-export type ClassNameResolver<State> = ((state: State, defaultClassName?: string | undefined) => string | undefined) | string | undefined;
-export type StyleResolver<State> = ((state: State, defaultStyle?: CSSProperties | undefined) => CSSProperties | undefined) | CSSProperties | undefined;
-export type Renderer<T extends ElementType, S> = (state: S, props: ComponentProps<T>) => ReactNode;
+import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactNode } from 'react';
+export type ClassNameResolver<State> = ((state: State, defaultClassName?: string) => string | undefined) | string | undefined;
+export type StyleResolver<State> = ((state: State, defaultStyle?: CSSProperties) => CSSProperties | undefined) | CSSProperties | undefined;
+export type Renderer<S> = (state: S, props: React.HTMLAttributes<any> & {
+    ref?: React.Ref<any> | undefined;
+}) => ReactNode;
 export type DataAttributes = Record<`data-${string}`, string | number | boolean>;
-export type BaseComponentProps<T extends ElementType> = Omit<ComponentProps<T>, 'children' | 'className' | 'style'>;
+export type BaseComponentProps<T extends ElementType> = Omit<ComponentPropsWithRef<T>, 'children' | 'className' | 'style'>;

package/dist/use-composed-ref.d.ts

@@ -0,0 +1,14 @@
+import { type Ref, type RefCallback } from 'react';
+/**
+ * Assigns a value to a ref.
+ * @param ref The ref to assign the value to.
+ * @param value The value to assign to the ref.
+ * @returns The ref cleanup callback, if any.
+ */
+export declare function assignRef<T>(ref: Ref<T> | undefined | null, value: T | null): ReturnType<RefCallback<T>>;
+/**
+ * Composes multiple refs into a single one and memoizes the result to avoid refs execution on each render.
+ * @param refs List of refs to merge.
+ * @returns Merged ref.
+ */
+export declare function useComposedRef<T>(refs: (Ref<T> | undefined)[]): Ref<T>;

package/dist/use-composed-ref.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+/**
+ * Assigns a value to a ref.
+ * @param ref The ref to assign the value to.
+ * @param value The value to assign to the ref.
+ * @returns The ref cleanup callback, if any.
+ */
+export function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        return ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+function mergeRefs(refs) {
+    return (value) => {
+        const cleanups = [];
+        for (const ref of refs) {
+            const cleanup = assignRef(ref, value);
+            const isCleanup = typeof cleanup === 'function';
+            cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    };
+}
+/**
+ * Composes multiple refs into a single one and memoizes the result to avoid refs execution on each render.
+ * @param refs List of refs to merge.
+ * @returns Merged ref.
+ */
+export function useComposedRef(refs) {
+    return useMemo(() => mergeRefs(refs), refs);
+}

package/dist/use-render.d.ts

@@ -4,16 +4,15 @@ export type ComponentProps<T extends ElementType, S> = BaseComponentProps<T> & {
     children?: ((state: S) => ReactNode) | ReactNode;
     className?: ClassNameResolver<S>;
     style?: StyleResolver<S>;
-    render?: Renderer<T, S> | JSX.Element;
+    render?: Renderer<S> | JSX.Element;
 };
 export interface UseRenderOptions<T extends ElementType, S> {
     defaultProps?: React.ComponentProps<T> & DataAttributes;
     props?: ComponentProps<T, S> & DataAttributes;
     ref?: React.Ref<any> | (React.Ref<any> | undefined)[];
-    state: S;
 }
 /**
  * Hook for enabling a render prop in custom components. Designed to be used by component libraries as an implementation detail
  * in providing a way to override a component's default rendered element.
  */
-export declare function useRender<T extends ElementType, S>(tag: T, options: UseRenderOptions<T, S>): JSX.Element;
+export declare function useRender<T extends ElementType, S>(tag: T, state: S, options: UseRenderOptions<T, S>): ReactNode;

package/dist/use-render.js

@@ -1,38 +1,39 @@
-import { cloneElement, createElement, isValidElement, useMemo } from 'react';
-import { useMergeRefs } from "./use-merge-refs.js";
-import { isFunction, isUndefined, resolveClassName, resolveStyle, } from "./utils.js";
+import { cloneElement, createElement, isValidElement } from 'react';
+import { useComposedRef } from "./use-composed-ref.js";
+import { isFunction, isString, mergeProps, resolveClassName, resolveStyle, } from "./utils.js";
 /**
  * Hook for enabling a render prop in custom components. Designed to be used by component libraries as an implementation detail
  * in providing a way to override a component's default rendered element.
  */
-export function useRender(tag, options) {
-    const { defaultProps, props = {}, ref: optionsRef, state } = options;
-    const defaultClassName = defaultProps?.className;
-    const defaultStyle = defaultProps?.style;
-    const defaultChildren = defaultProps?.children;
-    const { children, className: propsClassName, style: propsStyle, ref: propsRef, render, ...restProps } = defaultProps
-        ? { ...defaultProps, ...props }
-        : props;
-    const resolvedClassName = resolveClassName(defaultClassName, propsClassName, state);
-    const resolvedStyle = resolveStyle(defaultStyle, propsStyle, state);
-    const refs = useMemo(() => {
-        const refsArr = Array.isArray(optionsRef) ? optionsRef : [optionsRef];
-        if (propsRef) {
-            refsArr.push(propsRef);
-        }
-        return refsArr;
-    }, [optionsRef, propsRef]);
-    const mergedRef = useMergeRefs(refs);
+export function useRender(tag, state, options) {
+    // Workarounds for getting the prop objects to be typed. But should still be ok as the properties we need is common to all elements
+    const defaultProps = options.defaultProps ?? {};
+    const props = (options.props ?? {});
+    const { className: defaultClassName, style: defaultStyle, children: defaultChildren, ...defaults } = defaultProps;
+    const { className, style, children, ref, render, ...rest } = props ?? {};
+    const resolvedClassName = resolveClassName(defaultClassName, className, state);
+    const resolvedStyle = resolveStyle(defaultStyle, style, state);
+    const refs = Array.isArray(options.ref)
+        ? [ref, ...options.ref]
+        : [ref, options.ref];
+    const mergedRef = useComposedRef(refs);
+    // Another workaround for getting component props typed
     const resolvedProps = {
-        ...restProps,
-        ...(!isUndefined(resolvedClassName) && { className: resolvedClassName }),
-        ...(!isUndefined(resolvedStyle) && { style: resolvedStyle }),
-        ...(mergedRef !== null && { ref: mergedRef }),
+        ...mergeProps(defaults, rest),
+        ref: mergedRef,
     };
+    if (isString(resolvedClassName)) {
+        resolvedProps.className = resolvedClassName;
+    }
+    if (typeof resolvedStyle === 'object') {
+        resolvedProps.style = resolvedStyle;
+    }
     const resolvedChildren = isFunction(children) ? children(state) : children;
+    // For `<Component render={<a />} />`
     if (isValidElement(render)) {
-        return cloneElement(render, resolvedProps, resolvedChildren ?? defaultChildren);
+        return cloneElement(render, resolvedProps, resolvedChildren);
     }
+    // For `<Component render={(state, props) => <a {...props} />)} />`
     if (isFunction(render)) {
         return render(state, {
             ...resolvedProps,

package/dist/use-render.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/use-render.test.jsx

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { useRender } from "./use-render.js";
+function createBtn(defaultProps) {
+    return function Button(props) {
+        const [isActive, setIsActive] = useState(false);
+        const state = { isActive };
+        return useRender('button', state, {
+            props,
+            defaultProps: {
+                onClick: () => setIsActive((cur) => !cur),
+                ...defaultProps,
+            },
+        });
+    };
+}
+describe('useRender', () => {
+    describe('className', () => {
+        test('renders with static string className', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button className="btn-primary">Click</Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveClass('btn-primary');
+        });
+        test('className function receives state', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button className={(state) => (state.isActive ? 'active' : 'inactive')}>
+          Click
+        </Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveClass('inactive');
+            await button.click();
+            await expect.element(button).toHaveClass('active');
+        });
+        test('className function receives defaultClassName as second argument', async () => {
+            const Button = createBtn({ className: 'btn-default' });
+            const { getByRole } = await render(<Button className={(_state, defaultClassName) => `custom ${defaultClassName ?? ''}`}>
+          Click
+        </Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveClass('custom');
+            await expect.element(button).toHaveClass('btn-default');
+        });
+        test('merges props className with defaultProps className', async () => {
+            const Button = createBtn({ className: 'btn-base' });
+            const { getByRole } = await render(<Button className="btn-primary">Click</Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveClass('btn-base');
+            await expect.element(button).toHaveClass('btn-primary');
+        });
+    });
+    describe('style', () => {
+        test('renders with static style object', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button style={{ backgroundColor: 'red' }}>Click</Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveStyle({ backgroundColor: 'red' });
+        });
+        test('style function receives state', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button style={(state) => ({
+                    backgroundColor: state.isActive ? 'green' : 'gray',
+                })}>
+          Click
+        </Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveStyle({ backgroundColor: 'gray' });
+            await button.click();
+            await expect.element(button).toHaveStyle({ backgroundColor: 'green' });
+        });
+        test('style function receives defaultStyle as second argument', async () => {
+            const Button = createBtn({ style: { padding: '10px' } });
+            const { getByRole } = await render(<Button style={(_state, defaultStyle) => ({
+                    ...defaultStyle,
+                    color: 'blue',
+                })}>
+          Click
+        </Button>);
+            const button = getByRole('button');
+            await expect
+                .element(button)
+                .toHaveStyle({ padding: '10px', color: 'blue' });
+        });
+        test('merges props style with defaultProps style', async () => {
+            const Button = createBtn({
+                style: { padding: '10px', margin: '5px' },
+            });
+            const { getByRole } = await render(<Button style={{ padding: '20px', color: 'red' }}>Click</Button>);
+            const button = getByRole('button');
+            // Props style should override default where they overlap
+            await expect.element(button).toHaveStyle({
+                padding: '20px',
+                margin: '5px',
+                color: 'red',
+            });
+        });
+    });
+    describe('children', () => {
+        test('renders static children', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button>Static Text</Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveTextContent('Static Text');
+        });
+        test('children function receives state', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button>{(state) => (state.isActive ? 'Active!' : 'Inactive')}</Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveTextContent('Inactive');
+            await button.click();
+            await expect.element(button).toHaveTextContent('Active!');
+        });
+        test('uses defaultProps children when no children provided', async () => {
+            const Button = createBtn({ children: 'Default Text' });
+            const { getByRole } = await render(<Button />);
+            const button = getByRole('button');
+            await expect.element(button).toHaveTextContent('Default Text');
+        });
+    });
+    describe('render', () => {
+        test('renders element from render prop instead of default tag', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button render={<a href="/path"/>}>Link</Button>);
+            const link = getByRole('link');
+            await expect.element(link).toHaveTextContent('Link');
+            await expect.element(link).toHaveAttribute('href', '/path');
+        });
+        test('render function receives state and props', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button className="custom" render={(state, props) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
+                        e.preventDefault();
+                        props.onClick?.(e);
+                    }}/>)}>
+          Link
+        </Button>);
+            const link = getByRole('link');
+            await expect.element(link).toHaveTextContent('Link');
+            await expect.element(link).toHaveAttribute('href', '/path');
+            await expect.element(link).toHaveClass('custom');
+            await expect.element(link).toHaveAttribute('data-active', 'false');
+            await link.click();
+            await expect.element(link).toHaveAttribute('data-active', 'true');
+        });
+        test('element render prop with children as function', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button render={<a href="/path"/>}>
+          {(state) => (state.isActive ? 'Active Link' : 'Inactive Link')}
+        </Button>);
+            const link = getByRole('link');
+            await expect.element(link).toHaveTextContent('Inactive Link');
+            await expect.element(link).toHaveAttribute('href', '/path');
+        });
+        test('function render prop with children as function', async () => {
+            const Button = createBtn();
+            const { getByRole } = await render(<Button render={(state, props) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
+                        e.preventDefault();
+                        props.onClick?.(e);
+                    }}/>)}>
+          {(state) => (state.isActive ? 'Active Link' : 'Inactive Link')}
+        </Button>);
+            const link = getByRole('link');
+            await expect.element(link).toHaveTextContent('Inactive Link');
+            await expect.element(link).toHaveAttribute('data-active', 'false');
+            await link.click();
+            await expect.element(link).toHaveTextContent('Active Link');
+            await expect.element(link).toHaveAttribute('data-active', 'true');
+        });
+    });
+    describe('event handler composition', () => {
+        test('composes event handlers - both run, user first then default', async () => {
+            const callOrder = [];
+            const defaultHandler = vi.fn(() => callOrder.push('default'));
+            const userHandler = vi.fn(() => callOrder.push('user'));
+            const Button = createBtn({ onMouseEnter: defaultHandler });
+            const { getByRole } = await render(<Button onMouseEnter={userHandler}>Click</Button>);
+            const button = getByRole('button');
+            await button.hover();
+            expect(defaultHandler).toHaveBeenCalledTimes(1);
+            expect(userHandler).toHaveBeenCalledTimes(1);
+            expect(callOrder).toEqual(['user', 'default']);
+        });
+        test('user handler return value is preserved', async () => {
+            const defaultHandler = vi.fn(() => 'default-result');
+            const userHandler = vi.fn(() => 'user-result');
+            let capturedResult;
+            function TestButton(props) {
+                const [isActive, setIsActive] = useState(false);
+                return useRender('button', { isActive }, {
+                    props,
+                    defaultProps: {
+                        onClick: (_e) => {
+                            setIsActive((cur) => !cur);
+                            return defaultHandler();
+                        },
+                    },
+                });
+            }
+            const { getByRole } = await render(<TestButton onClick={() => {
+                    capturedResult = userHandler();
+                    return capturedResult;
+                }}>
+          Click
+        </TestButton>);
+            const button = getByRole('button');
+            await button.click();
+            expect(userHandler).toHaveBeenCalled();
+            expect(defaultHandler).toHaveBeenCalled();
+            expect(capturedResult).toBe('user-result');
+        });
+        test('only default handler runs when no user handler provided', async () => {
+            const defaultHandler = vi.fn();
+            const Button = createBtn({ onMouseEnter: defaultHandler });
+            const { getByRole } = await render(<Button>Click</Button>);
+            const button = getByRole('button');
+            await button.hover();
+            expect(defaultHandler).toHaveBeenCalledTimes(1);
+        });
+        test('only user handler runs when no default handler', async () => {
+            const userHandler = vi.fn();
+            const Button = createBtn();
+            const { getByRole } = await render(<Button onMouseEnter={userHandler}>Click</Button>);
+            const button = getByRole('button');
+            await button.hover();
+            expect(userHandler).toHaveBeenCalledTimes(1);
+        });
+        test('composed onClick still updates internal state', async () => {
+            const userHandler = vi.fn();
+            const Button = createBtn();
+            const { getByRole } = await render(<Button className={(state) => (state.isActive ? 'active' : 'inactive')} onClick={userHandler}>
+          Click
+        </Button>);
+            const button = getByRole('button');
+            await expect.element(button).toHaveClass('inactive');
+            await button.click();
+            await expect.element(button).toHaveClass('active');
+            expect(userHandler).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/dist/utils.d.ts

@@ -1,7 +1,14 @@
 import type { CSSProperties } from 'react';
 import type { ClassNameResolver, StyleResolver } from './types.ts';
+export declare const isString: (value: unknown) => value is string;
 export declare const isFunction: (value: unknown) => value is Function;
 export declare const isUndefined: (value: unknown) => value is undefined;
+/**
+ * Merges two props objects, composing event handlers.
+ * - Event handlers (on[A-Z]) are composed: user handler runs first, then default
+ * - All other props: user props override defaults
+ */
+export declare function mergeProps<T extends Record<string, unknown>>(defaultProps: T, props: T): T;
 /**
  * Resolves and merges className values from defaultProps and props.
  * - Resolves function values with the provided state
@@ -16,3 +23,6 @@ export declare function resolveClassName<State>(defaultClassName: ClassNameResol
  * - Function props receive the resolved default value
  */
 export declare function resolveStyle<State>(defaultStyle: StyleResolver<State>, propsStyle: StyleResolver<State>, state: State): CSSProperties | undefined;
+type ClassValue = ClassValue[] | Record<string, any> | string | number | bigint | null | boolean | undefined;
+export declare function clsx(...inputs: ClassValue[]): string;
+export {};

package/dist/utils.js

@@ -1,6 +1,26 @@
-import { clsx } from 'clsx';
+export const isString = (value) => typeof value === 'string';
 export const isFunction = (value) => typeof value === 'function';
 export const isUndefined = (value) => typeof value === 'undefined';
+/**
+ * Merges two props objects, composing event handlers.
+ * - Event handlers (on[A-Z]) are composed: user handler runs first, then default
+ * - All other props: user props override defaults
+ */
+export function mergeProps(defaultProps, props) {
+    const result = { ...defaultProps, ...props };
+    for (const key in defaultProps) {
+        const isHandler = /^on[A-Z]/.test(key);
+        if (isHandler && defaultProps[key] && props[key]) {
+            ;
+            result[key] = (...args) => {
+                const userResult = props[key](...args);
+                defaultProps[key](...args);
+                return userResult;
+            };
+        }
+    }
+    return result;
+}
 /**
  * Resolves and merges className values from defaultProps and props.
  * - Resolves function values with the provided state
@@ -47,3 +67,15 @@ export function resolveStyle(defaultStyle, propsStyle, state) {
         return resolvedDefault;
     }
 }
+export function clsx(...inputs) {
+    let str = '';
+    let tmp;
+    for (let i = 0; i < inputs.length; i++) {
+        if ((tmp = arguments[i])) {
+            if (isString(tmp)) {
+                str += (str && ' ') + tmp;
+            }
+        }
+    }
+    return str;
+}

package/package.json

@@ -1,29 +1,36 @@
 {
   "name": "@diskette/use-render",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "exports": "./dist/index.js",
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "@types/react": "*",
-    "react": "^18.0 || ^19.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
     "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.13",
     "oxlint": "^1.29.0",
     "oxlint-tsgolint": "^0.8.1",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.13",
     "vitest-browser-react": "^2.0.2"
@@ -40,13 +47,9 @@
     "singleQuote": true
   },
   "license": "MIT",
-  "dependencies": {
-    "clsx": "^2.1.1"
-  },
   "scripts": {
-    "dev": "tsc --watch -p tsconfig.build.json",
-    "build": "rm -rf && tsc -p tsconfig.build.json",
-    "test": "vitest run",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "test": "vitest run --browser.headless",
     "typecheck": "tsc",
     "lint": "oxlint --type-aware src",
     "release": "changeset publish && git push --follow-tags"

package/dist/use-merge-refs.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-type Ref<Instance> = Exclude<React.Ref<Instance>, React.RefObject<Instance>> | React.RefObject<Instance | null>;
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- * @see https://floating-ui.com/docs/react-utils#usemergerefs
- */
-export declare function useMergeRefs<Instance>(refs: Array<Ref<Instance> | undefined>): null | React.RefCallback<Instance>;
-export {};

package/dist/use-merge-refs.js

@@ -1,45 +0,0 @@
-import * as React from 'react';
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- * @see https://floating-ui.com/docs/react-utils#usemergerefs
- */
-export function useMergeRefs(refs) {
-    const cleanupRef = React.useRef(undefined);
-    const refEffect = React.useCallback((instance) => {
-        const cleanups = refs.map((ref) => {
-            if (ref == null) {
-                return;
-            }
-            if (typeof ref === 'function') {
-                const refCallback = ref;
-                const refCleanup = refCallback(instance);
-                return typeof refCleanup === 'function'
-                    ? refCleanup
-                    : () => {
-                        refCallback(null);
-                    };
-            }
-            ref.current = instance;
-            return () => {
-                ref.current = null;
-            };
-        });
-        return () => {
-            cleanups.forEach((refCleanup) => refCleanup?.());
-        };
-    }, refs);
-    return React.useMemo(() => {
-        if (refs.every((ref) => ref == null)) {
-            return null;
-        }
-        return (value) => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = undefined;
-            }
-            if (value != null) {
-                cleanupRef.current = refEffect(value);
-            }
-        };
-    }, refs);
-}