@sikka/hawa 0.0.169 → 0.0.170

package/package.json

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

package/src/elements/HawaButton.tsx

@@ -108,7 +108,7 @@ export function HawaButton({
         type={props.type}
         {...props}
       >
-        {!isLoading ? children : <HawaSpinner />}
+        {!isLoading ? children : <HawaSpinner size="button" />}
       </button>
       {tooltip && (
         <HawaTooltip

package/src/elements/HawaSpinner.tsx

@@ -1,10 +1,29 @@
+import clsx from "clsx"
 import React from "react"
+// TODO: Add different sizes
+type SpinnerTypes = {
+  size?: "button" | "sm" | "normal" | "lg" | "xl"
+}
 
-type SpinnerTypes = {}
-export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = (props) => {
+export const HawaSpinner: React.FunctionComponent<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="h-4 w-4 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
+      <div
+        className={clsx(
+          sizeStyles[size],
+          "animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"
+        )}
+      ></div>
     </div>
   )
 }

package/src/elements/HawaTable.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { HawaButton } from "./HawaButton"
 import { FaTrash, FaExclamationCircle, FaPen } from "react-icons/fa"
 import clsx from "clsx"
-// import { HiOutlineEye } from "react-icons/hi2"
+
 type TableTypes = {
   lang?: any
   columns: any[string]
@@ -12,12 +12,14 @@ type TableTypes = {
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
+  highlightFirst?: boolean
   customColor?: string
 }
 
 export const HawaTable: React.FunctionComponent<TableTypes> = ({
   size = "normal",
   customColor = "white",
+  highlightFirst = false,
   ...props
 }) => {
   let isArabic = props.lang === "ar"
@@ -27,7 +29,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     small: "px-3 py-1",
   }
   return (
-    <div className="relative overflow-x-visible rounded-xl">
+    <div className="relative overflow-x-clip rounded-lg">
       <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
         <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>
@@ -49,8 +51,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
               <tr
                 key={j}
                 className={clsx(
-                  "border-b dark:border-gray-700 dark:bg-gray-800",
-                  "bg-" + customColor
+                  "dark:border-gray-700 dark:bg-gray-800",
+                  "bg-" + customColor,
+                  j == props.rows.length - 1 ? "" : "border-b"
                 )}
               >
                 {singleRow.map((r: any, i: any) => {
@@ -61,7 +64,8 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                         scope="row"
                         className={clsx(
                           sizeStyles[size],
-                          "whitespace-nowrap font-medium text-gray-900 dark:text-white"
+                          "whitespace-nowrap  dark:text-white",
+                          highlightFirst ? "font-bold" : "font-normal"
                         )}
                       >
                         {r}{" "}

package/src/styles.css

@@ -880,6 +880,9 @@ video {
 .h-4 {
   height: 1rem;
 }
+.h-24 {
+  height: 6rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -1204,9 +1207,6 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
-.overflow-x-visible {
-  overflow-x: visible;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;