@sikka/hawa 0.19.38-next → 0.19.40-next

package/dist/index.css

@@ -1293,6 +1293,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-grid {
   display: grid;
 }
+.hawa-inline-grid {
+  display: inline-grid;
+}
 .hawa-hidden {
   display: none;
 }
@@ -1628,6 +1631,9 @@ input[type="number"]::-webkit-inner-spin-button,
   width: -moz-max-content;
   width: max-content;
 }
+.hawa-w-px {
+  width: 1px;
+}
 .hawa-w-screen {
   width: 100vw;
 }
@@ -1882,6 +1888,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-grid-cols-\[1fr_repeat\(3\,_minmax\(0\,_1fr\)\)\] {
   grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
 }
+.hawa-grid-cols-\[repeat\(auto-fit\,_minmax\(300px\,_1fr\)\)\] {
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
 .hawa-flex-row {
   flex-direction: row;
 }
@@ -3599,16 +3608,11 @@ body {
 .hawa-group.destructive .group-\[\.destructive\]\:focus\:hawa-ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
-.hawa-peer:checked ~ .peer-checked\:hawa-border-blue-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
 .hawa-peer:checked ~ .peer-checked\:hawa-border-primary {
   border-color: hsl(var(--primary));
 }
-.hawa-peer:checked ~ .peer-checked\:hawa-text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+.hawa-peer:checked ~ .peer-checked\:hawa-text-primary {
+  color: hsl(var(--primary));
 }
 .hawa-peer:checked ~ .peer-checked\:hawa-ring-4 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

package/dist/index.d.mts

@@ -72,6 +72,7 @@ type PricingPlanTexts = {
     currencyText?: string;
     soon?: string;
     recommended?: string;
+    priceless?: string;
 };
 type ThirdPartyAuthTextsTypes = {
     continueWithGoogle?: string;
@@ -156,6 +157,7 @@ type PricingCardProps = {
     endButton?: boolean;
     price: number;
     oldPrice?: number;
+    noPrice?: boolean;
     id?: string;
     discount?: string;
     onPlanClicked?: () => void;
@@ -352,8 +354,9 @@ type RadioOptionsTypes = {
 type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
-    options: RadioOptionsTypes[];
     width?: "default" | "full" | "none";
+    size?: "default" | "lg" | "sm" | "xs";
+    options: RadioOptionsTypes[];
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ type PricingPlanTexts = {
     currencyText?: string;
     soon?: string;
     recommended?: string;
+    priceless?: string;
 };
 type ThirdPartyAuthTextsTypes = {
     continueWithGoogle?: string;
@@ -156,6 +157,7 @@ type PricingCardProps = {
     endButton?: boolean;
     price: number;
     oldPrice?: number;
+    noPrice?: boolean;
     id?: string;
     discount?: string;
     onPlanClicked?: () => void;
@@ -352,8 +354,9 @@ type RadioOptionsTypes = {
 type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
-    options: RadioOptionsTypes[];
     width?: "default" | "full" | "none";
+    size?: "default" | "lg" | "sm" | "xs";
+    options: RadioOptionsTypes[];
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;

package/dist/index.js

@@ -872,7 +872,7 @@ var PricingCard = ({
   currentPlan = false,
   ...props
 }) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   let cardSizes = {
     small: "hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
     medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
@@ -895,9 +895,9 @@ var PricingCard = ({
         className: "hawa-bg-primary hawa-text-center hawa-text-primary-foreground hawa-p-2 hawa-border hawa-rounded-t hawa-absolute hawa-top-0  -hawa-left-[1px] -hawa-translate-y-full",
         style: { width: "calc(100% + 2px)" }
       },
-      props.texts.recommended || "RECOMMENDED"
+      ((_a = props.texts) == null ? void 0 : _a.recommended) || "RECOMMENDED"
     ),
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ import_react7.default.createElement("span", null, props.texts.title), /* @__PURE__ */ import_react7.default.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react7.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react7.default.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ import_react7.default.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2   hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ import_react7.default.createElement(Separator, null), /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ import_react7.default.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ import_react7.default.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, (_c = props.texts) == null ? void 0 : _c.subtitle), props.discount && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react7.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react7.default.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ import_react7.default.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, props.noPrice ? /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, ((_d = props.texts) == null ? void 0 : _d.priceless) || "Contact Us") : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2   hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ import_react7.default.createElement(Separator, null), /* @__PURE__ */ import_react7.default.createElement(
       "div",
       {
         className: cn(
@@ -905,7 +905,7 @@ var PricingCard = ({
           endButton ? "hawa-flex-col" : "hawa-flex-col-reverse"
         )
       },
-      props.features && /* @__PURE__ */ import_react7.default.createElement("ul", { role: "list", className: "hawa-space-y-0 hawa-overflow-x-auto" }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
+      props.features && /* @__PURE__ */ import_react7.default.createElement("ul", { role: "list", className: "hawa-space-y-0 hawa-overflow-x-auto" }, (_h = props.features) == null ? void 0 : _h.map((feature, o) => {
         return /* @__PURE__ */ import_react7.default.createElement(
           "li",
           {
@@ -958,7 +958,7 @@ var PricingCard = ({
           disabled: currentPlan,
           className: "hawa-w-full"
         },
-        props.texts.buttonText
+        (_i = props.texts) == null ? void 0 : _i.buttonText
       )
     ))
   );
@@ -3608,6 +3608,7 @@ var import_react14 = __toESM(require("react"));
 var Radio = ({
   design = "default",
   width = "default",
+  size = "default",
   orientation = "horizontal",
   labelProps,
   tabsContainerClassName,
@@ -3615,12 +3616,18 @@ var Radio = ({
 }) => {
   var _a, _b, _c;
   const [selectedOption, setSelectedOption] = (0, import_react14.useState)(props.defaultValue);
-  let activeTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4  hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary ";
-  let inactiveTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4 hawa-w-full hawa-transition-all hover:hawa-bg-primary/10  hawa-bg-primary/5 dark:hover:hawa-text-white ";
+  let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+  let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row",
     vertical: "hawa-flex hawa-flex-col"
   };
+  let tabSizeStyle = {
+    default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+    lg: "hawa-py-2 hawa-px-4",
+    sm: "hawa-p-1.5 hawa-text-xs",
+    xs: "hawa-p-1 hawa-text-[10px]"
+  };
   let widthStyle = {
     none: "",
     default: "hawa-max-w-fit",
@@ -3646,7 +3653,7 @@ var Radio = ({
           ref: parentRef,
           className: cn(
             props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
+            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
             orientationStyle[orientation],
             widthStyle[width],
             tabsContainerClassName
@@ -3669,6 +3676,7 @@ var Radio = ({
               orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
               orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
               orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+              tabSizeStyle[size],
               "hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
               selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
             ),
@@ -3734,7 +3742,7 @@ var Radio = ({
         {
           htmlFor: opt.value.toString(),
           className: cn(
-            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-blue-600 peer-checked:hawa-text-blue-600 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
             opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
           )
         },
@@ -11077,7 +11085,7 @@ var PricingPlans = ({
   )), /* @__PURE__ */ import_react69.default.createElement(
     "div",
     {
-      className: "hawa-flex hawa-flex-col hawa-gap-2 md:hawa-flex-row hawa-justify-between",
+      className: "hawa-inline-grid hawa-w-full hawa-grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] hawa-gap-4",
       ...cardsContainerProps
     },
     props.plans.map((plan, index) => {
@@ -11167,7 +11175,7 @@ var ComparingPlans = (props) => {
         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("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,

package/dist/index.mjs

@@ -639,7 +639,7 @@ var PricingCard = ({
   currentPlan = false,
   ...props
 }) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   let cardSizes = {
     small: "hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
     medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
@@ -662,9 +662,9 @@ var PricingCard = ({
         className: "hawa-bg-primary hawa-text-center hawa-text-primary-foreground hawa-p-2 hawa-border hawa-rounded-t hawa-absolute hawa-top-0  -hawa-left-[1px] -hawa-translate-y-full",
         style: { width: "calc(100% + 2px)" }
       },
-      props.texts.recommended || "RECOMMENDED"
+      ((_a = props.texts) == null ? void 0 : _a.recommended) || "RECOMMENDED"
     ),
-    /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React10.createElement("span", null, props.texts.title), /* @__PURE__ */ React10.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React10.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React10.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2   hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ React10.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ React10.createElement(Separator, null), /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React10.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ React10.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, (_c = props.texts) == null ? void 0 : _c.subtitle), props.discount && /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React10.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React10.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, props.noPrice ? /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, ((_d = props.texts) == null ? void 0 : _d.priceless) || "Contact Us") : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2   hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ React10.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ React10.createElement(Separator, null), /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: cn(
@@ -672,7 +672,7 @@ var PricingCard = ({
           endButton ? "hawa-flex-col" : "hawa-flex-col-reverse"
         )
       },
-      props.features && /* @__PURE__ */ React10.createElement("ul", { role: "list", className: "hawa-space-y-0 hawa-overflow-x-auto" }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
+      props.features && /* @__PURE__ */ React10.createElement("ul", { role: "list", className: "hawa-space-y-0 hawa-overflow-x-auto" }, (_h = props.features) == null ? void 0 : _h.map((feature, o) => {
         return /* @__PURE__ */ React10.createElement(
           "li",
           {
@@ -725,7 +725,7 @@ var PricingCard = ({
           disabled: currentPlan,
           className: "hawa-w-full"
         },
-        props.texts.buttonText
+        (_i = props.texts) == null ? void 0 : _i.buttonText
       )
     ))
   );
@@ -3375,6 +3375,7 @@ import React20, { useState as useState6, useRef as useRef3, useEffect as useEffe
 var Radio = ({
   design = "default",
   width = "default",
+  size = "default",
   orientation = "horizontal",
   labelProps,
   tabsContainerClassName,
@@ -3382,12 +3383,18 @@ var Radio = ({
 }) => {
   var _a, _b, _c;
   const [selectedOption, setSelectedOption] = useState6(props.defaultValue);
-  let activeTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4  hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary ";
-  let inactiveTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4 hawa-w-full hawa-transition-all hover:hawa-bg-primary/10  hawa-bg-primary/5 dark:hover:hawa-text-white ";
+  let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+  let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row",
     vertical: "hawa-flex hawa-flex-col"
   };
+  let tabSizeStyle = {
+    default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+    lg: "hawa-py-2 hawa-px-4",
+    sm: "hawa-p-1.5 hawa-text-xs",
+    xs: "hawa-p-1 hawa-text-[10px]"
+  };
   let widthStyle = {
     none: "",
     default: "hawa-max-w-fit",
@@ -3413,7 +3420,7 @@ var Radio = ({
           ref: parentRef,
           className: cn(
             props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
+            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
             orientationStyle[orientation],
             widthStyle[width],
             tabsContainerClassName
@@ -3436,6 +3443,7 @@ var Radio = ({
               orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
               orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
               orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+              tabSizeStyle[size],
               "hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
               selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
             ),
@@ -3501,7 +3509,7 @@ var Radio = ({
         {
           htmlFor: opt.value.toString(),
           className: cn(
-            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-blue-600 peer-checked:hawa-text-blue-600 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
             opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
           )
         },
@@ -10861,7 +10869,7 @@ var PricingPlans = ({
   )), /* @__PURE__ */ React95.createElement(
     "div",
     {
-      className: "hawa-flex hawa-flex-col hawa-gap-2 md:hawa-flex-row hawa-justify-between",
+      className: "hawa-inline-grid hawa-w-full hawa-grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] hawa-gap-4",
       ...cardsContainerProps
     },
     props.plans.map((plan, index) => {
@@ -10951,7 +10959,7 @@ var ComparingPlans = (props) => {
         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("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,

package/package.json

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