@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/typography/fesm2022/typography.mjs

@@ -0,0 +1,242 @@
+import * as i0 from '@angular/core';
+import { Directive, NgModule } from '@angular/core';
+import { classes } from '@egose/shadcn-theme-ng/utils';
+
+const hlmBlockquote = "mt-6 border-border border-l-2 pl-6 italic";
+class HlmBlockquote {
+    constructor() {
+        classes(() => hlmBlockquote);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmBlockquote, isStandalone: true, selector: "[hlmBlockquote]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBlockquote, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmBlockquote]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmCode = "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold";
+class HlmCode {
+    constructor() {
+        classes(() => hlmCode);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCode, isStandalone: true, selector: "[hlmCode]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCode, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmCode]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmH1 = "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl";
+class HlmH1 {
+    constructor() {
+        classes(() => hlmH1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH1, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmH1, isStandalone: true, selector: "[hlmH1]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH1, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmH1]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmH2 = "scroll-m-20 border-border border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0";
+class HlmH2 {
+    constructor() {
+        classes(() => hlmH2);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH2, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmH2, isStandalone: true, selector: "[hlmH2]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH2, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmH2]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmH3 = "scroll-m-20 text-2xl font-semibold tracking-tight";
+class HlmH3 {
+    constructor() {
+        classes(() => hlmH3);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH3, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmH3, isStandalone: true, selector: "[hlmH3]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH3, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmH3]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmH4 = "scroll-m-20 text-xl font-semibold tracking-tight";
+class HlmH4 {
+    constructor() {
+        classes(() => hlmH4);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH4, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmH4, isStandalone: true, selector: "[hlmH4]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmH4, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmH4]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmLarge = "text-lg font-semibold";
+class HlmLarge {
+    constructor() {
+        classes(() => hlmLarge);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLarge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmLarge, isStandalone: true, selector: "[hlmLarge]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLarge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmLarge]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmLead = "text-xl text-muted-foreground";
+class HlmLead {
+    constructor() {
+        classes(() => hlmLead);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmLead, isStandalone: true, selector: "[hlmLead]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLead, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmLead]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmMuted = "text-sm text-muted-foreground";
+class HlmMuted {
+    constructor() {
+        classes(() => hlmMuted);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMuted, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmMuted, isStandalone: true, selector: "[hlmMuted]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMuted, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMuted]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmP = "leading-7 [&:not(:first-child)]:mt-6";
+class HlmP {
+    constructor() {
+        classes(() => hlmP);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmP, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmP, isStandalone: true, selector: "[hlmP]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmP, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmP]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmSmall = "text-sm font-medium leading-none";
+class HlmSmall {
+    constructor() {
+        classes(() => hlmSmall);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSmall, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmSmall, isStandalone: true, selector: "[hlmSmall]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSmall, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSmall]',
+                }]
+        }], ctorParameters: () => [] });
+
+const hlmUl = "my-6 ml-6 list-disc [&>li]:mt-2";
+class HlmUl {
+    constructor() {
+        classes(() => hlmUl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmUl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmUl, isStandalone: true, selector: "[hlmUl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmUl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmUl]',
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of typography
+ */
+const HlmTypographyImports = [
+    HlmBlockquote,
+    HlmCode,
+    HlmH1,
+    HlmH2,
+    HlmH3,
+    HlmH4,
+    HlmLarge,
+    HlmLead,
+    HlmMuted,
+    HlmP,
+    HlmSmall,
+    HlmUl,
+];
+class HlmTypographyModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmTypographyModule, imports: [HlmBlockquote,
+            HlmCode,
+            HlmH1,
+            HlmH2,
+            HlmH3,
+            HlmH4,
+            HlmLarge,
+            HlmLead,
+            HlmMuted,
+            HlmP,
+            HlmSmall,
+            HlmUl], exports: [HlmBlockquote,
+            HlmCode,
+            HlmH1,
+            HlmH2,
+            HlmH3,
+            HlmH4,
+            HlmLarge,
+            HlmLead,
+            HlmMuted,
+            HlmP,
+            HlmSmall,
+            HlmUl] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTypographyModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTypographyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmTypographyImports],
+                    exports: [...HlmTypographyImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmBlockquote, HlmCode, HlmH1, HlmH2, HlmH3, HlmH4, HlmLarge, HlmLead, HlmMuted, HlmP, HlmSmall, HlmTypographyImports, HlmTypographyModule, HlmUl, hlmBlockquote, hlmCode, hlmH1, hlmH2, hlmH3, hlmH4, hlmLarge, hlmLead, hlmMuted, hlmP, hlmSmall, hlmUl };
+

package/typography/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "typography",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@spartan-ng/brain": "^1.1.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/typography.mjs",
+  "typings": "types/typography.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/typography.d.ts",
+      "default": "./fesm2022/typography.mjs"
+    }
+  },
+  "type": "module"
+}

package/typography/types/typography.d.ts

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+
+declare const hlmBlockquote = "tw:mt-6 tw:border-border tw:border-l-2 tw:pl-6 tw:italic";
+declare class HlmBlockquote {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmBlockquote, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmBlockquote, "[hlmBlockquote]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmCode = "tw:relative tw:rounded tw:bg-muted tw:px-[0.3rem] tw:py-[0.2rem] tw:font-mono tw:text-sm tw:font-semibold";
+declare class HlmCode {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCode, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmCode, "[hlmCode]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmH1 = "tw:scroll-m-20 tw:text-4xl tw:font-extrabold tw:tracking-tight tw:lg:text-5xl";
+declare class HlmH1 {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmH1, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmH1, "[hlmH1]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmH2 = "tw:scroll-m-20 tw:border-border tw:border-b tw:pb-2 tw:text-3xl tw:font-semibold tw:tracking-tight tw:transition-colors tw:first:mt-0";
+declare class HlmH2 {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmH2, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmH2, "[hlmH2]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmH3 = "tw:scroll-m-20 tw:text-2xl tw:font-semibold tw:tracking-tight";
+declare class HlmH3 {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmH3, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmH3, "[hlmH3]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmH4 = "tw:scroll-m-20 tw:text-xl tw:font-semibold tw:tracking-tight";
+declare class HlmH4 {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmH4, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmH4, "[hlmH4]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmLarge = "tw:text-lg tw:font-semibold";
+declare class HlmLarge {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmLarge, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmLarge, "[hlmLarge]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmLead = "tw:text-xl tw:text-muted-foreground";
+declare class HlmLead {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmLead, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmLead, "[hlmLead]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmMuted = "tw:text-sm tw:text-muted-foreground";
+declare class HlmMuted {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMuted, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMuted, "[hlmMuted]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmP = "tw:leading-7 tw:[&:not(:first-child)]:mt-6";
+declare class HlmP {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmP, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmP, "[hlmP]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmSmall = "tw:text-sm tw:font-medium tw:leading-none";
+declare class HlmSmall {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmSmall, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmSmall, "[hlmSmall]", never, {}, {}, never, never, true, never>;
+}
+
+declare const hlmUl = "tw:my-6 tw:ml-6 tw:list-disc tw:[&>li]:mt-2";
+declare class HlmUl {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmUl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmUl, "[hlmUl]", never, {}, {}, never, never, true, never>;
+}
+
+declare const HlmTypographyImports: (typeof HlmBlockquote)[];
+declare class HlmTypographyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTypographyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmTypographyModule, never, [typeof HlmBlockquote, typeof HlmCode, typeof HlmH1, typeof HlmH2, typeof HlmH3, typeof HlmH4, typeof HlmLarge, typeof HlmLead, typeof HlmMuted, typeof HlmP, typeof HlmSmall, typeof HlmUl], [typeof HlmBlockquote, typeof HlmCode, typeof HlmH1, typeof HlmH2, typeof HlmH3, typeof HlmH4, typeof HlmLarge, typeof HlmLead, typeof HlmMuted, typeof HlmP, typeof HlmSmall, typeof HlmUl]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmTypographyModule>;
+}
+
+export { HlmBlockquote, HlmCode, HlmH1, HlmH2, HlmH3, HlmH4, HlmLarge, HlmLead, HlmMuted, HlmP, HlmSmall, HlmTypographyImports, HlmTypographyModule, HlmUl, hlmBlockquote, hlmCode, hlmH1, hlmH2, hlmH3, hlmH4, hlmLarge, hlmLead, hlmMuted, hlmP, hlmSmall, hlmUl };

package/utils/README.md

@@ -1,64 +1,3 @@
-# Utils
+# Utils Subpath
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.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 utils
-```
-
-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/utils
-   ```
-
-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.
+This project ships only as `@egose/shadcn-theme-ng/utils` or `@egose/shadcn-theme-ng-tw/utils`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.

package/utils/fesm2022/utils.mjs

@@ -1,9 +1,216 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { runInInjectionContext, inject, Injector, ElementRef, PLATFORM_ID, DestroyRef, HostAttributeToken, effect, makeEnvironmentProviders } from '@angular/core';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
 
 function hlm(...inputs) {
     return twMerge(clsx(inputs));
 }
+const documentClassStates = new WeakMap();
+let sourceCounter = 0;
+function classes(computed, options = {}) {
+    runInInjectionContext(options.injector ?? inject(Injector), () => {
+        const elementRef = options.elementRef ?? inject(ElementRef);
+        const platformId = inject(PLATFORM_ID);
+        const document = inject(DOCUMENT);
+        const destroyRef = inject(DestroyRef);
+        const baseClasses = inject(new HostAttributeToken('class'), { optional: true });
+        const element = elementRef.nativeElement;
+        const sourceId = sourceCounter++;
+        const state = getDocumentState(document);
+        let manager = state.managers.get(element);
+        if (!manager) {
+            const initialBaseClasses = new Set();
+            if (baseClasses) {
+                toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
+            }
+            manager = {
+                element,
+                sources: new Map(),
+                baseClasses: initialBaseClasses,
+                isUpdating: false,
+                nextOrder: 0,
+                hasInitialized: false,
+                restoreRafId: null,
+                transitionsSuppressed: false,
+                previousTransition: '',
+                previousTransitionPriority: '',
+                state,
+                view: document.defaultView,
+            };
+            state.managers.set(element, manager);
+            observeManagedElement(state, element, platformId, document);
+            if (isPlatformBrowser(platformId) && manager.view) {
+                manager.previousTransition = element.style.getPropertyValue('transition');
+                manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+                element.style.setProperty('transition', 'none', 'important');
+                manager.transitionsSuppressed = true;
+            }
+        }
+        const sourceOrder = manager.nextOrder++;
+        function updateClasses() {
+            const newClasses = toClassList(computed());
+            manager.sources.set(sourceId, {
+                classes: new Set(newClasses),
+                order: sourceOrder,
+            });
+            updateElement(manager);
+            if (manager.transitionsSuppressed) {
+                manager.transitionsSuppressed = false;
+                manager.restoreRafId = manager.view.requestAnimationFrame(() => {
+                    manager.restoreRafId = null;
+                    restoreTransitionSuppression(manager);
+                });
+            }
+        }
+        destroyRef.onDestroy(() => {
+            if (manager.restoreRafId !== null) {
+                manager.view?.cancelAnimationFrame(manager.restoreRafId);
+                manager.restoreRafId = null;
+            }
+            if (manager.transitionsSuppressed) {
+                manager.transitionsSuppressed = false;
+                restoreTransitionSuppression(manager);
+            }
+            manager.sources.delete(sourceId);
+            if (manager.sources.size === 0) {
+                cleanupManager(manager);
+            }
+            else {
+                updateElement(manager);
+            }
+        });
+        effect(updateClasses);
+    });
+}
+function restoreTransitionSuppression(manager) {
+    const prev = manager.previousTransition;
+    if (prev) {
+        manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
+    }
+    else {
+        manager.element.style.removeProperty('transition');
+    }
+}
+function getDocumentState(document) {
+    let state = documentClassStates.get(document);
+    if (!state) {
+        state = { document, managers: new Map(), observer: null };
+        documentClassStates.set(document, state);
+    }
+    return state;
+}
+function observeManagedElement(state, element, platformId, document) {
+    const MutationObserver = document.defaultView?.MutationObserver;
+    if (isPlatformBrowser(platformId) && MutationObserver) {
+        if (!state.observer) {
+            state.observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                        const element = mutation.target;
+                        const manager = state.managers.get(element);
+                        if (manager) {
+                            if (manager.isUpdating)
+                                continue;
+                            const currentClasses = toClassList(element.className);
+                            const allSourceClasses = new Set();
+                            for (const source of manager.sources.values()) {
+                                for (const className of source.classes) {
+                                    allSourceClasses.add(className);
+                                }
+                            }
+                            manager.baseClasses.clear();
+                            for (const className of currentClasses) {
+                                if (!allSourceClasses.has(className)) {
+                                    manager.baseClasses.add(className);
+                                }
+                            }
+                            updateElement(manager);
+                        }
+                    }
+                }
+            });
+        }
+        state.observer.observe(element, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+}
+function updateElement(manager) {
+    if (manager.isUpdating)
+        return;
+    manager.isUpdating = true;
+    if (!manager.hasInitialized && manager.sources.size > 0) {
+        const currentClasses = toClassList(manager.element.className);
+        const allSourceClasses = new Set();
+        for (const source of manager.sources.values()) {
+            source.classes.forEach((className) => allSourceClasses.add(className));
+        }
+        currentClasses.forEach((className) => {
+            if (!allSourceClasses.has(className)) {
+                manager.baseClasses.add(className);
+            }
+        });
+        manager.hasInitialized = true;
+    }
+    const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);
+    const allSourceClasses = [];
+    for (const [, source] of sortedSources) {
+        allSourceClasses.push(...source.classes);
+    }
+    const classesToApply = allSourceClasses.length > 0 || manager.baseClasses.size > 0
+        ? hlm([...allSourceClasses, ...manager.baseClasses])
+        : '';
+    if (manager.element.className !== classesToApply) {
+        manager.element.className = classesToApply;
+    }
+    manager.isUpdating = false;
+}
+function cleanupManager(manager) {
+    const { element, state } = manager;
+    state.managers.delete(element);
+    if (state.observer) {
+        state.observer.disconnect();
+        if (state.managers.size === 0) {
+            state.observer = null;
+        }
+        else {
+            for (const managedElement of state.managers.keys()) {
+                state.observer.observe(managedElement, {
+                    attributes: true,
+                    attributeFilter: ['class'],
+                });
+            }
+        }
+    }
+    if (state.managers.size === 0) {
+        documentClassStates.delete(state.document);
+    }
+}
+const classListCache = new Map();
+function toClassList(className) {
+    if (typeof className === 'string' && classListCache.has(className)) {
+        return classListCache.get(className);
+    }
+    const result = clsx(className)
+        .split(' ')
+        .filter((cls) => cls.length > 0);
+    if (typeof className === 'string' && classListCache.size < 1000) {
+        classListCache.set(className, result);
+    }
+    return result;
+}
+
+function provideSpartanHlm() {
+    return makeEnvironmentProviders([
+        {
+            provide: OVERLAY_DEFAULT_CONFIG,
+            useValue: { usePopover: false },
+        },
+    ]);
+}
 
 /*
  * Public API Surface of utils
@@ -13,5 +220,5 @@ function hlm(...inputs) {
  * Generated bundle index. Do not edit.
  */
 
-export { hlm };
-//# sourceMappingURL=utils.mjs.map
+export { classes, hlm, provideSpartanHlm };
+

package/utils/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "utils",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.2.0 || ^22.0.0",
+    "@angular/core": "^20.2.0 || ^22.0.0",
+    "@spartan-ng/brain": "^0.0.1-alpha.512"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/utils.mjs",
+  "typings": "types/utils.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/utils.d.ts",
+      "default": "./fesm2022/utils.mjs"
+    }
+  },
+  "type": "module"
+}