@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/typography/pre/pre.d.ts

@@ -0,0 +1,37 @@
+import { PreVariants } from "./pre-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/pre/pre.d.ts
+/**
+ * Props do `Pre`: as variantes visuais e as props do elemento renderizado.
+ */
+export type PreProps = MergeOverride<useRender.ComponentProps<'pre'>, PreVariants>;
+/**
+ * Bloco de texto pré-formatado: trecho de código, log, saída de terminal.
+ *
+ * Mantém espaços e quebras de linha, e uma linha longa rola na horizontal
+ * dentro do bloco. Para quebrar a linha em vez de rolar, use
+ * `className="whitespace-pre-wrap"`; o `wrap-break-word` da base quebra também
+ * o token sem espaço.
+ *
+ * Sai com `tabIndex={0}` para a rolagem funcionar pelo teclado; num bloco que
+ * nunca rola, `tabIndex={-1}` tira a parada do `Tab`.
+ *
+ * @example
+ * ```tsx
+ * <Pre>{`pnpm add @lucasbernardosn/react-ui`}</Pre>
+ *
+ * <Pre
+ *   variant="subtle"
+ *   colorScheme="red"
+ * >
+ *   {log}
+ * </Pre>
+ * ```
+ */
+export declare const Pre: {
+  (props: PreProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=pre.d.ts.map

package/dist/components/typography/pre/pre.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pre.d.ts","names":[],"sources":["../../../../src/components/typography/pre/pre.tsx"],"mappings":";;;;;;;YAQY,WAAW,cACrB,UAAU,uBACV;;;;;;;;;;;;;;;;;;;;;;;;qBA4BW;GAAc,OAAA,2BAAQ,+CAAA"}

package/dist/components/typography/pre/pre.js

@@ -0,0 +1,52 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { preVariants } from "./pre-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/pre/pre.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Bloco de texto pré-formatado: trecho de código, log, saída de terminal.
+*
+* Mantém espaços e quebras de linha, e uma linha longa rola na horizontal
+* dentro do bloco. Para quebrar a linha em vez de rolar, use
+* `className="whitespace-pre-wrap"`; o `wrap-break-word` da base quebra também
+* o token sem espaço.
+*
+* Sai com `tabIndex={0}` para a rolagem funcionar pelo teclado; num bloco que
+* nunca rola, `tabIndex={-1}` tira a parada do `Tab`.
+*
+* @example
+* ```tsx
+* <Pre>{`pnpm add @lucasbernardosn/react-ui`}</Pre>
+*
+* <Pre
+*   variant="subtle"
+*   colorScheme="red"
+* >
+*   {log}
+* </Pre>
+* ```
+*/
+const Pre = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Pre",
+		tabIndex: 0,
+		className: mergeTwClassNames(preVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "pre",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Pre.displayName = "Pre";
+//#endregion
+export { Pre };
+
+//# sourceMappingURL=pre.js.map

package/dist/components/typography/pre/pre.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pre.js","names":[],"sources":["../../../../src/components/typography/pre/pre.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type PreVariants, preVariants } from './pre-variants';\n\n/**\n * Props do `Pre`: as variantes visuais e as props do elemento renderizado.\n */\nexport type PreProps = MergeOverride<\n  useRender.ComponentProps<'pre'>,\n  PreVariants\n>;\n\nconst splitVariantProps = createSplitProps<PreVariants>();\n\n/**\n * Bloco de texto pré-formatado: trecho de código, log, saída de terminal.\n *\n * Mantém espaços e quebras de linha, e uma linha longa rola na horizontal\n * dentro do bloco. Para quebrar a linha em vez de rolar, use\n * `className=\"whitespace-pre-wrap\"`; o `wrap-break-word` da base quebra também\n * o token sem espaço.\n *\n * Sai com `tabIndex={0}` para a rolagem funcionar pelo teclado; num bloco que\n * nunca rola, `tabIndex={-1}` tira a parada do `Tab`.\n *\n * @example\n * ```tsx\n * <Pre>{`pnpm add @lucasbernardosn/react-ui`}</Pre>\n *\n * <Pre\n *   variant=\"subtle\"\n *   colorScheme=\"red\"\n * >\n *   {log}\n * </Pre>\n * ```\n */\nexport const Pre = (props: PreProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Pre',\n    tabIndex: 0,\n    className: mergeTwClassNames(preVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'pre',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nPre.displayName = 'Pre';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;;;;;;AAyBxD,MAAa,OAAO,UAAoB;CACtC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,UAAU;EACV,WAAW,kBAAkB,YAAY,YAAY,GAAG,SAAS;CACnE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}

package/dist/components/typography/text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text, TextProps } from "./text.js";
+export { Text, type TextProps };

package/dist/components/typography/text/index.js

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

package/dist/components/typography/text/text.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/text/text.d.ts
+/**
+ * Props do `Text`.
+ */
+export type TextProps = useRender.ComponentProps<'span'>;
+/**
+ * Texto base do sistema.
+ *
+ * Renderiza um `span` com o tamanho e a cor padrão do tema.
+ *
+ * É inline: largura e corte não se aplicam fora de flex ou grid. Para cortar
+ * o texto, use o `Truncate`. Para texto corrido em bloco, use o `Paragraph`.
+ *
+ * @example
+ * ```tsx
+ * <Text>Conteúdo da página</Text>
+ *
+ * <Text className="text-xs text-gray-11">Vence em 05/10/2026</Text>
+ * ```
+ */
+export declare const Text: {
+  (props: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=text.d.ts.map

package/dist/components/typography/text/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","names":[],"sources":["../../../../src/components/typography/text/text.tsx"],"mappings":";;;;;YAMY,YAAY,UAAU;;;;;;;;;;;;;;;;qBAiBrB;GAAe,OAAA,4BAAS,+CAAA"}

package/dist/components/typography/text/text.js

@@ -0,0 +1,35 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/text/text.tsx
+/**
+* Texto base do sistema.
+*
+* Renderiza um `span` com o tamanho e a cor padrão do tema.
+*
+* É inline: largura e corte não se aplicam fora de flex ou grid. Para cortar
+* o texto, use o `Truncate`. Para texto corrido em bloco, use o `Paragraph`.
+*
+* @example
+* ```tsx
+* <Text>Conteúdo da página</Text>
+*
+* <Text className="text-xs text-gray-11">Vence em 05/10/2026</Text>
+* ```
+*/
+const Text = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Text",
+		className: mergeTwClassNames(["text-sm", "text-gray-12"], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Text.displayName = "Text";
+//#endregion
+export { Text };
+
+//# sourceMappingURL=text.js.map

package/dist/components/typography/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../../src/components/typography/text/text.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `Text`.\n */\nexport type TextProps = useRender.ComponentProps<'span'>;\n\n/**\n * Texto base do sistema.\n *\n * Renderiza um `span` com o tamanho e a cor padrão do tema.\n *\n * É inline: largura e corte não se aplicam fora de flex ou grid. Para cortar\n * o texto, use o `Truncate`. Para texto corrido em bloco, use o `Paragraph`.\n *\n * @example\n * ```tsx\n * <Text>Conteúdo da página</Text>\n *\n * <Text className=\"text-xs text-gray-11\">Vence em 05/10/2026</Text>\n * ```\n */\nexport const Text = (props: TextProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Text',\n    className: mergeTwClassNames(['text-sm', 'text-gray-12'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nText.displayName = 'Text';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,UAAqB;CACxC,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,WAAW,cAAc,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

package/dist/components/typography/truncate/index.d.ts

@@ -0,0 +1,2 @@
+import { Truncate, TruncateProps } from "./truncate.js";
+export { Truncate, type TruncateProps };

package/dist/components/typography/truncate/index.js

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

package/dist/components/typography/truncate/truncate.d.ts

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/truncate/truncate.d.ts
+/**
+ * Props do `Truncate`.
+ */
+export type TruncateProps = useRender.ComponentProps<'span'>;
+/**
+ * Corta em reticências o conteúdo que não cabe na linha.
+ *
+ * Precisa de uma largura limitada: dentro de flex ou grid (o `min-w-0` deixa
+ * o elemento encolher), ou com `w-*`/`max-w-*`. Num texto corrido, ele pula
+ * para a linha de baixo em vez de cortar no espaço que sobra.
+ *
+ * Texto e elementos inline dentro dele ganham as reticências; um filho em
+ * bloco ou flex precisa do próprio `truncate`. Para cortar em várias linhas,
+ * use `line-clamp-*` direto no texto. O texto inteiro pode ir no `title`.
+ *
+ * @example
+ * ```tsx
+ * <div className="flex w-60">
+ *   <Truncate title={caminhoDoArquivo}>{caminhoDoArquivo}</Truncate>
+ * </div>
+ * ```
+ */
+export declare const Truncate: {
+  (props: TruncateProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=truncate.d.ts.map

package/dist/components/typography/truncate/truncate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate.d.ts","names":[],"sources":["../../../../src/components/typography/truncate/truncate.tsx"],"mappings":";;;;;YAMY,gBAAgB,UAAU;;;;;;;;;;;;;;;;;;;qBAoBzB;GAAmB,OAAA,gCAAa,+CAAA"}

package/dist/components/typography/truncate/truncate.js

@@ -0,0 +1,44 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/truncate/truncate.tsx
+/**
+* Corta em reticências o conteúdo que não cabe na linha.
+*
+* Precisa de uma largura limitada: dentro de flex ou grid (o `min-w-0` deixa
+* o elemento encolher), ou com `w-*`/`max-w-*`. Num texto corrido, ele pula
+* para a linha de baixo em vez de cortar no espaço que sobra.
+*
+* Texto e elementos inline dentro dele ganham as reticências; um filho em
+* bloco ou flex precisa do próprio `truncate`. Para cortar em várias linhas,
+* use `line-clamp-*` direto no texto. O texto inteiro pode ir no `title`.
+*
+* @example
+* ```tsx
+* <div className="flex w-60">
+*   <Truncate title={caminhoDoArquivo}>{caminhoDoArquivo}</Truncate>
+* </div>
+* ```
+*/
+const Truncate = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Truncate",
+		className: mergeTwClassNames([
+			"inline-block",
+			"align-top",
+			"min-w-0",
+			"max-w-full",
+			"truncate"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Truncate.displayName = "Truncate";
+//#endregion
+export { Truncate };
+
+//# sourceMappingURL=truncate.js.map

package/dist/components/typography/truncate/truncate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate.js","names":[],"sources":["../../../../src/components/typography/truncate/truncate.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `Truncate`.\n */\nexport type TruncateProps = useRender.ComponentProps<'span'>;\n\n/**\n * Corta em reticências o conteúdo que não cabe na linha.\n *\n * Precisa de uma largura limitada: dentro de flex ou grid (o `min-w-0` deixa\n * o elemento encolher), ou com `w-*`/`max-w-*`. Num texto corrido, ele pula\n * para a linha de baixo em vez de cortar no espaço que sobra.\n *\n * Texto e elementos inline dentro dele ganham as reticências; um filho em\n * bloco ou flex precisa do próprio `truncate`. Para cortar em várias linhas,\n * use `line-clamp-*` direto no texto. O texto inteiro pode ir no `title`.\n *\n * @example\n * ```tsx\n * <div className=\"flex w-60\">\n *   <Truncate title={caminhoDoArquivo}>{caminhoDoArquivo}</Truncate>\n * </div>\n * ```\n */\nexport const Truncate = (props: TruncateProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Truncate',\n    className: mergeTwClassNames(\n      [\n        'inline-block',\n        // Com `overflow: hidden`, a linha de base do `inline-block` vai para a\n        // borda inferior, e o elemento subiria em relação ao texto vizinho.\n        'align-top',\n\n        'min-w-0',\n        'max-w-full',\n\n        'truncate',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nTruncate.displayName = 'Truncate';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAGA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { UnknownLooseValue } from "@lucasbernardosn/utils";
+//#region src/components/utilities/for/for.d.ts
+export type ForProps<TElementValue extends UnknownLooseValue> = {
+  /**
+   * Array a ser iterado. Com `null` ou `undefined` (dado ainda não carregado), não renderiza
+   * nada.
+   */
+  each: TElementValue[] | readonly TElementValue[] | null | undefined;
+  /**
+   * Conteúdo exibido quando o array está vazio
+   */
+  fallback?: React.ReactNode | undefined;
+  /**
+   * Função que renderiza cada item do array
+   */
+  children: (item: TElementValue, index: number) => React.ReactNode;
+};
+/**
+ * Renderiza `children` para cada item de `each`, e `fallback` quando o array está vazio. Com
+ * `each` `null` ou `undefined`, não renderiza nada. A `key` de cada item fica com quem usa.
+ *
+ * @example
+ * ```tsx
+ * <For each={users} fallback={<EmptyState.Root>…</EmptyState.Root>}>
+ *   {(user) => <li key={user.id}>{user.name}</li>}
+ * </For>
+ * ```
+ */
+export declare const For: {
+  <TElementValue extends UnknownLooseValue>(props: ForProps<TElementValue>): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=for.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"for.d.ts","names":[],"sources":["../../../../src/components/utilities/for/for.tsx"],"mappings":";;;YAGY,SAAS,sBAAsB;;;;;EAKzC,MAAM,2BAA2B;;;;EAIjC,WAAW,MAAM;;;;EAIjB,WAAW,MAAM,eAAe,kBAAkB,MAAM;;;;;;;;;;;;;qBAc7C;GAAO,sBAAsB,mBAAiB,OAClD,SAAS,iBACf,MAAM"}

package/dist/components/utilities/for/for.js

@@ -0,0 +1,22 @@
+//#region src/components/utilities/for/for.tsx
+/**
+* Renderiza `children` para cada item de `each`, e `fallback` quando o array está vazio. Com
+* `each` `null` ou `undefined`, não renderiza nada. A `key` de cada item fica com quem usa.
+*
+* @example
+* ```tsx
+* <For each={users} fallback={<EmptyState.Root>…</EmptyState.Root>}>
+*   {(user) => <li key={user.id}>{user.name}</li>}
+* </For>
+* ```
+*/
+const For = (props) => {
+	const { each, fallback, children } = props;
+	if (each?.length === 0) return fallback ?? null;
+	return each?.map(children) ?? null;
+};
+For.displayName = "For";
+//#endregion
+export { For };
+
+//# sourceMappingURL=for.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/utilities/for/for.tsx"],"sourcesContent":["import type { UnknownLooseValue } from '@lucasbernardosn/utils';\nimport type React from 'react';\n\nexport type ForProps<TElementValue extends UnknownLooseValue> = {\n  /**\n   * Array a ser iterado. Com `null` ou `undefined` (dado ainda não carregado), não renderiza\n   * nada.\n   */\n  each: TElementValue[] | readonly TElementValue[] | null | undefined;\n  /**\n   * Conteúdo exibido quando o array está vazio\n   */\n  fallback?: React.ReactNode | undefined;\n  /**\n   * Função que renderiza cada item do array\n   */\n  children: (item: TElementValue, index: number) => React.ReactNode;\n};\n\n/**\n * Renderiza `children` para cada item de `each`, e `fallback` quando o array está vazio. Com\n * `each` `null` ou `undefined`, não renderiza nada. A `key` de cada item fica com quem usa.\n *\n * @example\n * ```tsx\n * <For each={users} fallback={<EmptyState.Root>…</EmptyState.Root>}>\n *   {(user) => <li key={user.id}>{user.name}</li>}\n * </For>\n * ```\n */\nexport const For = <TElementValue extends UnknownLooseValue>(\n  props: ForProps<TElementValue>,\n): React.ReactNode => {\n  const { each, fallback, children } = props;\n\n  if (each?.length === 0) {\n    return fallback ?? null;\n  }\n\n  return each?.map(children) ?? null;\n};\n\nFor.displayName = 'For';\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAa,OACX,UACoB;CACpB,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,MAAM,WAAW,GACnB,OAAO,YAAY;CAGrB,OAAO,MAAM,IAAI,QAAQ,KAAK;AAChC;AAEA,IAAI,cAAc"}

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

@@ -0,0 +1,2 @@
+import { For, ForProps } from "./for.js";
+export { For, type ForProps };

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

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

package/dist/components/utilities/interaction-shield/index.d.ts

@@ -0,0 +1,2 @@
+import { InteractionShield, InteractionShieldProps } from "./interaction-shield.js";
+export { InteractionShield, type InteractionShieldProps };

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

@@ -0,0 +1,2 @@
+import { InteractionShield } from "./interaction-shield.js";
+export { InteractionShield };

package/dist/components/utilities/interaction-shield/interaction-shield.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+//#region src/components/utilities/interaction-shield/interaction-shield.d.ts
+export type InteractionShieldProps = {
+  /** Ativa ou desativa o shield. Quando `false`, o componente não renderiza nada. */
+  active: boolean;
+  /**
+   * Trava o scroll da página enquanto o shield estiver ativo, sem causar layout shift.
+   * Útil quando o drag/resize pode acidentalmente scrollar a página.
+   *
+   * Dentro de um modal do Base UI (Dialog, Popover modal), que já trava a rolagem, deixe
+   * desligado: as duas travas mexem no `body`, e a restauração de uma desfaz a outra.
+   * @default false
+   */
+  lockScroll?: boolean;
+  /**
+   * Cursor exibido globalmente enquanto o shield estiver ativo.
+   * @default 'default'
+   */
+  cursor?: React.CSSProperties['cursor'];
+};
+/**
+ * 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" />
+ *   </>
+ * );
+ */
+export declare const InteractionShield: (props: InteractionShieldProps) => React.ReactPortal | null;
+//#endregion
+//# sourceMappingURL=interaction-shield.d.ts.map

package/dist/components/utilities/interaction-shield/interaction-shield.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-shield.d.ts","names":[],"sources":["../../../../src/components/utilities/interaction-shield/interaction-shield.tsx"],"mappings":";;YAIY;;EAEV;;;;;;;;;EASA;;;;;EAKA,SAAS,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAmLJ,oBACX,OAAO,2BACN,MAAM"}

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