@opensite/ui 0.3.4 → 0.4.1

package/dist/masonry-motion-grid.cjs

@@ -379,74 +379,11 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultColumn1Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 1",
-    height: "23rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    alt: "Gallery Image 2",
-    height: "28rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    alt: "Gallery Image 3",
-    height: "12rem"
-  }
-];
-var defaultColumn2Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-    alt: "Gallery Image 4",
-    height: "13rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-    alt: "Gallery Image 5",
-    height: "32rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 6",
-    height: "18rem"
-  }
-];
-var defaultColumn3Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    alt: "Gallery Image 7",
-    height: "32rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    alt: "Gallery Image 8",
-    height: "32rem"
-  }
-];
-var defaultColumn4Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-    alt: "Gallery Image 9",
-    height: "13rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-    alt: "Gallery Image 10",
-    height: "22.5rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 11",
-    height: "22rem"
-  }
-];
 function MasonryMotionGrid({
-  column1Images = defaultColumn1Images,
-  column2Images = defaultColumn2Images,
-  column3Images = defaultColumn3Images,
-  column4Images = defaultColumn4Images,
+  column1Images,
+  column2Images,
+  column3Images,
+  column4Images,
   gridSlot,
   className,
   gridClassName,
@@ -466,10 +403,10 @@ function MasonryMotionGrid({
   const [lightboxOpen, setLightboxOpen] = React.useState(false);
   const [lightboxIndex, setLightboxIndex] = React.useState(0);
   const allImages = React.useMemo(() => [
-    ...column1Images,
-    ...column2Images,
-    ...column3Images,
-    ...column4Images
+    ...column1Images ?? [],
+    ...column2Images ?? [],
+    ...column3Images ?? [],
+    ...column4Images ?? []
   ], [column1Images, column2Images, column3Images, column4Images]);
   const lightboxItems = React.useMemo(
     () => allImages.map((img, index) => ({
@@ -483,14 +420,17 @@ function MasonryMotionGrid({
     [allImages]
   );
   const getGlobalIndex = React.useCallback((columnIndex, imageIndex) => {
+    const col1Len = column1Images?.length ?? 0;
+    const col2Len = column2Images?.length ?? 0;
+    const col3Len = column3Images?.length ?? 0;
     const columnOffsets = [
       0,
-      column1Images.length,
-      column1Images.length + column2Images.length,
-      column1Images.length + column2Images.length + column3Images.length
+      col1Len,
+      col1Len + col2Len,
+      col1Len + col2Len + col3Len
     ];
     return columnOffsets[columnIndex] + imageIndex;
-  }, [column1Images.length, column2Images.length, column3Images.length]);
+  }, [column1Images?.length, column2Images?.length, column3Images?.length]);
   const handleImageClick = React.useCallback((globalIndex) => {
     setLightboxIndex(globalIndex);
     setLightboxOpen(true);
@@ -498,7 +438,7 @@ function MasonryMotionGrid({
   const handleLightboxClose = React.useCallback(() => {
     setLightboxOpen(false);
   }, []);
-  const renderColumn = (images, direction, columnIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  const renderColumn = (images, direction, columnIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
       initial: {
@@ -543,68 +483,65 @@ function MasonryMotionGrid({
     },
     index
   )) });
-  const renderColumn4 = (images) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4", columnClassName), children: [
-    images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
-      {
-        initial: {
-          opacity: 0,
-          scale: 0.9,
-          y: -50
-        },
-        whileInView: {
-          opacity: 1,
-          scale: 1,
-          y: 0
-        },
-        transition: {
-          duration: animationDuration,
-          delay: index * animationDelayMultiplier
-        },
-        className: cn(
-          "w-full overflow-hidden rounded-2xl bg-muted cursor-pointer transition-transform hover:scale-[1.02] hover:shadow-lg",
-          imageWrapperClassName
-        ),
-        style: { height: image.height },
-        onClick: () => handleImageClick(getGlobalIndex(3, index)),
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleImageClick(getGlobalIndex(3, index));
-          }
-        },
-        "aria-label": `View ${image.alt} in lightbox`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            className: cn("h-full w-full rounded-2xl object-cover", imageClassName, image.className),
-            src: image.src,
-            alt: image.alt,
-            loading: "lazy",
-            optixFlowConfig
-          }
-        )
+  const renderColumn4 = (images) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        y: -50
       },
-      index
-    )),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-17 w-full rounded-2xl bg-muted" })
-  ] });
+      whileInView: {
+        opacity: 1,
+        scale: 1,
+        y: 0
+      },
+      transition: {
+        duration: animationDuration,
+        delay: index * animationDelayMultiplier
+      },
+      className: cn(
+        "w-full overflow-hidden rounded-2xl bg-muted cursor-pointer transition-transform hover:scale-[1.02] hover:shadow-lg",
+        imageWrapperClassName
+      ),
+      style: { height: image.height },
+      onClick: () => handleImageClick(getGlobalIndex(3, index)),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleImageClick(getGlobalIndex(3, index));
+        }
+      },
+      "aria-label": `View ${image.alt} in lightbox`,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          className: cn("h-full w-full rounded-2xl object-cover", imageClassName, image.className),
+          src: image.src,
+          alt: image.alt,
+          loading: "lazy",
+          optixFlowConfig
+        }
+      )
+    },
+    index
+  )) });
   const renderGrid = () => {
     if (gridSlot) return gridSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4 md:grid-cols-4", gridClassName), children: [
-        renderColumn(column1Images, "up", 0),
-        renderColumn(column2Images, "down", 1),
-        renderColumn(column3Images, "up", 2),
-        renderColumn4(column4Images)
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4", gridClassName), children: [
+        renderColumn(column1Images ?? [], "up", 0),
+        renderColumn(column2Images ?? [], "down", 1),
+        renderColumn(column3Images ?? [], "up", 2),
+        renderColumn4(column4Images ?? [])
       ] }),
