@wix/fast-gallery-vibe 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# @wix/fast-gallery-vibe
+
+A generic, content-agnostic gallery component built on top of `@wix/fast-gallery-core` with multiple layout variants and shadCN UI patterns.
+
+## Features
+
+- 🎨 **Multiple Layout Variants**: Grid, Alternating, Slider, Waterfall
+- 🔧 **Generic & Content-Agnostic**: Works with any data type through intelligent data extraction
+- 🎯 **Custom Item Renderers**: Flexible rendering for any component
+- ⚡ **Performance Optimized**: React.useMemo and useCallback optimizations
+- 🎨 **shadCN UI Patterns**: Follows shadCN component architecture with CVA
+- 📱 **Responsive**: Mobile-first responsive design
+- 🎯 **Simple API**: Single component with all functionality included
+- 🔄 **Pure Layout System**: Works with any data type through flexible item rendering
+
+## Installation
+
+```bash
+yarn install @wix/fast-gallery-vibe
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { GalleryWrapper } from '@wix/fast-gallery-vibe';
+
+<GalleryWrapper
+  items={yourData}
+  variant="grid"
+  itemRenderer={(item, index) => (
+    <YourComponent item={item} index={index}>
+      {children}
+    </YourComponent>
+  )}
+  emptyState={<div>No items available</div>}
+/>;
+```
+
+### With Products
+
+```tsx
+<GalleryWrapper
+  items={products}
+  variant="alternating"
+  itemRenderer={(product) => (
+    <Product.Root product={product}>
+      <Product.Name />
+      <Product.Price />
+    </Product.Root>
+  )}
+/>
+```
+
+### With Blog Posts
+
+```tsx
+<GalleryWrapper
+  items={blogPosts}
+  variant="slider"
+  itemRenderer={(post) => (
+    <BlogPost.Root post={post}>
+      <BlogPost.Title />
+      <BlogPost.Excerpt />
+    </BlogPost.Root>
+  )}
+/>
+```
+
+### Using the Index Parameter
+
+The `index` parameter is optional but useful for position-aware features:
+
+```tsx
+<GalleryWrapper
+  items={products}
+  variant="grid"
+  itemRenderer={(product, index) => (
+    <Product.Root
+      product={product}
+      className={index === 0 ? 'featured' : ''}
+      data-position={index + 1}
+    >
+      {index === 0 && <Badge>Featured</Badge>}
+      <Product.Name />
+      <Product.Price />
+    </Product.Root>
+  )}
+/>
+```
+
+## Layout Variants
+
+- **`grid`**: 3-column responsive grid layout
+- **`alternating`**: 3-2-3-2 pattern (odd rows: 3 items, even rows: 2 items)
+- **`slider`**: Horizontal scrolling carousel
+- **`waterfall`**: Pinterest-style masonry layout
+
+## Pure Layout System
+
+The gallery is a pure layout system that works with any data type. All content rendering is handled by the `itemRenderer` function, which receives the full original item and can access any fields it needs.
+
+**Important**: The `itemRenderer` prop is effectively required. Without it, the gallery will render empty items. In development mode, a warning will be shown if no `itemRenderer` is provided.
+
+## API
+
+### GalleryWrapper Props
+
+| Prop            | Type                                    | Default  | Description                                 |
+| --------------- | --------------------------------------- | -------- | ------------------------------------------- |
+| `items`         | `T[]`                                   | `[]`     | Array of items to display                   |
+| `variant`       | `LayoutType`                            | `"grid"` | Layout variant                              |
+| `itemRenderer`  | `(item: T, index: number) => ReactNode` | -        | Custom item renderer (effectively required) |
+| `emptyState`    | `ReactNode`                             | -        | Content to show when no items               |
+| `className`     | `string`                                | -        | Additional CSS classes                      |
+| `...otherProps` | `HTMLAttributes<HTMLDivElement>`        | -        | All other standard div attributes           |
+
+### LayoutType
+
+```tsx
+type LayoutType = 'grid' | 'alternating' | 'slider' | 'waterfall';
+```
+
+## CSS Classes
+
+The gallery applies the following CSS classes:
+
+- **Wrapper**: `w-full gallery-layout gallery-{variant}`
+- **Data attribute**: `data-gallery-variant="{variant}"`
+
+## Dependencies
+
+- `@wix/fast-gallery-core`: Core gallery rendering engine
+- `clsx`: Class name utility
+- `class-variance-authority`: Variant management
+- `react`: ^18.3.1
+- `react-dom`: ^18.3.1

