@xscriptor/xcomponents 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/{chunk-U27ZVCP7.mjs → chunk-2H7TVDE7.mjs} +14 -2
- package/dist/chunk-2H7TVDE7.mjs.map +7 -0
- package/dist/{chunk-5G4P2E76.mjs → chunk-34NJCJUI.mjs} +11 -2
- package/dist/chunk-34NJCJUI.mjs.map +7 -0
- package/dist/chunk-FZRTAML3.mjs +1 -1
- package/dist/chunk-FZRTAML3.mjs.map +7 -1
- package/dist/{chunk-2OAXRRVQ.mjs → chunk-MYFPSHSQ.mjs} +32 -3
- package/dist/chunk-MYFPSHSQ.mjs.map +7 -0
- package/dist/{chunk-NY22GB3E.mjs → chunk-TG3B4GAW.mjs} +26 -2
- package/dist/chunk-TG3B4GAW.mjs.map +7 -0
- package/dist/{chunk-QCMWPIG7.mjs → chunk-TKT37LIX.mjs} +39 -3
- package/dist/chunk-TKT37LIX.mjs.map +7 -0
- package/dist/{chunk-42XPBYTL.mjs → chunk-UROP4J6G.mjs} +29 -4
- package/dist/chunk-UROP4J6G.mjs.map +7 -0
- package/dist/components/content/index.css +23 -23
- package/dist/components/content/index.css.map +7 -1
- package/dist/components/content/index.d.ts +2 -17
- package/dist/components/content/index.js +11 -6
- package/dist/components/content/index.js.map +7 -1
- package/dist/components/content/index.mjs +2 -2
- package/dist/components/content/index.mjs.map +7 -1
- package/dist/components/content/xinteractivephrase/XInteractivePhrase.d.ts +13 -0
- package/dist/components/content/xinteractivephrase/index.d.ts +3 -0
- package/dist/components/forms/index.css +54 -54
- package/dist/components/forms/index.css.map +7 -1
- package/dist/components/forms/index.d.ts +4 -68
- package/dist/components/forms/index.js +39 -8
- package/dist/components/forms/index.js.map +7 -1
- package/dist/components/forms/index.mjs +2 -2
- package/dist/components/forms/index.mjs.map +7 -1
- package/dist/components/forms/xcontactform/XContactForm.d.ts +42 -0
- package/dist/components/forms/xcontactform/index.d.ts +3 -0
- package/dist/components/forms/xnewsletter/XNewsletter.d.ts +21 -0
- package/dist/components/forms/xnewsletter/index.d.ts +3 -0
- package/dist/components/gallery/index.css +58 -58
- package/dist/components/gallery/index.css.map +7 -1
- package/dist/components/gallery/index.d.ts +4 -29
- package/dist/components/gallery/index.js +32 -8
- package/dist/components/gallery/index.js.map +7 -1
- package/dist/components/gallery/index.mjs +2 -2
- package/dist/components/gallery/index.mjs.map +7 -1
- package/dist/components/gallery/xmicrogallerytext/XMicroGalleryText.d.ts +15 -0
- package/dist/components/gallery/xmicrogallerytext/index.d.ts +3 -0
- package/dist/components/gallery/xstaticgallery/XStaticGallery.d.ts +10 -0
- package/dist/components/gallery/xstaticgallery/index.d.ts +3 -0
- package/dist/components/index.css +215 -215
- package/dist/components/index.css.map +7 -1
- package/dist/components/index.d.ts +6 -8
- package/dist/components/index.js +146 -31
- package/dist/components/index.js.map +7 -1
- package/dist/components/index.mjs +12 -12
- package/dist/components/index.mjs.map +7 -1
- package/dist/components/layout/index.css +28 -28
- package/dist/components/layout/index.css.map +7 -1
- package/dist/components/layout/index.d.ts +6 -55
- package/dist/components/layout/index.js +29 -10
- package/dist/components/layout/index.js.map +7 -1
- package/dist/components/layout/index.mjs +2 -2
- package/dist/components/layout/index.mjs.map +7 -1
- package/dist/components/layout/xfooter/XFooter.d.ts +24 -0
- package/dist/components/layout/xfooter/index.d.ts +3 -0
- package/dist/components/layout/xseparator/XSeparator.d.ts +13 -0
- package/dist/components/layout/xseparator/index.d.ts +3 -0
- package/dist/components/layout/xzigzaglayout/XZigZagLayout.d.ts +12 -0
- package/dist/components/layout/xzigzaglayout/index.d.ts +3 -0
- package/dist/components/navigation/index.css +35 -35
- package/dist/components/navigation/index.css.map +7 -1
- package/dist/components/navigation/index.d.ts +2 -76
- package/dist/components/navigation/index.js +26 -6
- package/dist/components/navigation/index.js.map +7 -1
- package/dist/components/navigation/index.mjs +2 -2
- package/dist/components/navigation/index.mjs.map +7 -1
- package/dist/components/navigation/{index.d.mts → xnavbar/XNavbar.d.ts} +6 -10
- package/dist/components/navigation/xnavbar/index.d.ts +3 -0
- package/dist/components/social/index.css +22 -22
- package/dist/components/social/index.css.map +7 -1
- package/dist/components/social/index.d.ts +2 -55
- package/dist/components/social/index.js +14 -13
- package/dist/components/social/index.js.map +7 -1
- package/dist/components/social/index.mjs +2 -2
- package/dist/components/social/index.mjs.map +7 -1
- package/dist/components/social/xsocialcontact/XSocialContact.d.ts +30 -0
- package/dist/components/social/xsocialcontact/XSocialIcons.d.ts +21 -0
- package/dist/components/social/xsocialcontact/index.d.ts +5 -0
- package/dist/index.css +215 -215
- package/dist/index.css.map +7 -1
- package/dist/index.d.ts +1 -8
- package/dist/index.js +149 -34
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +12 -12
- package/dist/index.mjs.map +7 -1
- package/package.json +6 -4
- package/dist/chunk-2OAXRRVQ.mjs.map +0 -1
- package/dist/chunk-42XPBYTL.mjs.map +0 -1
- package/dist/chunk-5G4P2E76.mjs.map +0 -1
- package/dist/chunk-NY22GB3E.mjs.map +0 -1
- package/dist/chunk-QCMWPIG7.mjs.map +0 -1
- package/dist/chunk-U27ZVCP7.mjs.map +0 -1
- package/dist/components/content/index.d.mts +0 -17
- package/dist/components/forms/index.d.mts +0 -68
- package/dist/components/gallery/index.d.mts +0 -29
- package/dist/components/index.d.mts +0 -8
- package/dist/components/layout/index.d.mts +0 -55
- package/dist/components/social/index.d.mts +0 -55
- package/dist/index.d.mts +0 -8
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/forms/xcontactform/XContactForm.module.css","../../../src/components/forms/xnewsletter/XNewsletter.module.css"],"sourcesContent":["/* Tamaños dinámicos base */\n.wrapper {\n --input-padding: .65rem .9rem;\n --font-size: 16px;\n --form-gap: 1.25rem;\n --row-gap: .85rem;\n --field-gap: .45rem;\n --button-min-width: 140px;\n --label-color: inherit;\n --wrapper-bg-color: transparent;\n --wrapper-border-color: transparent;\n --wrapper-border-width: 0px;\n --wrapper-border-style: solid;\n --wrapper-radius: .5rem;\n --field-border-color: var(--border, #ccc);\n --field-border-width: 1px;\n --field-border-style: solid;\n --field-radius: .5rem;\n --btn-bg-color: var(--bg, #333);\n --btn-text-color: var(--text, #fff);\n --btn-border-color: transparent;\n --btn-border-width: 0px;\n --btn-border-style: solid;\n --btn-radius: .5rem;\n --btn-alignment: flex-start;\n --btn-hover-bg-color: var(--btn-bg-color);\n --btn-hover-text-color: var(--btn-text-color);\n --btn-hover-border-color: var(--btn-border-color);\n --status-ok-color: #1fa37a;\n --status-error-color: #d16a6a;\n \n max-width: 900px;\n margin: 0 auto;\n padding: 2rem 1rem;\n background-color: var(--wrapper-bg-color);\n border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);\n border-radius: var(--wrapper-radius);\n}\n\n/* Modificadores de tamaño */\n.small {\n --input-padding: .35rem .55rem;\n --font-size: 13px;\n --form-gap: .75rem;\n --row-gap: .6rem;\n --field-gap: .3rem;\n --button-min-width: 118px;\n}\n.medium {\n --input-padding: .5rem .7rem;\n --font-size: 15px;\n --form-gap: 1rem;\n --row-gap: .7rem;\n --field-gap: .4rem;\n --button-min-width: 130px;\n}\n.large {\n --input-padding: 1rem 1.2rem;\n --font-size: 18px;\n --form-gap: 1.5rem;\n --row-gap: 1rem;\n --field-gap: .5rem;\n --button-min-width: 150px;\n}\n\n.form {\n display: grid;\n gap: var(--form-gap);\n max-width: 100%;\n}\n\n/* Layouts */\n.row {\n display: grid;\n gap: var(--row-gap);\n}\n\n.grid .row {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n\n.vertical .row {\n grid-template-columns: 1fr;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n}\n\n.field label {\n font-size: calc(var(--font-size) - 2px);\n font-weight: 500;\n color: var(--label-color);\n}\n\n.field input,\n.field textarea {\n width: 100%;\n padding: var(--input-padding);\n border: var(--field-border-width) var(--field-border-style) var(--field-border-color);\n border-radius: var(--field-radius);\n font-size: var(--font-size);\n box-sizing: border-box;\n font-family: inherit;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n color: #888;\n}\n\n.buttoncontainer {\n display: flex;\n justify-content: var(--btn-alignment);\n margin-top: 0.25rem;\n}\n\n.button {\n padding: var(--input-padding);\n border-radius: var(--btn-radius);\n border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);\n background-color: var(--btn-bg-color);\n color: var(--btn-text-color);\n cursor: pointer;\n font-size: var(--font-size);\n font-weight: 600;\n min-width: var(--button-min-width);\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;\n}\n\n.button:hover {\n background-color: var(--btn-hover-bg-color);\n color: var(--btn-hover-text-color);\n border-color: var(--btn-hover-border-color);\n opacity: 0.95;\n}\n\n.status {\n min-height: 1.5rem;\n font-size: calc(var(--font-size) - 2px);\n margin-top: 0.25rem;\n}\n\n.statusOk { color: var(--status-ok-color); }\n.statusError { color: var(--status-error-color); }\n\n.honeypot {\n position: absolute;\n left: -9999px;\n top: -9999px;\n}\n\n.withDecorativeX {\n position: relative;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.decorativeXTop,\n.decorativeXBottom {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.5rem;\n font-weight: 300;\n color: var(--decorative-x-color, currentColor);\n opacity: 1;\n pointer-events: none;\n background-color: var(--wrapper-bg-color, transparent);\n padding: 0 0.3rem;\n line-height: 1;\n z-index: 1;\n}\n\n.decorativeXTop {\n top: 0;\n transform: translate(-50%, -50%);\n}\n\n.decorativeXBottom {\n bottom: 0;\n transform: translate(-50%, 50%);\n}","/* XNewsletter.module.css */\n\n.container {\n /* Estas variables recibirán sus valores desde React */\n --nws-accent: var(--accent);\n --nws-text: var(--text);\n --nws-border: var(--border);\n --nws-btn-text: var(--accent-text);\n \n width: 100%;\n font-family: \"EB Garamond\", serif;\n}\n\n/* --- Layouts Base --- */\n.form {\n display: flex;\n gap: 1rem;\n}\n\n.horizontal {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 768px) {\n .horizontal {\n flex-direction: row;\n }\n}\n\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n max-width: 24rem; /* equivalente a max-w-sm */\n margin: 0 auto;\n}\n\n/* --- Elementos --- */\n.title {\n font-size: 0.875rem;\n white-space: nowrap;\n font-weight: 500;\n color: var(--nws-text);\n}\n\n.input {\n width: 100%;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-border);\n background-color: transparent;\n outline: none;\n transition: border-color 0.2s ease;\n color: var(--nws-text);\n caret-color: var(--nws-accent);\n font-family: inherit;\n}\n\n.horizontal .input {\n /* En escritorio, el input horizontal es de tamaño fijo (md:w-64) */\n}\n@media (min-width: 768px) {\n .horizontal .input {\n width: 16rem; \n }\n}\n\n.input:focus {\n border-color: var(--nws-accent);\n}\n\n/* --- Checkbox y Botón --- */\n.actions {\n display: flex;\n gap: 1rem;\n}\n\n.actionsHorizontal {\n flex-direction: row;\n align-items: center;\n}\n\n.actionsVertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n}\n\n.checkboxLabel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n white-space: nowrap;\n cursor: pointer;\n color: var(--nws-text);\n}\n\n.checkboxLabel span {\n opacity: 0.7;\n}\n\n.checkbox {\n height: 0.875rem;\n width: 0.875rem;\n border-radius: 0.125rem;\n cursor: pointer;\n accent-color: var(--nws-accent);\n}\n\n.termsLink {\n text-decoration: underline;\n color: var(--nws-accent);\n transition: opacity 0.2s ease;\n}\n\n.termsLink:hover {\n opacity: 1;\n}\n\n.button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-accent);\n color: var(--nws-accent);\n background-color: transparent;\n transition: all 0.2s ease;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.button:hover:not(:disabled) {\n background-color: var(--nws-accent);\n color: var(--nws-btn-text);\n}\n\n.button:disabled, .input:disabled, .checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.actionsVertical .button {\n width: 100%;\n}\n\n/* --- Feedback Message --- */\n.message {\n margin-top: 0.75rem;\n font-size: 0.75rem;\n color: var(--nws-accent);\n}\n\n.messageHorizontal {\n text-align: center;\n}\n\n.messageVertical {\n text-align: left;\n}"],"mappings":"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","names":[]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/forms/xcontactform/XContactForm.module.css", "../../../src/components/forms/xnewsletter/XNewsletter.module.css"],
|
|
4
|
+
"sourcesContent": ["/* Tama\u00F1os din\u00E1micos base */\n.wrapper {\n --input-padding: .65rem .9rem;\n --font-size: 16px;\n --form-gap: 1.25rem;\n --row-gap: .85rem;\n --field-gap: .45rem;\n --button-min-width: 140px;\n --label-color: inherit;\n --wrapper-bg-color: transparent;\n --wrapper-border-color: transparent;\n --wrapper-border-width: 0px;\n --wrapper-border-style: solid;\n --wrapper-radius: .5rem;\n --field-border-color: var(--border, #ccc);\n --field-border-width: 1px;\n --field-border-style: solid;\n --field-radius: .5rem;\n --btn-bg-color: var(--bg, #333);\n --btn-text-color: var(--text, #fff);\n --btn-border-color: transparent;\n --btn-border-width: 0px;\n --btn-border-style: solid;\n --btn-radius: .5rem;\n --btn-alignment: flex-start;\n --btn-hover-bg-color: var(--btn-bg-color);\n --btn-hover-text-color: var(--btn-text-color);\n --btn-hover-border-color: var(--btn-border-color);\n --status-ok-color: #1fa37a;\n --status-error-color: #d16a6a;\n \n max-width: 900px;\n margin: 0 auto;\n padding: 2rem 1rem;\n background-color: var(--wrapper-bg-color);\n border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);\n border-radius: var(--wrapper-radius);\n}\n\n/* Modificadores de tama\u00F1o */\n.small {\n --input-padding: .35rem .55rem;\n --font-size: 13px;\n --form-gap: .75rem;\n --row-gap: .6rem;\n --field-gap: .3rem;\n --button-min-width: 118px;\n}\n.medium {\n --input-padding: .5rem .7rem;\n --font-size: 15px;\n --form-gap: 1rem;\n --row-gap: .7rem;\n --field-gap: .4rem;\n --button-min-width: 130px;\n}\n.large {\n --input-padding: 1rem 1.2rem;\n --font-size: 18px;\n --form-gap: 1.5rem;\n --row-gap: 1rem;\n --field-gap: .5rem;\n --button-min-width: 150px;\n}\n\n.form {\n display: grid;\n gap: var(--form-gap);\n max-width: 100%;\n}\n\n/* Layouts */\n.row {\n display: grid;\n gap: var(--row-gap);\n}\n\n.grid .row {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n\n.vertical .row {\n grid-template-columns: 1fr;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n}\n\n.field label {\n font-size: calc(var(--font-size) - 2px);\n font-weight: 500;\n color: var(--label-color);\n}\n\n.field input,\n.field textarea {\n width: 100%;\n padding: var(--input-padding);\n border: var(--field-border-width) var(--field-border-style) var(--field-border-color);\n border-radius: var(--field-radius);\n font-size: var(--font-size);\n box-sizing: border-box;\n font-family: inherit;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n color: #888;\n}\n\n.buttoncontainer {\n display: flex;\n justify-content: var(--btn-alignment);\n margin-top: 0.25rem;\n}\n\n.button {\n padding: var(--input-padding);\n border-radius: var(--btn-radius);\n border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);\n background-color: var(--btn-bg-color);\n color: var(--btn-text-color);\n cursor: pointer;\n font-size: var(--font-size);\n font-weight: 600;\n min-width: var(--button-min-width);\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;\n}\n\n.button:hover {\n background-color: var(--btn-hover-bg-color);\n color: var(--btn-hover-text-color);\n border-color: var(--btn-hover-border-color);\n opacity: 0.95;\n}\n\n.status {\n min-height: 1.5rem;\n font-size: calc(var(--font-size) - 2px);\n margin-top: 0.25rem;\n}\n\n.statusOk { color: var(--status-ok-color); }\n.statusError { color: var(--status-error-color); }\n\n.honeypot {\n position: absolute;\n left: -9999px;\n top: -9999px;\n}\n\n.withDecorativeX {\n position: relative;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.decorativeXTop,\n.decorativeXBottom {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.5rem;\n font-weight: 300;\n color: var(--decorative-x-color, currentColor);\n opacity: 1;\n pointer-events: none;\n background-color: var(--wrapper-bg-color, transparent);\n padding: 0 0.3rem;\n line-height: 1;\n z-index: 1;\n}\n\n.decorativeXTop {\n top: 0;\n transform: translate(-50%, -50%);\n}\n\n.decorativeXBottom {\n bottom: 0;\n transform: translate(-50%, 50%);\n}", "/* XNewsletter.module.css */\n\n.container {\n /* Estas variables recibir\u00E1n sus valores desde React */\n --nws-accent: var(--accent);\n --nws-text: var(--text);\n --nws-border: var(--border);\n --nws-btn-text: var(--accent-text);\n \n width: 100%;\n font-family: \"EB Garamond\", serif;\n}\n\n/* --- Layouts Base --- */\n.form {\n display: flex;\n gap: 1rem;\n}\n\n.horizontal {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 768px) {\n .horizontal {\n flex-direction: row;\n }\n}\n\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n max-width: 24rem; /* equivalente a max-w-sm */\n margin: 0 auto;\n}\n\n/* --- Elementos --- */\n.title {\n font-size: 0.875rem;\n white-space: nowrap;\n font-weight: 500;\n color: var(--nws-text);\n}\n\n.input {\n width: 100%;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-border);\n background-color: transparent;\n outline: none;\n transition: border-color 0.2s ease;\n color: var(--nws-text);\n caret-color: var(--nws-accent);\n font-family: inherit;\n}\n\n.horizontal .input {\n /* En escritorio, el input horizontal es de tama\u00F1o fijo (md:w-64) */\n}\n@media (min-width: 768px) {\n .horizontal .input {\n width: 16rem; \n }\n}\n\n.input:focus {\n border-color: var(--nws-accent);\n}\n\n/* --- Checkbox y Bot\u00F3n --- */\n.actions {\n display: flex;\n gap: 1rem;\n}\n\n.actionsHorizontal {\n flex-direction: row;\n align-items: center;\n}\n\n.actionsVertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n}\n\n.checkboxLabel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n white-space: nowrap;\n cursor: pointer;\n color: var(--nws-text);\n}\n\n.checkboxLabel span {\n opacity: 0.7;\n}\n\n.checkbox {\n height: 0.875rem;\n width: 0.875rem;\n border-radius: 0.125rem;\n cursor: pointer;\n accent-color: var(--nws-accent);\n}\n\n.termsLink {\n text-decoration: underline;\n color: var(--nws-accent);\n transition: opacity 0.2s ease;\n}\n\n.termsLink:hover {\n opacity: 1;\n}\n\n.button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-accent);\n color: var(--nws-accent);\n background-color: transparent;\n transition: all 0.2s ease;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.button:hover:not(:disabled) {\n background-color: var(--nws-accent);\n color: var(--nws-btn-text);\n}\n\n.button:disabled, .input:disabled, .checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.actionsVertical .button {\n width: 100%;\n}\n\n/* --- Feedback Message --- */\n.message {\n margin-top: 0.75rem;\n font-size: 0.75rem;\n color: var(--nws-accent);\n}\n\n.messageHorizontal {\n text-align: center;\n}\n\n.messageVertical {\n text-align: left;\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["wrapper", "small", "medium", "large", "form", "row", "grid", "vertical", "field", "buttoncontainer", "button", "status", "statusOk", "statusError", "honeypot", "withDecorativeX", "decorativeXTop", "decorativeXBottom", "container", "form", "horizontal", "vertical", "title", "input", "actions", "actionsHorizontal", "actionsVertical", "checkboxLabel", "checkbox", "termsLink", "button", "message", "messageHorizontal", "messageVertical"]
|
|
7
|
+
}
|
|
@@ -1,68 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
showEmail?: boolean;
|
|
6
|
-
showPhone?: boolean;
|
|
7
|
-
showSubject?: boolean;
|
|
8
|
-
showMessage?: boolean;
|
|
9
|
-
namePlaceholder?: string;
|
|
10
|
-
emailPlaceholder?: string;
|
|
11
|
-
phonePlaceholder?: string;
|
|
12
|
-
subjectPlaceholder?: string;
|
|
13
|
-
messagePlaceholder?: string;
|
|
14
|
-
labelColor?: string;
|
|
15
|
-
wrapperBackgroundColor?: string;
|
|
16
|
-
wrapperBorderColor?: string;
|
|
17
|
-
wrapperBorderWidth?: string;
|
|
18
|
-
wrapperBorderRadius?: "rounded" | "square";
|
|
19
|
-
wrapperBorderStyle?: "solid" | "dashed" | "dotted";
|
|
20
|
-
fieldBorderColor?: string;
|
|
21
|
-
fieldBorderWidth?: string;
|
|
22
|
-
fieldBorderRadius?: "rounded" | "square";
|
|
23
|
-
fieldBorderStyle?: "solid" | "dashed" | "dotted";
|
|
24
|
-
buttonColor?: string;
|
|
25
|
-
buttonBorderColor?: string;
|
|
26
|
-
buttonBorderWidth?: string;
|
|
27
|
-
buttonBorderRadius?: "rounded" | "square";
|
|
28
|
-
buttonBorderStyle?: "solid" | "dashed" | "dotted";
|
|
29
|
-
buttonHoverColor?: string;
|
|
30
|
-
buttonHoverTextColor?: string;
|
|
31
|
-
buttonHoverBorderColor?: string;
|
|
32
|
-
buttonTextColor?: string;
|
|
33
|
-
buttonAlignment?: "left" | "right";
|
|
34
|
-
requiredFieldsMessage?: string;
|
|
35
|
-
honeypotMessage?: string;
|
|
36
|
-
submitSuccessMessage?: string;
|
|
37
|
-
statusSuccessColor?: string;
|
|
38
|
-
statusErrorColor?: string;
|
|
39
|
-
decorativeX?: boolean;
|
|
40
|
-
decorativeXColor?: string;
|
|
41
|
-
size?: "small" | "medium" | "large";
|
|
42
|
-
layout?: "vertical" | "grid";
|
|
43
|
-
}
|
|
44
|
-
declare function XContactForm({ showName, showEmail, showPhone, showSubject, showMessage, namePlaceholder, emailPlaceholder, phonePlaceholder, subjectPlaceholder, messagePlaceholder, labelColor, wrapperBackgroundColor, wrapperBorderColor, wrapperBorderWidth, wrapperBorderRadius, wrapperBorderStyle, fieldBorderColor, fieldBorderWidth, fieldBorderRadius, fieldBorderStyle, buttonColor, buttonBorderColor, buttonBorderWidth, buttonBorderRadius, buttonBorderStyle, buttonHoverColor, buttonHoverTextColor, buttonHoverBorderColor, buttonTextColor, buttonAlignment, requiredFieldsMessage, honeypotMessage, submitSuccessMessage, statusSuccessColor, statusErrorColor, decorativeX, decorativeXColor, size, layout, }: XContactFormProps): react_jsx_runtime.JSX.Element;
|
|
45
|
-
|
|
46
|
-
interface XNewsletterProps {
|
|
47
|
-
title?: string;
|
|
48
|
-
placeholder?: string;
|
|
49
|
-
buttonText?: string;
|
|
50
|
-
termsText?: string;
|
|
51
|
-
termsLinkText?: string;
|
|
52
|
-
successMessage?: string;
|
|
53
|
-
errorMessage?: string;
|
|
54
|
-
termsErrorMessage?: string;
|
|
55
|
-
termsLink?: string;
|
|
56
|
-
apiRoute: string;
|
|
57
|
-
method?: "POST" | "GET" | "PUT";
|
|
58
|
-
payloadType?: "formData" | "json";
|
|
59
|
-
layout?: "horizontal" | "vertical";
|
|
60
|
-
accentColor?: string;
|
|
61
|
-
textColor?: string;
|
|
62
|
-
borderColor?: string;
|
|
63
|
-
buttonTextColor?: string;
|
|
64
|
-
containerClassName?: string;
|
|
65
|
-
}
|
|
66
|
-
declare function XNewsletter({ title, placeholder, buttonText, termsText, termsLinkText, successMessage, errorMessage, termsErrorMessage, termsLink, apiRoute, method, payloadType, layout, accentColor, textColor, borderColor, buttonTextColor, containerClassName, }: XNewsletterProps): react_jsx_runtime.JSX.Element;
|
|
67
|
-
|
|
68
|
-
export { XContactForm, type XContactFormProps, XNewsletter, type XNewsletterProps };
|
|
1
|
+
export { XContactForm } from "./xcontactform";
|
|
2
|
+
export { XNewsletter } from "./xnewsletter";
|
|
3
|
+
export type { XContactFormProps } from "./xcontactform";
|
|
4
|
+
export type { XNewsletterProps } from "./xnewsletter";
|
|
@@ -39,7 +39,26 @@ module.exports = __toCommonJS(forms_exports);
|
|
|
39
39
|
var import_react = require("react");
|
|
40
40
|
|
|
41
41
|
// src/components/forms/xcontactform/XContactForm.module.css
|
|
42
|
-
var XContactForm_default = {
|
|
42
|
+
var XContactForm_default = {
|
|
43
|
+
wrapper: "XContactForm_wrapper3",
|
|
44
|
+
small: "XContactForm_small3",
|
|
45
|
+
medium: "XContactForm_medium3",
|
|
46
|
+
large: "XContactForm_large3",
|
|
47
|
+
form: "XContactForm_form3",
|
|
48
|
+
row: "XContactForm_row3",
|
|
49
|
+
grid: "XContactForm_grid3",
|
|
50
|
+
vertical: "XContactForm_vertical3",
|
|
51
|
+
field: "XContactForm_field3",
|
|
52
|
+
buttoncontainer: "XContactForm_buttoncontainer3",
|
|
53
|
+
button: "XContactForm_button3",
|
|
54
|
+
status: "XContactForm_status3",
|
|
55
|
+
statusOk: "XContactForm_statusOk3",
|
|
56
|
+
statusError: "XContactForm_statusError3",
|
|
57
|
+
honeypot: "XContactForm_honeypot3",
|
|
58
|
+
withDecorativeX: "XContactForm_withDecorativeX3",
|
|
59
|
+
decorativeXTop: "XContactForm_decorativeXTop3",
|
|
60
|
+
decorativeXBottom: "XContactForm_decorativeXBottom3"
|
|
61
|
+
};
|
|
43
62
|
|
|
44
63
|
// src/components/forms/xcontactform/XContactForm.tsx
|
|
45
64
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -192,7 +211,24 @@ var import_react2 = require("react");
|
|
|
192
211
|
var import_link = __toESM(require("next/link"));
|
|
193
212
|
|
|
194
213
|
// src/components/forms/xnewsletter/XNewsletter.module.css
|
|
195
|
-
var XNewsletter_default = {
|
|
214
|
+
var XNewsletter_default = {
|
|
215
|
+
container: "XNewsletter_container3",
|
|
216
|
+
form: "XNewsletter_form3",
|
|
217
|
+
horizontal: "XNewsletter_horizontal3",
|
|
218
|
+
vertical: "XNewsletter_vertical3",
|
|
219
|
+
title: "XNewsletter_title3",
|
|
220
|
+
input: "XNewsletter_input3",
|
|
221
|
+
actions: "XNewsletter_actions3",
|
|
222
|
+
actionsHorizontal: "XNewsletter_actionsHorizontal3",
|
|
223
|
+
actionsVertical: "XNewsletter_actionsVertical3",
|
|
224
|
+
checkboxLabel: "XNewsletter_checkboxLabel3",
|
|
225
|
+
checkbox: "XNewsletter_checkbox3",
|
|
226
|
+
termsLink: "XNewsletter_termsLink3",
|
|
227
|
+
button: "XNewsletter_button3",
|
|
228
|
+
message: "XNewsletter_message3",
|
|
229
|
+
messageHorizontal: "XNewsletter_messageHorizontal3",
|
|
230
|
+
messageVertical: "XNewsletter_messageVertical3"
|
|
231
|
+
};
|
|
196
232
|
|
|
197
233
|
// src/components/forms/xnewsletter/XNewsletter.tsx
|
|
198
234
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -349,9 +385,4 @@ function XNewsletter({
|
|
|
349
385
|
}
|
|
350
386
|
);
|
|
351
387
|
}
|
|
352
|
-
|
|
353
|
-
0 && (module.exports = {
|
|
354
|
-
XContactForm,
|
|
355
|
-
XNewsletter
|
|
356
|
-
});
|
|
357
|
-
//# sourceMappingURL=index.js.map
|
|
388
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/forms/index.ts","../../../src/components/forms/xcontactform/XContactForm.tsx","../../../src/components/forms/xcontactform/XContactForm.module.css","../../../src/components/forms/xnewsletter/XNewsletter.tsx","../../../src/components/forms/xnewsletter/XNewsletter.module.css"],"sourcesContent":["export { XContactForm } from \"./xcontactform\";\nexport { XNewsletter } from \"./xnewsletter\";\nexport type { XContactFormProps } from \"./xcontactform\";\nexport type { XNewsletterProps } from \"./xnewsletter\";\n","\"use client\";\n\nimport { useState } from \"react\";\nimport styles from \"./XContactForm.module.css\";\n\ntype Status = { ok: boolean; msg: string } | null;\n\nexport interface XContactFormProps {\n // Visibilidad\n showName?: boolean;\n showEmail?: boolean;\n showPhone?: boolean;\n showSubject?: boolean;\n showMessage?: boolean;\n \n // Placeholders\n namePlaceholder?: string;\n emailPlaceholder?: string;\n phonePlaceholder?: string;\n subjectPlaceholder?: string;\n messagePlaceholder?: string;\n\n // Diseño\n labelColor?: string;\n wrapperBackgroundColor?: string;\n wrapperBorderColor?: string;\n wrapperBorderWidth?: string;\n wrapperBorderRadius?: \"rounded\" | \"square\";\n wrapperBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n fieldBorderColor?: string;\n fieldBorderWidth?: string;\n fieldBorderRadius?: \"rounded\" | \"square\";\n fieldBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n buttonColor?: string;\n buttonBorderColor?: string;\n buttonBorderWidth?: string;\n buttonBorderRadius?: \"rounded\" | \"square\";\n buttonBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n buttonHoverColor?: string;\n buttonHoverTextColor?: string;\n buttonHoverBorderColor?: string;\n buttonTextColor?: string;\n buttonAlignment?: \"left\" | \"right\";\n\n // Mensajes de estado\n requiredFieldsMessage?: string;\n honeypotMessage?: string;\n submitSuccessMessage?: string;\n statusSuccessColor?: string;\n statusErrorColor?: string;\n\n // Decorativos\n decorativeX?: boolean;\n decorativeXColor?: string;\n\n size?: \"small\" | \"medium\" | \"large\";\n layout?: \"vertical\" | \"grid\";\n}\n\nexport default function XContactForm({\n showName = true,\n showEmail = true,\n showPhone = true,\n showSubject = true,\n showMessage = true,\n namePlaceholder = \"Tu nombre\",\n emailPlaceholder = \"tucorreo@ejemplo.com\",\n phonePlaceholder = \"+34 600 000 000\",\n subjectPlaceholder = \"Tema del mensaje\",\n messagePlaceholder = \"Cuéntame qué necesitas…\",\n labelColor,\n wrapperBackgroundColor,\n wrapperBorderColor,\n wrapperBorderWidth,\n wrapperBorderRadius = \"rounded\",\n wrapperBorderStyle = \"solid\",\n fieldBorderColor,\n fieldBorderWidth,\n fieldBorderRadius = \"rounded\",\n fieldBorderStyle = \"solid\",\n buttonColor,\n buttonBorderColor,\n buttonBorderWidth,\n buttonBorderRadius = \"rounded\",\n buttonBorderStyle = \"solid\",\n buttonHoverColor,\n buttonHoverTextColor,\n buttonHoverBorderColor,\n buttonTextColor,\n buttonAlignment = \"left\",\n requiredFieldsMessage = \"Rellena los campos obligatorios.\",\n honeypotMessage = \"Gracias.\",\n submitSuccessMessage = \"Abriendo tu aplicación de correo…\",\n statusSuccessColor,\n statusErrorColor,\n decorativeX = false,\n decorativeXColor = \"currentColor\",\n size = \"medium\",\n layout = \"grid\",\n}: XContactFormProps) {\n const [status, setStatus] = useState<Status>(null);\n\n function onSubmit(e: React.FormEvent<HTMLFormElement>) {\n e.preventDefault();\n setStatus(null);\n\n const form = e.currentTarget;\n const fd = new FormData(form);\n\n if ((fd.get(\"website\") as string)?.length) {\n setStatus({ ok: true, msg: honeypotMessage });\n form.reset();\n return;\n }\n\n const name = showName ? String(fd.get(\"name\") || \"\").trim() : \"\";\n const email = showEmail ? String(fd.get(\"email\") || \"\").trim() : \"\";\n const phone = showPhone ? String(fd.get(\"phone\") || \"\").trim() : \"\";\n const subject = showSubject\n ? String(fd.get(\"subject\") || \"Contacto desde web\").trim()\n : \"Contacto desde web\";\n const message = showMessage ? String(fd.get(\"message\") || \"\").trim() : \"\";\n\n if (\n (showName && !name) ||\n (showEmail && !email) ||\n (showPhone && !phone) ||\n (showMessage && !message)\n ) {\n setStatus({ ok: false, msg: requiredFieldsMessage });\n return;\n }\n\n const bodyLines = [];\n if (showName) bodyLines.push(`Nombre: ${name}`);\n if (showEmail) bodyLines.push(`Email: ${email}`);\n if (showPhone) bodyLines.push(`Teléfono: ${phone}`);\n bodyLines.push(\"\");\n if (showMessage) bodyLines.push(message);\n\n const body = bodyLines.join(\"\\n\");\n const to = \"x@xscriptor.com\";\n const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(\n subject\n )}&body=${encodeURIComponent(body)}`;\n\n window.location.href = mailto;\n setStatus({ ok: true, msg: submitSuccessMessage });\n }\n\n const radiusMap = {\n rounded: \"0.5rem\",\n square: \"0\",\n } as const;\n\n const alignmentMap = {\n left: \"flex-start\",\n right: \"flex-end\",\n } as const;\n\n // Variables CSS dinámicas para estilos configurables\n const customStyles = {\n ...(decorativeXColor && { \"--decorative-x-color\": decorativeXColor }),\n ...(labelColor && { \"--label-color\": labelColor }),\n ...(wrapperBackgroundColor && { \"--wrapper-bg-color\": wrapperBackgroundColor }),\n ...(wrapperBorderColor && { \"--wrapper-border-color\": wrapperBorderColor }),\n ...(wrapperBorderWidth && { \"--wrapper-border-width\": wrapperBorderWidth }),\n \"--wrapper-radius\": radiusMap[wrapperBorderRadius],\n \"--wrapper-border-style\": wrapperBorderStyle,\n ...(fieldBorderColor && { \"--field-border-color\": fieldBorderColor }),\n ...(fieldBorderWidth && { \"--field-border-width\": fieldBorderWidth }),\n \"--field-radius\": radiusMap[fieldBorderRadius],\n \"--field-border-style\": fieldBorderStyle,\n ...(buttonColor && { \"--btn-bg-color\": buttonColor }),\n ...(buttonBorderColor && { \"--btn-border-color\": buttonBorderColor }),\n ...(buttonBorderWidth && { \"--btn-border-width\": buttonBorderWidth }),\n \"--btn-radius\": radiusMap[buttonBorderRadius],\n \"--btn-border-style\": buttonBorderStyle,\n \"--btn-alignment\": alignmentMap[buttonAlignment],\n ...(buttonHoverColor && { \"--btn-hover-bg-color\": buttonHoverColor }),\n ...(buttonHoverTextColor && { \"--btn-hover-text-color\": buttonHoverTextColor }),\n ...(buttonHoverBorderColor && { \"--btn-hover-border-color\": buttonHoverBorderColor }),\n ...(buttonTextColor && { \"--btn-text-color\": buttonTextColor }),\n ...(statusSuccessColor && { \"--status-ok-color\": statusSuccessColor }),\n ...(statusErrorColor && { \"--status-error-color\": statusErrorColor }),\n } as React.CSSProperties;\n\n return (\n <div className={`${styles.wrapper} ${styles[size]} ${decorativeX ? styles.withDecorativeX : \"\"}`} style={customStyles}>\n {decorativeX && <div className={styles.decorativeXTop}>✕</div>}\n <form onSubmit={onSubmit} className={`${styles.form} ${styles[layout]}`} noValidate>\n <div className={styles.honeypot} aria-hidden=\"true\">\n <label htmlFor=\"website\">Tu web</label>\n <input id=\"website\" name=\"website\" type=\"text\" tabIndex={-1} autoComplete=\"off\" />\n </div>\n\n {(showName || showEmail || showPhone) && (\n <div className={styles.row}>\n {showName && (\n <div className={styles.field}>\n <label htmlFor=\"name\">Nombre</label>\n <input id=\"name\" name=\"name\" type=\"text\" placeholder={namePlaceholder} required maxLength={80} />\n </div>\n )}\n {showEmail && (\n <div className={styles.field}>\n <label htmlFor=\"email\">Email</label>\n <input id=\"email\" name=\"email\" type=\"email\" inputMode=\"email\" placeholder={emailPlaceholder} required />\n </div>\n )}\n {showPhone && (\n <div className={styles.field}>\n <label htmlFor=\"phone\">Teléfono</label>\n <input id=\"phone\" name=\"phone\" type=\"tel\" inputMode=\"tel\" placeholder={phonePlaceholder} required maxLength={20} />\n </div>\n )}\n </div>\n )}\n\n {showSubject && (\n <div className={styles.field}>\n <label htmlFor=\"subject\">Asunto</label>\n <input id=\"subject\" name=\"subject\" type=\"text\" placeholder={subjectPlaceholder} required maxLength={120} />\n </div>\n )}\n\n {showMessage && (\n <div className={styles.field}>\n <label htmlFor=\"message\">Mensaje</label>\n <textarea id=\"message\" name=\"message\" rows={6} placeholder={messagePlaceholder} required maxLength={3000} />\n </div>\n )}\n\n <div className={styles.buttoncontainer}>\n <button type=\"submit\" className={styles.button}>\n Enviar\n </button>\n </div>\n\n <p className={`${styles.status} ${status?.ok ? styles.statusOk : status === null ? \"\" : styles.statusError}`} role=\"status\" aria-live=\"polite\">\n {status?.msg}\n </p>\n </form>\n {decorativeX && <div className={styles.decorativeXBottom}>✕</div>}\n </div>\n );\n}","/* Tamaños dinámicos base */\n.wrapper {\n --input-padding: .65rem .9rem;\n --font-size: 16px;\n --form-gap: 1.25rem;\n --row-gap: .85rem;\n --field-gap: .45rem;\n --button-min-width: 140px;\n --label-color: inherit;\n --wrapper-bg-color: transparent;\n --wrapper-border-color: transparent;\n --wrapper-border-width: 0px;\n --wrapper-border-style: solid;\n --wrapper-radius: .5rem;\n --field-border-color: var(--border, #ccc);\n --field-border-width: 1px;\n --field-border-style: solid;\n --field-radius: .5rem;\n --btn-bg-color: var(--bg, #333);\n --btn-text-color: var(--text, #fff);\n --btn-border-color: transparent;\n --btn-border-width: 0px;\n --btn-border-style: solid;\n --btn-radius: .5rem;\n --btn-alignment: flex-start;\n --btn-hover-bg-color: var(--btn-bg-color);\n --btn-hover-text-color: var(--btn-text-color);\n --btn-hover-border-color: var(--btn-border-color);\n --status-ok-color: #1fa37a;\n --status-error-color: #d16a6a;\n \n max-width: 900px;\n margin: 0 auto;\n padding: 2rem 1rem;\n background-color: var(--wrapper-bg-color);\n border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);\n border-radius: var(--wrapper-radius);\n}\n\n/* Modificadores de tamaño */\n.small {\n --input-padding: .35rem .55rem;\n --font-size: 13px;\n --form-gap: .75rem;\n --row-gap: .6rem;\n --field-gap: .3rem;\n --button-min-width: 118px;\n}\n.medium {\n --input-padding: .5rem .7rem;\n --font-size: 15px;\n --form-gap: 1rem;\n --row-gap: .7rem;\n --field-gap: .4rem;\n --button-min-width: 130px;\n}\n.large {\n --input-padding: 1rem 1.2rem;\n --font-size: 18px;\n --form-gap: 1.5rem;\n --row-gap: 1rem;\n --field-gap: .5rem;\n --button-min-width: 150px;\n}\n\n.form {\n display: grid;\n gap: var(--form-gap);\n max-width: 100%;\n}\n\n/* Layouts */\n.row {\n display: grid;\n gap: var(--row-gap);\n}\n\n.grid .row {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n\n.vertical .row {\n grid-template-columns: 1fr;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n}\n\n.field label {\n font-size: calc(var(--font-size) - 2px);\n font-weight: 500;\n color: var(--label-color);\n}\n\n.field input,\n.field textarea {\n width: 100%;\n padding: var(--input-padding);\n border: var(--field-border-width) var(--field-border-style) var(--field-border-color);\n border-radius: var(--field-radius);\n font-size: var(--font-size);\n box-sizing: border-box;\n font-family: inherit;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n color: #888;\n}\n\n.buttoncontainer {\n display: flex;\n justify-content: var(--btn-alignment);\n margin-top: 0.25rem;\n}\n\n.button {\n padding: var(--input-padding);\n border-radius: var(--btn-radius);\n border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);\n background-color: var(--btn-bg-color);\n color: var(--btn-text-color);\n cursor: pointer;\n font-size: var(--font-size);\n font-weight: 600;\n min-width: var(--button-min-width);\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;\n}\n\n.button:hover {\n background-color: var(--btn-hover-bg-color);\n color: var(--btn-hover-text-color);\n border-color: var(--btn-hover-border-color);\n opacity: 0.95;\n}\n\n.status {\n min-height: 1.5rem;\n font-size: calc(var(--font-size) - 2px);\n margin-top: 0.25rem;\n}\n\n.statusOk { color: var(--status-ok-color); }\n.statusError { color: var(--status-error-color); }\n\n.honeypot {\n position: absolute;\n left: -9999px;\n top: -9999px;\n}\n\n.withDecorativeX {\n position: relative;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.decorativeXTop,\n.decorativeXBottom {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.5rem;\n font-weight: 300;\n color: var(--decorative-x-color, currentColor);\n opacity: 1;\n pointer-events: none;\n background-color: var(--wrapper-bg-color, transparent);\n padding: 0 0.3rem;\n line-height: 1;\n z-index: 1;\n}\n\n.decorativeXTop {\n top: 0;\n transform: translate(-50%, -50%);\n}\n\n.decorativeXBottom {\n bottom: 0;\n transform: translate(-50%, 50%);\n}","\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport styles from \"./XNewsletter.module.css\";\n\nexport interface XNewsletterProps {\n title?: string;\n placeholder?: string;\n buttonText?: string;\n termsText?: string;\n termsLinkText?: string;\n successMessage?: string;\n errorMessage?: string;\n termsErrorMessage?: string;\n termsLink?: string;\n apiRoute: string;\n method?: \"POST\" | \"GET\" | \"PUT\";\n payloadType?: \"formData\" | \"json\";\n layout?: \"horizontal\" | \"vertical\";\n accentColor?: string;\n textColor?: string;\n borderColor?: string;\n buttonTextColor?: string;\n containerClassName?: string; // Para clases extra desde afuera si las necesitas\n}\n\nexport default function XNewsletter({\n title = \"Recibe poesía y reflexiones\",\n placeholder = \"tu@email.com\",\n buttonText = \"Suscribirse\",\n termsText = \"Acepto\",\n termsLinkText = \"términos\",\n successMessage = \"¡Bienvenido(a)!\",\n errorMessage = \"Algo salió mal. Por favor, intenta de nuevo.\",\n termsErrorMessage = \"Debes aceptar los términos y condiciones para suscribirte...\",\n termsLink = \"/terminos-y-condiciones\",\n apiRoute,\n method = \"POST\",\n payloadType = \"formData\",\n layout = \"horizontal\",\n accentColor = \"var(--accent)\",\n textColor = \"var(--text)\",\n borderColor = \"var(--border)\",\n buttonTextColor = \"var(--accent-text)\",\n containerClassName = \"w-full max-w-4xl mx-auto px-4 py-6\",\n}: XNewsletterProps) {\n const [email, setEmail] = useState(\"\");\n const [acceptedTerms, setAcceptedTerms] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setMessage(\"\");\n\n if (!acceptedTerms) {\n setMessage(termsErrorMessage);\n return;\n }\n\n setIsLoading(true);\n\n try {\n let bodyData: BodyInit | null | undefined = null;\n let headers: HeadersInit = {};\n\n if (payloadType === \"formData\") {\n const formData = new FormData();\n formData.append(\"email\", email);\n bodyData = formData;\n } else if (payloadType === \"json\") {\n bodyData = JSON.stringify({ email });\n headers = { \"Content-Type\": \"application/json\" };\n }\n\n const response = await fetch(apiRoute, {\n method,\n headers,\n body: method !== \"GET\" ? bodyData : undefined,\n cache: \"no-store\",\n });\n\n const data = await response.json();\n\n if (response.ok && data.success) {\n setMessage(data.message || successMessage);\n setEmail(\"\");\n setAcceptedTerms(false);\n } else {\n setMessage(data.error || errorMessage);\n }\n } catch {\n setMessage(errorMessage);\n } finally {\n setIsLoading(false);\n }\n };\n\n // Convertimos las props de colores a Variables CSS nativas.\n const customCssVariables = {\n \"--nws-accent\": accentColor,\n \"--nws-text\": textColor,\n \"--nws-border\": borderColor,\n \"--nws-btn-text\": buttonTextColor,\n } as React.CSSProperties;\n\n return (\n <div\n className={`${styles.container} ${containerClassName}`}\n style={customCssVariables}\n >\n <form\n onSubmit={handleSubmit}\n className={`${styles.form} ${styles[layout]}`}\n >\n {/* Título */}\n {title && <span className={styles.title}>{title}</span>}\n\n {/* Input */}\n <input\n type=\"email\"\n placeholder={placeholder}\n className={styles.input}\n aria-label=\"email\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n required\n disabled={isLoading}\n />\n\n {/* Grupo Acciones (Checkbox + Botón) */}\n <div\n className={`${styles.actions} ${\n layout === \"horizontal\"\n ? styles.actionsHorizontal\n : styles.actionsVertical\n }`}\n >\n {/* Checkbox */}\n <label className={styles.checkboxLabel}>\n <input\n type=\"checkbox\"\n className={styles.checkbox}\n checked={acceptedTerms}\n onChange={(e) => setAcceptedTerms(e.target.checked)}\n required\n disabled={isLoading}\n />\n <span>\n {termsText}{\" \"}\n <Link\n href={termsLink}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles.termsLink}\n >\n {termsLinkText}\n </Link>\n </span>\n </label>\n\n {/* Botón */}\n <button\n type=\"submit\"\n disabled={isLoading}\n className={styles.button}\n >\n {isLoading ? \"Enviando...\" : buttonText}\n </button>\n </div>\n </form>\n\n {/* Mensaje */}\n {message && (\n <p\n className={`${styles.message} ${\n layout === \"horizontal\"\n ? styles.messageHorizontal\n : styles.messageVertical\n }`}\n >\n {message}\n </p>\n )}\n </div>\n );\n}","/* XNewsletter.module.css */\n\n.container {\n /* Estas variables recibirán sus valores desde React */\n --nws-accent: var(--accent);\n --nws-text: var(--text);\n --nws-border: var(--border);\n --nws-btn-text: var(--accent-text);\n \n width: 100%;\n font-family: \"EB Garamond\", serif;\n}\n\n/* --- Layouts Base --- */\n.form {\n display: flex;\n gap: 1rem;\n}\n\n.horizontal {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 768px) {\n .horizontal {\n flex-direction: row;\n }\n}\n\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n max-width: 24rem; /* equivalente a max-w-sm */\n margin: 0 auto;\n}\n\n/* --- Elementos --- */\n.title {\n font-size: 0.875rem;\n white-space: nowrap;\n font-weight: 500;\n color: var(--nws-text);\n}\n\n.input {\n width: 100%;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-border);\n background-color: transparent;\n outline: none;\n transition: border-color 0.2s ease;\n color: var(--nws-text);\n caret-color: var(--nws-accent);\n font-family: inherit;\n}\n\n.horizontal .input {\n /* En escritorio, el input horizontal es de tamaño fijo (md:w-64) */\n}\n@media (min-width: 768px) {\n .horizontal .input {\n width: 16rem; \n }\n}\n\n.input:focus {\n border-color: var(--nws-accent);\n}\n\n/* --- Checkbox y Botón --- */\n.actions {\n display: flex;\n gap: 1rem;\n}\n\n.actionsHorizontal {\n flex-direction: row;\n align-items: center;\n}\n\n.actionsVertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n}\n\n.checkboxLabel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n white-space: nowrap;\n cursor: pointer;\n color: var(--nws-text);\n}\n\n.checkboxLabel span {\n opacity: 0.7;\n}\n\n.checkbox {\n height: 0.875rem;\n width: 0.875rem;\n border-radius: 0.125rem;\n cursor: pointer;\n accent-color: var(--nws-accent);\n}\n\n.termsLink {\n text-decoration: underline;\n color: var(--nws-accent);\n transition: opacity 0.2s ease;\n}\n\n.termsLink:hover {\n opacity: 1;\n}\n\n.button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-accent);\n color: var(--nws-accent);\n background-color: transparent;\n transition: all 0.2s ease;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.button:hover:not(:disabled) {\n background-color: var(--nws-accent);\n color: var(--nws-btn-text);\n}\n\n.button:disabled, .input:disabled, .checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.actionsVertical .button {\n width: 100%;\n}\n\n/* --- Feedback Message --- */\n.message {\n margin-top: 0.75rem;\n font-size: 0.75rem;\n color: var(--nws-accent);\n}\n\n.messageHorizontal {\n text-align: center;\n}\n\n.messageVertical {\n text-align: left;\n}"],"mappings":"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","names":["import_react","import_jsx_runtime","Link"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/forms/index.ts", "../../../src/components/forms/xcontactform/XContactForm.tsx", "../../../src/components/forms/xcontactform/XContactForm.module.css", "../../../src/components/forms/xnewsletter/XNewsletter.tsx", "../../../src/components/forms/xnewsletter/XNewsletter.module.css"],
|
|
4
|
+
"sourcesContent": ["export { XContactForm } from \"./xcontactform\";\nexport { XNewsletter } from \"./xnewsletter\";\nexport type { XContactFormProps } from \"./xcontactform\";\nexport type { XNewsletterProps } from \"./xnewsletter\";\n", "\"use client\";\n\nimport { useState } from \"react\";\nimport styles from \"./XContactForm.module.css\";\n\ntype Status = { ok: boolean; msg: string } | null;\n\nexport interface XContactFormProps {\n // Visibilidad\n showName?: boolean;\n showEmail?: boolean;\n showPhone?: boolean;\n showSubject?: boolean;\n showMessage?: boolean;\n \n // Placeholders\n namePlaceholder?: string;\n emailPlaceholder?: string;\n phonePlaceholder?: string;\n subjectPlaceholder?: string;\n messagePlaceholder?: string;\n\n // Dise\u00F1o\n labelColor?: string;\n wrapperBackgroundColor?: string;\n wrapperBorderColor?: string;\n wrapperBorderWidth?: string;\n wrapperBorderRadius?: \"rounded\" | \"square\";\n wrapperBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n fieldBorderColor?: string;\n fieldBorderWidth?: string;\n fieldBorderRadius?: \"rounded\" | \"square\";\n fieldBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n buttonColor?: string;\n buttonBorderColor?: string;\n buttonBorderWidth?: string;\n buttonBorderRadius?: \"rounded\" | \"square\";\n buttonBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n buttonHoverColor?: string;\n buttonHoverTextColor?: string;\n buttonHoverBorderColor?: string;\n buttonTextColor?: string;\n buttonAlignment?: \"left\" | \"right\";\n\n // Mensajes de estado\n requiredFieldsMessage?: string;\n honeypotMessage?: string;\n submitSuccessMessage?: string;\n statusSuccessColor?: string;\n statusErrorColor?: string;\n\n // Decorativos\n decorativeX?: boolean;\n decorativeXColor?: string;\n\n size?: \"small\" | \"medium\" | \"large\";\n layout?: \"vertical\" | \"grid\";\n}\n\nexport default function XContactForm({\n showName = true,\n showEmail = true,\n showPhone = true,\n showSubject = true,\n showMessage = true,\n namePlaceholder = \"Tu nombre\",\n emailPlaceholder = \"tucorreo@ejemplo.com\",\n phonePlaceholder = \"+34 600 000 000\",\n subjectPlaceholder = \"Tema del mensaje\",\n messagePlaceholder = \"Cu\u00E9ntame qu\u00E9 necesitas\u2026\",\n labelColor,\n wrapperBackgroundColor,\n wrapperBorderColor,\n wrapperBorderWidth,\n wrapperBorderRadius = \"rounded\",\n wrapperBorderStyle = \"solid\",\n fieldBorderColor,\n fieldBorderWidth,\n fieldBorderRadius = \"rounded\",\n fieldBorderStyle = \"solid\",\n buttonColor,\n buttonBorderColor,\n buttonBorderWidth,\n buttonBorderRadius = \"rounded\",\n buttonBorderStyle = \"solid\",\n buttonHoverColor,\n buttonHoverTextColor,\n buttonHoverBorderColor,\n buttonTextColor,\n buttonAlignment = \"left\",\n requiredFieldsMessage = \"Rellena los campos obligatorios.\",\n honeypotMessage = \"Gracias.\",\n submitSuccessMessage = \"Abriendo tu aplicaci\u00F3n de correo\u2026\",\n statusSuccessColor,\n statusErrorColor,\n decorativeX = false,\n decorativeXColor = \"currentColor\",\n size = \"medium\",\n layout = \"grid\",\n}: XContactFormProps) {\n const [status, setStatus] = useState<Status>(null);\n\n function onSubmit(e: React.FormEvent<HTMLFormElement>) {\n e.preventDefault();\n setStatus(null);\n\n const form = e.currentTarget;\n const fd = new FormData(form);\n\n if ((fd.get(\"website\") as string)?.length) {\n setStatus({ ok: true, msg: honeypotMessage });\n form.reset();\n return;\n }\n\n const name = showName ? String(fd.get(\"name\") || \"\").trim() : \"\";\n const email = showEmail ? String(fd.get(\"email\") || \"\").trim() : \"\";\n const phone = showPhone ? String(fd.get(\"phone\") || \"\").trim() : \"\";\n const subject = showSubject\n ? String(fd.get(\"subject\") || \"Contacto desde web\").trim()\n : \"Contacto desde web\";\n const message = showMessage ? String(fd.get(\"message\") || \"\").trim() : \"\";\n\n if (\n (showName && !name) ||\n (showEmail && !email) ||\n (showPhone && !phone) ||\n (showMessage && !message)\n ) {\n setStatus({ ok: false, msg: requiredFieldsMessage });\n return;\n }\n\n const bodyLines = [];\n if (showName) bodyLines.push(`Nombre: ${name}`);\n if (showEmail) bodyLines.push(`Email: ${email}`);\n if (showPhone) bodyLines.push(`Tel\u00E9fono: ${phone}`);\n bodyLines.push(\"\");\n if (showMessage) bodyLines.push(message);\n\n const body = bodyLines.join(\"\\n\");\n const to = \"x@xscriptor.com\";\n const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(\n subject\n )}&body=${encodeURIComponent(body)}`;\n\n window.location.href = mailto;\n setStatus({ ok: true, msg: submitSuccessMessage });\n }\n\n const radiusMap = {\n rounded: \"0.5rem\",\n square: \"0\",\n } as const;\n\n const alignmentMap = {\n left: \"flex-start\",\n right: \"flex-end\",\n } as const;\n\n // Variables CSS din\u00E1micas para estilos configurables\n const customStyles = {\n ...(decorativeXColor && { \"--decorative-x-color\": decorativeXColor }),\n ...(labelColor && { \"--label-color\": labelColor }),\n ...(wrapperBackgroundColor && { \"--wrapper-bg-color\": wrapperBackgroundColor }),\n ...(wrapperBorderColor && { \"--wrapper-border-color\": wrapperBorderColor }),\n ...(wrapperBorderWidth && { \"--wrapper-border-width\": wrapperBorderWidth }),\n \"--wrapper-radius\": radiusMap[wrapperBorderRadius],\n \"--wrapper-border-style\": wrapperBorderStyle,\n ...(fieldBorderColor && { \"--field-border-color\": fieldBorderColor }),\n ...(fieldBorderWidth && { \"--field-border-width\": fieldBorderWidth }),\n \"--field-radius\": radiusMap[fieldBorderRadius],\n \"--field-border-style\": fieldBorderStyle,\n ...(buttonColor && { \"--btn-bg-color\": buttonColor }),\n ...(buttonBorderColor && { \"--btn-border-color\": buttonBorderColor }),\n ...(buttonBorderWidth && { \"--btn-border-width\": buttonBorderWidth }),\n \"--btn-radius\": radiusMap[buttonBorderRadius],\n \"--btn-border-style\": buttonBorderStyle,\n \"--btn-alignment\": alignmentMap[buttonAlignment],\n ...(buttonHoverColor && { \"--btn-hover-bg-color\": buttonHoverColor }),\n ...(buttonHoverTextColor && { \"--btn-hover-text-color\": buttonHoverTextColor }),\n ...(buttonHoverBorderColor && { \"--btn-hover-border-color\": buttonHoverBorderColor }),\n ...(buttonTextColor && { \"--btn-text-color\": buttonTextColor }),\n ...(statusSuccessColor && { \"--status-ok-color\": statusSuccessColor }),\n ...(statusErrorColor && { \"--status-error-color\": statusErrorColor }),\n } as React.CSSProperties;\n\n return (\n <div className={`${styles.wrapper} ${styles[size]} ${decorativeX ? styles.withDecorativeX : \"\"}`} style={customStyles}>\n {decorativeX && <div className={styles.decorativeXTop}>\u2715</div>}\n <form onSubmit={onSubmit} className={`${styles.form} ${styles[layout]}`} noValidate>\n <div className={styles.honeypot} aria-hidden=\"true\">\n <label htmlFor=\"website\">Tu web</label>\n <input id=\"website\" name=\"website\" type=\"text\" tabIndex={-1} autoComplete=\"off\" />\n </div>\n\n {(showName || showEmail || showPhone) && (\n <div className={styles.row}>\n {showName && (\n <div className={styles.field}>\n <label htmlFor=\"name\">Nombre</label>\n <input id=\"name\" name=\"name\" type=\"text\" placeholder={namePlaceholder} required maxLength={80} />\n </div>\n )}\n {showEmail && (\n <div className={styles.field}>\n <label htmlFor=\"email\">Email</label>\n <input id=\"email\" name=\"email\" type=\"email\" inputMode=\"email\" placeholder={emailPlaceholder} required />\n </div>\n )}\n {showPhone && (\n <div className={styles.field}>\n <label htmlFor=\"phone\">Tel\u00E9fono</label>\n <input id=\"phone\" name=\"phone\" type=\"tel\" inputMode=\"tel\" placeholder={phonePlaceholder} required maxLength={20} />\n </div>\n )}\n </div>\n )}\n\n {showSubject && (\n <div className={styles.field}>\n <label htmlFor=\"subject\">Asunto</label>\n <input id=\"subject\" name=\"subject\" type=\"text\" placeholder={subjectPlaceholder} required maxLength={120} />\n </div>\n )}\n\n {showMessage && (\n <div className={styles.field}>\n <label htmlFor=\"message\">Mensaje</label>\n <textarea id=\"message\" name=\"message\" rows={6} placeholder={messagePlaceholder} required maxLength={3000} />\n </div>\n )}\n\n <div className={styles.buttoncontainer}>\n <button type=\"submit\" className={styles.button}>\n Enviar\n </button>\n </div>\n\n <p className={`${styles.status} ${status?.ok ? styles.statusOk : status === null ? \"\" : styles.statusError}`} role=\"status\" aria-live=\"polite\">\n {status?.msg}\n </p>\n </form>\n {decorativeX && <div className={styles.decorativeXBottom}>\u2715</div>}\n </div>\n );\n}", "/* Tama\u00F1os din\u00E1micos base */\n.wrapper {\n --input-padding: .65rem .9rem;\n --font-size: 16px;\n --form-gap: 1.25rem;\n --row-gap: .85rem;\n --field-gap: .45rem;\n --button-min-width: 140px;\n --label-color: inherit;\n --wrapper-bg-color: transparent;\n --wrapper-border-color: transparent;\n --wrapper-border-width: 0px;\n --wrapper-border-style: solid;\n --wrapper-radius: .5rem;\n --field-border-color: var(--border, #ccc);\n --field-border-width: 1px;\n --field-border-style: solid;\n --field-radius: .5rem;\n --btn-bg-color: var(--bg, #333);\n --btn-text-color: var(--text, #fff);\n --btn-border-color: transparent;\n --btn-border-width: 0px;\n --btn-border-style: solid;\n --btn-radius: .5rem;\n --btn-alignment: flex-start;\n --btn-hover-bg-color: var(--btn-bg-color);\n --btn-hover-text-color: var(--btn-text-color);\n --btn-hover-border-color: var(--btn-border-color);\n --status-ok-color: #1fa37a;\n --status-error-color: #d16a6a;\n \n max-width: 900px;\n margin: 0 auto;\n padding: 2rem 1rem;\n background-color: var(--wrapper-bg-color);\n border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);\n border-radius: var(--wrapper-radius);\n}\n\n/* Modificadores de tama\u00F1o */\n.small {\n --input-padding: .35rem .55rem;\n --font-size: 13px;\n --form-gap: .75rem;\n --row-gap: .6rem;\n --field-gap: .3rem;\n --button-min-width: 118px;\n}\n.medium {\n --input-padding: .5rem .7rem;\n --font-size: 15px;\n --form-gap: 1rem;\n --row-gap: .7rem;\n --field-gap: .4rem;\n --button-min-width: 130px;\n}\n.large {\n --input-padding: 1rem 1.2rem;\n --font-size: 18px;\n --form-gap: 1.5rem;\n --row-gap: 1rem;\n --field-gap: .5rem;\n --button-min-width: 150px;\n}\n\n.form {\n display: grid;\n gap: var(--form-gap);\n max-width: 100%;\n}\n\n/* Layouts */\n.row {\n display: grid;\n gap: var(--row-gap);\n}\n\n.grid .row {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n\n.vertical .row {\n grid-template-columns: 1fr;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n}\n\n.field label {\n font-size: calc(var(--font-size) - 2px);\n font-weight: 500;\n color: var(--label-color);\n}\n\n.field input,\n.field textarea {\n width: 100%;\n padding: var(--input-padding);\n border: var(--field-border-width) var(--field-border-style) var(--field-border-color);\n border-radius: var(--field-radius);\n font-size: var(--font-size);\n box-sizing: border-box;\n font-family: inherit;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n color: #888;\n}\n\n.buttoncontainer {\n display: flex;\n justify-content: var(--btn-alignment);\n margin-top: 0.25rem;\n}\n\n.button {\n padding: var(--input-padding);\n border-radius: var(--btn-radius);\n border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);\n background-color: var(--btn-bg-color);\n color: var(--btn-text-color);\n cursor: pointer;\n font-size: var(--font-size);\n font-weight: 600;\n min-width: var(--button-min-width);\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;\n}\n\n.button:hover {\n background-color: var(--btn-hover-bg-color);\n color: var(--btn-hover-text-color);\n border-color: var(--btn-hover-border-color);\n opacity: 0.95;\n}\n\n.status {\n min-height: 1.5rem;\n font-size: calc(var(--font-size) - 2px);\n margin-top: 0.25rem;\n}\n\n.statusOk { color: var(--status-ok-color); }\n.statusError { color: var(--status-error-color); }\n\n.honeypot {\n position: absolute;\n left: -9999px;\n top: -9999px;\n}\n\n.withDecorativeX {\n position: relative;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.decorativeXTop,\n.decorativeXBottom {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.5rem;\n font-weight: 300;\n color: var(--decorative-x-color, currentColor);\n opacity: 1;\n pointer-events: none;\n background-color: var(--wrapper-bg-color, transparent);\n padding: 0 0.3rem;\n line-height: 1;\n z-index: 1;\n}\n\n.decorativeXTop {\n top: 0;\n transform: translate(-50%, -50%);\n}\n\n.decorativeXBottom {\n bottom: 0;\n transform: translate(-50%, 50%);\n}", "\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport styles from \"./XNewsletter.module.css\";\n\nexport interface XNewsletterProps {\n title?: string;\n placeholder?: string;\n buttonText?: string;\n termsText?: string;\n termsLinkText?: string;\n successMessage?: string;\n errorMessage?: string;\n termsErrorMessage?: string;\n termsLink?: string;\n apiRoute: string;\n method?: \"POST\" | \"GET\" | \"PUT\";\n payloadType?: \"formData\" | \"json\";\n layout?: \"horizontal\" | \"vertical\";\n accentColor?: string;\n textColor?: string;\n borderColor?: string;\n buttonTextColor?: string;\n containerClassName?: string; // Para clases extra desde afuera si las necesitas\n}\n\nexport default function XNewsletter({\n title = \"Recibe poes\u00EDa y reflexiones\",\n placeholder = \"tu@email.com\",\n buttonText = \"Suscribirse\",\n termsText = \"Acepto\",\n termsLinkText = \"t\u00E9rminos\",\n successMessage = \"\u00A1Bienvenido(a)!\",\n errorMessage = \"Algo sali\u00F3 mal. Por favor, intenta de nuevo.\",\n termsErrorMessage = \"Debes aceptar los t\u00E9rminos y condiciones para suscribirte...\",\n termsLink = \"/terminos-y-condiciones\",\n apiRoute,\n method = \"POST\",\n payloadType = \"formData\",\n layout = \"horizontal\",\n accentColor = \"var(--accent)\",\n textColor = \"var(--text)\",\n borderColor = \"var(--border)\",\n buttonTextColor = \"var(--accent-text)\",\n containerClassName = \"w-full max-w-4xl mx-auto px-4 py-6\",\n}: XNewsletterProps) {\n const [email, setEmail] = useState(\"\");\n const [acceptedTerms, setAcceptedTerms] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setMessage(\"\");\n\n if (!acceptedTerms) {\n setMessage(termsErrorMessage);\n return;\n }\n\n setIsLoading(true);\n\n try {\n let bodyData: BodyInit | null | undefined = null;\n let headers: HeadersInit = {};\n\n if (payloadType === \"formData\") {\n const formData = new FormData();\n formData.append(\"email\", email);\n bodyData = formData;\n } else if (payloadType === \"json\") {\n bodyData = JSON.stringify({ email });\n headers = { \"Content-Type\": \"application/json\" };\n }\n\n const response = await fetch(apiRoute, {\n method,\n headers,\n body: method !== \"GET\" ? bodyData : undefined,\n cache: \"no-store\",\n });\n\n const data = await response.json();\n\n if (response.ok && data.success) {\n setMessage(data.message || successMessage);\n setEmail(\"\");\n setAcceptedTerms(false);\n } else {\n setMessage(data.error || errorMessage);\n }\n } catch {\n setMessage(errorMessage);\n } finally {\n setIsLoading(false);\n }\n };\n\n // Convertimos las props de colores a Variables CSS nativas.\n const customCssVariables = {\n \"--nws-accent\": accentColor,\n \"--nws-text\": textColor,\n \"--nws-border\": borderColor,\n \"--nws-btn-text\": buttonTextColor,\n } as React.CSSProperties;\n\n return (\n <div\n className={`${styles.container} ${containerClassName}`}\n style={customCssVariables}\n >\n <form\n onSubmit={handleSubmit}\n className={`${styles.form} ${styles[layout]}`}\n >\n {/* T\u00EDtulo */}\n {title && <span className={styles.title}>{title}</span>}\n\n {/* Input */}\n <input\n type=\"email\"\n placeholder={placeholder}\n className={styles.input}\n aria-label=\"email\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n required\n disabled={isLoading}\n />\n\n {/* Grupo Acciones (Checkbox + Bot\u00F3n) */}\n <div\n className={`${styles.actions} ${\n layout === \"horizontal\"\n ? styles.actionsHorizontal\n : styles.actionsVertical\n }`}\n >\n {/* Checkbox */}\n <label className={styles.checkboxLabel}>\n <input\n type=\"checkbox\"\n className={styles.checkbox}\n checked={acceptedTerms}\n onChange={(e) => setAcceptedTerms(e.target.checked)}\n required\n disabled={isLoading}\n />\n <span>\n {termsText}{\" \"}\n <Link\n href={termsLink}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles.termsLink}\n >\n {termsLinkText}\n </Link>\n </span>\n </label>\n\n {/* Bot\u00F3n */}\n <button\n type=\"submit\"\n disabled={isLoading}\n className={styles.button}\n >\n {isLoading ? \"Enviando...\" : buttonText}\n </button>\n </div>\n </form>\n\n {/* Mensaje */}\n {message && (\n <p\n className={`${styles.message} ${\n layout === \"horizontal\"\n ? styles.messageHorizontal\n : styles.messageVertical\n }`}\n >\n {message}\n </p>\n )}\n </div>\n );\n}", "/* XNewsletter.module.css */\n\n.container {\n /* Estas variables recibir\u00E1n sus valores desde React */\n --nws-accent: var(--accent);\n --nws-text: var(--text);\n --nws-border: var(--border);\n --nws-btn-text: var(--accent-text);\n \n width: 100%;\n font-family: \"EB Garamond\", serif;\n}\n\n/* --- Layouts Base --- */\n.form {\n display: flex;\n gap: 1rem;\n}\n\n.horizontal {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 768px) {\n .horizontal {\n flex-direction: row;\n }\n}\n\n.vertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n max-width: 24rem; /* equivalente a max-w-sm */\n margin: 0 auto;\n}\n\n/* --- Elementos --- */\n.title {\n font-size: 0.875rem;\n white-space: nowrap;\n font-weight: 500;\n color: var(--nws-text);\n}\n\n.input {\n width: 100%;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-border);\n background-color: transparent;\n outline: none;\n transition: border-color 0.2s ease;\n color: var(--nws-text);\n caret-color: var(--nws-accent);\n font-family: inherit;\n}\n\n.horizontal .input {\n /* En escritorio, el input horizontal es de tama\u00F1o fijo (md:w-64) */\n}\n@media (min-width: 768px) {\n .horizontal .input {\n width: 16rem; \n }\n}\n\n.input:focus {\n border-color: var(--nws-accent);\n}\n\n/* --- Checkbox y Bot\u00F3n --- */\n.actions {\n display: flex;\n gap: 1rem;\n}\n\n.actionsHorizontal {\n flex-direction: row;\n align-items: center;\n}\n\n.actionsVertical {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n}\n\n.checkboxLabel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n white-space: nowrap;\n cursor: pointer;\n color: var(--nws-text);\n}\n\n.checkboxLabel span {\n opacity: 0.7;\n}\n\n.checkbox {\n height: 0.875rem;\n width: 0.875rem;\n border-radius: 0.125rem;\n cursor: pointer;\n accent-color: var(--nws-accent);\n}\n\n.termsLink {\n text-decoration: underline;\n color: var(--nws-accent);\n transition: opacity 0.2s ease;\n}\n\n.termsLink:hover {\n opacity: 1;\n}\n\n.button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--nws-accent);\n color: var(--nws-accent);\n background-color: transparent;\n transition: all 0.2s ease;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.button:hover:not(:disabled) {\n background-color: var(--nws-accent);\n color: var(--nws-btn-text);\n}\n\n.button:disabled, .input:disabled, .checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.actionsVertical .button {\n width: 100%;\n}\n\n/* --- Feedback Message --- */\n.message {\n margin-top: 0.75rem;\n font-size: 0.75rem;\n color: var(--nws-accent);\n}\n\n.messageHorizontal {\n text-align: center;\n}\n\n.messageVertical {\n text-align: left;\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["wrapper", "small", "medium", "large", "form", "row", "grid", "vertical", "field", "buttoncontainer", "button", "status", "statusOk", "statusError", "honeypot", "withDecorativeX", "decorativeXTop", "decorativeXBottom", "import_react", "container", "form", "horizontal", "vertical", "title", "input", "actions", "actionsHorizontal", "actionsVertical", "checkboxLabel", "checkbox", "termsLink", "button", "message", "messageHorizontal", "messageVertical", "import_jsx_runtime", "Link"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export interface XContactFormProps {
|
|
2
|
+
showName?: boolean;
|
|
3
|
+
showEmail?: boolean;
|
|
4
|
+
showPhone?: boolean;
|
|
5
|
+
showSubject?: boolean;
|
|
6
|
+
showMessage?: boolean;
|
|
7
|
+
namePlaceholder?: string;
|
|
8
|
+
emailPlaceholder?: string;
|
|
9
|
+
phonePlaceholder?: string;
|
|
10
|
+
subjectPlaceholder?: string;
|
|
11
|
+
messagePlaceholder?: string;
|
|
12
|
+
labelColor?: string;
|
|
13
|
+
wrapperBackgroundColor?: string;
|
|
14
|
+
wrapperBorderColor?: string;
|
|
15
|
+
wrapperBorderWidth?: string;
|
|
16
|
+
wrapperBorderRadius?: "rounded" | "square";
|
|
17
|
+
wrapperBorderStyle?: "solid" | "dashed" | "dotted";
|
|
18
|
+
fieldBorderColor?: string;
|
|
19
|
+
fieldBorderWidth?: string;
|
|
20
|
+
fieldBorderRadius?: "rounded" | "square";
|
|
21
|
+
fieldBorderStyle?: "solid" | "dashed" | "dotted";
|
|
22
|
+
buttonColor?: string;
|
|
23
|
+
buttonBorderColor?: string;
|
|
24
|
+
buttonBorderWidth?: string;
|
|
25
|
+
buttonBorderRadius?: "rounded" | "square";
|
|
26
|
+
buttonBorderStyle?: "solid" | "dashed" | "dotted";
|
|
27
|
+
buttonHoverColor?: string;
|
|
28
|
+
buttonHoverTextColor?: string;
|
|
29
|
+
buttonHoverBorderColor?: string;
|
|
30
|
+
buttonTextColor?: string;
|
|
31
|
+
buttonAlignment?: "left" | "right";
|
|
32
|
+
requiredFieldsMessage?: string;
|
|
33
|
+
honeypotMessage?: string;
|
|
34
|
+
submitSuccessMessage?: string;
|
|
35
|
+
statusSuccessColor?: string;
|
|
36
|
+
statusErrorColor?: string;
|
|
37
|
+
decorativeX?: boolean;
|
|
38
|
+
decorativeXColor?: string;
|
|
39
|
+
size?: "small" | "medium" | "large";
|
|
40
|
+
layout?: "vertical" | "grid";
|
|
41
|
+
}
|
|
42
|
+
export default function XContactForm({ showName, showEmail, showPhone, showSubject, showMessage, namePlaceholder, emailPlaceholder, phonePlaceholder, subjectPlaceholder, messagePlaceholder, labelColor, wrapperBackgroundColor, wrapperBorderColor, wrapperBorderWidth, wrapperBorderRadius, wrapperBorderStyle, fieldBorderColor, fieldBorderWidth, fieldBorderRadius, fieldBorderStyle, buttonColor, buttonBorderColor, buttonBorderWidth, buttonBorderRadius, buttonBorderStyle, buttonHoverColor, buttonHoverTextColor, buttonHoverBorderColor, buttonTextColor, buttonAlignment, requiredFieldsMessage, honeypotMessage, submitSuccessMessage, statusSuccessColor, statusErrorColor, decorativeX, decorativeXColor, size, layout, }: XContactFormProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface XNewsletterProps {
|
|
2
|
+
title?: string;
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
buttonText?: string;
|
|
5
|
+
termsText?: string;
|
|
6
|
+
termsLinkText?: string;
|
|
7
|
+
successMessage?: string;
|
|
8
|
+
errorMessage?: string;
|
|
9
|
+
termsErrorMessage?: string;
|
|
10
|
+
termsLink?: string;
|
|
11
|
+
apiRoute: string;
|
|
12
|
+
method?: "POST" | "GET" | "PUT";
|
|
13
|
+
payloadType?: "formData" | "json";
|
|
14
|
+
layout?: "horizontal" | "vertical";
|
|
15
|
+
accentColor?: string;
|
|
16
|
+
textColor?: string;
|
|
17
|
+
borderColor?: string;
|
|
18
|
+
buttonTextColor?: string;
|
|
19
|
+
containerClassName?: string;
|
|
20
|
+
}
|
|
21
|
+
export default function XNewsletter({ title, placeholder, buttonText, termsText, termsLinkText, successMessage, errorMessage, termsErrorMessage, termsLink, apiRoute, method, payloadType, layout, accentColor, textColor, borderColor, buttonTextColor, containerClassName, }: XNewsletterProps): import("react/jsx-runtime").JSX.Element;
|