### Install Qualcomm UI npm Packages

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/nextjs.mdx

Installs the necessary Qualcomm UI packages and their dependencies using npm. This includes core UI components, utility functions, and integration libraries.

```Shell
npm install @qualcomm-ui/react @qualcomm-ui/react-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils @tanstack/react-virtual lucide-react next-themes
```

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

### Define Custom React Router Routes

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Example of defining custom route configurations using `index`, `route`, and `prefix` from `@react-router/dev/routes`. This setup manually maps files to their corresponding URL paths.

```typescript
// src/routes.ts
import {type RouteConfig, route, index, prefix} from "@react-router/dev/routes"

export default [
  // home page
  index("routes/index.mdx"),
  route("setup", "routes/setup.mdx"),

  ...prefix("help", [
    route("contact-us", "routes/help/contact-us.tsx"),
    route("troubleshooting", "routes/help/troubleshooting.tsx"),
  ]),
] satisfies RouteConfig
```

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

### Getting Column Size API

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-sizing.mdx

Provides examples of how to access the current size of columns using different API methods available on header, column, and cell objects.

```typescript
header.getSize()
column.getSize()
cell.column.getSize()
```

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

### CSS Imports for Qualcomm UI Themes

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/vite.mdx

Provides example CSS import statements for different Qualcomm UI brands and themes. It shows how to import specific theme files for Qualcomm, Snapdragon, and Dragonwing brands in both dark and light variants, along with a general import for component styles.

```css
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";

```

```css
@import "@qualcomm-ui/qds-core/themes/snapdragon-dark.css";
@import "@qualcomm-ui/qds-core/themes/snapdragon-light.css";

```

```css
@import "@qualcomm-ui/qds-core/themes/dragonwing-dark.css";
@import "@qualcomm-ui/qds-core/themes/dragonwing-light.css";

```

```css
@import "@qualcomm-ui/qds-core/styles/components.css";

```

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

### Create Nested MDX Page - Markdown

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Example of a nested MDX page (`troubleshooting.mdx`) within a `help+` folder. It follows the same frontmatter and heading structure as a basic page, illustrating how to create hierarchical content.

```markdown
---
title: Troubleshooting
---

# {frontmatter.title}

This page contains common troubleshooting steps.
```

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

### Install Qualcomm UI npm Packages

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/vite.mdx

Installs the core Qualcomm UI React packages and their dependencies using npm. This is the first step in integrating the UI library into a React project.

```shell
npm install @qualcomm-ui/react @qualcomm-ui/react-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils @tanstack/react-virtual lucide-react

```

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

### Create Basic MDX Page - Markdown

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Example of a basic MDX page (`setup.mdx`). It includes frontmatter for the page title and a simple heading. This demonstrates the fundamental structure required for a page to be recognized and rendered by QUI Docs.

```markdown
---
title: Setup
---

# {frontmatter.title}

This page contains setup instructions.
```

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

### Install Qualcomm UI npm Packages

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/react-router.mdx

Installs the required npm packages for integrating Qualcomm UI components with React Router. This includes core UI, router utilities, virtual components, and icon libraries.

```shell
npm create react-router@latest
npm install @qualcomm-ui/react @qualcomm-ui/react-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils @qualcomm-ui/react-router-utils @tanstack/react-virtual lucide-react
```

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

### Client-Side Sorting Setup (TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/sorting.mdx

Enables client-side sorting by including `getSortedRowModel` in the `useReactTable` options, allowing the table to handle sorting internally.

```typescript
import {useReactTable} from "@qualcomm-ui/react/table"
// ...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(), // provide a sorting row model
})
```

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

### Configure QUI Docs Routing Strategy

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Example of implementing a custom `routingStrategy` function within the QUI Docs configuration. This function takes a file path and returns an array of path segments to construct the site URL.

```typescript
// qui-docs.config.ts
import {QuiDocsConfig} from "@qualcomm-ui/mdx-vite"

export default {
  // ...
  routingStrategy: (filePath: string) => {
    // The home route is special and must return `[]`
    if (filePath === "routes/index.mdx") {
      return []
    }
    return filePath.split("/")
  },
} satisfies QuiDocsConfig
```

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

### Setup Grouping and Core Row Model in Angular Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-grouping.mdx

Initializes an Angular table instance with the necessary row models for core functionality and grouping. This setup is crucial for enabling the grouping feature within the table.

```typescript
import {
  createAngularTable
} from "@qualcomm-ui/angular/table"
import {
  getCoreRowModel,
  getGroupedRowModel
} from "@qualcomm-ui/core/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // other options...
    getCoreRowModel: getCoreRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
  }))
}
```

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

### Setup Server-Side Pagination with Manual Pagination (TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/pagination.mdx

For server-side pagination, set `manualPagination: true` to indicate that the provided `data` is already paginated by your backend. The pagination row model is not required in this setup. You must provide the `pageCount` to inform the table of the total number of pages.

