orbiq-neural-ui-kit 0.0.5 → 0.0.7

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, Component, signal, model, effect, ViewChild, Directive, EventEmitter, ContentChild, Output, HostListener, Input, InjectionToken, Optional, Inject, ContentChildren, ViewChildren, inject, forwardRef, Injectable, ViewContainerRef, ElementRef } from '@angular/core';
+import { input, computed, Component, output, signal, model, effect, ViewChild, Directive, EventEmitter, ContentChild, Output, HostListener, Input, InjectionToken, Optional, Inject, ContentChildren, ViewChildren, inject, forwardRef, Injectable, ViewContainerRef, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -20,6 +20,58 @@ import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { Placeholder } from '@tiptap/extensions';
 
+class NeuralIconComponent {
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    isLucideIcon = computed(() => {
+        const val = this.name();
+        return typeof val === 'string' && val.startsWith('lucide-');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLucideIcon" }] : /* istanbul ignore next */ []));
+    isEmojiIcon = computed(() => {
+        const val = this.name();
+        if (typeof val !== 'string')
+            return false;
+        // Very simple emoji detection
+        const emojiRegex = /[\p{Emoji_Presentation}\p{Extended_Pictographic}]/u;
+        return emojiRegex.test(val);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmojiIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralIconComponent, isStandalone: true, selector: "neural-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isLucideIcon()) {
+      <span [class]="name()" aria-hidden="true"></span>
+    } @else if (isEmojiIcon()) {
+      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
+        {{ name() }}
+      </span>
+    } @else {
+      <!-- Fallback or custom SVG component handled by ng-content if not string -->
+      <ng-content></ng-content>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-icon',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (isLucideIcon()) {
+      <span [class]="name()" aria-hidden="true"></span>
+    } @else if (isEmojiIcon()) {
+      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
+        {{ name() }}
+      </span>
+    } @else {
+      <!-- Fallback or custom SVG component handled by ng-content if not string -->
+      <ng-content></ng-content>
+    }
+  `
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
 class NeuralButtonComponent {
     // Inputs
     variant = input('subtle', /* @ts-ignore */
@@ -35,6 +87,8 @@ class NeuralButtonComponent {
     loading = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     // Modifiers
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     iconLeft = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
     iconRight = input(false, /* @ts-ignore */
@@ -59,6 +113,10 @@ class NeuralButtonComponent {
         }[this.size()];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => {
+        return this.spinnerClasses();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
     computedClasses = computed(() => {
         const v = this.variant();
         const t = this.theme();
@@ -143,7 +201,7 @@ class NeuralButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralButtonComponent, isStandalone: true, selector: "neural-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralButtonComponent, isStandalone: true, selector: "neural-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="isDisabled()"
@@ -156,26 +214,36 @@ class NeuralButtonComponent {
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-      } @else if (iconLeft()) {
-        <ng-content select="[left-icon]"></ng-content>
+      } @else if (iconLeft() || (icon() && !iconRight() && !iconOnly())) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[left-icon]"></ng-content>
+        }
+      } @else if (iconOnly() && icon()) {
+        <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
       }
       
       <span class="truncate" [class.sr-only]="iconOnly()">
         <ng-content></ng-content>
       </span>
 
-      @if (!loading() && iconRight()) {
-        <ng-content select="[right-icon]"></ng-content>
+      @if (!loading() && (iconRight() || (icon() && iconRight() && !iconOnly()))) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[right-icon]"></ng-content>
+        }
       }
     </button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-button',
                     standalone: true,
-                    imports: [CommonModule],
+                    imports: [CommonModule, NeuralIconComponent],
                     template: `
     <button
       [type]="type()"
@@ -189,21 +257,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-      } @else if (iconLeft()) {
-        <ng-content select="[left-icon]"></ng-content>
+      } @else if (iconLeft() || (icon() && !iconRight() && !iconOnly())) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[left-icon]"></ng-content>
+        }
+      } @else if (iconOnly() && icon()) {
+        <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
       }
       
       <span class="truncate" [class.sr-only]="iconOnly()">
         <ng-content></ng-content>
       </span>
 
-      @if (!loading() && iconRight()) {
-        <ng-content select="[right-icon]"></ng-content>
+      @if (!loading() && (iconRight() || (icon() && iconRight() && !iconOnly()))) {
+        @if (icon()) {
+          <neural-icon [name]="icon()!" [class]="iconClasses()"></neural-icon>
+        } @else {
+          <ng-content select="[right-icon]"></ng-content>
+        }
       }
     </button>
   `
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class NeuralAlertComponent {
     title = input(/* @ts-ignore */
@@ -479,7 +557,7 @@ class NeuralAlertComponent {
         <svg [class]="iconColorClass()" class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.8535 5.14648C10.6583 4.95122 10.3417 4.95122 10.1465 5.14648L8 7.29297L5.85352 5.14648C5.65825 4.95122 5.34175 4.95122 5.14648 5.14648C4.95122 5.34175 4.95122 5.65825 5.14648 5.85352L7.29297 8L5.14648 10.1465C4.95122 10.3417 4.95122 10.6583 5.14648 10.8535C5.34175 11.0488 5.65825 11.0488 5.85352 10.8535L8 8.70703L10.1465 10.8535C10.3417 11.0488 10.6583 11.0488 10.8535 10.8535C11.0488 10.6583 11.0488 10.3417 10.8535 10.1465L8.70703 8L10.8535 5.85352C11.0488 5.65825 11.0488 5.34175 10.8535 5.14648Z" fill="currentColor"/></svg>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAlertComponent, decorators: [{
             type: Component,
@@ -1766,6 +1844,8 @@ class NeuralDropdownComponent {
     hasTriggerSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTriggerSlot" }] : /* istanbul ignore next */ []));
     handleItemClick(option, event, popover) {
+        if ('separator' in option)
+            return;
         if (option.disabled)
             return;
         if (option.onClick) {
@@ -1788,40 +1868,44 @@ class NeuralDropdownComponent {
           @if (options().length === 0) {
             <div class="p-2 text-sm text-ink-gray-5">No options</div>
           } @else {
-            @for (option of options(); track option.label) {
-              @if (option.route) {
-                <a
-                  [routerLink]="option.route"
-                  (click)="handleItemClick(option, $event, popover)"
-                  class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors"
-                  [class.opacity-50]="option.disabled"
-                  [class.pointer-events-none]="option.disabled"
-                >
-                  @if (option.icon) {
-                    <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
-                  }
-                  {{ option.label }}
-                </a>
+            @for (option of options(); track $index) {
+              @if ('separator' in option) {
+                <div class="h-px bg-outline-gray-2 my-1 mx-1"></div>
               } @else {
-                <button
-                  (click)="handleItemClick(option, $event, popover)"
-                  class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left w-full"
-                  [disabled]="option.disabled"
-                  [class.opacity-50]="option.disabled"
-                  [class.cursor-not-allowed]="option.disabled"
-                >
-                  @if (option.icon) {
-                    <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
-                  }
-                  {{ option.label }}
-                </button>
+                @if (option.route) {
+                  <a
+                    [routerLink]="option.route"
+                    (click)="handleItemClick(option, $event, popover)"
+                    class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors"
+                    [class.opacity-50]="option.disabled"
+                    [class.pointer-events-none]="option.disabled"
+                  >
+                    @if (option.icon) {
+                      <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
+                    }
+                    {{ option.label }}
+                  </a>
+                } @else {
+                  <button
+                    (click)="handleItemClick(option, $event, popover)"
+                    class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left w-full"
+                    [disabled]="option.disabled"
+                    [class.opacity-50]="option.disabled"
+                    [class.cursor-not-allowed]="option.disabled"
+                  >
+                    @if (option.icon) {
+                      <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
+                    }
+                    {{ option.label }}
+                  </button>
+                }
               }
             }
           }
         </neural-popover-panel>
       </ng-template>
     </neural-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralPopoverComponent, selector: "neural-popover", inputs: ["side", "align", "offset", "bare"], outputs: ["openChange"] }, { kind: "directive", type: NeuralPopoverTriggerDirective, selector: "[neuralPopoverTrigger]" }, { kind: "directive", type: NeuralPopoverContentDirective, selector: "[neuralPopoverContent]" }, { kind: "component", type: NeuralPopoverPanelComponent, selector: "neural-popover-panel" }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralPopoverComponent, selector: "neural-popover", inputs: ["side", "align", "offset", "bare"], outputs: ["openChange"] }, { kind: "directive", type: NeuralPopoverTriggerDirective, selector: "[neuralPopoverTrigger]" }, { kind: "directive", type: NeuralPopoverContentDirective, selector: "[neuralPopoverContent]" }, { kind: "component", type: NeuralPopoverPanelComponent, selector: "neural-popover-panel" }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDropdownComponent, decorators: [{
             type: Component,
@@ -1843,33 +1927,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           @if (options().length === 0) {
             <div class="p-2 text-sm text-ink-gray-5">No options</div>
           } @else {
-            @for (option of options(); track option.label) {
-              @if (option.route) {
-                <a
-                  [routerLink]="option.route"
-                  (click)="handleItemClick(option, $event, popover)"
-                  class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors"
-                  [class.opacity-50]="option.disabled"
-                  [class.pointer-events-none]="option.disabled"
-                >
-                  @if (option.icon) {
-                    <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
-                  }
-                  {{ option.label }}
-                </a>
+            @for (option of options(); track $index) {
+              @if ('separator' in option) {
+                <div class="h-px bg-outline-gray-2 my-1 mx-1"></div>
               } @else {
-                <button
-                  (click)="handleItemClick(option, $event, popover)"
-                  class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left w-full"
-                  [disabled]="option.disabled"
-                  [class.opacity-50]="option.disabled"
-                  [class.cursor-not-allowed]="option.disabled"
-                >
-                  @if (option.icon) {
-                    <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
-                  }
-                  {{ option.label }}
-                </button>
+                @if (option.route) {
+                  <a
+                    [routerLink]="option.route"
+                    (click)="handleItemClick(option, $event, popover)"
+                    class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors"
+                    [class.opacity-50]="option.disabled"
+                    [class.pointer-events-none]="option.disabled"
+                  >
+                    @if (option.icon) {
+                      <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
+                    }
+                    {{ option.label }}
+                  </a>
+                } @else {
+                  <button
+                    (click)="handleItemClick(option, $event, popover)"
+                    class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left w-full"
+                    [disabled]="option.disabled"
+                    [class.opacity-50]="option.disabled"
+                    [class.cursor-not-allowed]="option.disabled"
+                  >
+                    @if (option.icon) {
+                      <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
+                    }
+                    {{ option.label }}
+                  </button>
+                }
               }
             }
           }
@@ -2013,7 +2101,7 @@ class NeuralBreadcrumbsComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -3695,58 +3783,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], propDecorators: { valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueModel", required: false }] }, { type: i0.Output, args: ["valueModelChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hasLabelSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabelSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }] } });
 
-class NeuralIconComponent {
-    name = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    isLucideIcon = computed(() => {
-        const val = this.name();
-        return typeof val === 'string' && val.startsWith('lucide-');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLucideIcon" }] : /* istanbul ignore next */ []));
-    isEmojiIcon = computed(() => {
-        const val = this.name();
-        if (typeof val !== 'string')
-            return false;
-        // Very simple emoji detection
-        const emojiRegex = /[\p{Emoji_Presentation}\p{Extended_Pictographic}]/u;
-        return emojiRegex.test(val);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isEmojiIcon" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralIconComponent, isStandalone: true, selector: "neural-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (isLucideIcon()) {
-      <span [class]="name()" aria-hidden="true"></span>
-    } @else if (isEmojiIcon()) {
-      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
-        {{ name() }}
-      </span>
-    } @else {
-      <!-- Fallback or custom SVG component handled by ng-content if not string -->
-      <ng-content></ng-content>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'neural-icon',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    @if (isLucideIcon()) {
-      <span [class]="name()" aria-hidden="true"></span>
-    } @else if (isEmojiIcon()) {
-      <span class="inline-flex items-center justify-center leading-none" aria-hidden="true">
-        {{ name() }}
-      </span>
-    } @else {
-      <!-- Fallback or custom SVG component handled by ng-content if not string -->
-      <ng-content></ng-content>
-    }
-  `
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
-
 class NeuralSpinnerComponent {
     size = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
@@ -3921,7 +3957,7 @@ class NeuralDividerComponent {
     } @else {
       <hr class="border-0 border-outline-gray-2" [class]="dividerClasses()" />
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDividerComponent, decorators: [{
             type: Component,
@@ -4433,7 +4469,7 @@ class NeuralDialogComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
             type: Component,
@@ -7392,7 +7428,7 @@ class NeuralFileUploaderComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralErrorMessageComponent, selector: "neural-error-message", inputs: ["message"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralErrorMessageComponent, selector: "neural-error-message", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFileUploaderComponent, decorators: [{
             type: Component,