moldekit-react 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,56 +1,154 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { InfoIcon, Check, ChevronDown, Calendar, DotIcon, Clock, Menu } from 'lucide-react';
 import { DynamicIcon } from 'lucide-react/dynamic';
+import { useState, useRef, useEffect, useId, useCallback } from 'react';
 
 function MkButton({
   variant = "filled",
   color = "neutral",
-  size = "medium",
+  size = "md",
   fullWidth = false,
+  iconOnly = false,
   iconName,
   className = "",
   disabled,
   children,
   ...props
 }) {
-  const baseStyles = "flex items-center justify-center text-center rounded-[7px] uppercase focus:outline-none transition-colors duration-300disabled:pointer-events-none disabled:cursor-not-allowed";
-  const variantStyles = {
-    filled: "font-medium rounded-[7px] uppercase focus:outline-none transition-colors duration-300 disabled:pointer-events-none disabled:cursor-not-allowed",
-    outlined: "font-medium rounded-[7px] uppercase border focus:outline-none transition-colors duration-300 disabled:pointer-events-none disabled:cursor-not-allowed",
-    transparent: "font-medium rounded-[7px] uppercase bg-transparent focus:outline-none transition-colors duration-300 disabled:pointer-events-none disabled:cursor-not-allowed",
-    iconOnly: "rounded-[7px] focus:outline-none transition-colors duration-300 disabled:pointer-events-none disabled:cursor-not-allowed p-2"
-  };
+  const baseStyles = "flex items-center justify-center transition-colors duration-300text-center rounded-[7px] uppercasedisabled:pointer-events-none disabled:cursor-not-allowed focus:outline-none";
   const colorStyles = {
     filled: {
-      primary: "bg-primary-400 text-primary-800 hover:bg-primary-500 hover:text-primary-900 disabled:bg-primary-100 disabled:text-primary-200",
-      neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-500 hover:text-neutral-900 disabled:bg-neutral-200 disabled:text-neutral-400",
-      success: "bg-success-400 text-success-800 hover:bg-success-500 hover:text-success-900 disabled:bg-success-200 disabled:text-success-400",
-      info: "bg-info-400 text-info-800 hover:bg-info-500 hover:text-info-900 disabled:bg-info-200 disabled:text-info-400",
-      danger: "bg-danger-400 text-danger-800 hover:bg-danger-500 hover:text-danger-900 disabled:bg-danger-200 disabled:text-danger-400"
+      primary: [
+        "bg-[var(--button-filled-primary-bg)]",
+        "text-[var(--button-filled-primary-text)]",
+        "hover:bg-[var(--button-filled-primary-hover-bg)]",
+        "hover:text-[var(--button-filled-primary-hover-text)]",
+        "disabled:bg-[var(--button-filled-primary-disabled-bg)]",
+        "disabled:text-[var(--button-filled-primary-disabled-text)]"
+      ].join(" "),
+      neutral: [
+        "bg-[var(--button-filled-neutral-bg)]",
+        "text-[var(--button-filled-neutral-text)]",
+        "hover:bg-[var(--button-filled-neutral-hover-bg)]",
+        "hover:text-[var(--button-filled-neutral-hover-text)]",
+        "disabled:bg-[var(--button-filled-neutral-disabled-bg)]",
+        "disabled:text-[var(--button-filled-neutral-disabled-text)]"
+      ].join(" "),
+      success: [
+        "bg-[var(--button-filled-success-bg)]",
+        "text-[var(--button-filled-success-text)]",
+        "hover:bg-[var(--button-filled-success-hover-bg)]",
+        "hover:text-[var(--button-filled-success-hover-text)]",
+        "disabled:bg-[var(--button-filled-success-disabled-bg)]",
+        "disabled:text-[var(--button-filled-success-disabled-text)]"
+      ].join(" "),
+      info: [
+        "bg-[var(--button-filled-info-bg)]",
+        "text-[var(--button-filled-info-text)]",
+        "hover:bg-[var(--button-filled-info-hover-bg)]",
+        "hover:text-[var(--button-filled-info-hover-text)]",
+        "disabled:bg-[var(--button-filled-info-disabled-bg)]",
+        "disabled:text-[var(--button-filled-info-disabled-text)]"
+      ].join(" "),
+      danger: [
+        "bg-[var(--button-filled-danger-bg)]",
+        "text-[var(--button-filled-danger-text)]",
+        "hover:bg-[var(--button-filled-danger-hover-bg)]",
+        "hover:text-[var(--button-filled-danger-hover-text)]",
+        "disabled:bg-[var(--button-filled-danger-disabled-bg)]",
+        "disabled:text-[var(--button-filled-danger-disabled-text)]"
+      ].join(" "),
+      warning: [
+        "bg-[var(--button-filled-warning-bg)]",
+        "text-[var(--button-filled-warning-text)]",
+        "hover:bg-[var(--button-filled-warning-hover-bg)]",
+        "hover:text-[var(--button-filled-warning-hover-text)]",
+        "disabled:bg-[var(--button-filled-warning-disabled-bg)]",
+        "disabled:text-[var(--button-filled-warning-disabled-text)]"
+      ].join(" ")
     },
     outlined: {
-      primary: "border-primary-400 text-primary-800 bg-primary-50 hover:bg-primary-100 focus:bg-primary-100",
-      neutral: "border-neutral-200 text-neutral-700 bg-neutral-50 hover:bg-neutral-200 focus:bg-neutral-100",
-      success: "border-success-400 text-success-800 bg-success-50 hover:bg-success-100 focus:bg-success-100"
+      primary: [
+        "border border-[var(--button-outlined-primary-border)]",
+        "text-[var(--button-outlined-primary-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-primary-hover-bg)]"
+      ].join(" "),
+      neutral: [
+        "border border-[var(--button-outlined-neutral-border)]",
+        "text-[var(--button-outlined-neutral-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-neutral-hover-bg)]"
+      ].join(" "),
+      success: [
+        "border border-[var(--button-outlined-success-border)]",
+        "text-[var(--button-outlined-success-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-success-hover-bg)]"
+      ].join(" "),
+      info: [
+        "border border-[var(--button-outlined-info-border)]",
+        "text-[var(--button-outlined-info-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-info-hover-bg)]"
+      ].join(" "),
+      danger: [
+        "border border-[var(--button-outlined-danger-border)]",
+        "text-[var(--button-outlined-danger-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-danger-hover-bg)]"
+      ].join(" "),
+      warning: [
+        "border border-[var(--button-outlined-warning-border)]",
+        "text-[var(--button-outlined-warning-text)]",
+        "bg-white",
+        "hover:bg-[var(--button-outlined-warning-hover-bg)]"
+      ].join(" ")
     },
     transparent: {
-      primary: "text-primary-800 bg-transparent hover:bg-primary-50 focus:bg-primary-100",
-      neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 focus:bg-neutral-200",
-      success: "text-success-800 bg-transparent hover:bg-success-50 focus:bg-success-100"
-    },
-    iconOnly: {
-      primary: "bg-primary-400 text-primary-800 hover:bg-primary-500 focus:bg-primary-100",
-      neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-500 focus:bg-neutral-100",
-      success: "bg-success-400 text-success-800 hover:bg-success-500 focus:bg-success-100"
+      primary: [
+        "text-[var(--button-transparent-primary-text)]",
+        "hover:bg-[var(--button-transparent-primary-hover-bg)]"
+      ].join(" "),
+      neutral: [
+        "text-[var(--button-transparent-neutral-text)]",
+        "hover:bg-[var(--button-transparent-neutral-hover-bg)]"
+      ].join(" "),
+      success: [
+        "text-[var(--button-transparent-success-text)]",
+        "hover:bg-[var(--button-transparent-success-hover-bg)]"
+      ].join(" "),
+      info: [
+        "text-[var(--button-transparent-info-text)]",
+        "hover:bg-[var(--button-transparent-info-hover-bg)]"
+      ].join(" "),
+      danger: [
+        "text-[var(--button-transparent-danger-text)]",
+        "hover:bg-[var(--button-transparent-danger-hover-bg)]"
+      ].join(" "),
+      warning: [
+        "text-[var(--button-transparent-warning-text)]",
+        "hover:bg-[var(--button-transparent-warning-hover-bg)]"
+      ].join(" ")
     }
   };
   const sizeStyles = {
-    small: "px-3 py-1 text-sm",
-    medium: "px-4 py-2 text-base",
-    large: "px-6 py-3 text-lg"
+    sm: "px-3 py-1 text-sm",
+    md: "px-4 py-2 text-md",
+    lg: "px-6 py-3 text-lg"
+  };
+  const iconOnlySizeStyles = {
+    small: "p-1 w-7 h-7",
+    medium: "p-2 w-10 h-10",
+    large: "p-2 w-13 h-13"
+  };
+  const iconSize = {
+    sm: "14",
+    md: "16",
+    lg: "18"
   };
-  const variantStyleClass = variantStyles[variant];
-  const colorStyleClass = colorStyles[variant][color];
-  const sizeStyleClass = variant === "iconOnly" ? "p-2 w-10 h-10" : sizeStyles[size];
+  const styleClass = colorStyles[variant][color];
+  const sizeStyleClass = iconOnly ? iconOnlySizeStyles[size] : sizeStyles[size];
   const fullWidthClass = fullWidth ? "w-full" : "";
   return /* @__PURE__ */ jsxs(
     "button",
@@ -58,18 +156,1226 @@ function MkButton({
       type: "button",
       disabled,
       className: `${baseStyles} 
-                ${variantStyleClass}
-                ${colorStyleClass}
+                ${styleClass}
                 ${sizeStyleClass} 
                 ${fullWidthClass} 
                 ${className}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 16, className: "mr-2" }),
-        children
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: iconSize[size],
+            className: !iconOnly ? "mr-2" : ""
+          }
+        ),
+        iconOnly ? null : children
+      ]
+    }
+  );
+}
+
+function MkAlert({
+  label,
+  state = "info",
+  position = "top-right",
+  className
+}) {
+  const positionStyles = {
+    "top-right": "top-4 right-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  };
+  const baseStyles = [
+    "absolute z-[60]",
+    positionStyles[position],
+    "p-[20px] w-[380px]",
+    "bg-neutral-50 border-1 border-neutral-200 rounded-[12px]",
+    "flex flex-row items-center justify-between"
+  ].join(" ");
+  const labelStyles = "mk-caption inline-block align-middle pl-3.5 leading-none";
+  const stateStyle = {
+    info: "text-info-900"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${baseStyles} ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "inline-block align-middle", children: [
+      /* @__PURE__ */ jsx(
+        InfoIcon,
+        {
+          className: "inline-block align-middle",
+          color: "var(--color-info-700)"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: `${labelStyles} ${stateStyle[state]}`, children: label })
+    ] }),
+    /* @__PURE__ */ jsx(
+      MkButton,
+      {
+        color: "neutral",
+        iconOnly: true,
+        iconName: "x",
+        variant: "transparent"
+      }
+    )
+  ] });
+}
+
+function MkBottomSheet({
+  open = false,
+  onClose,
+  children,
+  height = "md",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(open);
+  const [isMounted, setIsMounted] = useState(open);
+  const timeoutRef = useRef(null);
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (open) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      setIsMounted(true);
+      if (isInitialMount.current) {
+        setIsOpen(true);
+        isInitialMount.current = false;
+      } else {
+        requestAnimationFrame(() => {
+          setIsOpen(true);
+        });
+      }
+    } else {
+      isInitialMount.current = false;
+      setIsOpen(false);
+      timeoutRef.current = setTimeout(() => {
+        setIsMounted(false);
+      }, 300);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [open]);
+  const heightClasses = {
+    sm: "max-h-[30vh]",
+    md: "max-h-[60vh]",
+    lg: "max-h-[85vh]",
+    full: "h-screen max-h-screen"
+  };
+  const backdropStyles = "fixed inset-0 z-40 backdrop-blur-sm transition-opacity duration-200";
+  const backdropOpcatityAnimation = isOpen ? "opacity-100" : "opacity-0";
+  const sheetStyles = [
+    "fixed bottom-0 left-0 right-0 z-50",
+    "w-full bg-[var(--surface-level1)]",
+    "border-t border-[var(--border-default)] rounded-t-[20px] shadow-2xl",
+    "transition-transform duration-300 ease-out"
+  ].join(" ");
+  const sheetTranslateAnimation = isOpen ? "translate-y-0" : "translate-y-full";
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+      setIsOpen(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose?.();
+      setIsOpen(false);
+    }
+  };
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${backdropStyles} ${backdropOpcatityAnimation}`,
+        onClick: handleBackdropClick
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${sheetStyles}          
+          ${heightClasses[height]}
+          ${sheetTranslateAnimation}
+          ${className}
+        `,
+        role: "dialog",
+        "aria-modal": "true",
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "p-4 pt-6 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-8 h-1.5 bg-neutral-300 rounded-full" }) }),
+          /* @__PURE__ */ jsx("div", { className: "p-6 pb-12 max-h-full overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+}
+
+function MkBarChart({ data, className }) {
+  const baseStyles = "flex flex-row flex-wrap justify-between p-1 w-full max-w-4xl";
+  const barContainerStyles = "flex flex-col items-center gap-2 w-12";
+  const barStyles = "w-[25px] rounded-[5px] shadow-sm absolute bottom-0 left-0";
+  const bgBarStyles = "w-[25px] h-32  rounded-[5px] relative";
+  const batColorStyles = {
+    faded: "bg-neutral-200",
+    regular: "bg-primary-500",
+    "no-data": "bg-primary-400"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyles} ${className}`, children: data.map((item, index) => /* @__PURE__ */ jsxs("div", { className: barContainerStyles, children: [
+    /* @__PURE__ */ jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${barStyles} ${batColorStyles[item.type ? item.type : "regular"]}`,
+        style: { height: `${item.value}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { className: "mk-label text-xs font-medium text-neutral-700 text-center min-w-[40px]", children: item.label })
+  ] }, index)) });
+}
+
+function MkBarHistoryChart({ data, className }) {
+  const baseStyles = "flex flex-row flex-wrap justify-between p-1 w-full max-w-4xl";
+  const barContainerStyles = "flex flex-col items-center gap-2 w-12";
+  const barStyles = "w-[10px] rounded-full shadow-sm absolute bottom-0 left-0";
+  const bgBarStyles = "w-[10px] h-32 bg-neutral-200 rounded-full relative";
+  const batColorStyles = {
+    faded: "bg-primary-200",
+    regular: "bg-primary-500",
+    "no-data": "bg-primary-400"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyles} ${className}`, children: data.map((item, index) => /* @__PURE__ */ jsxs("div", { className: barContainerStyles, children: [
+    /* @__PURE__ */ jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${barStyles} ${batColorStyles[item.type ? item.type : "regular"]}`,
+        style: { height: `${item.value}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { className: "mk-label text-xs font-medium text-neutral-700 text-center min-w-[40px]", children: item.label })
+  ] }, index)) });
+}
+
+function MkCard({ className = "", noPadding = false, children }) {
+  const baseStyles = [
+    "w-full h-full p-[3px]",
+    "bg-[var(--color-neutral-200)] ",
+    "rounded-[15px]"
+  ].join(" ");
+  const contentStyles = [
+    "w-full h-full",
+    "bg-[var(--surface-level3)] ",
+    "border border-[var(--border-default)] rounded-[12px]",
+    "overflow-hidden"
+  ].join(" ");
+  const paddingStyle = noPadding ? "" : "p-4";
+  return /* @__PURE__ */ jsx("section", { className: `${baseStyles} ${className}`, children: /* @__PURE__ */ jsx("div", { className: `${contentStyles} ${paddingStyle}`, children }) });
+}
+
+function MkCheckbox({
+  label,
+  size = "md",
+  className = "",
+  checked,
+  disabled,
+  id,
+  onChange,
+  ...props
+}) {
+  const generatedId = useId();
+  const checkboxId = id || generatedId;
+  const [isChecked, setIsChecked] = useState(checked ?? false);
+  useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const handleChange = (event) => {
+    const newChecked = event.target.checked;
+    setIsChecked(newChecked);
+    onChange?.(event);
+  };
+  const baseStyle = [
+    "appearance-none cursor-pointer",
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "transition-all duration-300",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:border-neutral-200",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "checked:bg-neutral-600 checked:border-primary-600",
+    "checked:enabled:hover:bg-primary-700 checked:enabled:hover:border-primary-700",
+    "checked:enabled:hover:shadow-[0_0_4px_var(--color-primary-500)]",
+    "disabled:checked:bg-neutral-400 disabled:checked:border-neutral-400",
+    "relative flex items-center justify-center"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16
+  };
+  const labelSizeStyles = {
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: checkboxId,
+          className: `${baseStyle} ${sizeStyles[size]}`,
+          checked: isChecked,
+          disabled,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsx(
+        Check,
+        {
+          className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none text-white z-10",
+          size: iconSizes[size],
+          strokeWidth: 3,
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: checkboxId,
+        className: `${labelSizeStyles[size]} text-neutral-800 cursor-pointer select-none ${disabled ? "cursor-not-allowed text-neutral-600" : ""}`,
+        children: label
+      }
+    )
+  ] });
+}
+
+function MkComboBox({
+  value,
+  size = "md",
+  list = [],
+  className,
+  ...props
+}) {
+  const baseStyle = [
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "appearance-none text-neutral-800",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0focus:ring-offset-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "transition-shadow transition-border duration-300"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "px-3 py-1 pr-8 text-sm font-[14px]",
+    md: "px-4 py-2 pr-10 text-md font-[16px]",
+    lg: "px-6 py-3 pr-12 text-lg font-[18px]"
+  };
+  const iconSizes = {
+    sm: 16,
+    md: 18,
+    lg: 20
+  };
+  const iconPositions = {
+    sm: "right-2.5",
+    md: "right-3",
+    lg: "right-4"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative block w-full", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: `${baseStyle} ${sizeStyles[size]} w-full ${className}`,
+        value,
+        ...props,
+        children: list.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        className: `absolute top-1/2 -translate-y-1/2 ${iconPositions[size]} text-neutral-500 pointer-events-none`,
+        size: iconSizes[size],
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+
+function MkDateInput({
+  value,
+  placeholder = "00:00",
+  size = "md",
+  className,
+  ...props
+}) {
+  const baseStyle = [
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "text-neutral-800",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0focus:ring-offset-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "transition-shadow transition-border duration-300"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "pl-9 pr-3 py-1 text-sm font-[14px]",
+    md: "pl-10 pr-4 py-2 text-md font-[16px]",
+    lg: "pl-12 pr-6 py-3 text-lg font-[18px]"
+  };
+  const iconSizes = {
+    sm: 16,
+    md: 18,
+    lg: 20
+  };
+  const iconPositions = {
+    sm: "left-2.5",
+    md: "left-3",
+    lg: "left-4"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        className: `absolute top-1/2 -translate-y-1/2 ${iconPositions[size]} text-neutral-500`,
+        size: iconSizes[size],
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "date",
+        className: `${baseStyle} ${sizeStyles[size]} ${className || ""}`,
+        placeholder,
+        value,
+        ...props
+      }
+    )
+  ] });
+}
+
+function MkDivider({
+  className = "",
+  orientation = "horizontal"
+}) {
+  const isVertical = orientation === "vertical";
+  const baseStyles = [
+    "bg-[var(--border-default)]",
+    "border-0",
+    isVertical ? "w-px self-stretch" : "h-px w-full"
+  ].join(" ");
+  if (isVertical) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${baseStyles} ${className}`,
+        role: "separator",
+        "aria-orientation": "vertical"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: `${baseStyles} ${className}`,
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }
+  );
+}
+
+function MkIconBadge({ color, iconName }) {
+  const baseStyle = "inline-flex items-center justify-center p-2 bg-var(--surface-level1) border-3 rounded-full w-fit h-fit";
+  const wrapperColorStyle = {
+    primary: "bg-primary-100 border-[var(--color-primary-200)]",
+    neutral: "bg-neutral-100 border-[var(--color-neutral-200)]",
+    success: "bg-success-100 border-[var(--color-success-200)]",
+    warning: "bg-warning-100 border-[var(--color-warning-200)]",
+    danger: "bg-danger-100 border-[var(--color-danger-200)]",
+    info: "bg-info-100 border-[var(--color-info-200)]"
+  };
+  const iconColorStyle = {
+    primary: "var(--color-primary-600)",
+    neutral: "var(--color-neutral-600)",
+    success: "var(--color-success-600)",
+    warning: "var(--color-warning-600)",
+    danger: "var(--color-danger-600)",
+    info: "var(--color-info-600)"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyle} ${wrapperColorStyle[color]}`, children: /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, color: iconColorStyle[color], size: 35 }) });
+}
+
+function MkDetailedListItem({
+  title,
+  description,
+  numericValue,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex justify-between items-center bg-var(--surface-level1) hover:bg-neutral-100 p-3 h-[70px] transition-all duration-300 border-1 border-[var(--border-default)] rounded-xl",
+      children: [
+        icon ? /* @__PURE__ */ jsx(MkIconBadge, { color: icon.color, iconName: icon.iconName }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "mk-content", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mk-subcontent", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          numericValue ? /* @__PURE__ */ jsx(MkDivider, { orientation: "vertical", className: "mx-2" }) : null,
+          numericValue ? /* @__PURE__ */ jsx("span", { className: "mk-content-numeric", children: numericValue }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+function MkDetailedList({ className, data }) {
+  const baseStyle = "flex flex-col gap-2";
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyle} ${className}`, children: data.map((element, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    MkDetailedListItem,
+    {
+      title: element.title,
+      description: element.description,
+      numericValue: element.numericValue,
+      icon: element.icon
+    }
+  ) }, index)) });
+}
+
+function MkDonutChart({
+  data,
+  className,
+  sizePx = 160,
+  thicknessPx = 24,
+  centerLabel,
+  centerValue
+}) {
+  const baseStyles = "flex items-center justify-center";
+  const wrapperStyles = "relative";
+  const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
+  const segmentColorByIndex = [
+    "var(--color-primary-500)",
+    "var(--color-primary-400)",
+    "var(--color-primary-300)",
+    "var(--color-primary-200)",
+    "var(--color-primary-100)"
+  ];
+  const ringBackground = total > 0 ? (() => {
+    let acc = 0;
+    const stops = data.map((d, i) => {
+      const v = Math.max(0, d.value);
+      const start = acc;
+      acc += v / total * 100;
+      const color = segmentColorByIndex[i % segmentColorByIndex.length];
+      return `${color} ${start}% ${acc}%`;
+    });
+    return `conic-gradient(${stops.join(", ")})`;
+  })() : "conic-gradient(var(--color-neutral-200) 0% 100%)";
+  const sizeStyle = { width: sizePx, height: sizePx };
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyles} ${className ?? ""}`, children: /* @__PURE__ */ jsxs("div", { className: wrapperStyles, style: sizeStyle, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-full",
+        style: {
+          ...sizeStyle,
+          background: ringBackground
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute rounded-full bg-white flex flex-col items-center justify-center text-center",
+        style: {
+          inset: thicknessPx
+        },
+        children: [
+          centerValue ? /* @__PURE__ */ jsx("div", { className: "mk-label text-lg font-semibold text-neutral-900", children: centerValue }) : null,
+          centerLabel ? /* @__PURE__ */ jsx("div", { className: "mk-label text-xs font-medium text-neutral-600", children: centerLabel }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+
+function MkHeader({ title, subtitle, className, children }) {
+  const baseStyle = ["flex items-center justify-between", "py-1"].join(" ");
+  return /* @__PURE__ */ jsxs("header", { className: `${baseStyle} ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "mk-header-title", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("h2", { className: "mk-header-subtitle", children: subtitle }) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+}
+
+function MkHorizontalBarChart({ className }) {
+  return /* @__PURE__ */ jsx("div", { className });
+}
+
+function MkStatusIndicator({ color, text }) {
+  const baseStyle = text ? "flex items-center gap-1" : "";
+  const circle = "w-[15px] h-[15px] border-2 rounded-full p-[1px] flex items-center justify-center box-border";
+  const innerCircle = "w-[9px] h-[9px] rounded-full";
+  const textStyle = "font-bold leading-none text-[14px]";
+  const circleColorStyles = {
+    primary: "border-primary-400 shadow-[0_0_4px_var(--color-primary-400)]",
+    neutral: "border-neutral-400 shadow-[0_0_4px_var(--color-neutral-400)]",
+    success: "border-success-400 shadow-[0_0_4px_var(--color-success-400)]",
+    warning: "border-warning-400 shadow-[0_0_4px_var(--color-warning-400)]",
+    danger: "border-danger-400 shadow-[0_0_4px_var(--color-danger-400)]",
+    info: "border-info-400 shadow-[0_0_4px_var(--color-info-400)]"
+  };
+  const innerCircleColorStyles = {
+    primary: "bg-primary-400",
+    neutral: "bg-neutral-400",
+    success: "bg-success-400",
+    warning: "bg-warning-400",
+    danger: "bg-danger-400",
+    info: "bg-info-400"
+  };
+  const textColorStyles = {
+    primary: "text-primary-900",
+    neutral: "text-neutral-900",
+    success: "text-success-900",
+    warning: "text-warning-900",
+    danger: "text-danger-900",
+    info: "text-info-900"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: baseStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: `${circle} ${circleColorStyles[color]}`, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${innerCircle} ${innerCircleColorStyles[color]}`
+      }
+    ) }),
+    text ? /* @__PURE__ */ jsx("span", { className: `${textStyle} ${textColorStyles[color]}`, children: text }) : null
+  ] });
+}
+
+function MkListItem({ title, numericValue, status }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex justify-between items-center bg-neutral-50 hover:bg-neutral-100 p-3 h-[70px] transition-all duration-300",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "mk-content", children: title }),
+          status ? /* @__PURE__ */ jsx(MkStatusIndicator, { color: status.color, text: status.text }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          status && numericValue ? /* @__PURE__ */ jsx(MkDivider, { orientation: "vertical", className: "mx-2" }) : null,
+          numericValue ? /* @__PURE__ */ jsx("span", { className: "mk-content-numeric", children: numericValue }) : null
+        ] })
       ]
     }
   );
 }
 
-export { MkButton };
+function MkList({ className, data }) {
+  return /* @__PURE__ */ jsx("div", { className, children: data.map((element, index) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      MkListItem,
+      {
+        title: element.title,
+        description: element.description,
+        numericValue: element.numericValue,
+        status: element.status
+      }
+    ),
+    index < data.length - 1 && /* @__PURE__ */ jsx(MkDivider, {})
+  ] }, index)) });
+}
+
+function MkLineChart({ className }) {
+  return /* @__PURE__ */ jsx("div", { className });
+}
+
+function MkMain({ className = "", children }) {
+  const baseStyles = [
+    "w-full h-full p-6",
+    "bg-[var(--surface-level1)] ",
+    "border border-[var(--border-default)] rounded-[15px]"
+  ].join(" ");
+  return /* @__PURE__ */ jsx("main", { className: `${baseStyles} ${className}`, children });
+}
+
+function MkModal({
+  open = false,
+  onClose,
+  children,
+  className = ""
+}) {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      dialog.showModal();
+    } else {
+      onClose?.();
+      dialog.close();
+    }
+  }, [open]);
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+      dialogRef.current?.close();
+    }
+  };
+  const handleClose = () => {
+    onClose?.();
+    dialogRef.current?.close();
+  };
+  const baseStyles = [
+    "rounded-[15px]",
+    "bg-transparent",
+    "shadow-2xl",
+    "overflow-hidden",
+    "backdrop:backdrop-blur-sm",
+    "m-auto",
+    className
+  ].join(" ");
+  const borderContentStyles = [
+    "p-[3px]",
+    "bg-[var(--color-neutral-300)] ",
+    "rounded-[15px]"
+  ].join(" ");
+  const contentStyles = [
+    "w-full h-full p-[3px]",
+    "bg-[var(--surface-level1)]",
+    "border border-[var(--border-default)] rounded-[12px]",
+    "overflow-hidden"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: baseStyles,
+      onCancel: handleClose,
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsx("div", { className: borderContentStyles, children: /* @__PURE__ */ jsx("div", { className: contentStyles, children: /* @__PURE__ */ jsx("div", { className: "w-full max-h-[80vh] overflow-y-auto", children }) }) })
+    }
+  );
+}
+
+function MkNavItem({
+  label,
+  iconName,
+  link,
+  as,
+  isActive = false,
+  collapsed = false,
+  ...props
+}) {
+  const baseStyle = "group inline-flex flex-row items-center p-[10px] gap-[5px] hover:bg-primary-100 w-fit transition-all duration-300 cursor-pointer rounded-[7px]";
+  const iconStyle = "text-neutral-600 group-hover:text-primary-800 transition-all duration-300";
+  const activeBaseStyle = "bg-primary-200 text-primary-800";
+  const activeIconStyle = "text-primary-800";
+  let Component = "a";
+  const linkProps = {};
+  if (as) {
+    Component = as;
+    linkProps.to = link;
+    linkProps.href = link;
+  } else {
+    linkProps.href = link;
+  }
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      className: `${baseStyle} ${isActive ? activeBaseStyle : ""}`,
+      ...linkProps,
+      ...props,
+      children: [
+        iconName && /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: 20,
+            className: `${iconStyle} ${isActive ? activeIconStyle : ""}`
+          }
+        ),
+        collapsed ? null : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mk-caption group-hover:text-primary-800 transition-all duration-300 ",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+
+function MkNavList({ data, collapsed, className }) {
+  return /* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsx("ul", { className: `flex flex-col gap-[10px] ${className || ""}`, children: data.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    MkNavItem,
+    {
+      label: item.label,
+      iconName: item.iconName,
+      link: item.link,
+      isActive: item.isActive,
+      collapsed
+    },
+    index
+  ) })) }) });
+}
+
+function MkNumberInput({
+  value,
+  placeholder,
+  size = "md",
+  className,
+  ...props
+}) {
+  const baseStyle = [
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "text-neutral-800",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0focus:ring-offset-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "transition-shadow transition-border duration-300"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "px-3 py-1 text-sm font-[14px]",
+    md: 'px-4 py-2 text-md font-[16px]"',
+    lg: 'px-6 py-3 text-lg font-[18px]"'
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      className: `${baseStyle} ${sizeStyles[size]} ${className}`,
+      placeholder,
+      value,
+      ...props
+    }
+  );
+}
+
+function MkPanel({ className = "", children }) {
+  const baseStyles = [
+    "w-full h-full p-3",
+    "bg-[var(--surface-level2)] ",
+    "rounded-[20px]"
+  ].join(" ");
+  return /* @__PURE__ */ jsx("main", { className: `${baseStyles} ${className}`, children });
+}
+
+function MkProgressBar({ percentage }) {
+  const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-[10px] bg-neutral-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-[10px] bg-primary-400 rounded-full transition-all duration-300 block",
+      style: {
+        width: `${clampedPercentage}%`,
+        minHeight: "10px"
+      }
+    }
+  ) });
+}
+
+function MkRadioButton({
+  label,
+  value,
+  name,
+  size = "md",
+  className = "",
+  checked,
+  disabled,
+  id,
+  onChange,
+  ...props
+}) {
+  const generatedId = useId();
+  const checkboxId = id || generatedId;
+  const [isChecked, setIsChecked] = useState(checked ?? false);
+  useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const handleChange = (event) => {
+    const newChecked = event.target.checked;
+    setIsChecked(newChecked);
+    onChange?.(event);
+  };
+  const baseStyle = [
+    "appearance-none cursor-pointer",
+    "bg-neutral-50 rounded-full border-2 border-neutral-300",
+    "transition-all duration-300",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:border-neutral-300",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "checked:bg-neutral-50 checked:border-primary-300",
+    "checked:enabled:hover:bg-primary-100 checked:enabled:hover:border-primary-300",
+    "checked:enabled:hover:shadow-[0_0_4px_var(--color-primary-500)]",
+    "disabled:checked:bg-neutral-100 disabled:checked:border-neutral-400",
+    "relative flex items-center justify-center"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "w-5 h-5",
+    md: "w-6 h-6",
+    lg: "w-7 h-7"
+  };
+  const iconSizes = {
+    sm: 50,
+    md: 70,
+    lg: 90
+  };
+  const labelSizeStyles = {
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg"
+  };
+  const iconStyle = [
+    "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none  z-10",
+    disabled === true ? "text-[var(--color-neutral-400)]" : "text-[var(--color-primary-300)]"
+  ].join(" ");
+  const labelStyle = [
+    "text-neutral-800 cursor-pointer select-none",
+    disabled === true ? "cursor-not-allowed text-neutral-600" : ""
+  ].join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value,
+          id: checkboxId,
+          className: `${baseStyle} ${sizeStyles[size]}`,
+          checked: isChecked,
+          disabled,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsx(
+        DotIcon,
+        {
+          className: iconStyle,
+          size: iconSizes[size],
+          strokeWidth: 3,
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: checkboxId,
+        className: `${labelStyle} ${labelSizeStyles[size]}`,
+        children: label
+      }
+    )
+  ] });
+}
+
+function MkSectionHeader({ title, className, children }) {
+  const baseStyle = "flex items-center justify-between py-1";
+  return /* @__PURE__ */ jsxs("div", { className: `${baseStyle} ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h5", { className: "mk-section-title", children: title }) }),
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+}
+
+function MkStackedBarChart({ data, className }) {
+  const baseStyles = "flex flex-row flex-wrap justify-between p-1 w-full max-w-4xl";
+  const barContainerStyles = "flex flex-col items-center gap-2 w-12";
+  const bgBarStyles = "w-[25px] h-32 relative overflow-hidden flex items-end";
+  const segmentBaseStyles = "w-full";
+  const segmentColorByIndex = [
+    "bg-primary-500",
+    "bg-primary-400",
+    "bg-neutral-300",
+    "bg-neutral-500"
+  ];
+  const barOpacityByType = {
+    faded: "opacity-50",
+    regular: "opacity-100",
+    "no-data": "opacity-70"
+  };
+  const labelStyles = "mk-label text-xs font-medium text-neutral-700 text-center min-w-[40px]";
+  const totals = data.map((item) => item.values.reduce((sum, v) => sum + v, 0));
+  const maxTotal = Math.max(...totals, 1);
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyles} ${className ?? ""}`, children: data.map((item, index) => {
+    const total = totals[index] || 0;
+    const barHeightPercent = total / maxTotal * 100;
+    return /* @__PURE__ */ jsxs("div", { className: barContainerStyles, children: [
+      /* @__PURE__ */ jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-full flex flex-col justify-end rounded-[5px] ${barOpacityByType[item.type]}`,
+          style: { height: `${barHeightPercent}%` },
+          children: item.values.map((value, i) => {
+            const segmentHeightPercent = total > 0 ? value / total * 100 : 0;
+            const isFirst = i === 0;
+            const isLast = i === item.values.length - 1;
+            const radiusClass = [
+              isFirst ? "rounded-t-[5px]" : "",
+              isLast ? "rounded-b-[5px]" : ""
+            ].join(" ");
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${segmentBaseStyles} ${segmentColorByIndex[i % segmentColorByIndex.length]} ${radiusClass}`,
+                style: { height: `${segmentHeightPercent}%` }
+              },
+              i
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsx("span", { className: labelStyles, children: item.label })
+    ] }, index);
+  }) });
+}
+
+function MkStepper({ steps, currentStep }) {
+  const validSteps = Math.max(1, steps);
+  const validCurrentStep = Math.max(0, Math.min(currentStep, validSteps));
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-[10px] rounded-full overflow-hidden flex gap-1", children: Array.from({ length: validSteps }, (_, index) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `h-[10px] transition-all duration-300 flex-shrink-0 ${index + 1 <= validCurrentStep ? "bg-primary-400" : "bg-neutral-200"}`,
+        style: {
+          width: `${100 / validSteps}%`,
+          minHeight: "10px"
+        }
+      },
+      index
+    );
+  }) });
+}
+
+function MkSubHeader({
+  title,
+  subtitle,
+  className,
+  children
+}) {
+  const baseStyle = "flex items-center justify-between py-1";
+  return /* @__PURE__ */ jsxs("div", { className: `${baseStyle} ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "mk-subheader-title", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("h4", { className: "mk-subheader-subtitle", children: subtitle }) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+}
+
+function MkTab({ data, onTabSelect, selectedTab }) {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    selectedTab && selectedTab < data.length ? selectedTab : 0
+  );
+  const baseStyle = "w-full p-[2px] flex flex-row gap-1 bg-neutral-100 rounded-[7px]";
+  const tabStyle = "px-[10px] py-[5px] rounded-[5px] hover:bg-neutral-200 cursor-pointer transition-all duration-300 flex-1 sm:flex-none flex items-center justify-center border border-transparent";
+  const selectedTabStyle = "bg-[var(--surface-level1)] border-[var(--border-default)]";
+  const handleSelect = (tabIndex) => {
+    onTabSelect?.(tabIndex);
+    setSelectedTabIndex(tabIndex);
+  };
+  return /* @__PURE__ */ jsx("div", { className: baseStyle, children: data.map((item, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: `${tabStyle} ${selectedTabIndex == i ? selectedTabStyle : ""}`,
+      onClick: () => handleSelect(i),
+      type: "button",
+      children: /* @__PURE__ */ jsx("span", { className: "mk-label", children: item })
+    },
+    i
+  )) });
+}
+
+function MkTag({ data, onRemove, className }) {
+  const baseStyle = "w-full p-[2px] flex flex-row gap-1";
+  const tagStyle = [
+    "flex items-center justify-center",
+    "px-[10px] py-[5px] rounded-[5px] flex-1 sm:flex-none gap-2",
+    "cursor-pointer transition-all duration-300",
+    "bg-[var(--surface-level1)] hover:bg-neutral-200",
+    "border border-[var(--border-default)]"
+  ].join(" ");
+  const handleRemove = (id) => (e) => {
+    e.stopPropagation();
+    if (onRemove) {
+      onRemove(id);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${baseStyle} ${className}`, children: data.map((tag) => /* @__PURE__ */ jsxs("div", { className: `${tagStyle}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "mk-label", children: tag.label }),
+    /* @__PURE__ */ jsx(
+      MkButton,
+      {
+        iconOnly: true,
+        iconName: "x",
+        variant: "transparent",
+        onClick: handleRemove(tag.id)
+      }
+    )
+  ] })) });
+}
+
+function MkTextInput({
+  value,
+  placeholder,
+  size = "md",
+  className,
+  ...props
+}) {
+  const baseStyle = [
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "text-neutral-800",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0focus:ring-offset-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "transition-shadow transition-border duration-300"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "px-3 py-1 text-sm font-[14px]",
+    md: 'px-4 py-2 text-md font-[16px]"',
+    lg: 'px-6 py-3 text-lg font-[18px]"'
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: `${baseStyle} ${sizeStyles[size]} ${className}`,
+      placeholder,
+      value,
+      ...props
+    }
+  );
+}
+
+function MkTimeInput({
+  value,
+  placeholder = "00:00",
+  size = "md",
+  className,
+  onChange,
+  ...props
+}) {
+  const [displayValue, setDisplayValue] = useState(value || "");
+  useEffect(() => {
+    if (value !== void 0) {
+      setDisplayValue(value);
+    }
+  }, [value]);
+  const applyMask = useCallback((inputValue) => {
+    const digits = inputValue.replace(/\D/g, "");
+    return digits.substring(0, 2) + ":" + digits.substring(2);
+  }, []);
+  const handleChange = useCallback(
+    (e) => {
+      const maskedValue = applyMask(e.target.value);
+      setDisplayValue(maskedValue);
+      if (onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: { ...e.target, value: maskedValue }
+        };
+        onChange(syntheticEvent);
+      }
+    },
+    [applyMask, onChange]
+  );
+  const baseStyle = [
+    "bg-neutral-50 rounded-[7px] border-2 border-neutral-300",
+    "text-neutral-800",
+    "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+    "enabled:focus:border-primary-300 enabled:focus:outline-none enabled:focus:ring-0focus:ring-offset-0",
+    "enabled:hover:shadow-[0_0_4px_var(--color-primary-400)] enabled:hover:border-primary-300",
+    "transition-shadow transition-border duration-300"
+  ].join(" ");
+  const sizeStyles = {
+    sm: "pl-9 pr-3 py-1 text-sm font-[14px]",
+    md: "pl-10 pr-4 py-2 text-md font-[16px]",
+    lg: "pl-12 pr-6 py-3 text-lg font-[18px]"
+  };
+  const iconSizes = {
+    sm: 16,
+    md: 18,
+    lg: 20
+  };
+  const iconPositions = {
+    sm: "left-2.5",
+    md: "left-3",
+    lg: "left-4"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Clock,
+      {
+        className: `absolute top-1/2 -translate-y-1/2 ${iconPositions[size]} text-neutral-500`,
+        size: iconSizes[size],
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: `${baseStyle} ${sizeStyles[size]} ${className || ""}`,
+        placeholder,
+        value: value !== void 0 ? value : displayValue,
+        onChange: handleChange,
+        maxLength: 5,
+        ...props
+      }
+    )
+  ] });
+}
+
+function MkTotalizers({ className }) {
+  return /* @__PURE__ */ jsx("div", { className });
+}
+
+function MkTopBar({ rightMenu, className, children }) {
+  const baseStyle = "w-full flex justify-between items-center p-3";
+  return /* @__PURE__ */ jsxs("section", { className: `${baseStyle} ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "w-[45px] h-[45px] flex items-center justify-center transition-colors duration-200 hover:bg-neutral-100 rounded-full",
+        "aria-label": "Menu",
+        children: /* @__PURE__ */ jsx(Menu, { size: 30, color: "var(--color-neutral-700)" })
+      }
+    ),
+    children ? children : null,
+    rightMenu ? rightMenu : null
+  ] });
+}
+
+function MkUserAvatar({ initials }) {
+  const baseStyle = [
+    "w-[40px] h-[40px] min-w-[40px] min-h-[40px] p-1",
+    "transition-all duration-300 cursor-pointer duration-200",
+    "bg-neutral-100 hover:bg-neutral-200",
+    "border-2 border-neutral-300 rounded-full",
+    "flex items-center justify-center"
+  ].join(" ");
+  return /* @__PURE__ */ jsx("div", { className: baseStyle, children: /* @__PURE__ */ jsx("span", { className: "text-neutral-700 font-bold text-base", children: initials.substring(0, 2) }) });
+}
+
+export { MkAlert, MkBarChart, MkBarHistoryChart, MkBottomSheet, MkButton, MkCard, MkCheckbox, MkComboBox, MkDateInput, MkDetailedList, MkDivider, MkDonutChart, MkHeader, MkHorizontalBarChart, MkIconBadge, MkLineChart, MkList, MkMain, MkModal, MkNavItem, MkNavList, MkNumberInput, MkPanel, MkProgressBar, MkRadioButton, MkSectionHeader, MkStackedBarChart, MkStatusIndicator, MkStepper, MkSubHeader, MkTab, MkTag, MkTextInput, MkTimeInput, MkTopBar, MkTotalizers, MkUserAvatar };