@sanvika/ui 0.1.0

package/src/components/modals/Modal.jsx

@@ -0,0 +1,74 @@
+"use client";
+// src/components/modals/Modal.jsx
+import React, { useEffect, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import styles from "@/styles/components/modals/Modal.module.css";
+
+/**
+ * Modal — pure props-driven portal modal.
+ * Close button is NOT included — pass it in via children.
+ *
+ * @param {boolean} isOpen - controls visibility
+ * @param {function} onClose - called on backdrop click or ESC key
+ * @param {React.ReactNode} children - modal content (include your own close button here)
+ * @param {string} [className]
+ */
+
+// SSR-safe mount detection using useSyncExternalStore (React 18+ recommended)
+const emptySubscribe = () => () => {};
+const useIsMounted = () =>
+  useSyncExternalStore(emptySubscribe, () => true, () => false);
+
+const Modal = ({ isOpen, onClose, children, className }) => {
+  const mounted = useIsMounted();
+
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.width = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.width = "";
+    };
+  }, [isOpen]);
+
+  // ESC key closes modal
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    if (isOpen) document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !mounted) return null;
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  return createPortal(
+    <div
+      className={styles.modalOverlay}
+      onClick={handleBackdropClick}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className={`${styles.modalContent} ${className ?? ""}`}>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;
+

package/src/components/progressBar/ProgressBar.jsx

@@ -0,0 +1,113 @@
+"use client";
+// src/components/progressBar/ProgressBar.jsx
+import React, { useEffect, useRef, useState } from "react";
+import styles from "@/styles/components/progressBar/ProgressBar.module.css";
+
+/**
+ * ProgressBar — animated, pure props-driven progress indicator.
+ *
+ * @param {number} [progress=0] - 0 to 100
+ * @param {number} [height=6] - bar height in px
+ * @param {string} [color] - CSS color or var() for the filled bar
+ * @param {string} [backgroundColor] - CSS color or var() for the track
+ * @param {boolean} [animate=true] - smooth animation
+ * @param {number} [speed=300] - animation base duration in ms
+ * @param {boolean} [showLabel=false] - show percentage label
+ * @param {"top"|"bottom"} [labelPosition="top"]
+ * @param {function} [onComplete] - called when progress reaches 100
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const ProgressBar = ({
+  progress = 0,
+  height = 6,
+  color = "var(--primary-color, #007bff)",
+  backgroundColor = "var(--progress-bg, rgba(0, 0, 0, 0.1))",
+  animate = true,
+  speed = 300,
+  showLabel = false,
+  labelPosition = "top",
+  onComplete = null,
+  className = "",
+  style = {},
+}) => {
+  const [animatedProgress, setAnimatedProgress] = useState(0);
+  const rafIdRef = useRef(null);
+  const startRef = useRef(0);
+  const endRef = useRef(progress);
+  const startTimeRef = useRef(null);
+  const completedRef = useRef(false);
+
+  const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+
+  useEffect(() => {
+    if (!animate) return;
+    startRef.current = animatedProgress;
+  }, [animatedProgress, animate]);
+
+  useEffect(() => {
+    if (!animate) return; // non-animated: use progress directly via clampedProgress below
+    if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    endRef.current = progress;
+    startTimeRef.current = null;
+    if (startRef.current === endRef.current) return;
+
+    const delta = Math.abs(endRef.current - startRef.current);
+    const duration = Math.max(speed, Math.min(1500, 20 * delta));
+
+    const step = (ts) => {
+      if (startTimeRef.current === null) startTimeRef.current = ts;
+      const elapsed = ts - startTimeRef.current;
+      const t = Math.max(0, Math.min(1, elapsed / duration));
+      const eased = easeOutCubic(t);
+      const next = startRef.current + (endRef.current - startRef.current) * eased;
+      setAnimatedProgress(next);
+      if (t < 1) {
+        rafIdRef.current = requestAnimationFrame(step);
+      } else {
+        setAnimatedProgress(endRef.current);
+        if (endRef.current >= 100 && onComplete && !completedRef.current) {
+          completedRef.current = true;
+          onComplete();
+        }
+      }
+    };
+    rafIdRef.current = requestAnimationFrame(step);
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [progress, animate, speed, onComplete]);
+
+  // When not animated, use progress directly; when animated, use animatedProgress
+  const clampedProgress = Math.max(0, Math.min(100, animate ? animatedProgress : progress));
+  const label = `${Math.round(clampedProgress)}%`;
+
+  return (
+    <div
+      className={`${styles.wrapper} ${className}`}
+      style={style}
+      role="progressbar"
+      aria-valuenow={Math.round(clampedProgress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      {showLabel && labelPosition === "top" && (
+        <span className={styles.label}>{label}</span>
+      )}
+      <div
+        className={styles.track}
+        style={{ height, backgroundColor }}
+      >
+        <div
+          className={styles.bar}
+          style={{ width: `${clampedProgress}%`, background: color }}
+        />
+      </div>
+      {showLabel && labelPosition === "bottom" && (
+        <span className={styles.label}>{label}</span>
+      )}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/context/ThemeContext.jsx

@@ -0,0 +1,91 @@
+"use client";
+// src/context/ThemeContext.jsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [mounted, setMounted] = useState(false);
+  const [theme, setTheme] = useState("light"); // SSR fallback
+
+  // Step 1: On mount, load theme from localStorage. Default = dark.
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("theme");
+      const resolved = saved ?? "dark"; // First visit = dark
+      setTheme(resolved);
+      document.documentElement.setAttribute("data-theme", resolved);
+
+      // Listen for OS-level theme changes only if user has not set a preference
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const onSystemChange = (e) => {
+        if (!localStorage.getItem("theme")) {
+          const sys = e.matches ? "dark" : "light";
+          setTheme(sys);
+        }
+      };
+      mq.addEventListener("change", onSystemChange);
+      setMounted(true);
+      return () => mq.removeEventListener("change", onSystemChange);
+    } catch {
+      setTheme("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+      setMounted(true);
+    }
+  }, []);
+
+  // Step 2: Apply theme with smooth transition class
+  const applyTheme = useCallback((next) => {
+    const root = document.documentElement;
+    root.classList.add("theme-transition");
+    root.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    const t = setTimeout(() => root.classList.remove("theme-transition"), 300);
+    return () => clearTimeout(t);
+  }, []);
+
+  // Step 3: Apply whenever theme state changes (after mount)
+  useEffect(() => {
+    if (mounted) applyTheme(theme);
+  }, [theme, mounted, applyTheme]);
+
+  // Step 4: Toggle
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  }, []);
+
+  // Step 5: Explicit setter (for admin/testing)
+  const setThemeExplicitly = useCallback((next) => {
+    if (next !== "light" && next !== "dark") return;
+    setTheme(next);
+  }, []);
+
+  // React 19 direct context syntax
+  return (
+    <ThemeContext
+      value={{
+        theme,
+        toggleTheme,
+        setTheme: setThemeExplicitly,
+        isDarkMode: theme === "dark",
+        isThemeReady: mounted,
+      }}
+    >
+      {children}
+    </ThemeContext>
+  );
+};
+
+export const useTheme = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  return ctx;
+};
+
+export { ThemeContext };

package/src/index.js

@@ -0,0 +1,29 @@
+// src/index.js
+// @sanvika/ui — main barrel export
+// Import this in your project: import { Button, Modal, Navbar, ... } from "@sanvika/ui"
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
+export { default as Navbar } from "./components/layout/Navbar.jsx";
+export { default as Footer } from "./components/layout/Footer.jsx";
+
+// ─── Buttons ─────────────────────────────────────────────────────────────────
+export { default as Button } from "./components/buttons/Button.jsx";
+export { default as FavoriteHeartButton } from "./components/buttons/FavoriteHeartButton.jsx";
+export { default as ScrollButton } from "./components/buttons/ScrollButton.jsx";
+export { default as ThreeDotButton } from "./components/buttons/ThreeDotButton.jsx";
+
+// ─── Common ──────────────────────────────────────────────────────────────────
+export { default as Container } from "./components/common/Container.jsx";
+export { default as Section } from "./components/common/Section.jsx";
+
+// ─── Modals ──────────────────────────────────────────────────────────────────
+export { default as Modal } from "./components/modals/Modal.jsx";
+
+// ─── ProgressBar ─────────────────────────────────────────────────────────────
+export { default as ProgressBar } from "./components/progressBar/ProgressBar.jsx";
+
+// ─── Icons (re-exported from icons barrel) ───────────────────────────────────
+export * from "./components/icons/index.js";
+
+// ─── Theme Context ────────────────────────────────────────────────────────────
+export { ThemeProvider, useTheme } from "./context/ThemeContext.jsx";

package/src/styles/base/elements.css

@@ -0,0 +1,71 @@
+/* src/styles/base/elements.css */
+
+/* ========================================== */
+/* FORM & INTERACTIVE ELEMENTS               */
+/* ========================================== */
+
+input,
+textarea,
+select {
+  background-color: var(--input-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border-color-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  width: 100%;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-base);
+  outline: none;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--focus-border-color);
+  box-shadow: 0 0 0 3px var(--focus-shadow-color);
+}
+
+button {
+  cursor: pointer;
+  font-family: var(--font-sans);
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-color-light);
+  margin: var(--space-6) 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  border-bottom: 1px solid var(--border-color-light);
+}
+
+th {
+  font-weight: 600;
+  color: var(--heading-color);
+  background-color: var(--section-bg);
+}

