@sikka/hawa 0.0.70 → 0.0.74

package/src/elements/HawaSwitch.js

@@ -4,16 +4,16 @@ export const HawaSwitch = (props) => {
   return (
     <label
       for="default-toggle"
-      class="inline-flex relative items-center cursor-pointer"
+      className="inline-flex relative items-center cursor-pointer"
     >
       <input
         type="checkbox"
         value=""
         id="default-toggle"
-        class="sr-only peer"
+        className="sr-only peer"
       />
-      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+      <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
         {props.text}
       </span>
     </label>

package/src/elements/HawaTable.js

@@ -7,17 +7,17 @@ export const HawaTable = (props) => {
   return (
     <>
       <div>
-        <div class="overflow-x-auto relative rounded-xl">
-          <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <div className="overflow-x-auto relative rounded-xl">
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
               <tr>
                 {props.columns.map((col, i) => (
-                  <th key={i} scope="col" class="py-3 px-6">
+                  <th key={i} scope="col" className="py-3 px-6">
                     {col}
                   </th>
                 ))}
                 {props.actions && (
-                  <th scope="col" class="py-3 px-6">
+                  <th scope="col" className="py-3 px-6">
                     actions
                   </th>
                 )}
@@ -27,7 +27,7 @@ export const HawaTable = (props) => {
               {props.rows ? (
                 props.rows.map((singleRow, j) => (
                   <tr
-                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                    className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
                     key={j}
                   >
                     {singleRow.map((r, i) => {
@@ -35,13 +35,13 @@ export const HawaTable = (props) => {
                         return (
                           <th
                             scope="row"
-                            class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                            className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                           >
                             {r}{" "}
                           </th>
                         );
                       } else {
-                        return <td class="py-4 px-6">{r}</td>;
+                        return <td className="py-4 px-6">{r}</td>;
                       }
                     })}
                     {props.actions && (

package/src/elements/HawaTextField.js

@@ -13,7 +13,7 @@ export const HawaTextField = (props) => {
         <textarea
           id="message"
           rows="4"
-          class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder="Your message..."
         ></textarea>
       ) : (
@@ -25,7 +25,7 @@ export const HawaTextField = (props) => {
 
       {props.helperText && (
         <p className="mt-2 text-sm text-red-600 dark:text-red-500">
-          {/* <span class="font-medium">Oh, snapp!</span> */}
+          {/* <span className="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>
       )}

package/src/elements/HawaTooltip.js

@@ -1,15 +1,14 @@
 import React from "react";
-import "flowbite";
 
 export const HawaTooltip = (props) => {
   return (
     <div
       id={props.tooltipID}
       role="tooltip"
-      class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
+      className="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
     >
       {props.content}
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div className="tooltip-arrow" data-popper-arrow></div>
     </div>
   );
 };

package/src/layout/HawaLayout.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "flowbite";
 import HawaDrawerItem from "../elements/HawaDrawerItem";
 
 const MenuButton = () => {
@@ -10,12 +9,12 @@ const MenuButton = () => {
       data-drawer-show="drawer-navigation"
       aria-controls="drawer-navigation"
       type="button"
-      class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+      className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
     >
-      <span class="sr-only">Open main menu</span>
+      <span className="sr-only">Open main menu</span>
       <svg
         aria-hidden="true"
-        class="w-6 h-6"
+        className="w-6 h-6"
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -33,28 +32,28 @@ const ProfileDropdown = (props) => {
   return (
     <div
       id="userDropdown"
-      class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+      className="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
       data-popper-reference-hidden=""
       data-popper-escaped=""
       data-popper-placement="bottom-start"
       // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
     >
-      <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+      <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
         <div>{props.username}</div>
-        <div class="font-medium truncate">{props.userEmail}</div>
+        <div className="font-medium truncate">{props.userEmail}</div>
       </div>
       <ul
-        class="py-1 text-sm text-gray-700 dark:text-gray-200"
+        className="py-1 text-sm text-gray-700 dark:text-gray-200"
         aria-labelledby="avatarButton"
       >
         {props.profileItems.map((it) => {
           return <ProfileItem text={it.text} link={it.slug} />;
         })}
       </ul>
-      <div class="py-1">
+      <div className="py-1">
         <a
           href="#"
-          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
         >
           Sign out
         </a>
@@ -66,23 +65,23 @@ const DrawerContent = (props) => {
   return (
     <div
       id="drawer-navigation"
-      class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
+      className="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
       tabindex="-1"
       aria-labelledby="drawer-navigation-label"
     >
-      <div href={props.logoHref} class="flex items-center">
+      <div href={props.logoHref} className="flex items-center">
         <img
           src={
             "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
           }
           // src={props.logoLink}
-          class="h-9"
+          className="h-9"
           alt="Flowbite Logo"
         />
       </div>
       <CloseButton />
-      <div class="py-4 overflow-y-auto">
-        <ul class="space-y-2">
+      <div className="py-4 overflow-y-auto">
+        <ul className="space-y-2">
           {props.drawerItems.map((item, i) => {
             return (
               <HawaDrawerItem action={item.action} key={i} text={item.text} />
@@ -116,7 +115,7 @@ const CloseButton = () => {
     >
       <svg
         aria-hidden="true"
-        class="w-5 h-5"
+        className="w-5 h-5"
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -134,18 +133,18 @@ export const HawaLayout = (props) => {
   return (
     <div className="font-plex">
       <div>
-        <nav class="border-gray-200 rounded dark:bg-gray-900">
-          <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
-            {/* <div href={props.logoHref} class="flex items-center">
-              <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
+        <nav className="border-gray-200 rounded dark:bg-gray-900">
+          <div className="flex p-3 flex-row-reverse items-center justify-between w-full">
+            {/* <div href={props.logoHref} className="flex items-center">
+              <img src={props.logoLink} className="h-9" alt="Flowbite Logo" />
             </div> */}
             <div
               data-dropdown-toggle="userDropdown"
               data-dropdown-placement="bottom-start"
-              class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
+              className="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
             >
               <svg
-                class="absolute -left-1 w-12 h-12 text-gray-400"
+                className="absolute -left-1 w-12 h-12 text-gray-400"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -158,14 +157,14 @@ export const HawaLayout = (props) => {
               </svg>
             </div>
 
-            {/* <div href={props.logoHref} class="flex items-center">
+            {/* <div href={props.logoHref} className="flex items-center">
               <img
                 src={
                   // "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
                   "https://qawaim-images.s3-ap-southeast-1.amazonaws.com/614580f79706137eab618399"
                 }
                 // src={props.logoLink}
-                class="h-12"
+                className="h-12"
                 alt="Flowbite Logo"
               />
             </div> */}
@@ -177,7 +176,7 @@ export const HawaLayout = (props) => {
                 type="button"
                 data-dropdown-toggle="userDropdown"
                 data-dropdown-placement="bottom-start"
-                class="w-10 h-10 rounded-full cursor-pointer"
+                className="w-10 h-10 rounded-full cursor-pointer"
                 src="/docs/images/people/profile-picture-5.jpg"
                 alt="User dropdown"
               /> */}

package/src/styles.css

@@ -1928,14 +1928,14 @@ input:checked + .toggle-bg {
 body {
   font-family: "IBM Plex Sans Arabic";
 }
-/* <div class="react-select-container">
-  <div class="react-select__control">
-    <div class="react-select__value-container">...</div>
-    <div class="react-select__indicators">...</div>
+/* <div className="react-select-container">
+  <div className="react-select__control">
+    <div className="react-select__value-container">...</div>
+    <div className="react-select__indicators">...</div>
   </div>
-  <div class="react-select__menu">
-    <div class="react-select__menu-list">
-      <div class="react-select__option">...</div>
+  <div className="react-select__menu">
+    <div className="react-select__menu-list">
+      <div className="react-select__option">...</div>
     </div>
   </div>
 </div> */

package/src/tailwind.css

@@ -5,14 +5,14 @@
 body {
   font-family: "IBM Plex Sans Arabic";
 }
-/* <div class="react-select-container">
-  <div class="react-select__control">
-    <div class="react-select__value-container">...</div>
-    <div class="react-select__indicators">...</div>
+/* <div className="react-select-container">
+  <div className="react-select__control">
+    <div className="react-select__value-container">...</div>
+    <div className="react-select__indicators">...</div>
   </div>
-  <div class="react-select__menu">
-    <div class="react-select__menu-list">
-      <div class="react-select__option">...</div>
+  <div className="react-select__menu">
+    <div className="react-select__menu-list">
+      <div className="react-select__option">...</div>
     </div>
   </div>
 </div> */