@wix/headless-bookings 0.0.29 → 0.0.30

package/dist/react/service/ServiceMedia.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ServiceMedia - Compound component for displaying service media
+ * Provides components for displaying main media, cover media, and media galleries
+ */
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { WixMediaImage } from '@wix/headless-media/react';
+import { MediaGallery } from '@wix/headless-media/react';
+import * as CoreServiceMediaMain from '../core/service/ServiceMediaMain.js';
+import * as CoreServiceMediaCover from '../core/service/ServiceMediaCover.js';
+import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["serviceMediaMain"] = "service-media-main";
+    TestIds["serviceMediaCover"] = "service-media-cover";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Main className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <ServiceMedia.Main asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </ServiceMedia.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Main asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="relative aspect-video">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
+ *         <Service.Name className="text-primary-foreground" />
+ *       </div>
+ *     </div>
+ *   ))}
+ * </ServiceMedia.Main>
+ * ```
+ */
+export const Main = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreServiceMediaMain.MainMedia, { children: ({ mainMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaMain, customElement: children, customElementProps: { media: mainMedia }, children: mainMedia?.image ? _jsx(WixMediaImage, { media: mainMedia }) : null })) }));
+});
+Main.displayName = 'ServiceMedia.Main';
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Cover className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <ServiceMedia.Cover asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </ServiceMedia.Cover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Cover asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <header ref={ref} {...props} className="relative h-96">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+ *         <h1 className="text-4xl font-bold text-primary-foreground">
+ *           <Service.Name />
+ *         </h1>
+ *       </div>
+ *     </header>
+ *   ))}
+ * </ServiceMedia.Cover>
+ * ```
+ */
+export const Cover = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreServiceMediaCover.CoverMedia, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaCover, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
+});
+Cover.displayName = 'ServiceMedia.Cover';
+/**
+ * Container for service media items gallery.
+ * Renders a MediaGallery.Root with the service media items.
+ * Supports autoPlay and infinite scroll options for carousel behavior.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with MediaGallery components
+ * <ServiceMedia.Gallery>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </ServiceMedia.Gallery>
+ *
+ * // With autoPlay carousel
+ * <ServiceMedia.Gallery
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ * </ServiceMedia.Gallery>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <ServiceMedia.Gallery infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.Viewport className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
+ *       <MediaGallery.Next>Next</MediaGallery.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails>
+ *       <MediaGallery.ThumbnailRepeater>
+ *         <MediaGallery.ThumbnailItem />
+ *       </MediaGallery.ThumbnailRepeater>
+ *     </MediaGallery.Thumbnails>
+ *   </div>
+ * </ServiceMedia.Gallery>
+ * ```
+ */
+export const Gallery = (props) => {
+    const { children, infinite, autoPlay } = props;
+    return (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => {
+            const mediaGalleryServiceConfig = {
+                media: mediaItems,
+                infinite,
+                autoPlay,
+            };
+            return (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }));
+        } }));
+};
+Gallery.displayName = 'ServiceMedia.Gallery';
+/**
+ * ServiceMedia compound component for displaying service media
+ *
+ * @example
+ * ```tsx
+ * import { Service, ServiceMedia } from '@wix/headless-bookings/react';
+ *
+ * function ServiceCard({ service }) {
+ *   return (
+ *     <Service.Root serviceServiceConfig={{ service }}>
+ *       <ServiceMedia.Main className="w-full h-48 object-cover" />
+ *       <Service.Name />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export const ServiceMedia = {
+    Main,
+    Cover,
+    Gallery,
+};
+export default ServiceMedia;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "d5bc926128d745a93a7d9bf2e81f53218a3dc1251a605c0b5b78207e"
+  "falconPackageHash": "d466b4eaebfa6f1258b0d9f3bfa7928fa0f0a6df920e8c143ebb52d0"
 }