@evolve.ui/core-components 1.0.0

package/StarRating-CRGx_jeU.mjs

@@ -0,0 +1,81 @@
+import { Star } from "./Icons.mjs";
+import { LabelStrong } from "./Typography/Text.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/StarRating/components/StarComponent/StarComponent.tsx
+const StarComponent = ({ emphasis, filledPercentage, index, size }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative inline-block", {
+			"h-[14px] w-[14px]": size === "xs",
+			"h-[20px] w-[20px]": size === "sm"
+		}),
+		"data-hui-id": "StarRating",
+		children: [/* @__PURE__ */ jsx(Star, {
+			className: cn("absolute left-0 top-0 z-[1]", {
+				"text-icon-primary": emphasis === "subtle",
+				"text-warning-700": emphasis === "bold"
+			}),
+			size,
+			style: "regular"
+		}), /* @__PURE__ */ jsx(Star, {
+			className: cn("absolute left-0 top-0", {
+				"text-icon-primary": emphasis === "subtle",
+				"text-warning-500": emphasis === "bold"
+			}),
+			customStyles: { clipPath: `inset(0% ${Math.round(100 - filledPercentage)}% 0% 0%)` },
+			"data-testid": `partialFilledStar-${index + 1}`,
+			size,
+			style: "fill"
+		})]
+	});
+};
+//#endregion
+//#region src/StarRating/StarRating.tsx
+const StarRating = ({ averageRating, className, compact = false, emphasis = "subtle", maxAmountOfStars = 5, onClick, size = "sm", trailingText, ...rest }) => {
+	const fullStars = Math.floor(averageRating);
+	const partialStarPercentage = (averageRating - fullStars) * 100;
+	const ParentWrapper = ({ children }) => {
+		return onClick ? /* @__PURE__ */ jsx("button", {
+			"aria-label": rest["aria-label"] ?? "Star Rating",
+			className: cn("group hui-focus-visible-outline flex items-center", className),
+			"data-hui-id": "StarRating",
+			onClick,
+			title: `${Math.floor(averageRating * 10) / 10} stars`,
+			children
+		}) : /* @__PURE__ */ jsx("div", {
+			"aria-label": rest["aria-label"] ?? "Star Rating",
+			className: cn("flex items-center", className),
+			"data-hui-id": "StarRating",
+			title: `${Math.floor(averageRating * 10) / 10} stars`,
+			children
+		});
+	};
+	return /* @__PURE__ */ jsxs(ParentWrapper, { children: [compact ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LabelStrong, {
+		className: cn("mr-[2px]", { "group-hover:cursor-pointer": onClick !== void 0 }),
+		color: "secondary",
+		children: Math.floor(averageRating * 10) / 10
+	}), /* @__PURE__ */ jsx(StarComponent, {
+		emphasis,
+		filledPercentage: 100,
+		index: 0,
+		size: "xs"
+	})] }) : [...Array(maxAmountOfStars)].map((_, index) => /* @__PURE__ */ jsx(StarComponent, {
+		emphasis,
+		filledPercentage: index < fullStars ? 100 : index === fullStars ? partialStarPercentage : 0,
+		index,
+		size
+	}, index)), trailingText && /* @__PURE__ */ jsx("span", {
+		className: cn("text-text-secondary", {
+			"group-hover:text-link-hover group-hover:underline": onClick !== void 0,
+			"hui-text-body-secondary": size === "sm" || compact,
+			"hui-text-caption": size === "xs" && !compact,
+			"ml-2xs": !compact,
+			"ml-[2px]": compact
+		}),
+		children: !compact ? trailingText : `(${trailingText})`
+	})] });
+};
+//#endregion
+export { StarRating as t };
+
+//# sourceMappingURL=StarRating-CRGx_jeU.mjs.map

