my-animated-components 1.2.1 → 1.2.2

package/dist/index.js

@@ -1,36 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-function styleInject(css, ref) {
-  if ( ref === undefined ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n";
-styleInject(css_248z);
-
 const motionVariants = {
     null: {},
     fadeIn: {
@@ -675,22 +645,39 @@ const Avatar = ({ className = '', size = 'md', src, alt, initials }) => {
 
 const Badge = ({ children, className = '', color = 'primary', size = 'md', motionVariant = 'fadeIn', // Default motion variant
  }) => {
-    const colorClasses = {
-        primary: 'bg-blue-100 text-blue-800',
-        secondary: 'bg-gray-100 text-gray-800',
-        success: 'bg-green-100 text-green-800',
-        danger: 'bg-red-100 text-red-800',
-        warning: 'bg-yellow-100 text-yellow-800',
-        info: 'bg-indigo-100 text-indigo-800',
+    // Define the colors
+    const colorStyles = {
+        primary: '#E0F7FA', // bg-blue-100
+        secondary: '#F1F1F1', // bg-gray-100
+        success: '#E8F5E9', // bg-green-100
+        danger: '#FFEBEE', // bg-red-100
+        warning: '#FFFDE7', // bg-yellow-100
+        info: '#E8EAF6', // bg-indigo-100
     };
-    const sizeClasses = {
-        xs: 'px-2 py-0.5 text-xs',
-        sm: 'px-2.5 py-0.5 text-sm',
-        md: 'px-3 py-1 text-sm',
-        lg: 'px-3.5 py-1.5 text-base',
-        xl: 'px-4 py-2 text-lg',
+    const textColor = {
+        primary: '#00796B', // text-blue-800
+        secondary: '#757575', // text-gray-800
+        success: '#388E3C', // text-green-800
+        danger: '#C62828', // text-red-800
+        warning: '#FBC02D', // text-yellow-800
+        info: '#1976D2', // text-indigo-800
+    };
+    // Define the sizes
+    const sizeStyles = {
+        xs: { padding: '0.125rem 0.5rem', fontSize: '0.75rem' },
+        sm: { padding: '0.25rem 0.75rem', fontSize: '0.875rem' },
+        md: { padding: '0.375rem 1rem', fontSize: '1rem' },
+        lg: { padding: '0.5rem 1.25rem', fontSize: '1.125rem' },
+        xl: { padding: '0.625rem 1.5rem', fontSize: '1.25rem' },
+    };
+    // Generate custom styles dynamically
+    const customStyle = {
+        backgroundColor: colorStyles[color] || colorStyles.primary,
+        color: textColor[color] || textColor.primary,
+        padding: sizeStyles[size].padding,
+        fontSize: sizeStyles[size].fontSize,
     };
-    return (React.createElement(motion.span, { className: `inline-flex items-center font-medium rounded-full ${colorClasses[color]} ${sizeClasses[size]} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+    return (React.createElement(motion.span, { className: `inline-flex items-center font-medium rounded-full ${className}`, style: customStyle, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
 };
 
 const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn' }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}" // Update this based on your file structure
+    './src/**/*.{html,js,ts,tsx,jsx}',
   ],
   theme: {
     extend: {},