@sanvika/ui 0.1.0

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

@@ -0,0 +1,41 @@
+/* src/styles/components/buttons/ThreeDotButton.module.css */
+
+.threeDotButton {
+  min-width: 44px !important;
+  width: 44px !important;
+  max-width: 44px !important;
+  height: 44px !important;
+  padding: 6px !important;
+  gap: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+.threeDotButton:hover,
+.threeDotButton:active {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+.threeDotButton:focus-visible {
+  outline: 2px solid var(--accent-color, #007bff);
+  border-radius: var(--radius-sm, 4px);
+}
+
+.dotsWrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+}
+
+.dot {
+  width: 4px;
+  height: 4px;
+  background: currentColor;
+  border-radius: 50%;
+  display: inline-block;
+}

package/src/styles/components/common/Container.module.css

@@ -0,0 +1,25 @@
+/* src/styles/components/common/Container.module.css */
+
+.container {
+  width: 100%;
+  max-width: var(--container-max-width, 1280px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--section-padding-x);
+  padding-right: var(--section-padding-x);
+}
+
+/* Narrow variant for content-heavy pages */
+.narrow {
+  max-width: 768px;
+}
+
+/* Wide variant — nearly full-bleed */
+.wide {
+  max-width: 1536px;
+}
+
+/* Full — no max-width cap */
+.full {
+  max-width: none;
+}

package/src/styles/components/common/Section.module.css

@@ -0,0 +1,54 @@
+/* src/styles/components/common/Section.module.css */
+
+.section {
+  width: 100%;
+  padding-top: var(--section-padding-y);
+  padding-bottom: var(--section-padding-y);
+  background-color: var(--bg-color);
+}
+
+/* Alternate section — subtle contrast */
+.alternate {
+  background-color: var(--section-bg);
+}
+
+/* Card surface */
+.card {
+  background-color: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color-light);
+}
+
+/* Tight padding */
+.tight {
+  padding-top: calc(var(--section-padding-y) * 0.5);
+  padding-bottom: calc(var(--section-padding-y) * 0.5);
+}
+
+/* No padding */
+.flush {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.header {
+  margin-bottom: var(--space-8);
+  text-align: center;
+}
+
+.title {
+  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
+  font-weight: 700;
+  color: var(--heading-color);
+  margin-bottom: var(--space-3);
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: clamp(var(--text-sm), 2vw, var(--text-base));
+  color: var(--secondary-text-color);
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
+}

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

@@ -0,0 +1,100 @@
+/* src/styles/components/layouts/Footer.module.css */
+
+.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);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(4px, 1vw, 8px);
+
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: clamp(300px, 90vw, 480px);
+  gap: clamp(4px, 0.8vw, 8px);
+}
+
+/* Social icons row */
+.social {
+  display: flex;
+  align-items: center;
+  gap: clamp(12px, 3vw, 24px);
+}
+
+.socialLink {
+  display: inline-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;
+}
+
+/* Legal links row */
+.links {
+  display: flex;
+  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;
+  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;
+}
+
+.checkIcon {
+  color: var(--success-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+}

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

@@ -0,0 +1,21 @@
+/* src/styles/components/layouts/Layout.module.css */
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Push content down to clear the fixed header */
+.content {
+  flex: 1 0 auto;
+  margin-top: clamp(48px, 10vw, 64px); /* matches header min-height */
+}
+
+.main {
+  width: 100%;
+}
+
+.footerWrapper {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,121 @@
+/* src/styles/components/layouts/Navbar.module.css */
+
+.header {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--card-bg);
+  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);
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  column-gap: clamp(8px, 2vw, 20px);
+  padding: 0 clamp(8px, 3vw, 24px);
+
+  transition: background-color 0.3s ease;
+}
+
+/* Left: logo area */
+.left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  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 {
+  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;
+}
+
+/* Right: actions */
+.right {
+  display: flex;
+  align-items: center;
+  gap: clamp(4px, 1vw, 12px);
+  flex-shrink: 0;
+}
+
+/* Theme toggle button */
+.themeToggle {
+  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);
+}

