npm - @lucasbernardosn/react-ui - Versions diffs - 0.1.0 → 0.2.0 - Mend

@lucasbernardosn/react-ui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/dist/components/overlays/menu/menu-group-label.js CHANGED Viewed

@@ -23,7 +23,7 @@ const MenuGroupLabel = (props) => {
 			"pt-2",
 			"pb-1",
 			"text-gray-11",
-			"font-semibold",
+			"font-medium",
 			"uppercase",
 			"tracking-wider",
 			"ps-2.5",

package/dist/components/overlays/menu/menu-group-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-group-label.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-group-label.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuGroupLabelProps = BaseMenu.GroupLabel.Props;\n\nexport type MenuGroupLabelState = BaseMenu.GroupLabel.State;\n\n/*\n Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu\n * enquanto o grupo rola.\n \n Cópia de `selectGroupLabelVariants` (tabela no README de `collections`). A diferença é o recuo:\n * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos\n * itens. Mudar o espaçamento do item pede mudar este valor.\n */\nexport const MenuGroupLabel = (props: MenuGroupLabelProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseMenu.GroupLabel\n data-component=\"Menu.GroupLabel\"\n className={mergeStateClassNames(\n [\n 'sticky',\n 'top-0',\n 'z-1',\n\n // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n 'bg-white',\n 'dark:bg-gray-2',\n\n 'pt-2',\n 'pb-1',\n\n 'text-gray-11',\n 'font-~~semibold~~',\n 'uppercase',\n 'tracking-wider',\n\n 'ps-2.5',\n 'pe-2.5',\n\n 'text-[0.6875rem]', // 11px\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nMenuGroupLabel.displayName = 'Menu.GroupLabel';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAGA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
1	+ {"version":3,"file":"menu-group-label.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-group-label.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuGroupLabelProps = BaseMenu.GroupLabel.Props;\n\nexport type MenuGroupLabelState = BaseMenu.GroupLabel.State;\n\n/*\n Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu\n * enquanto o grupo rola.\n \n Cópia de `selectGroupLabelVariants` (tabela no README de `collections`). A diferença é o recuo:\n * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos\n * itens. Mudar o espaçamento do item pede mudar este valor.\n */\nexport const MenuGroupLabel = (props: MenuGroupLabelProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseMenu.GroupLabel\n data-component=\"Menu.GroupLabel\"\n className={mergeStateClassNames(\n [\n 'sticky',\n 'top-0',\n 'z-1',\n\n // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n 'bg-white',\n 'dark:bg-gray-2',\n\n 'pt-2',\n 'pb-1',\n\n 'text-gray-11',\n 'font-medium',\n 'uppercase',\n 'tracking-wider',\n\n 'ps-2.5',\n 'pe-2.5',\n\n 'text-[0.6875rem]', // 11px\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nMenuGroupLabel.displayName = 'Menu.GroupLabel';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAGA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/popover/popover-description.js CHANGED Viewed

@@ -11,6 +11,7 @@ const PopoverDescription = (props) => {
 		"data-component": "Popover.Description",
 		className: mergeStateClassNames([
 			"text-sm",
+			"leading-5",
 			"text-gray-11",
 			"text-pretty"
 		], className),

package/dist/components/overlays/popover/popover-description.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-description.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-description.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverDescriptionProps = BasePopover.Description.Props;\n\nexport type PopoverDescriptionState = BasePopover.Description.State;\n\n/*\n Texto de apoio do popover, ligado ao popup por `aria-describedby`.\n */\nexport const PopoverDescription = (props: PopoverDescriptionProps) => {\n const { className, ...rest } = props;\n\n return (\n <BasePopover.Description\n data-component=\"Popover.Description\"\n className={mergeStateClassNames(\n ['text-sm', 'text-gray-11', 'text-pretty'],\n className,\n )}\n {...rest}\n />\n );\n};\n\nPopoverDescription.displayName = 'Popover.Description';\n"],"mappings":";;;;;;;AAUA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,aAAb;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAgB;EAAa,~~GACzC~~,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}
1	+ {"version":3,"file":"popover-description.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-description.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverDescriptionProps = BasePopover.Description.Props;\n\nexport type PopoverDescriptionState = BasePopover.Description.State;\n\n/*\n Texto de apoio do popover, ligado ao popup por `aria-describedby`.\n */\nexport const PopoverDescription = (props: PopoverDescriptionProps) => {\n const { className, ...rest } = props;\n\n return (\n <BasePopover.Description\n data-component=\"Popover.Description\"\n className={mergeStateClassNames(\n ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n className,\n )}\n {...rest}\n />\n );\n};\n\nPopoverDescription.displayName = 'Popover.Description';\n"],"mappings":";;;;;;;AAUA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,aAAb;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}

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

@@ -9,8 +9,8 @@
  * `scale` e `opacity` a partir de `--transform-origin`, o ponto do trigger que o Base UI escreve.
  * Com movimento reduzido só a transição sai: o popup aparece e some sem animar.
  *
- * O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px: um popup é
- * compacto e não muda de escala. Um popover com outro respiro o redeclara pela `className`.
+ * O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px, e um popover
+ * não tem `size`. Um popover com outro respiro o redeclara pela `className`.
  *
  * A altura para em `--available-height`, o espaço entre o trigger e a borda da tela. Acima disso,
  * o `Body` rola, e `Header` e `Footer` continuam visíveis.

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

@@ -10,8 +10,8 @@ import { cva } from "class-variance-authority";
 * `scale` e `opacity` a partir de `--transform-origin`, o ponto do trigger que o Base UI escreve.
 * Com movimento reduzido só a transição sai: o popup aparece e some sem animar.
 *
-* O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px: um popup é
-* compacto e não muda de escala. Um popover com outro respiro o redeclara pela `className`.
+* O respiro de `Header`, `Body` e `Footer` fica em `--popover-padding`, fixo em 16px, e um popover
+* não tem `size`. Um popover com outro respiro o redeclara pela `className`.
 *
 * A altura para em `--available-height`, o espaço entre o trigger e a borda da tela. Acima disso,
 * o `Body` rola, e `Header` e `Footer` continuam visíveis.

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

	@@ -1 +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` e o `Menu.Popup` copiam\n * estas classes, cada um com as suas diferenças (tabela no README de `overlays`). Uma mudança\n * 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: um ~~popup é\~~n * ~~compacto e~~ não ~~muda~~ de ~~escala.~~ 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"}
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` e o `Menu.Popup` copiam\n * estas classes, cada um com as suas diferenças (tabela no README de `overlays`). Uma mudança\n * 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"}

package/dist/components/overlays/popover/popover-title.d.ts CHANGED Viewed

@@ -3,9 +3,8 @@ import { Popover } from "@base-ui/react/popover";
 export type PopoverTitleProps = Popover.Title.Props;
 export type PopoverTitleState = Popover.Title.State;
 /**
- * Título do popover, ligado ao popup por `aria-labelledby`. Fica no tamanho do texto do popup
- * (`sm`), e não na escala de título e descrição dos outros componentes: um popup é mais compacto
- * que um card, e o peso e a cor já separam o título da descrição.
+ * Título do popover, ligado ao popup por `aria-labelledby`, com as mesmas classes do título dos
+ * outros componentes.
  */
 export declare const PopoverTitle: {
   (props: PopoverTitleProps): import("react").JSX.Element;

package/dist/components/overlays/popover/popover-title.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-title.d.ts","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-title.tsx"],"mappings":";;YAGY,oBAAoBA,QAAY,MAAM;YAEtC,oBAAoBA,QAAY,MAAM~~;;;;;;qBAOrC~~;GAAuB,OAAA,oCAAiB,IAAA"}
1	+ {"version":3,"file":"popover-title.d.ts","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-title.tsx"],"mappings":";;YAGY,oBAAoBA,QAAY,MAAM;YAEtC,oBAAoBA,QAAY,MAAM;;;;;qBAMrC;GAAuB,OAAA,oCAAiB,IAAA"}

package/dist/components/overlays/popover/popover-title.js CHANGED Viewed

@@ -3,18 +3,19 @@ import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/overlays/popover/popover-title.tsx
 /**
-* Título do popover, ligado ao popup por `aria-labelledby`. Fica no tamanho do texto do popup
-* (`sm`), e não na escala de título e descrição dos outros componentes: um popup é mais compacto
-* que um card, e o peso e a cor já separam o título da descrição.
+* Título do popover, ligado ao popup por `aria-labelledby`, com as mesmas classes do título dos
+* outros componentes.
 */
 const PopoverTitle = (props) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(Popover.Title, {
 		"data-component": "Popover.Title",
 		className: mergeStateClassNames([
-			"font-semibold",
+			"text-base",
+			"leading-6",
 			"text-gray-12",
-			"text-balance"
+			"text-balance",
+			"font-medium"
 		], className),
 		...rest
 	});

package/dist/components/overlays/popover/popover-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-title.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-title.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverTitleProps = BasePopover.Title.Props;\n\nexport type PopoverTitleState = BasePopover.Title.State;\n\n/*\n Título do popover, ligado ao popup por `aria-labelledby`. ~~Fica~~ no ~~tamanho~~ do ~~texto~~ do ~~popup\n * (`sm`), e não na escala de~~ título ~~e descrição~~ dos ~~outros componentes: um popup é mais compacto~~\n * ~~que~~ ~~um card, e o peso e a cor já separam o título da descrição~~.\n */\nexport const PopoverTitle = (props: PopoverTitleProps) => {\n const { className, ...rest } = props;\n\n return (\n <BasePopover.Title\n data-component=\"Popover.Title\"\n className={mergeStateClassNames(\n ['~~font~~-~~semibold~~', 'text-gray-12', 'text-balance'],\n className,\n )}\n {...rest}\n />\n );\n};\n\nPopoverTitle.displayName = 'Popover.Title';\n"],"mappings":"~~;;;;;;;;;AAYA~~,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;~~GAAC~~;~~GAAiB~~;~~GAAgB~~;~~EAAc~~,~~GAChD~~,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"popover-title.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-title.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverTitleProps = BasePopover.Title.Props;\n\nexport type PopoverTitleState = BasePopover.Title.State;\n\n/*\n Título do popover, ligado ao popup por `aria-labelledby`, com as mesmas classes do título dos\n * outros componentes.\n */\nexport const PopoverTitle = (props: PopoverTitleProps) => {\n const { className, ...rest } = props;\n\n return (\n <BasePopover.Title\n data-component=\"Popover.Title\"\n className={mergeStateClassNames(\n [\n 'text-base',\n 'leading-6',\n 'text-gray-12',\n 'text-balance',\n\n 'font-medium',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nPopoverTitle.displayName = 'Popover.Title';\n"],"mappings":";;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/overlays/tooltip/tooltip-popup.js CHANGED Viewed

@@ -18,7 +18,7 @@ const TooltipPopup = (props) => {
 			"h-(--popup-height,auto)",
 			"w-(--popup-width,auto)",
 			"max-w-xs",
-			"[--tooltip-padding-x:--spacing(2.5)]",
+			"[--tooltip-padding-x:--spacing(2)]",
 			"px-(--tooltip-padding-x)",
 			"py-1",
 			"rounded-sm",

package/dist/components/overlays/tooltip/tooltip-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-popup.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipPopupProps = BaseTooltip.Popup.Props;\n\nexport type TooltipPopupState = BaseTooltip.Popup.State;\n\n/*\n Caixa da dica, invertida em relação à página (escura no tema claro, clara no escuro), até\n * `max-w-xs`. Quando a mesma dica passa de um trigger a outro (com `handle`), a largura e a\n * altura animam até as do novo conteúdo, junto com o deslize do `Tooltip.Positioner`.\n */\nexport const TooltipPopup = (props: TooltipPopupProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseTooltip.Popup\n data-component=\"Tooltip.Popup\"\n className={mergeStateClassNames(\n [\n 'relative',\n 'flex',\n 'flex-col',\n\n 'h-(--popup-height,auto)',\n 'w-(--popup-width,auto)',\n\n 'max-w-xs',\n\n // O `Tooltip.Viewport` desconta este padding da largura do conteúdo.\n '[--tooltip-padding-x:--spacing(2.5)]',\n 'px-(--tooltip-padding-x)',\n 'py-1',\n\n 'rounded-sm',\n 'corner-squircle',\n\n // Invertida: escura no tema claro, clara no escuro.\n 'bg-gray-12',\n 'text-gray-1',\n\n 'shadow-md',\n 'shadow-black/12',\n 'dark:shadow-none',\n\n 'text-xs',\n 'font-medium',\n\n 'origin-(--transform-origin)',\n\n 'not-motion-reduced:ease-enter',\n 'not-motion-reduced:duration-100',\n // `scale`, não `transform`: o `scale-98` escreve a propriedade `scale`,\n // e com `transform` só a opacidade animaria.\n 'not-motion-reduced:transition-[width,height,scale,opacity]',\n 'not-motion-reduced:data-ending-style:ease-exit',\n 'not-motion-reduced:data-ending-style:duration-75',\n\n 'not-motion-reduced:data-ending-style:scale-98',\n 'not-motion-reduced:data-starting-style:scale-98',\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n\n 'data-instant:transition-none',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nTooltipPopup.displayName = 'Tooltip.Popup';\n"],"mappings":";;;;;;;;;AAYA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAGA;GACA;GACA;GAEA;GACA;GAGA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"tooltip-popup.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-popup.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipPopupProps = BaseTooltip.Popup.Props;\n\nexport type TooltipPopupState = BaseTooltip.Popup.State;\n\n/*\n Caixa da dica, invertida em relação à página (escura no tema claro, clara no escuro), até\n * `max-w-xs`. Quando a mesma dica passa de um trigger a outro (com `handle`), a largura e a\n * altura animam até as do novo conteúdo, junto com o deslize do `Tooltip.Positioner`.\n */\nexport const TooltipPopup = (props: TooltipPopupProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseTooltip.Popup\n data-component=\"Tooltip.Popup\"\n className={mergeStateClassNames(\n [\n 'relative',\n 'flex',\n 'flex-col',\n\n 'h-(--popup-height,auto)',\n 'w-(--popup-width,auto)',\n\n 'max-w-xs',\n\n // O `Tooltip.Viewport` desconta este padding da largura do conteúdo.\n '[--tooltip-padding-x:--spacing(2)]',\n 'px-(--tooltip-padding-x)',\n 'py-1',\n\n 'rounded-sm',\n 'corner-squircle',\n\n // Invertida: escura no tema claro, clara no escuro.\n 'bg-gray-12',\n 'text-gray-1',\n\n 'shadow-md',\n 'shadow-black/12',\n 'dark:shadow-none',\n\n 'text-xs',\n 'font-medium',\n\n 'origin-(--transform-origin)',\n\n 'not-motion-reduced:ease-enter',\n 'not-motion-reduced:duration-100',\n // `scale`, não `transform`: o `scale-98` escreve a propriedade `scale`,\n // e com `transform` só a opacidade animaria.\n 'not-motion-reduced:transition-[width,height,scale,opacity]',\n 'not-motion-reduced:data-ending-style:ease-exit',\n 'not-motion-reduced:data-ending-style:duration-75',\n\n 'not-motion-reduced:data-ending-style:scale-98',\n 'not-motion-reduced:data-starting-style:scale-98',\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n\n 'data-instant:transition-none',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nTooltipPopup.displayName = 'Tooltip.Popup';\n"],"mappings":";;;;;;;;;AAYA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,OAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAGA;GACA;GACA;GAEA;GACA;GAGA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/typography/heading/heading.js CHANGED Viewed

@@ -27,7 +27,7 @@ const Heading = (props) => {
 		className: mergeTwClassNames([
 			"text-gray-12",
 			"text-xl",
-			"font-semibold",
+			"font-medium",
 			"text-balance"
 		], className)
 	};

package/dist/components/typography/heading/heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"heading.js","names":[],"sources":["../../../../src/components/typography/heading/heading.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\n/*\n Props do `Heading`.\n /\nexport type HeadingProps = MergeOverride<\n useRender.ComponentProps<'h2'>,\n {\n /\n Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência:\n * o tamanho vem por `className`. Com `render`, a tag do `render` prevalece.\n \n @default 2\n /\n level?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n }\n>;\n\n/\n Título de seção.\n \n O nível do título é uma decisão de estrutura do documento, não de\n * aparência: escolha o `level` pela hierarquia da página e ajuste o tamanho\n * por `className`.\n \n @example\n * ```tsx\n * <Heading>Configurações</Heading>\n \n <Heading\n * level={1}\n * className=\"text-2xl\"\n * >\n * Título da página\n * </Heading>\n * ```\n */\nexport const Heading = (props: HeadingProps) => {\n const { level = 2, render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Heading',\n className: mergeTwClassNames(\n ['text-gray-12', 'text-xl', 'font-~~semibold~~', 'text-balance'],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: `h${level}`,\n props: mergeProps(baseProps, rest),\n });\n};\n\nHeading.displayName = 'Heading';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAgB;GAAW;~~GAAiB~~;EAAc,~~GAC3D~~,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}
1	+ {"version":3,"file":"heading.js","names":[],"sources":["../../../../src/components/typography/heading/heading.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\n/*\n Props do `Heading`.\n /\nexport type HeadingProps = MergeOverride<\n useRender.ComponentProps<'h2'>,\n {\n /\n Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência:\n * o tamanho vem por `className`. Com `render`, a tag do `render` prevalece.\n \n @default 2\n /\n level?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n }\n>;\n\n/\n Título de seção.\n \n O nível do título é uma decisão de estrutura do documento, não de\n * aparência: escolha o `level` pela hierarquia da página e ajuste o tamanho\n * por `className`.\n \n @example\n * ```tsx\n * <Heading>Configurações</Heading>\n \n <Heading\n * level={1}\n * className=\"text-2xl\"\n * >\n * Título da página\n * </Heading>\n * ```\n */\nexport const Heading = (props: HeadingProps) => {\n const { level = 2, render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Heading',\n className: mergeTwClassNames(\n ['text-gray-12', 'text-xl', 'font-medium', 'text-balance'],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: `h${level}`,\n props: mergeProps(baseProps, rest),\n });\n};\n\nHeading.displayName = 'Heading';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAgB;GAAW;GAAe;EAAc,GACzD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}

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

@@ -29,7 +29,7 @@ export declare const kbdDefaultVariants: Required<KbdVariants>;
  */
 export declare const kbdVariants: (props?: ({
   colorScheme?: "gray" | "brand" | null | undefined;
-  variant?: "outline" | "subtle" | "plain" | "raised" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "raised" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -53,8 +53,8 @@ const kbdVariants = cva([
 		},
 		size: {
 			sm: [
-				"h-4.5",
-				"min-w-4.5",
+				"h-4",
+				"min-w-4",
 				"text-xs"
 			],
 			md: [

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

	@@ -1 +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.5',\n 'min-w-4.5',\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"}
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"}

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

@@ -26,7 +26,7 @@ export declare const markDefaultVariants: Required<MarkVariants>;
  */
 export declare const markVariants: (props?: ({
   colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
-  variant?: "text" | "subtle" | "solid" | "plain" | null | undefined;
+  variant?: "text" | "solid" | "subtle" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=mark-variants.d.ts.map

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

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

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

@@ -55,12 +55,14 @@ const markVariants = cva([
 			subtle: [
 				"px-0.5",
 				"rounded-sm",
+				"corner-squircle",
 				"box-decoration-clone",
 				"bg-(--mark-subtle-bg)"
 			],
 			solid: [
 				"px-0.5",
 				"rounded-sm",
+				"corner-squircle",
 				"box-decoration-clone",
 				"bg-(--mark-solid-bg)",
 				"text-white"

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

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

package/dist/components/typography/pre/pre-variants.d.ts CHANGED Viewed

@@ -7,12 +7,6 @@ export type PreVariants = {
    * @default 'gray'
    */
   colorScheme?: ColorSchemeSemantic;
-  /**
-   * Tamanho do texto, respiro interno e arredondamento.
-   *
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg';
   /**
    * Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com
    * a borda e `plain` sem fundo nem borda.
@@ -31,8 +25,7 @@ export declare const preDefaultVariants: Required<PreVariants>;
  */
 export declare const preVariants: (props?: ({
   colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
-  variant?: "outline" | "subtle" | "surface" | "plain" | null | undefined;
-  size?: "sm" | "md" | "lg" | null | undefined;
+  variant?: "subtle" | "surface" | "outline" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=pre-variants.d.ts.map

package/dist/components/typography/pre/pre-variants.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pre-variants.d.ts","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc~~;;;;;;EAMd~~;;;;;;;~~EAOA~~;;qBAGW,oBAAoB,SAAS;;;;;;;;~~qBAa7B~~,cAAW~~;;;;6CA6GvB~~"}
1	+ {"version":3,"file":"pre-variants.d.ts","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;;EAOd;;qBAGW,oBAAoB,SAAS;;;;;;;;qBAY7B,cAAW;;;6CAwFvB"}

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

@@ -2,7 +2,6 @@ import { cva } from "class-variance-authority";
 //#region src/components/typography/pre/pre-variants.ts
 const preDefaultVariants = {
 	colorScheme: "gray",
-	size: "md",
 	variant: "surface"
 };
 /**
@@ -14,6 +13,11 @@ const preDefaultVariants = {
 */
 const preVariants = cva([
 	"block",
+	"rounded-md",
+	"corner-squircle",
+	"text-sm",
+	"px-4",
+	"py-2",
 	"min-w-0",
 	"max-w-full",
 	"overflow-x-auto",
@@ -23,7 +27,7 @@ const preVariants = cva([
 	"font-mono",
 	"whitespace-pre",
 	"wrap-break-word",
-	"[tab-size:2]",
+	"tab-2",
 	"outline-none",
 	"ring-(--pre-fg)",
 	"focus-ring-inside"
@@ -72,31 +76,10 @@ const preVariants = cva([
 			subtle: ["border-transparent", "bg-(--pre-subtle-bg)"],
 			outline: ["border-(--pre-border)", "bg-transparent"],
 			plain: ["border-transparent", "bg-transparent"]
-		},
-		size: {
-			sm: [
-				"px-3",
-				"py-2",
-				"rounded-md",
-				"text-xs"
-			],
-			md: [
-				"px-4",
-				"py-3",
-				"rounded-lg",
-				"text-sm"
-			],
-			lg: [
-				"px-5",
-				"py-4",
-				"rounded-xl",
-				"text-base"
-			]
 		}
 	},
 	defaultVariants: {
 		colorScheme: preDefaultVariants.colorScheme,
-		size: preDefaultVariants.size,
 		variant: preDefaultVariants.variant
 	}
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pre-variants.js","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type PreVariants = {\n /*\n Cor do texto, do fundo e da borda do bloco.\n \n @default 'gray'\n /\n colorScheme?: ColorSchemeSemantic;\n /\n Tamanho do texto, respiro interno e arredondamento.\n \n @default 'md'\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com\n * a borda e `plain` sem fundo nem borda.\n \n @default 'surface'\n /\n variant?: 'surface' \| 'subtle' \| 'outline' \| 'plain';\n};\n\nexport const preDefaultVariants: Required<PreVariants> = {\n colorScheme: 'gray',\n ~~size: 'md',\n~~ variant: 'surface',\n};\n\n/\n A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a\n * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n \n Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho\n * do bloco, e o anel de foco tem onde pintar.\n */\nexport const preVariants = cva(\n [\n 'block',\n\n // Sem o `min-w-0`, uma linha longa dentro de um pai flex ou grid alarga o\n // pai em vez de rolar dentro do bloco.\n 'min-w-0',\n 'max-w-full',\n 'overflow-x-auto',\n\n 'border',\n\n 'corner-squircle',\n\n 'text-(--pre-fg)',\n\n 'font-mono',\n 'whitespace-pre',\n // Sem efeito com `whitespace-pre`. Com `whitespace-pre-wrap`, quebra também\n // o token sem espaço (uma URL, um hash), que senão volta a rolar.\n 'wrap-break-word',\n // O padrão do navegador é 8, largo demais para código indentado com tab.\n '[tab-~~size:~~2]',\n\n 'outline-none',\n // O anel herda a cor do texto, que já contrasta com o fundo em qualquer\n // variante e esquema.\n 'ring-(--pre-fg)',\n 'focus-ring-inside',\n ],\n {\n variants: {\n colorScheme: {\n gray: [\n '[--pre-surface-bg:var(--color-gray-2)]',\n '[--pre-subtle-bg:var(--color-gray-3)]',\n '[--pre-border:var(--color-gray-alpha-6)]',\n '[--pre-fg:var(--color-gray-12)]',\n ],\n brand: [\n '[--pre-surface-bg:var(--color-brand-2)]',\n '[--pre-subtle-bg:var(--color-brand-3)]',\n '[--pre-border:var(--color-brand-alpha-6)]',\n '[--pre-fg:var(--color-brand-12)]',\n ],\n red: [\n '[--pre-surface-bg:var(--color-red-2)]',\n '[--pre-subtle-bg:var(--color-red-3)]',\n '[--pre-border:var(--color-red-alpha-6)]',\n '[--pre-fg:var(--color-red-12)]',\n ],\n green: [\n '[--pre-surface-bg:var(--color-green-2)]',\n '[--pre-subtle-bg:var(--color-green-3)]',\n '[--pre-border:var(--color-green-alpha-6)]',\n '[--pre-fg:var(--color-green-12)]',\n ],\n amber: [\n '[--pre-surface-bg:var(--color-amber-2)]',\n '[--pre-subtle-bg:var(--color-amber-3)]',\n '[--pre-border:var(--color-amber-alpha-6)]',\n '[--pre-fg:var(--color-amber-12)]',\n ],\n blue: [\n '[--pre-surface-bg:var(--color-blue-2)]',\n '[--pre-subtle-bg:var(--color-blue-3)]',\n '[--pre-border:var(--color-blue-alpha-6)]',\n '[--pre-fg:var(--color-blue-12)]',\n ],\n },\n variant: {\n surface: ['border-(--pre-border)', 'bg-(--pre-surface-bg)'],\n subtle: ['border-transparent', 'bg-(--pre-subtle-bg)'],\n outline: ['border-(--pre-border)', 'bg-transparent'],\n plain: ['border-transparent', 'bg-transparent'],\n },\n size: {\n sm: [\n 'px-3',\n 'py-2',\n\n 'rounded-md',\n\n 'text-xs',\n ],\n md: [\n 'px-4',\n 'py-3',\n\n 'rounded-lg',\n\n 'text-sm',\n ],\n lg: [\n 'px-5',\n 'py-4',\n\n 'rounded-xl',\n\n 'text-base',\n ],\n },\n },\n defaultVariants: {\n colorScheme: preDefaultVariants.colorScheme,\n ~~size: preDefaultVariants.size,\n~~ variant: preDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;~~AAyBA~~,MAAa,qBAA4C;CACvD,aAAa;CACb,~~MAAM;CACN,~~SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;CAIA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;CAGA;CAEA;CAEA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,yBAAyB,uBAAuB;GAC1D,QAAQ,CAAC,sBAAsB,sBAAsB;GACrD,SAAS,CAAC,yBAAyB,gBAAgB;GACnD,OAAO,CAAC,sBAAsB,gBAAgB;EAChD;~~EACA,MAAM;GACJ,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;EACF;~~CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,~~MAAM,mBAAmB;EACzB,~~SAAS,mBAAmB;CAC9B;AACF,CACF"}
1	+ {"version":3,"file":"pre-variants.js","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type PreVariants = {\n /*\n Cor do texto, do fundo e da borda do bloco.\n \n @default 'gray'\n /\n colorScheme?: ColorSchemeSemantic;\n /\n Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com\n * a borda e `plain` sem fundo nem borda.\n \n @default 'surface'\n /\n variant?: 'surface' \| 'subtle' \| 'outline' \| 'plain';\n};\n\nexport const preDefaultVariants: Required<PreVariants> = {\n colorScheme: 'gray',\n variant: 'surface',\n};\n\n/\n A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a\n * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n \n Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho\n * do bloco, e o anel de foco tem onde pintar.\n */\nexport const preVariants = cva(\n [\n 'block',\n\n 'rounded-md',\n 'corner-squircle',\n 'text-sm',\n 'px-4',\n 'py-2',\n\n // Sem o `min-w-0`, uma linha longa dentro de um pai flex ou grid alarga o\n // pai em vez de rolar dentro do bloco.\n 'min-w-0',\n 'max-w-full',\n 'overflow-x-auto',\n\n 'border',\n\n 'corner-squircle',\n\n 'text-(--pre-fg)',\n\n 'font-mono',\n 'whitespace-pre',\n // Sem efeito com `whitespace-pre`. Com `whitespace-pre-wrap`, quebra também\n // o token sem espaço (uma URL, um hash), que senão volta a rolar.\n 'wrap-break-word',\n // O padrão do navegador é 8, largo demais para código indentado com tab.\n 'tab-2',\n\n 'outline-none',\n // O anel herda a cor do texto, que já contrasta com o fundo em qualquer\n // variante e esquema.\n 'ring-(--pre-fg)',\n 'focus-ring-inside',\n ],\n {\n variants: {\n colorScheme: {\n gray: [\n '[--pre-surface-bg:var(--color-gray-2)]',\n '[--pre-subtle-bg:var(--color-gray-3)]',\n '[--pre-border:var(--color-gray-alpha-6)]',\n '[--pre-fg:var(--color-gray-12)]',\n ],\n brand: [\n '[--pre-surface-bg:var(--color-brand-2)]',\n '[--pre-subtle-bg:var(--color-brand-3)]',\n '[--pre-border:var(--color-brand-alpha-6)]',\n '[--pre-fg:var(--color-brand-12)]',\n ],\n red: [\n '[--pre-surface-bg:var(--color-red-2)]',\n '[--pre-subtle-bg:var(--color-red-3)]',\n '[--pre-border:var(--color-red-alpha-6)]',\n '[--pre-fg:var(--color-red-12)]',\n ],\n green: [\n '[--pre-surface-bg:var(--color-green-2)]',\n '[--pre-subtle-bg:var(--color-green-3)]',\n '[--pre-border:var(--color-green-alpha-6)]',\n '[--pre-fg:var(--color-green-12)]',\n ],\n amber: [\n '[--pre-surface-bg:var(--color-amber-2)]',\n '[--pre-subtle-bg:var(--color-amber-3)]',\n '[--pre-border:var(--color-amber-alpha-6)]',\n '[--pre-fg:var(--color-amber-12)]',\n ],\n blue: [\n '[--pre-surface-bg:var(--color-blue-2)]',\n '[--pre-subtle-bg:var(--color-blue-3)]',\n '[--pre-border:var(--color-blue-alpha-6)]',\n '[--pre-fg:var(--color-blue-12)]',\n ],\n },\n variant: {\n surface: ['border-(--pre-border)', 'bg-(--pre-surface-bg)'],\n subtle: ['border-transparent', 'bg-(--pre-subtle-bg)'],\n outline: ['border-(--pre-border)', 'bg-transparent'],\n plain: ['border-transparent', 'bg-transparent'],\n },\n },\n defaultVariants: {\n colorScheme: preDefaultVariants.colorScheme,\n variant: preDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AAmBA,MAAa,qBAA4C;CACvD,aAAa;CACb,SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;CAGA;CAEA;CAEA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,yBAAyB,uBAAuB;GAC1D,QAAQ,CAAC,sBAAsB,sBAAsB;GACrD,SAAS,CAAC,yBAAyB,gBAAgB;GACnD,OAAO,CAAC,sBAAsB,gBAAgB;EAChD;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,SAAS,mBAAmB;CAC9B;AACF,CACF"}

package/dist/components/typography/pre/pre.js CHANGED Viewed

@@ -28,11 +28,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const Pre = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, [
-		"colorScheme",
-		"size",
-		"variant"
-	]);
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "variant"]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "Pre",

package/dist/components/typography/pre/pre.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pre.js","names":[],"sources":["../../../../src/components/typography/pre/pre.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type PreVariants, preVariants } from './pre-variants';\n\n/*\n Props do `Pre`: as variantes visuais e as props do elemento renderizado.\n /\nexport type PreProps = MergeOverride<\n useRender.ComponentProps<'pre'>,\n PreVariants\n>;\n\nconst splitVariantProps = createSplitProps<PreVariants>();\n\n/\n Bloco de texto pré-formatado: trecho de código, log, saída de terminal.\n \n Mantém espaços e quebras de linha, e uma linha longa rola na horizontal\n * dentro do bloco. Para quebrar a linha em vez de rolar, use\n * `className=\"whitespace-pre-wrap\"`; o `wrap-break-word` da base quebra também\n * o token sem espaço.\n \n Sai com `tabIndex={0}` para a rolagem funcionar pelo teclado; num bloco que\n * nunca rola, `tabIndex={-1}` tira a parada do `Tab`.\n \n @example\n * ```tsx\n * <Pre>{`pnpm add @lucasbernardosn/react-ui`}</Pre>\n \n <Pre\n * variant=\"subtle\"\n * colorScheme=\"red\"\n * >\n * {log}\n * </Pre>\n * ```\n */\nexport const Pre = (props: PreProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'colorScheme',\n '~~size',\n '~~variant',\n ]);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'Pre',\n tabIndex: 0,\n className: mergeTwClassNames(preVariants(variantProps), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'pre',\n props: mergeProps(baseProps, rest),\n });\n};\n\nPre.displayName = 'Pre';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;;;;;;AAyBxD,MAAa,OAAO,UAAoB;CACtC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO~~;EAC5D;EACA;EACA;CACF~~,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,UAAU;EACV,WAAW,kBAAkB,YAAY,YAAY,GAAG,SAAS;CACnE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}
1	+ {"version":3,"file":"pre.js","names":[],"sources":["../../../../src/components/typography/pre/pre.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type PreVariants, preVariants } from './pre-variants';\n\n/*\n Props do `Pre`: as variantes visuais e as props do elemento renderizado.\n /\nexport type PreProps = MergeOverride<\n useRender.ComponentProps<'pre'>,\n PreVariants\n>;\n\nconst splitVariantProps = createSplitProps<PreVariants>();\n\n/\n Bloco de texto pré-formatado: trecho de código, log, saída de terminal.\n \n Mantém espaços e quebras de linha, e uma linha longa rola na horizontal\n * dentro do bloco. Para quebrar a linha em vez de rolar, use\n * `className=\"whitespace-pre-wrap\"`; o `wrap-break-word` da base quebra também\n * o token sem espaço.\n \n Sai com `tabIndex={0}` para a rolagem funcionar pelo teclado; num bloco que\n * nunca rola, `tabIndex={-1}` tira a parada do `Tab`.\n \n @example\n * ```tsx\n * <Pre>{`pnpm add @lucasbernardosn/react-ui`}</Pre>\n \n <Pre\n * variant=\"subtle\"\n * colorScheme=\"red\"\n * >\n * {log}\n * </Pre>\n * ```\n */\nexport const Pre = (props: PreProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'colorScheme',\n 'variant',\n ]);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'Pre',\n tabIndex: 0,\n className: mergeTwClassNames(preVariants(variantProps), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'pre',\n props: mergeProps(baseProps, rest),\n });\n};\n\nPre.displayName = 'Pre';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;;;;;;AAyBxD,MAAa,OAAO,UAAoB;CACtC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,UAAU;EACV,WAAW,kBAAkB,YAAY,YAAY,GAAG,SAAS;CACnE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lucasbernardosn/react-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React component library built with TypeScript and Tailwind CSS, designed to provide a comprehensive set of customizable UI components for modern web applications.",
   "type": "module",
   "imports": {
@@ -34,7 +34,7 @@
   "dependencies": {
     "@base-ui/react": "1.9.0",
     "@base-ui/utils": "0.5.0",
-    "@lucasbernardosn/utils": "^0.1.0",
+    "@lucasbernardosn/utils": "^0.2.0",
     "@phosphor-icons/react": "2.1.10",
     "@zag-js/clipboard": "1.44.0",
     "@zag-js/collection": "1.44.0",
@@ -52,8 +52,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.15",
-    "@lucasbernardosn/react-utils": "0.1.0",
-    "@lucasbernardosn/tsconfig": "1.0.0",
+    "@lucasbernardosn/react-utils": "0.2.0",
+    "@lucasbernardosn/tsconfig": "0.2.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "14.6.7",
@@ -71,7 +71,7 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-utils": "^0.1.0",
+    "@lucasbernardosn/react-utils": "^0.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },