import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';

import './Skeleton.css';const pulser = "_pulser_sjnoo_1";
const skeleton = "_skeleton_sjnoo_1";
const shade = "_shade_sjnoo_14";
const ai = "_ai_sjnoo_35";
const text = "_text_sjnoo_40";
const body = "_body_sjnoo_46";
const line = "_line_sjnoo_46";
const headline = "_headline_sjnoo_54";
const circle = "_circle_sjnoo_58";
const rectangle = "_rectangle_sjnoo_65";
const pill = "_pill_sjnoo_71";
const styles = {
	pulser: pulser,
	skeleton: skeleton,
	shade: shade,
	ai: ai,
	text: text,
	body: body,
	line: line,
	headline: headline,
	circle: circle,
	rectangle: rectangle,
	pill: pill
};

const SkeletonCircle = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      diameter,
      ai,
      "aria-label": ariaLabel = "Loading content",
      style,
      ...rest
    } = componentProps;
    const SkeletonClassNames = cx(
      [styles["skeleton"]],
      [styles["circle"]],
      styles["shade"],
      ai && styles["ai"],
      className
    );
    const styleCombined = {
      ...style,
      ...layoutStyles,
      "--a2-inline-skeleton-diameter": diameter
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...rest,
        "data-anv": "skeleton-circle",
        role: "progressbar",
        "aria-busy": "true",
        className: SkeletonClassNames,
        style: styleCombined,
        "aria-label": ariaLabel,
        ref
      }
    );
  }
);
SkeletonCircle.displayName = "SkeletonCircle";

const SkeletonPill = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      width,
      ai,
      "aria-label": ariaLabel = "Loading content",
      style,
      ...rest
    } = componentProps;
    const SkeletonClassNames = cx(
      [styles["skeleton"]],
      [styles["pill"]],
      styles["shade"],
      ai && styles["ai"],
      className
    );
    const styleCombined = {
      ...style,
      ...layoutStyles,
      "--a2-inline-skeleton-width": width
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...rest,
        "data-anv": "skeleton-pill",
        role: "progressbar",
        "aria-busy": "true",
        className: SkeletonClassNames,
        style: styleCombined,
        "aria-label": ariaLabel,
        ref
      }
    );
  }
);
SkeletonPill.displayName = "SkeletonPill";

const SkeletonRectangle = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    className,
    height,
    ai,
    "aria-label": ariaLabel = "Loading content",
    style,
    ...rest
  } = componentProps;
  const SkeletonClassNames = cx(
    [styles["skeleton"]],
    [styles["rectangle"]],
    styles["shade"],
    ai && styles["ai"],
    className
  );
  const styleCombined = {
    ...style,
    ...layoutStyles,
    "--a2-inline-skeleton-height": height
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-anv": "skeleton-rectangle",
      role: "progressbar",
      "aria-busy": "true",
      className: SkeletonClassNames,
      style: styleCombined,
      "aria-label": ariaLabel,
      ref
    }
  );
});
SkeletonRectangle.displayName = "SkeletonRectangle";

const SkeletonText = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      "aria-label": ariaLabel = "Loading content",
      variant = "body",
      ai,
      style,
      ...rest
    } = componentProps;
    const SkeletonClassNames = cx(
      [styles["skeleton"]],
      [styles["text"]],
      [styles[variant]],
      className
    );
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    const ShaderClassName = cx(
      styles["line"],
      styles["shade"],
      ai && styles["ai"]
    );
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...rest,
        "data-anv": "skeleton-text",
        role: "progressbar",
        "aria-busy": "true",
        className: SkeletonClassNames,
        style: styleCombined,
        "aria-label": ariaLabel,
        ref,
        children: "rows" in rest ? Array.from({ length: rest.rows ?? 1 }, (_, i) => i).map((i) => /* @__PURE__ */ jsx("div", { className: ShaderClassName }, `line-${i}`)) : /* @__PURE__ */ jsx("div", { className: ShaderClassName })
      }
    );
  }
);
SkeletonText.displayName = "SkeletonText";

const Skeleton = Object.assign(
  {},
  {
    Circle: SkeletonCircle,
    Pill: SkeletonPill,
    Rectangle: SkeletonRectangle,
    Text: SkeletonText
  }
);

export { Skeleton, SkeletonCircle, SkeletonPill, SkeletonRectangle, SkeletonText };
//# sourceMappingURL=Skeleton.js.map
