@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/media-gallery-hero.js

@@ -0,0 +1,201 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { buttonVariants } from "./button.js";
+import { Carousel, CarouselContent, CarouselItem, useCarousel } from "./carousel.js";
+import { GalleryIndicator } from "./gallery-indicator.js";
+import { ReviewBlock } from "./review-block.js";
+import { Play } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/media-gallery-hero.tsx
+const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] bg-surface-raised md:h-[380px] md:rounded-[40px] lg:h-[480px]");
+const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 bg-surface-raised md:grid", {
+	variants: { imageCount: {
+		1: "",
+		2: "gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)]",
+		3: "gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)] grid-rows-2",
+		4: "gap-2 grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)] grid-rows-2"
+	} },
+	defaultVariants: { imageCount: 4 }
+});
+function MediaGalleryHero({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(mediaGalleryHeroVariants(), className),
+		"data-slot": "media-gallery-hero",
+		...props
+	});
+}
+function getVisibleImages(images, imageCount) {
+	if (images.length === 0) return [{}];
+	return images.slice(0, imageCount);
+}
+function getTileClassName(index, imageCount) {
+	if (index === 0) return "md:col-start-1 md:row-span-2";
+	if (imageCount === 2 && index === 1) return "md:col-start-2 md:row-span-2";
+	if (imageCount === 3 && index === 1) return "md:col-start-2 md:row-start-1";
+	if (imageCount === 3 && index === 2) return "md:col-start-2 md:row-start-2";
+	if (imageCount === 4 && index === 1) return "md:col-start-2 md:row-span-2";
+	if (imageCount === 4 && index === 2) return "md:col-start-3 md:row-start-1";
+	return "md:col-start-3 md:row-start-2";
+}
+function getMediaKey(image) {
+	return image.id ?? image.src ?? image.alt ?? "placeholder";
+}
+function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick, renderMedia }) {
+	const content = renderMedia?.(image, index) ?? (image.src ? /* @__PURE__ */ jsx("img", {
+		alt: image.alt ?? "",
+		className: "size-full object-cover",
+		draggable: false,
+		src: image.src
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "text-gdt-sm font-medium text-fg-caption-placeholder",
+		children: "Media"
+	}));
+	const tileClassName = cn("relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover", isDesktopTile && "hidden md:flex", className);
+	if (!onMediaClick) return /* @__PURE__ */ jsx("div", {
+		className: tileClassName,
+		"data-slot": "media-gallery-tile",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Open media ${index + 1}`,
+		className: cn(tileClassName, "cursor-pointer text-left"),
+		"data-slot": "media-gallery-tile",
+		onClick: () => onMediaClick(index),
+		type: "button",
+		children: content
+	});
+}
+function MobileGalleryCounter({ total }) {
+	const { selectedIndex } = useCarousel();
+	return /* @__PURE__ */ jsx(GalleryIndicator, {
+		currentPhoto: selectedIndex + 1,
+		size: "sm",
+		totalPhotos: total
+	});
+}
+function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
+	const carouselImages = images.length > 0 ? images : [{}];
+	return /* @__PURE__ */ jsxs(Carousel, {
+		className: "absolute inset-0 z-0 block size-full rounded-[32px] bg-surface-raised md:hidden",
+		imageSize: "full",
+		opts: {
+			align: "start",
+			loop: carouselImages.length > 1,
+			startIndex: Math.max(0, currentMedia - 1)
+		},
+		children: [/* @__PURE__ */ jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, {
+			className: "h-full",
+			children: /* @__PURE__ */ jsx(MediaGalleryTile, {
+				className: "rounded-[32px]",
+				image,
+				index,
+				onMediaClick,
+				renderMedia
+			})
+		}, getMediaKey(image))) }), showMobileIndicator ? /* @__PURE__ */ jsx("div", {
+			className: "absolute right-4 bottom-4 z-10",
+			children: /* @__PURE__ */ jsx(MobileGalleryCounter, { total: mediaTotal })
+		}) : null]
+	});
+}
+function MediaGalleryImages({ className, currentMedia = 1, imageCount = 4, images, onMediaClick, renderMedia, showMobileIndicator = true, totalMediaCount, ...props }) {
+	const resolvedImageCount = imageCount ?? 4;
+	const mediaTotal = totalMediaCount ?? Math.max(images.length, 1);
+	const visibleImages = getVisibleImages(images, resolvedImageCount);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMediaCarousel, {
+		currentMedia,
+		images,
+		mediaTotal,
+		onMediaClick,
+		renderMedia,
+		showMobileIndicator
+	}), /* @__PURE__ */ jsx("div", {
+		className: cn(mediaGalleryImagesVariants({ imageCount: resolvedImageCount }), className),
+		"data-image-count": resolvedImageCount,
+		"data-slot": "media-gallery-images",
+		...props,
+		children: visibleImages.map((image, index) => /* @__PURE__ */ jsx(MediaGalleryTile, {
+			className: getTileClassName(index, resolvedImageCount),
+			image,
+			index,
+			isDesktopTile: true,
+			onMediaClick,
+			renderMedia
+		}, getMediaKey(image)))
+	})] });
+}
+function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "Play Video", loop, muted, onPlayClick, playsInline = true, poster, renderMedia, src, ...props }) {
+	const content = renderMedia?.() ?? (src ? /* @__PURE__ */ jsx("video", {
+		autoPlay,
+		className: "size-full object-cover",
+		controls,
+		loop,
+		muted,
+		playsInline,
+		poster,
+		src
+	}) : poster ? /* @__PURE__ */ jsx("img", {
+		alt,
+		className: "size-full object-cover",
+		draggable: false,
+		src: poster
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "text-gdt-sm font-medium text-fg-caption-placeholder",
+		children: "Video"
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
+		"data-slot": "media-gallery-video",
+		...props,
+		children: [content, controls ? null : /* @__PURE__ */ jsx("button", {
+			"aria-label": label,
+			className: cn(buttonVariants({
+				variant: "glass-overlay",
+				size: "icon-xl"
+			}), "absolute top-1/2 left-1/2 z-10 size-20 -translate-x-1/2 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2 md:size-24"),
+			"data-slot": "media-gallery-video-play",
+			onClick: onPlayClick,
+			type: "button",
+			children: /* @__PURE__ */ jsx(Play, {
+				"aria-hidden": "true",
+				className: "ml-0.5",
+				fill: "currentColor"
+			})
+		})]
+	});
+}
+function MediaGalleryReview({ bordered = false, className, size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(ReviewBlock, {
+		bordered,
+		className: cn("absolute top-4 left-4 z-10", className),
+		size,
+		...props
+	});
+}
+function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onClick, size = "md", totalMediaCount = 35, ...props }) {
+	const indicatorLabel = label ?? `View All ${totalMediaCount.toLocaleString()} Photos`;
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel ?? indicatorLabel,
+		className: cn("absolute right-4 bottom-4 z-10 hidden rounded-full md:block", className),
+		"data-slot": "media-gallery-indicator",
+		onClick,
+		type: "button",
+		...props,
+		children: /* @__PURE__ */ jsx(GalleryIndicator, {
+			"aria-hidden": "true",
+			label: indicatorLabel,
+			size
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute right-4 bottom-4 z-10 hidden md:block", className),
+		"data-slot": "media-gallery-indicator",
+		children: /* @__PURE__ */ jsx(GalleryIndicator, {
+			label: indicatorLabel,
+			size
+		})
+	});
+}
+//#endregion
+export { MediaGalleryHero, MediaGalleryImages, MediaGalleryIndicator, MediaGalleryReview, MediaGalleryTile, MediaGalleryVideo, mediaGalleryHeroVariants, mediaGalleryImagesVariants };

package/dist/media-player.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Slider } from "@base-ui/react/slider";
+import { MediaProvider } from "media-chrome/react/media-store";
+//#region src/media-player.d.ts
+type MediaProviderProps = React.ComponentProps<typeof MediaProvider>;
+type MediaPlayerProps = React.ComponentProps<"div"> & {
+  audio?: boolean;
+  mediaStore?: MediaProviderProps["mediaStore"];
+};
+type MediaPlayerControlsProps = React.ComponentProps<"div">;
+type MediaPlayerVideoProps = React.ComponentProps<"video">;
+type MediaPlayerAudioProps = React.ComponentProps<"audio">;
+type MediaPlayerControlsOverlayProps = React.ComponentProps<"div">;
+type MediaPlayerPlayProps = React.ComponentProps<"button">;
+type MediaPlayerSeekButtonProps = React.ComponentProps<"button"> & {
+  seekOffset?: number;
+};
+type MediaPlayerVolumeProps = React.ComponentProps<"button"> & {
+  expandable?: boolean;
+  rangeClassName?: string;
+};
+type MediaPlayerPlaybackSpeedProps = React.ComponentProps<"button"> & {
+  rates?: number[];
+};
+type MediaPlayerCaptionsProps = React.ComponentProps<"button">;
+type MediaPlayerSettingsProps = React.ComponentProps<"button"> & {
+  rates?: number[];
+};
+type MediaPlayerTimeProps = React.ComponentProps<"span"> & {
+  showDuration?: boolean;
+};
+type MediaPlayerSeekProps = Omit<Slider.Root.Props<number>, "defaultValue" | "onValueChange" | "onValueCommitted" | "value"> & {
+  onValueChange?: (value: number) => void;
+  step?: number;
+  withTime?: boolean;
+};
+type MediaPlayerLoopProps = React.ComponentProps<"button">;
+type MediaPlayerPiPProps = React.ComponentProps<"button">;
+type MediaPlayerFullscreenProps = React.ComponentProps<"button">;
+type MediaPlayerErrorProps = React.ComponentProps<"div">;
+declare function MediaPlayer({ mediaStore, ...props }: MediaPlayerProps): React.JSX.Element;
+declare function MediaPlayerVideo({ className, ref, ...props }: MediaPlayerVideoProps): React.JSX.Element;
+declare function MediaPlayerAudio({ className, ref, ...props }: MediaPlayerAudioProps): React.JSX.Element;
+declare function MediaPlayerControls({ className, ...props }: MediaPlayerControlsProps): React.JSX.Element;
+declare function MediaPlayerControlsOverlay({ className, ...props }: MediaPlayerControlsOverlayProps): React.JSX.Element;
+declare function MediaPlayerPlay({ className, onClick, ...props }: MediaPlayerPlayProps): React.JSX.Element;
+declare function MediaPlayerSeekBackward({ className, onClick, seekOffset, ...props }: MediaPlayerSeekButtonProps): React.JSX.Element;
+declare function MediaPlayerSeekForward({ className, onClick, seekOffset, ...props }: MediaPlayerSeekButtonProps): React.JSX.Element;
+declare function MediaPlayerVolume({ className, disabled, expandable, onClick, rangeClassName, ...props }: MediaPlayerVolumeProps): React.JSX.Element;
+declare function MediaPlayerPlaybackSpeed({ className, rates, ...props }: MediaPlayerPlaybackSpeedProps): React.JSX.Element;
+declare function MediaPlayerCaptions({ className, disabled, onClick, ...props }: MediaPlayerCaptionsProps): React.JSX.Element;
+declare function MediaPlayerSettings({ className, rates, ...props }: MediaPlayerSettingsProps): React.JSX.Element;
+declare function MediaPlayerTime({ className, showDuration, ...props }: MediaPlayerTimeProps): React.JSX.Element;
+declare function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ariaLabel, step, withTime, ...props }: MediaPlayerSeekProps): React.JSX.Element;
+declare function MediaPlayerLoop({ className, onClick, ...props }: MediaPlayerLoopProps): React.JSX.Element;
+declare function MediaPlayerPiP({ className, disabled, onClick, ...props }: MediaPlayerPiPProps): React.JSX.Element;
+declare function MediaPlayerFullscreen({ className, disabled, onClick, ...props }: MediaPlayerFullscreenProps): React.JSX.Element;
+declare function MediaPlayerError({ children, className, ...props }: MediaPlayerErrorProps): React.JSX.Element | null;
+//#endregion
+export { MediaPlayer, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerVideo, MediaPlayerVolume };