@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/icon/icon.style.ts

@@ -0,0 +1,214 @@
+import { css } from 'lit';
+import { styleVariables } from './icon.variables.js';
+
+/**
+ * Icon component styles for the Hybrid UI Library
+ * 
+ * This file contains all the styling for the nr-icon component, including:
+ * - Base icon styles with CSS custom properties for theming
+ * - Multiple icon states (default, hover, active, disabled, focus)
+ * - Size variations (small, medium, large, custom)
+ * - Interactive states for clickable icons
+ * - Theme compatibility (light, dark, carbon, default design systems)
+ * - Accessibility features and reduced motion support
+ * 
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of icon appearance.
+ */
+
+const iconStyle = css`
+  /* 
+   * Host element base styles
+   * Container for the icon component with flexible positioning
+   */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    vertical-align: baseline;
+    position: relative;
+    font-family: var(--nuraly-font-family-icon, 'IBM Plex Sans', ui-sans-serif, system-ui);
+    /* Ensure currentColor has a sensible default for Lucide stroke inheritance */
+    color: var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616));
+  }
+
+  /* Icon container that holds the dynamically created SVG */
+  .icon-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  /* 
+   * Base SVG icon styles - targets the SVG element created by Lucide's createElement
+   * Uses stroke-based rendering for Lucide icons
+   */
+  .svg-icon {
+    stroke: currentColor;
+    fill: none;
+    width: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));
+    height: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));
+    min-width: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));
+    min-height: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));
+    
+    /* Transition and display properties */
+    transition: var(--nuraly-icon-transition, var(--nuraly-icon-transition-fallback, opacity 0.2s ease, transform 0.2s ease, stroke 0.2s ease));
+    display: block;
+    flex-shrink: 0;
+    
+    /* Cursor handling */
+    cursor: var(--nuraly-cursor-default, default);
+  }
+
+  /* Ensure all SVG primitives inherit stroke and have no fill */
+  .svg-icon path,
+  .svg-icon line,
+  .svg-icon polyline,
+  .svg-icon polygon,
+  .svg-icon circle,
+  .svg-icon rect,
+  .svg-icon ellipse {
+    stroke: currentColor;
+    fill: none;
+  }
+
+  /* ========================================
+   * CLICKABLE STATES
+   * ======================================== */
+  
+  .svg-icon.clickable {
+    cursor: var(--nuraly-cursor-interactive, pointer);
+  }
+
+  .svg-icon.clickable:hover {
+    opacity: var(--nuraly-icon-hover-opacity, var(--nuraly-icon-hover-opacity-fallback, 0.8));
+    transform: var(--nuraly-icon-hover-transform, var(--nuraly-icon-hover-transform-fallback, scale(1.05)));
+    stroke: var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe));
+    color: var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe));
+  }
+
+  .svg-icon.clickable:active {
+    opacity: var(--nuraly-icon-active-opacity, var(--nuraly-icon-active-opacity-fallback, 0.6));
+    transform: var(--nuraly-icon-active-transform, var(--nuraly-icon-active-transform-fallback, scale(0.95)));
+    stroke: var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada));
+    color: var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada));
+  }
+
+  .svg-icon.clickable:focus {
+    outline: var(--nuraly-icon-focus-outline, var(--nuraly-icon-focus-outline-fallback, 2px solid #0f62fe));
+    outline-offset: var(--nuraly-icon-focus-outline-offset, var(--nuraly-icon-focus-outline-offset-fallback, 2px));
+    background: var(--nuraly-icon-focus-background, var(--nuraly-icon-focus-background-fallback, rgba(15, 98, 254, 0.1)));
+    border-radius: var(--nuraly-icon-focus-border-radius, var(--nuraly-icon-focus-border-radius-fallback, 4px));
+    box-shadow: var(--nuraly-icon-focus-shadow, var(--nuraly-icon-focus-shadow-fallback, none));
+  }
+
+  /* ========================================
+   * DISABLED STATE
+   * ======================================== */
+  
+  .svg-icon.disabled {
+    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));
+    stroke: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    color: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    cursor: var(--nuraly-cursor-disabled, not-allowed);
+  }
+
+  .svg-icon.clickable.disabled:hover,
+  .svg-icon.clickable.disabled:active {
+    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));
+    stroke: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    color: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    transform: none;
+  }
+
+  .svg-icon.clickable.disabled:focus {
+    outline: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* ========================================
+   * ACCESSIBILITY FEATURES
+   * ======================================== */
+
+  /* Screen reader only text for better accessibility */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .svg-icon {
+      stroke: CanvasText;
+      color: CanvasText;
+    }
+    
+    .svg-icon.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .svg-icon {
+      transition: none;
+    }
+    
+    .svg-icon.clickable:hover,
+    .svg-icon.clickable:active {
+      transform: none;
+    }
+  }
+`;
+
+/**
+ * Size variation styles for the icon component
+ * Defines size variations for different icon use cases
+ */
+const sizeIconStyle = css`
+  /* ========================================
+   * SIZE VARIATIONS
+   * ======================================== */
+
+  /* Small icon size */
+  :host([size='small']) .svg-icon {
+    width: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));
+    height: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));
+  }
+
+  /* Medium icon size (default) */
+  :host([size='medium']) .svg-icon {
+    width: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));
+    height: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));
+  }
+
+  /* Large icon size */
+  :host([size='large']) .svg-icon {
+    width: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));
+    height: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));
+  }
+
+  /* Extra large icon size */
+  :host([size='xlarge']) .svg-icon {
+    width: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));
+    height: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));
+  }
+
+  /* 2X large icon size */
+  :host([size='xxlarge']) .svg-icon {
+    width: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));
+    height: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));
+  }
+`;
+
+export const styles = [iconStyle, sizeIconStyle, styleVariables];

