@lucasbernardosn/react-ui 0.2.0 → 0.4.0

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` 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"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"popover-root.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-root.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type PopoverRootProps<Payload = unknown> =\n  BasePopover.Root.Props<Payload>;\n\nexport type PopoverRootState = BasePopover.Root.State;\n\nexport type PopoverRootActions = BasePopover.Root.Actions;\n\nexport type PopoverRootChangeEventDetails = BasePopover.Root.ChangeEventDetails;\n\nexport type PopoverRootChangeEventReason = BasePopover.Root.ChangeEventReason;\n\n/**\n * Estado do popover. Não renderiza elemento.\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger render={<Button />}>Abrir</Popover.Trigger>\n *   <Popover.Portal>\n *     <Popover.Positioner>\n *       <Popover.Popup>\n *         <Popover.Arrow />\n *         <Popover.Header>\n *           <Popover.Title>Notificações</Popover.Title>\n *         </Popover.Header>\n *         <Popover.Body>…</Popover.Body>\n *       </Popover.Popup>\n *     </Popover.Positioner>\n *   </Popover.Portal>\n * </Popover.Root>\n * ```\n */\nexport const PopoverRoot = <Payload extends AnyType = unknown>(\n  props: PopoverRootProps<Payload>,\n) => {\n  return <BasePopover.Root {...props} />;\n};\n\nPopoverRoot.displayName = 'Popover.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eACX,UACG;CACH,OAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,YAAY,cAAc"}
+{"version":3,"file":"popover-root.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-root.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\n\nexport type PopoverRootProps<Payload = unknown> =\n  BasePopover.Root.Props<Payload>;\n\nexport type PopoverRootState = BasePopover.Root.State;\n\nexport type PopoverRootActions = BasePopover.Root.Actions;\n\nexport type PopoverRootChangeEventDetails = BasePopover.Root.ChangeEventDetails;\n\nexport type PopoverRootChangeEventReason = BasePopover.Root.ChangeEventReason;\n\n/**\n * Estado do popover. Não renderiza elemento.\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger render={<Button />}>Abrir</Popover.Trigger>\n *   <Popover.Portal>\n *     <Popover.Positioner>\n *       <Popover.Popup>\n *         <Popover.Arrow />\n *         <Popover.Header>\n *           <Popover.Title>Notificações</Popover.Title>\n *         </Popover.Header>\n *         <Popover.Body>…</Popover.Body>\n *       </Popover.Popup>\n *     </Popover.Positioner>\n *   </Popover.Portal>\n * </Popover.Root>\n * ```\n */\nexport const PopoverRoot = <Payload extends AnyType = unknown>(\n  props: PopoverRootProps<Payload>,\n) => {\n  return <BasePopover.Root {...props} />;\n};\n\nPopoverRoot.displayName = 'Popover.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eACX,UACG;CACH,OAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,YAAY,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-trigger.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { AnyType } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverTriggerProps<Payload = unknown> =\n  BasePopover.Trigger.Props<Payload>;\n\nexport type PopoverTriggerState = BasePopover.Trigger.State;\n\n/**\n * Elemento que abre o popover. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const PopoverTrigger = <Payload extends AnyType = unknown>(\n  props: PopoverTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Trigger\n      data-component=\"Popover.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nPopoverTrigger.displayName = 'Popover.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,kBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,SAAb;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"popover-trigger.js","names":["BasePopover"],"sources":["../../../../src/components/overlays/popover/popover-trigger.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type PopoverTriggerProps<Payload = unknown> =\n  BasePopover.Trigger.Props<Payload>;\n\nexport type PopoverTriggerState = BasePopover.Trigger.State;\n\n/**\n * Elemento que abre o popover. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const PopoverTrigger = <Payload extends AnyType = unknown>(\n  props: PopoverTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BasePopover.Trigger\n      data-component=\"Popover.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nPopoverTrigger.displayName = 'Popover.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,kBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,SAAb;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/tooltip/simple-tooltip.d.ts

@@ -1,6 +1,6 @@
 import { TooltipRootProps } from "./tooltip-root.js";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/overlays/tooltip/simple-tooltip.d.ts
 export type SimpleTooltipProps = MergeOverride<TooltipRootProps, {
   /**

package/dist/components/overlays/tooltip/simple-tooltip.js

@@ -4,7 +4,7 @@ import { TooltipPortal } from "./tooltip-portal.js";
 import { TooltipPositioner } from "./tooltip-positioner.js";
 import { TooltipRoot } from "./tooltip-root.js";
 import { TooltipTrigger } from "./tooltip-trigger.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/tooltip/simple-tooltip.tsx
 const splitRootProps = createSplitProps();

package/dist/components/overlays/tooltip/simple-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-tooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/simple-tooltip.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type React from 'react';\nimport { TooltipArrow } from './tooltip-arrow';\nimport { TooltipPopup } from './tooltip-popup';\nimport { TooltipPortal } from './tooltip-portal';\nimport { TooltipPositioner } from './tooltip-positioner';\nimport { TooltipRoot, type TooltipRootProps } from './tooltip-root';\nimport { TooltipTrigger } from './tooltip-trigger';\n\nexport type SimpleTooltipProps = MergeOverride<\n  TooltipRootProps,\n  {\n    /**\n     * Conteúdo da dica: um texto curto, ou texto com um atalho (`Kbd`).\n     */\n    tooltip: React.ReactNode;\n    /**\n     * Elemento que abre a dica. Recebe as props do `Tooltip.Trigger` por `render`, então precisa\n     * repassar props e `ref` ao elemento do DOM.\n     */\n    children: React.ReactElement;\n    /**\n     * Quanto esperar, em milissegundos, antes de abrir a dica no hover.\n     *\n     * @default 600\n     */\n    delay?: number;\n    /**\n     * Fecha a dica quando o trigger é clicado.\n     *\n     * @default true\n     */\n    closeOnClick?: boolean;\n    /**\n     * Quanto esperar, em milissegundos, antes de fechar a dica.\n     *\n     * @default 0\n     */\n    closeDelay?: number;\n  }\n>;\n\nconst splitRootProps = createSplitProps<Omit<TooltipRootProps, 'children'>>();\n\n/**\n * Tooltip pronto: envolve o elemento em `children` e mostra `tooltip` no hover e no foco.\n *\n * No toque a dica não abre: o Base UI só abre pelo hover de mouse ou caneta e pelo foco. O\n * elemento precisa de nome acessível próprio, sem contar com a dica.\n *\n * Não envolve o resultado em `Tooltip.Provider`. Sem ele, cada tooltip é isolado: sair do trigger\n * e voltar rápido (ou passar por um tooltip vizinho) espera o `delay` inteiro de novo, em vez de\n * reabrir na hora. Para agrupar, envolva os `SimpleTooltip` num `Tooltip.Provider` no pai.\n *\n * @example\n * ```tsx\n * <SimpleTooltip tooltip=\"Excluir\">\n *   <IconButton\n *     aria-label=\"Excluir\"\n *     icon={<TrashIcon />}\n *   />\n * </SimpleTooltip>\n * ```\n */\nexport const SimpleTooltip = (props: SimpleTooltipProps) => {\n  const { children, tooltip, ...rest } = props;\n\n  const [rootProps, triggerProps] = splitRootProps(rest, [\n    'actionsRef',\n    'defaultOpen',\n    'defaultTriggerId',\n    'disabled',\n    'disableHoverablePopup',\n    'handle',\n    'onOpenChange',\n    'onOpenChangeComplete',\n    'open',\n    'trackCursorAxis',\n    'triggerId',\n  ]);\n\n  return (\n    <TooltipRoot {...rootProps}>\n      <TooltipTrigger\n        {...triggerProps}\n        render={children}\n      />\n\n      <TooltipPortal>\n        <TooltipPositioner>\n          <TooltipPopup>\n            <TooltipArrow />\n            {tooltip}\n          </TooltipPopup>\n        </TooltipPositioner>\n      </TooltipPortal>\n    </TooltipRoot>\n  );\n};\n\nSimpleTooltip.displayName = 'SimpleTooltip';\n"],"mappings":";;;;;;;;;AA0CA,MAAM,iBAAiB,iBAAqD;;;;;;;;;;;;;;;;;;;;;AAsB5E,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,UAAU,SAAS,GAAG,SAAS;CAEvC,MAAM,CAAC,WAAW,gBAAgB,eAAe,MAAM;EACrD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,aAAD;EAAa,GAAI;EAAjB,UAAA,CACE,oBAAC,gBAAD;GACE,GAAI;GACJ,QAAQ;EACT,CAAA,GAED,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACd,OACW,EAAA,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"simple-tooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/simple-tooltip.tsx"],"sourcesContent":["import {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport type React from 'react';\nimport { TooltipArrow } from './tooltip-arrow';\nimport { TooltipPopup } from './tooltip-popup';\nimport { TooltipPortal } from './tooltip-portal';\nimport { TooltipPositioner } from './tooltip-positioner';\nimport { TooltipRoot, type TooltipRootProps } from './tooltip-root';\nimport { TooltipTrigger } from './tooltip-trigger';\n\nexport type SimpleTooltipProps = MergeOverride<\n  TooltipRootProps,\n  {\n    /**\n     * Conteúdo da dica: um texto curto, ou texto com um atalho (`Kbd`).\n     */\n    tooltip: React.ReactNode;\n    /**\n     * Elemento que abre a dica. Recebe as props do `Tooltip.Trigger` por `render`, então precisa\n     * repassar props e `ref` ao elemento do DOM.\n     */\n    children: React.ReactElement;\n    /**\n     * Quanto esperar, em milissegundos, antes de abrir a dica no hover.\n     *\n     * @default 600\n     */\n    delay?: number;\n    /**\n     * Fecha a dica quando o trigger é clicado.\n     *\n     * @default true\n     */\n    closeOnClick?: boolean;\n    /**\n     * Quanto esperar, em milissegundos, antes de fechar a dica.\n     *\n     * @default 0\n     */\n    closeDelay?: number;\n  }\n>;\n\nconst splitRootProps = createSplitProps<Omit<TooltipRootProps, 'children'>>();\n\n/**\n * Tooltip pronto: envolve o elemento em `children` e mostra `tooltip` no hover e no foco.\n *\n * No toque a dica não abre: o Base UI só abre pelo hover de mouse ou caneta e pelo foco. O\n * elemento precisa de nome acessível próprio, sem contar com a dica.\n *\n * Não envolve o resultado em `Tooltip.Provider`. Sem ele, cada tooltip é isolado: sair do trigger\n * e voltar rápido (ou passar por um tooltip vizinho) espera o `delay` inteiro de novo, em vez de\n * reabrir na hora. Para agrupar, envolva os `SimpleTooltip` num `Tooltip.Provider` no pai.\n *\n * @example\n * ```tsx\n * <SimpleTooltip tooltip=\"Excluir\">\n *   <IconButton\n *     aria-label=\"Excluir\"\n *     icon={<TrashIcon />}\n *   />\n * </SimpleTooltip>\n * ```\n */\nexport const SimpleTooltip = (props: SimpleTooltipProps) => {\n  const { children, tooltip, ...rest } = props;\n\n  const [rootProps, triggerProps] = splitRootProps(rest, [\n    'actionsRef',\n    'defaultOpen',\n    'defaultTriggerId',\n    'disabled',\n    'disableHoverablePopup',\n    'handle',\n    'onOpenChange',\n    'onOpenChangeComplete',\n    'open',\n    'trackCursorAxis',\n    'triggerId',\n  ]);\n\n  return (\n    <TooltipRoot {...rootProps}>\n      <TooltipTrigger\n        {...triggerProps}\n        render={children}\n      />\n\n      <TooltipPortal>\n        <TooltipPositioner>\n          <TooltipPopup>\n            <TooltipArrow />\n            {tooltip}\n          </TooltipPopup>\n        </TooltipPositioner>\n      </TooltipPortal>\n    </TooltipRoot>\n  );\n};\n\nSimpleTooltip.displayName = 'SimpleTooltip';\n"],"mappings":";;;;;;;;;AA6CA,MAAM,iBAAiB,iBAAqD;;;;;;;;;;;;;;;;;;;;;AAsB5E,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,UAAU,SAAS,GAAG,SAAS;CAEvC,MAAM,CAAC,WAAW,gBAAgB,eAAe,MAAM;EACrD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,aAAD;EAAa,GAAI;EAAjB,UAAA,CACE,oBAAC,gBAAD;GACE,GAAI;GACJ,QAAQ;EACT,CAAA,GAED,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACd,OACW,EAAA,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,cAAc,cAAc"}

