@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/utilities/interaction-shield/interaction-shield.js

@@ -0,0 +1,171 @@
+import { useEffect, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/utilities/interaction-shield/interaction-shield.tsx
+const useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+/**
+* Estado compartilhado entre todas as instâncias do InteractionShield.
+*
+* Problema que resolve: se dois shields estiverem ativos ao mesmo tempo e cada
+* um salvasse/restaurasse os estilos globais de forma independente, o segundo
+* shield sobrescreveria os valores salvos pelo primeiro. Quando o primeiro
+* fizesse cleanup, restauraria os valores já modificados pelo segundo — deixando
+* a página em estado inconsistente.
+*
+* Solução: contadores de referência. A primeira instância a ativar aplica os
+* estilos; a última a desativar os restaura. Instâncias intermediárias
+* incrementam/decrementam os contadores sem tocar no DOM.
+*/
+const shieldState = (() => {
+	let shieldCount = 0;
+	let scrollLockCount = 0;
+	const saved = {
+		userSelect: "",
+		overscrollBehaviorY: "",
+		bodyPosition: "",
+		bodyTop: "",
+		bodyLeft: "",
+		bodyWidth: "",
+		scrollX: 0,
+		scrollY: 0
+	};
+	const activateShield = () => {
+		if (shieldCount === 0) {
+			saved.userSelect = document.body.style.userSelect;
+			saved.overscrollBehaviorY = document.documentElement.style.overscrollBehaviorY;
+			document.body.style.userSelect = "none";
+			document.documentElement.style.overscrollBehaviorY = "none";
+		}
+		shieldCount++;
+	};
+	const deactivateShield = () => {
+		shieldCount--;
+		if (shieldCount === 0) {
+			document.body.style.userSelect = saved.userSelect;
+			document.documentElement.style.overscrollBehaviorY = saved.overscrollBehaviorY;
+		}
+	};
+	const activateScrollLock = () => {
+		if (scrollLockCount === 0) {
+			saved.scrollX = window.scrollX;
+			saved.scrollY = window.scrollY;
+			saved.bodyPosition = document.body.style.position;
+			saved.bodyTop = document.body.style.top;
+			saved.bodyLeft = document.body.style.left;
+			saved.bodyWidth = document.body.style.width;
+			document.body.style.position = "fixed";
+			document.body.style.top = `-${saved.scrollY}px`;
+			document.body.style.left = `-${saved.scrollX}px`;
+			document.body.style.width = "100%";
+		}
+		scrollLockCount++;
+	};
+	const deactivateScrollLock = () => {
+		scrollLockCount--;
+		if (scrollLockCount === 0) {
+			document.body.style.position = saved.bodyPosition;
+			document.body.style.top = saved.bodyTop;
+			document.body.style.left = saved.bodyLeft;
+			document.body.style.width = saved.bodyWidth;
+			window.scrollTo({
+				top: saved.scrollY,
+				left: saved.scrollX,
+				behavior: "instant"
+			});
+		}
+	};
+	return {
+		activateShield,
+		deactivateShield,
+		activateScrollLock,
+		deactivateScrollLock
+	};
+})();
+/**
+* Sobreposição invisível que bloqueia toda interação com a página durante
+* operações de drag ou resize.
+*
+* Quando ativo, renderiza um `div` fixo de tela cheia (via portal em `document.body`)
+* com o maior `z-index` possível, interceptando todos os eventos de ponteiro.
+* Também desabilita seleção de texto e o comportamento de "pull-to-refresh" no mobile.
+*
+* Suporta múltiplas instâncias simultâneas com segurança: os estilos globais são
+* aplicados pela primeira instância ativa e restaurados apenas quando a última desativa.
+*
+* ---
+*
+* ## ⚠️ O shield intercepta os eventos de ponteiro do próprio drag
+*
+* Enquanto `active` for `true`, a sobreposição fica acima de todos os elementos
+* da página e recebe os eventos de ponteiro no lugar deles. Ou seja: handlers
+* React presos ao elemento arrastado (`onPointerMove`, `onPointerUp`) **param de
+* disparar assim que o shield é ativado** — que é exatamente o momento em que o
+* drag começa.
+*
+* Use uma das duas abordagens ao escrever a lógica de drag:
+*
+* 1. **`setPointerCapture`** (recomendado) — no `onPointerDown`, capture o ponteiro
+*    no elemento de origem. Os eventos seguintes continuam sendo entregues a ele,
+*    passando por cima da sobreposição.
+* 2. **Listeners em `window`/`document`** — registre `pointermove`/`pointerup`
+*    globalmente no início do drag e remova-os no fim. Os eventos que atingem a
+*    sobreposição sobem normalmente até `window`.
+*
+* Só é seguro depender de handlers presos ao elemento arrastado quando o shield
+* está inativo.
+*
+* ---
+*
+* Renderiza apenas no cliente: em SSR o componente devolve `null` mesmo com
+* `active` verdadeiro, e o shield passa a valer na hidratação.
+*
+* @example
+* // Resize de coluna de tabela, com pointer capture no handle.
+* const [isResizing, setIsResizing] = useState(false);
+*
+* const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+*   event.currentTarget.setPointerCapture(event.pointerId);
+*   setIsResizing(true);
+* };
+*
+* return (
+*   <>
+*     <div
+*       onPointerDown={handlePointerDown}
+*       onPointerMove={handlePointerMove}
+*       onPointerUp={() => setIsResizing(false)}
+*     />
+*     <InteractionShield active={isResizing} cursor="col-resize" />
+*   </>
+* );
+*/
+const InteractionShield = (props) => {
+	const { active, lockScroll = false, cursor = "default" } = props;
+	useIsomorphicLayoutEffect(() => {
+		if (!active) return;
+		shieldState.activateShield();
+		if (lockScroll) shieldState.activateScrollLock();
+		return () => {
+			shieldState.deactivateShield();
+			if (lockScroll) shieldState.deactivateScrollLock();
+		};
+	}, [active, lockScroll]);
+	if (!active || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: {
+			position: "fixed",
+			inset: 0,
+			pointerEvents: "auto",
+			touchAction: "none",
+			zIndex: 2147483647,
+			cursor
+		},
+		onContextMenu: (e) => e.preventDefault(),
+		onDragStart: (e) => e.preventDefault()
+	}), document.body);
+};
+//#endregion
+export { InteractionShield };
+
+//# sourceMappingURL=interaction-shield.js.map