package/src/styles/base/reset.css

@@ -0,0 +1,52 @@
+/* src/styles/base/reset.css */
+
+/* ========================================== */
+/* UNIVERSAL RESET & OPTIMIZATION            */
+/* ========================================== */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+}
+
+body {
+  min-height: 100%;
+  width: 100%;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition:
+    background-color var(--transition-base),
+    color var(--transition-base);
+  overflow-x: hidden;
+}
+
+::placeholder {
+  color: var(--placeholder-color);
+  opacity: 1;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+ul,
+ol {
+  list-style: none;
+}

package/src/styles/base/typography.css

@@ -0,0 +1,80 @@
+/* src/styles/base/typography.css */
+
+/* ========================================== */
+/* TYPOGRAPHY & TEXT ELEMENTS                */
+/* ========================================== */
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--heading-color);
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+h1 {
+  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
+}
+h2 {
+  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
+}
+h3 {
+  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
+}
+h4 {
+  font-size: var(--text-xl);
+}
+h5 {
+  font-size: var(--text-lg);
+}
+h6 {
+  font-size: var(--text-base);
+}
+
+p {
+  color: var(--text-color);
+  margin-bottom: var(--space-4);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+label {
+  color: var(--label-color);
+  font-weight: 500;
+  font-size: var(--text-sm);
+}
+
+small {
+  font-size: var(--text-xs);
+  color: var(--secondary-text-color);
+}
+
+strong {
+  font-weight: 700;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--muted-bg);
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color-light);
+}

