@nuraly/lumenui 0.1.0

package/dist/src/components/alert/bundle.js

@@ -0,0 +1,231 @@
+import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property as i,state as o,customElement as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const c=r`
+  :host {
+    display: block;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-font-size-base);
+    line-height: var(--nuraly-line-height-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nuraly-alert-gap);
+    padding: var(--nuraly-alert-padding);
+    border: 1px solid transparent;
+    border-radius: var(--nuraly-alert-border-radius);
+    transition: var(--nuraly-alert-transition);
+  }
+
+  .alert--banner {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+
+  /* Alert type variants - Success */
+  .alert--success {
+    background-color: var(--nuraly-color-success-light, #f6ffed);
+    border-color: var(--nuraly-color-success, #52c41a);
+    color: var(--nuraly-color-success-dark, #389e0d);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--nuraly-color-success, #52c41a);
+  }
+
+  /* Alert type variants - Info */
+  .alert--info {
+    background-color: var(--nuraly-color-info-light, #e6f7ff);
+    border-color: var(--nuraly-color-info, #1890ff);
+    color: var(--nuraly-color-info-dark, #096dd9);
+  }
+
+  .alert--info .alert__icon {
+    color: var(--nuraly-color-info, #1890ff);
+  }
+
+  /* Alert type variants - Warning */
+  .alert--warning {
+    background-color: var(--nuraly-color-warning-light, #fffbe6);
+    border-color: var(--nuraly-color-warning, #faad14);
+    color: var(--nuraly-color-warning-dark, #d48806);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--nuraly-color-warning, #faad14);
+  }
+
+  /* Alert type variants - Error */
+  .alert--error {
+    background-color: var(--nuraly-color-error-light, #fff2f0);
+    border-color: var(--nuraly-color-error, #ff4d4f);
+    color: var(--nuraly-color-error-dark, #cf1322);
+  }
+
+  .alert--error .alert__icon {
+    color: var(--nuraly-color-error, #ff4d4f);
+  }
+
+  /* Alert with description */
+  .alert--with-description {
+    padding: var(--nuraly-alert-padding-with-description);
+  }
+
+  .alert--with-description .alert__icon {
+    font-size: 1.5rem;
+  }
+
+  .alert__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .alert__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .alert__message {
+    font-weight: var(--nuraly-font-weight-medium, 500);
+    margin: 0;
+    line-height: var(--nuraly-line-height-base);
+  }
+
+  .alert--with-description .alert__message {
+    font-size: var(--nuraly-font-size-lg, 1.125rem);
+    margin-bottom: var(--nuraly-spacing-1);
+  }
+
+  .alert__description {
+    margin: var(--nuraly-spacing-1) 0 0;
+    font-size: var(--nuraly-font-size-sm, 0.875rem);
+    line-height: var(--nuraly-line-height-relaxed, 1.6);
+    opacity: 0.85;
+  }
+
+  .alert__close {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+    opacity: 0.6;
+    transition: opacity var(--nuraly-transition-fast) ease;
+    line-height: 1;
+  }
+
+  .alert__close:hover {
+    opacity: 1;
+  }
+
+  .alert__close:focus {
+    outline: none;
+    opacity: 1;
+  }
+
+  .alert__close:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: var(--nuraly-border-radius-sm, 2px);
+  }
+
+  /* Animation for closing */
+  @keyframes alertFadeOut {
+    from {
+      opacity: 1;
+      max-height: 200px;
+    }
+    to {
+      opacity: 0;
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .alert--closing {
+    animation: alertFadeOut 0.3s ease forwards;
+    overflow: hidden;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .alert {
+      padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
+    }
+
+    .alert--with-description {
+      padding: var(--nuraly-spacing-3) var(--nuraly-spacing-4);
+    }
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,d="";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var u=function(r,e,t,a){for(var i,o=arguments.length,n=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,t):a,l=r.length-1;l>=0;l--)(i=r[l])&&(n=(o<3?i(n):o>3?i(e,t,n):i(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};let h=class extends(s(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.message="",this.type="info",this.description="",this.closable=!1,this.showIcon=!1,this.icon="",this.banner=!1,this.visible=!0,this.closing=!1}close(){this.visible&&!this.closing&&(this.closing=!0,setTimeout(()=>{this.visible=!1,this.closing=!1,this.dispatchEvent(new CustomEvent("nr-alert-close",{detail:{message:this.message,type:this.type},bubbles:!0,composed:!0}))},300))}handleCloseClick(r){r.stopPropagation(),this.close()}getDefaultIcon(){if(this.icon)return this.icon;switch(this.type){case"success":return"check-circle";case"info":return"info";case"warning":return"alert-triangle";case"error":return"x-circle";default:return""}}hasDescription(){return!!this.description}render(){if(!this.visible)return t;const r={alert:!0,[`alert--${this.type}`]:!0,"alert--with-description":this.hasDescription(),"alert--banner":this.banner,"alert--closing":this.closing};return a`
+      <div class=${l(r)} role="alert">
+        ${this.showIcon?a`
+          <div class="alert__icon">
+            <slot name="icon">
+              <nr-icon 
+                name=${this.getDefaultIcon()} 
+                size=${this.hasDescription()?"large":"small"}
+              ></nr-icon>
+            </slot>
+          </div>
+        `:t}
+        
+        <div class="alert__content">
+          ${this.message?a`
+            <div class="alert__message">${this.message}</div>
+          `:t}
+          
+          ${this.description?a`
+            <div class="alert__description">${this.description}</div>
+          `:t}
+          
+          <slot></slot>
+          
+          <slot name="action"></slot>
+        </div>
+        
+        ${this.closable?a`
+          <button
+            class="alert__close"
+            @click=${this.handleCloseClick}
+            aria-label="Close alert"
+            type="button"
+          >
+            <nr-icon name="x" size="small"></nr-icon>
+          </button>
+        `:t}
+      </div>
+    `}};h.styles=c,u([i({type:String})],h.prototype,"message",void 0),u([i({type:String,reflect:!0})],h.prototype,"type",void 0),u([i({type:String})],h.prototype,"description",void 0),u([i({type:Boolean})],h.prototype,"closable",void 0),u([i({type:Boolean,attribute:"show-icon"})],h.prototype,"showIcon",void 0),u([i({type:String})],h.prototype,"icon",void 0),u([i({type:Boolean})],h.prototype,"banner",void 0),u([o()],h.prototype,"visible",void 0),u([o()],h.prototype,"closing",void 0),h=u([n("nr-alert")],h);export{d as EMPTY_STRING,h as NrAlertElement};

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { NrAlertElement } from './alert.component.js';
+export declare const NrAlert: import("@lit-labs/react").ReactWebComponent<NrAlertElement, {
+    'nr-alert-close': string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrAlertElement } from './alert.component.js';
+export const NrAlert = createComponent({
+    tagName: 'nr-alert',
+    elementClass: NrAlertElement,
+    react: React,
+    events: {
+        'nr-alert-close': 'nr-alert-close',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/badge/badge.component.d.ts

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { BadgeStatus, BadgeSize, BadgeColor, RibbonPlacement } from './badge.types.js';
+declare const NrBadgeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * # Badge Component
+ *
+ * Small numerical value or status descriptor for UI elements.
+ * Badge normally appears in proximity to notifications or user avatars with
+ * eye-catching appeal, typically displaying unread messages count.
+ *
+ * ## Features
+ * - Count badge with overflow support
+ * - Dot badge for simple indicators
+ * - Status badge with predefined states
+ * - Ribbon badge for decorative labels
+ * - Customizable colors (preset and custom)
+ * - Offset positioning
+ * - Show zero option
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic count badge -->
+ * <nr-badge count="5">
+ *   <button>Notifications</button>
+ * </nr-badge>
+ *
+ * <!-- Dot badge -->
+ * <nr-badge dot>
+ *   <nr-icon name="notification"></nr-icon>
+ * </nr-badge>
+ *
+ * <!-- Status badge -->
+ * <nr-badge status="success" text="Success"></nr-badge>
+ *
+ * <!-- Ribbon badge -->
+ * <nr-badge ribbon="Recommended">
+ *   <div class="card">Card content</div>
+ * </nr-badge>
+ *
+ * <!-- Standalone badge -->
+ * <nr-badge count="25"></nr-badge>
+ * ```
+ *
+ * @element nr-badge
+ *
+ * @slot - Content to wrap with badge (avatar, icon, etc.)
+ *
+ * @cssproperty --nuraly-badge-text-font-size - Font size of badge text
+ * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text
+ * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator
+ * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge
+ * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge
+ * @cssproperty --nuraly-badge-dot-size - Size of dot badge
+ * @cssproperty --nuraly-badge-status-size - Size of status indicator
+ */
+export declare class NrBadgeElement extends NrBadgeElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Number to show in badge
+     */
+    count?: number;
+    /**
+     * Whether to display a dot instead of count
+     */
+    dot: boolean;
+    /**
+     * Max count to show (shows count+ when exceeded)
+     */
+    overflowCount: number;
+    /**
+     * Whether to show badge when count is zero
+     */
+    showZero: boolean;
+    /**
+     * Set offset of the badge dot [x, y]
+     */
+    offset?: [number, number];
+    /**
+     * Badge color (preset or custom hex/rgb)
+     */
+    color?: BadgeColor | string;
+    /**
+     * Badge size
+     */
+    size: BadgeSize;
+    /**
+     * Set Badge as a status dot
+     */
+    status?: BadgeStatus;
+    /**
+     * Status text to display
+     */
+    text?: string;
+    /**
+     * Title to show on hover
+     */
+    badgeTitle?: string;
+    /**
+     * Ribbon text (enables ribbon mode)
+     */
+    ribbon?: string;
+    /**
+     * Ribbon placement
+     */
+    ribbonPlacement: RibbonPlacement;
+    /**
+     * Get the display count text
+     */
+    private getDisplayCount;
+    /**
+     * Check if badge should be hidden
+     */
+    private shouldHideBadge;
+    /**
+     * Get custom color style
+     */
+    private getCustomColorStyle;
+    /**
+     * Get offset style
+     */
+    private getOffsetStyle;
+    /**
+     * Render status badge
+     */
+    private renderStatusBadge;
+    /**
+     * Render ribbon badge
+     */
+    private renderRibbonBadge;
+    /**
+     * Render count/dot badge
+     */
+    private renderCountBadge;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-badge': NrBadgeElement;
+    }
+}
+export {};
+//# sourceMappingURL=badge.component.d.ts.map

