orbiq-neural-ui-kit 1.0.28 → 1.0.30

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

@@ -7395,7 +7395,7 @@ class NeuralSearchTriggerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSearchTriggerComponent, isStandalone: true, selector: "neural-search-trigger", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, combo: { classPropertyName: "combo", publicName: "combo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
     <button 
       (click)="clicked.emit()"
-      class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-1 hover:bg-surface-gray-2 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
+      class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
       [style.width]="width()"
     >
       <div class="flex items-center gap-2 text-ink-gray-4 group-hover:text-ink-gray-5">
@@ -7419,7 +7419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     template: `
     <button 
       (click)="clicked.emit()"
-      class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-1 hover:bg-surface-gray-2 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
+      class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
       [style.width]="width()"
     >
       <div class="flex items-center gap-2 text-ink-gray-4 group-hover:text-ink-gray-5">
@@ -12521,11 +12521,11 @@ class NeuralFilterBuilderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralFilterBuilderComponent, isStandalone: true, selector: "neural-filter-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, valueInputTemplate: { classPropertyName: "valueInputTemplate", publicName: "valueInputTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-3 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-1 relative h-9\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n        </button>\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-outline-gray-2 my-5\">\n\n  <!-- Acciones -->\n  <div class=\"flex items-center justify-between\">\n    <button \n      (click)=\"addRule()\"\n      class=\"text-[13.5px] text-ink-gray-5 font-medium hover:text-ink-gray-9 transition-colors flex items-center\">\n      + A\u00F1adir Filtro\n    </button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"subtle\" \n        theme=\"gray\" \n        size=\"md\"\n        class=\"bg-surface-gray-1\"\n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\"\n        size=\"md\"\n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralFilterBuilderComponent, isStandalone: true, selector: "neural-filter-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, valueInputTemplate: { classPropertyName: "valueInputTemplate", publicName: "valueInputTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-3 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-1 relative h-9\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n        </button>\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-outline-gray-2 my-5\">\n\n  <!-- Acciones -->\n  <div class=\"flex items-center justify-between\">\n    <neural-button \n      variant=\"ghost\" \n      size=\"sm\"\n      icon=\"lucide-plus\"\n      [iconLeft]=\"true\"\n      (clicked)=\"addRule()\">\n      A\u00F1adir Filtro\n    </neural-button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"subtle\" \n        theme=\"gray\" \n        size=\"md\"\n        class=\"bg-surface-gray-1\"\n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\"\n        size=\"md\"\n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-3 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-1 relative h-9\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n        </button>\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-outline-gray-2 my-5\">\n\n  <!-- Acciones -->\n  <div class=\"flex items-center justify-between\">\n    <button \n      (click)=\"addRule()\"\n      class=\"text-[13.5px] text-ink-gray-5 font-medium hover:text-ink-gray-9 transition-colors flex items-center\">\n      + A\u00F1adir Filtro\n    </button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"subtle\" \n        theme=\"gray\" \n        size=\"md\"\n        class=\"bg-surface-gray-1\"\n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\"\n        size=\"md\"\n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-3 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-1 relative h-9\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n        </button>\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-outline-gray-2 my-5\">\n\n  <!-- Acciones -->\n  <div class=\"flex items-center justify-between\">\n    <neural-button \n      variant=\"ghost\" \n      size=\"sm\"\n      icon=\"lucide-plus\"\n      [iconLeft]=\"true\"\n      (clicked)=\"addRule()\">\n      A\u00F1adir Filtro\n    </neural-button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"subtle\" \n        theme=\"gray\" \n        size=\"md\"\n        class=\"bg-surface-gray-1\"\n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\"\n        size=\"md\"\n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], valueInputTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueInputTemplate", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }] } });
 
 class NeuralPageHeaderComponent {
@@ -13706,9 +13706,15 @@ class NeuralKeyboardShortcutsDialogComponent {
     <neural-dialog [(openModel)]="openModel" size="4xl" [hasTitleSlot]="true" [hasDefaultSlot]="true">
       <div title class="flex items-center justify-between w-full pr-4">
         <h3 class="text-[16px] font-semibold text-ink-gray-9">Keyboard Shortcuts</h3>
-        <div class="relative w-64">
-          <input type="text" [(ngModel)]="searchText" placeholder="Search shortcuts" 
-            class="w-full h-8 px-3 rounded-md border border-outline-gray-2 bg-surface-base text-[13px] text-ink-gray-8 focus:outline-none focus:ring-1 focus:ring-outline-gray-4 focus:border-outline-gray-4 transition-colors">
+        <div class="w-64">
+          <neural-text-input 
+            [(valueModel)]="searchText" 
+            placeholder="Search shortcuts" 
+            variant="subtle"
+            size="sm"
+          >
+            <span prefix><i class="lucide-search size-4 text-ink-gray-4"></i></span>
+          </neural-text-input>
         </div>
       </div>
 
@@ -13739,21 +13745,27 @@ class NeuralKeyboardShortcutsDialogComponent {
         }
       </div>
     </neural-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralKeyboardShortcutComponent, selector: "neural-keyboard-shortcut", inputs: ["combo", "bg", "showPlus", "useIcons"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralKeyboardShortcutComponent, selector: "neural-keyboard-shortcut", inputs: ["combo", "bg", "showPlus", "useIcons"] }, { kind: "component", type: NeuralTextInputComponent, selector: "neural-text-input", inputs: ["valueModel", "type", "size", "variant", "placeholder", "disabled", "readonly", "required", "label", "description", "error", "id", "debounce", "wrapperClass", "wrapperStyle", "hasLabelSlot", "hasDescriptionSlot", "hasPrefixSlot", "hasSuffixSlot"], outputs: ["valueModelChange", "debounceChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralKeyboardShortcutsDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-keyboard-shortcuts-dialog',
                     standalone: true,
-                    imports: [CommonModule, FormsModule, NeuralDialogComponent, NeuralKeyboardShortcutComponent],
+                    imports: [CommonModule, FormsModule, NeuralDialogComponent, NeuralKeyboardShortcutComponent, NeuralTextInputComponent],
                     template: `
     <neural-dialog [(openModel)]="openModel" size="4xl" [hasTitleSlot]="true" [hasDefaultSlot]="true">
       <div title class="flex items-center justify-between w-full pr-4">
         <h3 class="text-[16px] font-semibold text-ink-gray-9">Keyboard Shortcuts</h3>
-        <div class="relative w-64">
-          <input type="text" [(ngModel)]="searchText" placeholder="Search shortcuts" 
-            class="w-full h-8 px-3 rounded-md border border-outline-gray-2 bg-surface-base text-[13px] text-ink-gray-8 focus:outline-none focus:ring-1 focus:ring-outline-gray-4 focus:border-outline-gray-4 transition-colors">
+        <div class="w-64">
+          <neural-text-input 
+            [(valueModel)]="searchText" 
+            placeholder="Search shortcuts" 
+            variant="subtle"
+            size="sm"
+          >
+            <span prefix><i class="lucide-search size-4 text-ink-gray-4"></i></span>
+          </neural-text-input>
         </div>
       </div>