@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/icon/icon.style.js

@@ -1,24 +1,5 @@
 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;
@@ -26,12 +7,10 @@ const iconStyle = css `
     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));
+    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui;
+    color: var(--nr-text, currentColor);
   }
 
-  /* Icon container that holds the dynamically created SVG */
   .icon-container {
     display: inline-flex;
     align-items: center;
@@ -39,28 +18,19 @@ const iconStyle = css `
     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));
+    width: 18px;
+    height: 18px;
+    min-width: 12px;
+    min-height: 12px;
+    transition: 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);
+    cursor: default;
   }
 
-  /* Ensure all SVG primitives inherit stroke and have no fill */
   .svg-icon path,
   .svg-icon line,
   .svg-icon polyline,
@@ -72,52 +42,43 @@ const iconStyle = css `
     fill: none;
   }
 
-  /* ========================================
-   * CLICKABLE STATES
-   * ======================================== */
-  
-  .svg-icon.clickable {
-    cursor: var(--nuraly-cursor-interactive, pointer);
-  }
+  /* Clickable states */
+  .svg-icon.clickable { cursor: 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));
+    opacity: 0.8;
+    transform: scale(1.05);
+    stroke: #0f62fe;
+    color: #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));
+    opacity: 0.6;
+    transform: scale(0.95);
+    stroke: #054ada;
+    color: #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));
+    outline: 2px solid var(--nr-focus, #0f62fe);
+    outline-offset: 2px;
+    background: rgba(15, 98, 254, 0.1);
+    border-radius: 4px;
   }
 
-  /* ========================================
-   * DISABLED STATE
-   * ======================================== */
-  
+  /* 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);
+    opacity: 0.25;
+    stroke: var(--nr-disabled, #c6c6c6);
+    color: var(--nr-disabled, #c6c6c6);
+    cursor: 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));
+    opacity: 0.25;
+    stroke: var(--nr-disabled, #c6c6c6);
+    color: var(--nr-disabled, #c6c6c6);
     transform: none;
   }
 
@@ -127,11 +88,14 @@ const iconStyle = css `
     box-shadow: none;
   }
 
-  /* ========================================
-   * ACCESSIBILITY FEATURES
-   * ======================================== */
+  /* Size variations */
+  :host([size="small"]) .svg-icon { width: 14px; height: 14px; }
+  :host([size="medium"]) .svg-icon { width: 20px; height: 20px; }
+  :host([size="large"]) .svg-icon { width: 24px; height: 24px; }
+  :host([size="xlarge"]) .svg-icon { width: 32px; height: 32px; }
+  :host([size="xxlarge"]) .svg-icon { width: 40px; height: 40px; }
 
-  /* Screen reader only text for better accessibility */
+  /* Accessibility */
   .sr-only {
     position: absolute;
     width: 1px;
@@ -144,68 +108,16 @@ const iconStyle = css `
     border: 0;
   }
 
-  /* High contrast mode support */
   @media (prefers-contrast: high) {
-    .svg-icon {
-      stroke: CanvasText;
-      color: CanvasText;
-    }
-    
-    .svg-icon.disabled {
-      opacity: 0.5;
-    }
+    .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 { 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));
+    .svg-icon.clickable:active { transform: none; }
   }
 `;
-export const styles = [iconStyle, sizeIconStyle, styleVariables];
+export const styles = [iconStyle];
 //# sourceMappingURL=icon.style.js.map

package/dist/src/components/icon/icon.variables.js

@@ -82,23 +82,23 @@ export const styleVariables = css `
    */
   
   :host([size="small"]) {
-    --nuraly-icon-size: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback));
+    --nuraly-icon-size: 14px;
   }
-  
+
   :host([size="medium"]) {
-    --nuraly-icon-size: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback));
+    --nuraly-icon-size: 20px;
   }
-  
+
   :host([size="large"]) {
-    --nuraly-icon-size: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback));
+    --nuraly-icon-size: 24px;
   }
-  
+
   :host([size="xlarge"]) {
-    --nuraly-icon-size: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback));
+    --nuraly-icon-size: 32px;
   }
-  
+
   :host([size="xxlarge"]) {
-    --nuraly-icon-size: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback));
+    --nuraly-icon-size: 40px;
   }
 
   /* ========================================

package/dist/src/components/icon/mixins/clickable-mixin.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+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 declare const ClickableMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ClickableCapable> & T;
+export {};
+//# sourceMappingURL=clickable-mixin.d.ts.map

package/dist/src/components/icon/mixins/clickable-mixin.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+/**
+ * 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 = (superClass) => {
+    class ClickableMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /** Whether the icon is clickable/interactive */
+            this.clickable = false;
+            /** Whether the icon is disabled */
+            this.disabled = false;
+        }
+        /**
+         * Handle click events on the icon
+         */
+        handleIconClick(event) {
+            if (this.disabled || !this.clickable) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Dispatch custom click event with icon details
+            this.dispatchCustomEvent('icon-click', {
+                iconName: this.name,
+                iconType: this.type,
+                originalEvent: event,
+                timestamp: Date.now()
+            });
+        }
+        /**
+         * Handle keyboard events for accessibility
+         */
+        handleIconKeydown(event) {
+            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.isActivationKey === 'function'
+                ? this.isActivationKey(event)
+                : (event.key === 'Enter' || event.key === ' ');
+            if (isActivationKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                // Simulate click event
+                this.handleIconClick(event);
+                // Dispatch keyboard activation event with improved naming consistency
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('icon-keyboard-activation', {
+                        iconName: this.name,
+                        iconType: this.type,
+                        key: event.key,
+                        originalEvent: event,
+                        timestamp: Date.now()
+                    });
+                }
+            }
+        }
+        /**
+         * Get appropriate role for accessibility
+         */
+        getIconRole() {
+            return this.clickable ? 'button' : 'img';
+        }
+        /**
+         * Get appropriate tabindex for accessibility
+         */
+        getIconTabIndex() {
+            if (!this.clickable)
+                return '-1';
+            return this.disabled ? '-1' : '0';
+        }
+        /**
+         * Get appropriate aria-disabled attribute
+         */
+        getAriaDisabled() {
+            return this.clickable && this.disabled ? 'true' : undefined;
+        }
+    }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ClickableMixinClass.prototype, "clickable", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ClickableMixinClass.prototype, "disabled", void 0);
+    return ClickableMixinClass;
+};
+//# sourceMappingURL=clickable-mixin.js.map

package/dist/src/components/icon/mixins/index.d.ts

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

package/dist/src/components/icon/mixins/index.js

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