@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/overlays/menu/use-menu-submenu-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-submenu-context.js","names":[],"sources":["../../../../src/components/overlays/menu/use-menu-submenu-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Marca o que está dentro de um `Menu.SubmenuRoot`. O Base UI não expõe essa informação, e o\n * `Menu.Positioner` a lê para trocar os offsets padrão do submenu. Sem provider, vale `false`.\n */\nexport const MenuSubmenuContext = createContext(false);\n\nexport const useMenuSubmenuContext = () => useContext(MenuSubmenuContext);\n"],"mappings":";;;;;;AAMA,MAAa,qBAAqB,cAAc,KAAK;AAErD,MAAa,8BAA8B,WAAW,kBAAkB"}

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

@@ -6,8 +6,8 @@ export type PopoverArrowState = Popover.Arrow.State;
  * Seta que aponta do popup para o trigger. O Base UI a posiciona e escreve o lado em
  * `data-side`, que decide a rotação.
  *
- * Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes (tabela no README de
- * `overlays`). A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que
+ * Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes, com as diferenças explicadas
+ * no JSDoc dele. A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que
  * corta (`overflow-clip`) um quadrado girado 45° no `::before`: só a ponta fica visível. O
  * quadrado tem a borda e o fundo do popup, e a caixa avança o próprio tamanho para fora dele.
  */

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

@@ -6,8 +6,8 @@ import { Popover } from "@base-ui/react/popover";
 * Seta que aponta do popup para o trigger. O Base UI a posiciona e escreve o lado em
 * `data-side`, que decide a rotação.
 *
-* Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes (tabela no README de
-* `overlays`). A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que
+* Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes, com as diferenças explicadas
+* no JSDoc dele. A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que
 * corta (`overflow-clip`) um quadrado girado 45° no `::before`: só a ponta fica visível. O
 * quadrado tem a borda e o fundo do popup, e a caixa avança o próprio tamanho para fora dele.
 */

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

