@deay/ui 0.0.1

package/ng-package.json

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

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@deay/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "peerDependencies": {
+    "@angular/core": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/forms": "^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json"
+  }
+}

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

@@ -0,0 +1,153 @@
+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/button/button.variants.ts

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

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

@@ -0,0 +1,209 @@
+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/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * 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/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "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"]
+}