C
Cassa UI

@cassa/utils

A small set of typed utility functions shared across all packages and apps.

Import

import {
  cn,
  formatCurrency,
  formatDate,
  truncate,
  slugify,
  debounce,
  clamp,
  generateId,
} from '@cassa/utils'

All utilities

PropTypeDefaultDescription
cn(...inputs)stringMerges Tailwind class names, resolving conflicts with clsx + tailwind-merge.
formatCurrency(amount, currency?, locale?)stringFormats a number as a locale-aware currency string.
formatDate(date, options?, locale?)stringFormats a Date or ISO string into a human-readable date.
truncate(str, maxLength)stringCuts a string to maxLength, appending "…" if trimmed.
slugify(str)stringConverts a string to a URL-safe slug.
debounce(fn, delay)functionReturns a debounced version of fn (non-reactive, use useDebounce in components).
clamp(value, min, max)numberClamps a number within the given range.
generateId()stringReturns a short random ID string.

cn

The most-used utility. Merges class names with clsx and resolves Tailwind conflicts with tailwind-merge. Use it in every component that accepts a className prop.

import { cn } from '@cassa/utils'

// Merges classes and resolves conflicts
cn('px-4 py-2', 'px-6')          // → 'py-2 px-6'
cn('text-sm', condition && 'text-brand-primary') // conditional
cn('bg-white', { 'opacity-50': isDisabled })     // object syntax

formatCurrency

import { formatCurrency } from '@cassa/utils'

formatCurrency(1234.5)                   // → "$1,234.50"
formatCurrency(1234.5, 'EUR', 'de-DE')   // → "1.234,50 €"
formatCurrency(99.9, 'GBP', 'en-GB')     // → "£99.90"

formatDate

import { formatDate } from '@cassa/utils'

formatDate(new Date('2024-01-15'))                          // → "Jan 15, 2024"
formatDate('2024-01-15', { dateStyle: 'full' })            // → "Monday, January 15, 2024"
formatDate('2024-01-15', { month: 'short', year: 'numeric' }) // → "Jan 2024"

truncate

import { truncate } from '@cassa/utils'

truncate('Hello world', 8)   // → "Hello..."
truncate('Hi', 8)            // → "Hi"        (no change needed)
truncate('', 8)              // → ""

slugify

import { slugify } from '@cassa/utils'

slugify('Hello World!')          // → "hello-world"
slugify('React & TypeScript')    // → "react-typescript"
slugify('  Multiple   Spaces  ') // → "multiple-spaces"

clamp

import { clamp } from '@cassa/utils'

clamp(5, 0, 10)   // → 5   (within range)
clamp(-3, 0, 10)  // → 0   (below min)
clamp(15, 0, 10)  // → 10  (above max)