@sikka/hawa 0.27.5-next → 0.27.7-next

package/dist/phoneInput/index.mjs

@@ -1823,6 +1823,7 @@ function Skeleton({
   className,
   content,
   animation = "pulse",
+  fade,
   ...props
 }) {
   const animationStyles = {
@@ -1830,12 +1831,19 @@ function Skeleton({
     pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
     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%)]"
+  };
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cn(
         animationStyles[animation],
         content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+        fade && fadeStyle[fade],
         className
       ),
       ...props