Pit Viper

https://pitviper.turquoise.health
Admin
Pit Viper is a design system and component library providing reusable UI components, visual styles,...
Tokens:83,939
Snippets:332
Trust Score:9.1
Update:11 months ago
Show doc for...
Tokens:
Raw
### HTML Grid Layout Example

Source: https://pitviper.turquoise.health/utilities/grid

Demonstrates how to implement a responsive grid layout using Pit Viper's CSS classes. It utilizes custom properties to control the minimum width of grid items and the spacing between them. This example shows a basic setup for arranging multiple card elements.

```html
<div class="pv-grid" style="--grid-col-min: 150px">
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 1</p>
  </div>
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 2</p>
  </div>
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 3</p>
  </div>
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 4</p>
  </div>
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 5</p>
  </div>
  <div class="pv-surface pv-bordered pv-inset-square">
    <p>Card 6</p>
  </div>
</div>
```

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

### Search Input Examples (HTML)

Source: https://pitviper.turquoise.health/components/forms

Showcases the `pv-input-search` component, which includes a search icon. Examples cover a basic search input and a more complex version with a popover for filtering options.

```html
<label for="search-input" class="pv-label pv-stack-8">Input Label</label>  
<input type="text" class="pv-input-search" placeholder="Search Input" id="search-input" name="search-input">
```

```html
<label id="state-filter-label" for="state-filter" class="pv-label">State</label>  
<div class="pv-dropdown">  
  <input type="text" class="pv-input-search pv-input-small" placeholder="Filter by state..." id="state-filter-search" name="state-filter-search" onfocus="this.toggleAttribute('data-dropdown')" onblur="this.removeAttribute('data-dropdown')">  
  <div role="menu" class="pv-popover pv-scroller" style="--width: fit-content; top: calc(100% + 2px); max-height: 180px;">  
    <ul role="list" class="pv-popover-list" aria-describedby="state-filter-label">  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="california" class="pv-checkbox">  
          <span>  
            <span>California (CA)</span>  
            <span>(53,382)</span>  
          </span>  
        </label>  
      </li>  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="new-york" class="pv-checkbox">  
          <span>  
            <span>New York (NY)</span>  
            <span>(30,824)</span>  
          </span>  
        </label>  
      </li>  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="texas" class="pv-checkbox">  
          <span>  
            <span>Texas (TX)</span>  
            <span>(15,900)</span>  
          </span>  
        </label>  
      </li>  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="florida" class="pv-checkbox">  
          <span>  
            <span>Florida (FL)</span>  
            <span>(15,281)</span>  
          </span>  
        </label>  
      </li>  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="ohio" class="pv-checkbox">  
          <span>  
            <span>Ohio (OH)</span>  
            <span>(25,927)</span>  
          </span>  
        </label>  
      </li>  
      <li>  
        <label class="pv-label pv-label-hover pv-flex">  
          <input type="checkbox" name="state-filter-selection" value="ohio" class="pv-checkbox">  
          <span>  
            <span>Massachusetts (MA)</span>  
            <span>(20,123)</span>  
          </span>  
        </label>  
      </li>  
    </ul>  
  </div>  
</div>
```

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

### HTML Action Bar Examples

Source: https://pitviper.turquoise.health/components/action-bar

Demonstrates the structure and styling of Pit Viper action bars using HTML. Includes examples for the default action bar and a white-styled action bar, showcasing different button types and layouts within the `.pv-action-bar-container`.

