@hichchi/ngx-ui 0.0.1-alpha.0

package/fesm2022/hichchi-ngx-ui.mjs

@@ -0,0 +1,231 @@
+import * as i0 from '@angular/core';
+import { input, output, Component } from '@angular/core';
+
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic button -->
+ * <hc-button>Click me</hc-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Button with custom color and type -->
+ * <hc-button
+ *   [color]="'secondary'"
+ *   [type]="'button'"
+ *   (onClick)="handleClick($event)">
+ *   Submit Form
+ * </hc-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Button with custom CSS classes -->
+ * <hc-button
+ *   [class]="'my-custom-class another-class'"
+ *   [color]="'danger'">
+ *   Delete Item
+ * </hc-button>
+ * ```
+ *
+ * @see {@link HcColor} Type defining available color options
+ * @see {@link ButtonType} Type defining available button types
+ */
+class ButtonComponent {
+    /**
+     * 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 "primary"
+     */
+    color = input("primary");
+    /**
+     * 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 ""
+     */
+    class = input("");
+    /**
+     * 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 "submit"
+     */
+    type = input("submit");
+    /**
+     * 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
+     * }
+     * ```
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+    onClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ButtonComponent, isStandalone: true, selector: "hc-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [type]=\"type()\" class=\"btn hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\n    <ng-content></ng-content>\n</button>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.hc-button{transition:all .3s ease;border:none;position:relative;overflow:hidden;box-shadow:var(--shadow-md);border-radius:12px}.hc-button.btn-lg{font-size:1rem!important;font-weight:600;padding:.75rem 1.5rem}.hc-button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.hc-button:hover{box-shadow:var(--shadow-lg)}.hc-button:hover:before{left:100%}.hc-button-primary{background:var(--primary-gradient);color:#fff}.hc-button-primary:hover,.hc-button-primary:active{color:#fff}.hc-button-secondary{background:var(--secondary-gradient);color:#fff}.hc-button-secondary:hover,.hc-button-secondary:active{color:#fff}.hc-button-success{background:var(--success-gradient);color:#fff}.hc-button-success:hover,.hc-button-success:active{color:#fff}.hc-button-warning{background:var(--warning-gradient);color:#fff}.hc-button-warning:hover,.hc-button-warning:active{color:#fff}.hc-button-danger{background:var(--danger-gradient);color:#fff}.hc-button-danger:hover,.hc-button-danger:active{color:#fff}.hc-button-info{background:var(--info-gradient);color:#fff}.hc-button-info:hover,.hc-button-info:active{color:#fff}.hc-button-light{background:var(--light-gradient);color:var(--text-color)}.hc-button-light:hover,.hc-button-light:active{color:var(--text-color)}.hc-button-dark{background:var(--dark-gradient);color:#fff}.hc-button-dark:hover,.hc-button-dark:active{color:#fff}.hc-button-white{background-color:#fff;border:1px solid var(--border-color);color:var(--text-color)}.hc-button-white:hover,.hc-button-white:active{color:var(--text-color)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "hc-button", imports: [], template: "<button [type]=\"type()\" class=\"btn hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\n    <ng-content></ng-content>\n</button>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.hc-button{transition:all .3s ease;border:none;position:relative;overflow:hidden;box-shadow:var(--shadow-md);border-radius:12px}.hc-button.btn-lg{font-size:1rem!important;font-weight:600;padding:.75rem 1.5rem}.hc-button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.hc-button:hover{box-shadow:var(--shadow-lg)}.hc-button:hover:before{left:100%}.hc-button-primary{background:var(--primary-gradient);color:#fff}.hc-button-primary:hover,.hc-button-primary:active{color:#fff}.hc-button-secondary{background:var(--secondary-gradient);color:#fff}.hc-button-secondary:hover,.hc-button-secondary:active{color:#fff}.hc-button-success{background:var(--success-gradient);color:#fff}.hc-button-success:hover,.hc-button-success:active{color:#fff}.hc-button-warning{background:var(--warning-gradient);color:#fff}.hc-button-warning:hover,.hc-button-warning:active{color:#fff}.hc-button-danger{background:var(--danger-gradient);color:#fff}.hc-button-danger:hover,.hc-button-danger:active{color:#fff}.hc-button-info{background:var(--info-gradient);color:#fff}.hc-button-info:hover,.hc-button-info:active{color:#fff}.hc-button-light{background:var(--light-gradient);color:var(--text-color)}.hc-button-light:hover,.hc-button-light:active{color:var(--text-color)}.hc-button-dark{background:var(--dark-gradient);color:#fff}.hc-button-dark:hover,.hc-button-dark:active{color:#fff}.hc-button-white{background-color:#fff;border:1px solid var(--border-color);color:var(--text-color)}.hc-button-white:hover,.hc-button-white:active{color:var(--text-color)}\n"] }]
+        }] });
+
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic card -->
+ * <hc-card>
+ *   <h3>Card Title</h3>
+ *   <p>This is some card content.</p>
+ * </hc-card>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ *
+ * @example
+ * ```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 {@link ButtonComponent} Related button component often used within cards
+ */
+class HcCardComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: HcCardComponent, isStandalone: true, selector: "hc-card", ngImport: i0, template: "<div class=\"hc-card d-flex justify-content-center align-items-center\">\n    <div class=\"hc-card-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}:host{display:block;background:var(--secondary-gradient);border-radius:20px;box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden;transition:all .3s ease;width:400px}:host:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);pointer-events:none}:host:hover{box-shadow:0 25px 50px -12px #00000040}:host .hc-card-content{background-color:var(--bg-light);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1;width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HcCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "hc-card", imports: [], template: "<div class=\"hc-card d-flex justify-content-center align-items-center\">\n    <div class=\"hc-card-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}:host{display:block;background:var(--secondary-gradient);border-radius:20px;box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden;transition:all .3s ease;width:400px}:host:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);pointer-events:none}:host:hover{box-shadow:0 25px 50px -12px #00000040}:host .hc-card-content{background-color:var(--bg-light);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1;width:100%}\n"] }]
+        }] });
+
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic separator without label -->
+ * <hc-separator></hc-separator>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Separator with label -->
+ * <hc-separator [label]="'Personal Information'"></hc-separator>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ */
+class HcSeparatorComponent {
+    /**
+     * 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 ""
+     */
+    label = input("");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HcSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: HcSeparatorComponent, isStandalone: true, selector: "hc-separator", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span>{{ label() }}</span>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}:host{display:block;position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:1.5rem auto}:host span{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HcSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "hc-separator", imports: [], template: "<span>{{ label() }}</span>\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}:host{display:block;position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:1.5rem auto}:host span{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, HcCardComponent, HcSeparatorComponent };
+//# sourceMappingURL=hichchi-ngx-ui.mjs.map

package/fesm2022/hichchi-ngx-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hichchi-ngx-ui.mjs","sources":["../../../../libs/ngx-ui/src/lib/components/button/button.component.ts","../../../../libs/ngx-ui/src/lib/components/button/button.component.html","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.html","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.html","../../../../libs/ngx-ui/src/hichchi-ngx-ui.ts"],"sourcesContent":["import { Component, input, InputSignal, output, OutputEmitterRef } from \"@angular/core\";\r\nimport { ButtonType, HcColor } from \"../../types\";\r\n\r\n/**\r\n * Reusable button component for the Hichchi UI library\r\n *\r\n * This component provides a customizable button with consistent styling and behavior\r\n * across the application. It supports different colors, types, and custom CSS classes\r\n * while maintaining accessibility and user experience standards.\r\n *\r\n * The component uses Angular's new signal-based inputs and outputs for better\r\n * performance and reactivity.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic button -->\r\n * <hc-button>Click me</hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom color and type -->\r\n * <hc-button\r\n *   [color]=\"'secondary'\"\r\n *   [type]=\"'button'\"\r\n *   (onClick)=\"handleClick($event)\">\r\n *   Submit Form\r\n * </hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom CSS classes -->\r\n * <hc-button\r\n *   [class]=\"'my-custom-class another-class'\"\r\n *   [color]=\"'danger'\">\r\n *   Delete Item\r\n * </hc-button>\r\n * ```\r\n *\r\n * @see {@link HcColor} Type defining available color options\r\n * @see {@link ButtonType} Type defining available button types\r\n */\r\n@Component({\r\n    selector: \"hc-button\",\r\n    imports: [],\r\n    templateUrl: \"./button.component.html\",\r\n    styleUrl: \"./button.component.scss\",\r\n})\r\nexport class ButtonComponent {\r\n    /**\r\n     * The color theme of the button\r\n     *\r\n     * Determines the visual appearance of the button based on predefined color schemes.\r\n     * Each color represents a different semantic meaning (primary for main actions,\r\n     * secondary for alternative actions, danger for destructive actions, etc.).\r\n     *\r\n     * @default \"primary\"\r\n     */\r\n    color: InputSignal<HcColor> = input<HcColor>(\"primary\");\r\n\r\n    /**\r\n     * Additional CSS classes to apply to the button\r\n     *\r\n     * Allows for custom styling by adding extra CSS classes to the button element.\r\n     * Multiple classes can be specified as a space-separated string.\r\n     *\r\n     * @default \"\"\r\n     */\r\n    class: InputSignal<string> = input<string>(\"\");\r\n\r\n    /**\r\n     * The HTML button type attribute\r\n     *\r\n     * Specifies the behavior of the button when used within forms.\r\n     * - \"submit\": Submits the form (default)\r\n     * - \"button\": Regular button with no default behavior\r\n     * - \"reset\": Resets the form to its initial state\r\n     *\r\n     * @default \"submit\"\r\n     */\r\n    type: InputSignal<ButtonType> = input<ButtonType>(\"submit\");\r\n\r\n    /**\r\n     * Event emitted when the button is clicked\r\n     *\r\n     * Emits the native MouseEvent when the user clicks the button, allowing\r\n     * parent components to handle the click interaction. The event contains\r\n     * information about the click such as coordinates, modifier keys, etc.\r\n     *\r\n     * @example\r\n     * ```typescript\r\n     * handleButtonClick(event: MouseEvent) {\r\n     *   console.log('Button clicked at:', event.clientX, event.clientY);\r\n     *   // Handle the click event\r\n     * }\r\n     * ```\r\n     */\r\n    // eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n    onClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\r\n}\r\n","<button [type]=\"type()\" class=\"btn hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\n    <ng-content></ng-content>\n</button>\n","import { Component } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable card component for the Hichchi UI library\r\n *\r\n * This component provides a container with consistent card styling that can be used\r\n * to group related content together. Cards are commonly used for displaying information\r\n * in a structured, visually appealing way with proper spacing, borders, and shadows.\r\n *\r\n * The component acts as a content wrapper and uses Angular's content projection\r\n * to display any content passed between the opening and closing tags.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic card -->\r\n * <hc-card>\r\n *   <h3>Card Title</h3>\r\n *   <p>This is some card content.</p>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with form content -->\r\n * <hc-card>\r\n *   <form>\r\n *     <input type=\"text\" placeholder=\"Enter your name\">\r\n *     <hc-button type=\"submit\">Submit</hc-button>\r\n *   </form>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with mixed content -->\r\n * <hc-card>\r\n *   <div class=\"card-header\">\r\n *     <h2>User Profile</h2>\r\n *   </div>\r\n *   <div class=\"card-body\">\r\n *     <p>User information goes here...</p>\r\n *   </div>\r\n *   <div class=\"card-footer\">\r\n *     <hc-button>Edit Profile</hc-button>\r\n *   </div>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @see {@link ButtonComponent} Related button component often used within cards\r\n */\r\n@Component({\r\n    selector: \"hc-card\",\r\n    imports: [],\r\n    templateUrl: \"./hc-card.component.html\",\r\n    styleUrl: \"./hc-card.component.scss\",\r\n})\r\nexport class HcCardComponent {}\r\n","<div class=\"hc-card d-flex justify-content-center align-items-center\">\n    <div class=\"hc-card-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n","import { Component, input, InputSignal } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable separator component for the Hichchi UI library\r\n *\r\n * This component provides a visual separator element that can be used to divide\r\n * content sections within a page or form. It supports an optional label that can\r\n * be displayed within or alongside the separator line.\r\n *\r\n * Separators are useful for creating visual breaks between different sections of\r\n * content, improving readability and organization of the user interface.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic separator without label -->\r\n * <hc-separator></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Separator with label -->\r\n * <hc-separator [label]=\"'Personal Information'\"></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator in a form -->\r\n * <form>\r\n *   <input type=\"text\" placeholder=\"First Name\">\r\n *   <input type=\"text\" placeholder=\"Last Name\">\r\n *\r\n *   <hc-separator [label]=\"'Contact Details'\"></hc-separator>\r\n *\r\n *   <input type=\"email\" placeholder=\"Email\">\r\n *   <input type=\"tel\" placeholder=\"Phone\">\r\n * </form>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator between content sections -->\r\n * <div>\r\n *   <h2>Section 1</h2>\r\n *   <p>Content for section 1...</p>\r\n *\r\n *   <hc-separator [label]=\"'OR'\"></hc-separator>\r\n *\r\n *   <h2>Section 2</h2>\r\n *   <p>Content for section 2...</p>\r\n * </div>\r\n * ```\r\n */\r\n@Component({\r\n    selector: \"hc-separator\",\r\n    imports: [],\r\n    templateUrl: \"./hc-separator.component.html\",\r\n    styleUrl: \"./hc-separator.component.scss\",\r\n})\r\nexport class HcSeparatorComponent {\r\n    /**\r\n     * Optional label text to display with the separator\r\n     *\r\n     * When provided, this text will be displayed as part of the separator,\r\n     * typically centered within or alongside the separator line. This is useful\r\n     * for creating labeled dividers that help organize content sections.\r\n     *\r\n     * @default \"\"\r\n     */\r\n    label: InputSignal<string> = input<string>(\"\");\r\n}\r\n","<span>{{ label() }}</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;MAOU,eAAe,CAAA;AACxB;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAyB,KAAK,CAAU,SAAS,CAAC;AAEvD;;;;;;;AAOG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,CAAC;AAE9C;;;;;;;;;AASG;AACH,IAAA,IAAI,GAA4B,KAAK,CAAa,QAAQ,CAAC;AAE3D;;;;;;;;;;;;;;AAcG;;IAEH,OAAO,GAAiC,MAAM,EAAc;uGAlDnD,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,udCjD5B,uKAGA,EAAA,MAAA,EAAA,CAAA,uvGAAA,CAAA,EAAA,CAAA;;2FD8Ca,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,EAAE,EAAA,QAAA,EAAA,uKAAA,EAAA,MAAA,EAAA,CAAA,uvGAAA,CAAA,EAAA;;;AE3Cf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;MAOU,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,mECxD5B,wKAKA,EAAA,MAAA,EAAA,CAAA,swEAAA,CAAA,EAAA,CAAA;;2FDmDa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,EAAE,EAAA,QAAA,EAAA,wKAAA,EAAA,MAAA,EAAA,CAAA,swEAAA,CAAA,EAAA;;;AElDf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDG;MAOU,oBAAoB,CAAA;AAC7B;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,CAAC;uGAVrC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,4MC1DjC,8BACA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA,CAAA;;2FDyDa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,WACf,EAAE,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA;;;AEtDf;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib/components";

package/lib/components/button/button.component.d.ts

@@ -0,0 +1,93 @@
+import { InputSignal, OutputEmitterRef } from "@angular/core";
+import { ButtonType, HcColor } from "../../types";
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic button -->
+ * <hc-button>Click me</hc-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Button with custom color and type -->
+ * <hc-button
+ *   [color]="'secondary'"
+ *   [type]="'button'"
+ *   (onClick)="handleClick($event)">
+ *   Submit Form
+ * </hc-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Button with custom CSS classes -->
+ * <hc-button
+ *   [class]="'my-custom-class another-class'"
+ *   [color]="'danger'">
+ *   Delete Item
+ * </hc-button>
+ * ```
+ *
+ * @see {@link HcColor} Type defining available color options
+ * @see {@link ButtonType} Type defining available button types
+ */
+export declare class ButtonComponent {
+    /**
+     * 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 "primary"
+     */
+    color: InputSignal<HcColor>;
+    /**
+     * 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 ""
+     */
+    class: InputSignal<string>;
+    /**
+     * 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 "submit"
+     */
+    type: InputSignal<ButtonType>;
+    /**
+     * 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
+     * }
+     * ```
+     */
+    onClick: OutputEmitterRef<MouseEvent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "hc-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}

package/lib/components/hc-card/hc-card.component.d.ts

@@ -0,0 +1,53 @@
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic card -->
+ * <hc-card>
+ *   <h3>Card Title</h3>
+ *   <p>This is some card content.</p>
+ * </hc-card>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ *
+ * @example
+ * ```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 {@link ButtonComponent} Related button component often used within cards
+ */
+export declare class HcCardComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HcCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HcCardComponent, "hc-card", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/hc-separator/hc-separator.component.d.ts

@@ -0,0 +1,66 @@
+import { InputSignal } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <!-- Basic separator without label -->
+ * <hc-separator></hc-separator>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Separator with label -->
+ * <hc-separator [label]="'Personal Information'"></hc-separator>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ *
+ * @example
+ * ```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>
+ * ```
+ */
+export declare class HcSeparatorComponent {
+    /**
+     * 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 ""
+     */
+    label: InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HcSeparatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HcSeparatorComponent, "hc-separator", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./button/button.component";
+export * from "./hc-card/hc-card.component";
+export * from "./hc-separator/hc-separator.component";

package/lib/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./types";

package/lib/types/types.d.ts

@@ -0,0 +1,2 @@
+export type HcColor = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "white";
+export type ButtonType = "button" | "submit" | "reset";

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@hichchi/ngx-ui",
+  "version": "0.0.1-alpha.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hichchidev/hichchi.git"
+  },
+  "keywords": [],
+  "author": "Waruna Udayanga",
+  "license": "MIT",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/core": "^19.0.0"
+  },
+  "module": "fesm2022/hichchi-ngx-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/hichchi-ngx-ui.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/styles/_mixins.scss

@@ -0,0 +1,34 @@
+@use "variables" as vars;
+
+@mixin hc-button-variant($color-type) {
+    $text-color: white;
+
+    @if $color-type == 'light' or $color-type == 'white' {
+        $text-color: vars.$text-color;
+    }
+
+    @if $color-type == 'white' {
+        background-color: white;
+        border: 1px solid vars.$border-color;
+    } @else {
+        background: var(--#{$color-type}-gradient);
+    }
+
+    color: $text-color;
+
+    &:hover {
+        color: $text-color;
+    }
+
+    &:active {
+        color: $text-color;
+    }
+}
+
+@mixin generate-button-variants {
+    @each $type in vars.$color-types {
+        .hc-button-#{$type} {
+            @include hc-button-variant($type);
+        }
+    }
+}

package/styles/_variables.scss

@@ -0,0 +1,126 @@
+:root {
+    --primary-color: #3b82f6;
+    --primary-hover-color: #2563eb;
+    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    --primary-border-color: #2563eb;
+
+    --secondary-color: #8b5cf6;
+    --secondary-hover-color: #7c3aed;
+    --secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);
+    --secondary-border-color: #7c3aed;
+
+    --success-color: #10b981;
+    --success-hover-color: #059669;
+    --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+    --success-border-color: #059669;
+
+    --warning-color: #f59e0b;
+    --warning-hover-color: #d97706;
+    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
+    --warning-border-color: #d97706;
+
+    --danger-color: #ef4444;
+    --danger-hover-color: #dc2626;
+    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+    --danger-border-color: #dc2626;
+
+    --info-color: #06b6d4;
+    --info-hover-color: #0891b2;
+    --info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
+    --info-border-color: #0891b2;
+
+    --light-color: #f8fafc;
+    --light-hover-color: #e2e8f0;
+    --light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    --light-border-color: #cbd5e1;
+
+    --dark-color: #1e293b;
+    --dark-hover-color: #0f172a;
+    --dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    --dark-border-color: #334155;
+
+    --text-color: #2d3748;
+    --text-light: #718096;
+    --bg-light: #ffffff;
+    --border-color: #e2e8f0;
+
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+    //--primary-color: #667eea;
+    //--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    //--secondary-color: #f093fb;
+    //--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    //--success-color: #4facfe;
+    //--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    //--danger-color: #fa709a;
+    //--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    //--text-color: #2d3748;
+    //--text-light: #718096;
+    //--bg-light: #f7fafc;
+    //--border-color: #e2e8f0;
+    //--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    //--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    //--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    //--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+$color-types: 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'white';
+
+$primary-color: var(--primary-color);
+$primary-hover-color: var(--primary-hover-color);
+$primary-gradient: var(--primary-gradient);
+$primary-border-color: var(--primary-border-color);
+
+$secondary-color: var(--secondary-color);
+$secondary-hover-color: var(--secondary-hover-color);
+$secondary-gradient: var(--secondary-gradient);
+$secondary-border-color: var(--secondary-border-color);
+
+$success-color: var(--success-color);
+$success-hover-color: var(--success-hover-color);
+$success-gradient: var(--success-gradient);
+$success-border-color: var(--success-border-color);
+
+$warning-color: var(--warning-color);
+$warning-hover-color: var(--warning-hover-color);
+$warning-gradient: var(--warning-gradient);
+$warning-border-color: var(--warning-border-color);
+
+$danger-color: var(--danger-color);
+$danger-hover-color: var(--danger-hover-color);
+$danger-gradient: var(--danger-gradient);
+$danger-border-color: var(--danger-border-color);
+
+$info-color: var(--info-color);
+$info-hover-color: var(--info-hover-color);
+$info-gradient: var(--info-gradient);
+$info-border-color: var(--info-border-color);
+
+$light-color: var(--light-color);
+$light-hover-color: var(--light-hover-color);
+$light-gradient: var(--light-gradient);
+$light-border-color: var(--light-border-color);
+
+$dark-color: var(--dark-color);
+$dark-hover-color: var(--dark-hover-color);
+$dark-gradient: var(--dark-gradient);
+$dark-border-color: var(--dark-border-color);
+
+$text-color: var(--text-color);
+$text-light: var(--text-light);
+$bg-light: var(--bg-light);
+$border-color: var(--border-color);
+
+$shadow-sm: var(--shadow-sm);
+$shadow-md: var(--shadow-md);
+$shadow-lg: var(--shadow-lg);
+$shadow-xl: var(--shadow-xl);
+
+$space-1 : 0.25rem;
+$space-2 : 0.5rem;
+$space-3 : 1rem;
+$space-4 : 1.5rem;
+$space-5 : 3rem;

package/styles/index.scss

@@ -0,0 +1,5 @@
+@use "_variables";
+@use "_mixins";
+
+@forward "variables";
+@forward "mixins";