package/dist/components/overlays/tooltip/tooltip-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-root.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type TooltipRootProps<Payload = unknown> =\n  BaseTooltip.Root.Props<Payload>;\n\nexport type TooltipRootState = BaseTooltip.Root.State;\n\nexport type TooltipRootActions = BaseTooltip.Root.Actions;\n\nexport type TooltipRootChangeEventDetails = BaseTooltip.Root.ChangeEventDetails;\n\nexport type TooltipRootChangeEventReason = BaseTooltip.Root.ChangeEventReason;\n\n/**\n * Estado da dica. Não renderiza elemento.\n */\nexport const TooltipRoot = <Payload extends AnyType = unknown>(\n  props: TooltipRootProps<Payload>,\n) => {\n  return <BaseTooltip.Root {...props} />;\n};\n\nTooltipRoot.displayName = 'Tooltip.Root';\n"],"mappings":";;;;;;AAiBA,MAAa,eACX,UACG;CACH,OAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,YAAY,cAAc"}
+{"version":3,"file":"tooltip-root.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-root.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\n\nexport type TooltipRootProps<Payload = unknown> =\n  BaseTooltip.Root.Props<Payload>;\n\nexport type TooltipRootState = BaseTooltip.Root.State;\n\nexport type TooltipRootActions = BaseTooltip.Root.Actions;\n\nexport type TooltipRootChangeEventDetails = BaseTooltip.Root.ChangeEventDetails;\n\nexport type TooltipRootChangeEventReason = BaseTooltip.Root.ChangeEventReason;\n\n/**\n * Estado da dica. Não renderiza elemento.\n */\nexport const TooltipRoot = <Payload extends AnyType = unknown>(\n  props: TooltipRootProps<Payload>,\n) => {\n  return <BaseTooltip.Root {...props} />;\n};\n\nTooltipRoot.displayName = 'Tooltip.Root';\n"],"mappings":";;;;;;AAiBA,MAAa,eACX,UACG;CACH,OAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,YAAY,cAAc"}

