TMF
Repositories
2
 Projects
2
 Packages
109

@tmf/ui (4.0.0)

Published 2026-07-07 16:03:27 -03:00 by tarcisio

Installation

@tmf:registry=
npm install @tmf/ui@4.0.0
"@tmf/ui": "4.0.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: 0.3.1. 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')

module.exports = {
  presets: [tmfUiPreset],
  darkMode: 'class',
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@tmf/ui/dist/**/*.{js,jsx}', // gera o CSS das classes usadas pelo pacote
  ],
}

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) · 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) · utilitário cn · version.

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

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
@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
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

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-07-07 16:03:27 -03:00
81
Trade Marketing Force LTDA
UNLICENSED
19 KiB
Assets (1)
ui-4.0.0.tgz 19 KiB
Versions (10) View all
6.1.1 2026-08-23
6.1.0 2026-08-05
6.0.0 2026-07-27
5.0.0 2026-07-16
4.0.1 2026-07-10