@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PaginationListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<PaginationList v-slot="slotProps" data-slot="pagination-content" v-bind="delegatedProps" :class="cn('border-border-base flex flex-row items-center divide-x rounded-xl border', props.class)">
+		<slot v-bind="slotProps" />
+	</PaginationList>
+</template>

package/src/runtime/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MoreHorizontal } from 'lucide-vue-next';
+import { PaginationEllipsis } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<PaginationEllipsis data-slot="pagination-ellipsis" v-bind="delegatedProps" :class="cn('flex size-9 items-center justify-center', props.class)">
+		<slot>
+			<MoreHorizontal class="size-4" />
+			<span class="sr-only">More pages</span>
+		</slot>
+	</PaginationEllipsis>
+</template>

package/src/runtime/components/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '@/components/ui/button';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronLeftIcon } from 'lucide-vue-next';
+import { PaginationFirst, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<
+		PaginationFirstProps & {
+			size?: ButtonVariants['size'];
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		size: 'sm',
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<PaginationFirst data-slot="pagination-first" :class="cn(buttonVariants({ color: 'ghost', size, iconOnly: true }), 'py-2.5', props.class)" v-bind="forwarded">
+		<slot>
+			<ChevronLeftIcon />
+			<span class="hidden sm:block">First</span>
+		</slot>
+	</PaginationFirst>
+</template>

package/src/runtime/components/ui/pagination/PaginationItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '@/components/ui/button';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationListItem } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<
+		PaginationListItemProps & {
+			size?: ButtonVariants['size'];
+			class?: HTMLAttributes['class'];
+			isActive?: boolean;
+		}
+	>(),
+	{
+		size: 'sm',
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive');
+</script>
+
+<template>
+	<PaginationListItem
+		data-slot="pagination-item"
+		v-bind="delegatedProps"
+		:class="
+			cn(
+				buttonVariants({
+					color: props.isActive ? 'tertiary' : 'ghost',
+					size: props.size,
+					iconOnly: true,
+				}),
+				{ 'border-b-0 border-l-0 shadow-none': props.isActive },
+				props.class
+			)
+		"
+	>
+		<slot />
+	</PaginationListItem>
+</template>

package/src/runtime/components/ui/pagination/PaginationLast.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '@/components/ui/button';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronRightIcon } from 'lucide-vue-next';
+import { PaginationLast, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<
+		PaginationLastProps & {
+			size?: ButtonVariants['size'];
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		size: 'sm',
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<PaginationLast data-slot="pagination-last" :class="cn(buttonVariants({ color: 'ghost', size, iconOnly: true }), 'py-2.5', props.class)" v-bind="forwarded">
+		<slot>
+			<ChevronRightIcon />
+		</slot>
+	</PaginationLast>
+</template>

package/src/runtime/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '@/components/ui/button';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronRightIcon } from 'lucide-vue-next';
+import { PaginationNext, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<
+		PaginationNextProps & {
+			size?: ButtonVariants['size'];
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		size: 'sm',
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<PaginationNext data-slot="pagination-next" :class="cn(buttonVariants({ color: 'ghost', size, iconOnly: true }), 'py-2.5', props.class)" v-bind="forwarded">
+		<slot>
+			<ChevronRightIcon />
+		</slot>
+	</PaginationNext>
+</template>

package/src/runtime/components/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '@/components/ui/button';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronLeftIcon } from 'lucide-vue-next';
+import { PaginationPrev, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<
+		PaginationPrevProps & {
+			size?: ButtonVariants['size'];
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		size: 'sm',
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<PaginationPrev data-slot="pagination-previous" :class="cn(buttonVariants({ color: 'ghost', size, iconOnly: true }), 'py-2.5', props.class)" v-bind="forwarded">
+		<slot>
+			<ChevronLeftIcon />
+		</slot>
+	</PaginationPrev>
+</template>

package/src/runtime/components/ui/pagination/index.ts

@@ -0,0 +1,8 @@
+export { default as Pagination } from './Pagination.vue';
+export { default as PaginationContent } from './PaginationContent.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationItem } from './PaginationItem.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrevious } from './PaginationPrevious.vue';

package/src/runtime/components/ui/pin-input/PinInput.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<PinInputRootProps<Type> & { class?: HTMLAttributes['class'] }>(), {
+	otp: true,
+});
+const emits = defineEmits<PinInputRootEmits<Type>>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<PinInputRoot :otp="props.otp" data-slot="pin-input" v-bind="forwarded" :class="cn('flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50', props.class)">
+		<slot />
+	</PinInputRoot>
+</template>

package/src/runtime/components/ui/pin-input/PinInputGroup.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<Primitive data-slot="pin-input-group" v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/pin-input/PinInputSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import { Minus } from 'lucide-vue-next';
+import { Primitive, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PrimitiveProps>();
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+	<Primitive data-slot="pin-input-separator" v-bind="forwardedProps">
+		<slot>
+			<Minus />
+		</slot>
+	</Primitive>
+</template>

package/src/runtime/components/ui/pin-input/PinInputSlot.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PinInputInput, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<PinInputInput
+		data-slot="pin-input-slot"
+		v-bind="forwardedProps"
+		:class="
+			cn(
+				'border-input focus:border-ring focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-center text-sm shadow-xs outline-none first:rounded-l-md first:border-l last:rounded-r-md focus:z-10',
+				props.class
+			)
+		"
+	/>
+</template>

package/src/runtime/components/ui/pin-input/index.ts

@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue';
+export { default as PinInputGroup } from './PinInputGroup.vue';
+export { default as PinInputSeparator } from './PinInputSeparator.vue';
+export { default as PinInputSlot } from './PinInputSlot.vue';

package/src/runtime/components/ui/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</PopoverRoot>
+</template>

package/src/runtime/components/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui';
+import { PopoverAnchor } from 'reka-ui';
+
+const props = defineProps<PopoverAnchorProps>();
+</script>
+
+<template>
+	<PopoverAnchor data-slot="popover-anchor" v-bind="props">
+		<slot />
+	</PopoverAnchor>
+</template>

package/src/runtime/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
+	align: 'center',
+	sideOffset: 4,
+});
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<PopoverPortal>
+		<PopoverContent
+			data-slot="popover-content"
+			v-bind="{ ...$attrs, ...forwarded }"
+			:class="
+				cn(
+					'bg-bg-primary-medium dark:bg-bg-primary-medium text-text-body border-border-base-medium dark:border-border-base-medium dark:text-text-body data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-popover-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded-xl border',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</PopoverContent>
+	</PopoverPortal>
+</template>

package/src/runtime/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+	<PopoverTrigger data-slot="popover-trigger" v-bind="props">
+		<slot />
+	</PopoverTrigger>
+</template>

package/src/runtime/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';

package/src/runtime/components/ui/progress/Progress.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ProgressIndicator, ProgressRoot } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), {
+	modelValue: 0,
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ProgressRoot data-slot="progress" v-bind="delegatedProps" :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', props.class)">
+		<ProgressIndicator data-slot="progress-indicator" class="bg-primary h-full w-full flex-1" :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" />
+	</ProgressRoot>
+</template>

package/src/runtime/components/ui/progress/index.ts

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<RadioGroupRoot v-slot="slotProps" data-slot="radio-group" :class="cn('grid gap-3', props.class)" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</RadioGroupRoot>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CircleIcon } from 'lucide-vue-next';
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<RadioGroupItem
+		data-slot="radio-group-item"
+		v-bind="forwardedProps"
+		:class="
+			cn(
+				'border-border-base data-[state=checked]:border-bg-brand-strong focus-visible:border-border-brand-subtle focus-visible:ring-border-brand-subtle/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border bg-gray-50 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:opacity-50',
+				props.class
+			)
+		"
+	>
+		<RadioGroupIndicator data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+			<slot>
+				<CircleIcon class="fill-bg-brand-strong absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+			</slot>
+		</RadioGroupIndicator>
+	</RadioGroupItem>
+</template>

package/src/runtime/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/src/runtime/components/ui/range-calendar/RangeCalendar.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RangeCalendarRoot, 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);
+
+const formatDayName = (day: string) => {
+	const dayMap: Record<string, string> = {
+		M: 'Mon',
+		T: 'Tue',
+		W: 'Wed',
+		Th: 'Thu',
+		F: 'Fri',
+		S: 'Sat',
+		Su: 'Sun',
+	};
+	return dayMap[day] || day.substring(0, 3);
+};
+</script>
+
+<template>
+	<RangeCalendarRoot v-slot="{ grid, weekDays }" data-slot="range-calendar" :class="cn('text-text-body', props.class)" v-bind="forwarded">
+		<RangeCalendarHeader>
+			<RangeCalendarHeading />
+
+			<div class="flex items-center gap-1">
+				<RangeCalendarPrevButton />
+				<RangeCalendarNextButton />
+			</div>
+		</RangeCalendarHeader>
+
+		<div class="mt-4 flex flex-col gap-y-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">
+							{{ formatDayName(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/src/runtime/components/ui/range-calendar/RangeCalendarCell.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RangeCalendarCell, 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
+		data-slot="range-calendar-cell"
+		:class="
+			cn(
+				'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
+				'[&:has([data-selected])]:bg-bg-tertiary-medium dark:[&:has([data-selected])]:bg-bg-tertiary-medium',
+				'first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md',
+				'[&: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/src/runtime/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+	as: 'button',
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<RangeCalendarCellTrigger
+		data-slot="range-calendar-trigger"
+		:class="
+			cn(
+				'text-text-body h-9 w-11 rounded-md p-0 font-semibold data-selected:opacity-100',
+				// Today highlight
+				'[&[data-today]:not([data-selected])]:bg-bg-tertiary [&[data-today]:not([data-selected])]:text-text-heading',
+				// Selection Start
+				'data-selection-start:bg-bg-brand data-selection-start:text-text-white data-selection-start:rounded-md data-selection-start:rounded-tr-none data-selection-start:rounded-br-none',
+				'data-selection-start:hover:bg-bg-brand data-selection-start:hover:text-text-white',
+				'data-selection-start:focus:bg-bg-brand data-selection-start:focus:text-text-white',
+				// Selection End
+				'data-selection-end:bg-bg-brand data-selection-end:text-text-white data-selection-end:rounded-md data-selection-end:rounded-tl-none data-selection-end:rounded-bl-none',
+				'data-selection-end:hover:bg-bg-brand data-selection-end:hover:text-text-white',
+				'data-selection-end:focus:bg-bg-brand data-selection-end:focus:text-text-white',
+				// Outside months
+				'data-outside-view:text-text-body-subtle data-outside-view:opacity-50',
+				// Disabled
+				'data-disabled:text-text-body-subtle data-disabled:opacity-50',
+				// Unavailable
+				'data-unavailable:text-text-fg-danger data-unavailable:line-through',
+				props.class
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot />
+	</RangeCalendarCellTrigger>
+</template>