### Install @macolmenerori/component-library

Source: https://context7.com/macolmenerori/component-library/llms.txt

Instructions for installing the component library using npm, pnpm, or yarn. This is the first step to using any of the provided components.

```bash
npm install @macolmenerori/component-library
# or
pnpm add @macolmenerori/component-library
# or
yarn add @macolmenerori/component-library
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Installs all project dependencies using the pnpm package manager. This is a prerequisite for setting up the development environment.

```bash
pnpm install
```

--------------------------------

### Install ThemeSwitch Component

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/ThemeSwitch/README.md

Installs the component library, which includes the ThemeSwitch component, using npm. This is the first step before importing and using the component in your project.

```bash
npm install @macolmenerori/component-library
```

--------------------------------

### Install MonthlyCalendar Component

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Installs the MonthlyCalendar component from the @macolmenerori/component-library package using pnpm.

```bash
pnpm add @macolmenerori/component-library
```

--------------------------------

### Install @macolmenerori/component-library with npm, pnpm, or yarn

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Demonstrates how to install the component library using different package managers. This is the initial step to integrate the library into a React project.

```bash
npm install @macolmenerori/component-library
```

```bash
pnpm add @macolmenerori/component-library
```

```bash
yarn add @macolmenerori/component-library
```

--------------------------------

### Run Development Server with pnpm

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Starts the Vite development server on port 3000 for local development and testing of components.

```bash
pnpm dev
```

--------------------------------

### Install MarkdownRender Dependencies

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Installs the necessary packages for the MarkdownRender component, including react-markdown and remark-gfm. These are peer dependencies.

```bash
npm install @macolmenerori/component-library react-markdown remark-gfm
```

--------------------------------

### ThemeSwitch Component with Different Sizes

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/ThemeSwitch/README.md

Illustrates how to use the ThemeSwitch component with different size variants. This example shows the 'small' size option, demonstrating customization for various UI needs.

```tsx
import '@macolmenerori/component-library/theme-switch-css';
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';

<ThemeSwitch enableDarkMode={darkMode} setEnableDarkMode={setDarkMode} size="small" />;
```

--------------------------------

### ThemeSwitch Component Import Examples

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Demonstrates different ways to import the ThemeSwitch component. It highlights the necessity of importing CSS separately for SSG/SSR compatibility and recommends subpath imports for optimized dependency management.

```tsx
// Import CSS separately (required for styling, supports SSG/SSR)
import '@macolmenerori/component-library/theme-switch-css';

// Main entry (requires all peer dependencies)
import { ThemeSwitch } from '@macolmenerori/component-library';

// Subpath import (recommended - no react-markdown required)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';
```

--------------------------------

### Add New Component to Playground

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Example of how to add a new component to the development playground, including its structure and how to render it within a styled div.

```jsx
<div style={{ border: '1px solid #e0e0e0', borderRadius: '8px', padding: '1.5rem' }}>
  <h2 style={{ marginBottom: '1rem', fontSize: '1.2rem' }}>ComponentName</h2>
  <div
    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100px' }}
  >
    <YourComponent {...props} />
  </div>
</div>

```

--------------------------------

### TypeScript Code Block Example

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/sample_markdown.md

An example of a TypeScript code block demonstrating an interface and a function. This snippet is intended to be rendered within the Markdown component.

```typescript
interface User {
name: string;
email: string;
}

const greet = (user: User): string => {
return `Hello, ${user.name}!`;
};
```

--------------------------------

### Basic Usage of ThemeSwitch Component

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/ThemeSwitch/README.md

A fundamental example of using the ThemeSwitch component in a React application. It includes the necessary CSS import and demonstrates how to manage the theme state using React's useState hook.

```tsx
import React, { useState } from 'react';
import '@macolmenerori/component-library/theme-switch-css';
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return <ThemeSwitch enableDarkMode={darkMode} setEnableDarkMode={setDarkMode} size="medium" />; 
}
```

--------------------------------

### MonthlyCalendar Component Import Examples

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Shows how to import the MonthlyCalendar component. It emphasizes the use of subpath imports for better performance and reduced dependencies, and notes that no separate CSS import is required.

```tsx
// Main entry (requires all peer dependencies)
import { MonthlyCalendar } from '@macolmenerori/component-library';

