fix(components)!: properly export html components

packages/components/package.json

@@ -1,17 +1,13 @@
 {
 	"name": "@mini-strap/components",
 	"version": "0.0.1",
-  "module": "src/components.scss",
 	"type": "module",
 	"scripts": {
 		"ci:publish": "bun publish --production --frozen-lockfile"
 	},
 	"exports": {
-    ".": "./src/components.scss",
+		".": "./src/index.ts",
-    "./OffCanvas/": {
+		"./navbar/*": "./src/navbar/*"
-      "import": "./src/OffCanvas/",
-      "require": "./src/OffCanvas/"
-    }
 	},
 	"devDependencies": {
 		"@types/bun": "latest",

packages/components/src/index.ts

@@ -0,0 +1,7 @@
+import navarHtml from "./navbar/navbar.html";
+
+export const HTMLComponents = {
+	navbar: navarHtml,
+};
+
+export default {};

packages/components/src/navbar/navbar.html

@@ -0,0 +1 @@
+<h1>Hello World!</h1>

packages/components/src/navbar/navbar.scss

@@ -0,0 +1,42 @@
+nav {
+  width: 100%;
+}
+
+.navbar-desktop ul {
+  width: fit-content;
+  margin-left: auto;
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+}
+
+ul {
+  padding: 0;
+}
+
+li > a {
+  padding: 0.25rem 0.5rem;
+}
+
+a {
+  --boder-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  text-decoration: none;
+
+  transition:
+    background-color 200ms,
+    color 200ms;
+}
+
+a.active {
+  border: 1px solid var(--prj-accent-bg);
+}
+
+a:hover {
+  --border-color: var(--prj-accent-bg);
+  background-color: var(--prj-accent-bg);
+  color: var(--prj-accent-text);
+  border: 1px solid var(--border-color);
+}