@opensite/ui 2.8.5 → 2.8.7

package/dist/carousel-gallery-thumbnails.d.ts

@@ -117,10 +117,15 @@ interface CarouselGalleryThumbnailsProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "default"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)
      */
     slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
+declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, slideMediaOverlayIntensity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
 
 export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };

package/dist/carousel-gallery-thumbnails.js

@@ -12,16 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var BRIGHTNESS_CLASS_MAP = {
-  "10": "brightness-[.1]",
-  "20": "brightness-[.2]",
-  "25": "brightness-[.25]",
-  "30": "brightness-[.3]",
-  "40": "brightness-[.4]",
-  "50": "brightness-50",
-  "75": "brightness-75",
-  "100": "brightness-100"
-};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -448,6 +438,67 @@ var DynamicIcon = React.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -842,7 +893,8 @@ function CarouselGalleryThumbnails({
   spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "100"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "default"
 }) {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const prevSlide = React.useCallback(() => {
@@ -891,7 +943,7 @@ function CarouselGalleryThumbnails({
                 "relative aspect-video w-full overflow-hidden",
                 slideClassName
               ),
-              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsx(
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: cn(
@@ -899,19 +951,21 @@ function CarouselGalleryThumbnails({
                     index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
                     image.className
                   ),
-                  children: /* @__PURE__ */ jsx(
-                    Img,
-                    {
-                      src: image.src,
-                      alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                      className: cn(
-                        "h-full w-full object-cover",
-                        BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                        image.imageClassName
-                      ),
-                      optixFlowConfig
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: image.src,
+                        alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
+                        className: cn(
+                          "h-full w-full object-cover",
+                          image.imageClassName
+                        ),
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+                  ]
                 },
                 `slide-${index}`
               ))

package/dist/carousel-portfolio-hero.cjs

@@ -34,16 +34,6 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var BRIGHTNESS_CLASS_MAP = {
-  "10": "brightness-[.1]",
-  "20": "brightness-[.2]",
-  "25": "brightness-[.25]",
-  "30": "brightness-[.3]",
-  "40": "brightness-[.4]",
-  "50": "brightness-50",
-  "75": "brightness-75",
-  "100": "brightness-100"
-};
 function getNestedCardBg(parentBg, variant = "muted", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -500,6 +490,67 @@ var DynamicIcon = React6__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -992,7 +1043,8 @@ function CarouselPortfolioHero({
   spacing = "none",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high"
 }) {
   const [currentIndex, setCurrentIndex] = React6__namespace.useState(0);
   const intervalRef = React6__namespace.useRef(null);
@@ -1033,7 +1085,7 @@ function CarouselPortfolioHero({
       patternOpacity,
       containerClassName,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -1041,19 +1093,21 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: slide.image,
-                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                className: cn(
-                  "h-full w-full object-cover",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  slide.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: slide.image,
+                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                  className: cn(
+                    "h-full w-full object-cover",
+                    slide.imageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           slide.id
         )),

package/dist/carousel-portfolio-hero.d.cts

@@ -129,10 +129,15 @@ interface CarouselPortfolioHeroProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "high"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)
      */
     slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselPortfolioHeroProps): React.JSX.Element;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, slideMediaOverlayIntensity, }: CarouselPortfolioHeroProps): React.JSX.Element;
 
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

package/dist/carousel-portfolio-hero.d.ts

@@ -129,10 +129,15 @@ interface CarouselPortfolioHeroProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "high"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)
      */
     slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselPortfolioHeroProps): React.JSX.Element;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, slideMediaOverlayIntensity, }: CarouselPortfolioHeroProps): React.JSX.Element;
 
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

package/dist/carousel-portfolio-hero.js

@@ -13,16 +13,6 @@ import { Slot } from '@radix-ui/react-slot';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var BRIGHTNESS_CLASS_MAP = {
-  "10": "brightness-[.1]",
-  "20": "brightness-[.2]",
-  "25": "brightness-[.25]",
-  "30": "brightness-[.3]",
-  "40": "brightness-[.4]",
-  "50": "brightness-50",
-  "75": "brightness-75",
-  "100": "brightness-100"
-};
 function getNestedCardBg(parentBg, variant = "muted", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -479,6 +469,67 @@ var DynamicIcon = React6.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -971,7 +1022,8 @@ function CarouselPortfolioHero({
   spacing = "none",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high"
 }) {
   const [currentIndex, setCurrentIndex] = React6.useState(0);
   const intervalRef = React6.useRef(null);
@@ -1012,7 +1064,7 @@ function CarouselPortfolioHero({
       patternOpacity,
       containerClassName,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -1020,19 +1072,21 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: slide.image,
-                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                className: cn(
-                  "h-full w-full object-cover",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  slide.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: slide.image,
+                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                  className: cn(
+                    "h-full w-full object-cover",
+                    slide.imageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           slide.id
         )),

package/dist/components.cjs

@@ -2129,6 +2129,23 @@ function PopoverContent({
     }
   ) });
 }
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -2230,6 +2247,7 @@ var SocialLinkIcon = React6__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -2242,6 +2260,21 @@ var SocialLinkIcon = React6__namespace.forwardRef(
     const accessibleLabel = React6__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React6__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -2253,16 +2286,7 @@ var SocialLinkIcon = React6__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }
@@ -7563,3 +7587,4 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Pressable = Pressable;
 exports.Section = Section;
 exports.SocialLinkIcon = SocialLinkIcon;
+exports.StarRating = StarRating;

package/dist/components.d.cts

@@ -9,6 +9,7 @@ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 export { Badge } from './badge.cjs';
 export { Popover, PopoverContent, PopoverTrigger } from './popover.cjs';
 export { DynamicIcon } from './dynamic-icon.cjs';
+import * as React from 'react';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.cjs';
 export { SocialLinkIcon, SocialLinkIconDynamicIconProps, SocialLinkIconProps } from './social-link-icon.cjs';
 export { PaymentPlatformIcon, PaymentPlatformIconProps, PaymentPlatformName } from './payment-platform-icon.cjs';
@@ -40,14 +41,40 @@ export { FooterNewsletterMinimal } from './footer-newsletter-minimal.cjs';
 export { FooterCtaSocial } from './footer-cta-social.cjs';
 export { FooterNavSocial } from './footer-nav-social.cjs';
 export { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
-import 'react';
-import '@page-speed/maps';
 import './blocks-D1hqLk46.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';
+import '@page-speed/maps';
 import '@radix-ui/react-popover';
 import '@page-speed/icon';
 import './types-Cs1jk79n.cjs';
 import '@page-speed/forms/integration';
+
+interface StarRatingProps {
+    /**
+     * Star rating value (1-5)
+     */
+    rating: number;
+    /**
+     * Icon size in pixels
+     */
+    size?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+}
+/**
+ * StarRating - Displays a 1-5 star rating using filled/muted star icons.
+ * Uses CSS variable-based colors (primary/muted) for theme compatibility.
+ *
+ * @example
+ * ```tsx
+ * <StarRating rating={4} size={18} />
+ * ```
+ */
+declare function StarRating({ rating, size, className, }: StarRatingProps): React.JSX.Element;
+
+export { StarRating, type StarRatingProps };

package/dist/components.d.ts

@@ -9,6 +9,7 @@ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 export { Badge } from './badge.js';
 export { Popover, PopoverContent, PopoverTrigger } from './popover.js';
 export { DynamicIcon } from './dynamic-icon.js';
+import * as React from 'react';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.js';
 export { SocialLinkIcon, SocialLinkIconDynamicIconProps, SocialLinkIconProps } from './social-link-icon.js';
 export { PaymentPlatformIcon, PaymentPlatformIconProps, PaymentPlatformName } from './payment-platform-icon.js';
@@ -40,14 +41,40 @@ export { FooterNewsletterMinimal } from './footer-newsletter-minimal.js';
 export { FooterCtaSocial } from './footer-cta-social.js';
 export { FooterNavSocial } from './footer-nav-social.js';
 export { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
-import 'react';
-import '@page-speed/maps';
 import './blocks-kcru1Ogu.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';
+import '@page-speed/maps';
 import '@radix-ui/react-popover';
 import '@page-speed/icon';
 import './types-Cs1jk79n.js';
 import '@page-speed/forms/integration';
+
+interface StarRatingProps {
+    /**
+     * Star rating value (1-5)
+     */
+    rating: number;
+    /**
+     * Icon size in pixels
+     */
+    size?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+}
+/**
+ * StarRating - Displays a 1-5 star rating using filled/muted star icons.
+ * Uses CSS variable-based colors (primary/muted) for theme compatibility.
+ *
+ * @example
+ * ```tsx
+ * <StarRating rating={4} size={18} />
+ * ```
+ */
+declare function StarRating({ rating, size, className, }: StarRatingProps): React.JSX.Element;
+
+export { StarRating, type StarRatingProps };