### Multi-File Component Installation Instructions

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Provide both CLI and manual installation instructions. Use a stepper for additional setup steps like dependencies or configuration.

```markdown
## Install using CLI

::InstallationCli{componentId="your-component-folder-name"}
::

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
:CodeViewerTab{filename="YourComponent2.vue" language="vue" componentName="YourComponent2" type="ui" id="your-component-folder-name"}

::
```

--------------------------------

### CLI Installation Example

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Example command to add a component to your project using shadcn-vue CLI, referencing a local registry.

```bash
npx shadcn-vue@latest add "https://localhost:3000/r/<component-name>"
```

--------------------------------

### CLI Installation Instructions

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Provide CLI installation instructions using the InstallationCli component.

```markdown
## Install using CLI

::InstallationCli{componentId="your-component-folder-name"}
::
```

--------------------------------

### Pattern Background Component Installation

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

CLI installation command for the 'Pattern Background' component.

```markdown
## Install using CLI

::InstallationCli{componentId="pattern-background"}
::
```

--------------------------------

### Install Dependencies with bun

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Use this command to install the required libraries using bun.

```bash
bun add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

--------------------------------

### Install Dependencies

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Run this command to install all necessary project dependencies after cloning the repository.

```bash
npm install
```

--------------------------------

### Manual Installation with CodeViewer

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Include manual installation instructions by providing the component's code using the CodeViewer component.

```markdown
## Install Manually

Copy and paste the following code

::CodeViewer{filename="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
::
```

--------------------------------

### Install Dependencies with yarn

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Use this command to install the required libraries using yarn.

```bash
yarn add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Use this command to install the required libraries using pnpm.

```bash
pnpm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Use this command to install the required libraries using npm.

```bash
npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

--------------------------------

### Pattern Background Manual Installation Code

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Manual installation code for the 'Pattern Background' component, including Vue and TypeScript files.

```markdown
## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="PatternBackground.vue" language="vue" componentName="PatternBackground" type="ui" id="pattern-background"}
:CodeViewerTab{filename="index.ts" language="typescript" componentName="index" type="ui" id="pattern-background" extension="ts"}

::
```

--------------------------------

### Example: Pattern Backgrounds Component

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Demonstrates the structure for a multi-file component, including front matter, previews, API, utility classes, and code for different background patterns.

```markdown
---
title: Pattern Backgrounds
description: Simple animated pattern backgrounds to make your sections stand out.
---
```

```markdown
::ComponentLoader{label="Preview" componentName="DotBackgroundDemo" type="examples" id="pattern-backgrounds"}
::
```

```markdown
## Examples

Grid background without animation:

::ComponentLoader{label="Preview" componentName="GridBackgroundDemo" type="examples" id="pattern-backgrounds"}
::

Small grid background with animation:

::ComponentLoader{label="Preview" componentName="GridSmallBackgroundDemo" type="examples" id="pattern-backgrounds"}
::
```

```markdown
## API

| Prop Name   | Type                                                                                                     | Default | Description                           |
| --------- | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------- |
| `animate`   | `boolean`                                                                                                | `false` | Set `true` to animate the background. |
| `direction` | `'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'` | `'top'` | Direction of the animation movement.  |
```

```markdown
### Utility Classes

- **Dot Pattern:** `dark:bg-dot-white/[0.2] bg-dot-black/[0.2]`
- **Grid Pattern:** `dark:bg-grid-white/[0.2] bg-grid-black/[0.2]`
- **Small Grid Pattern:** `dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2]`
```

```markdown
## Component Code

You can copy and paste the following code to create these components:

::code-group

::CodeViewerTab{label="PatternBackground.vue" language="vue" componentName="PatternBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="DotBackground.vue" language="vue" componentName="DotBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="GridBackground.vue" language="vue" componentName="GridBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="GridSmallBackground.vue" language="vue" componentName="GridSmallBackground" type="ui" id="pattern-backgrounds"}
::

::
```

--------------------------------

### Multi-File Component Front Matter

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Start multi-file component documentation with YAML front matter to define the title and description.

```yaml
---
title: Your Components Group Title
description: A brief description of what this group of components does.
---
```

--------------------------------

### Text Hover Effect Component Example

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

This example demonstrates a complete single-file component documentation, including front matter, preview, API table, and code viewer for a 'Text Hover Effect' component.

