@mysetup/classnames 2.0.0 → 2.0.4

package/README.md

@@ -1,29 +1,52 @@
 # @mysetup/classnames
 
-`classNames` is a utility function that merges classes conditionally and removes Tailwind CSS style conflicts.
+Merge conditional class names and resolve Tailwind conflicts with one helper.
 
-Based on [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge).
+## Installation
 
-## Usage
+```bash
+pnpm add @mysetup/classnames
+```
+
+## Supported libraries and runtimes
 
-By passing the `className` prop as the last argument to the `classNames` function, it allows us to override styles in another component.
+| Supported | Notes                  |
+| --------- | ---------------------- |
+| Vite      | Full support           |
+| Next.js   | Full support           |
+| Node.js   | Full support           |
+| React     | Works in any React app |
 
-Typically with Tailwind CSS the only way to override `w-10` with `w-5` is to remove `w-10`. `classNames` takes care of those conflicts automatically.
+## Usage
 
 ```tsx
 import { classNames } from "@mysetup/classnames";
 
-interface BoxProps {
+export function Button({
+    active,
+    className,
+}: {
+    active?: boolean;
     className?: string;
+}) {
+    return (
+        <button
+            className={classNames(
+                "rounded-md px-4 py-2 text-sm font-medium",
+                active
+                    ? "bg-slate-900 text-white"
+                    : "bg-slate-100 text-slate-900",
+                className,
+            )}
+        >
+            Save
+        </button>
+    );
 }
+```
 
-export const Box = function Box({ className }: BoxProps) {
-    const classes = classNames("h-10 w-10 bg-black", className);
-
-    return <div className={classes} />; // <div class="h-10 w-10 bg-black" />
-};
+## API
 
-export const SmallBox = function SmallBox() {
-    return <Box className="h-5 w-5" />; // <div class="h-5 w-5 bg-black" />
-};
+```ts
+classNames(...classes: ClassValue[]): string
 ```

package/dist/classnames.d.ts

@@ -1,4 +1,3 @@
 import type { ClassValue } from "clsx";
 export type { ClassValue };
 export declare const classNames: (...classes: ClassValue[]) => string;
-//# sourceMappingURL=classnames.d.ts.map

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from "./classnames";
-//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,48 +1,58 @@
 {
-    "name": "@mysetup/classnames",
-    "version": "2.0.0",
-    "license": "MIT",
-    "main": "dist/index.js",
-    "files": [
-        "dist"
-    ],
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.js",
-            "require": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
+  "name": "@mysetup/classnames",
+  "version": "2.0.4",
+  "description": "Utility for merging clsx and tailwind-merge class names.",
+  "author": "krishnaraj <krishnaraj.webdev@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "classnames",
+    "clsx",
+    "tailwind-merge",
+    "tailwindcss",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
-    "scripts": {
-        "build": "rm -rf ./dist && tsc -p tsconfig.build.json",
-        "lint": "eslint .",
-        "typecheck": "tsc --noEmit",
-        "test": "jest",
-        "test:coverage": "jest --coverage",
-        "format": "prettier --write \"**/*.{ts,tsx,md,js}\"",
-        "checks": "pnpm typecheck && pnpm lint && pnpm test",
-        "clean": "rm -rf node_modules .swc dist pnpm-lock.yaml && echo \"✅  Successfully removed \""
-    },
-    "dependencies": {
-        "clsx": "^2.1.1",
-        "tailwind-merge": "^3.0.1"
-    },
-    "devDependencies": {
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.36.0",
-        "@mysetup/eslint-config": "latest",
-        "@mysetup/jest-config": "latest",
-        "@mysetup/prettier-config": "latest",
-        "@mysetup/tsconfig": "latest",
-        "@types/jest": "^29.5.14",
-        "eslint": "9.32.0",
-        "jest": "^29.7.0",
-        "typescript": "5.5.4"
-    },
-    "prettier": "@mysetup/prettier-config",
-    "engines": {
-        "node": ">=20.15.1"
-    },
-    "packageManager": "pnpm@9.9.0"
-}
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "typescript": "5.5.4",
+    "@mysetup/tsconfig": "^2.0.4",
+    "@mysetup/jest-config": "^2.0.4",
+    "@mysetup/eslint-config": "^2.0.5",
+    "@mysetup/prettier-config": "^2.0.4"
+  },
+  "prettier": "@mysetup/prettier-config",
+  "engines": {
+    "node": ">=20.15.1"
+  },
+  "scripts": {
+    "build": "node ../scripts/package-fs.cjs remove dist && tsc -p tsconfig.build.json",
+    "lint": "node ../scripts/run-eslint.cjs .",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "format": "prettier --write \"**/*.{ts,tsx,md,js}\"",
+    "checks": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
+    "clean": "node ../scripts/package-fs.cjs remove node_modules .swc dist pnpm-lock.yaml && echo \"Cleaned\""
+  }
+}

package/dist/classnames.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"classnames.d.ts","sourceRoot":"","sources":["../classnames.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,UAAU,eAAgB,UAAU,EAAE,WAA2B,CAAC"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}