✨ add first prototype

Author: ElianCodes

index.d.ts

@@ -0,0 +1,10 @@
+declare module '@eliancodes/brutal-ui' {
+  type ButtonProps = {
+    href: string;
+    target: '_blank' | '_self';
+    color: string;
+    string: string;
+  }
+
+  export function Button(props: ButtonProps): any;
+}

index.ts

@@ -0,0 +1 @@
+export { default as Button } from './src/components/Button.astro';

package-lock.json

@@ -2,14 +2,25 @@
   "name": "@eliancodes/brutal-ui",
   "version": "0.1.0",
   "description": "The brutalist UI components package, built for extendability and compatibility",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ElianCodes/brutal-ui.git"
   },
+  "type": "module",
+  "main": "index.ts",
+  "module": "index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": null
+    }
+  },
+  "types": "index.d.ts",
+  "files": [
+    "index.ts",
+    "index.d.ts",
+    "src"
+  ],
   "keywords": [
     "astro",
     "brutal",

package.json

@@ -0,0 +1,34 @@
+---
+interface Props {
+  href: string;
+  target: '_blank' | '_self';
+  color: string;
+  string: string;
+}
+
+const colors = await Astro.glob('../config/colors.json')
+
+const { href, target, color } = Astro.props;
+---
+<style>
+  a.btn {
+    filter: drop-shadow(5px 5px 0 rgb(0 0 0 / 1));
+  }
+  a.btn:hover {
+    filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 1));
+  }
+</style>
+
+<a
+  href={href}
+  target={target}
+  class:list={[
+    color
+      ? `hover:bg-${color}`
+      : `hover:bg-${colors[Math.floor(Math.random() * colors.length)]}`,
+    'btn bg-white sanchez inline-block py-2 px-4 border-2 border-black transition-all ease-in-out duration-150',
+  ]}
+>
+  test
+  <slot />
+</a>

src/components/Button.astro

@@ -0,0 +1,5 @@
+{
+  "colors": [
+    { "green": "green" }
+  ]
+}

src/config/colors.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strictest",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2022",
+    "outDir": "./dist",
+    "target": "ES2021",
+    "strictNullChecks": true
+  }
+}