@yamada-ui/react/dist/cjs/components/rating/rating.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_star_icon = require('../icon/icons/star-icon.cjs');
const require_rating_style = require('./rating.style.cjs');
const require_use_rating = require('./use-rating.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/rating/rating.tsx
const { ComponentContext, PropsContext: RatingPropsContext, useComponentContext, usePropsContext: useRatingPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("rating", require_rating_style.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 } = require_use_rating.useRating(rest);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_rating.RatingContext, {
		value: (0, react.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__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
			value: (0, react.useMemo)(() => ({
				color,
				emptyIcon,
				filledIcon,
				groupProps,
				iconProps,
				inputProps,
				itemProps
			}), [
				color,
				emptyIcon,
				filledIcon,
				groupProps,
				iconProps,
				inputProps,
				itemProps
			]),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
				...getRootProps(),
				children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingGroup, { value: index + 1 }, index))
			})
		})
	});
}, "root")();
const RatingGroup = withContext(({ value,...rest }) => {
	const { fractions } = require_use_rating.useRatingContext();
	const { groupProps } = useComponentContext();
	const count = (0, react.useMemo)(() => value === 1 ? fractions + 1 : fractions, [value, fractions]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
		...(0, require_utils_index.utils_exports.runIfFn)(groupProps, value),
		...rest,
		children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingItem, {
			groupValue: value,
			index
		}, index))
	});
}, "group")();
const RatingItem = withContext((props) => {
	const { active, filled, fractionValue, groupValue, getInputProps, getLabelProps } = require_use_rating.useRatingItem(props);
	const { emptyIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_star_icon.StarIcon, {
		fill: "currentColor",
		strokeColor: "currentColor"
	}), filledIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_star_icon.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__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
		...getLabelProps((0, require_utils_index.utils_exports.runIfFn)(itemProps, groupValue)),
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps((0, require_utils_index.utils_exports.runIfFn)(inputProps, groupValue)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingIcon, {
			"--clip-path": clipPath,
			...(0, require_utils_index.utils_exports.runIfFn)(iconProps, groupValue),
			children: filled ? (0, require_utils_index.utils_exports.runIfFn)(filledIcon, groupValue) : (0, require_utils_index.utils_exports.runIfFn)(emptyIcon, groupValue)
		})]
	});
}, "item")(void 0, ({ groupValue,...rest }) => {
	const { color } = useComponentContext();
	return {
		"--filled-color": require_var.varAttr((0, require_utils_index.utils_exports.runIfFn)(color, groupValue), "colors"),
		groupValue,
		...rest
	};
});
const RatingIcon = withContext("div", "icon")();

//#endregion
exports.Rating = Rating;
//# sourceMappingURL=rating.cjs.map