Skip to main content

TypeScript

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

View as Markdown

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

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:

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:

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:

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:

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.