@sikka/hawa 0.0.270 → 0.0.273

package/dist/styles.css

@@ -398,6 +398,13 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)
@@ -1218,6 +1225,9 @@ video {
   min-width: -moz-min-content;
   min-width: min-content;
 }
+.max-w-2xl {
+  max-width: 42rem;
+}
 .max-w-2xs {
   max-width: 250px;
 }
@@ -1240,6 +1250,9 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.max-w-screen-sm {
+  max-width: 640px;
+}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1304,6 +1317,21 @@ video {
 .transform-gpu {
   transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes bounce {
+
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
 @keyframes spin {
 
   to {
@@ -1335,6 +1363,10 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
+.columns-1 {
+  -moz-columns: 1;
+       columns: 1;
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1404,9 +1436,15 @@ video {
 .gap-20 {
   gap: 5rem;
 }
+.gap-24 {
+  gap: 6rem;
+}
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-8 {
   gap: 2rem;
 }
@@ -1430,6 +1468,11 @@ video {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1501,9 +1544,6 @@ video {
 .rounded-\[30px\] {
   border-radius: 30px;
 }
-.rounded-\[3px\] {
-  border-radius: 3px;
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1672,10 +1712,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1706,10 +1742,6 @@ video {
 .border-b-buttonPrimary-500 {
   border-bottom-color: var(--button-primary-500);
 }
-.border-t-white {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1734,10 +1766,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
 .bg-buttonPrimary-300 {
   background-color: var(--button-primary-300);
 }
@@ -1747,6 +1775,9 @@ video {
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
 }
+.bg-card {
+  background-color: hsl(var(--card));
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -1982,6 +2013,10 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -2075,6 +2110,9 @@ video {
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
+.text-\[0\.875rem\] {
+  font-size: 0.875rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -2156,6 +2194,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2171,6 +2213,9 @@ video {
 .text-buttonPrimary-500 {
   color: var(--button-primary-500);
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2207,6 +2252,21 @@ video {
   --tw-text-opacity: 1;
   color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
 }
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+.text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity));
+}
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -2362,12 +2422,68 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.delay-100 {
+  transition-delay: 100ms;
+}
+.delay-200 {
+  transition-delay: 200ms;
+}
+.delay-300 {
+  transition-delay: 300ms;
+}
+.duration-1000 {
+  transition-duration: 1000ms;
+}
 .duration-300 {
   transition-duration: 300ms;
 }
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
+@keyframes enter {
+
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+@keyframes exit {
+
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+.animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.fade-in {
+  --tw-enter-opacity: 0;
+}
+.duration-1000 {
+  animation-duration: 1000ms;
+}
+.duration-300 {
+  animation-duration: 300ms;
+}
+.delay-100 {
+  animation-delay: 100ms;
+}
+.delay-200 {
+  animation-delay: 200ms;
+}
+.delay-300 {
+  animation-delay: 300ms;
+}
+.repeat-infinite {
+  animation-iteration-count: infinite;
+}
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -2658,6 +2774,10 @@ body {
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.peer:checked ~ .peer-checked\:border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
 .peer:checked ~ .peer-checked\:border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
@@ -2783,9 +2903,24 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+:is([dir="ltr"] .ltr\:left-0) {
+  left: 0px;
+}
+:is([dir="ltr"] .ltr\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="ltr"] .ltr\:pl-\[0px\]) {
+  padding-left: 0px;
+}
 :is([dir="ltr"] .ltr\:pl-\[25px\]) {
   padding-left: 25px;
 }
+:is([dir="ltr"] .ltr\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:right-0) {
+  right: 0px;
+}
 :is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
@@ -2802,8 +2937,17 @@ body {
 :is([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
-:is([dir="rtl"] .rtl\:pr-\[0px\]) {
-  padding-right: 0px;
+:is([dir="rtl"] .rtl\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="rtl"] .rtl\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[5px\]) {
+  padding-right: 5px;
 }
 :is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
@@ -3010,11 +3154,30 @@ body {
 }
 @media (min-width: 640px) {
 
+  .sm\:columns-2 {
+    -moz-columns: 2;
+         columns: 2;
+  }
+
+  .sm\:gap-8 {
+    gap: 2rem;
+  }
+
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .sm\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 
+  .sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .sm\:after\:inline-block::after {
     content: var(--tw-content);
     display: inline-block;
@@ -3071,6 +3234,11 @@ body {
     max-width: 36rem;
   }
 
+  .md\:columns-3 {
+    -moz-columns: 3;
+         columns: 3;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -3121,6 +3289,11 @@ body {
   .lg\:max-w-7xl {
     max-width: 80rem;
   }
+
+  .lg\:columns-4 {
+    -moz-columns: 4;
+         columns: 4;
+  }
 }
 @media (min-width: 1280px) {
 
@@ -3130,3 +3303,12 @@ body {
     margin-right: 2.5rem;
   }
 }
+.\[\&\>\*\:not\(\:first-child\)\]\:mt-8>*:not(:first-child) {
+  margin-top: 2rem;
+}
+.peer:checked ~ .peer-checked\:\[\&_\.active\]\:block .active {
+  display: block;
+}
+.peer:checked ~ .peer-checked\:\[\&_\.default\]\:hidden .default {
+  display: none;
+}

package/es/blocks/Pricing/HorizontalPricing.d.ts

@@ -0,0 +1,47 @@
+import { FC } from "react";
+type HorizontalPricingTypes = {
+    plans: [
+        {
+            direction: "rtl" | "ltr";
+            features: [{
+                included: boolean;
+                text: string;
+            }];
+            price: number;
+            texts: {
+                title: string;
+                subtitle: string;
+                buttonText: string;
+                cycleText: string;
+                currencyText: string;
+            };
+            size: "small" | "medium" | "large";
+        }
+    ];
+    currencies: [
+        {
+            label: string;
+            value: string;
+        }
+    ];
+    billingCycles: [
+        {
+            label: string;
+            value: string;
+        }
+    ];
+    onPlanClicked?: (e: any) => void;
+    currentCycle: {
+        label: string;
+        value: string;
+    };
+    currentCurrency: {
+        label: string;
+        value: string;
+    };
+    onCycleChange?: (e: any) => void;
+    onCurrencyChange?: (e: any) => void;
+    direction?: "rtl" | "ltr";
+};
+export declare const HorizontalPricing: FC<HorizontalPricingTypes>;
+export {};

package/es/blocks/Pricing/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./PricingPlans";
 export * from "./ComparingPlans";
+export * from "./HorizontalPricing";

package/es/elements/HawaLandingCard.d.ts

@@ -12,6 +12,7 @@ type LandingCardTypes = {
         linkText?: string;
     };
     buttonLink?: string;
+    className?: any;
 };
 export declare const HawaLandingCard: FC<LandingCardTypes>;
 export {};

package/es/elements/HawaLoading.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+type LoadingTypes = {
+    size?: "button" | "sm" | "normal" | "lg" | "xl";
+    design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
+    color?: any;
+};
+export declare const HawaLoading: FC<LoadingTypes>;
+export {};

package/es/elements/HawaRadio.d.ts

@@ -2,16 +2,13 @@ import { FC } from "react";
 type RadioTypes = {
     orientation?: "vertical" | "horizontal";
     design?: "default" | "tabs" | "cards" | "bordered";
-    options?: [
-        {
-            value: any;
-            label: any;
-            disabled?: any;
-            sublabel?: any;
-            beforeIcon?: any;
-            afterIcon?: any;
-        }
-    ];
+    options?: {
+        value: any;
+        label: any;
+        disabled?: any;
+        sublabel?: any;
+        icon?: any;
+    }[];
     onChangeTab?: any;
     defaultValue?: any;
 };

package/es/elements/HawaSnackbar.d.ts

@@ -3,6 +3,7 @@ type THawaSnackBar = {
     severity: "info" | "warning" | "error" | "success" | "none";
     title: string;
     description: string;
+    onCloseSnakbar?: () => void;
     duration?: number;
     position?: "top-left" | "top-center" | "top-right" | "bottom-right" | "bottom-center" | "bottom-left";
     actions?: [

package/es/elements/HawaStats.d.ts

@@ -4,7 +4,8 @@ type StatTypes = {
     color?: string;
     number?: string;
     helperText?: string;
-    variant?: "plain" | "contained" | "outlined" | "brutalist" | "dropshadow";
+    icon?: any;
+    variant?: "default" | "plain" | "contained" | "outlined" | "brutalist" | "dropshadow";
     width?: "full" | "min" | "normal";
     isLoading?: boolean;
     handleClick?: () => void;

package/es/elements/index.d.ts

@@ -23,7 +23,7 @@ export * from "./HawaCopyrights";
 export * from "./HawaStepper";
 export * from "./HawaStats";
 export * from "./HawaCodeBlock";
-export * from "./HawaSpinner";
+export * from "./HawaLoading";
 export * from "./HawaRadio";
 export * from "./HawaDatepicker";
 export * from "./DragDropImages";