package/StarRating-CRGx_jeU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating-CRGx_jeU.mjs","names":[],"sources":["../src/StarRating/components/StarComponent/StarComponent.tsx","../src/StarRating/StarRating.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { Star } from '../../../Icons';\nimport { iconSizesToPixels } from '../../../Icons/IconBase';\n\ntype StarComponentProps = {\n    emphasis: 'subtle' | 'bold';\n    filledPercentage: number;\n    index: number;\n    size: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;\n};\n\nexport const StarComponent = ({ emphasis, filledPercentage, index, size }: StarComponentProps) => {\n    return (\n        <div\n            className={cn('relative inline-block', {\n                'h-[14px] w-[14px]': size === 'xs',\n                'h-[20px] w-[20px]': size === 'sm',\n            })}\n            data-hui-id=\"StarRating\"\n        >\n            <Star\n                className={cn('absolute left-0 top-0 z-[1]', {\n                    'text-icon-primary': emphasis === 'subtle',\n                    'text-warning-700': emphasis === 'bold',\n                })}\n                size={size}\n                style=\"regular\"\n            />\n            <Star\n                className={cn('absolute left-0 top-0', {\n                    'text-icon-primary': emphasis === 'subtle',\n                    'text-warning-500': emphasis === 'bold',\n                })}\n                customStyles={{\n                    clipPath: `inset(0% ${Math.round(100 - filledPercentage)}% 0% 0%)`,\n                }}\n                data-testid={`partialFilledStar-${index + 1}`}\n                size={size}\n                style=\"fill\"\n            />\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, ReactNode } from 'react';\n\nimport { iconSizesToPixels } from '../Icons/IconBase';\nimport { LabelStrong } from '../Typography/Text/Text';\nimport { StarComponent } from './components/StarComponent/StarComponent';\n\ntype StarRatingProps = {\n    'aria-label'?: string;\n    /**\n     * How to pass the average rating.\n     * Value should be between 0 and maxAmountOfStars\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} />\n     * ```\n     */\n    averageRating: number;\n    className?: string;\n    /**\n     * Optional value to define the compact mode.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} compact />\n     * ```\n     */\n    compact?: boolean;\n    /**\n     * Optional value to define the emphasis of the star rating.\n     * Default value is subtle\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} emphasis='bold' />\n     * ```\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Optional value to define the maximum number of stars to display.\n     * Default value is 5\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} maxAmountOfStars={10} />\n     * ```\n     */\n    maxAmountOfStars?: number;\n    /**\n     * Optional value to define the onClick event handler.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} onClick={() => console.log('clicked')} />\n     * ```\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Optional value to define the size of the icons.\n     * Default value is sm\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} size={'xs'} />\n     * ```\n     */\n    size?: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;\n    /**\n     * Optional value of trailing text.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} trailingText=\"100 Reviews\" />\n     * ```\n     */\n    trailingText?: string;\n};\n\nexport const StarRating = ({\n    averageRating,\n    className,\n    compact = false,\n    emphasis = 'subtle',\n    maxAmountOfStars = 5,\n    onClick,\n    size = 'sm',\n    trailingText,\n    ...rest\n}: StarRatingProps) => {\n    const fullStars = Math.floor(averageRating);\n    const partialStarPercentage = (averageRating - fullStars) * 100;\n\n    // If a click action is provided, wrap the component in a button\n    const ParentWrapper = ({ children }: { children: ReactNode }) => {\n        return onClick ? (\n            <button\n                aria-label={rest['aria-label'] ?? 'Star Rating'}\n                className={cn('group hui-focus-visible-outline flex items-center', className)}\n                data-hui-id=\"StarRating\"\n                onClick={onClick}\n                title={`${Math.floor(averageRating * 10) / 10} stars`}\n            >\n                {children}\n            </button>\n        ) : (\n            <div\n                aria-label={rest['aria-label'] ?? 'Star Rating'}\n                className={cn('flex items-center', className)}\n                data-hui-id=\"StarRating\"\n                title={`${Math.floor(averageRating * 10) / 10} stars`}\n            >\n                {children}\n            </div>\n        );\n    };\n\n    return (\n        <ParentWrapper>\n            {/* If compact, render a label and a star */}\n            {compact ? (\n                <>\n                    <LabelStrong\n                        className={cn('mr-[2px]', {\n                            'group-hover:cursor-pointer': onClick !== undefined,\n                        })}\n                        color=\"secondary\"\n                    >\n                        {Math.floor(averageRating * 10) / 10}\n                    </LabelStrong>\n                    <StarComponent\n                        emphasis={emphasis}\n                        filledPercentage={100}\n                        index={0}\n                        size=\"xs\"\n                    />\n                </>\n            ) : (\n                [...Array(maxAmountOfStars)].map((_, index) => (\n                    <StarComponent\n                        emphasis={emphasis}\n                        filledPercentage={index < fullStars ? 100 : index === fullStars ? partialStarPercentage : 0}\n                        index={index}\n                        key={index}\n                        size={size}\n                    />\n                ))\n            )}\n\n            {trailingText && (\n                <span\n                    className={cn('text-text-secondary', {\n                        'group-hover:text-link-hover group-hover:underline': onClick !== undefined,\n                        'hui-text-body-secondary': size === 'sm' || compact,\n                        'hui-text-caption': size === 'xs' && !compact,\n                        'ml-2xs': !compact,\n                        'ml-[2px]': compact,\n                    })}\n                >\n                    {!compact ? trailingText : `(${trailingText})`}\n                </span>\n            )}\n        </ParentWrapper>\n    );\n};\n"],"mappings":";;;;;AAYA,MAAa,iBAAiB,EAAE,UAAU,kBAAkB,OAAO,WAA+B;CAC9F,OACI,qBAAC,OAAD;EACI,WAAW,GAAG,yBAAyB;GACnC,qBAAqB,SAAS;GAC9B,qBAAqB,SAAS;EAClC,CAAC;EACD,eAAY;YALhB,CAOI,oBAAC,MAAD;GACI,WAAW,GAAG,+BAA+B;IACzC,qBAAqB,aAAa;IAClC,oBAAoB,aAAa;GACrC,CAAC;GACK;GACN,OAAM;EACT,CAAA,GACD,oBAAC,MAAD;GACI,WAAW,GAAG,yBAAyB;IACnC,qBAAqB,aAAa;IAClC,oBAAoB,aAAa;GACrC,CAAC;GACD,cAAc,EACV,UAAU,YAAY,KAAK,MAAM,MAAM,gBAAgB,EAAE,UAC7D;GACA,eAAa,qBAAqB,QAAQ;GACpC;GACN,OAAM;EACT,CAAA,CACA;;AAEb;;;ACoCA,MAAa,cAAc,EACvB,eACA,WACA,UAAU,OACV,WAAW,UACX,mBAAmB,GACnB,SACA,OAAO,MACP,cACA,GAAG,WACgB;CACnB,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,yBAAyB,gBAAgB,aAAa;CAG5D,MAAM,iBAAiB,EAAE,eAAwC;EAC7D,OAAO,UACH,oBAAC,UAAD;GACI,cAAY,KAAK,iBAAiB;GAClC,WAAW,GAAG,qDAAqD,SAAS;GAC5E,eAAY;GACH;GACT,OAAO,GAAG,KAAK,MAAM,gBAAgB,EAAE,IAAI,GAAG;GAE7C;EACG,CAAA,IAER,oBAAC,OAAD;GACI,cAAY,KAAK,iBAAiB;GAClC,WAAW,GAAG,qBAAqB,SAAS;GAC5C,eAAY;GACZ,OAAO,GAAG,KAAK,MAAM,gBAAgB,EAAE,IAAI,GAAG;GAE7C;EACA,CAAA;CAEb;CAEA,OACI,qBAAC,eAAD,EAAA,UAAA,CAEK,UACG,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,aAAD;EACI,WAAW,GAAG,YAAY,EACtB,8BAA8B,YAAY,KAAA,EAC9C,CAAC;EACD,OAAM;YAEL,KAAK,MAAM,gBAAgB,EAAE,IAAI;CACzB,CAAA,GACb,oBAAC,eAAD;EACc;EACV,kBAAkB;EAClB,OAAO;EACP,MAAK;CACR,CAAA,CACH,EAAA,CAAA,IAEF,CAAC,GAAG,MAAM,gBAAgB,CAAC,CAAC,CAAC,KAAK,GAAG,UACjC,oBAAC,eAAD;EACc;EACV,kBAAkB,QAAQ,YAAY,MAAM,UAAU,YAAY,wBAAwB;EACnF;EAED;CACT,GAFQ,KAER,CACJ,GAGJ,gBACG,oBAAC,QAAD;EACI,WAAW,GAAG,uBAAuB;GACjC,qDAAqD,YAAY,KAAA;GACjE,2BAA2B,SAAS,QAAQ;GAC5C,oBAAoB,SAAS,QAAQ,CAAC;GACtC,UAAU,CAAC;GACX,YAAY;EAChB,CAAC;YAEA,CAAC,UAAU,eAAe,IAAI,aAAa;CAC1C,CAAA,CAEC,EAAA,CAAA;AAEvB"}

