@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.7 → 0.1.0-alpha.8

package/dist/index.cjs

@@ -107,6 +107,7 @@ __export(src_exports, {
   AdsInputOTPGroup: () => AdsInputOTPGroup,
   AdsInputOTPSeparator: () => AdsInputOTPSeparator,
   AdsInputOTPSlot: () => AdsInputOTPSlot,
+  AdsMasonry: () => AdsMasonry,
   AdsPagination: () => AdsPagination,
   AdsPaginationContent: () => AdsPaginationContent,
   AdsPaginationEllipsis: () => AdsPaginationEllipsis,
@@ -5145,7 +5146,7 @@ function AdsDataTable({
               {
                 "aria-label": `${headerTitle} ${messages.table.filterColumn}`,
                 className: cn(
-                  "h-6 w-6 shrink-0 rounded-[6px] border border-border bg-card/80 px-0 shadow-none hover:bg-accent focus-visible:ring-0",
+                  "h-6 w-6 shrink-0 rounded-[6px] border-0 bg-transparent px-0 shadow-none hover:bg-accent focus-visible:ring-0",
                   filterValues[columnKey] ? "text-primary" : "text-icon-muted hover:text-[var(--card-foreground)]"
                 ),
                 "data-ads-column-filter-trigger": "true",
@@ -6403,6 +6404,105 @@ var AdsDialogFooter = DialogFooter;
 var AdsDialogTitle = DialogTitle;
 var AdsDialogDescription = DialogDescription;
 
+// src/components/AdsMasonry/index.tsx
+var import_masonic = require("masonic");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var DEFAULT_COLUMN_WIDTH = 240;
+var DEFAULT_GAP = 16;
+var DEFAULT_ITEM_HEIGHT_ESTIMATE = 280;
+var DEFAULT_LOADING_ITEM_COUNT = 8;
+var DEFAULT_MAX_COLUMN_COUNT = 4;
+var LOADING_HEIGHT_PATTERN = [220, 280, 240, 320, 260, 300];
+function AdsMasonry({
+  items,
+  renderItem,
+  layoutKey,
+  getItemKey,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  maxColumnCount = DEFAULT_MAX_COLUMN_COUNT,
+  gap = DEFAULT_GAP,
+  itemHeightEstimate = DEFAULT_ITEM_HEIGHT_ESTIMATE,
+  overscanBy,
+  scrollFps,
+  ssrWidth,
+  ssrHeight,
+  emptyState,
+  loading = false,
+  loadingItemCount = DEFAULT_LOADING_ITEM_COUNT,
+  className,
+  itemClassName,
+  classNames,
+  onRender
+}) {
+  const rootClassName = cn("w-full", classNames?.root, className);
+  if (loading) {
+    const skeletonItems = Array.from(
+      { length: loadingItemCount },
+      (_, index) => index
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid gap-4 sm:grid-cols-2 xl:grid-cols-3",
+          rootClassName
+        ),
+        "data-slot": "ads-masonry",
+        children: skeletonItems.map((index) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          AdsSkeleton,
+          {
+            className: cn("w-full rounded-radius-lg", classNames?.skeleton),
+            "data-slot": "ads-masonry-skeleton",
+            "data-testid": "ads-masonry-skeleton",
+            style: {
+              height: `${LOADING_HEIGHT_PATTERN[index % LOADING_HEIGHT_PATTERN.length]}px`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+  if (items.length === 0) {
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: cn(rootClassName, classNames?.empty),
+        "data-slot": "ads-masonry-empty",
+        children: emptyState
+      }
+    ) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    import_masonic.Masonry,
+    {
+      className: rootClassName,
+      columnGutter: gap,
+      columnWidth,
+      itemHeightEstimate,
+      itemKey: getItemKey,
+      items,
+      maxColumnCount,
+      onRender,
+      overscanBy,
+      render: ({ data, index, width }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        "div",
+        {
+          className: cn("pb-0", classNames?.item, itemClassName),
+          "data-slot": "ads-masonry-item",
+          children: renderItem(data, { index, width })
+        }
+      ),
+      role: "list",
+      rowGutter: gap,
+      scrollFps,
+      ssrHeight,
+      ssrWidth
+    },
+    layoutKey
+  );
+}
+
 // src/tokens/designTokens.ts
 var designTokens = {
   background: "#151619",
@@ -6544,6 +6644,7 @@ var designTokens = {
   AdsInputOTPGroup,
   AdsInputOTPSeparator,
   AdsInputOTPSlot,
+  AdsMasonry,
   AdsPagination,
   AdsPaginationContent,
   AdsPaginationEllipsis,