@mindly/ui-components 5.98.16 → 5.98.18

package/dist/esm/lib2/shared/ui/ListItems/styles.js

@@ -0,0 +1,63 @@
+import { tv } from 'tailwind-variants';
+export const listItemsStyles = tv({
+    base: '',
+    variants: {
+        withBorders: {
+            true: '',
+        },
+        isDisabled: {
+            true: '',
+        },
+        status: {
+            error: '',
+            attention: '',
+        },
+    },
+    slots: {
+        items: 'lines-none',
+        item: 'px-5',
+        itemInnerContainer: 'flex flex-1 justify-between items-center py-4',
+        itemInnerContentWrapper: 'flex items-center gap-x-4',
+        itemInnerContent: 'flex flex-col',
+    },
+    compoundSlots: [
+        {
+            slots: ['items'],
+            withBorders: true,
+            className: 'rounded-[20px] border border-solid border-[#eeeeee]',
+        },
+        {
+            slots: ['itemInnerContainer'],
+            withBorders: true,
+            className: 'border-b border-b-solid border-b-typography-typography-primary/10',
+        },
+        {
+            slots: ['item'],
+            withBorders: false,
+            className: 'border-b border-b-solid border-b-typography-typography-primary/10',
+        },
+        {
+            slots: ['item'],
+            isDisabled: false,
+            className: 'cursor-pointer',
+        },
+        {
+            slots: ['item'],
+            isDisabled: true,
+            className: 'opacity-30 pointer-events-none cursor-default',
+        },
+        {
+            slots: ['item', 'itemInnerContainer'],
+            status: 'error',
+            className: '!bg-color-info-light-red-not-red !text-color-info-red-not-red',
+        },
+        {
+            slots: ['item', 'itemInnerContainer'],
+            status: 'attention',
+            className: '!bg-badges-attention-bg !text-badges-attention-main',
+        },
+    ],
+    defaultVariants: {
+        withBorders: false,
+    },
+});

package/dist/esm/lib2/shared/ui/ListSimple/ListSimple.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TypographyVariantsEnum, Typography, IconCheckboxChecked } from '../../index';
+const ListSimple = ({ list }) => {
+    return (_jsx("div", Object.assign({ className: "flex flex-col" }, { children: list.map((item) => (_jsxs("div", Object.assign({ className: "flex items-center mt-2 first:mt-0" }, { children: [_jsx("div", Object.assign({ className: "min-w-4 mr-2 text-color-info-green" }, { children: _jsx(IconCheckboxChecked, { size: 16 }) })), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular }, { children: item }))] }), item))) })));
+};
+export default ListSimple;

package/dist/esm/lib2/shared/ui/ListSimple/ListSimple.stories.js

@@ -0,0 +1,15 @@
+import ListSimple from './ListSimple';
+const meta = {
+    title: 'v2/Shared/ListSimple',
+    component: ListSimple,
+};
+export default meta;
+export const Default = {
+    args: {
+        list: [
+            'Психотерапевт, психолог, коуч',
+            'Працює в методиці Когнітивно-поведінкова терапія (КПТ), Психоаналіз, Позитивна психологія та інші',
+            'Допоможе навчитись правильно ставити цілі, розкрити свої сильні сторони',
+        ]
+    },
+};

package/dist/esm/lib2/shared/ui/ListSimple/index.js

@@ -0,0 +1 @@
+export { default as ListSimple } from './ListSimple';

package/dist/esm/lib2/shared/ui/Loading/Loading.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { IonLoading } from '@ionic/react';
+import styles from './Loading.module.css';
+const Loading = ({ isOpen }) => {
+    return (_jsx(IonLoading, { isOpen: isOpen, mode: 'ios', spinner: 'crescent', cssClass: styles.loading }));
+};
+export default React.memo(Loading);

package/dist/esm/lib2/shared/ui/Loading/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './Loading';

