@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,104 @@
+/**
+ * Popconfirm placement options
+ * Inherited from dropdown placement options
+ */
+export declare const enum PopconfirmPlacement {
+    Top = "top",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    Bottom = "bottom",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    Left = "left",
+    LeftStart = "left-start",
+    LeftEnd = "left-end",
+    Right = "right",
+    RightStart = "right-start",
+    RightEnd = "right-end"
+}
+/**
+ * Popconfirm trigger mode
+ */
+export declare const enum PopconfirmTrigger {
+    Click = "click",
+    Hover = "hover",
+    Focus = "focus"
+}
+/**
+ * Popconfirm button type
+ */
+export declare const enum PopconfirmButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+    Danger = "danger",
+    Default = "default"
+}
+/**
+ * Predefined icons for popconfirm
+ */
+export declare const enum PopconfirmIcon {
+    Warning = "exclamation-circle",
+    Question = "question-circle",
+    Info = "info-circle",
+    Error = "close-circle",
+    Success = "check-circle"
+}
+/**
+ * Popconfirm configuration
+ */
+export interface PopconfirmConfig {
+    title: string;
+    description?: string;
+    okText?: string;
+    cancelText?: string;
+    okType?: PopconfirmButtonType;
+    showCancel?: boolean;
+    icon?: string;
+    iconColor?: string;
+    placement?: PopconfirmPlacement;
+    trigger?: PopconfirmTrigger;
+    disabled?: boolean;
+    arrow?: boolean;
+}
+/**
+ * Configuration for programmatic popconfirm at cursor position
+ */
+export interface PopconfirmShowConfig {
+    /** Title of the confirmation box */
+    title: string;
+    /** Description of the confirmation box (optional) */
+    description?: string;
+    /** Text of the OK button */
+    okText?: string;
+    /** Text of the Cancel button */
+    cancelText?: string;
+    /** Button type of the OK button */
+    okType?: PopconfirmButtonType;
+    /** Show cancel button */
+    showCancel?: boolean;
+    /** Icon name */
+    icon?: string;
+    /** Custom icon color */
+    iconColor?: string;
+    /** Callback when confirmed */
+    onConfirm?: () => void | Promise<void>;
+    /** Callback when cancelled */
+    onCancel?: () => void;
+}
+/**
+ * Position for cursor-based popconfirm
+ */
+export interface PopconfirmPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Active popconfirm item
+ */
+export interface PopconfirmItem {
+    id: string;
+    config: PopconfirmShowConfig;
+    position: PopconfirmPosition;
+    loading?: boolean;
+}
+//# sourceMappingURL=popconfirm.types.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=popconfirm.types.js.map

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