```tsx
const table = useReactTable({
  columns,
  data, // already paginated by your backend
  getCoreRowModel: getCoreRowModel(),
  manualPagination: true,
  pageCount: totalPages, // provide total page count
})
```

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

### Set Up Server Action for Theme Changes (TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/react-router.mdx

This server action is responsible for handling theme changes. It utilizes the createThemeAction utility from @qualcomm-ui/react-router-utils/client and requires the qdsThemeCookie for managing theme persistence. The input is the request object, and the output is the result of the theme action.

```ts
// app/routes/action.set-theme.ts
import type {ActionFunction} from "react-router"

import {createThemeAction} from "@qualcomm-ui/react-router-utils/client"

import {qdsThemeCookie} from "../sessions.server"

export const action: ActionFunction = createThemeAction(qdsThemeCookie)
```

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

### React App Root Element with ThemeProvider Integration

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/vite.mdx

Demonstrates how to wrap the root element of a React application with the `<ThemeProvider>` component to enable theme switching functionality. This ensures that all child components have access to the theme context.

```tsx
import {StrictMode} from "react"
import {createRoot} from "react-dom/client"
import {ThemeProvider} from "./theme-provider"
import "./index.css"
import App from "./App.tsx"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

```

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

### Setup Client-Side Pagination (TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/pagination.mdx

To enable client-side pagination, provide the pagination row model using `getPaginationRowModel` from `@qualcomm-ui/core/table`. This approach loads all data upfront and handles paging within the browser. It's suitable for datasets up to approximately 10,000 rows.

```tsx
import {getCoreRowModel, getPaginationRowModel} from "@qualcomm-ui/core/table"
import {useReactTable} from "@qualcomm-ui/react/table"

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})
```

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

### Import CSS for Snapdragon Brand Themes

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/nextjs.mdx

These CSS snippets demonstrate how to import theme files for the Snapdragon brand, covering both dark and light themes. These imports are crucial for applying the correct styles when using the Snapdragon brand.

```css
@import "@qualcomm-ui/qds-core/themes/snapdragon-dark.css";
@import "@qualcomm-ui/qds-core/themes/snapdragon-light.css";
```

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

### Client-Side Pagination Setup with Angular Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/pagination.mdx

Enables client-side pagination by providing the pagination row model to `createAngularTable`. This approach is suitable for datasets that can be loaded entirely in the browser, typically 10,000 rows or less. It requires importing `getCoreRowModel` and `getPaginationRowModel` from `@qualcomm-ui/core/table`.

```typescript
import {createAngularTable} from "@qualcomm-ui/angular/table"
import {getCoreRowModel, getPaginationRowModel} from "@qualcomm-ui/core/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    columns,
    data: this.data(),
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  }))
}
```

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

### Configure Static Theme Provider for Qualcomm UI

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/react-router.mdx

Sets a static theme attribute ('dark' in this example) on the root HTML element to lock the application to a single theme, along with the brand attribute and colorScheme.

```tsx
// [!code word:data-theme="dark"]
<html data-theme="dark" data-brand="qualcomm" style={{colorScheme: "dark"}}>
  {/* ... */}
</html>
```

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

### Theme Toggle Component (React/TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/react-router.mdx

An optional React component that allows users to toggle between light and dark themes. It uses the useTheme hook to get and set the current theme and displays an IconButton with appropriate icons (SunIcon or MoonIcon). Dependencies include lucide-react and @qualcomm-ui components.

```tsx
import {
  type MouseEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useRef,
} from "react"

import {MoonIcon, SunIcon} from "lucide-react"

import {IconButton} from "@qualcomm-ui/react/button"
import {Theme, useTheme} from "@qualcomm-ui/react-router-utils/client"

export function ThemeToggle(): ReactNode {
  const [theme, setTheme] = useTheme()

  const handleThemeSwitch = () => {
    const nextTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK
    setTheme(nextTheme)
  }

  return (
    <IconButton
      aria-label="Toggle Theme"
      icon={theme === Theme.LIGHT ? SunIcon : MoonIcon}
      onClick={handleThemeSwitch}
      size="sm"
      variant="ghost"
    />
  )
}
```

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

### Initialize Nav Configuration in qui-docs.config.ts

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Sets up the basic navigation configuration for the project. It defines the app directory and page directory, and initializes the navConfig array with a reserved entry for the home page (_index).

```typescript
// qui-docs.config.ts
import {QuiDocsConfig} from "@qualcomm-ui/mdx-vite"

export default {
  appDirectory: "src",
  navConfig: [
    {
      // the _index id is reserved for the home page. We'll touch on this later.
      id: "_index",
    },
  ],
  pageDirectory: "routes",
} satisfies QuiDocsConfig
```

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

### Coexisting with Legacy QUI Styles

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-docs/src/routes/installation.mdx

Demonstrates how to import styles from both the legacy `@qui/angular` package and the new Qualcomm UI packages within the same project. This allows for a gradual migration process without immediate conflicts.

