npm - @gnome-ui/react - Versions diffs - 1.43.0 → 1.45.0 - Mend

@gnome-ui/react 1.43.0 → 1.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # @gnome-ui/react
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ElJijuna/gnome-ui/main/public/assets/gnome-ui.png" alt="gnome-ui" width="120" />
+</p>
 React component library following the [GNOME Human Interface Guidelines](https://developer.gnome.org/hig/), built on the [Adwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/) design language.
 [![npm](https://img.shields.io/npm/v/@gnome-ui/react)](https://www.npmjs.com/package/@gnome-ui/react)
@@ -202,9 +206,11 @@ import { Button } from "@gnome-ui/react/components/Button";
 | [`Avatar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-avatar--docs) | Circular user image with deterministic-color initials fallback |
 | [`AvatarRotator`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-avatarrotator--docs) | Single avatar surface that crossfades through multiple image sources |
 | [`Badge`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-badge--docs) | Counter or status dot, optionally anchored over another element |
+| [`StatusBadge`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-statusbadge--docs) | Pill-shaped text label for entity status — published, beta, new, etc.; 6 variants |
 | [`Blockquote`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-blockquote--docs) | Styled pull-quote with left-border accent; default, info, warning, error, success variants; optional icon and attribution |
 | [`Spinner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinner--docs) | Indeterminate loading indicator; sm/md/lg sizes |
 | [`ProgressBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-progressbar--docs) | Determinate (0–1) and indeterminate progress indicator |
+| [`SegmentedBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-segmentedbar--docs) | Multi-segment horizontal bar for proportional distributions (e.g. language breakdown); hover tooltip and highlight; auto color palette from GNOME tokens |
 | [`Skeleton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-skeleton--docs) | Content-shaped loading placeholder; rectangular, circular, and multi-line text variants with optional shimmer |
 | [`CountDownTimer`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-countdowntimer--docs) | Countdown timer showing remaining time until a specified date; `date`, `time`, or `datetime` formats; executes callback on completion |
 | [`StatusPage`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-statuspage--docs) | Empty-state page with icon, title, description, and optional actions; `compact` prop for sidebars/popovers |
@@ -239,7 +245,7 @@ import { Button } from "@gnome-ui/react/components/Button";
 | [`PasswordEntryRow`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-passwordentryrow--docs) | `EntryRow` variant with show/hide password toggle |
 | [`SpinRow`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinrow--docs) | `ActionRow` with a built-in `SpinButton` for numeric values |
 | [`WrapBox`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-wrapbox--docs) | Wrapping flex container for tag/chip lists that flows across multiple lines — mirrors `AdwWrapBox` |
-| [`TabBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-tabs--docs) / `TabItem` / `TabPanel` | Tab-based navigation with keyboard support, optional close buttons, and `inline` variant |
+| [`TabBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-tabs--docs) / `TabItem` / `TabPanel` | Tab-based navigation with keyboard support, optional close buttons, `count` badge for unread indicators, and `inline` variant |
 | [`ViewSwitcher`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-viewswitcher--docs) / `ViewSwitcherItem` | Segmented pill control for switching between 2–4 top-level views |
 | [`ViewSwitcherSidebar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-viewswitchersidebar--docs) / `ViewSwitcherSidebarItem` | Sidebar-based view switcher — replaces `GtkStackSidebar` |
 | [`Carousel`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-carousel--docs) / `CarouselIndicatorDots` / `CarouselIndicatorLines` | Swipeable page carousel with dot or line indicators — mirrors `AdwCarousel` |
@@ -252,6 +258,7 @@ import { Button } from "@gnome-ui/react/components/Button";
 | [`Toast`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-toast--docs) / `Toaster` | Non-blocking temporary notification with auto-dismiss, action, and queue support |
 | [`Dialog`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-dialog--docs) | Blocking modal with title, body, focus trap, and configurable buttons |
 | [`BottomSheet`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-bottomsheet--docs) | Slide-up panel from the bottom of the viewport with drag handle and optional title |
+| [`Drawer`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-drawer--docs) | Slide-over panel that opens from the left or right with React content |
 | [`Tooltip`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-tooltip--docs) | Floating informational label on hover/focus with auto-flip positioning |
 | [`Popover`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-popover--docs) | Floating interactive panel with arrow and auto-flip positioning |
 | [`Banner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-banner--docs) | Persistent message strip with optional action and dismiss |

package/dist/components/Badge/Badge.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_1apop_3`,badge:`_badge_1apop_11`,anchored:`_anchored_1apop_32`,dot:`_dot_1apop_41`,accent:`_accent_1apop_56`,success:`_success_1apop_61`,warning:`_warning_1apop_66`,error:`_error_1apop_71`,neutral:`_neutral_1apop_76`};exports.default=e;
+var e={wrapper:`_wrapper_1slnu_3`,badge:`_badge_1slnu_11`,anchored:`_anchored_1slnu_33`,dot:`_dot_1slnu_42`,accent:`_accent_1slnu_57`,success:`_success_1slnu_62`,warning:`_warning_1slnu_67`,error:`_error_1slnu_72`,neutral:`_neutral_1slnu_77`};exports.default=e;
 //# sourceMappingURL=Badge.module.css.cjs.map

package/dist/components/Badge/Badge.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.module.css.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── /\n\n.wrapper {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ ─── Base badge ───────────────────────────────────────────────────────────── /\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n font-family: var(--gnome-font-family);\n font-size: 0.6875rem; / 11px — keeps it compact /\n font-weight: var(--gnome-font-weight-semibold, 600);\n line-height: 1;\n\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--gnome-radius-pill);\n\n / Thin white ring to separate from any background /\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/ ─── Anchored position (top-right of parent) ──────────────────────────────── /\n\n.anchored {\n position: absolute;\n top: -4px;\n right: -4px;\n z-index: 1;\n}\n\n/ ─── Dot variant ──────────────────────────────────────────────────────────── /\n\n.dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n top: -2px;\n right: -2px;\n}\n\n/ ─── Color variants ───────────────────────────────────────────────────────── /\n\n.accent {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n background-color: var(--gnome-light-4, #c0bfbc);\n color: rgba(0, 0, 0, 0.8);\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .badge {\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n }\n\n .neutral {\n background-color: var(--gnome-dark-2, #5e5c64);\n color: rgba(255, 255, 255, 0.87);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Badge.module.css.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── /\n\n.wrapper {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ ─── Base badge ───────────────────────────────────────────────────────────── /\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n\n font-family: var(--gnome-font-family);\n font-size: 0.6875rem; / 11px — keeps it compact /\n font-weight: var(--gnome-font-weight-semibold, 600);\n line-height: 1;\n\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--gnome-radius-pill);\n\n / Thin white ring to separate from any background /\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/ ─── Anchored position (top-right of parent) ──────────────────────────────── /\n\n.anchored {\n position: absolute;\n top: -4px;\n right: -4px;\n z-index: 1;\n}\n\n/ ─── Dot variant ──────────────────────────────────────────────────────────── /\n\n.dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n top: -2px;\n right: -2px;\n}\n\n/ ─── Color variants ───────────────────────────────────────────────────────── /\n\n.accent {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n background-color: var(--gnome-light-4, #c0bfbc);\n color: rgba(0, 0, 0, 0.8);\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .badge {\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n }\n\n .neutral {\n background-color: var(--gnome-dark-2, #5e5c64);\n color: rgba(255, 255, 255, 0.87);\n }\n}\n"],"mappings":""}

package/dist/components/Badge/Badge.module.css.js CHANGED Viewed

@@ -1,13 +1,13 @@
 var e = {
-	wrapper: "_wrapper_1apop_3",
-	badge: "_badge_1apop_11",
-	anchored: "_anchored_1apop_32",
-	dot: "_dot_1apop_41",
-	accent: "_accent_1apop_56",
-	success: "_success_1apop_61",
-	warning: "_warning_1apop_66",
-	error: "_error_1apop_71",
-	neutral: "_neutral_1apop_76"
+	wrapper: "_wrapper_1slnu_3",
+	badge: "_badge_1slnu_11",
+	anchored: "_anchored_1slnu_33",
+	dot: "_dot_1slnu_42",
+	accent: "_accent_1slnu_57",
+	success: "_success_1slnu_62",
+	warning: "_warning_1slnu_67",
+	error: "_error_1slnu_72",
+	neutral: "_neutral_1slnu_77"
 };
 //#endregion
 export { e as default };

package/dist/components/Badge/Badge.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.module.css.js","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── /\n\n.wrapper {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ ─── Base badge ───────────────────────────────────────────────────────────── /\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n font-family: var(--gnome-font-family);\n font-size: 0.6875rem; / 11px — keeps it compact /\n font-weight: var(--gnome-font-weight-semibold, 600);\n line-height: 1;\n\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--gnome-radius-pill);\n\n / Thin white ring to separate from any background /\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/ ─── Anchored position (top-right of parent) ──────────────────────────────── /\n\n.anchored {\n position: absolute;\n top: -4px;\n right: -4px;\n z-index: 1;\n}\n\n/ ─── Dot variant ──────────────────────────────────────────────────────────── /\n\n.dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n top: -2px;\n right: -2px;\n}\n\n/ ─── Color variants ───────────────────────────────────────────────────────── /\n\n.accent {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n background-color: var(--gnome-light-4, #c0bfbc);\n color: rgba(0, 0, 0, 0.8);\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .badge {\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n }\n\n .neutral {\n background-color: var(--gnome-dark-2, #5e5c64);\n color: rgba(255, 255, 255, 0.87);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Badge.module.css.js","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── /\n\n.wrapper {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ ─── Base badge ───────────────────────────────────────────────────────────── /\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n\n font-family: var(--gnome-font-family);\n font-size: 0.6875rem; / 11px — keeps it compact /\n font-weight: var(--gnome-font-weight-semibold, 600);\n line-height: 1;\n\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--gnome-radius-pill);\n\n / Thin white ring to separate from any background /\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/ ─── Anchored position (top-right of parent) ──────────────────────────────── /\n\n.anchored {\n position: absolute;\n top: -4px;\n right: -4px;\n z-index: 1;\n}\n\n/ ─── Dot variant ──────────────────────────────────────────────────────────── /\n\n.dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n top: -2px;\n right: -2px;\n}\n\n/ ─── Color variants ───────────────────────────────────────────────────────── /\n\n.accent {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n background-color: var(--gnome-light-4, #c0bfbc);\n color: rgba(0, 0, 0, 0.8);\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .badge {\n box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n }\n\n .neutral {\n background-color: var(--gnome-dark-2, #5e5c64);\n color: rgba(255, 255, 255, 0.87);\n }\n}\n"],"mappings":""}

package/dist/components/ContributionGraph/ContributionGraph.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`./ContributionGraph.module.css.cjs`),t=require(`../GnomeProvider/GnomeContext.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=new Date(2e3,0,2);function a(e,t){return t.format(new Date(2e3,e))}function o(e,t){let n=new Date(i);return n.setDate(i.getDate()+e),t.format(n)}var s=28,c=20,l=[`var(--gnome-card-shade-color, rgba(0,0,0,0.07))`,`var(--gnome-green-1, #8ff0a4)`,`var(--gnome-green-2, #57e389)`,`var(--gnome-green-4, #2ec27e)`,`var(--gnome-green-5, #26a269)`];function u(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function d(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function f(e,t){return t.format(d(e))}function p({data:i,maxLevel:d=4,colorScale:p,cellSize:m=12,cellGap:h=3,weekStartDay:g=1,showMonthLabels:_=!0,showDayLabels:v=!0,showLegend:y=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:C,className:w}){let T=t.useDateTimeFormatter({month:`short`}),E=t.useDateTimeFormatter({weekday:`short`}),D=t.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),O=m+h,k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=p??l,[M,N]=(0,n.useState)({col:0,row:0}),[P,F]=(0,n.useState)(null),I=(0,n.useMemo)(()=>{let e=new Map;for(let t of i)e.set(t.date,t.count);return e},[i]),L=(0,n.useMemo)(()=>Math.max(1,...i.map(e=>e.count)),[i]),{grid:R,monthLabels:z}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-g+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(b-1)*7);let i=[],o=[],s=-1;for(let t=0;t<b;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(o.push({col:t,month:a(n.getMonth(),T)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=u(i),s=a?0:I.get(o)??0,l=s===0?0:Math.min(d,Math.ceil(s/L*d));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:o}},[I,L,d,b,g,T]),B=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-g+7)%7,label:o(e,E)})),[g,E]),V=v?s:0,H=_?c:0,U=V+b*O-h,W=H+7*O-h,G=Math.min(4,Math.floor(m/3));function K(e,t){let n=Math.max(0,Math.min(b-1,e)),r=Math.max(0,Math.min(6,t));N({col:n,row:r}),k.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function q(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),K(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=R[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function J(e,t){let n=A.current;if(!n)return;let r=n.getBoundingClientRect(),i=e.currentTarget.getBoundingClientRect();F({x:i.left-r.left+m/2,y:i.top-r.top,text:t})}function Y(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function X(e){if(e.future)return f(e.iso,D);let t=f(e.iso,D);return C?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,r.jsxs)(`div`,{ref:A,className:[e.default.wrapper,w].filter(Boolean).join(` `),children:[(0,r.jsxs)(`svg`,{ref:k,width:U,height:W,className:e.default.svg,"aria-label":x,role:`img`,children:[_&&z.map(({col:t,month:n})=>(0,r.jsx)(`text`,{x:V+t*O,y:12,className:e.default.label,children:n},`m-${t}`)),v&&B.map(({row:t,label:n})=>(0,r.jsx)(`text`,{x:0,y:H+t*O+m-1,className:e.default.label,children:n},`d-${t}`)),(0,r.jsx)(`g`,{role:`grid`,"aria-label":x,children:R.map((t,n)=>(0,r.jsx)(`g`,{role:`row`,children:t.map((t,i)=>{let a=X(t),o=M.col===n&&M.row===i;return(0,r.jsx)(`rect`,{"data-col":n,"data-row":i,x:V+n*O,y:H+i*O,width:m,height:m,rx:G,fill:Y(t),opacity:t.future?.35:1,className:e.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":t.future||void 0,tabIndex:o?0:-1,onClick:()=>!t.future&&S?.({date:t.iso,count:t.count}),onKeyDown:e=>q(e,n,i),onFocus:()=>N({col:n,row:i}),onMouseEnter:e=>J(e,a),onMouseLeave:()=>F(null)},`${n}-${i}`)})},n))})]}),P&&(0,r.jsx)(`div`,{className:e.default.tooltip,style:{left:P.x,top:P.y},role:`tooltip`,children:P.text}),y&&(0,r.jsxs)(`div`,{className:e.default.legend,children:[(0,r.jsx)(`span`,{className:e.default.legendLabel,children:`Less`}),Array.from({length:d+1},(t,n)=>(0,r.jsx)(`svg`,{width:m,height:m,"aria-hidden":`true`,className:e.default.legendCell,children:(0,r.jsx)(`rect`,{width:m,height:m,rx:G,fill:j[Math.min(n,j.length-1)]})},n)),(0,r.jsx)(`span`,{className:e.default.legendLabel,children:`More`})]})]})}exports.ContributionGraph=p;
+const e=require(`./ContributionGraph.module.css.cjs`),t=require(`../GnomeProvider/GnomeContext.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);var a=new Date(2e3,0,2);function o(e,t){return t.format(new Date(2e3,e))}function s(e,t){let n=new Date(a);return n.setDate(a.getDate()+e),t.format(n)}var c=28,l=20,u=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function ee(e){return[`var(--gnome-card-shade-color)`,`var(--gnome-${e}-1)`,`var(--gnome-${e}-2)`,`var(--gnome-${e}-4)`,`var(--gnome-${e}-5)`]}function d(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(e,t){return t.format(f(e))}function m({data:a,maxLevel:f=4,cellSize:m=12,cellGap:h=3,responsive:g=!0,minCellSize:te=8,maxCellSize:ne=24,weekStartDay:_=1,showMonthLabels:v=!0,showDayLabels:y=!0,showLegend:re=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:ie,className:ae}){let C=t.useDateTimeFormatter({month:`short`}),w=t.useDateTimeFormatter({weekday:`short`}),T=t.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),{accentColor:E}=(0,n.useContext)(t.GnomeContext),D=u.has(E)?E:`green`,O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>ee(D),[D]),[M,N]=(0,n.useState)(null),[P,F]=(0,n.useState)({col:0,row:0}),[I,L]=(0,n.useState)(null),[R,z]=(0,n.useState)(null);(0,n.useEffect)(()=>{if(!g)return;let e=k.current;if(!e)return;let t=()=>{let t=e.clientWidth||e.getBoundingClientRect().width;t>0&&N(t)};if(t(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,t),()=>window.removeEventListener(`resize`,t);let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[g]),(0,n.useEffect)(()=>{if(!I)return;let e=()=>{let e=A.current;if(!e)return;let t=I.target.getBoundingClientRect(),n=e.getBoundingClientRect(),r=document.documentElement.clientWidth||window.innerWidth,i=document.documentElement.clientHeight||window.innerHeight,a=Math.max(8,r-n.width-8),o=Math.max(8,i-n.height-8),s=t.left+t.width/2-n.width/2,c=t.top-n.height-6,l=c>=8?c:t.bottom+6;z({left:Math.max(8,Math.min(s,a)),top:Math.max(8,Math.min(l,o))})};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,{capture:!0})}},[I]);let B=(0,n.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t.date,t.count);return e},[a]),V=(0,n.useMemo)(()=>Math.max(1,...a.map(e=>e.count)),[a]),H=y?c:0,U=v?l:0,W=Math.max(1,Math.floor(b)),G=Math.max(1,te),K=Math.max(G,ne),q=(0,n.useMemo)(()=>{if(!g||M===null)return{cellSize:m,weeks:W};let e=Math.max(0,M-H),t=(e+h)/W-h;if(t>=G)return{cellSize:Math.min(K,t),weeks:W};let n=Math.floor((e+h)/(G+h));return{cellSize:G,weeks:Math.max(1,Math.min(W,n))}},[M,h,m,W,H,K,G,g]),J=q.weeks,Y=q.cellSize,X=Y+h,{grid:Z,monthLabels:oe}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-_+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(J-1)*7);let i=[],a=[],s=-1;for(let t=0;t<J;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(a.push({col:t,month:o(n.getMonth(),C)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=d(i),s=a?0:B.get(o)??0,l=s===0?0:Math.min(f,Math.ceil(s/V*f));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:a}},[B,V,f,J,_,C]),se=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-_+7)%7,label:s(e,w)})),[_,w]),ce=H+J*X-h,le=U+7*X-h,Q=Math.min(4,Math.floor(Y/3));(0,n.useEffect)(()=>{F(e=>({col:Math.min(J-1,e.col),row:e.row}))},[J]);function ue(e,t){let n=Math.max(0,Math.min(J-1,e)),r=Math.max(0,Math.min(6,t));F({col:n,row:r}),O.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function $(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),ue(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=Z[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function de(e,t){z(null),L({target:e.currentTarget,text:t})}function fe(){L(null),z(null)}function pe(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function me(e){if(e.future)return p(e.iso,T);let t=p(e.iso,T);return ie?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,i.jsxs)(`div`,{className:[e.default.wrapper,ae].filter(Boolean).join(` `),children:[(0,i.jsx)(`div`,{ref:k,className:e.default.graphViewport,children:(0,i.jsxs)(`svg`,{ref:O,width:ce,height:le,className:e.default.svg,"aria-label":x,role:`img`,"data-cell-size":Y,"data-visible-weeks":J,children:[v&&oe.map(({col:t,month:n})=>(0,i.jsx)(`text`,{x:H+t*X,y:12,className:e.default.label,children:n},`m-${t}`)),y&&se.map(({row:t,label:n})=>(0,i.jsx)(`text`,{x:0,y:U+t*X+Y-1,className:e.default.label,children:n},`d-${t}`)),(0,i.jsx)(`g`,{role:`grid`,"aria-label":x,children:Z.map((t,n)=>(0,i.jsx)(`g`,{role:`row`,children:t.map((t,r)=>{let a=me(t),o=P.col===n&&P.row===r;return(0,i.jsx)(`rect`,{"data-col":n,"data-row":r,x:H+n*X,y:U+r*X,width:Y,height:Y,rx:Q,fill:pe(t),opacity:t.future?.35:1,className:e.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":t.future||void 0,tabIndex:o?0:-1,onClick:()=>!t.future&&S?.({date:t.iso,count:t.count}),onKeyDown:e=>$(e,n,r),onFocus:()=>F({col:n,row:r}),onMouseEnter:e=>de(e,a),onMouseLeave:fe},`${n}-${r}`)})},n))})]})}),I&&typeof document<`u`&&(0,r.createPortal)((0,i.jsx)(`div`,{ref:A,className:e.default.tooltip,style:R?{left:R.left,top:R.top}:{visibility:`hidden`,left:0,top:0},role:`tooltip`,children:I.text}),document.body),re&&(0,i.jsxs)(`div`,{className:e.default.legend,children:[(0,i.jsx)(`span`,{className:e.default.legendLabel,children:`Less`}),Array.from({length:f+1},(t,n)=>(0,i.jsx)(`svg`,{width:Y,height:Y,"aria-hidden":`true`,className:e.default.legendCell,children:(0,i.jsx)(`rect`,{width:Y,height:Y,rx:Q,fill:j[Math.min(n,j.length-1)]})},n)),(0,i.jsx)(`span`,{className:e.default.legendLabel,children:`More`})]})]})}exports.ContributionGraph=m;
 //# sourceMappingURL=ContributionGraph.cjs.map

package/dist/components/ContributionGraph/ContributionGraph.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContributionGraph.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport styles from \"./ContributionGraph.module.css\";\nimport { useDateTimeFormatter } from \"../GnomeProvider/GnomeContext\";\n\nexport interface ContributionDay {\n /** ISO 8601 date — \"YYYY-MM-DD\". /\n date: string;\n /* Non-negative activity count. /\n count: number;\n}\n\nexport interface ContributionGraphProps {\n /* Activity data. Days absent from the array are treated as count = 0. /\n data: ContributionDay[];\n /\n Number of intensity levels (excluding 0).\n * @default 4\n /\n maxLevel?: number;\n /\n Colour scale — length must be maxLevel + 1 (index 0 = empty).\n * Defaults to the Adwaita green palette.\n /\n colorScale?: string[];\n /* Cell side length in pixels. @default 12 /\n cellSize?: number;\n /* Gap between cells in pixels. @default 3 /\n cellGap?: number;\n /* 0 = Sunday · 1 = Monday (GNOME locale default). @default 1 /\n weekStartDay?: 0 \| 1;\n /* @default true /\n showMonthLabels?: boolean;\n /* @default true /\n showDayLabels?: boolean;\n /* @default true /\n showLegend?: boolean;\n /* Number of week columns to display. @default 52 /\n weeks?: number;\n /* @default \"Contribution graph\" /\n ariaLabel?: string;\n onDayClick?: (day: ContributionDay) => void;\n /* Returns a plain-text tooltip string for a day. /\n tooltipContent?: (day: ContributionDay) => string;\n className?: string;\n}\n\n// Reference Sunday: 2000-01-02 is a Sunday (day index 0)\nconst REF_SUNDAY = new Date(2000, 0, 2);\n\nfunction getShortMonth(\n monthIndex: number,\n formatter: Intl.DateTimeFormat,\n): string {\n return formatter.format(new Date(2000, monthIndex));\n}\n\nfunction getShortDay(\n dayIndex: number,\n formatter: Intl.DateTimeFormat,\n): string {\n const date = new Date(REF_SUNDAY);\n date.setDate(REF_SUNDAY.getDate() + dayIndex);\n return formatter.format(date);\n}\n\nconst DAY_LABEL_WIDTH = 28;\nconst MONTH_LABEL_HEIGHT = 20;\n\nconst DEFAULT_COLORS = [\n \"var(--gnome-card-shade-color, rgba(0,0,0,0.07))\",\n \"var(--gnome-green-1, #8ff0a4)\",\n \"var(--gnome-green-2, #57e389)\",\n \"var(--gnome-green-4, #2ec27e)\",\n \"var(--gnome-green-5, #26a269)\",\n];\n\nfunction dateToIso(date: Date): string {\n const y = date.getFullYear();\n const m = String(date.getMonth() + 1).padStart(2, \"0\");\n const d = String(date.getDate()).padStart(2, \"0\");\n return `${y}-${m}-${d}`;\n}\n\nfunction isoToLocal(iso: string): Date {\n const [y, m, d] = iso.split(\"-\").map(Number);\n return new Date(y, m - 1, d);\n}\n\nfunction fullDateLabel(iso: string, formatter: Intl.DateTimeFormat): string {\n return formatter.format(isoToLocal(iso));\n}\n\ninterface GridCell {\n iso: string;\n count: number;\n level: number;\n future: boolean;\n}\n\nexport function ContributionGraph({\n data,\n maxLevel = 4,\n colorScale,\n cellSize = 12,\n cellGap = 3,\n weekStartDay = 1,\n showMonthLabels = true,\n showDayLabels = true,\n showLegend = true,\n weeks = 52,\n ariaLabel = \"Contribution graph\",\n onDayClick,\n tooltipContent,\n className,\n}: ContributionGraphProps) {\n const monthFormatter = useDateTimeFormatter({ month: \"short\" });\n const weekdayFormatter = useDateTimeFormatter({ weekday: \"short\" });\n const fullDateFormatter = useDateTimeFormatter({\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n const stride = cellSize + cellGap;\n const svgRef = useRef<SVGSVGElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const colors = colorScale ?? DEFAULT_COLORS;\n\n const [focusedCell, setFocusedCell] = useState({ col: 0, row: 0 });\n const [tooltip, setTooltip] = useState<{\n x: number;\n y: number;\n text: string;\n } \| null>(null);\n\n const countMap = useMemo(() => {\n const map = new Map<string, number>();\n for (const d of data) map.set(d.date, d.count);\n return map;\n }, [data]);\n\n const maxCount = useMemo(\n () => Math.max(1, ...data.map((d) => d.count)),\n [data],\n );\n\n const { grid, monthLabels } = useMemo(() => {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n // Align to start of current week\n const daysFromWeekStart = (today.getDay() - weekStartDay + 7) % 7;\n const lastWeekStart = new Date(today);\n lastWeekStart.setDate(today.getDate() - daysFromWeekStart);\n\n const firstDay = new Date(lastWeekStart);\n firstDay.setDate(lastWeekStart.getDate() - (weeks - 1) 7);\n\n const gridResult: GridCell[][] = [];\n const labels: { col: number; month: string }[] = [];\n let lastMonth = -1;\n\n for (let col = 0; col < weeks; col++) {\n const colStart = new Date(firstDay);\n colStart.setDate(firstDay.getDate() + col * 7);\n\n // Month label when the column starts a new month\n if (colStart.getMonth() !== lastMonth) {\n labels.push({\n col,\n month: getShortMonth(colStart.getMonth(), monthFormatter),\n });\n lastMonth = colStart.getMonth();\n }\n\n const column: GridCell[] = [];\n for (let row = 0; row < 7; row++) {\n const date = new Date(firstDay);\n date.setDate(firstDay.getDate() + col * 7 + row);\n const future = date > today;\n const iso = dateToIso(date);\n const count = future ? 0 : (countMap.get(iso) ?? 0);\n const level =\n count === 0\n ? 0\n : Math.min(maxLevel, Math.ceil((count / maxCount) * maxLevel));\n column.push({ iso, count, level, future });\n }\n gridResult.push(column);\n }\n\n return { grid: gridResult, monthLabels: labels };\n }, [countMap, maxCount, maxLevel, weeks, weekStartDay, monthFormatter]);\n\n // Always label Mon(1), Wed(3), Fri(5) — rows shift with weekStartDay\n const labelRows = useMemo(\n () =>\n [1, 3, 5].map((dayIndex) => ({\n row: (dayIndex - weekStartDay + 7) % 7,\n label: getShortDay(dayIndex, weekdayFormatter),\n })),\n [weekStartDay, weekdayFormatter],\n );\n\n const dayLabelW = showDayLabels ? DAY_LABEL_WIDTH : 0;\n const monthLabelH = showMonthLabels ? MONTH_LABEL_HEIGHT : 0;\n const svgWidth = dayLabelW + weeks * stride - cellGap;\n const svgHeight = monthLabelH + 7 * stride - cellGap;\n const cellRx = Math.min(4, Math.floor(cellSize / 3));\n\n function focusCell(col: number, row: number) {\n const c = Math.max(0, Math.min(weeks - 1, col));\n const r = Math.max(0, Math.min(6, row));\n setFocusedCell({ col: c, row: r });\n svgRef.current\n ?.querySelector<SVGRectElement>(`[data-col=\"${c}\"][data-row=\"${r}\"]`)\n ?.focus();\n }\n\n function handleCellKey(e: KeyboardEvent, col: number, row: number) {\n const moves: Record<string, [number, number]> = {\n ArrowRight: [col + 1, row],\n ArrowLeft: [col - 1, row],\n ArrowDown: [col, row + 1],\n ArrowUp: [col, row - 1],\n };\n if (moves[e.key]) {\n e.preventDefault();\n focusCell(...moves[e.key]);\n } else if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n const cell = grid[col]?.[row];\n if (cell && !cell.future) onDayClick?.({ date: cell.iso, count: cell.count });\n }\n }\n\n function handleMouseEnter(\n e: React.MouseEvent<SVGRectElement>,\n text: string,\n ) {\n const wrapper = wrapperRef.current;\n if (!wrapper) return;\n const wRect = wrapper.getBoundingClientRect();\n const rRect = (e.currentTarget as Element).getBoundingClientRect();\n setTooltip({\n x: rRect.left - wRect.left + cellSize / 2,\n y: rRect.top - wRect.top,\n text,\n });\n }\n\n function cellColor(cell: GridCell): string {\n if (cell.future) return colors[0];\n return colors[Math.min(cell.level, colors.length - 1)] ?? colors[colors.length - 1];\n }\n\n function cellTooltip(cell: GridCell): string {\n if (cell.future) return fullDateLabel(cell.iso, fullDateFormatter);\n const formattedDate = fullDateLabel(cell.iso, fullDateFormatter);\n return (\n tooltipContent?.({ date: cell.iso, count: cell.count }) ??\n `${cell.count} contribution${cell.count !== 1 ? \"s\" : \"\"} on ${formattedDate}`\n );\n }\n\n return (\n <div\n ref={wrapperRef}\n className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n >\n <svg\n ref={svgRef}\n width={svgWidth}\n height={svgHeight}\n className={styles.svg}\n aria-label={ariaLabel}\n role=\"img\"\n >\n {/* Month labels /}\n {showMonthLabels &&\n monthLabels.map(({ col, month }) => (\n <text\n key={`m-${col}`}\n x={dayLabelW + col stride}\n y={12}\n className={styles.label}\n >\n {month}\n </text>\n ))}\n\n {/* Day-of-week labels: Mon, Wed, Fri /}\n {showDayLabels &&\n labelRows.map(({ row, label }) => (\n <text\n key={`d-${row}`}\n x={0}\n y={monthLabelH + row stride + cellSize - 1}\n className={styles.label}\n >\n {label}\n </text>\n ))}\n\n {/* Activity grid /}\n <g role=\"grid\" aria-label={ariaLabel}>\n {grid.map((column, col) => (\n <g key={col} role=\"row\">\n {column.map((cell, row) => {\n const tipText = cellTooltip(cell);\n const isFocused =\n focusedCell.col === col && focusedCell.row === row;\n\n return (\n <rect\n key={`${col}-${row}`}\n data-col={col}\n data-row={row}\n x={dayLabelW + col stride}\n y={monthLabelH + row * stride}\n width={cellSize}\n height={cellSize}\n rx={cellRx}\n fill={cellColor(cell)}\n opacity={cell.future ? 0.35 : 1}\n className={styles.cell}\n role=\"gridcell\"\n aria-label={tipText}\n aria-disabled={cell.future \|\| undefined}\n tabIndex={isFocused ? 0 : -1}\n onClick={() => !cell.future && onDayClick?.({ date: cell.iso, count: cell.count })}\n onKeyDown={(e) => handleCellKey(e, col, row)}\n onFocus={() => setFocusedCell({ col, row })}\n onMouseEnter={(e) => handleMouseEnter(e, tipText)}\n onMouseLeave={() => setTooltip(null)}\n />\n );\n })}\n </g>\n ))}\n </g>\n </svg>\n\n {tooltip && (\n <div\n className={styles.tooltip}\n style={{ left: tooltip.x, top: tooltip.y }}\n role=\"tooltip\"\n >\n {tooltip.text}\n </div>\n )}\n\n {showLegend && (\n <div className={styles.legend}>\n <span className={styles.legendLabel}>Less</span>\n {Array.from({ length: maxLevel + 1 }, (_, i) => (\n <svg\n key={i}\n width={cellSize}\n height={cellSize}\n aria-hidden=\"true\"\n className={styles.legendCell}\n >\n <rect\n width={cellSize}\n height={cellSize}\n rx={cellRx}\n fill={colors[Math.min(i, colors.length - 1)]}\n />\n </svg>\n ))}\n <span className={styles.legendLabel}>More</span>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ContributionGraph.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.tsx"],"sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./ContributionGraph.module.css\";\nimport {\n GnomeContext,\n useDateTimeFormatter,\n type GnomeNamedAccentColor,\n} from \"../GnomeProvider/GnomeContext\";\n\nexport interface ContributionDay {\n /** ISO 8601 date — \"YYYY-MM-DD\". /\n date: string;\n /* Non-negative activity count. /\n count: number;\n}\n\nexport interface ContributionGraphProps {\n /* Activity data. Days absent from the array are treated as count = 0. /\n data: ContributionDay[];\n /\n Number of intensity levels (excluding 0).\n * @default 4\n /\n maxLevel?: number;\n /* Cell side length in pixels. @default 12 /\n cellSize?: number;\n /* Gap between cells in pixels. @default 3 /\n cellGap?: number;\n /\n Fit the graph to its container by resizing cells and reducing visible\n * weeks when the configured range cannot stay legible.\n * @default true\n /\n responsive?: boolean;\n /* Smallest responsive cell side length in pixels. @default 8 /\n minCellSize?: number;\n /* Largest responsive cell side length in pixels. @default 24 /\n maxCellSize?: number;\n /* 0 = Sunday · 1 = Monday (GNOME locale default). @default 1 /\n weekStartDay?: 0 \| 1;\n /* @default true /\n showMonthLabels?: boolean;\n /* @default true /\n showDayLabels?: boolean;\n /* @default true /\n showLegend?: boolean;\n /* Number of week columns to display. @default 52 /\n weeks?: number;\n /* @default \"Contribution graph\" /\n ariaLabel?: string;\n onDayClick?: (day: ContributionDay) => void;\n /* Returns a plain-text tooltip string for a day. /\n tooltipContent?: (day: ContributionDay) => string;\n className?: string;\n}\n\n// Reference Sunday: 2000-01-02 is a Sunday (day index 0)\nconst REF_SUNDAY = new Date(2000, 0, 2);\n\nfunction getShortMonth(\n monthIndex: number,\n formatter: Intl.DateTimeFormat,\n): string {\n return formatter.format(new Date(2000, monthIndex));\n}\n\nfunction getShortDay(\n dayIndex: number,\n formatter: Intl.DateTimeFormat,\n): string {\n const date = new Date(REF_SUNDAY);\n date.setDate(REF_SUNDAY.getDate() + dayIndex);\n return formatter.format(date);\n}\n\nconst DAY_LABEL_WIDTH = 28;\nconst MONTH_LABEL_HEIGHT = 20;\n\nconst NAMED_ACCENTS = new Set<GnomeNamedAccentColor>([\n \"blue\",\n \"green\",\n \"yellow\",\n \"orange\",\n \"red\",\n \"purple\",\n \"brown\",\n]);\n\nfunction accentScale(accentColor: GnomeNamedAccentColor): string[] {\n return [\n \"var(--gnome-card-shade-color)\",\n `var(--gnome-${accentColor}-1)`,\n `var(--gnome-${accentColor}-2)`,\n `var(--gnome-${accentColor}-4)`,\n `var(--gnome-${accentColor}-5)`,\n ];\n}\n\nfunction dateToIso(date: Date): string {\n const y = date.getFullYear();\n const m = String(date.getMonth() + 1).padStart(2, \"0\");\n const d = String(date.getDate()).padStart(2, \"0\");\n return `${y}-${m}-${d}`;\n}\n\nfunction isoToLocal(iso: string): Date {\n const [y, m, d] = iso.split(\"-\").map(Number);\n return new Date(y, m - 1, d);\n}\n\nfunction fullDateLabel(iso: string, formatter: Intl.DateTimeFormat): string {\n return formatter.format(isoToLocal(iso));\n}\n\ninterface GridCell {\n iso: string;\n count: number;\n level: number;\n future: boolean;\n}\n\nexport function ContributionGraph({\n data,\n maxLevel = 4,\n cellSize = 12,\n cellGap = 3,\n responsive = true,\n minCellSize = 8,\n maxCellSize = 24,\n weekStartDay = 1,\n showMonthLabels = true,\n showDayLabels = true,\n showLegend = true,\n weeks = 52,\n ariaLabel = \"Contribution graph\",\n onDayClick,\n tooltipContent,\n className,\n}: ContributionGraphProps) {\n const monthFormatter = useDateTimeFormatter({ month: \"short\" });\n const weekdayFormatter = useDateTimeFormatter({ weekday: \"short\" });\n const fullDateFormatter = useDateTimeFormatter({\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n const { accentColor } = useContext(GnomeContext);\n const graphAccent = NAMED_ACCENTS.has(accentColor as GnomeNamedAccentColor)\n ? accentColor as GnomeNamedAccentColor\n : \"green\";\n const svgRef = useRef<SVGSVGElement>(null);\n const graphViewportRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const colors = useMemo(() => accentScale(graphAccent), [graphAccent]);\n\n const [availableWidth, setAvailableWidth] = useState<number \| null>(null);\n const [focusedCell, setFocusedCell] = useState({ col: 0, row: 0 });\n const [tooltip, setTooltip] = useState<{\n target: SVGRectElement;\n text: string;\n } \| null>(null);\n const [tooltipPosition, setTooltipPosition] = useState<{\n left: number;\n top: number;\n } \| null>(null);\n\n useEffect(() => {\n if (!responsive) return;\n\n const viewport = graphViewportRef.current;\n if (!viewport) return;\n\n const updateWidth = () => {\n const width = viewport.clientWidth \|\| viewport.getBoundingClientRect().width;\n if (width > 0) setAvailableWidth(width);\n };\n\n updateWidth();\n\n if (typeof ResizeObserver === \"undefined\") {\n window.addEventListener(\"resize\", updateWidth);\n return () => window.removeEventListener(\"resize\", updateWidth);\n }\n\n const observer = new ResizeObserver(updateWidth);\n observer.observe(viewport);\n return () => observer.disconnect();\n }, [responsive]);\n\n useEffect(() => {\n if (!tooltip) return;\n\n const placeTooltip = () => {\n const tooltipNode = tooltipRef.current;\n if (!tooltipNode) return;\n\n const cellRect = tooltip.target.getBoundingClientRect();\n const tipRect = tooltipNode.getBoundingClientRect();\n const margin = 8;\n const gap = 6;\n const viewportWidth = document.documentElement.clientWidth \|\| window.innerWidth;\n const viewportHeight = document.documentElement.clientHeight \|\| window.innerHeight;\n const maxLeft = Math.max(margin, viewportWidth - tipRect.width - margin);\n const maxTop = Math.max(margin, viewportHeight - tipRect.height - margin);\n const centeredLeft = cellRect.left + cellRect.width / 2 - tipRect.width / 2;\n const aboveTop = cellRect.top - tipRect.height - gap;\n const preferredTop = aboveTop >= margin ? aboveTop : cellRect.bottom + gap;\n\n setTooltipPosition({\n left: Math.max(margin, Math.min(centeredLeft, maxLeft)),\n top: Math.max(margin, Math.min(preferredTop, maxTop)),\n });\n };\n\n placeTooltip();\n window.addEventListener(\"resize\", placeTooltip);\n window.addEventListener(\"scroll\", placeTooltip, { passive: true, capture: true });\n\n return () => {\n window.removeEventListener(\"resize\", placeTooltip);\n window.removeEventListener(\"scroll\", placeTooltip, { capture: true });\n };\n }, [tooltip]);\n\n const countMap = useMemo(() => {\n const map = new Map<string, number>();\n for (const d of data) map.set(d.date, d.count);\n return map;\n }, [data]);\n\n const maxCount = useMemo(\n () => Math.max(1, ...data.map((d) => d.count)),\n [data],\n );\n\n const dayLabelW = showDayLabels ? DAY_LABEL_WIDTH : 0;\n const monthLabelH = showMonthLabels ? MONTH_LABEL_HEIGHT : 0;\n const configuredWeeks = Math.max(1, Math.floor(weeks));\n const normalizedMinCellSize = Math.max(1, minCellSize);\n const normalizedMaxCellSize = Math.max(normalizedMinCellSize, maxCellSize);\n const fit = useMemo(() => {\n if (!responsive \|\| availableWidth === null) {\n return { cellSize, weeks: configuredWeeks };\n }\n\n const gridWidth = Math.max(0, availableWidth - dayLabelW);\n const fittedCellSize = (gridWidth + cellGap) / configuredWeeks - cellGap;\n\n if (fittedCellSize >= normalizedMinCellSize) {\n return {\n cellSize: Math.min(normalizedMaxCellSize, fittedCellSize),\n weeks: configuredWeeks,\n };\n }\n\n const fittedWeeks = Math.floor((gridWidth + cellGap) / (normalizedMinCellSize + cellGap));\n return {\n cellSize: normalizedMinCellSize,\n weeks: Math.max(1, Math.min(configuredWeeks, fittedWeeks)),\n };\n }, [\n availableWidth,\n cellGap,\n cellSize,\n configuredWeeks,\n dayLabelW,\n normalizedMaxCellSize,\n normalizedMinCellSize,\n responsive,\n ]);\n const visibleWeeks = fit.weeks;\n const resolvedCellSize = fit.cellSize;\n const stride = resolvedCellSize + cellGap;\n\n const { grid, monthLabels } = useMemo(() => {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n // Align to start of current week\n const daysFromWeekStart = (today.getDay() - weekStartDay + 7) % 7;\n const lastWeekStart = new Date(today);\n lastWeekStart.setDate(today.getDate() - daysFromWeekStart);\n\n const firstDay = new Date(lastWeekStart);\n firstDay.setDate(lastWeekStart.getDate() - (visibleWeeks - 1) 7);\n\n const gridResult: GridCell[][] = [];\n const labels: { col: number; month: string }[] = [];\n let lastMonth = -1;\n\n for (let col = 0; col < visibleWeeks; col++) {\n const colStart = new Date(firstDay);\n colStart.setDate(firstDay.getDate() + col * 7);\n\n // Month label when the column starts a new month\n if (colStart.getMonth() !== lastMonth) {\n labels.push({\n col,\n month: getShortMonth(colStart.getMonth(), monthFormatter),\n });\n lastMonth = colStart.getMonth();\n }\n\n const column: GridCell[] = [];\n for (let row = 0; row < 7; row++) {\n const date = new Date(firstDay);\n date.setDate(firstDay.getDate() + col * 7 + row);\n const future = date > today;\n const iso = dateToIso(date);\n const count = future ? 0 : (countMap.get(iso) ?? 0);\n const level =\n count === 0\n ? 0\n : Math.min(maxLevel, Math.ceil((count / maxCount) * maxLevel));\n column.push({ iso, count, level, future });\n }\n gridResult.push(column);\n }\n\n return { grid: gridResult, monthLabels: labels };\n }, [countMap, maxCount, maxLevel, visibleWeeks, weekStartDay, monthFormatter]);\n\n // Always label Mon(1), Wed(3), Fri(5) — rows shift with weekStartDay\n const labelRows = useMemo(\n () =>\n [1, 3, 5].map((dayIndex) => ({\n row: (dayIndex - weekStartDay + 7) % 7,\n label: getShortDay(dayIndex, weekdayFormatter),\n })),\n [weekStartDay, weekdayFormatter],\n );\n\n const svgWidth = dayLabelW + visibleWeeks * stride - cellGap;\n const svgHeight = monthLabelH + 7 * stride - cellGap;\n const cellRx = Math.min(4, Math.floor(resolvedCellSize / 3));\n\n useEffect(() => {\n setFocusedCell((current) => ({\n col: Math.min(visibleWeeks - 1, current.col),\n row: current.row,\n }));\n }, [visibleWeeks]);\n\n function focusCell(col: number, row: number) {\n const c = Math.max(0, Math.min(visibleWeeks - 1, col));\n const r = Math.max(0, Math.min(6, row));\n setFocusedCell({ col: c, row: r });\n svgRef.current\n ?.querySelector<SVGRectElement>(`[data-col=\"${c}\"][data-row=\"${r}\"]`)\n ?.focus();\n }\n\n function handleCellKey(e: KeyboardEvent, col: number, row: number) {\n const moves: Record<string, [number, number]> = {\n ArrowRight: [col + 1, row],\n ArrowLeft: [col - 1, row],\n ArrowDown: [col, row + 1],\n ArrowUp: [col, row - 1],\n };\n if (moves[e.key]) {\n e.preventDefault();\n focusCell(...moves[e.key]);\n } else if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n const cell = grid[col]?.[row];\n if (cell && !cell.future) onDayClick?.({ date: cell.iso, count: cell.count });\n }\n }\n\n function handleMouseEnter(\n e: React.MouseEvent<SVGRectElement>,\n text: string,\n ) {\n setTooltipPosition(null);\n setTooltip({\n target: e.currentTarget,\n text,\n });\n }\n\n function hideTooltip() {\n setTooltip(null);\n setTooltipPosition(null);\n }\n\n function cellColor(cell: GridCell): string {\n if (cell.future) return colors[0];\n return colors[Math.min(cell.level, colors.length - 1)] ?? colors[colors.length - 1];\n }\n\n function cellTooltip(cell: GridCell): string {\n if (cell.future) return fullDateLabel(cell.iso, fullDateFormatter);\n const formattedDate = fullDateLabel(cell.iso, fullDateFormatter);\n return (\n tooltipContent?.({ date: cell.iso, count: cell.count }) ??\n `${cell.count} contribution${cell.count !== 1 ? \"s\" : \"\"} on ${formattedDate}`\n );\n }\n\n return (\n <div\n className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n >\n <div ref={graphViewportRef} className={styles.graphViewport}>\n <svg\n ref={svgRef}\n width={svgWidth}\n height={svgHeight}\n className={styles.svg}\n aria-label={ariaLabel}\n role=\"img\"\n data-cell-size={resolvedCellSize}\n data-visible-weeks={visibleWeeks}\n >\n {/* Month labels /}\n {showMonthLabels &&\n monthLabels.map(({ col, month }) => (\n <text\n key={`m-${col}`}\n x={dayLabelW + col stride}\n y={12}\n className={styles.label}\n >\n {month}\n </text>\n ))}\n\n {/* Day-of-week labels: Mon, Wed, Fri /}\n {showDayLabels &&\n labelRows.map(({ row, label }) => (\n <text\n key={`d-${row}`}\n x={0}\n y={monthLabelH + row stride + resolvedCellSize - 1}\n className={styles.label}\n >\n {label}\n </text>\n ))}\n\n {/* Activity grid /}\n <g role=\"grid\" aria-label={ariaLabel}>\n {grid.map((column, col) => (\n <g key={col} role=\"row\">\n {column.map((cell, row) => {\n const tipText = cellTooltip(cell);\n const isFocused =\n focusedCell.col === col && focusedCell.row === row;\n\n return (\n <rect\n key={`${col}-${row}`}\n data-col={col}\n data-row={row}\n x={dayLabelW + col stride}\n y={monthLabelH + row * stride}\n width={resolvedCellSize}\n height={resolvedCellSize}\n rx={cellRx}\n fill={cellColor(cell)}\n opacity={cell.future ? 0.35 : 1}\n className={styles.cell}\n role=\"gridcell\"\n aria-label={tipText}\n aria-disabled={cell.future \|\| undefined}\n tabIndex={isFocused ? 0 : -1}\n onClick={() => !cell.future && onDayClick?.({ date: cell.iso, count: cell.count })}\n onKeyDown={(e) => handleCellKey(e, col, row)}\n onFocus={() => setFocusedCell({ col, row })}\n onMouseEnter={(e) => handleMouseEnter(e, tipText)}\n onMouseLeave={hideTooltip}\n />\n );\n })}\n </g>\n ))}\n </g>\n </svg>\n </div>\n\n {tooltip && typeof document !== \"undefined\" && createPortal(\n <div\n ref={tooltipRef}\n className={styles.tooltip}\n style={\n tooltipPosition\n ? { left: tooltipPosition.left, top: tooltipPosition.top }\n : { visibility: \"hidden\", left: 0, top: 0 }\n }\n role=\"tooltip\"\n >\n {tooltip.text}\n </div>,\n document.body,\n )}\n\n {showLegend && (\n <div className={styles.legend}>\n <span className={styles.legendLabel}>Less</span>\n {Array.from({ length: maxLevel + 1 }, (_, i) => (\n <svg\n key={i}\n width={resolvedCellSize}\n height={resolvedCellSize}\n aria-hidden=\"true\"\n className={styles.legendCell}\n >\n <rect\n width={resolvedCellSize}\n height={resolvedCellSize}\n rx={cellRx}\n fill={colors[Math.min(i, colors.length - 1)]}\n />\n </svg>\n ))}\n <span className={styles.legendLabel}>More</span>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/ContributionGraph/ContributionGraph.d.ts CHANGED Viewed

@@ -12,15 +12,20 @@ export interface ContributionGraphProps {
      * @default 4
      */
     maxLevel?: number;
-    /**
-     * Colour scale — length must be maxLevel + 1 (index 0 = empty).
-     * Defaults to the Adwaita green palette.
-     */
-    colorScale?: string[];
     /** Cell side length in pixels. @default 12 */
     cellSize?: number;
     /** Gap between cells in pixels. @default 3 */
     cellGap?: number;
+    /**
+     * Fit the graph to its container by resizing cells and reducing visible
+     * weeks when the configured range cannot stay legible.
+     * @default true
+     */
+    responsive?: boolean;
+    /** Smallest responsive cell side length in pixels. @default 8 */
+    minCellSize?: number;
+    /** Largest responsive cell side length in pixels. @default 24 */
+    maxCellSize?: number;
     /** 0 = Sunday · 1 = Monday (GNOME locale default). @default 1 */
     weekStartDay?: 0 | 1;
     /** @default true */
@@ -38,4 +43,4 @@ export interface ContributionGraphProps {
     tooltipContent?: (day: ContributionDay) => string;
     className?: string;
 }
-export declare function ContributionGraph({ data, maxLevel, colorScale, cellSize, cellGap, weekStartDay, showMonthLabels, showDayLabels, showLegend, weeks, ariaLabel, onDayClick, tooltipContent, className, }: ContributionGraphProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContributionGraph({ data, maxLevel, cellSize, cellGap, responsive, minCellSize, maxCellSize, weekStartDay, showMonthLabels, showDayLabels, showLegend, weeks, ariaLabel, onDayClick, tooltipContent, className, }: ContributionGraphProps): import("react/jsx-runtime").JSX.Element;