@houssemdi2000/design-system 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CardSheet/index.d.ts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.esm.js +83 -64
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +83 -63
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CardSheet';
|
package/dist/index.esm.js
CHANGED
|
@@ -28,29 +28,29 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z$
|
|
32
|
-
styleInject(css_248z$
|
|
31
|
+
var css_248z$w = ".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}";
|
|
32
|
+
styleInject(css_248z$w);
|
|
33
33
|
|
|
34
34
|
const Button = ({ label, onClick, type = "button", variant = "primary", size = "medium", disabled = false, icon, iconPosition = "left", backgroundColor, color, isLoading = false, mt, mb, mr, ml, style = {} }) => {
|
|
35
35
|
return (jsx(Fragment, { children: 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" && jsx("span", { className: "btn-left-icon", children: icon }), label, icon && iconPosition === "right" && jsx("span", { className: "btn-right-icon", children: icon }), isLoading && jsx("span", { className: "btn-spinner" })] }) }));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
|
-
var css_248z$
|
|
39
|
-
styleInject(css_248z$
|
|
38
|
+
var css_248z$v = ".center{align-items:center;display:flex;justify-content:center}";
|
|
39
|
+
styleInject(css_248z$v);
|
|
40
40
|
|
|
41
41
|
const Center = ({ children, backgroundColor = 'white', color = 'black' }) => {
|
|
42
42
|
return jsx("div", { className: "center", style: { backgroundColor, color }, children: children });
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
var css_248z$
|
|
46
|
-
styleInject(css_248z$
|
|
45
|
+
var css_248z$u = ".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}";
|
|
46
|
+
styleInject(css_248z$u);
|
|
47
47
|
|
|
48
48
|
const Card = ({ title, children, footer, backgroundColor, color, variant = "elevated", padding = "md", }) => {
|
|
49
49
|
return (jsxs("div", { className: `card card-${variant} card-padding-${padding}`, style: { backgroundColor, color }, children: [title && jsx("div", { className: "card-header", children: title }), jsx("div", { className: "card-body", children: children }), footer && jsx("div", { className: "card-footer", children: footer })] }));
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
var css_248z$
|
|
53
|
-
styleInject(css_248z$
|
|
52
|
+
var css_248z$t = ".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}}";
|
|
53
|
+
styleInject(css_248z$t);
|
|
54
54
|
|
|
55
55
|
const Bloc = ({ children, className = "", style = {}, layout = "default", }) => {
|
|
56
56
|
const layoutStyles = (() => {
|
|
@@ -74,22 +74,22 @@ const Bloc = ({ children, className = "", style = {}, layout = "default", }) =>
|
|
|
74
74
|
return (jsx("div", { className: `bloc ${className}`, style: Object.assign(Object.assign({}, layoutStyles), style), children: children }));
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
var css_248z$
|
|
78
|
-
styleInject(css_248z$
|
|
77
|
+
var css_248z$s = ".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%}";
|
|
78
|
+
styleInject(css_248z$s);
|
|
79
79
|
|
|
80
80
|
const Container = ({ children, className = "", style = {}, fluid = false }) => {
|
|
81
81
|
return (jsx("div", { className: `container ${fluid ? "container-fluid" : ""} ${className}`, style: style, children: children }));
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
-
var css_248z$
|
|
85
|
-
styleInject(css_248z$
|
|
84
|
+
var css_248z$r = ".row{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:16px}@media (max-width:768px){.row{flex-direction:column}}";
|
|
85
|
+
styleInject(css_248z$r);
|
|
86
86
|
|
|
87
87
|
const Row = ({ children, className = "", style = {} }) => {
|
|
88
88
|
return jsx("div", { className: `row ${className}`, style: Object.assign({}, style), children: children });
|
|
89
89
|
};
|
|
90
90
|
|
|
91
|
-
var css_248z$
|
|
92
|
-
styleInject(css_248z$
|
|
91
|
+
var css_248z$q = ".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%}}";
|
|
92
|
+
styleInject(css_248z$q);
|
|
93
93
|
|
|
94
94
|
const Column = ({ children, className = "", style = {} }) => {
|
|
95
95
|
return (jsx("div", { className: `col ${className}`, style: Object.assign({}, style), children: children }));
|
|
@@ -123,8 +123,8 @@ const Divider = ({ color = "#e0e0e0", thickness = 1, orientation = "horizontal",
|
|
|
123
123
|
return jsx("div", { style: styles });
|
|
124
124
|
};
|
|
125
125
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
126
|
+
var css_248z$p = ".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}";
|
|
127
|
+
styleInject(css_248z$p);
|
|
128
128
|
|
|
129
129
|
const Checkbox = ({ label, checked, onChange, disabled = false, error = false, boxColor = "#777", checkColor = "#fff", checkedBackground = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
|
|
130
130
|
return (jsxs("label", { className: `checkbox-container ${disabled ? "disabled" : ""}`, style: {
|
|
@@ -135,23 +135,23 @@ const Checkbox = ({ label, checked, onChange, disabled = false, error = false, b
|
|
|
135
135
|
}, children: [jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked) }), jsx("span", { className: `checkbox-box ${error ? "error" : ""}` }), label && jsx("span", { className: "checkbox-label", children: label })] }));
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
var css_248z$
|
|
139
|
-
styleInject(css_248z$
|
|
138
|
+
var css_248z$o = ".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}";
|
|
139
|
+
styleInject(css_248z$o);
|
|
140
140
|
|
|
141
141
|
const TextField = ({ label, value = "", placeholder, onChange, error, disabled = false, type = "text", fullWidth = true, icon, }) => {
|
|
142
142
|
return (jsxs("div", { className: `textfield ${fullWidth ? "fullWidth" : ""}`, children: [label && jsx("label", { className: "textfield-label", children: label }), jsx("input", { type: type, className: `textfield-input ${error ? "error" : ""}`, value: value, placeholder: placeholder, disabled: disabled, onChange: (e) => onChange && onChange(e.target.value) }), icon && jsx("div", { className: "textfield-icon", children: icon }), error && jsx("p", { className: "textfield-error", children: error })] }));
|
|
143
143
|
};
|
|
144
144
|
|
|
145
|
-
var css_248z$
|
|
146
|
-
styleInject(css_248z$
|
|
145
|
+
var css_248z$n = ".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}";
|
|
146
|
+
styleInject(css_248z$n);
|
|
147
147
|
|
|
148
148
|
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, }) => {
|
|
149
149
|
const checked = selectedValue === value;
|
|
150
150
|
return (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: [jsx("input", { type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: () => onChange(value) }), jsx("span", { className: `radio-circle ${error ? "error" : ""}` }), label && jsx("span", { className: "radio-label", children: label })] }));
|
|
151
151
|
};
|
|
152
152
|
|
|
153
|
-
var css_248z$
|
|
154
|
-
styleInject(css_248z$
|
|
153
|
+
var css_248z$m = ".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)}}";
|
|
154
|
+
styleInject(css_248z$m);
|
|
155
155
|
|
|
156
156
|
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, }) => {
|
|
157
157
|
const [open, setOpen] = useState(false);
|
|
@@ -183,8 +183,8 @@ const Select = ({ label, goal = "SELECT ...", value, onChange, options, disabled
|
|
|
183
183
|
}, children: opt.label }, opt.value))) }))] })] }));
|
|
184
184
|
};
|
|
185
185
|
|
|
186
|
-
var css_248z$
|
|
187
|
-
styleInject(css_248z$
|
|
186
|
+
var css_248z$l = ".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}}";
|
|
187
|
+
styleInject(css_248z$l);
|
|
188
188
|
|
|
189
189
|
const ToastContext = createContext(undefined);
|
|
190
190
|
const useToast = () => {
|
|
@@ -221,8 +221,8 @@ const ToastProvider = ({ children, }) => {
|
|
|
221
221
|
}) })] }));
|
|
222
222
|
};
|
|
223
223
|
|
|
224
|
-
var css_248z$
|
|
225
|
-
styleInject(css_248z$
|
|
224
|
+
var css_248z$k = ".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)}}";
|
|
225
|
+
styleInject(css_248z$k);
|
|
226
226
|
|
|
227
227
|
const Modal = ({ open, onClose, title, children, width = "400px", footer, isDarkMode = false, }) => {
|
|
228
228
|
// Close with ESC key
|
|
@@ -242,8 +242,8 @@ const Modal = ({ open, onClose, title, children, width = "400px", footer, isDark
|
|
|
242
242
|
return (jsx("div", { className: "modal-overlay", onClick: onClose, children: jsxs("div", { className: `modal-container ${isDarkMode ? "dark-mode" : "light-mode"}`, style: { width }, onClick: stopPropagation, children: [jsxs("div", { className: "modal-header", children: [title && jsx("h2", { className: "modal-title", children: title }), jsx("button", { className: `modal-close-btn ${isDarkMode ? "dark-mode" : "light-mode"}`, onClick: onClose, children: "\u2716\uFE0F" })] }), jsx(Divider, { margin: 2 }), jsx("div", { className: "modal-body", children: children }), jsx("div", { className: "modal-footer", children: footer })] }) }));
|
|
243
243
|
};
|
|
244
244
|
|
|
245
|
-
var css_248z$
|
|
246
|
-
styleInject(css_248z$
|
|
245
|
+
var css_248z$j = ".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}";
|
|
246
|
+
styleInject(css_248z$j);
|
|
247
247
|
|
|
248
248
|
const Tag = ({ label, variant = "filled", color = "#fff", background = "#007bff", borderColor = "#007bff", closable = false, disabled = false, style, }) => {
|
|
249
249
|
const [isClosed, setIsClosed] = React.useState(false);
|
|
@@ -420,8 +420,8 @@ const ThemeProvider = ({ children, }) => {
|
|
|
420
420
|
}, children: children }) }));
|
|
421
421
|
};
|
|
422
422
|
|
|
423
|
-
var css_248z$
|
|
424
|
-
styleInject(css_248z$
|
|
423
|
+
var css_248z$i = ".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,.st-table tr.clickable.dark{cursor:pointer;transition:background .2s ease}.st-table tr.clickable:hover{background:var(--color-row-hover,#eaf3ff);color:var(--color-row-hover-text,#333)}.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}}";
|
|
424
|
+
styleInject(css_248z$i);
|
|
425
425
|
|
|
426
426
|
function SmartTable({ data, columns, loading = false, clickable = false, onRowClick, striped = true, bordered = false, emptyText = "No data available", isDarkMode = false, enableSorting = false, withCheckBox = false, checkBoxColor, withActions = false, actions, rowKey, selectedRowColor = isDarkMode ? tco.background : tco.backgroundDark, }) {
|
|
427
427
|
/* ---------------- sorting ---------------- */
|
|
@@ -560,8 +560,8 @@ function SmartTable({ data, columns, loading = false, clickable = false, onRowCl
|
|
|
560
560
|
}) }, getRowKey(row, index))))) })] }) }));
|
|
561
561
|
}
|
|
562
562
|
|
|
563
|
-
var css_248z$
|
|
564
|
-
styleInject(css_248z$
|
|
563
|
+
var css_248z$h = ".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}";
|
|
564
|
+
styleInject(css_248z$h);
|
|
565
565
|
|
|
566
566
|
const Pagination = ({ page, pageSize, total, onPageChange, isDarkMode = false, color = tco.primary, position = "center" }) => {
|
|
567
567
|
const totalPages = Math.ceil(total / pageSize);
|
|
@@ -584,8 +584,8 @@ const Pagination = ({ page, pageSize, total, onPageChange, isDarkMode = false, c
|
|
|
584
584
|
}), jsx("button", { disabled: page === totalPages, onClick: () => goToPage(page + 1), children: "\u203A" })] }));
|
|
585
585
|
};
|
|
586
586
|
|
|
587
|
-
var css_248z$
|
|
588
|
-
styleInject(css_248z$
|
|
587
|
+
var css_248z$g = "*{box-sizing:border-box}.tfb-container{align-items:flex-start;background:var(--tf-bg);border-radius:8px;display:flex;font-family:sans-serif;justify-content:space-between;margin-bottom:12px;padding:12px;position:relative}.tfb-wrapper{display:flex;flex-wrap:wrap;gap:16px;padding-right:80px;width:70%}.tfb-item{color:var(--tf-text);display:flex;flex-direction:column;font-size:13px;gap:4px}.tfb-item input,.tfb-item select{background:transparent;border:1px solid var(--tf-border);border-radius:6px;color:var(--tf-text);font-size:13px;padding:6px 8px}.tfb-item input:focus,.tfb-item select:focus{border-color:#4f46e5;outline:none}.tfb-item input[type=checkbox]{appearance:none;-webkit-appearance:none;border:2px solid var(--tf-border);border-radius:50%;cursor:pointer;height:16px;position:relative;width:16px}.tfb-item input[type=checkbox]:checked{background-color:#4f46e5;border-color:#4f46e5}.tfb-item input[type=checkbox]:checked:after{background:#fff;border-radius:50%;content:\"\";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.tfb-radio-group{display:flex;gap:8px}.tfb-radio-group label{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:4px}.tfb-reset{background:#e63946;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;padding:6px 12px;position:absolute;right:12px;top:12px}.tfb-reset:hover{opacity:.9}.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;color:var(--tf-text);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:10px;width:100%}.tfp-wrapper-toggle-open button{background:transparent;border:1px solid var(--tf-border);border-radius:6px;color:var(--tf-text);cursor:pointer;font-size:14px;padding:4px 8px}";
|
|
588
|
+
styleInject(css_248z$g);
|
|
589
589
|
|
|
590
590
|
const TableFilterBar = ({ filters, values, onChange, onReset, resetButton, isDarkMode = false, position = "left", gap = 16, }) => {
|
|
591
591
|
return (jsx(Fragment, { children: jsxs("div", { className: "tfb-container", style: {
|
|
@@ -617,8 +617,8 @@ const TableFilterBar = ({ filters, values, onChange, onReset, resetButton, isDar
|
|
|
617
617
|
}) }), resetButton ? (resetButton) : (jsx("button", { className: "tfb-reset", onClick: onReset, children: "Reset" }))] }) }));
|
|
618
618
|
};
|
|
619
619
|
|
|
620
|
-
var css_248z$
|
|
621
|
-
styleInject(css_248z$
|
|
620
|
+
var css_248z$f = ".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}";
|
|
621
|
+
styleInject(css_248z$f);
|
|
622
622
|
|
|
623
623
|
const Text = ({ as = "span", variant = "body", weight = "regular", align = "left", color, isDarkMode = false, className = "", children, }) => {
|
|
624
624
|
const Component = as;
|
|
@@ -629,8 +629,8 @@ const Text = ({ as = "span", variant = "body", weight = "regular", align = "left
|
|
|
629
629
|
}, children: children }));
|
|
630
630
|
};
|
|
631
631
|
|
|
632
|
-
var css_248z$
|
|
633
|
-
styleInject(css_248z$
|
|
632
|
+
var css_248z$e = ".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}";
|
|
633
|
+
styleInject(css_248z$e);
|
|
634
634
|
|
|
635
635
|
const SmartTimeline = ({ items, orientation = "vertical", showLine = true, clickable = false, isDarkMode = false, onItemClick, }) => {
|
|
636
636
|
return (jsx("div", { className: `stl-wrapper ${orientation}`, style: {
|
|
@@ -644,8 +644,8 @@ const TimelineRow = ({ item, last, orientation, showLine, clickable, onClick, is
|
|
|
644
644
|
return (jsxs("div", { className: `stl-item ${clickable ? "clickable" : ""}`, onClick: () => clickable && (onClick === null || onClick === void 0 ? void 0 : onClick(item)), children: [jsxs("div", { className: "stl-indicator", children: [jsx("div", { className: `stl-dot status-${(_a = item.status) !== null && _a !== void 0 ? _a : "default"}`, children: item.icon }), showLine && !last && (jsx("span", { className: `stl-line ${orientation}` }))] }), jsxs("div", { className: "stl-content", children: [item.date && jsx("span", { className: "stl-date", children: item.date }), jsx("h4", { className: "stl-title", children: item.title }), item.description && (jsx("p", { className: "stl-desc", children: item.description })), item.content && (jsx("div", { className: "stl-custom", children: item.content }))] })] }));
|
|
645
645
|
};
|
|
646
646
|
|
|
647
|
-
var css_248z$
|
|
648
|
-
styleInject(css_248z$
|
|
647
|
+
var css_248z$d = ".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}}";
|
|
648
|
+
styleInject(css_248z$d);
|
|
649
649
|
|
|
650
650
|
const SmartCarousel = ({ images, autoPlay = false, interval = 5000, showArrows = true, showDots = true, isDarkMode = false, height = 320, activeDotColor = tco.primary, }) => {
|
|
651
651
|
const [index, setIndex] = useState(0);
|
|
@@ -670,8 +670,8 @@ const SmartCarousel = ({ images, autoPlay = false, interval = 5000, showArrows =
|
|
|
670
670
|
}) }), showArrows && (jsxs(Fragment, { children: [jsx("button", { className: "sc-arrow left", onClick: prev, "aria-label": "Previous", children: jsx("span", { children: " \u2039" }) }), jsx("button", { className: "sc-arrow right", onClick: next, "aria-label": "Next", children: jsx("span", { children: " \u203A" }) })] })), showDots && (jsx("div", { className: "sc-dots", children: images.map((_, i) => (jsx("span", { className: `sc-dot ${i === index ? "active" : ""}`, onClick: () => setIndex(i) }, i))) }))] }));
|
|
671
671
|
};
|
|
672
672
|
|
|
673
|
-
var css_248z$
|
|
674
|
-
styleInject(css_248z$
|
|
673
|
+
var css_248z$c = ".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;width:\"100%\"}.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:30px}.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}}";
|
|
674
|
+
styleInject(css_248z$c);
|
|
675
675
|
|
|
676
676
|
const Navbar = ({ logo, links = [], actions = [], position = "left", sticky = true, isDarkMode = false, height = 64 }) => {
|
|
677
677
|
const [open, setOpen] = useState(false);
|
|
@@ -685,8 +685,8 @@ const Navbar = ({ logo, links = [], actions = [], position = "left", sticky = tr
|
|
|
685
685
|
}), jsxs("div", { className: "navbar-burger", onClick: () => setOpen(!open), children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] })] })] }) }));
|
|
686
686
|
};
|
|
687
687
|
|
|
688
|
-
var css_248z$
|
|
689
|
-
styleInject(css_248z$
|
|
688
|
+
var css_248z$b = ".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}a{color:inherit;text-decoration:none}";
|
|
689
|
+
styleInject(css_248z$b);
|
|
690
690
|
|
|
691
691
|
const Sidebar = ({ logo, items = [], collapsed: controlledCollapsed, onToggle, width = 200, collapsedWidth = 50, isDarkMode = false, sticky = true, style = {}, }) => {
|
|
692
692
|
const [internalCollapsed, setInternalCollapsed] = useState(false);
|
|
@@ -699,8 +699,8 @@ const Sidebar = ({ logo, items = [], collapsed: controlledCollapsed, onToggle, w
|
|
|
699
699
|
return (jsxs("aside", { className: `sidebar ${isDarkMode ? "dark" : ""} ${collapsed ? "collapsed" : ""} ${sticky ? "sticky" : ""}`, style: Object.assign(Object.assign({}, style), { width: collapsed ? collapsedWidth : width }), children: [jsxs("div", { className: "sidebar-header", children: [jsx("div", { className: "sidebar-logo", children: logo }), jsx("button", { className: "sidebar-toggle", onClick: toggle, children: "\u2630" })] }), jsx("ul", { className: "sidebar-items", children: items.map((item, i) => (jsx("li", { className: `sidebar-item ${item.active ? "active" : ""}`, onClick: item.onClick, children: jsxs("a", { href: item.href || "", children: [item.icon && jsx("span", { className: "sidebar-icon", children: item.icon }), !collapsed && (jsx("span", { className: "sidebar-label", children: item.label }))] }) }, i))) })] }));
|
|
700
700
|
};
|
|
701
701
|
|
|
702
|
-
var css_248z$
|
|
703
|
-
styleInject(css_248z$
|
|
702
|
+
var css_248z$a = ".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}}";
|
|
703
|
+
styleInject(css_248z$a);
|
|
704
704
|
|
|
705
705
|
const Footer = ({ left, center, right, sections = [], isDarkMode = false, height = 56, fixed = false }) => {
|
|
706
706
|
return (jsxs("footer", { className: `footer ${isDarkMode ? "dark" : ""} ${fixed ? "fixed" : ""}`, style: { height }, children: [jsxs("div", { className: "footer-container", children: [jsx("div", { className: "footer-left", children: left }), jsx("div", { className: "footer-center", children: center }), jsx("div", { className: "footer-right", children: right })] }), sections.length > 0 && (jsx("div", { className: "footer-sections", children: sections.map((section, i) => {
|
|
@@ -709,15 +709,15 @@ const Footer = ({ left, center, right, sections = [], isDarkMode = false, height
|
|
|
709
709
|
}) }))] }));
|
|
710
710
|
};
|
|
711
711
|
|
|
712
|
-
var css_248z$
|
|
713
|
-
styleInject(css_248z$
|
|
712
|
+
var css_248z$9 = ".layout{display:flex;flex-direction:column;font-family:sans-serif;min-height:100vh}.layout.dark{background:#0f172a;color:#fff}.layout-main{display:flex;flex:1;overflow:hidden}.layout-sidebar{display:flex;flex-shrink:0}.layout-content{flex:1;margin-left:50px;overflow-y:auto;padding:16px}";
|
|
713
|
+
styleInject(css_248z$9);
|
|
714
714
|
|
|
715
715
|
const Layout = ({ header, sidebar, footer, children, withSidebar = true, withHeader = true, withFooter = true, sidebarWidth = 260, isDarkMode = false, }) => {
|
|
716
716
|
return (jsxs("div", { className: `layout ${isDarkMode ? "dark" : ""}`, children: [withHeader && header, jsxs("div", { className: "layout-main", children: [withSidebar && sidebar && (jsx("aside", { className: "layout-sidebar", children: sidebar })), jsx("main", { className: "layout-content", children: children })] }), withFooter && footer] }));
|
|
717
717
|
};
|
|
718
718
|
|
|
719
|
-
var css_248z$
|
|
720
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$8 = ".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}";
|
|
720
|
+
styleInject(css_248z$8);
|
|
721
721
|
|
|
722
722
|
function DragDrop({ items, onChange, renderItem, direction = "vertical", gap = 12, draggable = true, isDarkMode = false, }) {
|
|
723
723
|
const [draggedId, setDraggedId] = useState(null);
|
|
@@ -773,8 +773,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
773
773
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
774
774
|
};
|
|
775
775
|
|
|
776
|
-
var css_248z$
|
|
777
|
-
styleInject(css_248z$
|
|
776
|
+
var css_248z$7 = ".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}";
|
|
777
|
+
styleInject(css_248z$7);
|
|
778
778
|
|
|
779
779
|
const SecureText = ({ value, masked = true, copyable = true, maskChar = "•", revealLabel = "Show", copyLabel = "Copy", onCopy, isDarkMode = false, width = "100%", }) => {
|
|
780
780
|
const [visible, setVisible] = useState(!masked);
|
|
@@ -791,8 +791,8 @@ const SecureText = ({ value, masked = true, copyable = true, maskChar = "•", r
|
|
|
791
791
|
return (jsxs("div", { className: `secure-text ${isDarkMode ? "dark" : ""}`, style: { width }, children: [jsx("span", { className: "secure-text-value", children: displayValue }), jsxs("div", { className: "secure-text-actions", children: [jsx("button", { type: "button", onClick: () => setVisible(!visible), title: visible ? "Hide" : revealLabel, children: visible ? "🙈" : "👀" }), copyable && (jsx("button", { type: "button", onClick: handleCopy, title: copyLabel, children: copied ? "✅" : "📋" }))] })] }));
|
|
792
792
|
};
|
|
793
793
|
|
|
794
|
-
var css_248z$
|
|
795
|
-
styleInject(css_248z$
|
|
794
|
+
var css_248z$6 = ":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%)}}";
|
|
795
|
+
styleInject(css_248z$6);
|
|
796
796
|
|
|
797
797
|
const Loading = ({ variant = "spinner", size = "md", text, fullscreen = false, overlay = false, color, isDarkMode = false, }) => {
|
|
798
798
|
return (jsxs("div", { className: `loading-wrapper
|
|
@@ -801,8 +801,8 @@ const Loading = ({ variant = "spinner", size = "md", text, fullscreen = false, o
|
|
|
801
801
|
${isDarkMode ? "dark" : ""}`, children: [jsxs("div", { className: `loading ${variant} ${size}`, style: { ["--loading-color"]: color }, children: [variant === "spinner" && jsx("span", { className: "spinner" }), variant === "dots" && (jsxs(Fragment, { children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] })), variant === "bar" && (jsx("div", { className: "bar-container", children: jsx("div", { className: "bar-progress" }) }))] }), text && jsx("p", { className: "loading-text", children: text })] }));
|
|
802
802
|
};
|
|
803
803
|
|
|
804
|
-
var css_248z$
|
|
805
|
-
styleInject(css_248z$
|
|
804
|
+
var css_248z$5 = ".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}";
|
|
805
|
+
styleInject(css_248z$5);
|
|
806
806
|
|
|
807
807
|
const Avatar = ({ src, alt = "avatar", name, size = "md", shape = "circle", status, backgroundColor, color, onClick, isDarkMode = false, }) => {
|
|
808
808
|
const getInitials = () => {
|
|
@@ -825,8 +825,8 @@ const Avatar = ({ src, alt = "avatar", name, size = "md", shape = "circle", stat
|
|
|
825
825
|
}, onClick: onClick, children: [src ? (jsx("img", { src: src, alt: alt })) : (jsx("span", { className: "avatar-initials", children: getInitials() })), status && jsx("span", { className: `avatar-status ${status}` })] }));
|
|
826
826
|
};
|
|
827
827
|
|
|
828
|
-
var css_248z$
|
|
829
|
-
styleInject(css_248z$
|
|
828
|
+
var css_248z$4 = ".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}";
|
|
829
|
+
styleInject(css_248z$4);
|
|
830
830
|
|
|
831
831
|
const ProfileMenu = ({ user, actions, isDarkMode = false, }) => {
|
|
832
832
|
const [open, setOpen] = useState(false);
|
|
@@ -848,15 +848,15 @@ const ProfileMenu = ({ user, actions, isDarkMode = false, }) => {
|
|
|
848
848
|
}, children: [action.icon && jsx("span", { className: "icon", children: action.icon }), action.label] }, i))) })] }))] }));
|
|
849
849
|
};
|
|
850
850
|
|
|
851
|
-
var css_248z$
|
|
851
|
+
var css_248z$3 = ".ql-wrapper{background:var(--ql-bg);border:1px solid var(--ql-border);border-radius:16px;color:var(--ql-text);font-family:sans-serif;margin:auto;overflow:hidden;width:100%}.ql-container{display:flex;min-height:420px}.ql-container.image-left{flex-direction:row-reverse}.ql-image{background:#f4f4f4;flex:1}.ql-image img{height:100%;object-fit:cover;width:100%}.ql-form{display:flex;flex:1;flex-direction:column;justify-content:center;padding:32px}.ql-header{margin-bottom:24px}.ql-header h2{font-size:26px;margin:0}.ql-header p{font-size:14px;margin-top:6px;opacity:.7}.ql-footer{font-size:13px;margin-top:16px;text-align:center}@media (max-width:768px){.ql-container{flex-direction:column}.ql-image{height:180px}.ql-form{padding:20px}}";
|
|
852
|
+
styleInject(css_248z$3);
|
|
853
|
+
|
|
854
|
+
var css_248z$2 = ".form-builder{display:flex;flex-direction:column;font-family:sans-serif;width:100%}.form-builder.dark-mode{background-color:#0f172a;color:#fff}.form-builder.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.form-field{display:flex;flex-direction:column}.form-label{font-size:14px;margin-bottom:6px}.form-error{font-size:12px;margin-top:4px}.form-submit{background:#007bff;border:none;border-radius:8px;color:#fff;cursor:pointer;margin-top:20px;padding:10px 16px}";
|
|
852
855
|
styleInject(css_248z$2);
|
|
853
856
|
|
|
854
|
-
var css_248z$1 = ".
|
|
857
|
+
var css_248z$1 = ".input-container{display:flex;flex-direction:column;gap:4px}.input-container.dark-mode{background-color:#333!important;color:#fff}.input-container.fullWidth{width:100%}.input-field{background:#fff;border:1px solid var(--in-border-color,#ccc);border-radius:6px;font-size:15px;outline:none;padding:10px 12px;transition:.2s ease-in-out}.input-field.dark-mode{background:#333!important;color:#fff!important}.input-field:focus,.input-field:hover{border-color:var(--in-focus-border,#007bff)}.input-field:focus{box-shadow:0 0 3px var(--in-focus-shadow,rgba(0,123,255,.4))}.input-field.error{border-color:#e63946!important;box-shadow:0 0 2px rgba(230,57,70,.4)}.input-field:disabled{background:#f0f0f0;cursor:not-allowed;opacity:.7}.input-error{background-color:#f44343;border-radius:4px;color:#ece6e6;font-family:sans-serif;font-size:12px;margin-top:4px;padding:8px}";
|
|
855
858
|
styleInject(css_248z$1);
|
|
856
859
|
|
|
857
|
-
var css_248z = ".input-container{display:flex;flex-direction:column;gap:4px}.input-container.dark-mode{background-color:#333!important;color:#fff}.input-container.fullWidth{width:100%}.input-field{background:#fff;border:1px solid var(--in-border-color,#ccc);border-radius:6px;font-size:15px;outline:none;padding:10px 12px;transition:.2s ease-in-out}.input-field.dark-mode{background:#333!important;color:#fff!important}.input-field:focus,.input-field:hover{border-color:var(--in-focus-border,#007bff)}.input-field:focus{box-shadow:0 0 3px var(--in-focus-shadow,rgba(0,123,255,.4))}.input-field.error{border-color:#e63946!important;box-shadow:0 0 2px rgba(230,57,70,.4)}.input-field:disabled{background:#f0f0f0;cursor:not-allowed;opacity:.7}.input-error{background-color:#f44343;border-radius:4px;color:#ece6e6;font-family:sans-serif;font-size:12px;margin-top:4px;padding:8px}";
|
|
858
|
-
styleInject(css_248z);
|
|
859
|
-
|
|
860
860
|
const Input = ({ value, onChange, label = "", placeholder = "", type = "text", disabled = false, isDarkMode = false, error, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", fullWidth = false, style, }) => {
|
|
861
861
|
return (jsxs("div", { className: `input-container ${fullWidth ? "fullWidth" : ""} ${isDarkMode ? "dark-mode" : ""}`, children: [label && jsxs("label", { style: { color: isDarkMode ? "white" : "black", fontFamily: "sans-serif" }, children: [label, " : "] }), jsx("input", { type: type, value: value, placeholder: placeholder, disabled: disabled, onChange: (e) => onChange(e.target.value), className: `input-field ${error ? "error" : ""} ${isDarkMode ? "dark-mode" : ""}`, style: Object.assign(Object.assign({}, style), { ["--in-border-color"]: isDarkMode ? "black" : borderColor, ["--in-focus-border"]: focusBorder, ["--in-focus-shadow"]: focusShadow }) }), error && jsx("span", { className: "input-error", children: error })] }));
|
|
862
862
|
};
|
|
@@ -917,5 +917,24 @@ const QuicklyLogin = ({ fields = [], onSubmit, image, imagePosition = "right", t
|
|
|
917
917
|
}, children: jsxs("div", { className: `ql-container ${imagePosition === "left" ? "image-left" : "image-right"}`, children: [image && (jsx("div", { className: "ql-image", children: jsx("img", { src: image, alt: "login visual" }) })), jsxs("div", { className: "ql-form", children: [(title || subtitle) && (jsxs("div", { className: "ql-header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), !withGoogle && (jsx(FormBuilder, { fields: fields, onSubmit: onSubmit, btn: btn, isDarkMode: isDarkMode })), withGoogle && googleSection && googleSection, footer && jsx("div", { className: "ql-footer", children: footer })] })] }) }));
|
|
918
918
|
};
|
|
919
919
|
|
|
920
|
-
|
|
920
|
+
var css_248z = ".card-sheet{background:#fff;border:1px solid #ddd;border-radius:8px;font-family:sans-serif;padding:16px}.card-sheet.dark{background:#0f172a;border-color:#333;color:#fff}.card-section+.card-section{margin-top:24px}.card-section-title{font-size:16px;font-weight:600;margin-bottom:12px}.card-section-fields{display:flex;flex-direction:column;gap:12px}.card-field{gap:8px}.card-field,.card-pencil{align-items:center;display:flex}.card-pencil{background:none;border:none;color:#4a90e2;cursor:pointer}.card-label{font-weight:500;min-width:120px}.card-value{flex:1}.card-field input{border:1px solid #ccc;border-radius:4px;flex:1;padding:6px 8px}";
|
|
921
|
+
styleInject(css_248z);
|
|
922
|
+
|
|
923
|
+
const CardSheet = ({ sections, onChange, isDarkMode = false, }) => {
|
|
924
|
+
const [editingKey, setEditingKey] = useState(null);
|
|
925
|
+
const [values, setValues] = useState(sections.flatMap(s => s.fields).reduce((acc, f) => {
|
|
926
|
+
acc[f.key] = f.value;
|
|
927
|
+
return acc;
|
|
928
|
+
}, {}));
|
|
929
|
+
const handleValueChange = (key, value) => {
|
|
930
|
+
setValues(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
|
|
931
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(key, value);
|
|
932
|
+
};
|
|
933
|
+
return (jsx("div", { className: `card-sheet ${isDarkMode ? "dark" : ""}`, children: sections.map((section, i) => (jsxs("div", { className: "card-section", children: [jsx("h3", { className: "card-section-title", children: section.title }), jsx("div", { className: "card-section-fields", children: section.fields.map(field => {
|
|
934
|
+
const isEditing = editingKey === field.key;
|
|
935
|
+
return (jsxs("div", { className: "card-field", children: [field.editable && (jsx("button", { className: "card-pencil", onClick: () => setEditingKey(isEditing ? null : field.key), children: "\u270D\uD83C\uDFFC" })), jsx("div", { className: "card-label", children: field.label }), isEditing ? (jsx("input", { type: field.type || "text", value: values[field.key], placeholder: field.placeholder, onChange: e => handleValueChange(field.key, e.target.value), onBlur: () => setEditingKey(null), autoFocus: true })) : (jsx("div", { className: "card-value", children: values[field.key] }))] }, field.key));
|
|
936
|
+
}) })] }, i))) }));
|
|
937
|
+
};
|
|
938
|
+
|
|
939
|
+
export { Avatar, Bloc, Button, Card, CardSheet, Center, Checkbox, Colors, Column, Container, Divider, DragDrop, Footer, FormBuilder, Grid, Layout, Loading, Modal, Navbar, Pagination, ProfileMenu, QuicklyLogin, Radio, Row, SecureText, Select, Sidebar, SmartCarousel, SmartTable, SmartTimeline, Spacer, TableFilterBar, Tag, Text, TextField, ThemeProvider, ToastProvider, tco, useTheme, useToast };
|
|
921
940
|
//# sourceMappingURL=index.esm.js.map
|