package/dist/cjs/components/GalleryWrapper.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.GalleryWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _fastGalleryCore = require("@wix/fast-gallery-core");
+var _clsx = require("clsx");
+var _variants = require("./variants.js");
+require("./gallery.css");
+var _jsxFileName = "/Users/arielh/Git/showcase/packages/fast-gallery-packages/fast-gallery-vibe/dist/cjs/components/GalleryWrapper.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const GalleryWrapper = exports.GalleryWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    items = [],
+    variant = 'grid',
+    className,
+    itemRenderer,
+    emptyState,
+    children,
+    ...otherProps
+  } = props;
+  const hasItems = items.length > 0;
+
+  // Convert items to gallery format
+  const convertItemToGalleryItem = React.useCallback((item, index) => {
+    return {
+      id: item.id || item._id || `item-${index}`,
+      index: index.toString(),
+      mediaUrl: '',
+      type: _fastGalleryCore.MediaTypes.IMAGE,
+      metaData: {
+        width: 1,
+        // Minimal value for fast-gallery-core layout calculations
+        height: 1,
+        // Minimal value for fast-gallery-core layout calculations
+        title: '',
+        description: '',
+        alt: '',
+        link: {
+          url: '',
+          target: '_self'
+        }
+      }
+    };
+  }, []);
+  const galleryItems = React.useMemo(() => items.map((item, index) => convertItemToGalleryItem(item, index)), [items, convertItemToGalleryItem]);
+
+  // Create custom item renderer component
+  const ItemRendererComponent = React.useMemo(() => {
+    const Component = itemProps => {
+      if (itemRenderer) {
+        const originalItem = items[parseInt(itemProps.data.index, 10)];
+        if (originalItem) {
+          const rendered = itemRenderer(originalItem, parseInt(itemProps.data.index, 10));
+          return /*#__PURE__*/React.createElement(React.Fragment, null, rendered);
+        }
+      }
+
+      // Development warning if no itemRenderer is provided
+      if (process.env.NODE_ENV === 'development' && !itemRenderer) {
+        console.warn('GalleryWrapper: No itemRenderer provided. Gallery will render empty items. ' + 'Please provide an itemRenderer prop to render your content.');
+      }
+      return null;
+    };
+    return Component;
+  }, [itemRenderer, items]);
+  const customRenderers = React.useMemo(() => ({
+    itemRenderer: ItemRendererComponent
+  }), [ItemRendererComponent]);
+  const finalClassName = (0, _clsx.clsx)((0, _variants.galleryVariants)({
+    variant
+  }), className);
+
+  // Show empty state if no items
+  if (!hasItems) {
+    return emptyState || null;
+  }
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    ref: ref,
+    className: finalClassName,
+    "data-gallery-variant": variant
+  }, otherProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 98,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React.createElement(_fastGalleryCore.Gallery, {
+    dataList: galleryItems,
+    customRenderers: customRenderers,
+    options: {},
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), children);
+});
+GalleryWrapper.displayName = 'GalleryWrapper';
+//# sourceMappingURL=GalleryWrapper.js.map

