mehdi-simple-tailwind-button 0.1.2 → 0.1.5

package/dist/index.js

@@ -25,24 +25,12 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var buttonStyles = {
-  base: "px-6 py-3 rounded-lg font-medium transition-all",
-  variants: {
-    primary: "bg-blue-600 text-white hover:bg-blue-700 shadow-lg",
-    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300"
-  }
-};
 var SimpleButton = ({
   children,
   variant = "primary"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      className: `${buttonStyles.base} ${buttonStyles.variants[variant]}`,
-      children
-    }
-  );
+  const className = `btn ${variant === "primary" ? "btn-primary" : "btn-secondary"}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -2,24 +2,12 @@
 
 // src/index.tsx
 import { jsx } from "react/jsx-runtime";
-var buttonStyles = {
-  base: "px-6 py-3 rounded-lg font-medium transition-all",
-  variants: {
-    primary: "bg-blue-600 text-white hover:bg-blue-700 shadow-lg",
-    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300"
-  }
-};
 var SimpleButton = ({
   children,
   variant = "primary"
 }) => {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: `${buttonStyles.base} ${buttonStyles.variants[variant]}`,
-      children
-    }
-  );
+  const className = `btn ${variant === "primary" ? "btn-primary" : "btn-secondary"}`;
+  return /* @__PURE__ */ jsx("button", { className, children });
 };
 export {
   SimpleButton

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "mehdi-simple-tailwind-button",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Simple Tailwind button component",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
+"files": [
+    "dist",
+    "tailwind.preset.js"
   ],
   "exports": {
     ".": {

package/tailwind.preset.js

@@ -0,0 +1,36 @@
+// simple-tailwind-component/tailwind.preset.js
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  plugins: [
+    plugin(function({ addComponents }) {
+      const buttons = {
+        // کلاس پایه برای همه دکمه ها
+        '.btn': {
+          padding: '.75rem 1.5rem',      // معادل py-3 px-6
+          borderRadius: '.5rem',        // معادل rounded-lg
+          fontWeight: '500',              // معادل font-medium
+          transition: 'all .15s ease-in-out', // معادل transition-all
+        },
+        // استایل برای variant اصلی
+        '.btn-primary': {
+          backgroundColor: '#2563eb', // معادل bg-blue-600
+          color: '#ffffff',           // معادل text-white
+          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', // معادل shadow-lg
+          '&:hover': {
+            backgroundColor: '#1d4ed8', // معادل hover:bg-blue-700
+          },
+        },
+        // استایل برای variant ثانویه
+        '.btn-secondary': {
+          backgroundColor: '#e5e7eb', // معادل bg-gray-200
+          color: '#1f2937',           // معادل text-gray-800
+          '&:hover': {
+            backgroundColor: '#d1d5db', // معادل hover:bg-gray-300
+          },
+        },
+      };
+      addComponents(buttons);
+    })
+  ]
+};