package/dist/components/utilities/interaction-shield/interaction-shield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-shield.js","names":[],"sources":["../../../../src/components/utilities/interaction-shield/interaction-shield.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type InteractionShieldProps = {\n  /** Ativa ou desativa o shield. Quando `false`, o componente não renderiza nada. */\n  active: boolean;\n  /**\n   * Trava o scroll da página enquanto o shield estiver ativo, sem causar layout shift.\n   * Útil quando o drag/resize pode acidentalmente scrollar a página.\n   *\n   * Dentro de um modal do Base UI (Dialog, Popover modal), que já trava a rolagem, deixe\n   * desligado: as duas travas mexem no `body`, e a restauração de uma desfaz a outra.\n   * @default false\n   */\n  lockScroll?: boolean;\n  /**\n   * Cursor exibido globalmente enquanto o shield estiver ativo.\n   * @default 'default'\n   */\n  cursor?: React.CSSProperties['cursor'];\n};\n\n// `useLayoutEffect` emite warning quando executado no servidor. Como todo o\n// trabalho do shield é manipulação de DOM, cai para `useEffect` (no-op no SSR).\nconst useIsomorphicLayoutEffect =\n  typeof document === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * Estado compartilhado entre todas as instâncias do InteractionShield.\n *\n * Problema que resolve: se dois shields estiverem ativos ao mesmo tempo e cada\n * um salvasse/restaurasse os estilos globais de forma independente, o segundo\n * shield sobrescreveria os valores salvos pelo primeiro. Quando o primeiro\n * fizesse cleanup, restauraria os valores já modificados pelo segundo — deixando\n * a página em estado inconsistente.\n *\n * Solução: contadores de referência. A primeira instância a ativar aplica os\n * estilos; a última a desativar os restaura. Instâncias intermediárias\n * incrementam/decrementam os contadores sem tocar no DOM.\n */\nconst shieldState = (() => {\n  let shieldCount = 0;\n  let scrollLockCount = 0;\n\n  // Valores originais dos estilos, salvos uma única vez pela primeira\n  // instância ativa e usados pela última para restauração.\n  const saved = {\n    userSelect: '',\n    overscrollBehaviorY: '',\n    bodyPosition: '',\n    bodyTop: '',\n    bodyLeft: '',\n    bodyWidth: '',\n    scrollX: 0,\n    scrollY: 0,\n  };\n\n  const activateShield = () => {\n    if (shieldCount === 0) {\n      // Primeira instância: salva e aplica os estilos globais.\n      saved.userSelect = document.body.style.userSelect;\n      saved.overscrollBehaviorY =\n        document.documentElement.style.overscrollBehaviorY;\n\n      // Impede seleção de texto acidental enquanto o usuário arrasta/redimensiona.\n      document.body.style.userSelect = 'none';\n      // Impede \"pull-to-refresh\" e o efeito de glow de borda no mobile,\n      // que podem ser disparados por movimentos verticais durante o drag.\n      //\n      // Aplicado em `documentElement` (e não em `body`): a propagação de\n      // `overscroll-behavior` do body para o viewport só acontece quando o\n      // elemento raiz está com o valor `auto` e `overflow: visible`. Definir\n      // direto na raiz funciona em qualquer configuração do app consumidor.\n      document.documentElement.style.overscrollBehaviorY = 'none';\n    }\n    shieldCount++;\n  };\n\n  const deactivateShield = () => {\n    shieldCount--;\n    if (shieldCount === 0) {\n      // Última instância: restaura os estilos globais ao estado original.\n      document.body.style.userSelect = saved.userSelect;\n      document.documentElement.style.overscrollBehaviorY =\n        saved.overscrollBehaviorY;\n    }\n  };\n\n  const activateScrollLock = () => {\n    if (scrollLockCount === 0) {\n      // Primeira instância com lockScroll: salva e aplica o scroll lock.\n      saved.scrollX = window.scrollX;\n      saved.scrollY = window.scrollY;\n      saved.bodyPosition = document.body.style.position;\n      saved.bodyTop = document.body.style.top;\n      saved.bodyLeft = document.body.style.left;\n      saved.bodyWidth = document.body.style.width;\n\n      // Técnica de scroll lock sem layout shift: fixar o body com `top`/`left`\n      // negativos equivalentes ao scroll atual mantém o conteúdo visualmente no\n      // lugar. Alternativas como `overflow: hidden` causam salto horizontal\n      // quando a scrollbar desaparece.\n      document.body.style.position = 'fixed';\n      document.body.style.top = `-${saved.scrollY}px`;\n      document.body.style.left = `-${saved.scrollX}px`;\n      document.body.style.width = '100%'; // Evita colapso de largura ao sair do fluxo normal.\n    }\n    scrollLockCount++;\n  };\n\n  const deactivateScrollLock = () => {\n    scrollLockCount--;\n    if (scrollLockCount === 0) {\n      // Última instância com lockScroll: restaura a posição de scroll.\n      document.body.style.position = saved.bodyPosition;\n      document.body.style.top = saved.bodyTop;\n      document.body.style.left = saved.bodyLeft;\n      document.body.style.width = saved.bodyWidth;\n      // Restaura o scroll manualmente porque remover `position: fixed`\n      // faz o browser voltar ao topo da página.\n      //\n      // `behavior: 'instant'` é obrigatório: sem ele, um app que define\n      // `scroll-behavior: smooth` no CSS anima o retorno, e o usuário vê a\n      // página deslizando de volta depois de soltar o drag.\n      window.scrollTo({\n        top: saved.scrollY,\n        left: saved.scrollX,\n        behavior: 'instant',\n      });\n    }\n  };\n\n  return {\n    activateShield,\n    deactivateShield,\n    activateScrollLock,\n    deactivateScrollLock,\n  };\n})();\n\n/**\n * Sobreposição invisível que bloqueia toda interação com a página durante\n * operações de drag ou resize.\n *\n * Quando ativo, renderiza um `div` fixo de tela cheia (via portal em `document.body`)\n * com o maior `z-index` possível, interceptando todos os eventos de ponteiro.\n * Também desabilita seleção de texto e o comportamento de \"pull-to-refresh\" no mobile.\n *\n * Suporta múltiplas instâncias simultâneas com segurança: os estilos globais são\n * aplicados pela primeira instância ativa e restaurados apenas quando a última desativa.\n *\n * ---\n *\n * ## ⚠️ O shield intercepta os eventos de ponteiro do próprio drag\n *\n * Enquanto `active` for `true`, a sobreposição fica acima de todos os elementos\n * da página e recebe os eventos de ponteiro no lugar deles. Ou seja: handlers\n * React presos ao elemento arrastado (`onPointerMove`, `onPointerUp`) **param de\n * disparar assim que o shield é ativado** — que é exatamente o momento em que o\n * drag começa.\n *\n * Use uma das duas abordagens ao escrever a lógica de drag:\n *\n * 1. **`setPointerCapture`** (recomendado) — no `onPointerDown`, capture o ponteiro\n *    no elemento de origem. Os eventos seguintes continuam sendo entregues a ele,\n *    passando por cima da sobreposição.\n * 2. **Listeners em `window`/`document`** — registre `pointermove`/`pointerup`\n *    globalmente no início do drag e remova-os no fim. Os eventos que atingem a\n *    sobreposição sobem normalmente até `window`.\n *\n * Só é seguro depender de handlers presos ao elemento arrastado quando o shield\n * está inativo.\n *\n * ---\n *\n * Renderiza apenas no cliente: em SSR o componente devolve `null` mesmo com\n * `active` verdadeiro, e o shield passa a valer na hidratação.\n *\n * @example\n * // Resize de coluna de tabela, com pointer capture no handle.\n * const [isResizing, setIsResizing] = useState(false);\n *\n * const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n *   event.currentTarget.setPointerCapture(event.pointerId);\n *   setIsResizing(true);\n * };\n *\n * return (\n *   <>\n *     <div\n *       onPointerDown={handlePointerDown}\n *       onPointerMove={handlePointerMove}\n *       onPointerUp={() => setIsResizing(false)}\n *     />\n *     <InteractionShield active={isResizing} cursor=\"col-resize\" />\n *   </>\n * );\n */\nexport const InteractionShield = (\n  props: InteractionShieldProps,\n): React.ReactPortal | null => {\n  const { active, lockScroll = false, cursor = 'default' } = props;\n\n  // useLayoutEffect (não useEffect) para que as mutações de estilo globais\n  // ocorram de forma síncrona antes da pintura — evita um frame visível onde\n  // o shield já está ativo no React mas os estilos ainda não foram aplicados.\n  useIsomorphicLayoutEffect(() => {\n    if (!active) {\n      return;\n    }\n\n    shieldState.activateShield();\n    if (lockScroll) {\n      shieldState.activateScrollLock();\n    }\n\n    return () => {\n      shieldState.deactivateShield();\n      if (lockScroll) {\n        shieldState.deactivateScrollLock();\n      }\n    };\n  }, [active, lockScroll]);\n\n  // `typeof document` protege o SSR: `createPortal` acessa `document.body`\n  // durante o render, o que quebraria a renderização no servidor.\n  if (!active || typeof document === 'undefined') {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      // Sem `role=\"presentation\"` nem `tabIndex`: um elemento focável dentro de\n      // `aria-hidden` é uma violação de ARIA, e o shield não precisa de foco.\n      aria-hidden=\"true\"\n      style={{\n        position: 'fixed',\n        inset: 0,\n        // `pointerEvents: auto` é explícito aqui porque `pointer-events` é uma\n        // propriedade herdada: um `body` com `pointer-events: none` anularia o\n        // bloqueio sem esta declaração.\n        pointerEvents: 'auto',\n        // Desabilita gestos de toque (scroll, zoom) no mobile para que o\n        // drag/resize receba todos os eventos de touch sem interferência do browser.\n        touchAction: 'none',\n        // Valor máximo de z-index (2^31 - 1) para garantir que fique acima de\n        // qualquer outro elemento, incluindo modais e tooltips de terceiros.\n        zIndex: 2_147_483_647,\n        cursor,\n      }}\n      // Previne o menu de contexto nativo que pode aparecer em taps longos no mobile.\n      onContextMenu={(e) => e.preventDefault()}\n      // Previne o comportamento nativo de drag do browser, que criaria um \"fantasma\"\n      // visual do elemento e interromperia o controle do drag customizado.\n      onDragStart={(e) => e.preventDefault()}\n    />,\n    // Portal no body garante que o div fique fora de qualquer contexto de\n    // stacking ou overflow que pudesse limitar a cobertura da tela.\n    document.body,\n  );\n};\n"],"mappings":";;;;AAyBA,MAAM,4BACJ,OAAO,aAAa,cAAc,YAAY;;;;;;;;;;;;;;AAehD,MAAM,qBAAqB;CACzB,IAAI,cAAc;CAClB,IAAI,kBAAkB;CAItB,MAAM,QAAQ;EACZ,YAAY;EACZ,qBAAqB;EACrB,cAAc;EACd,SAAS;EACT,UAAU;EACV,WAAW;EACX,SAAS;EACT,SAAS;CACX;CAEA,MAAM,uBAAuB;EAC3B,IAAI,gBAAgB,GAAG;GAErB,MAAM,aAAa,SAAS,KAAK,MAAM;GACvC,MAAM,sBACJ,SAAS,gBAAgB,MAAM;GAGjC,SAAS,KAAK,MAAM,aAAa;GAQjC,SAAS,gBAAgB,MAAM,sBAAsB;EACvD;EACA;CACF;CAEA,MAAM,yBAAyB;EAC7B;EACA,IAAI,gBAAgB,GAAG;GAErB,SAAS,KAAK,MAAM,aAAa,MAAM;GACvC,SAAS,gBAAgB,MAAM,sBAC7B,MAAM;EACV;CACF;CAEA,MAAM,2BAA2B;EAC/B,IAAI,oBAAoB,GAAG;GAEzB,MAAM,UAAU,OAAO;GACvB,MAAM,UAAU,OAAO;GACvB,MAAM,eAAe,SAAS,KAAK,MAAM;GACzC,MAAM,UAAU,SAAS,KAAK,MAAM;GACpC,MAAM,WAAW,SAAS,KAAK,MAAM;GACrC,MAAM,YAAY,SAAS,KAAK,MAAM;GAMtC,SAAS,KAAK,MAAM,WAAW;GAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,MAAM,QAAQ;GAC5C,SAAS,KAAK,MAAM,OAAO,IAAI,MAAM,QAAQ;GAC7C,SAAS,KAAK,MAAM,QAAQ;EAC9B;EACA;CACF;CAEA,MAAM,6BAA6B;EACjC;EACA,IAAI,oBAAoB,GAAG;GAEzB,SAAS,KAAK,MAAM,WAAW,MAAM;GACrC,SAAS,KAAK,MAAM,MAAM,MAAM;GAChC,SAAS,KAAK,MAAM,OAAO,MAAM;GACjC,SAAS,KAAK,MAAM,QAAQ,MAAM;GAOlC,OAAO,SAAS;IACd,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,UAAU;GACZ,CAAC;EACH;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DH,MAAa,qBACX,UAC6B;CAC7B,MAAM,EAAE,QAAQ,aAAa,OAAO,SAAS,cAAc;CAK3D,gCAAgC;EAC9B,IAAI,CAAC,QACH;EAGF,YAAY,eAAe;EAC3B,IAAI,YACF,YAAY,mBAAmB;EAGjC,aAAa;GACX,YAAY,iBAAiB;GAC7B,IAAI,YACF,YAAY,qBAAqB;EAErC;CACF,GAAG,CAAC,QAAQ,UAAU,CAAC;CAIvB,IAAI,CAAC,UAAU,OAAO,aAAa,aACjC,OAAO;CAGT,OAAO,aACL,oBAAC,OAAD;EAGE,eAAY;EACZ,OAAO;GACL,UAAU;GACV,OAAO;GAIP,eAAe;GAGf,aAAa;GAGb,QAAQ;GACR;EACF;EAEA,gBAAgB,MAAM,EAAE,eAAe;EAGvC,cAAc,MAAM,EAAE,eAAe;CACtC,CAAA,GAGD,SAAS,IACX;AACF"}

