@sikka/hawa 0.0.167 → 0.0.169

package/README.md

@@ -17,7 +17,6 @@ npm install --save @sikka/hawa
 
 # Roadmap
 
-- [ ] Drag and drop tool to create a layout of boxes
 - Organize code
 
 </br>

package/dist/styles.css

@@ -569,9 +569,6 @@ video {
 .left-0 {
   left: 0px;
 }
-.top-10 {
-  top: 2.5rem;
-}
 .right-2 {
   right: 0.5rem;
 }
@@ -611,8 +608,17 @@ video {
 .left-3 {
   left: 0.75rem;
 }
-.top-5 {
-  top: 1.25rem;
+.-top-10 {
+  top: -2.5rem;
+}
+.-top-2 {
+  top: -0.5rem;
+}
+.right-8 {
+  right: 2rem;
+}
+.left-8 {
+  left: 2rem;
 }
 .top-3 {
   top: 0.75rem;
@@ -659,12 +665,12 @@ video {
 .top-auto {
   top: auto;
 }
-.z-10 {
-  z-index: 10;
-}
 .z-50 {
   z-index: 50;
 }
+.z-10 {
+  z-index: 10;
+}
 .-z-10 {
   z-index: -10;
 }
@@ -686,10 +692,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -714,6 +716,10 @@ video {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -844,9 +850,6 @@ video {
   height: -moz-fit-content;
   height: fit-content;
 }
-.h-32 {
-  height: 8rem;
-}
 .h-full {
   height: 100%;
 }
@@ -877,6 +880,9 @@ video {
 .h-4 {
   height: 1rem;
 }
+.h-32 {
+  height: 8rem;
+}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -895,6 +901,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.max-h-full {
+  max-height: 100%;
+}
 .max-h-56 {
   max-height: 14rem;
 }
@@ -981,14 +990,14 @@ video {
 .w-12 {
   width: 3rem;
 }
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
 .min-w-min {
   min-width: -moz-min-content;
   min-width: min-content;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1020,6 +1029,9 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.origin-top {
+  transform-origin: top;
+}
 .translate-y-1\/2 {
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1032,6 +1044,10 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-\[100px\] {
+  --tw-translate-x: 100px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[3rem\] {
   --tw-translate-x: 3rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1052,12 +1068,12 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
-.cursor-default {
-  cursor: default;
-}
 .cursor-pointer {
   cursor: pointer;
 }
+.cursor-default {
+  cursor: default;
+}
 .resize {
   resize: both;
 }
@@ -1188,6 +1204,9 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
+.overflow-x-visible {
+  overflow-x: visible;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1202,12 +1221,12 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -1370,14 +1389,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .border-buttonPrimary-default {
   border-color: var(--button-primary);
 }
@@ -1564,14 +1583,18 @@ video {
   padding-top: 0px;
   padding-bottom: 0px;
 }
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1791,12 +1814,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.opacity-100 {
-  opacity: 1;
-}
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1859,11 +1882,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

package/es/blocks/Misc/Newsletter.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type TNewsletter = {
+    variant?: "outlined" | "contained" | "neobrutalism";
+    texts: {
+        wantToStayUpdated: string;
+        subscribeToNewsletter: string;
+    };
+};
+export declare const Newsletter: React.FunctionComponent<TNewsletter>;
+export {};

package/es/blocks/Misc/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./NotFound";
 export * from "./EmptyState";
+export * from "./Newsletter";

package/es/elements/DragDropImages.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 type DragDropImagesTypes = {
     label?: string;
-    texts: any;
     files: [File];
     setFiles: any;
     setDeletedFiles: any;
@@ -10,6 +9,12 @@ type DragDropImagesTypes = {
     onAcceptedFiles: any;
     showPreview: any;
     onDeleteFile: any;
+    texts: {
+        clickHereToUpload: string;
+        maxFileSize: string;
+        tooManyFiles: string;
+        fileTooLarge: string;
+    };
     onClearFiles: any;
     maxSize: number;
     errorMessages: string;

package/es/elements/HawaAlert.d.ts

@@ -1,15 +1,10 @@
 import React from "react";
-declare let severities: {
-    info: string;
-    warning: string;
-    error: string;
-    success: string;
-};
 type AlertTypes = {
-    severity: keyof typeof severities;
+    severity: "info" | "warning" | "error" | "success";
     title?: any;
     variant?: "normal" | "solid" | "top-accent" | "left-accent" | "right-accent" | "bottom-accent";
     text: any;
+    direction?: "rtl" | "ltr";
     hideIcon?: any;
     actions?: [
         {

package/es/elements/HawaButton.d.ts

@@ -1,12 +1,15 @@
-import * as React from "react";
+import React from "react";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "contained" | "outlined";
+    buttonID?: any;
     color?: "default" | "primary" | "secondary";
     width?: "full" | "normal" | "half";
-    size?: "small" | "medium" | "large" | "noPadding";
+    size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full";
     margins?: "none" | "1" | "2" | "3" | "4";
     tooltip?: string;
+    tooltipSize?: "normal" | "small" | "large";
+    tooltipPosition?: "right" | "left" | "bottom" | "top";
     isLoading?: boolean;
 }
-export declare function HawaButton({ className, variant, color, size, width, disabled, isLoading, margins, tooltip, children, ...props }: ButtonProps): JSX.Element;
+export declare function HawaButton({ className, variant, color, size, width, disabled, isLoading, tooltipSize, tooltipPosition, margins, tooltip, children, buttonID, ...props }: ButtonProps): JSX.Element;
 export {};

package/es/elements/HawaTable.d.ts

@@ -2,12 +2,16 @@ import React from "react";
 type TableTypes = {
     lang?: any;
     columns: any[string];
-    actions?: any;
+    actions?: [{
+        type: "view" | "update" | "delete";
+        onClick: (e: any) => void;
+    }];
     rows?: any[any];
     noDataText?: any;
     handleActionClick?: any;
     end?: any;
     size?: "normal" | "small";
+    customColor?: string;
 };
 export declare const HawaTable: React.FunctionComponent<TableTypes>;
 export {};

package/es/elements/HawaTooltip.d.ts

@@ -1,7 +1,12 @@
 import React from "react";
 type THawaToolTip = {
-    children: React.ReactElement;
-    content: string;
+    children?: React.ReactElement;
+    content?: string;
+    btnHovered?: any;
+    buttonRef?: any;
+    buttonID?: any;
+    size?: "normal" | "small" | "large";
+    position?: "left" | "right" | "top" | "bottom";
 };
 export declare const HawaTooltip: React.FunctionComponent<THawaToolTip>;
 export {};

package/es/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from "./useDiscloser";
+export * from "./useHover";

package/es/hooks/useHover.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function useHover(): (boolean | import("react").MutableRefObject<any>)[];
+export default useHover;

package/es/hooks/useScrollPosition.d.ts

@@ -0,0 +1,2 @@
+declare function useScrollPosition(ref: any): number;
+export default useScrollPosition;