@sikka/hawa 0.0.142 → 0.0.144

package/package.json

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

package/src/elements/DragDropImages.tsx

@@ -10,6 +10,7 @@ const thumbsContainer = {
   marginTop: 10,
 }
 type DragDropImagesTypes = {
+  label?: string
   texts: any
   files: [File]
   setFiles: any
@@ -37,6 +38,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   onClearFiles,
   maxSize,
   errorMessages,
+  label,
 }) =>
   // props
   {
@@ -154,55 +156,62 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     console.log("error", fileRejections)
 
     return (
-      <div
-        // variant="drop-area"
-        {...getRootProps({
-          style: { backgroundColor: isDragActive ? "white" : "inherit" },
-        })}
-        // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
-        className="flex flex-col justify-center rounded-xl border border-dashed border-black"
-      >
-        <input {...getInputProps()} />
-        <div className="p-1 text-center">
-          Click here or drop files here to upload
-        </div>
-        <div className="p-1 text-center">Max file size is {max}</div>
-        <div className="flex justify-center ">
-          {acceptedFiles.length > 0 && (
-            <HawaButton
-              // style={{ color: "black" }}
-              onClick={(e) => {
-                e.stopPropagation()
-                onClearFiles(acceptedFiles)
+      <div>
+        {label && (
+          <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+            {label}
+          </div>
+        )}
+        <div
+          // variant="drop-area"
+          {...getRootProps({
+            style: { backgroundColor: isDragActive ? "white" : "inherit" },
+          })}
+          // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
+          className="mb-2 flex flex-col justify-center rounded-xl border border-dashed border-black"
+        >
+          <input {...getInputProps()} />
+          <div className="p-1 text-center">
+            Click here or drop files here to upload
+          </div>
+          <div className="p-1 text-center">Max file size is {max}</div>
+          <div className="flex justify-center ">
+            {acceptedFiles.length > 0 && (
+              <HawaButton
+                // style={{ color: "black" }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onClearFiles(acceptedFiles)
+                }}
+              >
+                Clear All
+              </HawaButton>
+            )}
+          </div>
+          {thumbs && showPreview ? (
+            <aside
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                // marginTop: 10,
               }}
+              className="rounded-lg border-red-500"
             >
-              Clear All
-            </HawaButton>
-          )}
-        </div>
-        {thumbs && showPreview ? (
-          <aside
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              flexWrap: "wrap",
-              // marginTop: 10,
-            }}
-            className="rounded-lg border-red-500"
-          >
-            {thumbs}
-          </aside>
-        ) : null}
-        <div className="px-2">
-          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-            <HawaAlert text={texts.tooManyFiles} severity="error" />
-          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-            <HawaAlert text={texts.fileTooLarge} severity="error" />
-          ) : (
-            errs
-          )}
+              {thumbs}
+            </aside>
+          ) : null}
+          <div className="px-2">
+            {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+              <HawaAlert text={texts.tooManyFiles} severity="error" />
+            ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+              <HawaAlert text={texts.fileTooLarge} severity="error" />
+            ) : (
+              errs
+            )}
+          </div>
+          {}
         </div>
-        {}
       </div>
     )
   }

package/src/elements/HawaMenu.tsx

@@ -98,7 +98,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

package/src/elements/HawaPhoneInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 import Countries from "../countries"
 import Select from "react-select"
 

package/src/elements/HawaTextField.tsx

@@ -54,7 +54,13 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           id="message"
           rows={4}
           className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-          placeholder="Your message..."
+          onChange={props.onChange}
+          type={props.type}
+          aria-label={props.label}
+          placeholder={props.placeholder}
+          defaultValue={props.defaultValue}
+          value={props.value}
+          {...props}
         />
       ) : props.type === "search" ? (
         <div className="relative">

package/src/styles.css

@@ -608,6 +608,10 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -2025,6 +2029,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
+.dark .dark\:text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2049,10 +2057,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
-.dark .dark\:text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
 .dark .dark\:text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.f7aca500.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.f25e7d6a.iframe.bundle.js"></script></body></html>