@opensite/ui 0.5.5 → 0.5.7

package/dist/project-interactive-hover-reveal.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
@@ -32,6 +32,18 @@ interface ProjectInteractiveHoverRevealProps {
      * Custom slot for rendering projects (overrides projects array)
      */
     projectsSlot?: React.ReactNode;
+    /**
+     * Label for project link
+     */
+    projectLinkLabel?: React.ReactNode;
+    /**
+     * Custom icon element for project link
+     */
+    projectLinkIcon?: React.ReactNode;
+    /**
+     * Icon name for project link (e.g., "lucide/arrow-right")
+     */
+    projectLinkIconName?: string;
     /**
      * OptixFlow image optimization configuration
      */
@@ -91,6 +103,6 @@ interface ProjectInteractiveHoverRevealProps {
  * design portfolios, creative showcases, or any gallery where visual impact is primary
  * but detailed information should be accessible on demand.
  */
-declare function ProjectInteractiveHoverReveal({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectInteractiveHoverRevealProps): react_jsx_runtime.JSX.Element;
+declare function ProjectInteractiveHoverReveal({ heading, subheading, projects, projectsSlot, projectLinkLabel, projectLinkIcon, projectLinkIconName, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectInteractiveHoverRevealProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectInteractiveHoverReveal, type ProjectInteractiveHoverRevealItem, type ProjectInteractiveHoverRevealProps };

package/dist/project-interactive-hover-reveal.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -912,6 +912,9 @@ function ProjectInteractiveHoverReveal({
   subheading,
   projects,
   projectsSlot,
+  projectLinkLabel,
+  projectLinkIcon,
+  projectLinkIconName,
   optixFlowConfig,
   background,
   spacing,
@@ -926,7 +929,7 @@ function ProjectInteractiveHoverReveal({
   cardClassName
 }) {
   const [hoveredIndex, setHoveredIndex] = useState(null);
-  const renderProjects = () => {
+  const renderedProjects = useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxs(
@@ -971,9 +974,9 @@ function ProjectInteractiveHoverReveal({
                 /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold text-white drop-shadow-md", children: project.title }),
                 /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium text-white drop-shadow", children: project.description }),
                 /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center text-sm font-medium text-white drop-shadow", children: [
-                  "View Project",
+                  projectLinkLabel ?? "View Project",
                   " ",
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" })
+                  projectLinkIcon ?? (projectLinkIconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: projectLinkIconName, size: 14, className: "ml-1" }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" }))
                 ] })
               ]
             }
@@ -982,7 +985,7 @@ function ProjectInteractiveHoverReveal({
       },
       index
     ));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig, projectLinkLabel, projectLinkIcon, projectLinkIconName, hoveredIndex]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1028,7 +1031,7 @@ function ProjectInteractiveHoverReveal({
                   "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
                   gridClassName
                 ),
-                children: renderProjects()
+                children: renderedProjects
               }
             )
           ]

package/dist/project-masonry-columns.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var framerMotion = require('framer-motion');
 var img = require('@page-speed/img');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -403,7 +403,7 @@ function ProjectMasonryColumns({
   cardClassName,
   imageWrapperClassName
 }) {
-  const renderImages = () => {
+  const renderedImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -438,7 +438,7 @@ function ProjectMasonryColumns({
       },
       index
     ));
-  };
+  }, [imagesSlot, images, cardClassName, imageWrapperClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -454,7 +454,7 @@ function ProjectMasonryColumns({
             "columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3",
             gridClassName
           ),
-          children: renderImages()
+          children: renderedImages
         }
       ) })
     }

package/dist/project-masonry-columns.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-masonry-columns.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-masonry-columns.js

@@ -1,9 +1,9 @@
 "use client";
+import React, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/project-list/project-masonry-columns.tsx
@@ -397,7 +397,7 @@ function ProjectMasonryColumns({
   cardClassName,
   imageWrapperClassName
 }) {
-  const renderImages = () => {
+  const renderedImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return images.map((image, index) => /* @__PURE__ */ jsx(
@@ -432,7 +432,7 @@ function ProjectMasonryColumns({
       },
       index
     ));
-  };
+  }, [imagesSlot, images, cardClassName, imageWrapperClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -448,7 +448,7 @@ function ProjectMasonryColumns({
             "columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3",
             gridClassName
           ),
-          children: renderImages()
+          children: renderedImages
         }
       ) })
     }

