@sanvika/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanvika/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "private": false,
   "description": "Sanvika Production — shared UI component library for 50+ projects. Pure JS, CSS Modules, props-driven.",

package/src/components/buttons/FavoriteHeartButton.jsx

@@ -1,7 +1,7 @@
 // src/components/buttons/FavoriteHeartButton.jsx
 import React from "react";
-import HeartIcon from "../icons/HeartIcon";
-import Button from "./Button";
+import HeartIcon from "../icons/HeartIcon.jsx";
+import Button from "./Button.jsx";
 import styles from "../../styles/components/buttons/FavoriteHeartButton.module.css";
 
 /**

package/src/components/buttons/ScrollButton.jsx

@@ -1,6 +1,6 @@
 // src/components/buttons/ScrollButton.jsx
 import React from "react";
-import Button from "./Button";
+import Button from "./Button.jsx";
 import { FaArrowUp, FaArrowDown } from "../icons/index.js";
 
 /**

package/src/components/buttons/ThreeDotButton.jsx

@@ -1,6 +1,6 @@
 // src/components/buttons/ThreeDotButton.jsx
 import React from "react";
-import Button from "./Button";
+import Button from "./Button.jsx";
 import styles from "../../styles/components/buttons/ThreeDotButton.module.css";
 
 /**

package/src/components/common/Section.jsx

@@ -1,6 +1,6 @@
 // src/components/common/Section.jsx
 import styles from "../../styles/components/common/Section.module.css";
-import Container from "./Container";
+import Container from "./Container.jsx";
 
 /**
  * Section — a full-width page section with optional title/subtitle.

package/src/components/layout/Footer.jsx

@@ -1,142 +1,53 @@
 // src/components/layout/Footer.jsx
+"use client";
 import styles from "../../styles/components/layouts/Footer.module.css";
 
-const DEFAULT_LEGAL_LINKS = [
-  { href: "/about", label: "About" },
-  { href: "/contact", label: "Contact" },
-  { href: "/legal/privacy-policy", label: "Privacy" },
-  { href: "/legal/terms-of-use", label: "Terms" },
-  { href: "/sitemap", label: "Sitemap" },
-];
-
-const DEFAULT_SOCIAL_LINKS = [
-  {
-    href: "https://www.facebook.com/sanvikaproduction",
-    label: "Visit our Facebook page",
-    type: "facebook",
-  },
-  {
-    href: "https://www.instagram.com/sanvikaproduction",
-    label: "Visit our Instagram page",
-    type: "instagram",
-  },
-  {
-    href: "https://www.youtube.com/@SanvikaProduction",
-    label: "Visit our YouTube channel",
-    type: "youtube",
-  },
-];
-
 /**
- * Footer — pure props-driven, no Next.js router dependency.
+ * Footer — props-driven layout shell for all 50+ Sanvika projects.
+ * 3-row layout: socialSlot | legalSlot | trustSlot.
+ * Each project passes its own social icons, legal links, trust badge via slots.
  *
- * @param {Array<{href: string, label: string}>} [legalLinks]
- * @param {Array<{href: string, label: string, type: string}>} [socialLinks]
- * @param {string} [trustBadgeHref]
- * @param {string} [trustText]
+ * @param {React.ReactNode} socialSlot - Social icons row (+ optional extra actions like RefreshButton)
+ * @param {React.ReactNode} legalSlot - Legal links row (About, Contact, Privacy, Terms, etc.)
+ * @param {React.ReactNode} trustSlot - Trust badge row (DUNS badge, copyright, etc.)
+ * @param {string} [className] - Additional CSS class
  */
 const Footer = ({
-  legalLinks = DEFAULT_LEGAL_LINKS,
-  socialLinks = DEFAULT_SOCIAL_LINKS,
-  trustBadgeHref = "/legal/legal-info",
-  trustText = "D-U-N-S® Verified · Sanvika Production",
+  socialSlot,
+  legalSlot,
+  trustSlot,
+  className = "",
 }) => {
   return (
-    <footer className={styles.footer}>
-      <div className={styles.content}>
-        {/* Social icons */}
-        <div className={styles.social}>
-          {socialLinks.map(({ href, label, type }) => (
-            <a
-              key={href}
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={label}
-              className={`${styles.socialLink} ${styles[type] ?? ""}`}
-            >
-              <SocialIcon name={type} />
-            </a>
-          ))}
-        </div>
+    <footer className={`${styles.footer} ${className}`.trim()}>
+      <div className={styles.footerContent}>
+        {/* Row 1: Social icons + extra actions */}
+        {socialSlot && (
+          <div className={styles.topLine}>
+            <div className={styles.socialIconsContainer}>
+              <div className={styles.socialIcons}>
+                {socialSlot}
+              </div>
+            </div>
+          </div>
+        )}
 
-        {/* Legal links */}
-        <nav aria-label="Footer navigation">
-          <ul className={styles.links}>
-            {legalLinks.map(({ href, label }) => (
-              <li key={href}>
-                <a href={href} className={styles.link}>
-                  {label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
+        {/* Row 2: Legal links */}
+        {legalSlot && (
+          <div className={styles.legalLinks}>
+            {legalSlot}
+          </div>
+        )}
 
-        {/* Trust badge */}
-        <p className={styles.trust}>
-          <a href={trustBadgeHref} className={styles.trustBadge}>
-            <span className={styles.checkIcon}>✓</span>
-            <span>{trustText}</span>
-          </a>
-        </p>
+        {/* Row 3: Trust badge */}
+        {trustSlot && (
+          <div className={styles.dunsContainer}>
+            {trustSlot}
+          </div>
+        )}
       </div>
     </footer>
   );
 };
 
-/* Inline SVG social icons — no external dependency */
-const SocialIcon = ({ name }) => {
-  if (name === "facebook") {
-    return (
-      <svg
-        viewBox="0 0 24 24"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-      </svg>
-    );
-  }
-  if (name === "instagram") {
-    return (
-      <svg
-        viewBox="0 0 24 24"
-        width="1em"
-        height="1em"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-      >
-        <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-        <circle cx="12" cy="12" r="4" />
-        <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" stroke="none" />
-      </svg>
-    );
-  }
-  if (name === "youtube") {
-    return (
-      <svg
-        viewBox="0 0 24 24"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.97C18.88 4 12 4 12 4s-6.88 0-8.59.45A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.4a2.78 2.78 0 0 0 1.95-1.97A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
-        <polygon
-          points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"
-          fill="var(--nav-bg, #fff)"
-        />
-      </svg>
-    );
-  }
-  return null;
-};
-
 export default Footer;

package/src/components/layout/Navbar.jsx

@@ -1,64 +1,49 @@
-"use client";
 // src/components/layout/Navbar.jsx
-import { useTheme } from "../../context/ThemeContext";
+"use client";
 import styles from "../../styles/components/layouts/Navbar.module.css";
 
-const DEFAULT_NAV_LINKS = [{ href: "/", label: "Home" }];
-
-const SunIcon = () => <span aria-hidden="true">☀️</span>;
-const MoonIcon = () => <span aria-hidden="true">🌙</span>;
-
 /**
- * Navbar — pure props-driven, no Next.js router dependency.
+ * Navbar — props-driven layout shell for all 50+ Sanvika projects.
+ * 3-column grid: leftSlot | centerSlot | rightSlot.
+ * Each project passes its own logo, buttons, menus via slot props.
  *
- * @param {Array<{href: string, label: string}>} [navLinks]
- * @param {string} [activePath] - marks which nav link as active
- * @param {string} [logoText]
- * @param {string} [logoHref]
+ * @param {React.ReactNode} leftSlot - Logo area (left column)
+ * @param {React.ReactNode} centerSlot - Center menu items wrapped in <ul>
+ * @param {React.ReactNode} rightSlot - Right actions (profile, settings)
+ * @param {string} [className] - Additional CSS class
+ * @param {string} [ariaLabel] - Accessible label for <nav>
  */
 const Navbar = ({
-  navLinks = DEFAULT_NAV_LINKS,
-  activePath = "/",
-  logoText = "Sanvika",
-  logoHref = "/",
+  leftSlot,
+  centerSlot,
+  rightSlot,
+  className = "",
+  ariaLabel = "Main navigation",
 }) => {
-  const { theme, toggleTheme } = useTheme();
-
   return (
-    <header className={styles.header}>
-      {/* Left: Logo */}
-      <a href={logoHref} className={styles.logo} aria-label={`${logoText} — Home`}>
-        <span className={styles.logoText}>{logoText}</span>
-      </a>
+    <nav
+      className={`${styles.navbar} ${className}`.trim()}
+      aria-label={ariaLabel}
+    >
+      {/* Left: Logo area */}
+      <div className={styles.navSectionLeft}>
+        {leftSlot}
+      </div>
 
-      {/* Center: Navigation */}
-      <nav aria-label="Main navigation">
-        <ul className={styles.nav}>
-          {navLinks.map(({ href, label }) => (
-            <li key={href}>
-              <a
-                href={href}
-                className={`${styles.navLink} ${activePath === href ? styles.navLinkActive : ""}`}
-              >
-                {label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </nav>
+      {/* Center: Menu items */}
+      <div className={styles.navSectionCenter}>
+        {centerSlot && (
+          <ul className={styles.menu}>
+            {centerSlot}
+          </ul>
+        )}
+      </div>
 
-      {/* Right: Actions */}
-      <div className={styles.right}>
-        <button
-          className={styles.themeToggle}
-          onClick={toggleTheme}
-          aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
-          title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
-        >
-          {theme === "dark" ? <SunIcon /> : <MoonIcon />}
-        </button>
+      {/* Right: Action buttons */}
+      <div className={styles.navSectionRight}>
+        {rightSlot}
       </div>
-    </header>
+    </nav>
   );
 };
 

package/src/components/layout/SubNavbar.jsx

@@ -0,0 +1,36 @@
+// src/components/layout/SubNavbar.jsx
+"use client";
+import styles from "../../styles/components/layouts/SubNavbar.module.css";
+
+/**
+ * SubNavbar — fixed below Navbar, props-driven layout shell.
+ * Accepts items as children (React nodes) and optional afterContent
+ * for global modals/overlays that should render outside the nav.
+ *
+ * @param {React.ReactNode} children - Menu items (each wrapped in <li>)
+ * @param {React.ReactNode} [afterContent] - Content rendered after nav (modals, overlays)
+ * @param {string} [className] - Additional CSS class
+ * @param {string} [ariaLabel] - Accessible label for <nav>
+ */
+const SubNavbar = ({
+  children,
+  afterContent,
+  className = "",
+  ariaLabel = "Secondary navigation",
+}) => {
+  return (
+    <>
+      <nav
+        className={`${styles.subNavbar} ${className}`.trim()}
+        aria-label={ariaLabel}
+      >
+        <ul className={styles.menu}>
+          {children}
+        </ul>
+      </nav>
+      {afterContent}
+    </>
+  );
+};
+
+export default SubNavbar;

package/src/index.js

@@ -4,6 +4,7 @@
 
 // ─── Layout ──────────────────────────────────────────────────────────────────
 export { default as Navbar } from "./components/layout/Navbar.jsx";
+export { default as SubNavbar } from "./components/layout/SubNavbar.jsx";
 export { default as Footer } from "./components/layout/Footer.jsx";
 
 // ─── Buttons ─────────────────────────────────────────────────────────────────

package/src/styles/components/layouts/Footer.module.css

@@ -1,100 +1,72 @@
 /* src/styles/components/layouts/Footer.module.css */
 
+/* Footer Container — Non-sticky, scrolls with content */
 .footer {
-  width: 100%;
   background-color: var(--card-bg);
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 3vw, 24px);
-  min-height: clamp(40px, 8vw, 56px);
-
+  padding: clamp(2px, 0.5vw, 4px) clamp(5px, 1.5vw, 10px);
+  border-top: clamp(0.5px, 0.2vw, 1px) solid var(--border-color);
+  border-bottom: clamp(0.5px, 0.2vw, 1px) solid var(--border-color);
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  z-index: 900;
   justify-content: center;
-  gap: clamp(4px, 1vw, 8px);
-
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
+  text-align: center;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  position: relative;
+  min-height: clamp(24px, 6vw, 36px);
+  box-shadow: 0 -1px 0 0 var(--border-color) inset;
 }
 
-.content {
+/* Footer Content — column layout */
+.footerContent {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-width: clamp(300px, 90vw, 480px);
-  gap: clamp(4px, 0.8vw, 8px);
+  max-width: clamp(300px, 90vw, 400px);
+  gap: clamp(1px, 0.2vw, 2px);
 }
 
-/* Social icons row */
-.social {
+/* Top Line — Social Icons row */
+.topLine {
   display: flex;
   align-items: center;
-  gap: clamp(12px, 3vw, 24px);
+  justify-content: center;
+  width: 100%;
 }
 
-.socialLink {
-  display: inline-flex;
+/* Social Icons Container */
+.socialIconsContainer {
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-color);
-  font-size: clamp(1.25rem, 4vw, 1.5rem);
-  transition: color 0.3s ease;
-  text-decoration: none;
-}
-
-.socialLink:hover {
-  opacity: 0.8;
-  text-decoration: none;
+  flex: 0 0 auto;
+  padding: clamp(2px, 1vw, 4px) clamp(4px, 1.5vw, 6px);
 }
 
-/* Legal links row */
-.links {
+/* Social Icons row — includes extra actions like refresh button */
+.socialIcons {
   display: flex;
+  gap: clamp(8px, 2vw, 16px);
   align-items: center;
-  flex-wrap: wrap;
   justify-content: center;
-  gap: clamp(8px, 2vw, 16px);
-}
-
-.link {
-  font-size: clamp(0.65rem, 2vw, 0.75rem);
-  color: var(--text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color 0.3s ease;
-}
-
-.link:hover {
-  color: var(--link-hover-color);
-}
-
-/* Copyright / trust line */
-.trust {
-  font-size: clamp(0.6rem, 1.8vw, 0.68rem);
-  color: var(--text-color);
-  text-align: center;
 }
 
-.trustBadge {
-  display: inline-flex;
+/* Legal Links row */
+.legalLinks {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
   align-items: center;
-  gap: clamp(2px, 0.5vw, 4px);
-  color: var(--text-color);
-  font-size: inherit;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.trustBadge:hover {
-  color: var(--success-color);
-  text-decoration: none;
+  gap: clamp(4px, 1.5vw, 8px);
+  width: 100%;
 }
 
-.checkIcon {
-  color: var(--success-color);
-  font-size: 0.75rem;
-  font-weight: 700;
+/* DUNS / Trust Badge Container */
+.dunsContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: clamp(2px, 0.5vw, 4px);
 }

package/src/styles/components/layouts/Navbar.module.css

@@ -1,121 +1,68 @@
 /* src/styles/components/layouts/Navbar.module.css */
 
-.header {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
+/* Main navbar container — 3-column grid, fixed at top */
+.navbar {
   background-color: var(--card-bg);
+  padding: clamp(4px, 1vw, 10px) clamp(6px, 2vw, 18px);
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
-  box-shadow: 0 2px 4px var(--shadow-color);
-  min-height: clamp(48px, 10vw, 64px);
-
+  width: 100%;
+  z-index: 1000;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: visible;
+  min-height: clamp(40px, 10vw, 60px);
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  column-gap: clamp(8px, 2vw, 20px);
-  padding: 0 clamp(8px, 3vw, 24px);
-
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  column-gap: clamp(4px, 1vw, 12px);
   transition: background-color 0.3s ease;
 }
 
-/* Left: logo area */
-.left {
+/* Left section — logo area */
+.navSectionLeft {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  justify-content: flex-start;
+  height: 100%;
+  cursor: pointer;
+  user-select: none;
+  min-width: clamp(48px, 16vw, 88px);
   text-decoration: none;
   color: inherit;
-  flex-shrink: 0;
 }
 
-.logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  text-decoration: none;
-  color: var(--text-color);
-}
-
-.logoMark {
-  width: clamp(28px, 8vw, 40px);
-  height: clamp(28px, 8vw, 40px);
-  object-fit: contain;
-  border-radius: var(--radius-md);
-}
-
-.logoText {
-  font-size: clamp(var(--text-base), 3vw, var(--text-lg));
-  font-weight: 700;
-  color: var(--text-color);
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-}
-
-/* Center: nav links */
-.nav {
+/* Center section — menu items */
+.navSectionCenter {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: clamp(4px, 1.5vw, 24px);
-  list-style: none;
-  overflow: hidden;
-}
-
-.navLink {
-  font-size: clamp(var(--text-xs), 2.5vw, var(--text-sm));
-  font-weight: 500;
-  color: var(--text-color);
-  text-decoration: none;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-sm);
-  white-space: nowrap;
-  transition:
-    color 0.3s ease,
-    background-color 0.3s ease;
-}
-
-.navLink:hover {
-  color: var(--nav-link-hover);
-  background-color: var(--hover-color);
-  text-decoration: none;
-}
-
-.navLinkActive {
-  color: var(--primary-color);
-  font-weight: 600;
+  height: 100%;
+  width: 100%;
+  min-width: 0;
 }
 
-/* Right: actions */
-.right {
+.menu {
+  list-style: none;
   display: flex;
   align-items: center;
-  gap: clamp(4px, 1vw, 12px);
-  flex-shrink: 0;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  flex-wrap: nowrap;
+  gap: clamp(4px, 1.2vw, 12px);
+  width: 100%;
 }
 
-/* Theme toggle button */
-.themeToggle {
+/* Right section — action buttons */
+.navSectionRight {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: clamp(32px, 8vw, 40px);
-  height: clamp(32px, 8vw, 40px);
-  border-radius: var(--radius-full);
-  border: 1px solid var(--border-color-light);
-  background: transparent;
-  color: var(--text-color);
-  cursor: pointer;
-  font-size: var(--text-base);
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-.themeToggle:hover {
-  background-color: var(--hover-color);
-  border-color: var(--border-color);
+  justify-content: flex-end;
+  height: 100%;
+  min-width: clamp(48px, 16vw, 88px);
+  overflow: visible;
 }

package/src/styles/components/layouts/SubNavbar.module.css

@@ -0,0 +1,34 @@
+/* src/styles/components/layouts/SubNavbar.module.css */
+
+/* Fixed below main Navbar */
+.subNavbar {
+  background-color: var(--card-bg);
+  padding: clamp(6px, 1.5vw, 10px) clamp(6px, 2vw, 18px);
+  border-bottom: 0.5px solid var(--border-color);
+  width: 100%;
+  display: flex;
+  z-index: 999;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: visible;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  min-height: clamp(48px, 10vw, 60px);
+  top: clamp(48px, 10vw, 60px);
+  left: 0;
+  right: 0;
+  transition: background-color 0.3s ease;
+}
+
+.menu {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin: 0;
+  padding: 0 clamp(4px, 1vw, 12px);
+  flex-wrap: nowrap;
+  gap: clamp(4px, 1.5vw, 16px);
+  width: 100%;
+  max-width: 500px;
+}