@sikka/hawa 0.0.271 → 0.0.273

package/src/styles.css

@@ -1225,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;
 }
@@ -1247,6 +1250,9 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.max-w-screen-sm {
+  max-width: 640px;
+}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1311,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 {
@@ -1342,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));
 }
@@ -1411,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;
 }
@@ -1437,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));
@@ -1676,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));
@@ -1710,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));
@@ -1985,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;
@@ -2078,6 +2110,9 @@ video {
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
+.text-\[0\.875rem\] {
+  font-size: 0.875rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -2159,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));
@@ -2216,6 +2255,18 @@ video {
 .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));
@@ -2371,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;
@@ -2667,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));
@@ -3043,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;
@@ -3104,6 +3234,11 @@ body {
     max-width: 36rem;
   }
 
+  .md\:columns-3 {
+    -moz-columns: 3;
+         columns: 3;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -3154,6 +3289,11 @@ body {
   .lg\:max-w-7xl {
     max-width: 80rem;
   }
+
+  .lg\:columns-4 {
+    -moz-columns: 4;
+         columns: 4;
+  }
 }
 @media (min-width: 1280px) {
 
@@ -3163,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/tailwind.config.js

@@ -59,6 +59,17 @@ module.exports = {
             height: "0rem"
           }
         },
+        blink: {
+          "0%": {
+            opacity: "0.2"
+          },
+          "50%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: " 0.2"
+          }
+        },
         slideDownAndFade: {
           from: { opacity: 0, transform: "translateY(-2px)" },
           to: { opacity: 1, transform: "translateY(0)" }
@@ -77,6 +88,8 @@ module.exports = {
         }
       },
       animation: {
+        blink: "blink 2s infinite ease-in-out",
+
         collapse: "collapse",
         expandDown: "expandDown 500ms ease-in-out",
         expandUp: "expandUp 100ms ease-in-out",
@@ -95,11 +108,11 @@ module.exports = {
       colors: {
         muted: {
           DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          foreground: "hsl(var(--muted-foreground))"
         },
         card: {
           DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          foreground: "hsl(var(--card-foreground))"
         },
         // #f6f5fe
         // #edebfd lighter
@@ -112,7 +125,7 @@ module.exports = {
         // #2e218d
         // #251b73
 
-        blackA:{
+        blackA: {
           1: "hsla(0, 0%, 0%, 0.012)",
           2: "hsla(0, 0%, 0%, 0.024)",
           3: "hsla(0, 0%, 0%, 0.055)",
@@ -124,9 +137,9 @@ module.exports = {
           9: "hsla(0, 0%, 0%, 0.447)",
           10: "hsla(0, 0%, 0%, 0.498)",
           11: "hsla(0, 0%, 0%, 0.608)",
-          12: "hsla(0, 0%, 0%, 0.875)",
+          12: "hsla(0, 0%, 0%, 0.875)"
         },
-        mauve:{
+        mauve: {
           1: "hsl(300, 26.0%, 99.0%)",
           2: "hsl(270, 20.0%, 98.0%)",
           3: "hsl(267, 13.8%, 95.3%)",
@@ -138,9 +151,9 @@ module.exports = {
           9: "hsl(252, 6.0%, 57.3%)",
           10: "hsl(250, 5.0%, 52.3%)",
           11: "hsl(252, 5.0%, 40.7%)",
-          12: "hsl(260, 10.0%, 13.5%)",
+          12: "hsl(260, 10.0%, 13.5%)"
         },
-        violet:{
+        violet: {
           1: "hsl(255, 65.0%, 99.4%)",
           2: "hsl(252, 100%, 99.0%)",
           3: "hsl(252, 96.9%, 97.4%)",
@@ -152,7 +165,7 @@ module.exports = {
           9: "hsl(252, 56.0%, 57.5%)",
           10: "hsl(251, 48.1%, 53.5%)",
           11: "hsl(250, 43.0%, 48.0%)",
-          12: "hsl(250, 43.0%, 26.0%)",
+          12: "hsl(250, 43.0%, 26.0%)"
         },
 
         buttonPrimary: {
@@ -180,5 +193,5 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [require("tailwindcss-animate")]
 };

package/es/elements/HawaSpinner.d.ts

@@ -1,6 +0,0 @@
-import { FC } from "react";
-type SpinnerTypes = {
-    size?: "button" | "sm" | "normal" | "lg" | "xl";
-};
-export declare const HawaSpinner: FC<SpinnerTypes>;
-export {};

package/lib/elements/HawaSpinner.d.ts

@@ -1,6 +0,0 @@
-import { FC } from "react";
-type SpinnerTypes = {
-    size?: "button" | "sm" | "normal" | "lg" | "xl";
-};
-export declare const HawaSpinner: FC<SpinnerTypes>;
-export {};

package/src/elements/HawaSpinner.tsx

@@ -1,42 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type SpinnerTypes = {
-  size?: "button" | "sm" | "normal" | "lg" | "xl"
-}
-
-export const HawaSpinner: FC<SpinnerTypes> = ({ size = "sm", ...props }) => {
-  let sizeStyles = {
-    button: "h-4 w-4",
-    sm: "h-6 w-6",
-    normal: "h-8 w-8",
-    lg: "h-14 w-14",
-    xl: "h-24 w-24",
-  }
-  return (
-    <div className="flex flex-row gap-x-3">
-      {/* <div
-        className={clsx(
-          sizeStyles[size],
-          "animate-spin rounded-full border-4 border-gray-400 border-t-white text-white"
-        )}
-      ></div> */}
-
-      <div aria-label="Loading..." role="status">
-        <svg
-          className={clsx(sizeStyles[size], "animate-spin")}
-          viewBox="3 3 18 18"
-        >
-          <path
-            className="fill-gray-200"
-            d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-          ></path>
-          <path
-            className="fill-buttonPrimary-500"
-            d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
-          ></path>
-        </svg>
-      </div>
-    </div>
-  )
-}