package/components/ui/nuraly-ui/src/components/icon/icon.types.ts

@@ -0,0 +1,4 @@
+export const enum IconTypes {
+  Solid = 'solid',
+  Regular = 'regular',
+}

package/components/ui/nuraly-ui/src/components/icon/icon.variables.ts

@@ -0,0 +1,132 @@
+import { css } from 'lit';
+
+/**
+ * Icon component CSS custom properties (design tokens)
+ * 
+ * This file contains all the CSS custom properties used by the nr-icon component,
+ * organized by functionality and including comprehensive theme support for multiple design systems.
+ * 
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of icon appearance across different themes:
+ * - Light theme (default)
+ * - Dark theme
+ * - Carbon Design System (light/dark)
+ * - Default Design System (light/dark)
+ * 
+ * Design tokens follow the pattern: --nuraly-[component]-[property]-[variant]
+ */
+export const styleVariables = css`
+  :host {
+    /* ========================================
+     * BASE ICON PROPERTIES
+     * ======================================== */
+    
+    /* Size properties with fallbacks */
+    --nuraly-icon-size-fallback: 18px;
+    --nuraly-icon-size-small-fallback: 14px;
+    --nuraly-icon-size-medium-fallback: 20px;
+    --nuraly-icon-size-large-fallback: 24px;
+    --nuraly-icon-size-xlarge-fallback: 32px;
+    --nuraly-icon-size-xxlarge-fallback: 40px;
+    --nuraly-icon-min-size-fallback: 12px;
+    
+    /* Color properties with theme-aware fallbacks */
+    --nuraly-color-icon-fallback: #161616;
+    
+    /* ========================================
+     * INTERACTIVE STATE PROPERTIES
+     * ======================================== */
+    
+    /* Transition properties */
+    --nuraly-icon-transition-fallback: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;
+    
+    /* Hover state properties */
+    --nuraly-icon-hover-opacity-fallback: 0.8;
+    --nuraly-icon-hover-transform-fallback: scale(1.05);
+    --nuraly-color-icon-hover-fallback: #0f62fe;
+    
+    /* Active state properties */
+    --nuraly-icon-active-opacity-fallback: 0.6;
+    --nuraly-icon-active-transform-fallback: scale(0.95);
+    --nuraly-color-icon-active-fallback: #054ada;
+    
+    /* Disabled state properties */
+    --nuraly-icon-disabled-opacity-fallback: 0.25;
+    --nuraly-color-icon-disabled-fallback: #c6c6c6;
+    
+    /* ========================================
+     * FOCUS STATE PROPERTIES
+     * ======================================== */
+    
+    --nuraly-icon-focus-outline-fallback: 2px solid #0f62fe;
+    --nuraly-icon-focus-outline-offset-fallback: 2px;
+    --nuraly-icon-focus-background-fallback: rgba(15, 98, 254, 0.1);
+    --nuraly-icon-focus-border-radius-fallback: 4px;
+    --nuraly-icon-focus-shadow-fallback: none;
+    
+    /* ========================================
+     * CURSOR PROPERTIES
+     * ======================================== */
+    
+    --nuraly-cursor-default: default;
+    --nuraly-cursor-interactive: pointer;
+    --nuraly-cursor-disabled: not-allowed;
+  }
+
+  /* ========================================
+   * SIZE-SPECIFIC DESIGN TOKENS
+   * ======================================== */
+  
+  /**
+   * Size-specific customizations that can be overridden in themes
+   * These provide defaults that themes can customize for different design systems
+   */
+  
+  :host([size="small"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback));
+  }
+  
+  :host([size="medium"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback));
+  }
+  
+  :host([size="large"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback));
+  }
+  
+  :host([size="xlarge"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback));
+  }
+  
+  :host([size="xxlarge"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback));
+  }
+
+  /* ========================================
+   * ACCESSIBILITY DESIGN TOKENS
+   * ======================================== */
+  
+  /**
+   * Accessibility features that respect user preferences
+   * These ensure the component works well for all users
+   */
+  
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :host {
+      --nuraly-color-icon: CanvasText;
+      --nuraly-color-icon-hover: CanvasText;
+      --nuraly-color-icon-active: CanvasText;
+      --nuraly-icon-focus-outline: 3px solid CanvasText;
+      --nuraly-icon-focus-background: Canvas;
+    }
+  }
+  
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --nuraly-icon-transition: none;
+      --nuraly-icon-hover-transform: none;
+      --nuraly-icon-active-transform: none;
+    }
+`;

