Package Entry Points

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• src/index.ts
• src/theme/index.ts
• src/provider/index.tsx
• tsconfig.json
• cubic.yaml

The @pcstyle/ui package is structured as a modern ESM-first library designed for high-performance React applications. The entry points define how consumers access the design system's components, themes, and visual effects. The architecture follows a multi-entry point strategy, allowing developers to import specific modules individually to optimize bundle sizes or use the main entry point for a comprehensive suite of tools.

Sources: package.json:1-24, src/index.ts:1-15

Core Distribution Configuration

The package uses a specific directory structure and compiler configuration to ensure that the entry points are correctly mapped from the source code to the distributed assets. The project is configured as a module type, prioritizing ECMAScript Modules (ESM) for modern web development workflows.

Build and Output Mapping

The build process is managed via TypeScript (tsc), targeting ES2020 with ESNext module resolution. Source files located in src/ are compiled into the dist/ directory, which serves as the primary distribution folder for the package.

Configuration Key	Value	Description
target	ES2020	JavaScript version target for compilation.
module	ESNext	Module system used for the output code.
rootDir	./src	The location of the source code files.
outDir	./dist	The destination for compiled production code.
declaration	true	Generates .d.ts files for type safety in consuming apps.

Sources: tsconfig.json:3-13, package.json:26-28

Module Resolution and Exports

The package.json file defines three primary export paths. These paths allow consumers to access different layers of the design system without importing the entire library.

Export Path Map

The following table describes the available import paths and their respective entry files:

Export Path	Type Entry	Import Entry	Description
.	./dist/index.d.ts	./dist/index.js	Main entry point containing all components and providers.
./theme	./dist/theme/index.d.ts	./dist/theme/index.js	Direct access to design tokens and color palettes.
./effects	./dist/effects/index.d.ts	./dist/effects/index.js	Specialized visual effects like CRT overlays and custom cursors.

Sources: package.json:9-24

Internal Export Architecture

The project employs a "Barrel Export" pattern. The main entry point (src/index.ts) aggregates exports from sub-directories, providing a unified API for the consumer.

This diagram illustrates the hierarchical structure of the package entry points, where the root index file acts as the primary orchestrator.

Sources: src/index.ts:1-15, src/theme/index.ts:1-2

Main Entry Point Breakdown

The root src/index.ts exports the following modules:

• Theme & Tokens: Includes the dual-theme color palettes (Cyber and Minimal) and typography tokens.
• UI Provider: The UIProvider context and useUI hook required for theme management.
• UI Components: Functional React components including Button, Card, Input, Badge, and Tabs.
• Visual Effects: Motion-based and CSS-heavy effects such as CRTOverlay and NeuralCursor.

Sources: src/index.ts:1-15, src/provider/index.tsx:13-52

API Standards and Requirements

The package entry points are governed by strict development rules defined in the repository configuration. This ensures that any code exported through these entry points maintains high quality and compatibility.

• Type Safety: The project prohibits the use of the any type and non-null assertions for public APIs to ensure deep type safety for consumers.
• ESM Standards: Package exports must satisfy both ESM and CJS consumers where applicable, although the primary focus is ESM.
• Public API Discipline: Versioning discipline and clean API exports are required for the SDK package focus.

Sources: cubic.yaml:18-24, cubic.yaml:26-28

Summary

The package entry points for @pcstyle/ui are designed for modularity and type safety. By utilizing the exports field in package.json and a structured barrel export system in src/index.ts, the library provides a flexible interface for developers to integrate a cyberpunk-inspired design system with minimal overhead.