From 51dd136355a5496963a4dfce22a5cdb905373950 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:24:35 -0500
Subject: [PATCH] feat: export css

---
 .prettierrc                      |  6 ++++++
 README.md                        | 24 ++++++++++++++++++++++++
 package.json                     | 16 ++++++++++++++--
 pnpm-lock.yaml                   |  3 +++
 src/components/Button/Button.tsx | 19 ++++++++++---------
 src/index.ts                     |  1 +
 tailwind.config.mjs              | 16 ++++++++++++++++
 tailwind.config.ts               | 12 ------------
 vite.config.ts                   | 13 +++++++++++++
 9 files changed, 87 insertions(+), 23 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 tailwind.config.mjs
 delete mode 100644 tailwind.config.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..f0eb61e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}
diff --git a/README.md b/README.md
index 0036f62..978c448 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,27 @@
 # ink-kit
 
 Ink Kit
+
+## Install
+
+```bash
+npm install @inkonchain/ink-kit
+```
+
+## Usage
+
+To use the components, you can import them directly:
+
+```tsx
+import { Button } from "@inkonchain/ink-kit";
+```
+
+To import the CSS, you can use the `style.css` export:
+
+```tsx
+import "@inkonchain/ink-kit/style.css";
+```
+
+## WIP Notice
+
+This is a work in progress, we are working on it!
diff --git a/package.json b/package.json
index 90d07aa..2a079e3 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,15 @@
   "files": [
     "/dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./tailwind.config.mjs": "./tailwind.config.mjs"
+  },
   "scripts": {
     "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
@@ -17,7 +26,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,md,mdx,css,scss}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,md,mdx,css,scss}\"",
     "test": "playwright test",
-    "fix:all": "pnpm run lint:fix && pnpm run format"
+    "fix:all": "pnpm run lint:fix && pnpm run format",
+    "prepublish": "build"
   },
   "keywords": [],
   "author": "",
@@ -52,7 +62,9 @@
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwindcss": "^3"
   },
   "dependencies": {
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 36f40c2..9ff4f8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      react-dom:
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 63d9ef9..baa37f4 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -24,19 +24,20 @@ export const Button: React.FC<ButtonProps> = ({
     <button
       type={type}
       className={classNames(
-        "rounded font-medium transition-colors",
+        "ink-rounded ink-font-medium ink-transition-colors",
         {
-          primary: "bg-blue-600 text-white hover:bg-blue-700",
-          secondary: "bg-gray-600 text-white hover:bg-gray-700",
-          outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50",
+          primary: "ink-bg-primary ink-text-white hover:ink-bg-primary/80",
+          secondary: "ink-bg-gray-600 ink-text-white hover:ink-bg-gray-700",
+          outline:
+            "ink-border-2 ink-border-blue-600 ink-text-blue-600 hover:ink-bg-blue-50",
         }[variant],
         {
-          small: "px-3 py-1 text-sm",
-          medium: "px-4 py-2",
-          large: "px-6 py-3 text-lg",
+          small: "ink-px-3 ink-py-1 ink-text-sm",
+          medium: "ink-px-4 ink-py-2",
+          large: "ink-px-6 ink-py-3 ink-text-lg",
         }[size],
-        disabled ? "opacity-50 cursor-not-allowed" : "",
-        className,
+        disabled ? "ink-opacity-50 ink-cursor-not-allowed" : "",
+        className
       )}
       onClick={onClick}
       disabled={disabled}
diff --git a/src/index.ts b/src/index.ts
index 40b494c..b3083f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
+import "./tailwind.css";
 export * from "./components";
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
new file mode 100644
index 0000000..f23d65f
--- /dev/null
+++ b/tailwind.config.mjs
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+const config = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: ["class", '[data-mode="dark"]'],
+  prefix: "ink-",
+  theme: {
+    extend: {
+      colors: {
+        primary: "#7132F5",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 7fef676..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: ["class", '[data-mode="dark"]'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-
-export default config;
diff --git a/vite.config.ts b/vite.config.ts
index e10c1e2..280c3cc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
+import tailwindcss from "tailwindcss";
 import { peerDependencies } from "./package.json";
 
 export default defineConfig({
@@ -12,9 +13,21 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          tailwindcss: "tailwindcss",
+        },
+      },
     },
     sourcemap: true,
     emptyOutDir: true,
   },
   plugins: [dts()],
+  css: {
+    postcss: {
+      plugins: [tailwindcss("./tailwind.config.mjs")],
+    },
+  },
 });