@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/dynect/Timeline.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Types ───────────────────────────────────────────────────────────────────
+export interface TimelineButton {
+	label: string;
+	/** Button color variant from DynectButton */
+	color?: 'brand' | 'dark' | 'secondary' | 'tertiary' | 'ghost' | 'link' | string;
+	/** Left icon name */
+	leftIcon?: string;
+	/** Right icon name */
+	rightIcon?: string;
+	onClick?: () => void;
+}
+
+export interface TimelineActivityItem {
+	/** Activity description text */
+	text: string;
+	/** Optional quote/comment body */
+	quote?: string;
+	/** Badge label (e.g. "Private", "Public") */
+	badgeLabel?: string;
+	/** Badge variant */
+	badgeVariant?: 'gray' | 'white' | 'info' | 'success' | 'danger' | 'warning' | 'brand';
+	/** Avatar src for stacked card variant */
+	avatarSrc?: string;
+	/** Avatar fallback */
+	avatarFallback?: string;
+}
+
+export interface TimelineItem {
+	/** Title text */
+	title?: string;
+	/** Description / paragraph */
+	description?: string;
+	/** Date/time label (e.g. "10 May 2025", "2 hours ago") */
+	date?: string;
+	/** Whether date badge is dismissible */
+	dateDismissible?: boolean;
+	/** Icon name for the timeline dot (only for "icons-card" variant) */
+	icon?: string;
+	/** Avatar src for the timeline dot (only for "avatar" variant) */
+	avatarSrc?: string;
+	/** Avatar fallback for the timeline dot */
+	avatarFallback?: string;
+	/** Buttons to display */
+	buttons?: TimelineButton[];
+	/** Quote/comment content block */
+	quote?: string;
+	/** Activity items for stacked card variant */
+	activities?: TimelineActivityItem[];
+	/** Link text (for horizontal-advanced variant) */
+	linkText?: string;
+	/** Link href */
+	linkHref?: string;
+}
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const timelineVariants = cva('relative', {
+	variants: {
+		variant: {
+			default: 'flex flex-col',
+			'icons-card': 'flex flex-col',
+			avatar: 'flex flex-col',
+			horizontal: 'flex flex-row',
+			'stacked-cards': 'flex flex-col',
+			'horizontal-advanced': 'flex flex-row items-center',
+		},
+	},
+	defaultVariants: { variant: 'default' },
+});
+
+type TimelineVariants = VariantProps<typeof timelineVariants>;
+
+// ── Props ───────────────────────────────────────────────────────────────────
+interface Props {
+	/** Timeline layout variant */
+	variant?: TimelineVariants['variant'];
+	/** Items to render */
+	items: TimelineItem[];
+	/** Gap between items in px */
+	gap?: number;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	variant: 'default',
+	gap: 44,
+});
+
+// ── Computed ────────────────────────────────────────────────────────────────
+const isVertical = computed(() => ['default', 'icons-card', 'avatar', 'stacked-cards'].includes(props.variant ?? 'default'));
+
+const isHorizontal = computed(() => ['horizontal', 'horizontal-advanced'].includes(props.variant ?? 'default'));
+
+const isCardVariant = computed(() => ['icons-card', 'avatar'].includes(props.variant ?? 'default'));
+
+const hasIcons = computed(() => props.variant === 'icons-card');
+const hasAvatars = computed(() => props.variant === 'avatar');
+const isStackedCards = computed(() => props.variant === 'stacked-cards');
+const isHorizontalAdvanced = computed(() => props.variant === 'horizontal-advanced');
+</script>
+
+<template>
+	<div :class="cn(timelineVariants({ variant }), props.class)" :style="{ gap: `${gap}px` }">
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<!-- VERTICAL VARIANTS: default, icons-card, avatar                     -->
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<template v-if="isVertical && !isStackedCards">
+			<div class="border-border-base dark:border-border-base relative border-l" :class="[isCardVariant ? 'pl-6' : 'pl-4']" :style="{ display: 'flex', flexDirection: 'column', gap: `${gap}px` }">
+				<div v-for="(item, index) in items" :key="index" class="relative" :class="[isCardVariant ? 'border-border-base dark:border-border-base bg-bg-white dark:bg-bg-white rounded-xl border p-6 shadow-[0_1px_1.75px_0_rgba(29,41,61,0.05)]' : '']">
+					<!-- Timeline dot -->
+					<div class="absolute" :class="[isCardVariant ? 'top-6 -left-[calc(1.5rem+1px+10px)]' : 'top-0 -left-[calc(1rem+1px+6px)]']">
+						<!-- Simple dot (default) -->
+						<div v-if="!hasIcons && !hasAvatars" class="border-bg-white dark:border-bg-white bg-bg-tertiary dark:bg-bg-tertiary size-3 rounded-full border" />
+
+						<!-- Icon dot (icons-card) -->
+						<div v-else-if="hasIcons" class="border-bg-white dark:border-bg-white bg-bg-brand-softer dark:bg-bg-brand-softer flex size-5 items-center justify-center rounded-full border-2">
+							<Icon :name="item.icon ?? 'lucide:check'" class="text-text-fg-info dark:text-text-fg-info size-2.5" />
+						</div>
+
+						<!-- Avatar dot (avatar) -->
+						<div v-else-if="hasAvatars" class="border-bg-white dark:border-bg-white flex size-5 items-center justify-center overflow-hidden rounded-full border-2">
+							<DynectAvatar :src="item.avatarSrc" :fallback="item.avatarFallback" size="xs" class="size-6!" />
+						</div>
+					</div>
+
+					<!-- Content -->
+					<div class="flex flex-col gap-5">
+						<!-- Heading & Paragraph -->
+						<div class="flex flex-col gap-2">
+							<!-- Slot: item-header for full custom header -->
+							<slot name="item-header" :item="item" :index="index">
+								<!-- Badge (date) -->
+								<div v-if="item.date" class="flex items-start">
+									<DynectBadge v-if="!isCardVariant" variant="gray" size="sm" icon="lucide:clock" :dismissible="item.dateDismissible ?? false">
+										{{ item.date }}
+									</DynectBadge>
+								</div>
+
+								<!-- Card variant: title + badge inline -->
+								<div v-if="isCardVariant" class="flex items-center gap-3">
+									<h4 v-if="item.title" class="text-text-heading dark:text-text-heading text-lg leading-[1.556] font-semibold">
+										{{ item.title }}
+									</h4>
+									<DynectBadge v-if="item.date" variant="brand" size="sm" icon="lucide:clock" :dismissible="item.dateDismissible ?? false">
+										{{ item.date }}
+									</DynectBadge>
+								</div>
+
+								<!-- Default variant title -->
+								<h4 v-if="!isCardVariant && item.title" class="text-text-heading dark:text-text-heading text-lg leading-[1.556] font-semibold">
+									{{ item.title }}
+								</h4>
+							</slot>
+
+							<!-- Description -->
+							<p v-if="item.description" class="text-text-body dark:text-text-body text-base leading-6 font-normal">
+								{{ item.description }}
+							</p>
+						</div>
+
+						<!-- Quote block (avatar/type3 variant) -->
+						<div v-if="item.quote" class="border-border-base dark:border-border-base bg-bg-secondary dark:bg-bg-secondary rounded-lg border p-3">
+							<p class="text-text-body dark:text-text-body text-sm leading-5 font-normal">
+								{{ item.quote }}
+							</p>
+						</div>
+
+						<!-- Slot: item-content for extra content -->
+						<slot name="item-content" :item="item" :index="index" />
+
+						<!-- Buttons -->
+						<div v-if="item.buttons?.length" class="flex items-center gap-3">
+							<DynectButton v-for="(btn, btnIdx) in item.buttons" :key="btnIdx" :color="(btn.color as any) ?? 'secondary'" size="sm" :left-icon="btn.leftIcon" :right-icon="btn.rightIcon" @click="btn.onClick?.()">
+								{{ btn.label }}
+							</DynectButton>
+						</div>
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<!-- STACKED CARDS VARIANT                                              -->
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<template v-else-if="isStackedCards">
+			<div class="flex flex-col" :style="{ gap: `${gap}px` }">
+				<div v-for="(item, index) in items" :key="index" class="border-border-base dark:border-border-base bg-bg-secondary dark:bg-bg-secondary rounded-xl border p-5">
+					<!-- Date heading -->
+					<h4 v-if="item.title" class="text-text-heading dark:text-text-heading mb-4 text-lg leading-[1.556] font-semibold">
+						{{ item.title }}
+					</h4>
+
+					<!-- Activity items -->
+					<div v-if="item.activities?.length" class="flex flex-col gap-4">
+						<div v-for="(activity, actIdx) in item.activities" :key="actIdx" class="flex items-start gap-2.5" :class="[actIdx < (item.activities?.length ?? 0) - 1 ? 'border-border-base dark:border-border-base border-b pb-4' : '']">
+							<!-- Avatar -->
+							<DynectAvatar :src="activity.avatarSrc" :fallback="activity.avatarFallback" size="xl" class="shrink-0" />
+
+							<!-- Info -->
+							<div class="flex flex-1 flex-col gap-2">
+								<div class="flex flex-col gap-0.5">
+									<p class="text-text-heading dark:text-text-heading text-base leading-6 font-light">
+										{{ activity.text }}
+									</p>
+									<p v-if="activity.quote" class="text-text-body-subtle dark:text-text-body-subtle text-sm leading-5 font-normal">
+										{{ activity.quote }}
+									</p>
+								</div>
+								<DynectBadge v-if="activity.badgeLabel" :variant="activity.badgeVariant ?? 'white'" size="sm">
+									{{ activity.badgeLabel }}
+								</DynectBadge>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<!-- HORIZONTAL VARIANT                                                 -->
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<template v-else-if="isHorizontal && !isHorizontalAdvanced">
+			<div class="border-border-base dark:border-border-base relative flex border-t pt-5" :style="{ gap: `${gap}px` }">
+				<div v-for="(item, index) in items" :key="index" class="relative flex-1">
+					<!-- Timeline dot -->
+					<div class="absolute -top-[calc(1.25rem+1px+6px)] left-0">
+						<div class="border-bg-white dark:border-bg-white bg-bg-tertiary dark:bg-bg-tertiary size-3 rounded-full border" />
+					</div>
+
+					<!-- Content -->
+					<div class="flex flex-col gap-5">
+						<div class="flex flex-col gap-2">
+							<slot name="item-header" :item="item" :index="index">
+								<DynectBadge v-if="item.date" variant="gray" size="sm" icon="lucide:clock" :dismissible="item.dateDismissible ?? false">
+									{{ item.date }}
+								</DynectBadge>
+								<h4 v-if="item.title" class="text-text-heading dark:text-text-heading text-lg leading-[1.556] font-semibold">
+									{{ item.title }}
+								</h4>
+							</slot>
+							<p v-if="item.description" class="text-text-body dark:text-text-body text-base leading-6 font-normal">
+								{{ item.description }}
+							</p>
+						</div>
+
+						<slot name="item-content" :item="item" :index="index" />
+
+						<div v-if="item.buttons?.length" class="flex items-center gap-3">
+							<DynectButton v-for="(btn, btnIdx) in item.buttons" :key="btnIdx" :color="(btn.color as any) ?? 'secondary'" size="sm" :left-icon="btn.leftIcon" :right-icon="btn.rightIcon" @click="btn.onClick?.()">
+								{{ btn.label }}
+							</DynectButton>
+						</div>
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<!-- HORIZONTAL ADVANCED VARIANT                                        -->
+		<!-- ════════════════════════════════════════════════════════════════════ -->
+		<template v-else-if="isHorizontalAdvanced">
+			<!-- Centered line behind -->
+			<div class="relative flex w-full items-center" :style="{ gap: `${gap ?? 40}px` }">
+				<!-- Horizontal line -->
+				<div class="border-border-base dark:border-border-base absolute top-1/2 left-0 h-px w-full -translate-y-1/2 border-t" />
+
+				<div v-for="(item, index) in items" :key="index" class="relative z-10 flex flex-1 flex-col items-center gap-4">
+					<!-- Badge -->
+					<DynectBadge v-if="item.date" variant="gray" size="sm" icon="lucide:clock">
+						{{ item.date }}
+					</DynectBadge>
+
+					<!-- Dot -->
+					<div class="border-bg-white dark:border-bg-white bg-bg-tertiary dark:bg-bg-tertiary size-3 rounded-full border" />
+
+					<!-- Title & Description -->
+					<div class="flex flex-col items-center gap-0.5">
+						<h4 v-if="item.title" class="text-text-heading dark:text-text-heading text-lg leading-[1.556] font-semibold">
+							{{ item.title }}
+						</h4>
+						<p v-if="item.description" class="text-text-body dark:text-text-body text-center text-base leading-6 font-normal">
+							{{ item.description }}
+						</p>
+					</div>
+
+					<!-- Link -->
+					<NuxtLink v-if="item.linkText" :to="item.linkHref ?? '#'" class="text-text-heading dark:text-text-heading flex items-center gap-1.5 text-sm font-medium">
+						{{ item.linkText }}
+						<Icon name="lucide:arrow-right" class="text-text-fg-info dark:text-text-fg-info size-4" />
+					</NuxtLink>
+
+					<slot name="item-content" :item="item" :index="index" />
+				</div>
+			</div>
+		</template>
+	</div>
+</template>