```html
<div class="pv-action-bar-container">  
  <div>  
    <p>2 Selected</p>  
  </div>  
  <div>  
    <button class="pv-button-tertiary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>new-tab</title>  
      <use xlink:href="#new-tab"></use>  
    </svg>  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
    <button class="pv-button-tertiary">  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
    <button class="pv-button-tertiary">  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
  </div>  
  <div>  
    <button class="pv-button-tertiary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>check</title>  
      <use xlink:href="#check"></use>  
    </svg>  
    </button>  
    <button class="pv-button-tertiary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>close</title>  
      <use xlink:href="#close"></use>  
    </svg>  
    </button>  
  </div>  
  <div>  
    <button class="pv-button-ghost-inverse">  
      Cancel  
    </button>  
  </div>  
</div>  
<div class="pv-action-bar-container" data-style="white">  
  <div>  
    <p>2 Selected</p>  
  </div>  
  <div>  
    <button class="pv-button-secondary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>new-tab</title>  
      <use xlink:href="#new-tab"></use>  
    </svg>  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
    <button class="pv-button-secondary">  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
    <button class="pv-button-secondary">  
      <span>Button</span>  
      <svg aria-hidden="true" class="pv-icon">  
      <title>chevron-down</title>  
      <use xlink:href="#chevron-down"></use>  
    </svg>  
    </button>  
  </div>  
  <div>  
    <button class="pv-button-secondary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>check</title>  
      <use xlink:href="#check"></use>  
    </svg>  
    </button>  
    <button class="pv-button-secondary">  
      <svg aria-hidden="true" class="pv-icon">  
      <title>close</title>  
      <use xlink:href="#close"></use>  
    </svg>  
    </button>  
  </div>  
  <div>  
    <button class="pv-button-ghost">  
      Cancel  
    </button>  
  </div>  
</div>
```

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

### Install Pit Viper NPM Package

Source: https://pitviper.turquoise.health/index

Install the Pit Viper design system as an npm package for use in your project. This is the recommended method for managing dependencies.

```bash
npm install @turquoisehealth/pit-viperCopy
```

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

### HTML Clickable Cards (Button and Overlay Link)

Source: https://pitviper.turquoise.health/components/cards

Demonstrates two ways to create clickable cards using Pit Viper classes. The first example uses a `<button>` with `.pv-card` for an interactive card. The second uses an anchor tag with `.pv-overlay-link` within a `.pv-card` to make the entire card clickable. These examples showcase various text and layout utilities like `.pv-flex`, `.pv-stack`, and `.pv-text-right`.

```html
<button class="pv-card pv-inset-square-12 pv-space-between">
  <div>
    <p>Green Sword Green Armor</p>
    <p class="pv-text-body-xs pv-text-subdued">Custom Utah... & 23 more plans | Clinical Chi... & 5 more specialties | Inpatient & 5 more service areas</p>
  </div>
  <div class="pv-flex" style="--flex-align: start">
    <div class="pv-text-right">
      <p class="pv-text-title-sm">$626.23</p>
      <p class="pv-text-subdued pv-text-body-xs">Negotiated</p>
    </div>
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pv-icon pv-text-subdued"><path d="M19.7 9.6c-.2-.2-.5-.3-.6-.3s-.3-.1-.5-.1l-3.7-.6-1.7-3.5c-.1-.2-.2-.3-.2-.5-.1-.1-.2-.4-.5-.5-.2-.1-.3-.1-.5-.1s-.3 0-.5.1c-.3.1-.4.4-.5.5s-.2.3-.2.5L9.1 8.6l-3.7.5c-.2 0-.4.1-.5.1s-.4.1-.6.3c-.2.3-.3.7-.3 1.1 0 .3.2.5.3.6l.4.4 2.7 2.7-.6 3.8v.5c0 .2 0 .4.1.7.2.3.5.5.8.6h.2c.2 0 .4-.1.5-.1.1-.1.3-.1.5-.2H9l2.1-1.2 1.1-.6 3.3 1.8c.2.1.3.2.5.2.1 0 .3.1.5.1h.2c.3-.1.6-.3.8-.6.1-.3.1-.6.1-.7 0-.2 0-.3-.1-.5l-.6-3.8 2.7-2.7.4-.4c.1-.1.3-.3.3-.6-.3-.4-.4-.8-.6-1z"/></svg>
  </div>
</button>
<div class="pv-card pv-inset-square-8" style="max-width: 250px">
  <a href="https://turquoise.health" class="pv-overlay-link"></a>
  <p class="pv-flex pv-text-body-md pv-stack-4" style="--flex-gap: 4px">
      <img src="https://assets.codepen.io/281/aetna-logo.svg" class="pv-company-sm" alt="" />
      <span>Aetna</span></p>
  <div class="pv-flex pv-stack-4">
      <p class="pv-text-title-lg">Healthcare Price Transparency Could Save $1 Trillion</p>
    <img src="https://assets.codepen.io/281/Rectangle+3091.png" alt="" width="72" height="72"/>
  </div>
  <p class="pv-text-body-md pv-text-subdued">Description Label<br>
  02/21/25</p>
</div>
```

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

