ekm-ui 0.4.49 → 0.4.51

package/dist/table-result-block.js

@@ -1,9 +1,11 @@
-export { e as TableResultBlock } from './chunk-UHSXJRCR.js';
+export { e as TableResultBlock } from './chunk-T5BCSSI5.js';
+import './chunk-22RUXGYW.js';
 import './chunk-LQKVFBLU.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-HW7AZG2V.js';
 import './chunk-HE5X7TRV.js';
 import './chunk-YZ2YZSNQ.js';
+import './chunk-FTVJMY65.js';
 import './chunk-YXTGVTGL.js';
 import './chunk-EZPRW5WN.js';
 import './chunk-XKE3VK6Z.js';
@@ -11,65 +13,64 @@ import './chunk-7Q6OMA2A.js';
 import './chunk-GVNUAH45.js';
 import './chunk-JAR3LP2K.js';
 import './chunk-EK5I26TX.js';
-import './chunk-22RUXGYW.js';
+import './chunk-FPXEE5TC.js';
 import './chunk-XXP5K6Y4.js';
 import './chunk-LWTESXND.js';
 import './chunk-AN66H4D6.js';
 import './chunk-GWERJBUR.js';
 import './chunk-I2DMRDYJ.js';
-import './chunk-FTVJMY65.js';
+import './chunk-LIXVY47P.js';
 import './chunk-Y5DEGGVQ.js';
 import './chunk-F7MTEILK.js';
 import './chunk-7WJGATIR.js';
 import './chunk-RTRHNOTP.js';
 import './chunk-XABECXZS.js';
-import './chunk-FPXEE5TC.js';
+import './chunk-AO5TGD7T.js';
 import './chunk-WVAVR5V6.js';
 import './chunk-2VS7BVWY.js';
 import './chunk-QCHLLBHM.js';
-import './chunk-LIXVY47P.js';
+import './chunk-IY6WVOAI.js';
 import './chunk-T2SOP5NE.js';
 import './chunk-AVTJXS4U.js';
 import './chunk-SFEJDNIA.js';
 import './chunk-6QS4FM7C.js';
 import './chunk-THOZT55U.js';
-import './chunk-E5KIDP3Z.js';
+import './chunk-LMMFRNNG.js';
 import './chunk-R3QJRZTP.js';
-import './chunk-AO5TGD7T.js';
 import './chunk-Z44LYPKH.js';
 import './chunk-CNJDESTL.js';
 import './chunk-W55BPRI4.js';
 import './chunk-AY4JB2QV.js';
 import './chunk-Y2GINGVR.js';
 import './chunk-ESJIQMQJ.js';
-import './chunk-IY6WVOAI.js';
-import './chunk-M4UBHZDH.js';
-import './chunk-TMO76FWT.js';
+import './chunk-VHPJC234.js';
+import './chunk-DL4PX4HA.js';
+import './chunk-6TL5EZJH.js';
 import './chunk-NDDDT4TO.js';
 import './chunk-QYKN3JZ5.js';
 import './chunk-SLIZ4TDR.js';
-import './chunk-F3BF3KTV.js';
+import './chunk-7SCKJ3BO.js';
 import './chunk-ANU7OAPA.js';
 import './chunk-ISA6E23B.js';
-import './chunk-3PTVTRDP.js';
-import './chunk-ER5CL77P.js';
-import './chunk-D5TS3JJH.js';
+import './chunk-6XUGQCY5.js';
+import './chunk-IC6K6O46.js';
 import './chunk-DSJ5TRZW.js';
 import './chunk-E4USZ2Q3.js';
 import './chunk-F47A36U7.js';
-import './chunk-UP4YN4XR.js';
-import './chunk-RRNNHYSF.js';
+import './chunk-PWW4HEGR.js';
 import './chunk-4FSPYK2A.js';
+import './chunk-BDTV2HMW.js';
 import './chunk-WLWG565K.js';
+import './chunk-GIZ3LLSA.js';
+import './chunk-ER5CL77P.js';
 import './chunk-5SEJVYKM.js';
 import './chunk-MBACKGWE.js';
 import './chunk-2OPJLYW6.js';
 import './chunk-P5IM3T4M.js';
-import './chunk-TRVGXTCI.js';
-import './chunk-XYGVDZRO.js';
-import './chunk-VOFMZ77E.js';
 import './chunk-TJMI4DH2.js';
+import './chunk-TRVGXTCI.js';
 import './chunk-6LHL364H.js';
+import './chunk-XYGVDZRO.js';
 import './chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=table-result-block.js.map

package/dist/toggleswitch.js

@@ -1,4 +1,4 @@
-export { a as ToggleSwitch } from './chunk-TMO76FWT.js';
+export { a as ToggleSwitch } from './chunk-6TL5EZJH.js';
 import './chunk-6LHL364H.js';
 import './chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map