package/src/styles/components/modals/Modal.module.css

@@ -0,0 +1,39 @@
+/* src/styles/components/modals/Modal.module.css */
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  animation: fadeIn 0.25s ease;
+}
+
+.modalContent {
+  background-color: var(--card-bg);
+  padding: clamp(16px, 4vw, 24px);
+  border-radius: var(--radius-md, 8px);
+  border: 1px solid var(--border-color-light);
+  width: clamp(300px, 90vw, 480px);
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: 0 4px 20px var(--shadow-color, rgba(0, 0, 0, 0.2));
+  transition: background-color 0.3s ease;
+  animation: slideIn 0.25s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(-12px); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}

package/src/styles/components/progressBar/ProgressBar.module.css

@@ -0,0 +1,28 @@
+/* src/styles/components/progressBar/ProgressBar.module.css */
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.track {
+  width: 100%;
+  border-radius: var(--radius-full, 9999px);
+  overflow: hidden;
+  background-color: var(--progress-bg, rgba(0, 0, 0, 0.1));
+}
+
+.bar {
+  height: 100%;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--primary-color, #007bff);
+  transition: width 0ms; /* animation handled via JS RAF */
+}
+
+.label {
+  font-size: var(--text-xs, 11px);
+  color: var(--secondary-text-color);
+  text-align: right;
+}

package/src/styles/fouc-prevention.css

@@ -0,0 +1,19 @@
+/* src/styles/fouc-prevention.css */
+
+/* ========================================== */
+/* FLASH OF UNSTYLED CONTENT PREVENTION      */
+/* ========================================== */
+
+/* Hide content until theme is applied to prevent flash */
+:root:not([data-theme]) {
+  visibility: hidden;
+}
+
+html[data-theme] {
+  visibility: visible;
+}
+
+[data-theme] {
+  visibility: visible;
+  transition: none;
+}

package/src/styles/index.css

@@ -0,0 +1,27 @@
+/* src/styles/index.css */
+/* @sanvika/ui — main styles entry point
+ * Import this ONCE in your project root layout:
+ *   import "@sanvika/ui/styles";
+ */
+
+/* 1. Design tokens — light theme (default) */
+@import "./tokens/light.css";
+
+/* 2. Design tokens — dark theme overrides */
+@import "./tokens/dark.css";
+
+/* 3. Base reset & HTML element defaults */
+@import "./base/reset.css";
+
+/* 4. Typography */
+@import "./base/typography.css";
+
+/* 5. HTML element base styles */
+@import "./base/elements.css";
+
+/* 6. FOUC prevention (theme flash) */
+@import "./fouc-prevention.css";
+
+/* 7. Utility classes */
+@import "./utilities/colors.css";
+@import "./utilities/transitions.css";

package/src/styles/tokens/dark.css

