@sikka/hawa 0.0.143 → 0.0.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.143",
+  "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/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/styles.css

@@ -2029,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));
@@ -2053,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.64f67baa.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>