@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/typography/link/link.js

@@ -0,0 +1,74 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { linkVariants } from "./link-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+//#region src/components/typography/link/link.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Link de texto: cor, sublinhado, foco e, no `external`, o ícone de link externo. Herda o tamanho e
+* o peso do texto ao redor e quebra de linha junto com ele.
+*
+* Renderiza um `<a>`. A navegação de um router vem pelo `render`
+* (`render={<RouterLink to="…" />}`); um app que navega muito pode montar o próprio wrapper (um
+* `AppLink` com o `to` e o `render` num lugar só). Para uma ação que não navega, o `render` é um
+* `<button>`. O `external` abre em nova aba e avisa o leitor de tela.
+*
+* @example
+* ```tsx
+* <Link href="mailto:contato@exemplo.com.br">contato@exemplo.com.br</Link>
+*
+* <Link render={<RouterLink to="/clientes/42" />}>Cardoso Couros</Link>
+*
+* <Link render={<button type="button" onClick={openCustomer} />}>
+*   Cardoso Couros
+* </Link>
+*
+* <Link
+*   href="https://exemplo.com.br"
+*   external
+* >
+*   exemplo.com.br
+* </Link>
+* ```
+*/
+const Link = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "variant"]);
+	const { render, className, children, external = false, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Link",
+		className: mergeTwClassNames(linkVariants(variantProps), className),
+		...external && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		children: external ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children,
+			/* @__PURE__ */ jsx(Icon, {
+				render: /* @__PURE__ */ jsx(ArrowSquareOutIcon, {}),
+				className: mergeTwClassNames([
+					"inline-block",
+					"align-[-0.125em]",
+					"ms-0.5"
+				])
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: mergeTwClassNames(["sr-only"]),
+				children: "(abre em nova aba)"
+			})
+		] }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "a",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Link.displayName = "Link";
+//#endregion
+export { Link };
+
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../../src/components/typography/link/link.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { ArrowSquareOutIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { type LinkVariants, linkVariants } from './link-variants';\n\n/**\n * Props do `Link`: as variantes visuais, o `external` e as props do elemento renderizado.\n */\nexport type LinkProps = MergeOverride<\n  useRender.ComponentProps<'a'>,\n  LinkVariants & {\n    /**\n     * Abre o link em nova aba: acrescenta `target=\"_blank\"` e `rel=\"noopener noreferrer\"` (as props\n     * recebidas vencem), o ícone de link externo e o aviso \"(abre em nova aba)\" para o leitor de\n     * tela.\n     *\n     * @default false\n     */\n    external?: boolean;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<LinkVariants>();\n\n/**\n * Link de texto: cor, sublinhado, foco e, no `external`, o ícone de link externo. Herda o tamanho e\n * o peso do texto ao redor e quebra de linha junto com ele.\n *\n * Renderiza um `<a>`. A navegação de um router vem pelo `render`\n * (`render={<RouterLink to=\"…\" />}`); um app que navega muito pode montar o próprio wrapper (um\n * `AppLink` com o `to` e o `render` num lugar só). Para uma ação que não navega, o `render` é um\n * `<button>`. O `external` abre em nova aba e avisa o leitor de tela.\n *\n * @example\n * ```tsx\n * <Link href=\"mailto:contato@exemplo.com.br\">contato@exemplo.com.br</Link>\n *\n * <Link render={<RouterLink to=\"/clientes/42\" />}>Cardoso Couros</Link>\n *\n * <Link render={<button type=\"button\" onClick={openCustomer} />}>\n *   Cardoso Couros\n * </Link>\n *\n * <Link\n *   href=\"https://exemplo.com.br\"\n *   external\n * >\n *   exemplo.com.br\n * </Link>\n * ```\n */\nexport const Link = (props: LinkProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'variant',\n  ]);\n\n  const {\n    render,\n    className,\n    children,\n    external = false,\n    ...rest\n  } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Link',\n    className: mergeTwClassNames(linkVariants(variantProps), className),\n    ...(external && {\n      target: '_blank',\n      rel: 'noopener noreferrer',\n    }),\n    children: external ? (\n      <>\n        {children}\n        <Icon\n          render={<ArrowSquareOutIcon />}\n          className={mergeTwClassNames([\n            'inline-block',\n            // O link é inline e quebra junto com o texto: o ícone acompanha a linha de base sem\n            // transformar o link em flex.\n            'align-[-0.125em]',\n\n            'ms-0.5',\n          ])}\n        />{' '}\n        <span className={mergeTwClassNames(['sr-only'])}>\n          (abre em nova aba)\n        </span>\n      </>\n    ) : (\n      children\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'a',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nLink.displayName = 'Link';\n"],"mappings":";;;;;;;;AA2BA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BzD,MAAa,QAAQ,UAAqB;CACxC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EACJ,QACA,WACA,UACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,aAAa,YAAY,GAAG,SAAS;EAClE,GAAI,YAAY;GACd,QAAQ;GACR,KAAK;EACP;EACA,UAAU,WACR,qBAAA,UAAA,EAAA,UAAA;GACG;GACD,oBAAC,MAAD;IACE,QAAQ,oBAAC,oBAAD,CAAqB,CAAA;IAC7B,WAAW,kBAAkB;KAC3B;KAGA;KAEA;IACF,CAAC;GACF,CAAA;GAAE;GACH,oBAAC,QAAD;IAAM,WAAW,kBAAkB,CAAC,SAAS,CAAC;IAAG,UAAA;GAE3C,CAAA;EACN,EAAA,CAAA,IAEF;CAEJ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

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

@@ -4,7 +4,7 @@ export type MarkVariants = {
   /**
    * Cor do realce: do fundo em `subtle` e `solid`, do texto em `text` e `plain`.
    *
-   * @default 'brand'
+   * @default 'accent'
    */
   colorScheme?: ColorSchemeSemantic;
   /**
@@ -23,9 +23,15 @@ export declare const markDefaultVariants: Required<MarkVariants>;
  * 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.
+ *
+ * O fundo do `subtle` é alpha (passo 4), para ficar um passo acima de qualquer superfície: com o
+ * passo sólido, ele some sobre um fundo do mesmo passo, como o item ativo de uma lista.
+ *
+ * Nenhuma `variant` muda a largura do texto: o fundo não tem padding lateral. Com padding, o texto
+ * em volta anda quando o destaque aparece, o que numa busca acontece a cada tecla.
  */
 export declare const markVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
   variant?: "text" | "solid" | "subtle" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 //#region src/components/typography/mark/mark-variants.ts
 const markDefaultVariants = {
-	colorScheme: "brand",
+	colorScheme: "accent",
 	variant: "subtle"
 };
 /**
@@ -11,6 +11,12 @@ const markDefaultVariants = {
 * 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.
+*
+* O fundo do `subtle` é alpha (passo 4), para ficar um passo acima de qualquer superfície: com o
+* passo sólido, ele some sobre um fundo do mesmo passo, como o item ativo de uma lista.
+*
+* Nenhuma `variant` muda a largura do texto: o fundo não tem padding lateral. Com padding, o texto
+* em volta anda quando o destaque aparece, o que numa busca acontece a cada tecla.
 */
 const markVariants = cva([
 	"inline",
@@ -20,47 +26,45 @@ const markVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: [
-				"[--mark-subtle-bg:var(--color-gray-4)]",
+				"[--mark-subtle-bg:var(--gray-a4)]",
 				"[--mark-solid-bg:var(--color-black)]",
 				"dark:[--mark-solid-bg:var(--color-white)]",
-				"[--mark-fg:var(--color-gray-12)]"
+				"[--mark-fg:var(--gray-12)]"
 			],
-			brand: [
-				"[--mark-subtle-bg:var(--color-brand-4)]",
-				"[--mark-solid-bg:var(--color-brand-9)]",
-				"[--mark-fg:var(--color-brand-11)]"
+			accent: [
+				"[--mark-subtle-bg:var(--accent-a4)]",
+				"[--mark-solid-bg:var(--accent-9)]",
+				"[--mark-fg:var(--accent-11)]"
 			],
 			red: [
-				"[--mark-subtle-bg:var(--color-red-4)]",
-				"[--mark-solid-bg:var(--color-red-9)]",
-				"[--mark-fg:var(--color-red-11)]"
+				"[--mark-subtle-bg:var(--red-a4)]",
+				"[--mark-solid-bg:var(--red-9)]",
+				"[--mark-fg:var(--red-11)]"
 			],
 			green: [
-				"[--mark-subtle-bg:var(--color-green-4)]",
-				"[--mark-solid-bg:var(--color-green-9)]",
-				"[--mark-fg:var(--color-green-11)]"
+				"[--mark-subtle-bg:var(--green-a4)]",
+				"[--mark-solid-bg:var(--green-9)]",
+				"[--mark-fg:var(--green-11)]"
 			],
 			amber: [
-				"[--mark-subtle-bg:var(--color-amber-4)]",
-				"[--mark-solid-bg:var(--color-amber-9)]",
-				"[--mark-fg:var(--color-amber-11)]"
+				"[--mark-subtle-bg:var(--amber-a4)]",
+				"[--mark-solid-bg:var(--amber-9)]",
+				"[--mark-fg:var(--amber-11)]"
 			],
 			blue: [
-				"[--mark-subtle-bg:var(--color-blue-4)]",
-				"[--mark-solid-bg:var(--color-blue-9)]",
-				"[--mark-fg:var(--color-blue-11)]"
+				"[--mark-subtle-bg:var(--blue-a4)]",
+				"[--mark-solid-bg:var(--blue-9)]",
+				"[--mark-fg:var(--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",

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

@@ -1 +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"}
+{"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 'accent'\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: 'accent',\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 *\n * O fundo do `subtle` é alpha (passo 4), para ficar um passo acima de qualquer superfície: com o\n * passo sólido, ele some sobre um fundo do mesmo passo, como o item ativo de uma lista.\n *\n * Nenhuma `variant` muda a largura do texto: o fundo não tem padding lateral. Com padding, o texto\n * em volta anda quando o destaque aparece, o que numa busca acontece a cada tecla.\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(--gray-a4)]',\n          '[--mark-solid-bg:var(--color-black)]',\n          'dark:[--mark-solid-bg:var(--color-white)]',\n\n          '[--mark-fg:var(--gray-12)]',\n        ],\n        accent: [\n          '[--mark-subtle-bg:var(--accent-a4)]',\n          '[--mark-solid-bg:var(--accent-9)]',\n\n          '[--mark-fg:var(--accent-11)]',\n        ],\n        red: [\n          '[--mark-subtle-bg:var(--red-a4)]',\n          '[--mark-solid-bg:var(--red-9)]',\n\n          '[--mark-fg:var(--red-11)]',\n        ],\n        green: [\n          '[--mark-subtle-bg:var(--green-a4)]',\n          '[--mark-solid-bg:var(--green-9)]',\n\n          '[--mark-fg:var(--green-11)]',\n        ],\n        amber: [\n          '[--mark-subtle-bg:var(--amber-a4)]',\n          '[--mark-solid-bg:var(--amber-9)]',\n\n          '[--mark-fg:var(--amber-11)]',\n        ],\n        blue: [\n          '[--mark-subtle-bg:var(--blue-a4)]',\n          '[--mark-solid-bg:var(--blue-9)]',\n\n          '[--mark-fg:var(--blue-11)]',\n        ],\n      },\n      variant: {\n        subtle: [\n          'rounded-sm',\n          'corner-squircle',\n          // Repete o arredondamento em cada linha quando o trecho quebra.\n          'box-decoration-clone',\n\n          'bg-(--mark-subtle-bg)',\n        ],\n        solid: [\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;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,IAC1B;CACE;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IAEA;GACF;GACA,QAAQ;IACN;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;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;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/pre/pre-variants.d.ts

@@ -24,7 +24,7 @@ export declare const preDefaultVariants: Required<PreVariants>;
  * do bloco, e o anel de foco tem onde pintar.
  */
 export declare const preVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
   variant?: "subtle" | "surface" | "outline" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -35,40 +35,40 @@ const preVariants = cva([
 	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)]"
+				"[--pre-surface-bg:var(--gray-2)]",
+				"[--pre-subtle-bg:var(--gray-3)]",
+				"[--pre-border:var(--gray-6)]",
+				"[--pre-fg:var(--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)]"
+			accent: [
+				"[--pre-surface-bg:var(--accent-2)]",
+				"[--pre-subtle-bg:var(--accent-3)]",
+				"[--pre-border:var(--accent-6)]",
+				"[--pre-fg:var(--accent-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)]"
+				"[--pre-surface-bg:var(--red-2)]",
+				"[--pre-subtle-bg:var(--red-3)]",
+				"[--pre-border:var(--red-6)]",
+				"[--pre-fg:var(--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)]"
+				"[--pre-surface-bg:var(--green-2)]",
+				"[--pre-subtle-bg:var(--green-3)]",
+				"[--pre-border:var(--green-6)]",
+				"[--pre-fg:var(--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)]"
+				"[--pre-surface-bg:var(--amber-2)]",
+				"[--pre-subtle-bg:var(--amber-3)]",
+				"[--pre-border:var(--amber-6)]",
+				"[--pre-fg:var(--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)]"
+				"[--pre-surface-bg:var(--blue-2)]",
+				"[--pre-subtle-bg:var(--blue-3)]",
+				"[--pre-border:var(--blue-6)]",
+				"[--pre-fg:var(--blue-12)]"
 			]
 		},
 		variant: {

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

@@ -1 +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"}
+{"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(--gray-2)]',\n          '[--pre-subtle-bg:var(--gray-3)]',\n          '[--pre-border:var(--gray-6)]',\n          '[--pre-fg:var(--gray-12)]',\n        ],\n        accent: [\n          '[--pre-surface-bg:var(--accent-2)]',\n          '[--pre-subtle-bg:var(--accent-3)]',\n          '[--pre-border:var(--accent-6)]',\n          '[--pre-fg:var(--accent-12)]',\n        ],\n        red: [\n          '[--pre-surface-bg:var(--red-2)]',\n          '[--pre-subtle-bg:var(--red-3)]',\n          '[--pre-border:var(--red-6)]',\n          '[--pre-fg:var(--red-12)]',\n        ],\n        green: [\n          '[--pre-surface-bg:var(--green-2)]',\n          '[--pre-subtle-bg:var(--green-3)]',\n          '[--pre-border:var(--green-6)]',\n          '[--pre-fg:var(--green-12)]',\n        ],\n        amber: [\n          '[--pre-surface-bg:var(--amber-2)]',\n          '[--pre-subtle-bg:var(--amber-3)]',\n          '[--pre-border:var(--amber-6)]',\n          '[--pre-fg:var(--amber-12)]',\n        ],\n        blue: [\n          '[--pre-surface-bg:var(--blue-2)]',\n          '[--pre-subtle-bg:var(--blue-3)]',\n          '[--pre-border:var(--blue-6)]',\n          '[--pre-fg:var(--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,QAAQ;IACN;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/types/color-scheme.d.ts

@@ -4,13 +4,13 @@
  * a anterior, e cada componente aceita só a camada que faz sentido para ele.
  *
  * Cada valor corresponde a uma escala de cor do tema (`--color-<escala>-1` a
- * `-12`), inspirada no Radix Colors; `brand` é a escala da cor da marca.
+ * `-12`), inspirada no Radix Colors; `accent` é a escala da cor da marca.
  */
 /**
  * Cor neutra e cor da marca. Para controles e estrutura (tabs, select,
  * checkbox, input).
  */
-export type ColorSchemeCore = 'gray' | 'brand';
+export type ColorSchemeCore = 'gray' | 'accent';
 /**
  * Cores de estado: erro, sucesso, aviso e informação. Para o que comunica
  * estado (botão destrutivo, alerta, toast).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lucasbernardosn/react-ui",
-  "version": "0.3.0",
-  "description": "A React component library built with TypeScript and Tailwind CSS, designed to provide a comprehensive set of customizable UI components for modern web applications.",
+  "version": "0.5.0",
+  "description": "Biblioteca de componentes React sobre Base UI e Zag.js, estilizada com Tailwind CSS v4, com tema claro e escuro e textos padrão em pt-BR.",
   "type": "module",
   "imports": {
     "#*": {
@@ -34,7 +34,7 @@
   "dependencies": {
     "@base-ui/react": "1.9.0",
     "@base-ui/utils": "0.5.0",
-    "@lucasbernardosn/ts-utils": "^0.3.0",
+    "@lucasbernardosn/ts-utils": "^0.5.0",
     "@phosphor-icons/react": "2.1.10",
     "@zag-js/clipboard": "1.44.0",
     "@zag-js/collection": "1.44.0",
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.3",
-    "@lucasbernardosn/react-utils": "0.3.0",
+    "@lucasbernardosn/react-utils": "0.5.0",
     "@lucasbernardosn/ts-config": "0.2.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
@@ -70,7 +70,7 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-utils": "^0.3.0",
+    "@lucasbernardosn/react-utils": "^0.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0"
@@ -82,6 +82,18 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "base-ui",
+    "zag-js",
+    "typescript",
+    "pt-br"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"