### Floating Action Button HTML Examples

Source: https://pitviper.turquoise.health/components/buttons

Examples demonstrating the 'pv-button-floating' and 'pv-button-floating-on-dark' classes for creating floating action buttons. A parent container must have 'pv-relative' for proper positioning. Custom properties like --bottom and --right can adjust spacing.

```html
<div class="pv-inset-square pv-surface-accent pv-relative pv-border-bottom" style="height: 100px">
  <button class="pv-button-floating">
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-accent pv-relative" style="height: 100px">
  <button class="pv-button-floating" disabled>
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-brand pv-relative pv-border-bottom" style="height: 100px">
  <button class="pv-button-floating-on-dark">
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-brand pv-relative" style="height: 100px">
  <button class="pv-button-floating-on-dark" disabled>
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
```

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

### HTML Popover List Example

Source: https://pitviper.turquoise.health/components/popovers

This HTML snippet illustrates the usage of a popover list within a popover. It utilizes the 'pv-popover-list' class for styling and includes the 'role="list"' attribute to ensure proper semantic structure and remove default list styling. The example features list items with anchor tags, and one item is highlighted using the 'data-active' attribute.

```html
<div class="pv-popover">
  <ul role="list" class="pv-popover-list">
    <li data-active><a href="#">Product Roadmap</a></li>
    <li><a href="#">Database Log</a></li>
    <li><a href="#">Support</a></li>
  </ul>
</div>
```

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

### HTML Document Structure (HTML)

Source: https://pitviper.turquoise.health/pv-components/intro

This is the basic HTML structure for the Pit Viper Vue Browser Example. It sets the language to English and includes meta charset information. The title indicates the purpose of the page.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pit 
Viper Vue 
Browser 
Example</title>
<meta 
charset="UTF-8"

```

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

### Project Scripts and Dependencies (JSON)

Source: https://pitviper.turquoise.health/pv-components/intro

This package.json file defines the project's scripts and dependencies. It includes a 'start' script for running the development server using 'servor' with live reloading. The primary dependency is 'servor' for serving the application.

```json
{ "scripts": { "start": "servor --reload" }, "dependencies": { "servor": "^4.0.2" } }
```

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

### HTML Switch (Toggle) Example

Source: https://pitviper.turquoise.health/components/forms

Provides examples of HTML switches (checkboxes used as toggles), showcasing different states like 'off by default', 'on by default', 'disabled', and a smaller variant. It also highlights the use of the `.pv-label-hover` class for pointer cursor on hover.

```html
<label for="switch-off" class="pv-label pv-switch pv-label-hover">
    <span>Off by default</span>
    <input type="checkbox" role="switch" id="switch-off">
  </label>
  <label for="switch-on" class="pv-label pv-switch pv-label-hover">
    <span>On by default</span>
    <input type="checkbox" role="switch" id="switch-on" checked>
  </label>
  <label for="switch-disabled" class="pv-label pv-switch pv-label-hover">
    <span>Disabled</span>
    <input type="checkbox" role="switch" id="switch-disabled">
    <input type="checkbox" role="switch" id="switch-disabled-checked" checked disabled>
  </label>
  <label for="switch-small" class="pv-label pv-switch pv-input-small pv-label-hover">
    <span class="pv-text-title-xs">Small Off by default</span>
    <input type="checkbox" role="switch" id="switch-small">
  </label>
  <label for="switch-small-on" class="pv-label pv-switch pv-input-small pv-label-hover">
    <span class="pv-text-title-xs">Small On by default</span>
    <input type="checkbox" role="switch" id="switch-small-on" checked>
  </label>
```

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

### HTML Banner Component Examples

Source: https://pitviper.turquoise.health/components/banner

This HTML code demonstrates the structure for creating primary, secondary, and tertiary banners. It includes examples of how to display a banner label with an optional icon and one or two call-to-action buttons. The structure utilizes specific CSS classes for styling and layout.

```html
<div class="pv-banner-primary pv-space-between">
  <div class="pv-flex">
    <svg aria-hidden="true" class="pv-icon pv-text-brand">
      <title>arrow-forward</title>
      <use xlink:href="#arrow-forward"></use>
    </svg>
    <p class="pv-text-title-sm">Banner label</p>
  </div>
  <div class="pv-flex">
    <button class="pv-button-ghost pv-button-small">CTA</button>
    <button class="pv-button-primary pv-button-small">
      <svg aria-hidden="true" class="pv-icon-16">
      <title>lightbulb</title>
      <use xlink:href="#lightbulb"></use>
    </svg>
      <span>CTA</span>
    </button>
  </div>
