@hichchi/ngx-ui 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,545 @@
+<!--suppress ALL -->
+
+<div align="center">
+  <h1>🎨 @hichchi/ngx-ui</h1>
+  <p>
+    <strong>A comprehensive UI component library for Angular applications</strong>
+  </p>
+  <p>
+    <a href="https://www.npmjs.com/package/@hichchi/ngx-ui">
+      <img src="https://img.shields.io/npm/v/@hichchi/ngx-ui?style=flat-square&color=blue" alt="npm version">
+    </a>
+    <a href="https://www.npmjs.com/package/@hichchi/ngx-ui">
+      <img src="https://img.shields.io/npm/dm/@hichchi/ngx-ui?style=flat-square&color=green" alt="npm downloads">
+    </a>
+    <a href="https://github.com/hichchidev/hichchi/blob/main/LICENSE">
+      <img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="License">
+    </a>
+    <img src="https://img.shields.io/badge/angular-19.0.0-red?style=flat-square" alt="Angular Version">
+  </p>
+  <p>
+    <em>Part of the <a href="https://github.com/hichchidev/hichchi">Hichchi</a> ecosystem - A powerful, scalable application built with Nx workspace</em>
+  </p>
+</div>
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @hichchi/ngx-ui
+```
+
+## 🌟 Overview
+
+This library provides a comprehensive collection of UI components and utilities for Angular applications. It includes reusable components, directives, pipes, and styling utilities to help build consistent and beautiful user interfaces.
+
+## ✨ Key Features
+
+- 🧩 **UI Components**: Pre-built, customizable components for common UI patterns
+- 🎯 **Directives**: Useful directives for enhanced functionality
+- 🔧 **Pipes**: Custom pipes for data transformation and formatting
+- 🎨 **Styling Utilities**: CSS utilities and theming support
+- 📱 **Responsive Design**: Mobile-first, responsive components
+- ♿ **Accessibility**: WCAG compliant components with proper ARIA support
+
+## 🚀 Usage
+
+### Using UI Components
+
+```typescript
+import { NgModule } from "@angular/core";
+import { HichchiUiModule } from "@hichchi/ngx-ui";
+
+@NgModule({
+  imports: [HichchiUiModule],
+})
+export class AppModule {}
+```
+
+### Button Component
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-example",
+  template: `
+    <hichchi-button variant="primary" size="large" (click)="handleClick()">
+      Click Me
+    </hichchi-button>
+
+    <hichchi-button
+      variant="secondary"
+      [disabled]="isLoading"
+      [loading]="isLoading"
+    >
+      Submit
+    </hichchi-button>
+  `,
+})
+export class ExampleComponent {
+  isLoading = false;
+
+  handleClick() {
+    console.log("Button clicked!");
+  }
+}
+```
+
+### Card Component
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-card-example",
+  template: `
+    <hichchi-card>
+      <hichchi-card-header>
+        <h3>Card Title</h3>
+      </hichchi-card-header>
+      <hichchi-card-content>
+        <p>This is the card content area.</p>
+      </hichchi-card-content>
+      <hichchi-card-footer>
+        <hichchi-button variant="primary">Action</hichchi-button>
+      </hichchi-card-footer>
+    </hichchi-card>
+  `,
+})
+export class CardExampleComponent {}
+```
+
+---
+
+## 🔧 Development
+
+### Building
+
+```bash
+nx build ngx-ui
+```
+
+### Running unit tests
+
+```bash
+nx test ngx-ui
+```
+
+Tests are executed via [Jest](https://jestjs.io).
+
+---
+
+<div align="center">
+
+**Made with ❤️ by [Hichchi Dev](https://github.com/hichchidev)**
+
+[![Hichchi Ecosystem](https://img.shields.io/badge/🏠_Hichchi_Ecosystem-blue)](https://github.com/hichchidev/hichchi)
+[![Report Bug](https://img.shields.io/badge/🐛_Report_Bug-red)](https://github.com/hichchidev/hichchi/issues)
+[![Request Feature](https://img.shields.io/badge/✨_Request_Feature-green)](https://github.com/hichchidev/hichchi/issues)
+
+_Building the future of user interfaces, one commit at a time_
+
+</div>
+
+---
+
+# 📖 API Documentation
+
+Complete technical reference for all classes, interfaces, methods, and types in this library.
+
+**Auto-generated by TypeDoc** - Browse through detailed API references, code examples, and implementation guides below.
+
+<!-- TypeDoc generated documentation will be appended below this point -->
+
+---
+
+## 📋 API Table of Contents
+
+- [Classes](#classes)
+  - [ButtonComponent](#buttoncomponent)
+  - [HcCardComponent](#hccardcomponent)
+  - [HcSeparatorComponent](#hcseparatorcomponent)
+
+## Classes
+
+### ButtonComponent
+
+Defined in: [button/button.component.ts:50](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/button/button.component.ts#L50)
+
+Reusable button component for the Hichchi UI library
+
+This component provides a customizable button with consistent styling and behavior
+across the application. It supports different colors, types, and custom CSS classes
+while maintaining accessibility and user experience standards.
+
+The component uses Angular's new signal-based inputs and outputs for better
+performance and reactivity.
+
+#### Examples
+
+```html
+<!-- Basic button -->
+<hc-button>Click me</hc-button>
+```
+
+```html
+<!-- Button with custom color and type -->
+<hc-button
+  [color]="'secondary'"
+  [type]="'button'"
+  (onClick)="handleClick($event)"
+>
+  Submit Form
+</hc-button>
+```
+
+```html
+<!-- Button with custom CSS classes -->
+<hc-button [class]="'my-custom-class another-class'" [color]="'danger'">
+  Delete Item
+</hc-button>
+```
+
+#### See
+
+- HcColor Type defining available color options
+- ButtonType Type defining available button types
+
+#### Constructors
+
+##### Constructor
+
+```ts
+new ButtonComponent(): ButtonComponent;
+```
+
+###### Returns
+
+[`ButtonComponent`](#buttoncomponent)
+
+#### Properties
+
+<table>
+<thead>
+<tr>
+<th>Property</th>
+<th>Type</th>
+<th>Description</th>
+<th>Defined in</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+<a id="property-class"></a> `class`
+
+</td>
+<td>
+
+`InputSignal`<`string`>
+
+</td>
+<td>
+
+Additional CSS classes to apply to the button
+
+Allows for custom styling by adding extra CSS classes to the button element.
+Multiple classes can be specified as a space-separated string.
+
+**Default**
+
+```ts
+"";
+```
+
+</td>
+<td>
+
+[button/button.component.ts:70](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/button/button.component.ts#L70)
+
+</td>
+</tr>
+<tr>
+<td>
+
+<a id="property-color"></a> `color`
+
+</td>
+<td>
+
+`InputSignal`<`HcColor`>
+
+</td>
+<td>
+
+The color theme of the button
+
+Determines the visual appearance of the button based on predefined color schemes.
+Each color represents a different semantic meaning (primary for main actions,
+secondary for alternative actions, danger for destructive actions, etc.).
+
+**Default**
+
+```ts
+"primary";
+```
+
+</td>
+<td>
+
+[button/button.component.ts:60](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/button/button.component.ts#L60)
+
+</td>
+</tr>
+<tr>
+<td>
+
+<a id="property-onclick"></a> `onClick`
+
+</td>
+<td>
+
+`OutputEmitterRef`<`MouseEvent`>
+
+</td>
+<td>
+
+Event emitted when the button is clicked
+
+Emits the native MouseEvent when the user clicks the button, allowing
+parent components to handle the click interaction. The event contains
+information about the click such as coordinates, modifier keys, etc.
+
+**Example**
+
+```typescript
+handleButtonClick(event: MouseEvent) {
+  console.log('Button clicked at:', event.clientX, event.clientY);
+  // Handle the click event
+}
+```
+
+</td>
+<td>
+
+[button/button.component.ts:100](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/button/button.component.ts#L100)
+
+</td>
+</tr>
+<tr>
+<td>
+
+<a id="property-type"></a> `type`
+
+</td>
+<td>
+
+`InputSignal`<`ButtonType`>
+
+</td>
+<td>
+
+The HTML button type attribute
+
+Specifies the behavior of the button when used within forms.
+
+- "submit": Submits the form (default)
+- "button": Regular button with no default behavior
+- "reset": Resets the form to its initial state
+
+**Default**
+
+```ts
+"submit";
+```
+
+</td>
+<td>
+
+[button/button.component.ts:82](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/button/button.component.ts#L82)
+
+</td>
+</tr>
+</tbody>
+</table>
+
+---
+
+### HcCardComponent
+
+Defined in: [hc-card/hc-card.component.ts:57](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts#L57)
+
+Reusable card component for the Hichchi UI library
+
+This component provides a container with consistent card styling that can be used
+to group related content together. Cards are commonly used for displaying information
+in a structured, visually appealing way with proper spacing, borders, and shadows.
+
+The component acts as a content wrapper and uses Angular's content projection
+to display any content passed between the opening and closing tags.
+
+#### Examples
+
+```html
+<!-- Basic card -->
+<hc-card>
+  <h3>Card Title</h3>
+  <p>This is some card content.</p>
+</hc-card>
+```
+
+```html
+<!-- Card with form content -->
+<hc-card>
+  <form>
+    <input type="text" placeholder="Enter your name" />
+    <hc-button type="submit">Submit</hc-button>
+  </form>
+</hc-card>
+```
+
+```html
+<!-- Card with mixed content -->
+<hc-card>
+  <div class="card-header">
+    <h2>User Profile</h2>
+  </div>
+  <div class="card-body">
+    <p>User information goes here...</p>
+  </div>
+  <div class="card-footer">
+    <hc-button>Edit Profile</hc-button>
+  </div>
+</hc-card>
+```
+
+#### See
+
+[ButtonComponent](#buttoncomponent) Related button component often used within cards
+
+#### Constructors
+
+##### Constructor
+
+```ts
+new HcCardComponent(): HcCardComponent;
+```
+
+###### Returns
+
+[`HcCardComponent`](#hccardcomponent)
+
+---
+
+### HcSeparatorComponent
+
+Defined in: [hc-separator/hc-separator.component.ts:59](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L59)
+
+Reusable separator component for the Hichchi UI library
+
+This component provides a visual separator element that can be used to divide
+content sections within a page or form. It supports an optional label that can
+be displayed within or alongside the separator line.
+
+Separators are useful for creating visual breaks between different sections of
+content, improving readability and organization of the user interface.
+
+#### Examples
+
+```html
+<!-- Basic separator without label -->
+<hc-separator></hc-separator>
+```
+
+```html
+<!-- Separator with label -->
+<hc-separator [label]="'Personal Information'"></hc-separator>
+```
+
+```html
+<!-- Using separator in a form -->
+<form>
+  <input type="text" placeholder="First Name" />
+  <input type="text" placeholder="Last Name" />
+
+  <hc-separator [label]="'Contact Details'"></hc-separator>
+
+  <input type="email" placeholder="Email" />
+  <input type="tel" placeholder="Phone" />
+</form>
+```
+
+```html
+<!-- Using separator between content sections -->
+<div>
+  <h2>Section 1</h2>
+  <p>Content for section 1...</p>
+
+  <hc-separator [label]="'OR'"></hc-separator>
+
+  <h2>Section 2</h2>
+  <p>Content for section 2...</p>
+</div>
+```
+
+#### Constructors
+
+##### Constructor
+
+```ts
+new HcSeparatorComponent(): HcSeparatorComponent;
+```
+
+###### Returns
+
+[`HcSeparatorComponent`](#hcseparatorcomponent)
+
+#### Properties
+
+<table>
+<thead>
+<tr>
+<th>Property</th>
+<th>Type</th>
+<th>Description</th>
+<th>Defined in</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+<a id="property-label"></a> `label`
+
+</td>
+<td>
+
+`InputSignal`<`string`>
+
+</td>
+<td>
+
+Optional label text to display with the separator
+
+When provided, this text will be displayed as part of the separator,
+typically centered within or alongside the separator line. This is useful
+for creating labeled dividers that help organize content sections.
+
+**Default**
+
+```ts
+"";
+```
+
+</td>
+<td>
+
+[hc-separator/hc-separator.component.ts:69](https://github.com/hichchidev/hichchi/blob/b9e6bdc58def58a8174e67e2e04b85e460b908e6/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L69)
+
+</td>
+</tr>
+</tbody>
+</table>

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hichchi/ngx-ui",
-  "version": "0.0.2",
+  "description": "A comprehensive UI component library for Angular applications",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },