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

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/skeleton/index.ts
var skeleton_exports = {};
__export(skeleton_exports, {
  Skeleton: () => Skeleton2
});
module.exports = __toCommonJS(skeleton_exports);

// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Component,
    {
      ...props,
      ref,
      style: {
        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
        position: "absolute",
        border: 0,
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...props.style
      }
    }
  );
};
VisuallyHidden.displayName = "VisuallyHidden";

// src/skeleton/Skeleton.styles.ts
var import_class_variance_authority = require("class-variance-authority");
var skeletonStyles = (0, import_class_variance_authority.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
var import_jsx_runtime3 = require("react/jsx-runtime");
var Skeleton = ({
  isAnimated = true,
  label,
  className,
  children,
  ref: forwardedRef,
  ...rest
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
  "div",
  {
    ref: forwardedRef,
    "data-spark-component": "skeleton",
    role: "presentation",
    className: skeletonStyles({ isAnimated, className }),
    ...rest,
    children: [
      children,
      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
    ]
  }
);
Skeleton.displayName = "Skeleton";

// src/skeleton/SkeletonItem.styles.ts
var import_class_variance_authority2 = require("class-variance-authority");
var skeletonItemStyles = (0, import_class_variance_authority2.cva)(["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 = (0, import_class_variance_authority2.cva)(["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
var import_jsx_runtime4 = require("react/jsx-runtime");
var getSizeValue = (size) => {
  if (typeof size === "number") return `${size}px`;
  return size;
};
var SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "div",
    {
      ref: forwardedRef,
      "aria-hidden": "true",
      className: skeletonItemStyles({ shape, className }),
      ...rest
    }
  );
};
var SkeletonRectangle = ({ width = "100%", height, ...rest }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    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__ */ (0, import_jsx_runtime4.jsx)(
  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__ */ (0, import_jsx_runtime4.jsx)("div", { className: skeletonLineStyles({ gap, className }), "aria-hidden": "true", children: [...new Array(lines)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Skeleton
});
//# sourceMappingURL=index.js.map