@jetbrains/kotlin-web-site-ui 4.8.0-alpha.4 → 4.8.0-alpha.6

package/out/components/nav-item/index.css

@@ -10,10 +10,16 @@
     background: none;
     color: #ffffff;
 }
+
     .ktl-nav-item-module_navItem_gRy22:hover {
         background: rgba(255, 255, 255, 0.10);
     }
 
+    .ktl-nav-item-module_navItem_gRy22:focus {
+        box-shadow: #8979ff 0 0 0 4px;
+        outline: none
+    }
+
 .ktl-nav-item-module_rightIcon_XlxMF {
     flex-direction: row-reverse;
 }

package/out/components/nav-item/index.js

@@ -21,7 +21,7 @@ const NavItem = ({
     [styles.titleWithIconRight]: iconPosition === 'right',
     [styles.titleWithoutIcon]: !children
   });
-  return React.createElement("div", {
+  return React.createElement("button", {
     className: navItemClass,
     onClick: onClick
   }, icon ? icon : null, React.createElement("div", {

package/out/components/sidebar-menu/index.css

@@ -33,112 +33,4 @@
     border-radius: 50%;
     width: 52px;
     height: 52px;
-}
-.ktl-sidebar-module_popup_bidR1 {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 910;
-
-    --ktf-header-animation-timing: 250ms;
-    --ktf-header-animation-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ktl-sidebar-module_popup_bidR1::before {
-    display: block;
-    content: '';
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-
-    visibility: visible;
-    -webkit-backdrop-filter: blur(4px);
-            backdrop-filter: blur(4px);
-
-    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      -webkit-backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
-
-    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
-
-    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-      -webkit-backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
-    will-change: background-color, visible;
-}
-
-.ktl-sidebar-module_popup_bidR1.ktl-sidebar-module_tabletMode_vcf0T {
-        --ktl-sidebar-width: 320px;
-    }
-
-.ktl-sidebar-module_popup_bidR1.ktl-sidebar-module_mobileMode_yCmFY {
-        --ktl-sidebar-width:  100%;
-    }
-
-@media (min-width: 473px) {
-
-.ktl-sidebar-module_popup_bidR1:not(:is(.ktl-sidebar-module_tabletMode_vcf0T, .ktl-sidebar-module_mobileMode_yCmFY)) {
-            --ktl-sidebar-width: 320px
-    }
-        }
-
-@media (max-width: 472px) {
-
-.ktl-sidebar-module_popup_bidR1:not(:is(.ktl-sidebar-module_tabletMode_vcf0T, .ktl-sidebar-module_mobileMode_yCmFY)) {
-            --ktl-sidebar-width: 100%
-    }
-        }
-
-.ktl-sidebar-module_content_SzdiT {
-    margin-left: auto;
-    height: 100%;
-    max-width: 100%;
-    width: var(--ktl-sidebar-width, auto);
-}
-
-.ktl-sidebar-module_dark_GNaUl::before {
-        background-color: rgba(0, 0, 0, 0.5);
-    }
-
-.ktl-sidebar-module_dark_GNaUl > .ktl-sidebar-module_content_SzdiT {
-        background-color: var(--ktl-dark-100);
-    }
-
-.ktl-sidebar-module_light_OnGcf::before {
-        background-color: rgba(0, 0, 0, 0.62);
-    }
-
-.ktl-sidebar-module_light_OnGcf > .ktl-sidebar-module_content_SzdiT {
-        background-color: #fff;
-    }
-
-.ktl-sidebar-module_popup_bidR1 > .ktl-sidebar-module_content_SzdiT {
-    transform: translateX(0);
-
-    transition: transform var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
-    visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
-    will-change: transform;
-}
-
-.ktl-sidebar-module_close_lN33m {
-    --ktf-header-animation-timing: 300ms;
-    pointer-events: none;
-}
-
-.ktl-sidebar-module_close_lN33m::before {
-        background: rgba(0, 0, 0, 0);
-        visibility: hidden;
-    }
-
-.ktl-sidebar-module_close_lN33m > .ktl-sidebar-module_content_SzdiT {
-        transform: translateX(100%);
-        visibility: hidden;
-    }
+}

package/out/components/sidebar-menu/{sidebar-menu/menu-header.js → menu-header.js}

@@ -2,9 +2,9 @@ import React from 'react';
 import cn from 'classnames';
 import { useTheme } from '@rescui/ui-contexts';
 import { CloseIcon } from '@rescui/icons';
-import Button from '@rescui/button';
+import { Button } from '@rescui/button';
+import { useSidebarContext } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
 import styles from './menu-header.module.css.js';
-import { useSidebarContext } from '../sidebar/sidebar.js';
 
 function SidebarMenuHeader({
   className,

package/out/components/sidebar-menu/{sidebar-menu/sidebar-menu.js → sidebar-menu.js}

@@ -1,13 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
 import { Menu } from '@rescui/menu';
-import { Sidebar } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar/sidebar';
+import { Sidebar } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
 import { SidebarMenuItem } from './menu-item.js';
 import styles from './popup.module.css.js';
 import '@rescui/ui-contexts';
 import '@rescui/icons';
 import '@rescui/button';
-import '../sidebar/sidebar.js';
 
 function SidebarMenu({
   className,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.8.0-alpha.4",
+  "version": "4.8.0-alpha.6",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [

package/out/components/sidebar-menu/sidebar/sidebar.js

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-import 'classnames';
-import 'react-remove-scroll-bar';
-import '@rescui/ui-contexts';
-const SidebarContext = createContext({});
-
-function useSidebarContext() {
-  return useContext(SidebarContext);
-}
-
-export { SidebarContext, useSidebarContext };