-      showDuplicateGrid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 grid grid-cols-2 gap-4 md:grid-cols-4", gridClassName), children: [
-        renderColumn(column1Images, "up", 0),
-        renderColumn(column2Images, "down", 1),
-        renderColumn(column3Images, "up", 2),
-        renderColumn4(column4Images)
+      showDuplicateGrid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 grid grid-cols-2 gap-3 md:grid-cols-4", gridClassName), children: [
+        renderColumn(column1Images ?? [], "up", 0),
+        renderColumn(column2Images ?? [], "down", 1),
+        renderColumn(column3Images ?? [], "up", 2),
+        renderColumn4(column4Images ?? [])
       ] })
     ] });
   };

package/dist/masonry-motion-grid.js

@@ -373,74 +373,11 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultColumn1Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 1",
-    height: "23rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    alt: "Gallery Image 2",
-    height: "28rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    alt: "Gallery Image 3",
-    height: "12rem"
-  }
-];
-var defaultColumn2Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-    alt: "Gallery Image 4",
-    height: "13rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-    alt: "Gallery Image 5",
-    height: "32rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 6",
-    height: "18rem"
-  }
-];
-var defaultColumn3Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    alt: "Gallery Image 7",
-    height: "32rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    alt: "Gallery Image 8",
-    height: "32rem"
-  }
-];
-var defaultColumn4Images = [
-  {
-    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-    alt: "Gallery Image 9",
-    height: "13rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-    alt: "Gallery Image 10",
-    height: "22.5rem"
-  },
-  {
-    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    alt: "Gallery Image 11",
-    height: "22rem"
-  }
-];
 function MasonryMotionGrid({
-  column1Images = defaultColumn1Images,
-  column2Images = defaultColumn2Images,
-  column3Images = defaultColumn3Images,
-  column4Images = defaultColumn4Images,
+  column1Images,
+  column2Images,
+  column3Images,
+  column4Images,
   gridSlot,
   className,
   gridClassName,
@@ -460,10 +397,10 @@ function MasonryMotionGrid({
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const allImages = useMemo(() => [
-    ...column1Images,
-    ...column2Images,
-    ...column3Images,
-    ...column4Images
+    ...column1Images ?? [],
+    ...column2Images ?? [],
+    ...column3Images ?? [],
+    ...column4Images ?? []
   ], [column1Images, column2Images, column3Images, column4Images]);
   const lightboxItems = useMemo(
     () => allImages.map((img, index) => ({
@@ -477,14 +414,17 @@ function MasonryMotionGrid({
     [allImages]
   );
   const getGlobalIndex = useCallback((columnIndex, imageIndex) => {
+    const col1Len = column1Images?.length ?? 0;
+    const col2Len = column2Images?.length ?? 0;
+    const col3Len = column3Images?.length ?? 0;
     const columnOffsets = [
       0,
-      column1Images.length,
-      column1Images.length + column2Images.length,
-      column1Images.length + column2Images.length + column3Images.length
+      col1Len,
+      col1Len + col2Len,
+      col1Len + col2Len + col3Len
     ];
     return columnOffsets[columnIndex] + imageIndex;
-  }, [column1Images.length, column2Images.length, column3Images.length]);
+  }, [column1Images?.length, column2Images?.length, column3Images?.length]);
   const handleImageClick = useCallback((globalIndex) => {
     setLightboxIndex(globalIndex);
     setLightboxOpen(true);
@@ -492,7 +432,7 @@ function MasonryMotionGrid({
   const handleLightboxClose = useCallback(() => {
     setLightboxOpen(false);
   }, []);
-  const renderColumn = (images, direction, columnIndex) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
+  const renderColumn = (images, direction, columnIndex) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
     motion.div,
     {
       initial: {
@@ -537,68 +477,65 @@ function MasonryMotionGrid({
     },
     index
   )) });
-  const renderColumn4 = (images) => /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4", columnClassName), children: [
-    images.map((image, index) => /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: {
-          opacity: 0,
-          scale: 0.9,
-          y: -50
-        },
-        whileInView: {
-          opacity: 1,
-          scale: 1,
-          y: 0
-        },
-        transition: {
-          duration: animationDuration,
-          delay: index * animationDelayMultiplier
-        },
-        className: cn(
-          "w-full overflow-hidden rounded-2xl bg-muted cursor-pointer transition-transform hover:scale-[1.02] hover:shadow-lg",
-          imageWrapperClassName
-        ),
-        style: { height: image.height },
-        onClick: () => handleImageClick(getGlobalIndex(3, index)),
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleImageClick(getGlobalIndex(3, index));
-          }
-        },
-        "aria-label": `View ${image.alt} in lightbox`,
-        children: /* @__PURE__ */ jsx(
-          Img,
-          {
-            className: cn("h-full w-full rounded-2xl object-cover", imageClassName, image.className),
-            src: image.src,
-            alt: image.alt,
-            loading: "lazy",
-            optixFlowConfig
-          }
-        )
+  const renderColumn4 = (images) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", columnClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        y: -50
       },
-      index
-    )),
-    /* @__PURE__ */ jsx("div", { className: "h-17 w-full rounded-2xl bg-muted" })
-  ] });
+      whileInView: {
+        opacity: 1,
+        scale: 1,
+        y: 0
+      },
+      transition: {
+        duration: animationDuration,
+        delay: index * animationDelayMultiplier
+      },
+      className: cn(
+        "w-full overflow-hidden rounded-2xl bg-muted cursor-pointer transition-transform hover:scale-[1.02] hover:shadow-lg",
+        imageWrapperClassName
+      ),
+      style: { height: image.height },
+      onClick: () => handleImageClick(getGlobalIndex(3, index)),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleImageClick(getGlobalIndex(3, index));
+        }
+      },
+      "aria-label": `View ${image.alt} in lightbox`,
+      children: /* @__PURE__ */ jsx(
+        Img,
+        {
+          className: cn("h-full w-full rounded-2xl object-cover", imageClassName, image.className),
+          src: image.src,
+          alt: image.alt,
+          loading: "lazy",
+          optixFlowConfig
+        }
+      )
+    },
+    index
+  )) });
   const renderGrid = () => {
     if (gridSlot) return gridSlot;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4 md:grid-cols-4", gridClassName), children: [
-        renderColumn(column1Images, "up", 0),
-        renderColumn(column2Images, "down", 1),
-        renderColumn(column3Images, "up", 2),
-        renderColumn4(column4Images)
+      /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4", gridClassName), children: [
+        renderColumn(column1Images ?? [], "up", 0),
+        renderColumn(column2Images ?? [], "down", 1),
+        renderColumn(column3Images ?? [], "up", 2),
+        renderColumn4(column4Images ?? [])
       ] }),
