@opensite/ui 3.0.4 → 3.0.6

package/dist/pricing-responsive-table.cjs

@@ -568,6 +568,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingResponsiveTable({
+  sectionId = "pricing-responsive-table",
   className,
   title,
   subtitle,
@@ -584,133 +585,141 @@ function PricingResponsiveTable({
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: value });
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Section, { background, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: subtitle }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium",
-              !isYearly ? "" : "text-muted-foreground"
-            ),
-            children: "Monthly"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: isYearly, onCheckedChange: setIsYearly }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium",
-              isYearly ? "" : "text-muted-foreground"
-            ),
-            children: [
-              "Yearly",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary", children: "Save 17%" })
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 md:hidden", children: plans.map((plan, planIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Card,
-      {
-        className: cn(plan.isPopular && "border-primary shadow-lg"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: plan.name }),
-              plan.isPopular && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary px-2 py-1 text-xs text-primary-foreground", children: "Popular" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: plan.description }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold", children: [
-                "$",
-                isYearly ? plan.yearlyPrice : plan.monthlyPrice
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-                "/",
-                isYearly ? "year" : "month"
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3", children: features.map((feature, featureIndex) => {
-              const value = planIndex === 0 ? feature.free : planIndex === 1 ? feature.pro : feature.enterprise;
-              return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: feature.name }),
-                renderFeatureValue(value)
-              ] }, featureIndex);
-            }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      id: sectionId,
+      background,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex items-center justify-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              pressable.Pressable,
+              "span",
               {
-                href: plan.buttonHref,
-                variant: plan.isPopular ? "default" : "outline",
-                size: "default",
-                asButton: true,
-                className: "mt-6 w-full justify-center",
-                children: plan.buttonText
+                className: cn(
+                  "text-sm font-medium",
+                  !isYearly ? "" : "text-muted-foreground"
+                ),
+                children: "Monthly"
               }
-            )
-          ] })
-        ]
-      },
-      planIndex
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: cn("border-b", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 text-left font-medium", children: "Features" }),
-        plans.map((plan, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: plan.name }),
-          plan.isPopular && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: "Popular" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl font-bold", children: [
-              "$",
-              isYearly ? plan.yearlyPrice : plan.monthlyPrice
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-              "/",
-              isYearly ? "yr" : "mo"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            pressable.Pressable,
-            {
-              href: plan.buttonHref,
-              variant: plan.isPopular ? "default" : "outline",
-              size: "sm",
-              asButton: true,
-              className: "mt-3",
-              children: plan.buttonText
-            }
-          )
-        ] }) }, index))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b last:border-b-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: feature.name }),
-          feature.tooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: isYearly, onCheckedChange: setIsYearly }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
               {
-                name: "lucide/info",
-                size: 14,
-                className: "text-muted-foreground"
+                className: cn(
+                  "text-sm font-medium",
+                  isYearly ? "" : "text-muted-foreground"
+                ),
+                children: [
+                  "Yearly",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary", children: "Save 17%" })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: feature.tooltip }) })
+            )
           ] })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.free) }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.pro) }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.enterprise) })
-      ] }, index)) }) })
-    ] }) }) })
-  ] });
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 md:hidden", children: plans.map((plan, planIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Card,
+          {
+            className: cn(plan.isPopular && "border-primary shadow-lg"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: plan.name }),
+                  plan.isPopular && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary px-2 py-1 text-xs text-primary-foreground", children: "Popular" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: plan.description }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold", children: [
+                    "$",
+                    isYearly ? plan.yearlyPrice : plan.monthlyPrice
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                    "/",
+                    isYearly ? "year" : "month"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3", children: features.map((feature, featureIndex) => {
+                  const value = planIndex === 0 ? feature.free : planIndex === 1 ? feature.pro : feature.enterprise;
+                  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: feature.name }),
+                    renderFeatureValue(value)
+                  ] }, featureIndex);
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  pressable.Pressable,
+                  {
+                    href: plan.buttonHref,
+                    variant: plan.isPopular ? "default" : "outline",
+                    size: "default",
+                    asButton: true,
+                    className: "mt-6 w-full justify-center",
+                    children: plan.buttonText
+                  }
+                )
+              ] })
+            ]
+          },
+          planIndex
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: cn("border-b", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 text-left font-medium", children: "Features" }),
+            plans.map((plan, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: plan.name }),
+              plan.isPopular && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: "Popular" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl font-bold", children: [
+                  "$",
+                  isYearly ? plan.yearlyPrice : plan.monthlyPrice
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                  "/",
+                  isYearly ? "yr" : "mo"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                pressable.Pressable,
+                {
+                  href: plan.buttonHref,
+                  variant: plan.isPopular ? "default" : "outline",
+                  size: "sm",
+                  asButton: true,
+                  className: "mt-3",
+                  children: plan.buttonText
+                }
+              )
+            ] }) }, index))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b last:border-b-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: feature.name }),
+              feature.tooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/info",
+                    size: 14,
+                    className: "text-muted-foreground"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: feature.tooltip }) })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.free) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.pro) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.enterprise) })
+          ] }, index)) }) })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 exports.PricingResponsiveTable = PricingResponsiveTable;

