@electroplix/components 0.0.1 → 0.1.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/README.md +114 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +365 -0
- package/dist/src/index.d.ts +6 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/lib/Navbar.d.ts +5 -0
- package/dist/src/lib/Navbar.d.ts.map +1 -0
- package/dist/src/lib/config.d.ts +36 -0
- package/dist/src/lib/config.d.ts.map +1 -0
- package/dist/src/lib/icons.d.ts +10 -0
- package/dist/src/lib/icons.d.ts.map +1 -0
- package/dist/src/lib/provider.d.ts +38 -0
- package/dist/src/lib/provider.d.ts.map +1 -0
- package/dist/src/lib/types.d.ts +66 -0
- package/dist/src/lib/types.d.ts.map +1 -0
- package/package.json +25 -4
package/dist/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# @electroplix/components
|
|
2
|
+
|
|
3
|
+
Parametric, config-driven React UI components.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @electroplix/components
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @electroplix/components
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
> **Peer dependencies:** `react >=18` and `react-dom >=18`.
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Navbar } from "@electroplix/components";
|
|
19
|
+
|
|
20
|
+
export default function Page() {
|
|
21
|
+
return (
|
|
22
|
+
<Navbar
|
|
23
|
+
logoText="MyBrand"
|
|
24
|
+
links={[
|
|
25
|
+
{ label: "Home", href: "/" },
|
|
26
|
+
{ label: "Docs", href: "/docs" },
|
|
27
|
+
]}
|
|
28
|
+
ctaText="Sign Up"
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Global configuration
|
|
35
|
+
|
|
36
|
+
Create a config file and wrap your app with `ElectroplixProvider` to set
|
|
37
|
+
style defaults for **every** component instance:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
// electroplix.config.ts
|
|
41
|
+
import { defineConfig } from "@electroplix/components";
|
|
42
|
+
|
|
43
|
+
export default defineConfig({
|
|
44
|
+
navbar: {
|
|
45
|
+
bgColor: "#22223B",
|
|
46
|
+
textColor: "#F2E9E4",
|
|
47
|
+
accentColor: "#C9ADA7",
|
|
48
|
+
borderColor: "#4A4E69",
|
|
49
|
+
fontFamily: "Roboto, sans-serif",
|
|
50
|
+
height: 80,
|
|
51
|
+
padding: 32,
|
|
52
|
+
sticky: true,
|
|
53
|
+
showSearch: true,
|
|
54
|
+
showCTA: true,
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
// app/layout.tsx (Next.js App Router example)
|
|
61
|
+
import { ElectroplixProvider } from "@electroplix/components";
|
|
62
|
+
import config from "../electroplix.config";
|
|
63
|
+
|
|
64
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
65
|
+
return (
|
|
66
|
+
<html lang="en">
|
|
67
|
+
<body>
|
|
68
|
+
<ElectroplixProvider config={config}>
|
|
69
|
+
{children}
|
|
70
|
+
</ElectroplixProvider>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Components will merge configuration in priority order:
|
|
78
|
+
1. **Per-instance** `config` prop (highest)
|
|
79
|
+
2. **Global** `ElectroplixProvider` config
|
|
80
|
+
3. **Built-in** defaults
|
|
81
|
+
|
|
82
|
+
## API reference
|
|
83
|
+
|
|
84
|
+
### `<Navbar>`
|
|
85
|
+
|
|
86
|
+
| Prop | Type | Default | Description |
|
|
87
|
+
|------|------|---------|-------------|
|
|
88
|
+
| `logoText` | `string` | `"Electroplix"` | Brand text |
|
|
89
|
+
| `logoHref` | `string` | `"/"` | Logo link target |
|
|
90
|
+
| `links` | `NavLink[]` | `[]` | Navigation links |
|
|
91
|
+
| `ctaText` | `string` | `"Get Started"` | CTA button label |
|
|
92
|
+
| `ctaHref` | `string` | `"#"` | CTA button href |
|
|
93
|
+
| `searchPlaceholder` | `string` | `"Search…"` | Search input placeholder |
|
|
94
|
+
| `onSearch` | `(q: string) => void` | — | Search callback |
|
|
95
|
+
| `config` | `NavbarConfig` | — | Per-instance style overrides |
|
|
96
|
+
|
|
97
|
+
### `NavbarConfig` (global or per-instance)
|
|
98
|
+
|
|
99
|
+
| Key | Type | Default |
|
|
100
|
+
|-----|------|---------|
|
|
101
|
+
| `bgColor` | `string` | `"#0B0B0C"` |
|
|
102
|
+
| `textColor` | `string` | `"#F3F4F6"` |
|
|
103
|
+
| `accentColor` | `string` | `"#8B5CF6"` |
|
|
104
|
+
| `borderColor` | `string` | `"rgba(255,255,255,0.1)"` |
|
|
105
|
+
| `fontFamily` | `string` | `"Inter, ui-sans-serif, system-ui"` |
|
|
106
|
+
| `height` | `number` | `72` |
|
|
107
|
+
| `padding` | `number` | `24` |
|
|
108
|
+
| `sticky` | `boolean` | `false` |
|
|
109
|
+
| `showSearch` | `boolean` | `false` |
|
|
110
|
+
| `showCTA` | `boolean` | `false` |
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src\\index";
|
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
import { useMemo, useContext, createContext } from 'react';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
function _extends() {
|
|
5
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
6
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
7
|
+
var t = arguments[e];
|
|
8
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
9
|
+
}
|
|
10
|
+
return n;
|
|
11
|
+
}, _extends.apply(null, arguments);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* ------------------------------------------------------------------ */
|
|
15
|
+
/* @electroplix/components – configuration helpers */
|
|
16
|
+
/* ------------------------------------------------------------------ */
|
|
17
|
+
|
|
18
|
+
/* ----------------------- default values --------------------------- */
|
|
19
|
+
|
|
20
|
+
/** Built-in default Navbar styling / behaviour. */
|
|
21
|
+
const defaultNavbarConfig = {
|
|
22
|
+
bgColor: "#0B0B0C",
|
|
23
|
+
textColor: "#F3F4F6",
|
|
24
|
+
accentColor: "#8B5CF6",
|
|
25
|
+
borderColor: "rgba(255,255,255,0.1)",
|
|
26
|
+
fontFamily: "Inter, ui-sans-serif, system-ui",
|
|
27
|
+
height: 72,
|
|
28
|
+
padding: 24,
|
|
29
|
+
sticky: false,
|
|
30
|
+
showSearch: false,
|
|
31
|
+
showCTA: false
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/** Built-in default global configuration. */
|
|
35
|
+
const defaultConfig = {
|
|
36
|
+
navbar: _extends({}, defaultNavbarConfig)
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/* ----------------------- defineConfig ----------------------------- */
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Type-safe helper for authoring an Electroplix configuration file.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```ts
|
|
46
|
+
* // electroplix.config.ts
|
|
47
|
+
* import { defineConfig } from "@electroplix/components";
|
|
48
|
+
*
|
|
49
|
+
* export default defineConfig({
|
|
50
|
+
* navbar: {
|
|
51
|
+
* bgColor: "#22223B",
|
|
52
|
+
* textColor: "#F2E9E4",
|
|
53
|
+
* accentColor: "#C9ADA7",
|
|
54
|
+
* borderColor: "#4A4E69",
|
|
55
|
+
* fontFamily: "Roboto, sans-serif",
|
|
56
|
+
* height: 80,
|
|
57
|
+
* padding: 32,
|
|
58
|
+
* sticky: true,
|
|
59
|
+
* showSearch: true,
|
|
60
|
+
* showCTA: true,
|
|
61
|
+
* },
|
|
62
|
+
* });
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
function defineConfig(config) {
|
|
66
|
+
return config;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* ----------------------- merge utility ---------------------------- */
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Shallow-merge helper. Later sources win; `undefined` values in
|
|
73
|
+
* a source are ignored so partial overrides work correctly.
|
|
74
|
+
*/
|
|
75
|
+
function mergeConfig(target, ...sources) {
|
|
76
|
+
const result = _extends({}, target);
|
|
77
|
+
for (const source of sources) {
|
|
78
|
+
if (!source) continue;
|
|
79
|
+
for (const key of Object.keys(source)) {
|
|
80
|
+
if (source[key] !== undefined) {
|
|
81
|
+
result[key] = source[key];
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return result;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const ElectroplixContext = /*#__PURE__*/createContext(defaultConfig);
|
|
89
|
+
/**
|
|
90
|
+
* Provides global configuration to every `@electroplix/components`
|
|
91
|
+
* component rendered inside it.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```tsx
|
|
95
|
+
* // app/layout.tsx
|
|
96
|
+
* import { ElectroplixProvider } from "@electroplix/components";
|
|
97
|
+
* import config from "../electroplix.config";
|
|
98
|
+
*
|
|
99
|
+
* export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
100
|
+
* return (
|
|
101
|
+
* <html>
|
|
102
|
+
* <body>
|
|
103
|
+
* <ElectroplixProvider config={config}>
|
|
104
|
+
* {children}
|
|
105
|
+
* </ElectroplixProvider>
|
|
106
|
+
* </body>
|
|
107
|
+
* </html>
|
|
108
|
+
* );
|
|
109
|
+
* }
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
function ElectroplixProvider({
|
|
113
|
+
config,
|
|
114
|
+
children
|
|
115
|
+
}) {
|
|
116
|
+
const value = useMemo(() => config, [config]);
|
|
117
|
+
return /*#__PURE__*/jsx(ElectroplixContext.Provider, {
|
|
118
|
+
value: value,
|
|
119
|
+
children: children
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Returns the global Electroplix configuration from the nearest
|
|
125
|
+
* `<ElectroplixProvider>`. Falls back to built-in defaults when
|
|
126
|
+
* no provider is present.
|
|
127
|
+
*/
|
|
128
|
+
function useElectroplixConfig() {
|
|
129
|
+
return useContext(ElectroplixContext);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* ------------------------------------------------------------------ */
|
|
133
|
+
/* @electroplix/components – inline SVG icons */
|
|
134
|
+
/* */
|
|
135
|
+
/* Replaces `lucide-react` to avoid bundling a 3rd-party library */
|
|
136
|
+
/* that carries its own React dependency (which causes the infamous */
|
|
137
|
+
/* "production vs development" element mismatch in React 19). */
|
|
138
|
+
/* ------------------------------------------------------------------ */
|
|
139
|
+
|
|
140
|
+
const svgBase = {
|
|
141
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
142
|
+
fill: "none",
|
|
143
|
+
stroke: "currentColor",
|
|
144
|
+
strokeWidth: 2,
|
|
145
|
+
strokeLinecap: "round",
|
|
146
|
+
strokeLinejoin: "round",
|
|
147
|
+
viewBox: "0 0 24 24"
|
|
148
|
+
};
|
|
149
|
+
function SearchIcon({
|
|
150
|
+
size = 16,
|
|
151
|
+
style
|
|
152
|
+
}) {
|
|
153
|
+
return /*#__PURE__*/jsxs("svg", _extends({}, svgBase, {
|
|
154
|
+
width: size,
|
|
155
|
+
height: size,
|
|
156
|
+
style: style,
|
|
157
|
+
children: [/*#__PURE__*/jsx("circle", {
|
|
158
|
+
cx: "11",
|
|
159
|
+
cy: "11",
|
|
160
|
+
r: "8"
|
|
161
|
+
}), /*#__PURE__*/jsx("path", {
|
|
162
|
+
d: "m21 21-4.3-4.3"
|
|
163
|
+
})]
|
|
164
|
+
}));
|
|
165
|
+
}
|
|
166
|
+
function MenuIcon({
|
|
167
|
+
size = 20,
|
|
168
|
+
style
|
|
169
|
+
}) {
|
|
170
|
+
return /*#__PURE__*/jsxs("svg", _extends({}, svgBase, {
|
|
171
|
+
width: size,
|
|
172
|
+
height: size,
|
|
173
|
+
style: style,
|
|
174
|
+
children: [/*#__PURE__*/jsx("line", {
|
|
175
|
+
x1: "4",
|
|
176
|
+
x2: "20",
|
|
177
|
+
y1: "12",
|
|
178
|
+
y2: "12"
|
|
179
|
+
}), /*#__PURE__*/jsx("line", {
|
|
180
|
+
x1: "4",
|
|
181
|
+
x2: "20",
|
|
182
|
+
y1: "6",
|
|
183
|
+
y2: "6"
|
|
184
|
+
}), /*#__PURE__*/jsx("line", {
|
|
185
|
+
x1: "4",
|
|
186
|
+
x2: "20",
|
|
187
|
+
y1: "18",
|
|
188
|
+
y2: "18"
|
|
189
|
+
})]
|
|
190
|
+
}));
|
|
191
|
+
}
|
|
192
|
+
function ArrowRightIcon({
|
|
193
|
+
size = 14,
|
|
194
|
+
style
|
|
195
|
+
}) {
|
|
196
|
+
return /*#__PURE__*/jsxs("svg", _extends({}, svgBase, {
|
|
197
|
+
width: size,
|
|
198
|
+
height: size,
|
|
199
|
+
style: style,
|
|
200
|
+
children: [/*#__PURE__*/jsx("path", {
|
|
201
|
+
d: "M5 12h14"
|
|
202
|
+
}), /*#__PURE__*/jsx("path", {
|
|
203
|
+
d: "m12 5 7 7-7 7"
|
|
204
|
+
})]
|
|
205
|
+
}));
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
const Navbar = ({
|
|
209
|
+
logoText: _logoText = "Electroplix",
|
|
210
|
+
logoHref: _logoHref = "/",
|
|
211
|
+
links: _links = [],
|
|
212
|
+
ctaText: _ctaText = "Get Started",
|
|
213
|
+
ctaHref: _ctaHref = "#",
|
|
214
|
+
searchPlaceholder: _searchPlaceholder = "Search\u2026",
|
|
215
|
+
onSearch,
|
|
216
|
+
config: instanceConfig
|
|
217
|
+
}) => {
|
|
218
|
+
/* ---------- resolve configuration -------------------------------- */
|
|
219
|
+
const globalConfig = useElectroplixConfig();
|
|
220
|
+
const cfg = mergeConfig(defaultNavbarConfig, globalConfig.navbar, instanceConfig);
|
|
221
|
+
const {
|
|
222
|
+
bgColor,
|
|
223
|
+
textColor,
|
|
224
|
+
accentColor,
|
|
225
|
+
borderColor,
|
|
226
|
+
fontFamily,
|
|
227
|
+
height,
|
|
228
|
+
padding,
|
|
229
|
+
sticky,
|
|
230
|
+
showSearch,
|
|
231
|
+
showCTA
|
|
232
|
+
} = cfg;
|
|
233
|
+
|
|
234
|
+
/* ---------- render ----------------------------------------------- */
|
|
235
|
+
return /*#__PURE__*/jsxs("header", {
|
|
236
|
+
style: {
|
|
237
|
+
background: bgColor,
|
|
238
|
+
backdropFilter: "blur(12px)",
|
|
239
|
+
color: textColor,
|
|
240
|
+
fontFamily,
|
|
241
|
+
height,
|
|
242
|
+
paddingInline: padding,
|
|
243
|
+
width: "100%",
|
|
244
|
+
display: "flex",
|
|
245
|
+
alignItems: "center",
|
|
246
|
+
justifyContent: "space-between",
|
|
247
|
+
position: sticky ? "sticky" : "relative",
|
|
248
|
+
top: sticky ? 0 : "auto",
|
|
249
|
+
zIndex: sticky ? 40 : "auto",
|
|
250
|
+
borderBottom: `1px solid ${borderColor}`,
|
|
251
|
+
boxSizing: "border-box"
|
|
252
|
+
},
|
|
253
|
+
children: [/*#__PURE__*/jsx("a", {
|
|
254
|
+
href: _logoHref,
|
|
255
|
+
style: {
|
|
256
|
+
fontWeight: 800,
|
|
257
|
+
fontSize: 20,
|
|
258
|
+
textDecoration: "none",
|
|
259
|
+
color: textColor,
|
|
260
|
+
background: `linear-gradient(135deg, ${textColor}, ${accentColor})`,
|
|
261
|
+
WebkitBackgroundClip: "text",
|
|
262
|
+
WebkitTextFillColor: "transparent",
|
|
263
|
+
backgroundClip: "text"
|
|
264
|
+
},
|
|
265
|
+
children: _logoText
|
|
266
|
+
}), _links.length > 0 && /*#__PURE__*/jsx("nav", {
|
|
267
|
+
style: {
|
|
268
|
+
display: "flex",
|
|
269
|
+
alignItems: "center",
|
|
270
|
+
gap: 32
|
|
271
|
+
},
|
|
272
|
+
children: _links.map(l => /*#__PURE__*/jsx("a", {
|
|
273
|
+
href: l.href,
|
|
274
|
+
style: {
|
|
275
|
+
color: textColor,
|
|
276
|
+
textDecoration: "none",
|
|
277
|
+
fontWeight: 500,
|
|
278
|
+
fontSize: 14,
|
|
279
|
+
opacity: 0.8,
|
|
280
|
+
transition: "opacity 0.2s ease, color 0.2s ease"
|
|
281
|
+
},
|
|
282
|
+
onMouseEnter: e => {
|
|
283
|
+
e.currentTarget.style.opacity = "1";
|
|
284
|
+
e.currentTarget.style.color = accentColor;
|
|
285
|
+
},
|
|
286
|
+
onMouseLeave: e => {
|
|
287
|
+
e.currentTarget.style.opacity = "0.8";
|
|
288
|
+
e.currentTarget.style.color = textColor;
|
|
289
|
+
},
|
|
290
|
+
children: l.label
|
|
291
|
+
}, l.label))
|
|
292
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
293
|
+
style: {
|
|
294
|
+
display: "flex",
|
|
295
|
+
alignItems: "center",
|
|
296
|
+
gap: 12
|
|
297
|
+
},
|
|
298
|
+
children: [showSearch && /*#__PURE__*/jsxs("div", {
|
|
299
|
+
style: {
|
|
300
|
+
display: "flex",
|
|
301
|
+
alignItems: "center",
|
|
302
|
+
gap: 10,
|
|
303
|
+
padding: "10px 14px",
|
|
304
|
+
borderRadius: 10,
|
|
305
|
+
border: `1px solid ${borderColor}`,
|
|
306
|
+
background: "rgba(255,255,255,0.03)"
|
|
307
|
+
},
|
|
308
|
+
children: [/*#__PURE__*/jsx(SearchIcon, {
|
|
309
|
+
size: 16,
|
|
310
|
+
style: {
|
|
311
|
+
opacity: 0.5
|
|
312
|
+
}
|
|
313
|
+
}), /*#__PURE__*/jsx("input", {
|
|
314
|
+
placeholder: _searchPlaceholder,
|
|
315
|
+
onChange: onSearch ? e => onSearch(e.target.value) : undefined,
|
|
316
|
+
style: {
|
|
317
|
+
background: "transparent",
|
|
318
|
+
border: "none",
|
|
319
|
+
outline: "none",
|
|
320
|
+
color: textColor,
|
|
321
|
+
fontSize: 14,
|
|
322
|
+
width: 140
|
|
323
|
+
}
|
|
324
|
+
})]
|
|
325
|
+
}), showCTA && /*#__PURE__*/jsxs("a", {
|
|
326
|
+
href: _ctaHref,
|
|
327
|
+
style: {
|
|
328
|
+
display: "flex",
|
|
329
|
+
alignItems: "center",
|
|
330
|
+
gap: 8,
|
|
331
|
+
padding: "10px 20px",
|
|
332
|
+
borderRadius: 10,
|
|
333
|
+
background: `linear-gradient(135deg, ${accentColor}, ${accentColor}CC)`,
|
|
334
|
+
color: "#fff",
|
|
335
|
+
textDecoration: "none",
|
|
336
|
+
fontWeight: 700,
|
|
337
|
+
fontSize: 14,
|
|
338
|
+
boxShadow: `0 6px 20px ${accentColor}40`
|
|
339
|
+
},
|
|
340
|
+
children: [_ctaText, /*#__PURE__*/jsx(ArrowRightIcon, {
|
|
341
|
+
size: 14
|
|
342
|
+
})]
|
|
343
|
+
}), /*#__PURE__*/jsx("button", {
|
|
344
|
+
"aria-label": "Menu",
|
|
345
|
+
style: {
|
|
346
|
+
display: "none",
|
|
347
|
+
width: 40,
|
|
348
|
+
height: 40,
|
|
349
|
+
borderRadius: 10,
|
|
350
|
+
border: `1px solid ${borderColor}`,
|
|
351
|
+
background: "transparent",
|
|
352
|
+
color: textColor,
|
|
353
|
+
cursor: "pointer",
|
|
354
|
+
alignItems: "center",
|
|
355
|
+
justifyContent: "center"
|
|
356
|
+
},
|
|
357
|
+
children: /*#__PURE__*/jsx(MenuIcon, {
|
|
358
|
+
size: 20
|
|
359
|
+
})
|
|
360
|
+
})]
|
|
361
|
+
})]
|
|
362
|
+
});
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
export { ElectroplixProvider, Navbar, defaultConfig, defaultNavbarConfig, defineConfig, mergeConfig, useElectroplixConfig };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export type { NavLink, NavbarProps, NavbarConfig, ElectroplixConfig, } from "./lib/types";
|
|
2
|
+
export { defineConfig, defaultNavbarConfig, defaultConfig, mergeConfig, } from "./lib/config";
|
|
3
|
+
export { ElectroplixProvider, useElectroplixConfig } from "./lib/provider";
|
|
4
|
+
export type { ElectroplixProviderProps } from "./lib/provider";
|
|
5
|
+
export { Navbar } from "./lib/Navbar";
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EACV,OAAO,EACP,WAAW,EACX,YAAY,EACZ,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,YAAY,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/lib/Navbar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8KlC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { ElectroplixConfig, NavbarConfig } from "./types";
|
|
2
|
+
/** Built-in default Navbar styling / behaviour. */
|
|
3
|
+
export declare const defaultNavbarConfig: Required<NavbarConfig>;
|
|
4
|
+
/** Built-in default global configuration. */
|
|
5
|
+
export declare const defaultConfig: ElectroplixConfig;
|
|
6
|
+
/**
|
|
7
|
+
* Type-safe helper for authoring an Electroplix configuration file.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```ts
|
|
11
|
+
* // electroplix.config.ts
|
|
12
|
+
* import { defineConfig } from "@electroplix/components";
|
|
13
|
+
*
|
|
14
|
+
* export default defineConfig({
|
|
15
|
+
* navbar: {
|
|
16
|
+
* bgColor: "#22223B",
|
|
17
|
+
* textColor: "#F2E9E4",
|
|
18
|
+
* accentColor: "#C9ADA7",
|
|
19
|
+
* borderColor: "#4A4E69",
|
|
20
|
+
* fontFamily: "Roboto, sans-serif",
|
|
21
|
+
* height: 80,
|
|
22
|
+
* padding: 32,
|
|
23
|
+
* sticky: true,
|
|
24
|
+
* showSearch: true,
|
|
25
|
+
* showCTA: true,
|
|
26
|
+
* },
|
|
27
|
+
* });
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export declare function defineConfig(config: ElectroplixConfig): ElectroplixConfig;
|
|
31
|
+
/**
|
|
32
|
+
* Shallow-merge helper. Later sources win; `undefined` values in
|
|
33
|
+
* a source are ignored so partial overrides work correctly.
|
|
34
|
+
*/
|
|
35
|
+
export declare function mergeConfig<T extends Record<string, unknown>>(target: T, ...sources: Array<Partial<T> | undefined>): T;
|
|
36
|
+
//# sourceMappingURL=config.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/lib/config.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI/D,mDAAmD;AACnD,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,YAAY,CAWtD,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,iBAE3B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CAEzE;AAID;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3D,MAAM,EAAE,CAAC,EACT,GAAG,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GACxC,CAAC,CAWH"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { CSSProperties } from "react";
|
|
2
|
+
interface IconProps {
|
|
3
|
+
size?: number;
|
|
4
|
+
style?: CSSProperties;
|
|
5
|
+
}
|
|
6
|
+
export declare function SearchIcon({ size, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function MenuIcon({ size, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function ArrowRightIcon({ size, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=icons.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/lib/icons.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1D,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAYD,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,KAAK,EAAE,EAAE,SAAS,2CAOzD;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,KAAK,EAAE,EAAE,SAAS,2CAQvD;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAS,EAAE,KAAK,EAAE,EAAE,SAAS,2CAO7D"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { ElectroplixConfig } from "./types";
|
|
3
|
+
export interface ElectroplixProviderProps {
|
|
4
|
+
/** Global configuration for all Electroplix components. */
|
|
5
|
+
config: ElectroplixConfig;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Provides global configuration to every `@electroplix/components`
|
|
10
|
+
* component rendered inside it.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* // app/layout.tsx
|
|
15
|
+
* import { ElectroplixProvider } from "@electroplix/components";
|
|
16
|
+
* import config from "../electroplix.config";
|
|
17
|
+
*
|
|
18
|
+
* export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
19
|
+
* return (
|
|
20
|
+
* <html>
|
|
21
|
+
* <body>
|
|
22
|
+
* <ElectroplixProvider config={config}>
|
|
23
|
+
* {children}
|
|
24
|
+
* </ElectroplixProvider>
|
|
25
|
+
* </body>
|
|
26
|
+
* </html>
|
|
27
|
+
* );
|
|
28
|
+
* }
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare function ElectroplixProvider({ config, children, }: ElectroplixProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
/**
|
|
33
|
+
* Returns the global Electroplix configuration from the nearest
|
|
34
|
+
* `<ElectroplixProvider>`. Falls back to built-in defaults when
|
|
35
|
+
* no provider is present.
|
|
36
|
+
*/
|
|
37
|
+
export declare function useElectroplixConfig(): ElectroplixConfig;
|
|
38
|
+
//# sourceMappingURL=provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/lib/provider.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKjD,MAAM,WAAW,wBAAwB;IACvC,2DAA2D;IAC3D,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,GACT,EAAE,wBAAwB,2CAO1B;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/** A single navigation link. */
|
|
2
|
+
export interface NavLink {
|
|
3
|
+
label: string;
|
|
4
|
+
href: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Style / behaviour configuration for the Navbar component.
|
|
8
|
+
*
|
|
9
|
+
* These values can be set globally via `ElectroplixProvider` or
|
|
10
|
+
* per-instance through the `config` prop on `<Navbar>`.
|
|
11
|
+
*/
|
|
12
|
+
export interface NavbarConfig {
|
|
13
|
+
/** Background colour. @default "#0B0B0C" */
|
|
14
|
+
bgColor?: string;
|
|
15
|
+
/** Primary text colour. @default "#F3F4F6" */
|
|
16
|
+
textColor?: string;
|
|
17
|
+
/** Accent colour for gradients. @default "#8B5CF6" */
|
|
18
|
+
accentColor?: string;
|
|
19
|
+
/** Bottom-border colour. @default "rgba(255,255,255,0.1)" */
|
|
20
|
+
borderColor?: string;
|
|
21
|
+
/** Font family stack. @default "Inter, ui-sans-serif, system-ui" */
|
|
22
|
+
fontFamily?: string;
|
|
23
|
+
/** Height in px. @default 72 */
|
|
24
|
+
height?: number;
|
|
25
|
+
/** Inline padding in px. @default 24 */
|
|
26
|
+
padding?: number;
|
|
27
|
+
/** Stick to viewport top. @default false */
|
|
28
|
+
sticky?: boolean;
|
|
29
|
+
/** Show the search field. @default false */
|
|
30
|
+
showSearch?: boolean;
|
|
31
|
+
/** Show the call-to-action button. @default false */
|
|
32
|
+
showCTA?: boolean;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Content / data props passed directly to `<Navbar>`.
|
|
36
|
+
*
|
|
37
|
+
* Styling properties should be provided via the global config
|
|
38
|
+
* (`ElectroplixProvider`) or the per-instance `config` prop.
|
|
39
|
+
*/
|
|
40
|
+
export interface NavbarProps {
|
|
41
|
+
/** Brand / logo text. @default "Electroplix" */
|
|
42
|
+
logoText?: string;
|
|
43
|
+
/** Logo link target. @default "/" */
|
|
44
|
+
logoHref?: string;
|
|
45
|
+
/** Navigation links. @default [] */
|
|
46
|
+
links?: NavLink[];
|
|
47
|
+
/** CTA button label. @default "Get Started" */
|
|
48
|
+
ctaText?: string;
|
|
49
|
+
/** CTA button href. @default "#" */
|
|
50
|
+
ctaHref?: string;
|
|
51
|
+
/** Search placeholder text. @default "Search…" */
|
|
52
|
+
searchPlaceholder?: string;
|
|
53
|
+
/** Fires when the search input value changes. */
|
|
54
|
+
onSearch?: (query: string) => void;
|
|
55
|
+
/** Per-instance style overrides (highest priority). */
|
|
56
|
+
config?: NavbarConfig;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Global configuration object for every `@electroplix/components`
|
|
60
|
+
* component. Pass it to `<ElectroplixProvider config={…}>`.
|
|
61
|
+
*/
|
|
62
|
+
export interface ElectroplixConfig {
|
|
63
|
+
/** Navbar component configuration. */
|
|
64
|
+
navbar?: NavbarConfig;
|
|
65
|
+
}
|
|
66
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/types.ts"],"names":[],"mappings":"AAIA,gCAAgC;AAChC,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAMD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAMD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,MAAM,CAAC,EAAE,YAAY,CAAC;CAIvB"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@electroplix/components",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Parametric, config-driven UI components by Electroplix.",
|
|
4
5
|
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
5
7
|
"main": "./dist/index.esm.js",
|
|
6
8
|
"module": "./dist/index.esm.js",
|
|
7
|
-
"types": "./dist/index.
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
8
10
|
"exports": {
|
|
9
11
|
"./package.json": "./package.json",
|
|
10
12
|
".": {
|
|
11
13
|
"@electroplix-workspace/source": "./src/index.ts",
|
|
12
|
-
"types": "./dist/index.
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
13
15
|
"import": "./dist/index.esm.js",
|
|
14
16
|
"default": "./dist/index.esm.js"
|
|
15
17
|
}
|
|
@@ -17,5 +19,24 @@
|
|
|
17
19
|
"files": [
|
|
18
20
|
"dist",
|
|
19
21
|
"!**/*.tsbuildinfo"
|
|
20
|
-
]
|
|
22
|
+
],
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"react": ">=18.0.0",
|
|
25
|
+
"react-dom": ">=18.0.0"
|
|
26
|
+
},
|
|
27
|
+
"peerDependenciesMeta": {
|
|
28
|
+
"react-dom": {
|
|
29
|
+
"optional": true
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"keywords": [
|
|
33
|
+
"react",
|
|
34
|
+
"components",
|
|
35
|
+
"ui",
|
|
36
|
+
"navbar",
|
|
37
|
+
"electroplix",
|
|
38
|
+
"configurable",
|
|
39
|
+
"parametric"
|
|
40
|
+
],
|
|
41
|
+
"license": "MIT"
|
|
21
42
|
}
|