@sikka/hawa 0.27.7-next → 0.27.9-next

package/dist/elements/index.js

@@ -528,6 +528,7 @@ var Tooltip = ({
   open,
   content,
   children,
+  disabled,
   defaultOpen,
   onOpenChange,
   triggerProps,
@@ -545,7 +546,7 @@ var Tooltip = ({
     /* @__PURE__ */ import_react2.default.createElement(
       TooltipPrimitive.Root,
       {
-        open,
+        open: !disabled && open,
         defaultOpen,
         onOpenChange,
         ...props
@@ -580,10 +581,10 @@ function Skeleton({
     shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
   };
   const fadeStyle = {
-    bottom: "[mask-image:linear-gradient(to_bottom,#D1D4DC_50%,transparent_100%)]",
-    top: "[mask-image:linear-gradient(to_top,#D1D4DC_50%,transparent_100%)]",
-    right: "[mask-image:linear-gradient(to_right,#D1D4DC_50%,transparent_100%)]",
-    left: "[mask-image:linear-gradient(to_left,#D1D4DC_50%,transparent_100%)]"
+    bottom: "hawa-mask-fade-bottom",
+    top: "hawa-mask-fade-top",
+    right: "hawa-mask-fade-right",
+    left: "hawa-mask-fade-left "
   };
   return /* @__PURE__ */ import_react3.default.createElement(
     "div",
@@ -2372,7 +2373,7 @@ var Input = (0, import_react9.forwardRef)(
         )
       },
       props.label && /* @__PURE__ */ import_react9.default.createElement(Label2, { ...labelProps }, props.label),
-      props.isLoading ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react9.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.prefixText && /* @__PURE__ */ import_react9.default.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.prefixText), props.isLoading ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react9.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react9.default.createElement(
         "div",
         {
           className: cn(
@@ -2380,7 +2381,7 @@ var Input = (0, import_react9.forwardRef)(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react9.default.createElement(
+      ), /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react9.default.createElement(
         "div",
         {
           className: cn(
@@ -2448,7 +2449,7 @@ var Input = (0, import_react9.forwardRef)(
         props.value ? String(props.value).length : 0,
         "/",
         props.maxLength
-      )))
+      ))))
     );
   }
 );

package/dist/elements/index.mjs

@@ -27,7 +27,7 @@ import {
   TabsTrigger,
   Textarea,
   UncheckMark
-} from "../chunk-KLVQRGD5.mjs";
+} from "../chunk-YHED4XVA.mjs";
 import {
   Sheet,
   SheetClose,
@@ -39,7 +39,7 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger
-} from "../chunk-JOONPMGB.mjs";
+} from "../chunk-QDNT7A7D.mjs";
 import {
   Button,
   Card,
@@ -73,7 +73,7 @@ import {
   buttonVariants,
   calculateLuminance,
   cn
-} from "../chunk-VH3BSHXE.mjs";
+} from "../chunk-H6RXLCDX.mjs";
 import {
   __require
 } from "../chunk-ZFXKCRJC.mjs";

package/dist/index.css

@@ -586,6 +586,22 @@ video {
     text-decoration: underline;
     color: var(--button-primary-700);
   }
+.hawa-mask-fade-bottom {
+    -webkit-mask-image: linear-gradient(to bottom, #d1d4dc, transparent);
+    mask-image: linear-gradient(to bottom, #d1d4dc, transparent);
+  }
+.hawa-mask-fade-top {
+    -webkit-mask-image: linear-gradient(to top, #d1d4dc, transparent);
+    mask-image: linear-gradient(to top, #d1d4dc, transparent);
+  }
+.hawa-mask-fade-right {
+    -webkit-mask-image: linear-gradient(to right, #d1d4dc, transparent);
+    mask-image: linear-gradient(to right, #d1d4dc, transparent);
+  }
+.hawa-mask-fade-left {
+    -webkit-mask-image: linear-gradient(to left, #d1d4dc, transparent);
+    mask-image: linear-gradient(to left, #d1d4dc, transparent);
+  }
 input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -1387,6 +1403,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[1px\] {
   height: 1px;
 }
+.hawa-h-\[200px\] {
+  height: 200px;
+}
 .hawa-h-\[20px\] {
   height: 20px;
 }
@@ -3035,22 +3054,6 @@ input[type="number"]::-webkit-inner-spin-button,
     --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
     box-shadow: var(--tw-shadow);
   }
-.\[mask-image\:linear-gradient\(to_bottom\2c \#D1D4DC_50\%\2c transparent_100\%\)\] {
-  -webkit-mask-image: linear-gradient(to bottom,#D1D4DC 50%,transparent 100%);
-          mask-image: linear-gradient(to bottom,#D1D4DC 50%,transparent 100%);
-}
-.\[mask-image\:linear-gradient\(to_left\2c \#D1D4DC_50\%\2c transparent_100\%\)\] {
-  -webkit-mask-image: linear-gradient(to left,#D1D4DC 50%,transparent 100%);
-          mask-image: linear-gradient(to left,#D1D4DC 50%,transparent 100%);
-}
-.\[mask-image\:linear-gradient\(to_right\2c \#D1D4DC_50\%\2c transparent_100\%\)\] {
-  -webkit-mask-image: linear-gradient(to right,#D1D4DC 50%,transparent 100%);
-          mask-image: linear-gradient(to right,#D1D4DC 50%,transparent 100%);
-}
-.\[mask-image\:linear-gradient\(to_top\2c \#D1D4DC_50\%\2c transparent_100\%\)\] {
-  -webkit-mask-image: linear-gradient(to top,#D1D4DC 50%,transparent 100%);
-          mask-image: linear-gradient(to top,#D1D4DC 50%,transparent 100%);
-}
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }

package/dist/index.d.mts

@@ -80,6 +80,8 @@ type TooltipTypes = {
     delayDuration?: any;
     /** Size of the tooltip. */
     size?: "default" | "small" | "large";
+    /** Disables the tooltip. */
+    disabled?: boolean;
     triggerProps?: TooltipPrimitive.TooltipTriggerProps;
     contentProps?: TooltipPrimitive.TooltipContentProps;
     providerProps?: TooltipPrimitive.TooltipProviderProps;
@@ -646,6 +648,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     countPosition?: "top" | "bottom" | "center";
     popup?: boolean;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
@@ -676,6 +679,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     countPosition?: "top" | "bottom" | "center" | undefined;
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type CommandProps = React$1.ComponentPropsWithoutRef<typeof Command$1>;
@@ -1311,7 +1315,8 @@ type PricingCardProps = {
     currentPlan?: boolean;
     recommended?: boolean;
     size?: "small" | "medium" | "large";
-    isLoading?: boolean;
+    isLoadingPrice?: boolean;
+    isLoadingCard?: boolean;
     texts: PricingPlanTexts;
 };
 
@@ -1757,6 +1762,7 @@ type ContactFormProps = {
 declare const ContactForm: React__default.FC<ContactFormProps>;
 
 type PricingPlansTypes = {
+    loadingCards?: boolean;
     plans: PricingCardProps[];
     currencies: RadioOptionType[];
     billingCycles: RadioOptionType[];

package/dist/index.d.ts

@@ -80,6 +80,8 @@ type TooltipTypes = {
     delayDuration?: any;
     /** Size of the tooltip. */
     size?: "default" | "small" | "large";
+    /** Disables the tooltip. */
+    disabled?: boolean;
     triggerProps?: TooltipPrimitive.TooltipTriggerProps;
     contentProps?: TooltipPrimitive.TooltipContentProps;
     providerProps?: TooltipPrimitive.TooltipProviderProps;
@@ -646,6 +648,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     countPosition?: "top" | "bottom" | "center";
     popup?: boolean;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
@@ -676,6 +679,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     countPosition?: "top" | "bottom" | "center" | undefined;
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type CommandProps = React$1.ComponentPropsWithoutRef<typeof Command$1>;
@@ -1311,7 +1315,8 @@ type PricingCardProps = {
     currentPlan?: boolean;
     recommended?: boolean;
     size?: "small" | "medium" | "large";
-    isLoading?: boolean;
+    isLoadingPrice?: boolean;
+    isLoadingCard?: boolean;
     texts: PricingPlanTexts;
 };
 
@@ -1757,6 +1762,7 @@ type ContactFormProps = {
 declare const ContactForm: React__default.FC<ContactFormProps>;
 
 type PricingPlansTypes = {
+    loadingCards?: boolean;
     plans: PricingCardProps[];
     currencies: RadioOptionType[];
     billingCycles: RadioOptionType[];

package/dist/index.js

@@ -594,6 +594,7 @@ var Tooltip = ({
   open,
   content,
   children,
+  disabled,
   defaultOpen,
   onOpenChange,
   triggerProps,
@@ -611,7 +612,7 @@ var Tooltip = ({
     /* @__PURE__ */ import_react2.default.createElement(
       TooltipPrimitive.Root,
       {
-        open,
+        open: !disabled && open,
         defaultOpen,
         onOpenChange,
         ...props
@@ -646,10 +647,10 @@ function Skeleton({
     shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
   };
   const fadeStyle = {
-    bottom: "[mask-image:linear-gradient(to_bottom,#D1D4DC_50%,transparent_100%)]",
-    top: "[mask-image:linear-gradient(to_top,#D1D4DC_50%,transparent_100%)]",
-    right: "[mask-image:linear-gradient(to_right,#D1D4DC_50%,transparent_100%)]",
-    left: "[mask-image:linear-gradient(to_left,#D1D4DC_50%,transparent_100%)]"
+    bottom: "hawa-mask-fade-bottom",
+    top: "hawa-mask-fade-top",
+    right: "hawa-mask-fade-right",
+    left: "hawa-mask-fade-left "
   };
   return /* @__PURE__ */ import_react3.default.createElement(
     "div",
@@ -2438,7 +2439,7 @@ var Input = (0, import_react9.forwardRef)(
         )
       },
       props.label && /* @__PURE__ */ import_react9.default.createElement(Label2, { ...labelProps }, props.label),
-      props.isLoading ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react9.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.prefixText && /* @__PURE__ */ import_react9.default.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.prefixText), props.isLoading ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react9.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react9.default.createElement(
         "div",
         {
           className: cn(
@@ -2446,7 +2447,7 @@ var Input = (0, import_react9.forwardRef)(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react9.default.createElement(
+      ), /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react9.default.createElement(
         "div",
         {
           className: cn(
@@ -2514,7 +2515,7 @@ var Input = (0, import_react9.forwardRef)(
         props.value ? String(props.value).length : 0,
         "/",
         props.maxLength
-      )))
+      ))))
     );
   }
 );
@@ -11174,7 +11175,13 @@ var PricingCard = ({
     medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
     large: "hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
   };
-  return /* @__PURE__ */ import_react67.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, props.isLoadingCard ? /* @__PURE__ */ import_react67.default.createElement(
+    Skeleton,
+    {
+      className: cn(cardSizes[size], "hawa-h-[200px]"),
+      fade: "bottom"
+    }
+  ) : /* @__PURE__ */ import_react67.default.createElement(
     Card,
     {
       dir: direction,
@@ -11193,7 +11200,7 @@ var PricingCard = ({
       },
       ((_a = props.texts) == null ? void 0 : _a.recommended) || "RECOMMENDED"
     ),
-    /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ import_react67.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_react67.default.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ import_react67.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_react67.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react67.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react67.default.createElement("div", { className: " hawa-flex hawa-items-baseline  hawa-text-primary" }, props.isLoading ? /* @__PURE__ */ import_react67.default.createElement(Skeleton, { className: "hawa-h-[48px] hawa-w-full hawa-max-w-[200px] hawa-p-0 " }) : /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, props.noPrice ? /* @__PURE__ */ import_react67.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_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-end   hawa-gap-2" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-ml-1 hawa-whitespace-nowrap hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ import_react67.default.createElement(Separator2, null), /* @__PURE__ */ import_react67.default.createElement(
+    /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ import_react67.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_react67.default.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ import_react67.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_react67.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react67.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react67.default.createElement("div", { className: " hawa-flex hawa-items-baseline  hawa-text-primary" }, props.isLoadingPrice ? /* @__PURE__ */ import_react67.default.createElement(Skeleton, { className: "hawa-h-[48px] hawa-w-full hawa-max-w-[200px] hawa-p-0 " }) : /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, props.noPrice ? /* @__PURE__ */ import_react67.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_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-end   hawa-gap-2" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ import_react67.default.createElement("span", { className: "hawa-ml-1 hawa-whitespace-nowrap hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ import_react67.default.createElement(Separator2, null), /* @__PURE__ */ import_react67.default.createElement(
       "div",
       {
         className: cn(
@@ -11237,22 +11244,29 @@ var PricingCard = ({
               size: "small"
             }
           ))),
-          feature.hint && /* @__PURE__ */ import_react67.default.createElement(Tooltip, { content: feature.hint, side: feature.hintSide }, /* @__PURE__ */ import_react67.default.createElement(
-            "svg",
+          feature.hint && /* @__PURE__ */ import_react67.default.createElement(
+            Tooltip,
             {
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
+              content: feature.hint,
+              side: feature.hintSide
             },
-            /* @__PURE__ */ import_react67.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ import_react67.default.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-            /* @__PURE__ */ import_react67.default.createElement("path", { d: "M12 17h.01" })
-          ))
+            /* @__PURE__ */ import_react67.default.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              },
+              /* @__PURE__ */ import_react67.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ import_react67.default.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+              /* @__PURE__ */ import_react67.default.createElement("path", { d: "M12 17h.01" })
+            )
+          )
         );
       })),
       /* @__PURE__ */ import_react67.default.createElement(
@@ -11265,7 +11279,7 @@ var PricingCard = ({
         (_i = props.texts) == null ? void 0 : _i.buttonText
       )
     ))
-  );
+  ));
 };
 
 // blocks/cards/ItemCard.tsx
@@ -11448,6 +11462,7 @@ var PricingPlans = ({
             }
           },
           ...plan,
+          isLoadingCard: props.loadingCards || plan.isLoadingCard,
           price: plan.price,
           texts: {
             ...plan.texts,

package/dist/index.mjs

@@ -361,6 +361,7 @@ var Tooltip = ({
   open,
   content,
   children,
+  disabled,
   defaultOpen,
   onOpenChange,
   triggerProps,
@@ -378,7 +379,7 @@ var Tooltip = ({
     /* @__PURE__ */ React3.createElement(
       TooltipPrimitive.Root,
       {
-        open,
+        open: !disabled && open,
         defaultOpen,
         onOpenChange,
         ...props
@@ -413,10 +414,10 @@ function Skeleton({
     shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
   };
   const fadeStyle = {
-    bottom: "[mask-image:linear-gradient(to_bottom,#D1D4DC_50%,transparent_100%)]",
-    top: "[mask-image:linear-gradient(to_top,#D1D4DC_50%,transparent_100%)]",
-    right: "[mask-image:linear-gradient(to_right,#D1D4DC_50%,transparent_100%)]",
-    left: "[mask-image:linear-gradient(to_left,#D1D4DC_50%,transparent_100%)]"
+    bottom: "hawa-mask-fade-bottom",
+    top: "hawa-mask-fade-top",
+    right: "hawa-mask-fade-right",
+    left: "hawa-mask-fade-left "
   };
   return /* @__PURE__ */ React4.createElement(
     "div",
@@ -2213,7 +2214,7 @@ var Input = forwardRef12(
         )
       },
       props.label && /* @__PURE__ */ React20.createElement(Label2, { ...labelProps }, props.label),
-      props.isLoading ? /* @__PURE__ */ React20.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React20.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.prefixText && /* @__PURE__ */ React20.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.prefixText), props.isLoading ? /* @__PURE__ */ React20.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React20.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React20.createElement(
         "div",
         {
           className: cn(
@@ -2221,7 +2222,7 @@ var Input = forwardRef12(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ React20.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React20.createElement(
+      ), /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ React20.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ React20.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React20.createElement(
         "div",
         {
           className: cn(
@@ -2289,7 +2290,7 @@ var Input = forwardRef12(
         props.value ? String(props.value).length : 0,
         "/",
         props.maxLength
-      )))
+      ))))
     );
   }
 );
@@ -10956,7 +10957,13 @@ var PricingCard = ({
     medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
     large: "hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
   };
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, props.isLoadingCard ? /* @__PURE__ */ React94.createElement(
+    Skeleton,
+    {
+      className: cn(cardSizes[size], "hawa-h-[200px]"),
+      fade: "bottom"
+    }
+  ) : /* @__PURE__ */ React94.createElement(
     Card,
     {
       dir: direction,
@@ -10975,7 +10982,7 @@ var PricingCard = ({
       },
       ((_a = props.texts) == null ? void 0 : _a.recommended) || "RECOMMENDED"
     ),
-    /* @__PURE__ */ React94.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React94.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React94.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ React94.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, (_c = props.texts) == null ? void 0 : _c.subtitle), props.discount && /* @__PURE__ */ React94.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React94.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React94.createElement("div", { className: " hawa-flex hawa-items-baseline  hawa-text-primary" }, props.isLoading ? /* @__PURE__ */ React94.createElement(Skeleton, { className: "hawa-h-[48px] hawa-w-full hawa-max-w-[200px] hawa-p-0 " }) : /* @__PURE__ */ React94.createElement(React94.Fragment, null, props.noPrice ? /* @__PURE__ */ React94.createElement("div", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, ((_d = props.texts) == null ? void 0 : _d.priceless) || "Contact Us") : /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-end   hawa-gap-2" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ React94.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-ml-1 hawa-whitespace-nowrap hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ React94.createElement(Separator2, null), /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React94.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React94.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React94.createElement("span", null, (_b = props.texts) == null ? void 0 : _b.title), /* @__PURE__ */ React94.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, (_c = props.texts) == null ? void 0 : _c.subtitle), props.discount && /* @__PURE__ */ React94.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React94.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React94.createElement("div", { className: " hawa-flex hawa-items-baseline  hawa-text-primary" }, props.isLoadingPrice ? /* @__PURE__ */ React94.createElement(Skeleton, { className: "hawa-h-[48px] hawa-w-full hawa-max-w-[200px] hawa-p-0 " }) : /* @__PURE__ */ React94.createElement(React94.Fragment, null, props.noPrice ? /* @__PURE__ */ React94.createElement("div", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, ((_d = props.texts) == null ? void 0 : _d.priceless) || "Contact Us") : /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-end   hawa-gap-2" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ React94.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + ((_e = props.texts) == null ? void 0 : _e.currencyText)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, (_f = props.texts) == null ? void 0 : _f.currencyText)), /* @__PURE__ */ React94.createElement("span", { className: "hawa-ml-1 hawa-whitespace-nowrap hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", (_g = props.texts) == null ? void 0 : _g.cycleText)))), endButton && /* @__PURE__ */ React94.createElement(Separator2, null), /* @__PURE__ */ React94.createElement(
       "div",
       {
         className: cn(
@@ -11019,22 +11026,29 @@ var PricingCard = ({
               size: "small"
             }
           ))),
-          feature.hint && /* @__PURE__ */ React94.createElement(Tooltip, { content: feature.hint, side: feature.hintSide }, /* @__PURE__ */ React94.createElement(
-            "svg",
+          feature.hint && /* @__PURE__ */ React94.createElement(
+            Tooltip,
             {
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
+              content: feature.hint,
+              side: feature.hintSide
             },
-            /* @__PURE__ */ React94.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ React94.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-            /* @__PURE__ */ React94.createElement("path", { d: "M12 17h.01" })
-          ))
+            /* @__PURE__ */ React94.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              },
+              /* @__PURE__ */ React94.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ React94.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+              /* @__PURE__ */ React94.createElement("path", { d: "M12 17h.01" })
+            )
+          )
         );
       })),
       /* @__PURE__ */ React94.createElement(
@@ -11047,7 +11061,7 @@ var PricingCard = ({
         (_i = props.texts) == null ? void 0 : _i.buttonText
       )
     ))
-  );
+  ));
 };
 
 // blocks/cards/ItemCard.tsx
@@ -11230,6 +11244,7 @@ var PricingPlans = ({
             }
           },
           ...plan,
+          isLoadingCard: props.loadingCards || plan.isLoadingCard,
           price: plan.price,
           texts: {
             ...plan.texts,

package/dist/input/index.d.mts

@@ -38,6 +38,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     countPosition?: "top" | "bottom" | "center";
     popup?: boolean;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
@@ -68,6 +69,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     countPosition?: "top" | "bottom" | "center" | undefined;
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { Input, type TextFieldTypes };

package/dist/input/index.d.ts

@@ -38,6 +38,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     countPosition?: "top" | "bottom" | "center";
     popup?: boolean;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
@@ -68,6 +69,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     countPosition?: "top" | "bottom" | "center" | undefined;
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
+    prefixText?: any;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { Input, type TextFieldTypes };

package/dist/input/index.js

@@ -75,6 +75,7 @@ var Tooltip = ({
   open,
   content,
   children,
+  disabled,
   defaultOpen,
   onOpenChange,
   triggerProps,
@@ -92,7 +93,7 @@ var Tooltip = ({
     /* @__PURE__ */ import_react.default.createElement(
       TooltipPrimitive.Root,
       {
-        open,
+        open: !disabled && open,
         defaultOpen,
         onOpenChange,
         ...props
@@ -169,10 +170,10 @@ function Skeleton({
     shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
   };
   const fadeStyle = {
-    bottom: "[mask-image:linear-gradient(to_bottom,#D1D4DC_50%,transparent_100%)]",
-    top: "[mask-image:linear-gradient(to_top,#D1D4DC_50%,transparent_100%)]",
-    right: "[mask-image:linear-gradient(to_right,#D1D4DC_50%,transparent_100%)]",
-    left: "[mask-image:linear-gradient(to_left,#D1D4DC_50%,transparent_100%)]"
+    bottom: "hawa-mask-fade-bottom",
+    top: "hawa-mask-fade-top",
+    right: "hawa-mask-fade-right",
+    left: "hawa-mask-fade-left "
   };
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
@@ -229,7 +230,7 @@ var Input = (0, import_react3.forwardRef)(
         )
       },
       props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label),
-      props.isLoading ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react3.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.prefixText && /* @__PURE__ */ import_react3.default.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.prefixText), props.isLoading ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react3.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react3.default.createElement(
         "div",
         {
           className: cn(
@@ -237,7 +238,7 @@ var Input = (0, import_react3.forwardRef)(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react3.default.createElement(
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react3.default.createElement(
         "div",
         {
           className: cn(
@@ -305,7 +306,7 @@ var Input = (0, import_react3.forwardRef)(
         props.value ? String(props.value).length : 0,
         "/",
         props.maxLength
-      )))
+      ))))
     );
   }
 );