@prosophia/lab-techy 0.0.3 → 0.0.5

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.
@@ -0,0 +1,147 @@
1
+ .footer {
2
+ border-top: 1px solid var(--slate-200);
3
+ background-color: var(--white);
4
+ padding: 3rem 0;
5
+ }
6
+
7
+ .container {
8
+ max-width: var(--container-max);
9
+ margin: 0 auto;
10
+ padding: 0 1rem;
11
+ }
12
+
13
+ @media (min-width: 640px) {
14
+ .container {
15
+ padding: 0 1.5rem;
16
+ }
17
+ }
18
+
19
+ @media (min-width: 1024px) {
20
+ .container {
21
+ padding: 0 2rem;
22
+ }
23
+ }
24
+
25
+ .grid {
26
+ display: grid;
27
+ gap: 2rem;
28
+ }
29
+
30
+ @media (min-width: 768px) {
31
+ .grid {
32
+ grid-template-columns: 2fr 1fr 1fr;
33
+ gap: 3rem;
34
+ }
35
+ }
36
+
37
+ .brandSection {
38
+ grid-column: span 1;
39
+ }
40
+
41
+ @media (min-width: 768px) {
42
+ .brandSection {
43
+ grid-column: span 1;
44
+ }
45
+ }
46
+
47
+ .logo {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 0.75rem;
51
+ }
52
+
53
+ .logoIcon {
54
+ display: flex;
55
+ width: 2rem;
56
+ height: 2rem;
57
+ align-items: center;
58
+ justify-content: center;
59
+ border-radius: var(--radius-sm);
60
+ background-color: var(--primary);
61
+ color: var(--white);
62
+ }
63
+
64
+ .logoIcon span {
65
+ font-size: 20px;
66
+ }
67
+
68
+ .logoText {
69
+ font-size: 1.25rem;
70
+ font-weight: 700;
71
+ color: var(--slate-900);
72
+ }
73
+
74
+ .description {
75
+ margin-top: 1rem;
76
+ max-width: 24rem;
77
+ font-size: 0.875rem;
78
+ color: var(--slate-600);
79
+ line-height: 1.6;
80
+ }
81
+
82
+ .socialLinks {
83
+ display: flex;
84
+ gap: 1rem;
85
+ margin-top: 1.5rem;
86
+ }
87
+
88
+ .socialLink {
89
+ color: var(--slate-400);
90
+ transition: color var(--timing-quick) var(--ease-out-expo);
91
+ }
92
+
93
+ .socialLink:hover {
94
+ color: var(--primary);
95
+ }
96
+
97
+ .socialIcon {
98
+ width: 1.25rem;
99
+ height: 1.25rem;
100
+ }
101
+
102
+ .linksSection {
103
+ display: flex;
104
+ flex-direction: column;
105
+ }
106
+
107
+ .linksSectionTitle {
108
+ font-size: 0.875rem;
109
+ font-weight: 600;
110
+ text-transform: uppercase;
111
+ color: var(--slate-900);
112
+ margin-bottom: 1rem;
113
+ }
114
+
115
+ .linksList {
116
+ list-style: none;
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: 0.75rem;
120
+ }
121
+
122
+ .link {
123
+ font-size: 0.875rem;
124
+ color: var(--slate-600);
125
+ transition: color var(--timing-quick) var(--ease-out-expo);
126
+ }
127
+
128
+ .link:hover {
129
+ color: var(--primary);
130
+ }
131
+
132
+ .bottom {
133
+ margin-top: 3rem;
134
+ padding-top: 2rem;
135
+ border-top: 1px solid var(--slate-200);
136
+ }
137
+
138
+ .copyright {
139
+ text-align: center;
140
+ font-size: 0.875rem;
141
+ color: var(--slate-500);
142
+ }
143
+
144
+ /* Dark mode styles */
145
+ [data-theme="dark"] .logoIcon {
146
+ color: var(--slate-900);
147
+ }
@@ -0,0 +1,147 @@
1
+ .header {
2
+ position: sticky;
3
+ top: 0;
4
+ z-index: 50;
5
+ width: 100%;
6
+ border-bottom: 1px solid var(--slate-200);
7
+ background-color: rgba(246, 246, 248, 0.8);
8
+ backdrop-filter: blur(12px);
9
+ }
10
+
11
+ .container {
12
+ max-width: var(--container-max);
13
+ margin: 0 auto;
14
+ display: flex;
15
+ height: 4rem;
16
+ align-items: center;
17
+ justify-content: space-between;
18
+ padding: 0 1rem;
19
+ }
20
+
21
+ @media (min-width: 640px) {
22
+ .container {
23
+ padding: 0 1.5rem;
24
+ }
25
+ }
26
+
27
+ @media (min-width: 1024px) {
28
+ .container {
29
+ padding: 0 2rem;
30
+ }
31
+ }
32
+
33
+ .logo {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 1rem;
37
+ text-decoration: none;
38
+ }
39
+
40
+ .logoIcon {
41
+ display: flex;
42
+ width: 2rem;
43
+ height: 2rem;
44
+ align-items: center;
45
+ justify-content: center;
46
+ border-radius: var(--radius-sm);
47
+ background-color: var(--primary);
48
+ color: var(--white);
49
+ }
50
+
51
+ .logoIcon span {
52
+ font-size: 20px;
53
+ }
54
+
55
+ .logoText {
56
+ font-size: 1.125rem;
57
+ font-weight: 700;
58
+ letter-spacing: -0.025em;
59
+ color: var(--slate-900);
60
+ }
61
+
62
+ .nav {
63
+ display: none;
64
+ flex: 1;
65
+ align-items: center;
66
+ justify-content: flex-end;
67
+ gap: 2rem;
68
+ }
69
+
70
+ @media (min-width: 768px) {
71
+ .nav {
72
+ display: flex;
73
+ }
74
+ }
75
+
76
+ .navLinks {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 1.5rem;
80
+ }
81
+
82
+ .navLink {
83
+ font-size: 0.875rem;
84
+ font-weight: 500;
85
+ color: var(--slate-600);
86
+ transition: color var(--timing-quick) var(--ease-out-expo);
87
+ }
88
+
89
+ .navLink:hover {
90
+ color: var(--primary);
91
+ }
92
+
93
+ .navLinkActive {
94
+ color: var(--primary);
95
+ font-weight: 600;
96
+ }
97
+
98
+ .ctaButton {
99
+ display: inline-flex;
100
+ height: 2.25rem;
101
+ align-items: center;
102
+ justify-content: center;
103
+ border-radius: var(--radius-lg);
104
+ background-color: var(--primary);
105
+ padding: 0 1rem;
106
+ font-size: 0.875rem;
107
+ font-weight: 700;
108
+ color: var(--white);
109
+ box-shadow: var(--shadow-sm);
110
+ transition: background-color var(--timing-quick) var(--ease-out-expo);
111
+ }
112
+
113
+ .ctaButton:hover {
114
+ background-color: var(--primary-dark);
115
+ }
116
+
117
+ .mobileActions {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 0.5rem;
121
+ }
122
+
123
+ @media (min-width: 768px) {
124
+ .mobileActions {
125
+ display: none;
126
+ }
127
+ }
128
+
129
+ .mobileMenuBtn {
130
+ display: block;
131
+ padding: 0.5rem;
132
+ color: var(--slate-600);
133
+ }
134
+
135
+ /* Dark mode styles */
136
+ [data-theme="dark"] .header {
137
+ background-color: rgba(15, 23, 42, 0.9);
138
+ border-bottom-color: var(--slate-200);
139
+ }
140
+
141
+ [data-theme="dark"] .logoIcon {
142
+ color: var(--slate-900);
143
+ }
144
+
145
+ [data-theme="dark"] .ctaButton {
146
+ color: var(--slate-900);
147
+ }
@@ -0,0 +1,34 @@
1
+ .toggle {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ width: 2.5rem;
6
+ height: 2.5rem;
7
+ border-radius: var(--radius-full);
8
+ background-color: var(--slate-100);
9
+ color: var(--slate-600);
10
+ border: 1px solid var(--slate-200);
11
+ cursor: pointer;
12
+ transition: all var(--timing-quick) var(--ease-out-expo);
13
+ }
14
+
15
+ .toggle:hover {
16
+ background-color: var(--slate-200);
17
+ color: var(--primary);
18
+ }
19
+
20
+ .toggle span {
21
+ font-size: 1.25rem;
22
+ }
23
+
24
+ /* Dark mode styles */
25
+ [data-theme="dark"] .toggle {
26
+ background-color: var(--slate-800);
27
+ border-color: var(--slate-700);
28
+ color: var(--slate-300);
29
+ }
30
+
31
+ [data-theme="dark"] .toggle:hover {
32
+ background-color: var(--slate-700);
33
+ color: var(--primary);
34
+ }
@@ -0,0 +1,26 @@
1
+ interface SiteSettings {
2
+ labName?: string;
3
+ labNameAccent?: string;
4
+ labNameDescription?: string;
5
+ footerText?: string;
6
+ showPrivacyPolicy?: boolean;
7
+ privacyPolicyUrl?: string;
8
+ showTerms?: boolean;
9
+ termsUrl?: string;
10
+ }
11
+ interface SiteConfig {
12
+ title: string;
13
+ description: string;
14
+ url?: string;
15
+ }
16
+ interface ThemeConfig {
17
+ primaryColor?: string;
18
+ accentColor?: string;
19
+ }
20
+ interface ProsophiaConfig {
21
+ template?: string;
22
+ site: SiteConfig;
23
+ theme?: ThemeConfig;
24
+ }
25
+
26
+ export type { ProsophiaConfig as P, SiteSettings as S, ThemeConfig as T, SiteConfig as a };
@@ -0,0 +1,26 @@
1
+ interface SiteSettings {
2
+ labName?: string;
3
+ labNameAccent?: string;
4
+ labNameDescription?: string;
5
+ footerText?: string;
6
+ showPrivacyPolicy?: boolean;
7
+ privacyPolicyUrl?: string;
8
+ showTerms?: boolean;
9
+ termsUrl?: string;
10
+ }
11
+ interface SiteConfig {
12
+ title: string;
13
+ description: string;
14
+ url?: string;
15
+ }
16
+ interface ThemeConfig {
17
+ primaryColor?: string;
18
+ accentColor?: string;
19
+ }
20
+ interface ProsophiaConfig {
21
+ template?: string;
22
+ site: SiteConfig;
23
+ theme?: ThemeConfig;
24
+ }
25
+
26
+ export type { ProsophiaConfig as P, SiteSettings as S, ThemeConfig as T, SiteConfig as a };
@@ -0,0 +1,296 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React$1 from 'react';
3
+ import { S as SiteSettings$1, P as ProsophiaConfig } from './index-CSdV51Jq.mjs';
4
+ export { a as SiteConfig, T as ThemeConfig } from './index-CSdV51Jq.mjs';
5
+
6
+ interface FooterLink {
7
+ label: string;
8
+ url: string;
9
+ }
10
+ interface SocialLink {
11
+ platform: 'twitter' | 'linkedin' | 'github' | 'scholar' | 'orcid' | 'website' | 'email' | 'youtube' | 'instagram';
12
+ url: string;
13
+ }
14
+ interface FooterData$1 {
15
+ labName: string;
16
+ footerText?: string;
17
+ socialLinks?: SocialLink[];
18
+ footerLinks?: FooterLink[];
19
+ email?: string;
20
+ address?: string;
21
+ }
22
+ interface FooterProps {
23
+ footerData?: FooterData$1 | null;
24
+ }
25
+ declare function Footer({ footerData }: FooterProps): react_jsx_runtime.JSX.Element;
26
+
27
+ interface NavItem {
28
+ label: string;
29
+ href: string;
30
+ }
31
+ interface SanityImage {
32
+ _type: 'image';
33
+ asset: {
34
+ _ref: string;
35
+ _type: 'reference';
36
+ };
37
+ }
38
+ interface NavigationData$1 {
39
+ labName: string;
40
+ logo?: SanityImage;
41
+ mainNavigation?: NavItem[];
42
+ }
43
+ interface HeaderProps {
44
+ navigationData?: NavigationData$1 | null;
45
+ }
46
+ declare function Header({ navigationData }: HeaderProps): react_jsx_runtime.JSX.Element;
47
+
48
+ declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
49
+
50
+ type SiteSettings = {
51
+ labName?: string;
52
+ labNameAccent?: string;
53
+ footerText?: string;
54
+ showPrivacyPolicy?: boolean;
55
+ privacyPolicyUrl?: string;
56
+ showTerms?: boolean;
57
+ termsUrl?: string;
58
+ };
59
+ type ClientLayoutProps = {
60
+ children: React$1.ReactNode;
61
+ settings: SiteSettings;
62
+ };
63
+ declare function ClientLayout({ children, settings }: ClientLayoutProps): react_jsx_runtime.JSX.Element;
64
+
65
+ interface NavigationData {
66
+ labName: string;
67
+ logo?: {
68
+ _type: 'image';
69
+ asset: {
70
+ _ref: string;
71
+ _type: 'reference';
72
+ };
73
+ };
74
+ mainNavigation?: Array<{
75
+ label: string;
76
+ href: string;
77
+ }>;
78
+ }
79
+ interface FooterData {
80
+ labName: string;
81
+ footerText?: string;
82
+ socialLinks?: Array<{
83
+ platform: 'twitter' | 'linkedin' | 'github' | 'scholar' | 'orcid' | 'website' | 'email' | 'youtube' | 'instagram';
84
+ url: string;
85
+ }>;
86
+ footerLinks?: Array<{
87
+ label: string;
88
+ url: string;
89
+ }>;
90
+ email?: string;
91
+ address?: string;
92
+ }
93
+ interface HomePageProps {
94
+ children?: React.ReactNode;
95
+ settings?: SiteSettings$1 | null;
96
+ navigationData?: NavigationData | null;
97
+ footerData?: FooterData | null;
98
+ header?: React.ReactNode;
99
+ footer?: React.ReactNode;
100
+ }
101
+ /**
102
+ * Main HomePage wrapper for lab-techy template
103
+ * Provides consistent header/footer with customizable main content
104
+ */
105
+ declare function HomePage({ children, settings, navigationData, footerData, header, footer, }: HomePageProps): react_jsx_runtime.JSX.Element;
106
+
107
+ /**
108
+ * Define configuration for your lab website
109
+ * @param config - The site configuration object
110
+ * @returns The configuration object (passthrough for type safety)
111
+ */
112
+ declare function defineConfig(config: ProsophiaConfig): ProsophiaConfig;
113
+
114
+ declare const easeOutExpo: [number, number, number, number];
115
+ declare const springStiff: {
116
+ type: string;
117
+ mass: number;
118
+ stiffness: number;
119
+ damping: number;
120
+ };
121
+ declare const timing: {
122
+ quick: number;
123
+ standard: number;
124
+ ambient: number;
125
+ };
126
+ declare const fadeInUp: {
127
+ hidden: {
128
+ opacity: number;
129
+ y: number;
130
+ };
131
+ visible: {
132
+ opacity: number;
133
+ y: number;
134
+ transition: {
135
+ duration: number;
136
+ ease: [number, number, number, number];
137
+ };
138
+ };
139
+ };
140
+ declare const fadeInLeft: {
141
+ hidden: {
142
+ opacity: number;
143
+ x: number;
144
+ };
145
+ visible: {
146
+ opacity: number;
147
+ x: number;
148
+ transition: {
149
+ duration: number;
150
+ ease: [number, number, number, number];
151
+ };
152
+ };
153
+ };
154
+ declare const fadeInRight: {
155
+ hidden: {
156
+ opacity: number;
157
+ x: number;
158
+ };
159
+ visible: {
160
+ opacity: number;
161
+ x: number;
162
+ transition: {
163
+ duration: number;
164
+ ease: [number, number, number, number];
165
+ };
166
+ };
167
+ };
168
+ declare const scaleUp: {
169
+ hidden: {
170
+ opacity: number;
171
+ scale: number;
172
+ };
173
+ visible: {
174
+ opacity: number;
175
+ scale: number;
176
+ transition: {
177
+ duration: number;
178
+ ease: [number, number, number, number];
179
+ };
180
+ };
181
+ };
182
+ declare const staggerContainer: {
183
+ hidden: {
184
+ opacity: number;
185
+ };
186
+ visible: {
187
+ opacity: number;
188
+ transition: {
189
+ staggerChildren: number;
190
+ delayChildren: number;
191
+ };
192
+ };
193
+ };
194
+ declare const staggerItem: {
195
+ hidden: {
196
+ opacity: number;
197
+ y: number;
198
+ };
199
+ visible: {
200
+ opacity: number;
201
+ y: number;
202
+ transition: {
203
+ duration: number;
204
+ ease: [number, number, number, number];
205
+ };
206
+ };
207
+ };
208
+ declare const cardHover: {
209
+ rest: {
210
+ y: number;
211
+ boxShadow: string;
212
+ transition: {
213
+ duration: number;
214
+ ease: [number, number, number, number];
215
+ };
216
+ };
217
+ hover: {
218
+ y: number;
219
+ boxShadow: string;
220
+ transition: {
221
+ duration: number;
222
+ ease: [number, number, number, number];
223
+ };
224
+ };
225
+ };
226
+ declare const imageZoom: {
227
+ rest: {
228
+ scale: number;
229
+ transition: {
230
+ duration: number;
231
+ ease: [number, number, number, number];
232
+ };
233
+ };
234
+ hover: {
235
+ scale: number;
236
+ transition: {
237
+ duration: number;
238
+ ease: [number, number, number, number];
239
+ };
240
+ };
241
+ };
242
+ declare const buttonPress: {
243
+ tap: {
244
+ scale: number;
245
+ };
246
+ hover: {
247
+ scale: number;
248
+ };
249
+ };
250
+ declare const pageTransition: {
251
+ hidden: {
252
+ opacity: number;
253
+ };
254
+ visible: {
255
+ opacity: number;
256
+ transition: {
257
+ duration: number;
258
+ ease: [number, number, number, number];
259
+ };
260
+ };
261
+ exit: {
262
+ opacity: number;
263
+ transition: {
264
+ duration: number;
265
+ ease: [number, number, number, number];
266
+ };
267
+ };
268
+ };
269
+ declare const revealRight: {
270
+ hidden: {
271
+ clipPath: string;
272
+ };
273
+ visible: {
274
+ clipPath: string;
275
+ transition: {
276
+ duration: number;
277
+ ease: [number, number, number, number];
278
+ };
279
+ };
280
+ };
281
+ declare const blurFade: {
282
+ hidden: {
283
+ opacity: number;
284
+ filter: string;
285
+ };
286
+ visible: {
287
+ opacity: number;
288
+ filter: string;
289
+ transition: {
290
+ duration: number;
291
+ ease: [number, number, number, number];
292
+ };
293
+ };
294
+ };
295
+
296
+ export { ClientLayout, Footer, Header, HomePage, type HomePageProps, ProsophiaConfig, SiteSettings$1 as SiteSettings, ThemeToggle, blurFade, buttonPress, cardHover, defineConfig, easeOutExpo, fadeInLeft, fadeInRight, fadeInUp, imageZoom, pageTransition, revealRight, scaleUp, springStiff, staggerContainer, staggerItem, timing };