@witchcraft/ui 0.2.1-beta.3 → 0.2.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.2.1-beta.3",
+  "version": "0.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -4,8 +4,8 @@ import tailwindcss from '@tailwindcss/vite';
 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';
+import fs from 'node:fs';
 import IconsResolver from 'unplugin-icons/resolver';
 import ViteComponents from 'unplugin-vue-components/vite';
 import { unpluginIconViteOptions } from '../dist/runtime/build/unpluginIconViteOptions.js';

package/dist/runtime/build/WitchcraftUiResolver.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentResolver } from "unplugin-vue-components";
-export declare const WitchcraftUiResolver: ({ prefix, filter, }?: {
+import type { ComponentResolver } from "unplugin-vue-components";
+export declare const WitchcraftUiResolver: ({ prefix, filter }?: {
     prefix?: string;
     filter?: (name: string) => boolean;
 }) => ComponentResolver;

package/dist/runtime/build/generateTheme.js

@@ -1,10 +1,10 @@
 import { themeAsTailwindCss } from "metamorphosis/tailwind";
 import fs from "node:fs";
-import { resolve } from "path";
+import { resolve } from "node:path";
 import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js";
 import { theme } from "../theme.js";
 const css = themeAsTailwindCss(theme, themeConvertionOpts);
-import url from "url";
+import url from "node:url";
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const filepath = resolve(__dirname, "../assets/theme.css");
 const content = `/* Auto-generated, see gen:theme script. */

package/dist/runtime/components/Aria/Aria.vue

@@ -1,9 +1,11 @@
 <template>
-<div tabindex="0">{{ value }}</div>
+<div tabindex="0">
+	{{ value }}
+</div>
 </template>
 
 <script setup>
-defineOptions({ name: "aria" });
+defineOptions({ name: "Aria" });
 defineProps({
   value: { type: String, required: true }
 });

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
     value: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Icon/Icon.vue

@@ -8,14 +8,14 @@
 </template>
 
 <script setup>
-import { computed, useAttrs } from "vue";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "icon",
+  name: "Icon",
   inheritAttrs: false
 });
 const $attrs = useAttrs();
-const props = defineProps({});
+defineProps({});
 </script>
 
 <script>

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

@@ -10,7 +10,7 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "class">> {
 }
-declare const _default: __VLS_WithSlots<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: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 export default _default;

package/dist/runtime/components/LibButton/LibButton.vue

@@ -56,7 +56,6 @@
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:bg-neutral-800
 			dark:border-neutral-900
 			dark:disabled:border-neutral-800
 			dark:disabled:bg-neutral-900
@@ -168,8 +167,14 @@
   ...ariaLabel
 }"
 >
-	<slot name="label" v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }">
-		<label :id="`label-${id ?? fallbackId}`" class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1">
+	<slot
+		name="label"
+		v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }"
+	>
+		<label
+			:id="`label-${id ?? fallbackId}`"
+			class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1"
+		>
 			<slot name="icon"/>
 			<slot
 				v-bind="{ label }"
@@ -192,7 +197,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 const $attrs = useAttrs();
 defineOptions({
-  name: "lib-button"
+  name: "LibButton"
 });
 const fallbackId = getFallbackId();
 const props = defineProps({

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

@@ -7,7 +7,7 @@ Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindCla
     "aria-label": string;
 }>, 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<{}>, {
     color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
     label: string;
     disabled: boolean;

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -72,17 +72,16 @@
 </template>
 
 <script setup>
-import { ref, useSlots } from "vue";
+import { ref } from "vue";
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-checkbox",
+  name: "LibCheckbox",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["label", "wrapper"]);
-const $slots = useSlots();
 const fallbackId = getFallbackId();
 const props = defineProps({
   id: { type: String, required: false },
@@ -92,7 +91,7 @@ const props = defineProps({
   border: { type: Boolean, required: false, default: true },
   unstyle: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["submit"]);
+defineEmits(["submit"]);
 const el = ref(null);
 const inputEl = ref(null);
 const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });

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

@@ -15,7 +15,7 @@ WrapperTypes, RealProps {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     modelValue?: boolean;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
     submit: (val: boolean) => any;

package/dist/runtime/components/LibColorInput/LibColorInput.vue

@@ -14,7 +14,7 @@
 		<!-- 				 " -->
 		<!-- 	v-extract-root-el="extractEl" -->
 		<!-- > -->
-			
+
 		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
@@ -38,14 +38,16 @@
 			@click="togglePopup"
 		>
 			<template #label>
-				<div class="
+				<div
+					class="
 					color-input--swatch-wrapper
 					flex
 					w-full
 				"
 				>
 					<slot v-bind="{ stringColor, classes: swatchClasses }">
-						<div :class="swatchClasses"
+						<div
+							:class="swatchClasses"
 							:style="`background:${stringColor}`"
 						/>
 					</slot>
@@ -54,7 +56,8 @@
 						v-bind="{ tempStringColor, classes: swatchClasses }"
 						name="temp"
 					>
-						<div :class="swatchClasses"
+						<div
+							:class="swatchClasses"
 							:style="`background:${tempStringColor}`"
 						/>
 					</slot>
@@ -63,8 +66,12 @@
 		</lib-button>
 	</template>
 	<template #popup="{ extractEl }">
-		<div class="color-input--popup-wrapper p-5" v-extract-root-el="extractEl">
-			<lib-color-picker v-if="showPopup"
+		<div
+			class="color-input--popup-wrapper p-5"
+			v-extract-root-el="extractEl"
+		>
+			<lib-color-picker
+				v-if="showPopup"
 				:id="id ?? fallbackId"
 				:allow-alpha="allowAlpha"
 				:custom-representation="customRepresentation"
@@ -90,7 +97,7 @@ import LibColorPicker from "../LibColorPicker/LibColorPicker.vue";
 import LibPopup from "../LibPopup/LibPopup.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-color-input"
+  name: "LibColorInput"
 });
 const swatchClasses = `
 	color-input--swatch
@@ -106,7 +113,7 @@ const swatchClasses = `
 `;
 const fallbackId = getFallbackId();
 const t = useInjectedI18n();
-const props = defineProps({
+defineProps({
   label: { type: String, required: false },
   id: { type: String, required: false },
   allowAlpha: { type: Boolean, required: false, default: true },

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

@@ -22,7 +22,7 @@ Partial<Omit<ButtonHTMLAttributes, "class"> & TailwindClassProp & {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     modelValue?: RgbaColor;
     tempValue?: RgbaColor | undefined;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RgbaColor) => any;
     "update:tempValue": (value: RgbaColor | undefined) => any;
 } & {

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -114,7 +114,8 @@
 		/>
 	</div>
 	<div class="color-picker--footer flex w-full flex-1 gap-2">
-		<div class=" color-picker--preview-wrapper
+		<div
+			class=" color-picker--preview-wrapper
 				bg-transparency-squares
 				relative
 				aspect-square
@@ -123,7 +124,8 @@
 				shadow-xs
 			"
 		>
-			<div class="
+			<div
+				class="
 					color-picker--footer--preview
 					size-full
 					rounded-full
@@ -144,7 +146,11 @@
 					@input="parseInput"
 					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button class="color-picker--copy-button" :aria-label="t('copy')" @click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)">
+				<lib-button
+					class="color-picker--copy-button"
+					:aria-label="t('copy')"
+					@click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)"
+				>
 					<icon><i-fa6-regular-copy/></icon>
 				</lib-button>
 			</slot>
@@ -171,7 +177,6 @@
 
 <script setup>
 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";
@@ -183,13 +188,12 @@ import IFa6RegularCopy from "~icons/fa-regular/copy";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { copy } from "../../helpers/copy.js";
 import { twMerge } from "../../utils/twMerge.js";
-import aria from "../Aria/Aria.vue";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
 import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-color-picker"
+  name: "LibColorPicker"
 });
 const $attrs = useAttrs();
 const t = useInjectedI18n();

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

@@ -30,7 +30,7 @@ type __VLS_Slots = {} & {
 } & {
     buttons?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RgbaColor) => any;
     "update:tempValue": (value: RgbaColor | undefined) => any;
 } & {

package/dist/runtime/components/LibColorPicker/utils/truncate.js

@@ -1,5 +1,5 @@
 export function truncate(val, precision) {
   const str = val.toFixed(precision);
-  const float = parseFloat(str);
+  const float = Number.parseFloat(str);
   return float.toString();
 }

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -20,7 +20,10 @@
 			<component :is="darkModeState === 'dark' ? IFaSolidMoon : darkModeState === 'light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
 		</icon>
 	</template>
-	<template #default v-if="showLabel">
+	<template
+		#default
+		v-if="showLabel"
+	>
 		<div class="dark-mode-switcher--label pr-[2px]">
 			{{ t(`dark-mode-switcher.${darkModeState}`) }}
 		</div>
@@ -58,6 +61,6 @@ onMounted(() => {
 
 <script>
 export default {
-  name: "lib-dark-mode-switcher"
+  name: "LibDarkModeSwitcher"
 };
 </script>

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

@@ -1,6 +1,6 @@
 import { type ButtonHTMLAttributes } from "vue";
 import type { TailwindClassProp } from "../shared/props.js.js";
-declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:darkMode": (value: boolean) => any;
     "update:darkModeState": (value: "system" | "dark" | "light") => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{

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

@@ -21,7 +21,7 @@ declare var __VLS_8: any;
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SingleDate | RangeDate) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SingleDate | RangeDate) => any) | undefined;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { CalendarDate, getLocalTimeZone, ZonedDateTime } from "@internationalized/date";
+import { getLocalTimeZone } from "@internationalized/date";
 import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
 import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
@@ -76,7 +76,8 @@ const locale = useInjectedLocale().timeLocale;
 		`, attrs.class)"
 	>
 		<div class="date-range-picker--segments-input flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
-			<div :class="twMerge(`
+			<div
+				:class="twMerge(`
 				date-range-picker--start-segment
 				flex
 				items-center
@@ -123,7 +124,8 @@ const locale = useInjectedLocale().timeLocale;
 			<div class="date-range-picker--range-separator text-center px-1">
 				–
 			</div>
-			<div :class="twMerge(`
+			<div
+				:class="twMerge(`
 				date-range-picker--end-segment
 				flex
 				items-center
@@ -189,13 +191,12 @@ const locale = useInjectedLocale().timeLocale;
 	</DateRangePickerField>
 
 	<!-- side=bottom makes months easier to click through -->
-	<!-- @vue-expect-error to exists-->
 	<DateRangePickerContent
 		:side-offset="4"
 		:avoid-collisions="true"
 		:prioritize-position="true"
 		side="bottom"
-		to="#root"
+		:portal="{ to: '#root' }"
 		class="
 			date-range-picker--content
 			z-100
@@ -313,7 +314,8 @@ const locale = useInjectedLocale().timeLocale;
 					:key="month.value.toString()"
 				>
 					<DateRangePickerGridHead class="date-range-picker--grid-head">
-						<DateRangePickerGridRow class="
+						<DateRangePickerGridRow
+							class="
 							date-range-picker--grid-row
 							mb-1
 							flex

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue.d.ts

@@ -15,7 +15,7 @@ declare var __VLS_167: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_167) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RangeDate) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RangeDate) => any) | undefined;

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

