@cloud-ru/ds-rating 1.0.0

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

@@ -0,0 +1,210 @@
+.firstStarContainer{
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:50%;
+}
+
+.ratingStar{
+  cursor:pointer;
+  position:relative;
+  display:inline-block;
+  box-sizing:border-box;
+}
+.ratingStar svg{
+  display:block;
+}
+.ratingStar[data-size=xs]{
+  min-width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-rating-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-xs, var(--sn-primitive-dimension-2, 2px)));
+}
+.ratingStar[data-size=xs] svg{
+  width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px)) !important;
+  height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
+}
+.ratingStar[data-size=xs] .firstStarContainer,
+.ratingStar[data-size=xs] .secondStarContainer{
+  height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
+}
+.ratingStar[data-size=s]{
+  min-width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  border-radius:var(--sn-rating-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.ratingStar[data-size=s] svg{
+  width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px)) !important;
+  height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
+}
+.ratingStar[data-size=s] .firstStarContainer,
+.ratingStar[data-size=s] .secondStarContainer{
+  height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
+}
+.ratingStar:focus-visible{
+  border-radius:var(--sn-primitive-dimension-2, 2px);
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.ratingStar[data-appearance=primary][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=primary][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=primary][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=neutral][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=neutral][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=neutral][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=red][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=red][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=red][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=orange][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=orange][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=orange][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=yellow][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=yellow][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=yellow][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=green][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=green][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=green][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=blue][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=blue][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=blue][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=violet][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=violet][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=violet][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=pink][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.ratingStar[data-appearance=pink][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.ratingStar[data-appearance=pink][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}

package/dist/cjs/helperComponents/RatingStar/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { VALUE } from './constants';
+export type Value = ValueOf<typeof VALUE>;

package/dist/cjs/helperComponents/RatingStar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1 @@
+export * from './RatingStar';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RatingStar"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './types';

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/style.css

@@ -0,0 +1,214 @@
+.rating{
+  display:inline-flex;
+  align-items:center;
+}
+.firstStarContainer{
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:50%;
+}
+
+.ratingStar{
+  cursor:pointer;
+  position:relative;
+  display:inline-block;
+  box-sizing:border-box;
+}
+.ratingStar svg{
+  display:block;
+}
+.ratingStar[data-size=xs]{
+  min-width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-rating-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-xs, var(--sn-primitive-dimension-2, 2px)));
+}
+.ratingStar[data-size=xs] svg{
+  width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px)) !important;
+  height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
+}
+.ratingStar[data-size=xs] .firstStarContainer,
+.ratingStar[data-size=xs] .secondStarContainer{
+  height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
+}
+.ratingStar[data-size=s]{
+  min-width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  border-radius:var(--sn-rating-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.ratingStar[data-size=s] svg{
+  width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px)) !important;
+  height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
+}
+.ratingStar[data-size=s] .firstStarContainer,
+.ratingStar[data-size=s] .secondStarContainer{
+  height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
+}
+.ratingStar:focus-visible{
+  border-radius:var(--sn-primitive-dimension-2, 2px);
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.ratingStar[data-appearance=primary][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=primary][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=primary][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=primary][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.ratingStar[data-appearance=neutral][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=neutral][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=neutral][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=neutral][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.ratingStar[data-appearance=red][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=red][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=red][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=red][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.ratingStar[data-appearance=orange][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=orange][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=orange][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=orange][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.ratingStar[data-appearance=yellow][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=yellow][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=yellow][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=yellow][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.ratingStar[data-appearance=green][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=green][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=green][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=green][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.ratingStar[data-appearance=blue][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=blue][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=blue][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=blue][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.ratingStar[data-appearance=violet][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=violet][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=violet][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=violet][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.ratingStar[data-appearance=pink][data-value="0%"] .firstStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="0%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="50%"] .firstStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.ratingStar[data-appearance=pink][data-value="50%"] .secondStarContainer{
+  color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.ratingStar[data-appearance=pink][data-value="100%"] .firstStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.ratingStar[data-appearance=pink][data-value="100%"] .secondStarContainer{
+  color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { APPEARANCE, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,3 @@
+import { Value } from './helperComponents';
+export declare function getRatingStarValue(starIndex: number, rating: number, allowHalf: boolean): Value;
+export declare function getStarValue(starIndex: number, value: Value, allowHalf: boolean): number;

package/dist/cjs/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRatingStarValue = getRatingStarValue;
+exports.getStarValue = getStarValue;
+const constants_1 = require("./constants");
+const helperComponents_1 = require("./helperComponents");
+function getRatingStarValue(starIndex, rating, allowHalf) {
+    const diff = rating - starIndex;
+    if (diff >= 0) {
+        return helperComponents_1.VALUE.Full;
+    }
+    if (allowHalf && diff === constants_1.HALF_STAR_VALUE * -1) {
+        return helperComponents_1.VALUE.Half;
+    }
+    return helperComponents_1.VALUE.Zero;
+}
+function getStarValue(starIndex, value, allowHalf) {
+    return allowHalf && value === helperComponents_1.VALUE.Half ? starIndex - constants_1.HALF_STAR_VALUE : starIndex;
+}

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

@@ -0,0 +1,28 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { Appearance, Size } from '../../types.js';
+export type RatingProps = WithSupportProps<{
+    /** Размер */
+    size?: Size;
+    /** Внешний вид (цветовая схема) */
+    appearance?: Appearance;
+    /** Общее количество звезд */
+    count: number;
+    /** Значение количества звезд в случае необходимости управления */
+    value?: number;
+    /** Количество звезд, заполненных по умолчанию */
+    defaultValue?: number;
+    /** Показывать или нет рейтинг в виде половины звезды */
+    allowHalf: boolean;
+    /** Разрещает сброс рейтинга при повторном нажатии на звезду */
+    allowClear: boolean;
+    /** Является ли поле доступным на изменение */
+    readonly: boolean;
+    /** Колбек, вызываемый на смену состояния */
+    onChange?(value: number): void;
+    /** CSS-класс */
+    className?: string;
+}>;
+/**
+ * Компонент Rating
+ */
+export declare function Rating({ count, value, defaultValue, allowHalf, allowClear, readonly, appearance, size, className, onChange, ...rest }: RatingProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Rating/Rating.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+import { APPEARANCE, DEFAULT_RATING_VALUE, DEFAULT_STAR_COUNT, SIZE, TEST_IDS } from '../../constants.js';
+import { RatingStar } from '../../helperComponents/index.js';
+import { getRatingStarValue, getStarValue } from '../../utils.js';
+import styles from './styles.module.css';
+/**
+ * Компонент Rating
+ */
+export function Rating({ count = DEFAULT_STAR_COUNT, value, defaultValue = DEFAULT_RATING_VALUE, allowHalf = false, allowClear = false, readonly = false, appearance = APPEARANCE.Yellow, size = SIZE.S, className, onChange, ...rest }) {
+    const [hoverRating, setHoverRating] = useState(null);
+    const [rating, setRating] = useUncontrolledProp(value, defaultValue, onChange);
+    function getRating(updatedValue) {
+        return rating === updatedValue && allowClear ? 0 : updatedValue;
+    }
+    const handleMouseEnter = (starIndex) => (value) => {
+        if (readonly) {
+            return;
+        }
+        setHoverRating(getStarValue(starIndex, value, allowHalf));
+    };
+    const handleMouseLeave = () => {
+        if (readonly) {
+            return;
+        }
+        setHoverRating(null);
+    };
+    const handleClick = (starIndex) => (value) => {
+        if (readonly) {
+            return;
+        }
+        setRating(getRating(getStarValue(starIndex, value, allowHalf)));
+    };
+    const handleKeyDown = (starIndex) => e => {
+        if (e.code === 'Enter' || e.code === 'Space') {
+            e.stopPropagation();
+            setRating(getRating(starIndex));
+        }
+    };
+    return (_jsx("div", { className: cn(styles.rating, className), ...extractSupportProps(rest), children: [...Array(count)].map((_, index) => {
+            const starIndex = index + 1;
+            const value = getRatingStarValue(starIndex, hoverRating ?? rating, allowHalf);
+            return (_jsx(RatingStar, { value: value, size: size, readonly: readonly, appearance: appearance, handleMouseEnter: handleMouseEnter(starIndex), handleMouseLeave: handleMouseLeave, handleKeyDown: handleKeyDown(starIndex), handleClick: handleClick(starIndex), "data-test-id": `${TEST_IDS.star}-${starIndex}` }, index));
+        }) }));
+}

package/dist/esm/components/Rating/index.d.ts

@@ -0,0 +1 @@
+export * from './Rating.js';

package/dist/esm/components/Rating/index.js

@@ -0,0 +1 @@
+export * from './Rating.js';

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

@@ -0,0 +1,4 @@
+.rating{
+  display:inline-flex;
+  align-items:center;
+}

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

@@ -0,0 +1 @@
+export * from './Rating/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './Rating/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,24 @@
+export declare const APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};
+export declare const TEST_IDS: {
+    readonly root: "rating";
+    readonly star: "rating__star";
+    readonly starHalfLeft: "rating__star-half-left";
+    readonly starHalfRight: "rating__star-half-right";
+};
+export declare const DEFAULT_STAR_COUNT = 5;
+export declare const DEFAULT_RATING_VALUE = 0;
+export declare const HALF_STAR_VALUE = 0.5;