---
title: TypeScript
description: Type component props, supporting namespaces, collections, and
  global compiler options in SolidJS.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# TypeScript

> Type component props, supporting namespaces, collections, and global compiler options in SolidJS.

Moraine exports types for component props, style slots, collection items, and polymorphic targets.
Use the component's props type for wrappers and its namespace for supporting types.

## Props vs Namespaces

Moraine uses a clear two-tier export convention for every component:

| Pattern    | Purpose                                         | Example                           |
| :--------- | :---------------------------------------------- | :-------------------------------- |
| `XxxProps` | Full public props for a component               | `ButtonProps`, `SelectProps`      |
| `XxxT.*`   | Supporting types (slots, variants, items, etc.) | `ButtonT.Variant`, `SelectT.Item` |

```tsx
import type { ButtonProps, ButtonT, SelectProps, SelectT } from 'moraine'
```

### Component Props (`XxxProps`)

Use `XxxProps` when wrapping a component, typing function parameters, or defining extended prop interfaces:

```tsx
import type { ButtonProps } from 'moraine'
import { Button } from 'moraine'

interface SubmitButtonProps extends ButtonProps {
  trackingId?: string
}

export function SubmitButton(props: SubmitButtonProps) {
  return <Button variant="default" {...props} />
}
```

### Component Namespaces (`XxxT`)

The `XxxT` namespace organizes all auxiliary types for a component under a single import:

```tsx
import type { SelectT } from 'moraine'

const countries: SelectT.Item[] = [
  { label: 'Canada', value: 'ca' },
  { label: 'Japan', value: 'jp' },
]
```

#### Namespace Members Reference

| Member    | Description                                                                         |
| :-------- | :---------------------------------------------------------------------------------- |
| `Kind`    | `'single'` or `'composite'`; composite components expose attached JSX parts.        |
| `Props`   | Complete component props type (identical to `XxxProps`).                            |
| `Base`    | Core business props without native HTML attributes.                                 |
| `Slot<T>` | Object shape of optional styling slots; `keyof XxxT.Slot` gives the slot names.     |
| `Variant` | Object shape of visual variant options; component props additionally accept `null`. |
| `Classes` | Slot shape containing `cn` class values, including strings, arrays, and objects.    |
| `Styles`  | Slot shape containing `JSX.CSSProperties` objects; string styles are unsupported.   |
| `Item`    | Data model for collection-backed components (`Select`, `Combobox`, `Tabs`).         |
| `Value`   | Value domain type for form controls with value semantics.                           |

Members are available where applicable. For example, collection components expose `Item`, while
single-root components such as `Icon` do not accept instance slot maps. Attached parts use
namespace types such as `DialogT.ContentProps`.

## Visual Variants (`XxxT.Variant`)

Components supporting visual variants expose their options under `XxxT.Variant`. The corresponding properties on `XxxProps` accept `null` to explicitly clear defaults for that variant, while base recipe styles and other variants remain active:

```tsx
import type { ButtonProps } from 'moraine'
import { Button } from 'moraine'

type VariantName = ButtonProps['variant'] // 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | null | undefined

// Clear the default visual variant while retaining base and size styles:
export function RawButton() {
  return <Button variant={null}>No visual variant</Button>
}
```

## Slot Classes & Styles (`XxxT.Classes`, `XxxT.Styles`)

Use `Classes` and `Styles` to type slot override records when customizing composite elements:

```tsx
import type { CardT } from 'moraine'
import { Card } from 'moraine'

const customCardClasses: CardT.Classes = {
  header: 'border-b border-border/80 pb-3',
  body: 'space-y-4 py-4',
  footer: 'border-t border-border/80 pt-3',
}

export function StyledCard() {
  return <Card classes={customCardClasses} />
}
```

## Global Type Configuration (`MoraineTypeConfig`)

You can customize Moraine's compile-time type behavior across your entire application using TypeScript module augmentation.

Create a declaration file (e.g. `src/env.d.ts` or `src/moraine.d.ts`) in your project:

```ts title="src/moraine.d.ts"
import 'moraine'

declare module 'moraine' {
  interface MoraineTypeConfig {
    simpleRootAttributes: true
    simpleHtmlTags: true
  }
}
```

Enable only the options you need, using required properties with the literal type `true`. Omit an option to retain its default behavior; optional `boolean` properties do not enable it.

### `simpleRootAttributes`

- **`false` (default)**: Strict type checking against intrinsic elements. Non-standard attributes trigger compile-time errors.
- **`true`**: Relaxes attribute checks while maintaining strict verification for known component props (`variant`, `size`, `disabled`).

### `simpleHtmlTags`

- **`false` (default)**: Autocompletes all elements in `keyof JSX.IntrinsicElements` (including SVG tags like `path`, `g`, `svg`).
- **`true`**: Filters autocompletion down to standard `keyof JSX.HTMLElementTags` (`div`, `span`, `button`, `a`, etc.), reducing suggestion noise.