open-index/open-npm huggingface dataset:
npm package: @page-speed/pdf-viewer
Description: High-performance PDF viewer for restaurant menus, catalogs, and documents
Latest version: 0.2.0

![Page Speed React PDF Viewer](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/286337/h3vwbeyh65fdlkwlsda1lagvadov/github.png&q=90)

# 📑 @page-speed/pdf-viewer

High-performance, linearized PDF viewer for React applications.

## Features

- ⚡ Sub-1-second page rendering
- 📄 Support for linearized PDFs with progressive loading
- 🔍 Full-text search across all pages
- 🔎 Zoom in/out with keyboard shortcuts
- 📱 Mobile-responsive design
- 🎯 Page navigation with input
- 💾 Download & print support
- 🎨 Customizable controls
- 🚀 <30 KB base bundle (target)


## Installation

You can install the package with any Node package manager:

```bash
npm install @page-speed/pdf-viewer
# or
pnpm add @page-speed/pdf-viewer
# or
yarn add @page-speed/pdf-viewer
```

## Quick Start

```tsx
import { PDFViewer } from '@page-speed/pdf-viewer';

export function MenuViewer() {
  return (
    <PDFViewer
      url="/menus/spring-menu.pdf"
      title="Spring Menu"
      height="600px"
      config={{
        showControls: true,
        enableDownload: true,
      }}
    />
  );
}
```

## Configuration

`PDFViewer` accepts the following key props:

- `url: string` – PDF URL or file path (required)
- `title?: string` – optional document title
- `height?: string | number` – container height (default `600px`)
- `width?: string | number` – container width (default `100%`)
- `config?: Partial<PDFViewerConfig>` – viewer configuration options

`PDFViewerConfig` includes:

- `initialPage?: number`
- `initialZoom?: number | 'auto' | 'page-fit' | 'page-width'`
- `textSelection?: boolean`
- `search?: boolean`
- `showControls?: boolean`
- `showThumbnails?: boolean`
- `enableDownload?: boolean`
- `enablePrint?: boolean`
- `enableFullscreen?: boolean`
- `workerUrl?: string`
- `cacheSize?: number`
- `progressiveLoading?: boolean`

## Hooks & Utilities

In addition to the main `PDFViewer` component, this package exposes:

- Hooks
  - `usePDFDocument`
  - `usePageState`
  - `usePageRenderer`
  - `useZoom`
  - `useSearch`
- Components
  - `PDFCanvas`
  - `PDFControls`
  - `PDFThumbnails`
- Utilities
  - `isLinearizedPDF`
  - `downloadPDF`
  - `calculateScaleForPageFit`
  - `formatFileSize`
  - `extractPageText`
  - `linearizedPDFConfig`
  - `getOptimalRangeHeader`
  - `createProgressiveFetchHandler`

## License

MIT
npm package: @page-use/client
Description: TypeScript runtime for wiring page state, page functions, and the Page Use conversation loop together.
Latest version: 0.2.5

# @page-use/client

TypeScript runtime for wiring page state, page functions, and the Page Use conversation loop together.

## Install

```bash
pnpm add @page-use/client zod
```

## Quick Start

```ts
import {
    registerFunction,
    run,
    setSystemPrompt,
    setVariable,
} from '@page-use/client';
import {z} from 'zod';

// describe the assistant's role
setSystemPrompt('You are helping the user manage a todo list.');

// expose state the assistant can read
setVariable('items', {
    schema: z.array(
        z.object({
            id: z.string(),
            text: z.string(),
            completed: z.boolean(),
        }),
    ),
    value: [],
});

// expose a function the assistant can call
registerFunction('setItems', {
    inputSchema: z.array(
        z.object({
            id: z.string(),
            text: z.string(),
            completed: z.boolean(),
        }),
    ),
    mutates: ['items'],
    func: async (items) => {
        updateItemsInYourApp(items);
        return {ok: true};
    },
});

// run a conversation turn
const handle = run('Add "buy milk" to the list', {
    onMessage: (message) => console.log('assistant:', message),
    onUpdate: (update) => console.log('update:', update),
    onError: (error) => console.error('error:', error),
});

await handle.done;
```

## API

### Context

| Export | Description |
|--------|-------------|
| `setSystemPrompt(prompt)` | Set the system prompt for the assistant |
| `setContextInformation(key, {title?, content})` | Add extra context sent with each turn |
| `unsetContextInformation(key)` | Remove a context entry |
| `resetConversation()` | Start a fresh conversation (new ID) |

