@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-item.d.ts
+/**
+ * Props do `List.Item`.
+ */
+export type ListItemProps = useRender.ComponentProps<'li'>;
+/**
+ * Item de uma lista.
+ *
+ * O espaçamento e o marcador vêm da lista que o contém, então o item não
+ * declara estilo próprio.
+ *
+ * @example
+ * ```tsx
+ * <List.Unordered>
+ *   <List.Item>Primeiro</List.Item>
+ *   <List.Item>Segundo</List.Item>
+ * </List.Unordered>
+ * ```
+ */
+export declare const ListItem: {
+  (props: ListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-item.d.ts.map

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

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

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

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-item.tsx
+/**
+* Item de uma lista.
+*
+* O espaçamento e o marcador vêm da lista que o contém, então o item não
+* declara estilo próprio.
+*
+* @example
+* ```tsx
+* <List.Unordered>
+*   <List.Item>Primeiro</List.Item>
+*   <List.Item>Segundo</List.Item>
+* </List.Unordered>
+* ```
+*/
+const ListItem = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Item",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "li",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListItem.displayName = "List.Item";
+//#endregion
+export { ListItem };
+
+//# sourceMappingURL=list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","names":[],"sources":["../../../../src/components/typography/list/list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Item`.\n */\nexport type ListItemProps = useRender.ComponentProps<'li'>;\n\n/**\n * Item de uma lista.\n *\n * O espaçamento e o marcador vêm da lista que o contém, então o item não\n * declara estilo próprio.\n *\n * @example\n * ```tsx\n * <List.Unordered>\n *   <List.Item>Primeiro</List.Item>\n *   <List.Item>Segundo</List.Item>\n * </List.Unordered>\n * ```\n */\nexport const ListItem = (props: ListItemProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Item',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListItem.displayName = 'List.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-ordered.d.ts
+/**
+ * Props do `List.Ordered`.
+ */
+export type ListOrderedProps = useRender.ComponentProps<'ol'>;
+/**
+ * Lista ordenada, com marcador numérico.
+ *
+ * O marcador fica fora do texto, então as linhas de um item que quebra
+ * alinham entre si.
+ *
+ * @example
+ * ```tsx
+ * <List.Ordered>
+ *   <List.Item>Emitir a nota</List.Item>
+ *   <List.Item>Enviar ao cliente</List.Item>
+ * </List.Ordered>
+ * ```
+ */
+export declare const ListOrdered: {
+  (props: ListOrderedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-ordered.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-ordered.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-ordered.tsx"],"mappings":";;;;;YAMY,mBAAmB,UAAU;;;;;;;;;;;;;;;qBAgB5B;GAAsB,OAAA,mCAAgB,+CAAA"}

package/dist/components/typography/list/list-ordered.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-ordered.tsx
+/**
+* Lista ordenada, com marcador numérico.
+*
+* O marcador fica fora do texto, então as linhas de um item que quebra
+* alinham entre si.
+*
+* @example
+* ```tsx
+* <List.Ordered>
+*   <List.Item>Emitir a nota</List.Item>
+*   <List.Item>Enviar ao cliente</List.Item>
+* </List.Ordered>
+* ```
+*/
+const ListOrdered = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Ordered",
+		className: mergeTwClassNames([
+			"space-y-1",
+			"pl-6",
+			"text-gray-12",
+			"text-sm",
+			"list-outside",
+			"list-decimal",
+			"marker:text-gray-11"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "ol",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListOrdered.displayName = "List.Ordered";
+//#endregion
+export { ListOrdered };
+
+//# sourceMappingURL=list-ordered.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-ordered.js","names":[],"sources":["../../../../src/components/typography/list/list-ordered.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Ordered`.\n */\nexport type ListOrderedProps = useRender.ComponentProps<'ol'>;\n\n/**\n * Lista ordenada, com marcador numérico.\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.Ordered>\n *   <List.Item>Emitir a nota</List.Item>\n *   <List.Item>Enviar ao cliente</List.Item>\n * </List.Ordered>\n * ```\n */\nexport const ListOrdered = (props: ListOrderedProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Ordered',\n    className: mergeTwClassNames(\n      [\n        'space-y-1',\n        // O número de dois dígitos (\"10.\") pede mais espaço que o ponto.\n        'pl-6',\n\n        'text-gray-12',\n        'text-sm',\n\n        'list-outside',\n        'list-decimal',\n        'marker:text-gray-11',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ol',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListOrdered.displayName = 'List.Ordered';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAEA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-unordered.d.ts
+/**
+ * Props do `List.Unordered`.
+ */
+export type ListUnorderedProps = useRender.ComponentProps<'ul'>;
+/**
+ * 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>
+ * ```
+ */
+export declare const ListUnordered: {
+  (props: ListUnorderedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-unordered.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-unordered.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-unordered.tsx"],"mappings":";;;;;YAMY,qBAAqB,UAAU;;;;;;;;;;;;;;;qBAgB9B;GAAwB,OAAA,qCAAkB,+CAAA"}

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" | "solid" | "subtle" | "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;;;6CA+FxB"}

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

@@ -0,0 +1,91 @@
+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",
+				"corner-squircle",
+				"box-decoration-clone",
+				"bg-(--mark-subtle-bg)"
+			],
+			solid: [
+				"px-0.5",
+				"rounded-sm",
+				"corner-squircle",
+				"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          'corner-squircle',\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          'corner-squircle',\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;IACA;IAGA;IAEA;GACF;GACA,OAAO;IACL;IAEA;IACA;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"}