@dynect/base 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynect/base",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Reusable Nuxt base module — components, composables, utils, plugins and i18n from the Dynect design system.",
   "type": "module",
   "license": "MIT",

package/src/module.ts

@@ -102,6 +102,7 @@ export default defineNuxtModule<DynectBaseOptions>({
 			await installModule('shadcn-nuxt', {
 				prefix: '',
 				componentDir: shadcnComponentDir,
+				...options.shadcn,
 			});
 		}
 

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Types ────────────────────────────────────────────────────────────────────
 export interface AccordionItemData {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'default';
 type AlertType = 'default' | 'complex' | 'border-top' | 'small';

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

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
 import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface AutocompleteOption {
 	label: string;
@@ -281,7 +281,7 @@ function clearValue() {
 										<!-- Avatar slot -->
 										<template v-if="option.avatar || $slots.optionAvatar">
 											<slot name="optionAvatar" :option="option">
-												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" >
+												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" />
 											</slot>
 										</template>
 
@@ -342,7 +342,7 @@ function clearValue() {
 										<!-- Avatar slot -->
 										<template v-if="option.avatar || $slots.optionAvatar">
 											<slot name="optionAvatar" :option="option">
-												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" >
+												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" />
 											</slot>
 										</template>
 

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

@@ -2,8 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-import { getAvatarText } from '@/utils/function';
+import { cn } from '../../lib/utils';
+import { getAvatarText } from '../../utils/function';
 
 // ── Variants ────────────────────────────────────────────────────────────────
 const avatarVariants = cva('relative flex shrink-0 rounded-full ring-1 ring-border-base dark:ring-border-base', {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Variants ────────────────────────────────────────────────────────────────
 const groupVariants = cva('flex items-center overflow-hidden', {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Variants ────────────────────────────────────────────────────────────────
 const wrapperVariants = cva('flex items-center', {

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Variants ────────────────────────────────────────────────────────────────
 const badgeVariants = cva('inline-flex max-w-fit items-center justify-center gap-1 font-medium whitespace-nowrap border', {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { Primitive, type PrimitiveProps } from 'reka-ui';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 import { buttonVariants, type ButtonVariants } from '@/components/ui/button';
 
 // ── Props ─────────────────────────────────────────────────────────────────────

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

@@ -44,7 +44,7 @@
 import { useField } from 'vee-validate';
 import { computed } from 'vue';
 import { useId } from 'nuxt/app';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface AppCheckboxProps {
 	// Core Props

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

@@ -24,7 +24,7 @@
 						<Icon name="lucide:calendar-days" />
 					</template>
 				</DynectInput>
-				<input :id="`${resolvedId}`" v-model="modelValue" type="hidden" >
+				<input :id="`${resolvedId}`" v-model="modelValue" type="hidden" />
 			</PopoverTrigger>
 
 			<PopoverContent class="w-auto rounded-xl bg-white p-0 dark:bg-gray-900" :align="align">
@@ -55,7 +55,7 @@ import { computed, readonly, ref, watch } from 'vue';
 import { useId } from 'nuxt/app';
 import type { DateValue } from '@internationalized/date';
 import { DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 import type { LayoutTypes } from '../ui/calendar';
 
 export interface DatePickerProps {

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

@@ -14,7 +14,7 @@
 					:state="errorMessage ? 'danger' : 'default'"
 					:aria-invalid="!!errorMessage"
 					:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
-					:readonly="readonly"
+					:readonly="props.readonly"
 					:class="cn('cursor-pointer ring-inset', buttonClass)"
 				>
 					<template #leading>
@@ -58,7 +58,7 @@ import { computed, readonly, ref, watch } from 'vue';
 import { useId } from 'nuxt/app';
 import type { DateValue } from '@internationalized/date';
 import { DateFormatter, getLocalTimeZone, today, parseDate } from '@internationalized/date';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface DateRangeValue {
 	start: Date | string | undefined | any;

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface Props {
 	/** Description text to display */

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface Props {
 	/** Error message to display */

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate';
 import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface Props {
 	/** Label text */

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface Props {
 	/** The label text to display */

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

@@ -90,7 +90,7 @@
 
 <script setup lang="ts" generic="T extends DynectGanttFeature">
 import { computed } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 import type { GanttFeature, GanttRange } from '../../composables/useGantt';
 
 export interface DynectGanttFeature extends GanttFeature {

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

@@ -4,7 +4,7 @@ import { computed, readonly } from 'vue';
 import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 
 type InputSize = 'sm' | 'base' | 'lg' | 'xl';
 type InputState = 'default' | 'success' | 'danger';
@@ -128,7 +128,7 @@ const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h
 						<span>{{ addonText }}</span>
 					</slot>
 				</div>
-				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="props.readonly" :class="textCls" @blur="handleBlur" />
 				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
 					<slot name="trailing">
 						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
@@ -145,7 +145,7 @@ const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h
 				<div :class="cn('border-border-base-medium flex shrink-0 items-center justify-center self-stretch rounded-l-xl border-r', addonSzCls, iconCls)">
 					<slot name="addon-icon"><Icon name="lucide:user" :class="iconSize" /></slot>
 				</div>
-				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="props.readonly" :class="textCls" @blur="handleBlur" />
 				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
 					<slot name="trailing">
 						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
@@ -162,7 +162,7 @@ const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h
 				<div :class="cn(iconCls, 'flex shrink-0 items-center pl-3')">
 					<slot name="leading"><Icon name="lucide:user" :class="iconSize" /></slot>
 				</div>
-				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="props.readonly" :class="textCls" @blur="handleBlur" />
 				<div class="shrink-0 pr-2">
 					<DynectButton type="button" color="secondary" size="xs" :disabled="disabled" @click="emits('button-click')">
 						<template #leftIcon>
@@ -189,10 +189,10 @@ const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h
 					:type="($attrs.type as any) ?? 'text'"
 					:placeholder="placeholder ?? '—'"
 					:disabled="disabled"
-					:readonly="readonly"
+					:readonly="props.readonly"
 					:class="cn(textColorCls, 'text-center text-sm font-normal')"
 					@blur="handleBlur"
-				>
+				/>
 				<div :class="cn(iconCls, 'absolute top-1/2 right-2.5 flex shrink-0 -translate-y-1/2 items-center')">
 					<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
 						<Icon name="lucide:x" class="size-4" />
@@ -213,7 +213,7 @@ const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h
 				<div v-if="$slots.leading" :class="cn(iconCls, 'flex shrink-0 items-center pl-2.5', props.iconClass)">
 					<slot name="leading" />
 				</div>
-				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="props.readonly" :class="textCls" @blur="handleBlur" />
 				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
 					<slot name="trailing">
 						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">

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

@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends KanbanItemProps, C extends KanbanColumnProps">
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 import type { KanbanItemProps, KanbanColumnProps } from '../../composables/useKanban';
 
 export interface DynectKanbanColumn extends KanbanColumnProps {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface DialogProps {
 	open?: boolean;

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

@@ -6,7 +6,7 @@ import type { HTMLAttributes } from 'vue';
 import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp';
 import { useForwardPropsEmits } from 'reka-ui';
 import { reactiveOmit } from '@vueuse/core';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 /**
  * OTP Input variant types (matching the Dynect design)

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Variants ────────────────────────────────────────────────────────────────
 const trackVariants = cva('w-full overflow-hidden rounded-full bg-bg-quaternary', {

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

@@ -40,7 +40,7 @@
 import { useField } from 'vee-validate';
 import { computed } from 'vue';
 import { useId } from 'nuxt/app';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 defineOptions({
 	inheritAttrs: false,

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

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
 import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 
 export interface SelectOption {
 	label: string;

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

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
 import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 import type { SelectOption } from './Select.vue';
 
 type SelectSize = 'sm' | 'base' | 'lg' | 'xl';

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 interface SheetProps {
 	open?: boolean;

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toUpperCase } from '../../utils/function';
 import { useI18n } from 'vue-i18n';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 const { locale, setLocale } = useI18n();
 const props = withDefaults(
 	defineProps<{

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

@@ -1,6 +1,10 @@
-<script setup lang="ts" generic="TData extends Record<string, any>
-import { computed, onMounted, ref, watch } from 'vue';">
-import { cn } from '@/lib/utils';
+<script
+	setup
+	lang="ts"
+	generic="TData extends Record<string, any>
+import { computed, onMounted, ref, watch } from 'vue';"
+>
+import { cn } from '../../lib/utils';
 
 // Column definition
 export interface TableColumn<T = any> {

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

@@ -107,7 +107,7 @@ import { computed, readonly, ref, watch } from 'vue';
 import { useId } from 'nuxt/app';
 import { onClickOutside } from '@vueuse/core';
 import { cva } from 'class-variance-authority';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 
 export interface TagsInputOption {
 	label: string;

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

@@ -92,7 +92,7 @@
 					@input="onInput"
 					@keyup.enter="onEnter"
 					@keyup.space="onSpace"
-				>
+				/>
 
 				<div v-if="!disabled && !inputOptions.readonly" :class="cn(iconCls, 'flex shrink-0 items-center', variant === 'spaced' ? inputSizeClasses[sz] : 'pr-3')">
 					<DynectButton v-if="data.phone" type="button" color="ghost" size="xs" icon-only left-icon="lucide:x" :disabled="disabled || inputOptions.readonly" aria-label="Clear phone number" @click="clearPhone" />
@@ -113,7 +113,7 @@ import { computed, nextTick, onMounted, reactive, readonly, ref, useTemplateRef,
 import { parsePhoneNumberFromString, type CountryCode, type NumberFormat } from 'libphonenumber-js/max';
 import { cva } from 'class-variance-authority';
 import { useState, useId } from 'nuxt/app';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 
 type InputSize = 'sm' | 'base' | 'lg' | 'xl';
 type VariantState = 'default' | 'success' | 'danger' | 'disabled' | 'readonly';

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

@@ -2,7 +2,7 @@
 import { watch } from 'vue';
 import type { Content, Extensions } from '@tiptap/vue-3';
 import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';

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

@@ -4,7 +4,7 @@ import { computed, readonly } from 'vue';
 import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
-import { cn, inputSizeClasses } from '@/lib/utils';
+import { cn, inputSizeClasses } from '../../lib/utils';
 
 type TextareaSize = 'sm' | 'base' | 'lg' | 'xl';
 type TextareaState = 'default' | 'success' | 'danger';
@@ -99,7 +99,7 @@ const textCls = computed(() => cn(textColorCls.value, inputSizeClasses[sz.value]
 
 		<!-- Textarea Wrapper -->
 		<div :class="cn(wrapperCls, props.class)">
-			<textarea :id="resolvedId" v-model="modelValue" autocomplete="off" :name="resolvedId" :placeholder="placeholder ?? 'Enter text...'" :disabled="disabled" :readonly="readonly" :rows="rows" :maxlength="maxlength" :minlength="minlength" :class="textCls" @blur="handleBlur" />
+			<textarea :id="resolvedId" v-model="modelValue" autocomplete="off" :name="resolvedId" :placeholder="placeholder ?? 'Enter text...'" :disabled="disabled" :readonly="props.readonly" :rows="rows" :maxlength="maxlength" :minlength="minlength" :class="textCls" @blur="handleBlur" />
 		</div>
 
 		<!-- Description -->

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

@@ -38,7 +38,7 @@
 							:disabled="disabled"
 							class="border-border-base focus:border-dynect-600 focus:ring-dynect-600/20 dark:focus:border-dynect-400 w-16 rounded-lg border bg-white py-2 text-center text-lg font-semibold text-gray-900 focus:ring-2 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 							@blur="handleHoursBlur"
-						>
+						/>
 						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-down" class="h-8 w-8" @click="decrementHours" />
 						<span class="text-text-body-subtle text-xs">Hours</span>
 					</div>
@@ -57,7 +57,7 @@
 							:disabled="disabled"
 							class="border-border-base focus:border-dynect-600 focus:ring-dynect-600/20 dark:focus:border-dynect-400 w-16 rounded-lg border bg-white py-2 text-center text-lg font-semibold text-gray-900 focus:ring-2 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 							@blur="handleMinutesBlur"
-						>
+						/>
 						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-down" class="h-8 w-8" @click="decrementMinutes" />
 						<span class="text-text-body-subtle text-xs">Minutes</span>
 					</div>
@@ -90,7 +90,7 @@
 import { useField } from 'vee-validate';
 import { computed, readonly, ref, watch } from 'vue';
 import { useId } from 'nuxt/app';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 defineOptions({
 	inheritAttrs: false,

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 // ── Types ───────────────────────────────────────────────────────────────────
 export interface TimelineButton {

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

@@ -63,7 +63,7 @@
 import { useField } from 'vee-validate';
 import { computed } from 'vue';
 import { useId } from 'nuxt/app';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface ToggleProps {
 	label?: string;