@houssemdi2000/design-system 1.2.0 → 1.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -30,29 +30,29 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = ".btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-dark{background-color:#141617;color:#fff}.btn-light{background-color:#f8f9fa;color:#000}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-left-icon{margin-right:8px}.btn-left-icon,.btn-right-icon{align-items:center;display:inline-flex}.btn-right-icon{margin-left:8px}.btn-spinner{animation:spin .7s linear infinite;border:3px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;display:inline-block;height:12px;margin-left:5px;width:12px}@keyframes spin{to{transform:rotate(1turn)}}.btn-loading{cursor:not-allowed;position:relative}.btn-loading span,.btn-loading svg{opacity:0}.btn-loading>:not(.btn-spinner){visibility:hidden}";
-styleInject(css_248z$b);
+var css_248z$s = ".btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-dark{background-color:#141617;color:#fff}.btn-light{background-color:#f8f9fa;color:#000}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-left-icon{margin-right:8px}.btn-left-icon,.btn-right-icon{align-items:center;display:inline-flex}.btn-right-icon{margin-left:8px}.btn-spinner{animation:spin .7s linear infinite;border:3px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;display:inline-block;height:12px;margin-left:5px;width:12px}@keyframes spin{to{transform:rotate(1turn)}}.btn-loading{cursor:not-allowed;position:relative}.btn-loading span,.btn-loading svg{opacity:0}.btn-loading>:not(.btn-spinner){visibility:hidden}";
+styleInject(css_248z$s);
 
-const Button = ({ label, onClick, variant = "primary", size = "medium", disabled = false, icon, iconPosition = "left", backgroundColor, color, isLoading = false, }) => {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, disabled: disabled || isLoading, style: { backgroundColor, color }, children: [icon && iconPosition === "left" && jsxRuntime.jsx("span", { className: "btn-left-icon", children: icon }), label, icon && iconPosition === "right" && jsxRuntime.jsx("span", { className: "btn-right-icon", children: icon }), isLoading && jsxRuntime.jsx("span", { className: "btn-spinner" })] }) }));
+const Button = ({ label, onClick, type = "button", variant = "primary", size = "medium", disabled = false, icon, iconPosition = "left", backgroundColor, color, isLoading = false, mt, mb, mr, ml, style = {} }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, type: type, disabled: disabled || isLoading, style: Object.assign(Object.assign({}, style), { backgroundColor, color, marginTop: mt, marginBottom: mb, marginRight: mr, marginLeft: ml }), children: [icon && iconPosition === "left" && jsxRuntime.jsx("span", { className: "btn-left-icon", children: icon }), label, icon && iconPosition === "right" && jsxRuntime.jsx("span", { className: "btn-right-icon", children: icon }), isLoading && jsxRuntime.jsx("span", { className: "btn-spinner" })] }) }));
 };
 
-var css_248z$a = ".center{align-items:center;display:flex;justify-content:center}";
-styleInject(css_248z$a);
+var css_248z$r = ".center{align-items:center;display:flex;justify-content:center}";
+styleInject(css_248z$r);
 
 const Center = ({ children, backgroundColor = 'white', color = 'black' }) => {
     return jsxRuntime.jsx("div", { className: "center", style: { backgroundColor, color }, children: children });
 };
 
-var css_248z$9 = ".card{background:#fff;border-radius:12px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.card-elevated{box-shadow:0 2px 4px rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.06)}.card-elevated:hover{box-shadow:0 4px 8px rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.08);transform:translateY(-2px)}.card-outlined{border:1px solid #e5e7eb}.card-flat{background:transparent;border:none}.card-padding-sm{padding:8px}.card-padding-md{padding:16px}.card-padding-lg{padding:24px}.card-header{font-size:1.25rem;font-weight:600;margin-bottom:4px}.card-body{font-size:.95rem;line-height:1.5}.card-footer{border-top:1px solid #ececec;color:#555;font-size:.9rem;margin-top:8px;padding-top:8px}";
-styleInject(css_248z$9);
+var css_248z$q = ".card{background:#fff;border-radius:12px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.card-elevated{box-shadow:0 2px 4px rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.06)}.card-elevated:hover{box-shadow:0 4px 8px rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.08);transform:translateY(-2px)}.card-outlined{border:1px solid #e5e7eb}.card-flat{background:transparent;border:none}.card-padding-sm{padding:8px}.card-padding-md{padding:16px}.card-padding-lg{padding:24px}.card-header{font-size:1.25rem;font-weight:600;margin-bottom:4px}.card-body{font-size:.95rem;line-height:1.5}.card-footer{border-top:1px solid #ececec;color:#555;font-size:.9rem;margin-top:8px;padding-top:8px}";
+styleInject(css_248z$q);
 
 const Card = ({ title, children, footer, backgroundColor, color, variant = "elevated", padding = "md", }) => {
     return (jsxRuntime.jsxs("div", { className: `card card-${variant} card-padding-${padding}`, style: { backgroundColor, color }, children: [title && jsxRuntime.jsx("div", { className: "card-header", children: title }), jsxRuntime.jsx("div", { className: "card-body", children: children }), footer && jsxRuntime.jsx("div", { className: "card-footer", children: footer })] }));
 };
 
