@sikka/hawa 0.19.33-next → 0.19.35-next

package/dist/index.css

@@ -4169,6 +4169,11 @@ body {
     top: auto;
   }
 
+  .sm\:hawa-max-w-fit {
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+  }
+
   .sm\:hawa-max-w-sm {
     max-width: 24rem;
   }

package/dist/index.d.mts

@@ -38,6 +38,10 @@ type PositionType = "top" | "bottom" | "right" | "left";
 type SeverityType = "info" | "warning" | "error" | "success" | "none";
 type OrientationType = "vertical" | "horizontal";
 type RadiusType = "full" | "inherit" | "none";
+type RadioOptionType = {
+    label: string;
+    value: string;
+};
 
 type AdCardTypes = {
     orientation: OrientationType;
@@ -52,15 +56,103 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
+type PlanFeature = {
+    soon?: boolean;
+    included?: boolean;
+    text: string;
+    hint?: string;
+    hintSide?: PositionType;
+};
+
+type PricingPlanTexts = {
+    title?: string;
+    subtitle?: string;
+    buttonText?: string;
+    cycleText?: string;
+    currencyText?: string;
+    soon?: string;
+    recommended?: string;
+};
+type ThirdPartyAuthTextsTypes = {
+    continueWithGoogle?: string;
+    continueWithTwitter?: string;
+    continueWithApple?: string;
+    continueWithMicrosoft?: string;
+    continueWithGithub?: string;
+    continueWithEmail?: string;
+    continueWithPhone?: string;
+};
+type BaseInputType = {
+    label?: string;
+    placeholder?: string;
+};
+type ValidationTexts = {
+    required?: string;
+    invalid?: string;
+};
+type TextInputType = ValidationTexts & {
+    label?: string;
+    placeholder?: string;
+};
+type PasswordInputType$1 = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
+type UsernameInputType = TextInputType & {
+    tooShort?: string;
+};
+type ConfirmInputType = BaseInputType & {
+    required?: string;
+    dontMatch?: string;
+};
+type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    email?: TextInputType;
+    username?: UsernameInputType;
+    phone?: TextInputType;
+    password?: PasswordInputType$1;
+    forgotPassword?: string;
+    newUserText?: string;
+    createAccount?: string;
+    loginText?: string;
+};
+type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    fullName?: BaseInputType;
+    email?: TextInputType;
+    username?: UsernameInputType;
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    userReference?: BaseInputType;
+    subscribeToNewsletter?: string;
+    termsRequired?: string;
+    refCode?: string;
+    refCodePlaceholder?: string;
+    existingUserText?: string;
+    termsText?: string;
+    iAcceptText?: string;
+    registerText?: string;
+    loginText?: string;
+};
+type ResetPasswordTextsTypes = {
+    email?: TextInputType;
+    emailSentText?: string;
+    registerText?: string;
+    resetPassword?: string;
+    dontHaveAccount?: string;
+    headTitle?: string;
+    headDescription?: string;
+};
+type NewPasswordTextsTypes = {
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    updatePassword?: string;
+    passwordChanged?: string;
+    dontHaveAccount?: string;
+    registerText?: string;
+};
+
 type PricingCardProps = {
     direction?: DirectionType;
-    features: {
-        included: boolean;
-        soon?: boolean;
-        text: string;
-        hint?: string;
-        hintSide?: any;
-    }[];
+    features: PlanFeature[];
     endButton?: boolean;
     price: number;
     oldPrice?: number;
@@ -71,14 +163,7 @@ type PricingCardProps = {
     recommended?: boolean;
     size?: "small" | "medium" | "large";
     isLoading?: boolean;
-    texts: {
-        title: string;
-        subtitle?: string;
-        buttonText: string;
-        cycleText: string;
-        currencyText: string;
-        recommended?: string;
-    };
+    texts: PricingPlanTexts;
 };
 declare const PricingCard: FC<PricingCardProps>;
 
@@ -268,13 +353,14 @@ type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
     options: RadioOptionsTypes[];
-    width?: "default" | "full";
+    width?: "default" | "full" | "none";
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;
     helperText?: string;
     labelProps?: LabelProps;
     label?: string;
+    tabsContainerClassName?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -1040,11 +1126,11 @@ type PasswordInputIndicatorProps = {
     strength?: any;
 };
 declare const PasswordStrengthIndicator: React__default.FC<PasswordInputIndicatorProps>;
-type PasswordInputType$1 = {
+type PasswordInputType = {
     onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     hidePopover?: boolean;
 };
-declare const PasswordInput: React__default.FC<PasswordInputType$1>;
+declare const PasswordInput: React__default.FC<PasswordInputType>;
 
 interface StatTypes extends React__default.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -1285,83 +1371,6 @@ type DocsSidebarType = {
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
-type ThirdPartyAuthTextsTypes = {
-    continueWithGoogle?: string;
-    continueWithTwitter?: string;
-    continueWithApple?: string;
-    continueWithMicrosoft?: string;
-    continueWithGithub?: string;
-    continueWithEmail?: string;
-    continueWithPhone?: string;
-};
-type BaseInputType = {
-    label?: string;
-    placeholder?: string;
-};
-type ValidationTexts = {
-    required?: string;
-    invalid?: string;
-};
-type TextInputType = ValidationTexts & {
-    label?: string;
-    placeholder?: string;
-};
-type PasswordInputType = BaseInputType & {
-    required?: string;
-    tooShort?: string;
-};
-type UsernameInputType = TextInputType & {
-    tooShort?: string;
-};
-type ConfirmInputType = BaseInputType & {
-    required?: string;
-    dontMatch?: string;
-};
-type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    email?: TextInputType;
-    username?: UsernameInputType;
-    phone?: TextInputType;
-    password?: PasswordInputType;
-    forgotPassword?: string;
-    newUserText?: string;
-    createAccount?: string;
-    loginText?: string;
-};
-type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    fullName?: BaseInputType;
-    email?: TextInputType;
-    username?: UsernameInputType;
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    userReference?: BaseInputType;
-    subscribeToNewsletter?: string;
-    termsRequired?: string;
-    refCode?: string;
-    refCodePlaceholder?: string;
-    existingUserText?: string;
-    termsText?: string;
-    iAcceptText?: string;
-    registerText?: string;
-    loginText?: string;
-};
-type ResetPasswordTextsTypes = {
-    email?: TextInputType;
-    emailSentText?: string;
-    registerText?: string;
-    resetPassword?: string;
-    dontHaveAccount?: string;
-    headTitle?: string;
-    headDescription?: string;
-};
-type NewPasswordTextsTypes = {
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    updatePassword?: string;
-    passwordChanged?: string;
-    dontHaveAccount?: string;
-    registerText?: string;
-};
-
 type LoginFormTypes = {
     /** Object containing text labels used throughout the form. */
     texts?: LoginFormTextsTypes;
@@ -1683,22 +1692,10 @@ declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
     plans: PricingCardProps[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
-    currentCycle: {
-        label: string;
-        value: string;
-    };
-    currentCurrency: {
-        label: string;
-        value: string;
-    };
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
@@ -1708,37 +1705,21 @@ type PricingPlansTypes = {
 };
 declare const PricingPlans: FC<PricingPlansTypes>;
 
-type PlanFeature = {
-    soon?: boolean;
-    included: boolean;
-    text: string;
-    hint?: string;
-};
 type ComparingPlansTypes = {
     plans: {
         direction?: DirectionType;
         features: PlanFeature[];
         price?: number;
-        texts?: {
-            title?: string;
-            subtitle?: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-            soon?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
+    onPlanClicked?: (e: any) => void;
     direction?: DirectionType;
     showButtons?: boolean;
     topPosition?: number;
@@ -1751,19 +1732,9 @@ type HorizontalPricingTypes = {
         direction?: DirectionType;
         currency?: string;
         cycleText?: string;
-        features?: {
-            included: boolean;
-            text: string;
-            description?: string;
-        }[];
+        features?: PlanFeature[];
         price?: number;
-        texts?: {
-            title: string;
-            subtitle: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
     currencies: {
@@ -1774,15 +1745,9 @@ type HorizontalPricingTypes = {
         label: string;
         value: string;
     }[];
+    currentCycle?: RadioOptionType;
+    currentCurrency?: RadioOptionType;
     onPlanClicked?: (e: any) => void;
-    currentCycle?: {
-        label: string;
-        value: string;
-    };
-    currentCurrency?: {
-        label: string;
-        value: string;
-    };
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;

package/dist/index.d.ts

@@ -38,6 +38,10 @@ type PositionType = "top" | "bottom" | "right" | "left";
 type SeverityType = "info" | "warning" | "error" | "success" | "none";
 type OrientationType = "vertical" | "horizontal";
 type RadiusType = "full" | "inherit" | "none";
+type RadioOptionType = {
+    label: string;
+    value: string;
+};
 
 type AdCardTypes = {
     orientation: OrientationType;
@@ -52,15 +56,103 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
+type PlanFeature = {
+    soon?: boolean;
+    included?: boolean;
+    text: string;
+    hint?: string;
+    hintSide?: PositionType;
+};
+
+type PricingPlanTexts = {
+    title?: string;
+    subtitle?: string;
+    buttonText?: string;
+    cycleText?: string;
+    currencyText?: string;
+    soon?: string;
+    recommended?: string;
+};
+type ThirdPartyAuthTextsTypes = {
+    continueWithGoogle?: string;
+    continueWithTwitter?: string;
+    continueWithApple?: string;
+    continueWithMicrosoft?: string;
+    continueWithGithub?: string;
+    continueWithEmail?: string;
+    continueWithPhone?: string;
+};
+type BaseInputType = {
+    label?: string;
+    placeholder?: string;
+};
+type ValidationTexts = {
+    required?: string;
+    invalid?: string;
+};
+type TextInputType = ValidationTexts & {
+    label?: string;
+    placeholder?: string;
+};
+type PasswordInputType$1 = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
+type UsernameInputType = TextInputType & {
+    tooShort?: string;
+};
+type ConfirmInputType = BaseInputType & {
+    required?: string;
+    dontMatch?: string;
+};
+type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    email?: TextInputType;
+    username?: UsernameInputType;
+    phone?: TextInputType;
+    password?: PasswordInputType$1;
+    forgotPassword?: string;
+    newUserText?: string;
+    createAccount?: string;
+    loginText?: string;
+};
+type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    fullName?: BaseInputType;
+    email?: TextInputType;
+    username?: UsernameInputType;
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    userReference?: BaseInputType;
+    subscribeToNewsletter?: string;
+    termsRequired?: string;
+    refCode?: string;
+    refCodePlaceholder?: string;
+    existingUserText?: string;
+    termsText?: string;
+    iAcceptText?: string;
+    registerText?: string;
+    loginText?: string;
+};
+type ResetPasswordTextsTypes = {
+    email?: TextInputType;
+    emailSentText?: string;
+    registerText?: string;
+    resetPassword?: string;
+    dontHaveAccount?: string;
+    headTitle?: string;
+    headDescription?: string;
+};
+type NewPasswordTextsTypes = {
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    updatePassword?: string;
+    passwordChanged?: string;
+    dontHaveAccount?: string;
+    registerText?: string;
+};
+
 type PricingCardProps = {
     direction?: DirectionType;
-    features: {
-        included: boolean;
-        soon?: boolean;
-        text: string;
-        hint?: string;
-        hintSide?: any;
-    }[];
+    features: PlanFeature[];
     endButton?: boolean;
     price: number;
     oldPrice?: number;
@@ -71,14 +163,7 @@ type PricingCardProps = {
     recommended?: boolean;
     size?: "small" | "medium" | "large";
     isLoading?: boolean;
-    texts: {
-        title: string;
-        subtitle?: string;
-        buttonText: string;
-        cycleText: string;
-        currencyText: string;
-        recommended?: string;
-    };
+    texts: PricingPlanTexts;
 };
 declare const PricingCard: FC<PricingCardProps>;
 
@@ -268,13 +353,14 @@ type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
     options: RadioOptionsTypes[];
-    width?: "default" | "full";
+    width?: "default" | "full" | "none";
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;
     helperText?: string;
     labelProps?: LabelProps;
     label?: string;
+    tabsContainerClassName?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -1040,11 +1126,11 @@ type PasswordInputIndicatorProps = {
     strength?: any;
 };
 declare const PasswordStrengthIndicator: React__default.FC<PasswordInputIndicatorProps>;
-type PasswordInputType$1 = {
+type PasswordInputType = {
     onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     hidePopover?: boolean;
 };
-declare const PasswordInput: React__default.FC<PasswordInputType$1>;
+declare const PasswordInput: React__default.FC<PasswordInputType>;
 
 interface StatTypes extends React__default.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -1285,83 +1371,6 @@ type DocsSidebarType = {
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
-type ThirdPartyAuthTextsTypes = {
-    continueWithGoogle?: string;
-    continueWithTwitter?: string;
-    continueWithApple?: string;
-    continueWithMicrosoft?: string;
-    continueWithGithub?: string;
-    continueWithEmail?: string;
-    continueWithPhone?: string;
-};
-type BaseInputType = {
-    label?: string;
-    placeholder?: string;
-};
-type ValidationTexts = {
-    required?: string;
-    invalid?: string;
-};
-type TextInputType = ValidationTexts & {
-    label?: string;
-    placeholder?: string;
-};
-type PasswordInputType = BaseInputType & {
-    required?: string;
-    tooShort?: string;
-};
-type UsernameInputType = TextInputType & {
-    tooShort?: string;
-};
-type ConfirmInputType = BaseInputType & {
-    required?: string;
-    dontMatch?: string;
-};
-type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    email?: TextInputType;
-    username?: UsernameInputType;
-    phone?: TextInputType;
-    password?: PasswordInputType;
-    forgotPassword?: string;
-    newUserText?: string;
-    createAccount?: string;
-    loginText?: string;
-};
-type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    fullName?: BaseInputType;
-    email?: TextInputType;
-    username?: UsernameInputType;
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    userReference?: BaseInputType;
-    subscribeToNewsletter?: string;
-    termsRequired?: string;
-    refCode?: string;
-    refCodePlaceholder?: string;
-    existingUserText?: string;
-    termsText?: string;
-    iAcceptText?: string;
-    registerText?: string;
-    loginText?: string;
-};
-type ResetPasswordTextsTypes = {
-    email?: TextInputType;
-    emailSentText?: string;
-    registerText?: string;
-    resetPassword?: string;
-    dontHaveAccount?: string;
-    headTitle?: string;
-    headDescription?: string;
-};
-type NewPasswordTextsTypes = {
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    updatePassword?: string;
-    passwordChanged?: string;
-    dontHaveAccount?: string;
-    registerText?: string;
-};
-
 type LoginFormTypes = {
     /** Object containing text labels used throughout the form. */
     texts?: LoginFormTextsTypes;
@@ -1683,22 +1692,10 @@ declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
     plans: PricingCardProps[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
-    currentCycle: {
-        label: string;
-        value: string;
-    };
-    currentCurrency: {
-        label: string;
-        value: string;
-    };
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
@@ -1708,37 +1705,21 @@ type PricingPlansTypes = {
 };
 declare const PricingPlans: FC<PricingPlansTypes>;
 
-type PlanFeature = {
-    soon?: boolean;
-    included: boolean;
-    text: string;
-    hint?: string;
-};
 type ComparingPlansTypes = {
     plans: {
         direction?: DirectionType;
         features: PlanFeature[];
         price?: number;
-        texts?: {
-            title?: string;
-            subtitle?: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-            soon?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
+    onPlanClicked?: (e: any) => void;
     direction?: DirectionType;
     showButtons?: boolean;
     topPosition?: number;
@@ -1751,19 +1732,9 @@ type HorizontalPricingTypes = {
         direction?: DirectionType;
         currency?: string;
         cycleText?: string;
-        features?: {
-            included: boolean;
-            text: string;
-            description?: string;
-        }[];
+        features?: PlanFeature[];
         price?: number;
-        texts?: {
-            title: string;
-            subtitle: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
     currencies: {
@@ -1774,15 +1745,9 @@ type HorizontalPricingTypes = {
         label: string;
         value: string;
     }[];
+    currentCycle?: RadioOptionType;
+    currentCurrency?: RadioOptionType;
     onPlanClicked?: (e: any) => void;
-    currentCycle?: {
-        label: string;
-        value: string;
-    };
-    currentCurrency?: {
-        label: string;
-        value: string;
-    };
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;

package/dist/index.js

@@ -3610,6 +3610,7 @@ var Radio = ({
   width = "default",
   orientation = "horizontal",
   labelProps,
+  tabsContainerClassName,
   ...props
 }) => {
   var _a, _b, _c;
@@ -3621,6 +3622,7 @@ var Radio = ({
     vertical: "hawa-flex hawa-flex-col"
   };
   let widthStyle = {
+    none: "",
     default: "hawa-max-w-fit",
     full: "hawa-w-full"
   };
@@ -3645,8 +3647,9 @@ var Radio = ({
           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",
+            orientationStyle[orientation],
             widthStyle[width],
-            orientationStyle[orientation]
+            tabsContainerClassName
           )
         },
         (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ import_react14.default.createElement(
@@ -11117,8 +11120,6 @@ var PricingPlans = ({
 // components/blocks/pricing/ComparingPlans.tsx
 var import_react70 = __toESM(require("react"));
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = (0, import_react70.useState)("sar");
-  const [currentCycle, setCurrentCycle] = (0, import_react70.useState)("monthly");
   const uniqueFeatures = Array.from(
     new Set(
       props.plans.flatMap(
@@ -11126,31 +11127,31 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  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(
+  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-flex-col hawa-gap-2 sm:hawa-flex-row hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
     Radio,
     {
+      tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
+      width: "none",
       design: "tabs",
-      defaultValue: currentCycle,
+      defaultValue: props.currentCycle.value,
       options: props.billingCycles,
       onChangeTab: (e) => {
         if (props.onCycleChange) {
           props.onCycleChange(e);
-        } else {
-          console.log("onCycleChange was not provided");
         }
       }
     }
   ), /* @__PURE__ */ import_react70.default.createElement(
     Radio,
     {
+      tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
+      width: "none",
       design: "tabs",
-      defaultValue: currentCurrency,
+      defaultValue: props.currentCurrency.value,
       options: props.currencies,
       onChangeTab: (e) => {
         if (props.onCurrencyChange) {
           props.onCurrencyChange(e);
-        } else {
-          console.log("onCurrencyChange was not provided");
         }
       }
     }
@@ -11158,7 +11159,7 @@ var ComparingPlans = (props) => {
     "div",
     {
       className: cn(
-        "hawa-sticky  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-sticky 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"
       ),
       style: {
@@ -11243,7 +11244,25 @@ var ComparingPlans = (props) => {
         key: i,
         className: "hawa-flex hawa-justify-center hawa-items-center"
       },
-      /* @__PURE__ */ import_react70.default.createElement(Button, { className: "hawa-max-w-xs hawa-w-full" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+      /* @__PURE__ */ import_react70.default.createElement(
+        Button,
+        {
+          className: "hawa-max-w-xs hawa-w-full",
+          onClick: () => {
+            var _a2, _b;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b = props.currentCycle) == null ? void 0 : _b.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          }
+        },
+        ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started"
+      )
     );
   })));
 };

package/dist/index.mjs

@@ -3377,6 +3377,7 @@ var Radio = ({
   width = "default",
   orientation = "horizontal",
   labelProps,
+  tabsContainerClassName,
   ...props
 }) => {
   var _a, _b, _c;
@@ -3388,6 +3389,7 @@ var Radio = ({
     vertical: "hawa-flex hawa-flex-col"
   };
   let widthStyle = {
+    none: "",
     default: "hawa-max-w-fit",
     full: "hawa-w-full"
   };
@@ -3412,8 +3414,9 @@ var Radio = ({
           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",
+            orientationStyle[orientation],
             widthStyle[width],
-            orientationStyle[orientation]
+            tabsContainerClassName
           )
         },
         (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React20.createElement(
@@ -10899,10 +10902,8 @@ var PricingPlans = ({
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React96, { useState as useState36 } from "react";
+import React96 from "react";
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState36("sar");
-  const [currentCycle, setCurrentCycle] = useState36("monthly");
   const uniqueFeatures = Array.from(
     new Set(
       props.plans.flatMap(
@@ -10910,31 +10911,31 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  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(
+  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-flex-col hawa-gap-2 sm:hawa-flex-row hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
     Radio,
     {
+      tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
+      width: "none",
       design: "tabs",
-      defaultValue: currentCycle,
+      defaultValue: props.currentCycle.value,
       options: props.billingCycles,
       onChangeTab: (e) => {
         if (props.onCycleChange) {
           props.onCycleChange(e);
-        } else {
-          console.log("onCycleChange was not provided");
         }
       }
     }
   ), /* @__PURE__ */ React96.createElement(
     Radio,
     {
+      tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
+      width: "none",
       design: "tabs",
-      defaultValue: currentCurrency,
+      defaultValue: props.currentCurrency.value,
       options: props.currencies,
       onChangeTab: (e) => {
         if (props.onCurrencyChange) {
           props.onCurrencyChange(e);
-        } else {
-          console.log("onCurrencyChange was not provided");
         }
       }
     }
@@ -10942,7 +10943,7 @@ var ComparingPlans = (props) => {
     "div",
     {
       className: cn(
-        "hawa-sticky  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-sticky 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"
       ),
       style: {
@@ -11027,7 +11028,25 @@ var ComparingPlans = (props) => {
         key: i,
         className: "hawa-flex hawa-justify-center hawa-items-center"
       },
-      /* @__PURE__ */ React96.createElement(Button, { className: "hawa-max-w-xs hawa-w-full" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+      /* @__PURE__ */ React96.createElement(
+        Button,
+        {
+          className: "hawa-max-w-xs hawa-w-full",
+          onClick: () => {
+            var _a2, _b;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b = props.currentCycle) == null ? void 0 : _b.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          }
+        },
+        ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started"
+      )
     );
   })));
 };

package/package.json

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