package/dist/esm/lib2/shared/ui/MatchProgress/MatchProgress.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { Typography, TypographyVariantsEnum } from '../Typography';
+const MatchProgress = ({ className, percentMatch, children, }) => {
+    const colorBorder = useMemo(() => {
+        if (percentMatch >= 80)
+            return '--color-info-green';
+        return '--color-info-orange';
+    }, [percentMatch]);
+    const colorBg = useMemo(() => {
+        if (percentMatch >= 80)
+            return 'bg-badges-success-main';
+        return 'bg-badges-attention-main';
+    }, [percentMatch]);
+    return (_jsxs("div", Object.assign({ className: classNames('relative inline-flex justify-center items-center rounded-full p-[4px]', className), style: {
+            background: `conic-gradient(rgba(var(${colorBorder})) ${percentMatch}%, #ffffff ${percentMatch}% 100%)`,
+        } }, { children: [percentMatch > 0 && (_jsxs(Typography, Object.assign({ variant: TypographyVariantsEnum.Badge12Semi, className: classNames('py-1 px-2 !text-color-white rounded-2xl absolute top-full -translate-y-1/2 left-1/2 -translate-x-1/2 -mt-1 z-20', colorBg) }, { children: [percentMatch, "%"] }))), _jsx("div", Object.assign({ className: "relative z-10 bg-color-white rounded-full" }, { children: children }))] })));
+};
+export default React.memo(MatchProgress);

package/dist/esm/lib2/shared/ui/MatchProgress/index.js

@@ -0,0 +1 @@
+export { default as MatchProgress } from './MatchProgress';

package/dist/esm/lib2/shared/ui/ModalSheet/ModalSheet.js

@@ -0,0 +1,29 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { IonModal } from '@ionic/react';
+import classNames from 'classnames';
+import styles from './ModalSheet.module.css';
+import { Button_v2 as Button } from '../Button_v2';
+import { IconClose } from '../../assets';
+const ModalSheet = React.forwardRef(function ModalSheet(_a, ref) {
+    var { heightInPx, className, initialBreakpoint = 1, breakpoints = [0, 1], withCloseButton, children } = _a, props = __rest(_a, ["heightInPx", "className", "initialBreakpoint", "breakpoints", "withCloseButton", "children"]);
+    const handleDismiss = () => {
+        var _a;
+        if (ref && 'current' in ref) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.dismiss();
+        }
+    };
+    return (_jsxs(IonModal, Object.assign({}, props, { ref: ref, style: Object.assign({}, (heightInPx && { '--height': `${heightInPx}px` })), initialBreakpoint: initialBreakpoint, breakpoints: breakpoints, className: classNames(styles.root, className) }, { children: [withCloseButton && (_jsx("div", Object.assign({ className: "flex justify-end mt-4" }, { children: _jsx(Button, { fill: "clear", onClick: handleDismiss, customSize: "smaller", icon: _jsx(IconClose, {}) }) }))), children] })));
+});
+export default ModalSheet;

package/dist/esm/lib2/shared/ui/ModalSheet/index.js

@@ -0,0 +1 @@
+export { default as ModalSheet } from './ModalSheet';

package/dist/esm/lib2/shared/ui/ModalSheet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/lib2/shared/ui/Picture/Picture.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { PictureWrapper } from './Picture.style';
+import { Skeleton_v2 } from '../Skeleton_v2';
+const Picture = ({ width, height, src, srcType, alt, className = '', responsive, containerWidth, }) => {
+    const { ref, inView } = useInView({
+        triggerOnce: true,
+        rootMargin: '200px 0px',
+    });
+    const [isLoading, setIsLoading] = React.useState(true);
+    const onLoad = useCallback(() => {
+        setIsLoading(false);
+    }, []);
+    const aspectRatio = useMemo(() => {
+        return height && width ? height / width : 0;
+    }, [height, width]);
+    const [calculatedWidth, calculatedHeight] = useMemo(() => {
+        if (!containerWidth) {
+            return [width, height];
+        }
+        const newWidth = containerWidth < width ? containerWidth : width;
+        const newHeight = newWidth * aspectRatio;
+        return [newWidth, newHeight];
+    }, [containerWidth, width, height, aspectRatio]);
+    return (_jsxs(PictureWrapper, Object.assign({ ref: ref, style: responsive
+            ? {
+                position: 'relative',
+                width: `${calculatedWidth}px`,
+                height: `${calculatedHeight}px`,
+            }
+            : {
+                width: `${width}px`,
+                height: `${height}px`,
+            }, className: className }, { children: [isLoading && _jsx(Skeleton_v2, { className: 'skeleton' }), inView ? (_jsxs("picture", { children: [(!!(src === null || src === void 0 ? void 0 : src.webp) || !!(src === null || src === void 0 ? void 0 : src.webp2x)) && (_jsx("source", { srcSet: `${(src === null || src === void 0 ? void 0 : src.webp) ? src.webp + ' 1x,' : ''} ${(src === null || src === void 0 ? void 0 : src.webp2x) ? src.webp2x + ' 2x' : ''}`, type: "image/webp" })), _jsx("source", { srcSet: `${(src === null || src === void 0 ? void 0 : src.src) ? src.src + ' 1x,' : ''} ${(src === null || src === void 0 ? void 0 : src.src2x) ? src.src2x + ' 2x' : ''}`, type: srcType }), _jsx("img", { src: src === null || src === void 0 ? void 0 : src.src, loading: 'lazy', alt: alt, onLoad: onLoad })] })) : null] })));
+};
+export default React.memo(Picture);

