@cloud-ru/uikit-product-site-navbar 0.2.16 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.3.1 (2025-12-08)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-utils@8.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+# 0.3.0 (2025-12-04)
+
+
+### Features
+
+* **SITE-10320:** edit hero main ([a85a31d](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/a85a31d49635867e75ae1dffec8ecb510d95a71e))
+
+
+
+
+
 ## 0.2.16 (2025-11-24)
 
 ### Only dependencies have been changed

package/dist/cjs/components/SiteNavbar.d.ts

@@ -1,10 +1,21 @@
 import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { NavbarItemProps } from '../helperComponents';
+type AppearanceNeutral = {
+    colorText: 'neutral';
+    dividerBackgroundColor: 'neutral';
+};
+type AppearanceInvert = {
+    colorText: 'invert';
+    dividerBackgroundColor: 'invert';
+};
+type AppereanceType = AppearanceNeutral | AppearanceInvert;
 export type SiteNavbarProps = WithSupportProps<{
     items: NavbarItemProps[];
     onItemClick(id: string, text: string): void;
     active?: string;
     className?: string;
     topPosition?: number;
+    appereance?: AppereanceType;
 }>;
-export declare function SiteNavbar({ items, className, onItemClick, active, topPosition, ...rest }: SiteNavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteNavbar({ items, className, onItemClick, active, topPosition, appereance, ...rest }: SiteNavbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SiteNavbar.js

@@ -22,7 +22,11 @@ const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const divider_1 = require("@snack-uikit/divider");
 const helperComponents_1 = require("../helperComponents");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const APPEARANCE_NEUTRAL = {
+    colorText: 'neutral',
+    dividerBackgroundColor: 'neutral',
+};
 function SiteNavbar(_a) {
-    var { items, className, onItemClick, active, topPosition } = _a, rest = __rest(_a, ["items", "className", "onItemClick", "active", "topPosition"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.navbar, className), style: topPosition ? { top: `${topPosition}px` } : undefined }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_indiana_drag_scroll_1.default, { className: styles_module_scss_1.default.navbarItemsWrapper, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.NavbarItem, Object.assign({}, item, { active: active === item.id, onClick: onItemClick }), item.id))) })] })));
+    var { items, className, onItemClick, active, topPosition, appereance = APPEARANCE_NEUTRAL } = _a, rest = __rest(_a, ["items", "className", "onItemClick", "active", "topPosition", "appereance"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.navbar, className), style: topPosition ? { top: `${topPosition}px` } : undefined }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, "data-background-color": appereance === null || appereance === void 0 ? void 0 : appereance.dividerBackgroundColor }), (0, jsx_runtime_1.jsx)(react_indiana_drag_scroll_1.default, { className: styles_module_scss_1.default.navbarItemsWrapper, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.NavbarItem, Object.assign({}, item, { active: active === item.id, appereance: appereance === null || appereance === void 0 ? void 0 : appereance.colorText, onClick: onItemClick }), item.id))) })] })));
 }

package/dist/cjs/components/styles.module.css

@@ -11,4 +11,8 @@
   overflow-y:visible;
   max-width:100%;
   scrollbar-width:none;
+}
+
+.divider[data-background-color=invert]{
+  background-color:var(--sys-invert-neutral-decor-default, #51525d);
 }

package/dist/cjs/helperComponents/NavbarItem/NavbarItem.d.ts

@@ -4,10 +4,11 @@ export type NavbarItemProps = {
     text: string;
     icon?: ReactElement;
     disabled?: boolean;
+    appereance?: 'neutral' | 'invert';
 };
 type Props = NavbarItemProps & {
     active?: boolean;
     onClick(id: string, text: string): void;
 };
-export declare function NavbarItem({ id, text, icon, onClick, active, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarItem({ id, text, icon, appereance, onClick, active, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/NavbarItem/NavbarItem.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const typography_1 = require("@snack-uikit/typography");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const KEYS = ['Space', 'Enter'];
-function NavbarItem({ id, text, icon, onClick, active = false, disabled = false }) {
+function NavbarItem({ id, text, icon, appereance = 'neutral', onClick, active = false, disabled = false, }) {
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(id, text);
     }, [id, onClick, text]);
@@ -19,5 +19,5 @@ function NavbarItem({ id, text, icon, onClick, active = false, disabled = false
             handleClick();
         }
     }, [handleClick]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.navbarItem, "data-active": active || undefined, "data-disabled": disabled || undefined, onClick: disabled ? undefined : handleClick, onKeyDown: disabled ? undefined : handleKeyDown, tabIndex: disabled ? undefined : 0, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.background, "data-active": active || undefined, "data-disabled": disabled || undefined }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', className: styles_module_scss_1.default.text, "data-disabled": disabled || undefined, children: text }), icon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconWrapper, "data-disabled": disabled || undefined, children: icon }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.navbarItem, "data-active": active || undefined, "data-disabled": disabled || undefined, onClick: disabled ? undefined : handleClick, onKeyDown: disabled ? undefined : handleKeyDown, tabIndex: disabled ? undefined : 0, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.background, "data-background-color": appereance, "data-active": active || undefined, "data-disabled": disabled || undefined }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', className: styles_module_scss_1.default.text, "data-disabled": disabled || undefined, "data-text-color": appereance, children: text }), icon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconWrapper, "data-text-color": appereance, "data-disabled": disabled || undefined, children: icon }))] }));
 }

