infinity-ui-elements 1.6.15 → 1.7.0

package/dist/index.js

@@ -2543,6 +2543,64 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
 });
 SearchableDropdown.displayName = "SearchableDropdown";
 
+const variantDefaults = {
+    rect: { height: 16, className: "w-full rounded-large" },
+    text: { height: 12, className: "w-full rounded-large" },
+    title: { height: 20, className: "w-full rounded-large" },
+    circle: { height: 40, className: "rounded-full aspect-square" },
+};
+const roundedClassNames = {
+    none: "rounded-none",
+    small: "rounded-small",
+    medium: "rounded-medium",
+    large: "rounded-large",
+    full: "rounded-full",
+};
+const animationClassNames = {
+    pulse: "animate-skeleton",
+    none: undefined,
+};
+const normalizeCssValue = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return typeof value === "number" ? `${value}px` : value;
+};
+const getLineWidths = (count, provided) => {
+    if (provided && provided.length) {
+        return Array.from({ length: count }, (_, index) => normalizeCssValue(provided[index] ?? provided[provided.length - 1]));
+    }
+    if (count === 1) {
+        return ["100%"];
+    }
+    return Array.from({ length: count }, (_, index) => index === count - 1 ? "60%" : "100%");
+};
+const Skeleton = React__namespace.forwardRef(({ className, containerClassName, containerStyle, variant = "rect", animation = "pulse", lines = 1, lineWidths, lineGap = "0.5rem", width, height, rounded = "large", style, ...props }, ref) => {
+    const resolvedLines = Math.max(1, lines);
+    const baseVariant = variantDefaults[variant];
+    const resolvedHeight = normalizeCssValue(height) ?? normalizeCssValue(baseVariant.height);
+    const resolvedWidth = normalizeCssValue(width) ??
+        (variant === "circle" ? resolvedHeight : undefined);
+    const skeletonClasses = cn("block bg-surface-fill-neutral-subtle", animationClassNames[animation], variant !== "circle" && roundedClassNames[rounded], baseVariant.className, className);
+    if ((variant === "text" || variant === "title") && resolvedLines > 1) {
+        const widths = getLineWidths(resolvedLines, lineWidths);
+        return (jsxRuntime.jsx("div", { ref: ref, className: cn("flex w-full flex-col", containerClassName, animation === "pulse" ? "animate-none" : undefined), style: {
+                gap: normalizeCssValue(lineGap) ?? "0.5rem",
+                ...containerStyle,
+            }, "aria-live": "polite", "aria-busy": "true", ...props, children: widths.map((lineWidth, index) => (jsxRuntime.jsx("span", { className: skeletonClasses, style: {
+                    height: resolvedHeight,
+                    width: lineWidth ?? resolvedWidth ?? "100%",
+                    ...style,
+                }, "aria-hidden": "true" }, `skeleton-line-${index}`))) }));
+    }
+    return (jsxRuntime.jsx("div", { ref: ref, className: skeletonClasses, style: {
+            height: resolvedHeight,
+            width: resolvedWidth ?? style?.width,
+            ...style,
+        }, "aria-live": "polite", "aria-busy": "true", ...props }));
+});
+Skeleton.displayName = "Skeleton";
+
 const switchVariants = classVarianceAuthority.cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
     variants: {
         size: {
@@ -3158,6 +3216,7 @@ exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.SearchableDropdown = SearchableDropdown;
 exports.Select = Select;
+exports.Skeleton = Skeleton;
 exports.SlotCell = SlotCell;
 exports.SpacerCell = SpacerCell;
 exports.Switch = Switch;