-      showDuplicateGrid && /* @__PURE__ */ jsxs("div", { className: cn("mt-4 grid grid-cols-2 gap-4 md:grid-cols-4", gridClassName), children: [
-        renderColumn(column1Images, "up", 0),
-        renderColumn(column2Images, "down", 1),
-        renderColumn(column3Images, "up", 2),
-        renderColumn4(column4Images)
+      showDuplicateGrid && /* @__PURE__ */ jsxs("div", { className: cn("mt-4 grid grid-cols-2 gap-3 md:grid-cols-4", gridClassName), children: [
+        renderColumn(column1Images ?? [], "up", 0),
+        renderColumn(column2Images ?? [], "down", 1),
+        renderColumn(column3Images ?? [], "up", 2),
+        renderColumn4(column4Images ?? [])
       ] })
     ] });
   };

package/dist/navbar-animated-preview.cjs

@@ -1367,151 +1367,7 @@ var imagePlaceholders = [
   "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
   "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
 ];
-var defaultNavigation = [
-  {
-    id: 1,
-    title: "Products",
-    links: [
-      {
-        label: "Dashboard",
-        description: "Monitor your metrics and KPIs in real-time",
-        url: "#",
-        icon: "lucide/layout-dashboard",
-        image: imagePlaceholders[0]
-      },
-      {
-        label: "Analytics",
-        description: "Deep insights into your business performance",
-        url: "#",
-        icon: "lucide/bar-chart-3",
-        image: imagePlaceholders[1]
-      },
-      {
-        label: "Automation",
-        description: "Streamline workflows with intelligent automation",
-        url: "#",
-        icon: "lucide/zap",
-        image: imagePlaceholders[2]
-      },
-      {
-        label: "Integrations",
-        description: "Connect with your favorite tools and services",
-        url: "#",
-        icon: "lucide/puzzle",
-        image: imagePlaceholders[3]
-      }
-    ]
-  },
-  {
-    id: 2,
-    title: "Solutions",
-    featuredLinks: [
-      {
-        label: "Enterprise",
-        description: "Scale your operations with enterprise-grade features",
-        url: "#",
-        icon: "lucide/building-2",
-        background: imagePlaceholders[4]
-      },
-      {
-        label: "Startups",
-        description: "Launch faster with tools built for growth",
-        url: "#",
-        icon: "lucide/rocket",
-        background: imagePlaceholders[5]
-      }
-    ],
-    links: [
-      {
-        label: "Marketing",
-        description: "Grow your audience",
-        url: "#",
-        icon: "lucide/megaphone"
-      },
-      {
-        label: "Sales",
-        description: "Close more deals",
-        url: "#",
-        icon: "lucide/trending-up"
-      },
-      {
-        label: "Support",
-        description: "Delight customers",
-        url: "#",
-        icon: "lucide/headphones"
-      },
-      {
-        label: "Engineering",
-        description: "Ship faster",
-        url: "#",
-        icon: "lucide/code"
-      }
-    ]
-  },
-  {
-    id: 3,
-    title: "Developers",
-    groupLinks: [
-      {
-        title: "Documentation",
-        links: [
-          {
-            label: "Getting Started",
-            description: "Quick start guide",
-            url: "#",
-            icon: "lucide/book-open"
-          },
-          {
-            label: "API Reference",
-            description: "Complete API docs",
-            url: "#",
-            icon: "lucide/file-code"
-          },
-          {
-            label: "SDKs",
-            description: "Client libraries",
-            url: "#",
-            icon: "lucide/package"
-          }
-        ]
-      },
-      {
-        title: "Resources",
-        links: [
-          {
-            label: "Tutorials",
-            description: "Step-by-step guides",
-            url: "#",
-            icon: "lucide/graduation-cap"
-          },
-          {
-            label: "Examples",
-            description: "Sample projects",
-            url: "#",
-            icon: "lucide/folder-code"
-          },
-          {
-            label: "Community",
-            description: "Join the discussion",
-            url: "#",
-            icon: "lucide/users"
-          }
-        ]
-      }
-    ],
-    imageLink: {
-      label: "New: AI Assistant",
-      url: "#",
-      image: imagePlaceholders[6]
-    }
-  },
-  { title: "Resources", url: "#" },
-  { title: "Pricing", url: "#" }
-];
 var MOBILE_BREAKPOINT = 1280;
-var defaultAuthActions = [
-  { label: "Sign up", href: "#", variant: "ghost" }
-];
 var NavbarAnimatedPreview = ({
   className,
   containerClassName,
@@ -1520,15 +1376,13 @@ var NavbarAnimatedPreview = ({
   actionsClassName,
   logo = {
     url: "/",
-    src: logoPlaceholders.logoMark,
-    alt: "Opensite AI",
-    title: "Opensite AI"
+    src: logoPlaceholders.logoMark
   },
   logoSlot,
   logoClassName,
-  navigation = defaultNavigation,
+  navigation,
   navigationSlot,
-  authActions = defaultAuthActions,
+  authActions,
   authActionsSlot,
   background = "white",
   spacing = "none",
@@ -1672,7 +1526,7 @@ var NavbarAnimatedPreview = ({
           MobileNavigationMenu,
           {
             open,
-            navigation,
+            navigation: navigation ?? [],
             authActions,
             authActionsSlot
           }