```css
/* this is fine */
@import "@qui/styles/dist/all.min.css";
@import "@qui/base/dist/all.min.css";

@import "@qualcomm-ui/qds-core/styles/components.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";
```

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

### Add Setup Page to Nav Configuration

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Adds a new entry to the navConfig array to include the 'setup' page in the sidebar navigation. This ensures the 'Setup' item appears and is ordered correctly within the sidebar.

```typescript
{
  navConfig: [
    // ...
    {
      id: "setup",
    },
  ]
}
```

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

### Expand Help Folder in Sidebar Navigation

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Configures the 'help' folder to be expanded by default in the sidebar. By setting the 'expanded' property to true, the Help folder will automatically open when the application loads, revealing its nested items.

```typescript
{
  navConfig: [
    // ...
    {
      id: "setup",
    },
    {
      expanded: true,
      id: "help",
    },
  ]
}
```

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

### Import Order Example (TypeScript)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/integrations+/eslint.mdx

Demonstrates the recommended import order for TypeScript files, grouping imports by type (built-in/external, internal, parent, sibling). This helps maintain code organization and readability.

```typescript
// 1. Built-in and external packages
import {readFile} from "node:fs/promises"
import React from "react"

// 2. Internal imports
import {utils} from "@/lib/utils"

// 3. Parent imports
import {parent} from "../parent"

// 4. Sibling imports
import {sibling} from "./sibling"

```

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

### Interface Definition Example

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/patterns+/typescript-style-guide.mdx

An example demonstrating how to define an interface in TypeScript to specify the structure of an object. Interfaces are purely for compile-time type checking and do not exist in the generated JavaScript.

```typescript
interface Pizza {
  name: string
  toppings: string[]
}

const pizza: Pizza = {
  name: "cheese",
  toppings: ["Mozzarella"],
}
```

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

### Configure QUI Docs - TypeScript

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Default QUI Docs configuration file (`qui-docs.config.ts`). It specifies the application directory, navigation configuration, and the directory for page routes. This configuration is crucial for how QUI Docs processes and displays your content.

```typescript
// qui-docs.config.ts
import {QuiDocsConfig} from "@qualcomm-ui/mdx-vite"

export default {
  appDirectory: "src",
  navConfig: [
    {
      // The home page sidebar entry is defined via the reserved `_index` id.
      id: "_index",
    },
  ],
  pageDirectory: "routes",
} satisfies QuiDocsConfig
```

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

### Install Tailwind CSS Plugin for Qualcomm UI

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-docs/src/routes/integrations+/tailwind.mdx

Installs the @qualcomm-ui/tailwind-plugin using npm. This plugin extends Tailwind CSS with Qualcomm's design tokens for colors and fonts. It requires a pre-existing Tailwind CSS setup.

```bash
npm install @qualcomm-ui/tailwind-plugin
```

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

### Setting Individual Column Sizes and Defaults

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-sizing.mdx

Demonstrates how to set specific sizes for individual columns using `accessorKey` and override default column sizing globally within table options.

```typescript
const columns = [
  {
    accessorKey: "col1",
    size: 270, // set column size for this column
  },
  // ...
]

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // override default column sizing
    defaultColumn: {
      size: 200, // starting column size
      minSize: 50, // enforced during column resizing
      maxSize: 500, // enforced during column resizing
    },
  }))
}
```

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

### Server-Side Pagination Setup with Angular Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/pagination.mdx

Configures `createAngularTable` for server-side pagination by setting `manualPagination: true`. This indicates that the provided `data` is already paginated by the backend. The `getPaginationRowModel` is not needed in this setup. You must also provide the total `pageCount`.

```typescript
// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    columns,
    data: this.data(), // already paginated by your backend
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    pageCount: totalPages, // provide total page count
  }))
}
```

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

### Individual Column Filter APIs

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/column-filtering.mdx

APIs for getting and setting filter values for individual columns, and querying their filtering status.

```APIDOC
## Individual Column Filter APIs

### Description
These APIs provide granular control over individual column filters, allowing you to get and set filter values and check filtering status.

### `column.getFilterValue`

- **Description**: Gets the current filter value for a specific column.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/filterValue` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### `column.setFilterValue`

- **Description**: Connects filter inputs to `onChange` or `onBlur` handlers, setting the filter value for a column.
- **Method**: POST or PUT
- **Endpoint**: `/column/{columnId}/filterValue` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.
- **Request Body**:
  - **value** (any) - Required - The new filter value to set for the column.

### `column.getCanFilter`

- **Description**: Returns whether filtering is enabled for the specified column.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/canFilter` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### `column.getIsFiltered`

- **Description**: Returns whether the specified column is currently filtered.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/isFiltered` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### `column.getFilterIndex`

- **Description**: Returns the order in which the filter is applied to the specified column.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/filterIndex` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### `column.getAutoFilterFn`

- **Description**: Returns the automatically determined filter function for the specified column.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/autoFilterFn` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### `column.getFilterFn`

