@sikka/hawa 0.19.28-next → 0.19.30-next

package/dist/index.css

@@ -1428,6 +1428,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[48px\] {
   height: 48px;
 }
+.hawa-h-\[70dvh\] {
+  height: 70dvh;
+}
 .hawa-h-\[72px\] {
   height: 72px;
 }
@@ -1879,6 +1882,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+.hawa-grid-cols-\[1fr_repeat\(3\,_minmax\(0\,_1fr\)\)\] {
+  grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
+}
 .hawa-flex-row {
   flex-direction: row;
 }
@@ -2155,6 +2161,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-t {
   border-top-width: 1px;
 }
+.hawa-border-t-0 {
+  border-top-width: 0px;
+}
 .hawa-border-dashed {
   border-style: dashed;
 }
@@ -4258,10 +4267,6 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:hawa-grid-cols-\[1fr_repeat\(3\2c _minmax\(0\2c _1fr\)\)\] {
-    grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
-  }
-
   .md\:hawa-flex-row {
     flex-direction: row;
   }

package/dist/index.d.mts

@@ -1737,6 +1737,7 @@ type ComparingPlansTypes = {
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
+    showButtons?: boolean;
 };
 declare const ComparingPlans: FC<ComparingPlansTypes>;
 

package/dist/index.d.ts

@@ -1737,6 +1737,7 @@ type ComparingPlansTypes = {
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
+    showButtons?: boolean;
 };
 declare const ComparingPlans: FC<ComparingPlansTypes>;
 

package/dist/index.js

@@ -11126,7 +11126,7 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
+  return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
     Radio,
     {
       design: "tabs",
@@ -11154,25 +11154,33 @@ var ComparingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ import_react70.default.createElement(
+  )), /* @__PURE__ */ import_react70.default.createElement(
     "div",
     {
       className: cn(
-        "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
-        "hawa-bg-primary/5"
-        // "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
-        // "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
+        "hawa-sticky hawa-top-0 hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
+        "hawa-bg-primary-foreground"
       )
     },
     /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }),
-    props.plans.map((plan, i) => /* @__PURE__ */ import_react70.default.createElement("div", { key: i, className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText))))
-  ), uniqueFeatures.map((featureText, featureIndex) => {
+    props.plans.map((plan, i) => /* @__PURE__ */ import_react70.default.createElement(
+      "div",
+      {
+        key: i,
+        className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-justify-center hawa-items-center"
+      },
+      /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText)))
+    ))
+  ), /* @__PURE__ */ import_react70.default.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border" }, uniqueFeatures.map((featureText, featureIndex) => {
     var _a, _b;
     return /* @__PURE__ */ import_react70.default.createElement(
       "div",
       {
         key: featureIndex,
-        className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
+        className: cn(
+          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700",
+          featureIndex === 0 ? "" : "hawa-border-t"
+        )
       },
       /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
         (plan) => plan.features.some(
@@ -11210,9 +11218,26 @@ var ComparingPlans = (props) => {
         const feature = plan.features.find(
           (f) => f.text === featureText
         );
-        return /* @__PURE__ */ import_react70.default.createElement("div", { key: planIndex, className: "hawa-text-center" }, (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ import_react70.default.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "hawa-text-foreground" }));
+        return /* @__PURE__ */ import_react70.default.createElement(
+          "div",
+          {
+            key: planIndex,
+            className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
+          },
+          (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ import_react70.default.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "hawa-text-foreground" })
+        );
       })
     );
+  })), props.showButtons && /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-px-4 hawa-py-5" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
+    var _a;
+    return /* @__PURE__ */ import_react70.default.createElement(
+      "div",
+      {
+        key: i,
+        className: "hawa-flex hawa-justify-center hawa-items-center"
+      },
+      /* @__PURE__ */ import_react70.default.createElement("button", { className: "hawa-bg-primary hawa-text-white hawa-p-2 hawa-rounded hawa-w-full hawa-max-w-xs" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+    );
   })));
 };
 

package/dist/index.mjs

@@ -10910,7 +10910,7 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
     Radio,
     {
       design: "tabs",
@@ -10938,25 +10938,33 @@ var ComparingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ React96.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React96.createElement(
     "div",
     {
       className: cn(
-        "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
-        "hawa-bg-primary/5"
-        // "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
-        // "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
+        "hawa-sticky hawa-top-0 hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
+        "hawa-bg-primary-foreground"
       )
     },
     /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }),
-    props.plans.map((plan, i) => /* @__PURE__ */ React96.createElement("div", { key: i, className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ React96.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React96.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText))))
-  ), uniqueFeatures.map((featureText, featureIndex) => {
+    props.plans.map((plan, i) => /* @__PURE__ */ React96.createElement(
+      "div",
+      {
+        key: i,
+        className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-justify-center hawa-items-center"
+      },
+      /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ React96.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React96.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText)))
+    ))
+  ), /* @__PURE__ */ React96.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border" }, uniqueFeatures.map((featureText, featureIndex) => {
     var _a, _b;
     return /* @__PURE__ */ React96.createElement(
       "div",
       {
         key: featureIndex,
-        className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
+        className: cn(
+          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700",
+          featureIndex === 0 ? "" : "hawa-border-t"
+        )
       },
       /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
         (plan) => plan.features.some(
@@ -10994,9 +11002,26 @@ var ComparingPlans = (props) => {
         const feature = plan.features.find(
           (f) => f.text === featureText
         );
-        return /* @__PURE__ */ React96.createElement("div", { key: planIndex, className: "hawa-text-center" }, (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ React96.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "hawa-text-foreground" }));
+        return /* @__PURE__ */ React96.createElement(
+          "div",
+          {
+            key: planIndex,
+            className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
+          },
+          (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ React96.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "hawa-text-foreground" })
+        );
       })
     );
+  })), props.showButtons && /* @__PURE__ */ React96.createElement("div", { className: "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-px-4 hawa-py-5" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
+    var _a;
+    return /* @__PURE__ */ React96.createElement(
+      "div",
+      {
+        key: i,
+        className: "hawa-flex hawa-justify-center hawa-items-center"
+      },
+      /* @__PURE__ */ React96.createElement("button", { className: "hawa-bg-primary hawa-text-white hawa-p-2 hawa-rounded hawa-w-full hawa-max-w-xs" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+    );
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.19.28-next",
+  "version": "0.19.30-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",