// Subpath import (recommended - no react-markdown required)
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';
```

--------------------------------

### MarkdownRender with Rehype Plugins

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Shows how to integrate external rehype plugins for advanced HTML processing, such as syntax highlighting with 'rehype-highlight' and allowing raw HTML with 'rehype-raw'. These plugins must be installed separately.

```tsx
import rehypeHighlight from 'rehype-highlight';
import rehypeRaw from 'rehype-raw';

<MarkdownRender
  content={markdownContent}
  rehypePlugins={[rehypeHighlight, rehypeRaw]}
/>
```

--------------------------------

### ThemeSwitch Integration with Theme Provider

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/ThemeSwitch/README.md

Shows how to integrate the ThemeSwitch component with a custom theme provider context. This example assumes a 'ThemeContext' with 'darkMode' state and 'setDarkMode' function, allowing centralized theme management.

```tsx
import '@macolmenerori/component-library/theme-switch-css';
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';
import { useTheme } from './context/ThemeContext';

function ThemeToggle() {
  const { darkMode, setDarkMode } = useTheme();

  return <ThemeSwitch enableDarkMode={darkMode} setEnableDarkMode={setDarkMode} size="medium" />;
}
```

--------------------------------

### Navigable MonthlyCalendar Example

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Implements month and year navigation for the MonthlyCalendar component using React state.

```tsx
import { useState } from 'react';
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';

function NavigableCalendar() {
  const [year, setYear] = useState(2026);
  const [month, setMonth] = useState(2);

  const prev = () => {
    if (month === 1) { setMonth(12); setYear((y) => y - 1); }
    else setMonth((m) => m - 1);
  };
  const next = () => {
    if (month === 12) { setMonth(1); setYear((y) => y + 1); }
    else setMonth((m) => m + 1);
  };

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 12 }}>
        <button onClick={prev}>Previous</button>
        <span>{month}/{year}</span>
        <button onClick={next}>Next</button>
      </div>
      <MonthlyCalendar
        year={year}
        month={month}
        headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
      />
    </div>
  );
}

```

--------------------------------

### MarkdownRender with Custom Components

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Demonstrates how to override default markdown element rendering using the 'components' prop. This example customizes link and image rendering, with custom components taking precedence over other props.

```tsx
<MarkdownRender
  content={markdownContent}
  components={{
    a: ({ children, ...props }) => (
      <a {...props} target="_blank" rel="noreferrer noopener">
        {children} ↗
      </a>
    ),
    img: (props) => (
      <img
        {...props}
        style={{ maxWidth: '100%', height: 'auto', borderRadius: '8px' }}
        loading="lazy"
      />
    )
  }}
/>
```

--------------------------------

### Use MonthlyCalendar component in React

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Provides an example of how to use the MonthlyCalendar component in a React application. This component does not require separate CSS imports as it uses inline styles. It takes year, month, and optional headers as props.

```tsx
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';

function App() {
  return (
    <MonthlyCalendar
      year={2026}
      month={2}
      headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
    />
  );
}
```

--------------------------------

### MonthlyCalendar Component Usage in React

Source: https://context7.com/macolmenerori/component-library/llms.txt

Illustrates the usage of the MonthlyCalendar component in React. Examples include a basic calendar, a calendar with per-day annotations, and a calendar with custom inline styling. The component is zero-dependency and renders a semantic HTML table.

```tsx
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';

function App() {
  // Basic calendar
  return (
    <div style={{ maxWidth: '400px' }}>
      <MonthlyCalendar
        year={2026}
        month={2}
        headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
      />
    </div>
  );
}

// Calendar with annotations
function CalendarWithAnnotations() {
  const annotations = [
    <span key="1">🎉</span>,  // Day 1
    null,                      // Day 2 - no annotation
    null,                      // Day 3
    null,                      // Day 4
    null,                      // Day 5
    null,                      // Day 6
    null,                      // Day 7
    null,                      // Day 8
    null,                      // Day 9
    <span key="10">📅</span>, // Day 10
    null,                      // Day 11
    null,                      // Day 12
    null,                      // Day 13
    <span key="14">❤️</span>, // Day 14 (Valentine's Day)
    null,                      // Day 15-24
    null, null, null, null, null, null, null, null, null,
    <span key="25">⭐</span>, // Day 25
  ];

  return (
    <div style={{ background: '#1e1e30', padding: '12px', borderRadius: '8px' }}>
      <MonthlyCalendar
        year={2026}
        month={2}
        headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
        darkMode={true}
        annotations={annotations}
      />
    </div>
  );
}

