contrib-graphs 0.1.0 → 0.1.1

package/README.md

@@ -6,6 +6,10 @@ Contribution graph components for React: GitHub-style activity heatmaps in seven
 
 ```bash
 npm install contrib-graphs
+# or
+pnpm add contrib-graphs
+yarn add contrib-graphs
+bun add contrib-graphs
 ```
 
 ```tsx
@@ -26,6 +30,12 @@ Every component takes the same `{ date, count }[]` data. Adapters for GitHub and
 
 Requires React 18 or later.
 
+Prefer to own the code? Copy any variant into your project with the shadcn CLI instead of installing the package:
+
+```bash
+npx shadcn@latest add https://ingfranciscastillo.github.io/contrib-graphs/r/classic-graph.json
+```
+
 ## Next.js, Astro and server rendering
 
 - `contrib-graphs` exports the components and starts with `"use client"`, so you can render them straight from a Next.js Server Component.

package/dist/data.d.cts

@@ -1,7 +1,7 @@
 
 /**
- * `contrib-graphs/data`: todo lo que no es un componente. Sin "use client", así
- * que se puede usar en Server Components, rutas de API, scripts de build, etc.
+ * `contrib-graphs/data`: everything that isn't a component. No "use client", so it
+ * works in Server Components, API routes, build scripts and so on.
  */
 import { A as ThemePalette, C as ContributionDay, D as GraphTheme, E as MonthLabel, M as themeNames, N as themeVars, O as LevelColors, P as themes, S as ColorMode, T as LevelScale, _ as formatDate, a as fromDates, b as Calendar, c as mergeSources, d as sampleProfiles, f as CalendarOptions, g as cropCalendar, h as computeStats, i as fetchGitLabContributions, j as resolveTheme, k as ThemeName, l as SampleProfile, m as buildCalendar, n as GitHubCalendarResponse, o as fromGitHub, p as GraphStats, r as fetchGitHubContributions, s as fromGitLab, t as GITHUB_CONTRIBUTIONS_QUERY, u as generateSampleData, v as makeLevelFn, w as Level, x as CalendarDay, y as BaseGraphProps } from "./data-DptvXfjH.cjs";
 export { type BaseGraphProps, type Calendar, type CalendarDay, type CalendarOptions, type ColorMode, type ContributionDay, GITHUB_CONTRIBUTIONS_QUERY, GitHubCalendarResponse, type GraphStats, type GraphTheme, type Level, type LevelColors, type LevelScale, type MonthLabel, type SampleProfile, type ThemeName, type ThemePalette, buildCalendar, computeStats, cropCalendar, fetchGitHubContributions, fetchGitLabContributions, formatDate, fromDates, fromGitHub, fromGitLab, generateSampleData, makeLevelFn, mergeSources, resolveTheme, sampleProfiles, themeNames, themeVars, themes };

package/dist/data.d.ts

@@ -1,7 +1,7 @@
 
 /**
- * `contrib-graphs/data`: todo lo que no es un componente. Sin "use client", así
- * que se puede usar en Server Components, rutas de API, scripts de build, etc.
+ * `contrib-graphs/data`: everything that isn't a component. No "use client", so it
+ * works in Server Components, API routes, build scripts and so on.
  */
 import { A as ThemePalette, C as ContributionDay, D as GraphTheme, E as MonthLabel, M as themeNames, N as themeVars, O as LevelColors, P as themes, S as ColorMode, T as LevelScale, _ as formatDate, a as fromDates, b as Calendar, c as mergeSources, d as sampleProfiles, f as CalendarOptions, g as cropCalendar, h as computeStats, i as fetchGitLabContributions, j as resolveTheme, k as ThemeName, l as SampleProfile, m as buildCalendar, n as GitHubCalendarResponse, o as fromGitHub, p as GraphStats, r as fetchGitHubContributions, s as fromGitLab, t as GITHUB_CONTRIBUTIONS_QUERY, u as generateSampleData, v as makeLevelFn, w as Level, x as CalendarDay, y as BaseGraphProps } from "./data-DptvXfjH.js";
 export { type BaseGraphProps, type Calendar, type CalendarDay, type CalendarOptions, type ColorMode, type ContributionDay, GITHUB_CONTRIBUTIONS_QUERY, GitHubCalendarResponse, type GraphStats, type GraphTheme, type Level, type LevelColors, type LevelScale, type MonthLabel, type SampleProfile, type ThemeName, type ThemePalette, buildCalendar, computeStats, cropCalendar, fetchGitHubContributions, fetchGitLabContributions, formatDate, fromDates, fromGitHub, fromGitLab, generateSampleData, makeLevelFn, mergeSources, resolveTheme, sampleProfiles, themeNames, themeVars, themes };

package/dist/index.cjs

@@ -5,11 +5,11 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/core.tsx
 /**
-* useLayoutEffect en el navegador (mide antes de pintar) y useEffect en el
-* servidor, donde los efectos no corren y React avisaría por cada componente.
+* useLayoutEffect in the browser (measure before paint) and useEffect on the
+* server, where effects don't run and React would warn once per component.
 */
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-/** `:focus-visible` no existe en navegadores viejos (Safari < 15.4) ni en algunos entornos de test. */
+/** `:focus-visible` doesn't exist in old browsers (Safari < 15.4) or in some test environments. */
 function isFocusVisible(el) {
 	try {
 		return el.matches(":focus-visible");
@@ -22,9 +22,9 @@ const indexOf = (target) => {
 	return el ? Number(el.getAttribute("data-cg-i")) : null;
 };
 /**
-* Hover + navegación con teclado usando delegación de eventos: las celdas solo
-* llevan `data-cg-i`, así que no se crean cientos de handlers. Flechas izquierda/derecha
-* avanzan `stepX` elementos y arriba/abajo `stepY`.
+* Hover and keyboard navigation through event delegation: cells only carry
+* `data-cg-i`, so hundreds of handlers are never created. Left/right arrows move
+* `stepX` items and up/down move `stepY`.
 */
 function useGraphInteraction(opts) {
 	const { rootRef, count, stepX, stepY, onActivate } = opts;
@@ -133,7 +133,7 @@ function useGraphInteraction(opts) {
 		}
 	};
 }
-/** Reduce las semanas visibles al ancho del contenedor (en vez de hacer scroll). */
+/** Reduces the visible weeks to fit the container width (instead of scrolling). */
 function useFitWeeks(ref, requested, pitch, reserved, enabled) {
 	const [fit, setFit] = (0, react.useState)(requested);
 	useIsomorphicLayoutEffect(() => {
@@ -159,7 +159,7 @@ function useFitWeeks(ref, requested, pitch, reserved, enabled) {
 	]);
 	return enabled ? fit : requested;
 }
-/** Monta calendario + interacción. Es la base de todas las variantes por día. */
+/** Builds the calendar and the interaction. The base of every per-day variant. */
 function useCalendarGraph(props, opts = {}) {
 	const rootRef = (0, react.useRef)(null);
 	const requested = props.weeks ?? 53;
@@ -194,7 +194,7 @@ function useCalendarGraph(props, opts = {}) {
 		stepY: opts.stepY ?? 1,
 		onActivate
 	});
-	/** `periodTotal` es el total del periodo pedido aunque se muestren menos semanas. */
+	/** `periodTotal` is the total of the requested period, even when fewer weeks are shown. */
 	return {
 		calendar,
 		periodTotal: full.total,
@@ -209,7 +209,7 @@ function describeDay(day, props) {
 		subtitle: require_data.formatDate(day.date, props.locale)
 	};
 }
-/** Texto del periodo según las semanas pedidas (no las recortadas por ancho). */
+/** Period text from the requested weeks (not the ones cropped to fit). */
 function periodText(props) {
 	const weeks = props.weeks ?? 53;
 	const p = props.periodLabel;
@@ -227,7 +227,7 @@ function defaultTitle(total, props) {
 	] });
 }
 const cellDelay = (w) => ({ "--cg-w": w });
-/** Id estable y válido para usar en `url(#...)` dentro de SVG. */
+/** Stable id that is valid inside SVG `url(#...)`. */
 function useSvgId(prefix) {
 	return `${prefix}-${(0, react.useId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 }
@@ -252,8 +252,8 @@ function Legend({ labels = ["Less", "More"], swatch }) {
 	});
 }
 /**
-* Contenedor común: tema, modo claro/oscuro, encabezado, leyenda, tooltip
-* y región aria-live para anunciar el día activo al navegar con teclado.
+* Shared container: theme, light/dark mode, header, legend, tooltip and an
+* aria-live region that announces the active day during keyboard navigation.
 */
 function GraphShell({ props, interaction, variant, describe, summary, title, headerEnd, footerStart, legendSwatch, glow, surface, children }) {
 	const theme = require_data.resolveTheme(props.theme);
@@ -477,9 +477,9 @@ function DotsGraph(props) {
 // src/isometric.ts
 const r = (v) => Math.round(v * 100) / 100;
 /**
-* Geometría de la vista isométrica, compartida por `IsometricGraph` y por
-* `renderIsometricSvg`: así el componente y el SVG estático se ven igual.
-* Las baldosas vienen ordenadas de atrás hacia adelante (orden de pintado).
+* Geometry of the isometric view, shared by `IsometricGraph` and
+* `renderIsometricSvg` so the component and the static SVG look the same.
+* Tiles are sorted back to front (paint order).
 */
 function isometricLayout(calendar, { tileSize = 12, maxHeight = 48, heightBy = "count" } = {}) {
 	const tw = tileSize;
@@ -522,7 +522,7 @@ function isometricLayout(calendar, { tileSize = 12, maxHeight = 48, heightBy = "
 		})
 	};
 }
-/** Porcentaje de color de la cara izquierda y derecha (el resto se mezcla con negro). */
+/** Color percentage of the left and right faces (the rest is mixed with black). */
 const ISO_SHADES = {
 	left: 78,
 	right: 60
@@ -974,7 +974,10 @@ function TerminalGraph(props) {
 					]
 				}),
 				"\n\n",
-				body,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: body
+				}),
 				"\n",
 				(props.showTotal !== false || props.showLegend !== false) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "cg-foot",

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 
 /**
- * `contrib-graphs`: los componentes. El build antepone "use client" a este
- * archivo para que se puedan importar desde Server Components (Next.js).
- * En código de servidor usa `contrib-graphs/data`.
+ * `contrib-graphs`: the components. The build prepends "use client" to this
+ * file so they can be imported from Server Components (Next.js).
+ * In server code, use `contrib-graphs/data`.
  */
 import { A as ThemePalette, C as ContributionDay, D as GraphTheme, E as MonthLabel, M as themeNames, N as themeVars, O as LevelColors, P as themes, S as ColorMode, T as LevelScale, _ as formatDate, a as fromDates, b as Calendar, c as mergeSources, d as sampleProfiles, f as CalendarOptions, g as cropCalendar, h as computeStats, i as fetchGitLabContributions, j as resolveTheme, k as ThemeName, l as SampleProfile, m as buildCalendar, n as GitHubCalendarResponse, o as fromGitHub, p as GraphStats, r as fetchGitHubContributions, s as fromGitLab, t as GITHUB_CONTRIBUTIONS_QUERY, u as generateSampleData, v as makeLevelFn, w as Level, x as CalendarDay, y as BaseGraphProps } from "./data-DptvXfjH.cjs";
 /** Props of `ClassicGraph` and `DotsGraph`. */

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 
 /**
- * `contrib-graphs`: los componentes. El build antepone "use client" a este
- * archivo para que se puedan importar desde Server Components (Next.js).
- * En código de servidor usa `contrib-graphs/data`.
+ * `contrib-graphs`: the components. The build prepends "use client" to this
+ * file so they can be imported from Server Components (Next.js).
+ * In server code, use `contrib-graphs/data`.
  */
 import { A as ThemePalette, C as ContributionDay, D as GraphTheme, E as MonthLabel, M as themeNames, N as themeVars, O as LevelColors, P as themes, S as ColorMode, T as LevelScale, _ as formatDate, a as fromDates, b as Calendar, c as mergeSources, d as sampleProfiles, f as CalendarOptions, g as cropCalendar, h as computeStats, i as fetchGitLabContributions, j as resolveTheme, k as ThemeName, l as SampleProfile, m as buildCalendar, n as GitHubCalendarResponse, o as fromGitHub, p as GraphStats, r as fetchGitHubContributions, s as fromGitLab, t as GITHUB_CONTRIBUTIONS_QUERY, u as generateSampleData, v as makeLevelFn, w as Level, x as CalendarDay, y as BaseGraphProps } from "./data-DptvXfjH.js";
 /** Props of `ClassicGraph` and `DotsGraph`. */

package/dist/index.js

@@ -4,11 +4,11 @@ import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useMemo, useR
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/core.tsx
 /**
-* useLayoutEffect en el navegador (mide antes de pintar) y useEffect en el
-* servidor, donde los efectos no corren y React avisaría por cada componente.
+* useLayoutEffect in the browser (measure before paint) and useEffect on the
+* server, where effects don't run and React would warn once per component.
 */
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-/** `:focus-visible` no existe en navegadores viejos (Safari < 15.4) ni en algunos entornos de test. */
+/** `:focus-visible` doesn't exist in old browsers (Safari < 15.4) or in some test environments. */
 function isFocusVisible(el) {
 	try {
 		return el.matches(":focus-visible");
@@ -21,9 +21,9 @@ const indexOf = (target) => {
 	return el ? Number(el.getAttribute("data-cg-i")) : null;
 };
 /**
-* Hover + navegación con teclado usando delegación de eventos: las celdas solo
-* llevan `data-cg-i`, así que no se crean cientos de handlers. Flechas izquierda/derecha
-* avanzan `stepX` elementos y arriba/abajo `stepY`.
+* Hover and keyboard navigation through event delegation: cells only carry
+* `data-cg-i`, so hundreds of handlers are never created. Left/right arrows move
+* `stepX` items and up/down move `stepY`.
 */
 function useGraphInteraction(opts) {
 	const { rootRef, count, stepX, stepY, onActivate } = opts;
@@ -132,7 +132,7 @@ function useGraphInteraction(opts) {
 		}
 	};
 }
-/** Reduce las semanas visibles al ancho del contenedor (en vez de hacer scroll). */
+/** Reduces the visible weeks to fit the container width (instead of scrolling). */
 function useFitWeeks(ref, requested, pitch, reserved, enabled) {
 	const [fit, setFit] = useState(requested);
 	useIsomorphicLayoutEffect(() => {
@@ -158,7 +158,7 @@ function useFitWeeks(ref, requested, pitch, reserved, enabled) {
 	]);
 	return enabled ? fit : requested;
 }
-/** Monta calendario + interacción. Es la base de todas las variantes por día. */
+/** Builds the calendar and the interaction. The base of every per-day variant. */
 function useCalendarGraph(props, opts = {}) {
 	const rootRef = useRef(null);
 	const requested = props.weeks ?? 53;
@@ -193,7 +193,7 @@ function useCalendarGraph(props, opts = {}) {
 		stepY: opts.stepY ?? 1,
 		onActivate
 	});
-	/** `periodTotal` es el total del periodo pedido aunque se muestren menos semanas. */
+	/** `periodTotal` is the total of the requested period, even when fewer weeks are shown. */
 	return {
 		calendar,
 		periodTotal: full.total,
@@ -208,7 +208,7 @@ function describeDay(day, props) {
 		subtitle: formatDate(day.date, props.locale)
 	};
 }
-/** Texto del periodo según las semanas pedidas (no las recortadas por ancho). */
+/** Period text from the requested weeks (not the ones cropped to fit). */
 function periodText(props) {
 	const weeks = props.weeks ?? 53;
 	const p = props.periodLabel;
@@ -226,7 +226,7 @@ function defaultTitle(total, props) {
 	] });
 }
 const cellDelay = (w) => ({ "--cg-w": w });
-/** Id estable y válido para usar en `url(#...)` dentro de SVG. */
+/** Stable id that is valid inside SVG `url(#...)`. */
 function useSvgId(prefix) {
 	return `${prefix}-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 }
@@ -251,8 +251,8 @@ function Legend({ labels = ["Less", "More"], swatch }) {
 	});
 }
 /**
-* Contenedor común: tema, modo claro/oscuro, encabezado, leyenda, tooltip
-* y región aria-live para anunciar el día activo al navegar con teclado.
+* Shared container: theme, light/dark mode, header, legend, tooltip and an
+* aria-live region that announces the active day during keyboard navigation.
 */
 function GraphShell({ props, interaction, variant, describe, summary, title, headerEnd, footerStart, legendSwatch, glow, surface, children }) {
 	const theme = resolveTheme(props.theme);
@@ -476,9 +476,9 @@ function DotsGraph(props) {
 // src/isometric.ts
 const r = (v) => Math.round(v * 100) / 100;
 /**
-* Geometría de la vista isométrica, compartida por `IsometricGraph` y por
-* `renderIsometricSvg`: así el componente y el SVG estático se ven igual.
-* Las baldosas vienen ordenadas de atrás hacia adelante (orden de pintado).
+* Geometry of the isometric view, shared by `IsometricGraph` and
+* `renderIsometricSvg` so the component and the static SVG look the same.
+* Tiles are sorted back to front (paint order).
 */
 function isometricLayout(calendar, { tileSize = 12, maxHeight = 48, heightBy = "count" } = {}) {
 	const tw = tileSize;
@@ -521,7 +521,7 @@ function isometricLayout(calendar, { tileSize = 12, maxHeight = 48, heightBy = "
 		})
 	};
 }
-/** Porcentaje de color de la cara izquierda y derecha (el resto se mezcla con negro). */
+/** Color percentage of the left and right faces (the rest is mixed with black). */
 const ISO_SHADES = {
 	left: 78,
 	right: 60
@@ -973,7 +973,10 @@ function TerminalGraph(props) {
 					]
 				}),
 				"\n\n",
-				body,
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: body
+				}),
 				"\n",
 				(props.showTotal !== false || props.showLegend !== false) && /* @__PURE__ */ jsxs("span", {
 					className: "cg-foot",

package/dist/styles.css

@@ -1,7 +1,7 @@
 /* ============================================================
-   Contribution Graph — estilos base
-   Los colores llegan como --cg-*-light / --cg-*-dark desde el tema;
-   aquí se elige cuál aplicar según data-mode y el esquema de color.
+   Contribution Graph — base styles
+   Colors arrive from the theme as --cg-*-light / --cg-*-dark;
+   this file picks one by data-mode and the color scheme.
    ============================================================ */
 
 .cg-root {
@@ -123,7 +123,7 @@
   font-size: 9px;
 }
 
-/* ---------- Celdas ---------- */
+/* ---------- Cells ---------- */
 .cg-cell {
   cursor: pointer;
   transition: opacity 0.15s ease, filter 0.15s ease;
@@ -179,7 +179,7 @@
   white-space: nowrap;
 }
 
-/* ---------- Animación de entrada ---------- */
+/* ---------- Entry animation ---------- */
 .cg-root[data-animate] .cg-cell {
   animation: cg-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
   animation-delay: calc(var(--cg-w, 0) * 12ms);
@@ -227,7 +227,7 @@
 .cg-terminal .cg-prompt {
   color: var(--cg-text);
 }
-/* Las líneas de texto pueden partirse; la cuadrícula no (se recorta o escala). */
+/* Text lines may wrap; the grid doesn't (it crops or scales). */
 .cg-terminal .cg-wrap {
   white-space: pre-wrap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contrib-graphs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Contribution graph components for React: GitHub-style heatmaps in seven designs, with themes, dark mode, keyboard navigation and screen reader support.",
   "keywords": [
     "react",