@daryasidorovich/modsen-datepicker 1.0.0

package/dist/services/calendarService.d.ts

@@ -0,0 +1,19 @@
+import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
+import { MODES_TYPES } from '@/constants/modes';
+export declare class CalendarService {
+    monthDate: Date;
+    firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES | undefined;
+    selectedDate?: Date | undefined;
+    mode: MODES_TYPES;
+    rangeStart?: Date | undefined;
+    rangeEnd?: Date | undefined;
+    private hideWeekends;
+    constructor(monthDate?: Date, firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES | undefined, selectedDate?: Date | undefined, mode?: MODES_TYPES, rangeStart?: Date | undefined, rangeEnd?: Date | undefined);
+    setHideWeekends(value: boolean): this;
+    getDays(): Date[];
+    private applyFilters;
+    getWeeks(): Date[][];
+    getIsCurrentMonth: (date: Date) => boolean;
+    getIsDisabled: (_date: Date) => boolean;
+    getIsHoliday: (_date: Date) => boolean;
+}

package/dist/services/decorators/withHolidays.d.ts

@@ -0,0 +1,2 @@
+import { CalendarService } from '../calendarService';
+export declare const withHolidays: (calendar: CalendarService, holidays: Date[]) => CalendarService;

package/dist/services/decorators/withHolidays.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/services/decorators/withMinMax.d.ts

@@ -0,0 +1,2 @@
+import { CalendarService } from '../calendarService';
+export declare function withMinMax(calendar: CalendarService, minDate?: Date, maxDate?: Date): CalendarService;

package/dist/services/decorators/withMinMax.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/services/holidayService.d.ts

@@ -0,0 +1,5 @@
+export interface Holiday {
+    name: string;
+    date: string;
+}
+export declare const getHolidays: (year?: number, signal?: AbortSignal) => Promise<Date[]>;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/store/localStorage.d.ts

@@ -0,0 +1,3 @@
+import { Task } from './types';
+export declare const loadTasksFromStorage: () => Task[];
+export declare const saveTasksToStorage: (tasks: Task[]) => void;

package/dist/store/tasksStore.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { TasksContextValue } from './types';
+interface TasksProviderProps {
+    children: ReactNode;
+}
+export declare const TasksProvider: ({ children }: TasksProviderProps) => import("react").JSX.Element;
+export declare const useTasks: () => TasksContextValue;
+export {};

package/dist/store/tasksStore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/store/types.d.ts

@@ -0,0 +1,18 @@
+export interface Task {
+    id: string;
+    date: Date;
+    title: string;
+    completed: boolean;
+}
+export interface TasksContextValue {
+    tasks: Task[];
+    loading: boolean;
+    error: string;
+    getTasksByDate: (date: Date) => Task[];
+    hasTasks: (date: Date) => boolean;
+    addTask: (date: Date, title: string) => Task;
+    editTask: (id: string, updates: Partial<Omit<Task, 'id'>>) => Task | undefined;
+    deleteTask: (id: string) => boolean;
+    toggleTask: (id: string) => Task | undefined;
+    loadTasks: () => void;
+}

package/dist/utils/calendar.d.ts

@@ -0,0 +1,7 @@
+export declare const getFirstDayOfMonth: (date: Date) => Date;
+export declare const getLastDayOfMonth: (date: Date) => Date;
+export declare const getDaysInMonth: (date: Date) => number;
+export declare const getWeekDayIndex: (date: Date, firstDayOfWeek?: 0 | 1) => number;
+export declare const getMonthDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];
+export declare const getWeeksFromDays: (days: Date[], weekLength?: 5 | 7) => Date[][];
+export declare const getWeekDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];

package/dist/utils/calendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/controlDate.d.ts

@@ -0,0 +1 @@
+export declare const setControlDate: (date: Date | undefined) => Date | undefined;

package/dist/utils/dateChecks.d.ts

