@jjlmoya/utils-health 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-health",
-    "version": "1.22.0",
+    "version": "1.23.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,6 +1,7 @@
 import type { HealthCategoryEntry } from '../types';
 import { bmiCalculator } from '../tool/bmiCalculator/entry';
 import { bodyAdiposityIndexCalculator } from '../tool/bodyAdiposityIndexCalculator/entry';
+import { bodyFatPercentageCalculator } from '../tool/bodyFatPercentageCalculator/entry';
 import { waistHipRatioCalculator } from '../tool/waistHipRatioCalculator/entry';
 import { waistHeightRatioCalculator } from '../tool/waistHeightRatioCalculator/entry';
 import { daltonismSimulator } from '../tool/daltonismSimulator/entry';
@@ -20,7 +21,7 @@ import { metabolicAgeCalculator } from '../tool/metabolicAgeCalculator/entry';
 
 export const healthCategory: HealthCategoryEntry = {
   icon: 'mdi:heart-pulse',
-  tools: [bmiCalculator, bodyAdiposityIndexCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
+  tools: [bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -2,6 +2,7 @@ export { binauralTuner } from './tool/binauralTuner/entry';
 export { bloodUnitConverter } from './tool/bloodUnitConverter/entry';
 export { bmiCalculator } from './tool/bmiCalculator/entry';
 export { bodyAdiposityIndexCalculator } from './tool/bodyAdiposityIndexCalculator/entry';
+export { bodyFatPercentageCalculator } from './tool/bodyFatPercentageCalculator/entry';
 export { waistHipRatioCalculator } from './tool/waistHipRatioCalculator/entry';
 export { waistHeightRatioCalculator } from './tool/waistHeightRatioCalculator/entry';
 export { breathingVisualizer } from './tool/breathingVisualizer/entry';
@@ -26,6 +27,7 @@ import { binauralTuner } from './tool/binauralTuner/entry';
 import { bloodUnitConverter } from './tool/bloodUnitConverter/entry';
 import { bmiCalculator } from './tool/bmiCalculator/entry';
 import { bodyAdiposityIndexCalculator } from './tool/bodyAdiposityIndexCalculator/entry';
+import { bodyFatPercentageCalculator } from './tool/bodyFatPercentageCalculator/entry';
 import { waistHipRatioCalculator } from './tool/waistHipRatioCalculator/entry';
 import { waistHeightRatioCalculator } from './tool/waistHeightRatioCalculator/entry';
 import { breathingVisualizer } from './tool/breathingVisualizer/entry';
@@ -45,4 +47,4 @@ import { screenDecompressionTime } from './tool/screenDecompressionTime/entry';
 import { tinnitusReliever } from './tool/tinnitusReliever/entry';
 import { ubeCalculator } from './tool/ubeCalculator/entry';
 import { waterPurifier } from './tool/waterPurifier/entry';
-export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];
+export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './tool/waistHeightRatioCalculator';
 export * from './tool/dailyProteinCalculator';
 export * from './tool/leanBodyMassCalculator';
 export * from './tool/metabolicAgeCalculator';
+export * from './tool/bodyFatPercentageCalculator';
 
 export { healthCategory } from './category';
 export const healthCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/tests/locale_completeness.test.ts

@@ -35,7 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 23 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(23);
+  it('all 24 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(24);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { healthCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 23 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(23);
+    it('should have 24 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(24);
     });
 
     it('healthCategory should be defined', () => {

package/src/tool/bodyFatPercentageCalculator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { bodyFatPercentageCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await bodyFatPercentageCalculator.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/bodyFatPercentageCalculator/bibliography.ts

@@ -0,0 +1,24 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Hodgdon JA, Beckett MB: Prediction of percent body fat for U.S. Navy men from body circumferences and height',
+    url: 'https://apps.dtic.mil/sti/citations/ADA143890',
+  },
+  {
+    name: 'Deurenberg P, Weststrate JA, Seidell JC: Body mass index as a measure of body fatness',
+    url: 'https://doi.org/10.1079/BJN19910073',
+  },
+  {
+    name: 'Jackson AS, Pollock ML: Practical assessment of body composition',
+    url: 'https://doi.org/10.1080/00913847.1985.11708790',
+  },
+  {
+    name: 'CDC: About adult BMI',
+    url: 'https://www.cdc.gov/bmi/adult-calculator/bmi-categories.html',
+  },
+  {
+    name: 'Wikipedia: Body fat percentage',
+    url: 'https://en.wikipedia.org/wiki/Body_fat_percentage',
+  },
+];

package/src/tool/bodyFatPercentageCalculator/body-fat-percentage-calculator.css

@@ -0,0 +1,500 @@
+.bfpc {
+  --bfpc-paper: #f7f8f5;
+  --bfpc-panel: #fff;
+  --bfpc-ink: #20242a;
+  --bfpc-muted: #68707b;
+  --bfpc-line: #d9dfdf;
+  --bfpc-blue: #2e72c2;
+  --bfpc-green: #1e8b61;
+  --bfpc-yellow: #d3a326;
+  --bfpc-orange: #d46f2d;
+  --bfpc-red: #c8434a;
+  --bfpc-shadow: rgba(22, 30, 36, 0.12);
+
+  width: 100%;
+}
+
+.theme-dark .bfpc {
+  --bfpc-paper: #111820;
+  --bfpc-panel: #1a232c;
+  --bfpc-ink: #f1f5f7;
+  --bfpc-muted: #a7b1bb;
+  --bfpc-line: #34414b;
+  --bfpc-shadow: rgba(0, 0, 0, 0.34);
+}
+
+.bfpc__shell {
+  overflow: hidden;
+  border: 1px solid var(--bfpc-line);
+  border-radius: 8px;
+  background: var(--bfpc-paper);
+  color: var(--bfpc-ink);
+  box-shadow: 0 18px 44px var(--bfpc-shadow);
+}
+
+.bfpc__toolbar,
+.bfpc__body,
+.bfpc__notes {
+  display: grid;
+}
+
+.bfpc__toolbar {
+  gap: 0.75rem;
+  padding: 0.8rem;
+  border-bottom: 1px solid var(--bfpc-line);
+  background: var(--bfpc-panel);
+}
+
+.bfpc__tabs,
+.bfpc__unit,
+.bfpc__sex {
+  width: max-content;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.28rem;
+  padding: 0.28rem;
+  border: 1px solid var(--bfpc-line);
+  border-radius: 8px;
+  background: var(--bfpc-paper);
+}
+
+.bfpc__tabs {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bfpc__unit {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bfpc__tab,
+.bfpc__unit-btn,
+.bfpc__sex-btn {
+  min-height: 2.45rem;
+  min-width: 6.3rem;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--bfpc-muted);
+  font: inherit;
+  font-size: 0.84rem;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.bfpc__tab,
+.bfpc__sex-btn {
+  display: inline-grid;
+  grid-auto-flow: column;
+  gap: 0.4rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.bfpc__tab svg,
+.bfpc__sex-btn svg,
+.bfpc__notes svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.bfpc__tab--active,
+.bfpc__unit-btn--active,
+.bfpc__sex-btn--active {
+  background: var(--bfpc-ink);
+  color: var(--bfpc-panel);
+}
+
+.theme-dark .bfpc__tab--active,
+.theme-dark .bfpc__unit-btn--active,
+.theme-dark .bfpc__sex-btn--active {
+  background: #eef3f5;
+  color: #151a1f;
+}
+
+.bfpc__body {
+  grid-template-columns: 1fr;
+}
+
+.bfpc__panel,
+.bfpc__result {
+  padding: clamp(0.95rem, 3vw, 1.35rem);
+}
+
+.bfpc__panel {
+  display: grid;
+  gap: 0.8rem;
+  border-bottom: 1px solid var(--bfpc-line);
+  align-content: start;
+}
+
+.bfpc__caption {
+  min-height: 3rem;
+  margin: 0;
+  color: var(--bfpc-muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.bfpc__fields {
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: 1fr;
+}
+
+.bfpc__field {
+  display: grid;
+  gap: 0.55rem;
+  padding: 0.78rem 0.82rem;
+  border: 1px solid var(--bfpc-line);
+  border-radius: 8px;
+  background: var(--bfpc-panel);
+}
+
+.bfpc__field[hidden] {
+  display: none;
+}
+
+.bfpc__field span {
+  color: var(--bfpc-muted);
+  font-size: 0.74rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.bfpc__field div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.45rem;
+  align-items: baseline;
+}
+
+.bfpc__field output {
+  width: 100%;
+  min-width: 0;
+  color: var(--bfpc-ink);
+  font: inherit;
+  font-size: clamp(1.42rem, 5vw, 1.92rem);
+  font-weight: 900;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.bfpc__field input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 1.35rem;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  accent-color: var(--bfpc-ink);
+  cursor: ew-resize;
+}
+
+.bfpc__field input:focus {
+  outline: 2px solid color-mix(in srgb, var(--bfpc-blue) 55%, transparent);
+  outline-offset: 3px;
+}
+
+.bfpc__field strong {
+  color: var(--bfpc-muted);
+  font-size: 0.85rem;
+}
+
+.bfpc__field input::-webkit-slider-runnable-track {
+  height: 0.42rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--bfpc-blue) 78%, white) 0 var(--range-fill, 50%), color-mix(in srgb, var(--bfpc-ink) 14%, transparent) var(--range-fill, 50%) 100%);
+  background-color: color-mix(in srgb, var(--bfpc-ink) 14%, transparent);
+}
+
+.bfpc__field input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.28rem;
+  height: 1.28rem;
+  margin-top: calc((0.42rem - 1.28rem) / 2);
+  border: 2px solid var(--bfpc-panel);
+  border-radius: 999px;
+  background: var(--bfpc-ink);
+  box-shadow: 0 4px 14px var(--bfpc-shadow);
+}
+
+.bfpc__field input::-moz-range-track {
+  height: 0.42rem;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bfpc-ink) 14%, transparent);
+}
+
+.bfpc__field input::-moz-range-progress {
+  height: 0.42rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bfpc-blue) 78%, white);
+}
+
+.bfpc__field input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 1.28rem;
+  height: 1.28rem;
+  border: 2px solid var(--bfpc-panel);
+  border-radius: 999px;
+  background: var(--bfpc-ink);
+}
+
+.bfpc__result {
+  display: grid;
+  gap: 1rem;
+  align-content: start;
+  background:
+    linear-gradient(to right, color-mix(in srgb, var(--bfpc-line) 26%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--bfpc-line) 22%, transparent) 1px, transparent 1px),
+    var(--bfpc-paper);
+  background-size: 30px 30px;
+}
+
+.bfpc__dial {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto auto;
+  justify-items: center;
+  align-content: center;
+  gap: 0.35rem;
+  min-height: 12.2rem;
+  isolation: isolate;
+}
+
+.bfpc__dial-ring {
+  position: relative;
+  grid-row: 2;
+  width: min(7.8rem, 48vw);
+  aspect-ratio: 1;
+  border-radius: 999px;
+  background: conic-gradient(var(--bfpc-blue) 0 18%, var(--bfpc-green) 18% 42%, var(--bfpc-yellow) 42% 58%, var(--bfpc-orange) 58% 76%, var(--bfpc-red) 76% 100%);
+  opacity: 0.92;
+  box-shadow: inset 0 0 0 1px var(--bfpc-line), 0 18px 34px var(--bfpc-shadow);
+}
+
+.bfpc__dial-ring::after {
+  content: "";
+  position: absolute;
+  inset: 0.68rem;
+  border-radius: inherit;
+  background: var(--bfpc-panel);
+}
+
+.bfpc__dial strong,
+.bfpc__dial span {
+  position: relative;
+  z-index: 1;
+}
+
+.bfpc__dial strong {
+  grid-row: 1;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: clamp(3.15rem, 10vw, 4.7rem);
+  line-height: 0.95;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.bfpc__dial span,
+.bfpc__category span,
+.bfpc__bmi-line {
+  color: var(--bfpc-muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.bfpc__dial span {
+  grid-row: 3;
+  max-width: 100%;
+  text-align: center;
+}
+
+.bfpc__category {
+  min-height: 7.2rem;
+  padding: 0.95rem;
+  border: 1px solid var(--bfpc-line);
+  border-radius: 8px;
+  background: var(--bfpc-panel);
+}
+
+.bfpc__category strong {
+  display: block;
+  margin: 0.2rem 0 0.35rem;
+  font-size: clamp(1.35rem, 5vw, 1.9rem);
+  line-height: 1.05;
+}
+
+.bfpc__category p {
+  margin: 0;
+  color: var(--bfpc-muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.bfpc__result[data-category="essential"] .bfpc__dial strong,
+.bfpc__result[data-category="essential"] .bfpc__category strong { color: var(--bfpc-blue); }
+.bfpc__result[data-category="athletes"] .bfpc__dial strong,
+.bfpc__result[data-category="athletes"] .bfpc__category strong { color: var(--bfpc-green); }
+.bfpc__result[data-category="fitness"] .bfpc__dial strong,
+.bfpc__result[data-category="fitness"] .bfpc__category strong { color: var(--bfpc-yellow); }
+.bfpc__result[data-category="average"] .bfpc__dial strong,
+.bfpc__result[data-category="average"] .bfpc__category strong { color: var(--bfpc-orange); }
+.bfpc__result[data-category="obesity"] .bfpc__dial strong,
+.bfpc__result[data-category="obesity"] .bfpc__category strong { color: var(--bfpc-red); }
+
+.bfpc__bar {
+  position: relative;
+  display: grid;
+  grid-template-columns: 18fr 24fr 16fr 18fr 24fr;
+  min-height: 3.35rem;
+  margin-top: 1.45rem;
+  overflow: visible;
+  border: 1px solid var(--bfpc-line);
+  border-radius: 8px;
+  background: var(--bfpc-panel);
+}
+
+.bfpc__bar span {
+  display: grid;
+  align-items: end;
+  padding: 0.55rem 0.35rem;
+  color: #fff;
+  font-size: 0.62rem;
+  font-weight: 900;
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.bfpc__bar span:first-child {
+  border-radius: 7px 0 0 7px;
+}
+
+.bfpc__bar span:nth-last-child(2) {
+  border-radius: 0 7px 7px 0;
+}
+
+.bfpc__bar span[data-segment="essential"] { background: var(--bfpc-blue); }
+.bfpc__bar span[data-segment="athletes"] { background: var(--bfpc-green); }
+.bfpc__bar span[data-segment="fitness"] { background: var(--bfpc-yellow); }
+.bfpc__bar span[data-segment="average"] { background: var(--bfpc-orange); }
+.bfpc__bar span[data-segment="obesity"] { background: var(--bfpc-red); }
+
+.bfpc__bar i {
+  position: absolute;
+  top: -1.35rem;
+  left: 48%;
+  width: 2.3rem;
+  height: 1.15rem;
+  border: 1px solid color-mix(in srgb, var(--bfpc-panel) 70%, var(--bfpc-ink));
+  border-radius: 999px 999px 6px 6px;
+  background: var(--bfpc-ink);
+  transform: translateX(-50%);
+  transition: left 160ms ease;
+  box-shadow: 0 6px 16px var(--bfpc-shadow);
+}
+
+.bfpc__bar i::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 0.18rem;
+  height: 1.55rem;
+  border-radius: 999px;
+  background: var(--bfpc-ink);
+  transform: translateX(-50%);
+}
+
+.bfpc__bar i::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 1.35rem);
+  width: 0;
+  height: 0;
+  border-left: 0.38rem solid transparent;
+  border-right: 0.38rem solid transparent;
+  border-top: 0.48rem solid var(--bfpc-ink);
+  transform: translateX(-50%);
+}
+
+.bfpc__bmi-line[hidden] {
+  display: none;
+}
+
+.bfpc__notes {
+  border-top: 1px solid var(--bfpc-line);
+}
+
+.bfpc__notes div {
+  display: grid;
+  grid-template-columns: 1.35rem 1fr;
+  gap: 0.7rem;
+  padding: 0.82rem 0.95rem;
+  border-bottom: 1px solid var(--bfpc-line);
+  background: var(--bfpc-panel);
+  color: var(--bfpc-muted);
+}
+
+.bfpc__notes div:last-child {
+  border-bottom: 0;
+}
+
+.bfpc__notes svg {
+  color: var(--bfpc-blue);
+}
+
+.bfpc__notes p {
+  margin: 0;
+  font-size: 0.86rem;
+  line-height: 1.45;
+}
+
+.bfpc__notes strong {
+  color: var(--bfpc-ink);
+}
+
+@media (max-width: 480px) {
+  .bfpc__tab span {
+    font-size: 0.76rem;
+  }
+
+  .bfpc__sex {
+    width: 100%;
+  }
+}
+
+@media (min-width: 760px) {
+  .bfpc__toolbar {
+    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
+  }
+
+  .bfpc__body {
+    grid-template-columns: minmax(330px, 0.85fr) minmax(360px, 1.15fr);
+  }
+
+  .bfpc__panel {
+    border-right: 1px solid var(--bfpc-line);
+    border-bottom: 0;
+  }
+
+  .bfpc__notes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .bfpc__notes div {
+    border-right: 1px solid var(--bfpc-line);
+    border-bottom: 0;
+  }
+
+  .bfpc__notes div:last-child {
+    border-right: 0;
+  }
+}