@yamada-ui/rating/dist/chunk-G2ZEZHKB.mjs

Yamada UI rating component

"use client"
import {
  useRatingItem
} from "./chunk-I6RJBUFU.mjs";
import {
  useRatingContext
} from "./chunk-UAH7LDHT.mjs";

// src/rating-item.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { Icon } from "@yamada-ui/icon";
import { cx, getValidChildren, isString, runIfFunc } from "@yamada-ui/utils";
import { cloneElement } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var RatingItem = forwardRef(
  ({ className, color, fractionValue, groupValue, value, ...rest }, ref) => {
    const {
      emptyIcon = /* @__PURE__ */ jsx(RatingStarIcon, {}),
      filledIcon = /* @__PURE__ */ jsx(RatingStarIcon, {}),
      styles,
      inputProps,
      itemProps
    } = useRatingContext();
    const { active, filled, getInputProps, getItemProps } = useRatingItem({
      fractionValue,
      groupValue,
      value
    });
    const computedItemProps = runIfFunc(itemProps, value);
    const computedInputProps = runIfFunc(inputProps, value);
    const customColor = color ? {
      _filled: {
        color: isString(color) ? [color, color] : color
      }
    } : {};
    const css = {
      display: "block",
      lineHeight: "0",
      ...styles.item,
      ...customColor
    };
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(ui.input, { ...getInputProps(computedInputProps, ref) }),
      /* @__PURE__ */ jsx(
        ui.label,
        {
          className: cx("ui-rating__item", className),
          __css: css,
          ...getItemProps({ ...computedItemProps, ...rest }),
          children: /* @__PURE__ */ jsx(
            RatingIcon,
            {
              clipPath: fractionValue !== 1 ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : void 0,
              children: filled ? runIfFunc(filledIcon, groupValue) : runIfFunc(emptyIcon, groupValue)
            }
          )
        }
      )
    ] });
  }
);
RatingItem.displayName = "RatingItem";
RatingItem.__ui__ = "RatingItem";
var RatingIcon = ({ className, children, ...rest }) => {
  const { styles } = useRatingContext();
  const validChildren = getValidChildren(children);
  const cloneChildren = validChildren.map(
    (child) => cloneElement(child, {
      style: {
        maxHeight: "1em",
        maxWidth: "1em"
      },
      "aria-hidden": true,
      focusable: false
    })
  );
  const css = {
    alignItems: "center",
    display: "inline-flex",
    justifyContent: "center",
    ...styles.icon
  };
  return /* @__PURE__ */ jsx(
    ui.div,
    {
      className: cx("ui-rating__item__icon", className),
      __css: css,
      ...rest,
      children: cloneChildren
    }
  );
};
RatingIcon.displayName = "RatingIcon";
RatingIcon.__ui__ = "RatingIcon";
var RatingStarIcon = ({ ...rest }) => {
  return /* @__PURE__ */ jsx(
    Icon,
    {
      strokeLinecap: "round",
      strokeLinejoin: "round",
      viewBox: "0 0 24 24",
      ...rest,
      children: /* @__PURE__ */ jsx("path", { d: "M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" })
    }
  );
};
RatingStarIcon.displayName = "RatingStarIcon";
RatingStarIcon.__ui__ = "RatingStarIcon";

export {
  RatingItem
};
//# sourceMappingURL=chunk-G2ZEZHKB.mjs.map