@marcoschwartz/lite-ui 0.4.0 → 0.6.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 +167 -1
- package/dist/index.d.ts +167 -1
- package/dist/index.js +784 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +762 -68
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -1
package/dist/index.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
10
|
for (var name in all)
|
|
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
18
|
}
|
|
17
19
|
return to;
|
|
18
20
|
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
19
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
30
|
|
|
21
31
|
// src/index.ts
|
|
@@ -24,6 +34,7 @@ __export(index_exports, {
|
|
|
24
34
|
ActionMenu: () => ActionMenu,
|
|
25
35
|
Alert: () => Alert,
|
|
26
36
|
AppleIcon: () => AppleIcon,
|
|
37
|
+
Avatar: () => Avatar,
|
|
27
38
|
Badge: () => Badge,
|
|
28
39
|
BellIcon: () => BellIcon,
|
|
29
40
|
Button: () => Button,
|
|
@@ -37,10 +48,12 @@ __export(index_exports, {
|
|
|
37
48
|
CloseIcon: () => CloseIcon,
|
|
38
49
|
DatePicker: () => DatePicker,
|
|
39
50
|
DateTimePicker: () => DateTimePicker,
|
|
51
|
+
Divider: () => Divider,
|
|
40
52
|
DownloadIcon: () => DownloadIcon,
|
|
41
53
|
Drawer: () => Drawer,
|
|
42
54
|
EditIcon: () => EditIcon,
|
|
43
55
|
FacebookIcon: () => FacebookIcon,
|
|
56
|
+
FileUpload: () => FileUpload,
|
|
44
57
|
GitHubIcon: () => GitHubIcon,
|
|
45
58
|
GoogleIcon: () => GoogleIcon,
|
|
46
59
|
HeartIcon: () => HeartIcon,
|
|
@@ -53,19 +66,25 @@ __export(index_exports, {
|
|
|
53
66
|
Navbar: () => Navbar,
|
|
54
67
|
Pagination: () => Pagination,
|
|
55
68
|
PlusIcon: () => PlusIcon,
|
|
69
|
+
ProgressBar: () => ProgressBar,
|
|
70
|
+
Radio: () => Radio,
|
|
56
71
|
SearchIcon: () => SearchIcon,
|
|
57
72
|
Select: () => Select,
|
|
58
73
|
SettingsIcon: () => SettingsIcon,
|
|
59
74
|
Sidebar: () => Sidebar,
|
|
60
75
|
SidebarProvider: () => SidebarProvider,
|
|
61
76
|
SlackIcon: () => SlackIcon,
|
|
77
|
+
Slider: () => Slider,
|
|
62
78
|
Spinner: () => Spinner,
|
|
63
79
|
StarIcon: () => StarIcon,
|
|
80
|
+
Stepper: () => Stepper,
|
|
64
81
|
Table: () => Table,
|
|
65
82
|
Tabs: () => Tabs,
|
|
66
83
|
TextInput: () => TextInput,
|
|
84
|
+
Textarea: () => Textarea,
|
|
67
85
|
ThemeProvider: () => ThemeProvider,
|
|
68
86
|
TimePicker: () => TimePicker,
|
|
87
|
+
ToastProvider: () => ToastProvider,
|
|
69
88
|
Toggle: () => Toggle,
|
|
70
89
|
TrashIcon: () => TrashIcon,
|
|
71
90
|
TwitterIcon: () => TwitterIcon,
|
|
@@ -75,8 +94,10 @@ __export(index_exports, {
|
|
|
75
94
|
getThemeScript: () => getThemeScript,
|
|
76
95
|
themeScript: () => themeScript,
|
|
77
96
|
themes: () => themes,
|
|
97
|
+
toast: () => toast,
|
|
78
98
|
useSidebar: () => useSidebar,
|
|
79
|
-
useTheme: () => useTheme
|
|
99
|
+
useTheme: () => useTheme,
|
|
100
|
+
useToast: () => useToast
|
|
80
101
|
});
|
|
81
102
|
module.exports = __toCommonJS(index_exports);
|
|
82
103
|
|
|
@@ -106,7 +127,7 @@ var themes = {
|
|
|
106
127
|
disabled: "opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100"
|
|
107
128
|
},
|
|
108
129
|
select: {
|
|
109
|
-
base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
|
|
130
|
+
base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 text-left transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
|
|
110
131
|
sizes: {
|
|
111
132
|
sm: "px-3 py-1.5 text-sm",
|
|
112
133
|
md: "px-4 py-2.5 text-base",
|
|
@@ -137,7 +158,7 @@ var themes = {
|
|
|
137
158
|
disabled: "opacity-30 cursor-not-allowed hover:bg-transparent"
|
|
138
159
|
},
|
|
139
160
|
select: {
|
|
140
|
-
base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
|
|
161
|
+
base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white text-left transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
|
|
141
162
|
sizes: {
|
|
142
163
|
sm: "px-4 py-2 text-sm uppercase tracking-wide",
|
|
143
164
|
md: "px-4 py-3 text-base uppercase tracking-wide",
|
|
@@ -359,7 +380,7 @@ var Select = ({
|
|
|
359
380
|
children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
360
381
|
"div",
|
|
361
382
|
{
|
|
362
|
-
className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-
|
|
383
|
+
className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-50 dark:bg-gray-700" : ""}`,
|
|
363
384
|
onClick: () => handleSelect(option.value),
|
|
364
385
|
children: option.label
|
|
365
386
|
},
|
|
@@ -1182,41 +1203,270 @@ var DateTimePicker = (0, import_react13.forwardRef)(
|
|
|
1182
1203
|
);
|
|
1183
1204
|
DateTimePicker.displayName = "DateTimePicker";
|
|
1184
1205
|
|
|
1185
|
-
// src/
|
|
1186
|
-
var
|
|
1187
|
-
(
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1206
|
+
// src/components/Radio.tsx
|
|
1207
|
+
var import_react14 = __toESM(require("react"));
|
|
1208
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1209
|
+
var Radio = ({
|
|
1210
|
+
name,
|
|
1211
|
+
options,
|
|
1212
|
+
value: controlledValue,
|
|
1213
|
+
defaultValue,
|
|
1214
|
+
onChange,
|
|
1215
|
+
disabled = false,
|
|
1216
|
+
orientation = "vertical",
|
|
1217
|
+
className = ""
|
|
1218
|
+
}) => {
|
|
1219
|
+
const [internalValue, setInternalValue] = import_react14.default.useState(defaultValue || "");
|
|
1220
|
+
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
1221
|
+
const handleChange = (optionValue) => {
|
|
1222
|
+
if (disabled) return;
|
|
1223
|
+
setInternalValue(optionValue);
|
|
1224
|
+
onChange?.(optionValue);
|
|
1225
|
+
};
|
|
1226
|
+
const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
|
|
1227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
|
|
1228
|
+
const isDisabled = disabled || option.disabled;
|
|
1229
|
+
const isChecked = value === option.value;
|
|
1230
|
+
const id = `${name}-${option.value}`;
|
|
1231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1232
|
+
"label",
|
|
1233
|
+
{
|
|
1234
|
+
htmlFor: id,
|
|
1235
|
+
className: `flex items-center gap-2 cursor-pointer ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
1236
|
+
children: [
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1238
|
+
"input",
|
|
1239
|
+
{
|
|
1240
|
+
type: "radio",
|
|
1241
|
+
id,
|
|
1242
|
+
name,
|
|
1243
|
+
value: option.value,
|
|
1244
|
+
checked: isChecked,
|
|
1245
|
+
onChange: () => handleChange(option.value),
|
|
1246
|
+
disabled: isDisabled,
|
|
1247
|
+
className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed"
|
|
1248
|
+
}
|
|
1249
|
+
),
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
|
|
1251
|
+
]
|
|
1252
|
+
},
|
|
1253
|
+
option.value
|
|
1254
|
+
);
|
|
1255
|
+
}) });
|
|
1256
|
+
};
|
|
1192
1257
|
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1258
|
+
// src/components/ProgressBar.tsx
|
|
1259
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1260
|
+
var ProgressBar = ({
|
|
1261
|
+
value,
|
|
1262
|
+
max = 100,
|
|
1263
|
+
size = "md",
|
|
1264
|
+
variant = "default",
|
|
1265
|
+
showLabel = false,
|
|
1266
|
+
label,
|
|
1267
|
+
className = ""
|
|
1268
|
+
}) => {
|
|
1269
|
+
const percentage = Math.min(Math.max(value / max * 100, 0), 100);
|
|
1270
|
+
const sizeClasses6 = {
|
|
1271
|
+
sm: "h-1",
|
|
1272
|
+
md: "h-2",
|
|
1273
|
+
lg: "h-3"
|
|
1274
|
+
};
|
|
1275
|
+
const variantClasses = {
|
|
1276
|
+
default: "bg-blue-600 dark:bg-blue-500",
|
|
1277
|
+
success: "bg-green-600 dark:bg-green-500",
|
|
1278
|
+
warning: "bg-yellow-500 dark:bg-yellow-400",
|
|
1279
|
+
danger: "bg-red-600 dark:bg-red-500"
|
|
1280
|
+
};
|
|
1281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `w-full ${className}`, children: [
|
|
1282
|
+
(showLabel || label) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [
|
|
1283
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
|
|
1284
|
+
showLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
|
|
1285
|
+
Math.round(percentage),
|
|
1286
|
+
"%"
|
|
1287
|
+
] })
|
|
1288
|
+
] }),
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1290
|
+
"div",
|
|
1291
|
+
{
|
|
1292
|
+
className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses6[size]}`,
|
|
1293
|
+
role: "progressbar",
|
|
1294
|
+
"aria-valuenow": value,
|
|
1295
|
+
"aria-valuemin": 0,
|
|
1296
|
+
"aria-valuemax": max,
|
|
1297
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1298
|
+
"div",
|
|
1299
|
+
{
|
|
1300
|
+
className: `${sizeClasses6[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
|
|
1301
|
+
style: { width: `${percentage}%` }
|
|
1302
|
+
}
|
|
1303
|
+
)
|
|
1304
|
+
}
|
|
1305
|
+
)
|
|
1306
|
+
] });
|
|
1307
|
+
};
|
|
1198
1308
|
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1309
|
+
// src/components/Slider.tsx
|
|
1310
|
+
var import_react15 = __toESM(require("react"));
|
|
1311
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1312
|
+
var Slider = ({
|
|
1313
|
+
value: controlledValue,
|
|
1314
|
+
defaultValue = 50,
|
|
1315
|
+
min = 0,
|
|
1316
|
+
max = 100,
|
|
1317
|
+
step = 1,
|
|
1318
|
+
onChange,
|
|
1319
|
+
disabled = false,
|
|
1320
|
+
showValue = false,
|
|
1321
|
+
label,
|
|
1322
|
+
className = ""
|
|
1323
|
+
}) => {
|
|
1324
|
+
const [internalValue, setInternalValue] = import_react15.default.useState(defaultValue);
|
|
1325
|
+
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
1326
|
+
const handleChange = (e) => {
|
|
1327
|
+
const newValue = Number(e.target.value);
|
|
1328
|
+
setInternalValue(newValue);
|
|
1329
|
+
onChange?.(newValue);
|
|
1330
|
+
};
|
|
1331
|
+
const percentage = (value - min) / (max - min) * 100;
|
|
1332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `w-full ${className}`, children: [
|
|
1333
|
+
(label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
|
|
1334
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
|
|
1335
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
|
|
1336
|
+
] }),
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
|
|
1338
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 h-2 bg-gray-200 dark:bg-gray-700 rounded-full top-1/2 -translate-y-1/2" }),
|
|
1339
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1340
|
+
"div",
|
|
1341
|
+
{
|
|
1342
|
+
className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full top-1/2 -translate-y-1/2 pointer-events-none",
|
|
1343
|
+
style: { width: `${percentage}%` }
|
|
1344
|
+
}
|
|
1345
|
+
),
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1347
|
+
"input",
|
|
1348
|
+
{
|
|
1349
|
+
type: "range",
|
|
1350
|
+
min,
|
|
1351
|
+
max,
|
|
1352
|
+
step,
|
|
1353
|
+
value,
|
|
1354
|
+
onChange: handleChange,
|
|
1355
|
+
disabled,
|
|
1356
|
+
className: "relative w-full h-2 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\n [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4\n [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md\n [&::-webkit-slider-thumb]:hover:bg-blue-700 [&::-webkit-slider-thumb]:active:scale-110 [&::-webkit-slider-thumb]:transition-all\n [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2\n [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:hover:bg-blue-700\n [&::-moz-range-thumb]:active:scale-110 [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:border-none",
|
|
1357
|
+
"aria-label": label,
|
|
1358
|
+
"aria-valuemin": min,
|
|
1359
|
+
"aria-valuemax": max,
|
|
1360
|
+
"aria-valuenow": value
|
|
1361
|
+
}
|
|
1362
|
+
)
|
|
1363
|
+
] })
|
|
1364
|
+
] });
|
|
1365
|
+
};
|
|
1202
1366
|
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1367
|
+
// src/components/Avatar.tsx
|
|
1368
|
+
var import_react16 = __toESM(require("react"));
|
|
1369
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1370
|
+
var Avatar = ({
|
|
1371
|
+
src,
|
|
1372
|
+
alt,
|
|
1373
|
+
name,
|
|
1374
|
+
size = "md",
|
|
1375
|
+
shape = "circle",
|
|
1376
|
+
className = "",
|
|
1377
|
+
fallbackColor = "bg-blue-600"
|
|
1378
|
+
}) => {
|
|
1379
|
+
const [imageError, setImageError] = import_react16.default.useState(false);
|
|
1380
|
+
const sizeClasses6 = {
|
|
1381
|
+
xs: "w-6 h-6 text-xs",
|
|
1382
|
+
sm: "w-8 h-8 text-sm",
|
|
1383
|
+
md: "w-10 h-10 text-base",
|
|
1384
|
+
lg: "w-12 h-12 text-lg",
|
|
1385
|
+
xl: "w-16 h-16 text-2xl"
|
|
1386
|
+
};
|
|
1387
|
+
const shapeClass = shape === "circle" ? "rounded-full" : "rounded-md";
|
|
1388
|
+
const getInitials = (name2) => {
|
|
1389
|
+
const parts = name2.trim().split(" ");
|
|
1390
|
+
if (parts.length >= 2) {
|
|
1391
|
+
return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
|
|
1208
1392
|
}
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
}
|
|
1393
|
+
return name2.slice(0, 2).toUpperCase();
|
|
1394
|
+
};
|
|
1395
|
+
const showImage = src && !imageError;
|
|
1396
|
+
const showInitials = !showImage && name;
|
|
1397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1398
|
+
"div",
|
|
1399
|
+
{
|
|
1400
|
+
className: `${sizeClasses6[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
|
|
1401
|
+
children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1402
|
+
"img",
|
|
1403
|
+
{
|
|
1404
|
+
src,
|
|
1405
|
+
alt: alt || name || "Avatar",
|
|
1406
|
+
className: "w-full h-full object-cover",
|
|
1407
|
+
onError: () => setImageError(true)
|
|
1408
|
+
}
|
|
1409
|
+
) : showInitials ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1410
|
+
"svg",
|
|
1411
|
+
{
|
|
1412
|
+
className: "w-full h-full text-gray-400 dark:text-gray-600",
|
|
1413
|
+
fill: "currentColor",
|
|
1414
|
+
viewBox: "0 0 24 24",
|
|
1415
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
|
|
1416
|
+
}
|
|
1417
|
+
)
|
|
1418
|
+
}
|
|
1419
|
+
);
|
|
1420
|
+
};
|
|
1217
1421
|
|
|
1218
|
-
// src/
|
|
1219
|
-
var
|
|
1422
|
+
// src/components/Textarea.tsx
|
|
1423
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1424
|
+
var Textarea = ({
|
|
1425
|
+
label,
|
|
1426
|
+
error,
|
|
1427
|
+
helperText,
|
|
1428
|
+
size = "md",
|
|
1429
|
+
resize = "vertical",
|
|
1430
|
+
className = "",
|
|
1431
|
+
disabled,
|
|
1432
|
+
...props
|
|
1433
|
+
}) => {
|
|
1434
|
+
const sizeClasses6 = {
|
|
1435
|
+
sm: "px-3 py-1.5 text-sm min-h-[80px]",
|
|
1436
|
+
md: "px-4 py-2 text-base min-h-[100px]",
|
|
1437
|
+
lg: "px-4 py-3 text-lg min-h-[120px]"
|
|
1438
|
+
};
|
|
1439
|
+
const resizeClasses = {
|
|
1440
|
+
none: "resize-none",
|
|
1441
|
+
vertical: "resize-y",
|
|
1442
|
+
horizontal: "resize-x",
|
|
1443
|
+
both: "resize"
|
|
1444
|
+
};
|
|
1445
|
+
const baseClasses = `w-full rounded-lg border transition-colors duration-150 focus:outline-none focus:ring-2
|
|
1446
|
+
${error ? "border-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-400"}
|
|
1447
|
+
bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
|
|
1448
|
+
placeholder:text-gray-500 dark:placeholder:text-gray-400
|
|
1449
|
+
disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-gray-900`;
|
|
1450
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `w-full ${className}`, children: [
|
|
1451
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
|
|
1452
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1453
|
+
"textarea",
|
|
1454
|
+
{
|
|
1455
|
+
className: `${baseClasses} ${sizeClasses6[size]} ${resizeClasses[resize]}`,
|
|
1456
|
+
disabled,
|
|
1457
|
+
...props
|
|
1458
|
+
}
|
|
1459
|
+
),
|
|
1460
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
|
|
1461
|
+
helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
|
|
1462
|
+
] });
|
|
1463
|
+
};
|
|
1464
|
+
|
|
1465
|
+
// src/components/Toast.tsx
|
|
1466
|
+
var import_react17 = require("react");
|
|
1467
|
+
|
|
1468
|
+
// src/icons/icon-utils.tsx
|
|
1469
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1220
1470
|
var sizeClasses5 = {
|
|
1221
1471
|
xs: "w-3 h-3",
|
|
1222
1472
|
sm: "w-4 h-4",
|
|
@@ -1227,7 +1477,7 @@ var sizeClasses5 = {
|
|
|
1227
1477
|
var createIcon = (displayName, path, filled = false) => {
|
|
1228
1478
|
const Icon = ({ size = "md", className = "", color = "currentColor" }) => {
|
|
1229
1479
|
const sizeClass = sizeClasses5[size];
|
|
1230
|
-
return /* @__PURE__ */ (0,
|
|
1480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1231
1481
|
"svg",
|
|
1232
1482
|
{
|
|
1233
1483
|
className: `${sizeClass} ${className}`,
|
|
@@ -1242,141 +1492,596 @@ var createIcon = (displayName, path, filled = false) => {
|
|
|
1242
1492
|
Icon.displayName = displayName;
|
|
1243
1493
|
return Icon;
|
|
1244
1494
|
};
|
|
1495
|
+
|
|
1496
|
+
// src/icons/HomeIcon.tsx
|
|
1497
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1245
1498
|
var HomeIcon = createIcon(
|
|
1246
1499
|
"HomeIcon",
|
|
1247
|
-
/* @__PURE__ */ (0,
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" })
|
|
1248
1501
|
);
|
|
1502
|
+
|
|
1503
|
+
// src/icons/UserIcon.tsx
|
|
1504
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1249
1505
|
var UserIcon = createIcon(
|
|
1250
1506
|
"UserIcon",
|
|
1251
|
-
/* @__PURE__ */ (0,
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" })
|
|
1252
1508
|
);
|
|
1509
|
+
|
|
1510
|
+
// src/icons/SearchIcon.tsx
|
|
1511
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1253
1512
|
var SearchIcon = createIcon(
|
|
1254
1513
|
"SearchIcon",
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1514
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
|
|
1256
1515
|
);
|
|
1516
|
+
|
|
1517
|
+
// src/icons/BellIcon.tsx
|
|
1518
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1257
1519
|
var BellIcon = createIcon(
|
|
1258
1520
|
"BellIcon",
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
1521
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" })
|
|
1260
1522
|
);
|
|
1523
|
+
|
|
1524
|
+
// src/icons/SettingsIcon.tsx
|
|
1525
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1261
1526
|
var SettingsIcon = createIcon(
|
|
1262
1527
|
"SettingsIcon",
|
|
1263
|
-
/* @__PURE__ */ (0,
|
|
1264
|
-
/* @__PURE__ */ (0,
|
|
1265
|
-
/* @__PURE__ */ (0,
|
|
1528
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
1529
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1530
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1266
1531
|
] })
|
|
1267
1532
|
);
|
|
1533
|
+
|
|
1534
|
+
// src/icons/MenuIcon.tsx
|
|
1535
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1268
1536
|
var MenuIcon = createIcon(
|
|
1269
1537
|
"MenuIcon",
|
|
1270
|
-
/* @__PURE__ */ (0,
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
|
|
1271
1539
|
);
|
|
1540
|
+
|
|
1541
|
+
// src/icons/CloseIcon.tsx
|
|
1542
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1272
1543
|
var CloseIcon = createIcon(
|
|
1273
1544
|
"CloseIcon",
|
|
1274
|
-
/* @__PURE__ */ (0,
|
|
1545
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
|
|
1275
1546
|
);
|
|
1547
|
+
|
|
1548
|
+
// src/icons/ChevronDownIcon.tsx
|
|
1549
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1276
1550
|
var ChevronDownIcon = createIcon(
|
|
1277
1551
|
"ChevronDownIcon",
|
|
1278
|
-
/* @__PURE__ */ (0,
|
|
1552
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
|
|
1279
1553
|
);
|
|
1554
|
+
|
|
1555
|
+
// src/icons/ChevronRightIcon.tsx
|
|
1556
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1280
1557
|
var ChevronRightIcon = createIcon(
|
|
1281
1558
|
"ChevronRightIcon",
|
|
1282
|
-
/* @__PURE__ */ (0,
|
|
1559
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
|
|
1283
1560
|
);
|
|
1561
|
+
|
|
1562
|
+
// src/icons/CheckIcon.tsx
|
|
1563
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1284
1564
|
var CheckIcon = createIcon(
|
|
1285
1565
|
"CheckIcon",
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1566
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
|
|
1287
1567
|
);
|
|
1568
|
+
|
|
1569
|
+
// src/icons/PlusIcon.tsx
|
|
1570
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1288
1571
|
var PlusIcon = createIcon(
|
|
1289
1572
|
"PlusIcon",
|
|
1290
|
-
/* @__PURE__ */ (0,
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
|
|
1291
1574
|
);
|
|
1575
|
+
|
|
1576
|
+
// src/icons/TrashIcon.tsx
|
|
1577
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1292
1578
|
var TrashIcon = createIcon(
|
|
1293
1579
|
"TrashIcon",
|
|
1294
|
-
/* @__PURE__ */ (0,
|
|
1580
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" })
|
|
1295
1581
|
);
|
|
1582
|
+
|
|
1583
|
+
// src/icons/EditIcon.tsx
|
|
1584
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
1296
1585
|
var EditIcon = createIcon(
|
|
1297
1586
|
"EditIcon",
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1587
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" })
|
|
1299
1588
|
);
|
|
1589
|
+
|
|
1590
|
+
// src/icons/MailIcon.tsx
|
|
1591
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
1300
1592
|
var MailIcon = createIcon(
|
|
1301
1593
|
"MailIcon",
|
|
1302
|
-
/* @__PURE__ */ (0,
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" })
|
|
1303
1595
|
);
|
|
1596
|
+
|
|
1597
|
+
// src/icons/StarIcon.tsx
|
|
1598
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
1304
1599
|
var StarIcon = createIcon(
|
|
1305
1600
|
"StarIcon",
|
|
1306
|
-
/* @__PURE__ */ (0,
|
|
1601
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })
|
|
1307
1602
|
);
|
|
1603
|
+
|
|
1604
|
+
// src/icons/HeartIcon.tsx
|
|
1605
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
1308
1606
|
var HeartIcon = createIcon(
|
|
1309
1607
|
"HeartIcon",
|
|
1310
|
-
/* @__PURE__ */ (0,
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" })
|
|
1311
1609
|
);
|
|
1610
|
+
|
|
1611
|
+
// src/icons/DownloadIcon.tsx
|
|
1612
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
1312
1613
|
var DownloadIcon = createIcon(
|
|
1313
1614
|
"DownloadIcon",
|
|
1314
|
-
/* @__PURE__ */ (0,
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" })
|
|
1315
1616
|
);
|
|
1617
|
+
|
|
1618
|
+
// src/icons/UploadIcon.tsx
|
|
1619
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
1316
1620
|
var UploadIcon = createIcon(
|
|
1317
1621
|
"UploadIcon",
|
|
1318
|
-
/* @__PURE__ */ (0,
|
|
1622
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" })
|
|
1319
1623
|
);
|
|
1624
|
+
|
|
1625
|
+
// src/icons/CameraIcon.tsx
|
|
1626
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
1320
1627
|
var CameraIcon = createIcon(
|
|
1321
1628
|
"CameraIcon",
|
|
1322
|
-
/* @__PURE__ */ (0,
|
|
1323
|
-
/* @__PURE__ */ (0,
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1629
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1325
1632
|
] })
|
|
1326
1633
|
);
|
|
1634
|
+
|
|
1635
|
+
// src/icons/LockIcon.tsx
|
|
1636
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
1327
1637
|
var LockIcon = createIcon(
|
|
1328
1638
|
"LockIcon",
|
|
1329
|
-
/* @__PURE__ */ (0,
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" })
|
|
1330
1640
|
);
|
|
1641
|
+
|
|
1642
|
+
// src/icons/CalendarIcon.tsx
|
|
1643
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
1331
1644
|
var CalendarIcon = createIcon(
|
|
1332
1645
|
"CalendarIcon",
|
|
1333
|
-
/* @__PURE__ */ (0,
|
|
1646
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })
|
|
1334
1647
|
);
|
|
1648
|
+
|
|
1649
|
+
// src/icons/GoogleIcon.tsx
|
|
1650
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
1335
1651
|
var GoogleIcon = createIcon(
|
|
1336
1652
|
"GoogleIcon",
|
|
1337
|
-
/* @__PURE__ */ (0,
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }),
|
|
1338
1654
|
true
|
|
1339
1655
|
);
|
|
1656
|
+
|
|
1657
|
+
// src/icons/GitHubIcon.tsx
|
|
1658
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
1340
1659
|
var GitHubIcon = createIcon(
|
|
1341
1660
|
"GitHubIcon",
|
|
1342
|
-
/* @__PURE__ */ (0,
|
|
1661
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }),
|
|
1343
1662
|
true
|
|
1344
1663
|
);
|
|
1664
|
+
|
|
1665
|
+
// src/icons/TwitterIcon.tsx
|
|
1666
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
1345
1667
|
var TwitterIcon = createIcon(
|
|
1346
1668
|
"TwitterIcon",
|
|
1347
|
-
/* @__PURE__ */ (0,
|
|
1669
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
|
|
1348
1670
|
true
|
|
1349
1671
|
);
|
|
1672
|
+
|
|
1673
|
+
// src/icons/FacebookIcon.tsx
|
|
1674
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
1350
1675
|
var FacebookIcon = createIcon(
|
|
1351
1676
|
"FacebookIcon",
|
|
1352
|
-
/* @__PURE__ */ (0,
|
|
1677
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" }),
|
|
1353
1678
|
true
|
|
1354
1679
|
);
|
|
1680
|
+
|
|
1681
|
+
// src/icons/AppleIcon.tsx
|
|
1682
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
1355
1683
|
var AppleIcon = createIcon(
|
|
1356
1684
|
"AppleIcon",
|
|
1357
|
-
/* @__PURE__ */ (0,
|
|
1685
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }),
|
|
1358
1686
|
true
|
|
1359
1687
|
);
|
|
1688
|
+
|
|
1689
|
+
// src/icons/LinkedInIcon.tsx
|
|
1690
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
1360
1691
|
var LinkedInIcon = createIcon(
|
|
1361
1692
|
"LinkedInIcon",
|
|
1362
|
-
/* @__PURE__ */ (0,
|
|
1693
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }),
|
|
1363
1694
|
true
|
|
1364
1695
|
);
|
|
1696
|
+
|
|
1697
|
+
// src/icons/YouTubeIcon.tsx
|
|
1698
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
1365
1699
|
var YouTubeIcon = createIcon(
|
|
1366
1700
|
"YouTubeIcon",
|
|
1367
|
-
/* @__PURE__ */ (0,
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }),
|
|
1368
1702
|
true
|
|
1369
1703
|
);
|
|
1704
|
+
|
|
1705
|
+
// src/icons/SlackIcon.tsx
|
|
1706
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
1370
1707
|
var SlackIcon = createIcon(
|
|
1371
1708
|
"SlackIcon",
|
|
1372
|
-
/* @__PURE__ */ (0,
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { d: "M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" }),
|
|
1373
1710
|
true
|
|
1374
1711
|
);
|
|
1712
|
+
|
|
1713
|
+
// src/components/Toast.tsx
|
|
1714
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
1715
|
+
var ToastContext = (0, import_react17.createContext)(void 0);
|
|
1716
|
+
var useToast = () => {
|
|
1717
|
+
const context = (0, import_react17.useContext)(ToastContext);
|
|
1718
|
+
if (!context) {
|
|
1719
|
+
throw new Error("useToast must be used within a ToastProvider");
|
|
1720
|
+
}
|
|
1721
|
+
return context;
|
|
1722
|
+
};
|
|
1723
|
+
var ToastProvider = ({ children, position = "top-right" }) => {
|
|
1724
|
+
const [toasts, setToasts] = (0, import_react17.useState)([]);
|
|
1725
|
+
const addToast = (0, import_react17.useCallback)((toast2) => {
|
|
1726
|
+
const id = Math.random().toString(36).substring(7);
|
|
1727
|
+
const newToast = { ...toast2, id };
|
|
1728
|
+
setToasts((prev) => [...prev, newToast]);
|
|
1729
|
+
const duration = toast2.duration || 5e3;
|
|
1730
|
+
setTimeout(() => {
|
|
1731
|
+
removeToast(id);
|
|
1732
|
+
}, duration);
|
|
1733
|
+
}, []);
|
|
1734
|
+
const removeToast = (0, import_react17.useCallback)((id) => {
|
|
1735
|
+
setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
|
|
1736
|
+
}, []);
|
|
1737
|
+
const positionClasses2 = {
|
|
1738
|
+
"top-right": "top-4 right-4",
|
|
1739
|
+
"top-left": "top-4 left-4",
|
|
1740
|
+
"bottom-right": "bottom-4 right-4",
|
|
1741
|
+
"bottom-left": "bottom-4 left-4",
|
|
1742
|
+
"top-center": "top-4 left-1/2 -translate-x-1/2",
|
|
1743
|
+
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
|
|
1744
|
+
};
|
|
1745
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
|
|
1746
|
+
children,
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
|
|
1748
|
+
] });
|
|
1749
|
+
};
|
|
1750
|
+
var ToastItem = ({ toast: toast2, onClose }) => {
|
|
1751
|
+
const typeStyles = {
|
|
1752
|
+
success: "bg-green-50 dark:bg-green-900/30 border-green-500 text-green-800 dark:text-green-200",
|
|
1753
|
+
error: "bg-red-50 dark:bg-red-900/30 border-red-500 text-red-800 dark:text-red-200",
|
|
1754
|
+
warning: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 text-yellow-800 dark:text-yellow-200",
|
|
1755
|
+
info: "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-800 dark:text-blue-200"
|
|
1756
|
+
};
|
|
1757
|
+
const typeIcons = {
|
|
1758
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
|
|
1759
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
|
|
1760
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
1761
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
|
|
1762
|
+
};
|
|
1763
|
+
const type = toast2.type || "info";
|
|
1764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
1765
|
+
"div",
|
|
1766
|
+
{
|
|
1767
|
+
className: `flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-lg backdrop-blur-sm ${typeStyles[type]} animate-slide-in`,
|
|
1768
|
+
role: "alert",
|
|
1769
|
+
children: [
|
|
1770
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
|
|
1771
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
1773
|
+
"button",
|
|
1774
|
+
{
|
|
1775
|
+
onClick: onClose,
|
|
1776
|
+
className: "flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors",
|
|
1777
|
+
"aria-label": "Close",
|
|
1778
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { size: "sm" })
|
|
1779
|
+
}
|
|
1780
|
+
)
|
|
1781
|
+
]
|
|
1782
|
+
}
|
|
1783
|
+
);
|
|
1784
|
+
};
|
|
1785
|
+
var toast = {
|
|
1786
|
+
success: (message, duration) => ({
|
|
1787
|
+
message,
|
|
1788
|
+
type: "success",
|
|
1789
|
+
duration
|
|
1790
|
+
}),
|
|
1791
|
+
error: (message, duration) => ({
|
|
1792
|
+
message,
|
|
1793
|
+
type: "error",
|
|
1794
|
+
duration
|
|
1795
|
+
}),
|
|
1796
|
+
warning: (message, duration) => ({
|
|
1797
|
+
message,
|
|
1798
|
+
type: "warning",
|
|
1799
|
+
duration
|
|
1800
|
+
}),
|
|
1801
|
+
info: (message, duration) => ({
|
|
1802
|
+
message,
|
|
1803
|
+
type: "info",
|
|
1804
|
+
duration
|
|
1805
|
+
})
|
|
1806
|
+
};
|
|
1807
|
+
|
|
1808
|
+
// src/components/Stepper.tsx
|
|
1809
|
+
var import_react18 = __toESM(require("react"));
|
|
1810
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
1811
|
+
var Stepper = ({
|
|
1812
|
+
steps,
|
|
1813
|
+
currentStep,
|
|
1814
|
+
orientation = "horizontal",
|
|
1815
|
+
className = ""
|
|
1816
|
+
}) => {
|
|
1817
|
+
const isHorizontal = orientation === "horizontal";
|
|
1818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
|
|
1819
|
+
const stepNumber = index + 1;
|
|
1820
|
+
const isActive = stepNumber === currentStep;
|
|
1821
|
+
const isCompleted = stepNumber < currentStep;
|
|
1822
|
+
const isLast = index === steps.length - 1;
|
|
1823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react18.default.Fragment, { children: [
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
1826
|
+
"div",
|
|
1827
|
+
{
|
|
1828
|
+
className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
|
|
1829
|
+
children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
1830
|
+
"span",
|
|
1831
|
+
{
|
|
1832
|
+
className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
|
|
1833
|
+
children: stepNumber
|
|
1834
|
+
}
|
|
1835
|
+
)
|
|
1836
|
+
}
|
|
1837
|
+
) }),
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
|
|
1839
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
1840
|
+
"p",
|
|
1841
|
+
{
|
|
1842
|
+
className: `text-sm font-medium ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
|
|
1843
|
+
children: step.label
|
|
1844
|
+
}
|
|
1845
|
+
),
|
|
1846
|
+
step.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
|
|
1847
|
+
] })
|
|
1848
|
+
] }),
|
|
1849
|
+
!isLast && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
1850
|
+
"div",
|
|
1851
|
+
{
|
|
1852
|
+
className: `${isHorizontal ? "flex-1 h-0.5 mx-4" : "w-0.5 h-full ml-5 -mt-8"} ${isCompleted || isActive && stepNumber < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
|
|
1853
|
+
}
|
|
1854
|
+
)
|
|
1855
|
+
] }, index);
|
|
1856
|
+
}) });
|
|
1857
|
+
};
|
|
1858
|
+
|
|
1859
|
+
// src/components/Divider.tsx
|
|
1860
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
1861
|
+
var Divider = ({
|
|
1862
|
+
orientation = "horizontal",
|
|
1863
|
+
variant = "solid",
|
|
1864
|
+
className = "",
|
|
1865
|
+
label,
|
|
1866
|
+
labelPosition = "center"
|
|
1867
|
+
}) => {
|
|
1868
|
+
const variantClasses = {
|
|
1869
|
+
solid: "border-solid",
|
|
1870
|
+
dashed: "border-dashed",
|
|
1871
|
+
dotted: "border-dotted"
|
|
1872
|
+
};
|
|
1873
|
+
if (label && orientation === "horizontal") {
|
|
1874
|
+
const alignmentClasses = {
|
|
1875
|
+
left: "justify-start",
|
|
1876
|
+
center: "justify-center",
|
|
1877
|
+
right: "justify-end"
|
|
1878
|
+
};
|
|
1879
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
|
|
1880
|
+
labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
|
|
1881
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
|
|
1882
|
+
labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
|
|
1883
|
+
] });
|
|
1884
|
+
}
|
|
1885
|
+
if (orientation === "vertical") {
|
|
1886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
1887
|
+
"div",
|
|
1888
|
+
{
|
|
1889
|
+
className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
|
|
1890
|
+
role: "separator",
|
|
1891
|
+
"aria-orientation": "vertical"
|
|
1892
|
+
}
|
|
1893
|
+
);
|
|
1894
|
+
}
|
|
1895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
1896
|
+
"hr",
|
|
1897
|
+
{
|
|
1898
|
+
className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
|
|
1899
|
+
role: "separator"
|
|
1900
|
+
}
|
|
1901
|
+
);
|
|
1902
|
+
};
|
|
1903
|
+
|
|
1904
|
+
// src/components/FileUpload.tsx
|
|
1905
|
+
var import_react19 = require("react");
|
|
1906
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
1907
|
+
var FileUpload = ({
|
|
1908
|
+
accept,
|
|
1909
|
+
multiple = false,
|
|
1910
|
+
maxSize,
|
|
1911
|
+
maxFiles = 10,
|
|
1912
|
+
disabled = false,
|
|
1913
|
+
onChange,
|
|
1914
|
+
onError,
|
|
1915
|
+
className = "",
|
|
1916
|
+
label,
|
|
1917
|
+
helperText
|
|
1918
|
+
}) => {
|
|
1919
|
+
const [files, setFiles] = (0, import_react19.useState)([]);
|
|
1920
|
+
const [isDragging, setIsDragging] = (0, import_react19.useState)(false);
|
|
1921
|
+
const fileInputRef = (0, import_react19.useRef)(null);
|
|
1922
|
+
const formatFileSize = (bytes) => {
|
|
1923
|
+
if (bytes === 0) return "0 Bytes";
|
|
1924
|
+
const k = 1024;
|
|
1925
|
+
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
1926
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
1927
|
+
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
|
|
1928
|
+
};
|
|
1929
|
+
const validateFiles = (fileList) => {
|
|
1930
|
+
const validFiles = [];
|
|
1931
|
+
const filesArray = Array.from(fileList);
|
|
1932
|
+
if (filesArray.length + files.length > maxFiles) {
|
|
1933
|
+
onError?.(`Maximum ${maxFiles} files allowed`);
|
|
1934
|
+
return validFiles;
|
|
1935
|
+
}
|
|
1936
|
+
for (const file of filesArray) {
|
|
1937
|
+
if (maxSize && file.size > maxSize) {
|
|
1938
|
+
onError?.(`File ${file.name} exceeds maximum size of ${formatFileSize(maxSize)}`);
|
|
1939
|
+
continue;
|
|
1940
|
+
}
|
|
1941
|
+
validFiles.push(file);
|
|
1942
|
+
}
|
|
1943
|
+
return validFiles;
|
|
1944
|
+
};
|
|
1945
|
+
const handleFiles = (fileList) => {
|
|
1946
|
+
if (!fileList || disabled) return;
|
|
1947
|
+
const validFiles = validateFiles(fileList);
|
|
1948
|
+
if (validFiles.length > 0) {
|
|
1949
|
+
const newFiles = multiple ? [...files, ...validFiles] : validFiles;
|
|
1950
|
+
setFiles(newFiles);
|
|
1951
|
+
onChange?.(newFiles);
|
|
1952
|
+
}
|
|
1953
|
+
};
|
|
1954
|
+
const handleDrop = (e) => {
|
|
1955
|
+
e.preventDefault();
|
|
1956
|
+
setIsDragging(false);
|
|
1957
|
+
handleFiles(e.dataTransfer.files);
|
|
1958
|
+
};
|
|
1959
|
+
const handleDragOver = (e) => {
|
|
1960
|
+
e.preventDefault();
|
|
1961
|
+
if (!disabled) {
|
|
1962
|
+
setIsDragging(true);
|
|
1963
|
+
}
|
|
1964
|
+
};
|
|
1965
|
+
const handleDragLeave = (e) => {
|
|
1966
|
+
e.preventDefault();
|
|
1967
|
+
setIsDragging(false);
|
|
1968
|
+
};
|
|
1969
|
+
const handleClick = () => {
|
|
1970
|
+
if (!disabled) {
|
|
1971
|
+
fileInputRef.current?.click();
|
|
1972
|
+
}
|
|
1973
|
+
};
|
|
1974
|
+
const handleRemoveFile = (index) => {
|
|
1975
|
+
const newFiles = files.filter((_, i) => i !== index);
|
|
1976
|
+
setFiles(newFiles);
|
|
1977
|
+
onChange?.(newFiles);
|
|
1978
|
+
};
|
|
1979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `w-full ${className}`, children: [
|
|
1980
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
|
|
1981
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
1982
|
+
"div",
|
|
1983
|
+
{
|
|
1984
|
+
onDrop: handleDrop,
|
|
1985
|
+
onDragOver: handleDragOver,
|
|
1986
|
+
onDragLeave: handleDragLeave,
|
|
1987
|
+
onClick: handleClick,
|
|
1988
|
+
className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
1989
|
+
children: [
|
|
1990
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
1991
|
+
"input",
|
|
1992
|
+
{
|
|
1993
|
+
ref: fileInputRef,
|
|
1994
|
+
type: "file",
|
|
1995
|
+
accept,
|
|
1996
|
+
multiple,
|
|
1997
|
+
onChange: (e) => handleFiles(e.target.files),
|
|
1998
|
+
disabled,
|
|
1999
|
+
className: "hidden"
|
|
2000
|
+
}
|
|
2001
|
+
),
|
|
2002
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
|
|
2003
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
|
|
2004
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
|
|
2005
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
|
|
2006
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
|
|
2007
|
+
" or drag and drop"
|
|
2008
|
+
] }),
|
|
2009
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
|
|
2010
|
+
accept ? `Accepted: ${accept}` : "Any file type",
|
|
2011
|
+
maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
|
|
2012
|
+
] })
|
|
2013
|
+
] })
|
|
2014
|
+
] })
|
|
2015
|
+
]
|
|
2016
|
+
}
|
|
2017
|
+
),
|
|
2018
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
|
|
2019
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
2020
|
+
"div",
|
|
2021
|
+
{
|
|
2022
|
+
className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
|
|
2023
|
+
children: [
|
|
2024
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-1 min-w-0", children: [
|
|
2025
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
|
|
2026
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
|
|
2027
|
+
] }),
|
|
2028
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
2029
|
+
"button",
|
|
2030
|
+
{
|
|
2031
|
+
onClick: (e) => {
|
|
2032
|
+
e.stopPropagation();
|
|
2033
|
+
handleRemoveFile(index);
|
|
2034
|
+
},
|
|
2035
|
+
className: "ml-4 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors",
|
|
2036
|
+
"aria-label": "Remove file",
|
|
2037
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CloseIcon, { size: "sm" })
|
|
2038
|
+
}
|
|
2039
|
+
)
|
|
2040
|
+
]
|
|
2041
|
+
},
|
|
2042
|
+
index
|
|
2043
|
+
)) })
|
|
2044
|
+
] });
|
|
2045
|
+
};
|
|
2046
|
+
|
|
2047
|
+
// src/utils/theme-script.ts
|
|
2048
|
+
var themeScript = `
|
|
2049
|
+
(function() {
|
|
2050
|
+
try {
|
|
2051
|
+
// Get stored preferences
|
|
2052
|
+
const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
|
|
2053
|
+
const storedColorMode = localStorage.getItem('lite-ui-color-mode');
|
|
2054
|
+
|
|
2055
|
+
// Determine color mode (system, light, or dark)
|
|
2056
|
+
let colorMode = storedColorMode;
|
|
2057
|
+
if (!colorMode || colorMode === 'system') {
|
|
2058
|
+
colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
2059
|
+
}
|
|
2060
|
+
|
|
2061
|
+
// Set attributes before render
|
|
2062
|
+
document.documentElement.setAttribute('data-theme', storedTheme);
|
|
2063
|
+
document.documentElement.setAttribute('data-color-mode', colorMode);
|
|
2064
|
+
|
|
2065
|
+
// Add dark class for Tailwind
|
|
2066
|
+
if (colorMode === 'dark') {
|
|
2067
|
+
document.documentElement.classList.add('dark');
|
|
2068
|
+
} else {
|
|
2069
|
+
document.documentElement.classList.remove('dark');
|
|
2070
|
+
}
|
|
2071
|
+
} catch (e) {
|
|
2072
|
+
console.error('Failed to initialize theme:', e);
|
|
2073
|
+
}
|
|
2074
|
+
})();
|
|
2075
|
+
`;
|
|
2076
|
+
function getThemeScript() {
|
|
2077
|
+
return themeScript;
|
|
2078
|
+
}
|
|
1375
2079
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1376
2080
|
0 && (module.exports = {
|
|
1377
2081
|
ActionMenu,
|
|
1378
2082
|
Alert,
|
|
1379
2083
|
AppleIcon,
|
|
2084
|
+
Avatar,
|
|
1380
2085
|
Badge,
|
|
1381
2086
|
BellIcon,
|
|
1382
2087
|
Button,
|
|
@@ -1390,10 +2095,12 @@ var SlackIcon = createIcon(
|
|
|
1390
2095
|
CloseIcon,
|
|
1391
2096
|
DatePicker,
|
|
1392
2097
|
DateTimePicker,
|
|
2098
|
+
Divider,
|
|
1393
2099
|
DownloadIcon,
|
|
1394
2100
|
Drawer,
|
|
1395
2101
|
EditIcon,
|
|
1396
2102
|
FacebookIcon,
|
|
2103
|
+
FileUpload,
|
|
1397
2104
|
GitHubIcon,
|
|
1398
2105
|
GoogleIcon,
|
|
1399
2106
|
HeartIcon,
|
|
@@ -1406,19 +2113,25 @@ var SlackIcon = createIcon(
|
|
|
1406
2113
|
Navbar,
|
|
1407
2114
|
Pagination,
|
|
1408
2115
|
PlusIcon,
|
|
2116
|
+
ProgressBar,
|
|
2117
|
+
Radio,
|
|
1409
2118
|
SearchIcon,
|
|
1410
2119
|
Select,
|
|
1411
2120
|
SettingsIcon,
|
|
1412
2121
|
Sidebar,
|
|
1413
2122
|
SidebarProvider,
|
|
1414
2123
|
SlackIcon,
|
|
2124
|
+
Slider,
|
|
1415
2125
|
Spinner,
|
|
1416
2126
|
StarIcon,
|
|
2127
|
+
Stepper,
|
|
1417
2128
|
Table,
|
|
1418
2129
|
Tabs,
|
|
1419
2130
|
TextInput,
|
|
2131
|
+
Textarea,
|
|
1420
2132
|
ThemeProvider,
|
|
1421
2133
|
TimePicker,
|
|
2134
|
+
ToastProvider,
|
|
1422
2135
|
Toggle,
|
|
1423
2136
|
TrashIcon,
|
|
1424
2137
|
TwitterIcon,
|
|
@@ -1428,7 +2141,9 @@ var SlackIcon = createIcon(
|
|
|
1428
2141
|
getThemeScript,
|
|
1429
2142
|
themeScript,
|
|
1430
2143
|
themes,
|
|
2144
|
+
toast,
|
|
1431
2145
|
useSidebar,
|
|
1432
|
-
useTheme
|
|
2146
|
+
useTheme,
|
|
2147
|
+
useToast
|
|
1433
2148
|
});
|
|
1434
2149
|
//# sourceMappingURL=index.js.map
|