@@ -0,0 +1,121 @@
+/* src/styles/tokens/dark.css */
+
+/* ========================================== */
+/* DARK THEME VARIABLES (DESIGN TOKENS)      */
+/* ========================================== */
+[data-theme="dark"] {
+  /* ===== PRIMARY BACKGROUND COLORS ===== */
+  --bg-color: #111111;
+  --card-bg: #111111;
+  --input-bg: #111111;
+  --light-bg: #171616;
+  --section-bg: #1a1a1a;
+  --form-card-bg: #090909;
+  --hover-color: #1d1c1c;
+  --table-stripe-bg: #1a1919;
+  --muted-bg: #1f1f1f;
+  --disabled-bg: #505050;
+
+  /* ===== TEXT & CONTENT COLORS ===== */
+  --text-color: #ffffff;
+  --heading-color: #ffffff;
+  --label-color: #ffffff;
+  --placeholder-color: #efeaea;
+  --secondary-text-color: #ffffff;
+
+  /* ===== INTERACTIVE ELEMENTS ===== */
+  --link-color: #88c5ff;
+  --link-hover-color: #b3d9ff;
+  --focus-border-color: #007bff;
+  --focus-shadow-color: rgba(0, 123, 255, 0.25);
+
+  /* ===== BORDERS & ACCENTS ===== */
+  --border-color: #fbad05;
+  --border-color-light: #8fb6f5;
+  --muted-border: #2a2a2a;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+
+  /* ===== BRAND & PRIMARY COLORS ===== */
+  --primary-color: #0984e3;
+  --secondary-color: #6c757d;
+  --accent-color: #007bff;
+  --accent-btn-bg: #007bff;
+  --accent-btn-hover-bg: #0056b3;
+
+  /* ===== NAVIGATION SPECIFIC COLORS ===== */
+  --nav-bg: #161f2c;
+  --nav-text: #f0f0f0;
+  --nav-primary-color: #0984e3;
+  --nav-accent-color: #007bff;
+  --nav-link-color: #0066cc;
+  --nav-link-hover: #004c99;
+  --nav-highlight: #4ade80;
+  --nav-highlight-bg: rgba(74, 222, 128, 0.15);
+  --error-bg-light: rgba(239, 68, 68, 0.15);
+  --error-hover-color: #f87171;
+
+  /* ===== STATUS & FEEDBACK COLORS ===== */
+  --success-color: #25a03a;
+  --error-color: #b20c0c;
+  --warning-color: #e0aa12;
+  --info-color: #1a9eb0;
+
+  --success-bg: #133b24;
+  --success-border: #1a542f;
+  --error-bg: #3b1212;
+  --error-border: #4f1c1c;
+  --warning-bg: #3b2c10;
+  --warning-border: #543e17;
+  --info-bg: #0e3842;
+  --info-border: #164d58;
+
+  /* ===== ALIASES (BACKWARD COMPATIBILITY) ===== */
+  --danger-color: var(--error-color);
+  --danger-color-hover: var(--error-color);
+  --muted-color: var(--secondary-text-color);
+
+  /* ===== FORM & TABLE ELEMENTS ===== */
+  --tag-bg: #505050;
+  --table-header-bg: #007bff;
+  --table-header-text: #ffffff;
+
+  /* ===== FORM THEME SPECIFICS ===== */
+  --form-bg: linear-gradient(135deg, #23272f 0%, #181a1b 100%);
+  --form-header-border: #23272f;
+  --form-title: #ffd700;
+  --form-subtitle: #b0b8c1;
+
+  /* ===== BUTTON VARIABLES ===== */
+  --btn-primary-bg: #0077cc;
+  --btn-primary-hover-bg: #0a6ed1;
+  --btn-primary-text: #ffffff;
+  --btn-primary-hover-text: #ffffff;
+
+  --btn-secondary-bg: #666666;
+  --btn-secondary-hover-bg: #555555;
+  --btn-secondary-text: #ffffff;
+  --btn-secondary-hover-text: #ffffff;
+
+  --btn-danger-bg: #dc2626;
+  --btn-danger-hover-bg: #b91c1c;
+  --btn-danger-text: #ffffff;
+  --btn-danger-hover-text: #ffffff;
+
+  --btn-success-bg: #16a34a;
+  --btn-success-hover-bg: #15803d;
+  --btn-success-text: #ffffff;
+  --btn-success-hover-text: #ffffff;
+
+  /* ===== LOADING/SKELETON ===== */
+  /* Note: Skeleton variables stay same as light theme */
+  --skeleton-base-color: #a0c1e4;
+  --skeleton-highlight-color: #e6f2ff;
+
+  /* ===== SHADOWS (use var(--shadow-color) - theme-aware) ===== */
+  --shadow-sm: 0 1px 3px var(--shadow-color);
+  --shadow-md: 0 4px 12px var(--shadow-color);
+  --shadow-lg: 0 8px 24px var(--shadow-color);
+
+  /* ===== THEME SYSTEM SETTINGS ===== */
+  color-scheme: dark;
+}