fix(components)!: properly export html components

packages/components/package.json

@@ -1,26 +1,22 @@
 {
-  "name": "@mini-strap/components",
+	"name": "@mini-strap/components",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "module": "src/components.scss",
+	"type": "module",
-  "type": "module",
+	"scripts": {
-  "scripts": {
+		"ci:publish": "bun publish --production --frozen-lockfile"
-    "ci:publish": "bun publish --production --frozen-lockfile"
+	},
-  },
+	"exports": {
-  "exports": {
+		".": "./src/index.ts",
-    ".": "./src/components.scss",
+		"./navbar/*": "./src/navbar/*"
-    "./OffCanvas/": {
+	},
-      "import": "./src/OffCanvas/",
+	"devDependencies": {
-      "require": "./src/OffCanvas/"
+		"@types/bun": "latest",
-    }
+		"bun-plugin-dts": "^0.2.3",
-  },
+		"bun-style-loader": "^0.4.0",
-  "devDependencies": {
+		"sass": "^1.79.2",
-    "@types/bun": "latest",
+		"sass-embedded": "^1.79.1"
-    "bun-plugin-dts": "^0.2.3",
+	},
-    "bun-style-loader": "^0.4.0",
+	"peerDependencies": {
-    "sass": "^1.79.2",
+		"typescript": "^5.0.0"
-    "sass-embedded": "^1.79.1"
+	}
-  },
-  "peerDependencies": {
-    "typescript": "^5.0.0"
-  }
 }

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);
+}