package/src/runtime/components/dynect/Toggle.vue

@@ -0,0 +1,100 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Toggle + Inline Label -->
+		<div class="relative flex items-center gap-2">
+			<button
+				:id="resolvedId"
+				type="button"
+				:aria-checked="modelValue ? 'true' : 'false'"
+				:aria-disabled="disabled"
+				:disabled="disabled"
+				:class="
+					cn(
+						// Base track styles
+						'relative inline-flex shrink-0 cursor-pointer items-center rounded-full border outline-none',
+						// Size variants
+						size === 'lg' ? 'h-6 w-11' : 'h-5 w-9',
+						// Checked / unchecked colors
+						modelValue ? 'bg-brand-700 border-brand-600' : 'bg-bg-tertiary border-border-base',
+						// Disabled state
+						disabled && 'cursor-not-allowed',
+						disabled && modelValue && 'bg-border-base border-border-base',
+						disabled && !modelValue && 'bg-bg-tertiary border-bg-tertiary opacity-80',
+						toggleClass
+					)
+				"
+				v-bind="$attrs"
+				@click="toggle"
+				@blur="handleBlur"
+			>
+				<span
+					:class="
+						cn(
+							// Thumb base
+							'pointer-events-none block rounded-full bg-white shadow-sm ring-0 transition-transform duration-200',
+							// Size
+							size === 'lg' ? 'size-5' : 'size-4',
+							// Position: translate based on checked state + size
+							modelValue ? (size === 'lg' ? 'translate-x-5.25' : 'translate-x-4.5') : 'translate-x-0.5',
+							// Disabled thumb tint
+							disabled && 'bg-gray-50'
+						)
+					"
+				/>
+			</button>
+
+			<label v-if="inlineLabel" :for="resolvedId" :class="cn('text-sm leading-none font-medium', disabled ? 'text-text-fg-disabled cursor-not-allowed' : 'text-text-body cursor-pointer', inlineLabelClass)">
+				<slot>{{ inlineLabel }}</slot>
+			</label>
+		</div>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface ToggleProps {
+	label?: string;
+	inlineLabel?: string;
+	name?: string;
+	id?: string;
+	size?: 'base' | 'lg';
+	tooltip?: string;
+	required?: boolean;
+	disabled?: boolean;
+	description?: string;
+	toggleClass?: string;
+	labelClass?: string;
+	inlineLabelClass?: string;
+	descriptionClass?: string;
+}
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+	size: 'base',
+});
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `toggle-${fallbackId}`);
+
+function toggle() {
+	if (!props.disabled) {
+		modelValue.value = !modelValue.value;
+	}
+}
+
+const { errorMessage, handleBlur } = useField(() => resolvedId.value, undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+</script>

package/src/runtime/components/ui/accordion/Accordion.vue

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

package/src/runtime/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionContent } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AccordionContent data-slot="accordion-content" v-bind="delegatedProps" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm">
+		<div :class="cn('pt-0 pb-4', props.class)">
+			<slot />
+		</div>
+	</AccordionContent>
+</template>

