task-19-reusable-react-library 1.0.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/Button.js +20 -0
- package/dist/Card.js +22 -0
- package/dist/Modal.js +28 -0
- package/dist/index.js +27 -0
- package/dist/styles/Button.css +109 -0
- package/dist/styles/Card.css +103 -0
- package/dist/styles/Modal.css +99 -0
- package/package.json +30 -0
package/dist/Button.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
require("./styles/Button.css");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var Button = function Button(_ref) {
|
|
11
|
+
var label = _ref.label,
|
|
12
|
+
onClick = _ref.onClick,
|
|
13
|
+
_ref$type = _ref.type,
|
|
14
|
+
type = _ref$type === void 0 ? "primary" : _ref$type;
|
|
15
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
16
|
+
className: "btn ".concat(type),
|
|
17
|
+
onClick: onClick
|
|
18
|
+
}, label);
|
|
19
|
+
};
|
|
20
|
+
var _default = exports["default"] = Button;
|
package/dist/Card.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
require("./styles/Card.css");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var Card = function Card(_ref) {
|
|
11
|
+
var title = _ref.title,
|
|
12
|
+
content = _ref.content,
|
|
13
|
+
image = _ref.image;
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
15
|
+
className: "card"
|
|
16
|
+
}, image && /*#__PURE__*/_react["default"].createElement("img", {
|
|
17
|
+
src: image,
|
|
18
|
+
alt: title,
|
|
19
|
+
className: "card-img"
|
|
20
|
+
}), /*#__PURE__*/_react["default"].createElement("h3", null, title), /*#__PURE__*/_react["default"].createElement("p", null, content));
|
|
21
|
+
};
|
|
22
|
+
var _default = exports["default"] = Card;
|
package/dist/Modal.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
require("./styles/Modal.css");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var Modal = function Modal(_ref) {
|
|
11
|
+
var isOpen = _ref.isOpen,
|
|
12
|
+
onClose = _ref.onClose,
|
|
13
|
+
children = _ref.children;
|
|
14
|
+
if (!isOpen) return null;
|
|
15
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
16
|
+
className: "modal-overlay",
|
|
17
|
+
onClick: onClose
|
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
19
|
+
className: "modal",
|
|
20
|
+
onClick: function onClick(e) {
|
|
21
|
+
return e.stopPropagation();
|
|
22
|
+
}
|
|
23
|
+
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
24
|
+
className: "close",
|
|
25
|
+
onClick: onClose
|
|
26
|
+
}, "\xD7"), children));
|
|
27
|
+
};
|
|
28
|
+
var _default = exports["default"] = Modal;
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "Button", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _Button["default"];
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "Card", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _Card["default"];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "Modal", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _Modal["default"];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
var _Button = _interopRequireDefault(require("./Button"));
|
|
25
|
+
var _Card = _interopRequireDefault(require("./Card"));
|
|
26
|
+
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
27
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
:root{
|
|
2
|
+
--ui-radius: 10px;
|
|
3
|
+
--ui-padding-y: 10px;
|
|
4
|
+
--ui-padding-x: 16px;
|
|
5
|
+
--fs-base: 16px;
|
|
6
|
+
--transition-fast: 180ms;
|
|
7
|
+
--elev-low: 0 6px 18px rgba(12,20,30,0.08);
|
|
8
|
+
--elev-mid: 0 10px 28px rgba(12,20,30,0.12);
|
|
9
|
+
--focus-ring: 3px;
|
|
10
|
+
--color-primary: #0969da;
|
|
11
|
+
--color-primary-600: #0356b6;
|
|
12
|
+
--color-success: #16a34a;
|
|
13
|
+
--color-muted: #6b7280;
|
|
14
|
+
--text-on-dark: #fff;
|
|
15
|
+
--glass: rgba(255,255,255,0.06);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Base button */
|
|
19
|
+
.btn{
|
|
20
|
+
-webkit-font-smoothing:antialiased;
|
|
21
|
+
-moz-osx-font-smoothing:grayscale;
|
|
22
|
+
display:inline-flex;
|
|
23
|
+
align-items:center;
|
|
24
|
+
justify-content:center;
|
|
25
|
+
gap:10px;
|
|
26
|
+
padding:var(--ui-padding-y) var(--ui-padding-x);
|
|
27
|
+
font-size:var(--fs-base);
|
|
28
|
+
line-height:1;
|
|
29
|
+
border-radius:var(--ui-radius);
|
|
30
|
+
border:1px solid transparent;
|
|
31
|
+
cursor:pointer;
|
|
32
|
+
user-select:none;
|
|
33
|
+
transition:transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, opacity var(--transition-fast) ease, background-color var(--transition-fast) ease;
|
|
34
|
+
box-shadow:var(--elev-low);
|
|
35
|
+
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
|
|
36
|
+
padding-block:10px;
|
|
37
|
+
padding-inline:16px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Sizes */
|
|
41
|
+
.btn.sm{ font-size:14px; padding:8px 12px; }
|
|
42
|
+
.btn.lg{ font-size:18px; padding:12px 20px; }
|
|
43
|
+
|
|
44
|
+
/* Variants */
|
|
45
|
+
.btn.primary{
|
|
46
|
+
background:linear-gradient(180deg, var(--color-primary), var(--color-primary-600));
|
|
47
|
+
color:var(--text-on-dark);
|
|
48
|
+
box-shadow:var(--elev-mid);
|
|
49
|
+
border-color: rgba(0,0,0,0.06);
|
|
50
|
+
}
|
|
51
|
+
.btn.secondary{
|
|
52
|
+
background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
|
|
53
|
+
color: #111827;
|
|
54
|
+
border-color: rgba(0,0,0,0.04);
|
|
55
|
+
}
|
|
56
|
+
.btn.success{
|
|
57
|
+
background: linear-gradient(180deg, var(--color-success), #16823f);
|
|
58
|
+
color:var(--text-on-dark);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Outline and ghost */
|
|
62
|
+
.btn.outline{
|
|
63
|
+
background:transparent;
|
|
64
|
+
border-color: rgba(12,20,30,0.08);
|
|
65
|
+
color: #0f172a;
|
|
66
|
+
box-shadow:none;
|
|
67
|
+
}
|
|
68
|
+
.btn.ghost{
|
|
69
|
+
background:transparent;
|
|
70
|
+
color:var(--color-primary);
|
|
71
|
+
border:1px dashed rgba(9,105,218,0.16);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Icon-only */
|
|
75
|
+
.btn.icon{
|
|
76
|
+
padding:8px;
|
|
77
|
+
width:40px;
|
|
78
|
+
height:40px;
|
|
79
|
+
display:inline-grid;
|
|
80
|
+
place-items:center;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Hover, active */
|
|
84
|
+
.btn:hover{ transform:translateY(-3px); }
|
|
85
|
+
.btn:active{ transform:translateY(0); box-shadow:var(--elev-low); opacity:0.98; }
|
|
86
|
+
|
|
87
|
+
/* Disabled */
|
|
88
|
+
.btn:disabled,
|
|
89
|
+
.btn[aria-disabled="true"]{
|
|
90
|
+
opacity:0.48;
|
|
91
|
+
cursor:not-allowed;
|
|
92
|
+
transform:none;
|
|
93
|
+
box-shadow:none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Focus accessibility */
|
|
97
|
+
.btn:focus{
|
|
98
|
+
outline: none;
|
|
99
|
+
box-shadow: 0 0 0 var(--focus-ring) rgba(9,105,218,0.18);
|
|
100
|
+
transform: translateY(-2px);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Keyboard visible focus */
|
|
104
|
+
@media (prefers-reduced-motion: reduce){
|
|
105
|
+
.btn{ transition:none; transform:none; }
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Utility helpers for usage inside demos */
|
|
109
|
+
.btn .label{ display:inline-block; vertical-align:middle; }
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
:root{
|
|
2
|
+
--card-bg: #ffffff;
|
|
3
|
+
--card-border: rgba(15,23,42,0.06);
|
|
4
|
+
--card-radius: 14px;
|
|
5
|
+
--card-padding: 18px;
|
|
6
|
+
--card-gap: 12px;
|
|
7
|
+
--card-shadow: 0 8px 28px rgba(12,20,30,0.06);
|
|
8
|
+
--card-accent: linear-gradient(90deg, rgba(9,105,218,0.12), rgba(16,185,129,0.06));
|
|
9
|
+
--muted: #6b7280;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Card shell */
|
|
13
|
+
.card{
|
|
14
|
+
background:var(--card-bg);
|
|
15
|
+
border:1px solid var(--card-border);
|
|
16
|
+
border-radius:var(--card-radius);
|
|
17
|
+
padding:var(--card-padding);
|
|
18
|
+
width:100%;
|
|
19
|
+
max-width:360px;
|
|
20
|
+
box-shadow:var(--card-shadow);
|
|
21
|
+
display:flex;
|
|
22
|
+
flex-direction:column;
|
|
23
|
+
gap:var(--card-gap);
|
|
24
|
+
overflow:hidden;
|
|
25
|
+
transition:transform 220ms ease, box-shadow 220ms ease;
|
|
26
|
+
isolation:isolate;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Hover lift */
|
|
30
|
+
.card:hover{
|
|
31
|
+
transform:translateY(-6px) scale(1.002);
|
|
32
|
+
box-shadow: 0 18px 48px rgba(12,20,30,0.12);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Image container */
|
|
36
|
+
.card-img{
|
|
37
|
+
width:100%;
|
|
38
|
+
height:180px;
|
|
39
|
+
object-fit:cover;
|
|
40
|
+
border-radius:10px;
|
|
41
|
+
display:block;
|
|
42
|
+
box-shadow: 0 6px 22px rgba(2,6,23,0.04);
|
|
43
|
+
transition:transform 300ms ease, filter 300ms ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Title and meta */
|
|
47
|
+
.card h3{
|
|
48
|
+
margin:0;
|
|
49
|
+
font-size:18px;
|
|
50
|
+
line-height:1.15;
|
|
51
|
+
color:#0f172a;
|
|
52
|
+
letter-spacing:0.1px;
|
|
53
|
+
}
|
|
54
|
+
.card p{
|
|
55
|
+
margin:0;
|
|
56
|
+
color:var(--muted);
|
|
57
|
+
font-size:14px;
|
|
58
|
+
line-height:1.45;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Footer area: actions */
|
|
62
|
+
.card .card-footer{
|
|
63
|
+
display:flex;
|
|
64
|
+
gap:10px;
|
|
65
|
+
justify-content:space-between;
|
|
66
|
+
align-items:center;
|
|
67
|
+
margin-top:8px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Small badge or tag */
|
|
71
|
+
.card .tag{
|
|
72
|
+
font-size:12px;
|
|
73
|
+
padding:6px 10px;
|
|
74
|
+
border-radius:999px;
|
|
75
|
+
background:var(--card-accent);
|
|
76
|
+
color:#05386b;
|
|
77
|
+
font-weight:600;
|
|
78
|
+
align-self:flex-start;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Accent border for featured cards */
|
|
82
|
+
.card.featured{
|
|
83
|
+
border-image: linear-gradient(90deg,#06b6d4,#8b5cf6) 1;
|
|
84
|
+
box-shadow: 0 20px 60px rgba(139,92,246,0.08);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Responsive: stack for small screens */
|
|
88
|
+
@media (max-width:520px){
|
|
89
|
+
.card{ max-width:100%; padding:14px; border-radius:12px; }
|
|
90
|
+
.card-img{ height:140px; }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Keyboard and reduced motion preferences */
|
|
94
|
+
@media (prefers-reduced-motion: reduce){
|
|
95
|
+
.card, .card-img{ transition:none; transform:none; }
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Light and dark support via data-theme attribute */
|
|
99
|
+
[data-theme="dark"] .card{
|
|
100
|
+
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
|
101
|
+
border-color: rgba(255,255,255,0.04);
|
|
102
|
+
color: #e6eef8;
|
|
103
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
:root{
|
|
2
|
+
--modal-backdrop: rgba(3,7,18,0.6);
|
|
3
|
+
--modal-radius: 12px;
|
|
4
|
+
--modal-width: 620px;
|
|
5
|
+
--modal-padding: 22px;
|
|
6
|
+
--modal-elev: 0 30px 80px rgba(3,7,18,0.6);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Backdrop */
|
|
10
|
+
.modal-overlay{
|
|
11
|
+
position:fixed;
|
|
12
|
+
inset:0;
|
|
13
|
+
display:flex;
|
|
14
|
+
align-items:center;
|
|
15
|
+
justify-content:center;
|
|
16
|
+
background:var(--modal-backdrop);
|
|
17
|
+
z-index:1000;
|
|
18
|
+
padding:20px;
|
|
19
|
+
animation:fadeIn 180ms ease both;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Modal box */
|
|
23
|
+
.modal{
|
|
24
|
+
width:100%;
|
|
25
|
+
max-width:var(--modal-width);
|
|
26
|
+
background:linear-gradient(180deg, #ffffff, #fbfdff);
|
|
27
|
+
border-radius:var(--modal-radius);
|
|
28
|
+
padding:var(--modal-padding);
|
|
29
|
+
box-shadow:var(--modal-elev);
|
|
30
|
+
position:relative;
|
|
31
|
+
transform-origin:center;
|
|
32
|
+
animation:popUp 220ms cubic-bezier(.2,.9,.2,1) both;
|
|
33
|
+
outline: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Close button */
|
|
37
|
+
.close{
|
|
38
|
+
position:absolute;
|
|
39
|
+
right:12px;
|
|
40
|
+
top:12px;
|
|
41
|
+
width:40px;
|
|
42
|
+
height:40px;
|
|
43
|
+
border-radius:8px;
|
|
44
|
+
display:grid;
|
|
45
|
+
place-items:center;
|
|
46
|
+
border:none;
|
|
47
|
+
background:transparent;
|
|
48
|
+
cursor:pointer;
|
|
49
|
+
font-size:20px;
|
|
50
|
+
color:#0f172a;
|
|
51
|
+
transition:transform 160ms ease, background-color 160ms ease;
|
|
52
|
+
}
|
|
53
|
+
.close:hover{ transform:rotate(90deg); background:rgba(0,0,0,0.04); }
|
|
54
|
+
.close:focus{ box-shadow: 0 0 0 4px rgba(9,105,218,0.12); }
|
|
55
|
+
|
|
56
|
+
/* Modal content helpers */
|
|
57
|
+
.modal .modal-header{
|
|
58
|
+
display:flex;
|
|
59
|
+
align-items:center;
|
|
60
|
+
justify-content:space-between;
|
|
61
|
+
gap:10px;
|
|
62
|
+
margin-bottom:8px;
|
|
63
|
+
}
|
|
64
|
+
.modal .modal-body{ max-height:60vh; overflow:auto; padding-right:6px; }
|
|
65
|
+
.modal .modal-footer{
|
|
66
|
+
display:flex;
|
|
67
|
+
gap:10px;
|
|
68
|
+
justify-content:flex-end;
|
|
69
|
+
margin-top:16px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Small screens */
|
|
73
|
+
@media (max-width:640px){
|
|
74
|
+
:root{ --modal-width: 100%; }
|
|
75
|
+
.modal{ padding:16px; border-radius:10px; }
|
|
76
|
+
.close{ right:8px; top:8px; }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Animations */
|
|
80
|
+
@keyframes popUp{
|
|
81
|
+
from{ opacity:0; transform:translateY(8px) scale(0.995); }
|
|
82
|
+
to{ opacity:1; transform:translateY(0) scale(1); }
|
|
83
|
+
}
|
|
84
|
+
@keyframes fadeIn{
|
|
85
|
+
from{ opacity:0; }
|
|
86
|
+
to{ opacity:1; }
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Accessibility: trap focus hint (visual only) */
|
|
90
|
+
.modal:focus{ outline:none; }
|
|
91
|
+
|
|
92
|
+
/* Respect reduced motion */
|
|
93
|
+
@media (prefers-reduced-motion: reduce){
|
|
94
|
+
.modal, .modal-overlay{ animation:none; }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* When modal receives aria-modal or inert patterns, make page inert elsewhere */
|
|
98
|
+
/* (Behavior handled in JS, style left for completeness) */
|
|
99
|
+
[aria-hidden="true"]{ pointer-events:none; user-select:none; }
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "task-19-reusable-react-library",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A reusable React UI component library (Buttons, Cards, Modals)",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "babel src --out-dir dist --copy-files"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"ui-kit",
|
|
16
|
+
"components",
|
|
17
|
+
"arham"
|
|
18
|
+
],
|
|
19
|
+
"peerDependencies": {
|
|
20
|
+
"react": "^18.0.0",
|
|
21
|
+
"react-dom": "^18.0.0"
|
|
22
|
+
},
|
|
23
|
+
"author": "Arham",
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@babel/cli": "^7.28.3",
|
|
27
|
+
"@babel/preset-env": "^7.28.5",
|
|
28
|
+
"@babel/preset-react": "^7.28.5"
|
|
29
|
+
}
|
|
30
|
+
}
|