- **Description**: Returns the currently used filter function for the specified column.
- **Method**: GET
- **Endpoint**: `/column/{columnId}/filterFn` (Illustrative)
- **Path Parameters**:
  - **columnId** (string) - Required - The unique identifier of the column.

### Request Example (Illustrative for `setFilterValue`)
```json
{
  "value": "active"
}
```

### Response Example (Illustrative for `getFilterValue`)
```json
{
  "filterValue": "active"
}
```

### Response Example (Illustrative for `getCanFilter`)
```json
{
  "canFilter": true
}
```
```

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

### MDX Component Usage with QButton

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/common/mdx-vite/src/docs-plugin/tests/fixtures/indexer/markdown.mdx

Demonstrates how to import and use the QButton component within an MDX file. This showcases the integration of React components directly into Markdown content.

```mdx
import {QButton} from "@qualcomm-ui/react"

<QButton variant="fill">Hello!</QButton>
```

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

### Setup Grouping with React Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/column-grouping.mdx

Demonstrates how to integrate the `getGroupedRowModel` function from `@qualcomm-ui/core/table` into your React Table configuration to enable grouping.

```tsx
import {getGroupedRowModel} from "@qualcomm-ui/core/table"

const table = useReactTable({
  // other options...
  getGroupedRowModel: getGroupedRowModel(),
})
```

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

### Bash Development Workflow Commands for Monorepo

Source: https://context7.com/qualcomm/qualcomm-ui/llms.txt

Commands for managing dependencies, building packages, running development servers, testing, linting, and releasing within the monorepo structure. These scripts facilitate a streamlined development and deployment process.

```bash
# Install dependencies
pnpm i

# Build all packages (excluding docs and configs)
pnpm build

# Build only React packages
pnpm build:react

# Build documentation sites
pnpm build:docs

# Development servers
pnpm dev --filter @qualcomm-ui/react...
pnpm dev --filter @qualcomm-ui/angular...

# Start documentation sites
pnpm react-docs dev
pnpm angular-docs dev

# Run tests
pnpm test
pnpm test:unit:ci

# Linting
pnpm lint
pnpm lint:ci

# Working with specific packages (using aliases)
pnpm react build              # Build @qualcomm-ui/react
pnpm react-core dev          # Dev mode for @qualcomm-ui/react-core
pnpm angular test            # Test @qualcomm-ui/angular
pnpm core build              # Build @qualcomm-ui/core

# Generate TypeScript documentation
pnpm doc-gen

# Release workflow
pnpm prep-release            # Generate changesets and update versions
pnpm publish:all             # Publish to npm
```

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

### Markdown Frontmatter Example

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/common/mdx-vite/src/docs-plugin/tests/fixtures/indexer/markdown.mdx

Illustrates the usage of frontmatter in Markdown files to define metadata. It shows how to access and display frontmatter variables within the content using the `frontmatter` keyword.

```markdown
---
title: Example Page
---

# {frontmatter.title}

This is the content of my page.
```

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

### Creating Framework-Agnostic APIs from State Machines (TypeScript)

Source: https://context7.com/qualcomm/qualcomm-ui/llms.txt

Demonstrates how to create framework-agnostic APIs from state machines, enabling reusable component logic across different UI frameworks. It covers normalizing props for framework compatibility and generating bindings for DOM elements.

```typescript
import {createAccordionApi} from "@qualcomm-ui/core/accordion"
import type {Machine, PropNormalizer} from "@qualcomm-ui/utils/machine"

const machine: Machine<AccordionSchema> = {
  context,
  prop,
  scope,
  send,
  state,
  computed,
  event,
  refs
}

// Normalize props for framework compatibility
const normalize: PropNormalizer = {
  element: (props) => props // Framework-specific normalization
}

const api = createAccordionApi(machine, normalize)

// API provides:
// - State getters: api.value, api.focusedValue
// - State setters: api.setValue(['item1', 'item2'])
// - Binding generators for DOM elements
const rootBindings = api.getRootBindings({id: 'accordion-1', onDestroy})
const itemBindings = api.getAccordionItemBindings({
  id: 'item-1',
  value: 'item1',
  disabled: false,
  onDestroy
})
const triggerBindings = api.getAccordionItemTriggerBindings({
  id: 'trigger-1',
  value: 'item1',
  disabled: false,
  onDestroy
})

```

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

### Client-Side Global Filtering Setup

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/global-filtering.mdx

Enables client-side global filtering by including the `getFilteredRowModel` function in the table options. This allows the table to handle filtering directly within the browser.

```tsx
import {
  useReactTable,
  getFilteredRowModel,
  getCoreRowModel
} from "@tanstack/react-table"

