feat(Calendar/DatePicker): expose disabled state

docs/content/meta/CalendarCellTrigger.md

@@ -33,5 +33,10 @@
     'name': 'dayValue',
     'description': '<p>Current day</p>\n',
     'type': 'string'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
   }
 ]" />

docs/content/meta/CalendarNext.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/CalendarPrev.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DatePickerCellTrigger.md

@@ -27,3 +27,16 @@
     'required': true
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'dayValue',
+    'description': '<p>Current day</p>\n',
+    'type': 'string'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DatePickerNext.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DatePickerPrev.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DateRangePickerCellTrigger.md

@@ -27,3 +27,16 @@
     'required': true
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'dayValue',
+    'description': '<p>Current day</p>\n',
+    'type': 'string'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DateRangePickerNext.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/DateRangePickerPrev.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/FocusScope.md

@@ -0,0 +1,44 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.reka-ui.com/docs/guides/composition\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, tabbing from last item will focus first tabbable\nand shift+tab from first item will focus last tababble.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'trapped',
+    'description': '<p>When <code>true</code>, focus cannot escape the focus scope via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'mountAutoFocus',
+    'description': '<p>Event handler called when auto-focusing on mount.\nCan be prevented.</p>\n',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'unmountAutoFocus',
+    'description': '<p>Event handler called when auto-focusing on unmount.\nCan be prevented.</p>\n',
+    'type': '[event: Event]'
+  }
+]" />

docs/content/meta/RangeCalendarCellTrigger.md

@@ -33,5 +33,10 @@
     'name': 'dayValue',
     'description': '<p>Current day</p>\n',
     'type': 'string'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
   }
 ]" />

docs/content/meta/RangeCalendarNext.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

docs/content/meta/RangeCalendarPrev.md

@@ -21,3 +21,11 @@
     'required': false
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Current disable state</p>\n',
+    'type': 'boolean'
+  }
+]" />

packages/core/src/Calendar/CalendarCellTrigger.vue

@@ -17,6 +17,15 @@ export interface CalendarCellTriggerProps extends PrimitiveProps {
   /** The month in which the cell is rendered */
   month: DateValue
 }
+
+export interface CalendarCellTriggerSlot {
+  default: (props: {
+    /** Current day */
+    dayValue: string
+    /** Current disable state */
+    disabled: boolean
+  }) => any
+}
 </script>
 
 <script setup lang="ts">
@@ -27,12 +36,7 @@ const props = withDefaults(defineProps<CalendarCellTriggerProps>(), {
   as: 'div',
 })
 
-defineSlots<{
-  default: (props: {
-    /** Current day */
-    dayValue: string
-  }) => any
-}>()
+defineSlots<CalendarCellTriggerSlot>()
 
 const kbd = useKbd()
 const rootContext = injectCalendarRootContext()
