@mindly/ui-components 7.5.2 → 8.0.0-alpha.32

package/dist/cjs/lib2/shared/ui/Picture/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Picture = void 0;
+var Picture_1 = require("./Picture");
+Object.defineProperty(exports, "Picture", { enumerable: true, get: function () { return __importDefault(Picture_1).default; } });

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/ProgressBarDash.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBarDash = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = require("@ionic/react");
+const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
+const ProgressBarDashed_module_css_1 = __importDefault(require("./ProgressBarDashed.module.css"));
+const styles_1 = require("./styles");
+const ProgressBarDash = ({ t, width, value, maxValue, start, end, progress, isLast, isCurrentRange, }) => {
+    const styles = (0, styles_1.progressBarDashedStyles)();
+    const { widthRatio, progressValue, } = (0, react_1.useMemo)(() => {
+        const getValueRatio = (value) => {
+            let val = (value - (start - 1)) / ((end > constants_1.EDGE_VALUE ? constants_1.EDGE_VALUE : end) - (start - 1));
+            if (val > 1)
+                val = 1;
+            if (val < 0)
+                val = 0;
+            return val;
+        };
+        return {
+            widthRatio: getValueRatio(maxValue),
+            progressValue: getValueRatio(progress),
+        };
+    }, [start, end, maxValue, progress]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col', style: { width } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: styles.barArea() }, { children: [(0, jsx_runtime_1.jsx)(react_2.IonProgressBar, { mode: "ios", value: progressValue * (1 / widthRatio), className: `${styles.barPrimary()} ${(0, classnames_1.default)(ProgressBarDashed_module_css_1.default.init, ProgressBarDashed_module_css_1.default.success)}`, style: { width: `${100 * widthRatio}%`, left: 0, zIndex: 2 }, reversed: false }), widthRatio < 1 &&
+                        (0, jsx_runtime_1.jsx)(react_2.IonProgressBar, { mode: "ios", value: 0, className: `${styles.barDefault()} ${(0, classnames_1.default)(ProgressBarDashed_module_css_1.default.init, ProgressBarDashed_module_css_1.default.default)}`, style: { zIndex: 1 }, reversed: false })] })), (0, jsx_runtime_1.jsxs)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum[!isCurrentRange ? 'Text14Regular' : 'Text14Semi'], opacity: !isCurrentRange ? 50 : 100, className: 'text-typography-typography-secondary mb-1' }, { children: [value * 100, "%"] })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum.Text12Regular, opacity: 50, className: 'text-typography-typography-secondary' }, { children: !isLast
+                    ? t('payments.session_count_range.text', {
+                        from: start,
+                        count: end,
+                    })
+                    : t('payments.session_count_more.text', {
+                        count: start
+                    }) }))] })));
+};
+exports.ProgressBarDash = ProgressBarDash;

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/ProgressBarDashed.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ProgressBarDash_1 = require("./ProgressBarDash");
+const styles_1 = require("./styles");
+const ProgressBarDashed = ({ t, ranges, maxValue, progress, className, }) => {
+    var _a;
+    const styles = (0, styles_1.progressBarDashedStyles)();
+    const currentRange = (_a = ranges.find((range) => (maxValue !== null && maxValue !== void 0 ? maxValue : 0) <= range.end)) !== null && _a !== void 0 ? _a : {
+        start: 0,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${styles.progressBar()} ${className}` }, { children: ranges.map((range, index) => ((0, jsx_runtime_1.jsx)(ProgressBarDash_1.ProgressBarDash, { width: `${index === ranges.length - 1 ? 28.13 : 35.25}%`, t: t, maxValue: maxValue, value: range.value, start: range.start, end: range.end, isCurrentRange: !!(currentRange.start === range.start), progress: progress || 0, isLast: index === ranges.length - 1 }, index))) })));
+};
+exports.default = ProgressBarDashed;

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EDGE_VALUE = void 0;
+exports.EDGE_VALUE = 60;

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBarDashed = void 0;
+var ProgressBarDashed_1 = require("./ProgressBarDashed");
+Object.defineProperty(exports, "ProgressBarDashed", { enumerable: true, get: function () { return __importDefault(ProgressBarDashed_1).default; } });

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/styles.d.ts

@@ -1,45 +1 @@
-export declare const progressBarDashedStyles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<{
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined> | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<{
-            progressBar: string;
-            barArea: string;
-            barPrimary: string;
-            barDefault: string;
-        }, undefined>;
-    } | undefined;
-} | {}, {
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<{
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined> | {}>, import("tailwind-variants").TVVariantsDefault<{
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined> | {}, {
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<{
-    progressBar: string;
-    barArea: string;
-    barPrimary: string;
-    barDefault: string;
-}, undefined> | {}>, unknown, unknown, undefined>>;
+export declare const progressBarDashedStyles: any;

package/dist/cjs/lib2/shared/ui/ProgressBarDashed/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressBarDashedStyles = void 0;
+const tailwind_variants_1 = require("tailwind-variants");
+exports.progressBarDashedStyles = (0, tailwind_variants_1.tv)({
+    slots: {
+        progressBar: 'w-full flex justify-between items-start',
+        barArea: 'w-full h-2 mb-2 relative',
+        barPrimary: 'w-full h-2 rounded-full absolute bg-color-info-light-mint',
+        barDefault: 'w-full h-2 rounded-full absolute ',
+    },
+});

package/dist/cjs/lib2/shared/ui/ProgressBar_v2/ProgressBar_v2.js

@@ -0,0 +1,63 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@ionic/react");
+const classnames_1 = __importDefault(require("classnames"));
+const ProgressBar_v2_module_css_1 = __importDefault(require("./ProgressBar_v2.module.css"));
+const ProgressBar_v2 = ({ variant = 'default', progress, className, reversed = false, animationDuration, onProgressEnd, }) => {
+    const [animatedProgress, setAnimatedProgress] = (0, react_1.useState)(progress);
+    (0, react_1.useEffect)(() => {
+        if (animatedProgress === 1) {
+            onProgressEnd === null || onProgressEnd === void 0 ? void 0 : onProgressEnd();
+        }
+    }, [animatedProgress, onProgressEnd]);
+    (0, react_1.useEffect)(() => {
+        if (animationDuration) {
+            setAnimatedProgress(0);
+            const interval = setInterval(() => {
+                setAnimatedProgress((prev) => {
+                    if (prev === 1) {
+                        clearInterval(interval);
+                        return 1;
+                    }
+                    else {
+                        return Number((prev + 0.01).toFixed(2));
+                    }
+                });
+            }, animationDuration);
+            return () => clearInterval(interval); // Очищаем интервал при размонтировании компонента
+        }
+        else {
+            setAnimatedProgress(progress); // Если анимация не включена, используем статичный прогресс
+        }
+    }, [progress, animationDuration]);
+    return ((0, jsx_runtime_1.jsx)(react_2.IonProgressBar, { mode: "ios", value: animatedProgress, className: (0, classnames_1.default)(ProgressBar_v2_module_css_1.default.init, ProgressBar_v2_module_css_1.default[variant], className), reversed: reversed }));
+};
+exports.default = react_1.default.memo(ProgressBar_v2);

package/dist/cjs/lib2/shared/ui/ProgressBar_v2/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar_v2 = void 0;
+var ProgressBar_v2_1 = require("./ProgressBar_v2");
+Object.defineProperty(exports, "ProgressBar_v2", { enumerable: true, get: function () { return __importDefault(ProgressBar_v2_1).default; } });

package/dist/cjs/lib2/shared/ui/ProgressCard/styles.d.ts

@@ -1 +1 @@
-export declare const progressCardStyles: import("tailwind-variants").TVReturnType<{}, undefined, "bg-color-background-anti-flash-light flex flex-col items-center justify-between pb-7 pt-10 px-7 size-full rounded-[20px] h-full", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "bg-color-background-anti-flash-light flex flex-col items-center justify-between pb-7 pt-10 px-7 size-full rounded-[20px] h-full", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+export declare const progressCardStyles: any;

package/dist/cjs/lib2/shared/ui/PromptCard/styles.d.ts

@@ -1 +1 @@
-export declare const promptCardStyles: import("tailwind-variants").TVReturnType<{}, undefined, "bg-color-background-anti-flash-light rounded-[20px] p-6 flex flex-col gap-5 items-center justify-center w-[280px] flex-shrink-0", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "bg-color-background-anti-flash-light rounded-[20px] p-6 flex flex-col gap-5 items-center justify-center w-[280px] flex-shrink-0", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+export declare const promptCardStyles: any;

package/dist/cjs/lib2/shared/ui/Rating/Rating.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_rating_1 = __importDefault(require("react-rating"));
+const assets_1 = require("../../assets");
+const Rating = (_a) => {
+    var { size = 40, className = '' } = _a, props = __rest(_a, ["size", "className"]);
+    return ((0, jsx_runtime_1.jsx)(react_rating_1.default, Object.assign({ className: `leading-[0] !inline-flex flex-nowrap gap-4 ${className}`, emptySymbol: (0, jsx_runtime_1.jsx)(assets_1.IconStar, { className: 'text-controls-element-unselected', width: size, height: size }), fullSymbol: (0, jsx_runtime_1.jsx)(assets_1.IconStarFilled, { className: 'text-controls-element-selected', width: size, height: size }) }, props)));
+};
+exports.default = react_1.default.memo(Rating);

package/dist/cjs/lib2/shared/ui/Rating/Rating.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const Rating_1 = __importDefault(require("./Rating"));
+const meta = {
+    title: 'v2/Shared/Rating',
+    component: Rating_1.default,
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        initialRating: 0,
+        readonly: false,
+        size: 40,
+    },
+};

package/dist/cjs/lib2/shared/ui/Rating/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = void 0;
+var Rating_1 = require("./Rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return __importDefault(Rating_1).default; } });

package/dist/cjs/lib2/shared/ui/Rating/types.js

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

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircle.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const RatingCircle = () => {
+    const overlapTimer = (0, react_1.useRef)(null);
+    const [overlapAnimation, setOverlapAnimation] = (0, react_1.useState)(false);
+    const [overlapValue, setOverlapValue] = (0, react_1.useState)(0);
+    const { progress, animationSeconds = 1, isRatingDisabled, circleSize, radius, circumference, dash, overlap, viewBox, strokeWidth, isColorless, styles, isReverse, isWithOverlap, isWithAnimation, } = (0, hooks_1.useRatingContext)();
+    (0, react_1.useEffect)(() => {
+        setOverlapAnimation(false);
+        setOverlapValue(0);
+        overlapTimer.current = setTimeout(() => {
+            setOverlapAnimation(true);
+            clearTimeout(overlapTimer.current);
+            overlapTimer.current = null;
+        }, isWithAnimation ? animationSeconds * 1000 : 0);
+    }, [progress]);
+    (0, react_1.useEffect)(() => {
+        if (overlap && overlapAnimation) {
+            setOverlapValue(overlap);
+        }
+    }, [overlapAnimation, overlap]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: circleSize, height: circleSize }, className: 'relative' }, { children: (0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: circleSize, height: circleSize, viewBox: viewBox }, { children: [(0, jsx_runtime_1.jsx)("circle", { fill: "none", className: styles.defaultStroke(), cx: circleSize / 2, cy: circleSize / 2, r: radius, strokeWidth: `${strokeWidth}px` }), !isRatingDisabled &&
+                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { fill: "none", className: styles.coloredStroke(), cx: circleSize / 2, cy: circleSize / 2, r: radius, strokeWidth: `${strokeWidth}px`, transform: `rotate(-90 ${circleSize / 2} ${circleSize / 2})`, strokeDasharray: `${dash},${circumference - dash}`, strokeLinecap: "round", style: { transition: isWithAnimation ? `all ${animationSeconds !== null && animationSeconds !== void 0 ? animationSeconds : 1}s` : 'none' } }), isWithOverlap && !isReverse &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", style: {
+                                                            'stopOpacity': 1,
+                                                            'stopColor': !isColorless ? 'rgb(34, 89, 42)' : 'rgb(61, 61, 62)',
+                                                        } }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", style: {
+                                                            'stopOpacity': 0,
+                                                            'stopColor': !isColorless ? 'rgb(50, 131, 62)' : 'rgb(131, 132, 133)',
+                                                        } })] })) }), (0, jsx_runtime_1.jsx)("circle", { fill: "none", cx: circleSize / 2, cy: circleSize / 2, r: radius, stroke: `${overlapValue > 0 ? 'url(#gradient)' : 'none'}`, strokeWidth: `${strokeWidth}px`, transform: `rotate(270 ${circleSize / 2} ${circleSize / 2})`, strokeDasharray: `${overlapValue}, ${circumference}`, strokeLinecap: "round", style: { transition: isWithAnimation
+                                                    ? `all ${animationSeconds >= 2 ? (animationSeconds !== null && animationSeconds !== void 0 ? animationSeconds : 1) / 2 : 1}s`
+                                                    : 'none'
+                                            } })] })] })] })) })));
+};
+exports.default = RatingCircle;

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircle.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const RatingCircleWrapper_1 = __importDefault(require("./RatingCircleWrapper"));
+const meta = {
+    title: 'v2/Shared/RatingCircle',
+    component: RatingCircleWrapper_1.default,
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        t: (key, { value }) => {
+            const translations = {
+                'legend.more_than': 'Більше {{value}}',
+                'legend.less_than': 'Менше {{value}}',
+            };
+            return translations[key];
+        },
+        animationSeconds: 1,
+        isReverse: false,
+        isRatingDisabled: false,
+        isColorless: false,
+        isShowLegend: true,
+        isShowBreakPoints: true,
+        isZeroTransparent: true,
+        isWithOverlap: true,
+        isWithAnimation: true,
+        progress: 12.00,
+        decimal: 2,
+        size: 'L',
+        content: {
+            text: 'some long long long long long long long loooooooooong text',
+            isPercentage: true,
+            showIcon: false,
+        },
+        ranges: [
+            {
+                min: 0,
+                max: 19.99,
+            },
+            {
+                min: 20,
+                max: 40,
+            },
+            {
+                min: 40.01,
+                max: 60,
+            },
+        ],
+    },
+};

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircleBreakpoints.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const RatingCircleIcons_1 = require("./RatingCircleIcons");
+const RatingCircleBreakpoints = () => {
+    const { size, circleSize, breakPoints, isShowBreakPoints, strokeWidth, maxValue, styles, } = (0, hooks_1.useRatingContext)();
+    const breakPointsPosition = (0, hooks_1.useBreakPointsPosition)({
+        radius: circleSize / 2,
+        strokeWidth,
+        breakPoints,
+        maxValue,
+    });
+    if (size !== 'L' || !isShowBreakPoints || !(breakPoints === null || breakPoints === void 0 ? void 0 : breakPoints.length)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: breakPointsPosition.map((position, index) => ((0, jsx_runtime_1.jsx)("div", { children: (0, RatingCircleIcons_1.CircleBreakpointIcon)(Object.assign({ className: styles.breakPoint({ className: 'absolute' }), index }, position)) }, index))) }));
+};
+exports.default = RatingCircleBreakpoints;

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircleContent.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const RatingCircleIcons_1 = require("./RatingCircleIcons");
+const Typography_1 = require("../Typography");
+const RatingCircleContent = () => {
+    const { size, decimal, isReverse, content, maxValue, progress, ranges, styles, } = (0, hooks_1.useRatingContext)();
+    const contentValue = (0, hooks_1.useRatingCircleContentValue)({ progress, isPercentage: content === null || content === void 0 ? void 0 : content.isPercentage, decimal });
+    const index = (0, hooks_1.useRangeIndex)({ progress, maxValue, ranges, isReverse });
+    if (!content) {
+        return null;
+    }
+    if (!(content === null || content === void 0 ? void 0 : content.showIcon) && size !== 'S') {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: styles.contentWrapper() }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum[size === 'L' ? 'Title48Semi' : 'Text13Semi'], className: styles.contentColor({
+                        className: "capitalize text-center",
+                    }) }, { children: contentValue })), !!(content === null || content === void 0 ? void 0 : content.text) &&
+                    (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum[size === 'L' ? 'Text13Regular' : 'Text12Regular'], className: "text-center w-3/5" }, { children: content === null || content === void 0 ? void 0 : content.text }))] })));
+    }
+    else if (content === null || content === void 0 ? void 0 : content.showIcon) {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles.contentWrapper() }, { children: (0, RatingCircleIcons_1.CircleRatingIcon)({ index, className: styles.icon() }) })));
+    }
+    else {
+        return null;
+    }
+};
+exports.default = RatingCircleContent;

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircleIcons.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleBreakpointIcon = exports.CircleRatingIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const assets_1 = require("../../assets");
+function CircleRatingIcon({ index, className, }) {
+    const ICONS = {
+        0: (0, jsx_runtime_1.jsx)(assets_1.IconClose, { className: className, color: "currentColor" }),
+        1: (0, jsx_runtime_1.jsx)(assets_1.IconWarning, { className: className, color: "currentColor" }),
+        2: (0, jsx_runtime_1.jsx)(assets_1.IconCheck, { className: className, color: "currentColor" }),
+    };
+    return ICONS[index];
+}
+exports.CircleRatingIcon = CircleRatingIcon;
+function CircleBreakpointIcon({ index, top, left, className, }) {
+    const ICONS = {
+        0: (0, jsx_runtime_1.jsx)(assets_1.IconCancelRounded, { size: hooks_1.BREAKPOINT_ICON_SIZE, className: className, color: "currentColor", style: { top, left } }),
+        1: (0, jsx_runtime_1.jsx)(assets_1.IconCapFilled, { size: hooks_1.BREAKPOINT_ICON_SIZE, className: className, color: "currentColor", style: { top, left } }),
+    };
+    return ICONS[index];
+}
+exports.CircleBreakpointIcon = CircleBreakpointIcon;

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircleLegend.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../Typography");
+const hooks_1 = require("../../hooks");
+const RatingCircleLegend = () => {
+    const { size, styles, legend, isShowLegend } = (0, hooks_1.useRatingContext)();
+    if (size !== 'L' || !isShowLegend || !(legend === null || legend === void 0 ? void 0 : legend.length)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-between flex-row-reverse" }, { children: legend.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col items-center mt-6 w-1/3" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.legendItem({
+                        color: index,
+                        className: 'w-4 h-4 rounded-full items-center mb-2',
+                    }) }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum.Text13Regular, className: "text-center" }, { children: item }))] }), index))) })));
+};
+exports.default = RatingCircleLegend;

package/dist/cjs/lib2/shared/ui/RatingCircle/RatingCircleWrapper.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const providers_1 = require("../../providers");
+const RatingCircle_1 = __importDefault(require("./RatingCircle"));
+const RatingCircleContent_1 = __importDefault(require("./RatingCircleContent"));
+const RatingCircleLegend_1 = __importDefault(require("./RatingCircleLegend"));
+const RatingCircleBreakpoints_1 = __importDefault(require("./RatingCircleBreakpoints"));
+const hooks_1 = require("../../hooks");
+const RatingCircleWrapper = ({ size = 'S', progress = 0, ranges = [], content = {}, isColorless = false, isShowLegend = false, isShowBreakPoints = false, isRatingDisabled = false, isReverse = false, isZeroTransparent = false, isWithOverlap = false, isWithAnimation = false, className, decimal, animationSeconds = 1, t, }) => {
+    return ((0, jsx_runtime_1.jsx)(providers_1.CircleRatingProvider, Object.assign({ t: t, data: {
+            size,
+            progress,
+            ranges,
+            decimal,
+            content,
+            isColorless,
+            isRatingDisabled,
+            isReverse,
+            isShowLegend,
+            animationSeconds,
+            isShowBreakPoints,
+            isZeroTransparent,
+            isWithOverlap,
+            isWithAnimation,
+        } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className || ''}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { width: hooks_1.SIZES[size], height: hooks_1.SIZES[size] }, className: 'relative m-auto' }, { children: [(0, jsx_runtime_1.jsx)(RatingCircle_1.default, {}), (0, jsx_runtime_1.jsx)(RatingCircleBreakpoints_1.default, {}), (0, jsx_runtime_1.jsx)(RatingCircleContent_1.default, {})] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'w-full relative' }, { children: (0, jsx_runtime_1.jsx)(RatingCircleLegend_1.default, {}) }))] })) })));
+};
+exports.default = RatingCircleWrapper;

package/dist/cjs/lib2/shared/ui/RatingCircle/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RatingCircleWrapper = void 0;
+var RatingCircleWrapper_1 = require("./RatingCircleWrapper");
+Object.defineProperty(exports, "RatingCircleWrapper", { enumerable: true, get: function () { return __importDefault(RatingCircleWrapper_1).default; } });