const table = useReactTable({
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})
```

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

### Client-Side Filtering Setup with React Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/column-filtering.mdx

Demonstrates how to enable client-side filtering by providing the `getFilteredRowModel` function to the `useReactTable` hook. This is necessary for the table to handle filtering logic within the browser.

```tsx
import {
  useReactTable,
  getCoreRowModel
} from "@qualcomm-ui/react/table"
import {
  getFilteredRowModel
} from "@qualcomm-ui/core/table"

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(), // needed for client-side filtering
})
```

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

### Machine Context and Bindable Values for State Management (TypeScript)

Source: https://context7.com/qualcomm/qualcomm-ui/llms.txt

Explains the concept of 'Bindable' values for bridging machine state with framework reactivity and 'BindableContext' for typed access to these values. It also shows how to define reactive context properties within a machine configuration.

```typescript
import type {Bindable, BindableContext} from "@qualcomm-ui/utils/machine"

// Bindable: bridges machine state with framework reactivity
interface Bindable<T, ChangeEvent> {
  get: () => T
  set: (value: ValueOrFn<T>, args?: ChangeEvent) => void
  hash: (value: T | undefined) => string
  initial: T | undefined
  invoke: (nextValue: T, prevValue: T) => void
  ref: any
}

// Context: collection of bindables with typed access
const context: BindableContext<Schema> = {
  get: <K>(key: K) => value,
  set: <K>(key: K, value: ValueOrFn<T>, ...details) => void,
  initial: <K>(key: K) => T | undefined,
  hash: <K>(key: K) => string | undefined
}

// Usage in machine configuration
const machineConfig = {
  context: ({bindable, prop}) => ({
    value: bindable<string[]>(() => ({
      defaultValue: prop("defaultValue") || [],
      value: prop("value"),
      onChange(value) {
        prop("onValueChange")?.(value)
      }
    })),
    focusedValue: bindable<string | null>(() => ({
      defaultValue: null,
      onChange(value) {
        prop("onFocusChange")?.(value)
      },
      sync: true
    }))
  })
}

```

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

### Configure Fonts with Next.js

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/nextjs.mdx

Configures Roboto Flex and Roboto Mono fonts using next/font/google for your Next.js application. These fonts are essential for the visual styling of QUI components.

```TypeScript
import type {Metadata} from "next"
import {Roboto_Flex, Roboto_Mono} from "next/font/google"
import "./globals.css"
import {type ReactNode} from "react"

const sansFont = Roboto_Flex({
  variable: "--font-roboto-flex",
  weight: ["400", "500", "600"],
  subsets: ["latin"],
})

const monoFont = Roboto_Mono({
  variable: "--font-roboto-mono",
  subsets: ["latin"],
})

export const metadata: Metadata = {
  title: "Your App Title",
  description: "Your app description",
}

export default function RootLayout({
  children,
}: Readonly<{children: ReactNode}>) {
  return (
    <html lang="en">
      <body className={`${sansFont.variable} ${monoFont.variable}`}>
        {children}
      </body>
    </html>
  )
}
```

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

### Angular Accordion Component Example

Source: https://context7.com/qualcomm/qualcomm-ui/llms.txt

Demonstrates the usage of the Angular Accordion component, including basic configuration and integration with Angular's reactive forms. It shows how to pass data for accordion items and handle value changes. Dependencies include Angular core modules and the AccordionModule from @qualcomm-ui/angular.

```typescript
import {Component} from "@angular/core"
import {AccordionModule} from "@qualcomm-ui/angular/accordion"

@Component({
  imports: [AccordionModule],
  selector: "accordion-example",
  template: `
    <q-accordion
      [value]="value"
      (valueChange)="onValueChange($event)"
      [multiple]="true"
      [collapsible]="true"
      class="w-96"
    >
      <q-accordion-item
        *ngFor="let item of items"
        [value]="item.value"
        [text]="item.text"
        [disabled]="item.disabled"
      >
        {{ item.content }}
      </q-accordion-item>
    </q-accordion>
  `
})
export class AccordionExample {
  items = [
    {value: 'a', text: 'Item A', content: 'Content A', disabled: false},
    {value: 'b', text: 'Item B', content: 'Content B', disabled: false},
    {value: 'c', text: 'Item C', content: 'Content C', disabled: true}
  ]

  value: string[] = ['a']

  onValueChange(values: string[]) {
    console.log('Open items:', values)
    this.value = values
  }
}

// With Angular Forms
import {FormControl, ReactiveFormsModule} from "@angular/forms"

@Component({
  imports: [AccordionModule, ReactiveFormsModule],
  template: `
    <q-accordion [formControl]="accordionControl" [multiple]="true">
      <q-accordion-item value="a" text="First">Content</q-accordion-item>
      <q-accordion-item value="b" text="Second">Content</q-accordion-item>
    </q-accordion>
  `
})
export class FormExample {
  accordionControl = new FormControl<string[]>(['a'])

  ngOnInit() {
    this.accordionControl.valueChanges.subscribe(values => {
      console.log('Form value:', values)
    })
  }
}

```

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

### Checkbox with React Hook Form

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/components+/checkbox+/_checkbox.mdx

Shows how to integrate the Checkbox component with React Hook Form for state management and validation. This example assumes prior setup of React Hook Form.

```tsx
<Demo
  expanded
  name="CheckboxReactHookFormDemo"
  component={demos.CheckboxReactHookFormDemo}