package/package.json

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

package/src/account-manager.tsx

@@ -0,0 +1,64 @@
+import { HiXMark } from "react-icons/hi2";
+import { Card } from "./card";
+
+type Props = {
+  onClose: () => void;
+  title: string;
+  text: string;
+  children: JSX.Element;
+  imgURL: string;
+  type: "sm" | "lg";
+};
+
+export function AccountManager({
+  title,
+  text,
+  onClose,
+  children,
+  type,
+  imgURL,
+}: Props) {
+  return (
+    <Card className={`relative shadow-sm`}>
+      <div
+        onClick={onClose}
+        className="absolute right-2 top-2 cursor-pointer rounded p-1 transition hover:bg-gray-200 hover:dark:bg-gray-600 "
+      >
+        <HiXMark className="h-6 w-6 text-gray-400 dark:text-gray-300" />
+      </div>
+      <div
+        className={`flex flex-col gap-4  ${
+          type == "lg" ? "items-center justify-center " : "sm:flex-row"
+        }`}
+      >
+        <div className="flex-shrink-0">
+          <img
+            src={imgURL}
+            alt=""
+            className={`h-16 w-16 rounded-md  border border-gray-200 ${
+              type == "lg" ? "h-28 w-28 object-cover object-center" : ""
+            }`}
+          />
+        </div>
+        <div className={`${type == "lg" ? "flex flex-col items-center" : ""}`}>
+          <p
+            className={`mb-1 text-lg font-semibold dark:text-white ${
+              type == "lg" ? "text-center" : ""
+            }`}
+          >
+            {title}
+          </p>
+          <p
+            className={`mb-6 text-gray-500 dark:text-gray-400 ${
+              type == "lg" ? "text-center" : ""
+            }`}
+          >
+            {text}
+          </p>
+          {children}
+        </div>
+      </div>
+    </Card>
+  );
+}
+AccountManager.displayName = "AccountManager";

package/src/button.tsx

