@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/typography/list/list-unordered.js

@@ -0,0 +1,42 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-unordered.tsx
+/**
+* Lista não ordenada, com marcador de ponto.
+*
+* O marcador fica fora do texto, então as linhas de um item que quebra
+* alinham entre si.
+*
+* @example
+* ```tsx
+* <List.Unordered>
+*   <List.Item>Boleto</List.Item>
+*   <List.Item>Pix</List.Item>
+* </List.Unordered>
+* ```
+*/
+const ListUnordered = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Unordered",
+		className: mergeTwClassNames([
+			"space-y-1",
+			"pl-5",
+			"text-gray-12",
+			"text-sm",
+			"list-outside",
+			"list-disc",
+			"marker:text-gray-11"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "ul",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListUnordered.displayName = "List.Unordered";
+//#endregion
+export { ListUnordered };
+
+//# sourceMappingURL=list-unordered.js.map

package/dist/components/typography/list/list-unordered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-unordered.js","names":[],"sources":["../../../../src/components/typography/list/list-unordered.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Unordered`.\n */\nexport type ListUnorderedProps = useRender.ComponentProps<'ul'>;\n\n/**\n * Lista não ordenada, com marcador de ponto.\n *\n * O marcador fica fora do texto, então as linhas de um item que quebra\n * alinham entre si.\n *\n * @example\n * ```tsx\n * <List.Unordered>\n *   <List.Item>Boleto</List.Item>\n *   <List.Item>Pix</List.Item>\n * </List.Unordered>\n * ```\n */\nexport const ListUnordered = (props: ListUnorderedProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Unordered',\n    className: mergeTwClassNames(\n      [\n        'space-y-1',\n        'pl-5',\n\n        'text-gray-12',\n        'text-sm',\n\n        'list-outside',\n        'list-disc',\n        'marker:text-gray-11',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ul',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListUnordered.displayName = 'List.Unordered';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/components/typography/list/list-unstyled.d.ts

@@ -0,0 +1,28 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-unstyled.d.ts
+/**
+ * Props do `List.Unstyled`.
+ */
+export type ListUnstyledProps = useRender.ComponentProps<'ul'>;
+/**
+ * Lista sem marcador e sem estilo.
+ *
+ * Mantém a semântica de lista para leitores de tela onde o marcador visual
+ * não faz sentido: menus, listagens com ícone próprio, cartões empilhados. O
+ * espaçamento e o texto ficam com o conteúdo. Para uma lista ordenada sem
+ * marcador, use `render={<ol />}`.
+ *
+ * @example
+ * ```tsx
+ * <List.Unstyled className="flex flex-col gap-2">
+ *   <List.Item>Cardoso Couros</List.Item>
+ *   <List.Item>Mercado Bom Preço</List.Item>
+ * </List.Unstyled>
+ * ```
+ */
+export declare const ListUnstyled: {
+  (props: ListUnstyledProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-unstyled.d.ts.map

package/dist/components/typography/list/list-unstyled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-unstyled.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-unstyled.tsx"],"mappings":";;;;;YAMY,oBAAoB,UAAU;;;;;;;;;;;;;;;;;qBAkB7B;GAAuB,OAAA,oCAAiB,+CAAA"}

package/dist/components/typography/list/list-unstyled.js

@@ -0,0 +1,37 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-unstyled.tsx
+/**
+* Lista sem marcador e sem estilo.
+*
+* Mantém a semântica de lista para leitores de tela onde o marcador visual
+* não faz sentido: menus, listagens com ícone próprio, cartões empilhados. O
+* espaçamento e o texto ficam com o conteúdo. Para uma lista ordenada sem
+* marcador, use `render={<ol />}`.
+*
+* @example
+* ```tsx
+* <List.Unstyled className="flex flex-col gap-2">
+*   <List.Item>Cardoso Couros</List.Item>
+*   <List.Item>Mercado Bom Preço</List.Item>
+* </List.Unstyled>
+* ```
+*/
+const ListUnstyled = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Unstyled",
+		role: "list",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "ul",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListUnstyled.displayName = "List.Unstyled";
+//#endregion
+export { ListUnstyled };
+
+//# sourceMappingURL=list-unstyled.js.map

package/dist/components/typography/list/list-unstyled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-unstyled.js","names":[],"sources":["../../../../src/components/typography/list/list-unstyled.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Unstyled`.\n */\nexport type ListUnstyledProps = useRender.ComponentProps<'ul'>;\n\n/**\n * Lista sem marcador e sem estilo.\n *\n * Mantém a semântica de lista para leitores de tela onde o marcador visual\n * não faz sentido: menus, listagens com ícone próprio, cartões empilhados. O\n * espaçamento e o texto ficam com o conteúdo. Para uma lista ordenada sem\n * marcador, use `render={<ol />}`.\n *\n * @example\n * ```tsx\n * <List.Unstyled className=\"flex flex-col gap-2\">\n *   <List.Item>Cardoso Couros</List.Item>\n *   <List.Item>Mercado Bom Preço</List.Item>\n * </List.Unstyled>\n * ```\n */\nexport const ListUnstyled = (props: ListUnstyledProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Unstyled',\n    // O Safari deixa de anunciar como lista um `ul` com `list-style: none`,\n    // que o preflight do Tailwind aplica. O `role` explícito devolve a\n    // semântica: não é redundante, mesmo que o lint diga que é.\n    role: 'list',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ul',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListUnstyled.displayName = 'List.Unstyled';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAIlB,MAAM;EACN,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,3 @@
+import { MarkVariants } from "./mark-variants.js";
+import { Mark, MarkProps } from "./mark.js";
+export { Mark, type MarkProps, type MarkVariants };

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

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

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

@@ -0,0 +1,32 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/typography/mark/mark-variants.d.ts
+export type MarkVariants = {
+  /**
+   * Cor do realce: do fundo em `subtle` e `solid`, do texto em `text` e `plain`.
+   *
+   * @default 'brand'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Forma do realce: `subtle` com fundo suave e o texto do entorno, `solid` com fundo saturado,
+   * `text` e `plain` só com a cor do texto.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'solid' | 'text' | 'plain';
+};
+export declare const markDefaultVariants: Required<MarkVariants>;
+/**
+ * A cor só declara `--mark-subtle-bg`, `--mark-solid-bg` e `--mark-fg`, e a `variant` decide onde
+ * cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+ *
+ * O `subtle` mantém a cor do texto ao redor, o que o deixa legível num título, num texto
+ * secundário ou invertido. O `solid` troca a cor por contraste com o fundo, e o `text` e o
+ * `plain`, sem fundo, usam a cor do esquema como destaque.
+ */
+export declare const markVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  variant?: "text" | "subtle" | "solid" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=mark-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mark-variants.d.ts","names":[],"sources":["../../../../src/components/typography/mark/mark-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;;EAOd;;qBAGW,qBAAqB,SAAS;;;;;;;;;qBAa9B,eAAY;;;6CA6FxB"}

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

@@ -0,0 +1,89 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/mark/mark-variants.ts
+const markDefaultVariants = {
+	colorScheme: "brand",
+	variant: "subtle"
+};
+/**
+* A cor só declara `--mark-subtle-bg`, `--mark-solid-bg` e `--mark-fg`, e a `variant` decide onde
+* cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+*
+* O `subtle` mantém a cor do texto ao redor, o que o deixa legível num título, num texto
+* secundário ou invertido. O `solid` troca a cor por contraste com o fundo, e o `text` e o
+* `plain`, sem fundo, usam a cor do esquema como destaque.
+*/
+const markVariants = cva([
+	"inline",
+	"bg-transparent",
+	"text-inherit"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--mark-subtle-bg:var(--color-gray-4)]",
+				"[--mark-solid-bg:var(--color-black)]",
+				"dark:[--mark-solid-bg:var(--color-white)]",
+				"[--mark-fg:var(--color-gray-12)]"
+			],
+			brand: [
+				"[--mark-subtle-bg:var(--color-brand-4)]",
+				"[--mark-solid-bg:var(--color-brand-9)]",
+				"[--mark-fg:var(--color-brand-11)]"
+			],
+			red: [
+				"[--mark-subtle-bg:var(--color-red-4)]",
+				"[--mark-solid-bg:var(--color-red-9)]",
+				"[--mark-fg:var(--color-red-11)]"
+			],
+			green: [
+				"[--mark-subtle-bg:var(--color-green-4)]",
+				"[--mark-solid-bg:var(--color-green-9)]",
+				"[--mark-fg:var(--color-green-11)]"
+			],
+			amber: [
+				"[--mark-subtle-bg:var(--color-amber-4)]",
+				"[--mark-solid-bg:var(--color-amber-9)]",
+				"[--mark-fg:var(--color-amber-11)]"
+			],
+			blue: [
+				"[--mark-subtle-bg:var(--color-blue-4)]",
+				"[--mark-solid-bg:var(--color-blue-9)]",
+				"[--mark-fg:var(--color-blue-11)]"
+			]
+		},
+		variant: {
+			subtle: [
+				"px-0.5",
+				"rounded-sm",
+				"box-decoration-clone",
+				"bg-(--mark-subtle-bg)"
+			],
+			solid: [
+				"px-0.5",
+				"rounded-sm",
+				"box-decoration-clone",
+				"bg-(--mark-solid-bg)",
+				"text-white"
+			],
+			text: ["text-(--mark-fg)", "font-medium"],
+			plain: ["text-(--mark-fg)"]
+		}
+	},
+	compoundVariants: [{
+		variant: "solid",
+		colorScheme: "gray",
+		className: ["text-white", "dark:text-black"]
+	}, {
+		variant: "solid",
+		colorScheme: "amber",
+		className: ["text-black"]
+	}],
+	defaultVariants: {
+		colorScheme: markDefaultVariants.colorScheme,
+		variant: markDefaultVariants.variant
+	}
+});
+//#endregion
+export { markDefaultVariants, markVariants };
+
+//# sourceMappingURL=mark-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mark-variants.js","names":[],"sources":["../../../../src/components/typography/mark/mark-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type MarkVariants = {\n  /**\n   * Cor do realce: do fundo em `subtle` e `solid`, do texto em `text` e `plain`.\n   *\n   * @default 'brand'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Forma do realce: `subtle` com fundo suave e o texto do entorno, `solid` com fundo saturado,\n   * `text` e `plain` só com a cor do texto.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'solid' | 'text' | 'plain';\n};\n\nexport const markDefaultVariants: Required<MarkVariants> = {\n  colorScheme: 'brand',\n  variant: 'subtle',\n};\n\n/**\n * A cor só declara `--mark-subtle-bg`, `--mark-solid-bg` e `--mark-fg`, e a `variant` decide onde\n * cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n *\n * O `subtle` mantém a cor do texto ao redor, o que o deixa legível num título, num texto\n * secundário ou invertido. O `solid` troca a cor por contraste com o fundo, e o `text` e o\n * `plain`, sem fundo, usam a cor do esquema como destaque.\n */\nexport const markVariants = cva(\n  [\n    'inline',\n\n    // Zera o fundo amarelo e o texto preto que o navegador dá ao `mark`.\n    'bg-transparent',\n    'text-inherit',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--mark-subtle-bg:var(--color-gray-4)]',\n          '[--mark-solid-bg:var(--color-black)]',\n          'dark:[--mark-solid-bg:var(--color-white)]',\n\n          '[--mark-fg:var(--color-gray-12)]',\n        ],\n        brand: [\n          '[--mark-subtle-bg:var(--color-brand-4)]',\n          '[--mark-solid-bg:var(--color-brand-9)]',\n\n          '[--mark-fg:var(--color-brand-11)]',\n        ],\n        red: [\n          '[--mark-subtle-bg:var(--color-red-4)]',\n          '[--mark-solid-bg:var(--color-red-9)]',\n\n          '[--mark-fg:var(--color-red-11)]',\n        ],\n        green: [\n          '[--mark-subtle-bg:var(--color-green-4)]',\n          '[--mark-solid-bg:var(--color-green-9)]',\n\n          '[--mark-fg:var(--color-green-11)]',\n        ],\n        amber: [\n          '[--mark-subtle-bg:var(--color-amber-4)]',\n          '[--mark-solid-bg:var(--color-amber-9)]',\n\n          '[--mark-fg:var(--color-amber-11)]',\n        ],\n        blue: [\n          '[--mark-subtle-bg:var(--color-blue-4)]',\n          '[--mark-solid-bg:var(--color-blue-9)]',\n\n          '[--mark-fg:var(--color-blue-11)]',\n        ],\n      },\n      variant: {\n        subtle: [\n          'px-0.5',\n\n          'rounded-sm',\n          // Repete o padding e o arredondamento em cada linha quando o trecho\n          // quebra.\n          'box-decoration-clone',\n\n          'bg-(--mark-subtle-bg)',\n        ],\n        solid: [\n          'px-0.5',\n\n          'rounded-sm',\n          'box-decoration-clone',\n\n          'bg-(--mark-solid-bg)',\n\n          'text-white',\n        ],\n        text: ['text-(--mark-fg)', 'font-medium'],\n        plain: ['text-(--mark-fg)'],\n      },\n    },\n    compoundVariants: [\n      // O sólido cinza inverte com o tema, então o texto inverte junto.\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n      // O tom 9 do amber é claro demais para texto branco.\n      {\n        variant: 'solid',\n        colorScheme: 'amber',\n        className: ['text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: markDefaultVariants.colorScheme,\n      variant: markDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;AACX;;;;;;;;;AAUA,MAAa,eAAe,IAC1B;CACE;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;GACA,KAAK;IACH;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;GACA,MAAM;IACJ;IACA;IAEA;GACF;EACF;EACA,SAAS;GACP,QAAQ;IACN;IAEA;IAGA;IAEA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IAEA;GACF;GACA,MAAM,CAAC,oBAAoB,aAAa;GACxC,OAAO,CAAC,kBAAkB;EAC5B;CACF;CACA,kBAAkB,CAEhB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,cAAc,iBAAiB;CAC7C,GAEA;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY;CAC1B,CACF;CACA,iBAAiB;EACf,aAAa,oBAAoB;EACjC,SAAS,oBAAoB;CAC/B;AACF,CACF"}

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

