@sikka/hawa 0.0.265 → 0.0.267

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,40 @@ 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;
+    /* color: theme("colors.slate.500"); */
+    /* background-color: theme("colors.stone.100"); */
+    border-radius: var(--border-radius);
+    /* padding-left: theme("spacing[1.5]");
+    padding-right: theme("spacing[1.5]");
+    padding-top: theme("spacing.1");
+    padding-bottom: theme("spacing.1"); */
+    padding: 0.25rem 0.375rem;
+    /* margin: theme("spacing.0") theme("spacing.1");  */
+
+    border: #d1d5db 1px solid;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
+  }
+
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -597,6 +631,9 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
+.-left-1\.5 {
+  left: -0.375rem;
+}
 .-right-10 {
   right: -2.5rem;
 }
@@ -618,12 +655,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;
 }
@@ -666,6 +709,9 @@ video {
 .top-4 {
   top: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
 .top-auto {
   top: auto;
 }
@@ -693,9 +739,6 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
-.m-3 {
-  margin: 0.75rem;
-}
 .m-5 {
   margin: 1.25rem;
 }
@@ -769,6 +812,9 @@ video {
 .ml-3 {
   margin-left: 0.75rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .ml-40 {
   margin-left: 10rem;
 }
@@ -820,6 +866,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -1066,6 +1115,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;
 }
@@ -1160,6 +1215,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));
 }
+.-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));
+}
 .-rotate-90 {
   --tw-rotate: -90deg;
   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));
@@ -1531,6 +1590,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));
@@ -1547,6 +1610,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
 .border-green-300 {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
@@ -1555,10 +1622,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;
 }
@@ -1607,6 +1670,9 @@ video {
 .bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }
+.bg-buttonSecondary-500 {
+  background-color: var(--button-secondary-500);
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -1659,10 +1725,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1832,10 +1894,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;
@@ -1935,6 +1993,10 @@ video {
 .text-\[9px\] {
   font-size: 9px;
 }
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1981,6 +2043,9 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-none {
+  line-height: 1;
+}
 .leading-tight {
   line-height: 1.25;
 }
@@ -2322,6 +2387,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
 .hover\:bg-gray-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -2508,6 +2577,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
+:is(.dark .dark\:bg-gray-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -2572,6 +2645,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:text-gray-800) {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
 :is(.dark .dark\:text-green-800) {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
@@ -2694,6 +2771,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;
   }
@@ -2722,6 +2819,14 @@ body {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -2730,6 +2835,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/HawaAlert.d.ts

@@ -16,6 +16,8 @@ type AlertTypes = {
             variant: "contained" | "outlined";
         }
     ];
+    persistant?: boolean;
+    icon?: any;
 };
 export declare const HawaAlert: React.FunctionComponent<AlertTypes>;
 export {};

package/es/elements/HawaButton.d.ts

@@ -3,7 +3,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "contained" | "outlined";
     feedback?: string;
     tooltipDirection?: "rtl" | "ltr";
-    color?: "default" | "primary" | "secondary";
+    color?: "default" | "primary" | "secondary" | "light" | "dark";
     width?: "full" | "normal" | "half";
     size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full";
     margins?: "none" | "1" | "2" | "3" | "4";
@@ -14,6 +14,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     endIcon?: any;
     isLoading?: boolean;
     badge?: any;
+    edgeCorner?: any;
 }
 export declare const HawaButton: FC<ButtonProps>;
 export {};

package/es/elements/HawaInlineCode.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+type InlineCodeTypes = {
+    text: string;
+};
+export declare const HawaInlineCode: FC<InlineCodeTypes>;
+export {};

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/elements/Timeline.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+type TimelineTypes = {
+    title: any;
+    steps: StepTypes[];
+};
+type StepTypes = {
+    date: string;
+    title: string;
+    description?: string;
+    actions?: any;
+};
+export declare const Timeline: FC<TimelineTypes>;
+export {};

package/es/elements/index.d.ts

@@ -13,8 +13,6 @@ export * from "./HawaTable";
 export * from "./HawaColorPicker";
 export * from "./HawaSearchBar";
 export * from "./HawaAccordion";
-export * from "./DragDropImages";
-export * from "./DraggableCard";
 export * from "./HawaPhoneInput";
 export * from "./HawaTooltip";
 export * from "./HawaTabs";
@@ -22,22 +20,26 @@ export * from "./HawaModal";
 export * from "./HawaMenu";
 export * from "./HawaCopyrights";
 export * from "./HawaStepper";
-export * from "./Breadcrumb";
 export * from "./HawaStats";
 export * from "./HawaCodeBlock";
 export * from "./HawaSpinner";
 export * from "./HawaRadio";
 export * from "./HawaDrawer";
+export * from "./HawaDatepicker";
+export * from "./DragDropImages";
+export * from "./DraggableCard";
+export * from "./Breadcrumb";
 export * from "./SubsectionList";
 export * from "./UsageCard";
 export * from "./InvoiceAccordion";
-export * from "./HawaDatepicker";
 export * from "./UserFeedback";
 export * from "./ArrowCarousel";
 export * from "./FloatingComment";
 export * from "./FloatingCommentSlate";
 export * from "./FloatingCommentExec";
 export * from "./BackToTop";
+export * from "./HawaInlineCode";
+export * from "./Timeline";
 export * from "./HawaTextField";
 export * from "./HawaCardInput";
 export * from "./HawaPinInput";

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[];
 };