vanta-ui 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 ADDED
@@ -0,0 +1,234 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/index.js
30
+ var index_exports = {};
31
+ __export(index_exports, {
32
+ Button: () => Button,
33
+ Card: () => Card
34
+ });
35
+ module.exports = __toCommonJS(index_exports);
36
+
37
+ // src/components/Card/Card.jsx
38
+ var import_react = __toESM(require("react"));
39
+ var Card = ({
40
+ title = "Card Title",
41
+ subtitle = "Subtitle or category",
42
+ description = "A short description that gives context about this content.",
43
+ image = null,
44
+ badge = null,
45
+ badgeColor = "#38BDF8",
46
+ footer = null,
47
+ onClick = null,
48
+ variant = "default",
49
+ accentColor = "#0F172A",
50
+ width = "320px"
51
+ }) => {
52
+ const [hovered, setHovered] = (0, import_react.useState)(false);
53
+ const variants = {
54
+ default: { bg: "#FFFFFF", text: "#0F172A", border: "#E2E8F0", shadow: "0 1px 3px rgba(0,0,0,0.07)" },
55
+ outlined: { bg: "transparent", text: "#0F172A", border: accentColor, shadow: "none" },
56
+ dark: { bg: "#0F172A", text: "#F8FAFC", border: "#1E293B", shadow: "0 1px 3px rgba(0,0,0,0.3)" }
57
+ };
58
+ const v = variants[variant] || variants.default;
59
+ const isClickable = typeof onClick === "function";
60
+ return /* @__PURE__ */ import_react.default.createElement(
61
+ "div",
62
+ {
63
+ onMouseEnter: () => setHovered(true),
64
+ onMouseLeave: () => setHovered(false),
65
+ onClick: onClick || void 0,
66
+ style: {
67
+ width,
68
+ backgroundColor: v.bg,
69
+ color: v.text,
70
+ border: `1px solid ${hovered ? accentColor : v.border}`,
71
+ borderRadius: "14px",
72
+ overflow: "hidden",
73
+ cursor: isClickable ? "pointer" : "default",
74
+ boxShadow: hovered ? `0 10px 24px rgba(0,0,0,0.12), 0 0 0 3px ${accentColor}22` : v.shadow,
75
+ transform: hovered ? "translateY(-3px)" : "translateY(0)",
76
+ transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
77
+ fontFamily: "'Inter', system-ui, sans-serif",
78
+ position: "relative"
79
+ }
80
+ },
81
+ badge && /* @__PURE__ */ import_react.default.createElement(
82
+ "span",
83
+ {
84
+ style: {
85
+ position: "absolute",
86
+ top: "12px",
87
+ right: "12px",
88
+ backgroundColor: badgeColor,
89
+ color: "#fff",
90
+ fontSize: "11px",
91
+ fontWeight: 600,
92
+ padding: "4px 10px",
93
+ borderRadius: "999px",
94
+ letterSpacing: "0.03em",
95
+ zIndex: 1
96
+ }
97
+ },
98
+ badge
99
+ ),
100
+ image && /* @__PURE__ */ import_react.default.createElement(
101
+ "img",
102
+ {
103
+ src: image,
104
+ alt: title,
105
+ style: {
106
+ width: "100%",
107
+ height: "170px",
108
+ objectFit: "cover",
109
+ display: "block"
110
+ }
111
+ }
112
+ ),
113
+ /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "18px" } }, subtitle && /* @__PURE__ */ import_react.default.createElement(
114
+ "p",
115
+ {
116
+ style: {
117
+ margin: "0 0 4px 0",
118
+ fontSize: "11px",
119
+ fontWeight: 600,
120
+ letterSpacing: "0.08em",
121
+ textTransform: "uppercase",
122
+ color: accentColor
123
+ }
124
+ },
125
+ subtitle
126
+ ), /* @__PURE__ */ import_react.default.createElement(
127
+ "h3",
128
+ {
129
+ style: {
130
+ margin: "0 0 8px 0",
131
+ fontSize: "18px",
132
+ fontWeight: 700
133
+ }
134
+ },
135
+ title
136
+ ), /* @__PURE__ */ import_react.default.createElement(
137
+ "p",
138
+ {
139
+ style: {
140
+ margin: 0,
141
+ fontSize: "14px",
142
+ lineHeight: 1.55,
143
+ opacity: 0.75
144
+ }
145
+ },
146
+ description
147
+ ), footer && /* @__PURE__ */ import_react.default.createElement(
148
+ "div",
149
+ {
150
+ style: {
151
+ marginTop: "16px",
152
+ paddingTop: "12px",
153
+ borderTop: `1px solid ${v.border}`,
154
+ fontSize: "13px",
155
+ opacity: 0.7
156
+ }
157
+ },
158
+ footer
159
+ ))
160
+ );
161
+ };
162
+
163
+ // src/components/Button/Button.jsx
164
+ var import_react2 = __toESM(require("react"));
165
+ var Button = ({
166
+ label = "Click Me",
167
+ onClick = () => {
168
+ },
169
+ variant = "primary",
170
+ size = "md",
171
+ disabled = false,
172
+ fullWidth = false,
173
+ icon = null
174
+ }) => {
175
+ const [hovered, setHovered] = (0, import_react2.useState)(false);
176
+ const [pressed, setPressed] = (0, import_react2.useState)(false);
177
+ const palette = {
178
+ primary: { bg: "#0F172A", text: "#F8FAFC", border: "#0F172A", hoverBg: "#1E293B", accent: "#38BDF8" },
179
+ secondary: { bg: "transparent", text: "#0F172A", border: "#CBD5E1", hoverBg: "#F1F5F9", accent: "#0F172A" },
180
+ danger: { bg: "#EF4444", text: "#FFFFFF", border: "#EF4444", hoverBg: "#DC2626", accent: "#FCA5A5" },
181
+ ghost: { bg: "transparent", text: "#F8FAFC", border: "transparent", hoverBg: "#647488", accent: "#F8FAFC" }
182
+ };
183
+ const sizes = {
184
+ sm: { padding: "6px 14px", fontSize: "12px", radius: "6px", gap: "6px" },
185
+ md: { padding: "10px 22px", fontSize: "14px", radius: "8px", gap: "8px" },
186
+ lg: { padding: "14px 30px", fontSize: "16px", radius: "10px", gap: "10px" }
187
+ };
188
+ const c = palette[variant] || palette.primary;
189
+ const s = sizes[size] || sizes.md;
190
+ const isActive = hovered && !disabled;
191
+ const style = {
192
+ display: "inline-flex",
193
+ alignItems: "center",
194
+ justifyContent: "center",
195
+ gap: s.gap,
196
+ padding: s.padding,
197
+ width: fullWidth ? "100%" : "auto",
198
+ fontSize: s.fontSize,
199
+ fontWeight: 500,
200
+ letterSpacing: "0.5px",
201
+ textTransform: "uppercase",
202
+ color: isActive && variant === "primary" ? c.accent : c.text,
203
+ backgroundColor: isActive ? c.hoverBg : c.bg,
204
+ border: `1.5px solid ${isActive && variant === "secondary" ? "#94A3B8" : c.border}`,
205
+ borderRadius: s.radius,
206
+ cursor: disabled ? "not-allowed" : "pointer",
207
+ opacity: disabled ? 0.45 : 1,
208
+ transition: "all 0.18s cubic-bezier(0.4, 0, 0.2, 1)",
209
+ transform: pressed && !disabled ? "scale(0.97)" : "scale(1)",
210
+ boxShadow: isActive ? `0 0 0 3px ${c.accent}33` : "0 1px 3px rgba(0,0,0,0.08)",
211
+ userSelect: "none"
212
+ };
213
+ return /* @__PURE__ */ import_react2.default.createElement(
214
+ "button",
215
+ {
216
+ style,
217
+ onClick: !disabled ? onClick : void 0,
218
+ onMouseEnter: () => setHovered(true),
219
+ onMouseLeave: () => {
220
+ setHovered(false);
221
+ setPressed(false);
222
+ },
223
+ onMouseDown: () => setPressed(true),
224
+ onMouseUp: () => setPressed(false)
225
+ },
226
+ icon && /* @__PURE__ */ import_react2.default.createElement("span", null, icon),
227
+ label
228
+ );
229
+ };
230
+ // Annotate the CommonJS export names for ESM import in node:
231
+ 0 && (module.exports = {
232
+ Button,
233
+ Card
234
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,197 @@
1
+ // src/components/Card/Card.jsx
2
+ import React, { useState } from "react";
3
+ var Card = ({
4
+ title = "Card Title",
5
+ subtitle = "Subtitle or category",
6
+ description = "A short description that gives context about this content.",
7
+ image = null,
8
+ badge = null,
9
+ badgeColor = "#38BDF8",
10
+ footer = null,
11
+ onClick = null,
12
+ variant = "default",
13
+ accentColor = "#0F172A",
14
+ width = "320px"
15
+ }) => {
16
+ const [hovered, setHovered] = useState(false);
17
+ const variants = {
18
+ default: { bg: "#FFFFFF", text: "#0F172A", border: "#E2E8F0", shadow: "0 1px 3px rgba(0,0,0,0.07)" },
19
+ outlined: { bg: "transparent", text: "#0F172A", border: accentColor, shadow: "none" },
20
+ dark: { bg: "#0F172A", text: "#F8FAFC", border: "#1E293B", shadow: "0 1px 3px rgba(0,0,0,0.3)" }
21
+ };
22
+ const v = variants[variant] || variants.default;
23
+ const isClickable = typeof onClick === "function";
24
+ return /* @__PURE__ */ React.createElement(
25
+ "div",
26
+ {
27
+ onMouseEnter: () => setHovered(true),
28
+ onMouseLeave: () => setHovered(false),
29
+ onClick: onClick || void 0,
30
+ style: {
31
+ width,
32
+ backgroundColor: v.bg,
33
+ color: v.text,
34
+ border: `1px solid ${hovered ? accentColor : v.border}`,
35
+ borderRadius: "14px",
36
+ overflow: "hidden",
37
+ cursor: isClickable ? "pointer" : "default",
38
+ boxShadow: hovered ? `0 10px 24px rgba(0,0,0,0.12), 0 0 0 3px ${accentColor}22` : v.shadow,
39
+ transform: hovered ? "translateY(-3px)" : "translateY(0)",
40
+ transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
41
+ fontFamily: "'Inter', system-ui, sans-serif",
42
+ position: "relative"
43
+ }
44
+ },
45
+ badge && /* @__PURE__ */ React.createElement(
46
+ "span",
47
+ {
48
+ style: {
49
+ position: "absolute",
50
+ top: "12px",
51
+ right: "12px",
52
+ backgroundColor: badgeColor,
53
+ color: "#fff",
54
+ fontSize: "11px",
55
+ fontWeight: 600,
56
+ padding: "4px 10px",
57
+ borderRadius: "999px",
58
+ letterSpacing: "0.03em",
59
+ zIndex: 1
60
+ }
61
+ },
62
+ badge
63
+ ),
64
+ image && /* @__PURE__ */ React.createElement(
65
+ "img",
66
+ {
67
+ src: image,
68
+ alt: title,
69
+ style: {
70
+ width: "100%",
71
+ height: "170px",
72
+ objectFit: "cover",
73
+ display: "block"
74
+ }
75
+ }
76
+ ),
77
+ /* @__PURE__ */ React.createElement("div", { style: { padding: "18px" } }, subtitle && /* @__PURE__ */ React.createElement(
78
+ "p",
79
+ {
80
+ style: {
81
+ margin: "0 0 4px 0",
82
+ fontSize: "11px",
83
+ fontWeight: 600,
84
+ letterSpacing: "0.08em",
85
+ textTransform: "uppercase",
86
+ color: accentColor
87
+ }
88
+ },
89
+ subtitle
90
+ ), /* @__PURE__ */ React.createElement(
91
+ "h3",
92
+ {
93
+ style: {
94
+ margin: "0 0 8px 0",
95
+ fontSize: "18px",
96
+ fontWeight: 700
97
+ }
98
+ },
99
+ title
100
+ ), /* @__PURE__ */ React.createElement(
101
+ "p",
102
+ {
103
+ style: {
104
+ margin: 0,
105
+ fontSize: "14px",
106
+ lineHeight: 1.55,
107
+ opacity: 0.75
108
+ }
109
+ },
110
+ description
111
+ ), footer && /* @__PURE__ */ React.createElement(
112
+ "div",
113
+ {
114
+ style: {
115
+ marginTop: "16px",
116
+ paddingTop: "12px",
117
+ borderTop: `1px solid ${v.border}`,
118
+ fontSize: "13px",
119
+ opacity: 0.7
120
+ }
121
+ },
122
+ footer
123
+ ))
124
+ );
125
+ };
126
+
127
+ // src/components/Button/Button.jsx
128
+ import React2, { useState as useState2 } from "react";
129
+ var Button = ({
130
+ label = "Click Me",
131
+ onClick = () => {
132
+ },
133
+ variant = "primary",
134
+ size = "md",
135
+ disabled = false,
136
+ fullWidth = false,
137
+ icon = null
138
+ }) => {
139
+ const [hovered, setHovered] = useState2(false);
140
+ const [pressed, setPressed] = useState2(false);
141
+ const palette = {
142
+ primary: { bg: "#0F172A", text: "#F8FAFC", border: "#0F172A", hoverBg: "#1E293B", accent: "#38BDF8" },
143
+ secondary: { bg: "transparent", text: "#0F172A", border: "#CBD5E1", hoverBg: "#F1F5F9", accent: "#0F172A" },
144
+ danger: { bg: "#EF4444", text: "#FFFFFF", border: "#EF4444", hoverBg: "#DC2626", accent: "#FCA5A5" },
145
+ ghost: { bg: "transparent", text: "#F8FAFC", border: "transparent", hoverBg: "#647488", accent: "#F8FAFC" }
146
+ };
147
+ const sizes = {
148
+ sm: { padding: "6px 14px", fontSize: "12px", radius: "6px", gap: "6px" },
149
+ md: { padding: "10px 22px", fontSize: "14px", radius: "8px", gap: "8px" },
150
+ lg: { padding: "14px 30px", fontSize: "16px", radius: "10px", gap: "10px" }
151
+ };
152
+ const c = palette[variant] || palette.primary;
153
+ const s = sizes[size] || sizes.md;
154
+ const isActive = hovered && !disabled;
155
+ const style = {
156
+ display: "inline-flex",
157
+ alignItems: "center",
158
+ justifyContent: "center",
159
+ gap: s.gap,
160
+ padding: s.padding,
161
+ width: fullWidth ? "100%" : "auto",
162
+ fontSize: s.fontSize,
163
+ fontWeight: 500,
164
+ letterSpacing: "0.5px",
165
+ textTransform: "uppercase",
166
+ color: isActive && variant === "primary" ? c.accent : c.text,
167
+ backgroundColor: isActive ? c.hoverBg : c.bg,
168
+ border: `1.5px solid ${isActive && variant === "secondary" ? "#94A3B8" : c.border}`,
169
+ borderRadius: s.radius,
170
+ cursor: disabled ? "not-allowed" : "pointer",
171
+ opacity: disabled ? 0.45 : 1,
172
+ transition: "all 0.18s cubic-bezier(0.4, 0, 0.2, 1)",
173
+ transform: pressed && !disabled ? "scale(0.97)" : "scale(1)",
174
+ boxShadow: isActive ? `0 0 0 3px ${c.accent}33` : "0 1px 3px rgba(0,0,0,0.08)",
175
+ userSelect: "none"
176
+ };
177
+ return /* @__PURE__ */ React2.createElement(
178
+ "button",
179
+ {
180
+ style,
181
+ onClick: !disabled ? onClick : void 0,
182
+ onMouseEnter: () => setHovered(true),
183
+ onMouseLeave: () => {
184
+ setHovered(false);
185
+ setPressed(false);
186
+ },
187
+ onMouseDown: () => setPressed(true),
188
+ onMouseUp: () => setPressed(false)
189
+ },
190
+ icon && /* @__PURE__ */ React2.createElement("span", null, icon),
191
+ label
192
+ );
193
+ };
194
+ export {
195
+ Button,
196
+ Card
197
+ };
package/package.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "vanta-ui",
3
+ "version": "1.0.0",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "files": ["dist"],
8
+ "scripts": {
9
+ "build": "tsup"
10
+ },
11
+ "keywords": [],
12
+ "author": "Angesh Chauhan",
13
+ "license": "ISC",
14
+ "peerdependencies": {
15
+ "react": ">=18"
16
+ },
17
+ "devDependencies": {
18
+ "tsup": "^8.5.1",
19
+ "typescript": "^7.0.2"
20
+ }
21
+ }