@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,241 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { PanelMode } from '../panel/panel.types.js';
+/**
+ * Tab orientation options
+ */
+export declare const enum TabOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/**
+ * Tab alignment options
+ */
+export declare const enum TabsAlign {
+    Right = "right",
+    Left = "left",
+    Center = "center",
+    Stretch = "stretch"
+}
+/**
+ * Tab size options
+ */
+export declare const enum TabSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+/**
+ * Tab type/variant options
+ */
+export declare const enum TabType {
+    Default = "default",
+    Card = "card",
+    Line = "line",
+    Bordered = "bordered"
+}
+/**
+ * Tab events enumeration
+ */
+export declare const enum TabEvent {
+    TabClick = "nr-tab-click",
+    TabAdd = "nr-tab-add",
+    TabRemove = "nr-tab-remove",
+    TabEdit = "nr-tab-edit",
+    TabOrderChange = "nr-tab-order-change",
+    TabChange = "nr-tab-change",
+    TabPopOut = "nr-tab-pop-out",
+    TabPopIn = "nr-tab-pop-in"
+}
+/**
+ * Pop-out state enumeration
+ */
+export declare const enum TabPopOutState {
+    Normal = "normal",
+    PoppedOut = "popped-out",
+    Placeholder = "placeholder"
+}
+/**
+ * Pop-out configuration interface
+ */
+export interface TabPopOutConfig {
+    /** Whether pop-out functionality is enabled */
+    enabled: boolean;
+    /** Whether tabs can be popped out */
+    canPopOut?: boolean;
+    /** Whether popped-out tabs can be popped back in */
+    canPopIn?: boolean;
+    /** Panel configuration for popped-out tabs */
+    windowPanel?: {
+        /** Panel title template (can use {tabLabel} placeholder) */
+        title?: string;
+        /** Panel icon */
+        icon?: string;
+        /** Default panel width */
+        width?: string;
+        /** Default panel height */
+        height?: string;
+        /** Whether panel is resizable */
+        resizable?: boolean;
+        /** Whether panel is draggable */
+        draggable?: boolean;
+        /** Whether panel can be closed (will pop tab back in) */
+        closable?: boolean;
+        /** Whether panel can be minimized */
+        minimizable?: boolean;
+    };
+}
+/**
+ * Popped-out tab tracking interface
+ */
+export interface PoppedOutTab {
+    /** Tab data */
+    tab: TabItem;
+    /** Original index in tabs array */
+    originalIndex: number;
+    /** Current pop-out state */
+    state: TabPopOutState;
+    /** Panel element reference */
+    panelElement?: HTMLElement;
+    /** Unique identifier for this pop-out instance */
+    popOutId: string;
+}
+/**
+ * Individual tab configuration interface
+ */
+export interface TabItem {
+    /** Unique identifier for the tab */
+    id?: string | number;
+    /** Tab label/title */
+    label: string;
+    /** Tab content (HTML template or string) */
+    content?: any;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Whether the tab can be closed */
+    closable?: boolean;
+    /** Icon for the tab */
+    icon?: string;
+    /** Custom CSS classes for the tab */
+    className?: string;
+    /** Tab-specific editable options */
+    editable?: Partial<TabEditable>;
+    /** Tab-specific pop-out options */
+    popOut?: Partial<TabPopOutConfig>;
+    /** Custom data attributes */
+    data?: Record<string, any>;
+    /** Current pop-out state */
+    popOutState?: TabPopOutState;
+}
+/**
+ * Tab editable configuration interface
+ */
+export interface TabEditable {
+    /** Whether tabs can be deleted/removed */
+    canDeleteTab: boolean;
+    /** Whether tab titles can be edited inline */
+    canEditTabTitle: boolean;
+    /** Whether new tabs can be added */
+    canAddTab: boolean;
+    /** Whether tabs can be reordered via drag & drop */
+    canMove: boolean;
+}
+/**
+ * Tab panel configuration interface for making tabs pannable
+ */
+export interface TabsPanelConfig {
+    /** Whether panel wrapper is enabled */
+    enabled: boolean;
+    /** Panel mode */
+    mode?: PanelMode;
+    /** Panel size (inherits from tabs if not specified) */
+    size?: string;
+    /** Whether the panel is resizable */
+    resizable?: boolean;
+    /** Whether the panel is draggable */
+    draggable?: boolean;
+    /** Whether the panel can be closed */
+    closable?: boolean;
+    /** Whether the panel can be minimized */
+    minimizable?: boolean;
+    /** Panel title */
+    title?: string;
+    /** Panel icon */
+    icon?: string;
+    /** Custom panel width */
+    width?: string;
+    /** Custom panel height */
+    height?: string;
+}
+/**
+ * Tab event detail interfaces
+ */
+export interface TabClickEventDetail {
+    index: number;
+    tab: TabItem;
+    previousIndex?: number;
+}
+export interface TabAddEventDetail {
+    tab?: Partial<TabItem>;
+    index?: number;
+}
+export interface TabRemoveEventDetail {
+    index: number;
+    tab: TabItem;
+}
+export interface TabEditEventDetail {
+    index: number;
+    tab: TabItem;
+    oldLabel: string;
+    newLabel: string;
+}
+export interface TabOrderChangeEventDetail {
+    sourceIndex: number;
+    targetIndex: number;
+    sourceTab: TabItem;
+    targetTab: TabItem;
+}
+export interface TabPopOutEventDetail {
+    index: number;
+    tab: TabItem;
+    popOutId: string;
+}
+export interface TabPopInEventDetail {
+    tab: TabItem;
+    originalIndex: number;
+    popOutId: string;
+}
+/**
+ * Tab configuration options
+ */
+export interface TabsConfig {
+    /** Tab orientation */
+    orientation?: TabOrientation;
+    /** Tab alignment */
+    align?: TabsAlign;
+    /** Tab size */
+    size?: TabSize;
+    /** Tab type/variant */
+    type?: TabType;
+    /** Whether tabs are editable */
+    editable?: TabEditable;
+    /** Pop-out configuration */
+    popOut?: TabPopOutConfig;
+    /** Whether tabs are animated */
+    animated?: boolean;
+    /** Whether to hide tab content when tab is not active */
+    destroyInactiveTabPane?: boolean;
+    /** Custom tab bar extra content */
+    tabBarExtraContent?: any;
+}
+/**
+ * Constants
+ */
+export declare const EMPTY_STRING = "";
+export declare const NOTHING_STRING = "";
+export declare const DEFAULT_ACTIVE_TAB = 0;
+export declare const LABEL_ATTRIBUTES = "label";
+//# sourceMappingURL=tabs.types.d.ts.map

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Constants
+ */
+export const EMPTY_STRING = '';
+export const NOTHING_STRING = '';
+export const DEFAULT_ACTIVE_TAB = 0;
+export const LABEL_ATTRIBUTES = 'label';
+//# sourceMappingURL=tabs.types.js.map

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

