@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.
- package/dist/cjs/components/ActionSheet/ActionSheet.js +1 -1
- package/dist/cjs/components/Breadcrumb/Breadcrumb.css +11 -3
- package/dist/cjs/components/Breadcrumb/Breadcrumb.js +19 -1
- package/dist/cjs/components/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/cjs/components/ContextSelect/ContextSelect.css +117 -0
- package/dist/cjs/components/ContextSelect/ContextSelect.js +49 -0
- package/dist/cjs/components/ContextSelect/ContextSelect.js.map +1 -0
- package/dist/cjs/components/ContextSelect/index.js +11 -0
- package/dist/cjs/components/ContextSelect/index.js.map +1 -0
- package/dist/cjs/components/Icon/custom/ArrowDropUpDownIcon.js +11 -0
- package/dist/cjs/components/Icon/custom/ArrowDropUpDownIcon.js.map +1 -0
- package/dist/cjs/components/Icon/iconRegistry.js +6 -0
- package/dist/cjs/components/Icon/iconRegistry.js.map +1 -1
- package/dist/cjs/components/Menu/Menu.css +112 -2
- package/dist/cjs/components/Menu/Menu.js +171 -39
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/cjs/components/Menu/index.js +5 -1
- package/dist/cjs/components/Menu/index.js.map +1 -1
- package/dist/cjs/components/Scrollbar/Scrollbar.css +123 -0
- package/dist/cjs/components/Scrollbar/Scrollbar.js +118 -0
- package/dist/cjs/components/Scrollbar/Scrollbar.js.map +1 -0
- package/dist/cjs/components/Scrollbar/index.js +11 -0
- package/dist/cjs/components/Scrollbar/index.js.map +1 -0
- package/dist/cjs/components/index.js +10 -15
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/ActionSheet/ActionSheet.js +1 -1
- package/dist/esm/components/Breadcrumb/Breadcrumb.css +11 -3
- package/dist/esm/components/Breadcrumb/Breadcrumb.js +19 -1
- package/dist/esm/components/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/components/ContextSelect/ContextSelect.css +117 -0
- package/dist/esm/components/ContextSelect/ContextSelect.js +45 -0
- package/dist/esm/components/ContextSelect/ContextSelect.js.map +1 -0
- package/dist/esm/components/ContextSelect/index.js +3 -0
- package/dist/esm/components/ContextSelect/index.js.map +1 -0
- package/dist/esm/components/Icon/custom/ArrowDropUpDownIcon.js +7 -0
- package/dist/esm/components/Icon/custom/ArrowDropUpDownIcon.js.map +1 -0
- package/dist/esm/components/Icon/iconRegistry.js +6 -0
- package/dist/esm/components/Icon/iconRegistry.js.map +1 -1
- package/dist/esm/components/Menu/Menu.css +112 -2
- package/dist/esm/components/Menu/Menu.js +170 -40
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/index.js +1 -1
- package/dist/esm/components/Menu/index.js.map +1 -1
- package/dist/esm/components/Scrollbar/Scrollbar.css +123 -0
- package/dist/esm/components/Scrollbar/Scrollbar.js +114 -0
- package/dist/esm/components/Scrollbar/Scrollbar.js.map +1 -0
- package/dist/esm/components/Scrollbar/index.js +3 -0
- package/dist/esm/components/Scrollbar/index.js.map +1 -0
- package/dist/esm/components/index.js +3 -2
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/Breadcrumb.css +11 -3
- package/dist/styles/components/ContextSelect.css +117 -0
- package/dist/styles/components/Menu.css +112 -2
- package/dist/styles/components/Scrollbar.css +123 -0
- package/dist/styles/index.css +373 -7
- package/dist/styles/muka-dark.css +373 -7
- package/dist/styles/muka-light.css +373 -7
- package/dist/styles/tokens-bouwplan-dark.css +4 -2
- package/dist/styles/tokens-bouwplan-light.css +4 -2
- package/dist/styles/tokens-fscl-dark.css +4 -2
- package/dist/styles/tokens-fscl-light.css +4 -2
- package/dist/styles/tokens-grip-dark.css +4 -2
- package/dist/styles/tokens-grip-light.css +4 -2
- package/dist/styles/tokens-muka-dark.css +4 -2
- package/dist/styles/tokens-muka-light.css +4 -2
- package/dist/styles/tokens-wireframe-dark.css +4 -2
- package/dist/styles/tokens-wireframe-light.css +4 -2
- package/dist/styles/wireframe-dark.css +373 -7
- package/dist/styles/wireframe-light.css +373 -7
- package/dist/types/components/ActionSheet/ActionSheet.d.ts +1 -1
- package/dist/types/components/Breadcrumb/Breadcrumb.d.ts +27 -3
- package/dist/types/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/types/components/ContextSelect/ContextSelect.d.ts +62 -0
- package/dist/types/components/ContextSelect/ContextSelect.d.ts.map +1 -0
- package/dist/types/components/ContextSelect/index.d.ts +3 -0
- package/dist/types/components/ContextSelect/index.d.ts.map +1 -0
- package/dist/types/components/DataTable/DataTable.d.ts +1 -1
- package/dist/types/components/Icon/custom/ArrowDropUpDownIcon.d.ts +9 -0
- package/dist/types/components/Icon/custom/ArrowDropUpDownIcon.d.ts.map +1 -0
- package/dist/types/components/Icon/iconRegistry.d.ts.map +1 -1
- package/dist/types/components/Menu/Menu.d.ts +58 -28
- package/dist/types/components/Menu/Menu.d.ts.map +1 -1
- package/dist/types/components/Menu/index.d.ts +2 -2
- package/dist/types/components/Menu/index.d.ts.map +1 -1
- package/dist/types/components/Scrollbar/Scrollbar.d.ts +19 -0
- package/dist/types/components/Scrollbar/Scrollbar.d.ts.map +1 -0
- package/dist/types/components/Scrollbar/index.d.ts +3 -0
- package/dist/types/components/Scrollbar/index.d.ts.map +1 -0
- package/dist/types/components/index.d.ts +4 -4
- package/dist/types/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/README.md +1 -1
- package/tokens/t4-components/menu.json +12 -2
- package/dist/cjs/components/ContextMenu/ContextMenu.js +0 -186
- package/dist/cjs/components/ContextMenu/ContextMenu.js.map +0 -1
- package/dist/cjs/components/ContextMenu/index.js +0 -17
- package/dist/cjs/components/ContextMenu/index.js.map +0 -1
- package/dist/esm/components/ContextMenu/ContextMenu.js +0 -145
- package/dist/esm/components/ContextMenu/ContextMenu.js.map +0 -1
- package/dist/esm/components/ContextMenu/index.js +0 -2
- package/dist/esm/components/ContextMenu/index.js.map +0 -1
- package/dist/types/components/ContextMenu/ContextMenu.d.ts +0 -188
- package/dist/types/components/ContextMenu/ContextMenu.d.ts.map +0 -1
- package/dist/types/components/ContextMenu/index.d.ts +0 -3
- 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:
|
|
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: #
|
|
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
|
|
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:
|
|
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
|
-
|
|
12444
|
-
|
|
12445
|
-
|
|
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 `
|
|
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,
|
|
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 @@
|
|
|
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 `
|
|
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;
|
|
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"}
|