</div>
<div class="pv-banner-secondary pv-space-between">
  <div class="pv-flex">
    <svg aria-hidden="true" class="pv-icon pv-text-brand">
      <title>arrow-forward</title>
      <use xlink:href="#arrow-forward"></use>
    </svg>
    <p class="pv-text-title-sm">Banner label</p>
  </div>
  <div class="pv-flex">
    <button class="pv-button-ghost pv-button-small">CTA</button>
    <button class="pv-button-primary pv-button-small">
      <svg aria-hidden="true" class="pv-icon-16">
      <title>lightbulb</title>
      <use xlink:href="#lightbulb"></use>
    </svg>
      <span>CTA</span>
    </button>
  </div>
</div>
<div class="pv-banner-tertiary pv-space-between">
  <div class="pv-flex">
    <svg aria-hidden="true" class="pv-icon pv-text-brand">
      <title>arrow-forward</title>
      <use xlink:href="#arrow-forward"></use>
    </svg>
    <p class="pv-text-title-sm">Banner label</p>
  </div>
  <div class="pv-flex">
    <button class="pv-button-ghost pv-button-small">CTA</button>
    <button class="pv-button-primary pv-button-small">
      <svg aria-hidden="true" class="pv-icon-16">
      <title>lightbulb</title>
      <use xlink:href="#lightbulb"></use>
    </svg>
      <span>CTA</span>
    </button>
  </div>
</div>
```

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

### Small Tab List with Links and Buttons (HTML)

Source: https://pitviper.turquoise.health/components/tabs

Illustrates the `.pv-tab-list-small` variant for creating compact tab lists. This version reduces vertical padding, suitable for space-constrained interfaces. It includes examples using both links and buttons.

```html
<ul role="list" class="pv-tab-list-small pv-inset-inline">
  <li data-active><a href="#">Contracts</a></li>
  <li><a href="#">Files</a></li>
  <li><a href="#">Language</a></li>
  <li><a href="#">Bookmarks</a></li>
</ul>
<ul role="list" class="pv-tab-list-small pv-inset-inline">
  <li data-active><button type="button">Contracts</button></li>
  <li><button type="button">Files</button></li>
  <li><button type="button">Language</button></li>
  <li><button type="button">Bookmarks</button></li>
</ul>
```

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

### Apply Dashed Border Utility in HTML

Source: https://pitviper.turquoise.health/utilities/visual

This HTML example demonstrates applying a dashed border style to a button element using the `pv-border-dashed` utility class. This utility changes the border from solid to dashed.

```html
<button class="pv-tag-secondary pv-border-dashed">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>
```

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

### HTML Highlights: Default, Category, and Tag

Source: https://pitviper.turquoise.health/components/tags

This snippet demonstrates how to implement different highlight styles in HTML. It includes examples for a default highlight, a category-specific highlight, and a tag-specific highlight, using distinct CSS classes.

```HTML
<p class="pv-highlight">Project Clarity Supported</p>  
<p class="pv-highlight-category">Consultative and preventative care</p>  
<p class="pv-highlight-tag">Common</p>
```

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

### Text Input Examples (HTML)

Source: https://pitviper.turquoise.health/components/forms

Demonstrates the usage of `pv-input-text` for various input types like text, date, and password. Requires a corresponding `label` with a `for` attribute matching the input's `id` for accessibility.

```html
<label for="text-input" class="pv-label pv-stack-8">Input Label</label>  
<input type="text" class="pv-input-text" placeholder="Text Input" id="text-input" name="text-input">  
<label for="date-input" class="pv-label pv-stack-8">Input Label</label>  
<input type="text" class="pv-input-text" placeholder="Date Input" id="date-input" name="date-input">  
<label for="password-input" class="pv-label pv-stack-8">Input Label</label>  
<input type="password" class="pv-input-text" placeholder="Password Input" id="password-input" name="password-input">
```

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

### HTML Pagination Component Implementation

Source: https://pitviper.turquoise.health/components/pagination

This snippet demonstrates the HTML structure for the Pit Viper Pagination component. It includes examples for both regular and small sizes, showcasing the use of disabled attributes and aria-current attributes for accessibility and state indication.

```html
<ol role="list" class="pv-pagination">
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-left</title>
      <use xlink:href="#chevrons-left"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-left</title>
      <use xlink:href="#chevron-left"></use>
    </svg>
    </button>
  </li>
  <li aria-current="page">
    <button type="button">1</button>
  </li>
  <li>
    <button type="button">2</button>
  </li>
  <li>
    <button type="button">3</button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-right</title>
      <use xlink:href="#chevron-right"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-right</title>
      <use xlink:href="#chevrons-right"></use>
    </svg>
    </button>
  </li>
