@revikornmann/muka-ui 0.17.0 → 0.18.0

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.
Files changed (105) hide show
  1. package/dist/cjs/components/ActionSheet/ActionSheet.js +1 -1
  2. package/dist/cjs/components/Breadcrumb/Breadcrumb.css +11 -3
  3. package/dist/cjs/components/Breadcrumb/Breadcrumb.js +19 -1
  4. package/dist/cjs/components/Breadcrumb/Breadcrumb.js.map +1 -1
  5. package/dist/cjs/components/ContextSelect/ContextSelect.css +117 -0
  6. package/dist/cjs/components/ContextSelect/ContextSelect.js +49 -0
  7. package/dist/cjs/components/ContextSelect/ContextSelect.js.map +1 -0
  8. package/dist/cjs/components/ContextSelect/index.js +11 -0
  9. package/dist/cjs/components/ContextSelect/index.js.map +1 -0
  10. package/dist/cjs/components/Icon/custom/ArrowDropUpDownIcon.js +11 -0
  11. package/dist/cjs/components/Icon/custom/ArrowDropUpDownIcon.js.map +1 -0
  12. package/dist/cjs/components/Icon/iconRegistry.js +6 -0
  13. package/dist/cjs/components/Icon/iconRegistry.js.map +1 -1
  14. package/dist/cjs/components/Menu/Menu.css +112 -2
  15. package/dist/cjs/components/Menu/Menu.js +171 -39
  16. package/dist/cjs/components/Menu/Menu.js.map +1 -1
  17. package/dist/cjs/components/Menu/index.js +5 -1
  18. package/dist/cjs/components/Menu/index.js.map +1 -1
  19. package/dist/cjs/components/Scrollbar/Scrollbar.css +123 -0
  20. package/dist/cjs/components/Scrollbar/Scrollbar.js +118 -0
  21. package/dist/cjs/components/Scrollbar/Scrollbar.js.map +1 -0
  22. package/dist/cjs/components/Scrollbar/index.js +11 -0
  23. package/dist/cjs/components/Scrollbar/index.js.map +1 -0
  24. package/dist/cjs/components/index.js +10 -15
  25. package/dist/cjs/components/index.js.map +1 -1
  26. package/dist/esm/components/ActionSheet/ActionSheet.js +1 -1
  27. package/dist/esm/components/Breadcrumb/Breadcrumb.css +11 -3
  28. package/dist/esm/components/Breadcrumb/Breadcrumb.js +19 -1
  29. package/dist/esm/components/Breadcrumb/Breadcrumb.js.map +1 -1
  30. package/dist/esm/components/ContextSelect/ContextSelect.css +117 -0
  31. package/dist/esm/components/ContextSelect/ContextSelect.js +45 -0
  32. package/dist/esm/components/ContextSelect/ContextSelect.js.map +1 -0
  33. package/dist/esm/components/ContextSelect/index.js +3 -0
  34. package/dist/esm/components/ContextSelect/index.js.map +1 -0
  35. package/dist/esm/components/Icon/custom/ArrowDropUpDownIcon.js +7 -0
  36. package/dist/esm/components/Icon/custom/ArrowDropUpDownIcon.js.map +1 -0
  37. package/dist/esm/components/Icon/iconRegistry.js +6 -0
  38. package/dist/esm/components/Icon/iconRegistry.js.map +1 -1
  39. package/dist/esm/components/Menu/Menu.css +112 -2
  40. package/dist/esm/components/Menu/Menu.js +170 -40
  41. package/dist/esm/components/Menu/Menu.js.map +1 -1
  42. package/dist/esm/components/Menu/index.js +1 -1
  43. package/dist/esm/components/Menu/index.js.map +1 -1
  44. package/dist/esm/components/Scrollbar/Scrollbar.css +123 -0
  45. package/dist/esm/components/Scrollbar/Scrollbar.js +114 -0
  46. package/dist/esm/components/Scrollbar/Scrollbar.js.map +1 -0
  47. package/dist/esm/components/Scrollbar/index.js +3 -0
  48. package/dist/esm/components/Scrollbar/index.js.map +1 -0
  49. package/dist/esm/components/index.js +3 -2
  50. package/dist/esm/components/index.js.map +1 -1
  51. package/dist/styles/components/Breadcrumb.css +11 -3
  52. package/dist/styles/components/ContextSelect.css +117 -0
  53. package/dist/styles/components/Menu.css +112 -2
  54. package/dist/styles/components/Scrollbar.css +123 -0
  55. package/dist/styles/index.css +373 -7
  56. package/dist/styles/muka-dark.css +373 -7
  57. package/dist/styles/muka-light.css +373 -7
  58. package/dist/styles/tokens-bouwplan-dark.css +4 -2
  59. package/dist/styles/tokens-bouwplan-light.css +4 -2
  60. package/dist/styles/tokens-fscl-dark.css +4 -2
  61. package/dist/styles/tokens-fscl-light.css +4 -2
  62. package/dist/styles/tokens-grip-dark.css +4 -2
  63. package/dist/styles/tokens-grip-light.css +4 -2
  64. package/dist/styles/tokens-muka-dark.css +4 -2
  65. package/dist/styles/tokens-muka-light.css +4 -2
  66. package/dist/styles/tokens-wireframe-dark.css +4 -2
  67. package/dist/styles/tokens-wireframe-light.css +4 -2
  68. package/dist/styles/wireframe-dark.css +373 -7
  69. package/dist/styles/wireframe-light.css +373 -7
  70. package/dist/types/components/ActionSheet/ActionSheet.d.ts +1 -1
  71. package/dist/types/components/Breadcrumb/Breadcrumb.d.ts +27 -3
  72. package/dist/types/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  73. package/dist/types/components/ContextSelect/ContextSelect.d.ts +62 -0
  74. package/dist/types/components/ContextSelect/ContextSelect.d.ts.map +1 -0
  75. package/dist/types/components/ContextSelect/index.d.ts +3 -0
  76. package/dist/types/components/ContextSelect/index.d.ts.map +1 -0
  77. package/dist/types/components/DataTable/DataTable.d.ts +1 -1
  78. package/dist/types/components/Icon/custom/ArrowDropUpDownIcon.d.ts +9 -0
  79. package/dist/types/components/Icon/custom/ArrowDropUpDownIcon.d.ts.map +1 -0
  80. package/dist/types/components/Icon/iconRegistry.d.ts.map +1 -1
  81. package/dist/types/components/Menu/Menu.d.ts +58 -28
  82. package/dist/types/components/Menu/Menu.d.ts.map +1 -1
  83. package/dist/types/components/Menu/index.d.ts +2 -2
  84. package/dist/types/components/Menu/index.d.ts.map +1 -1
  85. package/dist/types/components/Scrollbar/Scrollbar.d.ts +19 -0
  86. package/dist/types/components/Scrollbar/Scrollbar.d.ts.map +1 -0
  87. package/dist/types/components/Scrollbar/index.d.ts +3 -0
  88. package/dist/types/components/Scrollbar/index.d.ts.map +1 -0
  89. package/dist/types/components/index.d.ts +4 -4
  90. package/dist/types/components/index.d.ts.map +1 -1
  91. package/package.json +1 -1
  92. package/tokens/README.md +1 -1
  93. package/tokens/t4-components/menu.json +12 -2
  94. package/dist/cjs/components/ContextMenu/ContextMenu.js +0 -186
  95. package/dist/cjs/components/ContextMenu/ContextMenu.js.map +0 -1
  96. package/dist/cjs/components/ContextMenu/index.js +0 -17
  97. package/dist/cjs/components/ContextMenu/index.js.map +0 -1
  98. package/dist/esm/components/ContextMenu/ContextMenu.js +0 -145
  99. package/dist/esm/components/ContextMenu/ContextMenu.js.map +0 -1
  100. package/dist/esm/components/ContextMenu/index.js +0 -2
  101. package/dist/esm/components/ContextMenu/index.js.map +0 -1
  102. package/dist/types/components/ContextMenu/ContextMenu.d.ts +0 -188
  103. package/dist/types/components/ContextMenu/ContextMenu.d.ts.map +0 -1
  104. package/dist/types/components/ContextMenu/index.d.ts +0 -3
  105. package/dist/types/components/ContextMenu/index.d.ts.map +0 -1