package/dist/cjs/helperComponents/NavbarItem/styles.module.css

@@ -60,6 +60,9 @@
 .background[data-disabled]{
   background-color:transparent;
 }
+.background[data-background-color=invert]:hover{
+  background-color:var(--sys-invert-neutral-accent-default, #cfd2dc);
+}
 
 .text{
   white-space:nowrap;
@@ -76,4 +79,8 @@
 .text[data-disabled],
 .iconWrapper[data-disabled]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.text[data-text-color=invert],
+.iconWrapper[data-text-color=invert]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
 }

package/dist/esm/components/SiteNavbar.d.ts

@@ -1,10 +1,21 @@
 import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { NavbarItemProps } from '../helperComponents';
+type AppearanceNeutral = {
+    colorText: 'neutral';
+    dividerBackgroundColor: 'neutral';
+};
+type AppearanceInvert = {
+    colorText: 'invert';
+    dividerBackgroundColor: 'invert';
+};
+type AppereanceType = AppearanceNeutral | AppearanceInvert;
 export type SiteNavbarProps = WithSupportProps<{
     items: NavbarItemProps[];
     onItemClick(id: string, text: string): void;
     active?: string;
     className?: string;
     topPosition?: number;
+    appereance?: AppereanceType;
 }>;
-export declare function SiteNavbar({ items, className, onItemClick, active, topPosition, ...rest }: SiteNavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteNavbar({ items, className, onItemClick, active, topPosition, appereance, ...rest }: SiteNavbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SiteNavbar.js

@@ -16,7 +16,11 @@ import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { Divider } from '@snack-uikit/divider';
 import { NavbarItem } from '../helperComponents';
 import styles from './styles.module.css';
+const APPEARANCE_NEUTRAL = {
+    colorText: 'neutral',
+    dividerBackgroundColor: 'neutral',
+};
 export function SiteNavbar(_a) {
-    var { items, className, onItemClick, active, topPosition } = _a, rest = __rest(_a, ["items", "className", "onItemClick", "active", "topPosition"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.navbar, className), style: topPosition ? { top: `${topPosition}px` } : undefined }, extractSupportProps(rest), { children: [_jsx(Divider, {}), _jsx(ScrollContainer, { className: styles.navbarItemsWrapper, children: items.map(item => (_jsx(NavbarItem, Object.assign({}, item, { active: active === item.id, onClick: onItemClick }), item.id))) })] })));
+    var { items, className, onItemClick, active, topPosition, appereance = APPEARANCE_NEUTRAL } = _a, rest = __rest(_a, ["items", "className", "onItemClick", "active", "topPosition", "appereance"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.navbar, className), style: topPosition ? { top: `${topPosition}px` } : undefined }, extractSupportProps(rest), { children: [_jsx(Divider, { className: styles.divider, "data-background-color": appereance === null || appereance === void 0 ? void 0 : appereance.dividerBackgroundColor }), _jsx(ScrollContainer, { className: styles.navbarItemsWrapper, children: items.map(item => (_jsx(NavbarItem, Object.assign({}, item, { active: active === item.id, appereance: appereance === null || appereance === void 0 ? void 0 : appereance.colorText, onClick: onItemClick }), item.id))) })] })));
 }

package/dist/esm/components/styles.module.css

