ekm-ui 0.3.43 → 0.3.46

package/dist/stacked-list-item.d.ts

@@ -11,5 +11,8 @@ type Props = {
     icon?: JSX.Element;
 };
 declare function StackedListItem({ id, title, text, avatarShow, avatarColor, avatarBorder, children, badgeText, badgeColor, icon, }: Props): JSX.Element;
+declare namespace StackedListItem {
+    var displayName: string;
+}
 
 export { StackedListItem };

package/dist/stacked-list-item.mjs

@@ -1,9 +1,9 @@
-export { a as StackedListItem } from './chunk-WYNI4KBI.mjs';
-import './chunk-XFCPRHEY.mjs';
+export { a as StackedListItem } from './chunk-FISQAAMO.mjs';
+import './chunk-Q365BFES.mjs';
 import './chunk-EHJJX6ZZ.mjs';
-import './chunk-ZFBRBOQI.mjs';
-import './chunk-45QX7OUO.mjs';
-import './chunk-QWPN2UNV.mjs';
+import './chunk-ZJATBQ3X.mjs';
+import './chunk-S7N5VK35.mjs';
+import './chunk-N7RKCR3X.mjs';
 import './chunk-ASCPOK5F.mjs';
 import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
@@ -13,37 +13,37 @@ import './chunk-VPLCWU7T.mjs';
 import './chunk-PPMW7YAZ.mjs';
 import './chunk-5CGIKL2Y.mjs';
 import './chunk-NTGEZMHP.mjs';
-import './chunk-7X4WYXA2.mjs';
-import './chunk-RMX72FR3.mjs';
+import './chunk-WFRV27QA.mjs';
+import './chunk-5FPVCRAI.mjs';
 import './chunk-2IL2LP47.mjs';
 import './chunk-ZHCGY4YB.mjs';
 import './chunk-5DQUZENZ.mjs';
 import './chunk-ZWJSMASL.mjs';
 import './chunk-OT256LE6.mjs';
-import './chunk-AHKENQVI.mjs';
+import './chunk-W3DRXKTC.mjs';
 import './chunk-WMFTYTMD.mjs';
 import './chunk-EWNPNF2B.mjs';
-import './chunk-OZK25XNR.mjs';
-import './chunk-XGHRMSFX.mjs';
+import './chunk-NEJOZRKV.mjs';
+import './chunk-OA6BZGB2.mjs';
 import './chunk-ZT7KDTGF.mjs';
 import './chunk-IEHJB2LC.mjs';
 import './chunk-FRIXS4BL.mjs';
-import './chunk-QOVVHEU2.mjs';
+import './chunk-HEKVJKLH.mjs';
 import './chunk-D6H235SZ.mjs';
 import './chunk-PJMH47GY.mjs';
 import './chunk-KAQJAKQH.mjs';
 import './chunk-DZABAR36.mjs';
-import './chunk-7Q4BF7BT.mjs';
+import './chunk-XUXHB434.mjs';
 import './chunk-F6ZWBNIM.mjs';
 import './chunk-PT4DPY4L.mjs';
 import './chunk-4SFCR75V.mjs';
 import './chunk-WLJEFSES.mjs';
-import './chunk-QRNTMHBL.mjs';
+import './chunk-VQ3MZS4J.mjs';
 import './chunk-JACXLYPD.mjs';
-import './chunk-TWLN46WO.mjs';
+import './chunk-KEIDXVZB.mjs';
 import './chunk-O3QYDTAF.mjs';
 import './chunk-YJKULMWM.mjs';
-import './chunk-ZI635H5Y.mjs';
+import './chunk-3LINEESX.mjs';
 import './chunk-JCWSMIVA.mjs';
 import './chunk-SAXGEQRG.mjs';
 import './chunk-S6EYHLVB.mjs';

package/dist/table-header/table-header.d.ts

@@ -45,6 +45,7 @@ declare namespace TableHeader {
         /** Optional return call triggered when the optional header checkbox is clicked */
         checkboxCallback: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    var displayName: string;
 }
 
 export { TableHeader };

package/dist/table-header/table-header.mjs

@@ -1,4 +1,4 @@
-export { a as TableHeader } from '../chunk-45QX7OUO.mjs';
+export { a as TableHeader } from '../chunk-S7N5VK35.mjs';
 import '../chunk-PUJZGK7Y.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/dist/text-row.d.ts

@@ -6,5 +6,8 @@ type Props = {
     className?: string;
 };
 declare function TextRow({ children, title, text, border, className }: Props): JSX.Element;
+declare namespace TextRow {
+    var displayName: string;
+}
 
 export { TextRow };

package/dist/text-row.mjs

@@ -1,4 +1,4 @@
-export { a as TextRow } from './chunk-RMX72FR3.mjs';
+export { a as TextRow } from './chunk-5FPVCRAI.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=text-row.mjs.map

