# Props

Bind compiled class names to the styling overrides of a static style.

The compiler rewrites each static [`style`](/docs/api/core/style) definition into a `Props.create` call. Applications normally do not import it. Applying the returned callable merges class names and inline styles without creating CSS.

```ts title="card.ts"
import { Props } from 'zyzz/runtime'

// The stylesheet already holds the rules for this class
const card = Props.create({ className: 'z-card' })

// { className: 'z-card wide', style: { padding: '24px' } }
export const props = card({ className: 'wide', style: { padding: '24px' } })
```

## Signature

```ts
// Generated code passes the complete class list
Props.create(options)
```

## Parameters

### options.className

* **Type:** `string`

The complete generated class list. The emitted stylesheet must already contain its rules.

```ts
// One atomic class per declaration, plus the definition's identity class
Props.create({ className: 'z-card' })
```

## Application

The returned callable has the [`style`](/docs/api/core/style#application) application contract. Calling it without an argument returns `{ className }` alone.

### options.className

* **Type:** `string`
* **Default:** `undefined`

Classes appended after the generated class list.

```ts
// { className: 'z-card wide' }
card({ className: 'wide' })
```

### options.style

* **Type:** `style.Options['style']`
* **Default:** `undefined`

Inline declarations. Without `options.vars`, the returned `style` is the same object, so it must not change after the call.

```ts
// The returned style is this object
card({ style: { padding: '24px' } })
```

### options.vars

* **Type:** ``{ [variable: `--${string}`]: string | number | undefined }``
* **Default:** `undefined`

Custom-property assignments merged into a new `style` object before `options.style`.

```ts
// { className: 'z-card', style: { '--accent': 'crimson' } }
card({ vars: { '--accent': 'crimson' } })
```

## Returns

### className

* **Type:** `string`

The generated class list, followed by `options.className` when supplied.

```ts
// 'z-card wide'
props.className
```

### style

* **Type:** `Readonly<Record<string, string | number | undefined>> | undefined`

The merged inline styles, present only when the call supplies `options.style` or `options.vars`.

```ts
// { padding: '24px' }
props.style
```

## Types

* **`Props.create.Options`:** The `{ className }` input.

```ts title="options.ts"
import type { Props } from 'zyzz/runtime'

// The input of a generated static style
export const options = { className: 'z-card' } satisfies Props.create.Options
```

## Errors

`Props.create` throws no errors. TypeScript checks override shapes and values, and the callable merges them without validation.