-var css_248z$8 = ".bloc{box-sizing:border-box;max-width:100%;padding:16px;width:100%}@media (max-width:600px){.bloc{border-radius:6px;padding:12px}}@media (max-width:900px){.bloc{padding:14px}}";
-styleInject(css_248z$8);
+var css_248z$p = ".bloc{box-sizing:border-box;max-width:100%;padding:16px;width:100%}@media (max-width:600px){.bloc{border-radius:6px;padding:12px}}@media (max-width:900px){.bloc{padding:14px}}";
+styleInject(css_248z$p);
 
 const Bloc = ({ children, className = "", style = {}, layout = "default", }) => {
     const layoutStyles = (() => {
@@ -76,22 +76,22 @@ const Bloc = ({ children, className = "", style = {}, layout = "default", }) =>
     return (jsxRuntime.jsx("div", { className: `bloc ${className}`, style: Object.assign(Object.assign({}, layoutStyles), style), children: children }));
 };
 
-var css_248z$7 = ".container{margin:0 auto;padding:0 16px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1200px}}.container-fluid{max-width:100%}";
-styleInject(css_248z$7);
+var css_248z$o = ".container{margin:0 auto;padding:0 16px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1200px}}.container-fluid{max-width:100%}";
+styleInject(css_248z$o);
 
 const Container = ({ children, className = "", style = {}, fluid = false }) => {
     return (jsxRuntime.jsx("div", { className: `container ${fluid ? "container-fluid" : ""} ${className}`, style: style, children: children }));
 };
 
-var css_248z$6 = ".row{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:16px}@media (max-width:768px){.row{flex-direction:column}}";
-styleInject(css_248z$6);
+var css_248z$n = ".row{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:16px}@media (max-width:768px){.row{flex-direction:column}}";
+styleInject(css_248z$n);
 
 const Row = ({ children, className = "", style = {} }) => {
     return jsxRuntime.jsx("div", { className: `row ${className}`, style: Object.assign({}, style), children: children });
 };
 
-var css_248z$5 = ".col,.column{box-sizing:border-box;flex:1 1 0;min-width:0;padding:8px}.col.small{max-width:20%}.col.medium{max-width:50%}.col.large{max-width:100%}.col>*,.column>*{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.col img,.column img{display:block;height:auto;max-width:100%}@media (max-width:768px){.col,.col.large,.col.medium,.col.small,.column{flex:none;max-width:100%;width:100%}}";
-styleInject(css_248z$5);
+var css_248z$m = ".col,.column{box-sizing:border-box;flex:1 1 0;min-width:0;padding:8px}.col.small{max-width:20%}.col.medium{max-width:50%}.col.large{max-width:100%}.col>*,.column>*{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.col img,.column img{display:block;height:auto;max-width:100%}@media (max-width:768px){.col,.col.large,.col.medium,.col.small,.column{flex:none;max-width:100%;width:100%}}";
+styleInject(css_248z$m);
 
 const Column = ({ children, className = "", style = {} }) => {
     return (jsxRuntime.jsx("div", { className: `col ${className}`, style: Object.assign({}, style), children: children }));
@@ -125,8 +125,8 @@ const Divider = ({ color = "#e0e0e0", thickness = 1, orientation = "horizontal",
     return jsxRuntime.jsx("div", { style: styles });
 };
 
-var css_248z$4 = ".checkbox-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px;user-select:none}.checkbox-container.disabled{cursor:not-allowed;opacity:.5}.checkbox-container input{appearance:none;-webkit-appearance:none;height:0;position:absolute;width:0}.checkbox-box{border:2px solid var(--cb-box-color,#777);border-radius:4px;display:inline-block;height:18px;position:relative;transition:.2s ease;width:18px}.checkbox-container input:checked+.checkbox-box{background-color:var(--cb-checked-bg,#007bff);border-color:var(--cb-checked-bg,#007bff)}.checkbox-container input:checked+.checkbox-box:after{border-width:medium;border-bottom:2px solid var(--cb-check-color,#fff);border-left:0 solid var(--cb-check-color,#fff);border-right:2px solid var(--cb-check-color,#fff);border-top:0 solid var(--cb-check-color,#fff);content:\"\";height:10px;left:5px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.checkbox-container input:focus+.checkbox-box{box-shadow:0 0 4px var(--cb-focus-shadow,rgba(0,123,255,.4))}.checkbox-box.error{border-color:#d93025!important}.checkbox-label{font-size:14px}";
-styleInject(css_248z$4);
+var css_248z$l = ".checkbox-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px;user-select:none}.checkbox-container.disabled{cursor:not-allowed;opacity:.5}.checkbox-container input{appearance:none;-webkit-appearance:none;height:0;position:absolute;width:0}.checkbox-box{border:2px solid var(--cb-box-color,#777);border-radius:4px;display:inline-block;height:18px;position:relative;transition:.2s ease;width:18px}.checkbox-container input:checked+.checkbox-box{background-color:var(--cb-checked-bg,#007bff);border-color:var(--cb-checked-bg,#007bff)}.checkbox-container input:checked+.checkbox-box:after{border-width:medium;border-bottom:2px solid var(--cb-check-color,#fff);border-left:0 solid var(--cb-check-color,#fff);border-right:2px solid var(--cb-check-color,#fff);border-top:0 solid var(--cb-check-color,#fff);content:\"\";height:10px;left:5px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.checkbox-container input:focus+.checkbox-box{box-shadow:0 0 4px var(--cb-focus-shadow,rgba(0,123,255,.4))}.checkbox-box.error{border-color:#d93025!important}.checkbox-label{font-size:14px}";
+styleInject(css_248z$l);
 
 const Checkbox = ({ label, checked, onChange, disabled = false, error = false, boxColor = "#777", checkColor = "#fff", checkedBackground = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
     return (jsxRuntime.jsxs("label", { className: `checkbox-container ${disabled ? "disabled" : ""}`, style: {
@@ -137,64 +137,535 @@ const Checkbox = ({ label, checked, onChange, disabled = false, error = false, b
         }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked) }), jsxRuntime.jsx("span", { className: `checkbox-box ${error ? "error" : ""}` }), label && jsxRuntime.jsx("span", { className: "checkbox-label", children: label })] }));
 };
 
-var css_248z$3 = ".textfield{display:flex;flex-direction:column;font-family:sans-serif;gap:6px}.fullWidth{width:100%}.textfield-label{color:#333;font-size:14px;font-weight:600}.textfield-input{border:1px solid #ccc;border-radius:6px;font-size:14px;padding:10px 12px;transition:.2s ease}.textfield-input:focus{border-color:#4c00ff;box-shadow:0 0 2px #007bff;outline:none}.textfield-input.error{background-color:#fff5f5;border-color:#d93025}.textfield-error{background-color:#f44343;color:#ece6e6;font-size:12px;padding:8px}.textfield-icon{position:absolute;right:45px;top:45px;width:2px}";
-styleInject(css_248z$3);
+var css_248z$k = ".textfield{display:flex;flex-direction:column;font-family:sans-serif;gap:6px}.fullWidth{width:100%}.textfield-label{color:#333;font-size:14px;font-weight:600}.textfield-input{border:1px solid #ccc;border-radius:6px;font-size:14px;padding:10px 12px;transition:.2s ease}.textfield-input:focus{border-color:#4c00ff;box-shadow:0 0 2px #007bff;outline:none}.textfield-input.error{background-color:#fff5f5;border-color:#d93025}.textfield-error{background-color:#f44343;color:#ece6e6;font-size:12px;padding:8px}.textfield-icon{position:absolute;right:45px;top:45px;width:2px}";
+styleInject(css_248z$k);
 
 const TextField = ({ label, value = "", placeholder, onChange, error, disabled = false, type = "text", fullWidth = true, icon, }) => {
     return (jsxRuntime.jsxs("div", { className: `textfield ${fullWidth ? "fullWidth" : ""}`, children: [label && jsxRuntime.jsx("label", { className: "textfield-label", children: label }), jsxRuntime.jsx("input", { type: type, className: `textfield-input ${error ? "error" : ""}`, value: value, placeholder: placeholder, disabled: disabled, onChange: (e) => onChange && onChange(e.target.value) }), icon && jsxRuntime.jsx("div", { className: "textfield-icon", children: icon }), error && jsxRuntime.jsx("p", { className: "textfield-error", children: error })] }));
 };
 
-var css_248z$2 = ".radio-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px}.radio-container input{display:none}.radio-circle{align-items:center;border:2px solid var(--rd-border-color,#777);border-radius:50%;display:flex;height:18px;justify-content:center;position:relative;transition:.2s ease;width:18px}.radio-circle:after{background-color:var(--rd-dot-color,#fff);border-radius:50%;content:\"\";height:10px;opacity:0;transform:scale(.4);transition:.2s ease;width:10px}.radio-container input:checked+.radio-circle{background-color:var(--rd-checked-bg,#007bff);border-color:var(--rd-checked-border,#007bff)}.radio-container input:checked+.radio-circle:after{opacity:1;transform:scale(1)}.radio-circle.error{border-color:#d93025!important}.radio-label{font-size:14px}.disabled{cursor:not-allowed;opacity:.6}";
-styleInject(css_248z$2);
+var css_248z$j = ".radio-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px}.radio-container input{display:none}.radio-circle{align-items:center;border:2px solid var(--rd-border-color,#777);border-radius:50%;display:flex;height:18px;justify-content:center;position:relative;transition:.2s ease;width:18px}.radio-circle:after{background-color:var(--rd-dot-color,#fff);border-radius:50%;content:\"\";height:10px;opacity:0;transform:scale(.4);transition:.2s ease;width:10px}.radio-container input:checked+.radio-circle{background-color:var(--rd-checked-bg,#007bff);border-color:var(--rd-checked-border,#007bff)}.radio-container input:checked+.radio-circle:after{opacity:1;transform:scale(1)}.radio-circle.error{border-color:#d93025!important}.radio-label{font-size:14px}.disabled{cursor:not-allowed;opacity:.6}";
+styleInject(css_248z$j);
 
 const Radio = ({ label, name, value, selectedValue, onChange, disabled = false, error = false, borderColor = "#777", dotColor = "#fff", checkedBorderColor = "#007bff", checkedBackground = error ? "#d93025" : "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
     const checked = selectedValue === value;
     return (jsxRuntime.jsxs("label", { className: `radio-container ${disabled ? "disabled" : ""}`, style: Object.assign(Object.assign({}, style), { ["--rd-border-color"]: borderColor, ["--rd-dot-color"]: dotColor, ["--rd-checked-border"]: checkedBorderColor, ["--rd-checked-bg"]: checkedBackground, ["--rd-focus-shadow"]: focusShadow }), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: () => onChange(value) }), jsxRuntime.jsx("span", { className: `radio-circle ${error ? "error" : ""}` }), label && jsxRuntime.jsx("span", { className: "radio-label", children: label })] }));
 };
 
-var css_248z$1 = ".select-wrapper{display:flex;flex-direction:column;font-family:sans-serif;gap:4px}.select-label{font-size:14px;font-weight:500}.select-container{position:relative;width:100%}.select-container select{background:#fff;border:1px solid var(--sel-border,#ccc);border-radius:6px;cursor:pointer;font-size:15px;padding:10px 12px;transition:all .2s ease;width:100%}.select-container select:focus{border-color:var(--sel-focus-border,#007bff);box-shadow:0 0 0 2px var(--sel-focus-shadow,rgba(0,123,255,.4));outline:none}.select-container.disabled select{background:#f2f2f2;cursor:not-allowed;opacity:.6}.select-container.error select{border-color:var(--sel-error,red)}.select-container.error select:focus{border-color:var(--sel-error,red);box-shadow:0 0 0 2px rgba(230,57,70,.35)}";
-styleInject(css_248z$1);
-
-const Select = ({ label, value, onChange, options, disabled = false, error = false, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", errorColor = "#e63946", style, }) => {
-    return (jsxRuntime.jsxs("div", { className: "select-wrapper", style: style, children: [label && jsxRuntime.jsx("label", { className: "select-label", children: label }), jsxRuntime.jsx("div", { className: `select-container ${disabled ? "disabled" : ""} ${error ? "error" : ""}`, children: jsxRuntime.jsx("select", { value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: {
-                        ["--sel-border"]: borderColor,
-                        ["--sel-focus-border"]: focusBorder,
-                        ["--sel-focus-shadow"]: focusShadow,
-                        ["--sel-error"]: errorColor,
-                    }, children: options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, style: {
-                            backgroundColor: opt.bgColor,
-                            color: opt.textColor,
-                        }, children: opt.label }, opt.value))) }) })] }));
+var css_248z$i = ".select-wrapper{display:flex;flex-direction:column;font-family:sans-serif;gap:4px}.select-wrapper.dark-mode{background:#333;color:#fff}.select-label{font-size:14px;font-weight:500}.custom-select{align-items:center;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;padding:10px 12px;position:relative;transition:all .2s ease}.custom-select.default{background:#fff;border:1px solid var(--sel-border,#ccc)}.custom-select.dark-mode{background:#333;border:1px solid var(--sel-border,#000);color:#fff}.custom-select:focus-within,.custom-select:hover{border-color:var(--sel-focus-border,#007bff);box-shadow:0 0 0 2px var(--sel-focus-shadow,rgba(0,123,255,.4))}.custom-select.disabled{background:#f2f2f2;cursor:not-allowed;opacity:.6}.custom-select.error{border-color:var(--sel-error,red)}.custom-select.error:hover{box-shadow:0 0 0 2px rgba(230,57,70,.35)}.selected-value{font-size:15px}.options-list{animation:fadeIn .12s ease-out;border-radius:6px;left:0;max-height:260px;overflow-y:auto;position:absolute;right:0;top:calc(100% + 4px);z-index:20}.options-list.dark-mode{background:#333;border-color:var(--sel-border,#555)}.options-list.default{background:#fff;border:1px solid var(--sel-border,#ccc)}.option-item{cursor:pointer;padding:10px;transition:background .15s ease,color .15s ease}.option-item:hover{background:#b2a3a3!important}.option-item.active{background:var(--sel-item-active,#007bff)!important;color:#fff!important}.arrow{font-size:12px;opacity:.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}";
+styleInject(css_248z$i);
+
+const Select = ({ label, goal = "SELECT ...", value, onChange, options, disabled = false, error = false, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", errorColor = "#e63946", isDarkMode = false, style, }) => {
+    const [open, setOpen] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const selected = options.find((o) => o.value === value);
+    /** Close dropdown when clicking outside */
+    React.useEffect(() => {
+        const handleClick = (e) => {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: `select-wrapper ${isDarkMode ? "dark-mode" : ""}`, style: style, ref: wrapperRef, children: [label && jsxRuntime.jsx("label", { className: "select-label", children: label }), jsxRuntime.jsxs("div", { className: `custom-select ${disabled ? "disabled" : ""} ${error ? "error" : ""} ${isDarkMode ? "dark-mode" : "default"}`, style: {
+                    ["--sel-border"]: isDarkMode ? "black" : borderColor,
+                    ["--sel-focus-border"]: focusBorder,
+                    ["--sel-focus-shadow"]: focusShadow,
+                    ["--sel-error"]: errorColor,
+                }, onClick: () => !disabled && setOpen((o) => !o), children: [jsxRuntime.jsx("div", { className: "selected-value", children: selected ? selected.label : goal }), jsxRuntime.jsx("div", { className: "arrow", children: open ? "▲" : "▼" }), open && (jsxRuntime.jsx("div", { className: `options-list ${isDarkMode ? "dark-mode" : "default"}`, children: options.map((opt) => (jsxRuntime.jsx("div", { className: `option-item ${opt.value === value ? "active" : ""}`, style: {
+                                background: opt.bgColor,
+                                color: opt.textColor,
+                                ["--sel-item-active"]: focusBorder,
+                            }, onClick: () => {
+                                onChange(opt.value);
+                                setOpen(false);
+                            }, children: opt.label }, opt.value))) }))] })] }));
 };
 
-var css_248z = ".toast-container{display:flex;flex-direction:column;gap:10px;position:fixed;right:20px;top:20px;z-index:9999}.toast{align-items:center;animation:toast-slide .3s ease,toast-fadeout .3s ease forwards;animation-delay:0s,2.8s;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2);color:#fff;display:flex;font-size:14px;justify-content:space-between;max-width:320px;min-width:260px;padding:12px 16px;position:relative}.toast-success{background-color:#2ecc71}.toast-error{background-color:#e74c3c}.toast-warning{background-color:#f1c40f;color:#333}.toast-info{background-color:#3498db}.toast-close{background:none;border:none;color:inherit;cursor:pointer;font-size:16px}@keyframes toast-slide{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes toast-fadeout{0%{opacity:1}to{opacity:0}}";
-styleInject(css_248z);
+var css_248z$h = ".toast-container{display:flex;flex-direction:column;gap:10px;position:fixed;z-index:9999}.top-right{right:20px;top:20px}.top-left{left:20px;top:20px}.bottom-right{bottom:20px;right:20px}.bottom-left{bottom:20px;left:20px}.toast-icon{font-size:18px}.toast{align-items:center;animation:toast-slide .3s ease,toast-fadeout .3s ease forwards;animation-delay:0s,2.8s;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2);color:#fff;display:flex;font-size:14px;justify-content:space-between;max-width:320px;min-width:260px;padding:12px 16px;position:relative}.toast-success{background-color:#2ecc71}.toast-error{background-color:#e74c3c}.toast-warning{background-color:#f1c40f;color:#333}.toast-info{background-color:#3498db}.toast-close{background:none;border:none;color:inherit;cursor:pointer;font-size:16px}@keyframes toast-slide{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes toast-fadeout{0%{opacity:1}to{opacity:0}}";
+styleInject(css_248z$h);
 
-const ToastContext = react.createContext(undefined);
+const ToastContext = React.createContext(undefined);
 const useToast = () => {
-    const ctx = react.useContext(ToastContext);
+    const ctx = React.useContext(ToastContext);
     if (!ctx)
         throw new Error("useToast must be used inside <ToastProvider>");
     return ctx;
 };
-const ToastProvider = ({ children }) => {
-    const [toasts, setToasts] = react.useState([]);
-    function addToast(message, variant = "info", duration = 3000) {
+// ✔ Icônes par défaut selon le variant
+const TOAST_ICONS = {
+    success: "✔️",
+    error: "❌",
+    warning: "⚠️",
+    info: "ℹ️",
+};
+const ToastProvider = ({ children, }) => {
+    const [toasts, setToasts] = React.useState([]);
+    function addToast(message, variant = "info", duration = 3000, position = "top-right") {
         const toast = {
             id: Date.now().toString(),
             message,
             variant,
             duration,
+            position,
         };
         setToasts((prev) => [...prev, toast]);
-        // auto-remove
         setTimeout(() => {
             setToasts((prev) => prev.filter((t) => t.id !== toast.id));
         }, duration);
     }
-    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast }, children: [children, jsxRuntime.jsx("div", { className: "toast-container", children: toasts.map((t) => (jsxRuntime.jsxs("div", { className: `toast toast-${t.variant}`, children: [jsxRuntime.jsx("span", { children: t.message }), jsxRuntime.jsx("button", { className: "toast-close", onClick: () => setToasts((prev) => prev.filter((x) => x.id !== t.id)), children: "\u2715" })] }, t.id))) })] }));
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast }, children: [children, jsxRuntime.jsx("div", { className: "toast-root", children: toasts.map((t) => {
+                    var _a;
+                    return (jsxRuntime.jsxs("div", { className: `toast toast-${t.variant} ${t.position}`, children: [jsxRuntime.jsx("span", { className: "toast-icon", children: TOAST_ICONS[(_a = t.variant) !== null && _a !== void 0 ? _a : "info"] }), jsxRuntime.jsx("span", { className: "toast-message", children: t.message }), jsxRuntime.jsx("button", { className: "toast-close", onClick: () => setToasts((prev) => prev.filter((x) => x.id !== t.id)), children: "\u2715" })] }, t.id));
+                }) })] }));
+};
+
+var css_248z$g = ".modal-overlay{align-items:center;animation:fadeIn .25s ease forwards;backdrop-filter:blur(3px);background:rgba(0,0,0,.45);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}.modal-container{animation:scaleIn .25s ease forwards;background:#fff;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.2);font-family:sans-serif;max-width:90%;padding:20px}.modal-container.light-mode{background:#fdfdfd}.modal-container.dark-mode{background:#121212;color:#fff}.modal-header{align-items:center;display:flex;justify-content:space-between}.modal-title{font-size:16px;font-weight:600;margin:0 0 10px}.modal-body{margin-bottom:15px}.modal-footer{display:flex;justify-content:flex-end}.modal-close-btn{border:none;border-radius:100%;cursor:pointer;margin-bottom:5px;padding:7px 13px;transition:.2s}.modal-close-btn.dark-mode,.modal-close-btn.light-mode{background:#fdfdfd}.modal-close-btn.dark-mode:hover{background:#444}.modal-close-btn.light-mode:hover{background:#f6f3f3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}";
+styleInject(css_248z$g);
+
+const Modal = ({ open, onClose, title, children, width = "400px", footer, isDarkMode = false, }) => {
+    // Close with ESC key
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", handleKey);
+        return () => window.removeEventListener("keydown", handleKey);
+    }, [open]);
+    if (!open)
+        return null;
+    const stopPropagation = (e) => e.stopPropagation();
+    return (jsxRuntime.jsx("div", { className: "modal-overlay", onClick: onClose, children: jsxRuntime.jsxs("div", { className: `modal-container ${isDarkMode ? "dark-mode" : "light-mode"}`, style: { width }, onClick: stopPropagation, children: [jsxRuntime.jsxs("div", { className: "modal-header", children: [title && jsxRuntime.jsx("h2", { className: "modal-title", children: title }), jsxRuntime.jsx("button", { className: `modal-close-btn ${isDarkMode ? "dark-mode" : "light-mode"}`, onClick: onClose, children: "\u2716\uFE0F" })] }), jsxRuntime.jsx(Divider, { margin: 2 }), jsxRuntime.jsx("div", { className: "modal-body", children: children }), jsxRuntime.jsx("div", { className: "modal-footer", children: footer })] }) }));
+};
+
+var css_248z$f = ".tag{align-items:center;border:1px solid transparent;border-radius:6px;cursor:default;display:inline-flex;font-family:sans-serif;font-size:.85rem;gap:6px;padding:4px 10px;transition:.2s ease-in-out;user-select:none}.tag.none{display:none}.tag-filled{background:var(--tag-bg);border-color:var(--tag-bg);color:var(--tag-color)}.tag-outline{background:transparent;border-color:var(--tag-border)}.tag-outline,.tag-soft{color:var(--tag-border)}.tag-soft{background:rgba(0,0,0,.05);border-color:transparent}.tag-close{background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0}.tag-close:hover{opacity:.7}.tag.disabled{cursor:not-allowed;opacity:.5}.tag.disabled .tag-close{pointer-events:none}";
+styleInject(css_248z$f);
+
+const Tag = ({ label, variant = "filled", color = "#fff", background = "#007bff", borderColor = "#007bff", closable = false, disabled = false, style, }) => {
+    const [isClosed, setIsClosed] = React.useState(false);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isClosed && (jsxRuntime.jsxs("div", { className: `tag tag-${variant} ${disabled ? "disabled" : ""} ${isClosed ? "none" : ""}`, style: Object.assign({ ["--tag-color"]: color, ["--tag-bg"]: background, ["--tag-border"]: borderColor }, style), children: [jsxRuntime.jsx("span", { children: label }), closable && (jsxRuntime.jsx("button", { className: "tag-close", disabled: disabled, onClick: (e) => {
+                        e.stopPropagation();
+                        setIsClosed(true);
+                    }, children: "\u00D7" }))] })) }));
+};
+
+const tco = {
+    primary: "#007bff",
+    text: "#222",
+    textDark: "#fff",
+    borderDark: "#ddd",
+    background: "#ffffff",
+    backgroundDark: "#333",
+    backgroundDark2: "#222",
+    backgroundDark3: "#111",
+    border: "#ccc",
+};
+
+const ThemeContext = React.createContext(undefined);
+const useTheme = () => {
+    const ctx = React.useContext(ThemeContext);
+    if (!ctx)
+        throw new Error("useTheme must be used within ThemeProvider");
+    return ctx;
+};
+const ThemeProvider = ({ children, }) => {
+    const [theme, setTheme] = React.useState({
+        primary: tco.primary,
+        background: tco.background,
+        text: tco.text,
+        border: tco.border,
+        mode: "light",
+    });
+    const toggleDarkMode = () => {
+        setTheme((prev) => (Object.assign(Object.assign({}, prev), { mode: prev.mode === "light" ? "dark" : "light", background: prev.mode === "light" ? tco.backgroundDark : tco.background, text: prev.mode === "light" ? tco.textDark : tco.text })));
+    };
+    const setCustomTheme = (t) => {
+        setTheme((prev) => (Object.assign(Object.assign({}, prev), t)));
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleDarkMode, setCustomTheme }, children: jsxRuntime.jsx("div", { style: {
+                backgroundColor: theme.background,
+                color: theme.text,
+                minHeight: "100vh",
+                transition: "all 0.25s ease",
+            }, children: children }) }));
+};
+
+var css_248z$e = ".st-wrapper{font-family:sans-serif;margin-top:8px;overflow-x:auto;width:100%}.st-wrapper.bordered{border:1px solid var(--color-border,#ddd);border-radius:6px}.st-table{border-collapse:collapse;font-size:14px;width:100%}.st-table th{background:var(--color-table-header,#f4f4f4);border-bottom:2px solid var(--color-border,#ddd);color:var(--color-table-header-text,#333);font-weight:600;padding:10px 8px;text-align:left}.st-sortable{cursor:pointer;user-select:none}.st-th-content{align-items:center;display:flex;gap:6px}.st-sort-icons{display:flex;flex-direction:column;font-size:10px;line-height:10px;opacity:.4}.st-sort-icons span.active{font-weight:700;opacity:1}.st-table td{border-bottom:1px solid var(--color-border,#eee);padding:10px 8px}.st-table tr.even{background:var(--color-row-even,#fff);color:var(--color-row-even-text,#333)}.st-table tr.odd{background:var(--color-row-odd,#f9f9f9);color:var(--color-row-odd-text,#333)}.st-table tr.clickable{cursor:pointer;transition:background .2s ease}.st-table tr.clickable:hover{background:var(--color-row-hover,#eaf3ff)}.st-empty,.st-loading{color:var(--color-text-light,#777);font-style:italic;padding:20px;text-align:center!important}@media (max-width:600px){.st-table td,.st-table th{padding:8px 6px}}";
+styleInject(css_248z$e);
+
+function SmartTable({ data, columns, loading = false, clickable = false, onRowClick, striped = true, bordered = false, emptyText = "No data available", isDarkMode = false, enableSorting = false, }) {
+    const [sortKey, setSortKey] = React.useState(null);
+    const [sortDirection, setSortDirection] = React.useState(null);
+    const handleSort = (key) => {
+        if (sortKey !== key) {
+            setSortKey(key);
+            setSortDirection("asc");
+            return;
+        }
+        if (sortDirection === "asc") {
+            setSortDirection("desc");
+        }
+        else if (sortDirection === "desc") {
+            setSortKey(null);
+            setSortDirection(null);
+        }
+        else {
+            setSortDirection("asc");
+        }
+    };
+    const sortedData = React.useMemo(() => {
+        if (!enableSorting || !sortKey || !sortDirection)
+            return data;
+        return [...data].sort((a, b) => {
+            const aVal = a[sortKey];
+            const bVal = b[sortKey];
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            if (typeof aVal === "number" && typeof bVal === "number") {
+                return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+            }
+            return sortDirection === "asc"
+                ? String(aVal).localeCompare(String(bVal))
+                : String(bVal).localeCompare(String(aVal));
+        });
+    }, [data, enableSorting, sortKey, sortDirection]);
+    return (jsxRuntime.jsx("div", { className: `st-wrapper ${bordered ? "bordered" : ""}`, children: jsxRuntime.jsxs("table", { className: "st-table", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map((col) => {
+                            var _a;
+                            return (jsxRuntime.jsx("th", { className: enableSorting && col.sortable ? "st-sortable" : "", onClick: () => enableSorting && col.sortable && handleSort(col.key), style: {
+                                    width: col.width,
+                                    textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : "left",
+                                    ["--color-table-header"]: isDarkMode
+                                        ? tco.backgroundDark3
+                                        : "",
+                                    ["--color-table-header-text"]: isDarkMode
+                                        ? tco.textDark
+                                        : "",
+                                }, children: jsxRuntime.jsxs("div", { className: "st-th-content", children: [jsxRuntime.jsx("span", { children: col.label }), (enableSorting && col.sortable && col.sortable === true) ? (jsxRuntime.jsxs("span", { className: "st-sort-icons", children: [jsxRuntime.jsx("span", { className: sortKey === col.key && sortDirection === "asc"
+                                                        ? "active"
+                                                        : "", children: "\u25B2" }), jsxRuntime.jsx("span", { className: sortKey === col.key && sortDirection === "desc"
+                                                        ? "active"
+                                                        : "", children: "\u25BC" })] })) : null] }) }, String(col.key)));
+                        }) }) }), jsxRuntime.jsx("tbody", { children: loading ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length, className: "st-loading", children: "Loading..." }) })) : sortedData.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length, className: "st-empty", children: emptyText }) })) : (sortedData.map((row, index) => (jsxRuntime.jsx("tr", { style: {
+                            ["--color-row-even"]: isDarkMode
+                                ? tco.backgroundDark
+                                : "",
+                            ["--color-row-odd"]: isDarkMode
+                                ? tco.backgroundDark2
+                                : "",
+                            ["--color-row-even-text"]: isDarkMode
+                                ? tco.textDark
+                                : "",
+                            ["--color-row-odd-text"]: isDarkMode
+                                ? tco.textDark
+                                : "",
+                        }, className: `${striped ? (index % 2 === 0 ? "even" : "odd") : ""} ${clickable ? "clickable" : ""}`, onClick: () => clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row)), children: columns.map((col) => {
+                            var _a;
+                            const value = row[col.key];
+                            const renderValue = col.render
+                                ? col.render(value, row)
+                                : value;
+                            return (jsxRuntime.jsx("td", { style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : "left" }, children: renderValue }, String(col.key)));
+                        }) }, index)))) })] }) }));
+}
+
+var css_248z$d = ".pagination{align-items:center;display:flex;gap:6px;margin-top:16px}.pagination button{background:var(--pg-bg);border:1px solid var(--pg-border);border-radius:6px;color:var(--pg-text);cursor:pointer;font-size:14px;height:32px;min-width:32px;transition:all .2s ease}.pagination button:hover:not(:disabled){background:rgba(0,123,255,.1)}.pagination button.active{background:var(--pg-active);border-color:var(--pg-active);color:#fff}.pagination button:disabled{cursor:not-allowed;opacity:.5}";
+styleInject(css_248z$d);
+
+const Pagination = ({ page, pageSize, total, onPageChange, isDarkMode = false, color = tco.primary, position = "center" }) => {
+    const totalPages = Math.ceil(total / pageSize);
+    if (totalPages <= 1)
+        return null;
+    const goToPage = (p) => {
+        if (p < 1 || p > totalPages)
+            return;
+        onPageChange(p);
+    };
+    return (jsxRuntime.jsxs("div", { className: "pagination", style: {
+            ["--pg-bg"]: isDarkMode ? tco.backgroundDark2 : "#fff",
+            ["--pg-text"]: isDarkMode ? tco.textDark : "#333",
+            ["--pg-border"]: isDarkMode ? tco.borderDark : "#ddd",
+            ["--pg-active"]: color,
+            justifyContent: position === "left" ? "flex-start" : position === "center" ? "center" : "flex-end"
+        }, children: [jsxRuntime.jsx("button", { disabled: page === 1, onClick: () => goToPage(page - 1), children: "\u2039" }), Array.from({ length: totalPages }).map((_, i) => {
+                const p = i + 1;
+                return (jsxRuntime.jsx("button", { className: p === page ? "active" : "", onClick: () => goToPage(p), children: p }, p));
+            }), jsxRuntime.jsx("button", { disabled: page === totalPages, onClick: () => goToPage(page + 1), children: "\u203A" })] }));
+};
+
+var css_248z$c = ".tfb-container{align-items:\"flex-start\";background:var(--tf-bg);border:1px solid var(--tf-border);border-radius:8px;display:flex;font-family:sans-serif;justify-content:space-between;margin-bottom:12px;padding:12px}.tfb-wrapper{display:flex;flex-wrap:wrap;width:70%}.tfb-item{color:var(--tf-text);display:flex;flex-direction:column;font-size:13px;gap:4px}.tfb-item input,.tfb-item select{border:1px solid var(--tf-border);border-radius:6px;font-size:13px;padding:6px 8px}.tfb-radio-group{display:flex;gap:8px}.tfb-reset{align-self:flex-end;background:#e63946;border:none;border-radius:6px;color:#fff;cursor:pointer;padding:6px 12px}.tfp-wrapper-toggle{align-items:flex-end;display:flex;justify-content:flex-end;width:30%}.tfp-wrapper-toggle button{background:transparent;border:1px solid var(--tf-border);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px}.tfp-wrapper-toggle button:hover{opacity:.8}.tfp-wrapper-toggle-open{display:flex;justify-content:flex-end;margin-bottom:10;width:100%}.tfp-wrapper-toggle-open button{background:transparent;border:1px solid var(--tf-border);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px}";
+styleInject(css_248z$c);
+
+const TableFilterBar = ({ filters, values, onChange, onReset, resetButton, isDarkMode = false, position = "left", gap = 16, collapsible = true, }) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && (jsxRuntime.jsxs("div", { className: "tfb-container", style: {
+                    ["--tf-bg"]: isDarkMode ? tco.backgroundDark2 : "#fff",
+                    ["--tf-border"]: isDarkMode ? tco.borderDark : "#ddd",
+                    ["--tf-text"]: isDarkMode ? tco.textDark : "#333",
+                    justifyContent: position === "left"
+                        ? "flex-start"
+                        : position === "center"
+                            ? "center"
+                            : "flex-end",
+                    gap: gap,
+                }, children: [jsxRuntime.jsxs("div", { className: "tfb-wrapper", style: {
+                            justifyContent: position === "left"
+                                ? "flex-start"
+                                : position === "center"
+                                    ? "center"
+                                    : "flex-end",
+                            gap: gap,
+                        }, children: [filters.map((filter) => {
+                                var _a, _b;
+                                return (jsxRuntime.jsxs("div", { style: {
+                                        width: filter.width === "large"
+                                            ? "50%"
+                                            : filter.width === "medium"
+                                                ? "30%"
+                                                : "",
+                                    }, className: "tfb-item", children: [jsxRuntime.jsx("label", { children: filter.label }), filter.type === "text" && (jsxRuntime.jsx("input", { type: "text", placeholder: filter.placeholder, value: (_a = values[filter.key]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onChange(filter.key, e.target.value) })), filter.type === "select" && (jsxRuntime.jsxs("select", { value: (_b = values[filter.key]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onChange(filter.key, e.target.value), children: [jsxRuntime.jsx("option", { value: "", children: "All" }), filter.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })), filter.type === "checkbox" && (jsxRuntime.jsx("input", { type: "checkbox", checked: !!values[filter.key], onChange: (e) => onChange(filter.key, e.target.checked) })), filter.type === "radio" && (jsxRuntime.jsx("div", { className: "tfb-radio-group", children: filter.options.map((opt) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "radio", name: filter.key, value: opt.value, checked: values[filter.key] === opt.value, onChange: () => onChange(filter.key, opt.value) }), opt.label] }, opt.value))) }))] }, filter.key));
+                            }), resetButton ? resetButton : (jsxRuntime.jsx("button", { className: "tfb-reset", onClick: onReset, children: "Reset" }))] }), jsxRuntime.jsx("div", { className: "tfp-wrapper-toggle", children: collapsible && (jsxRuntime.jsx("button", { onClick: () => setIsOpen(false), title: "Hide filters", children: "✕" })) })] })), collapsible && !isOpen && (jsxRuntime.jsx("div", { className: "tfp-wrapper-toggle-open", children: jsxRuntime.jsx("button", { onClick: () => setIsOpen(true), title: "Show filters", children: "🔍" }) }))] }));
+};
+
+var css_248z$b = ".txt{font-family:system-ui,-apple-system,sans-serif;margin:0}.txt-title{font-size:28px;line-height:1.2}.txt-subtitle{font-size:20px;opacity:.9}.txt-body{font-size:14px}.txt-caption{font-size:12px;opacity:.7}.txt-overline{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.txt-muted{opacity:.6}.txt-error{color:#e53935}.txt-success{color:#2e7d32}.txt-regular{font-weight:400}.txt-medium{font-weight:500}.txt-bold{font-weight:700}.txt-left{text-align:left}.txt-center{text-align:center}.txt-right{text-align:right}";
+styleInject(css_248z$b);
+
+const Text = ({ as = "span", variant = "body", weight = "regular", align = "left", color, isDarkMode = false, className = "", children, }) => {
+    const Component = as;
+    return (jsxRuntime.jsx(Component, { className: `txt txt-${variant} txt-${weight} txt-${align} ${className}`, style: {
+            color: color !== null && color !== void 0 ? color : (isDarkMode
+                ? tco.textDark
+                : undefined),
+        }, children: children }));
+};
+
+var css_248z$a = ".stl-wrapper{background:var(--tl-bg);color:var(--tl-text);display:flex;flex-direction:column;font-family:sans-serif;gap:20px}.stl-wrapper.horizontal{flex-direction:row}.stl-item{display:flex;gap:12px}.stl-item.clickable{cursor:pointer}.stl-item.clickable:hover{opacity:.85}.stl-indicator{flex-direction:column}.stl-dot,.stl-indicator{align-items:center;display:flex}.stl-dot{background:#ccc;border-radius:50%;height:14px;justify-content:center;width:14px}.stl-line.vertical{background:var(--tl-line);flex:1;margin-top:4px;width:2px}.stl-line.horizontal{background:var(--tl-line);height:2px;margin-left:4px;width:40px}.stl-content{padding-bottom:16px}.stl-date{font-size:12px;opacity:.6}.stl-title{font-size:15px;margin:4px 0}.stl-desc{font-size:13px;opacity:.85}.status-default{background:#9e9e9e}.status-success{background:#4caf50}.status-warning{background:#ff9800}.status-error{background:#f44336}.status-info{background:#2196f3}";
+styleInject(css_248z$a);
+
+const SmartTimeline = ({ items, orientation = "vertical", showLine = true, clickable = false, isDarkMode = false, onItemClick, }) => {
+    return (jsxRuntime.jsx("div", { className: `stl-wrapper ${orientation}`, style: {
+            ["--tl-bg"]: isDarkMode ? tco.backgroundDark2 : "#fff",
+            ["--tl-text"]: isDarkMode ? tco.textDark : "#333",
+            ["--tl-line"]: isDarkMode ? tco.borderDark : "#ddd",
+        }, children: items.map((item, index) => (jsxRuntime.jsx(TimelineRow, { item: item, index: index, last: index === items.length - 1, orientation: orientation, showLine: showLine, clickable: clickable, onClick: onItemClick, isDarkMode: isDarkMode }, item.id))) }));
+};
+const TimelineRow = ({ item, last, orientation, showLine, clickable, onClick, isDarkMode, }) => {
+    var _a;
+    return (jsxRuntime.jsxs("div", { className: `stl-item ${clickable ? "clickable" : ""}`, onClick: () => clickable && (onClick === null || onClick === void 0 ? void 0 : onClick(item)), children: [jsxRuntime.jsxs("div", { className: "stl-indicator", children: [jsxRuntime.jsx("div", { className: `stl-dot status-${(_a = item.status) !== null && _a !== void 0 ? _a : "default"}`, children: item.icon }), showLine && !last && (jsxRuntime.jsx("span", { className: `stl-line ${orientation}` }))] }), jsxRuntime.jsxs("div", { className: "stl-content", children: [item.date && jsxRuntime.jsx("span", { className: "stl-date", children: item.date }), jsxRuntime.jsx("h4", { className: "stl-title", children: item.title }), item.description && (jsxRuntime.jsx("p", { className: "stl-desc", children: item.description })), item.content && (jsxRuntime.jsx("div", { className: "stl-custom", children: item.content }))] })] }));
+};
+
+var css_248z$9 = ".sc-wrapper{background:var(--sc-bg);border-radius:12px;overflow:hidden;position:relative;width:100%}.sc-track{display:flex;height:100%;transition:transform .4s ease-in-out}.sc-image{flex-shrink:0;height:100%;object-fit:cover;width:100%}.sc-arrow{align-items:center;background:rgba(0,0,0,.5);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:22px;height:36px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:36px;z-index:2}.sc-arrow.left{left:12px}.sc-arrow.right{right:12px}.sc-arrow:hover{background:rgba(0,0,0,.8)}.sc-dots{bottom:12px;display:flex;gap:8px;justify-content:center;position:absolute;width:100%}.sc-dot{background:var(--sc-dot);border-radius:50%;cursor:pointer;height:10px;opacity:.5;width:10px}.sc-dot.active{background:var(--sc-dot-active);opacity:1}@media (max-width:768px){.sc-arrow{font-size:18px;height:30px;width:30px}}";
+styleInject(css_248z$9);
+
+const SmartCarousel = ({ images, autoPlay = false, interval = 5000, showArrows = true, showDots = true, isDarkMode = false, height = 320, activeDotColor = tco.primary, }) => {
+    const [index, setIndex] = React.useState(0);
+    const next = () => setIndex((prev) => (prev + 1) % images.length);
+    const prev = () => setIndex((prev) => (prev - 1 + images.length) % images.length);
+    React.useEffect(() => {
+        if (!autoPlay)
+            return;
+        const timer = setInterval(next, interval);
+        return () => clearInterval(timer);
+    }, [autoPlay, interval]);
+    if (!images.length)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: "sc-wrapper", style: {
+            height,
+            ["--sc-bg"]: isDarkMode ? tco.backgroundDark2 : "#000",
+            ["--sc-dot"]: isDarkMode ? tco.textDark : "#fff",
+            ["--sc-dot-active"]: activeDotColor,
+        }, children: [jsxRuntime.jsx("div", { className: "sc-track", style: { transform: `translateX(-${index * 100}%)` }, children: images.map((img, i) => {
+                    var _a;
+                    return (jsxRuntime.jsx("img", { src: img.src, alt: (_a = img.alt) !== null && _a !== void 0 ? _a : `slide-${i}`, className: "sc-image" }, i));
+                }) }), showArrows && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "sc-arrow left", onClick: prev, "aria-label": "Previous", children: jsxRuntime.jsx("span", { children: " \u2039" }) }), jsxRuntime.jsx("button", { className: "sc-arrow right", onClick: next, "aria-label": "Next", children: jsxRuntime.jsx("span", { children: " \u203A" }) })] })), showDots && (jsxRuntime.jsx("div", { className: "sc-dots", children: images.map((_, i) => (jsxRuntime.jsx("span", { className: `sc-dot ${i === index ? "active" : ""}`, onClick: () => setIndex(i) }, i))) }))] }));
+};
+
+var css_248z$8 = ".navbar{background:#fff;border-bottom:1px solid #eee;font-family:sans-serif;width:100%;z-index:1000}.navbar.dark{background:#0f172a;border-color:#1e293b;color:#fff}.navbar.sticky{position:sticky;top:0}.navbar-container{align-items:center;display:flex;height:100%;justify-content:space-between;margin:auto;max-width:1280px;padding:0 16px}.navbar-logo{font-size:18px;font-weight:700}.navbar-links{display:flex;gap:20px;list-style:none}.navbar-links.center{left:50%;position:absolute;transform:translateX(-50%)}.navbar-links.left{margin-right:auto}.navbar-links.right{margin-left:auto;margin-right:24px}.navbar-link{cursor:pointer;font-weight:500}.navbar-link a{color:inherit;text-decoration:none}.navbar-link.active{color:#2563eb}.navbar-actions{align-items:center;display:flex;gap:10px}.navbar-burger{cursor:pointer;display:none;flex-direction:column;gap:4px}.navbar-burger span{background:currentColor;height:2px;width:22px}@media (max-width:768px){.navbar-links{background:inherit;display:none;flex-direction:column;left:0;padding:12px;position:absolute;right:0;top:100%}.navbar-burger,.navbar-links.open{display:flex}.navbar-links.center,.navbar-links.left,.navbar-links.right{margin:0;position:static;transform:none}}";
+styleInject(css_248z$8);
+
+const Navbar = ({ logo, links = [], actions = [], position = "left", sticky = true, isDarkMode = false, height = 64 }) => {
+    const [open, setOpen] = React.useState(false);
+    return (jsxRuntime.jsx("nav", { className: `navbar ${isDarkMode ? "dark" : ""} ${sticky ? "sticky" : ""}`, style: { height }, children: jsxRuntime.jsxs("div", { className: "navbar-container", children: [jsxRuntime.jsx("div", { className: "navbar-logo", children: logo }), jsxRuntime.jsx("ul", { className: `navbar-links ${position} ${open ? "open" : ""}`, children: links.map((link, i) => (jsxRuntime.jsx("li", { className: `navbar-link ${link.active ? "active" : ""}`, onClick: () => {
+                            var _a;
+                            (_a = link.onClick) === null || _a === void 0 ? void 0 : _a.call(link);
+                            setOpen(false);
+                        }, children: link.href ? jsxRuntime.jsx("a", { href: link.href, children: link.label }) : link.label }, i))) }), jsxRuntime.jsxs("div", { className: "navbar-actions", children: [actions.map((action, i) => {
+                            var _a;
+                            return (action.element ? action.element : jsxRuntime.jsx(Button, { label: (_a = action.label) !== null && _a !== void 0 ? _a : "", icon: action.icon, variant: "primary", size: "small", onClick: action.onClick }, i));
+                        }), jsxRuntime.jsxs("div", { className: "navbar-burger", onClick: () => setOpen(!open), children: [jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {})] })] })] }) }));
+};
+
+var css_248z$7 = ".sidebar{background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;font-family:sans-serif;height:100%!important;transition:width .25s ease}.sidebar.dark{background:#0f172a;border-color:#2a2a2a;color:#fff}.sidebar.sticky{position:sticky;top:0}.sidebar-header{align-items:center;display:flex;justify-content:space-between;padding:12px}.sidebar-toggle{background:none;border:none;cursor:pointer;font-size:18px}.sidebar-items{flex:1;list-style:none;margin:0;padding:0}.sidebar-item{align-items:center;cursor:pointer;display:flex;gap:12px;padding:10px 14px;transition:background .2s}.sidebar-item:hover{background:rgba(0,0,0,.05)}.sidebar.dark .sidebar-item:hover{background:hsla(0,0%,100%,.08)}.sidebar-item.active{background:rgba(0,0,0,.08);font-weight:600}.sidebar-icon{font-size:18px}.sidebar-actions{display:flex;flex-direction:column;gap:8px;padding:12px}";
+styleInject(css_248z$7);
+
+const Sidebar = ({ logo, items = [], collapsed: controlledCollapsed, onToggle, width = 200, collapsedWidth = 50, isDarkMode = false, sticky = true, style = {} }) => {
+    const [internalCollapsed, setInternalCollapsed] = React.useState(false);
+    const collapsed = controlledCollapsed !== null && controlledCollapsed !== void 0 ? controlledCollapsed : internalCollapsed;
+    const toggle = () => {
+        const next = !collapsed;
+        setInternalCollapsed(next);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(next);
+    };
+    return (jsxRuntime.jsxs("aside", { className: `sidebar ${isDarkMode ? "dark" : ""} ${collapsed ? "collapsed" : ""} ${sticky ? "sticky" : ""}`, style: Object.assign(Object.assign({}, style), { width: collapsed ? collapsedWidth : width }), children: [jsxRuntime.jsxs("div", { className: "sidebar-header", children: [jsxRuntime.jsx("div", { className: "sidebar-logo", children: logo }), jsxRuntime.jsx("button", { className: "sidebar-toggle", onClick: toggle, children: "\u2630" })] }), jsxRuntime.jsx("ul", { className: "sidebar-items", children: items.map((item, i) => (jsxRuntime.jsxs("li", { className: `sidebar-item ${item.active ? "active" : ""}`, onClick: item.onClick, children: [item.icon && jsxRuntime.jsx("span", { className: "sidebar-icon", children: item.icon }), !collapsed && jsxRuntime.jsx("span", { className: "sidebar-label", children: item.label })] }, i))) })] }));
+};
+
+var css_248z$6 = ".footer{background:#fff;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;font-family:sans-serif;width:100%}.footer.dark{background:#0f172a;border-color:#2a2a2a}.footer.fixed{bottom:0;left:0;position:fixed;z-index:999}.footer-container{align-items:center;display:flex;height:100%;justify-content:space-between;padding:0 16px}.footer-center,.footer-left,.footer-right{align-items:center;display:flex;gap:12px}.footer-sections{display:flex;font-size:13px;gap:40px;padding:12px 16px}.footer-section{display:flex;flex-direction:column;gap:6px}.footer-title{font-weight:600;opacity:.8}.footer-link{cursor:pointer;opacity:.7}.footer-link:hover{opacity:1;text-decoration:underline}@media (max-width:768px){.footer-container{flex-direction:column;gap:8px;padding:8px}.footer-sections{flex-direction:column;gap:16px}}";
+styleInject(css_248z$6);
+
+const Footer = ({ left, center, right, sections = [], isDarkMode = false, height = 56, fixed = false }) => {
+    return (jsxRuntime.jsxs("footer", { className: `footer ${isDarkMode ? "dark" : ""} ${fixed ? "fixed" : ""}`, style: { height }, children: [jsxRuntime.jsxs("div", { className: "footer-container", children: [jsxRuntime.jsx("div", { className: "footer-left", children: left }), jsxRuntime.jsx("div", { className: "footer-center", children: center }), jsxRuntime.jsx("div", { className: "footer-right", children: right })] }), sections.length > 0 && (jsxRuntime.jsx("div", { className: "footer-sections", children: sections.map((section, i) => {
+                    var _a;
+                    return (jsxRuntime.jsxs("div", { className: "footer-section", children: [section.title && (jsxRuntime.jsx("span", { className: "footer-title", children: section.title })), (_a = section.links) === null || _a === void 0 ? void 0 : _a.map((link, j) => (jsxRuntime.jsx("span", { className: "footer-link", onClick: link.onClick, children: link.href ? (jsxRuntime.jsx("a", { href: link.href, children: link.label })) : (link.label) }, j)))] }, i));
+                }) }))] }));
+};
+
+var css_248z$5 = "*{box-sizing:border-box}body,html{height:100%;margin:0;padding:0}.layout{display:flex;flex-direction:column;font-family:sans-serif;min-height:70vh}.layout.dark{background:#0f172a;color:#fff}.layout-main{display:flex;flex:1;overflow:hidden}.layout-content{flex:1;overflow-y:auto;padding:16px}";
+styleInject(css_248z$5);
+
+const Layout = ({ header, sidebar, footer, children, withSidebar = true, withHeader = true, withFooter = true, sidebarWidth = 260, isDarkMode = false }) => {
+    return (jsxRuntime.jsxs("div", { className: `layout ${isDarkMode ? "dark" : ""}`, children: [withHeader && header, jsxRuntime.jsxs("div", { className: "layout-main", children: [withSidebar && sidebar && (jsxRuntime.jsx("aside", { className: "layout-sidebar", style: { width: sidebarWidth }, children: sidebar })), jsxRuntime.jsx("main", { className: "layout-content", children: children })] }), withFooter && footer] }));
+};
+
+var css_248z$4 = ".dd-wrapper{display:flex;font-family:sans-serif}.dd-wrapper.vertical{flex-direction:column}.dd-wrapper.horizontal{flex-direction:row;overflow-x:auto}.dd-item{cursor:grab;transition:transform .2s ease,opacity .2s ease;user-select:none}.dd-item.dragging{opacity:.5;transform:scale(.98)}.dd-wrapper.dark .dd-item{background:#0f172a;color:#fff}";
+styleInject(css_248z$4);
+
+function DragDrop({ items, onChange, renderItem, direction = "vertical", gap = 12, draggable = true, isDarkMode = false, }) {
+    const [draggedId, setDraggedId] = React.useState(null);
+    const handleDragStart = (id) => {
+        setDraggedId(id);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleDrop = (targetId) => {
+        if (!draggedId || draggedId === targetId)
+            return;
+        const newItems = [...items];
+        const fromIndex = newItems.findIndex(i => i.id === draggedId);
+        const toIndex = newItems.findIndex(i => i.id === targetId);
+        const [moved] = newItems.splice(fromIndex, 1);
+        newItems.splice(toIndex, 0, moved);
+        onChange(newItems);
+        setDraggedId(null);
+    };
+    return (jsxRuntime.jsx("div", { className: `dd-wrapper ${direction} ${isDarkMode ? "dark" : ""}`, style: { gap }, children: items.map(item => (jsxRuntime.jsx("div", { className: `dd-item ${draggedId === item.id ? "dragging" : ""}`, draggable: draggable, onDragStart: () => handleDragStart(item.id), onDragOver: handleDragOver, onDrop: () => handleDrop(item.id), children: renderItem(item.data) }, item.id))) }));
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var css_248z$3 = ".secure-text{align-items:center;background:#fff;border:1px solid #ddd;border-radius:8px;color:#333;display:flex;font-family:monospace;gap:12px;justify-content:space-between;padding:8px 12px}.secure-text.dark{background:#0f172a;border-color:#1e293b;color:#e5e7eb}.secure-text-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.secure-text-actions{display:flex;gap:6px}.secure-text-actions button{background:transparent;border:none;cursor:pointer;font-size:16px;padding:4px}.secure-text-actions button:hover{opacity:.7}";
+styleInject(css_248z$3);
+
+const SecureText = ({ value, masked = true, copyable = true, maskChar = "•", revealLabel = "Show", copyLabel = "Copy", onCopy, isDarkMode = false, width = "100%", }) => {
+    const [visible, setVisible] = React.useState(!masked);
+    const [copied, setCopied] = React.useState(false);
+    const displayValue = visible
+        ? value
+        : maskChar.repeat(value.length);
+    const handleCopy = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield navigator.clipboard.writeText(value);
+        setCopied(true);
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+        setTimeout(() => setCopied(false), 1500);
+    });
+    return (jsxRuntime.jsxs("div", { className: `secure-text ${isDarkMode ? "dark" : ""}`, style: { width }, children: [jsxRuntime.jsx("span", { className: "secure-text-value", children: displayValue }), jsxRuntime.jsxs("div", { className: "secure-text-actions", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => setVisible(!visible), title: visible ? "Hide" : revealLabel, children: visible ? "🙈" : "👀" }), copyable && (jsxRuntime.jsx("button", { type: "button", onClick: handleCopy, title: copyLabel, children: copied ? "✅" : "📋" }))] })] }));
+};
+
+var css_248z$2 = ":root{--loading-color:#2563eb}.loading-wrapper{align-items:center;display:flex;flex-direction:column;font-family:sans-serif;gap:12px;justify-content:center}.loading-wrapper.fullscreen{inset:0;position:fixed;z-index:9999}.loading-wrapper.overlay{background:hsla(0,0%,100%,.7)}.loading-wrapper.dark.overlay{background:#0f172a}.loading.spinner{align-items:center;display:flex;justify-content:center}.loading.spinner .spinner{animation:spin 1s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top:4px solid var(--loading-color)}.loading.dots{display:flex;gap:6px}.loading.dots span{animation:bounce 1.4s ease-in-out infinite both;background:var(--loading-color);border-radius:50%;height:8px;width:8px}.loading.dots span:first-child{animation-delay:-.32s}.loading.dots span:nth-child(2){animation-delay:-.16s}.bar-container{background:#e5e7eb;border-radius:4px;height:4px;overflow:hidden;width:200px}.bar-progress{animation:barMove 1.2s ease-in-out infinite;background:var(--loading-color);height:100%;width:40%}.loading.xs .spinner{height:16px;width:16px}.loading.sm .spinner{height:24px;width:24px}.loading.md .spinner{height:40px;width:40px}.loading.lg .spinner{height:56px;width:56px}.loading-text{color:#6b7280;font-size:14px}.loading-wrapper.dark .loading-text{color:#cbd5f5}@keyframes spin{to{transform:rotate(1turn)}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes barMove{0%{transform:translateX(-100%)}to{transform:translateX(250%)}}";
+styleInject(css_248z$2);
+
+const Loading = ({ variant = "spinner", size = "md", text, fullscreen = false, overlay = false, color, isDarkMode = false, }) => {
+    return (jsxRuntime.jsxs("div", { className: `loading-wrapper 
+        ${fullscreen ? "fullscreen" : ""} 
+        ${overlay ? "overlay" : ""} 
+        ${isDarkMode ? "dark" : ""}`, children: [jsxRuntime.jsxs("div", { className: `loading ${variant} ${size}`, style: { ["--loading-color"]: color }, children: [variant === "spinner" && jsxRuntime.jsx("span", { className: "spinner" }), variant === "dots" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {})] })), variant === "bar" && (jsxRuntime.jsx("div", { className: "bar-container", children: jsxRuntime.jsx("div", { className: "bar-progress" }) }))] }), text && jsxRuntime.jsx("p", { className: "loading-text", children: text })] }));
+};
+
+var css_248z$1 = ".avatar{align-items:center;background:#e5e7eb;color:#111827;display:inline-flex;font-weight:600;justify-content:center;overflow:hidden;position:relative;user-select:none}.avatar.circle{border-radius:50%}.avatar.rounded{border-radius:12px}.avatar.square{border-radius:4px}.avatar.xs{font-size:10px;height:24px;width:24px}.avatar.sm{font-size:12px;height:32px;width:32px}.avatar.md{font-size:14px;height:40px;width:40px}.avatar.lg{font-size:18px;height:56px;width:56px}.avatar.xl{font-size:22px;height:72px;width:72px}.avatar img{height:100%;object-fit:cover;width:100%}.avatar-initials{text-transform:uppercase}.avatar-status{border:2px solid #fff;border-radius:50%;bottom:2px;height:10px;position:absolute;right:2px;width:10px}.avatar-status.online{background:#22c55e}.avatar-status.offline{background:#9ca3af}.avatar-status.away{background:#f59e0b}.avatar.clickable{cursor:pointer;transition:transform .2s ease}.avatar.clickable:hover{transform:scale(1.05)}.avatar.dark{background:#1f2937;color:#f9fafb}";
+styleInject(css_248z$1);
+
+const Avatar = ({ src, alt = "avatar", name, size = "md", shape = "circle", status, backgroundColor, color, onClick, isDarkMode = false, }) => {
+    const getInitials = () => {
+        if (!name)
+            return "?";
+        const parts = name.trim().split(" ");
+        return parts.length === 1
+            ? parts[0][0]
+            : `${parts[0][0]}${parts[1][0]}`;
+    };
+    return (jsxRuntime.jsxs("div", { className: `
+        avatar 
+        ${size} 
+        ${shape} 
+        ${onClick ? "clickable" : ""} 
+        ${isDarkMode ? "dark" : ""}
+      `, style: {
+            backgroundColor,
+            color,
+        }, onClick: onClick, children: [src ? (jsxRuntime.jsx("img", { src: src, alt: alt })) : (jsxRuntime.jsx("span", { className: "avatar-initials", children: getInitials() })), status && jsxRuntime.jsx("span", { className: `avatar-status ${status}` })] }));
+};
+
+var css_248z = ".profile-menu-wrapper{position:relative}.profile-menu{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.1);font-family:sans-serif;position:absolute;right:0;top:110%;width:260px;z-index:1000}.profile-menu.dark{background:#0f172a;border-color:#1e293b;color:#f9fafb}.profile-header{border-bottom:1px solid #e5e7eb;display:flex;gap:12px;padding:14px}.profile-menu.dark .profile-header{border-color:#1e293b}.profile-name{font-weight:600}.profile-email{font-size:12px;opacity:.7}.profile-actions{list-style:none;margin:0;padding:6px 0}.profile-actions .action{align-items:center;cursor:pointer;display:flex;gap:10px;padding:10px 14px}.profile-actions .action:hover{background:#f3f4f6}.profile-menu.dark .action:hover{background:#1e293b}.profile-actions .action.danger{color:#ef4444}.profile-actions .divider{background:#e5e7eb;height:1px;margin:6px 0}.profile-menu.dark .divider{background:#1e293b}";
+styleInject(css_248z);
+
+const ProfileMenu = ({ user, actions, isDarkMode = false, }) => {
+    const [open, setOpen] = React.useState(false);
+    const ref = React.useRef(null);
+    // Close on outside click
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "profile-menu-wrapper", ref: ref, children: [jsxRuntime.jsx(Avatar, { src: user.avatar, name: user.name, size: "sm", onClick: () => setOpen(!open), isDarkMode: isDarkMode }), open && (jsxRuntime.jsxs("div", { className: `profile-menu ${isDarkMode ? "dark" : ""}`, children: [jsxRuntime.jsxs("div", { className: "profile-header", children: [jsxRuntime.jsx(Avatar, { src: user.avatar, name: user.name, size: "md", isDarkMode: isDarkMode }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "profile-name", children: user.name }), user.email && (jsxRuntime.jsx("div", { className: "profile-email", children: user.email }))] })] }), jsxRuntime.jsx("ul", { className: "profile-actions", children: actions.map((action, i) => action.divider ? (jsxRuntime.jsx("li", { className: "divider" }, i)) : (jsxRuntime.jsxs("li", { className: `action ${action.danger ? "danger" : ""}`, onClick: () => {
+                                var _a;
+                                (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+                                setOpen(false);
+                            }, children: [action.icon && jsxRuntime.jsx("span", { className: "icon", children: action.icon }), action.label] }, i))) })] }))] }));
 };
 
+exports.Avatar = Avatar;
 exports.Bloc = Bloc;
 exports.Button = Button;
 exports.Card = Card;
@@ -203,12 +674,30 @@ exports.Checkbox = Checkbox;
 exports.Column = Column;
 exports.Container = Container;
 exports.Divider = Divider;
+exports.DragDrop = DragDrop;
+exports.Footer = Footer;
 exports.Grid = Grid;
+exports.Layout = Layout;
+exports.Loading = Loading;
+exports.Modal = Modal;
+exports.Navbar = Navbar;
+exports.Pagination = Pagination;
+exports.ProfileMenu = ProfileMenu;
 exports.Radio = Radio;
 exports.Row = Row;
+exports.SecureText = SecureText;
 exports.Select = Select;
+exports.Sidebar = Sidebar;
+exports.SmartCarousel = SmartCarousel;
+exports.SmartTable = SmartTable;
+exports.SmartTimeline = SmartTimeline;
 exports.Spacer = Spacer;
+exports.TableFilterBar = TableFilterBar;
+exports.Tag = Tag;
+exports.Text = Text;
 exports.TextField = TextField;
+exports.ThemeProvider = ThemeProvider;
 exports.ToastProvider = ToastProvider;
+exports.useTheme = useTheme;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map