athlefi-ui 0.1.0

package/LICENSE

@@ -0,0 +1,32 @@
+Business Source License 1.1
+
+Licensor: Grupo DedSec S.A. de C.V.
+
+Product: athlefi_home_webpage
+
+Additional Use Grant: None
+
+Change Date: Indefinido (esta licencia no se convertirá automáticamente en una licencia de software libre)
+
+Change License: No aplica
+
+Effective Date: 30 de Junio de 2025
+
+Licencia:
+
+El uso de este código fuente está sujeto a los términos de la Business Source License 1.1 (la "Licencia"). Tal como se usa en esta Licencia, el "Producto" se refiere al conjunto de archivos de código fuente contenidos en este repositorio, identificado como athlefi_home_webpage, propiedad de Grupo DedSec S.A. de C.V.
+
+Durante el período previo a cualquier cambio de licencia (que en este caso no está programado), solo se permite el uso no comercial del Producto. Se prohíbe expresamente:
+
+El uso comercial sin autorización escrita del Licenciante.
+La modificación, redistribución, sublicenciamiento o derivación del código con fines comerciales.
+
+Uso comercial se define como cualquier uso con intención directa o indirecta de beneficio económico, incluyendo ofrecer servicios, productos o soluciones que incluyan este código o sus derivados.
+
+Para solicitar una licencia de uso comercial, comunícate a: admin@dedsec.com.mx
+
+SIN GARANTÍA:
+Este software se proporciona “tal cual” y sin garantía expresa o implícita. El uso corre por cuenta del usuario.
+
+Para más detalles sobre la Business Source License 1.1, consulta:
+https://mariadb.com/bsl11/

package/README.md