package/dist/cjs/components/GalleryWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_fastGalleryCore","_clsx","_variants","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryWrapper","exports","forwardRef","props","ref","items","variant","className","itemRenderer","emptyState","children","otherProps","hasItems","length","convertItemToGalleryItem","useCallback","item","index","id","_id","toString","mediaUrl","type","MediaTypes","IMAGE","metaData","width","height","title","description","alt","link","url","target","galleryItems","useMemo","map","ItemRendererComponent","Component","itemProps","originalItem","parseInt","data","rendered","createElement","Fragment","process","env","NODE_ENV","console","warn","customRenderers","finalClassName","clsx","galleryVariants","_extends2","__self","__source","fileName","lineNumber","columnNumber","Gallery","dataList","options","displayName"],"sources":["../../../src/components/GalleryWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Gallery,\n  MediaTypes,\n  ItemContentData,\n  BaseMetaDataType,\n} from '@wix/fast-gallery-core';\nimport { clsx } from 'clsx';\nimport { galleryVariants } from './variants.js';\nimport type { GalleryWrapperProps, BaseItem } from './types.js';\nimport type { ItemRendererProps } from '@wix/fast-gallery-core';\nimport './gallery.css';\n\nexport const GalleryWrapper = React.forwardRef<\n  HTMLDivElement,\n  GalleryWrapperProps<BaseItem>\n>((props, ref) => {\n  const {\n    items = [],\n    variant = 'grid',\n    className,\n    itemRenderer,\n    emptyState,\n    children,\n    ...otherProps\n  } = props;\n\n  const hasItems = items.length > 0;\n\n  // Convert items to gallery format\n  const convertItemToGalleryItem = React.useCallback(\n    (item: BaseItem, index: number): ItemContentData<BaseMetaDataType> => {\n      return {\n        id: item.id || item._id || `item-${index}`,\n        index: index.toString(),\n        mediaUrl: '',\n        type: MediaTypes.IMAGE,\n        metaData: {\n          width: 1, // Minimal value for fast-gallery-core layout calculations\n          height: 1, // Minimal value for fast-gallery-core layout calculations\n          title: '',\n          description: '',\n          alt: '',\n          link: { url: '', target: '_self' },\n        },\n      };\n    },\n    []\n  );\n\n  const galleryItems = React.useMemo(\n    () => items.map((item, index) => convertItemToGalleryItem(item, index)),\n    [items, convertItemToGalleryItem]\n  );\n\n  // Create custom item renderer component\n  const ItemRendererComponent = React.useMemo(() => {\n    const Component: React.FC<ItemRendererProps> = (itemProps) => {\n      if (itemRenderer) {\n        const originalItem = items[parseInt(itemProps.data.index, 10)];\n        if (originalItem) {\n          const rendered = itemRenderer(\n            originalItem,\n            parseInt(itemProps.data.index, 10)\n          );\n          return <>{rendered}</>;\n        }\n      }\n\n      // Development warning if no itemRenderer is provided\n      if (process.env.NODE_ENV === 'development' && !itemRenderer) {\n        console.warn(\n          'GalleryWrapper: No itemRenderer provided. Gallery will render empty items. ' +\n            'Please provide an itemRenderer prop to render your content.'\n        );\n      }\n\n      return null;\n    };\n    return Component;\n  }, [itemRenderer, items]);\n\n  const customRenderers = React.useMemo(\n    () => ({\n      itemRenderer: ItemRendererComponent,\n    }),\n    [ItemRendererComponent]\n  );\n\n  const finalClassName = clsx(galleryVariants({ variant }), className);\n\n  // Show empty state if no items\n  if (!hasItems) {\n    return (emptyState as React.ReactElement) || null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={finalClassName}\n      data-gallery-variant={variant}\n      {...otherProps}\n    >\n      <Gallery\n        dataList={galleryItems}\n        customRenderers={customRenderers}\n        options={{}}\n      />\n      {children}\n    </div>\n  );\n});\n\nGalleryWrapper.displayName = 'GalleryWrapper';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MEDIA_TYPES = exports.GALLERY_CONSTANTS = void 0;
+const GALLERY_CONSTANTS = exports.GALLERY_CONSTANTS = {
+  SLIDER_ITEM_WIDTH: 280,
+  SLIDER_ITEM_WIDTH_MOBILE: 240,
+  BREAKPOINT_MOBILE: 640
+};
+const MEDIA_TYPES = exports.MEDIA_TYPES = {
+  IMAGE: 'image',
+  VIDEO: 'video'
+};
+//# sourceMappingURL=constants.js.map

package/dist/cjs/components/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GALLERY_CONSTANTS","exports","SLIDER_ITEM_WIDTH","SLIDER_ITEM_WIDTH_MOBILE","BREAKPOINT_MOBILE","MEDIA_TYPES","IMAGE","VIDEO"],"sources":["../../../src/components/constants.ts"],"sourcesContent":["export const GALLERY_CONSTANTS = {\n  SLIDER_ITEM_WIDTH: 280,\n  SLIDER_ITEM_WIDTH_MOBILE: 240,\n  BREAKPOINT_MOBILE: 640,\n} as const;\n\nexport const MEDIA_TYPES = {\n  IMAGE: 'image',\n  VIDEO: 'video',\n} as const;\n"],"mappings":";;;;AAAO,MAAMA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC/BE,iBAAiB,EAAE,GAAG;EACtBC,wBAAwB,EAAE,GAAG;EAC7BC,iBAAiB,EAAE;AACrB,CAAU;AAEH,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG;EACzBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE;AACT,CAAU","ignoreList":[]}

package/dist/cjs/components/gallery.css

@@ -0,0 +1,77 @@
+/* ShadCN Gallery Layouts - Static CSS */
+
+/*
+ * IMPORTANT: This CSS relies on the DOM structure created by @wix/fast-gallery-core
+ * The gallery creates: .scroller > .container > .item elements
+ * Do not modify these class names as they are part of the fast-gallery-core API
+ */
+
+/* Gallery Base Styles */
+.gallery-layout {
+  width: 100%;
+}
+
+/* Grid Layout - 3 columns */
+.gallery-layout.gallery-grid .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+/* Alternating Layout - 3-2-3-2 pattern */
+.gallery-layout.gallery-alternating .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+}
+
+/* Odd rows (1, 3, 5, ...): 3 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
+  grid-column: span 2;
+}
+
+/* Even rows (2, 4, 6, ...): 2 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
+  grid-column: span 3;
+}
+
+/* Slider Layout - Horizontal scrolling */
+.gallery-layout.gallery-slider .scroller .container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding-bottom: 0.5rem;
+}
+
+.gallery-layout.gallery-slider .scroller .container > .item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  width: 280px;
+  max-width: 280px;
+  min-width: 280px;
+}
+
+/* Slider responsive sizing */
+@media (max-width: 640px) {
+  .gallery-layout.gallery-slider .scroller .container > .item {
+    width: 240px;
+    max-width: 240px;
+    min-width: 240px;
+  }
+}
+
+/* Waterfall Layout - Masonry columns */
+.gallery-layout.gallery-waterfall .scroller .container {
+  columns: 3;
+  column-gap: 1rem;
+}
+
+.gallery-layout.gallery-waterfall .scroller .container > .item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.galleryVariants = exports.MEDIA_TYPES = exports.GalleryWrapper = exports.GALLERY_CONSTANTS = void 0;
+var _GalleryWrapper = require("./GalleryWrapper.js");
+exports.GalleryWrapper = _GalleryWrapper.GalleryWrapper;
+var _constants = require("./constants.js");
+exports.GALLERY_CONSTANTS = _constants.GALLERY_CONSTANTS;
+exports.MEDIA_TYPES = _constants.MEDIA_TYPES;
+var _variants = require("./variants.js");
+exports.galleryVariants = _variants.galleryVariants;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_GalleryWrapper","require","exports","GalleryWrapper","_constants","GALLERY_CONSTANTS","MEDIA_TYPES","_variants","galleryVariants"],"sources":["../../../src/components/index.ts"],"sourcesContent":["export { GalleryWrapper } from './GalleryWrapper.js';\n\nexport type { LayoutType, BaseItem, GalleryWrapperProps } from './types.js';\n\nexport { GALLERY_CONSTANTS, MEDIA_TYPES } from './constants.js';\n\nexport { galleryVariants } from './variants.js';\nexport type { GalleryVariant } from './variants.js';\n"],"mappings":";;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAAqDC,OAAA,CAAAC,cAAA,GAAAH,eAAA,CAAAG,cAAA;AAIrD,IAAAC,UAAA,GAAAH,OAAA;AAAgEC,OAAA,CAAAG,iBAAA,GAAAD,UAAA,CAAAC,iBAAA;AAAAH,OAAA,CAAAI,WAAA,GAAAF,UAAA,CAAAE,WAAA;AAEhE,IAAAC,SAAA,GAAAN,OAAA;AAAgDC,OAAA,CAAAM,eAAA,GAAAD,SAAA,CAAAC,eAAA","ignoreList":[]}