package/dist/pricing-responsive-table.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SectionBackground } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'react';
 import 'class-variance-authority';
@@ -29,6 +29,8 @@ interface PricingResponsiveTableProps {
     plans?: PricingPlan[];
     features?: PlanFeature[];
     background?: SectionBackground;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingResponsiveTable displays a comprehensive pricing comparison with mobile and desktop views.
@@ -50,6 +52,6 @@ interface PricingResponsiveTableProps {
  * />
  * ```
  */
-declare function PricingResponsiveTable({ className, title, subtitle, plans, features, background, }: PricingResponsiveTableProps): react_jsx_runtime.JSX.Element;
+declare function PricingResponsiveTable({ sectionId, className, title, subtitle, plans, features, background, }: PricingResponsiveTableProps): react_jsx_runtime.JSX.Element;
 
 export { PricingResponsiveTable, type PricingResponsiveTableProps };

package/dist/pricing-responsive-table.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SectionBackground } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'react';
 import 'class-variance-authority';
@@ -29,6 +29,8 @@ interface PricingResponsiveTableProps {
     plans?: PricingPlan[];
     features?: PlanFeature[];
     background?: SectionBackground;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingResponsiveTable displays a comprehensive pricing comparison with mobile and desktop views.
@@ -50,6 +52,6 @@ interface PricingResponsiveTableProps {
  * />
  * ```
  */
-declare function PricingResponsiveTable({ className, title, subtitle, plans, features, background, }: PricingResponsiveTableProps): react_jsx_runtime.JSX.Element;
+declare function PricingResponsiveTable({ sectionId, className, title, subtitle, plans, features, background, }: PricingResponsiveTableProps): react_jsx_runtime.JSX.Element;
 
 export { PricingResponsiveTable, type PricingResponsiveTableProps };

package/dist/pricing-responsive-table.js

@@ -545,6 +545,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingResponsiveTable({
+  sectionId = "pricing-responsive-table",
   className,
   title,
   subtitle,
@@ -561,133 +562,141 @@ function PricingResponsiveTable({
       return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: value });
     };
   }, []);
-  return /* @__PURE__ */ jsxs(Section, { background, className, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: subtitle }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium",
-              !isYearly ? "" : "text-muted-foreground"
-            ),
-            children: "Monthly"
-          }
-        ),
-        /* @__PURE__ */ jsx(Switch, { checked: isYearly, onCheckedChange: setIsYearly }),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium",
-              isYearly ? "" : "text-muted-foreground"
-            ),
-            children: [
-              "Yearly",
-              /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary", children: "Save 17%" })
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:hidden", children: plans.map((plan, planIndex) => /* @__PURE__ */ jsxs(
-      Card,
-      {
-        className: cn(plan.isPopular && "border-primary shadow-lg"),
-        children: [
-          /* @__PURE__ */ jsxs(CardHeader, { children: [
-            /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { children: plan.name }),
-              plan.isPopular && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-2 py-1 text-xs text-primary-foreground", children: "Popular" })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: plan.description }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-              /* @__PURE__ */ jsxs("span", { className: "text-3xl font-bold", children: [
-                "$",
-                isYearly ? plan.yearlyPrice : plan.monthlyPrice
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-                "/",
-                isYearly ? "year" : "month"
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(CardContent, { children: [
-            /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: features.map((feature, featureIndex) => {
-              const value = planIndex === 0 ? feature.free : planIndex === 1 ? feature.pro : feature.enterprise;
-              return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: feature.name }),
-                renderFeatureValue(value)
-              ] }, featureIndex);
-            }) }),
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      id: sectionId,
+      background,
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: subtitle }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center justify-center gap-3", children: [
             /* @__PURE__ */ jsx(
-              Pressable,
+              "span",
               {
-                href: plan.buttonHref,
-                variant: plan.isPopular ? "default" : "outline",
-                size: "default",
-                asButton: true,
-                className: "mt-6 w-full justify-center",
-                children: plan.buttonText
+                className: cn(
+                  "text-sm font-medium",
+                  !isYearly ? "" : "text-muted-foreground"
+                ),
+                children: "Monthly"
               }
-            )
-          ] })
-        ]
-      },
-      planIndex
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: cn("border-b", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left font-medium", children: "Features" }),
-        plans.map((plan, index) => /* @__PURE__ */ jsx("th", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: plan.name }),
-          plan.isPopular && /* @__PURE__ */ jsx("span", { className: "mt-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: "Popular" }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold", children: [
-              "$",
-              isYearly ? plan.yearlyPrice : plan.monthlyPrice
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-              "/",
-              isYearly ? "yr" : "mo"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: plan.buttonHref,
-              variant: plan.isPopular ? "default" : "outline",
-              size: "sm",
-              asButton: true,
-              className: "mt-3",
-              children: plan.buttonText
-            }
-          )
-        ] }) }, index))
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(TooltipProvider, { children: features.map((feature, index) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-b-0", children: [
-        /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm", children: feature.name }),
-          feature.tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
-              DynamicIcon,
+            ),
+            /* @__PURE__ */ jsx(Switch, { checked: isYearly, onCheckedChange: setIsYearly }),
+            /* @__PURE__ */ jsxs(
+              "span",
               {
-                name: "lucide/info",
-                size: 14,
-                className: "text-muted-foreground"
+                className: cn(
+                  "text-sm font-medium",
+                  isYearly ? "" : "text-muted-foreground"
+                ),
+                children: [
+                  "Yearly",
+                  /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary", children: "Save 17%" })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: feature.tooltip }) })
+            )
           ] })
-        ] }) }),
-        /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.free) }),
-        /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.pro) }),
-        /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.enterprise) })
-      ] }, index)) }) })
-    ] }) }) })
-  ] });
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:hidden", children: plans.map((plan, planIndex) => /* @__PURE__ */ jsxs(
+          Card,
+          {
+            className: cn(plan.isPopular && "border-primary shadow-lg"),
+            children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("span", { children: plan.name }),
+                  plan.isPopular && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-2 py-1 text-xs text-primary-foreground", children: "Popular" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: plan.description }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-3xl font-bold", children: [
+                    "$",
+                    isYearly ? plan.yearlyPrice : plan.monthlyPrice
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                    "/",
+                    isYearly ? "year" : "month"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(CardContent, { children: [
+                /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: features.map((feature, featureIndex) => {
+                  const value = planIndex === 0 ? feature.free : planIndex === 1 ? feature.pro : feature.enterprise;
+                  return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: feature.name }),
+                    renderFeatureValue(value)
+                  ] }, featureIndex);
+                }) }),
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: plan.buttonHref,
+                    variant: plan.isPopular ? "default" : "outline",
+                    size: "default",
+                    asButton: true,
+                    className: "mt-6 w-full justify-center",
+                    children: plan.buttonText
+                  }
+                )
+              ] })
+            ]
+          },
+          planIndex
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: cn("border-b", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
+            /* @__PURE__ */ jsx("th", { className: "p-4 text-left font-medium", children: "Features" }),
+            plans.map((plan, index) => /* @__PURE__ */ jsx("th", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: plan.name }),
+              plan.isPopular && /* @__PURE__ */ jsx("span", { className: "mt-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: "Popular" }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold", children: [
+                  "$",
+                  isYearly ? plan.yearlyPrice : plan.monthlyPrice
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                  "/",
+                  isYearly ? "yr" : "mo"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  href: plan.buttonHref,
+                  variant: plan.isPopular ? "default" : "outline",
+                  size: "sm",
+                  asButton: true,
+                  className: "mt-3",
+                  children: plan.buttonText
+                }
+              )
+            ] }) }, index))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(TooltipProvider, { children: features.map((feature, index) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-b-0", children: [
+            /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: feature.name }),
+              feature.tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/info",
+                    size: 14,
+                    className: "text-muted-foreground"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: feature.tooltip }) })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.free) }),
+            /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.pro) }),
+            /* @__PURE__ */ jsx("td", { className: "p-4 text-center", children: renderFeatureValue(feature.enterprise) })
+          ] }, index)) }) })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 export { PricingResponsiveTable };

package/dist/pricing-services-cards.cjs

@@ -443,6 +443,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingServicesCards({
+  sectionId = "pricing-services-cards",
   heading,
   subtitle,
   plans,
@@ -652,6 +653,7 @@ function PricingServicesCards({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-services-cards.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -207,6 +207,8 @@ interface PricingServicesCardsProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingServicesCards displays a two-card layout for service-based pricing.
@@ -225,6 +227,6 @@ interface PricingServicesCardsProps {
  * />
  * ```
  */
-declare function PricingServicesCards({ heading, subtitle, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, highlightedCardClassName, planIconWrapperClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingServicesCardsProps): React.JSX.Element;
+declare function PricingServicesCards({ sectionId, heading, subtitle, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, highlightedCardClassName, planIconWrapperClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingServicesCardsProps): React.JSX.Element;
 
 export { PricingServicesCards, type PricingServicesCardsProps };