@@ -0,0 +1,119 @@
+<!-- AI-CONTEXT: Repositorio oficial de la librería UI del ecosistema AthleFi. Basada en Componentes Astro, TypeScript y Design Tokens. Se utiliza como fuente única de verdad visual para todas las aplicaciones del ecosistema. Este archivo README está optimizado para IA y servirá como prompt contextual. -->
+📌 CONTEXTO
+
+Este repositorio pertenece al ecosistema AthleFi, una plataforma compuesta por múltiples aplicaciones y microservicios.
+Estas apps comparten estilos, colores y patrones de diseño, pero viven en repositorios independientes.
+
+Para evitar duplicación, inconsistencias visuales y deuda técnica, se creó este proyecto:
+
+➡️ Una librería UI centralizada para el ecosistema AthleFi.
+➡️ Basada en Componentes Astro + TypeScript.
+➡️ Consumida por todos los microfrontends Astro del ecosistema.
+
+🎯 OBJETIVO DEL REPOSITORIO
+
+Ser la fuente única de verdad visual del ecosistema AthleFi.
+
+Unificar colores, tipografías, tamaños, layouts y componentes.
+
+Funcionar en cualquier aplicación sin depender de un framework.
+
+Servir como base para microfrontends modulares.
+
+Permitir actualizaciones controladas mediante versionado semántico.
+
+📦 TECNOLOGÍAS CLAVE
+
+Astro Components (.astro)
+
+TypeScript
+
+Scoped Styles para aislamiento
+
+Design Tokens (colors.css, typography.css)
+
+Bundling con Vite (integrado en Astro)
+
+🗂️ ESTRUCTURA DEL PROYECTO
+athlefi-ui/
+└── src/
+    ├── tokens/                 # Design Tokens globales
+    │   ├── colors.css
+    │   └── typography.css
+    │
+    ├── components/             # Componentes Astro reutilizables
+    │   ├── atoms/              # Átomos (Button, Input, etc.)
+    │   ├── molecules/          # Moléculas (SearchBar, Card, etc.)
+    │   ├── organisms/          # Organismos (Header, Footer, etc.)
+    │   └── templates/          # Templates (Layouts)
+    │
+    └── index.ts                # Entry point que exporta componentes
+
+package.json
+tsconfig.json
+
+🚀 USO EN MICROFRONTENDS ASTRO
+
+Instalar:
+
+npm install @athlefi/ui
+
+
+Importar componentes:
+
+---
+import { Button } from "@athlefi/ui";
+---
+
+<Button variant="primary">Invertir ahora</Button>
+
+🧩 FILOSOFÍA DE DISEÑO
+
+Componentes Astro nativos para todos los microfrontends.
+
+Atomic Design: tokens → átomos → moléculas → organismos → templates.
+
+UI sin lógica de negocio.
+
+Scoped Styles para evitar conflictos.
+
+Tokens globales como fuente de verdad visual.
+
+TypeScript para type-safety en props.
+
+📘 GLOSARIO (para IA y desarrolladores)
+Término	Definición
+AthleFi	Plataforma de inversión y análisis para atletas.
+UI Library	Conjunto de componentes Astro reutilizables.
+Componente Astro	Archivo .astro con markup, scripts y estilos.
+Design Token	Variable de diseño (color, espaciado, fuente).
+Microfrontend	App Astro independiente que consume esta librería.
+Atomic Design	Metodología de diseño (átomos → moléculas → organismos).
+🛠️ BUILD
+
+Generar build:
+
+npm run build
+
+
+Salida en dist/:
+
+define.mjs (ESM)
+
+define.cjs (CJS)
+
+Tipos .d.ts
+
+👥 CONTRIBUIR
+
+Crear rama feature
+
+Añadir nuevo token o componente
+
+Documentarlo
+
+Abrir Pull Request
+
+Mantener consistencia con Atomic Design
+
+Nunca incluir lógica de negocio

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "athlefi-ui",
+  "version": "0.1.0",
+  "description": "Librería UI centralizada del ecosistema AthleFi basada en Componentes Astro",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./tokens/colors.css": "./src/tokens/colors.css",
+    "./tokens/typography.css": "./src/tokens/typography.css",
+    "./components/*": "./src/components/*.astro"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "astro check --watch",
+    "typecheck": "astro check",
+    "prepublishOnly": "npm run typecheck"
+  },
+  "keywords": [
+    "astro-component",
+    "withastro",
+    "ui-library",
+    "design-system",
+    "athlefi",
+    "css"
+  ],
+  "author": "Grupo DedSec S.A. de C.V.",
+  "license": "BUSL-1.1",
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.6",
+    "astro": "^4.16.19",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/athlefi/athlefi-ui.git"
+  },
+  "homepage": "https://github.com/athlefi/athlefi-ui#readme"
+}

package/src/components/atoms/Button.astro

@@ -0,0 +1,79 @@
+---
+interface Props {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 's' | 'm' | 'l';
+  disabled?: boolean;
+}
+
+const { 
+  variant = 'primary', 
+  size = 'm',
+  disabled = false 
+} = Astro.props;
+---
+
+<button 
+  class={`btn btn--${variant} btn--${size}`}
+  disabled={disabled}
+>
+  <slot />
+</button>
+
+<style>
+  .btn {
+    font-family: var(--font-family-manrope);
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+  }
+
+  /* Variantes */
+  .btn--primary {
+    background-color: var(--color-primary-60);
+    color: var(--color-white);
+  }
+
+  .btn--primary:hover:not(:disabled) {
+    background-color: var(--color-primary-30);
+  }
+
+  .btn--secondary {
+    background-color: var(--color-gray-light);
+    color: var(--color-primary-90);
+  }
+
+  .btn--tertiary {
+    background-color: transparent;
+    color: var(--color-primary-60);
+    border: 2px solid var(--color-primary-60);
+  }
+
+  /* Tamaños */
+  .btn--s {
+    font-size: var(--font-size-button-s);
+    font-weight: var(--font-weight-button-s);
+    padding: 8px 16px;
+  }
+
+  .btn--m {
+    font-size: var(--font-size-button-m);
+    font-weight: var(--font-weight-button-m);
+    padding: 12px 24px;
+  }
+
+  .btn--l {
+    font-size: var(--font-size-button-l);
+    font-weight: var(--font-weight-button-l);
+    padding: 16px 32px;
+  }
+
+  /* Disabled */
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>
+
+
+

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