</ol>
<ol role="list" class="pv-pagination" data-style="small">
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-left</title>
      <use xlink:href="#chevrons-left"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-left</title>
      <use xlink:href="#chevron-left"></use>
    </svg>
    </button>
  </li>
  <li aria-current="page">
    <button type="button">1</button>
  </li>
  <li>
    <button type="button">2</button>
  </li>
  <li>
    <button type="button">3</button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-right</title>
      <use xlink:href="#chevron-right"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-right</title>
      <use xlink:href="#chevrons-right"></use>
    </svg>
    </button>
  </li>
</ol>
```

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

### HTML: Inline Flex Layout for Element Grouping

Source: https://pitviper.turquoise.health/utilities/flex

Demonstrates the `pv-flex-inline` utility, which changes the display to `inline-flex` for block-level elements. This example shows its application in creating an inline tag with an icon and text, setting the default gap to 0.

```html
<span class="pv-flex-inline pv-tag-red">
  <svg aria-hidden="true" class="pv-icon">
    <title>arrow-down</title>
    <use xlink:href="#arrow-down"></use>
  </svg>
  23
</span>
```

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

### Vue Application Entry Point (src/main.js)

Source: https://pitviper.turquoise.health/pv-components/intro

This JavaScript file serves as the main entry point for the Vue 3 application. It imports the 'createApp' function from Vue and the main 'Sandbox' component, then mounts the application to the '#app' element in the HTML.

```javascript
import { createApp } from 'vue';
import Sandbox from './Sandbox.vue';

createApp(Sandbox).mount('#app');

```

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

### Initialize Pit Viper Data Grid with AG Grid Options (HTML, JavaScript)

Source: https://pitviper.turquoise.health/components/data-grid

This example demonstrates how to initialize the `pv-data-grid` web component using provided grid options. It requires Pit Viper and AG Grid Enterprise JS assets. The `createGrid` method on the element handles the AG Grid initialization with Pit Viper styling, including loading states and icon styling.

```html
<pv-data-grid id="example-grid" class="ag-theme-pv" loading-img-src="/path_to_loading_asset" style="height:500px;"></pv-data-grid>  
  
<!-- import pit-viper.js and ag-grid-enterprise.js as described in the PV usage instructions -->  
<script>  
 const EXAMPLE_ROW_DATA = [  
   { code_type: "HCPCS", code: "0001U", rate: 381.6, provider_name: "Example Provider" },  
   { code_type: "HCPCS", code: "0034U", rate: 245.5, provider_name: "Abrazo West" },  
   { code_type: "HCPCS", code: "0035U", rate: 81.5, provider_name: "Healthcare Organization" },  
   { code_type: "HCPCS", code: "", rate: 711.42, provider_name: "Medical Place" },  
   { code_type: "MS-DRG", code: "100", rate: 1000.50, provider_name: "Hospitals Incorporated" },  
   { code_type: "MS-DRG", code: "113", rate: 2250.72, provider_name: "" },  
   { code_type: "HCPCS", code: "0035U", rate: 240, provider_name: "Abrazo West" },  
   { code_type: "MS-DRG", code: "245", rate: 566.22, provider_name: "Hospitals Incorporated" },  
 ];  