```markdown
---
title: Text Hover Effect
description: A text hover effect that animates and outlines gradient on hover.
---

::ComponentLoader{label="Preview" componentName="TextHoverEffectDemo" type="examples" id="text-hover-effect"}
::

## API

| Prop Name     | Type     | Default  | Description                                               |
| ------------- | -------- | -------- | --------------------------------------------------------- |
| `text`        | `string` | Required | The text to be displayed with the hover effect.           |
| `duration`    | `number` | `200`    | The duration of the mask transition animation in seconds. |
| `strokeWidth` | `number` | `0.75`   | The width of the text stroke.                             |
| `opacity`     | `number` | `null`   | The opacity of the text.                                  |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="TextHoverEffect.vue" language="vue" componentName="TextHoverEffect" type="ui" id="text-hover-effect"}
::
```

--------------------------------

### Conventional Commits Example

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Example of a commit message following the Conventional Commits format, indicating a new feature addition.

```git
feat: add TextHoverEffect component
```

--------------------------------

### Component Alerts for Special Requirements

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Add alerts to inform users about special requirements or dependencies, such as package installations or framework-specific syntax.

```markdown
::alert{type="info"}
**Note:** This component requires `package-name` as a dependency.
::

::alert{type="warning"}
**Note:** This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::
```

--------------------------------

### Multi-File Component Preview Section

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Use the `ComponentLoader` directive to include previews for component variants. Ensure the `id` matches the component's folder name.

```markdown
::ComponentLoader{label="Preview" componentName="ComponentVariantDemo" type="examples" id="your-component-folder-name"}
::
```

--------------------------------

### Hiding Contrast Ratio Section

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/input-and-forms/color-picker.md

Example of how to hide the accessibility contrast ratio section in the Color Picker component by setting the `hideContrastRatio` prop to true.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('#ff0000')
</script>

<template>
  <ColorPicker v-model="color" :hideContrastRatio="true" />
</template>
```

--------------------------------

### Single-File Component Preview Section Template

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Embed a live preview of your component using ComponentLoader. Ensure the 'id' matches the component's folder name if a demo folder exists.

```markdown
::ComponentLoader{label="Preview" componentName="YourComponentDemo" type="examples" id="your-component-folder-name"}
::
```

--------------------------------

### Color Picker with Custom Swatches

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/input-and-forms/color-picker.md

Illustrates how to provide custom color swatches to the Color Picker. This allows users to select from a predefined set of colors.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('#ff0000')
const swatches = [
  '#ff0000',
  '#00ff00',
  '#0000ff',
  '#ffff00',
  '#ff00ff',
  '#00ffff'
]
</script>

<template>
  <ColorPicker v-model="color" :swatches="swatches" />
</template>
```

--------------------------------

### Other Tailwind CSS Kit CSS Variables

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Configure your main.css with these CSS variables for a custom Tailwind CSS kit setup. This includes dark mode variables and base styling.

```css
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.274 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html {
  color-scheme: light dark;
}
html.dark {
  color-scheme: dark;
}
html.light {
}
```

--------------------------------

### Color Picker Component Usage

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/input-and-forms/color-picker.md

Demonstrates basic usage of the Color Picker component. It shows how to bind the current color value and listen for changes.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('#ff0000')
</script>

<template>
  <ColorPicker v-model="color" />
</template>
```

--------------------------------

### API Documentation Table

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Document component props using a markdown table listing prop name, type, default value, and description.

```markdown
## API

| Prop Name | Type      | Default | Description                    |
| --------- | --------- | ------- | ------------------------------ |
| `prop1`   | `string`  | `''`    | Description of prop1.          |
| `prop2`   | `number`  | `0`     | Description of prop2.          |
| `prop2`   | `?number` | `0`     | Description of prop2 optional. |
```

--------------------------------

### Single-File Component API Documentation Template

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Document component props using a Markdown table. Specify the prop name, type, default value, and a description.

```markdown
## API

| Prop Name | Type     | Default | Description           |
| --------- | -------- | ------- | --------------------- |
| `prop1`   | `string` | `''`    | Description of prop1. |
| `prop2`   | `number` | `0`     | Description of prop2. |
```

--------------------------------

### Update main.css

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/2.installation.md

Add the color-scheme property to your main CSS file to enable light mode support.

```css
color-scheme: light;
}
```

--------------------------------

### TypeScript Constants, Interfaces, and Types

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Illustrates best practices for defining constants, types, and interfaces in TypeScript for reusability, emphasizing immutability and naming conventions.

```typescript
// DON'T ⛔️
const Direction = { Top: 'top'} as const
const ComponentNameDirection = { Top: 'top'} as const

