@smuikit/angular 0.1.0

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

@@ -0,0 +1,161 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NgZone,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  createButtonMachine,
+  connectButton,
+  type ButtonConnectReturn,
+  type ButtonState,
+  type ButtonContext,
+  type ButtonEvent,
+} from '@smuikit/core';
+import { MachineAdapter } from '../../use-machine.service';
+import { normalizeProps, applyProps } from '../../normalize-props';
+
+@Component({
+  selector: 'smui-button',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      #buttonEl
+      [class]="hostClass"
+      [attr.data-state]="api.state"
+      [attr.data-variant]="variant"
+      [attr.data-size]="size"
+    >
+      <span
+        *ngIf="api.isLoading"
+        class="smui-button__loader"
+        aria-hidden="true"
+      >
+        <span class="smui-button__spinner"></span>
+      </span>
+      <span
+        class="smui-button__content"
+        [style.visibility]="api.isLoading ? 'hidden' : 'visible'"
+      >
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-block;
+      }
+      .smui-button__loader {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .smui-button__content {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+    `,
+  ],
+})
+export class ButtonComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() variant: ButtonContext['variant'] = 'primary';
+  @Input() size: ButtonContext['size'] = 'md';
+  @Input() disabled = false;
+  @Input() loading = false;
+
+  @Output() buttonClick = new EventEmitter<Event>();
+
+  @ViewChild('buttonEl', { static: true }) buttonElRef!: ElementRef<HTMLButtonElement>;
+
+  api!: ButtonConnectReturn;
+
+  private adapter!: MachineAdapter<ButtonState, ButtonContext, ButtonEvent>;
+  private listenerCleanups: (() => void)[] = [];
+
+  get hostClass(): string {
+    return `smui-button smui-button--${this.variant} smui-button--${this.size}`;
+  }
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.adapter = MachineAdapter.create(
+      this.ngZone,
+      createButtonMachine({
+        variant: this.variant,
+        size: this.size,
+        disabled: this.disabled,
+        loading: this.loading,
+      }),
+    );
+    this.updateApi();
+    this.applyPropsToElement();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.adapter) return;
+
+    if (changes['disabled']) {
+      this.adapter.send({ type: 'SET_DISABLED', disabled: this.disabled });
+    }
+    if (changes['loading']) {
+      this.adapter.send({ type: 'SET_LOADING', loading: this.loading });
+    }
+
+    this.updateApi();
+    this.applyPropsToElement();
+  }
+
+  ngOnDestroy(): void {
+    this.cleanupListeners();
+    this.adapter?.destroy();
+  }
+
+  private updateApi(): void {
+    this.api = connectButton({
+      state: this.adapter.state,
+      context: this.adapter.context,
+      send: (event) => {
+        this.adapter.send(event as ButtonEvent);
+        this.updateApi();
+        this.applyPropsToElement();
+        this.cdr.markForCheck();
+      },
+      onClick: (event) => {
+        this.buttonClick.emit(event as Event);
+      },
+    });
+  }
+
+  private applyPropsToElement(): void {
+    if (!this.buttonElRef?.nativeElement) return;
+    this.cleanupListeners();
+    const normalized = normalizeProps(this.api.rootProps);
+    this.listenerCleanups = applyProps(this.buttonElRef.nativeElement, normalized);
+  }
+
+  private cleanupListeners(): void {
+    for (const cleanup of this.listenerCleanups) {
+      cleanup();
+    }
+    this.listenerCleanups = [];
+  }
+}

package/src/lib/components/card/card.component.ts

@@ -0,0 +1,197 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  connectCard,
+  type CardConnectReturn,
+  type CardConnectOptions,
+} from '@smuikit/core';
+import { normalizeProps, applyProps } from '../../normalize-props';
+
+// ---------------------------------------------------------------------------
+// CardHeaderComponent
+// ---------------------------------------------------------------------------
+@Component({
+  selector: 'smui-card-header',
+  standalone: true,
+  template: `
+    <div #headerEl class="smui-card__header" data-part="header">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .smui-card__header {
+        padding: var(--smui-card-header-padding, 16px 24px);
+        border-bottom: 1px solid var(--smui-color-border, #e5e7eb);
+      }
+    `,
+  ],
+})
+export class CardHeaderComponent {}
+
+// ---------------------------------------------------------------------------
+// CardBodyComponent
+// ---------------------------------------------------------------------------
+@Component({
+  selector: 'smui-card-body',
+  standalone: true,
+  template: `
+    <div #bodyEl class="smui-card__body" data-part="body">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .smui-card__body {
+        padding: var(--smui-card-body-padding, 24px);
+      }
+    `,
+  ],
+})
+export class CardBodyComponent {}
+
+// ---------------------------------------------------------------------------
+// CardFooterComponent
+// ---------------------------------------------------------------------------
+@Component({
+  selector: 'smui-card-footer',
+  standalone: true,
+  template: `
+    <div #footerEl class="smui-card__footer" data-part="footer">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .smui-card__footer {
+        padding: var(--smui-card-footer-padding, 16px 24px);
+        border-top: 1px solid var(--smui-color-border, #e5e7eb);
+      }
+    `,
+  ],
+})
+export class CardFooterComponent {}
+
+// ---------------------------------------------------------------------------
+// CardComponent
+// ---------------------------------------------------------------------------
+@Component({
+  selector: 'smui-card',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      #cardEl
+      class="smui-card"
+      [class.smui-card--interactive]="interactive"
+      [attr.data-variant]="variant"
+      [attr.data-padding]="padding"
+      [attr.role]="interactive ? 'button' : null"
+      [attr.tabindex]="interactive ? 0 : null"
+      (click)="onCardClick($event)"
+      (keydown)="onCardKeydown($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .smui-card {
+        border-radius: var(--smui-card-radius, 8px);
+        overflow: hidden;
+      }
+      .smui-card[data-variant='elevated'] {
+        box-shadow: var(
+          --smui-card-shadow,
+          0 1px 3px rgba(0, 0, 0, 0.1),
+          0 1px 2px rgba(0, 0, 0, 0.06)
+        );
+      }
+      .smui-card[data-variant='outlined'] {
+        border: 1px solid var(--smui-color-border, #e5e7eb);
+      }
+      .smui-card[data-variant='filled'] {
+        background: var(--smui-color-surface, #f9fafb);
+      }
+      .smui-card--interactive {
+        cursor: pointer;
+        transition: box-shadow 0.2s ease;
+      }
+      .smui-card--interactive:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+      .smui-card--interactive:focus-visible {
+        outline: 2px solid var(--smui-color-primary, #6200ee);
+        outline-offset: 2px;
+      }
+    `,
+  ],
+})
+export class CardComponent implements OnInit, OnChanges {
+  @Input() variant: 'elevated' | 'outlined' | 'filled' = 'elevated';
+  @Input() padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
+  @Input() interactive = false;
+
+  @Output() cardClick = new EventEmitter<Event>();
+
+  @ViewChild('cardEl', { static: true }) cardElRef!: ElementRef<HTMLElement>;
+
+  private api!: CardConnectReturn;
+  private listenerCleanups: (() => void)[] = [];
+
+  ngOnInit(): void {
+    this.updateApi();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateApi();
+  }
+
+  onCardClick(event: Event): void {
+    if (this.interactive) {
+      this.cardClick.emit(event);
+    }
+  }
+
+  onCardKeydown(event: KeyboardEvent): void {
+    if (this.interactive && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      this.cardClick.emit(event);
+    }
+  }
+
+  private updateApi(): void {
+    this.api = connectCard({
+      variant: this.variant,
+      padding: this.padding,
+      interactive: this.interactive,
+      onClick: (event) => {
+        this.cardClick.emit(event as Event);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,197 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NgZone,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  createInputMachine,
+  connectInput,
+  type InputConnectReturn,
+  type InputState,
+  type InputContext,
+  type InputEvent,
+} from '@smuikit/core';
+import { MachineAdapter } from '../../use-machine.service';
+import { normalizeProps, applyProps } from '../../normalize-props';
+
+@Component({
+  selector: 'smui-input',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="smui-input"
+      [attr.data-state]="api.state"
+      [attr.data-disabled]="disabled ? '' : null"
+    >
+      <label
+        *ngIf="label"
+        #labelEl
+        class="smui-input__label"
+        [attr.for]="inputId"
+      >
+        {{ label }}
+        <span *ngIf="required" class="smui-input__required" aria-hidden="true">*</span>
+      </label>
+
+      <input
+        #inputEl
+        class="smui-input__field"
+        [attr.id]="inputId"
+        [attr.placeholder]="placeholder"
+        [value]="api.value"
+      />
+
+      <div
+        *ngIf="api.hasError && error"
+        #errorEl
+        class="smui-input__error"
+        role="alert"
+        aria-live="polite"
+      >
+        {{ error }}
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .smui-input__label {
+        display: block;
+        margin-bottom: 4px;
+      }
+      .smui-input__required {
+        color: var(--smui-color-danger, #dc2626);
+        margin-left: 2px;
+      }
+      .smui-input__field {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .smui-input__error {
+        color: var(--smui-color-danger, #dc2626);
+        font-size: 0.875rem;
+        margin-top: 4px;
+      }
+    `,
+  ],
+})
+export class InputComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() label = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() error: string | null = null;
+  @Input() required = false;
+  @Input() value = '';
+  @Input() inputId = `smui-input-${Date.now()}`;
+
+  @Output() valueChange = new EventEmitter<string>();
+
+  @ViewChild('inputEl', { static: true }) inputElRef!: ElementRef<HTMLInputElement>;
+  @ViewChild('labelEl') labelElRef?: ElementRef<HTMLLabelElement>;
+  @ViewChild('errorEl') errorElRef?: ElementRef<HTMLDivElement>;
+
+  api!: InputConnectReturn;
+
+  private adapter!: MachineAdapter<InputState, InputContext, InputEvent>;
+  private listenerCleanups: (() => void)[] = [];
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.adapter = MachineAdapter.create(
+      this.ngZone,
+      createInputMachine({
+        value: this.value,
+        disabled: this.disabled,
+        required: this.required,
+        error: this.error,
+        placeholder: this.placeholder,
+        label: this.label,
+        id: this.inputId,
+      }),
+    );
+    this.updateApi();
+    this.applyPropsToInput();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.adapter) return;
+
+    if (changes['error']) {
+      this.adapter.send({ type: 'SET_ERROR', error: this.error });
+    }
+    if (changes['value'] && !changes['value'].firstChange) {
+      this.adapter.send({ type: 'CHANGE', value: this.value });
+    }
+
+    this.updateApi();
+    this.applyPropsToInput();
+  }
+
+  ngOnDestroy(): void {
+    this.cleanupListeners();
+    this.adapter?.destroy();
+  }
+
+  private updateApi(): void {
+    this.api = connectInput({
+      state: this.adapter.state,
+      context: this.adapter.context,
+      send: (event) => {
+        this.adapter.send(event as InputEvent);
+        this.updateApi();
+        this.applyPropsToInput();
+        this.cdr.markForCheck();
+      },
+      onChange: (val: string) => {
+        this.valueChange.emit(val);
+      },
+    });
+  }
+
+  private applyPropsToInput(): void {
+    if (!this.inputElRef?.nativeElement) return;
+    this.cleanupListeners();
+
+    const normalized = normalizeProps(this.api.inputProps);
+    this.listenerCleanups = applyProps(this.inputElRef.nativeElement, normalized);
+
+    // Apply label props
+    if (this.labelElRef?.nativeElement) {
+      const labelNorm = normalizeProps(this.api.labelProps);
+      this.listenerCleanups.push(...applyProps(this.labelElRef.nativeElement, labelNorm));
+    }
+
+    // Apply error props
+    if (this.errorElRef?.nativeElement) {
+      const errorNorm = normalizeProps(this.api.errorProps);
+      this.listenerCleanups.push(...applyProps(this.errorElRef.nativeElement, errorNorm));
+    }
+  }
+
+  private cleanupListeners(): void {
+    for (const cleanup of this.listenerCleanups) {
+      cleanup();
+    }
+    this.listenerCleanups = [];
+  }
+}