### Variables

| Export | Description |
|--------|-------------|
| `setVariable(name, {schema, value})` | Register a readable variable with a Zod schema |
| `unsetVariable(name)` | Remove a variable |

### Functions

| Export | Description |
|--------|-------------|
| `registerFunction(name, options)` | Register a callable function with Zod-validated I/O |
| `unregisterFunction(name)` | Remove a function |

`registerFunction` options:

- `inputSchema` — Zod schema for the input
- `outputSchema` — Zod schema for the output (optional)
- `mutates` — variable names this function changes (triggers automatic wait)
- `mutationTimeoutMs` — max wait time for declared mutations (default `5s`)
- `func(input, signal?)` — the handler

### Runner

| Export | Description |
|--------|-------------|
| `run(prompt, options?)` | Start a conversation turn (single-flight) |

`run` returns a `TRunHandle` with `abort()` and `done: Promise<void>`.

### Client

| Export | Description |
|--------|-------------|
| `createClient(options?)` | Create a typed tRPC client to the core service |

### Types

`TRunHandle`, `TRunOptions`, `TRunStatus`, `TRunUpdate`, `TFunctionOptions`, `TVariableOptions`

## License

MIT
npm package: @page-use/react
Description: React bindings for Page Use. Hooks and components that wire your React state to the Page Use conversation loop.
Latest version: 0.2.5

# @page-use/react

React bindings for Page Use. Hooks and components that wire your React state to the Page Use conversation loop.

## Install

```bash
pnpm add @page-use/react @page-use/client react react-dom zod
```

## Quick Start

```tsx
import {SystemPrompt, useAgentVariable, useAgentFunction} from '@page-use/react';
import {PageUseChat} from '@page-use/react/ui/chat';
import {z} from 'zod';

const itemsSchema = z.array(
    z.object({
        id: z.string(),
        text: z.string(),
        completed: z.boolean(),
    }),
);

const App = () => {
    const [items, setItems] = useState([]);

    useAgentVariable('items', {schema: itemsSchema, value: items});

    useAgentFunction('setItems', {
        inputSchema: itemsSchema,
        mutates: ['items'],
        func: async (newItems) => {
            setItems(newItems);
            return {ok: true};
        },
    });

    return (
        <>
            <SystemPrompt>
                You are helping the user manage a todo list.
            </SystemPrompt>

            <ul>
                {items.map((item) => (
                    <li key={item.id}>{item.text}</li>
                ))}
            </ul>

            <PageUseChat title="Assistant" theme="dark" />
        </>
    );
};
```

## Exports

### `@page-use/react`

| Export | Type | Description |
|--------|------|-------------|
| `SystemPrompt` | Component | Set the system prompt via `children` or `prompt` prop |
| `useSystemPrompt` | Hook | Set the system prompt imperatively |
| `useAgentVariable` | Hook | Expose React state as a readable variable |
| `useAgentFunction` | Hook | Expose a function the assistant can call |
| `useAgentState` | Hook | Combines variable + setter function in one call |

### `@page-use/react/ui/chat`

| Export | Type | Description |
|--------|------|-------------|
| `PageUseChat` | Component | Draggable chat widget with markdown, theming, and dev mode |

`PageUseChat` props:

- `title` — panel header (default `"Agent"`)
- `greeting` — initial assistant message
- `placeholder` — input placeholder text
- `suggestions` — clickable suggestion chips
- `theme` — `"dark"` or `"light"`
- `icon` — custom icon component
- `devMode` — show execution steps
- `cssVariables` — override theme colors (`--pu-bg`, `--pu-fg`, `--pu-accent`, etc.)
- `width` / `height` — panel dimensions (default `320` x `560`)

## License

MIT
npm package: @page1597/react-full-page
Description: Full page scrolling with React
Author: Kirill Mironov
Latest version: 0.1.13

# react-full-page
Full screen scrolling with React