@@ -0,0 +1,7 @@
+import { NrPopconfirmElement } from './popconfirm.component.js';
+export declare const NrPopconfirm: import("@lit-labs/react").ReactWebComponent<NrPopconfirmElement, {
+    onConfirm: string;
+    onCancel: string;
+    onOpenChange: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrPopconfirmElement } from './popconfirm.component.js';
+export const NrPopconfirm = createComponent({
+    tagName: 'nr-popconfirm',
+    elementClass: NrPopconfirmElement,
+    react: React,
+    events: {
+        onConfirm: 'nr-confirm',
+        onCancel: 'nr-cancel',
+        onOpenChange: 'nr-open-change',
+    },
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,180 @@
+import{css as i,LitElement as r,html as e}from"lit";import{property as a,query as o,customElement as l}from"lit/decorators.js";import{NuralyUIBaseMixin as t}from"@nuralyui/common/mixins";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const s=i`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    font-family: var(--nuraly-font-family-radio, var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .radio-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-radio-gap, 8px);
+  }
+
+  .radio-input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 0;
+    height: 0;
+  }
+
+  .radio-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--nuraly-border-radius-radio, 50%);
+    border: var(--nuraly-border-width-radio, 2px) solid var(--nuraly-color-radio-border, #d9d9d9);
+    background: var(--nuraly-color-radio-background, #ffffff);
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  /* Size variants */
+  :host([size="small"]) .radio-circle {
+    width: var(--nuraly-size-radio-small, 16px);
+    height: var(--nuraly-size-radio-small, 16px);
+  }
+
+  :host([size="medium"]) .radio-circle,
+  :host(:not([size])) .radio-circle {
+    width: var(--nuraly-size-radio-medium, 20px);
+    height: var(--nuraly-size-radio-medium, 20px);
+  }
+
+  :host([size="large"]) .radio-circle {
+    width: var(--nuraly-size-radio-large, 24px);
+    height: var(--nuraly-size-radio-large, 24px);
+  }
+
+  .radio-circle::after {
+    content: '';
+    display: block;
+    border-radius: var(--nuraly-border-radius-radio-dot, 50%);
+    background: var(--nuraly-color-radio-dot, #1677ff);
+    transform: scale(0);
+    transition: transform 0.2s ease;
+  }
+
+  :host([size="small"]) .radio-circle::after {
+    width: 8px;
+    height: 8px;
+  }
+
+  :host([size="medium"]) .radio-circle::after,
+  :host(:not([size])) .radio-circle::after {
+    width: 10px;
+    height: 10px;
+  }
+
+  :host([size="large"]) .radio-circle::after {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Checked state */
+  :host([checked]) .radio-circle {
+    border-color: var(--nuraly-color-radio-checked-border, #1677ff);
+  }
+
+  :host([checked]) .radio-circle::after {
+    transform: scale(1);
+  }
+
+  /* Focus state */
+  .radio-input:focus-visible + .radio-circle {
+    outline: 2px solid var(--nuraly-color-radio-border-focus, #1677ff);
+    outline-offset: 2px;
+  }
+
+  /* Hover state */
+  :host(:not([disabled]):hover) .radio-circle {
+    border-color: var(--nuraly-color-radio-border-hover, #1677ff);
+  }
+
+  /* Disabled state */
+  :host([disabled]) .radio-circle {
+    background: var(--nuraly-color-radio-disabled-background, #f5f5f5);
+    border-color: var(--nuraly-color-radio-disabled-border, #d9d9d9);
+  }
+
+  :host([disabled][checked]) .radio-circle::after {
+    background: var(--nuraly-color-radio-disabled-dot, #bfbfbf);
+  }
+
+  /* Label - using nr-label component */
+  .radio-label {
+    display: inline-block;
+    line-height: 1.5;
+  }
+
+  nr-label.radio-label {
+    --nuraly-label-color: var(--nuraly-color-radio-label, #262626);
+    --nuraly-label-font-size: var(--nuraly-font-size-radio-label, 14px);
+  }
+
+  /* Size-based label font sizes */
+  :host([size="small"]) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-small, 12px);
+  }
+
+  :host([size="medium"]) nr-label.radio-label,
+  :host(:not([size])) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-body, 14px);
+  }
+
+  :host([size="large"]) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-large, 16px);
+  }
+
+  :host([disabled]) nr-label.radio-label {
+    --nuraly-label-color: var(--nuraly-color-radio-disabled-text, #bfbfbf);
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var d;!function(i){i.Small="small",i.Medium="medium",i.Large="large"}(d||(d={}));
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var n,c=function(i,r,e,a){for(var o,l=arguments.length,t=l<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,e):a,s=i.length-1;s>=0;s--)(o=i[s])&&(t=(l<3?o(t):l>3?o(r,e,t):o(r,e))||t);return l>3&&t&&Object.defineProperty(r,e,t),t};let h=n=class extends(t(r)){constructor(){super(...arguments),this.requiredComponents=["nr-label"],this.checked=!1,this.disabled=!1,this.size=d.Medium,this.name="",this.value="",this.id="",this.tabIndex=0,this.required=!1,this._handleClick=i=>{if(this.disabled)return i.preventDefault(),void i.stopPropagation();this.checked||(this.checked=!0,this._uncheckSiblings(),this._dispatchChangeEvent())},this._handleInputChange=i=>{i.stopPropagation(),this.disabled||(this.checked=this.inputElement.checked,this.checked&&(this._uncheckSiblings(),this._dispatchChangeEvent()))},this._handleFocus=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0}))},this._handleBlur=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}_uncheckSiblings(){if(!this.name)return;this.getRootNode().querySelectorAll(`nr-radio[name="${this.name}"]`).forEach(i=>{i!==this&&i instanceof n&&(i.checked=!1)})}_dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("nr-change",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}focus(){var i;null===(i=this.inputElement)||void 0===i||i.focus()}blur(){var i;null===(i=this.inputElement)||void 0===i||i.blur()}render(){return e`
+      <div class="radio-wrapper" data-theme="${this.currentTheme}" data-size="${this.size}">
+        <input
+          type="radio"
+          class="radio-input"
+          .checked=${this.checked}
+          .disabled=${this.disabled}
+          .name=${this.name}
+          .value=${this.value}
+          .required=${this.required}
+          tabindex=${this.tabIndex}
+          @change=${this._handleInputChange}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          aria-checked=${this.checked}
+          aria-disabled=${this.disabled}
+        />
+        <span class="radio-circle"></span>
+        <nr-label class="radio-label" data-theme="${this.currentTheme}">
+          <slot></slot>
+        </nr-label>
+      </div>
+    `}};h.styles=s,c([a({type:Boolean,reflect:!0})],h.prototype,"checked",void 0),c([a({type:Boolean,reflect:!0})],h.prototype,"disabled",void 0),c([a({reflect:!0})],h.prototype,"size",void 0),c([a({type:String})],h.prototype,"name",void 0),c([a({type:String})],h.prototype,"value",void 0),c([a({type:String})],h.prototype,"id",void 0),c([a({type:Number})],h.prototype,"tabIndex",void 0),c([a({type:Boolean})],h.prototype,"required",void 0),c([o("input")],h.prototype,"inputElement",void 0),h=n=c([l("nr-radio")],h);export{h as NrRadioElement,d as RadioSize};

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

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

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

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

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

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { RadioSize } from './radio.types.js';
+declare const NrRadioElement_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;
+/**
+ * A simple radio button component that can be used standalone or within a form.
+ * For grouped radio buttons with more features, use nr-radio-group instead.
+ *
+ * @example
+ * ```html
+ * <nr-radio name="option" value="1">Option 1</nr-radio>
+ * <nr-radio name="option" value="2" checked>Option 2</nr-radio>
+ * <nr-radio name="option" value="3" disabled>Option 3</nr-radio>
+ * ```
+ *
+ * @fires nr-change - Dispatched when the radio button is selected
+ * @fires nr-focus - Dispatched when the radio button receives focus
+ * @fires nr-blur - Dispatched when the radio button loses focus
+ *
+ * @slot default - Radio button label content
+ */
+export declare class NrRadioElement extends NrRadioElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /** Whether the radio button is checked */
+    checked: boolean;
+    /** Whether the radio button is disabled */
+    disabled: boolean;
+    /** Radio button size (small, medium, large) */
+    size: RadioSize;
+    /** Form field name - used to group radio buttons */
+    name: string;
+    /** Form field value */
+    value: string;
+    /** Radio button ID */
+    id: string;
+    /** Tab index */
+    tabIndex: number;
+    /** Whether the radio button is required */
+    required: boolean;
+    private inputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleClick;
+    private _handleInputChange;
+    private _handleFocus;
+    private _handleBlur;
+    private _uncheckSiblings;
+    private _dispatchChangeEvent;
+    /**
+     * Sets focus on the radio button
+     */
+    focus(): void;
+    /**
+     * Removes focus from the radio button
+     */
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-radio': NrRadioElement;
+    }
+}
+export {};
+//# sourceMappingURL=radio.component.d.ts.map

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

@@ -0,0 +1,187 @@
+/**
+ * @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;
+};
+var NrRadioElement_1;
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './radio.style.js';
+import { RadioSize } from './radio.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * A simple radio button component that can be used standalone or within a form.
+ * For grouped radio buttons with more features, use nr-radio-group instead.
+ *
+ * @example
+ * ```html
+ * <nr-radio name="option" value="1">Option 1</nr-radio>
+ * <nr-radio name="option" value="2" checked>Option 2</nr-radio>
+ * <nr-radio name="option" value="3" disabled>Option 3</nr-radio>
+ * ```
+ *
+ * @fires nr-change - Dispatched when the radio button is selected
+ * @fires nr-focus - Dispatched when the radio button receives focus
+ * @fires nr-blur - Dispatched when the radio button loses focus
+ *
+ * @slot default - Radio button label content
+ */
+let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-label'];
+        /** Whether the radio button is checked */
+        this.checked = false;
+        /** Whether the radio button is disabled */
+        this.disabled = false;
+        /** Radio button size (small, medium, large) */
+        this.size = RadioSize.Medium;
+        /** Form field name - used to group radio buttons */
+        this.name = '';
+        /** Form field value */
+        this.value = '';
+        /** Radio button ID */
+        this.id = '';
+        /** Tab index */
+        this.tabIndex = 0;
+        /** Whether the radio button is required */
+        this.required = false;
+        this._handleClick = (e) => {
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            if (!this.checked) {
+                this.checked = true;
+                this._uncheckSiblings();
+                this._dispatchChangeEvent();
+            }
+        };
+        this._handleInputChange = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.checked = this.inputElement.checked;
+            if (this.checked) {
+                this._uncheckSiblings();
+                this._dispatchChangeEvent();
+            }
+        };
+        this._handleFocus = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent('nr-focus', { bubbles: true, composed: true }));
+        };
+        this._handleBlur = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent('nr-blur', { bubbles: true, composed: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._handleClick);
+    }
+    _uncheckSiblings() {
+        if (!this.name)
+            return;
+        // Find all radio buttons with the same name in the same root
+        const root = this.getRootNode();
+        const radios = root.querySelectorAll(`nr-radio[name="${this.name}"]`);
+        radios.forEach((radio) => {
+            if (radio !== this && radio instanceof NrRadioElement_1) {
+                radio.checked = false;
+            }
+        });
+    }
+    _dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('nr-change', {
+            detail: { value: this.value, checked: this.checked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Sets focus on the radio button
+     */
+    focus() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Removes focus from the radio button
+     */
+    blur() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        return html `
+      <div class="radio-wrapper" data-theme="${this.currentTheme}" data-size="${this.size}">
+        <input
+          type="radio"
+          class="radio-input"
+          .checked=${this.checked}
+          .disabled=${this.disabled}
+          .name=${this.name}
+          .value=${this.value}
+          .required=${this.required}
+          tabindex=${this.tabIndex}
+          @change=${this._handleInputChange}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          aria-checked=${this.checked}
+          aria-disabled=${this.disabled}
+        />
+        <span class="radio-circle"></span>
+        <nr-label class="radio-label" data-theme="${this.currentTheme}">
+          <slot></slot>
+        </nr-label>
+      </div>
+    `;
+    }
+};
+NrRadioElement.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrRadioElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrRadioElement.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], NrRadioElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioElement.prototype, "id", void 0);
+__decorate([
+    property({ type: Number })
+], NrRadioElement.prototype, "tabIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrRadioElement.prototype, "required", void 0);
+__decorate([
+    query('input')
+], NrRadioElement.prototype, "inputElement", void 0);
+NrRadioElement = NrRadioElement_1 = __decorate([
+    customElement('nr-radio')
+], NrRadioElement);
+export { NrRadioElement };
+//# sourceMappingURL=radio.component.js.map

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

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