@rokkit/core

Core utilities for the Rokkit design system — field mapping, constants, calendar, color palette, and event utilities.

Install

npm install @rokkit/core
# or
bun add @rokkit/core

Overview

@rokkit/core is the foundation layer shared across all Rokkit packages. It provides:

• Field mapping — map arbitrary data object shapes to semantic field names
• Constants — BASE_FIELDS, DEFAULT_STATE_ICONS, DEFAULT_KEYMAP, and more
• Color palette — default colors, shades, and theme color mapping
• Calendar utilities — calendar day generation and weekday labels
• Event utilities — lightweight emitter factory
• Direction detection — RTL/LTR helpers
• Tick generation — axis tick utilities for chart packages

No runtime dependencies on other @rokkit/* packages.

Usage

Field mapping

FieldMapper maps semantic field names (label, value, icon, etc.) to the actual keys present in your data objects. Pass a fields override to adapt any data shape.

import { FieldMapper } from '@rokkit/core'

const mapper = new FieldMapper({ label: 'name', value: 'id', icon: 'iconClass' })

const item = { id: 42, name: 'Settings', iconClass: 'i-settings' }

mapper.get('label', item) // 'Settings'
mapper.get('value', item) // 42
mapper.get('icon', item) // 'i-settings'

normalizeFields

Merge user-supplied field overrides with BASE_FIELDS defaults, remapping any legacy key names automatically.

import { normalizeFields, BASE_FIELDS } from '@rokkit/core'

const fields = normalizeFields({ label: 'title', value: 'slug' })
// { label: 'title', value: 'slug', icon: 'icon', children: 'children', ... }

BASE_FIELDS reference

import { BASE_FIELDS } from '@rokkit/core'

// {
//   id: 'id',         value: 'value',       label: 'label',
//   icon: 'icon',     avatar: 'image',       subtext: 'description',
//   tooltip: 'title', badge: 'badge',        shortcut: 'shortcut',
//   children: 'children',  type: 'type',    snippet: 'snippet',
//   href: 'href',     hrefTarget: 'target',
//   disabled: 'disabled',  expanded: 'expanded', selected: 'selected'
// }

Event emitter

import { createEmitter } from '@rokkit/core'

const emitter = createEmitter()
emitter.on('select', (item) => console.log('selected', item))
emitter.emit('select', myItem)

Calendar utilities

import { getCalendarDays, weekdays } from '@rokkit/core'

const days = getCalendarDays(2025, 2) // February 2025
// weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

Tick generation

import { generateTicks } from '@rokkit/core'

const ticks = generateTicks(0, 100, 5)
// [0, 25, 50, 75, 100]

API

| Export | Description | | -------------------------------- | ------------------------------------------------------------- | | BASE_FIELDS | Canonical semantic-to-data-key field mapping | | normalizeFields(fields) | Merge overrides with BASE_FIELDS defaults | | FieldMapper | Class that resolves semantic field reads from data objects | | DEFAULT_STATE_ICONS | Icon name map grouped by category (action, state, sort, etc.) | | DEFAULT_KEYMAP | Default keyboard navigation key mapping | | DEFAULT_THEME_MAPPING | Default semantic color → palette color mapping | | createEmitter() | Lightweight event emitter factory | | getCalendarDays(year, month) | Calendar day array for a given month | | weekdays | Localized weekday label array | | generateTicks(min, max, count) | Evenly spaced axis tick values | | defaultColors | Default color palette array | | shades | Available shade scale values | | ITEM_SNIPPET | Constant: default item snippet key ('itemContent') | | GROUP_SNIPPET | Constant: default group snippet key ('groupContent') | | stateIconsFromNames(names) | Build a state icon map from an array of icon name strings |

Part of Rokkit — a Svelte 5 component library and design system.