package/StarRating-Dski54FS.cjs

@@ -0,0 +1,86 @@
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/StarRating/components/StarComponent/StarComponent.tsx
+const StarComponent = ({ emphasis, filledPercentage, index, size }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("relative inline-block", {
+			"h-[14px] w-[14px]": size === "xs",
+			"h-[20px] w-[20px]": size === "sm"
+		}),
+		"data-hui-id": "StarRating",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Star, {
+			className: (0, _evolve_ui_theme_system.cn)("absolute left-0 top-0 z-[1]", {
+				"text-icon-primary": emphasis === "subtle",
+				"text-warning-700": emphasis === "bold"
+			}),
+			size,
+			style: "regular"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Star, {
+			className: (0, _evolve_ui_theme_system.cn)("absolute left-0 top-0", {
+				"text-icon-primary": emphasis === "subtle",
+				"text-warning-500": emphasis === "bold"
+			}),
+			customStyles: { clipPath: `inset(0% ${Math.round(100 - filledPercentage)}% 0% 0%)` },
+			"data-testid": `partialFilledStar-${index + 1}`,
+			size,
+			style: "fill"
+		})]
+	});
+};
+//#endregion
+//#region src/StarRating/StarRating.tsx
+const StarRating = ({ averageRating, className, compact = false, emphasis = "subtle", maxAmountOfStars = 5, onClick, size = "sm", trailingText, ...rest }) => {
+	const fullStars = Math.floor(averageRating);
+	const partialStarPercentage = (averageRating - fullStars) * 100;
+	const ParentWrapper = ({ children }) => {
+		return onClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			"aria-label": rest["aria-label"] ?? "Star Rating",
+			className: (0, _evolve_ui_theme_system.cn)("group hui-focus-visible-outline flex items-center", className),
+			"data-hui-id": "StarRating",
+			onClick,
+			title: `${Math.floor(averageRating * 10) / 10} stars`,
+			children
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-label": rest["aria-label"] ?? "Star Rating",
+			className: (0, _evolve_ui_theme_system.cn)("flex items-center", className),
+			"data-hui-id": "StarRating",
+			title: `${Math.floor(averageRating * 10) / 10} stars`,
+			children
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ParentWrapper, { children: [compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.LabelStrong, {
+		className: (0, _evolve_ui_theme_system.cn)("mr-[2px]", { "group-hover:cursor-pointer": onClick !== void 0 }),
+		color: "secondary",
+		children: Math.floor(averageRating * 10) / 10
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StarComponent, {
+		emphasis,
+		filledPercentage: 100,
+		index: 0,
+		size: "xs"
+	})] }) : [...Array(maxAmountOfStars)].map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StarComponent, {
+		emphasis,
+		filledPercentage: index < fullStars ? 100 : index === fullStars ? partialStarPercentage : 0,
+		index,
+		size
+	}, index)), trailingText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, _evolve_ui_theme_system.cn)("text-text-secondary", {
+			"group-hover:text-link-hover group-hover:underline": onClick !== void 0,
+			"hui-text-body-secondary": size === "sm" || compact,
+			"hui-text-caption": size === "xs" && !compact,
+			"ml-2xs": !compact,
+			"ml-[2px]": compact
+		}),
+		children: !compact ? trailingText : `(${trailingText})`
+	})] });
+};
+//#endregion
+Object.defineProperty(exports, "StarRating", {
+	enumerable: true,
+	get: function() {
+		return StarRating;
+	}
+});
+
+//# sourceMappingURL=StarRating-Dski54FS.cjs.map

