ekm-ui 0.3.74 → 0.3.78

package/src/avatar.tsx

@@ -1,72 +1,94 @@
 //@ts-nocheck
-import { twMerge } from 'tailwind-merge'
-import PropTypes from 'prop-types'
+import { twMerge } from "tailwind-merge";
+import PropTypes from "prop-types";
 
 const avatarSize = Object.freeze({
-  xs: 'w-6 h-6',
-  sm: 'w-8 h-8',
-  md: 'w-10 h-10',
-  lg: 'w-20 h-20',
-  xl: 'w-36 h-36',
-})
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-20 h-20",
+  xl: "w-36 h-36",
+});
 
 const fontSize = Object.freeze({
-  xs: 'text-xs',
-  sm: 'text-sm',
-  md: 'text-lg',
-  lg: 'text-3xl',
-  xl: 'text-7xl',
-})
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-3xl",
+  xl: "text-7xl",
+});
 
 var colorMap = Object.freeze({
-  A: 'bg-red-200',
-  B: 'bg-red-200',
-  C: 'bg-red-200',
-  D: 'bg-red-200',
-  E: 'bg-red-200',
-  F: 'bg-red-200',
-  G: 'bg-red-200',
-  H: 'bg-pink-200',
-  I: 'bg-pink-200',
-  J: 'bg-pink-200',
-  K: 'bg-pink-200',
-  L: 'bg-pink-200',
-  M: 'bg-pink-200',
-  N: 'bg-pink-200',
-  O: 'bg-green-200',
-  P: 'bg-green-200',
-  Q: 'bg-green-200',
-  R: 'bg-green-200',
-  S: 'bg-green-200',
-  T: 'bg-green-200',
-  U: 'bg-orange-200',
-  V: 'bg-orange-200',
-  W: 'bg-orange-200',
-  X: 'bg-orange-200',
-  Y: 'bg-orange-200',
-  Z: 'bg-orange-200',
-})
+  A: "bg-red-200",
+  B: "bg-red-200",
+  C: "bg-red-200",
+  D: "bg-red-200",
+  E: "bg-red-200",
+  F: "bg-red-200",
+  G: "bg-red-200",
+  H: "bg-pink-200",
+  I: "bg-pink-200",
+  J: "bg-pink-200",
+  K: "bg-pink-200",
+  L: "bg-pink-200",
+  M: "bg-pink-200",
+  N: "bg-pink-200",
+  O: "bg-green-200",
+  P: "bg-green-200",
+  Q: "bg-green-200",
+  R: "bg-green-200",
+  S: "bg-green-200",
+  T: "bg-green-200",
+  U: "bg-orange-200",
+  V: "bg-orange-200",
+  W: "bg-orange-200",
+  X: "bg-orange-200",
+  Y: "bg-orange-200",
+  Z: "bg-orange-200",
+});
 
-export function Avatar({ children, img, size, placeholderInitials, rounded, ...props }) {
-  const bgColor = placeholderInitials !== "" ? colorMap[placeholderInitials[0].toUpperCase()] : 'bg-gray-100'
+export function Avatar({
+  children,
+  img,
+  size,
+  placeholderInitials,
+  rounded,
+  ...props
+}) {
+  const bgColor =
+    placeholderInitials !== ""
+      ? colorMap[placeholderInitials[0].toUpperCase()]
+      : "bg-gray-100";
   return img ? (
     <img
       src={img}
-      className={twMerge('flex justify-center items-center space-x-4 object-cover', size ? avatarSize[size] : 'w-10 h-10', rounded ? "rounded-full" : "rounded-lg")}
+      className={twMerge(
+        "flex items-center justify-center space-x-4 object-cover",
+        size ? avatarSize[size] : "h-10 w-10",
+        rounded ? "rounded-full" : "rounded-lg"
+      )}
       {...props}
     ></img>
   ) : (
     <div
       className={twMerge(
-        'relative inline-flex items-center justify-center overflow-hidden',
+        "relative inline-flex items-center justify-center overflow-hidden",
         bgColor,
-        size ? avatarSize[size] : 'w-10 h-10', rounded ? "rounded-full" : "rounded-lg"
+        size ? avatarSize[size] : "h-10 w-10",
+        rounded ? "rounded-full" : "rounded-lg"
       )}
       {...props}
     >
-      <span className={twMerge('text-gray-600 dark:text-gray-300', size ? fontSize[size] : 'text-md')}>{placeholderInitials.toUpperCase()}</span>
+      <span
+        className={twMerge(
+          "text-gray-600 dark:text-gray-300",
+          size ? fontSize[size] : "text-md"
+        )}
+      >
+        {placeholderInitials.toUpperCase()}
+      </span>
     </div>
-  )
+  );
 }
 
 Avatar.displayName = "Avatar";
@@ -80,4 +102,4 @@ Avatar.propTypes = {
   placeholderInitials: PropTypes.string.isRequired,
   /** Boolean to determine if avatar is circular */
   rounded: PropTypes.bool,
-}
+};

package/src/badge.tsx

@@ -1,52 +1,60 @@
 //@ts-nocheck
-import { variantProps } from 'classname-variants/react'
-import PropTypes from 'prop-types'
-import { twMerge } from 'tailwind-merge'
+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', className, children }) {
+export function Badge({ color = "gray", size = "xs", className, children }) {
   return (
-    <div className={twMerge('flex p-4', className)}>
+    <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']),
+  size: PropTypes.oneOf(["xs", "sm"]),
   /** Additional classes */
   className: PropTypes.string,
-}
+};
 
