fix: Add TypeScript Types for Cloudinary Product Gallery Widget (#218)

# Description

This pull request introduces TypeScript types for the Cloudinary Product
Gallery Widget. It defines a comprehensive interface for the widget,
following the reference documentation for better type safety and
improved developer experience. No additional dependencies are required
for this change.

## Issue Ticket Number
199 

Fixes #199 


## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update

# Checklist

<!-- These must all be followed and checked. -->

- [x] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [x] I have created an
[issue](https://github.com/colbyfayock/cloudinary-util/issues) ticket
for this PR
- [x] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/cloudinary-util/pulls) for the
same update/change?
- [x] I have performed a self-review of my own code
- [x] I have run tests locally to ensure they all pass
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes needed to the documentation

Author: Mrinank-Bhowmick

packages/types/src/index.ts

@@ -37,6 +37,8 @@ export type {
   CloudinaryVideoPlayerTextTracksTrackOptionsTheme,
 } from "./types/cloudinary-video-player.js";
 
+export type { CloudinaryProductGallery } from "./types/cloudinary-product-gallery.js";
+
 export type {
   CloudinaryAssetConfiguration,
   CloudinaryAssetConfigurationAuthToken,

packages/types/src/types/cloudinary-product-gallery.ts

@@ -0,0 +1,135 @@
+export interface CloudinaryProductGallery {
+  // Required parameters
+  cloudName?: string;
+  mediaAssets?:
+    | {
+        publicId?: string;
+        tag?: string;
+        mediaType?: string;
+        resourceType?: string;
+        transformation?: object;
+        thumbnailTransformation?: object;
+        altText?: string;
+        videoPlayerSource?: object;
+      }[]
+    | string[]; // string[] is a list of publicIDs
+  container?: string | HTMLElement;
+
+  // Widget
+  analytics?: boolean;
+  displayProps?: {
+    mode?: "classic" | "expanded";
+    spacing?: number;
+    columns?: number;
+    topOffset?: number;
+    bottomOffset?: number;
+  };
+  focus?: boolean;
+  loaderProps?: {
+    color?: string;
+    opacity?: number;
+    style?: "cloudinary" | "circle" | "custom";
+    url?: string;
+  };
+  placeholderImage?: boolean;
+  sort?: "none" | "asc" | "desc";
+  sortProps?: {
+    source?: string;
+    id?: string;
+    direction?: string;
+  };
+  themeProps?: {
+    primary?: string; // Default: "#FFFFFF"
+    onPrimary?: string; // Default: "#000000"
+    active?: string; // Default: "#0078FF"
+  };
+  viewportBreakpoints?: {
+    breakpoint: number; // Required
+    [key: string]: any; // Other configuration parameters to override
+  }[];
+
+  // Main viewer parameters
+  accessibilityProps?: {
+    mediaAltSource?: string;
+    mediaAltId?: string;
+  };
+  ar3dProps?: {
+    shadows?: boolean;
+    showAR?: boolean;
+  };
+  aspectRatio?:
+    | "square"
+    | "1:1"
+    | "3:4"
+    | "4:3"
+    | "4:6"
+    | "6:4"
+    | "5:7"
+    | "7:5"
+    | "5:8"
+    | "8:5"
+    | "9:16"
+    | "16:9";
+  borderColor?: string;
+  borderWidth?: number;
+  imageBreakpoint?: number;
+  videoBreakpoint?: number;
+  preload?: string[];
+  radius?: number;
+  spinProps?: {
+    animate?: "none" | "start" | "end" | "both";
+    spinDirection?: "clockwise" | "counter-clockwise";
+    disableZoom?: boolean;
+    showTip?: "always" | "never" | "touch";
+    tipPosition?: "top" | "center" | "bottom";
+    tipText?: string; // Default: "Drag to rotate"
+    tipTouchText?: string; // Default: "Swipe to rotate"
+  };
+  startIndex?: number;
+  tipProps?: {
+    textColor?: string;
+    color?: string;
+    radius?: number;
+    opacity?: number;
+  };
+  transition?: "slide" | "fade" | "none";
+  videoProps?: {
+    controls?: string;
+    sound?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    playerType?: string;
+  };
+  zoom?: boolean;
+  zoomProps?: any;
+  zoomPopupProps?: {
+    backdropColor?: string;
+    backdropOpacity?: number;
+    zIndex?: number;
+  };
+
+  // Carousel parameters
+  carouselLocation?: "left" | "right" | "top" | "bottom";
+  carouselOffset?: number;
+  carouselStyle?: "none" | "thumbnails" | "indicators";
+  indicatorProps?: {
+    color?: string;
+    selectedColor?: string;
+    shape?: "round" | "square" | "radius";
+    size?: number;
+    spacing?: number;
+    sticky?: boolean;
+  };
+  thumbnailProps?: any;
+
+  // Navigation parameters
+  navigation?: "none" | "always" | "mouseover";
+  navigationButtonProps?: {
+    shape?: "none" | "round" | "square" | "radius" | "rectangle";
+    iconColor?: string;
+    color?: string;
+    size?: number;
+  };
+  navigationOffset?: number;
+  navigationPosition?: "inside" | "outside" | "offset";
+}