@opensite/ui 1.2.0 → 1.2.2

package/dist/expandable-case-study-cards.js

@@ -12,36 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -582,7 +552,7 @@ function ExpandableCaseStudyCards({
       {
         "data-state": selection === item.id ? "open" : "closed",
         className: cn(
-          'group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400',
+          "group h-[280px] w-full lg:h-auto lg:w-auto lg:transform-gpu lg:transition-all lg:data-[state=closed]:w-[20%] lg:data-[state=closed]:duration-500 lg:data-[state=open]:w-[60%] lg:data-[state=open]:duration-400",
           item.className,
           cardClassName
         ),
@@ -593,72 +563,61 @@ function ExpandableCaseStudyCards({
           "a",
           {
             href: item.href,
-            className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
+            className: "relative block h-full w-full overflow-hidden rounded-xl",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: item.image,
-                    alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName
-                    ),
-                    loading: "lazy",
-                    optixFlowConfig
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 lg:group-data-[state=closed]:blur-xs lg:transition-[filter] lg:duration-500", children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-4 pb-5 lg:transition-opacity lg:delay-200 lg:duration-500 lg:group-data-[state=closed]:opacity-0", children: [
+                item.badges && item.badges.length > 0 && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn(
-                      "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden",
-                      getNestedCardBg(background, "accent"),
-                      getNestedCardTextColor(background)
+                      "mb-3 flex flex-wrap items-center gap-2",
+                      badgesClassName
                     ),
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: badgeClassName,
+                        children: badge
+                      },
+                      idx
+                    ))
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
-                /* @__PURE__ */ jsx("div", { className: 'flex flex-col gap-3 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
                     item.logo && /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx(
                       Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-6 max-w-[120px] object-contain object-left lg:h-8 lg:max-w-[150px]", logoClassName),
+                        className: cn(
+                          "h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]",
+                          logoClassName
+                        ),
                         loading: "lazy",
                         optixFlowConfig
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-white/80", children: item.description })
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
-                        getNestedCardBg(background, "card")
-                      ),
-                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      'flex h-20 items-center gap-2 px-4 pb-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
-                      badgesClassName
-                    ),
-                    children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
-                  }
-                )
+                  /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
+                ] })
               ] })
             ]
           }

package/dist/interior-carousel.cjs

@@ -1240,29 +1240,26 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-10", children: [
-          heading && /* @__PURE__ */ jsxRuntime.jsx(
+        heading || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "mb-4 text-center text-4xl font-semibold",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 headingClassName
               ),
               children: heading
             }
-          ),
-          descriptionContent && /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: descriptionContent }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              className: cn(
-                "text-center text-sm text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: descriptionContent
             }
-          )
+          ))
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
             opts: {

package/dist/interior-carousel.js

@@ -1216,29 +1216,26 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "mb-10", children: [
-          heading && /* @__PURE__ */ jsx(
+        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "mb-4 text-center text-4xl font-semibold",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 headingClassName
               ),
               children: heading
             }
-          ),
-          descriptionContent && /* @__PURE__ */ jsx(
-            "p",
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: descriptionContent }) : /* @__PURE__ */ jsx(
+            "div",
             {
-              className: cn(
-                "text-center text-sm text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: descriptionContent
             }
-          )
+          ))
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: {

package/dist/masonry-motion-grid.cjs

@@ -628,34 +628,23 @@ function MasonryMotionGrid({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName: "px-4",
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 titleClassName
               ),
               children: title
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))

package/dist/masonry-motion-grid.js

@@ -622,34 +622,23 @@ function MasonryMotionGrid({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName: "px-4",
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 titleClassName
               ),
               children: title
             }
           ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))