@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSeparatorConfig } from './breadcrumb.types.js';
+declare const NrBreadcrumbElement_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;
+/**
+ * # Breadcrumb Component
+ *
+ * Display the current location within a hierarchy and allow navigation back to higher levels.
+ * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.
+ *
+ * ## Features
+ * - Configurable separator styles (slash, arrow, chevron, etc.)
+ * - Support for icons alongside text
+ * - Dropdown menus for complex hierarchies
+ * - Clickable links with href or custom click handlers
+ * - RTL support
+ * - Fully accessible with keyboard navigation
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic breadcrumb -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   { title: 'Category', href: '/category' },
+ *   { title: 'Product' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With custom separator -->
+ * <nr-breadcrumb
+ *   separator=">"
+ *   .items="${items}">
+ * </nr-breadcrumb>
+ *
+ * <!-- With icons -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', icon: 'home', href: '/' },
+ *   { title: 'Settings', icon: 'settings', href: '/settings' },
+ *   { title: 'Profile' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With dropdown menu -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   {
+ *     title: 'Products',
+ *     menu: [
+ *       { label: 'Electronics', href: '/products/electronics' },
+ *       { label: 'Clothing', href: '/products/clothing' }
+ *     ]
+ *   },
+ *   { title: 'Current Item' }
+ * ]}"></nr-breadcrumb>
+ * ```
+ *
+ * @element nr-breadcrumb
+ * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
+ *
+ * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
+ * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
+ * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
+ * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
+ * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
+ * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ */
+export declare class NrBreadcrumbElement extends NrBreadcrumbElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /**
+     * Array of breadcrumb items to display
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator between breadcrumb items
+     * Can be a string or one of the predefined separator types
+     */
+    separator: BreadcrumbSeparator | string;
+    /**
+     * Custom separator configuration for more control
+     */
+    separatorConfig?: BreadcrumbSeparatorConfig;
+    /**
+     * Handle breadcrumb item click
+     */
+    private handleItemClick;
+    /**
+     * Handle menu item click
+     */
+    private handleMenuItemClick;
+    /**
+     * Render a breadcrumb item icon
+     */
+    private renderIcon;
+    /**
+     * Render the separator between breadcrumb items
+     */
+    private renderSeparator;
+    /**
+     * Render dropdown menu for an item
+     */
+    private renderMenu;
+    /**
+     * Render a single breadcrumb item
+     */
+    private renderItem;
+    render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-breadcrumb': NrBreadcrumbElement;
+    }
+}
+export {};
+//# sourceMappingURL=breadcrumb.component.d.ts.map

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

