@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorSchemeCore, ColorSchemeFull, ColorSchemePalette, ColorSchemeSemantic } from "./color-scheme.js";
+export type { ColorSchemeCore, ColorSchemeFull, ColorSchemePalette, ColorSchemeSemantic };

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+import { StateClassName, mergeStateClassNames } from "./merge-state-class-names.js";
+import { DataAttribute, normalizeDataAttr } from "./normalize-data-attr.js";
+export { DataAttribute, StateClassName, mergeStateClassNames, mergeTwClassNames, normalizeDataAttr };

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+import { mergeStateClassNames } from "./merge-state-class-names.js";
+import { normalizeDataAttr } from "./normalize-data-attr.js";
+export { mergeStateClassNames, mergeTwClassNames, normalizeDataAttr };

package/dist/utils/merge-class-names.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue } from "clsx";
+//#region src/utils/merge-class-names.d.ts
+/**
+ * Função Mesclar Nomes de Classe
+ *
+ * Combina múltiplas classes CSS utilizando clsx para processar diferentes
+ * tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.
+ *
+ *
+ * @param classes - Lista de valores que representam classes CSS.
+ * @returns String contendo as classes combinadas e otimizadas.
+ *
+ * @example
+ *
+ * mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);
+ * // Retorna: "bg-red-500 text-white p-4"
+ */
+export declare const mergeTwClassNames: (...classes: ClassValue[]) => string;
+//#endregion
+//# sourceMappingURL=merge-class-names.d.ts.map

package/dist/utils/merge-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-names.d.ts","names":[],"sources":["../../src/utils/merge-class-names.ts"],"mappings":";;;;;;;;;;;;;;;;;qBAkBa,uBAAwB,SAAS"}

package/dist/utils/merge-class-names.js

@@ -0,0 +1,39 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge, validators } from "tailwind-merge";
+//#region src/utils/merge-class-names.ts
+/**
+* Função Mesclar Nomes de Classe
+*
+* Combina múltiplas classes CSS utilizando clsx para processar diferentes
+* tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.
+*
+*
+* @param classes - Lista de valores que representam classes CSS.
+* @returns String contendo as classes combinadas e otimizadas.
+*
+* @example
+*
+* mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);
+* // Retorna: "bg-red-500 text-white p-4"
+*/
+const mergeTwClassNames = (...classes) => {
+	return extendTwMerge(clsx(...classes));
+};
+/**
+* `tailwind-merge` com os grupos das utilities próprias do tema. Uma utility de fora dos grupos
+* conhecidos nunca é descartada: duas delas na mesma propriedade ficam juntas no elemento, e a
+* ordem do CSS decide, não a `className` de quem usa.
+*/
+const extendTwMerge = extendTailwindMerge({ extend: { classGroups: { "corner-shape": [{ corner: [
+	"normal",
+	"round",
+	"bevel",
+	"notch",
+	"scoop",
+	"squircle",
+	validators.isArbitraryValue
+] }] } } });
+//#endregion
+export { mergeTwClassNames };
+
+//# sourceMappingURL=merge-class-names.js.map