// Calendar with custom styling
function StyledCalendar() {
  return (
    <MonthlyCalendar
      year={2026}
      month={6}
      headers={['S', 'M', 'T', 'W', 'T', 'F', 'S']}
      style={{
        fontSize: '14px',
        maxWidth: '300px',
        border: '1px solid #ccc',
        borderRadius: '8px',
        padding: '8px'
      }}
    />
  );
}
```

--------------------------------

### Build Library for Distribution with pnpm

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Compiles the component library into distributable formats. This command generates various entry points in the 'dist/' directory.

```bash
pnpm build
```

--------------------------------

### Import Component using Path Alias

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Demonstrates importing a component using the configured path alias `@/*` which maps to the `src/` directory.

```javascript
import Button from '@/components/Button';

```

--------------------------------

### Preview Production Build with pnpm

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Previews the production build of the component library. This allows for testing the final output before deployment.

```bash
pnpm preview
```

--------------------------------

### MarkdownRender with Options

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Illustrates advanced usage of MarkdownRender, enabling links to open in new tabs and making images responsive.

```tsx
// Links open in new tab, images are responsive
<MarkdownRender content={markdownContent} linkTarget="_blank" responsiveImages={true} />
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Runs ESLint on the `src/` directory to identify and automatically fix code style and potential errors.

```bash
pnpm lint
```

--------------------------------

### Import MarkdownRender Component

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Demonstrates how to import the MarkdownRender component from the component library. It shows both the main entry point and a subpath import.

```tsx
// Main entry
import { MarkdownRender } from '@macolmenerori/component-library';

// Subpath import
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';
```

--------------------------------

### Publish Library with pnpm

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Publishes a new version of the component library to a package registry. This process requires building the library first.

```bash
pnpm build
pnpm publish
```

--------------------------------

### ThemeSwitch Component Usage in React

Source: https://context7.com/macolmenerori/component-library/llms.txt

Demonstrates how to use the ThemeSwitch component in a React application. It shows basic implementation, size variants, and how to manage the dark mode state using React's useState hook. The component requires separate CSS import for styling.

```tsx
import { useState } from 'react';
// Import CSS separately (required for styling, supports SSG/SSR)
import '@macolmenerori/component-library/theme-switch-css';
// Subpath import (recommended - no react-markdown dependency required)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div style={{ padding: '2rem' }}>
      {/* Large size (default) */}
      <ThemeSwitch
        enableDarkMode={darkMode}
        setEnableDarkMode={setDarkMode}
      />

      {/* Medium size */}
      <ThemeSwitch
        enableDarkMode={darkMode}
        setEnableDarkMode={setDarkMode}
        size="medium"
      />

      {/* Small size */}
      <ThemeSwitch
        enableDarkMode={darkMode}
        setEnableDarkMode={setDarkMode}
        size="small"
      />

      <p>Current theme: {darkMode ? 'Dark' : 'Light'}</p>
    </div>
  );
}
```

--------------------------------

### Import MarkdownRender Component

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Demonstrates how to import the MarkdownRender component from the component library, showing both subpath and main entry imports.

```tsx
// Subpath import
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

// Main entry
import { MarkdownRender } from '@macolmenerori/component-library';
```

--------------------------------

### Import ThemeSwitch Component in React

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/ThemeSwitch/README.md

Demonstrates how to import the ThemeSwitch component and its required CSS. It shows recommended subpath imports and an alternative main entry import, emphasizing the need for separate CSS import for SSG/SSR.

```tsx
// Import CSS separately (required for styling)
import '@macolmenerori/component-library/theme-switch-css';

// Recommended: Subpath import (no react-markdown dependency required)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';

// Alternative: Main entry (requires all peer dependencies)
import { ThemeSwitch } from '@macolmenerori/component-library';
```

--------------------------------

### Import Components from Component Library (TypeScript)

Source: https://context7.com/macolmenerori/component-library/llms.txt

Demonstrates how to import components from the library using subpath exports for optimized tree-shaking. You can import all components or individual ones, depending on your project's needs. Importing individual components is recommended for smaller bundle sizes.

```tsx
// Import all components (requires all peer dependencies)
import { ThemeSwitch, MonthlyCalendar, MarkdownRender } from '@macolmenerori/component-library';

// Import individual components (recommended for smaller bundles)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