@@ -0,0 +1,10 @@
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+export declare const isCurrentMonth: (date: Date, monthDate: Date) => boolean;
+export declare const isWeekend: (date: Date) => boolean;
+export declare const isToday: (date: Date) => boolean;
+export declare const isSelected: (date: Date, selectedDate?: Date) => boolean;
+export declare const isDisabled: (date: Date, minDate?: Date | null, maxDate?: Date | null) => boolean;
+export declare const isInRange: (date: Date, start?: Date, end?: Date) => boolean;
+export declare const isRangeStart: (date: Date, start?: Date) => boolean;
+export declare const isRangeEnd: (date: Date, end?: Date) => boolean;
+export declare const getRangeError: (date: Date, startDate: Date) => string;

package/dist/utils/dateChecks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/formatDate.d.ts

@@ -0,0 +1,3 @@
+export declare const formatDate: (date: Date) => string;
+export declare const formatDateForInput: (date: Date) => string;
+export declare const parseDate: (value: string) => Date | null;

package/dist/utils/formatDate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/schema.d.ts

@@ -0,0 +1,6 @@
+import * as z from 'zod';
+export declare const formSchema: z.ZodObject<{
+    title: z.ZodString;
+    date: z.ZodString;
+}, z.core.$strip>;
+export type FormData = z.infer<typeof formSchema>;

package/dist/utils/schema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/weekdayOrder.d.ts

@@ -0,0 +1 @@
+export declare const getOrderedDays: (firstDayOfWeek: 0 | 1) => Array<number>;

package/dist/utils/weekdayOrder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/eslint.config.ts

@@ -0,0 +1,80 @@
+import js from '@eslint/js';
+import pluginImport from 'eslint-plugin-import';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import storybook from 'eslint-plugin-storybook';
+import tseslint from 'typescript-eslint';
+
+export default [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    plugins: {
+      react: react,
+      'react-hooks': reactHooks,
+      'simple-import-sort': simpleImportSort,
+      import: pluginImport,
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      'react/destructuring-assignment': ['error', 'always'],
+      'prefer-destructuring': [
+        'error',
+        {
+          VariableDeclarator: { array: false, object: true },
+          AssignmentExpression: { array: false, object: false },
+        },
+      ],
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      'import/resolver': {
+        alias: {
+          map: [
+            ['@', './src'],
+            ['@components', './src/components'],
+            ['@utils', './src/utils'],
+            ['@styles', './src/styles'],
+            ['@assets', './src/assets'],
+          ],
+          extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        },
+      },
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+
+      globals: {
+        process: 'readonly',
+      },
+    },
+  },
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      '**/*.test.tsx',
+      '**/*.stories.tsx',
+    ],
+  },
+  ...storybook.configs['flat/recommended'],
+];

package/jest.config.json

