@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/src/module.ts

@@ -8,8 +8,8 @@ import {
 	useLogger,
 } from "@nuxt/kit"
 import tailwindcss from "@tailwindcss/vite"
-import { addImportsCustom } from "@witchcraft/nuxt-utils/utils/addImportsCustom.js"
-import { globFiles } from "@witchcraft/nuxt-utils/utils/globFiles.js"
+import { addImportsCustom } from "@witchcraft/nuxt-utils/utils/addImportsCustom"
+import { globFiles } from "@witchcraft/nuxt-utils/utils/globFiles"
 import { defu } from "defu"
 import fs from "fs"
 import { themeAsTailwindCss } from "metamorphosis/tailwind"
@@ -158,16 +158,23 @@ export default defineNuxtModule<ModuleOptions>({
 				logger.info(`Adding unplugin-icons`)
 				config.plugins ??= []
 				config.plugins = [
-					// we must prepend or the custom style options don't work when the module is used
-					ViteComponents({
-						resolvers: [
-							IconsResolver(),
-							// we don't need our resolver since we use nuxt instead
-						],
-					}),
-					Icons({
-						...unpluginIconViteOptions,
-					}),
+					...(
+						options.includeUnpluginIconsPlugins
+							? [
+								// we must prepend or the custom style options don't work when the module is used
+								ViteComponents({
+									resolvers: [
+										IconsResolver({prefix:"i"}),
+										// we don't need our resolver since we use nuxt instead
+									],
+								}),
+								Icons({
+									compiler: "vue3",
+									...unpluginIconViteOptions,
+								}),
+							]
+							: []	
+					),
 					tailwindcss() as any,
 					...config.plugins,
 				]

package/src/runtime/build/generateTheme.ts

@@ -1,4 +1,4 @@
-import { themeAsTailwindCss } from "metamorphosis/tailwind.js"
+import { themeAsTailwindCss } from "metamorphosis/tailwind"
 import fs from "node:fs"
 import { resolve } from "path"
 

package/src/runtime/components/LibButton/LibButton.stories.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { capitalize } from "@alanscodelog/utils/capitalize.js"
+import { capitalize } from "@alanscodelog/utils/capitalize"
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 import IconFaSolidBell from "~icons/fa-solid/bell"

package/src/runtime/components/LibButton/LibButton.vue

@@ -184,12 +184,12 @@
 </template>
 
 <script setup  lang="ts">
-import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { isBlank } from "@alanscodelog/utils/isBlank"
 import { type ButtonHTMLAttributes,computed, useAttrs } from "vue"
 
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 
 const $attrs = useAttrs()
@@ -204,7 +204,7 @@ const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
 	color: false,
 	label: "",
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -67,16 +67,12 @@
 </div>
 </template>
 <script setup  lang="ts">
-import { keys } from "@alanscodelog/utils/keys.js"
-import { omit } from "@alanscodelog/utils/omit.js"
-import { pick } from "@alanscodelog/utils/pick.js"
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
+import { type HTMLAttributes, type InputHTMLAttributes,ref, useSlots } from "vue"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 defineOptions({
 	name: "lib-checkbox",
@@ -89,7 +85,7 @@ const $slots = useSlots()
 
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
-	...baseInteractivePropsDefaults,
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 

package/src/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -170,10 +170,10 @@
 
 <script setup lang="ts">
 /* todo change to colorjsio for less dependencies */
-import { castType } from "@alanscodelog/utils/castType.js"
-import { clampNumber } from "@alanscodelog/utils/clampNumber.js"
-import { isArray } from "@alanscodelog/utils/isArray.js"
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { castType } from "@alanscodelog/utils/castType"
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
+import { isArray } from "@alanscodelog/utils/isArray"
+import { unreachable } from "@alanscodelog/utils/unreachable"
 import Color from "colorjs.io"
 import { computed, onMounted, reactive, type Ref, ref, type UnwrapRef,useAttrs, watch } from "vue"
 
@@ -181,6 +181,8 @@ import { safeConvertToHsva } from "./utils/safeConvertToHsva.js"
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js"
 import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js"
 
+import IFa6RegularCopy from "~icons/fa-regular/copy"
+
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { copy } from "../../helpers/copy.js"
 import type { HsvaColor, RgbaColor } from "../../types/index.js"

package/src/runtime/components/LibColorPicker/utils/safeConvertToHsva.ts

@@ -1,4 +1,4 @@
-import { clampNumber } from "@alanscodelog/utils/clampNumber.js"
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
 import Color from "colorjs.io"
 
 import type { HsvaColor, RgbaColor } from "../../../types/index.js"

package/src/runtime/components/LibColorPicker/utils/safeConvertToRgba.ts

@@ -1,4 +1,4 @@
-import { clampNumber } from "@alanscodelog/utils/clampNumber.js"
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
 import Color from "colorjs.io"
 
 import type { HsvaColor, RgbaColor } from "../../../types/index.js"

package/src/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -14,22 +14,9 @@
 	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
 		<icon
-			v-if="darkModeState==='dark'"
-			class="w-[1em] flex items-center content-vertical-holder"
+			class="w-[1em] items-center content-vertical-holder"
 		>
-			<i-fa-solid-moon/>
-		</icon>
-		<icon
-			v-else-if="darkModeState==='light'"
-			class="w-[1em] content-vertical-holder"
-		>
-			<i-ph-sun-bold/>
-		</icon>
-		<icon
-			v-else
-			class="w-[1em] content-vertical-holder"
-		>
-			<i-fa6-solid-circle-half-stroke/>
+			<component :is="darkModeState==='dark' ? IFaSolidMoon : darkModeState==='light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
 		</icon>
 	</template>
 	<template #default v-if="showLabel">
@@ -42,6 +29,10 @@
 <script lang="ts" setup>
 import { type ButtonHTMLAttributes,onMounted,useAttrs, watch } from "vue"
 
+import IFaSolidMoon from "~icons/fa-solid/moon"
+import IFa6SolidCircleHalfStroke from "~icons/fa6-solid/circle-half-stroke"
+import IPhSunBold from "~icons/ph/sun-bold"
+
 import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { twMerge } from "../../utils/twMerge.js"
@@ -49,6 +40,7 @@ import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 import type { TailwindClassProp } from "../shared/props.js"
 
+
 const t = useInjectedI18n()
 
 const emit = defineEmits<{
@@ -68,6 +60,7 @@ const {
 	darkModeState,
 } = useInjectedDarkMode()
 
+
 watch(darkMode, value => emit("update:darkMode", value))
 watch(darkModeState, value => emit("update:darkModeState", value))
 

package/src/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -6,6 +6,12 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
 
+import IRadixIconsCalendar from "~icons/radix-icons/calendar"
+import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
+import IRadixIconsChevronRight from "~icons/radix-icons/chevron-right"
+import IRadixIconsDoubleArrowLeft from "~icons/radix-icons/double-arrow-left"
+import IRadixIconsDoubleArrowRight from "~icons/radix-icons/double-arrow-right"
+
 import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
 import type { RangeDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/LibDatePicker/LibSingleDatePicker.vue

@@ -5,6 +5,12 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
 
+import IRadixIconsCalendar from "~icons/radix-icons/calendar"
+import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
+import IRadixIconsChevronRight from "~icons/radix-icons/chevron-right"
+import IRadixIconsDoubleArrowLeft from "~icons/radix-icons/double-arrow-left"
+import IRadixIconsDoubleArrowRight from "~icons/radix-icons/double-arrow-right"
+
 import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
 import type { SingleDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/LibDebug/LibDebug.stories.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { crop } from "@alanscodelog/utils/crop.js"
+import { crop } from "@alanscodelog/utils/crop"
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 import LibDebug from "./LibDebug.vue"

package/src/runtime/components/LibDebug/LibDebug.vue

@@ -32,6 +32,8 @@
 <script setup lang="ts">
 import { type PropType, useSlots } from "vue"
 
+import IFa6RegularCopy from "~icons/fa-regular/copy"
+
 import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -166,6 +166,10 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes, type InputHTMLAttributes,ref, shallowReactive, watch } from "vue"
 
+import IFa6RegularFile from "~icons/fa6-regular/file"
+import IFa6SolidArrowUpFromBracket from "~icons/fa6-solid/arrow-up-from-bracket"
+import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { type FileInputError } from "../../types/index.js"

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -151,12 +151,14 @@
 </div>
 </template>
 <script setup lang="ts">
-import { isBlank } from "@alanscodelog/utils/isBlank.js"
-import { isObject } from "@alanscodelog/utils/isObject.js"
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
+import { isBlank } from "@alanscodelog/utils/isBlank"
+import { isObject } from "@alanscodelog/utils/isObject"
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
 import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue"
 import type { ComponentExposed } from "vue-component-type-helpers"
 
+import IFa6SolidChevronUp from "~icons/fa6-solid/chevron-up"
+
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useSuggestionsInputAria } from "../../composables/useSuggestions.js"
 import { twMerge } from "../../utils/twMerge.js"
@@ -165,7 +167,7 @@ import LibLabel from "../LibLabel/LibLabel.vue"
 import LibMultiValues from "../LibMultiValues/LibMultiValues.vue"
 import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
 import LibSuggestions from "../LibSuggestions/LibSuggestions.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 /* #region base */
@@ -189,7 +191,7 @@ const props = withDefaults(defineProps<Props>(), {
 	valid: true,
 	suggestions: undefined,
 	updateOnlyOnSubmit: false,
-	...baseInteractivePropsDefaults,
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 const $ = useDivideAttrs(["wrapper", "inner-wrapper", "suggestions", "multivalues"] as const)

package/src/runtime/components/LibLabel/LibLabel.vue

@@ -23,7 +23,7 @@ import type { MakeRequired } from "@alanscodelog/utils/types"
 import { type LabelHTMLAttributes,toRef,useAttrs } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 
 defineOptions({
@@ -35,9 +35,8 @@ const fallbackId = getFallbackId()
 // eslint-disable-next-line no-undef
 withDefaults(defineProps<Props>(), {
 	id: "",
-	unstyled: undefined,
 	valid: true,
-	...baseInteractivePropsDefaults,
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 const $attrs = useAttrs()

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -72,15 +72,17 @@
 </template>
 
 <script setup lang="ts" generic="T extends string | number">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
 import { computed, type HTMLAttributes } from "vue"
 
+import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { copy } from "../../helpers/copy.js"
 import { twMerge } from "../../utils/twMerge.js"
 import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 defineOptions({
@@ -90,7 +92,7 @@ defineOptions({
 
 const $ = useDivideAttrs(["item"] as const)
 const props = withDefaults(defineProps<Props>(), {
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -81,6 +81,9 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
 
+import IFa6RegularCopy from "~icons/fa6-regular/copy"
+import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+
 import { copy } from "../../helpers/copy.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -51,7 +51,7 @@
 </Transition>
 </template>
 <script setup lang="ts">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
 import { type HTMLAttributes,nextTick, onBeforeUnmount, ref,shallowReactive, Transition, TransitionGroup } from "vue"
 
 import LibNotification from "./LibNotification.vue"

package/src/runtime/components/LibPalette/LibPalette.vue

@@ -27,10 +27,10 @@ export default { name: "lib-palette" }
 </script>
 
 <script setup  lang="ts">
-import { keys } from "@alanscodelog/utils/keys.js"
+import { keys } from "@alanscodelog/utils/keys"
 import { type Theme } from "metamorphosis"
 
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LinkableByIdProps } from "../shared/props.js"
+import { type BaseInteractiveProps,type LinkableByIdProps } from "../shared/props.js"
 
 
 const props = withDefaults(defineProps<
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<
 	theme: Theme
 }>(), {
 	theme: () => ({} as any),
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 const exclude = ["--color-bg", "--color-fg"]

package/src/runtime/components/LibPopup/LibPopup.vue

@@ -53,8 +53,8 @@ import { onMounted, nextTick, ref, useAttrs, watch , type HTMLAttributes } from
 import { getFallbackId, type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { castType } from "@alanscodelog/utils/castType.js"
-import { isArray } from "@alanscodelog/utils/isArray.js"
+import { castType } from "@alanscodelog/utils/castType"
+import { isArray } from "@alanscodelog/utils/isArray"
 import type { IPopupReference, PopupPosition, PopupPositioner, PopupPositionModifier, SimpleDOMRect } from "../../types/index.js"
 
 const fallbackId = getFallbackId()

package/src/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -97,7 +97,7 @@
 import { type HTMLAttributes,type PropType, ref, watch } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps,getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 // TODO move to utils
 const clampVal = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
@@ -111,7 +111,7 @@ const props = withDefaults(defineProps<Props>(), {
 	autohideOnComplete: -1,
 	keepSpaceWhenHidden: false,
 	clamp: () => [0, 100],
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 const hide = ref<boolean>(false)
 const psuedoHide = ref<boolean>(false)

package/src/runtime/components/LibRecorder/LibRecorder.vue

@@ -70,13 +70,13 @@
 </div>
 </template>
 <script setup lang="ts">
-import { keys } from "@alanscodelog/utils/keys.js"
+import { keys } from "@alanscodelog/utils/keys"
 import { computed, type HTMLAttributes ,onBeforeUnmount, onMounted, type PropType, ref, watch, watchPostEffect } from "vue"
 
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
 	name: "lib-recorder",
@@ -98,7 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
 	id: undefined,
 	binders: undefined,
 	recorder: undefined,
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 /**
  * Puts the element into recording mode if true. See {@link props.recorder}.

package/src/runtime/components/LibRoot/LibRoot.vue

@@ -32,14 +32,15 @@
 			($attrs as any).attrs?.class)"
 	>
 		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
-		<Notifications v-if="useNotifications && isClientSide"/>
+		<!-- @vue-expect-error data-allow-mismatch is for vue/nuxt to allow the hydration mismatch-->
+		<Notifications v-if="useNotifications && isClientSide" data-allow-mismatch/>
 		<slot/>
 	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { unreachable } from "@alanscodelog/utils/unreachable"
 import { type Theme } from "metamorphosis"
 import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
 

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -77,7 +77,7 @@ import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 
 defineOptions({
@@ -93,7 +93,7 @@ const props = withDefaults(defineProps<Props>(), {
 	valid: true,
 	label: "",
 	type: undefined,
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 
 const modelValue = defineModel<T>({ required: true })

package/src/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -67,7 +67,7 @@ import { useSuggestions } from "../../composables/useSuggestions.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
 import { twMerge } from "../../utils/twMerge.js"
 import LibCheckbox from "../LibCheckbox/LibCheckbox.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
 
 defineOptions({
 	name: "lib-suggestions",
@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(),
 	isValid: true,
 	canOpen: true,
 	filterKeydown: undefined,
-	...baseInteractivePropsDefaults
+	unstyle: false, disabled: false, readonly: false, border: true,
 })
 /**
  * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.

package/src/runtime/components/LibTable/LibTable.vue

@@ -93,7 +93,7 @@
 <!-- generic="T extends Record<string, any> -->"
 <script setup lang="ts" generic="T">
 import type { MakeRequired } from "@alanscodelog/utils"
-import { keys } from "@alanscodelog/utils/keys.js"
+import { keys } from "@alanscodelog/utils/keys"
 import { computed, type PropType, ref, type TableHTMLAttributes } from "vue"
 
 import { vResizableCols } from "../../directives/vResizableCols.js"

package/src/runtime/components/Template/NAME.vue

@@ -10,10 +10,10 @@
 </template>
 <script setup  lang="ts">
  
-import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, type PropType, reactive, type Ref, ref, watch } from "vue"
+import { type HTMLAttributes, ref } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { baseInteractiveProps, type TailwindClassProp } from "../shared/props.js"
+import { type TailwindClassProp } from "../shared/props.js"
 
 
 defineOptions({

package/src/runtime/components/shared/props.ts

@@ -155,12 +155,6 @@ export interface PopupProps {
 	canClose?: boolean
 }
 
-export const baseInteractiveProps = {
-	unstyle: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
-	disabled: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
-	readonly: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
-	border: { type: Boolean as Function as PropType<boolean>, required: false, default: true },
-} as const
 
 export type BaseInteractiveProps = {
 	/** Default is false. */
@@ -172,12 +166,14 @@ export type BaseInteractiveProps = {
 	/** Removes styles from the component. Default is false. */
 	unstyle?: boolean
 }
-export const baseInteractivePropsDefaults = {
-	disabled: false,
-	readonly: false,
-	border: true,
-	unstyle: false,
-}
+
+// see https://github.com/nuxt/module-builder/issues/649
+// export const baseInteractivePropsDefaults = {
+// 	disabled: false,
+// 	readonly: false,
+// 	border: true,
+// 	unstyle: false,
+// }
 
 /**
 	* @internal

package/src/runtime/composables/useAccesibilityOutline.ts

@@ -1,4 +1,4 @@
-import { castType } from "@alanscodelog/utils/castType.js"
+import { castType } from "@alanscodelog/utils/castType"
 import { onBeforeUnmount, onMounted, type Ref, ref, watch } from "vue"
 
 /**

package/src/runtime/composables/useDivideAttrs.ts

@@ -1,4 +1,4 @@
-import { keys } from "@alanscodelog/utils/keys.js"
+import { keys } from "@alanscodelog/utils/keys"
 import { computed, type Ref, useAttrs } from "vue"
 
 /**

package/src/runtime/composables/useSuggestions.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-console */
 import { type AnyFunction } from "@alanscodelog/utils"
-import { isBlank } from "@alanscodelog/utils/isBlank.js"
-import { isObject } from "@alanscodelog/utils/isObject.js"
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { isBlank } from "@alanscodelog/utils/isBlank"
+import { isObject } from "@alanscodelog/utils/isObject"
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
 import { computed, type Ref, ref, toRaw, watch } from "vue"
 
 import { type SuggestionsEmits,type SuggestionsOptions } from "../components/shared/props.js"

package/src/runtime/directives/vDetectFlex.ts

@@ -1,7 +1,7 @@
-import { castType } from "@alanscodelog/utils/castType.js"
-import { last } from "@alanscodelog/utils/last.js"
-import { throttle } from "@alanscodelog/utils/throttle.js"
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { castType } from "@alanscodelog/utils/castType"
+import { last } from "@alanscodelog/utils/last"
+import { throttle } from "@alanscodelog/utils/throttle"
+import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Directive } from "vue"
 
 import { globalResizeObserver } from "../globalResizeObserver.js"

package/src/runtime/directives/vExtractRootEl.ts

@@ -9,7 +9,7 @@ import type { Directive } from "vue"
  *
  * One can create a ref:
  * ```ts
- * import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl.js"
+ * import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl"
  * const el = ref<HTMLElement|null>(null)
  *
  * ```