@sanvika/ui 0.1.3 → 0.1.5

package/src/components/progressBar/ProgressBar.jsx

@@ -1,113 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-// 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 SubNavbar } from "./components/layout/SubNavbar.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";