@rendra-ui/web 2.4.0 → 2.5.0

package/dist/types/components/rendra-router-bridge.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import type { MotionMode } from '../lib/motion/motion-context';
 /**
  * Metadados de rota lidos pela trilha: handle: { crumb: 'Clientes' }. Convenção do
  * react-router (`handle`), que não existe em outros roteadores; por isso fica aqui, na
@@ -13,6 +14,7 @@ export interface RouteHandle {
  * componentes de `src/components/ui` e o `AppShell` não importam `react-router` diretamente.
  * Sem `children`, renderiza `<Outlet />`, para ser usado como elemento raiz das rotas.
  */
-export declare function RendraRouterBridge({ children }?: {
+export declare function RendraRouterBridge({ children, motion, }?: {
     children?: ReactNode;
+    motion?: MotionMode;
 }): import("react").JSX.Element;

package/dist/types/components/ui/accordion.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface AccordionItem {
     value: string;
     title: ReactNode;

package/dist/types/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import type { HTMLAttributes, ReactNode } from 'react';
 declare const badgeVariants: (props?: ({
-    tone?: "success" | "error" | "warning" | "info" | "primary" | "outline" | "neutral" | null | undefined;
+    tone?: "outline" | "success" | "error" | "warning" | "info" | "primary" | "neutral" | null | undefined;
     solid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {

package/dist/types/components/ui/button.d.ts

@@ -6,7 +6,7 @@ import { type ButtonHTMLAttributes, type ReactNode } from 'react';
  * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.
  */
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "link" | "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/types/components/ui/dropdown-menu.d.ts

@@ -1,11 +1,11 @@
 import { DropdownMenu as D } from 'radix-ui';
-import type { ComponentProps } from 'react';
-export declare const DropdownMenu: import("react").FC<D.DropdownMenuProps>;
+import { type ComponentProps } from 'react';
+export declare function DropdownMenu(props: ComponentProps<typeof D.Root>): import("react").JSX.Element;
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<D.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DropdownMenuSub: import("react").FC<D.DropdownMenuSubProps>;
+export declare function DropdownMenuSub(props: ComponentProps<typeof D.Sub>): import("react").JSX.Element;
 export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof D.Content>): import("react").JSX.Element;
+export declare function DropdownMenuContent({ className, sideOffset, children, asChild, ...props }: ComponentProps<typeof D.Content>): import("react").JSX.Element;
 interface ItemProps extends ComponentProps<typeof D.Item> {
     /** Item destrutivo (excluir, sair): texto na cor destrutiva. */
     destructive?: boolean;
@@ -16,5 +16,5 @@ export declare function DropdownMenuRadioItem({ className, children, ...props }:
 export declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof D.Label>): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof D.Separator>): import("react").JSX.Element;
 export declare function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof D.SubTrigger>): import("react").JSX.Element;
-export declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof D.SubContent>): import("react").JSX.Element;
+export declare function DropdownMenuSubContent({ className, children, asChild, ...props }: ComponentProps<typeof D.SubContent>): import("react").JSX.Element;
 export {};

package/dist/types/components/ui/picker-panel.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 interface PickerPanelProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;

package/dist/types/components/ui/popover.d.ts

@@ -1,6 +1,6 @@
 import { Popover as P } from 'radix-ui';
-import type { ComponentProps } from 'react';
-export declare const Popover: import("react").FC<P.PopoverProps>;
+import { type ComponentProps } from 'react';
+export declare function Popover(props: ComponentProps<typeof P.Root>): import("react").JSX.Element;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<P.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverClose: import("react").ForwardRefExoticComponent<P.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<P.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -8,5 +8,5 @@ interface PopoverContentProps extends ComponentProps<typeof P.Content> {
     /** Largura: sm (16rem) ou md (22rem). Sempre limitada à tela menos 32px. */
     width?: 'sm' | 'md';
 }
-export declare function PopoverContent({ className, align, sideOffset, width, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverContent({ className, align, sideOffset, width, children, asChild, ...props }: PopoverContentProps): import("react").JSX.Element;
 export {};

package/dist/types/components/ui/radio-group.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface RadioOption {
     value: string;
     label: ReactNode;

package/dist/types/components/ui/skeleton.d.ts

@@ -1,3 +1,7 @@
 import type { HTMLAttributes } from 'react';
-/** Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. */
+/**
+ * Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. Em `off` pulsa
+ * (animate-pulse do Tailwind); em `on` um brilho suave cruza o bloco (skeleton-shimmer, em
+ * globals.css: transform, tempo e curva pelos tokens, parado com "reduzir movimento").
+ */
 export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/types/components/ui/stat-card.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface StatCardProps {
     label: string;
     value: ReactNode;

package/dist/types/components/ui/table.d.ts

@@ -125,10 +125,4 @@ export interface TableProps<T> {
     /** Rótulo da tabela para leitores de tela. */
     'aria-label': string;
 }
-/**
- * Table única do sistema (TanStack Table). Tudo é prop: seleção, expansão, ordenação,
- * busca, colunas visíveis, ações em massa e por linha, densidade e estados.
- * Mobile (< 768px): a mesma tabela vira lista de cards, sem rolagem horizontal.
- * Desktop: tabela larga rola na horizontal só dentro do próprio contêiner.
- */
 export declare function Table<T>({ data: dataProp, source, queryKey, columns: columnsProp, statusLast, getRowId, selectable, expandable, sortable, globalFilter, columnVisibility, bulkActions, bulkMenu, rowActions, density, loading, error, onRetry, empty, pageSize: pageSizeProp, mobilePagination, toolbar, ...aria }: TableProps<T>): import("react").JSX.Element;

package/dist/types/components/ui/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /**
  * Tooltip: só para informação complementar, nunca essencial (não existe hover no toque).
  * Informação essencial vai em texto de ajuda visível ou em Popover acionado por toque.

package/dist/types/hooks/use-reduced-motion.d.ts

@@ -1 +1,4 @@
+/** Fonte única da preferência (também usada pelo motion, que só a assina em `on`). */
+export declare function subscribeReducedMotion(cb: () => void): () => void;
+export declare function getReducedMotion(): boolean;
 export declare function usePrefersReducedMotion(): boolean;

package/dist/types/index.d.ts

@@ -58,6 +58,7 @@ export * from './components/app-shell/app-shell';
 export * from './components/app-shell/layout';
 export * from './components/app-shell/types';
 export * from './components/rendra-provider';
+export type { MotionMode } from './lib/motion/motion-context';
 export * from './catalog/components';
 export * from './hooks/use-breakpoint';
 export * from './hooks/use-debounced-value';

package/dist/types/lib/motion/count.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface ParsedNumber {
+    /** Tudo antes do número (inclui o sinal de menos). */
+    prefix: string;
+    /** Tudo depois do número. */
+    suffix: string;
+    /** Valor numérico (sem sinal no `prefix`: o sinal já está aqui). */
+    value: number;
+    decimals: number;
+    /** Separador de milhar "." (texto pt-BR que o usava). */
+    grouping: boolean;
+    /** Separador decimal: "," no texto pt-BR, "." no número do JavaScript. */
+    decimalSeparator: ',' | '.';
+}
+export declare function parseLocaleNumber(value: ReactNode): ParsedNumber | null;
+/** Escreve `n` com o mesmo formato do valor original. */
+export declare function formatLike(parsed: ParsedNumber, n: number): string;

package/dist/types/lib/motion/features-max.d.ts

@@ -0,0 +1 @@
+export { domMax as default } from 'motion/react';

package/dist/types/lib/motion/index.d.ts

@@ -0,0 +1,5 @@
+export { MotionModeScope, MotionProvider, RevealScope, useLayoutReady, useMotionMode, useRevealScope, type MotionMode, } from './motion-context';
+export { useMotionPresets } from './use-motion-presets';
+export type { MotionPreset, Presets, SlideDistance, SlideFrom } from './presets';
+export { layoutEnabled } from './reorder';
+export { formatLike, parseLocaleNumber, type ParsedNumber } from './count';

package/dist/types/lib/motion/motion-context.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react';
+export type MotionMode = 'off' | 'on';
+/** Modo de motion do provider mais próximo (`off` sem provider). */
+export declare function useMotionMode(): MotionMode;
+/**
+ * Em `on`, o chunk do `domMax` já chegou. Um `m.*` com `layout` ou `layoutId` só ganha o nó de
+ * projeção se for criado DEPOIS disso (o Motion não monta a projeção de um elemento que já
+ * estava na tela), então quem usa layout liga a prop e remonta o item quando isto vira `true`.
+ */
+export declare function useLayoutReady(): boolean;
+/**
+ * Marca um trecho da árvore como "chegada de painel" (o dashboard): lá, o gráfico desenha no
+ * tempo do reveal (900 ms) em vez do tempo de rotina (`draw`, 420 ms). Fora dele, o gráfico de
+ * uma tela de uso diário desenha uma vez e rápido.
+ */
+export declare function RevealScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** O componente está dentro de um `RevealScope`? */
+export declare function useRevealScope(): boolean;
+/** Só troca o modo lido pelos componentes; não monta nem desmonta o LazyMotion. */
+export declare function MotionModeScope({ mode, children }: {
+    mode: MotionMode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Em `off`, só o contexto (nenhum nó novo, nenhum LazyMotion). Em `on`, dois `LazyMotion` (os
+ * dois `strict`: só `m.*` entra, um `motion.*` esquecido quebra em vez de puxar o pacote inteiro):
+ * o de fora carrega o `domMax` sob demanda (layout e arraste), em chunk separado; o de dentro traz
+ * o `domAnimation` síncrono (animação e gestos) e é o que os `m.*` enxergam. Nessa ordem o
+ * renderer síncrono já está no contexto na primeira renderização (elementos e gestos funcionam
+ * na hora), e os recursos de layout se juntam quando o chunk chega. A ordem contrária esconderia
+ * o renderer até o chunk terminar de baixar.
+ *
+ * O `MotionConfig` recebe "reduzir movimento" da mesma fonte dos presets (o `matchMedia` de
+ * `use-reduced-motion.ts`, reativo): com `always`, o Motion também tira o deslocamento e o layout
+ * de qualquer animação que um componente escreva à mão, e mantém a opacidade. Não é uma segunda
+ * fonte: é a primeira, lida uma vez, entregue a dois consumidores.
+ */
+export declare function MotionProvider({ mode, children }: {
+    mode: MotionMode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/types/lib/motion/native-events.d.ts

@@ -0,0 +1,16 @@
+declare const NATIVE_EVENTS: {
+    readonly onDrag: "drag";
+    readonly onDragStart: "dragstart";
+    readonly onDragEnd: "dragend";
+    readonly onAnimationStart: "animationstart";
+};
+type NativeKey = keyof typeof NATIVE_EVENTS;
+type Handler = ((event: never) => void) | undefined;
+/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */
+export declare function splitNativeEvents<P extends object>(props: P): {
+    native: Partial<Record<"onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart", Handler>>;
+    rest: Omit<P, NativeKey>;
+};
+/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */
+export declare function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>): () => void;
+export {};

package/dist/types/lib/motion/presets.d.ts

@@ -0,0 +1,92 @@
+import type { Target, TargetAndTransition, Transition } from 'motion/react';
+import { type Bezier, type MotionTokens } from './tokens';
+export interface MotionPreset {
+    initial: Target;
+    animate: TargetAndTransition;
+    exit: TargetAndTransition;
+    transition: Transition;
+}
+/** Toque: o alvo do `whileTap` (`undefined` no reduzido) e a transição de ida e de volta. */
+export interface PressPreset {
+    whileTap: TargetAndTransition | undefined;
+    transition: Transition;
+}
+export type SlideFrom = 'left' | 'right' | 'top' | 'bottom';
+/** Distância do slide: `full` (painel que entra da borda) ou `short` (conteúdo que assenta). */
+export type SlideDistance = 'full' | 'short';
+export interface Presets {
+    reduced: boolean;
+    /** Toque do botão, do polegar e dos controles: 120 ms, `ease.out`, escala 0,97. */
+    press: PressPreset;
+    /** Alias de `press.whileTap`, o nome antigo. Sem movimento reduzido vem `undefined`. */
+    tap: TargetAndTransition | undefined;
+    /**
+     * Salto curto de escala (célula do OTP), com a transição dentro do alvo. Estável entre
+     * renders; `undefined` se reduzido.
+     */
+    bump: TargetAndTransition | undefined;
+    tokens: MotionTokens;
+    fade: MotionPreset;
+    /** Alias de `open()`: escala 0,95 com mola a partir da origem, saída rápida só em opacidade. */
+    scale: MotionPreset;
+    /**
+     * Cota rara de encanto (check do passo concluído): 0,8 -> 1 com a curva back, em `slow`. Nunca
+     * em controle de uso frequente.
+     */
+    pop: MotionPreset;
+    /**
+     * Indicador de controle frequente (check do Checkbox, ponto do Radio): 0,9 -> 1 com opacidade
+     * em `fast`, sem quique e sem partir de zero.
+     */
+    indicator: MotionPreset;
+    slide: (from: SlideFrom, distance?: SlideDistance) => MotionPreset;
+    /**
+     * Overlay ancorado (popover, menu, modal, painel do select). Número = escala de partida
+     * (padrão 0,95); `{ y }` = entrada plana, sem escala, para a superfície em tela cheia.
+     * Entra em mola criticamente amortecida (sem quique) em `base` e sai em `fast`, em opacidade.
+     */
+    open: (from?: number | {
+        y: number;
+    }) => MotionPreset;
+    /** Gaveta e folha: entram de `from` em `slow` com `ease.drawer`, saem em `fast` pelo mesmo lado. */
+    sheet: (from: SlideFrom) => MotionPreset;
+    /** Tooltip: escala 0,97 em `fast`; aberto em `instant-open` não anima. */
+    tooltip: (instant: boolean) => MotionPreset;
+    /**
+     * Troca de conteúdo no lugar (passo do wizard), sem esperar a saída: o que sai esmaece com
+     * `blur` de 2 px em `fast`; o que entra vem de `direction` (1 avança, -1 volta), 8 px, em
+     * `base`. O desfoque disfarça o cruzamento: sem ele o olho vê dois objetos trocando de lugar.
+     */
+    swap: (direction: 1 | -1) => MotionPreset;
+    /**
+     * Entrada de uso único (reveal do dashboard): desloca 8 px e dura `reveal.enter`, mais lenta
+     * que `slide`. Não serve a interação repetida (overlay, tab, botão).
+     */
+    reveal: (from: SlideFrom) => MotionPreset;
+    /** Deslocamento na tela (indicador, reordenação): `move` em `ease.move`. */
+    move: Transition;
+    /** Nome antigo de `move`. */
+    layout: Transition;
+    /** Mola sem quique: onde há gesto ou soltura (drop do kanban, folha que volta). */
+    settle: Transition;
+    /** Mola da folha depois do arraste (quique mínimo). */
+    springSheet: Transition;
+    /**
+     * A mesma mola da folha em rigidez e amortecimento (massa 1), que é o que o arraste do Motion
+     * (`dragTransition`) pede para a volta à origem: rigidez = (2π / duração)², amortecimento =
+     * 2 (1 - quique) raiz(rigidez).
+     */
+    sheetBounce: {
+        bounceStiffness: number;
+        bounceDamping: number;
+    };
+    /** Atraso de entrada do item `index`, limitado a `limit` itens (padrão 8: 480 ms). */
+    stagger: (index: number, limit?: number) => Transition;
+    /** Atraso do bloco `index` no reveal (passo `reveal.stagger`), limitado a `limit` blocos. */
+    staggerReveal: (index: number, limit?: number) => Transition;
+}
+export declare function createPresets(tokens: MotionTokens, reduced: boolean): Presets;
+/** Curva no formato do recharts: `cubic-bezier(a,b,c,d)`, sem espaços. */
+export declare function toCubicBezier([a, b, c, d,]: Bezier): `cubic-bezier(${number},${number},${number},${number})`;
+/** Presets com os tokens lidos agora do documento. */
+export declare function presetsFromDocument(reduced: boolean): Presets;

package/dist/types/lib/motion/reorder.d.ts

@@ -0,0 +1,7 @@
+import type { MotionMode } from './motion-context';
+export declare function layoutEnabled({ mode, ready, dragging, }: {
+    mode: MotionMode;
+    /** O chunk do `domMax` já chegou (`useLayoutReady`). Antes disso `layout` não faz nada. */
+    ready: boolean;
+    dragging: boolean;
+}): boolean;

package/dist/types/lib/motion/tokens.d.ts

@@ -0,0 +1,66 @@
+export type Bezier = [number, number, number, number];
+/**
+ * Reserva das durações, em segundos (SSR, ou variável ausente).
+ * `press` e `fast` valem o mesmo (120 ms) com propósitos diferentes: o toque e a saída de overlay.
+ */
+export declare const DURATION: {
+    press: number;
+    hover: number;
+    fast: number;
+    base: number;
+    move: number;
+    slow: number;
+    draw: number;
+    pulse: number;
+};
+export type DurationName = keyof typeof DURATION;
+/**
+ * Reveal: entrada de uso único (dashboard: bloco, cascata, contador e desenho do gráfico), mais
+ * lenta que as interações do dia a dia. Reserva em segundos (SSR, ou variável ausente).
+ */
+export declare const REVEAL: {
+    enter: number;
+    stagger: number;
+    count: number;
+    draw: number;
+};
+export type RevealName = keyof typeof REVEAL;
+/**
+ * Curvas do globals.css (`--rendra-ease-*`). `spring` é a curva "back" (quique): só para a cota
+ * rara de encanto. `move` desloca na tela; `drawer` é a curva de gaveta e folha.
+ */
+export declare const EASE: Record<'out' | 'inOut' | 'spring' | 'move' | 'drawer', Bezier>;
+export type EaseName = keyof typeof EASE;
+/**
+ * Molas no formato "duração e quique" (Motion). `settle` assenta sem passar do ponto (layout,
+ * overlay que entra, soltura do arraste); `sheet` é a folha depois do gesto, com quique mínimo.
+ * Mola não é variável CSS: mora aqui, e o app a espelha em `dampingRatio`.
+ */
+export declare const SPRING: {
+    settle: {
+        duration: number;
+        bounce: number;
+    };
+    sheet: {
+        duration: number;
+        bounce: number;
+    };
+};
+/** Escalas da linguagem: entrada de overlay, tooltip, ponto pequeno, toque, pop e salto curto. */
+export declare const SCALE: {
+    enter: number;
+    tooltip: number;
+    small: number;
+    press: number;
+    pop: number;
+    bump: number;
+};
+/** Desfoque (px) que disfarça o cruzamento entre dois estados (troca de passo). Abaixo de 20. */
+export declare const BLUR = 2;
+export interface MotionTokens {
+    duration: Record<DurationName, number>;
+    reveal: Record<RevealName, number>;
+    ease: Record<EaseName, Bezier>;
+}
+/** Lê as durações e as curvas do documento; o que faltar (ou sem window) vem da reserva. */
+export declare function readMotionTokens(): MotionTokens;

package/dist/types/lib/motion/use-motion-presets.d.ts

@@ -0,0 +1,8 @@
+import { type Presets } from './presets';
+/**
+ * Presets do motion para o componente. A preferência "reduzir movimento" vem do mesmo
+ * `matchMedia` do hook do projeto (`use-reduced-motion.ts`: Spinner, Progress), a fonte única,
+ * reativa e testável, sem `MotionConfig reducedMotion` somando por cima. Só em `on` a
+ * preferência é assinada e os tokens lidos do documento; em `off` o custo é zero.
+ */
+export declare function useMotionPresets(): Presets;

package/dist/{use-breakpoint-Dyp-0E_c.js → use-breakpoint-O9eqFmsF.js}

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.4.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { useSyncExternalStore } from "react";
 //#region src/hooks/use-breakpoint.ts
 /**
@@ -46,4 +46,4 @@ function useBreakpoint() {
 //#endregion
 export { useBreakpoint as n, breakpoints as t };
 
-//# sourceMappingURL=use-breakpoint-Dyp-0E_c.js.map
+//# sourceMappingURL=use-breakpoint-O9eqFmsF.js.map

package/dist/{use-breakpoint-Dyp-0E_c.js.map → use-breakpoint-O9eqFmsF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint-Dyp-0E_c.js","names":[],"sources":["../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n/**\n * Pontos de quebra, espelhando os padrões do Tailwind (sm 40rem, md 48rem, lg 64rem...).\n * Único hook de detecção de tela do sistema. Para adaptação ao espaço disponível\n * dentro de um bloco (e não à tela), use container queries (@container) no CSS.\n */\nexport const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 } as const\nexport type Breakpoint = keyof typeof breakpoints\n\nconst order: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl']\n\nfunction subscribe(cb: () => void) {\n  const lists = order.map((bp) => matchMedia(`(min-width: ${breakpoints[bp]}px)`))\n  lists.forEach((mq) => mq.addEventListener('change', cb))\n  return () => lists.forEach((mq) => mq.removeEventListener('change', cb))\n}\n\nfunction getCurrent(): Breakpoint | 'base' {\n  let current: Breakpoint | 'base' = 'base'\n  for (const bp of order) if (matchMedia(`(min-width: ${breakpoints[bp]}px)`).matches) current = bp\n  return current\n}\n\nexport function useBreakpoint() {\n  const current = useSyncExternalStore(subscribe, getCurrent, () => 'lg' as const)\n  const rank = current === 'base' ? -1 : order.indexOf(current)\n  const up = (bp: Breakpoint) => rank >= order.indexOf(bp)\n  return {\n    current,\n    up,\n    /** Abaixo de 768px: componentes se reconstroem no formato mobile. */\n    isMobile: !up('md'),\n    isTablet: up('md') && !up('lg'),\n    isDesktop: up('lg'),\n  }\n}\n"],"mappings":";;;;;;;;AAOA,IAAa,cAAc;CAAE,IAAI;CAAK,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM,OAAO;AAAK;AAG/E,IAAM,QAAsB;CAAC;CAAM;CAAM;CAAM;CAAM;AAAK;AAE1D,SAAS,UAAU,IAAgB;CACjC,MAAM,QAAQ,MAAM,KAAK,OAAO,WAAW,eAAe,YAAY,IAAI,IAAI,CAAC;CAC/E,MAAM,SAAS,OAAO,GAAG,iBAAiB,UAAU,EAAE,CAAC;CACvD,aAAa,MAAM,SAAS,OAAO,GAAG,oBAAoB,UAAU,EAAE,CAAC;AACzE;AAEA,SAAS,aAAkC;CACzC,IAAI,UAA+B;CACnC,KAAK,MAAM,MAAM,OAAO,IAAI,WAAW,eAAe,YAAY,IAAI,IAAI,CAAC,CAAC,SAAS,UAAU;CAC/F,OAAO;AACT;AAEA,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,qBAAqB,WAAW,kBAAkB,IAAa;CAC/E,MAAM,OAAO,YAAY,SAAS,KAAK,MAAM,QAAQ,OAAO;CAC5D,MAAM,MAAM,OAAmB,QAAQ,MAAM,QAAQ,EAAE;CACvD,OAAO;EACL;EACA;;EAEA,UAAU,CAAC,GAAG,IAAI;EAClB,UAAU,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI;EAC9B,WAAW,GAAG,IAAI;CACpB;AACF"}
+{"version":3,"file":"use-breakpoint-O9eqFmsF.js","names":[],"sources":["../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n/**\n * Pontos de quebra, espelhando os padrões do Tailwind (sm 40rem, md 48rem, lg 64rem...).\n * Único hook de detecção de tela do sistema. Para adaptação ao espaço disponível\n * dentro de um bloco (e não à tela), use container queries (@container) no CSS.\n */\nexport const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 } as const\nexport type Breakpoint = keyof typeof breakpoints\n\nconst order: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl']\n\nfunction subscribe(cb: () => void) {\n  const lists = order.map((bp) => matchMedia(`(min-width: ${breakpoints[bp]}px)`))\n  lists.forEach((mq) => mq.addEventListener('change', cb))\n  return () => lists.forEach((mq) => mq.removeEventListener('change', cb))\n}\n\nfunction getCurrent(): Breakpoint | 'base' {\n  let current: Breakpoint | 'base' = 'base'\n  for (const bp of order) if (matchMedia(`(min-width: ${breakpoints[bp]}px)`).matches) current = bp\n  return current\n}\n\nexport function useBreakpoint() {\n  const current = useSyncExternalStore(subscribe, getCurrent, () => 'lg' as const)\n  const rank = current === 'base' ? -1 : order.indexOf(current)\n  const up = (bp: Breakpoint) => rank >= order.indexOf(bp)\n  return {\n    current,\n    up,\n    /** Abaixo de 768px: componentes se reconstroem no formato mobile. */\n    isMobile: !up('md'),\n    isTablet: up('md') && !up('lg'),\n    isDesktop: up('lg'),\n  }\n}\n"],"mappings":";;;;;;;;AAOA,IAAa,cAAc;CAAE,IAAI;CAAK,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM,OAAO;AAAK;AAG/E,IAAM,QAAsB;CAAC;CAAM;CAAM;CAAM;CAAM;AAAK;AAE1D,SAAS,UAAU,IAAgB;CACjC,MAAM,QAAQ,MAAM,KAAK,OAAO,WAAW,eAAe,YAAY,IAAI,IAAI,CAAC;CAC/E,MAAM,SAAS,OAAO,GAAG,iBAAiB,UAAU,EAAE,CAAC;CACvD,aAAa,MAAM,SAAS,OAAO,GAAG,oBAAoB,UAAU,EAAE,CAAC;AACzE;AAEA,SAAS,aAAkC;CACzC,IAAI,UAA+B;CACnC,KAAK,MAAM,MAAM,OAAO,IAAI,WAAW,eAAe,YAAY,IAAI,IAAI,CAAC,CAAC,SAAS,UAAU;CAC/F,OAAO;AACT;AAEA,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,qBAAqB,WAAW,kBAAkB,IAAa;CAC/E,MAAM,OAAO,YAAY,SAAS,KAAK,MAAM,QAAQ,OAAO;CAC5D,MAAM,MAAM,OAAmB,QAAQ,MAAM,QAAQ,EAAE;CACvD,OAAO;EACL;EACA;;EAEA,UAAU,CAAC,GAAG,IAAI;EAClB,UAAU,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI;EAC9B,WAAW,GAAG,IAAI;CACpB;AACF"}