@pure-ds/core 0.3.0

package/dist/types/src/js/pds-core/pds-generator.d.ts

@@ -0,0 +1,741 @@
+/**
+ * Adopt primitives stylesheet into a shadow root
+ * This is the primary method components should use
+ *
+ * @param {ShadowRoot} shadowRoot - The shadow root to adopt into
+ * @param {CSSStyleSheet[]} additionalSheets - Additional component-specific stylesheets
+ * @returns {Promise<void>}
+ *
+ * @example
+ * // In your web component:
+ * import { PDS } from 'pure-ds';
+ *
+ * async connectedCallback() {
+ *   this.attachShadow({ mode: 'open' });
+ *
+ *   const componentStyles = new CSSStyleSheet();
+ *   componentStyles.replaceSync(`...your styles...`);
+ *
+ *   await PDS.adoptPrimitives(this.shadowRoot, [componentStyles]);
+ * }
+ */
+export function adoptPrimitives(shadowRoot: ShadowRoot, additionalSheets?: CSSStyleSheet[]): Promise<void>;
+/**
+ * Adopt multiple layers into a shadow root
+ * For complex components that need more than just primitives
+ *
+ * @param {ShadowRoot} shadowRoot - The shadow root to adopt into
+ * @param {string[]} layers - Array of layer names to adopt (e.g., ['tokens', 'primitives', 'components'])
+ * @param {CSSStyleSheet[]} additionalSheets - Additional component-specific stylesheets
+ * @returns {Promise<void>}
+ */
+export function adoptLayers(shadowRoot: ShadowRoot, layers?: string[], additionalSheets?: CSSStyleSheet[]): Promise<void>;
+/**
+ * Create a component-specific stylesheet from CSS string
+ * Helper to create constructable stylesheets
+ *
+ * @param {string} css - CSS string
+ * @returns {CSSStyleSheet}
+ */
+export function createStylesheet(css: string): CSSStyleSheet;
+/**
+ * Check if running in live design system context
+ * Useful for conditional behavior
+ *
+ * @returns {boolean}
+ */
+export function isLiveMode(): boolean;
+/**
+ * Generator - A JS-config-first design system
+ * Generates comprehensive CSS variables and styles from a minimal configuration
+ */
+export class Generator {
+    /**
+     * Static method to apply styles to document
+     * Creates a link element with BLOB URL
+     * @param {Generator} generator - The Generator instance with generated styles
+     */
+    static applyStyles(generator: Generator): void;
+    /**
+     * Install runtime styles for PDS using constructable stylesheets when
+     * available, otherwise update a single <style id="pds-runtime-stylesheet">.
+     * This approach reduces flicker and avoids link/blob swapping.
+     */
+    static installRuntimeStyles(cssText: any): void;
+    constructor(options?: {});
+    options: {
+        debug: boolean;
+    };
+    tokens: {
+        colors: {
+            primary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            secondary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            accent: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            danger: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            info: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            gray: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            surface: {
+                base: any;
+                subtle: string;
+                elevated: string;
+                sunken: string;
+                overlay: string;
+                inverse: string;
+                hover: string;
+            };
+        };
+        spacing: string;
+        radius: {
+            none: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        borderWidths: {
+            hairline: string;
+            thin: string;
+            medium: string;
+            thick: string;
+        };
+        typography: {
+            fontFamily: {
+                headings: any;
+                body: any;
+                mono: any;
+            };
+            fontSize: {
+                xs: string;
+                sm: string;
+                base: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                "4xl": string;
+            };
+            fontWeight: {
+                light: any;
+                normal: any;
+                medium: any;
+                semibold: any;
+                bold: any;
+            };
+            lineHeight: {
+                tight: any;
+                normal: any;
+                relaxed: any;
+            };
+        };
+        shadows: {
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            inner: string;
+        };
+        layout: {
+            maxWidth: string;
+            minHeight: string;
+            containerPadding: string;
+            breakpoints: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            pageMargin: string;
+            sectionGap: string;
+            containerGap: string;
+            heroSpacing: string;
+            footerSpacing: string;
+        };
+        transitions: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        zIndex: {
+            dropdown: any;
+            sticky: any;
+            fixed: any;
+            modal: any;
+            drawer: any;
+            popover: any;
+            tooltip: any;
+            notification: any;
+        };
+        icons: {
+            set: any;
+            weight: any;
+            defaultSize: string;
+            sizes: {
+                [k: string]: string;
+            };
+            spritePath: any;
+        };
+    };
+    generateTokens(): {
+        colors: {
+            primary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            secondary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            accent: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            danger: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            info: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            gray: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            surface: {
+                base: any;
+                subtle: string;
+                elevated: string;
+                sunken: string;
+                overlay: string;
+                inverse: string;
+                hover: string;
+            };
+        };
+        spacing: string;
+        radius: {
+            none: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        borderWidths: {
+            hairline: string;
+            thin: string;
+            medium: string;
+            thick: string;
+        };
+        typography: {
+            fontFamily: {
+                headings: any;
+                body: any;
+                mono: any;
+            };
+            fontSize: {
+                xs: string;
+                sm: string;
+                base: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                "4xl": string;
+            };
+            fontWeight: {
+                light: any;
+                normal: any;
+                medium: any;
+                semibold: any;
+                bold: any;
+            };
+            lineHeight: {
+                tight: any;
+                normal: any;
+                relaxed: any;
+            };
+        };
+        shadows: {
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            inner: string;
+        };
+        layout: {
+            maxWidth: string;
+            minHeight: string;
+            containerPadding: string;
+            breakpoints: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            pageMargin: string;
+            sectionGap: string;
+            containerGap: string;
+            heroSpacing: string;
+            footerSpacing: string;
+        };
+        transitions: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        zIndex: {
+            dropdown: any;
+            sticky: any;
+            fixed: any;
+            modal: any;
+            drawer: any;
+            popover: any;
+            tooltip: any;
+            notification: any;
+        };
+        icons: {
+            set: any;
+            weight: any;
+            defaultSize: string;
+            sizes: {
+                [k: string]: string;
+            };
+            spritePath: any;
+        };
+    };
+    /**
+     * Generate spacing tokens based on the provided configuration.
+     * @param {Object} spatialConfig
+     * @returns { String } CSS spacing tokens
+     */
+    generateSpacingTokens(spatialConfig: any): string;
+    generateTypographyTokens(typographyConfig: any): {
+        fontFamily: {
+            headings: any;
+            body: any;
+            mono: any;
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+            "4xl": string;
+        };
+        fontWeight: {
+            light: any;
+            normal: any;
+            medium: any;
+            semibold: any;
+            bold: any;
+        };
+        lineHeight: {
+            tight: any;
+            normal: any;
+            relaxed: any;
+        };
+    };
+    getTokens(): {
+        colors: {
+            primary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            secondary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            accent: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            danger: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            info: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            gray: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: any;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            surface: {
+                base: any;
+                subtle: string;
+                elevated: string;
+                sunken: string;
+                overlay: string;
+                inverse: string;
+                hover: string;
+            };
+        };
+        spacing: string;
+        radius: {
+            none: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        borderWidths: {
+            hairline: string;
+            thin: string;
+            medium: string;
+            thick: string;
+        };
+        typography: {
+            fontFamily: {
+                headings: any;
+                body: any;
+                mono: any;
+            };
+            fontSize: {
+                xs: string;
+                sm: string;
+                base: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                "4xl": string;
+            };
+            fontWeight: {
+                light: any;
+                normal: any;
+                medium: any;
+                semibold: any;
+                bold: any;
+            };
+            lineHeight: {
+                tight: any;
+                normal: any;
+                relaxed: any;
+            };
+        };
+        shadows: {
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            inner: string;
+        };
+        layout: {
+            maxWidth: string;
+            minHeight: string;
+            containerPadding: string;
+            breakpoints: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            pageMargin: string;
+            sectionGap: string;
+            containerGap: string;
+            heroSpacing: string;
+            footerSpacing: string;
+        };
+        transitions: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        zIndex: {
+            dropdown: any;
+            sticky: any;
+            fixed: any;
+            modal: any;
+            drawer: any;
+            popover: any;
+            tooltip: any;
+            notification: any;
+        };
+        icons: {
+            set: any;
+            weight: any;
+            defaultSize: string;
+            sizes: {
+                [k: string]: string;
+            };
+            spritePath: any;
+        };
+    };
+    exportCSS(): string;
+    get tokensCSS(): any;
+    get primitivesCSS(): any;
+    get componentsCSS(): any;
+    get utilitiesCSS(): any;
+    get layeredCSS(): string;
+    /**
+     * Get a complete compiled representation of the design system state.
+     * This provides structured access to all generated tokens, scales, layers, and metadata.
+     * Linked to ontology and enums for introspection and tooling.
+     *
+     * @returns {Object} Compiled design system state with tokens, layers, metadata, and references
+     */
+    get compiled(): any;
+    get tokensStylesheet(): any;
+    get primitivesStylesheet(): any;
+    get componentsStylesheet(): any;
+    get utilitiesStylesheet(): any;
+    /**
+     * Generate CSS module files for export
+     * Returns object with filename => content
+     */
+    getCSSModules(): {
+        "pds-tokens.css.js": string;
+        "pds-primitives.css.js": string;
+        "pds-components.css.js": string;
+        "pds-utilities.css.js": string;
+        "pds-styles.css.js": string;
+    };
+    #private;
+}
+//# sourceMappingURL=pds-generator.d.ts.map