@xjur-ui/util

Biblioteca de utilitários JavaScript/TypeScript para o XJur Design System. Inclui helpers para manipulação de classes CSS, variantes de componentes, e outras funcionalidades comuns.

Instalação

npm install @xjur-ui/util

Principais Utilitários

cn() - Merge de Classes CSS

Combina classes CSS de forma inteligente usando tailwind-merge e class-variance-authority:

import { cn } from '@xjur-ui/util'

// Resolve conflitos automáticamente
cn('px-4 py-2', 'px-6') // Resultado: 'px-6 py-2'

// Condicional
cn('base-class', condition && 'conditional-class')

// Com objetos
cn('base', {
  'active': isActive,
  'disabled': isDisabled
})

tv() - Tailwind Variants

Criador de variantes para componentes usando tailwind-variants:

import { tv } from '@xjur-ui/util'

const buttonVariants = tv({
  base: 'font-medium rounded-lg transition-colors',
  variants: {
    variant: {
      primary: 'bg-blue-500 text-white hover:bg-blue-600',
      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
      outline: 'border border-gray-300 bg-white hover:bg-gray-50'
    },
    size: {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-base',
      lg: 'px-6 py-3 text-lg'
    }
  },
  defaultVariants: {
    variant: 'primary',
    size: 'md'
  }
})

// Uso
const classes = buttonVariants({ 
  variant: 'secondary', 
  size: 'lg' 
})

cva() - Class Variance Authority

Sistema de variantes baseado em class-variance-authority:

import { cva } from '@xjur-ui/util'

const alertVariants = cva(
  // Base classes
  'rounded-lg p-4 border',
  {
    variants: {
      intent: {
        info: 'bg-blue-50 text-blue-900 border-blue-200',
        success: 'bg-green-50 text-green-900 border-green-200',
        warning: 'bg-yellow-50 text-yellow-900 border-yellow-200',
        error: 'bg-red-50 text-red-900 border-red-200'
      },
      size: {
        sm: 'text-sm',
        md: 'text-base',
        lg: 'text-lg'
      }
    },
    defaultVariants: {
      intent: 'info',
      size: 'md'
    }
  }
)

Helpers de Cor

Manipulação de Cores com Polished

import { 
  lighten, 
  darken, 
  rgba, 
  transparentize,
  shade,
  tint 
} from '@xjur-ui/util'

// Clarear cor
const lightBlue = lighten(0.2, '#3b82f6')

// Escurecer cor
const darkBlue = darken(0.1, '#3b82f6')

// Adicionar transparência
const semiTransparent = rgba('#3b82f6', 0.5)
const transparent = transparentize(0.5, '#3b82f6')

// Shades e tints
const darker = shade(0.2, '#3b82f6')
const lighter = tint(0.2, '#3b82f6')

Tipos TypeScript

Este pacote inclui tipos TypeScript completos:

import type { 
  type VariantProps,
  type ClassValue
} from '@xjur-ui/util'

// Para componentes com variantes
type ButtonProps = VariantProps<typeof buttonVariants> & {
  children: React.ReactNode
}

Desenvolvimento

# Instalar dependências
npm install

# Modo desenvolvimento (watch)
npm run dev

# Build de produção
npm run build

Performance

• Tree-shaking: Importe apenas as funções necessárias
• Bundle otimizado: ~2KB gzipped
• Zero dependências runtime extras: Usa apenas as necessárias
• Tipagem completa: IntelliSense completo no TypeScript

Dependências

• class-variance-authority: Criação de variantes de componentes
• tailwind-merge: Merge inteligente de classes Tailwind
• tailwind-variants: Sistema avançado de variantes
• polished: Manipulação de cores

Licença

Licenciado sob a Licença MIT.