@mysetup/classnames 1.0.0

package/README.md

@@ -0,0 +1,29 @@
+# @mysetup/classnames
+
+`classNames` is a utility function that merges classes conditionally and removes Tailwind CSS style conflicts.
+
+Based on [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge).
+
+## Usage
+
+By passing the `className` prop as the last argument to the `classNames` function, it allows us to override styles in another component.
+
+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.
+
+```tsx
+import { classNames } from "@mysetup/classnames";
+
+interface BoxProps {
+    className?: string;
+}
+
+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" />
+};
+
+export const SmallBox = function SmallBox() {
+    return <Box className="h-5 w-5" />; // <div class="h-5 w-5 bg-black" />
+};
+```

package/dist/classnames.d.ts

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

package/dist/classnames.d.ts.map

@@ -0,0 +1 @@
+{"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/classnames.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classNames = void 0;
+var tailwind_merge_1 = require("tailwind-merge");
+var clsx_1 = require("clsx");
+var classNames = function () {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(classes));
+};
+exports.classNames = classNames;

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./classnames"), exports);

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@mysetup/classnames",
+    "version": "1.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"
+    },
+    "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": "^2.5.4"
+    },
+    "devDependencies": {
+        "@mysetup/eslint-config": "latest",
+        "@mysetup/jest-config": "latest",
+        "@mysetup/prettier-config": "latest",
+        "@mysetup/tsconfig": "latest",
+        "@types/jest": "^29.5.14",
+        "eslint": "8.57.0",
+        "jest": "^29.7.0",
+        "typescript": "^5.6.3"
+    },
+    "prettier": "@mysetup/prettier-config",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "packageManager": "pnpm@9.9.0"
+}