package/StarRating-Dski54FS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating-Dski54FS.cjs","names":["Star","LabelStrong"],"sources":["../src/StarRating/components/StarComponent/StarComponent.tsx","../src/StarRating/StarRating.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { Star } from '../../../Icons';\nimport { iconSizesToPixels } from '../../../Icons/IconBase';\n\ntype StarComponentProps = {\n    emphasis: 'subtle' | 'bold';\n    filledPercentage: number;\n    index: number;\n    size: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;\n};\n\nexport const StarComponent = ({ emphasis, filledPercentage, index, size }: StarComponentProps) => {\n    return (\n        <div\n            className={cn('relative inline-block', {\n                'h-[14px] w-[14px]': size === 'xs',\n                'h-[20px] w-[20px]': size === 'sm',\n            })}\n            data-hui-id=\"StarRating\"\n        >\n            <Star\n                className={cn('absolute left-0 top-0 z-[1]', {\n                    'text-icon-primary': emphasis === 'subtle',\n                    'text-warning-700': emphasis === 'bold',\n                })}\n                size={size}\n                style=\"regular\"\n            />\n            <Star\n                className={cn('absolute left-0 top-0', {\n                    'text-icon-primary': emphasis === 'subtle',\n                    'text-warning-500': emphasis === 'bold',\n                })}\n                customStyles={{\n                    clipPath: `inset(0% ${Math.round(100 - filledPercentage)}% 0% 0%)`,\n                }}\n                data-testid={`partialFilledStar-${index + 1}`}\n                size={size}\n                style=\"fill\"\n            />\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { MouseEvent, ReactNode } from 'react';\n\nimport { iconSizesToPixels } from '../Icons/IconBase';\nimport { LabelStrong } from '../Typography/Text/Text';\nimport { StarComponent } from './components/StarComponent/StarComponent';\n\ntype StarRatingProps = {\n    'aria-label'?: string;\n    /**\n     * How to pass the average rating.\n     * Value should be between 0 and maxAmountOfStars\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} />\n     * ```\n     */\n    averageRating: number;\n    className?: string;\n    /**\n     * Optional value to define the compact mode.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} compact />\n     * ```\n     */\n    compact?: boolean;\n    /**\n     * Optional value to define the emphasis of the star rating.\n     * Default value is subtle\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} emphasis='bold' />\n     * ```\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Optional value to define the maximum number of stars to display.\n     * Default value is 5\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} maxAmountOfStars={10} />\n     * ```\n     */\n    maxAmountOfStars?: number;\n    /**\n     * Optional value to define the onClick event handler.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} onClick={() => console.log('clicked')} />\n     * ```\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Optional value to define the size of the icons.\n     * Default value is sm\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} size={'xs'} />\n     * ```\n     */\n    size?: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;\n    /**\n     * Optional value of trailing text.\n     *\n     * Usage:\n     * ```tsx\n     * <StarRating averageRating={4.5} trailingText=\"100 Reviews\" />\n     * ```\n     */\n    trailingText?: string;\n};\n\nexport const StarRating = ({\n    averageRating,\n    className,\n    compact = false,\n    emphasis = 'subtle',\n    maxAmountOfStars = 5,\n    onClick,\n    size = 'sm',\n    trailingText,\n    ...rest\n}: StarRatingProps) => {\n    const fullStars = Math.floor(averageRating);\n    const partialStarPercentage = (averageRating - fullStars) * 100;\n\n    // If a click action is provided, wrap the component in a button\n    const ParentWrapper = ({ children }: { children: ReactNode }) => {\n        return onClick ? (\n            <button\n                aria-label={rest['aria-label'] ?? 'Star Rating'}\n                className={cn('group hui-focus-visible-outline flex items-center', className)}\n                data-hui-id=\"StarRating\"\n                onClick={onClick}\n                title={`${Math.floor(averageRating * 10) / 10} stars`}\n            >\n                {children}\n            </button>\n        ) : (\n            <div\n                aria-label={rest['aria-label'] ?? 'Star Rating'}\n                className={cn('flex items-center', className)}\n                data-hui-id=\"StarRating\"\n                title={`${Math.floor(averageRating * 10) / 10} stars`}\n            >\n                {children}\n            </div>\n        );\n    };\n\n    return (\n        <ParentWrapper>\n            {/* If compact, render a label and a star */}\n            {compact ? (\n                <>\n                    <LabelStrong\n                        className={cn('mr-[2px]', {\n                            'group-hover:cursor-pointer': onClick !== undefined,\n                        })}\n                        color=\"secondary\"\n                    >\n                        {Math.floor(averageRating * 10) / 10}\n                    </LabelStrong>\n                    <StarComponent\n                        emphasis={emphasis}\n                        filledPercentage={100}\n                        index={0}\n                        size=\"xs\"\n                    />\n                </>\n            ) : (\n                [...Array(maxAmountOfStars)].map((_, index) => (\n                    <StarComponent\n                        emphasis={emphasis}\n                        filledPercentage={index < fullStars ? 100 : index === fullStars ? partialStarPercentage : 0}\n                        index={index}\n                        key={index}\n                        size={size}\n                    />\n                ))\n            )}\n\n            {trailingText && (\n                <span\n                    className={cn('text-text-secondary', {\n                        'group-hover:text-link-hover group-hover:underline': onClick !== undefined,\n                        'hui-text-body-secondary': size === 'sm' || compact,\n                        'hui-text-caption': size === 'xs' && !compact,\n                        'ml-2xs': !compact,\n                        'ml-[2px]': compact,\n                    })}\n                >\n                    {!compact ? trailingText : `(${trailingText})`}\n                </span>\n            )}\n        </ParentWrapper>\n    );\n};\n"],"mappings":";;;;;AAYA,MAAa,iBAAiB,EAAE,UAAU,kBAAkB,OAAO,WAA+B;CAC9F,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,yBAAyB;GACnC,qBAAqB,SAAS;GAC9B,qBAAqB,SAAS;EAClC,CAAC;EACD,eAAY;YALhB,CAOI,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,MAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,+BAA+B;IACzC,qBAAqB,aAAa;IAClC,oBAAoB,aAAa;GACrC,CAAC;GACK;GACN,OAAM;EACT,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,MAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,yBAAyB;IACnC,qBAAqB,aAAa;IAClC,oBAAoB,aAAa;GACrC,CAAC;GACD,cAAc,EACV,UAAU,YAAY,KAAK,MAAM,MAAM,gBAAgB,EAAE,UAC7D;GACA,eAAa,qBAAqB,QAAQ;GACpC;GACN,OAAM;EACT,CAAA,CACA;;AAEb;;;ACoCA,MAAa,cAAc,EACvB,eACA,WACA,UAAU,OACV,WAAW,UACX,mBAAmB,GACnB,SACA,OAAO,MACP,cACA,GAAG,WACgB;CACnB,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,yBAAyB,gBAAgB,aAAa;CAG5D,MAAM,iBAAiB,EAAE,eAAwC;EAC7D,OAAO,UACH,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACI,cAAY,KAAK,iBAAiB;GAClC,YAAA,GAAA,wBAAA,GAAA,CAAc,qDAAqD,SAAS;GAC5E,eAAY;GACH;GACT,OAAO,GAAG,KAAK,MAAM,gBAAgB,EAAE,IAAI,GAAG;GAE7C;EACG,CAAA,IAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,cAAY,KAAK,iBAAiB;GAClC,YAAA,GAAA,wBAAA,GAAA,CAAc,qBAAqB,SAAS;GAC5C,eAAY;GACZ,OAAO,GAAG,KAAK,MAAM,gBAAgB,EAAE,IAAI,GAAG;GAE7C;EACA,CAAA;CAEb;CAEA,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAD,EAAA,UAAA,CAEK,UACG,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,aAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,YAAY,EACtB,8BAA8B,YAAY,KAAA,EAC9C,CAAC;EACD,OAAM;YAEL,KAAK,MAAM,gBAAgB,EAAE,IAAI;CACzB,CAAA,GACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;EACc;EACV,kBAAkB;EAClB,OAAO;EACP,MAAK;CACR,CAAA,CACH,EAAA,CAAA,IAEF,CAAC,GAAG,MAAM,gBAAgB,CAAC,CAAC,CAAC,KAAK,GAAG,UACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;EACc;EACV,kBAAkB,QAAQ,YAAY,MAAM,UAAU,YAAY,wBAAwB;EACnF;EAED;CACT,GAFQ,KAER,CACJ,GAGJ,gBACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,uBAAuB;GACjC,qDAAqD,YAAY,KAAA;GACjE,2BAA2B,SAAS,QAAQ;GAC5C,oBAAoB,SAAS,QAAQ,CAAC;GACtC,UAAU,CAAC;GACX,YAAY;EAChB,CAAC;YAEA,CAAC,UAAU,eAAe,IAAI,aAAa;CAC1C,CAAA,CAEC,EAAA,CAAA;AAEvB"}

