@sikka/hawa 0.0.265 → 0.0.266

package/lib/layout/HawaAppLayoutSimplified.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 type HawaAppLayoutTypes = {
+    /** The pages of the side drawer */
     drawerItems: {
         label: string;
         icon: any;
@@ -20,6 +21,7 @@ type HawaAppLayoutTypes = {
     drawerSize?: "sm" | "md" | "large";
     profileMenuItems?: MenuItems[][];
     onSettingsClick?: () => void;
+    DrawerFooterActions: any;
 };
 type MenuItems = {
     icon?: JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.265",
+  "version": "0.0.266",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaAlert.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
+import { FiAlertCircle } from "react-icons/fi"
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"
@@ -10,7 +11,6 @@ type AlertTypes = {
   text: any
   /** The duration for the alert to stay on the screen */
   duration?: number
-  // hideIcon?: any //TODO: an X button to delete the alert
   variant?:
     | "normal"
     | "solid"
@@ -26,11 +26,14 @@ type AlertTypes = {
       variant: "contained" | "outlined"
     }
   ]
+  persistant?: boolean
+  icon?: any
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
   direction = "ltr",
   duration,
+  icon,
   ...props
 }) => {
   const alertRef = useRef(null)
@@ -55,6 +58,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     }
   }, [duration])
   let closeButtonStyle = {
+    none: "hover:bg-gray-300",
     info: "hover:bg-blue-300",
     warning: "hover:bg-yellow-300",
     error: "hover:bg-red-300",
@@ -62,6 +66,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   }
   let styleVariant = {
     normal: {
+      none: "text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -70,6 +75,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "top-accent": {
+      none: "border-t-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-t-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-t-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -79,6 +85,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-t-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "left-accent": {
+      none: "border-l-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-l-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-l-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -88,6 +95,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-l-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "right-accent": {
+      none: "border-r-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-r-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-r-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -97,6 +105,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-r-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "bottom-accent": {
+      none: "border-b-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-b-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-b-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -117,58 +126,71 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         role="alert"
         dir={direction}
       >
-        <span
-          className={clsx("font-medium", direction === "rtl" ? "ml-8" : "mr-8")}
-        >
-          {props.title}
-        </span>
-        <span>{" " + props.text}</span>
-
-        {props.actions && (
-          <div className="mt-2 flex flex-row gap-2">
-            {props.actions.map((act, index) => (
-              <HawaButton
-                key={index}
-                variant={act.variant}
-                onClick={act.onClick()}
-                margins="none"
-              >
-                {act.label}
-              </HawaButton>
-            ))}
-          </div>
-        )}
-        <button
-          type="button"
-          className={clsx(
-            "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
-            closeButtonStyle[props.severity],
-            direction === "rtl" ? "left-2" : "right-2"
+        <div className="flex flex-row">
+          {icon && (
+            <div className={direction === "rtl" ? "pl-2 pt-1" : "pr-2 pt-1"}>
+              {icon}
+            </div>
           )}
-          data-dismiss-target="#alert-default"
-          aria-label="Close"
-          onClick={() => {
-            setClosed(true)
-            setTimeout(() => {
-              alertRef.current.removeChild(alertRef.current.children[0])
-            }, 200)
-          }}
-        >
-          <span className="sr-only">Close</span>
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+          <div className="flex flex-col">
+            <span
+              className={clsx(
+                "font-medium",
+                direction === "rtl" ? "ml-8" : "mr-8"
+              )}
+            >
+              {props.title}
+            </span>
+            <span>{" " + props.text}</span>
+            {props.actions && (
+              <div className="mt-2 flex flex-row gap-2">
+                {props.actions.map((act, index) => (
+                  <HawaButton
+                    key={index}
+                    variant={act.variant}
+                    onClick={act.onClick()}
+                    margins="none"
+                  >
+                    {act.label}
+                  </HawaButton>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        {!props.persistant && (
+          <button
+            type="button"
+            className={clsx(
+              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+              closeButtonStyle[props.severity],
+              direction === "rtl" ? "left-2" : "right-2"
+            )}
+            data-dismiss-target="#alert-default"
+            aria-label="Close"
+            onClick={() => {
+              setClosed(true)
+              setTimeout(() => {
+                alertRef.current.removeChild(alertRef.current.children[0])
+              }, 200)
+            }}
           >
-            <path
-              fillRule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
+            <span className="sr-only">Close</span>
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        )}
       </div>
     </div>
   )

package/src/elements/HawaButton.tsx

@@ -7,7 +7,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"
@@ -26,6 +26,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   endIcon?: any
   isLoading?: boolean
   badge?: any
+  edgeCorner?: any
 }
 
 const disabledSyles = "cursor-default pointer-events-none"
@@ -34,7 +35,7 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 const baseStyles =
-  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
+  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium transition-all"
 const sizeStyles = {
   xs: "px-1 py-1",
   small: "text-xs px-2.5 py-1.5",
@@ -65,13 +66,17 @@ const colorStyles = {
     primary:
       "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
     secondary:
-      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
+      "bg-buttonSecondary-500 hover:text-white hover:bg-buttonSecondary-700",
+    gray: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+    dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
     primary: "text-black hover:bg-gray-50",
     secondary:
       "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
+    gray: "border-gray-300 hover:bg-gray-200  ",
+    dark: "border-gray-900 hover:bg-gray-700  ",
   },
 }
 
@@ -90,6 +95,7 @@ export const HawaButton: FC<ButtonProps> = ({
   margins = "2",
   children,
   badge,
+  edgeCorner = false,
   feedback,
   ...props
 }) => {
@@ -136,6 +142,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 ? clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     widthStyles[width],
@@ -145,6 +153,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 : clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     colorStyles[variant][color],
@@ -165,6 +175,8 @@ export const HawaButton: FC<ButtonProps> = ({
               ? clsx(
                   className,
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
+
                   variantStyles[variant],
                   sizeStyles[size],
                   widthStyles[width],
@@ -175,6 +187,7 @@ export const HawaButton: FC<ButtonProps> = ({
                   className,
                   "overflow-x-clip",
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
                   variantStyles[variant],
                   sizeStyles[size],
                   colorStyles[variant][color],
@@ -188,7 +201,7 @@ export const HawaButton: FC<ButtonProps> = ({
           {!isLoading ? (
             <div
               className={clsx(
-                " flex flex-col-reverse items-start justify-center gap-4 s transition-all",
+                " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
                 isClicked && feedback
                   ? " -translate-y-8 pb-1 pt-1"
                   : "translate-y-0"

package/src/elements/HawaCodeBlock.tsx

@@ -112,6 +112,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             </div>
             <HawaButton
               variant="outlined"
+              color="dark"
               onClick={() => {
                 handleCopyClick()
                 navigator.clipboard.writeText(

package/src/elements/HawaInlineCode.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from "react"
+
+type InlineCodeTypes = {
+  text: string
+}
+
+export const HawaInlineCode: FC<InlineCodeTypes> = (props) => {
+  return <code className="inline-code">{props.text}</code>
+}

package/src/elements/HawaMenu.tsx

@@ -197,10 +197,10 @@ export const HawaMenu: FC<TMenuTypes> = ({
                     className={clsx(
                       "transition-all",
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
+                        ? "flex cursor-pointer flex-row items-center rounded-inner bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
                         : item.disabled
                         ? "text-gray-300"
-                        : " flex cursor-pointer flex-row items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
+                        : " flex cursor-pointer flex-row items-center rounded-inner hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
                       sizeStyles[size]
                     )}
                   >

package/src/elements/Timeline.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react"
+
+type TimelineTypes = {
+  title: any
+  steps: StepTypes[]
+}
+type StepTypes = {
+  date: string
+  title: string
+  description?: string
+  actions?: any
+}
+export const Timeline: FC<TimelineTypes> = (props) => {
+  return (
+    <div>
+      <ol className="relative border-l border-gray-200 dark:border-gray-700">
+        {props.steps.map((step) => (
+          <li className="mb-10 ml-4">
+            <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"></div>
+            <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+              {step.date}
+            </time>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {step.title}
+            </h3>
+            <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+              {step.description}
+            </p>
+            {step.actions}
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}

package/src/elements/index.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"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"