package/dist/cjs/components/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type LayoutType = 'grid' | 'alternating' | 'slider' | 'waterfall';\n\nexport interface BaseItem {\n  id?: string;\n  _id?: string;\n  width?: number;\n  height?: number;\n}\n\nexport interface GalleryWrapperProps<T extends BaseItem = BaseItem>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  items: T[];\n  variant?: LayoutType;\n  className?: string;\n  itemRenderer?: (item: T, index: number) => React.ReactNode;\n  emptyState?: React.ReactNode;\n  children?: React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/variants.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.galleryVariants = void 0;
+var _classVarianceAuthority = require("class-variance-authority");
+const galleryVariants = exports.galleryVariants = (0, _classVarianceAuthority.cva)('w-full gallery-layout', {
+  variants: {
+    variant: {
+      grid: 'gallery-grid',
+      alternating: 'gallery-alternating',
+      slider: 'gallery-slider',
+      waterfall: 'gallery-waterfall'
+    }
+  },
+  defaultVariants: {
+    variant: 'grid'
+  }
+});
+//# sourceMappingURL=variants.js.map

package/dist/cjs/components/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classVarianceAuthority","require","galleryVariants","exports","cva","variants","variant","grid","alternating","slider","waterfall","defaultVariants"],"sources":["../../../src/components/variants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const galleryVariants = cva(\n  'w-full gallery-layout',\n  {\n    variants: {\n      variant: {\n        grid: 'gallery-grid',\n        alternating: 'gallery-alternating',\n        slider: 'gallery-slider',\n        waterfall: 'gallery-waterfall',\n      },\n    },\n    defaultVariants: {\n      variant: 'grid',\n    },\n  },\n);\n\nexport type GalleryVariant = VariantProps<typeof galleryVariants>;\n"],"mappings":";;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,2BAAG,EAChC,uBAAuB,EACvB;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,IAAI,EAAE,cAAc;MACpBC,WAAW,EAAE,qBAAqB;MAClCC,MAAM,EAAE,gBAAgB;MACxBC,SAAS,EAAE;IACb;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE;EACX;AACF,CACF,CAAC","ignoreList":[]}