-Badge.displayName = 'Badge'
+Badge.displayName = "Badge";

package/src/breadcrumb.tsx

@@ -1,68 +1,75 @@
 //@ts-nocheck
-import { HiOutlineChevronRight } from 'react-icons/hi'
-import PropTypes from 'prop-types'
+import { HiOutlineChevronRight } from "react-icons/hi";
+import PropTypes from "prop-types";
 
 export function Breadcrumb({ children }) {
   return (
     <nav className="flex" aria-label="Breadcrumb">
-      <ol className="inline-flex items-center space-x-1 md:space-x-3">{children}</ol>
+      <ol className="inline-flex items-center space-x-1 md:space-x-3">
+        {children}
+      </ol>
     </nav>
-  )
+  );
 }
 export function BreadcrumbHome({ href, children }) {
   return (
     <li className="inline-flex items-center">
       {href ? (
         <a
-          className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer hover:underline"
+          className="flex cursor-pointer items-center text-sm font-medium text-gray-700 hover:text-gray-900 hover:underline dark:text-gray-400 dark:hover:text-white"
           href={href}
         >
           {children}
         </a>
       ) : (
-        <span className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400">{children}</span>
+        <span className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400">
+          {children}
+        </span>
       )}
     </li>
-  )
+  );
 }
 export function BreadcrumbItem({ href, children }) {
   return (
     <li className="inline-flex items-center">
-      <HiOutlineChevronRight className="w-3 h-3 mr-2.5" />
+      <HiOutlineChevronRight className="mr-2.5 h-3 w-3" />
       {href ? (
         <a
-          className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer hover:underline"
+          className="flex cursor-pointer items-center text-sm font-medium text-gray-700 hover:text-gray-900 hover:underline dark:text-gray-400 dark:hover:text-white"
           href={href}
         >
           {children}
         </a>
       ) : (
-        <span className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400" data-testid="flowbite-breadcrumb-item">
+        <span
+          className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400"
+          data-testid="flowbite-breadcrumb-item"
+        >
           {children}
         </span>
       )}
     </li>
-  )
+  );
 }
 
-Breadcrumb.Home = BreadcrumbHome
-Breadcrumb.Item = BreadcrumbItem
+Breadcrumb.Home = BreadcrumbHome;
+Breadcrumb.Item = BreadcrumbItem;
 
 Breadcrumb.propTypes = {
   /** Beadcrumb compound elements that make up the breadcrumb This is always Breadcrumb.Home and one or more of Breadcrumb.Item*/
-    children: PropTypes.node.isRequired
-}
+  children: PropTypes.node.isRequired,
+};
 
 BreadcrumbHome.propTypes = {
   /** Elements to show in the breadcrumb usually this will be an icon with just a string */
   href: PropTypes.string,
-  children: PropTypes.string.isRequired
-}
+  children: PropTypes.string.isRequired,
+};
 
 BreadcrumbItem.propTypes = {
-    /** Elements to show in the breadcrumb usually this will be just a string */
+  /** Elements to show in the breadcrumb usually this will be just a string */
   href: PropTypes.string,
-  children: PropTypes.string.isRequired
-}
+  children: PropTypes.string.isRequired,
+};
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = "Breadcrumb";

package/src/checkbox.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
-import { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import { twMerge } from 'tailwind-merge'
+import { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { twMerge } from "tailwind-merge";
 
 export const Checkbox = forwardRef(function Checkbox(props, ref) {
   return (
@@ -13,28 +13,36 @@ export const Checkbox = forwardRef(function Checkbox(props, ref) {
         ref={ref}
         type="checkbox"
         checked={props.checked}
-        className={twMerge(props.disabled && "opacity-40", props.className && props.className, "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600")}
-        />
+        className={twMerge(
+          props.disabled && "opacity-40",
+          props.className && props.className,
+          "h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
+        )}
+      />
       {props.label && (
-        <label id={`${props.id}-lbl`} htmlFor={props.id} className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+        <label
+          id={`${props.id}-lbl`}
+          htmlFor={props.id}
+          className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
           {props.label}
         </label>
       )}
     </div>
-  )
-})
+  );
+});
 
 Checkbox.propTypes = {
-    /** String for id of checkbox */
-    id: PropTypes.string.isRequired,
-    /** String for label placed after checkbox */
-    label: PropTypes.string,
-    /** Bool to determine if checkbox has been checked */
-    checked: PropTypes.bool,
-    /** Bool for disabled state of checkbox */
-    disabled: PropTypes.bool,
-    /** function to handle checked value */
-    onChange: PropTypes.func,
-}
+  /** String for id of checkbox */
+  id: PropTypes.string.isRequired,
+  /** String for label placed after checkbox */
+  label: PropTypes.string,
+  /** Bool to determine if checkbox has been checked */
+  checked: PropTypes.bool,
+  /** Bool for disabled state of checkbox */
+  disabled: PropTypes.bool,
+  /** function to handle checked value */
+  onChange: PropTypes.func,
+};
 
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";

package/src/color-picker.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SketchPicker } from "react-color";
 
 type Props = {
@@ -67,6 +67,4 @@ export function ColorPicker({
   );
 }
 
-ColorPicker.displayName = "ColorPicker"
-
-
+ColorPicker.displayName = "ColorPicker";

package/src/dashboard-notification.tsx

@@ -1,6 +1,5 @@
-import clsx from "clsx";
-import { Card } from "./card";
 import { HiXMark } from "react-icons/hi2";
+import { Card } from "./card";
 
 type Props = {
   onClose: () => void;