@transbnk/ui-core

TransBnk UI Core Component Library - A comprehensive Angular component library with form controls, buttons, and layout components.

🎯 Live Demo

👉 Open in StackBlitz - Interactive demo where you can see and edit all components in real-time!

The demo showcases all form components, buttons, layouts, and features. You can edit the code and see changes instantly!

Structure

@transbnk/ui-core
│
├── foundation/
│   ├── tokens/
│   │   ├── _colors.scss
│   │   ├── _spacing.scss
│   │   ├── _typography.scss
│   │   └── _breakpoints.scss
│   │
│   └── _index.scss
│
├── form/
│   ├── tb-input/
│   ├── tb-select/
│   ├── tb-textarea/
│   ├── tb-checkbox/
│   ├── tb-radio/
│   └── tb-form-field/
│
├── buttons/
│   ├── tb-button/
│   └── tb-icon-button/
│
├── layout/
│   ├── grid/
│   ├── flex/
│   └── responsive-container/
│
└── ui-core.module.ts

Installation

npm install @transbnk/ui-core

Requirements

• Angular 15.x, 16.x, or 17.x
• Angular Forms module (for form components)

Usage

Import the Module

import { UiCoreModule } from '@transbnk/ui-core';

@NgModule({
  imports: [UiCoreModule],
  // ...
})
export class AppModule { }

Use Components

<tb-button variant="primary" size="md">Click Me</tb-button>

<tb-input
  label="Email"
  type="email"
  placeholder="Enter your email"
  [(ngModel)]="email"
></tb-input>

<tb-select
  label="Country"
  [options]="countries"
  [(ngModel)]="selectedCountry"
></tb-select>

Components

Form Components

• tb-input - Text input with validation support
• tb-select - Select dropdown with single/multi-select and optional search
• tb-textarea - Multi-line text input
• tb-checkbox - Checkbox with custom color support
• tb-radio - Radio button with custom color support
• tb-form-field - Form field wrapper with label and error handling

Button Components

• tb-button - Button with multiple variants (primary, secondary, outline, text, danger)
• tb-icon-button - Icon-only button

Layout Components

• tb-grid - 12-column responsive grid system
• tb-grid-item - Grid item with responsive breakpoints
• tb-flex - Flexbox layout container
• tb-flex-item - Flex item with dynamic ordering support
• tb-responsive-container - Responsive container with max-width constraints

Foundation Tokens

The library includes SCSS tokens for:

• Colors (primary, secondary, success, warning, error, etc.)
• Spacing (consistent spacing scale)
• Typography (font sizes, weights, line heights)
• Breakpoints (responsive design breakpoints)

Import foundation tokens in your SCSS:

@import '@transbnk/ui-core/foundation/index';

📚 Documentation

For complete documentation, API reference, and examples:

• Full Documentation - Comprehensive guide with all components
• Live Demo or (https://rb.gy/2x4w32) - Interactive component showcase

📝 License

ISC