feat(SliderArea): add SliderArea component

docs/.vitepress/config.ts

@@ -155,6 +155,7 @@ export default defineConfig({
               { text: 'Pin Input', link: '/docs/components/pin-input' },
               { text: 'Radio Group', link: '/docs/components/radio-group' },
               { text: 'Select', link: '/docs/components/select' },
+              { text: 'Slider Area', link: '/docs/components/slider-area' },
               { text: 'Slider', link: '/docs/components/slider' },
               { text: 'Switch', link: '/docs/components/switch' },
               { text: 'Tags Input', link: '/docs/components/tags-input' },

docs/components/Demos.vue

@@ -30,6 +30,7 @@ import ScrollAreaDemo from './demo/ScrollArea/tailwind/index.vue'
 import SelectDemo from './demo/Select/tailwind/index.vue'
 import SeparatorDemo from './demo/Separator/tailwind/index.vue'
 import SliderDemo from './demo/Slider/tailwind/index.vue'
+import SliderAreaDemo from './demo/SliderArea/tailwind/index.vue'
 import SplitterDemo from './demo/Splitter/tailwind/index.vue'
 import StepperDemo from './demo/Stepper/tailwind/index.vue'
 import SwitchDemo from './demo/Switch/tailwind/index.vue'
@@ -146,6 +147,9 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="slider">
       <SliderDemo />
     </DemoContainer>
+    <DemoContainer title="slider area">
+      <SliderAreaDemo />
+    </DemoContainer>
     <DemoContainer title="splitter">
       <SplitterDemo />
     </DemoContainer>

docs/components/demo/SliderArea/css/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { SliderAreaArea, SliderAreaRegion, SliderAreaRoot, SliderAreaThumb } from 'reka-ui'
+import { ref } from 'vue'
+import './styles.css'
+
+const sliderValue = ref([[50, 50]])
+</script>
+
+<template>
+  <SliderAreaRoot
+    v-model="sliderValue"
+    class="SliderAreaRoot"
+  >
+    <SliderAreaArea class="SliderAreaArea">
+      <SliderAreaRegion class="SliderAreaRegion" />
+    </SliderAreaArea>
+    <SliderAreaThumb
+      class="SliderAreaThumb"
+      aria-label="Position"
+    />
+  </SliderAreaRoot>
+</template>

docs/components/demo/SliderArea/css/styles.css

@@ -0,0 +1,41 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/grass.css';
+
+.SliderAreaRoot {
+  position: relative;
+  display: block;
+  user-select: none;
+  touch-action: none;
+  width: 200px;
+  height: 200px;
+}
+
+.SliderAreaArea {
+  background-color: var(--black-a10);
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+
+.SliderAreaRegion {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+}
+
+.SliderAreaThumb {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  box-shadow: 0 2px 10px var(--black-a7);
+  border-radius: 10px;
+}
+.SliderAreaThumb:hover {
+  background-color: var(--grass-3);
+}
+.SliderAreaThumb:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px var(--black-a8);
+}

docs/components/demo/SliderArea/tailwind/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { SliderAreaArea, SliderAreaRegion, SliderAreaRoot, SliderAreaThumb } from 'reka-ui'
+import { ref } from 'vue'
+
+const sliderValue = ref([[50, 50]])
+</script>
+
+<template>
+  <SliderAreaRoot
+    v-model="sliderValue"
+    class="relative block select-none touch-none w-[200px] h-[200px]"
+    :max-x="100"
+    :max-y="100"
+    :step-x="1"
+    :step-y="1"
+  >
+    <SliderAreaArea class="bg-stone-500/30 block relative w-full h-full overflow-hidden rounded-md">
+      <SliderAreaRegion class="bg-grass8 rounded-sm" />
+    </SliderAreaArea>
+    <SliderAreaThumb
+      class="block w-6 h-6 bg-white rounded-full hover:bg-stone-50 shadow-sm focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-grass9"
+      aria-label="Position"
+    />
+  </SliderAreaRoot>
+</template>

docs/components/demo/SliderArea/tailwind/tailwind.config.js

@@ -0,0 +1,14 @@
+const { blackA } = require('@radix-ui/colors')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {
+    extend: {
+      colors: {
+        ...blackA,
+      },
+    },
+  },
+  plugins: [],
+}