@@ -0,0 +1,108 @@
+import{css as o,LitElement as r,html as a,nothing as t}from"lit";import{property as e,state as l,customElement as c}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */const d=o`
+  :host { display: inline-block; }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-tag-gap, 6px);
+    height: var(--nuraly-tag-height, auto);
+    padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
+    line-height: 1;
+    color: var(--nuraly-tag-color, var(--nuraly-color-text));
+    background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
+    border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
+    border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
+    transition: all var(--nuraly-transition-fast) ease;
+    user-select: none;
+  }
+
+  .tag--borderless { border-color: transparent; }
+
+  .tag--small {
+    padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
+    font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
+  }
+
+  /* Checkable behavior */
+  .tag--checkable { cursor: pointer; }
+  .tag--checkable:not(.tag--disabled):hover {
+    background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
+  }
+  .tag--checkable.tag--checked {
+    background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
+    color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
+    border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
+  }
+
+  .tag--disabled { opacity: 0.6; cursor: not-allowed; }
+
+  .tag__icon { display: inline-flex; align-items: center; }
+  .tag__content { display: inline-flex; align-items: center; }
+
+  .tag__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    line-height: 1;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    border-radius: var(--nuraly-border-radius-xs);
+    transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
+  }
+  .tag__close:hover { background-color: var(--nuraly-color-background-hover); }
+  .tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
+
+  /* Closing animation (height/opacity collapse) */
+  @keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
+  .tag--closing { animation: tagFadeOut 0.2s ease forwards; }
+
+  /* Preset solid color tags similar to AntD */
+  .tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
+  .tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
+  .tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
+  .tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }
+  .tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }
+  .tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }
+  .tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }
+  .tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }
+  .tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }
+  .tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
+  .tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
+
+  /* Custom color tag hue via inline CSS variable */
+  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
+`
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */;var g=function(o,r,a,t){for(var e,l=arguments.length,c=l<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,a):t,i=o.length-1;i>=0;i--)(e=o[i])&&(c=(l<3?e(c):l>3?e(r,a,c):e(r,a))||c);return l>3&&c&&Object.defineProperty(r,a,c),c};let u=class extends(n(r)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}connectedCallback(){super.connectedCallback(),this.lightDomObserver=new MutationObserver(()=>{this.requestUpdate()}),this.lightDomObserver.observe(this,{childList:!0,subtree:!1,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var o;null===(o=this.lightDomObserver)||void 0===o||o.disconnect(),this.lightDomObserver=void 0,super.disconnectedCallback()}onCloseClick(o){o.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout(()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1},200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(o){return!!o&&b.has(o)}render(){const o=!!this.querySelector('[slot="icon"]'),r=!!this.color&&!this.isPreset(this.color),e=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":r}),l={};r&&this.color&&(l["--nr-tag-custom-bg"]=this.color);const c=this.checkable?"switch":"button",n=this.checkable?this.checked?"true":"false":void 0;return a`
+      <span
+        class=${i(e)}
+        style=${Object.entries(l).map(([o,r])=>`${o}: ${r}`).join(";")}
+        role=${c}
+        aria-pressed=${s(n)}
+        aria-disabled=${this.disabled?"true":"false"}
+        @click=${this.checkable?this.onToggleChecked:void 0}
+      >
+        ${o?a`<span class="tag__icon"><slot name="icon"></slot></span>`:t}
+        <span class="tag__content"><slot></slot></span>
+        ${this.closable?a`
+          <button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
+            ×
+          </button>
+        `:t}
+      </span>
+    `}};u.styles=d,g([e({type:String})],u.prototype,"color",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"bordered",void 0),g([e({type:String})],u.prototype,"size",void 0),g([e({type:Boolean})],u.prototype,"closable",void 0),g([e({type:Boolean})],u.prototype,"checkable",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"checked",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),g([l()],u.prototype,"closing",void 0),u=g([c("nr-tag")],u);const b=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{u as NrTagElement};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { NrTagElement } from './tag.component.js';
+export declare const NrTag: import("@lit-labs/react").ReactWebComponent<NrTagElement, {
+    'nr-tag-close': string;
+    'nr-tag-checked-change': string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTagElement } from './tag.component.js';
+export const NrTag = createComponent({
+    tagName: 'nr-tag',
+    elementClass: NrTagElement,
+    react: React,
+    events: {
+        'nr-tag-close': 'nr-tag-close',
+        'nr-tag-checked-change': 'nr-tag-checked-change',
+    },
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { TagSize } from './tag.types.js';
+declare const NrTagElement_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;
+/**
+ * Tag component
+ * Features:
+ * - Preset colors and custom color support
+ * - Closable tags with onClose event
+ * - Checkable tags with checked state and change event
+ * - Small size variant
+ * - Disabled state
+ * - Theme-aware through CSS variables
+ *
+ * @slot - Tag content
+ * @slot icon - Optional leading icon
+ * @fires nr-tag-close - when the close icon is clicked
+ * @fires nr-tag-checked-change - when a checkable tag toggles
+ */
+export declare class NrTagElement extends NrTagElement_base {
+    static styles: import("lit").CSSResult;
+    /** Tag color preset or custom color string (hex/rgb) */
+    color?: string;
+    /** Bordered style */
+    bordered: boolean;
+    /** Small size */
+    size: TagSize;
+    /** Closable */
+    closable: boolean;
+    /** Checkable */
+    checkable: boolean;
+    /** Checked (for checkable) */
+    checked: boolean;
+    /** Disabled */
+    disabled: boolean;
+    /** Internal closing anim state */
+    private closing;
+    /** Track if an icon is actually provided via slot */
+    private lightDomObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onCloseClick;
+    private onToggleChecked;
+    private isPreset;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-tag': NrTagElement;
+    }
+}
+export {};
+//# sourceMappingURL=tag.component.d.ts.map

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

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * 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 { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styles } from './tag.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * Tag component
+ * Features:
+ * - Preset colors and custom color support
+ * - Closable tags with onClose event
+ * - Checkable tags with checked state and change event
+ * - Small size variant
+ * - Disabled state
+ * - Theme-aware through CSS variables
+ *
+ * @slot - Tag content
+ * @slot icon - Optional leading icon
+ * @fires nr-tag-close - when the close icon is clicked
+ * @fires nr-tag-checked-change - when a checkable tag toggles
+ */
+let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Bordered style */
+        this.bordered = true;
+        /** Small size */
+        this.size = "default" /* TagSize.Default */;
+        /** Closable */
+        this.closable = false;
+        /** Checkable */
+        this.checkable = false;
+        /** Checked (for checkable) */
+        this.checked = false;
+        /** Disabled */
+        this.disabled = false;
+        /** Internal closing anim state */
+        this.closing = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Observe light DOM children to detect when an icon slot is added/removed dynamically
+        this.lightDomObserver = new MutationObserver(() => {
+            // Trigger re-render so we can recompute hasIcon in render()
+            this.requestUpdate();
+        });
+        this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.lightDomObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.lightDomObserver = undefined;
+        super.disconnectedCallback();
+    }
+    onCloseClick(e) {
+        e.stopPropagation();
+        if (!this.closable || this.disabled)
+            return;
+        this.closing = true;
+        // match CSS animation duration ~200ms
+        setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));
+            // Consumers can remove the element on event; keep visible otherwise
+            this.closing = false;
+        }, 200);
+    }
+    onToggleChecked() {
+        if (!this.checkable || this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent('nr-tag-checked-change', {
+            detail: { checked: this.checked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    isPreset(color) {
+        if (!color)
+            return false;
+        return PRESET_COLOR_SET.has(color);
+    }
+    render() {
+        const hasIcon = !!this.querySelector('[slot="icon"]');
+        const isCustom = !!this.color && !this.isPreset(this.color);
+        const classes = Object.assign(Object.assign({ tag: true, 'tag--small': this.size === "small" /* TagSize.Small */, 'tag--borderless': !this.bordered, 'tag--closable': this.closable, 'tag--checkable': this.checkable, 'tag--checked': this.checkable && this.checked, 'tag--disabled': this.disabled, 'tag--closing': this.closing }, (this.color && this.isPreset(this.color) ? { [`tag--${this.color}`]: true } : {})), { 
+            // custom color modifier
+            'tag--custom': isCustom });
+        const styleMap = {};
+        if (isCustom && this.color) {
+            styleMap['--nr-tag-custom-bg'] = this.color;
+        }
+        const role = this.checkable ? 'switch' : 'button';
+        const ariaPressed = this.checkable ? (this.checked ? 'true' : 'false') : undefined;
+        return html `
+      <span
+        class=${classMap(classes)}
+        style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}
+        role=${role}
+        aria-pressed=${ifDefined(ariaPressed)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        @click=${this.checkable ? this.onToggleChecked : undefined}
+      >
+        ${hasIcon ? html `<span class="tag__icon"><slot name="icon"></slot></span>` : nothing}
+        <span class="tag__content"><slot></slot></span>
+        ${this.closable ? html `
+          <button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
+            ×
+          </button>
+        ` : nothing}
+      </span>
+    `;
+    }
+};
+NrTagElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrTagElement.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTagElement.prototype, "bordered", void 0);
+__decorate([
+    property({ type: String })
+], NrTagElement.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrTagElement.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrTagElement.prototype, "checkable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTagElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTagElement.prototype, "disabled", void 0);
+__decorate([
+    state()
+], NrTagElement.prototype, "closing", void 0);
+NrTagElement = __decorate([
+    customElement('nr-tag')
+], NrTagElement);
+export { NrTagElement };
+const PRESET_COLOR_SET = new Set([
+    'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'
+]);
+//# sourceMappingURL=tag.component.js.map

package/dist/src/components/tag/tag.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tag.style.d.ts.map