package/dist/components/utilities/show/index.d.ts

@@ -0,0 +1,2 @@
+import { Show, ShowProps } from "./show.js";
+export { Show, type ShowProps };

package/dist/components/utilities/show/index.js

@@ -0,0 +1,2 @@
+import { Show } from "./show.js";
+export { Show };

package/dist/components/utilities/show/show.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+//#region src/components/utilities/show/show.d.ts
+export type ShowProps<T> = {
+  /**
+   * Condição que, se avaliada como verdadeira (truthy), renderiza a propriedade `children`.
+   * `0`, `''` e `false` também caem no `fallback`: para um número, compare (`count > 0`).
+   */
+  when: T | null | undefined;
+  /**
+   * Conteúdo alternativo a ser renderizado caso a propriedade `when` seja falsa (falsy).
+   */
+  fallback?: React.ReactNode | undefined;
+  /**
+   * Conteúdo a ser renderizado se `when` for verdadeiro (truthy).
+   * Pode ser um elemento React renderizável abstrato (`ReactNode`) ou uma função que recebe o valor inferido por `when`.
+   */
+  children: React.ReactNode | ((value: T) => React.ReactNode);
+};
+/**
+ * Renderiza `children` quando `when` é verdadeiro (truthy) e `fallback` quando é falso.
+ *
+ * Com `children` em função, ela recebe o valor de `when` já sem `null` e `undefined`.
+ *
+ * Como o teste é truthy, `when={count}` com `count === 0` mostra o `fallback`; para números,
+ * passe a comparação (`when={count > 0}`).
+ *
+ * @example
+ * ```tsx
+ * <Show when={user}>
+ *   {(user) => <Profile data={user} />}
+ * </Show>
+ * ```
+ */
+export declare const Show: {
+  <T>(props: ShowProps<T>): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=show.d.ts.map

package/dist/components/utilities/show/show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.d.ts","names":[],"sources":["../../../../src/components/utilities/show/show.tsx"],"mappings":";;YAEY,UAAU;;;;;EAKpB,MAAM;;;;EAIN,WAAW,MAAM;;;;;EAKjB,UAAU,MAAM,cAAc,OAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;qBAkBtC;GAAQ,GAAC,OAAU,UAAU,KAAK,MAAM"}

package/dist/components/utilities/show/show.js

@@ -0,0 +1,26 @@
+//#region src/components/utilities/show/show.tsx
+/**
+* Renderiza `children` quando `when` é verdadeiro (truthy) e `fallback` quando é falso.
+*
+* Com `children` em função, ela recebe o valor de `when` já sem `null` e `undefined`.
+*
+* Como o teste é truthy, `when={count}` com `count === 0` mostra o `fallback`; para números,
+* passe a comparação (`when={count > 0}`).
+*
+* @example
+* ```tsx
+* <Show when={user}>
+*   {(user) => <Profile data={user} />}
+* </Show>
+* ```
+*/
+const Show = (props) => {
+	const { when, fallback, children } = props;
+	if (!when) return fallback;
+	return typeof children === "function" ? children(when) : children;
+};
+Show.displayName = "Show";
+//#endregion
+export { Show };
+
+//# sourceMappingURL=show.js.map

package/dist/components/utilities/show/show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.js","names":[],"sources":["../../../../src/components/utilities/show/show.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type ShowProps<T> = {\n  /**\n   * Condição que, se avaliada como verdadeira (truthy), renderiza a propriedade `children`.\n   * `0`, `''` e `false` também caem no `fallback`: para um número, compare (`count > 0`).\n   */\n  when: T | null | undefined;\n  /**\n   * Conteúdo alternativo a ser renderizado caso a propriedade `when` seja falsa (falsy).\n   */\n  fallback?: React.ReactNode | undefined;\n  /**\n   * Conteúdo a ser renderizado se `when` for verdadeiro (truthy).\n   * Pode ser um elemento React renderizável abstrato (`ReactNode`) ou uma função que recebe o valor inferido por `when`.\n   */\n  children: React.ReactNode | ((value: T) => React.ReactNode);\n};\n\n/**\n * Renderiza `children` quando `when` é verdadeiro (truthy) e `fallback` quando é falso.\n *\n * Com `children` em função, ela recebe o valor de `when` já sem `null` e `undefined`.\n *\n * Como o teste é truthy, `when={count}` com `count === 0` mostra o `fallback`; para números,\n * passe a comparação (`when={count > 0}`).\n *\n * @example\n * ```tsx\n * <Show when={user}>\n *   {(user) => <Profile data={user} />}\n * </Show>\n * ```\n */\nexport const Show = <T,>(props: ShowProps<T>): React.ReactNode => {\n  const { when, fallback, children } = props;\n\n  if (!when) {\n    return fallback;\n  }\n\n  return typeof children === 'function' ? children(when) : children;\n};\n\nShow.displayName = 'Show';\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAa,QAAY,UAAyC;CAChE,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,OAAO,aAAa,aAAa,SAAS,IAAI,IAAI;AAC3D;AAEA,KAAK,cAAc"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { BREAKPOINTS, Breakpoint, useIsBelowMediumScreen, useIsBreakpoint } from "./use-breakpoint.js";
+import { useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType } from "./use-pointer-type.js";
+export { BREAKPOINTS, Breakpoint, useIsBelowMediumScreen, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType };

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+import { BREAKPOINTS, useIsBelowMediumScreen, useIsBreakpoint } from "./use-breakpoint.js";
+import { useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType } from "./use-pointer-type.js";
+export { BREAKPOINTS, useIsBelowMediumScreen, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType };

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,56 @@
+//#region src/hooks/use-breakpoint.d.ts
+/**
+ * Define os breakpoints de tela utilizados para media queries responsivas.
+ *
+ * Cada breakpoint é especificado em rem para garantir acessibilidade e
+ * consistência visual em diferentes dispositivos. Segue o padrão mobile-first,
+ * onde o design base é otimizado para dispositivos móveis.
+ *
+ */
+export declare const BREAKPOINTS: {
+  /** Base para mobile-first, sem media query aplicada */
+  readonly base: "0";
+  /** Dispositivos extra extra pequenos - 320px (20rem) */
+  readonly '3xs': "20rem";
+  /** Dispositivos extra pequenos - 375px (24rem) */
+  readonly '2xs': "24rem";
+  /** Dispositivos extra pequenos - 448px (28rem) */
+  readonly xs: "28rem";
+  /** Dispositivos pequenos - 640px (40rem) */
+  readonly sm: "40rem";
+  /** Dispositivos médios - 768px (48rem) */
+  readonly md: "48rem";
+  /** Dispositivos grandes - 1024px (64rem) */
+  readonly lg: "64rem";
+  /** Dispositivos extra grandes - 1280px (80rem) */
+  readonly xl: "80rem";
+  /** Dispositivos extra extra grandes - 1536px (96rem) */
+  readonly '2xl': "96rem";
+};
+/**
+ * Tipo que representa as chaves dos breakpoints de tela disponíveis.
+ *
+ * Utilizado para garantir tipagem segura em componentes e hooks responsivos,
+ * permitindo apenas valores válidos de breakpoint.
+ */
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Monitora continuamente se um breakpoint específico está ativo na viewport atual.
+ *
+ * O hook se registra para escutar mudanças na media query e remove automaticamente
+ * os listeners quando o componente é desmontado, evitando vazamentos de memória.
+ *
+ * Segue o mesmo comportamento do Tailwind CSS (mobile-first com min-width).
+ *
+ * @param breakpoint - Identificador do breakpoint conforme definido na constante BREAKPOINTS.
+ * @returns Verdadeiro quando a viewport atual é maior ou igual ao breakpoint especificado (min-width), falso caso contrário.
+ */
+export declare const useIsBreakpoint: (breakpoint: Breakpoint) => boolean;
+/**
+ * Indica se a viewport atual está abaixo da tela média (breakpoint `md`).
+ *
+ * @returns Verdadeiro quando a viewport é menor que o breakpoint `md`, falso caso contrário.
+ */
+export declare const useIsBelowMediumScreen: () => boolean;
+//#endregion
+//# sourceMappingURL=use-breakpoint.d.ts.map

package/dist/hooks/use-breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.d.ts","names":[],"sources":["../../src/hooks/use-breakpoint.ts"],"mappings":";;;;;;;;;qBAUa;;;;;;;;;;;;;;;;;;;;;;;;;;YA2BD,0BAA0B;;;;;;;;;;;;qBAazB,kBAAmB,YAAY;;;;;;qBA6B/B"}

package/dist/hooks/use-breakpoint.js

@@ -0,0 +1,68 @@
+import { useLayoutEffect, useState } from "react";
+//#region src/hooks/use-breakpoint.ts
+/**
+* Define os breakpoints de tela utilizados para media queries responsivas.
+*
+* Cada breakpoint é especificado em rem para garantir acessibilidade e
+* consistência visual em diferentes dispositivos. Segue o padrão mobile-first,
+* onde o design base é otimizado para dispositivos móveis.
+*
+*/
+const BREAKPOINTS = {
+	/** Base para mobile-first, sem media query aplicada */
+	base: "0",
+	/** Dispositivos extra extra pequenos - 320px (20rem) */
+	"3xs": "20rem",
+	/** Dispositivos extra pequenos - 375px (24rem) */
+	"2xs": "24rem",
+	/** Dispositivos extra pequenos - 448px (28rem) */
+	xs: "28rem",
+	/** Dispositivos pequenos - 640px (40rem) */
+	sm: "40rem",
+	/** Dispositivos médios - 768px (48rem) */
+	md: "48rem",
+	/** Dispositivos grandes - 1024px (64rem) */
+	lg: "64rem",
+	/** Dispositivos extra grandes - 1280px (80rem) */
+	xl: "80rem",
+	/** Dispositivos extra extra grandes - 1536px (96rem) */
+	"2xl": "96rem"
+};
+/**
+* Monitora continuamente se um breakpoint específico está ativo na viewport atual.
+*
+* O hook se registra para escutar mudanças na media query e remove automaticamente
+* os listeners quando o componente é desmontado, evitando vazamentos de memória.
+*
+* Segue o mesmo comportamento do Tailwind CSS (mobile-first com min-width).
+*
+* @param breakpoint - Identificador do breakpoint conforme definido na constante BREAKPOINTS.
+* @returns Verdadeiro quando a viewport atual é maior ou igual ao breakpoint especificado (min-width), falso caso contrário.
+*/
+const useIsBreakpoint = (breakpoint) => {
+	const [breakpointMatch, setBreakPointMatch] = useState(false);
+	useLayoutEffect(() => {
+		const mediaQuery = window.matchMedia(`(min-width: ${BREAKPOINTS[breakpoint]})`);
+		const listener = (evento) => {
+			setBreakPointMatch(evento.matches);
+		};
+		setBreakPointMatch(mediaQuery.matches);
+		mediaQuery.addEventListener("change", listener);
+		return () => {
+			mediaQuery.removeEventListener("change", listener);
+		};
+	}, [breakpoint]);
+	return breakpointMatch;
+};
+/**
+* Indica se a viewport atual está abaixo da tela média (breakpoint `md`).
+*
+* @returns Verdadeiro quando a viewport é menor que o breakpoint `md`, falso caso contrário.
+*/
+const useIsBelowMediumScreen = () => {
+	return useIsBreakpoint("md") === false;
+};
+//#endregion
+export { BREAKPOINTS, useIsBelowMediumScreen, useIsBreakpoint };
+
+//# sourceMappingURL=use-breakpoint.js.map

package/dist/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","names":[],"sources":["../../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/**\n * Define os breakpoints de tela utilizados para media queries responsivas.\n *\n * Cada breakpoint é especificado em rem para garantir acessibilidade e\n * consistência visual em diferentes dispositivos. Segue o padrão mobile-first,\n * onde o design base é otimizado para dispositivos móveis.\n *\n */\nexport const BREAKPOINTS = {\n  /** Base para mobile-first, sem media query aplicada */\n  base: '0',\n  /** Dispositivos extra extra pequenos - 320px (20rem) */\n  '3xs': '20rem',\n  /** Dispositivos extra pequenos - 375px (24rem) */\n  '2xs': '24rem',\n  /** Dispositivos extra pequenos - 448px (28rem) */\n  xs: '28rem',\n  /** Dispositivos pequenos - 640px (40rem) */\n  sm: '40rem',\n  /** Dispositivos médios - 768px (48rem) */\n  md: '48rem',\n  /** Dispositivos grandes - 1024px (64rem) */\n  lg: '64rem',\n  /** Dispositivos extra grandes - 1280px (80rem) */\n  xl: '80rem',\n  /** Dispositivos extra extra grandes - 1536px (96rem) */\n  '2xl': '96rem',\n} as const;\n\n/**\n * Tipo que representa as chaves dos breakpoints de tela disponíveis.\n *\n * Utilizado para garantir tipagem segura em componentes e hooks responsivos,\n * permitindo apenas valores válidos de breakpoint.\n */\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Monitora continuamente se um breakpoint específico está ativo na viewport atual.\n *\n * O hook se registra para escutar mudanças na media query e remove automaticamente\n * os listeners quando o componente é desmontado, evitando vazamentos de memória.\n *\n * Segue o mesmo comportamento do Tailwind CSS (mobile-first com min-width).\n *\n * @param breakpoint - Identificador do breakpoint conforme definido na constante BREAKPOINTS.\n * @returns Verdadeiro quando a viewport atual é maior ou igual ao breakpoint especificado (min-width), falso caso contrário.\n */\nexport const useIsBreakpoint = (breakpoint: Breakpoint): boolean => {\n  const [breakpointMatch, setBreakPointMatch] = useState(false);\n\n  useLayoutEffect(() => {\n    const mediaQuery = window.matchMedia(\n      `(min-width: ${BREAKPOINTS[breakpoint]})`,\n    );\n\n    const listener = (evento: MediaQueryListEvent) => {\n      setBreakPointMatch(evento.matches);\n    };\n\n    setBreakPointMatch(mediaQuery.matches);\n\n    mediaQuery.addEventListener('change', listener);\n\n    return () => {\n      mediaQuery.removeEventListener('change', listener);\n    };\n  }, [breakpoint]);\n\n  return breakpointMatch;\n};\n\n/**\n * Indica se a viewport atual está abaixo da tela média (breakpoint `md`).\n *\n * @returns Verdadeiro quando a viewport é menor que o breakpoint `md`, falso caso contrário.\n */\nexport const useIsBelowMediumScreen = (): boolean => {\n  return useIsBreakpoint('md') === false;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAa,cAAc;;CAEzB,MAAM;;CAEN,OAAO;;CAEP,OAAO;;CAEP,IAAI;;CAEJ,IAAI;;CAEJ,IAAI;;CAEJ,IAAI;;CAEJ,IAAI;;CAEJ,OAAO;AACT;;;;;;;;;;;;AAqBA,MAAa,mBAAmB,eAAoC;CAClE,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAE5D,sBAAsB;EACpB,MAAM,aAAa,OAAO,WACxB,eAAe,YAAY,YAAY,EACzC;EAEA,MAAM,YAAY,WAAgC;GAChD,mBAAmB,OAAO,OAAO;EACnC;EAEA,mBAAmB,WAAW,OAAO;EAErC,WAAW,iBAAiB,UAAU,QAAQ;EAE9C,aAAa;GACX,WAAW,oBAAoB,UAAU,QAAQ;EACnD;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,OAAO;AACT;;;;;;AAOA,MAAa,+BAAwC;CACnD,OAAO,gBAAgB,IAAI,MAAM;AACnC"}

package/dist/hooks/use-pointer-type.d.ts

@@ -0,0 +1,25 @@
+//#region src/hooks/use-pointer-type.d.ts
+type PointerType = 'coarse' | 'fine';
+/**
+ * Detecta o tipo de ponteiro primário do dispositivo com base em media queries CSS,
+ * reagindo em tempo real a mudanças de contexto — como um notebook conversível
+ * alternando entre modo touch e modo mouse, ou a conexão de um mouse externo.
+ *
+ * @returns `'coarse'` quando o ponteiro primário é impreciso e sem hover (ex: touch),
+ * ou `'fine'` quando é preciso e suporta hover (ex: mouse)
+ */
+export declare const usePointerType: () => PointerType;
+/**
+ * Verifica se o dispositivo tem um ponteiro preciso (mouse) como entrada primária.
+ *
+ * @returns Verdadeiro quando o ponteiro primário é `'fine'`
+ */
+export declare const useIsPointerPrimaryDevice: () => boolean;
+/**
+ * Verifica se o dispositivo tem touch como entrada primária.
+ *
+ * @returns Verdadeiro quando o ponteiro primário é `'coarse'`
+ */
+export declare const useIsTouchPrimaryDevice: () => boolean;
+//#endregion
+//# sourceMappingURL=use-pointer-type.d.ts.map

package/dist/hooks/use-pointer-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pointer-type.d.ts","names":[],"sources":["../../src/hooks/use-pointer-type.ts"],"mappings":";KAIK;;;;;;;;;qBAUQ,sBAAqB;;;;;;qBAiCrB;;;;;;qBASA"}

package/dist/hooks/use-pointer-type.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/use-pointer-type.ts
+const TOUCH_MEDIA_QUERY = "(pointer: coarse) and (hover: none)";
+/**
+* Detecta o tipo de ponteiro primário do dispositivo com base em media queries CSS,
+* reagindo em tempo real a mudanças de contexto — como um notebook conversível
+* alternando entre modo touch e modo mouse, ou a conexão de um mouse externo.
+*
+* @returns `'coarse'` quando o ponteiro primário é impreciso e sem hover (ex: touch),
+* ou `'fine'` quando é preciso e suporta hover (ex: mouse)
+*/
+const usePointerType = () => {
+	const [pointerType, setPointerType] = useState(() => {
+		if (typeof window === "undefined") return "fine";
+		return window.matchMedia(TOUCH_MEDIA_QUERY).matches ? "coarse" : "fine";
+	});
+	useEffect(() => {
+		const mediaQueryList = window.matchMedia(TOUCH_MEDIA_QUERY);
+		const handleMediaQueryChange = (event) => {
+			setPointerType(event.matches ? "coarse" : "fine");
+		};
+		mediaQueryList.addEventListener("change", handleMediaQueryChange);
+		return () => {
+			mediaQueryList.removeEventListener("change", handleMediaQueryChange);
+		};
+	}, []);
+	return pointerType;
+};
+/**
+* Verifica se o dispositivo tem um ponteiro preciso (mouse) como entrada primária.
+*
+* @returns Verdadeiro quando o ponteiro primário é `'fine'`
+*/
+const useIsPointerPrimaryDevice = () => {
+	return usePointerType() === "fine";
+};
+/**
+* Verifica se o dispositivo tem touch como entrada primária.
+*
+* @returns Verdadeiro quando o ponteiro primário é `'coarse'`
+*/
+const useIsTouchPrimaryDevice = () => {
+	return usePointerType() === "coarse";
+};
+//#endregion
+export { useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType };
+
+//# sourceMappingURL=use-pointer-type.js.map

package/dist/hooks/use-pointer-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pointer-type.js","names":[],"sources":["../../src/hooks/use-pointer-type.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst TOUCH_MEDIA_QUERY = '(pointer: coarse) and (hover: none)';\n\ntype PointerType = 'coarse' | 'fine';\n\n/**\n * Detecta o tipo de ponteiro primário do dispositivo com base em media queries CSS,\n * reagindo em tempo real a mudanças de contexto — como um notebook conversível\n * alternando entre modo touch e modo mouse, ou a conexão de um mouse externo.\n *\n * @returns `'coarse'` quando o ponteiro primário é impreciso e sem hover (ex: touch),\n * ou `'fine'` quando é preciso e suporta hover (ex: mouse)\n */\nexport const usePointerType = (): PointerType => {\n  const [pointerType, setPointerType] = useState<PointerType>(() => {\n    // Evita erro em ambientes de SSR, onde `window` não existe\n    if (typeof window === 'undefined') {\n      return 'fine';\n    }\n\n    return window.matchMedia(TOUCH_MEDIA_QUERY).matches ? 'coarse' : 'fine';\n  });\n\n  useEffect(() => {\n    const mediaQueryList = window.matchMedia(TOUCH_MEDIA_QUERY);\n\n    // Atualiza o estado sempre que o tipo de ponteiro primário mudar\n    const handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      setPointerType(event.matches ? 'coarse' : 'fine');\n    };\n\n    mediaQueryList.addEventListener('change', handleMediaQueryChange);\n\n    return () => {\n      mediaQueryList.removeEventListener('change', handleMediaQueryChange);\n    };\n  }, []);\n\n  return pointerType;\n};\n\n/**\n * Verifica se o dispositivo tem um ponteiro preciso (mouse) como entrada primária.\n *\n * @returns Verdadeiro quando o ponteiro primário é `'fine'`\n */\nexport const useIsPointerPrimaryDevice = (): boolean => {\n  return usePointerType() === 'fine';\n};\n\n/**\n * Verifica se o dispositivo tem touch como entrada primária.\n *\n * @returns Verdadeiro quando o ponteiro primário é `'coarse'`\n */\nexport const useIsTouchPrimaryDevice = (): boolean => {\n  return usePointerType() === 'coarse';\n};\n"],"mappings":";;AAEA,MAAM,oBAAoB;;;;;;;;;AAY1B,MAAa,uBAAoC;CAC/C,MAAM,CAAC,aAAa,kBAAkB,eAA4B;EAEhE,IAAI,OAAO,WAAW,aACpB,OAAO;EAGT,OAAO,OAAO,WAAW,iBAAiB,CAAC,CAAC,UAAU,WAAW;CACnE,CAAC;CAED,gBAAgB;EACd,MAAM,iBAAiB,OAAO,WAAW,iBAAiB;EAG1D,MAAM,0BAA0B,UAAqC;GACnE,eAAe,MAAM,UAAU,WAAW,MAAM;EAClD;EAEA,eAAe,iBAAiB,UAAU,sBAAsB;EAEhE,aAAa;GACX,eAAe,oBAAoB,UAAU,sBAAsB;EACrE;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;;;;;;AAOA,MAAa,kCAA2C;CACtD,OAAO,eAAe,MAAM;AAC9B;;;;;;AAOA,MAAa,gCAAyC;CACpD,OAAO,eAAe,MAAM;AAC9B"}

package/dist/hooks/use-responsive-breakpoint.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from "./use-breakpoint.js";
+//#region src/hooks/use-responsive-breakpoint.d.ts
+/**
+ * Monitora e retorna o breakpoint responsivo atual baseado na largura da viewport.
+ *
+ * Detecta automaticamente mudanças de redimensionamento da janela e atualiza o estado,
+ * registrando um listener no evento `resize` que é removido ao desmontar o componente.
+ *
+ * Diferente de {@link useIsBreakpoint}, que verifica um único breakpoint por vez,
+ * este hook retorna o nome do breakpoint ativo no momento (ex: `'md'`, `'lg'`).
+ *
+ * @returns O breakpoint atual correspondente à largura da viewport, ou `'base'`
+ * durante a renderização no servidor (SSR) para evitar hydration mismatch.
+ * ```
+ */
+export declare const useResponsiveBreakpoint: () => Breakpoint;
+//#endregion
+//# sourceMappingURL=use-responsive-breakpoint.d.ts.map

package/dist/hooks/use-responsive-breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-responsive-breakpoint.d.ts","names":[],"sources":["../../src/hooks/use-responsive-breakpoint.ts"],"mappings":";;;;;;;;;;;;;;;qBAgDa,+BAA8B"}

package/dist/hooks/use-responsive-breakpoint.js

@@ -0,0 +1,56 @@
+import { BREAKPOINTS } from "./use-breakpoint.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/hooks/use-responsive-breakpoint.ts
+/**
+* Converte uma string em rem para pixels utilizando a conversão padrão (1rem = 16px).
+*
+* @param remValue - Valor em rem como string (ex: `"48rem"`).
+* @returns Valor numérico convertido em pixels.
+*/
+const convertRemToPixels = (remValue) => Number.parseFloat(remValue) * 16;
+/**
+* Determina o breakpoint correspondente à largura atual da viewport.
+* Analisa todos os breakpoints disponíveis e retorna o maior breakpoint
+* cujo valor mínimo seja menor ou igual à largura fornecida.
+*
+* @param viewportWidth - Largura atual da viewport em pixels.
+* @returns O breakpoint correspondente à largura, ou `'base'` como fallback.
+*/
+const getCurrentBreakpoint = (viewportWidth) => {
+	return Object.entries(BREAKPOINTS).map(([breakpointName, remValue]) => ({
+		breakpoint: breakpointName,
+		pixels: convertRemToPixels(remValue)
+	})).sort((a, b) => b.pixels - a.pixels).find(({ pixels }) => viewportWidth >= pixels)?.breakpoint ?? "base";
+};
+/**
+* Monitora e retorna o breakpoint responsivo atual baseado na largura da viewport.
+*
+* Detecta automaticamente mudanças de redimensionamento da janela e atualiza o estado,
+* registrando um listener no evento `resize` que é removido ao desmontar o componente.
+*
+* Diferente de {@link useIsBreakpoint}, que verifica um único breakpoint por vez,
+* este hook retorna o nome do breakpoint ativo no momento (ex: `'md'`, `'lg'`).
+*
+* @returns O breakpoint atual correspondente à largura da viewport, ou `'base'`
+* durante a renderização no servidor (SSR) para evitar hydration mismatch.
+* ```
+*/
+const useResponsiveBreakpoint = () => {
+	const getInitialBreakpoint = () => {
+		if (typeof window === "undefined") return "base";
+		return getCurrentBreakpoint(window.innerWidth);
+	};
+	const [currentBreakpoint, setCurrentBreakpoint] = useState(getInitialBreakpoint);
+	const updateBreakpoint = useCallback(() => {
+		setCurrentBreakpoint(getCurrentBreakpoint(window.innerWidth));
+	}, []);
+	useEffect(() => {
+		window.addEventListener("resize", updateBreakpoint);
+		return () => window.removeEventListener("resize", updateBreakpoint);
+	}, [updateBreakpoint]);
+	return currentBreakpoint;
+};
+//#endregion
+export { useResponsiveBreakpoint };
+
+//# sourceMappingURL=use-responsive-breakpoint.js.map

package/dist/hooks/use-responsive-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-responsive-breakpoint.js","names":[],"sources":["../../src/hooks/use-responsive-breakpoint.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { BREAKPOINTS, type Breakpoint } from '#hooks';\n\n/**\n * Converte uma string em rem para pixels utilizando a conversão padrão (1rem = 16px).\n *\n * @param remValue - Valor em rem como string (ex: `\"48rem\"`).\n * @returns Valor numérico convertido em pixels.\n */\nconst convertRemToPixels = (remValue: string): number =>\n  Number.parseFloat(remValue) * 16;\n\n/**\n * Determina o breakpoint correspondente à largura atual da viewport.\n * Analisa todos os breakpoints disponíveis e retorna o maior breakpoint\n * cujo valor mínimo seja menor ou igual à largura fornecida.\n *\n * @param viewportWidth - Largura atual da viewport em pixels.\n * @returns O breakpoint correspondente à largura, ou `'base'` como fallback.\n */\nconst getCurrentBreakpoint = (viewportWidth: number): Breakpoint => {\n  const breakpointsInPixels = Object.entries(BREAKPOINTS)\n    .map(([breakpointName, remValue]) => ({\n      breakpoint: breakpointName as Breakpoint,\n      pixels: convertRemToPixels(remValue),\n    }))\n    .sort((a, b) => b.pixels - a.pixels);\n\n  const matchingBreakpoint = breakpointsInPixels.find(\n    ({ pixels }) => viewportWidth >= pixels,\n  );\n\n  return matchingBreakpoint?.breakpoint ?? 'base';\n};\n\n/**\n * Monitora e retorna o breakpoint responsivo atual baseado na largura da viewport.\n *\n * Detecta automaticamente mudanças de redimensionamento da janela e atualiza o estado,\n * registrando um listener no evento `resize` que é removido ao desmontar o componente.\n *\n * Diferente de {@link useIsBreakpoint}, que verifica um único breakpoint por vez,\n * este hook retorna o nome do breakpoint ativo no momento (ex: `'md'`, `'lg'`).\n *\n * @returns O breakpoint atual correspondente à largura da viewport, ou `'base'`\n * durante a renderização no servidor (SSR) para evitar hydration mismatch.\n * ```\n */\nexport const useResponsiveBreakpoint = (): Breakpoint => {\n  /*\n   * Retorna 'base' no servidor (SSR) para evitar hydration mismatch,\n   * já que `window` não está disponível fora do navegador.\n   */\n  const getInitialBreakpoint = (): Breakpoint => {\n    if (typeof window === 'undefined') {\n      return 'base';\n    }\n\n    return getCurrentBreakpoint(window.innerWidth);\n  };\n\n  const [currentBreakpoint, setCurrentBreakpoint] =\n    useState<Breakpoint>(getInitialBreakpoint);\n\n  const updateBreakpoint = useCallback(() => {\n    setCurrentBreakpoint(getCurrentBreakpoint(window.innerWidth));\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateBreakpoint);\n\n    return () => window.removeEventListener('resize', updateBreakpoint);\n  }, [updateBreakpoint]);\n\n  return currentBreakpoint;\n};\n"],"mappings":";;;;;;;;;AASA,MAAM,sBAAsB,aAC1B,OAAO,WAAW,QAAQ,IAAI;;;;;;;;;AAUhC,MAAM,wBAAwB,kBAAsC;CAYlE,OAX4B,OAAO,QAAQ,WAAW,CAAC,CACpD,KAAK,CAAC,gBAAgB,eAAe;EACpC,YAAY;EACZ,QAAQ,mBAAmB,QAAQ;CACrC,EAAE,CAAC,CACF,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAEc,CAAC,CAAC,MAC5C,EAAE,aAAa,iBAAiB,MAGX,CAAC,EAAE,cAAc;AAC3C;;;;;;;;;;;;;;AAeA,MAAa,gCAA4C;CAKvD,MAAM,6BAAyC;EAC7C,IAAI,OAAO,WAAW,aACpB,OAAO;EAGT,OAAO,qBAAqB,OAAO,UAAU;CAC/C;CAEA,MAAM,CAAC,mBAAmB,wBACxB,SAAqB,oBAAoB;CAE3C,MAAM,mBAAmB,kBAAkB;EACzC,qBAAqB,qBAAqB,OAAO,UAAU,CAAC;CAC9D,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,OAAO,iBAAiB,UAAU,gBAAgB;EAElD,aAAa,OAAO,oBAAoB,UAAU,gBAAgB;CACpE,GAAG,CAAC,gBAAgB,CAAC;CAErB,OAAO;AACT"}

package/dist/types/color-scheme.d.ts

@@ -0,0 +1,30 @@
+//#region src/types/color-scheme.d.ts
+/**
+ * Esquemas de cor da prop `colorScheme`, em quatro camadas. Cada camada contém
+ * a anterior, e cada componente aceita só a camada que faz sentido para ele.
+ *
+ * Cada valor corresponde a uma escala de cor do tema (`--color-<escala>-1` a
+ * `-12`), inspirada no Radix Colors; `brand` é a escala da cor da marca.
+ */
+/**
+ * Cor neutra e cor da marca. Para controles e estrutura (tabs, select,
+ * checkbox, input).
+ */
+export type ColorSchemeCore = 'gray' | 'brand';
+/**
+ * Cores de estado: erro, sucesso, aviso e informação. Para o que comunica
+ * estado (botão destrutivo, alerta, toast).
+ */
+export type ColorSchemeSemantic = ColorSchemeCore | 'red' | 'green' | 'blue' | 'amber';
+/**
+ * Uma escala por família de matiz, sem as variações próximas entre si. Para
+ * destaque com variedade (mark, kbd, avatar).
+ */
+export type ColorSchemePalette = ColorSchemeSemantic | 'purple' | 'pink' | 'cyan' | 'teal' | 'orange' | 'brown' | 'yellow';
+/**
+ * Todas as escalas do tema. Para categorização com muitas categorias (badge,
+ * tag, chip).
+ */
+export type ColorSchemeFull = ColorSchemePalette | 'bronze' | 'gold' | 'tomato' | 'ruby' | 'crimson' | 'plum' | 'violet' | 'iris' | 'indigo' | 'sky' | 'mint' | 'lime' | 'jade' | 'grass';
+//#endregion
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/types/color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.d.ts","names":[],"sources":["../../src/types/color-scheme.ts"],"mappings":";;;;;;;;;;;;YAYY;;;;;YAMA,sBACR;;;;;YAUQ,qBACR;;;;;YAaQ,kBACR"}