@dynect/base 0.10.4 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynect/base",
-  "version": "0.10.4",
+  "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

@@ -1,5 +1,4 @@
 import { addComponentsDir, addImports, addImportsDir, addPlugin, createResolver, defineNuxtModule, installModule } from '@nuxt/kit';
-import { defu } from 'defu';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 
@@ -46,7 +45,7 @@ export default defineNuxtModule<DynectBaseOptions>({
 		veeValidate: {},
 		colorMode: {},
 		i18n: {},
-		shadcn: { prefix: '' },
+		shadcn: {},
 		icon: {},
 		plugins: { toast: true, ssrWidth: true },
 	},
@@ -97,78 +96,67 @@ export default defineNuxtModule<DynectBaseOptions>({
 		}
 
 		// ── Install required Nuxt modules ────────────────────────────────────────
-		// installModule is marked @deprecated in @nuxt/kit but is the only practical
-		// API for installing sub-modules with dynamic options during a module's setup.
 		if (options.shadcn !== false) {
-			// Extract componentDir separately — keeping it out of defaults prevents
-			// defu from always populating it, which would override the computed path.
-			const { componentDir: userComponentDir, ...shadcnRest } = (options.shadcn ?? {}) as { prefix?: string; componentDir?: string };
-			const shadcnComponentDir = userComponentDir ?? (isStandalone ? join(runtimeComponentsDir, 'ui') : '~/components/ui');
+			const shadcnComponentDir = isStandalone ? join(runtimeComponentsDir, 'ui') : '~/components/ui';
 
-			await installModule('shadcn-nuxt', { prefix: '', ...shadcnRest, componentDir: shadcnComponentDir }); // NOSONAR
+			await installModule('shadcn-nuxt', {
+				prefix: '',
+				componentDir: shadcnComponentDir,
+				...options.shadcn,
+			});
 		}
 
 		if (options.veeValidate !== false) {
-			await installModule('@vee-validate/nuxt', options.veeValidate ?? {}); // NOSONAR
+			await installModule('@vee-validate/nuxt', options.veeValidate ?? {});
 		}
 
 		if (options.colorMode !== false) {
-			// defu(user, defaults): user keys win; nested objects are deep-merged, not replaced
-			await installModule(
-				'@nuxtjs/color-mode',
-				defu(options.colorMode ?? {}, {
-					// NOSONAR
-					preference: 'system',
-					fallback: 'light',
-					classPrefix: '',
-					classSuffix: '',
-					storage: 'cookie',
-					storageKey: 'dynect_color_mode',
-				})
-			);
+			await installModule('@nuxtjs/color-mode', {
+				preference: 'system',
+				fallback: 'light',
+				classPrefix: '',
+				classSuffix: '',
+				storage: 'cookie',
+				storageKey: 'dynect_color_mode',
+				...options.colorMode,
+			});
 		}
 
 		if (options.i18n !== false) {
 			const langDir = isStandalone ? resolver.resolve('./runtime/assets/lang') : resolver.resolve('../../../app/assets/lang');
 
-			await installModule(
-				'@nuxtjs/i18n',
-				defu(options.i18n ?? {}, {
-					// NOSONAR
-					locales: [
-						{ code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
-						{ code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
-					],
-					langDir,
-					defaultLocale: 'en',
-					strategy: 'no_prefix',
-					detectBrowserLanguage: {
-						useCookie: true,
-						cookieKey: 'dynect_language',
-						cookieSecure: true,
-						redirectOn: 'root',
-						alwaysRedirect: true,
-					},
-				})
-			);
+			await installModule('@nuxtjs/i18n', {
+				locales: [
+					{ code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
+					{ code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
+				],
+				langDir,
+				defaultLocale: 'en',
+				strategy: 'no_prefix',
+				detectBrowserLanguage: {
+					useCookie: true,
+					cookieKey: 'dynect_language',
+					cookieSecure: true,
+					redirectOn: 'root',
+					alwaysRedirect: true,
+				},
+				...options.i18n,
+			});
 		}
 
 		if (options.icon !== false) {
-			await installModule(
-				'@nuxt/icon',
-				defu(options.icon ?? {}, {
-					// NOSONAR
-					provider: 'server',
-					mode: 'svg',
-					serverBundle: {
-						collections: ['heroicons', 'lucide', 'mdi'],
-						remote: false,
-					},
-				})
-			);
+			await installModule('@nuxt/icon', {
+				provider: 'server',
+				mode: 'svg',
+				serverBundle: {
+					collections: ['heroicons', 'lucide', 'mdi'],
+					remote: false,
+				},
+				...options.icon,
+			});
 		}
 
-		await installModule('@pinia/nuxt'); // NOSONAR
+		await installModule('@pinia/nuxt');
 
 		// ── CSS ──────────────────────────────────────────────────────────────────
 		const cssPath = isStandalone ? resolver.resolve('./runtime/assets/css/main.css') : resolver.resolve('../../../app/assets/css/main.css');
@@ -178,13 +166,13 @@ export default defineNuxtModule<DynectBaseOptions>({
 		}
 
 		// ── Components ───────────────────────────────────────────────────────────
-		for (const dir of options.dirs) {
+		for (const dir of options.dirs!) {
 			const dirPath = join(componentsBase, dir);
 			if (!existsSync(dirPath)) continue;
 
 			addComponentsDir({
 				path: dirPath,
-				prefix: DIR_CONFIGS[dir].prefix,
+				prefix: DIR_CONFIGS[dir]!.prefix,
 				pathPrefix: false,
 				global: options.global,
 			});

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;