feat(TimeRangeField): Implement TimeRangeField Component

docs/.vitepress/config.ts

@@ -206,6 +206,10 @@ export default defineConfig({
                 text: `Time Field ${BadgeHTML('Alpha', true)}`,
                 link: '/docs/components/time-field',
               },
+              {
+                text: `Time Range Field ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/time-range-field',
+              },
               {
                 text: `Month Picker ${BadgeHTML('Alpha', true)}`,
                 link: '/docs/components/month-picker',

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { Label, TimeRangeFieldInput, TimeRangeFieldRoot } from 'reka-ui'
+import './styles.css'
+</script>
+
+<template>
+  <div class="TimeFieldWrapper">
+    <Label
+      class="TimeFieldLabel"
+      for="time-field"
+    >Input label</Label>
+
+    <TimeRangeFieldRoot
+      id="time-field"
+      v-slot="{ segments }"
+      granularity="second"
+      class="TimeField"
+    >
+      <template
+        v-for="(item, index) in segments.start"
+        :key="`${item.part}-${index}`"
+      >
+        <TimeRangeFieldInput
+          v-if="item.part === 'literal'"
+          :part="item.part"
+          class="TimeFieldLiteral"
+          type="start"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+        <TimeRangeFieldInput
+          v-else
+          :part="item.part"
+          class="TimeFieldSegment"
+          type="start"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+      </template>
+      -
+      <template
+        v-for="(item, index) in segments.end"
+        :key="`${item.part}-${index}`"
+      >
+        <TimeRangeFieldInput
+          v-if="item.part === 'literal'"
+          :part="item.part"
+          class="TimeFieldLiteral"
+          type="end"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+        <TimeRangeFieldInput
+          v-else
+          :part="item.part"
+          class="TimeFieldSegment"
+          type="end"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+      </template>
+    </TimeRangeFieldRoot>
+  </div>
+</template>

docs/components/demo/TimeRangeField/css/styles.css

@@ -0,0 +1,55 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/grass.css';
+
+.TimeFieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.TimeFieldLabel {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--gray-9);
+}
+
+.TimeField {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 0.25rem;
+  text-align: center;
+  background-color: #fff;
+  user-select: none;
+  color: var(--green-10);
+  border: 1px solid var(--gray-9);
+}
+
+.TimeField::placeholder {
+  color: var(--mauve-5);
+}
+
+.TimeField[data-invalid] {
+  border: 1px solid var(--red-500);
+}
+
+.TimeFieldLiteral {
+  padding: 0.25rem;
+}
+
+.TimeFieldSegment {
+  padding: 0.25rem;
+}
+
+.TimeFieldSegment:hover{
+  background-color: var(--grass-4);
+}
+
+.TimeFieldSegment:focus {
+  background-color: var(--grass-2);
+}
+
+.TimeFieldSegment[aria-valuetext='Empty'] {
+  color: var(--grass-6);
+}

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Label, TimeRangeFieldInput, TimeRangeFieldRoot } from 'reka-ui'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Label
+      for="booking"
+      class="text-stone-700 dark:text-white"
+    >
+      Booking
+    </Label>
+
+    <TimeRangeFieldRoot
+      id="booking"
+      v-slot="{ segments }"
+      class="flex select-none bg-white items-center rounded-lg text-center text-green10 border shadow-sm p-1 data-[invalid]:border-red-500"
+    >
+      <template
+        v-for="(item, index) in segments.start"
+        :key="`${item.part}-${index}`"
+      >
+        <TimeRangeFieldInput
+          v-if="item.part === 'literal'"
+          :part="item.part"
+          type="start"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+        <TimeRangeFieldInput
+          v-else
+          :part="item.part"
+          class="rounded p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
+          type="start"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+      </template>
+      <span class="mx-2">
+
+        -
+      </span>
+      <template
+        v-for="(item, index) in segments.end"
+        :key="`${item.part}-${index}`"
+      >
+        <TimeRangeFieldInput
+          v-if="item.part === 'literal'"
+          :part="item.part"
+          type="end"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+        <TimeRangeFieldInput
+          v-else
+          :part="item.part"
+          class="rounded p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
+          type="end"
+        >
+          {{ item.value }}
+        </TimeRangeFieldInput>
+      </template>
+    </TimeRangeFieldRoot>
+  </div>
+</template>

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

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