TMF
Repositories
2
 Projects
2
 Packages
185

@tmf/ui (6.2.0)

Published 2026-10-20 14:07:12 -03:00 by tarcisio

Installation

@tmf:registry=
npm install @tmf/ui@6.2.0
"@tmf/ui": "6.2.0"

About this package

@tmf/ui

Biblioteca de primitivas de UI brand-agnostic da plataforma TMF: componentes shadcn/ui construídos sobre Radix UI

  • CVA (class-variance-authority). Os componentes não embutem nenhuma cor de marca — toda a aparência vem de CSS vars (hsl(var(--primary)), …) fornecidas em runtime pelo tema canônico @tmf/design-tokens/<brand>/shadcn.css. Assim o mesmo <Button /> se adapta à brand de cada produto (Hub, TMF9, DANI, HelpCor, Priceshow) e a dark/light, sem fork.

Versão atual: 6.2.0 — linha gerada de package.json por scripts/gen-packages-table.py; não editar à mão.

Histórico completo em CHANGELOG.md; capacidades em FUNCIONALIDADES.md; conformidade com o padrão TMF em CONFORMANCE.md.

1. Pré-requisitos (peerDependencies)

O pacote NÃO embute as libs — o consumidor instala os peers que usar (todos optional em peerDependenciesMeta):

peer versão observação
react / react-dom >=18 obrigatório
class-variance-authority >=0.7 variantes (Button/Badge/Label)
tailwindcss >=3 host processa as classes utilitárias
lucide-react >=0.3 ícones do Dialog/Select
@radix-ui/react-slot >=1 Button asChild
@radix-ui/react-dialog >=1 Dialog
@radix-ui/react-label >=2 Label
@radix-ui/react-select >=2 Select
@radix-ui/react-separator >=1 Separator
@radix-ui/react-switch >=1 Switch
@radix-ui/react-tooltip >=1 Tooltip

Dependências próprias (embutidas): clsx, tailwind-merge.

2. Registry + instalação

Publicado no registry npm do Forgejo da TMF. Garanta o .npmrc do projeto:

# .npmrc
@tmf:registry=https://git.trademarketingforce.com/api/packages/TMF/npm/
//git.trademarketingforce.com/api/packages/TMF/npm/:_authToken=${FORGEJO_NPM_TOKEN}

npm install @tmf/ui @tmf/design-tokens
# + os peers que usar (react, class-variance-authority, tailwindcss, lucide-react, @radix-ui/*)

3. Consumo (3 passos)

a) Importar o tema da brand (CSS vars) — uma vez na app:

import '@tmf/design-tokens/hub/shadcn.css' // troque "hub" pela brand do produto

b) Estender o tailwind.config com o preset:

// tailwind.config.js (CommonJS) ou .cjs
const tmfUiPreset = require('@tmf/ui/tailwind-preset')
const tmfContent = require('@tmf/ui/tailwind-content') // glob de content-scan das libs @tmf/* (TMFP-61464)

module.exports = {
  presets: [tmfUiPreset],
  darkMode: 'class',
  content: [
    './src/**/*.{ts,tsx}',
    ...tmfContent, // node_modules/@tmf/*/dist: gera o CSS das classes de TODAS as libs @tmf/* instaladas
  ],
}

c) Importar os componentes:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@tmf/ui'

export function Demo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Olá</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default">Confirmar</Button>
      </CardContent>
    </Card>
  )
}

Dark mode: aplique a classe dark no <html>/<body> (darkMode: 'class'); as CSS vars do tema já trazem a paleta dark.

4. Símbolos exportados

Button · Badge · Card (+ CardHeader/CardTitle/CardDescription/CardContent/CardFooter) · Field · Dialog (+ DialogTrigger/DialogContent/DialogHeader/DialogFooter/DialogTitle/DialogDescription/DialogClose/DialogPortal/DialogOverlay) · Input · Label · Select (+ SelectTrigger/SelectContent/SelectItem/SelectValue/SelectGroup/SelectLabel/SelectSeparator/…) · Separator · Switch · Textarea · Tooltip (+ TooltipProvider/TooltipTrigger/TooltipContent/SimpleTooltip) · utilitário cn · PACKAGE_VERSION (e version, alias histórico deprecado).