package/dist/toast/index.d.ts

@@ -4,6 +4,9 @@ declare const ToastContext: react.Context<((toast: ToastEvent) => void) | undefi
 declare function ToastProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
 type ToastEvent = {
     type: "success" | "error" | "warning" | "info";
     text: string;

package/dist/toast/index.mjs

@@ -1,4 +1,4 @@
-export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-QWPN2UNV.mjs';
+export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-N7RKCR3X.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.43",
+  "version": "0.3.46",
   "sideEffects": [
     "**/*.css"
   ],

package/src/alert-banner.tsx

@@ -96,3 +96,5 @@ AlertBanner.propTypes = {
     children: PropTypes.node.isRequired,
 }
 
+AlertBanner.displayName = "AlertBanner"
+

package/src/badge.tsx

@@ -1,66 +1,52 @@
 //@ts-nocheck
-import { variantProps } from "classname-variants/react";
-import PropTypes from "prop-types";
+import { variantProps } from 'classname-variants/react'
+import PropTypes from 'prop-types'
+import { twMerge } from 'tailwind-merge'
 
 const badgeProps = variantProps({
-  base: "flex h-fit items-center gap-1 font-semibold rounded px-2 py-0.5",
+  base: 'flex h-fit items-center gap-1 font-semibold rounded px-2 py-0.5',
   variants: {
     color: {
-      info: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      gray: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600",
-      failure:
-        "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
-      success:
-        "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
-      warning:
-        "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
-      indigo:
-        "bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300",
-      purple:
-        "bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300",
-      pink: "bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300",
-      blue: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      dark: "bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700",
-      light:
-        "bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500",
-      green:
-        "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
-      lime: "bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300",
-      red: "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
-      teal: "bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300",
-      yellow:
-        "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
+      info: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
+      failure: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+      success: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+      warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
+      indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
+      purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
+      pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+      blue: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      cyan: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      dark: 'bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700',
+      light: 'bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500',
+      green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+      lime: 'bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300',
+      red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+      teal: 'bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300',
+      yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
     },
     size: {
-      xs: "p-1 text-xs",
-      sm: "p-1.5 text-sm",
+      xs: 'p-1 text-xs',
+      sm: 'p-1.5 text-sm',
     },
   },
-});
+})
 
-export function Badge({
-  color = "gray",
-  size = "xs",
-  icon,
-  children,
-  ...props
-}) {
+export function Badge({ color = 'gray', size = 'xs', className, children }) {
   return (
-    <span {...badgeProps({ color, size, icon })} {...props}>
-      {icon && icon}
-      {children}
-    </span>
-  );
+    <div className={twMerge('flex p-4', className)}>
+      <span {...badgeProps({ color, size })}>{children}</span>
+    </div>
+  )
 }
 
 Badge.propTypes = {
   /** String for color of badge */
   color: PropTypes.string,
   /** String to determine the size of the badge. "xs, sm" */
-  size: PropTypes.oneOf(["xs", "sm"]),
-  /** Boolean to change styling of badge for having an Icon */
-  icon: PropTypes.element,
-};
+  size: PropTypes.oneOf(['xs', 'sm']),
+  /** Additional classes */
+  className: PropTypes.string,
+}
 
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge'

package/src/color-picker.tsx

@@ -67,4 +67,6 @@ export function ColorPicker({
   );
 }
 
+ColorPicker.displayName = "ColorPicker"
+
 

package/src/drag-and-drop.tsx

@@ -226,3 +226,5 @@ DragAndDrop.propTypes = {
   /** Returns when the file picker button is clicked */
   pickerCallback: PropTypes.func,
 };
+
+DragAndDrop.displayName = "DragAndDrop"

package/src/drawer.tsx

@@ -74,3 +74,5 @@ export function Drawer({ show, onClose, children, title }: Props) {
     </div>
   );
 }
+
+Drawer.displayName = "Drawer"

package/src/dropdown.tsx

