@spark-ui/components/dist/skeleton/index.mjs

Spark (Leboncoin design system) components.

import {
  VisuallyHidden
} from "../chunk-NBZKMCHF.mjs";
import "../chunk-4F5DOL57.mjs";

// src/skeleton/Skeleton.styles.ts
import { cva } from "class-variance-authority";
var skeletonStyles = cva([], {
  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: true
  }
});

// src/skeleton/Skeleton.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Skeleton = ({
  isAnimated = true,
  label,
  className,
  children,
  ref: forwardedRef,
  ...rest
}) => /* @__PURE__ */ jsxs(
  "div",
  {
    ref: forwardedRef,
    "data-spark-component": "skeleton",
    role: "presentation",
    className: skeletonStyles({ isAnimated, className }),
    ...rest,
    children: [
      children,
      label && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
    ]
  }
);
Skeleton.displayName = "Skeleton";

// src/skeleton/SkeletonItem.styles.ts
import { cva as cva2 } from "class-variance-authority";
var skeletonItemStyles = cva2(["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"
  }
});
var skeletonLineStyles = cva2(["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"
  }
});

// src/skeleton/SkeletonItem.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var getSizeValue = (size) => {
  if (typeof size === "number") return `${size}px`;
  return size;
};
var SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }) => {
  return /* @__PURE__ */ jsx2(
    "div",
    {
      ref: forwardedRef,
      "aria-hidden": "true",
      className: skeletonItemStyles({ shape, className }),
      ...rest
    }
  );
};
var SkeletonRectangle = ({ width = "100%", height, ...rest }) => {
  return /* @__PURE__ */ jsx2(
    SkeletonItem,
    {
      style: {
        "--skeleton-rect-width": getSizeValue(width),
        "--skeleton-rect-height": getSizeValue(height)
      },
      className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
      ...rest,
      shape: "rectangle",
      "data-shape": "rectangle"
    }
  );
};
var SkeletonCircle = ({ size, ...rest }) => /* @__PURE__ */ jsx2(
  SkeletonItem,
  {
    style: { "--skeleton-circle-size": getSizeValue(size) },
    className: "size-(--skeleton-circle-size)",
    ...rest,
    shape: "circle",
    "data-shape": "circle"
  }
);
var SkeletonLine = ({
  lines = 1,
  gap: gapProp,
  className,
  ...rest
}) => {
  const gap = gapProp || "md";
  return /* @__PURE__ */ jsx2("div", { className: skeletonLineStyles({ gap, className }), "aria-hidden": "true", children: [...new Array(lines)].map((_, index) => /* @__PURE__ */ jsx2(SkeletonItem, { ...rest, shape: "line", "data-shape": "line" }, `line_${index}`)) });
};
SkeletonRectangle.displayName = "Skeleton.Rectangle";
SkeletonCircle.displayName = "Skeleton.Circle";
SkeletonLine.displayName = "Skeleton.Line";

// src/skeleton/index.ts
var Skeleton2 = Object.assign(Skeleton, {
  Circle: SkeletonCircle,
  Line: SkeletonLine,
  Rectangle: SkeletonRectangle
});
Skeleton2.displayName = "Skeleton";
SkeletonLine.displayName = "Skeleton.Line";
SkeletonCircle.displayName = "Skeleton.Circle";
SkeletonRectangle.displayName = "Skeleton.Rectangle";
export {
  Skeleton2 as Skeleton
};
//# sourceMappingURL=index.mjs.map