@@ -12,10 +12,10 @@ const buttonProps = variantProps({
       dark: "enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700",
       failure:
         "enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",
-      gray: "text-gray-900 bg-white border border-gray-200 enabled:hover:bg-gray-100 enabled:hover:text-cyan-700 :ring-cyan-700 focus:text-cyan-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2",
-      info: "enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800",
+      gray: "border border-gray-200 enabled:hover:bg-gray-100 focus:ring-blue-700 focus:text-blue-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2",
+      info: "enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
       light:
-        "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",
+        "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",
       success:
         "enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800",
       warning:
@@ -64,14 +64,14 @@ const buttonProps = variantProps({
         color: "info",
         outline: true,
       },
-      className: "text-cyan-700 border-cyan-700 hover:text-white",
+      className: "text-blue-700 border-blue-700 hover:text-white",
     },
     {
       variants: {
         color: "info",
         outline: false,
       },
-      className: "text-white bg-cyan-700",
+      className: "text-white bg-blue-700",
     },
     {
       variants: {
@@ -107,14 +107,14 @@ const buttonProps = variantProps({
         outline: true,
       },
       className:
-        "text-gray-900 bg-white hover:text-white border border-gray-200",
+        "text-gray-900 bg-white border border-gray-200",
     },
     {
       variants: {
         color: "gray",
         outline: false,
       },
-      className: "text-gray-900 bg-white border border-gray-200",
+      className: "text-gray-900 bg-gray-200 border border-gray-200",
     },
   ],
 });

package/src/dashboard-notification.tsx

@@ -1,65 +1,88 @@
-import { HiXMark } from "react-icons/hi2";
-import { Card } from "./card";
+import { HiExclamationCircle, HiInformationCircle } from "react-icons/hi2"
+
+const variantColours= Object.freeze([   
+    {
+        variant: 'default', 
+        titleColour: 'text-black', 
+        backgroundColour: 'bg-white border-gray-200 dark:border-gray-700 dark:bg-gray-800', 
+        detailsColour: 'text-gray-500',
+        icon: null
+    },
+    {
+        variant: 'alert', 
+        titleColour: 'text-red-900', 
+        backgroundColour: 'bg-red-50 border-red-800', 
+        detailsColour: 'text-red-800',
+        icon: (<HiExclamationCircle className='text-red-900 w-6 h-6 mr-1'/>)
+    },
+    {
+        variant: 'info', 
+        titleColour: 'text-blue-700', 
+        backgroundColour: 'bg-blue-50 border-blue-300', 
+        detailsColour: 'text-blue-800',
+        icon: (<HiInformationCircle className='text-blue-700 w-6 h-6 mr-1'/>)
+    },
+    {
+        variant: 'warning', 
+        titleColour: 'text-yellow-700', 
+        backgroundColour: 'bg-yellow-50 border-yellow-500', 
+        detailsColour: 'text-yellow-500',
+        icon: (<HiExclamationCircle className='text-yellow-700 w-6 h-6 mr-1'/>)
+    },
+]
+
+)
 
 type Props = {
-  onClose: () => void;
+  id: string;
   title: string;
-  text: string;
-  children: JSX.Element;
-  imgURL: string;
-  type: "sm" | "lg";
+  details: string | React.ReactNode;
+  imageNode: React.ReactNode;
+  buttonNode: React.ReactNode;
+  variant: "default" | "alert" | "info"| "warning" ;
+  showIcon: boolean;
+
 };
 
-export function DashboardNotification({
-  title,
-  text,
-  onClose,
-  children,
-  type,
-  imgURL,
-}: Props) {
-  return (
-    <Card className={`relative shadow-sm`}>
-      <div
-        onClick={onClose}
-        className="absolute right-2 top-2 cursor-pointer rounded p-1 transition hover:bg-gray-200 hover:dark:bg-gray-600 "
-      >
-        <HiXMark className="h-6 w-6 text-gray-400 dark:text-gray-300" />
-      </div>
-      <div
-        className={`flex flex-col gap-4  ${
-          type == "lg" ? "items-center justify-center " : "sm:flex-row"
-        }`}
-      >
-        <div className="flex-shrink-0">
-          <img
-            src={imgURL}
-            alt=""
-            className={`h-16 w-16 rounded-md  border border-gray-200 ${
-              type == "lg" ? "h-28 w-28 object-cover object-center" : ""
-            }`}
-          />
-        </div>
-        <div className={`${type == "lg" ? "flex flex-col items-center" : ""}`}>
-          <p
-            className={`mb-1 text-lg font-semibold dark:text-white ${
-              type == "lg" ? "text-center" : ""
-            }`}
-          >
-            {title}
-          </p>
-          <p
-            className={`mb-6 text-gray-500 dark:text-gray-400 ${
-              type == "lg" ? "text-center" : ""
-            }`}
-          >
-            {text}
-          </p>
-          {children}
+
+export function DashboardNotification({id, title, details, imageNode, buttonNode, variant='default', showIcon=false} : Props) {
+
+    const variantColor = variantColours.find(v => v.variant === variant) || variantColours[0]
+    return (
+        <div id={id} className={`flex flex-col rounded-lg border p-3 shadow-sm ${variantColor.backgroundColour}`}>
+            <div className="flex flex-col lg:flex-row items-center gap-4">
+                {imageNode && (
+                    <div className="flex-none">
+                        {imageNode}
+                    </div>
+                )}
+                {showIcon && (
+                    <div className="flex lg:hidden">
+                        {variantColor.icon}
+                    </div>
+                )}                
+                <div className="flex-1">
+                    <div className={`${variantColor.titleColour} text-lg font-semibold flex items-center`}>
+                        {showIcon && 
+                            <div className="hidden lg:flex">
+                                {variantColor.icon}
+                            </div>
+                        }
+                        {title}
+                    </div>
+                    <div className={`${variantColor.detailsColour} text-sm font-normal`}>
+                        {details}
+                    </div>
+                </div>
+                {buttonNode && (
+                    <div className="flex-none">
+                        {buttonNode}
+                    </div>
+                )}
+            </div>
         </div>
-      </div>
-    </Card>
-  );
+    )
 }
 
 DashboardNotification.displayName = "DashboardNotification";
+

package/src/index.tsx

@@ -17,7 +17,7 @@ export { ButtonGroupItem } from "./button-group-item";
 export { InputAddon } from "./input-addon";
 export { Alert } from "./alert";
 export { VideoDashboardNotification } from "./video-dashboard-notification";
-export { DashboardNotification } from "./dashboard-notification";
+export { AccountManager } from "./account-manager";
 export { VideoModal } from "./video-modal";
 export { InputCopy } from "./input-copy";
 export { DraggableStackedListItem } from "./draggable-stacked-list-item";
@@ -72,6 +72,7 @@ export { NBUI_Card_Paragraphs } from "./nbui/nbui-card-paragraphs";
 export { NBUI_Footer} from "./nbui/nbui-footer";
 export { DateTimeComponent } from "./date-time-component";
 export { PinFeatureButton} from "./pin-feature-button";
+export { DashboardNotification} from "./dashboard-notification";
 
 
 import "./styles.css";

package/src/progress-bar.tsx

@@ -13,20 +13,20 @@ const colors = Object.freeze({
 });
 
 const sizes = Object.freeze({
-  sm: "h-1.5 mb-4",
-  md: "h-2.5 mb-4",
-  lg: "h-4 mb-4",
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4",
   xl: "h-6",
 });
 
-export function ProgressBar({ progress, size = "md", color = "primary" }) {
+export function ProgressBar({ progress, size = "md", color = "primary", customColor = ""}) {
   return (
     <div
-      className={`w-full rounded-full bg-gray-200 ${sizes[size]} mb-4 dark:bg-gray-700`}
+      className={`w-full rounded-full bg-gray-200 ${sizes[size]} dark:bg-gray-700`}
     >
       <div
-        className={`${sizes[size]} rounded-full ${colors[color]}`}
-        style={{ width: `${progress}%` }}
+        className={`${sizes[size]} rounded-full ${customColor ? '' : colors[color]}`}
+        style={customColor ? { width: `${progress}%`, background: customColor } : { width: `${progress}%` }}
       ></div>
     </div>
   );
@@ -48,4 +48,6 @@ ProgressBar.propTypes = {
     "light",
     "dark",
   ]),
+  /** Hex color (including #) of progress bar (used instead of color property). Optional */
+  customColor: PropTypes.string,
 };

package/src/toggleswitch.tsx

@@ -6,9 +6,7 @@ export const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) {
   return (
     <div className={props.className && props.className}>
        <label
-          className={`relative mb-5 inline-flex items-center ${
-            props.disabled && "cursor-not-allowed opacity-50"
-          }`}
+          className={`relative inline-flex items-center ${props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
           >
           <input
             id={props.id}

package/dist/chunk-3PTVTRDP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dashboard-notification.tsx"],"names":["HiXMark","jsx","jsxs","DashboardNotification","title","text","onClose","children","type","imgURL","Card"],"mappings":"mCAAA,OAAS,WAAAA,MAAe,kBA0BhB,cAAAC,EAgBA,QAAAC,MAhBA,oBAdD,SAASC,EAAsB,CACpC,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,OAAAC,CACF,EAAU,CACR,OACEP,EAACQ,EAAA,CAAK,UAAW,qBACf,UAAAT,EAAC,OACC,QAASK,EACT,UAAU,yGAEV,SAAAL,EAACD,EAAA,CAAQ,UAAU,2CAA2C,EAChE,EACAE,EAAC,OACC,UAAW,wBACTM,GAAQ,KAAO,+BAAiC,gBAGlD,UAAAP,EAAC,OAAI,UAAU,gBACb,SAAAA,EAAC,OACC,IAAKQ,EACL,IAAI,GACJ,UAAW,gDACTD,GAAQ,KAAO,uCAAyC,KAE5D,EACF,EACAN,EAAC,OAAI,UAAW,GAAGM,GAAQ,KAAO,6BAA+B,KAC/D,UAAAP,EAAC,KACC,UAAW,8CACTO,GAAQ,KAAO,cAAgB,KAGhC,SAAAJ,EACH,EACAH,EAAC,KACC,UAAW,yCACTO,GAAQ,KAAO,cAAgB,KAGhC,SAAAH,EACH,EACCE,GACH,GACF,GACF,CAEJ,CAEAJ,EAAsB,YAAc","sourcesContent":["import { HiXMark } from \"react-icons/hi2\";\nimport { Card } from \"./card\";\n\ntype Props = {\n  onClose: () => void;\n  title: string;\n  text: string;\n  children: JSX.Element;\n  imgURL: string;\n  type: \"sm\" | \"lg\";\n};\n\nexport function DashboardNotification({\n  title,\n  text,\n  onClose,\n  children,\n  type,\n  imgURL,\n}: Props) {\n  return (\n    <Card className={`relative shadow-sm`}>\n      <div\n        onClick={onClose}\n        className=\"absolute right-2 top-2 cursor-pointer rounded p-1 transition hover:bg-gray-200 hover:dark:bg-gray-600 \"\n      >\n        <HiXMark className=\"h-6 w-6 text-gray-400 dark:text-gray-300\" />\n      </div>\n      <div\n        className={`flex flex-col gap-4  ${\n          type == \"lg\" ? \"items-center justify-center \" : \"sm:flex-row\"\n        }`}\n      >\n        <div className=\"flex-shrink-0\">\n          <img\n            src={imgURL}\n            alt=\"\"\n            className={`h-16 w-16 rounded-md  border border-gray-200 ${\n              type == \"lg\" ? \"h-28 w-28 object-cover object-center\" : \"\"\n            }`}\n          />\n        </div>\n        <div className={`${type == \"lg\" ? \"flex flex-col items-center\" : \"\"}`}>\n          <p\n            className={`mb-1 text-lg font-semibold dark:text-white ${\n              type == \"lg\" ? \"text-center\" : \"\"\n            }`}\n          >\n            {title}\n          </p>\n          <p\n            className={`mb-6 text-gray-500 dark:text-gray-400 ${\n              type == \"lg\" ? \"text-center\" : \"\"\n            }`}\n          >\n            {text}\n          </p>\n          {children}\n        </div>\n      </div>\n    </Card>\n  );\n}\n\nDashboardNotification.displayName = \"DashboardNotification\";\n"]}

package/dist/chunk-E5KIDP3Z.js

@@ -1,9 +0,0 @@
-import { a } from './chunk-6LHL364H.js';
-import { e } from './chunk-Z4LPO673.js';
-import { jsx } from 'react/jsx-runtime';
-
-var r=e(a(),1);var o=Object.freeze({primary:"bg-blue-600 dark:bg-blue-500",secondary:"bg-gray-600 dark:bg-gray-500",success:"bg-green-600 dark:bg-green-500",danger:"bg-red-600 dark:bg-red-500",warning:"bg-yellow-600 dark:bg-yellow-500",info:"bg-blue-600 dark:bg-blue-500",light:"bg-gray-100 dark:bg-gray-900",dark:"bg-gray-800 dark:bg-gray-200"}),g=Object.freeze({sm:"h-1.5 mb-4",md:"h-2.5 mb-4",lg:"h-4 mb-4",xl:"h-6"});function n({progress:d,size:e="md",color:b="primary"}){return jsx("div",{className:`w-full rounded-full bg-gray-200 ${g[e]} mb-4 dark:bg-gray-700`,children:jsx("div",{className:`${g[e]} rounded-full ${o[b]}`,style:{width:`${d}%`}})})}n.propTypes={progress:r.default.number.isRequired,size:r.default.oneOf(["sm","md","lg","xl"]),color:r.default.oneOf(["primary","secondary","success","danger","warning","info","light","dark"])};
-
-export { n as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-E5KIDP3Z.js.map

package/dist/chunk-E5KIDP3Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/progress-bar.tsx"],"names":["import_prop_types","jsx","colors","sizes","ProgressBar","progress","size","color","PropTypes"],"mappings":"gFACA,IAAAA,EAAsB,SAyBhB,cAAAC,MAAA,oBAvBN,IAAMC,EAAS,OAAO,OAAO,CAC3B,QAAS,+BACT,UAAW,+BACX,QAAS,iCACT,OAAQ,6BACR,QAAS,mCACT,KAAM,+BACN,MAAO,+BACP,KAAM,8BACR,CAAC,EAEKC,EAAQ,OAAO,OAAO,CAC1B,GAAI,aACJ,GAAI,aACJ,GAAI,WACJ,GAAI,KACN,CAAC,EAEM,SAASC,EAAY,CAAE,SAAAC,EAAU,KAAAC,EAAO,KAAM,MAAAC,EAAQ,SAAU,EAAG,CACxE,OACEN,EAAC,OACC,UAAW,mCAAmCE,EAAMG,CAAI,0BAExD,SAAAL,EAAC,OACC,UAAW,GAAGE,EAAMG,CAAI,kBAAkBJ,EAAOK,CAAK,IACtD,MAAO,CAAE,MAAO,GAAGF,IAAY,EAChC,EACH,CAEJ,CAEAD,EAAY,UAAY,CAEtB,SAAU,EAAAI,QAAU,OAAO,WAE3B,KAAM,EAAAA,QAAU,MAAM,CAAC,KAAM,KAAM,KAAM,IAAI,CAAC,EAE9C,MAAO,EAAAA,QAAU,MAAM,CACrB,UACA,YACA,UACA,SACA,UACA,OACA,QACA,MACF,CAAC,CACH","sourcesContent":["//@ts-nocheck\nimport PropTypes from \"prop-types\";\n\nconst colors = Object.freeze({\n  primary: \"bg-blue-600 dark:bg-blue-500\",\n  secondary: \"bg-gray-600 dark:bg-gray-500\",\n  success: \"bg-green-600 dark:bg-green-500\",\n  danger: \"bg-red-600 dark:bg-red-500\",\n  warning: \"bg-yellow-600 dark:bg-yellow-500\",\n  info: \"bg-blue-600 dark:bg-blue-500\",\n  light: \"bg-gray-100 dark:bg-gray-900\",\n  dark: \"bg-gray-800 dark:bg-gray-200\",\n});\n\nconst sizes = Object.freeze({\n  sm: \"h-1.5 mb-4\",\n  md: \"h-2.5 mb-4\",\n  lg: \"h-4 mb-4\",\n  xl: \"h-6\",\n});\n\nexport function ProgressBar({ progress, size = \"md\", color = \"primary\" }) {\n  return (\n    <div\n      className={`w-full rounded-full bg-gray-200 ${sizes[size]} mb-4 dark:bg-gray-700`}\n    >\n      <div\n        className={`${sizes[size]} rounded-full ${colors[color]}`}\n        style={{ width: `${progress}%` }}\n      ></div>\n    </div>\n  );\n}\n\nProgressBar.propTypes = {\n  /** Current progress to be shown (defaults to 0) */\n  progress: PropTypes.number.isRequired,\n  /** Size of the progress bar (defaults to md) */\n  size: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n  /** Color of the progress bar (defaults to primary) */\n  color: PropTypes.oneOf([\n    \"primary\",\n    \"secondary\",\n    \"success\",\n    \"danger\",\n    \"warning\",\n    \"info\",\n    \"light\",\n    \"dark\",\n  ]),\n};\n"]}

package/dist/chunk-TMO76FWT.js

@@ -1,10 +0,0 @@
-import { a as a$1 } from './chunk-6LHL364H.js';
-import { e } from './chunk-Z4LPO673.js';
-import { forwardRef } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var a=e(a$1(),1);var t=forwardRef(function(e,l){return jsx("div",{className:e.className&&e.className,children:jsxs("label",{className:`relative mb-5 inline-flex items-center ${e.disabled&&"cursor-not-allowed opacity-50"}`,children:[jsx("input",{id:e.id,ref:l,type:"checkbox",className:"peer sr-only",onChange:e.onChange,name:e.name,checked:e.checked,disabled:e.disabled}),jsx("div",{className:"peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700"}),e.label&&jsx("span",{class:"ms-3 text-sm font-medium text-gray-900 dark:text-gray-300",children:e.label})]})})});t.propTypes={id:a.default.string.isRequired,checked:a.default.bool,disabled:a.default.bool,onChange:a.default.func,label:a.default.string};t.displayName="ToggleSwitch";
-
-export { t as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-TMO76FWT.js.map

package/dist/chunk-TMO76FWT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggleswitch.tsx"],"names":["import_prop_types","forwardRef","jsx","jsxs","ToggleSwitch","props","ref","PropTypes"],"mappings":"gFACA,IAAAA,EAAsB,SACtB,OAAS,cAAAC,MAAkB,QAKpB,OAKG,OAAAC,EALH,QAAAC,MAAA,oBAHA,IAAMC,EAAeH,EAAW,SAAsBI,EAAOC,EAAK,CACvE,OACEJ,EAAC,OAAI,UAAWG,EAAM,WAAaA,EAAM,UACtC,SAAAF,EAAC,SACE,UAAW,0CACTE,EAAM,UAAY,kCAGpB,UAAAH,EAAC,SACC,GAAIG,EAAM,GACV,IAAKC,EACL,KAAK,WACL,UAAW,eACX,SAAUD,EAAM,SAChB,KAAMA,EAAM,KACZ,QAASA,EAAM,QACf,SAAUA,EAAM,SAChB,EACFH,EAAC,OAAI,UAAU,qYAAqY,EACnZG,EAAM,OACLH,EAAC,QAAK,MAAM,4DACT,SAAAG,EAAM,MACT,GAEJ,EACF,CAEN,CAAC,EAEDD,EAAa,UAAY,CAEvB,GAAI,EAAAG,QAAU,OAAO,WAErB,QAAS,EAAAA,QAAU,KAEnB,SAAU,EAAAA,QAAU,KAEpB,SAAU,EAAAA,QAAU,KACpB,MAAO,EAAAA,QAAU,MACnB,EAEAH,EAAa,YAAc","sourcesContent":["//@ts-nocheck\nimport PropTypes from \"prop-types\";\nimport { forwardRef } from \"react\";\n\nexport const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) {\n  return (\n    <div className={props.className && props.className}>\n       <label\n          className={`relative mb-5 inline-flex items-center ${\n            props.disabled && \"cursor-not-allowed opacity-50\"\n          }`}\n          >\n          <input\n            id={props.id}\n            ref={ref}\n            type=\"checkbox\"\n            className={`peer sr-only`}\n            onChange={props.onChange}\n            name={props.name}\n            checked={props.checked}\n            disabled={props.disabled}\n            />\n          <div className=\"peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700\" />\n          {props.label && (\n            <span class=\"ms-3 text-sm font-medium text-gray-900 dark:text-gray-300\">\n              {props.label}\n            </span>\n          )}\n        </label>\n      </div>\n  );\n});\n\nToggleSwitch.propTypes = {\n  /** Id for Toggle switch */\n  id: PropTypes.string.isRequired,\n  /** Bool to determine if ToggleSwitch has been checked */\n  checked: PropTypes.bool,\n  /** Bool to disable toggle switch */\n  disabled: PropTypes.bool,\n  /** function to handle checked value */\n  onChange: PropTypes.func,\n  label: PropTypes.string,\n};\n\nToggleSwitch.displayName = \"ToggleSwitch\";\n"]}

package/dist/chunk-VOFMZ77E.js

@@ -1,11 +0,0 @@
-import { a as a$2 } from './chunk-TJMI4DH2.js';
-import { a } from './chunk-6LHL364H.js';
-import { e as e$1, c, b, a as a$1 } from './chunk-Z4LPO673.js';
-import { variantProps } from 'classname-variants/react';
-import { jsx } from 'react/jsx-runtime';
-
-var e=e$1(a(),1);var v=variantProps({base:"group flex items-stretch items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none rounded-lg",variants:{color:{default:"focus:outline-none text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800 rounded-lg focus:ring-2",dark:"enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700",failure:"enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",gray:"text-gray-900 bg-white border border-gray-200 enabled:hover:bg-gray-100 enabled:hover:text-cyan-700 :ring-cyan-700 focus:text-cyan-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2",info:"enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800",light:"text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",success:"enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800",warning:"enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900"},disabled:{true:"cursor-not-allowed opacity-50",false:""},outline:{true:"border",false:""}},compoundVariants:[{variants:{color:"dark",outline:!0},className:"text-gray-800 border-gray-800 hover:text-white"},{variants:{color:"dark",outline:!1},className:"border-0 text-white bg-gray-800"},{variants:{color:"failure",outline:!0},className:"text-red-700 border-red-700 hover:text-white"},{variants:{color:"failure",outline:!1},className:"border-0 text-white bg-red-700"},{variants:{color:"info",outline:!0},className:"text-cyan-700 border-cyan-700 hover:text-white"},{variants:{color:"info",outline:!1},className:"text-white bg-cyan-700"},{variants:{color:"success",outline:!0},className:"text-green-700 border-green-700 hover:text-white"},{variants:{color:"success",outline:!1},className:"text-white bg-green-700"},{variants:{color:"warning",outline:!0},className:"text-yellow-400 border-yellow-400 hover:text-white"},{variants:{color:"warning",outline:!1},className:"text-white bg-yellow-400"},{variants:{color:"gray",outline:!0},className:"text-gray-900 bg-white hover:text-white border border-gray-200"},{variants:{color:"gray",outline:!1},className:"text-gray-900 bg-white border border-gray-200"}]}),m=Object.freeze({xs:"text-xs px-2 py-1",sm:"text-sm px-3 py-1.5",md:"text-sm px-4 py-2",lg:"text-base px-5 py-2.5",xl:"text-base px-6 py-3"});function i(k){var t=k,{color:g="default",disabled:d,outline:b$1,size:c$1="md",children:u,className:a}=t,y=c(t,["color","disabled","outline","size","children","className"]);return jsx("button",b(a$1(a$1({},v({color:g,disabled:d,outline:b$1,className:a})),y),{children:jsx("span",{className:a$2("flex items-center justify-center rounded-md transition-all duration-200",m[c$1],a),children:u})}))}i.propTypes={color:e.default.oneOf(["default","dark","failure","gray","info","light","success","warning"]),size:e.default.oneOf(["xs","sm","md","lg","xl"]),disabled:e.default.bool,outline:e.default.bool,addon:e.default.element,icon:e.default.element};i.displayName="Button";
-
-export { i as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-VOFMZ77E.js.map

package/dist/chunk-VOFMZ77E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button.tsx"],"names":["variantProps","import_prop_types","jsx","buttonProps","sizes","Button","_a","_b","color","disabled","outline","size","children","className","props","__objRest","__spreadProps","__spreadValues","twMerge","PropTypes"],"mappings":"6IACA,OAAS,gBAAAA,MAAoB,2BAE7B,IAAAC,EAAsB,SA4IhB,cAAAC,MAAA,oBA1IN,IAAMC,EAAcH,EAAa,CAC/B,KAAM,uIACN,SAAU,CACR,MAAO,CACL,QACE,qNACF,KAAM,2JACN,QACE,iHACF,KAAM,+QACN,KAAM,sIACN,MACE,4PACF,QACE,yHACF,QACE,2FACJ,EACA,SAAU,CACR,KAAM,gCACN,MAAO,EACT,EACA,QAAS,CACP,KAAM,SACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,gDACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,iCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,8CACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,gCACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,gDACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,wBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,kDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,yBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,oDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,0BACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UACE,gEACJ,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,+CACb,CACF,CACF,CAAC,EAEKI,EAAQ,OAAO,OAAO,CAC1B,GAAI,oBACJ,GAAI,sBACJ,GAAI,oBACJ,GAAI,wBACJ,GAAI,qBACN,CAAC,EAEM,SAASC,EAAOC,EAQpB,CARoB,IAAAC,EAAAD,EACrB,OAAAE,EAAQ,UACR,SAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,UAAAC,CAvIF,EAiIuBN,EAOlBO,EAAAC,EAPkBR,EAOlB,CANH,QACA,WACA,UACA,OACA,WACA,cAGA,OACEL,EAAC,SAAAc,EAAAC,IAAA,GACKd,EAAY,CAAE,MAAAK,EAAO,SAAAC,EAAU,QAAAC,EAAS,UAAAG,CAAU,CAAC,GACnDC,GAFL,CAIC,SAAAZ,EAAC,QACC,UAAWgB,EACT,0EACAd,EAAMO,CAAI,EACVE,CACF,EAEC,SAAAD,EACH,GACF,CAEJ,CAEAP,EAAO,UAAY,CAEjB,MAAO,EAAAc,QAAU,MAAM,CACrB,UACA,OACA,UACA,OACA,OACA,QACA,UACA,SACF,CAAC,EAED,KAAM,EAAAA,QAAU,MAAM,CAAC,KAAM,KAAM,KAAM,KAAM,IAAI,CAAC,EAEpD,SAAU,EAAAA,QAAU,KAEpB,QAAS,EAAAA,QAAU,KAEnB,MAAO,EAAAA,QAAU,QAEjB,KAAM,EAAAA,QAAU,OAClB,EAEAd,EAAO,YAAc","sourcesContent":["//@ts-nocheck\nimport { variantProps } from \"classname-variants/react\";\nimport { twMerge } from \"tailwind-merge\";\nimport PropTypes from \"prop-types\";\n\nconst buttonProps = variantProps({\n  base: \"group flex items-stretch items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none rounded-lg\",\n  variants: {\n    color: {\n      default:\n        \"focus:outline-none text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800 rounded-lg focus:ring-2\",\n      dark: \"enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700\",\n      failure:\n        \"enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900\",\n      gray: \"text-gray-900 bg-white border border-gray-200 enabled:hover:bg-gray-100 enabled:hover:text-cyan-700 :ring-cyan-700 focus:text-cyan-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2\",\n      info: \"enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800\",\n      light:\n        \"text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700\",\n      success:\n        \"enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800\",\n      warning:\n        \"enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900\",\n    },\n    disabled: {\n      true: \"cursor-not-allowed opacity-50\",\n      false: \"\",\n    },\n    outline: {\n      true: \"border\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        color: \"dark\",\n        outline: true,\n      },\n      className: \"text-gray-800 border-gray-800 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"dark\",\n        outline: false,\n      },\n      className: \"border-0 text-white bg-gray-800\",\n    },\n    {\n      variants: {\n        color: \"failure\",\n        outline: true,\n      },\n      className: \"text-red-700 border-red-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"failure\",\n        outline: false,\n      },\n      className: \"border-0 text-white bg-red-700\",\n    },\n    {\n      variants: {\n        color: \"info\",\n        outline: true,\n      },\n      className: \"text-cyan-700 border-cyan-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"info\",\n        outline: false,\n      },\n      className: \"text-white bg-cyan-700\",\n    },\n    {\n      variants: {\n        color: \"success\",\n        outline: true,\n      },\n      className: \"text-green-700 border-green-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"success\",\n        outline: false,\n      },\n      className: \"text-white bg-green-700\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        outline: true,\n      },\n      className: \"text-yellow-400 border-yellow-400 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        outline: false,\n      },\n      className: \"text-white bg-yellow-400\",\n    },\n    {\n      variants: {\n        color: \"gray\",\n        outline: true,\n      },\n      className:\n        \"text-gray-900 bg-white hover:text-white border border-gray-200\",\n    },\n    {\n      variants: {\n        color: \"gray\",\n        outline: false,\n      },\n      className: \"text-gray-900 bg-white border border-gray-200\",\n    },\n  ],\n});\n\nconst sizes = Object.freeze({\n  xs: \"text-xs px-2 py-1\",\n  sm: \"text-sm px-3 py-1.5\",\n  md: \"text-sm px-4 py-2\",\n  lg: \"text-base px-5 py-2.5\",\n  xl: \"text-base px-6 py-3\",\n});\n\nexport function Button({\n  color = \"default\",\n  disabled,\n  outline,\n  size = \"md\",\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <button\n      {...buttonProps({ color, disabled, outline, className })}\n      {...props}\n    >\n      <span\n        className={twMerge(\n          \"flex items-center justify-center rounded-md transition-all duration-200\",\n          sizes[size],\n          className\n        )}\n      >\n        {children}\n      </span>\n    </button>\n  );\n}\n\nButton.propTypes = {\n  /** String for color of button */\n  color: PropTypes.oneOf([\n    \"default\",\n    \"dark\",\n    \"failure\",\n    \"gray\",\n    \"info\",\n    \"light\",\n    \"success\",\n    \"warning\",\n  ]),\n  /** String to determine the size of the badge. \"xs, sm, md, lg, xl\" */\n  size: PropTypes.oneOf([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]),\n  /** Bool to disable button */\n  disabled: PropTypes.bool,\n  /** Bool to outline button */\n  outline: PropTypes.bool,\n  /** element for addon on button */\n  addon: PropTypes.element,\n  /** element for icon on button */\n  icon: PropTypes.element,\n};\n\nButton.displayName = \"Button\";\n"]}