@@ -0,0 +1,257 @@
+/**
+ * @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 { map } from 'lit/directives/map.js';
+import { styles } from './breadcrumb.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # Breadcrumb Component
+ *
+ * Display the current location within a hierarchy and allow navigation back to higher levels.
+ * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.
+ *
+ * ## Features
+ * - Configurable separator styles (slash, arrow, chevron, etc.)
+ * - Support for icons alongside text
+ * - Dropdown menus for complex hierarchies
+ * - Clickable links with href or custom click handlers
+ * - RTL support
+ * - Fully accessible with keyboard navigation
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic breadcrumb -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   { title: 'Category', href: '/category' },
+ *   { title: 'Product' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With custom separator -->
+ * <nr-breadcrumb
+ *   separator=">"
+ *   .items="${items}">
+ * </nr-breadcrumb>
+ *
+ * <!-- With icons -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', icon: 'home', href: '/' },
+ *   { title: 'Settings', icon: 'settings', href: '/settings' },
+ *   { title: 'Profile' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With dropdown menu -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   {
+ *     title: 'Products',
+ *     menu: [
+ *       { label: 'Electronics', href: '/products/electronics' },
+ *       { label: 'Clothing', href: '/products/clothing' }
+ *     ]
+ *   },
+ *   { title: 'Current Item' }
+ * ]}"></nr-breadcrumb>
+ * ```
+ *
+ * @element nr-breadcrumb
+ * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
+ *
+ * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
+ * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
+ * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
+ * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
+ * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
+ * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ */
+let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        /**
+         * Array of breadcrumb items to display
+         */
+        this.items = [];
+        /**
+         * Separator between breadcrumb items
+         * Can be a string or one of the predefined separator types
+         */
+        this.separator = "/" /* BreadcrumbSeparator.Slash */;
+    }
+    /**
+     * Handle breadcrumb item click
+     */
+    handleItemClick(item, e) {
+        if (item.disabled) {
+            e.preventDefault();
+            return;
+        }
+        // Dispatch custom event
+        this.dispatchEvent(new CustomEvent('nr-breadcrumb-click', {
+            detail: { item, event: e },
+            bubbles: true,
+            composed: true
+        }));
+        // Call custom click handler if provided
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    }
+    /**
+     * Handle menu item click
+     */
+    handleMenuItemClick(menuItem, e) {
+        if (menuItem.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (menuItem.onClick) {
+            menuItem.onClick(e);
+        }
+    }
+    /**
+     * Render a breadcrumb item icon
+     */
+    renderIcon(item) {
+        if (!item.icon) {
+            return nothing;
+        }
+        return html `
+      <nr-icon
+        class="breadcrumb-icon"
+        name="${item.icon}"
+        type="${item.iconType || 'regular'}"
+      ></nr-icon>
+    `;
+    }
+    /**
+     * Render the separator between breadcrumb items
+     */
+    renderSeparator() {
+        if (this.separatorConfig) {
+            if (this.separatorConfig.isIcon) {
+                return html `
+          <span class="breadcrumb-separator">
+            <nr-icon
+              name="${this.separatorConfig.separator}"
+              type="${this.separatorConfig.iconType || 'regular'}"
+            ></nr-icon>
+          </span>
+        `;
+            }
+            return html `<span class="breadcrumb-separator">${this.separatorConfig.separator}</span>`;
+        }
+        return html `<span class="breadcrumb-separator">${this.separator}</span>`;
+    }
+    /**
+     * Render dropdown menu for an item
+     */
+    renderMenu(menu) {
+        return html `
+      <div class="breadcrumb-dropdown">
+        ${map(menu, (menuItem) => html `
+            ${menuItem.href
+            ? html `
+                  <a
+                    class="breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}"
+                    href="${menuItem.href}"
+                    @click="${(e) => this.handleMenuItemClick(menuItem, e)}"
+                  >
+                    ${menuItem.icon
+                ? html `<nr-icon name="${menuItem.icon}"></nr-icon>`
+                : nothing}
+                    <span>${menuItem.label}</span>
+                  </a>
+                `
+            : html `
+                  <div
+                    class="breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}"
+                    @click="${(e) => this.handleMenuItemClick(menuItem, e)}"
+                  >
+                    ${menuItem.icon
+                ? html `<nr-icon name="${menuItem.icon}"></nr-icon>`
+                : nothing}
+                    <span>${menuItem.label}</span>
+                  </div>
+                `}
+          `)}
+      </div>
+    `;
+    }
+    /**
+     * Render a single breadcrumb item
+     */
+    renderItem(item, index) {
+        const isLast = index === this.items.length - 1;
+        const hasMenu = item.menu && item.menu.length > 0;
+        const content = html `
+      ${this.renderIcon(item)}
+      <span>${item.title}</span>
+    `;
+        return html `
+      <li class="breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}">
+        ${isLast
+            ? html `<span class="breadcrumb-text">${content}</span>`
+            : item.href
+                ? html `
+                <a
+                  class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
+                  href="${item.href}"
+                  @click="${(e) => this.handleItemClick(item, e)}"
+                >
+                  ${content}
+                </a>
+              `
+                : html `
+                <span
+                  class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
+                  @click="${(e) => this.handleItemClick(item, e)}"
+                >
+                  ${content}
+                </span>
+              `}
+        ${hasMenu ? this.renderMenu(item.menu) : nothing}
+      </li>
+      ${!isLast ? this.renderSeparator() : nothing}
+    `;
+    }
+    render() {
+        if (!this.items || this.items.length === 0) {
+            return nothing;
+        }
+        return html `
+      <nav aria-label="Breadcrumb" class="breadcrumb">
+        ${map(this.items, (item, index) => this.renderItem(item, index))}
+      </nav>
+    `;
+    }
+};
+NrBreadcrumbElement.styles = styles;
+__decorate([
+    property({ type: Array })
+], NrBreadcrumbElement.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], NrBreadcrumbElement.prototype, "separator", void 0);
+__decorate([
+    property({ type: Object, attribute: 'separator-config' })
+], NrBreadcrumbElement.prototype, "separatorConfig", void 0);
+NrBreadcrumbElement = __decorate([
+    customElement('nr-breadcrumb')
+], NrBreadcrumbElement);
+export { NrBreadcrumbElement };
+//# sourceMappingURL=breadcrumb.component.js.map

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Breadcrumb component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-breadcrumb component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=breadcrumb.style.d.ts.map

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

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Breadcrumb component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-breadcrumb component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: block;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-breadcrumb-font-size, 0.875rem);
+    line-height: var(--nuraly-breadcrumb-line-height, 1.5);
+    color: var(--nuraly-breadcrumb-item-color);
+  }
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    position: relative;
+  }
+
+  .breadcrumb-item:not(:last-child) {
+    margin-right: var(--nuraly-breadcrumb-separator-margin, 8px);
+  }
+
+  .breadcrumb-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    color: var(--nuraly-breadcrumb-link-color);
+    text-decoration: none;
+    transition: color var(--nuraly-transition-fast, 0.15s) ease;
+    cursor: pointer;
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    border-radius: var(--nuraly-border-radius-small, 2px);
+  }
+
+  .breadcrumb-link:hover {
+    color: var(--nuraly-breadcrumb-link-hover-color);
+  }
+
+  .breadcrumb-link:focus {
+    outline: var(--nuraly-focus-outline);
+    outline-offset: var(--nuraly-focus-outline-offset);
+  }
+
+  .breadcrumb-link.disabled {
+    color: var(--nuraly-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .breadcrumb-text {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    color: var(--nuraly-breadcrumb-last-item-color);
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+  }
+
+  .breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--nuraly-breadcrumb-separator-color);
+    margin: 0 var(--nuraly-breadcrumb-separator-margin, 8px);
+    user-select: none;
+    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+  }
+
+  .breadcrumb-icon {
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+  }
+
+  /* Dropdown menu styles */
+  .breadcrumb-item-with-menu {
+    position: relative;
+  }
+
+  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown {
+    display: block;
+  }
+
+  .breadcrumb-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: var(--nuraly-z-index-dropdown, 1000);
+    background-color: var(--nuraly-color-background-elevated);
+    border: 1px solid var(--nuraly-color-border);
+    border-radius: var(--nuraly-border-radius-medium, 4px);
+    box-shadow: var(--nuraly-shadow-dropdown);
+    min-width: 160px;
+    margin-top: var(--nuraly-spacing-1, 0.25rem);
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+  }
+
+  .breadcrumb-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2, 0.5rem);
+    padding: var(--nuraly-spacing-2, 0.5rem) var(--nuraly-spacing-3, 0.75rem);
+    color: var(--nuraly-color-text);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color var(--nuraly-transition-fast, 0.15s) ease;
+  }
+
+  .breadcrumb-menu-item:hover {
+    background-color: var(--nuraly-color-background-hover);
+  }
+
+  .breadcrumb-menu-item.disabled {
+    color: var(--nuraly-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* RTL Support */
+  :host([dir="rtl"]) .breadcrumb {
+    direction: rtl;
+  }
+
+  :host([dir="rtl"]) .breadcrumb-item:not(:last-child) {
+    margin-right: 0;
+    margin-left: var(--nuraly-breadcrumb-separator-margin, 8px);
+  }
+
+  :host([dir="rtl"]) .breadcrumb-separator {
+    transform: scaleX(-1);
+  }
+`;
+//# sourceMappingURL=breadcrumb.style.js.map

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

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Breadcrumb separator types
+ */
+export declare const enum BreadcrumbSeparator {
+    Slash = "/",
+    Arrow = ">",
+    Chevron = "\u203A",
+    Dash = "-",
+    Dot = "\u2022"
+}
+/**
+ * Breadcrumb item interface
+ */
+export interface BreadcrumbItem {
+    /** Item title/label */
+    title: string;
+    /** Target URL or path */
+    href?: string;
+    /** Click handler for item */
+    onClick?: (e: MouseEvent) => void;
+    /** Icon name to display before title */
+    icon?: string;
+    /** Icon type (solid or regular) */
+    iconType?: 'solid' | 'regular';
+    /** Custom class name for the item */
+    className?: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Dropdown menu items for this breadcrumb item */
+    menu?: BreadcrumbMenuItem[];
+}
+/**
+ * Breadcrumb menu item interface for dropdown menus
+ */
+export interface BreadcrumbMenuItem {
+    /** Menu item label */
+    label: string;
+    /** Menu item URL */
+    href?: string;
+    /** Click handler */
+    onClick?: (e: MouseEvent) => void;
+    /** Icon for menu item */
+    icon?: string;
+    /** Whether menu item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Custom separator configuration
+ */
+export interface BreadcrumbSeparatorConfig {
+    /** Custom separator text or icon name */
+    separator: string;
+    /** Whether the separator is an icon */
+    isIcon?: boolean;
+    /** Icon type if separator is an icon */
+    iconType?: 'solid' | 'regular';
+}
+//# sourceMappingURL=breadcrumb.types.d.ts.map

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

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