dakshmalik1845-custom-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/index.js +198 -0
- package/package.json +24 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
// frontend/src/components/Button.jsx
|
|
2
|
+
// Button 1: Neon Glow
|
|
3
|
+
const ButtonNeon = ({
|
|
4
|
+
children,
|
|
5
|
+
onClick
|
|
6
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
7
|
+
className: "btn-neon",
|
|
8
|
+
onClick: onClick
|
|
9
|
+
}, children || "Neon Button");
|
|
10
|
+
|
|
11
|
+
// Button 2: Minimal Outline
|
|
12
|
+
const ButtonOutline = ({
|
|
13
|
+
children,
|
|
14
|
+
onClick
|
|
15
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
16
|
+
className: "btn-outline",
|
|
17
|
+
onClick: onClick
|
|
18
|
+
}, children || "Outline Button");
|
|
19
|
+
|
|
20
|
+
// Button 3: Gradient
|
|
21
|
+
const ButtonGradient = ({
|
|
22
|
+
children,
|
|
23
|
+
onClick
|
|
24
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
25
|
+
className: "btn-gradient",
|
|
26
|
+
onClick: onClick
|
|
27
|
+
}, children || "Gradient Button");
|
|
28
|
+
|
|
29
|
+
// Button 4: Rounded Soft
|
|
30
|
+
const ButtonRounded = ({
|
|
31
|
+
children,
|
|
32
|
+
onClick
|
|
33
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
34
|
+
className: "btn-rounded",
|
|
35
|
+
onClick: onClick
|
|
36
|
+
}, children || "Rounded Button");
|
|
37
|
+
|
|
38
|
+
// Button 5: Ghost
|
|
39
|
+
const ButtonGhost = ({
|
|
40
|
+
children,
|
|
41
|
+
onClick
|
|
42
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
43
|
+
className: "btn-ghost",
|
|
44
|
+
onClick: onClick
|
|
45
|
+
}, children || "Ghost Button");
|
|
46
|
+
|
|
47
|
+
// Button 6: Shadow
|
|
48
|
+
const ButtonShadow = ({
|
|
49
|
+
children,
|
|
50
|
+
onClick
|
|
51
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
52
|
+
className: "btn-shadow",
|
|
53
|
+
onClick: onClick
|
|
54
|
+
}, children || "Shadow Button");
|
|
55
|
+
|
|
56
|
+
// Button 7: Underline
|
|
57
|
+
const ButtonUnderline = ({
|
|
58
|
+
children,
|
|
59
|
+
onClick
|
|
60
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
61
|
+
className: "btn-underline",
|
|
62
|
+
onClick: onClick
|
|
63
|
+
}, children || "Underline Button");
|
|
64
|
+
|
|
65
|
+
// Button 8: Pill
|
|
66
|
+
const ButtonPill = ({
|
|
67
|
+
children,
|
|
68
|
+
onClick
|
|
69
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
70
|
+
className: "btn-pill",
|
|
71
|
+
onClick: onClick
|
|
72
|
+
}, children || "Pill Button");
|
|
73
|
+
|
|
74
|
+
// Button 9: Glossy
|
|
75
|
+
const ButtonGlossy = ({
|
|
76
|
+
children,
|
|
77
|
+
onClick
|
|
78
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
79
|
+
className: "btn-glossy",
|
|
80
|
+
onClick: onClick
|
|
81
|
+
}, children || "Glossy Button");
|
|
82
|
+
|
|
83
|
+
// Button 10: Border Animation
|
|
84
|
+
const ButtonBorderAnim = ({
|
|
85
|
+
children,
|
|
86
|
+
onClick
|
|
87
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
88
|
+
className: "btn-border-anim",
|
|
89
|
+
onClick: onClick
|
|
90
|
+
}, children || "Animated Border");
|
|
91
|
+
|
|
92
|
+
// frontend/src/components/Card.jsx
|
|
93
|
+
// Card 1: Glassmorphism
|
|
94
|
+
const CardGlass = ({
|
|
95
|
+
title,
|
|
96
|
+
content
|
|
97
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
98
|
+
className: "card-glass"
|
|
99
|
+
}, /*#__PURE__*/React.createElement("h3", null, title || "Glass Card"), /*#__PURE__*/React.createElement("p", null, content || "This is a glassmorphism style card."));
|
|
100
|
+
|
|
101
|
+
// Card 2: Minimal White
|
|
102
|
+
const CardMinimal = ({
|
|
103
|
+
title,
|
|
104
|
+
content
|
|
105
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
106
|
+
className: "card-minimal"
|
|
107
|
+
}, /*#__PURE__*/React.createElement("h3", null, title || "Minimal Card"), /*#__PURE__*/React.createElement("p", null, content || "Clean and simple design."));
|
|
108
|
+
|
|
109
|
+
// Card 3: Elevated Shadow
|
|
110
|
+
const CardElevated = ({
|
|
111
|
+
title,
|
|
112
|
+
content
|
|
113
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: "card-elevated"
|
|
115
|
+
}, /*#__PURE__*/React.createElement("h3", null, title || "Elevated Card"), /*#__PURE__*/React.createElement("p", null, content || "Card with deep shadow effect."));
|
|
116
|
+
|
|
117
|
+
// Card 4: Border Accent
|
|
118
|
+
const CardBorder = ({
|
|
119
|
+
title,
|
|
120
|
+
content
|
|
121
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
122
|
+
className: "card-border"
|
|
123
|
+
}, /*#__PURE__*/React.createElement("h3", null, title || "Border Card"), /*#__PURE__*/React.createElement("p", null, content || "Accent border on the left."));
|
|
124
|
+
|
|
125
|
+
// Card 5: Dark Theme
|
|
126
|
+
const CardDark = ({
|
|
127
|
+
title,
|
|
128
|
+
content
|
|
129
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
130
|
+
className: "card-dark"
|
|
131
|
+
}, /*#__PURE__*/React.createElement("h3", null, title || "Dark Card"), /*#__PURE__*/React.createElement("p", null, content || "Perfect for dark backgrounds."));
|
|
132
|
+
|
|
133
|
+
// frontend/src/components/Form.jsx
|
|
134
|
+
// Form 1: Contact Form
|
|
135
|
+
const FormContact = () => /*#__PURE__*/React.createElement("form", {
|
|
136
|
+
className: "form-contact"
|
|
137
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
138
|
+
type: "text",
|
|
139
|
+
placeholder: "Name"
|
|
140
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
141
|
+
type: "email",
|
|
142
|
+
placeholder: "Email"
|
|
143
|
+
}), /*#__PURE__*/React.createElement("textarea", {
|
|
144
|
+
placeholder: "Message"
|
|
145
|
+
}), /*#__PURE__*/React.createElement("button", {
|
|
146
|
+
type: "submit"
|
|
147
|
+
}, "Send"));
|
|
148
|
+
|
|
149
|
+
// Form 2: Login Form
|
|
150
|
+
const FormLogin = () => /*#__PURE__*/React.createElement("form", {
|
|
151
|
+
className: "form-login"
|
|
152
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
153
|
+
type: "email",
|
|
154
|
+
placeholder: "Email"
|
|
155
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
156
|
+
type: "password",
|
|
157
|
+
placeholder: "Password"
|
|
158
|
+
}), /*#__PURE__*/React.createElement("button", {
|
|
159
|
+
type: "submit"
|
|
160
|
+
}, "Login"));
|
|
161
|
+
|
|
162
|
+
// Form 3: Search Form
|
|
163
|
+
const FormSearch = () => /*#__PURE__*/React.createElement("form", {
|
|
164
|
+
className: "form-search"
|
|
165
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
166
|
+
type: "text",
|
|
167
|
+
placeholder: "Search..."
|
|
168
|
+
}), /*#__PURE__*/React.createElement("button", {
|
|
169
|
+
type: "submit"
|
|
170
|
+
}, "\uD83D\uDD0D"));
|
|
171
|
+
|
|
172
|
+
// Form 4: Signup Form
|
|
173
|
+
const FormSignup = () => /*#__PURE__*/React.createElement("form", {
|
|
174
|
+
className: "form-signup"
|
|
175
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
176
|
+
type: "text",
|
|
177
|
+
placeholder: "Full Name"
|
|
178
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
179
|
+
type: "email",
|
|
180
|
+
placeholder: "Email"
|
|
181
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
182
|
+
type: "password",
|
|
183
|
+
placeholder: "Password"
|
|
184
|
+
}), /*#__PURE__*/React.createElement("button", {
|
|
185
|
+
type: "submit"
|
|
186
|
+
}, "Sign Up"));
|
|
187
|
+
|
|
188
|
+
// Form 5: Newsletter Form
|
|
189
|
+
const FormNewsletter = () => /*#__PURE__*/React.createElement("form", {
|
|
190
|
+
className: "form-newsletter"
|
|
191
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
192
|
+
type: "email",
|
|
193
|
+
placeholder: "Your email"
|
|
194
|
+
}), /*#__PURE__*/React.createElement("button", {
|
|
195
|
+
type: "submit"
|
|
196
|
+
}, "Subscribe"));
|
|
197
|
+
|
|
198
|
+
export { ButtonBorderAnim, ButtonGhost, ButtonGlossy, ButtonGradient, ButtonNeon, ButtonOutline, ButtonPill, ButtonRounded, ButtonShadow, ButtonUnderline, CardBorder, CardDark, CardElevated, CardGlass, CardMinimal, FormContact, FormLogin, FormNewsletter, FormSearch, FormSignup };
|
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dakshmalik1845-custom-library",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Custom UI library with 10 buttons, 5 cards, and 5 forms",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "rollup -c"
|
|
12
|
+
},
|
|
13
|
+
"peerDependencies": {
|
|
14
|
+
"react": "^18.0.0",
|
|
15
|
+
"react-dom": "^18.0.0"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@babel/preset-react": "^7.28.5",
|
|
19
|
+
"@rollup/plugin-babel": "^7.0.0",
|
|
20
|
+
"@rollup/plugin-commonjs": "^29.0.2",
|
|
21
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
22
|
+
"rollup": "^4.60.1"
|
|
23
|
+
}
|
|
24
|
+
}
|