@@ -74,7 +74,8 @@ onBeforeUnmount(() => {
   )
 "
 	>
-		<div :class="twMerge(`
+		<div
+			:class="twMerge(`
 			date-picker--segment
 			flex
 			items-center
@@ -139,13 +140,12 @@ onBeforeUnmount(() => {
 			</Icon>
 		</DatePickerTrigger>
 	</DatePickerField>
-	<!-- @vue-expect-error to exists-->
 	<DatePickerContent
 		:side-offset="4"
 		:avoid-collisions="true"
 		:prioritize-position="true"
 		side="bottom"
-		to="#root"
+		:portal="{ to: '#root' }"
 		class="
 			date-picker--content
 			z-100
@@ -178,7 +178,8 @@ onBeforeUnmount(() => {
 				max-w-[calc(1.2em*4+var(--spacing)*8+14ch)]
 			"
 		>
-			<DatePickerHeader class="
+			<DatePickerHeader
+				class="
 				date-picker--header
 				flex
 				items-center
@@ -276,7 +277,8 @@ onBeforeUnmount(() => {
 					:key="month.value.toString()"
 				>
 					<DatePickerGridHead class="date-picker--grid-head">
-						<DatePickerGridRow class="
+						<DatePickerGridRow
+							class="
 							date-picker--grid-row
 							mb-1
 							flex

package/dist/runtime/components/LibDatePicker/LibSingleDatePicker.vue.d.ts

@@ -15,7 +15,7 @@ declare var __VLS_157: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_157) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SingleDate) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SingleDate) => any) | undefined;

package/dist/runtime/components/LibDatePicker/LibTimeZonePicker.vue.d.ts

@@ -6,7 +6,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     "update:label": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/runtime/components/LibDebug/LibDebug.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="debug--wrapper
+<div
+	class="debug--wrapper
 		text-fg
 		dark:text-bg
 		flex
@@ -13,11 +14,15 @@
 >
 	<div class="debug--header flex justify-between">
 		<span class="debug--title font-bold">{{ title }}</span>
-		<LibButton class="debug--copy-button w-min-content" @click="copy()">
+		<LibButton
+			class="debug--copy-button w-min-content"
+			@click="copy()"
+		>
 			<icon><i-fa6-regular-copy/></icon>
 		</LibButton>
 	</div>
-	<pre v-if="value"
+	<pre
+		v-if="value"
 		:class="
   `
 			debug--value
@@ -68,7 +73,7 @@ const copy = () => {
 
 <script>
 export default {
-  name: "lib-debug"
+  name: "LibDebug"
   // https://v3.vuejs.org/guide/typescript-support.html#annotating-props
 };
 </script>

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

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     /** Sets the tab size in css. Defaults to 3. */
     tab?: number;
     title?: string;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The value to debug, can be anything. */
     value?: any;
     /** Sets the tab size in css. Defaults to 3. */

package/dist/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -1,7 +1,8 @@
 <template>
 <DevOnly>
 	<slot v-if="doShow && $attrs?.['as-child'] !== void 0"/>
-	<div v-else-if="doShow"
+	<div
+		v-else-if="doShow"
 		:class="twMerge(
   `
 			dev-only

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

@@ -1,3 +1,6 @@
+export interface Props {
+    show?: boolean;
+}
 declare module "vue" {
     interface GlobalComponents {
         DevOnly: any;
@@ -5,7 +8,7 @@ declare module "vue" {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     show?: boolean;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     show?: boolean;
 }> & Readonly<{}>, {
     show: boolean;