@utrecht/calendar-react 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,491 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, formatISO, isBefore, startOfDay, isAfter, startOfMonth, addWeeks } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import chunk from 'lodash.chunk';
+import { forwardRef, useState } from 'react';
+import clsx, { clsx as clsx$1 } from 'clsx';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const CalendarNavigation = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("div", Object.assign({
+    className: "utrecht-calendar__navigation"
+  }, props, {
+    children: children
+  }));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const Button = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+      appearance,
+      busy,
+      disabled,
+      children,
+      className,
+      hint,
+      pressed,
+      type
+    } = _a,
+    restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
+  return jsx("button", Object.assign({
+    ref: ref,
+    className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),
+    "aria-busy": busy || undefined,
+    "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
+    disabled: disabled,
+    type: type || 'button'
+  }, restProps, {
+    children: children
+  }));
+});
+Button.displayName = 'Button';
+
+const CalendarButton = _a => {
+  var {
+      children,
+      className
+    } = _a,
+    props = __rest$1(_a, ["children", "className"]);
+  return jsx(Button, Object.assign({
+    appearance: "subtle-button"
+  }, props, {
+    className: clsx$1('utrecht-calendar__button', className)
+  }, {
+    children: children
+  }));
+};
+
+const CalendarIcon = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("div", Object.assign({
+    className: clsx$1('utrecht-calendar__icon')
+  }, props, {
+    children: children
+  }));
+};
+
+const CalendarNavigationButtons = _a => {
+  var {
+      onPreviousClick,
+      onNextClick,
+      previousIcon,
+      nextIcon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
+  return jsxs("div", Object.assign({
+    className: "utrecht-calendar__navigation-buttons"
+  }, {
+    children: [jsx(CalendarButton, Object.assign({
+      onClick: onPreviousClick
+    }, props, {
+      children: jsx(CalendarIcon, {
+        children: previousIcon
+      })
+    })), children, jsx(CalendarButton, Object.assign({
+      onClick: onNextClick
+    }, props, {
+      children: jsx(CalendarIcon, {
+        children: nextIcon
+      })
+    }))]
+  }));
+};
+
+const CalendarNavigationLabel = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("time", Object.assign({
+    className: "utrecht-calendar__navigation-label"
+  }, props, {
+    children: children
+  }));
+};
+
+const CalendarTableDaysContainer = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("tbody", Object.assign({}, props, {
+    className: "utrecht-calendar__table-days-container"
+  }, {
+    children: children
+  }));
+};
+
+const CalendarTableDaysItem = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("tr", Object.assign({}, props, {
+    children: children
+  }));
+};
+
+const CalendarTableDaysItemDay = _a => {
+  var {
+      day,
+      dayOutOfTheMonth,
+      isToday,
+      emphasis,
+      selected,
+      disabled
+    } = _a,
+    props = __rest$1(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
+  return jsx("td", {
+    children: jsx(CalendarButton, Object.assign({
+      className: clsx('utrecht-calendar__table-days-item-day', {
+        'utrecht-calendar__table-days-item-day--out-of-the-month': dayOutOfTheMonth
+      }, {
+        'utrecht-calendar__table-days-item-day--is-today': isToday
+      }, {
+        'utrecht-calendar__table-days-item-day--emphasis': emphasis
+      }, {
+        'utrecht-calendar__table-days-item-day--selected': selected
+      }),
+      disabled: disabled
+    }, props, {
+      children: day
+    }))
+  });
+};
+
+const CalendarTableWeeksContainer = ({
+  children
+}) => jsx("thead", Object.assign({
+  className: "utrecht-calendar__table-weeks-container"
+}, {
+  children: jsx("tr", Object.assign({
+    className: "utrecht-calendar__table-weeks-container-content"
+  }, {
+    children: children
+  }))
+}));
+
+const CalendarTableWeeksItem = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx("th", Object.assign({}, props, {
+    className: "utrecht-calendar__table-weeks-item"
+  }, {
+    children: children
+  }));
+};
+
+const IconArrowLeft = _a => {
+  var {
+      title,
+      titleId
+    } = _a,
+    props = __rest$1(_a, ["title", "titleId"]);
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+const IconArrowLeftDouble = _a => {
+  var {
+      title,
+      titleId
+    } = _a,
+    props = __rest$1(_a, ["title", "titleId"]);
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6 6 6Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6 6 6Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+const IconArrowRight = _a => {
+  var {
+      title,
+      titleId
+    } = _a,
+    props = __rest$1(_a, ["title", "titleId"]);
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+const IconArrowRightDouble = _a => {
+  var {
+      title,
+      titleId
+    } = _a,
+    props = __rest$1(_a, ["title", "titleId"]);
+  return jsxs("svg", Object.assign({
+    fill: "none",
+    width: "100%",
+    height: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6-6-6Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6-6-6Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+function createCalendar(today) {
+  const start = startOfWeek(startOfMonth(today), {
+    weekStartsOn: 1 /* Monday */
+  });
+  const end = endOfWeek(addWeeks(start, 5), {
+    weekStartsOn: 1 /* Monday */
+  });
+  return eachDayOfInterval({
+    start,
+    end
+  });
+}
+/**
+ * Calendar Component
+ * powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
+ * */
+const Calendar = ({
+  onCalendarClick,
+  events,
+  currentDate,
+  locale = enUS,
+  previousYearButtonTitle = 'Previous year',
+  nextYearButtonTitle = 'Next year',
+  previousMonthButtonTitle = 'Previous month',
+  nextMonthButtonTitle = 'Next month',
+  minDate,
+  maxDate
+}) => {
+  const [visibleMonth, setVisibleMonth] = useState(currentDate || new Date());
+  const [selectedDate, setSelectedDate] = useState(currentDate);
+  const calendar = createCalendar(visibleMonth);
+  const start = startOfWeek(visibleMonth, {
+    weekStartsOn: 1
+  });
+  const end = endOfWeek(visibleMonth, {
+    weekStartsOn: 1
+  });
+  const currentWeek = eachDayOfInterval({
+    start,
+    end
+  }).map(day => day);
+  const chunksWeeks = chunk(calendar, calendar.length / 6);
+  const weeks = chunksWeeks.map(week => week.map(date => {
+    const currentEvent = events && events.length > 0 && events.find(e => isSameDay(endOfDay(parseISO(e.date)), date));
+    if (currentEvent) {
+      return {
+        date,
+        emphasis: currentEvent.emphasis,
+        selected: currentEvent.selected,
+        disabled: currentEvent.disabled
+      };
+    } else {
+      return {
+        date,
+        emphasis: false,
+        selected: false,
+        disabled: false
+      };
+    }
+  }));
+  return jsxs("div", Object.assign({
+    className: "utrecht-calendar"
+  }, {
+    children: [jsx(CalendarNavigation, {
+      children: jsx(CalendarNavigationButtons, Object.assign({
+        previousIcon: jsx(IconArrowLeftDouble, {
+          title: previousYearButtonTitle
+        }),
+        nextIcon: jsx(IconArrowRightDouble, {
+          title: nextYearButtonTitle
+        }),
+        onPreviousClick: () => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1)),
+        onNextClick: () => setVisibleMonth(addYears(visibleMonth, 1))
+      }, {
+        children: jsx(CalendarNavigationButtons, Object.assign({
+          previousIcon: jsx(IconArrowLeft, {
+            title: previousMonthButtonTitle
+          }),
+          nextIcon: jsx(IconArrowRight, {
+            title: nextMonthButtonTitle
+          }),
+          onPreviousClick: () => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1)),
+          onNextClick: () => setVisibleMonth(addMonths(visibleMonth, 1))
+        }, {
+          children: jsx(CalendarNavigationLabel, Object.assign({
+            dateTime: format(visibleMonth, 'yyyy-mm')
+          }, {
+            children: format(visibleMonth, 'LLLL Y', {
+              locale
+            })
+          }))
+        }))
+      }))
+    }), jsxs("table", Object.assign({
+      className: "utrecht-calendar__table",
+      role: "grid"
+    }, {
+      children: [jsx(CalendarTableWeeksContainer, {
+        children: currentWeek && currentWeek.length > 0 && currentWeek.map((day, index) => jsx(CalendarTableWeeksItem, Object.assign({
+          scope: "col",
+          abbr: format(day, 'EEEE', {
+            locale
+          })
+        }, {
+          children: format(day, 'EEEEEE', {
+            locale
+          })
+        }), index))
+      }), jsx(CalendarTableDaysContainer, {
+        children: weeks && weeks.length > 0 && weeks.map((week, index) => jsx(CalendarTableDaysItem, {
+          children: week.map((day, index) => {
+            return jsx(CalendarTableDaysItemDay, {
+              isToday: isSameDay(day.date, Date.now()),
+              dayOutOfTheMonth: !isSameMonth(day.date, visibleMonth),
+              onClick: () => {
+                setVisibleMonth(day.date);
+                setSelectedDate(day.date);
+                onCalendarClick(formatISO(day.date));
+              },
+              "aria-label": format(day.date, 'eeee dd LLLL Y', {
+                locale
+              }),
+              day: day.date.getDate().toString(),
+              emphasis: day.emphasis,
+              selected: day.selected || selectedDate && isSameDay(day.date, selectedDate),
+              disabled: day.disabled || minDate && isBefore(day.date, startOfDay(minDate)) || maxDate && isAfter(day.date, endOfDay(maxDate))
+            }, index);
+          })
+        }, index))
+      })]
+    }))]
+  }));
+};
+
+export { Calendar };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../button-react/dist/index.esm.js"],"sourcesContent":["import { jsx } from 'react/jsx-runtime';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\n/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol */\r\n\r\n\r\nfunction __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\ntypeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\n\nconst Button = /*#__PURE__*/forwardRef((_a, ref) => {\n  var {\n      appearance,\n      busy,\n      disabled,\n      children,\n      className,\n      hint,\n      pressed,\n      type\n    } = _a,\n    restProps = __rest(_a, [\"appearance\", \"busy\", \"disabled\", \"children\", \"className\", \"hint\", \"pressed\", \"type\"]);\n  return jsx(\"button\", Object.assign({\n    ref: ref,\n    className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),\n    \"aria-busy\": busy || undefined,\n    \"aria-pressed\": typeof pressed === 'boolean' ? pressed : undefined,\n    disabled: disabled,\n    type: type || 'button'\n  }, restProps, {\n    children: children\n  }));\n});\nButton.displayName = 'Button';\nconst PrimaryActionButton = _a => {\n  var args = __rest(_a, []);\n  return jsx(Button, Object.assign({}, args, {\n    appearance: \"primary-action-button\"\n  }));\n};\nPrimaryActionButton.displayName = 'PrimaryActionButton';\nconst SecondaryActionButton = _a => {\n  var args = __rest(_a, []);\n  return jsx(Button, Object.assign({}, args, {\n    appearance: \"secondary-action-button\"\n  }));\n};\nSecondaryActionButton.displayName = 'SecondaryActionButton';\nconst SubtleButton = _a => {\n  var args = __rest(_a, []);\n  return jsx(Button, Object.assign({}, args, {\n    appearance: \"subtle-button\"\n  }));\n};\nSubtleButton.displayName = 'SubtleButton';\n\nexport { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton };\n//# sourceMappingURL=index.esm.js.map\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "version": "1.0.0",
+  "author": "Community for NL Design System",
+  "description": "Calendar component for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/calendar-react",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "date-fns": "2.30.0",
+    "jest": "29.7.0",
+    "rollup": "4.18.0",
+    "@utrecht/button-react": "1.0.0",
+    "@utrecht/calendar-css": "1.2.0"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "packages/component-library-react/packages/calendar-react"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.23.6",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rimraf dist",
+    "test": "mkdir -p pages && jest --coverage --verbose"
+  }
+}

package/src/CalendarButton.tsx

@@ -0,0 +1,11 @@
+import { Button, ButtonProps } from '@utrecht/button-react';
+import { clsx } from 'clsx';
+import { PropsWithChildren } from 'react';
+
+export interface CalendarButtonProps extends ButtonProps {}
+
+export const CalendarButton = ({ children, className, ...props }: PropsWithChildren<CalendarButtonProps>) => (
+  <Button appearance="subtle-button" {...props} className={clsx('utrecht-calendar__button', className)}>
+    {children}
+  </Button>
+);

package/src/CalendarIcon.tsx

@@ -0,0 +1,10 @@
+import { clsx } from 'clsx';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface CalendarIconProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+export const CalendarIcon = ({ children, ...props }: PropsWithChildren<CalendarIconProps>) => (
+  <div className={clsx('utrecht-calendar__icon')} {...props}>
+    {children}
+  </div>
+);

package/src/CalendarNavigation.tsx

@@ -0,0 +1,9 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface CalendarNavigationProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+export const CalendarNavigation = ({ children, ...props }: PropsWithChildren<CalendarNavigationProps>) => (
+  <div className="utrecht-calendar__navigation" {...props}>
+    {children}
+  </div>
+);

package/src/CalendarNavigationButtons.tsx

@@ -0,0 +1,30 @@
+import { MouseEventHandler, PropsWithChildren } from 'react';
+import { CalendarButton, CalendarButtonProps } from './CalendarButton';
+import { CalendarIcon } from './CalendarIcon';
+interface CalendarNavigationButtonsProps extends CalendarButtonProps {
+  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
+  onNextClick?: MouseEventHandler<HTMLButtonElement>;
+  previousIcon?: any;
+  nextIcon?: any;
+  previousTitle?: string;
+  nextTitle?: string;
+}
+
+export const CalendarNavigationButtons = ({
+  onPreviousClick,
+  onNextClick,
+  previousIcon,
+  nextIcon,
+  children,
+  ...props
+}: PropsWithChildren<CalendarNavigationButtonsProps>) => (
+  <div className="utrecht-calendar__navigation-buttons">
+    <CalendarButton onClick={onPreviousClick} {...props}>
+      <CalendarIcon>{previousIcon}</CalendarIcon>
+    </CalendarButton>
+    {children}
+    <CalendarButton onClick={onNextClick} {...props}>
+      <CalendarIcon>{nextIcon}</CalendarIcon>
+    </CalendarButton>
+  </div>
+);

package/src/CalendarNavigationLabel.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren, TimeHTMLAttributes } from 'react';
+
+type CalendarNavigationLabelProps = TimeHTMLAttributes<HTMLTimeElement>;
+
+export const CalendarNavigationLabel = ({ children, ...props }: PropsWithChildren<CalendarNavigationLabelProps>) => (
+  <time className="utrecht-calendar__navigation-label" {...props}>
+    {children}
+  </time>
+);

package/src/CalendarTableDaysContainer.tsx

@@ -0,0 +1,13 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface CalendarTableDaysContainerProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement> {}
+
+export const CalendarTableDaysContainer = ({
+  children,
+  ...props
+}: PropsWithChildren<CalendarTableDaysContainerProps>) => (
+  <tbody {...props} className="utrecht-calendar__table-days-container">
+    {children}
+  </tbody>
+);

package/src/CalendarTableDaysItem.tsx

@@ -0,0 +1,8 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface CalendarTableDaysItemProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {}
+
+export const CalendarTableDaysItem = ({ children, ...props }: PropsWithChildren<CalendarTableDaysItemProps>) => (
+  <tr {...props}>{children}</tr>
+);

package/src/CalendarTableDaysItemDay.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+import { CalendarButton, CalendarButtonProps } from './CalendarButton';
+export interface CalendarTableDaysItemDayProps extends CalendarButtonProps {
+  day: string;
+  dayOutOfTheMonth?: boolean;
+  isToday: boolean;
+  emphasis?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+}
+
+export const CalendarTableDaysItemDay = ({
+  day,
+  dayOutOfTheMonth,
+  isToday,
+  emphasis,
+  selected,
+  disabled,
+  ...props
+}: PropsWithChildren<CalendarTableDaysItemDayProps>) => (
+  <td>
+    <CalendarButton
+      className={clsx(
+        'utrecht-calendar__table-days-item-day',
+        { 'utrecht-calendar__table-days-item-day--out-of-the-month': dayOutOfTheMonth },
+        { 'utrecht-calendar__table-days-item-day--is-today': isToday },
+        { 'utrecht-calendar__table-days-item-day--emphasis': emphasis },
+        { 'utrecht-calendar__table-days-item-day--selected': selected },
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {day}
+    </CalendarButton>
+  </td>
+);