contrib-graphs 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,291 @@
+/* ============================================================
+   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.
+   ============================================================ */
+
+.cg-root {
+  --cg-l0: var(--cg-l0-light);
+  --cg-l1: var(--cg-l1-light);
+  --cg-l2: var(--cg-l2-light);
+  --cg-l3: var(--cg-l3-light);
+  --cg-l4: var(--cg-l4-light);
+  --cg-text: var(--cg-text-light);
+  --cg-muted: var(--cg-muted-light);
+  --cg-surface: var(--cg-surface-light);
+  --cg-border: var(--cg-border-light);
+  --cg-tip-bg: #24292f;
+  --cg-tip-text: #ffffff;
+  --cg-mix: black;
+
+  position: relative;
+  display: block;
+  max-width: 100%;
+  color: var(--cg-text);
+  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  border-radius: 8px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.cg-root[data-mode='dark'],
+:root[data-theme='dark'] .cg-root[data-mode='auto'] {
+  --cg-l0: var(--cg-l0-dark);
+  --cg-l1: var(--cg-l1-dark);
+  --cg-l2: var(--cg-l2-dark);
+  --cg-l3: var(--cg-l3-dark);
+  --cg-l4: var(--cg-l4-dark);
+  --cg-text: var(--cg-text-dark);
+  --cg-muted: var(--cg-muted-dark);
+  --cg-surface: var(--cg-surface-dark);
+  --cg-border: var(--cg-border-dark);
+  --cg-tip-bg: #f0f3f6;
+  --cg-tip-text: #0d1117;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .cg-root[data-mode='auto'] {
+    --cg-l0: var(--cg-l0-dark);
+    --cg-l1: var(--cg-l1-dark);
+    --cg-l2: var(--cg-l2-dark);
+    --cg-l3: var(--cg-l3-dark);
+    --cg-l4: var(--cg-l4-dark);
+    --cg-text: var(--cg-text-dark);
+    --cg-muted: var(--cg-muted-dark);
+    --cg-surface: var(--cg-surface-dark);
+    --cg-border: var(--cg-border-dark);
+    --cg-tip-bg: #f0f3f6;
+    --cg-tip-text: #0d1117;
+  }
+}
+
+.cg-root:focus {
+  outline: none;
+}
+.cg-root:focus-visible {
+  outline: 2px solid var(--cg-l3);
+  outline-offset: 4px;
+}
+
+.cg-root[data-surface] {
+  background: var(--cg-surface);
+  border: 1px solid var(--cg-border);
+  padding: 14px 16px;
+}
+
+.cg-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+.cg-title strong {
+  font-weight: 600;
+}
+.cg-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  color: var(--cg-muted);
+  font-size: 11px;
+}
+.cg-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.cg-legend > span:first-child {
+  margin-right: 3px;
+}
+.cg-legend > span:last-child {
+  margin-left: 3px;
+}
+.cg-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  outline: 1px solid color-mix(in srgb, var(--cg-text) 6%, transparent);
+  outline-offset: -1px;
+}
+
+.cg-body svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  overflow: visible;
+}
+.cg-label {
+  fill: var(--cg-muted);
+  font-size: 9px;
+}
+
+/* ---------- Celdas ---------- */
+.cg-cell {
+  cursor: pointer;
+  transition: opacity 0.15s ease, filter 0.15s ease;
+}
+.cg-cell[data-active] {
+  stroke: var(--cg-text);
+  stroke-width: 1.25px;
+  paint-order: stroke;
+}
+.cg-root[data-has-active] .cg-cell:not([data-active]) {
+  opacity: 0.6;
+}
+.cg-root[data-glow] .cg-glow {
+  filter: var(--cg-glow-filter);
+}
+
+/* ---------- Tooltip ---------- */
+.cg-tooltip {
+  position: absolute;
+  z-index: 10;
+  transform: translate(-50%, calc(-100% - 8px));
+  padding: 5px 9px;
+  border-radius: 6px;
+  background: var(--cg-tip-bg);
+  color: var(--cg-tip-text);
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
+}
+.cg-tooltip strong {
+  font-weight: 600;
+}
+.cg-tooltip span {
+  opacity: 0.75;
+}
+.cg-tooltip::after {
+  content: '';
+  position: absolute;
+  left: calc(50% + var(--cg-arrow, 0px));
+  top: 100%;
+  border: 5px solid transparent;
+  border-top-color: var(--cg-tip-bg);
+  transform: translateX(-50%);
+}
+
+.cg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ---------- Animación de entrada ---------- */
+.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);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.cg-root[data-animate] .cg-rise {
+  animation-name: cg-rise;
+  transform-origin: bottom;
+}
+@keyframes cg-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+@keyframes cg-rise {
+  from {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cg-root[data-animate] .cg-cell {
+    animation: none;
+  }
+}
+
+/* ---------- Terminal ---------- */
+.cg-terminal .cg-term {
+  margin: 0;
+  font: 12px/1.25 ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
+  color: var(--cg-muted);
+  white-space: pre;
+  overflow: hidden;
+}
+.cg-terminal .cg-term .cg-cell {
+  transition: none;
+  border-radius: 2px;
+}
+.cg-terminal .cg-term .cg-cell[data-active] {
+  background: color-mix(in srgb, var(--cg-text) 18%, transparent);
+  color: var(--cg-text) !important;
+}
+.cg-terminal .cg-prompt {
+  color: var(--cg-text);
+}
+/* Las líneas de texto pueden partirse; la cuadrícula no (se recorta o escala). */
+.cg-terminal .cg-wrap {
+  white-space: pre-wrap;
+}
+.cg-terminal .cg-foot {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 3ch;
+  padding-left: 5ch;
+  white-space: pre-wrap;
+}
+.cg-terminal .cg-prompt b {
+  color: var(--cg-l4);
+  font-weight: 600;
+}
+.cg-terminal .cg-caret {
+  display: inline-block;
+  width: 0.6em;
+  height: 1.1em;
+  vertical-align: -0.2em;
+  background: var(--cg-l3);
+  animation: cg-blink 1.1s steps(1) infinite;
+}
+@keyframes cg-blink {
+  50% {
+    opacity: 0;
+  }
+}
+.cg-terminal[data-animate] .cg-term .cg-cell {
+  animation-name: cg-type;
+  animation-duration: 0.01s;
+  animation-timing-function: linear;
+  animation-delay: calc(var(--cg-w, 0) * 18ms);
+}
+@keyframes cg-type {
+  from {
+    opacity: 0;
+  }
+}
+
+/* ---------- Compact ---------- */
+.cg-compact {
+  display: inline-block;
+}
+.cg-compact .cg-header {
+  margin-bottom: 6px;
+}
+
+/* ---------- Stats ---------- */
+.cg-stats {
+  display: flex;
+  gap: 16px;
+  color: var(--cg-muted);
+  font-size: 11px;
+}
+.cg-stats b {
+  display: block;
+  color: var(--cg-text);
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "contrib-graphs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Contribution graph components for React: GitHub-style heatmaps in seven designs, with themes, dark mode, keyboard navigation and screen reader support.",
+  "keywords": [
+    "react",
+    "contribution-graph",
+    "heatmap",
+    "github",
+    "gitlab",
+    "calendar",
+    "portfolio",
+    "svg"
+  ],
+  "license": "MIT",
+  "author": "Francis Miguel Castillo Cruz (https://github.com/ingfranciscastillo)",
+  "homepage": "https://ingfranciscastillo.github.io/contrib-graphs/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ingfranciscastillo/contrib-graphs.git",
+    "directory": "packages/contrib-graphs"
+  },
+  "bugs": {
+    "url": "https://github.com/ingfranciscastillo/contrib-graphs/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown && node scripts/check-dist.mjs",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^26.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsdown": "^0.23.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.6",
+    "vitest": "^4.1.12"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./data": {
+      "import": "./dist/data.js",
+      "require": "./dist/data.cjs"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css"
+  }
+}