@fldev-solution/ui

Primitivos e hooks do kernel de UI da fldev. Blocos compostos (login, DataTable, LineChart…) não vêm por aqui: vêm pelo registry do shadcn, em https://ui.fldev.com.br/r/index.json. O que todo produto usa igual vai por npm; o que todo produto ajusta vai por registry.

npm i @fldev-solution/ui

import { Button, Alert, Field, Input, useModo } from "@fldev-solution/ui";

CSS: a ordem importa

Os componentes não carregam cor própria: leem tokens semânticos que a marca define. Sem o tokens.css de uma marca importado antes, nada tem cor.

@import "tailwindcss";
@import "@fontsource-variable/inter";        /* a fonte que a marca declara */
@import "./design-system/tokens/tokens.css"; /* valores — da marca */
@import "@fldev-solution/ui/styles.css";     /* nomes de utility — do kernel */
@source "../node_modules/@fldev-solution/ui/dist";

O @source é obrigatório: o Tailwind v4 não varre node_modules, e sem ele as classes usadas dentro dos componentes não entram no CSS final. Ajuste o caminho relativo ao arquivo CSS.

O tema de uma marca também vem pelo registry:

npx shadcn add https://ui.fldev.com.br/r/brand-demo-teal.json

Modo e marca

useModo alterna claro/escuro. useBrand também troca a marca na raiz — use só em white-label, e nunca em página que mostra duas marcas ao mesmo tempo: escrever data-brand na raiz faz o documento inteiro casar com o seletor de todas as marcas.

Requisitos

React 18+ e Tailwind CSS v4.

Formulários

Os controles são independentes de React Hook Form e Zod. Incluem seleções pesquisáveis, documentos brasileiros, valores financeiros exatos, datas e tags.

import { MoneyInput, DecimalInput, PercentInput, DocumentInput } from "@fldev-solution/ui";

MoneyInput, DecimalInput e PercentInput recebem e emitem strings decimais. "1.5" em PercentInput representa 1,5%. MoneyInput completa duas casas após edição válida; um valor externo com precisão incompatível fica inválido, sem arredondamento. No transporte para a API, use onValueChange, que entrega o valor canônico; FormData do input de texto contém a apresentação pt-BR.

O calendário tem entrada e peer opcionais:

npm i @daypicker/[email protected]

import { Calendar, DateInput, DateRangeInput } from "@fldev-solution/ui/calendar";
import { TimeInput } from "@fldev-solution/ui";

Datas usam YYYY-MM-DD; horários, HH:mm. O import principal funciona sem o peer do calendário. Integração RHF/Zod, endereço e upload são composições do registry. Contratos, exemplos e reset estão em docs/formularios-integracao.md no repositório. Os avisos de dependências acompanham o pacote em THIRD_PARTY_NOTICES.md.