@witchcraft/ui 0.2.1-beta.3 → 0.2.1

package/dist/runtime/components/LibFileInput/LibFileInput.vue

@@ -1,6 +1,7 @@
 <template>
 <!-- todo aria errors -->
-<div :class="twMerge(
+<div
+	:class="twMerge(
   `file-input
 		justify-center
 		border-2
@@ -16,7 +17,8 @@
 )"
 	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 >
-	<div :class="twMerge(
+	<div
+		:class="twMerge(
   `
 		file-input--wrapper
 		relative justify-center`,
@@ -37,7 +39,10 @@
 				whitespace-nowrap
 			`)"
 		>
-			<slot v-if="compact || multiple || files.length === 0" name="icon">
+			<slot
+				v-if="compact || multiple || files.length === 0"
+				name="icon"
+			>
 				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
 			</slot>
 			<slot name="label">
@@ -52,7 +57,10 @@
 				{{ ` (${files.length})` }}
 			</span>
 		</label>
-		<label v-if="!compact && formats?.length > 0" class="file-input--formats-label flex flex-col items-center text-sm">
+		<label
+			v-if="!compact && formats?.length > 0"
+			class="file-input--formats-label flex flex-col items-center text-sm"
+		>
 			<slot name="formats">{{ t("file-input.accepted-formats") }}: </slot>
 			<div class="file-input--formats-list">
 				{{ extensions.join(", ") }}
@@ -82,7 +90,8 @@
 		>
 		<!--  click event allows event to fire even if the user picks the same file -->
 	</div>
