@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,83 @@
+import { css } from "lit";
+export default css `
+img{
+    border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
+    border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
+    border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
+    border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
+}
+.image-container {
+    position: relative;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    animation: zoomIn 0.3s ease;
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s;
+  }
+
+  .preview-close:hover {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`;
+//# sourceMappingURL=image.style.js.map

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Image fit modes
+ */
+export declare const enum ImageFit {
+    /** Default behavior, no scaling */
+    None = "none",
+    /** The content is sized to fill the element's box */
+    Fill = "fill",
+    /** The content is sized to maintain its aspect ratio while fitting within the element's box */
+    Contain = "contain",
+    /** The content is sized to maintain its aspect ratio while filling the element's entire box */
+    Cover = "cover",
+    /** The content is sized as if none or contain were specified */
+    ScaleDown = "scale-down"
+}
+/**
+ * Image placeholder type
+ */
+export declare const enum ImagePlaceholder {
+    /** Default placeholder icon */
+    Default = "default",
+    /** Custom placeholder */
+    Custom = "custom"
+}
+/**
+ * Image configuration interface
+ */
+export interface ImageConfig {
+    /** Image source URL */
+    src: string;
+    /** Fallback image URL when loading fails */
+    fallback?: string;
+    /** Image width */
+    width?: string | number;
+    /** Image height */
+    height?: string | number;
+    /** Alternative text for the image */
+    alt?: string;
+    /** Whether the image is previewable (clickable to show fullscreen) */
+    previewable?: boolean;
+    /** Object-fit CSS property value */
+    fit?: ImageFit;
+    /** Whether to show a placeholder while loading */
+    placeholder?: boolean | string;
+    /** Custom CSS class */
+    customClass?: string;
+    /** Callback when image loads successfully */
+    onLoad?: () => void;
+    /** Callback when image fails to load */
+    onError?: (error: Error) => void;
+}
+/**
+ * Image event detail
+ */
+export interface ImageEventDetail {
+    /** Original event */
+    originalEvent?: Event;
+    /** Error message if applicable */
+    error?: string;
+    /** Image source */
+    src?: string;
+}
+//# sourceMappingURL=image.types.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=image.types.js.map

package/dist/src/components/image/index.d.ts

@@ -0,0 +1,3 @@
+export * from './image.component.js';
+export * from './image.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/image/index.js

@@ -0,0 +1,3 @@
+export * from './image.component.js';
+export * from './image.types.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,8 @@
+import { NrImageElement } from './image.component.js';
+export declare const NrImage: import("@lit-labs/react").ReactWebComponent<NrImageElement, {
+    onLoad: string;
+    onError: string;
+    onPreviewOpen: string;
+    onPreviewClose: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrImageElement } from './image.component.js';
+export const NrImage = createComponent({
+    tagName: 'nr-image',
+    elementClass: NrImageElement,
+    react: React,
+    events: {
+        onLoad: 'nr-image-load',
+        onError: 'nr-image-error',
+        onPreviewOpen: 'nr-image-preview-open',
+        onPreviewClose: 'nr-image-preview-close',
+    },
+});
+//# sourceMappingURL=react.js.map