@praxisjs/css 0.1.0

package/dist/server.js

@@ -0,0 +1,8 @@
+/**
+ * Server-side / build-time API for the `@praxisjs/vite-plugin` CSS extractor.
+ *
+ * Import this at `@praxisjs/css/server` — it is NOT part of the browser bundle.
+ * Using it in browser code has no effect and the tree-shaker will remove it.
+ */
+export { setCollector, getCollector, createCollector, } from "./internal/collector.js";
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,eAAe,GAEhB,MAAM,yBAAyB,CAAC"}

package/dist/tokens/decorators.d.ts

@@ -0,0 +1,41 @@
+import { theme, ThemeInstance, type ThemedConfig } from "./theme-instance.js";
+/**
+ * Class decorator that installs the design token system on the root component.
+ *
+ * - `skeleton` — `TokenSheet` subclass that declares token names. Its static
+ *   properties (`AppTokens.colorPrimary`) return CSS var references.
+ * - `DefaultTheme` — concrete class (extends skeleton) that provides the
+ *   initial CSS custom property values injected on `:root`.
+ * - `config.persist`  — save the active theme to `localStorage` and restore it
+ *   on the next page load.
+ * - `config.syncTabs` — broadcast theme changes to other browser tabs via
+ *   `BroadcastChannel`.
+ *
+ * Must appear above `@Component()` in the decorator stack.
+ *
+ * @example
+ * @Themed(AppTokens, LightTheme, { persist: true, syncTabs: true })
+ * @Component()
+ * class App extends StatefulComponent { ... }
+ */
+export declare function Themed(_skeleton: abstract new (...args: unknown[]) => unknown, DefaultTheme: new () => unknown, config?: Partial<ThemedConfig>): any;
+/**
+ * Field decorator that injects the active {@link ThemeInstance} into a
+ * component field. Use `.switch(ThemeClass)` to change the theme.
+ *
+ * Equivalent to the programmatic {@link theme} function — choose whichever
+ * fits the component's style.
+ *
+ * @example
+ * @Component()
+ * class Header extends StatefulComponent {
+ *   @Theme() theme!: ThemeInstance
+ *
+ *   render() {
+ *     return <button onClick={() => this.theme.switch(DarkTheme)}>Dark</button>
+ *   }
+ * }
+ */
+export declare function Theme(): (_value: undefined, context: ClassFieldDecoratorContext<any>) => void;
+export { theme, ThemeInstance, type ThemedConfig };
+//# sourceMappingURL=decorators.d.ts.map

package/dist/tokens/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,EACL,aAAa,EACb,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAyB7B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EACvD,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAE7B,GAAG,CAQL;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,IAYF,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,IAAI,CACvF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/tokens/decorators.js