[![npm](https://img.shields.io/npm/v/react-full-page.svg)](https://www.npmjs.com/package/react-full-page)

## [DEMO](http://zwug.github.io/react-full-page/)

```js
import React from 'react';
import { FullPage, Slide } from 'react-full-page';

export default class FullPageExample extends React.Component {
  render() {
    return (
      <FullPage controls>
        <Slide>
          <h1>Inner slide content</h1>
        </Slide>
        <Slide>
          <h1>Another slide content</h1>
        </Slide>
      </FullPage>
    );
  }
});
```

## Props

* `initialSlide` defaults to `0`
* `duration` - scroll duration [ms] defaults to `700`
* `controls` defaults to `false`
  * `true` adds built-in controls
  * Pass React component if you want to use your own controls
* `controlsProps` additional props for controls component
* `beforeChange` callback executed before scroll
* `afterChange` callback executed after scroll
* `scrollMode` `full-page` or `normal` - defaults to `full-page`

Both `beforeChange` and `afterChange` will receive as parameter an object like:

```js
{
  "from": 0, // the index of the slide react-full-page is scrolling _from_
  "to": 1, // the index of the slide react-full-page is scrolling _to_
}
```

## Slider Controls

Basic controls props (passed automatically)
```js
  getCurrentSlideIndex: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired,
  onPrev: PropTypes.func.isRequired,
  scrollToSlide: PropTypes.func.isRequired,
  slidesCount: PropTypes.number.isRequired,
```
Default controls example
```js
<FullPage controls controlsProps={{className: 'class-name'}}>
  ...
</FullPage>
```

Custom controls example
```js
<FullPage controls={CustomControls} controlsProps={controlsProps}>
  ...
</FullPage>
```
npm package: @pageboard/api
Description: pageboard-api =============
Author: Jérémy Lal
Latest version: 0.5.6

pageboard-api
=============


Configuration
-------------

* database  
  a connection string, any parameter of which can be overriden by the
  following parameters

* connection.type  
  connection.user  
  connection.password  
  connection.host  
  connection.database  

Commands
--------

* pageboard api.migrate


Services
--------

These services expose get, add, save, del functions.

* user  
  identifies a user and its grants  
  children of a user are sites

* site  
  identifies a site containing pages, belongs to one or several users

* page  
  a web page, belongs to a site

* block  
  all other blocks are children of a page (or grand-children, recursively).


Permissions
-----------

A user have grants, and blocks have permissions.
- add
- save
- del
- read


Debug
-----

DEBUG=pageboard:api
DEBUG=pageboard:sql
npm package: @pageboard/client
Description: Pageboard client modules
Author: Jérémy Lal
Latest version: 0.6.5

pageboard client modules
========================

install
-------

`npm install @pageboard/client`


dev install
-----------

Install and run `make`.


modules
-------  

* elements  
  the core client elements for rendering a page.  
  Exposes window.Pageboard, which is used to run things,
  and to provide essential utils.

* elements-write  
  the client libraries for edition, uses `pagecut` for block edition.

* elements-semantic-ui  
  A full set of elements using the well known framework.

* elements-gallery  
  Powerful portfolio/carousel/medialist combos.

* elements-google  
  Translate, verify site owner, tag manager...

* elements-mail  
  Edit mail pages like a boss.

* elements-calendar  
  Core elements for managing events in a calendar.

* pagecut  
  The core editor module, uses `prosemirror` to drive HTML wysiwyg editing.
  It also contains a simple rendering part used by core pageboard client.
npm package: @pageboard/datetime-entry
Description: Enter formatted date and time using native date api and without pickers
Latest version: 4.2.2

# DateTimeEntry

Enter formatted date and time without pickers.

This is the datetime-entry plugin from [datetime without jquery](https://ua9msn.github.io/datetime).

## Options

```js
const defaults = {
 datetime: NaN,
 locale:   navigator.language,
 format:   {
  hour12:  false,
  hour:    '2-digit',
  minute:  '2-digit',
  second:  '2-digit',
  weekday: 'long',
  year:    'numeric',
  month:   'long',
  day:     'numeric',
  timeZone: 'Europe/Paris'
 },
 useUTC:   true,
 minDate:  NaN,
 maxDate:  NaN,
 minTime:  NaN,
 maxTime:  NaN,
 step: NaN, // in seconds
 onChange: t => {}
};
```

If this browser does not support this, is falls back to UTC (if useUTC is true) or none,
which is the system timezone.

## Usage

```js
let inst = new window.DateTimeEntry(domElement, options);
```

## What is inside

Instead of create huge data file with day names, month names, etc. I use Intl inside.
So all languages supported by Intl, should be ready to use without any twitches.

## What's next

* Add ERA support
* Increase test coverage
* Optimize code
npm package: @pageboard/editor
Description: A simple "textarea" editor for pageboard.
Author: Jérémy Lal
Latest version: 0.17.3

A simple "textarea" editor for pageboard.

This editor has a frontend and a backend.

The frontend shows an editable textarea,
with a simple menu bar for inline styling, including anchors.

The backend ensures the submitted HTML string is in the right schema.

The same schema is used by the backend and the frontend.
npm package: @pageboard/elements-gallery
Description: The gallery element for pageboard.
Author: Jérémy Lal
Latest version: 0.5.18

# pageboard/elements-gallery

The gallery element for pageboard.

Provides:
- portfolio
- carousel
- mirroring between portfolio, carousel, and medialist (which should be provided
  by core elements).
- a menu to navigate between those three mirror elements
npm package: @pageboard/elements-google
Description: Elements exposing google services for pageboard
Author: Jérémy Lal
Latest version: 0.6.18

@pageboard/elements-google
==========================

- translate: a menu item with editable title showing the google icon and languages list
  on hover/focus.

- tag manager: https://developers.google.com/tag-manager/quickstart

- google-site-verification meta tag
npm package: @pageboard/elements-semantic-ui
Description: Elements can be defined in three parts:
Author: Jérémy Lal
Latest version: 0.5.19

# pageboard-elements

Elements can be defined in three parts:

- view, needed by pageboard-read to render blocks
- schema, needed by pageboard-write to edit attributes, and by pageboard-api to
  validate blocks
- edit, defines the specs of the rich text content and optionally a render
  function for edition.

It's up to pageboard-read and pageboard-write main files to load the files,
using either js files or html imports.

## everything in a single, requireable js file

Exports everything in a single file, accessible from
`public/elements/myname.js`

```
(function(exports) {
	exports.myname = {
		view: function(doc, block) {
			// do more than that of course
			return doc.createElement('div');
		},
		edit: function(doc, block) {
			// optional function
		},
		properties: {
			myprop: {
				type: 'string'
			}
		}
		specs: {
			mycontent: 'block+'
		}
	};
})(typeof exports != "undefined" ? exports : window.Pagecut.modules);
```


## multiple js files

Exports edit, view, schema from different files, accessible from
`public/elements/myname/view.js`
`public/elements/myname/edit.js`
`public/elements/myname/index.js` (defines the schema, must be requireable)

It is advised to test before assigning like this

```
(function(exports) {
	if (!exports.myname) exports.myname = {}; // test here
	exports.myname.properties = {
		myprop: {
			type: 'string'
		}
	};
})(typeof exports != "undefined" ? exports : window.Pagecut.modules);
```

view and edit files are not supposed to be requireable

```
(function(exports) {
	if (!exports.myname) exports.myname = {}; // test here
	exports.myname.view = function() {};//...
})(window.Pagecut.modules);
```


## multiple html imports

This layout is also supported:
`public/elements/myname/view.html`
`public/elements/myname/edit.html`
`public/elements/myname/index.js` (defines the schema, must be requireable)

Where view and edit load their assets as script (inline or not), link, or style
tags.
npm package: @pageboard/google
Description: Elements exposing google services for pageboard
Author: Jérémy Lal
Latest version: 0.17.0

@pageboard/elements-google
==========================

- translate: a menu item with editable title showing the google icon and languages list
  on hover/focus.

- tag manager: https://developers.google.com/tag-manager/quickstart

- google-site-verification meta tag
npm package: @pageboard/html
Description: Elements can be defined in three parts:
Author: Jérémy Lal
Latest version: 0.17.7

# pageboard-elements

Elements can be defined in three parts:

- view, needed by pageboard-read to render blocks
- schema, needed by pageboard-write to edit attributes, and by pageboard-api to
  validate blocks
- edit, defines the specs of the rich text content and optionally a render
  function for edition.

It's up to pageboard-read and pageboard-write main files to load the files,
using either js files or html imports.

## everything in a single, requireable js file

Exports everything in a single file, accessible from
`public/elements/myname.js`

```
(function(exports) {
	exports.myname = {
		view: function(doc, block) {
			// do more than that of course
			return doc.createElement('div');
		},
		edit: function(doc, block) {
			// optional function
		},
		properties: {
			myprop: {
				type: 'string'
			}
		}
		specs: {
			mycontent: 'block+'
		}
	};
})(typeof exports != "undefined" ? exports : window.Pagecut.modules);
```


## multiple js files

Exports edit, view, schema from different files, accessible from
`public/elements/myname/view.js`
`public/elements/myname/edit.js`
`public/elements/myname/index.js` (defines the schema, must be requireable)

It is advised to test before assigning like this

```
(function(exports) {
	if (!exports.myname) exports.myname = {}; // test here
	exports.myname.properties = {
		myprop: {
			type: 'string'
		}
	};
})(typeof exports != "undefined" ? exports : window.Pagecut.modules);
```

view and edit files are not supposed to be requireable

```
(function(exports) {
	if (!exports.myname) exports.myname = {}; // test here
	exports.myname.view = function() {};//...
})(window.Pagecut.modules);
```


## multiple html imports

This layout is also supported:
`public/elements/myname/view.html`
`public/elements/myname/edit.html`
`public/elements/myname/index.js` (defines the schema, must be requireable)

Where view and edit load their assets as script (inline or not), link, or style
tags.
npm package: @pageboard/statics
Description: pageboard-static ================
Author: Jérémy Lal
Latest version: 0.2.1

pageboard-static
================

Install and mount directories under three paths:

- /.pageboard/<directory>
mapped to <runtime>/pageboard/...
- /.files/<module>/<directory>
mapped to <runtime>/files/<siteid>/...
- /.uploads
mapped to <runtime>/uploads/<siteid>/...


API
---

`All.statics.install({domain, mounts})`

A mount is an object like:
```
{
  from: "some/path/dir",
  to: "


Example site object
-------------------

```
site: {
	data: {
		"dependencies": {
			pageboard-elements: "^1.0",
			pageboard-custom-site: "kapouer/pageboard-custom-site#1.0"
		},
	}
}
```

Each dependency can add directories by setting a "pageboard.directories" list
of relative paths in its package.json.
npm package: @pagecall/react
Description: Integrate Pagecall with your react app
Latest version: 0.0.2-dev1

# Integrate Pagecall for your React Application

## Usages

### [Example](/src/Pagecall.stories.tsx)

## API References

You can learn how to obtain a roomId and manage resources related to Pagecall.

https://docs.pagecall.com/

## Development

```bash
yarn # Install dependencies
yarn dev # Run storybook
```

## Publish

```bash
yarn build
npm publish
```
npm package: @pagecall/react-native-webview
Description: A React Native module that provides a simple WebView component to integrate Pagecall
Author: Ryan Park
Latest version: 0.1.0

# @pagecall/react-native-webview

A React Native module that provides a simple WebView component to integrate Pagecall's audio feature into your application. Note that video feature is not supported yet.

## Installation

```sh
npm install @pagecall/react-native-webview
```

or 

```sh
yarn add @pagecall/react-native-webview
```

## Usage

```jsx
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { PagecallWebView } from '@pagecall/react-native-webview';

export default function App() {
  return (
    <View style={styles.container}>
      <PagecallWebView
        color="#32a852"
        style={styles.box}
        uri="https://app.pagecall.com/meet?room_id={room_id}&access_token={access_token}"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    width: '100%',
    height: '100%',
  },
});

```

## Android setup

To use this module in an Android project, you need to add the dependency of `pagecall-android-sdk` manually:  

In your android/app/build.gradle file, add the following:  

```groovy
allprojects {
    repositories {
        maven {
            url 'https://maven.pkg.github.com/pagecall/pagecall-android-sdk'
            credentials {
                username = project.findProperty("GITHUB_USERNAME") ?: System.getenv("GITHUB_USERNAME")
                password = project.findProperty("GITHUB_TOKEN") ?: System.getenv("GITHUB_TOKEN")
            }
        }
    }
}

dependencies {
    ...
    implementation 'com.pagecall:pagecall-android-sdk:0.0.1'
}

```

Ensure that you have a valid GitHub username and personal access token configured in your environment variables or project properties.
npm package: @pagedao/core
Description: Core library for PageDAO Hub with blockchain connections and price calculations
Author: PageDAO
Latest version: 0.3.3

# @pagedao/core

Core library for PageDAO Hub with blockchain connections and price calculations.

## Features

- Blockchain connections to Ethereum, Optimism, Base, and Osmosis
- Price calculation for PAGE token across all networks
- TVL calculation and weight distribution
- Caching mechanisms for efficient data retrieval

## Installation

```bash
npm install @pagedao/core
# or
yarn add @pagedao/core
```

## Usage

```typescript
import { fetchPagePrices, fetchAllTVL, calculateTVLWeights } from '@pagedao/core';

// Get PAGE token prices across all networks
const prices = await fetchPagePrices();
console.log(prices);

// Get TVL data
const tvlData = await fetchAllTVL(prices);
console.log(tvlData);

// Calculate weights based on TVL
const weights = calculateTVLWeights(tvlData);
console.log(weights);
```

## API Reference

### Price Service

#### `fetchPagePrices(): Promise<PriceData>`

Fetches PAGE token prices from all supported chains.

```typescript
interface PriceData {
  ethereum: number;
  optimism: number;
  base: number;
  osmosis: number;
  ethPrice: number;
  timestamp: number;
}
```

#### `fetchEthPrice(): Promise<number>`

Fetches the current ETH price in USD from a Uniswap V3 pool.

### TVL Service

#### `fetchAllTVL(priceData: PriceData): Promise<TvlData>`

Fetches Total Value Locked (TVL) for all networks.

```typescript
interface TvlData {
  ethereum: number;
  optimism: number;
  base: number;
  osmosis: number;
  timestamp: number;
}
```

#### `calculateTVLWeights(tvlData: TvlData): TvlWeights`

Calculates the weight distribution based on TVL across networks.

```typescript
interface TvlWeights {
  ethereum: number;
  optimism: number;
  base: number;
  osmosis: number;
}
```

## License

MIT
npm package: @pagedotapp/essentials
Description: Essential UI components bundle
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/essentials

Essential UI components bundle

## Installation

```bash
npm install @pagedotapp/essentials
```

## Included Components

This bundle includes the following components:

- @pagedotapp/page-button
- @pagedotapp/page-card
- @pagedotapp/page-checkbox
- @pagedotapp/page-icon
- @pagedotapp/page-image
- @pagedotapp/page-input
- @pagedotapp/page-loader
- @pagedotapp/page-switch
- @pagedotapp/page-text
- @pagedotapp/page-textarea

## Usage

Import components from the bundle:

```tsx
import {
	PageButton,
	PageInput,
	PageCard,
	PageText,
	PageImage,
	// ... other components
} from "@pagedotapp/essentials"

function App() {
	return (
		<PageCard>
			<PageImage src="/logo.png" alt="Logo" width={200} height={100} />
			<PageText as="h1" variant="primary">
				Welcome
			</PageText>
			<PageInput placeholder="Enter text..." />
			<PageButton variant="primary">Submit</PageButton>
		</PageCard>
	)
}
```

## Why Use This Bundle?

- **Single dependency**: Install once, use multiple components
- **Consistent versions**: All components work well together
- **Smaller install**: Shared dependencies are deduplicated
- **Tree-shakable**: Only the components you use are included in your application

## Individual Component Docs

For detailed documentation on each component, see their individual packages:

- [@pagedotapp/page-button](https://www.npmjs.com/package/@pagedotapp/page-button)
- [@pagedotapp/page-card](https://www.npmjs.com/package/@pagedotapp/page-card)
- [@pagedotapp/page-checkbox](https://www.npmjs.com/package/@pagedotapp/page-checkbox)
- [@pagedotapp/page-icon](https://www.npmjs.com/package/@pagedotapp/page-icon)
- [@pagedotapp/page-image](https://www.npmjs.com/package/@pagedotapp/page-image)
- [@pagedotapp/page-input](https://www.npmjs.com/package/@pagedotapp/page-input)
- [@pagedotapp/page-loader](https://www.npmjs.com/package/@pagedotapp/page-loader)
- [@pagedotapp/page-switch](https://www.npmjs.com/package/@pagedotapp/page-switch)
- [@pagedotapp/page-text](https://www.npmjs.com/package/@pagedotapp/page-text)
- [@pagedotapp/page-textarea](https://www.npmjs.com/package/@pagedotapp/page-textarea)

## License

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

# PageAccordion

A reusable accordion component for React applications.

## Installation

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

## Usage

```tsx
import { PageAccordion } from "@pagedotapp/page-accordion"

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

## 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
<PageAccordion variant="default">Default</PageAccordion>
<PageAccordion variant="primary">Primary</PageAccordion>
<PageAccordion variant="secondary">Secondary</PageAccordion>
```

### Sizes

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

### States

```tsx
<PageAccordion disabled>Disabled</PageAccordion>
```

## 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-avatar
Description: PageAvatar - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/page-avatar

An avatar component with image support and fallback

## Installation

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

## Usage

```tsx
import { PageAvatar } from "@pagedotapp/page-avatar"

function App() {
	return <PageAvatar src="/avatar.jpg" alt="User" fallback="JD" />
}
```

## 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-avatar: ^1.1.10

## License

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

# PageAvatarSelect

A reusable avatarselect component for React applications.

## Installation

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

## Usage

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

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

## 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
<PageAvatarSelect variant="default">Default</PageAvatarSelect>
<PageAvatarSelect variant="primary">Primary</PageAvatarSelect>
<PageAvatarSelect variant="secondary">Secondary</PageAvatarSelect>
```

### Sizes

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

### States

```tsx
<PageAvatarSelect disabled>Disabled</PageAvatarSelect>
```

## 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-banner
Description: PageBanner - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# PageBanner

A reusable banner component for React applications.

## Installation

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

## Usage

```tsx
import { PageBanner } from "@pagedotapp/page-banner"

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

## 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
<PageBanner variant="default">Default</PageBanner>
<PageBanner variant="primary">Primary</PageBanner>
<PageBanner variant="secondary">Secondary</PageBanner>
```

### Sizes

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

### States

```tsx
<PageBanner disabled>Disabled</PageBanner>
```

## 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-banner-select
Description: PageBannerSelect - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# PageBannerSelect

A reusable bannerselect component for React applications.

## Installation

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

## Usage

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

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

## 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
<PageBannerSelect variant="default">Default</PageBannerSelect>
<PageBannerSelect variant="primary">Primary</PageBannerSelect>
<PageBannerSelect variant="secondary">Secondary</PageBannerSelect>
```

### Sizes

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

### States

```tsx
<PageBannerSelect disabled>Disabled</PageBannerSelect>
```

## 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-bottom-sheet
Description: PageBottomSheet - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-bottom-sheet

A mobile-friendly bottom sheet component

## Installation

```bash
npm install @pagedotapp/page-bottom-sheet
```

## Usage

```tsx
import { PageBottomSheet } from "@pagedotapp/page-bottom-sheet"

function App() {
	return (
		<PageBottomSheet
			isOpen={isOpen}
			onClose={() => setIsOpen(false)}
			title="Bottom Sheet"
		>
			<p>Sheet content goes here</p>
		</PageBottomSheet>
	)
}
```

## 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
- @pagedotapp/page-button: ^0.1.0-alpha.0
- @use-gesture/react: ^10.3.1

## License

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

# @pagedotapp/page-card

A flexible card container component

## Installation

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

## Usage

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

function App() {
	return (
		<PageCard>
			<h3>Card Title</h3>
			<p>Card content goes here</p>
		</PageCard>
	)
}
```

## Props

| Prop        | Type                  | Default | Description               |
| ----------- | --------------------- | ------- | ------------------------- |
| `children`  | `React.ReactNode`     | -       | Card content              |
| `className` | `string`              | `""`    | Additional CSS class name |
| `style`     | `React.CSSProperties` | -       | Inline styles             |

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.

### Custom Styling

You can customize the appearance using the `className` prop to add custom CSS classes or the `style` prop for inline styles:

```tsx
// Using className
<PageCard className="custom-card">
  Content
</PageCard>

// Using inline styles
<PageCard style={{ backgroundColor: '#f0f8ff', padding: '20px' }}>
  Content
</PageCard>

// Combining both
<PageCard
  className="custom-card"
  style={{ transform: 'scale(1.05)' }}
>
  Content
</PageCard>
```

## Dependencies

### Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0

## License

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

# PageCarousel

A reusable carousel component for React applications.

## Installation

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

## Usage

```tsx
import { PageCarousel } from "@pagedotapp/page-carousel"

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

## 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
<PageCarousel variant="default">Default</PageCarousel>
<PageCarousel variant="primary">Primary</PageCarousel>
<PageCarousel variant="secondary">Secondary</PageCarousel>
```

### Sizes

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

### States

```tsx
<PageCarousel disabled>Disabled</PageCarousel>
```

## 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-checkbox
Description: PageCheckbox - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/page-checkbox

A checkbox component with indeterminate state support

## Installation

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

## Usage

```tsx
import { PageCheckbox } from "@pagedotapp/page-checkbox"

function App() {
	return (
		<PageCheckbox
			checked={isChecked}
			onCheckedChange={setIsChecked}
			label="Accept terms"
		/>
	)
}
```

## 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-checkbox: ^1.3.2
- @pagedotapp/page-icon: ^0.1.0-alpha.0

## License

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

# PageContactFormSection

A reusable contactformsection component for React applications.

## Installation

```bash
npm install @pagedotapp/page-contact-form-section
```

## Usage

```tsx
import { PageContactFormSection } from "@pagedotapp/page-contact-form-section"

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

## 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
<PageContactFormSection variant="default">Default</PageContactFormSection>
<PageContactFormSection variant="primary">Primary</PageContactFormSection>
<PageContactFormSection variant="secondary">Secondary</PageContactFormSection>
```

### Sizes

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

### States

```tsx
<PageContactFormSection disabled>Disabled</PageContactFormSection>
```

## 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-data-card
Description: PageDataCard - A reusable React component
Author: PageStudio
Latest version: 0.0.0-alpha.14

# PageDataCard

A reusable datacard component for React applications.

## Installation

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

## Usage

```tsx
import { PageDataCard } from "@pagedotapp/page-data-card"

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

## 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
<PageDataCard variant="default">Default</PageDataCard>
<PageDataCard variant="primary">Primary</PageDataCard>
<PageDataCard variant="secondary">Secondary</PageDataCard>
```

### Sizes

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

### States

```tsx
<PageDataCard disabled>Disabled</PageDataCard>
```

## 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-db-write
Description: Database write component with Relay GraphQL mutation support
Author: PageStudio
Latest version: 0.0.0-alpha.14

# @pagedotapp/page-db-write

Database write component with Relay GraphQL mutation support

## Installation

```bash
npm install @pagedotapp/page-db-write
```

## Usage

```tsx
import { PageDbWrite } from "@pagedotapp/page-db-write"

function App() {
	return (
		<PageDbWrite
			onSuccess={(record) => console.log("Added:", record)}
			onError={(error) => console.error("Failed:", error)}
		/>
	)
}
```

## Props

| Prop        | Type                     | Default | Description                       |
| ----------- | ------------------------ | ------- | --------------------------------- |
| `className` | `string`                 | `''`    | Additional CSS class name         |
| `onSuccess` | `(record: any) => void`  | -       | Callback when write is successful |
| `onError`   | `(error: Error) => void` | -       | Callback when write fails         |

## Features

- **Relay Integration**: Uses Relay mutations for database operations
- **Form Validation**: Prevents submission of empty values
- **Loading States**: Shows loading state during mutation
- **Error Handling**: Built-in error handling with optional callback
- **Success Callback**: Notifies when record is successfully added
- **Auto-clear**: Input clears after successful submission

## GraphQL Mutation

The component uses the following GraphQL mutation (exported as `PageDbWriteMutation`):

```graphql
mutation PageDbWriteMutation($input: demoInsertInput!) {
	insertIntodemoCollection(objects: [$input]) {
		affectedCount
		records {
			id
			created_at
			text
		}
	}
}
```

## Relay Configuration

For use in your app, ensure you have Relay configured and copy the mutation to your local queries:

```typescript
// src/queries/PageDbWriteMutation.ts
import { graphql } from "react-relay"

export const PageDbWriteMutation = graphql`
	mutation PageDbWriteMutation($input: demoInsertInput!) {
		insertIntodemoCollection(objects: [$input]) {
			affectedCount
			records {
				id
				created_at
				text
			}
		}
	}
`
```

## Examples

### Basic Usage

```tsx
<PageDbWrite />
```

### With Success Handler

```tsx
<PageDbWrite
	onSuccess={(record) => {
		toast.success(`Record ${record.id} added successfully!`)
	}}
/>
```

### With Error Handler

```tsx
<PageDbWrite
	onError={(error) => {
		toast.error(`Failed to add record: ${error.message}`)
	}}
/>
```

### With Custom Styling

```tsx
<PageDbWrite className="my-custom-db-write" />
```

## 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:

- `.dbWrite` - Main container
- `.form` - Form element
- `.inputGroup` - Input and button container
- `.input` - Text input field
- `.button` - Submit button

## License

MIT © PageStudio