```

--------------------------------

### Vite Configuration for Library Mode

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Configuration for Vite to build the project as a library, specifying output formats (ESM, CommonJS), entry points, and external dependencies.

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react(),
    dts({ insertTypes: true }),
  ],
  build: {
    lib: {
      entry: {
        index: 'src/index.ts',
        ThemeSwitch: 'src/components/ThemeSwitch/index.ts',
        MonthlyCalendar: 'src/components/MonthlyCalendar/index.ts',
        MarkdownRender: 'src/components/MarkdownRender/index.ts',
      },
      name: '@macolmenerori/component-library',
      formats: ['es', 'cjs'],
      fileName: (format) => `[name].${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react-markdown', 'remark-gfm'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react-markdown': 'ReactMarkdown',
          'remark-gfm': 'remarkGfm',
        },
      },
    },
  },
});

```

--------------------------------

### Format Code with Prettier

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Formats all files within the `src/` directory using Prettier according to the project's defined code style rules.

```bash
pnpm prettify
```

--------------------------------

### MarkdownRender with Custom Components

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Demonstrates how to customize markdown elements by providing custom React components to the `components` prop.

```tsx
// Custom components
<MarkdownRender
  content={markdownContent}
  components={{
    a: ({ children, ...props }) => (
      <a {...props} target="_blank" rel="noreferrer">{children}</a>
    )
  }}
/>
```

--------------------------------

### Subpath Exports

Source: https://context7.com/macolmenerori/component-library/llms.txt

Information on how to import specific components using subpath exports for optimized bundle sizes.

```APIDOC
## Subpath Exports

### Description

The library supports subpath exports for optimal tree-shaking and to avoid unnecessary dependencies.

### Parameters

#### Query Parameters

(No query parameters for subpath exports, this is about import paths.)

### Request Example

```tsx
// Import all components (requires all peer dependencies)
import { ThemeSwitch, MonthlyCalendar, MarkdownRender } from '@macolmenerori/component-library';

// Import individual components (recommended for smaller bundles)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';
```

### Response

#### Success Response (200)

(No direct response, this section describes import paths.)
```

--------------------------------

### MarkdownRender Component Usage

Source: https://context7.com/macolmenerori/component-library/llms.txt

Demonstrates how to use the MarkdownRender component for displaying markdown content with various options.

```APIDOC
## MarkdownRender Component

### Description

A component for rendering markdown strings as HTML with GitHub Flavored Markdown (GFM) support, including tables, task lists, strikethrough, and code blocks. Requires `react-markdown` and `remark-gfm` peer dependencies.

### Parameters

#### Request Body

- **content** (string) - Required - The markdown string to render.
- **className** (string) - Optional - CSS class name for the container element.
- **components** (Partial<Components>) - Optional - Custom component overrides for markdown elements.
- **linkTarget** ('_blank' | '_self' | '_parent' | '_top') - Optional - Target for all links. Defaults to `'_self'`.
- **responsiveImages** (boolean) - Optional - Make all images responsive. Defaults to `false`.
- **rehypePlugins** (PluggableList) - Optional - Optional rehype plugins for HTML processing.

### Request Example

```tsx
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

const content = `
# Hello World

This is **bold** and this is *italic*.

## Features
- Lists
- ~~Strikethrough~~
- [Links](https://example.com)
- `inline code`

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |

```javascript
const hello = 'world';
console.log(hello);
```
`;

<MarkdownRender content={content} className="my-markdown" />
```

### Response

#### Success Response (200)

- **rendered HTML** (string) - The HTML output of the rendered markdown content.

#### Response Example

(No direct response example, as this is a client-side component. The output is rendered HTML within the DOM.)
```

--------------------------------

### Import MonthlyCalendar Component

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Demonstrates how to import the MonthlyCalendar component from the library, either via subpath import or the main entry point.

```tsx
// Subpath import (recommended — no react-markdown dependency required)
import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';

// Main entry (includes all components)
import { MonthlyCalendar } from '@macolmenerori/component-library';
```

--------------------------------

### Use ThemeSwitch component in React

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Shows how to import and use the ThemeSwitch component in a React application. It requires importing the CSS separately and uses subpath imports for efficient tree-shaking. The component manages dark mode state via props.

```tsx
import { useState } from 'react';
// Import CSS separately (required for styling)
import '@macolmenerori/component-library/theme-switch-css';
// Subpath import (recommended - no react-markdown dependency required)
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div>
      <ThemeSwitch enableDarkMode={darkMode} setEnableDarkMode={setDarkMode} size="medium" />
    </div>
  );
}
```

--------------------------------

### Basic MarkdownRender Usage

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Shows the basic usage of the MarkdownRender component, passing a markdown string to the `content` prop.

```tsx
// Basic usage
<MarkdownRender content={markdownContent} />
```

--------------------------------

### Basic MarkdownRender Usage

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Shows the basic usage of the MarkdownRender component, passing a markdown string to the 'content' prop and an optional CSS class to 'className'.

```tsx
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

