# Phila Callout Component

<!-- status-badge-start -->

![Status: Stable](https://img.shields.io/badge/-Stable-brightgreen)

<!-- status-badge-end -->

A collapsible callout for highlighting important messages and warnings. Clicking the header
toggles the body open/closed; the open state can also be driven externally via `v-model:open`.

## Installation

```bash
pnpm add @phila/phila-ui-callout @phila/phila-ui-core
# or
npm install @phila/phila-ui-callout @phila/phila-ui-core
```

Import core styles in your main entry file (e.g., `main.js|ts`):

```typescript
import "@phila/phila-ui-core/styles/template-light.css";
```

## Usage

### Basic

```vue
<script setup lang="ts">
import { Callout } from "@phila/phila-ui-callout";
</script>

<template>
  <Callout title="This is the title" message="Informational message" type="info" />
</template>
```

### With custom content

The default slot replaces `message` when provided:

```vue
<template>
  <Callout title="This is the title" type="info" :open="true">
    Need help applying? Visit the
    <a href="https://www.phila.gov" target="_blank" rel="noopener">City of Philadelphia website</a>
    for the latest information and resources.
  </Callout>
</template>
```

### Controlled

```vue
<script setup lang="ts">
import { ref } from "vue";
import { Callout } from "@phila/phila-ui-callout";

const isOpen = ref(false);
</script>

<template>
  <button type="button" @click="isOpen = !isOpen">{{ isOpen ? "Close" : "Open" }}</button>
  <Callout title="Programmatically controlled" message="Driven from outside via v-model:open." v-model:open="isOpen" />
</template>
```

### Types

```vue
<Callout title="Info" message="..." type="info" />
<Callout title="Warning" message="..." type="warning" />
<Callout title="Error" message="..." type="error" />
<Callout title="Success" message="..." type="success" />
```

Each type renders its own icon (info circle, triangle exclamation, circle exclamation, circle
check, respectively) from `@phila/phila-ui-core/icons`.

### Props

| Prop        | Type                                          | Default     | Description                                                     |
| ----------- | --------------------------------------------- | ----------- | --------------------------------------------------------------- |
| `title`     | `string`                                      | `""`        | Title text shown in the header (always visible).                |
| `message`   | `string`                                      | `""`        | Body text shown when open. Ignored if the default slot is used. |
| `type`      | `"info" \| "warning" \| "error" \| "success"` | `"info"`    | Callout type — controls color and icon.                         |
| `icon`      | `IconComponent`                               | `undefined` | Icon to override the default icon for the type of Callout       |
| `open`      | `boolean`                                     | `false`     | Whether the body is expanded (`v-model:open`).                  |
| `className` | `string`                                      | `undefined` | Additional CSS classes.                                         |

### Slots

| Slot      | Description                                                    |
| --------- | -------------------------------------------------------------- |
| `default` | Body content shown when open, replacing `message` if provided. |

## Development

### Install Dependencies

```bash
pnpm install
```

### Run Demo

```bash
pnpm dev
```

### Run lint

```bash
pnpm lint
```

### Create Production Build

```bash
pnpm build
```

## Publishing to NPM

Follow the [release instructions](../../RELEASE.md) using changesets.

## License

MIT