@@ -0,0 +1,21 @@
+{
+  "clearMocks": true,
+  "logHeapUsage": true,
+  "passWithNoTests": true,
+  "testEnvironment": "jsdom",
+  "transform": {
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest"
+  },
+  "transformIgnorePatterns": ["node_modules/(?!(react|react-dom)/)"],
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
+  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.ts"],
+  "moduleNameMapper": {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@components/(.*)$": "<rootDir>/src/components/$1",
+    "^@utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^@store/(.*)$": "<rootDir>/src/store/$1",
+    "^@styles/(.*)$": "<rootDir>/src/styles/$1",
+    "^@assets/(.*)$": "<rootDir>/src/assets/$1",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  }
+}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@daryasidorovich/modsen-datepicker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "types.d.ts",
+  "style": "index.css",
+  "scripts": {
+    "clean": "rimraf dist lib",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "pack": "npm run build && npm pack",
+    "dev": "rollup -c -w",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint src/ --ext .ts,.tsx",
+    "lint:fix": "eslint src/ --ext .ts,.tsx --fix",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "chromatic": "npx chromatic --project-token=chpt_0fa93e1434c19df",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/**/*.{scss,css}": [
+      "prettier --write"
+    ],
+    "*.{js,cjs}": [
+      "prettier --write"
+    ]
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "devDependencies": {
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
+    "@chromatic-com/storybook": "latest",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@eslint/js": "^9.7.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitest/browser-playwright": "latest",
+    "@vitest/coverage-v8": "latest",
+    "chromatic": "^18.5.0",
+    "classnames": "^2.5.1",
+    "eslint": "^9.7.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "eslint-plugin-storybook": "^10.5.10",
+    "globals": "^17.11.0",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "jiti": "^2.7.0",
+    "lint-staged": "^16.4.0",
+    "playwright": "latest",
+    "postcss": "^8.5.26",
+    "prettier": "3.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "rimraf": "^6.1.3",
+    "rollup": "^2.80.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-styles": "^4.0.0",
+    "sass": "^1.103.1",
+    "storybook": "^10.5.10",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.0.0",
+    "vite-plugin-svgr": "^5.2.0",
+    "vitest": "latest"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.9.1",
+    "react-hook-form": "^7.87.0",
+    "react-imask": "^7.6.1",
+    "tslib": "^2.8.1",
+    "zod": "^4.5.4"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,65 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import svgr from '@svgr/rollup';
+import { readFileSync } from 'fs';
+import styles from 'rollup-plugin-styles';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const external = Object.keys(pkg.peerDependencies || {});
+
+const baseOutput = {
+  dir: 'dist',
+  sourcemap: true,
+  exports: 'named',
+};
+
+const plugins = [
+  resolve({
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
+  }),
+  commonjs(),
+  styles({
+    mode: 'inject',
+    sass: {
+      data: `
+          @import "src/styles/variables.scss";
+          @import "src/styles/mixins.scss";
+          @import "src/styles/border.scss";
+          @import "src/styles/theme-mixins.scss";
+          @import "src/styles/colors.scss";
+          @import "src/styles/typography.scss";
+          @import "src/styles/gap.scss";
+        `,
+    },
+  }),
+  svgr({
+    include: ['**/*.svg', '**/*.svg?react'],
+  }),
+  typescript({
+    declaration: true,
+    declarationDir: 'dist',
+    outDir: 'dist',
+    rootDir: 'src',
+  }),
+];
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        ...baseOutput,
+        format: 'esm',
+      },
+      {
+        ...baseOutput,
+        format: 'cjs',
+        entryFileNames: '[name].cjs',
+      },
+    ],
+    external,
+    plugins,
+  },
+];

package/src/assets/actions/Delete.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5833 0.583313L0.583313 12.5833" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.583313 0.583313L12.5833 12.5833" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/actions/Edit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.174 6.81201C21.7027 6.28344 21.9998 5.56648 21.9999 4.81887C22 4.07125 21.7031 3.35422 21.1745 2.82551C20.6459 2.29681 19.929 1.99973 19.1813 1.99963C18.4337 1.99954 17.7167 2.29644 17.188 2.82501L3.842 16.174C3.60981 16.4055 3.43811 16.6905 3.342 17.004L2.021 21.356C1.99515 21.4425 1.9932 21.5344 2.01535 21.6219C2.03749 21.7094 2.08292 21.7892 2.14679 21.853C2.21067 21.9168 2.29062 21.9621 2.37815 21.9841C2.46569 22.0061 2.55755 22.004 2.644 21.978L6.997 20.658C7.31016 20.5628 7.59517 20.3921 7.827 20.161L21.174 6.81201Z" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/arrows/Next.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.27337 4L3.33337 4.94L6.38671 8L3.33337 11.06L4.27337 12L8.27337 8L4.27337 4Z" fill="currentColor"/>
+<path d="M8.66668 4L7.72668 4.94L10.78 8L7.72668 11.06L8.66668 12L12.6667 8L8.66668 4Z" fill="currentColor"/>
+</svg>

package/src/assets/arrows/Prev.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7266 12L12.6666 11.06L9.61329 8L12.6666 4.94L11.7266 4L7.72663 8L11.7266 12Z" fill="currentColor"/>
+<path d="M7.33332 12L8.27332 11.06L5.21998 8L8.27331 4.94L7.33331 4L3.33332 8L7.33332 12Z" fill="currentColor"/>
+</svg>