package/dist/components/overlays/tooltip/tooltip-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-trigger.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-trigger.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipTriggerProps<Payload = unknown> =\n  BaseTooltip.Trigger.Props<Payload>;\n\nexport type TooltipTriggerState = BaseTooltip.Trigger.State;\n\n/**\n * Elemento que abre a dica no hover e no foco. Sem estilo próprio; passe o elemento em\n * `render`.\n */\nexport const TooltipTrigger = <Payload extends AnyType = unknown>(\n  props: TooltipTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseTooltip.Trigger\n      data-component=\"Tooltip.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n"],"mappings":";;;;;;;;AAaA,MAAa,kBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,SAAb;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"tooltip-trigger.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-trigger.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipTriggerProps<Payload = unknown> =\n  BaseTooltip.Trigger.Props<Payload>;\n\nexport type TooltipTriggerState = BaseTooltip.Trigger.State;\n\n/**\n * Elemento que abre a dica no hover e no foco. Sem estilo próprio; passe o elemento em\n * `render`.\n */\nexport const TooltipTrigger = <Payload extends AnyType = unknown>(\n  props: TooltipTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseTooltip.Trigger\n      data-component=\"Tooltip.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n"],"mappings":";;;;;;;;AAaA,MAAa,kBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,SAAb;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

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

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/typography/heading/heading.d.ts
 /**

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

@@ -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-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"}
+{"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/ts-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.d.ts

@@ -1,5 +1,5 @@
 import { KbdVariants } from "./kbd-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/typography/kbd/kbd.d.ts
 /**

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

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { kbdVariants } from "./kbd-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/typography/kbd/kbd.tsx
 const splitVariantProps = createSplitProps();

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

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type KbdVariants, kbdVariants } from './kbd-variants';\n\n/**\n * Props do `Kbd`: as variantes visuais e as props do elemento renderizado.\n */\nexport type KbdProps = MergeOverride<\n  useRender.ComponentProps<'kbd'>,\n  KbdVariants\n>;\n\nconst splitVariantProps = createSplitProps<KbdVariants>();\n\n/**\n * Tecla ou atalho de teclado.\n *\n * Renderiza um `kbd` com o desenho de tecla. Um atalho de várias teclas tem\n * dois formatos: compacto, num `Kbd` só e sem espaços (`Shift+Tab`), ou\n * separado, com um `Kbd` por tecla dentro do `KbdGroup`.\n *\n * @example\n * ```tsx\n * <Kbd>Esc</Kbd>\n *\n * <Kbd>Shift+Tab</Kbd>\n *\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>\n * </KbdGroup>\n * ```\n */\nexport const Kbd = (props: KbdProps) => {\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': 'Kbd',\n    className: mergeTwClassNames(kbdVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'kbd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nKbd.displayName = 'Kbd';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;AAoBxD,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,WAAW,kBAAkB,YAAY,YAAY,GAAG,SAAS;CACnE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type KbdVariants, kbdVariants } from './kbd-variants';\n\n/**\n * Props do `Kbd`: as variantes visuais e as props do elemento renderizado.\n */\nexport type KbdProps = MergeOverride<\n  useRender.ComponentProps<'kbd'>,\n  KbdVariants\n>;\n\nconst splitVariantProps = createSplitProps<KbdVariants>();\n\n/**\n * Tecla ou atalho de teclado.\n *\n * Renderiza um `kbd` com o desenho de tecla. Um atalho de várias teclas tem\n * dois formatos: compacto, num `Kbd` só e sem espaços (`Shift+Tab`), ou\n * separado, com um `Kbd` por tecla dentro do `KbdGroup`.\n *\n * @example\n * ```tsx\n * <Kbd>Esc</Kbd>\n *\n * <Kbd>Shift+Tab</Kbd>\n *\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>\n * </KbdGroup>\n * ```\n */\nexport const Kbd = (props: KbdProps) => {\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': 'Kbd',\n    className: mergeTwClassNames(kbdVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'kbd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nKbd.displayName = 'Kbd';\n"],"mappings":";;;;;AAgBA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;AAoBxD,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,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/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 'brand'
+   */
+  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" | "brand" | "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: "brand",
+	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(--color-gray-11)]",
+				"[--link-fg-hover:var(--color-gray-12)]",
+				"[--link-decoration:var(--color-gray-alpha-7)]"
+			],
+			brand: [
+				"[--link-fg:var(--color-brand-11)]",
+				"[--link-fg-hover:var(--color-brand-12)]",
+				"[--link-decoration:var(--color-brand-alpha-7)]"
+			],
+			red: [
+				"[--link-fg:var(--color-red-11)]",
+				"[--link-fg-hover:var(--color-red-12)]",
+				"[--link-decoration:var(--color-red-alpha-7)]"
+			],
+			green: [
+				"[--link-fg:var(--color-green-11)]",
+				"[--link-fg-hover:var(--color-green-12)]",
+				"[--link-decoration:var(--color-green-alpha-7)]"
+			],
+			amber: [
+				"[--link-fg:var(--color-amber-11)]",
+				"[--link-fg-hover:var(--color-amber-12)]",
+				"[--link-decoration:var(--color-amber-alpha-7)]"
+			],
+			blue: [
+				"[--link-fg:var(--color-blue-11)]",
+				"[--link-fg-hover:var(--color-blue-12)]",
+				"[--link-decoration:var(--color-blue-alpha-7)]"
+			]
+		},
+		variant: {
+			underline: [
+				"underline",
+				"disabled:decoration-gray-alpha-7",
+				"disabled:hover:decoration-gray-alpha-7",
+				"aria-disabled:decoration-gray-alpha-7",
+				"aria-disabled:hover:decoration-gray-alpha-7"
+			],
+			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 'brand'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só\n   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é\n   * link.\n   *\n   * @default 'underline'\n   */\n  variant?: 'underline' | 'plain';\n};\n\nexport const linkDefaultVariants: Required<LinkVariants> = {\n  colorScheme: 'brand',\n  variant: 'underline',\n};\n\n/**\n * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e\n * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de\n * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.\n *\n * Desabilitado (`disabled` ou `aria-disabled=\"true\"`), o link vai para o gray e perde a mudança de\n * hover.\n */\nexport const linkVariants = cva(\n  [\n    'text-(--link-fg)',\n    'underline-offset-2',\n    'decoration-(--link-decoration)',\n\n    'hover:text-(--link-fg-hover)',\n    'hover:decoration-(--link-fg-hover)',\n\n    'focus-ring-outside',\n    'rounded-xs',\n\n    // Como `<button>`, o link precisa do cursor e do alinhamento à esquerda; no `<a>` não muda nada.\n    'cursor-pointer',\n    'text-start',\n\n    // Troca de cor, não movimento: usa o `ease-out` do Tailwind e não um token `ease-*` do tema.\n    'not-motion-reduced:transition-colors',\n    'not-motion-reduced:ease-out',\n\n    'disabled:cursor-not-allowed',\n    'disabled:text-gray-11',\n    'disabled:hover:text-gray-11',\n    'aria-disabled:cursor-not-allowed',\n    'aria-disabled:text-gray-11',\n    'aria-disabled:hover:text-gray-11',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--link-fg:var(--color-gray-11)]',\n          '[--link-fg-hover:var(--color-gray-12)]',\n          '[--link-decoration:var(--color-gray-alpha-7)]',\n        ],\n        brand: [\n          '[--link-fg:var(--color-brand-11)]',\n          '[--link-fg-hover:var(--color-brand-12)]',\n          '[--link-decoration:var(--color-brand-alpha-7)]',\n        ],\n        red: [\n          '[--link-fg:var(--color-red-11)]',\n          '[--link-fg-hover:var(--color-red-12)]',\n          '[--link-decoration:var(--color-red-alpha-7)]',\n        ],\n        green: [\n          '[--link-fg:var(--color-green-11)]',\n          '[--link-fg-hover:var(--color-green-12)]',\n          '[--link-decoration:var(--color-green-alpha-7)]',\n        ],\n        amber: [\n          '[--link-fg:var(--color-amber-11)]',\n          '[--link-fg-hover:var(--color-amber-12)]',\n          '[--link-decoration:var(--color-amber-alpha-7)]',\n        ],\n        blue: [\n          '[--link-fg:var(--color-blue-11)]',\n          '[--link-fg-hover:var(--color-blue-12)]',\n          '[--link-decoration:var(--color-blue-alpha-7)]',\n        ],\n      },\n      variant: {\n        underline: [\n          'underline',\n\n          'disabled:decoration-gray-alpha-7',\n          'disabled:hover:decoration-gray-alpha-7',\n          'aria-disabled:decoration-gray-alpha-7',\n          'aria-disabled:hover:decoration-gray-alpha-7',\n        ],\n        plain: [\n          'no-underline',\n          'hover:underline',\n\n          'disabled:hover:no-underline',\n          'aria-disabled:hover:no-underline',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: linkDefaultVariants.colorScheme,\n      variant: linkDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;AACX;;;;;;;;;AAUA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CAEA;CACA;CAEA;CACA;CAGA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,WAAW;IACT;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,oBAAoB;EACjC,SAAS,oBAAoB;CAC/B;AACF,CACF"}

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

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

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

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

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

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

@@ -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" | "solid" | "subtle" | "plain" | null | undefined;
+  variant?: "solid" | "subtle" | "plain" | "text" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=mark-variants.d.ts.map

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

@@ -1,5 +1,5 @@
 import { MarkVariants } from "./mark-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/typography/mark/mark.d.ts
 /**

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

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { markVariants } from "./mark-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/typography/mark/mark.tsx
 const splitVariantProps = createSplitProps();

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

@@ -1 +1 @@
-{"version":3,"file":"mark.js","names":[],"sources":["../../../../src/components/typography/mark/mark.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type MarkVariants, markVariants } from './mark-variants';\n\n/**\n * Props do `Mark`: as variantes visuais e as props do elemento renderizado.\n */\nexport type MarkProps = MergeOverride<\n  useRender.ComponentProps<'mark'>,\n  MarkVariants\n>;\n\nconst splitVariantProps = createSplitProps<MarkVariants>();\n\n/**\n * Trecho de texto em destaque.\n *\n * Destaque de um trecho dentro de um texto: o termo buscado, um valor, uma\n * palavra-chave. Fica sempre dentro de um texto e herda o tamanho dele; fora\n * de um, não tem cor de onde herdar.\n *\n * @example\n * ```tsx\n * <Text>\n *   Resultado para <Mark>área de transferência</Mark> em 3 documentos.\n * </Text>\n *\n * <Mark\n *   variant=\"solid\"\n *   colorScheme=\"amber\"\n * >\n *   termo exato\n * </Mark>\n * ```\n */\nexport const Mark = (props: MarkProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Mark',\n    className: mergeTwClassNames(markVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'mark',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nMark.displayName = 'Mark';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;AAuBzD,MAAa,QAAQ,UAAqB;CACxC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,aAAa,YAAY,GAAG,SAAS;CACpE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}
+{"version":3,"file":"mark.js","names":[],"sources":["../../../../src/components/typography/mark/mark.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type MarkVariants, markVariants } from './mark-variants';\n\n/**\n * Props do `Mark`: as variantes visuais e as props do elemento renderizado.\n */\nexport type MarkProps = MergeOverride<\n  useRender.ComponentProps<'mark'>,\n  MarkVariants\n>;\n\nconst splitVariantProps = createSplitProps<MarkVariants>();\n\n/**\n * Trecho de texto em destaque.\n *\n * Destaque de um trecho dentro de um texto: o termo buscado, um valor, uma\n * palavra-chave. Fica sempre dentro de um texto e herda o tamanho dele; fora\n * de um, não tem cor de onde herdar.\n *\n * @example\n * ```tsx\n * <Text>\n *   Resultado para <Mark>área de transferência</Mark> em 3 documentos.\n * </Text>\n *\n * <Mark\n *   variant=\"solid\"\n *   colorScheme=\"amber\"\n * >\n *   termo exato\n * </Mark>\n * ```\n */\nexport const Mark = (props: MarkProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Mark',\n    className: mergeTwClassNames(markVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'mark',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nMark.displayName = 'Mark';\n"],"mappings":";;;;;AAgBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;AAuBzD,MAAa,QAAQ,UAAqB;CACxC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,aAAa,YAAY,GAAG,SAAS;CACpE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

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

@@ -1,5 +1,5 @@
 import { PreVariants } from "./pre-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/typography/pre/pre.d.ts
 /**

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

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { preVariants } from "./pre-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/typography/pre/pre.tsx
 const splitVariantProps = createSplitProps();

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

@@ -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    '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"}
+{"version":3,"file":"pre.js","names":[],"sources":["../../../../src/components/typography/pre/pre.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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":";;;;;AAgBA,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/dist/components/utilities/for/for.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { UnknownLooseValue } from "@lucasbernardosn/utils";
+import { UnknownLooseValue } from "@lucasbernardosn/ts-utils";
 //#region src/components/utilities/for/for.d.ts
 export type ForProps<TElementValue extends UnknownLooseValue> = {
   /**

package/dist/components/utilities/for/for.js.map

@@ -1 +1 @@
-{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/utilities/for/for.tsx"],"sourcesContent":["import type { UnknownLooseValue } from '@lucasbernardosn/utils';\nimport type React from 'react';\n\nexport type ForProps<TElementValue extends UnknownLooseValue> = {\n  /**\n   * Array a ser iterado. Com `null` ou `undefined` (dado ainda não carregado), não renderiza\n   * nada.\n   */\n  each: TElementValue[] | readonly TElementValue[] | null | undefined;\n  /**\n   * Conteúdo exibido quando o array está vazio\n   */\n  fallback?: React.ReactNode | undefined;\n  /**\n   * Função que renderiza cada item do array\n   */\n  children: (item: TElementValue, index: number) => React.ReactNode;\n};\n\n/**\n * Renderiza `children` para cada item de `each`, e `fallback` quando o array está vazio. Com\n * `each` `null` ou `undefined`, não renderiza nada. A `key` de cada item fica com quem usa.\n *\n * @example\n * ```tsx\n * <For each={users} fallback={<EmptyState.Root>…</EmptyState.Root>}>\n *   {(user) => <li key={user.id}>{user.name}</li>}\n * </For>\n * ```\n */\nexport const For = <TElementValue extends UnknownLooseValue>(\n  props: ForProps<TElementValue>,\n): React.ReactNode => {\n  const { each, fallback, children } = props;\n\n  if (each?.length === 0) {\n    return fallback ?? null;\n  }\n\n  return each?.map(children) ?? null;\n};\n\nFor.displayName = 'For';\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAa,OACX,UACoB;CACpB,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,MAAM,WAAW,GACnB,OAAO,YAAY;CAGrB,OAAO,MAAM,IAAI,QAAQ,KAAK;AAChC;AAEA,IAAI,cAAc"}
+{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/utilities/for/for.tsx"],"sourcesContent":["import type { UnknownLooseValue } from '@lucasbernardosn/ts-utils';\nimport type React from 'react';\n\nexport type ForProps<TElementValue extends UnknownLooseValue> = {\n  /**\n   * Array a ser iterado. Com `null` ou `undefined` (dado ainda não carregado), não renderiza\n   * nada.\n   */\n  each: TElementValue[] | readonly TElementValue[] | null | undefined;\n  /**\n   * Conteúdo exibido quando o array está vazio\n   */\n  fallback?: React.ReactNode | undefined;\n  /**\n   * Função que renderiza cada item do array\n   */\n  children: (item: TElementValue, index: number) => React.ReactNode;\n};\n\n/**\n * Renderiza `children` para cada item de `each`, e `fallback` quando o array está vazio. Com\n * `each` `null` ou `undefined`, não renderiza nada. A `key` de cada item fica com quem usa.\n *\n * @example\n * ```tsx\n * <For each={users} fallback={<EmptyState.Root>…</EmptyState.Root>}>\n *   {(user) => <li key={user.id}>{user.name}</li>}\n * </For>\n * ```\n */\nexport const For = <TElementValue extends UnknownLooseValue>(\n  props: ForProps<TElementValue>,\n): React.ReactNode => {\n  const { each, fallback, children } = props;\n\n  if (each?.length === 0) {\n    return fallback ?? null;\n  }\n\n  return each?.map(children) ?? null;\n};\n\nFor.displayName = 'For';\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAa,OACX,UACoB;CACpB,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,MAAM,WAAW,GACnB,OAAO,YAAY;CAGrB,OAAO,MAAM,IAAI,QAAQ,KAAK;AAChC;AAEA,IAAI,cAAc"}

package/dist/hooks/index.d.ts

@@ -1,3 +1,3 @@
-import { BREAKPOINTS, Breakpoint, useIsBelowMediumScreen, useIsBreakpoint } from "./use-breakpoint.js";
+import { BREAKPOINTS, Breakpoint, BreakpointsConfig, UseBreakpointOptions, useIsBreakpoint, useResponsiveBreakpoint } from "./use-breakpoint.js";
 import { useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType } from "./use-pointer-type.js";
-export { BREAKPOINTS, Breakpoint, useIsBelowMediumScreen, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType };
+export { BREAKPOINTS, Breakpoint, BreakpointsConfig, UseBreakpointOptions, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType, useResponsiveBreakpoint };

package/dist/hooks/index.js

@@ -1,3 +1,3 @@
-import { BREAKPOINTS, useIsBelowMediumScreen, useIsBreakpoint } from "./use-breakpoint.js";
+import { BREAKPOINTS, useIsBreakpoint, useResponsiveBreakpoint } from "./use-breakpoint.js";
 import { useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType } from "./use-pointer-type.js";
-export { BREAKPOINTS, useIsBelowMediumScreen, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType };
+export { BREAKPOINTS, useIsBreakpoint, useIsPointerPrimaryDevice, useIsTouchPrimaryDevice, usePointerType, useResponsiveBreakpoint };

package/dist/hooks/use-breakpoint.d.ts

@@ -35,22 +35,35 @@ export declare const BREAKPOINTS: {
  */
 export type Breakpoint = keyof typeof BREAKPOINTS;
 /**
- * Monitora continuamente se um breakpoint específico está ativo na viewport atual.
- *
- * O hook se registra para escutar mudanças na media query e remove automaticamente
- * os listeners quando o componente é desmontado, evitando vazamentos de memória.
- *
- * Segue o mesmo comportamento do Tailwind CSS (mobile-first com min-width).
+ * Mapa de nome do breakpoint para a largura mínima, com unidade CSS (ex: `'48rem'`).
+ */
+export type BreakpointsConfig = Record<string, string>;
+export type UseBreakpointOptions<TBreakpoints extends BreakpointsConfig> = {
+  /**
+   * Breakpoints em `min-width`, com unidade CSS. Declare em ordem crescente de largura.
+   *
+   * @default BREAKPOINTS
+   */
+  breakpoints?: TBreakpoints;
+};
+/**
+ * Indica se a tela está no breakpoint ou acima (mobile-first com `min-width`, como o Tailwind).
  *
- * @param breakpoint - Identificador do breakpoint conforme definido na constante BREAKPOINTS.
- * @returns Verdadeiro quando a viewport atual é maior ou igual ao breakpoint especificado (min-width), falso caso contrário.
+ * Sem `options.breakpoints`, usa {@link BREAKPOINTS}. O nome aceito vem da config passada.
  */
-export declare const useIsBreakpoint: (breakpoint: Breakpoint) => boolean;
+export declare const useIsBreakpoint: <TBreakpoints extends BreakpointsConfig = typeof BREAKPOINTS>(breakpoint: keyof TBreakpoints, options?: UseBreakpointOptions<TBreakpoints>) => boolean;
 /**
- * Indica se a viewport atual está abaixo da tela média (breakpoint `md`).
+ * Devolve o maior breakpoint ativo agora.
+ *
+ * A ordem é a de declaração da config, não a dos valores: o maior ativo é o último declarado cuja
+ * media query casa. Assim unidades mistas (`rem`, `px`) valem sem conversão manual, e o
+ * navegador decide se cada uma casa. Por isso a config precisa estar em ordem crescente, como o
+ * {@link BREAKPOINTS}. Abaixo de todos, devolve o primeiro declarado (no padrão, `base`), que
+ * também é o valor no servidor.
  *
- * @returns Verdadeiro quando a viewport é menor que o breakpoint `md`, falso caso contrário.
+ * Um objeto `breakpoints` literal passado a cada render não reassina as media queries: a
+ * assinatura só muda quando os valores mudam.
  */
-export declare const useIsBelowMediumScreen: () => boolean;
+export declare const useResponsiveBreakpoint: <TBreakpoints extends BreakpointsConfig = typeof BREAKPOINTS>(options?: UseBreakpointOptions<TBreakpoints>) => keyof TBreakpoints;
 //#endregion
 //# sourceMappingURL=use-breakpoint.d.ts.map