infinity-ui-elements 1.6.16 → 1.7.1

package/dist/index.esm.js

@@ -2522,6 +2522,64 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
 });
 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.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 (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) => (jsx("span", { className: skeletonClasses, style: {
+                    height: resolvedHeight,
+                    width: lineWidth ?? resolvedWidth ?? "100%",
+                    ...style,
+                }, "aria-hidden": "true" }, `skeleton-line-${index}`))) }));
+    }
+    return (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 = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
     variants: {
         size: {
@@ -3115,5 +3173,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map