@@ -1 +1 @@
-{"version":3,"file":"popover-arrow.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-arrow.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverArrowProps = BasePopover.Arrow.Props;\nexport type PopoverArrowState = BasePopover.Arrow.State;\n\n/**\n * Seta que aponta do popup para o trigger. O Base UI a posiciona e escreve o lado em\n * `data-side`, que decide a rotação.\n *\n * Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes (tabela no README de\n * `overlays`). A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que\n * corta (`overflow-clip`) um quadrado girado 45° no `::before`: só a ponta fica visível. O\n * quadrado tem a borda e o fundo do popup, e a caixa avança o próprio tamanho para fora dele.\n */\nexport const PopoverArrow = (props: PopoverArrowProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Arrow\n      data-component=\"Popover.Arrow\"\n      className={mergeStateClassNames(\n        [\n          '[--popover-arrow-size:--spacing(1.5)]',\n\n          'block',\n\n          'relative',\n\n          'w-[calc(var(--popover-arrow-size)*2)]',\n          'h-(--popover-arrow-size)',\n\n          'overflow-clip',\n\n          \"before:content-['']\",\n          'before:border',\n          'before:absolute',\n          'before:bottom-0',\n          'before:left-1/2',\n          'before:bg-white',\n          'dark:before:bg-gray-2',\n          'before:border-gray-6',\n          'data-[side=top]:rotate-180',\n          'data-[side=left]:rotate-90',\n          'data-[side=right]:-rotate-90',\n\n          'data-[side=top]:-bottom-(--popover-arrow-size)',\n          'data-[side=bottom]:-top-(--popover-arrow-size)',\n          'data-[side=left]:right-[calc(var(--popover-arrow-size)*-1.5)]',\n          'data-[side=right]:left-[calc(var(--popover-arrow-size)*-1.5)]',\n\n          'before:size-[calc(var(--popover-arrow-size)*sqrt(2))]',\n\n          'before:transform-[translate(-50%,50%)_rotate(45deg)]',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverArrow.displayName = 'Popover.Arrow';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GAEA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}
+{"version":3,"file":"popover-arrow.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-arrow.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverArrowProps = BasePopover.Arrow.Props;\nexport type PopoverArrowState = BasePopover.Arrow.State;\n\n/**\n * Seta que aponta do popup para o trigger. O Base UI a posiciona e escreve o lado em\n * `data-side`, que decide a rotação.\n *\n * Origem da seta dos popups: o `Tooltip.Arrow` copia estas classes, com as diferenças explicadas\n * no JSDoc dele. A seta é uma caixa de `--popover-arrow-size` de altura e o dobro de largura, que\n * corta (`overflow-clip`) um quadrado girado 45° no `::before`: só a ponta fica visível. O\n * quadrado tem a borda e o fundo do popup, e a caixa avança o próprio tamanho para fora dele.\n */\nexport const PopoverArrow = (props: PopoverArrowProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Arrow\n      data-component=\"Popover.Arrow\"\n      className={mergeStateClassNames(\n        [\n          '[--popover-arrow-size:--spacing(1.5)]',\n\n          'block',\n\n          'relative',\n\n          'w-[calc(var(--popover-arrow-size)*2)]',\n          'h-(--popover-arrow-size)',\n\n          'overflow-clip',\n\n          \"before:content-['']\",\n          'before:border',\n          'before:absolute',\n          'before:bottom-0',\n          'before:left-1/2',\n          'before:bg-white',\n          'dark:before:bg-gray-2',\n          'before:border-gray-6',\n          'data-[side=top]:rotate-180',\n          'data-[side=left]:rotate-90',\n          'data-[side=right]:-rotate-90',\n\n          'data-[side=top]:-bottom-(--popover-arrow-size)',\n          'data-[side=bottom]:-top-(--popover-arrow-size)',\n          'data-[side=left]:right-[calc(var(--popover-arrow-size)*-1.5)]',\n          'data-[side=right]:left-[calc(var(--popover-arrow-size)*-1.5)]',\n\n          'before:size-[calc(var(--popover-arrow-size)*sqrt(2))]',\n\n          'before:transform-[translate(-50%,50%)_rotate(45deg)]',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPopoverArrow.displayName = 'Popover.Arrow';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GAEA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

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

@@ -5,10 +5,11 @@ export type PopoverBackdropState = Popover.Backdrop.State;
 /**
  * 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.
  */
 export declare const PopoverBackdrop: {
   (props: PopoverBackdropProps): import("react").JSX.Element;

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/index.d.ts

@@ -0,0 +1,3 @@
+import { LinkVariants } from "./link-variants.js";
+import { Link, LinkProps } from "./link.js";
+export { Link, type LinkProps, type LinkVariants };

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

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

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

@@ -0,0 +1,33 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/typography/link/link-variants.d.ts
+export type LinkVariants = {
+  /**
+   * Cor do texto e do sublinhado.
+   *
+   * @default 'accent'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só
+   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é
+   * link.
+   *
+   * @default 'underline'
+   */
+  variant?: 'underline' | 'plain';
+};
+export declare const linkDefaultVariants: Required<LinkVariants>;
+/**
+ * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e
+ * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de
+ * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.
+ *
+ * Desabilitado (`disabled` ou `aria-disabled="true"`), o link vai para o gray e perde a mudança de
+ * hover.
+ */
+export declare const linkVariants: (props?: ({
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
+  variant?: "plain" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=link-variants.d.ts.map

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

@@ -0,0 +1,91 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/link/link-variants.ts
+const linkDefaultVariants = {
+	colorScheme: "accent",
+	variant: "underline"
+};
+/**
+* O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e
+* `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de
+* variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.
+*
+* Desabilitado (`disabled` ou `aria-disabled="true"`), o link vai para o gray e perde a mudança de
+* hover.
+*/
+const linkVariants = cva([
+	"text-(--link-fg)",
+	"underline-offset-2",
+	"decoration-(--link-decoration)",
+	"hover:text-(--link-fg-hover)",
+	"hover:decoration-(--link-fg-hover)",
+	"focus-ring-outside",
+	"rounded-xs",
+	"cursor-pointer",
+	"text-start",
+	"not-motion-reduced:transition-colors",
+	"not-motion-reduced:ease-out",
+	"disabled:cursor-not-allowed",
+	"disabled:text-gray-11",
+	"disabled:hover:text-gray-11",
+	"aria-disabled:cursor-not-allowed",
+	"aria-disabled:text-gray-11",
+	"aria-disabled:hover:text-gray-11"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--link-fg:var(--gray-11)]",
+				"[--link-fg-hover:var(--gray-12)]",
+				"[--link-decoration:var(--gray-a7)]"
+			],
+			accent: [
+				"[--link-fg:var(--accent-11)]",
+				"[--link-fg-hover:var(--accent-12)]",
+				"[--link-decoration:var(--accent-a7)]"
+			],
+			red: [
+				"[--link-fg:var(--red-11)]",
+				"[--link-fg-hover:var(--red-12)]",
+				"[--link-decoration:var(--red-a7)]"
+			],
+			green: [
+				"[--link-fg:var(--green-11)]",
+				"[--link-fg-hover:var(--green-12)]",
+				"[--link-decoration:var(--green-a7)]"
+			],
+			amber: [
+				"[--link-fg:var(--amber-11)]",
+				"[--link-fg-hover:var(--amber-12)]",
+				"[--link-decoration:var(--amber-a7)]"
+			],
+			blue: [
+				"[--link-fg:var(--blue-11)]",
+				"[--link-fg-hover:var(--blue-12)]",
+				"[--link-decoration:var(--blue-a7)]"
+			]
+		},
+		variant: {
+			underline: [
+				"underline",
+				"disabled:decoration-gray-a7",
+				"disabled:hover:decoration-gray-a7",
+				"aria-disabled:decoration-gray-a7",
+				"aria-disabled:hover:decoration-gray-a7"
+			],
+			plain: [
+				"no-underline",
+				"hover:underline",
+				"disabled:hover:no-underline",
+				"aria-disabled:hover:no-underline"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: linkDefaultVariants.colorScheme,
+		variant: linkDefaultVariants.variant
+	}
+});
+//#endregion
+export { linkDefaultVariants, linkVariants };
+
+//# sourceMappingURL=link-variants.js.map

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

@@ -0,0 +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 '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/link/link.d.ts

@@ -0,0 +1,50 @@
+import { LinkVariants } from "./link-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/link/link.d.ts
+/**
+ * Props do `Link`: as variantes visuais, o `external` e as props do elemento renderizado.
+ */
+export type LinkProps = MergeOverride<useRender.ComponentProps<'a'>, LinkVariants & {
+  /**
+   * Abre o link em nova aba: acrescenta `target="_blank"` e `rel="noopener noreferrer"` (as props
+   * recebidas vencem), o ícone de link externo e o aviso "(abre em nova aba)" para o leitor de
+   * tela.
+   *
+   * @default false
+   */
+  external?: boolean;
+}>;
+/**
+ * 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>
+ * ```
+ */
+export declare const Link: {
+  (props: LinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=link.d.ts.map