package/dist/utils/merge-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-names.js","names":[],"sources":["../../src/utils/merge-class-names.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge, validators } from 'tailwind-merge';\n\n/**\n * Função Mesclar Nomes de Classe\n *\n * Combina múltiplas classes CSS utilizando clsx para processar diferentes\n * tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.\n *\n *\n * @param classes - Lista de valores que representam classes CSS.\n * @returns String contendo as classes combinadas e otimizadas.\n *\n * @example\n *\n * mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);\n * // Retorna: \"bg-red-500 text-white p-4\"\n */\nexport const mergeTwClassNames = (...classes: ClassValue[]): string => {\n  return extendTwMerge(clsx(...classes));\n};\n\n/**\n * `tailwind-merge` com os grupos das utilities próprias do tema. Uma utility de fora dos grupos\n * conhecidos nunca é descartada: duas delas na mesma propriedade ficam juntas no elemento, e a\n * ordem do CSS decide, não a `className` de quem usa.\n */\nconst extendTwMerge = extendTailwindMerge<'corner-shape'>({\n  extend: {\n    classGroups: {\n      // `theme/utilities/corner-shape.css`.\n      'corner-shape': [\n        {\n          corner: [\n            'normal',\n            'round',\n            'bevel',\n            'notch',\n            'scoop',\n            'squircle',\n            validators.isArbitraryValue,\n          ],\n        },\n      ],\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,GAAG,YAAkC;CACrE,OAAO,cAAc,KAAK,GAAG,OAAO,CAAC;AACvC;;;;;;AAOA,MAAM,gBAAgB,oBAAoC,EACxD,QAAQ,EACN,aAAa,EAEX,gBAAgB,CACd,EACE,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA,WAAW;AACb,EACF,CACF,EACF,EACF,EACF,CAAC"}

package/dist/utils/merge-state-class-names.d.ts

@@ -0,0 +1,36 @@
+import { ClassValue } from "clsx";
+//#region src/utils/merge-state-class-names.d.ts
+/**
+ * `className` aceito pelos componentes do Base UI: uma string ou uma função
+ * que recebe o estado do componente e devolve a string.
+ *
+ * @template State - Estado que o componente do Base UI entrega à função.
+ */
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+/**
+ * Função Mesclar Nomes de Classe com Estado
+ *
+ * Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo
+ * `className` pode ser uma função do estado. Passar essa função direto ao
+ * `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.
+ *
+ * Com string (ou `undefined`), devolve as classes já mescladas. Com função,
+ * devolve outra função, que o Base UI chama com o estado; as classes base vêm
+ * primeiro e as de quem usa por último, vencendo os conflitos.
+ *
+ * @template State - Estado do componente do Base UI.
+ * @param baseClassName - Classes do componente (array, string ou saída do `cva`).
+ * @param className - `className` recebido nas props.
+ * @returns String mesclada ou função do estado que devolve a string mesclada.
+ *
+ * @example
+ * ```tsx
+ * <BaseTabs.Tab
+ *   className={mergeStateClassNames(tabsTabVariants({ size }), className)}
+ *   {...rest}
+ * />
+ * ```
+ */
+export declare const mergeStateClassNames: <State>(baseClassName: ClassValue, className: StateClassName<State>) => string | ((state: State) => string);
+//#endregion
+//# sourceMappingURL=merge-state-class-names.d.ts.map

package/dist/utils/merge-state-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-state-class-names.d.ts","names":[],"sources":["../../src/utils/merge-state-class-names.ts"],"mappings":";;;;;;;;YASY,eAAe,oBAErB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BA,uBAAwB,OACnC,eAAe,YACf,WAAW,eAAe,sBACd,OAAO"}

package/dist/utils/merge-state-class-names.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+//#region src/utils/merge-state-class-names.ts
+/**
+* Função Mesclar Nomes de Classe com Estado
+*
+* Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo
+* `className` pode ser uma função do estado. Passar essa função direto ao
+* `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.
+*
+* Com string (ou `undefined`), devolve as classes já mescladas. Com função,
+* devolve outra função, que o Base UI chama com o estado; as classes base vêm
+* primeiro e as de quem usa por último, vencendo os conflitos.
+*
+* @template State - Estado do componente do Base UI.
+* @param baseClassName - Classes do componente (array, string ou saída do `cva`).
+* @param className - `className` recebido nas props.
+* @returns String mesclada ou função do estado que devolve a string mesclada.
+*
+* @example
+* ```tsx
+* <BaseTabs.Tab
+*   className={mergeStateClassNames(tabsTabVariants({ size }), className)}
+*   {...rest}
+* />
+* ```
+*/
+const mergeStateClassNames = (baseClassName, className) => {
+	if (typeof className === "function") return (state) => mergeTwClassNames(baseClassName, className(state));
+	return mergeTwClassNames(baseClassName, className);
+};
+//#endregion
+export { mergeStateClassNames };
+
+//# sourceMappingURL=merge-state-class-names.js.map

package/dist/utils/merge-state-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-state-class-names.js","names":[],"sources":["../../src/utils/merge-state-class-names.ts"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { mergeTwClassNames } from './merge-class-names';\n\n/**\n * `className` aceito pelos componentes do Base UI: uma string ou uma função\n * que recebe o estado do componente e devolve a string.\n *\n * @template State - Estado que o componente do Base UI entrega à função.\n */\nexport type StateClassName<State> =\n  | string\n  | ((state: State) => string | undefined)\n  | undefined;\n\n/**\n * Função Mesclar Nomes de Classe com Estado\n *\n * Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo\n * `className` pode ser uma função do estado. Passar essa função direto ao\n * `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.\n *\n * Com string (ou `undefined`), devolve as classes já mescladas. Com função,\n * devolve outra função, que o Base UI chama com o estado; as classes base vêm\n * primeiro e as de quem usa por último, vencendo os conflitos.\n *\n * @template State - Estado do componente do Base UI.\n * @param baseClassName - Classes do componente (array, string ou saída do `cva`).\n * @param className - `className` recebido nas props.\n * @returns String mesclada ou função do estado que devolve a string mesclada.\n *\n * @example\n * ```tsx\n * <BaseTabs.Tab\n *   className={mergeStateClassNames(tabsTabVariants({ size }), className)}\n *   {...rest}\n * />\n * ```\n */\nexport const mergeStateClassNames = <State>(\n  baseClassName: ClassValue,\n  className: StateClassName<State>,\n): string | ((state: State) => string) => {\n  if (typeof className === 'function') {\n    return (state: State) => mergeTwClassNames(baseClassName, className(state));\n  }\n\n  return mergeTwClassNames(baseClassName, className);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,wBACX,eACA,cACwC;CACxC,IAAI,OAAO,cAAc,YACvB,QAAQ,UAAiB,kBAAkB,eAAe,UAAU,KAAK,CAAC;CAG5E,OAAO,kBAAkB,eAAe,SAAS;AACnD"}