@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ButtonType, ButtonSize, ButtonShape, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';
+import { ButtonHost } from './interfaces/index.js';
+declare const NrButtonElement_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;
+/**
+ * Versatile button component with multiple variants, loading states, and enhanced icon support.
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage -->
+ * <nr-button type="primary">Click me</nr-button>
+ *
+ * <!-- Array-based icons (original API) -->
+ * <nr-button type="primary" .icon=${['add']}>Add Item</nr-button>
+ * <nr-button type="primary" .icon=${['home', 'arrow-right']}>Home</nr-button>
+ *
+ * <!-- Separate icon properties (new API) -->
+ * <nr-button type="primary" iconLeft="home" iconRight="arrow-right">Navigate</nr-button>
+ * <nr-button type="primary" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>
+ *
+ * <!-- Object-based icons (new API) -->
+ * <nr-button type="primary" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>
+ *
+ * <!-- Loading state -->
+ * <nr-button loading>Processing...</nr-button>
+ * ```
+ *
+ * @fires button-clicked - Button clicked
+ * @fires link-navigation - Link navigation
+ *
+ * @slot default - Button text content
+ */
+export declare class NrButtonElement extends NrButtonElement_base implements ButtonHost {
+    static styles: import("lit").CSSResult;
+    /** Disables the button */
+    disabled: boolean;
+    /** Shows loading spinner */
+    loading: boolean;
+    /** Button size (small, medium, large) */
+    size: ButtonSize | '';
+    /** Button type (default, primary, secondary, danger, ghost) */
+    type: ButtonType;
+    /** Button shape (default, circle, round) */
+    shape: ButtonShape;
+    /** Makes button full width */
+    block: boolean;
+    /** Applies dashed border */
+    dashed: boolean;
+    /** Icon configuration (supports strings or enhanced config objects) */
+    icon: ButtonIcons;
+    /** Left icon (alternative to icon array) */
+    iconLeft?: ButtonIcon;
+    /** Right icon (alternative to icon array) */
+    iconRight?: ButtonIcon;
+    /** Icon configuration object (alternative to icon array) */
+    icons?: ButtonIconsConfig;
+    /** Icon position relative to text */
+    iconPosition: IconPosition;
+    /** URL for link-type buttons */
+    href: string;
+    /** Target attribute for links */
+    target: string;
+    /** Enables ripple effect */
+    ripple: boolean;
+    /** Custom aria-label */
+    buttonAriaLabel: string;
+    /** References to descriptive elements */
+    ariaDescribedBy: string;
+    /** HTML button type */
+    htmlType: string;
+    requiredComponents: string[];
+    private rippleController;
+    private keyboardController;
+    private linkController;
+    connectedCallback(): void;
+    private getCommonAttributes;
+    private renderIcon;
+    private handleClick;
+    private handleKeydown;
+    /**
+     * Get the resolved left icon from various sources
+     */
+    private getResolvedLeftIcon;
+    /**
+     * Get the resolved right icon from various sources
+     */
+    private getResolvedRightIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=button.component.d.ts.map

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

@@ -0,0 +1,312 @@
+/**
+ * @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 { ifDefined } from 'lit/directives/if-defined.js';
+import { EMPTY_STRING } from './button.types.js';
+import { styles } from './button.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+// Import controllers
+import { ButtonRippleController, ButtonKeyboardController, ButtonLinkController } from './controllers/index.js';
+/**
+ * Versatile button component with multiple variants, loading states, and enhanced icon support.
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage -->
+ * <nr-button type="primary">Click me</nr-button>
+ *
+ * <!-- Array-based icons (original API) -->
+ * <nr-button type="primary" .icon=${['add']}>Add Item</nr-button>
+ * <nr-button type="primary" .icon=${['home', 'arrow-right']}>Home</nr-button>
+ *
+ * <!-- Separate icon properties (new API) -->
+ * <nr-button type="primary" iconLeft="home" iconRight="arrow-right">Navigate</nr-button>
+ * <nr-button type="primary" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>
+ *
+ * <!-- Object-based icons (new API) -->
+ * <nr-button type="primary" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>
+ *
+ * <!-- Loading state -->
+ * <nr-button loading>Processing...</nr-button>
+ * ```
+ *
+ * @fires button-clicked - Button clicked
+ * @fires link-navigation - Link navigation
+ *
+ * @slot default - Button text content
+ */
+let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Disables the button */
+        this.disabled = false;
+        /** Shows loading spinner */
+        this.loading = false;
+        /** Button size (small, medium, large) */
+        this.size = EMPTY_STRING;
+        /** Button type (default, primary, secondary, danger, ghost) */
+        this.type = "default" /* ButtonType.Default */;
+        /** Button shape (default, circle, round) */
+        this.shape = "default" /* ButtonShape.Default */;
+        /** Makes button full width */
+        this.block = false;
+        /** Applies dashed border */
+        this.dashed = false;
+        /** Icon configuration (supports strings or enhanced config objects) */
+        this.icon = [];
+        /** Icon position relative to text */
+        this.iconPosition = "left" /* IconPosition.Left */;
+        /** URL for link-type buttons */
+        this.href = EMPTY_STRING;
+        /** Target attribute for links */
+        this.target = EMPTY_STRING;
+        /** Enables ripple effect */
+        this.ripple = true;
+        /** Custom aria-label */
+        this.buttonAriaLabel = EMPTY_STRING;
+        /** References to descriptive elements */
+        this.ariaDescribedBy = EMPTY_STRING;
+        /** HTML button type */
+        this.htmlType = EMPTY_STRING;
+        this.requiredComponents = ['nr-icon'];
+        // Controllers
+        this.rippleController = new ButtonRippleController(this);
+        this.keyboardController = new ButtonKeyboardController(this);
+        this.linkController = new ButtonLinkController(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
+    }
+    getCommonAttributes() {
+        return {
+            'data-type': this.type,
+            'data-shape': this.shape,
+            'data-size': this.size || nothing,
+            'data-state': this.loading ? 'loading' : nothing,
+            'data-theme': this.currentTheme,
+            'data-block': this.block ? 'true' : nothing,
+            'class': this.dashed ? 'button-dashed' : '',
+            'aria-disabled': this.disabled ? 'true' : 'false',
+            'aria-label': this.buttonAriaLabel || nothing,
+            'aria-describedby': this.ariaDescribedBy || nothing,
+            'tabindex': this.disabled ? '-1' : '0'
+        };
+    }
+    renderIcon(iconConfig) {
+        if (!this.isComponentAvailable('nr-icon')) {
+            const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;
+            console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${iconName}" will not render. ` +
+                `Ensure the icon component is imported and registered.`);
+            return nothing;
+        }
+        // Get appropriate icon size based on button size
+        const getIconSizeForButtonSize = () => {
+            switch (this.size) {
+                case "small" /* ButtonSize.Small */:
+                    return 'small';
+                case "medium" /* ButtonSize.Medium */:
+                    return 'medium';
+                case "large" /* ButtonSize.Large */:
+                    return 'large';
+                default:
+                    return 'medium'; // Default to medium if no size specified
+            }
+        };
+        // Handle simple string input (backward compatibility)
+        if (typeof iconConfig === 'string') {
+            const iconSize = getIconSizeForButtonSize();
+            return html `<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;
+        }
+        // Handle enhanced icon configuration
+        const { name, type = 'solid', size, color, alt } = iconConfig;
+        // Use explicit size if provided, otherwise use size based on button size
+        const resolvedSize = size || getIconSizeForButtonSize();
+        const iconSize = resolvedSize;
+        return html `<nr-icon 
+      name=${name}
+      type=${type}
+      alt=${alt || ''}
+      size=${ifDefined(iconSize)}
+      color=${color || ''}
+    ></nr-icon>`;
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.rippleController.handleRippleClick(event);
+        if (this.linkController.isLinkType()) {
+            this.linkController.handleLinkNavigation(event);
+        }
+        this.dispatchEventWithMetadata('button-clicked', {
+            type: this.type,
+            disabled: this.disabled,
+            loading: this.loading,
+            href: this.href || null
+        });
+    }
+    handleKeydown(event) {
+        this.keyboardController.handleKeydown(event);
+    }
+    /**
+     * Get the resolved left icon from various sources
+     */
+    getResolvedLeftIcon() {
+        var _a, _b;
+        // Priority: iconLeft > icons.left > icon[0]
+        if (this.iconLeft)
+            return this.iconLeft;
+        if ((_a = this.icons) === null || _a === void 0 ? void 0 : _a.left)
+            return this.icons.left;
+        if (((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) > 0)
+            return this.icon[0];
+        return undefined;
+    }
+    /**
+     * Get the resolved right icon from various sources
+     */
+    getResolvedRightIcon() {
+        var _a, _b;
+        // Priority: iconRight > icons.right > icon[1]
+        if (this.iconRight)
+            return this.iconRight;
+        if ((_a = this.icons) === null || _a === void 0 ? void 0 : _a.right)
+            return this.icons.right;
+        if (((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) === 2)
+            return this.icon[1];
+        return undefined;
+    }
+    render() {
+        const elementTag = this.linkController.getElementTag();
+        const commonAttributes = this.getCommonAttributes();
+        const linkAttributes = this.linkController.getLinkAttributes();
+        const leftIcon = this.getResolvedLeftIcon();
+        const rightIcon = this.getResolvedRightIcon();
+        const content = html `
+      <span id="container" part="container">
+        ${leftIcon ? this.renderIcon(leftIcon) : nothing}
+        <slot id="slot"></slot>
+        ${rightIcon ? this.renderIcon(rightIcon) : nothing}
+      </span>
+    `;
+        if (elementTag === 'a') {
+            return html `
+        <a
+          href="${linkAttributes.href}"
+          target="${linkAttributes.target || nothing}"
+          rel="${linkAttributes.rel || nothing}"
+          role="${linkAttributes.role}"
+          data-type="${commonAttributes['data-type']}"
+          data-shape="${commonAttributes['data-shape']}"
+          data-size="${commonAttributes['data-size']}"
+          data-state="${commonAttributes['data-state']}"
+          data-theme="${commonAttributes['data-theme']}"
+          data-block="${commonAttributes['data-block']}"
+          class="${commonAttributes.class}"
+          aria-disabled="${this.disabled}"
+          aria-label="${this.buttonAriaLabel || nothing}"
+          aria-describedby="${this.ariaDescribedBy || nothing}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this.handleClick}"
+          @keydown="${this.handleKeydown}"
+        >
+          ${content}
+        </a>
+      `;
+        }
+        return html `
+      <button
+        ?disabled="${this.disabled}"
+        type="${(this.htmlType || 'button')}"
+        role="${linkAttributes.role}"
+        data-type="${commonAttributes['data-type']}"
+        data-shape="${commonAttributes['data-shape']}"
+        data-size="${commonAttributes['data-size']}" 
+        data-state="${commonAttributes['data-state']}"
+        data-theme="${commonAttributes['data-theme']}"
+        data-block="${commonAttributes['data-block']}"
+        class="${commonAttributes.class}"
+        aria-disabled="${this.disabled}"
+        aria-label="${this.buttonAriaLabel || nothing}"
+        aria-describedby="${this.ariaDescribedBy || nothing}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this.handleClick}"
+        @keydown="${this.handleKeydown}"
+      >
+        ${content}
+      </button>
+    `;
+    }
+};
+NrButtonElement.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrButtonElement.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "block", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "dashed", void 0);
+__decorate([
+    property({ type: Array })
+], NrButtonElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "iconLeft", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "icons", void 0);
+__decorate([
+    property({ reflect: true })
+], NrButtonElement.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "ripple", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "buttonAriaLabel", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "htmlType", void 0);
+NrButtonElement = __decorate([
+    customElement('nr-button')
+], NrButtonElement);
+export { NrButtonElement };
+//# sourceMappingURL=button.component.js.map

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

@@ -0,0 +1,10 @@
+/**
+ * Button component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-button component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const buttonStyles: import("lit").CSSResult;
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=button.style.d.ts.map