@nuraly/runtime 0.1.0 → 0.1.3

package/components/ui/components/utility/BoxShadow/BoxShadow.ts

@@ -1,12 +1,24 @@
 import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { css, html } from "lit";
 import { property, state } from "lit/decorators.js";
-import "@nuralyui/checkbox";
-import "@nuralyui/slider-input";
 import { BaseElementBlock } from '../../base/BaseElement';
 import { executeHandler } from '../../../../../state/runtime-context';
 import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
 
+// Safely import @nuralyui/checkbox
+try {
+  await import("@nuralyui/checkbox");
+} catch (error) {
+  console.warn('[@nuralyui/checkbox] Package not found or failed to load.');
+}
+// Safely import @nuralyui/slider-input
+try {
+  await import("@nuralyui/slider-input");
+} catch (error) {
+  console.warn('[@nuralyui/slider-input] Package not found or failed to load.');
+}
+
+
 function debounce(func, wait = 100) {
   let timeout;
   return function(...args) {

package/components/ui/components/utility/Document/Document.ts

@@ -1,11 +1,18 @@
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "@nuralyui/document";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { styleMap } from "lit/directives/style-map.js";
 import { ref } from "lit/directives/ref.js";
 
+// Safely import @nuralyui/document
+try {
+  await import("@nuralyui/document");
+} catch (error) {
+  console.warn('[@nuralyui/document] Package not found or failed to load.');
+}
+
+
 
 @customElement("document-block")
 export class ImageBlock extends BaseElementBlock {
@@ -44,4 +51,4 @@ export class ImageBlock extends BaseElementBlock {
       </nr-document-viewer>
     `;
   }
-}
+}

package/components/ui/components/utility/Handlers/Handlers.ts

@@ -1,12 +1,19 @@
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "@nuralyui/select";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { styleMap } from "lit/directives/style-map.js";
 import { executeHandler } from '../../../../../state/runtime-context.ts';
 import { eventDispatcher } from '../../../../../utils/change-detection.ts';
 
+// Safely import @nuralyui/select
+try {
+  await import("@nuralyui/select");
+} catch (error) {
+  console.warn('[@nuralyui/select] Package not found or failed to load.');
+}
+
+
 @customElement("handler-block")
 export class HandlerBlock extends BaseElementBlock {
   static styles = [
@@ -197,4 +204,4 @@ constructor() {
         `}
   `;
   }
-}
+}

package/components/ui/nuraly-ui/packages/common/dist/constants/index.d.ts

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

package/components/ui/nuraly-ui/packages/common/dist/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared constants for Nuraly UI components
+ *
+ * @module @nuralyui/common/constants
+ *
+ * @example
+ * ```typescript
+ * import { COMPONENT_PREFIX } from '@nuralyui/common/constants';
+ * ```
+ */
+export {};
+//# sourceMappingURL=constants.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/controllers/index.d.ts

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

package/components/ui/nuraly-ui/packages/common/dist/controllers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared controllers for Nuraly UI components
+ *
+ * @module @nuralyui/common/controllers
+ *
+ * @example
+ * ```typescript
+ * import { ThemeController, SharedDropdownController } from '@nuralyui/common/controllers';
+ *
+ * class MyComponent extends LitElement {
+ *   private themeController = new ThemeController(this);
+ * }
+ * ```
+ */
+export * from './shared/controllers/index.js';
+//# sourceMappingURL=controllers.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @nuralyui/common
+ *
+ * Common UI components package for Nuraly UI Library.
+ * Contains basic building blocks used across the component library.
+ *
+ * This package exposes shared utilities only (mixins, controllers, themes, utils).
+ * Components should be imported from their own packages (e.g., @nuralyui/button).
+ *
+ * @example
+ * ```typescript
+ * import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+ * import { ThemeController } from '@nuralyui/common/controllers';
+ * ```
+ */
+export * from './mixins.js';
+export * from './controllers.js';
+export * from './themes.js';
+export * from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/mixins/index.d.ts

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

package/components/ui/nuraly-ui/packages/common/dist/mixins.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared mixins for Nuraly UI components
+ *
+ * @module @nuralyui/common/mixins
+ *
+ * @example
+ * ```typescript
+ * import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+ *
+ * class MyComponent extends NuralyUIBaseMixin(LitElement) {
+ *   // Your component code
+ * }
+ * ```
+ */
+export { NuralyUIBaseMixin, BaseMixin, type NuralyUIBaseElement } from './shared/base-mixin.js';
+export { ThemeAwareMixin, type ThemeAware } from './shared/theme-mixin.js';
+export { DependencyValidationMixin, type DependencyAware } from './shared/dependency-mixin.js';
+export { EventHandlerMixin, type EventHandlerCapable } from './shared/event-handler-mixin.js';
+export * from './shared/validation.types.js';
+export * from './shared/validation.types.js';
+//# sourceMappingURL=mixins.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/base-mixin.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ThemeAware } from './theme-mixin.js';
+import { DependencyAware } from './dependency-mixin.js';
+import { EventHandlerCapable } from './event-handler-mixin.js';
+/**
+ * Base interface combining theme awareness, dependency validation, and event handling
+ */
+export interface NuralyUIBaseElement extends ThemeAware, DependencyAware, EventHandlerCapable {
+}
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Global base mixin that combines ThemeAwareMixin and DependencyValidationMixin
+ * This mixin provides a single entry point for all common functionality needed
+ * by Nuraly UI components, reducing boilerplate code in individual components.
+ *
+ * @param superClass - The base class to extend (typically LitElement)
+ * @returns Enhanced class with both theme management and dependency validation capabilities
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-component')
+ * export class MyComponent extends NuralyUIBaseMixin(LitElement) {
+ *   requiredComponents = ['nr-icon'];
+ *
+ *   render() {
+ *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
+ *   }
+ * }
+ * ```
+ */
+export declare const NuralyUIBaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & T;
+/**
+ * Alternative shorter name for convenience
+ */
+export declare const BaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & T;
+export {};
+//# sourceMappingURL=base-mixin.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/constants.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=constants.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/dropdown.controller.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { DropdownController, DropdownHost, DropdownPosition, DropdownSpace } from './dropdown.interface.js';
+/**
+ * Shared dropdown controller for components that need dropdown functionality
+ * Based on the select component's dropdown controller but generalized for reuse
+ */
+export declare class SharedDropdownController implements ReactiveController, DropdownController {
+    private _host;
+    private _isOpen;
+    private _position;
+    private _dropdownElement;
+    private _triggerElement;
+    constructor(host: ReactiveControllerHost & DropdownHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen(): boolean;
+    /**
+     * Get current dropdown position
+     */
+    get position(): DropdownPosition;
+    /**
+     * Open the dropdown
+     */
+    open(): void;
+    /**
+     * Close the dropdown
+     */
+    close(): void;
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle(): void;
+    /**
+     * Calculate optimal dropdown placement
+     */
+    calculatePosition(): void;
+    /**
+     * Reset dropdown position
+     */
+    resetPosition(): void;
+    /**
+     * Set dropdown and trigger element references
+     */
+    setElements(dropdownElement: HTMLElement, triggerElement: HTMLElement): void;
+    /**
+     * Find dropdown and trigger elements
+     */
+    private findElements;
+    /**
+     * Determine optimal dropdown placement
+     */
+    private determineOptimalPlacement;
+    /**
+     * Apply calculated position to dropdown element
+     */
+    private applyPosition;
+    /**
+     * Calculate available space around trigger
+     */
+    getAvailableSpace(): DropdownSpace;
+    /**
+     * Handle window resize to recalculate position
+     */
+    private handleResize;
+    /**
+     * Handle scroll to manage dropdown visibility
+     */
+    private handleScroll;
+    /**
+     * Handle errors with fallback
+     */
+    private handleError;
+}
+//# sourceMappingURL=dropdown.controller.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/dropdown.interface.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+/// <reference types="node" />
+/**
+ * Shared dropdown controller interface
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    placement: 'bottom' | 'top';
+}
+export interface DropdownSpace {
+    above: number;
+    below: number;
+    left: number;
+    right: number;
+}
+/**
+ * Host interface for components using dropdown functionality
+ */
+export interface DropdownHost {
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+}
+/**
+ * Dropdown controller interface
+ */
+export interface DropdownController {
+    readonly isOpen: boolean;
+    readonly position: DropdownPosition;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    calculatePosition(): void;
+    resetPosition(): void;
+    setElements(dropdownElement: HTMLElement, triggerElement: HTMLElement): void;
+    getAvailableSpace(): DropdownSpace;
+}
+//# sourceMappingURL=dropdown.interface.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './dropdown.interface.js';
+export * from './dropdown.controller.js';
+export * from './theme.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/theme.controller.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/// <reference types="react" />
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { ThemeVariant } from '../themes.js';
+/**
+ * Theme controller that observes and reacts to theme changes on the host element or its parents
+ * This controller watches for data-theme attribute changes and triggers re-renders
+ */
+export declare class ThemeController implements ReactiveController {
+    private host;
+    private observer?;
+    private _currentTheme;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    /**
+     * Get the current theme variant
+     */
+    get currentTheme(): ThemeVariant | null;
+    /**
+     * Check if the current theme is a dark variant
+     */
+    get isDark(): boolean;
+    /**
+     * Check if the current theme is a light variant
+     */
+    get isLight(): boolean;
+    /**
+     * Get the theme system (default, carbon)
+     */
+    get themeSystem(): string;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private updateTheme;
+    private setupObserver;
+    private cleanup;
+    /**
+     * Apply a theme to the closest themed ancestor or the host element
+     * @param theme - The theme variant to apply
+     */
+    applyTheme(theme: ThemeVariant): void;
+    /**
+     * Toggle between light and dark variants of the current theme
+     */
+    toggleVariant(): void;
+}
+//# sourceMappingURL=theme.controller.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/dependency-mixin.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+/**
+ * Interface for components that need dependency validation
+ */
+export interface DependencyAware {
+    requiredComponents: string[];
+    validateDependencies(): void;
+    isComponentAvailable(componentName: string): boolean;
+}
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Mixin that adds dependency validation functionality to LitElement components
+ *
+ * @param superClass - The base class to extend (typically LitElement)
+ * @returns Enhanced class with dependency validation capabilities
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-component')
+ * export class MyComponent extends DependencyValidationMixin(LitElement) {
+ *   requiredComponents = ['nr-icon', 'hy-tooltip'];
+ *
+ *   override connectedCallback() {
+ *     super.connectedCallback();
+ *     this.validateDependencies();
+ *   }
+ * }
+ * ```
+ */
+export declare const DependencyValidationMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DependencyAware> & T;
+export {};
+//# sourceMappingURL=dependency-mixin.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/event-handler-mixin.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/// <reference types="react" />
+import { LitElement } from 'lit';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support event handling operations
+ */
+export interface EventHandlerCapable {
+    /**
+     * Dispatch a custom event with consistent structure
+     * @param eventName - The name of the event
+     * @param detail - The event detail object
+     */
+    dispatchCustomEvent(eventName: string, detail: any): void;
+    /**
+     * Dispatch events with metadata
+     */
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+    /**
+     * Dispatch input-related events
+     */
+    dispatchInputEvent(eventName: string, detail: any): void;
+    /**
+     * Dispatch focus-related events
+     */
+    dispatchFocusEvent(eventName: string, detail: any): void;
+    /**
+     * Dispatch validation events
+     */
+    dispatchValidationEvent(eventName: string, detail: any): void;
+    /**
+     * Dispatch action events
+     */
+    dispatchActionEvent(eventName: string, detail: any): void;
+    /**
+     * Check if a key is allowed when component is readonly
+     */
+    isReadonlyKeyAllowed(keyDownEvent: KeyboardEvent): boolean;
+    /**
+     * Check if key is an activation key (Enter/Space)
+     */
+    isActivationKey(keyDownEvent: KeyboardEvent): boolean;
+}
+/**
+ * Mixin that provides standardized event handling capabilities
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with event handling capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyComponent extends EventHandlerMixin(LitElement) {
+ *   handleClick() {
+ *     this.dispatchCustomEvent('my-click', { value: 'test' });
+ *   }
+ * }
+ * ```
+ */
+export declare const EventHandlerMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<EventHandlerCapable> & T;
+export {};
+//# sourceMappingURL=event-handler-mixin.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NuralyUIBaseMixin, BaseMixin, type NuralyUIBaseElement } from './base-mixin.js';
+export { ThemeAwareMixin, type ThemeAware } from './theme-mixin.js';
+export { DependencyValidationMixin, type DependencyAware } from './dependency-mixin.js';
+export { EventHandlerMixin, type EventHandlerCapable } from './event-handler-mixin.js';
+export { throttle, debounce, rafThrottle } from './utils.js';
+export * from './controllers/index.js';
+export * from './validation.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/// <reference types="react" />
+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';
+}
+declare 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/components/ui/nuraly-ui/packages/common/dist/shared/themes.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/// <reference types="react" />
+/**
+ * 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 declare 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/components/ui/nuraly-ui/packages/common/dist/themes/index.d.ts

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