moldekit-react 0.0.6 → 0.0.7

package/dist/index.cjs

@@ -3,111 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const dynamic = require('lucide-react/dynamic');
 const lucideReact = require('lucide-react');
-
-function MkAlert({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
-}
-
-function MkBottomSheet({
-  open = false,
-  onClose,
-  children,
-  height = "md",
-  className = ""
-}) {
-  const [isOpen, setIsOpen] = react.useState(open);
-  const [isMounted, setIsMounted] = react.useState(open);
-  const timeoutRef = react.useRef(null);
-  const isInitialMount = react.useRef(true);
-  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${backdropStyles} ${backdropOpcatityAnimation}`,
-        onClick: handleBackdropClick
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `${sheetStyles}          
-          ${heightClasses[height]}
-          ${sheetTranslateAnimation}
-          ${className}
-        `,
-        role: "dialog",
-        "aria-modal": "true",
-        onKeyDown: handleKeyDown,
-        tabIndex: -1,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 pt-6 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-1.5 bg-neutral-300 rounded-full" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 pb-12 max-h-full overflow-y-auto", children })
-        ]
-      }
-    )
-  ] });
-}
+const dynamic = require('lucide-react/dynamic');
+const react = require('react');
 
 function MkButton({
   variant = "filled",
@@ -282,12 +180,191 @@ function MkButton({
   );
 }
 
-function MkBarChart({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+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__ */ jsxRuntime.jsxs("div", { className: `${baseStyles} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block align-middle", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.InfoIcon,
+        {
+          className: "inline-block align-middle",
+          color: "var(--color-info-700)"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${labelStyles} ${stateStyle[state]}`, children: label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MkButton,
+      {
+        color: "neutral",
+        iconOnly: true,
+        iconName: "x",
+        variant: "transparent"
+      }
+    )
+  ] });
 }
 
-function MkBarHistoryChart({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+function MkBottomSheet({
+  open = false,
+  onClose,
+  children,
+  height = "md",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = react.useState(open);
+  const [isMounted, setIsMounted] = react.useState(open);
+  const timeoutRef = react.useRef(null);
+  const isInitialMount = react.useRef(true);
+  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${backdropStyles} ${backdropOpcatityAnimation}`,
+        onClick: handleBackdropClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `${sheetStyles}          
+          ${heightClasses[height]}
+          ${sheetTranslateAnimation}
+          ${className}
+        `,
+        role: "dialog",
+        "aria-modal": "true",
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 pt-6 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-1.5 bg-neutral-300 rounded-full" }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${baseStyles} ${className}`, children: data.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: barContainerStyles, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${barStyles} ${batColorStyles[item.type ? item.type : "regular"]}`,
+        style: { height: `${item.value}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${baseStyles} ${className}`, children: data.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: barContainerStyles, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${barStyles} ${batColorStyles[item.type ? item.type : "regular"]}`,
+        style: { height: `${item.value}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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 }) {
@@ -306,8 +383,90 @@ function MkCard({ className = "", noPadding = false, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `${baseStyles} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${contentStyles} ${paddingStyle}`, children }) });
 }
 
-function MkCheckbox({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+function MkCheckbox({
+  label,
+  size = "md",
+  className = "",
+  checked,
+  disabled,
+  id,
+  onChange,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const checkboxId = id || generatedId;
+  const [isChecked, setIsChecked] = react.useState(checked ?? false);
+  react.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__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: checkboxId,
+          className: `${baseStyle} ${sizeStyles[size]}`,
+          checked: isChecked,
+          disabled,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.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__ */ jsxRuntime.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({
@@ -502,16 +661,69 @@ function MkDetailedList({ className, data }) {
   ) }, index)) });
 }
 
-function MkDonutChart({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+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__ */ jsxRuntime.jsx("div", { className: `${baseStyles} ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperStyles, style: sizeStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "rounded-full",
+        style: {
+          ...sizeStyle,
+          background: ringBackground
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "absolute rounded-full bg-white flex flex-col items-center justify-center text-center",
+        style: {
+          inset: thicknessPx
+        },
+        children: [
+          centerValue ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mk-label text-lg font-semibold text-neutral-900", children: centerValue }) : null,
+          centerLabel ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("header", { className: `${baseStyle} ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mk-title", children: title }),
-      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mk-subtitle", children: subtitle }) : null
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mk-header-title", children: title }),
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mk-header-subtitle", children: subtitle }) : null
     ] }),
     children ? /* @__PURE__ */ jsxRuntime.jsx("div", { children }) : null
   ] });
@@ -785,8 +997,102 @@ function MkProgressBar({ percentage }) {
   ) });
 }
 
-function MkRadioButton({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+function MkRadioButton({
+  label,
+  value,
+  name,
+  size = "md",
+  className = "",
+  checked,
+  disabled,
+  id,
+  onChange,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const checkboxId = id || generatedId;
+  const [isChecked, setIsChecked] = react.useState(checked ?? false);
+  react.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__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value,
+          id: checkboxId,
+          className: `${baseStyle} ${sizeStyles[size]}`,
+          checked: isChecked,
+          disabled,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.DotIcon,
+        {
+          className: iconStyle,
+          size: iconSizes[size],
+          strokeWidth: 3,
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: checkboxId,
+        className: `${labelStyle} ${labelSizeStyles[size]}`,
+        children: label
+      }
+    )
+  ] });
 }
 
 function MkSectionHeader({ title, className, children }) {
@@ -797,8 +1103,56 @@ function MkSectionHeader({ title, className, children }) {
   ] });
 }
 
-function MkStackedBarChart({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+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__ */ jsxRuntime.jsx("div", { className: `${baseStyles} ${className ?? ""}`, children: data.map((item, index) => {
+    const total = totals[index] || 0;
+    const barHeightPercent = total / maxTotal * 100;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: barContainerStyles, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: bgBarStyles, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${segmentBaseStyles} ${segmentColorByIndex[i % segmentColorByIndex.length]} ${radiusClass}`,
+                style: { height: `${segmentHeightPercent}%` }
+              },
+              i
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyles, children: item.label })
+    ] }, index);
+  }) });
 }
 
 function MkStepper({ steps, currentStep }) {
@@ -858,8 +1212,33 @@ function MkTab({ data, onTabSelect, selectedTab }) {
   )) });
 }
 
-function MkTag({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
+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__ */ jsxRuntime.jsx("div", { className: `${baseStyle} ${className}`, children: data.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${tagStyle}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mk-label", children: tag.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MkButton,
+      {
+        iconOnly: true,
+        iconName: "x",
+        variant: "transparent",
+        onClick: handleRemove(tag.id)
+      }
+    )
+  ] })) });
 }
 
 function MkTextInput({