@deay/ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,216 @@
+# @deay/ui
+
+A modern Angular UI component library built with Angular 19+, following Figma design specifications. Features accessible, customizable components with signal inputs and zoneless-ready architecture.
+
+## Features
+
+- Angular 19+ with standalone components
+- Signal inputs for reactivity
+- Zoneless-ready with OnPush change detection
+- Full accessibility support (ARIA)
+- Three size variants (sm, md, lg)
+- Comprehensive error and disabled states
+- Figma design specifications
+- TypeScript support
+
+## Installation
+
+```bash
+npm install @deay/ui
+```
+
+## Requirements
+
+- Angular 19.0.0 or higher
+- @angular/common 19.0.0 or higher
+- @angular/forms 19.0.0 or higher
+
+## Available Components
+
+### Button Component (`<dai-button>`)
+
+A versatile button component with loading states and multiple sizes.
+
+**Selector:** `dai-button`
+
+**Inputs:**
+- `variant`: `'primary'` (default) - Visual style variant
+- `size`: `'sm' | 'md' | 'lg'` (default: `'md'`) - Button size
+- `disabled`: `boolean` (default: `false`) - Disable the button
+- `loading`: `boolean` (default: `false`) - Show loading spinner
+
+**Usage:**
+
+```html
+<!-- Standard button -->
+<dai-button size="md">
+  Button
+</dai-button>
+
+<!-- All sizes -->
+<dai-button size="sm">Button</dai-button>
+<dai-button size="md">Button</dai-button>
+<dai-button size="lg">Button</dai-button>
+
+<!-- Loading state -->
+<dai-button size="md" [loading]="true">
+  Button
+</dai-button>
+
+<!-- Disabled state -->
+<dai-button size="md" [disabled]="true">
+  Button
+</dai-button>
+```
+
+**Design Specifications:**
+- Font: Poppins, weight 400
+- Border radius: 50px (fully rounded)
+- Size heights: sm (24px, 12px font), md (32px, 14px font), lg (40px, 16px font)
+- Hover: Primary/600 (#5164F7)
+- Focus: Primary/800 border (#112EAC)
+- Disabled: Primary/400 (#9098FA)
+- Loading: Primary/500 (#6B7FFF)
+
+### Input Component (`<dai-input>`)
+
+A feature-rich input component with validation states and Angular Forms integration.
+
+**Selector:** `dai-input`
+
+**Inputs:**
+- `label`: `string` - Label text displayed above input
+- `placeholder`: `string` (default: `'Text'`) - Placeholder text
+- `type`: `'text' | 'password' | 'email'` (default: `'text'`) - HTML input type
+- `size`: `'sm' | 'md' | 'lg'` (default: `'md'`) - Input size
+- `disabled`: `boolean` (default: `false`) - Disable the input
+- `errorMessage`: `string` - Error message that triggers error styling
+- `value`: `string` - Two-way bound value (Angular 19+ model)
+
+**Usage:**
+
+```html
+<!-- Basic input -->
+<dai-input
+  label="Label"
+  size="md"
+  placeholder="Text"
+/>
+
+<!-- All sizes -->
+<dai-input label="Small" size="sm" placeholder="Text" />
+<dai-input label="Medium" size="md" placeholder="Text" />
+<dai-input label="Large" size="lg" placeholder="Text" />
+
+<!-- Error state -->
+<dai-input
+  label="Email"
+  size="md"
+  placeholder="Text"
+  [errorMessage]="'Invalid email format'"
+/>
+
+<!-- Disabled state -->
+<dai-input
+  label="Label"
+  size="md"
+  placeholder="Text"
+  [disabled]="true"
+/>
+
+<!-- Two-way binding -->
+<dai-input
+  label="Email"
+  size="md"
+  placeholder="Text"
+  [(value)]="email"
+/>
+
+<!-- Reactive forms -->
+<dai-input
+  label="Email"
+  size="md"
+  [formControl]="emailControl"
+  [errorMessage]="emailControl.errors ? 'Error Message' : ''"
+/>
+```
+
+**Design Specifications:**
+- Font: Poppins, weight 400
+- Border radius: 50px (fully rounded)
+- Label: 16px, color #000000
+- Input text: 14px, placeholder #ABA7AF
+- Default border: #E5E0EB (1px)
+- Focus border sm: #061764 (2px)
+- Focus border md/lg: #112EAC (1px)
+- Error border: #D51A52 (2px)
+- Error text: #D51A52, 14px
+- Disabled: #DFDFDF background and border
+- Heights: sm (~36px), md (44px), lg (50px)
+- Gap between elements: 8px
+
+## Best Practices
+
+### Button
+- Use `size="sm"` for dense UI areas and tables
+- Use `size="md"` for standard buttons (default)
+- Use `size="lg"` for prominent call-to-action buttons
+- Loading state automatically disables the button
+- Always provide accessible button text
+
+### Input
+- Always provide labels for accessibility
+- Use appropriate input types for better mobile experience
+- Connect error messages to form validation
+- Use size="sm" for compact forms
+- Use size="md" for standard forms (default)
+- Use size="lg" for prominent inputs
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## Build Output
+
+The library builds to the `dist/` directory using ng-packagr and includes:
+- Angular library format
+- TypeScript definitions
+- Metadata
+- Styles
+
+## Accessibility
+
+All components follow WCAG 2.1 guidelines:
+- Proper ARIA attributes
+- Keyboard navigation support
+- Focus indicators
+- Screen reader support
+- Semantic HTML
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
+
+## Related Packages
+
+- [@deay/mcp](../mcp-server) - MCP server providing AI assistants with @deay/ui component documentation

package/fesm2022/deay-ui.mjs

@@ -0,0 +1,186 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, model, output, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class DaiButtonComponent {
+    // Signal Inputs (Angular 19+)
+    variant = input('primary');
+    size = input('md');
+    disabled = input(false);
+    loading = input(false);
+    // Computed properties for dynamic classes
+    computedClasses = computed(() => {
+        const classes = [
+            'dai-button',
+            `dai-button-${this.variant()}`,
+            `dai-button-${this.size()}`,
+        ];
+        if (this.loading()) {
+            classes.push('dai-button-loading');
+        }
+        return classes.join(' ');
+    });
+    // Computed disabled state (disabled or loading)
+    isDisabled = computed(() => this.disabled() || this.loading());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DaiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DaiButtonComponent, isStandalone: true, selector: "dai-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      [class]="computedClasses()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled()"
+      [attr.aria-busy]="loading()"
+    >
+      @if (loading()) {
+        <span class="dai-spinner" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [":host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5;border-radius:50px;cursor:pointer;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}button:focus-visible{outline:none}button:disabled{cursor:not-allowed;opacity:1}.dai-button-sm{padding:2px 8px;height:24px;font-size:12px;line-height:1.5em}.dai-button-md{padding:6px 12px;height:32px;font-size:14px;line-height:1.4285714285714286em}.dai-button-lg{padding:8px 16px;height:40px;font-size:16px;line-height:1.375em}.dai-button-primary{background-color:#2047f4;color:#fff}.dai-button-primary:hover:not(:disabled){background-color:#5164f7}.dai-button-primary:focus-visible{background-color:#2047f4;border-color:#112eac;box-shadow:0 0 0 1px #112eac}.dai-button-primary:disabled,.dai-button-primary.dai-button-loading{background-color:#9098fa}.dai-button-primary.dai-button-loading{cursor:wait}.dai-button-sm .dai-spinner{width:14px;height:14px}.dai-button-md .dai-spinner{width:16px;height:16px}.dai-button-lg .dai-spinner{width:22px;height:22px}.dai-spinner{display:inline-block;border:2px solid #FFFFFF;border-right-color:transparent;border-radius:50%;animation:dai-spin .6s linear infinite}@keyframes dai-spin{to{transform:rotate(360deg)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DaiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dai-button', standalone: true, template: `
+    <button
+      [class]="computedClasses()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled()"
+      [attr.aria-busy]="loading()"
+    >
+      @if (loading()) {
+        <span class="dai-spinner" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </button>
+  `, styles: [":host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5;border-radius:50px;cursor:pointer;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}button:focus-visible{outline:none}button:disabled{cursor:not-allowed;opacity:1}.dai-button-sm{padding:2px 8px;height:24px;font-size:12px;line-height:1.5em}.dai-button-md{padding:6px 12px;height:32px;font-size:14px;line-height:1.4285714285714286em}.dai-button-lg{padding:8px 16px;height:40px;font-size:16px;line-height:1.375em}.dai-button-primary{background-color:#2047f4;color:#fff}.dai-button-primary:hover:not(:disabled){background-color:#5164f7}.dai-button-primary:focus-visible{background-color:#2047f4;border-color:#112eac;box-shadow:0 0 0 1px #112eac}.dai-button-primary:disabled,.dai-button-primary.dai-button-loading{background-color:#9098fa}.dai-button-primary.dai-button-loading{cursor:wait}.dai-button-sm .dai-spinner{width:14px;height:14px}.dai-button-md .dai-spinner{width:16px;height:16px}.dai-button-lg .dai-spinner{width:22px;height:22px}.dai-spinner{display:inline-block;border:2px solid #FFFFFF;border-right-color:transparent;border-radius:50%;animation:dai-spin .6s linear infinite}@keyframes dai-spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+class DaiInputComponent {
+    // Signal Inputs
+    label = input('');
+    placeholder = input('Text');
+    type = input('text');
+    disabled = input(false);
+    errorMessage = input('');
+    size = input('md');
+    inputId = input(`dai-input-${Math.random().toString(36).substr(2, 9)}`);
+    // Model for two-way binding (Angular 19+)
+    value = model('');
+    // Outputs for custom handling
+    valueChange = output();
+    blur = output();
+    // Internal state
+    onChange = () => { };
+    onTouched = () => { };
+    // Computed error state
+    hasError = computed(() => !!this.errorMessage());
+    // Unique error message ID
+    errorId = () => `${this.inputId()}-error`;
+    // Handle input changes
+    onInput(event) {
+        const target = event.target;
+        const newValue = target.value;
+        this.value.set(newValue);
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Handled through the disabled input signal
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DaiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DaiInputComponent, isStandalone: true, selector: "dai-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blur: "blur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DaiInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="dai-input-wrapper" [class.dai-input-error]="hasError()">
+      <label [for]="inputId()" class="dai-input-label">
+        {{ label() }}
+      </label>
+
+      <input
+        [id]="inputId()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled()"
+        [class.dai-input-field]="true"
+        [class.dai-input-sm]="size() === 'sm'"
+        [class.dai-input-md]="size() === 'md'"
+        [class.dai-input-lg]="size() === 'lg'"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="hasError() ? errorId() : null"
+      />
+
+      @if (hasError() && errorMessage()) {
+        <span [id]="errorId()" class="dai-input-error-message" role="alert">
+          {{ errorMessage() }}
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.dai-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.dai-input-label{display:block;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;font-weight:400;line-height:1.5em;color:#000}.dai-input-field{width:100%;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:1.5em;color:#000;background-color:#fff;border:1px solid #E5E0EB;border-radius:50px;box-sizing:border-box;outline:none;transition:all .15s ease-in-out}.dai-input-field::placeholder{color:#aba7af}.dai-input-sm{padding:8px 12px}.dai-input-md{padding:12px;height:44px}.dai-input-lg{padding:14px 12px;height:50px}.dai-input-sm:focus{border-color:#061764;border-width:2px;padding:7px 11px}.dai-input-md:focus,.dai-input-lg:focus{border-color:#112eac;border-width:1px}.dai-input-field:disabled{background-color:#dfdfdf;border-color:#dfdfdf;color:#aba7af;cursor:not-allowed}.dai-input-error .dai-input-field{border-color:#d51a52;border-width:2px}.dai-input-error .dai-input-sm{padding:7px 11px}.dai-input-error .dai-input-md{padding:11px}.dai-input-error .dai-input-lg{padding:13px 11px}.dai-input-error-message{display:block;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:1.5em;color:#d51a52}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DaiInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dai-input', standalone: true, imports: [CommonModule], template: `
+    <div class="dai-input-wrapper" [class.dai-input-error]="hasError()">
+      <label [for]="inputId()" class="dai-input-label">
+        {{ label() }}
+      </label>
+
+      <input
+        [id]="inputId()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled()"
+        [class.dai-input-field]="true"
+        [class.dai-input-sm]="size() === 'sm'"
+        [class.dai-input-md]="size() === 'md'"
+        [class.dai-input-lg]="size() === 'lg'"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="hasError() ? errorId() : null"
+      />
+
+      @if (hasError() && errorMessage()) {
+        <span [id]="errorId()" class="dai-input-error-message" role="alert">
+          {{ errorMessage() }}
+        </span>
+      }
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DaiInputComponent),
+                            multi: true,
+                        },
+                    ], styles: [":host{display:block;width:100%}.dai-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.dai-input-label{display:block;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;font-weight:400;line-height:1.5em;color:#000}.dai-input-field{width:100%;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:1.5em;color:#000;background-color:#fff;border:1px solid #E5E0EB;border-radius:50px;box-sizing:border-box;outline:none;transition:all .15s ease-in-out}.dai-input-field::placeholder{color:#aba7af}.dai-input-sm{padding:8px 12px}.dai-input-md{padding:12px;height:44px}.dai-input-lg{padding:14px 12px;height:50px}.dai-input-sm:focus{border-color:#061764;border-width:2px;padding:7px 11px}.dai-input-md:focus,.dai-input-lg:focus{border-color:#112eac;border-width:1px}.dai-input-field:disabled{background-color:#dfdfdf;border-color:#dfdfdf;color:#aba7af;cursor:not-allowed}.dai-input-error .dai-input-field{border-color:#d51a52;border-width:2px}.dai-input-error .dai-input-sm{padding:7px 11px}.dai-input-error .dai-input-md{padding:11px}.dai-input-error .dai-input-lg{padding:13px 11px}.dai-input-error-message{display:block;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:1.5em;color:#d51a52}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of @deay/ui
+ */
+// Export components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DaiButtonComponent, DaiInputComponent };
+//# sourceMappingURL=deay-ui.mjs.map

package/fesm2022/deay-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"deay-ui.mjs","sources":["../../src/lib/button/button.component.ts","../../src/lib/input/input.component.ts","../../src/public-api.ts","../../src/deay-ui.ts"],"sourcesContent":["import { Component, input, computed } from '@angular/core';\nimport type { CvButtonVariant, CvButtonSize } from './button.variants';\n\n@Component({\n  selector: 'dai-button',\n  standalone: true,\n  template: `\n    <button\n      [class]=\"computedClasses()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      [attr.aria-busy]=\"loading()\"\n    >\n      @if (loading()) {\n        <span class=\"dai-spinner\" aria-hidden=\"true\"></span>\n      }\n      <ng-content />\n    </button>\n  `,\n  styles: [\n    `\n      :host {\n        display: inline-block;\n      }\n\n      button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-weight: 400;\n        line-height: 1.5;\n        border-radius: 50px;\n        cursor: pointer;\n        transition: all 150ms ease-in-out;\n        border: 1px solid transparent;\n        box-sizing: border-box;\n      }\n\n      button:focus-visible {\n        outline: none;\n      }\n\n      button:disabled {\n        cursor: not-allowed;\n        opacity: 1;\n      }\n\n      /* Sizes */\n      .dai-button-sm {\n        padding: 2px 8px;\n        height: 24px;\n        font-size: 12px;\n        line-height: 1.5em;\n      }\n\n      .dai-button-md {\n        padding: 6px 12px;\n        height: 32px;\n        font-size: 14px;\n        line-height: 1.4285714285714286em;\n      }\n\n      .dai-button-lg {\n        padding: 8px 16px;\n        height: 40px;\n        font-size: 16px;\n        line-height: 1.375em;\n      }\n\n      /* Primary Variant - Default State */\n      .dai-button-primary {\n        background-color: #2047F4;\n        color: #FFFFFF;\n      }\n\n      .dai-button-primary:hover:not(:disabled) {\n        background-color: #5164F7;\n      }\n\n      .dai-button-primary:focus-visible {\n        background-color: #2047F4;\n        border-color: #112EAC;\n        box-shadow: 0 0 0 1px #112EAC;\n      }\n\n      .dai-button-primary:disabled,\n      .dai-button-primary.dai-button-loading {\n        background-color: #9098FA;\n      }\n\n      .dai-button-primary.dai-button-loading {\n        cursor: wait;\n      }\n\n      /* Spinner sizes */\n      .dai-button-sm .dai-spinner {\n        width: 14px;\n        height: 14px;\n      }\n\n      .dai-button-md .dai-spinner {\n        width: 16px;\n        height: 16px;\n      }\n\n      .dai-button-lg .dai-spinner {\n        width: 22px;\n        height: 22px;\n      }\n\n      .dai-spinner {\n        display: inline-block;\n        border: 2px solid #FFFFFF;\n        border-right-color: transparent;\n        border-radius: 50%;\n        animation: dai-spin 0.6s linear infinite;\n      }\n\n      @keyframes dai-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ],\n})\nexport class DaiButtonComponent {\n  // Signal Inputs (Angular 19+)\n  readonly variant = input<CvButtonVariant>('primary');\n  readonly size = input<CvButtonSize>('md');\n  readonly disabled = input<boolean>(false);\n  readonly loading = input<boolean>(false);\n\n  // Computed properties for dynamic classes\n  protected computedClasses = computed(() => {\n    const classes = [\n      'dai-button',\n      `dai-button-${this.variant()}`,\n      `dai-button-${this.size()}`,\n    ];\n\n    if (this.loading()) {\n      classes.push('dai-button-loading');\n    }\n\n    return classes.join(' ');\n  });\n\n  // Computed disabled state (disabled or loading)\n  protected isDisabled = computed(() => this.disabled() || this.loading());\n}\n","import { Component, input, output, model, forwardRef, computed } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n  type ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\n\nexport type CvInputSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'dai-input',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div class=\"dai-input-wrapper\" [class.dai-input-error]=\"hasError()\">\n      <label [for]=\"inputId()\" class=\"dai-input-label\">\n        {{ label() }}\n      </label>\n\n      <input\n        [id]=\"inputId()\"\n        [type]=\"type()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onTouched()\"\n        [disabled]=\"disabled()\"\n        [class.dai-input-field]=\"true\"\n        [class.dai-input-sm]=\"size() === 'sm'\"\n        [class.dai-input-md]=\"size() === 'md'\"\n        [class.dai-input-lg]=\"size() === 'lg'\"\n        [attr.aria-invalid]=\"hasError()\"\n        [attr.aria-describedby]=\"hasError() ? errorId() : null\"\n      />\n\n      @if (hasError() && errorMessage()) {\n        <span [id]=\"errorId()\" class=\"dai-input-error-message\" role=\"alert\">\n          {{ errorMessage() }}\n        </span>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      .dai-input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        width: 100%;\n      }\n\n      .dai-input-label {\n        display: block;\n        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 1.5em;\n        color: #000000;\n      }\n\n      .dai-input-field {\n        width: 100%;\n        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 1.5em;\n        color: #000000;\n        background-color: #FFFFFF;\n        border: 1px solid #E5E0EB;\n        border-radius: 50px;\n        box-sizing: border-box;\n        outline: none;\n        transition: all 150ms ease-in-out;\n      }\n\n      .dai-input-field::placeholder {\n        color: #ABA7AF;\n      }\n\n      /* Sizes */\n      .dai-input-sm {\n        padding: 8px 12px;\n      }\n\n      .dai-input-md {\n        padding: 12px;\n        height: 44px;\n      }\n\n      .dai-input-lg {\n        padding: 14px 12px;\n        height: 50px;\n      }\n\n      /* Focus State */\n      .dai-input-sm:focus {\n        border-color: #061764;\n        border-width: 2px;\n        padding: 7px 11px; /* Adjust for 2px border */\n      }\n\n      .dai-input-md:focus,\n      .dai-input-lg:focus {\n        border-color: #112EAC;\n        border-width: 1px;\n      }\n\n      /* Disabled State */\n      .dai-input-field:disabled {\n        background-color: #DFDFDF;\n        border-color: #DFDFDF;\n        color: #ABA7AF;\n        cursor: not-allowed;\n      }\n\n      /* Error State */\n      .dai-input-error .dai-input-field {\n        border-color: #D51A52;\n        border-width: 2px;\n      }\n\n      .dai-input-error .dai-input-sm {\n        padding: 7px 11px; /* Adjust for 2px border */\n      }\n\n      .dai-input-error .dai-input-md {\n        padding: 11px; /* Adjust for 2px border */\n      }\n\n      .dai-input-error .dai-input-lg {\n        padding: 13px 11px; /* Adjust for 2px border */\n      }\n\n      .dai-input-error-message {\n        display: block;\n        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 1.5em;\n        color: #D51A52;\n      }\n    `,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DaiInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class DaiInputComponent implements ControlValueAccessor {\n  // Signal Inputs\n  readonly label = input<string>('');\n  readonly placeholder = input<string>('Text');\n  readonly type = input<'text' | 'password' | 'email'>('text');\n  readonly disabled = input<boolean>(false);\n  readonly errorMessage = input<string>('');\n  readonly size = input<CvInputSize>('md');\n  readonly inputId = input<string>(`dai-input-${Math.random().toString(36).substr(2, 9)}`);\n\n  // Model for two-way binding (Angular 19+)\n  readonly value = model<string>('');\n\n  // Outputs for custom handling\n  readonly valueChange = output<string>();\n  readonly blur = output<void>();\n\n  // Internal state\n  private onChange: (value: string) => void = () => {};\n  onTouched: () => void = () => {};\n\n  // Computed error state\n  protected hasError = computed(() => !!this.errorMessage());\n\n  // Unique error message ID\n  protected errorId = () => `${this.inputId()}-error`;\n\n  // Handle input changes\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const newValue = target.value;\n    this.value.set(newValue);\n    this.onChange(newValue);\n    this.valueChange.emit(newValue);\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value || '');\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    // Handled through the disabled input signal\n  }\n}\n","/*\n * Public API Surface of @deay/ui\n */\n\n// Export components\nexport * from './lib/button/button.component';\nexport * from './lib/button/button.variants';\nexport * from './lib/input/input.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@deay/ui" />
+export * from './public-api';

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

@@ -0,0 +1,12 @@
+import type { CvButtonSize } from './button.variants';
+import * as i0 from "@angular/core";
+export declare class DaiButtonComponent {
+    readonly variant: import("@angular/core").InputSignal<"primary">;
+    readonly size: import("@angular/core").InputSignal<CvButtonSize>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly loading: import("@angular/core").InputSignal<boolean>;
+    protected computedClasses: import("@angular/core").Signal<string>;
+    protected isDisabled: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaiButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaiButtonComponent, "dai-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/{src/lib/button/button.variants.ts → lib/button/button.variants.d.ts}

@@ -1,3 +1,2 @@
-// Only primary variant based on Figma design
 export type CvButtonVariant = 'primary';
 export type CvButtonSize = 'sm' | 'md' | 'lg';

package/lib/input/input.component.d.ts

@@ -0,0 +1,26 @@
+import { type ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export type CvInputSize = 'sm' | 'md' | 'lg';
+export declare class DaiInputComponent implements ControlValueAccessor {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly type: import("@angular/core").InputSignal<"text" | "password" | "email">;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly errorMessage: import("@angular/core").InputSignal<string>;
+    readonly size: import("@angular/core").InputSignal<CvInputSize>;
+    readonly inputId: import("@angular/core").InputSignal<string>;
+    readonly value: import("@angular/core").ModelSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly blur: import("@angular/core").OutputEmitterRef<void>;
+    private onChange;
+    onTouched: () => void;
+    protected hasError: import("@angular/core").Signal<boolean>;
+    protected errorId: () => string;
+    protected onInput(event: Event): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaiInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaiInputComponent, "dai-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blur": "blur"; }, never, never, true, never>;
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@deay/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "peerDependencies": {
-    "@angular/core": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/forms": "^19.0.0"
+    "@angular/core": "19.2.17",
+    "@angular/common": "19.2.17",
+    "@angular/forms": "19.2.17",
+    "zone.js": "0.15.1"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "2.8.1"
   },
   "scripts": {
     "build": "ng-packagr -p ng-package.json"

package/{src/public-api.ts → public-api.d.ts}

@@ -1,8 +1,3 @@
-/*
- * Public API Surface of @deay/ui
- */
-
-// Export components
 export * from './lib/button/button.component';
 export * from './lib/button/button.variants';
 export * from './lib/input/input.component';

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ui",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/button/button.component.ts

@@ -1,153 +0,0 @@
-import { Component, input, computed } from '@angular/core';
-import type { CvButtonVariant, CvButtonSize } from './button.variants';
-
-@Component({
-  selector: 'dai-button',
-  standalone: true,
-  template: `
-    <button
-      [class]="computedClasses()"
-      [disabled]="isDisabled()"
-      [attr.aria-disabled]="isDisabled()"
-      [attr.aria-busy]="loading()"
-    >
-      @if (loading()) {
-        <span class="dai-spinner" aria-hidden="true"></span>
-      }
-      <ng-content />
-    </button>
-  `,
-  styles: [
-    `
-      :host {
-        display: inline-block;
-      }
-
-      button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
-        font-weight: 400;
-        line-height: 1.5;
-        border-radius: 50px;
-        cursor: pointer;
-        transition: all 150ms ease-in-out;
-        border: 1px solid transparent;
-        box-sizing: border-box;
-      }
-
-      button:focus-visible {
-        outline: none;
-      }
-
-      button:disabled {
-        cursor: not-allowed;
-        opacity: 1;
-      }
-
-      /* Sizes */
-      .dai-button-sm {
-        padding: 2px 8px;
-        height: 24px;
-        font-size: 12px;
-        line-height: 1.5em;
-      }
-
-      .dai-button-md {
-        padding: 6px 12px;
-        height: 32px;
-        font-size: 14px;
-        line-height: 1.4285714285714286em;
-      }
-
-      .dai-button-lg {
-        padding: 8px 16px;
-        height: 40px;
-        font-size: 16px;
-        line-height: 1.375em;
-      }
-
-      /* Primary Variant - Default State */
-      .dai-button-primary {
-        background-color: #2047F4;
-        color: #FFFFFF;
-      }
-
-      .dai-button-primary:hover:not(:disabled) {
-        background-color: #5164F7;
-      }
-
-      .dai-button-primary:focus-visible {
-        background-color: #2047F4;
-        border-color: #112EAC;
-        box-shadow: 0 0 0 1px #112EAC;
-      }
-
-      .dai-button-primary:disabled,
-      .dai-button-primary.dai-button-loading {
-        background-color: #9098FA;
-      }
-
-      .dai-button-primary.dai-button-loading {
-        cursor: wait;
-      }
-
-      /* Spinner sizes */
-      .dai-button-sm .dai-spinner {
-        width: 14px;
-        height: 14px;
-      }
-
-      .dai-button-md .dai-spinner {
-        width: 16px;
-        height: 16px;
-      }
-
-      .dai-button-lg .dai-spinner {
-        width: 22px;
-        height: 22px;
-      }
-
-      .dai-spinner {
-        display: inline-block;
-        border: 2px solid #FFFFFF;
-        border-right-color: transparent;
-        border-radius: 50%;
-        animation: dai-spin 0.6s linear infinite;
-      }
-
-      @keyframes dai-spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-    `,
-  ],
-})
-export class DaiButtonComponent {
-  // Signal Inputs (Angular 19+)
-  readonly variant = input<CvButtonVariant>('primary');
-  readonly size = input<CvButtonSize>('md');
-  readonly disabled = input<boolean>(false);
-  readonly loading = input<boolean>(false);
-
-  // Computed properties for dynamic classes
-  protected computedClasses = computed(() => {
-    const classes = [
-      'dai-button',
-      `dai-button-${this.variant()}`,
-      `dai-button-${this.size()}`,
-    ];
-
-    if (this.loading()) {
-      classes.push('dai-button-loading');
-    }
-
-    return classes.join(' ');
-  });
-
-  // Computed disabled state (disabled or loading)
-  protected isDisabled = computed(() => this.disabled() || this.loading());
-}

package/src/lib/input/input.component.ts

@@ -1,209 +0,0 @@
-import { Component, input, output, model, forwardRef, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  type ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-
-export type CvInputSize = 'sm' | 'md' | 'lg';
-
-@Component({
-  selector: 'dai-input',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="dai-input-wrapper" [class.dai-input-error]="hasError()">
-      <label [for]="inputId()" class="dai-input-label">
-        {{ label() }}
-      </label>
-
-      <input
-        [id]="inputId()"
-        [type]="type()"
-        [placeholder]="placeholder()"
-        [value]="value()"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        [disabled]="disabled()"
-        [class.dai-input-field]="true"
-        [class.dai-input-sm]="size() === 'sm'"
-        [class.dai-input-md]="size() === 'md'"
-        [class.dai-input-lg]="size() === 'lg'"
-        [attr.aria-invalid]="hasError()"
-        [attr.aria-describedby]="hasError() ? errorId() : null"
-      />
-
-      @if (hasError() && errorMessage()) {
-        <span [id]="errorId()" class="dai-input-error-message" role="alert">
-          {{ errorMessage() }}
-        </span>
-      }
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      .dai-input-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        width: 100%;
-      }
-
-      .dai-input-label {
-        display: block;
-        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 1.5em;
-        color: #000000;
-      }
-
-      .dai-input-field {
-        width: 100%;
-        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 1.5em;
-        color: #000000;
-        background-color: #FFFFFF;
-        border: 1px solid #E5E0EB;
-        border-radius: 50px;
-        box-sizing: border-box;
-        outline: none;
-        transition: all 150ms ease-in-out;
-      }
-
-      .dai-input-field::placeholder {
-        color: #ABA7AF;
-      }
-
-      /* Sizes */
-      .dai-input-sm {
-        padding: 8px 12px;
-      }
-
-      .dai-input-md {
-        padding: 12px;
-        height: 44px;
-      }
-
-      .dai-input-lg {
-        padding: 14px 12px;
-        height: 50px;
-      }
-
-      /* Focus State */
-      .dai-input-sm:focus {
-        border-color: #061764;
-        border-width: 2px;
-        padding: 7px 11px; /* Adjust for 2px border */
-      }
-
-      .dai-input-md:focus,
-      .dai-input-lg:focus {
-        border-color: #112EAC;
-        border-width: 1px;
-      }
-
-      /* Disabled State */
-      .dai-input-field:disabled {
-        background-color: #DFDFDF;
-        border-color: #DFDFDF;
-        color: #ABA7AF;
-        cursor: not-allowed;
-      }
-
-      /* Error State */
-      .dai-input-error .dai-input-field {
-        border-color: #D51A52;
-        border-width: 2px;
-      }
-
-      .dai-input-error .dai-input-sm {
-        padding: 7px 11px; /* Adjust for 2px border */
-      }
-
-      .dai-input-error .dai-input-md {
-        padding: 11px; /* Adjust for 2px border */
-      }
-
-      .dai-input-error .dai-input-lg {
-        padding: 13px 11px; /* Adjust for 2px border */
-      }
-
-      .dai-input-error-message {
-        display: block;
-        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 1.5em;
-        color: #D51A52;
-      }
-    `,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DaiInputComponent),
-      multi: true,
-    },
-  ],
-})
-export class DaiInputComponent implements ControlValueAccessor {
-  // Signal Inputs
-  readonly label = input<string>('');
-  readonly placeholder = input<string>('Text');
-  readonly type = input<'text' | 'password' | 'email'>('text');
-  readonly disabled = input<boolean>(false);
-  readonly errorMessage = input<string>('');
-  readonly size = input<CvInputSize>('md');
-  readonly inputId = input<string>(`dai-input-${Math.random().toString(36).substr(2, 9)}`);
-
-  // Model for two-way binding (Angular 19+)
-  readonly value = model<string>('');
-
-  // Outputs for custom handling
-  readonly valueChange = output<string>();
-  readonly blur = output<void>();
-
-  // Internal state
-  private onChange: (value: string) => void = () => {};
-  onTouched: () => void = () => {};
-
-  // Computed error state
-  protected hasError = computed(() => !!this.errorMessage());
-
-  // Unique error message ID
-  protected errorId = () => `${this.inputId()}-error`;
-
-  // Handle input changes
-  protected onInput(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    this.value.set(newValue);
-    this.onChange(newValue);
-    this.valueChange.emit(newValue);
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: string): void {
-    this.value.set(value || '');
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    // Handled through the disabled input signal
-  }
-}

package/tsconfig.lib.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc/packages/ui",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
-}