function App() {
  const markdownContent = `
# Hello World

This is **bold** and this is *italic*.

## Features
- Lists
- ~~Strikethrough~~
- [Links](https://example.com)
- `inline code`

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
  `;

  return <MarkdownRender content={markdownContent} className="my-markdown" />;
}
```

--------------------------------

### Render Markdown with GitHub Flavored Markdown Support (TypeScript)

Source: https://context7.com/macolmenerori/component-library/llms.txt

The MarkdownRender component takes a markdown string and renders it as HTML with support for GitHub Flavored Markdown features like tables, task lists, and code blocks. It requires 'react-markdown' and 'remark-gfm' as peer dependencies. Options include customizing link targets, enabling responsive images, and providing custom components for markdown elements.

```tsx
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

// Basic usage
function BasicMarkdown() {
  const content = `
# Hello World

This is **bold** and this is *italic*.

## Features
- Lists
- ~~Strikethrough~~
- [Links](https://example.com)
- `inline code`

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |

```javascript
const hello = 'world';
console.log(hello);
```
  `;

  return <MarkdownRender content={content} className="my-markdown" />;
}

// With link target and responsive images
function MarkdownWithOptions() {
  const content = `
Check out [this link](https://example.com) - opens in new tab!

![Sample Image](https://example.com/image.jpg)
  `;

  return (
    <MarkdownRender
      content={content}
      linkTarget="_blank"
      responsiveImages={true}
    />
  );
}

// With custom components
function MarkdownWithCustomComponents() {
  const content = `
Visit [our website](https://example.com) for more info.

![Beautiful Image](https://example.com/photo.jpg)
  `;

  return (
    <MarkdownRender
      content={content}
      components={{
        a: ({ children, ...props }) => (
          <a
            {...props}
            target="_blank"
            rel="noreferrer"
            style={{ color: '#0066cc', textDecoration: 'underline' }}
          >
            {children} ↗
          </a>
        ),
        img: ({ alt, ...props }) => (
          <img
            alt={alt ?? ''}
            {...props}
            style={{
              maxWidth: '100%',
              height: 'auto',
              borderRadius: '12px',
              boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
            }}
            loading="lazy"
          />
        )
      }}
    />
  );
}

