@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/overlays/popover/popover-backdrop.js

@@ -5,10 +5,11 @@ import { Popover } from "@base-ui/react/popover";
 /**
 * Camada atrás do popup que cobre e escurece a página.
 *
-* Origem do backdrop dos popups: o `Select.Backdrop` e o `Autocomplete.Backdrop` copiam estas classes (tabela no README de
-* `overlays`). No Safari do iOS 26, um `fixed` não cobre a área sob a barra do navegador; lá, o
-* backdrop passa a `absolute`, detectado por `-webkit-touch-callout`, que só o iOS aceita, e o
-* `min-h-dvh` garante a altura da tela visível.
+* Origem do backdrop dos popups: o `Select.Backdrop`, o `Autocomplete.Backdrop`, o
+* `Dialog.Backdrop`, o `AlertDialog.Backdrop` e o `Drawer.Backdrop` copiam estas classes (o do
+* Drawer com diferenças, explicadas no JSDoc dele). No Safari do iOS 26, um `fixed` não cobre a
+* área sob a barra do navegador; lá, o backdrop passa a `absolute`, detectado por
+* `-webkit-touch-callout`, que só o iOS aceita, e o `min-h-dvh` garante a altura da tela visível.
 */
 const PopoverBackdrop = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/popover/popover-backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-backdrop.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-backdrop.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverBackdropProps = BasePopover.Backdrop.Props;\n\nexport type PopoverBackdropState = BasePopover.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página.\n *\n * Origem do backdrop dos popups: o `Select.Backdrop` e o `Autocomplete.Backdrop` copiam estas classes (tabela no README de\n * `overlays`). No Safari do iOS 26, um `fixed` não cobre a área sob a barra do navegador; lá, o\n * backdrop passa a `absolute`, detectado por `-webkit-touch-callout`, que só o iOS aceita, e o\n * `min-h-dvh` garante a altura da tela visível.\n */\nexport const PopoverBackdrop = (props: PopoverBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Backdrop\n      data-component=\"Popover.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'not-motion-reduced:data-ending-style:ease-exit',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverBackdrop.displayName = 'Popover.Backdrop';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,UAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"popover-backdrop.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-backdrop.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverBackdropProps = BasePopover.Backdrop.Props;\n\nexport type PopoverBackdropState = BasePopover.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página.\n *\n * Origem do backdrop dos popups: o `Select.Backdrop`, o `Autocomplete.Backdrop`, o\n * `Dialog.Backdrop`, o `AlertDialog.Backdrop` e o `Drawer.Backdrop` copiam estas classes (o do\n * Drawer com diferenças, explicadas no JSDoc dele). No Safari do iOS 26, um `fixed` não cobre a\n * área sob a barra do navegador; lá, o backdrop passa a `absolute`, detectado por\n * `-webkit-touch-callout`, que só o iOS aceita, e o `min-h-dvh` garante a altura da tela visível.\n */\nexport const PopoverBackdrop = (props: PopoverBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Backdrop\n      data-component=\"Popover.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'not-motion-reduced:data-ending-style:ease-exit',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverBackdrop.displayName = 'Popover.Backdrop';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,UAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

package/dist/components/overlays/popover/popover-popup-variants.d.ts

@@ -1,8 +1,9 @@
 //#region src/components/overlays/popover/popover-popup-variants.d.ts
 /**
  * Origem da superfície dos popups: o `ActionBar.Popup`, o `Select.Popup`, o `Autocomplete.Popup`, o
- * `Dialog.Popup`, o `Menu.Popup` e o `Toast.Root` copiam estas classes, cada um com as suas diferenças (tabela no
- * README de `overlays`). Uma mudança aqui vale para as cópias na mesma rodada.
+ * `Dialog.Popup`, o `Menu.Popup`, o `Toast.Root` e o menu do `AsyncSelect` copiam estas classes,
+ * cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as
+ * cópias na mesma rodada.
  *
  * A superfície é o fundo branco (`gray-2` no escuro), o contorno `gray-6` em `outline`, que não
  * ocupa espaço no layout, e a sombra, que some no escuro, onde não se vê. Entrada e saída animam

package/dist/components/overlays/popover/popover-popup-variants.js

@@ -2,8 +2,9 @@ import { cva } from "class-variance-authority";
 //#region src/components/overlays/popover/popover-popup-variants.ts
 /**
 * Origem da superfície dos popups: o `ActionBar.Popup`, o `Select.Popup`, o `Autocomplete.Popup`, o
-* `Dialog.Popup`, o `Menu.Popup` e o `Toast.Root` copiam estas classes, cada um com as suas diferenças (tabela no
-* README de `overlays`). Uma mudança aqui vale para as cópias na mesma rodada.
+* `Dialog.Popup`, o `Menu.Popup`, o `Toast.Root` e o menu do `AsyncSelect` copiam estas classes,
+* cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as
+* cópias na mesma rodada.
 *
 * A superfície é o fundo branco (`gray-2` no escuro), o contorno `gray-6` em `outline`, que não
 * ocupa espaço no layout, e a sombra, que some no escuro, onde não se vê. Entrada e saída animam

package/dist/components/overlays/popover/popover-popup-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/popover/popover-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Origem da superfície dos popups: o `ActionBar.Popup`, o `Select.Popup`, o `Autocomplete.Popup`, o\n * `Dialog.Popup`, o `Menu.Popup` e o `Toast.Root` copiam estas classes, cada um com as suas diferenças (tabela no\n * README de `overlays`). Uma mudança aqui vale para as cópias na mesma rodada.\n *\n * A superfície é o fundo branco (`gray-2` no escuro), o contorno `gray-6` em `outline`, que não\n * ocupa espaço no layout, e a sombra, que some no escuro, onde não se vê. Entrada e saída animam\n * `scale` e `opacity` a partir de `--transform-origin`, o ponto do trigger que o Base UI escreve.\n * Com movimento reduzido só a transição sai: o popup aparece e some sem animar.\n *\n * O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px, e um popover\n * não tem `size`. Um popover com outro respiro o redeclara pela `className`.\n *\n * A altura para em `--available-height`, o espaço entre o trigger e a borda da tela. Acima disso,\n * o `Body` rola, e `Header` e `Footer` continuam visíveis.\n */\nexport const popoverPopupVariants = cva([\n  '[--popover-padding:--spacing(4)]',\n\n  'relative',\n\n  'flex',\n  'flex-col',\n\n  'h-(--popup-height,auto)',\n  'w-(--popup-width,auto)',\n\n  'max-h-(--available-height)',\n  // Teto fixo, não por tamanho de tela: no celular vale a largura da tela menos um respiro.\n  'max-w-[min(calc(100dvw-1rem),var(--container-md))]',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n  'text-sm',\n  'text-gray-12',\n\n  'not-motion-reduced:origin-(--transform-origin)',\n  'not-motion-reduced:transition-[width,height,opacity,scale]',\n  'not-motion-reduced:ease-enter',\n  'not-motion-reduced:duration-150',\n\n  'not-motion-reduced:data-starting-style:scale-95',\n  'not-motion-reduced:data-ending-style:scale-95',\n  'not-motion-reduced:data-ending-style:ease-exit',\n  'not-motion-reduced:data-ending-style:duration-100',\n  'data-starting-style:opacity-0',\n  'data-ending-style:opacity-0',\n\n  'data-instant:transition-none',\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,uBAAuB,IAAI;CACtC;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;AACF,CAAC"}
+{"version":3,"file":"popover-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/popover/popover-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Origem da superfície dos popups: o `ActionBar.Popup`, o `Select.Popup`, o `Autocomplete.Popup`, o\n * `Dialog.Popup`, o `Menu.Popup`, o `Toast.Root` e o menu do `AsyncSelect` copiam estas classes,\n * cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as\n * cópias na mesma rodada.\n *\n * A superfície é o fundo branco (`gray-2` no escuro), o contorno `gray-6` em `outline`, que não\n * ocupa espaço no layout, e a sombra, que some no escuro, onde não se vê. Entrada e saída animam\n * `scale` e `opacity` a partir de `--transform-origin`, o ponto do trigger que o Base UI escreve.\n * Com movimento reduzido só a transição sai: o popup aparece e some sem animar.\n *\n * O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px, e um popover\n * não tem `size`. Um popover com outro respiro o redeclara pela `className`.\n *\n * A altura para em `--available-height`, o espaço entre o trigger e a borda da tela. Acima disso,\n * o `Body` rola, e `Header` e `Footer` continuam visíveis.\n */\nexport const popoverPopupVariants = cva([\n  '[--popover-padding:--spacing(4)]',\n\n  'relative',\n\n  'flex',\n  'flex-col',\n\n  'h-(--popup-height,auto)',\n  'w-(--popup-width,auto)',\n\n  'max-h-(--available-height)',\n  // Teto fixo, não por tamanho de tela: no celular vale a largura da tela menos um respiro.\n  'max-w-[min(calc(100dvw-1rem),var(--container-md))]',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n  'text-sm',\n  'text-gray-12',\n\n  'not-motion-reduced:origin-(--transform-origin)',\n  'not-motion-reduced:transition-[width,height,opacity,scale]',\n  'not-motion-reduced:ease-enter',\n  'not-motion-reduced:duration-150',\n\n  'not-motion-reduced:data-starting-style:scale-95',\n  'not-motion-reduced:data-ending-style:scale-95',\n  'not-motion-reduced:data-ending-style:ease-exit',\n  'not-motion-reduced:data-ending-style:duration-100',\n  'data-starting-style:opacity-0',\n  'data-ending-style:opacity-0',\n\n  'data-instant:transition-none',\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;AACF,CAAC"}

package/dist/components/overlays/popover/popover-positioner.d.ts

@@ -7,9 +7,10 @@ export type PopoverPositionerState = Popover.Positioner.State;
  * inline (`--positioner-width`, `--available-width`).
  *
  * Origem do positioner dos popups: o `Tooltip.Positioner` e o `Menu.Positioner` copiam estas
- * classes (tabela no README de `overlays`). Quando o mesmo popup passa de um trigger a outro (com `handle`), o positioner
- * desliza até o novo lugar. Quando o Base UI marca `data-instant` (abertura por clique ou foco,
- * por exemplo), ele vai direto, sem deslizar.
+ * classes, cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Quando o mesmo popup
+ * passa de um trigger a outro (com `handle`), o positioner desliza até o novo lugar. Quando o Base
+ * UI marca `data-instant` (abertura por clique ou foco, por exemplo), ele vai direto, sem
+ * deslizar.
  */
 export declare const PopoverPositioner: {
   (props: PopoverPositionerProps): import("react").JSX.Element;

package/dist/components/overlays/popover/popover-positioner.js

@@ -7,9 +7,10 @@ import { Popover } from "@base-ui/react/popover";
 * inline (`--positioner-width`, `--available-width`).
 *
 * Origem do positioner dos popups: o `Tooltip.Positioner` e o `Menu.Positioner` copiam estas
-* classes (tabela no README de `overlays`). Quando o mesmo popup passa de um trigger a outro (com `handle`), o positioner
-* desliza até o novo lugar. Quando o Base UI marca `data-instant` (abertura por clique ou foco,
-* por exemplo), ele vai direto, sem deslizar.
+* classes, cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Quando o mesmo popup
+* passa de um trigger a outro (com `handle`), o positioner desliza até o novo lugar. Quando o Base
+* UI marca `data-instant` (abertura por clique ou foco, por exemplo), ele vai direto, sem
+* deslizar.
 */
 const PopoverPositioner = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/popover/popover-positioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-positioner.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-positioner.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverPositionerProps = BasePopover.Positioner.Props;\n\nexport type PopoverPositionerState = BasePopover.Positioner.State;\n\n/**\n * Posiciona o popup junto ao trigger. As dimensões vêm das variáveis que o Base UI escreve\n * inline (`--positioner-width`, `--available-width`).\n *\n * Origem do positioner dos popups: o `Tooltip.Positioner` e o `Menu.Positioner` copiam estas\n * classes (tabela no README de `overlays`). Quando o mesmo popup passa de um trigger a outro (com `handle`), o positioner\n * desliza até o novo lugar. Quando o Base UI marca `data-instant` (abertura por clique ou foco,\n * por exemplo), ele vai direto, sem deslizar.\n */\nexport const PopoverPositioner = (props: PopoverPositionerProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Positioner\n      data-component=\"Popover.Positioner\"\n      className={mergeStateClassNames(\n        [\n          'w-(--positioner-width)',\n          'h-(--positioner-height)',\n          'max-w-(--available-width)',\n\n          'not-motion-reduced:transition-[top,left,right,bottom,transform]',\n          'not-motion-reduced:duration-200',\n          'not-motion-reduced:ease-move',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      sideOffset={6}\n      collisionPadding={12}\n      {...rest}\n    />\n  );\n};\n\nPopoverPositioner.displayName = 'Popover.Positioner';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,YAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,YAAY;EACZ,kBAAkB;EAClB,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"popover-positioner.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-positioner.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverPositionerProps = BasePopover.Positioner.Props;\n\nexport type PopoverPositionerState = BasePopover.Positioner.State;\n\n/**\n * Posiciona o popup junto ao trigger. As dimensões vêm das variáveis que o Base UI escreve\n * inline (`--positioner-width`, `--available-width`).\n *\n * Origem do positioner dos popups: o `Tooltip.Positioner` e o `Menu.Positioner` copiam estas\n * classes, cada um com as suas diferenças, explicadas no JSDoc de cada cópia. Quando o mesmo popup\n * passa de um trigger a outro (com `handle`), o positioner desliza até o novo lugar. Quando o Base\n * UI marca `data-instant` (abertura por clique ou foco, por exemplo), ele vai direto, sem\n * deslizar.\n */\nexport const PopoverPositioner = (props: PopoverPositionerProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Positioner\n      data-component=\"Popover.Positioner\"\n      className={mergeStateClassNames(\n        [\n          'w-(--positioner-width)',\n          'h-(--positioner-height)',\n          'max-w-(--available-width)',\n\n          'not-motion-reduced:transition-[top,left,right,bottom,transform]',\n          'not-motion-reduced:duration-200',\n          'not-motion-reduced:ease-move',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      sideOffset={6}\n      collisionPadding={12}\n      {...rest}\n    />\n  );\n};\n\nPopoverPositioner.displayName = 'Popover.Positioner';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,YAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,YAAY;EACZ,kBAAkB;EAClB,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/overlays/popover/popover-viewport.d.ts

@@ -6,10 +6,10 @@ export type PopoverViewportState = Popover.Viewport.State;
  * Área que anima a troca de conteúdo quando o mesmo popup serve a mais de um trigger (com
  * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.
  *
- * Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes (tabela no README de
- * `overlays`). Os dois conteúdos ficam na largura do popup (`--popup-width`), para o texto que
- * sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em 300ms, e o que
- * sai some em 100ms.
+ * Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes, com a diferença
+ * explicada no JSDoc dele. Os dois conteúdos ficam na largura do popup (`--popup-width`), para o
+ * texto que sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em
+ * 300ms, e o que sai some em 100ms.
  */
 export declare const PopoverViewport: {
   (props: PopoverViewportProps): import("react").JSX.Element;

package/dist/components/overlays/popover/popover-viewport.js

@@ -6,10 +6,10 @@ import { Popover } from "@base-ui/react/popover";
 * Área que anima a troca de conteúdo quando o mesmo popup serve a mais de um trigger (com
 * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.
 *
-* Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes (tabela no README de
-* `overlays`). Os dois conteúdos ficam na largura do popup (`--popup-width`), para o texto que
-* sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em 300ms, e o que
-* sai some em 100ms.
+* Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes, com a diferença
+* explicada no JSDoc dele. Os dois conteúdos ficam na largura do popup (`--popup-width`), para o
+* texto que sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em
+* 300ms, e o que sai some em 100ms.
 */
 const PopoverViewport = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/popover/popover-viewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-viewport.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-viewport.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverViewportProps = BasePopover.Viewport.Props;\n\nexport type PopoverViewportState = BasePopover.Viewport.State;\n\n/**\n * Área que anima a troca de conteúdo quando o mesmo popup serve a mais de um trigger (com\n * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.\n *\n * Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes (tabela no README de\n * `overlays`). Os dois conteúdos ficam na largura do popup (`--popup-width`), para o texto que\n * sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em 300ms, e o que\n * sai some em 100ms.\n */\nexport const PopoverViewport = (props: PopoverViewportProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Viewport\n      data-component=\"Popover.Viewport\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'w-full',\n          'h-full',\n\n          'overflow-clip',\n\n          \"data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0\",\n\n          '**:data-current:w-(--popup-width)',\n          '**:data-current:opacity-100',\n\n          'not-motion-reduced:**:data-current:transition-opacity',\n          'not-motion-reduced:**:data-current:duration-300',\n          'not-motion-reduced:**:data-current:ease-enter',\n\n          \"data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0\",\n\n          '**:data-previous:w-(--popup-width)',\n          '**:data-previous:opacity-100',\n\n          'not-motion-reduced:**:data-previous:transition-opacity',\n          'not-motion-reduced:**:data-previous:duration-100',\n          'not-motion-reduced:**:data-previous:ease-exit',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'Popover.Viewport';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,UAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"popover-viewport.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-viewport.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverViewportProps = BasePopover.Viewport.Props;\n\nexport type PopoverViewportState = BasePopover.Viewport.State;\n\n/**\n * Área que anima a troca de conteúdo quando o mesmo popup serve a mais de um trigger (com\n * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.\n *\n * Origem do viewport dos popups: o `Tooltip.Viewport` copia estas classes, com a diferença\n * explicada no JSDoc dele. Os dois conteúdos ficam na largura do popup (`--popup-width`), para o\n * texto que sai não quebrar de novo enquanto o popup muda de tamanho; o que entra aparece em\n * 300ms, e o que sai some em 100ms.\n */\nexport const PopoverViewport = (props: PopoverViewportProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Viewport\n      data-component=\"Popover.Viewport\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'w-full',\n          'h-full',\n\n          'overflow-clip',\n\n          \"data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0\",\n\n          '**:data-current:w-(--popup-width)',\n          '**:data-current:opacity-100',\n\n          'not-motion-reduced:**:data-current:transition-opacity',\n          'not-motion-reduced:**:data-current:duration-300',\n          'not-motion-reduced:**:data-current:ease-enter',\n\n          \"data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0\",\n\n          '**:data-previous:w-(--popup-width)',\n          '**:data-previous:opacity-100',\n\n          'not-motion-reduced:**:data-previous:transition-opacity',\n          'not-motion-reduced:**:data-previous:duration-100',\n          'not-motion-reduced:**:data-previous:ease-exit',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'Popover.Viewport';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,UAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

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

@@ -0,0 +1,35 @@
+import { MarkVariants } from "../mark/mark-variants.js";
+import "../mark/index.js";
+//#region src/components/typography/highlight/highlight.d.ts
+export type HighlightProps = MarkVariants & {
+  /**
+   * Termo ou lista de termos buscados. Cada termo é um trecho contínuo, sem diferenciar acento
+   * nem caixa. Vazio, nada é destacado.
+   */
+  query: string | readonly string[];
+  /** O texto em que a busca é destacada. */
+  children: string;
+};
+/**
+ * Destaca no texto os trechos que casam com a busca, cada um num `Mark`.
+ *
+ * A regra é a do filtro do `Command` e do `useFilter` do Base UI: a busca inteira é um trecho
+ * contínuo, sem diferenciar acento nem caixa, e o trecho destacado mantém o acento e a caixa do
+ * texto original. Não renderiza elemento próprio: o texto fica dentro do elemento de quem usa,
+ * herdando o tamanho e a cor dele.
+ *
+ * `colorScheme` e `variant` são os do `Mark` e valem para todos os trechos.
+ *
+ * @example
+ * ```tsx
+ * <Text>
+ *   <Highlight query="comissao">Comissão de vendas</Highlight>
+ * </Text>
+ * ```
+ */
+export declare const Highlight: {
+  (props: HighlightProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=highlight.d.ts.map

package/dist/components/typography/highlight/highlight.js

@@ -0,0 +1,43 @@
+import { Mark } from "../mark/mark.js";
+import { Fragment } from "react";
+import { getHighlightChunks } from "@lucasbernardosn/ts-utils";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/typography/highlight/highlight.tsx
+/**
+* Destaca no texto os trechos que casam com a busca, cada um num `Mark`.
+*
+* A regra é a do filtro do `Command` e do `useFilter` do Base UI: a busca inteira é um trecho
+* contínuo, sem diferenciar acento nem caixa, e o trecho destacado mantém o acento e a caixa do
+* texto original. Não renderiza elemento próprio: o texto fica dentro do elemento de quem usa,
+* herdando o tamanho e a cor dele.
+*
+* `colorScheme` e `variant` são os do `Mark` e valem para todos os trechos.
+*
+* @example
+* ```tsx
+* <Text>
+*   <Highlight query="comissao">Comissão de vendas</Highlight>
+* </Text>
+* ```
+*/
+const Highlight = (props) => {
+	const { query, children, ...variantProps } = props;
+	const chunks = getHighlightChunks({
+		text: children,
+		query
+	});
+	let offset = 0;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: chunks.map((chunk) => {
+		const key = offset;
+		offset += chunk.text.length;
+		return chunk.match ? /* @__PURE__ */ jsx(Mark, {
+			...variantProps,
+			children: chunk.text
+		}, key) : /* @__PURE__ */ jsx(Fragment, { children: chunk.text }, key);
+	}) });
+};
+Highlight.displayName = "Highlight";
+//#endregion
+export { Highlight };
+
+//# sourceMappingURL=highlight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","names":[],"sources":["../../../../src/components/typography/highlight/highlight.tsx"],"sourcesContent":["import { getHighlightChunks } from '@lucasbernardosn/ts-utils';\nimport { Fragment } from 'react';\nimport { Mark, type MarkVariants } from '#components/typography/mark';\n\nexport type HighlightProps = MarkVariants & {\n  /**\n   * Termo ou lista de termos buscados. Cada termo é um trecho contínuo, sem diferenciar acento\n   * nem caixa. Vazio, nada é destacado.\n   */\n  query: string | readonly string[];\n  /** O texto em que a busca é destacada. */\n  children: string;\n};\n\n/**\n * Destaca no texto os trechos que casam com a busca, cada um num `Mark`.\n *\n * A regra é a do filtro do `Command` e do `useFilter` do Base UI: a busca inteira é um trecho\n * contínuo, sem diferenciar acento nem caixa, e o trecho destacado mantém o acento e a caixa do\n * texto original. Não renderiza elemento próprio: o texto fica dentro do elemento de quem usa,\n * herdando o tamanho e a cor dele.\n *\n * `colorScheme` e `variant` são os do `Mark` e valem para todos os trechos.\n *\n * @example\n * ```tsx\n * <Text>\n *   <Highlight query=\"comissao\">Comissão de vendas</Highlight>\n * </Text>\n * ```\n */\nexport const Highlight = (props: HighlightProps) => {\n  const { query, children, ...variantProps } = props;\n\n  const chunks = getHighlightChunks({ text: children, query });\n\n  let offset = 0;\n\n  return (\n    <>\n      {chunks.map((chunk) => {\n        const key = offset;\n        offset += chunk.text.length;\n\n        return chunk.match ? (\n          <Mark\n            key={key}\n            {...variantProps}\n          >\n            {chunk.text}\n          </Mark>\n        ) : (\n          <Fragment key={key}>{chunk.text}</Fragment>\n        );\n      })}\n    </>\n  );\n};\n\nHighlight.displayName = 'Highlight';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,OAAO,UAAU,GAAG,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB;EAAE,MAAM;EAAU;CAAM,CAAC;CAE3D,IAAI,SAAS;CAEb,OACE,oBAAA,YAAA,EAAA,UACG,OAAO,KAAK,UAAU;EACrB,MAAM,MAAM;EACZ,UAAU,MAAM,KAAK;EAErB,OAAO,MAAM,QACX,oBAAC,MAAD;GAEE,GAAI;GAEH,UAAA,MAAM;EACH,GAJC,GAID,IAEN,oBAAC,UAAD,EAAA,UAAqB,MAAM,KAAe,GAA3B,GAA2B;CAE9C,CAAC,EACD,CAAA;AAEN;AAEA,UAAU,cAAc"}

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

@@ -0,0 +1,2 @@
+import { Highlight, HighlightProps } from "./highlight.js";
+export { Highlight, type HighlightProps };

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

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

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

@@ -28,7 +28,7 @@ export declare const kbdDefaultVariants: Required<KbdVariants>;
  * onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
  */
 export declare const kbdVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
   variant?: "subtle" | "outline" | "plain" | "raised" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -24,16 +24,16 @@ const kbdVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: [
-				"[--kbd-border:var(--color-gray-6)]",
-				"[--kbd-raised-bg:var(--color-gray-3)]",
-				"[--kbd-subtle-bg:var(--color-gray-4)]",
+				"[--kbd-border:var(--gray-6)]",
+				"[--kbd-raised-bg:var(--gray-3)]",
+				"[--kbd-subtle-bg:var(--gray-4)]",
 				"text-gray-12"
 			],
-			brand: [
-				"[--kbd-border:var(--color-brand-6)]",
-				"[--kbd-raised-bg:var(--color-brand-3)]",
-				"[--kbd-subtle-bg:var(--color-brand-4)]",
-				"text-brand-12"
+			accent: [
+				"[--kbd-border:var(--accent-6)]",
+				"[--kbd-raised-bg:var(--accent-3)]",
+				"[--kbd-subtle-bg:var(--accent-4)]",
+				"text-accent-12"
 			]
 		},
 		variant: {
@@ -46,7 +46,7 @@ const kbdVariants = cva([
 			outline: [
 				"bg-transparent",
 				"border",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-(--kbd-subtle-bg)/75"],
 			plain: ["bg-transparent"]

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

@@ -1 +1 @@
-{"version":3,"file":"kbd-variants.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type KbdVariants = {\n  /**\n   * Cor do texto e, em `raised` e `subtle`, do fundo e da borda da tecla.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Altura, largura mínima e tamanho do texto. O `md` tem a altura da linha de um `text-sm`,\n   * então cabe numa frase sem aumentar a entrelinha.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da tecla: `raised` com relevo, `outline` só contorno, `subtle` com fundo suave e\n   * `plain` sem fundo nem borda.\n   *\n   * @default 'raised'\n   */\n  variant?: 'raised' | 'outline' | 'subtle' | 'plain';\n};\n\nexport const kbdDefaultVariants: Required<KbdVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n  variant: 'raised',\n};\n\n/**\n * A cor só declara `--kbd-border`, `--kbd-raised-bg` e `--kbd-subtle-bg`, e a `variant` decide\n * onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n */\nexport const kbdVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    // Com a largura mínima igual à altura, a tecla de um caractere fica\n    // quadrada.\n    'justify-center',\n    'shrink-0',\n\n    'px-1',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'font-medium',\n    'font-mono',\n    'whitespace-nowrap',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--kbd-border:var(--color-gray-6)]',\n          '[--kbd-raised-bg:var(--color-gray-3)]',\n          '[--kbd-subtle-bg:var(--color-gray-4)]',\n\n          'text-gray-12',\n        ],\n        brand: [\n          '[--kbd-border:var(--color-brand-6)]',\n          '[--kbd-raised-bg:var(--color-brand-3)]',\n          '[--kbd-subtle-bg:var(--color-brand-4)]',\n\n          'text-brand-12',\n        ],\n      },\n      variant: {\n        raised: [\n          'bg-(--kbd-raised-bg)',\n\n          'border',\n          // A borda inferior mais grossa é o que dá o relevo de tecla.\n          'border-b-2',\n          'border-(--kbd-border)',\n        ],\n        outline: [\n          'bg-transparent',\n\n          'border',\n          // Borda neutra de propósito: contornada na cor do esquema, a tecla\n          // passa a ler como estado em vez de tecla. O esquema segue tingindo\n          // só o texto. Mesmo token do `--button-outline-border` do `Button`.\n          'border-gray-alpha-7',\n        ],\n        subtle: ['bg-(--kbd-subtle-bg)/75'],\n        plain: ['bg-transparent'],\n      },\n      size: {\n        sm: [\n          'h-4',\n          'min-w-4',\n\n          'text-xs',\n        ],\n        md: [\n          'h-5',\n          'min-w-5',\n\n          'text-sm',\n        ],\n        lg: [\n          'h-6',\n          'min-w-6',\n\n          'text-base',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: kbdDefaultVariants.colorScheme,\n      size: kbdDefaultVariants.size,\n      variant: kbdDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,qBAA4C;CACvD,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;AAMA,MAAa,cAAc,IACzB;CACE;CACA;CAGA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IACA;IAEA;GACF;EACF;EACA,SAAS;GACP,QAAQ;IACN;IAEA;IAEA;IACA;GACF;GACA,SAAS;IACP;IAEA;IAIA;GACF;GACA,QAAQ,CAAC,yBAAyB;GAClC,OAAO,CAAC,gBAAgB;EAC1B;EACA,MAAM;GACJ,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,MAAM,mBAAmB;EACzB,SAAS,mBAAmB;CAC9B;AACF,CACF"}
+{"version":3,"file":"kbd-variants.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type KbdVariants = {\n  /**\n   * Cor do texto e, em `raised` e `subtle`, do fundo e da borda da tecla.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Altura, largura mínima e tamanho do texto. O `md` tem a altura da linha de um `text-sm`,\n   * então cabe numa frase sem aumentar a entrelinha.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da tecla: `raised` com relevo, `outline` só contorno, `subtle` com fundo suave e\n   * `plain` sem fundo nem borda.\n   *\n   * @default 'raised'\n   */\n  variant?: 'raised' | 'outline' | 'subtle' | 'plain';\n};\n\nexport const kbdDefaultVariants: Required<KbdVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n  variant: 'raised',\n};\n\n/**\n * A cor só declara `--kbd-border`, `--kbd-raised-bg` e `--kbd-subtle-bg`, e a `variant` decide\n * onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n */\nexport const kbdVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    // Com a largura mínima igual à altura, a tecla de um caractere fica\n    // quadrada.\n    'justify-center',\n    'shrink-0',\n\n    'px-1',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'font-medium',\n    'font-mono',\n    'whitespace-nowrap',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--kbd-border:var(--gray-6)]',\n          '[--kbd-raised-bg:var(--gray-3)]',\n          '[--kbd-subtle-bg:var(--gray-4)]',\n\n          'text-gray-12',\n        ],\n        accent: [\n          '[--kbd-border:var(--accent-6)]',\n          '[--kbd-raised-bg:var(--accent-3)]',\n          '[--kbd-subtle-bg:var(--accent-4)]',\n\n          'text-accent-12',\n        ],\n      },\n      variant: {\n        raised: [\n          'bg-(--kbd-raised-bg)',\n\n          'border',\n          // A borda inferior mais grossa é o que dá o relevo de tecla.\n          'border-b-2',\n          'border-(--kbd-border)',\n        ],\n        outline: [\n          'bg-transparent',\n\n          'border',\n          // Borda neutra de propósito: contornada na cor do esquema, a tecla\n          // passa a ler como estado em vez de tecla. O esquema segue tingindo\n          // só o texto. Mesmo token do `--button-outline-border` do `Button`.\n          'border-gray-7',\n        ],\n        subtle: ['bg-(--kbd-subtle-bg)/75'],\n        plain: ['bg-transparent'],\n      },\n      size: {\n        sm: [\n          'h-4',\n          'min-w-4',\n\n          'text-xs',\n        ],\n        md: [\n          'h-5',\n          'min-w-5',\n\n          'text-sm',\n        ],\n        lg: [\n          'h-6',\n          'min-w-6',\n\n          'text-base',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: kbdDefaultVariants.colorScheme,\n      size: kbdDefaultVariants.size,\n      variant: kbdDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,qBAA4C;CACvD,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;AAMA,MAAa,cAAc,IACzB;CACE;CACA;CAGA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IAEA;GACF;GACA,QAAQ;IACN;IACA;IACA;IAEA;GACF;EACF;EACA,SAAS;GACP,QAAQ;IACN;IAEA;IAEA;IACA;GACF;GACA,SAAS;IACP;IAEA;IAIA;GACF;GACA,QAAQ,CAAC,yBAAyB;GAClC,OAAO,CAAC,gBAAgB;EAC1B;EACA,MAAM;GACJ,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,MAAM,mBAAmB;EACzB,SAAS,mBAAmB;CAC9B;AACF,CACF"}

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

@@ -4,7 +4,7 @@ export type LinkVariants = {
   /**
    * Cor do texto e do sublinhado.
    *
-   * @default 'brand'
+   * @default 'accent'
    */
   colorScheme?: ColorSchemeSemantic;
   /**
@@ -26,7 +26,7 @@ export declare const linkDefaultVariants: Required<LinkVariants>;
  * hover.
  */
 export declare const linkVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
   variant?: "plain" | "underline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 //#region src/components/typography/link/link-variants.ts
 const linkDefaultVariants = {
-	colorScheme: "brand",
+	colorScheme: "accent",
 	variant: "underline"
 };
 /**
@@ -34,43 +34,43 @@ const linkVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: [
-				"[--link-fg:var(--color-gray-11)]",
-				"[--link-fg-hover:var(--color-gray-12)]",
-				"[--link-decoration:var(--color-gray-alpha-7)]"
+				"[--link-fg:var(--gray-11)]",
+				"[--link-fg-hover:var(--gray-12)]",
+				"[--link-decoration:var(--gray-a7)]"
 			],
-			brand: [
-				"[--link-fg:var(--color-brand-11)]",
-				"[--link-fg-hover:var(--color-brand-12)]",
-				"[--link-decoration:var(--color-brand-alpha-7)]"
+			accent: [
+				"[--link-fg:var(--accent-11)]",
+				"[--link-fg-hover:var(--accent-12)]",
+				"[--link-decoration:var(--accent-a7)]"
 			],
 			red: [
-				"[--link-fg:var(--color-red-11)]",
-				"[--link-fg-hover:var(--color-red-12)]",
-				"[--link-decoration:var(--color-red-alpha-7)]"
+				"[--link-fg:var(--red-11)]",
+				"[--link-fg-hover:var(--red-12)]",
+				"[--link-decoration:var(--red-a7)]"
 			],
 			green: [
-				"[--link-fg:var(--color-green-11)]",
-				"[--link-fg-hover:var(--color-green-12)]",
-				"[--link-decoration:var(--color-green-alpha-7)]"
+				"[--link-fg:var(--green-11)]",
+				"[--link-fg-hover:var(--green-12)]",
+				"[--link-decoration:var(--green-a7)]"
 			],
 			amber: [
-				"[--link-fg:var(--color-amber-11)]",
-				"[--link-fg-hover:var(--color-amber-12)]",
-				"[--link-decoration:var(--color-amber-alpha-7)]"
+				"[--link-fg:var(--amber-11)]",
+				"[--link-fg-hover:var(--amber-12)]",
+				"[--link-decoration:var(--amber-a7)]"
 			],
 			blue: [
-				"[--link-fg:var(--color-blue-11)]",
-				"[--link-fg-hover:var(--color-blue-12)]",
-				"[--link-decoration:var(--color-blue-alpha-7)]"
+				"[--link-fg:var(--blue-11)]",
+				"[--link-fg-hover:var(--blue-12)]",
+				"[--link-decoration:var(--blue-a7)]"
 			]
 		},
 		variant: {
 			underline: [
 				"underline",
-				"disabled:decoration-gray-alpha-7",
-				"disabled:hover:decoration-gray-alpha-7",
-				"aria-disabled:decoration-gray-alpha-7",
-				"aria-disabled:hover:decoration-gray-alpha-7"
+				"disabled:decoration-gray-a7",
+				"disabled:hover:decoration-gray-a7",
+				"aria-disabled:decoration-gray-a7",
+				"aria-disabled:hover:decoration-gray-a7"
 			],
 			plain: [
 				"no-underline",

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

@@ -1 +1 @@
-{"version":3,"file":"link-variants.js","names":[],"sources":["../../../../src/components/typography/link/link-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type LinkVariants = {\n  /**\n   * Cor do texto e do sublinhado.\n   *\n   * @default 'brand'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só\n   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é\n   * link.\n   *\n   * @default 'underline'\n   */\n  variant?: 'underline' | 'plain';\n};\n\nexport const linkDefaultVariants: Required<LinkVariants> = {\n  colorScheme: 'brand',\n  variant: 'underline',\n};\n\n/**\n * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e\n * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de\n * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.\n *\n * Desabilitado (`disabled` ou `aria-disabled=\"true\"`), o link vai para o gray e perde a mudança de\n * hover.\n */\nexport const linkVariants = cva(\n  [\n    'text-(--link-fg)',\n    'underline-offset-2',\n    'decoration-(--link-decoration)',\n\n    'hover:text-(--link-fg-hover)',\n    'hover:decoration-(--link-fg-hover)',\n\n    'focus-ring-outside',\n    'rounded-xs',\n\n    // Como `<button>`, o link precisa do cursor e do alinhamento à esquerda; no `<a>` não muda nada.\n    'cursor-pointer',\n    'text-start',\n\n    // Troca de cor, não movimento: usa o `ease-out` do Tailwind e não um token `ease-*` do tema.\n    'not-motion-reduced:transition-colors',\n    'not-motion-reduced:ease-out',\n\n    'disabled:cursor-not-allowed',\n    'disabled:text-gray-11',\n    'disabled:hover:text-gray-11',\n    'aria-disabled:cursor-not-allowed',\n    'aria-disabled:text-gray-11',\n    'aria-disabled:hover:text-gray-11',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--link-fg:var(--color-gray-11)]',\n          '[--link-fg-hover:var(--color-gray-12)]',\n          '[--link-decoration:var(--color-gray-alpha-7)]',\n        ],\n        brand: [\n          '[--link-fg:var(--color-brand-11)]',\n          '[--link-fg-hover:var(--color-brand-12)]',\n          '[--link-decoration:var(--color-brand-alpha-7)]',\n        ],\n        red: [\n          '[--link-fg:var(--color-red-11)]',\n          '[--link-fg-hover:var(--color-red-12)]',\n          '[--link-decoration:var(--color-red-alpha-7)]',\n        ],\n        green: [\n          '[--link-fg:var(--color-green-11)]',\n          '[--link-fg-hover:var(--color-green-12)]',\n          '[--link-decoration:var(--color-green-alpha-7)]',\n        ],\n        amber: [\n          '[--link-fg:var(--color-amber-11)]',\n          '[--link-fg-hover:var(--color-amber-12)]',\n          '[--link-decoration:var(--color-amber-alpha-7)]',\n        ],\n        blue: [\n          '[--link-fg:var(--color-blue-11)]',\n          '[--link-fg-hover:var(--color-blue-12)]',\n          '[--link-decoration:var(--color-blue-alpha-7)]',\n        ],\n      },\n      variant: {\n        underline: [\n          'underline',\n\n          'disabled:decoration-gray-alpha-7',\n          'disabled:hover:decoration-gray-alpha-7',\n          'aria-disabled:decoration-gray-alpha-7',\n          'aria-disabled:hover:decoration-gray-alpha-7',\n        ],\n        plain: [\n          'no-underline',\n          'hover:underline',\n\n          'disabled:hover:no-underline',\n          'aria-disabled:hover:no-underline',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: linkDefaultVariants.colorScheme,\n      variant: linkDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;AACX;;;;;;;;;AAUA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CAEA;CACA;CAEA;CACA;CAGA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,WAAW;IACT;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,oBAAoB;EACjC,SAAS,oBAAoB;CAC/B;AACF,CACF"}
+{"version":3,"file":"link-variants.js","names":[],"sources":["../../../../src/components/typography/link/link-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type LinkVariants = {\n  /**\n   * Cor do texto e do sublinhado.\n   *\n   * @default 'accent'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só\n   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é\n   * link.\n   *\n   * @default 'underline'\n   */\n  variant?: 'underline' | 'plain';\n};\n\nexport const linkDefaultVariants: Required<LinkVariants> = {\n  colorScheme: 'accent',\n  variant: 'underline',\n};\n\n/**\n * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e\n * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de\n * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.\n *\n * Desabilitado (`disabled` ou `aria-disabled=\"true\"`), o link vai para o gray e perde a mudança de\n * hover.\n */\nexport const linkVariants = cva(\n  [\n    'text-(--link-fg)',\n    'underline-offset-2',\n    'decoration-(--link-decoration)',\n\n    'hover:text-(--link-fg-hover)',\n    'hover:decoration-(--link-fg-hover)',\n\n    'focus-ring-outside',\n    'rounded-xs',\n\n    // Como `<button>`, o link precisa do cursor e do alinhamento à esquerda; no `<a>` não muda nada.\n    'cursor-pointer',\n    'text-start',\n\n    // Troca de cor, não movimento: usa o `ease-out` do Tailwind e não um token `ease-*` do tema.\n    'not-motion-reduced:transition-colors',\n    'not-motion-reduced:ease-out',\n\n    'disabled:cursor-not-allowed',\n    'disabled:text-gray-11',\n    'disabled:hover:text-gray-11',\n    'aria-disabled:cursor-not-allowed',\n    'aria-disabled:text-gray-11',\n    'aria-disabled:hover:text-gray-11',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--link-fg:var(--gray-11)]',\n          '[--link-fg-hover:var(--gray-12)]',\n          '[--link-decoration:var(--gray-a7)]',\n        ],\n        accent: [\n          '[--link-fg:var(--accent-11)]',\n          '[--link-fg-hover:var(--accent-12)]',\n          '[--link-decoration:var(--accent-a7)]',\n        ],\n        red: [\n          '[--link-fg:var(--red-11)]',\n          '[--link-fg-hover:var(--red-12)]',\n          '[--link-decoration:var(--red-a7)]',\n        ],\n        green: [\n          '[--link-fg:var(--green-11)]',\n          '[--link-fg-hover:var(--green-12)]',\n          '[--link-decoration:var(--green-a7)]',\n        ],\n        amber: [\n          '[--link-fg:var(--amber-11)]',\n          '[--link-fg-hover:var(--amber-12)]',\n          '[--link-decoration:var(--amber-a7)]',\n        ],\n        blue: [\n          '[--link-fg:var(--blue-11)]',\n          '[--link-fg-hover:var(--blue-12)]',\n          '[--link-decoration:var(--blue-a7)]',\n        ],\n      },\n      variant: {\n        underline: [\n          'underline',\n\n          'disabled:decoration-gray-a7',\n          'disabled:hover:decoration-gray-a7',\n          'aria-disabled:decoration-gray-a7',\n          'aria-disabled:hover:decoration-gray-a7',\n        ],\n        plain: [\n          'no-underline',\n          'hover:underline',\n\n          'disabled:hover:no-underline',\n          'aria-disabled:hover:no-underline',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: linkDefaultVariants.colorScheme,\n      variant: linkDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;AACX;;;;;;;;;AAUA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CAEA;CACA;CAEA;CACA;CAGA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,WAAW;IACT;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,oBAAoB;EACjC,SAAS,oBAAoB;CAC/B;AACF,CACF"}

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,10 +23,16 @@ 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;
-  variant?: "solid" | "subtle" | "plain" | "text" | 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
 //# sourceMappingURL=mark-variants.d.ts.map

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