Os variants (buttonVariants, badgeVariants, cardVariants) também são exportados. O Select inclui ainda SelectScrollUpButton/SelectScrollDownButton. O pacote não reexporta @radix-ui/* — importe-os direto se precisar do primitivo cru.

5. Ajustes do host (z-index e variantes do Badge)

Escala de z dos componentes em Portal (TMFP-70390)

Dialog (overlay e conteúdo), Select e Tooltip renderizam em Portal e usam as CSS vars da escala de z do @tmf/design-tokens, com fallback numérico (o @tmf/ui só consome; nunca define as vars). Ordem: overlay < modal < popover < tooltip, então Select e Tooltip aparecem acima do Dialog.

Componente CSS var Fallback
DialogOverlay --z-overlay 1300
DialogContent --z-modal 1400
SelectContent --z-popover 1500
TooltipContent --z-tooltip 1600

Para subir/descer uma camada (ex.: sidebar do host com z maior), sobrescreva a var no :root do host: :root { --z-modal: 2400; --z-overlay: 2300; --z-popover: 2500; --z-tooltip: 2600; }.

Novas props do DialogContent: hideClose?: boolean (remove o "X"; default false) e overlayClassName?: string (classes extras no overlay). TooltipContent agora usa TooltipPrimitive.Portal (fora do container do componente).

Select com SelectItem value="" (TMFP-70391)

<SelectItem value="">Todos</SelectItem> é suportado: o wrapper troca "" por uma sentinela interna (versões antigas do Radix lançam erro para value="") e onValueChange recebe "" ao escolher esse item. Com value=""/defaultValue="" o gatilho mostra o placeholder.

Badge: ref e variantes critical/caution (TMFP-70392)

Badge é forwardRef (funciona como filho de TooltipTrigger asChild). As variantes critical e caution usam, por padrão, os tokens semânticos destructive e warning; o host sobrescreve fundo e texto juntos por CSS var (o @tmf/ui não conhece tokens de produto):

Variante Fundo Texto
critical --tmf-badge-critical-bg --tmf-badge-critical-fg
caution --tmf-badge-caution-bg --tmf-badge-caution-fg
success --tmf-badge-success-bg --tmf-badge-success-fg
warning --tmf-badge-warning-bg --tmf-badge-warning-fg

success e warning usam, sem override, os tokens success/warning de sempre.

Exemplo (HelpCor): :root { --tmf-badge-critical-bg: var(--farol-critico); --tmf-badge-critical-fg: var(--farol-critico-texto); }. O valor é uma cor completa (hsl(...), #..., var(...)), e o override deve ter paridade dark+light no host.

Dependencies

Dependencies

ID Version
clsx ^2.1.1
tailwind-merge ^3.5.0

Development dependencies

ID Version
@radix-ui/react-dialog ^1.1.15
@radix-ui/react-label ^2.1.8
@radix-ui/react-select ^2.2.6
@radix-ui/react-separator ^1.1.8
@radix-ui/react-slot ^1.2.4
@radix-ui/react-switch ^1.2.6
@radix-ui/react-tooltip ^1.2.8
@storybook/react-vite ^10.4.6
@testing-library/jest-dom ^6.0.0
@testing-library/react ^16.0.0
@tmf/design-tokens >=0.5.0
@types/react ^18.2.47
@types/react-dom ^18.2.18
@vitejs/plugin-react ^6.0.3
autoprefixer ^10.5.2
class-variance-authority ^0.7.1
jsdom ^25.0.0
lucide-react ^0.303.0
postcss ^8.5.16
react ^18.2.0
react-dom ^18.2.0
storybook ^10.4.6
tailwindcss ^3.4.19
typescript ^5.3.3
vite ^8.1.0
vitest ^4.1.11

Peer dependencies

ID Version
@radix-ui/react-dialog >=1
@radix-ui/react-label >=2
@radix-ui/react-select >=2
@radix-ui/react-separator >=1
@radix-ui/react-slot >=1
@radix-ui/react-switch >=1
@radix-ui/react-tooltip >=1
class-variance-authority >=0.7
lucide-react >=0.3
react >=18
react-dom >=18
tailwindcss >=3

Keywords

tmf ui shadcn radix cva react components design-system
Details
npm
2026-10-20 14:07:12 -03:00
1319
Trade Marketing Force LTDA
UNLICENSED
27 KiB
Assets (1)
ui-6.2.0.tgz 27 KiB
Versions (16) View all
6.8.0 2026-11-04
6.7.0 2026-11-04
6.4.0 2026-10-29
6.3.0 2026-10-28
6.2.0 2026-10-20