feat!: merge main updates into v1.x for Tailwind v4 release

Bring component/theme updates from main into v1.x, switch CI/package workflow to npm, and expose base color context utilities for v4-only usage.

Author: itsrafsanjani

.github/workflows/npm.yml

@@ -12,23 +12,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Enable Corepack
-        run: corepack enable
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: '22.x'
+          cache: 'npm'
 
-      - name: Cache node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: npm ci
 
       - name: Build
-        run: yarn install --immutable && yarn build
+        run: npm run build
 
       - name: Set up .npmrc file for authentication
         run: echo "registry=https://registry.npmjs.org/" >> .npmrc && echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc

README.md

@@ -14,27 +14,61 @@ yarn add @wedevs/tail-react
 
 ## Usage
 
-v4: On your app.css file, add the source file:
+### Tailwind CSS v4
+
+On your app.css file, add the source file:
 
 ```diff
 + @source './node_modules/@wedevs/tail-react/dist/index.{js,ts,jsx,tsx}';
 ```
 
-v3: On your `tailwind.config.js` file, update the content entry:
+### Customizing the theme color
 
-```diff
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-+    "node_modules/@wedevs/tail-react/dist/index.js"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-+    import('@tailwindcss/forms'),
-  ],
+By default, the component library uses `indigo` as the primary color. You can customize this using the `TailReactBaseColorProvider`:
+
+```jsx
+import { TailReactBaseColorProvider, Button } from '@wedevs/tail-react';
+
+function App() {
+  return (
+    <TailReactBaseColorProvider color="blue">
+      {/* All components inside will use blue as the primary color */}
+      <Button variant="primary">Primary Blue Button</Button>
+    </TailReactBaseColorProvider>
+  );
 }
 ```
+
+Available color options include all Tailwind CSS colors:
+
+- `slate`, `gray`, `zinc`, `neutral`, `stone`
+- `red`, `orange`, `amber`, `yellow`, `lime`
+- `green`, `emerald`, `teal`, `cyan`, `sky`
+- `blue`, `indigo` (default), `violet`, `purple`, `fuchsia`
+- `pink`, `rose`
+
+#### Important
+
+Tailwind v4 setup depends on the `@source` entry above so Tailwind can scan classes used by this package.
+
+## Development
+
+To get started with development:
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm run dev
+   ```
+4. Build the library:
+   ```bash
+   npm run build
+   ```
+5. Run Storybook:
+   ```bash
+   npm run storybook
+   ```