package/dist/src/components/badge/badge.component.js

@@ -0,0 +1,270 @@
+/**
+ * @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 { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './badge.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # Badge Component
+ *
+ * Small numerical value or status descriptor for UI elements.
+ * Badge normally appears in proximity to notifications or user avatars with
+ * eye-catching appeal, typically displaying unread messages count.
+ *
+ * ## Features
+ * - Count badge with overflow support
+ * - Dot badge for simple indicators
+ * - Status badge with predefined states
+ * - Ribbon badge for decorative labels
+ * - Customizable colors (preset and custom)
+ * - Offset positioning
+ * - Show zero option
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic count badge -->
+ * <nr-badge count="5">
+ *   <button>Notifications</button>
+ * </nr-badge>
+ *
+ * <!-- Dot badge -->
+ * <nr-badge dot>
+ *   <nr-icon name="notification"></nr-icon>
+ * </nr-badge>
+ *
+ * <!-- Status badge -->
+ * <nr-badge status="success" text="Success"></nr-badge>
+ *
+ * <!-- Ribbon badge -->
+ * <nr-badge ribbon="Recommended">
+ *   <div class="card">Card content</div>
+ * </nr-badge>
+ *
+ * <!-- Standalone badge -->
+ * <nr-badge count="25"></nr-badge>
+ * ```
+ *
+ * @element nr-badge
+ *
+ * @slot - Content to wrap with badge (avatar, icon, etc.)
+ *
+ * @cssproperty --nuraly-badge-text-font-size - Font size of badge text
+ * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text
+ * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator
+ * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge
+ * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge
+ * @cssproperty --nuraly-badge-dot-size - Size of dot badge
+ * @cssproperty --nuraly-badge-status-size - Size of status indicator
+ */
+let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to display a dot instead of count
+         */
+        this.dot = false;
+        /**
+         * Max count to show (shows count+ when exceeded)
+         */
+        this.overflowCount = 99;
+        /**
+         * Whether to show badge when count is zero
+         */
+        this.showZero = false;
+        /**
+         * Badge size
+         */
+        this.size = "default" /* BadgeSize.Default */;
+        /**
+         * Ribbon placement
+         */
+        this.ribbonPlacement = "end" /* RibbonPlacement.End */;
+    }
+    /**
+     * Get the display count text
+     */
+    getDisplayCount() {
+        if (this.count === undefined)
+            return '';
+        const count = Number(this.count);
+        if (count > this.overflowCount) {
+            return `${this.overflowCount}+`;
+        }
+        return String(count);
+    }
+    /**
+     * Check if badge should be hidden
+     */
+    shouldHideBadge() {
+        if (this.dot)
+            return false;
+        if (this.count === undefined)
+            return true;
+        if (this.count === 0 && !this.showZero)
+            return true;
+        return false;
+    }
+    /**
+     * Get custom color style
+     */
+    getCustomColorStyle() {
+        if (!this.color)
+            return {};
+        // Preset colors are handled via CSS classes
+        const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green',
+            'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
+        const isCustomColor = !presetColors.includes(this.color);
+        if (isCustomColor) {
+            return {
+                backgroundColor: this.color,
+                color: '#fff'
+            };
+        }
+        return {};
+    }
+    /**
+     * Get offset style
+     */
+    getOffsetStyle() {
+        if (!this.offset)
+            return {};
+        const [x, y] = this.offset;
+        return {
+            right: `calc(0px - ${x}px)`,
+            top: `${y}px`,
+        };
+    }
+    /**
+     * Render status badge
+     */
+    renderStatusBadge() {
+        return html `
+      <span class="badge-status">
+        <span class="badge-status-dot ${this.status}"></span>
+        ${this.text ? html `<span class="badge-status-text">${this.text}</span>` : nothing}
+      </span>
+    `;
+    }
+    /**
+     * Render ribbon badge
+     */
+    renderRibbonBadge() {
+        const ribbonClasses = {
+            'badge-ribbon': true,
+            [this.ribbonPlacement]: true,
+            [this.color || '']: !!this.color,
+        };
+        const ribbonStyle = this.getCustomColorStyle();
+        return html `
+      <div class="badge-ribbon-wrapper">
+        <slot></slot>
+        <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>
+          ${this.ribbon}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Render count/dot badge
+     */
+    renderCountBadge() {
+        const hasChildren = this.querySelector(':not([slot])') !== null;
+        const isStandalone = !hasChildren;
+        const isHidden = this.shouldHideBadge();
+        const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green',
+            'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
+        const isPresetColor = this.color && presetColors.includes(this.color);
+        const indicatorClasses = Object.assign({ 'badge-indicator': true, 'badge-standalone': isStandalone, 'badge-hidden': isHidden, 'dot': this.dot, 'small': this.size === "small" /* BadgeSize.Small */ }, (this.color && isPresetColor ? { [this.color]: true } : {}));
+        const indicatorStyle = Object.assign(Object.assign({}, this.getCustomColorStyle()), this.getOffsetStyle());
+        const badgeContent = this.dot ? nothing : this.getDisplayCount();
+        if (isStandalone) {
+            return html `
+        <span
+          class=${classMap(indicatorClasses)}
+          style=${styleMap(indicatorStyle)}
+          title=${this.badgeTitle || ''}
+        >
+          ${badgeContent}
+        </span>
+      `;
+        }
+        return html `
+      <span class="badge-wrapper">
+        <slot></slot>
+        <span
+          class=${classMap(indicatorClasses)}
+          style=${styleMap(indicatorStyle)}
+          title=${this.badgeTitle || ''}
+        >
+          ${badgeContent}
+        </span>
+      </span>
+    `;
+    }
+    render() {
+        // Ribbon mode
+        if (this.ribbon) {
+            return this.renderRibbonBadge();
+        }
+        // Status mode
+        if (this.status) {
+            return this.renderStatusBadge();
+        }
+        // Count/Dot mode
+        return this.renderCountBadge();
+    }
+};
+NrBadgeElement.styles = styles;
+__decorate([
+    property({ type: Number })
+], NrBadgeElement.prototype, "count", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrBadgeElement.prototype, "dot", void 0);
+__decorate([
+    property({ type: Number, attribute: 'overflow-count' })
+], NrBadgeElement.prototype, "overflowCount", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-zero' })
+], NrBadgeElement.prototype, "showZero", void 0);
+__decorate([
+    property({ type: Array })
+], NrBadgeElement.prototype, "offset", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "status", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "badgeTitle", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "ribbon", void 0);
+__decorate([
+    property({ type: String, attribute: 'ribbon-placement' })
+], NrBadgeElement.prototype, "ribbonPlacement", void 0);
+NrBadgeElement = __decorate([
+    customElement('nr-badge')
+], NrBadgeElement);
+export { NrBadgeElement };
+//# sourceMappingURL=badge.component.js.map