-	<div v-if="!compact && files.length > 0"
+	<div
+		v-if="!compact && files.length > 0"
 		:class="twMerge(
   `file-input--previews
 			flex items-stretch justify-center gap-2 flex-wrap
@@ -94,7 +103,8 @@
 )"
 	>
 		<div class="file-input--preview-spacer flex-1"/>
-		<div class="file-input--preview-wrapper
+		<div
+			class="file-input--preview-wrapper
 				z-1
 				relative
 				flex
@@ -121,16 +131,21 @@
 			</div>
 
 			<div class="file-input--preview flex flex-initial basis-full justify-center">
-				<div v-if="entry.isImg"
+				<div
+					v-if="entry.isImg"
 					class="file-input--preview-image
 					bg-transparency-squares flex
 					h-[80px]   flex-wrap items-center
 					justify-center
 				"
 				>
-					<img class="max-h-full w-auto" :src="getSrc(entry.file)">
+					<img
+						class="max-h-full w-auto"
+						:src="getSrc(entry.file)"
+					>
 				</div>
-				<div v-if="!entry.isImg"
+				<div
+					v-if="!entry.isImg"
 					class="file-input--preview-no-image
 					flex h-[80px]
 					flex-1 basis-full flex-wrap items-center justify-center
@@ -139,7 +154,8 @@
 					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
 				</div>
 			</div>
-			<div class="
+			<div
+				class="
 				file-input--preview-filename
 				min-w-0
 				flex-1
@@ -168,7 +184,6 @@ 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 {} from "../../types/index.js";
 import { twMerge } from "../../utils/twMerge.js";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
@@ -191,7 +206,7 @@ watch(errors, () => {
   }
 });
 defineOptions({
-  name: "lib-file-input",
+  name: "LibFileInput",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["wrapper", "input", "previews"]);
@@ -250,9 +265,10 @@ const inputFile = async (e) => {
       errors.splice(0, errors.length);
     }
   }
+  return void 0;
 };
 </script>
 
 <script>
-export default { name: "lib-file-input" };
+export default { name: "LibFileInput" };
 </script>

package/dist/runtime/components/LibFileInput/LibFileInput.vue.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import { type FileInputError } from "../../types/index.js.js";
+import type { FileInputError } from "../../types/index.js.js";
 import { type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     input: (val: File[]) => any;
     errors: (val: FileInputError[]) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -16,8 +16,12 @@
 	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 	ref="inputWrapperEl"
 >
-	<slot name="label" v-bind="{ ...slotProps, label }">
-		<lib-label v-if="label || $slots.default"
+	<slot
+		name="label"
+		v-bind="{ ...slotProps, label }"
+	>
+		<lib-label
+			v-if="label || $slots.default"
 			:id="id ?? fallbackId"
 			:disabled="disabled"
 			:readonly="readonly"
@@ -79,8 +83,14 @@
   $['inner-wrapperAttrs']?.class
 )"
 	>
-		<slot name="left" v-bind="slotProps"/>
-		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
+		<slot
+			name="left"
+			v-bind="slotProps"
+		/>
+		<slot
+			name="input"
+			v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }"
+		>
 			<lib-simple-input
 				:class="twMerge(
   `input--input p-0`,
@@ -91,7 +101,10 @@
 				v-bind="inputProps"
 			/>
 		</slot>
-		<slot name="indicator" v-bind="{ isOpen, suggestionsIndicatorClickHandler }">
+		<slot
+			name="indicator"
+			v-bind="{ isOpen, suggestionsIndicatorClickHandler }"
+		>
 			<!-- todo, convert to button for accessibility ? -->
 			<div
 				v-if="suggestions"
@@ -99,7 +112,9 @@
 				:class="twMerge(`input--indicator flex flex-col justify-center`)"
 				@click="suggestionsIndicatorClickHandler"
 			>
-				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
+				<icon :class="isOpen && `rotate-180`">
+					<i-fa6-solid-chevron-up/>
+				</icon>
 			</div>
 		</slot>
 		<slot
@@ -122,9 +137,16 @@
 				/>
 			</template>
 		</slot>
-		<slot name="right" v-bind="slotProps"/>
+		<slot
+			name="right"
+			v-bind="slotProps"
+		/>
 
-		<slot v-if="suggestions" name="suggestions" v-bind="{ ...suggestionProps, ...slotProps }">
+		<slot
+			v-if="suggestions"
+			name="suggestions"
+			v-bind="{ ...suggestionProps, ...slotProps }"
+		>
 			<!-- todo 1px needs to be abstracted to var -->
 			<lib-suggestions
 				:class="twMerge(
@@ -147,7 +169,10 @@
 				v-bind="suggestionProps"
 			>
 				<template #item="itemSlotProps">
-					<slot name="suggestion-item" v-bind="itemSlotProps"/>
+					<slot
+						name="suggestion-item"
+						v-bind="itemSlotProps"
+					/>
 				</template>
 			</lib-suggestions>
 		</slot>
@@ -157,9 +182,8 @@
 
 <script setup>
 import { isBlank } from "@alanscodelog/utils/isBlank";
-import { isObject } from "@alanscodelog/utils/isObject";
 import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
-import { computed, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue";
+import { computed, nextTick, ref, toRef, useSlots, watch } from "vue";
 import IFa6SolidChevronUp from "~icons/fa6-solid/chevron-up";
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
 import { useSuggestionsInputAria } from "../../composables/useSuggestions.js";
@@ -171,7 +195,7 @@ import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
 import LibSuggestions from "../LibSuggestions/LibSuggestions.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-simple-input-deprecated",
+  name: "LibSimpleInputDeprecated",
   inheritAttrs: false
 });
 const $slots = useSlots();
@@ -270,6 +294,7 @@ const inputProps = computed(() => ({
   onBlur: handleBlur,
   onFocus: handleFocus,
   modelValue: $inputValue.value,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => {
     $inputValue.value = e;
     if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
@@ -311,17 +336,21 @@ const suggestionProps = computed(() => ({
   modelValue: $values.value ?? $modelValue.value.toString(),
   inputValue: $inputValue.value,
   isValid: props.isValid,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:inputValue": (e) => $inputValue.value = e,
   onSubmit: (e, suggestion, wasRemoved) => {
     $modelValue.value = wasRemoved ? "" : e;
     emit("submit", e, suggestion);
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => {
     $values.value &&= e;
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:isOpen": (e) => {
     isOpen.value = e;
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:activeSuggestion": (e) => activeSuggestion.value = e,
   ...$.value.suggestionsAttrs,
   class: void 0
@@ -333,6 +362,7 @@ const multivaluesProps = computed(() => ({
   disabled: props.disabled,
   readonly: props.readonly,
   modelValue: $values.value,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => $values.value = e,
   ...$.value.multivaluesAttrs,
   class: void 0

package/dist/runtime/components/LibLabel/LibLabel.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script setup>
-import { toRef, useAttrs } from "vue";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-label"
+  name: "LibLabel"
 });
 const fallbackId = getFallbackId();
 defineProps({

package/dist/runtime/components/LibLabel/LibLabel.vue.d.ts

@@ -1,5 +1,5 @@
-import { type LabelHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import type { LabelHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, LabelProps, LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
 type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
     unstyled?: boolean;
     valid?: boolean;
@@ -8,7 +8,7 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<LabelHTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     id: string;
     disabled: boolean;
     readonly: boolean;

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -84,9 +84,8 @@ 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 {} from "../shared/props.js";
 defineOptions({
-  name: "lib-multi-values",
+  name: "LibMultiValues",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["item"]);

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.js.js";
 type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>;
 type RealProps = LabelProps & BaseInteractiveProps & {
     border?: boolean;
@@ -15,7 +15,7 @@ declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awa
         readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (Props & {
         modelValue?: T[];
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

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

@@ -1,5 +1,6 @@
 <template>
-<div :class="twMerge(
+<div
+	:class="twMerge(
   `notification
 		max-w-700px
 		bg-neutral-50
