@sikka/hawa 0.0.78 → 0.0.80

package/package.json

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

package/src/blocks/AuthForms/SignInForm.js

@@ -74,15 +74,17 @@ export const SignInForm = (props) => {
           {props.texts.forgotPasswordText}
         </div>
         <HawaButton fullWidth type="submit" text={props.texts.signInText} />{" "}
-        <div className="font-semibold p-3 text-center text-sm">
-          {props.texts.newUserText}{" "}
-          <span
-            onClick={props.handleRouteToSignUp}
-            className="text-blue-600 cursor-pointer"
-          >
-            {props.texts.signUpText}
-          </span>
-        </div>
+        {!props.withoutSignUp && (
+          <div className="font-semibold p-3 text-center text-sm">
+            {props.texts.newUserText}{" "}
+            <span
+              onClick={props.handleRouteToSignUp}
+              className="text-blue-600 cursor-pointer"
+            >
+              {props.texts.signUpText}
+            </span>
+          </div>
+        )}
       </form>
       {/* <Divider /> */}
       {/* <div className="divide-y divide-gray-900"></div> */}
@@ -141,5 +143,8 @@ SignInForm.propTypes = {
   handleRouteToSignUp: PropTypes.func,
   handleGoogleSignIn: PropTypes.func,
   handleGithubSignIn: PropTypes.func,
-  handleTwitterSignIn: PropTypes.func
+  handleTwitterSignIn: PropTypes.func,
+  handleForgotPassword: PropTypes.func,
+  
+  withoutSignUp: PropTypes.bool
 };

package/src/blocks/AuthForms/SignInPhone.js

@@ -31,6 +31,7 @@ export const SignInPhone = (props) => {
             />
           )}
         />
+        <div className="mt-2"></div>
         <HawaButton fullWidth type="submit" text={props.SignInButtonText} />
       </form>
     </HawaContainer>

package/src/elements/HawaPhoneInput.js

@@ -85,9 +85,7 @@ export default function HawaPhoneInput({ preferredCountry }) {
           setSelectedCountry(newValue);
         }}
       />
-      <div>
-        <input className="bg-gray-50 border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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 border-l-0" />
-      </div>
+      <input className="bg-gray-50 border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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 border-l-0" />
     </div>
   );
 }

package/src/elements/HawaRange.js

@@ -6,7 +6,7 @@ export const HawaRange = (props) => {
     <div>
       {props.label && (
         <label
-        htmlFor="default-range"
+          htmlFor="default-range"
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         >
           {props.label}
@@ -17,7 +17,8 @@ export const HawaRange = (props) => {
         <input
           id="default-range"
           type="range"
-          value="50"
+          value={props.value}
+          onChange={props.handleChange}
           className="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
         />
         <div className="ml-2">{props.endElement}</div>{" "}

package/src/elements/HawaTabs.js

@@ -11,7 +11,7 @@ export const HawaTabs = (props) => {
     <div>
       <ul className="bg-gray-100 w-fit rounded-lg flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         {props.options.map((opt) => (
-          <li className="mr-2">
+          <li >
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaTooltip.js

@@ -2,13 +2,18 @@ import React from "react";
 
 export const HawaTooltip = (props) => {
   return (
-    <div
-      id={props.tooltipID}
-      role="tooltip"
-      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 className="tooltip-arrow" data-popper-arrow></div>
+    <div>
+      <div
+        id={props.tooltipID}
+        role="tooltip"
+        // className="inline-block absolute py-2 px-3"
+        className="inline-block opacity-0 absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700"
+      >
+        {props.content}
+        <div className="tooltip-arrow" data-popper-arrow></div>
+      </div>
+
+      <div onMouseEnter={() => console.log("hovering")}>{props.children}</div>
     </div>
   );
 };

package/src/styles.css

@@ -557,9 +557,6 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
-.invisible {
-  visibility: hidden;
-}
 .collapse {
   visibility: collapse;
 }