@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/media-gallery-hero.js

@@ -0,0 +1,362 @@
+"use client";
+import {
+  ReviewBlock
+} from "./chunk-BUXCGZ6X.js";
+import {
+  GalleryIndicator
+} from "./chunk-UJJNLGTM.js";
+import {
+  buttonVariants
+} from "./chunk-B4H6RNDH.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  useCarousel
+} from "./chunk-FZDSVMKY.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/media-gallery-hero.tsx
+import { cva } from "class-variance-authority";
+import { Play } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var mediaGalleryHeroVariants = cva(
+  "relative isolate h-[350px] w-full overflow-hidden rounded-[32px] bg-surface-raised md:h-[380px] md:rounded-[40px] lg:h-[480px]"
+);
+var 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 })
+    }
+  );
+}
+export {
+  MediaGalleryHero,
+  MediaGalleryImages,
+  MediaGalleryIndicator,
+  MediaGalleryReview,
+  MediaGalleryTile,
+  MediaGalleryVideo,
+  mediaGalleryHeroVariants,
+  mediaGalleryImagesVariants
+};
+//# sourceMappingURL=media-gallery-hero.js.map

package/dist/media-gallery-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/media-gallery-hero.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Play } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { buttonVariants } from \"./button\";\nimport {\n\tCarousel,\n\tCarouselContent,\n\tCarouselItem,\n\tuseCarousel,\n} from \"./carousel\";\nimport { GalleryIndicator } from \"./gallery-indicator\";\nimport { cn } from \"./lib/cn\";\nimport { ReviewBlock, type ReviewBlockProps } from \"./review-block\";\n\nconst mediaGalleryHeroVariants = cva(\n\t\"relative isolate h-[350px] w-full overflow-hidden rounded-[32px] bg-surface-raised md:h-[380px] md:rounded-[40px] lg:h-[480px]\",\n);\n\nconst mediaGalleryImagesVariants = cva(\n\t\"absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 bg-surface-raised md:grid\",\n\t{\n\t\tvariants: {\n\t\t\timageCount: {\n\t\t\t\t1: \"\",\n\t\t\t\t2: \"gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)]\",\n\t\t\t\t3: \"gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)] grid-rows-2\",\n\t\t\t\t4: \"gap-2 grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)] grid-rows-2\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\timageCount: 4,\n\t\t},\n\t},\n);\n\ntype MediaGalleryHeroProps = React.ComponentProps<\"div\"> &\n\tVariantProps<typeof mediaGalleryHeroVariants>;\n\ntype MediaGalleryImageCount = 1 | 2 | 3 | 4;\n\ntype MediaGalleryItem = {\n\tid?: string;\n\tsrc?: string;\n\talt?: string;\n\ttype?: \"image\" | \"video\";\n};\n\ntype MediaGalleryImagesProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n\tVariantProps<typeof mediaGalleryImagesVariants> & {\n\t\timages: MediaGalleryItem[];\n\t\tcurrentMedia?: number;\n\t\ttotalMediaCount?: number;\n\t\tshowMobileIndicator?: boolean;\n\t\tonMediaClick?: (index: number) => void;\n\t\trenderMedia?: (image: MediaGalleryItem, index: number) => React.ReactNode;\n\t};\n\ntype MediaGalleryVideoProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n\tsrc?: string;\n\tposter?: string;\n\talt?: string;\n\tlabel?: string;\n\tautoPlay?: boolean;\n\tcontrols?: boolean;\n\tloop?: boolean;\n\tmuted?: boolean;\n\tplaysInline?: boolean;\n\tonPlayClick?: React.MouseEventHandler<HTMLButtonElement>;\n\trenderMedia?: () => React.ReactNode;\n};\n\ntype MediaGalleryReviewProps = ReviewBlockProps;\n\ntype MediaGalleryIndicatorProps = Omit<\n\tReact.ComponentProps<\"button\">,\n\t\"children\"\n> & {\n\tlabel?: string;\n\ttotalMediaCount?: number;\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\nfunction MediaGalleryHero({ className, ...props }: MediaGalleryHeroProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(mediaGalleryHeroVariants(), className)}\n\t\t\tdata-slot=\"media-gallery-hero\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction getVisibleImages(\n\timages: MediaGalleryItem[],\n\timageCount: MediaGalleryImageCount,\n) {\n\tif (images.length === 0) {\n\t\treturn [{}] satisfies MediaGalleryItem[];\n\t}\n\n\treturn images.slice(0, imageCount);\n}\n\nfunction getTileClassName(index: number, imageCount: MediaGalleryImageCount) {\n\tif (index === 0) {\n\t\treturn \"md:col-start-1 md:row-span-2\";\n\t}\n\n\tif (imageCount === 2 && index === 1) {\n\t\treturn \"md:col-start-2 md:row-span-2\";\n\t}\n\n\tif (imageCount === 3 && index === 1) {\n\t\treturn \"md:col-start-2 md:row-start-1\";\n\t}\n\n\tif (imageCount === 3 && index === 2) {\n\t\treturn \"md:col-start-2 md:row-start-2\";\n\t}\n\n\tif (imageCount === 4 && index === 1) {\n\t\treturn \"md:col-start-2 md:row-span-2\";\n\t}\n\n\tif (imageCount === 4 && index === 2) {\n\t\treturn \"md:col-start-3 md:row-start-1\";\n\t}\n\n\treturn \"md:col-start-3 md:row-start-2\";\n}\n\nfunction getMediaKey(image: MediaGalleryItem) {\n\treturn image.id ?? image.src ?? image.alt ?? \"placeholder\";\n}\n\nfunction MediaGalleryTile({\n\tclassName,\n\timage,\n\tindex,\n\tisDesktopTile,\n\tonMediaClick,\n\trenderMedia,\n}: {\n\tclassName?: string;\n\timage: MediaGalleryItem;\n\tindex: number;\n\tisDesktopTile?: boolean;\n\tonMediaClick?: (index: number) => void;\n\trenderMedia?: (image: MediaGalleryItem, index: number) => React.ReactNode;\n}) {\n\tconst content =\n\t\trenderMedia?.(image, index) ??\n\t\t(image.src ? (\n\t\t\t<img\n\t\t\t\talt={image.alt ?? \"\"}\n\t\t\t\tclassName=\"size-full object-cover\"\n\t\t\t\tdraggable={false}\n\t\t\t\tsrc={image.src}\n\t\t\t/>\n\t\t) : (\n\t\t\t<span className=\"text-gdt-sm font-medium text-fg-caption-placeholder\">\n\t\t\t\tMedia\n\t\t\t</span>\n\t\t));\n\n\tconst tileClassName = cn(\n\t\t\"relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]\",\n\t\t\"[&>img]:size-full [&>img]:object-cover\",\n\t\tisDesktopTile && \"hidden md:flex\",\n\t\tclassName,\n\t);\n\n\tif (!onMediaClick) {\n\t\treturn (\n\t\t\t<div className={tileClassName} data-slot=\"media-gallery-tile\">\n\t\t\t\t{content}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\taria-label={`Open media ${index + 1}`}\n\t\t\tclassName={cn(tileClassName, \"cursor-pointer text-left\")}\n\t\t\tdata-slot=\"media-gallery-tile\"\n\t\t\tonClick={() => onMediaClick(index)}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{content}\n\t\t</button>\n\t);\n}\n\nfunction MobileGalleryCounter({ total }: { total: number }) {\n\tconst { selectedIndex } = useCarousel();\n\n\treturn (\n\t\t<GalleryIndicator\n\t\t\tcurrentPhoto={selectedIndex + 1}\n\t\t\tsize=\"sm\"\n\t\t\ttotalPhotos={total}\n\t\t/>\n\t);\n}\n\nfunction MobileMediaCarousel({\n\tcurrentMedia,\n\timages,\n\tmediaTotal,\n\tonMediaClick,\n\trenderMedia,\n\tshowMobileIndicator,\n}: {\n\tcurrentMedia: number;\n\timages: MediaGalleryItem[];\n\tmediaTotal: number;\n\tonMediaClick?: (index: number) => void;\n\trenderMedia?: (image: MediaGalleryItem, index: number) => React.ReactNode;\n\tshowMobileIndicator: boolean;\n}) {\n\tconst carouselImages =\n\t\timages.length > 0 ? images : ([{}] satisfies MediaGalleryItem[]);\n\n\treturn (\n\t\t<Carousel\n\t\t\tclassName=\"absolute inset-0 z-0 block size-full rounded-[32px] bg-surface-raised md:hidden\"\n\t\t\timageSize=\"full\"\n\t\t\topts={{\n\t\t\t\talign: \"start\",\n\t\t\t\tloop: carouselImages.length > 1,\n\t\t\t\tstartIndex: Math.max(0, currentMedia - 1),\n\t\t\t}}\n\t\t>\n\t\t\t<CarouselContent>\n\t\t\t\t{carouselImages.map((image, index) => (\n\t\t\t\t\t<CarouselItem className=\"h-full\" key={getMediaKey(image)}>\n\t\t\t\t\t\t<MediaGalleryTile\n\t\t\t\t\t\t\tclassName=\"rounded-[32px]\"\n\t\t\t\t\t\t\timage={image}\n\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\tonMediaClick={onMediaClick}\n\t\t\t\t\t\t\trenderMedia={renderMedia}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CarouselItem>\n\t\t\t\t))}\n\t\t\t</CarouselContent>\n\t\t\t{showMobileIndicator ? (\n\t\t\t\t<div className=\"absolute right-4 bottom-4 z-10\">\n\t\t\t\t\t<MobileGalleryCounter total={mediaTotal} />\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</Carousel>\n\t);\n}\n\nfunction MediaGalleryImages({\n\tclassName,\n\tcurrentMedia = 1,\n\timageCount = 4,\n\timages,\n\tonMediaClick,\n\trenderMedia,\n\tshowMobileIndicator = true,\n\ttotalMediaCount,\n\t...props\n}: MediaGalleryImagesProps) {\n\tconst resolvedImageCount = imageCount ?? 4;\n\tconst mediaTotal = totalMediaCount ?? Math.max(images.length, 1);\n\tconst visibleImages = getVisibleImages(images, resolvedImageCount);\n\n\treturn (\n\t\t<>\n\t\t\t<MobileMediaCarousel\n\t\t\t\tcurrentMedia={currentMedia}\n\t\t\t\timages={images}\n\t\t\t\tmediaTotal={mediaTotal}\n\t\t\t\tonMediaClick={onMediaClick}\n\t\t\t\trenderMedia={renderMedia}\n\t\t\t\tshowMobileIndicator={showMobileIndicator}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tmediaGalleryImagesVariants({ imageCount: resolvedImageCount }),\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-image-count={resolvedImageCount}\n\t\t\t\tdata-slot=\"media-gallery-images\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{visibleImages.map((image, index) => (\n\t\t\t\t\t<MediaGalleryTile\n\t\t\t\t\t\tclassName={getTileClassName(index, resolvedImageCount)}\n\t\t\t\t\t\timage={image}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tisDesktopTile\n\t\t\t\t\t\tkey={getMediaKey(image)}\n\t\t\t\t\t\tonMediaClick={onMediaClick}\n\t\t\t\t\t\trenderMedia={renderMedia}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction MediaGalleryVideo({\n\talt = \"\",\n\tautoPlay,\n\tclassName,\n\tcontrols,\n\tlabel = \"Play Video\",\n\tloop,\n\tmuted,\n\tonPlayClick,\n\tplaysInline = true,\n\tposter,\n\trenderMedia,\n\tsrc,\n\t...props\n}: MediaGalleryVideoProps) {\n\tconst content =\n\t\trenderMedia?.() ??\n\t\t(src ? (\n\t\t\t<video\n\t\t\t\tautoPlay={autoPlay}\n\t\t\t\tclassName=\"size-full object-cover\"\n\t\t\t\tcontrols={controls}\n\t\t\t\tloop={loop}\n\t\t\t\tmuted={muted}\n\t\t\t\tplaysInline={playsInline}\n\t\t\t\tposter={poster}\n\t\t\t\tsrc={src}\n\t\t\t/>\n\t\t) : poster ? (\n\t\t\t<img\n\t\t\t\talt={alt}\n\t\t\t\tclassName=\"size-full object-cover\"\n\t\t\t\tdraggable={false}\n\t\t\t\tsrc={poster}\n\t\t\t/>\n\t\t) : (\n\t\t\t<span className=\"text-gdt-sm font-medium text-fg-caption-placeholder\">\n\t\t\t\tVideo\n\t\t\t</span>\n\t\t));\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]\",\n\t\t\t\t\"[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"media-gallery-video\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{content}\n\t\t\t{controls ? null : (\n\t\t\t\t<button\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tbuttonVariants({\n\t\t\t\t\t\t\tvariant: \"glass-overlay\",\n\t\t\t\t\t\t\tsize: \"icon-xl\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t\t\"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\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"media-gallery-video-play\"\n\t\t\t\t\tonClick={onPlayClick}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<Play aria-hidden=\"true\" className=\"ml-0.5\" fill=\"currentColor\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction MediaGalleryReview({\n\tbordered = false,\n\tclassName,\n\tsize = \"xs\",\n\t...props\n}: MediaGalleryReviewProps) {\n\treturn (\n\t\t<ReviewBlock\n\t\t\tbordered={bordered}\n\t\t\tclassName={cn(\"absolute top-4 left-4 z-10\", className)}\n\t\t\tsize={size}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MediaGalleryIndicator({\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tlabel,\n\tonClick,\n\tsize = \"md\",\n\ttotalMediaCount = 35,\n\t...props\n}: MediaGalleryIndicatorProps) {\n\tconst indicatorLabel =\n\t\tlabel ?? `View All ${totalMediaCount.toLocaleString()} Photos`;\n\n\tif (onClick) {\n\t\treturn (\n\t\t\t<button\n\t\t\t\taria-label={ariaLabel ?? indicatorLabel}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-4 bottom-4 z-10 hidden rounded-full md:block\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-slot=\"media-gallery-indicator\"\n\t\t\t\tonClick={onClick}\n\t\t\t\ttype=\"button\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<GalleryIndicator\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tlabel={indicatorLabel}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\t\t\t</button>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute right-4 bottom-4 z-10 hidden md:block\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"media-gallery-indicator\"\n\t\t>\n\t\t\t<GalleryIndicator label={indicatorLabel} size={size} />\n\t\t</div>\n\t);\n}\n\nexport {\n\tMediaGalleryHero,\n\tMediaGalleryImages,\n\tMediaGalleryIndicator,\n\tMediaGalleryReview,\n\tMediaGalleryTile,\n\tMediaGalleryVideo,\n\tmediaGalleryHeroVariants,\n\tmediaGalleryImagesVariants,\n};\nexport type {\n\tMediaGalleryHeroProps,\n\tMediaGalleryImageCount,\n\tMediaGalleryImagesProps,\n\tMediaGalleryIndicatorProps,\n\tMediaGalleryItem,\n\tMediaGalleryReviewProps,\n\tMediaGalleryVideoProps,\n};\n"],"mappings":"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","names":[]}

package/dist/media-player.d.ts

@@ -0,0 +1,60 @@
+import { Slider } from '@base-ui/react/slider';
+import { MediaProvider } from 'media-chrome/react/media-store';
+import * as React from 'react';
+
+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;
+
+export { MediaPlayer, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerVideo, MediaPlayerVolume };