@xscriptor/xcomponents 0.1.1 → 0.1.2
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/dist/{chunk-TKT37LIX.mjs → chunk-BXVG4SYP.mjs} +101 -39
- package/dist/chunk-BXVG4SYP.mjs.map +7 -0
- package/dist/{chunk-UROP4J6G.mjs → chunk-FW47JGYZ.mjs} +122 -29
- package/dist/chunk-FW47JGYZ.mjs.map +7 -0
- package/dist/{chunk-34NJCJUI.mjs → chunk-IK2UCTCM.mjs} +46 -15
- package/dist/chunk-IK2UCTCM.mjs.map +7 -0
- package/dist/{chunk-2H7TVDE7.mjs → chunk-WE7QZGVP.mjs} +45 -14
- package/dist/chunk-WE7QZGVP.mjs.map +7 -0
- package/dist/{chunk-MYFPSHSQ.mjs → chunk-XB3UGHSF.mjs} +94 -32
- package/dist/chunk-XB3UGHSF.mjs.map +7 -0
- package/dist/{chunk-TG3B4GAW.mjs → chunk-ZDMG7X6H.mjs} +57 -26
- package/dist/{chunk-TG3B4GAW.mjs.map → chunk-ZDMG7X6H.mjs.map} +4 -4
- package/dist/components/content/index.css +64 -65
- package/dist/components/content/index.css.map +4 -4
- package/dist/components/content/index.js +45 -14
- package/dist/components/content/index.js.map +4 -4
- package/dist/components/content/index.mjs +1 -1
- package/dist/components/forms/index.css +113 -115
- package/dist/components/forms/index.css.map +4 -4
- package/dist/components/forms/index.js +100 -38
- package/dist/components/forms/index.js.map +4 -4
- package/dist/components/forms/index.mjs +1 -1
- package/dist/components/gallery/index.css +107 -110
- package/dist/components/gallery/index.css.map +4 -4
- package/dist/components/gallery/index.js +93 -31
- package/dist/components/gallery/index.js.map +4 -4
- package/dist/components/gallery/index.mjs +1 -1
- package/dist/components/index.css +536 -534
- package/dist/components/index.css.map +4 -4
- package/dist/components/index.js +459 -149
- package/dist/components/index.js.map +4 -4
- package/dist/components/index.mjs +6 -6
- package/dist/components/layout/index.css +89 -81
- package/dist/components/layout/index.css.map +4 -4
- package/dist/components/layout/index.js +121 -28
- package/dist/components/layout/index.js.map +4 -4
- package/dist/components/layout/index.mjs +1 -1
- package/dist/components/navigation/index.css +120 -120
- package/dist/components/navigation/index.css.map +4 -4
- package/dist/components/navigation/index.js +56 -25
- package/dist/components/navigation/index.js.map +4 -4
- package/dist/components/navigation/index.mjs +1 -1
- package/dist/components/social/index.css +43 -43
- package/dist/components/social/index.css.map +4 -4
- package/dist/components/social/index.js +44 -13
- package/dist/components/social/index.js.map +4 -4
- package/dist/components/social/index.mjs +1 -1
- package/dist/index.css +536 -534
- package/dist/index.css.map +4 -4
- package/dist/index.js +459 -149
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +6 -6
- package/package.json +2 -1
- package/dist/chunk-2H7TVDE7.mjs.map +0 -7
- package/dist/chunk-34NJCJUI.mjs.map +0 -7
- package/dist/chunk-MYFPSHSQ.mjs.map +0 -7
- package/dist/chunk-TKT37LIX.mjs.map +0 -7
- package/dist/chunk-UROP4J6G.mjs.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/navigation/index.ts", "../../../src/components/navigation/xnavbar/XNavbar.tsx", "../../../src/components/navigation/xnavbar/XNavbar.module.css"],
|
|
4
|
-
"sourcesContent": ["export { XNavbar } from \"./xnavbar\";\nexport type {\n XNavbarProps,\n NavLinkItem,\n ThemeToggleIcons,\n IconRenderer,\n} from \"./xnavbar\";\n", "\"use client\";\n\nimport { useEffect, useState, ReactNode, CSSProperties } from \"react\";\nimport { motion, Variants } from \"framer-motion\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport styles from \"./XNavbar.module.css\";\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Tipos p\u00FAblicos \u2014 exportados para que el consumidor pueda tipear sus datos\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport type NavLinkItem = {\n /** Ruta destino */\n url: string;\n /** Texto visible */\n title: string;\n /** Si es true abre en pesta\u00F1a nueva y muestra el indicador \u2197 */\n external?: boolean;\n};\n\n/**\n * ReactNode est\u00E1tico O funci\u00F3n de render (size, color?) => ReactNode.\n * La funci\u00F3n recibe el tama\u00F1o y el color vigente para que el \u00EDcono\n * pueda adaptarse din\u00E1micamente a los props del navbar.\n */\nexport type IconRenderer = ReactNode | ((size: number, color?: string) => ReactNode);\n\nexport type ThemeToggleIcons = {\n /** \u00CDcono/renderer hacia tema oscuro (ReactNode o funci\u00F3n) */\n toDark: IconRenderer;\n /** \u00CDcono/renderer hacia tema claro (ReactNode o funci\u00F3n) */\n toLight: IconRenderer;\n};\n\nexport type XNavbarProps = {\n // \u2500\u2500 Navegaci\u00F3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Links que aparecen a la izquierda del logo en desktop */\n linksLeft?: NavLinkItem[];\n /** Links que aparecen a la derecha del logo en desktop */\n linksRight?: NavLinkItem[];\n\n // \u2500\u2500 Logo central \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Contenido del bot\u00F3n central (texto o JSX). Por defecto: \"X\" */\n logo?: ReactNode;\n /** Si true el logo act\u00FAa como toggle de tema (comportamiento original). Default: true */\n logoAsThemeToggle?: boolean;\n /** Callback custom si logoAsThemeToggle es false */\n onLogoClick?: () => void;\n\n // \u2500\u2500 Toggle de tema \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** \u00CDconos para el toggle de tema. Si no se pasa, no se mostrar\u00E1 hint de \u00EDcono */\n themeIcons?: ThemeToggleIcons;\n /** Tema inicial. Default: \"light\" */\n defaultTheme?: \"light\" | \"dark\";\n /** Key de localStorage para persistencia del tema. Default: \"theme\" */\n storageKey?: string;\n\n // \u2500\u2500 Color de los enlaces de navegaci\u00F3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color base de los enlaces (Inicio, Contacto, etc.). Default: var(--text) */\n linkColor?: string;\n /** Color al hacer hover sobre los enlaces. Default: opacidad reducida del linkColor */\n linkHoverColor?: string;\n /** Color del borde inferior del enlace activo. Default: linkColor */\n linkActiveColor?: string;\n\n // \u2500\u2500 Color y tama\u00F1o de \u00EDconos theme-toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color base de los \u00EDconos. Acepta cualquier valor CSS: hex, hsl, \"var(--accent)\", etc.\n * Si no se pasa, los \u00EDconos heredan el color del texto (currentColor). */\n iconColor?: string;\n /** Color que toman los \u00EDconos al hacer hover sobre el logo. Default: iconColor */\n iconHoverColor?: string;\n /** Tama\u00F1o en px que se pasa a IconRenderer cuando es funci\u00F3n. Default: 22 */\n iconSize?: number;\n\n // \u2500\u2500 Hamburguesa \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color de las 3 barras (y la X de cierre m\u00F3vil). Acepta cualquier valor CSS. Default: var(--text) */\n hamburgerColor?: string;\n /** Ancho de las barras. Cualquier unidad CSS. Default: \"2rem\" */\n hamburgerBarWidth?: string;\n /** Grosor (altura) de las barras. Cualquier unidad CSS. Default: \"3px\" */\n hamburgerBarThickness?: string;\n\n // \u2500\u2500 Variables CSS personalizadas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Inyecta variables CSS extra directamente en el style del <header>.\n * \u00DAtil para pasar tokens del tema: { '--xnav-icon-color': 'var(--accent)' } */\n cssVars?: Record<string, string>;\n\n // \u2500\u2500 Labels de accesibilidad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** aria-label del bot\u00F3n hamburguesa cuando est\u00E1 cerrado. Default: \"Abrir men\u00FA\" */\n labelOpen?: string;\n /** aria-label del bot\u00F3n hamburguesa cuando est\u00E1 abierto. Default: \"Cerrar men\u00FA\" */\n labelClose?: string;\n /** Texto del bot\u00F3n de tema oscuro en men\u00FA m\u00F3vil. Default: \"Oscuro\" */\n labelDark?: string;\n /** Texto del bot\u00F3n de tema claro en men\u00FA m\u00F3vil. Default: \"Claro\" */\n labelLight?: string;\n\n // \u2500\u2500 Estilos adicionales \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** className extra que se a\u00F1ade al <header> */\n className?: string;\n};\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Variantes de animaci\u00F3n (id\u00E9nticas al navbar original)\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst iconTrayRightVariants: Variants = {\n hidden: { opacity: 0, x: -6, pointerEvents: \"none\" },\n visible: { opacity: 1, x: 0, pointerEvents: \"none\", transition: { duration: 0.18 } },\n};\nconst iconTrayLeftVariants: Variants = {\n hidden: { opacity: 0, x: 6, pointerEvents: \"none\" },\n visible: { opacity: 1, x: 0, pointerEvents: \"none\", transition: { duration: 0.18 } },\n};\n\nconst topVariants: Variants = { closed: { rotate: 0 }, opened: { rotate: 45 } };\nconst centerVariants: Variants = { closed: { opacity: 1 }, opened: { opacity: 0 } };\nconst bottomVariants: Variants = { closed: { rotate: 0 }, opened: { rotate: -45 } };\n\nconst listVariants: Variants = {\n closed: { x: \"100vw\" },\n opened: { x: 0, transition: { when: \"beforeChildren\", staggerChildren: 0.02 } },\n};\nconst itemVariants: Variants = {\n closed: { x: -10, opacity: 0 },\n opened: { x: 0, opacity: 1 },\n};\n\n/** Renderiza un IconRenderer: si es funci\u00F3n la llama con (size, color?), si es ReactNode lo devuelve tal cual. */\nfunction renderIcon(\n icon: IconRenderer,\n size: number,\n color?: string\n): ReactNode {\n if (typeof icon === \"function\") return icon(size, color);\n return icon;\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Sub-componente NavLink (interno)\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ntype NavLinkProps = {\n link: NavLinkItem;\n onClick?: () => void;\n mobile?: boolean;\n};\n\nfunction XNavLink({ link, onClick, mobile }: NavLinkProps) {\n const pathname = usePathname();\n const isActive =\n link.url === \"/\" ? pathname === \"/\" : pathname?.startsWith(link.url);\n\n const baseClass = mobile ? styles.mobileNavLink : styles.navLink;\n const activeClass = mobile ? styles.mobileNavLinkActive : styles.navLinkActive;\n const externalClass = link.external ? styles.navLinkExternal : \"\";\n\n return (\n <Link\n href={link.url}\n onClick={onClick}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n aria-label={`Ir a ${link.title}`}\n aria-current={isActive ? \"page\" : undefined}\n className={[baseClass, isActive ? activeClass : \"\", externalClass]\n .filter(Boolean)\n .join(\" \")}\n >\n {link.title}\n </Link>\n );\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Componente principal XNavbar\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport default function XNavbar({\n linksLeft = [],\n linksRight = [],\n logo = \"X\",\n logoAsThemeToggle = true,\n onLogoClick,\n themeIcons,\n defaultTheme = \"light\",\n storageKey = \"theme\",\n linkColor,\n linkHoverColor,\n linkActiveColor,\n iconColor,\n iconHoverColor,\n iconSize = 22,\n hamburgerColor,\n hamburgerBarWidth,\n hamburgerBarThickness,\n cssVars,\n labelOpen = \"Abrir men\u00FA\",\n labelClose = \"Cerrar men\u00FA\",\n labelDark = \"Oscuro\",\n labelLight = \"Claro\",\n className,\n}: XNavbarProps) {\n const [open, setOpen] = useState(false);\n const [hoverX, setHoverX] = useState(false);\n const [theme, setTheme] = useState<\"light\" | \"dark\">(defaultTheme);\n\n // Persistir tema\n useEffect(() => {\n const saved = (typeof window !== \"undefined\" &&\n localStorage.getItem(storageKey)) as \"light\" | \"dark\" | null;\n applyTheme(saved ?? defaultTheme);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n function applyTheme(t: \"light\" | \"dark\") {\n setTheme(t);\n const root = document.documentElement;\n if (t === \"dark\") root.setAttribute(\"data-theme\", \"dark\");\n else root.removeAttribute(\"data-theme\");\n localStorage.setItem(storageKey, t);\n }\n\n function toggleTheme() {\n applyTheme(theme === \"dark\" ? \"light\" : \"dark\");\n }\n\n // Bloquear scroll \u2014 usamos documentElement para no tocar document.body\n useEffect(() => {\n document.documentElement.style.overflow = open ? \"hidden\" : \"\";\n return () => { document.documentElement.style.overflow = \"\"; };\n }, [open]);\n\n // Cerrar con ESC\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [open]);\n\n const allLinks = [...linksLeft, ...linksRight];\n\n // \u2500\u2500 CSS vars inyectadas en el <header> via inline style \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Usando \"--xnav-*\" como namespace para no colisionar con vars globales.\n const headerStyle = {\n ...(linkColor && { \"--xnav-link-color\" : linkColor }),\n ...(linkHoverColor && { \"--xnav-link-hover\" : linkHoverColor }),\n ...(linkActiveColor && { \"--xnav-link-active\" : linkActiveColor }),\n ...(iconColor && { \"--xnav-icon-color\" : iconColor }),\n ...(iconHoverColor && { \"--xnav-icon-hover\" : iconHoverColor }),\n ...(hamburgerColor && { \"--xnav-bar-color\" : hamburgerColor }),\n ...(hamburgerBarWidth && { \"--xnav-bar-w\" : hamburgerBarWidth }),\n ...(hamburgerBarThickness && { \"--xnav-bar-h\" : hamburgerBarThickness }),\n ...cssVars,\n } as CSSProperties;\n\n // Acci\u00F3n del logo central\n const handleLogoClick = () => {\n if (logoAsThemeToggle) {\n toggleTheme();\n } else {\n onLogoClick?.();\n }\n };\n\n const logoAriaLabel = logoAsThemeToggle\n ? `Cambiar a tema ${theme === \"dark\" ? \"claro\" : \"oscuro\"}`\n : undefined;\n\n const logoTitle = logoAsThemeToggle\n ? theme === \"dark\"\n ? \"Cambiar a tema claro\"\n : \"Cambiar a tema oscuro\"\n : undefined;\n\n return (\n <header\n className={[styles.header, className].filter(Boolean).join(\" \")}\n style={headerStyle}\n role=\"banner\"\n >\n {/* \u2500\u2500 Desktop \u2500\u2500 */}\n <nav className={styles.desktopNav} aria-label=\"Navegaci\u00F3n principal\">\n <div className={styles.desktopLinksLeft}>\n {linksLeft.map((link) => (\n <XNavLink key={link.url + link.title} link={link} />\n ))}\n </div>\n\n {/* Bot\u00F3n logo central */}\n <div className={styles.logoSlot}>\n <div\n className={styles.logoWrapper}\n onMouseEnter={() => setHoverX(true)}\n onMouseLeave={() => setHoverX(false)}\n >\n <button\n type=\"button\"\n onClick={handleLogoClick}\n aria-label={logoAriaLabel}\n title={logoTitle}\n className={styles.logoBtn}\n >\n {logo}\n </button>\n\n {/* \u00CDcono hint al hover (solo si se pasan themeIcons y el logo es toggle de tema) */}\n {logoAsThemeToggle && themeIcons && (\n <>\n {theme === \"light\" ? (\n <motion.div\n initial={false}\n animate={hoverX ? \"visible\" : \"hidden\"}\n variants={iconTrayRightVariants}\n className={`${styles.iconTray} ${styles.iconTrayRight}`}\n style={{\n color:\n (hoverX ? iconHoverColor ?? iconColor : iconColor) ||\n undefined,\n }}\n aria-hidden\n >\n {renderIcon(themeIcons.toDark, iconSize, iconColor)}\n </motion.div>\n ) : (\n <motion.div\n initial={false}\n animate={hoverX ? \"visible\" : \"hidden\"}\n variants={iconTrayLeftVariants}\n className={`${styles.iconTray} ${styles.iconTrayLeft}`}\n style={{\n color:\n (hoverX ? iconHoverColor ?? iconColor : iconColor) ||\n undefined,\n }}\n aria-hidden\n >\n {renderIcon(themeIcons.toLight, iconSize, iconColor)}\n </motion.div>\n )}\n </>\n )}\n </div>\n </div>\n\n <div className={styles.desktopLinksRight}>\n {linksRight.map((link) => (\n <XNavLink key={link.url + link.title} link={link} />\n ))}\n </div>\n </nav>\n\n {/* \u2500\u2500 Mobile: bot\u00F3n hamburguesa \u2500\u2500 */}\n <div className={styles.mobileToggle}>\n <button\n aria-label={open ? labelClose : labelOpen}\n aria-expanded={open}\n aria-controls=\"xnavbar-mobile-menu\"\n onClick={() => setOpen((p) => !p)}\n className={styles.hamburgerBtn}\n title={open ? labelClose : labelOpen}\n >\n <motion.div\n variants={topVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n style={{ originX: \"left\" }}\n aria-hidden\n />\n <motion.div\n variants={centerVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n aria-hidden\n />\n <motion.div\n variants={bottomVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n style={{ originX: \"left\" }}\n aria-hidden\n />\n </button>\n </div>\n\n {/* \u2500\u2500 Mobile overlay \u2014 position:fixed, sin portal, sin document.body \u2500\u2500 */}\n {open && (\n <motion.div\n id=\"xnavbar-mobile-menu\"\n variants={listVariants}\n initial=\"closed\"\n animate=\"opened\"\n className={styles.mobileOverlay}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Men\u00FA de navegaci\u00F3n\"\n >\n {/* Bot\u00F3n cerrar */}\n <button\n aria-label={labelClose}\n onClick={() => setOpen(false)}\n className={styles.mobileCloseBtn}\n style={{ WebkitTapHighlightColor: \"transparent\" }}\n >\n <span\n aria-hidden\n className={styles.closeBar}\n style={{ transform: \"rotate(45deg)\" }}\n />\n <span\n aria-hidden\n className={styles.closeBar}\n style={{ transform: \"rotate(-45deg)\" }}\n />\n <span className=\"sr-only\">{labelClose}</span>\n </button>\n\n {/* Logo decorativo */}\n <motion.div variants={itemVariants} className={styles.mobileLogo}>\n {logo}\n </motion.div>\n\n {/* Links */}\n {allLinks.map((link) => (\n <motion.div key={link.url + link.title} variants={itemVariants}>\n <XNavLink\n link={link}\n onClick={() => setOpen(false)}\n mobile\n />\n </motion.div>\n ))}\n\n {/* Toggle de tema */}\n <motion.button\n variants={itemVariants}\n onClick={toggleTheme}\n className={styles.themeToggleMobile}\n >\n {themeIcons ? (\n theme === \"light\" ? (\n <>\n {renderIcon(themeIcons.toDark, iconSize, iconColor)}\n {labelDark}\n </>\n ) : (\n <>\n {renderIcon(themeIcons.toLight, iconSize, iconColor)}\n {labelLight}\n </>\n )\n ) : theme === \"light\" ? (\n labelDark\n ) : (\n labelLight\n )}\n </motion.button>\n </motion.div>\n )}\n </header>\n );\n}\n", "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n XNavbar.module.css\n Navbar completamente libre de Tailwind.\n Usa variables CSS del tema global (--bg, --text, --border, --accent).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* \u2500\u2500 Header / contenedor ra\u00EDz \u2500\u2500 */\n.header {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 2rem 3rem;\n background: var(--bg);\n color: var(--text);\n font-size: 1.25rem;\n z-index: 60;\n}\n\n@media (min-width: 640px) { .header { padding-inline: 2rem; } }\n@media (min-width: 768px) { .header { padding-inline: 3rem; } }\n@media (min-width: 1024px) { .header { padding-inline: 5rem; } }\n@media (min-width: 1280px) { .header { padding-inline: 12rem; } }\n\n/* \u2500\u2500 Desktop nav \u2500\u2500 */\n.desktopNav {\n display: none;\n align-items: center;\n width: 100%;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n padding-bottom: 0.5rem;\n}\n\n@media (min-width: 768px) {\n .desktopNav {\n display: grid;\n }\n}\n\n.desktopLinksLeft,\n.desktopLinksRight {\n display: flex;\n align-items: center;\n gap: 1.5rem;\n min-width: 0;\n}\n\n.desktopLinksLeft {\n justify-content: flex-end;\n}\n\n.desktopLinksRight {\n justify-content: flex-start;\n}\n\n.logoSlot {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* \u2500\u2500 Logo / bot\u00F3n central (desktop) \u2500\u2500 */\n.logoWrapper {\n position: relative;\n margin-inline: 1rem;\n display: flex;\n align-items: center;\n}\n\n.logoBtn {\n font-weight: 700;\n font-size: 1.5rem;\n line-height: 1;\n user-select: none;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--text);\n padding: 0;\n}\n\n/* \u2500\u2500 Tray de \u00EDconos hover (sun/moon) \u2500\u2500 */\n.iconTray {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n.iconTrayRight {\n left: 100%;\n padding-left: 0.75rem;\n}\n\n.iconTrayLeft {\n right: 100%;\n padding-right: 0.75rem;\n}\n\n/* \u2500\u2500 NavLink (desktop) \u2500\u2500 */\n.navLink {\n padding: 0.25rem;\n border-bottom: 2px solid transparent;\n transition: border-color 0.2s, opacity 0.2s, color 0.2s;\n color: var(--xnav-link-color, var(--text));\n text-decoration: none;\n white-space: nowrap;\n}\n\n.navLink:hover {\n color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));\n opacity: var(--xnav-link-hover-opacity, 0.7);\n}\n\n.navLinkActive {\n border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));\n font-weight: 600;\n}\n\n/* External link indicator */\n.navLinkExternal::after {\n content: \" \u2197\";\n font-size: 0.7em;\n opacity: 0.6;\n}\n\n/* \u2500\u2500 Mobile hamburger \u2500\u2500 */\n.mobileToggle {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 768px) {\n .mobileToggle {\n display: none;\n }\n}\n\n.hamburgerBtn {\n width: 2.5rem;\n height: 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n z-index: 80;\n padding: 0;\n}\n\n.bar {\n width: var(--xnav-bar-w, 2rem);\n height: var(--xnav-bar-h, 3px);\n background: var(--xnav-bar-color, var(--text));\n border-radius: 2px;\n}\n\n/* \u2500\u2500 Mobile overlay (portal) \u2500\u2500 */\n.mobileOverlay {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100svh;\n background: var(--bg);\n color: var(--text);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n font-size: 2.5rem;\n z-index: 9999;\n}\n\n.mobileCloseBtn {\n position: fixed;\n top: 2rem;\n left: 1rem;\n width: 2.5rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n /* hereda el mismo color que las barras del hamburguesa */\n color: var(--xnav-bar-color, var(--text));\n z-index: 10000;\n -webkit-tap-highlight-color: transparent;\n}\n\n.closeBar {\n display: block;\n position: absolute;\n width: 2rem;\n height: 3px;\n border-radius: 2px;\n background: currentColor;\n}\n\n.mobileLogo {\n font-weight: 700;\n font-size: 3rem;\n user-select: none;\n pointer-events: none;\n}\n\n.mobileNavLink {\n font-size: 2.5rem;\n color: var(--xnav-link-color, var(--text));\n text-decoration: none;\n border-bottom: 2px solid transparent;\n transition: border-color 0.2s, color 0.2s, opacity 0.2s;\n padding: 0.25rem;\n}\n\n.mobileNavLink:hover {\n color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));\n opacity: var(--xnav-link-hover-opacity, 0.7);\n}\n\n.mobileNavLinkActive {\n font-weight: 600;\n border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));\n}\n\n/* \u2500\u2500 Bot\u00F3n tema (m\u00F3vil) \u2500\u2500 */\n.themeToggleMobile {\n margin-top: 1rem;\n font-size: 1rem;\n padding: 0.5rem 1rem;\n border: 1px solid var(--border);\n border-radius: 0.375rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n color: var(--text);\n cursor: pointer;\n transition: opacity 0.2s;\n}\n\n.themeToggleMobile:hover {\n opacity: 0.7;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA8D;AAC9D,2BAAiC;AACjC,kBAAiB;AACjB,wBAA4B;;;
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/navigation/index.ts", "../../../src/components/navigation/xnavbar/XNavbar.tsx", "esbuild-css-modules-plugin-ns-js::src/components/navigation/xnavbar/XNavbar.module.css:injector.js", "../../../src/components/navigation/xnavbar/XNavbar.module.css"],
|
|
4
|
+
"sourcesContent": ["export { XNavbar } from \"./xnavbar\";\nexport type {\n XNavbarProps,\n NavLinkItem,\n ThemeToggleIcons,\n IconRenderer,\n} from \"./xnavbar\";\n", "\"use client\";\n\nimport { useEffect, useState, ReactNode, CSSProperties } from \"react\";\nimport { motion, Variants } from \"framer-motion\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport styles from \"./XNavbar.module.css\";\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Tipos p\u00FAblicos \u2014 exportados para que el consumidor pueda tipear sus datos\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport type NavLinkItem = {\n /** Ruta destino */\n url: string;\n /** Texto visible */\n title: string;\n /** Si es true abre en pesta\u00F1a nueva y muestra el indicador \u2197 */\n external?: boolean;\n};\n\n/**\n * ReactNode est\u00E1tico O funci\u00F3n de render (size, color?) => ReactNode.\n * La funci\u00F3n recibe el tama\u00F1o y el color vigente para que el \u00EDcono\n * pueda adaptarse din\u00E1micamente a los props del navbar.\n */\nexport type IconRenderer = ReactNode | ((size: number, color?: string) => ReactNode);\n\nexport type ThemeToggleIcons = {\n /** \u00CDcono/renderer hacia tema oscuro (ReactNode o funci\u00F3n) */\n toDark: IconRenderer;\n /** \u00CDcono/renderer hacia tema claro (ReactNode o funci\u00F3n) */\n toLight: IconRenderer;\n};\n\nexport type XNavbarProps = {\n // \u2500\u2500 Navegaci\u00F3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Links que aparecen a la izquierda del logo en desktop */\n linksLeft?: NavLinkItem[];\n /** Links que aparecen a la derecha del logo en desktop */\n linksRight?: NavLinkItem[];\n\n // \u2500\u2500 Logo central \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Contenido del bot\u00F3n central (texto o JSX). Por defecto: \"X\" */\n logo?: ReactNode;\n /** Si true el logo act\u00FAa como toggle de tema (comportamiento original). Default: true */\n logoAsThemeToggle?: boolean;\n /** Callback custom si logoAsThemeToggle es false */\n onLogoClick?: () => void;\n\n // \u2500\u2500 Toggle de tema \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** \u00CDconos para el toggle de tema. Si no se pasa, no se mostrar\u00E1 hint de \u00EDcono */\n themeIcons?: ThemeToggleIcons;\n /** Tema inicial. Default: \"light\" */\n defaultTheme?: \"light\" | \"dark\";\n /** Key de localStorage para persistencia del tema. Default: \"theme\" */\n storageKey?: string;\n\n // \u2500\u2500 Color de los enlaces de navegaci\u00F3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color base de los enlaces (Inicio, Contacto, etc.). Default: var(--text) */\n linkColor?: string;\n /** Color al hacer hover sobre los enlaces. Default: opacidad reducida del linkColor */\n linkHoverColor?: string;\n /** Color del borde inferior del enlace activo. Default: linkColor */\n linkActiveColor?: string;\n\n // \u2500\u2500 Color y tama\u00F1o de \u00EDconos theme-toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color base de los \u00EDconos. Acepta cualquier valor CSS: hex, hsl, \"var(--accent)\", etc.\n * Si no se pasa, los \u00EDconos heredan el color del texto (currentColor). */\n iconColor?: string;\n /** Color que toman los \u00EDconos al hacer hover sobre el logo. Default: iconColor */\n iconHoverColor?: string;\n /** Tama\u00F1o en px que se pasa a IconRenderer cuando es funci\u00F3n. Default: 22 */\n iconSize?: number;\n\n // \u2500\u2500 Hamburguesa \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Color de las 3 barras (y la X de cierre m\u00F3vil). Acepta cualquier valor CSS. Default: var(--text) */\n hamburgerColor?: string;\n /** Ancho de las barras. Cualquier unidad CSS. Default: \"2rem\" */\n hamburgerBarWidth?: string;\n /** Grosor (altura) de las barras. Cualquier unidad CSS. Default: \"3px\" */\n hamburgerBarThickness?: string;\n\n // \u2500\u2500 Variables CSS personalizadas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** Inyecta variables CSS extra directamente en el style del <header>.\n * \u00DAtil para pasar tokens del tema: { '--xnav-icon-color': 'var(--accent)' } */\n cssVars?: Record<string, string>;\n\n // \u2500\u2500 Labels de accesibilidad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** aria-label del bot\u00F3n hamburguesa cuando est\u00E1 cerrado. Default: \"Abrir men\u00FA\" */\n labelOpen?: string;\n /** aria-label del bot\u00F3n hamburguesa cuando est\u00E1 abierto. Default: \"Cerrar men\u00FA\" */\n labelClose?: string;\n /** Texto del bot\u00F3n de tema oscuro en men\u00FA m\u00F3vil. Default: \"Oscuro\" */\n labelDark?: string;\n /** Texto del bot\u00F3n de tema claro en men\u00FA m\u00F3vil. Default: \"Claro\" */\n labelLight?: string;\n\n // \u2500\u2500 Estilos adicionales \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n /** className extra que se a\u00F1ade al <header> */\n className?: string;\n};\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Variantes de animaci\u00F3n (id\u00E9nticas al navbar original)\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst iconTrayRightVariants: Variants = {\n hidden: { opacity: 0, x: -6, pointerEvents: \"none\" },\n visible: { opacity: 1, x: 0, pointerEvents: \"none\", transition: { duration: 0.18 } },\n};\nconst iconTrayLeftVariants: Variants = {\n hidden: { opacity: 0, x: 6, pointerEvents: \"none\" },\n visible: { opacity: 1, x: 0, pointerEvents: \"none\", transition: { duration: 0.18 } },\n};\n\nconst topVariants: Variants = { closed: { rotate: 0 }, opened: { rotate: 45 } };\nconst centerVariants: Variants = { closed: { opacity: 1 }, opened: { opacity: 0 } };\nconst bottomVariants: Variants = { closed: { rotate: 0 }, opened: { rotate: -45 } };\n\nconst listVariants: Variants = {\n closed: { x: \"100vw\" },\n opened: { x: 0, transition: { when: \"beforeChildren\", staggerChildren: 0.02 } },\n};\nconst itemVariants: Variants = {\n closed: { x: -10, opacity: 0 },\n opened: { x: 0, opacity: 1 },\n};\n\n/** Renderiza un IconRenderer: si es funci\u00F3n la llama con (size, color?), si es ReactNode lo devuelve tal cual. */\nfunction renderIcon(\n icon: IconRenderer,\n size: number,\n color?: string\n): ReactNode {\n if (typeof icon === \"function\") return icon(size, color);\n return icon;\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Sub-componente NavLink (interno)\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ntype NavLinkProps = {\n link: NavLinkItem;\n onClick?: () => void;\n mobile?: boolean;\n};\n\nfunction XNavLink({ link, onClick, mobile }: NavLinkProps) {\n const pathname = usePathname();\n const isActive =\n link.url === \"/\" ? pathname === \"/\" : pathname?.startsWith(link.url);\n\n const baseClass = mobile ? styles.mobileNavLink : styles.navLink;\n const activeClass = mobile ? styles.mobileNavLinkActive : styles.navLinkActive;\n const externalClass = link.external ? styles.navLinkExternal : \"\";\n\n return (\n <Link\n href={link.url}\n onClick={onClick}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n aria-label={`Ir a ${link.title}`}\n aria-current={isActive ? \"page\" : undefined}\n className={[baseClass, isActive ? activeClass : \"\", externalClass]\n .filter(Boolean)\n .join(\" \")}\n >\n {link.title}\n </Link>\n );\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Componente principal XNavbar\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport default function XNavbar({\n linksLeft = [],\n linksRight = [],\n logo = \"X\",\n logoAsThemeToggle = true,\n onLogoClick,\n themeIcons,\n defaultTheme = \"light\",\n storageKey = \"theme\",\n linkColor,\n linkHoverColor,\n linkActiveColor,\n iconColor,\n iconHoverColor,\n iconSize = 22,\n hamburgerColor,\n hamburgerBarWidth,\n hamburgerBarThickness,\n cssVars,\n labelOpen = \"Abrir men\u00FA\",\n labelClose = \"Cerrar men\u00FA\",\n labelDark = \"Oscuro\",\n labelLight = \"Claro\",\n className,\n}: XNavbarProps) {\n const [open, setOpen] = useState(false);\n const [hoverX, setHoverX] = useState(false);\n const [theme, setTheme] = useState<\"light\" | \"dark\">(defaultTheme);\n\n // Persistir tema\n useEffect(() => {\n const saved = (typeof window !== \"undefined\" &&\n localStorage.getItem(storageKey)) as \"light\" | \"dark\" | null;\n applyTheme(saved ?? defaultTheme);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n function applyTheme(t: \"light\" | \"dark\") {\n setTheme(t);\n const root = document.documentElement;\n if (t === \"dark\") root.setAttribute(\"data-theme\", \"dark\");\n else root.removeAttribute(\"data-theme\");\n localStorage.setItem(storageKey, t);\n }\n\n function toggleTheme() {\n applyTheme(theme === \"dark\" ? \"light\" : \"dark\");\n }\n\n // Bloquear scroll \u2014 usamos documentElement para no tocar document.body\n useEffect(() => {\n document.documentElement.style.overflow = open ? \"hidden\" : \"\";\n return () => { document.documentElement.style.overflow = \"\"; };\n }, [open]);\n\n // Cerrar con ESC\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [open]);\n\n const allLinks = [...linksLeft, ...linksRight];\n\n // \u2500\u2500 CSS vars inyectadas en el <header> via inline style \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Usando \"--xnav-*\" como namespace para no colisionar con vars globales.\n const headerStyle = {\n ...(linkColor && { \"--xnav-link-color\" : linkColor }),\n ...(linkHoverColor && { \"--xnav-link-hover\" : linkHoverColor }),\n ...(linkActiveColor && { \"--xnav-link-active\" : linkActiveColor }),\n ...(iconColor && { \"--xnav-icon-color\" : iconColor }),\n ...(iconHoverColor && { \"--xnav-icon-hover\" : iconHoverColor }),\n ...(hamburgerColor && { \"--xnav-bar-color\" : hamburgerColor }),\n ...(hamburgerBarWidth && { \"--xnav-bar-w\" : hamburgerBarWidth }),\n ...(hamburgerBarThickness && { \"--xnav-bar-h\" : hamburgerBarThickness }),\n ...cssVars,\n } as CSSProperties;\n\n // Acci\u00F3n del logo central\n const handleLogoClick = () => {\n if (logoAsThemeToggle) {\n toggleTheme();\n } else {\n onLogoClick?.();\n }\n };\n\n const logoAriaLabel = logoAsThemeToggle\n ? `Cambiar a tema ${theme === \"dark\" ? \"claro\" : \"oscuro\"}`\n : undefined;\n\n const logoTitle = logoAsThemeToggle\n ? theme === \"dark\"\n ? \"Cambiar a tema claro\"\n : \"Cambiar a tema oscuro\"\n : undefined;\n\n return (\n <header\n className={[styles.header, className].filter(Boolean).join(\" \")}\n style={headerStyle}\n role=\"banner\"\n >\n {/* \u2500\u2500 Desktop \u2500\u2500 */}\n <nav className={styles.desktopNav} aria-label=\"Navegaci\u00F3n principal\">\n <div className={styles.desktopLinksLeft}>\n {linksLeft.map((link) => (\n <XNavLink key={link.url + link.title} link={link} />\n ))}\n </div>\n\n {/* Bot\u00F3n logo central */}\n <div className={styles.logoSlot}>\n <div\n className={styles.logoWrapper}\n onMouseEnter={() => setHoverX(true)}\n onMouseLeave={() => setHoverX(false)}\n >\n <button\n type=\"button\"\n onClick={handleLogoClick}\n aria-label={logoAriaLabel}\n title={logoTitle}\n className={styles.logoBtn}\n >\n {logo}\n </button>\n\n {/* \u00CDcono hint al hover (solo si se pasan themeIcons y el logo es toggle de tema) */}\n {logoAsThemeToggle && themeIcons && (\n <>\n {theme === \"light\" ? (\n <motion.div\n initial={false}\n animate={hoverX ? \"visible\" : \"hidden\"}\n variants={iconTrayRightVariants}\n className={`${styles.iconTray} ${styles.iconTrayRight}`}\n style={{\n color:\n (hoverX ? iconHoverColor ?? iconColor : iconColor) ||\n undefined,\n }}\n aria-hidden\n >\n {renderIcon(themeIcons.toDark, iconSize, iconColor)}\n </motion.div>\n ) : (\n <motion.div\n initial={false}\n animate={hoverX ? \"visible\" : \"hidden\"}\n variants={iconTrayLeftVariants}\n className={`${styles.iconTray} ${styles.iconTrayLeft}`}\n style={{\n color:\n (hoverX ? iconHoverColor ?? iconColor : iconColor) ||\n undefined,\n }}\n aria-hidden\n >\n {renderIcon(themeIcons.toLight, iconSize, iconColor)}\n </motion.div>\n )}\n </>\n )}\n </div>\n </div>\n\n <div className={styles.desktopLinksRight}>\n {linksRight.map((link) => (\n <XNavLink key={link.url + link.title} link={link} />\n ))}\n </div>\n </nav>\n\n {/* \u2500\u2500 Mobile: bot\u00F3n hamburguesa \u2500\u2500 */}\n <div className={styles.mobileToggle}>\n <button\n aria-label={open ? labelClose : labelOpen}\n aria-expanded={open}\n aria-controls=\"xnavbar-mobile-menu\"\n onClick={() => setOpen((p) => !p)}\n className={styles.hamburgerBtn}\n title={open ? labelClose : labelOpen}\n >\n <motion.div\n variants={topVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n style={{ originX: \"left\" }}\n aria-hidden\n />\n <motion.div\n variants={centerVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n aria-hidden\n />\n <motion.div\n variants={bottomVariants}\n initial=\"closed\"\n animate={open ? \"opened\" : \"closed\"}\n className={styles.bar}\n style={{ originX: \"left\" }}\n aria-hidden\n />\n </button>\n </div>\n\n {/* \u2500\u2500 Mobile overlay \u2014 position:fixed, sin portal, sin document.body \u2500\u2500 */}\n {open && (\n <motion.div\n id=\"xnavbar-mobile-menu\"\n variants={listVariants}\n initial=\"closed\"\n animate=\"opened\"\n className={styles.mobileOverlay}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Men\u00FA de navegaci\u00F3n\"\n >\n {/* Bot\u00F3n cerrar */}\n <button\n aria-label={labelClose}\n onClick={() => setOpen(false)}\n className={styles.mobileCloseBtn}\n style={{ WebkitTapHighlightColor: \"transparent\" }}\n >\n <span\n aria-hidden\n className={styles.closeBar}\n style={{ transform: \"rotate(45deg)\" }}\n />\n <span\n aria-hidden\n className={styles.closeBar}\n style={{ transform: \"rotate(-45deg)\" }}\n />\n <span className=\"sr-only\">{labelClose}</span>\n </button>\n\n {/* Logo decorativo */}\n <motion.div variants={itemVariants} className={styles.mobileLogo}>\n {logo}\n </motion.div>\n\n {/* Links */}\n {allLinks.map((link) => (\n <motion.div key={link.url + link.title} variants={itemVariants}>\n <XNavLink\n link={link}\n onClick={() => setOpen(false)}\n mobile\n />\n </motion.div>\n ))}\n\n {/* Toggle de tema */}\n <motion.button\n variants={itemVariants}\n onClick={toggleTheme}\n className={styles.themeToggleMobile}\n >\n {themeIcons ? (\n theme === \"light\" ? (\n <>\n {renderIcon(themeIcons.toDark, iconSize, iconColor)}\n {labelDark}\n </>\n ) : (\n <>\n {renderIcon(themeIcons.toLight, iconSize, iconColor)}\n {labelLight}\n </>\n )\n ) : theme === \"light\" ? (\n labelDark\n ) : (\n labelLight\n )}\n </motion.button>\n </motion.div>\n )}\n </header>\n );\n}\n", "\nconst content = __content_placeholder__;\nconst digest = __digest_placeholder__; \nconst inject = () => {\n setTimeout(() => {\n if (!globalThis.document) {\n return;\n }\n let root = globalThis.document.querySelector(\"head\");\n if (root && root.shadowRoot) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = globalThis.document.head;\n }\n let container = root.querySelector(\"#_\" + digest);\n if (!container) {\n container = globalThis.document.createElement(\"style\");\n container.id = \"_\" + digest;\n const text = globalThis.document.createTextNode(content);\n container.appendChild(text);\n root.appendChild(container);\n }\n }, 0);\n};\n\nexport { inject };\n ", "import \"esbuild-css-modules-plugin-ns-css:src/components/navigation/xnavbar/XNavbar.module.css\";\n\nimport { inject } from \"esbuild-css-modules-plugin-ns-js:src/components/navigation/xnavbar/XNavbar.module.css:injector.js\";\nexport default new Proxy({\n \"bar\": \"XNavbar-module__bar_wx7KiW__012\",\n \"closeBar\": \"XNavbar-module__closeBar_wx7KiW__012\",\n \"desktopLinksLeft\": \"XNavbar-module__desktopLinksLeft_wx7KiW__012\",\n \"desktopLinksRight\": \"XNavbar-module__desktopLinksRight_wx7KiW__012\",\n \"desktopNav\": \"XNavbar-module__desktopNav_wx7KiW__012\",\n \"hamburgerBtn\": \"XNavbar-module__hamburgerBtn_wx7KiW__012\",\n \"header\": \"XNavbar-module__header_wx7KiW__012\",\n \"iconTray\": \"XNavbar-module__iconTray_wx7KiW__012\",\n \"iconTrayLeft\": \"XNavbar-module__iconTrayLeft_wx7KiW__012\",\n \"iconTrayRight\": \"XNavbar-module__iconTrayRight_wx7KiW__012\",\n \"logoBtn\": \"XNavbar-module__logoBtn_wx7KiW__012\",\n \"logoSlot\": \"XNavbar-module__logoSlot_wx7KiW__012\",\n \"logoWrapper\": \"XNavbar-module__logoWrapper_wx7KiW__012\",\n \"mobileCloseBtn\": \"XNavbar-module__mobileCloseBtn_wx7KiW__012\",\n \"mobileLogo\": \"XNavbar-module__mobileLogo_wx7KiW__012\",\n \"mobileNavLink\": \"XNavbar-module__mobileNavLink_wx7KiW__012\",\n \"mobileNavLinkActive\": \"XNavbar-module__mobileNavLinkActive_wx7KiW__012\",\n \"mobileOverlay\": \"XNavbar-module__mobileOverlay_wx7KiW__012\",\n \"mobileToggle\": \"XNavbar-module__mobileToggle_wx7KiW__012\",\n \"navLink\": \"XNavbar-module__navLink_wx7KiW__012\",\n \"navLinkActive\": \"XNavbar-module__navLinkActive_wx7KiW__012\",\n \"navLinkExternal\": \"XNavbar-module__navLinkExternal_wx7KiW__012\",\n \"themeToggleMobile\": \"XNavbar-module__themeToggleMobile_wx7KiW__012\"\n}, {\n get: function(source, key) {\n inject();\n return source[key];\n }\n});\n "],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Link"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* src/components/social/xsocialcontact/XSocialContact.module.css */
|
|
2
|
-
.
|
|
1
|
+
/* esbuild-css-modules-plugin-ns-css:src/components/social/xsocialcontact/XSocialContact.module.css */
|
|
2
|
+
.XSocialContact-module__container_D0-L3a__012 {
|
|
3
3
|
--columns: 3;
|
|
4
4
|
--gap: 1.5rem;
|
|
5
5
|
--padding: 1.5rem;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
--alignment: center;
|
|
8
8
|
--text-align: center;
|
|
9
9
|
--icon-gap: 1.5rem;
|
|
10
|
-
--border-radius:
|
|
10
|
+
--border-radius: .5rem;
|
|
11
11
|
--bg-color: transparent;
|
|
12
12
|
--icon-color: currentColor;
|
|
13
13
|
--icon-hover-color: currentColor;
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
--border-width: 0px;
|
|
16
16
|
--border-style: solid;
|
|
17
17
|
--text-color: inherit;
|
|
18
|
-
display: grid;
|
|
19
18
|
grid-template-columns: repeat(var(--columns), 1fr);
|
|
20
19
|
gap: var(--gap);
|
|
21
20
|
padding: var(--padding);
|
|
@@ -23,94 +22,95 @@
|
|
|
23
22
|
border: var(--border-width) var(--border-style) var(--border-color);
|
|
24
23
|
border-radius: var(--border-radius);
|
|
25
24
|
justify-items: var(--alignment);
|
|
25
|
+
display: grid;
|
|
26
26
|
}
|
|
27
|
-
.
|
|
27
|
+
.XSocialContact-module__small_D0-L3a__012 {
|
|
28
28
|
--icon-gap: 1rem;
|
|
29
29
|
--gap: 1rem;
|
|
30
30
|
--padding: 1rem;
|
|
31
|
-
--text-size:
|
|
31
|
+
--text-size: .875rem;
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.XSocialContact-module__medium_D0-L3a__012 {
|
|
34
34
|
--icon-gap: 1.5rem;
|
|
35
35
|
--gap: 1.5rem;
|
|
36
36
|
--padding: 1.5rem;
|
|
37
37
|
--text-size: 1rem;
|
|
38
38
|
}
|
|
39
|
-
.
|
|
39
|
+
.XSocialContact-module__large_D0-L3a__012 {
|
|
40
40
|
--icon-gap: 2rem;
|
|
41
41
|
--gap: 2rem;
|
|
42
42
|
--padding: 2rem;
|
|
43
43
|
--text-size: 1.125rem;
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.XSocialContact-module__rows1_D0-L3a__012 {
|
|
46
46
|
grid-template-rows: auto;
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.XSocialContact-module__rows2_D0-L3a__012 {
|
|
49
49
|
grid-template-rows: repeat(2, auto);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.XSocialContact-module__rows3_D0-L3a__012 {
|
|
52
52
|
grid-template-rows: repeat(3, auto);
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.XSocialContact-module__rows4_D0-L3a__012 {
|
|
55
55
|
grid-template-rows: repeat(4, auto);
|
|
56
56
|
}
|
|
57
|
-
.
|
|
58
|
-
display: flex;
|
|
59
|
-
flex-direction: column;
|
|
57
|
+
.XSocialContact-module__item_D0-L3a__012 {
|
|
60
58
|
align-items: center;
|
|
61
|
-
gap: calc(var(--icon-gap) *
|
|
62
|
-
text-decoration: none;
|
|
63
|
-
transition: opacity 0.2s ease;
|
|
59
|
+
gap: calc(var(--icon-gap) * .5);
|
|
64
60
|
color: inherit;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
transition: opacity .2s;
|
|
64
|
+
display: flex;
|
|
65
65
|
}
|
|
66
|
-
.
|
|
67
|
-
opacity:
|
|
66
|
+
.XSocialContact-module__item_D0-L3a__012:hover {
|
|
67
|
+
opacity: .8;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
69
|
+
.XSocialContact-module__iconWrapper_D0-L3a__012 {
|
|
70
70
|
--item-icon-color: var(--icon-color);
|
|
71
71
|
--item-icon-hover-color: var(--icon-hover-color);
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: center;
|
|
75
72
|
width: var(--icon-gap);
|
|
76
73
|
height: var(--icon-gap);
|
|
77
74
|
color: var(--item-icon-color);
|
|
78
|
-
|
|
75
|
+
justify-content: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
transition: color .2s;
|
|
78
|
+
display: flex;
|
|
79
79
|
}
|
|
80
|
-
.
|
|
80
|
+
.XSocialContact-module__item_D0-L3a__012:hover .XSocialContact-module__iconWrapper_D0-L3a__012 {
|
|
81
81
|
color: var(--item-icon-hover-color);
|
|
82
82
|
}
|
|
83
|
-
.
|
|
83
|
+
.XSocialContact-module__text_D0-L3a__012 {
|
|
84
84
|
font-size: var(--text-size);
|
|
85
85
|
color: var(--text-color);
|
|
86
86
|
text-align: var(--text-align);
|
|
87
87
|
word-break: break-word;
|
|
88
88
|
max-width: 100%;
|
|
89
89
|
}
|
|
90
|
-
@media (
|
|
91
|
-
.
|
|
90
|
+
@media (width <= 768px) {
|
|
91
|
+
.XSocialContact-module__container_D0-L3a__012 {
|
|
92
92
|
--columns: 2;
|
|
93
|
-
--gap: calc(var(--gap) *
|
|
94
|
-
--padding: calc(var(--padding) *
|
|
93
|
+
--gap: calc(var(--gap) * .75);
|
|
94
|
+
--padding: calc(var(--padding) * .75);
|
|
95
95
|
}
|
|
96
|
-
.
|
|
97
|
-
.
|
|
98
|
-
.
|
|
99
|
-
grid-template-columns: repeat(2, 1fr);
|
|
96
|
+
.XSocialContact-module__rows2_D0-L3a__012,
|
|
97
|
+
.XSocialContact-module__rows3_D0-L3a__012,
|
|
98
|
+
.XSocialContact-module__rows4_D0-L3a__012 {
|
|
100
99
|
grid-template-rows: repeat(2, auto);
|
|
100
|
+
grid-template-columns: repeat(2, 1fr);
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
-
@media (
|
|
104
|
-
.
|
|
103
|
+
@media (width <= 480px) {
|
|
104
|
+
.XSocialContact-module__container_D0-L3a__012 {
|
|
105
105
|
--columns: 1;
|
|
106
|
-
--gap: calc(var(--gap) *
|
|
107
|
-
--padding: calc(var(--padding) *
|
|
106
|
+
--gap: calc(var(--gap) * .5);
|
|
107
|
+
--padding: calc(var(--padding) * .5);
|
|
108
108
|
}
|
|
109
|
-
.
|
|
110
|
-
.
|
|
111
|
-
.
|
|
112
|
-
grid-template-columns: 1fr;
|
|
109
|
+
.XSocialContact-module__rows2_D0-L3a__012,
|
|
110
|
+
.XSocialContact-module__rows3_D0-L3a__012,
|
|
111
|
+
.XSocialContact-module__rows4_D0-L3a__012 {
|
|
113
112
|
grid-template-rows: auto;
|
|
113
|
+
grid-template-columns: 1fr;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
/*# sourceMappingURL=index.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": ["esbuild-css-modules-plugin-ns-css:src/components/social/xsocialcontact/XSocialContact.module.css"],
|
|
4
|
+
"sourcesContent": [".XSocialContact-module__container_D0-L3a__012 {\n --columns: 3;\n --gap: 1.5rem;\n --padding: 1.5rem;\n --text-size: 1rem;\n --alignment: center;\n --text-align: center;\n --icon-gap: 1.5rem;\n --border-radius: .5rem;\n --bg-color: transparent;\n --icon-color: currentColor;\n --icon-hover-color: currentColor;\n --border-color: transparent;\n --border-width: 0px;\n --border-style: solid;\n --text-color: inherit;\n grid-template-columns: repeat(var(--columns), 1fr);\n gap: var(--gap);\n padding: var(--padding);\n background-color: var(--bg-color);\n border: var(--border-width) var(--border-style) var(--border-color);\n border-radius: var(--border-radius);\n justify-items: var(--alignment);\n display: grid;\n}\n\n.XSocialContact-module__small_D0-L3a__012 {\n --icon-gap: 1rem;\n --gap: 1rem;\n --padding: 1rem;\n --text-size: .875rem;\n}\n\n.XSocialContact-module__medium_D0-L3a__012 {\n --icon-gap: 1.5rem;\n --gap: 1.5rem;\n --padding: 1.5rem;\n --text-size: 1rem;\n}\n\n.XSocialContact-module__large_D0-L3a__012 {\n --icon-gap: 2rem;\n --gap: 2rem;\n --padding: 2rem;\n --text-size: 1.125rem;\n}\n\n.XSocialContact-module__rows1_D0-L3a__012 {\n grid-template-rows: auto;\n}\n\n.XSocialContact-module__rows2_D0-L3a__012 {\n grid-template-rows: repeat(2, auto);\n}\n\n.XSocialContact-module__rows3_D0-L3a__012 {\n grid-template-rows: repeat(3, auto);\n}\n\n.XSocialContact-module__rows4_D0-L3a__012 {\n grid-template-rows: repeat(4, auto);\n}\n\n.XSocialContact-module__item_D0-L3a__012 {\n align-items: center;\n gap: calc(var(--icon-gap) * .5);\n color: inherit;\n flex-direction: column;\n text-decoration: none;\n transition: opacity .2s;\n display: flex;\n}\n\n.XSocialContact-module__item_D0-L3a__012:hover {\n opacity: .8;\n}\n\n.XSocialContact-module__iconWrapper_D0-L3a__012 {\n --item-icon-color: var(--icon-color);\n --item-icon-hover-color: var(--icon-hover-color);\n width: var(--icon-gap);\n height: var(--icon-gap);\n color: var(--item-icon-color);\n justify-content: center;\n align-items: center;\n transition: color .2s;\n display: flex;\n}\n\n.XSocialContact-module__item_D0-L3a__012:hover .XSocialContact-module__iconWrapper_D0-L3a__012 {\n color: var(--item-icon-hover-color);\n}\n\n.XSocialContact-module__text_D0-L3a__012 {\n font-size: var(--text-size);\n color: var(--text-color);\n text-align: var(--text-align);\n word-break: break-word;\n max-width: 100%;\n}\n\n@media (width <= 768px) {\n .XSocialContact-module__container_D0-L3a__012 {\n --columns: 2;\n --gap: calc(var(--gap) * .75);\n --padding: calc(var(--padding) * .75);\n }\n\n .XSocialContact-module__rows2_D0-L3a__012, .XSocialContact-module__rows3_D0-L3a__012, .XSocialContact-module__rows4_D0-L3a__012 {\n grid-template-rows: repeat(2, auto);\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (width <= 480px) {\n .XSocialContact-module__container_D0-L3a__012 {\n --columns: 1;\n --gap: calc(var(--gap) * .5);\n --padding: calc(var(--padding) * .5);\n }\n\n .XSocialContact-module__rows2_D0-L3a__012, .XSocialContact-module__rows3_D0-L3a__012, .XSocialContact-module__rows4_D0-L3a__012 {\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,CAAC;AACC,aAAW;AACX,SAAO;AACP,aAAW;AACX,eAAa;AACb,eAAa;AACb,gBAAc;AACd,cAAY;AACZ,mBAAiB;AACjB,cAAY;AACZ,gBAAc;AACd,sBAAoB;AACpB,kBAAgB;AAChB,kBAAgB;AAChB,kBAAgB;AAChB,gBAAc;AACd,yBAAuB,OAAO,IAAI,UAAU,EAAE;AAC9C,OAAK,IAAI;AACT,WAAS,IAAI;AACb,oBAAkB,IAAI;AACtB,UAAQ,IAAI,gBAAgB,IAAI,gBAAgB,IAAI;AACpD,iBAAe,IAAI;AACnB,iBAAe,IAAI;AACnB,WAAS;AACX;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,sBAAoB;AACtB;AAEA,CAAC;AACC,sBAAoB,OAAO,CAAC,EAAE;AAChC;AAEA,CAAC;AACC,sBAAoB,OAAO,CAAC,EAAE;AAChC;AAEA,CAAC;AACC,sBAAoB,OAAO,CAAC,EAAE;AAChC;AAEA,CAAC;AACC,eAAa;AACb,OAAK,KAAK,IAAI,YAAY,EAAE;AAC5B,SAAO;AACP,kBAAgB;AAChB,mBAAiB;AACjB,cAAY,QAAQ;AACpB,WAAS;AACX;AAEA,CAVC,uCAUuC;AACtC,WAAS;AACX;AAEA,CAAC;AACC,qBAAmB,IAAI;AACvB,2BAAyB,IAAI;AAC7B,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,SAAO,IAAI;AACX,mBAAiB;AACjB,eAAa;AACb,cAAY,MAAM;AAClB,WAAS;AACX;AAEA,CA1BC,uCA0BuC,OAAO,CAZ9C;AAaC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,aAAW,IAAI;AACf,SAAO,IAAI;AACX,cAAY,IAAI;AAChB,cAAY;AACZ,aAAW;AACb;AAEA,QAAQ,SAAS;AACf,GAtGD;AAuGG,eAAW;AACX,WAAO,KAAK,IAAI,OAAO,EAAE;AACzB,eAAW,KAAK,IAAI,WAAW,EAAE;AACnC;AAEA,GAzDD;AAAA,EAyD4C,CArD5C;AAAA,EAqDuF,CAjDvF;AAkDG,wBAAoB,OAAO,CAAC,EAAE;AAC9B,2BAAuB,OAAO,CAAC,EAAE;AACnC;AACF;AAEA,QAAQ,SAAS;AACf,GAnHD;AAoHG,eAAW;AACX,WAAO,KAAK,IAAI,OAAO,EAAE;AACzB,eAAW,KAAK,IAAI,WAAW,EAAE;AACnC;AAEA,GAtED;AAAA,EAsE4C,CAlE5C;AAAA,EAkEuF,CA9DvF;AA+DG,wBAAoB;AACpB,2BAAuB;AACzB;AACF;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -31,21 +31,52 @@ __export(social_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(social_exports);
|
|
33
33
|
|
|
34
|
-
// src/components/social/xsocialcontact/XSocialContact.module.css
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
// esbuild-css-modules-plugin-ns-js::src/components/social/xsocialcontact/XSocialContact.module.css:injector.js
|
|
35
|
+
var content = __content_placeholder__;
|
|
36
|
+
var digest = __digest_placeholder__;
|
|
37
|
+
var inject = () => {
|
|
38
|
+
setTimeout(() => {
|
|
39
|
+
if (!globalThis.document) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
let root = globalThis.document.querySelector("head");
|
|
43
|
+
if (root && root.shadowRoot) {
|
|
44
|
+
root = root.shadowRoot;
|
|
45
|
+
}
|
|
46
|
+
if (!root) {
|
|
47
|
+
root = globalThis.document.head;
|
|
48
|
+
}
|
|
49
|
+
let container = root.querySelector("#_" + digest);
|
|
50
|
+
if (!container) {
|
|
51
|
+
container = globalThis.document.createElement("style");
|
|
52
|
+
container.id = "_" + digest;
|
|
53
|
+
const text = globalThis.document.createTextNode(content);
|
|
54
|
+
container.appendChild(text);
|
|
55
|
+
root.appendChild(container);
|
|
56
|
+
}
|
|
57
|
+
}, 0);
|
|
47
58
|
};
|
|
48
59
|
|
|
60
|
+
// src/components/social/xsocialcontact/XSocialContact.module.css
|
|
61
|
+
var XSocialContact_default = new Proxy({
|
|
62
|
+
"container": "XSocialContact-module__container_D0-L3a__012",
|
|
63
|
+
"iconWrapper": "XSocialContact-module__iconWrapper_D0-L3a__012",
|
|
64
|
+
"item": "XSocialContact-module__item_D0-L3a__012",
|
|
65
|
+
"large": "XSocialContact-module__large_D0-L3a__012",
|
|
66
|
+
"medium": "XSocialContact-module__medium_D0-L3a__012",
|
|
67
|
+
"rows1": "XSocialContact-module__rows1_D0-L3a__012",
|
|
68
|
+
"rows2": "XSocialContact-module__rows2_D0-L3a__012",
|
|
69
|
+
"rows3": "XSocialContact-module__rows3_D0-L3a__012",
|
|
70
|
+
"rows4": "XSocialContact-module__rows4_D0-L3a__012",
|
|
71
|
+
"small": "XSocialContact-module__small_D0-L3a__012",
|
|
72
|
+
"text": "XSocialContact-module__text_D0-L3a__012"
|
|
73
|
+
}, {
|
|
74
|
+
get: function(source, key) {
|
|
75
|
+
inject();
|
|
76
|
+
return source[key];
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
|
|
49
80
|
// src/components/social/xsocialcontact/XSocialContact.tsx
|
|
50
81
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
51
82
|
function XSocialContact({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/social/index.ts", "../../../src/components/social/xsocialcontact/XSocialContact.module.css", "../../../src/components/social/xsocialcontact/XSocialContact.tsx", "../../../src/components/social/xsocialcontact/XSocialIcons.tsx"],
|
|
4
|
-
"sourcesContent": ["export {\n XSocialContact,\n XTelegramIcon,\n XInstagramIcon,\n XWhatsappIcon,\n XEmailIcon,\n XLinkedInIcon,\n XTwitterIcon,\n XGitHubIcon,\n} from \"./xsocialcontact\";\nexport type { SocialItem, XSocialContactProps, XSocialIconProps } from \"./xsocialcontact\";\n", "/* XSocialContact Styles */\n\n.container {\n --columns: 3;\n --gap: 1.5rem;\n --padding: 1.5rem;\n --text-size: 1rem;\n --alignment: center;\n --text-align: center;\n --icon-gap: 1.5rem;\n --border-radius: 0.5rem;\n --bg-color: transparent;\n --icon-color: currentColor;\n --icon-hover-color: currentColor;\n --border-color: transparent;\n --border-width: 0px;\n --border-style: solid;\n --text-color: inherit;\n\n display: grid;\n grid-template-columns: repeat(var(--columns), 1fr);\n gap: var(--gap);\n padding: var(--padding);\n background-color: var(--bg-color);\n border: var(--border-width) var(--border-style) var(--border-color);\n border-radius: var(--border-radius);\n justify-items: var(--alignment);\n}\n\n/* Size variants */\n.small {\n --icon-gap: 1rem;\n --gap: 1rem;\n --padding: 1rem;\n --text-size: 0.875rem;\n}\n\n.medium {\n --icon-gap: 1.5rem;\n --gap: 1.5rem;\n --padding: 1.5rem;\n --text-size: 1rem;\n}\n\n.large {\n --icon-gap: 2rem;\n --gap: 2rem;\n --padding: 2rem;\n --text-size: 1.125rem;\n}\n\n/* Rows configuration */\n.rows1 {\n grid-template-rows: auto;\n}\n\n.rows2 {\n grid-template-rows: repeat(2, auto);\n}\n\n.rows3 {\n grid-template-rows: repeat(3, auto);\n}\n\n.rows4 {\n grid-template-rows: repeat(4, auto);\n}\n\n/* Item styling */\n.item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: calc(var(--icon-gap) * 0.5);\n text-decoration: none;\n transition: opacity 0.2s ease;\n color: inherit;\n}\n\n.item:hover {\n opacity: 0.8;\n}\n\n.iconWrapper {\n --item-icon-color: var(--icon-color);\n --item-icon-hover-color: var(--icon-hover-color);\n \n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--icon-gap);\n height: var(--icon-gap);\n color: var(--item-icon-color);\n transition: color 0.2s ease;\n}\n\n.item:hover .iconWrapper {\n color: var(--item-icon-hover-color);\n}\n\n.text {\n font-size: var(--text-size);\n color: var(--text-color);\n text-align: var(--text-align);\n word-break: break-word;\n max-width: 100%;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .container {\n --columns: 2;\n --gap: calc(var(--gap) * 0.75);\n --padding: calc(var(--padding) * 0.75);\n }\n \n .rows2,\n .rows3,\n .rows4 {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, auto);\n }\n}\n\n@media (max-width: 480px) {\n .container {\n --columns: 1;\n --gap: calc(var(--gap) * 0.5);\n --padding: calc(var(--padding) * 0.5);\n }\n \n .rows2,\n .rows3,\n .rows4 {\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n}\n", "\"use client\";\n\nimport React from \"react\";\nimport styles from \"./XSocialContact.module.css\";\n\nexport interface SocialItem {\n id: string;\n href: string;\n label: string;\n icon: React.ReactNode;\n text?: string;\n iconColor?: string;\n iconHoverColor?: string;\n}\n\nexport interface XSocialContactProps {\n items: SocialItem[];\n columns?: number;\n rows?: number;\n size?: \"small\" | \"medium\" | \"large\";\n alignment?: \"left\" | \"center\" | \"right\";\n gap?: string;\n backgroundColor?: string;\n iconDefaultColor?: string;\n iconDefaultHoverColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n borderRadius?: \"rounded\" | \"square\";\n padding?: string;\n textAlign?: \"left\" | \"center\" | \"right\";\n textColor?: string;\n textSize?: string;\n}\n\nexport default function XSocialContact({\n items,\n columns = 3,\n rows,\n size = \"medium\",\n alignment = \"center\",\n gap,\n backgroundColor,\n iconDefaultColor,\n iconDefaultHoverColor,\n borderColor,\n borderWidth,\n borderStyle = \"solid\",\n borderRadius = \"rounded\",\n padding,\n textAlign = \"center\",\n textColor,\n textSize,\n}: XSocialContactProps) {\n const sizeMap = {\n small: \"1rem\",\n medium: \"1.5rem\",\n large: \"2rem\",\n } as const;\n\n const alignmentMap = {\n left: \"flex-start\",\n center: \"center\",\n right: \"flex-end\",\n } as const;\n\n const textAlignMap = {\n left: \"left\",\n center: \"center\",\n right: \"right\",\n } as const;\n\n const radiusMap = {\n rounded: \"0.5rem\",\n square: \"0\",\n } as const;\n\n const defaultGap = gap || (size === \"small\" ? \"1rem\" : size === \"medium\" ? \"1.5rem\" : \"2rem\");\n const defaultPadding =\n padding || (size === \"small\" ? \"1rem\" : size === \"medium\" ? \"1.5rem\" : \"2rem\");\n const defaultTextSize = textSize || (size === \"small\" ? \"0.875rem\" : size === \"medium\" ? \"1rem\" : \"1.125rem\");\n\n const customStyles = {\n \"--columns\": columns.toString(),\n \"--gap\": defaultGap,\n \"--padding\": defaultPadding,\n \"--text-size\": defaultTextSize,\n \"--alignment\": alignmentMap[alignment],\n \"--text-align\": textAlignMap[textAlign],\n \"--icon-gap\": sizeMap[size],\n \"--border-radius\": radiusMap[borderRadius],\n ...(backgroundColor && { \"--bg-color\": backgroundColor }),\n ...(iconDefaultColor && { \"--icon-color\": iconDefaultColor }),\n ...(iconDefaultHoverColor && { \"--icon-hover-color\": iconDefaultHoverColor }),\n ...(borderColor && { \"--border-color\": borderColor }),\n ...(borderWidth && { \"--border-width\": borderWidth }),\n ...(textColor && { \"--text-color\": textColor }),\n \"--border-style\": borderStyle,\n } as React.CSSProperties;\n\n let containerClass = styles.container;\n if (rows) {\n containerClass += ` ${styles[`rows${rows}`]}`;\n }\n\n return (\n <div\n className={`${containerClass} ${styles[size]}`}\n style={customStyles}\n >\n {items.map((item) => (\n <a\n key={item.id}\n href={item.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles.item}\n title={item.label}\n style={{\n ...(item.iconColor && { \"--item-icon-color\": item.iconColor }),\n ...(item.iconHoverColor && { \"--item-icon-hover-color\": item.iconHoverColor }),\n } as React.CSSProperties}\n >\n <div className={styles.iconWrapper}>{item.icon}</div>\n {item.text && <span className={styles.text}>{item.text}</span>}\n </a>\n ))}\n </div>\n );\n}\n", "\"use client\";\n\nimport React, { useState } from \"react\";\n\nexport interface XSocialIconProps extends Omit<React.SVGProps<SVGSVGElement>, \"color\" | \"children\"> {\n size?: number | string;\n color?: string;\n hoverColor?: string;\n fillColor?: string;\n hoverFillColor?: string;\n backgroundColor?: string;\n badgeColor?: string;\n badgeBackgroundColor?: string;\n strokeWidth?: number;\n showBadge?: boolean;\n title?: string;\n}\n\ntype IconPalette = {\n stroke: string;\n fill: string;\n badgeStroke: string;\n badgeFill: string;\n};\n\ntype SocialIconContentProps = {\n palette: IconPalette;\n};\n\ntype SocialIconRenderer = (props: SocialIconContentProps) => React.ReactNode;\n\nfunction XSocialIconShell({\n size = 24,\n color = \"currentColor\",\n hoverColor,\n fillColor,\n hoverFillColor,\n backgroundColor,\n badgeColor,\n badgeBackgroundColor,\n strokeWidth = 1.8,\n showBadge = true,\n title,\n style,\n children,\n ...rest\n}: XSocialIconProps & { children: SocialIconRenderer }) {\n const [isHovered, setIsHovered] = useState(false);\n\n const stroke = isHovered && hoverColor ? hoverColor : color;\n const fill = isHovered && hoverFillColor ? hoverFillColor : fillColor || stroke;\n const badgeStroke = badgeColor || stroke;\n const badgeFill = badgeBackgroundColor || \"transparent\";\n\n const palette = {\n stroke,\n fill,\n badgeStroke,\n badgeFill,\n };\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role={title ? \"img\" : \"presentation\"}\n aria-label={title}\n aria-hidden={title ? undefined : true}\n onPointerEnter={() => setIsHovered(true)}\n onPointerLeave={() => setIsHovered(false)}\n style={{ color: stroke, ...(style ?? {}) }}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10.5\"\n fill={backgroundColor || \"none\"}\n stroke={backgroundColor ? \"none\" : stroke}\n strokeOpacity={backgroundColor ? undefined : 0.14}\n strokeWidth={backgroundColor ? undefined : strokeWidth}\n />\n {children({ palette })}\n {showBadge && (\n <g>\n <circle cx=\"18\" cy=\"18\" r=\"2.6\" fill={badgeFill} stroke={badgeStroke} strokeWidth=\"1\" />\n <path d=\"M17.05 17.05L18.95 18.95M18.95 17.05L17.05 18.95\" stroke={badgeStroke} strokeWidth=\"1.15\" strokeLinecap=\"round\" />\n </g>\n )}\n </svg>\n );\n}\n\nexport function XTelegramIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.8}>\n {({ palette }) => (\n <>\n <path\n d=\"M9.2 12.4l2.15 2.15 5.1-5.1M20.6 4.2L4 12l6.45 1.8 1.8 6.45 2.55-4.2 4.2 2.55 1.6-14.4z\"\n stroke={palette.stroke}\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n <circle cx=\"12\" cy=\"12\" r=\"9.75\" fill=\"none\" stroke={palette.stroke} strokeOpacity=\"0.18\" strokeWidth=\"1\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XInstagramIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <rect x=\"6.2\" y=\"6.2\" width=\"11.6\" height=\"11.6\" rx=\"3.2\" ry=\"3.2\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"3.15\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <circle cx=\"16.3\" cy=\"7.7\" r=\"0.7\" fill={palette.fill} />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XWhatsappIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.5}>\n {({ palette }) => (\n <>\n <path\n d=\"M16.72 13.06c-.29-.15-1.71-.84-1.98-.94-.26-.1-.45-.15-.64.14-.19.29-.74.94-.9 1.13-.16.19-.33.22-.62.08-.29-.15-1.23-.45-2.35-1.45-.87-.77-1.45-1.72-1.62-2.01-.16-.29-.02-.45.12-.59.13-.13.29-.33.43-.49.14-.16.18-.28.27-.47.09-.19.04-.36-.02-.51-.07-.15-.64-1.54-.88-2.1-.23-.55-.47-.48-.64-.49-.16-.01-.36-.01-.55-.01-.19 0-.5.07-.76.36-.26.29-1 1.01-1 2.47 0 1.45 1.04 2.85 1.19 3.05.15.19 2.05 3.12 5.2 4.38.73.31 1.3.49 1.74.63.73.23 1.4.2 1.92.12.59-.09 1.71-.7 1.95-1.37.24-.67.24-1.25.17-1.37-.07-.11-.26-.18-.55-.32z\"\n fill={palette.fill}\n />\n <path\n d=\"M12 3.2C7.13 3.2 3.2 7.13 3.2 12c0 1.56.41 3.02 1.13 4.29L3.2 20.8l4.59-1.09A8.77 8.77 0 0 0 12 20.8c4.87 0 8.8-3.93 8.8-8.8s-3.93-8.8-8.8-8.8z\"\n stroke={palette.stroke}\n strokeWidth=\"1.2\"\n fill=\"none\"\n opacity=\"0.18\"\n />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XEmailIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <rect x=\"4.5\" y=\"7\" width=\"15\" height=\"10\" rx=\"1.4\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <path d=\"M4.6 7.1l7.4 5.5 7.4-5.5\" stroke={palette.stroke} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XLinkedInIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <path d=\"M8.1 9.1l2.6 2.6 4.1-4.1\" stroke={palette.stroke} strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n <path d=\"M6.8 10.2c1.6-1.6 4.3-1.6 5.9 0\" stroke={palette.stroke} strokeWidth=\"1.6\" strokeLinecap=\"round\" fill=\"none\" />\n <rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"3\" ry=\"3\" stroke={palette.stroke} strokeWidth=\"1.4\" fill=\"none\" opacity=\"0.12\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XTwitterIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <path d=\"M7 4l7 8.7L7 21h2.2l7-8.7L21 4h-2.2l-7 8.7L7 4z\" fill={palette.fill} />\n <path d=\"M8 4h2.2l6.2 7.7\" stroke={palette.stroke} strokeWidth=\"1.2\" strokeLinecap=\"round\" fill=\"none\" opacity=\"0.2\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XGitHubIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.35}>\n {({ palette }) => (\n <>\n <path\n d=\"M12 2c5.52 0 10 4.48 10 10 0 4.42-2.87 8.17-6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7 2.78.6 3.37-1.34 3.37-1.34.45-1.16 1.11-1.46 1.11-1.46.91-.62-.07-.61-.07-.61-1 .07-1.53 1.03-1.53 1.03-.89 1.53-2.34 1.54-2.91 1.19-.09-.92-.35-1.54-.63-1.9 2.22-.25 4.55-1.11 4.55-4.94 0-1.09-.39-1.98-1.03-2.68.1-.25.45-1.27-.1-2.65 0 0-.84-.27-2.75 1.03A9.58 9.58 0 0 0 12 6.84c-.85 0-1.7.12-2.51.34-1.91-1.3-2.75-1.03-2.75-1.03-.54 1.38-.2 2.4-.1 2.65-.63.7-1.03 1.59-1.03 2.68 0 3.84 2.33 4.69 4.54 4.94-.29.36-.55.97-.64 1.9-.57.35-2.02.34-2.91-1.19 0 0-.52-.96-1.53-1.03 0 0-.98-.01-.07.61 0 0 .66.3 1.11 1.46 0 0 .59 1.94 3.37 1.34 0 .83-.01 1.46-.01 1.7 0 .26.18.57.68.48C5.87 20.17 3 16.42 3 12 3 6.48 7.48 2 12 2z\"\n fill={palette.fill}\n />\n </>\n )}\n </XSocialIconShell>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/social/index.ts", "esbuild-css-modules-plugin-ns-js::src/components/social/xsocialcontact/XSocialContact.module.css:injector.js", "../../../src/components/social/xsocialcontact/XSocialContact.module.css", "../../../src/components/social/xsocialcontact/XSocialContact.tsx", "../../../src/components/social/xsocialcontact/XSocialIcons.tsx"],
|
|
4
|
+
"sourcesContent": ["export {\n XSocialContact,\n XTelegramIcon,\n XInstagramIcon,\n XWhatsappIcon,\n XEmailIcon,\n XLinkedInIcon,\n XTwitterIcon,\n XGitHubIcon,\n} from \"./xsocialcontact\";\nexport type { SocialItem, XSocialContactProps, XSocialIconProps } from \"./xsocialcontact\";\n", "\nconst content = __content_placeholder__;\nconst digest = __digest_placeholder__; \nconst inject = () => {\n setTimeout(() => {\n if (!globalThis.document) {\n return;\n }\n let root = globalThis.document.querySelector(\"head\");\n if (root && root.shadowRoot) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = globalThis.document.head;\n }\n let container = root.querySelector(\"#_\" + digest);\n if (!container) {\n container = globalThis.document.createElement(\"style\");\n container.id = \"_\" + digest;\n const text = globalThis.document.createTextNode(content);\n container.appendChild(text);\n root.appendChild(container);\n }\n }, 0);\n};\n\nexport { inject };\n ", "import \"esbuild-css-modules-plugin-ns-css:src/components/social/xsocialcontact/XSocialContact.module.css\";\n\nimport { inject } from \"esbuild-css-modules-plugin-ns-js:src/components/social/xsocialcontact/XSocialContact.module.css:injector.js\";\nexport default new Proxy({\n \"container\": \"XSocialContact-module__container_D0-L3a__012\",\n \"iconWrapper\": \"XSocialContact-module__iconWrapper_D0-L3a__012\",\n \"item\": \"XSocialContact-module__item_D0-L3a__012\",\n \"large\": \"XSocialContact-module__large_D0-L3a__012\",\n \"medium\": \"XSocialContact-module__medium_D0-L3a__012\",\n \"rows1\": \"XSocialContact-module__rows1_D0-L3a__012\",\n \"rows2\": \"XSocialContact-module__rows2_D0-L3a__012\",\n \"rows3\": \"XSocialContact-module__rows3_D0-L3a__012\",\n \"rows4\": \"XSocialContact-module__rows4_D0-L3a__012\",\n \"small\": \"XSocialContact-module__small_D0-L3a__012\",\n \"text\": \"XSocialContact-module__text_D0-L3a__012\"\n}, {\n get: function(source, key) {\n inject();\n return source[key];\n }\n});\n ", "\"use client\";\n\nimport React from \"react\";\nimport styles from \"./XSocialContact.module.css\";\n\nexport interface SocialItem {\n id: string;\n href: string;\n label: string;\n icon: React.ReactNode;\n text?: string;\n iconColor?: string;\n iconHoverColor?: string;\n}\n\nexport interface XSocialContactProps {\n items: SocialItem[];\n columns?: number;\n rows?: number;\n size?: \"small\" | \"medium\" | \"large\";\n alignment?: \"left\" | \"center\" | \"right\";\n gap?: string;\n backgroundColor?: string;\n iconDefaultColor?: string;\n iconDefaultHoverColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n borderRadius?: \"rounded\" | \"square\";\n padding?: string;\n textAlign?: \"left\" | \"center\" | \"right\";\n textColor?: string;\n textSize?: string;\n}\n\nexport default function XSocialContact({\n items,\n columns = 3,\n rows,\n size = \"medium\",\n alignment = \"center\",\n gap,\n backgroundColor,\n iconDefaultColor,\n iconDefaultHoverColor,\n borderColor,\n borderWidth,\n borderStyle = \"solid\",\n borderRadius = \"rounded\",\n padding,\n textAlign = \"center\",\n textColor,\n textSize,\n}: XSocialContactProps) {\n const sizeMap = {\n small: \"1rem\",\n medium: \"1.5rem\",\n large: \"2rem\",\n } as const;\n\n const alignmentMap = {\n left: \"flex-start\",\n center: \"center\",\n right: \"flex-end\",\n } as const;\n\n const textAlignMap = {\n left: \"left\",\n center: \"center\",\n right: \"right\",\n } as const;\n\n const radiusMap = {\n rounded: \"0.5rem\",\n square: \"0\",\n } as const;\n\n const defaultGap = gap || (size === \"small\" ? \"1rem\" : size === \"medium\" ? \"1.5rem\" : \"2rem\");\n const defaultPadding =\n padding || (size === \"small\" ? \"1rem\" : size === \"medium\" ? \"1.5rem\" : \"2rem\");\n const defaultTextSize = textSize || (size === \"small\" ? \"0.875rem\" : size === \"medium\" ? \"1rem\" : \"1.125rem\");\n\n const customStyles = {\n \"--columns\": columns.toString(),\n \"--gap\": defaultGap,\n \"--padding\": defaultPadding,\n \"--text-size\": defaultTextSize,\n \"--alignment\": alignmentMap[alignment],\n \"--text-align\": textAlignMap[textAlign],\n \"--icon-gap\": sizeMap[size],\n \"--border-radius\": radiusMap[borderRadius],\n ...(backgroundColor && { \"--bg-color\": backgroundColor }),\n ...(iconDefaultColor && { \"--icon-color\": iconDefaultColor }),\n ...(iconDefaultHoverColor && { \"--icon-hover-color\": iconDefaultHoverColor }),\n ...(borderColor && { \"--border-color\": borderColor }),\n ...(borderWidth && { \"--border-width\": borderWidth }),\n ...(textColor && { \"--text-color\": textColor }),\n \"--border-style\": borderStyle,\n } as React.CSSProperties;\n\n let containerClass = styles.container;\n if (rows) {\n containerClass += ` ${styles[`rows${rows}`]}`;\n }\n\n return (\n <div\n className={`${containerClass} ${styles[size]}`}\n style={customStyles}\n >\n {items.map((item) => (\n <a\n key={item.id}\n href={item.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles.item}\n title={item.label}\n style={{\n ...(item.iconColor && { \"--item-icon-color\": item.iconColor }),\n ...(item.iconHoverColor && { \"--item-icon-hover-color\": item.iconHoverColor }),\n } as React.CSSProperties}\n >\n <div className={styles.iconWrapper}>{item.icon}</div>\n {item.text && <span className={styles.text}>{item.text}</span>}\n </a>\n ))}\n </div>\n );\n}\n", "\"use client\";\n\nimport React, { useState } from \"react\";\n\nexport interface XSocialIconProps extends Omit<React.SVGProps<SVGSVGElement>, \"color\" | \"children\"> {\n size?: number | string;\n color?: string;\n hoverColor?: string;\n fillColor?: string;\n hoverFillColor?: string;\n backgroundColor?: string;\n badgeColor?: string;\n badgeBackgroundColor?: string;\n strokeWidth?: number;\n showBadge?: boolean;\n title?: string;\n}\n\ntype IconPalette = {\n stroke: string;\n fill: string;\n badgeStroke: string;\n badgeFill: string;\n};\n\ntype SocialIconContentProps = {\n palette: IconPalette;\n};\n\ntype SocialIconRenderer = (props: SocialIconContentProps) => React.ReactNode;\n\nfunction XSocialIconShell({\n size = 24,\n color = \"currentColor\",\n hoverColor,\n fillColor,\n hoverFillColor,\n backgroundColor,\n badgeColor,\n badgeBackgroundColor,\n strokeWidth = 1.8,\n showBadge = true,\n title,\n style,\n children,\n ...rest\n}: XSocialIconProps & { children: SocialIconRenderer }) {\n const [isHovered, setIsHovered] = useState(false);\n\n const stroke = isHovered && hoverColor ? hoverColor : color;\n const fill = isHovered && hoverFillColor ? hoverFillColor : fillColor || stroke;\n const badgeStroke = badgeColor || stroke;\n const badgeFill = badgeBackgroundColor || \"transparent\";\n\n const palette = {\n stroke,\n fill,\n badgeStroke,\n badgeFill,\n };\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role={title ? \"img\" : \"presentation\"}\n aria-label={title}\n aria-hidden={title ? undefined : true}\n onPointerEnter={() => setIsHovered(true)}\n onPointerLeave={() => setIsHovered(false)}\n style={{ color: stroke, ...(style ?? {}) }}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10.5\"\n fill={backgroundColor || \"none\"}\n stroke={backgroundColor ? \"none\" : stroke}\n strokeOpacity={backgroundColor ? undefined : 0.14}\n strokeWidth={backgroundColor ? undefined : strokeWidth}\n />\n {children({ palette })}\n {showBadge && (\n <g>\n <circle cx=\"18\" cy=\"18\" r=\"2.6\" fill={badgeFill} stroke={badgeStroke} strokeWidth=\"1\" />\n <path d=\"M17.05 17.05L18.95 18.95M18.95 17.05L17.05 18.95\" stroke={badgeStroke} strokeWidth=\"1.15\" strokeLinecap=\"round\" />\n </g>\n )}\n </svg>\n );\n}\n\nexport function XTelegramIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.8}>\n {({ palette }) => (\n <>\n <path\n d=\"M9.2 12.4l2.15 2.15 5.1-5.1M20.6 4.2L4 12l6.45 1.8 1.8 6.45 2.55-4.2 4.2 2.55 1.6-14.4z\"\n stroke={palette.stroke}\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n <circle cx=\"12\" cy=\"12\" r=\"9.75\" fill=\"none\" stroke={palette.stroke} strokeOpacity=\"0.18\" strokeWidth=\"1\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XInstagramIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <rect x=\"6.2\" y=\"6.2\" width=\"11.6\" height=\"11.6\" rx=\"3.2\" ry=\"3.2\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"3.15\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <circle cx=\"16.3\" cy=\"7.7\" r=\"0.7\" fill={palette.fill} />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XWhatsappIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.5}>\n {({ palette }) => (\n <>\n <path\n d=\"M16.72 13.06c-.29-.15-1.71-.84-1.98-.94-.26-.1-.45-.15-.64.14-.19.29-.74.94-.9 1.13-.16.19-.33.22-.62.08-.29-.15-1.23-.45-2.35-1.45-.87-.77-1.45-1.72-1.62-2.01-.16-.29-.02-.45.12-.59.13-.13.29-.33.43-.49.14-.16.18-.28.27-.47.09-.19.04-.36-.02-.51-.07-.15-.64-1.54-.88-2.1-.23-.55-.47-.48-.64-.49-.16-.01-.36-.01-.55-.01-.19 0-.5.07-.76.36-.26.29-1 1.01-1 2.47 0 1.45 1.04 2.85 1.19 3.05.15.19 2.05 3.12 5.2 4.38.73.31 1.3.49 1.74.63.73.23 1.4.2 1.92.12.59-.09 1.71-.7 1.95-1.37.24-.67.24-1.25.17-1.37-.07-.11-.26-.18-.55-.32z\"\n fill={palette.fill}\n />\n <path\n d=\"M12 3.2C7.13 3.2 3.2 7.13 3.2 12c0 1.56.41 3.02 1.13 4.29L3.2 20.8l4.59-1.09A8.77 8.77 0 0 0 12 20.8c4.87 0 8.8-3.93 8.8-8.8s-3.93-8.8-8.8-8.8z\"\n stroke={palette.stroke}\n strokeWidth=\"1.2\"\n fill=\"none\"\n opacity=\"0.18\"\n />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XEmailIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <rect x=\"4.5\" y=\"7\" width=\"15\" height=\"10\" rx=\"1.4\" stroke={palette.stroke} strokeWidth=\"1.6\" fill=\"none\" />\n <path d=\"M4.6 7.1l7.4 5.5 7.4-5.5\" stroke={palette.stroke} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XLinkedInIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <path d=\"M8.1 9.1l2.6 2.6 4.1-4.1\" stroke={palette.stroke} strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n <path d=\"M6.8 10.2c1.6-1.6 4.3-1.6 5.9 0\" stroke={palette.stroke} strokeWidth=\"1.6\" strokeLinecap=\"round\" fill=\"none\" />\n <rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"3\" ry=\"3\" stroke={palette.stroke} strokeWidth=\"1.4\" fill=\"none\" opacity=\"0.12\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XTwitterIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.6}>\n {({ palette }) => (\n <>\n <path d=\"M7 4l7 8.7L7 21h2.2l7-8.7L21 4h-2.2l-7 8.7L7 4z\" fill={palette.fill} />\n <path d=\"M8 4h2.2l6.2 7.7\" stroke={palette.stroke} strokeWidth=\"1.2\" strokeLinecap=\"round\" fill=\"none\" opacity=\"0.2\" />\n </>\n )}\n </XSocialIconShell>\n );\n}\n\nexport function XGitHubIcon(props: XSocialIconProps) {\n return (\n <XSocialIconShell {...props} strokeWidth={props.strokeWidth ?? 1.35}>\n {({ palette }) => (\n <>\n <path\n d=\"M12 2c5.52 0 10 4.48 10 10 0 4.42-2.87 8.17-6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7 2.78.6 3.37-1.34 3.37-1.34.45-1.16 1.11-1.46 1.11-1.46.91-.62-.07-.61-.07-.61-1 .07-1.53 1.03-1.53 1.03-.89 1.53-2.34 1.54-2.91 1.19-.09-.92-.35-1.54-.63-1.9 2.22-.25 4.55-1.11 4.55-4.94 0-1.09-.39-1.98-1.03-2.68.1-.25.45-1.27-.1-2.65 0 0-.84-.27-2.75 1.03A9.58 9.58 0 0 0 12 6.84c-.85 0-1.7.12-2.51.34-1.91-1.3-2.75-1.03-2.75-1.03-.54 1.38-.2 2.4-.1 2.65-.63.7-1.03 1.59-1.03 2.68 0 3.84 2.33 4.69 4.54 4.94-.29.36-.55.97-.64 1.9-.57.35-2.02.34-2.91-1.19 0 0-.52-.96-1.53-1.03 0 0-.98-.01-.07.61 0 0 .66.3 1.11 1.46 0 0 .59 1.94 3.37 1.34 0 .83-.01 1.46-.01 1.7 0 .26.18.57.68.48C5.87 20.17 3 16.42 3 12 3 6.48 7.48 2 12 2z\"\n fill={palette.fill}\n />\n </>\n )}\n </XSocialIconShell>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_jsx_runtime"]
|
|
7
7
|
}
|