/>

```

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

### Configure Nested Routes for Help Section

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Defines the order and structure of nested routes within the 'help' section. It explicitly lists 'troubleshooting' and 'contact-us' as children of the 'help' item, ensuring they appear in the desired order in the sidebar.

```typescript
{
  navConfig: [
    // ...
    {
      id: "setup",
    },
    {
      expanded: true,
      id: "help",
      children: [
        {
          id: "troubleshooting",
        },
        {
          id: "contact-us",
        },
      ],
    },
  ]
}
```

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

### Conditionally Enable Row Selection in Angular

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/row-selection.mdx

Demonstrates how to conditionally enable row selection using the `enableRowSelection` option in Angular. This example allows selection only for rows where the associated age is greater than 18.

```typescript
import {createAngularTable} from "@qualcomm-ui/angular/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    enableRowSelection: (row) => row.original.age > 18, // only enable row selection for adults
    // ...
  }))
}
```

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

### Select Examples (Simple, Composite, ARIA Label, Content Width, Trigger Icon, Items as Objects, Sizes, Content Height, Multiple Selection, Controlled Dropdown, Error Handling, Item Customization, Within Dialog, Within Popover)

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-docs/src/routes/components+/select+/_select.mdx

Demonstrates various use cases and configurations of the Select component. Includes examples for simple and composite APIs, accessibility with ARIA labels, controlling content width, adding trigger icons, using objects for items, different sizes, managing content height, enabling multiple selections, controlling dropdown visibility, displaying error states, customizing items, and integrating within dialogs and popovers.

```tsx
<QdsDemo name="SelectSimpleDemo" />
```

```tsx
<QdsDemo name="SelectCompositeDemo" />
```

```tsx
<QdsDemo name="SelectAriaLabelDemo" />
```

```tsx
> [!note]
> If you're using the composite API, provide the `aria-label` attribute to the `q-select-trigger` element instead.
```

```tsx
<QdsDemo name="SelectSameWidthDemo" />
```

```tsx
<QdsDemo name="SelectIconDemo" />
```

```tsx
<QdsDemo name="SelectItemsDemo" />
```

```tsx
<QdsDemo name="SelectSizesDemo" />
```

```tsx
<QdsDemo name="SelectMaxHeightDemo" />
```

```tsx
<QdsDemo name="SelectMultipleDemo" />
```

```tsx
<QdsDemo name="SelectControlledOpenDemo" />
```

```tsx
<QdsDemo name="SelectErrorDemo" />
```

```tsx
<QdsDemo name="SelectItemCustomizationDemo" />
```

```tsx
<QdsDemo name="SelectWithinDialogDemo" />
```

```tsx
<QdsDemo name="SelectWithinPopoverDemo" />
```

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

### Select Trigger Icon Example - TypeScript React

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/components+/select+/_select.mdx

Demonstrates adding an icon to the start of the Select's trigger element using the `icon` prop. This allows for visual enhancement of the trigger.

```tsx
import {
  Select,
  SelectCollection,
  SelectProps
} from "@qualcomm-ui/react/select"
import { Icon } from "@qualcomm-ui/react/icon"

const selectCollection = new SelectCollection([
  {label: "Option 1", value: "1"},
  {label: "Option 2", value: "2"},
])

function SelectIconDemo(props: SelectProps) {
  return (
    <Select 
      collection={selectCollection} 
      icon={<Icon name="search" />} 
      {...props} 
    />
  )
}

```

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

### Tabs with Icons and Variants Example

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/components+/tabs+/_tabs.mdx

Shows how to add start and end icons to tabs and customize their appearance using the iconVariant and variant props. Supports different visual styles for tabs.

```tsx
import React from "react"
import {Tabs} from "@qualcomm-ui/react/tabs"
import {IconStar, IconClose} from "@tabler/icons-react"
import {TabsIconsDemo} from "./demos"

const TabsIconsVariantsExample = () => (
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Tab value="tab1" startIcon={<IconStar />} endIcon={<IconClose />}>Tab 1</Tabs.Tab>
      <Tabs.Tab value="tab2" variant="outline">Tab 2</Tabs.Tab>
    </Tabs.List>
    <Tabs.Panel value="tab1">
      <div>Content for Tab 1</div>
    </Tabs.Panel>
    <Tabs.Panel value="tab2">
      <div>Content for Tab 2</div>
    </Tabs.Panel>
  </Tabs.Root>
)

export default TabsIconsVariantsExample

```

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

### Configure Theme Provider in Next.js

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/nextjs.mdx

Integrates the next-themes ThemeProvider into your Next.js root layout to enable light and dark mode switching. This ensures the user's theme preference is remembered.

```TypeScript
// previous imports and setup...
import {ThemeProvider} from "next-themes";

<html lang="en" data-brand="qualcomm" suppressHydrationWarning>
  <body className={`${sansFont.variable} ${monoFont.variable}`}>
    <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
  </body>