@@ -22,7 +23,8 @@
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
 	<div class="notification--header flex-reverse flex justify-between">
-		<div v-if="notification.title"
+		<div
+			v-if="notification.title"
 			tabindex="0"
 			class="title
 				focus-outline flex
@@ -34,7 +36,8 @@
 		</div>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
-			<LibButton :border="false"
+			<LibButton
+				:border="false"
 				class="notification--copy-button text-neutral-700"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
@@ -50,21 +53,29 @@
 			</lib-button>
 		</div>
 	</div>
-	<div class="notification--message whitespace-pre-wrap" tabindex="0">
+	<div
+		class="notification--message whitespace-pre-wrap"
+		tabindex="0"
+	>
 		{{ notification.message }}
 	</div>
 	<div class="notification--footer flex items-end justify-between">
-		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+		<div
+			v-if="notification.code"
+			class="code text-xs text-neutral-700 dark:text-neutral-300"
+		>
 			Code: {{ notification.code }}
 		</div>
 		<div class="notification--footer-spacer flex-1 py-1"/>
-		<div v-if="notification.options"
+		<div
+			v-if="notification.options"
 			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
-			<lib-button :label="option"
+			<lib-button
+				:label="option"
 				:class="twMerge(
   `
 					notification--option-button
@@ -92,7 +103,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
 defineOptions({
-  name: "lib-notification",
+  name: "LibNotification",
   inheritAttrs: false
 });
 const $attrs = useAttrs();

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -1,5 +1,6 @@
 <template>
-<TransitionGroup name="list"
+<TransitionGroup
+	name="list"
 	tag="div"
 	:class="twMerge(`notifications
 			absolute
@@ -13,7 +14,8 @@
 		`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
-	<lib-notification class="pointer-events-auto"
+	<lib-notification
+		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
@@ -28,7 +30,8 @@
 	/>
 </Transition>
 <Transition>
-	<dialog v-show="topNotifications.length > 0"
+	<dialog
+		v-show="topNotifications.length > 0"
 		:id="id"
 		:class="twMerge(`notifications-modal
 			bg-transparent
@@ -40,7 +43,8 @@
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
+			<lib-notification
+				v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -53,13 +57,13 @@
 
 <script setup>
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { nextTick, onBeforeUnmount, ref, shallowReactive, Transition, TransitionGroup } from "vue";
+import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue";
 import LibNotification from "./LibNotification.vue";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "lib-notifications",
