@devary/ui-common 0.1.0

package/README.md

@@ -0,0 +1,64 @@
+# UiCommon
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ui-common
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ui-common
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/devary-ui-common.mjs

@@ -0,0 +1,77 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, Component } from '@angular/core';
+
+const STORAGE_KEY = 'rz-theme';
+class ThemeService {
+    _theme = signal(this.resolveInitialTheme(), ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
+    theme = this._theme.asReadonly();
+    isDark = computed(() => this._theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    isLight = computed(() => this._theme() === 'light', ...(ngDevMode ? [{ debugName: "isLight" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.applyTheme(this._theme());
+    }
+    setTheme(theme) {
+        this._theme.set(theme);
+        this.applyTheme(theme);
+        localStorage.setItem(STORAGE_KEY, theme);
+    }
+    toggle() {
+        this.setTheme(this._theme() === 'dark' ? 'light' : 'dark');
+    }
+    applyTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+    resolveInitialTheme() {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'light' || stored === 'dark')
+            return stored;
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'light';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class ThemeToggleComponent {
+    theme = inject(ThemeService);
+    isDark = this.theme.isDark;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ThemeToggleComponent, isStandalone: true, selector: "rz-theme-toggle", ngImport: i0, template: `
+    <button
+      type="button"
+      class="rz-theme-toggle"
+      [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+      (click)="theme.toggle()"
+    >
+      <span class="rz-theme-toggle__icon">{{ isDark() ? '☀️' : '🌙' }}</span>
+    </button>
+  `, isInline: true, styles: [".rz-theme-toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--rz-radius-full);border:1px solid var(--rz-border);background:var(--rz-surface-hover);cursor:pointer;font-size:.9rem;transition:background .18s}.rz-theme-toggle:hover{background:var(--rz-surface-active)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rz-theme-toggle', standalone: true, template: `
+    <button
+      type="button"
+      class="rz-theme-toggle"
+      [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+      (click)="theme.toggle()"
+    >
+      <span class="rz-theme-toggle__icon">{{ isDark() ? '☀️' : '🌙' }}</span>
+    </button>
+  `, styles: [".rz-theme-toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--rz-radius-full);border:1px solid var(--rz-border);background:var(--rz-surface-hover);cursor:pointer;font-size:.9rem;transition:background .18s}.rz-theme-toggle:hover{background:var(--rz-surface-active)}\n"] }]
+        }] });
+
+// Services
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ThemeService, ThemeToggleComponent };
+//# sourceMappingURL=devary-ui-common.mjs.map

package/fesm2022/devary-ui-common.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devary-ui-common.mjs","sources":["../../../projects/ui-common/src/lib/services/theme.service.ts","../../../projects/ui-common/src/lib/components/theme-toggle/theme-toggle.component.ts","../../../projects/ui-common/src/public-api.ts","../../../projects/ui-common/src/devary-ui-common.ts"],"sourcesContent":["import { Injectable, signal, computed } from '@angular/core';\n\nexport type Theme = 'light' | 'dark';\n\nconst STORAGE_KEY = 'rz-theme';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly _theme = signal<Theme>(this.resolveInitialTheme());\n\n  readonly theme   = this._theme.asReadonly();\n  readonly isDark  = computed(() => this._theme() === 'dark');\n  readonly isLight = computed(() => this._theme() === 'light');\n\n  constructor() {\n    this.applyTheme(this._theme());\n  }\n\n  setTheme(theme: Theme): void {\n    this._theme.set(theme);\n    this.applyTheme(theme);\n    localStorage.setItem(STORAGE_KEY, theme);\n  }\n\n  toggle(): void {\n    this.setTheme(this._theme() === 'dark' ? 'light' : 'dark');\n  }\n\n  private applyTheme(theme: Theme): void {\n    document.documentElement.setAttribute('data-theme', theme);\n  }\n\n  private resolveInitialTheme(): Theme {\n    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;\n    if (stored === 'light' || stored === 'dark') return stored;\n    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return 'light';\n  }\n}\n","import { Component, inject } from '@angular/core';\nimport { ThemeService } from '../../services/theme.service';\n\n@Component({\n  selector: 'rz-theme-toggle',\n  standalone: true,\n  template: `\n    <button\n      type=\"button\"\n      class=\"rz-theme-toggle\"\n      [attr.aria-label]=\"isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (click)=\"theme.toggle()\"\n    >\n      <span class=\"rz-theme-toggle__icon\">{{ isDark() ? '☀️' : '🌙' }}</span>\n    </button>\n  `,\n  styles: [`\n    .rz-theme-toggle {\n      display: inline-grid;\n      place-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: var(--rz-radius-full);\n      border: 1px solid var(--rz-border);\n      background: var(--rz-surface-hover);\n      cursor: pointer;\n      font-size: 0.9rem;\n      transition: background 0.18s;\n\n      &:hover {\n        background: var(--rz-surface-active);\n      }\n    }\n  `]\n})\nexport class ThemeToggleComponent {\n  readonly theme  = inject(ThemeService);\n  readonly isDark = this.theme.isDark;\n}\n","// Services\nexport * from './lib/services/theme.service';\n\n// Components\nexport * from './lib/components/theme-toggle/theme-toggle.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@devary/ui-common",
+  "version": "0.1.0",
+  "description": "Shared Angular component library for the Redzone platform",
+  "keywords": [
+    "angular",
+    "redzone",
+    "ui",
+    "components"
+  ],
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "module": "fesm2022/devary-ui-common.mjs",
+  "typings": "types/devary-ui-common.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/devary-ui-common.d.ts",
+      "default": "./fesm2022/devary-ui-common.mjs"
+    }
+  },
+  "type": "module"
+}

package/src/styles/_glass.scss

@@ -0,0 +1,12 @@
+// ── Glassmorphism surface mixin ───────────────────────────────────────────────
+@mixin glass-panel {
+  border: 1px solid var(--rz-glass-border);
+  background: var(--rz-glass-bg);
+  backdrop-filter: blur(var(--rz-glass-blur));
+  box-shadow: var(--rz-glass-shadow);
+  color: var(--rz-ink);
+}
+
+.rz-glass {
+  @include glass-panel;
+}

package/src/styles/_reset.scss

@@ -0,0 +1,25 @@
+// ── Base reset & global defaults ──────────────────────────────────────────────
+html {
+  font-size: 80%;
+  color-scheme: light dark;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  color: var(--rz-ink);
+  background: linear-gradient(160deg, var(--rz-bg-from) 0%, var(--rz-bg-to) 100%);
+  min-height: 100dvh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+router-outlet {
+  display: none !important;
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,91 @@
+// ── Design tokens ────────────────────────────────────────────────────────────
+// Light mode (default)
+:root,
+[data-theme="light"] {
+  // Brand palette
+  --rz-primary:          #1565C0;
+  --rz-primary-hover:    #1976D2;
+  --rz-accent:           #42A5F5;
+
+  // Page background
+  --rz-bg-from:          #1565C0;
+  --rz-bg-to:            #0d47a1;
+
+  // Ink (text)
+  --rz-ink:              #0d2b6e;
+  --rz-ink-muted:        rgba(13, 71, 161, 0.55);
+  --rz-ink-faint:        rgba(13, 71, 161, 0.35);
+
+  // Glass surface
+  --rz-glass-bg:         rgba(255, 255, 255, 0.88);
+  --rz-glass-border:     rgba(255, 255, 255, 0.22);
+  --rz-glass-shadow:     0 20px 50px rgba(13, 71, 161, 0.14);
+  --rz-glass-blur:       18px;
+
+  // Component surfaces
+  --rz-surface:          rgba(255, 255, 255, 0.97);
+  --rz-surface-hover:    rgba(21, 101, 192, 0.07);
+  --rz-surface-active:   rgba(21, 101, 192, 0.10);
+  --rz-border:           rgba(21, 101, 192, 0.14);
+  --rz-border-faint:     rgba(21, 101, 192, 0.09);
+
+  // Semantic
+  --rz-danger:           #b71c1c;
+  --rz-danger-bg:        rgba(183, 28, 28, 0.06);
+  --rz-success:          #1b5e20;
+  --rz-warning:          #e65100;
+
+  // Avatar / brand mark gradient
+  --rz-gradient:         linear-gradient(135deg, #1976D2, #42A5F5);
+
+  // Misc
+  --rz-radius-sm:        0.65rem;
+  --rz-radius-md:        0.9rem;
+  --rz-radius-lg:        1.5rem;
+  --rz-radius-full:      999px;
+}
+
+// Dark mode
+[data-theme="dark"] {
+  // Brand palette
+  --rz-primary:          #42A5F5;
+  --rz-primary-hover:    #64B5F6;
+  --rz-accent:           #90CAF9;
+
+  // Page background
+  --rz-bg-from:          #0d1117;
+  --rz-bg-to:            #0a0f1e;
+
+  // Ink (text)
+  --rz-ink:              #e0eaff;
+  --rz-ink-muted:        rgba(180, 210, 255, 0.60);
+  --rz-ink-faint:        rgba(180, 210, 255, 0.30);
+
+  // Glass surface
+  --rz-glass-bg:         rgba(15, 25, 50, 0.80);
+  --rz-glass-border:     rgba(255, 255, 255, 0.08);
+  --rz-glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.40);
+  --rz-glass-blur:       18px;
+
+  // Component surfaces
+  --rz-surface:          rgba(20, 30, 55, 0.97);
+  --rz-surface-hover:    rgba(66, 165, 245, 0.10);
+  --rz-surface-active:   rgba(66, 165, 245, 0.15);
+  --rz-border:           rgba(255, 255, 255, 0.10);
+  --rz-border-faint:     rgba(255, 255, 255, 0.06);
+
+  // Semantic
+  --rz-danger:           #ef9a9a;
+  --rz-danger-bg:        rgba(239, 154, 154, 0.10);
+  --rz-success:          #a5d6a7;
+  --rz-warning:          #ffcc80;
+
+  // Avatar / brand mark gradient
+  --rz-gradient:         linear-gradient(135deg, #1976D2, #42A5F5);
+
+  // Radius values unchanged
+  --rz-radius-sm:        0.65rem;
+  --rz-radius-md:        0.9rem;
+  --rz-radius-lg:        1.5rem;
+  --rz-radius-full:      999px;
+}

package/src/styles/index.scss

@@ -0,0 +1,5 @@
+// ── ui-common stylesheet entry ────────────────────────────────────────────────
+// Import this single file in consuming apps: @use 'ui-common/styles';
+@use 'tokens';
+@use 'reset';
+@use 'glass';

package/types/devary-ui-common.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+type Theme = 'light' | 'dark';
+declare class ThemeService {
+    private readonly _theme;
+    readonly theme: _angular_core.Signal<Theme>;
+    readonly isDark: _angular_core.Signal<boolean>;
+    readonly isLight: _angular_core.Signal<boolean>;
+    constructor();
+    setTheme(theme: Theme): void;
+    toggle(): void;
+    private applyTheme;
+    private resolveInitialTheme;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+declare class ThemeToggleComponent {
+    readonly theme: ThemeService;
+    readonly isDark: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggleComponent, "rz-theme-toggle", never, {}, {}, never, never, true, never>;
+}
+
+export { ThemeService, ThemeToggleComponent };
+export type { Theme };