ekm-ui 0.3.74 → 0.3.78

package/src/modal.tsx

@@ -1,79 +1,91 @@
 //@ts-nocheck
-import { FaTimes } from 'react-icons/fa'
-import { variantProps } from 'classname-variants/react'
-import PropTypes from 'prop-types'
+import { variantProps } from "classname-variants/react";
+import PropTypes from "prop-types";
+import { FaTimes } from "react-icons/fa";
 
 const modalProps = variantProps({
-  base: 'relative p-4 w-full max-h-full ',
+  base: "relative p-4 w-full max-h-full ",
   variants: {
     size: {
-      xsm: 'max-w-md',
-      sm: 'max-w-xl',
-      md: 'max-w-2xl',
-      lg: 'max-w-3xl',
+      xsm: "max-w-md",
+      sm: "max-w-xl",
+      md: "max-w-2xl",
+      lg: "max-w-3xl",
     },
     defaultVariants: {
-      size: 'md',
+      size: "md",
     },
   },
-})
+});
 
 export function Modal({ children, show = true, ...props }) {
-  if (!show) return <div />
+  if (!show) return <div />;
 
   const renderHeadedModal = () => (
-    <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">{props.title}</h3>
+    <div className="flex items-center justify-between rounded-t border-b p-4 dark:border-gray-600 md:p-5">
+      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+        {props.title}
+      </h3>
       {renderCloseButton()}
     </div>
-  )
+  );
 
   const renderCloseButton = (isHeadless = false) => (
     <button
       type="button"
       className={`${
-        isHeadless && 'absolute top-3 end-2.5'
-      } text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white`}
+        isHeadless && "absolute end-2.5 top-3"
+      } ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white`}
       data-modal-hide="default-modal"
       onClick={props.onClose}
     >
       <FaTimes />
       <span className="sr-only">Close modal</span>
     </button>
-  )
+  );
 
   return (
     <div
       id="default-modal"
       tabIndex="-1"
       aria-hidden="true"
-      className="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full flex bg-gray-900 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50"
+      className="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50 md:inset-0"
       role="dialog"
     >
       <div {...modalProps(props)}>
-        <div className="relative pt-4 pl-4 pr-4 bg-white rounded-lg shadow dark:bg-gray-700">
+        <div className="relative rounded-lg bg-white pl-4 pr-4 pt-4 shadow dark:bg-gray-700">
           {props.title ? renderHeadedModal() : renderCloseButton(true)}
           {children}
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export function ModalBody({ children }) {
-  return <div>{children}</div>
+  return <div>{children}</div>;
 }
 
 export function ModalFooter({ children, border = true, alignment = "center" }) {
-  return <div className={`flex gap-4 ${alignment == 'center' && 'justify-center'} ${alignment == 'left' && 'justify-start'} ${alignment == 'right' && 'justify-end'} items-end p-4 md:p-5 ${border && 'border-t'} border-gray-200 rounded-b dark:border-gray-600`}>{children}</div>
+  return (
+    <div
+      className={`flex gap-4 ${alignment == "center" && "justify-center"} ${
+        alignment == "left" && "justify-start"
+      } ${alignment == "right" && "justify-end"} items-end p-4 md:p-5 ${
+        border && "border-t"
+      } rounded-b border-gray-200 dark:border-gray-600`}
+    >
+      {children}
+    </div>
+  );
 }
 
-Modal.Body = ModalBody
-Modal.Footer = ModalFooter
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
 
 Modal.defaultProps = {
-  size: 'md',
-}
+  size: "md",
+};
 
 Modal.propTypes = {
   /** Tile of the modal not providing a title makes this a headless modal */
@@ -81,25 +93,25 @@ Modal.propTypes = {
   /** Whether or not the modal is visible */
   show: PropTypes.bool,
   /** Size of the modal */
-  size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
+  size: PropTypes.oneOf(["xsm", "sm", "md", "lg"]),
   /** Callback for the close action */
   onClose: PropTypes.func.isRequired,
   /** Modal.Body and Modal.Footer compounds used to build up the modal. The footer is optional */
   children: PropTypes.node.isRequired,
-}
+};
 
 ModalBody.propTypes = {
   /** Markup to make up the Modal content */
   children: PropTypes.node.isRequired,
-}
+};
 
 ModalFooter.propTypes = {
   /** Markup to make up the Modal Footer */
   border: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  alignment: PropTypes.oneOf(['left', 'center', 'right']),
-}
+  alignment: PropTypes.oneOf(["left", "center", "right"]),
+};
 
-Modal.displayName = "Modal"
-ModalFooter.displayName = "ModalFooter"
-ModalBody.displayName = "ModalBody"
+Modal.displayName = "Modal";
+ModalFooter.displayName = "ModalFooter";
+ModalBody.displayName = "ModalBody";

package/src/navbar/navbar.tsx

@@ -17,12 +17,12 @@ import {
   HiLogout,
   HiMenuAlt1,
   HiOutlineTicket,
+  HiPlusSm,
   HiSearch,
   HiShoppingBag,
   HiUserCircle,
   HiUsers,
   HiViewGrid,
-  HiPlusSm,
   HiX,
 } from "react-icons/hi";
 import { EkmLogo } from "../ekm-logo";

package/src/no-results-block.tsx

@@ -1,5 +1,3 @@
-import { Button } from "flowbite-react";
-
 type Props = {
   title: string;
   icon: JSX.Element;
@@ -8,7 +6,13 @@ type Props = {
   children?: JSX.Element;
 };
 
-export function NoResultsBlock({ icon, title, text, children, buttons }: Props) {
+export function NoResultsBlock({
+  icon,
+  title,
+  text,
+  children,
+  buttons,
+}: Props) {
   return (
     <div className="flex flex-col items-center justify-between px-4 py-16 sm:px-8">
       {icon}

package/src/page-header.tsx

@@ -20,24 +20,29 @@ export function PageHeader({ children, title, text, breadcrumbs }: Props) {
                   <Breadcrumb.Home key={bc.linkURL} href={bc.linkURL}>
                     {bc.linkLabel}
                   </Breadcrumb.Home>
-                )
+                );
               }
-
               return (
                 <Breadcrumb.Item key={bc.linkURL} href={bc.linkURL}>
                   {bc.linkLabel}
                 </Breadcrumb.Item>
-              )
+              );
             })}
           </Breadcrumb>
-          <h2 className="mt-2 text-xl font-semibold leading-7 text-gray-900 dark:text-white sm:truncate">{title}</h2>
-          <p className=" text-sm font-normal text-gray-500 dark:text-gray-400">{text}</p>
+          <h2 className="mt-2 text-xl font-semibold leading-7 text-gray-900 dark:text-white sm:truncate">
+            {title}
+          </h2>
+          <p className=" text-sm font-normal text-gray-500 dark:text-gray-400">
+            {text}
+          </p>
         </div>
 
-        <div className="mt-1 flex flex-shrink-0 flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">{children}</div>
+        <div className="mt-1 flex flex-shrink-0 flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+          {children}
+        </div>
       </div>
     </div>
-  )
+  );
 }
 
-PageHeader.displayName = "PageHeader"
+PageHeader.displayName = "PageHeader";

package/src/pagination/pagination.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { useMemo } from "react";
 
-
 export type PaginationProps = {
   pageSize: number;
   total: number;
@@ -82,6 +81,7 @@ export function Pagination({
                 current === totalPages && "cursor-not-allowed",
                 "flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
               )}
+              onClick={() => onChange(current + 1, pageSize)}
             >
               <span>Next</span>
               <svg