@nuraly/lumenui 0.1.0

package/packages/common/dist/shared/theme-mixin.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+/**
+ * Theme detection and management mixin for Lit components
+ * Provides data-theme attribute detection with system fallback
+ * Supports multiple design systems (Carbon, Polaris, etc.)
+ */
+export interface ThemeAware {
+    currentTheme: string;
+    currentDesignSystem: 'carbon' | 'default';
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Mixin that adds theme management functionality to LitElement components
+ *
+ * @param superClass - The base class to extend (typically LitElement)
+ * @returns Enhanced class with theme management capabilities
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-component')
+ * export class MyComponent extends ThemeAwareMixin(LitElement) {
+ *   render() {
+ *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
+ *   }
+ * }
+ * ```
+ */
+export declare const ThemeAwareMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ThemeAware> & T;
+/**
+ * Standalone theme detection utility function
+ * For components that don't want to use the mixin approach
+ *
+ * @param element - The element to start theme detection from
+ * @returns The detected theme ('light' or 'dark')
+ */
+export declare function detectTheme(element: Element): 'light' | 'dark';
+/**
+ * Standalone design system detection utility function
+ * For components that don't want to use the mixin approach
+ *
+ * @param element - The element to start detection from
+ * @returns The detected design system
+ */
+export declare function detectDesignSystem(element: Element): 'carbon' | 'default';
+/**
+ * CSS template literal helper for theme-aware styles
+ * Generates CSS with both data-theme selectors and system fallback
+ *
+ * @param lightThemeVars - CSS custom properties for light theme
+ * @param darkThemeVars - CSS custom properties for dark theme
+ * @returns CSS template literal
+ *
+ * @example
+ * ```typescript
+ * import { css } from 'lit';
+ * import { createThemeStyles } from '../shared/theme-mixin.js';
+ *
+ * const styles = css`
+ *   ${createThemeStyles(
+ *     css`--color: black; --bg: white;`,
+ *     css`--color: white; --bg: black;`
+ *   )}
+ *
+ *   .content {
+ *     color: var(--color);
+ *     background: var(--bg);
+ *   }
+ * `;
+ * ```
+ */
+export declare function createThemeStyles(lightThemeVars: any, darkThemeVars: any): string;
+export {};
+//# sourceMappingURL=theme-mixin.d.ts.map

package/packages/common/dist/shared/theme-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/theme-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAmGpD,WAAW,CAAC,UAAU,CAAC,GAAG,CACrD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAe9D;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAUzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,UAmBxE"}

package/packages/common/dist/shared/theme-mixin.js

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that adds theme management functionality to LitElement components
+ *
+ * @param superClass - The base class to extend (typically LitElement)
+ * @returns Enhanced class with theme management capabilities
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-component')
+ * export class MyComponent extends ThemeAwareMixin(LitElement) {
+ *   render() {
+ *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
+ *   }
+ * }
+ * ```
+ */
+export const ThemeAwareMixin = (superClass) => {
+    class ThemeAwareClass extends superClass {
+        constructor() {
+            super(...arguments);
+            this.handleSystemThemeChange = () => {
+                // Only trigger update if no explicit data-theme is set
+                if (!this.closest('[data-theme]') && !document.documentElement.hasAttribute('data-theme')) {
+                    this.requestUpdate();
+                }
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setupThemeObserver();
+            this.setupDesignSystemObserver();
+            this.setupSystemThemeListener();
+        }
+        disconnectedCallback() {
+            var _a, _b, _c;
+            super.disconnectedCallback();
+            (_a = this.themeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.designSystemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            (_c = this.mediaQuery) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.handleSystemThemeChange);
+        }
+        /**
+         * Gets the current theme by checking data-theme attribute in DOM hierarchy
+         * Falls back to system preference if no data-theme is found
+         * Now supports all theme variants: light, dark, carbon-light, carbon-dark, default, default-dark
+         */
+        get currentTheme() {
+            var _a, _b;
+            // Check for data-theme attribute starting from this element and going up
+            const dataTheme = ((_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) ||
+                document.documentElement.getAttribute('data-theme');
+            if (dataTheme) {
+                return dataTheme;
+            }
+            // Fallback to system preference
+            if ((_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)').matches) {
+                return 'dark';
+            }
+            return 'light';
+        }
+        /**
+         * Gets the current design system by checking design-system attribute in DOM hierarchy
+         * Falls back to 'carbon' as default
+         */
+        get currentDesignSystem() {
+            var _a;
+            // Check for design-system attribute starting from this element and going up
+            const designSystem = ((_a = this.closest('[design-system]')) === null || _a === void 0 ? void 0 : _a.getAttribute('design-system')) ||
+                document.documentElement.getAttribute('design-system');
+            if (designSystem === 'carbon') {
+                return designSystem;
+            }
+            return 'default';
+        }
+        setupThemeObserver() {
+            // Watch for data-theme changes on document
+            this.themeObserver = new MutationObserver(() => {
+                this.requestUpdate();
+            });
+            // Observe document element for data-theme changes
+            this.themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+        }
+        setupDesignSystemObserver() {
+            // Watch for design-system changes on document
+            this.designSystemObserver = new MutationObserver(() => {
+                this.requestUpdate();
+            });
+            // Observe document element for design-system changes
+            this.designSystemObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['design-system']
+            });
+        }
+        setupSystemThemeListener() {
+            if (window.matchMedia) {
+                this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                this.mediaQuery.addEventListener('change', this.handleSystemThemeChange);
+            }
+        }
+    }
+    return ThemeAwareClass;
+};
+/**
+ * Standalone theme detection utility function
+ * For components that don't want to use the mixin approach
+ *
+ * @param element - The element to start theme detection from
+ * @returns The detected theme ('light' or 'dark')
+ */
+export function detectTheme(element) {
+    var _a, _b;
+    // Check for data-theme attribute starting from this element and going up
+    const dataTheme = ((_a = element.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) ||
+        document.documentElement.getAttribute('data-theme');
+    if (dataTheme === 'dark' || dataTheme === 'light') {
+        return dataTheme;
+    }
+    // Fallback to system preference
+    if ((_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    }
+    return 'light';
+}
+/**
+ * Standalone design system detection utility function
+ * For components that don't want to use the mixin approach
+ *
+ * @param element - The element to start detection from
+ * @returns The detected design system
+ */
+export function detectDesignSystem(element) {
+    var _a;
+    // Check for design-system attribute starting from this element and going up
+    const designSystem = ((_a = element.closest('[design-system]')) === null || _a === void 0 ? void 0 : _a.getAttribute('design-system')) ||
+        document.documentElement.getAttribute('design-system');
+    if (designSystem === 'carbon') {
+        return designSystem;
+    }
+    return 'default';
+}
+/**
+ * CSS template literal helper for theme-aware styles
+ * Generates CSS with both data-theme selectors and system fallback
+ *
+ * @param lightThemeVars - CSS custom properties for light theme
+ * @param darkThemeVars - CSS custom properties for dark theme
+ * @returns CSS template literal
+ *
+ * @example
+ * ```typescript
+ * import { css } from 'lit';
+ * import { createThemeStyles } from '../shared/theme-mixin.js';
+ *
+ * const styles = css`
+ *   ${createThemeStyles(
+ *     css`--color: black; --bg: white;`,
+ *     css`--color: white; --bg: black;`
+ *   )}
+ *
+ *   .content {
+ *     color: var(--color);
+ *     background: var(--bg);
+ *   }
+ * `;
+ * ```
+ */
+export function createThemeStyles(lightThemeVars, darkThemeVars) {
+    return `
+    /* Light theme (default) */
+    :host {
+      ${lightThemeVars}
+    }
+    
+    /* Dark theme using data-theme attribute */
+    :host([data-theme="dark"]) {
+      ${darkThemeVars}
+    }
+    
+    /* System theme fallback for dark preference */
+    @media (prefers-color-scheme: dark) {
+      :host(:not([data-theme])) {
+        ${darkThemeVars}
+      }
+    }
+  `;
+}
+//# sourceMappingURL=theme-mixin.js.map

package/packages/common/dist/shared/theme-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mixin.js","sourceRoot":"","sources":["../../src/shared/theme-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAgBH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAoC,UAAa,EAAE,EAAE;IAClF,MAAM,eAAgB,SAAQ,UAAU;QAAxC;;YA0FU,4BAAuB,GAAG,GAAG,EAAE;gBACrC,uDAAuD;gBACvD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;oBAC1F,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC;QACJ,CAAC;QA3FU,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACjC,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QAEQ,oBAAoB;;YAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC7B,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAC;YACjC,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;YACxC,MAAA,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC/E,CAAC;QAED;;;;WAIG;QACH,IAAI,YAAY;;YACd,yEAAyE;YACzE,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC,YAAY,CAAC;gBACzD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;YAErE,IAAI,SAAS,EAAE,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YAED,gCAAgC;YAChC,IAAI,MAAA,MAAM,CAAC,UAAU,uDAAG,8BAA8B,EAAE,OAAO,EAAE,CAAC;gBAChE,OAAO,MAAM,CAAC;YAChB,CAAC;YAED,OAAO,OAAO,CAAC;QACjB,CAAC;QAED;;;WAGG;QACH,IAAI,mBAAmB;;YACrB,4EAA4E;YAC5E,MAAM,YAAY,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,0CAAE,YAAY,CAAC,eAAe,CAAC;gBAC/D,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YAE3E,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,YAAY,CAAC;YACtB,CAAC;YAED,OAAO,SAAS,CAAC;QACnB,CAAC;QAEO,kBAAkB;YACxB,2CAA2C;YAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YAEH,kDAAkD;YAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;gBACnD,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,YAAY,CAAC;aAChC,CAAC,CAAC;QACL,CAAC;QAEO,yBAAyB;YAC/B,8CAA8C;YAC9C,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBACpD,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YAEH,qDAAqD;YACrD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;gBAC1D,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,eAAe,CAAC;aACnC,CAAC,CAAC;QACL,CAAC;QAEO,wBAAwB;YAC9B,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;gBACpE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC3E,CAAC;QACH,CAAC;KAQF;IAED,OAAO,eAA8C,CAAC;AACxD,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,OAAgB;;IAC1C,yEAAyE;IACzE,MAAM,SAAS,GAAG,CAAA,MAAA,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC,YAAY,CAAC;QAC5D,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAErE,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;QAClD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,gCAAgC;IAChC,IAAI,MAAA,MAAM,CAAC,UAAU,uDAAG,8BAA8B,EAAE,OAAO,EAAE,CAAC;QAChE,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,OAAgB;;IACjD,4EAA4E;IAC5E,MAAM,YAAY,GAAG,CAAA,MAAA,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,0CAAE,YAAY,CAAC,eAAe,CAAC;QAClE,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IAE3E,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,iBAAiB,CAAC,cAAmB,EAAE,aAAkB;IACvE,OAAO;;;QAGD,cAAc;;;;;QAKd,aAAa;;;;;;UAMX,aAAa;;;GAGpB,CAAC;AACJ,CAAC"}

package/packages/common/dist/shared/themes.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Theme utilities and type definitions
+ *
+ * NOTE: CSS theme files are in the @nuralyui/themes package
+ * This file only contains TypeScript utilities and types
+ */
+export declare const THEME_VARIANTS: {
+    readonly 'default-light': "Default Light";
+    readonly 'default-dark': "Default Dark";
+    readonly 'carbon-light': "Carbon Light";
+    readonly 'carbon-dark': "Carbon Dark";
+    readonly light: "Default Light";
+    readonly dark: "Default Dark";
+};
+export type ThemeVariant = keyof typeof THEME_VARIANTS;
+/**
+ * Utility function to apply theme to an element
+ * @param element - The element to apply the theme to
+ * @param theme - The theme variant to apply
+ */
+export declare function applyTheme(element: HTMLElement, theme: ThemeVariant): void;
+/**
+ * Utility function to get current theme from an element or its parents
+ * @param element - The element to check for theme
+ * @returns The current theme variant or null if not found
+ */
+export declare function getCurrentTheme(element: HTMLElement): ThemeVariant | null;
+/**
+ * Utility function to toggle between light and dark variants of the same theme
+ * @param element - The element to toggle theme on
+ */
+export declare function toggleThemeVariant(element: HTMLElement): void;
+/**
+ * Get the theme system name from a theme variant
+ * @param theme - The theme variant
+ * @returns The theme system name ('carbon' or 'default')
+ */
+export declare function getThemeSystem(theme: ThemeVariant | null): 'carbon' | 'default';
+//# sourceMappingURL=themes.d.ts.map

package/packages/common/dist/shared/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/shared/themes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,eAAO,MAAM,cAAc;;;;;;;CAQjB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC;AAEvD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAM1E;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAYzE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAuB7D;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAI/E"}

package/packages/common/dist/shared/themes.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Theme utilities and type definitions
+ *
+ * NOTE: CSS theme files are in the @nuralyui/themes package
+ * This file only contains TypeScript utilities and types
+ */
+export const THEME_VARIANTS = {
+    'default-light': 'Default Light',
+    'default-dark': 'Default Dark',
+    'carbon-light': 'Carbon Light',
+    'carbon-dark': 'Carbon Dark',
+    // Backward compatibility
+    'light': 'Default Light',
+    'dark': 'Default Dark'
+};
+/**
+ * Utility function to apply theme to an element
+ * @param element - The element to apply the theme to
+ * @param theme - The theme variant to apply
+ */
+export function applyTheme(element, theme) {
+    // Remove existing theme attributes
+    element.removeAttribute('data-theme');
+    // Apply new theme
+    element.setAttribute('data-theme', theme);
+}
+/**
+ * Utility function to get current theme from an element or its parents
+ * @param element - The element to check for theme
+ * @returns The current theme variant or null if not found
+ */
+export function getCurrentTheme(element) {
+    let currentElement = element;
+    while (currentElement) {
+        const theme = currentElement.getAttribute('data-theme');
+        if (theme && theme in THEME_VARIANTS) {
+            return theme;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
+/**
+ * Utility function to toggle between light and dark variants of the same theme
+ * @param element - The element to toggle theme on
+ */
+export function toggleThemeVariant(element) {
+    const currentTheme = getCurrentTheme(element);
+    if (!currentTheme) {
+        // Default to default-light if no theme is set
+        applyTheme(element, 'default-light');
+        return;
+    }
+    // Toggle between light and dark variants
+    const toggleMap = {
+        'default-light': 'default-dark',
+        'default-dark': 'default-light',
+        'carbon-light': 'carbon-dark',
+        'carbon-dark': 'carbon-light',
+        'light': 'dark',
+        'dark': 'light'
+    };
+    const newTheme = toggleMap[currentTheme];
+    if (newTheme) {
+        applyTheme(element, newTheme);
+    }
+}
+/**
+ * Get the theme system name from a theme variant
+ * @param theme - The theme variant
+ * @returns The theme system name ('carbon' or 'default')
+ */
+export function getThemeSystem(theme) {
+    if (!theme)
+        return 'default';
+    if (theme.startsWith('carbon'))
+        return 'carbon';
+    return 'default';
+}
+//# sourceMappingURL=themes.js.map

package/packages/common/dist/shared/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../src/shared/themes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,eAAe,EAAE,eAAe;IAChC,cAAc,EAAE,cAAc;IAC9B,cAAc,EAAE,cAAc;IAC9B,aAAa,EAAE,aAAa;IAC5B,yBAAyB;IACzB,OAAO,EAAE,eAAe;IACxB,MAAM,EAAE,cAAc;CACd,CAAC;AAIX;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,OAAoB,EAAE,KAAmB;IAClE,mCAAmC;IACnC,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEtC,kBAAkB;IAClB,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AAC5C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,OAAoB;IAClD,IAAI,cAAc,GAAuB,OAAO,CAAC;IAEjD,OAAO,cAAc,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,CAAC,YAAY,CAAiB,CAAC;QACxE,IAAI,KAAK,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;YACrC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAC;IAChD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,OAAoB;IACrD,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAE9C,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,8CAA8C;QAC9C,UAAU,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;QACrC,OAAO;IACT,CAAC;IAED,yCAAyC;IACzC,MAAM,SAAS,GAAuC;QACpD,eAAe,EAAE,cAAc;QAC/B,cAAc,EAAE,eAAe;QAC/B,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,QAAQ,EAAE,CAAC;QACb,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAChC,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7B,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,OAAO,QAAQ,CAAC;IAChD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/packages/common/dist/shared/utils.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Throttles a function call to limit execution frequency
+ * Useful for performance optimization of frequently called functions
+ *
+ * @param func - Function to throttle
+ * @param limit - Milliseconds to limit between calls
+ * @returns Throttled function that will execute at most once per limit period
+ *
+ * @example
+ * ```typescript
+ * const throttledScroll = throttle((event) => {
+ *   console.log('Scroll event:', event);
+ * }, 16); // 60fps limit
+ *
+ * window.addEventListener('scroll', throttledScroll);
+ * ```
+ */
+export declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
+/**
+ * Debounces a function call to delay execution until after a period of inactivity
+ * Useful for search inputs, resize handlers, etc.
+ *
+ * @param func - Function to debounce
+ * @param delay - Milliseconds to wait after last call
+ * @returns Debounced function that will execute after delay period of inactivity
+ *
+ * @example
+ * ```typescript
+ * const debouncedSearch = debounce((query: string) => {
+ *   console.log('Searching for:', query);
+ * }, 300); // Wait 300ms after user stops typing
+ *
+ * input.addEventListener('input', (e) => debouncedSearch(e.target.value));
+ * ```
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * RAF (RequestAnimationFrame) throttle for smooth animations
+ * Ensures function is called at most once per animation frame
+ *
+ * @param func - Function to throttle to animation frames
+ * @returns Function that will execute at most once per animation frame
+ *
+ * @example
+ * ```typescript
+ * const rafThrottledUpdate = rafThrottle(() => {
+ *   // Expensive DOM updates
+ *   updateUI();
+ * });
+ *
+ * element.addEventListener('mousemove', rafThrottledUpdate);
+ * ```
+ */
+export declare function rafThrottle<T extends (...args: any[]) => any>(func: T): (...args: Parameters<T>) => void;
+//# sourceMappingURL=utils.d.ts.map

package/packages/common/dist/shared/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/shared/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CASlC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAC3D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CASlC"}

package/packages/common/dist/shared/utils.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Throttles a function call to limit execution frequency
+ * Useful for performance optimization of frequently called functions
+ *
+ * @param func - Function to throttle
+ * @param limit - Milliseconds to limit between calls
+ * @returns Throttled function that will execute at most once per limit period
+ *
+ * @example
+ * ```typescript
+ * const throttledScroll = throttle((event) => {
+ *   console.log('Scroll event:', event);
+ * }, 16); // 60fps limit
+ *
+ * window.addEventListener('scroll', throttledScroll);
+ * ```
+ */
+export function throttle(func, limit) {
+    let inThrottle;
+    return function (...args) {
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+/**
+ * Debounces a function call to delay execution until after a period of inactivity
+ * Useful for search inputs, resize handlers, etc.
+ *
+ * @param func - Function to debounce
+ * @param delay - Milliseconds to wait after last call
+ * @returns Debounced function that will execute after delay period of inactivity
+ *
+ * @example
+ * ```typescript
+ * const debouncedSearch = debounce((query: string) => {
+ *   console.log('Searching for:', query);
+ * }, 300); // Wait 300ms after user stops typing
+ *
+ * input.addEventListener('input', (e) => debouncedSearch(e.target.value));
+ * ```
+ */
+export function debounce(func, delay) {
+    let timeoutId;
+    return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+}
+/**
+ * RAF (RequestAnimationFrame) throttle for smooth animations
+ * Ensures function is called at most once per animation frame
+ *
+ * @param func - Function to throttle to animation frames
+ * @returns Function that will execute at most once per animation frame
+ *
+ * @example
+ * ```typescript
+ * const rafThrottledUpdate = rafThrottle(() => {
+ *   // Expensive DOM updates
+ *   updateUI();
+ * });
+ *
+ * element.addEventListener('mousemove', rafThrottledUpdate);
+ * ```
+ */
+export function rafThrottle(func) {
+    let rafId;
+    return function (...args) {
+        if (rafId)
+            return;
+        rafId = requestAnimationFrame(() => {
+            func.apply(this, args);
+            rafId = undefined;
+        });
+    };
+}
+//# sourceMappingURL=utils.js.map

package/packages/common/dist/shared/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/shared/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,QAAQ,CACtB,IAAO,EACP,KAAa;IAEb,IAAI,UAAmB,CAAC;IACxB,OAAO,UAAoB,GAAG,IAAmB;QAC/C,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACvB,UAAU,GAAG,IAAI,CAAC;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,GAAG,KAAK,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,QAAQ,CACtB,IAAO,EACP,KAAa;IAEb,IAAI,SAAoD,CAAC;IACzD,OAAO,UAAoB,GAAG,IAAmB;QAC/C,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9D,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,WAAW,CACzB,IAAO;IAEP,IAAI,KAAyB,CAAC;IAC9B,OAAO,UAAoB,GAAG,IAAmB;QAC/C,IAAI,KAAK;YAAE,OAAO;QAClB,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACvB,KAAK,GAAG,SAAS,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}