package/StarRating-Dx1nbkcG.d.mts

@@ -0,0 +1,89 @@
+import { o as iconSizesToPixels } from "./IconBase-C_Lx9rDx.mjs";
+import { MouseEvent } from "react";
+
+//#region src/StarRating/StarRating.d.ts
+type StarRatingProps = {
+  'aria-label'?: string;
+  /**
+   * How to pass the average rating.
+   * Value should be between 0 and maxAmountOfStars
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} />
+   * ```
+   */
+  averageRating: number;
+  className?: string;
+  /**
+   * Optional value to define the compact mode.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} compact />
+   * ```
+   */
+  compact?: boolean;
+  /**
+   * Optional value to define the emphasis of the star rating.
+   * Default value is subtle
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} emphasis='bold' />
+   * ```
+   */
+  emphasis?: 'subtle' | 'bold';
+  /**
+   * Optional value to define the maximum number of stars to display.
+   * Default value is 5
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} maxAmountOfStars={10} />
+   * ```
+   */
+  maxAmountOfStars?: number;
+  /**
+   * Optional value to define the onClick event handler.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} onClick={() => console.log('clicked')} />
+   * ```
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Optional value to define the size of the icons.
+   * Default value is sm
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} size={'xs'} />
+   * ```
+   */
+  size?: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;
+  /**
+   * Optional value of trailing text.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} trailingText="100 Reviews" />
+   * ```
+   */
+  trailingText?: string;
+};
+declare const StarRating: ({
+  averageRating,
+  className,
+  compact,
+  emphasis,
+  maxAmountOfStars,
+  onClick,
+  size,
+  trailingText,
+  ...rest
+}: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { StarRating as t };
+//# sourceMappingURL=StarRating-Dx1nbkcG.d.mts.map

package/StarRating-Dx1nbkcG.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating-Dx1nbkcG.d.mts","names":[],"sources":["../src/StarRating/StarRating.tsx"],"mappings":";;;;KAOK,eAAA;EACD,YAAA;EADC;;;;;;;;;EAWD,aAAA;EACA,SAAA;EAAA;;;;;;;;EASA,OAAA;EAuCO;;;;AASK;AAGhB;;;;EAzCI,QAAA;EAyCuB;;;;;;;;;EA/BvB,gBAAA;EA+BuB;;;;;;;;EAtBvB,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAsBN;;;;;;;;;EAZvB,IAAA,GAAO,OAAA,cAAqB,iBAAA;EAiG/B;AAAA;;;;;;;EAxFG,YAAA;AAAA;AAAA,cAGS,UAAA;EAAc,aAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUxB,eAAA,iCAAe,GAAA,CAAA,OAAA"}

package/StarRating-TfkOMATk.d.cts

@@ -0,0 +1,89 @@
+import { o as iconSizesToPixels } from "./IconBase-C_Lx9rDx.cjs";
+import { MouseEvent } from "react";
+
+//#region src/StarRating/StarRating.d.ts
+type StarRatingProps = {
+  'aria-label'?: string;
+  /**
+   * How to pass the average rating.
+   * Value should be between 0 and maxAmountOfStars
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} />
+   * ```
+   */
+  averageRating: number;
+  className?: string;
+  /**
+   * Optional value to define the compact mode.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} compact />
+   * ```
+   */
+  compact?: boolean;
+  /**
+   * Optional value to define the emphasis of the star rating.
+   * Default value is subtle
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} emphasis='bold' />
+   * ```
+   */
+  emphasis?: 'subtle' | 'bold';
+  /**
+   * Optional value to define the maximum number of stars to display.
+   * Default value is 5
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} maxAmountOfStars={10} />
+   * ```
+   */
+  maxAmountOfStars?: number;
+  /**
+   * Optional value to define the onClick event handler.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} onClick={() => console.log('clicked')} />
+   * ```
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Optional value to define the size of the icons.
+   * Default value is sm
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} size={'xs'} />
+   * ```
+   */
+  size?: Extract<keyof typeof iconSizesToPixels, 'sm' | 'xs'>;
+  /**
+   * Optional value of trailing text.
+   *
+   * Usage:
+   * ```tsx
+   * <StarRating averageRating={4.5} trailingText="100 Reviews" />
+   * ```
+   */
+  trailingText?: string;
+};
+declare const StarRating: ({
+  averageRating,
+  className,
+  compact,
+  emphasis,
+  maxAmountOfStars,
+  onClick,
+  size,
+  trailingText,
+  ...rest
+}: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { StarRating as t };
+//# sourceMappingURL=StarRating-TfkOMATk.d.cts.map

package/StarRating-TfkOMATk.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating-TfkOMATk.d.cts","names":[],"sources":["../src/StarRating/StarRating.tsx"],"mappings":";;;;KAOK,eAAA;EACD,YAAA;EADC;;;;;;;;;EAWD,aAAA;EACA,SAAA;EAAA;;;;;;;;EASA,OAAA;EAuCO;;;;AASK;AAGhB;;;;EAzCI,QAAA;EAyCuB;;;;;;;;;EA/BvB,gBAAA;EA+BuB;;;;;;;;EAtBvB,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAsBN;;;;;;;;;EAZvB,IAAA,GAAO,OAAA,cAAqB,iBAAA;EAiG/B;AAAA;;;;;;;EAxFG,YAAA;AAAA;AAAA,cAGS,UAAA;EAAc,aAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUxB,eAAA,iCAAe,GAAA,CAAA,OAAA"}

package/SuggestionChip-BLq_0VFE.d.cts

@@ -0,0 +1,13 @@
+import { n as ChipProps } from "./chipTypes-Bi0ZROty.cjs";
+
+//#region src/Chips/SuggestionChip.d.ts
+declare const SuggestionChip: {
+  ({
+    children,
+    ...props
+  }: ChipProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { SuggestionChip as t };
+//# sourceMappingURL=SuggestionChip-BLq_0VFE.d.cts.map

package/SuggestionChip-BLq_0VFE.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionChip-BLq_0VFE.d.cts","names":[],"sources":["../src/Chips/SuggestionChip.tsx"],"mappings":";;;cAGa,cAAA;EAAA;;;KAA0C,SAAS,+BAAA,GAAA,CAAA,OAAA"}

package/SuggestionChip-CilkTYTJ.d.mts

@@ -0,0 +1,13 @@
+import { n as ChipProps } from "./chipTypes-Bi0ZROty.mjs";
+
+//#region src/Chips/SuggestionChip.d.ts
+declare const SuggestionChip: {
+  ({
+    children,
+    ...props
+  }: ChipProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { SuggestionChip as t };
+//# sourceMappingURL=SuggestionChip-CilkTYTJ.d.mts.map

package/SuggestionChip-CilkTYTJ.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionChip-CilkTYTJ.d.mts","names":[],"sources":["../src/Chips/SuggestionChip.tsx"],"mappings":";;;cAGa,cAAA;EAAA;;;KAA0C,SAAS,+BAAA,GAAA,CAAA,OAAA"}