@sikka/hawa 0.19.27-next → 0.19.29-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;
 }
@@ -2830,10 +2836,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-tracking-widest {
   letter-spacing: 0.1em;
 }
-.hawa-text-\[\#000000\] {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
 .hawa-text-\[\#666666\] {
   --tw-text-opacity: 1;
   color: rgb(102 102 102 / var(--tw-text-opacity));
@@ -4019,10 +4021,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-\[\#ffffff\]) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-black) {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -4266,10 +4264,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.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-sticky hawa-top-4 hawa-z-20" }, /* @__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,27 +11154,25 @@ 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-b hawa-border-t 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) => {
+  )), /* @__PURE__ */ import_react70.default.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded" }, 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: "hawa-grid  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"
       },
-      /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-white" }, featureText, props.plans.some(
+      /* @__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(
           (feature) => feature.text === featureText && feature.hint
         )
@@ -11210,7 +11208,7 @@ 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: "dark:hawa-text-[#ffffff] hawa-text-[#000000]" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "dark:hawa-text-[#ffffff] hawa-text-[#000000]" }));
+        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" }));
       })
     );
   })));

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-sticky hawa-top-4 hawa-z-20" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
     Radio,
     {
       design: "tabs",
@@ -10938,27 +10938,25 @@ 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-b hawa-border-t 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) => {
+  )), /* @__PURE__ */ React96.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded" }, 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: "hawa-grid  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"
       },
-      /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-white" }, featureText, props.plans.some(
+      /* @__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(
           (feature) => feature.text === featureText && feature.hint
         )
@@ -10994,7 +10992,7 @@ 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: "dark:hawa-text-[#ffffff] hawa-text-[#000000]" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "dark:hawa-text-[#ffffff] hawa-text-[#000000]" }));
+        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" }));
       })
     );
   })));

package/package.json

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