@lucasbernardosn/react-utils 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,79 @@
+# @lucasbernardosn/react-utils
+
+Hooks e helpers de React sem relação com UI: contexto estrito, refs combinadas, media query e
+área de transferência. É peer do [`@lucasbernardosn/react-ui`](https://www.npmjs.com/package/@lucasbernardosn/react-ui)
+e do [`@lucasbernardosn/react-table`](https://www.npmjs.com/package/@lucasbernardosn/react-table),
+e serve também sozinho.
+
+## Instalação
+
+```bash
+pnpm add @lucasbernardosn/react-utils react
+```
+
+O React (19) é peer: o app e o pacote usam a mesma cópia.
+
+## Hooks
+
+### `useMediaQuery`
+
+Se uma media query CSS casa, atualizado quando a viewport ou o dispositivo mudam. No servidor e
+na hidratação o valor é o `defaultValue` (`false`, por padrão), e o navegador corrige logo em
+seguida.
+
+```tsx
+import { useMediaQuery } from '@lucasbernardosn/react-utils';
+
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+const isWide = useMediaQuery('(min-width: 64rem)', { defaultValue: true });
+```
+
+### `useCopyToClipboard`
+
+Copia um texto para a área de transferência. O `copy` devolve uma promise com o resultado da
+cópia, e o `copiedText` guarda o último texto copiado (`null` antes da primeira cópia ou depois de
+uma que falhou). Sem a API Clipboard (fora de HTTPS, no servidor), o `copy` resolve `false` em vez
+de lançar.
+
+```tsx
+import { useCopyToClipboard } from '@lucasbernardosn/react-utils';
+
+const { copiedText, copy } = useCopyToClipboard();
+
+<button type="button" onClick={() => copy(invoice.key)}>
+  {copiedText === invoice.key ? 'Copiado' : 'Copiar a chave'}
+</button>;
+```
+
+## Helpers
+
+### `createContext`
+
+Cria um contexto estrito: o hook lança um erro quando chamado fora do Provider, com o nome do
+contexto e os componentes que o fornecem na mensagem. O Provider e o hook recebem o nome na
+desestruturação.
+
+```tsx
+import { createContext } from '@lucasbernardosn/react-utils';
+
+export const [CartContextProvider, useCartContext] = createContext<Cart>({
+  name: 'CartContext',
+  providers: ['CartContextProvider'],
+});
+```
+
+### `mergeRefs`
+
+Junta várias refs (callback ou objeto) numa ref callback só; as `null` e `undefined` são
+ignoradas. Serve para um elemento que precisa ir para uma ref interna e para a ref recebida por
+props.
+
+```tsx
+import { mergeRefs } from '@lucasbernardosn/react-utils';
+
+<div ref={mergeRefs(localRef, props.ref)} />;
+```
+
+## Licença
+
+MIT.

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 import { useCopyToClipboard } from "./use-copy-to-clipboard.js";
-export { useCopyToClipboard };
+import { UseMediaQueryOptions, useMediaQuery } from "./use-media-query.js";
+export { UseMediaQueryOptions, useCopyToClipboard, useMediaQuery };

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
 import { useCopyToClipboard } from "./use-copy-to-clipboard.js";
-export { useCopyToClipboard };
+import { useMediaQuery } from "./use-media-query.js";
+export { useCopyToClipboard, useMediaQuery };

package/dist/hooks/use-media-query.d.ts

@@ -1,23 +1,17 @@
 //#region src/hooks/use-media-query.d.ts
-/**
- * Configurações opcionais para controlar o comportamento inicial do hook useMediaQuery.
- */
-type UseMediaQueryOptions = {
-  /** Valor padrão retornado quando `initializeWithValue` é false. */
+export type UseMediaQueryOptions = {
+  /**
+   * Valor no servidor e na hidratação, antes de o navegador responder.
+   *
+   * @default false
+   */
   defaultValue?: boolean;
-  /** Define se deve inicializar com o valor atual da media query. */
-  initializeWithValue?: boolean;
 };
 /**
- * Monitora continuamente mudanças em media queries CSS, reagindo automaticamente
- * a alterações no tamanho da viewport ou outras características do dispositivo.
- *
- * O hook gerencia automaticamente a adição e remoção de listeners, prevenindo
- * vazamentos de memória quando o componente é desmontado.
+ * Acompanha se uma media query CSS casa, reagindo às mudanças da viewport ou do dispositivo.
  *
- * @param query - String da media query CSS a ser monitorada (ex: `"(min-width: 768px)"`).
- * @param options - Configurações opcionais para controlar o comportamento inicial do hook.
- * @returns Verdadeiro quando a media query atual corresponde à condição especificada, falso caso contrário.
+ * Usa `useSyncExternalStore`: no servidor e na hidratação o valor é o `defaultValue`, e o
+ * navegador corrige logo em seguida. O listener é removido ao desmontar ou ao trocar a `query`.
  */
 export declare const useMediaQuery: (query: string, options?: UseMediaQueryOptions) => boolean;
 //#endregion

package/dist/hooks/use-media-query.js

@@ -1,39 +1,26 @@
-import { useCallback, useLayoutEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 //#region src/hooks/use-media-query.ts
 /**
-* Monitora continuamente mudanças em media queries CSS, reagindo automaticamente
-* a alterações no tamanho da viewport ou outras características do dispositivo.
+* Acompanha se uma media query CSS casa, reagindo às mudanças da viewport ou do dispositivo.
 *
-* O hook gerencia automaticamente a adição e remoção de listeners, prevenindo
-* vazamentos de memória quando o componente é desmontado.
-*
-* @param query - String da media query CSS a ser monitorada (ex: `"(min-width: 768px)"`).
-* @param options - Configurações opcionais para controlar o comportamento inicial do hook.
-* @returns Verdadeiro quando a media query atual corresponde à condição especificada, falso caso contrário.
+* Usa `useSyncExternalStore`: no servidor e na hidratação o valor é o `defaultValue`, e o
+* navegador corrige logo em seguida. O listener é removido ao desmontar ou ao trocar a `query`.
 */
 const useMediaQuery = (query, options = {}) => {
-	const { defaultValue = false, initializeWithValue = true } = options;
-	const getMatches = useCallback((query) => {
-		return window.matchMedia(query).matches;
-	}, []);
-	const [matches, setMatches] = useState(() => {
-		if (initializeWithValue) return getMatches(query);
-		return defaultValue;
-	});
-	const handleChange = useCallback(() => {
-		setMatches(getMatches(query));
-	}, [query, getMatches]);
-	useLayoutEffect(() => {
-		const matchMedia = window.matchMedia(query);
-		handleChange();
-		if (matchMedia.addListener) matchMedia.addListener(handleChange);
-		else matchMedia.addEventListener("change", handleChange);
+	const { defaultValue = false } = options;
+	/**
+	* Memorizado pela `query`: o React refaz a assinatura sempre que o `subscribe` muda, e uma
+	* função nova a cada render tiraria e poria o listener em todo render.
+	*/
+	const subscribe = useCallback((onStoreChange) => {
+		const mediaQueryList = window.matchMedia(query);
+		mediaQueryList.addEventListener("change", onStoreChange);
 		return () => {
-			if (matchMedia.removeListener) matchMedia.removeListener(handleChange);
-			else matchMedia.removeEventListener("change", handleChange);
+			mediaQueryList.removeEventListener("change", onStoreChange);
 		};
-	}, [query, handleChange]);
-	return matches;
+	}, [query]);
+	const getSnapshot = () => window.matchMedia(query).matches;
+	return useSyncExternalStore(subscribe, getSnapshot, () => defaultValue);
 };
 //#endregion
 export { useMediaQuery };

package/dist/hooks/use-media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-query.js","names":[],"sources":["../../src/hooks/use-media-query.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from 'react';\n\n/**\n * Configurações opcionais para controlar o comportamento inicial do hook useMediaQuery.\n */\ntype UseMediaQueryOptions = {\n  /** Valor padrão retornado quando `initializeWithValue` é false. */\n  defaultValue?: boolean;\n  /** Define se deve inicializar com o valor atual da media query. */\n  initializeWithValue?: boolean;\n};\n\n/**\n * Monitora continuamente mudanças em media queries CSS, reagindo automaticamente\n * a alterações no tamanho da viewport ou outras características do dispositivo.\n *\n * O hook gerencia automaticamente a adição e remoção de listeners, prevenindo\n * vazamentos de memória quando o componente é desmontado.\n *\n * @param query - String da media query CSS a ser monitorada (ex: `\"(min-width: 768px)\"`).\n * @param options - Configurações opcionais para controlar o comportamento inicial do hook.\n * @returns Verdadeiro quando a media query atual corresponde à condição especificada, falso caso contrário.\n */\nexport const useMediaQuery = (\n  query: string,\n  options: UseMediaQueryOptions = {},\n): boolean => {\n  const { defaultValue = false, initializeWithValue = true } = options;\n\n  const getMatches = useCallback((query: string): boolean => {\n    return window.matchMedia(query).matches;\n  }, []);\n\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query);\n    }\n\n    return defaultValue;\n  });\n\n  const handleChange = useCallback(() => {\n    setMatches(getMatches(query));\n  }, [query, getMatches]);\n\n  useLayoutEffect(() => {\n    const matchMedia = window.matchMedia(query);\n\n    handleChange();\n\n    /*\n     * Safari < 14 não suporta `addEventListener` em MediaQueryList —\n     * usa os métodos deprecated `addListener`/`removeListener` como fallback.\n     */\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener('change', handleChange);\n    }\n\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener('change', handleChange);\n      }\n    };\n  }, [query, handleChange]);\n\n  return matches;\n};\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAa,iBACX,OACA,UAAgC,CAAC,MACrB;CACZ,MAAM,EAAE,eAAe,OAAO,sBAAsB,SAAS;CAE7D,MAAM,aAAa,aAAa,UAA2B;EACzD,OAAO,OAAO,WAAW,KAAK,CAAC,CAAC;CAClC,GAAG,CAAC,CAAC;CAEL,MAAM,CAAC,SAAS,cAAc,eAAwB;EACpD,IAAI,qBACF,OAAO,WAAW,KAAK;EAGzB,OAAO;CACT,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,WAAW,WAAW,KAAK,CAAC;CAC9B,GAAG,CAAC,OAAO,UAAU,CAAC;CAEtB,sBAAsB;EACpB,MAAM,aAAa,OAAO,WAAW,KAAK;EAE1C,aAAa;EAMb,IAAI,WAAW,aACb,WAAW,YAAY,YAAY;OAEnC,WAAW,iBAAiB,UAAU,YAAY;EAGpD,aAAa;GACX,IAAI,WAAW,gBACb,WAAW,eAAe,YAAY;QAEtC,WAAW,oBAAoB,UAAU,YAAY;EAEzD;CACF,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,OAAO;AACT"}
+{"version":3,"file":"use-media-query.js","names":[],"sources":["../../src/hooks/use-media-query.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\nexport type UseMediaQueryOptions = {\n  /**\n   * Valor no servidor e na hidratação, antes de o navegador responder.\n   *\n   * @default false\n   */\n  defaultValue?: boolean;\n};\n\n/**\n * Acompanha se uma media query CSS casa, reagindo às mudanças da viewport ou do dispositivo.\n *\n * Usa `useSyncExternalStore`: no servidor e na hidratação o valor é o `defaultValue`, e o\n * navegador corrige logo em seguida. O listener é removido ao desmontar ou ao trocar a `query`.\n */\nexport const useMediaQuery = (\n  query: string,\n  options: UseMediaQueryOptions = {},\n): boolean => {\n  const { defaultValue = false } = options;\n\n  /**\n   * Memorizado pela `query`: o React refaz a assinatura sempre que o `subscribe` muda, e uma\n   * função nova a cada render tiraria e poria o listener em todo render.\n   */\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      const mediaQueryList = window.matchMedia(query);\n\n      mediaQueryList.addEventListener('change', onStoreChange);\n\n      return () => {\n        mediaQueryList.removeEventListener('change', onStoreChange);\n      };\n    },\n    [query],\n  );\n\n  const getSnapshot = () => window.matchMedia(query).matches;\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => defaultValue);\n};\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,OACA,UAAgC,CAAC,MACrB;CACZ,MAAM,EAAE,eAAe,UAAU;;;;;CAMjC,MAAM,YAAY,aACf,kBAA8B;EAC7B,MAAM,iBAAiB,OAAO,WAAW,KAAK;EAE9C,eAAe,iBAAiB,UAAU,aAAa;EAEvD,aAAa;GACX,eAAe,oBAAoB,UAAU,aAAa;EAC5D;CACF,GACA,CAAC,KAAK,CACR;CAEA,MAAM,oBAAoB,OAAO,WAAW,KAAK,CAAC,CAAC;CAEnD,OAAO,qBAAqB,WAAW,mBAAmB,YAAY;AACxE"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
+import { UseMediaQueryOptions, useMediaQuery } from "./hooks/use-media-query.js";
 import { CreateContextOptions, CreateContextReturn, createContext } from "./utils/create-context.js";
 import { mergeRefs } from "./utils/merge-refs.js";
 import "./utils/index.js";
-export { CreateContextOptions, CreateContextReturn, createContext, mergeRefs, useCopyToClipboard };
+export { CreateContextOptions, CreateContextReturn, UseMediaQueryOptions, createContext, mergeRefs, useCopyToClipboard, useMediaQuery };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
+import { useMediaQuery } from "./hooks/use-media-query.js";
 import { createContext } from "./utils/create-context.js";
 import { mergeRefs } from "./utils/merge-refs.js";
-export { createContext, mergeRefs, useCopyToClipboard };
+export { createContext, mergeRefs, useCopyToClipboard, useMediaQuery };

package/dist/utils/create-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-context.js","names":["createReactContext"],"sources":["../../src/utils/create-context.ts"],"sourcesContent":["import type React from 'react';\nimport { createContext as createReactContext, use } from 'react';\n\n/**\n * Valor default de todo contexto criado aqui: só é lido quando não há Provider\n * acima. Como é um símbolo privado, nenhum valor legítimo (`0`, `false`, `''`,\n * `undefined`) se confunde com ele.\n */\nconst MISSING_PROVIDER: unique symbol = Symbol('MissingProvider');\n\n/**\n * Opções do `createContext`.\n */\nexport type CreateContextOptions = {\n  /**\n   * Nome exibido no React DevTools e na mensagem de erro.\n   *\n   * @example 'TabsContext'\n   */\n  name: string;\n  /**\n   * Componentes públicos que fornecem o contexto, citados na mensagem de erro.\n   *\n   * Na lib, o Provider é interno: quem é de fora fornece o contexto pelo\n   * `Root` ou pelo `RootProvider`, então são esses nomes que entram aqui. Em\n   * contexto de app, em que o Provider é a própria API pública, entra ele.\n   *\n   * @example ['Splitter.Root', 'Splitter.RootProvider']\n   */\n  providers: [string, ...string[]];\n};\n\n/**\n * `Error.captureStackTrace` é exclusivo do V8 e fica fora dos tipos da lib\n * padrão do TypeScript.\n */\ntype V8ErrorConstructor = ErrorConstructor & {\n  captureStackTrace?: (target: object, constructorOpt?: () => unknown) => void;\n};\n\n/**\n * Junta os nomes com vírgula e \"ou\" antes do último, cada um entre crases.\n */\nconst providersListFormat = new Intl.ListFormat('pt-BR', {\n  type: 'disjunction',\n});\n\n/**\n * Retorno do `createContext`: o Provider e o hook que lê o valor dele.\n *\n * O Provider é tipado como `React.Provider` (e não `React.Context`) para que o\n * valor só seja lido pelo hook: `use(Provider)` não compila.\n *\n * @template TValue - Tipo do valor armazenado no contexto.\n */\nexport type CreateContextReturn<TValue> = [\n  provider: React.Provider<TValue>,\n  useContext: () => TValue,\n];\n\n/**\n * Cria um contexto estrito: o hook lança `ContextError` quando chamado fora do\n * Provider.\n *\n * Os nomes do Provider e do hook são escolhidos na desestruturação. Convenção:\n * `XContextProvider` e `useXContext`.\n *\n * @template TValue - Tipo do valor armazenado no contexto.\n * @param options - Nome do contexto e do componente que o provê.\n * @returns Tupla com o Provider e o hook.\n *\n * @example\n * ```tsx\n * export const [SplitterContextProvider, useSplitterContext] =\n *   createContext<UseSplitterContext>({\n *     name: 'SplitterContext',\n *     providers: ['Splitter.Root', 'Splitter.RootProvider'],\n *   });\n *\n * <SplitterContextProvider value={splitter}>{children}</SplitterContextProvider>;\n *\n * const splitter = useSplitterContext();\n * ```\n */\nexport const createContext = <TValue>(\n  options: CreateContextOptions,\n): CreateContextReturn<TValue> => {\n  const { name, providers } = options;\n\n  const errorMessage = `\\`${name}\\` não encontrado: o componente precisa estar dentro de ${providersListFormat.format(\n    providers.map((provider) => `\\`${provider}\\``),\n  )}.`;\n\n  const Context = createReactContext<TValue | typeof MISSING_PROVIDER>(\n    MISSING_PROVIDER,\n  );\n\n  Context.displayName = name;\n\n  const useContext = (): TValue => {\n    const value = use(Context);\n\n    if (value === MISSING_PROVIDER) {\n      const error = new Error(errorMessage);\n\n      error.name = 'ContextError';\n\n      // Tira o hook do stack: a primeira linha passa a ser o componente que o\n      // chamou. Só existe em engines V8; nas outras, o stack fica completo.\n      (Error as V8ErrorConstructor).captureStackTrace?.(error, useContext);\n\n      throw error;\n    }\n\n    return value;\n  };\n\n  return [Context, useContext];\n};\n"],"mappings":";;;;;;;AAQA,MAAM,mBAAkC,OAAO,iBAAiB;;;;AAmChE,MAAM,sBAAsB,IAAI,KAAK,WAAW,SAAS,EACvD,MAAM,cACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAuCD,MAAa,iBACX,YACgC;CAChC,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,eAAe,KAAK,KAAK,0DAA0D,oBAAoB,OAC3G,UAAU,KAAK,aAAa,KAAK,SAAS,GAAG,CAC/C,EAAE;CAEF,MAAM,UAAUA,gBACd,gBACF;CAEA,QAAQ,cAAc;CAEtB,MAAM,mBAA2B;EAC/B,MAAM,QAAQ,IAAI,OAAO;EAEzB,IAAI,UAAU,kBAAkB;GAC9B,MAAM,QAAQ,IAAI,MAAM,YAAY;GAEpC,MAAM,OAAO;GAIb,MAA8B,oBAAoB,OAAO,UAAU;GAEnE,MAAM;EACR;EAEA,OAAO;CACT;CAEA,OAAO,CAAC,SAAS,UAAU;AAC7B"}
+{"version":3,"file":"create-context.js","names":["createReactContext"],"sources":["../../src/utils/create-context.ts"],"sourcesContent":["import type React from 'react';\nimport { createContext as createReactContext, use } from 'react';\n\n/**\n * Valor default de todo contexto criado aqui: só é lido quando não há Provider\n * acima. Como é um símbolo privado, nenhum valor legítimo (`0`, `false`, `''`,\n * `undefined`) se confunde com ele.\n */\nconst MISSING_PROVIDER: unique symbol = Symbol('MissingProvider');\n\n/**\n * Opções do `createContext`.\n */\nexport type CreateContextOptions = {\n  /**\n   * Nome exibido no React DevTools e na mensagem de erro.\n   *\n   * @example 'TabsContext'\n   */\n  name: string;\n  /**\n   * Componentes públicos que fornecem o contexto, citados na mensagem de erro.\n   *\n   * Na lib, o Provider é interno: quem é de fora fornece o contexto pelo\n   * `Root` ou pelo `RootProvider`, então são esses nomes que entram aqui. Em\n   * contexto de app, em que o Provider é a própria API pública, entra ele.\n   *\n   * @example ['Splitter.Root', 'Splitter.RootProvider']\n   */\n  providers: [string, ...string[]];\n};\n\n/**\n * `Error.captureStackTrace` é exclusivo do V8 e fica fora dos tipos da lib\n * padrão do TypeScript.\n */\ntype V8ErrorConstructor = ErrorConstructor & {\n  captureStackTrace?: (target: object, constructorOpt?: () => unknown) => void;\n};\n\n/**\n * Junta os nomes com vírgula e \"ou\" antes do último, cada um entre crases.\n */\nconst providersListFormat = new Intl.ListFormat('pt-BR', {\n  type: 'disjunction',\n});\n\n/**\n * Retorno do `createContext`: o Provider e o hook que lê o valor dele.\n *\n * O Provider é tipado como `React.Provider` (e não `React.Context`) para que o\n * valor só seja lido pelo hook: `use(Provider)` não compila.\n *\n * @template TValue - Tipo do valor armazenado no contexto.\n */\nexport type CreateContextReturn<TValue> = [\n  provider: React.Provider<TValue>,\n  useContext: () => TValue,\n];\n\n/**\n * Cria um contexto estrito: o hook lança `ContextError` quando chamado fora do\n * Provider.\n *\n * Os nomes do Provider e do hook são escolhidos na desestruturação. Convenção:\n * `XContextProvider` e `useXContext`.\n *\n * @template TValue - Tipo do valor armazenado no contexto.\n * @param options - Nome do contexto e do componente que o provê.\n * @returns Tupla com o Provider e o hook.\n *\n * @example\n * ```tsx\n * export const [SplitterContextProvider, useSplitterContext] =\n *   createContext<UseSplitterContext>({\n *     name: 'SplitterContext',\n *     providers: ['Splitter.Root', 'Splitter.RootProvider'],\n *   });\n *\n * <SplitterContextProvider value={splitter}>{children}</SplitterContextProvider>;\n *\n * const splitter = useSplitterContext();\n * ```\n */\nexport const createContext = <TValue>(\n  options: CreateContextOptions,\n): CreateContextReturn<TValue> => {\n  const { name, providers } = options;\n\n  const errorMessage = `\\`${name}\\` não encontrado: o componente precisa estar dentro de ${providersListFormat.format(\n    providers.map((provider) => `\\`${provider}\\``),\n  )}.`;\n\n  const Context = createReactContext<TValue | typeof MISSING_PROVIDER>(\n    MISSING_PROVIDER,\n  );\n\n  Context.displayName = name;\n\n  // biome-ignore lint/correctness/noComponentHookFactories: a factory roda uma vez, no nível do módulo, e o hook criado é estável.\n  const useContext = (): TValue => {\n    const value = use(Context);\n\n    if (value === MISSING_PROVIDER) {\n      const error = new Error(errorMessage);\n\n      error.name = 'ContextError';\n\n      // Tira o hook do stack: a primeira linha passa a ser o componente que o\n      // chamou. Só existe em engines V8; nas outras, o stack fica completo.\n      const errorConstructor: V8ErrorConstructor = Error;\n\n      errorConstructor.captureStackTrace?.(error, useContext);\n\n      throw error;\n    }\n\n    return value;\n  };\n\n  return [Context, useContext];\n};\n"],"mappings":";;;;;;;AAQA,MAAM,mBAAkC,OAAO,iBAAiB;;;;AAmChE,MAAM,sBAAsB,IAAI,KAAK,WAAW,SAAS,EACvD,MAAM,cACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAuCD,MAAa,iBACX,YACgC;CAChC,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,eAAe,KAAK,KAAK,0DAA0D,oBAAoB,OAC3G,UAAU,KAAK,aAAa,KAAK,SAAS,GAAG,CAC/C,EAAE;CAEF,MAAM,UAAUA,gBACd,gBACF;CAEA,QAAQ,cAAc;CAGtB,MAAM,mBAA2B;EAC/B,MAAM,QAAQ,IAAI,OAAO;EAEzB,IAAI,UAAU,kBAAkB;GAC9B,MAAM,QAAQ,IAAI,MAAM,YAAY;GAEpC,MAAM,OAAO;GAMb,MAAiB,oBAAoB,OAAO,UAAU;GAEtD,MAAM;EACR;EAEA,OAAO;CACT;CAEA,OAAO,CAAC,SAAS,UAAU;AAC7B"}

package/dist/utils/merge-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.js","names":[],"sources":["../../src/utils/merge-refs.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Atribui `value` a uma ref, normalizando callback refs e RefObjects.\n *\n * Necessário porque o React expõe dois formatos de ref e não há uma API\n * unificada para escrevê-los — esta função esconde esse detalhe dos\n * consumidores.\n *\n * @template T - Tipo do valor referenciado (ex: elemento DOM ou instância).\n * @param ref - Ref callback, RefObject ou `undefined`/`null` (ignorada).\n * @param value - Valor a ser atribuído à ref.\n */\nfunction setRef<T>(ref: React.Ref<T> | undefined, value: T | null): void {\n  if (typeof ref === 'function') {\n    (ref as React.RefCallback<T>)(value);\n  } else if (ref != null) {\n    (ref as React.RefObject<T | null>).current = value;\n  }\n}\n\n/**\n * Combina múltiplas refs em uma única ref callback.\n *\n * Refs `undefined`/`null` são ignoradas silenciosamente. Útil para expor um\n * elemento tanto para uma ref interna quanto para uma ref encaminhada\n * (`forwardRef`) simultaneamente.\n *\n * @template T - Tipo do valor referenciado (ex: elemento DOM ou instância).\n * @param refs - Lista de refs (callback, RefObject, `undefined` ou `null`) a serem combinadas.\n * @returns Ref callback única que propaga o node para todas as refs recebidas.\n */\nexport function mergeRefs<T>(\n  ...refs: (React.Ref<T> | undefined)[]\n): React.RefCallback<T> {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAS,OAAU,KAA+B,OAAuB;CACvE,IAAI,OAAO,QAAQ,YACjB,IAA8B,KAAK;MAC9B,IAAI,OAAO,MAChB,IAAmC,UAAU;AAEjD;;;;;;;;;;;;AAaA,SAAgB,UACd,GAAG,MACmB;CACtB,QAAQ,SAAmB;EACzB,KAAK,MAAM,OAAO,MAChB,OAAO,KAAK,IAAI;CAEpB;AACF"}
+{"version":3,"file":"merge-refs.js","names":[],"sources":["../../src/utils/merge-refs.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Atribui `value` a uma ref, normalizando callback refs e RefObjects.\n *\n * Necessário porque o React expõe dois formatos de ref e não há uma API\n * unificada para escrevê-los — esta função esconde esse detalhe dos\n * consumidores.\n *\n * @template T - Tipo do valor referenciado (ex: elemento DOM ou instância).\n * @param ref - Ref callback, RefObject ou `undefined`/`null` (ignorada).\n * @param value - Valor a ser atribuído à ref.\n */\nfunction setRef<T>(ref: React.Ref<T> | undefined, value: T | null): void {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    ref.current = value;\n  }\n}\n\n/**\n * Combina múltiplas refs em uma única ref callback.\n *\n * Refs `undefined`/`null` são ignoradas silenciosamente. Útil para expor um\n * elemento tanto para uma ref interna quanto para uma ref encaminhada\n * (`forwardRef`) simultaneamente.\n *\n * @template T - Tipo do valor referenciado (ex: elemento DOM ou instância).\n * @param refs - Lista de refs (callback, RefObject, `undefined` ou `null`) a serem combinadas.\n * @returns Ref callback única que propaga o node para todas as refs recebidas.\n */\nexport function mergeRefs<T>(\n  ...refs: (React.Ref<T> | undefined)[]\n): React.RefCallback<T> {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAS,OAAU,KAA+B,OAAuB;CACvE,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,OAAO,MAChB,IAAI,UAAU;AAElB;;;;;;;;;;;;AAaA,SAAgB,UACd,GAAG,MACmB;CACtB,QAAQ,SAAmB;EACzB,KAAK,MAAM,OAAO,MAChB,OAAO,KAAK,IAAI;CAEpB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucasbernardosn/react-utils",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React hooks and utilities.",
   "type": "module",
   "exports": {
@@ -9,18 +9,17 @@
       "default": "./dist/index.js"
     }
   },
-  "dependencies": {},
   "devDependencies": {
-    "@biomejs/biome": "2.5.15",
-    "@lucasbernardosn/tsconfig": "1.0.0",
+    "@biomejs/biome": "2.6.3",
+    "@lucasbernardosn/ts-config": "0.2.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.7",
     "@types/node": "26.6.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "6.1.1",
     "jsdom": "30.1.1",
+    "publint": "0.3.25",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "tsdown": "0.23.0",
@@ -28,8 +27,7 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.0.0"
   },
   "files": [
     "dist"
@@ -42,7 +40,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LucasBernardoSN/react-monorepo.git",
-    "directory": "packages/react/utils"
+    "directory": "packages/react-utils"
   },
   "scripts": {
     "build": "tsdown",
@@ -51,6 +49,7 @@
     "format": "biome format --write",
     "check": "biome check --write",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "typecheck": "tsc --noEmit"
   }
 }

package/dist/hooks/use-copy-to-clipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-copy-to-clipboard.d.ts","names":[],"sources":["../../src/hooks/use-copy-to-clipboard.ts"],"mappings":";;KAGK;;KAGA,UAAU,iBAAiB;;;;KAK3B;;EAEH,YAAY;;EAEZ,MAAM;;;;;;;;;;;qBAYK,0BAAyB"}

package/dist/hooks/use-media-query.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-media-query.d.ts","names":[],"sources":["../../src/hooks/use-media-query.ts"],"mappings":";;;;KAKK;;EAEH;;EAEA;;;;;;;;;;;;;qBAcW,gBACX,eACA,UAAS"}

package/dist/utils/create-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-context.d.ts","names":[],"sources":["../../src/utils/create-context.ts"],"mappings":";;;;;YAaY;;;;;;EAMV;;;;;;;;;;EAUA;;;;;;;;;;YA0BU,oBAAoB,WAC9B,UAAU,MAAM,SAAS,SACzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BP,gBAAiB,QAC5B,SAAS,yBACR,oBAAoB"}

package/dist/utils/merge-refs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"merge-refs.d.ts","names":[],"sources":["../../src/utils/merge-refs.ts"],"mappings":";;;;;;;;;;;;;wBAgCgB,UAAU,MACrB,OAAO,MAAM,IAAI,oBACnB,MAAM,YAAY"}