@sikka/hawa 0.0.269 → 0.0.271

package/.github/workflows/hawa-publish-push.yml

@@ -5,7 +5,7 @@ name: Hawa Publish Package Push
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
@@ -15,15 +15,14 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 16
-      - run: | 
-         if [ -e 'package-lock.json' ]; then 
-          npm ci
-         else 
-          npm install
-         fi
-         npm run build-storybook
-         npm run deploy-storybook -- --ci
-        env : 
+      - run: |
+          if [ -e 'package-lock.json' ]; then 
+           npm ci
+          else 
+           npm install
+          fi
+          npm run build-storybook
+        env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
 
   publish-npm:
@@ -35,12 +34,12 @@ jobs:
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org/
-      - run: | 
-         if [ -e 'package-lock.json' ]; then 
-          npm ci
-         else 
-          npm install
-         fi
+      - run: |
+          if [ -e 'package-lock.json' ]; then 
+           npm ci
+          else 
+           npm install
+          fi
       - run: npm run build-lib
       - run: npm run build:styles
       - run: npm run generate-css

package/dist/styles.css

@@ -398,6 +398,13 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)
@@ -787,6 +794,9 @@ video {
 .m-5 {
   margin: 1.25rem;
 }
+.m-\[5px\] {
+  margin: 5px;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -944,6 +954,9 @@ video {
 .inline-block {
   display: inline-block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }
@@ -1034,6 +1047,9 @@ video {
 .h-\[2\.36rem\] {
   height: 2.36rem;
 }
+.h-\[25px\] {
+  height: 25px;
+}
 .h-\[32px\] {
   height: 32px;
 }
@@ -1154,6 +1170,9 @@ video {
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[25px\] {
+  width: 25px;
+}
 .w-\[32px\] {
   width: 32px;
 }
@@ -1186,6 +1205,9 @@ video {
 .w-screen {
   width: 100vw;
 }
+.min-w-\[220px\] {
+  min-width: 220px;
+}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1442,9 +1464,6 @@ video {
 .self-center {
   align-self: center;
 }
-.justify-self-end {
-  justify-self: end;
-}
 .overflow-auto {
   overflow: auto;
 }
@@ -1535,6 +1554,10 @@ video {
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
 }
+.rounded-t-inner {
+  border-top-left-radius: var(--border-radius-inner);
+  border-top-right-radius: var(--border-radius-inner);
+}
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1724,6 +1747,9 @@ video {
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
 }
+.bg-card {
+  background-color: hsl(var(--card));
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -1817,6 +1843,10 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-violet-6 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 77.8% 89.4% / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1848,6 +1878,9 @@ video {
 .fill-gray-200 {
   fill: #e5e7eb;
 }
+.fill-white {
+  fill: #fff;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1885,6 +1918,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-\[5px\] {
+  padding: 5px;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1917,6 +1953,10 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-\[5px\] {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1977,6 +2017,12 @@ video {
 .pl-6 {
   padding-left: 1.5rem;
 }
+.pl-\[20px\] {
+  padding-left: 20px;
+}
+.pl-\[25px\] {
+  padding-left: 25px;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2038,6 +2084,9 @@ video {
 .text-\[11px\] {
   font-size: 11px;
 }
+.text-\[13px\] {
+  font-size: 13px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2094,6 +2143,9 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-\[25px\] {
+  line-height: 25px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -2122,6 +2174,9 @@ video {
 .text-buttonPrimary-500 {
   color: var(--button-primary-500);
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2154,6 +2209,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.text-mauve-11 {
+  --tw-text-opacity: 1;
+  color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
+}
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -2174,6 +2236,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
 }
+.text-violet-11 {
+  --tw-text-opacity: 1;
+  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2215,6 +2281,11 @@ video {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0px_10px_38px_-10px_rgba\(22\2c _23\2c _24\2c _0\.35\)\2c _0px_10px_20px_-15px_rgba\(22\2c _23\2c _24\2c _0\.2\)\] {
+  --tw-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  --tw-shadow-colored: 0px 10px 38px -10px var(--tw-shadow-color), 0px 10px 20px -15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2277,6 +2348,10 @@ video {
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2299,6 +2374,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.will-change-\[opacity\2c transform\] {
+  will-change: opacity,transform;
+}
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -2615,15 +2693,151 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+@keyframes slideUpAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom] {
+  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideRightAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.data-\[side\=left\]\:animate-slideRightAndFade[data-side=left] {
+  animation: slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideLeftAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right] {
+  animation: slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideDownAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.data-\[side\=top\]\:animate-slideDownAndFade[data-side=top] {
+  animation: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.data-\[highlighted\]\:bg-violet-9[data-highlighted] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
+}
+.data-\[highlighted\]\:data-\[state\=open\]\:bg-violet-9[data-state=open][data-highlighted] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
+}
+.data-\[state\=open\]\:bg-violet-4[data-state=open] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 91.5% 95.5% / var(--tw-bg-opacity));
+}
+.data-\[disabled\]\:text-mauve-8[data-disabled] {
+  --tw-text-opacity: 1;
+  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
+}
+.data-\[highlighted\]\:data-\[state\=open\]\:text-violet-1[data-state=open][data-highlighted] {
+  --tw-text-opacity: 1;
+  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
+}
+.data-\[highlighted\]\:text-violet-1[data-highlighted] {
+  --tw-text-opacity: 1;
+  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
+}
+.data-\[state\=open\]\:text-violet-11[data-state=open] {
+  --tw-text-opacity: 1;
+  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
+}
+.group[data-disabled] .group-data-\[disabled\]\:text-mauve-8 {
+  --tw-text-opacity: 1;
+  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
+}
+.group[data-highlighted] .group-data-\[highlighted\]\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+:is([dir="ltr"] .ltr\:left-0) {
+  left: 0px;
+}
+:is([dir="ltr"] .ltr\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="ltr"] .ltr\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="ltr"] .ltr\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="ltr"] .ltr\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:right-0) {
+  right: 0px;
+}
 :is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
 :is([dir="rtl"] .rtl\:ml-2) {
   margin-left: 0.5rem;
 }
+:is([dir="rtl"] .rtl\:mr-auto) {
+  margin-right: auto;
+}
+:is([dir="rtl"] .rtl\:rotate-180) {
+  --tw-rotate: 180deg;
+  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));
+}
 :is([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
+:is([dir="rtl"] .rtl\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="rtl"] .rtl\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[5px\]) {
+  padding-right: 5px;
+}
 :is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

package/es/elements/HawaDropdownMenu.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface TMenuTypes {
+    children?: any;
+    direction?: "rtl" | "ltr";
+}
+export declare const HawaDropdownMenu: FC<TMenuTypes>;
+export {};

package/es/elements/HawaSnackbar.d.ts

@@ -3,6 +3,7 @@ type THawaSnackBar = {
     severity: "info" | "warning" | "error" | "success" | "none";
     title: string;
     description: string;
+    onCloseSnakbar?: () => void;
     duration?: number;
     position?: "top-left" | "top-center" | "top-right" | "bottom-right" | "bottom-center" | "bottom-left";
     actions?: [

package/es/elements/HawaStats.d.ts

@@ -4,7 +4,8 @@ type StatTypes = {
     color?: string;
     number?: string;
     helperText?: string;
-    variant?: "plain" | "contained" | "outlined" | "brutalist" | "dropshadow";
+    icon?: any;
+    variant?: "default" | "plain" | "contained" | "outlined" | "brutalist" | "dropshadow";
     width?: "full" | "min" | "normal";
     isLoading?: boolean;
     handleClick?: () => void;

package/es/elements/index.d.ts

@@ -18,13 +18,13 @@ export * from "./HawaTooltip";
 export * from "./HawaTabs";
 export * from "./HawaModal";
 export * from "./HawaMenu";
+export * from "./HawaDropdownMenu";
 export * from "./HawaCopyrights";
 export * from "./HawaStepper";
 export * from "./HawaStats";
 export * from "./HawaCodeBlock";
 export * from "./HawaSpinner";
 export * from "./HawaRadio";
-export * from "./HawaDrawer";
 export * from "./HawaDatepicker";
 export * from "./DragDropImages";
 export * from "./DraggableCard";