@@ -1896,15 +1896,17 @@ body {
1896
1896
  --menu-content-padding: 0.25rem;
1897
1897
  --menu-content-min-width: 12rem;
1898
1898
  --menu-content-max-height: 20rem;
1899
+ --menu-content-scroll-height: 20.625rem;
1899
1900
  --menu-item-color-default-background: transparent;
1900
1901
  --menu-item-color-default-foreground: #202020;
1901
1902
  --menu-item-color-default-icon: #838383;
1902
- --menu-item-color-hover-background: rgba(0, 0, 0, 0.024);
1903
+ --menu-item-color-hover-background: #e8e8e8;
1903
1904
  --menu-item-color-hover-foreground: #202020;
1904
1905
  --menu-item-color-hover-icon: #202020;
1905
- --menu-item-color-focus-background: #5eb0ef;
1906
+ --menu-item-color-focus-background: #e8e8e8;
1906
1907
  --menu-item-color-focus-foreground: #202020;
1907
1908
  --menu-item-color-focus-icon: #202020;
1909
+ --menu-item-color-selected-background: #e0e0e0;
1908
1910
  --menu-item-color-disabled-background: transparent;
1909
1911
  --menu-item-color-disabled-foreground: #bbbbbb;
1910
1912
  --menu-item-color-disabled-icon: #bbbbbb;
@@ -5629,6 +5631,132 @@ body {
5629
5631
  }
5630
5632
 
5631
5633
 
5634
+ /* Scrollbar */
5635
+ /* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
5636
+
5637
+ .muka-scrollbar {
5638
+ display: flex;
5639
+ flex-shrink: 0;
5640
+ border-left: var(--border-width-regular) solid var(--color-border-default);
5641
+ background-color: var(--color-surface-level3);
5642
+ user-select: none;
5643
+ }
5644
+
5645
+ .muka-scrollbar--vertical {
5646
+ flex-direction: column;
5647
+ width: var(--size-2xl, 32px);
5648
+ align-self: stretch;
5649
+ }
5650
+
5651
+ .muka-scrollbar--horizontal {
5652
+ flex-direction: row;
5653
+ height: var(--size-2xl, 32px);
5654
+ width: 100%;
5655
+ border-left: none;
5656
+ border-top: var(--border-width-regular) solid var(--color-border-default);
5657
+ }
5658
+
5659
+ .muka-scrollbar__button {
5660
+ display: flex;
5661
+ align-items: center;
5662
+ justify-content: center;
5663
+ flex-shrink: 0;
5664
+ width: 100%;
5665
+ height: var(--size-2xl, 32px);
5666
+ padding: 0;
5667
+ border: none;
5668
+ background-color: var(--button-color-tertiary-background-default, var(--color-surface-level3));
5669
+ color: var(--color-text-default-default);
5670
+ cursor: pointer;
5671
+ }
5672
+
5673
+ .muka-scrollbar--horizontal .muka-scrollbar__button {
5674
+ width: var(--size-2xl, 32px);
5675
+ height: 100%;
5676
+ }
5677
+
5678
+ .muka-scrollbar__button:hover {
5679
+ background-color: var(--color-surface-hover);
5680
+ }
5681
+
5682
+ .muka-scrollbar__divider {
5683
+ flex-shrink: 0;
5684
+ width: 100%;
5685
+ height: 1px;
5686
+ background-color: var(--color-border-default);
5687
+ }
5688
+
5689
+ .muka-scrollbar--horizontal .muka-scrollbar__divider {
5690
+ width: 1px;
5691
+ height: 100%;
5692
+ }
5693
+
5694
+ .muka-scrollbar__track {
5695
+ position: relative;
5696
+ display: flex;
5697
+ flex-direction: column;
5698
+ flex: 1 1 auto;
5699
+ min-height: 0;
5700
+ width: 100%;
5701
+ }
5702
+
5703
+ .muka-scrollbar--horizontal .muka-scrollbar__track {
5704
+ flex-direction: row;
5705
+ min-width: 0;
5706
+ height: 100%;
5707
+ }
5708
+
5709
+ .muka-scrollbar__thumb {
5710
+ position: absolute;
5711
+ left: 50%;
5712
+ top: 0;
5713
+ z-index: 1;
5714
+ display: flex;
5715
+ align-items: center;
5716
+ justify-content: center;
5717
+ width: 14px;
5718
+ margin-left: -7px;
5719
+ cursor: grab;
5720
+ touch-action: none;
5721
+ }
5722
+
5723
+ .muka-scrollbar--horizontal .muka-scrollbar__thumb {
5724
+ left: 0;
5725
+ top: 50%;
5726
+ width: auto;
5727
+ height: 14px;
5728
+ margin-left: 0;
5729
+ margin-top: -7px;
5730
+ }
5731
+
5732
+ .muka-scrollbar__thumb:active {
5733
+ cursor: grabbing;
5734
+ }
5735
+
5736
+ .muka-scrollbar__grip {
5737
+ display: flex;
5738
+ flex-direction: column;
5739
+ gap: 2px;
5740
+ width: 14px;
5741
+ }
5742
+
5743
+ .muka-scrollbar__grip::before,
5744
+ .muka-scrollbar__grip::after {
5745
+ content: '';
5746
+ display: block;
5747
+ width: 100%;
5748
+ height: 2px;
5749
+ border-radius: var(--border-radius-md);
5750
+ background-color: var(--color-text-subtle-default);
5751
+ }
5752
+
5753
+ .muka-scrollbar__spacer {
5754
+ flex: 1 1 auto;
5755
+ min-height: 0;
5756
+ background-color: var(--color-surface-level2);
5757
+ }
5758
+
5759
+
5632
5760
  /* RecordingBar */
5633
5761
  /* RecordingBar Component Styles */
5634
5762
 
@@ -7427,14 +7555,16 @@ body {
7427
7555
  /* ─── Content Container ──────────────────────────────────────────────────── */
7428
7556
 
7429
7557
  .muka-menu__content {
7558
+ display: flex;
7559
+ flex-direction: column;
7430
7560
  min-width: var(--menu-content-min-width);
7431
7561
  max-height: var(--menu-content-max-height);
7432
- overflow-y: auto;
7562
+ overflow: hidden;
7433
7563
  background-color: var(--menu-content-color-background);
7434
7564
  border: var(--menu-content-border-width) solid var(--menu-content-color-border);
7435
7565
  border-radius: var(--menu-content-border-radius);
7436
7566
  box-shadow: var(--menu-content-shadow);
7437
- padding: var(--menu-content-padding);
7567
+ padding: 0;
7438
7568
  z-index: 50;
7439
7569
 
7440
7570
  /* Animation */
@@ -7442,6 +7572,97 @@ body {
7442
7572
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
7443
7573
  }
7444
7574
 
7575
+ .muka-menu__body {
7576
+ display: flex;
7577
+ flex: 1 1 auto;
7578
+ min-height: 0;
7579
+ align-items: stretch;
7580
+ width: 100%;
7581
+ }
7582
+
7583
+ .muka-menu__viewport {
7584
+ flex: 1 1 auto;
7585
+ min-width: 0;
7586
+ min-height: 0;
7587
+ overflow-y: auto;
7588
+ padding: var(--menu-content-padding);
7589
+ }
7590
+
7591
+ .muka-menu__content--scrollbar .muka-menu__viewport {
7592
+ /* Custom scrollbar owns the chrome; hide native track */
7593
+ scrollbar-width: none;
7594
+ }
7595
+
7596
+ .muka-menu__content--scrollbar .muka-menu__viewport::-webkit-scrollbar {
7597
+ display: none;
7598
+ }
7599
+
7600
+ /* ─── Search header ──────────────────────────────────────────────────────── */
7601
+
7602
+ .muka-menu__search {
7603
+ display: flex;
7604
+ align-items: center;
7605
+ gap: var(--spacing-2);
7606
+ flex-shrink: 0;
7607
+ height: var(--size-3xl, 48px);
7608
+ padding: 0 var(--spacing-4);
7609
+ border-bottom: var(--border-width-regular) solid var(--color-border-default);
7610
+ }
7611
+
7612
+ .muka-menu__search-icon {
7613
+ display: flex;
7614
+ flex-shrink: 0;
7615
+ color: var(--color-text-subtle-default);
7616
+ }
7617
+
7618
+ .muka-menu__search-input {
7619
+ flex: 1 1 auto;
7620
+ min-width: 0;
7621
+ border: none;
7622
+ outline: none;
7623
+ background: transparent;
7624
+ font-family: var(--text-label-md-regular-font-family);
7625
+ font-size: var(--text-label-md-regular-font-size);
7626
+ font-weight: var(--text-label-md-regular-font-weight);
7627
+ line-height: var(--text-label-md-regular-line-height);
7628
+ color: var(--color-text-default-default);
7629
+ }
7630
+
7631
+ .muka-menu__search-input::placeholder {
7632
+ color: var(--color-text-subtle-default);
7633
+ }
7634
+
7635
+ .muka-menu__search-input::-webkit-search-cancel-button,
7636
+ .muka-menu__search-input::-webkit-search-decoration {
7637
+ -webkit-appearance: none;
7638
+ appearance: none;
7639
+ }
7640
+
7641
+ .muka-menu__search-clear {
7642
+ display: flex;
7643
+ align-items: center;
7644
+ justify-content: center;
7645
+ flex-shrink: 0;
7646
+ padding: 0;
7647
+ border: none;
7648
+ background: transparent;
7649
+ color: var(--color-text-subtle-default);
7650
+ cursor: pointer;
7651
+ }
7652
+
7653
+ .muka-menu__search-clear:hover {
7654
+ color: var(--color-text-default-default);
7655
+ }
7656
+
7657
+ .muka-menu__match {
7658
+ font-weight: var(--font-weight-bold, 700);
7659
+ }
7660
+
7661
+ .muka-menu__content--scrollbar {
7662
+ height: var(--menu-content-scroll-height, 20.625rem);
7663
+ max-height: var(--menu-content-scroll-height, 20.625rem);
7664
+ }
7665
+
7445
7666
  .muka-menu__content[data-state='open'] {
7446
7667
  animation-name: muka-menu-fade-in;
7447
7668
  }
@@ -7589,6 +7810,23 @@ body {
7589
7810
  padding-left: var(--menu-item-padding-x);
7590
7811
  }
7591
7812
 
7813
+ .muka-menu__item--radio-check {
7814
+ position: relative;
7815
+ padding-right: calc(var(--menu-item-padding-x) + var(--menu-checkbox-indicator-size) + var(--menu-item-gap));
7816
+ }
7817
+
7818
+ .muka-menu__item--radio-check[data-state='checked'] {
7819
+ background-color: var(--menu-item-color-selected-background);
7820
+ }
7821
+
7822
+ .muka-menu__item-indicator--trailing {
7823
+ position: absolute;
7824
+ right: var(--menu-item-padding-x);
7825
+ top: 50%;
7826
+ transform: translateY(-50%);
7827
+ color: var(--menu-checkbox-indicator-color);
7828
+ }
7829
+
7592
7830
  .muka-menu__radio-dot {
7593
7831
  width: 8px;
7594
7832
  height: 8px;
@@ -10310,6 +10548,126 @@ li.muka-listitem {
10310
10548
  }
10311
10549
 
10312
10550
 
10551
+ /* ContextSelect */
10552
+ /* ContextSelect — split label (navigate) + chevron menu button (switch)
10553
+ *
10554
+ * Figma (5623:8651 / 5631:9344):
10555
+ * - Root: gap spacing/1 (4px) between label group and chevron
10556
+ * - Label group: gap spacing/2 (8px) icon↔label, pl spacing/2 (8px)
10557
+ * - Icons: 16px (icon.size.xs)
10558
+ */
10559
+
10560
+ .muka-context-select {
10561
+ display: inline-flex;
10562
+ position: relative;
10563
+ align-items: flex-start;
10564
+ gap: var(--spacing-1, 4px);
10565
+ }
10566
+
10567
+ .muka-context-select__label-group {
10568
+ display: inline-flex;
10569
+ align-items: center;
10570
+ gap: var(--spacing-2, 8px);
10571
+ height: var(--size-2xl, 32px);
10572
+ padding-left: var(--spacing-2, 8px);
10573
+ padding-right: 0;
10574
+ border-radius: var(--border-radius-lg);
10575
+ color: var(--color-text-default-default);
10576
+ text-decoration: none;
10577
+ border: none;
10578
+ background: transparent;
10579
+ font: inherit;
10580
+ cursor: default;
10581
+ }
10582
+
10583
+ .muka-context-select__label-group--link,
10584
+ .muka-context-select__label-group--button {
10585
+ cursor: pointer;
10586
+ }
10587
+
10588
+ .muka-context-select__label-group--link:hover .muka-context-select__label,
10589
+ .muka-context-select__label-group--button:hover .muka-context-select__label,
10590
+ .muka-context-select__label-group--link:focus-visible .muka-context-select__label,
10591
+ .muka-context-select__label-group--button:focus-visible .muka-context-select__label {
10592
+ text-decoration: underline;
10593
+ text-underline-offset: 2px;
10594
+ }
10595
+
10596
+ .muka-context-select__label-group--link:focus-visible,
10597
+ .muka-context-select__label-group--button:focus-visible {
10598
+ outline: 2px solid var(--color-border-focus);
10599
+ outline-offset: 2px;
10600
+ }
10601
+
10602
+ .muka-context-select__label-group--button:disabled,
10603
+ .muka-context-select__label-group--link[aria-disabled='true'] {
10604
+ cursor: not-allowed;
10605
+ opacity: 0.5;
10606
+ pointer-events: none;
10607
+ }
10608
+
10609
+ .muka-context-select__icon {
10610
+ display: inline-flex;
10611
+ flex-shrink: 0;
10612
+ align-items: center;
10613
+ justify-content: center;
10614
+ width: var(--icon-size-xs, 16px);
10615
+ height: var(--icon-size-xs, 16px);
10616
+ color: var(--color-text-default-default);
10617
+ }
10618
+
10619
+ .muka-context-select__icon .muka-icon {
10620
+ width: var(--icon-size-xs, 16px);
10621
+ height: var(--icon-size-xs, 16px);
10622
+ }
10623
+
10624
+ .muka-context-select__label {
10625
+ font-family: var(--text-label-sm-regular-font-family);
10626
+ font-size: var(--text-label-sm-regular-font-size);
10627
+ font-weight: var(--text-label-sm-regular-font-weight);
10628
+ line-height: var(--text-label-sm-regular-line-height);
10629
+ white-space: nowrap;
10630
+ }
10631
+
10632
+ .muka-context-select__menu-button {
10633
+ position: relative;
10634
+ display: inline-flex;
10635
+ flex-shrink: 0;
10636
+ align-items: center;
10637
+ justify-content: center;
10638
+ width: var(--size-2xl, 32px);
10639
+ height: var(--size-2xl, 32px);
10640
+ margin: 0;
10641
+ padding: 0;
10642
+ border: none;
10643
+ border-radius: var(--border-radius-lg);
10644
+ background: transparent;
10645
+ color: var(--color-text-default-default);
10646
+ cursor: pointer;
10647
+ }
10648
+
10649
+ .muka-context-select__menu-button:hover,
10650
+ .muka-context-select__menu-button:focus-visible,
10651
+ .muka-context-select__menu-button[data-state='open'],
10652
+ .muka-context-select--expanded .muka-context-select__menu-button {
10653
+ border: var(--border-width-regular) solid var(--color-border-default);
10654
+ }
10655
+
10656
+ .muka-context-select__menu-button:focus-visible {
10657
+ outline: 2px solid var(--color-border-focus);
10658
+ outline-offset: 2px;
10659
+ }
10660
+
10661
+ .muka-context-select__menu-button:disabled {
10662
+ cursor: not-allowed;
10663
+ opacity: 0.5;
10664
+ }
10665
+
10666
+ .muka-context-select__content {
10667
+ min-width: 17.5rem;
10668
+ }
10669
+
10670
+
10313
10671
  /* Container */
10314
10672
  /* Container Component - Layout tokens (container.max-width, container.gap) */
10315
10673
 
@@ -12440,9 +12798,17 @@ button.muka-chat-photo-grid__tile:focus-visible {
12440
12798
  user-select: none;
12441
12799
  }
12442
12800
 
12443
- /* Ellipsis */
12444
- .muka-breadcrumb__ellipsis {
12445
- color: var(--color-text-subtle-default);
12801
+ .muka-breadcrumb__item--context {
12802
+ gap: 0;
12803
+ }
12804
+
12805
+ .muka-breadcrumb__list:has(.muka-breadcrumb__item--context) {
12806
+ gap: 0;
12807
+ }
12808
+
12809
+ .muka-breadcrumb__item--context .muka-breadcrumb__separator {
12810
+ margin: 0;
12811
+ padding-inline: var(--spacing-1, 4px);
12446
12812
  }
12447
12813
 
12448
12814
  /* Size variants */
@@ -42,7 +42,7 @@ export interface ActionSheetProps {
42
42
  /**
43
43
  * ActionSheet — iOS-style action menu sliding up from the bottom.
44
44
  *
45
- * Built on `Sheet`. Use as the touch replacement for `ContextMenu` and as the
45
+ * Built on `Sheet`. Use as the touch replacement for `Menu` with `trigger="context"` and as the
46
46
  * primary pattern for "options" menus on motorcycles, service records, etc.
47
47
  *
48
48
  * Each action's `onClick` runs, then the sheet auto-closes.
@@ -1,14 +1,31 @@
1
1
  import React from 'react';
2
+ import { type ContextSelectOption } from '../ContextSelect';
2
3
  import './Breadcrumb.css';
3
4
  export interface BreadcrumbItem {
4
- /** Display label */
5
+ /** Display label (also used as ContextSelect label when `contextSelect` is set) */
5
6
  label: string;
6
- /** Link URL */
7
+ /** Link URL for plain crumbs, or ContextSelect label navigation */
7
8
  href?: string;
8
- /** Click handler */
9
+ /** Click handler for plain crumbs, or ContextSelect label navigation */
9
10
  onClick?: () => void;
10
11
  /** Optional icon */
11
12
  icon?: React.ReactNode;
13
+ /**
14
+ * When set, this segment renders a ContextSelect:
15
+ * label navigates (href/onClick), chevron switches context via the menu.
16
+ */
17
+ contextSelect?: {
18
+ options: ReadonlyArray<ContextSelectOption>;
19
+ value?: string;
20
+ onValueChange?: (value: string) => void;
21
+ /** Optional leading icon (falls back to `item.icon`) */
22
+ icon?: React.ReactNode;
23
+ searchable?: boolean;
24
+ searchPlaceholder?: string;
25
+ scrollbar?: boolean;
26
+ disabled?: boolean;
27
+ 'aria-label'?: string;
28
+ };
12
29
  }
13
30
  export interface BreadcrumbProps {
14
31
  /** Breadcrumb items */
@@ -22,6 +39,13 @@ export interface BreadcrumbProps {
22
39
  /** Additional CSS classes */
23
40
  className?: string;
24
41
  }
42
+ export type { ContextSelectOption };
43
+ /**
44
+ * Breadcrumb — hierarchical navigation.
45
+ *
46
+ * Supports plain link/button crumbs and **contextual** segments via
47
+ * `item.contextSelect` (ContextSelect: label → overview, chevron → switch).
48
+ */
25
49
  export declare const Breadcrumb: React.FC<BreadcrumbProps>;
26
50
  export default Breadcrumb;
27
51
  //# sourceMappingURL=Breadcrumb.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyEhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACxC,wDAAwD;QACxD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgGhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -0,0 +1,62 @@
1
+ import React from 'react';
2
+ import './ContextSelect.css';
3
+ export interface ContextSelectOption {
4
+ value: string;
5
+ label: string;
6
+ disabled?: boolean;
7
+ }
8
+ export interface ContextSelectProps {
9
+ /** Available contexts */
10
+ options: ReadonlyArray<ContextSelectOption>;
11
+ /** Controlled selected value */
12
+ value?: string;
13
+ /** Called when selection changes (instant context switch) */
14
+ onValueChange?: (value: string) => void;
15
+ /**
16
+ * Trigger label. Defaults to the selected option's label, or the first option,
17
+ * or "Context".
18
+ */
19
+ label?: string;
20
+ /**
21
+ * Optional leading icon before the label (16px / icon.size.xs).
22
+ * Omit to render label-only. Spaced 8px (spacing/2) from the label.
23
+ */
24
+ icon?: React.ReactNode;
25
+ /**
26
+ * Navigate when the label is clicked (context overview).
27
+ * Independent from the chevron menu trigger.
28
+ */
29
+ href?: string;
30
+ /** Called when the label is activated (alternative to `href`) */
31
+ onLabelClick?: () => void;
32
+ /** Enable sticky search in the menu. Default: true */
33
+ searchable?: boolean;
34
+ /** Search placeholder. Default: 'Search' */
35
+ searchPlaceholder?: string;
36
+ /** Show custom scrollbar when the list overflows. Default: false */
37
+ scrollbar?: boolean;
38
+ /** Controlled open state */
39
+ open?: boolean;
40
+ /** Called when open state changes */
41
+ onOpenChange?: (open: boolean) => void;
42
+ /** Default open state */
43
+ defaultOpen?: boolean;
44
+ /** Disable the control */
45
+ disabled?: boolean;
46
+ /** Accessible name for the chevron menu button */
47
+ 'aria-label'?: string;
48
+ /** Additional CSS classes on the root */
49
+ className?: string;
50
+ }
51
+ /**
52
+ * ContextSelect — split control for contextual navigation.
53
+ *
54
+ * - **Label** (and icon): navigates to the context overview (`href` / `onLabelClick`)
55
+ * - **Chevron button**: opens a searchable single-select menu to switch context instantly
56
+ *
57
+ * Designed to compose inside Breadcrumb (contextual breadcrumb).
58
+ * Not a form Select — use `Select` / `Combobox` for forms.
59
+ */
60
+ export declare const ContextSelect: React.FC<ContextSelectProps>;
61
+ export default ContextSelect;
62
+ //# sourceMappingURL=ContextSelect.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextSelect.d.ts","sourceRoot":"","sources":["../../../../components/ContextSelect/ContextSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5C,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmItD,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { ContextSelect, type ContextSelectProps, type ContextSelectOption, } from './ContextSelect';
2
+ export { default } from './ContextSelect';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ContextSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
@@ -97,7 +97,7 @@ export interface DataTableProps<T> {
97
97
  isRowDisabled?: (row: T, index: number) => boolean;
98
98
  /**
99
99
  * Render a trailing action for each row (a `Button`, an icon-only `Button`,
100
- * or a `ContextMenu`/`Menu` trigger). Rendered in a pinned trailing column;
100
+ * or a `Menu` trigger). Rendered in a pinned trailing column;
101
101
  * clicks on it never trigger the row click/href.
102
102
  */
103
103
  rowAction?: (row: T, index: number) => React.ReactNode;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ /**
3
+ * Custom icon from Figma: arrow-drop-up-down-line (node 5578:7253).
4
+ * Combined drop-up + drop-down carets — not available as a single Remix glyph.
5
+ */
6
+ export declare const ArrowDropUpDownIcon: React.FC<{
7
+ className?: string;
8
+ }>;
9
+ //# sourceMappingURL=ArrowDropUpDownIcon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ArrowDropUpDownIcon.d.ts","sourceRoot":"","sources":["../../../../../components/Icon/custom/ArrowDropUpDownIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAmBhE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"iconRegistry.d.ts","sourceRoot":"","sources":["../../../../components/Icon/iconRegistry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD,CAAC;AAiBF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAM,CAAC;AAyDlE,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,GAAG,MAAM,GACvB,KAAK,CAAC,aAAa,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAI7C"}
1
+ {"version":3,"file":"iconRegistry.d.ts","sourceRoot":"","sources":["../../../../components/Icon/iconRegistry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD,CAAC;AAiBF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAM,CAAC;AA+DlE,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,GAAG,MAAM,GACvB,KAAK,CAAC,aAAa,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAI7C"}