@atomng/ui 1.0.0

package/organisms/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/organisms/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAW,mBAAmB,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAW,wBAAwB,CAAC"}

package/organisms/table/table-cell.directive.d.ts

@@ -0,0 +1,17 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface TableCellContext {
+    $implicit: Record<string, unknown>;
+    row: Record<string, unknown>;
+}
+export declare class UiTableCellDirective {
+    readonly tpl: TemplateRef<TableCellContext>;
+    /** The column key this template handles. */
+    columnKey: string;
+    constructor(tpl: TemplateRef<TableCellContext>);
+    /** Type-safe static context guard for `let-row`. */
+    static ngTemplateContextGuard(_dir: UiTableCellDirective, ctx: unknown): ctx is TableCellContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiTableCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<UiTableCellDirective, "ng-template[uiCell]", never, { "columnKey": { "alias": "uiCell"; "required": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=table-cell.directive.d.ts.map

package/organisms/table/table-cell.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/organisms/table/table-cell.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,WAAW,EAAE,MAAM,eAAe,CAAC;;AAU9D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,GAAG,EAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,qBAIa,oBAAoB;aAKb,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC;IAJpD,4CAA4C;IACA,SAAS,EAAG,MAAM,CAAC;gBAG7C,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC;IAGpD,oDAAoD;IACpD,MAAM,CAAC,sBAAsB,CAC3B,IAAI,EAAE,oBAAoB,EAC1B,GAAG,EAAE,OAAO,GACX,GAAG,IAAI,gBAAgB;yCAZf,oBAAoB;2CAApB,oBAAoB;CAehC"}

package/organisms/table/table.component.d.ts

@@ -0,0 +1,50 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface TableColumn<T = unknown> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface SortState {
+    column: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Table Organism — Source: Nuxt UI v3 ❖ Table
+ * Data table with sorting, selection, loading state.
+ *
+ * Custom cell templates via UiTableCellDirective:
+ *   <ng-template uiCell="columnKey" let-row>
+ *     <ui-badge>{{ row['field'] }}</ui-badge>
+ *   </ng-template>
+ */
+export declare class TableComponent {
+    readonly columns: import("@angular/core").InputSignal<TableColumn<unknown>[]>;
+    readonly rows: import("@angular/core").InputSignal<Record<string, unknown>[]>;
+    readonly loading: import("@angular/core").InputSignal<boolean>;
+    readonly selectable: import("@angular/core").InputSignal<boolean>;
+    readonly caption: import("@angular/core").InputSignal<string>;
+    readonly emptyLabel: import("@angular/core").InputSignal<string>;
+    readonly rowIdKey: import("@angular/core").InputSignal<string>;
+    readonly sortState: import("@angular/core").ModelSignal<SortState>;
+    readonly selectedIds: import("@angular/core").ModelSignal<(string | number)[]>;
+    readonly rowClick: import("@angular/core").OutputEmitterRef<Record<string, unknown>>;
+    private cellDirs;
+    /** Returns the TemplateRef for a column key if a custom template was provided. */
+    protected getCellTpl(key: string): TemplateRef<unknown> | null;
+    protected readonly loadingRows: import("@angular/core").Signal<number[]>;
+    protected readonly allSelected: import("@angular/core").Signal<boolean>;
+    protected rowId(row: Record<string, unknown>): string | number;
+    protected isSelected(id: string | number): boolean;
+    protected toggleRow(id: string | number): void;
+    protected toggleAll(): void;
+    protected sort(key: string): void;
+    protected getSortIcon(key: string): string;
+    protected getSortAriaLabel(key: string): string | null;
+    protected onRowClick(row: Record<string, unknown>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "ui-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "rowIdKey": { "alias": "rowIdKey"; "required": false; "isSignal": true; }; "sortState": { "alias": "sortState"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; }, { "sortState": "sortStateChange"; "selectedIds": "selectedIdsChange"; "rowClick": "rowClick"; }, ["cellDirs"], ["[slot=empty]", "*"], true, never>;
+}
+//# sourceMappingURL=table.component.d.ts.map

package/organisms/table/table.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/organisms/table/table.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEM,WAAW,EACvB,MAAM,eAAe,CAAC;;AAIvB,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,GAAG,EAAS,MAAM,CAAC;IACnB,KAAK,EAAO,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAG,OAAO,CAAC;IACpB,KAAK,CAAC,EAAM,MAAM,CAAC;IACnB,KAAK,CAAC,EAAM,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,qBAgGa,cAAc;IACzB,QAAQ,CAAC,OAAO,8DAAwC;IACxD,QAAQ,CAAC,IAAI,iEAAgD;IAC7D,QAAQ,CAAC,OAAO,+CAA8B;IAC9C,QAAQ,CAAC,UAAU,+CAA2B;IAC9C,QAAQ,CAAC,OAAO,8CAAmC;IACnD,QAAQ,CAAC,UAAU,8CAAyC;IAC5D,QAAQ,CAAC,QAAQ,8CAA2B;IAE5C,QAAQ,CAAC,SAAS,iDAAoC;IACtD,QAAQ,CAAC,WAAW,2DAAmC;IAEvD,QAAQ,CAAC,QAAQ,oEAAqC;IAItD,OAAO,CAAC,QAAQ,CAAmC;IAEnD,kFAAkF;IAClF,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI;IAM9D,SAAS,CAAC,QAAQ,CAAC,WAAW,2CAA0D;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,0CAE5B;IAIF,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,MAAM;IAI9D,SAAS,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO;IAIlD,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAM9C,SAAS,CAAC,SAAS,IAAI,IAAI;IAQ3B,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAWjC,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAM1C,SAAS,CAAC,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAMtD,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;yCA7E7C,cAAc;2CAAd,cAAc;CAgF1B"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@atomng/ui",
+  "version": "1.0.0",
+  "description": "Angular 19 component library — Atomic Design system built with Standalone Components, Angular Signals and SCSS design tokens.",
+  "keywords": [
+    "angular",
+    "angular19",
+    "component-library",
+    "design-system",
+    "ui-kit",
+    "atomic-design",
+    "standalone-components",
+    "signals",
+    "scss",
+    "css-custom-properties",
+    "dark-mode",
+    "theming",
+    "atoms",
+    "molecules",
+    "organisms"
+  ],
+  "author": {
+    "name": "Libasse Mbaye",
+    "email": "libasselayembayedev@gmail.com"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/animations": ">=19.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@angular/router": ">=19.0.0",
+    "lucide-angular": ">=1.0.0",
+    "rxjs": ">=7.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/animations": {
+      "optional": true
+    },
+    "@angular/forms": {
+      "optional": true
+    },
+    "@angular/router": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "module": "fesm2022/atomng-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/atomng-ui.mjs"
+    },
+    "./tokens": {
+      "types": "./tokens/index.d.ts",
+      "default": "./fesm2022/atomng-ui-tokens.mjs"
+    },
+    "./molecules": {
+      "types": "./molecules/index.d.ts",
+      "default": "./fesm2022/atomng-ui-molecules.mjs"
+    },
+    "./atoms": {
+      "types": "./atoms/index.d.ts",
+      "default": "./fesm2022/atomng-ui-atoms.mjs"
+    },
+    "./organisms": {
+      "types": "./organisms/index.d.ts",
+      "default": "./fesm2022/atomng-ui-organisms.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": ">=2.3.0"
+  }
+}

package/tokens/_colors.scss

@@ -0,0 +1,150 @@
+// ============================================================
+// DESIGN TOKENS — COLORS
+// Source: Nuxt UI v3 Official Design Kit (Figma)
+// Primary: #00C16A | Font: DM Sans
+// ============================================================
+
+:root {
+  // ── Primary (Nuxt Green) ──────────────────────────────────
+  --color-primary-50:  #e6fff3;
+  --color-primary-100: #b3ffe0;
+  --color-primary-200: #80ffcc;
+  --color-primary-300: #4dfab8;
+  --color-primary-400: #1af5a3;
+  --color-primary-500: #00c16a;  // Base — rgb(0, 193, 106)
+  --color-primary-600: #00a358;
+  --color-primary-700: #008547;
+  --color-primary-800: #006736;
+  --color-primary-900: #004a26;
+  --color-primary-950: #002d17;
+
+  // ── Secondary ────────────────────────────────────────────
+  --color-secondary-50:  #f0f4ff;
+  --color-secondary-100: #d9e4ff;
+  --color-secondary-200: #b3c9ff;
+  --color-secondary-300: #8db0ff;
+  --color-secondary-400: #6695ff;
+  --color-secondary-500: #4070ff;
+  --color-secondary-600: #2a54e0;
+  --color-secondary-700: #1a3cba;
+  --color-secondary-800: #0d2794;
+  --color-secondary-900: #06186e;
+  --color-secondary-950: #030d4a;
+
+  // ── Neutral ───────────────────────────────────────────────
+  --color-neutral-0:   #ffffff;
+  --color-neutral-50:  #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #1b1718;
+
+  // ── Success ───────────────────────────────────────────────
+  --color-success-50:  #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  // ── Warning ───────────────────────────────────────────────
+  --color-warning-50:  #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  // ── Error ─────────────────────────────────────────────────
+  --color-error-50:  #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+  --color-error-950: #450a0a;
+
+  // ── Info ──────────────────────────────────────────────────
+  --color-info-50:  #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
+
+  // ── Semantic Aliases ──────────────────────────────────────
+  --color-bg:              var(--color-neutral-0);
+  --color-bg-muted:        var(--color-neutral-50);
+  --color-bg-subtle:       var(--color-neutral-100);
+  --color-border:          var(--color-neutral-200);
+  --color-border-muted:    var(--color-neutral-100);
+  --color-text:            var(--color-neutral-900);
+  --color-text-muted:      var(--color-neutral-500);
+  --color-text-subtle:     var(--color-neutral-400);
+  --color-text-inverted:   var(--color-neutral-0);
+  --color-ring:            var(--color-primary-500);
+}
+
+// ── Dark Mode ─────────────────────────────────────────────
+[data-theme="dark"],
+.dark {
+  --color-bg:              var(--color-neutral-950);
+  --color-bg-muted:        var(--color-neutral-900);
+  --color-bg-subtle:       var(--color-neutral-800);
+  --color-border:          var(--color-neutral-800);
+  --color-border-muted:    var(--color-neutral-900);
+  --color-text:            var(--color-neutral-50);
+  --color-text-muted:      var(--color-neutral-400);
+  --color-text-subtle:     var(--color-neutral-500);
+  --color-text-inverted:   var(--color-neutral-950);
+}
+
+// ── SCSS Maps for programmatic use ────────────────────────
+$colors-primary: (
+  50:  #e6fff3,
+  100: #b3ffe0,
+  200: #80ffcc,
+  300: #4dfab8,
+  400: #1af5a3,
+  500: #00c16a,
+  600: #00a358,
+  700: #008547,
+  800: #006736,
+  900: #004a26,
+  950: #002d17,
+);
+
+$color-semantic: (
+  'primary':   #00c16a,
+  'secondary': #4070ff,
+  'neutral':   #6b7280,
+  'success':   #22c55e,
+  'warning':   #f59e0b,
+  'error':     #ef4444,
+  'info':      #3b82f6,
+);

package/tokens/_spacing.scss

@@ -0,0 +1,98 @@
+// ============================================================
+// DESIGN TOKENS — SPACING & SIZING
+// Source: Nuxt UI v3 Official Design Kit (Figma)
+// Button sizes: xs(h:24) sm(h:28) md(h:32) lg(h:36) xl(h:40)
+// ============================================================
+
+:root {
+  // ── Base spacing scale (4px base) ─────────────────────────
+  --spacing-0:   0;
+  --spacing-px:  1px;
+  --spacing-0-5: 0.125rem;   //  2px
+  --spacing-1:   0.25rem;    //  4px
+  --spacing-1-5: 0.375rem;   //  6px
+  --spacing-2:   0.5rem;     //  8px
+  --spacing-2-5: 0.625rem;   // 10px
+  --spacing-3:   0.75rem;    // 12px
+  --spacing-3-5: 0.875rem;   // 14px
+  --spacing-4:   1rem;       // 16px
+  --spacing-5:   1.25rem;    // 20px
+  --spacing-6:   1.5rem;     // 24px
+  --spacing-7:   1.75rem;    // 28px
+  --spacing-8:   2rem;       // 32px
+  --spacing-9:   2.25rem;    // 36px
+  --spacing-10:  2.5rem;     // 40px
+  --spacing-11:  2.75rem;    // 44px
+  --spacing-12:  3rem;       // 48px
+  --spacing-16:  4rem;       // 64px
+  --spacing-20:  5rem;       // 80px
+  --spacing-24:  6rem;       // 96px
+
+  // ── Component Heights (from Figma button specs) ───────────
+  --size-xs: 1.5rem;    //  24px
+  --size-sm: 1.75rem;   //  28px
+  --size-md: 2rem;      //  32px
+  --size-lg: 2.25rem;   //  36px
+  --size-xl: 2.5rem;    //  40px
+
+  // ── Border Radius ─────────────────────────────────────────
+  --radius-none:   0;
+  --radius-sm:     0.125rem;  //  2px
+  --radius-md:     0.375rem;  //  6px  ← Figma base radius
+  --radius-lg:     0.5rem;    //  8px
+  --radius-xl:     0.75rem;   // 12px
+  --radius-2xl:    1rem;      // 16px
+  --radius-full:   9999px;
+
+  // ── Icon Sizes ────────────────────────────────────────────
+  --icon-xs:  0.875rem;  // 14px
+  --icon-sm:  1rem;      // 16px
+  --icon-md:  1.25rem;   // 20px  ← Figma button icon size
+  --icon-lg:  1.5rem;    // 24px
+  --icon-xl:  1.75rem;   // 28px
+
+  // ── Shadows ───────────────────────────────────────────────
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  // ── Transitions ───────────────────────────────────────────
+  --transition-fast:   150ms ease;
+  --transition-base:   200ms ease;
+  --transition-slow:   300ms ease;
+  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+
+  // ── Z-index ───────────────────────────────────────────────
+  --z-base:     0;
+  --z-raised:   10;
+  --z-dropdown: 1000;
+  --z-sticky:   1100;
+  --z-modal:    1300;
+  --z-toast:    1500;
+  --z-tooltip:  1700;
+}
+
+// ── Padding map (from Figma button specs) ─────────────────
+// xs: 4px 8px | sm: 6px 10px | md: 6px 10px | lg: 8px 12px | xl: 8px 12px
+$component-padding: (
+  xs: (4px, 8px),
+  sm: (6px, 10px),
+  md: (6px, 10px),
+  lg: (8px, 12px),
+  xl: (8px, 12px),
+);
+
+// ── Responsive breakpoints ────────────────────────────────
+$breakpoints: (
+  sm:  640px,
+  md:  768px,
+  lg:  1024px,
+  xl:  1280px,
+  2xl: 1536px,
+);
+
+@mixin responsive($bp) {
+  @media (min-width: map-get($breakpoints, $bp)) { @content; }
+}

package/tokens/_typography.scss

@@ -0,0 +1,59 @@
+// ============================================================
+// DESIGN TOKENS — TYPOGRAPHY
+// Source: Nuxt UI v3 Official Design Kit (Figma)
+// Font: DM Sans — extracted from Figma component specs
+// ============================================================
+
+:root {
+  // ── Font Families ─────────────────────────────────────────
+  --font-sans:  'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono:  'DM Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
+
+  // ── Font Sizes ────────────────────────────────────────────
+  --text-xs:   0.75rem;   //  12px
+  --text-sm:   0.875rem;  //  14px
+  --text-md:   1rem;      //  16px
+  --text-lg:   1.125rem;  //  18px
+  --text-xl:   1.25rem;   //  20px
+  --text-2xl:  1.5rem;    //  24px
+  --text-3xl:  1.875rem;  //  30px
+  --text-4xl:  2.25rem;   //  36px
+
+  // ── Font Weights ──────────────────────────────────────────
+  --font-normal:    400;
+  --font-medium:    500;  // Primary weight in Figma
+  --font-semibold:  600;
+  --font-bold:      700;
+
+  // ── Line Heights ──────────────────────────────────────────
+  --leading-none:    1;
+  --leading-tight:   1.25;
+  --leading-snug:    1.375;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.625;
+
+  // ── Letter Spacing ────────────────────────────────────────
+  --tracking-tight:   -0.025em;
+  --tracking-normal:   0;
+  --tracking-wide:     0.025em;
+  --tracking-wider:    0.05em;
+  --tracking-widest:   0.1em;
+}
+
+// ── SCSS Mixins ───────────────────────────────────────────
+@mixin text-xs    { font-size: var(--text-xs);  line-height: var(--leading-normal); }
+@mixin text-sm    { font-size: var(--text-sm);  line-height: var(--leading-normal); }
+@mixin text-md    { font-size: var(--text-md);  line-height: var(--leading-normal); }
+@mixin text-lg    { font-size: var(--text-lg);  line-height: var(--leading-snug);   }
+@mixin text-xl    { font-size: var(--text-xl);  line-height: var(--leading-snug);   }
+@mixin text-2xl   { font-size: var(--text-2xl); line-height: var(--leading-tight);  }
+@mixin text-3xl   { font-size: var(--text-3xl); line-height: var(--leading-tight);  }
+@mixin text-4xl   { font-size: var(--text-4xl); line-height: var(--leading-tight);  }
+
+// ── Button Typography (from Figma) ────────────────────────
+// xs: 12px 500 | sm: 12px 500 | md: 14px 500 | lg: 14px 500 | xl: 16px 500
+@mixin btn-text-xs  { font-size: var(--text-xs); font-weight: var(--font-medium); }
+@mixin btn-text-sm  { font-size: var(--text-xs); font-weight: var(--font-medium); }
+@mixin btn-text-md  { font-size: var(--text-sm); font-weight: var(--font-medium); }
+@mixin btn-text-lg  { font-size: var(--text-sm); font-weight: var(--font-medium); }
+@mixin btn-text-xl  { font-size: var(--text-md); font-weight: var(--font-medium); }

package/tokens/atomng-ui-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atomng-ui-tokens.d.ts","sourceRoot":"","sources":["../../../../libs/shared-ui/src/lib/tokens/atomng-ui-tokens.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,SAAS,CAAC"}

package/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme/index';
+//# sourceMappingURL=index.d.ts.map

package/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/shared-ui/src/lib/tokens/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC"}

package/tokens/index.scss

@@ -0,0 +1,8 @@
+// ============================================================
+// SHARED-UI DESIGN TOKENS — Master Export
+// Import this file in your global styles.scss
+// ============================================================
+
+@forward 'colors';
+@forward 'typography';
+@forward 'spacing';

package/tokens/theme/color-presets.d.ts

@@ -0,0 +1,24 @@
+export interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+export type PrimaryColorPreset = 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'red' | 'orange' | 'amber' | 'lime' | 'slate' | 'zinc';
+export interface ColorPresetMeta {
+    name: PrimaryColorPreset;
+    label: string;
+    swatch: string;
+    palette: ColorPalette;
+}
+export declare const COLOR_PRESETS: Record<PrimaryColorPreset, ColorPresetMeta>;
+/** Returns all preset metas sorted for display */
+export declare function getAllPresets(): ColorPresetMeta[];
+//# sourceMappingURL=color-presets.d.ts.map

package/tokens/theme/color-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/color-presets.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAG,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GACrC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GACpC,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GACtC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAC1B,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAK,kBAAkB,CAAC;IAC5B,KAAK,EAAI,MAAM,CAAC;IAChB,MAAM,EAAG,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAID,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAmKrE,CAAC;AAEF,kDAAkD;AAClD,wBAAgB,aAAa,IAAI,eAAe,EAAE,CAEjD"}

package/tokens/theme/index.d.ts

@@ -0,0 +1,6 @@
+export * from './color-presets';
+export * from './theme.service';
+export * from './theme.provider';
+export * from './theme-picker.component';
+export * from './theme-toggle.component';
+//# sourceMappingURL=index.d.ts.map

package/tokens/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/tokens/theme/theme-picker.component.d.ts

@@ -0,0 +1,11 @@
+import { ThemeService } from './theme.service';
+import { ColorPresetMeta, PrimaryColorPreset } from './color-presets';
+import * as i0 from "@angular/core";
+export declare class ThemePickerComponent {
+    protected theme: ThemeService;
+    readonly change: import("@angular/core").OutputEmitterRef<PrimaryColorPreset>;
+    protected select(preset: ColorPresetMeta): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThemePickerComponent, "ui-theme-picker", never, {}, { "change": "change"; }, never, never, true, never>;
+}
+//# sourceMappingURL=theme-picker.component.d.ts.map

package/tokens/theme/theme-picker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-picker.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/theme-picker.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAW,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAUtE,qBAgEa,oBAAoB;IAC/B,SAAS,CAAC,KAAK,eAAwB;IAEvC,QAAQ,CAAC,MAAM,+DAAgC;IAE/C,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI;yCALpC,oBAAoB;2CAApB,oBAAoB;CAShC"}

package/tokens/theme/theme-toggle.component.d.ts

@@ -0,0 +1,15 @@
+import { ThemeService, ThemeMode } from './theme.service';
+import * as i0 from "@angular/core";
+interface ModeOption {
+    value: ThemeMode;
+    label: string;
+    icon: string;
+}
+export declare class ThemeToggleComponent {
+    protected theme: ThemeService;
+    protected options: ModeOption[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThemeToggleComponent, "ui-theme-toggle", never, {}, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=theme-toggle.component.d.ts.map

package/tokens/theme/theme-toggle.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/theme-toggle.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;;AAS1D,UAAU,UAAU;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAG,MAAM,CAAC;CACf;AAED,qBA0Fa,oBAAoB;IAC/B,SAAS,CAAC,KAAK,eAAwB;IAEvC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,CAkB7B;yCArBS,oBAAoB;2CAApB,oBAAoB;CAsBhC"}

package/tokens/theme/theme.provider.d.ts

@@ -0,0 +1,4 @@
+import { EnvironmentProviders } from '@angular/core';
+import { ThemeConfig } from './theme.service';
+export declare function provideSharedUiTheme(config?: ThemeConfig): EnvironmentProviders;
+//# sourceMappingURL=theme.provider.d.ts.map

package/tokens/theme/theme.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.provider.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/theme.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAA4B,MAAM,eAAe,CAAC;AAChG,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAY5D,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAgB,GAAG,oBAAoB,CASnF"}

package/tokens/theme/theme.service.d.ts

@@ -0,0 +1,48 @@
+import { ColorPalette, PrimaryColorPreset, ColorPresetMeta } from './color-presets';
+import * as i0 from "@angular/core";
+export type ThemeMode = 'light' | 'dark' | 'system';
+export interface ThemeConfig {
+    primaryColor?: PrimaryColorPreset | ColorPalette;
+    mode?: ThemeMode;
+}
+export declare class ThemeService {
+    private platformId;
+    private readonly _preset;
+    private readonly _palette;
+    private readonly _mode;
+    /** Currently active preset name (null when a custom palette was set) */
+    readonly activePreset: import("@angular/core").Signal<PrimaryColorPreset>;
+    /** Resolved full palette */
+    readonly activePalette: import("@angular/core").Signal<ColorPalette>;
+    /** Currently active mode */
+    readonly activeMode: import("@angular/core").Signal<ThemeMode>;
+    /** Derived boolean — true when dark is currently active (including system→dark) */
+    readonly isDark: import("@angular/core").Signal<boolean>;
+    /** All available presets for rendering a picker */
+    readonly presets: ColorPresetMeta[];
+    constructor();
+    /**
+     * Set the primary color using a preset name or a full custom palette.
+     * Immediately applies CSS custom properties to :root and persists to localStorage.
+     */
+    setPrimary(color: PrimaryColorPreset | ColorPalette): void;
+    /**
+     * Switch between light, dark, and system modes.
+     * Persisted to localStorage automatically.
+     */
+    setMode(mode: ThemeMode): void;
+    /** Toggle between light ↔ dark (ignores system). */
+    toggleMode(): void;
+    /**
+     * Apply a full ThemeConfig at once (used by provideSharedUiTheme).
+     * Does NOT override values already restored from localStorage unless
+     * the config explicitly provides them.
+     */
+    applyConfig(config: ThemeConfig): void;
+    private applyPalette;
+    private _mqListener?;
+    private applyMode;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}
+//# sourceMappingURL=theme.service.d.ts.map

package/tokens/theme/theme.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.service.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/tokens/theme/theme.service.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAAE,kBAAkB,EACjB,eAAe,EAC/B,MAAM,iBAAiB,CAAC;;AAEzB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,kBAAkB,GAAG,YAAY,CAAC;IACjD,IAAI,CAAC,EAAU,SAAS,CAAC;CAC1B;AAiBD,qBACa,YAAY;IACvB,OAAO,CAAC,UAAU,CAAuB;IAGzC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqC;IAC9D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiC;IAIvD,wEAAwE;IACxE,QAAQ,CAAC,YAAY,qDAA6B;IAElD,4BAA4B;IAC5B,QAAQ,CAAC,aAAa,+CAKnB;IAEH,4BAA4B;IAC5B,QAAQ,CAAC,UAAU,4CAA2B;IAE9C,mFAAmF;IACnF,QAAQ,CAAC,MAAM,0CAMZ;IAEH,mDAAmD;IACnD,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,CAAgC;;IAoCnE;;;OAGG;IACH,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI;IAa1D;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAK9B,oDAAoD;IACpD,UAAU,IAAI,IAAI;IAIlB;;;;OAIG;IACH,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAgBtC,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW,CAAC,CAAmC;IAEvD,OAAO,CAAC,SAAS;yCApIN,YAAY;6CAAZ,YAAY;CA0JxB"}