Distribution

Build Artifacts

Build-Time Scripts

Source Code

bun scripts/cva-extractor.ts

generates

emits

emits

bunx buildy-ui scan

scans

scans

generates

publishes

safelist for
Tailwind purge

src/core/ui/
Primitives: Block, Box, Grid, etc.

src/core/variants/
CVA variant definitions

src/components/ui/
Composite components

src/layouts/
Layout templates

src/index.ts
Main entry point

scripts/cva-extractor.ts
Extracts 618 CSS classes

tsc -p tsconfig.json
TypeScript compiler

eslint src --ext .ts,.tsx
Code quality checks

buildy-ui scan
Registry generation

src/lib/core-classes.json
618-class whitelist

dist/index.js
ES2022 module output

dist/index.d.ts
TypeScript declarations

src/registry.json
Component metadata

NPM Package
@ui8kit/Unsupported markdown: link

Package files:
dist/**, README.md, LICENSE

Consumer
Applications

Outputs

Compilation Process

Compiler Settings

Compilation Inputs

tsconfig.json
Compiler configuration

src//*.ts
src//*.tsx
TypeScript source

target: ES2022
Modern JavaScript features

module: ES2022
moduleResolution: Bundler

jsx: react-jsx
React 18+ JSX transform

Path aliases:
@/* → ./src/*

Type checking
strict: true

JSX transformation
react-jsx runtime

Declaration generation
declaration: true

File emission
outDir: ./dist

dist/index.js
ES2022 modules

dist/index.d.ts
Type declarations

dist//*.js
dist//*.d.ts
Compiled submodules

// Path alias configuration
{
  "@/*": ["./src/*"],              // Maps @/ to src/
  "@ui8kit/core": ["./src/index"]  // Maps package import to src/index
}

dist/ Output Directory

Supporting Modules

Layout Modules

Component Modules

Core Modules

imports

imports

imports

imports

imports

imports

dist/themes/
Theme system

dist/index.js
Main entry point module

dist/core/ui/
Compiled primitive components

dist/core/variants/
CVA variant definitions

dist/components/ui/
Composite components

dist/layouts/
Layout templates

dist/hooks/
React hooks

dist/ui/
UI component exports

dist/core/utils/
Utility functions

dist/index.d.ts
Main type declarations

// Export structure from src/index.ts
export * from './core/variants';      // Variant definitions
export * from './core/utils';         // Utility functions

// Core primitives with Base prefix
export {
  Block as BaseBlock,
  Box as BaseBox,
  // ... etc
} from './core/ui';

// Composite components (main exports)
export * from './ui';                 // Button, Card, etc.

// Layout components
export * from './layouts';            // DashLayout, LayoutBlock, etc.

// Theme system
export * from './themes';             // ThemeProvider, useTheme

// React hooks
export * from './hooks';

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  }
}

{
  "files": [
    "dist/**/*",      // All compiled output
    "README.md",      // Documentation
    "LICENSE"         // License file
  ]
}

CVA Extractor Process

Class Extraction

Base Classes
First argument strings

Input:
src/core/variants/**/*.ts
All variant definition files

Babel Parser
Parse TypeScript AST

AST Traversal
Find cva() calls

Variant Classes
Object properties

Compound Variants
Nested objects

Deduplication
Set-based uniqueness

Output:
src/lib/core-classes.json
618 unique classes

{
  "classes": [
    "absolute",
    "accent-auto",
    // ... 616 more classes
    "z-auto"
  ],
  "count": 618,
  "timestamp": "2025-10-29T12:17:54.882Z"
}

Runtime Usage

Committed Artifacts

Build-Time Generation

produces

produces

produces

npm run build

bun scripts/cva-extractor.ts

npm run scan

dist/
Compiled JS + types
Generated by tsc

src/lib/core-classes.json
618 CSS classes
Generated by CVA extractor

src/registry.json
Component metadata
Generated by buildy-ui

npm install @ui8kit/core
Installs dist/ output

Consumer tailwind.config.js
Uses core-classes.json

npx buildy-ui add button
Uses registry.json

# 1. Extract CVA classes (updates src/lib/core-classes.json)
bun scripts/cva-extractor.ts

# 2. Type-check source code
npm run type-check

# 3. Lint source code
npm run lint

# 4. Compile TypeScript (generates dist/)
npm run build

# 5. Generate component registry
npm run scan

# 6. Publish to NPM (from packages/registry/)
npm run publish

# Quick build for testing
npm run build

# Or just type-check without emitting
npm run type-check

npm run lint          # Code quality
npm run type-check    # Type safety
npm run build         # Compilation

# 1. Check dist/ exists and contains files
ls -la dist/

# 2. Verify main entry points exist
ls -la dist/index.js dist/index.d.ts

# 3. Check CVA whitelist is up to date
cat src/lib/core-classes.json | grep count

# 4. Verify registry is current
cat src/registry.json | grep version