@rcnr/theme 1.0.0 → 2.0.1
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.d.mts +44 -0
- package/dist/index.d.ts +44 -0
- package/dist/index.js +261 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +231 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +32 -5
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface RCNRHeaderProps {
|
|
5
|
+
toolName: string;
|
|
6
|
+
dashboardUrl?: string;
|
|
7
|
+
extraNavItems?: {
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
}[];
|
|
12
|
+
userAvatar?: ReactNode;
|
|
13
|
+
onHowItWorks?: () => void;
|
|
14
|
+
onReportIssue?: () => void;
|
|
15
|
+
onRequestTool?: () => void;
|
|
16
|
+
}
|
|
17
|
+
interface RCNRSubNavProps {
|
|
18
|
+
tabs: {
|
|
19
|
+
label: string;
|
|
20
|
+
href?: string;
|
|
21
|
+
onClick?: () => void;
|
|
22
|
+
active: boolean;
|
|
23
|
+
icon?: ReactNode;
|
|
24
|
+
variant?: 'default' | 'warning';
|
|
25
|
+
}[];
|
|
26
|
+
}
|
|
27
|
+
interface RCNRFooterProps {
|
|
28
|
+
toolName: string;
|
|
29
|
+
linkUrl?: string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
declare function RCNRHeader({ toolName, dashboardUrl, extraNavItems, userAvatar, onHowItWorks, onReportIssue, onRequestTool, }: RCNRHeaderProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function RCNRSubNav({ tabs }: RCNRSubNavProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
|
|
36
|
+
declare function RCNRFooter({ toolName, linkUrl, }: RCNRFooterProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
interface RCNRMountainLogoProps {
|
|
39
|
+
href?: string;
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare function RCNRMountainLogo({ href, className, }: RCNRMountainLogoProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
export { RCNRFooter, type RCNRFooterProps, RCNRHeader, type RCNRHeaderProps, RCNRMountainLogo, RCNRSubNav, type RCNRSubNavProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface RCNRHeaderProps {
|
|
5
|
+
toolName: string;
|
|
6
|
+
dashboardUrl?: string;
|
|
7
|
+
extraNavItems?: {
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
}[];
|
|
12
|
+
userAvatar?: ReactNode;
|
|
13
|
+
onHowItWorks?: () => void;
|
|
14
|
+
onReportIssue?: () => void;
|
|
15
|
+
onRequestTool?: () => void;
|
|
16
|
+
}
|
|
17
|
+
interface RCNRSubNavProps {
|
|
18
|
+
tabs: {
|
|
19
|
+
label: string;
|
|
20
|
+
href?: string;
|
|
21
|
+
onClick?: () => void;
|
|
22
|
+
active: boolean;
|
|
23
|
+
icon?: ReactNode;
|
|
24
|
+
variant?: 'default' | 'warning';
|
|
25
|
+
}[];
|
|
26
|
+
}
|
|
27
|
+
interface RCNRFooterProps {
|
|
28
|
+
toolName: string;
|
|
29
|
+
linkUrl?: string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
declare function RCNRHeader({ toolName, dashboardUrl, extraNavItems, userAvatar, onHowItWorks, onReportIssue, onRequestTool, }: RCNRHeaderProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function RCNRSubNav({ tabs }: RCNRSubNavProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
|
|
36
|
+
declare function RCNRFooter({ toolName, linkUrl, }: RCNRFooterProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
interface RCNRMountainLogoProps {
|
|
39
|
+
href?: string;
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare function RCNRMountainLogo({ href, className, }: RCNRMountainLogoProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
export { RCNRFooter, type RCNRFooterProps, RCNRHeader, type RCNRHeaderProps, RCNRMountainLogo, RCNRSubNav, type RCNRSubNavProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
RCNRFooter: () => RCNRFooter_default,
|
|
24
|
+
RCNRHeader: () => RCNRHeader_default,
|
|
25
|
+
RCNRMountainLogo: () => RCNRMountainLogo_default,
|
|
26
|
+
RCNRSubNav: () => RCNRSubNav_default
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(index_exports);
|
|
29
|
+
|
|
30
|
+
// src/RCNRMountainLogo.tsx
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
function RCNRMountainLogo({
|
|
33
|
+
href = "https://teacher.rcnr.net",
|
|
34
|
+
className = ""
|
|
35
|
+
}) {
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
37
|
+
"a",
|
|
38
|
+
{
|
|
39
|
+
href,
|
|
40
|
+
className: `flex items-center justify-center w-10 h-10 rounded-lg bg-brand/10 hover:bg-brand/20 transition-colors ${className}`,
|
|
41
|
+
title: "Back to Dashboard",
|
|
42
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
43
|
+
"svg",
|
|
44
|
+
{
|
|
45
|
+
width: "28",
|
|
46
|
+
height: "24",
|
|
47
|
+
viewBox: "0 0 120 100",
|
|
48
|
+
fill: "none",
|
|
49
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
52
|
+
"path",
|
|
53
|
+
{
|
|
54
|
+
d: "M10,90l26.48-39.76h.31s4.54,5.02,4.54,5.02l.32-.16,23.06-37.14,17.34,28.63,3.65-4.61,30.22,48.03h-8.43c-7.17-12.26-15.51-24.35-23.06-36.26-1.43.52-2.03,3.6-3.49,3.97l-16.31-25.93-21.87,34.36-5.09-5.01-19.48,28.87h-8.19Z",
|
|
55
|
+
fill: "#99D9D9"
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
"path",
|
|
60
|
+
{
|
|
61
|
+
d: "M89.84,90h-5.73c-6.34-8.18-12.93-16.89-19.64-24.65-6.66,8.19-13.04,16.6-19.89,24.65h-5.81l25.69-39.76,25.37,39.76Z",
|
|
62
|
+
fill: "#99D9D9"
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
var RCNRMountainLogo_default = RCNRMountainLogo;
|
|
72
|
+
|
|
73
|
+
// src/RCNRHeader.tsx
|
|
74
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
75
|
+
function NavButton({
|
|
76
|
+
onClick,
|
|
77
|
+
icon,
|
|
78
|
+
label,
|
|
79
|
+
title
|
|
80
|
+
}) {
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
82
|
+
"button",
|
|
83
|
+
{
|
|
84
|
+
onClick,
|
|
85
|
+
className: "flex items-center gap-2 px-3 py-2 text-brand/70 hover:text-brand hover:bg-brand/5 rounded-lg transition-colors",
|
|
86
|
+
title: title ?? label,
|
|
87
|
+
children: [
|
|
88
|
+
icon,
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hidden md:inline text-sm", children: label })
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
var defaultReportIssue = () => window.open("https://rcnr.net/support?type=bug", "_blank");
|
|
95
|
+
var defaultRequestTool = () => window.open("https://rcnr.net/support?type=feature", "_blank");
|
|
96
|
+
function RCNRHeader({
|
|
97
|
+
toolName,
|
|
98
|
+
dashboardUrl = "https://teacher.rcnr.net",
|
|
99
|
+
extraNavItems,
|
|
100
|
+
userAvatar,
|
|
101
|
+
onHowItWorks,
|
|
102
|
+
onReportIssue = defaultReportIssue,
|
|
103
|
+
onRequestTool = defaultRequestTool
|
|
104
|
+
}) {
|
|
105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("header", { className: "glass-card border-b border-brand/15 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RCNRMountainLogo_default, { href: dashboardUrl }),
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xl font-serif text-brand", children: toolName })
|
|
109
|
+
] }),
|
|
110
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
111
|
+
extraNavItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
112
|
+
NavButton,
|
|
113
|
+
{
|
|
114
|
+
onClick: item.onClick,
|
|
115
|
+
icon: item.icon,
|
|
116
|
+
label: item.label
|
|
117
|
+
},
|
|
118
|
+
item.label
|
|
119
|
+
)),
|
|
120
|
+
onHowItWorks && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
121
|
+
NavButton,
|
|
122
|
+
{
|
|
123
|
+
onClick: onHowItWorks,
|
|
124
|
+
label: "How It Works",
|
|
125
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
126
|
+
"svg",
|
|
127
|
+
{
|
|
128
|
+
className: "w-[18px] h-[18px]",
|
|
129
|
+
fill: "none",
|
|
130
|
+
viewBox: "0 0 24 24",
|
|
131
|
+
stroke: "currentColor",
|
|
132
|
+
strokeWidth: 2,
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
136
|
+
"path",
|
|
137
|
+
{
|
|
138
|
+
strokeLinecap: "round",
|
|
139
|
+
strokeLinejoin: "round",
|
|
140
|
+
d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
)
|
|
147
|
+
}
|
|
148
|
+
),
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
150
|
+
NavButton,
|
|
151
|
+
{
|
|
152
|
+
onClick: onReportIssue,
|
|
153
|
+
label: "Report Issue",
|
|
154
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
155
|
+
"svg",
|
|
156
|
+
{
|
|
157
|
+
className: "w-[18px] h-[18px]",
|
|
158
|
+
fill: "none",
|
|
159
|
+
viewBox: "0 0 24 24",
|
|
160
|
+
stroke: "currentColor",
|
|
161
|
+
strokeWidth: 2,
|
|
162
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
163
|
+
"path",
|
|
164
|
+
{
|
|
165
|
+
strokeLinecap: "round",
|
|
166
|
+
strokeLinejoin: "round",
|
|
167
|
+
d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
175
|
+
NavButton,
|
|
176
|
+
{
|
|
177
|
+
onClick: onRequestTool,
|
|
178
|
+
label: "Request Tool",
|
|
179
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
180
|
+
"svg",
|
|
181
|
+
{
|
|
182
|
+
className: "w-[18px] h-[18px]",
|
|
183
|
+
fill: "none",
|
|
184
|
+
viewBox: "0 0 24 24",
|
|
185
|
+
stroke: "currentColor",
|
|
186
|
+
strokeWidth: 2,
|
|
187
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
188
|
+
"path",
|
|
189
|
+
{
|
|
190
|
+
strokeLinecap: "round",
|
|
191
|
+
strokeLinejoin: "round",
|
|
192
|
+
d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
}
|
|
196
|
+
)
|
|
197
|
+
}
|
|
198
|
+
),
|
|
199
|
+
userAvatar
|
|
200
|
+
] })
|
|
201
|
+
] }) });
|
|
202
|
+
}
|
|
203
|
+
var RCNRHeader_default = RCNRHeader;
|
|
204
|
+
|
|
205
|
+
// src/RCNRSubNav.tsx
|
|
206
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
207
|
+
function RCNRSubNav({ tabs }) {
|
|
208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: "flex items-center gap-1 px-6 py-2 border-b border-brand/10 bg-surface/50", children: tabs.map((tab) => {
|
|
209
|
+
const isWarning = tab.variant === "warning";
|
|
210
|
+
const activeClass = isWarning ? "bg-warning/10 text-warning border border-warning/20" : "bg-brand/15 text-brand";
|
|
211
|
+
const inactiveClass = isWarning ? "text-warning/70 hover:text-warning hover:bg-warning/5 border border-warning/10" : "text-brand/50 hover:text-brand hover:bg-brand/5";
|
|
212
|
+
const className = `flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${tab.active ? activeClass : inactiveClass}`;
|
|
213
|
+
if (tab.href) {
|
|
214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("a", { href: tab.href, className, children: [
|
|
215
|
+
tab.icon,
|
|
216
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: tab.label })
|
|
217
|
+
] }, tab.label);
|
|
218
|
+
}
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
220
|
+
"button",
|
|
221
|
+
{
|
|
222
|
+
onClick: tab.onClick,
|
|
223
|
+
className,
|
|
224
|
+
children: [
|
|
225
|
+
tab.icon,
|
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: tab.label })
|
|
227
|
+
]
|
|
228
|
+
},
|
|
229
|
+
tab.label
|
|
230
|
+
);
|
|
231
|
+
}) });
|
|
232
|
+
}
|
|
233
|
+
var RCNRSubNav_default = RCNRSubNav;
|
|
234
|
+
|
|
235
|
+
// src/RCNRFooter.tsx
|
|
236
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
237
|
+
function RCNRFooter({
|
|
238
|
+
toolName,
|
|
239
|
+
linkUrl = "https://rcnr.net"
|
|
240
|
+
}) {
|
|
241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("footer", { className: "mt-auto py-4 text-center text-sm text-brand-dark/50", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
242
|
+
"a",
|
|
243
|
+
{
|
|
244
|
+
href: linkUrl,
|
|
245
|
+
className: "hover:text-brand transition-colors",
|
|
246
|
+
children: [
|
|
247
|
+
toolName,
|
|
248
|
+
" \u2014 Part of the RCNR Teacher Toolbox"
|
|
249
|
+
]
|
|
250
|
+
}
|
|
251
|
+
) });
|
|
252
|
+
}
|
|
253
|
+
var RCNRFooter_default = RCNRFooter;
|
|
254
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
255
|
+
0 && (module.exports = {
|
|
256
|
+
RCNRFooter,
|
|
257
|
+
RCNRHeader,
|
|
258
|
+
RCNRMountainLogo,
|
|
259
|
+
RCNRSubNav
|
|
260
|
+
});
|
|
261
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/RCNRMountainLogo.tsx","../src/RCNRHeader.tsx","../src/RCNRSubNav.tsx","../src/RCNRFooter.tsx"],"sourcesContent":["export { default as RCNRHeader } from './RCNRHeader'\r\nexport { default as RCNRSubNav } from './RCNRSubNav'\r\nexport { default as RCNRFooter } from './RCNRFooter'\r\nexport { default as RCNRMountainLogo } from './RCNRMountainLogo'\r\n\r\nexport type {\r\n RCNRHeaderProps,\r\n RCNRSubNavProps,\r\n RCNRFooterProps,\r\n} from './types'\r\n","interface RCNRMountainLogoProps {\r\n href?: string\r\n className?: string\r\n}\r\n\r\nfunction RCNRMountainLogo({\r\n href = 'https://teacher.rcnr.net',\r\n className = '',\r\n}: RCNRMountainLogoProps) {\r\n return (\r\n <a\r\n href={href}\r\n className={`flex items-center justify-center w-10 h-10 rounded-lg bg-brand/10 hover:bg-brand/20 transition-colors ${className}`}\r\n title=\"Back to Dashboard\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"24\"\r\n viewBox=\"0 0 120 100\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M10,90l26.48-39.76h.31s4.54,5.02,4.54,5.02l.32-.16,23.06-37.14,17.34,28.63,3.65-4.61,30.22,48.03h-8.43c-7.17-12.26-15.51-24.35-23.06-36.26-1.43.52-2.03,3.6-3.49,3.97l-16.31-25.93-21.87,34.36-5.09-5.01-19.48,28.87h-8.19Z\"\r\n fill=\"#99D9D9\"\r\n />\r\n <path\r\n d=\"M89.84,90h-5.73c-6.34-8.18-12.93-16.89-19.64-24.65-6.66,8.19-13.04,16.6-19.89,24.65h-5.81l25.69-39.76,25.37,39.76Z\"\r\n fill=\"#99D9D9\"\r\n />\r\n </svg>\r\n </a>\r\n )\r\n}\r\n\r\nexport default RCNRMountainLogo\r\n","import type { ReactNode } from 'react'\r\nimport type { RCNRHeaderProps } from './types'\r\nimport RCNRMountainLogo from './RCNRMountainLogo'\r\n\r\nfunction NavButton({\r\n onClick,\r\n icon,\r\n label,\r\n title,\r\n}: {\r\n onClick: () => void\r\n icon: ReactNode\r\n label: string\r\n title?: string\r\n}) {\r\n return (\r\n <button\r\n onClick={onClick}\r\n className=\"flex items-center gap-2 px-3 py-2 text-brand/70 hover:text-brand hover:bg-brand/5 rounded-lg transition-colors\"\r\n title={title ?? label}\r\n >\r\n {icon}\r\n <span className=\"hidden md:inline text-sm\">{label}</span>\r\n </button>\r\n )\r\n}\r\n\r\nconst defaultReportIssue = () =>\r\n window.open('https://rcnr.net/support?type=bug', '_blank')\r\n\r\nconst defaultRequestTool = () =>\r\n window.open('https://rcnr.net/support?type=feature', '_blank')\r\n\r\nfunction RCNRHeader({\r\n toolName,\r\n dashboardUrl = 'https://teacher.rcnr.net',\r\n extraNavItems,\r\n userAvatar,\r\n onHowItWorks,\r\n onReportIssue = defaultReportIssue,\r\n onRequestTool = defaultRequestTool,\r\n}: RCNRHeaderProps) {\r\n return (\r\n <header className=\"glass-card border-b border-brand/15 px-6 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n {/* Left: Logo + Tool Name */}\r\n <div className=\"flex items-center gap-4\">\r\n <RCNRMountainLogo href={dashboardUrl} />\r\n <span className=\"text-xl font-serif text-brand\">{toolName}</span>\r\n </div>\r\n\r\n {/* Right: Nav Actions */}\r\n <div className=\"flex items-center gap-2\">\r\n {/* Tool-specific nav items first */}\r\n {extraNavItems?.map((item) => (\r\n <NavButton\r\n key={item.label}\r\n onClick={item.onClick}\r\n icon={item.icon}\r\n label={item.label}\r\n />\r\n ))}\r\n\r\n {/* Standard nav items in fixed order */}\r\n {onHowItWorks && (\r\n <NavButton\r\n onClick={onHowItWorks}\r\n label=\"How It Works\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3\"\r\n />\r\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\r\n </svg>\r\n }\r\n />\r\n )}\r\n\r\n <NavButton\r\n onClick={onReportIssue}\r\n label=\"Report Issue\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\r\n />\r\n </svg>\r\n }\r\n />\r\n\r\n <NavButton\r\n onClick={onRequestTool}\r\n label=\"Request Tool\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\r\n />\r\n </svg>\r\n }\r\n />\r\n\r\n {userAvatar}\r\n </div>\r\n </div>\r\n </header>\r\n )\r\n}\r\n\r\nexport default RCNRHeader\r\n","import type { RCNRSubNavProps } from './types'\r\n\r\nfunction RCNRSubNav({ tabs }: RCNRSubNavProps) {\r\n return (\r\n <nav className=\"flex items-center gap-1 px-6 py-2 border-b border-brand/10 bg-surface/50\">\r\n {tabs.map((tab) => {\r\n const isWarning = tab.variant === 'warning'\r\n const activeClass = isWarning\r\n ? 'bg-warning/10 text-warning border border-warning/20'\r\n : 'bg-brand/15 text-brand'\r\n const inactiveClass = isWarning\r\n ? 'text-warning/70 hover:text-warning hover:bg-warning/5 border border-warning/10'\r\n : 'text-brand/50 hover:text-brand hover:bg-brand/5'\r\n\r\n const className = `flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${\r\n tab.active ? activeClass : inactiveClass\r\n }`\r\n\r\n if (tab.href) {\r\n return (\r\n <a key={tab.label} href={tab.href} className={className}>\r\n {tab.icon}\r\n <span>{tab.label}</span>\r\n </a>\r\n )\r\n }\r\n\r\n return (\r\n <button\r\n key={tab.label}\r\n onClick={tab.onClick}\r\n className={className}\r\n >\r\n {tab.icon}\r\n <span>{tab.label}</span>\r\n </button>\r\n )\r\n })}\r\n </nav>\r\n )\r\n}\r\n\r\nexport default RCNRSubNav\r\n","import type { RCNRFooterProps } from './types'\r\n\r\nfunction RCNRFooter({\r\n toolName,\r\n linkUrl = 'https://rcnr.net',\r\n}: RCNRFooterProps) {\r\n return (\r\n <footer className=\"mt-auto py-4 text-center text-sm text-brand-dark/50\">\r\n <a\r\n href={linkUrl}\r\n className=\"hover:text-brand transition-colors\"\r\n >\r\n {toolName} — Part of the RCNR Teacher Toolbox\r\n </a>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default RCNRFooter\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
// src/RCNRMountainLogo.tsx
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
function RCNRMountainLogo({
|
|
4
|
+
href = "https://teacher.rcnr.net",
|
|
5
|
+
className = ""
|
|
6
|
+
}) {
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"a",
|
|
9
|
+
{
|
|
10
|
+
href,
|
|
11
|
+
className: `flex items-center justify-center w-10 h-10 rounded-lg bg-brand/10 hover:bg-brand/20 transition-colors ${className}`,
|
|
12
|
+
title: "Back to Dashboard",
|
|
13
|
+
children: /* @__PURE__ */ jsxs(
|
|
14
|
+
"svg",
|
|
15
|
+
{
|
|
16
|
+
width: "28",
|
|
17
|
+
height: "24",
|
|
18
|
+
viewBox: "0 0 120 100",
|
|
19
|
+
fill: "none",
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsx(
|
|
23
|
+
"path",
|
|
24
|
+
{
|
|
25
|
+
d: "M10,90l26.48-39.76h.31s4.54,5.02,4.54,5.02l.32-.16,23.06-37.14,17.34,28.63,3.65-4.61,30.22,48.03h-8.43c-7.17-12.26-15.51-24.35-23.06-36.26-1.43.52-2.03,3.6-3.49,3.97l-16.31-25.93-21.87,34.36-5.09-5.01-19.48,28.87h-8.19Z",
|
|
26
|
+
fill: "#99D9D9"
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
"path",
|
|
31
|
+
{
|
|
32
|
+
d: "M89.84,90h-5.73c-6.34-8.18-12.93-16.89-19.64-24.65-6.66,8.19-13.04,16.6-19.89,24.65h-5.81l25.69-39.76,25.37,39.76Z",
|
|
33
|
+
fill: "#99D9D9"
|
|
34
|
+
}
|
|
35
|
+
)
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
var RCNRMountainLogo_default = RCNRMountainLogo;
|
|
43
|
+
|
|
44
|
+
// src/RCNRHeader.tsx
|
|
45
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
46
|
+
function NavButton({
|
|
47
|
+
onClick,
|
|
48
|
+
icon,
|
|
49
|
+
label,
|
|
50
|
+
title
|
|
51
|
+
}) {
|
|
52
|
+
return /* @__PURE__ */ jsxs2(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onClick,
|
|
56
|
+
className: "flex items-center gap-2 px-3 py-2 text-brand/70 hover:text-brand hover:bg-brand/5 rounded-lg transition-colors",
|
|
57
|
+
title: title ?? label,
|
|
58
|
+
children: [
|
|
59
|
+
icon,
|
|
60
|
+
/* @__PURE__ */ jsx2("span", { className: "hidden md:inline text-sm", children: label })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
var defaultReportIssue = () => window.open("https://rcnr.net/support?type=bug", "_blank");
|
|
66
|
+
var defaultRequestTool = () => window.open("https://rcnr.net/support?type=feature", "_blank");
|
|
67
|
+
function RCNRHeader({
|
|
68
|
+
toolName,
|
|
69
|
+
dashboardUrl = "https://teacher.rcnr.net",
|
|
70
|
+
extraNavItems,
|
|
71
|
+
userAvatar,
|
|
72
|
+
onHowItWorks,
|
|
73
|
+
onReportIssue = defaultReportIssue,
|
|
74
|
+
onRequestTool = defaultRequestTool
|
|
75
|
+
}) {
|
|
76
|
+
return /* @__PURE__ */ jsx2("header", { className: "glass-card border-b border-brand/15 px-6 py-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
|
|
77
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4", children: [
|
|
78
|
+
/* @__PURE__ */ jsx2(RCNRMountainLogo_default, { href: dashboardUrl }),
|
|
79
|
+
/* @__PURE__ */ jsx2("span", { className: "text-xl font-serif text-brand", children: toolName })
|
|
80
|
+
] }),
|
|
81
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
|
|
82
|
+
extraNavItems?.map((item) => /* @__PURE__ */ jsx2(
|
|
83
|
+
NavButton,
|
|
84
|
+
{
|
|
85
|
+
onClick: item.onClick,
|
|
86
|
+
icon: item.icon,
|
|
87
|
+
label: item.label
|
|
88
|
+
},
|
|
89
|
+
item.label
|
|
90
|
+
)),
|
|
91
|
+
onHowItWorks && /* @__PURE__ */ jsx2(
|
|
92
|
+
NavButton,
|
|
93
|
+
{
|
|
94
|
+
onClick: onHowItWorks,
|
|
95
|
+
label: "How It Works",
|
|
96
|
+
icon: /* @__PURE__ */ jsxs2(
|
|
97
|
+
"svg",
|
|
98
|
+
{
|
|
99
|
+
className: "w-[18px] h-[18px]",
|
|
100
|
+
fill: "none",
|
|
101
|
+
viewBox: "0 0 24 24",
|
|
102
|
+
stroke: "currentColor",
|
|
103
|
+
strokeWidth: 2,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
|
|
106
|
+
/* @__PURE__ */ jsx2(
|
|
107
|
+
"path",
|
|
108
|
+
{
|
|
109
|
+
strokeLinecap: "round",
|
|
110
|
+
strokeLinejoin: "round",
|
|
111
|
+
d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ jsx2("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsx2(
|
|
121
|
+
NavButton,
|
|
122
|
+
{
|
|
123
|
+
onClick: onReportIssue,
|
|
124
|
+
label: "Report Issue",
|
|
125
|
+
icon: /* @__PURE__ */ jsx2(
|
|
126
|
+
"svg",
|
|
127
|
+
{
|
|
128
|
+
className: "w-[18px] h-[18px]",
|
|
129
|
+
fill: "none",
|
|
130
|
+
viewBox: "0 0 24 24",
|
|
131
|
+
stroke: "currentColor",
|
|
132
|
+
strokeWidth: 2,
|
|
133
|
+
children: /* @__PURE__ */ jsx2(
|
|
134
|
+
"path",
|
|
135
|
+
{
|
|
136
|
+
strokeLinecap: "round",
|
|
137
|
+
strokeLinejoin: "round",
|
|
138
|
+
d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
139
|
+
}
|
|
140
|
+
)
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
/* @__PURE__ */ jsx2(
|
|
146
|
+
NavButton,
|
|
147
|
+
{
|
|
148
|
+
onClick: onRequestTool,
|
|
149
|
+
label: "Request Tool",
|
|
150
|
+
icon: /* @__PURE__ */ jsx2(
|
|
151
|
+
"svg",
|
|
152
|
+
{
|
|
153
|
+
className: "w-[18px] h-[18px]",
|
|
154
|
+
fill: "none",
|
|
155
|
+
viewBox: "0 0 24 24",
|
|
156
|
+
stroke: "currentColor",
|
|
157
|
+
strokeWidth: 2,
|
|
158
|
+
children: /* @__PURE__ */ jsx2(
|
|
159
|
+
"path",
|
|
160
|
+
{
|
|
161
|
+
strokeLinecap: "round",
|
|
162
|
+
strokeLinejoin: "round",
|
|
163
|
+
d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
),
|
|
170
|
+
userAvatar
|
|
171
|
+
] })
|
|
172
|
+
] }) });
|
|
173
|
+
}
|
|
174
|
+
var RCNRHeader_default = RCNRHeader;
|
|
175
|
+
|
|
176
|
+
// src/RCNRSubNav.tsx
|
|
177
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
178
|
+
function RCNRSubNav({ tabs }) {
|
|
179
|
+
return /* @__PURE__ */ jsx3("nav", { className: "flex items-center gap-1 px-6 py-2 border-b border-brand/10 bg-surface/50", children: tabs.map((tab) => {
|
|
180
|
+
const isWarning = tab.variant === "warning";
|
|
181
|
+
const activeClass = isWarning ? "bg-warning/10 text-warning border border-warning/20" : "bg-brand/15 text-brand";
|
|
182
|
+
const inactiveClass = isWarning ? "text-warning/70 hover:text-warning hover:bg-warning/5 border border-warning/10" : "text-brand/50 hover:text-brand hover:bg-brand/5";
|
|
183
|
+
const className = `flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${tab.active ? activeClass : inactiveClass}`;
|
|
184
|
+
if (tab.href) {
|
|
185
|
+
return /* @__PURE__ */ jsxs3("a", { href: tab.href, className, children: [
|
|
186
|
+
tab.icon,
|
|
187
|
+
/* @__PURE__ */ jsx3("span", { children: tab.label })
|
|
188
|
+
] }, tab.label);
|
|
189
|
+
}
|
|
190
|
+
return /* @__PURE__ */ jsxs3(
|
|
191
|
+
"button",
|
|
192
|
+
{
|
|
193
|
+
onClick: tab.onClick,
|
|
194
|
+
className,
|
|
195
|
+
children: [
|
|
196
|
+
tab.icon,
|
|
197
|
+
/* @__PURE__ */ jsx3("span", { children: tab.label })
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
tab.label
|
|
201
|
+
);
|
|
202
|
+
}) });
|
|
203
|
+
}
|
|
204
|
+
var RCNRSubNav_default = RCNRSubNav;
|
|
205
|
+
|
|
206
|
+
// src/RCNRFooter.tsx
|
|
207
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
208
|
+
function RCNRFooter({
|
|
209
|
+
toolName,
|
|
210
|
+
linkUrl = "https://rcnr.net"
|
|
211
|
+
}) {
|
|
212
|
+
return /* @__PURE__ */ jsx4("footer", { className: "mt-auto py-4 text-center text-sm text-brand-dark/50", children: /* @__PURE__ */ jsxs4(
|
|
213
|
+
"a",
|
|
214
|
+
{
|
|
215
|
+
href: linkUrl,
|
|
216
|
+
className: "hover:text-brand transition-colors",
|
|
217
|
+
children: [
|
|
218
|
+
toolName,
|
|
219
|
+
" \u2014 Part of the RCNR Teacher Toolbox"
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
) });
|
|
223
|
+
}
|
|
224
|
+
var RCNRFooter_default = RCNRFooter;
|
|
225
|
+
export {
|
|
226
|
+
RCNRFooter_default as RCNRFooter,
|
|
227
|
+
RCNRHeader_default as RCNRHeader,
|
|
228
|
+
RCNRMountainLogo_default as RCNRMountainLogo,
|
|
229
|
+
RCNRSubNav_default as RCNRSubNav
|
|
230
|
+
};
|
|
231
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/RCNRMountainLogo.tsx","../src/RCNRHeader.tsx","../src/RCNRSubNav.tsx","../src/RCNRFooter.tsx"],"sourcesContent":["interface RCNRMountainLogoProps {\r\n href?: string\r\n className?: string\r\n}\r\n\r\nfunction RCNRMountainLogo({\r\n href = 'https://teacher.rcnr.net',\r\n className = '',\r\n}: RCNRMountainLogoProps) {\r\n return (\r\n <a\r\n href={href}\r\n className={`flex items-center justify-center w-10 h-10 rounded-lg bg-brand/10 hover:bg-brand/20 transition-colors ${className}`}\r\n title=\"Back to Dashboard\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"24\"\r\n viewBox=\"0 0 120 100\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M10,90l26.48-39.76h.31s4.54,5.02,4.54,5.02l.32-.16,23.06-37.14,17.34,28.63,3.65-4.61,30.22,48.03h-8.43c-7.17-12.26-15.51-24.35-23.06-36.26-1.43.52-2.03,3.6-3.49,3.97l-16.31-25.93-21.87,34.36-5.09-5.01-19.48,28.87h-8.19Z\"\r\n fill=\"#99D9D9\"\r\n />\r\n <path\r\n d=\"M89.84,90h-5.73c-6.34-8.18-12.93-16.89-19.64-24.65-6.66,8.19-13.04,16.6-19.89,24.65h-5.81l25.69-39.76,25.37,39.76Z\"\r\n fill=\"#99D9D9\"\r\n />\r\n </svg>\r\n </a>\r\n )\r\n}\r\n\r\nexport default RCNRMountainLogo\r\n","import type { ReactNode } from 'react'\r\nimport type { RCNRHeaderProps } from './types'\r\nimport RCNRMountainLogo from './RCNRMountainLogo'\r\n\r\nfunction NavButton({\r\n onClick,\r\n icon,\r\n label,\r\n title,\r\n}: {\r\n onClick: () => void\r\n icon: ReactNode\r\n label: string\r\n title?: string\r\n}) {\r\n return (\r\n <button\r\n onClick={onClick}\r\n className=\"flex items-center gap-2 px-3 py-2 text-brand/70 hover:text-brand hover:bg-brand/5 rounded-lg transition-colors\"\r\n title={title ?? label}\r\n >\r\n {icon}\r\n <span className=\"hidden md:inline text-sm\">{label}</span>\r\n </button>\r\n )\r\n}\r\n\r\nconst defaultReportIssue = () =>\r\n window.open('https://rcnr.net/support?type=bug', '_blank')\r\n\r\nconst defaultRequestTool = () =>\r\n window.open('https://rcnr.net/support?type=feature', '_blank')\r\n\r\nfunction RCNRHeader({\r\n toolName,\r\n dashboardUrl = 'https://teacher.rcnr.net',\r\n extraNavItems,\r\n userAvatar,\r\n onHowItWorks,\r\n onReportIssue = defaultReportIssue,\r\n onRequestTool = defaultRequestTool,\r\n}: RCNRHeaderProps) {\r\n return (\r\n <header className=\"glass-card border-b border-brand/15 px-6 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n {/* Left: Logo + Tool Name */}\r\n <div className=\"flex items-center gap-4\">\r\n <RCNRMountainLogo href={dashboardUrl} />\r\n <span className=\"text-xl font-serif text-brand\">{toolName}</span>\r\n </div>\r\n\r\n {/* Right: Nav Actions */}\r\n <div className=\"flex items-center gap-2\">\r\n {/* Tool-specific nav items first */}\r\n {extraNavItems?.map((item) => (\r\n <NavButton\r\n key={item.label}\r\n onClick={item.onClick}\r\n icon={item.icon}\r\n label={item.label}\r\n />\r\n ))}\r\n\r\n {/* Standard nav items in fixed order */}\r\n {onHowItWorks && (\r\n <NavButton\r\n onClick={onHowItWorks}\r\n label=\"How It Works\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3\"\r\n />\r\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\r\n </svg>\r\n }\r\n />\r\n )}\r\n\r\n <NavButton\r\n onClick={onReportIssue}\r\n label=\"Report Issue\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\r\n />\r\n </svg>\r\n }\r\n />\r\n\r\n <NavButton\r\n onClick={onRequestTool}\r\n label=\"Request Tool\"\r\n icon={\r\n <svg\r\n className=\"w-[18px] h-[18px]\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\r\n />\r\n </svg>\r\n }\r\n />\r\n\r\n {userAvatar}\r\n </div>\r\n </div>\r\n </header>\r\n )\r\n}\r\n\r\nexport default RCNRHeader\r\n","import type { RCNRSubNavProps } from './types'\r\n\r\nfunction RCNRSubNav({ tabs }: RCNRSubNavProps) {\r\n return (\r\n <nav className=\"flex items-center gap-1 px-6 py-2 border-b border-brand/10 bg-surface/50\">\r\n {tabs.map((tab) => {\r\n const isWarning = tab.variant === 'warning'\r\n const activeClass = isWarning\r\n ? 'bg-warning/10 text-warning border border-warning/20'\r\n : 'bg-brand/15 text-brand'\r\n const inactiveClass = isWarning\r\n ? 'text-warning/70 hover:text-warning hover:bg-warning/5 border border-warning/10'\r\n : 'text-brand/50 hover:text-brand hover:bg-brand/5'\r\n\r\n const className = `flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${\r\n tab.active ? activeClass : inactiveClass\r\n }`\r\n\r\n if (tab.href) {\r\n return (\r\n <a key={tab.label} href={tab.href} className={className}>\r\n {tab.icon}\r\n <span>{tab.label}</span>\r\n </a>\r\n )\r\n }\r\n\r\n return (\r\n <button\r\n key={tab.label}\r\n onClick={tab.onClick}\r\n className={className}\r\n >\r\n {tab.icon}\r\n <span>{tab.label}</span>\r\n </button>\r\n )\r\n })}\r\n </nav>\r\n )\r\n}\r\n\r\nexport default RCNRSubNav\r\n","import type { RCNRFooterProps } from './types'\r\n\r\nfunction RCNRFooter({\r\n toolName,\r\n linkUrl = 'https://rcnr.net',\r\n}: RCNRFooterProps) {\r\n return (\r\n <footer className=\"mt-auto py-4 text-center text-sm text-brand-dark/50\">\r\n <a\r\n href={linkUrl}\r\n className=\"hover:text-brand transition-colors\"\r\n >\r\n {toolName} — Part of the RCNR Teacher Toolbox\r\n </a>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default RCNRFooter\r\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,17 +1,44 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rcnr/theme",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
5
|
-
"main": "index.
|
|
3
|
+
"version": "2.0.1",
|
|
4
|
+
"description": "RCNR design system: CSS tokens, shared React components (header, footer, subnav), glass cards, buttons, grid",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
6
8
|
"style": "index.css",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"style": "./index.css",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"import": "./dist/index.mjs",
|
|
14
|
+
"require": "./dist/index.js"
|
|
15
|
+
},
|
|
16
|
+
"./styles": "./index.css"
|
|
17
|
+
},
|
|
7
18
|
"files": [
|
|
8
|
-
"index.css"
|
|
19
|
+
"index.css",
|
|
20
|
+
"dist"
|
|
9
21
|
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "tsup",
|
|
24
|
+
"prepublishOnly": "npm run build"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": ">=18"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/react": "^19.0.0",
|
|
31
|
+
"react": "^19.0.0",
|
|
32
|
+
"tsup": "^8.0.0",
|
|
33
|
+
"typescript": "^5.3.0"
|
|
34
|
+
},
|
|
10
35
|
"keywords": [
|
|
11
36
|
"rcnr",
|
|
12
37
|
"theme",
|
|
13
38
|
"css",
|
|
14
|
-
"tailwind"
|
|
39
|
+
"tailwind",
|
|
40
|
+
"react",
|
|
41
|
+
"components"
|
|
15
42
|
],
|
|
16
43
|
"author": "Ryan-RCNR",
|
|
17
44
|
"license": "MIT",
|