package/dist/esm/lib2/shared/ui/Picture/Picture.style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const PictureWrapper = styled.div `
+  position: relative;
+
+  picture {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .skeleton {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+`;

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

@@ -0,0 +1 @@
+export { default as Picture } from './Picture';

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import { IonProgressBar } from '@ionic/react';
+import { Typography, TypographyVariantsEnum } from '../Typography';
+import { EDGE_VALUE } from './constants';
+import moduleStyles from './ProgressBarDashed.module.css';
+import { progressBarDashedStyles } from './styles';
+export const ProgressBarDash = ({ t, width, value, maxValue, start, end, progress, isLast, isCurrentRange, }) => {
+    const styles = progressBarDashedStyles();
+    const { widthRatio, progressValue, } = useMemo(() => {
+        const getValueRatio = (value) => {
+            let val = (value - (start - 1)) / ((end > EDGE_VALUE ? 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 (_jsxs("div", Object.assign({ className: 'flex flex-col', style: { width } }, { children: [_jsxs("div", Object.assign({ className: styles.barArea() }, { children: [_jsx(IonProgressBar, { mode: "ios", value: progressValue * (1 / widthRatio), className: `${styles.barPrimary()} ${classNames(moduleStyles.init, moduleStyles.success)}`, style: { width: `${100 * widthRatio}%`, left: 0, zIndex: 2 }, reversed: false }), widthRatio < 1 &&
+                        _jsx(IonProgressBar, { mode: "ios", value: 0, className: `${styles.barDefault()} ${classNames(moduleStyles.init, moduleStyles.default)}`, style: { zIndex: 1 }, reversed: false })] })), _jsxs(Typography, Object.assign({ variant: TypographyVariantsEnum[!isCurrentRange ? 'Text14Regular' : 'Text14Semi'], opacity: !isCurrentRange ? 50 : 100, className: 'text-typography-typography-secondary mb-1' }, { children: [value * 100, "%"] })), _jsx(Typography, Object.assign({ variant: 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
+                    }) }))] })));
+};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProgressBarDash } from './ProgressBarDash';
+import { progressBarDashedStyles } from './styles';
+const ProgressBarDashed = ({ t, ranges, maxValue, progress, className, }) => {
+    var _a;
+    const styles = progressBarDashedStyles();
+    const currentRange = (_a = ranges.find((range) => (maxValue !== null && maxValue !== void 0 ? maxValue : 0) <= range.end)) !== null && _a !== void 0 ? _a : {
+        start: 0,
+    };
+    return (_jsx("div", Object.assign({ className: `${styles.progressBar()} ${className}` }, { children: ranges.map((range, index) => (_jsx(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))) })));
+};
+export default ProgressBarDashed;

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

@@ -0,0 +1 @@
+export const EDGE_VALUE = 60;

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

@@ -0,0 +1 @@
+export { default as ProgressBarDashed } from './ProgressBarDashed';

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+export const progressBarDashedStyles = 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/esm/lib2/shared/ui/ProgressBar_v2/ProgressBar_v2.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+import classNames from 'classnames';
+import styles from './ProgressBar_v2.module.css';
+const ProgressBar_v2 = ({ variant = 'default', progress, className, reversed = false, animationDuration, onProgressEnd, }) => {
+    const [animatedProgress, setAnimatedProgress] = useState(progress);
+    useEffect(() => {
+        if (animatedProgress === 1) {
+            onProgressEnd === null || onProgressEnd === void 0 ? void 0 : onProgressEnd();
+        }
+    }, [animatedProgress, onProgressEnd]);
+    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 (_jsx(IonProgressBar, { mode: "ios", value: animatedProgress, className: classNames(styles.init, styles[variant], className), reversed: reversed }));
+};
+export default React.memo(ProgressBar_v2);

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

@@ -0,0 +1 @@
+export { default as ProgressBar_v2 } from './ProgressBar_v2';

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

@@ -0,0 +1,20 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactRating from 'react-rating';
+import { IconStar, IconStarFilled } from '../../assets';
+const Rating = (_a) => {
+    var { size = 40, className = '' } = _a, props = __rest(_a, ["size", "className"]);
+    return (_jsx(ReactRating, Object.assign({ className: `leading-[0] !inline-flex flex-nowrap gap-4 ${className}`, emptySymbol: _jsx(IconStar, { className: 'text-controls-element-unselected', width: size, height: size }), fullSymbol: _jsx(IconStarFilled, { className: 'text-controls-element-selected', width: size, height: size }) }, props)));
+};
+export default React.memo(Rating);

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

@@ -0,0 +1,13 @@
+import Rating from './Rating';
+const meta = {
+    title: 'v2/Shared/Rating',
+    component: Rating,
+};
+export default meta;
+export const Default = {
+    args: {
+        initialRating: 0,
+        readonly: false,
+        size: 40,
+    },
+};

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

@@ -0,0 +1 @@
+export { default as Rating } from './Rating';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useRatingContext } from '../../hooks';
+const RatingCircle = () => {
+    const overlapTimer = useRef(null);
+    const [overlapAnimation, setOverlapAnimation] = useState(false);
+    const [overlapValue, setOverlapValue] = useState(0);
+    const { progress, animationSeconds = 1, isRatingDisabled, circleSize, radius, circumference, dash, overlap, viewBox, strokeWidth, isColorless, styles, isReverse, isWithOverlap, isWithAnimation, } = useRatingContext();
+    useEffect(() => {
+        setOverlapAnimation(false);
+        setOverlapValue(0);
+        overlapTimer.current = setTimeout(() => {
+            setOverlapAnimation(true);
+            clearTimeout(overlapTimer.current);
+            overlapTimer.current = null;
+        }, isWithAnimation ? animationSeconds * 1000 : 0);
+    }, [progress]);
+    useEffect(() => {
+        if (overlap && overlapAnimation) {
+            setOverlapValue(overlap);
+        }
+    }, [overlapAnimation, overlap]);
+    return (_jsx("div", Object.assign({ style: { width: circleSize, height: circleSize }, className: 'relative' }, { children: _jsxs("svg", Object.assign({ width: circleSize, height: circleSize, viewBox: viewBox }, { children: [_jsx("circle", { fill: "none", className: styles.defaultStroke(), cx: circleSize / 2, cy: circleSize / 2, r: radius, strokeWidth: `${strokeWidth}px` }), !isRatingDisabled &&
+                    _jsxs(_Fragment, { children: [_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 &&
+                                _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, { children: [_jsx("stop", { offset: "0%", style: {
+                                                            'stopOpacity': 1,
+                                                            'stopColor': !isColorless ? 'rgb(34, 89, 42)' : 'rgb(61, 61, 62)',
+                                                        } }), _jsx("stop", { offset: "100%", style: {
+                                                            'stopOpacity': 0,
+                                                            'stopColor': !isColorless ? 'rgb(50, 131, 62)' : 'rgb(131, 132, 133)',
+                                                        } })] })) }), _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'
+                                            } })] })] })] })) })));
+};
+export default RatingCircle;

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