@@ -0,0 +1,35 @@
+import { MarkVariants } from "./mark-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/mark/mark.d.ts
+/**
+ * Props do `Mark`: as variantes visuais e as props do elemento renderizado.
+ */
+export type MarkProps = MergeOverride<useRender.ComponentProps<'mark'>, MarkVariants>;
+/**
+ * Trecho de texto em destaque.
+ *
+ * Destaque de um trecho dentro de um texto: o termo buscado, um valor, uma
+ * palavra-chave. Fica sempre dentro de um texto e herda o tamanho dele; fora
+ * de um, não tem cor de onde herdar.
+ *
+ * @example
+ * ```tsx
+ * <Text>
+ *   Resultado para <Mark>área de transferência</Mark> em 3 documentos.
+ * </Text>
+ *
+ * <Mark
+ *   variant="solid"
+ *   colorScheme="amber"
+ * >
+ *   termo exato
+ * </Mark>
+ * ```
+ */
+export declare const Mark: {
+  (props: MarkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=mark.d.ts.map

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

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

package/dist/components/typography/mark/mark.js

@@ -0,0 +1,45 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { markVariants } from "./mark-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/mark/mark.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Trecho de texto em destaque.
+*
+* Destaque de um trecho dentro de um texto: o termo buscado, um valor, uma
+* palavra-chave. Fica sempre dentro de um texto e herda o tamanho dele; fora
+* de um, não tem cor de onde herdar.
+*
+* @example
+* ```tsx
+* <Text>
+*   Resultado para <Mark>área de transferência</Mark> em 3 documentos.
+* </Text>
+*
+* <Mark
+*   variant="solid"
+*   colorScheme="amber"
+* >
+*   termo exato
+* </Mark>
+* ```
+*/
+const Mark = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "variant"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Mark",
+		className: mergeTwClassNames(markVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "mark",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Mark.displayName = "Mark";
+//#endregion
+export { Mark };
+
+//# sourceMappingURL=mark.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mark.js","names":[],"sources":["../../../../src/components/typography/mark/mark.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type MarkVariants, markVariants } from './mark-variants';\n\n/**\n * Props do `Mark`: as variantes visuais e as props do elemento renderizado.\n */\nexport type MarkProps = MergeOverride<\n  useRender.ComponentProps<'mark'>,\n  MarkVariants\n>;\n\nconst splitVariantProps = createSplitProps<MarkVariants>();\n\n/**\n * Trecho de texto em destaque.\n *\n * Destaque de um trecho dentro de um texto: o termo buscado, um valor, uma\n * palavra-chave. Fica sempre dentro de um texto e herda o tamanho dele; fora\n * de um, não tem cor de onde herdar.\n *\n * @example\n * ```tsx\n * <Text>\n *   Resultado para <Mark>área de transferência</Mark> em 3 documentos.\n * </Text>\n *\n * <Mark\n *   variant=\"solid\"\n *   colorScheme=\"amber\"\n * >\n *   termo exato\n * </Mark>\n * ```\n */\nexport const Mark = (props: MarkProps) => {\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': 'Mark',\n    className: mergeTwClassNames(markVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'mark',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nMark.displayName = 'Mark';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;AAuBzD,MAAa,QAAQ,UAAqB;CACxC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,aAAa,YAAY,GAAG,SAAS;CACpE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

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

@@ -0,0 +1,2 @@
+import { Paragraph, ParagraphProps } from "./paragraph.js";
+export { Paragraph, type ParagraphProps };

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

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

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

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/paragraph/paragraph.d.ts
+/**
+ * Props do `Paragraph`.
+ */
+export type ParagraphProps = useRender.ComponentProps<'p'>;
+/**
+ * Parágrafo de texto.
+ *
+ * Renderiza um `p` com o tamanho e a cor padrão do tema. É um bloco, e o
+ * espaço entre parágrafos fica com o contêiner.
+ *
+ * Evita uma palavra sozinha na última linha (`text-pretty`) e quebra uma
+ * palavra que não cabe na linha (`wrap-break-word`), como uma URL ou uma
+ * chave Pix. `text-wrap` e `wrap-normal` desfazem cada uma.
+ *
+ * Use para texto corrido, como descrições e explicações. Um `p` só cabe onde
+ * a tag aceita bloco: dentro de `button`, `label` ou de um título, use o
+ * `Text`.
+ *
+ * @example
+ * ```tsx
+ * <Paragraph className="text-gray-11">
+ *   O link de convite expira em sete dias.
+ * </Paragraph>
+ * ```
+ */
+export declare const Paragraph: {
+  (props: ParagraphProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=paragraph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","names":[],"sources":["../../../../src/components/typography/paragraph/paragraph.tsx"],"mappings":";;;;;YAMY,iBAAiB,UAAU;;;;;;;;;;;;;;;;;;;;;;qBAuB1B;GAAoB,OAAA,iCAAc,+CAAA"}

package/dist/components/typography/paragraph/paragraph.js

@@ -0,0 +1,46 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/paragraph/paragraph.tsx
+/**
+* Parágrafo de texto.
+*
+* Renderiza um `p` com o tamanho e a cor padrão do tema. É um bloco, e o
+* espaço entre parágrafos fica com o contêiner.
+*
+* Evita uma palavra sozinha na última linha (`text-pretty`) e quebra uma
+* palavra que não cabe na linha (`wrap-break-word`), como uma URL ou uma
+* chave Pix. `text-wrap` e `wrap-normal` desfazem cada uma.
+*
+* Use para texto corrido, como descrições e explicações. Um `p` só cabe onde
+* a tag aceita bloco: dentro de `button`, `label` ou de um título, use o
+* `Text`.
+*
+* @example
+* ```tsx
+* <Paragraph className="text-gray-11">
+*   O link de convite expira em sete dias.
+* </Paragraph>
+* ```
+*/
+const Paragraph = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Paragraph",
+		className: mergeTwClassNames([
+			"text-sm",
+			"text-gray-12",
+			"text-pretty",
+			"wrap-break-word"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "p",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Paragraph.displayName = "Paragraph";
+//#endregion
+export { Paragraph };
+
+//# sourceMappingURL=paragraph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.js","names":[],"sources":["../../../../src/components/typography/paragraph/paragraph.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `Paragraph`.\n */\nexport type ParagraphProps = useRender.ComponentProps<'p'>;\n\n/**\n * Parágrafo de texto.\n *\n * Renderiza um `p` com o tamanho e a cor padrão do tema. É um bloco, e o\n * espaço entre parágrafos fica com o contêiner.\n *\n * Evita uma palavra sozinha na última linha (`text-pretty`) e quebra uma\n * palavra que não cabe na linha (`wrap-break-word`), como uma URL ou uma\n * chave Pix. `text-wrap` e `wrap-normal` desfazem cada uma.\n *\n * Use para texto corrido, como descrições e explicações. Um `p` só cabe onde\n * a tag aceita bloco: dentro de `button`, `label` ou de um título, use o\n * `Text`.\n *\n * @example\n * ```tsx\n * <Paragraph className=\"text-gray-11\">\n *   O link de convite expira em sete dias.\n * </Paragraph>\n * ```\n */\nexport const Paragraph = (props: ParagraphProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Paragraph',\n    className: mergeTwClassNames(\n      ['text-sm', 'text-gray-12', 'text-pretty', 'wrap-break-word'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nParagraph.displayName = 'Paragraph';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAW;GAAgB;GAAe;EAAiB,GAC5D,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}

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,38 @@
+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;
+  /**
+   * Tamanho do texto, respiro interno e arredondamento.
+   *
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * 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?: "outline" | "subtle" | "surface" | "plain" | null | undefined;
+  size?: "sm" | "md" | "lg" | 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;;;;;;EAMd;;;;;;;EAOA;;qBAGW,oBAAoB,SAAS;;;;;;;;qBAa7B,cAAW;;;;6CA6GvB"}

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

@@ -0,0 +1,106 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/pre/pre-variants.ts
+const preDefaultVariants = {
+	colorScheme: "gray",
+	size: "md",
+	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",
+	"min-w-0",
+	"max-w-full",
+	"overflow-x-auto",
+	"border",
+	"corner-squircle",
+	"text-(--pre-fg)",
+	"font-mono",
+	"whitespace-pre",
+	"wrap-break-word",
+	"[tab-size: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"]
+		},
+		size: {
+			sm: [
+				"px-3",
+				"py-2",
+				"rounded-md",
+				"text-xs"
+			],
+			md: [
+				"px-4",
+				"py-3",
+				"rounded-lg",
+				"text-sm"
+			],
+			lg: [
+				"px-5",
+				"py-4",
+				"rounded-xl",
+				"text-base"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: preDefaultVariants.colorScheme,
+		size: preDefaultVariants.size,
+		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   * Tamanho do texto, respiro interno e arredondamento.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\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  size: 'md',\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    // 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-size: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      size: {\n        sm: [\n          'px-3',\n          'py-2',\n\n          'rounded-md',\n\n          'text-xs',\n        ],\n        md: [\n          'px-4',\n          'py-3',\n\n          'rounded-lg',\n\n          'text-sm',\n        ],\n        lg: [\n          'px-5',\n          'py-4',\n\n          'rounded-xl',\n\n          'text-base',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: preDefaultVariants.colorScheme,\n      size: preDefaultVariants.size,\n      variant: preDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAyBA,MAAa,qBAA4C;CACvD,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;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;EACA,MAAM;GACJ,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,MAAM,mBAAmB;EACzB,SAAS,mBAAmB;CAC9B;AACF,CACF"}