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

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

@@ -1,287 +1 @@
-export declare const circleRatingStyles: import("tailwind-variants").TVReturnType<{
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}, {
-    breakPoint: string;
-    defaultStroke: string;
-    coloredStroke: string;
-    whiteStroke: string;
-    icon: string;
-    contentWrapper: string;
-    contentColor: string;
-    legendItem: string;
-}, "", import("tailwind-variants/dist/config").TVConfig<{
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}, {
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}>, {
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}, {
-    breakPoint: string;
-    defaultStroke: string;
-    coloredStroke: string;
-    whiteStroke: string;
-    icon: string;
-    contentWrapper: string;
-    contentColor: string;
-    legendItem: string;
-}, import("tailwind-variants").TVReturnType<{
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}, {
-    breakPoint: string;
-    defaultStroke: string;
-    coloredStroke: string;
-    whiteStroke: string;
-    icon: string;
-    contentWrapper: string;
-    contentColor: string;
-    legendItem: string;
-}, "", import("tailwind-variants/dist/config").TVConfig<{
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}, {
-    transparent: {
-        true: {
-            coloredStroke: string;
-        };
-    };
-    isColorless: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    color: {
-        0: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        1: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-        2: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-    isPrimaryColor: {
-        true: {
-            coloredStroke: string;
-            contentColor: string;
-            icon: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
+export declare const circleRatingStyles: any;

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.circleRatingStyles = void 0;
+const tailwind_variants_1 = require("tailwind-variants");
+exports.circleRatingStyles = (0, tailwind_variants_1.tv)({
+    base: '',
+    slots: {
+        breakPoint: 'text-color-black opacity-35',
+        defaultStroke: 'stroke-color-black opacity-8',
+        coloredStroke: 'stroke-color-background-anti-flash-light',
+        icon: 'text-color-background-anti-flash-light',
+        contentWrapper: 'absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col items-center justify-center',
+        contentColor: 'text-color-background-anti-flash-light',
+        legendItem: '',
+    },
+    variants: {
+        transparent: {
+            true: {
+                coloredStroke: '!stroke-color-black !opacity-0',
+            },
+        },
+        isColorless: {
+            true: {
+                coloredStroke: '!stroke-color-background-gray-middle',
+                contentColor: '!text-color-background-gray-middle',
+                icon: '!text-color-background-gray-middle',
+            },
+        },
+        color: {
+            0: {
+                coloredStroke: 'stroke-color-info-red-default',
+                contentColor: '!text-color-info-red-default',
+                icon: 'text-color-info-red-default',
+            },
+            1: {
+                coloredStroke: 'stroke-color-info-orange',
+                contentColor: '!text-color-info-orange',
+                icon: 'text-color-info-orange',
+            },
+            2: {
+                coloredStroke: 'stroke-color-info-green',
+                contentColor: '!text-color-info-green',
+                icon: 'text-color-info-green',
+            },
+        },
+    },
+    compoundSlots: [{
+            slots: ['legendItem'],
+            color: 0,
+            className: 'bg-color-info-red-default',
+        }, {
+            slots: ['legendItem'],
+            color: 1,
+            className: 'bg-color-info-orange',
+        }, {
+            slots: ['legendItem'],
+            color: 2,
+            className: 'bg-color-info-green',
+        }, {
+            slots: ['contentColor'],
+            color: 2,
+            isColorless: true,
+            className: '!text-color-background-gray-middle',
+        }, {
+            slots: ['contentColor'],
+            color: 1,
+            isColorless: true,
+            className: '!text-color-background-gray-middle',
+        }, {
+            slots: ['contentColor'],
+            color: 0,
+            isColorless: true,
+            className: '!text-color-background-gray-middle',
+        }],
+});

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

@@ -0,0 +1,23 @@
+"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 Typography_1 = require("../Typography");
+const assets_1 = require("../../assets");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_1 = require("./styles");
+const utils_1 = require("../../utils");
+const ReviewsSummary = ({ className, rating, reviews, t, size = 'default', endAdornment, onClick, }) => {
+    const { textVariant, icon, dot } = (0, styles_1.reviewsSummaryStyle)({ size });
+    const textVariantValue = textVariant();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('flex items-center gap-1', {
+            'cursor-pointer': !!onClick,
+        }, className), onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: textVariantValue }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex items-center" }, { children: [(0, jsx_runtime_1.jsx)(assets_1.IconStarFilled, { className: icon() }), ' ', Number.isInteger(rating)
+                            ? rating.toFixed(1)
+                            : (0, utils_1.roundToPrecision)(rating)] })) })), (0, jsx_runtime_1.jsx)(assets_1.IconDot, { className: dot() }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: textVariantValue }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.number_of_reviews', {
+                    count: reviews,
+                }) })), endAdornment] })));
+};
+exports.default = ReviewsSummary;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Large = exports.Small = exports.Default = void 0;
+const ReviewsSummary_1 = __importDefault(require("./ReviewsSummary"));
+const mock_1 = require("../../utils/mock");
+const meta = {
+    title: 'V2/Shared/ReviewsSummary',
+    component: ReviewsSummary_1.default,
+};
+exports.default = meta;
+const t = (0, mock_1.mockT)();
+exports.Default = {
+    args: {
+        t,
+        rating: 4.9,
+        reviews: 11,
+    },
+};
+exports.Small = {
+    args: {
+        t,
+        rating: 4.9,
+        reviews: 11,
+        size: 'small',
+    },
+};
+exports.Large = {
+    args: {
+        t,
+        rating: 4.9,
+        reviews: 11,
+        size: 'large',
+    },
+};

