orbiq-neural-ui-kit 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -290,9 +290,13 @@ class NeuralBadgeComponent {
290
290
  },
291
291
  };
292
292
  const sizeClasses = {
293
+ xs: 'h-3 px-1 text-[10px]',
293
294
  sm: 'h-4 px-1.5 text-xs',
294
295
  md: 'h-5 px-1.5 text-xs',
295
296
  lg: 'h-6 px-2 text-[13px] tracking-[0.02em]',
297
+ xl: 'h-7 px-2.5 text-sm',
298
+ '2xl': 'h-8 px-3 text-base',
299
+ '3xl': 'h-10 px-4 text-lg',
296
300
  };
297
301
  return [
298
302
  themeClasses[this.theme()][this.variant()],
@@ -300,7 +304,18 @@ class NeuralBadgeComponent {
300
304
  ].join(' ');
301
305
  }, /* @ts-ignore */
302
306
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
303
- iconSize = computed(() => (this.size() === 'lg' ? 'size-3' : 'size-2.5'), /* @ts-ignore */
307
+ iconSize = computed(() => {
308
+ switch (this.size()) {
309
+ case 'xs': return 'size-2';
310
+ case 'sm': return 'size-2.5';
311
+ case 'md': return 'size-2.5';
312
+ case 'lg': return 'size-3';
313
+ case 'xl': return 'size-3.5';
314
+ case '2xl': return 'size-4';
315
+ case '3xl': return 'size-5';
316
+ default: return 'size-2.5';
317
+ }
318
+ }, /* @ts-ignore */
304
319
  ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
305
320
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
306
321
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralBadgeComponent, isStandalone: true, selector: "neural-badge", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -447,10 +462,13 @@ class NeuralButtonComponent {
447
462
  }
448
463
  spinnerClasses = computed(() => {
449
464
  return {
450
- 'xs': 'size-3.5',
451
- 'sm': 'size-4',
452
- 'md': 'size-4.5',
453
- 'lg': 'size-5'
465
+ 'xs': 'size-3.5', // 14px
466
+ 'sm': 'size-4', // 16px
467
+ 'md': 'size-5', // 20px
468
+ 'lg': 'size-6', // 24px
469
+ 'xl': 'size-7', // 28px
470
+ '2xl': 'size-8', // 32px
471
+ '3xl': 'size-10', // 40px
454
472
  }[this.size()];
455
473
  }, /* @ts-ignore */
456
474
  ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
@@ -522,15 +540,21 @@ class NeuralButtonComponent {
522
540
  const sizeClasses = this.iconOnly()
523
541
  ? {
524
542
  xs: 'h-6 w-6 rounded-3',
525
- sm: 'h-7 w-7 rounded-4',
526
- md: 'h-8 w-8 rounded-4',
527
- lg: 'h-10 w-10 rounded-5',
543
+ sm: 'h-8 w-8 rounded-4',
544
+ md: 'h-10 w-10 rounded-4',
545
+ lg: 'h-12 w-12 rounded-5',
546
+ xl: 'h-14 w-14 rounded-5',
547
+ '2xl': 'h-16 w-16 rounded-6',
548
+ '3xl': 'h-20 w-20 rounded-7',
528
549
  }[s]
529
550
  : {
530
551
  xs: 'h-6 text-xs px-1.5 rounded-3',
531
- sm: 'h-7 text-base px-2 rounded-4',
532
- md: 'h-8 text-base-medium px-2.5 rounded-4',
533
- lg: 'h-10 text-lg-medium px-3 rounded-5',
552
+ sm: 'h-8 text-sm px-2 rounded-4',
553
+ md: 'h-10 text-base-medium px-2.5 rounded-4',
554
+ lg: 'h-12 text-lg-medium px-3 rounded-5',
555
+ xl: 'h-14 text-xl px-4 rounded-5',
556
+ '2xl': 'h-16 text-2xl px-5 rounded-6',
557
+ '3xl': 'h-20 text-3xl px-6 rounded-7',
534
558
  }[s];
535
559
  return [
536
560
  'inline-flex items-center justify-center gap-2 transition-colors shrink-0',
@@ -1005,9 +1029,19 @@ class NeuralCheckboxComponent {
1005
1029
  return 'inline-flex';
1006
1030
  const hasDetail = this.rendersDescription() || this.hasError();
1007
1031
  const sizeVal = this.size();
1008
- const sizeClass = hasDetail
1009
- ? sizeVal === 'md' ? 'px-3 py-2' : 'px-1.5 py-1.5'
1010
- : sizeVal === 'md' ? 'h-8 px-3' : sizeVal === 'sm' ? 'h-7 px-1.5' : 'h-6 px-1.5';
1032
+ const getContainerSize = () => {
1033
+ switch (sizeVal) {
1034
+ case 'xs': return hasDetail ? 'px-1 py-1' : 'h-5 px-1';
1035
+ case 'sm': return hasDetail ? 'px-1.5 py-1.5' : 'h-7 px-1.5';
1036
+ case 'md': return hasDetail ? 'px-2 py-2' : 'h-8 px-2';
1037
+ case 'lg': return hasDetail ? 'px-3 py-3' : 'h-10 px-3';
1038
+ case 'xl': return hasDetail ? 'px-4 py-4' : 'h-12 px-4';
1039
+ case '2xl': return hasDetail ? 'px-5 py-5' : 'h-14 px-5';
1040
+ case '3xl': return hasDetail ? 'px-6 py-6' : 'h-16 px-6';
1041
+ default: return hasDetail ? 'px-1.5 py-1.5' : 'h-7 px-1.5';
1042
+ }
1043
+ };
1044
+ const sizeClass = getContainerSize();
1011
1045
  const classes = ['flex group rounded-4 transition-colors', sizeClass];
1012
1046
  if (!hasDetail)
1013
1047
  classes.push('justify-center');
@@ -1029,11 +1063,16 @@ class NeuralCheckboxComponent {
1029
1063
  }
1030
1064
  inputClasses = computed(() => {
1031
1065
  const sizeVal = this.size();
1032
- const sizeClasses = sizeVal === 'md'
1033
- ? 'w-4 h-4'
1034
- : sizeVal === 'sm'
1035
- ? 'w-3.5 h-3.5'
1036
- : 'w-[13px] h-[13px]';
1066
+ const sizeMap = {
1067
+ xs: 'w-3 h-3',
1068
+ sm: 'w-3.5 h-3.5',
1069
+ md: 'w-4 h-4',
1070
+ lg: 'w-5 h-5',
1071
+ xl: 'w-6 h-6',
1072
+ '2xl': 'w-7 h-7',
1073
+ '3xl': 'w-8 h-8'
1074
+ };
1075
+ const sizeClasses = sizeMap[sizeVal] || sizeMap['sm'];
1037
1076
  if (this.disabled()) {
1038
1077
  return [
1039
1078
  sizeClasses,
@@ -1389,28 +1428,58 @@ class NeuralTextInputComponent {
1389
1428
  }, /* @ts-ignore */
1390
1429
  ...(ngDevMode ? [{ debugName: "suffixClassesCombined" }] : /* istanbul ignore next */ []));
1391
1430
  prefixClasses = computed(() => {
1392
- const sizeVal = this.size();
1393
- return sizeVal === 'sm' ? 'ps-2' : sizeVal === 'md' ? 'ps-2.5' : 'ps-3';
1431
+ const sizeMap = {
1432
+ xs: 'ps-1.5',
1433
+ sm: 'ps-2',
1434
+ md: 'ps-3',
1435
+ lg: 'ps-4',
1436
+ xl: 'ps-5',
1437
+ '2xl': 'ps-6',
1438
+ '3xl': 'ps-8'
1439
+ };
1440
+ return sizeMap[this.size()] || 'ps-2';
1394
1441
  }, /* @ts-ignore */
1395
1442
  ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
1396
1443
  suffixClasses = computed(() => {
1397
- const sizeVal = this.size();
1398
- return sizeVal === 'sm' ? 'pe-2' : sizeVal === 'md' ? 'pe-2.5' : 'pe-3';
1444
+ const sizeMap = {
1445
+ xs: 'pe-1.5',
1446
+ sm: 'pe-2',
1447
+ md: 'pe-3',
1448
+ lg: 'pe-4',
1449
+ xl: 'pe-5',
1450
+ '2xl': 'pe-6',
1451
+ '3xl': 'pe-8'
1452
+ };
1453
+ return sizeMap[this.size()] || 'pe-2';
1399
1454
  }, /* @ts-ignore */
1400
1455
  ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
1401
1456
  inputClasses = computed(() => {
1402
1457
  const sizeVal = this.size();
1403
- const sizeClass = sizeVal === 'sm' ? 'text-base rounded-4 h-7'
1404
- : sizeVal === 'md' ? 'text-base rounded-4 h-8'
1405
- : sizeVal === 'lg' ? 'text-lg rounded-5 h-10'
1406
- : 'text-2xl rounded-5 h-10';
1458
+ const sizeMap = {
1459
+ xs: 'text-xs rounded-3 h-6',
1460
+ sm: 'text-sm rounded-4 h-8',
1461
+ md: 'text-base rounded-4 h-10',
1462
+ lg: 'text-lg rounded-5 h-12',
1463
+ xl: 'text-xl rounded-5 h-14',
1464
+ '2xl': 'text-2xl rounded-6 h-16',
1465
+ '3xl': 'text-3xl rounded-7 h-20'
1466
+ };
1467
+ const sizeClass = sizeMap[sizeVal] || sizeMap['sm'];
1407
1468
  const hasPrefix = this.hasPrefixSlot();
1408
1469
  const hasSuffix = this.hasSuffixSlot();
1409
- const paddingClass = sizeVal === 'sm'
1410
- ? `py-1.5 ${hasPrefix ? 'ps-8' : 'ps-2'} ${hasSuffix ? 'pe-8' : 'pe-2'}`
1411
- : sizeVal === 'md'
1412
- ? `py-1.5 ${hasPrefix ? 'ps-9' : 'ps-2.5'} ${hasSuffix ? 'pe-9' : 'pe-2.5'}`
1413
- : `py-1.5 ${hasPrefix ? 'ps-10' : 'ps-3'} ${hasSuffix ? 'pe-10' : 'pe-3'}`;
1470
+ const getPadding = () => {
1471
+ switch (sizeVal) {
1472
+ case 'xs': return `py-1 ${hasPrefix ? 'ps-6' : 'ps-1.5'} ${hasSuffix ? 'pe-6' : 'pe-1.5'}`;
1473
+ case 'sm': return `py-1.5 ${hasPrefix ? 'ps-8' : 'ps-2'} ${hasSuffix ? 'pe-8' : 'pe-2'}`;
1474
+ case 'md': return `py-2 ${hasPrefix ? 'ps-10' : 'ps-3'} ${hasSuffix ? 'pe-10' : 'pe-3'}`;
1475
+ case 'lg': return `py-2.5 ${hasPrefix ? 'ps-12' : 'ps-4'} ${hasSuffix ? 'pe-12' : 'pe-4'}`;
1476
+ case 'xl': return `py-3 ${hasPrefix ? 'ps-14' : 'ps-5'} ${hasSuffix ? 'pe-14' : 'pe-5'}`;
1477
+ case '2xl': return `py-4 ${hasPrefix ? 'ps-16' : 'ps-6'} ${hasSuffix ? 'pe-16' : 'pe-6'}`;
1478
+ case '3xl': return `py-5 ${hasPrefix ? 'ps-20' : 'ps-8'} ${hasSuffix ? 'pe-20' : 'pe-8'}`;
1479
+ default: return `py-1.5 ${hasPrefix ? 'ps-8' : 'ps-2'} ${hasSuffix ? 'pe-8' : 'pe-2'}`;
1480
+ }
1481
+ };
1482
+ const paddingClass = getPadding();
1414
1483
  const variantVal = this.disabled() ? 'disabled' : this.variant();
1415
1484
  let variantClass = '';
1416
1485
  if (variantVal === 'subtle') {
@@ -1921,8 +1990,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1921
1990
  class NeuralFooterComponent {
1922
1991
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1923
1992
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralFooterComponent, isStandalone: true, selector: "neural-footer", ngImport: i0, template: `
1924
- <footer class="border-t border-gray-200 p-4 text-center text-sm text-gray-500 w-full">
1925
- <ng-content></ng-content>
1993
+ <footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
1994
+
1995
+ <!-- Zona Izquierda: Estados e Indicadores -->
1996
+ <div class="flex items-center gap-3">
1997
+ <ng-content select="[left]"></ng-content>
1998
+ </div>
1999
+ <!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
2000
+ <div class="flex items-center justify-center">
2001
+ <ng-content></ng-content>
2002
+ </div>
2003
+ <!-- Zona Derecha: Acciones y Herramientas Operativas -->
2004
+ <div class="flex items-center gap-2">
2005
+ <ng-content select="[right]"></ng-content>
2006
+ </div>
1926
2007
  </footer>
1927
2008
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
1928
2009
  }
@@ -1933,8 +2014,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1933
2014
  standalone: true,
1934
2015
  imports: [CommonModule],
1935
2016
  template: `
1936
- <footer class="border-t border-gray-200 p-4 text-center text-sm text-gray-500 w-full">
1937
- <ng-content></ng-content>
2017
+ <footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
2018
+
2019
+ <!-- Zona Izquierda: Estados e Indicadores -->
2020
+ <div class="flex items-center gap-3">
2021
+ <ng-content select="[left]"></ng-content>
2022
+ </div>
2023
+ <!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
2024
+ <div class="flex items-center justify-center">
2025
+ <ng-content></ng-content>
2026
+ </div>
2027
+ <!-- Zona Derecha: Acciones y Herramientas Operativas -->
2028
+ <div class="flex items-center gap-2">
2029
+ <ng-content select="[right]"></ng-content>
2030
+ </div>
1938
2031
  </footer>
1939
2032
  `
1940
2033
  }]
@@ -1952,7 +2045,16 @@ class NeuralFormLabelComponent {
1952
2045
  size = input('sm', /* @ts-ignore */
1953
2046
  ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1954
2047
  labelClasses = computed(() => {
1955
- return this.size() === 'sm' ? 'text-xs' : 'text-base';
2048
+ const sizeMap = {
2049
+ xs: 'text-xs',
2050
+ sm: 'text-sm',
2051
+ md: 'text-base',
2052
+ lg: 'text-lg',
2053
+ xl: 'text-xl',
2054
+ '2xl': 'text-2xl',
2055
+ '3xl': 'text-3xl'
2056
+ };
2057
+ return sizeMap[this.size()] || 'text-sm';
1956
2058
  }, /* @ts-ignore */
1957
2059
  ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
1958
2060
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2000,6 +2102,9 @@ class NeuralSpinnerComponent {
2000
2102
  sm: { px: 14, thickness: 2, inset: 1.05 },
2001
2103
  md: { px: 16, thickness: 2, inset: 1.2 },
2002
2104
  lg: { px: 20, thickness: 2, inset: 1.5 },
2105
+ xl: { px: 24, thickness: 2.5, inset: 1.8 },
2106
+ '2xl': { px: 32, thickness: 3, inset: 2.4 },
2107
+ '3xl': { px: 40, thickness: 4, inset: 3 },
2003
2108
  };
2004
2109
  colorClass = computed(() => {
2005
2110
  const themeVal = this.theme();
@@ -2115,10 +2220,13 @@ class NeuralProgressComponent {
2115
2220
  ...(ngDevMode ? [{ debugName: "hasHintSlot" }] : /* istanbul ignore next */ []));
2116
2221
  indicatorContainerClasses = computed(() => {
2117
2222
  const heightClass = {
2223
+ xs: 'h-[1px]',
2118
2224
  sm: 'h-[2px]',
2119
2225
  md: 'h-1',
2120
2226
  lg: 'h-2',
2121
2227
  xl: 'h-3',
2228
+ '2xl': 'h-4',
2229
+ '3xl': 'h-6',
2122
2230
  }[this.size()] || 'h-[2px]';
2123
2231
  const layoutClasses = this.intervals() ? 'flex space-x-1' : 'bg-surface-gray-2';
2124
2232
  return [heightClass, layoutClasses].join(' ');
@@ -2468,18 +2576,34 @@ class NeuralRadioComponent {
2468
2576
  if (!this.padded())
2469
2577
  return classes.join(' ');
2470
2578
  if (this.hasDescription()) {
2471
- classes.push(this.size() === 'md' ? 'px-3 py-2' : 'px-1.5 py-1.5');
2579
+ const getContainerSize = () => {
2580
+ switch (this.size()) {
2581
+ case 'xs': return 'px-1 py-1';
2582
+ case 'sm': return 'px-1.5 py-1.5';
2583
+ case 'md': return 'px-2 py-2';
2584
+ case 'lg': return 'px-3 py-3';
2585
+ case 'xl': return 'px-4 py-4';
2586
+ case '2xl': return 'px-5 py-5';
2587
+ case '3xl': return 'px-6 py-6';
2588
+ default: return 'px-1.5 py-1.5';
2589
+ }
2590
+ };
2591
+ classes.push(getContainerSize());
2472
2592
  }
2473
2593
  else {
2474
- if (this.size() === 'md') {
2475
- classes.push('h-8 items-center px-3');
2476
- }
2477
- else if (this.size() === 'sm') {
2478
- classes.push('h-7 items-center px-1.5');
2479
- }
2480
- else {
2481
- classes.push('h-6 items-center px-1.5');
2482
- }
2594
+ const getContainerSize = () => {
2595
+ switch (this.size()) {
2596
+ case 'xs': return 'h-5 items-center px-1';
2597
+ case 'sm': return 'h-7 items-center px-1.5';
2598
+ case 'md': return 'h-8 items-center px-2';
2599
+ case 'lg': return 'h-10 items-center px-3';
2600
+ case 'xl': return 'h-12 items-center px-4';
2601
+ case '2xl': return 'h-14 items-center px-5';
2602
+ case '3xl': return 'h-16 items-center px-6';
2603
+ default: return 'h-7 items-center px-1.5';
2604
+ }
2605
+ };
2606
+ classes.push(getContainerSize());
2483
2607
  }
2484
2608
  if (!this.isDisabled()) {
2485
2609
  classes.push('hover:bg-surface-gray-3 active:bg-surface-gray-4');
@@ -2490,17 +2614,38 @@ class NeuralRadioComponent {
2490
2614
  circleClasses = computed(() => {
2491
2615
  let control = '';
2492
2616
  let offset = '';
2493
- if (this.size() === 'md') {
2494
- control = 'size-4 group-has-[:checked]:border-[4.5px]';
2495
- offset = 'mt-[2.5px]';
2496
- }
2497
- else if (this.size() === 'sm') {
2498
- control = 'size-3.5 group-has-[:checked]:border-4';
2499
- offset = 'mt-[3.5px]';
2500
- }
2501
- else {
2502
- control = 'size-[13px] group-has-[:checked]:border-[3.7px]';
2503
- offset = 'mt-1';
2617
+ switch (this.size()) {
2618
+ case 'xs':
2619
+ control = 'size-[13px] group-has-[:checked]:border-[3.7px]';
2620
+ offset = 'mt-[2px]';
2621
+ break;
2622
+ case 'sm':
2623
+ control = 'size-3.5 group-has-[:checked]:border-4';
2624
+ offset = 'mt-[3.5px]';
2625
+ break;
2626
+ case 'md':
2627
+ control = 'size-4 group-has-[:checked]:border-[4.5px]';
2628
+ offset = 'mt-[2.5px]';
2629
+ break;
2630
+ case 'lg':
2631
+ control = 'size-5 group-has-[:checked]:border-[5px]';
2632
+ offset = 'mt-1';
2633
+ break;
2634
+ case 'xl':
2635
+ control = 'size-6 group-has-[:checked]:border-[6px]';
2636
+ offset = 'mt-1';
2637
+ break;
2638
+ case '2xl':
2639
+ control = 'size-7 group-has-[:checked]:border-[7px]';
2640
+ offset = 'mt-0.5';
2641
+ break;
2642
+ case '3xl':
2643
+ control = 'size-8 group-has-[:checked]:border-[8px]';
2644
+ offset = 'mt-0.5';
2645
+ break;
2646
+ default:
2647
+ control = 'size-3.5 group-has-[:checked]:border-4';
2648
+ offset = 'mt-[3.5px]';
2504
2649
  }
2505
2650
  const classes = [
2506
2651
  'box-border shrink-0 rounded-full border bg-surface-base transition-colors',
@@ -2701,6 +2846,19 @@ class NeuralSliderComponent {
2701
2846
  return ((val - this.min()) / range) * 100;
2702
2847
  }, /* @ts-ignore */
2703
2848
  ...(ngDevMode ? [{ debugName: "fillPercentage" }] : /* istanbul ignore next */ []));
2849
+ containerHeightClass = computed(() => {
2850
+ switch (this.size()) {
2851
+ case 'xs': return 'h-3';
2852
+ case 'sm': return 'h-4';
2853
+ case 'md': return 'h-5';
2854
+ case 'lg': return 'h-6';
2855
+ case 'xl': return 'h-8';
2856
+ case '2xl': return 'h-10';
2857
+ case '3xl': return 'h-12';
2858
+ default: return 'h-4';
2859
+ }
2860
+ }, /* @ts-ignore */
2861
+ ...(ngDevMode ? [{ debugName: "containerHeightClass" }] : /* istanbul ignore next */ []));
2704
2862
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2705
2863
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSliderComponent, isStandalone: true, selector: "neural-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasLabelSlot: { classPropertyName: "hasLabelSlot", publicName: "hasLabelSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
2706
2864
  <neural-labeling-wrapper [enabled]="hasLabeling()">
@@ -2717,7 +2875,7 @@ class NeuralSliderComponent {
2717
2875
  </neural-input-label>
2718
2876
  }
2719
2877
 
2720
- <div class="relative flex select-none touch-none items-center w-full" [class]="size() === 'md' ? 'h-5' : 'h-4'">
2878
+ <div class="relative flex select-none touch-none items-center w-full" [class]="containerHeightClass()">
2721
2879
  <!-- We use a native range input styled to look like the custom slider -->
2722
2880
  <input
2723
2881
  type="range"
@@ -2765,7 +2923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2765
2923
  </neural-input-label>
2766
2924
  }
2767
2925
 
2768
- <div class="relative flex select-none touch-none items-center w-full" [class]="size() === 'md' ? 'h-5' : 'h-4'">
2926
+ <div class="relative flex select-none touch-none items-center w-full" [class]="containerHeightClass()">
2769
2927
  <!-- We use a native range input styled to look like the custom slider -->
2770
2928
  <input
2771
2929
  type="range"
@@ -2849,6 +3007,18 @@ class NeuralSwitchComponent {
2849
3007
  rendersDescription = this.labeling.rendersDescription;
2850
3008
  iconClasses = 'me-2 size-4 flex-shrink-0 text-ink-gray-6';
2851
3009
  switchClasses = computed(() => {
3010
+ const getSizeClass = () => {
3011
+ switch (this.size()) {
3012
+ case 'xs': return 'h-3.5 w-[24px] border-2';
3013
+ case 'sm': return 'h-4 w-[26px] border-2';
3014
+ case 'md': return 'h-5 w-8 border-[3px]';
3015
+ case 'lg': return 'h-6 w-10 border-[3px]';
3016
+ case 'xl': return 'h-7 w-12 border-4';
3017
+ case '2xl': return 'h-8 w-14 border-4';
3018
+ case '3xl': return 'h-10 w-16 border-[5px]';
3019
+ default: return 'h-4 w-[26px] border-2';
3020
+ }
3021
+ };
2852
3022
  return [
2853
3023
  'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-transparent transition-colors duration-100 ease-in-out items-center',
2854
3024
  this.padded() ? 'focus:outline-none focus:ring-0' : '',
@@ -2856,27 +3026,41 @@ class NeuralSwitchComponent {
2856
3026
  this.valueModel()
2857
3027
  ? 'bg-surface-gray-10 enabled:hover:bg-surface-gray-9 active:bg-surface-gray-8 group-hover:enabled:bg-surface-gray-9'
2858
3028
  : 'bg-surface-gray-4 enabled:hover:bg-surface-gray-5 active:bg-surface-gray-6 group-hover:enabled:bg-surface-gray-5',
2859
- this.size() === 'md'
2860
- ? 'h-5 w-8 border-[3px]'
2861
- : this.size() === 'sm'
2862
- ? 'h-4 w-[26px] border-2'
2863
- : 'h-3.5 w-[24px] border-2',
3029
+ getSizeClass(),
2864
3030
  ].join(' ');
2865
3031
  }, /* @ts-ignore */
2866
3032
  ...(ngDevMode ? [{ debugName: "switchClasses" }] : /* istanbul ignore next */ []));
2867
3033
  switchCircleClasses = computed(() => {
3034
+ const getCircleSize = () => {
3035
+ switch (this.size()) {
3036
+ case 'xs': return 'h-2.5 w-2.5';
3037
+ case 'sm': return 'h-3 w-3';
3038
+ case 'md': return 'h-3.5 w-3.5';
3039
+ case 'lg': return 'h-4 w-4';
3040
+ case 'xl': return 'h-5 w-5';
3041
+ case '2xl': return 'h-6 w-6';
3042
+ case '3xl': return 'h-7 w-7';
3043
+ default: return 'h-3 w-3';
3044
+ }
3045
+ };
3046
+ const getTranslate = () => {
3047
+ if (!this.valueModel())
3048
+ return 'translate-x-0';
3049
+ switch (this.size()) {
3050
+ case 'xs': return 'translate-x-2.5 rtl:-translate-x-2.5';
3051
+ case 'sm': return 'translate-x-2.5 rtl:-translate-x-2.5';
3052
+ case 'md': return 'translate-x-3 rtl:-translate-x-3';
3053
+ case 'lg': return 'translate-x-4 rtl:-translate-x-4';
3054
+ case 'xl': return 'translate-x-5 rtl:-translate-x-5';
3055
+ case '2xl': return 'translate-x-6 rtl:-translate-x-6';
3056
+ case '3xl': return 'translate-x-7 rtl:-translate-x-7';
3057
+ default: return 'translate-x-2.5 rtl:-translate-x-2.5';
3058
+ }
3059
+ };
2868
3060
  return [
2869
3061
  'pointer-events-none inline-block transform rounded-full bg-surface-base shadow ring-0 transition duration-100 ease-in-out',
2870
- this.size() === 'md'
2871
- ? 'h-3.5 w-3.5'
2872
- : this.size() === 'sm'
2873
- ? 'h-3 w-3'
2874
- : 'h-2.5 w-2.5',
2875
- this.size() === 'md'
2876
- ? this.valueModel() ? 'translate-x-3 rtl:-translate-x-3' : 'translate-x-0'
2877
- : this.size() === 'sm'
2878
- ? this.valueModel() ? 'translate-x-2.5 rtl:-translate-x-2.5' : 'translate-x-0'
2879
- : this.valueModel() ? 'translate-x-2.5 rtl:-translate-x-2.5' : 'translate-x-0',
3062
+ getCircleSize(),
3063
+ getTranslate(),
2880
3064
  ].join(' ');
2881
3065
  }, /* @ts-ignore */
2882
3066
  ...(ngDevMode ? [{ debugName: "switchCircleClasses" }] : /* istanbul ignore next */ []));
@@ -2917,11 +3101,16 @@ class NeuralSwitchComponent {
2917
3101
  errorIndentClasses = computed(() => {
2918
3102
  if (this.controlPosition() !== 'start')
2919
3103
  return undefined;
2920
- return this.size() === 'md'
2921
- ? 'ps-[42px]'
2922
- : this.size() === 'sm'
2923
- ? 'ps-9'
2924
- : 'ps-8';
3104
+ switch (this.size()) {
3105
+ case 'xs': return 'ps-8';
3106
+ case 'sm': return 'ps-9';
3107
+ case 'md': return 'ps-[42px]';
3108
+ case 'lg': return 'ps-12';
3109
+ case 'xl': return 'ps-14';
3110
+ case '2xl': return 'ps-16';
3111
+ case '3xl': return 'ps-20';
3112
+ default: return 'ps-9';
3113
+ }
2925
3114
  }, /* @ts-ignore */
2926
3115
  ...(ngDevMode ? [{ debugName: "errorIndentClasses" }] : /* istanbul ignore next */ []));
2927
3116
  errorSpacingClass = computed(() => {
@@ -2935,17 +3124,20 @@ class NeuralSwitchComponent {
2935
3124
  if (!this.padded())
2936
3125
  return '';
2937
3126
  const hasDetail = this.rendersDescription() || this.hasError();
2938
- const sizeClass = hasDetail
2939
- ? this.size() === 'md'
2940
- ? 'px-3 py-2'
2941
- : this.size() === 'sm'
2942
- ? 'px-2 py-1.5'
2943
- : 'px-1.5 py-1.5'
2944
- : this.size() === 'md'
2945
- ? 'h-8 px-3'
2946
- : this.size() === 'sm'
2947
- ? 'h-7 px-2'
2948
- : 'h-6 px-1.5';
3127
+ const sizeVal = this.size();
3128
+ const getSizeClass = () => {
3129
+ switch (sizeVal) {
3130
+ case 'xs': return hasDetail ? 'px-1.5 py-1.5' : 'h-6 px-1.5';
3131
+ case 'sm': return hasDetail ? 'px-2 py-1.5' : 'h-7 px-2';
3132
+ case 'md': return hasDetail ? 'px-3 py-2' : 'h-8 px-3';
3133
+ case 'lg': return hasDetail ? 'px-4 py-2.5' : 'h-10 px-4';
3134
+ case 'xl': return hasDetail ? 'px-5 py-3' : 'h-12 px-5';
3135
+ case '2xl': return hasDetail ? 'px-6 py-4' : 'h-14 px-6';
3136
+ case '3xl': return hasDetail ? 'px-8 py-5' : 'h-16 px-8';
3137
+ default: return hasDetail ? 'px-2 py-1.5' : 'h-7 px-2';
3138
+ }
3139
+ };
3140
+ const sizeClass = getSizeClass();
2949
3141
  const classes = ['group rounded-4 transition-colors', sizeClass];
2950
3142
  if (!hasDetail)
2951
3143
  classes.push('justify-center');
@@ -3198,13 +3390,29 @@ class NeuralTextareaComponent {
3198
3390
  dataAttrs = this.labeling.dataAttrs;
3199
3391
  inputClasses = computed(() => {
3200
3392
  const sizeVal = this.size();
3201
- const sizeClass = sizeVal === 'sm' ? 'text-p-base rounded-4 min-h-9'
3202
- : sizeVal === 'md' ? 'text-p-lg rounded-4 min-h-10'
3203
- : sizeVal === 'lg' ? 'text-p-2xl rounded-5 min-h-11'
3204
- : 'text-p-3xl rounded-5 min-h-11';
3205
- const paddingClass = sizeVal === 'sm' ? 'py-1.5 px-2'
3206
- : sizeVal === 'md' ? 'py-1.5 px-2.5'
3207
- : 'py-1.5 px-3';
3393
+ const sizeMap = {
3394
+ xs: 'text-xs rounded-3 min-h-8',
3395
+ sm: 'text-sm rounded-4 min-h-9',
3396
+ md: 'text-base rounded-4 min-h-10',
3397
+ lg: 'text-lg rounded-5 min-h-11',
3398
+ xl: 'text-xl rounded-5 min-h-12',
3399
+ '2xl': 'text-2xl rounded-6 min-h-14',
3400
+ '3xl': 'text-3xl rounded-7 min-h-16'
3401
+ };
3402
+ const sizeClass = sizeMap[sizeVal] || sizeMap['sm'];
3403
+ const getPadding = () => {
3404
+ switch (sizeVal) {
3405
+ case 'xs': return 'py-1 px-1.5';
3406
+ case 'sm': return 'py-1.5 px-2';
3407
+ case 'md': return 'py-2 px-3';
3408
+ case 'lg': return 'py-2.5 px-4';
3409
+ case 'xl': return 'py-3 px-5';
3410
+ case '2xl': return 'py-4 px-6';
3411
+ case '3xl': return 'py-5 px-8';
3412
+ default: return 'py-1.5 px-2';
3413
+ }
3414
+ };
3415
+ const paddingClass = getPadding();
3208
3416
  const variantVal = this.disabled() ? 'disabled' : this.variant();
3209
3417
  let variantClass = '';
3210
3418
  if (variantVal === 'subtle') {
@@ -4784,16 +4992,18 @@ class NeuralComboboxComponent {
4784
4992
  triggerClasses = computed(() => {
4785
4993
  const s = this.size();
4786
4994
  const v = this.variant();
4787
- let base = 'rounded-6 text-left';
4995
+ let base = 'text-left';
4788
4996
  // Size
4789
- if (s === 'sm')
4790
- base += ' h-7 px-2 py-1 text-sm';
4791
- else if (s === 'md')
4792
- base += ' h-8 px-2.5 py-1.5 text-base';
4793
- else if (s === 'lg')
4794
- base += ' h-10 px-3 py-2 text-lg';
4795
- else if (s === 'xl')
4796
- base += ' h-12 px-4 py-3 text-xl';
4997
+ const sizeMap = {
4998
+ xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
4999
+ sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
5000
+ md: 'h-10 px-3 py-2 text-base rounded-4',
5001
+ lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
5002
+ xl: 'h-14 px-5 py-3 text-xl rounded-5',
5003
+ '2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
5004
+ '3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
5005
+ };
5006
+ base += ' ' + (sizeMap[s] || sizeMap['sm']);
4797
5007
  // Variant
4798
5008
  if (v === 'outline') {
4799
5009
  base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
@@ -5538,10 +5748,13 @@ class NeuralItemListRowComponent {
5538
5748
  ...(ngDevMode ? [{ debugName: "isEmphasized" }] : /* istanbul ignore next */ []));
5539
5749
  sizeClasses = computed(() => {
5540
5750
  switch (this.size()) {
5751
+ case 'xs': return 'min-h-6 px-1.5 py-1 text-sm';
5541
5752
  case 'sm': return 'min-h-7 px-2 py-1.5 text-base';
5542
5753
  case 'md': return 'min-h-8 px-2.5 py-1.5 text-base';
5543
5754
  case 'lg': return 'min-h-10 px-3 py-2 text-lg';
5544
- case 'xl': return 'min-h-10 px-3 py-2 text-2xl';
5755
+ case 'xl': return 'min-h-12 px-3.5 py-2.5 text-xl';
5756
+ case '2xl': return 'min-h-14 px-4 py-3 text-2xl';
5757
+ case '3xl': return 'min-h-16 px-5 py-4 text-3xl';
5545
5758
  default: return 'min-h-7 px-2 py-1.5 text-base';
5546
5759
  }
5547
5760
  }, /* @ts-ignore */
@@ -6237,16 +6450,18 @@ class NeuralMultiSelectComponent {
6237
6450
  triggerClasses = computed(() => {
6238
6451
  const s = this.size();
6239
6452
  const v = this.variant();
6240
- let base = 'rounded-6 text-left';
6453
+ let base = 'text-left';
6241
6454
  // Size
6242
- if (s === 'sm')
6243
- base += ' h-7 px-2 py-1 text-sm';
6244
- else if (s === 'md')
6245
- base += ' h-8 px-2.5 py-1.5 text-base';
6246
- else if (s === 'lg')
6247
- base += ' h-10 px-3 py-2 text-lg';
6248
- else if (s === 'xl')
6249
- base += ' h-12 px-4 py-3 text-xl';
6455
+ const sizeMap = {
6456
+ xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
6457
+ sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
6458
+ md: 'h-10 px-3 py-2 text-base rounded-4',
6459
+ lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
6460
+ xl: 'h-14 px-5 py-3 text-xl rounded-5',
6461
+ '2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
6462
+ '3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
6463
+ };
6464
+ base += ' ' + (sizeMap[s] || sizeMap['sm']);
6250
6465
  // Variant
6251
6466
  if (v === 'outline') {
6252
6467
  base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
@@ -6663,6 +6878,19 @@ class NeuralPasswordComponent {
6663
6878
  show = signal(false, /* @ts-ignore */
6664
6879
  ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
6665
6880
  textInputRef;
6881
+ iconClasses = computed(() => {
6882
+ const sizeMap = {
6883
+ xs: 'size-3.5',
6884
+ sm: 'size-4',
6885
+ md: 'size-5',
6886
+ lg: 'size-6',
6887
+ xl: 'size-7',
6888
+ '2xl': 'size-8',
6889
+ '3xl': 'size-10'
6890
+ };
6891
+ return sizeMap[this.size()] || 'size-4';
6892
+ }, /* @ts-ignore */
6893
+ ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
6666
6894
  toggleShow() {
6667
6895
  this.show.set(!this.show());
6668
6896
  }
@@ -6708,8 +6936,8 @@ class NeuralPasswordComponent {
6708
6936
  <div suffix class="flex items-center">
6709
6937
  <neural-tooltip [text]="show() ? 'Hide Password' : 'Show Password'" placement="top">
6710
6938
  <span
6711
- [class]="show() ? 'lucide-eye-off' : 'lucide-eye'"
6712
- class="size-4 cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
6939
+ [class]="(show() ? 'lucide-eye-off ' : 'lucide-eye ') + iconClasses()"
6940
+ class="cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
6713
6941
  (click)="toggleShow()"
6714
6942
  ></span>
6715
6943
  </neural-tooltip>
@@ -6755,8 +6983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
6755
6983
  <div suffix class="flex items-center">
6756
6984
  <neural-tooltip [text]="show() ? 'Hide Password' : 'Show Password'" placement="top">
6757
6985
  <span
6758
- [class]="show() ? 'lucide-eye-off' : 'lucide-eye'"
6759
- class="size-4 cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
6986
+ [class]="(show() ? 'lucide-eye-off ' : 'lucide-eye ') + iconClasses()"
6987
+ class="cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
6760
6988
  (click)="toggleShow()"
6761
6989
  ></span>
6762
6990
  </neural-tooltip>
@@ -6818,10 +7046,13 @@ class NeuralRatingComponent {
6818
7046
  ...(ngDevMode ? [{ debugName: "starArray" }] : /* istanbul ignore next */ []));
6819
7047
  sizeClass = computed(() => {
6820
7048
  return {
7049
+ xs: 'size-3',
6821
7050
  sm: 'size-4',
6822
7051
  md: 'size-5',
6823
7052
  lg: 'size-6',
6824
7053
  xl: 'size-7',
7054
+ '2xl': 'size-8',
7055
+ '3xl': 'size-10',
6825
7056
  }[this.size()] || 'size-5';
6826
7057
  }, /* @ts-ignore */
6827
7058
  ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
@@ -7195,16 +7426,18 @@ class NeuralSelectComponent {
7195
7426
  triggerClasses = computed(() => {
7196
7427
  const s = this.size();
7197
7428
  const v = this.variant();
7198
- let base = 'rounded-6 text-left';
7429
+ let base = 'text-left';
7199
7430
  // Size
7200
- if (s === 'sm')
7201
- base += ' h-7 px-2 py-1 text-sm';
7202
- else if (s === 'md')
7203
- base += ' h-8 px-2.5 py-1.5 text-base';
7204
- else if (s === 'lg')
7205
- base += ' h-10 px-3 py-2 text-lg';
7206
- else if (s === 'xl')
7207
- base += ' h-12 px-4 py-3 text-xl';
7431
+ const sizeMap = {
7432
+ xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
7433
+ sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
7434
+ md: 'h-10 px-3 py-2 text-base rounded-4',
7435
+ lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
7436
+ xl: 'h-14 px-5 py-3 text-xl rounded-5',
7437
+ '2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
7438
+ '3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
7439
+ };
7440
+ base += ' ' + (sizeMap[s] || sizeMap['sm']);
7208
7441
  // Variant
7209
7442
  if (v === 'outline') {
7210
7443
  base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
@@ -7532,15 +7765,25 @@ class NeuralTabComponent {
7532
7765
  const disabled = this.disabled();
7533
7766
  const variant = this.root?.variant() || 'underline';
7534
7767
  let base = 'relative flex items-center justify-center whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4';
7768
+ const sizeMap = {
7769
+ xs: 'px-2 py-1 text-xs',
7770
+ sm: 'px-3 py-1.5 text-sm',
7771
+ md: 'px-4 py-2 text-base',
7772
+ lg: 'px-5 py-2.5 text-lg',
7773
+ xl: 'px-6 py-3 text-xl',
7774
+ '2xl': 'px-8 py-4 text-2xl',
7775
+ '3xl': 'px-10 py-5 text-3xl',
7776
+ };
7777
+ const sizeClasses = sizeMap[this.root?.size() || 'sm'] || sizeMap['sm'];
7535
7778
  if (variant === 'underline') {
7536
- base += ' px-3 py-2 text-sm font-medium';
7779
+ base += ' font-medium ' + sizeClasses;
7537
7780
  if (active)
7538
7781
  base += ' text-ink-gray-9 border-b-2 border-outline-gray-8';
7539
7782
  else
7540
7783
  base += ' text-ink-gray-5 hover:text-ink-gray-8 border-b-2 border-transparent hover:border-outline-gray-3';
7541
7784
  }
7542
7785
  else if (variant === 'subtle') {
7543
- base += ' px-3 py-1.5 text-sm font-medium rounded-4';
7786
+ base += ' font-medium rounded-4 ' + sizeClasses;
7544
7787
  if (active)
7545
7788
  base += ' text-ink-gray-9 bg-surface-gray-2 shadow-sm';
7546
7789
  else
@@ -10008,10 +10251,13 @@ class NeuralCodeEditorComponent {
10008
10251
  if (!this.cmView)
10009
10252
  return [];
10010
10253
  const sizes = {
10254
+ xs: { fontSize: '11px', minHeight: '3rem' },
10011
10255
  sm: { fontSize: '12px', minHeight: '3.5rem' },
10012
10256
  md: { fontSize: '13px', minHeight: '4.5rem' },
10013
10257
  lg: { fontSize: '14px', minHeight: '6rem' },
10014
10258
  xl: { fontSize: '16px', minHeight: '7.5rem' },
10259
+ '2xl': { fontSize: '18px', minHeight: '9rem' },
10260
+ '3xl': { fontSize: '20px', minHeight: '11rem' },
10015
10261
  };
10016
10262
  const cfg = sizes[s ?? 'md'] ?? sizes['md'];
10017
10263
  return [this.cmView.EditorView.theme({
@@ -11035,16 +11281,18 @@ class NeuralDatePickerComponent {
11035
11281
  inputClasses = computed(() => {
11036
11282
  const s = this.size();
11037
11283
  const v = this.variant();
11038
- let base = 'rounded-6 text-left';
11284
+ let base = 'text-left';
11039
11285
  // Size
11040
- if (s === 'sm')
11041
- base += ' h-7 px-2 py-1 text-sm';
11042
- else if (s === 'md')
11043
- base += ' h-8 px-2.5 py-1.5 text-base';
11044
- else if (s === 'lg')
11045
- base += ' h-10 px-3 py-2 text-lg';
11046
- else if (s === 'xl')
11047
- base += ' h-12 px-4 py-3 text-xl';
11286
+ const sizeMap = {
11287
+ xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
11288
+ sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
11289
+ md: 'h-10 px-3 py-2 text-base rounded-4',
11290
+ lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
11291
+ xl: 'h-14 px-5 py-3 text-xl rounded-5',
11292
+ '2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
11293
+ '3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
11294
+ };
11295
+ base += ' ' + (sizeMap[s] || sizeMap['sm']);
11048
11296
  // Variant
11049
11297
  if (v === 'outline') {
11050
11298
  base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1 focus-visible:bg-surface-base';
@@ -12283,6 +12531,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12283
12531
  }]
12284
12532
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
12285
12533
 
12534
+ class NeuralNotificationCenterComponent {
12535
+ open = input(false, /* @ts-ignore */
12536
+ ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
12537
+ onClose = new EventEmitter();
12538
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12539
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
12540
+ <div
12541
+ class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
12542
+ [class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
12543
+ >
12544
+ <div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
12545
+ <ng-content select="[header-tabs]"></ng-content>
12546
+ <div class="flex items-center gap-2 pb-2">
12547
+ <ng-content select="[header-actions]"></ng-content>
12548
+ <button
12549
+ (click)="onClose.emit()"
12550
+ class="flex items-center justify-center rounded-4 p-1 text-ink-gray-5 hover:bg-surface-gray-2 hover:text-ink-gray-7 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
12551
+ >
12552
+ <i class="lucide-x size-4.5"></i>
12553
+ </button>
12554
+ </div>
12555
+ </div>
12556
+
12557
+ <div class="flex-1 overflow-y-auto bg-surface-base p-4">
12558
+ <h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
12559
+ <ng-content></ng-content>
12560
+ </div>
12561
+ </div>
12562
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
12563
+ }
12564
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, decorators: [{
12565
+ type: Component,
12566
+ args: [{
12567
+ selector: 'neural-notification-center',
12568
+ standalone: true,
12569
+ imports: [CommonModule],
12570
+ template: `
12571
+ <div
12572
+ class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
12573
+ [class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
12574
+ >
12575
+ <div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
12576
+ <ng-content select="[header-tabs]"></ng-content>
12577
+ <div class="flex items-center gap-2 pb-2">
12578
+ <ng-content select="[header-actions]"></ng-content>
12579
+ <button
12580
+ (click)="onClose.emit()"
12581
+ class="flex items-center justify-center rounded-4 p-1 text-ink-gray-5 hover:bg-surface-gray-2 hover:text-ink-gray-7 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
12582
+ >
12583
+ <i class="lucide-x size-4.5"></i>
12584
+ </button>
12585
+ </div>
12586
+ </div>
12587
+
12588
+ <div class="flex-1 overflow-y-auto bg-surface-base p-4">
12589
+ <h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
12590
+ <ng-content></ng-content>
12591
+ </div>
12592
+ </div>
12593
+ `
12594
+ }]
12595
+ }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], onClose: [{
12596
+ type: Output
12597
+ }] } });
12598
+
12286
12599
  class NeuralRailComponent {
12287
12600
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12288
12601
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralRailComponent, isStandalone: true, selector: "neural-rail", ngImport: i0, template: `
@@ -13766,5 +14079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13766
14079
  * Generated bundle index. Do not edit.
13767
14080
  */
13768
14081
 
13769
- export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
14082
+ export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
13770
14083
  //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map