feat: export css

Author: fran-ink

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

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!

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",

pnpm-lock.yaml

@@ -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}

src/components/Button/Button.tsx

@@ -1 +1,2 @@
+import "./tailwind.css";
 export * from "./components";

src/index.ts

@@ -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;

tailwind.config.mjs

@@ -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")],
+    },
+  },
 });