Utilities

Shared utilities, hooks, constants, and types for building UIs with Vacano.

Also known as: lib, helpers, utils, shared, tools, common

When to use

• Use utilities alongside Vacano UI components for colors, responsive design, keyboard shortcuts, and platform detection.
• Available from both @vacano/ui and @vacano/ui/lib.
• Validation utilities are available as a namespace export: import { validation } from '@vacano/ui/lib'.

Import

// From main package
import { COLORS, mediaUp, useKeyBinding } from '@vacano/ui'

// From dedicated export
import { COLORS, mediaUp, useKeyBinding } from '@vacano/ui/lib'

// Validation namespace
import { validation } from '@vacano/ui/lib'

Constants

• BREAKPOINTS - Responsive breakpoint values (sm, md, lg, xl, 2xl)
• COLORS - Design system color palette (black, white, red, green, yellow, gray, steel-blue, iron-grey, baltic-blue)
• KEYFRAMES - Reusable Emotion CSS animations (rotate, fadeIn, fadeOut, slideInLeft, slideOutLeft, slideInRight, slideOutRight, slideInTop, slideOutTop, slideInBottom, slideOutBottom, scaleIn, slideInTopFade, slideOutTopFade, slideInBottomFade, slideOutBottomFade)
• KEY_SYMBOLS - Keyboard key to symbol mappings (Meta -> ⌘, Control -> ⌃, etc.)

Utils

• Colors - HEX color manipulation (alpha, toHEX, isValid)
• Media - Responsive media query helpers (mediaUp, mediaDown, mediaBetween)
• Platform - OS and browser detection (getOperatingSystem, getBrowser)
• Keyboard - Keyboard symbol resolution (getKeySymbols)
• newClassNameGetter - Internal utility for generating BEM-style class names with vacano_ prefix

Hooks

• useKeyBinding - Keyboard shortcut handler

Validation

• Validation - Yup schema factories (email, phone, url, password, slug, noSpaces, minAge, hexColor, ipv4, creditCard)

Types

• Types - Shared TypeScript types (VacanoComponentProps, VacanoComponentClassNames, VacanoComponentSize, VacanoInteractiveElementState, VacanoValueItem, KeyboardEventKey, OperatingSystem, Browser)

Module Structure

The @vacano/ui/lib entry point re-exports from the following internal modules:

Module	Exports
hooks	useKeyBinding
utils	alpha, toHEX, isValid, mediaUp, mediaDown, mediaBetween, getOperatingSystem, getBrowser, getKeySymbols, newClassNameGetter
constants	BREAKPOINTS, COLORS, KEYFRAMES, KEY_SYMBOLS
types	VacanoComponentProps, VacanoComponentClassNames, VacanoComponentSize, VacanoInteractiveElementState, VacanoValueItem, KeyboardEventKey, OperatingSystem, Browser
validation (namespace)	email, phone, url, password, slug, noSpaces, minAge, hexColor, ipv4, creditCard