```

--------------------------------

### TypeScript Path Aliases Configuration

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Configures TypeScript path aliases in `tsconfig.json` to map the `@/*` alias to the `src/` directory, simplifying import paths.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

```

--------------------------------

### MarkdownRender with Responsive Images

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Enables responsive images within the MarkdownRender component by setting the 'responsiveImages' prop to true. This applies 'max-width: 100%' and 'height: auto' to all images.

```tsx
<MarkdownRender
  content={markdownContent}
  responsiveImages={true}
/>
```

--------------------------------

### Use MarkdownRender component in React

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

Demonstrates the usage of the MarkdownRender component in React for displaying markdown content. This component requires 'react-markdown' and 'remark-gfm' as peer dependencies and supports GitHub Flavored Markdown.

```tsx
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';

function App() {
  const markdownContent = `
# Hello World

This is **bold** and this is *italic*.

`;

  return (
    <MarkdownRender content={markdownContent} />
  );
}
```

--------------------------------

### Component Export Pattern

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Illustrates the standard export pattern for components within the library, including default export and named exports via `index.ts`.

```typescript
// In component file (e.g., MyComponent.tsx)
export interface MyComponentProps { ... }
const MyComponent: React.FC<MyComponentProps> = (props) => { ... };
export default MyComponent;

// In component's index.ts (e.g., src/components/MyComponent/index.ts)
export type { MyComponentProps } from './MyComponent';
export { default as MyComponent } from './MyComponent';

// In src/index.ts (re-exports all components)
export * from './components/MyComponent';
```

--------------------------------

### Sparse Annotations with Null Values (TypeScript/React)

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Demonstrates how to create an array for annotations where `null` is used to represent days without any content. Specific days can then be populated with React elements.

```tsx
const annotations = new Array(30).fill(null);
annotations[4] = <span>Event A</span>;  // Day 5
annotations[19] = <span>Event B</span>; // Day 20
```

--------------------------------

### Basic MonthlyCalendar Usage

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Renders a basic monthly calendar for a specified year and month.

```tsx
<MonthlyCalendar year={2026} month={2} />
```

--------------------------------

### MarkdownRender with Links Opening in New Tab

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MarkdownRender/README.md

Configures the MarkdownRender component to open all links in a new tab by setting the 'linkTarget' prop to '_blank'. This also adds 'rel="noreferrer"' for security.

```tsx
<MarkdownRender
  content={markdownContent}
  linkTarget="_blank"
/>
```

--------------------------------

### MonthlyCalendar with Annotations

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Renders a monthly calendar with custom annotations for specific days. Annotations are provided as an array of ReactNodes.

```tsx
const daysInMonth = new Date(2026, 6, 0).getDate();

const annotations = Array.from({ length: daysInMonth }, (_, i) => {
  const day = i + 1;
  if (day === 5) return <span style={{ color: '#3730a3', fontSize: '0.65rem' }}>Meeting</span>;
  if (day === 12) return <span style={{ color: '#dc2626', fontSize: '0.65rem' }}>Deadline</span>;
  if (day === 20) return <span>🚀</span>;
  return null;
});

<MonthlyCalendar
  year={2026}
  month={6}
  headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
  annotations={annotations}
/>
```

--------------------------------

### MonthlyCalendar Component Props

Source: https://context7.com/macolmenerori/component-library/llms.txt

Details the properties available for the MonthlyCalendar component, including their types, requirements, and default values.

```APIDOC
## MonthlyCalendar Props

### Description

Props for the MonthlyCalendar component.

### Parameters

#### Request Body

- **year** (number) - Required - Full four-digit year (e.g., 2026)
- **month** (number) - Required - Month to display, 1-based (1 = January, 12 = December)
- **annotations** (Array<ReactNode | null | undefined>) - Optional - Array of content per day. `annotations[0]` maps to Day 1. Defaults to `[]`.
- **headers** (Array<string>) - Optional - Array of 7 weekday labels. Omit to hide header row.
- **style** (CSSProperties) - Optional - Inline styles merged onto the `<table>` element. Defaults to `{}`.
- **darkMode** (boolean) - Optional - Enables dark color theme. Defaults to `false`.
```

--------------------------------

### MonthlyCalendar with Custom Headers

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Renders a monthly calendar with custom weekday labels for the header row.

```tsx
<MonthlyCalendar
  year={2026}
  month={3}
  headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
/>
```

--------------------------------

### React Component for Markdown Rendering

Source: https://github.com/macolmenerori/component-library/blob/master/README.md

A React component that renders Markdown content. It utilizes the 'react-markdown' and 'react-gfm' libraries for parsing and rendering Markdown with GitHub Flavored Markdown support.

```jsx
import React from 'react';
import MarkdownRender from './markdown-render';

const markdownContent = `
# Features
- Lists
- ~~Strikethrough~~
- [Links](https://example.com)
- `inline code`

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
`;

function App() {
  return (
    <div>
      <MarkdownRender content={markdownContent} className="my-markdown" />
    </div>
  );
}
```

--------------------------------

### Type Check with TypeScript

Source: https://github.com/macolmenerori/component-library/blob/master/CLAUDE.md

Executes the TypeScript compiler in no-emit mode to check for type errors across the project without generating output files.

```bash
pnpm types
```

--------------------------------

### MonthlyCalendar with Custom Table Styles

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Applies custom inline styles to the `<table>` element of the MonthlyCalendar component.

```tsx
<MonthlyCalendar
  year={2026}
  month={4}
  headers={['S', 'M', 'T', 'W', 'T', 'F', 'S']}
  style={{
    border: '2px solid #6366f1',
    borderCollapse: 'separate',
    borderSpacing: 6,
    borderRadius: 12,
    fontFamily: "'Georgia', serif"
  }}
/>
```

--------------------------------

### MonthlyCalendar in Dark Mode

Source: https://github.com/macolmenerori/component-library/blob/master/src/components/MonthlyCalendar/README.md

Renders a monthly calendar in dark mode. Requires wrapping the component in a dark background container.

```tsx
<div style={{ background: '#1e1e30', padding: 16, borderRadius: 12 }}>
  <MonthlyCalendar
    year={2026}
    month={8}
    darkMode={true}
    headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
  />
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.