@sikka/hawa 0.0.266 → 0.0.268

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

@@ -21,6 +21,7 @@ jobs:
          else 
           npm install
          fi
+         npm run build-storybook
          npm run deploy-storybook -- --ci
         env : 
           GH_TOKEN: ${{ secrets.GH_TOKEN }}

package/dist/styles.css

@@ -403,6 +403,22 @@ video {
       var(--border-radius) - calc(var(--border-radius) / 3)
     );
   }
+  .link::after {
+    content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
+    display: inline-block;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    width: 0.75em;
+    vertical-align: middle;
+    color: var(--button-primary-500);
+  }
+  .link {
+    color: var(--button-primary-500);
+  }
+  .link:hover {
+    text-decoration: underline;
+    color: var(--button-primary-700);
+  }
 
   .inline-code {
     font-size: 0.75rem;
@@ -427,6 +443,51 @@ video {
     margin: 0;
   }
 
+  .radio-item {
+    position: relative;
+  }
+
+  .radio-item input[type="radio"] {
+    display: none;
+  }
+
+  .radio-item label:before {
+    content: " ";
+    display: inline-block;
+    position: relative;
+    top: 3px;
+    margin: 0 5px 0 0;
+    width: 15px;
+    height: 15px;
+    border-radius: 11px;
+    /* border: 2px solid var(--button-primary-500); */
+    border: 2px solid #a3a3a3;
+    background-color: transparent;
+  }
+
+  .radio-item-default input[type="radio"]:checked + label:after {
+    border-radius: 100%;
+    width: 9px;
+    height: 9px;
+    position: absolute;
+    top: 6px;
+    left: 11px;
+    content: " ";
+    display: block;
+    background: var(--button-primary-500);
+  }
+  .radio-item-bordered input[type="radio"]:checked + label:after {
+    border-radius: 100%;
+    width: 9px;
+    height: 9px;
+    position: absolute;
+    top: 22px;
+    left: 23px;
+    content: " ";
+    display: block;
+    background: var(--button-primary-500);
+  }
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -621,11 +682,11 @@ video {
 .-right-10 {
   right: -2.5rem;
 }
-.-right-3 {
-  right: -0.75rem;
+.-right-2 {
+  right: -0.5rem;
 }
-.-top-3 {
-  top: -0.75rem;
+.-top-2 {
+  top: -0.5rem;
 }
 .bottom-0 {
   bottom: 0px;
@@ -639,12 +700,18 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.bottom-6 {
+  bottom: 1.5rem;
+}
 .left-0 {
   left: 0px;
 }
 .left-1\/2 {
   left: 50%;
 }
+.left-10 {
+  left: 2.5rem;
+}
 .left-2 {
   left: 0.5rem;
 }
@@ -687,6 +754,9 @@ video {
 .top-4 {
   top: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
 .top-auto {
   top: auto;
 }
@@ -714,9 +784,6 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
-.m-3 {
-  margin: 0.75rem;
-}
 .m-5 {
   margin: 1.25rem;
 }
@@ -1093,6 +1160,12 @@ video {
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
+.w-\[calc\(100\%\)\] {
+  width: calc(100%);
+}
+.w-\[calc\(100\%-2rem\)\] {
+  width: calc(100% - 2rem);
+}
 .w-auto {
   width: auto;
 }
@@ -1304,6 +1377,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-10 {
+  gap: 2.5rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1562,6 +1638,10 @@ video {
 .border-buttonPrimary-500 {
   border-color: var(--button-primary-500);
 }
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1590,10 +1670,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
 .border-transparent {
   border-color: transparent;
 }
@@ -1866,10 +1942,6 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -2418,6 +2490,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2506,9 +2582,17 @@ body {
   --tw-blur: blur(16px);
   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);
 }
+.peer:checked ~ .peer-checked\:border-blue-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
 .peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }
+.peer:checked ~ .peer-checked\:text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
 .peer:checked ~ .peer-checked\:after\:translate-x-\[2\.445rem\]::after {
   content: var(--tw-content);
   --tw-translate-x: 2.445rem;
@@ -2680,6 +2764,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:hover\:text-gray-300:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 :is(.dark .dark\:hover\:text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2715,6 +2803,10 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
+:is(.dark .peer:checked ~ .dark\:peer-checked\:text-blue-500) {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
 :is(.dark .peer:focus ~ .dark\:peer-focus\:ring-buttonPrimary-700) {
   --tw-ring-color: var(--button-primary-700);
 }
@@ -2747,6 +2839,26 @@ body {
 }
 @media (min-width: 768px) {
 
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .md\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .md\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .md\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -2775,6 +2887,14 @@ body {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -2783,6 +2903,36 @@ body {
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
   }
+
+  .md\:border-l {
+    border-left-width: 1px;
+  }
+
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .md\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-right {
+    text-align: right;
+  }
+}
+@media (min-width: 1024px) {
+
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
 }
 @media (min-width: 1280px) {
 

package/es/elements/DragDropImages.d.ts

@@ -20,6 +20,8 @@ type DragDropImagesTypes = {
         maxFileSize: any;
         tooManyFiles: any;
         fileTooLarge: any;
+        acceptedFileTypes: any;
+        invalidFileType: any;
     };
 };
 export declare const DragDropImages: React.FunctionComponent<DragDropImagesTypes>;

package/es/elements/HawaRadio.d.ts

@@ -1,9 +1,15 @@
 import { FC } from "react";
 type RadioTypes = {
+    orientation?: "vertical" | "horizontal";
+    design?: "default" | "tabs" | "cards" | "bordered";
     options?: [
         {
             value: any;
             label: any;
+            disabled?: any;
+            sublabel?: any;
+            beforeIcon?: any;
+            afterIcon?: any;
         }
     ];
     onChangeTab?: any;

package/es/elements/HawaTable.d.ts

@@ -1,10 +1,20 @@
 import { FC } from "react";
+type RowTypes = {
+    hidden: boolean;
+    value: any;
+    suffix?: any;
+};
+type ColTypes = {
+    hidden: boolean;
+    value: any;
+    sortable?: boolean;
+};
 type TableTypes = {
     pagination?: boolean;
-    columns: any[string];
+    columns: ColTypes[];
     actions?: ActionItems[][];
     direction?: "rtl" | "ltr";
-    rows?: any[any];
+    rows?: RowTypes[][];
     handleActionClick?: any;
     end?: any;
     size?: "normal" | "small";

package/es/hooks/useTable.d.ts

@@ -1,4 +1,4 @@
-declare const useTable: (data: any, page: any, rowsPerPage: any) => {
+declare const useTable: (data: any, page: any, rowsPerPage: any, sortColumn: any, sortDirection: any) => {
     slice: any[];
     range: any[];
 };