// DON'T ⛔️
enum COMPONENT_NAME_DIRECTION_WRONG = { Top = 'top'};

// DO ✅
import type { ObjectValues } from "@/lib/utils";
export const COMPONENT_NAME_DIRECTION = { Top: 'top', Bottom: 'bottom'} as const

//Types and Interfaces should use CamelCase to differentiate them from constants and variables.
export type ComponentNameDirection = ObjectValues<typeof COMPONENT_NAME_DIRECTION>;

interface {
   direction: ComponentNameDirection; //Enforce correct value : 'top' or 'bottom'
}
```

--------------------------------

### Info Alert for Component Requirements

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Add an info alert to specify special requirements or dependencies for a component.

```markdown
::alert{type="info"}
**Note:** This component requires `package-name` as a dependency.
::
```

--------------------------------

### Single-File Component Front Matter Template

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Use this YAML front matter for single-file components to define the title and description.

```yaml
---
title: Your Component Title
description: A brief description of what your component does.
---
```

--------------------------------

### Multi-File Component Structure Template

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Template for structuring multi-file components, including front matter, preview sections, API documentation, utility classes, and component code.

```yaml
---
title: Your Components Group Title
description: A brief description of what this group of components does.
---
```

```markdown
::ComponentLoader{label="Preview" componentName="ComponentVariantDemo" type="examples" id="your-component-folder-name"}
::
```

```markdown
## API

| Prop Name | Type     | Default | Description                             |
| --------- | -------- | ------- | --------------------------------------- |
| `prop1`   | `string` | `''`    | Description applicable to all variants. |
```

```markdown
### Utility Classes

- **Class Name:** `class-description`
```

```markdown
## Component Code

You can copy and paste the following code to create these components:

::code-group

::CodeViewerTab{label="MainComponent.vue" language="vue" componentName="MainComponent" type="ui" id="your-component-folder-name"}
::

::CodeViewerTab{filename="VariantOne.vue" language="vue" componentName="VariantOne" type="ui" id="your-component-folder-name"}
::

::CodeViewerTab{filename="VariantTwo.vue" language="vue" componentName="VariantTwo" type="ui" id="your-component-folder-name"}
::

::
```

--------------------------------

### Compare Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/miscellaneous/compare.md

This section details the available props, events, and slots for the Compare component.

```APIDOC
## Compare Component API

### Props

| Prop Name | Type | Default | Description |
|---|---|---|---|
| `firstImage` | `string` | `""` | URL of the first image |
| `secondImage` | `string` | `""` | URL of the second image |
| `firstImageAlt` | `string` | `"First image"` | Alt text for first image |
| `secondImageAlt` | `string` | `"Second image"` | Alt text for second image |
| `class` | `string` | `""` | Additional classes for the component |
| `firstContentClass` | `string` | `""` | Classes applied to first content wrapper |
| `secondContentClass` | `string` | `""` | Classes applied to second content wrapper |
| `initialSliderPercentage` | `number` | `50` | Initial position of slider (0-100) |
| `slideMode` | `"hover" | "drag"` | `
```

--------------------------------

### Link Preview API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/miscellaneous/link-preview.md

API documentation for the Link Preview component, detailing its available props for customization.

```APIDOC
## Link Preview Component API

### Description
This component generates dynamic link previews. It can display static images or generate previews from URLs, with various props to control its appearance and behavior.

### Props

#### `class`
- **Type**: `string`
- **Default**: `""`
- **Description**: Custom class applied to the main element.

#### `linkClass`
- **Type**: `string`
- **Default**: `""`
- **Description**: Custom class applied to the link element.

#### `width`
- **Type**: `number`
- **Default**: `200`
- **Description**: Width of the preview image.

#### `height`
- **Type**: `number`
- **Default**: `125`
- **Description**: Height of the preview image.

#### `isStatic`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Determines if the preview image is static or a URL preview (set to `true` for static mode).

#### `imageSrc`
- **Type**: `string`
- **Default**: `""`
- **Description**: The source of the image to display (required if `isStatic` is `true`).

#### `url`
- **Type**: `string`
- **Default**: `""`
- **Description**: URL for the link and for generating the preview image (required if `isStatic` is `false`).
```