package/dist/cjs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _index = require("./components/index.js");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  exports[key] = _index[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","Object","keys","forEach","key","exports"],"sources":["../../src/index.ts"],"sourcesContent":["// Export all components\nexport * from './components/index.js';\n"],"mappings":";;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,MAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/components/gallery.css

@@ -0,0 +1,77 @@
+/* ShadCN Gallery Layouts - Static CSS */
+
+/*
+ * IMPORTANT: This CSS relies on the DOM structure created by @wix/fast-gallery-core
+ * The gallery creates: .scroller > .container > .item elements
+ * Do not modify these class names as they are part of the fast-gallery-core API
+ */
+
+/* Gallery Base Styles */
+.gallery-layout {
+  width: 100%;
+}
+
+/* Grid Layout - 3 columns */
+.gallery-layout.gallery-grid .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+/* Alternating Layout - 3-2-3-2 pattern */
+.gallery-layout.gallery-alternating .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+}
+
+/* Odd rows (1, 3, 5, ...): 3 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
+  grid-column: span 2;
+}
+
+/* Even rows (2, 4, 6, ...): 2 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
+  grid-column: span 3;
+}
+
+/* Slider Layout - Horizontal scrolling */
+.gallery-layout.gallery-slider .scroller .container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding-bottom: 0.5rem;
+}
+
+.gallery-layout.gallery-slider .scroller .container > .item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  width: 280px;
+  max-width: 280px;
+  min-width: 280px;
+}
+
+/* Slider responsive sizing */
+@media (max-width: 640px) {
+  .gallery-layout.gallery-slider .scroller .container > .item {
+    width: 240px;
+    max-width: 240px;
+    min-width: 240px;
+  }
+}
+
+/* Waterfall Layout - Masonry columns */
+.gallery-layout.gallery-waterfall .scroller .container {
+  columns: 3;
+  column-gap: 1rem;
+}
+
+.gallery-layout.gallery-waterfall .scroller .container > .item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}

