@woodylab/payload 0.0.86 → 0.0.89

package/dist/getButtonClasses.js

@@ -0,0 +1,135 @@
+function getButtonClasses(config) {
+    const { buttonStyle = 'solid', buttonColor = 'primary', buttonSize = 'default', buttonRounded = 'default', iconPosition = 'left', textColor, // Aggiungiamo il colore del testo
+    additionalEffects = [], } = config;
+    const classes = [
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'font-medium',
+        'focus:outline-none',
+        'focus-visible:ring-2',
+        'focus-visible:ring-offset-2',
+    ];
+    // Stile base
+    switch (buttonStyle) {
+        case 'solid':
+            classes.push(`bg-${buttonColor}`);
+            // Usa textColor se specificato, altrimenti usa il colore predefinito basato sul buttonColor
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(buttonColor === 'light' ? 'text-dark' : 'text-white');
+            }
+            classes.push(`hover:bg-${buttonColor}/90`);
+            break;
+        case 'outline':
+            classes.push(`border`);
+            classes.push(`border-${buttonColor}`);
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+                // Mantieni lo stesso colore di testo per l'hover, a meno che non sia specificato diversamente
+                classes.push(`hover:text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+                classes.push(`hover:text-${buttonColor === 'light' ? 'dark' : 'white'}`);
+            }
+            classes.push(`hover:bg-${buttonColor}`);
+            break;
+        case 'ghost':
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+            }
+            classes.push(`hover:bg-${buttonColor}/10`);
+            break;
+        case 'link':
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+            }
+            classes.push('hover:underline');
+            break;
+    }
+    // Dimensione
+    switch (buttonSize) {
+        case 'small':
+            classes.push('text-xs px-2.5 py-1.5');
+            break;
+        case 'default':
+            classes.push('text-sm px-4 py-2');
+            break;
+        case 'medium':
+            classes.push('text-base px-5 py-2.5');
+            break;
+        case 'large':
+            classes.push('text-lg px-6 py-3');
+            break;
+        case 'xl':
+            classes.push('text-xl px-8 py-4');
+            break;
+    }
+    // Se è solo icona, aggiusta il padding per renderlo quadrato/rotondo
+    if (config.useIcon && iconPosition === 'only') {
+        classes.push('p-0');
+        switch (buttonSize) {
+            case 'small':
+                classes.push('w-7 h-7');
+                break;
+            case 'default':
+                classes.push('w-9 h-9');
+                break;
+            case 'medium':
+                classes.push('w-10 h-10');
+                break;
+            case 'large':
+                classes.push('w-12 h-12');
+                break;
+            case 'xl':
+                classes.push('w-14 h-14');
+                break;
+        }
+    }
+    // Arrotondamento
+    switch (buttonRounded) {
+        case 'none':
+            classes.push('rounded-none');
+            break;
+        case 'sm':
+            classes.push('rounded-sm');
+            break;
+        case 'default':
+            classes.push('rounded');
+            break;
+        case 'lg':
+            classes.push('rounded-lg');
+            break;
+        case 'full':
+            classes.push('rounded-full');
+            break;
+    }
+    // Effetti aggiuntivi
+    if (additionalEffects) {
+        if (additionalEffects.includes('shadow')) {
+            classes.push('shadow-md hover:shadow-lg');
+        }
+        if (additionalEffects.includes('transition')) {
+            classes.push('transition-all duration-200');
+        }
+        if (additionalEffects.includes('scale')) {
+            classes.push('transform hover:scale-105');
+        }
+    }
+    // Aggiungi la classe focus-ring per il colore appropriato
+    classes.push(`focus-visible:ring-${buttonColor}/50`);
+    return classes.join(' ');
+}
+export default getButtonClasses;

package/dist/getClassName.js

@@ -0,0 +1,28 @@
+function getClassName(config) {
+    // Mantieni tutte le altre classi Tailwind, ma ometti quelle di colore di sfondo
+    const classList = [];
+    // Gestione campi compositi
+    ['p', 'm'].forEach((field) => {
+        if (config[field]?.className) {
+            classList.push(config[field].className);
+        }
+    });
+    // Gestione campi diretti
+    ['fs', 'h', 'container'].forEach((field) => {
+        if (config[field]) {
+            classList.push(config[field]);
+        }
+    });
+    // Altre classi che non sono colori dinamici
+    if (config.bgi && config.bgi.url) {
+        classList.push('bg-no-repeat bg-cover');
+    }
+    if (config.boxShadow) {
+        classList.push(config.boxShadow);
+    }
+    if (config.borderRadius) {
+        classList.push(config.borderRadius);
+    }
+    return classList.join(' ');
+}
+export default getClassName;

package/dist/getInlineStyles.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare function getInlineStyles(config: any): React.CSSProperties;
+import type { CSSProperties } from 'react';
+declare function getInlineStyles(config: any): CSSProperties;
 export default getInlineStyles;

package/dist/getInlineStyles.js

@@ -0,0 +1,17 @@
+function getInlineStyles(config) {
+    const styles = {};
+    // Gestisci il background color con stile inline
+    if (config.bgc) {
+        styles.backgroundColor = config.bgc;
+    }
+    // Gestione background image
+    if (config.bgi && config.bgi.url) {
+        styles.backgroundImage = `url("${config.bgi.url}")`;
+        // Gestione focal point
+        if (typeof config.bgi.focalX === 'number' && typeof config.bgi.focalY === 'number') {
+            styles.backgroundPosition = `${config.bgi.focalX}% ${config.bgi.focalY}%`;
+        }
+    }
+    return styles;
+}
+export default getInlineStyles;