dune-react 0.0.23 → 0.0.24

package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.js

@@ -30,7 +30,7 @@ const TabStats = (props) => {
     TabsContent,
     {
       value: tab.value,
-      className: "data-[state=active]:animate-tabs",
+      className: "animate-tabs",
       children: /* @__PURE__ */ jsxs("div", { className: "relative size-full", children: [
         tab.image && /* @__PURE__ */ jsx(
           CompoundImage,

package/dist/components/puck-block/pricing-sections/pricing-comparison-table/component.js

@@ -5,7 +5,16 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.j
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const PricingComparisonTable = (props) => {
-  const { tagline, heading, description, pricingPlans, featureCategories, tabs, defaultTabValue, styles } = {
+  const {
+    tagline,
+    heading,
+    description,
+    pricingPlans,
+    featureCategories,
+    tabs,
+    defaultTabValue,
+    styles
+  } = {
     ...PricingComparisonTableDefaults,
     ...props
   };
@@ -17,7 +26,7 @@ const PricingComparisonTable = (props) => {
     tableStyle = "border-separated",
     bottomButtons = false
   } = styles ?? {};
-  const renderHeader = (plans) => /* @__PURE__ */ jsxs("div", { className: "sticky top-0 grid grid-cols-3 border-b border-border-primary bg-white md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
+  const renderHeader = (plans) => /* @__PURE__ */ jsxs("div", { className: "sticky top-0 grid grid-cols-3 border-b border-border-primary bg-background-primary md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
     /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
     plans.map((plan, index) => /* @__PURE__ */ jsxs(
       "div",
@@ -38,20 +47,36 @@ const PricingComparisonTable = (props) => {
             ] }),
             /* @__PURE__ */ jsx("p", { children: plan.description })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3", children: plan.button.label }) })
+          /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: plan.button.variant,
+              size: plan.button.size,
+              className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3",
+              children: plan.button.label
+            }
+          ) })
         ]
       },
       index
     ))
   ] });
   const renderFeatures = () => /* @__PURE__ */ jsx("div", { children: featureCategories.map((featureCategory, catIndex) => /* @__PURE__ */ jsxs("div", { children: [
-    featureCategory.title && /* @__PURE__ */ jsx("div", { className: `border-b border-border-primary py-5 ${tableStyle === "zebra-striped" ? "bg-background-secondary" : ""}`, children: /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: featureCategory.title }) }),
+    featureCategory.title && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `border-b border-border-primary py-5 ${tableStyle === "zebra-striped" ? "bg-background-secondary" : ""}`,
+        children: /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: featureCategory.title })
+      }
+    ),
     featureCategory.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "grid grid-cols-3 border-b border-border-primary md:grid-cols-[1.5fr_1fr_1fr_1fr]",
-          { "bg-background-secondary": tableStyle === "zebra-striped" && featureIndex % 2 === 0 }
+          {
+            "bg-background-secondary": tableStyle === "zebra-striped" && featureIndex % 2 === 0
+          }
         ),
         children: [
           /* @__PURE__ */ jsx("p", { className: "col-span-3 row-span-1 border-b border-border-primary py-4 pr-4 md:col-span-1 md:border-0 md:pr-6", children: feature.text }),
@@ -76,41 +101,113 @@ const PricingComparisonTable = (props) => {
   ] }, catIndex)) });
   const renderBottomButtons = (plans) => /* @__PURE__ */ jsxs("div", { className: "mt-8 grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
     /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
-    plans.map((plan, index) => /* @__PURE__ */ jsx("div", { className: cn("px-2 sm:px-4 lg:px-6", { "border-l border-border-primary": index > 0 }), children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3", children: plan.button.label }) }, index))
+    plans.map((plan, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("px-2 sm:px-4 lg:px-6", {
+          "border-l border-border-primary": index > 0
+        }),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: plan.button.variant,
+            size: plan.button.size,
+            className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3",
+            children: plan.button.label
+          }
+        )
+      },
+      index
+    ))
   ] });
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
-      /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }),
-    tabSwitching && tabs ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue || "monthly", children: [
-      /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
-      tabs.map((tab, index) => /* @__PURE__ */ jsxs(TabsContent, { value: tab.value, className: "w-full data-[state=active]:animate-tabs", children: [
-        renderHeader(tab.pricingPlans),
-        renderFeatures(),
-        bottomButtons && renderBottomButtons(tab.pricingPlans)
-      ] }, index))
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-      renderHeader(pricingPlans),
-      renderFeatures(),
-      bottomButtons && renderBottomButtons(pricingPlans)
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }),
+        tabSwitching && tabs ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue || "monthly", children: [
+          /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
+          tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+            TabsContent,
+            {
+              value: tab.value,
+              className: "w-full animate-tabs",
+              children: [
+                renderHeader(tab.pricingPlans),
+                renderFeatures(),
+                bottomButtons && renderBottomButtons(tab.pricingPlans)
+              ]
+            },
+            index
+          ))
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          renderHeader(pricingPlans),
+          renderFeatures(),
+          bottomButtons && renderBottomButtons(pricingPlans)
+        ] })
+      ] })
+    }
+  );
 };
 const defaultPlans = [
-  { planName: "Basic", monthlyPrice: "$19", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } },
-  { planName: "Business", monthlyPrice: "$29", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } },
-  { planName: "Enterprise", monthlyPrice: "$49", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } }
+  {
+    planName: "Basic",
+    monthlyPrice: "$19",
+    description: "Lorem ipsum dolor sit amet",
+    button: { label: "Get started" }
+  },
+  {
+    planName: "Business",
+    monthlyPrice: "$29",
+    description: "Lorem ipsum dolor sit amet",
+    button: { label: "Get started" }
+  },
+  {
+    planName: "Enterprise",
+    monthlyPrice: "$49",
+    description: "Lorem ipsum dolor sit amet",
+    button: { label: "Get started" }
+  }
 ];
 const defaultFeatureCategory = {
   title: "Feature Category",
   features: [
     { text: "Feature text goes here", items: ["10", "25", "Unlimited"] },
-    { text: "Feature text goes here", items: [/* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
-    { text: "Feature text goes here", items: [/* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
-    { text: "Feature text goes here", items: ["", /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
-    { text: "Feature text goes here", items: ["", "", /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] }
+    {
+      text: "Feature text goes here",
+      items: [
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }),
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }),
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })
+      ]
+    },
+    {
+      text: "Feature text goes here",
+      items: [
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }),
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }),
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })
+      ]
+    },
+    {
+      text: "Feature text goes here",
+      items: [
+        "",
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }),
+        /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })
+      ]
+    },
+    {
+      text: "Feature text goes here",
+      items: ["", "", /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })]
+    }
   ]
 };
 const PricingComparisonTableDefaults = {
@@ -118,7 +215,11 @@ const PricingComparisonTableDefaults = {
   heading: "Pricing plan",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   pricingPlans: defaultPlans,
-  featureCategories: [defaultFeatureCategory, defaultFeatureCategory, defaultFeatureCategory],
+  featureCategories: [
+    defaultFeatureCategory,
+    defaultFeatureCategory,
+    defaultFeatureCategory
+  ],
   styles: {
     tabSwitching: false,
     tableStyle: "border-separated",

package/dist/components/puck-block/pricing-sections/tab-pricing-grid/component.js

@@ -9,55 +9,93 @@ const TabPricingGrid = (props) => {
     ...TabPricingGridDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, columns = 2 } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    columns = 2
+  } = styles ?? {};
   const gridColsClass = columns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
   const containerMaxW = columns === 3 ? "" : "max-w-xl";
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
-      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }),
-    /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue, children: [
-      /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
-      tabs.map((tab, index) => /* @__PURE__ */ jsx(
-        TabsContent,
-        {
-          value: tab.value,
-          className: `grid grid-cols-1 gap-8 data-[state=active]:animate-tabs ${gridColsClass}`,
-          children: tab.plans.map((plan, planIndex) => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "rb-6 mb-6 text-center md:mb-8", children: [
-                /* @__PURE__ */ jsx("h6", { className: "text-md font-bold leading-[1.4] md:text-xl", children: plan.planName }),
-                /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
-                  plan.price,
-                  /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: tab.value === "monthly" ? "/mo" : "/yr" })
-                ] }),
-                tab.value === "yearly" && plan.discount && /* @__PURE__ */ jsx("p", { className: "mt-2 font-medium", children: plan.discount })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
-                /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
-                /* @__PURE__ */ jsx("p", { children: feature })
-              ] }, featureIndex)) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
-          ] }, planIndex))
-        },
-        index
-      ))
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue, children: [
+          /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
+          tabs.map((tab, index) => /* @__PURE__ */ jsx(
+            TabsContent,
+            {
+              value: tab.value,
+              className: `grid grid-cols-1 gap-8 animate-tabs ${gridColsClass}`,
+              children: tab.plans.map((plan, planIndex) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "rb-6 mb-6 text-center md:mb-8", children: [
+                        /* @__PURE__ */ jsx("h6", { className: "text-md font-bold leading-[1.4] md:text-xl", children: plan.planName }),
+                        /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+                          plan.price,
+                          /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: tab.value === "monthly" ? "/mo" : "/yr" })
+                        ] }),
+                        tab.value === "yearly" && plan.discount && /* @__PURE__ */ jsx("p", { className: "mt-2 font-medium", children: plan.discount })
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+                        /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+                        /* @__PURE__ */ jsx("p", { children: feature })
+                      ] }, featureIndex)) })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: plan.button.variant,
+                        size: plan.button.size,
+                        className: "w-full",
+                        children: plan.button.label
+                      }
+                    ) })
+                  ]
+                },
+                planIndex
+              ))
+            },
+            index
+          ))
+        ] })
+      ] })
+    }
+  );
 };
 const basePlan = {
   planName: "Basic plan",
   price: "$19",
-  features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
+  features: [
+    "Feature text goes here",
+    "Feature text goes here",
+    "Feature text goes here"
+  ],
   button: { label: "Get started" }
 };
 const businessPlan = {
   planName: "Business plan",
   price: "$29",
-  features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
+  features: [
+    "Feature text goes here",
+    "Feature text goes here",
+    "Feature text goes here",
+    "Feature text goes here",
+    "Feature text goes here"
+  ],
   button: { label: "Get started" }
 };
 const TabPricingGridDefaults = {
@@ -75,8 +113,16 @@ const TabPricingGridDefaults = {
       value: "yearly",
       tabName: "Yearly",
       plans: [
-        { ...basePlan, price: "$180", discount: "Save 20% with the annual plan" },
-        { ...businessPlan, price: "$280", discount: "Save 20% with the annual plan" }
+        {
+          ...basePlan,
+          price: "$180",
+          discount: "Save 20% with the annual plan"
+        },
+        {
+          ...businessPlan,
+          price: "$280",
+          discount: "Save 20% with the annual plan"
+        }
       ]
     }
   ],

package/dist/components/puck-block/pricing-sections/tab-single-pricing/component.js

@@ -22,7 +22,7 @@ const TabSinglePricing = (props) => {
         TabsContent,
         {
           value: tab.value,
-          className: "container max-w-md data-[state=active]:animate-tabs",
+          className: "container max-w-md animate-tabs",
           children: tab.plans.map((plan, planIndex) => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("div", { className: "rb-6 mb-6 text-center md:mb-8", children: [