open-index/open-npm huggingface dataset:
npm package: @inkcloud/swift-object-storage
Description: ## Installation `npm install` or `yarn install`
Latest version: 1.0.2

# Swift Object Storage

## Installation
`npm install` or `yarn install`


## Example Usage
```javascript
const config = {
  objectStorageUrl: objectStorageUrl: 'https://dal05.objectstorage.softlayer.net/auth/v1.0/'
	user: 'username';
	key: 'key';

}
const client = new SwiftObjectStorage(config);

// Get remote file and store locally
client.getObjectWriteToStream(
  fs.createWriteStream('my-local-file.pdf'),
  'some-container'
  'remote-filepdf'
)
  .then() => console.log('done');
```

### Inject `onResponse` callback.

You can optionally pass an `onResponse` callback and it will be passed to Request's `.on('response')`. This is useful for when you need access to the response context

```javascript
client.getObjectWriteToStream(
  fs.createWriteStream('my-local-file.pdf'),
  'some-container'
  'remote-filepdf',
  {
    onResponse: (resp) => console.log('Response', resp);
  }
)
  .then() => console.log('done');
```
npm package: @inkd/agentkit
Description: Coinbase AgentKit action provider for inkd Protocol — register code on-chain from any AI agent
Author: inkd Protocol
Latest version: 0.1.4

# @inkd/agentkit