package/src/runtime/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionItem, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<AccordionItem v-slot="slotProps" data-slot="accordion-item" v-bind="forwardedProps" :class="cn('border-b last:border-b-0', props.class)">
+		<slot v-bind="slotProps" />
+	</AccordionItem>
+</template>

package/src/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronDown } from 'lucide-vue-next';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AccordionHeader class="flex">
+		<AccordionTrigger
+			data-slot="accordion-trigger"
+			v-bind="delegatedProps"
+			:class="
+				cn(
+					'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+					props.class
+				)
+			"
+		>
+			<slot />
+			<slot name="icon">
+				<ChevronDown class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+			</slot>
+		</AccordionTrigger>
+	</AccordionHeader>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';

package/src/runtime/components/ui/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { AlertVariants } from '.';
+import { cn } from '@/lib/utils';
+import { alertVariants } from '.';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	variant?: AlertVariants['variant'];
+}>();
+</script>
+
+<template>
+	<div data-slot="alert" :class="cn(alertVariants({ variant }), props.class)" role="alert">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/alert/AlertDescription.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="alert-description" :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/alert/AlertTitle.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="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,20 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+
+export const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
+	variants: {
+		variant: {
+			default: 'bg-card text-card-foreground',
+			destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+	},
+});
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/runtime/components/ui/alert-dialog/AlertDialog.vue

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

package/src/runtime/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogAction } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+		<slot />
+	</AlertDialogAction>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogCancel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+		<slot />
+	</AlertDialogCancel>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogContent, AlertDialogOverlay, AlertDialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<AlertDialogPortal>
+		<AlertDialogOverlay data-slot="alert-dialog-overlay" class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80" />
+		<AlertDialogContent
+			data-slot="alert-dialog-content"
+			v-bind="{ ...$attrs, ...forwarded }"
+			:class="
+				cn(
+					'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</AlertDialogContent>
+	</AlertDialogPortal>
+</template>