--------------------------------

### iPhone Mockup Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/device-mocks/iphone-mockup.md

The iPhone Mockup component accepts the following props to customize its appearance and content.

```APIDOC
## iPhone Mockup Component

### Description

This component renders an SVG mockup of an iPhone. It allows customization of its dimensions and the image displayed within it.

### Props

#### `width`
- **Type**: `number`
- **Default**: `433`
- **Description**: Width of the mockup SVG in pixels.

#### `height`
- **Type**: `number`
- **Default**: `882`
- **Description**: Height of the mockup SVG in pixels.

#### `src`
- **Type**: `string`
- **Default**: `null`
- **Description**: URL of the image to display inside the mockup.
```

--------------------------------

### Singularity Background Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/backgrounds/singularity-background.md

Configuration options for the Singularity Background component.

```APIDOC
## Singularity Background Component API

### Description

This component provides a shader-based background effect. The following properties can be configured to customize its appearance and behavior.

### Properties

#### `hue`
*   **Type**: `number`
*   **Default**: `0`
*   **Description**: Base hue for the fractal texture (0–360 degrees).

#### `saturation`
*   **Type**: `number`
*   **Default**: `1`
*   **Description**: Saturation of the color (0–1).

#### `brightness`
*   **Type**: `number`
*   **Default**: `1`
*   **Description**: Brightness multiplier for the output color (0–2 recommended).

#### `speed`
*   **Type**: `number`
*   **Default**: `1`
*   **Description**: Speed multiplier for animation.

#### `mouseSensitivity`
*   **Type**: `number`
*   **Default**: `0.5`
*   **Description**: Controls the responsiveness to mouse movement. (0–5).

#### `damping`
*   **Type**: `number`
*   **Default**: `1`
*   **Description**: Damping factor to control the smoothness of texture distortions. (0–1).

#### `class`
*   **Type**: `string`
*   **Default**: `—`
*   **Description**: Optional additional CSS classes for the container div (e.g., z-index, etc.).
```

--------------------------------

### Color Picker with Different Input Type

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/input-and-forms/color-picker.md

Shows how to configure the Color Picker to use a different default input format, such as RGBA.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('rgba(255, 0, 0, 0.5)')
</script>

<template>
  <ColorPicker v-model="color" type="rgba" />
</template>
```

--------------------------------

### Single-File Component Code Inclusion Template

Source: https://github.com/unovue/inspira-ui/blob/main/CONTRIBUTING.md

Include the full component code using CodeViewer. The 'id' should correspond to the component's folder name in the 'ui' directory.

```markdown
## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
::
```

--------------------------------

### Controlling Color Picker Open State

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/input-and-forms/color-picker.md

Demonstrates how to programmatically control the open/closed state of the Color Picker using the `open` prop and `update:open` event.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('#ff0000')
const isOpen = ref<boolean>(false)
</script>

<template>
  <button @click="isOpen = !isOpen">Toggle Picker</button>
  <ColorPicker v-model="color" :open="isOpen" @update:open="isOpen = $event" />
</template>
```

--------------------------------

### Pattern Background Component Front Matter

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Front matter for the 'Pattern Background' component, including its title and a brief description.

```yaml
---
title: Pattern Background
description: Simple animated pattern background to make your sections stand out.
---
```

--------------------------------

### Thunderstorm Background Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/backgrounds/thunderstorm-background.md

Configuration options for the Thunderstorm Background component.

```APIDOC
## Thunderstorm Background Component API

### Description

This component provides a dynamic, shader-based background effect simulating a thunderstorm. It offers several properties to customize the visual appearance and animation.

### Props

#### `hue`
- **Type**: `number`
- **Default**: `0`
- **Description**: Base hue for the fractal texture (0–360 degrees).

#### `saturation`
- **Type**: `number`
- **Default**: `1`
- **Description**: Saturation of the color (0–1).

#### `brightness`
- **Type**: `number`
- **Default**: `1`
- **Description**: Brightness multiplier for the output color (0–2 recommended).

#### `speed`
- **Type**: `number`
- **Default**: `1`
- **Description**: Speed multiplier for animation.

#### `mouseSensitivity`
- **Type**: `number`
- **Default**: `0.5`
- **Description**: Controls the responsiveness to mouse movement. (0–5).

#### `damping`
- **Type**: `number`
- **Default**: `1`
- **Description**: Damping factor to control the smoothness of texture distortions. (0–1).

#### `class`
- **Type**: `string`
- **Default**: `—`
- **Description**: Optional additional CSS classes for the container div (e.g., z-index, etc).
```