</html>
```

```TypeScript
import type {Metadata} from "next"
import {Roboto_Flex, Roboto_Mono} from "next/font/google"
import "./globals.css"
import {type ReactNode} from "react"
import {ThemeProvider} from "next-themes"

const sansFont = Roboto_Flex({
  variable: "--font-roboto-flex",
  weight: ["400", "500", "600"],
  subsets: ["latin"],
})

const monoFont = Roboto_Mono({
  variable: "--font-roboto-mono",
  subsets: ["latin"],
})

export const metadata: Metadata = {
  title: "Your App Title",
  description: "Your app description",
}

export default function RootLayout({
  children,
}: Readonly<{children: ReactNode}>) {
  return (
    <html lang="en" data-brand="qualcomm" suppressHydrationWarning>
      <body className={`${sansFont.variable} ${monoFont.variable}`}>
        <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
      </body>
    </html>
  )
}
```

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

### Disable Sorting for Columns or Entire Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/sorting.mdx

Provides examples of how to disable sorting functionality. The `enableSorting` option can be set on individual columns to disable sorting for that specific column, or on the table itself to disable it globally.

```javascript
const columns = [
  {
    header: () => "ID",
    accessorKey: "id",
    enableSorting: false, // disable sorting for this column
  },
  {
    header: () => "Name",
    accessorKey: "name",
  },
  // ...
]

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    columns,
    data: this.data(),
    enableSorting: false, // disable sorting for the entire table
  }))
}
```

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

### Manual Server-Side Filtering Setup with React Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/column-filtering.mdx

Illustrates setting up manual server-side filtering by enabling the `manualFiltering` option. This skips the table's client-side filtering logic, assuming filtering is handled externally.

```tsx
import {
  useReactTable,
  getCoreRowModel
} from "@qualcomm-ui/react/table"

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  manualFiltering: true,
})
```

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

### Angular Button Component Example

Source: https://context7.com/qualcomm/qualcomm-ui/llms.txt

Illustrates the Angular Button component with various styling options, icon integration, and event handling. It showcases emphasis, variants, density, disabled, and loading states. Dependencies include Angular core modules and ButtonModule from @qualcomm-ui/angular.

```typescript
import {Component} from "@angular/core"
import {ButtonModule} from "@qualcomm-ui/angular/button"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {ExternalLink, Download, Trash2} from "lucide-angular"

@Component({
  imports: [ButtonModule],
  providers: [provideIcons({ExternalLink, Download, Trash2})],
  selector: "button-example",
  template: `
    <div class="flex gap-4">
      <!-- Emphasis variations -->
      <button
        q-button
        emphasis="primary"
        variant="fill"
        startIcon="ExternalLink"
      >
        Primary Action
      </button>

      <button q-button emphasis="neutral" variant="fill">
        Neutral Action
      </button>

      <button
        q-button
        emphasis="danger"
        variant="fill"
        startIcon="Trash2"
      >
        Delete
      </button>

      <!-- Variant styles -->
      <button q-button variant="fill">Filled</button>
      <button q-button variant="outline">Outlined</button>
      <button q-button variant="ghost">Ghost</button>

      <!-- With icons -->
      <button q-button startIcon="Download" endIcon="ExternalLink">
        Download
      </button>

      <!-- Density -->
      <button q-button density="compact">Compact</button>
      <button q-button density="normal">Normal</button>
      <button q-button density="spacious">Spacious</button>

      <!-- States -->
      <button q-button [disabled]="true">Disabled</button>
      <button q-button [loading]="isLoading">Loading...</button>

      <!-- Event handling -->
      <button
        q-button
        (click)="onClick($event)"
        (focus)="onFocus()"
      >
        Interactive
      </button>
    </div>
  `
})
export class ButtonExample {
  isLoading = false

  onClick(event: MouseEvent) {
    console.log('Button clicked', event)
  }

  onFocus() {
    console.log('Focused')
  }
}

