@mahatisystems/mahati-ui-components 1.2.0 → 1.3.0
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/index.d.mts +33 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.js +420 -243
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +346 -243
- package/dist/index.mjs.map +1 -1
- package/package.json +52 -25
- package/dist/index.css +0 -2
- package/dist/index.css.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,244 +1,421 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
display: flex
|
|
125
|
-
|
|
126
|
-
gap:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
function _define_property(obj, key, value) {
|
|
3
|
+
if (key in obj) {
|
|
4
|
+
Object.defineProperty(obj, key, {
|
|
5
|
+
value: value,
|
|
6
|
+
enumerable: true,
|
|
7
|
+
configurable: true,
|
|
8
|
+
writable: true
|
|
9
|
+
});
|
|
10
|
+
} else {
|
|
11
|
+
obj[key] = value;
|
|
12
|
+
}
|
|
13
|
+
return obj;
|
|
14
|
+
}
|
|
15
|
+
function _object_spread(target) {
|
|
16
|
+
for(var i = 1; i < arguments.length; i++){
|
|
17
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
18
|
+
var ownKeys = Object.keys(source);
|
|
19
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
20
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
21
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
22
|
+
}));
|
|
23
|
+
}
|
|
24
|
+
ownKeys.forEach(function(key) {
|
|
25
|
+
_define_property(target, key, source[key]);
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return target;
|
|
29
|
+
}
|
|
30
|
+
function ownKeys(object, enumerableOnly) {
|
|
31
|
+
var keys = Object.keys(object);
|
|
32
|
+
if (Object.getOwnPropertySymbols) {
|
|
33
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
34
|
+
if (enumerableOnly) {
|
|
35
|
+
symbols = symbols.filter(function(sym) {
|
|
36
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
keys.push.apply(keys, symbols);
|
|
40
|
+
}
|
|
41
|
+
return keys;
|
|
42
|
+
}
|
|
43
|
+
function _object_spread_props(target, source) {
|
|
44
|
+
source = source != null ? source : {};
|
|
45
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
46
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
47
|
+
} else {
|
|
48
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
49
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
return target;
|
|
53
|
+
}
|
|
54
|
+
function _object_without_properties(source, excluded) {
|
|
55
|
+
if (source == null) return {};
|
|
56
|
+
var target = _object_without_properties_loose(source, excluded);
|
|
57
|
+
var key, i;
|
|
58
|
+
if (Object.getOwnPropertySymbols) {
|
|
59
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
60
|
+
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
61
|
+
key = sourceSymbolKeys[i];
|
|
62
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
63
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
64
|
+
target[key] = source[key];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return target;
|
|
68
|
+
}
|
|
69
|
+
function _object_without_properties_loose(source, excluded) {
|
|
70
|
+
if (source == null) return {};
|
|
71
|
+
var target = {};
|
|
72
|
+
var sourceKeys = Object.keys(source);
|
|
73
|
+
var key, i;
|
|
74
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
75
|
+
key = sourceKeys[i];
|
|
76
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
77
|
+
target[key] = source[key];
|
|
78
|
+
}
|
|
79
|
+
return target;
|
|
80
|
+
}
|
|
81
|
+
function _tagged_template_literal(strings, raw) {
|
|
82
|
+
if (!raw) {
|
|
83
|
+
raw = strings.slice(0);
|
|
84
|
+
}
|
|
85
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
86
|
+
raw: {
|
|
87
|
+
value: Object.freeze(raw)
|
|
88
|
+
}
|
|
89
|
+
}));
|
|
90
|
+
}
|
|
91
|
+
function _type_of(obj) {
|
|
92
|
+
"@swc/helpers - typeof";
|
|
93
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
94
|
+
}
|
|
95
|
+
function _templateObject() {
|
|
96
|
+
var data = _tagged_template_literal([
|
|
97
|
+
"\n /* Base Styles */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-size: 14px;\n font-weight: 500;\n transition: all 200ms ease-in-out;\n cursor: pointer;\n border: none;\n outline: none;\n font-family: inherit;\n position: relative;\n \n /* Focus Styles */\n &:focus-visible {\n outline: 2px solid rgba(59, 130, 246, 0.5);\n outline-offset: 2px;\n }\n \n /* Disabled State */\n &:disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ",
|
|
98
|
+
"\n\n ",
|
|
99
|
+
"\n\n ",
|
|
100
|
+
"\n\n ",
|
|
101
|
+
"\n"
|
|
102
|
+
]);
|
|
103
|
+
_templateObject = function _templateObject() {
|
|
104
|
+
return data;
|
|
105
|
+
};
|
|
106
|
+
return data;
|
|
107
|
+
}
|
|
108
|
+
function _templateObject1() {
|
|
109
|
+
var data = _tagged_template_literal([
|
|
110
|
+
"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition: all 200ms ease-in-out;\n \n /* Name-based background for icon buttons */\n ",
|
|
111
|
+
";\n \n /* Parse border radius from Tailwind classes */\n border-radius: ",
|
|
112
|
+
";\n \n /* Parse padding from Tailwind classes */\n padding: ",
|
|
113
|
+
";\n \n /* Parse background color from Tailwind classes (after name) */\n background: ",
|
|
114
|
+
";\n \n width: 100%;\n height: 100%;\n \n /* Icon sizing */\n svg {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n }\n \n /* Hover and Active States */\n ",
|
|
115
|
+
"\n"
|
|
116
|
+
]);
|
|
117
|
+
_templateObject1 = function _templateObject() {
|
|
118
|
+
return data;
|
|
119
|
+
};
|
|
120
|
+
return data;
|
|
121
|
+
}
|
|
122
|
+
function _templateObject2() {
|
|
123
|
+
var data = _tagged_template_literal([
|
|
124
|
+
"\n display: inline-flex;\n flex-direction: ",
|
|
125
|
+
";\n align-items: ",
|
|
126
|
+
";\n gap: ",
|
|
127
|
+
";\n"
|
|
128
|
+
]);
|
|
129
|
+
_templateObject2 = function _templateObject() {
|
|
130
|
+
return data;
|
|
131
|
+
};
|
|
132
|
+
return data;
|
|
133
|
+
}
|
|
134
|
+
var __create = Object.create;
|
|
135
|
+
var __defProp = Object.defineProperty;
|
|
136
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
137
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
138
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
139
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
140
|
+
var __export = function(target, all) {
|
|
141
|
+
for(var name in all)__defProp(target, name, {
|
|
142
|
+
get: all[name],
|
|
143
|
+
enumerable: true
|
|
144
|
+
});
|
|
145
|
+
};
|
|
146
|
+
var __copyProps = function(to, from, except, desc) {
|
|
147
|
+
if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
|
|
148
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
149
|
+
try {
|
|
150
|
+
var _loop = function() {
|
|
151
|
+
var key = _step.value;
|
|
152
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
153
|
+
get: function() {
|
|
154
|
+
return from[key];
|
|
155
|
+
},
|
|
156
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
|
|
160
|
+
} catch (err) {
|
|
161
|
+
_didIteratorError = true;
|
|
162
|
+
_iteratorError = err;
|
|
163
|
+
} finally{
|
|
164
|
+
try {
|
|
165
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
166
|
+
_iterator.return();
|
|
167
|
+
}
|
|
168
|
+
} finally{
|
|
169
|
+
if (_didIteratorError) {
|
|
170
|
+
throw _iteratorError;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
return to;
|
|
176
|
+
};
|
|
177
|
+
var __toESM = function(mod, isNodeMode, target) {
|
|
178
|
+
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
|
|
179
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
180
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
181
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
182
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
183
|
+
value: mod,
|
|
184
|
+
enumerable: true
|
|
185
|
+
}) : target, mod);
|
|
186
|
+
};
|
|
187
|
+
var __toCommonJS = function(mod) {
|
|
188
|
+
return __copyProps(__defProp({}, "__esModule", {
|
|
189
|
+
value: true
|
|
190
|
+
}), mod);
|
|
191
|
+
};
|
|
192
|
+
// src/index.ts
|
|
193
|
+
var index_exports = {};
|
|
194
|
+
__export(index_exports, {
|
|
195
|
+
MahatiButton: function() {
|
|
196
|
+
return Button;
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
module.exports = __toCommonJS(index_exports);
|
|
200
|
+
// src/components/Button.tsx
|
|
201
|
+
var import_react = __toESM(require("react"));
|
|
202
|
+
var import_styled = __toESM(require("@emotion/styled"));
|
|
203
|
+
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
204
|
+
var parseHeightWidth = function(className) {
|
|
205
|
+
if (!className) return "36px";
|
|
206
|
+
var match = className.match(/[hw]-(\d+)/);
|
|
207
|
+
if (match) {
|
|
208
|
+
return "".concat(parseInt(match[1]) * 4, "px");
|
|
209
|
+
}
|
|
210
|
+
return "36px";
|
|
211
|
+
};
|
|
212
|
+
var parseGap = function(gapClass) {
|
|
213
|
+
if (!gapClass) return "8px";
|
|
214
|
+
var match = gapClass.match(/gap-(\d+)/);
|
|
215
|
+
if (match) {
|
|
216
|
+
return "".concat(parseInt(match[1]) * 4, "px");
|
|
217
|
+
}
|
|
218
|
+
return "8px";
|
|
219
|
+
};
|
|
220
|
+
var getColorByName = function(name) {
|
|
221
|
+
var colors = {
|
|
222
|
+
blue: "#3b82f6",
|
|
223
|
+
green: "#10b981",
|
|
224
|
+
red: "#ef4444",
|
|
225
|
+
orange: "#f59e0b",
|
|
226
|
+
purple: "#8b5cf6",
|
|
227
|
+
yellow: "#f59e0b",
|
|
228
|
+
pink: "#ec4899",
|
|
229
|
+
teal: "#14b8a6",
|
|
230
|
+
indigo: "#6366f1",
|
|
231
|
+
primary: "linear-gradient(to right, rgba(23, 97, 163, 1), rgba(77, 175, 131, 1))",
|
|
232
|
+
secondary: "#6b7280",
|
|
233
|
+
success: "#10b981",
|
|
234
|
+
danger: "#ef4444",
|
|
235
|
+
warning: "#f59e0b",
|
|
236
|
+
info: "#3b82f6"
|
|
237
|
+
};
|
|
238
|
+
return colors[name === null || name === void 0 ? void 0 : name.toLowerCase()] || colors.primary || "#3b82f6";
|
|
239
|
+
};
|
|
240
|
+
var StyledButton = import_styled.default.button(_templateObject(), function(props) {
|
|
241
|
+
var color = getColorByName(props.$name);
|
|
242
|
+
if (color) {
|
|
243
|
+
if (props.$iconButton) {
|
|
244
|
+
return "\n color: ".concat(color.startsWith("linear") || color.startsWith("rgba") ? "white" : color, ";\n ");
|
|
245
|
+
} else {
|
|
246
|
+
return "\n background: ".concat(color, ";\n color: white;\n border-radius: 6px;\n &:hover { opacity: 0.9; }\n &:active { opacity: 0.95; }\n ");
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
return "";
|
|
250
|
+
}, function(props) {
|
|
251
|
+
return props.$iconButton && "\n background: transparent !important;\n padding: 0;\n color: rgba(255, 255, 255, 0.9);\n height: ".concat(props.$height || "36px", ";\n width: ").concat(props.$width || "36px", ";\n min-height: ").concat(props.$height || "36px", ";\n min-width: ").concat(props.$width || "36px", ";\n border-radius: 6px;\n \n &:hover {\n background: transparent !important;\n color: rgba(255, 255, 255, 1);\n }\n \n &:active {\n background: transparent !important;\n }\n \n &:focus-visible {\n outline: 2px solid rgba(255, 255, 255, 0.7);\n outline-offset: 2px;\n }\n ");
|
|
252
|
+
}, function(props) {
|
|
253
|
+
if (props.$iconButton || props.$name) return "";
|
|
254
|
+
switch(props.$variant){
|
|
255
|
+
case "default":
|
|
256
|
+
return "\n background: linear-gradient(to right, rgba(23, 97, 163, 1), rgba(77, 175, 131, 1));\n color: white;\n border-radius: 6px;\n &:hover { opacity: 0.9; }\n &:active { opacity: 0.95; }\n ";
|
|
257
|
+
case "destructive":
|
|
258
|
+
return "\n background: #ef4444;\n color: white;\n border-radius: 6px;\n &:hover { background: #dc2626; }\n &:active { background: #b91c1c; }\n ";
|
|
259
|
+
case "outline":
|
|
260
|
+
return "\n border: 1px solid #e5e7eb;\n background: white;\n color: #374151;\n border-radius: 6px;\n &:hover { \n background: #f9fafb;\n border-color: #d1d5db;\n }\n &:active { background: #f3f4f6; }\n ";
|
|
261
|
+
case "secondary":
|
|
262
|
+
return "\n background: ".concat(getColorByName("blue"), ";\n color: #374151;\n border-radius: 6px;\n &:hover { background: #e5e7eb; }\n &:active { background: #d1d5db; }\n ");
|
|
263
|
+
case "ghost":
|
|
264
|
+
return "\n background: transparent;\n color: #374151;\n border-radius: 6px;\n &:hover { background: #f3f4f6; }\n &:active { background: #e5e7eb; }\n ";
|
|
265
|
+
case "link":
|
|
266
|
+
return "\n background: transparent;\n color: #2563eb;\n text-decoration: underline;\n text-underline-offset: 4px;\n padding: 0;\n height: auto;\n &:hover { \n text-decoration: none;\n color: #1d4ed8;\n }\n &:active { color: #1e40af; }\n ";
|
|
267
|
+
case "danger":
|
|
268
|
+
return "\n background: transparent;\n color: #ef4444;\n border-radius: 6px;\n &:hover {\n background: rgba(239, 68, 68, 0.1);\n }\n &:active {\n background: rgba(239, 68, 68, 0.2);\n }\n ";
|
|
269
|
+
case "dotted":
|
|
270
|
+
return "\n background: linear-gradient(to right, #1e73be, #28a97d);\n color: white;\n border-radius: 8px;\n position: relative;\n overflow: visible;\n \n &::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 10px;\n padding: 2px;\n background: linear-gradient(to right, #1e73be, #28a97d);\n -webkit-mask: \n linear-gradient(#fff 0 0) content-box, \n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n border: 2px dashed rgba(255, 255, 255, 0.5);\n }\n \n &:hover { opacity: 0.9; }\n &:active { opacity: 0.95; }\n ";
|
|
271
|
+
case "pill":
|
|
272
|
+
return "\n background: linear-gradient(to right, rgba(23, 97, 163, 1), rgba(77, 175, 131, 1));\n color: white;\n border-radius: 9999px;\n &:hover { opacity: 0.9; }\n &:active { opacity: 0.95; }\n ";
|
|
273
|
+
default:
|
|
274
|
+
return "\n background: linear-gradient(to right, rgba(23, 97, 163, 1), rgba(77, 175, 131, 1));\n color: white;\n border-radius: 6px;\n &:hover { opacity: 0.9; }\n ";
|
|
275
|
+
}
|
|
276
|
+
}, function(props) {
|
|
277
|
+
if (props.$iconButton) return "";
|
|
278
|
+
switch(props.$size){
|
|
279
|
+
case "sm":
|
|
280
|
+
return "height: 36px; padding: 0 12px; font-size: 13px;";
|
|
281
|
+
case "md":
|
|
282
|
+
return "height: 40px; padding: 0 16px; font-size: 14px;";
|
|
283
|
+
case "lg":
|
|
284
|
+
return "height: 44px; padding: 0 24px; font-size: 15px;";
|
|
285
|
+
case "icon":
|
|
286
|
+
return "height: 40px; width: 40px; padding: 0;";
|
|
287
|
+
default:
|
|
288
|
+
return "height: 40px; padding: 0 16px;";
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
var IconButtonInner = import_styled.default.span(_templateObject1(), function(props) {
|
|
292
|
+
var color = getColorByName(props.$name);
|
|
293
|
+
if (color) {
|
|
294
|
+
return "\n background: ".concat(color.startsWith("linear") ? color : "rgba(".concat(color.slice(1), ", 0.12)"), ";\n ");
|
|
295
|
+
}
|
|
296
|
+
return "";
|
|
297
|
+
}, function(props) {
|
|
298
|
+
if (!props.$radiusClass) return "6px";
|
|
299
|
+
var match = props.$radiusClass.match(/rounded-\[(\d+)px\]/);
|
|
300
|
+
if (match) return "".concat(match[1], "px");
|
|
301
|
+
if (props.$radiusClass === "rounded-md") return "6px";
|
|
302
|
+
if (props.$radiusClass === "rounded-lg") return "8px";
|
|
303
|
+
if (props.$radiusClass === "rounded-full") return "9999px";
|
|
304
|
+
return "6px";
|
|
305
|
+
}, function(props) {
|
|
306
|
+
if (!props.$paddingClass) return "2px";
|
|
307
|
+
var match = props.$paddingClass.match(/p-\[(\d+)px\]/);
|
|
308
|
+
if (match) return "".concat(match[1], "px");
|
|
309
|
+
return "2px";
|
|
310
|
+
}, function(props) {
|
|
311
|
+
if (props.$name) return "initial";
|
|
312
|
+
if (!props.$bgClass) return "rgba(255, 255, 255, 0.12)";
|
|
313
|
+
var rgbaMatch = props.$bgClass.match(/bg-\[(rgba?\([^)]+\))\]/);
|
|
314
|
+
if (rgbaMatch) return rgbaMatch[1];
|
|
315
|
+
return "rgba(255, 255, 255, 0.12)";
|
|
316
|
+
}, function(props) {
|
|
317
|
+
if (props.$hoverBgClass) {
|
|
318
|
+
var hoverMatch = props.$hoverBgClass.match(/hover:bg-\[(rgba?\([^)]+\))\]/);
|
|
319
|
+
var activeMatch = props.$hoverBgClass.match(/active:bg-\[(rgba?\([^)]+\))\]/);
|
|
320
|
+
var styles = "";
|
|
321
|
+
if (hoverMatch) {
|
|
322
|
+
styles += "button:hover & { background: ".concat(hoverMatch[1], "; }");
|
|
323
|
+
}
|
|
324
|
+
if (activeMatch) {
|
|
325
|
+
styles += "button:active & { background: ".concat(activeMatch[1], "; }");
|
|
326
|
+
}
|
|
327
|
+
return styles;
|
|
328
|
+
}
|
|
329
|
+
if (props.$intensity != null) {
|
|
330
|
+
var v = Math.max(0, Math.min(100, props.$intensity));
|
|
331
|
+
if (v === 0) return "";
|
|
332
|
+
if (v <= 10) return "button:hover & { opacity: 0.95; } button:active & { opacity: 0.90; }";
|
|
333
|
+
if (v <= 25) return "button:hover & { opacity: 0.90; } button:active & { opacity: 0.80; }";
|
|
334
|
+
if (v <= 40) return "button:hover & { opacity: 0.85; } button:active & { opacity: 0.75; }";
|
|
335
|
+
if (v <= 55) return "button:hover & { opacity: 0.80; } button:active & { opacity: 0.70; }";
|
|
336
|
+
if (v <= 70) return "button:hover & { opacity: 0.75; } button:active & { opacity: 0.65; }";
|
|
337
|
+
if (v <= 85) return "button:hover & { opacity: 0.70; } button:active & { opacity: 0.60; }";
|
|
338
|
+
return "button:hover & { opacity: 0.60; } button:active & { opacity: 0.50; }";
|
|
339
|
+
}
|
|
340
|
+
return "\n button:hover & { opacity: 0.85; }\n button:active & { opacity: 0.7; }\n ";
|
|
341
|
+
});
|
|
342
|
+
var IconButtonGroupWrapper = import_styled.default.div(_templateObject2(), function(props) {
|
|
343
|
+
return props.$direction === "col" ? "column" : "row";
|
|
344
|
+
}, function(props) {
|
|
345
|
+
return props.$direction === "col" ? "flex-start" : "center";
|
|
346
|
+
}, function(props) {
|
|
347
|
+
return props.$gap || "8px";
|
|
348
|
+
});
|
|
349
|
+
var IconButtonGroup = import_react.default.forwardRef(function(_param, ref) {
|
|
350
|
+
var className = _param.className, _param_direction = _param.direction, direction = _param_direction === void 0 ? "row" : _param_direction, gapClass = _param.gapClass, props = _object_without_properties(_param, [
|
|
351
|
+
"className",
|
|
352
|
+
"direction",
|
|
353
|
+
"gapClass"
|
|
354
|
+
]);
|
|
355
|
+
var gap = parseGap(gapClass);
|
|
356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButtonGroupWrapper, _object_spread({
|
|
357
|
+
ref: ref,
|
|
358
|
+
$direction: direction,
|
|
359
|
+
$gap: gap,
|
|
360
|
+
className: className
|
|
361
|
+
}, props));
|
|
362
|
+
});
|
|
363
|
+
IconButtonGroup.displayName = "IconButtonGroup";
|
|
364
|
+
var ButtonBase = import_react.default.forwardRef(function(_param, ref) {
|
|
365
|
+
var className = _param.className, _param_variant = _param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, name = _param.name, _param_iconButton = _param.iconButton, iconButton = _param_iconButton === void 0 ? false : _param_iconButton, iconButtonHeightClass = _param.iconButtonHeightClass, iconButtonWidthClass = _param.iconButtonWidthClass, iconButtonBgClass = _param.iconButtonBgClass, iconButtonRadiusClass = _param.iconButtonRadiusClass, iconButtonBgPaddingClass = _param.iconButtonBgPaddingClass, iconButtonHoverBgClass = _param.iconButtonHoverBgClass, iconButtonHoverIntensity = _param.iconButtonHoverIntensity, children = _param.children, props = _object_without_properties(_param, [
|
|
366
|
+
"className",
|
|
367
|
+
"variant",
|
|
368
|
+
"size",
|
|
369
|
+
"name",
|
|
370
|
+
"iconButton",
|
|
371
|
+
"iconButtonHeightClass",
|
|
372
|
+
"iconButtonWidthClass",
|
|
373
|
+
"iconButtonBgClass",
|
|
374
|
+
"iconButtonRadiusClass",
|
|
375
|
+
"iconButtonBgPaddingClass",
|
|
376
|
+
"iconButtonHoverBgClass",
|
|
377
|
+
"iconButtonHoverIntensity",
|
|
378
|
+
"children"
|
|
379
|
+
]);
|
|
380
|
+
if (iconButton) {
|
|
381
|
+
var height = parseHeightWidth(iconButtonHeightClass);
|
|
382
|
+
var width = parseHeightWidth(iconButtonWidthClass);
|
|
383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, _object_spread_props(_object_spread({
|
|
384
|
+
$variant: variant,
|
|
385
|
+
$size: size,
|
|
386
|
+
$iconButton: true,
|
|
387
|
+
$height: height,
|
|
388
|
+
$width: width,
|
|
389
|
+
$name: name,
|
|
390
|
+
className: className,
|
|
391
|
+
ref: ref
|
|
392
|
+
}, props), {
|
|
393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButtonInner, {
|
|
394
|
+
$bgClass: iconButtonBgClass,
|
|
395
|
+
$radiusClass: iconButtonRadiusClass,
|
|
396
|
+
$paddingClass: iconButtonBgPaddingClass,
|
|
397
|
+
$hoverBgClass: iconButtonHoverBgClass,
|
|
398
|
+
$intensity: iconButtonHoverIntensity,
|
|
399
|
+
$name: name,
|
|
400
|
+
children: children
|
|
401
|
+
})
|
|
402
|
+
}));
|
|
403
|
+
}
|
|
404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, _object_spread_props(_object_spread({
|
|
405
|
+
$variant: variant,
|
|
406
|
+
$size: size,
|
|
407
|
+
$name: name,
|
|
408
|
+
className: className,
|
|
409
|
+
ref: ref
|
|
410
|
+
}, props), {
|
|
411
|
+
children: children
|
|
412
|
+
}));
|
|
413
|
+
});
|
|
414
|
+
ButtonBase.displayName = "Button";
|
|
415
|
+
var Button = ButtonBase;
|
|
416
|
+
Button.IconButtonGroup = IconButtonGroup;
|
|
417
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
418
|
+
0 && (module.exports = {
|
|
419
|
+
MahatiButton: MahatiButton
|
|
420
|
+
});
|
|
244
421
|
//# sourceMappingURL=index.js.map
|