@jetbrains/kotlin-web-site-ui 4.8.0-alpha.3 → 4.8.0-alpha.5

package/out/components/footer/social-list/social-item/social-item.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useTheme } from '@rescui/ui-contexts';
 import classNames from 'classnames';
 import styles from './social-item.module.pcss.js';
-import { Button } from '@rescui/button';
+import Button from '@rescui/button';
 
 const SocialItem = ({
   socialNetwork

package/out/components/sidebar/index.js

@@ -1,51 +1,2 @@
 import './index.css';
-import React, { createContext, useContext, useRef, useCallback } from 'react';
-import cn from 'classnames';
-import { RemoveScrollBar } from 'react-remove-scroll-bar';
-import { useTheme } from '@rescui/ui-contexts';
-import styles from './sidebar.module.css.js';
-const SidebarContext = createContext({});
-
-function useSidebarContext() {
-  return useContext(SidebarContext);
-}
-
-function Sidebar({
-  className,
-  classNameContent,
-  mode,
-  children,
-  isOpen,
-  onClose
-}) {
-  const ref = useRef(null);
-  const theme = useTheme();
-  const onToggleClick = useCallback(e => {
-    if (e.currentTarget == e.target) onClose();
-  }, [onClose]);
-  const classes = cn(className, styles.popup, styles[theme || 'light'], {
-    [styles.close]: !isOpen,
-    [styles[`${mode}Mode`]]: Boolean(mode && styles[`${mode}Mode`])
-  });
-  const disableProps = {};
-
-  if (!isOpen) {
-    disableProps.tabIndex = -1;
-    disableProps.role = 'none';
-  }
-
-  return React.createElement(SidebarContext.Provider, {
-    value: {
-      onClose
-    }
-  }, React.createElement("div", {
-    className: classes,
-    onClick: onToggleClick,
-    ...disableProps
-  }, isOpen && React.createElement(RemoveScrollBar, null), React.createElement("div", {
-    ref: ref,
-    className: cn(classNameContent, styles.content)
-  }, children)));
-}
-
-export { Sidebar, SidebarContext, useSidebarContext };
+export { Sidebar, SidebarContext, useSidebarContext } from './sidebar.js';

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

@@ -1,10 +1,14 @@
-import React, { createContext, useRef, useCallback } from 'react';
+import React, { createContext, useContext, useRef, useCallback } from 'react';
 import cn from 'classnames';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { useTheme } from '@rescui/ui-contexts';
 import styles from './sidebar.module.css.js';
 const SidebarContext = createContext({});
 
+function useSidebarContext() {
+  return useContext(SidebarContext);
+}
+
 function Sidebar({
   className,
   classNameContent,
@@ -43,4 +47,4 @@ function Sidebar({
   }, children)));
 }
 
-export { Sidebar, SidebarContext };
+export { Sidebar, SidebarContext, useSidebarContext };

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

@@ -1,112 +1,3 @@
-.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;
-    }
-
 .ktl-popup-module_popup_b34tS {
     display: flex;
     flex-direction: column;

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

@@ -0,0 +1,3 @@
+import './index.css';
+export { SidebarMenu } from './sidebar-menu.js';
+export { SidebarMenuHeader } from './menu-header.js';

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 styles from './menu-header.module.css.js';
+import { Button } from '@rescui/button';
 import { useSidebarContext } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
+import styles from './menu-header.module.css.js';
 
 function SidebarMenuHeader({
   className,

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

@@ -1,11 +1,12 @@
-import './index.css';
 import React from 'react';
 import cn from 'classnames';
 import { Menu } from '@rescui/menu';
-import { Sidebar } from '../sidebar/index.js';
+import { Sidebar } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
 import { SidebarMenuItem } from './menu-item.js';
 import styles from './popup.module.css.js';
-export { SidebarMenuHeader } from './menu-header.js';
+import '@rescui/ui-contexts';
+import '@rescui/icons';
+import '@rescui/button';
 
 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.3",
+  "version": "4.8.0-alpha.5",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [

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

@@ -1,10 +0,0 @@
-var styles = {
-  "popup": "ktl-sidebar-module_popup_bidR1",
-  "tabletMode": "ktl-sidebar-module_tabletMode_vcf0T",
-  "mobileMode": "ktl-sidebar-module_mobileMode_yCmFY",
-  "content": "ktl-sidebar-module_content_SzdiT",
-  "dark": "ktl-sidebar-module_dark_GNaUl",
-  "light": "ktl-sidebar-module_light_OnGcf",
-  "close": "ktl-sidebar-module_close_lN33m"
-};
-export { styles as default };