@yamada-ui/react/dist/esm/components/rating/rating.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { varAttr } from "../../core/system/var.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { StarIcon } from "../icon/icons/star-icon.js";
import { ratingStyle } from "./rating.style.js";
import { RatingContext, useRating, useRatingContext, useRatingItem } from "./use-rating.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/rating/rating.tsx
const { ComponentContext, PropsContext: RatingPropsContext, useComponentContext, usePropsContext: useRatingPropsContext, withContext, withProvider } = createSlotComponent("rating", ratingStyle);
/**
* `Rating` is a component used to allow users to provide ratings.
*
* @see https://yamada-ui.com/docs/components/rating
*/
const Rating = withProvider(({ color, emptyIcon, filledIcon, groupProps, iconProps, inputProps, itemProps,...rest }) => {
	const { id, name, count, decimal, disabled, displayValue, fractions, highlightSelectedOnly, hoveredValue, interactive, outsideRef, readOnly, required, roundedValue, setHoveredValue, setValue, value, ariaProps, dataProps, eventProps, getRootProps } = useRating(rest);
	return /* @__PURE__ */ jsx(RatingContext, {
		value: useMemo(() => ({
			id,
			name,
			count,
			decimal,
			disabled,
			displayValue,
			fractions,
			highlightSelectedOnly,
			hoveredValue,
			interactive,
			outsideRef,
			readOnly,
			required,
			roundedValue,
			setHoveredValue,
			setValue,
			value,
			ariaProps,
			dataProps,
			eventProps
		}), [
			id,
			name,
			count,
			decimal,
			disabled,
			fractions,
			highlightSelectedOnly,
			hoveredValue,
			interactive,
			displayValue,
			outsideRef,
			readOnly,
			required,
			roundedValue,
			setHoveredValue,
			setValue,
			value,
			ariaProps,
			dataProps,
			eventProps
		]),
		children: /* @__PURE__ */ jsx(ComponentContext, {
			value: useMemo(() => ({
				color,
				emptyIcon,
				filledIcon,
				groupProps,
				iconProps,
				inputProps,
				itemProps
			}), [
				color,
				emptyIcon,
				filledIcon,
				groupProps,
				iconProps,
				inputProps,
				itemProps
			]),
			children: /* @__PURE__ */ jsx(styled.div, {
				...getRootProps(),
				children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(RatingGroup, { value: index + 1 }, index))
			})
		})
	});
}, "root")();
const RatingGroup = withContext(({ value,...rest }) => {
	const { fractions } = useRatingContext();
	const { groupProps } = useComponentContext();
	const count = useMemo(() => value === 1 ? fractions + 1 : fractions, [value, fractions]);
	return /* @__PURE__ */ jsx(styled.div, {
		...(0, utils_exports.runIfFn)(groupProps, value),
		...rest,
		children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(RatingItem, {
			groupValue: value,
			index
		}, index))
	});
}, "group")();
const RatingItem = withContext((props) => {
	const { active, filled, fractionValue, groupValue, getInputProps, getLabelProps } = useRatingItem(props);
	const { emptyIcon = /* @__PURE__ */ jsx(StarIcon, {
		fill: "currentColor",
		strokeColor: "currentColor"
	}), filledIcon = /* @__PURE__ */ jsx(StarIcon, {
		fill: "currentColor",
		strokeColor: "currentColor"
	}), iconProps, inputProps, itemProps } = useComponentContext();
	const clipPath = fractionValue !== 1 ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : void 0;
	return /* @__PURE__ */ jsxs(styled.label, {
		...getLabelProps((0, utils_exports.runIfFn)(itemProps, groupValue)),
		children: [/* @__PURE__ */ jsx(styled.input, { ...getInputProps((0, utils_exports.runIfFn)(inputProps, groupValue)) }), /* @__PURE__ */ jsx(RatingIcon, {
			"--clip-path": clipPath,
			...(0, utils_exports.runIfFn)(iconProps, groupValue),
			children: filled ? (0, utils_exports.runIfFn)(filledIcon, groupValue) : (0, utils_exports.runIfFn)(emptyIcon, groupValue)
		})]
	});
}, "item")(void 0, ({ groupValue,...rest }) => {
	const { color } = useComponentContext();
	return {
		"--filled-color": varAttr((0, utils_exports.runIfFn)(color, groupValue), "colors"),
		groupValue,
		...rest
	};
});
const RatingIcon = withContext("div", "icon")();

//#endregion
export { Rating };
//# sourceMappingURL=rating.js.map