admin-panel-ui-components 0.1.3 → 0.1.4

package/dist/Button.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./index.css";
 interface ButtonProps {
     children: React.ReactNode;
     variant?: "primary" | "secondary";

package/dist/Button.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "./index.css";
+import { twMerge } from "tailwind-merge";
 var Button = function (_a) {
     var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, onClick = _a.onClick, className = _a.className;
-    var variants = {
+    var baseClasses = "text-base font-semibold rounded-lg transition px-6 py-3";
+    var variantClasses = {
         primary: "bg-blue-600 text-white hover:bg-blue-700",
         secondary: "bg-gray-600 text-white hover:bg-gray-700",
     };
-    return (_jsx("button", { className: "text-base font-semibold rounded-lg transition px-6 py-3 ".concat(variants[variant], " ").concat(className), onClick: onClick, children: children }));
+    var mergedClasses = twMerge(baseClasses, variantClasses[variant], className);
+    return (_jsx("button", { className: mergedClasses, onClick: onClick, children: children }));
 };
 export default Button;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-panel-ui-components",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,5 +20,8 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "tailwind-merge": "^3.4.0"
   }
 }

package/src/Button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./index.css";
+import { twMerge } from "tailwind-merge";
 
 interface ButtonProps {
   children: React.ReactNode;
@@ -9,13 +9,17 @@ interface ButtonProps {
 }
 
 const Button: React.FC<ButtonProps> = ({ children, variant = "primary", onClick, className }) => {
-  const variants = {
+  const baseClasses = "text-base font-semibold rounded-lg transition px-6 py-3";
+
+  const variantClasses = {
     primary: "bg-blue-600 text-white hover:bg-blue-700",
     secondary: "bg-gray-600 text-white hover:bg-gray-700",
   };
 
+  const mergedClasses = twMerge(baseClasses, variantClasses[variant], className);
+
   return (
-    <button className={`text-base font-semibold rounded-lg transition px-6 py-3 ${variants[variant]} ${className}`} onClick={onClick}>
+    <button className={mergedClasses} onClick={onClick}>
       {children}
     </button>
   );