@opensite/ui 2.3.0 → 2.3.1

package/dist/about-expandable-values.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,66 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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" : "";
-}
-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 getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -889,6 +830,102 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function AboutExpandableValues({
   badgeText,
   heading,
@@ -900,7 +937,7 @@ function AboutExpandableValues({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -911,7 +948,7 @@ function AboutExpandableValues({
   ctaDescriptionClassName,
   actionsClassName,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -919,7 +956,7 @@ function AboutExpandableValues({
   const toggleExpand = React.useCallback((id) => {
     setExpandedValue((prev) => prev === id ? null : id);
   }, []);
-  const actionsContent = React.useMemo(() => {
+  React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -942,10 +979,8 @@ function AboutExpandableValues({
       "div",
       {
         className: cn(
-          "group overflow-hidden rounded-xl border transition-all duration-300",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
-          expandedValue === value.id ? "col-span-1 shadow-lg md:col-span-2 lg:col-span-3" : ""
+          "group overflow-hidden rounded-xl border transition-all duration-300 col-span-1",
+          expandedValue === value.id ? "shadow-xl" : "shadow-md"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -956,10 +991,10 @@ function AboutExpandableValues({
               type: "button",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 size-12 flex items-center justify-center rounded-md bg-primary text-primary-foreground shadow-lg", children: value.icon }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
-                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
+                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm"), children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -969,7 +1004,6 @@ function AboutExpandableValues({
                     size: 20,
                     className: cn(
                       "mt-1 shrink-0 transition-transform duration-300",
-                      getTextColor(background, "muted"),
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -978,21 +1012,28 @@ function AboutExpandableValues({
             }
           ),
           expandedValue === value.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 px-6 pb-6", children: [
-            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-              "rounded-lg p-4",
-              getNestedCardBg(background, "subtle")
-            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: value.longDescription }) : value.longDescription }),
+            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-lg p-4 shadow-md",
+                  "bg-muted text-muted-foreground"
+                ),
+                children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: value.longDescription }) : value.longDescription
+              }
+            ),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("mb-2 text-sm font-semibold", getTextColor(background, "muted")), children: "How we put this into practice:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("mb-2 text-sm font-semibold"), children: "How we put this into practice:" }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded-full", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    name: "lucide/check",
-                    size: 12,
-                    className: getAccentColor(background)
+                    className: cn(
+                      "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 12 })
                   }
-                ) }),
+                ),
                 typeof example === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm pt-2", children: example }) : example
               ] }, index)) })
             ] })
@@ -1009,7 +1050,7 @@ function AboutExpandableValues({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1020,18 +1061,7 @@ function AboutExpandableValues({
               headerClassName
             ),
             children: [
-              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "inline-block rounded-lg px-3 py-1 text-sm",
-                    getNestedCardBg(background, "muted"),
-                    getAccentColor(background),
-                    badgeClassName
-                  ),
-                  children: badgeText
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -1041,18 +1071,8 @@ function AboutExpandableValues({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-balance",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
             ]
           }
         ),
@@ -1061,21 +1081,20 @@ function AboutExpandableValues({
           "div",
           {
             className: cn(
-              "relative mt-8 rounded-lg p-8",
-              getNestedCardBg(background, "accent"),
-              getNestedCardTextColor(background),
+              "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
               ctaClassName
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
                 {
-                  className: cn(getTextColor(background, "muted"), ctaDescriptionClassName),
-                  children: ctaDescription
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
-              actionsContent
+              )
             ] })
           }
         )

package/dist/about-expandable-values.d.cts

@@ -1,7 +1,7 @@
-export { b as AboutExpandableValues, n as AboutExpandableValuesProps } from './community-initiatives-CPyEa7IX.cjs';
+export { b as AboutExpandableValues, n as AboutExpandableValuesProps } from './community-initiatives-r_NhxVet.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';

package/dist/about-expandable-values.d.ts

@@ -1,7 +1,7 @@
-export { b as AboutExpandableValues, n as AboutExpandableValuesProps } from './community-initiatives-hxnFe3w6.js';
+export { b as AboutExpandableValues, n as AboutExpandableValuesProps } from './community-initiatives-DmVsuoHE.js';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';