@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-animated-preview.cjs

@@ -1167,7 +1167,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onClose,
@@ -1605,8 +1605,8 @@ var AnimatedImagePreviewDropdown = ({
     updateImageClasses(0);
   };
   if (!links) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid grid-cols-2 gap-8", children: links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid grid-cols-2 gap-4", children: links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
       NavLink,
       {
         link,
@@ -1645,7 +1645,7 @@ var FeaturedCardsGridDropdown = ({
   optixFlowConfig
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-8 pb-8", children: featuredLinks?.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 pb-8", children: featuredLinks?.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
       FeaturedLink,
       {
         link,
@@ -1662,7 +1662,7 @@ var GroupedLinksImageDropdown = ({
   imageLink,
   optixFlowConfig
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(GroupLinks, { groupLinks }),
     /* @__PURE__ */ jsxRuntime.jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
   ] });
@@ -1683,9 +1683,9 @@ var GroupLinks = ({ groupLinks }) => {
   };
   if (!groupLinks) return null;
   let linkIndex = 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-8", children: group.links.map((link, index2) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs", children: group.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
       const idx = linkIndex++;
       return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
         NavLink,
@@ -1713,7 +1713,7 @@ var FeaturedImageLink = ({
       className: "overflow-hidden rounded-lg bg-muted",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "size-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "absolute top-2 left-2", children: "New" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-8 pt-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-4 pt-10", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold", children: link.label }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80%]", children: /* @__PURE__ */ jsxRuntime.jsx(
             AspectRatio,
@@ -1725,7 +1725,7 @@ var FeaturedImageLink = ({
                 {
                   src: link.image,
                   alt: typeof link.label === "string" ? link.label : "",
-                  className: "size-full object-cover object-left-top",
+                  className: "size-full object-cover object-center",
                   optixFlowConfig
                 }
               )
@@ -1741,7 +1741,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
     Pressable,
     {
       href: getLinkUrl(link),
-      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7",
+      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1749,12 +1749,12 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
             {
               name: link.iconName,
               size: 20,
-              className: "m-auto stroke-foreground"
+              className: "m-auto stroke-white"
             }
           ) : null }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-background", children: link.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-background/80", children: link.description })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-white text-shadow-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold", children: link.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: link.description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1762,7 +1762,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
           {
             src: link.background,
             alt: typeof link.label === "string" ? link.label : "",
-            className: "absolute top-0 left-0 size-full object-cover object-left-top opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
+            className: "absolute top-0 left-0 size-full brightness-50 object-cover object-center opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
             optixFlowConfig
           }
         )

package/dist/navbar-animated-preview.js

@@ -1142,7 +1142,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: onClose,
@@ -1580,8 +1580,8 @@ var AnimatedImagePreviewDropdown = ({
     updateImageClasses(0);
   };
   if (!links) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-    /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-8", children: links.map((link, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-4", children: links.map((link, index) => /* @__PURE__ */ jsx(
       NavLink,
       {
         link,
@@ -1620,7 +1620,7 @@ var FeaturedCardsGridDropdown = ({
   optixFlowConfig
 }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex gap-8 pb-8", children: featuredLinks?.map((link, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4 pb-8", children: featuredLinks?.map((link, index) => /* @__PURE__ */ jsx(
       FeaturedLink,
       {
         link,
@@ -1637,7 +1637,7 @@ var GroupedLinksImageDropdown = ({
   imageLink,
   optixFlowConfig
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsx(GroupLinks, { groupLinks }),
     /* @__PURE__ */ jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
   ] });
@@ -1658,9 +1658,9 @@ var GroupLinks = ({ groupLinks }) => {
   };
   if (!groupLinks) return null;
   let linkIndex = 0;
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
-    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-8", children: group.links.map((link, index2) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs", children: group.label }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
       const idx = linkIndex++;
       return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         NavLink,
@@ -1688,7 +1688,7 @@ var FeaturedImageLink = ({
       className: "overflow-hidden rounded-lg bg-muted",
       children: /* @__PURE__ */ jsxs("div", { className: "size-full", children: [
         /* @__PURE__ */ jsx(Badge, { className: "absolute top-2 left-2", children: "New" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-8 pt-10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-4 pt-10", children: [
           /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold", children: link.label }),
           /* @__PURE__ */ jsx("div", { className: "w-[80%]", children: /* @__PURE__ */ jsx(
             AspectRatio,
@@ -1700,7 +1700,7 @@ var FeaturedImageLink = ({
                 {
                   src: link.image,
                   alt: typeof link.label === "string" ? link.label : "",
-                  className: "size-full object-cover object-left-top",
+                  className: "size-full object-cover object-center",
                   optixFlowConfig
                 }
               )
@@ -1716,7 +1716,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
     Pressable,
     {
       href: getLinkUrl(link),
-      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7",
+      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
           /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
@@ -1724,12 +1724,12 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
             {
               name: link.iconName,
               size: 20,
-              className: "m-auto stroke-foreground"
+              className: "m-auto stroke-white"
             }
           ) : null }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-background", children: link.label }),
-            /* @__PURE__ */ jsx("div", { className: "font-medium text-background/80", children: link.description })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-white text-shadow-lg", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: link.label }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: link.description })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
@@ -1737,7 +1737,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
           {
             src: link.background,
             alt: typeof link.label === "string" ? link.label : "",
-            className: "absolute top-0 left-0 size-full object-cover object-left-top opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
+            className: "absolute top-0 left-0 size-full brightness-50 object-cover object-center opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
             optixFlowConfig
           }
         )

package/dist/navbar-centered-menu.cjs

@@ -1115,7 +1115,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onClose,

package/dist/navbar-centered-menu.js

@@ -1092,7 +1092,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: onClose,

package/dist/navbar-dark-icons.cjs

@@ -1162,7 +1162,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onClose,

package/dist/navbar-dark-icons.js

@@ -1139,7 +1139,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: onClose,

package/dist/navbar-dropdown-menu.cjs

@@ -1162,7 +1162,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onClose,

package/dist/navbar-dropdown-menu.js

@@ -1139,7 +1139,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: onClose,