package/src/index.ts

@@ -0,0 +1,30 @@
+// Entry point de @athlefi/ui
+// Exporta todos los componentes Astro del ecosistema
+
+// ============================================
+// ÁTOMOS
+// ============================================
+export { default as Button } from "./components/atoms/Button.astro";
+// export { default as Input } from "./components/atoms/Input.astro";
+// export { default as Label } from "./components/atoms/Label.astro";
+
+// ============================================
+// MOLÉCULAS
+// ============================================
+// export { default as SearchBar } from "./components/molecules/SearchBar.astro";
+// export { default as Card } from "./components/molecules/Card.astro";
+
+// ============================================
+// ORGANISMOS
+// ============================================
+// export { default as Header } from "./components/organisms/Header.astro";
+// export { default as Footer } from "./components/organisms/Footer.astro";
+
+// ============================================
+// TEMPLATES
+// ============================================
+// export { default as MainLayout } from "./components/templates/MainLayout.astro";
+
+// Nota: Los exports están comentados porque aún no hemos creado los componentes.
+// Una vez creados, descomentar estas líneas según los componentes disponibles.
+

package/src/tokens/colors.css

@@ -0,0 +1,14 @@
+@theme {
+    --color-primary-90: #06080e;
+    --color-primary-60: #01eac7;
+    --color-primary-30: #0890d1;
+  
+    --color-white: #ffffff;
+    --color-gray-medium: #d9d9d9;
+    --color-gray-light: #f2f2f2;
+  
+    /* Colores semánticos */
+    --color-success: #25a249;
+    --color-warning: #f1c21b;
+    --color-error: #da1e28;
+  }

package/src/tokens/typography.css

