RecursoBase

Utilitarios server-safe

Os utilitarios exportados pelo entry server podem ser usados em Server Components, testes e codigo compartilhado. Eles nao carregam hooks de cliente.

Utilitarios publicos

Preview com as saidas atuais dos helpers exportados por cosmemilton-ui/server.

Classescm-card cm-card--active

NCM formatado0101.21.00

Data formatada31/05/2026

CPF formatado123.456.789-09

CNPJ numerico11.222.333/0001-81

CNPJ alfanumerico12.ABC.345/01DE-35

Telefone celular(11) 98765-4321

Densidadecm-density-compact

Tamanho CSS24px

Espacamento CSSvar(--space-md, 1rem)

Valor responsivo{"base":"grid","sm":"grid","md":"flex","lg":"flex","xl":"flex"}

Numero responsivo{"base":1,"sm":1,"md":1,"lg":3,"xl":3}

import { CmItem, CmStack } from "cosmemilton-ui/server";
import {
  cn,
  cmDensityClass,
  cmSizeValue,
  cmSpacingValue,
  formatCNPJ,
  formatCPF,
  formatDate,
  formatNCM,
  formatPhone,
  resolveResponsiveNumber,
  resolveResponsiveValue,
} from "cosmemilton-ui/server";

const layout = resolveResponsiveValue({ base: "grid", md: "flex" }, "block");
const columns = resolveResponsiveNumber({ base: 1, lg: 3 }, 1);

export default function Example() {
  return (
    <CmStack gap="sm" className={cn("docs-utility-example")}>
      <CmItem title="Classes" description={cn("cm-card", true && "cm-card--active")} />
      <CmItem title="NCM formatado" description={formatNCM("01012100")} />
      <CmItem title="Data formatada" description={formatDate("2026-05-31")} />
      <CmItem title="CPF formatado" description={formatCPF("12345678909")} />
      <CmItem title="CNPJ numerico" description={formatCNPJ("11222333000181")} />
      <CmItem title="CNPJ alfanumerico" description={formatCNPJ("12ABC34501DE35")} />
      <CmItem title="Telefone celular" description={formatPhone("11987654321")} />
      <CmItem title="Densidade" description={cmDensityClass("compact")} />
      <CmItem title="Tamanho CSS" description={cmSizeValue(24)} />
      <CmItem title="Espacamento CSS" description={cmSpacingValue("md")} />
      <CmItem title="Valor responsivo" description={JSON.stringify(layout)} />
      <CmItem title="Numero responsivo" description={JSON.stringify(columns)} />
    </CmStack>
  );
}

Snippets

Imports publicos

import {
  cn,
  cmDensityClass,
  cmSizeValue,
  cmSpacingValue,
  formatCNPJ,
  formatCPF,
  formatDate,
  formatNCM,
  formatPhone,
  resolveResponsiveNumber,
  resolveResponsiveValue,
} from "cosmemilton-ui/server";

Classe e formatacao geral

Helpers pequenos para className, data em pt-BR e NCM.

import { cn, formatDate, formatNCM } from "cosmemilton-ui/server";

cn("cm-card", true && "cm-card--active", undefined);
// "cm-card cm-card--active"

formatNCM("01012100");
// "0101.21.00"

formatDate("2026-05-31");
// "31/05/2026"

Documentos e telefone

Formatadores para exibicao de CPF, CNPJ numerico, CNPJ alfanumerico e telefones brasileiros.

import { formatCNPJ, formatCPF, formatPhone } from "cosmemilton-ui/server";

formatCPF("12345678909");
// "123.456.789-09"

formatCNPJ("11222333000181");
// "11.222.333/0001-81"

formatCNPJ("12ABC34501DE35");
// "12.ABC.345/01DE-35"

formatPhone("11987654321");
// "(11) 98765-4321"

formatPhone("5511987654321");
// "+55 (11) 98765-4321"

Tokens e responsividade

Helpers usados pelos primitivos para converter props em valores CSS previsiveis.

import {
  cmDensityClass,
  cmSizeValue,
  cmSpacingValue,
  resolveResponsiveNumber,
  resolveResponsiveValue,
} from "cosmemilton-ui/server";

cmDensityClass("compact");
// "cm-density-compact"

cmSizeValue(24);
// "24px"
cmSizeValue("2rem");
// "2rem"

cmSpacingValue("md");
// "var(--space-md, 1rem)"

resolveResponsiveValue({ base: "grid", md: "flex" }, "block");
// { base: "grid", sm: "grid", md: "flex", lg: "flex", xl: "flex" }

resolveResponsiveNumber({ base: 1, lg: 3 }, 1);
// { base: 1, sm: 1, md: 1, lg: 3, xl: 3 }

Notas

Lista publica atual em cosmemilton-ui/server: cn, formatNCM, formatDate, formatCPF, formatCNPJ, formatPhone, cmDensityClass, resolveResponsiveValue, resolveResponsiveNumber, cmSizeValue e cmSpacingValue.

formatNCM formata apenas codigos de 8 digitos sem ponto. Se o valor ja vier formatado ou tiver outro tamanho, retorna o valor original.

formatDate usa Date + toLocaleDateString com locale pt-BR e timezone UTC.

formatCNPJ aceita o formato numerico atual e o novo formato alfanumerico da Receita Federal: 12 caracteres alfanumericos mais 2 digitos verificadores numericos.

formatCNPJ apenas aplica mascara para exibicao; ele nao valida nem calcula os digitos verificadores.

No CNPJ alfanumerico, a Receita manteve o DV por modulo 11, convertendo letras pelo valor ASCII menos 48. Exemplo: A=17, B=18, C=19.

resolveResponsiveValue e resolveResponsiveNumber propagam o ultimo valor conhecido pelos breakpoints base, sm, md, lg e xl.

cmSpacingValue resolve tokens none, xs, sm, md, lg, xl, 2xl e 3xl para variaveis CSS com fallback.