@pantograph/utils

Lightweight utility functions for Pantograph design system. Provides type-safe helpers for BEM class generation, theme resolution, and common frontend utilities.

Installation

npm install @pantograph/utils
# or
yarn add @pantograph/utils
# or
pnpm add @pantograph/utils

Quick Usage

import { getBemBlock, getBemElement, getBemModifier } from '@pantograph/utils'

const block = getBemBlock('button') // 'pc_button'
const elem = getBemElement('pc_button', 'icon') // 'pc_button__icon'
const mod = getBemModifier('pc_button', 'primary') // 'pc_button--primary'

Key Features

• BEM Helpers: Predictable, framework-agnostic class name generation
• Type Safety: Full TypeScript support with auto-completion
• Class Merging: Merge and normalize classes with normCls()
• Size Utilities: Convert numbers to pixel strings and extract values
• Validation: Check for empty values and validate input
• Zero Dependencies: Lightweight and tree-shakeable

API Overview

BEM Utilities

• getBemBlock() - Generate BEM block classes
• getBemElement() - Generate BEM element classes
• getBemModifier() - Generate BEM modifier classes
• generateVariantClassList() - Generate variant class lists
• normCls() - Normalize and merge class names

Validation & Conversion

• isEmptyLikeLodash() - Check if value is empty
• getValidNumber() - Extract valid numbers
• getPxSize() - Convert to pixel strings
• extractFromPxSize() - Extract numbers from pixel strings

Component Utilities

• getComponentName() - Generate component names
• getComponentOptions() - Generate component options

Navigation

For a complete map of all packages, components, and import paths, refer to the centralized navigation index:

• .ai/NAVIGATION.md

Documentation

• Full API documentation: GETTINGSTARTED.md
• Component contracts: .ai/component-contracts.json
• Symbol mappings: .ai/symbol-map.json
• Run npm run ai:index to regenerate indexes after structural changes