+  name: "LibNotifications",
   inheritAttrs: false
 });
 const props = defineProps({

package/dist/runtime/components/LibNotifications/LibNotifications.vue.d.ts

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from "vue";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & {
     /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
     handler?: NotificationHandler;
@@ -9,5 +9,5 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LibPagination/LibPagination.vue

@@ -7,7 +7,8 @@
 	role="navigation"
 	:aria-label="t('pagination.aria')"
 >
-	<slot v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
+	<slot
+		v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
 		name="link"
 		:i="prevLink.i"
 		:href="prevLink.href"
@@ -22,7 +23,8 @@
 		/>
 	</slot>
 	<div class="pagination--spacer flex-1"/>
-	<slot v-if="firstLink.i !== currentLink.i"
+	<slot
+		v-if="firstLink.i !== currentLink.i"
 		name="link"
 		:i="0"
 		:href="firstLink.href"
@@ -39,14 +41,18 @@
 			{{ firstLink.i }}
 		</a>
 	</slot>
-	<div v-if="prevLink.i - extraPages > firstLink.i" class="pagination--page-fill">
+	<div
+		v-if="prevLink.i - extraPages > firstLink.i"
+		class="pagination--page-fill"
+	>
 		...
 	</div>
 	<template
 		v-for="entry in extraPagesPrev"
 		:key="entry.i"
 	>
-		<slot name="link"
+		<slot
+			name="link"
 			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
@@ -61,14 +67,16 @@
 			</a>
 		</slot>
 	</template>
-	<slot name="current"
+	<slot
+		name="current"
 		:class="`pagination--link ${currentPageClasses}`"
 		tabindex="0"
 		:i="currentLink.i"
 		:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 		:aria_current="true"
 	>
-		<div :class="`pagination--current-page a ${currentPageClasses}`"
+		<div
+			:class="`pagination--current-page a ${currentPageClasses}`"
 			tabindex="0"
 			:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 			aria-current="true"
@@ -81,7 +89,8 @@
 		v-for="entry in extraPagesNext"
 		:key="entry.i"
 	>
-		<slot name="link"
+		<slot
+			name="link"
 			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
@@ -96,10 +105,15 @@
 			</a>
 		</slot>
 	</template>
-	<div v-if="nextLink.i + extraPages < total" class="pagination--page-fill" aria-hidden="true">
+	<div
+		v-if="nextLink.i + extraPages < total"
+		class="pagination--page-fill"
+		aria-hidden="true"
+	>
 		...
 	</div>
-	<slot v-if="lastLink.i !== currentLink.i"
+	<slot
+		v-if="lastLink.i !== currentLink.i"
 		name="link"
 		:class="`pagination--link ${pageClasses}`"
 		:i="lastLink.i"
@@ -140,7 +154,6 @@
 import { computed, useAttrs, watch } from "vue";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { twMerge } from "../../utils/twMerge.js";
-import {} from "../shared/props.js";
 const t = useInjectedI18n();
 const commonClasses = `
 	block
@@ -163,7 +176,7 @@ const currentPageClasses = `
 	scale-125
 `;
 defineOptions({
-  name: "lib-pagination",
+  name: "LibPagination",
   inheritAttrs: false
 });
 const props = defineProps({
@@ -211,6 +224,6 @@ const extraPagesNext = computed(() => [...Array(props.extraPages + 1)].map((_, i
 
 <script>
 export default {
-  name: "lib-pagination"
+  name: "LibPagination"
 };
 </script>

package/dist/runtime/components/LibPagination/LibPagination.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type TailwindClassProp } from "../shared/props.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
 /**
  * Pagination component.
  *
@@ -10,7 +10,7 @@ import { type TailwindClassProp } from "../shared/props.js.js";
  * </template>
  * ```
  */
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     customRoute: (route: string, i: number) => {
         i: number;
         href: string;

package/dist/runtime/components/LibPalette/LibPalette.vue

@@ -2,7 +2,10 @@
 <div class="theme-palette flex h-full flex-col items-center justify-center ">
 	<div class="theme-palette--container mx-auto ">
 		<div class="grid grid-cols-11 gap-2 gap-y-10 px-10">
-			<template v-for="color, i in colors" :key="color">
+			<template
+				v-for="color, i in colors"
+				:key="color"
+			>
 				<div
 					:style="`background-color: var(${color});`"
 					:class="`theme-palette--item h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
@@ -23,20 +26,18 @@
 </template>
 
 <script>
-export default { name: "lib-palette" };
+export default { name: "LibPalette" };
 </script>
 
 <script setup>
 import { keys } from "@alanscodelog/utils/keys";
-import {} from "metamorphosis";
-import {} from "../shared/props.js";
 const props = defineProps({
   id: { type: String, required: false },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
   border: { type: Boolean, required: false, default: true },
   unstyle: { type: Boolean, required: false, default: false },
-  theme: { type: Object, required: true, default: () => ({}) }
+  theme: { type: Object, required: false, default: () => ({}) }
 });
 const exclude = ["--color-bg", "--color-fg"];
 const colors = keys(props.theme.css).filter((key) => key.startsWith("--color") && !exclude.includes(key));

package/dist/runtime/components/LibPalette/LibPalette.vue.d.ts

@@ -1,9 +1,9 @@
-import { type Theme } from "metamorphosis";
-import { type BaseInteractiveProps, type LinkableByIdProps } from "../shared/props.js.js";
+import type { Theme } from "metamorphosis";
+import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js.js";
 declare const _default: import("vue").DefineComponent<LinkableByIdProps & BaseInteractiveProps & {
-    theme: Theme;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
-    theme: Theme;
+    theme?: Theme;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
+    theme?: Theme;
 }> & Readonly<{}>, {
     theme: Theme;
     disabled: boolean;