@@ -11,4 +11,8 @@
   overflow-y:visible;
   max-width:100%;
   scrollbar-width:none;
+}
+
+.divider[data-background-color=invert]{
+  background-color:var(--sys-invert-neutral-decor-default, #51525d);
 }

package/dist/esm/helperComponents/NavbarItem/NavbarItem.d.ts

@@ -4,10 +4,11 @@ export type NavbarItemProps = {
     text: string;
     icon?: ReactElement;
     disabled?: boolean;
+    appereance?: 'neutral' | 'invert';
 };
 type Props = NavbarItemProps & {
     active?: boolean;
     onClick(id: string, text: string): void;
 };
-export declare function NavbarItem({ id, text, icon, onClick, active, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarItem({ id, text, icon, appereance, onClick, active, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/NavbarItem/NavbarItem.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
 const KEYS = ['Space', 'Enter'];
-export function NavbarItem({ id, text, icon, onClick, active = false, disabled = false }) {
+export function NavbarItem({ id, text, icon, appereance = 'neutral', onClick, active = false, disabled = false, }) {
     const handleClick = useCallback(() => {
         onClick(id, text);
     }, [id, onClick, text]);
@@ -13,5 +13,5 @@ export function NavbarItem({ id, text, icon, onClick, active = false, disabled =
             handleClick();
         }
     }, [handleClick]);
-    return (_jsxs("div", { className: styles.navbarItem, "data-active": active || undefined, "data-disabled": disabled || undefined, onClick: disabled ? undefined : handleClick, onKeyDown: disabled ? undefined : handleKeyDown, tabIndex: disabled ? undefined : 0, children: [_jsx("div", { className: styles.background, "data-active": active || undefined, "data-disabled": disabled || undefined }), _jsx(Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', className: styles.text, "data-disabled": disabled || undefined, children: text }), icon && (_jsx("div", { className: styles.iconWrapper, "data-disabled": disabled || undefined, children: icon }))] }));
+    return (_jsxs("div", { className: styles.navbarItem, "data-active": active || undefined, "data-disabled": disabled || undefined, onClick: disabled ? undefined : handleClick, onKeyDown: disabled ? undefined : handleKeyDown, tabIndex: disabled ? undefined : 0, children: [_jsx("div", { className: styles.background, "data-background-color": appereance, "data-active": active || undefined, "data-disabled": disabled || undefined }), _jsx(Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', className: styles.text, "data-disabled": disabled || undefined, "data-text-color": appereance, children: text }), icon && (_jsx("div", { className: styles.iconWrapper, "data-text-color": appereance, "data-disabled": disabled || undefined, children: icon }))] }));
 }

package/dist/esm/helperComponents/NavbarItem/styles.module.css

@@ -60,6 +60,9 @@
 .background[data-disabled]{
   background-color:transparent;
 }
+.background[data-background-color=invert]:hover{
+  background-color:var(--sys-invert-neutral-accent-default, #cfd2dc);
+}
 
 .text{
   white-space:nowrap;
@@ -76,4 +79,8 @@
 .text[data-disabled],
 .iconWrapper[data-disabled]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.text[data-text-color=invert],
+.iconWrapper[data-text-color=invert]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-navbar",
   "title": "Site Navbar",
-  "version": "0.2.16",
+  "version": "0.3.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-utils": "8.0.1",
+    "@cloud-ru/uikit-product-utils": "8.0.2",
     "@snack-uikit/divider": "3.2.3",
     "@snack-uikit/typography": "0.8.4",
     "classnames": "2.5.1",
     "react-indiana-drag-scroll": "2.2.0"
   },
-  "gitHead": "8968606769e5da46db696dfa70d7ad999564388d"
+  "gitHead": "ab61e93fe6f723c522e95a7c5540b3080de6b2de"
 }

package/src/components/SiteNavbar.tsx

@@ -7,25 +7,57 @@ import { Divider } from '@snack-uikit/divider';
 import { NavbarItem, NavbarItemProps } from '../helperComponents';
 import styles from './styles.module.scss';
 
+type AppearanceNeutral = {
+  colorText: 'neutral';
+  dividerBackgroundColor: 'neutral';
+};
+
+type AppearanceInvert = {
+  colorText: 'invert';
+  dividerBackgroundColor: 'invert';
+};
+
+type AppereanceType = AppearanceNeutral | AppearanceInvert;
+
+const APPEARANCE_NEUTRAL: AppearanceNeutral = {
+  colorText: 'neutral',
+  dividerBackgroundColor: 'neutral',
+};
+
 export type SiteNavbarProps = WithSupportProps<{
   items: NavbarItemProps[];
   onItemClick(id: string, text: string): void;
   active?: string;
   className?: string;
   topPosition?: number;
+  appereance?: AppereanceType;
 }>;
 
-export function SiteNavbar({ items, className, onItemClick, active, topPosition, ...rest }: SiteNavbarProps) {
+export function SiteNavbar({
+  items,
+  className,
+  onItemClick,
+  active,
+  topPosition,
+  appereance = APPEARANCE_NEUTRAL,
+  ...rest
+}: SiteNavbarProps) {
   return (
     <div
       className={cn(styles.navbar, className)}
       style={topPosition ? { top: `${topPosition}px` } : undefined}
       {...extractSupportProps(rest)}
     >
-      <Divider />
+      <Divider className={styles.divider} data-background-color={appereance?.dividerBackgroundColor} />
       <ScrollContainer className={styles.navbarItemsWrapper}>
         {items.map(item => (
-          <NavbarItem key={item.id} {...item} active={active === item.id} onClick={onItemClick} />
+          <NavbarItem
+            key={item.id}
+            {...item}
+            active={active === item.id}
+            appereance={appereance?.colorText}
+            onClick={onItemClick}
+          />
         ))}
       </ScrollContainer>
     </div>

package/src/components/styles.module.scss

@@ -1,3 +1,4 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
 .navbar {
   display: flex;
   flex-direction: column;
@@ -12,3 +13,9 @@
   max-width: 100%;
   scrollbar-width: none;
 }
+
+.divider {
+  &[data-background-color='invert'] {
+    background-color: ste.$sys-invert-neutral-decor-default;
+  }
+}

package/src/helperComponents/NavbarItem/NavbarItem.tsx

@@ -9,6 +9,7 @@ export type NavbarItemProps = {
   text: string;
   icon?: ReactElement;
   disabled?: boolean;
+  appereance?: 'neutral' | 'invert';
 };
 
 const KEYS = ['Space', 'Enter'];
@@ -18,7 +19,15 @@ type Props = NavbarItemProps & {
   onClick(id: string, text: string): void;
 };
 
-export function NavbarItem({ id, text, icon, onClick, active = false, disabled = false }: Props) {
+export function NavbarItem({
+  id,
+  text,
+  icon,
+  appereance = 'neutral',
+  onClick,
+  active = false,
+  disabled = false,
+}: Props) {
   const handleClick = useCallback(() => {
     onClick(id, text);
   }, [id, onClick, text]);
@@ -42,7 +51,12 @@ export function NavbarItem({ id, text, icon, onClick, active = false, disabled =
       onKeyDown={disabled ? undefined : handleKeyDown}
       tabIndex={disabled ? undefined : 0}
     >
-      <div className={styles.background} data-active={active || undefined} data-disabled={disabled || undefined} />
+      <div
+        className={styles.background}
+        data-background-color={appereance}
+        data-active={active || undefined}
+        data-disabled={disabled || undefined}
+      />
       <Typography
         family='sans'
         purpose='body'
@@ -50,11 +64,12 @@ export function NavbarItem({ id, text, icon, onClick, active = false, disabled =
         tag='div'
         className={styles.text}
         data-disabled={disabled || undefined}
+        data-text-color={appereance}
       >
         {text}
       </Typography>
       {icon && (
-        <div className={styles.iconWrapper} data-disabled={disabled || undefined}>
+        <div className={styles.iconWrapper} data-text-color={appereance} data-disabled={disabled || undefined}>
           {icon}
         </div>
       )}

package/src/helperComponents/NavbarItem/styles.module.scss

@@ -79,6 +79,12 @@
   &[data-disabled] {
     background-color: transparent;
   }
+
+  &[data-background-color='invert'] {
+    &:hover {
+      background-color: var.$sys-invert-neutral-accent-default;
+    }
+  }
 }
 
 .text {
@@ -96,4 +102,8 @@
   &[data-disabled] {
     color: var.$sys-neutral-text-disabled;
   }
+
+  &[data-text-color='invert'] {
+    color: var.$sys-invert-neutral-text-main;
+  }
 }