@@ -172,7 +176,10 @@ function handleArrowKey(e: KeyboardEvent) {
     @keydown.up.down.left.right.space.enter="handleArrowKey"
     @keydown.enter.prevent
   >
-    <slot :day-value="dayValue">
+    <slot
+      :day-value="dayValue"
+      :disabled="isDisabled"
+    >
       {{ dayValue }}
     </slot>
   </Primitive>

packages/core/src/Calendar/CalendarNext.vue

@@ -6,6 +6,13 @@ export interface CalendarNextProps extends PrimitiveProps {
   /** The function to be used for the next page. Overwrites the `nextPage` function set on the `CalendarRoot`. */
   nextPage?: (placeholder: DateValue) => DateValue
 }
+
+export interface CalendarNextSlot {
+  default: (props: {
+    /** Current disable state */
+    disabled: boolean
+  }) => any
+}
 </script>
 
 <script setup lang="ts">
@@ -14,6 +21,8 @@ import { Primitive } from '@/Primitive'
 import { injectCalendarRootContext } from './CalendarRoot.vue'
 
 const props = withDefaults(defineProps<CalendarNextProps>(), { as: 'button', step: 'month' })
+defineSlots<CalendarNextSlot>()
+
 const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
 
 const rootContext = injectCalendarRootContext()
@@ -30,6 +39,8 @@ const rootContext = injectCalendarRootContext()
     :disabled="disabled"
     @click="rootContext.nextPage(props.nextPage)"
   >
-    <slot>Next page</slot>
+    <slot :disabled>
+      Next page
+    </slot>
   </Primitive>
 </template>

packages/core/src/Calendar/CalendarPrev.vue

@@ -6,6 +6,13 @@ export interface CalendarPrevProps extends PrimitiveProps {
   /** The function to be used for the prev page. Overwrites the `prevPage` function set on the `CalendarRoot`. */
   prevPage?: (placeholder: DateValue) => DateValue
 }
+
+export interface CalendarPrevSlot {
+  default: (props: {
+    /** Current disable state */
+    disabled: boolean
+  }) => any
+}
 </script>
 
 <script setup lang="ts">
@@ -14,6 +21,8 @@ import { Primitive } from '@/Primitive'
 import { injectCalendarRootContext } from './CalendarRoot.vue'
 
 const props = withDefaults(defineProps<CalendarPrevProps>(), { as: 'button', step: 'month' })
+defineSlots<CalendarPrevSlot>()
+
 const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
 
 const rootContext = injectCalendarRootContext()
@@ -30,6 +39,8 @@ const rootContext = injectCalendarRootContext()
     :disabled="disabled"
     @click="rootContext.prevPage(props.prevPage)"
   >
-    <slot>Prev page</slot>
+    <slot :disabled>
+      Prev page
+    </slot>
   </Primitive>
 </template>

packages/core/src/DatePicker/DatePickerCellTrigger.vue

@@ -1,15 +1,20 @@
 <script lang="ts">
+import type { CalendarCellTriggerSlot } from '@/Calendar/CalendarCellTrigger.vue'
 import { CalendarCellTrigger, type CalendarCellTriggerProps } from '..'
 
 export interface DatePickerCellTriggerProps extends CalendarCellTriggerProps {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DatePickerCellTriggerProps>()
+defineSlots<CalendarCellTriggerSlot>
 </script>
 
 <template>
-  <CalendarCellTrigger v-bind="props">
-    <slot />
+  <CalendarCellTrigger
+    v-slot="slotProps"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
   </CalendarCellTrigger>
 </template>

packages/core/src/DatePicker/DatePickerNext.vue

@@ -1,15 +1,21 @@
 <script lang="ts">
+import type { CalendarNextSlot } from '@/Calendar/CalendarNext.vue'
 import { CalendarNext, type CalendarNextProps } from '..'
 
 export interface DatePickerNextProps extends CalendarNextProps {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DatePickerNextProps>()
+
+defineSlots<CalendarNextSlot>()
 </script>
 
 <template>
-  <CalendarNext v-bind="props">
-    <slot />
+  <CalendarNext
+    v-slot="slotProps"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
   </CalendarNext>
 </template>

packages/core/src/DatePicker/DatePickerPrev.vue

@@ -1,15 +1,20 @@
 <script lang="ts">
+import type { CalendarPrevSlot } from '@/Calendar/CalendarPrev.vue'
 import { CalendarPrev, type CalendarPrevProps } from '..'
 
 export interface DatePickerPrevProps extends CalendarPrevProps {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DatePickerPrevProps>()
+defineSlots<CalendarPrevSlot>()
 </script>
 
 <template>
-  <CalendarPrev v-bind="props">
-    <slot />
+  <CalendarPrev
+    v-slot="slotProps"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
   </CalendarPrev>
 </template>

packages/core/src/DateRangePicker/DateRangePickerCellTrigger.vue

@@ -1,15 +1,21 @@
 <script lang="ts">
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps } from '..'
+import type { RangeCalendarCellTriggerProps, RangeCalendarCellTriggerSlot } from '@/RangeCalendar/RangeCalendarCellTrigger.vue'
+import { RangeCalendarCellTrigger } from '..'
 
 export interface DateRangePickerCellTriggerProps extends RangeCalendarCellTriggerProps {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DateRangePickerCellTriggerProps>()
+
+defineSlots<RangeCalendarCellTriggerSlot>()
 </script>
 
 <template>
-  <RangeCalendarCellTrigger v-bind="props">
-    <slot />
+  <RangeCalendarCellTrigger
+    v-slot="slotProps"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
   </RangeCalendarCellTrigger>
 </template>