@@ -11,7 +11,7 @@ const buttonProps = variantProps({
   variants: {
     color: {
       blue: 'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300',
-      gray: 'bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',
+      gray: 'bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',
       green: 'bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300',
       red: 'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300',
       yellow: 'bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300',
@@ -42,7 +42,7 @@ const DropdownState = Object.freeze({
   CLOSED: 'closed',
 })
 
-export function Dropdown({ children, ...props }) {
+export function Dropdown({ id, label, type, color, size, children }) {
   const [showDropdown, setShowDropdown] = useState(DropdownState.CLOSED)
   const handleShowDropdown = () => {
     const currState = showDropdown
@@ -51,7 +51,7 @@ export function Dropdown({ children, ...props }) {
 
   useEffect(() => {
     const handleClickOutside = (e) => {
-      if (e.target.id === props.id) return
+      if (e.target.id === id) return
       setShowDropdown(DropdownState.CLOSED)
     }
 
@@ -63,22 +63,24 @@ export function Dropdown({ children, ...props }) {
   }, [])
 
   return (
-    <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>
-      <button id={props.id} {...buttonProps(props)} data-dropdown-toggle={`${props.id}-dropdown`} type="button" onClick={handleShowDropdown}>
-        {props.label}
-        {props.type === 'rect' && <BiChevronDown />}
-      </button>
-      <div
-        id={`${props.id}-dropdown`}
-        className={`z-10 mt-2 absolute ${
-          showDropdown === DropdownState.OPEN ? '' : 'hidden'
-        } bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
-      >
-        <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
-          {children}
-        </ul>
-      </div>
-    </DropdownContext.Provider>
+    <div className="relative">
+      <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>
+        <button id={id} {...buttonProps({ color, size, type })} data-dropdown-toggle={`${id}-dropdown`} type="button" onClick={handleShowDropdown}>
+          {label}
+          {type === 'rect' && <BiChevronDown className="pointer-events-none" />}
+        </button>
+        <div
+          id={`${id}-dropdown`}
+          className={`z-50 mt-2 absolute ${
+            showDropdown === DropdownState.OPEN ? '' : 'hidden'
+          } bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
+        >
+          <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+            {children}
+          </ul>
+        </div>
+      </DropdownContext.Provider>
+    </div>
   )
 }
 
@@ -112,33 +114,31 @@ Dropdown.Item = DropdownItem
 Dropdown.propTypes = {
   /** Unique id for the dropdown */
   id: PropTypes.string.isRequired,
-    /** Components to be rendered as Part of the Compound Component*/
-    children: PropTypes.oneOfType([
-        PropTypes.shape({ type: PropTypes.oneOf([DropdownItem]), }),
-        PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.oneOf([DropdownDivider]) }))
-    ]).isRequired,
-    /** Shape of the button rectangle or round */
-    type: PropTypes.oneOf(['rect', 'round']),
-    /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */
-    size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),
-    /** Colour of the button based upon predefined values */
-    color: PropTypes.oneOf(['blue', 'gray', 'green', 'red', 'yellow']),
-    /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    /** Returns value of the selected item */
-    callback: PropTypes.func.isRequired,
+  /** Components to be rendered as Part of the Compound Component*/
+  children: PropTypes.oneOfType([
+    PropTypes.shape({ type: PropTypes.oneOf([DropdownItem]) }),
+    PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.oneOf([DropdownDivider]) })),
+  ]).isRequired,
+  /** Shape of the button rectangle or round */
+  type: PropTypes.oneOf(['rect', 'round']),
+  /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),
+  /** Colour of the button based upon predefined values */
+  color: PropTypes.oneOf(['blue', 'gray', 'green', 'red', 'yellow']),
+  /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 }
 Dropdown.defaultProps = {
-    type: 'rect',
-    size: 'md',
-    color: 'blue',
-    label: 'Dropdown',
+  type: 'rect',
+  size: 'md',
+  color: 'blue',
+  label: 'Dropdown',
 }
 DropdownItem.propTypes = {
-    /** Returns value of the dropdown item selected*/
-    callback: PropTypes.func.isRequired,    
+  /** Returns value of the dropdown item selected*/
+  callback: PropTypes.func.isRequired,
 }
 
-Dropdown.displayName = "Dropdown";
-DropdownDivider.displayName = "Dropdown.Divider";
-DropdownItem.displayName = "Dropdown.Item";
+Dropdown.displayName = 'Dropdown'
+DropdownDivider.displayName = 'Dropdown.Divider'
+DropdownItem.displayName = 'Dropdown.Item'

package/src/file-picker/file-picker.tsx

@@ -376,6 +376,8 @@ FilePicker.propTypes = {
   callback: PropTypes.func.isRequired,
 }
 
+FilePicker.displayName = "FilePicker"
+
 // HELPER FUNCTIONAL COMPONENTS FOR FILE PICKER
 function EmptyPlaceholder() {
   return (

package/src/form-row.tsx

@@ -37,3 +37,5 @@ export function FormRow({
     </div>
   );
 }
+
+FormRow.displayName = "FormRow"

package/src/index.tsx

@@ -48,5 +48,6 @@ export { FilePicker } from "./file-picker/file-picker";
 export { ToggleSwitch } from "./toggleswitch";
 export { Card } from "./card";
 export { ProgressBar } from "./progress-bar";
+export { EkmLogo } from "./ekm-logo";
 
 import "./styles.css";

package/src/page-header.tsx

@@ -39,3 +39,5 @@ export function PageHeader({ children, title, text, breadcrumbs }: Props) {
     </div>
   )
 }
+
+PageHeader.displayName = "PageHeader"