package/components/ui/nuraly-ui/src/components/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon.component.js';

package/components/ui/nuraly-ui/src/components/icon/mixins/clickable-mixin.ts

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+/**
+ * Interface for components that support clickable icon functionality
+ */
+export interface ClickableCapable {
+  /**
+   * Whether the icon is clickable/interactive
+   */
+  clickable: boolean;
+  
+  /**
+   * Whether the icon is disabled
+   */
+  disabled: boolean;
+  
+  /**
+   * Handle click events on the icon
+   */
+  handleIconClick(event: MouseEvent): void;
+  
+  /**
+   * Handle keyboard events for accessibility
+   */
+  handleIconKeydown(event: KeyboardEvent): void;
+  
+  /**
+   * Get appropriate role for accessibility
+   */
+  getIconRole(): string;
+  
+  /**
+   * Get appropriate tabindex for accessibility
+   */
+  getIconTabIndex(): string;
+  
+  /**
+   * Get appropriate aria-disabled attribute
+   */
+  getAriaDisabled(): string | undefined;
+}
+
+/**
+ * Mixin that provides clickable icon functionality with proper event handling
+ * and accessibility support.
+ * 
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with clickable capabilities
+ * 
+ * @example
+ * ```typescript
+ * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component implementation
+ * }
+ * ```
+ */
+export const ClickableMixin = <T extends Constructor<LitElement>>(superClass: T) => {
+  class ClickableMixinClass extends superClass implements ClickableCapable {
+    
+    /** Whether the icon is clickable/interactive */
+    @property({type: Boolean, reflect: true})
+    clickable = false;
+    
+    /** Whether the icon is disabled */
+    @property({type: Boolean, reflect: true})
+    disabled = false;
+
+    /**
+     * Handle click events on the icon
+     */
+    handleIconClick(event: MouseEvent): void {
+      if (this.disabled || !this.clickable) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      // Dispatch custom click event with icon details
+      (this as any).dispatchCustomEvent('icon-click', {
+        iconName: (this as any).name,
+        iconType: (this as any).type,
+        originalEvent: event,
+        timestamp: Date.now()
+      });
+    }
+
+    /**
+     * Handle keyboard events for accessibility
+     */
+    handleIconKeydown(event: KeyboardEvent): void {
+      if (this.disabled || !this.clickable) {
+        return;
+      }
+
+      // Check if it's an activation key (Enter or Space)
+      // Use isActivationKey from EventHandlerMixin if available, otherwise fallback
+      const isActivationKey = typeof (this as any).isActivationKey === 'function'
+        ? (this as any).isActivationKey(event)
+        : (event.key === 'Enter' || event.key === ' ');
+
+      if (isActivationKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        
+        // Simulate click event
+        this.handleIconClick(event as any);
+        
+        // Dispatch keyboard activation event with improved naming consistency
+        if (typeof (this as any).dispatchCustomEvent === 'function') {
+          (this as any).dispatchCustomEvent('icon-keyboard-activation', {
+            iconName: (this as any).name,
+            iconType: (this as any).type,
+            key: event.key,
+            originalEvent: event,
+            timestamp: Date.now()
+          });
+        }
+      }
+    }
+
+    /**
+     * Get appropriate role for accessibility
+     */
+    getIconRole(): string {
+      return this.clickable ? 'button' : 'img';
+    }
+
+    /**
+     * Get appropriate tabindex for accessibility
+     */
+    getIconTabIndex(): string {
+      if (!this.clickable) return '-1';
+      return this.disabled ? '-1' : '0';
+    }
+
+    /**
+     * Get appropriate aria-disabled attribute
+     */
+    getAriaDisabled(): string | undefined {
+      return this.clickable && this.disabled ? 'true' : undefined;
+    }
+  }
+
+  return ClickableMixinClass as Constructor<ClickableCapable> & T;
+};