--------------------------------

### Vue.js Props Typing and Destructuring

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Demonstrates correct ways to define and destructure props in Vue.js with TypeScript, including default values.

```vue
<script lang="ts" setup>
const { msg = "hello", labels = ["one", "two"] } = defineProps<Props>();

// DON'T ⛔️
const props = defineProps({
  whatever: { type: String, required: true },
  optional: { type: String, default: "default" },
});

const props = withDefaults(defineProps<Props>(), { optional: "default" });

// DO ✅
interface Props {
  whatever: string;
  optional?: string;
}

// Or DO ✅ Props destructure (v3.5+)
interface Props {
  msg?: string;
  labels?: string[];
}
</script>
```

--------------------------------

### Warning Alert for Nuxt-Only Syntax

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/1.getting-started/3.contribution.md

Use a warning alert to inform users about nuxt-only syntax and potential adjustments for non-Nuxt environments.

```markdown
::alert{type="warning"}
**Note:** This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::
```

--------------------------------

### Dock Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/miscellaneous/dock.md

The Dock component provides a macOS-style dock with customizable magnification, distance, direction, and orientation. It accepts additional classes for styling and uses slots for content.

```APIDOC
## Dock Component API

### Description
Provides a macOS-style dock with magnifying icons on hover. It is highly customizable.

### Props

- **`class`** (string) - Optional - Additional classes to apply to the dock container.
- **`magnification`** (number) - Optional - Magnification factor for the dock icons on hover (default: 60).
- **`distance`** (number) - Optional - Distance from the icon center where magnification applies.
- **`direction`** (string) - Optional - Alignment of icons (`top`, `middle`, `bottom`) (default: middle).
- **`orientation`** (string) - Optional - Orientation of Dock (`vertical`, `horizontal`) (default: horizontal).

### Slots

- **`default`** - Use this slot to place Dock or other child components to be displayed within the dock.
```

--------------------------------

### Interactive Grid Pattern Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/backgrounds/interactive-grid-pattern.md

Configuration options for the Interactive Grid Pattern component.

```APIDOC
## Interactive Grid Pattern Component API

### Description
This component renders an interactive background grid pattern using SVGs. It is fully customizable.

### Props

#### `className`
- **Type**: `string`
- **Default**: `-`
- **Description**: Additional classes for styling the component.

#### `squaresClassName`
- **Type**: `string`
- **Default**: `-`
- **Description**: Additional classes for styling the individual squares within the grid.

#### `width`
- **Type**: `number`
- **Default**: `40`
- **Description**: Sets the width of each square in the grid pattern (in pixels).

#### `height`
- **Type**: `number`
- **Default**: `40`
- **Description**: Sets the height of each square in the grid pattern (in pixels).

#### `squares`
- **Type**: `[number, number]`
- **Default**: `[24, 24]`
- **Description**: Defines the number of squares in the grid pattern, specified as an array of two numbers (e.g., [horizontal count, vertical count]).
```

--------------------------------

### Infinite Grid Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/visualization/infinite-grid.md

The Infinite Grid component accepts several props to configure its data and appearance. The `cardData` prop is required and expects an array of `CardData` objects. The `options` prop allows for partial overrides of `InfiniteGridOptions` to customize layout, camera, and post-processing effects.

