@prosophia/lab-techy 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -0,0 +1,296 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { S as SiteSettings$1, P as ProsophiaConfig } from './index-CSdV51Jq.js';
+export { a as SiteConfig, T as ThemeConfig } from './index-CSdV51Jq.js';
+
+interface FooterLink {
+    label: string;
+    url: string;
+}
+interface SocialLink {
+    platform: 'twitter' | 'linkedin' | 'github' | 'scholar' | 'orcid' | 'website' | 'email' | 'youtube' | 'instagram';
+    url: string;
+}
+interface FooterData$1 {
+    labName: string;
+    footerText?: string;
+    socialLinks?: SocialLink[];
+    footerLinks?: FooterLink[];
+    email?: string;
+    address?: string;
+}
+interface FooterProps {
+    footerData?: FooterData$1 | null;
+}
+declare function Footer({ footerData }: FooterProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    label: string;
+    href: string;
+}
+interface SanityImage {
+    _type: 'image';
+    asset: {
+        _ref: string;
+        _type: 'reference';
+    };
+}
+interface NavigationData$1 {
+    labName: string;
+    logo?: SanityImage;
+    mainNavigation?: NavItem[];
+}
+interface HeaderProps {
+    navigationData?: NavigationData$1 | null;
+}
+declare function Header({ navigationData }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+type SiteSettings = {
+    labName?: string;
+    labNameAccent?: string;
+    footerText?: string;
+    showPrivacyPolicy?: boolean;
+    privacyPolicyUrl?: string;
+    showTerms?: boolean;
+    termsUrl?: string;
+};
+type ClientLayoutProps = {
+    children: React$1.ReactNode;
+    settings: SiteSettings;
+};
+declare function ClientLayout({ children, settings }: ClientLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface NavigationData {
+    labName: string;
+    logo?: {
+        _type: 'image';
+        asset: {
+            _ref: string;
+            _type: 'reference';
+        };
+    };
+    mainNavigation?: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+interface FooterData {
+    labName: string;
+    footerText?: string;
+    socialLinks?: Array<{
+        platform: 'twitter' | 'linkedin' | 'github' | 'scholar' | 'orcid' | 'website' | 'email' | 'youtube' | 'instagram';
+        url: string;
+    }>;
+    footerLinks?: Array<{
+        label: string;
+        url: string;
+    }>;
+    email?: string;
+    address?: string;
+}
+interface HomePageProps {
+    children?: React.ReactNode;
+    settings?: SiteSettings$1 | null;
+    navigationData?: NavigationData | null;
+    footerData?: FooterData | null;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+/**
+ * Main HomePage wrapper for lab-techy template
+ * Provides consistent header/footer with customizable main content
+ */
+declare function HomePage({ children, settings, navigationData, footerData, header, footer, }: HomePageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Define configuration for your lab website
+ * @param config - The site configuration object
+ * @returns The configuration object (passthrough for type safety)
+ */
+declare function defineConfig(config: ProsophiaConfig): ProsophiaConfig;
+
+declare const easeOutExpo: [number, number, number, number];
+declare const springStiff: {
+    type: string;
+    mass: number;
+    stiffness: number;
+    damping: number;
+};
+declare const timing: {
+    quick: number;
+    standard: number;
+    ambient: number;
+};
+declare const fadeInUp: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    visible: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const fadeInLeft: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const fadeInRight: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const scaleUp: {
+    hidden: {
+        opacity: number;
+        scale: number;
+    };
+    visible: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const staggerContainer: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+};
+declare const staggerItem: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    visible: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const cardHover: {
+    rest: {
+        y: number;
+        boxShadow: string;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+    hover: {
+        y: number;
+        boxShadow: string;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const imageZoom: {
+    rest: {
+        scale: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+    hover: {
+        scale: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const buttonPress: {
+    tap: {
+        scale: number;
+    };
+    hover: {
+        scale: number;
+    };
+};
+declare const pageTransition: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+    exit: {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const revealRight: {
+    hidden: {
+        clipPath: string;
+    };
+    visible: {
+        clipPath: string;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+declare const blurFade: {
+    hidden: {
+        opacity: number;
+        filter: string;
+    };
+    visible: {
+        opacity: number;
+        filter: string;
+        transition: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+
+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 };

package/dist/index.js

@@ -30,9 +30,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ClientLayout: () => ClientLayout,
   Footer: () => Footer,
   Header: () => Header,
-  ThemeToggle: () => ThemeToggle
+  HomePage: () => HomePage,
+  ThemeToggle: () => ThemeToggle,
+  blurFade: () => blurFade,
+  buttonPress: () => buttonPress,
+  cardHover: () => cardHover,
+  defineConfig: () => defineConfig,
+  easeOutExpo: () => easeOutExpo,
+  fadeInLeft: () => fadeInLeft,
+  fadeInRight: () => fadeInRight,
+  fadeInUp: () => fadeInUp,
+  imageZoom: () => imageZoom,
+  pageTransition: () => pageTransition,
+  revealRight: () => revealRight,
+  scaleUp: () => scaleUp,
+  springStiff: () => springStiff,
+  staggerContainer: () => staggerContainer,
+  staggerItem: () => staggerItem,
+  timing: () => timing
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -149,11 +167,14 @@ var import_Header = __toESM(require("./Header.module.css"));
 
 // src/components/ThemeToggle.tsx
 var import_framer_motion2 = require("framer-motion");
-var import_ThemeContext = require("@/context/ThemeContext");
+var import_next_themes = require("next-themes");
 var import_ThemeToggle = __toESM(require("./ThemeToggle.module.css"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ThemeToggle() {
-  const { theme, toggleTheme } = (0, import_ThemeContext.useTheme)();
+  const { resolvedTheme, setTheme } = (0, import_next_themes.useTheme)();
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_framer_motion2.motion.button,
     {
@@ -161,8 +182,8 @@ function ThemeToggle() {
       onClick: toggleTheme,
       whileHover: { scale: 1.05 },
       whileTap: { scale: 0.95 },
-      "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "material-symbols-outlined", children: theme === "light" ? "dark_mode" : "light_mode" })
+      "aria-label": `Switch to ${resolvedTheme === "light" ? "dark" : "light"} mode`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "material-symbols-outlined", children: resolvedTheme === "light" ? "dark_mode" : "light_mode" })
     }
   );
 }
@@ -222,9 +243,251 @@ function Header({ navigationData }) {
     }
   );
 }
+
+// src/components/ClientLayout.tsx
+var import_react = require("react");
+var import_next_themes2 = require("next-themes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ThemeBodySync() {
+  const { resolvedTheme } = (0, import_next_themes2.useTheme)();
+  (0, import_react.useEffect)(() => {
+    if (resolvedTheme === "dark") {
+      document.body.classList.add("dark-mode");
+      document.body.classList.remove("light-mode");
+    } else {
+      document.body.classList.add("light-mode");
+      document.body.classList.remove("dark-mode");
+    }
+  }, [resolvedTheme]);
+  return null;
+}
+function ClientLayout({ children, settings }) {
+  const navigationData = {
+    labName: settings.labName || "Prosophia Research Lab"
+  };
+  const footerData = {
+    labName: settings.labName || "Prosophia Research Lab",
+    footerText: settings.footerText
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_next_themes2.ThemeProvider, { attribute: "class", defaultTheme: "light", enableSystem: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeBodySync, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pageWrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Header, { navigationData }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("main", { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Footer, { footerData })
+    ] })
+  ] });
+}
+
+// src/components/HomePage.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function HomePage({
+  children,
+  settings = null,
+  navigationData,
+  footerData,
+  header,
+  footer
+}) {
+  const navData = navigationData ?? (settings ? {
+    labName: settings.labName || "Research Lab"
+  } : void 0);
+  const ftData = footerData ?? (settings ? {
+    labName: settings.labName || "Research Lab",
+    footerText: settings.footerText
+  } : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    header ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Header, { navigationData: navData }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("main", { children }),
+    footer ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Footer, { footerData: ftData })
+  ] });
+}
+
+// src/config.ts
+function defineConfig(config) {
+  return config;
+}
+
+// src/lib/motion.ts
+var easeOutExpo = [0.16, 1, 0.3, 1];
+var springStiff = {
+  type: "spring",
+  mass: 1,
+  stiffness: 100,
+  damping: 15
+};
+var timing = {
+  quick: 0.15,
+  standard: 0.35,
+  ambient: 0.8
+};
+var fadeInUp = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
+var fadeInLeft = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
+var fadeInRight = {
+  hidden: { opacity: 0, x: 20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
+var scaleUp = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
+var staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.1
+    }
+  }
+};
+var staggerItem = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
+var cardHover = {
+  rest: {
+    y: 0,
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    transition: {
+      duration: timing.quick,
+      ease: easeOutExpo
+    }
+  },
+  hover: {
+    y: -4,
+    boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    transition: {
+      duration: timing.quick,
+      ease: easeOutExpo
+    }
+  }
+};
+var imageZoom = {
+  rest: {
+    scale: 1,
+    transition: {
+      duration: timing.ambient,
+      ease: easeOutExpo
+    }
+  },
+  hover: {
+    scale: 1.05,
+    transition: {
+      duration: timing.ambient,
+      ease: easeOutExpo
+    }
+  }
+};
+var buttonPress = {
+  tap: { scale: 0.95 },
+  hover: { scale: 1.02 }
+};
+var pageTransition = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: timing.quick,
+      ease: easeOutExpo
+    }
+  }
+};
+var revealRight = {
+  hidden: {
+    clipPath: "inset(0 100% 0 0)"
+  },
+  visible: {
+    clipPath: "inset(0 0% 0 0)",
+    transition: {
+      duration: timing.ambient,
+      ease: easeOutExpo
+    }
+  }
+};
+var blurFade = {
+  hidden: {
+    opacity: 0,
+    filter: "blur(10px)"
+  },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    transition: {
+      duration: timing.standard,
+      ease: easeOutExpo
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ClientLayout,
   Footer,
   Header,
-  ThemeToggle
+  HomePage,
+  ThemeToggle,
+  blurFade,
+  buttonPress,
+  cardHover,
+  defineConfig,
+  easeOutExpo,
+  fadeInLeft,
+  fadeInRight,
+  fadeInUp,
+  imageZoom,
+  pageTransition,
+  revealRight,
+  scaleUp,
+  springStiff,
+  staggerContainer,
+  staggerItem,
+  timing
 });