@opensite/ui 0.8.4 → 0.8.6

package/dist/feature-icon-grid-accent.cjs

@@ -539,12 +539,21 @@ function FeatureIconGridAccent({
         "div",
         {
           className: cn(
-            "flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8",
+            "flex flex-col justify-between rounded-lg p-6 md:min-h-[300px] md:p-8",
             cardClassName,
             feature.className
           ),
           children: [
-            iconElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-6 flex size-11 items-center justify-center rounded-full bg-background", feature.iconClassName), children: iconElement }),
+            iconElement && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "mb-6 flex size-11 items-center justify-center rounded-full",
+                  feature.iconClassName
+                ),
+                children: iconElement
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
               feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
@@ -566,12 +575,45 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
-          label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }) }),
-        featuresContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("flex w-full flex-col items-center", headerClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium md:text-5xl text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "md:max-w-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] })
+          }
+        ),
+        featuresContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-accent.js

@@ -518,12 +518,21 @@ function FeatureIconGridAccent({
         "div",
         {
           className: cn(
-            "flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8",
+            "flex flex-col justify-between rounded-lg p-6 md:min-h-[300px] md:p-8",
             cardClassName,
             feature.className
           ),
           children: [
-            iconElement && /* @__PURE__ */ jsx("span", { className: cn("mb-6 flex size-11 items-center justify-center rounded-full bg-background", feature.iconClassName), children: iconElement }),
+            iconElement && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mb-6 flex size-11 items-center justify-center rounded-full",
+                  feature.iconClassName
+                ),
+                children: iconElement
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
               feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
@@ -545,12 +554,45 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        (label || title || description) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
-          label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: label })),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }) }),
-        featuresContent && /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        (label || title || description) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex w-full flex-col items-center", headerClassName),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: label })),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium md:text-5xl text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "md:max-w-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ] })
+          }
+        ),
+        featuresContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-bordered.cjs

@@ -522,7 +522,7 @@ function FeatureIconGridBordered({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -540,18 +540,67 @@ function FeatureIconGridBordered({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        className: cn(
+          "relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5",
+          cardClassName,
+          feature.className
+        ),
         children: [
-          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12",
+                feature.iconClassName
+              ),
+              children: renderIcon(feature)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "h3",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] })
         ]
       },
@@ -569,9 +618,30 @@ function FeatureIconGridBordered({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs ", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs ", labelClassName), children: label })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        )),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-bordered.js

@@ -501,7 +501,7 @@ function FeatureIconGridBordered({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -519,18 +519,67 @@ function FeatureIconGridBordered({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        className: cn(
+          "relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5",
+          cardClassName,
+          feature.className
+        ),
         children: [
-          (feature.icon || feature.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12",
+                feature.iconClassName
+              ),
+              children: renderIcon(feature)
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { children: [
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] }) : /* @__PURE__ */ jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxs(
+              "h3",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] })
         ]
       },
@@ -548,9 +597,30 @@ function FeatureIconGridBordered({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-xs ", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-xs ", labelClassName), children: label })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        )),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );