### Configure Toast Component Anatomy and Examples

Source: https://reka-ui.com/llms-full.txt

Provides the structural setup for Toast components using Provider, Root, and Viewport. Includes examples for customizing hotkeys, durations, and handling multiple toast instances.

```vue
<template>
  <ToastProvider>
    <ToastRoot>
      <ToastTitle />
      <ToastDescription />
      <ToastAction />
      <ToastClose />
    </ToastRoot>
    <ToastViewport />
  </ToastProvider>
</template>
```

```vue
<template>
  <ToastViewport :hotkey="['altKey', 'KeyT']" />
  <ToastRoot :duration="3000">
    <ToastDescription>Saved!</ToastDescription>
  </ToastRoot>
  <ToastRoot v-for="(_, index) in count" :key="index">
    <ToastDescription>Saved!</ToastDescription>
  </ToastRoot>
</template>
```

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

### Flexible Layouts with Viewport Example

Source: https://reka-ui.com/docs/components/navigation-menu

Example showcasing flexible layout options using the Viewport part for advanced control over Content rendering and animation.

```APIDOC
## Flexible Layouts with Viewport Example

### Description
This example illustrates how to use the `NavigationMenuViewport` component to gain extra control over where `NavigationMenuContent` is rendered. This is useful for designs requiring adjusted DOM structures or advanced animations. Tab focus is automatically maintained.

### Vue Component

```vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'reka-ui'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent>Item one content</NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent>Item two content</NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>

    <!-- NavigationMenuContent will be rendered here when active -->
    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>
```
```

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

### Install Reka UI (npm)

Source: https://reka-ui.com/docs/components/tree.html

Command to install the Reka UI library using npm. This is the first step to integrate Reka UI components into your project.

```sh
    $ npm add reka-ui
```

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

### Install Reka UI package

Source: https://reka-ui.com/docs/overview/installation.html

Command to install the core reka-ui package using the npm package manager.

```sh
npm add reka-ui
```

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

### Install Reka UI Package (npm)

Source: https://reka-ui.com/docs/components/label

This command installs the 'reka-ui' package using npm. This is the first step in integrating Reka UI components into your project.

```bash
$ npm add reka-ui
```

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

### Toast Configuration Examples

Source: https://reka-ui.com/docs/components/toast

Common implementation patterns for Toast components including custom durations and swipe animations.

```APIDOC
### Custom Duration
```vue
<ToastRoot :duration="3000">
  <ToastDescription>Saved!</ToastDescription>
</ToastRoot>
```

### Swipe Gesture Animation
Use CSS variables with data attributes:
```css
.ToastRoot[data-swipe='move'] {
  transform: translateX(var(--reka-toast-swipe-move-x));
}

.ToastRoot[data-swipe='end'] {
  animation: slideRight 100ms ease-out;
}
```
```

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

### Example: Menubar with Submenus

Source: https://reka-ui.com/llms-full.txt

Demonstrates how to create nested submenus within the Reka UI Menubar component.