package/dist/esm/components/GalleryWrapper.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Gallery, MediaTypes, } from '@wix/fast-gallery-core';
+import { clsx } from 'clsx';
+import { galleryVariants } from './variants.js';
+import './gallery.css';
+export const GalleryWrapper = React.forwardRef((props, ref) => {
+    const { items = [], variant = 'grid', className, itemRenderer, emptyState, children, ...otherProps } = props;
+    const hasItems = items.length > 0;
+    // Convert items to gallery format
+    const convertItemToGalleryItem = React.useCallback((item, index) => {
+        return {
+            id: item.id || item._id || `item-${index}`,
+            index: index.toString(),
+            mediaUrl: '',
+            type: MediaTypes.IMAGE,
+            metaData: {
+                width: 1,
+                height: 1,
+                title: '',
+                description: '',
+                alt: '',
+                link: { url: '', target: '_self' },
+            },
+        };
+    }, []);
+    const galleryItems = React.useMemo(() => items.map((item, index) => convertItemToGalleryItem(item, index)), [items, convertItemToGalleryItem]);
+    // Create custom item renderer component
+    const ItemRendererComponent = React.useMemo(() => {
+        const Component = (itemProps) => {
+            if (itemRenderer) {
+                const originalItem = items[parseInt(itemProps.data.index, 10)];
+                if (originalItem) {
+                    const rendered = itemRenderer(originalItem, parseInt(itemProps.data.index, 10));
+                    return React.createElement(React.Fragment, null, rendered);
+                }
+            }
+            // Development warning if no itemRenderer is provided
+            if (process.env.NODE_ENV === 'development' && !itemRenderer) {
+                console.warn('GalleryWrapper: No itemRenderer provided. Gallery will render empty items. ' +
+                    'Please provide an itemRenderer prop to render your content.');
+            }
+            return null;
+        };
+        return Component;
+    }, [itemRenderer, items]);
+    const customRenderers = React.useMemo(() => ({
+        itemRenderer: ItemRendererComponent,
+    }), [ItemRendererComponent]);
+    const finalClassName = clsx(galleryVariants({ variant }), className);
+    // Show empty state if no items
+    if (!hasItems) {
+        return emptyState || null;
+    }
+    return (React.createElement("div", { ref: ref, className: finalClassName, "data-gallery-variant": variant, ...otherProps },
+        React.createElement(Gallery, { dataList: galleryItems, customRenderers: customRenderers, options: {} }),
+        children));
+});
+GalleryWrapper.displayName = 'GalleryWrapper';
+//# sourceMappingURL=GalleryWrapper.js.map

package/dist/esm/components/GalleryWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryWrapper.js","sourceRoot":"","sources":["../../../src/components/GalleryWrapper.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/constants.js

@@ -0,0 +1,10 @@
+export const GALLERY_CONSTANTS = {
+    SLIDER_ITEM_WIDTH: 280,
+    SLIDER_ITEM_WIDTH_MOBILE: 240,
+    BREAKPOINT_MOBILE: 640,
+};
+export const MEDIA_TYPES = {
+    IMAGE: 'image',
+    VIDEO: 'video',
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/components/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,iBAAiB,EAAE,GAAG;IACtB,wBAAwB,EAAE,GAAG;IAC7B,iBAAiB,EAAE,GAAG;CACd,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC"}

package/dist/esm/components/gallery.css

@@ -0,0 +1,77 @@
+/* ShadCN Gallery Layouts - Static CSS */
+
+/*
+ * IMPORTANT: This CSS relies on the DOM structure created by @wix/fast-gallery-core
+ * The gallery creates: .scroller > .container > .item elements
+ * Do not modify these class names as they are part of the fast-gallery-core API
+ */
+
+/* Gallery Base Styles */
+.gallery-layout {
+  width: 100%;
+}
+
+/* Grid Layout - 3 columns */
+.gallery-layout.gallery-grid .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+/* Alternating Layout - 3-2-3-2 pattern */
+.gallery-layout.gallery-alternating .scroller .container {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+}
+
+/* Odd rows (1, 3, 5, ...): 3 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
+  grid-column: span 2;
+}
+
+/* Even rows (2, 4, 6, ...): 2 items per row */
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
+.gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
+  grid-column: span 3;
+}
+
+/* Slider Layout - Horizontal scrolling */
+.gallery-layout.gallery-slider .scroller .container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding-bottom: 0.5rem;
+}
+
+.gallery-layout.gallery-slider .scroller .container > .item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  width: 280px;
+  max-width: 280px;
+  min-width: 280px;
+}
+
+/* Slider responsive sizing */
+@media (max-width: 640px) {
+  .gallery-layout.gallery-slider .scroller .container > .item {
+    width: 240px;
+    max-width: 240px;
+    min-width: 240px;
+  }
+}
+
+/* Waterfall Layout - Masonry columns */
+.gallery-layout.gallery-waterfall .scroller .container {
+  columns: 3;
+  column-gap: 1rem;
+}
+
+.gallery-layout.gallery-waterfall .scroller .container > .item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export { GalleryWrapper } from './GalleryWrapper.js';
+export { GALLERY_CONSTANTS, MEDIA_TYPES } from './constants.js';
+export { galleryVariants } from './variants.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/variants.js

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority';
+export const galleryVariants = cva('w-full gallery-layout', {
+    variants: {
+        variant: {
+            grid: 'gallery-grid',
+            alternating: 'gallery-alternating',
+            slider: 'gallery-slider',
+            waterfall: 'gallery-waterfall',
+        },
+    },
+    defaultVariants: {
+        variant: 'grid',
+    },
+});
+//# sourceMappingURL=variants.js.map

