my-animated-components 1.2.8 → 1.3.0

package/LICENSE

@@ -0,0 +1,9 @@
+ISC License
+
+Copyright (c) 2025 Mukesh Kumar Singh
+
+Permission to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is provided to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.js

@@ -680,14 +680,21 @@ const Badge = ({ children, className = '', color = 'primary', size = 'md', motio
     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' }) => {
+const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = 'primary' }) => {
+    // Color classes for breadcrumb
+    const colorClasses = {
+        primary: 'text-blue-600 hover:text-blue-800',
+        secondary: 'text-gray-600 hover:text-gray-800',
+        success: 'text-green-600 hover:text-green-800',
+        danger: 'text-red-600 hover:text-red-800',
+        warning: 'text-yellow-600 hover:text-yellow-800',
+        info: 'text-blue-400 hover:text-blue-500',
+    };
     return (React.createElement(motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
         React.createElement("ol", { className: "inline-flex items-center space-x-1 md:space-x-3" }, items.map((item, index) => (React.createElement("li", { key: index, className: "inline-flex items-center" },
             index > 0 && (React.createElement("svg", { className: "w-6 h-6 text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }))),
-            React.createElement("a", { href: item.href, className: `ml-1 text-sm font-medium ${index === items.length - 1
-                    ? 'text-gray-500 hover:text-gray-700'
-                    : 'text-blue-600 hover:text-blue-800'}` }, item.label)))))));
+            React.createElement("a", { href: item.href, className: `ml-1 text-sm font-medium ${index === items.length - 1 ? 'text-gray-500 hover:text-gray-700' : colorClasses[color]}` }, item.label)))))));
 };
 
 const Card = ({ children, className = '', motionVariant = 'fadeIn' }) => {
@@ -768,7 +775,7 @@ motionVariant = 'fadeIn', // Default motion variant
         React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleChange, accept: accept, multiple: multiple, className: "hidden" })));
 };
 
-const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, }) => {
+const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, color = 'primary', textColor = 'black', }) => {
     const sizeClasses = {
         xs: 'px-2 py-1 text-xs',
         sm: 'px-3 py-2 text-sm',
@@ -776,8 +783,24 @@ const Input = ({ className = '', size = 'md', type = 'text', placeholder, value,
         lg: 'px-4 py-3 text-lg',
         xl: 'px-5 py-4 text-xl',
     };
+    const colorClasses = {
+        primary: 'border-blue-300 focus:ring-blue-500 focus:border-blue-500',
+        secondary: 'border-gray-300 focus:ring-gray-500 focus:border-gray-500',
+        success: 'border-green-300 focus:ring-green-500 focus:border-green-500',
+        danger: 'border-red-300 focus:ring-red-500 focus:border-red-500',
+        warning: 'border-yellow-300 focus:ring-yellow-500 focus:border-yellow-500',
+        info: 'border-blue-400 focus:ring-blue-500 focus:border-blue-500',
+    };
+    const textColorClasses = {
+        black: 'text-black',
+        gray: 'text-gray-700',
+        white: 'text-white',
+        blue: 'text-blue-600',
+        green: 'text-green-600',
+        red: 'text-red-600',
+    };
     return (React.createElement(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
-        React.createElement("input", { type: type, className: `w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange })));
+        React.createElement("input", { type: type, className: `w-full rounded-md ${sizeClasses[size]} ${colorClasses[color]} ${textColorClasses[textColor]} ${className} focus:outline-none focus:ring-2`, placeholder: placeholder, value: value, onChange: onChange })));
 };
 
 const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', }) => {
@@ -1079,17 +1102,40 @@ motionVariant = 'fadeIn', // Default motion variant
         React.createElement("input", { type: "range", min: min, max: max, value: maxValue, onChange: handleMaxChange, step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" })));
 };
 
-const Stepper = ({ className = '', steps, currentStep }) => {
-    return (React.createElement("div", { className: `flex items-center ${className}` }, steps.map((step, index) => (React.createElement(React.Fragment, { key: index },
-        React.createElement("div", { className: "flex items-center" },
-            React.createElement("div", { className: `flex items-center justify-center w-8 h-8 rounded-full ${index < currentStep
-                    ? 'bg-blue-600 text-white'
+const colorClasses = {
+    primary: { active: 'bg-blue-600 text-white', inactive: 'bg-blue-200 text-white', connector: 'bg-blue-200' },
+    secondary: { active: 'bg-gray-600 text-white', inactive: 'bg-gray-200 text-white', connector: 'bg-gray-200' },
+    success: { active: 'bg-green-600 text-white', inactive: 'bg-green-200 text-white', connector: 'bg-green-200' },
+    danger: { active: 'bg-red-600 text-white', inactive: 'bg-red-200 text-white', connector: 'bg-red-200' },
+    warning: { active: 'bg-yellow-500 text-black', inactive: 'bg-yellow-100 text-black', connector: 'bg-yellow-100' },
+    info: { active: 'bg-teal-500 text-white', inactive: 'bg-teal-200 text-white', connector: 'bg-teal-200' },
+};
+const Stepper = ({ className = '', steps, currentStep, color = {
+    active: 'primary',
+    inactive: 'primary',
+    connector: 'primary',
+}, size = 'md', orientation = 'horizontal', }) => {
+    const sizeClasses = {
+        xs: 'w-5 h-5 text-xs',
+        sm: 'w-6 h-6 text-sm',
+        md: 'w-8 h-8 text-base',
+        lg: 'w-10 h-10 text-lg',
+        xl: 'w-12 h-12 text-xl',
+    };
+    const isVertical = orientation === 'vertical';
+    const activeColorClass = colorClasses[color.active || 'primary'].active;
+    const inactiveColorClass = colorClasses[color.inactive || 'primary'].inactive;
+    const connectorColorClass = colorClasses[color.connector || 'primary'].connector;
+    return (React.createElement("div", { className: `flex ${isVertical ? 'flex-col' : 'items-center'} ${className}` }, steps.map((step, index) => (React.createElement(React.Fragment, { key: index },
+        React.createElement("div", { className: `flex ${isVertical ? 'flex-col items-center' : 'items-center'}` },
+            React.createElement("div", { className: `flex items-center justify-center rounded-full ${index < currentStep
+                    ? activeColorClass
                     : index === currentStep
-                        ? 'bg-blue-200 text-blue-600'
-                        : 'bg-gray-200 text-gray-600'}` }, index < currentStep ? (React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20" },
+                        ? `border-2 ${inactiveColorClass}`
+                        : inactiveColorClass} ${sizeClasses[size]}` }, index < currentStep ? (React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" },
                 React.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }))) : (index + 1)),
-            index < steps.length - 1 && (React.createElement("div", { className: `flex-1 h-1 mx-2 ${index < currentStep ? 'bg-blue-600' : 'bg-gray-200'}` }))),
-        index < steps.length - 1 && (React.createElement("div", { className: "hidden sm:block text-xs text-center text-gray-500 mt-2" }, step)))))));
+            index < steps.length - 1 && (React.createElement("div", { className: `flex-1 ${isVertical ? 'w-1 h-8' : 'h-1 mx-2'} ${index < currentStep ? activeColorClass : connectorColorClass}` }))),
+        React.createElement("div", { className: `${isVertical ? 'text-center mt-2 mb-4' : 'hidden sm:block text-xs text-center mx-2'}` }, step))))));
 };
 
 const Table = ({ children, className = '', motionVariant = 'fadeIn', // Default motion variant

package/package.json

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