@hina-ui/vue 1.7.12 → 1.7.13

package/src/primitives/popper/PopperContent.ts

@@ -0,0 +1,262 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  normalizeStyle,
+  ref,
+  renderSlot,
+  watchEffect,
+  watchPostEffect,
+  withCtx,
+  withMemo,
+  type PropType,
+  type VNode,
+} from 'vue'
+import { autoUpdate, useFloating, type ReferenceElement } from '@floating-ui/vue'
+import {
+  getSideAndAlignFromPlacement,
+  POPPER_CONTENT_DEFAULTS,
+  popperMiddleware,
+  popperPlacement,
+  popperWrapperStyle,
+  shouldHidePopperArrow,
+  type Align,
+  type PopperSticky,
+  type PopperStrategy,
+  type PopperUpdateStrategy,
+  type Side,
+} from '../../../../shared/src/primitives/popper'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useSize } from '../utils/useSize'
+import { injectPopperRootContext, providePopperContentContext } from './context'
+
+export interface PopperContentProps {
+  memoDependencies?: unknown[]
+  side?: Side
+  sideOffset?: number
+  sideFlip?: boolean
+  align?: Align
+  alignOffset?: number
+  alignFlip?: boolean
+  avoidCollisions?: boolean
+  collisionBoundary?: Element | null | Array<Element | null>
+  collisionPadding?: number | Partial<Record<Side, number>>
+  arrowPadding?: number
+  hideShiftedArrow?: boolean
+  sticky?: PopperSticky
+  hideWhenDetached?: boolean
+  positionStrategy?: PopperStrategy
+  updatePositionStrategy?: PopperUpdateStrategy
+  disableUpdateOnLayoutShift?: boolean
+  prioritizePosition?: boolean
+  reference?: ReferenceElement
+  dir?: Direction
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const popperContentProps = {
+  memoDependencies: { type: Array as PropType<unknown[]>, required: false },
+  side: {
+    type: null as unknown as PropType<Side>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.side,
+  },
+  sideOffset: { type: Number, required: false, default: POPPER_CONTENT_DEFAULTS.sideOffset },
+  sideFlip: { type: Boolean, required: false, default: POPPER_CONTENT_DEFAULTS.sideFlip },
+  align: {
+    type: null as unknown as PropType<Align>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.align,
+  },
+  alignOffset: { type: Number, required: false, default: POPPER_CONTENT_DEFAULTS.alignOffset },
+  alignFlip: { type: Boolean, required: false, default: POPPER_CONTENT_DEFAULTS.alignFlip },
+  avoidCollisions: {
+    type: Boolean,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.avoidCollisions,
+  },
+  collisionBoundary: {
+    type: null as unknown as PropType<Element | null | Array<Element | null>>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.collisionBoundary,
+  },
+  collisionPadding: {
+    type: [Number, Object] as PropType<number | Partial<Record<Side, number>>>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.collisionPadding,
+  },
+  arrowPadding: { type: Number, required: false, default: POPPER_CONTENT_DEFAULTS.arrowPadding },
+  hideShiftedArrow: {
+    type: Boolean,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.hideShiftedArrow,
+  },
+  sticky: {
+    type: String as PropType<PopperSticky>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.sticky,
+  },
+  hideWhenDetached: {
+    type: Boolean,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.hideWhenDetached,
+  },
+  positionStrategy: {
+    type: String as PropType<PopperStrategy>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.positionStrategy,
+  },
+  updatePositionStrategy: {
+    type: String as PropType<PopperUpdateStrategy>,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.updatePositionStrategy,
+  },
+  disableUpdateOnLayoutShift: { type: Boolean, required: false },
+  prioritizePosition: {
+    type: Boolean,
+    required: false,
+    default: POPPER_CONTENT_DEFAULTS.prioritizePosition,
+  },
+  reference: { type: null as unknown as PropType<ReferenceElement>, required: false },
+  dir: { type: String as PropType<Direction>, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+}
+
+export const PopperContent = defineComponent({
+  name: 'PopperContent',
+  inheritAttrs: false,
+  props: popperContentProps,
+  emits: ['placed'],
+  setup(props, { emit, attrs, slots }) {
+    const rootContext = injectPopperRootContext()
+    const { forwardRef, currentElement: contentElement } = useForwardExpose()
+    const dir = useDirection(computed(() => props.dir))
+    const floatingRef = ref<HTMLElement>()
+    const arrow = ref<HTMLElement>()
+    const { width: arrowWidth, height: arrowHeight } = useSize(arrow)
+    const desiredPlacement = computed(() => popperPlacement(props.side, props.align))
+
+    const computedMiddleware = computed(() =>
+      popperMiddleware({
+        sideOffset: props.sideOffset,
+        alignOffset: props.alignOffset,
+        sideFlip: props.sideFlip,
+        alignFlip: props.alignFlip,
+        avoidCollisions: props.avoidCollisions,
+        prioritizePosition: props.prioritizePosition,
+        sticky: props.sticky,
+        collisionPadding: props.collisionPadding,
+        collisionBoundary: props.collisionBoundary,
+        arrow: arrow.value,
+        arrowWidth: arrowWidth.value,
+        arrowHeight: arrowHeight.value,
+        arrowPadding: props.arrowPadding,
+        hideWhenDetached: props.hideWhenDetached,
+        dir: dir.value,
+        prefix: 'reka',
+      }),
+    )
+
+    const reference = computed(() => props.reference ?? rootContext.anchor.value)
+    const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
+      reference,
+      floatingRef,
+      {
+        strategy: props.positionStrategy,
+        placement: desiredPlacement,
+        whileElementsMounted: (...args) =>
+          autoUpdate(...args, {
+            layoutShift: !props.disableUpdateOnLayoutShift,
+            animationFrame: props.updatePositionStrategy === 'always',
+          }),
+        middleware: computedMiddleware,
+      },
+    )
+
+    const placedSide = computed(() => getSideAndAlignFromPlacement(placement.value)[0])
+    const placedAlign = computed(() => getSideAndAlignFromPlacement(placement.value)[1])
+
+    watchPostEffect(() => {
+      if (isPositioned.value) emit('placed')
+    })
+
+    const shouldHideArrow = computed(() =>
+      shouldHidePopperArrow(props.hideShiftedArrow, middlewareData.value),
+    )
+
+    const contentZIndex = ref('')
+    watchEffect(() => {
+      if (contentElement.value)
+        contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex
+    })
+
+    const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)
+    const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)
+
+    providePopperContentContext({
+      placedSide,
+      onArrowChange: element => (arrow.value = element),
+      arrowX,
+      arrowY,
+      shouldHideArrow,
+    })
+
+    const cache: VNode[] = []
+
+    function content(key: number, withDir: boolean) {
+      return h(
+        Primitive,
+        mergeProps({ key, ref: forwardRef }, attrs, {
+          'as-child': props.asChild,
+          as: props.as,
+          'data-side': placedSide.value,
+          'data-align': placedAlign.value,
+          ...(withDir ? { dir: dir.value } : {}),
+          style: { animation: !isPositioned.value ? 'none' : undefined },
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: floatingRef,
+          'data-reka-popper-content-wrapper': '',
+          dir: dir.value,
+          style: normalizeStyle(
+            popperWrapperStyle(floatingStyles.value, {
+              isPositioned: isPositioned.value,
+              zIndex: contentZIndex.value,
+              middlewareData: middlewareData.value,
+              prefix: 'reka',
+            }),
+          ),
+        },
+        [
+          props.memoDependencies
+            ? withMemo(
+                [
+                  props.asChild,
+                  props.as,
+                  placedSide.value,
+                  placedAlign.value,
+                  isPositioned.value,
+                  ...Object.values(attrs),
+                  ...props.memoDependencies,
+                ],
+                () => content(0, false),
+                cache,
+                0,
+              )
+            : content(1, true),
+        ],
+      )
+  },
+})

package/src/primitives/popper/PopperRoot.ts

@@ -0,0 +1,16 @@
+import { defineComponent, ref, renderSlot } from 'vue'
+import type { ReferenceElement } from '@floating-ui/vue'
+import { providePopperRootContext } from './context'
+
+export const PopperRoot = defineComponent({
+  name: 'PopperRoot',
+  inheritAttrs: false,
+  setup(_, { slots }) {
+    const anchor = ref<ReferenceElement>()
+    providePopperRootContext({
+      anchor,
+      onAnchorChange: element => (anchor.value = element),
+    })
+    return () => renderSlot(slots, 'default')
+  },
+})

package/src/primitives/popper/context.ts

@@ -0,0 +1,23 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { Side } from '../../../../shared/src/primitives/popper'
+import type { ReferenceElement } from '@floating-ui/vue'
+import { createContext } from '../utils/createContext'
+
+export interface PopperRootContext {
+  anchor: Ref<ReferenceElement | undefined>
+  onAnchorChange: (element: ReferenceElement | undefined) => void
+}
+
+export const [injectPopperRootContext, providePopperRootContext] =
+  createContext<PopperRootContext>('PopperRoot')
+
+export interface PopperContentContext {
+  placedSide: Ref<Side>
+  onArrowChange: (arrow: HTMLElement | undefined) => void
+  arrowX?: ComputedRef<number>
+  arrowY?: ComputedRef<number>
+  shouldHideArrow: Ref<boolean>
+}
+
+export const [injectPopperContentContext, providePopperContentContext] =
+  createContext<PopperContentContext>('PopperContent')

package/src/primitives/popper/index.ts

@@ -0,0 +1,11 @@
+export {
+  injectPopperContentContext,
+  injectPopperRootContext,
+  type PopperContentContext,
+  type PopperRootContext,
+} from './context'
+export { Arrow, type ArrowProps } from './Arrow'
+export { PopperAnchor, type PopperAnchorProps } from './PopperAnchor'
+export { PopperArrow, type PopperArrowProps } from './PopperArrow'
+export { PopperContent, popperContentProps, type PopperContentProps } from './PopperContent'
+export { PopperRoot } from './PopperRoot'

package/src/primitives/range-calendar/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/range-calendar/RangeCalendarCellTrigger.ts

@@ -0,0 +1,241 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  nextTick,
+  renderSlot,
+  toDisplayString,
+  withCtx,
+  withKeys,
+  type PropType,
+} from 'vue'
+import { getLocalTimeZone, isSameMonth, isToday, type DateValue } from '@internationalized/date'
+import {
+  calendarArrowShift,
+  calendarCellTabIndex,
+  calendarShiftCandidate,
+} from '../../../../shared/src/primitives/date/calendar-view'
+import { isBetweenInclusive, toDate } from '../../../../shared/src/primitives/date/comparators'
+import {
+  isRangeFocusedDate,
+  nextRangeSelection,
+} from '../../../../shared/src/primitives/date/range-calendar-view'
+import { kbd } from '../../../../shared/src/primitives/date/utils'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { injectRangeCalendarRootContext } from './context'
+
+export interface RangeCalendarCellTriggerProps {
+  day: DateValue
+  month: DateValue
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const RangeCalendarCellTrigger = defineComponent({
+  name: 'RangeCalendarCellTrigger',
+  props: {
+    day: { type: null as unknown as PropType<DateValue>, required: true },
+    month: { type: null as unknown as PropType<DateValue>, required: true },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'div',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectRangeCalendarRootContext()
+    const { primitiveElement } = usePrimitiveElement()
+
+    const labelText = computed(() =>
+      rootContext.formatter.custom(toDate(props.day), {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    )
+    const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day) ?? false)
+    const isSelectedDate = computed(() => rootContext.isSelected(props.day))
+    const isSelectionStart = computed(() => rootContext.isSelectionStart(props.day))
+    const isSelectionEnd = computed(() => rootContext.isSelectionEnd(props.day))
+    const isHighlightStart = computed(() => rootContext.isHighlightedStart(props.day))
+    const isHighlightEnd = computed(() => rootContext.isHighlightedEnd(props.day))
+    const isHighlighted = computed(() =>
+      rootContext.highlightedRange.value
+        ? isBetweenInclusive(
+            props.day,
+            rootContext.highlightedRange.value.start,
+            rootContext.highlightedRange.value.end,
+          )
+        : false,
+    )
+    const allowNonContiguousRanges = computed(() => rootContext.allowNonContiguousRanges.value)
+    const isDateToday = computed(() => isToday(props.day, getLocalTimeZone()))
+    const isOutsideView = computed(() => !isSameMonth(props.day, props.month))
+    const isOutsideVisibleView = computed(() => rootContext.isOutsideVisibleView(props.day))
+    const isDisabled = computed(
+      () =>
+        rootContext.isDateDisabled(props.day) ||
+        (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value),
+    )
+    const dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))
+    const isFocusedDate = computed(() =>
+      isRangeFocusedDate({
+        day: props.day,
+        outsideView: isOutsideView.value,
+        disabled: isDisabled.value,
+        rootDisabled: rootContext.disabled.value,
+        placeholderFocusable: rootContext.isPlaceholderFocusable.value,
+        placeholder: rootContext.placeholder.value,
+        selectedFocusableDate: rootContext.selectedFocusableDate.value,
+        hasSelectedDate: rootContext.hasSelectedDate.value,
+        selectedDisabled: rootContext.isSelectedDisabled.value,
+        firstFocusableDate: rootContext.firstFocusableDate.value,
+      }),
+    )
+    const shown = (value: boolean) =>
+      value && (allowNonContiguousRanges.value || !isUnavailable.value)
+
+    function changeDate(event: Event, date: DateValue) {
+      if (rootContext.readonly.value) return
+      if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date)) return
+      const change = nextRangeSelection(date, {
+        start: rootContext.startValue.value,
+        end: rootContext.endValue.value,
+        highlighted: rootContext.highlightedRange.value !== null,
+        lastPressed: rootContext.lastPressedDateValue.value,
+        preventDeselect: rootContext.preventDeselect.value,
+        fixedDate: rootContext.fixedDate.value,
+      })
+      if (change.preventDefault) event.preventDefault()
+      if (change.start) rootContext.startValue.value = change.start.value
+      if (change.end) rootContext.endValue.value = change.end.value
+      if (change.placeholder) rootContext.onPlaceholderChange(change.placeholder)
+      if (change.lastPressed) rootContext.lastPressedDateValue.value = change.lastPressed
+    }
+
+    function handleClick(event: MouseEvent) {
+      if (isDisabled.value) return
+      changeDate(event, props.day)
+    }
+
+    function handleFocus() {
+      if (isDisabled.value || rootContext.isDateUnavailable?.(props.day)) return
+      rootContext.focusedValue.value = props.day.copy()
+    }
+
+    function shiftFocus(day: DateValue, add: number) {
+      const candidateDayValue = calendarShiftCandidate(
+        day,
+        add,
+        rootContext.minValue.value,
+        rootContext.maxValue.value,
+      )
+      if (!candidateDayValue) return
+      const candidateDay = rootContext.parentElement.value!.querySelector<HTMLElement>(
+        `[data-value='${candidateDayValue.toString()}']:not([data-outside-view])`,
+      )
+      if (!candidateDay) {
+        if (add > 0) {
+          if (rootContext.isNextButtonDisabled()) return
+          rootContext.nextPage()
+        } else {
+          if (rootContext.isPrevButtonDisabled()) return
+          rootContext.prevPage()
+        }
+        void nextTick(() => shiftFocus(day, add))
+        return
+      }
+      if (candidateDay.hasAttribute('data-disabled')) return shiftFocus(candidateDayValue, add)
+      rootContext.onPlaceholderChange(candidateDayValue)
+      candidateDay.focus()
+    }
+
+    function handleArrowKey(event: KeyboardEvent) {
+      if (isDisabled.value) return
+      if (
+        (event.code === kbd.ENTER || event.code === kbd.SPACE_CODE) &&
+        (event.ctrlKey || event.metaKey || event.altKey)
+      )
+        return
+      event.preventDefault()
+      event.stopPropagation()
+      const shift = calendarArrowShift(event.code, rootContext.dir.value)
+      if (shift !== undefined) shiftFocus(props.day, shift)
+      else if (event.code === kbd.ENTER || event.code === kbd.SPACE_CODE)
+        changeDate(event, props.day)
+    }
+
+    const onKeydown = withKeys(handleArrowKey as (event: Event) => void, [
+      'up',
+      'down',
+      'left',
+      'right',
+      'enter',
+      'space',
+    ])
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: primitiveElement,
+          as: props.as,
+          'as-child': props.asChild,
+          role: 'button',
+          'aria-label': labelText.value,
+          'data-reka-calendar-cell-trigger': '',
+          'aria-pressed': shown(isSelectedDate.value) ? true : undefined,
+          'aria-disabled': isDisabled.value || isUnavailable.value ? true : undefined,
+          'data-highlighted': shown(isHighlighted.value) ? '' : undefined,
+          'data-selection-start': isSelectionStart.value ? true : undefined,
+          'data-selection-end': isSelectionEnd.value ? true : undefined,
+          'data-highlighted-start': isHighlightStart.value ? true : undefined,
+          'data-highlighted-end': isHighlightEnd.value ? true : undefined,
+          'data-selected': shown(isSelectedDate.value) ? true : undefined,
+          'data-outside-visible-view': isOutsideVisibleView.value ? '' : undefined,
+          'data-value': props.day.toString(),
+          'data-disabled': isDisabled.value ? '' : undefined,
+          'data-unavailable': isUnavailable.value ? '' : undefined,
+          'data-today': isDateToday.value ? '' : undefined,
+          'data-outside-view': isOutsideView.value ? '' : undefined,
+          'data-focused': isFocusedDate.value ? '' : undefined,
+          tabindex: calendarCellTabIndex(
+            isFocusedDate.value,
+            isOutsideView.value,
+            isDisabled.value,
+          ),
+          onClick: handleClick,
+          onFocusin: handleFocus,
+          onMouseenter: handleFocus,
+          onKeydown,
+        },
+        {
+          default: withCtx(() => [
+            renderSlot(
+              slots,
+              'default',
+              {
+                dayValue: dayValue.value,
+                disabled: isDisabled.value,
+                today: isDateToday.value,
+                selected: isSelectedDate.value,
+                outsideView: isOutsideView.value,
+                outsideVisibleView: isOutsideVisibleView.value,
+                unavailable: isUnavailable.value,
+                highlighted: shown(isHighlighted.value),
+                highlightedStart: isHighlightStart.value,
+                highlightedEnd: isHighlightEnd.value,
+                selectionStart: isSelectionStart.value,
+                selectionEnd: isSelectionEnd.value,
+              },
+              () => [createTextVNode(toDisplayString(dayValue.value), 1)],
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/range-calendar/RangeCalendarGrid.ts

@@ -0,0 +1,90 @@
+import { computed, defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import { createPagingButton } from '../calendar/CalendarNav'
+import { createGridGroup } from '../calendar/CalendarGrid'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectRangeCalendarRootContext } from './context'
+
+export const RangeCalendarGrid = defineComponent({
+  name: 'RangeCalendarGrid',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'table',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectRangeCalendarRootContext()
+    const disabled = computed(() => (rootContext.disabled.value ? true : undefined))
+    const readonly = computed(() => (rootContext.readonly.value ? true : undefined))
+    const onMouseleave = () => {
+      rootContext.focusedValue.value = undefined
+    }
+    return () =>
+      h(
+        Primitive,
+        mergeProps(props, {
+          tabindex: '-1',
+          role: 'application',
+          'aria-readonly': readonly.value,
+          'aria-disabled': disabled.value,
+          'data-readonly': readonly.value && '',
+          'data-disabled': disabled.value && '',
+          onMouseleave,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const RangeCalendarGridHead = createGridGroup('RangeCalendarGridHead', 'thead', {
+  'aria-hidden': 'true',
+})
+export const RangeCalendarGridBody = createGridGroup('RangeCalendarGridBody', 'tbody')
+export const RangeCalendarGridRow = createGridGroup('RangeCalendarGridRow', 'tr')
+export const RangeCalendarHeadCell = createGridGroup('RangeCalendarHeadCell', 'th')
+
+export const RangeCalendarCell = defineComponent({
+  name: 'RangeCalendarCell',
+  props: {
+    date: { type: null as unknown as PropType<DateValue>, required: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false, default: 'td' },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectRangeCalendarRootContext()
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          role: 'gridcell',
+          'aria-selected': rootContext.isSelected(props.date) ? true : undefined,
+          'aria-disabled':
+            rootContext.isDateDisabled(props.date) ||
+            rootContext.isDateUnavailable?.(props.date) ||
+            rootContext.disableDaysOutsideCurrentView.value,
+          'data-disabled':
+            rootContext.isDateDisabled(props.date) ||
+            rootContext.disableDaysOutsideCurrentView.value
+              ? ''
+              : undefined,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const RangeCalendarNext = createPagingButton(
+  'RangeCalendarNext',
+  'next',
+  injectRangeCalendarRootContext,
+)
+export const RangeCalendarPrev = createPagingButton(
+  'RangeCalendarPrev',
+  'prev',
+  injectRangeCalendarRootContext,
+)