@smuikit/angular 0.1.0

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

@@ -0,0 +1,216 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NgZone,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  HostListener,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  createModalMachine,
+  connectModal,
+  type ModalConnectReturn,
+  type ModalState,
+  type ModalContext,
+  type ModalEvent,
+} from '@smuikit/core';
+import { MachineAdapter } from '../../use-machine.service';
+import { normalizeProps, applyProps } from '../../normalize-props';
+
+@Component({
+  selector: 'smui-modal',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <!-- Trigger slot -->
+    <div #triggerEl class="smui-modal__trigger" (click)="open()">
+      <ng-content select="[smuiModalTrigger]"></ng-content>
+    </div>
+
+    <!-- Overlay + Content (portal-like fixed overlay) -->
+    <ng-container *ngIf="api.isOpen">
+      <div
+        #overlayEl
+        class="smui-modal__overlay"
+        [attr.data-state]="api.state"
+        (click)="onOverlayClick($event)"
+      ></div>
+      <div
+        #contentEl
+        class="smui-modal__content"
+        [attr.data-state]="api.state"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        tabindex="-1"
+      >
+        <div class="smui-modal__header">
+          <div [attr.id]="titleId" class="smui-modal__title">
+            <ng-content select="[smuiModalTitle]"></ng-content>
+          </div>
+          <button
+            #closeEl
+            class="smui-modal__close"
+            aria-label="Close"
+            (click)="close()"
+            type="button"
+          >
+            &times;
+          </button>
+        </div>
+        <div class="smui-modal__body">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-container>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-block;
+      }
+      .smui-modal__overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+      }
+      .smui-modal__content {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--smui-color-surface, #ffffff);
+        border-radius: 8px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        min-width: 320px;
+        max-width: 90vw;
+        max-height: 90vh;
+        overflow-y: auto;
+        outline: none;
+      }
+      .smui-modal__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 24px;
+        border-bottom: 1px solid var(--smui-color-border, #e5e7eb);
+      }
+      .smui-modal__title {
+        font-weight: 600;
+        font-size: 1.125rem;
+      }
+      .smui-modal__close {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 4px 8px;
+        line-height: 1;
+        border-radius: 4px;
+      }
+      .smui-modal__close:hover {
+        background: var(--smui-color-hover, #f3f4f6);
+      }
+      .smui-modal__body {
+        padding: 24px;
+      }
+    `,
+  ],
+})
+export class ModalComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() closeOnOverlayClick = true;
+  @Input() closeOnEscape = true;
+
+  @Output() openChange = new EventEmitter<boolean>();
+
+  @ViewChild('triggerEl') triggerElRef?: ElementRef<HTMLElement>;
+  @ViewChild('contentEl') contentElRef?: ElementRef<HTMLElement>;
+  @ViewChild('overlayEl') overlayElRef?: ElementRef<HTMLElement>;
+  @ViewChild('closeEl') closeElRef?: ElementRef<HTMLButtonElement>;
+
+  api!: ModalConnectReturn;
+  titleId = `smui-modal-title-${Date.now()}`;
+
+  private adapter!: MachineAdapter<ModalState, ModalContext, ModalEvent>;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.adapter = MachineAdapter.create(
+      this.ngZone,
+      createModalMachine({
+        closeOnOverlayClick: this.closeOnOverlayClick,
+        closeOnEscape: this.closeOnEscape,
+      }),
+    );
+    this.updateApi();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // Modal machine doesn't have dynamic context updates for these,
+    // but we store them for local use in event handlers.
+  }
+
+  ngOnDestroy(): void {
+    this.adapter?.destroy();
+  }
+
+  /** Open the modal programmatically. */
+  open(): void {
+    this.adapter.send({ type: 'OPEN' });
+    this.updateApi();
+    this.openChange.emit(true);
+    this.cdr.markForCheck();
+  }
+
+  /** Close the modal programmatically. */
+  close(): void {
+    this.adapter.send({ type: 'CLOSE' });
+    this.updateApi();
+    this.openChange.emit(false);
+    this.cdr.markForCheck();
+  }
+
+  onOverlayClick(event: MouseEvent): void {
+    if (this.closeOnOverlayClick) {
+      this.close();
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeydown(event: KeyboardEvent): void {
+    if (this.closeOnEscape && event.key === 'Escape' && this.api.isOpen) {
+      this.close();
+    }
+  }
+
+  private updateApi(): void {
+    this.api = connectModal({
+      state: this.adapter.state,
+      context: this.adapter.context,
+      send: (event) => {
+        this.adapter.send(event as ModalEvent);
+        this.updateApi();
+        this.cdr.markForCheck();
+      },
+      onOpenChange: (isOpen: boolean) => {
+        this.openChange.emit(isOpen);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,120 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  Renderer2,
+  ViewChild,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  connectTypography,
+  type TypographyConnectReturn,
+  type TypographyConnectOptions,
+  type TypographyVariant,
+} from '@smuikit/core';
+
+@Component({
+  selector: 'smui-typography',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-container [ngSwitch]="element">
+      <h1 *ngSwitchCase="'h1'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h1>
+      <h2 *ngSwitchCase="'h2'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h2>
+      <h3 *ngSwitchCase="'h3'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h3>
+      <h4 *ngSwitchCase="'h4'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h4>
+      <h5 *ngSwitchCase="'h5'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h5>
+      <h6 *ngSwitchCase="'h6'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h6>
+      <span *ngSwitchCase="'span'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </span>
+      <p *ngSwitchDefault #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </p>
+    </ng-container>
+
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+})
+export class TypographyComponent implements OnInit, OnChanges {
+  @Input() variant: TypographyVariant = 'body1';
+  @Input() align?: 'left' | 'center' | 'right';
+  @Input() truncate = false;
+  @Input() color?: string;
+
+  element = 'p';
+
+  private api!: TypographyConnectReturn;
+
+  @ViewChild('textEl', { static: false })
+  set textElRef(ref: ElementRef<HTMLElement> | undefined) {
+    if (ref) {
+      this.applyStyles(ref.nativeElement);
+    }
+  }
+
+  constructor(private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    this.updateApi();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateApi();
+  }
+
+  private updateApi(): void {
+    this.api = connectTypography({
+      variant: this.variant,
+      align: this.align,
+      truncate: this.truncate,
+      color: this.color,
+    });
+    this.element = this.api.element;
+  }
+
+  private applyStyles(el: HTMLElement): void {
+    if (!this.api) return;
+
+    const rootProps = this.api.rootProps;
+
+    // Apply data attributes
+    for (const [key, value] of Object.entries(rootProps)) {
+      if (key === 'style' || value === undefined) continue;
+      this.renderer.setAttribute(el, key, String(value));
+    }
+
+    // Apply styles
+    if (rootProps.style && typeof rootProps.style === 'object') {
+      for (const [prop, value] of Object.entries(rootProps.style)) {
+        this.renderer.setStyle(el, prop, String(value));
+      }
+    }
+  }
+}

package/src/lib/normalize-props.ts

@@ -0,0 +1,112 @@
+import type { ElementProps } from '@smuikit/core';
+
+/**
+ * Map of React-style event-handler names to their Angular attribute-binding
+ * equivalents.  Angular templates bind DOM events with `(eventname)`, but
+ * when we spread props programmatically in `ngOnChanges` / renderers we
+ * need the raw DOM event name so we can call `addEventListener` / set the
+ * property on the native element.
+ */
+const EVENT_HANDLER_MAP: Record<string, string> = {
+  onClick: 'click',
+  onPointerDown: 'pointerdown',
+  onPointerUp: 'pointerup',
+  onFocus: 'focus',
+  onBlur: 'blur',
+  onKeyDown: 'keydown',
+  onChange: 'input', // DOM `input` event is the Angular equivalent of React `onChange`
+};
+
+/** Property names that are boolean HTML attributes. */
+const BOOLEAN_ATTRS = new Set([
+  'disabled',
+  'readOnly',
+  'required',
+  'hidden',
+]);
+
+export interface NormalizedProps {
+  /** Standard HTML attributes (strings / booleans) to set on the element. */
+  attrs: Record<string, string | boolean | number | undefined>;
+  /** Style object to apply via Renderer2.setStyle(). */
+  styles: Record<string, string | number>;
+  /** DOM event listeners keyed by lowercase event name (e.g. 'click'). */
+  listeners: Record<string, (event: unknown) => void>;
+}
+
+/**
+ * Takes an `ElementProps` object produced by a `connect*` function from
+ * @smuikit/core and splits it into three buckets that Angular can consume:
+ * attributes, styles, and event listeners.
+ *
+ * - `undefined` values are filtered out.
+ * - React-style event handlers (`onClick`, `onFocus`, etc.) are mapped to
+ *   their DOM event names (`click`, `focus`, ...).
+ */
+export function normalizeProps(props: ElementProps | undefined): NormalizedProps {
+  const attrs: Record<string, string | boolean | number | undefined> = {};
+  const styles: Record<string, string | number> = {};
+  const listeners: Record<string, (event: unknown) => void> = {};
+
+  if (!props) {
+    return { attrs, styles, listeners };
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    // Skip undefined values
+    if (value === undefined) continue;
+
+    // Style object
+    if (key === 'style' && typeof value === 'object' && value !== null) {
+      Object.assign(styles, value);
+      continue;
+    }
+
+    // Event handlers
+    const eventName = EVENT_HANDLER_MAP[key];
+    if (eventName && typeof value === 'function') {
+      listeners[eventName] = value as (event: unknown) => void;
+      continue;
+    }
+
+    // Regular attributes
+    attrs[key] = value as string | boolean | number | undefined;
+  }
+
+  return { attrs, styles, listeners };
+}
+
+/**
+ * Applies NormalizedProps to a native DOM element.
+ * Returns an array of cleanup functions (for removing event listeners).
+ */
+export function applyProps(
+  element: HTMLElement,
+  normalized: NormalizedProps,
+): (() => void)[] {
+  const cleanups: (() => void)[] = [];
+
+  // Set attributes
+  for (const [key, value] of Object.entries(normalized.attrs)) {
+    if (value === undefined || value === false) {
+      element.removeAttribute(key);
+    } else if (value === true) {
+      element.setAttribute(key, '');
+    } else {
+      element.setAttribute(key, String(value));
+    }
+  }
+
+  // Set styles
+  for (const [key, value] of Object.entries(normalized.styles)) {
+    (element.style as unknown as Record<string, string>)[key] = String(value);
+  }
+
+  // Add event listeners
+  for (const [eventName, handler] of Object.entries(normalized.listeners)) {
+    element.addEventListener(eventName, handler);
+    cleanups.push(() => element.removeEventListener(eventName, handler));
+  }
+
+  return cleanups;
+}

package/src/lib/smui.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+
+import { ButtonComponent } from './components/button/button.component';
+import { InputComponent } from './components/input/input.component';
+import { ModalComponent } from './components/modal/modal.component';
+import { TypographyComponent } from './components/typography/typography.component';
+import {
+  CardComponent,
+  CardHeaderComponent,
+  CardBodyComponent,
+  CardFooterComponent,
+} from './components/card/card.component';
+
+/**
+ * SmuiModule re-exports every standalone component so consumers who prefer
+ * the traditional NgModule approach can simply import this single module.
+ *
+ * For tree-shakeable imports, use the standalone components directly:
+ *   `imports: [ButtonComponent]`
+ */
+@NgModule({
+  imports: [
+    ButtonComponent,
+    InputComponent,
+    ModalComponent,
+    TypographyComponent,
+    CardComponent,
+    CardHeaderComponent,
+    CardBodyComponent,
+    CardFooterComponent,
+  ],
+  exports: [
+    ButtonComponent,
+    InputComponent,
+    ModalComponent,
+    TypographyComponent,
+    CardComponent,
+    CardHeaderComponent,
+    CardBodyComponent,
+    CardFooterComponent,
+  ],
+})
+export class SmuiModule {}

package/src/lib/theme.service.ts

@@ -0,0 +1,87 @@
+import { Injectable, Inject, Optional } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/** Shape of a single design-token override. */
+export interface TokenOverride {
+  /** CSS custom-property name *without* the leading `--`, e.g. `smui-color-primary`. */
+  name: string;
+  value: string;
+}
+
+/**
+ * ThemeService manages design tokens as CSS custom properties on the
+ * document's root element (`<html>`).  Consumers inject it and call
+ * `setTokens()` or `setToken()` to apply a theme at runtime.
+ *
+ * It is provided in 'root' so there is a single, application-wide instance.
+ */
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  private tokens = new Map<string, string>();
+  private rootElement: HTMLElement | null = null;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {
+    this.rootElement = this.document.documentElement;
+  }
+
+  /**
+   * Bulk-set multiple design tokens.
+   *
+   * ```ts
+   * themeService.setTokens({
+   *   'smui-color-primary': '#6200ee',
+   *   'smui-color-secondary': '#03dac6',
+   *   'smui-spacing-md': '16px',
+   * });
+   * ```
+   */
+  setTokens(tokens: Record<string, string>): void {
+    for (const [name, value] of Object.entries(tokens)) {
+      this.setToken(name, value);
+    }
+  }
+
+  /** Set a single design token. */
+  setToken(name: string, value: string): void {
+    this.tokens.set(name, value);
+    this.applyToken(name, value);
+  }
+
+  /** Remove a single token override, reverting to the default value. */
+  removeToken(name: string): void {
+    this.tokens.delete(name);
+    if (this.rootElement) {
+      this.rootElement.style.removeProperty(`--${name}`);
+    }
+  }
+
+  /** Remove all token overrides. */
+  resetTokens(): void {
+    for (const name of this.tokens.keys()) {
+      if (this.rootElement) {
+        this.rootElement.style.removeProperty(`--${name}`);
+      }
+    }
+    this.tokens.clear();
+  }
+
+  /** Get the current value of a token (returns the override, not the computed). */
+  getToken(name: string): string | undefined {
+    return this.tokens.get(name);
+  }
+
+  /** Get all currently applied token overrides. */
+  getAllTokens(): Record<string, string> {
+    const result: Record<string, string> = {};
+    for (const [name, value] of this.tokens.entries()) {
+      result[name] = value;
+    }
+    return result;
+  }
+
+  private applyToken(name: string, value: string): void {
+    if (this.rootElement) {
+      this.rootElement.style.setProperty(`--${name}`, value);
+    }
+  }
+}

package/src/lib/use-machine.service.ts

@@ -0,0 +1,51 @@
+import { NgZone } from '@angular/core';
+import type { MachineService } from '@smuikit/core';
+
+export class MachineAdapter<
+  TState extends string,
+  TContext extends object,
+  TEvent extends { type: string },
+> {
+  private unsubscribe: (() => void) | null = null;
+
+  snapshot: { state: TState; context: TContext };
+
+  private constructor(
+    private ngZone: NgZone,
+    private machine: MachineService<TState, TContext, TEvent>,
+  ) {
+    this.snapshot = this.machine.getSnapshot();
+    this.machine.start();
+    this.unsubscribe = this.machine.subscribe(() => {
+      this.ngZone.run(() => {
+        this.snapshot = this.machine.getSnapshot();
+      });
+    });
+  }
+
+  static create<
+    S extends string,
+    C extends object,
+    E extends { type: string },
+  >(ngZone: NgZone, machine: MachineService<S, C, E>): MachineAdapter<S, C, E> {
+    return new MachineAdapter(ngZone, machine);
+  }
+
+  get state(): TState {
+    return this.snapshot.state;
+  }
+
+  get context(): TContext {
+    return this.snapshot.context;
+  }
+
+  send(event: TEvent): void {
+    this.machine.send(event);
+  }
+
+  destroy(): void {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    this.machine.stop();
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,21 @@
+// Module
+export { SmuiModule } from './lib/smui.module';
+
+// Services
+export { MachineAdapter } from './lib/use-machine.service';
+export { ThemeService } from './lib/theme.service';
+
+// Utilities
+export { normalizeProps, applyProps, type NormalizedProps } from './lib/normalize-props';
+
+// Components
+export { ButtonComponent } from './lib/components/button/button.component';
+export { InputComponent } from './lib/components/input/input.component';
+export { ModalComponent } from './lib/components/modal/modal.component';
+export { TypographyComponent } from './lib/components/typography/typography.component';
+export {
+  CardComponent,
+  CardHeaderComponent,
+  CardBodyComponent,
+  CardFooterComponent,
+} from './lib/components/card/card.component';

package/src/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false,
+    "paths": {
+      "@smuikit/core": ["../core/src/index.ts"],
+      "@smuikit/tokens": ["../tokens/dist/js/tokens.js"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "dist", "node_modules"]
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "flatModuleOutFile": "smui-angular.js",
+    "flatModuleId": "@smuikit/angular"
+  },
+  "exclude": ["src/**/*.spec.ts", "node_modules", "dist"]
+}