package/dist/project-nature-mosaic.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var img = require('@page-speed/img');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -842,7 +842,7 @@ function ProjectNatureMosaic({
   descriptionClassName,
   linkClassName
 }) {
-  const renderImages = () => {
+  const renderedImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -887,7 +887,7 @@ function ProjectNatureMosaic({
         )
       ] })
     ] });
-  };
+  }, [imagesSlot, images, gridClassName, descriptionClassName, linkClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -914,7 +914,7 @@ function ProjectNatureMosaic({
               "mb-12 grid grid-cols-1 gap-4 md:grid-cols-2",
               gridClassName
             ),
-            children: renderImages()
+            children: renderedImages
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md", children: [

package/dist/project-nature-mosaic.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-nature-mosaic.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-nature-mosaic.js

@@ -1,9 +1,9 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -821,7 +821,7 @@ function ProjectNatureMosaic({
   descriptionClassName,
   linkClassName
 }) {
-  const renderImages = () => {
+  const renderedImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -866,7 +866,7 @@ function ProjectNatureMosaic({
         )
       ] })
     ] });
-  };
+  }, [imagesSlot, images, gridClassName, descriptionClassName, linkClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -893,7 +893,7 @@ function ProjectNatureMosaic({
               "mb-12 grid grid-cols-1 gap-4 md:grid-cols-2",
               gridClassName
             ),
-            children: renderImages()
+            children: renderedImages
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [

package/dist/project-scroll-reveal.cjs

@@ -697,7 +697,7 @@ function ProjectScrollReveal({
   const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });
   const containerRef = React.useRef(null);
   const isInView = framerMotion.useInView(containerRef, { once: true, margin: "-100px" });
-  const renderProjects = () => {
+  const renderedProjects = React.useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -714,7 +714,7 @@ function ProjectScrollReveal({
       },
       project.id
     ));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig, hoveredIndex]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -754,7 +754,7 @@ function ProjectScrollReveal({
             },
             initial: "hidden",
             animate: isInView ? "visible" : "hidden",
-            children: renderProjects()
+            children: renderedProjects
           }
         )
       ] })

package/dist/project-scroll-reveal.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-scroll-reveal.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-scroll-reveal.js

@@ -1,7 +1,7 @@
 "use client";
 import { useInView, motion, useScroll, useTransform, AnimatePresence } from 'framer-motion';
 import * as React from 'react';
-import React__default, { useState, useRef } from 'react';
+import React__default, { useState, useRef, useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -676,7 +676,7 @@ function ProjectScrollReveal({
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
   const containerRef = useRef(null);
   const isInView = useInView(containerRef, { once: true, margin: "-100px" });
-  const renderProjects = () => {
+  const renderedProjects = useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsx(
@@ -693,7 +693,7 @@ function ProjectScrollReveal({
       },
       project.id
     ));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig, hoveredIndex]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -733,7 +733,7 @@ function ProjectScrollReveal({
             },
             initial: "hidden",
             animate: isInView ? "visible" : "hidden",
-            children: renderProjects()
+            children: renderedProjects
           }
         )
       ] })

package/dist/project-showcase-alternating.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var img = require('@page-speed/img');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -403,7 +403,7 @@ function ProjectShowcaseAlternating({
   listClassName,
   cardClassName
 }) {
-  const renderProjects = () => {
+  const renderedProjects = React.useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -431,7 +431,7 @@ function ProjectShowcaseAlternating({
       },
       index
     ));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -458,7 +458,7 @@ function ProjectShowcaseAlternating({
               "space-y-16 md:space-y-24 lg:space-y-32",
               listClassName
             ),
-            children: renderProjects()
+            children: renderedProjects
           }
         )
       ] })

package/dist/project-showcase-alternating.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-showcase-alternating.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-showcase-alternating.js

@@ -1,8 +1,8 @@
 "use client";
+import React, { useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/project-list/project-showcase-alternating.tsx
@@ -397,7 +397,7 @@ function ProjectShowcaseAlternating({
   listClassName,
   cardClassName
 }) {
-  const renderProjects = () => {
+  const renderedProjects = useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxs(
@@ -425,7 +425,7 @@ function ProjectShowcaseAlternating({
       },
       index
     ));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -452,7 +452,7 @@ function ProjectShowcaseAlternating({
               "space-y-16 md:space-y-24 lg:space-y-32",
               listClassName
             ),
-            children: renderProjects()
+            children: renderedProjects
           }
         )
       ] })

package/dist/project-sticky-scroll.cjs

