import { jsxs as h, jsx as l } from "react/jsx-runtime";
import { V as u } from "../VisuallyHidden-ByNP7ZUI.mjs";
import { c as i } from "../index-BmAFn37q.mjs";
const f = i([], {
  variants: {
    isAnimated: {
      true: [
        "[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]",
        "[mask-size:200%_100%]",
        "animate-standalone-shimmer motion-reduce:animate-none!"
      ],
      false: []
    }
  },
  defaultVariants: {
    isAnimated: !0
  }
}), g = ({
  isAnimated: e = !0,
  label: a,
  className: t,
  children: n,
  ref: m,
  ...p
}) => /* @__PURE__ */ h(
  "div",
  {
    ref: m,
    "data-spark-component": "skeleton",
    role: "presentation",
    className: f({ isAnimated: e, className: t }),
    ...p,
    children: [
      n,
      a && /* @__PURE__ */ l(u, { children: a })
    ]
  }
);
g.displayName = "Skeleton";
const S = i(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
  variants: {
    shape: {
      line: ["w-full [&:last-child:not(:first-child)]:w-5/6", "rounded-lg"],
      rectangle: ["rounded-sm"],
      circle: ["flex-none", "rounded-full"]
    }
  },
  defaultVariants: {
    shape: "rectangle"
  }
}), y = i(["flex flex-col", "w-full"], {
  variants: {
    gap: {
      sm: "gap-sm",
      md: "gap-md",
      lg: "gap-lg",
      xl: "gap-xl",
      "2xl": "gap-2xl",
      "3xl": "gap-3xl"
    }
  },
  defaultVariants: {
    gap: "md"
  }
}), s = (e) => typeof e == "number" ? `${e}px` : e, r = ({ shape: e, className: a, ref: t, ...n }) => /* @__PURE__ */ l(
  "div",
  {
    ref: t,
    "aria-hidden": "true",
    className: S({ shape: e, className: a }),
    ...n
  }
), o = ({ width: e = "100%", height: a, ...t }) => /* @__PURE__ */ l(
  r,
  {
    style: {
      "--skeleton-rect-width": s(e),
      "--skeleton-rect-height": s(a)
    },
    className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
    ...t,
    shape: "rectangle",
    "data-shape": "rectangle"
  }
), c = ({ size: e, ...a }) => /* @__PURE__ */ l(
  r,
  {
    style: { "--skeleton-circle-size": s(e) },
    className: "size-(--skeleton-circle-size)",
    ...a,
    shape: "circle",
    "data-shape": "circle"
  }
), d = ({
  lines: e = 1,
  gap: a,
  className: t,
  ...n
}) => /* @__PURE__ */ l("div", { className: y({ gap: a || "md", className: t }), "aria-hidden": "true", children: [...new Array(e)].map((p, k) => /* @__PURE__ */ l(r, { ...n, shape: "line", "data-shape": "line" }, `line_${k}`)) });
o.displayName = "Skeleton.Rectangle";
c.displayName = "Skeleton.Circle";
d.displayName = "Skeleton.Line";
const x = Object.assign(g, {
  Circle: c,
  Line: d,
  Rectangle: o
});
x.displayName = "Skeleton";
d.displayName = "Skeleton.Line";
c.displayName = "Skeleton.Circle";
o.displayName = "Skeleton.Rectangle";
export {
  x as Skeleton
};
//# sourceMappingURL=index.mjs.map
