@sikka/hawa/dist/skeleton/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/skeleton/Skeleton.tsx
import React from "react";

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

// elements/skeleton/Skeleton.tsx
function Skeleton({
  className,
  content,
  animation = "pulse",
  fade,
  ...props
}) {
  const animationStyles = {
    none: "hawa-rounded hawa-bg-muted",
    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
  };
  const fadeStyle = {
    bottom: "hawa-mask-fade-bottom",
    top: "hawa-mask-fade-top",
    right: "hawa-mask-fade-right",
    left: "hawa-mask-fade-left "
  };
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: cn(
        animationStyles[animation],
        content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
        fade && fadeStyle[fade],
        className
      ),
      ...props
    },
    content && content
  );
}
export {
  Skeleton
};
//# sourceMappingURL=index.mjs.map