package/src/styles/components/buttons/Button.module.css

@@ -0,0 +1,160 @@
+/* src/styles/components/buttons/Button.module.css */
+
+/* Universal Button — Mobile-First, SSOT via CSS variables */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(4px, 0.5vw, 6px);
+
+  background-color: var(--button-bg, var(--btn-primary-bg));
+  color: var(--button-text, var(--btn-primary-text));
+  border: 1px solid var(--button-border, transparent);
+
+  font-family: var(--font-sans);
+  font-weight: 500;
+  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
+  line-height: 1.2;
+  white-space: nowrap;
+  text-decoration: none;
+
+  padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2.5vw, 20px);
+  border-radius: var(--radius-md);
+  min-height: clamp(32px, 8vw, 40px);
+
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.button:hover {
+  background-color: var(--button-hover-bg, var(--btn-primary-hover-bg));
+  color: var(--button-hover-text, var(--btn-primary-hover-text));
+  box-shadow: 0 2px 8px var(--shadow-color);
+}
+
+.button:active {
+  box-shadow: none;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--focus-border-color);
+  outline-offset: 2px;
+}
+
+.button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+/* ===== INTENT VARIANTS ===== */
+
+.primary {
+  --button-bg: var(--btn-primary-bg);
+  --button-text: var(--btn-primary-text);
+  --button-hover-bg: var(--btn-primary-hover-bg);
+  --button-hover-text: var(--btn-primary-hover-text);
+}
+
+.secondary {
+  --button-bg: var(--btn-secondary-bg);
+  --button-text: var(--btn-secondary-text);
+  --button-hover-bg: var(--btn-secondary-hover-bg);
+  --button-hover-text: var(--btn-secondary-hover-text);
+}
+
+.danger {
+  --button-bg: var(--btn-danger-bg);
+  --button-text: var(--btn-danger-text);
+  --button-hover-bg: var(--btn-danger-hover-bg);
+  --button-hover-text: var(--btn-danger-hover-text);
+}
+
+.success {
+  --button-bg: var(--btn-success-bg);
+  --button-text: var(--btn-success-text);
+  --button-hover-bg: var(--btn-success-hover-bg);
+  --button-hover-text: var(--btn-success-hover-text);
+}
+
+/* ===== APPEARANCE VARIANTS ===== */
+
+.outline {
+  --button-bg: transparent;
+  --button-hover-bg: var(--hover-color);
+  --button-text: var(--text-color);
+  --button-hover-text: var(--text-color);
+  --button-border: var(--border-color-light);
+}
+
+.ghost {
+  --button-bg: transparent;
+  --button-hover-bg: var(--hover-color);
+  --button-text: var(--text-color);
+  --button-hover-text: var(--text-color);
+  --button-border: transparent;
+  box-shadow: none;
+}
+
+.ghost:hover {
+  box-shadow: none;
+}
+
+/* ===== SIZE VARIANTS ===== */
+
+.sm {
+  font-size: var(--text-xs);
+  padding: clamp(3px, 0.8vw, 5px) clamp(8px, 2vw, 12px);
+  min-height: clamp(24px, 6vw, 32px);
+  border-radius: var(--radius-sm);
+}
+
+.lg {
+  font-size: var(--text-base);
+  padding: clamp(10px, 2vw, 14px) clamp(20px, 5vw, 32px);
+  min-height: clamp(40px, 10vw, 56px);
+  border-radius: var(--radius-lg);
+}
+
+.full {
+  width: 100%;
+}
+
+/* ===== SLOT ELEMENTS ===== */
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.text {
+  color: inherit;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 clamp(2px, 0.5vw, 4px);
+  border-radius: var(--radius-full);
+  font-size: 0.65rem;
+  font-weight: 700;
+  background-color: var(--error-color);
+  color: var(--btn-primary-text);
+  margin-left: clamp(2px, 0.5vw, 4px);
+}

package/src/styles/components/buttons/FavoriteHeartButton.module.css

@@ -0,0 +1,35 @@
+/* src/styles/components/buttons/FavoriteHeartButton.module.css */
+
+.favoriteHeartButton {
+  background-color: transparent !important;
+  border: none !important;
+  padding: clamp(4px, 1.5vw, 8px) !important;
+  cursor: pointer;
+  min-width: clamp(32px, 8vw, 48px) !important;
+  max-width: clamp(32px, 8vw, 48px) !important;
+  height: clamp(32px, 8vw, 48px) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0 !important;
+  transition: opacity 0.2s ease;
+}
+
+.favorited {
+  color: var(--danger-color, #dc3545) !important;
+}
+
+.notFavorited {
+  color: var(--secondary-text-color) !important;
+}
+
+.favoriteHeartButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.favoriteHeartButton:hover:not(:disabled) {
+  opacity: 0.75;
+  background-color: transparent !important;
+  border: none !important;
+}