@ojiepermana/angular

@ojiepermana/angular

Umbrella meta-package for the @ojiepermana/* design system (Angular v22+). Installing it pulls in the whole suite in one command; you then import from the per-feature subpath entry points that make up the public API.

bun add @ojiepermana/angular
# or: npm install @ojiepermana/angular

This single install resolves all five libraries as direct dependencies:

Package	What it provides
@ojiepermana/angular-component	UI components (button, dialog, table, …) + icon utils
@ojiepermana/angular-chart	Chart families built on d3-scale/d3-shape
@ojiepermana/angular-navigation	App shell / navigation container
@ojiepermana/angular-theme	Theme provider, tokens, and Tailwind v4 CSS
@ojiepermana/angular-sdk	OpenAPI → Angular SDK generator (schematics)

Peer dependencies

You must already have Angular v22+ in your app (@angular/common, @angular/core, and for some libraries @angular/forms, @angular/router, @angular/platform-browser). @angular/cdk is pulled in automatically (it is a direct dependency of -component).

@angular/material is optional. Only three components wrap Material and therefore require it: select, date-picker, and calendar. Install it only if you import one of those:

bun add @angular/material

Every other component is built on the Angular CDK + Tailwind tokens and needs no Material.

Importing — @ojiepermana/angular/<lib>/<entry>

@ojiepermana/angular is the root: every component, chart, and service is reached through a nested subpath under it. Each subpath maps 1:1 to the matching @ojiepermana/angular-<lib> entry point and is fully tree-shakeable.

// Components — one entry point per component
import { Button } from '@ojiepermana/angular/component/button';
import { Card } from '@ojiepermana/angular/component/card';
import { Dialog } from '@ojiepermana/angular/component/dialog';

// Charts
import { BarChart } from '@ojiepermana/angular/chart/bar';

// Theme provider
import { provideUiTheme } from '@ojiepermana/angular/theme/styles';

The individual @ojiepermana/angular-<lib>/<entry> packages are still published and importable directly, but the @ojiepermana/angular/... namespace above is the recommended surface.

Subpaths only in production. The bare @ojiepermana/angular root barrel re-exports the entire design system (chart + component + navigation + sdk + theme). Importing from it pulls everything into your bundle, so reserve it for tests, demos, or prototypes:

// ✗ Avoid in production — drags in the whole design system
import * as Ui from '@ojiepermana/angular';

// ✓ Production — granular, tree-shakeable
import { Button } from '@ojiepermana/angular/component/button';

Theme & Tailwind v4 setup

Add the theme tokens, Tailwind, and the Tailwind token mapping to your global stylesheet (the CSS ships inside the package and is reachable by name):

/* styles.css */
@import '@ojiepermana/angular-theme/styles/css/index.css'; /* base + all color + neutral palettes */
@import 'tailwindcss';
@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css'; /* maps tokens → bg-primary, bg-brand, text-foreground, … */

(The theme CSS lives in the @ojiepermana/angular-theme package, installed automatically as a dependency.) Then register the provider:

import { provideUiTheme } from '@ojiepermana/angular/theme/styles';

export const appConfig = {
  providers: [provideUiTheme({ mode: 'light', color: 'base', neutral: 'base' })],
};

Material Symbols icons (opt-in)

By default provideUiTheme() makes no external network request. To preload the Material Symbols font from Google Fonts, opt in explicitly:

provideUiTheme({ icons: { materialSymbols: true } });

For privacy / offline / strict-CSP setups, leave it off and self-host the font in your own stylesheet instead.

License

MIT. See the bundled LICENSE file.

Support and security

Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the bundled SUPPORT.md. Report suspected vulnerabilities privately using the instructions in the bundled SECURITY.md.