@@ -433,7 +433,7 @@ function ProjectStickyScroll({
       linearGradients?.[activeCard % (linearGradients?.length ?? 1)] ?? ""
     );
   }, [activeCard, linearGradients]);
-  const renderContent = () => {
+  const renderedContent = React.useMemo(() => {
     if (contentSlot) return contentSlot;
     return content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-20", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -466,7 +466,7 @@ function ProjectStickyScroll({
         }
       )
     ] }, item.title + index));
-  };
+  }, [contentSlot, content, contentClassName, titleClassName, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -488,7 +488,7 @@ function ProjectStickyScroll({
           ref,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "div relative flex items-start px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-2xl", textContentClassName), children: [
-              renderContent(),
+              renderedContent,
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(

package/dist/project-sticky-scroll.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-sticky-scroll.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-sticky-scroll.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useScroll, useMotionValueEvent, motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -427,7 +427,7 @@ function ProjectStickyScroll({
       linearGradients?.[activeCard % (linearGradients?.length ?? 1)] ?? ""
     );
   }, [activeCard, linearGradients]);
-  const renderContent = () => {
+  const renderedContent = useMemo(() => {
     if (contentSlot) return contentSlot;
     return content.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "my-20", children: [
       /* @__PURE__ */ jsx(
@@ -460,7 +460,7 @@ function ProjectStickyScroll({
         }
       )
     ] }, item.title + index));
-  };
+  }, [contentSlot, content, contentClassName, titleClassName, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -482,7 +482,7 @@ function ProjectStickyScroll({
           ref,
           children: [
             /* @__PURE__ */ jsx("div", { className: "div relative flex items-start px-4", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-2xl", textContentClassName), children: [
-              renderContent(),
+              renderedContent,
               /* @__PURE__ */ jsx("div", { className: "h-40" })
             ] }) }),
             /* @__PURE__ */ jsx(

package/dist/project-studio-hover-preview.cjs

@@ -393,6 +393,7 @@ function ProjectStudioHoverPreview({
   heading,
   projects,
   projectsSlot,
+  tooltipLabel,
   optixFlowConfig,
   background,
   spacing,
@@ -439,7 +440,7 @@ function ProjectStudioHoverPreview({
     setHoveredIndex(null);
     setIsHovering(false);
   }, []);
-  const renderProjects = () => {
+  const renderedProjects = React.useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("group relative", cardClassName), children: [
@@ -470,7 +471,7 @@ function ProjectStudioHoverPreview({
         ] })
       ] })
     ] }, index));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig, hoveredIndex]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -501,7 +502,7 @@ function ProjectStudioHoverPreview({
             onMouseMove: handleContainerMouseMove,
             onMouseLeave: handleContainerMouseLeave,
             children: [
-              renderProjects(),
+              renderedProjects,
               /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isHovering && hoveredIndex !== null && /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
@@ -531,7 +532,7 @@ function ProjectStudioHoverPreview({
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: "Explore" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: tooltipLabel ?? "Explore" }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(
                         framerMotion.motion.span,
                         {

package/dist/project-studio-hover-preview.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
@@ -27,6 +27,10 @@ interface ProjectStudioHoverPreviewProps {
      * Custom slot for rendering projects (overrides projects array)
      */
     projectsSlot?: React.ReactNode;
+    /**
+     * Label for the floating tooltip (defaults to "Explore")
+     */
+    tooltipLabel?: React.ReactNode;
     /**
      * OptixFlow image optimization configuration
      */
@@ -83,6 +87,6 @@ interface ProjectStudioHoverPreviewProps {
  * Perfect for design studios, architecture firms, or creative agencies showcasing
  * their portfolio with an interactive, premium feel.
  */
-declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStudioHoverPreview, type ProjectStudioHoverPreviewItem, type ProjectStudioHoverPreviewProps };

package/dist/project-studio-hover-preview.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
@@ -27,6 +27,10 @@ interface ProjectStudioHoverPreviewProps {
      * Custom slot for rendering projects (overrides projects array)
      */
     projectsSlot?: React.ReactNode;
+    /**
+     * Label for the floating tooltip (defaults to "Explore")
+     */
+    tooltipLabel?: React.ReactNode;
     /**
      * OptixFlow image optimization configuration
      */
@@ -83,6 +87,6 @@ interface ProjectStudioHoverPreviewProps {
  * Perfect for design studios, architecture firms, or creative agencies showcasing
  * their portfolio with an interactive, premium feel.
  */
-declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStudioHoverPreview, type ProjectStudioHoverPreviewItem, type ProjectStudioHoverPreviewProps };