virtuo-ui-library 1.0.10 → 1.0.11
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.js +157 -0
- package/dist/index.mjs +156 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ __export(index_exports, {
|
|
|
32
32
|
Button: () => Button,
|
|
33
33
|
Card: () => Card,
|
|
34
34
|
EcommerceCard: () => EcommerceCard,
|
|
35
|
+
LoginForm: () => LoginForm,
|
|
35
36
|
NavBar: () => NavBar,
|
|
36
37
|
ProfileCard: () => ProfileCard,
|
|
37
38
|
SideBar: () => SideBar
|
|
@@ -489,11 +490,167 @@ var SideBar = ({
|
|
|
489
490
|
background: "rgba(255,255,255,0.1)"
|
|
490
491
|
} }), /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
|
|
491
492
|
};
|
|
493
|
+
|
|
494
|
+
// src/components/LoginForm/LoginForm.jsx
|
|
495
|
+
var import_react7 = __toESM(require("react"));
|
|
496
|
+
var LoginForm = ({
|
|
497
|
+
title = "Welcome back",
|
|
498
|
+
subtitle = "Sign in to your account",
|
|
499
|
+
emailLabel = "Email address",
|
|
500
|
+
passwordLabel = "Password",
|
|
501
|
+
rememberLabel = "Remember me",
|
|
502
|
+
forgotLabel = "Forgot password?",
|
|
503
|
+
submitText = "Sign in",
|
|
504
|
+
noAccountText = "Don't have an account?",
|
|
505
|
+
signupText = "Sign up",
|
|
506
|
+
accent = "#6366f1",
|
|
507
|
+
bg = "#1e293b",
|
|
508
|
+
onSubmit = (email, password) => console.log(email, password),
|
|
509
|
+
onForgotClick = () => {
|
|
510
|
+
},
|
|
511
|
+
onSignupClick = () => {
|
|
512
|
+
}
|
|
513
|
+
}) => {
|
|
514
|
+
const [email, setEmail] = (0, import_react7.useState)("");
|
|
515
|
+
const [password, setPassword] = (0, import_react7.useState)("");
|
|
516
|
+
const [remember, setRemember] = (0, import_react7.useState)(false);
|
|
517
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
|
|
518
|
+
const alpha = (hex, op) => {
|
|
519
|
+
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
520
|
+
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
521
|
+
};
|
|
522
|
+
const handleSubmit = (e) => {
|
|
523
|
+
e.preventDefault();
|
|
524
|
+
setIsSubmitting(true);
|
|
525
|
+
setTimeout(() => {
|
|
526
|
+
onSubmit(email, password);
|
|
527
|
+
setIsSubmitting(false);
|
|
528
|
+
}, 1e3);
|
|
529
|
+
};
|
|
530
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
531
|
+
background: bg,
|
|
532
|
+
borderRadius: "16px",
|
|
533
|
+
padding: "32px",
|
|
534
|
+
width: "360px",
|
|
535
|
+
border: "1px solid rgba(255,255,255,0.08)",
|
|
536
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
|
|
537
|
+
fontFamily: "system-ui,sans-serif"
|
|
538
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { fontSize: "22px", fontWeight: "700", color: "#fff", margin: "0 0 6px" } }, title), /* @__PURE__ */ import_react7.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)", margin: 0 } }, subtitle)), /* @__PURE__ */ import_react7.default.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, emailLabel), /* @__PURE__ */ import_react7.default.createElement(
|
|
539
|
+
"input",
|
|
540
|
+
{
|
|
541
|
+
type: "email",
|
|
542
|
+
value: email,
|
|
543
|
+
onChange: (e) => setEmail(e.target.value),
|
|
544
|
+
required: true,
|
|
545
|
+
style: {
|
|
546
|
+
width: "100%",
|
|
547
|
+
padding: "12px 14px",
|
|
548
|
+
borderRadius: "10px",
|
|
549
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
550
|
+
background: "rgba(255,255,255,0.05)",
|
|
551
|
+
color: "#fff",
|
|
552
|
+
fontSize: "14px",
|
|
553
|
+
outline: "none",
|
|
554
|
+
transition: "border-color 0.2s",
|
|
555
|
+
boxSizing: "border-box"
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
)), /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, passwordLabel), /* @__PURE__ */ import_react7.default.createElement(
|
|
559
|
+
"input",
|
|
560
|
+
{
|
|
561
|
+
type: "password",
|
|
562
|
+
value: password,
|
|
563
|
+
onChange: (e) => setPassword(e.target.value),
|
|
564
|
+
required: true,
|
|
565
|
+
style: {
|
|
566
|
+
width: "100%",
|
|
567
|
+
padding: "12px 14px",
|
|
568
|
+
borderRadius: "10px",
|
|
569
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
570
|
+
background: "rgba(255,255,255,0.05)",
|
|
571
|
+
color: "#fff",
|
|
572
|
+
fontSize: "14px",
|
|
573
|
+
outline: "none",
|
|
574
|
+
transition: "border-color 0.2s",
|
|
575
|
+
boxSizing: "border-box"
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
)), /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", color: "rgba(255,255,255,0.7)", cursor: "pointer" } }, /* @__PURE__ */ import_react7.default.createElement(
|
|
579
|
+
"input",
|
|
580
|
+
{
|
|
581
|
+
type: "checkbox",
|
|
582
|
+
checked: remember,
|
|
583
|
+
onChange: (e) => setRemember(e.target.checked),
|
|
584
|
+
style: {
|
|
585
|
+
width: "16px",
|
|
586
|
+
height: "16px",
|
|
587
|
+
borderRadius: "4px",
|
|
588
|
+
border: "1px solid " + alpha(accent, 0.5),
|
|
589
|
+
background: remember ? accent : "transparent",
|
|
590
|
+
cursor: "pointer"
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
), rememberLabel), /* @__PURE__ */ import_react7.default.createElement(
|
|
594
|
+
"button",
|
|
595
|
+
{
|
|
596
|
+
type: "button",
|
|
597
|
+
onClick: onForgotClick,
|
|
598
|
+
style: {
|
|
599
|
+
background: "none",
|
|
600
|
+
border: "none",
|
|
601
|
+
color: accent,
|
|
602
|
+
fontSize: "13px",
|
|
603
|
+
fontWeight: "600",
|
|
604
|
+
cursor: "pointer",
|
|
605
|
+
padding: 0
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
forgotLabel
|
|
609
|
+
)), /* @__PURE__ */ import_react7.default.createElement(
|
|
610
|
+
"button",
|
|
611
|
+
{
|
|
612
|
+
type: "submit",
|
|
613
|
+
disabled: isSubmitting,
|
|
614
|
+
style: {
|
|
615
|
+
width: "100%",
|
|
616
|
+
padding: "14px",
|
|
617
|
+
borderRadius: "10px",
|
|
618
|
+
border: "none",
|
|
619
|
+
background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
|
|
620
|
+
color: "#fff",
|
|
621
|
+
fontSize: "14px",
|
|
622
|
+
fontWeight: "700",
|
|
623
|
+
cursor: "pointer",
|
|
624
|
+
opacity: isSubmitting ? 0.8 : 1,
|
|
625
|
+
transition: "opacity 0.2s",
|
|
626
|
+
marginBottom: "20px"
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
isSubmitting ? "Signing in..." : submitText
|
|
630
|
+
), /* @__PURE__ */ import_react7.default.createElement("div", { style: { textAlign: "center", fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, noAccountText, /* @__PURE__ */ import_react7.default.createElement(
|
|
631
|
+
"button",
|
|
632
|
+
{
|
|
633
|
+
type: "button",
|
|
634
|
+
onClick: onSignupClick,
|
|
635
|
+
style: {
|
|
636
|
+
background: "none",
|
|
637
|
+
border: "none",
|
|
638
|
+
color: accent,
|
|
639
|
+
fontWeight: "600",
|
|
640
|
+
cursor: "pointer",
|
|
641
|
+
padding: 0,
|
|
642
|
+
fontSize: "inherit"
|
|
643
|
+
}
|
|
644
|
+
},
|
|
645
|
+
signupText
|
|
646
|
+
))));
|
|
647
|
+
};
|
|
492
648
|
// Annotate the CommonJS export names for ESM import in node:
|
|
493
649
|
0 && (module.exports = {
|
|
494
650
|
Button,
|
|
495
651
|
Card,
|
|
496
652
|
EcommerceCard,
|
|
653
|
+
LoginForm,
|
|
497
654
|
NavBar,
|
|
498
655
|
ProfileCard,
|
|
499
656
|
SideBar
|
package/dist/index.mjs
CHANGED
|
@@ -449,10 +449,166 @@ var SideBar = ({
|
|
|
449
449
|
background: "rgba(255,255,255,0.1)"
|
|
450
450
|
} }), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ React6.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
|
|
451
451
|
};
|
|
452
|
+
|
|
453
|
+
// src/components/LoginForm/LoginForm.jsx
|
|
454
|
+
import React7, { useState as useState6 } from "react";
|
|
455
|
+
var LoginForm = ({
|
|
456
|
+
title = "Welcome back",
|
|
457
|
+
subtitle = "Sign in to your account",
|
|
458
|
+
emailLabel = "Email address",
|
|
459
|
+
passwordLabel = "Password",
|
|
460
|
+
rememberLabel = "Remember me",
|
|
461
|
+
forgotLabel = "Forgot password?",
|
|
462
|
+
submitText = "Sign in",
|
|
463
|
+
noAccountText = "Don't have an account?",
|
|
464
|
+
signupText = "Sign up",
|
|
465
|
+
accent = "#6366f1",
|
|
466
|
+
bg = "#1e293b",
|
|
467
|
+
onSubmit = (email, password) => console.log(email, password),
|
|
468
|
+
onForgotClick = () => {
|
|
469
|
+
},
|
|
470
|
+
onSignupClick = () => {
|
|
471
|
+
}
|
|
472
|
+
}) => {
|
|
473
|
+
const [email, setEmail] = useState6("");
|
|
474
|
+
const [password, setPassword] = useState6("");
|
|
475
|
+
const [remember, setRemember] = useState6(false);
|
|
476
|
+
const [isSubmitting, setIsSubmitting] = useState6(false);
|
|
477
|
+
const alpha = (hex, op) => {
|
|
478
|
+
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
479
|
+
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
480
|
+
};
|
|
481
|
+
const handleSubmit = (e) => {
|
|
482
|
+
e.preventDefault();
|
|
483
|
+
setIsSubmitting(true);
|
|
484
|
+
setTimeout(() => {
|
|
485
|
+
onSubmit(email, password);
|
|
486
|
+
setIsSubmitting(false);
|
|
487
|
+
}, 1e3);
|
|
488
|
+
};
|
|
489
|
+
return /* @__PURE__ */ React7.createElement("div", { style: {
|
|
490
|
+
background: bg,
|
|
491
|
+
borderRadius: "16px",
|
|
492
|
+
padding: "32px",
|
|
493
|
+
width: "360px",
|
|
494
|
+
border: "1px solid rgba(255,255,255,0.08)",
|
|
495
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
|
|
496
|
+
fontFamily: "system-ui,sans-serif"
|
|
497
|
+
} }, /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { fontSize: "22px", fontWeight: "700", color: "#fff", margin: "0 0 6px" } }, title), /* @__PURE__ */ React7.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)", margin: 0 } }, subtitle)), /* @__PURE__ */ React7.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, emailLabel), /* @__PURE__ */ React7.createElement(
|
|
498
|
+
"input",
|
|
499
|
+
{
|
|
500
|
+
type: "email",
|
|
501
|
+
value: email,
|
|
502
|
+
onChange: (e) => setEmail(e.target.value),
|
|
503
|
+
required: true,
|
|
504
|
+
style: {
|
|
505
|
+
width: "100%",
|
|
506
|
+
padding: "12px 14px",
|
|
507
|
+
borderRadius: "10px",
|
|
508
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
509
|
+
background: "rgba(255,255,255,0.05)",
|
|
510
|
+
color: "#fff",
|
|
511
|
+
fontSize: "14px",
|
|
512
|
+
outline: "none",
|
|
513
|
+
transition: "border-color 0.2s",
|
|
514
|
+
boxSizing: "border-box"
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
)), /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, passwordLabel), /* @__PURE__ */ React7.createElement(
|
|
518
|
+
"input",
|
|
519
|
+
{
|
|
520
|
+
type: "password",
|
|
521
|
+
value: password,
|
|
522
|
+
onChange: (e) => setPassword(e.target.value),
|
|
523
|
+
required: true,
|
|
524
|
+
style: {
|
|
525
|
+
width: "100%",
|
|
526
|
+
padding: "12px 14px",
|
|
527
|
+
borderRadius: "10px",
|
|
528
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
529
|
+
background: "rgba(255,255,255,0.05)",
|
|
530
|
+
color: "#fff",
|
|
531
|
+
fontSize: "14px",
|
|
532
|
+
outline: "none",
|
|
533
|
+
transition: "border-color 0.2s",
|
|
534
|
+
boxSizing: "border-box"
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
)), /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", color: "rgba(255,255,255,0.7)", cursor: "pointer" } }, /* @__PURE__ */ React7.createElement(
|
|
538
|
+
"input",
|
|
539
|
+
{
|
|
540
|
+
type: "checkbox",
|
|
541
|
+
checked: remember,
|
|
542
|
+
onChange: (e) => setRemember(e.target.checked),
|
|
543
|
+
style: {
|
|
544
|
+
width: "16px",
|
|
545
|
+
height: "16px",
|
|
546
|
+
borderRadius: "4px",
|
|
547
|
+
border: "1px solid " + alpha(accent, 0.5),
|
|
548
|
+
background: remember ? accent : "transparent",
|
|
549
|
+
cursor: "pointer"
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
), rememberLabel), /* @__PURE__ */ React7.createElement(
|
|
553
|
+
"button",
|
|
554
|
+
{
|
|
555
|
+
type: "button",
|
|
556
|
+
onClick: onForgotClick,
|
|
557
|
+
style: {
|
|
558
|
+
background: "none",
|
|
559
|
+
border: "none",
|
|
560
|
+
color: accent,
|
|
561
|
+
fontSize: "13px",
|
|
562
|
+
fontWeight: "600",
|
|
563
|
+
cursor: "pointer",
|
|
564
|
+
padding: 0
|
|
565
|
+
}
|
|
566
|
+
},
|
|
567
|
+
forgotLabel
|
|
568
|
+
)), /* @__PURE__ */ React7.createElement(
|
|
569
|
+
"button",
|
|
570
|
+
{
|
|
571
|
+
type: "submit",
|
|
572
|
+
disabled: isSubmitting,
|
|
573
|
+
style: {
|
|
574
|
+
width: "100%",
|
|
575
|
+
padding: "14px",
|
|
576
|
+
borderRadius: "10px",
|
|
577
|
+
border: "none",
|
|
578
|
+
background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
|
|
579
|
+
color: "#fff",
|
|
580
|
+
fontSize: "14px",
|
|
581
|
+
fontWeight: "700",
|
|
582
|
+
cursor: "pointer",
|
|
583
|
+
opacity: isSubmitting ? 0.8 : 1,
|
|
584
|
+
transition: "opacity 0.2s",
|
|
585
|
+
marginBottom: "20px"
|
|
586
|
+
}
|
|
587
|
+
},
|
|
588
|
+
isSubmitting ? "Signing in..." : submitText
|
|
589
|
+
), /* @__PURE__ */ React7.createElement("div", { style: { textAlign: "center", fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, noAccountText, /* @__PURE__ */ React7.createElement(
|
|
590
|
+
"button",
|
|
591
|
+
{
|
|
592
|
+
type: "button",
|
|
593
|
+
onClick: onSignupClick,
|
|
594
|
+
style: {
|
|
595
|
+
background: "none",
|
|
596
|
+
border: "none",
|
|
597
|
+
color: accent,
|
|
598
|
+
fontWeight: "600",
|
|
599
|
+
cursor: "pointer",
|
|
600
|
+
padding: 0,
|
|
601
|
+
fontSize: "inherit"
|
|
602
|
+
}
|
|
603
|
+
},
|
|
604
|
+
signupText
|
|
605
|
+
))));
|
|
606
|
+
};
|
|
452
607
|
export {
|
|
453
608
|
Button,
|
|
454
609
|
Card,
|
|
455
610
|
EcommerceCard,
|
|
611
|
+
LoginForm,
|
|
456
612
|
NavBar,
|
|
457
613
|
ProfileCard,
|
|
458
614
|
SideBar
|