@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,3 @@
+import { PreVariants } from "./pre-variants.js";
+import { Pre, PreProps } from "./pre.js";
+export { Pre, type PreProps, type PreVariants };

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

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

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

@@ -0,0 +1,31 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/typography/pre/pre-variants.d.ts
+export type PreVariants = {
+  /**
+   * Cor do texto, do fundo e da borda do bloco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com
+   * a borda e `plain` sem fundo nem borda.
+   *
+   * @default 'surface'
+   */
+  variant?: 'surface' | 'subtle' | 'outline' | 'plain';
+};
+export declare const preDefaultVariants: Required<PreVariants>;
+/**
+ * A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a
+ * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+ *
+ * Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho
+ * do bloco, e o anel de foco tem onde pintar.
+ */
+export declare const preVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  variant?: "subtle" | "surface" | "outline" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=pre-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pre-variants.d.ts","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;;EAOd;;qBAGW,oBAAoB,SAAS;;;;;;;;qBAY7B,cAAW;;;6CAwFvB"}

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

@@ -0,0 +1,89 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/pre/pre-variants.ts
+const preDefaultVariants = {
+	colorScheme: "gray",
+	variant: "surface"
+};
+/**
+* A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a
+* `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+*
+* Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho
+* do bloco, e o anel de foco tem onde pintar.
+*/
+const preVariants = cva([
+	"block",
+	"rounded-md",
+	"corner-squircle",
+	"text-sm",
+	"px-4",
+	"py-2",
+	"min-w-0",
+	"max-w-full",
+	"overflow-x-auto",
+	"border",
+	"corner-squircle",
+	"text-(--pre-fg)",
+	"font-mono",
+	"whitespace-pre",
+	"wrap-break-word",
+	"tab-2",
+	"outline-none",
+	"ring-(--pre-fg)",
+	"focus-ring-inside"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--pre-surface-bg:var(--color-gray-2)]",
+				"[--pre-subtle-bg:var(--color-gray-3)]",
+				"[--pre-border:var(--color-gray-alpha-6)]",
+				"[--pre-fg:var(--color-gray-12)]"
+			],
+			brand: [
+				"[--pre-surface-bg:var(--color-brand-2)]",
+				"[--pre-subtle-bg:var(--color-brand-3)]",
+				"[--pre-border:var(--color-brand-alpha-6)]",
+				"[--pre-fg:var(--color-brand-12)]"
+			],
+			red: [
+				"[--pre-surface-bg:var(--color-red-2)]",
+				"[--pre-subtle-bg:var(--color-red-3)]",
+				"[--pre-border:var(--color-red-alpha-6)]",
+				"[--pre-fg:var(--color-red-12)]"
+			],
+			green: [
+				"[--pre-surface-bg:var(--color-green-2)]",
+				"[--pre-subtle-bg:var(--color-green-3)]",
+				"[--pre-border:var(--color-green-alpha-6)]",
+				"[--pre-fg:var(--color-green-12)]"
+			],
+			amber: [
+				"[--pre-surface-bg:var(--color-amber-2)]",
+				"[--pre-subtle-bg:var(--color-amber-3)]",
+				"[--pre-border:var(--color-amber-alpha-6)]",
+				"[--pre-fg:var(--color-amber-12)]"
+			],
+			blue: [
+				"[--pre-surface-bg:var(--color-blue-2)]",
+				"[--pre-subtle-bg:var(--color-blue-3)]",
+				"[--pre-border:var(--color-blue-alpha-6)]",
+				"[--pre-fg:var(--color-blue-12)]"
+			]
+		},
+		variant: {
+			surface: ["border-(--pre-border)", "bg-(--pre-surface-bg)"],
+			subtle: ["border-transparent", "bg-(--pre-subtle-bg)"],
+			outline: ["border-(--pre-border)", "bg-transparent"],
+			plain: ["border-transparent", "bg-transparent"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: preDefaultVariants.colorScheme,
+		variant: preDefaultVariants.variant
+	}
+});
+//#endregion
+export { preDefaultVariants, preVariants };
+
+//# sourceMappingURL=pre-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pre-variants.js","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type PreVariants = {\n  /**\n   * Cor do texto, do fundo e da borda do bloco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com\n   * a borda e `plain` sem fundo nem borda.\n   *\n   * @default 'surface'\n   */\n  variant?: 'surface' | 'subtle' | 'outline' | 'plain';\n};\n\nexport const preDefaultVariants: Required<PreVariants> = {\n  colorScheme: 'gray',\n  variant: 'surface',\n};\n\n/**\n * A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a\n * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho\n * do bloco, e o anel de foco tem onde pintar.\n */\nexport const preVariants = cva(\n  [\n    'block',\n\n    'rounded-md',\n    'corner-squircle',\n    'text-sm',\n    'px-4',\n    'py-2',\n\n    // Sem o `min-w-0`, uma linha longa dentro de um pai flex ou grid alarga o\n    // pai em vez de rolar dentro do bloco.\n    'min-w-0',\n    'max-w-full',\n    'overflow-x-auto',\n\n    'border',\n\n    'corner-squircle',\n\n    'text-(--pre-fg)',\n\n    'font-mono',\n    'whitespace-pre',\n    // Sem efeito com `whitespace-pre`. Com `whitespace-pre-wrap`, quebra também\n    // o token sem espaço (uma URL, um hash), que senão volta a rolar.\n    'wrap-break-word',\n    // O padrão do navegador é 8, largo demais para código indentado com tab.\n    'tab-2',\n\n    'outline-none',\n    // O anel herda a cor do texto, que já contrasta com o fundo em qualquer\n    // variante e esquema.\n    'ring-(--pre-fg)',\n    'focus-ring-inside',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--pre-surface-bg:var(--color-gray-2)]',\n          '[--pre-subtle-bg:var(--color-gray-3)]',\n          '[--pre-border:var(--color-gray-alpha-6)]',\n          '[--pre-fg:var(--color-gray-12)]',\n        ],\n        brand: [\n          '[--pre-surface-bg:var(--color-brand-2)]',\n          '[--pre-subtle-bg:var(--color-brand-3)]',\n          '[--pre-border:var(--color-brand-alpha-6)]',\n          '[--pre-fg:var(--color-brand-12)]',\n        ],\n        red: [\n          '[--pre-surface-bg:var(--color-red-2)]',\n          '[--pre-subtle-bg:var(--color-red-3)]',\n          '[--pre-border:var(--color-red-alpha-6)]',\n          '[--pre-fg:var(--color-red-12)]',\n        ],\n        green: [\n          '[--pre-surface-bg:var(--color-green-2)]',\n          '[--pre-subtle-bg:var(--color-green-3)]',\n          '[--pre-border:var(--color-green-alpha-6)]',\n          '[--pre-fg:var(--color-green-12)]',\n        ],\n        amber: [\n          '[--pre-surface-bg:var(--color-amber-2)]',\n          '[--pre-subtle-bg:var(--color-amber-3)]',\n          '[--pre-border:var(--color-amber-alpha-6)]',\n          '[--pre-fg:var(--color-amber-12)]',\n        ],\n        blue: [\n          '[--pre-surface-bg:var(--color-blue-2)]',\n          '[--pre-subtle-bg:var(--color-blue-3)]',\n          '[--pre-border:var(--color-blue-alpha-6)]',\n          '[--pre-fg:var(--color-blue-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--pre-border)', 'bg-(--pre-surface-bg)'],\n        subtle: ['border-transparent', 'bg-(--pre-subtle-bg)'],\n        outline: ['border-(--pre-border)', 'bg-transparent'],\n        plain: ['border-transparent', 'bg-transparent'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: preDefaultVariants.colorScheme,\n      variant: preDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,qBAA4C;CACvD,aAAa;CACb,SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;CAGA;CAEA;CAEA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,yBAAyB,uBAAuB;GAC1D,QAAQ,CAAC,sBAAsB,sBAAsB;GACrD,SAAS,CAAC,yBAAyB,gBAAgB;GACnD,OAAO,CAAC,sBAAsB,gBAAgB;EAChD;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,SAAS,mBAAmB;CAC9B;AACF,CACF"}

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,48 @@
+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", "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    '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,CAC5D,eACA,SACF,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"}