const exampleGridOptions = {  
columnDefs: [  
   { field: "code_type", sortable: true, unSortIcon: true, headerName: "Code Type", flex: 1.5 },  
   { field: "code", sortable: true, unSortIcon: true, flex: 1, filter: true, filterParams: {buttons: ['clear']} },  
   { field: "rate",  
    filter: 'agNumberColumnFilter',  
    flex: 1,  
    tooltipValueGetter: () => "This is an example tooltip",  
     valueFormatter: (params) => {  
      return new Intl.NumberFormat('en-US', {  
        style: 'currency',  
        currency: 'USD',  
      }).format(params.value);  
    }, },  
   { field: "provider_name", sortable: true, unSortIcon: true, headerName: "Provider Name", minWidth: 225, flex: 2 },  
 ]  
};  
let gridApi;  
function setLoading(value) {  
  gridApi.setGridOption("loading", value);  
    showData(!value);  
}  
function showData(value) {  
    if (value) {  
        const mockData = [...EXAMPLE_ROW_DATA, ...EXAMPLE_ROW_DATA, ...EXAMPLE_ROW_DATA].map((item, index) => ({  
            ...item,  
            id: index,  
        }));  
        gridApi.setGridOption('rowData', mockData);  
      } else {  
        gridApi.setGridOption('rowData', []);  
    }     
}  
window.addEventListener('DOMContentLoaded', () => {  
    agGrid.LicenseManager.setLicenseKey("PROVIDE-AG-GRID-LICENSE-KEY-HERE");  
    const myGridElement = document.querySelector('#example-grid');  
    gridApi = myGridElement.createGrid(exampleGridOptions);  

```

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

### HTML Tooltip Positioning Examples

Source: https://pitviper.turquoise.health/components/tooltips

These examples demonstrate how to use the 'data-position' attribute to control the placement of tooltips relative to their triggering elements. Various positions like 'bottom-center', 'bottom-right', 'top-left', 'top-center', 'top-right', and 'center-right' are illustrated.

```html
<div class="pv-tooltip" aria-labelledby="products" data-position="bottom-center">
  <dfn>5 Products</dfn>
  <div role="tooltip" id="products">
    <ul role="list">
      <li>Clear Contracts</li>
      <li>Extracts</li>
      <li>Rate Analytics</li>
      <li>Rate Sense</li>
      <li>Instant GFE</li>
    </ul>
  </div>
</div>
<div class="pv-tooltip" aria-labelledby="people" data-position="bottom-right">
  <dfn>+8</dfn>
  <div role="tooltip" id="people">
    <ul role="list">
      <li>Ally Allison</li>
      <li>Billy Williams</li>
      <li>Carson Carsons</li>
      <li>David Davids</li>
      <li>Frank Franklin</li>
      <li>Harry Harrison</li>
      <li>Jeff Jefferson</li>
      <li>Rob Robers</li>
    </ul>
  </div>
</div>
<div class="pv-surface pv-inset-square pv-flex">
  <p>Where does this come from?</p>
  <div class="pv-tooltip" aria-labelledby="rates" data-position="top-left">
    <svg aria-hidden="true" class="pv-icon">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
    <div role="tooltip" id="rates">
      <p>These are the rates from the provider.</p>
    </div>
  </div>
</div>
<div class="pv-tooltip" aria-labelledby="verified" data-position="top-center">
  <svg aria-hidden="true" class="pv-icon-24 pv-text-brand">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
  <div role="tooltip" id="verified">
    <p>Verified Provider</p>
  </div>
</div>
<div class="pv-space-between">
  <label class="pv-label" for="cvc">CVC</label>
  <div class="pv-tooltip" aria-labelledby="cvc-desc" data-position="top-right">
    <svg aria-hidden="true" class="pv-icon">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
    <div role="tooltip" id="cvc-desc">
      <p>3-digit code on the back of your card</p>
    </div>
  </div>
</div>
<input type="text" class="pv-input-text" name="cvc">
<div>
  <p class="pv-text-title-sm pv-stack-4">data-position="center-right"</p>
  <div class="pv-surface pv-inset-square">
    <div class="pv-hover-card" aria-labelledby="verified" data-position="center-right" style="--max-width: 360px">
      <div class="pv-radius pv-surface-brand-inverse pv-inset-square" style="--radius: 50%; --inset-size: 4px">
        <svg aria-hidden="true" class="pv-icon-12 pv-text-inverse">
      <title>arrow-down</title>
      <use xlink:href="#arrow-down"></use>
    </svg>
      </div>
      <div role="tooltip" id="verified" class="pv-flow-8">
        <p><strong>Behavioral Health</strong> had costs <strong>3%</strong> above the average at <strong>Evergreen Memorial Hospital</strong>.</p>
        <div class="pv-space-between">
          <p class="pv-text-subdued">Average Cost of Claims</p>
          <div class="pv-flex">
            <p class="pv-text-subdued">$</p>
            <p><strong>39,123,987</strong></p>
            <div class="pv-radius pv-surface-critical pv-inset-square" style="--radius: 50%; --inset-size: 4px">
              <svg aria-hidden="true" class="pv-icon-12 pv-text-critical">
      <title>arrow-up</title>
      <use xlink:href="#arrow-up"></use>
    </svg>
            </div>
          </div>
        </div>
        <div class="pv-space-between">
          <p class="pv-text-subdued">Confidence Score</p>
          <div class="pv-flex">
            <p><strong id="rating">3</strong></p>
            <div class="pv-rating" data-rating="bar">
              <meter id="rating" min="0" max="5" value="3" aria-described-by="rating">4</meter>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

### Project Dependencies (package.json)

Source: https://pitviper.turquoise.health/pv-components/intro

The package.json file defines the project's metadata, scripts, and dependencies. It lists Vue 3 and the Pit Viper library as core dependencies, along with Vite and its Vue plugin as development dependencies. It also includes a 'predev' script to ensure the latest Pit Viper version is installed before development.

```json
{
  "name": "vite-vue-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predev": "npm install @turquoisehealth/pit-viper@latest"
  },
  "dependencies": {
    "@turquoisehealth/pit-viper": "^2.55.4-dev.0",
    "vue": "3.5.17"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.0",
    "vite": "^7.0.2"
  }
}

```

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

### HTML Selectable Label with Radio Buttons Example

Source: https://pitviper.turquoise.health/components/forms

Illustrates the use of a selectable label component in HTML, designed to highlight containers with more content. This example pairs it with radio buttons to allow users to select different options by clicking on the entire label area.

```html
<div class="pv-grid">
  <label class="pv-label-selectable" for="business">
    <div class="pv-space-between pv-stack-24" style="--flex-align: flex-start">
      <svg aria-hidden="true" class="pv-icon-64">...</svg>
      <input type="radio" class="pv-radio" name="type" id="business" checked>
    </div>
    <p class="pv-text-title-xl">For business.</p>
    <p class="pv-text-subdued">For those looking to join the Turquoise platform.</p>
  </label>
  <label class="pv-label-selectable" for="patient">
    <div class="pv-space-between pv-stack-24" style="--flex-align: flex-start">
      <svg aria-hidden="true" class="pv-icon-64">...</svg>
      <input type="radio" class="pv-radio" name="type" id="patient">
    </div>
    <p class="pv-text-title-xl">As a patient.</p>
    <p class="pv-text-subdued">For individuals looking to benefit from receiving care.</p>
  </label>
</div>
```

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

### Vue 3 Setup with PvMultiSelectButton (JavaScript)

Source: https://pitviper.turquoise.health/pv-components/intro

This snippet sets up a non-bundled Vue 3 application. It imports necessary Vue functions and the PvMultiSelectButton component, defining options and a watcher for selected items. Dependencies include Vue.js and the Pit Viper component library.

```javascript
import { ref, watch, defineComponent, } from 'https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.js';
import { PvMultiSelectButton } from 'https://esm.sh/@turquoisehealth/pit-viper@latest/es2022/components.mjs';

export default defineComponent({
  name: 'Sandbox',
  components: {
    PvMultiSelectButton,
  },
  setup() {
    const options = [
      { id: '1', text: 'Turquoise' },
      { id: '2', text: 'Magenta' },
      { id: '4', text: 'Microsoft' },
    ];
    const selectedItems = ref([]);

    watch(selectedItems, (newItems) => {
      console.log('items changed', newItems);
    });

    return {
      options,
      selectedItems,
    };
  },
  template: `  `,
});
```

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

### HTML Badge Component Examples

Source: https://pitviper.turquoise.health/components/counters

These HTML snippets showcase the Pit Viper Badge component, used to display a count of items. Examples include primary, secondary, tertiary, and ghost variations, with options for small variants using the `.pv-badge-sm` class. Each badge displays a count of '5'.

```html
<span class="pv-badge pv-badge-primary">5</span>
<span class="pv-badge pv-badge-primary pv-badge-sm">5</span>
```

```html
<span class="pv-badge pv-badge-secondary">5</span>
<span class="pv-badge pv-badge-secondary pv-badge-sm">5</span>
```

```html
<span class="pv-badge pv-badge-tertiary">5</span>
<span class="pv-badge pv-badge-tertiary pv-badge-sm">5</span>
```

```html
<span class="pv-badge pv-badge-ghost">5</span>
<span class="pv-badge pv-badge-ghost pv-badge-sm">5</span>
```

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

### Select Dropdown with Custom Icon (HTML & CSS)

Source: https://pitviper.turquoise.health/components/forms

This example shows how to override the default icon in a select dropdown using the `--select-background-image` CSS custom property. The example uses an inline style to embed a data URI for a custom SVG icon, allowing for visual customization. Requires `pv-select` class.

```html
<label for="select" class="pv-label">Select an Option</label>
<select id="select" name="select" class="pv-select" style="--select-background-image: url('data:image/svg+xml,%3Csvg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;%2302363D&quot; d=&quot;M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.6 12.9h-3.7v3.7c0 .2-.1.5-.3.7-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7v-3.7H7.4c-.2 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3h3.7V7.4c0-.2.1-.5.3-.7.2-.2.4-.3.7-.3s.5.1.7.3c.2.2.3.4.3.7v3.7h3.7c.2 0 .5.1.7.3.2.2.3.4.3.7s-.1.5-.3.7c-.4 0-.6.1-.9.1z&quot;/%3E%3C/svg%3E');">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
```

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

### HTML Nav List with Collapsed Sidebar Attribute

Source: https://pitviper.turquoise.health/components/navigation

This example demonstrates a Nav List using the 'data-collapsed' attribute to enforce a minimized view, showing only icons and centering the list.

```html
<ul role="list" class="pv-nav-list" data-collapsed>
  <li>
    <a href="#">
      <svg aria-hidden="true" class="pv-icon">
        <use xlink:href="#dashboard"></use>
      </svg>
      <span>Dashboard</span>
    </a>
  </li>
  <li>
    <a href="#" aria-current="page">
      <svg aria-hidden="true" class="pv-icon">
        <use xlink:href="#rate-intel"></use>
      </svg>
      <span>Rate Sense</span>
    </a>
  </li>
  <li>
    <a href="#">
      <svg aria-hidden="true" class="pv-icon">
        <use xlink:href="#contracts"></use>
      </svg>
      <span>Clear Contracts</span>
    </a>
  </li>
</ul>
```

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

### HTML Counter Component Example

Source: https://pitviper.turquoise.health/components/counters

This HTML snippet demonstrates the usage of the Pit Viper Counter component. It displays a number indicating a step in a series, followed by associated text content. The component relies on specific CSS classes for styling and layout.

```html
<div class="pv-bordered pv-surface pv-inset-square-24 pv-flex" style="--flex-gap: 1rem">
  <div class="pv-counter">2</div>
  <div>
    <p class="pv-text-title-lg pv-stack-4">Set Up Your Payment Info</p>
    <p>Make sure your bank details are up to date for smooth payments. You can check and update this information in the Billing section.</p>
  </div>
</div>
```

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

### White Tooltip Styling (HTML)

Source: https://pitviper.turquoise.health/components/tooltips

This example shows how to create a tooltip with inverted colors using the 'data-style="white"' attribute. It follows the same ARIA and role requirements as the default tooltip.

```html
<div class="pv-tooltip" aria-labelledby="description-white" data-style="white">
  <dfn>Common Description</dfn>
  <div role="tooltip" id="description-white">
    <p>Patient underwent abdominal imaging with ultrasound, contrast enhanced ct or contrast mri for hcc.</p>
  </div>
</div>
```
Tokens:
Raw