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

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

@@ -0,0 +1,46 @@
+.ktl-nav-item-module_navItem_gRy22 {
+    padding: 0 12px;
+    height: 52px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    border: 0;
+    background: none;
+    color: #ffffff;
+}
+    .ktl-nav-item-module_navItem_gRy22:hover {
+        background: rgba(255, 255, 255, 0.10);
+    }
+
+.ktl-nav-item-module_rightIcon_XlxMF {
+    flex-direction: row-reverse;
+}
+
+.ktl-nav-item-module_navItemActive_gI8Nv::after {
+        content: '';
+        width: 100%;
+        height: 2px;
+        background: #ffffff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+
+.ktl-nav-item-module_title_9VXwr {
+    display: block;
+}
+
+.ktl-nav-item-module_titleWithIcon_CVqpS {
+    margin-left: 8px;
+}
+
+.ktl-nav-item-module_titleWithIconRight_FwEnm {
+    margin-left: 0;
+    margin-right: 8px;
+}
+
+.ktl-nav-item-module_titleWithoutIcon_XgnMl {
+    margin: 0;
+}

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

@@ -0,0 +1,34 @@
+import './index.css';
+import React from 'react';
+import cn from 'classnames';
+import styles from './nav-item.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const NavItem = ({
+  children,
+  icon,
+  active,
+  iconPosition,
+  onClick
+}) => {
+  const textCn = useTextStyles();
+  const navItemClass = cn(styles.navItem, {
+    [styles.navItemActive]: active,
+    [styles.rightIcon]: iconPosition === 'right'
+  });
+  const textStyles = cn(styles.title, {
+    [styles.titleWithIcon]: icon,
+    [styles.titleWithIconRight]: iconPosition === 'right',
+    [styles.titleWithoutIcon]: !children
+  });
+  return React.createElement("div", {
+    className: navItemClass,
+    onClick: onClick
+  }, icon ? icon : null, React.createElement("div", {
+    className: cn(textCn('rs-text-2', {
+      hardness: 'hard'
+    }), textStyles)
+  }, children));
+};
+
+export { NavItem, NavItem as default };

package/out/components/nav-item/nav-item.module.pcss.js

@@ -0,0 +1,10 @@
+var styles = {
+  "navItem": "ktl-nav-item-module_navItem_gRy22",
+  "rightIcon": "ktl-nav-item-module_rightIcon_XlxMF",
+  "navItemActive": "ktl-nav-item-module_navItemActive_gI8Nv",
+  "title": "ktl-nav-item-module_title_9VXwr",
+  "titleWithIcon": "ktl-nav-item-module_titleWithIcon_CVqpS",
+  "titleWithIconRight": "ktl-nav-item-module_titleWithIconRight_FwEnm",
+  "titleWithoutIcon": "ktl-nav-item-module_titleWithoutIcon_XgnMl"
+};
+export { styles as default };

package/out/components/sidebar/index.css

@@ -0,0 +1,108 @@
+.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/index.js

@@ -0,0 +1,51 @@
+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 };

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

@@ -0,0 +1,10 @@
+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 };

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

@@ -0,0 +1,145 @@
+.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;
+}
+
+.ktl-popup-module_menu_wZMEB {
+    padding: 0;
+    margin: 0;
+}
+
+.ktl-menu-header-module_header_nm8jO {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: var(--ktl-box-block-l);
+    border-bottom: 1px solid transparent;
+    margin-bottom: var(--ktl-box-block-m);
+}
+
+.ktl-menu-header-module_light_3UtZR {
+    border-bottom-color: var(--ktl-divider-color);
+}
+
+.ktl-menu-header-module_dark_jdymL {
+    border-bottom-color: rgba(255, 255, 255, 0.30);
+}
+
+.ktl-menu-header-module_header_nm8jO > .ktl-menu-header-module_trigger_FbJ59 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 52px;
+    height: 52px;
+}

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

@@ -0,0 +1,46 @@
+import React, { createContext, 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 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 };

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

@@ -0,0 +1,10 @@
+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 };

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

@@ -0,0 +1,31 @@
+import './index.css';
+import React from 'react';
+import cn from 'classnames';
+import { Menu } from '@rescui/menu';
+import { Sidebar } from '../sidebar/index.js';
+import { SidebarMenuItem } from './menu-item.js';
+import styles from './popup.module.css.js';
+export { SidebarMenuHeader } from './menu-header.js';
+
+function SidebarMenu({
+  className,
+  before,
+  activeIndex,
+  items,
+  onItemClick,
+  ...props
+}) {
+  return React.createElement(Sidebar, { ...props,
+    className: cn(className, styles.popup)
+  }, before, React.createElement(Menu, {
+    className: styles.menu
+  }, items.map((item, i) => React.createElement(SidebarMenuItem, {
+    key: i,
+    isActive: i === activeIndex,
+    index: i,
+    ...item,
+    onClick: onItemClick
+  }))));
+}
+
+export { SidebarMenu };

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

@@ -0,0 +1,30 @@
+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 { useSidebarContext } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
+
+function SidebarMenuHeader({
+  className,
+  children,
+  onClose
+}) {
+  const theme = useTheme();
+  const {
+    onClose: onCloseContext
+  } = useSidebarContext();
+  const close = onClose || onCloseContext;
+  return React.createElement("div", {
+    className: cn(styles[theme || 'light'], className, styles.header)
+  }, children, React.createElement(Button, {
+    "aria-label": "close menu",
+    mode: "clear",
+    className: styles.trigger,
+    onClick: close,
+    icon: React.createElement(CloseIcon, null)
+  }));
+}
+
+export { SidebarMenuHeader };

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

@@ -0,0 +1,7 @@
+var styles = {
+  "header": "ktl-menu-header-module_header_nm8jO",
+  "light": "ktl-menu-header-module_light_3UtZR",
+  "dark": "ktl-menu-header-module_dark_jdymL",
+  "trigger": "ktl-menu-header-module_trigger_FbJ59"
+};
+export { styles as default };

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

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '@rescui/menu';
+
+function SidebarMenuItem({
+  index,
+  isActive,
+  onClick,
+  ...props
+}) {
+  const handleClick = useCallback(e => {
+    if (onClick) onClick(e, index);
+  }, [onClick, index]);
+  return React.createElement(MenuItem, {
+    selected: isActive,
+    ...props,
+    onClick: handleClick
+  });
+}
+
+export { SidebarMenuItem };

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

@@ -0,0 +1,5 @@
+var styles = {
+  "popup": "ktl-popup-module_popup_b34tS",
+  "menu": "ktl-popup-module_menu_wZMEB"
+};
+export { styles as default };

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.2",
+  "version": "4.8.0-alpha.3",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -53,6 +53,7 @@
     "@rescui/focus-manager": "^0.1.1",
     "@rescui/icons": "^0.12.0",
     "@rescui/input": "^0.4.6",
+    "@rescui/menu": "^0.9.4",
     "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
     "@rescui/typography": "^0.7.3",