@@ -0,0 +1,48 @@
+import RatingCircleWrapper from './RatingCircleWrapper';
+const meta = {
+    title: 'v2/Shared/RatingCircle',
+    component: RatingCircleWrapper,
+};
+export default meta;
+export const 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/esm/lib2/shared/ui/RatingCircle/RatingCircleBreakpoints.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBreakPointsPosition, useRatingContext } from '../../hooks';
+import { CircleBreakpointIcon } from './RatingCircleIcons';
+const RatingCircleBreakpoints = () => {
+    const { size, circleSize, breakPoints, isShowBreakPoints, strokeWidth, maxValue, styles, } = useRatingContext();
+    const breakPointsPosition = useBreakPointsPosition({
+        radius: circleSize / 2,
+        strokeWidth,
+        breakPoints,
+        maxValue,
+    });
+    if (size !== 'L' || !isShowBreakPoints || !(breakPoints === null || breakPoints === void 0 ? void 0 : breakPoints.length)) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: breakPointsPosition.map((position, index) => (_jsx("div", { children: CircleBreakpointIcon(Object.assign({ className: styles.breakPoint({ className: 'absolute' }), index }, position)) }, index))) }));
+};
+export default RatingCircleBreakpoints;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRangeIndex, useRatingContext, useRatingCircleContentValue } from '../../hooks';
+import { CircleRatingIcon } from './RatingCircleIcons';
+import { Typography, TypographyVariantsEnum } from '../Typography';
+const RatingCircleContent = () => {
+    const { size, decimal, isReverse, content, maxValue, progress, ranges, styles, } = useRatingContext();
+    const contentValue = useRatingCircleContentValue({ progress, isPercentage: content === null || content === void 0 ? void 0 : content.isPercentage, decimal });
+    const index = useRangeIndex({ progress, maxValue, ranges, isReverse });
+    if (!content) {
+        return null;
+    }
+    if (!(content === null || content === void 0 ? void 0 : content.showIcon) && size !== 'S') {
+        return (_jsxs("div", Object.assign({ className: styles.contentWrapper() }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum[size === 'L' ? 'Title48Semi' : 'Text13Semi'], className: styles.contentColor({
+                        className: "capitalize text-center",
+                    }) }, { children: contentValue })), !!(content === null || content === void 0 ? void 0 : content.text) &&
+                    _jsx(Typography, Object.assign({ variant: 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 (_jsx("div", Object.assign({ className: styles.contentWrapper() }, { children: CircleRatingIcon({ index, className: styles.icon() }) })));
+    }
+    else {
+        return null;
+    }
+};
+export default RatingCircleContent;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BREAKPOINT_ICON_SIZE } from '../../hooks';
+import { IconClose, IconCancelRounded, IconWarning, IconCheck, IconCapFilled } from '../../assets';
+export function CircleRatingIcon({ index, className, }) {
+    const ICONS = {
+        0: _jsx(IconClose, { className: className, color: "currentColor" }),
+        1: _jsx(IconWarning, { className: className, color: "currentColor" }),
+        2: _jsx(IconCheck, { className: className, color: "currentColor" }),
+    };
+    return ICONS[index];
+}
+export function CircleBreakpointIcon({ index, top, left, className, }) {
+    const ICONS = {
+        0: _jsx(IconCancelRounded, { size: BREAKPOINT_ICON_SIZE, className: className, color: "currentColor", style: { top, left } }),
+        1: _jsx(IconCapFilled, { size: BREAKPOINT_ICON_SIZE, className: className, color: "currentColor", style: { top, left } }),
+    };
+    return ICONS[index];
+}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, TypographyVariantsEnum } from '../Typography';
+import { useRatingContext } from '../../hooks';
+const RatingCircleLegend = () => {
+    const { size, styles, legend, isShowLegend } = useRatingContext();
+    if (size !== 'L' || !isShowLegend || !(legend === null || legend === void 0 ? void 0 : legend.length)) {
+        return null;
+    }
+    return (_jsx("div", Object.assign({ className: "flex justify-between flex-row-reverse" }, { children: legend.map((item, index) => (_jsxs("div", Object.assign({ className: "flex flex-col items-center mt-6 w-1/3" }, { children: [_jsx("div", { className: styles.legendItem({
+                        color: index,
+                        className: 'w-4 h-4 rounded-full items-center mb-2',
+                    }) }), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text13Regular, className: "text-center" }, { children: item }))] }), index))) })));
+};
+export default RatingCircleLegend;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleRatingProvider } from '../../providers';
+import RatingCircle from './RatingCircle';
+import RatingCircleContent from './RatingCircleContent';
+import RatingCircleLegend from './RatingCircleLegend';
+import RatingCircleBreakpoints from './RatingCircleBreakpoints';
+import { SIZES } from '../../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 (_jsx(CircleRatingProvider, Object.assign({ t: t, data: {
+            size,
+            progress,
+            ranges,
+            decimal,
+            content,
+            isColorless,
+            isRatingDisabled,
+            isReverse,
+            isShowLegend,
+            animationSeconds,
+            isShowBreakPoints,
+            isZeroTransparent,
+            isWithOverlap,
+            isWithAnimation,
+        } }, { children: _jsxs("div", Object.assign({ className: `${className || ''}` }, { children: [_jsxs("div", Object.assign({ style: { width: SIZES[size], height: SIZES[size] }, className: 'relative m-auto' }, { children: [_jsx(RatingCircle, {}), _jsx(RatingCircleBreakpoints, {}), _jsx(RatingCircleContent, {})] })), _jsx("div", Object.assign({ className: 'w-full relative' }, { children: _jsx(RatingCircleLegend, {}) }))] })) })));
+};
+export default RatingCircleWrapper;

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

@@ -0,0 +1 @@
+export { default as RatingCircleWrapper } from './RatingCircleWrapper';