@sikka/hawa 0.0.117 → 0.0.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaButton.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import clsx from "clsx"
+import { HawaSpinner } from "./HawaSpinner"
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
@@ -108,9 +109,10 @@ export function HawaButton({
         {!isLoading ? (
           children
         ) : (
-          <div className="flex flex-row gap-x-3">
-            <div className="h-5 w-5 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
-          </div>
+          // <div className="flex flex-row gap-x-3">
+          //   <div className="h-5 w-5 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
+          // </div>
+          <HawaSpinner />
         )}
       </button>
       {tooltip && (

package/src/elements/HawaSpinner.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+type SpinnerTypes = {}
+export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = (props) => {
+  return (
+    <div className="flex flex-row gap-x-3">
+      <div className="h-4 w-4 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
+    </div>
+  )
+}

package/src/elements/HawaStats.tsx

@@ -1,11 +1,14 @@
 import React from "react"
 import clsx from "clsx"
+import { HawaSpinner } from "./HawaSpinner"
 
 type StatTypes = {
   label?: string
   number?: string
   helperText?: string
   variant?: "plain" | "contained" | "outlined"
+  isLoading?: boolean
+  handleClick?: () => void
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
   let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm"
@@ -16,9 +19,16 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
     outlined: "ring-2 w-fit",
   }
   return (
-    <div className={clsx(defaultStyle, statStyles[props.variant])}>
+    <div
+      onClick={props.handleClick}
+      className={clsx(defaultStyle, statStyles[props.variant])}
+    >
       <div>{props.label}</div>
-      <div className="text-2xl font-bold">{props.number}</div>
+      {props.isLoading ? (
+        <HawaSpinner />
+      ) : (
+        <div className="text-2xl font-bold">{props.number}</div>
+      )}{" "}
       <div className="text-xs">{props.helperText}</div>
     </div>
   )

package/src/elements/index.ts

@@ -25,6 +25,7 @@ export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
 export * from "./Breadcrumb"
 export * from "./HawaStats"
+export * from "./HawaSpinner"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -752,6 +752,9 @@ video {
 .h-2 {
   height: 0.5rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -814,6 +817,9 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-11 {
   width: 2.75rem;
 }