[![npm](https://img.shields.io/npm/v/@inkd/agentkit?color=blue&logo=npm)](https://www.npmjs.com/package/@inkd/agentkit)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../LICENSE)

Coinbase AgentKit plugin for [inkd Protocol](https://inkdprotocol.com). Lets any AgentKit-powered AI agent store files permanently on Arweave, own them on-chain, and discover other agents.

---

## Install

```bash
npm install @inkd/agentkit @coinbase/agentkit
```

---

## Usage

```typescript
import { AgentKit } from '@coinbase/agentkit'
import { InkdActionProvider } from '@inkd/agentkit'

const agentkit = await AgentKit.from({
  cdpApiKeyName:       process.env.CDP_KEY_NAME,
  cdpApiKeyPrivateKey: process.env.CDP_KEY_PRIVATE,
  actionProviders: [
    new InkdActionProvider(),
  ],
})
```

The agent can now use natural language:

> "Register my tool on inkd as 'price-oracle' under MIT license"

> "Push version v1.2.0 to project #5"

> "List all registered AI agents on inkd"

---

## Actions

| Action | What it does | Cost |
|---|---|---|
| `inkd_create_project` | Register a project on-chain. Wallet = owner. | $0.10 USDC |
| `inkd_push_version` | Upload file to Arweave + register version on Base | Arweave cost + 20% |
| `inkd_get_project` | Get project details and latest version | Free |
| `inkd_list_agents` | Discover all registered AI agents | Free |

Write actions use [x402](https://x402.org) — the agent's wallet pays automatically in USDC.

---

## How payment works

1. Agent calls `inkd_create_project`
2. API returns HTTP 402 with payment details
3. Agent's wallet auto-signs a USDC `transferWithAuthorization` via x402
4. inkd registers the project on Base
5. Transaction hash + project ID returned

No manual approvals. No gas estimation. The agent handles everything.

---

## Links

- [inkd Protocol](https://inkdprotocol.com)
- [x402](https://x402.org)
- [AgentKit Docs](https://docs.cdp.coinbase.com/agentkit)
- [Registry](https://basescan.org/address/0xEd3067dDa601f19A5737babE7Dd3AbfD4a783e5d)
npm package: @inkd/mcp
Description: Model Context Protocol server for inkd Protocol
Latest version: 0.1.3

# @inkd/mcp

Model Context Protocol (MCP) server for [inkd Protocol](https://inkdprotocol.com).

Gives Claude, Cursor, and any MCP-compatible LLM **native inkd tools** — register code on-chain, push version updates, discover agents — directly from your AI assistant.

---

## Install & Setup

### Claude Desktop

Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "inkd": {
      "command": "npx",
      "args": ["@inkd/mcp"],
      "env": {
        "INKD_PRIVATE_KEY": "0x..."
      }
    }
  }
}
```

Restart Claude Desktop. You'll see inkd tools available.

### Cursor

Add to `.cursor/mcp.json` in your project:

```json
{
  "mcpServers": {
    "inkd": {
      "command": "npx",
      "args": ["@inkd/mcp"],
      "env": {
        "INKD_PRIVATE_KEY": "0x..."
      }
    }
  }
}
```

### CLI

```bash
INKD_PRIVATE_KEY=0x... npx @inkd/mcp
```

---

## Available Tools

| Tool | Description | Cost |
|------|-------------|------|
| `inkd_create_project` | Register a project on-chain | USDC via x402 |
| `inkd_push_version` | Push a version with content hash | USDC via x402 |
| `inkd_get_project` | Get project details by ID | Free |
| `inkd_get_versions` | List all versions of a project | Free |
| `inkd_list_agents` | Discover registered AI agents | Free |

---

## Example Usage in Claude

Once configured, you can say:

> "Register this project on inkd as 'my-claude-tool' with MIT license"

> "Push the current build to inkd project #5 as version v1.2.0, content hash ar://QmXyz"

> "Show me all AI agents registered on inkd"

> "What versions does inkd project #3 have?"

Claude handles the rest — payment, signing, on-chain registration.

---

## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `INKD_PRIVATE_KEY` | For writes | Wallet private key (0x-prefixed) |
| `INKD_API_URL` | No | Custom API URL (default: https://api.inkdprotocol.com) |
| `INKD_NETWORK` | No | `mainnet` or `testnet` (default: mainnet) |

**Read-only mode:** Start without `INKD_PRIVATE_KEY` to use only free read tools.

---

## How Payments Work

Write tools use [x402](https://x402.org) — your wallet pays automatically:

```
Claude calls inkd_create_project
    ↓
@inkd/mcp sends POST /v1/projects
    ↓
Server returns HTTP 402 + payment details
    ↓
@x402/fetch signs payment with INKD_PRIVATE_KEY
    ↓
Coinbase facilitator verifies
    ↓
inkd Registry called on Base
    ↓
Project registered, txHash returned to Claude
```

No manual signing. No pop-ups. Your key, automatic.
npm package: @inkdes-email/a
Description: A React email seperator component to wrap emails (InkDes Mailer)
Latest version: 0.1.7

# @inkdes-email/a

Anchor for email components
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/a

# npm
npm install @inkdes-email/a

# yarn
yarn add @inkdes-email/a
```

## Quick start

```tsx
import { A } from "@inkdes-email/a";

export default function EmailTemplate() {
  return <>
      <A href='#' color='blue'>Docs</A>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | any | No |  |  |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction for the wrapper cell                |
| color | string | No |  | Hex color |
| noDecoration | boolean | No | false |  |
| style | React.CSSProperties | No | |  |
| rel | string | No |'noopener noreferrer' |  |
| spacing | string               | No       | - | Spacing bottom, and the anchor tag will be a block component if set |


## License

MIT © iClasser
npm package: @inkdes-email/badge
Description: A React email badge component to wrap emails (InkDes Mailer)
Latest version: 0.1.3

# @inkdes-email/badge

Badge component for email.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>
## Installation

```bash
# pnpm
pnpm add @inkdes-email/badge

# npm
npm install @inkdes-email/badge

# yarn
yarn add @inkdes-email/badge
```

## Quick start

```tsx
import { Badge } from "@inkdes-email/badge";

export default function EmailTemplate() {
  return <>
      <Badge varient='default'>
        <span>Text</span>
     </Badge>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | string | Yes      | —       | - |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction for the wrapper cell                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| varient | string | No | `default` | — |
| padding | string | No | `6px 8px` | inside padding |
| noPadding | boolean | No | false | — |


## License

MIT © iClasser
npm package: @inkdes-email/body
Description: A React email head component to wrap emails (InkDes Mailer)
Latest version: 0.2.9

# @inkdes-email/body

Body wrapper for your email layout.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/body

# npm
npm install @inkdes-email/body

# yarn
yarn add @inkdes-email/body
```

## Quick start

```tsx
import { Body } from "@inkdes-email/body";

export default function EmailTemplate() {
  return <Body>
    <title>Some title</title>
  </Body>;
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| background | string | Yes | — | — |
| backgroundColor | string | Yes | — | — |
| backgroundImageUrl | string | No | - | - |
| style | React.CSSProperties | No | - | - |
| width | number or "100%" | No | — | width of container |
| padding | string | No | `12px 20px` | inner padding |
| outerBgColor | string | No | — | When whidth is not `100%` and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside |
| borderRadius | string | No |  |  |
| footer | React.ReactNode | No |  |  |
| footerWidth | number or "100%" | No | — | width of footer |
| footerPadding | string | No | `0px 20p` | footer padding |
| footerOuterBgColor | string | No | — | |
| footerBackgroundColor | string | No | — | |
| footerStyle | React.CSSProperties | No | - | - |
| backgroundPosition | string | no | "bottom" |  when there is background image url this is css property for position |
| backgroundRepeat | string | no | "no-repeat, no-repeat" | when there is background image url this is css property for repeat |
| bgImageTakesAllWrappers | string | no | false | when there is background image url takes all if width is not 100%, but with 100% it already takes all  |
| borderWidth | number | No | — | border width |
| borderColor | string | No | — | Border will work if border width is greater than 0 |

All other standard attributes for the `<body>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/body-contents
Description: A React email body content component to wrap emails (InkDes Mailer)
Latest version: 0.2.10

# @inkdes-email/body-contents

Wrapper for your email layout.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/body-contents

# npm
npm install @inkdes-email/body-contents

# yarn
yarn add @inkdes-email/body-contents
```

## Quick start

```tsx
import { BodyContent } from "@inkdes-email/body-contents";

export default function EmailTemplate() {
  return <>
      <BodyContent>
          <title>Header</title>
      </BodyContent>

      <BodyContent>
          <title>Body</title>
      </BodyContent>

      <BodyContent>
          <title>Footer</title>
      </BodyContent>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| background | string | Yes | — | — |
| backgroundColor | string | Yes | — | — |
| style | React.CSSProperties | No | - | - |
| width | number or "100%" | No | — | width of container |
| padding | string | No | `12px 20px` | inner padding |
| outerBgColor | string | No | — | When whidth is not `100%` and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside |
| borderRadius | string | No |  |  |
| className | string | no | — | — |
| backgroundPosition | string | no | "bottom" |  when there is background image url this is css property for position |
| backgroundRepeat | string | no | "no-repeat, no-repeat" | when there is background image url this is css property for repeat |
| bgImageTakesAllWrappers | string | no | false | when there is background image url takes all if width is not 100%, but with 100% it already takes all  |
| borderWidth | number | No | — | border width |
| borderColor | string | No | — | Border will work if border width is greater than 0 |


## License

MIT © iClasser
npm package: @inkdes-email/box
Description: A React email body content component to wrap emails (InkDes Mailer)
Latest version: 0.1.5

# @inkdes-email/box

Wrapper Box component for your email layout.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/box

# npm
npm install @inkdes-email/box

# yarn
yarn add @inkdes-email/box
```

## Quick start

```tsx
import { Box } from "@inkdes-email/box";

export default function EmailTemplate() {
  return <>
      <Box 
        width='120px' 
        padding='10px 16px'
        center 
        borderRadius='10px'
        backgroundColor='#fff' 
        spacing='20px'
        backgroundImageUrl='https://example.com/image.png'
        >
          <Text>
      </Box>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| backgroundColor | string | Yes | — | — |
| style | React.CSSProperties | No | - | - |
| width | number or "100%" | No | — | width of container |
| padding | string | No | `10px 16px` | inner padding |
| className | string | no | — | — |
| borderRadius | string | No |  |  |
| backgroundImageUrl | string | no | | Box background image |
| backgroundPosition | string | no | "bottom" |  when there is background image url this is css property for position |
| backgroundRepeat | string | no | "no-repeat, no-repeat" | when there is background image url this is css property for repeat |
| itemCenter | boolean | no | true | Inner items will be aligned center |
| center | boolean | no |  true | The box will be positioned center of email |
| borderWidth | number | No | — | border width |
| borderColor | string | No | — | Border will work if border width is greater than 0 |


## License

MIT © iClasser
npm package: @inkdes-email/button
Description: Display a button in your email (InkDes Mailer)
Latest version: 0.2.11

# @inkdes-email/button
Button component for email.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>


## Installation

```bash
# pnpm
pnpm add @inkdes-email/button

# npm
npm install @inkdes-email/button

# yarn
yarn add @inkdes-email/button
```

## Quick start

```tsx
import { Button } from "@inkdes-email/button";

<Button
 text='Submit'
 href='https://example.com'
 backgroundColor='#000'
 textColor='#ffff'
 borderRadius='20px'
 style={{
  paddingBottom: '20px'
 }}
/>
```

## Props

| Name         | Type                 | Required | Default | Description                                        |
| ------------ | -------------------- | -------- | ------- | -------------------------------------------------- |
| src          | string               | Yes      | ""      | Path or URL to the image                           |
| text          | string               | Yes       | ""      |                |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| href          | string               | Yes       | ""      |                |
| icon          | object               | No       |       |   { url, alt, width, height }             |
| backgroundColor          | string               | Yes       | ""      |                |
| align          | string               | No       | "center"      |                |
| direction          | string               | No       | "ltr"      |                |
| textColor          | string               | No       |       |   css color hex             |
| borderRadius          | string               | No       |       |              |
| style          | string               | No       |       |  CSS style            |
| borderWidth          | string               | No       |       |  CSS border width            |
| borderColor          | string               | No       |       |  CSS border color            |


## License

MIT © iClasser
npm package: @inkdes-email/card
Description: A React email card component to wrap emails (InkDes Mailer)
Latest version: 0.1.6

# @inkdes-email/card

Card component for email.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/card

# npm
npm install @inkdes-email/card

# yarn
yarn add @inkdes-email/card
```

## Quick start

```tsx
import { Text } from "@inkdes-email/components";
import { Card } from "@inkdes-email/card";

export default function EmailTemplate() {
  return <>
      <Card 
        header={<Text>Some header</Text>}
        content={<Text>Some content</Text>}
        footer={<Text>Some footer</Text>}
        headerBackgroundColor='#fff'
        contentBackgroundColor='#fff'
        footerBackgroundColor='#fff'
        borderRadius='24px' 
        padding='12px 15px'
        width='100%'
        spacing='20px' 
     />
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| header | React.ReactNode | No      | —       |  |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| content | React.ReactNode | No      | —       |  |
| footer | React.ReactNode | No      | —       |  |
| headerBackgroundColor | string | No | #fff | — |
| contentBackgroundColor | string | No | #fff | — |
| footerBackgroundColor | string | No | #fff | — |
| borderRadius | string | No | `24px` | — |
| padding | string | No | `` | inner padding |
| width | string | No | `100%` |  |
| headerCenter | boolean | No | undefined |  |
| contentCenter | boolean | No | undefined |  |
| footerCenter | boolean | No | undefined |  |


## License

MIT © iClasser
npm package: @inkdes-email/css
Description: A React email css component to to style your email (InkDes Mailer)
Latest version: 0.1.1

# @inkdes-email/css

Css component used inside <Head> tag.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/css

# npm
npm install @inkdes-email/css

# yarn
yarn add @inkdes-email/css
```

## Quick start

```tsx
import { Html, Head } from "@inkdes-email/components";
import { Css } from "@inkdes-email/css";
// Can also be imported from "@inkdes-email/components"
// import { Css } from "@inkdes-email/components";

export default function EmailTemplate() {
  return <Html>
  <Head>
    <Css 
      selector={['body', '.inkdes-table']} 
      style={{ fontSize: '12px', lineHeight: '24px', color: '#000' }}
      />
  <Head>
</Html>
}
```

## Props

| Name     | Type                   | Required | Default | Description                         |
| -------- | ---------------------- | -------- | ------- | ----------------------------------- |
| children | React.ReactNode        | Yes      | —       | Content of the email document       |
| style | React.CSSProperties        | Yes      | —       | -       |
| selector | Array of strings of css selectors        | No      | —       |        |

All other standard Head attributes for the `<css>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/font
Description: A React email font component to to style your email (InkDes Mailer)
Latest version: 0.3.1

# @inkdes-email/font

Font component used inside <Head> tag.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/font

# npm
npm install @inkdes-email/font

# yarn
yarn add @inkdes-email/font
```

## Quick start

```tsx
import { Font } from "@inkdes-email/font";

export default function EmailTemplate() {
  return <Font 
            family='Inter'
            url='https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2'
            type='woff2'
            fallback='Arial'
            style='normal'
            weight='400'
            targetSelectors={['body', '.class1']}
          />
}
```

## Props

| Name     | Type                   | Required | Default | Description                         |
| -------- | ---------------------- | -------- | ------- | ----------------------------------- |
| children | React.ReactNode        | Yes      | —       | Content of the email document       |
| family | String        | Yes      | —       | -       |
| url | String        | Yes      | —       | -       |
| type | String        | Yes      | —       | "woff2" or "woff"       |
| style | String        | Yes      | —       | -       |
| weigth | String        | Yes      | —       | 400       |
| targetSelectors | Array of css selector strings        | No      | —       |        |

All other standard Head attributes for the `<head>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/get-html
Description: A React email helper to get the HTML of a React email component (InkDes Mailer)
Latest version: 0.2.8

### @inkdes-email/get-html

Helper function to convert Email components to text only.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/get-html

# npm
npm install @inkdes-email/get-html

# yarn
yarn add @inkdes-email/get-html
```

- Signature: `(EmailTemplate: any) => {html: string | null, error: Error | null}`
- Description: Renders a valid React element to a static HTML string using `renderToStaticMarkup`. Returns `{ html, error: null }` on success or `{ html: null, error }` on failure. Validates input with `React.isValidElement`.
- Example:

```tsx
import { getHtml } from "@inkdes-email/get-html";
import { Html, Head, Body, Text, Button } from "@inkdes-emailcomponents";

function EmailTemplate() {
  return (<Html>
    <Body>
        <Text>Hello</Text>
        <Button text='Button' url='#' />
    </Body>
  </Html>)
}

const { html, error } = getHtml(<EmailTemplate />);
if (error) {
  // handle error
} else if (html) {
  // use html
}
```

- Requirements:
  - Node >= 18
  - React 18 or 19
npm package: @inkdes-email/get-text
Description: A React email helper to get the text only of a React email component (InkDes Mailer)
Latest version: 0.1.1

### @inkdes-email/get-text

Helper function to convert Email components to text only.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/get-text

# npm
npm install @inkdes-email/get-text

# yarn
yarn add @inkdes-email/get-text
```

- Signature: `(EmailTemplate: any) => {text: string | null, error: Error | null}`
- Description: Renders a valid React element to a static text string using `renderToStaticMarkup`. Returns `{ text, error: null }` on success or `{ text: null, error }` on failure. Validates input with `React.isValidElement`.
- Example:

```tsx
import { getText } from "@inkdes-email/get-text";
import { Html, Head, Body, Text, Button } from "@inkdes-emailcomponents";

function EmailTemplate() {
  return (<Html>
    <Body>
        <Text>Hello</Text>
        <Button text='Button' url='#' />
    </Body>
  </Html>)
}

const { text, error } = getText(<EmailTemplate />);
if (error) {
  // handle error
} else if (text) {
  // use text
}
```

- Requirements:
  - Node >= 18
  - React 18 or 19
npm package: @inkdes-email/head
Description: A React email head component to wrap emails (InkDes Mailer)
Latest version: 0.2.4

# @inkdes-email/head

Head wrapper for your email documents.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>


## Installation

```bash
# pnpm
pnpm add  @inkdes-email/head

# npm
npm install  @inkdes-email/head

# yarn
yarn add  @inkdes-email/head
```

## Quick start

```tsx
import { Head } from " @inkdes-email/head";

export default function EmailTemplate() {
  return <Head>
    <title>Some title</title>
  </Head>;
}
```

## Props

| Name     | Type                   | Required | Default | Description                         |
| -------- | ---------------------- | -------- | ------- | ----------------------------------- |
| children | React.ReactNode        | Yes      | —       | Content of the email document       |
| title | React.ReactNode        | No      | —       | Title       |
| defaultCss | string        | No      | Pre-written CSS for email       | You can replace this with your own css       |


All other standard Head attributes for the `<head>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/hr
Description: A React email seperator component to wrap emails (InkDes Mailer)
Latest version: 0.1.4

# @inkdes-email/hr

Sperator component for email
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/hr

# npm
npm install @inkdes-email/hr

# yarn
yarn add @inkdes-email/hr
```

## Quick start

```tsx
import { Hr } from "@inkdes-email/hr";

export default function EmailTemplate() {
  return <>
      <Hr />
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| color | string | No | `#e5e5e5` |  |
| width | string | No | `100%` | width of seperator |
| align | string | No | `center` | If width is less than 100% then alignment becomes important |
| style | React.CSSProperties | No |  |  |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| height | number | No | `1` |  |

## License

MIT © iClasser
npm package: @inkdes-email/html
Description: A React email html component to wrap emails (InkDes Mailer)
Latest version: 0.4.3

# @inkdes-email/html

HTML root wrapper for your email documents.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/html

# npm
npm install @inkdes-email/html

# yarn
yarn add @inkdes-email/html
```

## Quick start

```tsx
import { Html } from "@inkdes-email/html";

export default function Email() {
  return <Html>Hello</Html>;
}
```

## Props

| Name     | Type                   | Required | Default | Description                         |
| -------- | ---------------------- | -------- | ------- | ----------------------------------- |
| children | any        | Yes      | —       | Content of the email document       |
| dir      | "ltr" \| "rtl"          | No       | "ltr"   | Text direction for the document, it will affect all components     |
| lang     | string                 | No       | "en"    | Language of the document            |
| defaultSpacing     | string one value in css    | No       | "20px"    | This will set the whole email default spacing (padding bottom defaults)            |

All other standard HTML attributes for the `<html>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/img
Description: Display an image in your email (InkDes Mailer)
Latest version: 0.2.9

# @inkdes-email/img
Image component for email.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>

## Installation

```bash
# pnpm
pnpm add @inkdes-email/img

# npm
npm install @inkdes-email/img

# yarn
yarn add @inkdes-email/img
```

## Quick start

```tsx
import { Img } from "@inkdes-email/img";

export default function Email() {
  return <Img src="cat.jpg" alt="Cat" width={300} height={300} />;
}
```

## Alignment & styling

```tsx
<Img
  src="banner.png"
  alt="Banner"
  width={600}
  center
  direction="ltr"
  borderRadius="8px"
  spacing="20px"
/>
```

## Props

| Name         | Type                 | Required | Default | Description                                        |
| ------------ | -------------------- | -------- | ------- | -------------------------------------------------- |
| src          | string               | Yes      | ""      | Path or URL to the image                           |
| alt          | string               | No       | "image"      | Alternate description for the image                |
| width        | number \| string     | No       | —       | Image width. Numbers are treated as px in style    |
| height       | number \| string     | No       | —       | Image height. Numbers are treated as px in style   |
| center       | boolean              | No       | false   | Centers the image within the table cell            |
| borderRadius | string               | No       | —       | Applied as CSS border-radius on the image          |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Direction                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| padding | string               | No       | —       | Custom padding for container cell; overrides default bottom spacing. In plain mode, applied to the image style. |
| style | React.CSSProperties               | No       | —       |  |
| plain       | boolean              | No       | false   | Returns plain image without container and spacing            |
| href | string | No | - | If you want to convert the image to be clickable |
| maxHeight       | number \| string     | No       | —       |   |
| maxWidth       | number \| string     | No       | —       |   |

## License

MIT © iClasser
npm package: @inkdes-email/li
Description: A React email li component to wrap emails (InkDes Mailer)
Latest version: 0.1.1

# @inkdes-email/ol

Ordered list component for emails.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>


## Installation

```bash
# pnpm
pnpm add @inkdes-email/ol

# npm
npm install @inkdes-email/ol

# yarn
yarn add @inkdes-email/ol
```

## Quick start

```tsx
import { Ol } from "@inkdes-email/ol";

export default function EmailTemplate() {
  return <>
      <Ol spacing='20px' fontSize='14px' >
          ....
      </Ol>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction for the wrapper cell                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| color | string | No      | —       | `#000` |
| fontSize | string | No      | —       |  |
| lineHeight | string | No      | —       |  |
| fontWeight | string | No      | —       |  |
| className | string | No      | —       |  |
| plain | boolean | No      | false | Used when you don't want to use table or margin bottom just a paragraph without spacing |
| letterSpacing | string | No      | —       |  |
| paddingLeft | string | No      | `20px`       |  |


All other standard attributes for the `<ul>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/ol
Description: A React email ol component to wrap emails (InkDes Mailer)
Latest version: 0.1.1

# @inkdes-email/ol

Ordered list component for emails.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>


## Installation

```bash
# pnpm
pnpm add @inkdes-email/ol

# npm
npm install @inkdes-email/ol

# yarn
yarn add @inkdes-email/ol
```

## Quick start

```tsx
import { Ol } from "@inkdes-email/ol";

export default function EmailTemplate() {
  return <>
      <Ol spacing='20px' fontSize='14px' >
          ....
      </Ol>
  </>
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction for the wrapper cell                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| color | string | No      | —       | `#000` |
| fontSize | string | No      | —       |  |
| lineHeight | string | No      | —       |  |
| fontWeight | string | No      | —       |  |
| className | string | No      | —       |  |
| plain | boolean | No      | false | Used when you don't want to use table or margin bottom just a paragraph without spacing |
| letterSpacing | string | No      | —       |  |
| paddingLeft | string | No      | `20px`       |  |


All other standard attributes for the `<ul>` element are supported.

## License

MIT © iClasser
npm package: @inkdes-email/text
Description: A React email text component to wrap emails (InkDes Mailer)
Latest version: 0.1.11

# @inkdes-email/text

Text component for emails.
<br />
<br />
<img width="80" height="80" alt="inkdes-logo" src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60" />
<br />

<div style='text-align:center'>
  <a href='https://github.com/iClasser/inkdes-email-comps'>GitHub<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://www.npmjs.com/package/@inkdes-email/components'>NPM package<a>
  </hr>
</div>


<div style='text-align:center'>
  <a href='https://inkdes.com'>Website<a>
  </hr>
</div>

<div style='text-align:center'>
  <a href='https://docs.inkdes.com'>Docs<a>
  </hr>
</div>



<div style='text-align:center'>
  <a href='https://demo.inkdes.com'>Demos<a>
  </hr>
</div>


## Installation

```bash
# pnpm
pnpm add @inkdes-email/text

# npm
npm install @inkdes-email/text

# yarn
yarn add @inkdes-email/text
```

## Quick start

```tsx
import { Text } from "@inkdes-email/text";

export default function EmailTemplate() {
  return <Text spacingBottom='10px' fontWeight='400' fontFamily='Arial' fontSize='20px'>
  Hello world!
  </Text>;
}
```

## Props

| Name     | Type            | Required | Default | Description |
| -------- | --------------- | -------- | ------- | ----------- |
| children | React.ReactNode | Yes      | —       | Content of the email document |
| dir    | "ltr" \| "rtl"       | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`   | Text direction for the wrapper cell                |
| spacing | string               | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px`       | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| color | string | No      | —       | `#000` |
| fontSize | string | No      | —       |  |
| lineHeight | string | No      | —       |  |
| fontWeight | string | No      | —       |  |
| className | string | No      | —       |  |
| plain | boolean | No      | false | Used when you don't want to use table or margin bottom just a paragraph without spacing |
| letterSpacing | string | No      | —       |  |
| inline | boolean | No      | false | Used when you want to write something in one line inside another component without spacing |
| href | string | No | - | If you want to convert the text to link |
| padding | CSS padding style string | No | "" | Only works if its either inline or plain and you can add a css string |

All other standard attributes for the `<text>` element are supported.

## License

MIT © iClasser