@jjlmoya/utils-babies 1.1.0

package/src/tool/baby-size-converter/style.css

@@ -0,0 +1,394 @@
+.baby-size-converter {
+  --bsc-bg: #fff;
+  --bsc-bg-muted: #fbfbfc;
+  --bsc-bg-alt: #f1f5f9;
+  --bsc-bg-dark: #0f172a;
+  --bsc-text: #0f172a;
+  --bsc-text-muted: #1e293b;
+  --bsc-text-dim: #64748b;
+  --bsc-text-faint: #94a3b8;
+  --bsc-text-lighter: #cbd5e1;
+  --bsc-border: #e2e8f0;
+  --bsc-border-inner: #f1f5f9;
+  --bsc-primary: #6366f1;
+  --bsc-primary-on: #fff;
+  --bsc-primary-soft: #eef2ff;
+  --bsc-primary-dark: #4f46e5;
+  --bsc-success: #10b981;
+  --bsc-error: #f43f5e;
+  --bsc-fit-large: #10b981;
+  --bsc-fit-small: #f43f5e;
+
+  width: 100%;
+}
+
+.theme-dark .baby-size-converter {
+  --bsc-bg: #0f172a;
+  --bsc-bg-muted: rgba(30, 41, 59, 0.15);
+  --bsc-bg-alt: #0f172a;
+  --bsc-bg-dark: #0f172a;
+  --bsc-text: #f1f5f9;
+  --bsc-text-muted: #f1f5f9;
+  --bsc-text-dim: #94a3b8;
+  --bsc-text-faint: #94a3b8;
+  --bsc-text-lighter: #cbd5e1;
+  --bsc-border: #1e293b;
+  --bsc-border-inner: #1e293b;
+  --bsc-primary: #818cf8;
+  --bsc-primary-on: #fff;
+  --bsc-primary-soft: rgba(99, 102, 241, 0.1);
+  --bsc-primary-dark: #818cf8;
+  --bsc-success: #10b981;
+  --bsc-error: #f43f5e;
+  --bsc-fit-large: #10b981;
+  --bsc-fit-small: #f43f5e;
+}
+
+.baby-size-converter-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background: var(--bsc-bg);
+  border: 1px solid var(--bsc-border);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
+@media (max-width: 720px) {
+  .baby-size-converter-main {
+    grid-template-columns: 1fr;
+  }
+}
+
+.baby-size-converter-left {
+  padding: 1.5rem;
+  border-right: 1px solid var(--bsc-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+@media (max-width: 720px) {
+  .baby-size-converter-left {
+    border-right: none;
+    border-bottom: 1px solid var(--bsc-border);
+  }
+}
+
+.baby-size-converter-right {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: var(--bsc-bg-muted);
+}
+
+.baby-size-converter-section-marker {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--bsc-text-dim);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--bsc-border);
+}
+
+.baby-size-converter-unit-nav {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--bsc-bg-alt);
+  border-radius: 0.5rem;
+  padding: 0.2rem;
+}
+
+.baby-size-converter-unit-tab {
+  flex: 1;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 0.35rem;
+  background: transparent;
+  color: var(--bsc-text-dim);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.baby-size-converter-unit-tab.active {
+  background: var(--bsc-primary);
+  color: var(--bsc-primary-on);
+}
+
+.baby-size-converter-num-ctrl {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.baby-size-converter-num-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--bsc-text-muted);
+}
+
+.baby-size-converter-stepper-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.baby-size-converter-btn-step {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.4rem;
+  background: var(--bsc-bg);
+  color: var(--bsc-text);
+  font-size: 1.1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.baby-size-converter-btn-step:hover {
+  background: var(--bsc-primary-soft);
+  border-color: var(--bsc-primary);
+  color: var(--bsc-primary);
+}
+
+.baby-size-converter-val-view {
+  flex: 1;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+.baby-size-converter-val-big {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--bsc-text);
+}
+
+.baby-size-converter-val-sub {
+  font-size: 0.75rem;
+  color: var(--bsc-text-dim);
+}
+
+.baby-size-converter-slider-line {
+  width: 100%;
+  accent-color: var(--bsc-primary);
+  cursor: pointer;
+}
+
+.baby-size-converter-select-box {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.5rem;
+  background: var(--bsc-bg);
+  color: var(--bsc-text);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.baby-size-converter-age-rack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.baby-size-converter-age-tile {
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--bsc-border);
+  border-radius: 999px;
+  background: var(--bsc-bg);
+  color: var(--bsc-text-dim);
+  font-size: 0.72rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.baby-size-converter-age-tile:hover {
+  background: var(--bsc-primary-soft);
+  border-color: var(--bsc-primary);
+  color: var(--bsc-primary);
+}
+
+.baby-size-converter-res-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.baby-size-converter-res-size-main {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--bsc-primary);
+  line-height: 1;
+}
+
+.baby-size-converter-res-brand-hint {
+  font-size: 0.9rem;
+  color: var(--bsc-text-muted);
+  font-weight: 600;
+}
+
+.baby-size-converter-fit-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+  background: var(--bsc-bg-alt);
+  color: var(--bsc-text-dim);
+}
+
+.baby-size-converter-fit-large {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--bsc-fit-large);
+}
+
+.baby-size-converter-fit-small {
+  background: rgba(244, 63, 94, 0.1);
+  color: var(--bsc-fit-small);
+}
+
+.baby-size-converter-share-btn {
+  margin-left: auto;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.4rem;
+  background: var(--bsc-bg);
+  color: var(--bsc-text-dim);
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.baby-size-converter-share-btn:hover {
+  background: var(--bsc-primary-soft);
+  border-color: var(--bsc-primary);
+  color: var(--bsc-primary);
+}
+
+.baby-size-converter-clothes-meta {
+  background: var(--bsc-bg);
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+
+.baby-size-converter-meta-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--bsc-text-dim);
+  margin-bottom: 0.5rem;
+}
+
+.baby-size-converter-meta-vals {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.baby-size-converter-meta-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.baby-size-converter-equivalents-grid-box {
+  background: var(--bsc-bg);
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.baby-size-converter-eq-head-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  background: var(--bsc-bg-alt);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--bsc-text-dim);
+}
+
+.baby-size-converter-eq-col-name {
+  color: var(--bsc-text-dim);
+}
+
+.baby-size-converter-eq-data-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--bsc-border-inner);
+  font-size: 0.82rem;
+  color: var(--bsc-text);
+  transition: background 0.1s;
+}
+
+.baby-size-converter-eq-data-row:hover {
+  background: var(--bsc-bg-muted);
+}
+
+.baby-size-converter-eq-active {
+  background: var(--bsc-primary-soft);
+}
+
+.baby-size-converter-eq-active .baby-size-converter-eq-size-v {
+  color: var(--bsc-primary);
+  font-weight: 700;
+}
+
+.baby-size-converter-eq-brand-v {
+  color: var(--bsc-text-muted);
+}
+
+.baby-size-converter-eq-size-v {
+  font-weight: 600;
+}
+
+.baby-size-converter-brand-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.baby-size-converter-pro-tip-footer {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  background: var(--bsc-primary-soft);
+  border: 1px solid var(--bsc-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.baby-size-converter-footer-icon {
+  font-size: 1rem;
+  color: var(--bsc-primary);
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+
+.baby-size-converter-footer-text {
+  font-size: 0.78rem;
+  color: var(--bsc-text-muted);
+  line-height: 1.5;
+}
+
+.baby-size-converter-hidden {
+  display: none;
+}

package/src/tool/fertile-days-estimator/bibliography.astro

@@ -0,0 +1,7 @@
+---
+import { Bibliography as BibliographyUI } from '@jjlmoya/utils-shared';
+import type { BibliographyEntry } from '../../types';
+interface Props { links?: BibliographyEntry[]; title: string; }
+const { links = [], title } = Astro.props;
+---
+<BibliographyUI links={links} title={title} />

package/src/tool/fertile-days-estimator/component.astro

@@ -0,0 +1,265 @@
+---
+import './style.css';
+import type { FertileDaysEstimatorUI } from './index';
+interface Props { ui: FertileDaysEstimatorUI; }
+const { ui } = Astro.props;
+---
+<div id="fertile-days-estimator-root" class="fertile-days-estimator" data-ui={JSON.stringify(ui)}>
+  <div class="fertile-days-estimator-step-indicator">
+    <div class="fertile-days-estimator-step-item active" id="fde-step-1-indicator">
+      <span class="fertile-days-estimator-step-number">1</span>
+      <span>{ui.step1Indicator}</span>
+    </div>
+    <div class="fertile-days-estimator-step-item" id="fde-step-2-indicator">
+      <span class="fertile-days-estimator-step-number">2</span>
+      <span>{ui.step2Indicator}</span>
+    </div>
+  </div>
+
+  <div class="fertile-days-estimator-step-first" id="fde-step-first">
+    <h2 class="fertile-days-estimator-step-title">{ui.step1Title}</h2>
+    <p class="fertile-days-estimator-step-subtitle">{ui.step1Desc}</p>
+    <p class="fertile-days-estimator-pulse-hint">{ui.pulseHint}</p>
+    <div class="fertile-days-estimator-calendar" id="fde-calendar-initial">
+      <div class="fertile-days-estimator-calendar-nav">
+        <span id="fde-month-label-initial" class="fertile-days-estimator-month-label"></span>
+        <div class="fertile-days-estimator-nav-buttons">
+          <button class="fertile-days-estimator-nav-btn" id="fde-prev-initial" aria-label="Mes anterior">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <button class="fertile-days-estimator-nav-btn" id="fde-next-initial" aria-label="Mes siguiente">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="fertile-days-estimator-calendar-grid" id="fde-grid-initial"></div>
+    </div>
+  </div>
+
+  <div class="fertile-days-estimator-layout" id="fde-layout">
+    <aside class="fertile-days-estimator-sidebar">
+      <div class="fertile-days-estimator-sidebar-header">
+        <strong>{ui.sidebarTitle}</strong>
+        <p>{ui.sidebarDesc}</p>
+      </div>
+      <div class="fertile-days-estimator-input-card">
+        <label class="fertile-days-estimator-range-label" for="fde-cycle-length">{ui.labelCycleLength}</label>
+        <div class="fertile-days-estimator-range-control">
+          <input
+            type="range"
+            id="fde-cycle-length"
+            min="21"
+            max="35"
+            value="28"
+            class="fertile-days-estimator-range-input"
+          />
+          <span class="fertile-days-estimator-range-value" id="fde-cycle-value">28 <span>{ui.unitDays}</span></span>
+        </div>
+      </div>
+      <div class="fertile-days-estimator-results" id="fde-results">
+        <div class="fertile-days-estimator-stat" id="fde-stat-ovulation">
+          <div class="fertile-days-estimator-stat-dot fertile-days-estimator-stat-dot-ovulation"></div>
+          <div class="fertile-days-estimator-stat-info">
+            <span class="fertile-days-estimator-stat-label">{ui.labelOvulation}</span>
+            <span class="fertile-days-estimator-stat-value" id="fde-val-ovulation">—</span>
+          </div>
+        </div>
+        <div class="fertile-days-estimator-stat" id="fde-stat-fertile">
+          <div class="fertile-days-estimator-stat-dot fertile-days-estimator-stat-dot-fertile"></div>
+          <div class="fertile-days-estimator-stat-info">
+            <span class="fertile-days-estimator-stat-label">{ui.labelFertileWindow}</span>
+            <span class="fertile-days-estimator-stat-value" id="fde-val-fertile">—</span>
+          </div>
+        </div>
+        <div class="fertile-days-estimator-stat" id="fde-stat-period">
+          <div class="fertile-days-estimator-stat-dot fertile-days-estimator-stat-dot-period"></div>
+          <div class="fertile-days-estimator-stat-info">
+            <span class="fertile-days-estimator-stat-label">{ui.labelNextPeriod}</span>
+            <span class="fertile-days-estimator-stat-value" id="fde-val-period">—</span>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="fertile-days-estimator-content">
+      <div class="fertile-days-estimator-calendar" id="fde-calendar-main">
+        <div class="fertile-days-estimator-calendar-nav">
+          <span id="fde-month-label-main" class="fertile-days-estimator-month-label"></span>
+          <div class="fertile-days-estimator-nav-buttons">
+            <button class="fertile-days-estimator-nav-btn" id="fde-prev-main" aria-label="Mes anterior">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+            <button class="fertile-days-estimator-nav-btn" id="fde-next-main" aria-label="Mes siguiente">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="fertile-days-estimator-calendar-grid" id="fde-grid-main"></div>
+      </div>
+      <div class="fertile-days-estimator-legend">
+        <div class="fertile-days-estimator-legend-item">
+          <span class="fertile-days-estimator-legend-dot fertile-days-estimator-legend-dot-selected"></span>
+          <span>{ui.legendSelection}</span>
+        </div>
+        <div class="fertile-days-estimator-legend-item">
+          <span class="fertile-days-estimator-legend-dot fertile-days-estimator-legend-dot-period"></span>
+          <span>{ui.legendPeriod}</span>
+        </div>
+        <div class="fertile-days-estimator-legend-item">
+          <span class="fertile-days-estimator-legend-dot fertile-days-estimator-legend-dot-fertile"></span>
+          <span>{ui.legendFertile}</span>
+        </div>
+        <div class="fertile-days-estimator-legend-item">
+          <span class="fertile-days-estimator-legend-dot fertile-days-estimator-legend-dot-ovulation"></span>
+          <span>{ui.legendOvulation}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateCycle, getDaysInMonth, getMonthStartOffset, getDayType } from './logic';
+  import type { CycleCalcResult } from './logic';
+
+  const root = document.getElementById('fertile-days-estimator-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui as string) as Record<string, string>;
+
+  let selectedDate: Date | null = null;
+  let cycleLength = 28;
+  let result: CycleCalcResult | null = null;
+
+  const now = new Date();
+  let viewDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  const stepFirstEl = root.querySelector('#fde-step-first') as HTMLElement;
+  const layoutEl = root.querySelector('#fde-layout') as HTMLElement;
+  const step1Indicator = root.querySelector('#fde-step-1-indicator') as HTMLElement;
+  const step2Indicator = root.querySelector('#fde-step-2-indicator') as HTMLElement;
+  const cycleLengthInput = root.querySelector('#fde-cycle-length') as HTMLInputElement;
+  const cycleValueEl = root.querySelector('#fde-cycle-value') as HTMLElement;
+  const gridInitial = root.querySelector('#fde-grid-initial') as HTMLElement;
+  const gridMain = root.querySelector('#fde-grid-main') as HTMLElement;
+  const monthLabelInitial = root.querySelector('#fde-month-label-initial') as HTMLElement;
+  const monthLabelMain = root.querySelector('#fde-month-label-main') as HTMLElement;
+  const valOvulation = root.querySelector('#fde-val-ovulation') as HTMLElement;
+  const valFertile = root.querySelector('#fde-val-fertile') as HTMLElement;
+  const valPeriod = root.querySelector('#fde-val-period') as HTMLElement;
+
+  const DAY_HEADERS = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+
+  const fmt = new Intl.DateTimeFormat('es-ES', { day: 'numeric', month: 'short' });
+  const fmtMonth = new Intl.DateTimeFormat('es-ES', { month: 'long', year: 'numeric' });
+
+  function getToday(): Date {
+    const t = new Date();
+    t.setHours(0, 0, 0, 0);
+    return t;
+  }
+
+  function buildGrid(container: HTMLElement, isInitial: boolean): void {
+    container.innerHTML = '';
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const daysInMonth = getDaysInMonth(year, month);
+    const offset = getMonthStartOffset(year, month);
+    const today = getToday();
+    const frag = document.createDocumentFragment();
+    DAY_HEADERS.forEach((h) => {
+      const el = document.createElement('div');
+      el.className = 'fertile-days-estimator-day-header';
+      el.textContent = h;
+      frag.appendChild(el);
+    });
+    for (let i = 0; i < offset; i++) {
+      const el = document.createElement('div');
+      el.className = 'fertile-days-estimator-day fertile-days-estimator-day-empty';
+      frag.appendChild(el);
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      const dayDate = new Date(year, month, d);
+      dayDate.setHours(0, 0, 0, 0);
+      const dayType = getDayType(dayDate, selectedDate, result, today);
+      const el = document.createElement('button');
+      el.className = 'fertile-days-estimator-day';
+      if (dayType) el.classList.add(`fertile-days-estimator-day--${dayType}`);
+      el.textContent = String(d);
+      el.addEventListener('click', () => onDayClick(dayDate, isInitial));
+      frag.appendChild(el);
+    }
+    container.appendChild(frag);
+  }
+
+  function updateMonthLabel(): void {
+    const label = fmtMonth.format(viewDate);
+    monthLabelInitial.textContent = label;
+    monthLabelMain.textContent = label;
+  }
+
+  function updateResults(): void {
+    if (!selectedDate || !result) return;
+    valOvulation.textContent = fmt.format(result.ovulationDate);
+    valFertile.textContent = `${fmt.format(result.fertileStart)} – ${fmt.format(result.ovulationDate)}`;
+    valPeriod.textContent = fmt.format(result.nextPeriod);
+  }
+
+  function renderAll(): void {
+    updateMonthLabel();
+    buildGrid(gridInitial, true);
+    buildGrid(gridMain, false);
+    updateResults();
+  }
+
+  function goToStep2(): void {
+    stepFirstEl.classList.add('hidden');
+    layoutEl.classList.add('active');
+    step1Indicator.classList.remove('active');
+    step2Indicator.classList.add('active');
+  }
+
+  function onDayClick(day: Date, isInitial: boolean): void {
+    selectedDate = day;
+    result = calculateCycle(day, cycleLength);
+    if (isInitial) goToStep2();
+    renderAll();
+  }
+
+  cycleLengthInput.addEventListener('input', () => {
+    cycleLength = Number(cycleLengthInput.value);
+    cycleValueEl.textContent = `${cycleLength} `;
+    const span = document.createElement('span');
+    span.textContent = ui['unitDays'] ?? '';
+    cycleValueEl.appendChild(span);
+    if (selectedDate) {
+      result = calculateCycle(selectedDate, cycleLength);
+      renderAll();
+    }
+  });
+
+  root.querySelector('#fde-prev-initial')?.addEventListener('click', () => {
+    viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+    renderAll();
+  });
+  root.querySelector('#fde-next-initial')?.addEventListener('click', () => {
+    viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+    renderAll();
+  });
+  root.querySelector('#fde-prev-main')?.addEventListener('click', () => {
+    viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+    renderAll();
+  });
+  root.querySelector('#fde-next-main')?.addEventListener('click', () => {
+    viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+    renderAll();
+  });
+
+  renderAll();
+</script>