```APIDOC
## Props

### `cardData`

- **Type**: `CardData[]`
- **Default**: `[]`
- **Required**: Yes
- **Description**: Data for every tile shown in the grid.

### `options`

- **Type**: `Partial<InfiniteGridOptions>`
- **Default**: `{}`
- **Description**: Optional overrides for layout, camera, and post-processing.

#### `InfiniteGridOptions` Details:

- **`gridCols`** (number): Grid Columns. Default: `4`.
- **`gridRows`** (number): Grid Rows. Default: `4`.
- **`gridGap`** (number): Gap between squares. Default: `0`.
- **`tileSize`** (number): Tile size (OGL units). Default: `2.4`.
- **`baseCameraZ`** (number): Starting Z-distance of the camera. Default: `10`.
- **`enablePostProcessing`** (boolean): Toggle the post-processing pipeline. Default: `true`.
- **`postProcessParams.distortionIntensity`** (number): Barrel / pincushion distortion strength (0 = none). Default: `-0.2`.
- **`postProcessParams.vignetteOffset`** (number): Vignette offset; higher ⇒ smaller clear area. Default: `0.0`.
- **`postProcessParams.vignetteDarkness`** (number): Vignette darkness; higher ⇒ darker edges. Default: `0.0`.

### `CardData` Structure:

- **`title`** (string): Required. Main heading text.
- **`badge`** (string): Required. Badge label.
- **`description`** (string): Longer body text.
- **`tags`** (string[]): Required. Tag pills.
- **`date`** (string): Required. Date string.
- **`image`** (string): URL for the tile's background image.
```

--------------------------------

### SpringConfig Interface

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/cursors/smooth-cursor.md

Defines the configuration object for the spring animation behavior of the smooth cursor. Use this to customize damping, stiffness, mass, and restDelta.

```typescript
interface springConfig {
  damping: number;
  stiffness: number;
  mass: number;
  restDelta: number;
}
```

--------------------------------

### CSS Variables for Customization

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/miscellaneous/container-scroll.md

Customize scroll animations and responsiveness by setting the following CSS variables.

```APIDOC
## CSS Variables

To customize the scroll animations and responsiveness, you can set the following CSS variables:

- **`--scale-start`**: Initial scale value for the card.
- **`--scale-end`**: Final scale value for the card as the scroll progresses.
- **`--rotate-start`**: Initial rotation value for the card.
- **`--rotate-end`**: Final rotation value for the card as the scroll progresses.
```

--------------------------------

### Animated Tooltip API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/miscellaneous/animated-tooltip.md

The Animated Tooltip component accepts an `items` prop to display a list of tooltips on hover.

```APIDOC
## Animated Tooltip API

### Description

The Animated Tooltip component displays a list of items with associated details that appear on hover. It is designed to be interactive and visually engaging.

### Props

#### `items`
- **Type**: `Array<{id: number, name: string, designation: string, image: string}>`
- **Default**: `[]`
- **Description**: An array of objects, where each object represents an item to be displayed in the tooltip. Each item object must contain `id`, `name`, `designation`, and `image` properties.
```

--------------------------------

### Card Spotlight Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/cards/card-spotlight.md

The Card Spotlight component offers several props to customize its appearance and behavior, including the size, color, and opacity of the spotlight effect, as well as a class for the content slot.

```APIDOC
## Card Spotlight Component API

### Description

This component provides a spotlight effect that follows the mouse cursor. Its appearance can be customized using the following props.

### Props

#### `gradientSize`
- **Type**: `number`
- **Default**: `200`
- **Description**: Radius in pixels of the spotlight effect.

#### `gradientColor`
- **Type**: `string`
- **Default**: `'#262626'`
- **Description**: The color of the spotlight gradient.

#### `gradientOpacity`
- **Type**: `number`
- **Default**: `0.8`
- **Description**: The opacity level of the spotlight gradient effect.

#### `slotClass`
- **Type**: `string`
- **Default**: `undefined`
- **Description**: Class to apply to the parent container containing the slot.
```

--------------------------------

### Folder and File Component API

Source: https://github.com/unovue/inspira-ui/blob/main/content/en/2.components/visualization/file-tree.md

The Folder and File components represent individual items within the file tree. They accept props to define their ID, name, selection state, and whether they are selectable.

```APIDOC
## Folder and File Components API

### Description
The `Folder` and `File` components represent folders and files in the file tree. Folders can contain other `Folder` and `File` components.

### Props

#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Props

| Prop Name      | Type      | Default | Description                             |
| -------------- | --------- | ------- | --------------------------------------- |
| `class`        | `string`  | -       | Additional classes for custom styling.  |
| `id`           | `string`  | -       | Unique identifier for the item.         |
| `name`         | `string`  | -       | Display name of the folder/file.        |
| `isSelectable` | `boolean` | `true`  | Whether the item can be selected.       |
| `isSelect`     | `boolean` | `false` | Whether the item is currently selected. |
```