```

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

### Configure Google Fonts for Qualcomm UI

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/react-router.mdx

Adds necessary Google Fonts links to the application's head element for Roboto Flex and Roboto Mono, which are essential for Qualcomm UI component styling.

```tsx
// root.tsx
<html lang="en">
  <head>
    {/* ... */}
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link href="https://fonts.gstatic.com" rel="preconnect" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,400..600&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400..500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>{/* ... */}</body>
</html>
```

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

### Configure Table Columns with Sorting Functions

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/sorting.mdx

Shows how to configure table columns using the `columns` array. It illustrates using built-in sorting functions by name (e.g., 'alphanumeric', 'datetime') and referencing custom global or inline sorting functions.

```javascript
const columns = [
  {
    header: () => "Name",
    accessorKey: "name",
    sortingFn: "alphanumeric", // use built-in sorting function by name
  },
  {
    header: () => "Age",
    accessorKey: "age",
    sortingFn: "myCustomSortingFn", // use custom global sorting function
  },
  {
    header: () => "Birthday",
    accessorKey: "birthday",
    sortingFn: "datetime", // recommended for date columns
  },
  {
    header: () => "Profile",
    accessorKey: "profile",
    // use custom sorting function directly
    sortingFn: (rowA, rowB, columnId) => {
      return rowA.original.someProperty - rowB.original.someProperty
    },
  },
]

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    columns,
    data: this.data(),
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    sortingFns: {
      // add a custom sorting function
      myCustomSortingFn: (rowA, rowB, columnId) => {
        return rowA.original[columnId] > rowB.original[columnId]
          ? 1
          : rowA.original[columnId] < rowB.original[columnId]
            ? -1
            : 0
      },
    },
  }))
}
```

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

### Set Initial Column Filter State in Angular Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-filtering.mdx

This example shows how to define an initial state for column filters using the `initialState.columnFilters` option within the `createAngularTable` configuration. This pre-populates filters when the table loads.

```typescript
table = createAngularTable(() => ({
  columns,
  data: this.data(),
  // ...
  initialState: {
    columnFilters: [
      {
        id: "name",
        value: "John", // filter the name column by 'John' by default
      },
    ],
  },
}))
```

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

### Access Column Filter State in Angular Table

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-filtering.mdx

This example shows how to access the current column filter state from an initialized table instance using `table.getState().columnFilters`. This is useful for observing or logging filter configurations.

```typescript
table = createAngularTable(() => ({
  columns,
  data: this.data(),
  // ...
}))

// in a method or effect
console.log(this.table.getState().columnFilters)
```

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

### HTML Structure with Theme and Brand Attributes

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/vite.mdx

Illustrates the expected structure of the HTML `<html>` element after the ThemeProvider has configured the theme and brand attributes. These attributes are crucial for applying the correct styles based on the selected theme (light/dark) and brand (qualcomm, snapdragon, dragonwing).

```html
<html
  data-brand="qualcomm"
  data-theme="light"
  style="color-scheme: light"
></html>

```

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

### Import Qualcomm UI CSS Styles

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-docs/src/routes/setup+/vite.mdx

Imports the necessary CSS for Qualcomm UI components. Includes options for default CSS imports and integration with Tailwind CSS, specifying component and theme styles.

```css
@import "@qualcomm-ui/qds-core/styles/components.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";

```

```css
@import "tailwindcss";

/* Recommended: install and import @qualcomm-ui/tailwind-plugin */
@import "@qualcomm-ui/tailwind-plugin/qui-strict.css";

/* Important: always order these imports after the tailwindcss import */
@import "@qualcomm-ui/qds-core/styles/components.css" layer(components);
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css" layer(components);
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css" layer(components);

```

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

### Clone QUI Repository

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

Clones the Qualcomm UI repository from GitHub. This is the first step in setting up a local development environment.

```bash
git clone https://github.com/<username>/qualcomm-ui.git
```

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

### Render Row Selection UI with Checkbox Inputs

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/row-selection.mdx

Provides examples of connecting row selection APIs to checkbox inputs for toggling row selection. It covers selecting individual rows, all rows, and all rows on the current page.

```tsx
const columns = [
  {
    id: "select-col",
    header: ({table}) => (
      <Checkbox
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        onChange={table.getToggleAllRowsSelectedHandler()} // or getToggleAllPageRowsSelectedHandler
      />
    ),
    cell: ({row}) => (
      <Checkbox
        checked={row.getIsSelected()}
        disabled={!row.getCanSelect()}
        onChange={row.getToggleSelectedHandler()}
      />
    ),
  },
  // ... more column definitions...
]
```

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

### Applying Column Widths in Angular HTML

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/angular-table-docs/src/routes/feature-guides+/column-sizing.mdx

Shows how to bind the calculated column size to the `width.px` style property of a table header cell in an Angular template.

```html
<tr q-table-row>
  @for (header of headerGroup.headers; track header.id) {
    <th
      q-table-header-cell
      [attr.colspan]="header.colSpan"
      [style.width.px]="header.getSize()">
      <!-- ... -->
    </th>
  }
</tr>
```

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

### Enable Row Selection Conditionally with TypeScript

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/react-table-docs/src/routes/feature-guides+/row-selection.mdx

Demonstrates how to conditionally enable row selection using a function passed to the `enableRowSelection` option. This allows fine-grained control over which rows are selectable, for example, based on a row's properties.

```typescript
import {useReactTable} from "@qualcomm-ui/react/table"

const table = useReactTable({
  enableRowSelection: (row) => row.original.age > 18, // only enable row selection for adults
  // ...
})
```

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

### Home Page Frontmatter Configuration

Source: https://github.com/qualcomm/qualcomm-ui/blob/main/packages/docs/qui-docs/src/routes/guide+/page-setup.mdx

Defines the frontmatter for the home page (index.mdx). It sets the 'id' to '_index' to identify it as the home route and 'title' for display. 'hideBreadcrumbs' is set to true to disable breadcrumbs on the root route.

```markdown
---
hideBreadcrumbs: true
id: _index
title: Introduction
---

# {frontmatter.title}
```