package/src/assets/input/Calendar.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.2 9.6C7.97333 9.6 7.78347 9.5232 7.6304 9.3696C7.4768 9.21653 7.4 9.02667 7.4 8.8C7.4 8.57333 7.4768 8.3832 7.6304 8.2296C7.78347 8.07653 7.97333 8 8.2 8C8.42667 8 8.6168 8.07653 8.7704 8.2296C8.92347 8.3832 9 8.57333 9 8.8C9 9.02667 8.92347 9.21653 8.7704 9.3696C8.6168 9.5232 8.42667 9.6 8.2 9.6ZM5 9.6C4.77333 9.6 4.5832 9.5232 4.4296 9.3696C4.27653 9.21653 4.2 9.02667 4.2 8.8C4.2 8.57333 4.27653 8.3832 4.4296 8.2296C4.5832 8.07653 4.77333 8 5 8C5.22667 8 5.4168 8.07653 5.5704 8.2296C5.72347 8.3832 5.8 8.57333 5.8 8.8C5.8 9.02667 5.72347 9.21653 5.5704 9.3696C5.4168 9.5232 5.22667 9.6 5 9.6ZM11.4 9.6C11.1733 9.6 10.9835 9.5232 10.8304 9.3696C10.6768 9.21653 10.6 9.02667 10.6 8.8C10.6 8.57333 10.6768 8.3832 10.8304 8.2296C10.9835 8.07653 11.1733 8 11.4 8C11.6267 8 11.8165 8.07653 11.9696 8.2296C12.1232 8.3832 12.2 8.57333 12.2 8.8C12.2 9.02667 12.1232 9.21653 11.9696 9.3696C11.8165 9.5232 11.6267 9.6 11.4 9.6ZM8.2 12.8C7.97333 12.8 7.78347 12.7232 7.6304 12.5696C7.4768 12.4165 7.4 12.2267 7.4 12C7.4 11.7733 7.4768 11.5835 7.6304 11.4304C7.78347 11.2768 7.97333 11.2 8.2 11.2C8.42667 11.2 8.6168 11.2768 8.7704 11.4304C8.92347 11.5835 9 11.7733 9 12C9 12.2267 8.92347 12.4165 8.7704 12.5696C8.6168 12.7232 8.42667 12.8 8.2 12.8ZM5 12.8C4.77333 12.8 4.5832 12.7232 4.4296 12.5696C4.27653 12.4165 4.2 12.2267 4.2 12C4.2 11.7733 4.27653 11.5835 4.4296 11.4304C4.5832 11.2768 4.77333 11.2 5 11.2C5.22667 11.2 5.4168 11.2768 5.5704 11.4304C5.72347 11.5835 5.8 11.7733 5.8 12C5.8 12.2267 5.72347 12.4165 5.5704 12.5696C5.4168 12.7232 5.22667 12.8 5 12.8ZM11.4 12.8C11.1733 12.8 10.9835 12.7232 10.8304 12.5696C10.6768 12.4165 10.6 12.2267 10.6 12C10.6 11.7733 10.6768 11.5835 10.8304 11.4304C10.9835 11.2768 11.1733 11.2 11.4 11.2C11.6267 11.2 11.8165 11.2768 11.9696 11.4304C12.1232 11.5835 12.2 11.7733 12.2 12C12.2 12.2267 12.1232 12.4165 11.9696 12.5696C11.8165 12.7232 11.6267 12.8 11.4 12.8ZM2.6 16C2.16 16 1.7832 15.8435 1.4696 15.5304C1.15653 15.2168 1 14.84 1 14.4V3.2C1 2.76 1.15653 2.38347 1.4696 2.0704C1.7832 1.7568 2.16 1.6 2.6 1.6H3.4V0H5V1.6H11.4V0H13V1.6H13.8C14.24 1.6 14.6168 1.7568 14.9304 2.0704C15.2435 2.38347 15.4 2.76 15.4 3.2V14.4C15.4 14.84 15.2435 15.2168 14.9304 15.5304C14.6168 15.8435 14.24 16 13.8 16H2.6ZM2.6 14.4H13.8V6.4H2.6V14.4Z" fill="currentColor"/>
+</svg>

