open-index/open-npm huggingface dataset:
npm package: @pagedotapp/page-dialog
Description: PageDialog - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-dialog

A modal dialog component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-dialog
```

## Usage

```tsx
import { PageDialog } from "@pagedotapp/page-dialog"

function App() {
	return (
		<PageDialog
			open={isOpen}
			onOpenChange={setIsOpen}
			title="Dialog Title"
			description="Dialog description"
		>
			<p>Dialog content goes here</p>
		</PageDialog>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-dialog: ^1.1.14
- @react-spring/web: ^10.0.1

## License

MIT © PageStudio
npm package: @pagedotapp/page-faqaccordion-section
Description: PageFAQAccordionSection - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.9

# PageFAQAccordionSection

A reusable faqaccordionsection component for React applications.

## Installation

```bash
npm install @pagedotapp/page-faqaccordion-section
```

## Usage

```tsx
import { PageFAQAccordionSection } from "@pagedotapp/page-faqaccordion-section"

function App() {
	return (
		<PageFAQAccordionSection variant="primary" size="medium">
			PageFAQAccordionSection Content
		</PageFAQAccordionSection>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageFAQAccordionSection variant="default">Default</PageFAQAccordionSection>
<PageFAQAccordionSection variant="primary">Primary</PageFAQAccordionSection>
<PageFAQAccordionSection variant="secondary">Secondary</PageFAQAccordionSection>
```

### Sizes

```tsx
<PageFAQAccordionSection size="small">Small</PageFAQAccordionSection>
<PageFAQAccordionSection size="medium">Medium</PageFAQAccordionSection>
<PageFAQAccordionSection size="large">Large</PageFAQAccordionSection>
```

### States

```tsx
<PageFAQAccordionSection disabled>Disabled</PageFAQAccordionSection>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-footer-section
Description: Footer section component with multiple layout variants
Author: PageStudio
Latest version: 0.0.0-alpha.11

# @pagedotapp/page-footer-section

A flexible footer section component for Page UI applications with responsive design support.

## Installation

```bash
npm install @pagedotapp/page-footer-section
```

## Usage

```tsx
import { PageFooterSection } from "@pagedotapp/page-footer-section"

function App() {
	return (
		<PageFooterSection
			variant="multi-column"
			columns={[
				{
					title: "Product",
					links: [
						{ label: "Features", href: "/features" },
						{ label: "Pricing", href: "/pricing" },
					],
				},
				{
					title: "Company",
					links: [
						{ label: "About", href: "/about" },
						{ label: "Contact", href: "/contact" },
					],
				},
			]}
			copyright="© 2025 Your Company. All rights reserved."
		/>
	)
}
```

## Props

See TypeScript definitions for detailed prop types.

## License

MIT
npm package: @pagedotapp/page-hero-section
Description: Hero section component with multiple layout variants
Author: PageStudio
Latest version: 0.0.0-alpha.12

# Page-hero-section

A reusable -hero-section component for React applications.

## Installation

```bash
npm install @pagedotapp/page-hero-section
```

## Usage

```tsx
import { Page-hero-section } from '@pagedotapp/page-hero-section';

function App() {
  return (
    <Page-hero-section variant="primary" size="medium">
      Page-hero-section Content
    </Page-hero-section>
  );
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<Page-hero-section variant="default">Default</Page-hero-section>
<Page-hero-section variant="primary">Primary</Page-hero-section>
<Page-hero-section variant="secondary">Secondary</Page-hero-section>
```

### Sizes

```tsx
<Page-hero-section size="small">Small</Page-hero-section>
<Page-hero-section size="medium">Medium</Page-hero-section>
<Page-hero-section size="large">Large</Page-hero-section>
```

### States

```tsx
<Page-hero-section disabled>Disabled</Page-hero-section>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-icon
Description: PageIcon - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-icon

A flexible icon component using Bootstrap Icons

## Installation

```bash
npm install @pagedotapp/page-icon
```

## Usage

```tsx
import { PageIcon } from "@pagedotapp/page-icon"

function App() {
	return <PageIcon icon="check" size={24} />
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-icon-button
Description: PageIconButton - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# PageIconButton

A reusable iconbutton component for React applications.

## Installation

```bash
npm install @pagedotapp/page-icon-button
```

## Usage

```tsx
import { PageIconButton } from "@pagedotapp/page-icon-button"

function App() {
	return (
		<PageIconButton variant="primary" size="medium">
			PageIconButton Content
		</PageIconButton>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageIconButton variant="default">Default</PageIconButton>
<PageIconButton variant="primary">Primary</PageIconButton>
<PageIconButton variant="secondary">Secondary</PageIconButton>
```

### Sizes

```tsx
<PageIconButton size="small">Small</PageIconButton>
<PageIconButton size="medium">Medium</PageIconButton>
<PageIconButton size="large">Large</PageIconButton>
```

### States

```tsx
<PageIconButton disabled>Disabled</PageIconButton>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To build the component:

```bash
npm run build
```
npm package: @pagedotapp/page-input
Description: PageInput - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-input

A styled input component with consistent theming

## Installation

```bash
npm install @pagedotapp/page-input
```

## Usage

```tsx
import { PageInput } from "@pagedotapp/page-input"

function App() {
	return (
		<PageInput
			type="text"
			placeholder="Enter text..."
			value={value}
			onChange={handleChange}
		/>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-item-card
Description: PageItemCard - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# PageItemCard

A reusable itemcard component for React applications.

## Installation

```bash
npm install @pagedotapp/page-item-card
```

## Usage

```tsx
import { PageItemCard } from "@pagedotapp/page-item-card"

function App() {
	return (
		<PageItemCard variant="primary" size="medium">
			PageItemCard Content
		</PageItemCard>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageItemCard variant="default">Default</PageItemCard>
<PageItemCard variant="primary">Primary</PageItemCard>
<PageItemCard variant="secondary">Secondary</PageItemCard>
```

### Sizes

```tsx
<PageItemCard size="small">Small</PageItemCard>
<PageItemCard size="medium">Medium</PageItemCard>
<PageItemCard size="large">Large</PageItemCard>
```

### States

```tsx
<PageItemCard disabled>Disabled</PageItemCard>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-item-card-small
Description: PageItemCardSmall - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.15

# PageItemCardSmall

A reusable itemcardsmall component for React applications.

## Installation

```bash
npm install @pagedotapp/page-item-card-small
```

## Usage

```tsx
import { PageItemCardSmall } from "@pagedotapp/page-item-card-small"

function App() {
	return (
		<PageItemCardSmall variant="primary" size="medium">
			PageItemCardSmall Content
		</PageItemCardSmall>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageItemCardSmall variant="default">Default</PageItemCardSmall>
<PageItemCardSmall variant="primary">Primary</PageItemCardSmall>
<PageItemCardSmall variant="secondary">Secondary</PageItemCardSmall>
```

### Sizes

```tsx
<PageItemCardSmall size="small">Small</PageItemCardSmall>
<PageItemCardSmall size="medium">Medium</PageItemCardSmall>
<PageItemCardSmall size="large">Large</PageItemCardSmall>
```

### States

```tsx
<PageItemCardSmall disabled>Disabled</PageItemCardSmall>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-item-page
Description: PageItemPage - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# PageItemPage

A reusable itempage component for React applications.

## Installation

```bash
npm install @pagedotapp/page-item-page
```

## Usage

```tsx
import { PageItemPage } from "@pagedotapp/page-item-page"

function App() {
	return (
		<PageItemPage variant="primary" size="medium">
			PageItemPage Content
		</PageItemPage>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageItemPage variant="default">Default</PageItemPage>
<PageItemPage variant="primary">Primary</PageItemPage>
<PageItemPage variant="secondary">Secondary</PageItemPage>
```

### Sizes

```tsx
<PageItemPage size="small">Small</PageItemPage>
<PageItemPage size="medium">Medium</PageItemPage>
<PageItemPage size="large">Large</PageItemPage>
```

### States

```tsx
<PageItemPage disabled>Disabled</PageItemPage>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-link
Description: PageLink - A reusable React component
Author: PageStudio
Latest version: 1.0.0-alpha.8

# PageLink

A reusable link component for React applications.

## Installation

```bash
npm install @pagedotapp/page-link
```

## Usage

```tsx
import { PageLink } from "@pagedotapp/page-link"

function App() {
	return (
		<PageLink variant="primary" size="medium">
			PageLink Content
		</PageLink>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageLink variant="default">Default</PageLink>
<PageLink variant="primary">Primary</PageLink>
<PageLink variant="secondary">Secondary</PageLink>
```

### Sizes

```tsx
<PageLink size="small">Small</PageLink>
<PageLink size="medium">Medium</PageLink>
<PageLink size="large">Large</PageLink>
```

### States

```tsx
<PageLink disabled>Disabled</PageLink>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-loader
Description: PageLoader - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-loader

An animated loading spinner component

## Installation

```bash
npm install @pagedotapp/page-loader
```

## Usage

```tsx
import { PageLoader } from "@pagedotapp/page-loader"

function App() {
	return <PageLoader size="medium" />
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-media-player
Description: PageMediaPlayer - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# PageMediaPlayer

A reusable mediaplayer component for React applications.

## Installation

```bash
npm install @pagedotapp/page-media-player
```

## Usage

```tsx
import { PageMediaPlayer } from "@pagedotapp/page-media-player"

function App() {
	return (
		<PageMediaPlayer variant="primary" size="medium">
			PageMediaPlayer Content
		</PageMediaPlayer>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageMediaPlayer variant="default">Default</PageMediaPlayer>
<PageMediaPlayer variant="primary">Primary</PageMediaPlayer>
<PageMediaPlayer variant="secondary">Secondary</PageMediaPlayer>
```

### Sizes

```tsx
<PageMediaPlayer size="small">Small</PageMediaPlayer>
<PageMediaPlayer size="medium">Medium</PageMediaPlayer>
<PageMediaPlayer size="large">Large</PageMediaPlayer>
```

### States

```tsx
<PageMediaPlayer disabled>Disabled</PageMediaPlayer>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-menu
Description: PageMenu - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-menu

A dropdown menu component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-menu
```

## Usage

```tsx
import { PageMenu } from "@pagedotapp/page-menu"

function App() {
	return (
		<PageMenu>
			<PageMenuTrigger>
				<button>Open Menu</button>
			</PageMenuTrigger>
			<PageMenuContent>
				<PageMenuItem onSelect={() => console.log("Edit")}>Edit</PageMenuItem>
				<PageMenuItem onSelect={() => console.log("Delete")}>
					Delete
				</PageMenuItem>
			</PageMenuContent>
		</PageMenu>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-dropdown-menu: ^2.1.15
- @pagedotapp/page-icon: ^0.1.0-alpha.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-navigation-header-section
Description: Navigation header component with multiple layout variants
Author: PageStudio
Latest version: 0.0.0-alpha.11

# @pagedotapp/page-navigation-header-section

A responsive navigation header section component with sticky behavior and mobile menu support.

## Installation

```bash
npm install @pagedotapp/page-navigation-header-section
```

## Usage

```tsx
import { PageNavigationHeaderSection } from "@pagedotapp/page-navigation-header-section"

function App() {
	return (
		<PageNavigationHeaderSection
			logo={{ src: "/logo.png", alt: "Company Logo" }}
			navItems={[
				{ label: "Home", href: "/" },
				{ label: "Products", href: "/products" },
				{ label: "About", href: "/about" },
				{ label: "Contact", href: "/contact" },
			]}
			ctaButton={{
				label: "Get Started",
				onClick: () => console.log("CTA clicked"),
			}}
			sticky={true}
		/>
	)
}
```

## Props

See TypeScript definitions for detailed prop types.

## License

MIT
npm package: @pagedotapp/page-pricing-section
Description: PagePricingSection - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.9

# PagePricingSection

A reusable pricingsection component for React applications.

## Installation

```bash
npm install @pagedotapp/page-pricing-section
```

## Usage

```tsx
import { PagePricingSection } from "@pagedotapp/page-pricing-section"

function App() {
	return (
		<PagePricingSection variant="primary" size="medium">
			PagePricingSection Content
		</PagePricingSection>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PagePricingSection variant="default">Default</PagePricingSection>
<PagePricingSection variant="primary">Primary</PagePricingSection>
<PagePricingSection variant="secondary">Secondary</PagePricingSection>
```

### Sizes

```tsx
<PagePricingSection size="small">Small</PagePricingSection>
<PagePricingSection size="medium">Medium</PagePricingSection>
<PagePricingSection size="large">Large</PagePricingSection>
```

### States

```tsx
<PagePricingSection disabled>Disabled</PagePricingSection>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-reaction-picker
Description: PageReactionPicker - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# PageReactionPicker

A reusable reactionpicker component for React applications.

## Installation

```bash
npm install @pagedotapp/page-reaction-picker
```

## Usage

```tsx
import { PageReactionPicker } from "@pagedotapp/page-reaction-picker"

function App() {
	return (
		<PageReactionPicker variant="primary" size="medium">
			PageReactionPicker Content
		</PageReactionPicker>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageReactionPicker variant="default">Default</PageReactionPicker>
<PageReactionPicker variant="primary">Primary</PageReactionPicker>
<PageReactionPicker variant="secondary">Secondary</PageReactionPicker>
```

### Sizes

```tsx
<PageReactionPicker size="small">Small</PageReactionPicker>
<PageReactionPicker size="medium">Medium</PageReactionPicker>
<PageReactionPicker size="large">Large</PageReactionPicker>
```

### States

```tsx
<PageReactionPicker disabled>Disabled</PageReactionPicker>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-scroll-list
Description: PageScrollList - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# PageScrollList

A reusable scrolllist component for React applications.

## Installation

```bash
npm install @pagedotapp/page-scroll-list
```

## Usage

```tsx
import { PageScrollList } from "@pagedotapp/page-scroll-list"

function App() {
	return (
		<PageScrollList variant="primary" size="medium">
			PageScrollList Content
		</PageScrollList>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageScrollList variant="default">Default</PageScrollList>
<PageScrollList variant="primary">Primary</PageScrollList>
<PageScrollList variant="secondary">Secondary</PageScrollList>
```

### Sizes

```tsx
<PageScrollList size="small">Small</PageScrollList>
<PageScrollList size="medium">Medium</PageScrollList>
<PageScrollList size="large">Large</PageScrollList>
```

### States

```tsx
<PageScrollList disabled>Disabled</PageScrollList>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-section-utils
Description: Utility functions and types for Page UI sections
Author: PageStudio
Latest version: 0.0.0-alpha.10

# @pagedotapp/page-section-utils

Utility functions and types for building Page UI sections with responsive props and component overrides.

## Installation

```bash
npm install @pagedotapp/page-section-utils
```

## Usage

### Basic Section Hook

```tsx
import { useSection, SectionBaseProps } from "@pagedotapp/page-section-utils"

interface MySectionComponents {
	PageText: PageTextProps
	PageButton: PageButtonProps
}

interface MySectionProps extends SectionBaseProps<MySectionComponents> {
	title: string
	ctaText: string
}

export const MySection: React.FC<MySectionProps> = (props) => {
	const { resolveProps, cssVars } = useSection(props)

	return (
		<div style={cssVars}>
			<PageText {...resolveProps("PageText", { variant: "h1" })}>
				{props.title}
			</PageText>
			<PageButton {...resolveProps("PageButton", { variant: "primary" })}>
				{props.ctaText}
			</PageButton>
		</div>
	)
}
```

### Using Component Overrides

```tsx
<MySection
	title="Welcome"
	ctaText="Get Started"
	overrides={{
		PageText: {
			color: "#333",
			fontSize: "2rem",
			'[data-variant="h1"]': {
				fontWeight: "bold",
			},
		},
		PageButton: {
			size: "lg",
			variant: "secondary",
		},
	}}
	styles={{
		"--section-bg": "#f5f5f5",
		"--section-padding": "2rem",
	}}
/>
```

### Responsive Values

```tsx
import { ResponsiveValue } from "@pagedotapp/page-section-utils"

interface Props {
	padding?: ResponsiveValue<SpacingSize>
	columns?: ResponsiveValue<number>
}

// Usage
;<Component
	padding={{ base: "sm", md: "md", lg: "lg" }}
	columns={{ base: 1, md: 2, lg: 3 }}
/>
```

## API Reference

### Types

- `ResponsiveValue<T>` - Allows values to vary by breakpoint
- `SectionBaseProps<T>` - Base props for all sections
- `ComponentOverrides<T>` - Type-safe component prop overrides
- `SpacingSize` - Standard spacing sizes (xs, sm, md, lg, xl, etc.)

### Hooks

- `useSection(props)` - Main hook for managing section props and overrides

### Utilities

- `resolveResponsiveValue(value)` - Resolve responsive value to current
- `generateResponsiveClasses(value, prefix)` - Generate responsive CSS classes
- `mergeProps(a, b)` - Merge two props objects
- `spacingToPixels(size)` - Convert spacing size to pixels
- `deepMerge(...objects)` - Deep merge multiple objects

## License

MIT
npm package: @pagedotapp/page-select
Description: PageSelect - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-select

A dropdown select component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-select
```

## Usage

```tsx
import { PageSelect } from "@pagedotapp/page-select"

function App() {
	return (
		<PageSelect
			options={options}
			value={value}
			onChange={handleChange}
			placeholder="Select..."
		/>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-select: ^2.2.5

## License

MIT © PageStudio
npm package: @pagedotapp/page-sidebar
Description: PageSidebar - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/page-sidebar

A responsive sidebar navigation component

## Installation

```bash
npm install @pagedotapp/page-sidebar
```

## Usage

```tsx
import { PageSidebar } from "@pagedotapp/page-sidebar"

const items = [
	{ icon: "house", title: "Home", href: "/" },
	{ icon: "gear", title: "Settings", onClick: () => console.log("Settings") },
]

function App() {
	return <PageSidebar title="Page Studio" items={items} />
}
```

## Props

| Prop    | Type                | Description                         |
| ------- | ------------------- | ----------------------------------- |
| `title` | `React.ReactNode`   | Content shown in the sidebar header |
| `items` | `PageSidebarItem[]` | Array of navigation items           |

Each item in `items` has the following shape:

```ts
interface PageSidebarItem {
	icon: string
	title: React.ReactNode
	href?: string
	onClick?: () => void
	disabled?: boolean
	active?: boolean
}
```

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @react-spring/web: ^10.0.1
- @use-gesture/react: ^10.3.1
- @pagedotapp/page-icon: ^0.1.0-alpha.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-stats-counter-section
Description: PageStatsCounterSection - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.9

# PageStatsCounterSection

A reusable statscountersection component for React applications.

## Installation

```bash
npm install @pagedotapp/page-stats-counter-section
```

## Usage

```tsx
import { PageStatsCounterSection } from "@pagedotapp/page-stats-counter-section"

function App() {
	return (
		<PageStatsCounterSection variant="primary" size="medium">
			PageStatsCounterSection Content
		</PageStatsCounterSection>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageStatsCounterSection variant="default">Default</PageStatsCounterSection>
<PageStatsCounterSection variant="primary">Primary</PageStatsCounterSection>
<PageStatsCounterSection variant="secondary">Secondary</PageStatsCounterSection>
```

### Sizes

```tsx
<PageStatsCounterSection size="small">Small</PageStatsCounterSection>
<PageStatsCounterSection size="medium">Medium</PageStatsCounterSection>
<PageStatsCounterSection size="large">Large</PageStatsCounterSection>
```

### States

```tsx
<PageStatsCounterSection disabled>Disabled</PageStatsCounterSection>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @pagedotapp/page-switch
Description: PageSwitch - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-switch

A toggle switch component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-switch
```

## Usage

```tsx
import { PageSwitch } from "@pagedotapp/page-switch"

function App() {
	return <PageSwitch checked={isEnabled} onCheckedChange={setIsEnabled} />
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-switch: ^1.2.5

## License

MIT © PageStudio
npm package: @pagedotapp/page-tabbed-scroll-section
Description: Tabbed scroll section component with multiple layout variants
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-tabbed-scroll-section

A tabbed content section with smooth scrolling and responsive design.

## Installation

```bash
npm install @pagedotapp/page-tabbed-scroll-section
```

## Usage

```tsx
import { PageTabbedScrollSection } from "@pagedotapp/page-tabbed-scroll-section"

function App() {
	return (
		<PageTabbedScrollSection
			tabs={[
				{
					id: "features",
					label: "Features",
					content: <FeaturesContent />,
				},
				{
					id: "benefits",
					label: "Benefits",
					content: <BenefitsContent />,
				},
				{
					id: "pricing",
					label: "Pricing",
					content: <PricingContent />,
				},
			]}
			variant="underline"
			scrollBehavior="smooth"
		/>
	)
}
```

## Props

See TypeScript definitions for detailed prop types.

## License

MIT
npm package: @pagedotapp/page-tabs
Description: PageTabs - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-tabs

A tabbed interface component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-tabs
```

## Usage

```tsx
import { PageTabs } from "@pagedotapp/page-tabs"

function App() {
	return (
		<PageTabs defaultValue="tab1">
			<PageTabsList>
				<PageTabsTrigger value="tab1">Tab 1</PageTabsTrigger>
				<PageTabsTrigger value="tab2">Tab 2</PageTabsTrigger>
			</PageTabsList>
			<PageTabsContent value="tab1">Content 1</PageTabsContent>
			<PageTabsContent value="tab2">Content 2</PageTabsContent>
		</PageTabs>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-tabs: ^1.1.12

## License

MIT © PageStudio
npm package: @pagedotapp/page-textarea
Description: PageTextarea - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-textarea

A styled textarea component with auto-resize support

## Installation

```bash
npm install @pagedotapp/page-textarea
```

## Usage

```tsx
import { PageTextarea } from "@pagedotapp/page-textarea"

function App() {
	return (
		<PageTextarea
			placeholder="Enter your message..."
			value={value}
			onChange={handleChange}
			rows={4}
		/>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-toast
Description: PageToast - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/page-toast

A toast notification component with multiple variants

## Installation

```bash
npm install @pagedotapp/page-toast
```

## Usage

```tsx
import { PageToast } from '@pagedotapp/page-toast';

function App() {
  return (
    // First, get a ref to show the toast
const toastRef = useRef<PageToastHandle>(null);

// Show the toast
toastRef.current?.show();

// Render the toast
<PageToast
  ref={toastRef}
  title="Success!"
  description="Your action was completed"
  variant="success"
/>
  );
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-toast: ^1.2.14
- @pagedotapp/page-avatar: ^0.1.0-alpha.0
- @pagedotapp/page-icon: ^0.1.0-alpha.0

## License

MIT © PageStudio
npm package: @pagedotapp/page-tooltip
Description: PageTooltip - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-tooltip

A tooltip component built on Radix UI

## Installation

```bash
npm install @pagedotapp/page-tooltip
```

## Usage

```tsx
import { PageTooltip } from "@pagedotapp/page-tooltip"

function App() {
	return (
		<PageTooltip content="Helpful tooltip text">
			<button>Hover me</button>
		</PageTooltip>
	)
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies

- @radix-ui/react-tooltip: ^1.2.7

## License

MIT © PageStudio
npm package: @pageel/cms
Description: Astro integration for Pageel CMS
Latest version: 0.1.0

# @pageel/cms

Astro integration for [Pageel CMS](https://pageel.app) — add a `/cms` admin route to your Astro site.

## Installation

```bash
npx astro add @pageel/cms
```

Or manually:

```bash
npm install @pageel/cms
```

```js
// astro.config.mjs
import pageelCms from '@pageel/cms';

export default defineConfig({
  integrations: [pageelCms()]
});
```

## Features

- 🔄 **Auto-detect** content collections from `src/content/`
- 📝 **Auto-generate** `.pageelrc.json` with detected collections
- 🔗 **Inject /cms route** → redirects to Pageel CMS backend
- ⚙️ **Zero config** — works out of the box

## Options

```js
pageelCms({
  cmsUrl: 'https://cms.pageel.app',  // CMS backend URL
  adminRoute: '/cms',                 // Admin route path
  autoConfig: true,                   // Auto-generate .pageelrc.json
  contentDir: 'src/content',          // Content directory to scan
})
```

## How it works

1. Scans `src/content/` for subdirectories (= Astro content collections)
2. Generates/syncs `.pageelrc.json` with detected collections
3. Adds `/cms` route that redirects to the Pageel CMS backend
4. Your CMS reads `.pageelrc.json` to know which collections to manage

## License

MIT
npm package: @pagefind/component-ui
Description: Modular web components for Pagefind search.
Author: Pagefind
Latest version: 1.5.0

# @pagefind/component-ui

Modular web components for Pagefind search.

## Installation

### Via npm

```bash
npm install @pagefind/component-ui
```

Import the components and styles:

```javascript
import '@pagefind/component-ui';
import '@pagefind/component-ui/css';
```

If your bundler doesn't support the `/css` export, import the CSS file directly:

```javascript
import '@pagefind/component-ui/css/pagefind-component-ui.css';
```

### Via Pagefind's bundled files

After running Pagefind, include the generated files from your output directory:

```html
<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
```

## Quick Start

Add a modal search to your site:

```html
<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>
```

Or use a searchbox dropdown:

```html
<pagefind-searchbox></pagefind-searchbox>
```

Or build your own layout with individual components:

```html
<pagefind-input></pagefind-input>
<pagefind-summary></pagefind-summary>
<pagefind-results></pagefind-results>
```

## Documentation

For full documentation, component references, styling guides, and examples, visit:

**https://ui.pagefind.app/**

## License

MIT
npm package: @pagefind/default-ui
Description: Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users' bandwidth as possible.
Author: Pagefind
Latest version: 1.5.0

# Pagefind Default UI


Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users' bandwidth as possible. 

Pagefind runs after any static site generator and automatically indexes the built static files. Pagefind then outputs a static search bundle to your website, and exposes a JavaScript search API that can be used anywhere on your site.

See the [Pagefind Documentation](https://pagefind.app/) for full usage.

Quick usage:

> These code snippets assume you have already indexed your website with the Pagefind CLI.

```js
import { PagefindUI } from '@pagefind/default-ui'

window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({ element: "#search" });
});
```

With a bundler configuration that supports CSS:

```js
import { PagefindUI } from '@pagefind/default-ui'
import styles from "@pagefind/default-ui/css/ui.css";

window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({ element: "#search" });
});
```

For all configuration options, see the [Pagefind Documentation](https://pagefind.app/).
npm package: @pageflare/cli-linux-arm64
Description: Pageflare CLI binary for linux-arm64
Latest version: 0.5.0

# @pageflare/cli-linux-arm64

Platform-specific binary for `@pageflare/cli` on Linux arm64 (glibc).

This package is installed automatically by `@pageflare/cli` — you should not need to install it directly.

```bash
npm install -g @pageflare/cli
```

See [@pageflare/cli](https://www.npmjs.com/package/@pageflare/cli) for documentation.
npm package: @pageflare/cli-linux-arm64-musl
Description: Pageflare CLI binary for linux-arm64-musl
Latest version: 0.5.0

# @pageflare/cli-linux-arm64-musl

Platform-specific binary for `@pageflare/cli` on Linux arm64 (musl).

This package is installed automatically by `@pageflare/cli` — you should not need to install it directly.

```bash
npm install -g @pageflare/cli
```

See [@pageflare/cli](https://www.npmjs.com/package/@pageflare/cli) for documentation.
npm package: @pageflare/cli-linux-x64
Description: Pageflare CLI binary for linux-x64
Latest version: 0.5.0

# @pageflare/cli-linux-x64

Platform-specific binary for `@pageflare/cli` on Linux x64 (glibc).

This package is installed automatically by `@pageflare/cli` — you should not need to install it directly.

```bash
npm install -g @pageflare/cli
```

See [@pageflare/cli](https://www.npmjs.com/package/@pageflare/cli) for documentation.
npm package: @pageflare/cli-linux-x64-musl
Description: Pageflare CLI binary for linux-x64-musl
Latest version: 0.5.0

# @pageflare/cli-linux-x64-musl

Platform-specific binary for `@pageflare/cli` on Linux x64 (musl).

This package is installed automatically by `@pageflare/cli` — you should not need to install it directly.

```bash
npm install -g @pageflare/cli
```

See [@pageflare/cli](https://www.npmjs.com/package/@pageflare/cli) for documentation.
npm package: @pageflare/cli-win32-x64
Description: Pageflare CLI binary for win32-x64
Latest version: 0.5.0

# @pageflare/cli-win32-x64

Platform-specific binary for `@pageflare/cli` on Windows x64.

This package is installed automatically by `@pageflare/cli` — you should not need to install it directly.

```bash
npm install -g @pageflare/cli
```

See [@pageflare/cli](https://www.npmjs.com/package/@pageflare/cli) for documentation.
npm package: @pageflux/common
Description: Excalidraw common functions, constants, etc.
Latest version: 0.18.1

# @pageflux/common

## Install

```bash
npm install @pageflux/common
```

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

```bash
yarn add @pageflux/common
```

With PNPM, similarly install the package with this command:

```bash
pnpm add @pageflux/common
```