virtual-ui-lib-clone 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.
Files changed (3) hide show
  1. package/dist/index.js +202 -0
  2. package/dist/index.mjs +175 -0
  3. package/package.json +25 -0
package/dist/index.js ADDED
@@ -0,0 +1,202 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // src/index.js
20
+ var index_exports = {};
21
+ __export(index_exports, {
22
+ Button: () => Button_default,
23
+ Card: () => Card
24
+ });
25
+ module.exports = __toCommonJS(index_exports);
26
+
27
+ // src/components/Button/Button.jsx
28
+ var import_react = require("react");
29
+ var Button = ({
30
+ label = "Click me",
31
+ onClick,
32
+ variant = "primary",
33
+ size = "md",
34
+ disabled = false,
35
+ fullWidth = false
36
+ }) => {
37
+ const [hovered, setHovered] = (0, import_react.useState)(false);
38
+ const [active, setActive] = (0, import_react.useState)(false);
39
+ const sizes = {
40
+ sm: { padding: "6px 14px", fontSize: "13px", borderRadius: "6px" },
41
+ md: { padding: "9px 20px", fontSize: "15px", borderRadius: "8px" },
42
+ lg: { padding: "12px 28px", fontSize: "17px", borderRadius: "10px" }
43
+ };
44
+ const variants = {
45
+ primary: {
46
+ background: hovered ? "#4338ca" : "#4f46e5",
47
+ color: "#ffffff",
48
+ border: "none"
49
+ },
50
+ secondary: {
51
+ background: hovered ? "#f3f4f6" : "#ffffff",
52
+ color: "#111827",
53
+ border: "1px solid #d1d5db"
54
+ },
55
+ danger: {
56
+ background: hovered ? "#b91c1c" : "#dc2626",
57
+ color: "#ffffff",
58
+ border: "none"
59
+ },
60
+ ghost: {
61
+ background: hovered ? "#f3f4f6" : "transparent",
62
+ color: "#374151",
63
+ border: "1px solid transparent"
64
+ }
65
+ };
66
+ const baseStyle = {
67
+ display: "inline-flex",
68
+ alignItems: "center",
69
+ justifyContent: "center",
70
+ cursor: disabled ? "not-allowed" : "pointer",
71
+ opacity: disabled ? 0.5 : 1,
72
+ fontWeight: 500,
73
+ transition: "background 0.15s, transform 0.1s",
74
+ transform: active && !disabled ? "scale(0.97)" : "scale(1)",
75
+ width: fullWidth ? "100%" : "auto",
76
+ outline: "none",
77
+ userSelect: "none",
78
+ ...sizes[size],
79
+ ...variants[variant]
80
+ };
81
+ return /* @__PURE__ */ React.createElement(
82
+ "button",
83
+ {
84
+ style: baseStyle,
85
+ disabled,
86
+ onClick: !disabled ? onClick : void 0,
87
+ onMouseEnter: () => setHovered(true),
88
+ onMouseLeave: () => {
89
+ setHovered(false);
90
+ setActive(false);
91
+ },
92
+ onMouseDown: () => setActive(true),
93
+ onMouseUp: () => setActive(false)
94
+ },
95
+ label
96
+ );
97
+ };
98
+ var Button_default = Button;
99
+
100
+ // src/components/card/Card.jsx
101
+ var import_react2 = require("react");
102
+ var Card = ({
103
+ title = "Card Title",
104
+ description = "This is a short description inside the card.",
105
+ imageUrl = "",
106
+ badge = "",
107
+ badgeColor = "#4f46e5",
108
+ footer = "",
109
+ width = "320px",
110
+ onClick
111
+ }) => {
112
+ const [hovered, setHovered] = (0, import_react2.useState)(false);
113
+ const cardStyle = {
114
+ width,
115
+ background: "var(--color-background-primary, #fff)",
116
+ border: hovered ? "0.5px solid var(--color-border-secondary, #ccc)" : "0.5px solid var(--color-border-tertiary, #e5e7eb)",
117
+ borderRadius: "12px",
118
+ overflow: "hidden",
119
+ transition: "box-shadow 0.2s, border 0.2s, transform 0.15s",
120
+ boxShadow: hovered ? "0 4px 20px rgba(0,0,0,0.08)" : "0 1px 4px rgba(0,0,0,0.04)",
121
+ transform: hovered ? "translateY(-2px)" : "translateY(0)",
122
+ cursor: onClick ? "pointer" : "default",
123
+ fontFamily: "inherit",
124
+ boxSizing: "border-box"
125
+ };
126
+ const imagePlaceholderStyle = {
127
+ width: "100%",
128
+ height: "160px",
129
+ background: "linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%)",
130
+ display: "flex",
131
+ alignItems: "center",
132
+ justifyContent: "center",
133
+ color: "#6366f1",
134
+ fontSize: "13px",
135
+ fontWeight: 500
136
+ };
137
+ const bodyStyle = {
138
+ padding: "16px 18px"
139
+ };
140
+ const headerStyle = {
141
+ display: "flex",
142
+ alignItems: "center",
143
+ justifyContent: "space-between",
144
+ marginBottom: "8px"
145
+ };
146
+ const titleStyle = {
147
+ fontSize: "16px",
148
+ fontWeight: 500,
149
+ color: "var(--color-text-primary, #111827)",
150
+ margin: 0
151
+ };
152
+ const badgeStyle = {
153
+ fontSize: "11px",
154
+ fontWeight: 500,
155
+ padding: "3px 9px",
156
+ borderRadius: "999px",
157
+ background: badgeColor + "22",
158
+ color: badgeColor,
159
+ whiteSpace: "nowrap"
160
+ };
161
+ const descStyle = {
162
+ fontSize: "14px",
163
+ color: "var(--color-text-secondary, #6b7280)",
164
+ lineHeight: 1.6,
165
+ margin: 0
166
+ };
167
+ const footerStyle = {
168
+ padding: "12px 18px",
169
+ borderTop: "0.5px solid var(--color-border-tertiary, #e5e7eb)",
170
+ fontSize: "13px",
171
+ color: "var(--color-text-secondary, #6b7280)"
172
+ };
173
+ return /* @__PURE__ */ React.createElement(
174
+ "div",
175
+ {
176
+ style: cardStyle,
177
+ onMouseEnter: () => setHovered(true),
178
+ onMouseLeave: () => setHovered(false),
179
+ onClick
180
+ },
181
+ imageUrl ? /* @__PURE__ */ React.createElement(
182
+ "img",
183
+ {
184
+ src: imageUrl,
185
+ alt: title,
186
+ style: {
187
+ width: "100%",
188
+ height: "160px",
189
+ objectFit: "cover",
190
+ display: "block"
191
+ }
192
+ }
193
+ ) : /* @__PURE__ */ React.createElement("div", { style: imagePlaceholderStyle }, "No image"),
194
+ /* @__PURE__ */ React.createElement("div", { style: bodyStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, title), badge && /* @__PURE__ */ React.createElement("span", { style: badgeStyle }, badge)), /* @__PURE__ */ React.createElement("p", { style: descStyle }, description)),
195
+ footer && /* @__PURE__ */ React.createElement("div", { style: footerStyle }, footer)
196
+ );
197
+ };
198
+ // Annotate the CommonJS export names for ESM import in node:
199
+ 0 && (module.exports = {
200
+ Button,
201
+ Card
202
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,175 @@
1
+ // src/components/Button/Button.jsx
2
+ import { useState } from "react";
3
+ var Button = ({
4
+ label = "Click me",
5
+ onClick,
6
+ variant = "primary",
7
+ size = "md",
8
+ disabled = false,
9
+ fullWidth = false
10
+ }) => {
11
+ const [hovered, setHovered] = useState(false);
12
+ const [active, setActive] = useState(false);
13
+ const sizes = {
14
+ sm: { padding: "6px 14px", fontSize: "13px", borderRadius: "6px" },
15
+ md: { padding: "9px 20px", fontSize: "15px", borderRadius: "8px" },
16
+ lg: { padding: "12px 28px", fontSize: "17px", borderRadius: "10px" }
17
+ };
18
+ const variants = {
19
+ primary: {
20
+ background: hovered ? "#4338ca" : "#4f46e5",
21
+ color: "#ffffff",
22
+ border: "none"
23
+ },
24
+ secondary: {
25
+ background: hovered ? "#f3f4f6" : "#ffffff",
26
+ color: "#111827",
27
+ border: "1px solid #d1d5db"
28
+ },
29
+ danger: {
30
+ background: hovered ? "#b91c1c" : "#dc2626",
31
+ color: "#ffffff",
32
+ border: "none"
33
+ },
34
+ ghost: {
35
+ background: hovered ? "#f3f4f6" : "transparent",
36
+ color: "#374151",
37
+ border: "1px solid transparent"
38
+ }
39
+ };
40
+ const baseStyle = {
41
+ display: "inline-flex",
42
+ alignItems: "center",
43
+ justifyContent: "center",
44
+ cursor: disabled ? "not-allowed" : "pointer",
45
+ opacity: disabled ? 0.5 : 1,
46
+ fontWeight: 500,
47
+ transition: "background 0.15s, transform 0.1s",
48
+ transform: active && !disabled ? "scale(0.97)" : "scale(1)",
49
+ width: fullWidth ? "100%" : "auto",
50
+ outline: "none",
51
+ userSelect: "none",
52
+ ...sizes[size],
53
+ ...variants[variant]
54
+ };
55
+ return /* @__PURE__ */ React.createElement(
56
+ "button",
57
+ {
58
+ style: baseStyle,
59
+ disabled,
60
+ onClick: !disabled ? onClick : void 0,
61
+ onMouseEnter: () => setHovered(true),
62
+ onMouseLeave: () => {
63
+ setHovered(false);
64
+ setActive(false);
65
+ },
66
+ onMouseDown: () => setActive(true),
67
+ onMouseUp: () => setActive(false)
68
+ },
69
+ label
70
+ );
71
+ };
72
+ var Button_default = Button;
73
+
74
+ // src/components/card/Card.jsx
75
+ import { useState as useState2 } from "react";
76
+ var Card = ({
77
+ title = "Card Title",
78
+ description = "This is a short description inside the card.",
79
+ imageUrl = "",
80
+ badge = "",
81
+ badgeColor = "#4f46e5",
82
+ footer = "",
83
+ width = "320px",
84
+ onClick
85
+ }) => {
86
+ const [hovered, setHovered] = useState2(false);
87
+ const cardStyle = {
88
+ width,
89
+ background: "var(--color-background-primary, #fff)",
90
+ border: hovered ? "0.5px solid var(--color-border-secondary, #ccc)" : "0.5px solid var(--color-border-tertiary, #e5e7eb)",
91
+ borderRadius: "12px",
92
+ overflow: "hidden",
93
+ transition: "box-shadow 0.2s, border 0.2s, transform 0.15s",
94
+ boxShadow: hovered ? "0 4px 20px rgba(0,0,0,0.08)" : "0 1px 4px rgba(0,0,0,0.04)",
95
+ transform: hovered ? "translateY(-2px)" : "translateY(0)",
96
+ cursor: onClick ? "pointer" : "default",
97
+ fontFamily: "inherit",
98
+ boxSizing: "border-box"
99
+ };
100
+ const imagePlaceholderStyle = {
101
+ width: "100%",
102
+ height: "160px",
103
+ background: "linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%)",
104
+ display: "flex",
105
+ alignItems: "center",
106
+ justifyContent: "center",
107
+ color: "#6366f1",
108
+ fontSize: "13px",
109
+ fontWeight: 500
110
+ };
111
+ const bodyStyle = {
112
+ padding: "16px 18px"
113
+ };
114
+ const headerStyle = {
115
+ display: "flex",
116
+ alignItems: "center",
117
+ justifyContent: "space-between",
118
+ marginBottom: "8px"
119
+ };
120
+ const titleStyle = {
121
+ fontSize: "16px",
122
+ fontWeight: 500,
123
+ color: "var(--color-text-primary, #111827)",
124
+ margin: 0
125
+ };
126
+ const badgeStyle = {
127
+ fontSize: "11px",
128
+ fontWeight: 500,
129
+ padding: "3px 9px",
130
+ borderRadius: "999px",
131
+ background: badgeColor + "22",
132
+ color: badgeColor,
133
+ whiteSpace: "nowrap"
134
+ };
135
+ const descStyle = {
136
+ fontSize: "14px",
137
+ color: "var(--color-text-secondary, #6b7280)",
138
+ lineHeight: 1.6,
139
+ margin: 0
140
+ };
141
+ const footerStyle = {
142
+ padding: "12px 18px",
143
+ borderTop: "0.5px solid var(--color-border-tertiary, #e5e7eb)",
144
+ fontSize: "13px",
145
+ color: "var(--color-text-secondary, #6b7280)"
146
+ };
147
+ return /* @__PURE__ */ React.createElement(
148
+ "div",
149
+ {
150
+ style: cardStyle,
151
+ onMouseEnter: () => setHovered(true),
152
+ onMouseLeave: () => setHovered(false),
153
+ onClick
154
+ },
155
+ imageUrl ? /* @__PURE__ */ React.createElement(
156
+ "img",
157
+ {
158
+ src: imageUrl,
159
+ alt: title,
160
+ style: {
161
+ width: "100%",
162
+ height: "160px",
163
+ objectFit: "cover",
164
+ display: "block"
165
+ }
166
+ }
167
+ ) : /* @__PURE__ */ React.createElement("div", { style: imagePlaceholderStyle }, "No image"),
168
+ /* @__PURE__ */ React.createElement("div", { style: bodyStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, title), badge && /* @__PURE__ */ React.createElement("span", { style: badgeStyle }, badge)), /* @__PURE__ */ React.createElement("p", { style: descStyle }, description)),
169
+ footer && /* @__PURE__ */ React.createElement("div", { style: footerStyle }, footer)
170
+ );
171
+ };
172
+ export {
173
+ Button_default as Button,
174
+ Card
175
+ };
package/package.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "name": "virtual-ui-lib-clone",
3
+ "version": "1.0.0",
4
+ "author": "Vasu",
5
+ "license": "ISC",
6
+ "description": "Virtual Ui React Component Library",
7
+ "main": "dist/index.js",
8
+ "module": "dist/index.mjs",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "scripts": {
13
+ "build": "tsup"
14
+ },
15
+ "peerDependencies": {
16
+ "react": ">=18"
17
+ },
18
+ "dependencies": {
19
+ "react": "^19.2.5"
20
+ },
21
+ "devDependencies": {
22
+ "tsup": "^8.5.1",
23
+ "typescript": "^6.0.2"
24
+ }
25
+ }