@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,369 @@
+import { css } from 'lit';
+/**
+ * Modal component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-modal component with
+ * clean CSS variable usage and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: contents;
+    font-family: var(--nuraly-font-family);
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    
+    /* Ensure theme variables are properly inherited */
+    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  /* Modal backdrop */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));
+    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);
+    
+    &.modal-backdrop--hidden {
+      display: none;
+    }
+    
+    &.modal-backdrop--position-top {
+      align-items: flex-start;
+      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));
+    }
+    
+    &.modal-backdrop--position-bottom {
+      align-items: flex-end;
+      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));
+    }
+  }
+
+  /* Nested modals support */
+  .modal-backdrop {
+    /* Ensure each modal backdrop has its own stacking context */
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+  }
+
+  /* Nested modal backdrop styling */
+  .modal-backdrop + .modal-backdrop {
+    /* Subsequent modals get slightly darker backdrop */
+    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));
+  }
+
+  /* Nested modal animation delay to avoid conflicts */
+  .modal-backdrop:not(:first-of-type) {
+    animation-delay: 0.1s;
+  }
+
+  /* Modal container */
+  .modal {
+    position: relative;
+    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--nuraly-shadow-modal, 
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    );
+    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));
+    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+  }
+
+
+  /* Modal sizes */
+  .modal--size-small {
+    width: var(--nuraly-modal-width-small, 400px);
+    min-height: var(--nuraly-modal-min-height-small, 200px);
+  }
+
+  .modal--size-medium {
+    width: var(--nuraly-modal-width-medium, 600px);
+    min-height: var(--nuraly-modal-min-height-medium, 300px);
+  }
+
+  .modal--size-large {
+    width: var(--nuraly-modal-width-large, 800px);
+    min-height: var(--nuraly-modal-min-height-large, 400px);
+  }
+
+  .modal--size-xl {
+    width: var(--nuraly-modal-width-xl, 1000px);
+    min-height: var(--nuraly-modal-min-height-xl, 500px);
+  }
+
+  .modal--fullscreen {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  /* Modal header */
+  .modal-header {
+    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--nuraly-modal-header-height);
+    flex-shrink: 0;
+    
+    &.modal-header--draggable {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  .modal-header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .modal-header-icon {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-header-icon-size, 20px);
+    height: var(--nuraly-modal-header-icon-size, 20px);
+    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));
+  }
+
+  .modal-title {
+    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));
+    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));
+    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));
+    margin: 0;
+    line-height: var(--nuraly-line-height-02, 1.375);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .modal-close-button {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-close-size, 32px);
+    height: var(--nuraly-modal-close-size, 32px);
+    border: none;
+    background: transparent;
+    border-radius: var(--nuraly-border-radius-sm, 4px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    
+    &:hover {
+      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));
+      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));
+    }
+    
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+    
+    &:active {
+      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));
+    }
+  }
+
+  .modal-close-icon {
+    width: var(--nuraly-modal-close-icon-size, 16px);
+    height: var(--nuraly-modal-close-icon-size, 16px);
+  }
+
+  /* Carbon theme specific - sharp corners for close button */
+  :host([data-theme="carbon"]) .modal-close-button,
+  :host([data-theme="carbon-light"]) .modal-close-button,
+  :host([data-theme="carbon-dark"]) .modal-close-button {
+    border-radius: 0;
+  }
+
+  /* Modal body */
+  .modal-body {
+    flex: 1;
+    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    overflow-y: auto;
+    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));
+    line-height: var(--nuraly-line-height-03, 1.5);
+  }
+
+  /* Modal footer */
+  .modal-footer {
+    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
+    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    min-height: var(--nuraly-modal-footer-height, 48px);
+    flex-shrink: 0;
+  }
+
+  /* Animation keyframes */
+  @keyframes modalFadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes modalZoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes modalSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes modalSlideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Animation classes */
+  .modal-backdrop--animation-fade {
+    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-fade {
+    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-zoom {
+    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-slide-up {
+    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-slide-down {
+    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  /* Dragging state */
+  .modal--dragging {
+    user-select: none;
+    cursor: move;
+  }
+
+  /* Resizing handles (when resizable) */
+  .modal--resizable {
+    resize: both;
+    overflow: auto;
+  }
+
+  .resize-handle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    cursor: se-resize;
+    background: linear-gradient(
+      -45deg,
+      transparent 40%,
+      var(--nuraly-color-border, #e0e0e0) 40%,
+      var(--nuraly-color-border, #e0e0e0) 60%,
+      transparent 60%
+    );
+  }
+
+  /* Responsive behavior */
+  @media (max-width: 768px) {
+    .modal-backdrop {
+      padding: var(--nuraly-spacing-02, 0.25rem);
+    }
+    
+    .modal--size-small,
+    .modal--size-medium,
+    .modal--size-large,
+    .modal--size-xl {
+      width: 100%;
+      max-width: none;
+    }
+    
+    .modal-header,
+    .modal-body,
+    .modal-footer {
+      padding-left: var(--nuraly-spacing-04, 0.75rem);
+      padding-right: var(--nuraly-spacing-04, 0.75rem);
+    }
+  }
+
+  /* Dark theme support through CSS custom properties */
+  @media (prefers-color-scheme: dark) {
+    :host(:not([data-theme])) {
+      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);
+    }
+  }
+`;
+//# sourceMappingURL=modal.style.js.map

package/dist/src/components/modal/modal.types.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal size options
+ */
+export declare enum ModalSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "xl"
+}
+/**
+ * Modal position options
+ */
+export declare enum ModalPosition {
+    Center = "center",
+    Top = "top",
+    Bottom = "bottom"
+}
+/**
+ * Modal animation types
+ */
+export declare enum ModalAnimation {
+    Fade = "fade",
+    Zoom = "zoom",
+    SlideUp = "slide-up",
+    SlideDown = "slide-down",
+    None = "none"
+}
+/**
+ * Modal backdrop behavior
+ */
+export declare enum ModalBackdrop {
+    Static = "static",// clicking backdrop doesn't close modal
+    Closable = "closable",// clicking backdrop closes modal
+    None = "none"
+}
+/**
+ * Modal events
+ */
+export interface ModalEvents {
+    'modal-open': CustomEvent<void>;
+    'modal-close': CustomEvent<void>;
+    'modal-before-close': CustomEvent<{
+        cancel: () => void;
+    }>;
+    'modal-after-open': CustomEvent<void>;
+    'modal-escape': CustomEvent<void>;
+}
+/**
+ * Modal configuration interface
+ */
+export interface ModalConfig {
+    size?: ModalSize;
+    position?: ModalPosition;
+    animation?: ModalAnimation;
+    backdrop?: ModalBackdrop;
+    closable?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+    fullscreen?: boolean;
+    destroyOnClose?: boolean;
+    zIndex?: number;
+}
+/**
+ * Modal header configuration
+ */
+export interface ModalHeader {
+    title?: string;
+    showCloseButton?: boolean;
+    icon?: string;
+    draggable?: boolean;
+}
+/**
+ * Modal footer configuration
+ */
+export interface ModalFooter {
+    showCancelButton?: boolean;
+    showOkButton?: boolean;
+    cancelText?: string;
+    okText?: string;
+    okType?: 'primary' | 'secondary' | 'danger';
+}
+/**
+ * Constants
+ */
+export declare const EMPTY_STRING = "";
+export declare const DEFAULT_Z_INDEX = 1000;
+/**
+ * Type guards
+ */
+export declare const isModalSize: (value: string) => value is ModalSize;
+export declare const isModalPosition: (value: string) => value is ModalPosition;
+export declare const isModalAnimation: (value: string) => value is ModalAnimation;
+export declare const isModalBackdrop: (value: string) => value is ModalBackdrop;
+/**
+ * Default configurations
+ */
+export declare const DEFAULT_MODAL_CONFIG: Required<ModalConfig>;
+export declare const DEFAULT_MODAL_HEADER: Required<ModalHeader>;
+export declare const DEFAULT_MODAL_FOOTER: Required<ModalFooter>;
+//# sourceMappingURL=modal.types.d.ts.map

package/dist/src/components/modal/modal.types.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal size options
+ */
+export var ModalSize;
+(function (ModalSize) {
+    ModalSize["Small"] = "small";
+    ModalSize["Medium"] = "medium";
+    ModalSize["Large"] = "large";
+    ModalSize["ExtraLarge"] = "xl";
+})(ModalSize || (ModalSize = {}));
+/**
+ * Modal position options
+ */
+export var ModalPosition;
+(function (ModalPosition) {
+    ModalPosition["Center"] = "center";
+    ModalPosition["Top"] = "top";
+    ModalPosition["Bottom"] = "bottom";
+})(ModalPosition || (ModalPosition = {}));
+/**
+ * Modal animation types
+ */
+export var ModalAnimation;
+(function (ModalAnimation) {
+    ModalAnimation["Fade"] = "fade";
+    ModalAnimation["Zoom"] = "zoom";
+    ModalAnimation["SlideUp"] = "slide-up";
+    ModalAnimation["SlideDown"] = "slide-down";
+    ModalAnimation["None"] = "none";
+})(ModalAnimation || (ModalAnimation = {}));
+/**
+ * Modal backdrop behavior
+ */
+export var ModalBackdrop;
+(function (ModalBackdrop) {
+    ModalBackdrop["Static"] = "static";
+    ModalBackdrop["Closable"] = "closable";
+    ModalBackdrop["None"] = "none"; // no backdrop
+})(ModalBackdrop || (ModalBackdrop = {}));
+/**
+ * Constants
+ */
+export const EMPTY_STRING = '';
+export const DEFAULT_Z_INDEX = 1000;
+/**
+ * Type guards
+ */
+export const isModalSize = (value) => {
+    return Object.values(ModalSize).includes(value);
+};
+export const isModalPosition = (value) => {
+    return Object.values(ModalPosition).includes(value);
+};
+export const isModalAnimation = (value) => {
+    return Object.values(ModalAnimation).includes(value);
+};
+export const isModalBackdrop = (value) => {
+    return Object.values(ModalBackdrop).includes(value);
+};
+/**
+ * Default configurations
+ */
+export const DEFAULT_MODAL_CONFIG = {
+    size: ModalSize.Medium,
+    position: ModalPosition.Center,
+    animation: ModalAnimation.Fade,
+    backdrop: ModalBackdrop.Closable,
+    closable: true,
+    draggable: false,
+    resizable: false,
+    fullscreen: false,
+    destroyOnClose: false,
+    zIndex: DEFAULT_Z_INDEX
+};
+export const DEFAULT_MODAL_HEADER = {
+    title: EMPTY_STRING,
+    showCloseButton: true,
+    icon: EMPTY_STRING,
+    draggable: false
+};
+export const DEFAULT_MODAL_FOOTER = {
+    showCancelButton: false,
+    showOkButton: false,
+    cancelText: 'Cancel',
+    okText: 'OK',
+    okType: 'primary'
+};
+//# sourceMappingURL=modal.types.js.map

package/dist/src/components/modal/react.d.ts

@@ -0,0 +1,9 @@
+import { NrModalElement } from './modal.component.js';
+export declare const NrModal: import("@lit-labs/react").ReactWebComponent<NrModalElement, {
+    'modal-open': string;
+    'modal-close': string;
+    'modal-before-close': string;
+    'modal-after-open': string;
+    'modal-escape': string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/modal/react.js

@@ -0,0 +1,16 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrModalElement } from './modal.component.js';
+export const NrModal = createComponent({
+    tagName: 'nr-modal',
+    elementClass: NrModalElement,
+    react: React,
+    events: {
+        'modal-open': 'onModalOpen',
+        'modal-close': 'onModalClose',
+        'modal-before-close': 'onModalBeforeClose',
+        'modal-after-open': 'onModalAfterOpen',
+        'modal-escape': 'onModalEscape',
+    },
+});
+//# sourceMappingURL=react.js.map