@oneclick.dev/cms-kit 0.0.1

package/components/ui/query-builder-dialog/QueryBuilderDialog.vue

@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import { ExternalLink, ChevronsUpDown } from 'lucide-vue-next'
+
+const route = useRoute()
+const projectId = route.params.slug as string
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  integrationId: {
+    type: String
+  },
+  needPredefinedIntegration: {
+    type: Boolean,
+    default: false
+  },
+  noTrigger: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const dialogIsOpen = ref(false)
+
+const openDialog = async (query: any) => {
+  dialogIsOpen.value = true
+  await nextTick();
+
+  if (query) {
+    selectedIntegrationId.value = query.integration.id
+    resource.value = query.resource
+    filters.value = query.filters
+    sorts.value = query.sorts
+    limit.value = query.limit
+    offset.value = query.offset
+    startAt.value = query.startAt
+    endAt.value = query.endAt
+    groupBy.value = query.groupBy
+    distinct.value = query.distinct
+  }
+}
+
+watch(dialogIsOpen, (val) => {
+  if (val) {
+    let modelValue = JSON.parse(JSON.stringify(props.modelValue))
+    selectedIntegrationId.value = modelValue?.integration?.id || null
+    resource.value = modelValue?.resource || ''
+    filters.value = modelValue?.filters || []
+    sorts.value = modelValue?.sorts || []
+    limit.value = modelValue?.limit || null
+    offset.value = modelValue?.offset || null
+    startAt.value = modelValue?.startAt || null
+    endAt.value = modelValue?.endAt || null
+    groupBy.value = modelValue?.groupBy || ''
+    distinct.value = modelValue?.distinct || false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'saved'])
+
+const { getProjectIntegrations } = useIntegrations()
+const integrations = ref<any[]>([])
+integrations.value = await getProjectIntegrations(projectId)
+
+const { buildFirebaseQuery, buildSQLQuery } = useQueryBuilder();
+
+const selectedIntegrationId = ref<string | null>(props.integrationId)
+
+const integration = computed(() => {
+  if (props.integrationId) {
+    return integrations.value.find(integration => integration.id === props.integrationId)
+  }
+  return integrations.value.find(integration => integration.id === selectedIntegrationId.value)
+})
+
+const errorMessage = ref<string | null>(null)
+const indexUrl = ref<string | null>(null)
+
+// Resource selector
+const resource = ref('');
+const resourceOptions = ref<string[]>(['team-building-requests', 'users', 'projects']); // Example options
+
+// Filters
+interface Filter {
+  field: string;
+  operator: string;
+  value: string | number | boolean;
+}
+const filters = ref<Filter[]>([]);
+const operatorOptions = [
+  { label: '=', value: '==' },
+  { label: '≠', value: '!=' },
+  { label: '<', value: '<' },
+  { label: '≤', value: '<=' },
+  { label: '≥', value: '>=' },
+  { label: '>', value: '>' },
+  { label: 'IN', value: 'in' },
+  { label: 'NOT IN', value: 'not-in' },
+  { label: 'CONTAINS', value: 'array-contains' },
+  { label: 'CONTAINS ANY', value: 'array-contains-any' }
+]
+
+async function addFilter() {
+  filters.value.push({ field: '', operator: '==', value: '' });
+  await nextTick()
+  const filterFields = document.querySelectorAll('#query_builder_dialog_filters .filter-field')
+  if (filterFields.length) {
+    (filterFields[filterFields.length - 1] as HTMLInputElement).focus()
+  }
+}
+
+function removeFilter(idx: number) {
+  filters.value.splice(idx, 1);
+}
+
+// Sorts
+interface Sort {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+const sorts = ref<Sort[]>([]);
+function addSort() {
+  sorts.value.push({ field: '', direction: 'asc' });
+}
+function removeSort(idx: number) {
+  sorts.value.splice(idx, 1);
+}
+
+// Advanced options
+const showAdvanced = ref(false);
+const limit = ref<number | null>(null);
+const offset = ref<number | null>(null);
+const startAt = ref<any>(null);
+const endAt = ref<any>(null);
+const groupBy = ref<string>('');
+const distinct = ref(false);
+
+// Query preview
+const queryPreview = ref('');
+const queryResult = ref<any>(null);
+
+function resetOutput() {
+  queryPreview.value = '';
+  queryResult.value = null;
+  errorMessage.value = null;
+  indexUrl.value = null;
+}
+
+function previewQuery() {
+  resetOutput()
+  if (integration.value.type === 'FIREBASE') {
+    queryPreview.value = buildFirebaseQuery({
+      resource: resource.value,
+      filters: filters.value,
+      sorts: sorts.value,
+      limit: limit.value,
+      startAt: startAt.value,
+      endAt: endAt.value
+    })
+  } else {
+    queryPreview.value = buildSQLQuery({
+      resource: resource.value,
+      filters: filters.value,
+      sorts: sorts.value,
+      limit: limit.value,
+      offset: offset.value,
+      groupBy: groupBy.value,
+      distinct: distinct.value
+    })
+  }
+}
+
+async function runQuery() {
+  resetOutput()
+  if (integration.value.type === 'FIREBASE') {
+    try {
+      const { find } = useFirebaseIntegration(selectedIntegrationId.value)
+      let res = await find(resource.value, {
+        filters: filters.value,
+        sorts: sorts.value,
+        limit: limit.value,
+        startAt: startAt.value,
+        endAt: endAt.value
+      })
+      queryResult.value = `Found ${res.length} results`
+    } catch (error: any) {
+      errorMessage.value = error.response.data?.message || 'Failed to run query'
+      indexUrl.value = error.response.data?.data?.indexUrl || null
+    }
+  } else {
+    try {
+      queryResult.value = buildSQLQuery({
+      resource: resource.value,
+      filters: filters.value,
+      sorts: sorts.value,
+      limit: limit.value,
+      offset: offset.value,
+      groupBy: groupBy.value,
+      distinct: distinct.value
+    })
+    } catch (error: any) {
+      errorMessage.value = error.response.data?.message || 'Failed to run query'
+    }
+  }
+}
+
+const closeDialog = () => {
+  dialogIsOpen.value = false
+  resetOutput()
+}
+
+const saveQuery = () => {
+  let newValue = {
+    integration: {
+      id: selectedIntegrationId.value,
+      type: integration.value.type
+    },
+    resource: resource.value,
+    filters: filters.value,
+    sorts: sorts.value,
+    limit: limit.value,
+    offset: offset.value,
+    groupBy: groupBy.value,
+    distinct: distinct.value,
+    startAt: startAt.value,
+    endAt: endAt.value
+  };
+
+  emit('update:modelValue', newValue)
+  emit('saved', newValue)
+
+  closeDialog()
+}
+
+defineExpose({
+  openDialog
+})
+</script>
+
+<template>
+  <Dialog v-model:open="dialogIsOpen">
+    <DialogTrigger as-child v-if="!noTrigger">
+      <slot>
+        <Button :disabled="!integrationId && needPredefinedIntegration">
+          <span v-if="modelValue">Update Query</span>
+          <span v-else>Build Query</span>
+        </Button>
+      </slot>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-xl w-full">
+      <DialogHeader>
+        <DialogTitle>Query Builder</DialogTitle>
+      </DialogHeader>
+      <div class="space-y-6 py-4">
+        <ResourceSelect v-model="selectedIntegrationId" />
+
+        <div>
+          <Label for="query_builder_dialog_resource" class="block text-sm font-medium text-muted-foreground mb-2">Resource</Label>
+          <Input v-model="resource" placeholder="team-building-requests" id="query_builder_dialog_resource" />
+          <!-- <Combobox v-model="resource">
+            <ComboboxInput placeholder="team-building-requests" />
+            <ComboboxList>
+              <ComboboxItem v-for="option in resourceOptions" :key="option" :value="option">
+                {{ option }}
+              </ComboboxItem>
+            </ComboboxList>
+          </Combobox> -->
+        </div>
+
+        <div id="query_builder_dialog_filters">
+          <Label class="block text-sm font-medium text-muted-foreground mb-2">Filters</Label>
+          <div class="space-y-2">
+            <div v-for="(filter, idx) in filters" :key="idx" class="flex items-center gap-2">
+              <Input v-model="filter.field" placeholder="Field" class="w-32 filter-field" />
+              <Select v-model="filter.operator">
+                <SelectTrigger class="w-[170px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem v-for="op in operatorOptions" :key="op.value" :value="op.value">{{ op.label }}</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Input v-model="filter.value" placeholder="Value" class="w-32" />
+              <Button variant="ghost" @click="removeFilter(idx)" title="Remove filter">✕</Button>
+            </div>
+            <Button variant="outline" @click="addFilter">+ Add Filter</Button>
+          </div>
+        </div>
+
+        <!-- 3. Sort Section -->
+        <div>
+          <Label class="block text-sm font-medium text-muted-foreground mb-2">Sort</Label>
+          <div class="space-y-2">
+            <div v-for="(sort, idx) in sorts" :key="idx" class="flex items-center gap-2">
+              <Input v-model="sort.field" placeholder="Sort By" class="w-32" />
+              <Select v-model="sort.direction">
+                <SelectTrigger class="w-[180px]">
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="asc">ASC</SelectItem>
+                    <SelectItem value="desc">DESC</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Button variant="ghost" @click="removeSort(idx)" title="Remove sort">✕</Button>
+            </div>
+            <Button variant="outline" @click="addSort">+ Add Sort</Button>
+          </div>
+        </div>
+
+        <!-- 4. Advanced Options -->
+        <Collapsible v-model="showAdvanced">
+          <div class="flex items-center justify-between space-x-4 px-4">
+            <h4 class="text-sm font-semibold">
+              Advanced Options
+            </h4>
+            <CollapsibleTrigger as-child>
+              <Button variant="ghost" size="sm" class="w-9 p-0">
+                <ChevronsUpDown class="size-4" />
+                <span class="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent>
+            <div class="grid grid-cols-2 gap-4 mt-2">
+              <div>
+                <Label for="limit">Limit</Label>
+                <Input type="number" v-model="limit" placeholder="Limit" />
+              </div>
+              <div>
+                <Label for="offset">Offset</Label>
+                <Input type="number" v-model="offset" placeholder="Offset" />
+              </div>
+              <div>
+                <Label for="startAt">StartAt</Label>
+                <Input v-model="startAt" placeholder="StartAt (optional)" />
+              </div>
+              <div>
+                <Label for="endAt">EndAt</Label>
+                <Input v-model="endAt" placeholder="EndAt (optional)" />
+              </div>
+              <div v-if="integration?.type !== 'FIREBASE'">
+                <Label for="groupBy">Group By</Label>
+                <Input v-model="groupBy" placeholder="Group By" />
+              </div>
+              <div class="flex items-center gap-2 col-span-2">
+                <Checkbox v-model="distinct" id="distinct" />
+                <Label for="distinct">DISTINCT</Label>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <!-- 5. Preview & Actions -->
+        <div class="space-y-2">
+          <div class="flex gap-2 mb-4">
+            <Button @click="previewQuery">Preview Query</Button>
+            <Button variant="secondary" @click="runQuery">Run Query</Button>
+          </div>
+          <div v-if="queryPreview" class="bg-gray-100/10 rounded p-2 text-xs font-mono text-gray-300 border border-gray-500">
+            {{ queryPreview }}
+          </div>
+
+          <div v-if="queryResult" class="bg-green-100/10 rounded p-2 text-xs font-bold text-green-500 border border-green-500">
+            {{ queryResult }}
+          </div>
+
+          <div class="flex gap-2 flex-col bg-red-100/10 rounded-lg p-4 pt-3 border border-red-500" v-if="errorMessage">
+            <p class="text-red-500 text-xs font-bold mb-1">{{ errorMessage }}</p>
+            <a v-if="indexUrl" :href="indexUrl" target="_blank">
+              <Button size="sm">Create index in Firebase Console <ExternalLink class="size-3.5 ml-0.5" /></Button>
+            </a>
+          </div>
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="ghost" @click="closeDialog">Close</Button>
+        <Button @click="saveQuery">Save Query</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/components/ui/query-builder-dialog/index.ts

@@ -0,0 +1 @@
+export { default as QueryBuilderDialog } from './QueryBuilderDialog.vue'

package/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    data-slot="radio-group"
+    :class="cn(
+      'flex gap-3', 
+      props.orientation === 'vertical' ? 'flex-col' : 'flex-row',
+      props.class
+    )"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

package/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { CircleIcon } from 'lucide-vue-next'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+
+  useForwardProps,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/components/ui/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'

package/components/ui/range-calendar/RangeCalendar.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarPrevButton />
+      <RangeCalendarHeading />
+      <RangeCalendarNextButton />
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/components/ui/range-calendar/RangeCalendarCell.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>

package/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>

package/components/ui/range-calendar/RangeCalendarGrid.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>

package/components/ui/range-calendar/RangeCalendarGridBody.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>

package/components/ui/range-calendar/RangeCalendarGridHead.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>

package/components/ui/range-calendar/RangeCalendarGridRow.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarGridRow>
+</template>

package/components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeadCell>
+</template>