@@ -0,0 +1,73 @@
+import { createClassDecorator, ClassBehavior, createFieldDecorator, } from "@praxisjs/decorators";
+import { createThemeInstance, theme, ThemeInstance, } from "./theme-instance.js";
+// ─── @Themed ─────────────────────────────────────────────────────────────────
+class ThemedBehavior extends ClassBehavior {
+    constructor(DefaultTheme, config) {
+        super();
+        this.DefaultTheme = DefaultTheme;
+        this.config = config;
+    }
+    create(_instance) {
+        createThemeInstance(this.DefaultTheme, this.config);
+        return {};
+    }
+    initialize(_Enhanced, _original) {
+        createThemeInstance(this.DefaultTheme, this.config);
+    }
+}
+/**
+ * Class decorator that installs the design token system on the root component.
+ *
+ * - `skeleton` — `TokenSheet` subclass that declares token names. Its static
+ *   properties (`AppTokens.colorPrimary`) return CSS var references.
+ * - `DefaultTheme` — concrete class (extends skeleton) that provides the
+ *   initial CSS custom property values injected on `:root`.
+ * - `config.persist`  — save the active theme to `localStorage` and restore it
+ *   on the next page load.
+ * - `config.syncTabs` — broadcast theme changes to other browser tabs via
+ *   `BroadcastChannel`.
+ *
+ * Must appear above `@Component()` in the decorator stack.
+ *
+ * @example
+ * @Themed(AppTokens, LightTheme, { persist: true, syncTabs: true })
+ * @Component()
+ * class App extends StatefulComponent { ... }
+ */
+export function Themed(_skeleton, DefaultTheme, config) {
+    return createClassDecorator(new ThemedBehavior(DefaultTheme, config ?? {}));
+}
+// ─── @Theme ───────────────────────────────────────────────────────────────────
+/**
+ * Field decorator that injects the active {@link ThemeInstance} into a
+ * component field. Use `.switch(ThemeClass)` to change the theme.
+ *
+ * Equivalent to the programmatic {@link theme} function — choose whichever
+ * fits the component's style.
+ *
+ * @example
+ * @Component()
+ * class Header extends StatefulComponent {
+ *   @Theme() theme!: ThemeInstance
+ *
+ *   render() {
+ *     return <button onClick={() => this.theme.switch(DarkTheme)}>Dark</button>
+ *   }
+ * }
+ */
+export function Theme() {
+    return createFieldDecorator({
+        bind(_instance, _name, _initialValue) {
+            return {
+                descriptor: {
+                    get() { return theme(); },
+                    // eslint-disable-next-line @typescript-eslint/no-empty-function
+                    set() { },
+                },
+            };
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+}
+export { theme, ThemeInstance };
+//# sourceMappingURL=decorators.js.map

package/dist/tokens/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,aAAa,EAEb,oBAAoB,GAErB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,mBAAmB,EACnB,KAAK,EACL,aAAa,GAEd,MAAM,qBAAqB,CAAC;AAE7B,gFAAgF;AAEhF,MAAM,cAAe,SAAQ,aAAa;IACxC,YACmB,YAA+B,EAC/B,MAA6B;QAE9C,KAAK,EAAE,CAAC;QAHS,iBAAY,GAAZ,YAAY,CAAmB;QAC/B,WAAM,GAAN,MAAM,CAAuB;IAGhD,CAAC;IAED,MAAM,CAAC,SAAwB;QAC7B,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,UAAU,CACR,SAA8C,EAC9C,SAA8C;QAE9C,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,MAAM,CACpB,SAAuD,EACvD,YAA+B,EAC/B,MAA8B;IAG9B,OAAO,oBAAoB,CACzB,IAAI,cAAc,CAAC,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC,CAKvC,CAAC;AACZ,CAAC;AAED,iFAAiF;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa;YAClC,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,KAAoB,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC;oBACxC,gEAAgE;oBAChE,GAAG,KAAU,CAAC;iBACf;aACF,CAAC;QACJ,CAAC;QACD,8DAA8D;KAC/D,CAAqF,CAAC;AACzF,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAqB,CAAC"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,4 @@
+export { TokenSheet, tokenVars } from "./token-sheet.js";
+export { ThemeInstance, theme, type ThemedConfig } from "./theme-instance.js";
+export { Themed, Theme } from "./decorators.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/tokens/index.js

@@ -0,0 +1,4 @@
+export { TokenSheet, tokenVars } from "./token-sheet.js";
+export { ThemeInstance, theme } from "./theme-instance.js";
+export { Themed, Theme } from "./decorators.js";
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAqB,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/tokens/theme-instance.d.ts

@@ -0,0 +1,33 @@
+export interface ThemedConfig {
+    persist: boolean;
+    syncTabs: boolean;
+}
+/**
+ * Manages the active design token theme: injects CSS custom properties on
+ * `:root`, persists to `localStorage`, and synchronises across browser tabs
+ * via `BroadcastChannel`.
+ *
+ * Obtain the app-wide instance via {@link theme}. Use {@link ThemeInstance.switch}
+ * to swap to any class that extends the skeleton `TokenSheet`.
+ */
+export declare class ThemeInstance {
+    #private;
+    constructor(DefaultTheme: new () => unknown, config?: Partial<ThemedConfig>);
+    /** The currently active theme instance. */
+    get current(): unknown;
+    /**
+     * Switches the active theme. Instantiates `ThemeClass`, updates `:root` CSS
+     * vars, persists to `localStorage` (if `persist` is enabled), and broadcasts
+     * to other tabs (if `syncTabs` is enabled).
+     */
+    switch(ThemeClass: new () => unknown): void;
+    /** Removes the injected `<style>` and closes the BroadcastChannel. */
+    destroy(): void;
+}
+export declare function createThemeInstance(DefaultTheme: new () => unknown, config?: Partial<ThemedConfig>): ThemeInstance;
+/**
+ * Returns the app-wide {@link ThemeInstance}.
+ * Throws if `@Themed()` has not been applied to the root component.
+ */
+export declare function theme(): ThemeInstance;
+//# sourceMappingURL=theme-instance.d.ts.map

package/dist/tokens/theme-instance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-instance.d.ts","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"AAyCA,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAG,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAOD;;;;;;;GAOG;AACH,qBAAa,aAAa;;gBAKZ,YAAY,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,OAAO,CAAC,YAAY,CAAM;IAY/E,2CAA2C;IAC3C,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,UAAU,EAAE,UAAU,OAAO,GAAG,IAAI;IAS3C,sEAAsE;IACtE,OAAO,IAAI,IAAI;CA6BhB;AAMD,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC7B,aAAa,CAGf;AAED;;;GAGG;AACH,wBAAgB,KAAK,IAAI,aAAa,CAKrC"}

package/dist/tokens/theme-instance.js

@@ -0,0 +1,130 @@
+import { getCollector } from "../internal/collector.js";
+// ─── helpers ──────────────────────────────────────────────────────────────────
+function camelToKebab(s) {
+    return s.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function instanceToVars(instance) {
+    const result = {};
+    for (const [key, val] of Object.entries(instance)) {
+        if (typeof val === "string" || typeof val === "number") {
+            result[`--${camelToKebab(key)}`] = String(val);
+        }
+    }
+    return result;
+}
+function varsToCSS(vars) {
+    const body = Object.entries(vars)
+        .map(([k, v]) => `  ${k}: ${v};`)
+        .join("\n");
+    return `:root {\n${body}\n}`;
+}
+function applyVarsToRoot(vars) {
+    const col = getCollector();
+    if (col) {
+        col.inject("theme", varsToCSS(vars));
+        return;
+    }
+    if (typeof document === "undefined")
+        return;
+    let el = document.querySelector("style[data-praxis-theme]");
+    if (!el) {
+        el = document.createElement("style");
+        el.setAttribute("data-praxis-theme", "");
+        document.head.appendChild(el);
+    }
+    el.textContent = varsToCSS(vars);
+}
+const STORAGE_KEY = "praxis-theme";
+const BROADCAST_KEY = "praxis-theme";
+// ─── ThemeInstance ────────────────────────────────────────────────────────────
+/**
+ * Manages the active design token theme: injects CSS custom properties on
+ * `:root`, persists to `localStorage`, and synchronises across browser tabs
+ * via `BroadcastChannel`.
+ *
+ * Obtain the app-wide instance via {@link theme}. Use {@link ThemeInstance.switch}
+ * to swap to any class that extends the skeleton `TokenSheet`.
+ */
+export class ThemeInstance {
+    #current;
+    #config;
+    #channel = null;
+    constructor(DefaultTheme, config = {}) {
+        this.#config = { persist: false, syncTabs: false, ...config };
+        this.#current = new DefaultTheme();
+        const saved = this.#config.persist ? this.#loadFromStorage() : null;
+        if (typeof document !== "undefined") {
+            applyVarsToRoot(saved ?? instanceToVars(this.#current));
+            if (this.#config.syncTabs)
+                this.#setupBroadcast();
+        }
+    }
+    /** The currently active theme instance. */
+    get current() {
+        return this.#current;
+    }
+    /**
+     * Switches the active theme. Instantiates `ThemeClass`, updates `:root` CSS
+     * vars, persists to `localStorage` (if `persist` is enabled), and broadcasts
+     * to other tabs (if `syncTabs` is enabled).
+     */
+    switch(ThemeClass) {
+        this.#current = new ThemeClass();
+        const vars = instanceToVars(this.#current);
+        if (typeof document !== "undefined")
+            applyVarsToRoot(vars);
+        if (this.#config.persist)
+            this.#saveToStorage(vars);
+        if (this.#config.syncTabs)
+            this.#channel?.postMessage({ vars });
+    }
+    /** Removes the injected `<style>` and closes the BroadcastChannel. */
+    destroy() {
+        this.#channel?.close();
+        this.#channel = null;
+        if (typeof document !== "undefined") {
+            document.querySelector("style[data-praxis-theme]")?.remove();
+        }
+    }
+    #saveToStorage(vars) {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(vars));
+        }
+        catch { /* noop */ }
+    }
+    #loadFromStorage() {
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    #setupBroadcast() {
+        if (typeof BroadcastChannel === "undefined")
+            return;
+        this.#channel = new BroadcastChannel(BROADCAST_KEY);
+        this.#channel.addEventListener("message", (e) => {
+            if (e.data.vars)
+                applyVarsToRoot(e.data.vars);
+        });
+    }
+}
+// ─── Singleton ────────────────────────────────────────────────────────────────
+let _instance = null;
+export function createThemeInstance(DefaultTheme, config) {
+    _instance = new ThemeInstance(DefaultTheme, config);
+    return _instance;
+}
+/**
+ * Returns the app-wide {@link ThemeInstance}.
+ * Throws if `@Themed()` has not been applied to the root component.
+ */
+export function theme() {
+    if (!_instance) {
+        throw new Error("[PraxisJS] theme() called before @Themed() was applied to the root component.");
+    }
+    return _instance;
+}
+//# sourceMappingURL=theme-instance.js.map

package/dist/tokens/theme-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-instance.js","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"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"}

package/dist/tokens/token-sheet.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Base class for token skeletons and theme value classes.
+ *
+ * Extend to declare token names (skeleton) or token values (theme).
+ * Static property access returns CSS custom property references at any level
+ * of the inheritance chain: `AppTokens.colorPrimary` → `'var(--color-primary)'`.
+ *
+ * @example — skeleton (names only)
+ * class AppTokens extends TokenSheet {
+ *   colorPrimary!: string
+ *   spaceMd!:      string
+ * }
+ *
+ * @example — theme (values)
+ * class LightTheme extends AppTokens {
+ *   colorPrimary = '#3b82f6'
+ *   spaceMd      = '16px'
+ * }
+ *
+ * class DarkTheme extends LightTheme {
+ *   colorPrimary = '#60a5fa'  // only overrides what changes
+ * }
+ */
+export declare const TokenSheet: abstract new (...args: unknown[]) => object;
+/**
+ * Returns a typed accessor for CSS custom property references derived from a
+ * {@link TokenSheet} subclass. Each key returns `'var(--token-name)'`.
+ *
+ * Use this in `Stylesheet` definitions to get full TypeScript autocomplete
+ * without casts.
+ *
+ * @example
+ * const t = tokenVars(AppTokens)
+ * // t.colorPrimary → 'var(--color-primary)'
+ * // t.spaceMd      → 'var(--space-md)'
+ *
+ * class BtnStyles extends Stylesheet {
+ *   $root = this.css({ background: t.colorPrimary, padding: t.spaceMd })
+ * }
+ */
+type TokenVarMap<T extends abstract new (...args: unknown[]) => unknown> = {
+    readonly [K in keyof InstanceType<T> as K extends string ? K : never]: string;
+};
+export declare function tokenVars<T extends abstract new (...args: unknown[]) => unknown>(cls: T): TokenVarMap<T>;
+export {};
+//# sourceMappingURL=token-sheet.d.ts.map

package/dist/tokens/token-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-sheet.d.ts","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,EAaN,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,MAAM,CAAC;AAI7D;;;;;;;;;;;;;;;GAeG;AACH,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,IAAI;IACzE,QAAQ,EAAE,CAAC,IAAI,MAAM,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM;CAC9E,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAC9E,GAAG,EAAE,CAAC,GACL,WAAW,CAAC,CAAC,CAAC,CAEhB"}

package/dist/tokens/token-sheet.js

@@ -0,0 +1,55 @@
+// ─── camelCase → --kebab-case ─────────────────────────────────────────────────
+function camelToKebab(s) {
+    return s.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+// ─── Static props that must never be intercepted ──────────────────────────────
+const SKIP = new Set([
+    "length", "name", "prototype", "constructor",
+    "toString", "valueOf", "toLocaleString",
+    "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable",
+    "call", "apply", "bind", "caller", "arguments",
+    "__esModule", "then", "catch", "finally",
+]);
+// ─── TokenSheet ───────────────────────────────────────────────────────────────
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+const _Base = class {
+};
+/**
+ * Base class for token skeletons and theme value classes.
+ *
+ * Extend to declare token names (skeleton) or token values (theme).
+ * Static property access returns CSS custom property references at any level
+ * of the inheritance chain: `AppTokens.colorPrimary` → `'var(--color-primary)'`.
+ *
+ * @example — skeleton (names only)
+ * class AppTokens extends TokenSheet {
+ *   colorPrimary!: string
+ *   spaceMd!:      string
+ * }
+ *
+ * @example — theme (values)
+ * class LightTheme extends AppTokens {
+ *   colorPrimary = '#3b82f6'
+ *   spaceMd      = '16px'
+ * }
+ *
+ * class DarkTheme extends LightTheme {
+ *   colorPrimary = '#60a5fa'  // only overrides what changes
+ * }
+ */
+export const TokenSheet = new Proxy(_Base, {
+    get(target, prop, receiver) {
+        if (typeof prop === "string" &&
+            !SKIP.has(prop) &&
+            !prop.startsWith("_") &&
+            !prop.startsWith("$")) {
+            return `var(--${camelToKebab(prop)})`;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return Reflect.get(target, prop, receiver);
+    },
+});
+export function tokenVars(cls) {
+    return cls;
+}
+//# sourceMappingURL=token-sheet.js.map

package/dist/tokens/token-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-sheet.js","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAAA,iFAAiF;AAEjF,SAAS,YAAY,CAAC,CAAS;IAC7B,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACpD,CAAC;AAED,iFAAiF;AAEjF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa;IAC5C,UAAU,EAAE,SAAS,EAAE,gBAAgB;IACvC,gBAAgB,EAAE,eAAe,EAAE,sBAAsB;IACzD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW;IAC9C,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS;CACzC,CAAC,CAAC;AAEH,iFAAiF;AAEjF,kEAAkE;AAClE,MAAM,KAAK,GAAG;CAAQ,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE;IACzC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ;QACxB,IACE,OAAO,IAAI,KAAK,QAAQ;YACxB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;YACf,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACrB,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EACrB,CAAC;YACD,OAAO,SAAS,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;QACxC,CAAC;QACD,+DAA+D;QAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;CACF,CAA2D,CAAC;AAwB7D,MAAM,UAAU,SAAS,CACvB,GAAM;IAEN,OAAO,GAAgC,CAAC;AAC1C,CAAC"}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@praxisjs/css",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
+    },
+    "./extract": {
+      "import": "./dist/extract.js",
+      "types": "./dist/extract.d.ts"
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "csstype": "^3.2.3",
+    "@praxisjs/core": "1.7.0",
+    "@praxisjs/decorators": "1.1.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}