import { jsxs as y, jsx as o } from "react/jsx-runtime";
import { useCombinedState as H } from "@spark-ui/hooks/use-combined-state";
import { a as f, c as k } from "../index-BmAFn37q.mjs";
import { useRef as b, useCallback as L } from "react";
import { StarFill as O } from "@spark-ui/icons/StarFill";
import { StarOutline as B } from "@spark-ui/icons/StarOutline";
import { I as x } from "../Icon-D1RueiPY.mjs";
const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
  ["peer", "after:inset-0", "group", "relative", "after:block after:absolute"],
  {
    variants: {
      disabled: {
        true: "opacity-dim-3",
        false: ""
      },
      readOnly: {
        true: "",
        false: ""
      },
      gap: {
        sm: ["after:w-[calc(100%+(var(--spacing-sm)))]", "last-of-type:after:content-none"],
        md: ["after:w-[calc(100%+(var(--spacing-md)))]", "last-of-type:after:content-none"]
      }
    },
    compoundVariants: [
      {
        readOnly: !1,
        disabled: !1,
        className: f(F, "cursor-pointer")
      }
    ],
    defaultVariants: {
      disabled: !1,
      readOnly: !1,
      gap: "sm"
    }
  }
), N = k("", {
  variants: {
    size: {
      sm: "text-caption-link",
      md: "text-body-1",
      lg: "text-display-1"
    },
    design: {
      filled: [
        "text-main-variant",
        "group-[[data-part=star][data-hovered]]:text-main-variant-hovered"
      ],
      outlined: ["text-on-surface/dim-3"]
    }
  }
}), G = ({
  value: e,
  size: a,
  disabled: n,
  readOnly: r,
  onClick: i,
  onMouseEnter: s,
  ref: m
}) => /* @__PURE__ */ y(
  "div",
  {
    "data-spark-component": "rating-star",
    ref: m,
    onMouseEnter: s,
    className: q({
      gap: a === "lg" ? "md" : "sm",
      disabled: n,
      readOnly: r
    }),
    "data-part": "star",
    onClick: i,
    children: [
      /* @__PURE__ */ o(
        "div",
        {
          className: f(
            "z-raised absolute overflow-hidden",
            "group-[[data-part=star][data-hovered]]:overflow-visible"
          ),
          style: { width: e * 100 + "%" },
          children: /* @__PURE__ */ o(
            x,
            {
              className: N({
                size: a,
                design: "filled"
              }),
              children: /* @__PURE__ */ o(O, {})
            }
          )
        }
      ),
      /* @__PURE__ */ o(x, { className: N({ size: a, design: "outlined" }), children: /* @__PURE__ */ o(B, {}) })
    ]
  }
);
function A(e) {
  return Math.round(e / 0.5) * 0.5;
}
function J({ value: e, index: a }) {
  if (e === void 0) return 0;
  const n = a + 1, r = A(e);
  return Math.ceil(r) < n ? 0 : r >= n ? 1 : 0.5;
}
function K(e, a) {
  const n = e.slice(0, a), r = e.slice(a);
  return [n, r];
}
const $ = ({
  defaultValue: e,
  value: a,
  onValueChange: n,
  size: r = "md",
  disabled: i,
  readOnly: s,
  name: m,
  id: R,
  "aria-label": w,
  ref: I,
  ...C
}) => {
  const c = b(null), d = b([]), [p, S] = H(a, e, n), v = b(p), g = !(i || s);
  function E(t) {
    c.current && (S(t + 1), v.current = t + 1, c.current.focus(), c.current.setAttribute("data-clicked", ""));
  }
  function M(t) {
    v.current === Number(t.target.value) || Number(t.target.value) === 0 || (v.current = Number(t.target.value), S(Number(t.target.value)));
  }
  function V({ currentTarget: t }) {
    const l = d.current.findIndex((u) => u === t), [h, j] = K(d.current, l + 1);
    h.forEach((u) => u.setAttribute("data-hovered", "")), j.forEach((u) => u.removeAttribute("data-hovered"));
  }
  const D = L((t) => {
    t && d.current.push(t);
  }, []);
  function P() {
    c.current?.removeAttribute("data-clicked");
  }
  function _() {
    d.current.forEach((t) => t.removeAttribute("data-hovered"));
  }
  return /* @__PURE__ */ y(
    "div",
    {
      className: "relative inline-flex",
      ref: I,
      "data-spark-component": "rating",
      ...C,
      onMouseLeave: _,
      children: [
        /* @__PURE__ */ o(
          "input",
          {
            name: m,
            id: R,
            "aria-label": w,
            ref: c,
            "data-part": "input",
            className: "peer absolute inset-0 opacity-0",
            type: "range",
            min: "0",
            max: "5",
            step: s ? 0.5 : 1,
            disabled: i,
            readOnly: s,
            value: A(p ?? 0),
            onChange: (t) => g && M(t),
            onBlur: P
          }
        ),
        /* @__PURE__ */ o(
          "div",
          {
            className: f(
              r === "lg" ? "gap-x-md" : "gap-x-sm",
              "flex",
              "peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none"
            ),
            children: Array.from({ length: 5 }).map((t, l) => /* @__PURE__ */ o(
              G,
              {
                disabled: i,
                readOnly: s,
                size: r,
                onClick: () => g && E(l),
                onMouseEnter: (h) => g && V(h),
                ref: D,
                value: J({ index: l, value: p })
              },
              l
            ))
          }
        )
      ]
    }
  );
};
export {
  $ as Rating
};
//# sourceMappingURL=index.mjs.map
