@opensite/ui 1.2.2 → 1.2.4

package/dist/feature-carousel-progress.js

@@ -13,32 +13,6 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1207,20 +1181,22 @@ Section.displayName = "Section";
 function FeatureCarouselProgress({
   badge,
   title,
+  description,
+  titleClassName,
+  descriptionClassName,
   carouselLabel,
   slides,
   slidesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   headerClassName,
   badgeClassName,
-  titleClassName,
   carouselClassName,
   controlsClassName,
   progressClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1250,16 +1226,70 @@ function FeatureCarouselProgress({
       CarouselItem,
       {
         className: "basis-full md:basis-1/2 lg:basis-1/3",
-        children: /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxs("div", { children: [
-          (slide.icon || slide.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
-          slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
-          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }))
-        ] }) }) }) })
+        children: /* @__PURE__ */ jsx("div", { className: "p-1 h-auto md:h-full", children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: cn("h-auto md:h-full", cardClassName, slide.className),
+            children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col justify-center p-6 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-between", children: [
+              (slide.icon || slide.iconName) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10",
+                    slide.iconClassName
+                  ),
+                  children: renderSlideIcon(slide)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: slide.href,
+                    className: cn(
+                      "text-lg font-semibold md:text-xl",
+                      slide.titleClassName
+                    ),
+                    children: slide.title
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-lg font-semibold md:text-xl",
+                      slide.titleClassName
+                    ),
+                    children: slide.title
+                  }
+                )),
+                slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "pt-2 text-card-foreground",
+                      slide.descriptionClassName
+                    ),
+                    children: slide.description
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "pt-2 text-card-foreground",
+                      slide.descriptionClassName
+                    ),
+                    children: slide.description
+                  }
+                ))
+              ] })
+            ] }) })
+          }
+        ) })
       },
       index
     ));
   }, [slidesSlot, slides, cardClassName, renderSlideIcon]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -1269,30 +1299,73 @@ function FeatureCarouselProgress({
       patternClassName,
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 flex flex-col items-center gap-6 md:mb-20", headerClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-2 text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }))
-        ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        badge || title || description ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-6", headerClassName),
+            children: [
+              badge && /* @__PURE__ */ jsx(Badge, { className: badgeClassName, children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxs(Carousel, { className: cn("w-full", carouselClassName), setApi, children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("mb-4 flex justify-between px-1 md:mb-5", controlsClassName), children: [
-            carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsx("div", { className: "font-medium", children: carouselLabel })),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: cn("mr-2 hidden items-center gap-3 text-xs md:flex", getTextColor(background, "muted")), children: [
-                /* @__PURE__ */ jsx("span", { children: "01" }),
-                /* @__PURE__ */ jsx(Progress, { value: progress, className: cn("h-0.5 w-52", progressClassName) }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  "0",
-                  slidesLength
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "mb-4 flex justify-between items-center px-1 md:mb-8",
+                controlsClassName
+              ),
+              children: [
+                carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsx("div", { className: "font-medium", children: carouselLabel })),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn("mr-4 hidden items-center gap-3 text-xs md:flex"),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: "1" }),
+                        /* @__PURE__ */ jsx(
+                          Progress,
+                          {
+                            value: progress,
+                            className: cn("h-0.5 w-52", progressClassName)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { children: slidesLength })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(CarouselPrevious, { className: "static translate-y-0" }),
+                  /* @__PURE__ */ jsx(CarouselNext, { className: "static translate-y-0" })
                 ] })
-              ] }),
-              /* @__PURE__ */ jsx(CarouselPrevious, { className: "static translate-y-0" }),
-              /* @__PURE__ */ jsx(CarouselNext, { className: "static translate-y-0" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CarouselContent, { children: slidesContent })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(CarouselContent, { className: "md:items-stretch", children: slidesContent })
         ] })
-      ]
+      ] })
     }
   );
 }

package/dist/feature-checklist-image.cjs

@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -959,6 +933,8 @@ Section.displayName = "Section";
 function FeatureChecklistImage({
   title,
   description,
+  titleClassName,
+  descriptionClassName,
   imageSrc,
   imageAlt,
   imageSlot,
@@ -967,12 +943,10 @@ function FeatureChecklistImage({
   checklistItems,
   checklistSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   contentWrapperClassName,
   imageClassName,
   contentClassName,
-  titleClassName,
-  descriptionClassName,
   actionsClassName,
   checklistClassName,
   optixFlowConfig,
@@ -994,7 +968,7 @@ function FeatureChecklistImage({
             onClick: action.onClick,
             variant: action.variant,
             size: action.size,
-            className: cn("mt-6", action.className),
+            className: cn("", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
             children: action.children
@@ -1009,7 +983,7 @@ function FeatureChecklistImage({
           onClick: action.onClick,
           variant: action.variant,
           size: action.size,
-          className: cn("mt-6", action.className),
+          className: cn("", action.className),
           "aria-label": action["aria-label"],
           asButton: true,
           children: [
@@ -1031,7 +1005,7 @@ function FeatureChecklistImage({
         src: imageSrc,
         alt: imageAlt || "Feature illustration",
         className: cn(
-          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2",
+          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
           imageClassName
         ),
         loading: "lazy",
@@ -1047,17 +1021,10 @@ function FeatureChecklistImage({
       const content = isString ? item : item.content;
       const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "li",
-        {
-          className: cn("flex items-center gap-3", itemClassName),
-          children: [
-            iconElement,
-            content
-          ]
-        },
-        index
-      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: iconElement }),
+        content
+      ] }, index);
     });
   }, [checklistSlot, checklistItems]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1074,73 +1041,62 @@ function FeatureChecklistImage({
         "div",
         {
           className: cn(
-            "flex flex-col gap-12 md:flex-row",
+            "flex flex-col gap-6 md:gap-12 md:flex-row",
             contentWrapperClassName
           ),
           children: [
             imageContent,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-medium text-balance md:text-5xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-3xl font-medium text-balance md:text-5xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-1 md:mt-6",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-1 md:mt-6",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              )),
-              actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-wrap items-center gap-2",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              ),
-              checklistContent && /* @__PURE__ */ jsxRuntime.jsx(
-                "ul",
-                {
-                  className: cn(
-                    "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
-                    checklistClassName
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "px-4 md:px-6 lg:px-10 py-4 md:py-4 lg:py-0",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description })),
+                  actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-wrap items-center gap-4 md:gap-2",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
                   ),
-                  children: checklistContent
-                }
-              )
-            ] })
+                  checklistContent && /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                        checklistClassName
+                      ),
+                      children: checklistContent
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
       )

package/dist/feature-checklist-image.d.cts

@@ -141,6 +141,6 @@ interface FeatureChecklistImageProps {
  * />
  * ```
  */
-declare function FeatureChecklistImage({ title, description, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, titleClassName, descriptionClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
+declare function FeatureChecklistImage({ title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
 
 export { FeatureChecklistImage, type FeatureChecklistImageProps };

package/dist/feature-checklist-image.d.ts

@@ -141,6 +141,6 @@ interface FeatureChecklistImageProps {
  * />
  * ```
  */
-declare function FeatureChecklistImage({ title, description, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, titleClassName, descriptionClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
+declare function FeatureChecklistImage({ title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
 
 export { FeatureChecklistImage, type FeatureChecklistImageProps };