```APIDOC
## Example: Menubar with Submenus

### Description
You can create submenus by using `MenubarSub` in combination with its parts.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```vue
<script setup lang="ts">
import {
  MenubarArrow,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'reka-ui'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Sub menu →</MenubarSubTrigger>
            <MenubarPortal>
              <MenubarSubContent>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarArrow />
              </MenubarSubContent>
            </MenubarPortal>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### Response
N/A (Component Example)
```

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

### Configure Tooltip Globally

Source: https://reka-ui.com/llms-full.txt

Example of configuring `delayDuration` and `skipDelayDuration` globally using the `Provider` component.

```APIDOC
## Configure globally

Use the `Provider` to control `delayDuration` and `skipDelayDuration` globally.

```vue line=7-8
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

<template>
  <TooltipProvider
    :delay-duration="800"
    :skip-delay-duration="500"
  >
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
  </TooltipProvider>
</template>
```
```

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

### JavaScript: Complex Initialization and Event Handling

Source: https://translate.google.com/

This extensive function 'lM' appears to be a core initialization or setup routine. It uses nested switch statements based on complex conditions derived from input parameters and internal state. It handles object property access, function calls ('h', 'e', 'T', 'xn'), event listener registration ('addEventListener', 'removeEventListener'), and asynchronous operations ('document.readyState', 'DOMContentLoaded', 'load'). It's highly complex and likely central to the application's setup.

```javascript
lM\\\u003dfunction(n,F,u,a,N,f,Z,K,O,H,t,W,r){W\\\u003dn\[0\];switch(!(W\\\u003d\\\u003ds0)){case 0\\\u003d\\\u003d\\\u003d-Number()!\\\u003d\[\]:switch(!(W\\\u003d\\\u003dfx)){case true:switch(!(W\\\u003d\\\u003dOI)){case NaN!\\\u003d\\\u003dNaN:switch(!(W\\\u003d\\\u003dYx)){case \[\]!\\\u003dtrue:switch(!(W\\\u003d\\\u003dxx)){case true:if(W\\\u003d\\\u003dI8)return f\\\u003dn\[2\],h(n\[6\],a,F),e(a,390,f),a.T(n);W\\\u003d\\\u003dmR?(a.T(n),a.Ie\\\u003d\[\],a.oe\\\u003d\[\],a.u\\\u003dnull):W\\\u003d\\\u003dxn\\\u0026\\\u0026(Z\\\u003dv.parent,Z.document.readyState\\\u003d\\\u003d\\\u003d\\\\"loading\\\\"\\\u0026\\\u0026(a.S\\\u003dfunction(C,M){function E(D){for(D\\\u003d72;D!\\\u003d13;)D\\\u003d\\\u003d72?D\\\u003dM?13:68:D\\\u003d\\\u003d68\\\u0026\\\u0026(M\\\u003du,Z.document.removeEventListener(\\\\"DOMContentLoaded\\\\",E,Lx),Z.removeEventListener(\\\\"load\\\\",E,Lx),C(),D\\\u003d13)}(Z.document.addEventListener(\\\\"DOMContentLoaded\\\\",(M\\\u003dfalse,E),Lx),Z).addEventListener(\\\\"load\\\\",E,Lx)}));break;case NaN\\\u003d\\\u003d\\\u003dNumber(true.true):try{for(r\\\u003d0;r\\\u003ca.ww.length;r++)try{K\\\u003da.ww\[r\],K\[0\]\[K\[1\]\](K\[2\])}catch(C){}}catch(C){}(0,n\[1\])(function(C,M){a.ae(C,u,M)},(t\\\u003d(a.ww\\\u003d\[\],a).J(),function(C){U(33,0,\[(C\\\u003d!a.B.length\\\u0026\\\u0026!a.V,mR)\],a),C\\\u0026\\\u0026x(68,0,false,a,u)}),function(C){r
```

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

### Implement Tree view with multi-selection and virtualization

Source: https://reka-ui.com/llms-full.txt

Provides examples for initializing a Tree component, enabling multi-selection via v-model, and optimizing performance for large datasets using TreeVirtualizer.

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

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref([people[0], people[1]])
</script>

<template>
  <TreeRoot
    v-model="selectedPeople"
    multiple
  >
    ...
  </TreeRoot>
</template>
```

```vue
<script setup lang="ts">
import { TreeItem, TreeRoot, TreeVirtualizer } from 'reka-ui'
import { ref } from 'vue'
</script>

<template>
  <TreeRoot :items>
    <TreeVirtualizer
      v-slot="{ item }"
      :text-content="(opt) => opt.name"
    >
      <TreeItem v-bind="item.bind">
        {{ person.name }}
      </TreeItem>
    </TreeVirtualizer>
  </TreeRoot>
</template>
```

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

### Reka UI Autocomplete Basic Usage Example (Vue)

Source: https://reka-ui.com/llms-full.txt

This example shows the basic implementation of the Reka UI Autocomplete component in Vue. It demonstrates how to bind the input value using `v-model` and populate the autocomplete items from a list. The `modelValue` directly reflects user input, and item selection updates the input text.

```vue
<script setup lang="ts">
import { AutocompleteContent, AutocompleteInput, AutocompleteItem, AutocompletePortal, AutocompleteRoot } from 'reka-ui'
import { ref } from 'vue'

const searchText = ref('')
const fruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Pineapple']
</script>

<template>
  <AutocompleteRoot v-model="searchText">
    <AutocompleteInput placeholder="Type a fruit..." />
    <AutocompletePortal>
      <AutocompleteContent>
        <AutocompleteItem
          v-for="fruit in fruits"
          :key="fruit"
          :value="fruit"
        >
          {{ fruit }}
        </AutocompleteItem>
      </AutocompleteContent>
    </AutocompletePortal>
  </AutocompleteRoot>
</template>
```

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

### Vue Tooltip Component Setup

Source: https://reka-ui.com/docs/components/tooltip

Sets up the basic Tooltip component in Vue.js using Reka UI. It imports necessary components and provides a template for the tooltip trigger and content.

```vue
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipContent class="TooltipContent">
      …
    </TooltipContent>
  </TooltipRoot>
</template>
```

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

### Example: Menubar with Disabled Items

Source: https://reka-ui.com/llms-full.txt

Illustrates how to visually indicate disabled items in the Reka UI Menubar using the `disabled` attribute and CSS.

```APIDOC
## Example: Menubar with Disabled Items

### Description
You can add special styles to disabled items via the `data-disabled` attribute.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```vue
<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'reka-ui'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem
            class="MenubarItem"
            disabled
          >
            …
          </MenubarItem>
          <MenubarItem class="MenubarItem">
            …
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### Response
N/A (Component Example)
```

```APIDOC
```css
/* styles.css */
.MenubarItem[data-disabled] {
  color: gainsboro;
}
```
```

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

### Vue Command Menu using Combobox

Source: https://reka-ui.com/docs/components/combobox

Illustrates how to build a custom Command Menu component in Vue by abstracting the primitive parts of the Combobox. This example shows a basic structure for creating a command interface.

```vue
<script setup lang="ts">
import { Command, CommandItem } from './your-command'
</script>

<template>
  <Command>
    <CommandItem value="1">
      Item 1
    </CommandItem>
    <CommandItem value="2">
      Item 2
    </CommandItem>
    <CommandItem value="3">
      Item 3
    </CommandItem>
  </Command>
</template>
```

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

### Implementing a Popover Component

Source: https://reka-ui.com/llms-full.txt

Provides the necessary imports and template structure to implement a Popover component using Reka UI. This example shows how to import various Popover parts and assemble them. Requires 'reka-ui'.

```vue
<!-- Popover.vue -->
<script setup lang="ts">
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>More info</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent>
        Some more info...
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
```

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

### Basic Label Component Usage (Vue)

Source: https://reka-ui.com/docs/components/label

This Vue script demonstrates the basic usage of the Label component from 'reka-ui'. It imports the component and renders it within a template. This is a fundamental example for integrating Reka UI components.

```vue
<script setup>
import { Label } from 'reka-ui'
</script>

<template>
  <Label />
</template>
```

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

### Import and Assemble Combobox Components

Source: https://reka-ui.com/docs/components/combobox

Demonstrates the required imports and the basic template structure for implementing a Combobox using Reka UI components in a Vue 3 setup.

```vue
<script setup lang="ts">
import {
  ComboboxAnchor,
  ComboboxArrow,
  ComboboxCancel,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxLabel,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxViewport,
} from 'reka-ui'
</script>

<template>
  <ComboboxRoot>
    <ComboboxAnchor>
      <ComboboxInput />
      <ComboboxTrigger />
      <ComboboxCancel />
    </ComboboxAnchor>

    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxViewport>
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>
```

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

### Basic Color Area Component Setup (Vue)

Source: https://reka-ui.com/llms-full.txt

Sets up the basic structure for the Color Area component using `ColorAreaArea`, `ColorAreaRoot`, and `ColorAreaThumb` from 'reka-ui'. The `v-slot` on `ColorAreaRoot` provides a `style` object to be applied to `ColorAreaArea` for positioning.

```vue
<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
</script>

<template>
  <ColorAreaRoot v-slot="{ style }">
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>
```

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

### Global Configuration and Initialization

Source: https://translate.google.com/

Handles global configuration loading and initialization. It retrieves configuration from `window.gbar_.CONFIG` and sets up a global logger instance `_.Td`.

```javascript
var Sd;
window.gbar_&&window.gbar_.CONFIG?Sd=window.gbar_.CONFIG[0]||{}:
Sd=[];
_.Qd=new Pd(Sd);
var Id;
Id = _.H(
_.Qd,
Hd,
3
) || new Hd;
_.Td=new Jd;
_.D("gbar_._DumpException",function(a){
_.Td?_.Td.log(a):
console.error(a)
});
```

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

### Configure Reka UI with unplugin-vue-components

Source: https://reka-ui.com/docs/overview/installation.html

Integrate Reka UI with unplugin-vue-components in your vite.config.ts to automatically resolve and import components.

```ts
import Components from 'unplugin-vue-components/vite'
import RekaResolver from 'reka-ui/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [
        RekaResolver()
      ],
    }),
  ],
})
```

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

### Initialize and manage UI components (JavaScript)

Source: https://translate.google.com/

This snippet demonstrates the initialization and management of various UI components like menus, buttons, and dialogs. It sets up event listeners for actions such as 'open', 'close', and 'msc', and configures component visibility and behavior based on project settings.

```JavaScript
var Y=function(a,b,c,d){\_.W.call(this);this.o=a;\_.zf(this.o,"gb_Pd");this.j=b;this.N=c;this.La="";this.Ra=d;this.B=this.i=null;this.na=this.O=this.M=!1;this.fa=\_.Gb(\_.T(this.j,16),!1);this.cb=new \_.lg(this);this.U=\_.V("gb_nd",this.o);this.ea=\_.V("gb_sd",this.o);this.Ea=\_.V("gb_je",this.o);this.R=\_.V("gb_J",this.o); (this.K=\_.Gb(\_.T(b,6),!1))&&this.U&&Wi(this);this.Ac=\_.V("gb_rd",this.U);this.C=\_.V("gb_Id",this.o);this.L=\_.V("gb_a",this.o);this.D=\_.V("gb_0d",this.o);this.A=\_.V("gb_pd",this.o);this.v= \_.V("gb_Zd",this.o);this.W=Array.prototype.slice.call(\,.kh("gb_Ld",this.o));this.S=!1;this.rc=\_.Gb(\_.T(this.j,19),!1);this.qc=\_.Gb(\_.T(this.j,20),!1);this.oc=\_.Gb(\_.T(this.j,45),!1);a=Xi(this,!0);b=Xi(this,!1);this.vc=Math.max(a,b);this.V=\_.T(this.j,15);c=\_.dg(\_.Re(this.j,30),0);c!=0&&Yi(this,c);a=Zi(this,a,b);this.G=new Vi(document.body,$i);this.Cb=\_.y(\_.L(this.j,37));this.Ab=\_.y(\_.L(this.j,38));this.Dc=\_.Gb(\_.T(this.j,39));this.uc=\_.Gb(\_.T(this.j,1),!1);this.tc=\_.Gb(\_.T(this.j,40),!1);aj(this); bj(this,this.G.i);this.G.j("catc",this.nc,this);\_.J(this.j,8)&&document.addEventListener("scroll",(0,\_.C)(function(){\_.X(this.o,"gb_Sd",window.scrollY>0)},this));this.v!=null&&\_.J(this.j,7)&&(this.Z=new Vi(this.v,a),this.Z.j("catc",this.da,this),this.da());this.F=null;if(this.T=\_.V("gb_Xa",this.o))this.F=\_.V("gb_Vc",this.T),this.cb.o(this.F,"error",this.Bj,!1,this)};\_.z(Y,\_.W);\_.l=Y.prototype; \_.l.Bj=function(){this.F!=null&&(this.F.src="https://www.gstatic.com/images/icons/material/system/1x/broken_image_grey600_18dp.png",this.F.srcset="https://www.gstatic.com/images/icons/material/system/1x/broken_image_grey600_18dp.png 1x, https://www.gstatic.com/images/icons/material/system/2x/broken_image_grey600_18dp.png 2x",\_.Bg(this.F,"width","auto"),\_.xf(this.F.parentElement,"gb_6a"))};_.l.H=function(){return this.o};_.l.ml=function(a){this.B=a;cj(this,this.M);a=dj(this);a!=0&&ej(this,a)}; \_.l.nl=function(a,b){this.B&&pi(this.B,a,b)};\_.l.Sa=function(a){this.Qa(a||this.Dc?1:0);\_.wf(this.H(),"gb_e")||this.ma(a?this.Cb:this.Ab);\_.X(this.H(),"gb_H",a);var b=\_.V("gb_Md");b!=null&&\_.X(b,"gb_H",a);this.i&&this.tc&&\_.X(this.i.i,"gb_9c",a);this.T&&\_.X(this.T,"gb_H",a);\_.re("dd").Sa(a)};\_.l.rl=function(a){this.U&&(\,.mf(this.Ac,a||""),\_.X(this.U,"gb_S",!a),this.K=!!a,Wi(this,a),bj(this,this.G.i))}; var Wi=function(a,b){if(a.ea){a.Ea&&\_.X(a.Ea,"gb_S",a.K);var c=b?b.trim():b;\_.X(a.ea,"gb_S",!a.K||!b||!c);c&&\_.mf(a.ea,c)}};Y.prototype.yb=function(){return \_.V("gb_ce",this.C)};Y.prototype.da=function(){if(this.Z!=null){var a=this.Z.i;a==3?fj(this,!1):a==1?fj(this,!0):fj(this,this.G.i=="gb_bd")}}; var fj=function(a,b){if(\,.J(a.j,7)&&(!a.S||b)){if(a.V){var c=\_.V("gb_j",a.o);if(c){var d=\_.V("gb_v",a.o),e=a.G.i!="gb_bd"||b?"":a.vc+"px";\_.Bg(c,"min-width",e);\_.Bg(d,"min-width",e)}}\,.wf(a.v,"gb_Ke")!=b&&(\,.X(a.v,"gb_Ke",b),b?a.dispatchEvent("sfi"):a.dispatchEvent("sfu"),\_.X(\,.V("gb_Dd",a.o),"gb_Ke",b))}},gj=function(a){var b=\_.V("gb_4c");if(b){var c=new Map;c.set("menu",\_.V("gb_Zc",a.o));c.set("back",\_.V("gb_2c"));c.set("close",\_.V("gb_k"));var d=!1;c.forEach(function(e){e||(a.N.log(Error("aa")), d=!0)});if(!d){a.i=new Hi(c,b,\_.Gb(\_.T(a.j,16),!1),\_.Gb(\_.T(a.j,9),!1),\_.Gb(\_.T(a.j,33),!1));a.i.listen("open",a.Jj,!1,a);a.i.listen("close",a.Ij,!1,a);a.i.listen("msc",a.Kj,!1,a);switch(_.gg(a.j,32)){case 1:a.Qb("back");break;case 2:a.Qb("close");break;case 3:a.Qb("none");break;default:a.Qb("default")}\_.mi();\_.D("gbar.C",Hi);Hi.prototype.ca=Hi.prototype.nf;Hi.prototype.cc=Hi.prototype.W;Hi.prototype.cd=Hi.prototype.Yg;Hi.prototype.cf=Hi.prototype.open;Hi.prototype.cg=Hi.prototype.close;Hi.prototype.ch= Hi.prototype.getStyle;Hi.prototype.ck=Hi.prototype.hb;Hi.prototype.cl=Hi.prototype.ll;Hi.prototype.cm=Hi.prototype.Xg;Hi.prototype.cn=Hi.prototype.ql;\_.S.i().i.resolve(a.i)}}else a.N.log(Error("ba"))},aj=function(a){var b=\_.S.i();a.C||b.i.reject(Error("ca"));\_.Gb(\_.T(a.j,7))||b.D.reject(Error("da"));\_.Gb(\_.T(a.j,12))||b.B.reject(Error("ea"));\_.Gb(\_.T(a.j,13))||b.C.reject(Error("fa"))},bj=function(a,b){!a.i&&a.C&&gj(a);a.i&&!a.O&&a.Qb("default");a.i&&a.qc&&a.Qb("none");hj(a);if(a.rc)a.M=!0;else if(a.fa)a.M= !0;else if(a.K)a.M=!1;else{var c=b===\"gb_oc\",d=\_.Gb(\_.T(a.j,5),!1),e=\_.Gb(\_.T(a.j,7),!1);a.M=!(c&&(d||e))}};c=b===\"gb_oc\";d=b===\"gb_Vd\";a.oc&&a.R&&\_.X(a.R,"gb_S",c||d);!a.fa&&!\_.J(a.j,10)&&ij(a).length>1
```

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

### Configure Reka UI for Nuxt

Source: https://reka-ui.com/docs/overview/installation.html

Add the reka-ui/nuxt module to your nuxt.config.ts file to enable automatic component imports.

```ts
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt'],
})
```

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

### Reka UI Accordion Expanded by Default Example (Vue)

Source: https://reka-ui.com/llms-full.txt

Illustrates how to configure an Reka UI Accordion to have a specific item expanded by default using the `defaultValue` prop. This is useful for pre-loading content or guiding user interaction.

```vue
<template>
  <AccordionRoot
    type="single"
    default-value="item-2"
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>
```

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

### Collision-Aware Animations for Dropdown Menu (Vue & CSS)

Source: https://reka-ui.com/llms-full.txt

This example shows how to create collision and direction-aware animations for the dropdown menu content by utilizing the `data-side` and `data-align` attributes. It includes Vue component setup and CSS for 'slideUp' and 'slideDown' animations based on collision data.

```vue
<script setup lang="ts">
import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        …
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>
```

```css
/* styles.css */
.DropdownMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.DropdownMenuContent[data-side="top"] {
  animation-name: slideUp;
}
.DropdownMenuContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

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

### Implement TimeRangeField Component

Source: https://reka-ui.com/llms-full.txt

Provides examples for setting up a TimeRangeField, including the basic anatomy and a functional example with reactive state using @internationalized/date.

```vue
<script setup>
import {
  TimeRangeFieldInput,
  TimeRangeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <TimeRangeFieldRoot>
    <TimeRangeFieldInput part="hour" type="start" />
    <TimeRangeFieldInput part="minute" type="start" />
    <TimeRangeFieldInput part="hour" type="end" />
    <TimeRangeFieldInput part="minute" type="end" />
  </TimeRangeFieldRoot>
</template>
```

```vue
<script setup>
import { Time } from '@internationalized/date'
import { TimeRangeFieldInput, TimeRangeFieldRoot } from 'reka-ui'
import { ref } from 'vue'

const timeRange = ref({
  start: new Time(9, 0),
  end: new Time(17, 0)
})
</script>

<template>
  <TimeRangeFieldRoot v-model="timeRange">
    <div class="flex items-center gap-2">
      <TimeRangeFieldInput part="hour" type="start" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="start" />
      <span class="mx-2">to</span>
      <TimeRangeFieldInput part="hour" type="end" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="end" />
    </div>
  </TimeRangeFieldRoot>
</template>
```

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

### Configure Presence and forceMount for SSR

Source: https://reka-ui.com/llms-full.txt

Demonstrates the updated usage of forceMount in components like Tabs, requiring manual visibility handling to improve SSR compatibility.

```vue
<template>
  <TabsRoot v-slot="{ modelValue }" default-value="tab1">
    <TabsContent value="tab1" force-mount :hidden="modelValue !== 'tab1'">
      …
    </TabsContent>
    <TabsContent value="tab2" force-mount :hidden="modelValue !== 'tab2'">
      …
    </TabsContent>
  </TabsRoot>
</template>
```

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

### Initialize Theme and Platform Detection (JavaScript)

Source: https://reka-ui.com/docs/overview/releases

This script initializes the theme based on user preference or system settings and detects the operating system to apply platform-specific styling. It reads the theme preference from localStorage and applies the 'dark' class to the document element if necessary. It also adds a 'mac' class if the user is on a Mac or iOS device.

```javascript
(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));
```

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

### Start and Stop Timer

Source: https://translate.google.com/

Manages a timer using `setTimeout` and `clearTimeout`. It provides methods to start the timer with a delay, stop it, and check if it's currently active. The timer callback is executed when the timer expires.

```javascript
_.l.P=function(){bi.X.P.call(this);this.stop();delete this.Za;delete this.i};
_.l.start=function(a){this.stop();this.Tc=_.Th(this.j,a!==void 0?a:this.o)};
_.l.stop=function(){this.isActive()&&\_.t.clearTimeout(this.Tc);this.Tc=0};
_.l.isActive=function(){return this.Tc!=0};
```

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

### Array.prototype.fill Polyfill

Source: https://translate.google.com/

This polyfill for Array.prototype.fill changes all elements in an array to a static value, from a start index to an end index. It returns the modified array. It handles start and end indices, including negative values.

```javascript
Qb("Array.prototype.fill",function(a){return a?a:function(b,c,d){var e=this.length||0;c<0&&(c=Math.max(0,e+c));if(d==null||d>e)d=e;d=Number(d);d<0&&(d=Math.max(0,e+d));for(c=Number(c||0);c<d;c++)this\[c\]=b;return this}});Pb("fill",function(a){return a?a:Array.prototype.fill})
```

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

### Initialize Theme and Platform Class (JavaScript)

Source: https://reka-ui.com/docs/components/label

This script initializes the theme based on local storage or system preference and adds a 'mac' class to the document element if the platform is macOS or iOS. It uses immediately invoked function expressions (IIFEs) for scope management.

```javascript
(function(){
  const e = localStorage.getItem("vitepress-theme-appearance") || "dark";
  const a = window.matchMedia("(prefers-color-scheme: dark)").matches;
  (!e || e === "auto" ? a : e === "dark") && document.documentElement.classList.add("dark");
})();

document.documentElement.classList.toggle("mac", /Mac|iPhone|iPod|iPad/i.test(navigator.platform));
```

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

### Reka UI Autocomplete Hide Menu When Empty Example (Vue)

Source: https://reka-ui.com/llms-full.txt

This Vue example illustrates how to use the `hideWhenEmpty` prop on the `AutocompleteContent` component. This feature automatically hides the autocomplete menu when no items match the current user query, improving the user experience by reducing clutter.

```vue
<template>
  <AutocompleteRoot v-model="searchText">
    <AutocompleteInput placeholder="Type a fruit..." />
    <AutocompletePortal>
      <AutocompleteContent hide-when-empty>
        <AutocompleteItem
          v-for="fruit in fruits"
          :key="fruit"
          :value="fruit"
        >
          {{ fruit }}
        </AutocompleteItem>
      </AutocompleteContent>
    </AutocompletePortal>
  </AutocompleteRoot>
</template>
```

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

### Update Menu CheckboxItem v-model Binding (Vue)

Source: https://reka-ui.com/docs/guides/migration

Similar to the form component updates, this example shows the API change for `DropdownMenuCheckboxItem` in Vue. The binding has been simplified from `v-model:checked` to `v-model`, offering a more streamlined developer experience. It also includes examples of direct `checked` prop usage.

```vue
<template>
  <DropdownMenuCheckboxItem v-model:checked="value" /> 
  <DropdownMenuCheckboxItem v-model="value" /> 

  <DropdownMenuCheckboxItem checked /> 
  <DropdownMenuCheckboxItem :model-value="true" /> 
</template>
```

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

### Show Tooltip Instantly

Source: https://reka-ui.com/llms-full.txt

Demonstrates how to make a tooltip appear instantly by setting `delayDuration` to 0.

```APIDOC
## Show instantly

Use the `delayDuration` prop to control the time it takes for the tooltip to open.

```vue line=6
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

<template>
  <TooltipRoot :delay-duration="0">
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipContent>…</TooltipContent>
  </TooltipRoot>
</template>
```
```

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

### Initialize Tooltip Component in Vue

Source: https://reka-ui.com/docs/components/tooltip

Demonstrates the basic structure and required imports for implementing a Tooltip using Reka UI components. It includes the Provider, Root, Trigger, Portal, Content, and Arrow components.

```vue
<script setup lang="ts">
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

<template>
  <TooltipProvider>
    <TooltipRoot>
      <TooltipTrigger />
      <TooltipPortal>
        <TooltipContent>
          <TooltipArrow />
        </TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </TooltipProvider>
</template>
```

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

### DOM Element Styling and Positioning Utilities (JavaScript)

Source: https://translate.google.com/

Provides functions for setting and getting inline styles, handling cross-browser compatibility for CSS properties like 'display' and 'user-select', and calculating element dimensions and positions. It also includes methods for getting computed styles and absolute positions.

```javascript
_.Bg=function(a,b,c){if(typeof b==="string")(b=Ag(a,b))&&(a.style[b]=c);else for(var d in b){c=a;var e=b[d],f=Ag(c,d);f&&(c.style[f]=e)}};
Cg={};
Ag=function(a,b){var c=Cg[b];
if(!c){var d=yg(b);
c=d;
a.style[d]===void 0&&
(d=_.tg()+_.zg(d),a.style[d]!==void 0&&(c=d));Cg[b]=c}
return c};

_.Dg=function(a,b){var c=a.style[yg(b)];
return typeof c!=="undefined"?c:a.style[Ag(a,b)]||""};

_.Eg=function(a,b){var c=_.Xe(a);
return c.defaultView&&c.defaultView.getComputedStyle&&(a=c.defaultView.getComputedStyle(a,null))?a[b]||a.getPropertyValue(b)||"":""};

_.Fg=function(a,b){return _.Eg(a,b)||(a.currentStyle?a.currentStyle[b]:null)||a.style&&a.style[b]};

_.Gg=function(a){try{return a.getBoundingClientRect()}catch(b){return{left:0,top:0,right:0,bottom:0}}};

_.Ig=function(a){var b=_.Hg;
if(_.Fg(a,"display")!="none")return b(a);
var c=a.style,d=c.display,e=c.visibility,f=c.position;
c.visibility="hidden";
c.position="absolute";
c.display="inline";
a=b(a);
c.display=d;
c.position=f;
c.visibility=e;
return a};

_.Hg=function(a){var b=a.offsetWidth,c=a.offsetHeight,d=_.Lc&&!b&&!c;
return(b===void 0||d)&&a.getBoundingClientRect?(a=_.Gg(a),new _.ug(a.right-a.left,a.bottom-a.top)):new _.ug(b,c)};

_.Jg=function(a,b){a.style.display=b?"":"none"};

_.Kg=_.Kc?"MozUserSelect":_.Lc||_.Jc?"WebkitUserSelect":null;
```

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

### Create Custom Toast API Component in Vue

Source: https://reka-ui.com/llms-full.txt

This snippet shows how to create a custom toast component by abstracting Reka UI's primitive toast parts. The 'Usage' example shows how to import and use the custom `Toast` component, while the 'Implementation' example provides the Vue SFC code for `your-toast.vue`, demonstrating prop handling and slot usage.

```vue
<script setup lang="ts">
import Toast from './your-toast.vue'
</script>

<template>
  <Toast
    title="Upgrade available"
    content="We've just released Radix 3.0!"
  >
    <button @click="handleUpgrade">
      Upgrade
    </button>
  </Toast>
</template>
```

```vue
// your-toast.vue
<script setup lang="ts">
import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle } from 'reka-ui'

defineProps <{
  title: string
  content: string
}>()
</script>

<template>
  <ToastRoot>
    <ToastTitle v-if="title">
      {{ title }}
    </ToastTitle>
    <ToastDescription v-if="content">
      {{ content }}
    </ToastDescription>
    <ToastAction
      as-child
      alt-text="toast"
    >
      <slot />
    </ToastAction>
    <ToastClose aria-label="Close">
      <span aria-hidden="true">×</span>
    </ToastClose>
  </ToastRoot>
</template>
```

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

### Initialize Theme and Platform Detection

Source: https://reka-ui.com/docs/components/tree

A self-invoking script that sets the site's dark mode preference based on localStorage or system settings and detects the operating system platform.

```javascript
(()=>{
  const e = localStorage.getItem("vitepress-theme-appearance") || "dark";
  const a = window.matchMedia("(prefers-color-scheme: dark)").matches;
  (!e || e === "auto" ? a : e === "dark") && document.documentElement.classList.add("dark");
})();
document.documentElement.classList.toggle("mac", /Mac|iPhone|iPod|iPad/i.test(navigator.platform));
```

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

### Promise Implementation with Core Methods

Source: https://translate.google.com/

This snippet provides a JavaScript implementation of the Promise object, including static methods like resolve, reject, race, and all. It manages asynchronous operations and their states (pending, fulfilled, rejected). Dependencies include internal helper functions like `_.B` and `f.j` for iterator handling and queuing.

```javascript
var e=function(f){this.j=null;this.C=!1;if(f==c)this.o=f;else throw Error("a");this.i=0;this.promise=this};e.prototype.then=function(g,h){return this.Gd(g,h)};e.prototype.Gd=function(g,h){function k(){switch(m.i){case 1:g(m.o);break;case 2:h(m.o);break;default:throw Error("k\`"+m.i);}}var m=this;this.j==null?f.j(k): this.j.push(k);this.C=!0};e.resolve=c;e.reject=function(g){return new e(function(h,k){k(g)})};e.race=function(g){return new e(function(h,k){for(var m=_.B(g),n=m.next();!n.done;n=m.next())c(n.value).Gd(h,k)})};e.all=function(g){var h=_.B(g),k=h.next();return k.done?c(\[\]):new e(function(m,n){function p(u){return function(w){q\[u\]=w;r--;r==0&&m(q)}}var q=\[\];r=0;do q.push(void 0),r++,c(k.value).Gd(p(q.length-1),n),k=h.next();while(!k.done)})};return e});
```

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

### Implement Tabs component in Vue

Source: https://reka-ui.com/llms-full.txt

Provides the anatomy of the Tabs component and an example of creating vertical tabs using the orientation prop.

```vue
<script setup>
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot>
    <TabsList>
      <TabsIndicator />
      <TabsTrigger />
    </TabsList>
    <TabsContent />
  </TabsRoot>
</template>
```

```vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">One</TabsTrigger>
      <TabsTrigger value="tab2">Two</TabsTrigger>
      <TabsTrigger value="tab3">Three</TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">Tab one content</TabsContent>
    <TabsContent value="tab2">Tab two content</TabsContent>
    <TabsContent value="tab3">Tab three content</TabsContent>
  </TabsRoot>
</template>
```

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

### Implement Reka UI Listbox with Virtualization

Source: https://reka-ui.com/docs/components/listbox

A basic implementation of the Reka UI Listbox using the Root, Content, and Virtualizer components. This structure demonstrates how to nest items within the listbox container.

```html
<ListboxRoot>
  <ListboxContent>
    <ListboxVirtualizer>
      <ListboxItem>
        <ListboxItemIndicator />
      </ListboxItem>
    </ListboxVirtualizer>
  </ListboxContent>
</ListboxRoot>
```