package/components/ui/nuraly-ui/src/components/icon/mixins/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './clickable-mixin.js';

package/components/ui/nuraly-ui/src/components/icon/react.ts

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyIconElement } from './icon.component.js';
+export const HyIcon = createComponent({
+  tagName: 'nr-icon',
+  elementClass: HyIconElement,
+  react: React,
+});

package/components/ui/nuraly-ui/src/components/iconpicker/README.md

@@ -0,0 +1,106 @@
+# nr-icon-picker
+
+Advanced icon picker component for Nuraly UI with search, virtual scrolling, and accessibility features.
+
+## Features
+
+- 🔍 **Search filtering** - Fast icon search with debouncing
+- ⚡ **Virtual scrolling** - Smooth performance with 1500+ icons
+- ♿ **Accessible** - Full keyboard navigation and ARIA support
+- 🎨 **Customizable** - CSS custom properties for theming
+- 📦 **Dropdown integration** - Uses `nr-dropdown` for positioning
+- 🎯 **Lucide icons** - Built-in support for 1500+ beautiful Lucide icons
+
+## Installation
+
+```bash
+npm install @nuralyui/iconpicker
+```
+
+## Basic Usage
+
+```html
+<nr-icon-picker></nr-icon-picker>
+```
+
+## With Value
+
+```html
+<nr-icon-picker value="heart"></nr-icon-picker>
+```
+
+## Configuration
+
+```html
+<nr-icon-picker
+  value="star"
+  size="large"
+  placement="top"
+  show-search
+  show-clear
+  @nr-icon-picker-change="${handleChange}">
+</nr-icon-picker>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | `''` | Selected icon name |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
+| `placement` | `string` | `'auto'` | Dropdown placement |
+| `trigger` | `'click' \| 'hover' \| 'manual'` | `'manual'` | Dropdown trigger |
+| `disabled` | `boolean` | `false` | Disable component |
+| `readonly` | `boolean` | `false` | Read-only mode |
+| `placeholder` | `string` | `'Select icon'` | Placeholder text |
+| `show-search` | `boolean` | `true` | Show search input |
+| `show-clear` | `boolean` | `true` | Show clear button |
+| `max-visible` | `number` | `500` | Max icons to render |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `nr-icon-picker-change` | `{value, icon}` | Icon selection changed |
+| `nr-icon-picker-open` | `{}` | Dropdown opened |
+| `nr-icon-picker-close` | `{}` | Dropdown closed |
+| `nr-icon-picker-search` | `{query}` | Search query changed |
+| `nr-icon-picker-clear` | `{}` | Selection cleared |
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--icon-picker-dropdown-width` | `320px` | Dropdown width |
+| `--icon-picker-icon-size` | `24px` | Icon size |
+| `--icon-picker-selected-bg` | Theme color | Selected background |
+| `--icon-picker-selected-border` | Theme color | Selected border |
+
+## Examples
+
+### Custom Styling
+
+```html
+<nr-icon-picker
+  style="
+    --icon-picker-dropdown-width: 400px;
+    --icon-picker-icon-size: 32px;
+    --icon-picker-selected-bg: #ff6b6b;
+  ">
+</nr-icon-picker>
+```
+
+### With Event Handlers
+
+```javascript
+const picker = document.querySelector('nr-icon-picker');
+
+picker.addEventListener('nr-icon-picker-change', (e) => {
+  console.log('Selected:', e.detail.value);
+  console.log('Icon data:', e.detail.icon);
+});
+```
+
+## License
+
+MIT © Nuraly, Laabidi Aymen