Variants System ​

<template>
  <button
    class="bg-blue-3 reka-hover:bg-blue-4 reka-disabled:opacity-50"
    :data-disabled="isDisabled || undefined"
  >
    This button changes style based on its state
  </button>
</template>

<script setup>
import { ref } from 'vue'
const isDisabled = ref(false)
</script>

<template>
  <button
    class="bg-blue-3 text-blue-11
           reka-hover:bg-blue-4
           reka-disabled:opacity-50
           reka-disabled:cursor-not-allowed"
    :data-disabled="isDisabled || undefined"
    @click="handleClick"
  >
    {{ isDisabled ? 'Disabled' : 'Interactive' }} Button
  </button>
</template>

<script setup>
import { ref } from 'vue'

const isDisabled = ref(false)

const handleClick = () => {
  console.log('Button clicked')
}
</script>

<template>
  <!-- Accordion with open/closed states -->
  <div class="border rounded-md">
    <!-- Header toggles between open/closed -->
    <button
      @click="isOpen = !isOpen"
      :data-state="isOpen ? 'open' : 'closed'"
      class="flex justify-between w-full p-4
             bg-slate-3
             reka-open:bg-slate-4"
    >
      Accordion Header
      <span class="transition-transform duration-200 reka-closed:rotate-0 reka-open:rotate-180">↓</span>
    </button>

    <!-- Content visible only when open -->
    <div
      :data-state="isOpen ? 'open' : 'closed'"
      class="overflow-hidden
             reka-closed:h-0
             reka-open:p-4"
    >
      <slot>Accordion content goes here</slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <!-- Form input with validation state -->
  <div>
    <input
      v-model="email"
      type="email"
      :data-invalid="!isValid && email !== '' ? true : undefined"
      class="border rounded p-2
             focus:outline-none focus:ring-2
             reka-invalid:border-red-9
             reka-invalid:ring-red-9
             reka-valid:border-green-9"
    />
    <p class="text-sm reka-invalid:text-red-11 reka-invalid:block hidden"
       :data-invalid="!isValid && email !== '' ? true : undefined">
      Please enter a valid email address
    </p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const email = ref('')

const isValid = computed(() => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email.value)
})
</script>

<template>
  <!-- Tabs with active/inactive states -->
  <div class="flex flex-col">
    <div class="flex border-b">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :data-state="activeTab === index ? 'active' : 'inactive'"
        class="px-4 py-2
               reka-active:border-b-2
               reka-active:border-blue-9
               reka-active:text-blue-11
               reka-inactive:text-slate-11
               reka-inactive:hover:text-slate-12"
      >
        {{ tab }}
      </button>
    </div>

    <div class="p-4">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :data-state="activeTab === index ? 'active' : 'inactive'"
        class="reka-inactive:hidden"
      >
        Content for {{ tab }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tabs = ['Tab 1', 'Tab 2', 'Tab 3']
const activeTab = ref(0)
</script>

<template>
  <Disclosure v-slot="{ open }" as="div" class="w-full">
    <DisclosureButton
      :data-state="open ? 'open' : 'closed'"
      class="flex w-full justify-between rounded-lg bg-slate-3 px-4 py-2
             reka-open:bg-slate-4 reka-open:text-blue-11"
    >
      <span>Details</span>
      <span class="transform transition-transform reka-open:rotate-180">
        ↓
      </span>
    </DisclosureButton>
    <DisclosurePanel
      :data-state="open ? 'open' : 'closed'"
      class="px-4 pt-2 pb-2 text-slate-11 animate-accordion overflow-hidden"
    >
      Your content here
    </DisclosurePanel>
  </Disclosure>
</template>

<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
</script>

<template>
  <ToggleRoot v-model:pressed="isPressed" class="relative">
    <button
      :data-state="isPressed ? 'on' : 'off'"
      class="px-4 py-2 bg-slate-3 rounded-md
             reka-on:bg-blue-9 reka-on:text-white
             reka-off:text-slate-11"
    >
      {{ isPressed ? 'On' : 'Off' }}
    </button>
  </ToggleRoot>
</template>

<script setup>
import { ref } from 'vue'
import { Toggle as ToggleRoot } from '@radix-vue/toggle'

const isPressed = ref(false)
</script>

<template>
  <button
    :data-state="buttonState"
    :data-disabled="isDisabled || undefined"
    :data-pressed="isPressed || undefined"
    class="px-4 py-2 rounded
           reka-disabled:opacity-50
           reka-pressed:bg-blue-9
           reka-pressed:text-white
           reka-active:ring-2
           reka-active:ring-blue-9"
    @click="togglePressed"
  >
    Interactive Button
  </button>
</template>

<script setup>
import { ref, computed } from 'vue'

const isDisabled = ref(false)
const isPressed = ref(false)
const isActive = ref(false)

// Compute button state based on multiple factors
const buttonState = computed(() => {
  if (isActive.value) return 'active'
  return 'inactive'
})

const togglePressed = () => {
  if (!isDisabled.value) {
    isPressed.value = !isPressed.value
  }
}
</script>