package/dist/cjs/lib2/shared/ui/ReviewsSummary/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.ReviewsSummary = void 0;
+var ReviewsSummary_1 = require("./ReviewsSummary");
+Object.defineProperty(exports, "ReviewsSummary", { enumerable: true, get: function () { return __importDefault(ReviewsSummary_1).default; } });

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

@@ -1,140 +1 @@
-import { TypographyVariantsEnum } from '../Typography';
-export declare const reviewsSummaryStyle: import("tailwind-variants").TVReturnType<{
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}, {
-    textVariant: string;
-    dot: string;
-    icon: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}, {
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}>, {
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}, {
-    textVariant: string;
-    dot: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}, {
-    textVariant: string;
-    dot: string;
-    icon: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}, {
-    size: {
-        default: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        small: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-        large: {
-            textVariant: TypographyVariantsEnum;
-            icon: string;
-            dot: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
+export declare const reviewsSummaryStyle: any;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reviewsSummaryStyle = void 0;
+const tailwind_variants_1 = require("tailwind-variants");
+const Typography_1 = require("../Typography");
+exports.reviewsSummaryStyle = (0, tailwind_variants_1.tv)({
+    slots: {
+        textVariant: '',
+        dot: '',
+        icon: '-translate-y-0.5',
+    },
+    variants: {
+        size: {
+            default: {
+                textVariant: Typography_1.TypographyVariantsEnum.Title18Semi,
+                icon: 'w-6 h-6',
+                dot: 'w-5 h-5',
+            },
+            small: {
+                textVariant: Typography_1.TypographyVariantsEnum.Text14Regular,
+                icon: 'w-4 h-4',
+                dot: 'w-2 h-2',
+            },
+            large: {
+                textVariant: Typography_1.TypographyVariantsEnum.Title28Semi,
+                icon: 'w-6 h-6',
+                dot: 'w-5 h-5',
+            },
+        },
+    },
+});

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

@@ -0,0 +1,84 @@
+"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 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+const assets_1 = require("../../assets");
+const ScreenInput_module_css_1 = __importDefault(require("./ScreenInput.module.css"));
+const Typography_1 = require("../Typography");
+const ScreenInput = (0, react_1.forwardRef)((_a, ref) => {
+    var { type = 'text', showPasswordButton = true, className, variant = 'default', onChange, label, isAutoGrow = false, icon = '' } = _a, props = __rest(_a, ["type", "showPasswordButton", "className", "variant", "onChange", "label", "isAutoGrow", "icon"]);
+    const [fontSize, setFontSize] = (0, react_1.useState)(24); // Default font size 24px
+    const [inputType, setInputType] = (0, react_1.useState)(type);
+    const [localValue, setLocalValue] = (0, react_1.useState)();
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        adjustFontSize();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setInputType(type);
+    }, [type, showPasswordButton]);
+    const maxFontsize = (0, react_1.useMemo)(() => (variant === 'large' ? 48 : 24), [variant]);
+    const adjustFontSize = (0, react_1.useCallback)((event) => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        let newFontSize = fontSize;
+        let hasChanged = false;
+        // Increase font size up to 24px if there's enough space
+        while (newFontSize < maxFontsize &&
+            input.scrollWidth <= input.clientWidth) {
+            newFontSize++;
+            input.style.fontSize = `${newFontSize}px`;
+            if (input.scrollWidth > input.clientWidth) {
+                newFontSize--;
+                input.style.fontSize = `${newFontSize}px`;
+                break;
+            }
+            hasChanged = true;
+        }
+        // Decrease font size down to 14px if text overflows
+        while (newFontSize > 14 && input.scrollWidth > input.clientWidth) {
+            newFontSize--;
+            input.style.fontSize = `${newFontSize}px`;
+            hasChanged = true;
+        }
+        if (hasChanged) {
+            setFontSize(newFontSize);
+        }
+        event && (onChange === null || onChange === void 0 ? void 0 : onChange(event));
+    }, [inputRef, fontSize, maxFontsize, onChange]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setLocalValue((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value);
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('relative h-full flex justify-center w-full') }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('flex flex-col justify-center items-center my-auto h-auto w-full', {
+                    relative: isAutoGrow,
+                }) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'w-full relative' }, { children: [isAutoGrow && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ "aria-hidden": "true", className: 'absolute text-center font-semibold top-[50%] -translate-y-1/2 left-[50%] -translate-x-1/2 ', style: { fontSize: `${fontSize}px` } }, { children: [localValue, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'absolute font-semibold', style: {
+                                            fontSize: `${fontSize}px`,
+                                            right: `-${fontSize}px`,
+                                        } }, { children: (localValue === null || localValue === void 0 ? void 0 : localValue.length) ? icon : '' })))] }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: (0, utils_1.mergeRefs)(ref, inputRef), type: inputType, style: {
+                                    fontSize: `${fontSize}px`,
+                                }, className: (0, classnames_1.default)(ScreenInput_module_css_1.default.input, 'w-full outline-0 placeholder:text-typography-typography-primary placeholder:opacity-35 appearance-none text-center border-0 font-semibold bg-color-white focus:appearance-none focus:outline-none', {
+                                    'px-11': type === 'password' && showPasswordButton,
+                                }, {
+                                    'absolute text-center font-semibold top-[50%] -translate-y-1/2 left-[50%] -translate-x-1/2 z-10 !bg-color-transparent': isAutoGrow,
+                                }, className), onChange: adjustFontSize }, props))] })), label && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum.Text16Semi, opacity: !localValue ? 35 : undefined }, { children: label })))] })), type === 'password' && showPasswordButton && ((0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.id, className: 'absolute w-9 h-9 top-1/2 right-0 -translate-y-1/2 flex items-center justify-center bg-color-background-gray-black/[.06] rounded-full outline-0 appearance-none border-0', onClick: () => setInputType(inputType === 'password' ? 'text' : 'password') }, { children: inputType === 'password' ? (0, jsx_runtime_1.jsx)(assets_1.IconEye, {}) : (0, jsx_runtime_1.jsx)(assets_1.IconEyeOff, {}) })))] })));
+});
+ScreenInput.displayName = 'ScreenInput';
+exports.default = ScreenInput;