sv5ui 0.0.1

package/dist/theme.css

@@ -0,0 +1,410 @@
+/**
+ * SV5UI Theme - Material Design 3 Inspired
+ *
+ * Import this in your app:
+ * @import 'sv5ui/theme.css';
+ *
+ * To customize colors, override CSS variables in your own CSS file.
+ */
+
+@import 'tailwindcss';
+
+/* ============================================
+ * DARK MODE CONFIGURATION
+ * Supports both class="dark" and prefers-color-scheme
+ * ============================================ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ============================================
+ * LIGHT THEME (Default)
+ * ============================================ */
+:root {
+  /* ========== PRIMARY ========== */
+  --color-primary: oklch(0.546 0.245 262.88);
+  --color-on-primary: oklch(1 0 0);
+  --color-primary-container: oklch(0.932 0.032 255.59);
+  --color-on-primary-container: oklch(0.283 0.091 267.94);
+
+  /* ========== SECONDARY ========== */
+  --color-secondary: oklch(0.446 0.043 257.28);
+  --color-on-secondary: oklch(1 0 0);
+  --color-secondary-container: oklch(0.929 0.013 255.51);
+  --color-on-secondary-container: oklch(0.208 0.042 265.75);
+
+  /* ========== TERTIARY ========== */
+  --color-tertiary: oklch(0.541 0.281 293.54);
+  --color-on-tertiary: oklch(1 0 0);
+  --color-tertiary-container: oklch(0.943 0.029 294.59);
+  --color-on-tertiary-container: oklch(0.283 0.141 291.09);
+
+  /* ========== ERROR ========== */
+  --color-error: oklch(0.577 0.245 27.33);
+  --color-on-error: oklch(1 0 0);
+  --color-error-container: oklch(0.936 0.032 17.72);
+  --color-on-error-container: oklch(0.258 0.092 26.04);
+
+  /* ========== SUCCESS ========== */
+  --color-success: oklch(0.627 0.194 149.21);
+  --color-on-success: oklch(1 0 0);
+  --color-success-container: oklch(0.962 0.044 156.74);
+  --color-on-success-container: oklch(0.266 0.065 152.93);
+
+  /* ========== WARNING ========== */
+  --color-warning: oklch(0.666 0.179 58.32);
+  --color-on-warning: oklch(0.279 0.077 45.64);
+  --color-warning-container: oklch(0.962 0.059 95.26);
+  --color-on-warning-container: oklch(0.279 0.077 45.64);
+
+  /* ========== INFO ========== */
+  --color-info: oklch(0.598 0.158 241.97);
+  --color-on-info: oklch(1 0 0);
+  --color-info-container: oklch(0.918 0.044 240.11);
+  --color-on-info-container: oklch(0.257 0.09 243.43);
+
+  /* ========== SURFACE ========== */
+  --color-surface: oklch(0.985 0.002 247.84);
+  --color-on-surface: oklch(0.145 0.014 247.09);
+  --color-on-surface-variant: oklch(0.446 0.043 257.28);
+
+  /* ========== SURFACE CONTAINERS (M3) ========== */
+  --color-surface-container-lowest: oklch(1 0 0);
+  --color-surface-container-low: oklch(0.976 0.004 247.84);
+  --color-surface-container: oklch(0.968 0.007 247.9);
+  --color-surface-container-high: oklch(0.956 0.008 247.86);
+  --color-surface-container-highest: oklch(0.929 0.013 255.51);
+
+  /* ========== SURFACE DIM & BRIGHT ========== */
+  --color-surface-dim: oklch(0.869 0.022 252.89);
+  --color-surface-bright: oklch(0.985 0.002 247.84);
+
+  /* ========== OUTLINE ========== */
+  --color-outline: oklch(0.554 0.046 257.42);
+  --color-outline-variant: oklch(0.789 0.029 256.79);
+
+  /* ========== INVERSE ========== */
+  --color-inverse-surface: oklch(0.208 0.042 265.75);
+  --color-inverse-on-surface: oklch(0.929 0.013 255.51);
+  --color-inverse-primary: oklch(0.707 0.165 254.62);
+}
+
+/* ============================================
+ * DARK THEME
+ * ============================================ */
+.dark {
+  /* ========== PRIMARY ========== */
+  --color-primary: oklch(0.707 0.165 254.62);
+  --color-on-primary: oklch(0.379 0.146 265.52);
+  --color-primary-container: oklch(0.424 0.199 265.64);
+  --color-on-primary-container: oklch(0.882 0.059 254.13);
+
+  /* ========== SECONDARY ========== */
+  --color-secondary: oklch(0.704 0.04 256.79);
+  --color-on-secondary: oklch(0.279 0.041 260.03);
+  --color-secondary-container: oklch(0.372 0.044 257.29);
+  --color-on-secondary-container: oklch(0.869 0.022 252.89);
+
+  /* ========== TERTIARY ========== */
+  --color-tertiary: oklch(0.702 0.183 293.54);
+  --color-on-tertiary: oklch(0.368 0.174 292.52);
+  --color-tertiary-container: oklch(0.432 0.232 292.76);
+  --color-on-tertiary-container: oklch(0.894 0.057 293.28);
+
+  /* ========== ERROR ========== */
+  --color-error: oklch(0.704 0.191 22.22);
+  --color-on-error: oklch(0.396 0.141 25.72);
+  --color-error-container: oklch(0.444 0.177 26.9);
+  --color-on-error-container: oklch(0.885 0.062 18.33);
+
+  /* ========== SUCCESS ========== */
+  --color-success: oklch(0.792 0.209 151.71);
+  --color-on-success: oklch(0.393 0.095 152.54);
+  --color-success-container: oklch(0.448 0.119 151.33);
+  --color-on-success-container: oklch(0.871 0.15 154.45);
+
+  /* ========== WARNING ========== */
+  --color-warning: oklch(0.828 0.189 84.43);
+  --color-on-warning: oklch(0.414 0.112 45.9);
+  --color-warning-container: oklch(0.473 0.137 46.2);
+  --color-on-warning-container: oklch(0.879 0.169 91.61);
+
+  /* ========== INFO ========== */
+  --color-info: oklch(0.697 0.127 241.97);
+  --color-on-info: oklch(0.32 0.103 243.43);
+  --color-info-container: oklch(0.398 0.125 242.76);
+  --color-on-info-container: oklch(0.869 0.066 240.11);
+
+  /* ========== SURFACE ========== */
+  --color-surface: oklch(0.145 0.014 247.09);
+  --color-on-surface: oklch(0.929 0.013 255.51);
+  --color-on-surface-variant: oklch(0.704 0.04 256.79);
+
+  /* ========== SURFACE CONTAINERS (M3) ========== */
+  --color-surface-container-lowest: oklch(0.105 0.014 249.09);
+  --color-surface-container-low: oklch(0.168 0.018 251.09);
+  --color-surface-container: oklch(0.208 0.024 253.09);
+  --color-surface-container-high: oklch(0.248 0.029 255.09);
+  --color-surface-container-highest: oklch(0.279 0.033 256.09);
+
+  /* ========== SURFACE DIM & BRIGHT ========== */
+  --color-surface-dim: oklch(0.145 0.014 247.09);
+  --color-surface-bright: oklch(0.372 0.044 257.29);
+
+  /* ========== OUTLINE ========== */
+  --color-outline: oklch(0.554 0.046 257.42);
+  --color-outline-variant: oklch(0.372 0.044 257.29);
+
+  /* ========== INVERSE ========== */
+  --color-inverse-surface: oklch(0.929 0.013 255.51);
+  --color-inverse-on-surface: oklch(0.279 0.041 260.03);
+  --color-inverse-primary: oklch(0.546 0.245 262.88);
+}
+
+/* ============================================
+ * REGISTER WITH TAILWIND
+ * ============================================ */
+@theme inline {
+  /* Primary */
+  --color-primary: var(--color-primary);
+  --color-on-primary: var(--color-on-primary);
+  --color-primary-container: var(--color-primary-container);
+  --color-on-primary-container: var(--color-on-primary-container);
+
+  /* Secondary */
+  --color-secondary: var(--color-secondary);
+  --color-on-secondary: var(--color-on-secondary);
+  --color-secondary-container: var(--color-secondary-container);
+  --color-on-secondary-container: var(--color-on-secondary-container);
+
+  /* Tertiary */
+  --color-tertiary: var(--color-tertiary);
+  --color-on-tertiary: var(--color-on-tertiary);
+  --color-tertiary-container: var(--color-tertiary-container);
+  --color-on-tertiary-container: var(--color-on-tertiary-container);
+
+  /* Error */
+  --color-error: var(--color-error);
+  --color-on-error: var(--color-on-error);
+  --color-error-container: var(--color-error-container);
+  --color-on-error-container: var(--color-on-error-container);
+
+  /* Success */
+  --color-success: var(--color-success);
+  --color-on-success: var(--color-on-success);
+  --color-success-container: var(--color-success-container);
+  --color-on-success-container: var(--color-on-success-container);
+
+  /* Warning */
+  --color-warning: var(--color-warning);
+  --color-on-warning: var(--color-on-warning);
+  --color-warning-container: var(--color-warning-container);
+  --color-on-warning-container: var(--color-on-warning-container);
+
+  /* Info */
+  --color-info: var(--color-info);
+  --color-on-info: var(--color-on-info);
+  --color-info-container: var(--color-info-container);
+  --color-on-info-container: var(--color-on-info-container);
+
+  /* Surface */
+  --color-surface: var(--color-surface);
+  --color-on-surface: var(--color-on-surface);
+  --color-on-surface-variant: var(--color-on-surface-variant);
+
+  /* Surface Containers */
+  --color-surface-container-lowest: var(--color-surface-container-lowest);
+  --color-surface-container-low: var(--color-surface-container-low);
+  --color-surface-container: var(--color-surface-container);
+  --color-surface-container-high: var(--color-surface-container-high);
+  --color-surface-container-highest: var(--color-surface-container-highest);
+
+  /* Surface Dim & Bright */
+  --color-surface-dim: var(--color-surface-dim);
+  --color-surface-bright: var(--color-surface-bright);
+
+  /* Outline */
+  --color-outline: var(--color-outline);
+  --color-outline-variant: var(--color-outline-variant);
+
+  /* Inverse */
+  --color-inverse-surface: var(--color-inverse-surface);
+  --color-inverse-on-surface: var(--color-inverse-on-surface);
+  --color-inverse-primary: var(--color-inverse-primary);
+
+  /* ========== RADIUS ========== */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+/* ============================================
+ * BASE STYLES
+ * ============================================ */
+@layer base {
+  html {
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-surface text-on-surface;
+  }
+}
+
+/* ============================================
+ * PROGRESS ANIMATIONS
+ * ============================================ */
+@keyframes carousel {
+  0%,
+  100% {
+    width: 50%;
+  }
+
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes carousel-rtl {
+  0%,
+  100% {
+    width: 50%;
+  }
+
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(-200%);
+  }
+}
+
+@keyframes carousel-vertical {
+  0%,
+  100% {
+    height: 50%;
+  }
+
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(200%);
+  }
+}
+
+@keyframes carousel-inverse {
+  0%,
+  100% {
+    width: 50%;
+  }
+
+  0% {
+    transform: translateX(200%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes carousel-inverse-rtl {
+  0%,
+  100% {
+    width: 50%;
+  }
+
+  0% {
+    transform: translateX(-200%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes carousel-inverse-vertical {
+  0%,
+  100% {
+    height: 50%;
+  }
+
+  0% {
+    transform: translateY(200%);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes swing {
+  0%,
+  100% {
+    width: 50%;
+  }
+
+  0%,
+  100% {
+    transform: translateX(-25%);
+  }
+
+  50% {
+    transform: translateX(125%);
+  }
+}
+
+@keyframes swing-vertical {
+  0%,
+  100% {
+    height: 50%;
+  }
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+  }
+
+  50% {
+    transform: translateY(125%);
+  }
+}
+
+@keyframes elastic {
+  0%,
+  100% {
+    width: 50%;
+    margin-left: 25%;
+  }
+
+  50% {
+    width: 90%;
+    margin-left: 5%;
+  }
+}
+
+@keyframes elastic-vertical {
+  0%,
+  100% {
+    height: 50%;
+    margin-top: 25%;
+  }
+
+  50% {
+    height: 90%;
+    margin-top: 5%;
+  }
+}

package/package.json

@@ -0,0 +1,104 @@
+{
+	"name": "sv5ui",
+	"version": "0.0.1",
+	"description": "A modern Svelte 5 UI component library with Tailwind CSS",
+	"author": "ndlabdev",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ndlabdev/sv5ui.git"
+	},
+	"homepage": "https://github.com/ndlabdev/sv5ui#readme",
+	"bugs": {
+		"url": "https://github.com/ndlabdev/sv5ui/issues"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./theme.css": {
+			"import": "./dist/theme.css",
+			"default": "./dist/theme.css"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.17",
+		"@types/node": "^22",
+		"@vitest/browser-playwright": "^4.0.15",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.1",
+		"globals": "^16.5.0",
+		"mode-watcher": "^1.1.0",
+		"playwright": "^1.57.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.15",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.48.1",
+		"vite": "^7.2.6",
+		"vitest": "^4.0.15",
+		"vitest-browser-svelte": "^2.0.1"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"svelte-components",
+		"ui",
+		"ui-library",
+		"components",
+		"component-library",
+		"tailwindcss",
+		"tailwind",
+		"design-system",
+		"typescript",
+		"dark-mode",
+		"accessible"
+	],
+	"dependencies": {
+		"@iconify/svelte": "^5.2.1",
+		"bits-ui": "^2.15.4",
+		"tailwind-merge": "^3.4.0",
+		"tailwind-variants": "^3.2.2"
+	}
+}