analytica-frontend-lib/dist/Skeleton/index.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

// src/components/Skeleton/Skeleton.tsx
import { forwardRef } from "react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Skeleton/Skeleton.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var SKELETON_ANIMATION_CLASSES = {
  pulse: "animate-pulse",
  none: ""
};
var SKELETON_VARIANT_CLASSES = {
  text: "h-4 bg-background-200 rounded",
  circular: "bg-background-200 rounded-full",
  rectangular: "bg-background-200",
  rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
  none: "",
  small: "space-y-1",
  medium: "space-y-2",
  large: "space-y-3"
};
var Skeleton = forwardRef(
  ({
    variant = "text",
    width,
    height,
    animation = "pulse",
    lines = 1,
    spacing = "none",
    className = "",
    children,
    ...props
  }, ref) => {
    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
    const variantClass = SKELETON_VARIANT_CLASSES[variant];
    const spacingClass = SPACING_CLASSES[spacing];
    const style = {
      width: typeof width === "number" ? `${width}px` : width,
      height: typeof height === "number" ? `${height}px` : height
    };
    if (variant === "text" && lines > 1) {
      return /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          className: cn("flex flex-col", spacingClass, className),
          ...props,
          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(variantClass, animationClass),
              style: index === lines - 1 ? { width: "60%" } : void 0
            },
            index
          ))
        }
      );
    }
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cn(variantClass, animationClass, className),
        style,
        ...props,
        children
      }
    );
  }
);
var SkeletonText = forwardRef(
  (props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = forwardRef(
  ({
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    showActions = true,
    lines = 2,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "w-full p-4 bg-background border border-border-200 rounded-lg",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3", children: [
            showAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { width: 40, height: 40 }),
            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
              showTitle && /* @__PURE__ */ jsx(SkeletonText, { width: "60%", height: 20 }),
              showDescription && /* @__PURE__ */ jsx(SkeletonText, { lines, spacing: "small" })
            ] })
          ] }),
          showActions && /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-2 mt-4", children: [
            /* @__PURE__ */ jsx(SkeletonRectangle, { width: 80, height: 32 }),
            /* @__PURE__ */ jsx(SkeletonRectangle, { width: 80, height: 32 })
          ] })
        ]
      }
    );
  }
);
var SkeletonList = forwardRef(
  ({
    items = 3,
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    lines = 1,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 p-3", children: [
      showAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { width: 32, height: 32 }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
        showTitle && /* @__PURE__ */ jsx(SkeletonText, { width: "40%", height: 16 }),
        showDescription && /* @__PURE__ */ jsx(SkeletonText, { lines, spacing: "small" })
      ] })
    ] }, index)) });
  }
);
var SkeletonTable = forwardRef(
  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
      showHeader && /* @__PURE__ */ jsx("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 20
        },
        index
      )) }),
      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 16
        },
        colIndex
      )) }, rowIndex)) })
    ] });
  }
);
export {
  Skeleton,
  SkeletonCard,
  SkeletonCircle,
  SkeletonList,
  SkeletonRectangle,
  SkeletonRounded,
  SkeletonTable,
  SkeletonText
};
//# sourceMappingURL=index.mjs.map