package/dist/esm/components/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../../src/components/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAChC,uBAAuB,EACvB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,qBAAqB;YAClC,MAAM,EAAE,gBAAgB;YACxB,SAAS,EAAE,mBAAmB;SAC/B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CACF,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+// Export all components
+export * from './components/index.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,uBAAuB,CAAC"}

package/dist/types/components/GalleryWrapper.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { GalleryWrapperProps, BaseItem } from './types.js';
+import './gallery.css';
+export declare const GalleryWrapper: React.ForwardRefExoticComponent<GalleryWrapperProps<BaseItem> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=GalleryWrapper.d.ts.map

package/dist/types/components/GalleryWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/GalleryWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,cAAc,sGAkGzB,CAAC"}

package/dist/types/components/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const GALLERY_CONSTANTS: {
+    readonly SLIDER_ITEM_WIDTH: 280;
+    readonly SLIDER_ITEM_WIDTH_MOBILE: 240;
+    readonly BREAKPOINT_MOBILE: 640;
+};
+export declare const MEDIA_TYPES: {
+    readonly IMAGE: "image";
+    readonly VIDEO: "video";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/components/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC"}

package/dist/types/components/index.d.ts

@@ -0,0 +1,6 @@
+export { GalleryWrapper } from './GalleryWrapper.js';
+export type { LayoutType, BaseItem, GalleryWrapperProps } from './types.js';
+export { GALLERY_CONSTANTS, MEDIA_TYPES } from './constants.js';
+export { galleryVariants } from './variants.js';
+export type { GalleryVariant } from './variants.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/dist/types/components/types.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type LayoutType = 'grid' | 'alternating' | 'slider' | 'waterfall';
+export interface BaseItem {
+    id?: string;
+    _id?: string;
+    width?: number;
+    height?: number;
+}
+export interface GalleryWrapperProps<T extends BaseItem = BaseItem> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: T[];
+    variant?: LayoutType;
+    className?: string;
+    itemRenderer?: (item: T, index: number) => React.ReactNode;
+    emptyState?: React.ReactNode;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEzE,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAChE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/types/components/variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const galleryVariants: (props?: ({
+    variant?: "grid" | "alternating" | "slider" | "waterfall" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type GalleryVariant = VariantProps<typeof galleryVariants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/types/components/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;mFAe3B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@wix/fast-gallery-vibe",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "author": {
+    "name": "gabrielab",
+    "email": "gabrielab@wix.com"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/esm/components/index.js",
+      "require": "./dist/cjs/components/index.js",
+      "types": "./dist/types/components/index.d.ts"
+    },
+    "./styles.css": "./dist/components/gallery.css"
+  },
+  "files": [
+    "dist/cjs",
+    "dist/esm",
+    "dist/types",
+    "dist/components/gallery.css"
+  ],
+  "scripts": {
+    "build": "yoshi-library build && npm run copy-css",
+    "copy-css": "mkdir -p dist/components && cp src/components/gallery.css dist/components/gallery.css",
+    "start": "yoshi-library start",
+    "test": "yoshi-library test",
+    "lint": "yoshi-library lint"
+  },
+  "lint-staged": {
+    "*.{js,ts}": "yarn lint"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.28.2",
+    "@wix/fast-gallery-core": "workspace:*",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.3.1",
+    "@types/jest": "^27.5.2",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@wix/eslint-config-yoshi": "^6.156.0",
+    "@wix/jest-yoshi-preset": "^6.156.0",
+    "@wix/yoshi-flow-library": "^6.156.0",
+    "@wix/yoshi-style-dependencies": "^6.156.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^27.1.5",
+    "typescript": "~4.7.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "jest": {
+    "preset": "@wix/jest-yoshi-preset"
+  },
+  "yoshiFlowLibrary": {
+    "buildEsmWithBabel": false
+  },
+  "eslintConfig": {
+    "extends": "@wix/eslint-config-yoshi"
+  },
+  "wix": {
+    "artifact": {
+      "groupId": "com.wixpress",
+      "artifactId": "fast-gallery-vibe"
+    },
+    "validations": {
+      "postDependenciesBuild": [
+        "lint"
+      ],
+      "postBuild": [
+        "test"
+      ]
+    }
+  },
+  "wallaby": {
+    "autoDetect": true
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}