@@ -0,0 +1,307 @@
+@theme {
+    /* Familia de fuentes */
+    --font-family-manrope: "Manrope", sans-serif;
+  
+    /* ======================
+       HEADINGS
+       ====================== */
+    /* Heading 1 */
+    --font-size-h1: 4.6875rem; /* 75px */
+    --font-weight-h1: 700; /* Bold */
+    --line-height-h1: 1.1; /* 80% */
+    --letter-spacing-h1: 0; /* 0px */
+  
+    /* Heading 2 */
+    --font-size-h2: 2.625rem; /* 42px */
+    --font-weight-h2: 700; /* Bold */
+    --line-height-h2: normal; /* Auto */
+    --letter-spacing-h2: 0; /* 0px */
+  
+    /* Heading 3 */
+    --font-size-h3: 2rem; /* 32px */
+    --font-weight-h3: 700; /* Bold */
+    --line-height-h3: normal; /* Auto */
+    --letter-spacing-h3: 0; /* 0px */
+  
+    /* Heading 4 */
+    --font-size-h4: 1.5rem; /* 24px */
+    --font-weight-h4: 700; /* Bold */
+    --line-height-h4: normal; /* Auto */
+    --letter-spacing-h4: 0; /* 0px */
+  
+    /* Heading 5 */
+    --font-size-h5: 1.25rem; /* 20px */
+    --font-weight-h5: 700; /* Bold */
+    --line-height-h5: normal; /* Auto */
+    --letter-spacing-h5: 0; /* 0px */
+  
+    /* Heading 6 */
+    --font-size-h6: 1.125rem; /* 18px */
+    --font-weight-h6: 700; /* Bold */
+    --line-height-h6: normal; /* Auto */
+    --letter-spacing-h6: 0; /* 0px */
+  
+    /* ======================
+       SUBTITLES
+       ====================== */
+    /* Subtitle Medium */
+    --font-size-subtitle-m: 1rem; /* 16px */
+    --font-weight-subtitle-m: 500; /* Medium */
+    --line-height-subtitle-m: normal; /* Auto */
+    --letter-spacing-subtitle-m: 0; /* 0px */
+  
+    /* Subtitle Small */
+    --font-size-subtitle-s: 0.875rem; /* 14px */
+    --font-weight-subtitle-s: 500; /* Medium */
+    --line-height-subtitle-s: normal; /* Auto */
+    --letter-spacing-subtitle-s: 0; /* 0px */
+  
+    /* ======================
+       BODY TEXT
+       ====================== */
+    /* Body Large */
+    --font-size-body-l: 1.125rem; /* 18px */
+    --font-weight-body-l: 400; /* Regular */
+    --line-height-body-l: normal; /* Auto */
+    --letter-spacing-body-l: 0; /* 0px */
+  
+    /* Body Medium */
+    --font-size-body-m: 1rem; /* 16px */
+    --font-weight-body-m: 400; /* Regular */
+    --line-height-body-m: normal; /* Auto */
+    --letter-spacing-body-m: 0; /* 0px */
+  
+    /* Body Small */
+    --font-size-body-s: 0.875rem; /* 14px */
+    --font-weight-body-s: 400; /* Regular */
+    --line-height-body-s: normal; /* Auto */
+    --letter-spacing-body-s: 0; /* 0px */
+  
+    /* Body Extra Small */
+    --font-size-body-xs: 0.75rem; /* 12px */
+    --font-weight-body-xs: 400; /* Regular */
+    --line-height-body-xs: normal; /* Auto */
+    --letter-spacing-body-xs: 0; /* 0px */
+  
+    /* Body Extra Extra Small */
+    --font-size-body-xxs: 0.625rem; /* 10px */
+    --font-weight-body-xxs: 400; /* Regular */
+    --line-height-body-xxs: normal; /* Auto */
+    --letter-spacing-body-xxs: 0; /* 0px */
+  
+    /* ======================
+       UI ELEMENTS
+       ====================== */
+    /* Caption */
+    --font-size-caption: 1.25rem; /* 20px */
+    --font-weight-caption: 700; /* Bold */
+    --line-height-caption: normal; /* Auto */
+    --letter-spacing-caption: 0; /* 0px */
+  
+    /* Button Large */
+    --font-size-button-l: 1.25rem; /* 20px */
+    --font-weight-button-l: 500; /* Medium */
+    --line-height-button-l: normal; /* Auto */
+    --letter-spacing-button-l: 0; /* 0px */
+  
+    /* Button Medium */
+    --font-size-button-m: 1rem; /* 16px */
+    --font-weight-button-m: 500; /* Medium */
+    --line-height-button-m: normal; /* Auto */
+    --letter-spacing-button-m: 0; /* 0px */
+  
+    /* Button Small */
+    --font-size-button-s: 0.875rem; /* 14px */
+    --font-weight-button-s: 500; /* Medium */
+    --line-height-button-s: normal; /* Auto */
+    --letter-spacing-button-s: 0; /* 0px */
+  
+    /* Menu & Tabs */
+    --font-size-menu: 1rem; /* 16px */
+    --font-weight-menu: 500; /* Medium */
+    --line-height-menu: normal; /* Auto */
+    --letter-spacing-menu: 0; /* 0px */
+  
+    /* ======================
+       UTILITY CLASSES
+       ====================== */
+    /* Pesos de fuente */
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+  
+    /* Tamaños base para flexibilidad */
+    --font-size-xs: 0.75rem; /* 12px */
+    --font-size-sm: 0.875rem; /* 14px */
+    --font-size-base: 1rem; /* 16px */
+    --font-size-lg: 1.125rem; /* 18px */
+    --font-size-xl: 1.25rem; /* 20px */
+    --font-size-2xl: 1.5rem; /* 24px */
+    --font-size-3xl: 2rem; /* 32px */
+    --font-size-4xl: 2.625rem; /* 42px */
+    --font-size-5xl: 4.6875rem; /* 75px */
+  }
+  
+  @font-face {
+    font-family: "Manrope";
+    src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  
+  /* ======================
+     CLASES COMPUESTAS
+     ====================== */
+  .h1-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h1);
+    font-weight: var(--font-weight-h1);
+    line-height: var(--line-height-h1);
+    letter-spacing: var(--letter-spacing-h1);
+  }
+  
+  .h2-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-h2);
+    line-height: var(--line-height-h2);
+    letter-spacing: var(--letter-spacing-h2);
+  }
+  
+  .h3-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    line-height: var(--line-height-h3);
+    letter-spacing: var(--letter-spacing-h3);
+  }
+  
+  .h4-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h4);
+    font-weight: var(--font-weight-h4);
+    line-height: var(--line-height-h4);
+    letter-spacing: var(--letter-spacing-h4);
+  }
+  
+  .h5-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h5);
+    font-weight: var(--font-weight-h5);
+    line-height: var(--line-height-h5);
+    letter-spacing: var(--letter-spacing-h5);
+  }
+  
+  .h6-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h6);
+    font-weight: var(--font-weight-h6);
+    line-height: var(--line-height-h6);
+    letter-spacing: var(--letter-spacing-h6);
+  }
+  
+  /* ======================
+     SUBTÍTULOS
+     ====================== */
+  .subtitle-m-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-subtitle-m);
+    font-weight: var(--font-weight-subtitle-m);
+    line-height: var(--line-height-subtitle-m);
+    letter-spacing: var(--letter-spacing-subtitle-m);
+  }
+  
+  .subtitle-s-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-subtitle-s);
+    font-weight: var(--font-weight-subtitle-s);
+    line-height: var(--line-height-subtitle-s);
+    letter-spacing: var(--letter-spacing-subtitle-s);
+  }
+  
+  /* ======================
+     TEXTO CORPO
+     ====================== */
+  .body-l-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-l);
+    font-weight: var(--font-weight-body-l);
+    line-height: var(--line-height-body-l);
+    letter-spacing: var(--letter-spacing-body-l);
+  }
+  
+  .body-m-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-m);
+    font-weight: var(--font-weight-body-m);
+    line-height: var(--line-height-body-m);
+    letter-spacing: var(--letter-spacing-body-m);
+  }
+  
+  .body-s-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-s);
+    font-weight: var(--font-weight-body-s);
+    line-height: var(--line-height-body-s);
+    letter-spacing: var(--letter-spacing-body-s);
+  }
+  
+  .body-xs-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-xs);
+    font-weight: var(--font-weight-body-xs);
+    line-height: var(--line-height-body-xs);
+    letter-spacing: var(--letter-spacing-body-xs);
+  }
+  
+  .body-xxs-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-xxs);
+    font-weight: var(--font-weight-body-xxs);
+    line-height: var(--line-height-body-xxs);
+    letter-spacing: var(--letter-spacing-body-xxs);
+  }
+  
+  /* ======================
+     ELEMENTOS UI
+     ====================== */
+  .caption-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-caption);
+    line-height: var(--line-height-caption);
+    letter-spacing: var(--letter-spacing-caption);
+  }
+  
+  .button-l-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-button-l);
+    font-weight: var(--font-weight-button-l);
+    line-height: var(--line-height-button-l);
+    letter-spacing: var(--letter-spacing-button-l);
+  }
+  
+  .button-m-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-button-m);
+    font-weight: var(--font-weight-button-m);
+    line-height: var(--line-height-button-m);
+    letter-spacing: var(--letter-spacing-button-m);
+  }
+  
+  .button-s-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-button-s);
+    font-weight: var(--font-weight-button-s);
+    line-height: var(--line-height-button-s);
+    letter-spacing: var(--letter-spacing-button-s);
+  }
+  
+  .menu-style {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-menu);
+    font-weight: var(--font-weight-menu);
+    line-height: var(--line-height-menu);
+    letter-spacing: var(--letter-spacing-menu);
+  }