@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/calendar/Calendar.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui';
+import type { HTMLAttributes, Ref } from 'vue';
+import type { LayoutTypes } from '.';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import { createReusableTemplate, reactiveOmit, useVModel } from '@vueuse/core';
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui';
+import { createYear, createYearRange, toDate } from 'reka-ui/date';
+import { computed, toRaw } from 'vue';
+import { cn } from '@/lib/utils';
+import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select';
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.';
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class']; layout?: LayoutTypes; yearRange?: DateValue[] }>(), {
+	modelValue: undefined,
+	layout: undefined,
+});
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'layout', 'placeholder');
+
+const placeholder = useVModel(props, 'placeholder', emits, {
+	passive: true,
+	defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>;
+
+const formatter = useDateFormatter(props.locale ?? 'en');
+
+const yearRange = computed(() => {
+	return (
+		props.yearRange ??
+		createYearRange({
+			start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle('year', -100),
+
+			end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle('year', 10),
+		})
+	);
+});
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>();
+
+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>
+	<DefineMonthTemplate v-slot="{ date }">
+		<div class="**:data-[slot=native-select-icon]:right-1">
+			<div class="relative">
+				<div class="pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm">
+					{{ formatter.custom(toDate(date), { month: 'short' }) }}
+				</div>
+				<NativeSelect
+					class="relative h-8 pr-6 pl-2 text-xs text-transparent"
+					@change="
+						(e: Event) => {
+							placeholder = placeholder.set({
+								month: Number((e?.target as any)?.value),
+							});
+						}
+					"
+				>
+					<NativeSelectOption v-for="month in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+						{{ formatter.custom(toDate(month), { month: 'short' }) }}
+					</NativeSelectOption>
+				</NativeSelect>
+			</div>
+		</div>
+	</DefineMonthTemplate>
+
+	<DefineYearTemplate v-slot="{ date }">
+		<div class="**:data-[slot=native-select-icon]:right-1">
+			<div class="relative">
+				<div class="pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm">
+					{{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+				</div>
+				<NativeSelect
+					class="relative h-8 pr-6 pl-2 text-xs text-transparent"
+					@change="
+						(e: Event) => {
+							placeholder = placeholder.set({
+								year: Number((e?.target as any)?.value),
+							});
+						}
+					"
+				>
+					<NativeSelectOption v-for="year in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+						{{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+					</NativeSelectOption>
+				</NativeSelect>
+			</div>
+		</div>
+	</DefineYearTemplate>
+
+	<CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" data-slot="calendar" :class="cn('p-0', props.class)">
+		<CalendarHeader class="pt-0">
+			<nav class="absolute inset-x-0 top-0 flex items-center justify-between">
+				<CalendarPrevButton>
+					<slot name="calendar-prev-icon" />
+				</CalendarPrevButton>
+				<CalendarNextButton>
+					<slot name="calendar-next-icon" />
+				</CalendarNextButton>
+			</nav>
+
+			<slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+				<template v-if="layout === 'month-and-year'">
+					<div class="flex items-center justify-center gap-1">
+						<ReuseMonthTemplate :date="date" />
+						<ReuseYearTemplate :date="date" />
+					</div>
+				</template>
+				<template v-else-if="layout === 'month-only'">
+					<div class="flex items-center justify-center gap-1">
+						<ReuseMonthTemplate :date="date" />
+						{{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+					</div>
+				</template>
+				<template v-else-if="layout === 'year-only'">
+					<div class="flex items-center justify-center gap-1">
+						{{ formatter.custom(toDate(date), { month: 'short' }) }}
+						<ReuseYearTemplate :date="date" />
+					</div>
+				</template>
+				<template v-else>
+					<CalendarHeading />
+				</template>
+			</slot>
+		</CalendarHeader>
+
+		<div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+			<CalendarGrid v-for="month in grid" :key="month.value.toString()">
+				<CalendarGridHead>
+					<CalendarGridRow>
+						<CalendarHeadCell v-for="day in weekDays" :key="day">
+							{{ formatDayName(day) }}
+						</CalendarHeadCell>
+					</CalendarGridRow>
+				</CalendarGridHead>
+				<CalendarGridBody>
+					<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+						<CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+							<CalendarCellTrigger :day="weekDate" :month="month.value" />
+						</CalendarCell>
+					</CalendarGridRow>
+				</CalendarGridBody>
+			</CalendarGrid>
+		</div>
+	</CalendarRoot>
+</template>

package/src/runtime/components/ui/calendar/CalendarCell.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCell, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarCell data-slot="calendar-cell" :class="cn('relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarCell>
+</template>

package/src/runtime/components/ui/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCellTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+	as: 'button',
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarCellTrigger
+		data-slot="calendar-cell-trigger"
+		:class="
+			cn(
+				'text-text-body h-9 w-11 rounded-md p-0 font-semibold data-selected:opacity-100',
+				'hover:bg-gray-100',
+				// Today (not selected)
+				'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+				// Selected (single pick / range start / range end)
+				'data-selected:bg-brand-700 data-selected:hover:bg-brand-700 data-selected:focus:bg-brand-700 data-selected:text-white data-selected:opacity-100',
+				// Range start: left rounded only
+				'data-selection-start:rounded-l-lg data-selection-start:rounded-r-none',
+				// Range end: right rounded only
+				'data-selection-end:rounded-l-none data-selection-end:rounded-r-lg',
+				// Range in-between: dark text, square
+				'data-highlighted:rounded-none data-highlighted:bg-gray-100 data-highlighted:text-gray-900 data-selected:data-highlighted:bg-gray-100',
+				// Disabled
+				'data-disabled:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50',
+				// Unavailable
+				'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+				// Outside months
+				'data-outside-view:text-gray-400',
+				props.class
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot />
+	</CalendarCellTrigger>
+</template>

package/src/runtime/components/ui/calendar/CalendarGrid.vue

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

package/src/runtime/components/ui/calendar/CalendarGridBody.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from 'reka-ui';
+import { CalendarGridBody } from 'reka-ui';
+
+const props = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+	<CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+		<slot />
+	</CalendarGridBody>
+</template>

package/src/runtime/components/ui/calendar/CalendarGridHead.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { CalendarGridHead } from 'reka-ui';
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+	<CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+		<slot />
+	</CalendarGridHead>
+</template>

package/src/runtime/components/ui/calendar/CalendarGridRow.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarGridRow, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarGridRow data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarGridRow>
+</template>

package/src/runtime/components/ui/calendar/CalendarHeadCell.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeadCell, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarHeadCell data-slot="calendar-head-cell" :class="cn('text-text-body-subtle dark:text-text-body-subtle h-9 w-11 text-[0.8rem] font-normal', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarHeadCell>
+</template>

package/src/runtime/components/ui/calendar/CalendarHeader.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeader, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarHeader data-slot="calendar-header" :class="cn('relative flex w-full items-center justify-center px-8 pt-1', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarHeader>
+</template>

package/src/runtime/components/ui/calendar/CalendarHeading.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeading, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
+
+defineSlots<{
+	default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold text-gray-900', props.class)" v-bind="forwardedProps">
+		<slot :heading-value>
+			{{ headingValue }}
+		</slot>
+	</CalendarHeading>
+</template>

package/src/runtime/components/ui/calendar/CalendarNextButton.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarNext, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarNext data-slot="calendar-next-button" :class="cn(buttonVariants({ size: 'xs', iconOnly: true, color: 'ghost' }), props.class)" v-bind="forwardedProps">
+		<slot>
+			<SvgIconArrowRight filled :font-controlled="false" class="size-4" />
+		</slot>
+	</CalendarNext>
+</template>

package/src/runtime/components/ui/calendar/CalendarPrevButton.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarPrev, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<CalendarPrev data-slot="calendar-prev-button" :class="cn(buttonVariants({ size: 'xs', iconOnly: true, color: 'ghost' }), props.class)" v-bind="forwardedProps">
+		<slot>
+			<SvgIconArrowLeft filled :font-controlled="false" class="size-4" />
+		</slot>
+	</CalendarPrev>
+</template>

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

@@ -0,0 +1,14 @@
+export { default as Calendar } from './Calendar.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarNextButton } from './CalendarNextButton.vue';
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
+
+export type LayoutTypes = 'month-and-year' | 'month-only' | 'year-only' | undefined;

package/src/runtime/components/ui/card/Card.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card" :class="cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/card/CardAction.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card-action" :class="cn('col-start-2 row-span-2 row-start-1 justify-self-end', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card-content" :class="cn('px-6', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
+		<slot />
+	</p>
+</template>

package/src/runtime/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card-header" :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/card/CardTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
+		<slot />
+	</h3>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue';
+export { default as CardAction } from './CardAction.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';

package/src/runtime/components/ui/carousel/Carousel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface';
+import { cn } from '@/lib/utils';
+import { useProvideCarousel } from './useCarousel';
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+	orientation: 'horizontal',
+});
+
+const emits = defineEmits<CarouselEmits>();
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits);
+
+defineExpose({
+	canScrollNext,
+	canScrollPrev,
+	carouselApi,
+	carouselRef,
+	orientation,
+	scrollNext,
+	scrollPrev,
+});
+
+function onKeyDown(event: KeyboardEvent) {
+	const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+	const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+
+	if (event.key === prevKey) {
+		event.preventDefault();
+		scrollPrev();
+
+		return;
+	}
+
+	if (event.key === nextKey) {
+		event.preventDefault();
+		scrollNext();
+	}
+}
+</script>
+
+<template>
+	<section data-slot="carousel" :class="cn('relative', props.class)" aria-roledescription="carousel" tabindex="-1" @keydown="onKeyDown">
+		<slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+	</section>
+</template>

package/src/runtime/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface';
+import { cn } from '@/lib/utils';
+import { useCarousel } from './useCarousel';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<WithClassAsProps>();
+
+const { carouselRef, orientation } = useCarousel();
+</script>
+
+<template>
+	<div ref="carouselRef" data-slot="carousel-content" class="overflow-hidden">
+		<div :class="cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', props.class)" v-bind="$attrs">
+			<slot />
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface';
+import { cn } from '@/lib/utils';
+import { useCarousel } from './useCarousel';
+
+const props = defineProps<WithClassAsProps>();
+
+const { orientation } = useCarousel();
+</script>
+
+<template>
+	<optgroup data-slot="carousel-item" role="group" aria-roledescription="slide" :class="cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', props.class)">
+		<slot />
+	</optgroup>
+</template>