basecoat-css 0.2.1 → 0.2.2

package/README.md

@@ -8,42 +8,51 @@ Your project must have [Tailwind CSS](https://tailwindcss.com/docs/installation)
 
 ## Installation
 
-You can install `basecoat-css` using your preferred package manager:
+Install with any package manager:
 
 ```bash
-# npm
-npm install basecoat-css
+npm install basecoat-css # or pnpm add / yarn add / bun add
+```
 
-# yarn
-yarn add basecoat-css
+## Usage
 
-# pnpm
-pnpm add basecoat-css
+Add it just after Tailwind in your stylesheet:
 
-# bun
-bun add basecoat-css
+```css
+@import "tailwindcss";
+@import "basecoat-css";
 ```
 
-Alternatively, you can download the `basecoat.css` file directly from the [GitHub repository](https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css) (or the `dist/basecoat.css` file from this package after installation) and include it in your project.
+That's it, you can use any Basecoat class (`btn`, `card`, `input`, etc) in your markup.
 
-## Usage
+### (Optional) JavaScript files
 
-After installation, import `basecoat-css` into your main CSS file. Make sure to import it **after** Tailwind CSS and **before** any custom theme overrides.
+Some interactive components (Dropdown Menu, Popover, Select, Sidebar, Tabs, Toast) need some JavaScript.
 
-```css
-/* Your main CSS file (e.g., styles.css) */
+With a build tool (ESM):
+
+```js
+import 'basecoat-css/all';
+```
+
+Or cherry-pick the components you need:
 
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+```js
+import 'basecoat-css/tabs';
+import 'basecoat-css/popover';
+```
 
-@import "basecoat-css"; /* Or the path to basecoat.css if manually added */
+Without a build tool, copy the files from `node_modules`:
 
-/* Your custom styles or theme overrides (optional) */
-/* @import "your-theme.css"; */
+```bash
+npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat
 ```
 
-Once imported, you can start using Basecoat's component classes in your HTML.
+Then reference what you need, e.g.
+
+```html
+<script src="/js/basecoat/tabs.min.js" defer></script>
+```
 
 ## Documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",