package/src/assets/input/Clear.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9872 3.04239C10.2573 0.319202 5.77739 0.319202 3.04745 3.04239C0.317516 5.76559 0.317516 10.2344 3.04745 12.9576C5.77739 15.6808 10.1873 15.6808 12.9172 12.9576C15.6471 10.2344 15.7171 5.76559 12.9872 3.04239ZM9.97728 10.9327L8.01733 8.97756L6.05738 10.9327L5.0774 9.95511L7.03735 8L5.0774 6.04489L6.05738 5.06733L8.01733 7.02244L9.97728 5.06733L10.9573 6.04489L8.99731 8L10.9573 9.95511L9.97728 10.9327Z" fill="currentColor"/>
+</svg>

package/src/components/BaseCalendar/BaseCalendar.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BaseCalendar } from './index';
+
+const meta: Meta<typeof BaseCalendar> = {
+  component: BaseCalendar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseCalendar>;
+
+export const Default: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const WithTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: true,
+  },
+};
+
+export const HideWeekends: Story = {
+  args: {
+    monthDate: new Date(2026, 8, 7),
+    firstDayOfWeek: 1,
+    hideWeekends: true,
+  },
+};
+
+export const ShowHolidays: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WeekMode: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 31),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+    mode: 'week',
+  },
+};
+
+export const HideWeekendsFirstDaySundayWeekMode: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    mode: 'week',
+    firstDayOfWeek: 0,
+    hideWeekends: true,
+  },
+};
+
+export const HideWeekendsFirstDaySundayMonthMode: Story = {
+  args: {
+    monthDate: new Date(2025, 2, 31),
+    firstDayOfWeek: 0,
+    hideWeekends: true,
+  },
+};

package/src/components/BaseCalendar/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import { MODES } from '@/constants/modes';
+
+import { CalendarGrid } from '../CalendarGrid';
+import { BaseCalendarProps } from '../CalendarGrid/types';
+import { Month } from '../Month';
+import { WeekDay } from '../WeekDay';
+import styles from './styles.module.scss';
+
+export const BaseCalendar = ({
+  mode = MODES.MONTH,
+  monthDate,
+  firstDayOfWeek = 1,
+  hideWeekends = false,
+  ...props
+}: BaseCalendarProps) => {
+  const [baseDate, setBaseDate] = useState(monthDate);
+
+  useEffect(() => {
+    setBaseDate(monthDate);
+  }, [monthDate]);
+
+  const onPrev = () => {
+    const newDate = new Date(baseDate);
+
+    if (mode === MODES.MONTH) {
+      newDate.setDate(1);
+      newDate.setMonth(baseDate.getMonth() - 1);
+    } else {
+      newDate.setDate(baseDate.getDate() - 7);
+    }
+
+    setBaseDate(newDate);
+  };
+
+  const onNext = () => {
+    const newDate = new Date(baseDate);
+
+    if (mode === MODES.MONTH) {
+      newDate.setDate(1);
+      newDate.setMonth(baseDate.getMonth() + 1);
+    } else {
+      newDate.setDate(baseDate.getDate() + 7);
+    }
+
+    setBaseDate(newDate);
+  };
+
+  return (
+    <div className={styles.calendarGrid}>
+      <Month date={baseDate} onPrev={onPrev} onNext={onNext} />
+      <WeekDay firstDayOfWeek={firstDayOfWeek} hideWeekends={hideWeekends} />
+      <CalendarGrid
+        mode={mode}
+        monthDate={baseDate}
+        firstDayOfWeek={firstDayOfWeek}
+        hideWeekends={hideWeekends}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/BaseCalendar/styles.module.scss

@@ -0,0 +1,15 @@
+.calendarGrid {
+  @include border;
+
+  @include themify-modules($themes) {
+    border-color: themed('border');
+    background-color: themed('background');
+  }
+
+  padding: $gap-10;
+  border-radius: $radius-8;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}