@camtomlabs/malix-design-system 0.1.7 → 0.2.0

package/dist/index.js

@@ -5,15 +5,32 @@ var tokens_registry_default = {
     "--malix-background-main",
     "--malix-surface",
     "--malix-surface-secondary",
+    "--malix-surface-elevated",
     "--malix-surface-hover",
+    "--malix-surface-active",
+    "--malix-surface-disabled",
+    "--malix-input-bg",
+    "--malix-input-autofill-bg",
     "--malix-foreground",
     "--malix-foreground-secondary",
     "--malix-foreground-tertiary",
     "--malix-foreground-disabled",
+    "--malix-placeholder",
     "--malix-border",
     "--malix-border-strong",
     "--malix-border-focus",
+    "--malix-border-disabled",
     "--malix-overlay",
+    "--malix-overlay-backdrop",
+    "--malix-focus-ring",
+    "--malix-z-dropdown",
+    "--malix-z-sticky",
+    "--malix-z-overlay",
+    "--malix-z-modal",
+    "--malix-z-tooltip",
+    "--malix-z-notification",
+    "--malix-primary",
+    "--malix-primary-bg",
     "--malix-cta-primary-bg",
     "--malix-primary-hover",
     "--malix-primary-active",
@@ -31,12 +48,25 @@ var tokens_registry_default = {
     "--malix-info",
     "--malix-info-light",
     "--malix-info-foreground",
+    "--malix-table-header-bg",
+    "--malix-table-row-hover",
+    "--malix-table-border",
     "--malix-glass-bg",
     "--malix-glass-border",
     "--malix-glass-blur",
     "--malix-sidebar-bg",
     "--malix-sidebar-hover-bg",
     "--malix-sidebar-active-bg",
+    "--malix-card-bg",
+    "--malix-card-border",
+    "--malix-card-radius",
+    "--malix-input-border",
+    "--malix-nav-bg",
+    "--malix-nav-height",
+    "--malix-container-sm",
+    "--malix-container-md",
+    "--malix-container-lg",
+    "--malix-container-xl",
     "--malix-space-xs",
     "--malix-space-sm",
     "--malix-space-md",
@@ -55,6 +85,10 @@ var tokens_registry_default = {
     "--malix-text-lg",
     "--malix-text-xl",
     "--malix-text-2xl",
+    "--malix-text-3xl",
+    "--malix-text-4xl",
+    "--malix-text-5xl",
+    "--malix-text-display",
     "--malix-font-body",
     "--malix-font-heading",
     "--malix-weight-normal",
@@ -120,6 +154,7 @@ import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Button({
   hierarchy = "primary",
   variant = "text",
+  size,
   icon,
   badge,
   loading = false,
@@ -137,6 +172,7 @@ function Button({
       className: "malix-button",
       "data-hierarchy": hierarchy,
       "data-variant": variant,
+      "data-size": size || void 0,
       "data-loading": loading,
       disabled: isDisabled,
       "aria-busy": loading || void 0,
@@ -188,14 +224,64 @@ function InputGroup({
 }
 
 // src/components/Tooltip.tsx
-import React2, { useId, useState } from "react";
+import React2, { useId, useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function Tooltip({ content, children, placement = "top" }) {
+function Tooltip({ content, children, placement = "top", usePortal = false }) {
   const [open, setOpen] = useState(false);
   const tooltipId = useId();
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const updatePortalPosition = useCallback(() => {
+    if (!usePortal || !open || !triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipEl = tooltipRef.current;
+    const gap = 8;
+    tooltipEl.style.left = "0";
+    tooltipEl.style.top = "0";
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+    tooltipEl.style.top = `${top}px`;
+    tooltipEl.style.left = `${left}px`;
+  }, [usePortal, open, placement]);
+  useEffect(() => {
+    updatePortalPosition();
+  }, [updatePortalPosition]);
+  const tooltipContent = open ? /* @__PURE__ */ jsx7(
+    "span",
+    {
+      ref: tooltipRef,
+      role: "tooltip",
+      id: tooltipId,
+      className: "malix-tooltip",
+      "data-placement": placement,
+      ...usePortal ? { "data-portal": "" } : {},
+      children: content
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs4(
     "span",
     {
+      ref: triggerRef,
       className: "malix-tooltip-wrap",
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
@@ -205,7 +291,7 @@ function Tooltip({ content, children, placement = "top" }) {
         React2.cloneElement(children, {
           "aria-describedby": open ? tooltipId : void 0
         }),
-        open ? /* @__PURE__ */ jsx7("span", { role: "tooltip", id: tooltipId, className: "malix-tooltip", "data-placement": placement, children: content }) : null
+        usePortal ? tooltipContent && createPortal(tooltipContent, document.body) : tooltipContent
       ]
     }
   );
@@ -1006,12 +1092,12 @@ function SelectionCard({
 }
 
 // src/components/Overlay.tsx
-import { useEffect, useRef } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function Overlay({ open, title, onClose, children }) {
-  const panelRef = useRef(null);
-  useEffect(() => {
+  const panelRef = useRef2(null);
+  useEffect2(() => {
     if (!open || !panelRef.current) return;
     const panel = panelRef.current;
     const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR));
@@ -1056,7 +1142,7 @@ function Overlay({ open, title, onClose, children }) {
 }
 
 // src/components/Modal.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 var FOCUSABLE_SELECTOR2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function Modal({
@@ -1068,8 +1154,8 @@ function Modal({
   cancelLabel = "Cancel",
   children
 }) {
-  const panelRef = useRef2(null);
-  useEffect2(() => {
+  const panelRef = useRef3(null);
+  useEffect3(() => {
     if (!open || !panelRef.current) return;
     const panel = panelRef.current;
     const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR2));
@@ -1149,8 +1235,103 @@ function Modal({
   ) });
 }
 
-// src/components/GlassPopover.tsx
+// src/components/ConfirmDialog.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+var FOCUSABLE_SELECTOR3 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  icon,
+  children,
+  loading = false
+}) {
+  const panelRef = useRef4(null);
+  useEffect4(() => {
+    if (!open || !panelRef.current) return;
+    const panel = panelRef.current;
+    const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR3));
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    first?.focus();
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+      if (event.key === "Tab" && focusables.length > 0) {
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onCancel]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx30("div", { className: "malix-overlay-backdrop", onMouseDown: onCancel, children: /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      ref: panelRef,
+      className: "malix-confirm-dialog",
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": "malix-confirm-title",
+      "aria-describedby": description ? "malix-confirm-desc" : void 0,
+      "data-variant": variant,
+      onMouseDown: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs26("div", { className: "malix-confirm-dialog__content", children: [
+          icon ? /* @__PURE__ */ jsx30("div", { className: "malix-confirm-dialog__icon", children: icon }) : null,
+          /* @__PURE__ */ jsxs26("div", { className: "malix-confirm-dialog__text", children: [
+            /* @__PURE__ */ jsx30("h3", { id: "malix-confirm-title", className: "malix-confirm-dialog__title", children: title }),
+            description ? /* @__PURE__ */ jsx30("p", { id: "malix-confirm-desc", className: "malix-confirm-dialog__description", children: description }) : null,
+            children
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs26("div", { className: "malix-confirm-dialog__actions", children: [
+          /* @__PURE__ */ jsx30(
+            "button",
+            {
+              type: "button",
+              className: "malix-button",
+              "data-hierarchy": "secondary",
+              onClick: onCancel,
+              disabled: loading,
+              children: /* @__PURE__ */ jsx30("span", { children: cancelLabel })
+            }
+          ),
+          /* @__PURE__ */ jsx30(
+            "button",
+            {
+              type: "button",
+              className: "malix-button malix-confirm-dialog__confirm-btn",
+              "data-hierarchy": "primary",
+              "data-variant": variant,
+              onClick: onConfirm,
+              disabled: loading,
+              "data-loading": loading || void 0,
+              children: /* @__PURE__ */ jsx30("span", { children: confirmLabel })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/GlassPopover.tsx
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function GlassPopover({
   title,
   onClose,
@@ -1158,29 +1339,29 @@ function GlassPopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: `malix-glass-popover${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        title || onClose ? /* @__PURE__ */ jsxs26("div", { className: "malix-glass-popover__header", children: [
-          title ? /* @__PURE__ */ jsx30("span", { className: "malix-glass-popover__title", children: title }) : null,
-          onClose ? /* @__PURE__ */ jsx30(
+        title || onClose ? /* @__PURE__ */ jsxs27("div", { className: "malix-glass-popover__header", children: [
+          title ? /* @__PURE__ */ jsx31("span", { className: "malix-glass-popover__title", children: title }) : null,
+          onClose ? /* @__PURE__ */ jsx31(
             "button",
             {
               type: "button",
               className: "malix-glass-popover__close",
               onClick: onClose,
               "aria-label": "Close",
-              children: /* @__PURE__ */ jsxs26("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx30("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ jsx30("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              children: /* @__PURE__ */ jsxs27("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx31("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx31("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
               ] })
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ jsx30("div", { className: "malix-glass-popover__body", children })
+        /* @__PURE__ */ jsx31("div", { className: "malix-glass-popover__body", children })
       ]
     }
   );
@@ -1188,7 +1369,7 @@ function GlassPopover({
 
 // src/components/Accordion.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function Accordion({
   title,
   children,
@@ -1198,14 +1379,14 @@ function Accordion({
   ...props
 }) {
   const [open, setOpen] = useState3(defaultOpen);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: `malix-accordion${className ? ` ${className}` : ""}`,
       "data-open": open,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           "button",
           {
             type: "button",
@@ -1213,9 +1394,9 @@ function Accordion({
             onClick: () => setOpen((prev) => !prev),
             "aria-expanded": open,
             children: [
-              icon ? /* @__PURE__ */ jsx31("span", { className: "malix-accordion__icon", children: icon }) : null,
-              /* @__PURE__ */ jsx31("span", { className: "malix-accordion__title", children: title }),
-              /* @__PURE__ */ jsx31(
+              icon ? /* @__PURE__ */ jsx32("span", { className: "malix-accordion__icon", children: icon }) : null,
+              /* @__PURE__ */ jsx32("span", { className: "malix-accordion__title", children: title }),
+              /* @__PURE__ */ jsx32(
                 "svg",
                 {
                   className: "malix-accordion__chevron",
@@ -1228,20 +1409,20 @@ function Accordion({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx31("polyline", { points: "6 9 12 15 18 9" })
+                  children: /* @__PURE__ */ jsx32("polyline", { points: "6 9 12 15 18 9" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx31("div", { className: "malix-accordion__body", children })
+        /* @__PURE__ */ jsx32("div", { className: "malix-accordion__body", children })
       ]
     }
   );
 }
 
 // src/components/Badge.tsx
-import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function Badge({
   variant = "default",
   dot = false,
@@ -1249,41 +1430,41 @@ function Badge({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "span",
     {
       className: `malix-badge${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       ...props,
       children: [
-        dot ? /* @__PURE__ */ jsx32("span", { className: "malix-badge__dot" }) : null,
-        /* @__PURE__ */ jsx32("span", { className: "malix-badge__label", children })
+        dot ? /* @__PURE__ */ jsx33("span", { className: "malix-badge__dot" }) : null,
+        /* @__PURE__ */ jsx33("span", { className: "malix-badge__label", children })
       ]
     }
   );
 }
 
 // src/components/Banner.tsx
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var defaultIcons = {
-  info: /* @__PURE__ */ jsxs29("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx33("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx33("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-    /* @__PURE__ */ jsx33("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  info: /* @__PURE__ */ jsxs30("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx34("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx34("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx34("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] }),
-  success: /* @__PURE__ */ jsxs29("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx33("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-    /* @__PURE__ */ jsx33("polyline", { points: "22 4 12 14.01 9 11.01" })
+  success: /* @__PURE__ */ jsxs30("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx34("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ jsx34("polyline", { points: "22 4 12 14.01 9 11.01" })
   ] }),
-  warning: /* @__PURE__ */ jsxs29("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx33("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-    /* @__PURE__ */ jsx33("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-    /* @__PURE__ */ jsx33("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  warning: /* @__PURE__ */ jsxs30("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx34("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ jsx34("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx34("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
   ] }),
-  error: /* @__PURE__ */ jsxs29("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx33("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx33("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-    /* @__PURE__ */ jsx33("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  error: /* @__PURE__ */ jsxs30("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx34("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx34("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx34("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] })
 };
 function Banner({
@@ -1294,7 +1475,7 @@ function Banner({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: `malix-banner${className ? ` ${className}` : ""}`,
@@ -1302,18 +1483,18 @@ function Banner({
       role: "alert",
       ...props,
       children: [
-        /* @__PURE__ */ jsx33("span", { className: "malix-banner__icon", children: icon ?? defaultIcons[variant] }),
-        /* @__PURE__ */ jsx33("span", { className: "malix-banner__content", children }),
-        onClose ? /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("span", { className: "malix-banner__icon", children: icon ?? defaultIcons[variant] }),
+        /* @__PURE__ */ jsx34("span", { className: "malix-banner__content", children }),
+        onClose ? /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
             className: "malix-banner__close",
             onClick: onClose,
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsxs29("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx33("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx33("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            children: /* @__PURE__ */ jsxs30("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx34("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx34("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ] })
           }
         ) : null
@@ -1323,7 +1504,7 @@ function Banner({
 }
 
 // src/components/Checkbox.tsx
-import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
 function Checkbox({
   checked = false,
   onChange,
@@ -1338,7 +1519,7 @@ function Checkbox({
       onChange(!checked);
     }
   };
-  const checkbox = /* @__PURE__ */ jsxs30(
+  const checkbox = /* @__PURE__ */ jsxs31(
     "button",
     {
       type: "button",
@@ -1352,7 +1533,7 @@ function Checkbox({
       onClick: handleClick,
       ...props,
       children: [
-        checked && !indeterminate ? /* @__PURE__ */ jsx34(
+        checked && !indeterminate ? /* @__PURE__ */ jsx35(
           "svg",
           {
             className: "malix-checkbox__icon",
@@ -1360,7 +1541,7 @@ function Checkbox({
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               "path",
               {
                 d: "M2 6l3 3 5-5",
@@ -1372,7 +1553,7 @@ function Checkbox({
             )
           }
         ) : null,
-        indeterminate ? /* @__PURE__ */ jsx34(
+        indeterminate ? /* @__PURE__ */ jsx35(
           "svg",
           {
             className: "malix-checkbox__icon",
@@ -1380,7 +1561,7 @@ function Checkbox({
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               "path",
               {
                 d: "M2 6h8",
@@ -1395,16 +1576,16 @@ function Checkbox({
     }
   );
   if (label) {
-    return /* @__PURE__ */ jsxs30("label", { className: "malix-checkbox-row", children: [
+    return /* @__PURE__ */ jsxs31("label", { className: "malix-checkbox-row", children: [
       checkbox,
-      /* @__PURE__ */ jsx34("span", { className: "malix-checkbox-row__label", children: label })
+      /* @__PURE__ */ jsx35("span", { className: "malix-checkbox-row__label", children: label })
     ] });
   }
   return checkbox;
 }
 
 // src/components/Radio.tsx
-import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function Radio({
   checked = false,
   onChange,
@@ -1420,7 +1601,7 @@ function Radio({
       onChange(value);
     }
   };
-  const radio = /* @__PURE__ */ jsx35(
+  const radio = /* @__PURE__ */ jsx36(
     "button",
     {
       type: "button",
@@ -1434,20 +1615,20 @@ function Radio({
       "data-value": value,
       onClick: handleClick,
       ...props,
-      children: /* @__PURE__ */ jsx35("span", { className: "malix-radio__dot" })
+      children: /* @__PURE__ */ jsx36("span", { className: "malix-radio__dot" })
     }
   );
   if (label) {
-    return /* @__PURE__ */ jsxs31("label", { className: "malix-radio-row", children: [
+    return /* @__PURE__ */ jsxs32("label", { className: "malix-radio-row", children: [
       radio,
-      /* @__PURE__ */ jsx35("span", { className: "malix-radio-row__label", children: label })
+      /* @__PURE__ */ jsx36("span", { className: "malix-radio-row__label", children: label })
     ] });
   }
   return radio;
 }
 
 // src/components/Toggle.tsx
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function Toggle({
   checked = false,
   onChange,
@@ -1461,7 +1642,7 @@ function Toggle({
       onChange(!checked);
     }
   };
-  const toggle = /* @__PURE__ */ jsx36(
+  const toggle = /* @__PURE__ */ jsx37(
     "button",
     {
       type: "button",
@@ -1473,12 +1654,12 @@ function Toggle({
       disabled,
       onClick: handleClick,
       ...props,
-      children: /* @__PURE__ */ jsx36("span", { className: "malix-toggle__knob" })
+      children: /* @__PURE__ */ jsx37("span", { className: "malix-toggle__knob" })
     }
   );
   if (label) {
-    return /* @__PURE__ */ jsxs32("div", { className: "malix-toggle-row", children: [
-      /* @__PURE__ */ jsx36("span", { className: "malix-toggle-row__label", children: label }),
+    return /* @__PURE__ */ jsxs33("div", { className: "malix-toggle-row", children: [
+      /* @__PURE__ */ jsx37("span", { className: "malix-toggle-row__label", children: label }),
       toggle
     ] });
   }
@@ -1486,7 +1667,7 @@ function Toggle({
 }
 
 // src/components/Select.tsx
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 function Select({
   value,
   placeholder,
@@ -1497,14 +1678,14 @@ function Select({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: `malix-select${className ? ` ${className}` : ""}`,
       "data-filled": filled || void 0,
       "data-disabled": disabled || void 0,
       children: [
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           "select",
           {
             className: "malix-select__native",
@@ -1513,12 +1694,12 @@ function Select({
             onChange: (e) => onChange?.(e.target.value),
             ...props,
             children: [
-              placeholder ? /* @__PURE__ */ jsx37("option", { value: "", disabled: true, children: placeholder }) : null,
-              options.map((opt) => /* @__PURE__ */ jsx37("option", { value: opt.value, children: opt.label }, opt.value))
+              placeholder ? /* @__PURE__ */ jsx38("option", { value: "", disabled: true, children: placeholder }) : null,
+              options.map((opt) => /* @__PURE__ */ jsx38("option", { value: opt.value, children: opt.label }, opt.value))
             ]
           }
         ),
-        /* @__PURE__ */ jsx37("span", { className: "malix-select__icon", children: /* @__PURE__ */ jsx37("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("span", { className: "malix-select__icon", children: /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx38(
           "path",
           {
             d: "M4 6L8 10L12 6",
@@ -1534,7 +1715,7 @@ function Select({
 }
 
 // src/components/SelectGroup.tsx
-import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 function SelectGroup({
   label,
   helperText,
@@ -1543,23 +1724,23 @@ function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: `malix-select-group${className ? ` ${className}` : ""}`,
       "data-error": error || void 0,
       ...props,
       children: [
-        label ? /* @__PURE__ */ jsx38("span", { className: "malix-select-group__label", children: label }) : null,
+        label ? /* @__PURE__ */ jsx39("span", { className: "malix-select-group__label", children: label }) : null,
         children,
-        helperText ? /* @__PURE__ */ jsx38("span", { className: "malix-select-group__helper", children: helperText }) : null
+        helperText ? /* @__PURE__ */ jsx39("span", { className: "malix-select-group__helper", children: helperText }) : null
       ]
     }
   );
 }
 
 // src/components/SegmentedControl.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function SegmentedControl({
   items,
   value,
@@ -1567,13 +1748,13 @@ function SegmentedControl({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: `malix-segmented-control${className ? ` ${className}` : ""}`,
       role: "radiogroup",
       ...props,
-      children: items.map((item) => /* @__PURE__ */ jsx39(
+      children: items.map((item) => /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -1591,7 +1772,7 @@ function SegmentedControl({
 }
 
 // src/components/DataTable.tsx
-import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -1600,13 +1781,13 @@ function DataTable({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "table",
     {
       className: `malix-data-table${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx40("thead", { children: /* @__PURE__ */ jsx40("tr", { className: "malix-data-table__header-row", children: columns.map((col) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsx41("tr", { className: "malix-data-table__header-row", children: columns.map((col) => /* @__PURE__ */ jsx41(
           "th",
           {
             className: "malix-data-table__header-cell",
@@ -1615,16 +1796,16 @@ function DataTable({
           },
           col.key
         )) }) }),
-        /* @__PURE__ */ jsx40("tbody", { className: "malix-data-table__body", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41("tbody", { className: "malix-data-table__body", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx41(
           "tr",
           {
             className: "malix-data-table__data-row",
             "data-clickable": onRowClick ? true : void 0,
             onClick: onRowClick ? () => onRowClick(row) : void 0,
-            children: columns.map((col) => /* @__PURE__ */ jsx40("td", { className: "malix-data-table__cell", children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key))
+            children: columns.map((col) => /* @__PURE__ */ jsx41("td", { className: "malix-data-table__cell", children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key))
           },
           rowIndex
-        )) : /* @__PURE__ */ jsx40("tr", { className: "malix-data-table__data-row", children: /* @__PURE__ */ jsx40(
+        )) : /* @__PURE__ */ jsx41("tr", { className: "malix-data-table__data-row", children: /* @__PURE__ */ jsx41(
           "td",
           {
             className: "malix-data-table__cell",
@@ -1638,12 +1819,12 @@ function DataTable({
 }
 
 // src/components/Pagination.tsx
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function ChevronLeft() {
-  return /* @__PURE__ */ jsx41("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx42("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx42("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function ChevronRight() {
-  return /* @__PURE__ */ jsx41("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx42("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx42("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function Pagination({
   currentPage,
@@ -1655,14 +1836,14 @@ function Pagination({
   const isFirstPage = currentPage <= 1;
   const isLastPage = currentPage >= totalPages;
   const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "nav",
     {
       className: `malix-pagination${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       "aria-label": "Pagination",
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
@@ -1671,10 +1852,10 @@ function Pagination({
             disabled: isFirstPage,
             onClick: () => onPageChange(currentPage - 1),
             "aria-label": "Previous page",
-            children: /* @__PURE__ */ jsx41(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx42(ChevronLeft, {})
           }
         ),
-        variant === "full" ? pages.map((page) => /* @__PURE__ */ jsx41(
+        variant === "full" ? pages.map((page) => /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
@@ -1685,12 +1866,12 @@ function Pagination({
             children: page
           },
           page
-        )) : /* @__PURE__ */ jsxs36("span", { className: "malix-pagination__label", children: [
+        )) : /* @__PURE__ */ jsxs37("span", { className: "malix-pagination__label", children: [
           currentPage,
           " of ",
           totalPages
         ] }),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
@@ -1699,7 +1880,7 @@ function Pagination({
             disabled: isLastPage,
             onClick: () => onPageChange(currentPage + 1),
             "aria-label": "Next page",
-            children: /* @__PURE__ */ jsx41(ChevronRight, {})
+            children: /* @__PURE__ */ jsx42(ChevronRight, {})
           }
         )
       ]
@@ -1708,30 +1889,30 @@ function Pagination({
 }
 
 // src/components/StatusDot.tsx
-import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 function StatusDot({
   variant = "default",
   label,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "span",
     {
       className: `malix-status-dot${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       ...props,
       children: [
-        /* @__PURE__ */ jsx42("span", { className: "malix-status-dot__dot", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx42("span", { className: "malix-status-dot__label", children: label })
+        /* @__PURE__ */ jsx43("span", { className: "malix-status-dot__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx43("span", { className: "malix-status-dot__label", children: label })
       ]
     }
   );
 }
 
 // src/components/Dropzone.tsx
-import { useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useRef as useRef5, useState as useState4 } from "react";
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 function Dropzone({
   onDrop,
   accept,
@@ -1742,7 +1923,7 @@ function Dropzone({
   ...props
 }) {
   const [dragging, setDragging] = useState4(false);
-  const inputRef = useRef3(null);
+  const inputRef = useRef5(null);
   function handleDragOver(event) {
     event.preventDefault();
     if (!disabled) setDragging(true);
@@ -1766,7 +1947,7 @@ function Dropzone({
   function handleClick() {
     if (!disabled) inputRef.current?.click();
   }
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: `malix-dropzone${className ? ` ${className}` : ""}`,
@@ -1781,7 +1962,7 @@ function Dropzone({
       "aria-disabled": disabled || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "input",
           {
             ref: inputRef,
@@ -1792,7 +1973,7 @@ function Dropzone({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "svg",
           {
             className: "malix-dropzone__icon",
@@ -1806,23 +1987,23 @@ function Dropzone({
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx43("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
-              /* @__PURE__ */ jsx43("path", { d: "M12 12v9" }),
-              /* @__PURE__ */ jsx43("path", { d: "m16 16-4-4-4 4" })
+              /* @__PURE__ */ jsx44("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+              /* @__PURE__ */ jsx44("path", { d: "M12 12v9" }),
+              /* @__PURE__ */ jsx44("path", { d: "m16 16-4-4-4 4" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "malix-dropzone__title", children: title }),
-        /* @__PURE__ */ jsx43("span", { className: "malix-dropzone__hint", children: hint }),
-        /* @__PURE__ */ jsx43("span", { className: "malix-dropzone__browse-btn", children: "Browse files" })
+        /* @__PURE__ */ jsx44("span", { className: "malix-dropzone__title", children: title }),
+        /* @__PURE__ */ jsx44("span", { className: "malix-dropzone__hint", children: hint }),
+        /* @__PURE__ */ jsx44("span", { className: "malix-dropzone__browse-btn", children: "Browse files" })
       ]
     }
   );
 }
 
 // src/components/SplitPane.tsx
-import { useState as useState5, useCallback, useRef as useRef4, useEffect as useEffect3 } from "react";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useState as useState5, useCallback as useCallback2, useRef as useRef6, useEffect as useEffect5 } from "react";
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 function SplitPane({
   leftPanel,
   rightPanel,
@@ -1833,13 +2014,13 @@ function SplitPane({
   ...props
 }) {
   const [split, setSplit] = useState5(defaultSplit);
-  const containerRef = useRef4(null);
-  const dragging = useRef4(false);
-  const onMouseDown = useCallback((e) => {
+  const containerRef = useRef6(null);
+  const dragging = useRef6(false);
+  const onMouseDown = useCallback2((e) => {
     e.preventDefault();
     dragging.current = true;
   }, []);
-  useEffect3(() => {
+  useEffect5(() => {
     function onMouseMove(e) {
       if (!dragging.current || !containerRef.current) return;
       const rect = containerRef.current.getBoundingClientRect();
@@ -1857,18 +2038,18 @@ function SplitPane({
       document.removeEventListener("mouseup", onMouseUp);
     };
   }, []);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       ref: containerRef,
       className: `malix-split-pane${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs39("div", { className: "malix-split-pane__left", style: { width: `${split}%` }, children: [
-          leftTitle ? /* @__PURE__ */ jsx44("span", { className: "malix-split-pane__panel-title", children: leftTitle }) : null,
+        /* @__PURE__ */ jsxs40("div", { className: "malix-split-pane__left", style: { width: `${split}%` }, children: [
+          leftTitle ? /* @__PURE__ */ jsx45("span", { className: "malix-split-pane__panel-title", children: leftTitle }) : null,
           leftPanel
         ] }),
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs40(
           "div",
           {
             className: "malix-split-pane__handle",
@@ -1879,14 +2060,14 @@ function SplitPane({
             "aria-label": "Resize panels",
             onMouseDown,
             children: [
-              /* @__PURE__ */ jsx44("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx44("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx44("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" })
+              /* @__PURE__ */ jsx45("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx45("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx45("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: "malix-split-pane__right", style: { width: `${100 - split}%` }, children: [
-          rightTitle ? /* @__PURE__ */ jsx44("span", { className: "malix-split-pane__panel-title", children: rightTitle }) : null,
+        /* @__PURE__ */ jsxs40("div", { className: "malix-split-pane__right", style: { width: `${100 - split}%` }, children: [
+          rightTitle ? /* @__PURE__ */ jsx45("span", { className: "malix-split-pane__panel-title", children: rightTitle }) : null,
           rightPanel
         ] })
       ]
@@ -1895,7 +2076,7 @@ function SplitPane({
 }
 
 // src/components/PricingCard.tsx
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 function PricingCard({
   planName,
   price,
@@ -1908,21 +2089,21 @@ function PricingCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       className: `malix-pricing-card${className ? ` ${className}` : ""}`,
       "data-highlighted": highlighted || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsx45("span", { className: "malix-pricing-card__badge", children: planName }),
-        /* @__PURE__ */ jsxs40("div", { className: "malix-pricing-card__price-row", children: [
-          /* @__PURE__ */ jsx45("span", { className: "malix-pricing-card__price", children: price }),
-          /* @__PURE__ */ jsx45("span", { className: "malix-pricing-card__period", children: period })
+        /* @__PURE__ */ jsx46("span", { className: "malix-pricing-card__badge", children: planName }),
+        /* @__PURE__ */ jsxs41("div", { className: "malix-pricing-card__price-row", children: [
+          /* @__PURE__ */ jsx46("span", { className: "malix-pricing-card__price", children: price }),
+          /* @__PURE__ */ jsx46("span", { className: "malix-pricing-card__period", children: period })
         ] }),
-        description ? /* @__PURE__ */ jsx45("p", { className: "malix-pricing-card__description", children: description }) : null,
-        /* @__PURE__ */ jsx45("ul", { className: "malix-pricing-card__features", children: features.map((feature, i) => /* @__PURE__ */ jsxs40("li", { className: "malix-pricing-card__feature-item", children: [
-          /* @__PURE__ */ jsx45(
+        description ? /* @__PURE__ */ jsx46("p", { className: "malix-pricing-card__description", children: description }) : null,
+        /* @__PURE__ */ jsx46("ul", { className: "malix-pricing-card__features", children: features.map((feature, i) => /* @__PURE__ */ jsxs41("li", { className: "malix-pricing-card__feature-item", children: [
+          /* @__PURE__ */ jsx46(
             "svg",
             {
               className: "malix-pricing-card__check-icon",
@@ -1935,12 +2116,12 @@ function PricingCard({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx45("polyline", { points: "20 6 9 17 4 12" })
+              children: /* @__PURE__ */ jsx46("polyline", { points: "20 6 9 17 4 12" })
             }
           ),
-          /* @__PURE__ */ jsx45("span", { children: feature })
+          /* @__PURE__ */ jsx46("span", { children: feature })
         ] }, i)) }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "button",
           {
             type: "button",
@@ -1955,7 +2136,7 @@ function PricingCard({
 }
 
 // src/components/OnboardingPopover.tsx
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 function OnboardingPopover({
   step,
   totalSteps,
@@ -1967,7 +2148,7 @@ function OnboardingPopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `malix-onboarding-popover${className ? ` ${className}` : ""}`,
@@ -1975,16 +2156,16 @@ function OnboardingPopover({
       "aria-label": `Step ${step} of ${totalSteps}: ${title}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs41("span", { className: "malix-onboarding-popover__step", children: [
+        /* @__PURE__ */ jsxs42("span", { className: "malix-onboarding-popover__step", children: [
           "Step ",
           step,
           " of ",
           totalSteps
         ] }),
-        /* @__PURE__ */ jsx46("h3", { className: "malix-onboarding-popover__title", children: title }),
-        /* @__PURE__ */ jsx46("p", { className: "malix-onboarding-popover__description", children: description }),
-        /* @__PURE__ */ jsxs41("div", { className: "malix-onboarding-popover__actions", children: [
-          onSkip ? /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47("h3", { className: "malix-onboarding-popover__title", children: title }),
+        /* @__PURE__ */ jsx47("p", { className: "malix-onboarding-popover__description", children: description }),
+        /* @__PURE__ */ jsxs42("div", { className: "malix-onboarding-popover__actions", children: [
+          onSkip ? /* @__PURE__ */ jsx47(
             "button",
             {
               type: "button",
@@ -1993,7 +2174,7 @@ function OnboardingPopover({
               children: "Skip"
             }
           ) : null,
-          onNext ? /* @__PURE__ */ jsx46(
+          onNext ? /* @__PURE__ */ jsx47(
             "button",
             {
               type: "button",
@@ -2009,20 +2190,20 @@ function OnboardingPopover({
 }
 
 // src/components/CreditsIndicator.tsx
-import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function CreditsIndicator({
   remaining,
   label = "Credits Remaining",
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       className: `malix-credits-indicator${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx47("span", { className: "malix-credits-indicator__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsx48("span", { className: "malix-credits-indicator__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs43(
           "svg",
           {
             width: "20",
@@ -2034,15 +2215,15 @@ function CreditsIndicator({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx47("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3" }),
-              /* @__PURE__ */ jsx47("path", { d: "M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" }),
-              /* @__PURE__ */ jsx47("path", { d: "M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" })
+              /* @__PURE__ */ jsx48("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3" }),
+              /* @__PURE__ */ jsx48("path", { d: "M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" }),
+              /* @__PURE__ */ jsx48("path", { d: "M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs42("div", { className: "malix-credits-indicator__info", children: [
-          /* @__PURE__ */ jsx47("span", { className: "malix-credits-indicator__label", children: label }),
-          /* @__PURE__ */ jsx47("span", { className: "malix-credits-indicator__value", children: remaining })
+        /* @__PURE__ */ jsxs43("div", { className: "malix-credits-indicator__info", children: [
+          /* @__PURE__ */ jsx48("span", { className: "malix-credits-indicator__label", children: label }),
+          /* @__PURE__ */ jsx48("span", { className: "malix-credits-indicator__value", children: remaining })
         ] })
       ]
     }
@@ -2050,7 +2231,7 @@ function CreditsIndicator({
 }
 
 // src/components/LanguageSelector.tsx
-import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 function LanguageSelector({
   value,
   options,
@@ -2060,13 +2241,13 @@ function LanguageSelector({
 }) {
   const selectedOption = options?.find((opt) => opt.value === value);
   const displayLabel = selectedOption?.label ?? value;
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: `malix-language-selector${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx48("span", { className: "malix-language-selector__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsx49("span", { className: "malix-language-selector__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs44(
           "svg",
           {
             width: "16",
@@ -2078,24 +2259,24 @@ function LanguageSelector({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsx48("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-              /* @__PURE__ */ jsx48("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" })
+              /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx49("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+              /* @__PURE__ */ jsx49("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           "select",
           {
             className: "malix-language-selector__select",
             value,
             onChange: (e) => onChange?.(e.target.value),
             "aria-label": "Select language",
-            children: options ? options.map((opt) => /* @__PURE__ */ jsx48("option", { value: opt.value, children: opt.label }, opt.value)) : /* @__PURE__ */ jsx48("option", { value, children: displayLabel })
+            children: options ? options.map((opt) => /* @__PURE__ */ jsx49("option", { value: opt.value, children: opt.label }, opt.value)) : /* @__PURE__ */ jsx49("option", { value, children: displayLabel })
           }
         ),
-        /* @__PURE__ */ jsx48("span", { className: "malix-language-selector__label", children: displayLabel }),
-        /* @__PURE__ */ jsx48("span", { className: "malix-language-selector__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49("span", { className: "malix-language-selector__label", children: displayLabel }),
+        /* @__PURE__ */ jsx49("span", { className: "malix-language-selector__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx49(
           "svg",
           {
             width: "14",
@@ -2106,7 +2287,7 @@ function LanguageSelector({
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx48("polyline", { points: "6 9 12 15 18 9" })
+            children: /* @__PURE__ */ jsx49("polyline", { points: "6 9 12 15 18 9" })
           }
         ) })
       ]
@@ -2115,7 +2296,7 @@ function LanguageSelector({
 }
 
 // src/components/UserProfilePopover.tsx
-import { Fragment as Fragment2, jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 function UserProfilePopover({
   name,
   email,
@@ -2126,26 +2307,26 @@ function UserProfilePopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: `malix-user-profile${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs44("div", { className: "malix-user-profile__header", children: [
-          avatar ? /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__avatar", children: avatar }) : null,
-          /* @__PURE__ */ jsxs44("div", { className: "malix-user-profile__info", children: [
-            /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__name", children: name }),
-            /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__email", children: email })
+        /* @__PURE__ */ jsxs45("div", { className: "malix-user-profile__header", children: [
+          avatar ? /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs45("div", { className: "malix-user-profile__info", children: [
+            /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__name", children: name }),
+            /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__email", children: email })
           ] })
         ] }),
-        credits !== void 0 ? /* @__PURE__ */ jsxs44("div", { className: "malix-user-profile__credits", children: [
-          /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__credits-label", children: "Credits" }),
-          /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__credits-value", children: credits })
+        credits !== void 0 ? /* @__PURE__ */ jsxs45("div", { className: "malix-user-profile__credits", children: [
+          /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__credits-label", children: "Credits" }),
+          /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__credits-value", children: credits })
         ] }) : null,
-        menuItems && menuItems.length > 0 ? /* @__PURE__ */ jsxs44(Fragment2, { children: [
-          /* @__PURE__ */ jsx49("hr", { className: "malix-user-profile__divider" }),
-          /* @__PURE__ */ jsx49("nav", { className: "malix-user-profile__menu", role: "menu", children: menuItems.map((item, i) => /* @__PURE__ */ jsxs44(
+        menuItems && menuItems.length > 0 ? /* @__PURE__ */ jsxs45(Fragment2, { children: [
+          /* @__PURE__ */ jsx50("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ jsx50("nav", { className: "malix-user-profile__menu", role: "menu", children: menuItems.map((item, i) => /* @__PURE__ */ jsxs45(
             "button",
             {
               type: "button",
@@ -2153,23 +2334,23 @@ function UserProfilePopover({
               role: "menuitem",
               onClick: item.onClick,
               children: [
-                item.icon ? /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__menu-item-icon", children: item.icon }) : null,
-                /* @__PURE__ */ jsx49("span", { className: "malix-user-profile__menu-item-label", children: item.label })
+                item.icon ? /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__menu-item-icon", children: item.icon }) : null,
+                /* @__PURE__ */ jsx50("span", { className: "malix-user-profile__menu-item-label", children: item.label })
               ]
             },
             i
           )) })
         ] }) : null,
-        onLogout ? /* @__PURE__ */ jsxs44(Fragment2, { children: [
-          /* @__PURE__ */ jsx49("hr", { className: "malix-user-profile__divider" }),
-          /* @__PURE__ */ jsxs44(
+        onLogout ? /* @__PURE__ */ jsxs45(Fragment2, { children: [
+          /* @__PURE__ */ jsx50("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ jsxs45(
             "button",
             {
               type: "button",
               className: "malix-user-profile__logout",
               onClick: onLogout,
               children: [
-                /* @__PURE__ */ jsxs44(
+                /* @__PURE__ */ jsxs45(
                   "svg",
                   {
                     width: "16",
@@ -2181,13 +2362,13 @@ function UserProfilePopover({
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ jsx49("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-                      /* @__PURE__ */ jsx49("polyline", { points: "16 17 21 12 16 7" }),
-                      /* @__PURE__ */ jsx49("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                      /* @__PURE__ */ jsx50("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                      /* @__PURE__ */ jsx50("polyline", { points: "16 17 21 12 16 7" }),
+                      /* @__PURE__ */ jsx50("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx49("span", { children: "Log out" })
+                /* @__PURE__ */ jsx50("span", { children: "Log out" })
               ]
             }
           )
@@ -2198,7 +2379,7 @@ function UserProfilePopover({
 }
 
 // src/components/ChatBubble.tsx
-import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function ChatBubble({
   variant,
   message,
@@ -2207,22 +2388,22 @@ function ChatBubble({
   className
 }) {
   const content = children ?? message;
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       className: `malix-chat-bubble-row${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       children: [
-        /* @__PURE__ */ jsx50("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ jsx50("span", { className: "malix-chat-bubble__text", children: content }) }),
-        variant === "user" && avatarInitials ? /* @__PURE__ */ jsx50("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
+        /* @__PURE__ */ jsx51("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ jsx51("span", { className: "malix-chat-bubble__text", children: content }) }),
+        variant === "user" && avatarInitials ? /* @__PURE__ */ jsx51("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
       ]
     }
   );
 }
 
 // src/components/AIAssistantPanel.tsx
-import { useState as useState6, useRef as useRef5, useEffect as useEffect4 } from "react";
-import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+import { useState as useState6, useRef as useRef7, useEffect as useEffect6 } from "react";
+import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function AIAssistantPanel({
   title = "AI Assistant",
   messages,
@@ -2234,8 +2415,8 @@ function AIAssistantPanel({
   className
 }) {
   const [draft, setDraft] = useState6("");
-  const bodyRef = useRef5(null);
-  useEffect4(() => {
+  const bodyRef = useRef7(null);
+  useEffect6(() => {
     if (bodyRef.current) {
       bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
     }
@@ -2252,25 +2433,25 @@ function AIAssistantPanel({
       handleSend();
     }
   };
-  return /* @__PURE__ */ jsxs46("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
-    /* @__PURE__ */ jsxs46("div", { className: "malix-ai-panel__header", children: [
-      /* @__PURE__ */ jsx51("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ jsx51("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx51("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
-      /* @__PURE__ */ jsx51("span", { className: "malix-ai-panel__title", children: title }),
-      onClose ? /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs47("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs47("div", { className: "malix-ai-panel__header", children: [
+      /* @__PURE__ */ jsx52("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ jsx52("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx52("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
+      /* @__PURE__ */ jsx52("span", { className: "malix-ai-panel__title", children: title }),
+      onClose ? /* @__PURE__ */ jsx52(
         "button",
         {
           type: "button",
           className: "malix-ai-panel__close",
           onClick: onClose,
           "aria-label": "Close assistant",
-          children: /* @__PURE__ */ jsxs46("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx51("path", { d: "M18 6 6 18" }),
-            /* @__PURE__ */ jsx51("path", { d: "m6 6 12 12" })
+          children: /* @__PURE__ */ jsxs47("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx52("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx52("path", { d: "m6 6 12 12" })
           ] })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx51("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ jsx52(
       ChatBubble,
       {
         variant: msg.variant,
@@ -2279,8 +2460,8 @@ function AIAssistantPanel({
       },
       msg.id
     )) }),
-    /* @__PURE__ */ jsx51("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ jsxs46("div", { className: "malix-ai-panel__input-row", children: [
-      /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ jsxs47("div", { className: "malix-ai-panel__input-row", children: [
+      /* @__PURE__ */ jsx52(
         "input",
         {
           type: "text",
@@ -2293,7 +2474,7 @@ function AIAssistantPanel({
           "aria-label": placeholder
         }
       ),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(
         "button",
         {
           type: "button",
@@ -2301,15 +2482,83 @@ function AIAssistantPanel({
           onClick: handleSend,
           disabled: disabled || !draft.trim(),
           "aria-label": "Send message",
-          children: /* @__PURE__ */ jsxs46("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx51("path", { d: "M12 19V5" }),
-            /* @__PURE__ */ jsx51("path", { d: "m5 12 7-7 7 7" })
+          children: /* @__PURE__ */ jsxs47("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx52("path", { d: "M12 19V5" }),
+            /* @__PURE__ */ jsx52("path", { d: "m5 12 7-7 7 7" })
           ] })
         }
       )
     ] }) })
   ] });
 }
+
+// src/theme.ts
+import { createContext, createElement, useCallback as useCallback3, useContext, useEffect as useEffect7, useMemo, useState as useState7 } from "react";
+var STORAGE_KEY = "malix-theme";
+var MalixThemeContext = createContext(null);
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") return stored;
+  } catch {
+  }
+  return null;
+}
+function resolveTheme(theme) {
+  return theme === "system" ? getSystemTheme() : theme;
+}
+function applyTheme(resolved) {
+  const root = document.documentElement;
+  root.classList.toggle("dark", resolved === "dark");
+  root.setAttribute("data-theme", resolved);
+}
+function MalixThemeProvider({ children, defaultTheme = "system" }) {
+  const [theme, setThemeState] = useState7(() => getStoredTheme() ?? defaultTheme);
+  const setTheme = useCallback3((next) => {
+    setThemeState(next);
+    try {
+      localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+    }
+    applyTheme(resolveTheme(next));
+  }, []);
+  const toggleTheme = useCallback3(() => {
+    setThemeState((prev) => {
+      const resolved = resolveTheme(prev);
+      const next = resolved === "dark" ? "light" : "dark";
+      try {
+        localStorage.setItem(STORAGE_KEY, next);
+      } catch {
+      }
+      applyTheme(next);
+      return next;
+    });
+  }, []);
+  useEffect7(() => {
+    applyTheme(resolveTheme(theme));
+  }, [theme]);
+  useEffect7(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme(getSystemTheme());
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  const value = useMemo(() => ({ theme, setTheme, toggleTheme }), [theme, setTheme, toggleTheme]);
+  return createElement(MalixThemeContext.Provider, { value }, children);
+}
+function useMalixTheme() {
+  const ctx = useContext(MalixThemeContext);
+  if (!ctx) {
+    throw new Error("useMalixTheme must be used within a MalixThemeProvider");
+  }
+  return ctx;
+}
 export {
   AIAssistantPanel,
   Accordion,
@@ -2322,6 +2571,7 @@ export {
   ChatBubble,
   ChatInput,
   Checkbox,
+  ConfirmDialog,
   CreditsIndicator,
   DataTable,
   DateInput,
@@ -2336,6 +2586,7 @@ export {
   Input,
   InputGroup,
   LanguageSelector,
+  MalixThemeProvider,
   Modal,
   OnboardingPopover,
   OperationStatus,
@@ -2363,5 +2614,6 @@ export {
   Tooltip,
   UserProfilePopover,
   ValidationAlert,
-  tokens_registry_default as tokenRegistry
+  tokens_registry_default as tokenRegistry,
+  useMalixTheme
 };